sgxt_web/src/layout/components/SideBar/SideBarMenu.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>