From baef763e1319d58eda668a5cac6edd8a150defd8 Mon Sep 17 00:00:00 2001
From: wu <731351411@qq.com>
Date: 星期二, 05 九月 2023 17:00:59 +0800
Subject: [PATCH] Merge branch 'master' of ssh://10.153.19.150:29418/CanadaMes
---
CanadaMes-ui/src/layout/index.vue | 122 ++++++++++++++++++++++++++++++----------
1 files changed, 90 insertions(+), 32 deletions(-)
diff --git a/CanadaMes-ui/src/layout/index.vue b/CanadaMes-ui/src/layout/index.vue
index 1ce7f0f..f886453 100644
--- a/CanadaMes-ui/src/layout/index.vue
+++ b/CanadaMes-ui/src/layout/index.vue
@@ -5,16 +5,25 @@
<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>
+ <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">
@@ -26,7 +35,7 @@
<!--浜岀骇鑿滃崟-->
<el-menu-item :index="'/'+menu.router"
v-for="menu in item.menuLists" :key="menu.id"
- @click="saveNavState('/'+menu.router)">
+ @click="saveNavState('/'+menu.router)" @select="saveNavState" :default-active="$route.path">
<template slot="title">
<!--鍥炬爣-->
<i :class="menu.icon"></i>
@@ -34,36 +43,41 @@
<span>{{ menu.name }}</span>
</template>
</el-menu-item>
+
</el-submenu>
+
</el-menu>
</el-row>
</el-col>
</el-aside>
</div>
- <el-container>
+ <el-container >
- <el-header class="header-container">
- <!-- <div class="tagContainer">
- <tag></tag>
-
- </div> -->
+ <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"></el-button>
+ <div class="header-left" >
+ <el-button :icon="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'" @click="toggleCollapse" style="height:30px"></el-button>
</div>
- <el-submenu index="1" class="user-icon">
+ <template >
+ <el-submenu index="1" class="custom-submenu" >
- <template slot="title">
- <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
+ <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>
+ </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-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>
@@ -96,13 +110,18 @@
import {changePassword} from '../api/user'
import {removeToken} from "../utils/auth";
import LanguageMixin from '../lang/LanguageMixin'
-// import Tag from '../layout/tag.vue';
+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: '',
@@ -120,9 +139,9 @@
}
}
},
- // components: {
- // Tag
- // },
+ components: {
+ Tag
+ },
created() {
selectList(this.menuListForm).then(res => {
this.menuList = res.data
@@ -135,12 +154,36 @@
this.activePath = window.sessionStorage.getItem('activePath')
});
},
+ computed: {
+ ...mapState('tags', ['tags'])
+ },
methods: {
logout: function () {
removeToken()
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
+ }
+ }
+ },
+ // 鍏抽棴鏍囩鏃惰Е鍙戠殑鏂规硶
+ removeTag(tag) {
+ this.removeTag(tag); // 浠� Vuex Store 涓Щ闄ゆ爣绛�
+ },
showChangePasswordDialog() {
@@ -173,9 +216,9 @@
toggleCollapse: function () {
this.isCollapse = !this.isCollapse;
},
- saveNavState: function (activePath) {
- window.sessionStorage.setItem('activePath', activePath)
- },
+ // saveNavState: function (activePath) {
+ // window.sessionStorage.setItem('activePath', activePath)
+ // },
replaceChineseWithEnglish(menuData) {
// 瀹氫箟涓嫳鏂囧鐓у叧绯诲璞�
const translation = {
@@ -209,13 +252,28 @@
</script>
<style scoped lang="less">
-.header-container {
- display: flex;
- justify-content: flex-start;
+// .header-container {
+// display: flex;
+// justify-content: flex-start;
+// height: 10px; /* 璁剧疆杈冨皬鐨勯珮搴� */
+// }
+
+.custom-submenu {
+
+
+ height: 90px !important;
}
+
+.header-container {
+
+ height: 30px !important; /* 璁剧疆杈冨皬鐨勯珮搴� */
+ }
+
+
.header-left {
margin-right: auto;
+
}
.el-aside {
height: 100vh;
@@ -256,7 +314,7 @@
}
.el-header {
- padding: 0;
+
background-color: #576574;
}
</style>
--
Gitblit v1.8.0