From fc678c5088b084311f7c11cb2793dbe62049ca9e Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期四, 20 二月 2025 11:08:07 +0800
Subject: [PATCH] 字典改为树结构

---
 src/views/system/dict/data.vue |  557 ++++++++++++++++++++++++++++++-------------------------
 1 files changed, 301 insertions(+), 256 deletions(-)

diff --git a/src/views/system/dict/data.vue b/src/views/system/dict/data.vue
index 3befe4a..daeb77d 100644
--- a/src/views/system/dict/data.vue
+++ b/src/views/system/dict/data.vue
@@ -34,7 +34,6 @@
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">閲嶇疆</el-button>
       </el-form-item>
     </el-form>
-
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button
@@ -44,29 +43,18 @@
           size="mini"
           @click="handleAdd"
           v-hasPermi="['system:dict:add']"
-        >鏂板</el-button>
+        >鏂板
+        </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
-          type="success"
+          type="info"
           plain
-          icon="el-icon-edit"
+          icon="el-icon-sort"
           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>
+          @click="toggleExpandAll"
+        >灞曞紑/鎶樺彔
+        </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -76,7 +64,8 @@
           size="mini"
           @click="handleExport"
           v-hasPermi="['system:dict:export']"
-        >瀵煎嚭</el-button>
+        >瀵煎嚭
+        </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -85,34 +74,46 @@
           icon="el-icon-close"
           size="mini"
           @click="handleClose"
-        >鍏抽棴</el-button>
+        >鍏抽棴
+        </el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="瀛楀吀缂栫爜" align="center" prop="dictCode" />
-      <el-table-column label="瀛楀吀鏍囩" align="center" prop="dictLabel">
+    <el-table
+      v-if="refreshTable"
+      v-loading="loading"
+      :data="dataList"
+      row-key="dictCode"
+      :default-expand-all="isExpandAll"
+      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+    >
+      <el-table-column label="瀛楀吀鏍囩" width="200" prop="dictLabel">
         <template slot-scope="scope">
-          <span v-if="(scope.row.listClass == '' || scope.row.listClass == 'default') && (scope.row.cssClass == '' || scope.row.cssClass == null)">{{ scope.row.dictLabel }}</span>
-          <el-tag v-else :type="scope.row.listClass == 'primary' ? '' : scope.row.listClass" :class="scope.row.cssClass">{{ scope.row.dictLabel }}</el-tag>
+           <span
+             v-if="(scope.row.listClass == '' || scope.row.listClass == 'default') && (scope.row.cssClass == '' || scope.row.cssClass == null)"
+           >{{ scope.row.dictLabel }}</span>
+          <el-tag v-else :type="scope.row.listClass == 'primary' ? '' : scope.row.listClass"
+                  :class="scope.row.cssClass"
+          >{{ scope.row.dictLabel }}
+          </el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="瀛楀吀閿��" align="center" prop="dictValue" />
-      <el-table-column label="瀛楀吀鎺掑簭" align="center" prop="dictSort" />
+      <el-table-column label="瀛楀吀缂栫爜" align="center" prop="dictCode"/>
+      <el-table-column label="瀛楀吀閿��" align="center" prop="dictValue"/>
+      <el-table-column label="瀛楀吀鎺掑簭" align="center" prop="dictSort"/>
       <el-table-column label="鐘舵��" align="center" prop="status">
         <template slot-scope="scope">
           <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
         </template>
       </el-table-column>
-      <el-table-column label="澶囨敞" align="center" prop="remark" :show-overflow-tooltip="true" />
+      <el-table-column label="澶囨敞" align="center" prop="remark" :show-overflow-tooltip="true"/>
       <el-table-column label="鍒涘缓鏃堕棿" align="center" prop="createTime" width="180">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width">
+      <el-table-column label="鎿嶄綔" align="center" width="200" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
             size="mini"
@@ -120,43 +121,54 @@
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['system:dict:edit']"
-          >淇敼</el-button>
+          >淇敼
+          </el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-plus"
+            @click="handleAdd(scope.row)"
+            v-hasPermi="['system:dict:add']"
+          >鏂板
+          </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>
-
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
 
     <!-- 娣诲姞鎴栦慨鏀瑰弬鏁伴厤缃璇濇 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="瀛楀吀绫诲瀷">
-          <el-input v-model="form.dictType" :disabled="true" />
+          <el-input v-model="form.dictType" :disabled="true"/>
+        </el-form-item>
+        <el-form-item label="涓婄骇瀛楀吀" prop="parentId">
+          <treeselect
+            v-model="form.parentId"
+            :options="dictOptions"
+            :normalizer="normalizer"
+            :show-count="true"
+            placeholder="閫夋嫨涓婄骇瀛楀吀"
+          />
         </el-form-item>
         <el-form-item label="鏁版嵁鏍囩" prop="dictLabel">
-          <el-input v-model="form.dictLabel" placeholder="璇疯緭鍏ユ暟鎹爣绛�" />
+          <el-input v-model="form.dictLabel" placeholder="璇疯緭鍏ユ暟鎹爣绛�"/>
         </el-form-item>
         <el-form-item label="鏁版嵁閿��" prop="dictValue">
-          <el-input v-model="form.dictValue" placeholder="璇疯緭鍏ユ暟鎹敭鍊�" />
+          <el-input v-model="form.dictValue" placeholder="璇疯緭鍏ユ暟鎹敭鍊�"/>
         </el-form-item>
         <el-form-item label="鏍峰紡灞炴��" prop="cssClass">
-          <el-input v-model="form.cssClass" placeholder="璇疯緭鍏ユ牱寮忓睘鎬�" />
+          <el-input v-model="form.cssClass" placeholder="璇疯緭鍏ユ牱寮忓睘鎬�"/>
         </el-form-item>
         <el-form-item label="鏄剧ず鎺掑簭" prop="dictSort">
-          <el-input-number v-model="form.dictSort" controls-position="right" :min="0" />
+          <el-input-number v-model="form.dictSort" controls-position="right" :min="0"/>
         </el-form-item>
         <el-form-item label="鍥炴樉鏍峰紡" prop="listClass">
           <el-select v-model="form.listClass">
@@ -174,7 +186,8 @@
               v-for="dict in dict.type.sys_normal_disable"
               :key="dict.value"
               :label="dict.value"
-            >{{dict.label}}</el-radio>
+            >{{ dict.label }}
+            </el-radio>
           </el-radio-group>
         </el-form-item>
         <el-form-item label="澶囨敞" prop="remark">
@@ -190,213 +203,245 @@
 </template>
 
 <script>
-import { listData, getData, delData, addData, updateData } from "@/api/system/dict/data";
-import { optionselect as getDictOptionselect, getType } from "@/api/system/dict/type";
+import { dataList, getData, delData, addData, updateData } from '@/api/system/dict/data'
+import { optionselect as getDictOptionselect, getType } from '@/api/system/dict/type'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import Treeselect from '@riophae/vue-treeselect'
 
-export default {
-  name: "Data",
-  dicts: ['sys_normal_disable'],
-  data() {
-    return {
-      // 閬僵灞�
-      loading: true,
-      // 閫変腑鏁扮粍
-      ids: [],
-      // 闈炲崟涓鐢�
-      single: true,
-      // 闈炲涓鐢�
-      multiple: true,
-      // 鏄剧ず鎼滅储鏉′欢
-      showSearch: true,
-      // 鎬绘潯鏁�
-      total: 0,
-      // 瀛楀吀琛ㄦ牸鏁版嵁
-      dataList: [],
-      // 榛樿瀛楀吀绫诲瀷
-      defaultDictType: "",
-      // 寮瑰嚭灞傛爣棰�
-      title: "",
-      // 鏄惁鏄剧ず寮瑰嚭灞�
-      open: false,
-      // 鏁版嵁鏍囩鍥炴樉鏍峰紡
-      listClassOptions: [
-        {
-          value: "default",
-          label: "榛樿"
-        },
-        {
-          value: "primary",
-          label: "涓昏"
-        },
-        {
-          value: "success",
-          label: "鎴愬姛"
-        },
-        {
-          value: "info",
-          label: "淇℃伅"
-        },
-        {
-          value: "warning",
-          label: "璀﹀憡"
-        },
-        {
-          value: "danger",
-          label: "鍗遍櫓"
-        }
-      ],
-      // 绫诲瀷鏁版嵁瀛楀吀
-      typeOptions: [],
-      // 鏌ヨ鍙傛暟
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        dictType: undefined,
-        dictLabel: undefined,
-        status: undefined
-      },
-      // 琛ㄥ崟鍙傛暟
-      form: {},
-      // 琛ㄥ崟鏍￠獙
-      rules: {
-        dictLabel: [
-          { required: true, message: "鏁版嵁鏍囩涓嶈兘涓虹┖", trigger: "blur" }
-        ],
-        dictValue: [
-          { required: true, message: "鏁版嵁閿�间笉鑳戒负绌�", trigger: "blur" }
-        ],
-        dictSort: [
-          { required: true, message: "鏁版嵁椤哄簭涓嶈兘涓虹┖", trigger: "blur" }
-        ]
-      }
-    };
-  },
-  created() {
-    const dictId = this.$route.params && this.$route.params.dictId;
-    this.getType(dictId);
-    this.getTypeList();
-  },
-  methods: {
-    /** 鏌ヨ瀛楀吀绫诲瀷璇︾粏 */
-    getType(dictId) {
-      getType(dictId).then(response => {
-        this.queryParams.dictType = response.data.dictType;
-        this.defaultDictType = response.data.dictType;
-        this.getList();
-      });
-    },
-    /** 鏌ヨ瀛楀吀绫诲瀷鍒楄〃 */
-    getTypeList() {
-      getDictOptionselect().then(response => {
-        this.typeOptions = response.data;
-      });
-    },
-    /** 鏌ヨ瀛楀吀鏁版嵁鍒楄〃 */
-    getList() {
-      this.loading = true;
-      listData(this.queryParams).then(response => {
-        this.dataList = response.rows;
-        this.total = response.total;
-        this.loading = false;
-      });
-    },
-    // 鍙栨秷鎸夐挳
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 琛ㄥ崟閲嶇疆
-    reset() {
-      this.form = {
-        dictCode: undefined,
-        dictLabel: undefined,
-        dictValue: undefined,
-        cssClass: undefined,
-        listClass: 'default',
-        dictSort: 0,
-        status: "0",
-        remark: undefined
-      };
-      this.resetForm("form");
-    },
-    /** 鎼滅储鎸夐挳鎿嶄綔 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 杩斿洖鎸夐挳鎿嶄綔 */
-    handleClose() {
-      const obj = { path: "/system/dict" };
-      this.$tab.closeOpenPage(obj);
-    },
-    /** 閲嶇疆鎸夐挳鎿嶄綔 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.queryParams.dictType = this.defaultDictType;
-      this.handleQuery();
-    },
-    /** 鏂板鎸夐挳鎿嶄綔 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "娣诲姞瀛楀吀鏁版嵁";
-      this.form.dictType = this.queryParams.dictType;
-    },
-    // 澶氶�夋閫変腑鏁版嵁
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.dictCode)
-      this.single = selection.length!=1
-      this.multiple = !selection.length
-    },
-    /** 淇敼鎸夐挳鎿嶄綔 */
-    handleUpdate(row) {
-      this.reset();
-      const dictCode = row.dictCode || this.ids
-      getData(dictCode).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "淇敼瀛楀吀鏁版嵁";
-      });
-    },
-    /** 鎻愪氦鎸夐挳 */
-    submitForm: function() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.dictCode != undefined) {
-            updateData(this.form).then(response => {
-              this.$store.dispatch('dict/removeDict', this.queryParams.dictType);
-              this.$modal.msgSuccess("淇敼鎴愬姛");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addData(this.form).then(response => {
-              this.$store.dispatch('dict/removeDict', this.queryParams.dictType);
-              this.$modal.msgSuccess("鏂板鎴愬姛");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
-    },
-    /** 鍒犻櫎鎸夐挳鎿嶄綔 */
-    handleDelete(row) {
-      const dictCodes = row.dictCode || this.ids;
-      this.$modal.confirm('鏄惁纭鍒犻櫎瀛楀吀缂栫爜涓�"' + dictCodes + '"鐨勬暟鎹」锛�').then(function() {
-        return delData(dictCodes);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("鍒犻櫎鎴愬姛");
-        this.$store.dispatch('dict/removeDict', this.queryParams.dictType);
-      }).catch(() => {});
-    },
-    /** 瀵煎嚭鎸夐挳鎿嶄綔 */
-    handleExport() {
-      this.download('system/dict/data/export', {
-        ...this.queryParams
-      }, `data_${new Date().getTime()}.xlsx`)
-    }
-  }
-};
-</script>
\ No newline at end of file
+ export default {
+   name: 'Data',
+   dicts: ['sys_normal_disable'],
+   components: { Treeselect },
+   data() {
+     return {
+       // 閬僵灞�
+       loading: true,
+       // 閫変腑鏁扮粍
+       ids: [],
+       // 闈炲崟涓鐢�
+       single: true,
+       // 鏄剧ず鎼滅储鏉′欢
+       showSearch: true,
+       // 瀛楀吀琛ㄦ牸鏁版嵁
+       dataList: [],
+       // 瀛楀吀鏍戦�夐」
+       dictOptions: [],
+       // 榛樿瀛楀吀绫诲瀷
+       defaultDictType: '',
+       // 寮瑰嚭灞傛爣棰�
+       title: '',
+       // 鏄惁鏄剧ず寮瑰嚭灞�
+       open: false,
+       // 鏄惁灞曞紑锛岄粯璁ゅ叏閮ㄦ姌鍙�
+       isExpandAll: false,
+       // 閲嶆柊娓叉煋琛ㄦ牸鐘舵��
+       refreshTable: true,
+       // 鏁版嵁鏍囩鍥炴樉鏍峰紡
+       listClassOptions: [
+         {
+           value: 'default',
+           label: '榛樿'
+         },
+         {
+           value: 'primary',
+           label: '涓昏'
+         },
+         {
+           value: 'success',
+           label: '鎴愬姛'
+         },
+         {
+           value: 'info',
+           label: '淇℃伅'
+         },
+         {
+           value: 'warning',
+           label: '璀﹀憡'
+         },
+         {
+           value: 'danger',
+           label: '鍗遍櫓'
+         }
+       ],
+       // 绫诲瀷鏁版嵁瀛楀吀
+       typeOptions: [],
+       // 鏌ヨ鍙傛暟
+       queryParams: {
+         dictType: undefined,
+         dictLabel: undefined,
+         status: undefined
+       },
+       // 琛ㄥ崟鍙傛暟
+       form: {},
+       // 琛ㄥ崟鏍￠獙
+       rules: {
+         dictLabel: [
+           { required: true, message: '鏁版嵁鏍囩涓嶈兘涓虹┖', trigger: 'blur' }
+         ],
+         dictValue: [
+           { required: true, message: '鏁版嵁閿�间笉鑳戒负绌�', trigger: 'blur' }
+         ],
+         dictSort: [
+           { required: true, message: '鏁版嵁椤哄簭涓嶈兘涓虹┖', trigger: 'blur' }
+         ]
+       }
+     }
+   },
+   created() {
+     const dictId = this.$route.params && this.$route.params.dictId
+     this.getType(dictId)
+     this.getTypeList()
+   },
+   methods: {
+     /** 鏌ヨ瀛楀吀绫诲瀷璇︾粏 */
+     getType(dictId) {
+       getType(dictId).then(response => {
+         this.queryParams.dictType = response.data.dictType
+         this.defaultDictType = response.data.dictType
+         this.getList()
+       })
+     },
+     /** 鏌ヨ瀛楀吀绫诲瀷鍒楄〃 */
+     getTypeList() {
+       getDictOptionselect().then(response => {
+         this.typeOptions = response.data
+       })
+     },
+     /** 鏌ヨ瀛楀吀鏁版嵁鍒楄〃 */
+     getList() {
+       this.loading = true
+       dataList(this.queryParams).then(response => {
+         this.dataList = this.handleTree(response.data, 'dictCode')
+         this.loading = false
+       })
+     },
+     /** 杞崲瀛楀吀鏁版嵁缁撴瀯 */
+     normalizer(node) {
+       if (node.children && !node.children.length) {
+         delete node.children
+       }
+       return {
+         id: node.dictCode,
+         label: node.dictLabel,
+         children: node.children
+       }
+     },
+     /** 鏌ヨ鑿滃崟涓嬫媺鏍戠粨鏋� */
+     getTreeselect() {
+       dataList(this.queryParams).then(response => {
+         this.dictOptions = []
+         const dict = { dictCode: 0, dictLabel: '涓荤被鐩�', children: [] }
+         dict.children = this.handleTree(response.data, 'dictCode')
+         this.dictOptions.push(dict)
+       })
+     },
+     // 鍙栨秷鎸夐挳
+     cancel() {
+       this.open = false
+       this.reset()
+     },
+     // 琛ㄥ崟閲嶇疆
+     reset() {
+       this.form = {
+         dictCode: undefined,
+         parentId: undefined,
+         dictLabel: undefined,
+         dictValue: undefined,
+         cssClass: undefined,
+         listClass: 'default',
+         dictSort: 0,
+         status: '0',
+         remark: undefined
+       }
+       this.resetForm('form')
+     },
+     /** 鎼滅储鎸夐挳鎿嶄綔 */
+     handleQuery() {
+       this.queryParams.pageNum = 1
+       this.getList()
+     },
+     /** 杩斿洖鎸夐挳鎿嶄綔 */
+     handleClose() {
+       const obj = { path: '/system/dict' }
+       this.$tab.closeOpenPage(obj)
+     },
+     /** 閲嶇疆鎸夐挳鎿嶄綔 */
+     resetQuery() {
+       this.resetForm('queryForm')
+       this.queryParams.dictType = this.defaultDictType
+       this.handleQuery()
+     },
+     /** 鏂板鎸夐挳鎿嶄綔 */
+     handleAdd(row) {
+       this.reset()
+       this.getTreeselect()
+       if (row != undefined && row.dictCode) {
+         this.form.parentId = row.dictCode
+       } else {
+         this.form.parentId = 0
+       }
+       this.open = true
+       this.title = '娣诲姞瀛楀吀鏁版嵁'
+       this.form.dictType = this.queryParams.dictType
+     },
+     /** 灞曞紑/鎶樺彔鎿嶄綔 */
+     toggleExpandAll() {
+       this.refreshTable = false
+       this.isExpandAll = !this.isExpandAll
+       this.$nextTick(() => {
+         this.refreshTable = true
+       })
+     },
+     /** 淇敼鎸夐挳鎿嶄綔 */
+     handleUpdate(row) {
+       this.reset()
+       this.getTreeselect()
+       getData(row.dictCode).then(response => {
+         this.form = response.data
+         this.open = true
+         this.title = '淇敼瀛楀吀鏁版嵁'
+       })
+     },
+     /** 鎻愪氦鎸夐挳 */
+     submitForm: function() {
+       this.$refs['form'].validate(valid => {
+         if (valid) {
+           if (this.form.dictCode != undefined) {
+             updateData(this.form).then(response => {
+               this.$store.dispatch('dict/removeDict', this.queryParams.dictType)
+               this.$modal.msgSuccess('淇敼鎴愬姛')
+               this.open = false
+               this.getList()
+             })
+           } else {
+             addData(this.form).then(response => {
+               this.$store.dispatch('dict/removeDict', this.queryParams.dictType)
+               this.$modal.msgSuccess('鏂板鎴愬姛')
+               this.open = false
+               this.getList()
+             })
+           }
+         }
+       })
+     },
+     /** 鍒犻櫎鎸夐挳鎿嶄綔 */
+     handleDelete(row) {
+       const dictCodes = row.dictCode || this.ids
+       this.$modal.confirm('鏄惁纭鍒犻櫎瀛楀吀缂栫爜涓�"' + dictCodes + '"鐨勬暟鎹」锛�').then(function() {
+         return delData(dictCodes)
+       }).then(() => {
+         this.getList()
+         this.$modal.msgSuccess('鍒犻櫎鎴愬姛')
+         this.$store.dispatch('dict/removeDict', this.queryParams.dictType)
+       }).catch(() => {
+       })
+     },
+     /** 瀵煎嚭鎸夐挳鎿嶄綔 */
+     handleExport() {
+       this.download('system/dict/data/export', {
+         ...this.queryParams
+       }, `data_${new Date().getTime()}.xlsx`)
+     }
+   }
+ }
+</script>

--
Gitblit v1.8.0