calf-feed-pc/src/views/Home.vue

<template>
 
  <el-container class ="home-container">
    <!-- 头部区域 -->
    <el-header>
      <div>
        
        <span>犊牛饲喂系统</span>
      </div>
      
      <el-button @click="logout" >退出</el-button>
    </el-header>
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <div class="toggle-button" @click="toggleCollapse">|||</div>
 
        <!-- 侧边栏菜单区域 -->
        <el-menu   background-color="#333744" text-color="#fff" active-text-color = "#409Eff" unique-opend :collapse="isCollapse" :collapse-transition="false"  router :default-active = "activePath">
          <!-- 一级菜单 -->
          <!-- index必须是字符串，所以拼接 +'' -->
          <el-submenu :index="item.id +''" v-for="item in menuList" :key="item.id">
            <!-- 一级菜单的模板区域 -->
            <template slot="title">
              <!-- <span class = "nav-icon"></span> -->
             
              <i class="iconfont el-icon-s-order"></i>
              <span>{{item.name}}</span>
            </template>
            <!-- 二级菜单 -->  
            <el-menu-item :index="'/' + items.path" v-for="items in item.children" :key="items.id" @click = "saveNavState(items)">
              <template slot="title">
                <i class="iconfont el-icon-s-order"></i>
                <span>{{items.name}}</span>
              </template>
            </el-menu-item>

          </el-submenu>

         
        </el-menu>
      </el-aside>
  
      <!-- 右侧主体内容 -->
      <el-container>
        
       

        <el-main >
          <!-- 路由占位符 -->
          <router-view></router-view>
        </el-main>
       <el-footer>
        
       </el-footer> 
      </el-container>


    </el-container>
  </el-container>


</template> 

<script>
 
import {  ajaxDataGet, ajaxDataPost, ajaxDataPut, ajaxDataDelete, checkButtons} from '@/api/common'
import { parseTime, json2excel } from '@/utils/index.js'
export default {
  data() {
    return {


      editableTabsValue: '2',
        editableTabs: [
          { title: '首页',  name: '/home'   }, 
          // { title: '角色列表',  name: '/roles'   }, 
        ],
        tabIndex: 2,





      isCollapse:false, //侧边栏是否展开
      activePath:"",//侧边栏高亮路径
      menuList:[
       
        // {
        //   name:"数据统计", id:20, order:1,iconclass:'iconfont el-icon-s-order',
        //   children:[
        //     {id:101,name:"饲喂过程",iconclass:'iconfont el-icon-message',path: 'FeedProcess'},
             
        //   ]
        // },
        // {
        //   name:"牛只管理", id:20, order:1,iconclass:'iconfont el-icon-s-order',
        //   children:[
        //     {id:201,name:"牛只信息",iconclass:'iconfont el-icon-message',path: 'CowInfo'},
        //     {id:202,name:"事件记录",iconclass:'iconfont el-icon-message',path: 'EventRecord'},
   
        //   ]
        // },
        // {
        //   name:"栏舍管理", id:30, order:1,iconclass:'iconfont el-icon-s-order',
        //   children:[
        //     {id:303,name:"牛只栏舍",iconclass:'iconfont el-icon-message',path: 'CowCowShed'},
        //     {id:304,name:"栏舍分组",iconclass:'iconfont el-icon-message',path: 'CowShedGroup'},
        //     // {id:304,name:"分类参数",iconclass:'iconfont el-icon-message',path: 'users56'},
        //     // {id:305,name:"产品分类",iconclass:'iconfont el-icon-message',path: 'categories'},
        //   ]
        // },
        // {
        //   name:"配方计划", id:40, order:1,iconclass:'iconfont el-icon-s-order',
        //   children:[
        //     {id:403,name:"饲喂计划",iconclass:'iconfont el-icon-message',path: 'FeedPlan'},
        //     {id:404,name:"配方模板",iconclass:'iconfont el-icon-message',path: 'FormulaTemplate'},
        //   ]
        // },


 
        // {
        //   name:"基础数据", id:60, order:6,iconclass:'iconfont el-icon-s-order',
        //   children:[
        //    {id:601,name:"犊牛类型",iconclass:'iconfont el-icon-message',path: 'CalfType'},
        //    {id:602,name:"工单类型",iconclass:'iconfont el-icon-message',path: 'WorkOrderType'},
        //    {id:603,name:"饲喂车管理",iconclass:'iconfont el-icon-message',path: 'FeedCarManagement'},
        //   //  {id:604,name:"疾病类型",iconclass:'iconfont el-icon-message',path: 'DiseaseType'},
        //    {id:605,name:"预设饲喂模板",iconclass:'iconfont el-icon-message',path: 'FeedTemplate'},

        //    {id:606,name:"默认标准参数",iconclass:'iconfont el-icon-message',path: 'DefaultPara'},
        //    {id:607,name:"饲料成本设置",iconclass:'iconfont el-icon-message',path: 'FeedCost'},
            
        //   ]
        // },

        // {
        //   name:"系统管理", id:60, order:6,iconclass:'iconfont el-icon-s-order',
        //   children:[
        //     {id:701,name:"用户管理",iconclass:'iconfont el-icon-message',path: 'User'},
        //     {id:702,name:"角色管理",iconclass:'iconfont el-icon-message',path: 'Role'},
              
        //   ]
        // },

      ]
    }
  },
  created(){


    //处理Store刷新后消失的问题
     // 在页面加载时读取sessionStorage
     if (sessionStorage.getItem('store')) {
        this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
      }
      // 在页面刷新时将store保存到sessionStorage里
      window.addEventListener('beforeunload', () => {
        sessionStorage.setItem('store', JSON.stringify(this.$store.state))
      })

      
     this.getMenuList()
     this.activePath = window.sessionStorage.getItem('activePath')
  },
  methods:{


  

      handleClick(val) {
        // console.log(tab, event);
        console.log(val.name);
        this.$router.push(val.name)
      },

  
      removeTab(targetName) {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }
        
        // this.editableTabsValue = activeName;
        // this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      },



 
    //退出
    logout(){  
      //清空token
      window.sessionStorage.clear()
      //跳转登录页
      this.$router.push('/login')
    },
    //获取所有菜单
    getMenuList(){
      var me = this 

     
      ajaxDataPost('/api/v1/system/user/permissions', {}).then(e => {
        console.log("getMenuList请求结果：",e)
          //打印请求成功结果
          if(e.code == 200 ){
            
            me.menuList = e.data.menu_list
            me.$store.state.buttonsList  = e.data.menu_buttons_path
          } else {
            me.menuList = []
            me.$store.state.buttonsList  = []
            
          }

        
  
        })


    },
    //折叠展开左侧菜单
    toggleCollapse(){
      this.isCollapse = ! this.isCollapse
    },

    //侧边栏高亮显示点击保存路径
    saveNavState(items){
      
      var activePath = '/' + items.path
      var name = items.name
      console.log("activePath",activePath)
      window.sessionStorage.setItem('activePath',activePath)


  

    }

  }
}
</script>
<!-- 加了scoped，则是仅在此组件里生效 -->
<style scoped>

.nav-icon{display:inline-block;height: 30px;width: 30px; background:  url("../assets/images/nlogin-bg1.jpg") no-repeat; }

.home-container{height:100%}
/* el-header一个类名就是一个样式，可以直接赋样式 */
.el-header{background-color:#373d41;display:flex;justify-content:space-between;padding-left:0;align-items: center;color:#fff;font-size:20px;} 
.el-header div{display:flex;align-items:center;}
.el-header div span{margin-left:15px;}

.el-aside{background-color:#333744;} 
.el-aside .el-menu{border-right: none;text-align: left}

.el-main{background-color:#eaedf1;  height:80vh;padding:0px} 

.iconfont{margin-right:10px}

.toggle-button{background-color:#4a5064;font-size:10px;line-height:24px;color:#fff;text-align:center;cursor:pointer;}
</style>