feat(api): menu list

src/utils/treeUtils.ts

@@ -1,9 +1,32 @@
-interface TreeNode {
+export interface TreeNode {
   id: number;
   parentId: number;
   name: string;
+  key?: string;
   children?: TreeNode[];
 }
+export interface TreeMenuNode {
+  menuId: number;
+  parentId: number;
+  name: string;
+  key?: (string | number)[];
+  children?: TreeMenuNode[];
+}
+
+// function traverse(tree: TreeMenuNode[], rootId: number) {
+//   tree.forEach((item) => {
+//     if (item.parentId == rootId) {
+//       console.log('name', item.name);
+//       console.log('menuId', item.menuId);
+//       console.log('rootId', rootId);
+//       // temp.push(item.parentId);
+//       // item.key = temp;
+//     }
+//     if (item.children?.length) {
+//       traverse(item.children, item.menuId);
+//     }
+//   });
+// }
 
 export function makeTree(treeNodes: TreeNode[]): TreeNode[] {
   // 提前生成节点查找表。
@@ -16,6 +39,21 @@ export function makeTree(treeNodes: TreeNode[]): TreeNode[] {
     const parent = nodesMap.get(node.parentId) ?? virtualRoot;
     (parent.children ??= []).push(node);
   });
+  // if (virtualRoot.children?.length) {
+  //   traverse(virtualRoot.children, virtualRoot.children[0].id);
+  // }
+
+  return virtualRoot.children ?? [];
+}
 
+export function makeMenuTree(treeNodes: TreeMenuNode[]): TreeMenuNode[] {
+  const nodesMap = new Map<number, TreeMenuNode>(treeNodes.map((node) => [node.menuId, node]));
+
+  // 引入虚拟根节点来统一实现 parent 始终有效，避免空判断
+  const virtualRoot = {} as Partial<TreeMenuNode>;
+  treeNodes.forEach((node) => {
+    const parent = nodesMap.get(node.parentId) ?? virtualRoot;
+    (parent.children ??= []).push(node);
+  });
   return virtualRoot.children ?? [];
 }

src/views/dashboard/scenes/live.vue

@@ -34,7 +34,12 @@ updateUserId: null -->
     <BasicTable @register="registerTable">
       <template #toolbar> </template>
       <template #cover="{ record }">
-        <TableImg :size="150" :simpleShow="true" :imgList="[record.appListPicUrl]" />
+        <TableImg
+          v-if="record.appListPicUrl"
+          :size="150"
+          :simpleShow="true"
+          :imgList="[record.appListPicUrl]"
+        />
       </template>
       <template #houseType="{ record }">
         {{ renderHouseType(record.houseType) }}

src/views/dashboard/system/menu/MenuDrawer.vue

@@ -17,6 +17,7 @@
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
 
   import { getMenuList } from '/@/api/system/system';
+  import { makeMenuTree } from '/@/utils/treeUtils';
 
   export default defineComponent({
     name: 'MenuDrawer',
@@ -42,10 +43,14 @@
             ...data.record,
           });
         }
-        const treeData = await getMenuList();
+        const tData = await getMenuList();
+        console.log('tData', tData);
+        const treeData = makeMenuTree(tData);
         updateSchema({
-          field: 'parentMenu',
-          componentProps: { treeData },
+          field: 'parentId',
+          componentProps: {
+            treeData,
+          },
         });
       });
 

src/views/dashboard/system/menu/index.vue

@@ -36,7 +36,7 @@
   import MenuDrawer from './MenuDrawer.vue';
 
   import { columns, searchFormSchema } from './menu.data';
-
+  import { makeMenuTree } from '/@/utils/treeUtils';
   export default defineComponent({
     name: 'MenuManagement',
     components: { BasicTable, MenuDrawer, TableAction },
@@ -56,7 +56,7 @@
         isTreeTable: true,
         pagination: false,
         striped: false,
-        useSearchForm: true,
+        useSearchForm: false,
         showTableSetting: true,
         bordered: true,
         showIndexColumn: false,
@@ -72,7 +72,7 @@
       });
 
       function handleAfterFetch(data) {
-        console.log('data', data);
+        return makeMenuTree(data);
       }
 
       function handleCreate() {
@@ -82,6 +82,8 @@
       }
 
       function handleEdit(record: Recordable) {
+        record.parentId === 0 && Reflect.set(record, 'parentId', null);
+        console.log('record', record.parentId);
         openDrawer(true, {
           record,
           isUpdate: true,

src/views/dashboard/system/menu/menu.data.ts

@@ -37,10 +37,29 @@ export const columns: BasicColumn[] = [
     dataIndex: 'type',
     width: 100,
     customRender: ({ record }) => {
-      const color = 'green';
-      const type = record.type;
+      let color: string;
+      let label: string;
+      const type: number = record.type;
+      switch (type) {
+        case 0:
+          color = 'processing';
+          label = '目录';
+          break;
+        case 1:
+          color = 'warning';
+          label = '菜单';
+          break;
+        case 2:
+          color = 'error';
+          label = '按钮';
+          break;
+        default:
+          color = 'green';
+          label = '目录';
+          break;
+      }
 
-      return h(Tag, { color: color }, () => `目录${type}`);
+      return h(Tag, { color: color }, () => label);
     },
   },
   {
@@ -56,7 +75,7 @@ export const columns: BasicColumn[] = [
     customRender: ({ record }) => {
       const status = record.status;
       const enable = ~~status === 0;
-      const color = enable ? 'warning' : 'red';
+      const color = enable ? 'green' : 'red';
       const text = enable ? '启用' : '停用';
       return h(Tag, { color: color }, () => text);
     },
@@ -68,9 +87,9 @@ export const columns: BasicColumn[] = [
   },
 ];
 
-const isDir = (type: string) => type === '0';
-const isMenu = (type: string) => type === '1';
-const isButton = (type: string) => type === '2';
+const isDir = (type: number) => type === 0;
+const isMenu = (type: number) => type === 1;
+const isButton = (type: number) => type === 2;
 
 export const searchFormSchema: FormSchema[] = [
   {
@@ -98,13 +117,13 @@ export const formSchema: FormSchema[] = [
     field: 'type',
     label: '菜单类型',
     component: 'RadioButtonGroup',
-    defaultValue: '0',
+    defaultValue: 0,
 
     componentProps: {
       options: [
-        { label: '目录', value: '0' },
-        { label: '菜单', value: '1' },
-        { label: '按钮', value: '2' },
+        { label: '目录', value: 0 },
+        { label: '菜单', value: 1 },
+        { label: '按钮', value: 2 },
       ],
     },
     colProps: { lg: 24, md: 24 },
@@ -117,7 +136,7 @@ export const formSchema: FormSchema[] = [
   },
 
   {
-    field: 'parentMenu',
+    field: 'parentId',
     label: '上级菜单',
     component: 'TreeSelect',
     componentProps: {
@@ -158,7 +177,7 @@ export const formSchema: FormSchema[] = [
     ifShow: ({ values }) => isMenu(values.type),
   },
   {
-    field: 'permission',
+    field: 'perms',
     label: '权限标识',
     component: 'Input',
     ifShow: ({ values }) => !isDir(values.type),
@@ -167,11 +186,11 @@ export const formSchema: FormSchema[] = [
     field: 'status',
     label: '状态',
     component: 'RadioButtonGroup',
-    defaultValue: '0',
+    defaultValue: 1,
     componentProps: {
       options: [
-        { label: '启用', value: '0' },
-        { label: '禁用', value: '1' },
+        { label: '启用', value: 1 },
+        { label: '禁用', value: 0 },
       ],
     },
   },
@@ -207,11 +226,11 @@ export const formSchema: FormSchema[] = [
     field: 'show',
     label: '是否显示',
     component: 'RadioButtonGroup',
-    defaultValue: '0',
+    defaultValue: 0,
     componentProps: {
       options: [
-        { label: '是', value: '0' },
-        { label: '否', value: '1' },
+        { label: '是', value: 0 },
+        { label: '否', value: 1 },
       ],
     },
     ifShow: ({ values }) => !isButton(values.type),