多层字典维护界面

src/api/system/multilayerdict.js

@@ -9,10 +9,11 @@ export function treeList() {
 }
 
 // 查询列表
-export function tableListData(id) {
+export function tableListData(para) {
     return request({
-      url: "/system/dictionary/getDictTreeByParentId?parentId="+id,
-      method: "get",
+      url: "/system/dictionary/table/list",
+      method: "post",
+      data:para
     });
   }
 

src/views/system/device/index.vue

@@ -170,7 +170,7 @@
             <el-form-item label="设备品牌" prop="deviceBrand">
               <el-select style="width: 100%" v-model="form.deviceBrand" placeholder="请选择设备品牌"
                          @change="brandSelectChange">
-                <el-option v-for="item in getAssetDict('BrandType',-1)" :key="item.id" :label="item.name"
+                <el-option v-for="item in getAssetDict('BrandModelType',-1)" :key="item.id" :label="item.name"
                            :value="item.id"></el-option>
               </el-select>
             </el-form-item>

src/views/system/multilayerdict/index.vue

@@ -13,42 +13,45 @@
         >
         </org-tree> -->
         <div class="dic-tree">
-        <el-tree
-            :data="dictTreeData"
-            node-key="id"
-            default-expand-all
-            class="el-tree-ex"
-            @node-click="clickTreeNode"
-            :props="defaultProps"
-            :expand-on-click-node="false">
-            <span class="custom-tree-node" slot-scope="{ node, data }">
-              <span>{{ node.label }}</span>
-              <span>
-                <el-button
-                  type="text"
-                  size="mini"
-                  @click="() => handleAdd(data)">
-                  新增
-                </el-button>
-                <el-button v-if="data.id !=null"
-                  type="text"
-                  size="mini"
-                  @click="() => handleUpdate(data)">
-                  编辑
-                </el-button>
-                <el-button v-if="data.id !=null && data.children.length==0"
-                  type="text"
-                  size="mini"
-                  @click="() => handleDelete(data)">
-                  删除
-                </el-button>
-              </span>
-            </span>
-          </el-tree>
+          <div class="tree-container">
+            <el-tree
+                :data="dictTreeData"
+                node-key="id"
+                :default-expand-all="true"
+                class="el-tree-ex"
+                @node-click="clickTreeNode"
+                :props="defaultProps"
+                :expand-on-click-node="false">
+                <span class="custom-tree-node" slot-scope="{ node, data }">
+                  <span>{{ node.label }}</span>
+                  <span>
+                    <el-button
+                      type="text"
+                      size="mini"
+                      @click="() => handleAdd(data)">
+                      新增
+                    </el-button>
+                    <el-button v-if="data.id !=null"
+                      type="text"
+                      size="mini"
+                      @click="() => handleUpdate(data)">
+                      编辑
+                    </el-button>
+                    <el-button v-if="data.id !=null && data.children.length==0 && data.isSystem=='0' "
+                      type="text"
+                      size="mini"
+                      @click="() => handleDelete(data)">
+                      删除
+                    </el-button>
+                  </span>
+                </span>
+              </el-tree>
+          </div>
         </div>
       </el-col>
       <!--用户数据-->
       <el-col :span="18" :xs="24" v-if="1">
+        <div class="main-right-box">
         <div class="main-search-box">
         <el-form
           :model="queryParams"
@@ -101,58 +104,7 @@
           </el-col>
           <el-col :span="1.5">
             <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-          </el-col>
-          <!-- <el-col :span="1.5">
-            <el-button
-              type="primary"
-              icon="el-icon-plus"
-              size="mini"
-              @click="handleAdd"
-              v-hasPermi="['system:dict:add']"
-            >新增</el-button
-            >
-          </el-col> -->
-          <!-- <el-col :span="1.5">
-            <el-button
-              type="success"
-              plain
-              icon="el-icon-edit-outline"
-              size="mini"
-              :disabled="single"
-              @click="handleUpdate"
-              v-hasPermi="['system:dict:edit']"
-            >修改</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button
-              type="danger"
-              plain
-              icon="el-icon-delete"
-              size="mini"
-              :disabled="multiple"
-              @click="handleDelete"
-              v-hasPermi="['system:dict:remove']"
-            >删除</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button
-              type="warning"
-              plain
-              icon="el-icon-download"
-              size="mini"
-              @click="handleExport"
-              v-hasPermi="['system:dict:export']"
-            >导出</el-button>
-          </el-col> -->
-          <!-- <el-col :span="1.5">
-            <el-button
-              type="primary"
-              icon="el-icon-close"
-              size="small"
-              @click="handleClose"
-            >关闭</el-button
-            >
-          </el-col> -->
+          </el-col>        
           <right-toolbar
             :showSearch.sync="showSearch"
             @queryTable="getList"
@@ -168,7 +120,7 @@
         @selection-change="handleSelectionChange"
       >
         <!-- <el-table-column type="selection" width="55" align="center" /> -->
-        <el-table-column label="字典编码" align="center" prop="parentId" />
+        <!-- <el-table-column label="字典编码" align="center" prop="parentId" /> -->
         <el-table-column label="字典标签" align="center" prop="name"  :show-overflow-tooltip="true" width="340">
           <template slot-scope="scope">
           <span
@@ -182,9 +134,14 @@
             >
           </template>
         </el-table-column>
-        <el-table-column label="字典键值" align="center" prop="code"  width="140"/>
-        <el-table-column label="字典排序" align="center" prop="sort" width="140"/>
-        <el-table-column label="状态" align="center" prop="status" width="140">
+        <el-table-column label="字典键值" align="center" prop="code"  width="100"/>
+        <el-table-column label="字典排序" align="center" prop="sort" width="100"/>
+        <el-table-column label="系统内置字典" align="center" prop="isSystem" width="120">
+          <template slot-scope="scope">
+           {{scope.row.isSystem =='1'?"是":"否"}}
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" align="center" prop="status" width="100">
           <template slot-scope="scope">
             <dict-tag
               :options="dict.type.sys_normal_disable"
@@ -193,24 +150,28 @@
           </template>
         </el-table-column>
         <el-table-column
-          label="备注"
-          align="center"
-          prop="remark"
-          :show-overflow-tooltip="true"
-        >
-        </el-table-column>
-
-        <el-table-column
           label="创建时间"
           align="center"
-          prop="createTime"
           width="180"
         >
           <template slot-scope="scope">
-            <span>{{ parseTime(scope.row.createTime) }}</span>
+            <span>{{
+              scope.row.createTime
+                ? dayjs(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss")
+                : ""
+            }}</span>
           </template>
-        </el-table-column>
+        </el-table-column> 
+        
         <el-table-column
+          label="备注"
+          align="center"
+          prop="remark"
+          :show-overflow-tooltip="true"
+        >
+        </el-table-column>
+
+        <!-- <el-table-column
           label="操作"
           align="center"
           class-name="small-padding fixed-width"
@@ -222,18 +183,16 @@
               icon="el-icon-edit-outline"
               @click="handleUpdate(scope.row)"
               v-hasPermi="['system:dict:edit']"
-            >编辑</el-button
-            >
+            >编辑</el-button>
             <el-button
               size="mini"
               type="text"
               icon="el-icon-delete"
               @click="handleDelete(scope.row)"
               v-hasPermi="['system:dict:remove']"
-            >删除</el-button
-            >
+            >删除</el-button> 
           </template>
-        </el-table-column>
+        </el-table-column> -->
       </el-table>
 
       <pagination
@@ -243,7 +202,7 @@
         :limit.sync="queryParams.pageSize"
         @pagination="getList"
       />
-      
+        </div>
       </el-col>
     </el-row>
        <!-- 添加或修改参数配置对话框 -->
@@ -256,22 +215,29 @@
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="字典标签" prop="name">
-                <el-input v-model="form.name" placeholder="请输入字典标签" />
+              <el-form-item label="状态" prop="status">
+                <el-radio-group v-model="form.status">
+                  <el-radio
+                    v-for="dict in dict.type.sys_normal_disable"
+                    :key="dict.value"
+                    :label="dict.value"
+                  >{{ dict.label }}</el-radio
+                  >
+                </el-radio-group>
               </el-form-item>
             </el-col>
           </el-row>
           <el-row>
             <el-col :span="12">
-              <el-form-item label="字典键值" prop="code">
-                <el-input v-model="form.code" placeholder="请输入字典键值" />
+              <el-form-item label="字典标签" prop="name">
+                <el-input v-model="form.name" placeholder="请输入字典标签" />
               </el-form-item>
             </el-col>
-            <!-- <el-col :span="12">
-              <el-form-item label="样式属性" prop="cssClass">
-                <el-input v-model="form.cssClass" placeholder="请输入样式属性" />
+            <el-col :span="12">
+              <el-form-item label="字典键值" prop="code">
+                <el-input v-model="form.code" :disabled="form.isSystem=='1'" placeholder="请输入字典键值" />
               </el-form-item>
-            </el-col> -->
+            </el-col>
           </el-row>
           <el-row>
             <el-col :span="12">
@@ -284,26 +250,11 @@
                 />
               </el-form-item>
             </el-col>
-            <!-- <el-col :span="12">
-              <el-form-item label="回显样式" prop="listClass">
-                <el-select style="width: 100%" v-model="form.listClass">
-                  <el-option
-                    v-for="item in listClassOptions"
-                    :key="item.value"
-                    :label="item.label + '(' + item.value + ')'"
-                    :value="item.value"
-                  ></el-option>
-                </el-select>
-              </el-form-item>
-            </el-col> -->
-          </el-row>
-
-          <el-row>
             <el-col :span="12">
-              <el-form-item label="状态" prop="status">
-                <el-radio-group v-model="form.status">
+              <el-form-item label="系统内置" prop="isSystem">
+                <el-radio-group v-model="form.isSystem" :disabled="true">
                   <el-radio
-                    v-for="dict in dict.type.sys_normal_disable"
+                    v-for="dict in dict.type.sys_yes_no_num"
                     :key="dict.value"
                     :label="dict.value"
                   >{{ dict.label }}</el-radio
@@ -312,12 +263,12 @@
               </el-form-item>
             </el-col>
           </el-row>
-
           <el-form-item label="备注" prop="remark">
             <el-input
               v-model="form.remark"
               type="textarea"
               placeholder="请输入内容"
+              maxlength="500"
             ></el-input>
           </el-form-item>
         </el-form>
@@ -332,27 +283,25 @@
 <script>
 import OrgTree from "@/components/orgTree";
 import {
-  
-  
-} from "@/api/system/dict/data";
-import {
   optionselect as getDictOptionselect,
   getType,
 } from "@/api/system/dict/type";
+import dayjs from "dayjs";
 import {treeList,delData,
   addData,
   updateData,
   getData,tableListData,} from "@/api/system/multilayerdict";
 
-export default {
+export default {  
   dicts: [
     "sys_normal_disable",
     "sys_user_sex",
     "sys_user_is_lock",
     "sys_yes_no",
+    "sys_yes_no_num",
   ],
 
-  name: "User",
+  name: "multLayerDict",
   mixins: [],
   components: {OrgTree},
 
@@ -420,13 +369,26 @@ export default {
     // const dictId = this.$route.params && this.$route.params.dictId;
     // this.getType(dictId);
     // this.getTypeList();
+   
   },
 
   mounted() {
     this.getDictTreeData();
+    this.getHeight();
+    this.handleQuery();
   },
 
-  methods: {   
+  methods: {
+    dayjs,
+    getHeight(){
+      let orgTree = document.querySelector('.dic-tree');
+      const resizeObserver = new ResizeObserver(entries => {
+        for (let entry of entries) {
+          orgTree.style.height = entry.contentRect.height + 'px';
+        }
+      });
+      resizeObserver.observe(document.querySelector('.main-right-box'));
+    },   
     getTree() {
       return treeList();
     }, 
@@ -456,15 +418,26 @@ export default {
     },
     clickTreeNode(data)
     {
+      console.log("clickTreeNode",data);
       this.queryParams.parentId = data.id?data.id:-1;
+      this.queryParams.path = data.path?data.path:null;
+      if(!data.id)
+      {
+        this.queryParams.type = data.code;
+      }
+      else
+      {
+        this.queryParams.type=null;
+      }
+      
       this.handleQuery();
     },
     /** 查询字典数据列表 */
     getList() {
-      this.loading = true;
-      tableListData(this.queryParams.parentId).then((response) => {
-        this.dataList = response.data;
-        this.total = response.data.length;
+      // this.loading = true;
+      tableListData(this.queryParams).then((response) => {
+        this.dataList = response.rows;
+        this.total = response.total;
         this.loading = false;
       });
     },
@@ -483,6 +456,7 @@ export default {
         code: undefined,
         sort: 0,
         status: "0",
+        isSystem: "0",
         remark: undefined,
       };
       this.resetForm("form");
@@ -597,7 +571,7 @@ export default {
 };
 </script>
 
-<style lang="scss"></style>
+
 <style lang="scss" scoped>
  .custom-tree-node {
     flex: 1;
@@ -608,12 +582,12 @@ export default {
     padding-right: 8px;
   }
   .dic-tree{
-  background-color: #fff;
-  padding: 10px;
-  box-shadow: 0 2px 8px #ccc;
-  -min-height: calc(100vh - 107px);
-  overflow: auto;
-}
+    background-color: #fff;
+    padding: 10px;
+    box-shadow: 0 2px 8px #ccc;
+    -min-height: calc(100vh - 107px);
+    overflow: auto;
+  }
 .el-tree-ex {
   ::v-deep .is-current > .el-tree-node__content {
     background-color: #d1e0f1 !important;