lcw

src/layout/components/SideBar/SideBarMenu copy 2.vue

@@ -0,0 +1,83 @@
+<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");
+  const menusSet = new Set(Array.isArray(menusPermission) ? menusPermission.map((item) => `${item}`) : []);
+  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>

src/layout/components/SideBar/SideBarMenu copy.vue

@@ -0,0 +1,81 @@
+<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 SideBarItem from "./SideBarItem.vue";
+const store = useStore();
+const router = useRouter();
+const routes = computed(() => {
+  const fRoutes = filterRoutes(router.getRoutes());
+
+  const data = fRoutes.filter(item => {
+    if (item.name != "warningLists"
+      && item.name != "behaviorWarnings"
+      && item.name != "identityWarnings"
+      && item.name != "combinedWarnings"
+      && item.name != "DeploymentAreas"
+      && item.name != "mpvPeos"
+      && item.name != "myControls") {
+      return item;
+    }
+  }
+  )
+  console.log(data);
+
+  return generateMenus(data);
+});
+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>

src/layout/components/SideBar/SideBarMenu.vue

@@ -16,6 +16,7 @@ const store = useStore();
 const router = useRouter();
 const routes = computed(() => {
   const fRoutes = filterRoutes(router.getRoutes());
+
   const data = fRoutes.filter(item => {
     if (item.name != "warningLists"
       && item.name != "behaviorWarnings"
@@ -28,6 +29,8 @@ const routes = computed(() => {
     }
   }
   )
+  console.log(data);
+
   return generateMenus(data);
 });
 if (!store.getters.token) {