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" v-if="false">
            <span>全部菜单</span>
          </div>
          <div
            class="nav-item"
            :class="{ 'z-on': $store.state.LevelOneMenuActiveName == '' }"
            @click="toIndexPage"
          >
            <svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true">
              <use xlink:href="#icon-desktop" />
            </svg>
            <span>首页</span>
          </div>
          <div
            class="nav-item"
            :class="{ 'z-on': menu.id == $store.state.LevelOneMenuActiveName }"
            v-show="menu.showFlag == 1 && menu.name != '社区一张表' && menu.name != 'AI小助手' " 
            v-for="(menu, idx) in $store.state.sidebarMenuList"
            :key="menu.id"
            @click="gotoRouteHandle(menu.id, idx)"
          >
            <svg
              v-if="menu.icon"
              class="icon-svg aui-sidebar__menu-icon"
              aria-hidden="true"
            >
              <use :xlink:href="`#${menu.icon}`" />
            </svg>
          <span>{{ menu.name }} </span>
          </div>
          <!-- <div class="nav-div"></div> -->
          <!-- <div class="nav-item" @click="$router.push({ name: 'dataBoard' })">
            <svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true">
              <use xlink:href="#icon-stock" />
            </svg>
            <span>可视化</span>
          </div> -->
          <!-- <div class="nav-item" @click="$router.push({ name: 'main-shuju' })">
            <svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true">
              <use xlink:href="#icon-stock" />
            </svg>
            <span>可视化旧</span>
          </div> -->
        </div>
      </div>
      <div
        class="m-folder"
        v-show="$store.state.sidebarActiveSubMenuList.length != 0"
        @click="$store.state.sidebarFold = !$store.state.sidebarFold"
      >
        <img
          v-show="!$store.state.sidebarFold"
          class="z-normal"
          src="~@/assets/images/main/fold.png"
        />
        <img
          v-show="!$store.state.sidebarFold"
          class="z-on"
          src="~@/assets/images/main/fold-on.png"
        />
        <img
          v-show="$store.state.sidebarFold"
          class="z-normal"
          src="~@/assets/images/main/unfold.png"
        />
        <img
          v-show="$store.state.sidebarFold"
          class="z-on"
          src="~@/assets/images/main/unfold-on.png"
        />
      </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"];
  },
  methods: {
    toIndexPage() {
      this.$router.push({ name: "home" });
      // 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.sidebarMenuList[idx].children || [];
        const { sidebarMenuList } = this.$store.state;
        const firstChild = sidebarMenuList[idx].children[0];
        const id = firstChild.children.length === 0 ? firstChild.id : firstChild.children[0].id;
        this.$store.state.LevelTowMenuActiveName = id;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "~@/assets/scss/c/function.scss";
.el-menu--collapse .el-submenu__title span,
.el-menu--collapse .el-menu-item span {
  display: none;
}
.g-sd {
  display: flex;
}
/deep/ .m-folder {
  position: absolute;
  z-index: 100;
  top: 50px;
  right: -16px;
  width: 32px;
  height: 32px;
  background: #ffffff;
  box-shadow: 0px 5px 12px 4px rgba(0, 0, 0, 0.09),
    0px 3px 6px 0px rgba(0, 0, 0, 0.12), 0px 1px 2px -2px rgba(0, 0, 0, 0.16);
  line-height: 32px;
  font-size: 18px;
  text-align: center;
  color: #666;
  border-radius: 100%;
  overflow: hidden;
  cursor: pointer;
  &:hover {
    .z-on {
      display: block;
    }
    .z-normal {
      display: none;
    }
  }
  .z-on {
    display: none;
  }
  .z-normal {
    display: block;
  }
  img {
    position: absolute;
    display: block;
    width: 16px;
    height: 16px;
    @include hub;
  }
}
/deep/ .m-nav {
  box-sizing: border-box;
  padding: 25px 0;
  flex-shrink: 0;
  width: 64px;
  height: 100%;
  background: #0056d6;
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 1px;
  }
  .nav {
    color: rgba(#ffffff, 0.85);
    .nav-div {
      margin: 20px auto;
      width: 28px;
      height: 1px;
      background: #ffffff;
      border-radius: 1px;
      opacity: 0.45;
    }
    .nav-item {
      font-size: 13px;
      text-align: center;
      padding: 11px 0 9px 0;
      cursor: pointer;
      .icon-svg {
        margin: 0 auto;
        font-size: 24px;
        width: 20px !important;
      }
      span {
        display: block;
        line-height: 30px;
      }
      &:hover,
      &.z-on {
        background-color: rgba(#000, 0.1);
        color: rgba(#ffffff, 1);
      }
    }
  }
}
</style>