From 85b55bb37a0a06e2645b96ed81aefe463127121a Mon Sep 17 00:00:00 2001
From: Soybean <2570172956@qq.com>
Date: Thu, 6 Jan 2022 11:22:14 +0800
Subject: [PATCH] =?UTF-8?q?feat(projects):=20=E5=A4=9A=E7=BA=A7=E8=B7=AF?=
 =?UTF-8?q?=E7=94=B1=E7=9A=84=E6=89=80=E6=9C=89=E5=AD=90=E8=B7=AF=E7=94=B1?=
 =?UTF-8?q?=E8=BD=AC=E6=8D=A2=E6=88=90=E4=BA=8C=E7=BA=A7=E8=B7=AF=E7=94=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/Layout/index.vue     |  1 +
 src/router/routes/index.ts       |  4 +--
 src/store/modules/route/index.ts |  4 +--
 src/typings/common/route.d.ts    |  2 ++
 src/utils/router/helpers.ts      | 46 ++++++++++++++++++++++++++------
 5 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/src/layouts/Layout/index.vue b/src/layouts/Layout/index.vue
index aba3fdc1..31d46b29 100644
--- a/src/layouts/Layout/index.vue
+++ b/src/layouts/Layout/index.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="h-full">
+    <h3>Layout</h3>
     <router-view v-slot="{ Component }">
       <transition name="fade-slide" mode="out-in" appear>
         <component :is="Component" v-if="app.reloadFlag" />
diff --git a/src/router/routes/index.ts b/src/router/routes/index.ts
index 9327b3b2..c4419486 100644
--- a/src/router/routes/index.ts
+++ b/src/router/routes/index.ts
@@ -1,9 +1,9 @@
 import type { RouteRecordRaw } from 'vue-router';
-import { transformAuthRouteToVueRoute } from '@/utils';
+import { transformAuthRoutesToVueRoutes } from '@/utils';
 import constantRoutes from './constant';
 
 /** 所有路由 */
-export const routes: RouteRecordRaw[] = constantRoutes.map(item => transformAuthRouteToVueRoute(item));
+export const routes: RouteRecordRaw[] = transformAuthRoutesToVueRoutes(constantRoutes);
 
 /** 路由名称 */
 export const routeName = (key: AuthRoute.RouteKey) => key;
diff --git a/src/store/modules/route/index.ts b/src/store/modules/route/index.ts
index a3caaab6..5d808dcc 100644
--- a/src/store/modules/route/index.ts
+++ b/src/store/modules/route/index.ts
@@ -4,7 +4,7 @@ import type { Router } from 'vue-router';
 import { defineStore } from 'pinia';
 import { useBoolean } from '@/hooks';
 import { fetchUserRoutes } from '@/service';
-import { transformAuthRouteToMenu, transformAuthRouteToVueRoute } from '@/utils';
+import { transformAuthRouteToMenu, transformAuthRoutesToVueRoutes } from '@/utils';
 import type { GlobalMenuOption } from '@/interface';
 
 /** 路由状态 */
@@ -37,7 +37,7 @@ export const useRouteStore = defineStore('route-store', () => {
     if (data) {
       getMenus(data.routes);
 
-      const vueRoutes = data.routes.map(route => transformAuthRouteToVueRoute(route));
+      const vueRoutes = transformAuthRoutesToVueRoutes(data.routes);
       vueRoutes.forEach(route => {
         router.addRoute(route);
       });
diff --git a/src/typings/common/route.d.ts b/src/typings/common/route.d.ts
index 6d69bb87..5288e2a6 100644
--- a/src/typings/common/route.d.ts
+++ b/src/typings/common/route.d.ts
@@ -59,6 +59,8 @@ declare namespace AuthRoute {
     hide?: boolean;
     /** 路由顺序，可用于菜单的排序 */
     order?: number;
+    /** 表示是否是多级路由的中间级路由(用于转换路由数据时筛选多级路由的标识，定义路由时不用填写) */
+    multi?: boolean;
   };
 
   /** 单个路由的类型结构(后端返回此类型结构的路由) */
diff --git a/src/utils/router/helpers.ts b/src/utils/router/helpers.ts
index c9746981..930a76dc 100644
--- a/src/utils/router/helpers.ts
+++ b/src/utils/router/helpers.ts
@@ -7,8 +7,21 @@ type ComponentAction = {
   [key in AuthRoute.RouteComponent]: () => void;
 };
 
-/** 将权限路由类型转换成vue路由类型 */
-export function transformAuthRouteToVueRoute(item: AuthRoute.Route) {
+/**
+ * 将权限路由转换成vue路由
+ * @param routes - 权限路由
+ */
+export function transformAuthRoutesToVueRoutes(routes: AuthRoute.Route[]) {
+  return routes.map(route => transformAuthRouteToVueRoute(route)).flat(1);
+}
+
+/**
+ * 将单个权限路由转换成vue路由
+ * @param route - 权限路由
+ */
+function transformAuthRouteToVueRoute(item: AuthRoute.Route) {
+  const resultRoute: RouteRecordRaw[] = [];
+
   const itemRoute = { ...item } as RouteRecordRaw;
 
   if (hasDynamicPath(item)) {
@@ -29,7 +42,8 @@ export function transformAuthRouteToVueRoute(item: AuthRoute.Route) {
       multi() {
         // 多级路由一定有子路由
         if (hasChildren(item)) {
-          Object.assign(itemRoute, { component: Layout });
+          Object.assign(itemRoute, { meta: { ...itemRoute.meta, multi: true } });
+          delete itemRoute.component;
         } else {
           consoleError('多级路由缺少子路由: ', item);
         }
@@ -74,16 +88,32 @@ export function transformAuthRouteToVueRoute(item: AuthRoute.Route) {
         children: [itemRoute]
       };
 
-      return parentRoute;
+      return [parentRoute];
     }
   }
 
   if (hasChildren(item)) {
-    itemRoute.redirect = item.children![0].path;
-    itemRoute.children = item.children!.map(child => transformAuthRouteToVueRoute(child));
-  }
+    const children = item.children!.map(child => transformAuthRouteToVueRoute(child)).flat();
 
-  return itemRoute;
+    // 找出第一个不为多级路由中间级的子路由路径作为重定向路径
+    const redirectPath: AuthRoute.RoutePath = (children.find(item => !item.meta?.multi)?.path ||
+      '/') as AuthRoute.RoutePath;
+    if (redirectPath === '/') {
+      consoleError('该多级路由没有有效的子路径', item);
+    }
+
+    if (item.component === 'multi') {
+      // 多级路由，将子路由提取出来变成同级
+      resultRoute.push(...children);
+      delete itemRoute.children;
+    } else {
+      itemRoute.children = children;
+    }
+    itemRoute.redirect = redirectPath;
+  }
+  resultRoute.push(itemRoute);
+
+  return resultRoute;
 }
 
 function hasComponent(item: AuthRoute.Route) {