版本更新到3.0.3：

1. 修复axios is not defined问题；
2. 图片、文件上传组件增加onFileRemove交互事件；
3. designer-config属性新增resetFormJson参数；
4. 修复选项数据动态加载可能无效的问题；
5. 修复其他一些小bug。

install-render.js

@@ -30,10 +30,12 @@ const install = (app) => {
   components.forEach(component => {
     app.component(component.name, component)
   })
+
+  window.axios = axios
 }
 
 if (typeof window !== 'undefined' && window.Vue) { /* script方式引入时赋值axios！！ */
-  window.axios = axios
+  //window.axios = axios
 }
 
 export default {

install.js

@@ -60,10 +60,12 @@ const install = (app) => {
   components.forEach(component => {
     app.component(component.name, component)
   })
+
+  window.axios = axios
 }
 
 if (typeof window !== 'undefined' && window.Vue) { /* script方式引入时赋值axios！！ */
-  window.axios = axios
+  //window.axios = axios
 }
 
 export default {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "variant-form3",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "private": false,
   "scripts": {
     "serve": "vite",

src/components/form-designer/designer.js

@@ -50,7 +50,7 @@ export function createDesigner(vueInstance) {
       steps: [],
     },
 
-    initDesigner() {
+    initDesigner(resetFormJson) {
       this.widgetList = []
       this.formConfig = deepClone(defaultFormConfig)
 
@@ -61,7 +61,9 @@ export function createDesigner(vueInstance) {
           "color:#333"
       )
 
-      this.initHistoryData()
+      if (!resetFormJson) {
+        this.initHistoryData()
+      }
     },
 
     clearDesigner(skipHistoryChange) {
@@ -149,7 +151,6 @@ export function createDesigner(vueInstance) {
       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') && (wgCategory === 'container')) {
             //this.$message.info(this.vueInstance.i18nt('designer.hint.onlyFieldWidgetAcceptable'))
@@ -165,7 +166,6 @@ export function createDesigner(vueInstance) {
       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'))
@@ -714,7 +714,7 @@ export function createDesigner(vueInstance) {
       let newWidget = deepClone(origin)
       let tempId = generateId()
       newWidget.id = newWidget.type.replace(/-/g, '') + tempId
-      console.log('test id===', newWidget.id)
+      //console.log('test id===', newWidget.id)
       newWidget.options.name = newWidget.id
       newWidget.options.label = newWidget.type.toLowerCase()
 
@@ -865,8 +865,6 @@ export function createDesigner(vueInstance) {
     },
 
     emitHistoryChange() {
-      //console.log('------------', 'Form history changed!')
-
       if (this.historyData.index === this.historyData.maxStep - 1) {
         this.historyData.steps.shift()
       } else {
@@ -883,8 +881,6 @@ export function createDesigner(vueInstance) {
       if (this.historyData.index < this.historyData.steps.length - 1) {
         this.historyData.steps = this.historyData.steps.slice(0, this.historyData.index + 1)
       }
-
-      console.log('history', this.historyData.index)
     },
 
     saveCurrentHistoryStep() {
@@ -900,7 +896,6 @@ export function createDesigner(vueInstance) {
       if (this.historyData.index !== 0) {
         this.historyData.index--
       }
-      console.log('undo', this.historyData.index)
 
       this.widgetList = deepClone(this.historyData.steps[this.historyData.index].widgetList)
       this.formConfig = deepClone(this.historyData.steps[this.historyData.index].formConfig)
@@ -910,7 +905,6 @@ export function createDesigner(vueInstance) {
       if (this.historyData.index !== (this.historyData.steps.length - 1)) {
         this.historyData.index++
       }
-      console.log('redo', this.historyData.index)
 
       this.widgetList = deepClone(this.historyData.steps[this.historyData.index].widgetList)
       this.formConfig = deepClone(this.historyData.steps[this.historyData.index].formConfig)

src/components/form-designer/form-widget/field-widget/fieldMixin.js

@@ -160,14 +160,13 @@ export default {
 
       if ((this.field.type === 'radio') || (this.field.type === 'checkbox')
           || (this.field.type === 'select') || (this.field.type === 'cascader')) {
-        if (!!this.globalOptionData && this.globalOptionData.hasOwnProperty(this.field.options.name)) {
+        /* 异步更新option-data之后globalOptionData不能获取到最新值，改用provide的getOptionData()方法 */
+        const newOptionItems = this.getOptionData()
+        if (!!newOptionItems && newOptionItems.hasOwnProperty(this.field.options.name)) {
           if (!!keepSelected) {
-            //this.reloadOptions(this.globalOptionData[this.field.options.name]) /* 异步更新option-data之后不能获取到最新值，
-            // 以下改用provide的getOptionData()方法 */
-            const newOptionItems = this.getOptionData()
             this.reloadOptions(newOptionItems[this.field.options.name])
           } else {
-            this.loadOptions( this.globalOptionData[this.field.options.name] )
+            this.loadOptions(newOptionItems[this.field.options.name])
           }
         }
       }
@@ -420,9 +419,6 @@ export default {
 
         this.syncUpdateFormModel(newValue)
         this.emitFieldDataChange(newValue, oldValue)
-
-        //debugger
-        console.log('test', 'dddddddd')
       }
     },
 

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

@@ -185,16 +185,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)
           }
         }
       },
@@ -202,23 +201,33 @@
       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)
+        }
       },
 
       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

@@ -164,15 +164,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.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/form-widget/index.vue

@@ -111,7 +111,7 @@
 
     },
     created() {
-      this.designer.initDesigner();
+      this.designer.initDesigner( !!this.getDesignerConfig().resetFormJson );
       this.designer.loadPresetCssCode( this.getDesignerConfig().presetCssCode )
     },
     mounted() {

src/components/form-designer/index.vue

@@ -114,6 +114,8 @@
             generateSFCButton: true,  //是否显示生成SFC按钮
 
             presetCssCode: '',  //设计器预设CSS样式代码
+
+            resetFormJson: false,  //是否在设计器初始化时将表单内容重置为空
           }
         }
       },

src/components/form-designer/setting-panel/property-editor/container-tab/tab-customClass-editor.vue

@@ -25,10 +25,11 @@
                        icon="el-icon-minus" class="col-delete-button"></el-button>
           </li>
         </template>
-        <div>
-          <el-button type="text" @click="addTabPane(selectedWidget)">{{i18nt('designer.setting.addTabPane')}}</el-button>
-        </div>
       </draggable>
+
+      <div>
+        <el-button type="text" @click="addTabPane(selectedWidget)">{{i18nt('designer.setting.addTabPane')}}</el-button>
+      </div>
     </el-form-item>
   </div>
 </template>

src/components/form-designer/setting-panel/property-editor/event-handler/onFileRemove.vue

@@ -0,0 +1,30 @@
+<template>
+  <el-form-item label="onFileRemove" label-width="150px">
+    <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onFileRemove', eventParams)">
+      {{i18nt('designer.setting.addEventHandler')}}</el-button>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
+
+  export default {
+    name: "onFileRemove-editor",
+    mixins: [i18n, eventMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        eventParams: ['file', 'fileList'],
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/form-designer/setting-panel/propertyRegister.js

@@ -118,6 +118,7 @@ const EVENT_PROPERTIES = {
   'onBeforeUpload'    :            'onBeforeUpload-editor',
   'onUploadSuccess'   :            'onUploadSuccess-editor',
   'onUploadError'     :            'onUploadError-editor',
+  'onFileRemove'      :            'onFileRemove-editor',
   'onValidate'        :            'onValidate-editor',
 
   //容器

src/components/form-designer/widget-panel/widgetsConfig.js

@@ -765,6 +765,7 @@ export const advancedFields = [
       onBeforeUpload: '',
       onUploadSuccess: '',
       onUploadError: '',
+      onFileRemove: '',
       onValidate: '',
       //onFileChange: '',
     },
@@ -807,6 +808,7 @@ export const advancedFields = [
       onBeforeUpload: '',
       onUploadSuccess: '',
       onUploadError: '',
+      onFileRemove: '',
       onValidate: '',
       //onFileChange: '',
     },

src/components/form-render/index.vue

@@ -357,7 +357,7 @@
             this.buildFormModel(newFormJsonObj.widgetList)
 
             this.formJsonObj['formConfig'] = newFormJsonObj.formConfig
-            this._provided.formConfig = newFormJsonObj.formConfig  //强制更新provide的formConfig对象
+            // this._provided.formConfig = newFormJsonObj.formConfig  //强制更新provide的formConfig对象
             this.formJsonObj['widgetList'] = newFormJsonObj.widgetList
 
             this.$nextTick(() => {

src/utils/config.js

@@ -8,7 +8,7 @@ export const DESIGNER_OPTIONS = {
 
 }
 
-export const VARIANT_FORM_VERSION = '3.0.2'
+export const VARIANT_FORM_VERSION = '3.0.3'
 
 //export const MOCK_CASE_URL = 'https://www.fastmock.site/mock/2de212e0dc4b8e0885fea44ab9f2e1d0/vform/'
 export const MOCK_CASE_URL = 'https://ks3-cn-beijing.ksyuncs.com/vform-static/vcase/'

src/utils/sfc-generator.js

@@ -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) => {