Просмотр исходного кода

菜单路由改为后端接口获取

@dongkboy 6 месяцев назад
Родитель
Сommit
9da43b0731
2 измененных файлов с 73 добавлено и 79 удалено
  1. 3 1
      src/api/modules/menu.ts
  2. 70 78
      src/store/modules/route.ts

+ 3 - 1
src/api/modules/menu.ts

@@ -8,8 +8,10 @@ interface menuData {
 const menuApi = (axiosInstance: ApiInstance) => ({
   // 获取菜单
   getTenantConfig:(params:menuData) => axiosInstance.get('system/getInitConfig',{params}),
-  //获取菜单树
+  //获取全部菜单树
   findMenuTree: () => axiosInstance.get('menu/findMenuTree'),
+  //获取角色菜单树
+  getRoleMenuTree: () => axiosInstance.get('/menu/getRoleMenuTree'),
   // 获取所有按钮权限
   getAllButtons: () => axiosInstance.get('menu/getAllButtons'),
 })

+ 70 - 78
src/store/modules/route.ts

@@ -1,18 +1,11 @@
 import type { Route } from '#/global'
 import type { RouteRecordRaw } from 'vue-router'
-import menuApi from '@/api/modules/menu'
 import { systemRoutes } from '@/router/routes'
 import { resolveRoutePath } from '@/utils'
 import { cloneDeep } from 'lodash-es'
 import useSettingsStore from './settings'
 import api from '@/api'
-import useUserStore from'@/store/modules/user.ts'
-import { asyncRoutes } from "@/router/routes"; // 请根据实际路径调整
-import {
-  preprocessRoutes,
-  convertToTreeData
-} from "@/utils/composables/routeUtils"; // 导入工具方法
-
+import { ElMessage } from 'element-plus'
 const useRouteStore = defineStore(
   // 唯一ID
   'route',
@@ -156,85 +149,84 @@ const useRouteStore = defineStore(
       isGenerate.value = true
     }
     // 格式化后端路由数据
-    function formatBackRoutes(routes: any, views = import.meta.glob('../../views/**/*.vue')): Route.recordMainRaw[] {
-      return routes.map((route: any) => {
-        // console.log(route.component)
-        switch (route.component) {
-          case "layout":
-            route.component = () => import('@/layouts/index.vue')
-            break
-          default:
-            if (route.component) {
-              route.component = views[`../../views${route.component}.vue`]
-
-            }
-
-
-            else {
-              delete route.component
-            }
+    // function formatBackRoutes(routes: any, views = import.meta.glob('../../views/**/*.vue')): Route.recordMainRaw[] {
+    //   return routes.map((route: any) => {
+    //     switch (route.component) {
+    //       case 'Layout':
+    //         route.component = () => import('@/layouts/index.vue')
+    //         break
+    //       default:
+    //         if (route.component) {
+    //           route.component = views[`../../views/${route.component}`]
+    //         }
+    //         else {
+    //           delete route.component
+    //         }
+    //     }
+    //     if (route.children) {
+    //       route.children = formatBackRoutes(route.children, views)
+    //     }
+    //     return route
+    //   })
+    // }
+    // 格式化后端路由数据
+function formatBackRoutes(routes: any, views = import.meta.glob('../../views/**/*.vue')): Route.recordMainRaw[] {
+  // 需要从外层移动到meta对象的字段列表
+  const metaFields = ['title', 'icon', 'auth', 'menu', 'breadcrumb', 'activeMenu', 'cache', 'noCache', 'link']// 从外层移动到meta对象的字段列表
+  return routes.filter((route: any) => route.type != 2).map((route: any) => {
+    // 处理组件引用
+    switch (route.component) {
+      case 'Layout':
+        route.component = () => import('@/layouts/index.vue')
+        break
+      default:
+        if (route.component) {
+          route.component = views[`../../views${route.component}.vue`]
+          if (route.menu ==0) {
+            route.menu = false;
+          }
         }
-        if (route.children) {
-          route.children = formatBackRoutes(route.children, views)
+        else {
+          delete route.component
         }
-        // console.log(route)
-        return route
-      })
     }
-
-    function filterTreeByPerms(nestedArray: any, referenceArray: any) {
-      // 创建参考值的Set以便快速查找
-      const referenceSet = new Set(referenceArray.map((item: any) => item.permsId));
-      function filterRecursive(data: any) {
-        return data.reduce((result: any, item: any) => {
-          // 检查当前项是否在参考数组中
-          const isMatch = referenceSet.has(`${item.id}`);
-
-          // 深度复制当前项(保留原始数据)
-          const newItem = {...item};
-
-          // 递归处理子项
-          if (newItem.children && newItem.children.length) {
-            newItem.children = filterRecursive(newItem.children);
-          }
-
-          // 如果当前项匹配或有匹配的子项,则保留
-          if (isMatch || (newItem.children && newItem.children.length)) {
-            result.push(newItem);
-          }
-
-          return result;
-        }, []);
+    // 处理元数据格式转换:将指定字段从外层移动到meta对象中
+    const hasMetaFields = metaFields.some(field => route[field] !== undefined)
+    if (hasMetaFields) {
+      // 确保meta对象存在
+      if (!route.meta) {
+        route.meta = {}
       }
+      // 批量移动字段
+      metaFields.forEach(field => {
+        if (route[field] !== undefined) {
+          route.meta[field] = route[field]
+          delete route[field]
+        }
+      })
+    }
 
-      return filterRecursive(nestedArray);
+    // 递归处理子路由
+    if (route.children) {
+      route.children = formatBackRoutes(route.children, views)
     }
+
+    return route
+  })
+}
     // 生成路由(后端获取)
     async function generateRoutesAtBack() {
-      await api.menuApi.getTenantConfig({
-        systemCode:localStorage.getItem('login_system') || '',
-      }).then((res) => {
-        // console.log(JSON.parse(res.data.sysConfig))
-        // 设置 routes 数据
-        // const routes = (JSON.parse(res.data.sysConfig))
-        // const sysPerms = (JSON.parse(res.data.sysPerms))
-        console.log('第一个', JSON.parse(res.data.sysConfig))
-        console.log('第二个', JSON.parse(res.data.sysPerms))
-        const userInfo = JSON.parse(localStorage.getItem('userInfo'))
-        let routes = JSON.parse(res.data.sysConfig)
-
-        if(userInfo) {
-          // let arr = []
-          // arr = filterTreeByPerms(routes, userInfo.auths)//暂时去掉
-          routesRaw.value = converDeprecatedAttribute(formatBackRoutes(routes) as any)
-          console.log('第三个', routesRaw.value)
-        } else {
-          routesRaw.value = converDeprecatedAttribute(formatBackRoutes(JSON.parse(res.data.sysConfig)) as any)
+      await api.menuApi.getRoleMenuTree().then((res) => {
+        if(res.data.length > 0) {
+          // 设置 routes 数据
+          routesRaw.value = converDeprecatedAttribute(formatBackRoutes(res.data) as any)
+          isGenerate.value = true
+        }else{
+          // 路由获取失败
+          ElMessage.error('路由获取失败')
         }
-        isGenerate.value = true
-      }).catch((e) => {
-        console.log(123, e)
-      })
+
+      }).catch(() => {})
     }
     // 生成路由(文件系统生成)
     function generateRoutesAtFilesystem(asyncRoutes: RouteRecordRaw[]) {