yos_web/src/components/newLayout/modules/menu.vue

<template>
  <div class="menu_panel" >
    <div  v-if="show">
      <el-menu v-if="show"  :default-active="activeIndex" active-text-color="#3874f6" text-color="#333" class="el-menu-demo shadow" mode="horizontal" @select="handleSelect" ref="menuList" >
        <el-submenu v-for="(mod,index) in sys_modules" :key="index" :index="String(index)" >
          <template slot="title"><b>{{mod.systemmodulename}}</b></template>
          <el-menu-item :index="app.path" v-for="(app) in mod.apps" :key="app.index" @click="setActiveModules(mod,app)">{{app.meta.title}}</el-menu-item>
        </el-submenu>
        <!-- <el-menu-item v-show="!hasMoreApp(mod)" :index="mod.path" v-for="(mod) in sys_modules" :key="mod.index" @click="setActiveModules(mod,mod.apps[0])"><b>{{mod.systemmodulename}}</b></el-menu-item> -->
      </el-menu>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  data () {
    return {
      activeIndex:'2',
      modules:[],
      show:true
    }
  },
  computed:{
    ...mapGetters({
      activeApp:'activeApp',
      sys_modules:'sys_modules'
    })
  },
  methods:{
    hasMoreApp (mod) {
      if (mod.apps.length > 1) {
        return true
      } else {
        mod.path = mod.apps[0].path
        return false
      }
    },
    setActiveModules (mod,app) {
      const link = ()=>{
        this.$router.push({path:app.path})
      }
      this.$store.dispatch('setActiveApp',{name:app.systemappname,app:app,val:'',link})
      sessionStorage.setItem('active_modules',JSON.stringify(mod))
    },
    setDefaultData (mod) {
      let active_modules = JSON.parse(sessionStorage.getItem('active_modules'))
      let sys_modules = JSON.parse(sessionStorage.getItem('module_info'))
      let arr = sys_modules.filter(e=>{
        if (e.systemid === active_modules.systemid) {
          return e
        }
      })
      this.$store.dispatch('getModules',{mod:arr[0].modules})
    },
    handleSelect(key, keyPath) {
      this.activeIndex = key
    }
  },
  mounted () {
    this.setDefaultData()
  },
  watch:{
    activeApp (val) {
      this.show = false
      setTimeout(() => {
        this.show = true
        this.activeIndex = val.path
      }, 0);
    }
  }
}

</script>
<style>
.el-menu--popup{
  padding: 0 10px;
  min-width: 50px;
}
</style>
<style scoped>
.shadow{
   box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
   transform: translate3d(0,-2px,0);
   border-radius: 10px;
   border:none;
   overflow: hidden;
}
.menu_panel{
  padding: 0;
  height:58px;
  width: 100%;
  background: #fff;
  border-radius: 10px;
}
</style>