From d42685be06413a686eaf87013f0621906f8e406a Mon Sep 17 00:00:00 2001
From: wang_fan_w <2547096351@qq.com>
Date: Sat, 24 Aug 2024 17:08:57 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=B7=AF=E7=94=B1=E6=A0=91=E6=8E=92?=
 =?UTF-8?q?=E5=BA=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/route-output.ts | 42 ++++++++++++++++++++++++++++++++------
 src/router/route.ts        |  5 ++---
 src/typings/global.d.ts    |  2 ++
 3 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/src/router/route-output.ts b/src/router/route-output.ts
index b67c728..56d14d2 100644
--- a/src/router/route-output.ts
+++ b/src/router/route-output.ts
@@ -20,21 +20,20 @@ export async function initSetRouter() {
   // 初始化路由，渲染loading
   loadingPage.start();
   const store = useRoutesListStore(pinia);
-  // 根据角色权限过滤树
+  // 根据角色权限过滤树并将其排序
   const originTree: RouteRecordRaw[] = deepClone(dynamicRoutes);
-  let filteredTree = filterByRole(originTree[0].children);
+  let filteredTree = treeSort(filterByRole(originTree[0].children));
   await store.setRouteTree(filteredTree);
   // 根据树生成一维路由数组
   const flattenedArray = linearArray(filteredTree);
-  // 设置完整的路由，二维路由，顶层路由 + 二级的一维路由
-  const twoStoryTree = originTree.map(item => {
+  // 设置完整的路由，二维路由：顶层路由 + 二级的一维路由
+  const addBeforeTree = originTree.map(item => {
     if (flattenedArray.length > 0) item.redirect = flattenedArray[0].path;
     item.children = flattenedArray;
     return item;
   });
-
   // 动态添加路由
-  twoStoryTree.forEach((route: any) => router.addRoute(route));
+  addBeforeTree.forEach((route: RouteRecordRaw) => router.addRoute(route));
   // 设置一维路由
   setRouting(flattenedArray);
 }
@@ -78,6 +77,37 @@ export const filterByRole = (tree: any) => {
   });
 };
 
+/**
+ * 路由树递归排序
+ * 1、先给当前层排序
+ * 2、若当前层有children则递归排序
+ * @param {array} tree 根据角色权限过滤后的路由树
+ * @returns 返回排序之后的树
+ */
+export const treeSort = (tree: Menu.MenuOptions[]) => {
+  if (!tree || tree.length == 0) return [];
+  tree.sort((a: Menu.MenuOptions, b: Menu.MenuOptions) => {
+    // a和b都是undefined则相等
+    if (a.meta.sort != 0 && !a.meta.sort && b.meta.sort != 0 && !b.meta.sort) {
+      return 0;
+    }
+    // a是undefined则a被排在b之后
+    if (a.meta.sort != 0 && !a.meta.sort) return 1;
+    // b是undefined则b被排在a之后
+    if (b.meta.sort != 0 && !b.meta.sort) return -1;
+    return a.meta.sort - b.meta.sort;
+  });
+
+  // 深层递归
+  let sortAfter = tree.map((item: any) => {
+    if (item?.children?.length > 0) {
+      item.children = treeSort(item.children);
+    }
+    return item;
+  });
+  return sortAfter;
+};
+
 /**
  * 校验该角色是否有路由权限
  * @param {array} roles 路由的角色权限
diff --git a/src/router/route.ts b/src/router/route.ts
index f7ebe6c..38ba3ae 100644
--- a/src/router/route.ts
+++ b/src/router/route.ts
@@ -90,7 +90,6 @@ export const dynamicRoutes: RouteRecordRaw[] = [
           }
         ]
       },
-
       {
         path: "/table-management",
         name: "table-management",
@@ -122,7 +121,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
               iframe: false,
               roles: ["admin"],
               icon: "icon-menu",
-              sort: 1
+              sort: 2
             }
           },
           {
@@ -139,7 +138,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
               iframe: false,
               roles: ["admin"],
               icon: "icon-menu",
-              sort: 2
+              sort: 1
             }
           }
         ]
diff --git a/src/typings/global.d.ts b/src/typings/global.d.ts
index b25d49b..fbf2b72 100644
--- a/src/typings/global.d.ts
+++ b/src/typings/global.d.ts
@@ -12,6 +12,7 @@ declare namespace Menu {
   interface MetaType {
     title: string;
     hide: boolean;
+    disable: boolean;
     keepAlive: boolean;
     affix: boolean;
     link?: string;
@@ -19,6 +20,7 @@ declare namespace Menu {
     roles: Array<string>;
     icon?: string;
     svgIcon?: string;
+    sort?: number;
   }
 }
 /* tabs菜单 */