update: 1.优化多层级路由

This commit is contained in:
xieyonghong 2023-02-01 18:21:00 +08:00
parent 531ef16a2f
commit 22bdc79013
3 changed files with 47 additions and 31 deletions

View File

@ -31,7 +31,7 @@ router.beforeEach((to, from, next) => {
const system = useSystem() const system = useSystem()
const menu = useMenuStore() const menu = useMenuStore()
if (!menu.menuData.length) { if (!menu.siderMenus.length) {
userInfo.getUserInfo().then(() => { userInfo.getUserInfo().then(() => {
system.getSystemVersion().then((menuData: any[]) => { system.getSystemVersion().then((menuData: any[]) => {
menuData.forEach(r => { menuData.forEach(r => {

View File

@ -54,19 +54,17 @@ export const useMenuStore = defineStore({
]; ];
const resp = await queryOwnThree({ paging: false, terms: params }) const resp = await queryOwnThree({ paging: false, terms: params })
if (resp.success) { if (resp.success) {
const silderMenus = filterAsnycRouter(cloneDeep(resp.result)) const { menusData, silderMenus } = filterAsnycRouter(resp.result)
const menus = filterAsnycRouter(cloneDeep(resp.result)) menusData.push({
menus.push({
path: '/', path: '/',
redirect: menus[0]?.path, redirect: menusData[0]?.path,
meta: { meta: {
hideInMenu: true hideInMenu: true
} }
}) })
this.menuData = menus
this.siderMenus = silderMenus this.siderMenus = silderMenus
console.log('silderMenus', silderMenus) console.log('silderMenus', silderMenus)
res(menus) res(menusData)
} }
}) })
} }

View File

@ -1,5 +1,6 @@
const pagesComponent = import.meta.glob('../views/**/*.vue', { eager: true }); import { cloneDeep } from 'lodash-es'
import { BlankLayoutPage, BasicLayoutPage } from 'components/Layout' import { BlankLayoutPage, BasicLayoutPage } from 'components/Layout'
const pagesComponent = import.meta.glob('../views/**/*.vue', { eager: true });
/** /**
* *
@ -155,9 +156,9 @@ const resolveComponent = (name: any) => {
return !!importPage ? importPage.default : undefined return !!importPage ? importPage.default : undefined
} }
const findChildrenRoute = (code: string, url: string): MenuItem[] => { const findChildrenRoute = (code: string, url: string, routes: any[] = []): MenuItem[] => {
if (extraRouteObj[code]) { if (extraRouteObj[code]) {
return extraRouteObj[code].children.map((route: MenuItem) => { const extraRoutes = extraRouteObj[code].children.map((route: MenuItem) => {
return { return {
url: `${url}/${route.code}`, url: `${url}/${route.code}`,
code: route.code, code: route.code,
@ -165,8 +166,9 @@ const findChildrenRoute = (code: string, url: string): MenuItem[] => {
isShow: false isShow: false
} }
}) })
return [...routes, ...extraRoutes]
} }
return [] return routes
} }
const findDetailRouteItem = (code: string, url: string): Partial<MenuItem> | null => { const findDetailRouteItem = (code: string, url: string): Partial<MenuItem> | null => {
@ -194,36 +196,52 @@ const findDetailRoutes = (routes: any[]): any[] => {
return newRoutes return newRoutes
} }
export function filterAsnycRouter(asyncRouterMap: any, parentCode = '', level = 1) { export function filterAsnycRouter(asyncRouterMap: any, parentCode = '', level = 1): { menusData: any, silderMenus: any } {
const _asyncRouterMap = cloneDeep(asyncRouterMap)
return asyncRouterMap.map((route: any) => { const menusData: any[] = []
const silderMenus: any[] = []
route.path = `${route.url}` _asyncRouterMap.forEach((route: any) => {
route.meta = { const _route: any = {
icon: route.icon, path: `${route.url}`,
title: route.name, meta: {
hideInMenu: route.isShow === false icon: route.icon,
title: route.name,
hideInMenu: route.isShow === false,
buttons: route.buttons || []
}
} }
const silder = {..._route}
// 查看是否有隐藏子路由 // 查看是否有隐藏子路由
const extraChildren = findChildrenRoute(route.code, route.url) route.children = findChildrenRoute(route.code, route.url, route.children)
route.children = route.children && route.children.length ? [...route.children, ...extraChildren] : extraChildren
route.children = findDetailRoutes(route.children) route.children = findDetailRoutes(route.children)
if (route.children && route.children.length) { if (route.children && route.children.length) {
// TODO 查看是否具有详情页 // TODO 查看是否具有详情页
route.children = filterAsnycRouter(route.children, `${parentCode}/${route.code}`, level + 1) const { menusData: _menusData, silderMenus: _silderMenus } = filterAsnycRouter(route.children, `${parentCode}/${route.code}`, level + 1)
const showChildren = route.children.some((r: any) => !r.meta.hideInMenu) _route.children = _menusData
silder.children = _silderMenus
const showChildren = _route.children.some((r: any) => !r.meta.hideInMenu)
if (showChildren) { if (showChildren) {
route.component = () => level === 1 ? BasicLayoutPage : BlankLayoutPage _route.component = () => level === 1 ? BasicLayoutPage : BlankLayoutPage
route.redirect = route.children[0].url _route.redirect = route.children[0].url
} else { } else {
route.component = resolveComponent(route.code) || BlankLayoutPage; const myComponent = resolveComponent(route.code)
_route.component = myComponent ? myComponent : BlankLayoutPage;
if (myComponent) {
_route.component = myComponent;
_route.children.map((r: any) => menusData.push(r))
delete _route.children
}
} }
} else { } else {
console.log(route.code) _route.component = _route.component || resolveComponent(route.code) || BlankLayoutPage;
route.component = route.component || resolveComponent(route.code) || BlankLayoutPage;
} }
delete route.name menusData.push(_route)
return route silderMenus.push(silder)
}) })
return {
menusData,
silderMenus
}
} }