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

<template>
<div class="vNavCom">
    <div class="logo">
        <img style="width:120px; border-bottom: 1px solid #bbb;padding: 15px" src="@/../public/img/logo2.png" alt="">
    </div>
    <el-menu background-color="#f6fafd" @select="handleSelect" text-color="#5d77ad" unique-opened active-text-color="#fff">
      <!-- <el-menu-item index="-1"  @click="jump('home')"> -->
        <!-- <i class="el-icon-menu"></i> -->
        <div class="el-menu-item special" @click="jump('home')" :class="$route.name==='home' ? 'active' : ''">
          <img style="width: 20px" class="icon2" :src="imgList[$route.name==='home' ? 4 : 0]" alt="">
          <span slot="title" class="a_menu" style="font-size：16px" :style="$route.name==='home' ? 'color: #fff' : ''">首页</span>
        </div>
      <!-- </el-menu-item> -->
        <el-submenu v-for="(item,index) in route||filterOne" :key="index" :index="`${index}`">
            <template slot="title">
                <!-- <span :class="'iconfont '+item.icon"></span> -->
                <!-- {{url+item.icon+'.png'}} -->
                <img style="width: 20px" :src="imgList[item.icon]" alt="">
                <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 ? '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,
      imgList: [
        require('../../../public/img/home.png'),
        require('../../../public/img/company.png'),
        require('../../../public/img/people.png'),
        require('../../../public/img/setting.png'),
        require('../../../public/img/home-active.png'),
        require('../../../public/img/company-active.png'),
        require('../../../public/img/people-active.png'),
        require('../../../public/img/setting-active.png')
      ],
      // url: '../../../public/img/',.
      menuIdList: [],
      route: [
        {
          name: '公司设置',
          // menuid: 100,
          to: '',
          icon: 1,
          child: [{
            name: '基本信息设置',
            menuid: 503,
            to: 'basicInfo'
          },
          {
            name: '职位信息设置',
            menuid: 504,
            to: 'positionInfo'
          },
          {
            name: '简历信息设置',
            menuid: 505,
            to: 'formManage'
          },
          {
            name: '视频库管理',
            menuid: 507,
            to: 'videoManage'
          },
          {
            name: '面试问题设置',
            menuid: 506,
            to: 'procedureManage'
          },
          // {
          //   name: '应用场景管理',
          //   menuid: 508,
          //   to: 'sceneManage'
          // },
          {
            name: '邀约管理',
            menuid: 509,
            to: 'templateManage'
          },
          {
            name: '邮箱管理',
            menuid: 510,
            to: 'mailManage'
          }
          ]
        },
        {
          name: '候选人管理',
          // menuid: 200,
          to: '',
          icon: 2,
          child: [{
            name: '人才库',
            menuid: 511,
            to: 'candidateAll'
          },
          {
            name: '简历管理',
            menuid: 512,
            to: 'resumeList'
          },
          {
            name: '面试管理',
            menuid: 513,
            to: 'candidateList'
          }
          ]
        },
        {
          name: '系统管理',
          // menuid: 200,
          to: '',
          icon: 3,
          child: [{
            name: '密码设置',
            menuid: 514,
            to: 'passwordSettings'
          },
          {
            name: '数据统计',
            menuid: 515,
            to: 'statistics'
          }
          ]
        }
      ]
    }
  },
  created () {
    // localStorage.getItem('token') && this.queryNumber()
    // this.menuIdList = localStorage.getItem('menuId') ? localStorage.getItem('menuId').split(',').map(item => item - 0) : []
    let menuList = JSON.parse(localStorage.getItem('menuId'))
    menuList && this.route.forEach(item => {
      item.child.forEach(i => {
        menuList.forEach(j => {
          j.menuid === i.menuid && (i.name = j.menuname)
        })
      })
    })
  },
  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
      })
      this.$forceUpdate()
    }
  }
}
</script>

<style lang="scss" scoped>
@import './vNav.scss';

/deep/.el-submenu__title i {
    color: #8D9498;
}
.special {
  // height: 56px!important;
  // width: 210px!important;
  // margin: 0!important;
  color: #5d77ad;
  // text-align: start!important;
  padding-left: 0;
  position: relative;
  padding-right: 0;
  font-size: 16px!important;
  // display: flex;
  // justify-content: space-between;
  .icon2 {
    position: absolute;
    left: 12px;
    top: 10px;
  }
}

// .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>