| | |
| | | <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-container style="flex: 1;height: 100%;"> |
| | | <div style="width: 200px;background-color: #222f3e;height: 100%;" :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> |
| | | </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 :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"> |
| | | |
| | |
| | | <span>{{ item.name }}</span> |
| | | </template> |
| | | <!--二级菜单--> |
| | | |
| | | <el-menu-item :index="'/'+menu.router" |
| | | v-for="menu in item.menuLists" :key="menu.id" |
| | | @click="addTag(menu.router)"> |
| | | |
| | | <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> |
| | |
| | | </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"> |
| | | |
| | | <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> |
| | | <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> |
| | | <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" > |
| | | <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> |
| | | <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-header> |
| | | <el-main> |
| | | <keep-alive> |
| | | <router-view/> |
| | | <router-view /> |
| | | </keep-alive> |
| | | </el-main> |
| | | </el-container> |
| | |
| | | name: "Layout", |
| | | store, |
| | | mixins: [LanguageMixin], |
| | | data() { |
| | | data () { |
| | | return { |
| | | activeTag: '', // 当前激活的标签 |
| | | dialogVisible: false, |
| | |
| | | components: { |
| | | Tag |
| | | }, |
| | | created() { |
| | | created () { |
| | | selectList(this.menuListForm).then(res => { |
| | | this.menuList = res.data |
| | | |
| | |
| | | ...mapState('tags', ['tags']) |
| | | }, |
| | | methods: { |
| | | |
| | | |
| | | logout: function () { |
| | | removeToken() |
| | | this.$router.push('/login') |
| | | }, |
| | | goToHome() { |
| | | 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); |
| | | } |
| | | }, |
| | | 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) { |
| | | removeTag (index) { |
| | | this.$store.commit('tags/removeTag', index); // 从 Vuex Store 中移除标签 |
| | | }, |
| | | showChangePasswordDialog() { |
| | | showChangePasswordDialog () { |
| | | this.dialogVisible = true; |
| | | }, |
| | | savePassword() { |
| | | savePassword () { |
| | | const { oldPassword, newPassword, confirmPassword } = this.formData; |
| | | |
| | | if (newPassword !== confirmPassword) { |
| | | this.$message.error('新密码与确认密码不一致'); |
| | | return; |
| | | } |
| | | changePassword({oldPassword, newPassword}).then(res => { |
| | | 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) { |
| | | replaceChineseWithEnglish (menuData) { |
| | | // 定义中英文对照关系对象 |
| | | const translation = { |
| | | '用户管理': 'UserManagement', |
| | |
| | | } |
| | | }, |
| | | watch: { |
| | | '$route'(to) { |
| | | '$route' (to) { |
| | | // 切换路由时更新激活的标签 |
| | | const tag = this.menuList.some(item => item.menuLists.some(menu => '/' + menu.router === to.path)); |
| | | if (tag) { |
| | |
| | | </script> |
| | | |
| | | <style scoped lang="less"> |
| | | |
| | | .el-menu--horizontal > .el-submenu .el-submenu__title { |
| | | .el-menu--horizontal>.el-submenu .el-submenu__title { |
| | | height: 45px !important; |
| | | } |
| | | .custom-submenu { |
| | | |
| | | |
| | | height: 90px !important; |
| | | |
| | | .custom-submenu { |
| | | |
| | | |
| | | height: 90px !important; |
| | | } |
| | | |
| | | |
| | | .header-container { |
| | | |
| | | height: 30px !important; /* 设置较小的高度 */ |
| | | height: 30px !important; |
| | | /* 设置较小的高度 */ |
| | | } |
| | | |
| | | |
| | | |
| | | .header-left { |
| | | margin-right: auto; |
| | | width:30px; |
| | | |
| | | margin-right: auto; |
| | | width: 30px; |
| | | |
| | | } |
| | | |
| | | .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> |