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.
279 lines
8.6 KiB
279 lines
8.6 KiB
6 months ago
|
<!-- @format -->
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="ns-left-menu-space" :class="{ 'ns-left-menu-space-collapsed': collapsed }">
|
||
|
|
<a-layout-sider
|
||
|
|
class="ns-left-menu"
|
||
|
|
:width="208"
|
||
|
|
:style="`background-image:url(${sideBgImg})`"
|
||
|
|
:collapsedWidth="48"
|
||
|
|
:collapsed="collapsed"
|
||
|
|
breakpoint="lg"
|
||
|
|
:trigger="null">
|
||
|
|
<a-menu
|
||
|
|
mode="inline"
|
||
|
|
:inlineIndent="16"
|
||
|
|
:openKeys="collapsed ? [] : initSiderOpenKey"
|
||
|
|
:selectedKeys="initSiderKey"
|
||
|
|
v-for="(item, index) in menuList"
|
||
|
|
:key="index">
|
||
|
|
<a-sub-menu
|
||
|
|
v-if="item.type === 'menus' && item.menus && item.menus.length"
|
||
|
|
:key="item.code">
|
||
|
|
<template #title>
|
||
|
|
<span role="img" class="anticon">
|
||
|
|
<i
|
||
|
|
style="margin-right: 5px; transform: translateY(2px); font-size: 14px"
|
||
|
|
v-if="item.icon?.includes('icon-')"
|
||
|
|
:class="`iconfont ${item.icon}`"></i>
|
||
|
|
<ns-icon v-else :name="item.icon ? item.icon : ''" size="16" />
|
||
|
|
</span>
|
||
|
|
<span>{{ item.label }}</span>
|
||
|
|
</template>
|
||
|
|
<!-- 跳转外部链接 -->
|
||
|
|
<!-- <div v-if="item.meta?.isNewOpen">
|
||
|
|
<div
|
||
|
|
v-for="newOpen in item.meta?.itemList ? item.meta?.itemList : []"
|
||
|
|
:key="newOpen.code">
|
||
|
|
<a-menu-item v-if="checkOpAuth(newOpen.code)" :key="newOpen.code">
|
||
|
|
<a
|
||
|
|
:href="newOpen.url ? newOpen.url : newOpen.getUrl ? newOpen.getUrl() : ''"
|
||
|
|
target="_blank"
|
||
|
|
rel="noopener noreferrer">
|
||
|
|
{{ newOpen.name }}
|
||
|
|
</a></a-menu-item
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div> -->
|
||
|
|
<!-- <div v-else> -->
|
||
|
|
<div v-for="sitem in item.menus" :key="sitem.code">
|
||
|
|
<a-menu-item
|
||
|
|
v-if="
|
||
|
|
sitem.type === 'noChildrenMenu' ||
|
||
|
|
(sitem.type === 'menus' && (!sitem.menus || !sitem.menus?.length))
|
||
|
|
"
|
||
|
|
:key="sitem.code">
|
||
|
|
<a @click="goTargetRouter(sitem)">
|
||
|
|
<span style="margin-left: 8px">
|
||
|
|
{{ sitem.label }}
|
||
|
|
</span>
|
||
|
|
</a>
|
||
|
|
</a-menu-item>
|
||
|
|
<a-sub-menu
|
||
|
|
v-if="sitem.type === 'menus' && sitem.menus && sitem.menus.length"
|
||
|
|
:key="sitem.code">
|
||
|
|
<template #title>
|
||
|
|
<span role="img" style="margin-left: 8px" class="anticon" v-show="sitem.icon">
|
||
|
|
<i
|
||
|
|
style="margin-right: 5px; transform: translateY(2px); font-size: 14px"
|
||
|
|
v-if="sitem.icon?.includes('icon-')"
|
||
|
|
:class="`iconfont ${sitem.icon}`"></i>
|
||
|
|
<ns-icon v-else :name="sitem.icon" size="16" />
|
||
|
|
</span>
|
||
|
|
<span>{{ sitem.label }}</span>
|
||
|
|
</template>
|
||
|
|
<a-menu-item v-for="ditem in sitem.menus" :key="ditem.code">
|
||
|
|
<a @click="goTargetRouter(ditem)">
|
||
|
|
<span style="margin-left: 8px">{{ ditem.label }}</span>
|
||
|
|
</a>
|
||
|
|
</a-menu-item>
|
||
|
|
</a-sub-menu>
|
||
|
|
</div>
|
||
|
|
<!-- </div> -->
|
||
|
|
</a-sub-menu>
|
||
|
|
<a-menu-item
|
||
|
|
v-if="
|
||
|
|
item.type === 'noChildrenMenu' ||
|
||
|
|
(item.type === 'menus' && (!item.menus || !item.menus?.length))
|
||
|
|
"
|
||
|
|
:class="initSiderKey.includes(item.code) ? 'firstMenuItem-selected' : ''"
|
||
|
|
:key="item.code">
|
||
|
|
<a @click="goTargetRouter(item)">
|
||
|
|
<span role="img" class="anticon" v-show="item.icon">
|
||
|
|
<i
|
||
|
|
style="margin-right: 5px; transform: translateY(2px); font-size: 14px"
|
||
|
|
v-if="item.icon?.includes('icon-')"
|
||
|
|
:class="`iconfont ${item.icon}`"></i>
|
||
|
|
<ns-icon v-else :name="item.icon ? item.icon : ''" size="16" />
|
||
|
|
</span>
|
||
|
|
<span>{{ item.label }}</span>
|
||
|
|
</a>
|
||
|
|
</a-menu-item>
|
||
|
|
</a-menu>
|
||
|
|
<div class="ns-left-menu-trigger" @click="leftMenuTrigger">
|
||
|
|
<menu-unfold-outlined v-if="collapsed" class="trigger" />
|
||
|
|
<menu-fold-outlined v-else class="trigger" />
|
||
|
|
</div>
|
||
|
|
</a-layout-sider>
|
||
|
|
<div class="ns-left-menu-trigger" @click="leftMenuTrigger">
|
||
|
|
<ns-icon name="trigger" class="trigger" size="22" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
|
||
|
|
import { defineComponent, inject, ref, watchEffect, computed } from 'vue';
|
||
|
|
import { Emitter } from 'mitt';
|
||
|
|
import { useRouter } from 'vue-router';
|
||
|
|
import { appConfigStore } from '/nerv-lib/saas/store/modules/app-config';
|
||
|
|
import { emitEvents } from '/nerv-base/view/system/application.d';
|
||
|
|
import { storeToRefs } from 'pinia';
|
||
|
|
export default defineComponent({
|
||
|
|
name: 'CustomSider',
|
||
|
|
components: {
|
||
|
|
MenuUnfoldOutlined,
|
||
|
|
MenuFoldOutlined,
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
menuList: { type: Array },
|
||
|
|
initSiderKey: { type: Array },
|
||
|
|
initSiderOpenKey: { type: Array },
|
||
|
|
},
|
||
|
|
setup: (props) => {
|
||
|
|
const mittEmit = inject('mittEmit') as Emitter<emitEvents>;
|
||
|
|
const configStore = appConfigStore();
|
||
|
|
const { getThemeConfig: themeConfig } = storeToRefs(configStore);
|
||
|
|
const router = useRouter();
|
||
|
|
const dealRouter = (menuList, routerInfo) => {
|
||
|
|
menuList?.forEach((item) => {
|
||
|
|
if (item.name === routerInfo.name) {
|
||
|
|
const redirectItem = item.children?.filter((x) => !x.isHide)[0];
|
||
|
|
if (redirectItem) {
|
||
|
|
router.push({ name: redirectItem.name });
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
if (item.children?.length) {
|
||
|
|
dealRouter(item.children, routerInfo);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
const sideBgImg = computed(() => {
|
||
|
|
if (themeConfig.sideUrl) {
|
||
|
|
return themeConfig.sideUrl;
|
||
|
|
} else {
|
||
|
|
return `${import.meta.env.VITE_PUBLIC_PATH}asset/image/side.png`;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const goTargetRouter = (menu: object) => {
|
||
|
|
let code = menu.code;
|
||
|
|
if (configStore.resourceName) {
|
||
|
|
code = code.toString().replace(configStore.resourceName, '');
|
||
|
|
}
|
||
|
|
let toName = code;
|
||
|
|
if (menu.type === 'noChildrenMenu' && menu.menus && menu.menus.length) {
|
||
|
|
toName = `${code}Index`;
|
||
|
|
}
|
||
|
|
router.push({
|
||
|
|
name: toName,
|
||
|
|
});
|
||
|
|
};
|
||
|
|
watchEffect(() => {
|
||
|
|
if (!router.currentRoute.value.redirectedFrom) {
|
||
|
|
dealRouter(props.menuList, router.currentRoute.value);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const collapsed = ref<boolean>(false);
|
||
|
|
const leftMenuTrigger = () => {
|
||
|
|
collapsed.value = !collapsed.value;
|
||
|
|
mittEmit.emit('leftMenuTrigger', collapsed.value);
|
||
|
|
};
|
||
|
|
return {
|
||
|
|
sideBgImg,
|
||
|
|
themeConfig,
|
||
|
|
goTargetRouter,
|
||
|
|
leftMenuTrigger,
|
||
|
|
collapsed,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.ns-left-menu {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
height: 100%;
|
||
|
|
background-color: @white;
|
||
|
|
padding-top: 48px;
|
||
|
|
:deep(::-webkit-scrollbar) {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
#iframeApplication .ns-left-menu {
|
||
|
|
padding-top: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ant-menu-submenu-title .anticon + span {
|
||
|
|
margin-left: 8px !important;
|
||
|
|
}
|
||
|
|
.ns-left-menu-space {
|
||
|
|
width: 208px;
|
||
|
|
height: 100%;
|
||
|
|
background-color: #fff;
|
||
|
|
overflow: hidden;
|
||
|
|
transition: all 0.2s;
|
||
|
|
flex: 0 0 208px;
|
||
|
|
&.ns-left-menu-space-collapsed {
|
||
|
|
width: 48px;
|
||
|
|
flex: 0 0 48px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.ns-left-menu-space-collapsed {
|
||
|
|
.ns-left-menu-trigger {
|
||
|
|
width: 48px !important;
|
||
|
|
justify-content: center;
|
||
|
|
padding-left: 0px;
|
||
|
|
}
|
||
|
|
.trigger {
|
||
|
|
padding: 0;
|
||
|
|
transform: rotate(180deg);
|
||
|
|
// transform: rotateX('90deg');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.ns-left-menu-trigger {
|
||
|
|
width: 208px;
|
||
|
|
height: 40px;
|
||
|
|
transition: all 0.2s;
|
||
|
|
border-top: 1px solid rgba(0, 0, 0, 0.06);
|
||
|
|
position: absolute;
|
||
|
|
z-index: 999;
|
||
|
|
cursor: pointer;
|
||
|
|
background: #163361;
|
||
|
|
bottom: 0px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: left;
|
||
|
|
padding-left: 24px;
|
||
|
|
|
||
|
|
// justify-content: center;
|
||
|
|
&:hover {
|
||
|
|
.trigger {
|
||
|
|
color: @primary-color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.trigger {
|
||
|
|
font-size: 18px;
|
||
|
|
line-height: 64px;
|
||
|
|
transform: rotate(0deg);
|
||
|
|
transition: color 0.3s;
|
||
|
|
}
|
||
|
|
.ant-menu-submenu-selected > .ant-menu-submenu-title > .ant-menu-submenu-expand-icon,
|
||
|
|
.ant-menu-submenu-selected > .ant-menu-submenu-title > .ant-menu-submenu-arrow {
|
||
|
|
color: red !important;
|
||
|
|
}
|
||
|
|
.ant-menu-submenu-selected .secendIcon {
|
||
|
|
color: @primary-color !important;
|
||
|
|
}
|
||
|
|
.ant-menu-inline,
|
||
|
|
.ant-menu-vertical,
|
||
|
|
.ant-menu-vertical-left {
|
||
|
|
border: unset;
|
||
|
|
}
|
||
|
|
</style>
|