From eb967d7573a8297e493d455dfce2c77319215990 Mon Sep 17 00:00:00 2001
From: wuyouming666 <2265557248@qq.com>
Date: 星期三, 13 九月 2023 08:31:25 +0800
Subject: [PATCH] 注册页面中英文替换 修改电气管理顶部导航栏布局
---
CanadaMes-ui/src/layout/index.vue | 306 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 306 insertions(+), 0 deletions(-)
diff --git a/CanadaMes-ui/src/layout/index.vue b/CanadaMes-ui/src/layout/index.vue
new file mode 100644
index 0000000..b029768
--- /dev/null
+++ b/CanadaMes-ui/src/layout/index.vue
@@ -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>
\ No newline at end of file
--
Gitblit v1.8.0