index.vue 3.56 KB
<template>
  <div class="analysis-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="analysis-page">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        activeIndex: '',
        moreOptVisible: false,
        customerMenu: [],
        menuArr: [],
      }
    },
    components: {},
    methods: {
      i18nFomatter(name) {
        let languageLable = 'businessAnalysis.' + 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,'businessAnalysis',key);
      },
      refreshSelect(path) {
        this.$router.push('/businessAnalysis/' + 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 = 'competitivePassengerFlow'
      } else {
        firstPath = this.menuArr[this.menuArr.indexOf('businessAnalysis') + 2];
      }
      this.customerMenu = []
      let menu  = JSON.parse(window.localStorage.getItem('menu'))
      menu.children.forEach((item,index)=>{
        if(item.path=="businessAnalysis"){
          this.customerMenu = item.children
        }
      })
      name = this.$router.history.current.name;
      if (!name) {
        this.activeIndex = firstPath;
        this.menuSelect(firstPath, [firstPath]);
      } else {
        this.refresh()
      }

    }
  }
</script>

<style>
  .analysis-page {
    width: 100%;
    height: 100%;
    overflow: auto;
    min-width: 1000px;
  }
</style>