128 lines
3.3 KiB
Vue
128 lines
3.3 KiB
Vue
<template>
|
|
<el-menu
|
|
class="el-menu-vertical-demo"
|
|
:collapse="!$store.getters.sidebarOpened"
|
|
:default-active="activeMenu"
|
|
:unique-opened="true"
|
|
background-color="rgba(0, 0, 0, 0)"
|
|
:text-color="$store.getters.cssVar.menuText"
|
|
:active-text-color="$store.getters.cssVar.menuActiveText"
|
|
router
|
|
>
|
|
<SideBarItem
|
|
v-for="item in routes"
|
|
:key="item.path"
|
|
:route="item"
|
|
></SideBarItem>
|
|
</el-menu>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from "vue";
|
|
import { useRouter, useRoute } from "vue-router";
|
|
import { useStore } from "vuex";
|
|
import { filterRoutes, generateMenus } from "@/utils/route";
|
|
import { getItem } from "@/utils/storage";
|
|
import SideBarItem from "./SideBarItem.vue";
|
|
const store = useStore();
|
|
const router = useRouter();
|
|
const EXCLUDE_NAMES = [
|
|
"warningLists",
|
|
"behaviorWarnings",
|
|
"identityWarnings",
|
|
"combinedWarnings",
|
|
"DeploymentAreas",
|
|
"mpvPeos",
|
|
"myControls"
|
|
];
|
|
const filterRoutesByMenusPermission = (routes, menusSet) => {
|
|
return routes.reduce((result, route) => {
|
|
const children = Array.isArray(route.children)
|
|
? filterRoutesByMenusPermission(route.children, menusSet)
|
|
: [];
|
|
const routeName = route.name ? `${route.name}` : "";
|
|
const selfMatched = routeName && menusSet.has(routeName);
|
|
if (selfMatched || children.length > 0) {
|
|
result.push({ ...route, children });
|
|
}
|
|
return result;
|
|
}, []);
|
|
};
|
|
const routes = computed(() => {
|
|
const fRoutes = filterRoutes(router.getRoutes());
|
|
const data = fRoutes.filter((item) => !EXCLUDE_NAMES.includes(item.name));
|
|
const menusPermission = getItem("menusPermission");
|
|
console.log(JSON.parse(localStorage.getItem("menusPermission")));
|
|
console.log(
|
|
router.getRoutes().map((r) => ({ name: r.name, path: r.path })),
|
|
"xxx"
|
|
);
|
|
// menusPermission 里存的 name
|
|
router
|
|
.getRoutes()
|
|
.filter((r) => r.path === "/")
|
|
.map((r) => ({
|
|
name: r.name,
|
|
path: r.path,
|
|
children: r.children?.map((c) => ({ name: c.name, path: c.path }))
|
|
}));
|
|
console.log(JSON.parse(localStorage.getItem("menusPermission")));
|
|
const menusSet = new Set(
|
|
Array.isArray(menusPermission)
|
|
? menusPermission.map((item) => `${item}`)
|
|
: []
|
|
);
|
|
console.log(menusSet);
|
|
|
|
const permissionFiltered = menusSet.size
|
|
? filterRoutesByMenusPermission(data, menusSet)
|
|
: data;
|
|
return generateMenus(permissionFiltered);
|
|
});
|
|
if (!store.getters.token) {
|
|
router.push("/login");
|
|
}
|
|
if (router.getRoutes().length <= 7 && store.state.permission.routeReady <= 1) {
|
|
store.commit("user/setIsReady", {});
|
|
setTimeout(() => {
|
|
router.go(0);
|
|
}, 200);
|
|
}
|
|
//默认激活项
|
|
const route = useRoute();
|
|
const activeMenu = computed(() => {
|
|
const { path } = route;
|
|
return path;
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
::v-deep .el-menu-item {
|
|
height: 48px;
|
|
}
|
|
|
|
::v-deep .el-sub-menu__title {
|
|
height: 48px;
|
|
color: rgb(255, 255, 255);
|
|
background-color: rgb(20, 46, 78);
|
|
}
|
|
|
|
::v-deep .el-menu-item.is-active {
|
|
background-image: linear-gradient(to right, #2356d4 0%, #8efbde 100%);
|
|
margin: 0 14px;
|
|
border-radius: 4px;
|
|
// padding-left: 46px !important;
|
|
}
|
|
|
|
::v-deep .el-sub-menu .el-menu-item {
|
|
height: 48px;
|
|
line-height: 48px;
|
|
}
|
|
</style>
|
|
<style>
|
|
.el-menu-vertical-demo:not(.el-menu--collapse) {
|
|
width: 240px;
|
|
min-height: 400px;
|
|
}
|
|
</style>
|