first commit
This commit is contained in:
仲么了
295
src/utils/router.ts
Normal file
295
src/utils/router.ts
Normal file
@@ -0,0 +1,295 @@
|
||||
import router from '@/router/index'
|
||||
import { isNavigationFailure, NavigationFailureType } from 'vue-router'
|
||||
import type { RouteRecordRaw, RouteLocationRaw } from 'vue-router'
|
||||
import { ElNotification } from 'element-plus'
|
||||
import { useConfig } from '@/stores/config'
|
||||
import { useNavTabs } from '@/stores/navTabs'
|
||||
import { closeShade } from '@/utils/pageShade'
|
||||
import { adminBaseRoute } from '@/router/static'
|
||||
import { compact, isEmpty, reverse } from 'lodash-es'
|
||||
import { isAdminApp } from '@/utils/common'
|
||||
|
||||
/**
|
||||
* 导航失败有错误消息的路由push
|
||||
* @param to — 导航位置，同 router.push
|
||||
*/
|
||||
export const routePush = async (to: RouteLocationRaw) => {
|
||||
try {
|
||||
const failure = await router.push(to)
|
||||
if (isNavigationFailure(failure, NavigationFailureType.aborted)) {
|
||||
ElNotification({
|
||||
message: 'utils.Navigation failed, navigation guard intercepted!',
|
||||
type: 'error'
|
||||
})
|
||||
} else if (isNavigationFailure(failure, NavigationFailureType.duplicated)) {
|
||||
ElNotification({
|
||||
message: 'utils.Navigation failed, it is at the navigation target position!',
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
ElNotification({
|
||||
message: 'utils.Navigation failed, invalid route!',
|
||||
type: 'error'
|
||||
})
|
||||
console.error(error)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取第一个菜单
|
||||
*/
|
||||
export const getFirstRoute = (routes: RouteRecordRaw[], menuType = 'tab'): false | RouteRecordRaw => {
|
||||
const routerPaths: string[] = []
|
||||
const routers = router.getRoutes()
|
||||
routers.forEach(item => {
|
||||
if (item.path) routerPaths.push(item.path)
|
||||
})
|
||||
let find: boolean | RouteRecordRaw = false
|
||||
for (const key in routes) {
|
||||
if (
|
||||
routes[key].meta?.type == 'menu' &&
|
||||
routes[key].meta?.menu_type == menuType &&
|
||||
routerPaths.indexOf(routes[key].path) !== -1
|
||||
) {
|
||||
return routes[key]
|
||||
} else if (routes[key].children && routes[key].children?.length) {
|
||||
find = getFirstRoute(routes[key].children!)
|
||||
if (find) return find
|
||||
}
|
||||
}
|
||||
return find
|
||||
}
|
||||
|
||||
/**
|
||||
* 打开侧边菜单
|
||||
* @param menu 菜单数据
|
||||
*/
|
||||
export const onClickMenu = (menu: RouteRecordRaw) => {
|
||||
switch (menu.meta?.menu_type) {
|
||||
case 'iframe':
|
||||
case 'tab':
|
||||
routePush({ path: menu.path })
|
||||
break
|
||||
case 'link':
|
||||
window.open(menu.path, '_blank')
|
||||
break
|
||||
|
||||
default:
|
||||
ElNotification({
|
||||
message: 'utils.Navigation failed, the menu type is unrecognized!',
|
||||
type: 'error'
|
||||
})
|
||||
break
|
||||
}
|
||||
|
||||
const config = useConfig()
|
||||
if (config.layout.shrink) {
|
||||
closeShade(() => {
|
||||
config.setLayout('menuCollapse', true)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理后台的路由
|
||||
*/
|
||||
export const handleAdminRoute = (routes: any) => {
|
||||
const viewsComponent = import.meta.glob('/src/views/**/*.vue')
|
||||
addRouteAll(viewsComponent, routes, adminBaseRoute.name as string)
|
||||
const menuAdminBaseRoute = (adminBaseRoute.path as string) + '/'
|
||||
|
||||
// 更新stores中的路由菜单数据
|
||||
const navTabs = useNavTabs()
|
||||
navTabs.setTabsViewRoutes(handleMenuRule(routes, menuAdminBaseRoute))
|
||||
navTabs.fillAuthNode(handleAuthNode(routes, menuAdminBaseRoute))
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取菜单的paths
|
||||
*/
|
||||
export const getMenuPaths = (menus: RouteRecordRaw[]): string[] => {
|
||||
let menuPaths: string[] = []
|
||||
menus.forEach(item => {
|
||||
menuPaths.push(item.path)
|
||||
if (item.children && item.children.length > 0) {
|
||||
menuPaths = menuPaths.concat(getMenuPaths(item.children))
|
||||
}
|
||||
})
|
||||
return menuPaths
|
||||
}
|
||||
|
||||
/**
|
||||
* 后台的菜单处理
|
||||
*/
|
||||
const handleMenuRule = (routes: any, pathPrefix = '/', type = ['menu', 'menu_dir']) => {
|
||||
const menuRule: RouteRecordRaw[] = []
|
||||
for (const key in routes) {
|
||||
if (routes[key].extend == 'add_rules_only') {
|
||||
continue
|
||||
}
|
||||
if (!type.includes(routes[key].type)) {
|
||||
continue
|
||||
}
|
||||
if (routes[key].type == 'menu_dir' && routes[key].children && !routes[key].children.length) {
|
||||
continue
|
||||
}
|
||||
if (
|
||||
['route', 'menu', 'nav_user_menu', 'nav'].includes(routes[key].type) &&
|
||||
((routes[key].menu_type == 'tab' && !routes[key].component) ||
|
||||
(['link', 'iframe'].includes(routes[key].menu_type) && !routes[key].url))
|
||||
) {
|
||||
continue
|
||||
}
|
||||
const currentPath = ['link', 'iframe'].includes(routes[key].menu_type)
|
||||
? routes[key].url
|
||||
: pathPrefix + routes[key].path
|
||||
let children: RouteRecordRaw[] = []
|
||||
if (routes[key].children && routes[key].children.length > 0) {
|
||||
children = handleMenuRule(routes[key].children, pathPrefix, type)
|
||||
}
|
||||
menuRule.push({
|
||||
path: currentPath,
|
||||
name: routes[key].name,
|
||||
component: routes[key].component,
|
||||
meta: {
|
||||
id: routes[key].id,
|
||||
title: routes[key].title,
|
||||
icon: routes[key].icon,
|
||||
keepalive: routes[key].keepalive,
|
||||
menu_type: routes[key].menu_type,
|
||||
type: routes[key].type
|
||||
},
|
||||
children: children
|
||||
})
|
||||
}
|
||||
return menuRule
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理权限节点
|
||||
* @param routes 路由数据
|
||||
* @param prefix 节点前缀
|
||||
* @returns 组装好的权限节点
|
||||
*/
|
||||
const handleAuthNode = (routes: any, prefix = '/') => {
|
||||
const authNode: Map<string, string[]> = new Map([])
|
||||
assembleAuthNode(routes, authNode, prefix, prefix)
|
||||
return authNode
|
||||
}
|
||||
const assembleAuthNode = (routes: any, authNode: Map<string, string[]>, prefix = '/', parent = '/') => {
|
||||
const authNodeTemp = []
|
||||
for (const key in routes) {
|
||||
if (routes[key].type == 'button') authNodeTemp.push(prefix + routes[key].name)
|
||||
if (routes[key].children && routes[key].children.length > 0) {
|
||||
assembleAuthNode(routes[key].children, authNode, prefix, prefix + routes[key].name)
|
||||
}
|
||||
}
|
||||
if (authNodeTemp && authNodeTemp.length > 0) {
|
||||
authNode.set(parent, authNodeTemp)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 动态添加路由-带子路由
|
||||
* @param viewsComponent
|
||||
* @param routes
|
||||
* @param parentName
|
||||
* @param analyticRelation 根据 name 从已注册路由分析父级路由
|
||||
*/
|
||||
export const addRouteAll = (
|
||||
viewsComponent: Record<string, any>,
|
||||
routes: any,
|
||||
parentName: string,
|
||||
analyticRelation = false
|
||||
) => {
|
||||
for (const idx in routes) {
|
||||
if (routes[idx].extend == 'add_menu_only') {
|
||||
continue
|
||||
}
|
||||
if (
|
||||
(routes[idx].menu_type == 'tab' && viewsComponent[routes[idx].component]) ||
|
||||
routes[idx].menu_type == 'iframe'
|
||||
) {
|
||||
addRouteItem(viewsComponent, routes[idx], parentName, analyticRelation)
|
||||
}
|
||||
|
||||
if (routes[idx].children && routes[idx].children.length > 0) {
|
||||
addRouteAll(viewsComponent, routes[idx].children, parentName, analyticRelation)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 动态添加路由
|
||||
* @param viewsComponent
|
||||
* @param route
|
||||
* @param parentName
|
||||
* @param analyticRelation 根据 name 从已注册路由分析父级路由
|
||||
*/
|
||||
export const addRouteItem = (
|
||||
viewsComponent: Record<string, any>,
|
||||
route: any,
|
||||
parentName: string,
|
||||
analyticRelation: boolean
|
||||
) => {
|
||||
let path = '',
|
||||
component
|
||||
if (route.menu_type == 'iframe') {
|
||||
path = (isAdminApp() ? adminBaseRoute.path : '') + '/iframe/' + encodeURIComponent(route.url)
|
||||
component = () => import('@/layouts/common/router-view/iframe.vue')
|
||||
} else {
|
||||
path = parentName ? route.path : '/' + route.path
|
||||
component = viewsComponent[route.component]
|
||||
}
|
||||
|
||||
if (route.menu_type == 'tab' && analyticRelation) {
|
||||
const parentNames = getParentNames(route.name)
|
||||
if (parentNames.length) {
|
||||
for (const key in parentNames) {
|
||||
if (router.hasRoute(parentNames[key])) {
|
||||
parentName = parentNames[key]
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const routeBaseInfo: RouteRecordRaw = {
|
||||
path: path,
|
||||
name: route.name,
|
||||
component: component,
|
||||
meta: {
|
||||
title: route.title,
|
||||
extend: route.extend,
|
||||
icon: route.icon,
|
||||
keepalive: route.keepalive,
|
||||
menu_type: route.menu_type,
|
||||
type: route.type,
|
||||
url: route.url,
|
||||
addtab: true
|
||||
}
|
||||
}
|
||||
if (parentName) {
|
||||
router.addRoute(parentName, routeBaseInfo)
|
||||
} else {
|
||||
router.addRoute(routeBaseInfo)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据name字符串，获取父级name组合的数组
|
||||
* @param name
|
||||
*/
|
||||
const getParentNames = (name: string) => {
|
||||
const names = compact(name.split('/'))
|
||||
const tempNames = []
|
||||
const parentNames = []
|
||||
for (const key in names) {
|
||||
tempNames.push(names[key])
|
||||
if (parseInt(key) != names.length - 1) {
|
||||
parentNames.push(tempNames.join('/'))
|
||||
}
|
||||
}
|
||||
return reverse(parentNames)
|
||||
}
|
||||
Reference in New Issue
Block a user