feat: 菜单管理优化

src/components/table/index.vue

@@ -47,25 +47,66 @@ import { request, METHOD } from '@/utils/requestUtil';
 
 const data = [
     {
-        key: '1',
-        name: 'John Brown',
-        age: 32,
+        key: 1,
+        name: 'John Brown sr.',
+        age: 60,
         address: 'New York No. 1 Lake Park',
-        tags: ['nice', 'developer'],
-    },
-    {
-        key: '2',
-        name: 'Jim Green',
-        age: 42,
-        address: 'London No. 1 Lake Park',
-        tags: ['loser'],
+        children: [
+            {
+                key: 11,
+                name: 'John Brown',
+                age: 42,
+                address: 'New York No. 2 Lake Park',
+            },
+            {
+                key: 12,
+                name: 'John Brown jr.',
+                age: 30,
+                address: 'New York No. 3 Lake Park',
+                children: [
+                    {
+                        key: 121,
+                        name: 'Jimmy Brown',
+                        age: 16,
+                        address: 'New York No. 3 Lake Park',
+                    },
+                ],
+            },
+            {
+                key: 13,
+                name: 'Jim Green sr.',
+                age: 72,
+                address: 'London No. 1 Lake Park',
+                children: [
+                    {
+                        key: 131,
+                        name: 'Jim Green',
+                        age: 42,
+                        address: 'London No. 2 Lake Park',
+                        children: [
+                            {
+                                key: 1311,
+                                name: 'Jim Green jr.',
+                                age: 25,
+                                address: 'London No. 3 Lake Park',
+                            },
+                            {
+                                key: 1312,
+                                name: 'Jimmy Green sr.',
+                                age: 18,
+                                address: 'London No. 4 Lake Park',
+                            },
+                        ],
+                    },
+                ],
+            },
+        ],
     },
     {
-        key: '3',
+        key: 2,
         name: 'Joe Black',
         age: 32,
         address: 'Sidney No. 1 Lake Park',
-        tags: ['cool', 'teacher'],
     },
 ];
 
@@ -79,6 +120,7 @@ export default {
         addBtn: {
             type: Object,
         },
+        formatData: Function,
     },
     data() {
         return {
@@ -89,19 +131,21 @@ export default {
         };
     },
     mounted() {
+        console.log(this.addBtn);
         this.getData();
     },
 
     methods: {
         async getData() {
-            console.log('查询');
             this.loading = true;
-            setTimeout(() => {
-                this.data = data;
-                this.loading = false;
-            }, 1000);
-            const res = await request(this.url, METHOD.GET);
-            console.log(res);
+            try {
+                const res = await request(this.url, METHOD.GET);
+                if (this.formatData) this.data = this.formatData(res);
+                else this.data = res;
+            } catch (error) {
+                // todo
+            }
+            this.loading = false;
         },
         add() {
             this.addVisible = true;

src/pages/system/view/menu/MenuManagement.vue

 <template>
-    <my-table url="/api/v1/menus" addBtn="addBtn">
+    <my-table url="/api/v1/menus" :addBtn="addBtn" :formatData="formatData" rowKey="menuId">
         <template #search="{query}">
             <a-form-model-item label="菜单、目录名称">
                 <a-input v-model="query.name" />
@@ -8,13 +8,17 @@
         <template #add>
             <a-input v-model="add.name" />
         </template>
-        <a-table-column title="姓名" data-index="name" />
+        <a-table-column title="名称" data-index="menuName" />
+        <a-table-column title="类型" data-index="menuTypeName" />
+        <a-table-column title="显示排序" data-index="viewIndex" :sorter="sorter" sortOrder="ascend" />
+        <a-table-column title="显示图标" data-index="menuIcon" />
+        <a-table-column title="模块URL" data-index="menuUrl" />
         <a-table-column title="操作">
-            <template #default="row">
+            <template #default>
                 <span>
-                    <a> {{ row }}</a>
+                    <a>编辑</a>
                     <a-divider type="vertical" />
-                    <a>Delete</a>
+                    <a>删除</a>
                 </span>
             </template>
         </a-table-column>
@@ -26,6 +30,31 @@ export default {
     data: () => ({
         add: {},
         addBtn: { text: '新建', title: '菜单配置' },
+        sortOrder: 'ascend',
     }),
+    methods: {
+        formatData(data = []) {
+            let menu,
+                res = [],
+                tmp = data.slice();
+            while ((menu = tmp.pop())) {
+                if (menu.parentMenuId === 0) res.push(menu);
+                else {
+                    for (const resetMenu of data) {
+                        if (menu.parentMenuId === resetMenu.menuId) {
+                            resetMenu.children
+                                ? resetMenu.children.push(menu)
+                                : (resetMenu.children = [menu]);
+                        }
+                    }
+                }
+            }
+            console.log(res);
+            return res;
+        },
+        sorter(pre, next) {
+            return pre.viewIndex - next.viewIndex;
+        },
+    },
 };
 </script>

src/utils/requestUtil.js

@@ -17,7 +17,6 @@ axios.defaults.xsrfCookieName = xsrfHeaderName;
 function loadResponseInterceptor({ router }) {
     axios.interceptors.request.use(
         function(config) {
-            console.log(getToken(), config);
             // 在发送请求之前做些什么
             config.headers = {
                 ...config.headers,