版本更新到3.0.3：

1. 修复axios is not defined问题； 2. 图片、文件上传组件增加onFileRemove交互事件； 3. designer-config属性新增resetFormJson参数； 4. 修复选项数据动态加载可能无效的问题； 5. 修复其他一些小bug。
2025-11-04 10:31:47 +08:00 · 2022-02-23 10:40:44 +08:00
parent 167b3330d8
commit 8766345ceb
16 changed files with 94 additions and 55 deletions
--- a/src/components/form-designer/designer.js
+++ b/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)
--- a/src/components/form-designer/form-widget/field-widget/fieldMixin.js
+++ b/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')
      }
    },

--- a/src/components/form-designer/form-widget/field-widget/file-upload-widget.vue
+++ b/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) {
-          let mountFunc = new Function('result', 'file', 'fileList', this.field.options.onUploadSuccess)
-          mountFunc.call(this, res, file, fileList)
-        } else {
-          if (file.status === 'success') {
-            //this.fileList.push(file)  /* 上传过程中，this.fileList是只读的，不能修改赋值!! */
-            this.updateUploadFieldModelAndEmitDataChange(fileList)
-            this.fileList = deepClone(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

-            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)
+          }
        }
      },

--- a/src/components/form-designer/form-widget/field-widget/picture-upload-widget.vue
+++ b/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) {
-          let customFn = new Function('result', 'file', 'fileList', this.field.options.onUploadSuccess)
-          customFn.call(this, res, file, fileList)
-        } else {
-          if (file.status === 'success') {
-            //this.fileList.push(file)  /* 上传过程中，this.fileList是只读的，不能修改赋值!! */
-            this.updateUploadFieldModelAndEmitDataChange(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

-            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)
          }
        }
      },
--- a/src/components/form-designer/form-widget/index.vue
+++ b/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() {
--- a/src/components/form-designer/index.vue
+++ b/src/components/form-designer/index.vue
@@ -114,6 +114,8 @@
            generateSFCButton: true,  //是否显示生成SFC按钮

            presetCssCode: '',  //设计器预设CSS样式代码
+
+            resetFormJson: false,  //是否在设计器初始化时将表单内容重置为空
          }
        }
      },
--- a/src/components/form-designer/setting-panel/property-editor/container-tab/tab-customClass-editor.vue
+++ b/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>
--- a/src/components/form-designer/setting-panel/property-editor/event-handler/onFileRemove.vue
+++ b/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>
--- a/src/components/form-designer/setting-panel/propertyRegister.js
+++ b/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',

  //容器
--- a/src/components/form-designer/widget-panel/widgetsConfig.js
+++ b/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: '',
    },
--- a/src/components/form-render/index.vue
+++ b/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(() => {