dy-admin-manager/src/layout/components/Sidebar/index.vue

<template>
  <div :class="{ 'has-logo': showLogo }">
    <!-- <logo v-if="showLogo"
          :collapse="false" /> -->
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <!--    -->
      <el-menu
        :default-active="activeMenu"
        :collapse="false"
        :background-color="variables.menuBg"
        :text-color="variables.menuText"
        :unique-opened="true"
        :active-text-color="variables.menuActiveText2"
        :collapse-transition="true"
        mode="vertical"
      >
        <template v-for="route in permission_routes">
          <template v-if="!route.hidden">
            <!-- <sidebar-item  v-for="route2 in route.children" :key="route.path + '/' + route2.path" :item="route2" :base-path="route.path" :resolve-path="route.path" :active-top-menu="getTopMenuActive" /> -->
            <!-- <sidebar-menu-item v-for="route2 in route.children" :key="route.path + '/' + route2.path" :routes="route2" :base-path="route.path" :resolve-path="route.path" :active-top-menu="getTopMenuActive"/> -->
            <sidebar-item
              v-for="route2 in route.children"
              :key="route2.id"
              :item="route2"
              :active-top-menu="getTopMenuActive"
              :base-path="route2.path"
            />
          </template>
        </template>
        <!-- <sidebar-item v-for="(route,index) in permission_routes"
                      :key="index"
                      :item="route"
                      :base-path="route.path" /> -->
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import Logo from "./Logo";
import SidebarMenuItem from "./SidebarMenuItem";
import SidebarItem from "./SidebarItem";
import variables from "@/styles/variables.scss";
import {
  getBelongTopMenuPath,
  getActiveSidebarMenuPath,
} from "@/utils/permission";
export default {
  components: { SidebarItem, Logo, SidebarMenuItem },
  // mounted () {
  // },
  computed: {
    ...mapGetters(["sidebar", "permission_routes"]),
    // routes () {
    //   return this.$router.options.routes
    // },
    activeMenu() {
      const route = this.$route;
      const { meta, path } = route;
      // if set path, the sidebar will highlight the path you set
      // 设置高亮的位置
      if (meta.activeMenu) {
        return meta.activeMenu;
      }
      //  (meta, path)
      return path;
    },
    showLogo() {
      return this.$store.state.settings.sidebarLogo;
    },
    variables() {
      return variables;
    },
    isCollapse() {
      return false;
    },
    getSidebarMenuActive: function () {
      const route = this.$route;
      return getActiveSidebarMenuPath(route);
    },
    getTopMenuActive() {
      let route = this.$route;
      //  (getBelongTopMenuPath(route))
      return getBelongTopMenuPath(route);
    },
  },
  mounted() {
    //  (this.permission_routes)
    this.menuIsShow(this.$route);
  },
  watch: {
    $route() {
      this.menuIsShow(this.$route);
    },
  },
  methods: {
    menuIsShow(route) {
      let activeTopMenu;
      const { meta } = route;
      if (meta.belongTopMenu) {
        activeTopMenu = meta.belongTopMenu;
      }
      let permissions = this.permission_routes || [];
      let childList = [];
      permissions.forEach((item) => {
        if (item.path == activeTopMenu) {
           ('childList',item)
          childList = item;
        }
      });
      //  (childList.children)
      let index = this.menuOperation(childList.children);

      //重写逻辑
      let status = index > 0 ? true : false;
      let routeParentName = sessionStorage.getItem("routeParentName");
      let params = {
        status: status,
      };
      if (routeParentName != meta.belongTopMenu) {
        params.isCollapse = true;
        sessionStorage.setItem("routeParentName", meta.belongTopMenu);
      }

      this.$emit("childStatus", params);
    },
    menuOperation(arr) {
      let index = 0;
      if (arr?.length > 0) {
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].hidden) {
            continue;
          }
          //  (arr[i]);
          if (arr[i].children?.length > 0) {
            let isChildrenList = false;
            arr[i].children.forEach((ii) => {
              if (!ii.hidden) {
                isChildrenList = true;
              }
            });
            if (isChildrenList) {
              index = this.menuOperation(arr[i].children);
            }else{
              index = 1
            }
          } else {
            index++;
          }
        }
      }

      return index;
    },
  },
};
</script>
<style lang="scss" scoped>
.el-menu-item {
  &:nth-last-child(1) {
    padding-bottom: 20px;
  }
}

/deep/.el-submenu__title,
/deep/.el-menu-item {
  font-size: 14px;
}

// /deep/.el-menu-item.is-active {
//   font-weight: bold;
//   background-color: #eef4f4 !important;
//   color: var(--color-primary) !important;
//   position: relative;
//   &::after {
//     position: absolute;
//     top: 0;
//     right: 0;
//     content: " ";
//     width: 6px;
//     background-color: var(--color-primary);
//     display: block;
//     height: 100%;
//   }
// }
// /deep/.el-submenu .el-menu-item.is-active {
//   color: var(--color-primary) !important;
// }
/deep/.el-menu .menu-wrapper .el-menu-item {
  color: #666666;
}
/deep/.el-menu-item,
/deep/.el-submenu__title {
  height: 56px !important;
  line-height: 56px !important;
}
/deep/.el-submenu .el-menu-item {
  color: #666666 !important;
}
/deep/.el-submenu__icon-arrow {
  font-size: 14px;
}
</style>