index.vue

<template>
  <div class="analysis-wrapper customer-wrapper ipages-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 iPageMenu" :key="item.path" style="text-align:left" v-if="permissControl(item.path) && hasChildPermission(item.children)">
          <template slot="title">
            <i :class="['ipage-icon', `${item.icon}-icon`]"></i>
            <!-- <span @click="sumenuSelect(item.path)">{{i18n(item.name)}}</span> -->
            <span @click="sumenuSelect(item.path)">{{langFormat(item.label,item.nodeTw,item.nodeEn)}}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item :index="child.path" v-for="child in item.children" :key="child.path" v-if="permissControl(child.path)">
              <!-- <i :class="['icon', 'font_family', 'custom-icon', `icon-${child.iconClass}_icon`, `${child.iconClass}-icon`]"></i> -->
              <!-- <span slot="title">{{i18n(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="ipage-page">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import defaultImg from '@/assets/img/behavior/default.png'
export default {
  data() {
    return {
      activeIndex: '',
      moreOptVisible: false,
      tableData: [],
      defaultImg: defaultImg,
      currentPage: 1,
      pageArr: [10, 50, 100],
      pageSize: 10,
      totalPage: null,
      repTitle: '',
      iPageMenu: [],
      menuArr: [],
      reidClass: true
    }
  },
  components: {
  },
  watch: {
    '$route.path':function(newVal){
      console.log(newVal)
      this.activeIndex = newVal.split('/')[2];
    }
  },
  methods: {
    i18n(name) {
      let languageLable =  'iPage.' + 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,'ipage',key);
    },
    sumenuSelect(key) {
      /*if (key === 'ipageaccount') {
        if ((window.location.href.split('/')).indexOf(key) === -1) {
          this.$router.push('/ipage/' + key);
        }
      }*/
    },
    refreshSelect(path) {
      this.$router.push('/ipage/' + path);
    },
    refresh() {
      console.log(this.$router.history.current)
      let name = this.$router.history.current.matched[2].name;
      let path = this.$router.history.current.path;
      this.activeIndex = name;
      this.refreshSelect(name)
      let obj = [
        'ipageacc',
        'ipageaccount',
        'ipagemalllive',
        'ipagemallday',
        'ipagemallmonth',
        'ipagemallyear',
        'ipagefloorday',
        'ipagefloormonth',
        'ipageflooryear',
        'ipagezoneday',
        'ipagezonemonth',
        'ipagezoneyear',
        'ipageformatday',
        'ipageformatmonth',
        'ipageformatyear',
        'ipagetime',
        'ipagematch'
      ]
      // if (obj.includes(name)) {
        // this.activeIndex = name;
        // this.refreshSelect(name)
      // }
    },
  },
  created() {
    if (!window._vionConfig.allMenu) {
      this.menuArr = JSON.parse(window.localStorage.getItem('menuName'))
    }
  },
  mounted() {
    let firstPath = '' , name;
    name = this.$router.history.current.name;
    this.iPageMenu = []
    let menu  = JSON.parse(window.localStorage.getItem('menu'))
    menu.children.forEach((item,index)=>{
      if(item.path=="ipage"){
        this.iPageMenu = item.children
      }
    })
    // debugger
    // let path = this.$router.history.current.path;
    if (!name) {
      this.activeIndex = this.iPageMenu[0].children[0].path;
      this.menuSelect(this.iPageMenu[0].children[0].path, [this.iPageMenu[0].children[0].path])
    } else {
      this.refresh()
    }
  },
}
</script>
<style>
@import url(./common/css/public.css);
.ipages-wrapper .ipage-icon{
  display: inline-block;
  position: relative;
  width: 16px !important;
  height: 16px !important;
  background-size: contain;
}
.ipages-wrapper .ipage-icon.ipageacc-icon{
  background-image: url('~@/assets/img/ipage/acc_ico.png');
}
.ipages-wrapper .ipage-icon.ipagemall-icon{
  background-image: url('~@/assets/img/ipage/mall_ico.png');
}
.ipages-wrapper .ipage-icon.ipagefloor-icon{
  background-image: url('~@/assets/img/ipage/floor_ico.png');
}
.ipages-wrapper .ipage-icon.ipagezone-icon{
  background-image: url('~@/assets/img/ipage/zone_ico.png');
}
.ipages-wrapper .ipage-icon.ipageformat-icon{
  background-image: url('~@/assets/img/ipage/format_ico.png');
}
.ipages-wrapper .ipage-icon.ipageactivity-icon{
  background-image: url('~@/assets/img/ipage/zone_ico.png');
}
@media only screen and (max-width: 1680px) {
  .ipage-icon {
      width: 16px !important;
      height: 16px !important;
  }
}
</style>