2022.07.20更新：

1. 优化图片、文件上传组件交互逻辑；
2. 图片组件增加预览功能。

src/components/form-designer/designer.js

@@ -37,7 +37,7 @@ export function createDesigner(vueInstance) {
       this.formConfig = deepClone(defaultFormConfig)
 
       //输出版本信息和语雀链接
-      console.info(`%cVariantForm %cVer${VARIANT_FORM_VERSION} %chttps://www.yuque.com/variantdev/vform`,
+      console.info(`%cVariantForm %cVer${VARIANT_FORM_VERSION} %chttps://www.yuque.com/visualdev/vform`,
           "color:#409EFF;font-size: 22px;font-weight:bolder",
           "color:#999;font-size: 12px",
           "color:#333"

src/components/form-designer/form-widget/field-widget/file-upload-widget.vue

@@ -10,17 +10,17 @@
                :multiple="field.options.multipleSelect" :file-list="fileList"
                :show-file-list="field.options.showFileList" :class="{'hideUploadDiv': uploadBtnHidden}"
                :limit="field.options.limit" :on-exceed="handleFileExceed" :before-upload="beforeFileUpload"
-               :on-success="handleFileUpload" :on-error="handelUploadError" :on-remove="handleFileRemove">
+               :on-success="handleFileUpload" :on-error="handleUploadError">
       <div slot="tip" class="el-upload__tip"
            v-if="!!field.options.uploadTip">{{field.options.uploadTip}}</div>
       <i slot="default" class="el-icon-plus avatar-uploader-icon"></i>
       <template #file="{ file }">
         <div class="upload-file-list">
           <span class="upload-file-name" :title="file.name">{{file.name}}</span>
-          <a :href="file.url" download="">
+          <a :href="file.url" download="" target="_blank">
             <i class="el-icon-download file-action" :title="i18nt('render.hint.downloadFile')"></i></a>
           <i class="el-icon-delete file-action" :title="i18nt('render.hint.removeFile')" v-if="!field.options.disabled"
-             @click="removeUploadFile(file.name)"></i>
+             @click="removeUploadFile(file.name, file.url, file.uid)"></i>
         </div>
       </template>
     </el-upload>
@@ -73,7 +73,7 @@
     data() {
       return {
         oldFieldValue: null, //field组件change之前的值
-        fieldModel: null,
+        fieldModel: [],
         rules: [],
 
         uploadHeaders: {},
@@ -120,17 +120,10 @@
 
     methods: {
       handleFileExceed() {
-        let uploadLimit = this.field.options.limit  /* 此行不能注释，下一行ES6模板字符串需要用到！！ */
+        let uploadLimit = this.field.options.limit
         this.$message.warning( this.i18nt('render.hint.uploadExceed').replace('${uploadLimit}', uploadLimit) )
       },
 
-      updateUploadFieldModelAndEmitDataChange(fileList) {
-        let oldValue = deepClone(this.fieldModel)
-        this.fieldModel = deepClone(fileList)
-        this.syncUpdateFormModel(this.fieldModel)
-        this.emitFieldDataChange(this.fieldModel, oldValue)
-      },
-
       beforeFileUpload(file) {
         let fileTypeCheckResult = false
         let extFileName = file.name.substring(file.name.lastIndexOf('.') + 1)
@@ -176,29 +169,57 @@
         return true
       },
 
+      updateFieldModelAndEmitDataChangeForUpload(fileList, customResult, defaultResult) {
+        let oldValue = deepClone(this.fieldModel)
+        if (!!customResult && !!customResult.name && !!customResult.url) {
+          this.fieldModel.push({
+            name: customResult.name,
+            url: customResult.url
+          })
+        } else if (!!defaultResult && !!defaultResult.name && !!defaultResult.url) {
+          this.fieldModel.push({
+            name: defaultResult.name,
+            url: defaultResult.url
+          })
+        } else {
+          this.fieldModel = deepClone(fileList)
+        }
+
+        this.syncUpdateFormModel(this.fieldModel)
+        this.emitFieldDataChange(this.fieldModel, oldValue)
+      },
+
+
       handleFileUpload(res, file, fileList) {
         if (file.status === 'success') {
-          //this.fileList.push(file)  /* 上传过程中，this.fileList是只读的，不能修改赋值!! */
-          this.updateUploadFieldModelAndEmitDataChange(fileList)
-          this.fileList = deepClone(fileList)
-          this.uploadBtnHidden = fileList.length >= this.field.options.limit
-
+          let customResult = null
           if (!!this.field.options.onUploadSuccess) {
             let mountFunc = new Function('result', 'file', 'fileList', this.field.options.onUploadSuccess)
-            mountFunc.call(this, res, file, fileList)
+            customResult = mountFunc.call(this, res, file, fileList)
           }
+
+          this.updateFieldModelAndEmitDataChangeForUpload(fileList, customResult, res)
+          this.fileList = deepClone(fileList)
+          this.uploadBtnHidden = fileList.length >= this.field.options.limit
         }
       },
 
-      handleFileRemove(file, fileList) {
-        this.fileList = deepClone(fileList)  //this.fileList = fileList
-        this.updateUploadFieldModelAndEmitDataChange(fileList)
-        this.uploadBtnHidden = fileList.length >= this.field.options.limit
+      // handleFileRemove(file, fileList) {
+      //   this.fileList = deepClone(fileList)  //this.fileList = fileList
+      //   this.updateUploadFieldModelAndEmitDataChange(fileList)
+      //   this.uploadBtnHidden = fileList.length >= this.field.options.limit
+      //
+      //   if (!!this.field.options.onFileRemove) {
+      //     let customFn = new Function('file', 'fileList', this.field.options.onFileRemove)
+      //     customFn.call(this, file, fileList)
+      //   }
+      // },
 
-        if (!!this.field.options.onFileRemove) {
-          let customFn = new Function('file', 'fileList', this.field.options.onFileRemove)
-          customFn.call(this, file, fileList)
-        }
+      updateFieldModelAndEmitDataChangeForRemove(deletedFileIdx, fileList) {
+        let oldValue = deepClone(this.fieldModel)
+        this.fieldModel.splice(deletedFileIdx, 1)
+        this.syncUpdateFormModel(this.fieldModel)
+        this.emitFieldDataChange(this.fieldModel, oldValue)
       },
 
       removeUploadFile(fileName) {
@@ -213,7 +234,7 @@
 
         if (foundIdx >= 0) {
           this.fileList.splice(foundIdx, 1)
-          this.updateUploadFieldModelAndEmitDataChange(this.fileList)
+          this.updateFieldModelAndEmitDataChangeForRemove(foundIdx, this.fileList)
           this.uploadBtnHidden = this.fileList.length >= this.field.options.limit
 
           if (!!this.field.options.onFileRemove) {
@@ -223,7 +244,7 @@
         }
       },
 
-      handelUploadError(err, file, fileList) {
+      handleUploadError(err, file, fileList) {
         if (!!this.field.options.onUploadError) {
           let customFn = new Function('error', 'file', 'fileList', this.field.options.onUploadError)
           customFn.call(this, err, file, fileList)

src/components/form-designer/form-widget/field-widget/form-item-wrapper.vue

@@ -10,9 +10,9 @@
 
 <template>
   <div class="field-wrapper" :class="{'design-time-bottom-margin': !!this.designer}">
-    <el-form-item v-if="!!field.formItemFlag" :label="label" :label-width="labelWidth + 'px'"
+    <el-form-item v-if="!!field.formItemFlag && (!field.options.hidden || (designState === true))"
+                  :label="label" :label-width="labelWidth + 'px'"
                   :title="field.options.labelTooltip"
-                  v-show="!field.options.hidden || (designState === true)"
                   :rules="rules" :prop="getPropName()"
                   :class="[selected ? 'selected' : '', labelAlign, customClass, field.options.required ? 'required' : '']"
                   @click.native.stop="selectField(field)">

src/components/form-designer/form-widget/field-widget/picture-upload-widget.vue

@@ -10,11 +10,18 @@
                list-type="picture-card" :class="{'hideUploadDiv': uploadBtnHidden}"
                :limit="field.options.limit" :on-exceed="handlePictureExceed"
                :before-upload="beforePictureUpload"
-               :on-success="handlePictureUpload" :on-error="handelUploadError" :on-remove="handlePictureRemove">
+               :on-success="handlePictureUpload" :on-error="handleUploadError" :on-remove="handlePictureRemove">
       <div slot="tip" class="el-upload__tip"
            v-if="!!field.options.uploadTip">{{field.options.uploadTip}}</div>
       <i class="el-icon-plus avatar-uploader-icon"></i>
     </el-upload>
+
+    <el-dialog title="" v-if="showPreviewDialogFlag" :visible.sync="showPreviewDialogFlag"
+               v-dialog-drag append-to-body width="60%"
+               :show-close="true" custom-class="drag-dialog small-padding-dialog"
+               :close-on-click-modal="true" :close-on-press-escape="true" :destroy-on-close="true">
+      <img :src="previewUrl" width="100%" alt="" />
+    </el-dialog>
   </form-item-wrapper>
 </template>
 
@@ -62,7 +69,7 @@
     data() {
       return {
         oldFieldValue: null, //field组件change之前的值
-        fieldModel: null,
+        fieldModel: [],
         rules: [],
 
         uploadHeaders: {},
@@ -76,6 +83,8 @@
         fileList: [],  //上传文件列表
         uploadBtnHidden: false,
 
+        previewUrl: '',
+        showPreviewDialogFlag: false,
       }
     },
     computed: {
@@ -106,17 +115,10 @@
 
     methods: {
       handlePictureExceed() {
-        let uploadLimit = this.field.options.limit  /* 此行不能注释，下一行ES6模板字符串需要用到！！ */
+        let uploadLimit = this.field.options.limit
         this.$message.warning( this.i18nt('render.hint.uploadExceed').replace('${uploadLimit}', uploadLimit) )
       },
 
-      updateUploadFieldModelAndEmitDataChange(fileList) {
-        let oldValue = deepClone(this.fieldModel)
-        this.fieldModel = deepClone(fileList)
-        this.syncUpdateFormModel(this.fieldModel)
-        this.emitFieldDataChange(this.fieldModel, oldValue)
-      },
-
       beforePictureUpload(file) {
         let fileTypeCheckResult = false
         if (!!this.field.options && !!this.field.options.fileTypes) {
@@ -161,23 +163,59 @@
         return true
       },
 
+      updateFieldModelAndEmitDataChangeForUpload(fileList, customResult, defaultResult) {
+        let oldValue = deepClone(this.fieldModel)
+        if (!!customResult && !!customResult.name && !!customResult.url) {
+          this.fieldModel.push({
+            name: customResult.name,
+            url: customResult.url
+          })
+        } else if (!!defaultResult && !!defaultResult.name && !!defaultResult.url) {
+          this.fieldModel.push({
+            name: defaultResult.name,
+            url: defaultResult.url
+          })
+        } else {
+          this.fieldModel = deepClone(fileList)
+        }
+
+        this.syncUpdateFormModel(this.fieldModel)
+        this.emitFieldDataChange(this.fieldModel, oldValue)
+      },
+
       handlePictureUpload(res, file, fileList) {
         if (file.status === 'success') {
-          //this.fileList.push(file)  /* 上传过程中，this.fileList是只读的，不能修改赋值!! */
-          this.updateUploadFieldModelAndEmitDataChange(fileList)
-          this.fileList = deepClone(fileList)
-          this.uploadBtnHidden = fileList.length >= this.field.options.limit
-
+          let customResult = null
           if (!!this.field.options.onUploadSuccess) {
             let customFn = new Function('result', 'file', 'fileList', this.field.options.onUploadSuccess)
-            customFn.call(this, res, file, fileList)
+            customResult = customFn.call(this, res, file, fileList)
           }
+
+          this.updateFieldModelAndEmitDataChangeForUpload(fileList, customResult, res)
+          this.fileList = deepClone(fileList)
+          this.uploadBtnHidden = fileList.length >= this.field.options.limit
         }
       },
 
+      updateFieldModelAndEmitDataChangeForRemove(file, fileList) {
+        let oldValue = deepClone(this.fieldModel)
+        let foundFileIdx = -1
+        this.fileList.map((fi, idx) => {
+          if ((fi.name === file.name) && ((fi.url === file.url) || (!!fi.uid && fi.uid === file.uid))) {  /* 这个判断有问题？？ */
+            foundFileIdx = idx
+          }
+        })
+        if (foundFileIdx > -1) {
+          this.fieldModel.splice(foundFileIdx, 1)
+        }
+
+        this.syncUpdateFormModel(this.fieldModel)
+        this.emitFieldDataChange(this.fieldModel, oldValue)
+      },
+
       handlePictureRemove(file, fileList) {
+        this.updateFieldModelAndEmitDataChangeForRemove(file, fileList)
         this.fileList = deepClone(fileList)  //this.fileList = fileList
-        this.updateUploadFieldModelAndEmitDataChange(fileList)
         this.uploadBtnHidden = fileList.length >= this.field.options.limit
 
         if (!!this.field.options.onFileRemove) {
@@ -186,7 +224,7 @@
         }
       },
 
-      handelUploadError(err, file, fileList) {
+      handleUploadError(err, file, fileList) {
         if (!!this.field.options.onUploadError) {
           let customFn = new Function('error', 'file', 'fileList', this.field.options.onUploadError)
           customFn.call(this, err, file, fileList)

src/components/form-designer/setting-panel/property-editor/defaultValue-editor.vue

@@ -1,6 +1,6 @@
 <template>
-  <el-form-item :label="i18nt('designer.setting.defaultValue')">
-    <el-input v-if="!hasConfig('optionItems')" type="text" v-model="optionModel.defaultValue"
+  <el-form-item v-if="!hasConfig('optionItems')" :label="i18nt('designer.setting.defaultValue')">
+    <el-input type="text" v-model="optionModel.defaultValue"
               @change="emitDefaultValueChange"></el-input>
   </el-form-item>
 </template>

src/components/form-render/container-item/sub-form-item.vue

@@ -269,7 +269,7 @@
           this.deleteFromRowIdData(formRowIndex)
           this.deleteFromFieldSchemaData(formRowIndex)
 
-          this.handelSubFormRowDelete(oldSubFormData, deletedDataRow)
+          this.handleSubFormRowDelete(oldSubFormData, deletedDataRow)
           this.handleSubFormRowChange(oldSubFormData)
         }).catch(() => {
           //
@@ -297,7 +297,7 @@
         }
       },
 
-      handelSubFormRowDelete(subFormData, deletedDataRow) {
+      handleSubFormRowDelete(subFormData, deletedDataRow) {
         if (!!this.widget.options.onSubFormRowDelete) {
           let customFunc = new Function('subFormData', 'deletedDataRow', this.widget.options.onSubFormRowDelete)
           customFunc.call(this, subFormData, deletedDataRow)

src/extension/samples/alert/alert-widget.vue

@@ -5,7 +5,7 @@
     <el-alert ref="fieldEditor" :title="field.options.title" :type="field.options.type"
               :description="field.options.description" :closable="field.options.closable"
               :center="field.options.center" :close-text="field.options.closeText"
-              :show-icon="field.options.showIcon" :effect="field.options.effect" @close="handelCloseCustomEvent"></el-alert>
+              :show-icon="field.options.showIcon" :effect="field.options.effect" @close="handleCloseCustomEvent"></el-alert>
   </static-content-wrapper>
 </template>
 
@@ -56,7 +56,7 @@
       this.unregisterFromRefList()
     },
     methods: {
-      handelCloseCustomEvent() {
+      handleCloseCustomEvent() {
         if (!!this.field.options.onClose) {
           let changeFn = new Function(this.field.options.onClose)
           changeFn.call(this)