menuRouter.vue

<template>
  <div class="container H100 W100">
    <!-- <div class="aside H100 l-float">
      <div class="logoTitle">机荟虚拟营业厅管理端</div>
      <el-menu :default-active="defaultActive" :unique-opened="true" active-background-color="#545c64"
               @open="handleOpen" @close="handleClose" router >
        <el-menu-item v-if="item.children.length==0" v-for="item in menuList" :key="item.label" :index="item.menuUrl"
                      @click="changePic($event)" @mouseover.native="addActive($event)" @mouseout.native="removeActive($event)">
          <i class="icon" :class="item.icon"></i>
          <span slot="title"> {{item.label}}</span>
        </el-menu-item>
        <el-submenu class="comsubmenu" v-if="menu.children.length>0" v-for="menu in menuList" :key="menu.label"
                    :index="menu.label"   @mouseover.native="addActive($event)" @mouseout.native="removeActive($event)" >
          <template slot="title">
            <i class="icon" :class="menu.icon"></i>
            {{menu.label}}
          </template>
          <el-menu-item v-for="citem in menu.children" :index="citem.menuUrl" :key="citem.url" @click="changeIcon($event)" :class="citem.class?citem.class:''">{{citem.label}}</el-menu-item>
        </el-submenu>
      </el-menu>
    </div> -->
    <div class="right_part H100 r-float">
      <!-- <top class="header"></top> -->
      <div class="main">
        <router-view></router-view>
      </div>
      <!-- <foot class="foot_title"></foot> -->
    </div>

  </div>
</template>
<script>
  import top from '../../components/end/top.vue';
  import foot from '../../components/end/foot.vue';
  import store from '../../store'
  export default {
    data() {
      return {
        defaultActive: "",
        menuList: [],
      }
    },
    computed: {
      getIsLeaveValue(){
        return this.$store.state.isLeave
      }
    },
    mounted() {
      this.initData();
    },
    components: {top,foot},
    methods: {
      initData() {
        this.initTree();
        let currentRoute = this.$route.path.substring(1);
        switch (currentRoute) {
          case 'newHotPro':
            currentRoute = 'hotProductsPage';
            break;
          case 'newPopActivity':
            currentRoute = 'popularActivitiesPage';
            break;
          case 'newServiceGuide':
            currentRoute = 'serviceGuidePage';
            break;
          case 'hotSpotManage':
            currentRoute = 'serviceDirectoryPage';
            break;
          default:
            break
        }
        if(sessionStorage.getItem('isModify')=='true'&&currentRoute=='hotSpotManage'){
          this.defaultActive = 'serviceDirectoryPage'
        }else{
          this.defaultActive = currentRoute
        }
      },
      handleOpen(key, keyPath) {

      },
      handleClose(key, keyPath) {

      },
      initTree() {
        this.defaultActive = this.$route.path.substring(1);
        let vm = this;
        let menuList = localStorage.getItem('menuList');
        let treeData = JSON.parse(menuList);
        let tempArr = [];
        for (let i = 0, len = treeData.length; i < len; i++) {
          let treeObj = treeData[i];
          let obj = {};
          if (treeObj.parentId == '0') { //根节点
            obj.label = treeObj.menuName;
            obj.menuUrl = treeObj.menuUrl;
            obj.icon = vm.handleIcon(treeObj.menuName);
            obj.sort = treeObj.sort
            obj.children = [];
            for (let k = 0, klen = treeData.length; k < klen; k++) {
              let ktreeObj = treeData[k];
              let kobj = {};
              if (ktreeObj.parentId == treeObj.id) {
                kobj.label = ktreeObj.menuName.split('-')[1];
                if(kobj.label=='网点服务地图'){
                  kobj.class='item-map'
                }
                kobj.menuUrl = ktreeObj.menuUrl;
                kobj.sort = ktreeObj.sort;
                obj.children.push(kobj)
              }
            }
          }
          if (JSON.stringify(obj) != "{}") {
            tempArr.push(obj)
          }
        }
        let lastTreeData = tempArr.sort(function (a, b) {
              if (a.children.length != 0) {
                a.children.sort(function (c, d) {
                  return c.sort - d.sort
                })
              }
              return a.sort - b.sort
            });
        vm.menuList = lastTreeData;
      },
      handleIcon(menuName) {
        let icon = "";
        switch (menuName) {
          case '首页':
            icon = 'icon_index';
            break;
          case '呼叫记录':
            icon = 'icon_record';
            break;
          case '意见建议及反馈':
            icon = 'icon_feedback';
            break;
          case '内容管理':
            icon = 'icon_content';
            break;
          case '系统管理':
            icon = 'icon_system';
            break;
          case '预约记录':
            icon = 'icon_order';
            break;
          case '支行人员管理':
            icon = 'icon_director';
            break;
          default:
            icon = ""
        }
        return icon;
      },
      changePic(ev) {
        let _this = $(ev.$el).find('.icon');
        $('.icon').removeClass('active');
        _this.addClass('active');
      },
      changeIcon(ev) {
        $('.icon').removeClass('active');
        $('.is-active').find('.icon').addClass('active')
      },
      addActive(ev) {
        let _this = $(ev.target).find('.icon');
        _this.addClass('active');
      },
      removeActive(ev) {
        if ($(ev.target)[0].className.indexOf('is-active') == -1) {
          let _this = $(ev.target).find('.icon');
          _this.removeClass('active');
        }
      },
    },
    watch: {
      '$route'(to, from) {
        let currentRoute = to.path.substring(1);
        switch (currentRoute) {
          case 'newHotPro':
            currentRoute = 'hotProductsPage';
            break;
          case 'newPopActivity':
            currentRoute = 'popularActivitiesPage';
            break;
          case 'newServiceGuide':
            currentRoute = 'serviceGuidePage';
            break;
          case 'hotSpotManage':
            currentRoute = 'serviceDirectoryPage';
            break;
          default:
            break
        }
        if(sessionStorage.getItem('isModify')=='true'&&to.path=='hotSpotManage'){
          this.defaultActive = 'serviceDirectoryPage'
        }else{
          if(currentRoute!='serviceDirectoryPage'){
            $('.el-menu-item.item-map').removeClass('is-active-blue')
            $('.el-menu-item').removeClass('is-active-transparent')
          }
          this.defaultActive = currentRoute
        }
      },
      getIsLeaveValue: function(newVal, oldVal) {
        if(!newVal){ //不离开
          $('.el-menu-item').addClass('is-active-transparent').siblings('.item-map').addClass('is-active-blue')
          store.commit('setLeave',true)
        }
      },
    }
  }
</script>
<style lang="less">
  @import '../../style/common';

  .container {
    /*min-width: 1040px;*/
    .icon_index {
      background-image: url("../../../static/images/icon/index.png")
    }
    .icon_record {
      background-image: url("../../../static/images/icon/callhistory.png")
    }
    .icon_feedback {
      background-image: url("../../../static/images/icon/feedback.png")
    }
    .icon_content {
      background-image: url("../../../static/images/icon/content.png")
    }
    .icon_system {
      background-image: url("../../../static/images/icon/user.png")
    }
    .icon_order {
      background-image: url("../../../static/images/icon/appoint.png")
    }
    .icon_director {
      background-image: url("../../../static/images/icon/director.png")
    }
    .icon_index.active {
      background-image: url("../../../static/images/icon/index1.png")
    }
    .icon_record.active {
      background-image: url("../../../static/images/icon/callhistory1.png")
    }
    .icon_feedback.active {
      background-image: url("../../../static/images/icon/feedback1.png")
    }
    .icon_content.active {
      background-image: url("../../../static/images/icon/content1.png")
    }
    .icon_system.active {
      background-image: url("../../../static/images/icon/user1.png")
    }
    .icon_order.active {
      background-image: url("../../../static/images/icon/appoint1.png")
    }
    .icon_director.active {
      background-image: url("../../../static/images/icon/director1.png")
    }
    .aside {
      width: 256px;
      height: 100%;
      box-shadow: 2px 0px 6px 0px rgba(0, 21, 41, 0.35);
      position: static;
      .logoTitle {
        width: 100%;
        /*height: 8%;*/
        height: 63px;
        line-height: 63px;
        background: #002140;
        font-size: 24px;
        font-weight: 600;
        color: rgba(255, 255, 255, 1);
        text-align: center;
      }
      .el-menu {
        width: 100%;
        height: 100%;
        background: rgba(0, 21, 41, 1);
        border-right: none;
        .el-menu-item {
          height: 50px;
          font-size: 14px;
          font-weight: 400;
          color: rgba(255, 255, 255, 0.65);
          background: rgba(0, 21, 41, 1);
          &.is-active-transparent{
            background:#000c17 !important;
            .el-submenu__title,.el-icon-arrow-down {
              color: rgba(255, 255, 255, 0.65) !important;
            }
            span {
              color: rgba(255, 255, 255, 0.65) !important;
            }
          }
          &.is-active-blue{
            background: rgba(24, 144, 255, 1) !important;
            color: #fff;
            .el-submenu__title,.el-icon-arrow-down {
              color: rgba(255, 255, 255) !important;
            }
          }
          .icon {
            display: inline-block;
            width: 15px;
            height: 14px;
            margin-right: 10px;
            background-repeat: no-repeat;
            background-size: cover;
          }
          &:hover {
            color: #fff;
          }
        }
        .el-submenu {
          &.is-active {
            .el-submenu__title {
              color: #fff;
            }
            .el-icon-arrow-down {
              color: #fff;
            }
          }
        }
        .el-submenu .el-menu-item {
          background: rgb(0, 12, 23);
        }
        .el-submenu__title {
          .icon {
            display: inline-block;
            width: 15px;
            height: 13px;
            margin-right: 10px;
          }
        }
        .el-menu-item.is-active {
          color: #fff;
          background: rgba(24, 144, 255, 1);
        }
      }
      .el-submenu__title {
        color: rgba(255, 255, 255, 0.65);
        span {
          color: rgba(255, 255, 255, 0.65);
        }
        &:hover {
          .el-icon-arrow-down {
            color: #fff;
          }
          color: #fff;
          background: rgba(0, 21, 41, 1);
        }
      }
    }
    .right_part {
      width:100%;
      // width: calc(100% - 256px);
      /*min-width: 768px;*/
      background: #fff;
      overflow-x: auto;
      overflow-y: hidden;
      .header {
        width: 100%;
        height: 63px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 1px 4px 0px rgba(0, 21, 41, 0.12);
      }
      .main {
        width: 100%;
        height:100%;
        // height: calc(100% - 123px);
        overflow-x: auto;
        >div{
          min-width: 768px;
        }
      }
      .foot_title{
        width: 100%;
        height: 60px;
        background: #F0F2F5;
      }
    }
  }

</style>