Blame view

src/router/helper/menuHelper.ts 3.42 KB
1
import { AppRouteModule } from '/@/router/types';
陈文彬 authored
2
import type { MenuModule, Menu, AppRouteRecordRaw } from '/@/router/types';
3
import { findPath, treeMap } from '/@/utils/helper/treeHelper';
陈文彬 authored
4
import { cloneDeep } from 'lodash-es';
5
import { isUrl } from '/@/utils/is';
6
7
import { RouteParams } from 'vue-router';
import { toRaw } from 'vue';
陈文彬 authored
8
9
export function getAllParentPath<T = Recordable>(treeData: T[], path: string) {
陈文彬 authored
10
11
12
13
  const menuList = findPath(treeData, (n) => n.path === path) as Menu[];
  return (menuList || []).map((item) => item.path);
}
14
// 路径处理
15
16
17
function joinParentPath(menus: Menu[], parentPath = '') {
  for (let index = 0; index < menus.length; index++) {
    const menu = menus[index];
18
19
    // https://next.router.vuejs.org/guide/essentials/nested-routes.html
    // Note that nested paths that start with / will be treated as a root path.
20
    // 请注意,以 / 开头的嵌套路径将被视为根路径。
21
    // This allows you to leverage the component nesting without having to use a nested URL.
22
    // 这允许你利用组件嵌套,而无需使用嵌套 URL。
23
24
    if (!(menu.path.startsWith('/') || isUrl(menu.path))) {
      // path doesn't start with /, nor is it a url, join parent path
25
      // 路径不以 / 开头,也不是 url,加入父路径
26
27
      menu.path = `${parentPath}/${menu.path}`;
    }
28
    if (menu?.children?.length) {
29
      joinParentPath(menu.children, menu.meta?.hidePathForChildren ? parentPath : menu.path);
30
    }
陈文彬 authored
31
32
33
  }
}
34
// Parsing the menu module
陈文彬 authored
35
36
37
38
export function transformMenuModule(menuModule: MenuModule): Menu {
  const { menu } = menuModule;

  const menuList = [menu];
vben authored
39
40
  joinParentPath(menuList);
陈文彬 authored
41
42
43
  return menuList[0];
}
44
// 将路由转换成菜单
45
export function transformRouteToMenu(routeModList: AppRouteModule[], routerMapping = false) {
46
  // 借助 lodash 深拷贝
陈文彬 authored
47
48
  const cloneRouteModList = cloneDeep(routeModList);
  const routeList: AppRouteRecordRaw[] = [];
49
50
  // 对路由项进行修改
陈文彬 authored
51
  cloneRouteModList.forEach((item) => {
52
53
54
    if (routerMapping && item.meta.hideChildrenInMenu && typeof item.redirect === 'string') {
      item.path = item.redirect;
    }
55
vben authored
56
57
58
    if (item.meta?.single) {
      const realItem = item?.children?.[0];
      realItem && routeList.push(realItem);
59
    } else {
vben authored
60
      routeList.push(item);
61
    }
陈文彬 authored
62
  });
63
  // 提取树指定结构
64
  const list = treeMap(routeList, {
陈文彬 authored
65
    conversion: (node: AppRouteRecordRaw) => {
66
      const { meta: { title, hideMenu = false } = {} } = node;
67
陈文彬 authored
68
      return {
69
        ...(node.meta || {}),
70
        meta: node.meta,
陈文彬 authored
71
        name: title,
72
        hideMenu,
73
        path: node.path,
74
        ...(node.redirect ? { redirect: node.redirect } : {}),
陈文彬 authored
75
76
77
      };
    },
  });
78
  // 路径处理
79
  joinParentPath(list);
80
  return cloneDeep(list);
陈文彬 authored
81
}
82
83
84
85

/**
 * config menu with given params
 */
86
const menuParamRegex = /(?::)([\s\S]+?)((?=\/)|$)/g;
87
88
89
90
91
export function configureDynamicParamsMenu(menu: Menu, params: RouteParams) {
  const { path, paramPath } = toRaw(menu);
  let realPath = paramPath ? paramPath : path;
  const matchArr = realPath.match(menuParamRegex);
92
93
  matchArr?.forEach((it) => {
94
95
96
    const realIt = it.substr(1);
    if (params[realIt]) {
      realPath = realPath.replace(`:${realIt}`, params[realIt] as string);
97
98
99
100
101
102
103
104
105
106
    }
  });
  // save original param path.
  if (!paramPath && matchArr && matchArr.length > 0) {
    menu.paramPath = path;
  }
  menu.path = realPath;
  // children
  menu.children?.forEach((item) => configureDynamicParamsMenu(item, params));
}