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

<template>
  <div class="aside__panel">
    <div class="logo">
      <img v-show="img.usetype === 'actionlogo'" v-for="img in siteinfo.attinfos" :key="img.index" style="height:40px" :src="img.url" alt="">
    </div>
    <el-menu
      style="background:none"
      text-color="#fff"
      active-text-color="#000"
      class="el-menu-vertical-demo">
      <el-menu-item :index="String(item.systemid)" v-for="item in systemList" :key="item.index" @click="handelMenuClick(item,'system')">
        <span slot="title">{{item.systemname}}</span>
      </el-menu-item>
      <el-divider></el-divider>
      <el-menu-item :index="String(index + 10)" v-for="(item,index) in menuApp" :key="index" @click="handelMenuAppClick(item,'app')">
        <div class="flex-align-center flex-between menuItem">
          <span slot="title">{{item.systemappname}}</span>
          <i class="el-icon-error menuIconClose" @click.stop="deleteMenuApp(item)"></i>
        </div>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'

export default {
  data () {
    return {
      systemList:[],
      active:"0"
    }
  },
  computed:{
    ...mapGetters({
      menuApp:'menuApp',
      siteinfo:'siteinfo',
    })
  },
  methods:{
    handelMenuClick (item,type) {
      this.active = String(item.systemid)
      this.$emit('getModules',item.modules,type)
    },
    handelMenuAppClick (app,type) {
      let system = JSON.parse(sessionStorage.getItem('module_info'))
      let mod = system.filter(e=>{return e.systemid === app.systemid})[0].modules.filter(e=>{return e.systemmoduleid === app.systemmoduleid})[0]
      let clickApp = mod.apps.filter(e=>{return e.systemappid === app.systemappid})
      sessionStorage.setItem('active_modules',JSON.stringify(mod))

      this.$emit('getModules',system.filter(e=>{return e.systemid === app.systemid})[0].modules,type)

      this.$store.dispatch('setActiveApp',{app:clickApp[0],val:''})
      
      this.$router.push({path:clickApp[0].path})
    },
    async deleteMenuApp (item) {
      const res = await this.$api.requested({
        "classname": "sysmanage.develop.userauthforweb.userauth",
        "method": "delete_usershortcuts",
        "content": {
          "systemappid":item.systemappid
        }
      })
      this.$store.dispatch('setAppMenu')
    }
  },
  mounted () {
    this.systemList = JSON.parse(sessionStorage.getItem('module_info'))
    this.$store.dispatch('setAppMenu')
  },
  watch:{
    $route (val) {
     
    }
  }
}

</script>
<style>
.aside__panel {
  margin: 0 10px 0 0;
  font-weight: bold;
  transition: linear .3s;
}
.aside__panel .el-menu-item{
  height: 40px;
  line-height: 40px;
  border-radius: 0 40px 40px 0;
  margin: 5px 0;
}
.aside__panel .el-menu-item:hover{
  background-color: rgba(255 ,255,255,1) !important;
  border-radius: 0 40px 40px 0;
  color:#333 !important;
}
.el-menu-item:focus, .el-menu-item:hover{
  background: none;
}
.is-active .menuIconClose{
  display: block !important;
}

</style>
<style scoped>
.is-active{
  background-color: rgba(255 ,255,255,1) !important;
  border-radius: 0 40px 40px 0;
  color:#333 !important;
  box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
}
.logo{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  height: 62px;
  line-height: 62px;
  color:#fff;
  padding-left:20px;
  /* border-right: 1px solid #f1f2f3; */
}
.menuIconClose{
  display: none;
  color:#333
}
.menuItem:hover .menuIconClose{
  display: block;
}
</style>