0613改用elplus-treeSel

ruoyi-ui/src/components/TreeSelect/index.vue

@@ -81,18 +81,23 @@ const defaultExpandedKey = ref([]);
 
 function initHandle() {
   nextTick(() => {
+    if (!props.objMap.value || !props.objMap.label) {
+      throw new Error('objMap 必须包含 value 和 label 字段');
+    }
+    if (!props.options.length) return; // 数据为空时跳过
+
     const selectedValue = valueId.value;
-    if(selectedValue !== null && typeof (selectedValue) !== 'undefined') {
-      const node = proxy.$refs.selectTree.getNode(selectedValue)
+    if (selectedValue != null) {
+      const node = proxy.$refs.selectTree?.getNode(selectedValue);
       if (node) {
-        valueTitle.value = node.data[props.objMap.label]
-        proxy.$refs.selectTree.setCurrentKey(selectedValue) // 设置默认选中
-        defaultExpandedKey.value = [selectedValue] // 设置默认展开
+        valueTitle.value = node.data[props.objMap.label];
+        proxy.$refs.selectTree.setCurrentKey(selectedValue);
+        defaultExpandedKey.value = [selectedValue];
       }
     } else {
-      clearHandle()
+      clearHandle();
     }
-  })
+  });
 }
 function handleNodeClick(node) {
   valueTitle.value = node[props.objMap.label]
@@ -100,6 +105,7 @@ function handleNodeClick(node) {
   defaultExpandedKey.value = [];
   proxy.$refs.treeSelect.blur()
   selectFilterData('')
+  console.log(node)
 }
 function selectFilterData(val) {
   proxy.$refs.selectTree.filter(val)

ruoyi-ui/src/views/base/catalogue/index.vue

@@ -141,14 +141,20 @@
     <el-dialog :title="title" v-model="open" width="600px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-row>
-          <el-col :span="24" v-if="form.catePcode !== 0">
+          <el-col :span="24" v-if="form.catePcode !== '0'">
             <el-form-item label="上级目录" prop="catePcode">
-              <TreeSelect
+              <!-- <TreeSelect
                 style="width: 100%;"
                 v-model="form.catePcode"
+                :objMap="{ value: 'cateCode', label: 'cateName', children: 'children' }"
                 :options="deptOptions"
-                :normalizer="normalizer"
                 placeholder="选择上级目录"
+              /> -->
+              <el-tree-select
+                v-model="form.catePcode"
+                :data="deptOptions"
+                :render-after-expand="false"
+                style="width: 100%"
               />
             </el-form-item>
           </el-col>
@@ -161,6 +167,7 @@
             <el-form-item label="显示排序" prop="cateSeq">
               <el-input-number
                 v-model="form.cateSeq"
+                @change="showChange"
                 controls-position="right"
                 :min="0"
               />
@@ -276,6 +283,9 @@ export default {
     this.getList();
   },
   methods: {
+    showChange(){
+      console.log(this.form)
+    },
     async getDicts(){
       await getDicts("sys_normal_disable").then((r) => {
         for(var i =0;i<r.data.length;i++){
@@ -301,7 +311,7 @@ export default {
         delete node.children;
       }
       return {
-        id: node.cateCode,
+        value: node.cateCode,
         label: node.cateName,
         children: node.children,
       };
@@ -355,18 +365,94 @@ export default {
       });
     },
     /** 修改按钮操作 */
-    handleUpdate(row) {
+    async handleUpdate(row) {
       this.reset();
-      getCatalog(row.cateCode).then((response) => {
+      await listCatalog(this.queryParams).then((r) => {
+        this.deptOptions = this.buildTree(r.data);
+        this.deptOptions = this.renameTreeProperties(this.deptOptions,{ cateName: 'label', cateCode: 'value' }, { childrenKey: 'children' })
+        
+      });
+      await getCatalog(row.cateCode).then((response) => {
         this.form = response.data;
         this.open = true;
         this.title = "修改目录";
       });
-      listCatalog(this.queryParams).then((r) => {
-        this.deptOptions = this.handleTree(r.data, "cateCode", "catePcode");
-      });
+      console.log(this.deptOptions)
+    },
+     buildTree(flatData, { 
+        codeKey = 'cateCode', 
+        parentKey = 'catePcode', 
+        childrenKey = 'children' 
+      } = {}) {
+        const nodeMap = new Map();
+        const tree = [];
+        flatData.forEach(node => {
+          nodeMap.set(node[codeKey], { ...node, [childrenKey]: [] });
+        });
+        flatData.forEach(node => {
+          const parentCode = node[parentKey];
+          const currentNode = nodeMap.get(node[codeKey]);
+          if (!parentCode || !nodeMap.has(parentCode)) {
+            tree.push(currentNode);
+          } else {
+            const parentNode = nodeMap.get(parentCode);
+            parentNode[childrenKey].push(currentNode);
+          }
+        });
+        return tree;
+      },
+    renameTreeProperties(tree, nameMap, {
+      childrenKey = 'children',
+      checkCircular = true
+      } = {}) {
+        const visited = new WeakSet(); // 用于检测循环引用
+
+      function processNode(node) {
+          if (!node || typeof node !== 'object') return node;
+          
+          // 检测循环引用
+          if (checkCircular) {
+            if (visited.has(node)) {
+              console.warn('检测到循环引用，跳过处理:', node);
+              return node;
+            }
+            visited.add(node);
+          }
+
+          // 创建新节点（浅拷贝）
+          const newNode = Array.isArray(node) ? [] : {};
+          
+          // 重命名属性
+          for (const [oldName, newName] of Object.entries(nameMap)) {
+            if (oldName in node) {
+              newNode[newName] = node[oldName];
+            }
+          }
+
+          // 复制未映射的原始属性
+          for (const key in node) {
+            if (!nameMap.hasOwnProperty(key) && !newNode.hasOwnProperty(key)) {
+              newNode[key] = node[key];
+            }
+          }
+
+          // 递归处理子节点
+          if (node[childrenKey]) {
+            newNode[childrenKey] = node[childrenKey].map(processNode);
+            
+            // 可选：移除空子节点数组
+            if (newNode[childrenKey].length === 0) {
+              delete newNode[childrenKey];
+            }
+          }
+
+          return newNode;
+        }
+
+      return Array.isArray(tree) 
+        ? tree.map(processNode) 
+        : processNode(tree);
     },
-    
     /** 提交按钮 */
     submitForm: function () {
       this.$refs["form"].validate((valid) => {