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

'admin-21.01.26:处理各菜单导航a链接跳转、前端控制页面菜单权限等'

Browse Source
This commit is contained in:
lyt 2021-01-26 18:17:13 +08:00
parent fcdd6cace6
commit a66f93d59d
8 changed files with 128 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,13 +9,7 @@ export const dynamicRoutes = [
component: () => import('/@/views/layout/index.vue'),
redirect: '/home',
meta: {
title: '首页',
isLink: '',
isHide: false,
isKeepAlive: true,
isAffix: true,
isIframe: false,
icon: 'iconfont icon-shouye'
isKeepAlive: true
},
children: [{
path: '/home',
@ -28,6 +22,7 @@ export const dynamicRoutes = [
isKeepAlive: true,
isAffix: true,
isIframe: false,
auth: ['admin', 'test'],
icon: 'iconfont icon-shouye'
}
},
@ -43,6 +38,7 @@ export const dynamicRoutes = [
isKeepAlive: true,
isAffix: false,
isIframe: false,
auth: ['admin'],
icon: 'iconfont icon-xitongshezhi'
},
children: [
@ -57,6 +53,7 @@ export const dynamicRoutes = [
isKeepAlive: true,
isAffix: false,
isIframe: false,
auth: ['admin'],
icon: 'iconfont icon-caidan'
}
},
@ -71,6 +68,7 @@ export const dynamicRoutes = [
isKeepAlive: true,
isAffix: false,
isIframe: false,
auth: ['admin'],
icon: 'iconfont icon-icon-',
}
}
@ -88,6 +86,7 @@ export const dynamicRoutes = [
isKeepAlive: true,
isAffix: false,
isIframe: false,
auth: ['admin', 'test'],
icon: 'iconfont icon-quanxian'
},
children: [
@ -102,7 +101,8 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false
isIframe: false,
auth: ['admin', 'test']
},
children: [
{
@ -115,7 +115,8 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false
isIframe: false,
auth: ['admin', 'test']
}
},
{
@ -128,7 +129,8 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false
isIframe: false,
auth: ['admin', 'test']
}
}
]
@ -143,7 +145,8 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false
isIframe: false,
auth: ['admin', 'test']
},
children: [
{
@ -156,7 +159,8 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false
isIframe: false,
auth: ['admin', 'test']
}
},
{
@ -169,7 +173,8 @@ export const dynamicRoutes = [
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false
isIframe: false,
auth: ['admin', 'test']
}
}
]
@ -188,6 +193,7 @@ export const dynamicRoutes = [
isKeepAlive: true,
isAffix: false,
isIframe: false,
auth: ['admin', 'test'],
icon: 'iconfont icon-xitongshezhi'
},
children: [
@ -203,6 +209,7 @@ export const dynamicRoutes = [
isKeepAlive: true,
isAffix: false,
isIframe: false,
auth: ['admin', 'test'],
icon: 'iconfont icon-caidan'
},
children: [
@ -217,6 +224,7 @@ export const dynamicRoutes = [
isKeepAlive: true,
isAffix: false,
isIframe: false,
auth: ['admin', 'test'],
icon: 'iconfont icon-caidan'
}
},
@ -232,6 +240,7 @@ export const dynamicRoutes = [
isKeepAlive: true,
isAffix: false,
isIframe: false,
auth: ['admin', 'test'],
icon: 'iconfont icon-caidan'
},
children: [
@ -246,6 +255,7 @@ export const dynamicRoutes = [
isKeepAlive: true,
isAffix: false,
isIframe: false,
auth: ['admin', 'test'],
icon: 'iconfont icon-caidan'
}
},
@ -260,6 +270,7 @@ export const dynamicRoutes = [
isKeepAlive: true,
isAffix: false,
isIframe: false,
auth: ['admin', 'test'],
icon: 'iconfont icon-caidan'
}
}
@ -276,6 +287,7 @@ export const dynamicRoutes = [
isKeepAlive: true,
isAffix: false,
isIframe: false,
auth: ['admin', 'test'],
icon: 'iconfont icon-caidan'
}
}
@ -292,6 +304,7 @@ export const dynamicRoutes = [
isKeepAlive: true,
isAffix: false,
isIframe: false,
auth: ['admin', 'test'],
icon: 'iconfont icon-caidan'
}
}
@ -309,6 +322,7 @@ export const dynamicRoutes = [
isKeepAlive: true,
isAffix: false,
isIframe: false,
auth: ['admin', 'test'],
icon: 'iconfont icon-crew_feature'
},
children: [
@ -323,6 +337,7 @@ export const dynamicRoutes = [
isKeepAlive: true,
isAffix: false,
isIframe: false,
auth: ['admin', 'test'],
icon: 'el-icon-thumb'
}
}
@ -339,6 +354,7 @@ export const dynamicRoutes = [
isKeepAlive: true,
isAffix: false,
isIframe: false,
auth: ['admin', 'test'],
icon: 'iconfont icon-fuzhiyemian'
}
},
@ -353,6 +369,7 @@ export const dynamicRoutes = [
isKeepAlive: true,
isAffix: false,
isIframe: false,
auth: ['admin', 'test'],
icon: 'iconfont icon-zujian'
}
},
@ -367,6 +384,7 @@ export const dynamicRoutes = [
isKeepAlive: true,
isAffix: false,
isIframe: false,
auth: ['admin', 'test'],
icon: 'iconfont icon-ico_shuju'
}
},
@ -381,6 +399,7 @@ export const dynamicRoutes = [
isKeepAlive: true,
isAffix: false,
isIframe: false,
auth: ['admin', 'test'],
icon: 'iconfont icon-gerenzhongxin'
}
},
@ -395,6 +414,7 @@ export const dynamicRoutes = [
isKeepAlive: true,
isAffix: false,
isIframe: false,
auth: ['admin', 'test'],
icon: 'iconfont icon-gongju'
}
},
@ -409,6 +429,7 @@ export const dynamicRoutes = [
isKeepAlive: false,
isAffix: false,
isIframe: false,
auth: ['admin'],
icon: 'iconfont icon-caozuo-wailian'
}
},
@ -423,6 +444,7 @@ export const dynamicRoutes = [
isKeepAlive: true,
isAffix: true,
isIframe: true,
auth: ['admin'],
icon: 'iconfont icon-neiqianshujuchucun'
}
}]
@ -504,16 +526,62 @@ export function setCacheTagsViewRoutes() {
store.dispatch('setTagsViewRoutes', formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes))[0].children)
}
// 获取当前用户的权限去比对路由表，用于左侧菜单/横向菜单的显示
export function setFilterMenu() {
if (store.state.auths.length <= 0) store.dispatch('setAuths')
store.dispatch("setRoutes", setFilterMenuFun(dynamicRoutes[0].children, store.state.auths))
}
// 判断路由 auth 中是否包含当前登录用户权限字段
export function hasAuth(auths: any, route: any) {
if (route.meta && route.meta.auth) return auths.some((auth: any) => route.meta.auth.includes(auth))
else return true
}
// 递归过滤又权限的路由
export function setFilterMenuFun(routes: any, auth: any) {
const menu: any = []
routes.map((route: any) => {
const item = { ...route }
if (hasAuth(auth, item)) {
if (item.children) item.children = setFilterMenuFun(item.children, auth)
menu.push(item)
}
})
return menu
}
// 获取当前用户的权限去比对路由表，用于动态路由的添加
export function setFilterRoute() {
if (store.state.auths.length <= 0) store.dispatch('setAuths')
let filterRoute: any = []
formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes))[0].children.map((route: any) => {
route.meta.auth.map((metaAuth: any) => {
store.state.auths.map((auth: any) => {
if (metaAuth === auth) filterRoute.push({ ...route })
})
})
})
return filterRoute
}
// 比对后的路由表，进行重新赋值
export function setFilterRouteEnd() {
let filterRouteEnd: any = formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes))
filterRouteEnd[0].children = setFilterRoute()
return filterRouteEnd
}
// 添加动态路由
export function setAddRoute() {
formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes)).map((route: any) => {
setFilterRouteEnd().map((route: any) => {
router.addRoute(route as RouteRecordRaw)
})
}
// 删除/重置路由
export function resetRoute() {
formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes)).map((route: any) => {
setFilterRouteEnd().map((route: any) => {
const { name } = route
router.hasRoute(name) && router.removeRoute(name)
})
@ -521,8 +589,10 @@ export function resetRoute() {
// 初始化执行函数
setAddRoute()
setFilterMenu()
setCacheTagsViewRoutes()
// router.afterEach((to, from) => {
// })

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

@ -44,7 +44,8 @@ export interface RootStateTypes {
},
routes: Array<object>,
caches: Array<string>,
tagsViewRoutes: Array<object>
tagsViewRoutes: Array<object>,
auths: Array<string>
}
export const key: InjectionKey<Store<RootStateTypes>> = Symbol()
@ -54,7 +55,8 @@ export const store = createStore<RootStateTypes>({
themeConfig,
routes: [],
caches: [],
tagsViewRoutes: []
tagsViewRoutes: [],
auths: []
},
mutations: {
getThemeConfig(state: any, data: object) {
@ -68,6 +70,9 @@ export const store = createStore<RootStateTypes>({
},
getTagsViewRoutes(state: any, data: Array<string>) {
state.tagsViewRoutes = data
},
getAuths(state: any, data: Array<string>) {
state.auths = data
}
},
actions: {
@ -83,6 +88,13 @@ export const store = createStore<RootStateTypes>({
async setTagsViewRoutes({ commit }, data: Array<string>) {
commit('getTagsViewRoutes', data)
},
setAuths({ commit }, data: Array<string>) {
const defaultAuthList: Array<string> = ['admin', 'btn.add', 'btn.del', 'btn.edit']
let authList: Array<string> = []
if (data && data.length > 0) authList = data
else authList = defaultAuthList
commit('getAuths', authList)
}
}
})

2
vue-admin-wonderful-next/src/views/layout/component/aside.vue
View File

@ -19,7 +19,6 @@ import {
onUnmounted,
} from "vue";
import { useStore } from "/@/store/index.ts";
import { dynamicRoutes } from "/@/router/index.ts";
import Logo from "/@/views/layout/logo/index.vue";
import Vertical from "/@/views/layout/navMenu/vertical.vue";
export default {
@ -34,7 +33,6 @@ export default {
// 设置/过滤路由（非静态路由/是否显示在菜单中）
const setFilterRoutes = () => {
if (store.state.themeConfig.layout === "columns") return false;
store.dispatch("setRoutes", dynamicRoutes[0].children);
state.menuList = filterRoutesFun(store.state.routes);
};
// 路由过滤递归函数

22
vue-admin-wonderful-next/src/views/layout/component/columnsAside.vue
View File

@ -5,21 +5,19 @@
<li v-for="(v,k) in columnsAsideList" :key="k" @click="onColumnsAsideMenuClick(v,k)"
:ref="el => { if (el) columnsAsideOffsetTopRefs[k] = el }" :class="{'layout-columns-active':liIndex === k}"
:title="v.meta.title">
<div class="layout-columns-aside-li-box">
<template v-if="!v.meta.isLink">
<div class="layout-columns-aside-li-box" v-if="!v.meta.isLink || v.meta.isLink && v.meta.isIframe">
<i :class="v.meta.icon"></i>
<div class="layout-columns-aside-li-box-title font12">
{{v.meta.title && v.meta.title.length >= 4 ? v.meta.title.substr(0,4) : v.meta.title}}
</div>
</div>
<div class="layout-columns-aside-li-box" v-else>
<a :href="v.meta.isLink" target="_blank">
<i :class="v.meta.icon"></i>
<div class="layout-columns-aside-li-box-title font12">
{{v.meta.title && v.meta.title.length >= 4 ? v.meta.title.substr(0,4) : v.meta.title}}
</div>
</template>
<template v-else>
<a :href="v.meta.isLink" target="_blank">
<i :class="v.meta.icon"></i>
<div class="layout-columns-aside-li-box-title font12">
{{v.meta.title && v.meta.title.length >= 4 ? v.meta.title.substr(0,4) : v.meta.title}}
</div>
</a>
</template>
</a>
</div>
</li>
<div ref="columnsAsideActiveRef" :class="setColumnsAsideStyle"></div>
@ -40,7 +38,6 @@ import {
} from "vue";
import { useRoute, useRouter, onBeforeRouteUpdate } from "vue-router";
import { useStore } from "/@/store/index.ts";
import { dynamicRoutes } from "/@/router/index.ts";
export default {
name: "layoutColumnsAside",
setup() {
@ -88,7 +85,6 @@ export default {
};
// 设置/过滤路由（非静态路由/是否显示在菜单中）
const setFilterRoutes = () => {
store.dispatch("setRoutes", dynamicRoutes[0].children);
state.columnsAsideList = filterRoutesFun(store.state.routes);
const resData = setSendChildren(route.path);
onColumnsAsideDown(resData.item[0], resData.item[0].k);

2
vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/index.vue
View File

@ -18,7 +18,6 @@ import {
} from "vue";
import { useRoute, onBeforeRouteUpdate } from "vue-router";
import { useStore } from "/@/store/index.ts";
import { dynamicRoutes } from "/@/router/index.ts";
import Breadcrumb from "/@/views/layout/navBars/breadcrumb/breadcrumb.vue";
import User from "/@/views/layout/navBars/breadcrumb/user.vue";
import Logo from "/@/views/layout/logo/index.vue";
@ -55,7 +54,6 @@ export default {
// 设置/过滤路由（非静态路由/是否显示在菜单中）
const setFilterRoutes = () => {
let { layout, isClassicSplitMenu } = store.state.themeConfig;
store.dispatch("setRoutes", dynamicRoutes[0].children);
if (layout === "classic" && isClassicSplitMenu) {
state.menuList = delClassicChildren(
filterRoutesFun(store.state.routes)

17
vue-admin-wonderful-next/src/views/layout/navMenu/horizontal.vue
View File

@ -11,10 +11,16 @@
<SubItem :chil="val.children" />
</el-submenu>
<el-menu-item :index="val.path" :key="val.path" v-else>
<i :class="val.meta.icon ? val.meta.icon : ''"></i>
<template #title
v-if="!val.meta.isLink || val.meta.isLink && val.meta.isIframe">{{ val.meta.title }}</template>
<template #title v-else><a :href="val.meta.isLink" target="_blank">{{ val.meta.title }}</a></template>
<template #title v-if="!val.meta.isLink || val.meta.isLink && val.meta.isIframe">
<i :class="val.meta.icon ? val.meta.icon : ''"></i>
{{ val.meta.title }}
</template>
<template #title v-else>
<a :href="val.meta.isLink" target="_blank">
<i :class="val.meta.icon ? val.meta.icon : ''"></i>
{{ val.meta.title }}
</a>
</template>
</el-menu-item>
</template>
</el-menu>
@ -111,6 +117,9 @@ export default defineComponent({
::v-deep(.el-scrollbar__bar.is-vertical) {
display: none;
}
::v-deep(a) {
width: 100%;
}
.el-menu.el-menu--horizontal {
display: flex;
height: 100%;

9
vue-admin-wonderful-next/src/views/layout/navMenu/subItem.vue
View File

@ -8,11 +8,16 @@
<sub-item :chil="val.children" />
</el-submenu>
<el-menu-item :index="val.path" :key="val.path" v-else>
<i :class="val.meta.icon ? val.meta.icon : ''"></i>
<template v-if="!val.meta.isLink || val.meta.isLink && val.meta.isIframe">
<i :class="val.meta.icon ? val.meta.icon : ''"></i>
<span>{{ val.meta.title }}</span>
</template>
<template v-else><a :href="val.meta.isLink" target="_blank">{{ val.meta.title }}</a></template>
<template v-else>
<a :href="val.meta.isLink" target="_blank">
<i :class="val.meta.icon ? val.meta.icon : ''"></i>
{{ val.meta.title }}
</a>
</template>
</el-menu-item>
</template>
</template>

1
vue-admin-wonderful-next/src/views/layout/routerView/parent.vue
View File

@ -25,7 +25,6 @@ import {
import {
useRoute,
useRouter,
RouteRecordRaw,
onBeforeRouteUpdate,
} from "vue-router";
import { useStore } from "/@/store/index.ts";