菜单映射的工具函数整合
userMenus
以下是 userMenus：
[
{
"id": 38,
"name": "系统总览",
"type": 1,
"url": "/main/analysis",
"icon": "el-icon-monitor",
"sort": 1,
"children": [
{
"id": 39,
"url": "/main/analysis/overview",
"name": "核心技术",
"sort": 106,
"type": 2,
"children": null,
"parentId": 38
},
{
"id": 40,
"url": "/main/analysis/dashboard",
"name": "商品统计",
"sort": 107,
"type": 2,
"children": null,
"parentId": 38
}
]
},
{
"id": 1,
"name": "系统管理",
"type": 1,
"url": "/main/system",
"icon": "el-icon-setting",
"sort": 2,
"children": [
{
"id": 2,
"url": "/main/system/user",
"name": "用户管理",
"sort": 100,
"type": 2,
"children": [
{
"id": 5,
"url": null,
"name": "创建用户",
"sort": null,
"type": 3,
"parentId": 2,
"permission": "system:users:create"
},
{
"id": 6,
"url": null,
"name": "删除用户",
"sort": null,
"type": 3,
"parentId": 2,
"permission": "system:users:delete"
},
{
"id": 7,
"url": null,
"name": "修改用户",
"sort": null,
"type": 3,
"parentId": 2,
"permission": "system:users:update"
},
{
"id": 8,
"url": null,
"name": "查询用户",
"sort": null,
"type": 3,
"parentId": 2,
"permission": "system:users:query"
}
],
"parentId": 1
},
{
"id": 3,
"url": "/main/system/department",
"name": "部门管理",
"sort": 101,
"type": 2,
"children": [
{
"id": 17,
"url": null,
"name": "创建部门",
"sort": null,
"type": 3,
"parentId": 3,
"permission": "system:department:create"
},
{
"id": 18,
"url": null,
"name": "删除部门",
"sort": null,
"type": 3,
"parentId": 3,
"permission": "system:department:delete"
},
{
"id": 19,
"url": null,
"name": "修改部门",
"sort": null,
"type": 3,
"parentId": 3,
"permission": "system:department:update"
},
{
"id": 20,
"url": null,
"name": "查询部门",
"sort": null,
"type": 3,
"parentId": 3,
"permission": "system:department:query"
}
],
"parentId": 1
},
{
"id": 4,
"url": "/main/system/menu",
"name": "菜单管理",
"sort": 103,
"type": 2,
"children": [
{
"id": 21,
"url": null,
"name": "创建菜单",
"sort": null,
"type": 3,
"parentId": 4,
"permission": "system:menu:create"
},
{
"id": 22,
"url": null,
"name": "删除菜单",
"sort": null,
"type": 3,
"parentId": 4,
"permission": "system:menu:delete"
},
{
"id": 23,
"url": null,
"name": "修改菜单",
"sort": null,
"type": 3,
"parentId": 4,
"permission": "system:menu:update"
},
{
"id": 24,
"url": null,
"name": "查询菜单",
"sort": null,
"type": 3,
"parentId": 4,
"permission": "system:menu:query"
}
],
"parentId": 1
},
{
"id": 25,
"url": "/main/system/role",
"name": "角色管理",
"sort": 102,
"type": 2,
"children": [
{
"id": 26,
"url": null,
"name": "创建角色",
"sort": null,
"type": 3,
"parentId": 25,
"permission": "system:role:create"
},
{
"id": 27,
"url": null,
"name": "删除角色",
"sort": null,
"type": 3,
"parentId": 25,
"permission": "system:role:delete"
},
{
"id": 28,
"url": null,
"name": "修改角色",
"sort": null,
"type": 3,
"parentId": 25,
"permission": "system:role:update"
},
{
"id": 29,
"url": null,
"name": "查询角色",
"sort": null,
"type": 3,
"parentId": 25,
"permission": "system:role:query"
}
],
"parentId": 1
}
]
},
{
"id": 9,
"name": "商品中心",
"type": 1,
"url": "/main/product",
"icon": "el-icon-goods",
"sort": 3,
"children": [
{
"id": 15,
"url": "/main/product/category",
"name": "商品类别",
"sort": 104,
"type": 2,
"children": [
{
"id": 30,
"url": null,
"name": "创建类别",
"sort": null,
"type": 3,
"parentId": 15,
"permission": "system:category:create"
},
{
"id": 31,
"url": null,
"name": "删除类别",
"sort": null,
"type": 3,
"parentId": 15,
"permission": "system:category:delete"
},
{
"id": 32,
"url": null,
"name": "修改类别",
"sort": null,
"type": 3,
"parentId": 15,
"permission": "system:category:update"
},
{
"id": 33,
"url": null,
"name": "查询类别",
"sort": null,
"type": 3,
"parentId": 15,
"permission": "system:category:query"
}
],
"parentId": 9
},
{
"id": 16,
"url": "/main/product/goods",
"name": "商品信息",
"sort": 105,
"type": 2,
"children": [
{
"id": 34,
"url": null,
"name": "创建商品",
"sort": null,
"type": 3,
"parentId": 16,
"permission": "system:goods:create"
},
{
"id": 35,
"url": null,
"name": "删除商品",
"sort": null,
"type": 3,
"parentId": 16,
"permission": "system:goods:delete"
},
{
"id": 36,
"url": null,
"name": "修改商品",
"sort": null,
"type": 3,
"parentId": 16,
"permission": "system:goods:update"
},
{
"id": 37,
"url": null,
"name": "查询商品",
"sort": null,
"type": 3,
"parentId": 16,
"permission": "system:goods:query"
}
],
"parentId": 9
}
]
},
{
"id": 41,
"name": "随便聊聊",
"type": 1,
"url": "/main/story",
"icon": "el-icon-chat-line-round",
"sort": 4,
"children": [
{
"id": 42,
"url": "/main/story/chat",
"name": "你的故事",
"sort": 108,
"type": 2,
"children": null,
"parentId": 41
},
{
"id": 43,
"url": "/main/story/list",
"name": "故事列表",
"sort": 109,
"type": 2,
"children": [],
"parentId": 41
}
]
}
]
工具函数 mapMenus.ts
根据本地路由文件动态加载本地路由
dashboard.ts
export default {
path: '/main/analysis/dashboard',
name: 'dashboard',
component: () => import('@/views/main/analysis/dashboard/dashboard.vue'),
children: []
}
import type { RouteRecordRaw } from "vue-router";
export const loadLocalRoutes = () => {
// 动态添加路由
const localRoutes: RouteRecordRaw[] = [];
// 获取本地路由文件
const files: Record<string, any> = import.meta.glob("@/router/main/**/*.ts", {
eager: true /*立刻获取文件信息，而不是懒加载获取*/
});
for (const path in files) {
const module = files[path];
localRoutes.push(module.default);
}
return localRoutes;
};
将用户菜单转换为路由
export let firstMenu: any = null;
/**
* 将用户菜单转换为路由
*/
export const mapMenus = (userMenus: any[]) => {
const localRoutes = loadLocalRoutes();
const routes: RouteRecordRaw[] = [];
// 根据菜单信息匹配该用户权限下的路由
for (const menuItem of userMenus) {
if (menuItem.children) {
for (const submenu of menuItem.children) {
const route = localRoutes.find((route) => route.path === submenu.url);
if (route) {
// 给父级菜单添加重定向
if (!routes.find((r) => r.path === menuItem.url)) {
routes.push({ path: menuItem.url, redirect: route.path });
}
// 添加二级菜单
routes.push(route);
}
if (!firstMenu && route) {
firstMenu = submenu;
// console.log("=>(mapMenus.ts:35) firstMenu", firstMenu);
}
}
}
}
return routes;
};
根据路径找到对应的菜单
/**
* 根据路径找到对应的菜单
* @param path
* @param userMenus
*/
export function mapPathToMenu(path: string, userMenus: any[]) {
for (const menu of userMenus) {
for (const submenu of menu.children) {
if (submenu.url === path) {
return submenu;
}
}
}
}
根据路径找到对应的面包屑
/**
* 根据路径找到对应的面包屑
* @param path
* @param userMenus
*/
export function mapPathToBreadcrumbs(path: string, userMenus: any[]) {
const breadcrumbs: any[] = [];
for (const menu of userMenus) {
for (const submenu of menu.children) {
if (submenu.url === path) {
breadcrumbs.push({ name: menu.name, path: menu.url });
breadcrumbs.push({ name: submenu.name, path: submenu.url });
}
}
}
return breadcrumbs;
}
将菜单列表转换为菜单id列表
/**
* 将菜单列表转换为菜单id列表
* @param menuList 菜单列表
*/
export function mapMenuListToIds(menuList: any[]) {
const ids: number[] = [];
function recurseGetIds(menus: any[]) {
for (const menu of menus) {
if (menu.children) {
recurseGetIds(menu.children)
} else {
ids.push(menu.id)
}
}
}
recurseGetIds(menuList)
return ids;
}
从菜单列表中获取按钮权限列表
/**
* 从菜单列表中获取按钮权限列表
* @param menuList
*/
export function mapMenuListToPermission(menuList: any[]) {
const permissions: string[] = [];
function recurseGetPermission(menuList: any[]) {
for (const menu of menuList) {
if (menu.type === 1 || menu.type === 2) {
recurseGetPermission(menu.children ?? [])
} else {
permissions.push(menu.permission)
}
}
}
recurseGetPermission(menuList);
return permissions;
}