import { defineStore } from 'pinia'; import type { RouteComponent, RouteLocationRaw, RouteMeta, RouteRecord, RouteRecordRaw, } from 'vue-router'; import { getRouter } from '@/api/auth'; import BasicLayout from '@/layouts/BasicLayout.vue'; import BlankLayout from '@/layouts/BlankLayout.vue'; import LinkLayout from '@/layouts/LinkLayout.vue'; import { MENU_COMPONENT_LAYOUT_BASIC, MENU_COMPONENT_LAYOUT_BLANK, MENU_COMPONENT_LAYOUT_LINK, } from '@/constants/menu-constants'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import useAppStore from '@/store/modules/app'; import { APP_SERVER_TYPE_M, APP_SERVER_TYPE_O, } from '@/constants/app-constants'; /**路由构建参数类型 */ type RouterStore = { /**初始的根路由数据 */ rootRouterData: RouteRecordRaw[]; /**动态路由数据 */ buildRouterData: RouteRecordRaw[]; }; const useRouterStore = defineStore('router', { state: (): RouterStore => ({ rootRouterData: [], buildRouterData: [], }), actions: { /** * 记录初始根节点菜单数据 * @param data 初始数据 * @returns 初始数据 */ setRootRouterData(data: RouteRecordRaw[]) { if (this.rootRouterData.length <= 0) { this.rootRouterData = data; } return this.rootRouterData; }, /** * 动态路由列表数据生成 * @returns 生成的路由菜单 */ async generateRoutes() { const res = await getRouter(); if (res.code === RESULT_CODE_SUCCESS) { const buildRoutes = buildRouters(res.data.concat()); this.buildRouterData = buildRoutes; return buildRoutes; } return []; }, /** * 根据网元类型过滤菜单 * @param routes 经过clearMenuItem(router.getRoutes())处理 * @param coreUid 核心网元uid * @param neTypes 网元类型 * @returns 过滤后的菜单 */ clearMenuItemByNeList( routes: RouteRecord[] | RouteRecordRaw[], coreUid: string, neTypes: string[] ): RouteRecordRaw[] { return routes .map((item: RouteRecord | RouteRecordRaw) => { const finalItem = { ...item }; // 过滤核心网菜单 switch (useAppStore().serverType) { case APP_SERVER_TYPE_O: break; case APP_SERVER_TYPE_M: // 过滤核心网菜单 if (coreUid.length < 8 && finalItem.meta?.core == true) { // 全局 网元菜单 return null; } if (coreUid.length == 8 && finalItem.meta?.core == false) { // 核心网 非网元菜单 return null; } break; } // 过滤网元类型 if ( Array.isArray(finalItem.meta?.neType) && finalItem.meta?.neType.length > 0 ) { let metaNeType: string[] = finalItem.meta.neType; let match = false; // 匹配 for (const netype of metaNeType) { if (netype.indexOf('+') > -1) { metaNeType = netype.split('+'); match = true; break; } } if (match && !metaNeType.every(item => neTypes.includes(item))) { // 同时匹配 return null; } else if (!metaNeType.some(item => neTypes.includes(item))) { // 有一种 return null; } } // 有子菜单进行递归 if (finalItem.children && finalItem.children.length > 0) { const children = this.clearMenuItemByNeList( finalItem.children, coreUid, neTypes ); // 如果子菜单都被过滤掉了,就不显示 if (children.length === 0) { return null; } finalItem.children = children; return finalItem; } delete finalItem.children; return finalItem; }) .filter(item => item) as RouteRecordRaw[]; }, }, }); /**异步路由类型 */ type RecordRaws = { path: string; name: string; meta: RouteMeta; redirect: RouteLocationRaw; component: string; children: RecordRaws[]; }; /** * 构建动态路由 * * 遍历后台配置的路由菜单,转换为组件路由菜单 * * @param recordRaws 异步路由列表 * @returns 可添加的路由列表 */ function buildRouters(recordRaws: RecordRaws[]): RouteRecordRaw[] { const routers: RouteRecordRaw[] = []; for (const item of recordRaws) { // 路由页面组件 let component: RouteComponent = {}; if (item.component) { const comp = item.component; if (comp === MENU_COMPONENT_LAYOUT_BASIC) { component = BasicLayout; } else if (comp === MENU_COMPONENT_LAYOUT_BLANK) { component = BlankLayout; } else if (comp === MENU_COMPONENT_LAYOUT_LINK) { component = LinkLayout; } else { // 指定页面视图,一般用于显示子菜单 component = findView(comp); } } // 有子菜单进行递归 let children: RouteRecordRaw[] = []; if (item.children && item.children.length > 0) { children = buildRouters(item.children); } // 对元数据特殊参数进行处理 let metaIcon = (item.meta?.icon as string) || ''; if (!metaIcon.startsWith('icon-')) { metaIcon = ''; } item.meta = Object.assign(item.meta, { icon: metaIcon, }); // 构建路由 const router: RouteRecordRaw = { path: item.path, name: item.name, meta: item.meta, redirect: item.redirect, component: component, children: children, }; routers.push(router); } return routers; } /**匹配views里面所有的.vue或.tsx文件 */ const views = import.meta.glob('./../../views/**/*.{vue,tsx}'); /** * 查找页面模块 * * 查找 `/views/system/menu/index.vue` 或 `/views/system/menu/index.tsx` * * 参数值为 `system/menu/index` * * @param dirName 组件路径 * @returns 路由懒加载函数 */ function findView(dirName: string) { for (const dir in views) { let viewDirName = ''; const component = dir.match(/views\/(.+)\.(vue|tsx)/); if (component && component.length === 3) { viewDirName = component[1]; } if (viewDirName === dirName) { return () => views[dir](); } } return () => import('@/views/error/404.vue'); } export default useRouterStore;