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

src/components/form-designer/designer.js

@@ -100,7 +100,8 @@ export function createDesigner(vueInstance) {
     getImportTemplate() {
       return {
         widgetList: [],
-        formConfig: deepClone(this.formConfig)
+        // formConfig: deepClone(this.formConfig)
+        formConfig: deepClone(defaultFormConfig)
       }
     },
 
@@ -133,9 +134,8 @@ 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)) {
         selectedWidget.options.label = newLabel
       }

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

@@ -43,16 +43,16 @@
 </template>
 
 <script>
-  //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,
     },
     props: {
@@ -173,6 +173,7 @@
 
     },
     created() {
+      this.initRefList()
       this.initLayoutProps()
     },
     methods: {

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

@@ -30,11 +30,13 @@
   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 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,6 +61,9 @@
     watch: {
       //
     },
+    created() {
+      this.initRefList()
+    },
     mounted() {
       //
     },

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

@@ -44,20 +44,19 @@
 </template>
 
 <script>
-  //import Draggable from 'vuedraggable'
   import i18n from "@/utils/i18n"
   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,
-
       ...FieldComponents,
     },
     props: {
@@ -86,6 +85,9 @@
     watch: {
       //
     },
+    created() {
+      this.initRefList()
+    },
     mounted() {
       //
     },

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

@@ -55,16 +55,16 @@
 </template>
 
 <script>
-  //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,
     },
     props: {
@@ -143,6 +143,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

@@ -158,7 +158,7 @@
         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)
@@ -166,6 +166,11 @@
         return foundRef
       },
 
+      getSelectedWidgetRef() {
+        let wName = this.designer.selectedWidgetName
+        return this.getWidgetRef(wName)
+      },
+
     }
   }
 </script>

src/components/form-designer/index.vue

@@ -107,12 +107,15 @@
             externalLink: true,  //是否显示GitHub、文档等外部链接
             formTemplates: true,  //是否显示表单模板
             eventCollapse: true,  //是否显示组件事件属性折叠面板
+            widgetNameReadonly: false,  //禁止修改组件名称
+
             clearDesignerButton: true,  //是否显示清空设计器按钮
             previewFormButton: true,  //是否显示预览表单按钮
             importJsonButton: true,  //是否显示导入JSON按钮
             exportJsonButton: true,  //是否显示导出JSON器按钮
             exportCodeButton: true,  //是否显示导出代码按钮
             generateSFCButton: true,  //是否显示生成SFC按钮
+
             toolbarMaxWidth: 420,  //设计器工具按钮栏最大宽度（单位像素）
             toolbarMinWidth: 300,  //设计器工具按钮栏最小宽度（单位像素）
 
@@ -361,6 +364,14 @@
         return !!widgetList ? getAllContainerWidgets(widgetList) : getAllContainerWidgets(this.designer.widgetList)
       },
 
+      getWidgetRef(widgetName, showError = false) {
+        return this.$refs['formRef'].getWidgetRef(widgetName, showError)
+      },
+
+      getSelectedWidgetRef() {
+        return this.$refs['formRef'].getSelectedWidgetRef()
+      },
+
       //TODO: 增加更多方法！！
 
     }
@@ -368,6 +379,16 @@
 </script>
 
 <style lang="scss" scoped>
+  .el-container.main-container {
+    background: #fff;
+
+    ::v-deep aside {  /* 防止aside样式被外部样式覆盖！！ */
+      margin: 0;
+      padding: 0;
+      background: inherit;
+    }
+  }
+
   .el-container.full-height {
     height: 100%;
     overflow-y: hidden;

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

@@ -7,10 +7,10 @@
       </span>
     </template>
     <template v-if="!!selectedWidget.category || noFieldList">
-      <el-input type="text" v-model="optionModel.name" @change="updateWidgetNameAndRef"></el-input>
+      <el-input type="text" v-model="optionModel.name" :readonly="widgetNameReadonly" @change="updateWidgetNameAndRef"></el-input>
     </template>
     <template v-else>
-      <el-select v-model="optionModel.name" allow-create filterable @change="updateWidgetNameAndRef"
+      <el-select v-model="optionModel.name" allow-create filterable :disabled="widgetNameReadonly" @change="updateWidgetNameAndRef"
                  :title="i18nt('designer.setting.editNameHelp')">
         <el-option v-for="(sf, sfIdx) in serverFieldList" :key="sfIdx" :label="sf.label" :value="sf.name"></el-option>
       </el-select>
@@ -30,7 +30,7 @@
       selectedWidget: Object,
       optionModel: Object,
     },
-    inject: ['serverFieldList'],
+    inject: ['serverFieldList', 'getDesignerConfig'],
     data() {
       return {
         nameRequiredRule: [{required: true, message: 'name required'}],
@@ -41,6 +41,10 @@
         return !this.serverFieldList || (this.serverFieldList.length <= 0)
       },
 
+      widgetNameReadonly() {
+        return !!this.getDesignerConfig().widgetNameReadonly
+      },
+
     },
     methods: {
       updateWidgetNameAndRef(newName) {
@@ -52,19 +56,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

@@ -35,11 +35,12 @@
   import i18n from "../../../utils/i18n"
   import refMixin from "../../../components/form-render/refMixin"
   import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
+  import emitter from "@/utils/emitter";
 
   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

@@ -29,11 +29,12 @@
   import i18n from "../../../utils/i18n"
   import refMixin from "../../../components/form-render/refMixin"
   import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
+  import emitter from "@/utils/emitter";
 
   export default {
     name: "TableCellItem",
     componentName: "ContainerItem",
-    mixins: [i18n, refMixin],
+    mixins: [emitter, i18n, refMixin],
     components: {
       ...FieldComponents,
     },

src/extension/samples/card/card-widget.vue

@@ -41,17 +41,17 @@
 <script>
   import i18n from "@/utils/i18n"
   import containerMixin from "@/components/form-designer/form-widget/container-widget/containerMixin"
-  //import Draggable from 'vuedraggable'
   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"
   import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
 
   export default {
     name: "card-widget",
     componentName: 'ContainerWidget',
-    mixins: [i18n, containerMixin],
+    mixins: [i18n, containerMixin, refMixinDesign],
+    inject: ['refList'],
     components: {
-      //Draggable,
       ContainerWrapper,
       ...FieldComponents,
       ArrowDown,
@@ -74,6 +74,9 @@
       },
 
     },
+    created() {
+      this.initRefList()
+    },
     methods: {
       /**
        * 检查接收哪些组件拖放，如不接受某些组件拖放，则根据组件类型判断后返回false

src/lang/en-US.js

@@ -156,9 +156,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',
     },