FE_occupationlab_server/src/layouts/navbar/index.vue

<template>
  <div>
    <el-menu v-if="menuRefresh"
             class="sidebar-el-menu"
             :default-active="active"
             background-color="#324157"
             text-color="#bfcbd9"
             active-text-color="#9278FF"
             unique-opened
             mode="horizontal"
             @select="menuSelect">
      <template v-for="item in menus">
        <template v-if="item.subs">
          <el-submenu :index="item.index"
                      :key="item.index">
            <template slot="title">
              <i :class="item.icon"></i>
              <span slot="title">{{ item.title }}</span>
            </template>
            <template v-for="subItem in item.subs">
              <el-submenu v-if="subItem.subs"
                          :index="subItem.index"
                          :key="subItem.index">
                <template slot="title">{{ subItem.title }}</template>
                <el-menu-item v-for="(threeItem,i) in subItem.subs"
                              :key="i"
                              :index="threeItem.index">{{ threeItem.title }}</el-menu-item>
              </el-submenu>
              <el-menu-item v-else
                            :index="subItem.index"
                            :key="subItem.index">{{ subItem.title }}</el-menu-item>
            </template>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item :index="item.index"
                        :key="item.index">
            <i :class="item.icon"></i>
            <span slot="title">{{ item.title }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import Setting from '@/setting'
import addRoutes from '@/libs/route/addRoutes'
export default {
  data () {
    return {
      active: this.$route.path,
      defaultMenus: [
        {
          icon: "el-icon-s-platform",
          index: "/product/list",
          title: "产品中心"
        },
        {
          icon: "el-icon-s-platform",
          index: "/station/list",
          title: "实验台"
        },
        {
          icon: "el-icon-user",
          index: "/student/list",
          title: "学生管理"
        },
        {
          icon: "el-icon-receiving",
          index: "/evaluation/list",
          title: "测评管理"
        },
        {
          icon: "el-icon-takeaway-box",
          index: "/assessment/list",
          title: "考核管理"
        },
        {
          icon: "el-icon-collection",
          index: "/achievement/list",
          title: "成绩管理",
        },
        {
          icon: "el-icon-news",
          index: "/course/list",
          title: "理论课程管理"
        },
        {
          icon: "el-icon-document",
          index: "/information/list",
          title: "资讯管理"
        },
        {
          icon: "el-icon-school",
          index: "/match/list",
          title: "赛事管理"
        },
        {
          icon: "el-icon-school",
          index: "/activity/list",
          title: "创业活动"
        },
        {
          icon: "el-icon-c-scale-to-original",
          index: "/expSystem/list",
          title: "实验系统管理"
        },
        {
          icon: "el-icon-postcard",
          index: "/project/list",
          title: "实验项目管理"
        },
        {
          icon: "el-icon-setting",
          index: "/system/list",
          title: "系统设置"
        },
        {
          icon: "el-icon-pie-chart",
          index: "/screen",
          title: "数据看板"
        }
      ],
      menus: [],
      actives: {
        dashboard: ["add"],
        achievement: ["experiment", "experimentVir", "experimentTeach", "addexperiment", "addexperimentoptions", "showExperiment", "showExperimentoption", "showExperimentoptions"],
        project: ["addproject", "program", "programOption", "programOptions"],
        backstage: ["report"]
      },
      menuRefresh: 1
    };
  },
  computed: {
    ...mapState('auth', [
      'routes'
    ])
  },
  watch: {
    "$route" (to, from) {
      let actives = this.actives;
      for (let i in this.actives) {
        if (actives[i].includes(this.$route.name)) this.active = `/${i}/list`;
      }
      let arr = this.$route.path.split("/");
      let name = `/${arr[1]}/list`
      this.active = name;
    }
  },
  created () {
    this.getPer()
  },
  methods: {
    ...mapActions('user', [
      'logout'
    ]),
    ...mapActions("info", [
      "setTabsName", "setColumnId"
    ]),
    // 获取权限列表
    getPer () {
      this.$get(`${this.api.getUserRolesPermissionMenu}?platformId=${Setting.platformId}`).then(res => {
        const routes = res.permissionMenu[0].children
        addRoutes(routes)
        this.initMenu()
      }).catch(({ status }) => {
        status === 500 && this.logout()
      })
    },
    initMenu () {
      // 如果开启了动态路由，则取store里的路由匹配
      if (Setting.dynamicRoute) {
        const { routes } = this
        const menus = []
        this.defaultMenus.map(e => {
          routes.find(n => n.path === e.index) && menus.push(e)
        });
        this.menus = menus
      } else {
        this.menus = this.defaultMenus
      }
    },
    // 菜单点击回调
    menuSelect (path) {
      this.setTabsName('1')
      this.setColumnId('')
      this.$store.commit('match/setCache', null)
      if (path === '/screen') {
        let arr = this.$route.path.split("/");
        let name = `/${arr[1]}/list`
        this.active = name;
        window.open(this.$router.resolve(path).href)
        location.reload()
      } else {
        this.$router.push(path)
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.sidebar::-webkit-scrollbar {
    width: 0;
}

.sidebar-el-menu:not(.el-menu--collapse) {
    width: 100%;
}

.el-menu.el-menu--horizontal {
    border-bottom: none;
}

.sidebar > ul {
    height: 100%;
}
</style>