You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
404 lines
12 KiB
404 lines
12 KiB
4 months ago
|
<!-- @format -->
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="nav-side" :key="'navSide_' + $route.name">
|
||
|
|
<div class="nav-sub" v-show="isShow && (showLayout || backTo)">
|
||
|
|
<ul style="margin: 0">
|
||
|
|
<li v-show="!backTo"
|
||
|
|
><span class="nav-sub-head ng-scope" translate="COMPANY">{{ title }}</span></li
|
||
|
|
>
|
||
|
|
<li v-show="backTo">
|
||
|
|
<span
|
||
|
|
class="nav-sub-head h5 ng-scope nav-sub-head-back"
|
||
|
|
style="box-sizing: border-box; cursor: pointer"
|
||
|
|
@click="navigation(backTo)">
|
||
|
|
<i class="iconfont"></i>
|
||
|
|
<span>返回</span>
|
||
|
|
</span>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- {{ menus }} -->
|
||
|
|
<a-menu
|
||
|
|
mode="inline"
|
||
|
|
class="nav-menu"
|
||
|
|
:open-keys="openKeys"
|
||
|
|
v-model:selectedKeys="selectedKeys">
|
||
|
|
<template v-for="menu in menus">
|
||
|
|
<a-sub-menu v-if="menu.submenus" :key="menu.name">
|
||
|
|
<template #title>{{ menu.label }}</template>
|
||
|
|
<a-menu-item
|
||
|
|
v-for="subMenu in menu.submenus"
|
||
|
|
:key="subMenu.name"
|
||
|
|
:class="{ 'nav-current': fullPath.indexOf(subMenu.url) != -1 }">
|
||
|
|
<router-link
|
||
|
|
class="nav-sub-item"
|
||
|
|
active-class="nav-sub-current"
|
||
|
|
:class="{ 'nav-sub-current': fullPath.indexOf(subMenu.url) != -1 }"
|
||
|
|
:to="{ name: subMenu.name }"
|
||
|
|
@click="navChange(subMenu)">
|
||
|
|
<span>{{ subMenu.label }}</span>
|
||
|
|
</router-link>
|
||
|
|
</a-menu-item>
|
||
|
|
</a-sub-menu>
|
||
|
|
<a-menu-item
|
||
|
|
v-else
|
||
|
|
:key="menu.name"
|
||
|
|
:class="{ 'nav-current': fullPath.indexOf(`${menu.url}`) != -1 }">
|
||
|
|
<router-link
|
||
|
|
class="nav-sub-item"
|
||
|
|
active-class="nav-sub-current"
|
||
|
|
:class="{ 'nav-sub-current': dealRouter(`${menu.url}`) }"
|
||
|
|
@click="navChange(menu)"
|
||
|
|
:to="{ name: menu.name }">
|
||
|
|
<span>{{ menu.label }}</span>
|
||
|
|
</router-link>
|
||
|
|
</a-menu-item>
|
||
|
|
</template>
|
||
|
|
</a-menu>
|
||
|
|
</div>
|
||
|
|
<div class="content-main">
|
||
|
|
<router-view />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script lang="ts">
|
||
|
|
import { SideMenu, configRegist } from '/nerv-lib/paas/store/modules/config-service';
|
||
|
|
import { computed, defineComponent, inject, reactive, ref, toRefs } from 'vue';
|
||
|
|
// import { storeToRefs, mapWritableState } from 'pinia';
|
||
|
|
import { useRoute, useRouter } from 'vue-router';
|
||
|
|
import { authorizationService } from '/nerv-lib/paas/store/modules/authorization-service';
|
||
|
|
import { cloneDeep } from 'lodash-es';
|
||
|
|
|
||
|
|
export default defineComponent({
|
||
|
|
name: 'SideNav',
|
||
|
|
components: {},
|
||
|
|
setup() {
|
||
|
|
const configReg = configRegist();
|
||
|
|
const router = useRouter();
|
||
|
|
const route = useRoute();
|
||
|
|
const menus = ref<Array<any>>([]);
|
||
|
|
const backTo = ref<String>('');
|
||
|
|
let backToHandle = ref<Function>;
|
||
|
|
const isThreeSider = ref(false);
|
||
|
|
const state = reactive({
|
||
|
|
selectedKeys: [],
|
||
|
|
});
|
||
|
|
const showLayout = inject('showLayout', true);
|
||
|
|
const dealRouter = (val: any) => {
|
||
|
|
return router.currentRoute.value.fullPath.indexOf(val) !== -1;
|
||
|
|
};
|
||
|
|
|
||
|
|
const menuNameList = computed(() => {
|
||
|
|
const { sideMenus } = route?.meta || {};
|
||
|
|
return sideMenus.menus.map((item) => item.name);
|
||
|
|
});
|
||
|
|
|
||
|
|
function navChange(url: string) {
|
||
|
|
Object.keys(sessionStorage).forEach((key) => {
|
||
|
|
const tableSession = JSON.parse(sessionStorage[key] || '{}');
|
||
|
|
if (tableSession && tableSession.name && menuNameList.value.includes(tableSession.name)) {
|
||
|
|
delete sessionStorage[key];
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
return {
|
||
|
|
dealRouter,
|
||
|
|
menus,
|
||
|
|
backTo,
|
||
|
|
router,
|
||
|
|
isThreeSider,
|
||
|
|
configReg,
|
||
|
|
...toRefs(state),
|
||
|
|
navChange,
|
||
|
|
showLayout,
|
||
|
|
backToHandle,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
data(): {
|
||
|
|
title: string;
|
||
|
|
// menus: Array<any>;
|
||
|
|
isShow: boolean;
|
||
|
|
//backTo: string;
|
||
|
|
currName: string;
|
||
|
|
fullPath: string;
|
||
|
|
openKeys: string[];
|
||
|
|
} {
|
||
|
|
return {
|
||
|
|
title: '',
|
||
|
|
// menus: [],
|
||
|
|
isShow: true,
|
||
|
|
//backTo: '', //是否需要返回按钮
|
||
|
|
currName: '', //标记自己当前的路由配置取值key
|
||
|
|
fullPath: '', //当前激活路由的url
|
||
|
|
openKeys: [],
|
||
|
|
};
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
router: {
|
||
|
|
handler() {
|
||
|
|
this.initSider();
|
||
|
|
},
|
||
|
|
deep: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
mounted() {
|
||
|
|
this.initSider();
|
||
|
|
},
|
||
|
|
unmounted() {
|
||
|
|
this.configReg.removeUrl(this.currName);
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
initSider() {
|
||
|
|
if (this.$route.meta.sideMenus) {
|
||
|
|
const authService = authorizationService();
|
||
|
|
|
||
|
|
const modulesRes = authService.ModulesRes;
|
||
|
|
|
||
|
|
const appInfo = cloneDeep(modulesRes.find((item) => item.app === authService.getApp()));
|
||
|
|
const moduleName = this.$route.matched[0].name as string;
|
||
|
|
|
||
|
|
const sideMenus = cloneDeep(this.$route.meta.sideMenus as SideMenu);
|
||
|
|
|
||
|
|
const name = this.$route.name;
|
||
|
|
|
||
|
|
this.fullPath = this.$route.fullPath;
|
||
|
|
this.title = sideMenus.title as string;
|
||
|
|
this.backTo = sideMenus.backTo || '';
|
||
|
|
this.backToHandle = sideMenus?.backToHandle;
|
||
|
|
this.menus = [];
|
||
|
|
this.openKeys = [];
|
||
|
|
const { projectName } = this.$route.params;
|
||
|
|
function getMenuItem(name: string) {
|
||
|
|
console.log('---', name);
|
||
|
|
const menu = sideMenus.menus.find((item) => item.name === name);
|
||
|
|
|
||
|
|
if (
|
||
|
|
menu &&
|
||
|
|
authService.checkPermission(
|
||
|
|
moduleName,
|
||
|
|
menu.name as string,
|
||
|
|
undefined,
|
||
|
|
projectName as string,
|
||
|
|
)
|
||
|
|
) {
|
||
|
|
return menu;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function getMenuItemcustom(record: object, name: string) {
|
||
|
|
const menu = sideMenus.menus.find((item) => item.name === name);
|
||
|
|
if (
|
||
|
|
menu &&
|
||
|
|
authService.checkPermission(
|
||
|
|
record.useOtherAuthority.app,
|
||
|
|
(record.useOtherAuthority.bindView
|
||
|
|
? record.useOtherAuthority.bindView
|
||
|
|
: menu.name) as string,
|
||
|
|
undefined,
|
||
|
|
projectName as string,
|
||
|
|
)
|
||
|
|
) {
|
||
|
|
return menu;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (sideMenus.root) {
|
||
|
|
this.selectedKeys = [];
|
||
|
|
|
||
|
|
appInfo?.menus?.forEach((item: Recordable) => {
|
||
|
|
if (item.isDir) {
|
||
|
|
const _item = {
|
||
|
|
name: item.name,
|
||
|
|
label: item.label,
|
||
|
|
submenus: [],
|
||
|
|
};
|
||
|
|
let open = false;
|
||
|
|
//处理 模块受其他项目权限控制的情况
|
||
|
|
if (item.useOtherAuthority) {
|
||
|
|
item.submenus.forEach((subItem) => {
|
||
|
|
const _subItem = getMenuItemcustom(item, subItem.name);
|
||
|
|
!!_subItem && _item.submenus.push(_subItem);
|
||
|
|
if (this.fullPath.includes(subItem.url ? subItem.url : subItem.path)) {
|
||
|
|
this.selectedKeys = [subItem.name]; // 通过输入路由匹配到文件夹下的菜单，一开始须手动加入
|
||
|
|
open = true;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
item.submenus.forEach((subItem) => {
|
||
|
|
const _subItem = getMenuItem(subItem.name);
|
||
|
|
!!_subItem && _item.submenus.push(_subItem);
|
||
|
|
if (this.fullPath.includes(subItem.url ? subItem.url : subItem.path)) {
|
||
|
|
this.selectedKeys = [subItem.name]; // 通过输入路由匹配到文件夹下的菜单，一开始须手动加入
|
||
|
|
open = true;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// if(item.submenus.length===0){
|
||
|
|
|
||
|
|
// }
|
||
|
|
if (open) this.openKeys.push(item.name);
|
||
|
|
console.log('_item1', _item);
|
||
|
|
if (_item.submenus && _item.submenus.length !== 0) {
|
||
|
|
this.menus.push(_item);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
//如果存在isGlobal
|
||
|
|
if (item.isGlobal) {
|
||
|
|
let globalList = [];
|
||
|
|
sideMenus.menus.forEach((subItem) => {
|
||
|
|
if (subItem.app === item.name) {
|
||
|
|
globalList.push(subItem);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
globalList.forEach((global) => {
|
||
|
|
const _item = authService.checkPermission(
|
||
|
|
item.name,
|
||
|
|
global.name,
|
||
|
|
undefined,
|
||
|
|
projectName as string,
|
||
|
|
);
|
||
|
|
!!_item && this.menus.push(global);
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
if (item.useOtherAuthority) {
|
||
|
|
const _item = getMenuItemcustom(item, item.name);
|
||
|
|
!!_item && this.menus.push(_item);
|
||
|
|
} else {
|
||
|
|
const _item = getMenuItem(item.name);
|
||
|
|
!!_item && this.menus.push(_item);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
this.menus = sideMenus.menus.filter((menu) => {
|
||
|
|
return (
|
||
|
|
authService.checkPermission(
|
||
|
|
menu.app ? menu.app : moduleName,
|
||
|
|
menu.bindView ? menu.bindView : (menu.name as string),
|
||
|
|
undefined,
|
||
|
|
projectName as string,
|
||
|
|
) || menu.openPermission
|
||
|
|
);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
console.log('--------', this.menus);
|
||
|
|
|
||
|
|
this.isShow = true;
|
||
|
|
if (name === sideMenus.name && this.menus.length > 0) {
|
||
|
|
this.$router.push({ name: this.menus[0].name });
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
navigation(url: string) {
|
||
|
|
if (this.backToHandle && Function(this.backToHandle)) {
|
||
|
|
this.backToHandle();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
//this.navChange(url);
|
||
|
|
|
||
|
|
this.$router.push({ name: url });
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.nav-side {
|
||
|
|
display: flex;
|
||
|
|
height: 100%;
|
||
|
|
|
||
|
|
.nav-sub {
|
||
|
|
float: left;
|
||
|
|
// height: 100%;
|
||
|
|
overflow: auto;
|
||
|
|
width: 149px;
|
||
|
|
min-width: 149px;
|
||
|
|
background: @layout-sider-background !important;
|
||
|
|
background-size: cover;
|
||
|
|
|
||
|
|
.nav-sub-head {
|
||
|
|
padding-left: 16px;
|
||
|
|
padding-right: 16px;
|
||
|
|
display: inline-block;
|
||
|
|
box-sizing: border-box;
|
||
|
|
width: 100%;
|
||
|
|
font-weight: 700;
|
||
|
|
height: 56px;
|
||
|
|
line-height: 56px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-sub-head-back {
|
||
|
|
.iconfont {
|
||
|
|
color: #00acff !important;
|
||
|
|
display: inline-block;
|
||
|
|
transform: scale(0.7);
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
span {
|
||
|
|
color: #00acff !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-sub-item {
|
||
|
|
color: #212529;
|
||
|
|
display: inline-block;
|
||
|
|
box-sizing: border-box;
|
||
|
|
width: 100%;
|
||
|
|
height: 48px;
|
||
|
|
line-height: 48px;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-sub-current {
|
||
|
|
background-color: #fff !important;
|
||
|
|
color: @link-color !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
:deep(.ant-menu) {
|
||
|
|
background-color: unset;
|
||
|
|
.ant-menu-item {
|
||
|
|
background-color: unset;
|
||
|
|
margin-top: 0;
|
||
|
|
|
||
|
|
&.nav-current {
|
||
|
|
background-color: #fff;
|
||
|
|
color: #00acff;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background-color: #fff;
|
||
|
|
color: #00acff;
|
||
|
|
}
|
||
|
|
|
||
|
|
&::after {
|
||
|
|
border-right: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.ant-menu-item-selected::after {
|
||
|
|
border-right: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.content-main {
|
||
|
|
// width: calc(100% - 149px);
|
||
|
|
width: 100%;
|
||
|
|
min-width: 650px;
|
||
|
|
background-color: #ffffff;
|
||
|
|
overflow: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
ul,
|
||
|
|
li {
|
||
|
|
list-style: none;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
</style>
|