push
This commit is contained in:
xuziqiang
344
lib/paas/view/system/layout/nav-content.vue
Normal file
344
lib/paas/view/system/layout/nav-content.vue
Normal file
@@ -0,0 +1,344 @@
|
||||
<template>
|
||||
<div class="ns-nav-content">
|
||||
<div class="ns-nav">
|
||||
<div class="ns-nav-head">
|
||||
<h4 v-if="!sideMenus.backTo" class="ns-nav-title">{{ sideMenus.title }}</h4>
|
||||
<a-button
|
||||
v-else
|
||||
class="ns-nav-back"
|
||||
type="link"
|
||||
@click="navigation(sideMenus.backTo as any)">
|
||||
<template #icon>
|
||||
<left-outlined />
|
||||
</template>
|
||||
返回
|
||||
</a-button>
|
||||
</div>
|
||||
<a-menu
|
||||
v-model:selectedKeys="selectedKeys"
|
||||
:open-keys="openKeys"
|
||||
class="nav-menu"
|
||||
mode="inline">
|
||||
<template v-for="menu in menus">
|
||||
<a-sub-menu v-if="menu.submenus && menu.ifShow" :key="menu.name">
|
||||
<template #title>{{ menu.label }}</template>
|
||||
<template v-for="subMenu in menu.submenus" :key="subMenu.name">
|
||||
<a-menu-item
|
||||
v-if="subMenu.ifShow"
|
||||
:class="{ 'nav-current': currentRouter(subMenu.url) }">
|
||||
<router-link
|
||||
:class="{ 'nav-sub-current': currentRouter(subMenu.url) }"
|
||||
:to="{ name: subMenu.name }"
|
||||
active-class="nav-sub-current"
|
||||
class="nav-sub-item"
|
||||
@click="navChange()">
|
||||
<span>{{ subMenu.label }}</span>
|
||||
</router-link>
|
||||
</a-menu-item>
|
||||
</template>
|
||||
</a-sub-menu>
|
||||
<a-menu-item
|
||||
v-else
|
||||
:key="menu.name"
|
||||
:class="{ 'nav-current': currentRouter(menu.url) }"
|
||||
v-if="menu.ifShow">
|
||||
<router-link
|
||||
:class="{ 'nav-sub-current': currentRouter(menu.url) }"
|
||||
:to="{ name: menu.name }"
|
||||
active-class="nav-sub-current"
|
||||
class="nav-sub-item"
|
||||
@click="navChange()">
|
||||
<span>{{ menu.label }}</span>
|
||||
</router-link>
|
||||
</a-menu-item>
|
||||
</template>
|
||||
</a-menu>
|
||||
</div>
|
||||
<div class="ns-content">
|
||||
<router-view />
|
||||
</div>
|
||||
</div>
|
||||
<!-- <router-view /> -->
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, ref, unref, watch } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { ModuleRes, SideMenu, SideMenuItem } from '/nerv-lib/paas/store/modules/config-service';
|
||||
import { LeftOutlined } from '@ant-design/icons-vue';
|
||||
import { authorizationService } from '/nerv-lib/paas';
|
||||
import { cloneDeep, isFunction } from 'lodash-es';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'NsNavContent',
|
||||
components: {
|
||||
LeftOutlined,
|
||||
},
|
||||
setup() {
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
if (!route?.meta?.sideMenus) {
|
||||
console.error(route.name, ' has not meta.sideMenus');
|
||||
}
|
||||
const authService = authorizationService();
|
||||
const modulesRes = authService.ModulesRes;
|
||||
const appInfo = cloneDeep(
|
||||
modulesRes.find((item) => item.app === authService.getApp()),
|
||||
) as ModuleRes;
|
||||
// console.log('modulesRes', modulesRes);
|
||||
// console.log('appInfo', appInfo);
|
||||
const menus = ref<any[]>([]);
|
||||
const selectedKeys = ref<any[]>([]);
|
||||
const openKeys = ref<any[]>([]);
|
||||
|
||||
const sideMenus = computed(() => {
|
||||
// console.log(route, 'rou我是te');
|
||||
return cloneDeep(route?.meta?.sideMenus as SideMenu);
|
||||
});
|
||||
|
||||
const menuNameList = computed(() => {
|
||||
return unref(sideMenus).menus.map((item) => item.name);
|
||||
});
|
||||
|
||||
const projectName = computed(() => route.params.projectName as string);
|
||||
const moduleName = computed(() => route.matched[0].name as string);
|
||||
const fullPath = computed(() => route.fullPath);
|
||||
|
||||
const currentRouter = (val: any) => {
|
||||
return unref(fullPath).includes(val);
|
||||
};
|
||||
|
||||
function getMenuItem(name: string): SideMenuItem | undefined {
|
||||
const menu = unref(sideMenus).menus.find((item) => item.name === name);
|
||||
if (
|
||||
menu &&
|
||||
authService.checkPermission(
|
||||
unref(moduleName),
|
||||
menu.name as string,
|
||||
undefined,
|
||||
unref(projectName),
|
||||
)
|
||||
) {
|
||||
if (isFunction(menu.ifShow)) {
|
||||
menu.ifShow = menu.ifShow({ route, authService }) || false;
|
||||
} else {
|
||||
menu.ifShow = true;
|
||||
}
|
||||
return menu;
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
function navChange() {
|
||||
Object.keys(sessionStorage).forEach((key) => {
|
||||
const tableSession = JSON.parse(sessionStorage[key] || '{}');
|
||||
if (
|
||||
tableSession &&
|
||||
tableSession.name &&
|
||||
unref(menuNameList).includes(tableSession.name)
|
||||
) {
|
||||
delete sessionStorage[key];
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function navigation(url: string) {
|
||||
navChange();
|
||||
selectedKeys.value = [];
|
||||
router.push({ name: url });
|
||||
}
|
||||
|
||||
watch(
|
||||
[route, sideMenus],
|
||||
() => {
|
||||
if (unref(sideMenus).root) {
|
||||
const _menus: SideMenuItem[] = [];
|
||||
appInfo?.menus.forEach((item: any) => {
|
||||
const menu = unref(sideMenus).menus.find((item1) => item1.name === item.name);
|
||||
// console.log(menu, 'menu');
|
||||
|
||||
if (item.isDir) {
|
||||
const _item: SideMenuItem = {
|
||||
name: item.name,
|
||||
label: item.label,
|
||||
submenus: [],
|
||||
module: '',
|
||||
url: '',
|
||||
};
|
||||
let open = false;
|
||||
|
||||
item.submenus.forEach((subItem: any) => {
|
||||
const _subItem = getMenuItem(subItem.name);
|
||||
_subItem && _item.submenus && _item.submenus.push(_subItem);
|
||||
if (route.fullPath.includes(subItem.url || subItem.path)) {
|
||||
selectedKeys.value = [subItem.name]; // 通过输入路由匹配到文件夹下的菜单，一开始须手动加入
|
||||
open = true;
|
||||
}
|
||||
});
|
||||
if (open) unref(openKeys).push(item.name);
|
||||
// const {if}
|
||||
if (
|
||||
authService.checkPermission(
|
||||
unref(moduleName),
|
||||
_item.name,
|
||||
undefined,
|
||||
unref(projectName),
|
||||
)
|
||||
) {
|
||||
if (menu && isFunction(menu.ifShow)) {
|
||||
_item.ifShow = menu.ifShow({ route, authService }) || false;
|
||||
} else {
|
||||
_item.ifShow = true;
|
||||
}
|
||||
_menus.push(_item);
|
||||
}
|
||||
} else {
|
||||
const _item = getMenuItem(item.name);
|
||||
!!_item && _menus.push(_item);
|
||||
}
|
||||
});
|
||||
|
||||
menus.value = _menus;
|
||||
} else {
|
||||
const _menus: SideMenuItem[] = [];
|
||||
unref(sideMenus).menus.forEach((menuItem: SideMenuItem) => {
|
||||
const openPermission =
|
||||
authService.checkPermission(
|
||||
menuItem.app || unref(moduleName),
|
||||
menuItem.bindView || menuItem.name,
|
||||
undefined,
|
||||
unref(projectName),
|
||||
) || menuItem.openPermission;
|
||||
const _menusItem = {
|
||||
...menuItem,
|
||||
};
|
||||
if (isFunction(menuItem.ifShow)) {
|
||||
_menusItem.ifShow = menuItem.ifShow({ route, authService }) || false;
|
||||
} else {
|
||||
_menusItem.ifShow = true;
|
||||
}
|
||||
if (openPermission) _menus.push(_menusItem);
|
||||
});
|
||||
menus.value = unref(sideMenus).menus.filter((menuItem: SideMenuItem) => {
|
||||
return (
|
||||
authService.checkPermission(
|
||||
menuItem.app || unref(moduleName),
|
||||
menuItem.bindView || menuItem.name,
|
||||
undefined,
|
||||
unref(projectName),
|
||||
) || menuItem.openPermission
|
||||
);
|
||||
});
|
||||
menus.value = _menus;
|
||||
}
|
||||
if (route.name === unref(sideMenus).name && unref(menus).length > 0) {
|
||||
router.push({ name: unref(menus)[0].name, query: route.query });
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
console.log('route', route);
|
||||
|
||||
return {
|
||||
currentRouter,
|
||||
navChange,
|
||||
navigation,
|
||||
menus,
|
||||
openKeys,
|
||||
selectedKeys,
|
||||
sideMenus,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.ns-nav-content {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
|
||||
.ns-nav {
|
||||
float: left;
|
||||
overflow: auto;
|
||||
width: 150px;
|
||||
min-width: 150px;
|
||||
background: @layout-sider-background !important;
|
||||
background-size: cover;
|
||||
|
||||
.ns-nav-head {
|
||||
padding: 0 16px;
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
:deep(.ant-btn) {
|
||||
padding: 0 !important;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
|
||||
> .anticon + span,
|
||||
.ant-btn > span + .anticon {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.ns-nav-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ns-nav-back {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ns-nav-item {
|
||||
color: #212529;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
|
||||
&:hover {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.ns-nav-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,
|
||||
&:hover {
|
||||
background-color: #fff;
|
||||
|
||||
a {
|
||||
color: @link-color;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&.ant-menu-item-selected::after {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ns-content {
|
||||
width: 100%;
|
||||
min-width: 650px;
|
||||
background-color: #ffffff;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user