examcloud-admin-web/src/modules/portal/views/home/HomeSide.vue

<template>
  <el-aside width="200px" v-if="menuList.length > 0">
    <div
      style="height: 50px; margin-top: 20px; margin-left: 20px; font-size: 20px"
    >
      <i class="el-icon-location"></i> <span>{{ group.name }}</span>
    </div>
    <el-menu
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-submenu
        v-for="menu1 in menuList1"
        :key="menu1.id"
        :index="menu1.nodeCode"
      >
        <template slot="title">
          <router-link v-if="menu1.ext5" :to="{ path: menu1.ext5 }">
            <i class="fa fa-circle-o"></i> {{ menu1.name }}
          </router-link>
          <span v-else>{{ menu1.name }}</span>
        </template>

        <el-menu-item-group>
          <el-menu-item
            v-for="menu2 in menuList2(menu1)"
            :index="menu2.nodeCode"
            :key="menu2.id"
          >
            <router-link :to="{ path: menu2.ext5 }">
              <i class="fa fa-circle-o"></i> {{ menu2.name }}
            </router-link>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </el-aside>
</template>

<script>
import { mapState } from "vuex";
import { CORE_API } from "@/constants/constants";

const routesToMenu = [
  {
    path: "/basic",
    name: "基础信息",
    groupCode: "BASIC_MENUS"
  },
  {
    path: "/examwork",
    name: "考务管理",
    groupCode: "EXAM_WORK_MENUS"
  },
  {
    path: "/questions",
    name: "题库",
    groupCode: "QUESTIONS_WORK_MENUS"
  },
  {
    path: "/oe",
    name: "网考",
    groupCode: "NETEXAM_WORK_MENUS"
  },
  {
    path: "/marking",
    name: "阅卷",
    groupCode: "MARK_WORK_MENUS"
  },
  {
    path: "/portal",
    groupCode: "PORTAL_MENUS"
  },
  {
    path: "/print",
    name: "印刷管理",
    groupCode: "PRINT_MENUS"
  }
];

import { mapMutations } from "vuex";
import { UPDATE_CURRENT_PATHS } from "../../store/currentPaths";

export default {
  name: "HomeSide",
  data() {
    return {
      group: null,
      menuList: []
    };
  },
  computed: {
    ...mapState({ user: state => state.user }),
    menuList1() {
      return this.menuList.filter(
        m => m.parentId === null && m.ext1 === "menu"
      );
    }
  },
  methods: {
    ...mapMutations([UPDATE_CURRENT_PATHS]),
    async getUserPrivileges(groupCode) {
      var url = CORE_API + "/rolePrivilege/getUserPrivileges";
      const params = new URLSearchParams();
      params.append("groupCode", groupCode);
      params.append("full", false);
      const res = await this.$httpWithMsg.post(url, params, {
        headers: { "content-type": "application/x-www-form-urlencoded" }
      });

      return res.data;
    },
    menuList2(menu1) {
      return this.menuList.filter(
        m => m.parentId === menu1.id && m.ext1 === "menu"
      );
    },
    updatePath() {
      let currentPaths = [];
      let part = this.menuList.find(v => v.ext5 === this.$route.path);
      if (!part) {
        this.UPDATE_CURRENT_PATHS([]);
        return;
      }
      currentPaths.unshift(part.name);
      while (this.menuList.find(v => v.id === part.parentId)) {
        part = this.menuList.find(v => v.id === part.parentId);
        currentPaths.unshift(part.name);
      }
      console.log(currentPaths);
      this.UPDATE_CURRENT_PATHS(currentPaths);
    }
  },
  async created() {
    this.group = routesToMenu.find(v => this.$route.path.startsWith(v.path));
    const groupCode = this.group && this.group.groupCode;
    if (groupCode) {
      this.menuList = await this.getUserPrivileges(groupCode);
      this.updatePath();
    }
  },
  watch: {
    $route() {
      this.updatePath();
    }
  }
};
</script>

<style scoped>
.el-menu-vertical-demo {
  height: calc(100vh - 60px - 70px);
}
.el-aside {
  background-color: #545c64;
  color: #fff;
}
</style>