<template>
|
<el-container>
|
|
<div style="width: 200px;background-color: #222f3e" :style="{width: isCollapse?'70px':'250px'}">
|
<el-aside :width="isCollapse?'70px':'250px'">
|
<el-col :gutter="20">
|
<el-row :span="4">
|
<div class="logo">
|
<div class="sys-name" v-show="!isCollapse">{{ $t('northglassMESsystem') }}</div>
|
</div>
|
</el-row>
|
<el-row :span="20">
|
<el-menu :default-active="activePath" class="el-menu-vertical-demo"
|
background-color="#222f3e" text-color="#fff" active-text-color="#ffd04b"
|
:collapse="isCollapse" :unique-opened="true"
|
:collapse-transition="false" :router="true">
|
<!--一级菜单-->
|
<el-submenu :index="item.id.toString()" v-for="item in menuList" :key="item.id">
|
<!--一级菜单模板区域-->
|
<template slot="title">
|
<!--图标-->
|
<i :class="item.icon"></i>
|
<!--文本-->
|
<span>{{ item.name }}</span>
|
</template>
|
<!--二级菜单-->
|
<el-menu-item :index="'/'+menu.router"
|
v-for="menu in item.menuLists" :key="menu.id"
|
@click="saveNavState('/'+menu.router)">
|
<template slot="title">
|
<!--图标-->
|
<i :class="menu.icon"></i>
|
<!--文本-->
|
<span>{{ menu.name }}</span>
|
</template>
|
</el-menu-item>
|
</el-submenu>
|
</el-menu>
|
</el-row>
|
</el-col>
|
</el-aside>
|
</div>
|
<el-container>
|
|
<el-header class="header-container">
|
|
<el-menu :default-active="activePath1" class="el-menu-demo" mode="horizontal"
|
background-color="#576574" text-color="#fff" active-text-color="#ffd04b">
|
<div class="header-left">
|
<el-button :icon="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'" @click="toggleCollapse"></el-button>
|
</div>
|
<el-submenu index="1" class="user-icon">
|
|
<template slot="title">
|
<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
|
</el-avatar>
|
</template>
|
<el-menu-item index="1-1" @click="logout">{{ $t('exit') }}</el-menu-item>
|
</el-submenu>
|
|
</el-menu>
|
</el-header>
|
<el-main>
|
<router-view/>
|
</el-main>
|
</el-container>
|
</el-container>
|
</template>
|
|
<script>
|
import {selectList} from '../api/menuList'
|
import {removeToken} from "../utils/auth";
|
import LanguageMixin from '../lang/LanguageMixin'
|
|
export default {
|
name: "Layout",
|
mixins: [LanguageMixin],
|
data() {
|
return {
|
|
menuList: [],
|
isCollapse: false,
|
activePath: '',
|
activePath1: '',
|
menuListForm: {
|
pageSize: 1,
|
pageNum: -1
|
}
|
}
|
},
|
created() {
|
selectList(this.menuListForm).then(res => {
|
this.menuList = res.data
|
|
const language = this.$i18n.locale;
|
if (language === 'en-US') {
|
this.replaceChineseWithEnglish(this.menuList);
|
}
|
// 记录上一次激活的菜单
|
this.activePath = window.sessionStorage.getItem('activePath')
|
});
|
},
|
methods: {
|
logout: function () {
|
removeToken()
|
this.$router.push('/login')
|
},
|
|
toggleCollapse: function () {
|
this.isCollapse = !this.isCollapse;
|
},
|
saveNavState: function (activePath) {
|
window.sessionStorage.setItem('activePath', activePath)
|
},
|
replaceChineseWithEnglish(menuData) {
|
// 定义中英文对照关系对象
|
const translation = {
|
'用户管理': 'UserManagement',
|
'用户列表': 'UserList',
|
'设备管理': 'DeviceManagement',
|
'报警信息': 'AlarmInformation',
|
'下发参数': 'ParameterSetting',
|
'开关控制': 'SwitchControl',
|
'I/O状态': 'I/O Status',
|
'权限管理': 'PermissionManagement',
|
'权限列表': 'PermissionList',
|
'角色管理': 'RoleManagement',
|
'角色列表': 'RoleList'
|
// 根据实际需求继续添加对照关系
|
};
|
|
menuData.forEach(menu => {
|
menu.name = translation[menu.name] || menu.name;
|
menu.menuLists && menu.menuLists.forEach(subMenu => {
|
subMenu.name = translation[subMenu.name] || subMenu.name;
|
});
|
});
|
|
|
}
|
|
}
|
|
}
|
</script>
|
|
<style scoped lang="less">
|
.header-container {
|
display: flex;
|
justify-content: flex-start;
|
}
|
|
.header-left {
|
margin-right: auto;
|
}
|
.el-aside {
|
height: 100vh;
|
background-color: #222f3e;
|
line-height: 200px;
|
}
|
|
.el-menu-vertical-demo:not(.el-menu--collapse) {
|
width: 200px;
|
min-height: 400px;
|
}
|
|
.el-menu-demo {
|
display: flex;
|
width: 100%;
|
height: 100%;
|
justify-content: flex-end;
|
align-items: center;
|
|
}
|
|
.el-menu-vertical-demo {
|
border: 0;
|
}
|
|
.logo {
|
background-color: #222f3e;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
height: 60px;
|
|
.sys-name {
|
font-size: 20px;
|
color: #ffffff;
|
margin-left: 10px;
|
}
|
}
|
|
.el-header {
|
padding: 0;
|
background-color: #576574;
|
}
|
</style>
|
