页面导航栏其中一个菜单点击时第一次点击左侧菜单栏没有子菜单,并且导航栏未高亮,其他导航栏菜单无这个问题,只有这个连续点击两次才正常高亮并展示左侧菜单,下面是页面代码<style>
@import "./assets/style/MainApp.css";
</style>
<template>
<el-container
id="app"
v-if="$store.state.
user&&$store.state.
user.id"
style="overflow-x
: visible;border
: 0;"
v-loading="isLoading"
element-loading-text="加载中···"
>
<!-- ↓↓ 头部栏 ↓↓ -->
<el-header v-if="!hideHeader" class="el-header_index" style="height
:55px;position
:fixed;width
:100%;z-index
:1999;">
<div class="toplogo" >
<img src="@/assets/images/logo.png" class="logo_img"/>
</div>
<div class="logo" style="margin-left
: 70px">
<router-link
:to="{path
: indexPage}">
{{ "PCS能源与碳排放管控功能" }}
</router-link>
</div>
<el-tabs
v-if="menuList&&menuList.length>0"
:class="headerTabMenuClass"
class="top-menu"
v-model="activeMenu"
@tab-click="(index)=>handleSelect(index,true)">
<el-tab-pane v-for="(item, index) in menuList"
:name="item.id"
:key="index">
<span slot="label" style="margin
: 0px 20px;">{{ item.name }}</span>
</el-tab-pane>
</el-tabs>
<div class="topbar">
<div class="menu">
<div class="right">
<!-- 测试按钮 -->
<div class="topbar_but" @click="logInfo" v-if="false">
<i class="el-icon-cpu"></i>
</div>
<!-- 主页按钮 -->
<div class="topbar_but" @click="goPage(indexPage)">
<i class="sinopec-icon icon-home"></i>
</div>
<!-- 全屏按钮 -->
<div class="topbar_but" @click="toggleScreenFull">
<el-tooltip
:content="isFullscreen?'取消全屏'
:'全屏'" effect="dark" placement="bottom">
<i class="sinopec-icon icon-Fullscreen" style="cursor
: pointer;"></i>
</el-tooltip>
</div>
<!-- 按钮 -->
<div class="gxh" @click="openSetting" v-if="false">
<i class="el-icon-s-operation"></i>
</div>
<!-- 切换油气田 -->
<!-- <div v-if="systemYqtOptions.length >= 3">-->
<div>
<el-select v-model="systemYqt" v-show="isYqtSelectShow" size="mini" style="width
: 110px !important;" placeholder="" class="systemYqt" @change="updateFieldValue">
<el-option
v-for="item in systemYqtOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<div class="
user">
<el-dropdown @command="goPage">
<div>
<img class="cover" src="@/assets/images/
user.svg" style="float
: left"/>
<span class="name" v-if="$store.state.
user">{{ $store.state.
user.name }}</span>
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="/system/
user-info">
<i class="menu-icon el-icon-
user"></i>
<span class="menu-txt">个人中心</span>
</el-dropdown-item>
<el-dropdown-item command="loginOut">
<i class="menu-icon el-icon-switch-button"></i>
<span class="menu-txt">退出登录</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</div>
</div>
</el-header>
<!-- ↑↑ 头部栏 ↑↑ -->
<!-- ↓↓ 有侧栏主体 ↓↓ -->
<el-container
:style="mainContainerStyle" ref="main_container">
<!-- ↓↓ 左侧菜单 ↓↓ -->
<div v-show="leftMenuBoxShow" class="sidebar scroll_hide_content"
:style="hideHeader?{top
:'5px'}
:{}" >
<a class="navbar-minimalize" title='收起菜单' @click="toggleMenu">
<img src="@/assets/images/list_icon41.svg" style="width
:16px;height
:16px;margin
: 14px 0 0 24px;" v-if="!this.menuConfig.collapse"/>
<img src="@/assets/images/list_icon42.svg" style="width
:16px;height
:16px;margin
: 14px 0 0 24px;" v-else/>
</a>
<!-- 实现菜单多级分类 -->
<el-menu
:style="{width
: menuConfig.width +'px'}"
id="left_menu"
ref="left_menu"
router
:collapse="menuConfig.collapse"
@open="menuOpen"
@close="menuClose"
@select="menuSelect"
v-loading="menuLoading"
:default-active="menuConfig.active"
:default-openeds="menuConfig.open"
text-color="#666666"
:unique-opened="true">
<!-- 引入组件 -->
<!-- <menu-tree
:menuData="menuList"></menu-tree>-->
<menu-tree v-if="activeMenu&&topMenuMap[activeMenu]&&topMenuMap[activeMenu].children"
:menuData="topMenuMap[activeMenu].children"></menu-tree>
</el-menu>
</div>
<!-- ↑↑ 左侧菜单 ↑↑ -->
<el-container
:style="rightContainerStyle">
<el-main class="main_page" ref="main_page">
<!-- ↓↓ 标签页和面包屑 ↓↓ -->
<el-row
:class="tabClass">
<!-- 标签页 -->
<tab-header
v-if="true"
ref="tabHeader"
:menu-item-map="menuItemMap"
@tab-remove="handleTabRemove"
:index-page="indexPage"
@tab-refresh="handleTabRefresh">
</tab-header>
<!-- 面包屑 -->
<!--
<el-breadcrumb separator="/">
<el-breadcrumb-item
:to="{ path
: '/index'}">首页</el-breadcrumb-item>
<template v-for="item in breadcrumbList">
<el-breadcrumb-item v-if="item.leaf&&$route.path != item.path"
:to="item.path">
{{ item.name }}
</el-breadcrumb-item>
<el-breadcrumb-item v-else>{{ item.name }}</el-breadcrumb-item>
</template>
</el-breadcrumb>
-->
</el-row>
<!-- ↑↑ 标签页和面包屑 ↑↑ -->
<!-- ↓↓ 页面主体 ↓↓ -->
<div
:class="viewClass">
<!-- 路由保持页面原本数据 -->
<keep-alive
:exclude="excludeArray">
<router-view
v-if="pageShow"
@add-bread="addBread($event)"
:page-height="mainPageHeight"
:fullscreen="isFullscreen"
@close-page="closeTab"
/>
</keep-alive>
</div>
<!-- ↑↑ 页面主体 ↑↑ -->
<el-dialog
title="账号"
:visible.sync="loginDlgVisible"
:close-on-click-modal="false"
width="50%"
>
<el-input v-model="updateLoginName"></el-input>
<div slot="footer" class="dialog-footer" style="text-align
: center">
<el-button type="primary" @click="change
User">切换账号
</el-button>
<el-button @click="loginDlgVisible = false">关闭</el-button>
</div>
</el-dialog>
</el-main>
</el-container>
</el-container>
<!-- ↑↑ 有侧栏主体 ↑↑ -->
</el-container>
<!-- <login-layer v-else @login-success="load
UserInfo"></login-layer>-->
</template>
<script>
import DevicePixelRatio from './utils/devicePixelRatio'; //引入动态等比例调整页面
import Notice from "./components/layout/Notice";
import screenfull from "screenfull";
import LoginLayer from "./LoginApp.vue";
import TabHeader from "./layout/TabHeader.vue";
import {urlIndex} from "./utils/urlindex.js";
import {excludeArray} from "./utils/excludeKeepAlive.js";
import jsC from "../public/js/common";
export default {
name
: "MainApp",
components
: {TabHeader, Notice, LoginLayer},
data() {
return {
menuLoading
: false,
// menuCollapse
: false,
isLoading
: false,
notifyDisFlg
: false,
loginDlgVisible
: false,
notifyNum
: 0,
userOption
: {show
: false},
contentStyle
: {
height
: window.innerHeight - 110 + "px",
overflow
: "auto",
},
// tab标签样式
tabClass
: 'main_page_header_isIndex',
// router-view样式
viewClass
: 'main_page_view_isIndex',
// 头部tab菜单样式
headerTabMenuClass
: 'top-menu-width',
activeMenu
: '',
menuListAll
: [],
menuList
: [],
lastMenu
: {},
topMenuMap
: {},
menuItemMap
: {},
jsonData
: {},
breadcrumbList
: [],
isFullscreen
: false,
currentUpdateTask
: null,
mainPageHeight
: window.innerHeight - 115,
updateLoginName
: '',
menuConfig
: {
active
: '',
open
: [],
collapse
: false,
collapseWidth
: 64,
minWidth
:200,
maxWidth
:200,
width
:200,
},
hideHeader
: false,
cachePathMap
: {},//路径到页面信息映射
cacheComponentNames
: [],//keep-alive缓存路由name数组
user:{},
// 左侧菜单显示
leftMenuBoxShow
: false,
// 右侧内容 左边框
rightContainerStyle
: {
'padding-left'
: 0
},
//选择的油气田
systemYqt
: '',
systemYqtOptions
: [],
// systemYqt
: '油气田板块',
// systemYqtOptions
: [
// {
// value
: '油气田板块',
// label
: '油气田板块'
// },
// {
// value
: '油田板块',
// label
: '油田板块'
// },
// {
// value
: '气田板块',
// label
: '气田板块'
// },
// ],
isYqtSelectShow
: false,
//页面view显示状态
pageShow
: false,
// 排除keep-alive 数组
excludeArray
: [],
//主页路由
indexPage
: '/index/home',
};
},
created() {
// 排除缓存页面
this.dealExcludeArray();
//等比自动缩放
new DevicePixelRatio().init();
// 获取本地缓存的用户token
let
user_token = localStorage.getItem("
user_token");
// 重置token
if (
user_token) {
this.$store.commit("updateToken",
user_token);
}
// this.
loadMenu();
this.load
UserInfo();
// this.loadUnitNameMap();
},
mounted() {
// 读取隐藏左侧菜单页面链接
this.jsonData = urlIndex();
window.addEventListener("resize", (event) => {
if (this.currentUpdateTask) {
//防止调用频繁
clearTimeout(this.currentUpdateTask);
}
this.currentUpdateTask = setTimeout(() => {
this.computePageSize(this.$route.path)
}, 100);
});
},
watch
: {
$route(to, from) {
this.computePageSize(to.path);
this.activeMenuQuery(to)
this.leftMenuShow(to.path);
this.changeBread(to.path);
this.addCacheTab(to);
},
'$store.state.selectedDw'(newValue) {
// 功能：切换单位后，根据所选单位切换菜单类型
this.isYqtSelectShow = newValue === '油气田板块';
this.systemYqt = newValue === '中国石化' ? '油气田板块'
: newValue;
this.$store.commit('updateSelectedField', this.systemYqt);
this.menuSwitch();
},
'$store.state.selectedRootDw'(newValue){
// 功能：选择单位后，根据单位的分公司油气田类型，隐藏或显示油气田板块选择框
// 规则：如果是油气田板块，则显示，否则隐藏
this.isYqtSelectShow = newValue === '油气田板块';
}
},
computed
: {
mainContainerStyle() {
return {
// 'padding-top'
:'5px',
'margin-top'
: this.hideHeader ? '0'
: '55px',
'overflow'
: 'auto'
};
}
},
methods
: {
// 主页面自适应宽度
computePageSize(path) {
if(!this.$refs["main_page"]) {
return;
}
// 获取router-view高度
this.mainPageHeight = this.$refs["main_page"].$el.offsetHeight;
if(this.isIndexPage(path)){
// router-view高度
this.contentStyle.height = this.mainPageHeight + "px";
// 隐藏tab菜单栏
this.tabClass = 'main_page_header_isIndex';
// router-view样式
this.viewClass = 'main_page_view_isIndex';
// 右侧内容边框
this.$refs["main_page"].$el.style.padding = 0;
}else {
// router-view高度
this.contentStyle.height = this.mainPageHeight - 50 + "px";
// 显示tab菜单栏
this.tabClass = 'main_page_header';
// router-view样式
this.viewClass = 'main_page_view';
// 右侧内容边框
this.$refs["main_page"].$el.style.padding = '0 10px';
}
},
// 是否主页
isIndexPage(path) {
let urlIndex = this.jsonData;
for(let i of urlIndex){
if(path === i.name){
return true
}
}
if(this.$store.state.menuHide!=undefined&&this.$store.state.menuHide)
return true;
return false
},
//定位点击的菜单
activeMenuQuery(to){
let activeMenuNot = false;
this.menuListAll.forEach((item,key) => {
let menu = this.getMenuInfo(to.path,item);
if(menu){
activeMenuNot = true;
//顶部菜单定位
this.activeMenu = item.id;
//左侧菜单定位
this.menuConfig.active = menu.path;
let index = menu.path;
if(this.ifMenuPath(index)){
//获取展开的菜单
let pathArray = Array.from(menu.parentPath);
pathArray.push(index);
this.menuConfig.open = pathArray;
this.updateMenuOpen(index,'open');
}else {
this.updateMenuOpen(index,'select');
}
}
})
if(!activeMenuNot){
//顶部菜单定位
// this.activeMenu = '';
//左侧菜单定位
// this.menuConfig.active = '';
}
},
// 菜单收起展开操作
toggleMenu() {
this.menuConfig.collapse = !this.menuConfig.collapse;
if (this.menuConfig.collapse) {
this.menuConfig.width = this.menuConfig.collapseWidth;
} else {
this.menuConfig.width = this.menuConfig.maxWidth;
}
this.$set(this.rightContainerStyle, 'padding-left', (this.menuConfig.width + 1) + 'px');
},
// 左侧菜单栏隐藏功能
leftMenuShow(path){
//主页path
if(this.isIndexPage(path)){
//菜单栏宽度
this.menuConfig.width = 0;
//菜单栏外侧div隐藏
this.leftMenuBoxShow = false;
this.$set(this.rightContainerStyle, 'padding-left', 0 + 'px');
}else {
//菜单栏宽度
if (this.menuConfig.collapse) {
this.menuConfig.width = this.menuConfig.collapseWidth;
} else {
this.menuConfig.width = this.menuConfig.maxWidth;
}
//菜单栏外侧div隐藏
this.leftMenuBoxShow = true;
this.$set(this.rightContainerStyle, 'padding-left', (this.menuConfig.width + 1) + 'px');
}
this.$nextTick(() => {
this.computePageSize(path);
})
},
// 查询菜单
loadMenu() {
//显示菜单
this.leftMenuShow(window.location.hash.slice(1));
this.menuLoading = true;
this.$get("/api/main/menu/list/
user/data", {}, (response) => {
// this.$get("/api/main/menu/list/data", {lx
: '1'}, (response) => {
this.menuListAll = response.data;
//切换油气田菜单
this.menuSwitch();
//页面样式重新计算
}, (response) => {
this.menuLoading = false;
});
},
// 油气田菜单初始化
menuSwitch(){
// menuListAll- 全部菜单
// menuList- 当前菜单
this.menuList = [];
this.menuListAll.forEach((item,key) => {
if(this.$store.state.selectedField === '油田板块'){
if(item.lx === '1' || item.lx === '0'){this.menuList.push(item)}
}else if(this.$store.state.selectedField === '气田板块'){
if(item.lx === '2' || item.lx === '0'){this.menuList.push(item)}
}else if(this.$store.state.selectedField === '天分板块'){
if(item.lx === '3' || item.lx === '0'){this.menuList.push(item)}
}else {}
})
if(this.menuList == undefined || this.menuList.length == 0){
return;
}
//控制左侧菜单显示APP指定菜单--油田电能管控APP
let tmpArray = window.location.href;
if(tmpArray.indexOf('ytdngkapp') >= 0){
let ytdngkapp = ["电量运行","提升系统","注入系统","集输系统","后辅用电","转供电量"];
this.activeMenu = this.menuList[0].id;
var topMenuMap = {};
let newitem = [];
let newch = [];
let newmenuList = [];
for (var item of this.menuList) {
// console.log(item)
if(item.name === "能耗监控"){
for(let ch of item.children){
if(ch.name === "电能监控"){
for(let chch of ch.children){
if(ytdngkapp.includes(chch.name)){
newitem.push(chch);
}
}
ch.children = newitem;
newch.push(ch);
}
}
item.children = newch;
topMenuMap[item.id] = item;
newmenuList.push(item);
}
}
this.topMenuMap = topMenuMap;
this.menuList = newmenuList;
// this.menuList = this.menuList[0];
}else {
this.activeMenu = this.menuList[0].id;
var topMenuMap = {};
for (var item of this.menuList) {
topMenuMap[item.id] = item;
}
this.topMenuMap = topMenuMap;
}
this.$store.commit("updateMenuList", this.menuList);
this.menuListY = JSON.parse(JSON.stringify(this.menuList));
jsC.menuInfoZh(this.menuList,this);
// this.menuList = menuList;
function addChildren(menuItem, map) {
if (menuItem.children && menuItem.children.length > 0) {
for (item of menuItem.children) {
item.parentPath = [];
for (var p of menuItem.parentPath) {
item.parentPath.push(p);
}
item.parentPath.push(menuItem.path);
item.parentIds = [];
for (var p of menuItem.parentIds) {
item.parentIds.push(p);
}
item.parentIds.push(menuItem.id);
map[item.path] = item;
addChildren(item, map);
}
} else {
menuItem.leaf = true;
}
}
var map = {};
for (var item of this.menuListAll) {
item.parentPath = [];
item.parentIds = [];
map[item.path] = item;
addChildren(item, map);
}
map["/todo/list"] = {
parentPath
: [],
path
: "/todo/list",
name
: "事务列表",
leaf
: true,
};
this.menuItemMap = map;
this.changeBread(this.$route.path);
},
// 切换油气田菜单
updateFieldValue(newValue) {
this.$store.commit('SET_SELECT_FIELD', newValue);
// 缓存变量,刷新保持 油气田菜单不变
window.sessionStorage.setItem("selectedField",newValue);
// 油气田菜单初始化
this.menuSwitch();
// 转到油田|气田第一个页面
if(this.menuList !== undefined && this.menuList.length > 0){
let path = this.getFirstChild(this.menuList[0])
this.menuConfig.active = path;
if(this.$route.path !== this.indexPage &&this.$route.path !== path){
this.openPage(path);
}
}else if(this.$store.state.selectedField === '油气田板块'){
if(this.$route.path !== this.indexPage){
this.openPage(this.indexPage)
}
}
},
// 面包屑
changeBread(toPath, from) {
var list = [];
if (toPath == "/") {
this.breadcrumbList = list;
}
var item = this.menuItemMap[toPath];
if (!item) {
this.breadcrumbList = [];
return;
}
if (item.parentIds && item.parentIds.length > 0) {
this.activeMenu = item.parentIds[0];
}
for (var path of item.parentPath) {
var target = this.menuItemMap[path];
if (!target) {
continue;
}
list.push(target);
}
var target = this.menuItemMap[toPath];
if (target && target.path != '/') {
list.push(this.menuItemMap[toPath]);
}
this.breadcrumbList = list;
},
// 增加面包屑
addBread(item) {
var currentPath = this.$route.path;
if (
item.parent &&
item.parent != "/todo/list" &&
item.parent != "/todo/info" && this.menuItemMap[item.parent]
) {
this.changeBread(item.parent);
} else {
var customPathMapping = {
"/eemg/sjjc/dnjk/index-fgs-dnjk"
: "/eemg/sjjc/dnjk/index-fgs-dnjk",
};
var parentPath = customPathMapping[currentPath];
if (parentPath) {
this.changeBread(parentPath);
} else {
var findParentPaths = [
this.$route.path,
this.$route.path.replace(/(\_\w*$)/g, ""),
this.$route.path.replace(/(\_\w*$)/g, "") + "/list",
this.$route.path.replace(/(\/\w*$)/g, "") + "/list",
];
for (var path of findParentPaths) {
if (this.menuItemMap[path]) {
this.changeBread(path);
break;
}
}
}
}
if (
this.breadcrumbList.length > 0 &&
this.breadcrumbList[this.breadcrumbList.length - 1].path == currentPath
) {
return;
}
this.breadcrumbList.push(item);
},
// 打开个性化设置
openSetting() {
this.$get("/api/main/
user/info/current_
user",{}, (response) => {
});
},
// 跳转页面
goPage(path) {
if(path == 'loginOut') {
this.logout()
return
}
if(this.$route.path !== path){
this.$router.push({path})
}
},
// 退出登录
logout
: function () {
this.$ElConfirm('您确定退出登录当前账户吗？', '提示', {
confirmButtonText
: '确定',
cancelButtonText
: '取消',
type
: 'warning'
}).then(() => {
// this.loadSlCloudApi("登出",this.invokeLogout);
// console.log("登出");
this.invokeLogout();
}).catch(() => {});
},
invokeLogout(){
// 清除本地缓存token
localStorage.removeItem("
user_token");
// 清除内存缓存token
this.$store.commit("removeToken");
if (env == 'dev') {
this.$get('/api/main/logout', {}, (response) => {
// location.href = this.$ctx + envConfig[env].loginPath;
this.$store.commit("update
User",
null);
location.href = this.$ctx + envConfig[env].loginPath;
});
return;
}
if (envConfig[env].sso) {
// this.$get(this.$ctx + "/api/main/logout", {}, (response) => {
// // 目前退出到能管平台的登录页面
// location.href = "https
://10.172.30.29
:9091/front/login";
// });
location.href = '/api/main/logout';
} else {
this.$get(this.$ctx + "/api/main/logout", {}, (response) => {
this.$store.commit("update
User",
null);
location.href = this.$ctx + envConfig[env].loginPath;
});
}
},
// 验证用户登陆
change
User: function () {
if (!this.updateLoginName) {
return;
}
this.$post('/api/main/login/change', {
username
: this.updateLoginName}, (response) => {
location.reload();
}, () => {
this.loginDlgVisible = false;
})
},
// 根据path获取菜单
getMenuInfo(path,menuInfo) {
if(path === menuInfo.path || (menuInfo.path && path === menuInfo.path.slice(1,menuInfo.path.length)) ){
return menuInfo
}
if(!menuInfo || !menuInfo.children){
return
null;
}
for (let child of menuInfo.children) {
let result = this.getMenuInfo(path,child);
if (result !==
null) {
return result;
}
}
return
null;
},
// 新增缓存标签页
addCacheTab(to) {
//通过路由名称进行查找 （路由名称默认与文件名相同，可以通过$$route name属性设置，不可重复）
let index = this.cacheComponentNames.indexOf(to.name);
if (index < 0) {
this.cacheComponentNames.push(to.name);
this.cachePathMap[to.fullPath] = {
name
: to.name,
activeMenu
: this.menuConfig.active,
version
: new Date().getTime(),
};
} else if (this.cachePathMap[to.fullPath]) {
let activeMenu = this.cachePathMap[to.fullPath].activeMenu;
if (activeMenu) {
this.menuConfig.active = activeMenu;
}
} else {
//如果该页面组件已经纳入缓存队列，但是不是该路径触发，则认为该页面有多个访问路径
this.cachePathMap[to.fullPath] = {
name
: to.name,
activeMenu
: this.menuConfig.active,
version
: new Date().getTime(),
};
}
},
//处理标签页关闭
handleTabRemove(path) {
//获取路径缓存信息
let cacheInfo = this.cachePathMap[path];
if (cacheInfo) {
//删除路径缓存信息
Reflect.deleteProperty(this.cachePathMap, path);
//首先判断缓存的页面里是否有和该路径公用页面的情况，如果有，则不做处理
for (let key in this.cachePathMap) {
if (key == path) {
continue;
}
let otherInfo = this.cachePathMap[key];
if (otherInfo.name == cacheInfo.name) {
//匹配到其他路径与该路径共用页面，不做后续处理
return;
}
}
//从keep-alive中移除 --- 不在标签页里的页面打开重新加载
this.excludeArray.push(cacheInfo.name);
this.$nextTick(() => {
this.excludeArray = this.excludeArray.filter(item => {
return cacheInfo.name !== item;
});
})
this.dealExcludeArray();
}
},
//处理标签页关闭
handleTabRefresh(path, index) {
// //获取路径缓存信息
// let cacheInfo = this.cachePathMap[path];
// if(cacheInfo){
// //修改version值，使router-view key更新达到刷新目的
// cacheInfo.version=new Date().getTime();
// }
this.closeTab(path);
this.$router.push({path
: path}, () => {
setTimeout(() => {
//恢复原来位置
this.$refs.tabHeader.changeTabIndex(path, index);
}, 40)
});
},
//处理关闭标签页事件
closeTab(path) {
if (this.$refs.tabHeader) {
this.$refs.tabHeader.handleTabRemove(path);
}
},
// 排除不缓存页面
dealExcludeArray(){
this.excludeArray = excludeArray;
const routes = this.$router.options.routes.filter((item) => {return item.meta}).filter((item) => {return item.meta.keepAlive === false})
routes.forEach((item,key) => {
this.excludeArray.push(item.name)
})
},
// 获取第一个菜单
getFirstChild
: function(menuItem) {
if (!menuItem.children || (menuItem.path && this.ifMenuPath(menuItem.path))) {
return menuItem.path;
} else {
return this.getFirstChild(menuItem.children[0]);
}
},
// 横向菜单选项
handleSelect(path, openPage) {
let menuItem =
null;
for (let item of this.menuList) {
if (item.id == path.name) {
menuItem = item;
break;
}
}
// 展开第一个菜单
if (menuItem) {
if (menuItem.children && menuItem.children.length > 0) {
this.$nextTick(function () {
//切换到有侧栏
if(this.leftMenuBoxShow){
const width = this.$refs['left_menu'].$el.offsetWidth;
this.$set(this.rightContainerStyle, 'padding-left', width + 'px');
}else{
this.$set(this.rightContainerStyle, 'padding-left', 0 + 'px');
}
if (openPage) {
const openPath = this.getFirstChild(menuItem);
if(openPath){
//判断是否为展开菜单页面
if(this.ifMenuPath(openPath)){
this.openPage( openPath.slice(1,openPath.length) );
this.updateMenuOpen(openPath,'open');
}else {
this.openPage(openPath);
this.updateMenuOpen(openPath,'select');
}
}else {
this.openPage("*");
}
}
});
} else if (menuItem.path) {
if (openPage) {
this.openPage(menuItem.path);
}
this.$set(this.rightContainerStyle, 'padding-left', '0')
}
}
},
// 点击菜单 - 不包括展开收起菜单
menuSelect(index,indexPath){
this.updateMenuOpen(index,'select');
},
// 展开菜单
menuOpen(index,indexPath){
this.expandMenu('open');
// 如果是菜单展开有页面跳转当前页面 - '$'
if(index && this.ifMenuPath(index)){
this.$router.push({path
: index.slice(1,index.length)})
this.menuConfig.active = index;
this.updateMenuOpen(index,'open');
}
},
// 收起菜单
menuClose(index,indexPath){
this.expandMenu('close');
},
// 更新菜单展开时高亮
updateMenuOpen(index,type){
debugger;
//等待组件加载完修改
this.$refs["left_menu"].$nextTick(() => {
let menu = document.getElementById("left_menu");
//展开菜单 && 有展开菜单页面
if(type === 'open' && this.ifMenuPath(index)){
let active = menu.querySelectorAll(".is-active");
active.forEach((item,key) => {
item.classList.remove('is-active')
})
let menuArray = []
this.getOpened(menu,menuArray);
// 查找展开的菜单div
let submenuTitle = menuArray[menuArray.length-1].querySelector(".el-submenu__title");
if(submenuTitle) {
submenuTitle.classList.add('is-active');
}
this.menuConfig.active = index;
//清除展开菜单的高亮
}else {
let submenu = menu.querySelectorAll(".el-submenu");
submenu.forEach((item,key) => {
let submenuTitle = item.querySelectorAll(".el-submenu__title");
submenuTitle.forEach((item2,key2) => {
item2.classList.remove('is-active')
})
})
}
})
},
// 查找展开的菜单树
getOpened(menu,array){
array.push(menu);
let submenu = menu.querySelector(".is-opened");
if(submenu){
this.getOpened(submenu,array)
}
},
// 是否为展开菜单页
ifMenuPath(path){
return path.slice(0,1) === '$'
},
// 展开菜单
expandMenu(type) {
// 缓存当前页面菜单
/*if(index && index !== window.sessionStorage.getItem("menuSelect")){
window.sessionStorage.setItem("menuSelect",index);
}*/
this.$nextTick(function () {
const width = this.$refs['left_menu'].$el.offsetWidth;
if(width>this.menuConfig.width&&width>this.menuConfig.minWidth) {
this.menuConfig.width = width;
} else if(width<this.menuConfig.minWidth) {
this.menuConfig.width = this.menuConfig.minWidth+1;
}
if(this.menuConfig.width>this.menuConfig.maxWidth) {
this.menuConfig.maxWidth = this.menuConfig.width;
}
})
},
getQueryMap
: function () {
let tmpArray = window.location.href.split('#');
tmpArray = tmpArray[0].split('?');
if (!tmpArray || tmpArray.length < 2) {
return {};
}
let dataStr = tmpArray[1];
let paramArray = dataStr.split("&");
let result = {};
for (let item of paramArray) {
let pair = item.split("=");
result[pair[0]] = pair[1];
}
return result;
},
// 用户信息加载
load
UserInfo
: function () {
this.isLoading = true;
let queryData = this.getQueryMap();
let redirect =
null;
if(queryData&&queryData.redirect) {
redirect = queryData.redirect;
}
this.$get("/api/main/
user/info/current_
user", {redirect
:redirect}, (response) => {
if(redirect) {
location.href = decodeURIComponent(redirect);
return;
}
// 因首页报错，注掉这里。咨询陈子严说可能是别的项目的东西，当时一起初始化了
// if (envConfig[env].sso) {
// this.$get("/getToken", {}, (res) => {
// localStorage.setItem("
user_token", res.token);
// // console.log(localStorage.getItem("
user_token"));
// }, (res) => {
// this.isLoading = false;
// });
// }
var
userData = response.data;
var
userid =
userData.id;
this.$store.commit("update
User", response.data);
this.load
UserExtraInfo(
userid,
userData);
}, (response) => {
this.isLoading = false;
});
},
load
UserExtraInfo
: function (
userid,
userData) {
this.isLoading = true;
// 数据授权验证
this.is
UserSjsq(
userid);
let queryData = {};
queryData.
userid =
userid;
this.$get("/api/main/basis/sys/
userMgr/obtain
UserExtraInfo", queryData, (response) => {
// console.log("==obtain
UserExtraInfo==response.data====" + JSON.stringify(response.data))
var data1 = response.data;
// 取缓存的用户信息、油气田值
// 因为存在首页覆盖授权的情况，可能会导致应该使用的值与后端结果不一致
// 如果存在缓存的值且与后端返回结果不一致，优先取缓存的值。避免刷新页面错乱
const selectField = this.$store.state.selectedField;
const
userFgsdwdm = this.$store.state.
userFgsdwdm;
const
userCjdwdm = this.$store.state.
userCjdwdm;
const shouldUpdateFgsdwdm =
userFgsdwdm !==
null &&
userFgsdwdm !== undefined &&
userFgsdwdm !== '' &&
userFgsdwdm !==
userData.fgsdwdm;
const shouldUpdateCjdwdm =
userCjdwdm !==
null &&
userCjdwdm !== undefined &&
userCjdwdm !== '' &&
userCjdwdm !==
userData.cjdwdm;
userData.ejdwdm = data1.ejdwdm;
userData.ejdwmc = data1.ejdwmc;
userData.fgsdwdm = shouldUpdateFgsdwdm ?
userFgsdwdm
: data1.fgsdwdm;
userData.cjdwdm = shouldUpdateCjdwdm ?
userCjdwdm
: data1.cjdwdm;
//
userData.fgsdwdm = data1.fgsdwdm;
//
userData.cjdwdm = data1.cjdwdm;
userData.oilfield = data1.lx.slice(0,1);
userData.gasfield = data1.lx.slice(1,2);
userData.naturegas = data1.lx.slice(2,3);
// console.log("==aaaaaaaaaa==
userData.data====" + JSON.stringify(
userData))
this.$store.commit("update
User",
userData);
let
userFieldType =
null;
if (
userData.oilfield === "1" &&
userData.gasfield === "1" &&
userData.naturegas === "0") {
this.isYqtSelectShow = true;
userFieldType = '油气田板块';
} else if (
userData.oilfield === "1" &&
userData.gasfield === "0" &&
userData.naturegas === "0") {
userFieldType = '油田板块';
} else if (
userData.oilfield === "0" &&
userData.gasfield === "1" &&
userData.naturegas === "0") {
userFieldType = '气田板块';
} else if (
userData.oilfield === "0" &&
userData.gasfield === "0" &&
userData.naturegas === "1") {
userFieldType = '天分板块';
} else if (
userData.oilfield === "1" &&
userData.gasfield === "1" &&
userData.naturegas === "1") {
userFieldType = '油气田板块';
} else {
console.warn('未知的油气田板块类型：',
userData.oilfield +
userData.gasfield +
userData.naturegas)
}
if (selectField !==
null && selectField !== undefined && selectField !== '' && selectField !==
userFieldType) {
userFieldType = selectField;
}
//油气田板块调用和切换方法
this.setFieldType(
userFieldType);
//调用云平台接口
// this.loadSlCloudApi("登录");
//加载菜单
this.
loadMenu();
this.pageShow = true;
}, (response) => {
this.isLoading = false;
});
},
is
UserSjsq(
userid) {
let queryData = {};
queryData.
userid =
userid;
this.$get("/api/main/basis/sys/
userMgr/obtain
UserSjsqInfo", queryData, (response) => {
let data;
if (response.data.length > 0) {
data = response.data[0];
if (data ==
null) {
// this.$ElMessage.error('当前用户没有进行数据授权，请联系管理员！')
// this.$router.push("/no-auth")
location.href = "./no_data_auth.html";
}
}
}, () => {
});
},
setFieldType(
userFieldType) {
if (
userFieldType === '油田板块') {
this.headerTabMenuClass = 'top-menu-width';// 更换菜单宽度
this.systemYqtOptions = [
{
value
: '油田板块',
label
: '油田板块'
},
]
} else if (
userFieldType === '气田板块') {
this.headerTabMenuClass = 'top-menu-width';// 更换菜单宽度
this.systemYqtOptions = [
{
value
: '气田板块',
label
: '气田板块'
},
]
} else if (
userFieldType === '油气田板块') {
this.headerTabMenuClass = 'top-menu-width-yqt';// 更换菜单宽度
this.systemYqtOptions = [
{
value
: '油气田板块',
label
: '油气田板块'
},
{
value
: '油田板块',
label
: '油田板块'
},
{
value
: '气田板块',
label
: '气田板块'
},
]
} else if (
userFieldType === '天分板块') {
this.headerTabMenuClass = 'top-menu-width';// 更换菜单宽度
this.systemYqtOptions = [
{
value
: '天分板块',
label
: '天分板块'
},
]
} else {
// this.$ElMessage.error('当前用户没有进行数据授权，请联系管理员！')
}
this.systemYqt =
userFieldType;
// 油气田赋值全局变量
this.$store.commit('updateSelectedField',
userFieldType);
// 油气田赋值缓存变量
if(!window.sessionStorage.getItem("selectedField")){
window.sessionStorage.setItem("selectedField",
userFieldType);
}else {
this.$store.commit('updateSelectedField', window.sessionStorage.getItem("selectedField"));
this.systemYqt = window.sessionStorage.getItem("selectedField");
}
},
// 切换全屏
toggleScreenFull() {
if (!screenfull.isEnabled) {
// 如果不支持进入全屏，发出不支持提示
this.$ElMessage({
message
: "您的浏览器版本过低不支持全屏显示！",
type
: "warning"
});
return false;
}
screenfull.toggle();
},
// 展示/隐藏header
toggleHeader() {
this.hideHeader = !this.hideHeader;
},
loadUnitNameMap
: function () {
this.$get("/api/main/meta/type/unit-type", {}, (data) => {
let map = {};
for (const item of data.data) {
map[item.id] = item.name;
}
this.$store.commit("updateUnitNameMap", map);
});
},
login
: function () {
if (!this.
user.password || this.
user.password == '') {
this.$ElMessage.warning("请填写密码")
return;
}
this.isLoading = true;
this.$post("/api/main/login/check", this.
user, (response) => {
// location.href = this.$ctx+envConfig[env].indexPath;
this.load
UserInfo();
}, (response) => {
if(response.code!=0) {
this.isLoading = false;
}
});
},
// loadSlCloudApi(loginStatus,hook) {
// let queryData = {};
// queryData.moduleid = "RES_SLYTNYGKZX_0";
// queryData.modulename = "开发单位外部施工用电管理";
// queryData.moduletype = "APP";
// if(this.$store.state.menu!=undefined){
// queryData.moduleid = this.$store.state.menu.ModuleID;
// queryData.modulename = this.$store.state.menu.ModuleName;
// queryData.moduletype = this.$store.state.menu.ModuleType;
// }
// queryData.loginStatus = loginStatus;
// if(envConfig[env].sso) {
// this.$get("/api/main/slcloud/api/loginApiHandler", queryData, (response) => {
// }, (response) => {
// if (hook) {
// hook();
// }
// });
// }
// },
logInfo(){
console.log(this.$store)
console.log("menuConfig.active",this.menuConfig.active)
},
},
};
</script>
本文介绍LoadMenu函数的使用方法，包括加载指定菜单资源的过程、所需参数及其返回值。此外还提供了关于如何处理错误及菜单销毁的相关信息。
扫一扫
903
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
