@ -11,50 +11,32 @@ import type { Menu, AppRouteRecordRaw } from '/@/router/types';
import { findPath , treeMap } from '/@/utils/helper/treeHelper' ; import { findPath , treeMap } from '/@/utils/helper/treeHelper' ;
import { cloneDeep } from 'lodash-es' ; import { cloneDeep } from 'lodash-es' ;
import { isUrl } from '/@/utils/is' ; import { isUrl } from '/@/utils/is' ;
import { RouteParams } from 'vue-router' ;
import { toRaw } from 'vue' ;
import { usePermissionStore } from "/@/store/modules/permission" ; import { usePermissionStore } from "/@/store/modules/permission" ;
/** 获取当前菜单的所有父菜单路径 */
export function getAllParentPath < T = Recordable > ( treeData : T [ ] , path : string ) { export function getAllParentPath < T = Recordable > ( treeData : T [ ] , path : string ) {
const menuList = findPath ( treeData , ( n ) = > n . path === path ) as Menu [ ] ; const menuList = findPath ( treeData , ( n ) = > n . path === path ) as Menu [ ] ;
return ( menuList || [ ] ) . map ( ( item ) = > item . path ) ; return ( menuList || [ ] ) . map ( ( item ) = > item . path ) ;
} }
function joinParentPath ( menus : Menu [ ] , parentPath = '' ) { /** 构建嵌套路由,具体详情参考:https://next.router.vuejs.org/guide/essentials/nested-routes.html */
function joinNestedRoute ( menus : Menu [ ] , parentPath = '' ) {
for ( let index = 0 ; index < menus . length ; index ++ ) { for ( let index = 0 ; index < menus . length ; index ++ ) {
const menu = menus [ index ] ; const menu = menus [ index ] ;
// https://next.router.vuejs.org/guide/essentials/nested-routes.html
// 请注意,以/开头的嵌套路径将被视为根路径与外嵌网页url不允许加入嵌套路由
// 请注意，以 开头的嵌套路径将被视为根路径
if ( ! ( menu . path . startsWith ( '/' ) || isUrl ( menu . path ) ) ) menu . path = ` ${ parentPath } / ${ menu . path } ` ;
// 这允许您利用组件嵌套，而无需使用嵌套 URL
// 递归处理子路由的拼接
if ( ! ( menu . path . startsWith ( '/' ) || isUrl ( menu . path ) ) ) { if ( menu ? . children ? . length ) joinNestedRoute ( menu . children , menu . meta ? . hidePathForChildren ? parentPath : menu.path ) ;
// 路径不以 开头，也不是 url，加入父路径
menu . path = ` ${ parentPath } / ${ menu . path } ` ;
}
if ( menu ? . children ? . length ) {
joinParentPath ( menu . children , menu . meta ? . hidePathForChildren ? parentPath : menu.path ) ;
}
} }
} }
export function transformRouteToMenu ( routeModList : AppRouteModule [ ] , routerMapping = false ) { /** 将路由对象变成菜单对象 */
const cloneRouteModList = cloneDeep ( routeModList ) ; export function transformRouteToMenu ( routeModList : AppRouteModule [ ] ) {
const routeList : AppRouteRecordRaw [ ] = [ ] ; const routeList : AppRouteRecordRaw [ ] = cloneDeep ( routeModList ) ;
// 提取树指定的树形结构
cloneRouteModList . forEach ( ( item ) = > {
if ( routerMapping && item . meta . hideChildrenInMenu && typeof item . redirect === 'string' ) {
item . path = item . redirect ;
}
if ( item . meta ? . single ) {
const realItem = item ? . children ? . [ 0 ] ;
realItem && routeList . push ( realItem ) ;
} else {
routeList . push ( item ) ;
}
} ) ;
const list = treeMap ( routeList , { const list = treeMap ( routeList , {
conversion : ( node : AppRouteRecordRaw ) = > { conversion : ( node : AppRouteRecordRaw ) = > {
const { meta : { title , hideMenu = false } = { } } = node ; const { meta : { title , hideMenu = false } = { } } = node ;
return { return {
. . . ( node . meta || { } ) , . . . ( node . meta || { } ) ,
meta : node.meta , meta : node.meta ,
@ -63,32 +45,10 @@ export function transformRouteToMenu(routeModList: AppRouteModule[], routerMappi
path : node.path , path : node.path ,
. . . ( node . redirect ? { redirect : node.redirect } : { } ) , . . . ( node . redirect ? { redirect : node.redirect } : { } ) ,
} ; } ;
} ,
} ) ;
joinParentPath ( list ) ;
return cloneDeep ( list ) ;
}
/** 带有给定参数的配置菜单 */
const menuParamRegex = /(?::)([\s\S]+?)((?=\/)|$)/g ;
export function configureDynamicParamsMenu ( menu : Menu , params : RouteParams ) {
const { path , paramPath } = toRaw ( menu ) ;
let realPath = paramPath ? paramPath : path ;
const matchArr = realPath . match ( menuParamRegex ) ;
matchArr ? . forEach ( ( it ) = > {
const realIt = it . substr ( 1 ) ;
if ( params [ realIt ] ) {
realPath = realPath . replace ( ` : ${ realIt } ` , params [ realIt ] as string ) ;
} }
} ) ; } ) ;
// 保存原始参数路径
joinNestedRoute ( list ) ;
if ( ! paramPath && matchArr && matchArr . length > 0 ) { return list ;
menu . paramPath = path ;
}
menu . path = realPath ;
// children
menu . children ? . forEach ( ( item ) = > configureDynamicParamsMenu ( item , params ) ) ;
} }
/** 异步获取后台菜单数据 */ /** 异步获取后台菜单数据 */
@ -97,20 +57,21 @@ export const getMenus = async (): Promise<Menu[]> => {
return permissionStore . getMenuList . filter ( ( item ) = > ! item . hideMenu ) ; return permissionStore . getMenuList . filter ( ( item ) = > ! item . hideMenu ) ;
} ; } ;
/** 获取当前菜单父级菜单路径 */
export async function getCurrentParentPath ( currentPath : string ) { export async function getCurrentParentPath ( currentPath : string ) {
const menus = await getMenus ( ) ; const menus = await getMenus ( ) ;
const allParentPath = await getAllParentPath ( menus , currentPath ) ; const allParentPath = getAllParentPath ( menus , currentPath ) ;
return allParentPath ? . [ 0 ] ; return allParentPath ? . [ 0 ] ;
} }
/** 获取一级菜单， 删除子项 */ /** 获取一级菜单, 删除子项 */
export async function getShallowMenus ( ) : Promise < Menu [ ] > { export async function getShallowMenus ( ) : Promise < Menu [ ] > {
const menus = await getMenus ( ) ; const menus = await getMenus ( ) ;
const shallowMenuList = menus . map ( ( item ) = > ( { . . . item , children : undefined } ) ) ; const shallowMenuList = menus . map ( ( item ) = > ( { . . . item , children : undefined } ) ) ;
return shallowMenuList ; return shallowMenuList ;
} }
/** 获取菜单的孩 子 */ /** 获取一级 菜单的子集菜单 */
export async function getChildrenMenus ( parentPath : string ) { export async function getChildrenMenus ( parentPath : string ) {
const menus = await getMenus ( ) ; const menus = await getMenus ( ) ;
const parent = menus . find ( ( item ) = > item . path === parentPath ) ; const parent = menus . find ( ( item ) = > item . path === parentPath ) ;
wangxiang
3 years ago