CanadaMes.git - Gitblit

New file
			@@ -0,0 +1,306 @@
			<template>
			<el-container style="flex: 1;height:100%;">
			<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" @click="goToHome">
			<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-menu-item index="/" @click="goToHome">
			<template slot="title">

			<i class="el-icon-menu"></i>

			<span>{{ $t('home') }}</span>
			</template>
			</el-menu-item> -->
			<!--一级菜单-->
			<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="addTag(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" style="height:30px;"></el-button>
			</div>
			<div class="tagContainer" style="display: flex;">
			<tag v-for="(tag, index) in tags" :key="index" :tag="tag" @removeTag="removeTag(index)" @switchTag="switchTag(index)"></tag>
			</div>
			<template>
			<el-submenu index="1" class="custom-submenu" >
			<template slot="title">
			<el-avatar src="../assets/emi.png" style="width:20px;height:20px;margin-top:30px;background-color: white;"></el-avatar>
			</template>
			<el-menu-item index="1-1" @click="logout">{{ $t('exit') }}</el-menu-item>
			<el-menu-item index="1-2" @click="showChangePasswordDialog">{{ $t('changePassword') }}</el-menu-item>
			</el-submenu>
			</template>
			<template>
			<el-dialog title="修改密码" :visible.sync="dialogVisible" width="30%">
			<el-form ref="form" :model="formData" label-width="100px">
			<el-form-item label="旧密码">
			<el-input v-model="formData.oldPassword" type="password" show-password></el-input>
			</el-form-item>
			<el-form-item label="新密码">
			<el-input v-model="formData.newPassword" type="password" show-password></el-input>
			</el-form-item>
			<el-form-item label="确认新密码">
			<el-input v-model="formData.confirmPassword" type="password" show-password></el-input>
			</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
			<el-button @click="dialogVisible = false">取消</el-button>
			<el-button type="primary" @click="savePassword">保存</el-button>
			</div>
			</el-dialog>
			</template>
			</el-menu>
			</el-header>
			<el-main>
			<keep-alive>
			<router-view/>
			</keep-alive>
			</el-main>
			</el-container>
			</el-container>
			</template>

			<script>
			import { selectList } from '../api/menuList'
			import { changePassword } from '../api/user'
			import { removeToken } from "../utils/auth";
			import LanguageMixin from '../lang/LanguageMixin'
			import { mapState, mapMutations } from 'vuex';
			import Tag from '../layout/tag.vue';
			import store from '../store';

			export default {
			name: "Layout",
			store,
			mixins: [LanguageMixin],
			data() {
			return {
			activeTag: '', // 当前激活的标签
			dialogVisible: false,
			formData: {
			oldPassword: '',
			newPassword: '',
			confirmPassword: ''
			},
			menuList: [],
			isCollapse: false,
			activePath: '',
			activePath1: '',
			menuListForm: {
			pageSize: 1,
			pageNum: -1
			}
			}
			},
			components: {
			Tag
			},
			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')
			});
			},
			computed: {
			...mapState('tags', ['tags'])
			},
			methods: {

			logout: function () {
			removeToken()
			this.$router.push('/login')
			},
			goToHome() {
			this.$router.push('/home');
			},
			...mapMutations('tags', ['addTag', 'removeTag', 'switchTag']),
			addTag(router) {
			let submenuItem;
			const menuItem = this.menuList.find(item => item.menuLists.some(menu => menu.router === router));
			if (menuItem) {
			submenuItem = menuItem.menuLists.find(menu => menu.router === router);
			}
			if (submenuItem) {
			const tag = submenuItem.router;
			this.$store.commit('tags/addTag', tag);
			}
			},


			removeTag(index) {
			this.$store.commit('tags/removeTag', index); // 从 Vuex Store 中移除标签
			},
			showChangePasswordDialog() {
			this.dialogVisible = true;
			},
			savePassword() {
			const { oldPassword, newPassword, confirmPassword } = this.formData;

			if (newPassword !== confirmPassword) {
			this.$message.error('新密码与确认密码不一致');
			return;
			}
			changePassword({oldPassword, newPassword}).then(res => {
			console.log(res.data);
			this.$message.success('密码修改成功');
			removeToken()
			this.$router.push('/login')
			}).catch(() => {

			});

			this.dialogVisible = false;
			},
			toggleCollapse: function () {
			this.isCollapse = !this.isCollapse;
			},
			replaceChineseWithEnglish(menuData) {
			// 定义中英文对照关系对象
			const translation = {
			'用户管理': 'UserManagement',
			'用户列表': 'UserList',
			'设备管理': 'DeviceManagement',
			'报警信息': 'AlarmInformation',
			'参数下发': 'ParameterSetting',
			'开关控制': 'SwitchControl',
			'I/O状态': 'I/O Status',
			'权限管理': 'PermissionManagement',
			'权限列表': 'PermissionList',
			'角色管理': 'RoleManagement',
			'角色列表': 'RoleList',
			'电气管理': 'Electrical management',
			'主页': 'Home'
			// 根据实际需求继续添加对照关系
			};

			menuData.forEach(menu => {
			menu.name = translation[menu.name] \|\| menu.name;
			menu.menuLists && menu.menuLists.forEach(subMenu => {
			subMenu.name = translation[subMenu.name] \|\| subMenu.name;
			});
			});
			}
			},
			watch: {
			'$route'(to) {
			// 切换路由时更新激活的标签
			const tag = this.menuList.some(item => item.menuLists.some(menu => '/' + menu.router === to.path));
			if (tag) {
			this.activeTag = tag;
			}
			}
			}
			}
			</script>

			<style scoped lang="less">

			.el-menu--horizontal > .el-submenu .el-submenu__title {
			height: 45px !important;
			}
			.custom-submenu {


			height: 90px !important;
			}


			.header-container {

			height: 30px !important; /* 设置较小的高度 */
			}



			.header-left {
			margin-right: auto;
			width:30px;

			}
			.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 {

			background-color: #576574;
			}
			</style>