3.0.3（2022.03.02）更新：

1. 修复Pad/H5布局预览的样式显示问题；
2. 修复升级新版element-plus后事件代码编辑弹窗无法显示的问题；
3. 修复provide传递的formConfig属性不能获取最新值的问题，改用provide函数实现；
4. element-plus版本升级到2.0.4。

package.json

@@ -14,7 +14,7 @@
     "axios": "^0.24.0",
     "clipboard": "^2.0.8",
     "core-js": "^3.6.5",
-    "element-plus": "^1.3.0-beta.9",
+    "element-plus": "^2.0.4",
     "file-saver": "^2.0.5",
     "mitt": "^3.0.0",
     "sortablejs": "1.14.0",

src/components/form-designer/form-widget/container-widget/containerMixin.js

@@ -1,4 +1,13 @@
 export default {
+  inject: ['getFormConfig'],
+
+  computed: {
+    formConfig() {
+      return this.getFormConfig()
+    },
+
+  },
+
   methods: {
     appendTableRow(widget) {
       this.designer.appendTableRow(widget)

src/components/form-designer/form-widget/field-widget/cascader-widget.vue

@@ -55,7 +55,6 @@
     components: {
       FormItemWrapper,
     },
-    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
     data() {
       return {
         oldFieldValue: null, //field组件change之前的值

src/components/form-designer/form-widget/field-widget/checkbox-widget.vue

@@ -58,7 +58,6 @@
     components: {
       FormItemWrapper,
     },
-    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
     data() {
       return {
         oldFieldValue: null, //field组件change之前的值

src/components/form-designer/form-widget/field-widget/color-widget.vue

@@ -49,7 +49,6 @@
     components: {
       FormItemWrapper,
     },
-    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
     data() {
       return {
         oldFieldValue: null, //field组件change之前的值

src/components/form-designer/form-widget/field-widget/date-range-widget.vue

@@ -56,7 +56,6 @@
     components: {
       FormItemWrapper,
     },
-    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
     data() {
       return {
         oldFieldValue: null, //field组件change之前的值

src/components/form-designer/form-widget/field-widget/date-widget.vue

@@ -54,7 +54,6 @@
     components: {
       FormItemWrapper,
     },
-    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
     data() {
       return {
         oldFieldValue: null, //field组件change之前的值

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

@@ -3,9 +3,13 @@ import FormValidators from '@/utils/validators'
 import eventBus from "@/utils/event-bus"
 
 export default {
-  inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel', 'getOptionData'],
+  inject: ['refList', 'getFormConfig', 'globalOptionData', 'globalModel', 'getOptionData'],
 
   computed: {
+    formConfig() {
+      return this.getFormConfig()
+    },
+
     widgetSize() {
       return this.field.options.size || 'default'
     },

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

@@ -77,7 +77,6 @@
       SvgIcon,
       FormItemWrapper,
     },
-    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
     data() {
       return {
         oldFieldValue: null, //field组件change之前的值

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

@@ -93,8 +93,12 @@
 
       rules: Array,
     },
-    inject: ['formConfig'],
+    inject: ['getFormConfig'],
     computed: {
+      formConfig() {
+        return this.getFormConfig()
+      },
+
       selected() {
         return !!this.designer && this.field.id === this.designer.selectedId
       },

src/components/form-designer/form-widget/field-widget/input-widget.vue

@@ -61,7 +61,6 @@
     components: {
       FormItemWrapper,
     },
-    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
     data() {
       return {
         oldFieldValue: null, //field组件change之前的值

src/components/form-designer/form-widget/field-widget/number-widget.vue

@@ -53,7 +53,6 @@
     components: {
       FormItemWrapper,
     },
-    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
     data() {
       return {
         oldFieldValue: null, //field组件change之前的值

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

@@ -60,7 +60,6 @@
     components: {
       FormItemWrapper,
     },
-    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
     data() {
       return {
         oldFieldValue: null, //field组件change之前的值
@@ -180,8 +179,12 @@
       handlePictureRemove(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)
+        }
       },
 
       handelUploadError(err, file, fileList) {

src/components/form-designer/form-widget/field-widget/radio-widget.vue

@@ -58,7 +58,6 @@
     components: {
       FormItemWrapper,
     },
-    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
     data() {
       return {
         oldFieldValue: null, //field组件change之前的值

src/components/form-designer/form-widget/field-widget/rate-widget.vue

@@ -52,7 +52,6 @@
     components: {
       FormItemWrapper,
     },
-    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
     data() {
       return {
         oldFieldValue: null, //field组件change之前的值

src/components/form-designer/form-widget/field-widget/rich-editor-widget.vue

@@ -71,7 +71,6 @@
       // }
       quillEditor,
     },
-    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
     data() {
       return {
         oldFieldValue: null, //field组件change之前的值

src/components/form-designer/form-widget/field-widget/select-widget.vue

@@ -61,7 +61,6 @@
     components: {
       FormItemWrapper,
     },
-    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
     data() {
       return {
         oldFieldValue: null, //field组件change之前的值

src/components/form-designer/form-widget/field-widget/slider-widget.vue

@@ -50,7 +50,6 @@
     components: {
       FormItemWrapper,
     },
-    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
     data() {
       return {
         oldFieldValue: null, //field组件change之前的值

src/components/form-designer/form-widget/field-widget/switch-widget.vue

@@ -51,7 +51,6 @@
     components: {
       FormItemWrapper,
     },
-    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
     data() {
       return {
         oldFieldValue: null, //field组件change之前的值

src/components/form-designer/form-widget/field-widget/textarea-widget.vue

@@ -53,7 +53,6 @@
     components: {
       FormItemWrapper,
     },
-    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
     data() {
       return {
         oldFieldValue: null, //field组件change之前的值

src/components/form-designer/form-widget/field-widget/time-range-widget.vue

@@ -57,7 +57,6 @@
     components: {
       FormItemWrapper,
     },
-    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
     data() {
       return {
         oldFieldValue: null, //field组件change之前的值

src/components/form-designer/form-widget/field-widget/time-widget.vue

@@ -54,7 +54,6 @@
     components: {
       FormItemWrapper,
     },
-    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
     data() {
       return {
         oldFieldValue: null, //field组件change之前的值

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

@@ -53,7 +53,7 @@
     provide() {
       return {
         refList: this.widgetRefList,
-        formConfig: this.formConfig,
+        getFormConfig: () => this.formConfig,  /* 解决provide传递formConfig属性的响应式更新问题！！ */
         globalOptionData: this.optionData,
         getOptionData: () => this.optionData,
         globalModel: {
@@ -172,7 +172,6 @@
 
 <style lang="scss" scoped>
   .container-scroll-bar {
-
     :deep(.el-scrollbar__wrap), :deep(.el-scrollbar__view) {
       overflow-x: hidden;
     }
@@ -186,14 +185,6 @@
     overflow-y: auto;
 
     .el-form.full-height-width {
-      /*
-      margin: 0 auto;
-      width: 420px;
-      border-radius: 15px;
-      //border-width: 10px;
-      box-shadow: 0 0 1px 10px #495060;
-      */
-
       height: 100%;
       padding: 3px;
       background: #ffffff;

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

@@ -180,14 +180,6 @@
 
     },
     created() {
-      // eventBus.$on('editEventHandler', (eventName, eventParams) => {
-      //   this.editEventHandler(eventName, eventParams)
-      // })
-
-      // eventBus.$on('editEventHandler', (eventParams) => {
-      //   this.editEventHandler(eventParams[0], eventParams[1])
-      // })
-
       this.on$('editEventHandler', (eventParams) => {
         //debugger
         this.editEventHandler(eventParams[0], eventParams[1])

src/components/form-designer/setting-panel/property-editor/event-handler/eventMixin.js

@@ -7,7 +7,6 @@ export default {
   methods: {
     editEventHandler(eventName, eventParams) {
       this.dispatch('SettingPanel', 'editEventHandler', [eventName, [...eventParams]])
-      // eventBus.$emit('editEventHandler', [eventName, [...eventParams]])
     },
 
   }

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

@@ -44,9 +44,10 @@
     <div v-if="showPreviewDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
       <el-dialog :title="i18nt('designer.toolbar.preview')" v-model="showPreviewDialogFlag"
                  :show-close="true" :close-on-click-modal="false" :close-on-press-escape="false" center
-                 :destroy-on-close="true" custom-class="drag-dialog small-padding-dialog" width="75%" :fullscreen="layoutType === 'H5'">
+                 :destroy-on-close="true" custom-class="drag-dialog small-padding-dialog" width="75%"
+                 :fullscreen="(layoutType === 'H5') || (layoutType === 'Pad')">
         <div>
-          <div class="form-render-wrapper" :class="[layoutType === 'H5' ? 'h5-layout' : '']">
+          <div class="form-render-wrapper" :class="[layoutType === 'H5' ? 'h5-layout' : (layoutType === 'Pad' ? 'pad-layout' : '')]">
             <VFormRender ref="preForm" :form-json="formJson" :form-data="testFormData" :preview-state="true"
                          :option-data="testOptionData"
                          @appendButtonClick="testOnAppendButtonClick" @buttonClick="testOnButtonClick"
@@ -705,7 +706,7 @@
 
   .form-render-wrapper {
     //height: calc(100vh - 142px);
-    all: revert !important; /* 防止表单继承el-dialog等外部样式，未生效，原因不明？？ */
+    //all: revert !important; /* 防止表单继承el-dialog等外部样式，未生效，原因不明？？ */
   }
 
   .form-render-wrapper.h5-layout {
@@ -714,7 +715,16 @@
     border-radius: 15px;
     //border-width: 10px;
     box-shadow: 0 0 1px 10px #495060;
-    height: calc(100vh - 142px);
+    height: calc(100vh - 175px);
+  }
+
+  .form-render-wrapper.pad-layout {
+    margin: 0 auto;
+    width: 960px;
+    border-radius: 15px;
+    //border-width: 10px;
+    box-shadow: 0 0 1px 10px #495060;
+    height: calc(100vh - 175px);
   }
 
   .node-tree-drawer {

src/components/form-render/container-item/grid-col-item.vue

@@ -55,7 +55,7 @@
       },
 
     },
-    inject: ['refList', 'globalModel', 'formConfig', 'previewState'],
+    inject: ['refList', 'globalModel', 'getFormConfig', 'previewState'],
     data() {
       return {
         layoutProps: {
@@ -70,6 +70,10 @@
       }
     },
     computed: {
+      formConfig() {
+        return this.getFormConfig()
+      },
+
       customClass() {
         return this.widget.options.customClass || ''
       },

src/components/form-render/index.vue

@@ -73,7 +73,7 @@
       return {
         refList: this.widgetRefList,
         sfRefList: this.subFormRefList,  //收集SubForm引用
-        formConfig: this.formConfig,
+        getFormConfig: () => this.formJsonObj.formConfig,  /* 解决provide传递formConfig属性的响应式更新问题！！ */
         globalOptionData: this.optionData,
         getOptionData: () => this.optionData,  /* 该方法用于在异步更新option-data之后重新获取到最新值 */
         globalModel: {
@@ -357,7 +357,6 @@
             this.buildFormModel(newFormJsonObj.widgetList)
 
             this.formJsonObj['formConfig'] = newFormJsonObj.formConfig
-            // this._provided.formConfig = newFormJsonObj.formConfig  //强制更新provide的formConfig对象
             this.formJsonObj['widgetList'] = newFormJsonObj.widgetList
 
             this.$nextTick(() => {

src/utils/directive.js

@@ -11,6 +11,7 @@ export function addDirective(app) {
     mounted(el, binding) {
       if (!binding.value) return false;
 
+      binding.instance.$nextTick(() => {
         const dragDom = document.querySelector(binding.value[0])
         const dragHeader = document.querySelector(binding.value[1])
 
@@ -119,14 +120,15 @@ export function addDirective(app) {
             document.ontouchend = null;
           };
         };
+      })
     },
   })
 
   // v-dialogDragWidth: 弹窗宽度拖大 拖小
   app.directive('dialogDragWidth', {
     mounted(el, binding) {
+      binding.instance.$nextTick(() => {
         const dragDom = binding.value.$el.querySelector('.el-dialog')
-
         el.onmousedown = (e) => {
           // 鼠标按下，计算当前元素距离可视区的距离
           const disX = e.clientX - el.offsetLeft
@@ -144,6 +146,7 @@ export function addDirective(app) {
             document.onmouseup = null
           }
         }
+      })
     }
   })