修复图片、文件上传组件onUploadSuccess交互事件的逻辑处理问题。

src/components/form-designer/designer.js

@@ -148,6 +148,7 @@ export function createDesigner(vueInstance) {
     checkWidgetMove(evt) { /* Only field widget can be dragged into sub-form */
       if (!!evt.draggedContext && !!evt.draggedContext.element) {
         let wgCategory = evt.draggedContext.element.category
+        let wgType = evt.draggedContext.element.type
         if (!!evt.to) {
           if ((evt.to.className === 'sub-form-table') && (wgCategory === 'container')) {
             //this.$message.info(this.vueInstance.i18nt('designer.hint.onlyFieldWidgetAcceptable'))
@@ -159,6 +160,22 @@ export function createDesigner(vueInstance) {
       return true
     },
 
+    checkFieldMove(evt) {
+      if (!!evt.draggedContext && !!evt.draggedContext.element) {
+        let wgCategory = evt.draggedContext.element.category
+        let wgType = evt.draggedContext.element.type + ''
+        //console.log('wgType======', wgType)
+        if (!!evt.to) {
+          if ((evt.to.className === 'sub-form-table') && (wgType === 'slot')) {
+            //this.$message.info(this.vueInstance.i18nt('designer.hint.onlyFieldWidgetAcceptable'))
+            return false
+          }
+        }
+      }
+
+      return true
+    },
+
     /**
      * 追加表格新行
      * @param widget

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

@@ -177,16 +177,15 @@
       },
 
       handleFileUpload(res, file, fileList) {
-        if (!!this.field.options.onUploadSuccess) {
+        if (file.status === 'success') {
-          let mountFunc = new Function('result', 'file', 'fileList', this.field.options.onUploadSuccess)
+          //this.fileList.push(file)  /* 上传过程中，this.fileList是只读的，不能修改赋值!! */
-          mountFunc.call(this, res, file, fileList)
+          this.updateUploadFieldModelAndEmitDataChange(fileList)
-        } else {
+          this.fileList = deepClone(fileList)
-          if (file.status === 'success') {
+          this.uploadBtnHidden = fileList.length >= this.field.options.limit
-            //this.fileList.push(file)  /* 上传过程中，this.fileList是只读的，不能修改赋值!! */
-            this.updateUploadFieldModelAndEmitDataChange(fileList)
-            this.fileList = deepClone(fileList)
 
-            this.uploadBtnHidden = fileList.length >= this.field.options.limit
+          if (!!this.field.options.onUploadSuccess) {
+            let mountFunc = new Function('result', 'file', 'fileList', this.field.options.onUploadSuccess)
+            mountFunc.call(this, res, file, fileList)
           }
         }
       },
@@ -204,17 +203,23 @@
 
       removeUploadFile(fileName) {
         let foundIdx = -1
+        let foundFile = null
         this.fileList.forEach((file, idx) => {
           if (file.name === fileName) {
             foundIdx = idx
+            foundFile = file
           }
         })
 
         if (foundIdx >= 0) {
           this.fileList.splice(foundIdx, 1)
           this.updateUploadFieldModelAndEmitDataChange(this.fileList)
-
           this.uploadBtnHidden = this.fileList.length >= this.field.options.limit
+
+          if (!!this.field.options.onFileRemove) {
+            let customFn = new Function('file', 'fileList', this.field.options.onFileRemove)
+            customFn.call(this, foundFile, this.fileList)
+          }
         }
       },
 

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

@@ -162,16 +162,15 @@
       },
 
       handlePictureUpload(res, file, fileList) {
-        if (!!this.field.options.onUploadSuccess) {
+        if (file.status === 'success') {
-          let customFn = new Function('result', 'file', 'fileList', this.field.options.onUploadSuccess)
+          //this.fileList.push(file)  /* 上传过程中，this.fileList是只读的，不能修改赋值!! */
-          customFn.call(this, res, file, fileList)
+          this.updateUploadFieldModelAndEmitDataChange(fileList)
-        } else {
+          this.fileList = deepClone(fileList)
-          if (file.status === 'success') {
+          this.uploadBtnHidden = fileList.length >= this.field.options.limit
-            //this.fileList.push(file)  /* 上传过程中，this.fileList是只读的，不能修改赋值!! */
-            this.updateUploadFieldModelAndEmitDataChange(fileList)
-            this.fileList = deepClone(fileList)
 
-            this.uploadBtnHidden = fileList.length >= this.field.options.limit
+          if (!!this.field.options.onUploadSuccess) {
+            let customFn = new Function('result', 'file', 'fileList', this.field.options.onUploadSuccess)
+            customFn.call(this, res, file, fileList)
           }
         }
       },

src/components/form-designer/widget-panel/index.vue

@@ -20,6 +20,7 @@
 
         <el-collapse-item name="2" :title="i18nt('designer.basicFieldTitle')">
           <draggable tag="ul" :list="basicFields" :group="{name: 'dragGroup', pull: 'clone', put: false}"
+                     :move="checkFieldMove"
                      :clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false">
             <li v-for="(fld, index) in basicFields" :key="index" class="field-widget-item" :title="fld.displayName"
                 @dblclick="addFieldByDbClick(fld)">
@@ -30,6 +31,7 @@
 
         <el-collapse-item name="3" :title="i18nt('designer.advancedFieldTitle')">
           <draggable tag="ul" :list="advancedFields" :group="{name: 'dragGroup', pull: 'clone', put: false}"
+                     :move="checkFieldMove"
                      :clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false">
             <li v-for="(fld, index) in advancedFields" :key="index" class="field-widget-item" :title="fld.displayName"
                 @dblclick="addFieldByDbClick(fld)">
@@ -41,6 +43,7 @@
         <!-- -->
         <el-collapse-item name="4" :title="i18nt('designer.customFieldTitle')">
           <draggable tag="ul" :list="customFields" :group="{name: 'dragGroup', pull: 'clone', put: false}"
+                     :move="checkFieldMove"
                      :clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false">
             <li v-for="(fld, index) in customFields" :key="index" class="field-widget-item" :title="fld.displayName"
                 @dblclick="addFieldByDbClick(fld)">
@@ -211,6 +214,10 @@
         return this.designer.checkWidgetMove(evt)
       },
 
+      checkFieldMove(evt) {
+        return this.designer.checkFieldMove(evt)
+      },
+
       onContainerDragEnd(evt) {
         //console.log('Drag end of container: ')
         //console.log(evt)

src/utils/sfc-generator.js

@@ -177,7 +177,7 @@ function getElAttrs(widget, formConfig) {  //获取El组件属性
     pictureUploadIconChild: `<template #default><i class="el-icon-plus"></i></template>`,
     fileUploadIconChild: `<template #default><i class="el-icon-plus"></i></template>`,
 
-    buttonType: !!wop.type ? `type="${wop.type}"` : '',
+    buttonType: !!wop.type ? `type="${wop.type}` : '',
     buttonPlain: !!wop.plain ? `plain` : '',
     buttonRound: !!wop.round ? `round` : '',
     buttonCircle: !!wop.circle ? `circle` : '',
@@ -260,29 +260,29 @@ const elTemplates = {  //字段组件属性
   'time': (widget, formConfig) => {
     const {vModel, readonly, disabled, size, placeholder, clearable, format, editable
       } = getElAttrs(widget, formConfig)
-    return `<el-input ${vModel} class="full-width-input" ${readonly} ${disabled} ${size} ${format}
+    return `<el-time-picker ${vModel} class="full-width-input" ${readonly} ${disabled} ${size} ${format}
-            value-format="HH:mm:ss" ${placeholder} ${clearable} ${editable}></el-input>`
+            value-format="HH:mm:ss" ${placeholder} ${clearable} ${editable}></el-time-picker>`
   },
 
   'time-range': (widget, formConfig) => {
     const {vModel, readonly, disabled, size, startPlaceholder, endPlaceholder, clearable, format, editable
       } = getElAttrs(widget, formConfig)
-    return `<el-input is-range ${vModel} class="full-width-input" ${readonly} ${disabled} ${size} ${format}
+    return `<el-time-picker is-range ${vModel} class="full-width-input" ${readonly} ${disabled} ${size} ${format}
-            value-format="HH:mm:ss" ${startPlaceholder} ${endPlaceholder} ${clearable} ${editable}></el-input>`
+            value-format="HH:mm:ss" ${startPlaceholder} ${endPlaceholder} ${clearable} ${editable}></el-time-picker>`
   },
 
   'date': (widget, formConfig) => {
     const {vModel, readonly, disabled, size, type, placeholder, clearable, format, valueFormat, editable
       } = getElAttrs(widget, formConfig)
-    return `<el-input ${vModel} ${type} class="full-width-input" ${readonly} ${disabled} ${size} ${format}
+    return `<el-date-picker ${vModel} ${type} class="full-width-input" ${readonly} ${disabled} ${size} ${format}
-              ${valueFormat} ${placeholder} ${clearable} ${editable}></el-input>`
+              ${valueFormat} ${placeholder} ${clearable} ${editable}></el-date-picker>`
   },
 
   'date-range': (widget, formConfig) => {
     const {vModel, readonly, disabled, size, type, startPlaceholder, endPlaceholder, clearable, format, valueFormat, editable
       } = getElAttrs(widget, formConfig)
-    return `<el-input is-range ${vModel} ${type} class="full-width-input" ${readonly} ${disabled} ${size} ${format}
+    return `<el-date-picker is-range ${vModel} ${type} class="full-width-input" ${readonly} ${disabled} ${size} ${format}
-            ${valueFormat} ${startPlaceholder} ${endPlaceholder} ${clearable} ${editable}></el-input>`
+            ${valueFormat} ${startPlaceholder} ${endPlaceholder} ${clearable} ${editable}></el-date-picker>`
   },
 
   'switch': (widget, formConfig) => {