mirrors/pig-ui
1
0
Fork 0
mirror of https://gitee.com/log4j/pig-ui.git synced 2024-12-23 05:40:20 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

'admin-21.01.21:处理tagsView逻辑'

Browse Source
This commit is contained in:
lyt-Top 2021-01-21 23:36:07 +08:00
parent 1db2cba283
commit 3f6194543e
3 changed files with 64 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
vue-admin-wonderful-next/src/router/index.ts
View File

@ -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) => {

12
vue-admin-wonderful-next/src/store/index.ts
View File

@ -42,7 +42,8 @@ export interface RootStateTypes {
layout: string
},
routes: Array<object>,
caches: Array<string>
caches: Array<string>,
tagsViewRoutes: Array<object>
}
export const key: InjectionKey<Store<RootStateTypes>> = Symbol()
@ -51,7 +52,8 @@ export const store = createStore<RootStateTypes>({
state: {
themeConfig,
routes: [],
caches: []
caches: [],
tagsViewRoutes: []
},
mutations: {
getThemeConfig(state: any, data: object) {
@ -62,6 +64,9 @@ export const store = createStore<RootStateTypes>({
},
getCacheKeepAlive(state: any, data: Array<string>) {
state.caches = data
},
getTagsViewRoutes(state: any, data: Array<string>) {
state.tagsViewRoutes = data
}
},
actions: {
@ -74,6 +79,9 @@ export const store = createStore<RootStateTypes>({
async setCacheKeepAlive({ commit }, data: Array<string>) {
commit('getCacheKeepAlive', data)
},
async setTagsViewRoutes({ commit }, data: Array<string>) {
commit('getTagsViewRoutes', data)
},
}
})

29
vue-admin-wonderful-next/src/views/layout/navBars/tagsView/tagsView.vue
View File

@ -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<object>) => {
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,