baoman / Ezquiz_Platform

<template>
  <div class="aside-box">
    <el-aside id="asideNav">
      <div class="logo-name">
        <img
          v-if="$store.getters.logoShow"
          class="logo"
          :src="code ? csLogo : logo"
          alt=""
        />
        <template v-else>
          <img class="logo" :src="code ? csLogo : logo" alt="" />
          <p class="ellipsis">
            {{ code ? "331互动课堂云平台" : "中天易教云平台" }}
          </p>
        </template>
      </div>
      <el-menu
        :default-active="$route.path"
        class="el-menu-vertical"
        @select="selectmenu"
        :collapse="$store.getters.isCollapse"
        background-color="#333752"
        text-color="rgba(255,255,255,.7)"
        active-text-color="#ffffff"
        :router="$store.getters.uniquerouter"
        :unique-opened="$store.getters.uniquerouter"
        :collapse-transition="true"
      >
        <template v-for="(item, index) in $store.getters.routers">
          <template v-if="!item.hidden">
            <template v-if="!item.alone && item.children.length > 0">
              <el-menu-item-group :class="'el-menu-item'">
                <template slot="title">
                  <i
                    v-if="item.iconCls"
                    :class="item.iconCls ? item.iconCls : [fa, fa - file]"
                  />
                  <template v-else-if="item.iconImage">
                    <el-image
                      v-show="$route.path == item.path"
                      :src="item.selectedIconImage"
                    ></el-image>
                    <el-image
                      v-show="$route.path != item.path"
                      :src="item.iconImage"
                    ></el-image>
                  </template>
                  <span slot="title">{{ item.name }}</span>
                </template>
              </el-menu-item-group>
              <menu-tree
                :class="'el-menu-item-group-item'"
                :menuData="item.children"
                :path="path"
              ></menu-tree>
            </template>
            <template v-else>
              <el-menu-item
                :index="item.path"
                :key="index"
                :class="
                  path.includes(item.path)
                    ? 'is-active'
                    : ''
                "
                @click="isKeep(item.path)"
              >
                <i
                  v-if="item.iconCls"
                  :class="item.iconCls ? item.iconCls : [fa, fa - file]"
                />
                <template v-else-if="item.iconImage">
                  <el-image
                    v-show="$route.path == item.path"
                    :src="item.selectedIconImage"
                  ></el-image>
                  <el-image
                    v-show="$route.path != item.path"
                    :src="item.iconImage"
                  ></el-image>
                </template>
                <span slot="title">{{ item.name }}</span>
              </el-menu-item>
            </template>
          </template>
        </template>
      </el-menu>
    </el-aside>
  </div>
</template>

<script>
import menuTree from "./menuTree";
import { getURLParams } from "@/utils";
import BusEvent from "@/utils/busEvent";
const logo = require("../../../assets/images/EasyQuiz.png");
const csLogo = require("../../../assets/images/331logo.png");
export default {
  name: "asideNav",
  components: {
    menuTree,
  },
  watch: {
    // 监听浏览器直接输入路由，将此路由添加到tabnavBox
    "$route.path": function (val) {
      // this.selectmenu(val);
      this.path = val; 
      BusEvent.$off("keepAlive");
    },
  },
  data() {
    return {
      path: "",
      code: "",
      logo: logo,
      csLogo: csLogo,
    };
  },
  created() {
    this.code = getURLParams("code") || this.$store.getters.csCode;
    this.path = this.$route.path;
  },
  methods: {
    isKeep() {
      BusEvent.$emit("keepAlive");
    },
    selectmenu(key, indexpath) {
      // 如果不使用 elemenUI 菜单的 vue-router 的模式将用以下方式进行页面跳转 el-menu的router设置为false
      // this.$router.push(indexpath.join("/"))
      let router = this.$store.getters.routers;
      let name = "";
      let navTitle = function (path, routerARR) {
        for (let i = 0; i < routerARR.length; i++) {
          if (routerARR[i].children?.length > 0 || routerARR[i].path === path) {
            if (
              routerARR[i].path === path &&
              routerARR[i].children?.length < 1
            ) {
              name = routerARR[i].name;
              break;
            }
            navTitle(path, routerARR[i].children);
          }
        }
        return name;
      };
      this.$store.dispatch("addTab", {
        title: navTitle(key, router),
        path: key,
      });
    },
  },
};
</script>

<style lang="scss">
$top: top;
$bottom: bottom;
$left: left;
$right: right;

%w100 {
  width: 100%;
}

%h100 {
  height: 100%;
}

%cursor {
  cursor: pointer;
}

@mixin set-value($side, $value) {
  @each $prop in $leftright {
    #{$side}-#{$prop}: $value;
  }
}

.aside-box {
  max-width: 250px;
}

#asideNav {
  width: auto !important;
  display: flex;
  flex-direction: column;

  .logo-name {
    background-color: #03152a !important;
    display: flex;
    align-items: center;
    width: 100%;
    height: 60px;
    padding: 0 16px;
    box-sizing: border-box;
    @extend %w100;

    .logo {
      width: 24px;
      height: 24px;
      margin-right: 10px;
    }

    .ellipsis {
      overflow: hidden;
      line-height: 50px;
      text-align: center;
      font-size: 16px;
      color: #fff;
    }
  }

  .el-menu-vertical:not(.el-menu--collapse) {
    width: 250px;
    padding-top: 20px;
    @extend %h100;
    overflow-y: scroll;
    overflow-x: hidden;
  }

  .el-menu {
    flex: 1;
    overflow: inherit;
    border-right: none;

    &::-webkit-scrollbar {
      display: none;
    }

    .fa,
    .el-image {
      width: 24px;
      height: 24px;
      text-align: center;
      font-size: 20px;
      margin: 0px 16px !important;
    }

    .el-menu-item,
    .el-submenu__title,
    .el-menu-item-group,
    .el-menu-item-group__title {
      font-size: 14px;
      font-weight: 400;
      padding: 0px !important;
      vertical-align: middle;
      border-radius: 4px;
      width: 218px;
      line-height: 44px;
      height: 44px;
      margin: auto !important;
      background-color: #333752 !important;

      span {
        color: #eaecf5 !important;
      }

      &:not(.el-menu-item-group__title):hover {
        color: #ffffff !important;
        // background-color: #131523 !important;
      }
    }

    .el-menu-item.is-active {
      background-color: #f5f6fa !important;

      span {
        color: #131523 !important;
      }

      i {
        color: #131523 !important;
      }
    }

    .el-menu-item-group-item {
      .el-menu-item {
        padding: 0px 0px 0px 20px !important;
      }
    }
  }
}

:deep(.is-active) {
  color: #fff;
}
</style>