epmet-work-pc/src/views/main-sidebar.vue

<template>
  <div>
    <aside :class="['aui-sidebar', 'g-sd']">
      <div class="m-nav">
        <div class="nav">
          <div class="nav-item" @click="toIndexPage">
            <span>全部菜单</span>
          </div>

          <div
            class="nav-item"
            :class="{ 'z-on': menu.id == $store.state.LevelOneMenuActiveName }"
            v-show="menu.showFlag == 1"
            v-for="(menu, idx) in $store.state.sidebarMenuList"
            :key="menu.id"
            @click="gotoRouteHandle(menu.id, idx)"
          >
            <svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true">
              <use :xlink:href="`#${menu.icon}`" />
            </svg>
            <span>{{ menu.name }}</span>
          </div>

          <div class="nav-item" @click="$router.push({ name: 'main-shuju' })">
            <span>可视化</span>
          </div>
        </div>
      </div>

      <div
        class="aui-sidebar_wrap"
        v-show="$store.state.sidebarActiveSubMenuList.length != 0"
      >
        <div class="aui-sidebar__inner">
          <el-menu
            :default-active="$store.state.sidebarMenuActiveName"
            :collapse="$store.state.sidebarFold"
            :unique-opened="true"
            :collapseTransition="false"
            class="aui-sidebar__menu"
          >
            <sub-menu
              v-for="menu in $store.state.sidebarActiveSubMenuList"
              :key="menu.id"
              :menu="menu"
            />
          </el-menu>
        </div>
      </div>
    </aside>
  </div>
</template>

<script>
import SubMenu from "./main-sidebar-sub-menu";

export default {
  data() {
    return {};
  },
  components: {
    SubMenu,
  },
  computed: {
    userType() {
      return localStorage.getItem("userType");
    },
  },
  created() {
    this.$store.state.sidebarMenuList = window.SITE_CONFIG["menuList"];
    console.log(this.$store.state.sidebarMenuList);
  },
  methods: {
    toIndexPage() {
      this.$router.replace("/index");
    },
    // 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
    gotoRouteHandle(menuId, idx) {
      var route = window.SITE_CONFIG["dynamicMenuRoutes"].filter(
        (item) => item.meta.menuId === menuId
      )[0];
      if (route) {
        if (route.meta.iframeURL.endsWith("【跳转新页面】")) {
          return window.open(route.meta.iframeURL.slice(0, -7));
        } else {
          this.$router.push({ name: route.name });
        }
      }
      this.$store.state.LevelOneMenuActiveName = menuId;
      this.$store.state.sidebarActiveSubMenuList =
        this.$store.state.sidebarMenuList[idx].children || [];
      console.log("this.$store.state", this.$store.state);
      console.log("this.$route", this.$route);
    },
  },
};
</script>
<style lang="scss" scoped>
.el-menu--collapse .el-submenu__title span,
.el-menu--collapse .el-menu-item span {
  display: none;
}

.g-sd {
  display: flex;
}

/deep/ .m-nav {
  box-sizing: border-box;
  padding: 25px 0;
  flex-shrink: 0;
  width: 64px;
  min-height: calc(100% - 64px);
  background: #0056d6;
  .nav {
    color: rgba(#ffffff, 0.85);
    .nav-item {
      font-size: 13px;
      text-align: center;
      padding: 11px 0 9px 0;
      cursor: pointer;
      .icon-svg {
        font-size: 18px;
        margin-bottom: 6px;
      }
      span {
        display: block;
      }
      &:hover,
      &.z-on {
        background-color: rgba(#000, 0.1);
        color: rgba(#ffffff, 1);
      }
    }
  }
}
</style>