manage.vue

<template>
  <div class="manage-wrapper">
    <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-submenu :index="item.path" v-for="item in menuList" :key="item.path" style="text-align:left">
            <template slot="title">
              <i
                :class="['custom-icon', 'font_family', `icon-${item.icon}_icon`, `${item.icon}-icon`, `icon-${item.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>
      </el-aside>
      <div class="manage-page">
        <router-view @jump="jumpMenu" />
      </div>


  </div>
</template>
<script>
import menu from '../../utils/menu';

export default {
  data() {
    return {
      activeIndex: "",
      // manageItem: menu.manageItem,
      manageItem: [],
      menuArr: [],
      passedMenuList: []
    };
  },
  computed: {
    isSup() {
      return this.$cookie.get("user_type") === "super" ? true : false;
    },
    isAdmin() {
      return this.$cookie.get("user_type") === "admin" ? true : false;
    },
    menuList() {
      const { passedMenuList } = this
      return passedMenuList.filter((item) => !item.hidden)
    }
  },
  mounted() {
    this.menuArr = JSON.parse(window.localStorage.getItem("menuName"));
    this.passedMenuList = this.genenateMenu()
    let firstPath, name;
    name = this.$router.history.current.name;
    if (!name) {
      if (window._vionConfig.allMenu) {
        firstPath = "blocmanage";
        this.activeIndex = firstPath;
        this.menuSelect(firstPath, [firstPath]);
      } else {
          firstPath = this.menuArr[this.menuArr.indexOf("manage") + 2];
          this.activeIndex = firstPath;
          this.menuSelect(firstPath, [firstPath]);
      }
    } else {
      this.refresh();
    }
  },
  methods: {
    jumpMenu(val) {
      this.activeIndex = val;
      this.menuSelect(val, [val]);
    },
    menuSelect(key, path) {
      // if (window.location.href.split("/").indexOf(key) === -1) {
      //   if(key.startsWith('/')){
      //     window.open(window.location.origin+key);
      //   }else{
      //     this.$router.push("/manage/" + key);
      //   }
      // }
      this.navigateTo(this,'manage',key);
    },
    i18nFomatter(name) {
      let languageName = "Management." + name;
      return this.$t(languageName);
    },
    hasPermission(permissionLists, route) {
      if (route.path === 'blocmanage') {
        return this.isSup ? true : false
      } else {
        return permissionLists.some(permissionList => permissionList.includes(route.path))
      }
    },
    filterRemoteMenu(lists, permissionList) {
      const res = []

      lists.filter(list => {
        const temp = { ...list }
        if (this.hasPermission(permissionList, temp)) {
          if (temp.children) {
            temp.children = this.filterRemoteMenu(temp.children, permissionList)
          }
          res.push(temp)
        }
      })

      return res
    },
    genenateMenu() {
      let list;
      let menu  = JSON.parse(window.localStorage.getItem('menu'))
      this.manageItem = []
      menu.children.forEach((item,index)=>{
        if(item.path=="manage"){
          this.manageItem = item.children
        }
      })
      list = this.filterRemoteMenu(this.manageItem, this.menuArr)
      return list
    },
    dealFirstPath() {
      var path = this.menuArr[this.menuArr.indexOf("manage") + 2];
    },
    refreshSelect(path) {
      this.$router.push("/manage/" + path);
    },
    refresh() {
      let name = this.$router.history.current.name;
      this.activeIndex = name;
      this.refreshSelect(name)
      let obj = {
        user_manage: "usermanage",
        user_info_manage: "userinfomanage",
        bloc_manage: "blocmanage",
        device_status: "devicestatus",
        device_screenshot: "deviceScreenshot",
        floor_manage: "floormanage",
        gate_bind: "gatebind",
        gate_manage: "gatemanage",
        group_manage: "groupmanage",
        mall_manage: "mallmanage",
        zone_manage: "zonemanage",
        person_manage: "personmanage",
        person_type_manage: 'personTypeManage',
        clerk_manage: "clerkmanage",
        // clerkdata_manage: 'clerkdata',
        holiday_manage: "holidaymanage",
        act_manage: "actmanage",
        format_manage: "formatmanage",
        img_manage: "imgmanage",
        role_manage: "rolemanage",
        menu_manage: "menumanage",
        device_search: "devicesearch",
        device_data_search: "deviceDataSearch",
        device_state: "devicestate",
        device_data: "devicedata",
        we_chat: "wechat",
        login_log: "loginlog",
        alarm_log: "alarmlog",
        video_player: "videoplayer",
        messagecenter: "MessageCenter",
        customconfiguration: "customconfiguration",
        shopheat: "shopheat",
        deskmanager: "deskmanager",
        formatManagement:'formatManagement',
        residenceTimeSetting:'residenceTimeSetting',
        organizationDiagram:'organizationDiagram',
      };
      if (obj.hasOwnProperty(name)) {
        // this.activeIndex = obj[name];
        // this.refreshSelect(obj[name]);
      }
    }
  }
};
</script>

<style>
@import url(./public/css/common.css);
.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>