@中文描述:菜单单点跳转 @升级登记:1 @同步后端:0 @同步数据库:0 @同步配置:0 @向下兼容:1

08335 / hivui-platform-template

hivui平台项目模板

Browse code @中文描述:菜单单点跳转 @升级登记:1 @同步后端:0 @同步数据库:0 @同步配置:0 @向下兼容:1 master
1 parent 9817b28 commit 1a87d379446a1c2ad57369d0c7b402785d89839a 20278 authored on 7 Jun 2023

Showing 6 changed files

Ignore Space Show notes View project/hivuiMain/store/modules/user.js
import {baseLogin, logout} from '@main/api/login' import {getInfo,getBzList,getSSOInfo,getSSOTicket} from '@main/api/user' import { getToken, setToken, removeToken } from '@main/utils/auth' import {getUrlValue,getUrlSearch} from '@main/utils' import md5 from 'js-md5' if(window.Scp==null){ window.Scp = {} } if(window.Scp.User==null){ window.Scp.User={} } const user = { namespaced: true, state: { token: getToken(), avatar: '', introduction: '', roles: [], //后面加的 userInfo: {}, bzList: null, id:Scp.User.id, name:Scp.User.name, deptId:Scp.User.deptId, deptName:Scp.User.deptName, positionId:Scp.User.positionId, postionName:Scp.User.postionName, bzId:Scp.User.bzId, bzName:Scp.User.bzName, bzDeptId:Scp.User.bzDeptId, bzDeptName:Scp.User.bzDeptName, bzPositionId:Scp.User.bzPositionId, bzPositionName:Scp.User.bzPositionName, orgId:Scp.User.orgId , defOrgId:Scp.User.defOrgId, showPwDialog:false, ssoInfo:null, }, mutations: { SET_CODE: (state, code) => { state.code = code }, SET_TOKEN: (state, token) => { state.token = token }, SET_INTRODUCTION: (state, introduction) => { state.introduction = introduction }, SET_NAME: (state, name) => { state.name = name }, SET_AVATAR: (state, avatar) => { state.avatar = avatar }, SET_ROLES: (state, roles) => { state.roles = roles }, SET_USERINFO: (state, userInfo) => { state.userInfo = userInfo }, SET_BZLIST: (state, bzList) => { state.bzList = bzList }, SET_PWDIALOG: (state, isShow) => { state.showPwDialog = isShow }, }, actions: { load({ commit, state }) { }, // user login login({ commit }, userInfo) { let pushData={}; if(userInfo){ const { username, password } = userInfo pushData={ username: username.trim(), password: md5(password) }; } return new Promise((resolve, reject) => { if(window.HIVUI_SETTING.url!=location.origin){ let searchParams=getUrlSearch(location.href); delete searchParams.ticket; let service=location.origin+location.pathname+"?"; for(let k in searchParams){ service+=k+"="+searchParams[k]+"&"; } service=service.slice(0,-1); pushData={ type:"casPre", ticket:getUrlValue('','ticket'), service:service }; } baseLogin(pushData).then(response => { const data = response commit('SET_TOKEN', data.token) setToken(data.token) resolve() }).catch(error => { reject(error) }) }) }, // 多岗 getBzList({ commit, state }) { return new Promise((resolve, reject) => { getBzList().then(response => { let _arr=response.dataPack if (_arr) { if (!_arr \|\| _arr.length < 0) { reject('getInfo: data must be a non-null array!') } commit("SET_BZLIST",_arr); resolve(_arr) }else{ reject('Verification failed, please Login again.'); } }).catch(error => { reject(error) }); }) }, // get user info getInfo({ commit, state }) { return new Promise((resolve, reject) => { getInfo().then(response => { if (!response.dataPack) { reject('Verification failed, please Login again.') } //const { info ,org} = response.data; const info = response.dataPack // if (!info) { // reject('Verification failed, please Login again.') // } //const { roles, name, avatar, introduction } = data window.Scp.User=info; let roles = ['admim'], avatar = "", introduction = "", name = info.fuserid, userInfo = info; // roles must be a non-empty array if (!roles \|\| roles.length <= 0) { reject('getInfo: roles must be a non-null array!') } commit('SET_USERINFO', userInfo) commit('SET_ROLES', roles) commit('SET_NAME', name) commit('SET_AVATAR', avatar) commit('SET_INTRODUCTION', introduction) resolve(info) }).catch(error => { reject(error) }) }) }, // user logout logout({ commit, state }) { return new Promise((resolve, reject) => { if(!getToken()){ resolve(); }else{ logout().then(() => { commit('SET_TOKEN', ''); commit('SET_ROLES', []); removeToken(); resolve(); }).catch(error => { reject(error); }); } }); }, // remove token resetToken({ commit }) { return new Promise(resolve => { commit('SET_TOKEN', '') commit('SET_ROLES', []) removeToken() resolve() }) }, // dynamically modify permissions changeRoles({ commit, dispatch }, role) { return new Promise(async resolve => { const token = role + '-token' commit('SET_TOKEN', token) setToken(token) const { roles } = await dispatch('getInfo') //resetRouter() // generate accessible routes map based on roles const accessRoutes = await dispatch('permission/generateRoutes', roles, { root: true }) // dynamically add accessible routes router.addRoutes(accessRoutes) // reset visited views and cached views dispatch('tagsView/delAllViews', null, { root: true }) resolve() }) }, //修改密码弹窗 showPwDialog({ commit, dispatch }, isShow){ commit('SET_PWDIALOG', isShow); }, //获取单点登录服务器信息 getSSOInfo({state, dispatch}){ return new Promise((resolve, reject) => { getSSOInfo().then((res)=>{ state.ssoInfo=res.dataPack; resolve(res); }).catch(err=>{ reject(err); }); }); }, //单点跳转功能 async openSSOFuncPage({state, dispatch},opt){ await dispatch("getSSOInfo"); if(state.ssoInfo){ let res=await getSSOTicket(state.ssoInfo.serverUrl,{ 'clientId': state.ssoInfo.clientId, 'token': state.token, }); if (res.status == 200) { let __service = encodeURIComponent((opt.serviceUrl.startsWith("http")?"":location.origin+(opt.serviceUrl.startsWith("/")?"":"/"))+opt.serviceUrl); let returnUrl = state.ssoInfo.serverUrl + (state.ssoInfo.serverUrl.endsWith("/")?"":"/")+"sso/remote-login?service=" + __service + "&ticket=" + res.dataPack; return returnUrl; //window.open(returnUrl, "_black"); } } return opt.serviceUrl; }, } } export default user import {baseLogin, logout} from '@main/api/login' import {getInfo,getBzList,getSSOInfo,getSSOTicket} from '@main/api/user' import { getToken, setToken, removeToken } from '@main/utils/auth' import {getUrlValue,getUrlSearch} from '@main/utils' import md5 from 'js-md5' if(window.Scp==null){ window.Scp = {} } if(window.Scp.User==null){ window.Scp.User={} } const user = { namespaced: true, state: { token: getToken(), avatar: '', introduction: '', roles: [], //后面加的 userInfo: {}, bzList: null, id:Scp.User.id, name:Scp.User.name, deptId:Scp.User.deptId, deptName:Scp.User.deptName, positionId:Scp.User.positionId, postionName:Scp.User.postionName, bzId:Scp.User.bzId, bzName:Scp.User.bzName, bzDeptId:Scp.User.bzDeptId, bzDeptName:Scp.User.bzDeptName, bzPositionId:Scp.User.bzPositionId, bzPositionName:Scp.User.bzPositionName, orgId:Scp.User.orgId , defOrgId:Scp.User.defOrgId, showPwDialog:false, ssoInfo:null, }, mutations: { SET_CODE: (state, code) => { state.code = code }, SET_TOKEN: (state, token) => { state.token = token }, SET_INTRODUCTION: (state, introduction) => { state.introduction = introduction }, SET_NAME: (state, name) => { state.name = name }, SET_AVATAR: (state, avatar) => { state.avatar = avatar }, SET_ROLES: (state, roles) => { state.roles = roles }, SET_USERINFO: (state, userInfo) => { state.userInfo = userInfo }, SET_BZLIST: (state, bzList) => { state.bzList = bzList }, SET_PWDIALOG: (state, isShow) => { state.showPwDialog = isShow }, }, actions: { load({ commit, state }) { }, // user login login({ commit }, userInfo) { let pushData={}; if(userInfo){ const { username, password } = userInfo pushData={ username: username.trim(), password: md5(password) }; } return new Promise((resolve, reject) => { if(window.HIVUI_SETTING.url!=location.origin){ let searchParams=getUrlSearch(location.href); delete searchParams.ticket; let service=location.origin+location.pathname+"?"; for(let k in searchParams){ service+=k+"="+searchParams[k]+"&"; } service=service.slice(0,-1); pushData={ type:"casPre", ticket:getUrlValue('','ticket'), service:service }; } baseLogin(pushData).then(response => { const data = response commit('SET_TOKEN', data.token) setToken(data.token) resolve() }).catch(error => { reject(error) }) }) }, // 多岗 getBzList({ commit, state }) { return new Promise((resolve, reject) => { getBzList().then(response => { let _arr=response.dataPack if (_arr) { if (!_arr \|\| _arr.length < 0) { reject('getInfo: data must be a non-null array!') } commit("SET_BZLIST",_arr); resolve(_arr) }else{ reject('Verification failed, please Login again.'); } }).catch(error => { reject(error) }); }) }, // get user info getInfo({ commit, state }) { return new Promise((resolve, reject) => { getInfo().then(response => { if (!response.dataPack) { reject('Verification failed, please Login again.') } //const { info ,org} = response.data; const info = response.dataPack // if (!info) { // reject('Verification failed, please Login again.') // } //const { roles, name, avatar, introduction } = data window.Scp.User=info; let roles = ['admim'], avatar = "", introduction = "", name = info.fuserid, userInfo = info; // roles must be a non-empty array if (!roles \|\| roles.length <= 0) { reject('getInfo: roles must be a non-null array!') } commit('SET_USERINFO', userInfo) commit('SET_ROLES', roles) commit('SET_NAME', name) commit('SET_AVATAR', avatar) commit('SET_INTRODUCTION', introduction) resolve(info) }).catch(error => { reject(error) }) }) }, // user logout logout({ commit, state }) { return new Promise((resolve, reject) => { if(!getToken()){ resolve(); }else{ logout().then(() => { commit('SET_TOKEN', ''); commit('SET_ROLES', []); removeToken(); resolve(); }).catch(error => { reject(error); }); } }); }, // remove token resetToken({ commit }) { return new Promise(resolve => { commit('SET_TOKEN', '') commit('SET_ROLES', []) removeToken() resolve() }) }, // dynamically modify permissions changeRoles({ commit, dispatch }, role) { return new Promise(async resolve => { const token = role + '-token' commit('SET_TOKEN', token) setToken(token) const { roles } = await dispatch('getInfo') //resetRouter() // generate accessible routes map based on roles const accessRoutes = await dispatch('permission/generateRoutes', roles, { root: true }) // dynamically add accessible routes router.addRoutes(accessRoutes) // reset visited views and cached views dispatch('tagsView/delAllViews', null, { root: true }) resolve() }) }, //修改密码弹窗 showPwDialog({ commit, dispatch }, isShow){ commit('SET_PWDIALOG', isShow); }, //获取单点登录服务器信息 getSSOInfo({state, dispatch}){ return new Promise((resolve, reject) => { getSSOInfo().then((res)=>{ state.ssoInfo=res.dataPack; resolve(res); }).catch(err=>{ reject(err); }); }); }, //单点跳转功能 async openSSOFuncPage({state, dispatch},opt){ await dispatch("getSSOInfo"); if(state.ssoInfo){ getSSOTicket(state.ssoInfo.serverUrl,{ 'clientId': state.ssoInfo.clientId, 'token': state.token, }).then((res)=>{ if (res.status == 200) { let __service = encodeURIComponent((opt.serviceUrl.startsWith("http")?"":location.origin+(opt.serviceUrl.startsWith("/")?"":"/"))+opt.serviceUrl); let returnUrl = state.ssoInfo.serverUrl + (state.ssoInfo.serverUrl.endsWith("/")?"":"/")+"sso/remote-login?service=" + __service + "&ticket=" + res.dataPack; window.open(returnUrl, "_black"); } }); } }, } } export default user

Ignore Space Show notes View

project/hivuiMain/store/modules/user.js

import {baseLogin, logout} from '@main/api/login'
import {getInfo,getBzList,getSSOInfo,getSSOTicket} from '@main/api/user'
import { getToken, setToken, removeToken } from '@main/utils/auth'
import {getUrlValue,getUrlSearch} from '@main/utils'
import md5 from 'js-md5'
if(window.Scp==null){
  window.Scp = {} 
}
if(window.Scp.User==null){
  window.Scp.User={}
}
const user = {
  namespaced: true,
  state: {
    token: getToken(),
    avatar: '',
    introduction: '',
    roles: [],
    //后面加的
    userInfo: {},
    bzList: null,
    id:Scp.User.id,
    name:Scp.User.name,
    deptId:Scp.User.deptId,
    deptName:Scp.User.deptName,
    positionId:Scp.User.positionId,
    postionName:Scp.User.postionName,  
  
    bzId:Scp.User.bzId,
    bzName:Scp.User.bzName,
  
    bzDeptId:Scp.User.bzDeptId,
    bzDeptName:Scp.User.bzDeptName,
  
    bzPositionId:Scp.User.bzPositionId,
    bzPositionName:Scp.User.bzPositionName,
  
    orgId:Scp.User.orgId ,
    defOrgId:Scp.User.defOrgId,
    showPwDialog:false,
    ssoInfo:null,
  },
  mutations: {
    SET_CODE: (state, code) => {
      state.code = code
    },
    SET_TOKEN: (state, token) => {
      state.token = token
    },
    SET_INTRODUCTION: (state, introduction) => {
      state.introduction = introduction
    },
    SET_NAME: (state, name) => {
      state.name = name
    },
    SET_AVATAR: (state, avatar) => {
      state.avatar = avatar
    },
    SET_ROLES: (state, roles) => {
      state.roles = roles
    },
    SET_USERINFO: (state, userInfo) => {
      state.userInfo = userInfo
    },
    SET_BZLIST: (state, bzList) => {
      state.bzList = bzList
    },
    SET_PWDIALOG: (state, isShow) => {
      state.showPwDialog = isShow
    },
  },
  actions: { 
    load({ commit, state }) {
      
    },
    // user login
    login({ commit }, userInfo) {
      let pushData={};
      if(userInfo){
        const { username, password } = userInfo
        pushData={ 
          username: username.trim(), 
          password: md5(password) 
        };
      }
      return new Promise((resolve, reject) => {
        if(window.HIVUI_SETTING.url!=location.origin){
          let searchParams=getUrlSearch(location.href);
          delete searchParams.ticket;
          let service=location.origin+location.pathname+"?";
          for(let k in searchParams){
            service+=k+"="+searchParams[k]+"&";
          }
          service=service.slice(0,-1);
          pushData={
            type:"casPre",
            ticket:getUrlValue('','ticket'),
            service:service
          };
        }
        baseLogin(pushData).then(response => {
          const data = response
          commit('SET_TOKEN', data.token)
          setToken(data.token)
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },
    // 多岗
    getBzList({ commit, state }) {
      return new Promise((resolve, reject) => {
        getBzList().then(response => {
          let _arr=response.dataPack
          if (_arr) {
            if (!_arr || _arr.length < 0) {
              reject('getInfo: data must be a non-null array!')
            }
            commit("SET_BZLIST",_arr);
            resolve(_arr)
          }else{
            reject('Verification failed, please Login again.');
          }
        }).catch(error => {
          reject(error)
        });
      })
    },
    // get user info
    getInfo({ commit, state }) {
      return new Promise((resolve, reject) => {
        getInfo().then(response => {
          if (!response.dataPack) {
            reject('Verification failed, please Login again.')
          }
          //const { info ,org} = response.data;
          const info = response.dataPack
          // if (!info) {
          //   reject('Verification failed, please Login again.')
          // }

//const { roles, name, avatar, introduction } = data
          window.Scp.User=info;
          let roles = ['admim'], avatar = "", introduction = "", name = info.fuserid, userInfo = info;
          // roles must be a non-empty array
          if (!roles || roles.length <= 0) {
            reject('getInfo: roles must be a non-null array!')
          }
          commit('SET_USERINFO', userInfo)
          commit('SET_ROLES', roles)
          commit('SET_NAME', name)
          commit('SET_AVATAR', avatar)
          commit('SET_INTRODUCTION', introduction)
          resolve(info)
        }).catch(error => {
          reject(error)
        })
      })
    },

// user logout
    logout({ commit, state }) {
      return new Promise((resolve, reject) => {
        if(!getToken()){
          resolve();
        }else{
          logout().then(() => {
            commit('SET_TOKEN', '');
            commit('SET_ROLES', []);
            removeToken();
            resolve();
          }).catch(error => {
            reject(error);
          });
        }        
      });
    },

// remove token
    resetToken({ commit }) {
      return new Promise(resolve => {
        commit('SET_TOKEN', '')
        commit('SET_ROLES', [])
        removeToken()
        resolve()
      })
    },

// dynamically modify permissions
    changeRoles({ commit, dispatch }, role) {
      return new Promise(async resolve => {
        const token = role + '-token'

commit('SET_TOKEN', token)
        setToken(token)

const { roles } = await dispatch('getInfo')

//resetRouter()
        // generate accessible routes map based on roles
        const accessRoutes = await dispatch('permission/generateRoutes', roles, { root: true })

// dynamically add accessible routes
        router.addRoutes(accessRoutes)

// reset visited views and cached views
        dispatch('tagsView/delAllViews', null, { root: true })

resolve()
      })
    },
    //修改密码弹窗
    showPwDialog({ commit, dispatch }, isShow){
      commit('SET_PWDIALOG', isShow);
    },
    //获取单点登录服务器信息
    getSSOInfo({state, dispatch}){
      return new Promise((resolve, reject) => {
        getSSOInfo().then((res)=>{
          state.ssoInfo=res.dataPack;
          resolve(res);
        }).catch(err=>{
          reject(err);
        });
      });
    },
    //单点跳转功能
    async openSSOFuncPage({state, dispatch},opt){
      await dispatch("getSSOInfo");
      if(state.ssoInfo){
        let res=await getSSOTicket(state.ssoInfo.serverUrl,{
            'clientId': state.ssoInfo.clientId,
            'token': state.token,
        });
        if (res.status == 200) {
          let __service = encodeURIComponent((opt.serviceUrl.startsWith("http")?"":location.origin+(opt.serviceUrl.startsWith("/")?"":"/"))+opt.serviceUrl);
          let returnUrl = state.ssoInfo.serverUrl + (state.ssoInfo.serverUrl.endsWith("/")?"":"/")+"sso/remote-login?service=" + __service + "&ticket=" + res.dataPack;
          return returnUrl;
          //window.open(returnUrl, "_black");
        }
      }
      return opt.serviceUrl;
    },
  }
}

export default user

// dynamically modify permissions
    changeRoles({ commit, dispatch }, role) {
      return new Promise(async resolve => {
        const token = role + '-token'

commit('SET_TOKEN', token)
        setToken(token)

const { roles } = await dispatch('getInfo')

//resetRouter()
        // generate accessible routes map based on roles
        const accessRoutes = await dispatch('permission/generateRoutes', roles, { root: true })

// dynamically add accessible routes
        router.addRoutes(accessRoutes)

// reset visited views and cached views
        dispatch('tagsView/delAllViews', null, { root: true })

resolve()
      })
    },
    //修改密码弹窗
    showPwDialog({ commit, dispatch }, isShow){
      commit('SET_PWDIALOG', isShow);
    },
    //获取单点登录服务器信息
    getSSOInfo({state, dispatch}){
      return new Promise((resolve, reject) => {
        getSSOInfo().then((res)=>{
          state.ssoInfo=res.dataPack;
          resolve(res);
        }).catch(err=>{
          reject(err);
        });
      });
    },
    //单点跳转功能
    async openSSOFuncPage({state, dispatch},opt){
      await dispatch("getSSOInfo");
      if(state.ssoInfo){
        getSSOTicket(state.ssoInfo.serverUrl,{
            'clientId': state.ssoInfo.clientId,
            'token': state.token,
        }).then((res)=>{
          if (res.status == 200) {
            let __service = encodeURIComponent((opt.serviceUrl.startsWith("http")?"":location.origin+(opt.serviceUrl.startsWith("/")?"":"/"))+opt.serviceUrl);
            let returnUrl = state.ssoInfo.serverUrl + (state.ssoInfo.serverUrl.endsWith("/")?"":"/")+"sso/remote-login?service=" + __service + "&ticket=" + res.dataPack;
            window.open(returnUrl, "_black");
          }
        });
      }
    },
  }
}

export default user

Ignore Space Show notes View project/hivuiMain/views/layout/components/Sidebar.vue
<template> <div v-if="layout == 'level'" class="pl-sidebar" :style="{width: this.sideWidth, background:'#002040',top:totop+'px',color:'#fff'}"> <div class="menusArea pl-cl"> <div class="scroll" ref="domSrcoll"> <Smenu ref="smenu" mode="horizontal" :style="{width: sideWidth,margin: 0,height:(window.innerHeight-totop)+'px'}"> <template v-for="(item,index) in menus"> <!-- <Smenu-item v-if="!item.children\|\|!item.children.length" :icon="item.iconClass" @click="handleOpenFunc(item)">{{item.name}}</Smenu-item> --> <Smenu-item v-if="item.isShow&&!(item.children&&item.children.length)" :hasTitle="hasTitle" :icon="item.iconClass \|\| 'icon-bell'" @click="handleOpenFunc(item)">{{item.name}}</Smenu-item> <Snav-sub-menus :hasTitle="hasTitle" :menuitem="item" :icon="item.iconClass" v-if="item.isShow&&item.children&&item.children.length" ></Snav-sub-menus> </template> </Smenu> </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"> 没有数据 </li> </ul> --> </div> <div v-else class="pl-sidebar"> <GeminiScrollbar> <ul class="menus"> <li :class="['item','itemBg'+(index%8+1)]" v-for="(item,index) in navs" :key="index" :title="item.name" @click="handleOpenFunc(item)"> <div class="box"> <img v-if="item.iconClass" :src="item.iconClass \| getIconServePath" width="42" height="42"/> <img v-if="item.iconClass==null\|\|item.iconClass==''" src="@main/assets/def_Func.png" width="42" height="42"/> <!-- <i class="iconfont"><img v-if="item.iconClass" :src="item.iconClass" width="24" height="24"/></i> --> <span v-if="item.markCount" class="tip">{{item.markCount}}</span> </div> <div class="title">{{item.name}}</div> </li> </ul> </GeminiScrollbar> </div> </template> <script> import {Smenu,SsubMenu,SmenuItem} from './Smenus' import SnavSubMenus from './side/Smenus' export default { inject:['addTab'], components:{ Smenu,SsubMenu,SmenuItem,SnavSubMenus }, props:{ sideWidth:{ type: String, }, hasTitle:{ type: Boolean, }, totop:{ type: Number } }, data(){ return{ window:window, } /* return { navs:[ { iconClass:"", name:"新建事项", url:"", }, { iconClass:"", name:"销售排行", url:"" }, { iconClass:"", name:"待办工作", url:"" }, { iconClass:"", name:"薪资查看", url:"", count:10 }, { iconClass:"", name:"我的日程", url:"", count:8 }, { iconClass:"", name:"待开会议", url:"" }, { iconClass:"", name:"签到", url:"" }, { iconClass:"", name:"快捷管理", url:"" }, { iconClass:"", name:"我的日程", url:"", count:8 }, { iconClass:"", name:"待开会议", url:"" }, { iconClass:"", name:"签到", url:"" }, { iconClass:"", name:"快捷管理", url:"" }, { iconClass:"", name:"我的日程", url:"", count:8 }, { iconClass:"", name:"待开会议", url:"" }, { iconClass:"", name:"签到", url:"" }, { iconClass:"", name:"快捷管理", url:"" }, ] } / }, computed:{ navs(){ return this.$store.getters.navs; }, layout(){ return window.localStorage.getItem('layout'); }, menus(){ return this.$store.getters.menus; }, navsLatelyUse(){ return this.$store.getters.navsLatelyUse; } }, mounted(){ // this.resize(); window.addEventListener('resize',this.resize); }, filters: { getIconServePath(path){ let file = path.split(";"); if(file[2]){ return `/amrept-web/checkPhoto/photo.do?path=${file[2]}` }else{ return ""; } } }, methods:{ // resize(){ // let c = this.$refs.smenu.$el.children,w=0; // for(let i=c.length-1;i>=0;i--){ // w+=c[i].offsetWidth; // } // this.$refs.smenu.$el.style.width=`${w+2}px`; // this.isMenuArrBtn = this.$refs.domSrcoll.offsetWidth<w; // this.scrollBtnStatus(); // }, handleOpenLatelyFunc(item){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; } this.addTab({ resUrl:item.FURI, name:item.NAME, openType:item.openType, });//inject 提供的方法只能传一个参数 }, async handleOpenFunc(item){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; }else if(item.type=="sso"){ item.resUrl=await this.$store.dispatch("user/openSSOFuncPage",{ serviceUrl:item.resUrl }); } // 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.smenu.$el.offsetWidth-this.$refs.domSrcoll.offsetWidth){ this.$refs.scrollRtBtn.style.opacity=0.3; }else{ this.$refs.scrollRtBtn.style.opacity=1; } } } } </script> <template> <div v-if="layout == 'level'" class="pl-sidebar" :style="{width: this.sideWidth, background:'#002040',top:totop+'px',color:'#fff'}"> <div class="menusArea pl-cl"> <div class="scroll" ref="domSrcoll"> <Smenu ref="smenu" mode="horizontal" :style="{width: sideWidth,margin: 0,height:(window.innerHeight-totop)+'px'}"> <template v-for="(item,index) in menus"> <!-- <Smenu-item v-if="!item.children\|\|!item.children.length" :icon="item.iconClass" @click="handleOpenFunc(item)">{{item.name}}</Smenu-item> --> <Smenu-item v-if="item.isShow&&!(item.children&&item.children.length)" :hasTitle="hasTitle" :icon="item.iconClass \|\| 'icon-bell'" @click="handleOpenFunc(item)">{{item.name}}</Smenu-item> <Snav-sub-menus :hasTitle="hasTitle" :menuitem="item" :icon="item.iconClass" v-if="item.isShow&&item.children&&item.children.length" ></Snav-sub-menus> </template> </Smenu> </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"> 没有数据 </li> </ul> --> </div> <div v-else class="pl-sidebar"> <GeminiScrollbar> <ul class="menus"> <li :class="['item','itemBg'+(index%8+1)]" v-for="(item,index) in navs" :key="index" :title="item.name" @click="handleOpenFunc(item)"> <div class="box"> <img v-if="item.iconClass" :src="item.iconClass \| getIconServePath" width="42" height="42"/> <img v-if="item.iconClass==null\|\|item.iconClass==''" src="@main/assets/def_Func.png" width="42" height="42"/> <!-- <i class="iconfont"><img v-if="item.iconClass" :src="item.iconClass" width="24" height="24"/></i> --> <span v-if="item.markCount" class="tip">{{item.markCount}}</span> </div> <div class="title">{{item.name}}</div> </li> </ul> </GeminiScrollbar> </div> </template> <script> import {Smenu,SsubMenu,SmenuItem} from './Smenus' import SnavSubMenus from './side/Smenus' export default { inject:['addTab'], components:{ Smenu,SsubMenu,SmenuItem,SnavSubMenus }, props:{ sideWidth:{ type: String, }, hasTitle:{ type: Boolean, }, totop:{ type: Number } }, data(){ return{ window:window, } / return { navs:[ { iconClass:"", name:"新建事项", url:"", }, { iconClass:"", name:"销售排行", url:"" }, { iconClass:"", name:"待办工作", url:"" }, { iconClass:"", name:"薪资查看", url:"", count:10 }, { iconClass:"", name:"我的日程", url:"", count:8 }, { iconClass:"", name:"待开会议", url:"" }, { iconClass:"", name:"签到", url:"" }, { iconClass:"", name:"快捷管理", url:"" }, { iconClass:"", name:"我的日程", url:"", count:8 }, { iconClass:"", name:"待开会议", url:"" }, { iconClass:"", name:"签到", url:"" }, { iconClass:"", name:"快捷管理", url:"" }, { iconClass:"", name:"我的日程", url:"", count:8 }, { iconClass:"", name:"待开会议", url:"" }, { iconClass:"", name:"签到", url:"" }, { iconClass:"", name:"快捷管理", url:"" }, ] } */ }, computed:{ navs(){ return this.$store.getters.navs; }, layout(){ return window.localStorage.getItem('layout'); }, menus(){ return this.$store.getters.menus; }, navsLatelyUse(){ return this.$store.getters.navsLatelyUse; } }, mounted(){ // this.resize(); window.addEventListener('resize',this.resize); }, filters: { getIconServePath(path){ let file = path.split(";"); if(file[2]){ return `/amrept-web/checkPhoto/photo.do?path=${file[2]}` }else{ return ""; } } }, methods:{ // resize(){ // let c = this.$refs.smenu.$el.children,w=0; // for(let i=c.length-1;i>=0;i--){ // w+=c[i].offsetWidth; // } // this.$refs.smenu.$el.style.width=`${w+2}px`; // this.isMenuArrBtn = this.$refs.domSrcoll.offsetWidth<w; // this.scrollBtnStatus(); // }, handleOpenLatelyFunc(item){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; } this.addTab({ resUrl:item.FURI, name:item.NAME, openType:item.openType, });//inject 提供的方法只能传一个参数 }, handleOpenFunc(item){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; }else if(item.type=="sso"){ this.$store.dispatch("user/openSSOFuncPage",{ serviceUrl:item.resUrl }); 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.smenu.$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/Sidebar.vue

<template>
    <div v-if="layout == 'level'" class="pl-sidebar"  :style="{width: this.sideWidth, background:'#002040',top:totop+'px',color:'#fff'}">
                <div class="menusArea pl-cl">
                    <div class="scroll" ref="domSrcoll">
                        <Smenu ref="smenu" mode="horizontal" :style="{width: sideWidth,margin: 0,height:(window.innerHeight-totop)+'px'}">
                            <template v-for="(item,index) in menus">
                                
                                
                                <Smenu-item v-if="item.isShow&&!(item.children&&item.children.length)" :hasTitle="hasTitle" :icon="item.iconClass || 'icon-bell'" @click="handleOpenFunc(item)">{{item.name}}</Smenu-item>
                                <Snav-sub-menus :hasTitle="hasTitle" :menuitem="item" :icon="item.iconClass" v-if="item.isShow&&item.children&&item.children.length" ></Snav-sub-menus>
                            </template>
                        </Smenu>
                    </div>
                </div>
            
        </div>
    <div v-else class="pl-sidebar">
        <GeminiScrollbar>
            <ul class="menus">
                <li :class="['item','itemBg'+(index%8+1)]" v-for="(item,index) in  navs" :key="index" :title="item.name" @click="handleOpenFunc(item)">
                    <div class="box">
                        <img v-if="item.iconClass" :src="item.iconClass | getIconServePath"  width="42" height="42"/>
                        <img v-if="item.iconClass==null||item.iconClass==''" src="@main/assets/def_Func.png" width="42" height="42"/>
                        
                        <span v-if="item.markCount" class="tip">{{item.markCount}}</span>
                    </div>
                    <div class="title">{{item.name}}</div>
                </li>
            </ul>
        </GeminiScrollbar>
    </div>
</template>
<script>
import {Smenu,SsubMenu,SmenuItem} from './Smenus'
import SnavSubMenus from './side/Smenus'
export default {
    inject:['addTab'],
     components:{
        Smenu,SsubMenu,SmenuItem,SnavSubMenus
    },
    props:{
        sideWidth:{
            type: String,
        },
        hasTitle:{
            type: Boolean,
        },
        totop:{
            type: Number
        }
    },
    data(){
        return{
            window:window,
        }
    /*
        return {
            navs:[
                {
                    iconClass:"",
                    name:"新建事项",
                    url:"",
                },
                {
                    iconClass:"",
                    name:"销售排行",
                    url:""
                },
                {
                    iconClass:"",
                    name:"待办工作",
                    url:""
                },
                {
                    iconClass:"",
                    name:"薪资查看",
                    url:"",
                    count:10
                },
                {
                    iconClass:"",
                    name:"我的日程",
                    url:"",
                    count:8
                },
                {
                    iconClass:"",
                    name:"待开会议",
                    url:""
                },
                {
                    iconClass:"",
                    name:"签到",
                    url:""
                },
                {
                    iconClass:"",
                    name:"快捷管理",
                    url:""
                },
                {
                    iconClass:"",
                    name:"我的日程",
                    url:"",
                    count:8
                },
                {
                    iconClass:"",
                    name:"待开会议",
                    url:""
                },
                {
                    iconClass:"",
                    name:"签到",
                    url:""
                },
                {
                    iconClass:"",
                    name:"快捷管理",
                    url:""
                },
                {
                    iconClass:"",
                    name:"我的日程",
                    url:"",
                    count:8
                },
                {
                    iconClass:"",
                    name:"待开会议",
                    url:""
                },
                {
                    iconClass:"",
                    name:"签到",
                    url:""
                },
                {
                    iconClass:"",
                    name:"快捷管理",
                    url:""
                },
            ]
        }
    */
    },
    computed:{
        navs(){
            return this.$store.getters.navs;
        },
        layout(){
            return window.localStorage.getItem('layout');
        },
        menus(){
            return this.$store.getters.menus;
        },
        navsLatelyUse(){
            return this.$store.getters.navsLatelyUse;
        }
    },
    mounted(){
        // this.resize();
        window.addEventListener('resize',this.resize);
    },
    filters: {
        getIconServePath(path){
            let file = path.split(";");
            if(file[2]){
                return `/amrept-web/checkPhoto/photo.do?path=${file[2]}`
            }else{
                return "";
            }
        }
    },
    methods:{
    //    resize(){
    //         let c = this.$refs.smenu.$el.children,w=0;
    //         for(let i=c.length-1;i>=0;i--){
    //             w+=c[i].offsetWidth;
    //         }
    //         this.$refs.smenu.$el.style.width=`${w+2}px`;
    //         this.isMenuArrBtn = this.$refs.domSrcoll.offsetWidth<w;
    //         this.scrollBtnStatus();
    //     },
        handleOpenLatelyFunc(item){      
            if(item.type== "link"){
                window.open(item.resUrl,item.name);
                return;
            }
            this.addTab({
                resUrl:item.FURI,
                name:item.NAME,
                openType:item.openType,
            });//inject 提供的方法只能 传一个参数
        },     
        async handleOpenFunc(item){  
            if(item.type== "link"){
                window.open(item.resUrl,item.name);
                return;
            }else if(item.type=="sso"){
                item.resUrl=await this.$store.dispatch("user/openSSOFuncPage",{
                    serviceUrl:item.resUrl
                });
            }
            // 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.smenu.$el.offsetWidth-this.$refs.domSrcoll.offsetWidth){
                this.$refs.scrollRtBtn.style.opacity=0.3;
            }else{
                this.$refs.scrollRtBtn.style.opacity=1;
            }
        }
    }
}
</script>

<template>
    <div v-if="layout == 'level'" class="pl-sidebar"  :style="{width: this.sideWidth, background:'#002040',top:totop+'px',color:'#fff'}">
                <div class="menusArea pl-cl">
                    <div class="scroll" ref="domSrcoll">
                        <Smenu ref="smenu" mode="horizontal" :style="{width: sideWidth,margin: 0,height:(window.innerHeight-totop)+'px'}">
                            <template v-for="(item,index) in menus">
                                
                                
                                <Smenu-item v-if="item.isShow&&!(item.children&&item.children.length)" :hasTitle="hasTitle" :icon="item.iconClass || 'icon-bell'" @click="handleOpenFunc(item)">{{item.name}}</Smenu-item>
                                <Snav-sub-menus :hasTitle="hasTitle" :menuitem="item" :icon="item.iconClass" v-if="item.isShow&&item.children&&item.children.length" ></Snav-sub-menus>
                            </template>
                        </Smenu>
                    </div>
                </div>
            
        </div>
    <div v-else class="pl-sidebar">
        <GeminiScrollbar>
            <ul class="menus">
                <li :class="['item','itemBg'+(index%8+1)]" v-for="(item,index) in  navs" :key="index" :title="item.name" @click="handleOpenFunc(item)">
                    <div class="box">
                        <img v-if="item.iconClass" :src="item.iconClass | getIconServePath"  width="42" height="42"/>
                        <img v-if="item.iconClass==null||item.iconClass==''" src="@main/assets/def_Func.png" width="42" height="42"/>
                        
                        <span v-if="item.markCount" class="tip">{{item.markCount}}</span>
                    </div>
                    <div class="title">{{item.name}}</div>
                </li>
            </ul>
        </GeminiScrollbar>
    </div>
</template>
<script>
import {Smenu,SsubMenu,SmenuItem} from './Smenus'
import SnavSubMenus from './side/Smenus'
export default {
    inject:['addTab'],
     components:{
        Smenu,SsubMenu,SmenuItem,SnavSubMenus
    },
    props:{
        sideWidth:{
            type: String,
        },
        hasTitle:{
            type: Boolean,
        },
        totop:{
            type: Number
        }
    },
    data(){
        return{
            window:window,
        }
    /*
        return {
            navs:[
                {
                    iconClass:"",
                    name:"新建事项",
                    url:"",
                },
                {
                    iconClass:"",
                    name:"销售排行",
                    url:""
                },
                {
                    iconClass:"",
                    name:"待办工作",
                    url:""
                },
                {
                    iconClass:"",
                    name:"薪资查看",
                    url:"",
                    count:10
                },
                {
                    iconClass:"",
                    name:"我的日程",
                    url:"",
                    count:8
                },
                {
                    iconClass:"",
                    name:"待开会议",
                    url:""
                },
                {
                    iconClass:"",
                    name:"签到",
                    url:""
                },
                {
                    iconClass:"",
                    name:"快捷管理",
                    url:""
                },
                {
                    iconClass:"",
                    name:"我的日程",
                    url:"",
                    count:8
                },
                {
                    iconClass:"",
                    name:"待开会议",
                    url:""
                },
                {
                    iconClass:"",
                    name:"签到",
                    url:""
                },
                {
                    iconClass:"",
                    name:"快捷管理",
                    url:""
                },
                {
                    iconClass:"",
                    name:"我的日程",
                    url:"",
                    count:8
                },
                {
                    iconClass:"",
                    name:"待开会议",
                    url:""
                },
                {
                    iconClass:"",
                    name:"签到",
                    url:""
                },
                {
                    iconClass:"",
                    name:"快捷管理",
                    url:""
                },
            ]
        }
    */
    },
    computed:{
        navs(){
            return this.$store.getters.navs;
        },
        layout(){
            return window.localStorage.getItem('layout');
        },
        menus(){
            return this.$store.getters.menus;
        },
        navsLatelyUse(){
            return this.$store.getters.navsLatelyUse;
        }
    },
    mounted(){
        // this.resize();
        window.addEventListener('resize',this.resize);
    },
    filters: {
        getIconServePath(path){
            let file = path.split(";");
            if(file[2]){
                return `/amrept-web/checkPhoto/photo.do?path=${file[2]}`
            }else{
                return "";
            }
        }
    },
    methods:{
    //    resize(){
    //         let c = this.$refs.smenu.$el.children,w=0;
    //         for(let i=c.length-1;i>=0;i--){
    //             w+=c[i].offsetWidth;
    //         }
    //         this.$refs.smenu.$el.style.width=`${w+2}px`;
    //         this.isMenuArrBtn = this.$refs.domSrcoll.offsetWidth<w;
    //         this.scrollBtnStatus();
    //     },
        handleOpenLatelyFunc(item){      
            if(item.type== "link"){
                window.open(item.resUrl,item.name);
                return;
            }
            this.addTab({
                resUrl:item.FURI,
                name:item.NAME,
                openType:item.openType,
            });//inject 提供的方法只能 传一个参数
        },     
        handleOpenFunc(item){  
            if(item.type== "link"){
                window.open(item.resUrl,item.name);
                return;
            }else if(item.type=="sso"){
                this.$store.dispatch("user/openSSOFuncPage",{
                    serviceUrl:item.resUrl
                });
                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/allFuncMenu/menus.vue
<template> <p-sub-menu ref="subMenu" :level="level" :parent="parent" :isAllFunc="true"> <template slot="title"> {{menuitem.name}} <i v-if="menuitem.type=='dir'" class="el-icon-caret-right"></i> </template> <template v-for="(item,index) in menuitem.children"> <p-menu-item :icon="item.iconClass" v-if="item.isShow&&!(item.children&&item.children.length)" @click="handleOpenFunc(item)">{{item.name}}</p-menu-item> <nav-sub-menus :menuitem="item" v-if="item.isShow&&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','hideAllFuncBox'], components:{ PMenu,PSubMenu,PMenuItem }, props:{ menuitem:{ type:Object }, level:{ type:Number }, parent:{ type:Object } }, methods:{ async handleOpenFunc(item){ let me=this; if(item.type== "link"){ window.open(item.resUrl,item.name); return; }else if(item.type=="sso"){ item.resUrl=await me.$store.dispatch("user/openSSOFuncPage",{ serviceUrl:item.resUrl }); return; } me.addTab(item);//inject 提供的方法只能传一个参数 me.$refs.subMenu.hide(); setTimeout(()=>{ me.hideAllFuncBox(); },200); } } } </script> <template> <p-sub-menu ref="subMenu" :level="level" :parent="parent" :isAllFunc="true"> <template slot="title"> {{menuitem.name}} <i v-if="menuitem.type=='dir'" class="el-icon-caret-right"></i> </template> <template v-for="(item,index) in menuitem.children"> <p-menu-item :icon="item.iconClass" v-if="item.isShow&&!(item.children&&item.children.length)" @click="handleOpenFunc(item)">{{item.name}}</p-menu-item> <nav-sub-menus :menuitem="item" v-if="item.isShow&&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','hideAllFuncBox'], components:{ PMenu,PSubMenu,PMenuItem }, props:{ menuitem:{ type:Object }, level:{ type:Number }, parent:{ type:Object } }, methods:{ handleOpenFunc(item){ let me=this; if(item.type== "link"){ window.open(item.resUrl,item.name); return; }else if(item.type=="sso"){ me.$store.dispatch("user/openSSOFuncPage",{ serviceUrl:item.resUrl }); return; } me.addTab(item);//inject 提供的方法只能传一个参数 me.$refs.subMenu.hide(); setTimeout(()=>{ me.hideAllFuncBox(); },200); } } } </script>

Ignore Space Show notes View

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

<template>
    <p-sub-menu ref="subMenu" :level="level" :parent="parent" :isAllFunc="true">
        <template slot="title">
            {{menuitem.name}}
            <i v-if="menuitem.type=='dir'" class="el-icon-caret-right"></i>
        </template>
        <template v-for="(item,index) in menuitem.children">
            <p-menu-item :icon="item.iconClass"  v-if="item.isShow&&!(item.children&&item.children.length)" @click="handleOpenFunc(item)">{{item.name}}</p-menu-item>            
            <nav-sub-menus :menuitem="item" v-if="item.isShow&&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','hideAllFuncBox'],
    components:{
        PMenu,PSubMenu,PMenuItem
    },
    props:{
        menuitem:{
            type:Object
        },
        level:{
            type:Number
        },
        parent:{
            type:Object
        }
    },
    methods:{  
        async handleOpenFunc(item){
            let me=this;
            if(item.type== "link"){
                window.open(item.resUrl,item.name);
                return;
            }else if(item.type=="sso"){
                item.resUrl=await me.$store.dispatch("user/openSSOFuncPage",{
                    serviceUrl:item.resUrl
                });
                return;
            }
            me.addTab(item);//inject 提供的方法只能 传一个参数
            me.$refs.subMenu.hide();
            setTimeout(()=>{
                me.hideAllFuncBox();
            },200);
            
        }
    }
}
</script>

</template>
<script> 
import {PMenu,PSubMenu,PMenuItem} from '../menus'
export default {
    name:'NavSubMenus',
    inject:['addTab','showTab','hideTab','hideAllFuncBox'],
    components:{
        PMenu,PSubMenu,PMenuItem
    },
    props:{
        menuitem:{
            type:Object
        },
        level:{
            type:Number
        },
        parent:{
            type:Object
        }
    },
    methods:{  
        handleOpenFunc(item){
            let me=this;
            if(item.type== "link"){
                window.open(item.resUrl,item.name);
                return;
            }else if(item.type=="sso"){
                me.$store.dispatch("user/openSSOFuncPage",{
                    serviceUrl:item.resUrl
                });
                return;
            }
            me.addTab(item);//inject 提供的方法只能 传一个参数
            me.$refs.subMenu.hide();
            setTimeout(()=>{
                me.hideAllFuncBox();
            },200);
            
        }
    }
}
</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="showAllFuncBtn"> <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> <div class="history" 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> <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" @mouseleave="handleMenuScrollEnd"></i> <i v-show="isMenuArrBtn" ref="scrollLtBtn" class="arrLt iconfont icon-arrow-left-circle" @mousedown="handleLtMenuScroll" @mouseup="handleMenuScrollEnd" @mouseleave="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.isShow&&!(item.children&&item.children.length)" :icon="item.iconClass" @click="handleOpenFunc(item)">{{item.name}}</p-menu-item> <nav-sub-menus :menuitem="item" v-if="item.isShow&&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"> {{$t('hivuiMain_nodata')}} </li> </ul> </div> </template> <script> import {PMenu,PSubMenu,PMenuItem} from '../menus' import allFuncMenu from '../allFuncMenu' import NavSubMenus from './menus' import screenfull from 'screenfull' export default { inject:['addTab'], components:{ PMenu,PSubMenu,PMenuItem,NavSubMenus,allFuncMenu }, data(){ return { menuScrollTimer:null, isMenuArrBtn:false, latelyUseStyle:{ display:'none', left:0, top:0, maxHeight:'50%', overflow:'auto' }, showAllFuncBtn:window.customSysCofig.isShowAllFunc===false?false:true, isShowAllFuncMenu:false, allFuncBtnObj:{}, }; }, computed:{ menus(){ return this.$store.getters.menus; }, navsLatelyUse(){ return this.$store.getters.navsLatelyUse; } }, mounted(){ this.resize(); window.addEventListener('resize',this.resize); this.allFuncBtnObj=this.showAllFuncBtn&&this.$refs.allFuncBtn.getBoundingClientRect(); }, 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, openType:item.openType, });//inject 提供的方法只能传一个参数 }, async handleOpenFunc(item){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; }else if(item.type=="sso"){ item.resUrl=await this.$store.dispatch("user/openSSOFuncPage",{ serviceUrl:item.resUrl }); } // 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'; this.latelyUseStyle.opacity = '1'; }, handleHideLatelyUse(){ this.latelyUseStyle.display ='none'; }, handleLtMenuScroll(){ this.handleMenuScrollEnd(); 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.handleMenuScrollEnd(); 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-1){ this.$refs.scrollRtBtn.style.opacity=0.3; }else{ this.$refs.scrollRtBtn.style.opacity=1; } }, //全部功能弹窗 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(); }, } } </script> <template> <div class="pl-navbar" ref="nav"> <div class="allFunc" v-if="showAllFuncBtn"> <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> <div class="history" 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> <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" @mouseleave="handleMenuScrollEnd"></i> <i v-show="isMenuArrBtn" ref="scrollLtBtn" class="arrLt iconfont icon-arrow-left-circle" @mousedown="handleLtMenuScroll" @mouseup="handleMenuScrollEnd" @mouseleave="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.isShow&&!(item.children&&item.children.length)" :icon="item.iconClass" @click="handleOpenFunc(item)">{{item.name}}</p-menu-item> <nav-sub-menus :menuitem="item" v-if="item.isShow&&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"> {{$t('hivuiMain_nodata')}} </li> </ul> </div> </template> <script> import {PMenu,PSubMenu,PMenuItem} from '../menus' import allFuncMenu from '../allFuncMenu' import NavSubMenus from './menus' import screenfull from 'screenfull' export default { inject:['addTab'], components:{ PMenu,PSubMenu,PMenuItem,NavSubMenus,allFuncMenu }, data(){ return { menuScrollTimer:null, isMenuArrBtn:false, latelyUseStyle:{ display:'none', left:0, top:0, maxHeight:'50%', overflow:'auto' }, showAllFuncBtn:window.customSysCofig.isShowAllFunc===false?false:true, isShowAllFuncMenu:false, allFuncBtnObj:{}, }; }, computed:{ menus(){ return this.$store.getters.menus; }, navsLatelyUse(){ return this.$store.getters.navsLatelyUse; } }, mounted(){ this.resize(); window.addEventListener('resize',this.resize); this.allFuncBtnObj=this.showAllFuncBtn&&this.$refs.allFuncBtn.getBoundingClientRect(); }, 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, openType:item.openType, });//inject 提供的方法只能传一个参数 }, handleOpenFunc(item){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; }else if(item.type=="sso"){ this.$store.dispatch("user/openSSOFuncPage",{ serviceUrl:item.resUrl }); 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'; this.latelyUseStyle.opacity = '1'; }, handleHideLatelyUse(){ this.latelyUseStyle.display ='none'; }, handleLtMenuScroll(){ this.handleMenuScrollEnd(); 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.handleMenuScrollEnd(); 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-1){ this.$refs.scrollRtBtn.style.opacity=0.3; }else{ this.$refs.scrollRtBtn.style.opacity=1; } }, //全部功能弹窗 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(); }, } } </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="showAllFuncBtn">
            <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>
        <div class="history" 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>
        <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" @mouseleave="handleMenuScrollEnd"></i>
            <i v-show="isMenuArrBtn" ref="scrollLtBtn"  class="arrLt iconfont icon-arrow-left-circle" @mousedown="handleLtMenuScroll" @mouseup="handleMenuScrollEnd" @mouseleave="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.isShow&&!(item.children&&item.children.length)" :icon="item.iconClass" @click="handleOpenFunc(item)">{{item.name}}</p-menu-item>
                        <nav-sub-menus  :menuitem="item" v-if="item.isShow&&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">
                {{$t('hivuiMain_nodata')}}
            </li>
        </ul> 
    </div>
</template>
<script> 
import {PMenu,PSubMenu,PMenuItem} from '../menus'
import allFuncMenu from '../allFuncMenu'
import NavSubMenus from './menus'
import screenfull from 'screenfull'
export default {
    inject:['addTab'],
    components:{
        PMenu,PSubMenu,PMenuItem,NavSubMenus,allFuncMenu
    },
    data(){
        return {
            menuScrollTimer:null,
            isMenuArrBtn:false,
            latelyUseStyle:{
                display:'none',
                left:0,
                top:0,
                maxHeight:'50%',
                overflow:'auto'
            },
            showAllFuncBtn:window.customSysCofig.isShowAllFunc===false?false:true,
            isShowAllFuncMenu:false,
            allFuncBtnObj:{},

};
    },
    computed:{
        menus(){
            return this.$store.getters.menus;
        },
        navsLatelyUse(){
            return this.$store.getters.navsLatelyUse;
        }
    },
    mounted(){
        this.resize();
        window.addEventListener('resize',this.resize);
        this.allFuncBtnObj=this.showAllFuncBtn&&this.$refs.allFuncBtn.getBoundingClientRect();
    },
    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,
                openType:item.openType,
            });//inject 提供的方法只能 传一个参数
        },     
        async handleOpenFunc(item){  
            if(item.type== "link"){
                window.open(item.resUrl,item.name);
                return;
            }else if(item.type=="sso"){
                item.resUrl=await this.$store.dispatch("user/openSSOFuncPage",{
                    serviceUrl:item.resUrl
                });
            }
            // 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';
            this.latelyUseStyle.opacity = '1';
        },
        handleHideLatelyUse(){
            this.latelyUseStyle.display ='none';
        },
        handleLtMenuScroll(){
            this.handleMenuScrollEnd();
            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.handleMenuScrollEnd();
            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-1){
                this.$refs.scrollRtBtn.style.opacity=0.3;
            }else{
                this.$refs.scrollRtBtn.style.opacity=1;
            }
        },
        //全部功能弹窗
        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();
        },
    }
}
</script>

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 提供的方法只能 传一个参数
        },     
        handleOpenFunc(item){  
            if(item.type== "link"){
                window.open(item.resUrl,item.name);
                return;
            }else if(item.type=="sso"){
                this.$store.dispatch("user/openSSOFuncPage",{
                    serviceUrl:item.resUrl
                });
                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';
            this.latelyUseStyle.opacity = '1';
        },
        handleHideLatelyUse(){
            this.latelyUseStyle.display ='none';
        },
        handleLtMenuScroll(){
            this.handleMenuScrollEnd();
            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.handleMenuScrollEnd();
            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.isShow&&!(item.children&&item.children.length)" @click="handleOpenFunc(item)">{{item.name}}</p-menu-item> <nav-sub-menus :menuitem="item" v-if="item.isShow&&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:{ async handleOpenFunc(item){ //url,title,uid,callback,nearest if(item.type== "link"){ window.open(item.resUrl,item.name); return; }else if(item.type=="sso"){ item.resUrl=await this.$store.dispatch("user/openSSOFuncPage",{ serviceUrl:item.resUrl }); } // this.addTab(item.resUrl,item.name) this.addTab(item);//inject 提供的方法只能传一个参数 } } } </script> <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.isShow&&!(item.children&&item.children.length)" @click="handleOpenFunc(item)">{{item.name}}</p-menu-item> <nav-sub-menus :menuitem="item" v-if="item.isShow&&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; }else if(item.type=="sso"){ this.$store.dispatch("user/openSSOFuncPage",{ serviceUrl:item.resUrl }); 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.isShow&&!(item.children&&item.children.length)" @click="handleOpenFunc(item)">{{item.name}}</p-menu-item>            
            <nav-sub-menus :menuitem="item" v-if="item.isShow&&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:{  
        async handleOpenFunc(item){
            //url,title,uid,callback,nearest
            if(item.type== "link"){
                window.open(item.resUrl,item.name);
                return;
            }else if(item.type=="sso"){
                item.resUrl=await this.$store.dispatch("user/openSSOFuncPage",{
                    serviceUrl:item.resUrl
                });
            }

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

<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.isShow&&!(item.children&&item.children.length)" @click="handleOpenFunc(item)">{{item.name}}</p-menu-item>            
            <nav-sub-menus :menuitem="item" v-if="item.isShow&&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;
            }else if(item.type=="sso"){
                this.$store.dispatch("user/openSSOFuncPage",{
                    serviceUrl:item.resUrl
                });
                return;
            }

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

Ignore Space Show notes View project/hivuiMain/views/layout/components/side/Smenus.vue
<template> <Ssub-menu :icon="icon" :level="level" :hasTitle="hasTitle" :parent="parent"> <template slot="title">{{menuitem.name}}</template> <template v-for="(item,index) in menuitem.children"> <Smenu-item :icon="item.iconClass" :hasTitle="hasTitle" v-if="item.isShow&&!(item.children&&item.children.length)" @click="handleOpenFunc(item)">{{item.name}}</Smenu-item> <Snav-sub-menus :icon="item.iconClass" :menuitem="item" v-if="item.isShow&&item.children&&item.children.length"></Snav-sub-menus> </template> </Ssub-menu> </template> <script> import {Smenu,SsubMenu,SmenuItem} from '../Smenus' export default { name:'SnavSubMenus', inject:['addTab'], components:{ Smenu,SsubMenu,SmenuItem }, props:{ icon:{ type:String }, menuitem:{ type:Object }, hasTitle:{ type: Boolean, }, level:{ type:Number }, parent:{ type:Object } }, methods:{ async handleOpenFunc(item){ //url,title,uid,callback,nearest if(item.type== "link"){ window.open(item.resUrl,item.name); return; }else if(item.type=="sso"){ item.resUrl=await this.$store.dispatch("user/openSSOFuncPage",{ serviceUrl:item.resUrl }); } // this.addTab(item.resUrl,item.name) this.addTab(item);//inject 提供的方法只能传一个参数 } } } </script> <template> <Ssub-menu :icon="icon" :level="level" :hasTitle="hasTitle" :parent="parent"> <template slot="title">{{menuitem.name}}</template> <template v-for="(item,index) in menuitem.children"> <Smenu-item :icon="item.iconClass" :hasTitle="hasTitle" v-if="item.isShow&&!(item.children&&item.children.length)" @click="handleOpenFunc(item)">{{item.name}}</Smenu-item> <Snav-sub-menus :icon="item.iconClass" :menuitem="item" v-if="item.isShow&&item.children&&item.children.length"></Snav-sub-menus> </template> </Ssub-menu> </template> <script> import {Smenu,SsubMenu,SmenuItem} from '../Smenus' export default { name:'SnavSubMenus', inject:['addTab'], components:{ Smenu,SsubMenu,SmenuItem }, props:{ icon:{ type:String }, menuitem:{ type:Object }, hasTitle:{ type: Boolean, }, 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; }else if(item.type=="sso"){ this.$store.dispatch("user/openSSOFuncPage",{ serviceUrl:item.resUrl }); return; } // this.addTab(item.resUrl,item.name) this.addTab(item);//inject 提供的方法只能传一个参数 } } } </script>

Ignore Space Show notes View

project/hivuiMain/views/layout/components/side/Smenus.vue

<template>
    <Ssub-menu :icon="icon" :level="level" :hasTitle="hasTitle" :parent="parent">
        <template slot="title">{{menuitem.name}}</template>
        <template v-for="(item,index) in menuitem.children">

<Smenu-item :icon="item.iconClass" :hasTitle="hasTitle"  v-if="item.isShow&&!(item.children&&item.children.length)" @click="handleOpenFunc(item)">{{item.name}}</Smenu-item>
            
            <Snav-sub-menus :icon="item.iconClass" :menuitem="item" v-if="item.isShow&&item.children&&item.children.length"></Snav-sub-menus>
        </template>
    </Ssub-menu>
</template>
<script> 
import {Smenu,SsubMenu,SmenuItem} from '../Smenus'
export default {
    name:'SnavSubMenus',
    inject:['addTab'],
    components:{
       Smenu,SsubMenu,SmenuItem
    },
    props:{
        icon:{
            type:String
        },
        menuitem:{
            type:Object
        },
        hasTitle:{
            type: Boolean,
        },
        level:{
            type:Number
        },
        parent:{
            type:Object
        }
    },
    methods:{        
        async handleOpenFunc(item){
            //url,title,uid,callback,nearest
            if(item.type== "link"){
                window.open(item.resUrl,item.name);
                return;
            }else if(item.type=="sso"){
                item.resUrl=await this.$store.dispatch("user/openSSOFuncPage",{
                    serviceUrl:item.resUrl
                });
            }

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

<Smenu-item :icon="item.iconClass" :hasTitle="hasTitle"  v-if="item.isShow&&!(item.children&&item.children.length)" @click="handleOpenFunc(item)">{{item.name}}</Smenu-item>
            
            <Snav-sub-menus :icon="item.iconClass" :menuitem="item" v-if="item.isShow&&item.children&&item.children.length"></Snav-sub-menus>
        </template>
    </Ssub-menu>
</template>
<script> 
import {Smenu,SsubMenu,SmenuItem} from '../Smenus'
export default {
    name:'SnavSubMenus',
    inject:['addTab'],
    components:{
       Smenu,SsubMenu,SmenuItem
    },
    props:{
        icon:{
            type:String
        },
        menuitem:{
            type:Object
        },
        hasTitle:{
            type: Boolean,
        },
        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;
            }else if(item.type=="sso"){
                this.$store.dispatch("user/openSSOFuncPage",{
                    serviceUrl:item.resUrl
                });
                return;
            }

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

Show line notes below