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 :title="i18nFomatter(item.name)">{{i18nFomatter(item.name)}}</span> -->
              <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">{{i18nFomatter(child.name)}}</span> -->
                <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: '',
        moreOptVisible: false,
        customerMenu: [

            {
              path: 'realTimeMonitoring',
              iconClass: 'icon font_family icon-tftrackheat_icon custom-icon tftrackheat-icon',
              name: 'realTimeMonitoring',
              children:[
                {
                  path: 'realTimeVideo',
                  iconClass: 'icon font_family icon-tftrackheat_icon custom-icon tftrackheat-icon',
                  name: 'realTimeVideo',
                },
              ]
            },
            {
              path: 'remoteShopInspection',
              iconClass: 'icon font_family icon-shot_icon',
              name: 'remoteShopInspection',
              children:[
                {
                  path: 'remoteShopInspection',
                  iconClass: 'icon font_family icon-tftrackheat_icon custom-icon tftrackheat-icon',
                  name: 'remoteShopInspection',
                },
                {
                  path: 'inspectionRecord',
                  iconClass: 'icon font_family icon-tftrackheat_icon custom-icon tftrackheat-icon',
                  name: 'inspectionRecord',
                },
                {
                  path: 'inspectionReportManual',
                  iconClass: 'icon font_family icon-tftrackheat_icon custom-icon tftrackheat-icon',
                  name: 'inspectionReportManual',
                }
              ]
            },
            {
              path: 'spotInspection',
              iconClass: 'icon font_family icon-act_icon',
              name: 'spotInspection',
              children:[
                {
                  path: 'configurationCheckItem',
                  iconClass: 'icon font_family icon-tftrackheat_icon custom-icon tftrackheat-icon',
                  name: 'configurationCheckItem',
                },{
                  path: 'captureConfiguration',
                  iconClass: 'icon font_family icon-tftrackheat_icon custom-icon tftrackheat-icon',
                  name: 'captureConfiguration',
                },
                {
                  path: 'routineCheckTask',
                  iconClass: 'icon font_family icon-tftrackheat_icon custom-icon tftrackheat-icon',
                  name: 'routineCheckTask',
                },
                {
                  path: 'routineCheckRecord',
                  iconClass: 'icon font_family icon-tftrackheat_icon custom-icon tftrackheat-icon',
                  name: 'routineCheckRecord',
                },
                {
                  path: 'inspectionReport',
                  iconClass: 'icon font_family icon-tftrackheat_icon custom-icon tftrackheat-icon',
                  name: 'inspectionReport',
                }]
            },
            {
              path: 'myTasks',
              iconClass: 'icon font_family icon-clerk_icon',
              name: 'myTasks',
              children:[{
                  path: 'initiatedItem',
                  iconClass: 'icon font_family icon-tftrackheat_icon custom-icon tftrackheat-icon',
                  name: 'initiatedItem',
                },
                {
                  path: 'pendingItem',
                  iconClass: 'icon font_family icon-tftrackheat_icon custom-icon tftrackheat-icon',
                  name: 'pendingItem',
                }]
            },
            {
              path: 'basicManagement',
              iconClass: 'icon font_family icon-customtrack_icon custom-icon customtrack-icon',
              name: 'basicManagement',
              children:[
                {
                  path: 'deviceManagement',
                  iconClass: 'icon font_family icon-customtrack_icon custom-icon customtrack-icon',
                  name: 'deviceManagement',
                },
                {
                  path: 'monitoringPointManagement',
                  iconClass: 'icon font_family icon-ftmoveline_icon custom-icon ftmoveline-icon',
                  name: 'monitoringPointManagement',
                },
                {
                  path: 'presetPointManagement',
                  iconClass: 'icon font_family icon-customtrack_icon custom-icon customtrack-icon',
                  name: 'presetPointManagement',
                },
                {
                  path: 'groupSOPManagement',
                  iconClass: 'icon font_family icon-tftrackheat_icon custom-icon tftrackheat-icon',
                  name: 'groupSOPManagement',
                },
                {
                  path: 'systemSOPManagement',
                  iconClass: 'icon font_family icon-tftrackheat_icon custom-icon tftrackheat-icon',
                  name: 'systemSOPManagement',
                }
              ]
            },
            ],
        menuArr: [],
      }
    },
    components: {},
    methods: {
      i18nFomatter(name) {
        let languageLable = 'VideoShopTour.' + 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,'videoShopTour',key);
        // if ((window.location.href.split('/')).indexOf(key) === -1) {
        //   this.$router.push('/videoShopTour/' + key);
        // }
      },
      refreshSelect(path) {
        this.$router.push('/videoShopTour/' + 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)
        let obj = {
          deviceManagement: 'deviceManagement',
          monitoringPointManagement: 'monitoringPointManagement',
          realTimeVideo: 'realTimeVideo',
          systemSOPManagement: 'systemSOPManagement',
          groupSOPManagement: 'groupSOPManagement',
        };
        if (obj.hasOwnProperty(newPath)) {
          // this.activeIndex = obj[newPath]
          // this.refreshSelect(obj[newPath])
        }
      },
    },
    created() {
      if (!window._vionConfig.allMenu) {
        this.menuArr = JSON.parse(window.localStorage.getItem('menuName'));
      }
    },
    mounted() {
      let firstPath, name;
      if (window._vionConfig.allMenu) {
        firstPath = 'deviceManagement'
      } else {
        firstPath = this.menuArr[this.menuArr.indexOf('videoShopTour') + 2];
      }
      this.customerMenu = []
      let menu  = JSON.parse(window.localStorage.getItem('menu'))
      menu.children.forEach((item,index)=>{
        if(item.path=="videoShopTour"){
          this.customerMenu = item.children
        }
      })
      name = this.$router.history.current.name;
      // let path = this.$router.history.current.path;
      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>