From 3f6194543e8103c3f30c4c00bacaa5878962a1f0 Mon Sep 17 00:00:00 2001 From: lyt-Top <1105290566@qq.com> Date: Thu, 21 Jan 2021 23:36:07 +0800 Subject: [PATCH] =?UTF-8?q?'admin-21.01.21:=E5=A4=84=E7=90=86tagsView?= =?UTF-8?q?=E9=80=BB=E8=BE=91'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vue-admin-wonderful-next/src/router/index.ts | 48 ++++++++++++++++--- vue-admin-wonderful-next/src/store/index.ts | 12 ++++- .../layout/navBars/tagsView/tagsView.vue | 29 +++++------ 3 files changed, 64 insertions(+), 25 deletions(-) diff --git a/vue-admin-wonderful-next/src/router/index.ts b/vue-admin-wonderful-next/src/router/index.ts index 86793df..dbd9391 100644 --- a/vue-admin-wonderful-next/src/router/index.ts +++ b/vue-admin-wonderful-next/src/router/index.ts @@ -13,6 +13,7 @@ export const dynamicRoutes = [ isLink: '', isHide: false, isKeepAlive: true, + isAffix: true, icon: 'iconfont icon-shouye' }, children: [{ @@ -24,6 +25,7 @@ export const dynamicRoutes = [ isLink: '', isHide: false, isKeepAlive: true, + isAffix: true, icon: 'iconfont icon-shouye' } }, @@ -37,6 +39,7 @@ export const dynamicRoutes = [ isLink: '', isHide: false, isKeepAlive: true, + isAffix: false, icon: 'iconfont icon-xitongshezhi' }, children: [ @@ -49,6 +52,7 @@ export const dynamicRoutes = [ isLink: '', isHide: false, isKeepAlive: true, + isAffix: false, icon: 'iconfont icon-caidan' } }, @@ -61,6 +65,7 @@ export const dynamicRoutes = [ isLink: '', isHide: false, isKeepAlive: true, + isAffix: false, icon: 'iconfont icon-icon-', } } @@ -76,6 +81,7 @@ export const dynamicRoutes = [ isLink: '', isHide: false, isKeepAlive: true, + isAffix: false, icon: 'iconfont icon-quanxian' }, children: [ @@ -88,7 +94,8 @@ export const dynamicRoutes = [ title: '前端控制', isLink: '', isHide: false, - isKeepAlive: true + isKeepAlive: true, + isAffix: false }, children: [ { @@ -99,7 +106,8 @@ export const dynamicRoutes = [ title: '页面权限', isLink: '', isHide: false, - isKeepAlive: true + isKeepAlive: true, + isAffix: false } }, { @@ -110,7 +118,8 @@ export const dynamicRoutes = [ title: '按钮权限', isLink: '', isHide: false, - isKeepAlive: true + isKeepAlive: true, + isAffix: false } } ] @@ -123,7 +132,8 @@ export const dynamicRoutes = [ title: '后端控制', isLink: '', isHide: false, - isKeepAlive: true + isKeepAlive: true, + isAffix: false }, children: [ { @@ -134,7 +144,8 @@ export const dynamicRoutes = [ title: '页面权限', isLink: '', isHide: false, - isKeepAlive: true + isKeepAlive: true, + isAffix: false } }, { @@ -145,7 +156,8 @@ export const dynamicRoutes = [ title: '按钮权限', isLink: '', isHide: false, - isKeepAlive: true + isKeepAlive: true, + isAffix: false } } ] @@ -162,6 +174,7 @@ export const dynamicRoutes = [ isLink: '', isHide: false, isKeepAlive: true, + isAffix: false, icon: 'iconfont icon-xitongshezhi' }, children: [ @@ -175,6 +188,7 @@ export const dynamicRoutes = [ isLink: '', isHide: false, isKeepAlive: true, + isAffix: false, icon: 'iconfont icon-caidan' }, children: [ @@ -187,6 +201,7 @@ export const dynamicRoutes = [ isLink: '', isHide: false, isKeepAlive: true, + isAffix: false, icon: 'iconfont icon-caidan' } }, @@ -200,6 +215,7 @@ export const dynamicRoutes = [ isLink: '', isHide: false, isKeepAlive: true, + isAffix: false, icon: 'iconfont icon-caidan' }, children: [ @@ -212,6 +228,7 @@ export const dynamicRoutes = [ isLink: '', isHide: false, isKeepAlive: true, + isAffix: false, icon: 'iconfont icon-caidan' } }, @@ -224,6 +241,7 @@ export const dynamicRoutes = [ isLink: '', isHide: false, isKeepAlive: true, + isAffix: false, icon: 'iconfont icon-caidan' } } @@ -238,6 +256,7 @@ export const dynamicRoutes = [ isLink: '', isHide: false, isKeepAlive: true, + isAffix: false, icon: 'iconfont icon-caidan' } } @@ -252,6 +271,7 @@ export const dynamicRoutes = [ isLink: '', isHide: false, isKeepAlive: true, + isAffix: false, icon: 'iconfont icon-caidan' } } @@ -266,6 +286,7 @@ export const dynamicRoutes = [ isLink: '', isHide: false, isKeepAlive: true, + isAffix: false, icon: 'iconfont icon-crew_feature' } }, @@ -278,6 +299,7 @@ export const dynamicRoutes = [ isLink: '', isHide: false, isKeepAlive: true, + isAffix: false, icon: 'iconfont icon-fuzhiyemian' } }, @@ -290,6 +312,7 @@ export const dynamicRoutes = [ isLink: '', isHide: false, isKeepAlive: true, + isAffix: false, icon: 'iconfont icon-zujian' } }, @@ -302,6 +325,7 @@ export const dynamicRoutes = [ isLink: '', isHide: false, isKeepAlive: true, + isAffix: false, icon: 'iconfont icon-ico_shuju' } }, @@ -314,6 +338,7 @@ export const dynamicRoutes = [ isLink: '', isHide: false, isKeepAlive: true, + isAffix: false, icon: 'iconfont icon-gerenzhongxin' } }, @@ -326,6 +351,7 @@ export const dynamicRoutes = [ isLink: '', isHide: false, isKeepAlive: true, + isAffix: false, icon: 'iconfont icon-gongju' } }, @@ -336,8 +362,9 @@ export const dynamicRoutes = [ meta: { title: '外链', isLink: '', - isHide: false, + isHide: true, isKeepAlive: true, + isAffix: true, icon: 'iconfont icon-caozuo-wailian' } }, @@ -350,6 +377,7 @@ export const dynamicRoutes = [ isLink: '', isHide: false, isKeepAlive: true, + isAffix: true, icon: 'iconfont icon-neiqianshujuchucun' } }] @@ -426,6 +454,11 @@ export function formatTwoStageRoutes(arr: any) { return newArr } +// 缓存多级嵌套数组处理后的一维数组(tagsView中使用) +export function setCacheTagsViewRoutes() { + store.dispatch('setTagsViewRoutes', formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes))[0].children) +} + // 添加动态路由 export function setAddRoute() { formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes)).map((route: any) => { @@ -443,6 +476,7 @@ export function resetRoute() { // 初始化执行函数 setAddRoute() +setCacheTagsViewRoutes() // router.afterEach((to, from) => { diff --git a/vue-admin-wonderful-next/src/store/index.ts b/vue-admin-wonderful-next/src/store/index.ts index 17dd8f8..67cf83f 100644 --- a/vue-admin-wonderful-next/src/store/index.ts +++ b/vue-admin-wonderful-next/src/store/index.ts @@ -42,7 +42,8 @@ export interface RootStateTypes { layout: string }, routes: Array, - caches: Array + caches: Array, + tagsViewRoutes: Array } export const key: InjectionKey> = Symbol() @@ -51,7 +52,8 @@ export const store = createStore({ state: { themeConfig, routes: [], - caches: [] + caches: [], + tagsViewRoutes: [] }, mutations: { getThemeConfig(state: any, data: object) { @@ -62,6 +64,9 @@ export const store = createStore({ }, getCacheKeepAlive(state: any, data: Array) { state.caches = data + }, + getTagsViewRoutes(state: any, data: Array) { + state.tagsViewRoutes = data } }, actions: { @@ -74,6 +79,9 @@ export const store = createStore({ async setCacheKeepAlive({ commit }, data: Array) { commit('getCacheKeepAlive', data) }, + async setTagsViewRoutes({ commit }, data: Array) { + commit('getTagsViewRoutes', data) + }, } }) diff --git a/vue-admin-wonderful-next/src/views/layout/navBars/tagsView/tagsView.vue b/vue-admin-wonderful-next/src/views/layout/navBars/tagsView/tagsView.vue index c5bf517..fe6f795 100644 --- a/vue-admin-wonderful-next/src/views/layout/navBars/tagsView/tagsView.vue +++ b/vue-admin-wonderful-next/src/views/layout/navBars/tagsView/tagsView.vue @@ -70,22 +70,16 @@ export default { }); // 设置/过滤路由（非静态路由/是否显示在菜单中） const setFilterRoutes = () => { - const routesList = router.getRoutes(); - routesList.map((route) => { - if (route.path === "/") { - state.tagsViewList = filterRoutesFun(route.children); - } + console.log(store.state.tagsViewRoutes); + store.state.tagsViewRoutes.map((v) => { + if (v.meta.isAffix && !v.meta.isHide) state.tagsViewList.push({ ...v }); }); }; - // 路由过滤递归函数 - const filterRoutesFun = (arr: Array) => { - return arr - .filter((item) => !item.meta.isHide) - .map((item) => { - item = Object.assign({}, item); - if (item.children) item.children = filterRoutesFun(item.children); - return item; - }); + // 当前路由：未设置隐藏（isHide）也显示在 tagsView 中 + const addTagsView = (path: string) => { + if (state.tagsViewList.some((v) => v.path === path)) return false; + const item = store.state.tagsViewRoutes.find((v) => v.path === path); + if (!item.meta.isHide) state.tagsViewList.push({ ...item }); }; const initSortable = () => { const el = document.querySelector(".layout-navbars-tagsview-ul"); @@ -121,15 +115,18 @@ export default { }); onBeforeMount(() => { setFilterRoutes(); + addTagsView(route.path); }); onMounted(() => { initSortable(); scrollRef.value.setScrollLeft(tagsRefs); }); + // 路由更新时 onBeforeRouteUpdate((to) => { state.routePath = to.path; - // getTagsRefsIndex(to.path); - // moveToCurrentTag(); + addTagsView(to.path); + getTagsRefsIndex(to.path); + moveToCurrentTag(); }); return { isActive,