|
|
@@ -1,287 +0,0 @@
|
|
|
-<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-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="handleClick">
|
|
|
- <el-tab-pane
|
|
|
- v-for="(item, index) in editableTabs"
|
|
|
- :key="item.name"
|
|
|
- :label="item.title"
|
|
|
- :name="item.name"
|
|
|
- >
|
|
|
- {{item.content}}
|
|
|
- </el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
-
|
|
|
- <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)
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- this.editableTabs.push({
|
|
|
- title: name,
|
|
|
- name: activePath,
|
|
|
- });
|
|
|
- this.editableTabsValue = 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>
|
