<template>
|
<div class="sidebarDefaultWidth" :class="{'sidebar-input-width':$store.state.isCollapse}">
|
<div class="is_menu-height">
|
<el-input class="menu-search_input" v-model="searchText" placeholder="搜索菜单"></el-input>
|
<el-menu class="sidebar-container el-menu-vertical-demo"
|
text-color="#fff"
|
ref="menu"
|
:style="'height:'+menuHeight+'px'"
|
:collapse="$store.state.isCollapse"
|
:default-openeds="openeds"
|
active-text-color="#fff"
|
>
|
<SubMenu :navMenus="filteredMenus" :searchText="searchText" :filterByKeyword="filterByKeyword"></SubMenu>
|
</el-menu>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import SubMenu from './main-sidebar-sub-menu'
|
// import Search from '../modules/search'
|
import mainNavbar from './main-navbar'
|
import debounce from 'lodash/debounce'
|
import {EventBus2} from "../../commonJS/eventbus2";
|
|
export default {
|
props:{
|
letter:Boolean,
|
param:{
|
type:String,
|
},
|
flag: {
|
type: Boolean,
|
default: false
|
}
|
},
|
inject: ['refresh'],
|
data() {
|
return {
|
searchText:'',
|
activeMenu:'2',
|
isCollapse: false,
|
menuHeight:'',
|
userRoleInfo:{},
|
openeds: [],
|
requestText:'',
|
userName: this.$store.state.user.name,
|
isShow: true,
|
menuData: [],
|
filteredNavMenus:[],
|
dataForm: {
|
keyword: ''
|
}
|
}
|
},
|
components: {
|
SubMenu,
|
mainNavbar
|
},
|
watch: {
|
// '$route.params.keyword'() {
|
// this.dataForm.keyword = this.$route.params.keyword
|
// this.query()
|
// }
|
'flag'(){
|
console.log('watch flag')
|
if(this.flag) {
|
this.menuData = window.SITE_CONFIG['menuList']
|
console.log('watch flag2')
|
setTimeout(()=>{
|
console.log('watch flag3')
|
this.defaultOpeneds()
|
},50)
|
}
|
}
|
},
|
computed: {
|
filteredMenus() {
|
if (this.searchText) {
|
return this.filterMenus(this.menuData);
|
} else {
|
return this.menuData;
|
}
|
}
|
},
|
mounted() {
|
// this.sendMsg()
|
this.menuData = window.SITE_CONFIG['menuList']
|
console.log(window.SITE_CONFIG['menuList'],'window.SITE_CONFIG[\'menuList\']')
|
EventBus2.$on('setMenuList', () => {
|
this.menuData = window.SITE_CONFIG['menuList']
|
console.log(this.menuData,'menuData')
|
setTimeout(()=>{
|
this.defaultOpeneds()
|
},50)
|
})
|
// this.defaultOpeneds()
|
//this.$refs.menu.open(menuData.id)
|
this.menuHeight=document.documentElement.clientHeight-(68+32)
|
window.onresize = () => {
|
return (() => {
|
this.menuHeight=document.documentElement.clientHeight-(68+32)
|
})()
|
}
|
const that = this
|
window.addEventListener('resize', debounce(() => {
|
let that = this
|
if (that.checkFull()) {
|
if(this.param==='large'){
|
this.menuHeight=document.documentElement.clientHeight-32
|
}else {
|
this.menuHeight=document.documentElement.clientHeight-(68+34)
|
}
|
}else {
|
this.menuHeight=document.documentElement.clientHeight-(68+34)
|
this.defaultOpeneds()
|
}
|
}, 150))
|
},
|
provide() {
|
|
},
|
methods: {
|
filterMenus(menuData,parentIds = []) {
|
const filtered = [];
|
const addedMenuItems = {}; // 用于跟踪已添加的菜单项
|
for (let i = 0; i < menuData.length; i++) {
|
const menu = menuData[i];
|
if (this.filterByKeyword(menu.name)) {
|
const key = JSON.stringify(menu); // 使用菜单项的字符串表示作为键
|
if (!addedMenuItems[key]) {
|
filtered.push(menu);
|
addedMenuItems[key] = true;
|
}
|
// 设置所有父级菜单项为展开状态
|
parentIds.forEach(id => {
|
if (!this.openeds.includes(id)) {
|
this.openeds.push(id);
|
}
|
});
|
}
|
if (menu.children && menu.children.length > 0) {
|
const subMenuParentIds = [...parentIds, menu.id]; // 更新父级菜单项ID数组
|
const filteredChildren = this.filterMenus(menu.children, subMenuParentIds);
|
if (filteredChildren.length > 0) {
|
const subMenu = { ...menu };
|
subMenu.children = filteredChildren;
|
const subMenuKey = JSON.stringify(subMenu); // 使用子菜单项的字符串表示作为键
|
if (!addedMenuItems[subMenuKey]) {
|
filtered.push(subMenu);
|
addedMenuItems[subMenuKey] = true;
|
}
|
}
|
}
|
}
|
/* this.$nextTick(() => {
|
// 移除不在filteredMenus中的展开菜单项
|
this.openeds = this.openeds.filter(opened => {
|
return filtered.some(menu => menu.id === opened);
|
});
|
|
let i = 0;
|
for (let menuData of filtered) {
|
i++;
|
if (i <= 5) {
|
this.openeds.push(menuData.id);
|
}
|
}
|
});*/
|
console.log(filtered,'filtered filtered filtered')
|
return filtered;
|
},
|
filterByKeyword(itemName) {
|
const lowerCaseSearchText = this.searchText.toLowerCase();
|
return itemName.toLowerCase().includes(lowerCaseSearchText);
|
},
|
/*handleSelect(index){
|
this.activeMenu = index;
|
console.log(this.activeMenu,'this.activeMenu')
|
},*/
|
defaultOpeneds(){
|
let i = 0
|
for(let menuData of this.menuData){
|
i++
|
if(i<=4){
|
this.openeds.push(menuData.id)
|
}
|
}
|
},
|
sendMsg() {
|
console.log(this.$store.state.user.menuList,'$store.state.user.menuList')
|
// console.log(this.$store.state.user.id,'111')
|
// console.log(this.$store.state.user.name,'222')
|
// console.log(this.$store.state.user.tenantId,'333')
|
// console.log(this.$store.state.user.isPlatform,'444')
|
},
|
search() {
|
let keyword = document.getElementById('materialSearch').value
|
this.$EventBus.$emit('search', keyword)
|
if (keyword) {
|
this.$router.push({
|
name: 'search',
|
params: {
|
keyword: keyword
|
}
|
})
|
} else {
|
}
|
},
|
// 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
|
gotoRouteHandle(menuId) {
|
var route = window.SITE_CONFIG['dynamicMenuRoutes'].filter(item => item.meta.menuId === menuId)[0]
|
if (route && this.$router.currentRoute.path !== `/${route.name}`) {
|
if (route.name === 'miantainHome-home' || 'replaceProblemHome-home') {
|
this.$refs.mainNavbar.refresh()
|
}
|
this.$nextTick(() => {
|
console.log(route.meta.params,"route.meta.params")
|
this.$router.push({name: route.name, query: route.meta.params, params: route.meta.params})
|
})
|
}
|
},
|
checkFull() {
|
var isFull = document.mozFullScreen ||
|
document.fullScreen ||
|
//谷歌浏览器及Webkit内核浏览器
|
document.webkitIsFullScreen ||
|
document.webkitRequestFullScreen ||
|
document.mozRequestFullScreen ||
|
document.msFullscreenEnabled
|
if (isFull === undefined) {
|
isFull = false
|
}
|
return isFull
|
},
|
}
|
}
|
</script>
|
|
<style>
|
.aui-navbar__header {
|
position: relative;
|
/*width: 365px !important;*/
|
height: 100% !important;
|
-webkit-transition: width .3s;
|
transition: width .3s;
|
}
|
.el-submenu__title i{
|
color:#fff;
|
}
|
.sidebar-container{
|
/*border-right: 1px solid rgba(123, 224, 244, 1) !important;*/
|
/*position: absolute;*/
|
/*width: 90%;*/
|
/*margin-left:5%;*/
|
overflow-y: auto;
|
}
|
|
.text-wrapper {
|
word-break: break-all;
|
word-wrap: break-word
|
}
|
.info-title{
|
width: 120px; /*一定要设置宽度，或者元素内含的百分比*/
|
overflow:hidden; /*溢出的部分隐藏*/
|
white-space: nowrap; /*文本不换行*/
|
text-overflow:ellipsis;/*ellipsis:文本溢出显示省略号（...）；clip：不显示省略标记（...），而是简单的裁切*/
|
}
|
.user-text{
|
width:290px;
|
height:90px;
|
display: flex;
|
border-right: 1px solid rgba(123, 224, 244, 1) !important;
|
}
|
.user-img{
|
width:65px;
|
height:65px;
|
position: relative;
|
top:50%;
|
transform: translateY(-50%);
|
}
|
.user-userRoleInfo{
|
position: relative;top:50%; transform: translateY(-25%);
|
}
|
.user-text-color{
|
color: #ffffff;
|
}
|
.main-block{
|
display: block !important;
|
}
|
.is_menu-height .el-menu--inline{
|
text-align: inherit;
|
margin-left: 0;
|
}
|
.is_menu-height{
|
float: left;
|
width: 100%;
|
}
|
.el-menu-vertical-demo:not(.el-menu--collapse) {
|
width: 280px;
|
}
|
.el-menu--collapse>div>.el-submenu>.el-submenu__title span {
|
height: 0;
|
width: 0;
|
overflow: hidden;
|
visibility: hidden;
|
display: inline-block;
|
}
|
.el-menu--collapse>div>.el-submenu>.el-submenu__title .el-submenu__icon-arrow {
|
display: none;
|
}
|
.zt .sidebarDefaultWidth{
|
width: 280px;
|
}
|
.zt .sidebarDefaultWidth.sidebar-input-width{
|
width: 64px;
|
}
|
.zt .sidebarDefaultWidth.sidebar-input-width>.is_menu-height{
|
width: 64px;
|
//transition: 1s;
|
}
|
.zt .sidebarDefaultWidth.sidebar-input-width>.is_menu-height .menu-search_input{
|
margin-left: -10px;
|
}
|
.menu-search_input .el-input__inner{
|
background: #062944;
|
width: 90%;
|
margin-left: 14px;
|
color: #fff;
|
}
|
</style>
|
