hr-admin/src/components/vNav/vNav.vue

<template>
  <div class="vNavCom">
    <div class="logo">
      <!-- <img src="../../../public/img/logo.png" alt=""> -->
      上海梵天软件
    </div>
    <el-menu
      background-color="#4ddcf5"
      @select="handleSelect"
      text-color="#F1F1F1"
      unique-opened
      active-text-color="#fff">
      <el-submenu v-for="(item,index) in route||filterOne" :key="index" :index="`${index}`">
        <template slot="title" >
          <span :class="'iconfont '+item.icon"></span>
          <span class="a_menu">{{item.name}}</span>
        </template>
        <el-menu-item
          v-for="(child,childIndex) in item.child||item.child.filter(j => menuIdList.includes(j.menuid))"
          @click="jump(child.to)"
          :class="$route.name===child.to ? 'is-active' : ''"
          :key="childIndex"
          :index="`${index}-${childIndex}`"
          :style="childIndex!==item.child.length-1?'margin-bottom: 15px':''"
          >
          <div>{{child.name}}</div>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [],
      number: 0,
      menuIdList: [],
      route: [
        {
          name: '公司设置',
          // menuid: 100,
          to: '',
          icon: 'iconshangpinguanlix f-16',
          child: [
            {
              name: '基本信息设置',
              // menuid: 101,
              to: 'basicInfo'
            },
            {
              name: '职位信息设置',
              // menuid: 101,
              to: 'positionInfo'
            },
            {
              name: '简历信息设置',
              // menuid: 101,
              to: 'formManage'
            },
            {
              name: '面试问题设置',
              // menuid: 101,
              to: 'procedureManage'
            },
            {
              name: '视频库管理',
              // menuid: 101,
              to: 'videoManage'
            },
            {
              name: '应用场景管理',
              // menuid: 101,
              to: 'sceneManage'
            },
            {
              name: '模板管理',
              // menuid: 101,
              to: 'templateManage'
            },
            {
              name: '邮箱管理',
              // menuid: 202,
              to: 'mailManage'
            }
          ]
        },
        {
          name: '候选人管理',
          // menuid: 200,
          to: '',
          icon: 'iconshangpinguanlix f-16',
          child: [
            {
              name: '人才库',
              // menuid: 202,
              to: 'candidateAll'
            },
            {
              name: '简历管理',
              // menuid: 202,
              to: 'resumeList'
            },
            {
              name: '面试管理',
              // menuid: 202,
              to: 'candidateList'
            }
          ]
        },
        {
          name: '用户管理',
          // menuid: 200,
          to: '',
          icon: 'iconshangpinguanlix f-16',
          child: [
            {
              name: '密码设置',
              // menuid: 101,
              to: 'passwordSettings'
            },
            {
              name: '数据统计',
              // menuid: 202,
              to: 'statistics'
            }
          ]
        }
      ]
    }
  },
  created () {
    // localStorage.getItem('token') && this.queryNumber()
    // this.menuIdList = localStorage.getItem('menuId') ? localStorage.getItem('menuId').split(',').map(item => item - 0) : []
  },
  mounted () {
    this.handleSelect('0-0', this.route)
  },
  computed: {
    // filterOne () {
    //   return this.route.filter(item => item.child.filter(j => this.menuIdList.includes(j.menuid)).length)
    // }
  },
  methods: {
    queryNumber () {
      let reqdata = {}
      this.$api.post('/platform/company/platformNotExamineCompanyCount', { reqdata }).then(res => {
        // this.number = res.object.notExamineCompanyCount
        this.$store.commit('setNumber', res.object.notExamineCompanyCount)
      })
    },
    handleSelect (key, keyPath) {
      this.$emit('keyPath', key, this.route || this.filterOne)
    },
    jump (to) {
      if (this.$route.name === to) {
        return false
      }
      this.$router.push({ name: to })
    }
  }
}
</script>

<style lang='scss' scoped>
@import './vNav.scss';
  /deep/.el-submenu__title i{
    color: #ffffff;
  }
  .logo{
    color: #ffffff;
    font-size: 20px;
    padding: 15% 0 13% 0;
  }
  // .vNavCom{
  //   overflow-y: scroll;
  // }
  // .vNavCom::-webkit-scrollbar{
  //   display:none;
  // }
</style>

<style lang="scss">
  .el-submenu{
    .el-badge__content{
      margin-top: 25%!important;
      position: relative;
      width: 20px;
      left: 25px;
    }
  }
</style>