v-form-designer新增两个API方法：getWidgetRef、getSelectedWidgetRef。

src/components/form-designer/designer.js

@@ -98,7 +98,8 @@ export function createDesigner(vueInstance) {
     getImportTemplate() {
       return {
         widgetList: [],
-        formConfig: deepClone(this.formConfig)
+        // formConfig: deepClone(this.formConfig)
+        formConfig: deepClone(defaultFormConfig)
       }
     },
 
@@ -131,7 +132,7 @@ export function createDesigner(vueInstance) {
       }
     },
 
-    updateSelectedWidgetNameAndRef(selectedWidget, newName, newLabel) {
+    updateSelectedWidgetNameAndLabel(selectedWidget, newName, newLabel) {
       this.selectedWidgetName = newName
       //selectedWidget.options.name = newName  //此行多余
       if (!!newLabel && (Object.keys(selectedWidget.options).indexOf('label') > -1)) {
@@ -637,6 +638,33 @@ export function createDesigner(vueInstance) {
       return Object.keys(originalWidget.options).indexOf(configName) > -1
     },
 
+    upgradeWidgetConfig(oldWidget) {
+      let newWidget = null
+      if (!!oldWidget.category) {
+        newWidget = this.getContainerByType(oldWidget.type)
+      } else {
+        newWidget = this.getFieldWidgetByType(oldWidget.type)
+      }
+
+      if (!newWidget || !newWidget.options) {
+        return
+      }
+
+      Object.keys(newWidget.options).forEach(ck => {
+        if (!oldWidget.hasOwnProperty(ck)) {
+          oldWidget.options[ck] = deepClone(newWidget.options[ck])
+        }
+      })
+    },
+
+    upgradeFormConfig(oldFormConfig) {
+      Object.keys(this.formConfig).forEach(fc => {
+        if (!oldFormConfig.hasOwnProperty(fc)) {
+          oldFormConfig[fc] = deepClone(this.formConfig[fc])
+        }
+      })
+    },
+
     cloneGridCol(widget, parentWidget) {
       let newGridCol = deepClone(this.getContainerByType('grid-col'))
       newGridCol.options.span = widget.options.span

src/components/form-designer/form-widget/container-widget/grid-col-widget.vue

@@ -41,11 +41,13 @@
   import Draggable from 'vuedraggable'
   import i18n from "@/utils/i18n";
   import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
+  import refMixinDesign from "@/components/form-designer/refMixinDesign"
 
   export default {
     name: "GridColWidget",
     componentName: "GridColWidget",
-    mixins: [i18n],
+    mixins: [i18n, refMixinDesign],
+    inject: ['refList'],
     components: {
       Draggable,
       ...FieldComponents,
@@ -168,6 +170,7 @@
 
     },
     created() {
+      this.initRefList()
       this.initLayoutProps()
     },
     methods: {

src/components/form-designer/form-widget/container-widget/grid-widget.vue

@@ -28,13 +28,15 @@
 <script>
   import i18n from "@/utils/i18n"
   import GridColWidget from "@/components/form-designer/form-widget/container-widget/grid-col-widget"
-  import containerMixin from "@/components/form-designer/form-widget/container-widget/containerMixin";
+  import containerMixin from "@/components/form-designer/form-widget/container-widget/containerMixin"
-  import ContainerWrapper from "@/components/form-designer/form-widget/container-widget/container-wrapper";
+  import ContainerWrapper from "@/components/form-designer/form-widget/container-widget/container-wrapper"
+  import refMixinDesign from "@/components/form-designer/refMixinDesign"
 
   export default {
     name: "grid-widget",
     componentName: 'ContainerWidget',
-    mixins: [i18n, containerMixin],
+    mixins: [i18n, containerMixin, refMixinDesign],
+    inject: ['refList'],
     components: {
       ContainerWrapper,
       GridColWidget
@@ -59,12 +61,14 @@
     watch: {
       //
     },
+    created() {
+      this.initRefList()
+    },
     mounted() {
       //
     },
     methods: {
 
-
     }
   }
 </script>

src/components/form-designer/form-widget/container-widget/tab-widget.vue

@@ -49,11 +49,13 @@
   import containerMixin from "@/components/form-designer/form-widget/container-widget/containerMixin"
   import ContainerWrapper from "@/components/form-designer/form-widget/container-widget/container-wrapper"
   import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
+  import refMixinDesign from "@/components/form-designer/refMixinDesign"
 
   export default {
     name: "tab-widget",
     componentName: 'ContainerWidget',
-    mixins: [i18n, containerMixin],
+    mixins: [i18n, containerMixin, refMixinDesign],
+    inject: ['refList'],
     components: {
       ContainerWrapper,
       Draggable,
@@ -86,6 +88,9 @@
     watch: {
       //
     },
+    created() {
+      this.initRefList()
+    },
     mounted() {
       //
     },

src/components/form-designer/form-widget/container-widget/table-cell-widget.vue

@@ -55,11 +55,13 @@
   import Draggable from 'vuedraggable'
   import i18n from "@/utils/i18n"
   import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
+  import refMixinDesign from "@/components/form-designer/refMixinDesign"
 
   export default {
     name: "TableCellWidget",
     componentName: "TableCellWidget",
-    mixins: [i18n],
+    mixins: [i18n, refMixinDesign],
+    inject: ['refList'],
     components: {
       Draggable,
       ...FieldComponents,
@@ -140,6 +142,9 @@
     watch: {
       //
     },
+    created() {
+      this.initRefList()
+    },
     methods: {
       selectWidget(widget) {
         this.designer.setSelected(widget)

src/components/form-designer/form-widget/container-widget/table-widget.vue

@@ -38,11 +38,13 @@
   import containerMixin from "@/components/form-designer/form-widget/container-widget/containerMixin"
   import ContainerWrapper from "@/components/form-designer/form-widget/container-widget/container-wrapper"
   import TableCellWidget from "@/components/form-designer/form-widget/container-widget/table-cell-widget"
+  import refMixinDesign from "@/components/form-designer/refMixinDesign"
 
   export default {
     name: "table-widget",
     componentName: 'ContainerWidget',
-    mixins: [i18n, containerMixin],
+    mixins: [i18n, containerMixin, refMixinDesign],
+    inject: ['refList'],
     components: {
       ContainerWrapper,
       TableCellWidget,
@@ -67,6 +69,9 @@
     watch: {
       //
     },
+    created() {
+      this.initRefList()
+    },
     mounted() {
       //
     },

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

@@ -12,7 +12,7 @@
                :automatic-dropdown="field.options.automaticDropdown"
                :multiple="field.options.multiple" :multiple-limit="field.options.multipleLimit"
                :placeholder="field.options.placeholder || i18nt('render.hint.selectPlaceholder')"
-               :remote="this.field.options.remote" :remote-method="remoteQuery"
+               :remote="field.options.remote" :remote-method="remoteQuery"
                @focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
                @change="handleChangeEvent">
       <el-option v-for="item in field.options.optionItems" :key="item.value" :label="item.label"

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

@@ -159,14 +159,19 @@
         return this.formModel
       },
 
-      getWidgetRef(widgetName, showError) {
+      getWidgetRef(widgetName, showError = false) {
         let foundRef = this.widgetRefList[widgetName]
         if (!foundRef && !!showError) {
-          this.$message.error(this.i18nt('designer.hint.refNotFound') + widgetName)
+          this.$message.error(this.i18nt('render.hint.refNotFound') + widgetName)
         }
         return foundRef
       },
 
+      getSelectedWidgetRef() {
+        let wName = this.designer.selectedWidgetName
+        return this.getWidgetRef(wName)
+      },
+
     }
   }
 </script>

src/components/form-designer/index.vue

@@ -45,7 +45,7 @@
         </el-header>
         <el-main class="form-widget-main">
           <el-scrollbar class="container-scroll-bar" :style="{height: scrollerHeight}">
-            <v-form-widget :designer="designer" :form-config="designer.formConfig">
+            <v-form-widget :designer="designer" :form-config="designer.formConfig" ref="formRef">
             </v-form-widget>
           </el-scrollbar>
         </el-main>
@@ -70,7 +70,7 @@
     deepClone,
     getAllContainerWidgets,
     getAllFieldWidgets,
-    getQueryParam
+    getQueryParam, traverseAllWidgets
   } from "@/utils/util"
   import {MOCK_CASE_URL, VARIANT_FORM_VERSION} from "@/utils/config"
   import i18n, { changeLocale } from "@/utils/i18n"
@@ -357,6 +357,32 @@
         return !!widgetList ? getAllContainerWidgets(widgetList) : getAllContainerWidgets(this.designer.widgetList)
       },
 
+      /**
+       * 升级表单json，以补充最新的组件属性
+       * @param formJson
+       */
+      upgradeFormJson(formJson) {
+        if (!formJson.widgetList || !formJson.formConfig) {
+          this.$message.error('Invalid form json!')
+          return
+        }
+
+        traverseAllWidgets(formJson.widgetList, (w) => {
+          this.designer.upgradeWidgetConfig(w)
+        })
+        this.designer.upgradeFormConfig(formJson.formConfig)
+
+        return formJson
+      },
+
+      getWidgetRef(widgetName, showError = false) {
+        return this.$refs['formRef'].getWidgetRef(widgetName, showError)
+      },
+
+      getSelectedWidgetRef() {
+        return this.$refs['formRef'].getSelectedWidgetRef()
+      },
+
       //TODO: 增加更多方法！！
 
     }
@@ -365,6 +391,8 @@
 
 <style lang="scss" scoped>
   .el-container.main-container {
+    background: #fff;
+
     ::v-deep aside {  /* 防止aside样式被外部样式覆盖！！ */
       margin: 0;
       padding: 0;

src/components/form-designer/refMixinDesign.js

@@ -0,0 +1,28 @@
+export default {
+  methods: {
+    initRefList() {
+      if ((this.refList !== null) && !!this.widget.options.name) {
+        this.refList[this.widget.options.name] = this
+      }
+    },
+
+    getWidgetRef(widgetName, showError = false) {
+      let foundRef = this.refList[widgetName]
+      if (!foundRef && !!showError) {
+        this.$message.error(this.i18nt('render.hint.refNotFound') + widgetName)
+      }
+      return foundRef
+    },
+
+    /* 该方法用于组件重名检查！！ */
+    registerToRefList(oldRefName) {
+      if ((this.refList !== null) && !!this.widget.options.name) {
+        if (!!oldRefName) {
+          delete this.refList[oldRefName]
+        }
+        this.refList[this.widget.options.name] = this
+      }
+    },
+
+  }
+}

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

@@ -54,19 +54,18 @@
         }
 
         if (!!this.designer.formWidget) {
-          //检查newName是否已存在！！
+          let foundRef = this.designer.formWidget.getWidgetRef(newName) // 检查newName是否已存在！！
-          let foundRef = this.designer.formWidget.getWidgetRef(newName)
           if (!!foundRef) {
             this.selectedWidget.options.name = oldName
             this.$message.info(this.i18nt('designer.hint.duplicateName') + newName)
             return
           }
 
-          let fieldWidget = this.designer.formWidget.getWidgetRef(oldName)
+          let widgetInDesign = this.designer.formWidget.getWidgetRef(oldName)
-          if (!!fieldWidget && !!fieldWidget.registerToRefList) {
+          if (!!widgetInDesign && !!widgetInDesign.registerToRefList) {
-            fieldWidget.registerToRefList(oldName)  //注册组件新的ref名称并删除老的ref！！
+            widgetInDesign.registerToRefList(oldName)  //注册组件新的ref名称并删除老的ref！！
             let newLabel = this.getLabelByFieldName(newName)
-            this.designer.updateSelectedWidgetNameAndRef(this.selectedWidget, newName, newLabel)
+            this.designer.updateSelectedWidgetNameAndLabel(this.selectedWidget, newName, newLabel)
           }
         }
       },

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

@@ -32,6 +32,7 @@
 </template>
 
 <script>
+  import emitter from '@/utils/emitter'
   import i18n from "../../../utils/i18n"
   import refMixin from "../../../components/form-render/refMixin"
   import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
@@ -39,7 +40,7 @@
   export default {
     name: "GridColItem",
     componentName: 'ContainerItem',
-    mixins: [i18n, refMixin],
+    mixins: [emitter, i18n, refMixin],
     components: {
       ...FieldComponents,
     },

src/components/form-render/container-item/table-cell-item.vue

@@ -26,6 +26,7 @@
 </template>
 
 <script>
+  import emitter from '@/utils/emitter'
   import i18n from "../../../utils/i18n"
   import refMixin from "../../../components/form-render/refMixin"
   import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
@@ -33,7 +34,7 @@
   export default {
     name: "TableCellItem",
     componentName: "ContainerItem",
-    mixins: [i18n, refMixin],
+    mixins: [emitter, i18n, refMixin],
     components: {
       ...FieldComponents,
     },

src/components/form-render/refMixin.js

@@ -6,7 +6,7 @@ export default {
       }
     },
 
-    getWidgetRef(widgetName, showError) {
+    getWidgetRef(widgetName, showError = false) {
       let foundRef = this.refList[widgetName]
       if (!foundRef && !!showError) {
         this.$message.error(this.i18nt('render.hint.refNotFound') + widgetName)

src/lang/en-US.js

@@ -154,9 +154,9 @@ export default {
       nodeTreeTitle: 'Tree View Of Component Hierarchy',
       clear: 'Clear',
       preview: 'Preview',
-      importJson: 'Import JSON',
+      importJson: 'Import',
-      exportJson: 'Export JSON',
+      exportJson: 'Export',
-      exportCode: 'Export Code',
+      exportCode: 'Codes',
       generateCode: 'Generate Code',
       generateSFC: 'Generate SFC',
     },