From ee84c191faa2c235703eaa8cdc765729bed71a4f Mon Sep 17 00:00:00 2001
From: clll <1320612696@qq.com>
Date: 星期三, 06 九月 2023 17:37:46 +0800
Subject: [PATCH] Merge branch 'master' of http://10.153.19.150:10101/r/CanadaMes
---
CanadaMes-ui/src/layout/index.vue | 265 ++++++++++++++++++++++++----------------------------
1 files changed, 121 insertions(+), 144 deletions(-)
diff --git a/CanadaMes-ui/src/layout/index.vue b/CanadaMes-ui/src/layout/index.vue
index f886453..8ae46e0 100644
--- a/CanadaMes-ui/src/layout/index.vue
+++ b/CanadaMes-ui/src/layout/index.vue
@@ -1,29 +1,27 @@
<template>
<el-container style="flex: 1;">
-
<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>
+ <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>
-
- <!--涓�绾ц彍鍗�-->
+ 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">
@@ -35,7 +33,7 @@
<!--浜岀骇鑿滃崟-->
<el-menu-item :index="'/'+menu.router"
v-for="menu in item.menuLists" :key="menu.id"
- @click="saveNavState('/'+menu.router)" @select="saveNavState" :default-active="$route.path">
+ @click="addTag(menu.router)">
<template slot="title">
<!--鍥炬爣-->
<i :class="menu.icon"></i>
@@ -43,76 +41,71 @@
<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-container>
+ <el-header class="header-container">
- <div class="tagContainer" >
- <tag v-for="(tag, index) in tags" :key="index" :tag="tag" @removeTag="removeTag"></tag>
- </div>
<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>
- <template >
- <el-submenu index="1" class="custom-submenu" >
-
- <template slot="title">
- <el-avatar src="../assets/emi.png" style="width:30px;height:30px;margin-top:2px;">
- </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>
+ <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">
+ <tag v-for="(tag, index) in tags" :key="index" :tag="tag" @removeTag="removeTag(index)" @switchTag="switchTag(index)"></tag>
+ <!-- <el-button icon="el-icon-circle-close" class="close-all-btn" @click="removeAllTags"></el-button> -->
+ </div>
<template>
- <el-dialog title="淇敼瀵嗙爜" :visible.sync="dialogVisible" width="30%" s>
- <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-submenu index="1" class="custom-submenu">
+ <template slot="title">
+ <el-avatar src="../assets/emi.png" style="width:30px;height:30px;margin-top:2px;"></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>
- <router-view/>
+ <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 { 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';
+import Tag from '../layout/tag.vue';
+import store from '../store';
export default {
name: "Layout",
@@ -120,7 +113,6 @@
mixins: [LanguageMixin],
data() {
return {
-
activeTag: '', // 褰撳墠婵�娲荤殑鏍囩
dialogVisible: false,
formData: {
@@ -128,7 +120,6 @@
newPassword: '',
confirmPassword: ''
},
-
menuList: [],
isCollapse: false,
activePath: '',
@@ -139,13 +130,13 @@
}
}
},
- components: {
- Tag
- },
+ 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);
@@ -163,29 +154,24 @@
this.$router.push('/login')
},
goToHome() {
- this.$router.push('/home');
- },
- // 浣跨敤 mapMutations 杈呭姪鍑芥暟璋冪敤 Store 涓殑 mutations
- ...mapMutations('tags', ['addTag', 'removeTag']),
- // 鍒囨崲鏍囩鏃惰Е鍙戠殑鏂规硶
- saveNavState(activePath) {
- window.sessionStorage.setItem('activePath', activePath);
-
- const menuItem = this.menuList.find(item => item.menuLists.some(menu => menu.router === activePath));
- if (menuItem) {
- const submenuItem = menuItem.menuLists.find(menu => menu.router === activePath);
- if (submenuItem) {
- const tag = submenuItem.name;
- this.$store.commit('tags/addTag', tag); // 璋冪敤 Vuex Store 涓殑 addTag mutation
- }
- }
+ this.$router.push('/home');
},
- // 鍏抽棴鏍囩鏃惰Е鍙戠殑鏂规硶
- removeTag(tag) {
- this.removeTag(tag); // 浠� Vuex Store 涓Щ闄ゆ爣绛�
- },
-
+ ...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;
},
@@ -200,25 +186,16 @@
console.log(res.data);
this.$message.success('瀵嗙爜淇敼鎴愬姛');
removeToken()
- this.$router.push('/login')
-
+ this.$router.push('/login')
}).catch(() => {
});
this.dialogVisible = false;
},
-
-
-
-
-
toggleCollapse: function () {
this.isCollapse = !this.isCollapse;
},
- // saveNavState: function (activePath) {
- // window.sessionStorage.setItem('activePath', activePath)
- // },
replaceChineseWithEnglish(menuData) {
// 瀹氫箟涓嫳鏂囧鐓у叧绯诲璞�
const translation = {
@@ -232,7 +209,8 @@
'鏉冮檺绠＄悊': 'PermissionManagement',
'鏉冮檺鍒楄〃': 'PermissionList',
'瑙掕壊绠＄悊': 'RoleManagement',
- '瑙掕壊鍒楄〃': 'RoleList'
+ '瑙掕壊鍒楄〃': 'RoleList',
+ '鐢垫皵绠＄悊': 'Electrical management'
// 鏍规嵁瀹為檯闇�姹傜户缁坊鍔犲鐓у叧绯�
};
@@ -242,79 +220,78 @@
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">
-// .header-container {
-// display: flex;
-// justify-content: flex-start;
-// height: 10px; /* 璁剧疆杈冨皬鐨勯珮搴� */
-// }
-
.custom-submenu {
- height: 90px !important;
+ height: 90px !important;
}
.header-container {
-
- height: 30px !important; /* 璁剧疆杈冨皬鐨勯珮搴� */
- }
+
+ height: 30px !important; /* 璁剧疆杈冨皬鐨勯珮搴� */
+}
.header-left {
- margin-right: auto;
-
+ margin-right: auto;
+
}
.el-aside {
- height: 100vh;
- background-color: #222f3e;
- line-height: 200px;
+ height: 100vh;
+ background-color: #222f3e;
+ line-height: 200px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
- width: 200px;
- min-height: 400px;
+ width: 200px;
+ min-height: 400px;
}
.el-menu-demo {
- display: flex;
- width: 100%;
- height: 100%;
- justify-content: flex-end;
- align-items: center;
+ display: flex;
+ width: 100%;
+ height: 100%;
+ justify-content: flex-end;
+ align-items: center;
}
.el-menu-vertical-demo {
- border: 0;
+ border: 0;
}
.logo {
- background-color: #222f3e;
- display: flex;
- justify-content: center;
- align-items: center;
- height: 60px;
+ background-color: #222f3e;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 60px;
- .sys-name {
- font-size: 20px;
- color: #ffffff;
- margin-left: 10px;
- }
+ .sys-name {
+ font-size: 20px;
+ color: #ffffff;
+ margin-left: 10px;
+ }
}
.el-header {
- background-color: #576574;
+ background-color: #576574;
}
-</style>
+</style>
\ No newline at end of file
--
Gitblit v1.8.0