This commit is contained in:
Ah jung
2021-07-17 16:24:49 +08:00
parent 3cb7a7f54f
commit 770d39871a
5 changed files with 41 additions and 60 deletions

View File

@@ -74,6 +74,9 @@ export default defineComponent({
watch(
() => currentRoute.fullPath,
() => {
const matched = currentRoute.matched
const getOpenKeys = matched && matched.length ? [matched[0]?.name] : []
state.openKeys = getOpenKeys
state.selectedKeys = currentRoute.name
}
)
@@ -89,6 +92,7 @@ export default defineComponent({
//展开菜单
function menuExpanded(openKeys: string[]) {
console.log(openKeys)
if (!openKeys) return
const latestOpenKey = openKeys.pop();
state.openKeys = latestOpenKey ? [latestOpenKey] : []

View File

@@ -192,10 +192,10 @@ export default defineComponent({
const delKeepAliveCompName = () => {
if (route.meta.keepAlive) {
const name = router.currentRoute.value.matched.find((item) => item.name == route.name)
?.components?.default.name
?.components?.default.name
if (name) {
asyncRouteStore.keepAliveComponents = asyncRouteStore.keepAliveComponents.filter(
(item) => item != name
(item) => item != name
)
}
}
@@ -203,16 +203,16 @@ export default defineComponent({
// 标签页列表
const tabsList: any = computed(() => tabsViewStore.tabsList)
const whiteList = [PageEnum.REDIRECT, PageEnum.BASE_LOGIN]
const whiteList: string[] = [PageEnum.REDIRECT, PageEnum.BASE_LOGIN]
watch(
() => route.fullPath,
(to) => {
if (whiteList.includes(route.name as string) || ['ErrorPage'].includes(route.name as string)) return
state.activeKey = to
tabsViewStore.addTabs(getSimpleRoute(route))
},
{ immediate: true }
() => route.fullPath,
(to) => {
if (whiteList.includes(route.name as string) || ['ErrorPage'].includes(route.name as string)) return
state.activeKey = to
tabsViewStore.addTabs(getSimpleRoute(route))
},
{ immediate: true }
)
// 在页面关闭或刷新之前,保存数据
@@ -233,6 +233,7 @@ export default defineComponent({
state.activeKey = currentRoute.fullPath
router.push(currentRoute)
}
onElementResize()
}
// 刷新页面
@@ -251,6 +252,7 @@ export default defineComponent({
tabsViewStore.closeLeftTabs(route)
state.activeKey = route.fullPath
router.replace(route.fullPath)
onElementResize()
}
// 关闭右侧
@@ -258,6 +260,7 @@ export default defineComponent({
tabsViewStore.closeRightTabs(route)
state.activeKey = route.fullPath
router.replace(route.fullPath)
onElementResize()
}
// 关闭其他
@@ -265,6 +268,7 @@ export default defineComponent({
tabsViewStore.closeOtherTabs(route)
state.activeKey = route.fullPath
router.replace(route.fullPath)
onElementResize()
}
// 关闭全部
@@ -272,28 +276,30 @@ export default defineComponent({
localStorage.removeItem('routes')
tabsViewStore.closeAllTabs()
router.replace('/')
onElementResize()
}
//tab 操作
const closeHandleSelect = (key) => {
switch (key) {
//刷新
//刷新
case '1':
reloadPage()
break
//关闭
//关闭
case '2':
removeTab(route)
break
//关闭其他
//关闭其他
case '3':
closeOther(route)
break
//关闭所有
//关闭所有
case '4':
closeAll()
break
}
onElementResize()
}
function getCurrentScrollOffset() {
@@ -321,9 +327,9 @@ export default defineComponent({
if (navWidth - currentOffset <= containerWidth) return
let newOffset =
navWidth - currentOffset > containerWidth * 2
? currentOffset + containerWidth
: navWidth - containerWidth
navWidth - currentOffset > containerWidth * 2
? currentOffset + containerWidth
: navWidth - containerWidth
setOffset(newOffset)
}
@@ -383,10 +389,14 @@ export default defineComponent({
}
onMounted(() => {
onElementResize()
})
function onElementResize() {
let observer
observer = elementResizeDetectorMaker()
observer.listenTo(navWrap.value, handleResize)
})
}
return {
...toRefs(state),
@@ -519,7 +529,8 @@ export default defineComponent({
}
}
}
.active-item{
.active-item {
color: #2d8cf0
}
}

View File

@@ -59,7 +59,8 @@ import {
NTable,
NInputNumber,
NLoadingBarProvider,
NModal
NModal,
NUpload
} from 'naive-ui'
const naive = create({
@@ -122,7 +123,8 @@ const naive = create({
NTable,
NInputNumber,
NLoadingBarProvider,
NModal
NModal,
NUpload
]
})

View File

@@ -1,11 +1,9 @@
import { toRefs } from 'vue'
import { isNavigationFailure, Router } from 'vue-router'
import { useUserStoreWidthOut } from '@/store/modules/user'
import { useAsyncRouteStoreWidthOut } from '@/store/modules/asyncRoute'
import NProgress from 'nprogress' // progress bar
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { storage } from '@/utils/Storage'
import { debounce } from '@/utils/lodashChunk'
import { PageEnum } from '@/enums/pageEnum'
@@ -15,39 +13,6 @@ const LOGIN_PATH = PageEnum.BASE_LOGIN
const whitePathList = [LOGIN_PATH] // no redirect whitelist
// 是否需要从后端获取菜单
const isGetMenus = debounce(
({ to, from, next, hasRoute, router }) => {
const userStore = useUserStoreWidthOut();
const asyncRouteStore = useAsyncRouteStoreWidthOut();
userStore.GetInfo().then(res => {
asyncRouteStore.generateRoutes(res).then(() => {
// 根据roles权限生成可访问的路由表
// 动态添加可访问路由表
asyncRouteStore.getRouters().forEach((item) => {
router.addRoute(item)
});
// if (whitePathList.includes(to.name as string)) return
if (!hasRoute) {
// 请求带有 redirect 重定向时,登录自动重定向到该地址
const redirect = decodeURIComponent((from.query.redirect || '') as string)
if (to.path === redirect) {
next({ ...to, replace: true })
} else {
// 跳转到目的路由
next({ ...to, replace: true })
}
} else {
next()
}
}).catch(() => next({ path: defaultRoutePath }))
})
},
1800,
{ leading: true }
)
export function createRouterGuards(router: Router) {
const userStore = useUserStoreWidthOut();
const asyncRouteStore = useAsyncRouteStoreWidthOut();
@@ -65,7 +30,6 @@ export function createRouterGuards(router: Router) {
}
const token = storage.get(ACCESS_TOKEN)
const roles = storage.get('roles')
if (!token) {
@@ -111,7 +75,7 @@ export function createRouterGuards(router: Router) {
NProgress.done()
})
router.afterEach((to, from, failure) => {
router.afterEach((to, _, failure) => {
document.title = (to?.meta?.title as string) || document.title
if (isNavigationFailure(failure)) {
//console.log('failed navigation', failure)

View File

@@ -12,7 +12,7 @@ export function renderIcon(icon) {
/**
* 递归组装菜单格式
*/
export function generatorMenu(routerMap: Array<any>, parent?: object) {
export function generatorMenu(routerMap: Array<any>) {
return routerMap.filter(item => {
return item.meta.hidden != true && !['/:path(.*)*', '/', '/redirect', '/login'].includes(item.path)
}).map(item => {
@@ -25,7 +25,7 @@ export function generatorMenu(routerMap: Array<any>, parent?: object) {
// 是否有子菜单,并递归处理
if (item.children && item.children.length > 0) {
// Recursion
currentMenu.children = generatorMenu(item.children, currentMenu)
currentMenu.children = generatorMenu(item.children)
}
return currentMenu
})