frame/layout/admin/admin-menu.vue

<template>
  <div id="admin-menu" style="background-color: rgb(0, 20, 42);">
    <el-row>
      <el-col :span="24">
        <div class="logo">
          <img src="https://img.alicdn.com/tfs/TB13UQpnYGYBuNjy0FoXXciBFXa-242-134.png" width="40" />
          <span class="site-name">智慧培训系统</span>
        </div>
      </el-col>
      <el-col :span="24">
        <template>
          <el-menu
            mode="vertical"
            :show-timeout="200"
            background-color="#00142a"
            text-color="hsla(0, 0%, 100%, .65)"
            active-text-color="#409EFF"
            :unique-opened="true"
            :default-active="defualtActive"
          >
            <scroll-bar>
              <menu-item :menus="menu" :level="0"></menu-item>
            </scroll-bar>
          </el-menu>
        </template>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import menuItem from './menu/menu-item.vue';
import * as menus from '@frame/config/menu-config';
import scrollBar from './scrollBar.vue';
import _ from 'lodash';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: userMenu } = createNamespacedHelpers('userMenu');
export default {
  name: 'admin-menu',
  props: {},
  components: {
    scrollBar,
    menuItem,
  },
  data: () => ({
    menu: [],
    project: 'center',
  }),
  created() {},
  computed: {
    ...mapState(['user', 'defaultOption']),
    project_modules() {
      return process.env.VUE_APP_MODULE;
    },
    defualtActive() {
      return this.$route.path;
    },
  },
  mounted() {
    let arr = _.get(menus, 'menu', []); //this.project_modules
    // let r = this.filterMenu(_.cloneDeep(arr), this.project_modules);
    // this.$set(this, `menu`, r);
  },
  methods: {
    ...userMenu(['getMenu']),
    selectMenu(path, modules) {
      if (this.project_modules === modules) this.$router.push({ path: path });
    },
    filterMenu(menus, umod) {
      let nm = menus.map(menu => {
        //mod 不存在:检查下面每一子项是否有限制
        //mod 存在:检查是否符合要求,符合,检查子项;不符合,略过
        let mod = _.get(menu, 'module');
        if ((mod && mod.includes(umod)) || !mod) {
          let children = _.get(menu, 'children');
          if (children) {
            menu.children = this.filterMenu(children, umod);
          }
          return menu;
        }
      });
      return _.compact(nm);
    },

    async getUserMenu() {
      const sessionMenu = sessionStorage.getItem('userMenu');
      if (sessionMenu) {
        this.$set(this, `menu`, JSON.parse(sessionMenu));
      } else {
        this.requestMenu();
      }
    },
    async requestMenu() {
      const { type, id: userid } = this.user;
      const condition = { project: 'center', type, userid };
      const res = await this.getMenu(condition);
      if (this.$checkRes(res)) {
        this.$set(this, `menu`, res.data);
        sessionStorage.setItem('userMenu', JSON.stringify(res.data));
      }
    },
  },
  watch: {
    user: {
      deep: true,
      immediate: true,
      handler(val) {
        if (this.menu.length > 0) return;
        if (val) {
          const { type, id } = val;
          if (type && id) this.getUserMenu();
        }
      },
    },
  },
};
</script>

<style lang="less" scoped>
.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 4rem;
  line-height: 4rem;
  background: #002140;
  color: #fff;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 600;
  overflow: hidden;
}
.site-name {
  margin-left: 0.325rem;
}
.sidebar-container {
  box-shadow: 0.125rem 0 0.375rem rgba(0, 21, 41, 0.35);
  transition: width 0.28s;
  width: 12rem !important;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1001;
  overflow: hidden;
  a {
    display: inline-block;
    width: 100%;
  }
  .el-menu {
    padding-top: 1rem;
    width: 100% !important;
    border: none;
  }
}
</style>