feat: 树形结构处理示例页

src/lang/modules/enUS.ts

@@ -108,6 +108,7 @@ export default {
     ["recorder"]: "recorder",
     ["virtual-list"]: "virtual-list",
     ["common-tools"]: "common tools",
+    ["tree-tools"]: "tree-tools",
     ["test"]: "test"
   }
 };

src/lang/modules/zhCN.ts

@@ -108,6 +108,7 @@ export default {
     ["recorder"]: "录音",
     ["virtual-list"]: "虚拟列表",
     ["common-tools"]: "常用工具类",
+    ["tree-tools"]: "树处理工具类",
     ["test"]: "测试"
   }
 };

src/mock/_data/system_menu.ts

@@ -863,6 +863,27 @@ export const systemMenu = [
     },
     children: null
   },
+  {
+    id: "0903",
+    parentId: "09",
+    path: "/functions/tree-tools",
+    name: "tree-tools",
+    component: "functions/tree-tools/tree-tools",
+    meta: {
+      title: "tree-tools",
+      hide: false,
+      disable: false,
+      keepAlive: true,
+      affix: false,
+      link: "",
+      iframe: false,
+      roles: ["admin"],
+      icon: "icon-menu",
+      sort: 3,
+      type: 2
+    },
+    children: null
+  },
   {
     id: "10",
     parentId: "0",

src/views/functions/tree-tools/tree-tools.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="snow-page">
+    <div class="snow-inner">
+      <a-alert type="success">工具类位置: src/utils/tree-tools.ts</a-alert>
+      <a-divider />
+      <a-space direction="vertical" fill>
+        <div>判断code在树形数据中是否存在: treeCodeExist</div>
+        <div>返回true / false，示例: treeCodeExist(treeData, "ABC123", { key: "value", childrenKey: "nodes" })</div>
+        <div>
+          使用方式：
+          <a-typography-text code
+            >treeCodeExist(树数据, 指定的code, { key: code的key, childrenKey: 下级绑定的key比如children })</a-typography-text
+          >
+        </div>
+      </a-space>
+      <a-divider />
+      <a-space direction="vertical" fill>
+        <div>返回指定名称的所有父节点: findParentsTailRecursive</div>
+        <div>示例: findParentsTailRecursive(treeData.value, 'KeyValue')</div>
+        <div>
+          使用方式：
+          <a-typography-text code>findParentsTailRecursive(树数据, 指定key绑定的值)</a-typography-text>
+        </div>
+      </a-space>
+      <a-divider />
+      <a-space direction="vertical" fill>
+        <div>数组扁平化-多维转一维: arrayFlattened</div>
+        <div>返回转一维的数组，示例: arrayFlattened(treeData, 'children')</div>
+        <div>
+          使用方式：
+          <a-typography-text code>arrayFlattened(树数据, 下级的键名如children)</a-typography-text>
+        </div>
+      </a-space>
+      <a-divider />
+      <a-space direction="vertical" fill>
+        <div>乱序一维数组转树形结构: buildTreeOptimized</div>
+        <div>返回根据parentId将乱序的一维数组转树形结构，示例: buildTreeOptimized(nodes)</div>
+        <div>
+          使用方式：
+          <a-typography-text code>buildTreeOptimized(乱序的一维数组)</a-typography-text>
+        </div>
+      </a-space>
+      <a-divider />
+      <a-space direction="vertical" fill>
+        <div>根据id找到对应节点: findCategoryById</div>
+        <div>返回指定id找到对应的节点，示例: findCategoryById(data, targetId)</div>
+        <div>
+          使用方式：
+          <a-typography-text code>findCategoryById(树数据, 指定的id)</a-typography-text>
+        </div>
+      </a-space>
+    </div>
+  </div>
+</template>