@中文描述:添加搜索框清除按钮和搜索功能优化 @升级登记:1 @同步后端:0 @同步数据库:0 @同步配置:0 @向下兼容:1

08335 / hivui-platform-template

hivui平台项目模板

Browse code @中文描述:添加搜索框清除按钮和搜索功能优化 @升级登记:1 @同步后端:0 @同步数据库:0 @同步配置:0 @向下兼容:1 master
1 parent 7b3c2cd commit 823352957b0ca3620f82ecd3e938dc82a73addd6 ganyi authored 20 days ago

Showing 2 changed files

Ignore Space Show notes View project/hivuiMain/views/layout/components/Header.vue
<template> <div class="pl-header " :data-layout="layout"> <ul class="ltArea"> <li v-if="layout=='level'" class="logoStyle"> <logo-cont :hasTitle="hasTitle" :logoWidth="logoWidth"></logo-cont> </li> <li v-else class="logoStyle"> <logo-cont :logoWidth="logoWidth"></logo-cont> </li> <li v-if="sysList.length"> <div class="sysTrigger" ref='dom-sysList' @mouseover="handleShowSysList" @mouseout="handleHideSysList"> <span>{{$t('hivuiMain_projectManage')}}</span> <i class="iconfont icon-change"></i> </div> <ul class="pl-menus pl-menus-sub pl-menus-pop" @mouseenter="handleShowSysList" @mouseleave="handleHideSysList" :style="sysListStyle" v-add2Body> <li class="pl-menus-item" v-for="item,index in sysList" @click="handleChangeSys(item)" :key="index"> <a class="title"><span class="txt">{{item.title}}</span></a> </li> </ul> </li> <li v-if="layout == 'level'&&!hideHistoryFuncList" > <div class="sysTrigger" ref="dom-latelyUse" :title='$t("hivuiMain_recentlyUsed")' @mouseenter="handleShowLatelyUse" @mouseleave="handleHideLatelyUse"> <i class="icon iconfont icon-time"></i> <span class="title">{{$t('hivuiMain_recentlyUsed')}}</span> <i class="icon iconfont icon-arrow-down"></i> </div> <ul class="pl-menus pl-menus-sub pl-menus-pop" @mouseenter="handleShowLatelyUse" @mouseleave="handleHideLatelyUse" :style="latelyUseStyle" v-add2Body> <li class="pl-menus-item" v-for="item,index in navsLatelyUse" @click="handleOpenLatelyFunc(item)" :key="index"> <a class="title"><span class="txt">{{item.name}}</span></a> </li> <li v-show="navsLatelyUse.length==0" class="pl-menus-tips"> {{$t('hivuiMain_nodata')}} </li> </ul> </li> <li v-if="layout == 'level'&&showAllFuncBtn" > <div class="sysTrigger"> <span ref="allFuncBtn" class="title" @mouseenter="allFuncTriggerOpen" @mouseleave="allFuncTriggerClose">{{$t('hivuiMain_allFunction')}}</span> <i class="icon iconfont icon-arrow-down"></i> <allFuncMenu ref="allFuncMenu" :triggerObj="allFuncBtnObj" v-add2Body></allFuncMenu> </div> </li> </ul> <ul class="rtArea"> <li> <div class="pl-search" ref="dom-searchBox" > <input ref="dom-seachTxt" class="pl-no-handle pl-search-text" type="text" :placeholder="$t('hivuiMain_searchKey')" v-model.trim="searchWord" @keyup="handleSeachKeyUp" /> <i class="el-icon-circle-close" style="position: absolute;top: 9px;right: 35px;font-size: 12px;opacity: 0.5;cursor: pointer;" v-if="searchWord != ''" @click="searchWord = ''"></i> <i class="iconfont icon-search pl-no-handle" style="cursor: pointer;" @click="handleSearch"></i> </div> <ul class="pl-menus pl-menus-sub pl-menus-pop" :style="searchMenusStyle" v-add2Body> <li :class="['pl-menus-item',seldIndex==index?'pl-menus-itemSeld':'']" v-for="item,index in searchList" style="width:100%" @click="openFunc(item)" :key="index"> <a class="title"><span class="txt" v-html="item.html\|\|item.name"></span></a> </li> <li v-show="searchList.length==0&&searchWord.length>0" class="pl-menus-tips"> {{$t('hivuiMain_nodata')}} </li> </ul> </li> <li v-if="sysProjectManage"> <a :href="sysProjectManage.url" target='_blank' class="item" :title="sysProjectManage.name"> <i class="iconfont" :class="sysProjectManage.iconClass"></i> <span class="title">{{sysProjectManage.name}}</span> </a> </li> <template v-for="(item,index) in sysFuncMenus"> <li v-if="item.type!='split'" :key="index"> <template v-if="item.type=='withNumTips'"> <div class="item" @click.prevent="handleFuncMenus(item,$event)"> <div class="tip"> <i class="iconfont" :class="item.iconClass"></i> </div> <span class="title" v-html="item.html\|\|item.name"></span> <span class="pl-head-tipsNum" :hidden="!(msgCount!=0)">{{msgCount}}</span> <!-- <span class="pl-head-tipsNum" :hidden="!(item.tipNum&&item.tipNum!=0)">{{item.tipNum}}</span> --> </div> </template> <template v-else> <template v-if="item.children&&item.children.length"> <div class="item" @mouseenter="handleFuncMenus(item,$event)"> <div class="tip"> <i class="iconfont" :class="item.iconClass"></i> </div> <span class="title" v-html="item.html\|\|item.name"></span> <i class="iconfont icon-arrow-down" v-if="item.children"></i> </div> </template> <template v-if="!item.children\|\|item.children&&item.children.length==0"> <div class="item" @click.prevent="handleFuncMenus(item,$event)"> <div class="tip"> <i class="iconfont" :class="item.iconClass"></i> </div> <span class="title" v-html="item.html\|\|item.name"></span> <i class="iconfont icon-arrow-down" v-if="item.children"></i> </div> </template> </template> </li> <li v-if="item.type=='split'" :key="index"><div class="line"></div></li> </template> <!-- <li> <div class="item"> <div class="tip"> <i class="iconfont icon-user"></i> </div> <span class="title">{{this.$store.getters.userId}}/{{this.$store.getters.userName}}</span> <i class="iconfont icon-arrow-down"></i> </div> </li> <li><div class="line"></div></li> --> <!-- 语言切换 --> <li v-if="langList"> <template v-if="langList.children&&langList.children.length"> <div class="item" @mouseenter="handleFuncMenus(langList,$event)"> <div class="tip"> <i class="iconfont" :class="langList.iconClass"></i> </div> <span class="title" v-html="langList.html\|\|langList.name"></span> <i class="iconfont icon-arrow-down" v-if="langList.children"></i> </div> </template> </li> <li v-if="langList"><div class="line"></div></li> <!-- 用户信息 --> <li> <template v-if="sysUserInfo.children&&sysUserInfo.children.length"> <div class="item" @mouseenter="handleFuncMenus(sysUserInfo,$event)"> <div class="tip"> <i class="iconfont" :class="sysUserInfo.iconClass"></i> </div> <span class="title" v-html="sysUserInfo.html\|\|sysUserInfo.name"></span> <i class="iconfont icon-arrow-down" v-if="sysUserInfo.children"></i> </div> </template> </li> <li><div class="line"></div></li> <li v-if="hasSetting"> <div class="item" :title="$t('hivuiMain_customWorkbench')"> <a href="#design" target='_blank'><i class="iconfont icon-set-fill"></i></a> </div> </li> <li> <div class="item" :title="$t('hivuiMain_logout')"> <a @click="handleLogout"><i class="iconfont icon-tuichu"></i></a> </div> </li> </ul> <vueContextMenu ref="cmp-funcMenu" :menu-items="menuItems" field="name"></vueContextMenu> <modifyPw></modifyPw> </div> </template> <script> import pinyin from 'js-pinyin';//ie 下有问题编译不过 import Cookies from 'js-cookie' import vueContextMenu from "@main/components/contextMenu"; import logoCont from "@main/components/logo"; import modifyPw from "@main/views/layout/components/modifyPw"; import allFuncMenu from './allFuncMenu' import {changeBz} from "@main/api/user"; import { removeToken } from '@main/utils/auth' import { sortMapTurnArr } from '@main/utils/index' import def_sy_loading from "@main/assets/logo_max.png" import def_sy_minLogo from "@main/assets/logo_min.png" import def_sy_logo from "@main/assets/logo.png" import def_sy_logo_horizon from "@main/assets/logo_horizon.png" export default { components:{ vueContextMenu, modifyPw, allFuncMenu, logoCont }, inject:['addTab','showTab','hideTab'], props:{ hasTitle:{ type: Boolean, }, logoWidth:{ type: String, } }, data(){ return { menuItems:[], searchWord:"", searchList:[], seldIndex:0, menuShow:false, searchMenusStyle:{ display:'none', left:0, top:0, width:0, // maxHeight:'50%', // overflow:'auto' }, sysListStyle:{ display:'none', left:0, top:0, }, latelyUseStyle:{ display:'none', left:0, top:0, maxHeight:'50%', overflow:'auto' }, def_sy_minLogo:def_sy_minLogo, def_sy_logo:def_sy_logo, def_sy_logo_horizon:def_sy_logo_horizon, numTipTimer:null, showAllFuncBtn:window.customSysCofig.isShowAllFunc===false?false:true, hideHistoryFuncList:window.customSysCofig.hideHistoryFuncList\|\|false, isShowAllFuncMenu:false, allFuncBtnObj:{}, msgCount:0 } }, computed:{ hasSetting(){ let cfg = this.$store.state.app.config\|\|{}; if(cfg.hideSettingBtn){ return false; } let _arr=sortMapTurnArr(cfg.sysSetTabs); return _arr&&_arr.length; }, sysList(){ let cfg = this.$store.state.app.config\|\|{}; return cfg.sysList\|\|[]; }, sysUserInfo(){ let me=this; let cfg = this.$store.state.app.config\|\|{}; function replaceData(str){ if(!str)return ['',false]; var _arr=str.match(/\${(\S?)}/g); var nullNum=0; if(_arr&&_arr.length>0){ for(let i of _arr){ var _data=me.userInfo[i.match(/\${(\S)}/)[1]]; if(typeof(_data)!="undefined"){ str=str.replace(i,_data); }else{ str=str.replace(i,me.$t('hivuiMain_header_null')); nullNum++; } } return [str,nullNum==_arr.length?false:true]; } return [str,true]; } //多岗信息文字模板format function orgBzTplFormat(str,item){ let fieldArr=str.match(/(?<=\${).?(?=})/g); fieldArr.forEach((_i)=>{ if(typeof(item[_i])!="undefined"){ str=str.replaceAll("${"+_i+"}",item[_i]); } }); return str; } let _userInfo=cfg.userInfo; if(_userInfo){ _userInfo.name=replaceData(_userInfo.name)[0]; if(_userInfo.children&&_userInfo.children.length>0){ _userInfo.children=_userInfo.children.filter((item)=>{ let _rData=replaceData(item.name); item.name=_rData[0]; switch(item.type){ case "modifyUserInfo": item.handler=me.modifyUserInfo; break; case "modifyPw": item.handler=me.modifyPw; break; case "personalCenter": item.handler=me.personalCenter; break; case "orgBz": if(Array.isArray(me.bzList)&&me.bzList.length>1){ item.children=[]; for(let i of me.bzList){ let _pushData={ iconClass:'icon-user', name:cfg.orgBzTpl?orgBzTplFormat(cfg.orgBzTpl,i):`${i.fbzname}/${i.fbzid}`, handler:function(){ me.__changeOrgBz(`${i.fbzid}`); }, }; /if(i.fbzid==me.userInfo.fbzid){ _pushData.chooseIcon={ title:me.$t("hivuiMain_header_bzchooseIcon_title"), iconClass:"el-icon-star-on", }; }else{ _pushData.hoverBtn={ title:me.$t("hivuiMain_header_bzhoverbtn_title"), iconClass:"iconfont icon-set", handler:function(){ console.log(123456789); } } }/ item.children.push(_pushData); } } break; } if(_rData[1]){ return item; } }); } } return _userInfo\|\|[]; }, sysProjectManage(){ let cfg = this.$store.state.app.config\|\|{}; let item = cfg.sysProjectMange\|\|{},flag=false; this.$store.state.app.powerList.forEach(p=>{ if(p.resUrl.indexOf(item.uri)>-1){ flag = true; return true; } }); if(flag){ return cfg.sysProjectMange; }else{ return null; } }, langList(){ let cfg = this.$store.state.app.config\|\|{}; if(!cfg.showChangeLangBtn){ return; } let menus = cfg.langList\|\|[]; return menus; }, sysFuncMenus(){ let cfg = this.$store.state.app.config\|\|{}; let menus = sortMapTurnArr(cfg.sysFuncMenus)\|\|[]; return menus; }, logoOpt(){ let cfg = this.$store.state.app.config\|\|{}; return (this.layout=="level"&&cfg.sysLogoHorizon?cfg.sysLogoHorizon:cfg.sysLogo)\|\|{}; }, MlogoOpt(){ let cfg = this.$store.state.app.config\|\|{}; return cfg.MsysLogo\|\|{}; }, layout(){ return window.localStorage.getItem('layout'); }, navsLatelyUse(){ return this.$store.getters.navsLatelyUse; }, token(){ return this.$store.getters.token; }, userInfo(){ return this.$store.state.user.userInfo; }, bzList(){ return this.$store.state.user.bzList; }, }, watch:{ searchWord(newVal,oldVal){ this.seldIndex=0; this.doSearch(newVal); } }, mounted(){ let me=this; document.addEventListener('click',me.handleSeachResult); me.$store.dispatch("app/getSysConfig"); me.sysFuncMenus.filter(item=>{ if(item.type=="withNumTips"&&item.numFunc){ function __intervalFunc(){ item.numFunc().then(res=>{ me.msgCount = res.num; // me.$set(item,"tipNum",res.num); //渲染报错？？ if(res.num&&!item.hideNotific){ window.SysPage.notificationFunc(me.$t("hivuiMain_header_notification_title"),item.messageText(res),()=>{ me.handleFuncMenus(item); }); } }).catch(err=>{ clearInterval(me.numTipTimer); }); } clearInterval(me.numTipTimer); me.numTipTimer=setInterval(__intervalFunc,item.numIntervalTime\|\|100030); __intervalFunc(); } }); me.allFuncBtnObj=(me.layout == 'level')&&me.showAllFuncBtn&&me.$refs.allFuncBtn.getBoundingClientRect(); }, beforeDestroy(){ document.removeEventListener('click',this.handleSeachResult) }, methods:{ handleSeachResult(e){ console.log(e.target,e.target.closest('.pl-no-handle')) if (e.target.closest('.pl-no-handle')) { return } this.hideSeachResult(); }, handleSearch(){ let cnKey=this.searchWord; this.seldIndex=0; this.doSearch(cnKey); }, openDesign(){ this.$refs['cmp-dd'].show(); }, doSearch(cnKey){ console.log("doSearch",cnKey); if(cnKey==""){ this.hideSeachResult(); return; } this.showSeachResult(); let list = [], records = this.$store.getters.menusList, hideMenuItemList = this.$store.getters.hideMenuItemList; let py = pinyin.getCamelChars(cnKey).toLocaleLowerCase(); console.log('records', records) //let py = Scp.String.getPinyin(cnKey).toLocaleLowerCase(); let re = new RegExp("^[a-zA-Z]+$"); for(let i=0,l=records.length;i<l;i++){ let item = records[i]; if(list.length>10){ break; } if(item.name && !(!item.isShow \|\| hideMenuItemList.indexOf(item.parentId)!=-1)){ if(item.parentId==-1&&item.type=="root"){ continue; } if(re.test(cnKey)){ let y = pinyin.getCamelChars(item.name).toLocaleLowerCase(); //let y = Scp.String.getPinyin(item.name).toLocaleLowerCase(); if(y.indexOf(py)>-1 && item.type!='dir'){ list.push(item); } }else{ if(item.name.indexOf(cnKey)>-1 && item.type!='dir' ){ list.push(item); continue; } } } } this.$set(this,'searchList',list); }, openFunc(item){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; } // this.addTab(item.resUrl,item.name,item.resId) this.addTab(item);//inject 提供的方法只能传一个参数 }, handleSearchBoxClick(){ this.doSearch(this.searchWord); this.$refs['dom-seachTxt'].focus(); }, handleSeachKeyUp(evt){ if(evt.keyCode==40){//ArrowDown if(this.seldIndex<this.searchList.length-1){ this.seldIndex++; }else{ this.seldIndex=0; } } if(evt.keyCode==38){//ArrowUp if(this.seldIndex==0){ this.seldIndex=this.searchList.length-1; }else{ this.seldIndex--; } } if(evt.keyCode==13){//enter let item = this.searchList[this.seldIndex]; if(item.type== "link"){ window.open(item.resUrl,item.name); return; } // this.addTab(item.resUrl,item.name,item.resId); this.addTab(item);//inject 提供的方法只能传一个参数 this.searchWord = ""; this.seldIndex = 0; this.hideSeachResult(); } }, showSeachResult(){ console.log("showSeachResult"); this.searchMenusStyle.display ='block'; let s = this.$refs["dom-searchBox"]; let rect = s.getBoundingClientRect(); this.searchMenusStyle.left = rect.left+'px'; this.searchMenusStyle.top = rect.top + rect.height + 5 +'px'; this.searchMenusStyle.width = rect.width+'px'; this.searchMenusStyle.opacity = '1'; }, hideSeachResult(){ this.searchMenusStyle.display ='none'; }, handleChangeSys(item){ if(!item.url)return; if(item.target=="_blank"){ window.open(item.url) }else{ window.location.href=item.url; } }, handleShowSysList(){ this.sysListStyle.display ='block'; let s = this.$refs["dom-sysList"]; let rect = s.getBoundingClientRect(); this.sysListStyle.left = rect.left+'px'; this.sysListStyle.top = rect.top + rect.height +'px'; }, handleHideSysList(){ this.sysListStyle.display ='none'; }, handleFuncMenus(item,$event){ $event&&$event.stopPropagation(); if(item.type== "link"){ window.open(item.resUrl,item.name); return; } var _url=item.url; if(item.type== "widthToken"\|\|item.type== "withToken"){ _url=item.url+"&access_token="+this.token; } if(item.url){ item.target=='tab'? this.addTab({ resUrl:_url, name:item.name, resId:item.id, openType:item.openType, }) : window.open(_url); return }else{ item.handler&&item.handler(); } if(item.children&&item.children.length){ this.menuItems = item.children; this.$refs['cmp-funcMenu'].open($event); if(item.type == "lang"){//默认切换语言函数 item.children.forEach((__item,index)=>{ if(!__item.handler){ __item.handler=()=>{ window.localStorage.setItem("locale",JSON.stringify({ desc:__item.name, name:__item.key, })); Cookies.set("locale",__item.key); window.location.reload(); } } }); } } }, async handleLogout(){ if(window.customSysCofig.logoutBeforeCallback){ const bool = window.customSysCofig.logoutBeforeCallback(); if(bool){ return; } } await this.$store.dispatch("user/logout").then(()=>{ //removeToken(); window.sessionStorage.removeItem("bzid"); if(window.customSysCofig.logoutCallback){ window.customSysCofig.logoutCallback(); }else{ if(window.HIVUI_SETTING.isSingleLogin&&window.HIVUI_SETTING.singleLogoutUrl){ location=window.HIVUI_SETTING.singleLogoutUrl; }else{ location=window.HIVUI_SETTING.loginUrl; } } }); }, handleShowLatelyUse(){ this.$store.dispatch('app/getLatelyUse')//最近使用 let s = this.$refs["dom-latelyUse"]; let rect = s.getBoundingClientRect(); this.latelyUseStyle.display ='block'; this.latelyUseStyle.left = rect.left+'px'; this.latelyUseStyle.top = rect.top + rect.height +'px'; this.latelyUseStyle.opacity = '1'; }, handleHideLatelyUse(){ this.latelyUseStyle.display ='none'; }, handleOpenLatelyFunc(item){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; } this.addTab({ resUrl:item.resUrl, name:item.name, openType:item.openType, });//inject 提供的方法只能传一个参数 }, hideTitle(name){ this.$emit('hideTitle', name); }, //切岗 __changeOrgBz(bzid){ changeBz({ bzid:bzid }).then(res=>{ window.location.reload(); }); }, modifyPw(){ this.$store.dispatch("user/showPwDialog",true); }, // 个人中心 personalCenter(){ top.window.SysPage.newPage(this.$t("hivuiMain_app_personal_Center"), '#personalCenter'); }, modifyUserInfo(){ }, //全部功能弹窗 allFuncTrigger(){ let me=this; me.isShowAllFuncMenu=me.isShowAllFuncMenu?false:true; if(me.isShowAllFuncMenu){ me.$refs.allFuncMenu.showBox(); }else{ me.$refs.allFuncMenu.hideBox(); } }, allFuncTriggerOpen(){ let me=this; me.$refs.allFuncMenu.showBox(); }, allFuncTriggerClose(){ let me=this; me.$refs.allFuncMenu.hideBox(); }, logoClickHanlder(opt){ if(opt&&opt.clickHandler){ opt.clickHandler(); } }, } } </script> <style lang="less" scoped> .pl-header{ z-index: 99; } </style> <template> <div class="pl-header " :data-layout="layout"> <ul class="ltArea"> <li v-if="layout=='level'" class="logoStyle"> <logo-cont :hasTitle="hasTitle" :logoWidth="logoWidth"></logo-cont> </li> <li v-else class="logoStyle"> <logo-cont :logoWidth="logoWidth"></logo-cont> </li> <li v-if="sysList.length"> <div class="sysTrigger" ref='dom-sysList' @mouseover="handleShowSysList" @mouseout="handleHideSysList"> <span>{{$t('hivuiMain_projectManage')}}</span> <i class="iconfont icon-change"></i> </div> <ul class="pl-menus pl-menus-sub pl-menus-pop" @mouseenter="handleShowSysList" @mouseleave="handleHideSysList" :style="sysListStyle" v-add2Body> <li class="pl-menus-item" v-for="item,index in sysList" @click="handleChangeSys(item)" :key="index"> <a class="title"><span class="txt">{{item.title}}</span></a> </li> </ul> </li> <li v-if="layout == 'level'&&!hideHistoryFuncList" > <div class="sysTrigger" ref="dom-latelyUse" :title='$t("hivuiMain_recentlyUsed")' @mouseenter="handleShowLatelyUse" @mouseleave="handleHideLatelyUse"> <i class="icon iconfont icon-time"></i> <span class="title">{{$t('hivuiMain_recentlyUsed')}}</span> <i class="icon iconfont icon-arrow-down"></i> </div> <ul class="pl-menus pl-menus-sub pl-menus-pop" @mouseenter="handleShowLatelyUse" @mouseleave="handleHideLatelyUse" :style="latelyUseStyle" v-add2Body> <li class="pl-menus-item" v-for="item,index in navsLatelyUse" @click="handleOpenLatelyFunc(item)" :key="index"> <a class="title"><span class="txt">{{item.name}}</span></a> </li> <li v-show="navsLatelyUse.length==0" class="pl-menus-tips"> {{$t('hivuiMain_nodata')}} </li> </ul> </li> <li v-if="layout == 'level'&&showAllFuncBtn" > <div class="sysTrigger"> <span ref="allFuncBtn" class="title" @mouseenter="allFuncTriggerOpen" @mouseleave="allFuncTriggerClose">{{$t('hivuiMain_allFunction')}}</span> <i class="icon iconfont icon-arrow-down"></i> <allFuncMenu ref="allFuncMenu" :triggerObj="allFuncBtnObj" v-add2Body></allFuncMenu> </div> </li> </ul> <ul class="rtArea"> <li> <div class="pl-search" ref="dom-searchBox" > <input ref="dom-seachTxt" class="pl-search-text" type="text" :placeholder="$t('hivuiMain_searchKey')" v-model.trim="searchWord" @keyup="handleSeachKeyUp" /> <i class="iconfont icon-search"></i> </div> <ul class="pl-menus pl-menus-sub pl-menus-pop" :style="searchMenusStyle" v-add2Body> <li :class="['pl-menus-item',seldIndex==index?'pl-menus-itemSeld':'']" v-for="item,index in searchList" style="width:100%" @click="openFunc(item)" :key="index"> <a class="title"><span class="txt" v-html="item.html\|\|item.name"></span></a> </li> <li v-show="searchList.length==0&&searchWord.length>0" class="pl-menus-tips"> {{$t('hivuiMain_nodata')}} </li> </ul> </li> <li v-if="sysProjectManage"> <a :href="sysProjectManage.url" target='_blank' class="item" :title="sysProjectManage.name"> <i class="iconfont" :class="sysProjectManage.iconClass"></i> <span class="title">{{sysProjectManage.name}}</span> </a> </li> <template v-for="(item,index) in sysFuncMenus"> <li v-if="item.type!='split'" :key="index"> <template v-if="item.type=='withNumTips'"> <div class="item" @click.prevent="handleFuncMenus(item,$event)"> <div class="tip"> <i class="iconfont" :class="item.iconClass"></i> </div> <span class="title" v-html="item.html\|\|item.name"></span> <span class="pl-head-tipsNum" :hidden="!(msgCount!=0)">{{msgCount}}</span> <!-- <span class="pl-head-tipsNum" :hidden="!(item.tipNum&&item.tipNum!=0)">{{item.tipNum}}</span> --> </div> </template> <template v-else> <template v-if="item.children&&item.children.length"> <div class="item" @mouseenter="handleFuncMenus(item,$event)"> <div class="tip"> <i class="iconfont" :class="item.iconClass"></i> </div> <span class="title" v-html="item.html\|\|item.name"></span> <i class="iconfont icon-arrow-down" v-if="item.children"></i> </div> </template> <template v-if="!item.children\|\|item.children&&item.children.length==0"> <div class="item" @click.prevent="handleFuncMenus(item,$event)"> <div class="tip"> <i class="iconfont" :class="item.iconClass"></i> </div> <span class="title" v-html="item.html\|\|item.name"></span> <i class="iconfont icon-arrow-down" v-if="item.children"></i> </div> </template> </template> </li> <li v-if="item.type=='split'" :key="index"><div class="line"></div></li> </template> <!-- <li> <div class="item"> <div class="tip"> <i class="iconfont icon-user"></i> </div> <span class="title">{{this.$store.getters.userId}}/{{this.$store.getters.userName}}</span> <i class="iconfont icon-arrow-down"></i> </div> </li> <li><div class="line"></div></li> --> <!-- 语言切换 --> <li v-if="langList"> <template v-if="langList.children&&langList.children.length"> <div class="item" @mouseenter="handleFuncMenus(langList,$event)"> <div class="tip"> <i class="iconfont" :class="langList.iconClass"></i> </div> <span class="title" v-html="langList.html\|\|langList.name"></span> <i class="iconfont icon-arrow-down" v-if="langList.children"></i> </div> </template> </li> <li v-if="langList"><div class="line"></div></li> <!-- 用户信息 --> <li> <template v-if="sysUserInfo.children&&sysUserInfo.children.length"> <div class="item" @mouseenter="handleFuncMenus(sysUserInfo,$event)"> <div class="tip"> <i class="iconfont" :class="sysUserInfo.iconClass"></i> </div> <span class="title" v-html="sysUserInfo.html\|\|sysUserInfo.name"></span> <i class="iconfont icon-arrow-down" v-if="sysUserInfo.children"></i> </div> </template> </li> <li><div class="line"></div></li> <li v-if="hasSetting"> <div class="item" :title="$t('hivuiMain_customWorkbench')"> <a href="#design" target='_blank'><i class="iconfont icon-set-fill"></i></a> </div> </li> <li> <div class="item" :title="$t('hivuiMain_logout')"> <a @click="handleLogout"><i class="iconfont icon-tuichu"></i></a> </div> </li> </ul> <vueContextMenu ref="cmp-funcMenu" :menu-items="menuItems" field="name"></vueContextMenu> <modifyPw></modifyPw> </div> </template> <script> import pinyin from 'js-pinyin';//ie 下有问题编译不过 import Cookies from 'js-cookie' import vueContextMenu from "@main/components/contextMenu"; import logoCont from "@main/components/logo"; import modifyPw from "@main/views/layout/components/modifyPw"; import allFuncMenu from './allFuncMenu' import {changeBz} from "@main/api/user"; import { removeToken } from '@main/utils/auth' import { sortMapTurnArr } from '@main/utils/index' import def_sy_loading from "@main/assets/logo_max.png" import def_sy_minLogo from "@main/assets/logo_min.png" import def_sy_logo from "@main/assets/logo.png" import def_sy_logo_horizon from "@main/assets/logo_horizon.png" export default { components:{ vueContextMenu, modifyPw, allFuncMenu, logoCont }, inject:['addTab','showTab','hideTab'], props:{ hasTitle:{ type: Boolean, }, logoWidth:{ type: String, } }, data(){ return { menuItems:[], searchWord:"", searchList:[], seldIndex:0, menuShow:false, searchMenusStyle:{ display:'none', left:0, top:0, width:0, // maxHeight:'50%', // overflow:'auto' }, sysListStyle:{ display:'none', left:0, top:0, }, latelyUseStyle:{ display:'none', left:0, top:0, maxHeight:'50%', overflow:'auto' }, def_sy_minLogo:def_sy_minLogo, def_sy_logo:def_sy_logo, def_sy_logo_horizon:def_sy_logo_horizon, numTipTimer:null, showAllFuncBtn:window.customSysCofig.isShowAllFunc===false?false:true, hideHistoryFuncList:window.customSysCofig.hideHistoryFuncList\|\|false, isShowAllFuncMenu:false, allFuncBtnObj:{}, msgCount:0 } }, computed:{ hasSetting(){ let cfg = this.$store.state.app.config\|\|{}; if(cfg.hideSettingBtn){ return false; } let _arr=sortMapTurnArr(cfg.sysSetTabs); return _arr&&_arr.length; }, sysList(){ let cfg = this.$store.state.app.config\|\|{}; return cfg.sysList\|\|[]; }, sysUserInfo(){ let me=this; let cfg = this.$store.state.app.config\|\|{}; function replaceData(str){ if(!str)return ['',false]; var _arr=str.match(/\${(\S?)}/g); var nullNum=0; if(_arr&&_arr.length>0){ for(let i of _arr){ var _data=me.userInfo[i.match(/\${(\S)}/)[1]]; if(typeof(_data)!="undefined"){ str=str.replace(i,_data); }else{ str=str.replace(i,me.$t('hivuiMain_header_null')); nullNum++; } } return [str,nullNum==_arr.length?false:true]; } return [str,true]; } //多岗信息文字模板format function orgBzTplFormat(str,item){ let fieldArr=str.match(/(?<=\${).?(?=})/g); fieldArr.forEach((_i)=>{ if(typeof(item[_i])!="undefined"){ str=str.replaceAll("${"+_i+"}",item[_i]); } }); return str; } let _userInfo=cfg.userInfo; if(_userInfo){ _userInfo.name=replaceData(_userInfo.name)[0]; if(_userInfo.children&&_userInfo.children.length>0){ _userInfo.children=_userInfo.children.filter((item)=>{ let _rData=replaceData(item.name); item.name=_rData[0]; switch(item.type){ case "modifyUserInfo": item.handler=me.modifyUserInfo; break; case "modifyPw": item.handler=me.modifyPw; break; case "personalCenter": item.handler=me.personalCenter; break; case "orgBz": if(Array.isArray(me.bzList)&&me.bzList.length>1){ item.children=[]; for(let i of me.bzList){ let _pushData={ iconClass:'icon-user', name:cfg.orgBzTpl?orgBzTplFormat(cfg.orgBzTpl,i):`${i.fbzname}/${i.fbzid}`, handler:function(){ me.__changeOrgBz(`${i.fbzid}`); }, }; /if(i.fbzid==me.userInfo.fbzid){ _pushData.chooseIcon={ title:me.$t("hivuiMain_header_bzchooseIcon_title"), iconClass:"el-icon-star-on", }; }else{ _pushData.hoverBtn={ title:me.$t("hivuiMain_header_bzhoverbtn_title"), iconClass:"iconfont icon-set", handler:function(){ console.log(123456789); } } }/ item.children.push(_pushData); } } break; } if(_rData[1]){ return item; } }); } } return _userInfo\|\|[]; }, sysProjectManage(){ let cfg = this.$store.state.app.config\|\|{}; let item = cfg.sysProjectMange\|\|{},flag=false; this.$store.state.app.powerList.forEach(p=>{ if(p.resUrl.indexOf(item.uri)>-1){ flag = true; return true; } }); if(flag){ return cfg.sysProjectMange; }else{ return null; } }, langList(){ let cfg = this.$store.state.app.config\|\|{}; if(!cfg.showChangeLangBtn){ return; } let menus = cfg.langList\|\|[]; return menus; }, sysFuncMenus(){ let cfg = this.$store.state.app.config\|\|{}; let menus = sortMapTurnArr(cfg.sysFuncMenus)\|\|[]; return menus; }, logoOpt(){ let cfg = this.$store.state.app.config\|\|{}; return (this.layout=="level"&&cfg.sysLogoHorizon?cfg.sysLogoHorizon:cfg.sysLogo)\|\|{}; }, MlogoOpt(){ let cfg = this.$store.state.app.config\|\|{}; return cfg.MsysLogo\|\|{}; }, layout(){ return window.localStorage.getItem('layout'); }, navsLatelyUse(){ return this.$store.getters.navsLatelyUse; }, token(){ return this.$store.getters.token; }, userInfo(){ return this.$store.state.user.userInfo; }, bzList(){ return this.$store.state.user.bzList; }, }, watch:{ searchWord(newVal,oldVal){ this.seldIndex=0; this.doSearch(newVal); } }, mounted(){ let me=this; document.addEventListener('click',me.hideSeachResult); me.$store.dispatch("app/getSysConfig"); me.sysFuncMenus.filter(item=>{ if(item.type=="withNumTips"&&item.numFunc){ function __intervalFunc(){ item.numFunc().then(res=>{ me.msgCount = res.num; // me.$set(item,"tipNum",res.num); //渲染报错？？ if(res.num&&!item.hideNotific){ window.SysPage.notificationFunc(me.$t("hivuiMain_header_notification_title"),item.messageText(res),()=>{ me.handleFuncMenus(item); }); } }).catch(err=>{ clearInterval(me.numTipTimer); }); } clearInterval(me.numTipTimer); me.numTipTimer=setInterval(__intervalFunc,item.numIntervalTime\|\|100030); __intervalFunc(); } }); me.allFuncBtnObj=(me.layout == 'level')&&me.showAllFuncBtn&&me.$refs.allFuncBtn.getBoundingClientRect(); }, beforeDestroy(){ document.removeEventListener('click',this.hideSeachResult) }, methods:{ openDesign(){ this.$refs['cmp-dd'].show(); }, doSearch(cnKey){ if(cnKey==""){ this.hideSeachResult(); return; } this.showSeachResult(); let list = [], records = this.$store.getters.menusList, hideMenuItemList = this.$store.getters.hideMenuItemList; let py = pinyin.getCamelChars(cnKey).toLocaleLowerCase(); console.log('records', records) //let py = Scp.String.getPinyin(cnKey).toLocaleLowerCase(); let re = new RegExp("^[a-zA-Z]+$"); for(let i=0,l=records.length;i<l;i++){ let item = records[i]; if(list.length>10){ break; } if(item.name && !(!item.isShow \|\| hideMenuItemList.indexOf(item.parentId)!=-1)){ if(item.parentId==-1&&item.type=="root"){ continue; } if(re.test(cnKey)){ let y = pinyin.getCamelChars(item.name).toLocaleLowerCase(); //let y = Scp.String.getPinyin(item.name).toLocaleLowerCase(); if(y.indexOf(py)>-1 && item.type!='dir'){ list.push(item); } }else{ if(item.name.indexOf(cnKey)>-1 && item.type!='dir' ){ list.push(item); continue; } } } } this.$set(this,'searchList',list); }, openFunc(item){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; } // this.addTab(item.resUrl,item.name,item.resId) this.addTab(item);//inject 提供的方法只能传一个参数 }, handleSearchBoxClick(){ this.doSearch(this.searchWord); this.$refs['dom-seachTxt'].focus(); }, handleSeachKeyUp(evt){ if(evt.keyCode==40){//ArrowDown if(this.seldIndex<this.searchList.length-1){ this.seldIndex++; }else{ this.seldIndex=0; } } if(evt.keyCode==38){//ArrowUp if(this.seldIndex==0){ this.seldIndex=this.searchList.length-1; }else{ this.seldIndex--; } } if(evt.keyCode==13){//enter let item = this.searchList[this.seldIndex]; if(item.type== "link"){ window.open(item.resUrl,item.name); return; } // this.addTab(item.resUrl,item.name,item.resId); this.addTab(item);//inject 提供的方法只能传一个参数 this.searchWord = ""; this.seldIndex = 0; this.hideSeachResult(); } }, showSeachResult(){ this.searchMenusStyle.display ='block'; let s = this.$refs["dom-searchBox"]; let rect = s.getBoundingClientRect(); this.searchMenusStyle.left = rect.left+'px'; this.searchMenusStyle.top = rect.top + rect.height + 5 +'px'; this.searchMenusStyle.width = rect.width+'px'; this.searchMenusStyle.opacity = '1'; }, hideSeachResult(){ this.searchMenusStyle.display ='none'; }, handleChangeSys(item){ if(!item.url)return; if(item.target=="_blank"){ window.open(item.url) }else{ window.location.href=item.url; } }, handleShowSysList(){ this.sysListStyle.display ='block'; let s = this.$refs["dom-sysList"]; let rect = s.getBoundingClientRect(); this.sysListStyle.left = rect.left+'px'; this.sysListStyle.top = rect.top + rect.height +'px'; }, handleHideSysList(){ this.sysListStyle.display ='none'; }, handleFuncMenus(item,$event){ $event&&$event.stopPropagation(); if(item.type== "link"){ window.open(item.resUrl,item.name); return; } var _url=item.url; if(item.type== "widthToken"\|\|item.type== "withToken"){ _url=item.url+"&access_token="+this.token; } if(item.url){ item.target=='tab'? this.addTab({ resUrl:_url, name:item.name, resId:item.id, openType:item.openType, }) : window.open(_url); return }else{ item.handler&&item.handler(); } if(item.children&&item.children.length){ this.menuItems = item.children; this.$refs['cmp-funcMenu'].open($event); if(item.type == "lang"){//默认切换语言函数 item.children.forEach((__item,index)=>{ if(!__item.handler){ __item.handler=()=>{ window.localStorage.setItem("locale",JSON.stringify({ desc:__item.name, name:__item.key, })); Cookies.set("locale",__item.key); window.location.reload(); } } }); } } }, async handleLogout(){ if(window.customSysCofig.logoutBeforeCallback){ const bool = window.customSysCofig.logoutBeforeCallback(); if(bool){ return; } } await this.$store.dispatch("user/logout").then(()=>{ //removeToken(); window.sessionStorage.removeItem("bzid"); if(window.customSysCofig.logoutCallback){ window.customSysCofig.logoutCallback(); }else{ if(window.HIVUI_SETTING.isSingleLogin&&window.HIVUI_SETTING.singleLogoutUrl){ location=window.HIVUI_SETTING.singleLogoutUrl; }else{ location=window.HIVUI_SETTING.loginUrl; } } }); }, handleShowLatelyUse(){ this.$store.dispatch('app/getLatelyUse')//最近使用 let s = this.$refs["dom-latelyUse"]; let rect = s.getBoundingClientRect(); this.latelyUseStyle.display ='block'; this.latelyUseStyle.left = rect.left+'px'; this.latelyUseStyle.top = rect.top + rect.height +'px'; this.latelyUseStyle.opacity = '1'; }, handleHideLatelyUse(){ this.latelyUseStyle.display ='none'; }, handleOpenLatelyFunc(item){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; } this.addTab({ resUrl:item.resUrl, name:item.name, openType:item.openType, });//inject 提供的方法只能传一个参数 }, hideTitle(name){ this.$emit('hideTitle', name); }, //切岗 __changeOrgBz(bzid){ changeBz({ bzid:bzid }).then(res=>{ window.location.reload(); }); }, modifyPw(){ this.$store.dispatch("user/showPwDialog",true); }, // 个人中心 personalCenter(){ top.window.SysPage.newPage(this.$t("hivuiMain_app_personal_Center"), '#personalCenter'); }, modifyUserInfo(){ }, //全部功能弹窗 allFuncTrigger(){ let me=this; me.isShowAllFuncMenu=me.isShowAllFuncMenu?false:true; if(me.isShowAllFuncMenu){ me.$refs.allFuncMenu.showBox(); }else{ me.$refs.allFuncMenu.hideBox(); } }, allFuncTriggerOpen(){ let me=this; me.$refs.allFuncMenu.showBox(); }, allFuncTriggerClose(){ let me=this; me.$refs.allFuncMenu.hideBox(); }, logoClickHanlder(opt){ if(opt&&opt.clickHandler){ opt.clickHandler(); } }, } } </script> <style lang="less" scoped> .pl-header{ z-index: 99; } </style>

Ignore Space Show notes View

project/hivuiMain/views/layout/components/Header.vue

<template>
    <div class="pl-header " :data-layout="layout">  
        <ul class="ltArea">
            <li v-if="layout=='level'" class="logoStyle">
                <logo-cont :hasTitle="hasTitle" :logoWidth="logoWidth"></logo-cont>
            </li>
            <li v-else class="logoStyle">
                <logo-cont :logoWidth="logoWidth"></logo-cont>
            </li>
            <li v-if="sysList.length">                
                <div class="sysTrigger" ref='dom-sysList'  
                    @mouseover="handleShowSysList"  @mouseout="handleHideSysList">
                    <span>{{$t('hivuiMain_projectManage')}}</span>
                    <i class="iconfont icon-change"></i>
                </div> 
                <ul class="pl-menus pl-menus-sub pl-menus-pop"
                @mouseenter="handleShowSysList"  @mouseleave="handleHideSysList"
                :style="sysListStyle" v-add2Body>
                    <li class="pl-menus-item" v-for="item,index in sysList" @click="handleChangeSys(item)" :key="index">
                        <a class="title"><span class="txt">{{item.title}}</span></a>
                    </li>
                </ul>   
            </li>
            <li v-if="layout == 'level'&&!hideHistoryFuncList" >
                <div class="sysTrigger" ref="dom-latelyUse" 
                :title='$t("hivuiMain_recentlyUsed")'
                @mouseenter="handleShowLatelyUse"  @mouseleave="handleHideLatelyUse">
                    <i class="icon iconfont icon-time"></i>
                    <span class="title">{{$t('hivuiMain_recentlyUsed')}}</span>
                    <i class="icon iconfont icon-arrow-down"></i>
                </div>
                <ul class="pl-menus pl-menus-sub pl-menus-pop"
                @mouseenter="handleShowLatelyUse"  @mouseleave="handleHideLatelyUse"
                :style="latelyUseStyle" v-add2Body>
                    <li class="pl-menus-item" v-for="item,index in navsLatelyUse" @click="handleOpenLatelyFunc(item)" :key="index">
                        <a class="title"><span class="txt">{{item.name}}</span></a>
                    </li>
                    <li v-show="navsLatelyUse.length==0" class="pl-menus-tips">
                        {{$t('hivuiMain_nodata')}}
                    </li>
                </ul> 
            </li>
            <li v-if="layout == 'level'&&showAllFuncBtn" >
                <div class="sysTrigger">
                    <span ref="allFuncBtn" class="title" @mouseenter="allFuncTriggerOpen" @mouseleave="allFuncTriggerClose">{{$t('hivuiMain_allFunction')}}</span>
                    <i class="icon iconfont icon-arrow-down"></i>
                    <allFuncMenu ref="allFuncMenu" :triggerObj="allFuncBtnObj" v-add2Body></allFuncMenu>
                </div>
            </li>
        </ul>
        <ul class="rtArea">
            <li>
                <div class="pl-search" ref="dom-searchBox" >
                    <input ref="dom-seachTxt" class="pl-no-handle pl-search-text" type="text" :placeholder="$t('hivuiMain_searchKey')" 
                    v-model.trim="searchWord" 
                    @keyup="handleSeachKeyUp"
                    />
                  <i class="el-icon-circle-close" style="position: absolute;top: 9px;right: 35px;font-size: 12px;opacity: 0.5;cursor: pointer;" v-if="searchWord != ''" @click="searchWord = ''"></i>               
                  <i class="iconfont icon-search pl-no-handle" style="cursor: pointer;" @click="handleSearch"></i>                   
                </div>  
                <ul class="pl-menus pl-menus-sub pl-menus-pop" :style="searchMenusStyle" v-add2Body>
                    <li :class="['pl-menus-item',seldIndex==index?'pl-menus-itemSeld':'']" v-for="item,index in searchList" 
                    style="width:100%"
                    @click="openFunc(item)" :key="index">
                        <a class="title"><span class="txt" v-html="item.html||item.name"></span></a>
                    </li>
                    <li v-show="searchList.length==0&&searchWord.length>0" class="pl-menus-tips">
                        {{$t('hivuiMain_nodata')}}
                    </li>
                </ul> 
            </li>
            <li v-if="sysProjectManage">
                <a :href="sysProjectManage.url" target='_blank' class="item" :title="sysProjectManage.name">
                    <i class="iconfont" :class="sysProjectManage.iconClass"></i>
                    <span class="title">{{sysProjectManage.name}}</span>
                </a>  
            </li>
            <template v-for="(item,index) in sysFuncMenus">
                <li v-if="item.type!='split'" :key="index">
                    <template v-if="item.type=='withNumTips'">
                        <div class="item" @click.prevent="handleFuncMenus(item,$event)">
                            <div class="tip">
                                <i class="iconfont" :class="item.iconClass"></i>
                            </div>
                            <span class="title" v-html="item.html||item.name"></span>                            
                            <span class="pl-head-tipsNum" :hidden="!(msgCount!=0)">{{msgCount}}</span>
                            
                        </div>
                    </template>
                    <template v-else>
                        <template v-if="item.children&&item.children.length">
                            <div class="item" @mouseenter="handleFuncMenus(item,$event)">
                                <div class="tip">
                                    <i class="iconfont" :class="item.iconClass"></i>
                                </div>
                                <span class="title" v-html="item.html||item.name"></span>
                                <i class="iconfont icon-arrow-down" v-if="item.children"></i>
                            </div>
                        </template>
                        <template v-if="!item.children||item.children&&item.children.length==0">
                            <div class="item" @click.prevent="handleFuncMenus(item,$event)">
                                <div class="tip">
                                    <i class="iconfont" :class="item.iconClass"></i>
                                </div>
                                <span class="title" v-html="item.html||item.name"></span>
                                <i class="iconfont icon-arrow-down" v-if="item.children"></i>
                            </div>
                        </template>
                    </template>
                </li>
                <li v-if="item.type=='split'" :key="index"><div class="line"></div></li>                
            </template>
            
            
            <li v-if="langList">
                <template v-if="langList.children&&langList.children.length">
                    <div class="item" @mouseenter="handleFuncMenus(langList,$event)">
                        <div class="tip">
                            <i class="iconfont" :class="langList.iconClass"></i>
                        </div>
                        <span class="title" v-html="langList.html||langList.name"></span>
                        <i class="iconfont icon-arrow-down" v-if="langList.children"></i>
                    </div>
                </template>
            </li>
            <li v-if="langList"><div class="line"></div></li>
            
            <li>
                <template v-if="sysUserInfo.children&&sysUserInfo.children.length">
                    <div class="item" @mouseenter="handleFuncMenus(sysUserInfo,$event)">
                        <div class="tip">
                            <i class="iconfont" :class="sysUserInfo.iconClass"></i>
                        </div>
                        <span class="title" v-html="sysUserInfo.html||sysUserInfo.name"></span>
                        <i class="iconfont icon-arrow-down" v-if="sysUserInfo.children"></i>
                    </div>
                </template>
            </li>
            <li><div class="line"></div></li>
            <li v-if="hasSetting">
                <div class="item" :title="$t('hivuiMain_customWorkbench')">
                    <a href="#design" target='_blank'><i class="iconfont icon-set-fill"></i></a>   
                </div>
            </li>
            <li>
                <div class="item" :title="$t('hivuiMain_logout')">
                    <a @click="handleLogout"><i class="iconfont icon-tuichu"></i></a>    
                </div>
            </li>
        </ul>
        <vueContextMenu ref="cmp-funcMenu" :menu-items="menuItems" field="name"></vueContextMenu>
        <modifyPw></modifyPw>
    </div>
</template>
<script>
import pinyin from 'js-pinyin';//ie 下有问题 编译不过
import Cookies from 'js-cookie'
 
import vueContextMenu from "@main/components/contextMenu";
import logoCont from "@main/components/logo";
import modifyPw from "@main/views/layout/components/modifyPw";
import allFuncMenu from './allFuncMenu'
import {changeBz} from "@main/api/user";

import { removeToken } from '@main/utils/auth'
import { sortMapTurnArr } from '@main/utils/index'

import def_sy_loading from "@main/assets/logo_max.png"
import def_sy_minLogo from "@main/assets/logo_min.png"
import def_sy_logo from "@main/assets/logo.png"
import def_sy_logo_horizon from "@main/assets/logo_horizon.png"

export default {
    components:{
        vueContextMenu,
        modifyPw,
        allFuncMenu,
        logoCont
    },
    inject:['addTab','showTab','hideTab'],
    props:{
        hasTitle:{
            type: Boolean,
        },
        logoWidth:{
            type: String,
        }
    },
    data(){
        return {
            menuItems:[],
            searchWord:"",
            searchList:[],
            seldIndex:0,
            menuShow:false,
            searchMenusStyle:{
                display:'none',
                left:0,
                top:0,
                width:0,
                // maxHeight:'50%',
                // overflow:'auto'
            },
            sysListStyle:{
                display:'none',
                left:0,
                top:0,
            },
            latelyUseStyle:{
                display:'none',
                left:0,
                top:0,
                maxHeight:'50%',
                overflow:'auto'
            },
            def_sy_minLogo:def_sy_minLogo,
            def_sy_logo:def_sy_logo,
            def_sy_logo_horizon:def_sy_logo_horizon,
            numTipTimer:null,
            showAllFuncBtn:window.customSysCofig.isShowAllFunc===false?false:true,
            hideHistoryFuncList:window.customSysCofig.hideHistoryFuncList||false,
            isShowAllFuncMenu:false,
            allFuncBtnObj:{},
            msgCount:0
        }
    },  
    computed:{
        hasSetting(){
            let cfg = this.$store.state.app.config||{};
            if(cfg.hideSettingBtn){
                return false;
            }
            let _arr=sortMapTurnArr(cfg.sysSetTabs);
            return _arr&&_arr.length;
        },
        sysList(){
            let cfg = this.$store.state.app.config||{};
            return cfg.sysList||[];
        },
        sysUserInfo(){
            let me=this;
            let cfg = this.$store.state.app.config||{};
            function replaceData(str){
                if(!str)return ['',false];
                var _arr=str.match(/\${(\S*?)}/g);
                var nullNum=0;

if(_arr&&_arr.length>0){
                    for(let i of _arr){
                        var _data=me.userInfo[i.match(/\${(\S*)}/)[1]];
                        if(typeof(_data)!="undefined"){
                            str=str.replace(i,_data);
                        }else{
                            str=str.replace(i,me.$t('hivuiMain_header_null'));
                            nullNum++;
                        }
                    }
                    return [str,nullNum==_arr.length?false:true];
                }
                return [str,true];
            }
            //多岗信息文字模板format
            function orgBzTplFormat(str,item){
                let fieldArr=str.match(/(?<=\${).*?(?=})/g);
                fieldArr.forEach((_i)=>{
                    if(typeof(item[_i])!="undefined"){
                        str=str.replaceAll("${"+_i+"}",item[_i]);
                    }
                });
                return str;
            }
            let _userInfo=cfg.userInfo;
            if(_userInfo){
                _userInfo.name=replaceData(_userInfo.name)[0];
                if(_userInfo.children&&_userInfo.children.length>0){
                    _userInfo.children=_userInfo.children.filter((item)=>{
                        let _rData=replaceData(item.name);
                        item.name=_rData[0];
                        switch(item.type){
                            case "modifyUserInfo":
                                item.handler=me.modifyUserInfo;
                                break;
                            case "modifyPw":
                                item.handler=me.modifyPw;
                                break;
                            case "personalCenter":
                                item.handler=me.personalCenter;
                                break;
                            case "orgBz":
                                if(Array.isArray(me.bzList)&&me.bzList.length>1){
                                    item.children=[];
                                    for(let i of me.bzList){
                                        let _pushData={
                                            iconClass:'icon-user',
                                            name:cfg.orgBzTpl?orgBzTplFormat(cfg.orgBzTpl,i):`${i.fbzname}/${i.fbzid}`,
                                            handler:function(){
                                                me.__changeOrgBz(`${i.fbzid}`);
                                            },
                                        };
                                        /*if(i.fbzid==me.userInfo.fbzid){
                                            _pushData.chooseIcon={
                                                title:me.$t("hivuiMain_header_bzchooseIcon_title"),
                                                iconClass:"el-icon-star-on",
                                            };
                                        }else{
                                            _pushData.hoverBtn={
                                                title:me.$t("hivuiMain_header_bzhoverbtn_title"),
                                                iconClass:"iconfont icon-set",
                                                handler:function(){
                                                    console.log(123456789);
                                                }
                                            }
                                        }*/
                                        item.children.push(_pushData);
                                    }
                                }
                                break;
                        }
                        if(_rData[1]){
                            return item;
                        }
                    });
                }
            }
            return _userInfo||[];
        },
        sysProjectManage(){
            let cfg = this.$store.state.app.config||{};
            let  item = cfg.sysProjectMange||{},flag=false;
            this.$store.state.app.powerList.forEach(p=>{
                if(p.resUrl.indexOf(item.uri)>-1){
                    flag = true;
                    return true;
                }                        
            });
            if(flag){
                return cfg.sysProjectMange;
            }else{
                return null;
            }
        },
        langList(){            
            let cfg = this.$store.state.app.config||{};
            if(!cfg.showChangeLangBtn){
                return;
            }
            let menus = cfg.langList||[];
            return menus;
        },
        sysFuncMenus(){            
            let cfg = this.$store.state.app.config||{};
            let menus = sortMapTurnArr(cfg.sysFuncMenus)||[];
            return menus;
        },
        logoOpt(){
            let cfg = this.$store.state.app.config||{};
            return (this.layout=="level"&&cfg.sysLogoHorizon?cfg.sysLogoHorizon:cfg.sysLogo)||{};
        },
        MlogoOpt(){
            let cfg = this.$store.state.app.config||{};
            return cfg.MsysLogo||{};
        },
        layout(){
            return window.localStorage.getItem('layout');
        },
        navsLatelyUse(){
            return this.$store.getters.navsLatelyUse;
        },
        token(){
            return this.$store.getters.token;
        },
        userInfo(){
            return this.$store.state.user.userInfo;
        },
        bzList(){
            return this.$store.state.user.bzList;
        },

},
    watch:{ 
        searchWord(newVal,oldVal){
            this.seldIndex=0;
            this.doSearch(newVal);
        }
    },
    mounted(){ 
        let me=this;
        document.addEventListener('click',me.handleSeachResult);
        me.$store.dispatch("app/getSysConfig");
        me.sysFuncMenus.filter(item=>{
            if(item.type=="withNumTips"&&item.numFunc){
                function __intervalFunc(){
                    item.numFunc().then(res=>{
                        me.msgCount = res.num;
                        // me.$set(item,"tipNum",res.num); //渲染报错？？
                        if(res.num&&!item.hideNotific){
                            window.SysPage.notificationFunc(me.$t("hivuiMain_header_notification_title"),item.messageText(res),()=>{
                                me.handleFuncMenus(item);
                            });
                        }
                    }).catch(err=>{
                        clearInterval(me.numTipTimer);
                    });
                }
                clearInterval(me.numTipTimer);
                me.numTipTimer=setInterval(__intervalFunc,item.numIntervalTime||1000*30);
                __intervalFunc();
            }
        });
        me.allFuncBtnObj=(me.layout == 'level')&&me.showAllFuncBtn&&me.$refs.allFuncBtn.getBoundingClientRect();
    },
    beforeDestroy(){
        document.removeEventListener('click',this.handleSeachResult)
    },
    methods:{

handleSeachResult(e){
            console.log(e.target,e.target.closest('.pl-no-handle'))
            if (e.target.closest('.pl-no-handle')) {
                return
            }
            this.hideSeachResult();
        },
        handleSearch(){
            let cnKey=this.searchWord;
            this.seldIndex=0;
            this.doSearch(cnKey);
        },
        openDesign(){
            this.$refs['cmp-dd'].show();
        },
        doSearch(cnKey){
            console.log("doSearch",cnKey);
            if(cnKey==""){                
                this.hideSeachResult();
                return;
            }
            this.showSeachResult();
            let list = [],
                records = this.$store.getters.menusList,
                hideMenuItemList = this.$store.getters.hideMenuItemList;
             let py = pinyin.getCamelChars(cnKey).toLocaleLowerCase();
            console.log('records', records)
            //let py = Scp.String.getPinyin(cnKey).toLocaleLowerCase();

// this.addTab(item.resUrl,item.name,item.resId);
                this.addTab(item);//inject 提供的方法只能 传一个参数
                this.searchWord = "";
                this.seldIndex = 0;
                this.hideSeachResult();
            }
        },
        showSeachResult(){
            console.log("showSeachResult");
            this.searchMenusStyle.display ='block';
            let s = this.$refs["dom-searchBox"];
            let rect = s.getBoundingClientRect();
            this.searchMenusStyle.left = rect.left+'px';
            this.searchMenusStyle.top = rect.top + rect.height + 5 +'px';
            this.searchMenusStyle.width = rect.width+'px';
            this.searchMenusStyle.opacity = '1';
        },
        hideSeachResult(){
            this.searchMenusStyle.display ='none';
        },
        handleChangeSys(item){
            if(!item.url)return;
            if(item.target=="_blank"){
                window.open(item.url)
            }else{
                window.location.href=item.url;
            }
        },
        handleShowSysList(){
            this.sysListStyle.display ='block';
            let s = this.$refs["dom-sysList"];
            let rect = s.getBoundingClientRect();
            this.sysListStyle.left = rect.left+'px';
            this.sysListStyle.top = rect.top + rect.height  +'px';
        },
        handleHideSysList(){
            this.sysListStyle.display ='none';
        },
        handleFuncMenus(item,$event){
            $event&&$event.stopPropagation();
            if(item.type== "link"){
                window.open(item.resUrl,item.name);
                return;
            }
            var _url=item.url;
            if(item.type== "widthToken"||item.type== "withToken"){
                _url=item.url+"&access_token="+this.token;
            }
            if(item.url){
                item.target=='tab'? this.addTab({
                    resUrl:_url,
                    name:item.name,
                    resId:item.id,
                    openType:item.openType,
                }) : window.open(_url);
                return
            }else{
                item.handler&&item.handler();
            }
            if(item.children&&item.children.length){
                this.menuItems = item.children;
                this.$refs['cmp-funcMenu'].open($event);
                if(item.type == "lang"){//默认切换语言函数
                    item.children.forEach((__item,index)=>{
                        if(!__item.handler){
                            __item.handler=()=>{
                                window.localStorage.setItem("locale",JSON.stringify({
                                    desc:__item.name,
                                    name:__item.key,
                                }));
                                Cookies.set("locale",__item.key);
                                window.location.reload();
                            }
                        }
                    });
                }
            }
        },
        async handleLogout(){
                if(window.customSysCofig.logoutBeforeCallback){
                    const bool =  window.customSysCofig.logoutBeforeCallback();
                    if(bool){
                        return;
                    }
                }
                await this.$store.dispatch("user/logout").then(()=>{
                    //removeToken();
                    window.sessionStorage.removeItem("bzid");
                    if(window.customSysCofig.logoutCallback){
                        window.customSysCofig.logoutCallback();
                    }else{
                        if(window.HIVUI_SETTING.isSingleLogin&&window.HIVUI_SETTING.singleLogoutUrl){
                            location=window.HIVUI_SETTING.singleLogoutUrl;
                        }else{
                            location=window.HIVUI_SETTING.loginUrl;
                        }
                    }
                });
        },
        handleShowLatelyUse(){
            this.$store.dispatch('app/getLatelyUse')//最近使用 
            let s = this.$refs["dom-latelyUse"];
            let rect = s.getBoundingClientRect();
            this.latelyUseStyle.display ='block';
            this.latelyUseStyle.left = rect.left+'px';
            this.latelyUseStyle.top = rect.top + rect.height  +'px';
            this.latelyUseStyle.opacity = '1';
        },
        handleHideLatelyUse(){
            this.latelyUseStyle.display ='none';
        },
        handleOpenLatelyFunc(item){      
            if(item.type== "link"){
                window.open(item.resUrl,item.name);
                return;
            }
            this.addTab({
                resUrl:item.resUrl,
                name:item.name,
                openType:item.openType,
            });//inject 提供的方法只能 传一个参数
        },   
        hideTitle(name){
            this.$emit('hideTitle', name);
        },
        //切岗
        __changeOrgBz(bzid){
            changeBz({
                bzid:bzid
            }).then(res=>{
                window.location.reload();
            });
        },
        modifyPw(){
            this.$store.dispatch("user/showPwDialog",true);
        },
        // 个人中心
        personalCenter(){
            top.window.SysPage.newPage(this.$t("hivuiMain_app_personal_Center"), '#personalCenter');
        },
        modifyUserInfo(){
            
        },
        //全部功能弹窗
        allFuncTrigger(){
            let me=this;
            me.isShowAllFuncMenu=me.isShowAllFuncMenu?false:true;
            if(me.isShowAllFuncMenu){
                me.$refs.allFuncMenu.showBox();
            }else{
                me.$refs.allFuncMenu.hideBox();
            }
        },
        allFuncTriggerOpen(){
            let me=this;
            me.$refs.allFuncMenu.showBox();
        },
        allFuncTriggerClose(){
            let me=this;
            me.$refs.allFuncMenu.hideBox();
        },
        logoClickHanlder(opt){
            if(opt&&opt.clickHandler){
                opt.clickHandler();
            }
        },
    }
}
</script>
<style lang="less" scoped>
    .pl-header{
        z-index: 99;
    }
</style>

<template>
    <div class="pl-header " :data-layout="layout">  
        <ul class="ltArea">
            <li v-if="layout=='level'" class="logoStyle">
                <logo-cont :hasTitle="hasTitle" :logoWidth="logoWidth"></logo-cont>
            </li>
            <li v-else class="logoStyle">
                <logo-cont :logoWidth="logoWidth"></logo-cont>
            </li>
            <li v-if="sysList.length">                
                <div class="sysTrigger" ref='dom-sysList'  
                    @mouseover="handleShowSysList"  @mouseout="handleHideSysList">
                    <span>{{$t('hivuiMain_projectManage')}}</span>
                    <i class="iconfont icon-change"></i>
                </div> 
                <ul class="pl-menus pl-menus-sub pl-menus-pop"
                @mouseenter="handleShowSysList"  @mouseleave="handleHideSysList"
                :style="sysListStyle" v-add2Body>
                    <li class="pl-menus-item" v-for="item,index in sysList" @click="handleChangeSys(item)" :key="index">
                        <a class="title"><span class="txt">{{item.title}}</span></a>
                    </li>
                </ul>   
            </li>
            <li v-if="layout == 'level'&&!hideHistoryFuncList" >
                <div class="sysTrigger" ref="dom-latelyUse" 
                :title='$t("hivuiMain_recentlyUsed")'
                @mouseenter="handleShowLatelyUse"  @mouseleave="handleHideLatelyUse">
                    <i class="icon iconfont icon-time"></i>
                    <span class="title">{{$t('hivuiMain_recentlyUsed')}}</span>
                    <i class="icon iconfont icon-arrow-down"></i>
                </div>
                <ul class="pl-menus pl-menus-sub pl-menus-pop"
                @mouseenter="handleShowLatelyUse"  @mouseleave="handleHideLatelyUse"
                :style="latelyUseStyle" v-add2Body>
                    <li class="pl-menus-item" v-for="item,index in navsLatelyUse" @click="handleOpenLatelyFunc(item)" :key="index">
                        <a class="title"><span class="txt">{{item.name}}</span></a>
                    </li>
                    <li v-show="navsLatelyUse.length==0" class="pl-menus-tips">
                        {{$t('hivuiMain_nodata')}}
                    </li>
                </ul> 
            </li>
            <li v-if="layout == 'level'&&showAllFuncBtn" >
                <div class="sysTrigger">
                    <span ref="allFuncBtn" class="title" @mouseenter="allFuncTriggerOpen" @mouseleave="allFuncTriggerClose">{{$t('hivuiMain_allFunction')}}</span>
                    <i class="icon iconfont icon-arrow-down"></i>
                    <allFuncMenu ref="allFuncMenu" :triggerObj="allFuncBtnObj" v-add2Body></allFuncMenu>
                </div>
            </li>
        </ul>
        <ul class="rtArea">
            <li>
                <div class="pl-search" ref="dom-searchBox" >
                    <input ref="dom-seachTxt" class="pl-search-text" type="text" :placeholder="$t('hivuiMain_searchKey')" 
                    v-model.trim="searchWord" 
                    @keyup="handleSeachKeyUp"
                    />
                    <i class="iconfont icon-search"></i>                   
                </div>  
                <ul class="pl-menus pl-menus-sub pl-menus-pop" :style="searchMenusStyle" v-add2Body>
                    <li :class="['pl-menus-item',seldIndex==index?'pl-menus-itemSeld':'']" v-for="item,index in searchList" 
                    style="width:100%"
                    @click="openFunc(item)" :key="index">
                        <a class="title"><span class="txt" v-html="item.html||item.name"></span></a>
                    </li>
                    <li v-show="searchList.length==0&&searchWord.length>0" class="pl-menus-tips">
                        {{$t('hivuiMain_nodata')}}
                    </li>
                </ul> 
            </li>
            <li v-if="sysProjectManage">
                <a :href="sysProjectManage.url" target='_blank' class="item" :title="sysProjectManage.name">
                    <i class="iconfont" :class="sysProjectManage.iconClass"></i>
                    <span class="title">{{sysProjectManage.name}}</span>
                </a>  
            </li>
            <template v-for="(item,index) in sysFuncMenus">
                <li v-if="item.type!='split'" :key="index">
                    <template v-if="item.type=='withNumTips'">
                        <div class="item" @click.prevent="handleFuncMenus(item,$event)">
                            <div class="tip">
                                <i class="iconfont" :class="item.iconClass"></i>
                            </div>
                            <span class="title" v-html="item.html||item.name"></span>                            
                            <span class="pl-head-tipsNum" :hidden="!(msgCount!=0)">{{msgCount}}</span>
                            
                        </div>
                    </template>
                    <template v-else>
                        <template v-if="item.children&&item.children.length">
                            <div class="item" @mouseenter="handleFuncMenus(item,$event)">
                                <div class="tip">
                                    <i class="iconfont" :class="item.iconClass"></i>
                                </div>
                                <span class="title" v-html="item.html||item.name"></span>
                                <i class="iconfont icon-arrow-down" v-if="item.children"></i>
                            </div>
                        </template>
                        <template v-if="!item.children||item.children&&item.children.length==0">
                            <div class="item" @click.prevent="handleFuncMenus(item,$event)">
                                <div class="tip">
                                    <i class="iconfont" :class="item.iconClass"></i>
                                </div>
                                <span class="title" v-html="item.html||item.name"></span>
                                <i class="iconfont icon-arrow-down" v-if="item.children"></i>
                            </div>
                        </template>
                    </template>
                </li>
                <li v-if="item.type=='split'" :key="index"><div class="line"></div></li>                
            </template>
            
            
            <li v-if="langList">
                <template v-if="langList.children&&langList.children.length">
                    <div class="item" @mouseenter="handleFuncMenus(langList,$event)">
                        <div class="tip">
                            <i class="iconfont" :class="langList.iconClass"></i>
                        </div>
                        <span class="title" v-html="langList.html||langList.name"></span>
                        <i class="iconfont icon-arrow-down" v-if="langList.children"></i>
                    </div>
                </template>
            </li>
            <li v-if="langList"><div class="line"></div></li>
            
            <li>
                <template v-if="sysUserInfo.children&&sysUserInfo.children.length">
                    <div class="item" @mouseenter="handleFuncMenus(sysUserInfo,$event)">
                        <div class="tip">
                            <i class="iconfont" :class="sysUserInfo.iconClass"></i>
                        </div>
                        <span class="title" v-html="sysUserInfo.html||sysUserInfo.name"></span>
                        <i class="iconfont icon-arrow-down" v-if="sysUserInfo.children"></i>
                    </div>
                </template>
            </li>
            <li><div class="line"></div></li>
            <li v-if="hasSetting">
                <div class="item" :title="$t('hivuiMain_customWorkbench')">
                    <a href="#design" target='_blank'><i class="iconfont icon-set-fill"></i></a>   
                </div>
            </li>
            <li>
                <div class="item" :title="$t('hivuiMain_logout')">
                    <a @click="handleLogout"><i class="iconfont icon-tuichu"></i></a>    
                </div>
            </li>
        </ul>
        <vueContextMenu ref="cmp-funcMenu" :menu-items="menuItems" field="name"></vueContextMenu>
        <modifyPw></modifyPw>
    </div>
</template>
<script>
import pinyin from 'js-pinyin';//ie 下有问题 编译不过
import Cookies from 'js-cookie'
 
import vueContextMenu from "@main/components/contextMenu";
import logoCont from "@main/components/logo";
import modifyPw from "@main/views/layout/components/modifyPw";
import allFuncMenu from './allFuncMenu'
import {changeBz} from "@main/api/user";

import { removeToken } from '@main/utils/auth'
import { sortMapTurnArr } from '@main/utils/index'

},
    watch:{ 
        searchWord(newVal,oldVal){
            this.seldIndex=0;
            this.doSearch(newVal);
        }
    },
    mounted(){ 
        let me=this;
        document.addEventListener('click',me.hideSeachResult);
        me.$store.dispatch("app/getSysConfig");
        me.sysFuncMenus.filter(item=>{
            if(item.type=="withNumTips"&&item.numFunc){
                function __intervalFunc(){
                    item.numFunc().then(res=>{
                        me.msgCount = res.num;
                        // me.$set(item,"tipNum",res.num); //渲染报错？？
                        if(res.num&&!item.hideNotific){
                            window.SysPage.notificationFunc(me.$t("hivuiMain_header_notification_title"),item.messageText(res),()=>{
                                me.handleFuncMenus(item);
                            });
                        }
                    }).catch(err=>{
                        clearInterval(me.numTipTimer);
                    });
                }
                clearInterval(me.numTipTimer);
                me.numTipTimer=setInterval(__intervalFunc,item.numIntervalTime||1000*30);
                __intervalFunc();
            }
        });
        me.allFuncBtnObj=(me.layout == 'level')&&me.showAllFuncBtn&&me.$refs.allFuncBtn.getBoundingClientRect();
    },
    beforeDestroy(){
        document.removeEventListener('click',this.hideSeachResult)
    },
    methods:{
        openDesign(){
            this.$refs['cmp-dd'].show();
        },
        doSearch(cnKey){
            if(cnKey==""){                
                this.hideSeachResult();
                return;
            }
            this.showSeachResult();
            let list = [],
                records = this.$store.getters.menusList,
                hideMenuItemList = this.$store.getters.hideMenuItemList;
             let py = pinyin.getCamelChars(cnKey).toLocaleLowerCase();
            console.log('records', records)
            //let py = Scp.String.getPinyin(cnKey).toLocaleLowerCase();

// this.addTab(item.resUrl,item.name,item.resId);
                this.addTab(item);//inject 提供的方法只能 传一个参数
                this.searchWord = "";
                this.seldIndex = 0;
                this.hideSeachResult();
            }
        },
        showSeachResult(){
            this.searchMenusStyle.display ='block';
            let s = this.$refs["dom-searchBox"];
            let rect = s.getBoundingClientRect();
            this.searchMenusStyle.left = rect.left+'px';
            this.searchMenusStyle.top = rect.top + rect.height + 5 +'px';
            this.searchMenusStyle.width = rect.width+'px';
            this.searchMenusStyle.opacity = '1';
        },
        hideSeachResult(){
            this.searchMenusStyle.display ='none';
        },
        handleChangeSys(item){
            if(!item.url)return;
            if(item.target=="_blank"){
                window.open(item.url)
            }else{
                window.location.href=item.url;
            }
        },
        handleShowSysList(){
            this.sysListStyle.display ='block';
            let s = this.$refs["dom-sysList"];
            let rect = s.getBoundingClientRect();
            this.sysListStyle.left = rect.left+'px';
            this.sysListStyle.top = rect.top + rect.height  +'px';
        },
        handleHideSysList(){
            this.sysListStyle.display ='none';
        },
        handleFuncMenus(item,$event){
            $event&&$event.stopPropagation();
            if(item.type== "link"){
                window.open(item.resUrl,item.name);
                return;
            }
            var _url=item.url;
            if(item.type== "widthToken"||item.type== "withToken"){
                _url=item.url+"&access_token="+this.token;
            }
            if(item.url){
                item.target=='tab'? this.addTab({
                    resUrl:_url,
                    name:item.name,
                    resId:item.id,
                    openType:item.openType,
                }) : window.open(_url);
                return
            }else{
                item.handler&&item.handler();
            }
            if(item.children&&item.children.length){
                this.menuItems = item.children;
                this.$refs['cmp-funcMenu'].open($event);
                if(item.type == "lang"){//默认切换语言函数
                    item.children.forEach((__item,index)=>{
                        if(!__item.handler){
                            __item.handler=()=>{
                                window.localStorage.setItem("locale",JSON.stringify({
                                    desc:__item.name,
                                    name:__item.key,
                                }));
                                Cookies.set("locale",__item.key);
                                window.location.reload();
                            }
                        }
                    });
                }
            }
        },
        async handleLogout(){
                if(window.customSysCofig.logoutBeforeCallback){
                    const bool =  window.customSysCofig.logoutBeforeCallback();
                    if(bool){
                        return;
                    }
                }
                await this.$store.dispatch("user/logout").then(()=>{
                    //removeToken();
                    window.sessionStorage.removeItem("bzid");
                    if(window.customSysCofig.logoutCallback){
                        window.customSysCofig.logoutCallback();
                    }else{
                        if(window.HIVUI_SETTING.isSingleLogin&&window.HIVUI_SETTING.singleLogoutUrl){
                            location=window.HIVUI_SETTING.singleLogoutUrl;
                        }else{
                            location=window.HIVUI_SETTING.loginUrl;
                        }
                    }
                });
        },
        handleShowLatelyUse(){
            this.$store.dispatch('app/getLatelyUse')//最近使用 
            let s = this.$refs["dom-latelyUse"];
            let rect = s.getBoundingClientRect();
            this.latelyUseStyle.display ='block';
            this.latelyUseStyle.left = rect.left+'px';
            this.latelyUseStyle.top = rect.top + rect.height  +'px';
            this.latelyUseStyle.opacity = '1';
        },
        handleHideLatelyUse(){
            this.latelyUseStyle.display ='none';
        },
        handleOpenLatelyFunc(item){      
            if(item.type== "link"){
                window.open(item.resUrl,item.name);
                return;
            }
            this.addTab({
                resUrl:item.resUrl,
                name:item.name,
                openType:item.openType,
            });//inject 提供的方法只能 传一个参数
        },   
        hideTitle(name){
            this.$emit('hideTitle', name);
        },
        //切岗
        __changeOrgBz(bzid){
            changeBz({
                bzid:bzid
            }).then(res=>{
                window.location.reload();
            });
        },
        modifyPw(){
            this.$store.dispatch("user/showPwDialog",true);
        },
        // 个人中心
        personalCenter(){
            top.window.SysPage.newPage(this.$t("hivuiMain_app_personal_Center"), '#personalCenter');
        },
        modifyUserInfo(){
            
        },
        //全部功能弹窗
        allFuncTrigger(){
            let me=this;
            me.isShowAllFuncMenu=me.isShowAllFuncMenu?false:true;
            if(me.isShowAllFuncMenu){
                me.$refs.allFuncMenu.showBox();
            }else{
                me.$refs.allFuncMenu.hideBox();
            }
        },
        allFuncTriggerOpen(){
            let me=this;
            me.$refs.allFuncMenu.showBox();
        },
        allFuncTriggerClose(){
            let me=this;
            me.$refs.allFuncMenu.hideBox();
        },
        logoClickHanlder(opt){
            if(opt&&opt.clickHandler){
                opt.clickHandler();
            }
        },
    }
}
</script>
<style lang="less" scoped>
    .pl-header{
        z-index: 99;
    }
</style>

Ignore Space Show notes View project/hivuiMain/views/layout/components/conciseSidebar/concisemenu.vue
<template> <div class="concise-menu" ref="conciseMenu" :style="menuStyle" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" > <div class="menu-search"> <div class="menu-title"> <div class="title">功能搜索:</div> </div> <div class="menu-search-box"> <i class="iconfont icon-search"></i> <input type="text" class="menu-search-input" placeholder="支持拼音首字母搜索" v-model.trim="searchWord" @focus="handleInputFocus" @blur="handleInputBlur" @compositionstart="handleCompositionStart" @compositionend="handleCompositionEnd" /> <i class="el-icon-circle-close" style="font-size: 12px; opacity: 0.8; margin-right: 5px" v-if="searchWord != ''" @click="searchWord = ''" ></i> </div> <div class="menu-search-box"> <!-- <input type="text" class="menu-search-input" placeholder="支持拼音首字母搜索" v-model.trim="searchWord" /> --> <!-- <el-input class="menu-search-input" clearable v-model="searchWord" placeholder="支持拼音首字母搜索" prefix-icon="el-icon-search" @focus.native="handleInputFocus" @blur.native="handleInputBlur" @compositionstart.native="handleCompositionStart" @compositionend.native="handleCompositionEnd" ></el-input> --> <!-- <i class="iconfont icon-search"></i> --> </div> </div> <div class="menu-content"> <div class="level1List" v-if="searchWord == ''"> <!-- 一级菜单列表 --> <ul class="area"> <li v-for="item in menus" :key="item.resId"> <div class="menu-item"> <div class="level first-level" :class="{ active: curresId == item.resId, noChild: !item.children \|\| !item.children.length, }" @click="handleFirstLevelClick(item)" @mouseenter="handleFirstLevelMouseEnter(item)" > <span class="title">{{ item.name }}</span> <i v-if="item.children && item.children.length" class="iconfont icon-arrow-right" ></i> </div> </div> </li> </ul> <!-- 二级及以下菜单列表 --> <ul class="area child-menu"> <li v-for="item in childrenData" :key="item.resId"> <div class="menu-item menu-item2"> <div> <div class="level second-level" :class="{ active: curresId == item.parentId && item.children && item.children.length, noChild: !item.children \|\| !item.children.length, }" @click="handleSecondLevelClick(item)" > <span class="title">{{ item.name }}</span> <!-- <i v-if="item.children && item.children.length" class="iconfont icon-arrow-right" ></i> --> </div> </div> <!-- 三级菜单 --> <ul class="child-area" v-if="item.children && item.children.length" > <template v-for="child in item.children"> <!-- 普通三级菜单项 --> <li :key="child.resId" v-if=" child.isShow && !(child.children && child.children.length) " > <div class="menu-item"> <div class="third-level" @click="handleOpenFunc(child)"> <span class="title">{{ child.name }}</span> <i v-if="child.children && child.children.length" class="iconfont icon-arrow-right" ></i> </div> </div> </li> <!-- 嵌套子菜单组件 --> <nav-sub-menus :level="0" :menuitem="child" :parent="conciseMenu" v-if=" child.isShow && child.children && child.children.length " :key="child.resId" > </nav-sub-menus> </template> </ul> </div> </li> </ul> </div> <div class="searchResultList" v-else> <ul> <li v-for="(searchItem, index) in searchList" :key="'search-' + index" :data-index="index" :title="searchItem.name" @click="handleOpenFunc(searchItem)" > <itemIcon :item="searchItem"></itemIcon> <span>{{ searchItem.name }}</span> </li> <li v-show="searchList.length == 0"> {{ $t("hivuiMain_nodata") }} </li> </ul> </div> </div> </div> </template> <script> import itemIcon from "@main/views/layout/components/allFuncMenu/itemIcon"; import NavSubMenus from "./menus.vue"; import pinyin from "js-pinyin"; import cloneDeep from "lodash/cloneDeep"; export default { name: "ConciseMenu", inject: ["addTab"], provide() { let me = this; return { hideMenus() { me.handleMouseLeave(); }, }; }, components: { NavSubMenus, itemIcon }, props: { targetElRect: { type: Object, required: true, }, placement: { type: String, default: "right", }, }, data() { return { searchWord: "", searchList: [], isVisible: false, isMouseOverMenu: false, isInputFocus: false, isComposing: false, curresId: "", childrenData: [], }; }, watch: { targetElRect: { handler() { this.updatePosition(); }, deep: true, }, searchWord(newVal, oldVal) { this.seldIndex = 0; this.doSearch(newVal); }, }, computed: { menuStyle() { return { position: "absolute", top: this.isVisible ? this.position.top + "px" : "-9999px", left: this.position.left + "px", opacity: this.isVisible ? 1 : 0, visibility: this.isVisible ? "visible" : "hidden", width: this.isVisible ? "700px" : "0", transition: " opacity 0.3s ease 0.1s, visibility 0.3s ease 0.1s", backgroundColor: "rgba(255, 255, 255, 1)", boxShadow: "0px 0px 6px rgba(0, 0, 0, 0.25)", boxSizing: "border-box", overflow: "hidden", zIndex: 1000, }; }, position() { return { top: 0, left: 0, }; }, menus() { const menus = this.$store.getters.menus.filter((item) => item.isShow); return menus; }, }, methods: { /** * 显示菜单 / show() { this.isVisible = true; this.$nextTick(() => { this.updatePosition(); }); }, /* * 隐藏菜单 / hide() { if (this.isComposing \|\| this.isInputFocus) { return; } this.isVisible = false; }, /* * 更新菜单位置 / updatePosition() { if (!this.isVisible) return; this.$nextTick(() => { const menuEl = this.$el; if (!menuEl) return; const rect = this.targetElRect; if (!rect) return; let top = rect.top; let left = rect.right; if (this.placement != "right") { top = top + rect.height; left = 0; } // 应用位置 menuEl.style.top = top + "px"; menuEl.style.left = left + "px"; }); }, /* * 鼠标进入菜单区域处理 / handleMouseEnter(e) { if (e) { const target = e.target \|\| e.srcElement; if (target.closest && target.closest(".pl-menus-item")) { this.isMouseOverMenu = true; return; } } this.isMouseOverMenu = true; }, handleInputFocus() { this.isInputFocus = true; }, handleInputBlur() { this.isInputFocus = false; }, handleCompositionStart() { this.isComposing = true; console.log("+++++compositionstart", this.isComposing); }, handleCompositionEnd() { this.isComposing = false; console.log("----compositionend", this.isComposing); }, /* * 鼠标离开菜单区域处理 / handleMouseLeave(e) { if (e) { const relatedTarget = e.relatedTarget \|\| e.toElement; if ( relatedTarget && relatedTarget.closest && relatedTarget.closest(".pl-menus-item") ) { this.isMouseOverMenu = true; return; } if (!relatedTarget) { const activeEl = document.activeElement; if ( this.$el && (this.isComposing \|\| this.isInputFocus \|\| this.$el.contains(activeEl)) ) { this.isMouseOverMenu = true; return; } } } this.isMouseOverMenu = false; this.hide(); }, /* * 处理一级菜单点击事件 / handleFirstLevelClick(item) { if (!item.children \|\| !item.children.length) { this.handleOpenFunc(item); } }, /* * 处理一级菜单鼠标悬停事件 / handleFirstLevelMouseEnter(item) { if (item.children && item.children.length) { this.handleOpenFunc(item, true); } }, /* * 处理二级菜单点击事件 / handleSecondLevelClick(item) { if (!item.children \|\| !item.children.length) { this.handleOpenFunc(item); } }, /* * 打开功能页面 * @param {Object} item - 菜单项 * @param {Boolean} isTabClick - 是否是标签页点击（仅设置子菜单数据） / async handleOpenFunc(item, isTabClick) { let me = this; if (isTabClick) { this.setChildrenData(item.resId); return; } if (item.type == "link") { window.open(item.resUrl, item.name); return; } else if (item.type == "sso") { item.ssoUrl = await me.$store.dispatch("user/openSSOFuncPage", { serviceUrl: item.resUrl, }); } // 添加标签页 me.addTab(item); setTimeout(() => { me.handleMouseLeave && me.handleMouseLeave(); }, 100); }, /* * 设置子菜单数据 * @param {String} resId - 菜单资源ID / setChildrenData(resId) { this.curresId = resId; const menu = this.menus.find((m) => m.resId === resId); if (menu && menu.children) { this.childrenData = menu.children; } else { this.childrenData = []; } }, //获取搜索列表数据 doSearch(cnKey) { let me = this; let list = [], records = me.$store.getters.menusList, hideMenuItemList = me.$store.getters.hideMenuItemList; let py = pinyin.getCamelChars(cnKey).toLocaleLowerCase(); let re = new RegExp("^[a-zA-Z]+$"); for (let i = 0, l = records.length; i < l; i++) { let item = records[i]; if (!(!item.isShow \|\| hideMenuItemList.indexOf(item.parentId) != -1)) { if (item.parentId == -1 && item.type == "root") { continue; } if (re.test(cnKey)) { let y = pinyin.getCamelChars(item.name).toLocaleLowerCase(); if (y.indexOf(py) > -1 && item.type != "dir") { list.push(item); } } else { if (item.name.indexOf(cnKey) > -1 && item.type != "dir") { list.push(item); } } } } me.$set(me, "searchList", list); // me.$nextTick(() => { // me.countHeight(); // me.$refs.listBox.scrollTo({ // top: 0, // }); // }); }, }, mounted() { if (this.menus.length > 0) { const menu = this.menus[0]; this.setChildrenData(menu.resId); } }, }; </script> <style lang="less" scoped> .concise-menu { // border-radius: 5px; .title { font-weight: 400; } ul, li { padding: 0; margin: 0; list-style: none; } { box-sizing: border-box; } .menu-search { display: flex; background-color: rgba(235, 241, 247, 1); border-bottom: 1px solid rgba(206, 215, 224, 1); height: 48px; padding-left: 15px; align-items: center; .menu-title { // width: 110px; text-align: right; padding-right: 10px; } .menu-search-box { width: 240px; display: flex; align-items: center; background-color: #fff; padding-right: 10px; border-radius: 5px; input { flex: 1; border: none; outline: none; line-height: 28px; padding: 0 15px; padding-left: 0; border-radius: 5px; } i { font-size: 20px; padding: 0 5px; cursor: pointer; color: #828282; } } } .menu-content { position: relative; .level1List { min-height: 350px; max-height: calc(100vh - 200px); overflow: auto; } .area { display: flex; flex-direction: column; li { &:first-child { .menu-item { .first-level { border-top: none; } } } &:last-child { .menu-item2 { border-bottom: none; } } } &.child-menu { width: calc(100% - 168px); height: 100%; position: absolute; top: 0; right: 0; background-color: #fff; overflow: auto; padding-left: 24px; padding-right: 20px; .menu-item2 { padding: 12px 0; border-bottom: 1px dashed rgba(184, 184, 184, 1); } } .menu-item { display: flex; flex-direction: column; .level { position: relative; width: 168px; text-align: left; padding-left: 15px; i { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); } &.noChild { cursor: pointer; } &.first-level { cursor: pointer; background-color: rgba(247, 247, 247, 1); // border: 1px solid #ced7e0; border-bottom: none; line-height: 40px; &.active { // color: rgba(0, 102, 204, 1); background-color: #fff; border-right-color: transparent; cursor: default; } &:hover { // color: rgba(0, 102, 204, 1); } } &.second-level { width: 100%; // padding-top: 5px; padding-left: 5px; // padding-bottom: 5px; &.active { color: rgba(161, 161, 182, 1); background-color: #fff; border-color: transparent; &:hover { color: rgba(161, 161, 182, 1); } } &:hover { // color: rgba(0, 102, 204, 1); } } } } .child-area { width: 100%; display: flex; flex-wrap: wrap; padding-top: 3px; // gap: 8px; // border-bottom: 1px solid #ced7e0; li { width: 33%; // margin-bottom: 12px; padding: 5px 6px; color: rgba(51, 51, 51, 1); } .third-level { // padding: 0 8px; // padding-left: 0; // border-left: 1px solid #ced7e0; cursor: pointer; &:hover { // color: rgba(0, 102, 204, 1); } } ::v-deep .pl-menus-item { // padding: 0 8px; // padding-left: 0; // border-left: 1px solid #ced7e0; &.pl-menus-itemSeld { color: rgba(0, 102, 204, 1); } .title { position: relative; font-weight: 400; color: #333333; .txt { display: inline-block; i { position: initial; transform: rotate(90deg); // right: -5px; // top: 50%; // transform: translateY(-50%); } } } } } } .searchResultList { width: 100%; min-height: 100px; max-height: calc(100vh - 200px); overflow: auto; padding: 5px 10px; ul { display: flex; flex-wrap: wrap; padding-bottom: 10px; li { flex: 0 0 33.3%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 32px; font-size: 14px; display: flex; align-items: center; cursor: pointer; &:hover { // color: #06c; } } .itemSeld { // color: #f00; } } } } } </style> <template> <div class="concise-menu" ref="conciseMenu" :style="menuStyle" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" > <div class="menu-search"> <div class="menu-title"> <div class="title">功能搜索:</div> </div> <div class="menu-search-box"> <input type="text" class="menu-search-input" placeholder="支持拼音首字母搜索" v-model.trim="searchWord" @focus="handleInputFocus" @blur="handleInputBlur" @compositionstart="handleCompositionStart" @compositionend="handleCompositionEnd" /> <i class="el-icon-circle-close" style="font-size: 12px;opacity: 0.5;margin-right: 5px;" v-if="searchWord != ''" @click="searchWord = ''"></i> <i class="iconfont icon-search"></i> </div> <div class="menu-search-box"> <!-- <input type="text" class="menu-search-input" placeholder="支持拼音首字母搜索" v-model.trim="searchWord" /> --> <!-- <el-input class="menu-search-input" clearable v-model="searchWord" placeholder="支持拼音首字母搜索" prefix-icon="el-icon-search" @focus.native="handleInputFocus" @blur.native="handleInputBlur" @compositionstart.native="handleCompositionStart" @compositionend.native="handleCompositionEnd" ></el-input> --> <!-- <i class="iconfont icon-search"></i> --> </div> </div> <div class="menu-content"> <div class="level1List" v-if="searchWord == ''"> <!-- 一级菜单列表 --> <ul class="area"> <li v-for="item in menus" :key="item.resId"> <div class="menu-item"> <div class="level first-level" :class="{ active: curresId == item.resId, noChild: !item.children \|\| !item.children.length, }" @click="handleFirstLevelClick(item)" @mouseenter="handleFirstLevelMouseEnter(item)" > <span class="title">{{ item.name }}</span> <i v-if="item.children && item.children.length" class="iconfont icon-arrow-right" ></i> </div> </div> </li> </ul> <!-- 二级及以下菜单列表 --> <ul class="area child-menu"> <li v-for="item in childrenData" :key="item.resId"> <div class="menu-item menu-item2"> <div> <div class="level second-level" :class="{ active: curresId == item.parentId && item.children && item.children.length, noChild: !item.children \|\| !item.children.length, }" @click="handleSecondLevelClick(item)" > <span class="title">{{ item.name }}</span> <!-- <i v-if="item.children && item.children.length" class="iconfont icon-arrow-right" ></i> --> </div> </div> <!-- 三级菜单 --> <ul class="child-area" v-if="item.children && item.children.length" > <template v-for="child in item.children"> <!-- 普通三级菜单项 --> <li :key="child.resId" v-if=" child.isShow && !(child.children && child.children.length) " > <div class="menu-item"> <div class="third-level" @click="handleOpenFunc(child)"> <span class="title">{{ child.name }}</span> <i v-if="child.children && child.children.length" class="iconfont icon-arrow-right" ></i> </div> </div> </li> <!-- 嵌套子菜单组件 --> <nav-sub-menus :level="0" :menuitem="child" :parent="conciseMenu" v-if=" child.isShow && child.children && child.children.length " :key="child.resId" > </nav-sub-menus> </template> </ul> </div> </li> </ul> </div> <div class="searchResultList" v-else> <ul> <li v-for="(searchItem, index) in searchList" :key="'search-' + index" :data-index="index" :title="searchItem.name" @click="handleOpenFunc(searchItem)" > <itemIcon :item="searchItem"></itemIcon> <span>{{ searchItem.name }}</span> </li> <li v-show="searchList.length == 0"> {{ $t("hivuiMain_nodata") }} </li> </ul> </div> </div> </div> </template> <script> import itemIcon from "@main/views/layout/components/allFuncMenu/itemIcon"; import NavSubMenus from "./menus.vue"; import pinyin from "js-pinyin"; import cloneDeep from "lodash/cloneDeep"; export default { name: "ConciseMenu", inject: ["addTab"], provide() { let me = this; return { hideMenus() { me.handleMouseLeave(); }, }; }, components: { NavSubMenus, itemIcon }, props: { targetElRect: { type: Object, required: true, }, placement: { type: String, default: "right", }, }, data() { return { searchWord: "", searchList: [], isVisible: false, isMouseOverMenu: false, isInputFocus: false, isComposing: false, curresId: "", childrenData: [], }; }, watch: { targetElRect: { handler() { this.updatePosition(); }, deep: true, }, searchWord(newVal, oldVal) { this.seldIndex = 0; this.doSearch(newVal); }, }, computed: { menuStyle() { return { position: "absolute", top: this.isVisible ? this.position.top + "px" : "-9999px", left: this.position.left + "px", opacity: this.isVisible ? 1 : 0, visibility: this.isVisible ? "visible" : "hidden", width: this.isVisible ? "700px" : "0", transition: " opacity 0.3s ease 0.1s, visibility 0.3s ease 0.1s", backgroundColor: "rgba(255, 255, 255, 1)", boxShadow: "0px 0px 6px rgba(0, 0, 0, 0.25)", boxSizing: "border-box", overflow: "hidden", zIndex: 1000, }; }, position() { return { top: 0, left: 0, }; }, menus() { const menus = this.$store.getters.menus.filter(item => item.isShow); return menus; }, }, methods: { /** * 显示菜单 / show() { this.isVisible = true; this.$nextTick(() => { this.updatePosition(); }); }, /* * 隐藏菜单 / hide() { if(this.isComposing \|\| this.isInputFocus){ return; } this.isVisible = false; }, /* * 更新菜单位置 / updatePosition() { if (!this.isVisible) return; this.$nextTick(() => { const menuEl = this.$el; if (!menuEl) return; const rect = this.targetElRect; if (!rect) return; let top = rect.top; let left = rect.right; if(this.placement != "right"){ top = top + rect.height; left = 0; } // 应用位置 menuEl.style.top = top + "px"; menuEl.style.left = left + "px"; }); }, /* * 鼠标进入菜单区域处理 / handleMouseEnter(e) { if (e) { const target = e.target \|\| e.srcElement; if (target.closest && target.closest(".pl-menus-item")) { this.isMouseOverMenu = true; return; } } this.isMouseOverMenu = true; }, handleInputFocus() { this.isInputFocus = true; }, handleInputBlur() { this.isInputFocus = false; }, handleCompositionStart() { this.isComposing = true; console.log("+++++compositionstart",this.isComposing); }, handleCompositionEnd() { this.isComposing = false; console.log("----compositionend",this.isComposing); }, /* * 鼠标离开菜单区域处理 / handleMouseLeave(e) { if (e) { const relatedTarget = e.relatedTarget \|\| e.toElement; if ( relatedTarget && relatedTarget.closest && relatedTarget.closest(".pl-menus-item") ) { this.isMouseOverMenu = true; return; } if (!relatedTarget) { const activeEl = document.activeElement; if ( this.$el && (this.isComposing \|\| this.isInputFocus \|\| this.$el.contains(activeEl)) ) { this.isMouseOverMenu = true; return; } } } this.isMouseOverMenu = false; this.hide(); }, /* * 处理一级菜单点击事件 / handleFirstLevelClick(item) { if (!item.children \|\| !item.children.length) { this.handleOpenFunc(item); } }, /* * 处理一级菜单鼠标悬停事件 / handleFirstLevelMouseEnter(item) { if (item.children && item.children.length) { this.handleOpenFunc(item, true); } }, /* * 处理二级菜单点击事件 / handleSecondLevelClick(item) { if (!item.children \|\| !item.children.length) { this.handleOpenFunc(item); } }, /* * 打开功能页面 * @param {Object} item - 菜单项 * @param {Boolean} isTabClick - 是否是标签页点击（仅设置子菜单数据） / async handleOpenFunc(item, isTabClick) { let me = this; if (isTabClick) { this.setChildrenData(item.resId); return; } if (item.type == "link") { window.open(item.resUrl, item.name); return; } else if (item.type == "sso") { item.ssoUrl = await me.$store.dispatch("user/openSSOFuncPage", { serviceUrl: item.resUrl, }); } // 添加标签页 me.addTab(item); setTimeout(() => { me.handleMouseLeave && me.handleMouseLeave(); }, 100); }, /* * 设置子菜单数据 * @param {String} resId - 菜单资源ID / setChildrenData(resId) { this.curresId = resId; const menu = this.menus.find((m) => m.resId === resId); if (menu && menu.children) { this.childrenData = menu.children; } else { this.childrenData = []; } }, //获取搜索列表数据 doSearch(cnKey) { let me = this; let list = [], records = me.$store.getters.menusList, hideMenuItemList = me.$store.getters.hideMenuItemList; let py = pinyin.getCamelChars(cnKey).toLocaleLowerCase(); let re = new RegExp("^[a-zA-Z]+$"); for (let i = 0, l = records.length; i < l; i++) { let item = records[i]; if (!(!item.isShow \|\| hideMenuItemList.indexOf(item.parentId) != -1)) { if (item.parentId == -1 && item.type == "root") { continue; } if (re.test(cnKey)) { let y = pinyin.getCamelChars(item.name).toLocaleLowerCase(); if (y.indexOf(py) > -1 && item.type != "dir") { list.push(item); } } else { if (item.name.indexOf(cnKey) > -1 && item.type != "dir") { list.push(item); } } } } me.$set(me, "searchList", list); // me.$nextTick(() => { // me.countHeight(); // me.$refs.listBox.scrollTo({ // top: 0, // }); // }); }, }, mounted() { if (this.menus.length > 0) { const menu = this.menus[0]; this.setChildrenData(menu.resId); } }, }; </script> <style lang="less" scoped> .concise-menu { // border-radius: 5px; .title{ font-weight: 400; } ul, li { padding: 0; margin: 0; list-style: none; } { box-sizing: border-box; } .menu-search { display: flex; background-color: rgba(235, 241, 247, 1); border-bottom: 1px solid rgba(206, 215, 224, 1); height: 48px; padding-left: 15px; align-items: center; .menu-title { // width: 110px; text-align: right; padding-right: 10px; } .menu-search-box { width: 240px; display: flex; align-items: center; background-color: #fff; padding-right: 10px; border-radius: 5px; input { flex: 1; border: none; outline: none; line-height: 28px; padding: 0 15px; border-radius: 5px; } i { font-size: 20px; cursor: pointer; } } } .menu-content { position: relative; .level1List{ min-height: 350px; max-height: calc(100vh - 200px); overflow: auto; } .area { display: flex; flex-direction: column; li{ &:first-child{ .menu-item{ .first-level{ border-top: none; } } } &:last-child{ .menu-item2{ border-bottom: none; } } } &.child-menu { width: calc(100% - 168px); height: 100%; position: absolute; top: 0; right: 0; background-color: #fff; overflow: auto; padding-left: 24px; padding-right: 20px; .menu-item2{ padding: 12px 0; border-bottom: 1px dashed rgba(184, 184, 184, 1); } } .menu-item { display: flex; flex-direction: column; .level { position: relative; width: 168px; text-align: left; padding-left: 15px; i { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); } &.noChild { cursor: pointer; } &.first-level { cursor: pointer; background-color: rgba(247, 247, 247, 1); // border: 1px solid #ced7e0; border-bottom: none; line-height: 40px; &.active { // color: rgba(0, 102, 204, 1); background-color: #fff; border-right-color: transparent; cursor: default; } &:hover { // color: rgba(0, 102, 204, 1); } } &.second-level { width: 100%; // padding-top: 5px; padding-left: 5px; // padding-bottom: 5px; &.active { color: rgba(161, 161, 182, 1); background-color: #fff; border-color: transparent; &:hover { color: rgba(161, 161, 182, 1); } } &:hover { // color: rgba(0, 102, 204, 1); } } } } .child-area { width: 100%; display: flex; flex-wrap: wrap; padding-top: 3px; // gap: 8px; // border-bottom: 1px solid #ced7e0; li{ width: 33%; // margin-bottom: 12px; padding: 5px 6px; color:rgba(51, 51, 51, 1); } .third-level { // padding: 0 8px; // padding-left: 0; // border-left: 1px solid #ced7e0; cursor: pointer; &:hover { // color: rgba(0, 102, 204, 1); } } ::v-deep .pl-menus-item { // padding: 0 8px; // padding-left: 0; // border-left: 1px solid #ced7e0; &.pl-menus-itemSeld { color: rgba(0, 102, 204, 1); } .title { position: relative; font-weight: 400; color: #333333; .txt { display: inline-block; i { position: initial; transform: rotate(90deg); // right: -5px; // top: 50%; // transform: translateY(-50%); } } } } } } .searchResultList { width: 100%; min-height: 100px; max-height: calc(100vh - 200px); overflow: auto; padding: 5px 10px; ul { display: flex; flex-wrap: wrap; padding-bottom: 10px; li { flex: 0 0 33.3%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 32px; font-size: 14px; display: flex; align-items: center; cursor: pointer; &:hover { // color: #06c; } } .itemSeld { // color: #f00; } } } } } </style>

Ignore Space Show notes View

project/hivuiMain/views/layout/components/conciseSidebar/concisemenu.vue

<ul
                class="child-area"
                v-if="item.children && item.children.length"
              >
                <template v-for="child in item.children">
                  
                  <li
                    :key="child.resId"
                    v-if="
                      child.isShow && !(child.children && child.children.length)
                    "
                  >
                    <div class="menu-item">
                      <div class="third-level" @click="handleOpenFunc(child)">
                        <span class="title">{{ child.name }}</span>
                        <i
                          v-if="child.children && child.children.length"
                          class="iconfont icon-arrow-right"
                        ></i>
                      </div>
                    </div>
                  </li>

<nav-sub-menus
                    :level="0"
                    :menuitem="child"
                    :parent="conciseMenu"
                    v-if="
                      child.isShow && child.children && child.children.length
                    "
                    :key="child.resId"
                  >
                  </nav-sub-menus>
                </template>
              </ul>
            </div>
          </li>
        </ul>
      </div>
      <div class="searchResultList" v-else>
        <ul>
          <li
            v-for="(searchItem, index) in searchList"
            :key="'search-' + index"
            :data-index="index"
            :title="searchItem.name"
            @click="handleOpenFunc(searchItem)"
          >
            <itemIcon :item="searchItem"></itemIcon>
            <span>{{ searchItem.name }}</span>
          </li>
          <li v-show="searchList.length == 0">
            {{ $t("hivuiMain_nodata") }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

isVisible: false,
      isMouseOverMenu: false,
      isInputFocus: false,
      isComposing: false,
      curresId: "",
      childrenData: [],
    };
  },
  watch: {
    targetElRect: {
      handler() {
        this.updatePosition();
      },
      deep: true,
    },
    searchWord(newVal, oldVal) {
      this.seldIndex = 0;
      this.doSearch(newVal);
    },
  },
  computed: {
    menuStyle() {
      return {
        position: "absolute",
        top: this.isVisible ? this.position.top + "px" : "-9999px",
        left: this.position.left + "px",
        opacity: this.isVisible ? 1 : 0,
        visibility: this.isVisible ? "visible" : "hidden",
        width: this.isVisible ? "700px" : "0",
        transition: " opacity 0.3s ease 0.1s, visibility 0.3s ease 0.1s",
        backgroundColor: "rgba(255, 255, 255, 1)",
        boxShadow: "0px 0px 6px  rgba(0, 0, 0, 0.25)",
        boxSizing: "border-box",
        overflow: "hidden",
        zIndex: 1000,
      };
    },
    position() {
      return {
        top: 0,
        left: 0,
      };
    },
    menus() {
      const menus = this.$store.getters.menus.filter((item) => item.isShow);
      return menus;
    },
  },
  methods: {
    /**
     * 显示菜单
     */
    show() {
      this.isVisible = true;
      this.$nextTick(() => {
        this.updatePosition();
      });
    },

/**
     * 隐藏菜单
     */
    hide() {
      if (this.isComposing || this.isInputFocus) {
        return;
      }
      this.isVisible = false;
    },

/**
     * 更新菜单位置
     */
    updatePosition() {
      if (!this.isVisible) return;

this.$nextTick(() => {
        const menuEl = this.$el;
        if (!menuEl) return;

const rect = this.targetElRect;
        if (!rect) return;

let top = rect.top;
        let left = rect.right;
        if (this.placement != "right") {
          top = top + rect.height;
          left = 0;
        }
        // 应用位置
        menuEl.style.top = top + "px";
        menuEl.style.left = left + "px";
      });
    },

/**
     * 鼠标进入菜单区域处理
     */
    handleMouseEnter(e) {
      if (e) {
        const target = e.target || e.srcElement;
        if (target.closest && target.closest(".pl-menus-item")) {
          this.isMouseOverMenu = true;
          return;
        }
      }
      this.isMouseOverMenu = true;
    },

handleInputFocus() {
      this.isInputFocus = true;
    },

handleInputBlur() {
      this.isInputFocus = false;
    },

handleCompositionStart() {
      this.isComposing = true;
      console.log("+++++compositionstart", this.isComposing);
    },

handleCompositionEnd() {
      this.isComposing = false;
      console.log("----compositionend", this.isComposing);
    },

/**
     * 鼠标离开菜单区域处理
     */
    handleMouseLeave(e) {
      if (e) {
        const relatedTarget = e.relatedTarget || e.toElement;
        if (
          relatedTarget &&
          relatedTarget.closest &&
          relatedTarget.closest(".pl-menus-item")
        ) {
          this.isMouseOverMenu = true;
          return;
        }

if (!relatedTarget) {
          const activeEl = document.activeElement;
          if (
            this.$el &&
            (this.isComposing ||
              this.isInputFocus ||
              this.$el.contains(activeEl))
          ) {
            this.isMouseOverMenu = true;
            return;
          }
        }
      }
      this.isMouseOverMenu = false;
      this.hide();
    },

/**
     * 处理一级菜单点击事件
     */
    handleFirstLevelClick(item) {
      if (!item.children || !item.children.length) {
        this.handleOpenFunc(item);
      }
    },

/**
     * 处理一级菜单鼠标悬停事件
     */
    handleFirstLevelMouseEnter(item) {
      if (item.children && item.children.length) {
        this.handleOpenFunc(item, true);
      }
    },

/**
     * 处理二级菜单点击事件
     */
    handleSecondLevelClick(item) {
      if (!item.children || !item.children.length) {
        this.handleOpenFunc(item);
      }
    },

/**
     * 打开功能页面
     * @param {Object} item - 菜单项
     * @param {Boolean} isTabClick - 是否是标签页点击（仅设置子菜单数据）
     */
    async handleOpenFunc(item, isTabClick) {
      let me = this;
      if (isTabClick) {
        this.setChildrenData(item.resId);
        return;
      }

if (item.type == "link") {
        window.open(item.resUrl, item.name);
        return;
      } else if (item.type == "sso") {
        item.ssoUrl = await me.$store.dispatch("user/openSSOFuncPage", {
          serviceUrl: item.resUrl,
        });
      }

// 添加标签页
      me.addTab(item);

setTimeout(() => {
        me.handleMouseLeave && me.handleMouseLeave();
      }, 100);
    },

/**
     * 设置子菜单数据
     * @param {String} resId - 菜单资源ID
     */
    setChildrenData(resId) {
      this.curresId = resId;
      const menu = this.menus.find((m) => m.resId === resId);
      if (menu && menu.children) {
        this.childrenData = menu.children;
      } else {
        this.childrenData = [];
      }
    },
    //获取搜索列表数据
    doSearch(cnKey) {
      let me = this;
      let list = [],
        records = me.$store.getters.menusList,
        hideMenuItemList = me.$store.getters.hideMenuItemList;
      let py = pinyin.getCamelChars(cnKey).toLocaleLowerCase();
      let re = new RegExp("^[a-zA-Z]+$");
      for (let i = 0, l = records.length; i < l; i++) {
        let item = records[i];
        if (!(!item.isShow || hideMenuItemList.indexOf(item.parentId) != -1)) {
          if (item.parentId == -1 && item.type == "root") {
            continue;
          }
          if (re.test(cnKey)) {
            let y = pinyin.getCamelChars(item.name).toLocaleLowerCase();
            if (y.indexOf(py) > -1 && item.type != "dir") {
              list.push(item);
            }
          } else {
            if (item.name.indexOf(cnKey) > -1 && item.type != "dir") {
              list.push(item);
            }
          }
        }
      }
      me.$set(me, "searchList", list);
      // me.$nextTick(() => {
      //   me.countHeight();
      //   me.$refs.listBox.scrollTo({
      //     top: 0,
      //   });
      // });
    },
  },
  mounted() {
    if (this.menus.length > 0) {
      const menu = this.menus[0];
      this.setChildrenData(menu.resId);
    }
  },
};
</script>

* {
    box-sizing: border-box;
  }
  .menu-search {
    display: flex;
    background-color: rgba(235, 241, 247, 1);
    border-bottom: 1px solid rgba(206, 215, 224, 1);
    height: 48px;
    padding-left: 15px;
    align-items: center;

.menu-title {
      // width: 110px;
      text-align: right;
      padding-right: 10px;
    }
    .menu-search-box {
      width: 240px;
      display: flex;
      align-items: center;
      background-color: #fff;
      padding-right: 10px;
      border-radius: 5px;
      input {
        flex: 1;
        border: none;
        outline: none;
        line-height: 28px;
        padding: 0 15px;
        padding-left: 0;
        border-radius: 5px;
      }
      i {
        font-size: 20px;
        padding: 0 5px;
        cursor: pointer;
        color: #828282;
      }
    }
  }

.menu-content {
    position: relative;
    .level1List {
      min-height: 350px;
      max-height: calc(100vh - 200px);
      overflow: auto;
    }
    .area {
      display: flex;
      flex-direction: column;

li {
        &:first-child {
          .menu-item {
            .first-level {
              border-top: none;
            }
          }
        }
        &:last-child {
          .menu-item2 {
            border-bottom: none;
          }
        }
      }

&.child-menu {
        width: calc(100% - 168px);
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        background-color: #fff;
        overflow: auto;
        padding-left: 24px;
        padding-right: 20px;
        .menu-item2 {
          padding: 12px 0;
          border-bottom: 1px dashed rgba(184, 184, 184, 1);
        }
      }

.menu-item {
        display: flex;
        flex-direction: column;
        .level {
          position: relative;
          width: 168px;
          text-align: left;
          padding-left: 15px;
          i {
            position: absolute;
            right: 5px;
            top: 50%;
            transform: translateY(-50%);
          }

&.noChild {
            cursor: pointer;
          }

&.first-level {
            cursor: pointer;
            background-color: rgba(247, 247, 247, 1);
            // border: 1px solid #ced7e0;
            border-bottom: none;
            line-height: 40px;

&.active {
              // color: rgba(0, 102, 204, 1);
              background-color: #fff;
              border-right-color: transparent;
              cursor: default;
            }

&:hover {
              // color: rgba(0, 102, 204, 1);
            }
          }

&.second-level {
            width: 100%;
            // padding-top: 5px;
            padding-left: 5px;
            // padding-bottom: 5px;

&.active {
              color: rgba(161, 161, 182, 1);
              background-color: #fff;
              border-color: transparent;
              &:hover {
                color: rgba(161, 161, 182, 1);
              }
            }

&:hover {
              // color: rgba(0, 102, 204, 1);
            }
          }
        }
      }

.child-area {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding-top: 3px;
        // gap: 8px;
        // border-bottom: 1px solid #ced7e0;
        li {
          width: 33%;
          // margin-bottom: 12px;
          padding: 5px 6px;
          color: rgba(51, 51, 51, 1);
        }

.third-level {
          // padding: 0 8px;
          // padding-left: 0;
          // border-left: 1px solid #ced7e0;
          cursor: pointer;

&:hover {
            // color: rgba(0, 102, 204, 1);
          }
        }

::v-deep .pl-menus-item {
          // padding: 0 8px;
          // padding-left: 0;
          // border-left: 1px solid #ced7e0;

&.pl-menus-itemSeld {
            color: rgba(0, 102, 204, 1);
          }

.title {
            position: relative;
            font-weight: 400;
            color: #333333;
            .txt {
              display: inline-block;

i {
                position: initial;
                transform: rotate(90deg);
                // right: -5px;
                // top: 50%;
                // transform: translateY(-50%);
              }
            }
          }
        }
      }
    }

.searchResultList {
      width: 100%;
      min-height: 100px;
      max-height: calc(100vh - 200px);
      overflow: auto;
      padding: 5px 10px;
      ul {
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 10px;
        li {
          flex: 0 0 33.3%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          line-height: 32px;
          font-size: 14px;
          display: flex;
          align-items: center;
          cursor: pointer;
          &:hover {
            // color: #06c;
          }
        }
        .itemSeld {
          // color: #f00;
        }
      }
    }
  }
}
</style>

isVisible: false,
      isMouseOverMenu: false,
      isInputFocus: false,
      isComposing: false,
      curresId: "",
      childrenData: [],
    };
  },
  watch: {
    targetElRect: {
      handler() {
        this.updatePosition();
      },
      deep: true,
    },
    searchWord(newVal, oldVal) {
      this.seldIndex = 0;
      this.doSearch(newVal);
    },
  },
  computed: {
    menuStyle() {
      return {
        position: "absolute",
        top: this.isVisible ? this.position.top + "px" : "-9999px",
        left: this.position.left + "px",
        opacity: this.isVisible ? 1 : 0,
        visibility: this.isVisible ? "visible" : "hidden",
        width: this.isVisible ? "700px" : "0",
        transition: " opacity 0.3s ease 0.1s, visibility 0.3s ease 0.1s",
        backgroundColor: "rgba(255, 255, 255, 1)",
        boxShadow: "0px 0px 6px  rgba(0, 0, 0, 0.25)",
        boxSizing: "border-box",
        overflow: "hidden",
        zIndex: 1000,
      };
    },
    position() {
      return {
        top: 0,
        left: 0,
      };
    },
    menus() {
      const menus = this.$store.getters.menus.filter(item => item.isShow);
      return menus;
    },
  },
  methods: {
    /**
     * 显示菜单
     */
    show() {
      this.isVisible = true;
      this.$nextTick(() => {
        this.updatePosition();
      });
    },

/**
     * 隐藏菜单
     */
    hide() {
      if(this.isComposing || this.isInputFocus){
        return;
      }
      this.isVisible = false;
    },

/**
     * 更新菜单位置
     */
    updatePosition() {
      if (!this.isVisible) return;

this.$nextTick(() => {
        const menuEl = this.$el;
        if (!menuEl) return;

const rect = this.targetElRect;
        if (!rect) return;

let top = rect.top;
        let left = rect.right;
        if(this.placement != "right"){
          top = top + rect.height;
          left = 0;
        }
        // 应用位置
        menuEl.style.top = top + "px";
        menuEl.style.left = left + "px";
      });
    },

handleInputFocus() {
      this.isInputFocus = true;
    },

handleInputBlur() {
      this.isInputFocus = false;
    },

handleCompositionStart() {
      this.isComposing = true;
      console.log("+++++compositionstart",this.isComposing);
    },

handleCompositionEnd() {
      this.isComposing = false;
      console.log("----compositionend",this.isComposing);
    },

if (!relatedTarget) {
          const activeEl = document.activeElement;
          if (
            this.$el &&
            (this.isComposing || this.isInputFocus || this.$el.contains(activeEl))
          ) {
            this.isMouseOverMenu = true;
            return;
          }
        }
      }
      this.isMouseOverMenu = false;
      this.hide();
    },

/**
     * 处理一级菜单点击事件
     */
    handleFirstLevelClick(item) {
      if (!item.children || !item.children.length) {
        this.handleOpenFunc(item);
      }
    },

/**
     * 处理二级菜单点击事件
     */
    handleSecondLevelClick(item) {
      if (!item.children || !item.children.length) {
        this.handleOpenFunc(item);
      }
    },

// 添加标签页
      me.addTab(item);

setTimeout(() => {
        me.handleMouseLeave && me.handleMouseLeave();
      }, 100);
    },

.menu-title {
      // width: 110px;
      text-align: right;
      padding-right: 10px;
    }
    .menu-search-box {
      width: 240px;
      display: flex;
      align-items: center;
      background-color: #fff;
      padding-right: 10px;
      border-radius: 5px;
      input {
        flex: 1;
        border: none;
        outline: none;
        line-height: 28px;
        padding: 0 15px;
        border-radius: 5px;
      }
      i {
        font-size: 20px;
        cursor: pointer;
      }
    }
  }

.menu-content {
    position: relative;
    .level1List{
      min-height: 350px;
      max-height: calc(100vh - 200px);
      overflow: auto;
    }
    .area {
      display: flex;
      flex-direction: column;

li{
        &:first-child{
          .menu-item{
            .first-level{
              border-top: none;
            }
          }
        }
        &:last-child{
          .menu-item2{
            border-bottom: none;
          }
        }
      }

&.child-menu {
        width: calc(100% - 168px);
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        background-color: #fff;
        overflow: auto;
        padding-left: 24px;
        padding-right: 20px;
        .menu-item2{
          padding: 12px 0;
          border-bottom: 1px dashed rgba(184, 184, 184, 1);
        }
      }

&.noChild {
            cursor: pointer;
          }

&.first-level {
            cursor: pointer;
            background-color: rgba(247, 247, 247, 1);
            // border: 1px solid #ced7e0;
            border-bottom: none;
            line-height: 40px;
          
            &.active {
              // color: rgba(0, 102, 204, 1);
              background-color: #fff;
              border-right-color: transparent;
              cursor: default;
            }

&:hover {
              // color: rgba(0, 102, 204, 1);
            }
          }

&.second-level {
            width: 100%;
            // padding-top: 5px;
            padding-left: 5px;
            // padding-bottom: 5px;

&:hover {
              // color: rgba(0, 102, 204, 1);
            }
          }
        }
      }

.child-area {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding-top: 3px;
        // gap: 8px;
        // border-bottom: 1px solid #ced7e0;
        li{
          width: 33%;
          // margin-bottom: 12px;
          padding: 5px 6px;
          color:rgba(51, 51, 51, 1);
        }

.third-level {
          // padding: 0 8px;
          // padding-left: 0;
          // border-left: 1px solid #ced7e0;
          cursor: pointer;

&:hover {
            // color: rgba(0, 102, 204, 1);
          }
        }

::v-deep .pl-menus-item {
          // padding: 0 8px;
          // padding-left: 0;
          // border-left: 1px solid #ced7e0;

&.pl-menus-itemSeld {
            color: rgba(0, 102, 204, 1);
          }

.title {
            position: relative;
            font-weight: 400;
            color: #333333;
            .txt {
              display: inline-block;

Show line notes below