fix: 登录后顶栏名称错误

This commit is contained in:
caoqianming 2024-02-26 17:23:53 +08:00
parent b0452cfb96
commit 4918d99218
1 changed files with 153 additions and 143 deletions

View File

@ -1,6 +1,6 @@
<template> <template>
<!-- 通栏布局 --> <!-- 通栏布局 -->
<template v-if="layout=='header'"> <template v-if="layout == 'header'">
<header class="adminui-header"> <header class="adminui-header">
<div class="adminui-header-left"> <div class="adminui-header-left">
<div class="logo-bar"> <div class="logo-bar">
@ -10,8 +10,10 @@
<span>{{ baseName }}</span> <span>{{ baseName }}</span>
</div> </div>
<ul v-if="!ismobile" class="nav"> <ul v-if="!ismobile" class="nav">
<li v-for="item in menu" :key="item" :class="pmenu.path==item.path?'active':''" @click="showMenu(item)"> <li v-for="item in menu" :key="item" :class="pmenu.path == item.path ? 'active' : ''" @click="showMenu(item)">
<el-icon><component :is="item.meta.icon || 'el-icon-menu'" /></el-icon> <el-icon>
<component :is="item.meta.icon || 'el-icon-menu'" />
</el-icon>
<span>{{ item.meta.title }}</span> <span>{{ item.meta.title }}</span>
</li> </li>
</ul> </ul>
@ -21,19 +23,21 @@
</div> </div>
</header> </header>
<section class="aminui-wrapper"> <section class="aminui-wrapper">
<div v-if="!ismobile && nextMenu.length>0 || !pmenu.component" :class="menuIsCollapse?'aminui-side isCollapse':'aminui-side'"> <div v-if="!ismobile && nextMenu.length > 0 || !pmenu.component"
:class="menuIsCollapse ? 'aminui-side isCollapse' : 'aminui-side'">
<div v-if="!menuIsCollapse" class="adminui-side-top"> <div v-if="!menuIsCollapse" class="adminui-side-top">
<h2>{{ pmenu.meta.title }}</h2> <h2>{{ pmenu.meta.title }}</h2>
</div> </div>
<div class="adminui-side-scroll"> <div class="adminui-side-scroll">
<el-scrollbar> <el-scrollbar>
<el-menu :default-active="active" router :collapse="menuIsCollapse" :unique-opened="$CONFIG.MENU_UNIQUE_OPENED"> <el-menu :default-active="active" router :collapse="menuIsCollapse"
:unique-opened="$CONFIG.MENU_UNIQUE_OPENED">
<NavMenu :navMenus="nextMenu"></NavMenu> <NavMenu :navMenus="nextMenu"></NavMenu>
</el-menu> </el-menu>
</el-scrollbar> </el-scrollbar>
</div> </div>
<div class="adminui-side-bottom" @click="$store.commit('TOGGLE_menuIsCollapse')"> <div class="adminui-side-bottom" @click="$store.commit('TOGGLE_menuIsCollapse')">
<el-icon><el-icon-expand v-if="menuIsCollapse"/><el-icon-fold v-else /></el-icon> <el-icon><el-icon-expand v-if="menuIsCollapse" /><el-icon-fold v-else /></el-icon>
</div> </div>
</div> </div>
<Side-m v-if="ismobile"></Side-m> <Side-m v-if="ismobile"></Side-m>
@ -42,9 +46,9 @@
<Tags v-if="!ismobile && layoutTags"></Tags> <Tags v-if="!ismobile && layoutTags"></Tags>
<div class="adminui-main" id="adminui-main"> <div class="adminui-main" id="adminui-main">
<router-view v-slot="{ Component }"> <router-view v-slot="{ Component }">
<keep-alive :include="this.$store.state.keepAlive.keepLiveRoute"> <keep-alive :include="this.$store.state.keepAlive.keepLiveRoute">
<component :is="Component" :key="$route.fullPath" v-if="$store.state.keepAlive.routeShow"/> <component :is="Component" :key="$route.fullPath" v-if="$store.state.keepAlive.routeShow" />
</keep-alive> </keep-alive>
</router-view> </router-view>
<iframe-view></iframe-view> <iframe-view></iframe-view>
</div> </div>
@ -53,7 +57,7 @@
</template> </template>
<!-- 经典布局 --> <!-- 经典布局 -->
<template v-else-if="layout=='menu'"> <template v-else-if="layout == 'menu'">
<header class="adminui-header"> <header class="adminui-header">
<div class="adminui-header-left"> <div class="adminui-header-left">
<div class="logo-bar" style="width: 202px;background: #ffffff;margin-right: 10px;border-radius: 5px;"> <div class="logo-bar" style="width: 202px;background: #ffffff;margin-right: 10px;border-radius: 5px;">
@ -69,16 +73,17 @@
</div> </div>
</header> </header>
<section class="aminui-wrapper"> <section class="aminui-wrapper">
<div v-if="!ismobile" :class="menuIsCollapse?'aminui-side isCollapse':'aminui-side'"> <div v-if="!ismobile" :class="menuIsCollapse ? 'aminui-side isCollapse' : 'aminui-side'">
<div class="adminui-side-scroll"> <div class="adminui-side-scroll">
<el-scrollbar> <el-scrollbar>
<el-menu :default-active="active" router :collapse="menuIsCollapse" :unique-opened="$CONFIG.MENU_UNIQUE_OPENED"> <el-menu :default-active="active" router :collapse="menuIsCollapse"
:unique-opened="$CONFIG.MENU_UNIQUE_OPENED">
<NavMenu :navMenus="menu"></NavMenu> <NavMenu :navMenus="menu"></NavMenu>
</el-menu> </el-menu>
</el-scrollbar> </el-scrollbar>
</div> </div>
<div class="adminui-side-bottom" @click="$store.commit('TOGGLE_menuIsCollapse')"> <div class="adminui-side-bottom" @click="$store.commit('TOGGLE_menuIsCollapse')">
<el-icon><el-icon-expand v-if="menuIsCollapse"/><el-icon-fold v-else /></el-icon> <el-icon><el-icon-expand v-if="menuIsCollapse" /><el-icon-fold v-else /></el-icon>
</div> </div>
</div> </div>
<Side-m v-if="ismobile"></Side-m> <Side-m v-if="ismobile"></Side-m>
@ -87,9 +92,9 @@
<!-- <Tags v-if="!ismobile && layoutTags"></Tags> --> <!-- <Tags v-if="!ismobile && layoutTags"></Tags> -->
<div class="adminui-main" id="adminui-main"> <div class="adminui-main" id="adminui-main">
<router-view v-slot="{ Component }"> <router-view v-slot="{ Component }">
<keep-alive :include="this.$store.state.keepAlive.keepLiveRoute"> <keep-alive :include="this.$store.state.keepAlive.keepLiveRoute">
<component :is="Component" :key="$route.fullPath" v-if="$store.state.keepAlive.routeShow"/> <component :is="Component" :key="$route.fullPath" v-if="$store.state.keepAlive.routeShow" />
</keep-alive> </keep-alive>
</router-view> </router-view>
<iframe-view></iframe-view> <iframe-view></iframe-view>
</div> </div>
@ -98,7 +103,7 @@
</template> </template>
<!-- 功能坞布局 --> <!-- 功能坞布局 -->
<template v-else-if="layout=='dock'"> <template v-else-if="layout == 'dock'">
<header class="adminui-header"> <header class="adminui-header">
<div class="adminui-header-left"> <div class="adminui-header-left">
<div class="logo-bar"> <div class="logo-bar">
@ -108,7 +113,8 @@
</div> </div>
<div class="adminui-header-right"> <div class="adminui-header-right">
<div v-if="!ismobile" class="adminui-header-menu"> <div v-if="!ismobile" class="adminui-header-menu">
<el-menu mode="horizontal" :default-active="active" router background-color="#222b45" text-color="#fff" active-text-color="var(--el-color-primary)"> <el-menu mode="horizontal" :default-active="active" router background-color="#222b45" text-color="#fff"
active-text-color="var(--el-color-primary)">
<NavMenu :navMenus="menu"></NavMenu> <NavMenu :navMenus="menu"></NavMenu>
</el-menu> </el-menu>
</div> </div>
@ -121,9 +127,9 @@
<Tags v-if="!ismobile && layoutTags"></Tags> <Tags v-if="!ismobile && layoutTags"></Tags>
<div class="adminui-main" id="adminui-main"> <div class="adminui-main" id="adminui-main">
<router-view v-slot="{ Component }"> <router-view v-slot="{ Component }">
<keep-alive :include="this.$store.state.keepAlive.keepLiveRoute"> <keep-alive :include="this.$store.state.keepAlive.keepLiveRoute">
<component :is="Component" :key="$route.fullPath" v-if="$store.state.keepAlive.routeShow"/> <component :is="Component" :key="$route.fullPath" v-if="$store.state.keepAlive.routeShow" />
</keep-alive> </keep-alive>
</router-view> </router-view>
<iframe-view></iframe-view> <iframe-view></iframe-view>
</div> </div>
@ -143,28 +149,32 @@
<div class="adminui-side-split-scroll"> <div class="adminui-side-split-scroll">
<el-scrollbar> <el-scrollbar>
<ul> <ul>
<li v-for="item in menu" :key="item" :class="pmenu.path==item.path?'active':''" <li v-for="item in menu" :key="item" :class="pmenu.path == item.path ? 'active' : ''"
@click="showMenu(item)"> @click="showMenu(item)">
<el-icon><component :is="item.meta.icon || el-icon-menu" /></el-icon> <el-icon>
<component :is="item.meta.icon || el-icon-menu" />
</el-icon>
<p>{{ item.meta.title }}</p> <p>{{ item.meta.title }}</p>
</li> </li>
</ul> </ul>
</el-scrollbar> </el-scrollbar>
</div> </div>
</div> </div>
<div v-if="!ismobile && nextMenu.length>0 || !pmenu.component" :class="menuIsCollapse?'aminui-side isCollapse':'aminui-side'"> <div v-if="!ismobile && nextMenu.length > 0 || !pmenu.component"
:class="menuIsCollapse ? 'aminui-side isCollapse' : 'aminui-side'">
<div v-if="!menuIsCollapse" class="adminui-side-top"> <div v-if="!menuIsCollapse" class="adminui-side-top">
<h2>{{ pmenu.meta.title }}</h2> <h2>{{ pmenu.meta.title }}</h2>
</div> </div>
<div class="adminui-side-scroll"> <div class="adminui-side-scroll">
<el-scrollbar> <el-scrollbar>
<el-menu :default-active="active" router :collapse="menuIsCollapse" :unique-opened="$CONFIG.MENU_UNIQUE_OPENED"> <el-menu :default-active="active" router :collapse="menuIsCollapse"
:unique-opened="$CONFIG.MENU_UNIQUE_OPENED">
<NavMenu :navMenus="nextMenu"></NavMenu> <NavMenu :navMenus="nextMenu"></NavMenu>
</el-menu> </el-menu>
</el-scrollbar> </el-scrollbar>
</div> </div>
<div class="adminui-side-bottom" @click="$store.commit('TOGGLE_menuIsCollapse')"> <div class="adminui-side-bottom" @click="$store.commit('TOGGLE_menuIsCollapse')">
<el-icon><el-icon-expand v-if="menuIsCollapse"/><el-icon-fold v-else /></el-icon> <el-icon><el-icon-expand v-if="menuIsCollapse" /><el-icon-fold v-else /></el-icon>
</div> </div>
</div> </div>
<Side-m v-if="ismobile"></Side-m> <Side-m v-if="ismobile"></Side-m>
@ -175,9 +185,9 @@
<Tags v-if="!ismobile && layoutTags"></Tags> <Tags v-if="!ismobile && layoutTags"></Tags>
<div class="adminui-main" id="adminui-main"> <div class="adminui-main" id="adminui-main">
<router-view v-slot="{ Component }"> <router-view v-slot="{ Component }">
<keep-alive :include="this.$store.state.keepAlive.keepLiveRoute"> <keep-alive :include="this.$store.state.keepAlive.keepLiveRoute">
<component :is="Component" :key="$route.fullPath" v-if="$store.state.keepAlive.routeShow"/> <component :is="Component" :key="$route.fullPath" v-if="$store.state.keepAlive.routeShow" />
</keep-alive> </keep-alive>
</router-view> </router-view>
<iframe-view></iframe-view> <iframe-view></iframe-view>
</div> </div>
@ -197,129 +207,129 @@
</template> </template>
<script> <script>
import SideM from './components/sideM.vue'; import SideM from './components/sideM.vue';
import Topbar from './components/topbar.vue'; import Topbar from './components/topbar.vue';
import Tags from './components/tags.vue'; import Tags from './components/tags.vue';
import NavMenu from './components/NavMenu.vue'; import NavMenu from './components/NavMenu.vue';
import userbar from './components/userbar.vue'; import userbar from './components/userbar.vue';
import setting from './components/setting.vue'; import setting from './components/setting.vue';
import iframeView from './components/iframeView.vue'; import iframeView from './components/iframeView.vue';
import autoExit from './other/autoExit.js'; import autoExit from './other/autoExit.js';
import data from './../utils/baseJson'; import data from './../utils/baseJson';
export default { export default {
name: 'index', name: 'index',
components: { components: {
SideM, SideM,
Topbar, Topbar,
Tags, Tags,
NavMenu, NavMenu,
userbar, userbar,
setting, setting,
iframeView, iframeView,
autoExit autoExit
},
data() {
return {
settingDialog: false,
menu: [],
nextMenu: [],
pmenu: {},
active: ''
}
},
computed: {
baseName() {
// let baseInFo = data[data.current];
let baseName = this.$TOOL.data.get("BASE_INFO") !== null ? this.$TOOL.data.get("BASE_INFO").base.base_name : '智能管理平台';
// let baseName = baseInFo!==null?baseInFo.base.base_name:'';
return baseName;
}, },
data() { baseLogo() {
return { // let baseInFo = data[data.current];
settingDialog: false, let base_logo = this.$TOOL.data.get("BASE_INFO") !== null ? this.$TOOL.data.get("BASE_INFO").base.base_logo : 'img/logo.png';
menu: [], // let base_logo = baseInFo!==null?baseInFo.base.base_logo:'img/logo.png';
nextMenu: [], return base_logo
pmenu: {},
active: ''
}
}, },
computed:{ ismobile() {
baseName(){ return this.$store.state.global.ismobile
let baseInFo = data[data.current];
// let baseName = this.$TOOL.data.get("BASE_INFO")!==null?this.$TOOL.data.get("BASE_INFO").base.base_name:'';
let baseName = baseInFo!==null?baseInFo.base.base_name:'智能管理平台';
return baseName;
},
baseLogo(){
// let baseInFo = data[data.current];
let base_logo = this.$TOOL.data.get("BASE_INFO")!==null?this.$TOOL.data.get("BASE_INFO").base.base_logo:'img/logo.png';
// let base_logo = baseInFo!==null?baseInFo.base.base_logo:'img/logo.png';
return base_logo
},
ismobile(){
return this.$store.state.global.ismobile
},
layout(){
return this.$store.state.global.layout
},
layoutTags(){
return this.$store.state.global.layoutTags
},
menuIsCollapse(){
return this.$store.state.global.menuIsCollapse
}
}, },
created() { layout() {
document.title = this.$store.state.global.baseName return this.$store.state.global.layout
this.onLayoutResize(); },
window.addEventListener('resize', this.onLayoutResize); layoutTags() {
var menu = this.$router.sc_getMenu(); return this.$store.state.global.layoutTags
this.menu = this.filterUrl(menu); },
menuIsCollapse() {
return this.$store.state.global.menuIsCollapse
}
},
created() {
document.title = this.$store.state.global.baseName
this.onLayoutResize();
window.addEventListener('resize', this.onLayoutResize);
var menu = this.$router.sc_getMenu();
this.menu = this.filterUrl(menu);
this.showThis()
},
watch: {
$route() {
this.showThis() this.showThis()
}, },
watch: { layout: {
$route() { handler(val) {
this.showThis() document.body.setAttribute('data-layout', val)
}, },
layout: { immediate: true,
handler(val){ }
document.body.setAttribute('data-layout', val) },
}, methods: {
immediate: true, openSetting() {
this.settingDialog = true;
},
onLayoutResize() {
this.$store.commit("SET_ismobile", document.body.clientWidth < 992)
},
//
showThis() {
this.pmenu = this.$route.meta.breadcrumb ? this.$route.meta.breadcrumb[0] : {}
this.nextMenu = this.filterUrl(this.pmenu.children);
this.$nextTick(() => {
this.active = this.$route.meta.active || this.$route.fullPath;
})
},
//
showMenu(route) {
this.pmenu = route;
this.nextMenu = this.filterUrl(route.children);
if ((!route.children || route.children.length == 0) && route.component) {
this.$router.push({ path: route.path })
} }
}, },
methods: { //
openSetting(){ filterUrl(map) {
this.settingDialog = true; var newMap = []
}, map && map.forEach(item => {
onLayoutResize(){ item.meta = item.meta ? item.meta : {};
this.$store.commit("SET_ismobile", document.body.clientWidth < 992) //
}, if (item.meta.hidden || item.meta.type == "button") {
// return false
showThis(){
this.pmenu = this.$route.meta.breadcrumb ? this.$route.meta.breadcrumb[0] : {}
this.nextMenu = this.filterUrl(this.pmenu.children);
this.$nextTick(()=>{
this.active = this.$route.meta.active || this.$route.fullPath;
})
},
//
showMenu(route) {
this.pmenu = route;
this.nextMenu = this.filterUrl(route.children);
if((!route.children || route.children.length == 0) && route.component){
this.$router.push({path: route.path})
} }
}, //http
// if (item.meta.type == 'iframe') {
filterUrl(map){ item.path = `/i/${item.name}`;
var newMap = [] }
map && map.forEach(item => { //
item.meta = item.meta?item.meta:{}; if (item.children && item.children.length > 0) {
// item.children = this.filterUrl(item.children)
if(item.meta.hidden || item.meta.type=="button"){ }
return false newMap.push(item)
} })
//http return newMap;
if(item.meta.type=='iframe'){ },
item.path = `/i/${item.name}`; //退
} exitMaximize() {
// document.getElementById('app').classList.remove('main-maximize')
if(item.children&&item.children.length > 0){
item.children = this.filterUrl(item.children)
}
newMap.push(item)
})
return newMap;
},
//退
exitMaximize(){
document.getElementById('app').classList.remove('main-maximize')
}
} }
} }
}
</script> </script>