fix: 修复表格设计器字典bug @0.8.1

BoBoooooo · Jan 8, 2021 · 1531681 · 1531681
1 parent 04e0b58
commit 1531681
Show file tree

Hide file tree

Showing 4 changed files with 110 additions and 33 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "element-pro-crud",
-  "version": "0.8.0-7",
+  "version": "0.8.1",
   "main": "lib/ProCrud.umd.min.js",
   "files": [
     "lib",

diff --git a/src/component/table-designer/src/SelectConfig.vue b/src/component/table-designer/src/SelectConfig.vue
@@ -11,7 +11,7 @@
       <el-radio-group v-model="localOption.remote"
                       size="mini"
                       style="margin: 3px 0 0 0;">
-        <el-radio-button label="dict">字典</el-radio-button>
+        <el-radio-button label="dict" v-if="dictList.length > 0">字典</el-radio-button>
         <el-radio-button label="static">静态</el-radio-button>
         <el-radio-button label="custom">自定义</el-radio-button>
       </el-radio-group>
@@ -29,7 +29,7 @@
       <el-select v-model="localOption.dictType"
                  placeholder="字典类型"
                  filterable>
-        <el-option v-for="item in dictType"
+        <el-option v-for="item in dictList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
@@ -107,8 +107,6 @@ export default {
   },
   data() {
     return {
-      // 字典类型
-      dictType: [],
       // 当前组件内部options
       localOption: null,
     };
@@ -119,15 +117,13 @@ export default {
       type: Object,
       default: () => ({}),
     },
+    // 字典列表
+    dictList: {
+      type: Array,
+      default: () => [],
+    },
   },
   created() {
-    // 请求字典分类
-    this.$PROCRUD.crud(DML.SELECT, 'ad_codelist_type').then((res) => {
-      this.dictType = res.data.list.map(item => ({
-        label: item.codename,
-        value: item.codevalue,
-      }));
-    });
     // 把外部option同步到组件内部
     this.localOption = this.sourceOption;
     // 表单设计中没有根据什么查询的选项

diff --git a/src/component/table-designer/src/TableDesigner.vue b/src/component/table-designer/src/TableDesigner.vue
@@ -68,7 +68,7 @@
             <!-- 高级查询，如果配置了popover同时options存在就显示编辑 -->
             <el-popover v-else-if="column.is === 'popover' && item[column.field]" placement="bottom-start" width="400" trigger="click">
               <!-- 下拉菜单配置 -->
-              <SelectConfig :sourceOption.sync="item[column.field]" />
+              <SelectConfig :dictList="dictList" :sourceOption.sync="item[column.field]" />
               <el-button size="small" slot="reference" type="primary">
                 编辑菜单
               </el-button>
@@ -118,6 +118,11 @@ export default {
       type: Array,
       default: () => [],
     },
+    // 字典列表
+    dictList: {
+      type: Array,
+      default: () => [],
+    },
   },
   data() {
     return {

diff --git a/src/demo/App.vue b/src/demo/App.vue
@@ -6,28 +6,53 @@
 -->
 <template>
   <div id="app">
-    <el-container class="container">
-      <el-header>表格设计器(TableDesigner)</el-header>
-      <el-main>
-        <TableDesigner :formList="formList"  ref="tableDesigner"></TableDesigner>
-      </el-main>
-    </el-container>
+    <el-container>
+      <el-header height="80px" class="top">
+        <div class="logo">
+          <img src="https://pic.downk.cc/item/5ff7d31d3ffa7d37b3c8ece9.png" />
+          <h2>ElementProCrud</h2>
+        </div>
+        <div class="info">
+          <span class="tips">解放双手 早点下班</span>
+        </div>
+        <div class="right">
+          <el-link target="_blank" :underline="false" href="http://server.boboooooo.top:9999/admin/#/login" type="primary">
+            <h3>生产环境示例</h3>
+          </el-link>
+          <el-link target="_blank" :underline="false" href="https://crud.boboooooo.top/" type="primary">
+            <h3>文档</h3>
+          </el-link>
+          <el-link target="_blank" :underline="false" href="https://github.com/BoBoooooo/Element-Pro-Crud" type="primary">
+            <img style="marign-top:10px" src="https://img.shields.io/github/stars/BoBoooooo/Element-Pro-Crud?style=social" />
+          </el-link>
+        </div>
+      </el-header>
+      <el-main class="content">
+        <el-container class="container">
+          <el-header>表格设计器(TableDesigner)</el-header>
+          <el-main>
+            <TableDesigner :dictList="dictList" :formList="formList" ref="tableDesigner"></TableDesigner>
+          </el-main>
+        </el-container>
 
-    <el-container class="container">
-      <el-header>表单设计器(FormDesigner)</el-header>
-      <el-main>
-        <FormDesigner ref="formDesigner" :getFormKey="getTableFields">
-          <template #custom-btn>
-            <el-button disabled type="text" size="small" @click="btnSaveOnClick" :loading="btnSaveIsLoading">保存</el-button>
-          </template>
-        </FormDesigner>
-      </el-main>
-    </el-container>
-    <el-container class="container">
-      <el-header>CrudTable</el-header>
-      <el-main>
-        <CrudTable tableName="person" :isMultiple="false"> </CrudTable>
+        <el-container class="container">
+          <el-header>表单设计器(FormDesigner)</el-header>
+          <el-main>
+            <FormDesigner ref="formDesigner" :getFormKey="getTableFields">
+              <template #custom-btn>
+                <el-button disabled type="text" size="small" @click="btnSaveOnClick" :loading="btnSaveIsLoading">保存</el-button>
+              </template>
+            </FormDesigner>
+          </el-main>
+        </el-container>
+        <el-container class="container">
+          <el-header>CrudTable组件 此处为人员信息管理示例</el-header>
+          <el-main>
+            <CrudTable tableName="person" :isMultiple="false"> </CrudTable>
+          </el-main>
+        </el-container>
       </el-main>
+      <el-footer> </el-footer>
     </el-container>
   </div>
 </template>
@@ -74,9 +99,16 @@ export default {
       this.formList = res.data.list;
     });
     this.initFormJson();
+    crud(DML.SELECT, 'ad_codelist_type').then((res) => {
+      this.dictList = res.data.list.map(item => ({
+        label: item.typeName,
+        value: item.codeValue,
+      }));
+    });
   },
   data() {
     return {
+      dictList: [],
       formList: [],
       remoteFuncs: {
         // 请求角色
@@ -108,6 +140,12 @@ export default {
 html,
 body {
   height: 100%;
+  margin: 0;
+}
+h2,
+h3 {
+  margin: 0;
+  display: inline-block;
 }
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
@@ -134,6 +172,44 @@ body {
   color: #333;
   line-height: 60px;
 }
+.top {
+  padding: 10px 8rem;
+  background: #ddf4ff;
+  text-align: center;
+  .logo {
+    float: left;
+    display: flex;
+    img {
+      display: inline-block;
+      width: 60px;
+      height: 60px;
+    }
+    h2 {
+      margin-left: 10px;
+      color: #2196f3;
+      text-shadow: 1px 1px rgb(189, 189, 189);
+    }
+  }
+  .info {
+    display: inline-block;
+    .tips {
+      font-size: 20px !important;
+      font-weight: 600;
+    }
+  }
+  .right {
+    float: right;
+    margin-top: 20px;
+    line-height: 10px;
+    & > * {
+      margin-left: 10px;
+    }
+  }
+}
+.content {
+  max-width: 1600px;
+  margin: 0 auto;
+}
 
 .el-radio-group {
   padding-left: 10px;