Merge branch 'feature/mockApi' of http://face3d.4dage.com:7005/zhangyupeng/zfb_mp into feature/mockApi

src/utils/treeUtils.ts

@@ -0,0 +1,21 @@
+interface TreeNode {
+  id: number;
+  parentId: number;
+  name: string;
+  children?: TreeNode[];
+}
+
+export function makeTree(treeNodes: TreeNode[]): TreeNode[] {
+  // 提前生成节点查找表。
+  // 如果明确节点是顺序可以保证先父后子，可以省去这次遍历，在后面边遍历过程中填充查找表
+  const nodesMap = new Map<number, TreeNode>(treeNodes.map((node) => [node.id, node]));
+
+  // 引入虚拟根节点来统一实现 parent 始终有效，避免空判断
+  const virtualRoot = {} as Partial<TreeNode>;
+  treeNodes.forEach((node) => {
+    const parent = nodesMap.get(node.parentId) ?? virtualRoot;
+    (parent.children ??= []).push(node);
+  });
+
+  return virtualRoot.children ?? [];
+}

src/views/dashboard/product/category.vue

@@ -34,6 +34,7 @@
 
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useMessage } from '/@/hooks/web/useMessage';
+  import { makeTree } from '/@/utils/treeUtils';
 
   export default defineComponent({
     components: { BasicTable, TableAction },
@@ -61,6 +62,11 @@
           width: 50,
         },
         {
+          title: '级数',
+          dataIndex: 'level',
+          width: 50,
+        },
+        {
           title: '状态',
           dataIndex: 'status',
           width: 80,
@@ -87,7 +93,8 @@
         useSearchForm: true,
         showTableSetting: true,
         tableSetting: { fullScreen: true },
-        showIndexColumn: false,
+        showIndexColumn: true,
+        pagination: false,
         rowKey: 'id',
         bordered: true,
         actionColumn: {
@@ -98,14 +105,9 @@
           fixed: undefined,
         },
         afterFetch(data) {
-          console.log('data', data);
-          const nest = (items, id = -1, link = 'parentId') =>
-            items
-              .filter((item) => item[link] === id)
-              .map((item) => ({ ...item, children: nest(items, item.id) }));
-
-          console.log('11', nest(data));
-          return nest(data);
+          const treeData = makeTree(data);
+          console.log('data', treeData);
+          return treeData;
         },
       });