图片组件增加压缩参数配置，默认开启图片压缩，避免润乾与系统图片方向信息不一致

src/business/platform/file/image/index.vue

@@ -85,6 +85,8 @@
             :multiple="multiple"
             :accept="accept"
             :file-size="size"
+            :compress-option="compressOption"
+            file-type="image"
             @close="visible => uploaderSelectorVisible = visible"
             @action-event="handleUpload"
         />
@@ -103,6 +105,7 @@ import IbpsUploaderSelectorDialog from '@/business/platform/file/uploader'
 import IbpsImageViewer from '@/components/ibps-file-viewer/image'
 import { TRANSFER_DATA } from '@/constant'
 import VueDraggable from 'vuedraggable'
+import { compress } from '../utils/compress.js'
 
 export default {
     name: 'ibps-image',
@@ -145,6 +148,15 @@ export default {
             type: String,
             default: 'attachment'
         },
+        compressOption: {
+            type: Object,
+            default: () => ({
+                isCompress: 'Y', // 是否压缩
+                maxWidth: 1000, // 最大宽度（px）
+                maxFileSize: Math.round(1024 * 1024 * 0.2), // 200KB
+                quality: 0.8 // 图片质量（0-1）
+            })
+        },
         store: {
             type: String,
             default: 'json',
@@ -414,6 +426,16 @@ export default {
          * 文件上传
          */
         httpRequest (options) {
+            const { isCompress, maxWidth, maxFileSize, quality } = this.compressOption || {}
+            if (isCompress === 'Y') {
+                return compress(options.file, maxWidth, maxFileSize, quality).then((file) => {
+                    return uploadFile(file, {}).then((response) => {
+                        const data = response.data
+                        this.setCacheData(data)
+                        this.fileList.push(data)
+                    })
+                })
+            }
             return uploadFile(options.file, {}).then((response) => {
                 const data = response.data
                 this.setCacheData(data)

src/business/platform/file/uploader/index.vue

@@ -25,6 +25,8 @@
                     :init="dialogVisible"
                     :limit="limit"
                     :upload-method="uploadMethod"
+                    :compress-option="compressOption"
+                    :file-type="fileType"
                     @callback="uploadCallback"
                 />
             </el-tab-pane>
@@ -101,6 +103,14 @@ export default {
         uploadMethod: {
             type: String,
             default: 'normal'
+        },
+        compressOption: {
+            type: Object,
+            default: () => {}
+        },
+        fileType: {
+            type: String,
+            default: 'attachment'
         }
     },
     data () {

src/business/platform/file/uploader/upload.vue

@@ -62,6 +62,8 @@
 import { uploadFile, remove, deleteFile } from '@/api/platform/file/attachment'
 import { uploadTemplateFile } from '@/api/platform/file/onlyoffice'
 import { fileTypes, allFileTypes, accept as acceptTypes } from '@/business/platform/file/constants/fileTypes'
+import { compress } from '../utils/compress.js'
+
 export default {
     props: {
         height: String,
@@ -74,6 +76,16 @@ export default {
         uploadMethod: {
             type: String,
             default: 'normal'
+        },
+        // 图片压缩配置
+        compressOption: {
+            type: Object,
+            default: () => {}
+        },
+        // 控件类型：附图上传-image, 附件上传-attachment
+        fileType: {
+            type: String,
+            default: 'attachment'
         }
     },
     data () {
@@ -107,6 +119,14 @@ export default {
                 normal: uploadFile,
                 onlyoffice: uploadTemplateFile
             }
+
+            const { isCompress, maxWidth, maxFileSize, quality } = this.compressOption || {}
+            // 仅满足压缩条件的附图组件需压缩，附件组件中的图片不做压缩处理
+            if (isCompress !== 'N' && this.fileType === 'image') {
+                return compress(options.file, maxWidth, maxFileSize, quality).then((file) => {
+                    return uploadFile(file, {})
+                })
+            }
             return uploadMap[this.uploadMethod || 'normal'](options.file, {})
         },
         // 做文件校验

src/business/platform/file/utils/compress.js

@@ -0,0 +1,100 @@
+const url = window.URL || window.webkitURL
+
+if (!HTMLCanvasElement.prototype.toBlob) {
+    Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
+        value (cb, type, quality) {
+            const s = atob(this.toDataURL(type, quality).split(',')[1])
+            const n = s.length
+            const r = new Uint8Array(n)
+
+            for (let i = 0; i < n; i++) {
+                r[i] = s.charCodeAt(i)
+            }
+
+            cb(new Blob([r], { type: 'image/jpeg' }))
+        }
+    })
+}
+
+export const compress = (file, maxWidth = 1000, maxFileSize = 0.2, quality = 1) => new Promise((resolve, reject) => {
+    console.log(file, maxWidth, maxFileSize, quality)
+    if (!file.type.startsWith('image/')) {
+        reject(new Error('File is not an image'))
+        return
+    }
+
+    // GIF 文件不压缩
+    if ((/^image\/gif$/).test(file.type)) {
+        resolve(file)
+        return
+    }
+
+    const img = new Image()
+    img.src = url.createObjectURL(file)
+    img.onerror = () => {
+        url.revokeObjectURL(img.src)
+        reject(new Error('Failed to load image'))
+    }
+
+    img.onload = () => {
+        const [imgWidth, imgHeight] = [img.width, img.height]
+
+        // 判断是否需要压缩：宽度超限 或 文件大小超限
+        const needCompress = imgWidth > maxWidth || (maxFileSize > 0 && file.size > Math.round(maxFileSize * 1024 * 1024))
+
+        if (!needCompress) {
+            resolve(file)
+            return
+        }
+
+        // 计算缩放后的尺寸（仅当宽度超限时才缩放）
+        let targetWidth = imgWidth
+        let targetHeight = imgHeight
+        if (imgWidth > maxWidth) {
+            targetWidth = maxWidth
+            targetHeight = (imgHeight / imgWidth) * maxWidth
+        }
+
+        // 创建 Canvas
+        const canvas = document.createElement('canvas')
+        const ctx = canvas.getContext('2d')
+        canvas.width = targetWidth
+        canvas.height = targetHeight
+        // canvas.setAttribute('width', maxWidth)
+        // canvas.setAttribute('height', scaledHeight)
+
+        // 绘制图片到 Canvas（仅在需要缩放时绘制）
+        if (imgWidth > maxWidth) {
+            ctx.drawImage(img, 0, 0, targetWidth, targetHeight)
+        } else {
+            ctx.drawImage(img, 0, 0)
+        }
+
+        // PNG图片背景透明压缩后变黑色处理。处理原理：将透明颜色的值强制改成白色255
+        if ((/png/).test(file.type)) {
+            const dt = ctx.getImageData(0, 0, targetWidth, targetHeight)
+
+            for (let i = 0; i < dt.data.length; i += 4) {
+                if (dt.data[i + 3] === 0) {
+                    dt.data[i] = 255
+                    dt.data[i + 1] = 255
+                    dt.data[i + 2] = 255
+                    dt.data[i + 3] = 255
+                }
+            }
+
+            ctx.putImageData(dt, 0, 0)
+        }
+
+        const outputType = file.type === 'image/png' ? 'image/png' : 'image/jpeg'
+        canvas.toBlob(blob => {
+            url.revokeObjectURL(img.src)
+            // 将 Blob 转换为 File 对象
+            const compressedFile = new File([blob], file.name, {
+                type: outputType,
+                lastModified: Date.now()
+            })
+            resolve(compressedFile)
+        }, outputType, quality)
+    }
+})

src/business/platform/form/formbuilder/constants/helpTip.js

@@ -297,10 +297,18 @@ export default {
             【单位】：M </br>`
     },
     imageWidthAndHeight: {
-        title: '关于图片宽高尺寸',
-        content: ` 此属性用于设置图片宽和高。</br>
+        title: '关于图片展示宽高',
+        content: ` 此属性用于设置图片组件展示的宽和高。</br>
             【单位】：px </br>`
     },
+    imageCompressWidth: {
+        title: '关于图片限宽',
+        content: ` 当图片大小超出时或宽度超限时，将触发压缩，图片将被缩放至该宽度。默认1000px</br>【单位】：px </br>`
+    },
+    imageCompressSize: {
+        title: '关于图片压缩大小',
+        content: ` 当图片大小超出时或宽度超限时，将触发压缩。默认0.2Mb</br>【单位】：Mb </br>`
+    },
     imageLimit: {
         title: '关于图片数量限制',
         content: ` 此属性用于限制图片最大上传数量。`

src/business/platform/form/formbuilder/form-main/widget-form-field.vue

@@ -54,7 +54,7 @@
                 :key="o.val+i"
                 :label="i"
                 :border="fieldOptions.border"
-                :style="{marginTop: '5px', display: fieldOptions.arrangement==='vertical' ? 'block' : null}"
+                :style="{marginTop: '5px', display: fieldOptions.arrangement === 'vertical' ? 'block' : ''}"
             >
                 {{ o.label }}
             </component>
@@ -71,7 +71,7 @@
                 :key="o.val+i"
                 :label="i"
                 :border="fieldOptions.border"
-                :style="{ display: fieldOptions.arrangement==='vertical' ? 'block' : null}"
+                :style="{ display: fieldOptions.arrangement==='vertical' ? 'block' : ''}"
                 disabled
             > {{ o.label }}
             </component>
@@ -272,6 +272,12 @@
             :tip="fieldOptions.tip"
             :size="fieldOptions.size"
             :upload-type="fieldOptions.uploadType"
+            :compress-option="{
+                isCompress: fieldOptions.is_compress,
+                maxWidth: fieldOptions.compress_width,
+                maxFileSize: fieldOptions.compress_size,
+                quality: fieldOptions.quality
+            }"
         />
         <!-- =======================系统字段==============================-->
         <!-- 当前层级 -->

src/business/platform/form/formbuilder/right-aside/editors/editor-field-image.vue

@@ -1,91 +1,158 @@
 <template>
-  <div class="panel panel-default">
-    <div class="panel-heading">图片设置</div>
-    <div class="panel-body">
-      <el-form-item>
-        <template slot="label">图片类型<help-tip prop="imageType" /></template>
-        <el-select v-model="fieldOptions.accept" style="width:100%;">
-          <el-option value="" label="不限制" />
-          <el-option
-            v-for="item in imageTypeOptions"
-            :key="item.value"
-            :value="item.value"
-            :label="item.label"
-          />
-          <el-option value="custom" label="自定义" />
-        </el-select>
-        <el-input
-          v-if="fieldOptions.accept==='custom'"
-          v-model="fieldOptions.media"
-          type="textarea"
-          rows="1"
-          resize="none"
-          autosize
-          placeholder="自定义图片类型,逗号[,]分割"
-          style="padding-top:5px;"
-        />
-      </el-form-item>
-      <el-form-item>
-        <template slot="label">图片大小<help-tip prop="imageSize" /></template>
-        <el-input v-model="fieldOptions.size" placeholder="图片大小（单个）" type="text" @change="(val)=>changeImageSet(val,'size')"><template slot="append">M</template></el-input>
-      </el-form-item>
-      <el-form-item>
-        <template slot="label">图片尺寸<help-tip prop="imageWidthAndHeight" /></template>
-        <el-input v-model="fieldOptions.width" placeholder="宽度" type="text" @change="(val)=>changeImageSet(val,'width')">
-          <template slot="prepend">宽度大小</template>
-          <template slot="append">px</template>
-        </el-input>
-        <p />
-        <el-input v-model="fieldOptions.height" placeholder="高度" type="text" @change="(val)=>changeImageSet(val,'height')">
-          <template slot="prepend">高度大小</template>
-          <template slot="append">px</template>
-        </el-input>
-      </el-form-item>
-      <el-form-item>
-        <template slot="label">图片数量<help-tip prop="imageLimit" /></template>
-        <el-input-number v-model="fieldOptions.limit" :min="1" style="width:100%" />
-      </el-form-item>
-      <el-form-item>
-        <template slot="label">上传方式<help-tip prop="uploadType" /></template>
-        <el-select v-model="fieldOptions.uploadType" style="width:100%;">
-          <el-option
-            v-for="item in uploadTypeOptions"
-            :key="item.value"
-            :value="item.value"
-            :label="item.label"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <template slot="label">提示信息<help-tip prop="imagePlaceholder" /></template>
-        <el-input v-model="fieldOptions.tip" rows="3" placeholder="" type="textarea" />
-      </el-form-item>
+    <div class="panel panel-default">
+        <div class="panel-heading">图片设置</div>
+        <div class="panel-body">
+            <el-form-item>
+                <template slot="label">图片类型<help-tip prop="imageType" /></template>
+                <el-select v-model="fieldOptions.accept" style="width:100%;">
+                    <el-option value="" label="不限制" />
+                    <el-option
+                        v-for="item in imageTypeOptions"
+                        :key="item.value"
+                        :value="item.value"
+                        :label="item.label"
+                    />
+                    <el-option value="custom" label="自定义" />
+                </el-select>
+                <el-input
+                    v-if="fieldOptions.accept==='custom'"
+                    v-model="fieldOptions.media"
+                    type="textarea"
+                    rows="1"
+                    resize="none"
+                    autosize
+                    placeholder="自定义图片类型,逗号[,]分割"
+                    style="padding-top:5px;"
+                />
+            </el-form-item>
+            <el-form-item>
+                <template slot="label">图片大小<help-tip prop="imageSize" /></template>
+                <el-input
+                    v-model="fieldOptions.size"
+                    placeholder="图片大小（单个）"
+                    type="text"
+                    @change="(val)=>changeImageSet(val,'size')"
+                ><template slot="append">M</template></el-input>
+            </el-form-item>
+            <el-form-item>
+                <template slot="label">图片展示尺寸<help-tip prop="imageWidthAndHeight" /></template>
+                <el-input
+                    v-model="fieldOptions.width"
+                    placeholder="宽度"
+                    type="text"
+                    @change="(val)=>changeImageSet(val,'width')"
+                >
+                    <template slot="prepend">宽度大小</template>
+                    <template slot="append">px</template>
+                </el-input>
+                <p />
+                <el-input
+                    v-model="fieldOptions.height"
+                    placeholder="高度"
+                    type="text"
+                    @change="(val)=>changeImageSet(val,'height')"
+                >
+                    <template slot="prepend">高度大小</template>
+                    <template slot="append">px</template>
+                </el-input>
+            </el-form-item>
+            <el-form-item>
+                <template slot="label">图片数量<help-tip prop="imageLimit" /></template>
+                <el-input-number v-model="fieldOptions.limit" :min="1" style="width:100%" />
+            </el-form-item>
+            <el-form-item>
+                <template slot="label">是否压缩</template>
+                <el-radio-group v-model="fieldOptions.is_compress" @input="changeCompress">
+                    <el-radio-button label="N">否</el-radio-button>
+                    <el-radio-button label="Y">是</el-radio-button>
+                </el-radio-group>
+            </el-form-item>
+            <template v-if="fieldOptions.is_compress === 'Y'">
+                <el-form-item>
+                    <template slot="label">图片限宽<help-tip prop="imageCompressWidth" /></template>
+                    <el-input
+                        v-model="fieldOptions.compress_width"
+                        placeholder="最大宽度"
+                        type="text"
+                        @change="(val)=>changeImageSet(val, 'compress_width')"
+                    >
+                        <template slot="prepend">宽度大小</template>
+                        <template slot="append">px</template>
+                    </el-input>
+                </el-form-item>
+                <el-form-item>
+                    <template slot="label">图片压缩大小<help-tip prop="imageCompressSize" /></template>
+                    <el-input
+                        v-model="fieldOptions.compress_size"
+                        placeholder="图片压缩大小"
+                        type="text"
+                        @change="(val)=>changeImageSet(val, 'compress_size')"
+                    ><template slot="append">M</template></el-input>
+                </el-form-item>
+                <el-form-item>
+                    <template slot="label">压缩质量</template>
+                    <el-slider
+                        v-model="fieldOptions.quality"
+                        :step="0.1"
+                        :min="0.1"
+                        :max="1"
+                    />
+                </el-form-item>
+            </template>
+            <el-form-item>
+                <template slot="label">上传方式<help-tip prop="uploadType" /></template>
+                <el-select v-model="fieldOptions.uploadType" style="width:100%;">
+                    <el-option
+                        v-for="item in uploadTypeOptions"
+                        :key="item.value"
+                        :value="item.value"
+                        :label="item.label"
+                    />
+                </el-select>
+            </el-form-item>
+            <el-form-item>
+                <template slot="label">提示信息<help-tip prop="imagePlaceholder" /></template>
+                <el-input v-model="fieldOptions.tip" rows="3" placeholder="" type="textarea" />
+            </el-form-item>
+        </div>
     </div>
-  </div>
 </template>
 <script>
 import { imageTypeOptions, uploadTypeOptions } from '@/business/platform/form/constants/fieldOptions'
 import EditorMixin from '../mixins/editor'
 
 export default {
-  mixins: [EditorMixin],
-  data() {
-    return {
-      imageTypeOptions: imageTypeOptions,
-      uploadTypeOptions: uploadTypeOptions
-    }
-  },
-  methods: {
-    changeImageSet(val, property) {
-      const imagePropertyValue = parseInt(val)
-      if (imagePropertyValue < 0) {
-        property === 'size' ? this.fieldOptions.size = '' : property === 'width' ? this.fieldOptions.width = '' : this.fieldOptions.height = ''
-        this.$message({
-          message: '该设置不能输入小于0',
-          type: 'warning'
-        })
-      }
+    mixins: [EditorMixin],
+    data () {
+        return {
+            imageTypeOptions: imageTypeOptions,
+            uploadTypeOptions: uploadTypeOptions
+        }
+    },
+    methods: {
+        changeImageSet (val, property) {
+            const imagePropertyValue = parseInt(val, 10)
+
+            if (imagePropertyValue < 0) {
+                const resetFields = ['size', 'compress_size', 'compress_width', 'width', 'height']
+
+                if (resetFields.includes(property)) {
+                    this.fieldOptions[property] = ''
+                }
+
+                this.$message({
+                    message: '该设置不能输入小于0',
+                    type: 'warning'
+                })
+            }
+        },
+        changeCompress (val) {
+            if (val === 'Y') {
+                this.fieldOptions.compress_width = 1000
+                this.fieldOptions.compress_size = 0.2
+                this.fieldOptions.quality = 0.8
+            }
+        }
     }
-  }
 }
 </script>

src/business/platform/form/formbuilder/right-aside/field-types/ibps-field-image.vue

@@ -1,47 +1,53 @@
 <template>
-  <div>
-    <el-form v-bind="$attrs" v-on="$listeners" @submit.native.prevent>
-      <!-- 基本属性 -->
-      <editor-base
-        :field-item="fieldItem"
-        :bo-data="boData"
-        :fields="fields"
-        default-value-types="fixed"
-      >
-        <template slot="fixedValue">
-          <ibps-image
-            v-model="fieldOptions.default_value"
-            :width="fieldOptions.width"
-            :height="fieldOptions.height"
-            :limit="fieldOptions.limit"
-            :accept="imagesAccept"
-            :media="fieldOptions.media"
-            :tip="fieldOptions.tip"
-            :size="fieldOptions.size"
-            :upload-type="fieldOptions.uploadType"
-          />
-        </template>
-      </editor-base>
-      <!-- 参数设置 -->
-      <editor-field-image
-        :field-item="fieldItem"
-      />
-      <!-- 校验规则 -->
-      <editor-rules
-        :field-item="fieldItem"
-        types="required"
-      />
-      <!-- 字段权限 -->
-      <editor-rights
-        :field-item="fieldItem"
-      />
-      <!-- 布局设置 -->
-      <editor-layout
-        :field-item="fieldItem"
-        types="labelWidth,customClass,mobile"
-      />
-    </el-form>
-  </div>
+    <div>
+        <el-form v-bind="$attrs" v-on="$listeners" @submit.native.prevent>
+            <!-- 基本属性 -->
+            <editor-base
+                :field-item="fieldItem"
+                :bo-data="boData"
+                :fields="fields"
+                default-value-types="fixed"
+            >
+                <template slot="fixedValue">
+                    <ibps-image
+                        v-model="fieldOptions.default_value"
+                        :width="fieldOptions.width"
+                        :height="fieldOptions.height"
+                        :limit="fieldOptions.limit"
+                        :accept="imagesAccept"
+                        :media="fieldOptions.media"
+                        :tip="fieldOptions.tip"
+                        :size="fieldOptions.size"
+                        :upload-type="fieldOptions.uploadType"
+                        :compress-option="{
+                            isCompress: fieldOptions.is_compress,
+                            maxWidth: fieldOptions.compress_width,
+                            maxFileSize: fieldOptions.compress_size,
+                            quality: fieldOptions.quality
+                        }"
+                    />
+                </template>
+            </editor-base>
+            <!-- 参数设置 -->
+            <editor-field-image
+                :field-item="fieldItem"
+            />
+            <!-- 校验规则 -->
+            <editor-rules
+                :field-item="fieldItem"
+                types="required"
+            />
+            <!-- 字段权限 -->
+            <editor-rights
+                :field-item="fieldItem"
+            />
+            <!-- 布局设置 -->
+            <editor-layout
+                :field-item="fieldItem"
+                types="labelWidth,customClass,mobile"
+            />
+        </el-form>
+    </div>
 </template>
 
 <script>
@@ -50,20 +56,20 @@ import IbpsImage from '@/business/platform/file/image'
 import typeMixin from '../mixins/type'
 
 export default {
-  name: 'ibps-field-image',
-  components: {
-    IbpsImage
-  },
-  mixins: [typeMixin],
-  computed: {
-    imagesAccept() {
-      const accept = this.fieldOptions.accept
-      if (this.$utils.isEmpty(accept)) { return ACCEPT['images'] }
-      if (accept === 'custom') {
-        return this.fieldOptions.media
-      }
-      return accept
+    name: 'ibps-field-image',
+    components: {
+        IbpsImage
+    },
+    mixins: [typeMixin],
+    computed: {
+        imagesAccept () {
+            const accept = this.fieldOptions.accept
+            if (this.$utils.isEmpty(accept)) { return ACCEPT['images'] }
+            if (accept === 'custom') {
+                return this.fieldOptions.media
+            }
+            return accept
+        }
     }
-  }
 }
 </script>

src/business/platform/form/formbuilder/right-aside/index.vue

@@ -1,44 +1,44 @@
 <template>
-  <div :style="{ width:`${width}px`}">
-    <el-tabs v-model="activeName" type="border-card" class="formbuilder-tab-container" @tab-click="clickTab">
-      <el-tab-pane :style="{ width:`${width}px`}" label="字段配置" class="field-config" name="field-config">
-        <template v-if="hasField">
-          <template v-show="switchingField">
-            <component
-              :is="fieldType"
-              v-if="switchingField"
-              v-loading="loading"
-              :field-item="curField"
-              :bo-data="boData"
-              :fields="formFields"
-              size="mini"
-              label-position="right"
-              label-width="90px"
-              @update="updateSelectField"
-              @select="updateSelectField"
-            />
-            <template v-else>
-              <div
-                v-loading="!switchingField"
-                element-loading-text="加载中"
-                style="height:300px;"
-              />
-            </template>
-          </template>
+    <div :style="{ width:`${width}px`}">
+        <el-tabs v-model="activeName" type="border-card" class="formbuilder-tab-container" @tab-click="clickTab">
+            <el-tab-pane :style="{ width:`${width}px`}" label="字段配置" class="field-config" name="field-config">
+                <template v-if="hasField">
+                    <div v-show="switchingField">
+                        <component
+                            :is="fieldType"
+                            v-if="switchingField"
+                            v-loading="loading"
+                            :field-item="curField"
+                            :bo-data="boData"
+                            :fields="formFields"
+                            size="mini"
+                            label-position="left"
+                            label-width="100px"
+                            @update="updateSelectField"
+                            @select="updateSelectField"
+                        />
+                        <template v-else>
+                            <div
+                                v-loading="!switchingField"
+                                element-loading-text="加载中"
+                                style="height:300px;"
+                            />
+                        </template>
+                    </div>
 
-        </template>
-        <p v-else class="empty-field" data-content="请选择或拖入控件" />
-      </el-tab-pane>
-      <el-tab-pane :style="{ width:`${width}px`}" label="表单属性" class="form-property" name="form-property">
-        <form-property
-          :id="id"
-          :data="data"
-          :bo-data="boData"
-          @update="updateFormDef"
-        />
-      </el-tab-pane>
-    </el-tabs>
-  </div>
+                </template>
+                <p v-else class="empty-field" data-content="请选择或拖入控件" />
+            </el-tab-pane>
+            <el-tab-pane :style="{ width:`${width}px`}" label="表单属性" class="form-property" name="form-property">
+                <form-property
+                    :id="id"
+                    :data="data"
+                    :bo-data="boData"
+                    @update="updateFormDef"
+                />
+            </el-tab-pane>
+        </el-tabs>
+    </div>
 </template>
 <script>
 import Vue from 'vue'
@@ -49,99 +49,99 @@ import FormProperty from './propertys'
 Vue.component('HelpTip', () => import('./components/help-tip.vue'))
 
 export default {
-  name: 'right-aside',
-  components: Object.assign(FieldTypes, {
-    FormProperty
-  }),
-  props: {
-    id: String,
-    data: Object,
-    select: Object,
-    asideActiveName: String,
-    boData: {
-      type: Array
-    }
-  },
-  data() {
-    return {
-      width: 350,
-      curField: null,
-      switchingField: false,
-      loading: true,
-      activeName: 'form-property'
-    }
-  },
-  computed: {
-    fieldType() {
-      const name = camelCase(this.curField.field_type)
-      return `ibps-field-${name}`
+    name: 'right-aside',
+    components: Object.assign(FieldTypes, {
+        FormProperty
+    }),
+    props: {
+        id: String,
+        data: Object,
+        select: Object,
+        asideActiveName: String,
+        boData: {
+            type: Array
+        }
     },
-    hasField() {
-      if (!this.curField) {
-        return false
-      }
-      const componentName = upperFirst(camelCase(this.fieldType))
-      return !!this.$options.components[componentName]
+    data () {
+        return {
+            width: 350,
+            curField: null,
+            switchingField: false,
+            loading: true,
+            activeName: 'form-property'
+        }
     },
-    formFields() {
-      return this.data.fields || []
-    }
-  },
-  watch: {
-    select(val, oldVal) {
-      this.loading = true
-      this.curField = val
-      if (val !== oldVal) {
-        this.switchingField = false
-        setTimeout(() => {
-          this.switchingField = true
-          this.loading = false
-        }, 100)
-      } else {
-        this.loading = false
-      }
+    computed: {
+        fieldType () {
+            const name = camelCase(this.curField.field_type)
+            return `ibps-field-${name}`
+        },
+        hasField () {
+            if (!this.curField) {
+                return false
+            }
+            const componentName = upperFirst(camelCase(this.fieldType))
+            return !!this.$options.components[componentName]
+        },
+        formFields () {
+            return this.data.fields || []
+        }
     },
-    asideActiveName: {
-      handler: function(val, oldVal) {
-        this.activeName = this.asideActiveName
-      },
-      immediate: true
+    watch: {
+        select (val, oldVal) {
+            this.loading = true
+            this.curField = val
+            if (val !== oldVal) {
+                this.switchingField = false
+                setTimeout(() => {
+                    this.switchingField = true
+                    this.loading = false
+                }, 100)
+            } else {
+                this.loading = false
+            }
+        },
+        asideActiveName: {
+            handler: function (val, oldVal) {
+                this.activeName = this.asideActiveName
+            },
+            immediate: true
+        },
+        activeName (val, oldVal) {
+            this.$emit('active-name', val)
+        }
     },
-    activeName(val, oldVal) {
-      this.$emit('active-name', val)
+    methods: {
+        clickTab (tab) {
+            if (tab.name === 'field-config' && !this.hasField && this.data.fields && this.data.fields.length > 0) {
+                this.updateSelectField(this.data.fields[0])
+            }
+        },
+        updateFormDef (data) {
+            this.$emit('update-form-def', data)
+        },
+        updateSelectField (field) {
+            this.$emit('update:select', field)
+        }
     }
-  },
-  methods: {
-    clickTab(tab) {
-      if (tab.name === 'field-config' && !this.hasField && this.data.fields && this.data.fields.length > 0) {
-        this.updateSelectField(this.data.fields[0])
-      }
-    },
-    updateFormDef(data) {
-      this.$emit('update-form-def', data)
-    },
-    updateSelectField(field) {
-      this.$emit('update:select', field)
-    }
-  }
 
 }
 </script>
 <style scoped>
-  .empty-field {
-      position: relative;
-      opacity: 0.5;
-      box-shadow: none;
-      height: 100%;
+    .empty-field {
+        position: relative;
+        opacity: 0.5;
+        box-shadow: none;
+        height: 100%;
     }
 
-  .empty-field:after {
-    content: attr(data-content);
-    position: absolute;
-    text-align: center;
-    top: 40%;
-    left: 0;
-    width: 100%;
-    font-size: 18px;
-  }
+    .empty-field:after {
+        content: attr(data-content);
+        position: absolute;
+        text-align: center;
+        top: 40%;
+        left: 0;
+        width: 100%;
+        font-size: 18px;
+    }
 </style>

src/business/platform/form/formrender/dynamic-form/dynamic-form-field.vue

@@ -132,7 +132,7 @@
                     :key="o.val"
                     :label="o.val"
                     :border="fieldOptions.border"
-                    :style="{ display: fieldOptions.arrangement === 'vertical' ? 'block' : null }"
+                    :style="{ display: fieldOptions.arrangement === 'vertical' ? 'block' : '' }"
                     class="ibps-pt-5"
                     @click.native.stop.prevent="handleRadioChange(o.val)"
                 >
@@ -160,7 +160,7 @@
                     :key="o.val"
                     :label="o.val"
                     :border="fieldOptions.border"
-                    :style="{ display: fieldOptions.arrangement === 'vertical' ? 'block' : null }"
+                    :style="{ display: fieldOptions.arrangement === 'vertical' ? 'block' : '' }"
                 >
                     {{ o.label }}
                 </component>
@@ -508,6 +508,12 @@
             :tip="fieldOptions.tip"
             :size="fieldOptions.size"
             :upload-type="fieldOptions.uploadType"
+            :compress-option="{
+                isCompress: fieldOptions.is_compress,
+                maxWidth: fieldOptions.compress_width,
+                maxFileSize: fieldOptions.compress_size,
+                quality: fieldOptions.quality
+            }"
             :disabled="readonly"
             v-on="$listeners"
         />

src/business/platform/form/formrender/dynamic-form/dynamic-form-table.vue

@@ -593,7 +593,6 @@ export default {
          * 获取真实的权限
          */
         getRealRights (rights) {
-            // console.log(this.timeModification, '000')
             if (this.tableReadonly) {
                 return rights === FormOptions.t.PERMISSIONS.HIDE ? rights : FormOptions.t.PERMISSIONS.READ
             } else {