index.vue

<template>
  <div class="manage-wrapper warp">
    <el-aside width="200px" height="100%">
      <el-menu class="aside-menu-wrapper" :default-active="activeIndex" background-color="#fff" text-color="#515a6e"
        @select="menuSelect" unique-opened>
        <el-menu-item-group>
          <el-submenu :index="item.path" v-for="item in customerMenu" :key="item.path" style="text-align:left">
            <template slot="title">
              <i :class="['icon', 'font_family', 'custom-icon', `icon-${item.icon}_icon`, `${item.icon}-icon`]"></i>
              <span >{{langFormat(item.label,item.nodeTw,item.nodeEn)}}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item :index="child.path" v-for="(child,index) in item.children" :key="child.path+index">
                <span slot="title">{{langFormat(child.label,child.nodeTw,child.nodeEn)}}</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu-item-group>
      </el-menu>
    </el-aside>
    <div class="manage-page">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        activeIndex: '',
        customerMenu: [],
        menuArr: [],
      }
    },
    methods: {
      i18nFomatter(name) {
        let languageLable = 'queueManagement.' + name
        return this.$t(languageLable)
      },
      permissControl(path) {
        if (window._vionConfig.allMenu) {
          return true
        }
        if (this.menuArr.includes(path)) {
          return true
        } else {
          return false
        }
      },
      hasChildPermission(children) {
        if (window._vionConfig.allMenu) {
          return true
        }
        if (!children.length) {
          return false
        }
        let hasPermission = children.map(item => {
          return this.menuArr.includes(item.path)
        }).filter(Boolean)
        return hasPermission.length > 0
      },
      menuSelect(key, path) {
         this.navigateTo(this,'queueManagement',key);
      },
      refreshSelect(path) {
        this.$router.push('/queueManagement/' + path);
      },
      refresh() {
        let name = this.$router.history.current.name;
        let path = this.$router.history.current.path;
        let newPath = path.split('/')[2];
        this.activeIndex = newPath;
        this.refreshSelect(newPath)
      },
    },
    created() {
      if (!window._vionConfig.allMenu) {
        this.menuArr = JSON.parse(window.localStorage.getItem('menuName'));
      }
    },
    mounted() {
      let firstPath, name;
      if (window._vionConfig.allMenu) {
        firstPath = 'queueLive'
      } else {
        firstPath = this.menuArr[this.menuArr.indexOf('queueManagement') + 2];
      }
      this.customerMenu = []
      let menu  = JSON.parse(window.localStorage.getItem('menu'))
      menu.children.forEach((item,index)=>{
        if(item.path=="queueManagement"){
          this.customerMenu = item.children
        }
      })
      name = this.$router.history.current.name;
      if (!name) {
        this.activeIndex = firstPath;
        this.menuSelect(firstPath, [firstPath]);
      } else {
        this.refresh()
      }

    }
  }
</script>

<style>
  @import url(./public/css/common.css); 
  .warp .el-menu-item.is-active:before, warp .el-menu-item.is-active:before{
    width: 0 !important;
  }
  .manage-wrapper {
    width: 100%;
    height: 100%;
    background-color: #fff;
  }

  .manage-wrapper .el-aside {
    width: 200px !important;
    color: #fff;
    text-align: center;
    font-size: 14px;
    height: calc(100vh - 60px);
    margin-left: 0;
    position: fixed;
    top: 60px;
    left: 0;
    z-index: 1;
    box-sizing: border-box;
  }

  /* 菜单侧边栏 */

  .manage-wrapper .aside-menu-wrapper {
    padding-top: 10px;
    padding-bottom: 34px;
    height: 100%;
    box-sizing: border-box;
  }

  .manage-wrapper .el-menu-item {
    height: 40px;
    line-height: 40px;
    text-align: left;
    padding-left: 30px !important;
  }

  .manage-wrapper .el-menu-item > span {
    padding-left: 8px;
  }

  .manage-wrapper .el-menu-item.is-active {
    color: #0069ff !important;
    background: rgba(0,105,255,.1) !important;
    border-right: 10px solid #0069ff;
  }

  .manage-wrapper .el-menu-item.is-active:before {
    content: "";
    display: block;
    width: 8px;
    /* height: 40px; */
    background: #0069ff;
    position: absolute;
    left: 0;
    top: 0;
  }

  .manage-wrapper .el-submenu.is-active .el-menu-item.is-active {
    color: #3bb8ff;
  }

  .manage-wrapper .el-submenu.is-active .el-menu-item.is-active:before {
    width: 0;
    height: 0;
  }

  .manage-page {
    width: 100%;
    height: 100%;
    overflow: auto;
    min-width: 1000px;
  }
  @media only screen and (max-width: 1680px) {
    .manage-wrapper .el-aside {
      width: 200px !important;
      height: calc(100vh - 54px);
      margin-left: 0;
    }

    .manage-wrapper .aside-menu-wrapper {
      padding-top: 10px;
      padding-bottom: 15px;
    }

    .manage-page {
      width: 100%;
      height: 100%;
      overflow: auto;
    }
  }
</style>