perf(0.8.7-5): 表单设计器数据来源"字典"通过prop单独引入

Author: BoBoooooo

Diff for: package.json

@@ -1,6 +1,6 @@
 {
   "name": "element-pro-crud",
-  "version": "0.8.7-4",
+  "version": "0.8.7-5",
   "author": "BoBo<[email protected]>",
   "main": "lib/ProCrud.umd.min.js",
   "files": [

Diff for: src/component/form-designer/src/FormDesigner.vue

@@ -99,7 +99,7 @@
             </div>
           </el-header>
           <el-main class="config-content">
-            <WidgetConfig v-show="configTab == 'widget'" v-if="Object.keys(widgetFormSelect).length>0" :elementConfig="widgetFormSelect"></WidgetConfig>
+            <WidgetConfig v-show="configTab == 'widget'" v-if="Object.keys(widgetFormSelect).length>0" :dictType="dictType" :elementConfig="widgetFormSelect"></WidgetConfig>
             <FormConfig v-show="configTab == 'form'" :data="widgetForm.config"></FormConfig>
           </el-main>
         </el-container>
@@ -203,6 +203,10 @@ export default {
       type: Function,
       default: null,
     },
+    dictType: {
+      type: Array,
+      default: () => [],
+    },
   },
   data() {
     return {

Diff for: src/component/form-designer/src/WidgetConfig.vue

@@ -143,11 +143,11 @@
       </el-form-item>
       <el-form-item label="数据来源" v-if="Object.keys(elementConfig.options).indexOf('options') >= 0 || Object.keys(elementConfig.options).indexOf('remoteOptions') >= 0">
         <el-radio-group v-model="elementConfig.options.remote" size="mini" style="margin-bottom:10px;">
-          <el-radio-button v-if="!isRemoteComponent" label="dict">字典</el-radio-button>
+          <el-radio-button v-if="!isRemoteComponent && dictType && dictType.length > 0" label="dict">字典</el-radio-button>
           <el-radio-button v-if="!isRemoteComponent" label="static">静态</el-radio-button>
           <el-radio-button label="custom">自定义</el-radio-button>
         </el-radio-group>
-        <template v-if="elementConfig.options.remote == 'dict'">
+        <template v-if="elementConfig.options.remote == 'dict' && dictType && dictType.length > 0">
           <el-select size="mini" v-model="elementConfig.options.dictType" placeholder="字典类型" filterable style="width: 100%">
             <el-option v-for="item in dictType" :key="item.value" :label="item.label" :value="item.value"> </el-option>
           </el-select>
@@ -583,14 +583,16 @@ export default {
       type: Object,
       default: () => ({}),
     },
+    dictType: {
+      type: Array,
+      default: () => [],
+    },
   },
   data() {
     return {
       elementComponentConfig,
       jsonTemplate: '',
       jsonEditor: null,
-      // 字典类型
-      dictType: [],
       validator: {
         type: null,
         required: null,
@@ -612,17 +614,6 @@ export default {
       return this.elementConfig && ['treeselect'].includes(this.elementConfig.type);
     },
   },
-  created() {
-    // 请求字典分类
-    if (this.$PROCRUD && this.$PROCRUD.crud) {
-      this.$PROCRUD.crud(DML.SELECT, 'ad_codelist_type').then((res) => {
-        this.dictType = res.data.list.map(item => ({
-          label: item.typeName,
-          value: item.id,
-        }));
-      });
-    }
-  },
   methods: {
     saveJson() {
       const { type } = this.elementConfig;

Diff for: src/demo/App.vue

@@ -41,7 +41,7 @@
         <el-container class="container">
           <el-header><el-tag>表单设计器(FormDesigner)</el-tag></el-header>
           <el-main>
-            <FormDesigner ref="formDesigner" :getFormKey="getTableFields"> </FormDesigner>
+            <FormDesigner ref="formDesigner" :dictType="dictType" :getFormKey="getTableFields"> </FormDesigner>
           </el-main>
         </el-container>
         <el-container class="container">
@@ -281,6 +281,7 @@ export default {
       jsonTemplate: '',
       dictList: [],
       formList: [],
+      dictType: [],
       columns: {},
       allTables: null,
       btnSaveIsLoading: false,
@@ -316,6 +317,12 @@ export default {
   },
 
   created() {
+    crud(DML.SELECT, 'ad_codelist_type').then((res) => {
+      this.dictType = res.data.list.map(item => ({
+        label: item.typeName,
+        value: item.id,
+      }));
+    });
     getTables().then((res) => {
       this.allTables = res.data.map(item => ({
         label: item.TABLE_NAME,