full-routes.ts 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. /**
  2. * 1. 前端维护的完整路由表, 用于创建"菜单"
  3. * 2. component 是 string,并不是 组件对象。
  4. * 3. 生成菜单,关注的 path,name,component,icon。
  5. * 4. 部分路由组件是菜单不可见的,当访问该路由时,左侧菜单的menu item会失去active状态。需要设置 meta.activeMenu 保持选中状态。
  6. */
  7. import { AppRouteRecordRaw } from './types';
  8. import { getTreeItem } from '@/utils';
  9. import { cloneDeep } from 'lodash-es';
  10. import { PageEnum } from '@/enums/pageEnum';
  11. import { disasterPreventionRoute, emergencyManagementRoute, platformRoutes, largeScreenRoutes } from './routers';
  12. type RouteRecordString = Omit<AppRouteRecordRaw, 'component'> & { component?: string };
  13. export const RootRoute: RouteRecordString = {
  14. path: '/',
  15. name: 'Root',
  16. redirect: PageEnum.BASE_HOME,
  17. meta: {
  18. title: 'Root',
  19. },
  20. };
  21. export const HOME_PAGE: RouteRecordString = {
  22. // 模板管理
  23. path: '/home',
  24. name: 'HomePage',
  25. component: '/home/PageHome',
  26. meta: {
  27. icon: '',
  28. title: '首页',
  29. },
  30. };
  31. export const fullRoutes: AppRouteRecordRaw[] = [
  32. disasterPreventionRoute,
  33. emergencyManagementRoute,
  34. platformRoutes,
  35. largeScreenRoutes,
  36. ] as const;
  37. /**
  38. * 类型定义。避免与已有的定义冲突,避免与 vue-router的类型定义冲突,前面加 _ 前缀
  39. */
  40. export interface _RouteViewItem {
  41. label: string;
  42. value: string;
  43. }
  44. export type _RouteView = _RouteViewItem & { children?: _RouteViewItem[] | null };
  45. export type _RouteViewTree = _RouteView[];
  46. /**
  47. * 获取指定 父路由 下的子路由。
  48. * 若 父级路由 未指定,则返回一级路由
  49. */
  50. export function getChildRoutesView(parentRouteName?: string | null): _RouteViewItem[] {
  51. // 未指定 parentRouteName, 则返回 level1 的路由
  52. if (parentRouteName == null) {
  53. return fullRoutes.map((route) => ({
  54. label: route.meta.title as string,
  55. value: route.name,
  56. }));
  57. }
  58. // 获取指定父路由的子路由
  59. const parentRoute: AppRouteRecordRaw = cloneDeep(getTreeItem(fullRoutes, parentRouteName, 'name'));
  60. if (parentRoute.children && parentRoute.children.length > 0) {
  61. return parentRoute.children.map((route) => ({
  62. label: route.meta.title as string,
  63. value: route.name,
  64. }));
  65. } else {
  66. return [];
  67. }
  68. }
  69. /**
  70. * 获取指定的 路由信息
  71. */
  72. export function getRouteByName(routeName: string) {
  73. return cloneDeep(getTreeItem(fullRoutes, routeName, 'name')) as AppRouteRecordRaw;
  74. }
  75. /**
  76. * 转换成 el-tree-select 的数据结构形式
  77. */
  78. export function transformToRouteViewTree(routes?: AppRouteRecordRaw[] | null) {
  79. const tree: _RouteViewTree = [];
  80. if (routes == null) return tree;
  81. for (const route of routes) {
  82. const treeItem: _RouteView = {
  83. value: route.name,
  84. label: route.meta.title as string,
  85. children: null,
  86. };
  87. if (route.children && route.children.length > 0) {
  88. treeItem.children = transformToRouteViewTree(route.children);
  89. tree.push(treeItem);
  90. } else {
  91. tree.push(treeItem);
  92. }
  93. }
  94. return tree;
  95. }
  96. export const routeViewTree = transformToRouteViewTree(fullRoutes);