yos_meida/src/components/layout/index.vue

<template>
  <div class="flex-align-center">
    <div class="nav-list">
      <div class="nav-top-item">
        <div class="logo-avatar">
          <img v-show="img.usetype === 'actionlogo'" v-for="img in siteinfo.attinfos" :key="img.index" style="width:100%" :src="img.url" alt="">
        </div>
        <div class="item" :class="routerName === '工作台'?'active':''" @click="($router.push('/home'),act_id = null)">
          <img width="30" src="../../assets/nav_icon/work_station.svg" alt="">
          <p>工作台</p>
        </div>
        <div class="item" :class="routerName === '消息中心'?'active':''" @click="($router.push('/message'),act_id = null)">
          <img width="30" src="../../assets/nav_icon/message.svg" alt="">
          <p>消息</p>
        </div>
        <div class="item" :class="item.systemmoduleid === act_id?'active':''" v-for="item in shortcutlist" :key="item.systemmoduleid" @click="redictToModules(item)">
          <p v-if="item.issystem === 0" class="close-shortcut" @click.stop="deleteShortcut(item)"><i class="el-icon-error"></i></p>
          <img width="30" :src="item.iconurl_mainnav" alt="">
          <p>{{item.systemmodulename}}</p>
        </div>
      </div>
      <!-- <div class="nav-bottom-item">
        <div class="item">
           <img width="30" src="../../assets/nav_icon/more.svg" alt="">
        </div>
      </div> -->
    </div>
    <el-container>
      <socket-message></socket-message>
      <el-header><myheader :siteinfo="siteinfo"></myheader></el-header>
      <div class="modules-panel flex-align-center flex-between">
        <p>{{routerName}}</p>
        <el-button size="mini" @click="$router.go(-1)">返 回</el-button>
      </div>
      <el-container class="mymain">
        <el-aside v-if="ast_nav" width="180px"><myaside ref="aside"></myaside></el-aside>
        <el-container>
          <el-main>
            <keep-alive include="agentIndex">
              <router-view></router-view>
            </keep-alive>
          </el-main>
          <!-- <el-footer class="flex-footer">
            <p>技术支持:XXXXXXX</p><br>
          </el-footer> -->
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import myheader from './modules/header.vue'
import myaside from './modules/aside.vue'
import socketMessage from '@/components/socketMessage/index.vue'
import {mapGetters} from 'vuex'
export default {
  components:{
    myheader,
    myaside,
    socketMessage
  },
  computed:{
    ...mapGetters({
      siteinfo:'siteinfo',
      shortcutlist:'shortcutlist'
    })
  },
  data () {
    return {
      routerName:'',
      modeuls:[],
      act_id:null
    }
  },
  mounted() {
  },
  methods:{
    siteInfos () {
      this.$store.dispatch('querySiteInfo',{
        "classname": "webmanage.site.site",
        "method": "querySite",
        "content": {}
      })
    },
    // 查询常用栏数据
    async query_usershortcuts () {
      this.$store.dispatch('setUsershortcuts')
    },
    redictToModules (item) {
      this.act_id = item.systemmoduleid
      // 保存当前进入的模块数据
      sessionStorage.setItem('active_modules',JSON.stringify(item))
      // 跳转
      this.$router.push({path:item.apps[0].path})

      window.sessionStorage.setItem('currentPath',item.apps[0].path)
      // 查询侧边栏应用数据
      setTimeout(() => {
        this.$refs['aside'].getAuthList()
      }, 0);
    },
    async deleteShortcut (item) {
      const res = await this.$api.requested({
        "classname": "sysmanage.develop.userauth.userauth",
        "method": "delete_usershortcuts",
        "content": {
          "systemmoduleid":item.systemmoduleid
        }
      })
      this.$store.dispatch('setUsershortcuts')
      
      // 若当前删除模块为激活红的模块则返回首页
      let systemmodulename = JSON.parse(sessionStorage.getItem('active_modules')).systemmodulename
      if (item.systemmodulename === systemmodulename) {
        this.$router.replace({path:'/home'})
      }
      
    }
  },
  created () {
    this.siteInfos()
    this.query_usershortcuts()
    this.routerName = this.$route.meta.title
    this.ast_nav = this.$route.meta.ast_nav
  },
  watch:{
    $route (val) {
      this.routerName = val.meta.title
      this.ast_nav = val.meta.ast_nav
    }
  }
}

</script>
<style>

</style>
<style scoped>
.nav-list{
  flex:0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 80px;
  max-width: 80px;
  height: calc(100vh - 30px);
  padding:15px 0;
  background: #3874F6;
}
.logo-avatar{
  width: 50px;
  height: 50px;
  margin: 0 auto 30px auto;
  border-radius: 8px;
  background: #f1f2f3;
  overflow: hidden;
}
.nav-top-item{
  overflow-y: scroll;
  
}

.item{
  position: relative;
  width: 40px;
  padding: 10px;
  margin:0 auto 20px auto;
  cursor: pointer;
  text-align: center;
  
}
.item p{
  font-size: 10px;
  color: #fff;
  margin-top:5px
}
.active {
  border-radius: 8px;
  background: #095DE0;
}
.item:hover {
  border-radius: 8px;
  background: #095DE0;
  
}
.close-shortcut {
  position: absolute;
  display: none;
  top:-10px;
  right:-5px;
}
.item:hover .close-shortcut {
  display: block;
}
.close-shortcut i{
  font-size: 20px;
}
.mymain{
  height: calc(100vh - 99px);
}
.el-header{
  padding: 0;
  border-bottom: 1px solid #f1f2f3;
  z-index: 999;

}
.el-main{
  position: relative;
  padding: 0;
  /* background: #f1f2f3; */
}
.flex-footer{
  display: flex;
  align-items: center;
  justify-content:  center;
  flex-wrap: wrap;
  font-size: 14px;
  color: #999;
  padding: 10px 0;
  border-top:1px solid #f1f2f3;
}
.flex-footer p{
  width: 100%;
  text-align: center;
}
.modules-panel{
  height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid #f1f2f3;
  background: #fff;
}
.nav-top-item::-webkit-scrollbar{
  display:none !important;
}
</style>