Merge branch 'master' of http://192.168.4.105:8080/gitbucket/git/08335/hivui-platform-template

08335 / hivui-platform-template

hivui平台项目模板

Browse code Merge branch 'master' of http://192.168.4.105:8080/gitbucket/git/08335/hivui-platform-template master
commit 0a553fdab6925d3644b166584c469057e45c3c70 2 parents 83cae95 + d4b568c hhb authored on 10 Aug 2022

Showing 6 changed files

Ignore Space Show notes View package.json
{ "name": "hi-vui-template", "version": "1.1.15", "description": "A hi-vui-template project", "author": "zhcTeam", "scripts": { "rm:vite": "rimraf node_modules/.vite && rimraf node_modules/.cache", "pm2:start": "pm2 start processes.json", "dev": "vite --host", "def": "vite --host", "build": "node build/copyBaseAssets.js && cross-env NODE_ENV=production node build/webpack.prod.conf.js", "build:modules": "cross-env NODE_ENV=production node build/webpack.prod.conf.js", "build1": "webpack --mode production --config build/webpack.prod.conf.js", "dll": "webpack --config build/webpack.dll.conf.js", "start": "webpack-dev-server --config build/webpack.dev.conf.js", "copyassets": "node build/copyBaseAssets.js" }, "devDependencies": { "@babel/core": "^7.1.2", "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7", "@babel/plugin-proposal-optional-chaining": "^7.16.7", "@babel/plugin-syntax-dynamic-import": "^7.0.0", "@babel/preset-env": "^7.1.0", "@vitejs/plugin-vue-jsx": "^1.3.3", "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1", "@vue/babel-preset-jsx": "^1.2.4", "add-asset-html-webpack-plugin": "^3.2.0", "autoprefixer": "^9.1.5", "babel-loader": "^8.0.4", "babel-plugin-component": "^1.1.1", "babel-plugin-transform-vite-meta-env": "^1.0.3", "chalk": "^3.0.0", "clean-webpack-plugin": "^0.1.19", "copy-webpack-plugin": "^4.5.3", "cross-env": "^7.0.3", "css-loader": "^1.0.0", "dotenv": "^10.0.0", "file-loader": "^2.0.0", "happypack": "^5.0.1", "html-webpack-plugin": "^4.5.2", "less": "^3.13.1", "less-loader": "^5.0.0", "mini-css-extract-plugin": "^1.6.2", "node-sass": "^4.9.3", "optimize-css-assets-webpack-plugin": "^5.0.1", "parallel-webpack": "^2.6.0", "postcss-import": "^11.1.0", "postcss-loader": "^2.1.6", "postcss-url": "^7.3.2", "progress-bar-webpack-plugin": "^2.1.0", "sass": "^1.49.0", "sass-loader": "^7.1.0", "style-loader": "^0.23.0", "thread-loader": "^3.0.4", "uglifyjs-webpack-plugin": "^2.0.1", "url-loader": "^1.1.1", "vite": "2.3.7", "vite-plugin-html": "^2.1.1", "vite-plugin-imp": "^2.0.11", "vite-plugin-pagedata": "^1.0.4", "vite-plugin-vue2": "^1.9.0", "vue-loader": "^15.4.2", "vue-template-compiler": "^2.6.14", "webpack": "^4.46.0", "webpack-cli": "^4.9.2", "webpack-dev-server": "^3.11.3", "webpack-merge": "^4.1.4" }, "dependencies": { "axios": "^0.24.0", "babel-polyfill": "^6.26.0", "canvas": "^2.9.0", "classnames": "^2.3.1", "deep-lu-trans": "^1.0.5", "echarts": "^5.2.2", "echarts-liquidfill": "^3.1.0", "element-ui": "^2.15.7", "enquire.js": "^2.1.6", "font-awesome": "^4.7.0", "hi-taskcenter": "^1.0.9", "hi-ui": "^1.1.1006", "html2canvas": "^1.4.1", "jquery": "^3.6.0", "js-cookie": "^3.0.1", "js-md5": "^0.7.3", "js-pinyin": "^0.1.9", "jspdf": "^2.5.1", "lodash": "^4.17.11", "qrcodejs2": "0.0.2", "screenfull": "^6.0.0", "sortablejs": "^1.14.0", "v-clipboard": "^2.2.3", "vue": "^2.6.14", "vue-draggable-resizable": "^2.3.0", "vue-gemini-scrollbar": "^2.0.1", "vue-i18n": "^8.27.0", "vue-jstree": "^2.1.6", "vue-qr": "^3.2.4", "vue-router": "^3.0.1", "vuex": "^3.6.2", "xlsx": "^0.18.5", "zhc-birt-cmps": "^2.8.14", "zhc-birt-core": "^1.9.0", "zhc-flowchart": "^1.0.20" } } { "name": "hi-vui-template", "version": "1.1.15", "description": "A hi-vui-template project", "author": "zhcTeam", "scripts": { "rm:vite": "rimraf node_modules/.vite && rimraf node_modules/.cache", "pm2:start": "pm2 start processes.json", "dev": "vite --host", "def": "vite --host", "build": "node build/copyBaseAssets.js && cross-env NODE_ENV=production node build/webpack.prod.conf.js", "build:modules": "cross-env NODE_ENV=production node build/webpack.prod.conf.js", "build1": "webpack --mode production --config build/webpack.prod.conf.js", "dll": "webpack --config build/webpack.dll.conf.js", "start": "webpack-dev-server --config build/webpack.dev.conf.js", "copyassets": "node build/copyBaseAssets.js" }, "devDependencies": { "@babel/core": "^7.1.2", "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7", "@babel/plugin-proposal-optional-chaining": "^7.16.7", "@babel/plugin-syntax-dynamic-import": "^7.0.0", "@babel/preset-env": "^7.1.0", "@vitejs/plugin-vue-jsx": "^1.3.3", "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1", "@vue/babel-preset-jsx": "^1.2.4", "add-asset-html-webpack-plugin": "^3.2.0", "autoprefixer": "^9.1.5", "babel-loader": "^8.0.4", "babel-plugin-component": "^1.1.1", "babel-plugin-transform-vite-meta-env": "^1.0.3", "chalk": "^3.0.0", "clean-webpack-plugin": "^0.1.19", "copy-webpack-plugin": "^4.5.3", "cross-env": "^7.0.3", "css-loader": "^1.0.0", "dotenv": "^10.0.0", "file-loader": "^2.0.0", "happypack": "^5.0.1", "html-webpack-plugin": "^4.5.2", "less": "^3.13.1", "less-loader": "^5.0.0", "mini-css-extract-plugin": "^1.6.2", "node-sass": "^4.9.3", "optimize-css-assets-webpack-plugin": "^5.0.1", "parallel-webpack": "^2.6.0", "postcss-import": "^11.1.0", "postcss-loader": "^2.1.6", "postcss-url": "^7.3.2", "progress-bar-webpack-plugin": "^2.1.0", "sass": "^1.49.0", "sass-loader": "^7.1.0", "style-loader": "^0.23.0", "thread-loader": "^3.0.4", "uglifyjs-webpack-plugin": "^2.0.1", "url-loader": "^1.1.1", "vite": "2.3.7", "vite-plugin-html": "^2.1.1", "vite-plugin-imp": "^2.0.11", "vite-plugin-pagedata": "^1.0.4", "vite-plugin-require-transform": "^1.0.3", "vite-plugin-vue2": "^1.9.0", "vue-loader": "^15.4.2", "vue-template-compiler": "^2.6.14", "webpack": "^4.46.0", "webpack-cli": "^4.9.2", "webpack-dev-server": "^3.11.3", "webpack-merge": "^4.1.4" }, "dependencies": { "axios": "^0.24.0", "babel-polyfill": "^6.26.0", "canvas": "^2.9.0", "classnames": "^2.3.1", "deep-lu-trans": "^1.0.5", "echarts": "^5.2.2", "echarts-liquidfill": "^3.1.0", "element-ui": "^2.15.7", "enquire.js": "^2.1.6", "font-awesome": "^4.7.0", "hi-taskcenter": "^1.0.9", "hi-ui": "^1.1.1006", "html2canvas": "^1.4.1", "jquery": "^3.6.0", "js-cookie": "^3.0.1", "js-md5": "^0.7.3", "js-pinyin": "^0.1.9", "jspdf": "^2.5.1", "lodash": "^4.17.11", "qrcodejs2": "0.0.2", "screenfull": "^6.0.0", "sortablejs": "^1.14.0", "v-clipboard": "^2.2.3", "vue": "^2.6.14", "vue-draggable-resizable": "^2.3.0", "vue-gemini-scrollbar": "^2.0.1", "vue-i18n": "^8.27.0", "vue-jstree": "^2.1.6", "vue-qr": "^3.2.4", "vue-router": "^3.0.1", "vuex": "^3.6.2", "xlsx": "^0.18.5", "zhc-birt-cmps": "^2.8.14", "zhc-birt-core": "^1.9.0", "zhc-flowchart": "^1.0.20" } }

Ignore Space Show notes View

package.json

{
  "name": "hi-vui-template",
  "version": "1.1.15",
  "description": "A hi-vui-template project",
  "author": "zhcTeam",
  "scripts": {
    "rm:vite": "rimraf node_modules/.vite && rimraf node_modules/.cache",
    "pm2:start": "pm2 start processes.json",
    "dev": "vite --host",
    "def": "vite --host",
    "build": "node build/copyBaseAssets.js && cross-env NODE_ENV=production node build/webpack.prod.conf.js",
    "build:modules": "cross-env NODE_ENV=production node build/webpack.prod.conf.js",
    "build1": "webpack --mode production --config build/webpack.prod.conf.js",
    "dll": "webpack --config build/webpack.dll.conf.js",
    "start": "webpack-dev-server --config build/webpack.dev.conf.js",
    "copyassets": "node build/copyBaseAssets.js"
  },
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
    "@babel/plugin-proposal-optional-chaining": "^7.16.7",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/preset-env": "^7.1.0",
    "@vitejs/plugin-vue-jsx": "^1.3.3",
    "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
    "@vue/babel-preset-jsx": "^1.2.4",
    "add-asset-html-webpack-plugin": "^3.2.0",
    "autoprefixer": "^9.1.5",
    "babel-loader": "^8.0.4",
    "babel-plugin-component": "^1.1.1",
    "babel-plugin-transform-vite-meta-env": "^1.0.3",
    "chalk": "^3.0.0",
    "clean-webpack-plugin": "^0.1.19",
    "copy-webpack-plugin": "^4.5.3",
    "cross-env": "^7.0.3",
    "css-loader": "^1.0.0",
    "dotenv": "^10.0.0",
    "file-loader": "^2.0.0",
    "happypack": "^5.0.1",
    "html-webpack-plugin": "^4.5.2",
    "less": "^3.13.1",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^1.6.2",
    "node-sass": "^4.9.3",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "parallel-webpack": "^2.6.0",
    "postcss-import": "^11.1.0",
    "postcss-loader": "^2.1.6",
    "postcss-url": "^7.3.2",
    "progress-bar-webpack-plugin": "^2.1.0",
    "sass": "^1.49.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.0",
    "thread-loader": "^3.0.4",
    "uglifyjs-webpack-plugin": "^2.0.1",
    "url-loader": "^1.1.1",
    "vite": "2.3.7",
    "vite-plugin-html": "^2.1.1",
    "vite-plugin-imp": "^2.0.11",
    "vite-plugin-pagedata": "^1.0.4",
    "vite-plugin-vue2": "^1.9.0",
    "vue-loader": "^15.4.2",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^4.46.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^3.11.3",
    "webpack-merge": "^4.1.4"
  },
  "dependencies": {
    "axios": "^0.24.0",
    "babel-polyfill": "^6.26.0",
    "canvas": "^2.9.0",
    "classnames": "^2.3.1",
    "deep-lu-trans": "^1.0.5",
    "echarts": "^5.2.2",
    "echarts-liquidfill": "^3.1.0",
    "element-ui": "^2.15.7",
    "enquire.js": "^2.1.6",
    "font-awesome": "^4.7.0",
    "hi-taskcenter": "^1.0.9",
    "hi-ui": "^1.1.1006",
    "html2canvas": "^1.4.1",
    "jquery": "^3.6.0",
    "js-cookie": "^3.0.1",
    "js-md5": "^0.7.3",
    "js-pinyin": "^0.1.9",
    "jspdf": "^2.5.1",
    "lodash": "^4.17.11",
    "qrcodejs2": "0.0.2",
    "screenfull": "^6.0.0",
    "sortablejs": "^1.14.0",
    "v-clipboard": "^2.2.3",
    "vue": "^2.6.14",
    "vue-draggable-resizable": "^2.3.0",
    "vue-gemini-scrollbar": "^2.0.1",
    "vue-i18n": "^8.27.0",
    "vue-jstree": "^2.1.6",
    "vue-qr": "^3.2.4",
    "vue-router": "^3.0.1",
    "vuex": "^3.6.2",
    "xlsx": "^0.18.5",
    "zhc-birt-cmps": "^2.8.14",
    "zhc-birt-core": "^1.9.0",
    "zhc-flowchart": "^1.0.20"
  }
}

{
  "name": "hi-vui-template",
  "version": "1.1.15",
  "description": "A hi-vui-template project",
  "author": "zhcTeam",
  "scripts": {
    "rm:vite": "rimraf node_modules/.vite && rimraf node_modules/.cache",
    "pm2:start": "pm2 start processes.json",
    "dev": "vite --host",
    "def": "vite --host",
    "build": "node build/copyBaseAssets.js && cross-env NODE_ENV=production node build/webpack.prod.conf.js",
    "build:modules": "cross-env NODE_ENV=production node build/webpack.prod.conf.js",
    "build1": "webpack --mode production --config build/webpack.prod.conf.js",
    "dll": "webpack --config build/webpack.dll.conf.js",
    "start": "webpack-dev-server --config build/webpack.dev.conf.js",
    "copyassets": "node build/copyBaseAssets.js"
  },
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
    "@babel/plugin-proposal-optional-chaining": "^7.16.7",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/preset-env": "^7.1.0",
    "@vitejs/plugin-vue-jsx": "^1.3.3",
    "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
    "@vue/babel-preset-jsx": "^1.2.4",
    "add-asset-html-webpack-plugin": "^3.2.0",
    "autoprefixer": "^9.1.5",
    "babel-loader": "^8.0.4",
    "babel-plugin-component": "^1.1.1",
    "babel-plugin-transform-vite-meta-env": "^1.0.3",
    "chalk": "^3.0.0",
    "clean-webpack-plugin": "^0.1.19",
    "copy-webpack-plugin": "^4.5.3",
    "cross-env": "^7.0.3",
    "css-loader": "^1.0.0",
    "dotenv": "^10.0.0",
    "file-loader": "^2.0.0",
    "happypack": "^5.0.1",
    "html-webpack-plugin": "^4.5.2",
    "less": "^3.13.1",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^1.6.2",
    "node-sass": "^4.9.3",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "parallel-webpack": "^2.6.0",
    "postcss-import": "^11.1.0",
    "postcss-loader": "^2.1.6",
    "postcss-url": "^7.3.2",
    "progress-bar-webpack-plugin": "^2.1.0",
    "sass": "^1.49.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.0",
    "thread-loader": "^3.0.4",
    "uglifyjs-webpack-plugin": "^2.0.1",
    "url-loader": "^1.1.1",
    "vite": "2.3.7",
    "vite-plugin-html": "^2.1.1",
    "vite-plugin-imp": "^2.0.11",
    "vite-plugin-pagedata": "^1.0.4",
    "vite-plugin-require-transform": "^1.0.3",
    "vite-plugin-vue2": "^1.9.0",
    "vue-loader": "^15.4.2",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^4.46.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^3.11.3",
    "webpack-merge": "^4.1.4"
  },
  "dependencies": {
    "axios": "^0.24.0",
    "babel-polyfill": "^6.26.0",
    "canvas": "^2.9.0",
    "classnames": "^2.3.1",
    "deep-lu-trans": "^1.0.5",
    "echarts": "^5.2.2",
    "echarts-liquidfill": "^3.1.0",
    "element-ui": "^2.15.7",
    "enquire.js": "^2.1.6",
    "font-awesome": "^4.7.0",
    "hi-taskcenter": "^1.0.9",
    "hi-ui": "^1.1.1006",
    "html2canvas": "^1.4.1",
    "jquery": "^3.6.0",
    "js-cookie": "^3.0.1",
    "js-md5": "^0.7.3",
    "js-pinyin": "^0.1.9",
    "jspdf": "^2.5.1",
    "lodash": "^4.17.11",
    "qrcodejs2": "0.0.2",
    "screenfull": "^6.0.0",
    "sortablejs": "^1.14.0",
    "v-clipboard": "^2.2.3",
    "vue": "^2.6.14",
    "vue-draggable-resizable": "^2.3.0",
    "vue-gemini-scrollbar": "^2.0.1",
    "vue-i18n": "^8.27.0",
    "vue-jstree": "^2.1.6",
    "vue-qr": "^3.2.4",
    "vue-router": "^3.0.1",
    "vuex": "^3.6.2",
    "xlsx": "^0.18.5",
    "zhc-birt-cmps": "^2.8.14",
    "zhc-birt-core": "^1.9.0",
    "zhc-flowchart": "^1.0.20"
  }
}

Ignore Space Show notes View project/hivuiMain/components/tabpanel/drpMenus.jsx
const drpMenus={ name:'PTabitem', props:{ children:[Array] }, data(){ return { menuStyle:{ right:0, left:'auto', top:0, display:'none', overflow:'auto', maxHeight:'50%', opacity:1, // maxWidth:'150px' } } }, mounted(){ document.body.appendChild(this.$el); // document.addEventListener('click',this.hide) }, beforeDestroy(){ this.$el.remove(); // document.removeEventListener('click',this.hide) }, methods:{ show(x,y){ // let w=document.documentElement.offsetWidth; // let el_w = 150; // if(x+el_w>w){ // this.menuStyle.left=(w-el_w)+'px'; // }else{ // this.menuStyle.left=(x\|\|0)+'px'; // } if(y){ this.menuStyle.top=(y\|\|0)+'px'; } this.menuStyle.display='block' }, hide(){ this.menuStyle.display='none' }, onClose(panel,evt){ evt.stopPropagation(); this.$emit('onTabClose',panel.name,evt); // this.hide(); }, onActive(panel,evt){ evt.stopPropagation(); this.$emit('onTabChange',panel,evt) } }, render(h){ const {onClose,onActive,children}=this; const Props={ style:this.menuStyle, on:{ mouseout:()=>{this.hide()}, mouseover:()=>{this.show()} } } return ( <ul class="pl-menus pl-menus-sub pl-menus-pop" {...Props}> { children.map((panel,index)=>{ return ( <li class="pl-menus-item" on-click={(ev) => { onActive(panel, ev); } }> <a class="title" > <span class="txt">{panel.title}</span> {panel.close&&( <i class="trigger iconfont icon-close" on-click={(ev) => { onClose(panel, ev); }}></i> )} </a> </li> ) }) } </ul> ) } } export default drpMenus; const drpMenus={ name:'PTabitem', props:{ children:[Array] }, data(){ return { menuStyle:{ right:0, left:'auto', top:0, display:'none', overflow:'auto', maxHeight:'50%', // maxWidth:'150px' } } }, mounted(){ document.body.appendChild(this.$el); // document.addEventListener('click',this.hide) }, beforeDestroy(){ this.$el.remove(); // document.removeEventListener('click',this.hide) }, methods:{ show(x,y){ // let w=document.documentElement.offsetWidth; // let el_w = 150; // if(x+el_w>w){ // this.menuStyle.left=(w-el_w)+'px'; // }else{ // this.menuStyle.left=(x\|\|0)+'px'; // } if(y){ this.menuStyle.top=(y\|\|0)+'px'; } this.menuStyle.display='block' }, hide(){ this.menuStyle.display='none' }, onClose(panel,evt){ evt.stopPropagation(); this.$emit('onTabClose',panel.name,evt); // this.hide(); }, onActive(panel,evt){ evt.stopPropagation(); this.$emit('onTabChange',panel,evt) } }, render(h){ const {onClose,onActive,children}=this; const Props={ style:this.menuStyle, on:{ mouseout:()=>{this.hide()}, mouseover:()=>{this.show()} } } return ( <ul class="pl-menus pl-menus-sub pl-menus-pop" {...Props}> { children.map((panel,index)=>{ return ( <li class="pl-menus-item" on-click={(ev) => { onActive(panel, ev); } }> <a class="title" > <span class="txt">{panel.title}</span> {panel.close&&( <i class="trigger iconfont icon-close" on-click={(ev) => { onClose(panel, ev); }}></i> )} </a> </li> ) }) } </ul> ) } } export default drpMenus;

Ignore Space Show notes View

project/hivuiMain/components/tabpanel/drpMenus.jsx

export default drpMenus;

export default drpMenus;

Ignore Space Show notes View project/hivuiMain/components/tabpanel/tabs.jsx
import findIndex from 'lodash/findIndex' import Panel from './panel.vue' import TabNav from './tabNav.jsx' import DrpMenus from './drpMenus' const Tabs = { name: 'PTabs', props: { value: {}, hasMoreMenu:{ type:Boolean, default:true }, hasContextMenu:{ type:Boolean, default:true }, isSinglePage:{ type:Boolean, default:false }, }, watch: { value(value) { if(value==this.currentName){ return; } this.setCurrentName(value) }, }, inject:['showTab','hideTab'], data() { return { currentName: this.value \|\| this.activeName, contextMenuKey: null, scrollStep: 115, showScroll: false, panels: [] } }, created() { this.$on('tab-nav-update', this.calcPaneInstances.bind(null, true)); }, mounted() { this.calcPaneInstances(); window.addEventListener('resize',this.resize); }, updated() { this.calcPaneInstances(); }, beforeDestroy() { window.removeEventListener('resize',this.resize); }, methods: { setCurrentName(value) { this.currentName = value; //绑定提是v-model所以这里要加一下，这样可以对 props 传进来的value 进行改变 this.$emit('input', value); this.$nextTick(r=>{ let panel = this.getItem(value); this.$emit('onActiveTab',panel); }); }, calcPaneInstances() { //收集插槽里头的组件实例，以重新渲染 if (this.$slots.default) { const panelslots = this.$slots.default.filter(vnode => vnode.tag && vnode.componentOptions && vnode.componentOptions.Ctor.options.name === 'PTabpanel'); // update indeed const panels = panelslots.map(({ componentInstance }) => componentInstance); const panelsChanged = !(panels.length === this.panels.length && panels.every((pane, index) => pane === this.panels[index])); if (panelsChanged) { this.panels = panels; this.$set(this,'panels',panels) } } else if (this.panels.length !== 0) { this.$set(this,'panels',[]) } }, closeItem(key) { let me = this; me.$emit('onRemoveTab', key); me.resize(); }, closeCurItem() { this.closeItem(this.currentName); }, getItemIndex(name) { let index = findIndex(this.panels, item => { return item.name == name; }); return index; }, getItem(name) { let index = findIndex(this.panels, item => { return item.name == name; }); if (index > -1) { return this.panels[index]; } return null; }, getItemObj(name) { let panel = this.getItem(name); if (panel == null) return null; return { //.$refs['TabNavs'] id:name, uid:name, name:name, tabEl: this.$el.querySelector('#tab_'+name),//null tabPanelEl: panel.$el, tabPanelIframeEl: panel.$el.querySelector('iframe') }; }, getSeldItemObj() { return this.getItemObj(this.currentName); }, resize() { this.$refs['TabNavs'].resize(); // console.log('height', this.$refs['domTabHead'].offsetHeight) // console.log('offsetHeight', this.$el.offsetHeight) this.$refs['domTabHead'].style.display=this.isSinglePage ? "none" : "block"; this.$refs['domTabBody'].style.height = this.$el.offsetHeight - this.$refs['domTabHead'].offsetHeight + 'px'; // console.log('main height', this.$refs['domTabBody'].style.height) let tabScroll = this.$refs['domTabScroll']; this.showScroll = tabScroll.offsetWidth < tabScroll.scrollWidth; }, handleShowDrpMenus(evt) { evt.stopPropagation(); const rects = evt.currentTarget.getClientRects()[0]; this.$refs['cmp-drpMenus'].show(rects.left,rects.top + rects.height); }, handleHideDrpMenus() { this.$refs['cmp-drpMenus'].hide(); }, handleMoreMenuClick(vm, event) { // this.activeKey = vm.$el.getAttribute('alt'); this.resize(); }, handleScrollLt(step) { let el = this.$refs['domTabScroll']; el.scrollLeft = el.scrollLeft - (step \|\| this.scrollStep); }, handleScrollLtMouseDown() { let me = this; me.handleScrollLtMouseUp(); me.scrollPressTimer = setInterval(function () { me.handleScrollLt(10); }, 10); }, handleScrollLtMouseUp() { clearInterval(this.scrollPressTimer); }, handleScrollRt(step) { let el = this.$refs['domTabScroll']; el.scrollLeft = el.scrollLeft + (step \|\| this.scrollStep); }, handleScrollRtMouseDown() { let me = this; me.handleScrollRtMouseUp(); me.scrollPressTimer = setInterval(function () { me.handleScrollRt(10); }, 10); }, handleScrollRtMouseUp() { clearInterval(this.scrollPressTimer); }, handleTabChange(panel) { if(panel.name==this.currentName){ return; } this.setCurrentName(panel.name); }, handleTabClose(name) { this.closeItem(name); }, handleTabCloseAll(){ this.$emit('onRemoveAllTab'); this.resize(); }, handleTabCloseLt(name,index){ this.$emit('onRemoveLeft',name,index); this.resize(); }, handleTabCloseRt(name,index){ this.$emit('onRemoveRight',name,index); this.resize(); }, handleTabCloseOt(name,index){ this.$emit('onRemoveOther',name,index); this.resize(); }, handleFullScreen(){ this.$emit('onFullScreen') } }, render(h) { let {hasMoreMenu,hasContextMenu}=this; let children = this.panels; let headStyle={ style:{ display: this.isSinglePage ? "none" : "block" } } let navData={ props:{ panels:children, hasContextMenu:hasContextMenu }, on:{ onTabChange: this.handleTabChange, onTabClose: this.handleTabClose, onTabCloseAll: this.handleTabCloseAll, onTabCloseLt:this.handleTabCloseLt, onTabCloseRt:this.handleTabCloseRt, onTabCloseOt:this.handleTabCloseOt, onFullScreen:this.handleFullScreen }, ref:'domTabSrcollInner' }; let scrollLtBtn = { style: { display: this.showScroll ? 'inline-block' : 'none' }, on: { //click:this.handleScrollLt, mousedown: this.handleScrollLtMouseDown, mouseup: this.handleScrollLtMouseUp, mouseleave:this.handleScrollLtMouseUp, } }, scrollRtBtn = { style: { display: this.showScroll ? 'inline-block' : 'none' }, on: { //click:this.handleScrollRt, mousedown: this.handleScrollRtMouseDown, mouseup: this.handleScrollRtMouseUp, mouseleave:this.handleScrollRtMouseUp, } }, moreBtn = { on: { mouseover: this.handleShowDrpMenus, mouseout: this.handleHideDrpMenus } }, drpMenus = { props: { children: children }, on: { click: this.handleMoreMenuClick, onTabChange: this.handleTabChange, onTabClose: this.handleTabClose } }, hideSty = { on: { mouseout: this.showTab, mouseover: this.hideTab } }; return ( <div class="pl-tabs"> <div class="pl-tabs-hd" ref='domTabHead' {...headStyle}> <div class="pl-tabs-tool" ref='domTabTool'> <div class="item" title='左边滚动' ref='domTabScrollLt' {...scrollLtBtn}> <i class="iconfont icon-arrow-left"></i> </div> <div class="item" title='右边滚动' ref='domTabScrollRt' {...scrollRtBtn}> <i class="iconfont icon-arrow-right"></i> </div> { hasMoreMenu&&( <div class="item" title='更多' ref='domTabScrollMore' {...moreBtn} > <i class="iconfont icon-arrow-down"></i> <DrpMenus ref="cmp-drpMenus" {...drpMenus}></DrpMenus> </div> ) } </div> <div class="pl-tabs-scroll" ref='domTabScroll'> <TabNav {...navData} ref='TabNavs'></TabNav> </div> </div> <div class="pl-tabpanel-bd" ref='domTabBody' {...hideSty}> {this.$slots.default} </div> </div> ) } } export default Tabs; import findIndex from 'lodash/findIndex' import Panel from './panel.vue' import TabNav from './tabNav.jsx' import DrpMenus from './drpMenus' const Tabs = { name: 'PTabs', props: { value: {}, hasMoreMenu:{ type:Boolean, default:true }, hasContextMenu:{ type:Boolean, default:true }, isSinglePage:{ type:Boolean, default:false }, }, watch: { value(value) { if(value==this.currentName){ return; } this.setCurrentName(value) }, }, inject:['showTab','hideTab'], data() { return { currentName: this.value \|\| this.activeName, contextMenuKey: null, scrollStep: 115, showScroll: false, panels: [] } }, created() { this.$on('tab-nav-update', this.calcPaneInstances.bind(null, true)); }, mounted() { this.calcPaneInstances(); window.addEventListener('resize',this.resize); }, updated() { this.calcPaneInstances(); }, beforeDestroy() { window.removeEventListener('resize',this.resize); }, methods: { setCurrentName(value) { this.currentName = value; //绑定提是v-model所以这里要加一下，这样可以对 props 传进来的value 进行改变 this.$emit('input', value); this.$nextTick(r=>{ let panel = this.getItem(value); this.$emit('onActiveTab',panel); }); }, calcPaneInstances() { //收集插槽里头的组件实例，以重新渲染 if (this.$slots.default) { const panelslots = this.$slots.default.filter(vnode => vnode.tag && vnode.componentOptions && vnode.componentOptions.Ctor.options.name === 'PTabpanel'); // update indeed const panels = panelslots.map(({ componentInstance }) => componentInstance); const panelsChanged = !(panels.length === this.panels.length && panels.every((pane, index) => pane === this.panels[index])); if (panelsChanged) { this.panels = panels; this.$set(this,'panels',panels) } } else if (this.panels.length !== 0) { this.$set(this,'panels',[]) } }, closeItem(key) { let me = this; me.$emit('onRemoveTab', key); me.resize(); }, closeCurItem() { this.closeItem(this.currentName); }, getItemIndex(name) { let index = findIndex(this.panels, item => { return item.name == name; }); return index; }, getItem(name) { let index = findIndex(this.panels, item => { return item.name == name; }); if (index > -1) { return this.panels[index]; } return null; }, getItemObj(name) { let panel = this.getItem(name); if (panel == null) return null; return { //.$refs['TabNavs'] id:name, uid:name, name:name, tabEl: this.$el.querySelector('#tab_'+name),//null tabPanelEl: panel.$el, tabPanelIframeEl: panel.$el.querySelector('iframe') }; }, getSeldItemObj() { return this.getItemObj(this.currentName); }, resize() { this.$refs['TabNavs'].resize(); // console.log('height', this.$refs['domTabHead'].offsetHeight) // console.log('offsetHeight', this.$el.offsetHeight) this.$refs['domTabHead'].style.display=this.isSinglePage ? "none" : "block"; this.$refs['domTabBody'].style.height = this.$el.offsetHeight - this.$refs['domTabHead'].offsetHeight + 'px'; // console.log('main height', this.$refs['domTabBody'].style.height) let tabScroll = this.$refs['domTabScroll']; this.showScroll = tabScroll.offsetWidth < tabScroll.scrollWidth; }, handleShowDrpMenus(evt) { evt.stopPropagation(); const rects = evt.currentTarget.getClientRects()[0]; this.$refs['cmp-drpMenus'].show(rects.left,rects.top + rects.height); }, handleHideDrpMenus() { this.$refs['cmp-drpMenus'].hide(); }, handleMoreMenuClick(vm, event) { // this.activeKey = vm.$el.getAttribute('alt'); this.resize(); }, handleScrollLt(step) { let el = this.$refs['domTabScroll']; el.scrollLeft = el.scrollLeft - (step \|\| this.scrollStep); }, handleScrollLtMouseDown() { let me = this; me.scrollPressTimer = setInterval(function () { me.handleScrollLt(10); }, 10); }, handleScrollLtMouseUp() { clearInterval(this.scrollPressTimer); }, handleScrollRt(step) { let el = this.$refs['domTabScroll']; el.scrollLeft = el.scrollLeft + (step \|\| this.scrollStep); }, handleScrollRtMouseDown() { let me = this; me.scrollPressTimer = setInterval(function () { me.handleScrollRt(10); }, 10); }, handleScrollRtMouseUp() { clearInterval(this.scrollPressTimer); }, handleTabChange(panel) { if(panel.name==this.currentName){ return; } this.setCurrentName(panel.name); }, handleTabClose(name) { this.closeItem(name); }, handleTabCloseAll(){ this.$emit('onRemoveAllTab'); this.resize(); }, handleTabCloseLt(name,index){ this.$emit('onRemoveLeft',name,index); this.resize(); }, handleTabCloseRt(name,index){ this.$emit('onRemoveRight',name,index); this.resize(); }, handleTabCloseOt(name,index){ this.$emit('onRemoveOther',name,index); this.resize(); }, handleFullScreen(){ this.$emit('onFullScreen') } }, render(h) { let {hasMoreMenu,hasContextMenu}=this; let children = this.panels; let headStyle={ style:{ display: this.isSinglePage ? "none" : "block" } } let navData={ props:{ panels:children, hasContextMenu:hasContextMenu }, on:{ onTabChange: this.handleTabChange, onTabClose: this.handleTabClose, onTabCloseAll: this.handleTabCloseAll, onTabCloseLt:this.handleTabCloseLt, onTabCloseRt:this.handleTabCloseRt, onTabCloseOt:this.handleTabCloseOt, onFullScreen:this.handleFullScreen }, ref:'domTabSrcollInner' }; let scrollLtBtn = { style: { display: this.showScroll ? 'inline-block' : 'none' }, on: { //click:this.handleScrollLt, mousedown: this.handleScrollLtMouseDown, mouseup: this.handleScrollLtMouseUp, } }, scrollRtBtn = { style: { display: this.showScroll ? 'inline-block' : 'none' }, on: { //click:this.handleScrollRt, mousedown: this.handleScrollRtMouseDown, mouseup: this.handleScrollRtMouseUp, } }, moreBtn = { on: { mouseover: this.handleShowDrpMenus, mouseout: this.handleHideDrpMenus } }, drpMenus = { props: { children: children }, on: { click: this.handleMoreMenuClick, onTabChange: this.handleTabChange, onTabClose: this.handleTabClose } }, hideSty = { on: { mouseout: this.showTab, mouseover: this.hideTab } }; return ( <div class="pl-tabs"> <div class="pl-tabs-hd" ref='domTabHead' {...headStyle}> <div class="pl-tabs-tool" ref='domTabTool'> <div class="item" title='左边滚动' ref='domTabScrollLt' {...scrollLtBtn}> <i class="iconfont icon-arrow-left"></i> </div> <div class="item" title='右边滚动' ref='domTabScrollRt' {...scrollRtBtn}> <i class="iconfont icon-arrow-right"></i> </div> { hasMoreMenu&&( <div class="item" title='更多' ref='domTabScrollMore' {...moreBtn} > <i class="iconfont icon-arrow-down"></i> <DrpMenus ref="cmp-drpMenus" {...drpMenus}></DrpMenus> </div> ) } </div> <div class="pl-tabs-scroll" ref='domTabScroll'> <TabNav {...navData} ref='TabNavs'></TabNav> </div> </div> <div class="pl-tabpanel-bd" ref='domTabBody' {...hideSty}> {this.$slots.default} </div> </div> ) } } export default Tabs;

Ignore Space Show notes View

project/hivuiMain/components/tabpanel/tabs.jsx

import findIndex from 'lodash/findIndex'
import Panel from './panel.vue'
import TabNav from './tabNav.jsx'
import DrpMenus from './drpMenus'
const Tabs = {
    name: 'PTabs',
    props: {
        value: {},
        hasMoreMenu:{
            type:Boolean,
            default:true
        },
        hasContextMenu:{
            type:Boolean,
            default:true
        },
        isSinglePage:{
            type:Boolean,
            default:false
        },
    },
    watch: {
        value(value) {
            if(value==this.currentName){
                return;
            }
            this.setCurrentName(value)
        },
    },
    inject:['showTab','hideTab'],
    data() {
        return {
            currentName: this.value || this.activeName,
            contextMenuKey: null,
            scrollStep: 115,
            showScroll: false,
            panels: []
        }
    },
    created() {
        this.$on('tab-nav-update', this.calcPaneInstances.bind(null, true));
    },
    mounted() {
        this.calcPaneInstances();
        window.addEventListener('resize',this.resize);
    },
    updated() {
        this.calcPaneInstances();
    },
    beforeDestroy() {
        window.removeEventListener('resize',this.resize);
    },
    methods: {
        setCurrentName(value) {
            this.currentName = value;  
            //绑定提是v-model所以这里要加一下，这样可以对 props 传进来的value 进行改变          
            this.$emit('input', value);
            this.$nextTick(r=>{
                let panel = this.getItem(value);
                this.$emit('onActiveTab',panel);
            });  
        },
        calcPaneInstances() {
            //收集插槽里头的组件实例，以重新渲染
            if (this.$slots.default) {
                const panelslots = this.$slots.default.filter(vnode => vnode.tag &&
                    vnode.componentOptions && vnode.componentOptions.Ctor.options.name === 'PTabpanel');
                // update indeed
                const panels = panelslots.map(({ componentInstance }) => componentInstance);
                const panelsChanged = !(panels.length === this.panels.length && panels.every((pane, index) => pane === this.panels[index]));
                if (panelsChanged) {
                    this.panels = panels;
                    this.$set(this,'panels',panels)
                }
            } else if (this.panels.length !== 0) {
                this.$set(this,'panels',[])
            }
        },
        closeItem(key) {
            let me = this;
            me.$emit('onRemoveTab', key);
            me.resize();
        },
        closeCurItem() {
            this.closeItem(this.currentName);
        },
        getItemIndex(name) {
            let index = findIndex(this.panels, item => {
                return item.name == name;
            });
            return index;
        },
        getItem(name) {
            let index = findIndex(this.panels, item => {
                return item.name == name;
            });
            if (index > -1) {
                return this.panels[index];
            }
            return null;
        },
        getItemObj(name) {
            let panel = this.getItem(name);
            if (panel == null) return null; 
            return {   
                //.$refs['TabNavs']
                id:name,
                uid:name,
                name:name,
                tabEl: this.$el.querySelector('#tab_'+name),//null
                tabPanelEl: panel.$el,
                tabPanelIframeEl: panel.$el.querySelector('iframe')
            };
        },
        getSeldItemObj() {
            return this.getItemObj(this.currentName);
        },
        resize() {
            this.$refs['TabNavs'].resize();
            // console.log('height', this.$refs['domTabHead'].offsetHeight)
            // console.log('offsetHeight', this.$el.offsetHeight)
            this.$refs['domTabHead'].style.display=this.isSinglePage ? "none" : "block";
            this.$refs['domTabBody'].style.height = this.$el.offsetHeight - this.$refs['domTabHead'].offsetHeight + 'px';
            // console.log('main height', this.$refs['domTabBody'].style.height)
            let tabScroll = this.$refs['domTabScroll'];
            this.showScroll = tabScroll.offsetWidth < tabScroll.scrollWidth;
        },
        handleShowDrpMenus(evt) {
            evt.stopPropagation();
            const rects = evt.currentTarget.getClientRects()[0];
            this.$refs['cmp-drpMenus'].show(rects.left,rects.top + rects.height);
        },
        handleHideDrpMenus() {
            this.$refs['cmp-drpMenus'].hide();
        },
        handleMoreMenuClick(vm, event) {
            // this.activeKey = vm.$el.getAttribute('alt');
            this.resize();
        },
        handleScrollLt(step) {
            let el = this.$refs['domTabScroll'];
            el.scrollLeft = el.scrollLeft - (step || this.scrollStep);
        },
        handleScrollLtMouseDown() {
            let me = this;
            me.handleScrollLtMouseUp();
            me.scrollPressTimer = setInterval(function () {
                me.handleScrollLt(10);
            }, 10);
        },
        handleScrollLtMouseUp() {
            clearInterval(this.scrollPressTimer);
        },
        handleScrollRt(step) {
            let el = this.$refs['domTabScroll'];
            el.scrollLeft = el.scrollLeft + (step || this.scrollStep);
        },
        handleScrollRtMouseDown() {
            let me = this;
            me.handleScrollRtMouseUp();
            me.scrollPressTimer = setInterval(function () {
                me.handleScrollRt(10);
            }, 10);
        },
        handleScrollRtMouseUp() {
            clearInterval(this.scrollPressTimer);
        },
        handleTabChange(panel) {
            if(panel.name==this.currentName){
                return;
            }
            this.setCurrentName(panel.name);
                      
        },
        handleTabClose(name) {
            this.closeItem(name);
        },
        handleTabCloseAll(){
            this.$emit('onRemoveAllTab');
            this.resize();
        },
        handleTabCloseLt(name,index){
            this.$emit('onRemoveLeft',name,index);
            this.resize();
        },
        handleTabCloseRt(name,index){
            this.$emit('onRemoveRight',name,index);
            this.resize();
        },
        handleTabCloseOt(name,index){
            this.$emit('onRemoveOther',name,index);
            this.resize();
        },
        handleFullScreen(){
            this.$emit('onFullScreen')
        }
    },
    render(h) {
        let {hasMoreMenu,hasContextMenu}=this;
        let children = this.panels;
        let headStyle={
            style:{
                display: this.isSinglePage ? "none" : "block"
            }
        }
        let navData={
            props:{
                panels:children,
                hasContextMenu:hasContextMenu
            },
            on:{
                onTabChange: this.handleTabChange,
                onTabClose: this.handleTabClose,
                onTabCloseAll: this.handleTabCloseAll,
                onTabCloseLt:this.handleTabCloseLt,
                onTabCloseRt:this.handleTabCloseRt,
                onTabCloseOt:this.handleTabCloseOt,
                onFullScreen:this.handleFullScreen
            },
            ref:'domTabSrcollInner'
        };
        let scrollLtBtn = {
            style: {
                display: this.showScroll ? 'inline-block' : 'none'
            },
            on: {
                //click:this.handleScrollLt,
                mousedown: this.handleScrollLtMouseDown,
                mouseup: this.handleScrollLtMouseUp,
                mouseleave:this.handleScrollLtMouseUp,
            }
        }, scrollRtBtn = {
            style: {
                display: this.showScroll ? 'inline-block' : 'none'
            },
            on: {
                //click:this.handleScrollRt,
                mousedown: this.handleScrollRtMouseDown,
                mouseup: this.handleScrollRtMouseUp,
                mouseleave:this.handleScrollRtMouseUp,
            }
        }, moreBtn = {
            on: {
                mouseover: this.handleShowDrpMenus,
                mouseout: this.handleHideDrpMenus
            }
        }, drpMenus = {
            props: {
                children: children
            },
            on: {
                click: this.handleMoreMenuClick,
                onTabChange: this.handleTabChange,
                onTabClose: this.handleTabClose
            }
        }, hideSty = {
            on: {
                mouseout: this.showTab,
                mouseover: this.hideTab
            }
        };
        return (
            <div class="pl-tabs">
                <div class="pl-tabs-hd" ref='domTabHead' {...headStyle}>
                    <div class="pl-tabs-tool" ref='domTabTool'>
                        <div class="item" title='左边滚动' ref='domTabScrollLt' {...scrollLtBtn}>
                            <i class="iconfont icon-arrow-left"></i>
                        </div>
                        <div class="item" title='右边滚动' ref='domTabScrollRt' {...scrollRtBtn}>
                            <i class="iconfont icon-arrow-right"></i>
                        </div>
                        {
                            hasMoreMenu&&(
                                <div class="item" title='更多' ref='domTabScrollMore' {...moreBtn} >
                                    <i class="iconfont icon-arrow-down"></i>
                                    <DrpMenus ref="cmp-drpMenus" {...drpMenus}></DrpMenus>
                                </div>
                            )
                        }
                        
                    </div>
                    <div class="pl-tabs-scroll" ref='domTabScroll'>
                        <TabNav {...navData} ref='TabNavs'></TabNav>
                    </div>
                </div>
                <div class="pl-tabpanel-bd" ref='domTabBody' {...hideSty}>
                    {this.$slots.default}
                </div>
            </div>
        )
    }
}

export default Tabs;

import findIndex from 'lodash/findIndex'
import Panel from './panel.vue'
import TabNav from './tabNav.jsx'
import DrpMenus from './drpMenus'
const Tabs = {
    name: 'PTabs',
    props: {
        value: {},
        hasMoreMenu:{
            type:Boolean,
            default:true
        },
        hasContextMenu:{
            type:Boolean,
            default:true
        },
        isSinglePage:{
            type:Boolean,
            default:false
        },
    },
    watch: {
        value(value) {
            if(value==this.currentName){
                return;
            }
            this.setCurrentName(value)
        },
    },
    inject:['showTab','hideTab'],
    data() {
        return {
            currentName: this.value || this.activeName,
            contextMenuKey: null,
            scrollStep: 115,
            showScroll: false,
            panels: []
        }
    },
    created() {
        this.$on('tab-nav-update', this.calcPaneInstances.bind(null, true));
    },
    mounted() {
        this.calcPaneInstances();
        window.addEventListener('resize',this.resize);
    },
    updated() {
        this.calcPaneInstances();
    },
    beforeDestroy() {
        window.removeEventListener('resize',this.resize);
    },
    methods: {
        setCurrentName(value) {
            this.currentName = value;  
            //绑定提是v-model所以这里要加一下，这样可以对 props 传进来的value 进行改变          
            this.$emit('input', value);
            this.$nextTick(r=>{
                let panel = this.getItem(value);
                this.$emit('onActiveTab',panel);
            });  
        },
        calcPaneInstances() {
            //收集插槽里头的组件实例，以重新渲染
            if (this.$slots.default) {
                const panelslots = this.$slots.default.filter(vnode => vnode.tag &&
                    vnode.componentOptions && vnode.componentOptions.Ctor.options.name === 'PTabpanel');
                // update indeed
                const panels = panelslots.map(({ componentInstance }) => componentInstance);
                const panelsChanged = !(panels.length === this.panels.length && panels.every((pane, index) => pane === this.panels[index]));
                if (panelsChanged) {
                    this.panels = panels;
                    this.$set(this,'panels',panels)
                }
            } else if (this.panels.length !== 0) {
                this.$set(this,'panels',[])
            }
        },
        closeItem(key) {
            let me = this;
            me.$emit('onRemoveTab', key);
            me.resize();
        },
        closeCurItem() {
            this.closeItem(this.currentName);
        },
        getItemIndex(name) {
            let index = findIndex(this.panels, item => {
                return item.name == name;
            });
            return index;
        },
        getItem(name) {
            let index = findIndex(this.panels, item => {
                return item.name == name;
            });
            if (index > -1) {
                return this.panels[index];
            }
            return null;
        },
        getItemObj(name) {
            let panel = this.getItem(name);
            if (panel == null) return null; 
            return {   
                //.$refs['TabNavs']
                id:name,
                uid:name,
                name:name,
                tabEl: this.$el.querySelector('#tab_'+name),//null
                tabPanelEl: panel.$el,
                tabPanelIframeEl: panel.$el.querySelector('iframe')
            };
        },
        getSeldItemObj() {
            return this.getItemObj(this.currentName);
        },
        resize() {
            this.$refs['TabNavs'].resize();
            // console.log('height', this.$refs['domTabHead'].offsetHeight)
            // console.log('offsetHeight', this.$el.offsetHeight)
            this.$refs['domTabHead'].style.display=this.isSinglePage ? "none" : "block";
            this.$refs['domTabBody'].style.height = this.$el.offsetHeight - this.$refs['domTabHead'].offsetHeight + 'px';
            // console.log('main height', this.$refs['domTabBody'].style.height)
            let tabScroll = this.$refs['domTabScroll'];
            this.showScroll = tabScroll.offsetWidth < tabScroll.scrollWidth;
        },
        handleShowDrpMenus(evt) {
            evt.stopPropagation();
            const rects = evt.currentTarget.getClientRects()[0];
            this.$refs['cmp-drpMenus'].show(rects.left,rects.top + rects.height);
        },
        handleHideDrpMenus() {
            this.$refs['cmp-drpMenus'].hide();
        },
        handleMoreMenuClick(vm, event) {
            // this.activeKey = vm.$el.getAttribute('alt');
            this.resize();
        },
        handleScrollLt(step) {
            let el = this.$refs['domTabScroll'];
            el.scrollLeft = el.scrollLeft - (step || this.scrollStep);
        },
        handleScrollLtMouseDown() {
            let me = this;
            me.scrollPressTimer = setInterval(function () {
                me.handleScrollLt(10);
            }, 10);
        },
        handleScrollLtMouseUp() {
            clearInterval(this.scrollPressTimer);
        },
        handleScrollRt(step) {
            let el = this.$refs['domTabScroll'];
            el.scrollLeft = el.scrollLeft + (step || this.scrollStep);
        },
        handleScrollRtMouseDown() {
            let me = this;
            me.scrollPressTimer = setInterval(function () {
                me.handleScrollRt(10);
            }, 10);
        },
        handleScrollRtMouseUp() {
            clearInterval(this.scrollPressTimer);
        },
        handleTabChange(panel) {
            if(panel.name==this.currentName){
                return;
            }
            this.setCurrentName(panel.name);
                      
        },
        handleTabClose(name) {
            this.closeItem(name);
        },
        handleTabCloseAll(){
            this.$emit('onRemoveAllTab');
            this.resize();
        },
        handleTabCloseLt(name,index){
            this.$emit('onRemoveLeft',name,index);
            this.resize();
        },
        handleTabCloseRt(name,index){
            this.$emit('onRemoveRight',name,index);
            this.resize();
        },
        handleTabCloseOt(name,index){
            this.$emit('onRemoveOther',name,index);
            this.resize();
        },
        handleFullScreen(){
            this.$emit('onFullScreen')
        }
    },
    render(h) {
        let {hasMoreMenu,hasContextMenu}=this;
        let children = this.panels;
        let headStyle={
            style:{
                display: this.isSinglePage ? "none" : "block"
            }
        }
        let navData={
            props:{
                panels:children,
                hasContextMenu:hasContextMenu
            },
            on:{
                onTabChange: this.handleTabChange,
                onTabClose: this.handleTabClose,
                onTabCloseAll: this.handleTabCloseAll,
                onTabCloseLt:this.handleTabCloseLt,
                onTabCloseRt:this.handleTabCloseRt,
                onTabCloseOt:this.handleTabCloseOt,
                onFullScreen:this.handleFullScreen
            },
            ref:'domTabSrcollInner'
        };
        let scrollLtBtn = {
            style: {
                display: this.showScroll ? 'inline-block' : 'none'
            },
            on: {
                //click:this.handleScrollLt,
                mousedown: this.handleScrollLtMouseDown,
                mouseup: this.handleScrollLtMouseUp,
            }
        }, scrollRtBtn = {
            style: {
                display: this.showScroll ? 'inline-block' : 'none'
            },
            on: {
                //click:this.handleScrollRt,
                mousedown: this.handleScrollRtMouseDown,
                mouseup: this.handleScrollRtMouseUp,
            }
        }, moreBtn = {
            on: {
                mouseover: this.handleShowDrpMenus,
                mouseout: this.handleHideDrpMenus
            }
        }, drpMenus = {
            props: {
                children: children
            },
            on: {
                click: this.handleMoreMenuClick,
                onTabChange: this.handleTabChange,
                onTabClose: this.handleTabClose
            }
        }, hideSty = {
            on: {
                mouseout: this.showTab,
                mouseover: this.hideTab
            }
        };
        return (
            <div class="pl-tabs">
                <div class="pl-tabs-hd" ref='domTabHead' {...headStyle}>
                    <div class="pl-tabs-tool" ref='domTabTool'>
                        <div class="item" title='左边滚动' ref='domTabScrollLt' {...scrollLtBtn}>
                            <i class="iconfont icon-arrow-left"></i>
                        </div>
                        <div class="item" title='右边滚动' ref='domTabScrollRt' {...scrollRtBtn}>
                            <i class="iconfont icon-arrow-right"></i>
                        </div>
                        {
                            hasMoreMenu&&(
                                <div class="item" title='更多' ref='domTabScrollMore' {...moreBtn} >
                                    <i class="iconfont icon-arrow-down"></i>
                                    <DrpMenus ref="cmp-drpMenus" {...drpMenus}></DrpMenus>
                                </div>
                            )
                        }
                        
                    </div>
                    <div class="pl-tabs-scroll" ref='domTabScroll'>
                        <TabNav {...navData} ref='TabNavs'></TabNav>
                    </div>
                </div>
                <div class="pl-tabpanel-bd" ref='domTabBody' {...hideSty}>
                    {this.$slots.default}
                </div>
            </div>
        )
    }
}

export default Tabs;

Ignore Space Show notes View project/hivuiMain/views/layout/components/Header.vue
<template> <div class="pl-header " :data-layout="layout"> <ul class="ltArea"> <li v-if="layout=='level'" class="logoStyle"> <div class="pl-logo" :style="{width: sideWidth}"> <div v-if="hasTitle" @click="hideTitle(false)"> <img :src="def_sy_logo_horizon" :width="sideWidth" v-if="logoSrc==''"> <img :src="logoSrc" :width="sideWidth" v-if="logoSrc!=''"> </div> <div v-else @click="hideTitle(true)"> <img :src="def_sy_minLogo" v-if="MlogoSrc==''"> <img :src="MlogoSrc" :width="sideWidth" v-if="MlogoSrc!=''"> </div> </div> </li> <li v-else> <div :style="{width: sideWidth}" class="pl-logo"> <img :src="def_sy_logo" :width="sideWidth" v-if="logoSrc==''"> <img :src="logoSrc" :width="sideWidth" v-if="logoSrc!=''"> </div> </li> <li v-if="sysList.length"> <div class="sysTrigger" ref='dom-sysList' @mouseover="handleShowSysList" @mouseout="handleHideSysList"> <span>{{$lang("projectManage")\|\|"项目管理"}}</span> <i class="iconfont icon-change"></i> </div> <ul class="pl-menus pl-menus-sub pl-menus-pop" @mouseenter="handleShowSysList" @mouseleave="handleHideSysList" :style="sysListStyle" v-add2Body> <li class="pl-menus-item" v-for="item,index in sysList" @click="handleChangeSys(item)"> <a class="title"><span class="txt">{{item.title}}111</span></a> </li> </ul> </li> <li v-if="layout == 'level'" > <div class="sysTrigger" 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> <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> </li> <li v-if="layout == 'level'&&showAllFuncBtn" > <div class="sysTrigger"> <span ref="allFuncBtn" class="title" @mouseenter="allFuncTriggerOpen" @mouseleave="allFuncTriggerClose">{{$lang('allFunction')\|\|'全部功能'}}</span> <i class="icon iconfont icon-arrow-down"></i> <allFuncMenu ref="allFuncMenu" :triggerObj="allFuncBtnObj" v-add2Body></allFuncMenu> </div> </li> </ul> <ul class="rtArea"> <li> <div class="pl-search" ref="dom-searchBox" > <input ref="dom-seachTxt" class="pl-search-text" type="text" :placeholder="$lang('searchKey')\|\|'搜索关键字'" v-model.trim="searchWord" @keyup="handleSeachKeyUp" /> <i class="iconfont icon-search"></i> </div> <ul class="pl-menus pl-menus-sub pl-menus-pop" :style="searchMenusStyle" v-add2Body> <li :class="['pl-menus-item',seldIndex==index?'pl-menus-itemSeld':'']" v-for="item,index in searchList" style="width:100%" @click="openFunc(item)"> <a class="title"><span class="txt" v-html="item.html\|\|item.name"></span></a> </li> <li v-show="searchList.length==0&&searchWord.length>0" class="pl-menus-tips"> {{$lang("noData")\|\|"暂无数据"}} </li> </ul> </li> <li v-if="sysProjectManage"> <a :href="sysProjectManage.url" target='_blank' class="item" :title="sysProjectManage.name"> <i class="iconfont" :class="sysProjectManage.iconClass"></i> <span class="title">{{sysProjectManage.name}}</span> </a> </li> <template v-for="item in sysFuncMenus"> <li v-if="item.type!='split'"> <template v-if="item.type=='withNumTips'"> <div class="item" @click.prevent="handleFuncMenus(item,$event)"> <div class="tip"> <i class="iconfont" :class="item.iconClass"></i> </div> <span class="title" v-html="item.html\|\|item.name"></span> <span class="pl-head-tipsNum" :hidden="!(item.tipNum&&item.tipNum!=0)">{{item.tipNum}}</span> </div> </template> <template v-else> <template v-if="item.children&&item.children.length"> <div class="item" @mouseenter="handleFuncMenus(item,$event)"> <div class="tip"> <i class="iconfont" :class="item.iconClass"></i> </div> <span class="title" v-html="item.html\|\|item.name"></span> <i class="iconfont icon-arrow-down" v-if="item.children"></i> </div> </template> <template v-if="!item.children\|\|item.children&&item.children.length==0"> <div class="item" @click.prevent="handleFuncMenus(item,$event)"> <div class="tip"> <i class="iconfont" :class="item.iconClass"></i> </div> <span class="title" v-html="item.html\|\|item.name"></span> <i class="iconfont icon-arrow-down" v-if="item.children"></i> </div> </template> </template> </li> <li v-if="item.type=='split'"><div class="line"></div></li> </template> <!-- <li> <div class="item"> <div class="tip"> <i class="iconfont icon-user"></i> </div> <span class="title">{{this.$store.getters.userId}}/{{this.$store.getters.userName}}</span> <i class="iconfont icon-arrow-down"></i> </div> </li> <li><div class="line"></div></li> --> <!-- 用户信息 --> <li> <template v-if="sysUserInfo.children&&sysUserInfo.children.length"> <div class="item" @mouseenter="handleFuncMenus(sysUserInfo,$event)"> <div class="tip"> <i class="iconfont" :class="sysUserInfo.iconClass"></i> </div> <span class="title" v-html="sysUserInfo.html\|\|sysUserInfo.name"></span> <i class="iconfont icon-arrow-down" v-if="sysUserInfo.children"></i> </div> </template> </li> <li><div class="line"></div></li> <li v-if="hasSetting"> <div class="item" :title="$lang('customWorkbench')\|\|'自定义工作台'"> <a href="#design" target='_blank'><i class="iconfont icon-set-fill"></i></a> </div> </li> <li> <div class="item" :title="$lang('logout')\|\|'退出系统'"> <a @click="handleLogout"><i class="iconfont icon-tuichu"></i></a> </div> </li> </ul> <vueContextMenu ref="cmp-funcMenu" :menu-items="menuItems" field="name"></vueContextMenu> <modifyPw></modifyPw> </div> </template> <script> import pinyin from 'js-pinyin';//ie 下有问题编译不过 import vueContextMenu from "@main/components/contextMenu"; import modifyPw from "@main/views/layout/components/modifyPw"; import allFuncMenu from './allFuncMenu' import {changeBz} from "@main/api/user"; import { removeToken } from '@main/utils/auth' import def_sy_loading from "@main/assets/logo_max.png" import def_sy_minLogo from "@main/assets/logo_min.png" import def_sy_logo from "@main/assets/logo.png" import def_sy_logo_horizon from "@main/assets/logo_horizon.png" export default { components:{ vueContextMenu, modifyPw, allFuncMenu, }, inject:['addTab','showTab','hideTab'], props:{ hasTitle:{ type: Boolean, }, sideWidth:{ type: String, } }, data(){ return { menuItems:[], searchWord:"", searchList:[], seldIndex:0, menuShow:false, searchMenusStyle:{ display:'none', left:0, top:0, width:0, // maxHeight:'50%', // overflow:'auto' }, sysListStyle:{ display:'none', left:0, top:0, }, latelyUseStyle:{ display:'none', left:0, top:0, maxHeight:'50%', overflow:'auto' }, def_sy_minLogo:def_sy_minLogo, def_sy_logo:def_sy_logo, def_sy_logo_horizon:def_sy_logo_horizon, numTipTimer:null, showAllFuncBtn:window.customSysCofig.isShowAllFunc, isShowAllFuncMenu:false, allFuncBtnObj:{}, } }, computed:{ hasSetting(){ let cfg = this.$store.state.app.config\|\|{}; return cfg.sysSetTabs&&cfg.sysSetTabs.length; }, sysList(){ let cfg = this.$store.state.app.config\|\|{}; return cfg.sysList\|\|[]; }, sysUserInfo(){ let me=this; let cfg = this.$store.state.app.config\|\|{}; function replaceData(str){ if(!str)return ['',false]; var _arr=str.match(/\${(\S?)}/g); var nullNum=0; if(_arr&&_arr.length>0){ for(let i of _arr){ var _data=me.userInfo[i.match(/\${(\S)}/)[1]]; if(typeof(_data)!="undefined"){ str=str.replace(i,_data); }else{ str=str.replace(i,"空"); nullNum++; } } return [str,nullNum==_arr.length?false:true]; } return [str,true]; } let _userInfo=cfg.userInfo; if(_userInfo){ _userInfo.name=replaceData(_userInfo.name)[0]; if(_userInfo.children&&_userInfo.children.length>0){ _userInfo.children=_userInfo.children.filter((item)=>{ let _rData=replaceData(item.name); item.name=_rData[0]; switch(item.type){ case "modifyUserInfo": item.handler=me.modifyUserInfo; break; case "modifyPw": item.handler=me.modifyPw; break; case "orgBz": if(Array.isArray(me.bzList)&&me.bzList.length>1){ item.children=[]; for(let i of me.bzList){ item.children.push({ iconClass:'icon-user', name:`${i.fbzname}/${i.fbzid}`, handler:function(){ me.__changeOrgBz(`${i.fbzid}`); } }); } } break; } if(_rData[1]){ return item; } }); } } return _userInfo\|\|[]; }, sysProjectManage(){ let cfg = this.$store.state.app.config\|\|{}; let item = cfg.sysProjectMange\|\|{},flag=false; this.$store.state.app.powerList.forEach(p=>{ if(p.resUrl.indexOf(item.uri)>-1){ flag = true; return true; } }); if(flag){ return cfg.sysProjectMange; }else{ return null; } }, sysFuncMenus(){ let cfg = this.$store.state.app.config\|\|{}; let menus = cfg.sysFuncMenus\|\|[]; return menus; }, logoSrc(){ let cfg = this.$store.state.app.config\|\|{}; return (this.layout=="level"?(cfg.sysLogoHorizon&&cfg.sysLogoHorizon.src):(cfg.sysLogo&&cfg.sysLogo.src))\|\|''; }, MlogoSrc(){ let cfg = this.$store.state.app.config\|\|{}; return (cfg.MsysLogo&&cfg.MsysLogo.src)\|\|''; }, layout(){ return window.localStorage.getItem('layout'); }, navsLatelyUse(){ return this.$store.getters.navsLatelyUse; }, token(){ return this.$store.getters.token; }, userInfo(){ return this.$store.state.user.userInfo; }, bzList(){ return this.$store.state.user.bzList; }, }, watch:{ searchWord(newVal,oldVal){ this.seldIndex=0; this.doSearch(newVal); } }, mounted(){ let me=this; document.addEventListener('click',me.hideSeachResult); me.$store.dispatch("app/getSysConfig"); me.sysFuncMenus.filter(item=>{ if(item.type=="withNumTips"&&item.numFunc){ function __intervalFunc(){ item.numFunc().then(res=>{ me.$set(item,"tipNum",res.num); if(res.num){ me.$notify.info({ title: '消息提示', //message: '您有'+res.num+'条未读消息', message: item.messageText(res), position: 'bottom-right', onClick:(evt)=>{ me.handleFuncMenus(item); } }); } }).catch(err=>{ clearInterval(me.numTipTimer); }); } clearInterval(me.numTipTimer); me.numTipTimer=setInterval(__intervalFunc,item.numIntervalTime\|\|100030); __intervalFunc(); } }); me.allFuncBtnObj=me.showAllFuncBtn&&me.$refs.allFuncBtn.getBoundingClientRect(); }, beforeDestroy(){ document.removeEventListener('click',this.hideSeachResult) }, methods:{ openDesign(){ this.$refs['cmp-dd'].show(); }, doSearch(cnKey){ if(cnKey==""){ this.hideSeachResult(); return; } this.showSeachResult(); let list = [], records = this.$store.getters.menusList; let py = pinyin.getCamelChars(cnKey).toLocaleLowerCase(); console.log('records', records) //let py = Scp.String.getPinyin(cnKey).toLocaleLowerCase(); let re = new RegExp("^[a-zA-Z]+$"); for(let i=0,l=records.length;i<l;i++){ let item = records[i]; if(list.length>10){ break; } if(re.test(cnKey)){ let y = pinyin.getCamelChars(item.name).toLocaleLowerCase(); //let y = Scp.String.getPinyin(item.name).toLocaleLowerCase(); if(y.indexOf(py)>-1 && item.type!='dir'){ list.push(item); } }else{ if(item.name.indexOf(cnKey)>-1 && item.type!='dir' ){ list.push(item); continue; } } } this.$set(this,'searchList',list); }, openFunc(item){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; } // this.addTab(item.resUrl,item.name,item.resId) this.addTab(item);//inject 提供的方法只能传一个参数 }, handleSearchBoxClick(){ this.doSearch(this.searchWord); this.$refs['dom-seachTxt'].focus(); }, handleSeachKeyUp(evt){ if(evt.keyCode==40){//ArrowDown if(this.seldIndex<this.searchList.length-1){ this.seldIndex++; }else{ this.seldIndex=0; } } if(evt.keyCode==38){//ArrowUp if(this.seldIndex==0){ this.seldIndex=this.searchList.length-1; }else{ this.seldIndex--; } } if(evt.keyCode==13){//enter let item = this.searchList[this.seldIndex]; if(item.type== "link"){ window.open(item.resUrl,item.name); return; } // this.addTab(item.resUrl,item.name,item.resId); this.addTab(item);//inject 提供的方法只能传一个参数 this.searchWord = ""; this.seldIndex = 0; this.hideSeachResult(); } }, showSeachResult(){ this.searchMenusStyle.display ='block'; let s = this.$refs["dom-searchBox"]; let rect = s.getBoundingClientRect(); this.searchMenusStyle.left = rect.left+'px'; this.searchMenusStyle.top = rect.top + rect.height + 5 +'px'; this.searchMenusStyle.width = rect.width+'px'; this.searchMenusStyle.opacity = '1'; }, hideSeachResult(){ this.searchMenusStyle.display ='none'; }, handleChangeSys(item){ if(!item.url)return; if(item.target=="_blank"){ window.open(item.url) }else{ window.location.href=item.url; } }, handleShowSysList(){ this.sysListStyle.display ='block'; let s = this.$refs["dom-sysList"]; let rect = s.getBoundingClientRect(); this.sysListStyle.left = rect.left+'px'; this.sysListStyle.top = rect.top + rect.height +'px'; }, handleHideSysList(){ this.sysListStyle.display ='none'; }, handleFuncMenus(item,$event){ $event&&$event.stopPropagation(); if(item.type== "link"){ window.open(item.resUrl,item.name); return; } var _url=item.url; if(item.type== "widthToken"\|\|item.type== "withToken"){ _url=item.url+"&access_token="+this.token; } if(item.url){ item.target=='tab'? this.addTab({ resUrl:_url, name:item.name, resId:item.id, }) : window.open(_url); return }else{ item.handler&&item.handler(); } if(item.children&&item.children.length){ this.menuItems = item.children; this.$refs['cmp-funcMenu'].open($event) } }, async handleLogout(){ await this.$store.dispatch("user/logout").then(()=>{ //removeToken(); if(window.HIVUI_SETTING.isSingleLogin&&window.HIVUI_SETTING.singleLogoutUrl){ location=window.HIVUI_SETTING.singleLogoutUrl; }else{ location=window.HIVUI_SETTING.loginUrl; } }); }, handleShowLatelyUse(){ this.$store.dispatch('app/getLatelyUse')//最近使用 let s = this.$refs["dom-latelyUse"]; let rect = s.getBoundingClientRect(); this.latelyUseStyle.display ='block'; this.latelyUseStyle.left = rect.left+'px'; this.latelyUseStyle.top = rect.top + rect.height +'px'; this.latelyUseStyle.opacity = '1'; }, handleHideLatelyUse(){ this.latelyUseStyle.display ='none'; }, handleOpenLatelyFunc(item){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; } this.addTab({ resUrl:item.resUrl, name:item.name });//inject 提供的方法只能传一个参数 }, hideTitle(name){ this.$emit('hideTitle', name); }, //切岗 __changeOrgBz(bzid){ changeBz({ bzid:bzid }).then(res=>{ window.location.reload(); }); }, modifyPw(){ this.$store.dispatch("user/showPwDialog",true); }, modifyUserInfo(){ }, //全部功能弹窗 allFuncTrigger(){ let me=this; me.isShowAllFuncMenu=me.isShowAllFuncMenu?false:true; if(me.isShowAllFuncMenu){ me.$refs.allFuncMenu.showBox(); }else{ me.$refs.allFuncMenu.hideBox(); } }, allFuncTriggerOpen(){ let me=this; me.$refs.allFuncMenu.showBox(); }, allFuncTriggerClose(){ let me=this; me.$refs.allFuncMenu.hideBox(); }, } } </script> <style lang="less" scoped> .pl-header{ z-index: 99; } </style> <template> <div class="pl-header " :data-layout="layout"> <ul class="ltArea"> <li v-if="layout=='level'" class="logoStyle"> <div class="pl-logo" :style="{width: sideWidth}"> <div v-if="hasTitle" @click="hideTitle(false)"> <img :src="def_sy_logo_horizon" :width="sideWidth" v-if="logoSrc==''"> <img :src="logoSrc" :width="sideWidth" v-if="logoSrc!=''"> </div> <div v-else @click="hideTitle(true)"> <img :src="def_sy_minLogo" v-if="MlogoSrc==''"> <img :src="MlogoSrc" :width="sideWidth" v-if="MlogoSrc!=''"> </div> </div> </li> <li v-else> <div :style="{width: sideWidth}" class="pl-logo"> <img :src="def_sy_logo" :width="sideWidth" v-if="logoSrc==''"> <img :src="logoSrc" :width="sideWidth" v-if="logoSrc!=''"> </div> </li> <li v-if="sysList.length"> <div class="sysTrigger" ref='dom-sysList' @mouseover="handleShowSysList" @mouseout="handleHideSysList"> <span>{{$lang("projectManage")\|\|"项目管理"}}</span> <i class="iconfont icon-change"></i> </div> <ul class="pl-menus pl-menus-sub pl-menus-pop" @mouseenter="handleShowSysList" @mouseleave="handleHideSysList" :style="sysListStyle" v-add2Body> <li class="pl-menus-item" v-for="item,index in sysList" @click="handleChangeSys(item)"> <a class="title"><span class="txt">{{item.title}}111</span></a> </li> </ul> </li> <li v-if="layout == 'level'" > <div class="sysTrigger" 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> <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> </li> <li v-if="layout == 'level'&&showAllFuncBtn" > <div class="sysTrigger"> <span ref="allFuncBtn" class="title" @mouseenter="allFuncTriggerOpen" @mouseleave="allFuncTriggerClose">{{$lang('allFunction')\|\|'全部功能'}}</span> <i class="icon iconfont icon-arrow-down"></i> <allFuncMenu ref="allFuncMenu" :triggerObj="allFuncBtnObj" v-add2Body></allFuncMenu> </div> </li> </ul> <ul class="rtArea"> <li> <div class="pl-search" ref="dom-searchBox" > <input ref="dom-seachTxt" class="pl-search-text" type="text" :placeholder="$lang('searchKey')\|\|'搜索关键字'" v-model.trim="searchWord" @keyup="handleSeachKeyUp" /> <i class="iconfont icon-search"></i> </div> <ul class="pl-menus pl-menus-sub pl-menus-pop" :style="searchMenusStyle" v-add2Body> <li :class="['pl-menus-item',seldIndex==index?'pl-menus-itemSeld':'']" v-for="item,index in searchList" style="width:100%" @click="openFunc(item)"> <a class="title"><span class="txt" v-html="item.html\|\|item.name"></span></a> </li> <li v-show="searchList.length==0&&searchWord.length>0" class="pl-menus-tips"> {{$lang("noData")\|\|"暂无数据"}} </li> </ul> </li> <li v-if="sysProjectManage"> <a :href="sysProjectManage.url" target='_blank' class="item" :title="sysProjectManage.name"> <i class="iconfont" :class="sysProjectManage.iconClass"></i> <span class="title">{{sysProjectManage.name}}</span> </a> </li> <template v-for="item in sysFuncMenus"> <li v-if="item.type!='split'"> <template v-if="item.type=='withNumTips'"> <div class="item" @click.prevent="handleFuncMenus(item,$event)"> <div class="tip"> <i class="iconfont" :class="item.iconClass"></i> </div> <span class="title" v-html="item.html\|\|item.name"></span> <span class="pl-head-tipsNum" :hidden="!(item.tipNum&&item.tipNum!=0)">{{item.tipNum}}</span> </div> </template> <template v-else> <template v-if="item.children&&item.children.length"> <div class="item" @mouseenter="handleFuncMenus(item,$event)"> <div class="tip"> <i class="iconfont" :class="item.iconClass"></i> </div> <span class="title" v-html="item.html\|\|item.name"></span> <i class="iconfont icon-arrow-down" v-if="item.children"></i> </div> </template> <template v-if="!item.children\|\|item.children&&item.children.length==0"> <div class="item" @click.prevent="handleFuncMenus(item,$event)"> <div class="tip"> <i class="iconfont" :class="item.iconClass"></i> </div> <span class="title" v-html="item.html\|\|item.name"></span> <i class="iconfont icon-arrow-down" v-if="item.children"></i> </div> </template> </template> </li> <li v-if="item.type=='split'"><div class="line"></div></li> </template> <!-- <li> <div class="item"> <div class="tip"> <i class="iconfont icon-user"></i> </div> <span class="title">{{this.$store.getters.userId}}/{{this.$store.getters.userName}}</span> <i class="iconfont icon-arrow-down"></i> </div> </li> <li><div class="line"></div></li> --> <!-- 用户信息 --> <li> <template v-if="sysUserInfo.children&&sysUserInfo.children.length"> <div class="item" @mouseenter="handleFuncMenus(sysUserInfo,$event)"> <div class="tip"> <i class="iconfont" :class="sysUserInfo.iconClass"></i> </div> <span class="title" v-html="sysUserInfo.html\|\|sysUserInfo.name"></span> <i class="iconfont icon-arrow-down" v-if="sysUserInfo.children"></i> </div> </template> </li> <li><div class="line"></div></li> <li v-if="hasSetting"> <div class="item" :title="$lang('customWorkbench')\|\|'自定义工作台'"> <a href="#design" target='_blank'><i class="iconfont icon-set-fill"></i></a> </div> </li> <li> <div class="item" :title="$lang('logout')\|\|'退出系统'"> <a @click="handleLogout"><i class="iconfont icon-tuichu"></i></a> </div> </li> </ul> <vueContextMenu ref="cmp-funcMenu" :menu-items="menuItems" field="name"></vueContextMenu> <modifyPw></modifyPw> </div> </template> <script> import pinyin from 'js-pinyin';//ie 下有问题编译不过 import vueContextMenu from "@main/components/contextMenu"; import modifyPw from "@main/views/layout/components/modifyPw"; import allFuncMenu from './allFuncMenu' import {changeBz} from "@main/api/user"; import { removeToken } from '@main/utils/auth' import def_sy_loading from "@main/assets/logo_max.png" import def_sy_minLogo from "@main/assets/logo_min.png" import def_sy_logo from "@main/assets/logo.png" import def_sy_logo_horizon from "@main/assets/logo_horizon.png" export default { components:{ vueContextMenu, modifyPw, allFuncMenu, }, inject:['addTab','showTab','hideTab'], props:{ hasTitle:{ type: Boolean, }, sideWidth:{ type: String, } }, data(){ return { menuItems:[], searchWord:"", searchList:[], seldIndex:0, menuShow:false, searchMenusStyle:{ display:'none', left:0, top:0, width:0, // maxHeight:'50%', // overflow:'auto' }, sysListStyle:{ display:'none', left:0, top:0, }, latelyUseStyle:{ display:'none', left:0, top:0, maxHeight:'50%', overflow:'auto' }, def_sy_minLogo:def_sy_minLogo, def_sy_logo:def_sy_logo, def_sy_logo_horizon:def_sy_logo_horizon, numTipTimer:null, showAllFuncBtn:window.customSysCofig.isShowAllFunc, isShowAllFuncMenu:false, allFuncBtnObj:{}, } }, computed:{ hasSetting(){ let cfg = this.$store.state.app.config\|\|{}; return cfg.sysSetTabs&&cfg.sysSetTabs.length; }, sysList(){ let cfg = this.$store.state.app.config\|\|{}; return cfg.sysList\|\|[]; }, sysUserInfo(){ let me=this; let cfg = this.$store.state.app.config\|\|{}; function replaceData(str){ if(!str)return ['',false]; var _arr=str.match(/\${(\S?)}/g); var nullNum=0; if(_arr&&_arr.length>0){ for(let i of _arr){ var _data=me.userInfo[i.match(/\${(\S)}/)[1]]; if(typeof(_data)!="undefined"){ str=str.replace(i,_data); }else{ str=str.replace(i,"空"); nullNum++; } } return [str,nullNum==_arr.length?false:true]; } return [str,true]; } let _userInfo=cfg.userInfo; if(_userInfo){ _userInfo.name=replaceData(_userInfo.name)[0]; if(_userInfo.children&&_userInfo.children.length>0){ _userInfo.children=_userInfo.children.filter((item)=>{ let _rData=replaceData(item.name); item.name=_rData[0]; switch(item.type){ case "modifyUserInfo": item.handler=me.modifyUserInfo; break; case "modifyPw": item.handler=me.modifyPw; break; case "orgBz": if(Array.isArray(me.bzList)&&me.bzList.length>1){ item.children=[]; for(let i of me.bzList){ item.children.push({ iconClass:'icon-user', name:`${i.fbzname}/${i.fbzid}`, handler:function(){ me.__changeOrgBz(`${i.fbzid}`); } }); } } break; } if(_rData[1]){ return item; } }); } } return _userInfo\|\|[]; }, sysProjectManage(){ let cfg = this.$store.state.app.config\|\|{}; let item = cfg.sysProjectMange\|\|{},flag=false; this.$store.state.app.powerList.forEach(p=>{ if(p.resUrl.indexOf(item.uri)>-1){ flag = true; return true; } }); if(flag){ return cfg.sysProjectMange; }else{ return null; } }, sysFuncMenus(){ let cfg = this.$store.state.app.config\|\|{}; let menus = cfg.sysFuncMenus\|\|[]; return menus; }, logoSrc(){ let cfg = this.$store.state.app.config\|\|{}; return (this.layout=="level"?(cfg.sysLogoHorizon&&cfg.sysLogoHorizon.src):(cfg.sysLogo&&cfg.sysLogo.src))\|\|''; }, MlogoSrc(){ let cfg = this.$store.state.app.config\|\|{}; return (cfg.MsysLogo&&cfg.MsysLogo.src)\|\|''; }, layout(){ return window.localStorage.getItem('layout'); }, navsLatelyUse(){ return this.$store.getters.navsLatelyUse; }, token(){ return this.$store.getters.token; }, userInfo(){ return this.$store.state.user.userInfo; }, bzList(){ return this.$store.state.user.bzList; }, }, watch:{ searchWord(newVal,oldVal){ this.seldIndex=0; this.doSearch(newVal); } }, mounted(){ let me=this; document.addEventListener('click',me.hideSeachResult); me.$store.dispatch("app/getSysConfig"); me.sysFuncMenus.filter(item=>{ if(item.type=="withNumTips"&&item.numFunc){ function __intervalFunc(){ item.numFunc().then(res=>{ me.$set(item,"tipNum",res.num); if(res.num){ me.$notify.info({ title: '消息提示', //message: '您有'+res.num+'条未读消息', message: item.messageText(res), position: 'bottom-right', onClick:(evt)=>{ me.handleFuncMenus(item); } }); } }).catch(err=>{ clearInterval(me.numTipTimer); }); } clearInterval(me.numTipTimer); me.numTipTimer=setInterval(__intervalFunc,item.numIntervalTime\|\|100030); __intervalFunc(); } }); me.allFuncBtnObj=me.$refs.allFuncBtn.getBoundingClientRect(); }, beforeDestroy(){ document.removeEventListener('click',this.hideSeachResult) }, methods:{ openDesign(){ this.$refs['cmp-dd'].show(); }, doSearch(cnKey){ if(cnKey==""){ this.hideSeachResult(); return; } this.showSeachResult(); let list = [], records = this.$store.getters.menusList; let py = pinyin.getCamelChars(cnKey).toLocaleLowerCase(); console.log('records', records) //let py = Scp.String.getPinyin(cnKey).toLocaleLowerCase(); let re = new RegExp("^[a-zA-Z]+$"); for(let i=0,l=records.length;i<l;i++){ let item = records[i]; if(list.length>10){ break; } if(re.test(cnKey)){ let y = pinyin.getCamelChars(item.name).toLocaleLowerCase(); //let y = Scp.String.getPinyin(item.name).toLocaleLowerCase(); if(y.indexOf(py)>-1 && item.type!='dir'){ list.push(item); } }else{ if(item.name.indexOf(cnKey)>-1 && item.type!='dir' ){ list.push(item); continue; } } } this.$set(this,'searchList',list); }, openFunc(item){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; } // this.addTab(item.resUrl,item.name,item.resId) this.addTab(item);//inject 提供的方法只能传一个参数 }, handleSearchBoxClick(){ this.doSearch(this.searchWord); this.$refs['dom-seachTxt'].focus(); }, handleSeachKeyUp(evt){ if(evt.keyCode==40){//ArrowDown if(this.seldIndex<this.searchList.length-1){ this.seldIndex++; }else{ this.seldIndex=0; } } if(evt.keyCode==38){//ArrowUp if(this.seldIndex==0){ this.seldIndex=this.searchList.length-1; }else{ this.seldIndex--; } } if(evt.keyCode==13){//enter let item = this.searchList[this.seldIndex]; if(item.type== "link"){ window.open(item.resUrl,item.name); return; } // this.addTab(item.resUrl,item.name,item.resId); this.addTab(item);//inject 提供的方法只能传一个参数 this.searchWord = ""; this.seldIndex = 0; this.hideSeachResult(); } }, showSeachResult(){ this.searchMenusStyle.display ='block'; let s = this.$refs["dom-searchBox"]; let rect = s.getBoundingClientRect(); this.searchMenusStyle.left = rect.left+'px'; this.searchMenusStyle.top = rect.top + rect.height + 5 +'px'; this.searchMenusStyle.width = rect.width+'px'; this.searchMenusStyle.opacity = '1'; }, hideSeachResult(){ this.searchMenusStyle.display ='none'; }, handleChangeSys(item){ if(!item.url)return; if(item.target=="_blank"){ window.open(item.url) }else{ window.location.href=item.url; } }, handleShowSysList(){ this.sysListStyle.display ='block'; let s = this.$refs["dom-sysList"]; let rect = s.getBoundingClientRect(); this.sysListStyle.left = rect.left+'px'; this.sysListStyle.top = rect.top + rect.height +'px'; }, handleHideSysList(){ this.sysListStyle.display ='none'; }, handleFuncMenus(item,$event){ $event&&$event.stopPropagation(); if(item.type== "link"){ window.open(item.resUrl,item.name); return; } var _url=item.url; if(item.type== "widthToken"\|\|item.type== "withToken"){ _url=item.url+"&access_token="+this.token; } if(item.url){ item.target=='tab'? this.addTab({ resUrl:_url, name:item.name, resId:item.id, }) : window.open(_url); return }else{ item.handler&&item.handler(); } if(item.children&&item.children.length){ this.menuItems = item.children; this.$refs['cmp-funcMenu'].open($event) } }, async handleLogout(){ await this.$store.dispatch("user/logout").then(()=>{ //removeToken(); if(window.HIVUI_SETTING.isSingleLogin&&window.HIVUI_SETTING.singleLogoutUrl){ location=window.HIVUI_SETTING.singleLogoutUrl; }else{ location=window.HIVUI_SETTING.loginUrl; } }); }, handleShowLatelyUse(){ this.$store.dispatch('app/getLatelyUse')//最近使用 let s = this.$refs["dom-latelyUse"]; let rect = s.getBoundingClientRect(); this.latelyUseStyle.display ='block'; this.latelyUseStyle.left = rect.left+'px'; this.latelyUseStyle.top = rect.top + rect.height +'px'; this.latelyUseStyle.opacity = '1'; }, handleHideLatelyUse(){ this.latelyUseStyle.display ='none'; }, handleOpenLatelyFunc(item){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; } this.addTab({ resUrl:item.resUrl, name:item.name });//inject 提供的方法只能传一个参数 }, hideTitle(name){ this.$emit('hideTitle', name); }, //切岗 __changeOrgBz(bzid){ changeBz({ bzid:bzid }).then(res=>{ window.location.reload(); }); }, modifyPw(){ this.$store.dispatch("user/showPwDialog",true); }, modifyUserInfo(){ }, //全部功能弹窗 allFuncTrigger(){ let me=this; me.isShowAllFuncMenu=me.isShowAllFuncMenu?false:true; if(me.isShowAllFuncMenu){ me.$refs.allFuncMenu.showBox(); }else{ me.$refs.allFuncMenu.hideBox(); } }, allFuncTriggerOpen(){ let me=this; me.$refs.allFuncMenu.showBox(); }, allFuncTriggerClose(){ let me=this; me.$refs.allFuncMenu.hideBox(); }, } } </script> <style lang="less" scoped> .pl-header{ z-index: 99; } </style>

Ignore Space Show notes View

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

<template>
    <div class="pl-header " :data-layout="layout">  
        <ul class="ltArea">
            <li v-if="layout=='level'" class="logoStyle">
                <div  class="pl-logo" :style="{width: sideWidth}">
                    <div v-if="hasTitle" @click="hideTitle(false)">
                        <img :src="def_sy_logo_horizon" :width="sideWidth" v-if="logoSrc==''">
                        <img :src="logoSrc" :width="sideWidth" v-if="logoSrc!=''">
                    </div>
                    <div v-else @click="hideTitle(true)">
                        <img :src="def_sy_minLogo" v-if="MlogoSrc==''">
                        <img :src="MlogoSrc" :width="sideWidth" v-if="MlogoSrc!=''">
                    </div>
                </div>
            </li>
            <li v-else>
                <div :style="{width: sideWidth}" class="pl-logo">
                    <img :src="def_sy_logo"  :width="sideWidth" v-if="logoSrc==''">
                    <img :src="logoSrc" :width="sideWidth" v-if="logoSrc!=''">
                </div>
            </li>
            <li v-if="sysList.length">                
                <div class="sysTrigger" ref='dom-sysList'  
                    @mouseover="handleShowSysList"  @mouseout="handleHideSysList">
                    <span>{{$lang("projectManage")||"项目管理"}}</span>
                    <i class="iconfont icon-change"></i>
                </div> 
                <ul class="pl-menus pl-menus-sub pl-menus-pop"
                @mouseenter="handleShowSysList"  @mouseleave="handleHideSysList"
                :style="sysListStyle" v-add2Body>
                    <li class="pl-menus-item" v-for="item,index in sysList" @click="handleChangeSys(item)">
                        <a class="title"><span class="txt">{{item.title}}111</span></a>
                    </li>
                </ul>   
            </li>
            <li v-if="layout == 'level'" >
                <div class="sysTrigger" 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>
                <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> 
            </li>
            <li v-if="layout == 'level'&&showAllFuncBtn" >
                <div class="sysTrigger">
                    <span ref="allFuncBtn" class="title" @mouseenter="allFuncTriggerOpen" @mouseleave="allFuncTriggerClose">{{$lang('allFunction')||'全部功能'}}</span>
                    <i class="icon iconfont icon-arrow-down"></i>
                    <allFuncMenu ref="allFuncMenu" :triggerObj="allFuncBtnObj" v-add2Body></allFuncMenu>
                </div>
            </li>
        </ul>
        <ul class="rtArea">
            <li>
                <div class="pl-search" ref="dom-searchBox" >
                    <input ref="dom-seachTxt" class="pl-search-text" type="text" :placeholder="$lang('searchKey')||'搜索关键字'" 
                    v-model.trim="searchWord" 
                    @keyup="handleSeachKeyUp"
                    />
                    <i class="iconfont icon-search"></i>                   
                </div>  
                <ul class="pl-menus pl-menus-sub pl-menus-pop" :style="searchMenusStyle" v-add2Body>
                    <li :class="['pl-menus-item',seldIndex==index?'pl-menus-itemSeld':'']" v-for="item,index in searchList" 
                    style="width:100%"
                    @click="openFunc(item)">
                        <a class="title"><span class="txt" v-html="item.html||item.name"></span></a>
                    </li>
                    <li v-show="searchList.length==0&&searchWord.length>0" class="pl-menus-tips">
                        {{$lang("noData")||"暂无数据"}}
                    </li>
                </ul> 
            </li>
            <li v-if="sysProjectManage">
                <a :href="sysProjectManage.url" target='_blank' class="item" :title="sysProjectManage.name">
                    <i class="iconfont" :class="sysProjectManage.iconClass"></i>
                    <span class="title">{{sysProjectManage.name}}</span>
                </a>  
            </li>
            <template v-for="item in sysFuncMenus">
                <li v-if="item.type!='split'">
                    <template v-if="item.type=='withNumTips'">
                        <div class="item" @click.prevent="handleFuncMenus(item,$event)">
                            <div class="tip">
                                <i class="iconfont" :class="item.iconClass"></i>
                            </div>
                            <span class="title" v-html="item.html||item.name"></span>
                            <span class="pl-head-tipsNum" :hidden="!(item.tipNum&&item.tipNum!=0)">{{item.tipNum}}</span>
                        </div>
                    </template>
                    <template v-else>
                        <template v-if="item.children&&item.children.length">
                            <div class="item" @mouseenter="handleFuncMenus(item,$event)">
                                <div class="tip">
                                    <i class="iconfont" :class="item.iconClass"></i>
                                </div>
                                <span class="title" v-html="item.html||item.name"></span>
                                <i class="iconfont icon-arrow-down" v-if="item.children"></i>
                            </div>
                        </template>
                        <template v-if="!item.children||item.children&&item.children.length==0">
                            <div class="item" @click.prevent="handleFuncMenus(item,$event)">
                                <div class="tip">
                                    <i class="iconfont" :class="item.iconClass"></i>
                                </div>
                                <span class="title" v-html="item.html||item.name"></span>
                                <i class="iconfont icon-arrow-down" v-if="item.children"></i>
                            </div>
                        </template>
                    </template>
                </li>
                <li v-if="item.type=='split'"><div class="line"></div></li>                
            </template>
            
            
            <li>
                <template v-if="sysUserInfo.children&&sysUserInfo.children.length">
                    <div class="item" @mouseenter="handleFuncMenus(sysUserInfo,$event)">
                        <div class="tip">
                            <i class="iconfont" :class="sysUserInfo.iconClass"></i>
                        </div>
                        <span class="title" v-html="sysUserInfo.html||sysUserInfo.name"></span>
                        <i class="iconfont icon-arrow-down" v-if="sysUserInfo.children"></i>
                    </div>
                </template>
            </li>
            <li><div class="line"></div></li>
            <li v-if="hasSetting">
                <div class="item" :title="$lang('customWorkbench')||'自定义工作台'">
                    <a href="#design" target='_blank'><i class="iconfont icon-set-fill"></i></a>   
                </div>
            </li>
            <li>
                <div class="item" :title="$lang('logout')||'退出系统'">
                    <a @click="handleLogout"><i class="iconfont icon-tuichu"></i></a>    
                </div>
            </li>
        </ul>
        <vueContextMenu ref="cmp-funcMenu" :menu-items="menuItems" field="name"></vueContextMenu>
        <modifyPw></modifyPw>
    </div>
</template>
<script>
import pinyin from 'js-pinyin';//ie 下有问题 编译不过
 
import vueContextMenu from "@main/components/contextMenu";
import modifyPw from "@main/views/layout/components/modifyPw";
import allFuncMenu from './allFuncMenu'
import {changeBz} from "@main/api/user";

import { removeToken } from '@main/utils/auth'
import def_sy_loading from "@main/assets/logo_max.png"
import def_sy_minLogo from "@main/assets/logo_min.png"
import def_sy_logo from "@main/assets/logo.png"
import def_sy_logo_horizon from "@main/assets/logo_horizon.png"

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

if(_arr&&_arr.length>0){
                    for(let i of _arr){
                        var _data=me.userInfo[i.match(/\${(\S*)}/)[1]];
                        if(typeof(_data)!="undefined"){
                            str=str.replace(i,_data);
                        }else{
                            str=str.replace(i,"空");
                            nullNum++;
                        }
                    }
                    return [str,nullNum==_arr.length?false:true];
                }
                return [str,true];
            }
            let _userInfo=cfg.userInfo;
            if(_userInfo){
                _userInfo.name=replaceData(_userInfo.name)[0];
                if(_userInfo.children&&_userInfo.children.length>0){
                    _userInfo.children=_userInfo.children.filter((item)=>{
                        let _rData=replaceData(item.name);
                        item.name=_rData[0];
                        switch(item.type){
                            case "modifyUserInfo":
                                item.handler=me.modifyUserInfo;
                                break;
                            case "modifyPw":
                                item.handler=me.modifyPw;
                                break;
                            case "orgBz":
                                if(Array.isArray(me.bzList)&&me.bzList.length>1){
                                    item.children=[];
                                    for(let i of me.bzList){
                                        item.children.push({
                                            iconClass:'icon-user',
                                            name:`${i.fbzname}/${i.fbzid}`,
                                            handler:function(){
                                                me.__changeOrgBz(`${i.fbzid}`);
                                            }
                                        });
                                    }
                                }
                                break;
                        }
                        if(_rData[1]){
                            return item;
                        }
                    });
                }
            }
            return _userInfo||[];
        },
        sysProjectManage(){
            let cfg = this.$store.state.app.config||{};
            let  item = cfg.sysProjectMange||{},flag=false;
            this.$store.state.app.powerList.forEach(p=>{
                if(p.resUrl.indexOf(item.uri)>-1){
                    flag = true;
                    return true;
                }                        
            });
            if(flag){
                return cfg.sysProjectMange;
            }else{
                return null;
            }
        },
        sysFuncMenus(){            
            let cfg = this.$store.state.app.config||{};
            let menus = cfg.sysFuncMenus||[];
            return menus;
        },
        logoSrc(){
            let cfg = this.$store.state.app.config||{};
            return (this.layout=="level"?(cfg.sysLogoHorizon&&cfg.sysLogoHorizon.src):(cfg.sysLogo&&cfg.sysLogo.src))||'';
        },
        MlogoSrc(){
            let cfg = this.$store.state.app.config||{};
            return (cfg.MsysLogo&&cfg.MsysLogo.src)||'';
        },
        layout(){
            return window.localStorage.getItem('layout');
        },
        navsLatelyUse(){
            return this.$store.getters.navsLatelyUse;
        },
        token(){
            return this.$store.getters.token;
        },
        userInfo(){
            return this.$store.state.user.userInfo;
        },
        bzList(){
            return this.$store.state.user.bzList;
        },

},
    watch:{ 
        searchWord(newVal,oldVal){
            this.seldIndex=0;
            this.doSearch(newVal);
        }
    },
    mounted(){ 
        let me=this;
        document.addEventListener('click',me.hideSeachResult);
        me.$store.dispatch("app/getSysConfig");
        me.sysFuncMenus.filter(item=>{
            if(item.type=="withNumTips"&&item.numFunc){
                function __intervalFunc(){
                    item.numFunc().then(res=>{
                        me.$set(item,"tipNum",res.num);
                        if(res.num){
                            me.$notify.info({
                                title: '消息提示',
                                //message: '您有'+res.num+'条未读消息',
                                message: item.messageText(res),
                                position: 'bottom-right',
                                onClick:(evt)=>{
                                    me.handleFuncMenus(item);
                                }
                            });
                        }
                    }).catch(err=>{
                        clearInterval(me.numTipTimer);
                    });
                }
                clearInterval(me.numTipTimer);
                me.numTipTimer=setInterval(__intervalFunc,item.numIntervalTime||1000*30);
                __intervalFunc();
            }
        });
        me.allFuncBtnObj=me.showAllFuncBtn&&me.$refs.allFuncBtn.getBoundingClientRect();
    },
    beforeDestroy(){
        document.removeEventListener('click',this.hideSeachResult)
    },
    methods:{
        openDesign(){
            this.$refs['cmp-dd'].show();
        },
        doSearch(cnKey){
            if(cnKey==""){                
                this.hideSeachResult();
                return;
            }
            this.showSeachResult();
            let list = [],
                records = this.$store.getters.menusList;
             let py = pinyin.getCamelChars(cnKey).toLocaleLowerCase();
            console.log('records', records)
            //let py = Scp.String.getPinyin(cnKey).toLocaleLowerCase();

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

},
    watch:{ 
        searchWord(newVal,oldVal){
            this.seldIndex=0;
            this.doSearch(newVal);
        }
    },
    mounted(){ 
        let me=this;
        document.addEventListener('click',me.hideSeachResult);
        me.$store.dispatch("app/getSysConfig");
        me.sysFuncMenus.filter(item=>{
            if(item.type=="withNumTips"&&item.numFunc){
                function __intervalFunc(){
                    item.numFunc().then(res=>{
                        me.$set(item,"tipNum",res.num);
                        if(res.num){
                            me.$notify.info({
                                title: '消息提示',
                                //message: '您有'+res.num+'条未读消息',
                                message: item.messageText(res),
                                position: 'bottom-right',
                                onClick:(evt)=>{
                                    me.handleFuncMenus(item);
                                }
                            });
                        }
                    }).catch(err=>{
                        clearInterval(me.numTipTimer);
                    });
                }
                clearInterval(me.numTipTimer);
                me.numTipTimer=setInterval(__intervalFunc,item.numIntervalTime||1000*30);
                __intervalFunc();
            }
        });
        me.allFuncBtnObj=me.$refs.allFuncBtn.getBoundingClientRect();
    },
    beforeDestroy(){
        document.removeEventListener('click',this.hideSeachResult)
    },
    methods:{
        openDesign(){
            this.$refs['cmp-dd'].show();
        },
        doSearch(cnKey){
            if(cnKey==""){                
                this.hideSeachResult();
                return;
            }
            this.showSeachResult();
            let list = [],
                records = this.$store.getters.menusList;
             let py = pinyin.getCamelChars(cnKey).toLocaleLowerCase();
            console.log('records', records)
            //let py = Scp.String.getPinyin(cnKey).toLocaleLowerCase();

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">{{$lang('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="$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" @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"> {{$lang('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, 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 });//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'; 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">{{$lang('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="$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" @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"> {{$lang('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, 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.$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 });//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'; 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">{{$lang('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="$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" @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">
                {{$lang('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,
            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
            });//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';
            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>

};
    },
    computed:{
        menus(){
            return this.$store.getters.menus;
        },
        navsLatelyUse(){
            return this.$store.getters.navsLatelyUse;
        }
    },
    mounted(){
        this.resize();
        window.addEventListener('resize',this.resize);
        this.allFuncBtnObj=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);
                
            }
        },

Ignore Space Show notes View vite.config.js
// vite.config.js 利害浏览器自带的 es 动态导入，使项目冷启动 const { resolve } = require('path'); import { defineConfig, loadEnv } from 'vite' import { createVuePlugin } from "vite-plugin-vue2"; import vueJsx from '@vitejs/plugin-vue-jsx' import pageData from "vite-plugin-pagedata" import vitefunc from './vite-plugin/vite-plugin-func' import { injectHtml } from 'vite-plugin-html'; //影响到eap.umd.min.js 里的require ELEMENT 全局 // import requireTransform from 'vite-plugin-require-transform'; const pkg = require("./package.json"); // https://vitejs.dev/config/ export default ({ mode }) => { process.env = { ...process.env, ...loadEnv(mode, process.cwd()) }; let aliases = {} let build = { sourcemap: false, //编译 //指定多个 .html 文件作为入口点 rollupOptions: { // 请确保外部化那些你的库中不需要的依赖 // external: ['vue'], input: { main: resolve(__dirname, 'index.html'), nested: resolve(__dirname, 'nested/index.html') }, output: { format: 'umd', } } } if (mode == 'development') { aliases = { '@project': resolve(`${pkg.name == 'hi-vui-template' ? 'project' : pkg.name}`), '@main': resolve(`${pkg.name == 'hi-vui-template' ? 'project' : pkg.name}/hivuiMain`), '@birt': resolve(`${pkg.name == 'hi-vui-template' ? 'project' : pkg.name}/hivuiBirt`), 'pinyin': 'js-pinyin', //开启下面注释，scp5.0本地调式指定 //'@':resolve(__dirname, './hi-ui/src'), } // console.log('aliases@main:', aliases['@main']); } else { } const postDataName = "scpRequestData"; return defineConfig({ build: build, define: { 'process.env': { //配合 webpack 环境，在vite 下定义一个空的 } }, css: { preprocessorOptions: { less: { javascriptEnabled: true, } }, }, resolve: { extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue', '.dtvevt', '.dtv','.dvue','.es6'], alias: aliases, }, plugins: [ vitefunc({ varName: postDataName, global: { env: 'dev' }, htmlWebpackPlugin: { vite: true, project: pkg.name, mode: mode } }), injectHtml({ // 向预览时注入变量，这个变量跟打包时 html-webpack-plugin 注入的一致，用户判断是否是编译状态 injectData: { htmlWebpackPlugin: { vite: true, project: pkg.name, mode: mode } } }), pageData({ varName: postDataName, global: { env: 'dev' }, }), createVuePlugin({ include:/\.(dvue\|vue)$/ }), vueJsx({ // options are passed on to @vue/babel-plugin-jsx }), //影响到eap.umd.min.js 里的require ELEMENT 全局 // requireTransform({ // fileRegex:/.ts$\|.tsx$\|.vue$\|.js$\|.jsx$/ // }) ], // devServer: { // port: 227, // proxy: 'http://192.168.1.183:5001/' // }, // server: { // watch: { // ignored: ['!/node_modules/vue/'] // } // }, // // 被监听的包必须被排除在优化之外， // // 以便它能出现在依赖关系图中并触发热更新。 // optimizeDeps: { // exclude: ['vue'] // } }) }; // vite.config.js 利害浏览器自带的 es 动态导入，使项目冷启动 const { resolve } = require('path'); import { defineConfig, loadEnv } from 'vite' import { createVuePlugin } from "vite-plugin-vue2"; import vueJsx from '@vitejs/plugin-vue-jsx' import pageData from "vite-plugin-pagedata" import vitefunc from './vite-plugin/vite-plugin-func' import { injectHtml } from 'vite-plugin-html'; import requireTransform from 'vite-plugin-require-transform'; const pkg = require("./package.json"); // https://vitejs.dev/config/ export default ({ mode }) => { process.env = { ...process.env, ...loadEnv(mode, process.cwd()) }; let aliases = {} let build = { sourcemap: false, //编译 //指定多个 .html 文件作为入口点 rollupOptions: { // 请确保外部化那些你的库中不需要的依赖 // external: ['vue'], input: { main: resolve(__dirname, 'index.html'), nested: resolve(__dirname, 'nested/index.html') }, output: { format: 'umd', } } } if (mode == 'development') { aliases = { '@project': resolve(`${pkg.name == 'hi-vui-template' ? 'project' : pkg.name}`), '@main': resolve(`${pkg.name == 'hi-vui-template' ? 'project' : pkg.name}/hivuiMain`), '@birt': resolve(`${pkg.name == 'hi-vui-template' ? 'project' : pkg.name}/hivuiBirt`), 'pinyin': 'js-pinyin', //开启下面注释，scp5.0本地调式指定 //'@':resolve(__dirname, './hi-ui/src'), } // console.log('aliases@main:', aliases['@main']); } else { } const postDataName = "scpRequestData"; return defineConfig({ build: build, define: { 'process.env': { //配合 webpack 环境，在vite 下定义一个空的 } }, css: { preprocessorOptions: { less: { javascriptEnabled: true, } }, }, resolve: { extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue', '.dtvevt', '.dtv','.dvue','.es6'], alias: aliases, }, plugins: [ vitefunc({ varName: postDataName, global: { env: 'dev' }, htmlWebpackPlugin: { vite: true, project: pkg.name, mode: mode } }), injectHtml({ // 向预览时注入变量，这个变量跟打包时 html-webpack-plugin 注入的一致，用户判断是否是编译状态 injectData: { htmlWebpackPlugin: { vite: true, project: pkg.name, mode: mode } } }), pageData({ varName: postDataName, global: { env: 'dev' }, }), createVuePlugin({ include:/\.(dvue\|vue)$/ }), vueJsx({ // options are passed on to @vue/babel-plugin-jsx }), requireTransform({ fileRegex:/.ts$\|.tsx$\|.vue$\|.js$\|.jsx$/ }) ], // devServer: { // port: 227, // proxy: 'http://192.168.1.183:5001/' // }, // server: { // watch: { // ignored: ['!/node_modules/vue/'] // } // }, // // 被监听的包必须被排除在优化之外， // // 以便它能出现在依赖关系图中并触发热更新。 // optimizeDeps: { // exclude: ['vue'] // } }) };

Ignore Space Show notes View

vite.config.js

// vite.config.js  利害浏览器自带的 es 动态导入，使项目冷启动
const { resolve } = require('path');
import { defineConfig, loadEnv } from 'vite'
import { createVuePlugin } from "vite-plugin-vue2";
import vueJsx from '@vitejs/plugin-vue-jsx'
import pageData from "vite-plugin-pagedata"
import vitefunc from './vite-plugin/vite-plugin-func'
import { injectHtml } from 'vite-plugin-html';
//影响到eap.umd.min.js 里的require ELEMENT 全局
// import requireTransform from 'vite-plugin-require-transform';

const pkg = require("./package.json");

// https://vitejs.dev/config/
export default ({ mode }) => {
    process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };
    let aliases = {}
    let build = {
        sourcemap: false,
        //编译
        //指定 多个 .html 文件作为入口点
        rollupOptions: {
            // 请确保外部化那些你的库中不需要的依赖
            // external: ['vue'],
            input: {
                main: resolve(__dirname, 'index.html'),
                nested: resolve(__dirname, 'nested/index.html')
            },
            output: {
                format: 'umd',
            }
        }
    }
    if (mode == 'development') {
        aliases = {
            '@project': resolve(`${pkg.name == 'hi-vui-template' ? 'project' : pkg.name}`),
            '@main': resolve(`${pkg.name == 'hi-vui-template' ? 'project' : pkg.name}/hivuiMain`),
            '@birt': resolve(`${pkg.name == 'hi-vui-template' ? 'project' : pkg.name}/hivuiBirt`),
            'pinyin': 'js-pinyin',
            //开启下面注释，scp5.0本地调式指定
            //'@':resolve(__dirname, './hi-ui/src'),
        }
        // console.log('aliases@main:', aliases['@main']);
    } else {

}
    const postDataName = "scpRequestData";
    return defineConfig({
        build: build,
        define: {
            'process.env': {
                //配合 webpack 环境，在vite 下定义一个空的
            }
        },
        css: {
            preprocessorOptions: {
                less: {
                    javascriptEnabled: true,
                }
            },
        },
        resolve: {
            extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue', '.dtvevt', '.dtv','.dvue','.es6'],
            alias: aliases,
        },
        plugins: [
            vitefunc({
                varName: postDataName,
                global: {
                    env: 'dev'
                },
                htmlWebpackPlugin: {
                    vite: true,
                    project: pkg.name,
                    mode: mode
                }
            }),
            injectHtml({
                // 向预览时注入变量，这个变量跟打包时 html-webpack-plugin 注入的一致，用户判断是否是编译状态
                injectData: {
                    htmlWebpackPlugin: {
                        vite: true,
                        project: pkg.name,
                        mode: mode
                    }
                }
            }),
            pageData({
                varName: postDataName,
                global: {
                    env: 'dev'
                },
            }),
            createVuePlugin({
                include:/\.(dvue|vue)$/
            }),
            vueJsx({
                // options are passed on to @vue/babel-plugin-jsx
            }),
            //影响到eap.umd.min.js 里的require ELEMENT 全局
            // requireTransform({
            //     fileRegex:/.ts$|.tsx$|.vue$|.js$|.jsx$/
            // })
        ],
      
        // devServer: {
        //     port: 227,
        //     proxy: 'http://192.168.1.183:5001/'
        // },
        // server: {
        //     watch: {
        //         ignored: ['!**/node_modules/vue/**']
        //     }
        // },
        // // 被监听的包必须被排除在优化之外，
        // // 以便它能出现在依赖关系图中并触发热更新。
        // optimizeDeps: {
        //     exclude: ['vue']
        // }
    })

};

// vite.config.js  利害浏览器自带的 es 动态导入，使项目冷启动
const { resolve } = require('path');
import { defineConfig, loadEnv } from 'vite'
import { createVuePlugin } from "vite-plugin-vue2";
import vueJsx from '@vitejs/plugin-vue-jsx'
import pageData from "vite-plugin-pagedata"
import vitefunc from './vite-plugin/vite-plugin-func'
import { injectHtml } from 'vite-plugin-html';
import requireTransform from 'vite-plugin-require-transform';

const pkg = require("./package.json");

}
    const postDataName = "scpRequestData";
    return defineConfig({
        build: build,
        define: {
            'process.env': {
                //配合 webpack 环境，在vite 下定义一个空的
            }
        },
        css: {
            preprocessorOptions: {
                less: {
                    javascriptEnabled: true,
                }
            },
        },
        resolve: {
            extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue', '.dtvevt', '.dtv','.dvue','.es6'],
            alias: aliases,
        },
        plugins: [
            vitefunc({
                varName: postDataName,
                global: {
                    env: 'dev'
                },
                htmlWebpackPlugin: {
                    vite: true,
                    project: pkg.name,
                    mode: mode
                }
            }),
            injectHtml({
                // 向预览时注入变量，这个变量跟打包时 html-webpack-plugin 注入的一致，用户判断是否是编译状态
                injectData: {
                    htmlWebpackPlugin: {
                        vite: true,
                        project: pkg.name,
                        mode: mode
                    }
                }
            }),
            pageData({
                varName: postDataName,
                global: {
                    env: 'dev'
                },
            }),
            createVuePlugin({
                include:/\.(dvue|vue)$/
            }),
            vueJsx({
                // options are passed on to @vue/babel-plugin-jsx
            }),
            requireTransform({
                fileRegex:/.ts$|.tsx$|.vue$|.js$|.jsx$/
            })
        ],
      
        // devServer: {
        //     port: 227,
        //     proxy: 'http://192.168.1.183:5001/'
        // },
        // server: {
        //     watch: {
        //         ignored: ['!**/node_modules/vue/**']
        //     }
        // },
        // // 被监听的包必须被排除在优化之外，
        // // 以便它能出现在依赖关系图中并触发热更新。
        // optimizeDeps: {
        //     exclude: ['vue']
        // }
    })

};

Show line notes below