菜单字段bug

08335 / hivui-platform-template

hivui平台项目模板

Browse code 菜单字段bug master
1 parent 4ded7b2 commit a8eb041c5f9a33936b3800c310d55a3e33854492 20278 authored on 1 Sep 2021

Showing 3 changed files

Ignore Space Show notes View project/hivuiMain/store/modules/app.js
import { getMenus, getQuickNav,getLeastRecentlyUsed,getPermissions } from '../../api/menu' const portal = { namespaced: true, state: { powerList:[], menusList:[], menus:[], defTabs: [], navs: [], latelyNavs:[], config:window.__sysConfig }, mutations: { SET_powerList: (state, powerList) => { state.powerList = powerList }, SET_menusList: (state, menusList) => { state.menusList = menusList }, SET_menus: (state, menus) => { state.menus = menus }, SET_defTabs: (state, data) => { state.defTabs = data }, SET_navs: (state, navs) => { state.navs = navs }, SET_latelyNavs: (state, latelyNavs) => { state.latelyNavs = latelyNavs }, }, actions: { //取功能菜单 async getMenus({ commit, state }) { await getMenus().then(res => { if(res.status==500){ if(window.HIVUI_SETTING.loginUrl){ location=window.HIVUI_SETTING.loginUrl; }else{ location="/"+projectName+"/hivuiLogin/index.html#/"; } } const data = res.dataPack; commit('SET_menusList', [...data]); console.log(`SET_menusList:`,data); let treeData=[...data],defTabs=[]; /5.0字段替换3.0/ let fieldConversion={ isActive:"fisactive", isOffline:"fisoffline", isShow:"fshow", name:"fresname", orderIndex:"forder", parentId:"frespguid", resId:"fresguid", resUrl:"fresurl", type:"frestype", } console.log(treeData); treeData=fieldChange([...treeData]); console.log(treeData); getActiveItem(treeData); /替换/ function fieldChange(_arr){ _arr.map(item=>{ if(item.children&&item.children.length>0){ fieldChange(item.children); } for(let i in fieldConversion){ if(typeof(item[fieldConversion[i]])!="undefined"){ item[i]=item[fieldConversion[i]]; delete item[fieldConversion[i]]; } } return item; }); return _arr; } /获取默认打开项/ function getActiveItem(_arr){ _arr.map(item=>{ //构建树 map if(item.children&&item.children.length>0){ getActiveItem(item.children); } for(let i = (state.defTabs\|\|[]).length-1;i>=0;i--){ if(state.defTabs[i].resId!=item.resId){ defTabs.push(item); break; } } }); } commit('SET_defTabs', [...defTabs,...state.defTabs]); console.info('menusTree:',treeData); commit('SET_menus', treeData); return data; }); }, //取左侧快速 async getQuickNav({ commit, state }) { await getQuickNav().then(res => { const data = res.data.dataPack.rows; console.log(`getQuickNav`) let defTabs=[],flag=false; data.map(item=>{ flag=false; for(let i = state.defTabs.length-1;i>=0;i--){ if(state.defTabs[i].resId==item.resId){ flag = true; break; } } if(item.isActive&&!flag) defTabs.push(item); }); commit('SET_defTabs', [...defTabs,...state.defTabs]); commit('SET_navs', data); return data; }); }, setQuickNav({ commit, state },data){ commit('SET_navs', data); }, async getLatelyUse({ commit, state }){ let me =this; await getLeastRecentlyUsed(me.state.user.id).then(res => { const data = res.data.dataPack.rows; commit('SET_latelyNavs', data); return data; }); }, //取功能权限 async getPowers({ commit, state }) { await getPermissions(this.state.user.id).then(res => { const data = res.data.dataPack.rows; commit('SET_powerList', [...data]); }); }, } } export default portal import { getMenus, getQuickNav,getLeastRecentlyUsed,getPermissions } from '../../api/menu' const portal = { namespaced: true, state: { powerList:[], menusList:[], menus:[], defTabs: [], navs: [], latelyNavs:[], config:window.__sysConfig }, mutations: { SET_powerList: (state, powerList) => { state.powerList = powerList }, SET_menusList: (state, menusList) => { state.menusList = menusList }, SET_menus: (state, menus) => { state.menus = menus }, SET_defTabs: (state, data) => { state.defTabs = data }, SET_navs: (state, navs) => { state.navs = navs }, SET_latelyNavs: (state, latelyNavs) => { state.latelyNavs = latelyNavs }, }, actions: { //取功能菜单 async getMenus({ commit, state }) { await getMenus().then(res => { if(res.status==500){ if(window.HIVUI_SETTING.loginUrl){ location=window.HIVUI_SETTING.loginUrl; }else{ location="/"+projectName+"/hivuiLogin/index.html#/"; } } const data = res.dataPack; commit('SET_menusList', [...data]); console.log(`SET_menusList:`,data); let treeData=[...data],defTabs=[]; getActiveItem(treeData); /获取默认打开项/ function getActiveItem(_arr){ for(let item of _arr){ _arr.map(item=>{ //构建树 map if(item.children&&item.children.length>0){ getActiveItem(item.children); } for(let i = (state.defTabs\|\|[]).length-1;i>=0;i--){ if(state.defTabs[i].fresguid!=item.fresguid){ defTabs.push(item); break; } } }); } } commit('SET_defTabs', [...defTabs,...state.defTabs]); console.info('menusTree:',treeData); commit('SET_menus', treeData); return data; }); }, //取左侧快速 async getQuickNav({ commit, state }) { await getQuickNav().then(res => { const data = res.data.dataPack.rows; console.log(`getQuickNav`) let defTabs=[],flag=false; data.map(item=>{ flag=false; for(let i = state.defTabs.length-1;i>=0;i--){ if(state.defTabs[i].resId==item.resId){ flag = true; break; } } if(item.isActive&&!flag) defTabs.push(item); }); commit('SET_defTabs', [...defTabs,...state.defTabs]); commit('SET_navs', data); return data; }); }, setQuickNav({ commit, state },data){ commit('SET_navs', data); }, async getLatelyUse({ commit, state }){ let me =this; await getLeastRecentlyUsed(me.state.user.id).then(res => { const data = res.data.dataPack.rows; commit('SET_latelyNavs', data); return data; }); }, //取功能权限 async getPowers({ commit, state }) { await getPermissions(this.state.user.id).then(res => { const data = res.data.dataPack.rows; commit('SET_powerList', [...data]); }); }, } } export default portal

Ignore Space Show notes View

project/hivuiMain/store/modules/app.js

import { getMenus, getQuickNav,getLeastRecentlyUsed,getPermissions } from '../../api/menu'
const portal = {
    namespaced: true,
    state: {
        powerList:[],
        menusList:[],
        menus:[],
        defTabs: [],
        navs: [],
        latelyNavs:[],
        config:window.__sysConfig
    },
    mutations: {
        SET_powerList: (state, powerList) => {
            state.powerList = powerList
        },
        SET_menusList: (state, menusList) => {
            state.menusList = menusList
        },
        SET_menus: (state, menus) => {
            state.menus = menus
        },
        SET_defTabs: (state, data) => {
            state.defTabs = data
        },
        SET_navs: (state, navs) => {
            state.navs = navs
        },
        SET_latelyNavs: (state, latelyNavs) => {
            state.latelyNavs = latelyNavs
        },
    },
    actions: {
        //取功能菜单
        async getMenus({ commit, state }) {
            await getMenus().then(res => {
                if(res.status==500){
                    if(window.HIVUI_SETTING.loginUrl){
                        location=window.HIVUI_SETTING.loginUrl;
                    }else{
                        location="/"+projectName+"/hivuiLogin/index.html#/";
                    }
                }
                const data = res.dataPack;
                commit('SET_menusList', [...data]);
                console.log(`SET_menusList:`,data);
                let treeData=[...data],defTabs=[];
                /*5.0字段替换3.0*/
                let fieldConversion={
                    isActive:"fisactive",
                    isOffline:"fisoffline",
                    isShow:"fshow",
                    name:"fresname",
                    orderIndex:"forder",
                    parentId:"frespguid",
                    resId:"fresguid",
                    resUrl:"fresurl",
                    type:"frestype",
                }
                    console.log(treeData);
                treeData=fieldChange([...treeData]);
                    console.log(treeData);
                getActiveItem(treeData);
                /*替换*/
                function fieldChange(_arr){
                    _arr.map(item=>{
                        if(item.children&&item.children.length>0){
                            fieldChange(item.children);
                        }
                        for(let i in fieldConversion){
                            if(typeof(item[fieldConversion[i]])!="undefined"){
                                item[i]=item[fieldConversion[i]];
                                delete item[fieldConversion[i]];
                            }
                        }
                        return item;
                    });
                    return _arr;
                }
                /*获取默认打开项*/
                function getActiveItem(_arr){
                    _arr.map(item=>{
                        //构建 树 map
                        if(item.children&&item.children.length>0){
                            getActiveItem(item.children);
                        }
                        for(let i = (state.defTabs||[]).length-1;i>=0;i--){

if(state.defTabs[i].resId!=item.resId){
                                defTabs.push(item);
                                break;
                            }
                        }
                    });
                }
                commit('SET_defTabs', [...defTabs,...state.defTabs]);
                console.info('menusTree:',treeData);
                commit('SET_menus', treeData);
                return data;
            });
        },
        //取左侧快速
        async getQuickNav({ commit, state }) {
            await getQuickNav().then(res => {
                const data = res.data.dataPack.rows;
                console.log(`getQuickNav`)
                let defTabs=[],flag=false;
                data.map(item=>{ 
                    flag=false;
                    for(let i = state.defTabs.length-1;i>=0;i--){
                        if(state.defTabs[i].resId==item.resId){
                            flag = true;
                            break;
                        }
                    }
                    if(item.isActive&&!flag) defTabs.push(item);
                });   
                commit('SET_defTabs', [...defTabs,...state.defTabs]);
                commit('SET_navs', data);
                return data;
            });
        },
        setQuickNav({ commit, state },data){
            commit('SET_navs', data);
        },
        async getLatelyUse({ commit, state }){
            let me =this;
            await getLeastRecentlyUsed(me.state.user.id).then(res => {
                const data = res.data.dataPack.rows;
                commit('SET_latelyNavs', data);
                return data;
            });
        },
        //取功能权限
        async getPowers({ commit, state }) {
            await getPermissions(this.state.user.id).then(res => {
                const data = res.data.dataPack.rows;
                commit('SET_powerList', [...data]);  
            });
        },
    }
}

export default portal

import { getMenus, getQuickNav,getLeastRecentlyUsed,getPermissions } from '../../api/menu'
const portal = {
    namespaced: true,
    state: {
        powerList:[],
        menusList:[],
        menus:[],
        defTabs: [],
        navs: [],
        latelyNavs:[],
        config:window.__sysConfig
    },
    mutations: {
        SET_powerList: (state, powerList) => {
            state.powerList = powerList
        },
        SET_menusList: (state, menusList) => {
            state.menusList = menusList
        },
        SET_menus: (state, menus) => {
            state.menus = menus
        },
        SET_defTabs: (state, data) => {
            state.defTabs = data
        },
        SET_navs: (state, navs) => {
            state.navs = navs
        },
        SET_latelyNavs: (state, latelyNavs) => {
            state.latelyNavs = latelyNavs
        },
    },
    actions: {
        //取功能菜单
        async getMenus({ commit, state }) {
            await getMenus().then(res => {
                if(res.status==500){
                    if(window.HIVUI_SETTING.loginUrl){
                        location=window.HIVUI_SETTING.loginUrl;
                    }else{
                        location="/"+projectName+"/hivuiLogin/index.html#/";
                    }
                }
                const data = res.dataPack;
                commit('SET_menusList', [...data]);
                console.log(`SET_menusList:`,data);
                let treeData=[...data],defTabs=[];
                getActiveItem(treeData);
                /*获取默认打开项*/
                function getActiveItem(_arr){
                    for(let item of _arr){
                        _arr.map(item=>{
                            //构建 树 map
                            if(item.children&&item.children.length>0){
                                getActiveItem(item.children);
                            }
                            for(let i = (state.defTabs||[]).length-1;i>=0;i--){
                                if(state.defTabs[i].fresguid!=item.fresguid){
                                    defTabs.push(item);
                                    break;
                                }
                            }
                        });
                    }
                }
                commit('SET_defTabs', [...defTabs,...state.defTabs]);
                console.info('menusTree:',treeData);
                commit('SET_menus', treeData);
                return data;
            });
        },
        //取左侧快速
        async getQuickNav({ commit, state }) {
            await getQuickNav().then(res => {
                const data = res.data.dataPack.rows;
                console.log(`getQuickNav`)
                let defTabs=[],flag=false;
                data.map(item=>{ 
                    flag=false;
                    for(let i = state.defTabs.length-1;i>=0;i--){
                        if(state.defTabs[i].resId==item.resId){
                            flag = true;
                            break;
                        }
                    }
                    if(item.isActive&&!flag) defTabs.push(item);
                });   
                commit('SET_defTabs', [...defTabs,...state.defTabs]);
                commit('SET_navs', data);
                return data;
            });
        },
        setQuickNav({ commit, state },data){
            commit('SET_navs', data);
        },
        async getLatelyUse({ commit, state }){
            let me =this;
            await getLeastRecentlyUsed(me.state.user.id).then(res => {
                const data = res.data.dataPack.rows;
                commit('SET_latelyNavs', data);
                return data;
            });
        },
        //取功能权限
        async getPowers({ commit, state }) {
            await getPermissions(this.state.user.id).then(res => {
                const data = res.data.dataPack.rows;
                commit('SET_powerList', [...data]);  
            });
        },
    }
}

export default portal

Ignore Space Show notes View project/hivuiMain/views/layout/components/navbar/index.vue
<template> <div class="pl-navbar" ref="nav"> <div class="allFunc" v-if="false"> <span class="title">{{$lang('allFunction')\|\|'所有功能'}}</span> <i class="icon iconfont icon-arrow-down"></i> </div> <div class="history" ref="dom-latelyUse" :title="$lang('recentlyUsed')\|\|'最近使用'" @mouseenter="handleShowLatelyUse" @mouseleave="handleHideLatelyUse"> <i class="icon iconfont icon-time"></i> <span class="title">{{$lang('recentlyUsed')\|\|'最近使用'}}</span> <i class="icon iconfont icon-arrow-down"></i> </div> <div class="menusArea pl-cl" :class="isMenuArrBtn?'hasMenusBtn':''"> <i v-show="isMenuArrBtn" ref="scrollRtBtn" class="arrRt iconfont icon-arrow-right-circle" @mousedown="handleRtMenuScroll" @mouseup="handleMenuScrollEnd"></i> <i v-show="isMenuArrBtn" ref="scrollLtBtn" class="arrLt iconfont icon-arrow-left-circle" @mousedown="handleLtMenuScroll" @mouseup="handleMenuScrollEnd"></i> <div class="scroll" ref="domSrcoll"> <p-menu ref="pmenu" mode="horizontal" style="margin:0"> <template v-for="(item,index) in menus" > <p-menu-item v-if="!item.children\|\|!item.children.length" :icon="item.iconClass" @click="handleOpenFunc(item)">{{item.name}}</p-menu-item> <nav-sub-menus :menuitem="item" v-if="item.children&&item.children.length"></nav-sub-menus> </template> </p-menu> </div> </div> <!-- <ul class="pl-menus pl-menus-horizontal"> <li class="pl-menus-item" v-for="(item,index) in menus"> <a class=""> <i class="icon"></i> <span class="title">{{item.title}}</span> </a> </li> </ul> --> <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)"> <a class="title"><span class="txt">{{item.name}}</span></a> </li> <li v-show="navsLatelyUse.length==0" class="pl-menus-tips"> {{$lang('noData')\|\|'暂无数据'}} </li> </ul> </div> </template> <script> import {PMenu,PSubMenu,PMenuItem} from '../menus' import NavSubMenus from './menus' import screenfull from 'screenfull' export default { inject:['addTab'], components:{ PMenu,PSubMenu,PMenuItem,NavSubMenus }, data(){ return { menuScrollTimer:null, isMenuArrBtn:false, latelyUseStyle:{ display:'none', left:0, top:0, maxHeight:'50%', overflow:'auto' } }; }, computed:{ menus(){ return this.$store.getters.menus; }, navsLatelyUse(){ return this.$store.getters.navsLatelyUse; } }, mounted(){ this.resize(); window.addEventListener('resize',this.resize); }, methods:{ resize(){ if (!screenfull.isFullscreen && this.$refs.pmenu.$el) { setTimeout(() => { let c = this.$refs.pmenu.$el.children,w=0; // console.log('---c--', c) for(let i=c.length-1;i>=0;i--){ // console.log('---c[i]', c[i].offsetWidth) w+=c[i].offsetWidth; } // console.log('offsetWidth', w) this.$refs.pmenu.$el.style.width=`${w+2}px`; this.isMenuArrBtn = this.$refs.domSrcoll.offsetWidth<w; this.scrollBtnStatus(); }, 50); } }, handleOpenLatelyFunc(item){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; } this.addTab({ resUrl:item.resUrl, name:item.name });//inject 提供的方法只能传一个参数 }, handleOpenFunc(item){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; } // this.addTab(item.resUrl,item.name,item.resId)//,item.resId this.addTab(item);//inject 提供的方法只能传一个参数 }, 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'; }, handleHideLatelyUse(){ this.latelyUseStyle.display ='none'; }, handleLtMenuScroll(){ this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft-30; this.menuScrollTimer = setInterval(()=>{ this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft-10; this.scrollBtnStatus(); },50); this.scrollBtnStatus(); }, handleRtMenuScroll(){ this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft+30; this.menuScrollTimer = setInterval(()=>{ this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft+10; this.scrollBtnStatus(); },50); this.scrollBtnStatus(); }, handleMenuScrollEnd(){ clearInterval(this.menuScrollTimer); }, scrollBtnStatus(){ if(!(this.$refs.scrollLtBtn\|\|this.$refs.scrollRtBtn)){ return; } if(this.$refs.domSrcoll.scrollLeft==0){ this.$refs.scrollLtBtn.style.opacity=0.3; }else{ this.$refs.scrollLtBtn.style.opacity=1; } if(this.$refs.domSrcoll.scrollLeft>=this.$refs.pmenu.$el.offsetWidth-this.$refs.domSrcoll.offsetWidth){ this.$refs.scrollRtBtn.style.opacity=0.3; }else{ this.$refs.scrollRtBtn.style.opacity=1; } } } } </script> <template> <div class="pl-navbar" ref="nav"> <div class="allFunc" v-if="false"> <span class="title">{{$lang('allFunction')\|\|'所有功能'}}</span> <i class="icon iconfont icon-arrow-down"></i> </div> <div class="history" ref="dom-latelyUse" :title="$lang('recentlyUsed')\|\|'最近使用'" @mouseenter="handleShowLatelyUse" @mouseleave="handleHideLatelyUse"> <i class="icon iconfont icon-time"></i> <span class="title">{{$lang('recentlyUsed')\|\|'最近使用'}}</span> <i class="icon iconfont icon-arrow-down"></i> </div> <div class="menusArea pl-cl" :class="isMenuArrBtn?'hasMenusBtn':''"> <i v-show="isMenuArrBtn" ref="scrollRtBtn" class="arrRt iconfont icon-arrow-right-circle" @mousedown="handleRtMenuScroll" @mouseup="handleMenuScrollEnd"></i> <i v-show="isMenuArrBtn" ref="scrollLtBtn" class="arrLt iconfont icon-arrow-left-circle" @mousedown="handleLtMenuScroll" @mouseup="handleMenuScrollEnd"></i> <div class="scroll" ref="domSrcoll"> <p-menu ref="pmenu" mode="horizontal" style="margin:0"> <template v-for="(item,index) in menus" > <p-menu-item v-if="!item.children\|\|!item.children.length" :icon="item.iconClass" @click="handleOpenFunc(item)">{{item.fresname}}</p-menu-item> <nav-sub-menus :menuitem="item" v-if="item.children&&item.children.length"></nav-sub-menus> </template> </p-menu> </div> </div> <!-- <ul class="pl-menus pl-menus-horizontal"> <li class="pl-menus-item" v-for="(item,index) in menus"> <a class=""> <i class="icon"></i> <span class="title">{{item.title}}</span> </a> </li> </ul> --> <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)"> <a class="title"><span class="txt">{{item.fresname}}</span></a> </li> <li v-show="navsLatelyUse.length==0" class="pl-menus-tips"> {{$lang('noData')\|\|'暂无数据'}} </li> </ul> </div> </template> <script> import {PMenu,PSubMenu,PMenuItem} from '../menus' import NavSubMenus from './menus' import screenfull from 'screenfull' export default { inject:['addTab'], components:{ PMenu,PSubMenu,PMenuItem,NavSubMenus }, data(){ return { menuScrollTimer:null, isMenuArrBtn:false, latelyUseStyle:{ display:'none', left:0, top:0, maxHeight:'50%', overflow:'auto' } }; }, computed:{ menus(){ return this.$store.getters.menus; }, navsLatelyUse(){ return this.$store.getters.navsLatelyUse; } }, mounted(){ this.resize(); window.addEventListener('resize',this.resize); }, methods:{ resize(){ if (!screenfull.isFullscreen && this.$refs.pmenu.$el) { setTimeout(() => { let c = this.$refs.pmenu.$el.children,w=0; // console.log('---c--', c) for(let i=c.length-1;i>=0;i--){ // console.log('---c[i]', c[i].offsetWidth) w+=c[i].offsetWidth; } // console.log('offsetWidth', w) this.$refs.pmenu.$el.style.width=`${w+2}px`; this.isMenuArrBtn = this.$refs.domSrcoll.offsetWidth<w; this.scrollBtnStatus(); }, 50); } }, handleOpenLatelyFunc(item){ if(item.frestype== "link"){ window.open(item.fresurl,item.fresname); return; } this.addTab({ resUrl:item.fresurl, name:item.fresname });//inject 提供的方法只能传一个参数 }, handleOpenFunc(item){ if(item.frestype== "link"){ window.open(item.fresurl,item.fresname); return; } // this.addTab(item.resUrl,item.name,item.resId)//,item.resId this.addTab(item);//inject 提供的方法只能传一个参数 }, 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'; }, handleHideLatelyUse(){ this.latelyUseStyle.display ='none'; }, handleLtMenuScroll(){ this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft-30; this.menuScrollTimer = setInterval(()=>{ this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft-10; this.scrollBtnStatus(); },50); this.scrollBtnStatus(); }, handleRtMenuScroll(){ this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft+30; this.menuScrollTimer = setInterval(()=>{ this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft+10; this.scrollBtnStatus(); },50); this.scrollBtnStatus(); }, handleMenuScrollEnd(){ clearInterval(this.menuScrollTimer); }, scrollBtnStatus(){ if(!(this.$refs.scrollLtBtn\|\|this.$refs.scrollRtBtn)){ return; } if(this.$refs.domSrcoll.scrollLeft==0){ this.$refs.scrollLtBtn.style.opacity=0.3; }else{ this.$refs.scrollLtBtn.style.opacity=1; } if(this.$refs.domSrcoll.scrollLeft>=this.$refs.pmenu.$el.offsetWidth-this.$refs.domSrcoll.offsetWidth){ this.$refs.scrollRtBtn.style.opacity=0.3; }else{ this.$refs.scrollRtBtn.style.opacity=1; } } } } </script>

Ignore Space Show notes View

project/hivuiMain/views/layout/components/navbar/index.vue

<template>
    <div class="pl-navbar" ref="nav">
        <div class="allFunc" v-if="false">
            <span class="title">{{$lang('allFunction')||'所有功能'}}</span>
            <i class="icon iconfont icon-arrow-down"></i>
        </div>
        <div class="history" ref="dom-latelyUse"
        :title="$lang('recentlyUsed')||'最近使用'"
         @mouseenter="handleShowLatelyUse"  @mouseleave="handleHideLatelyUse">
            <i class="icon iconfont icon-time"></i>
            <span class="title">{{$lang('recentlyUsed')||'最近使用'}}</span>
            <i class="icon iconfont icon-arrow-down"></i>
        </div>
        <div class="menusArea pl-cl" :class="isMenuArrBtn?'hasMenusBtn':''">
            <i v-show="isMenuArrBtn" ref="scrollRtBtn" class="arrRt iconfont icon-arrow-right-circle" @mousedown="handleRtMenuScroll" @mouseup="handleMenuScrollEnd"></i>
            <i v-show="isMenuArrBtn" ref="scrollLtBtn"  class="arrLt iconfont icon-arrow-left-circle" @mousedown="handleLtMenuScroll" @mouseup="handleMenuScrollEnd"></i>
            <div class="scroll" ref="domSrcoll">
                <p-menu ref="pmenu" mode="horizontal" style="margin:0">
                    <template v-for="(item,index) in menus" >
                        <p-menu-item v-if="!item.children||!item.children.length" :icon="item.iconClass" @click="handleOpenFunc(item)">{{item.name}}</p-menu-item>
                        <nav-sub-menus  :menuitem="item" v-if="item.children&&item.children.length"></nav-sub-menus>
                    </template>
                </p-menu>
            </div>
        </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)">
                <a class="title"><span class="txt">{{item.name}}</span></a>
            </li>
            <li v-show="navsLatelyUse.length==0" class="pl-menus-tips">
                {{$lang('noData')||'暂无数据'}}
            </li>
        </ul> 
    </div>
</template>
<script> 
import {PMenu,PSubMenu,PMenuItem} from '../menus'
import NavSubMenus from './menus'
import screenfull from 'screenfull'
export default {
    inject:['addTab'],
    components:{
        PMenu,PSubMenu,PMenuItem,NavSubMenus
    },
    data(){
        return {
            menuScrollTimer:null,
            isMenuArrBtn:false,
            latelyUseStyle:{
                display:'none',
                left:0,
                top:0,
                maxHeight:'50%',
                overflow:'auto'
            }
        };
    },
    computed:{
        menus(){
            return this.$store.getters.menus;
        },
        navsLatelyUse(){
            return this.$store.getters.navsLatelyUse;
        }
    },
    mounted(){
        this.resize();
        window.addEventListener('resize',this.resize);
    },
    methods:{ 
        resize(){
            if (!screenfull.isFullscreen && this.$refs.pmenu.$el) {
                setTimeout(() => {
                    let c = this.$refs.pmenu.$el.children,w=0;
                    // console.log('---c--', c)
                    for(let i=c.length-1;i>=0;i--){
                        // console.log('---c[i]', c[i].offsetWidth)
                        w+=c[i].offsetWidth;
                    }
                    // console.log('offsetWidth', w)
                    this.$refs.pmenu.$el.style.width=`${w+2}px`;
                    this.isMenuArrBtn = this.$refs.domSrcoll.offsetWidth<w;
                    this.scrollBtnStatus();
                }, 50);
                
            }
        },

handleOpenLatelyFunc(item){      
            if(item.type== "link"){
                window.open(item.resUrl,item.name);
                return;
            }
            this.addTab({
                resUrl:item.resUrl,
                name:item.name
            });//inject 提供的方法只能 传一个参数
        },     
        handleOpenFunc(item){  
            if(item.type== "link"){
                window.open(item.resUrl,item.name);
                return;
            }
            // this.addTab(item.resUrl,item.name,item.resId)//,item.resId
            this.addTab(item);//inject 提供的方法只能 传一个参数
        },
        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';
        },
        handleHideLatelyUse(){
            this.latelyUseStyle.display ='none';
        },
        handleLtMenuScroll(){
            this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft-30;
            this.menuScrollTimer = setInterval(()=>{
                this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft-10;
                this.scrollBtnStatus();
            },50);
            this.scrollBtnStatus();
        },
        handleRtMenuScroll(){
            this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft+30;
            this.menuScrollTimer = setInterval(()=>{
                this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft+10;
                this.scrollBtnStatus();
            },50);
            this.scrollBtnStatus();
        },
        handleMenuScrollEnd(){
            clearInterval(this.menuScrollTimer);
        },
        scrollBtnStatus(){            
            if(!(this.$refs.scrollLtBtn||this.$refs.scrollRtBtn)){
                return;
            }
            if(this.$refs.domSrcoll.scrollLeft==0){
                this.$refs.scrollLtBtn.style.opacity=0.3;
            }else{                
                this.$refs.scrollLtBtn.style.opacity=1;
            }

if(this.$refs.domSrcoll.scrollLeft>=this.$refs.pmenu.$el.offsetWidth-this.$refs.domSrcoll.offsetWidth){
                this.$refs.scrollRtBtn.style.opacity=0.3;
            }else{
                this.$refs.scrollRtBtn.style.opacity=1;
            }
        }
    }
}
</script>

<template>
    <div class="pl-navbar" ref="nav">
        <div class="allFunc" v-if="false">
            <span class="title">{{$lang('allFunction')||'所有功能'}}</span>
            <i class="icon iconfont icon-arrow-down"></i>
        </div>
        <div class="history" ref="dom-latelyUse"
        :title="$lang('recentlyUsed')||'最近使用'"
         @mouseenter="handleShowLatelyUse"  @mouseleave="handleHideLatelyUse">
            <i class="icon iconfont icon-time"></i>
            <span class="title">{{$lang('recentlyUsed')||'最近使用'}}</span>
            <i class="icon iconfont icon-arrow-down"></i>
        </div>
        <div class="menusArea pl-cl" :class="isMenuArrBtn?'hasMenusBtn':''">
            <i v-show="isMenuArrBtn" ref="scrollRtBtn" class="arrRt iconfont icon-arrow-right-circle" @mousedown="handleRtMenuScroll" @mouseup="handleMenuScrollEnd"></i>
            <i v-show="isMenuArrBtn" ref="scrollLtBtn"  class="arrLt iconfont icon-arrow-left-circle" @mousedown="handleLtMenuScroll" @mouseup="handleMenuScrollEnd"></i>
            <div class="scroll" ref="domSrcoll">
                <p-menu ref="pmenu" mode="horizontal" style="margin:0">
                    <template v-for="(item,index) in menus" >
                        <p-menu-item v-if="!item.children||!item.children.length" :icon="item.iconClass" @click="handleOpenFunc(item)">{{item.fresname}}</p-menu-item>
                        <nav-sub-menus  :menuitem="item" v-if="item.children&&item.children.length"></nav-sub-menus>
                    </template>
                </p-menu>
            </div>
        </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)">
                <a class="title"><span class="txt">{{item.fresname}}</span></a>
            </li>
            <li v-show="navsLatelyUse.length==0" class="pl-menus-tips">
                {{$lang('noData')||'暂无数据'}}
            </li>
        </ul> 
    </div>
</template>
<script> 
import {PMenu,PSubMenu,PMenuItem} from '../menus'
import NavSubMenus from './menus'
import screenfull from 'screenfull'
export default {
    inject:['addTab'],
    components:{
        PMenu,PSubMenu,PMenuItem,NavSubMenus
    },
    data(){
        return {
            menuScrollTimer:null,
            isMenuArrBtn:false,
            latelyUseStyle:{
                display:'none',
                left:0,
                top:0,
                maxHeight:'50%',
                overflow:'auto'
            }
        };
    },
    computed:{
        menus(){
            return this.$store.getters.menus;
        },
        navsLatelyUse(){
            return this.$store.getters.navsLatelyUse;
        }
    },
    mounted(){
        this.resize();
        window.addEventListener('resize',this.resize);
    },
    methods:{ 
        resize(){
            if (!screenfull.isFullscreen && this.$refs.pmenu.$el) {
                setTimeout(() => {
                    let c = this.$refs.pmenu.$el.children,w=0;
                    // console.log('---c--', c)
                    for(let i=c.length-1;i>=0;i--){
                        // console.log('---c[i]', c[i].offsetWidth)
                        w+=c[i].offsetWidth;
                    }
                    // console.log('offsetWidth', w)
                    this.$refs.pmenu.$el.style.width=`${w+2}px`;
                    this.isMenuArrBtn = this.$refs.domSrcoll.offsetWidth<w;
                    this.scrollBtnStatus();
                }, 50);
                
            }
        },

handleOpenLatelyFunc(item){      
            if(item.frestype== "link"){
                window.open(item.fresurl,item.fresname);
                return;
            }
            this.addTab({
                resUrl:item.fresurl,
                name:item.fresname
            });//inject 提供的方法只能 传一个参数
        },     
        handleOpenFunc(item){  
            if(item.frestype== "link"){
                window.open(item.fresurl,item.fresname);
                return;
            }
            // this.addTab(item.resUrl,item.name,item.resId)//,item.resId
            this.addTab(item);//inject 提供的方法只能 传一个参数
        },
        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';
        },
        handleHideLatelyUse(){
            this.latelyUseStyle.display ='none';
        },
        handleLtMenuScroll(){
            this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft-30;
            this.menuScrollTimer = setInterval(()=>{
                this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft-10;
                this.scrollBtnStatus();
            },50);
            this.scrollBtnStatus();
        },
        handleRtMenuScroll(){
            this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft+30;
            this.menuScrollTimer = setInterval(()=>{
                this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft+10;
                this.scrollBtnStatus();
            },50);
            this.scrollBtnStatus();
        },
        handleMenuScrollEnd(){
            clearInterval(this.menuScrollTimer);
        },
        scrollBtnStatus(){            
            if(!(this.$refs.scrollLtBtn||this.$refs.scrollRtBtn)){
                return;
            }
            if(this.$refs.domSrcoll.scrollLeft==0){
                this.$refs.scrollLtBtn.style.opacity=0.3;
            }else{                
                this.$refs.scrollLtBtn.style.opacity=1;
            }

Ignore Space Show notes View project/hivuiMain/views/layout/components/navbar/menus.vue
<template> <p-sub-menu :level="level" :parent="parent"> <template slot="title">{{menuitem.name}}</template> <template v-for="(item,index) in menuitem.children"> <p-menu-item :icon="item.iconClass" v-if="!(item.children&&item.children.length)" @click="handleOpenFunc(item)">{{item.name}}</p-menu-item> <nav-sub-menus :menuitem="item" v-if="item.children&&item.children.length"></nav-sub-menus> </template> </p-sub-menu> </template> <script> import {PMenu,PSubMenu,PMenuItem} from '../menus' export default { name:'NavSubMenus', inject:['addTab','showTab','hideTab'], components:{ PMenu,PSubMenu,PMenuItem }, props:{ menuitem:{ type:Object }, level:{ type:Number }, parent:{ type:Object } }, methods:{ handleOpenFunc(item){ //url,title,uid,callback,nearest if(item.type== "link"){ window.open(item.resUrl,item.name); return; } // this.addTab(item.resUrl,item.name) this.addTab(item);//inject 提供的方法只能传一个参数 } } } </script> <template> <p-sub-menu :level="level" :parent="parent"> <template slot="title">{{menuitem.fresname}}</template> <template v-for="(item,index) in menuitem.children"> <p-menu-item :icon="item.iconClass" v-if="!(item.children&&item.children.length)" @click="handleOpenFunc(item)">{{item.fresname}}</p-menu-item> <nav-sub-menus :menuitem="item" v-if="item.children&&item.children.length"></nav-sub-menus> </template> </p-sub-menu> </template> <script> import {PMenu,PSubMenu,PMenuItem} from '../menus' export default { name:'NavSubMenus', inject:['addTab','showTab','hideTab'], components:{ PMenu,PSubMenu,PMenuItem }, props:{ menuitem:{ type:Object }, level:{ type:Number }, parent:{ type:Object } }, methods:{ handleOpenFunc(item){ //url,title,uid,callback,nearest if(item.frestype== "link"){ window.open(item.fresurl,item.fresname); return; } // this.addTab(item.resUrl,item.name) this.addTab(item);//inject 提供的方法只能传一个参数 } } } </script>

Ignore Space Show notes View

project/hivuiMain/views/layout/components/navbar/menus.vue

<template>
    <p-sub-menu :level="level" :parent="parent">
        <template slot="title">{{menuitem.name}}</template>
        <template v-for="(item,index) in menuitem.children">
            <p-menu-item :icon="item.iconClass"  v-if="!(item.children&&item.children.length)" @click="handleOpenFunc(item)">{{item.name}}</p-menu-item>            
            <nav-sub-menus :menuitem="item" v-if="item.children&&item.children.length"></nav-sub-menus>
        </template>
    </p-sub-menu>
</template>
<script> 
import {PMenu,PSubMenu,PMenuItem} from '../menus'
export default {
    name:'NavSubMenus',
    inject:['addTab','showTab','hideTab'],
    components:{
        PMenu,PSubMenu,PMenuItem
    },
    props:{
        menuitem:{
            type:Object
        },
        level:{
            type:Number
        },
        parent:{
            type:Object
        }
    },
    methods:{  
        handleOpenFunc(item){
            //url,title,uid,callback,nearest
            if(item.type== "link"){
                window.open(item.resUrl,item.name);
                return;
            }

// this.addTab(item.resUrl,item.name)
            this.addTab(item);//inject 提供的方法只能 传一个参数
        }
    }
}
</script>

<template>
    <p-sub-menu :level="level" :parent="parent">
        <template slot="title">{{menuitem.fresname}}</template>
        <template v-for="(item,index) in menuitem.children">
            <p-menu-item :icon="item.iconClass"  v-if="!(item.children&&item.children.length)" @click="handleOpenFunc(item)">{{item.fresname}}</p-menu-item>            
            <nav-sub-menus :menuitem="item" v-if="item.children&&item.children.length"></nav-sub-menus>
        </template>
    </p-sub-menu>
</template>
<script> 
import {PMenu,PSubMenu,PMenuItem} from '../menus'
export default {
    name:'NavSubMenus',
    inject:['addTab','showTab','hideTab'],
    components:{
        PMenu,PSubMenu,PMenuItem
    },
    props:{
        menuitem:{
            type:Object
        },
        level:{
            type:Number
        },
        parent:{
            type:Object
        }
    },
    methods:{  
        handleOpenFunc(item){
            //url,title,uid,callback,nearest
            if(item.frestype== "link"){
                window.open(item.fresurl,item.fresname);
                return;
            }

// this.addTab(item.resUrl,item.name)
            this.addTab(item);//inject 提供的方法只能 传一个参数
        }
    }
}
</script>

Show line notes below