Merge branch 'master' of http://git.hieap.cn/gitbucket/git/08335/hivui-platform-template

08335 / hivui-platform-template

hivui平台项目模板

Browse code Merge branch 'master' of http://git.hieap.cn/gitbucket/git/08335/hivui-platform-template master
commit 6cb2ebcc96325bd30e90df841db0cf3a7ae97610 2 parents 2e22638 + ece345d 20278 authored on 9 May 2024

Showing 4 changed files

Ignore Space Show notes View package.json
{ "name": "hi-vui-template", "version": "1.1.60", "description": "A hi-vui-template project", "author": "zhcTeam", "scripts": { "rm:vite": "rimraf node_modules/.vite && rimraf node_modules/.cache", "pm2:start": "pm2 -s 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", "caniuse-lite": "^1.0.30001436", "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.0.4", "less-loader": "5.0.0", "mini-css-extract-plugin": "^1.6.2", "node-sass": "4.14.1", "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.57.1", "sass-loader": "7.3.1", "style-loader": "^0.23.0", "terser-webpack-plugin": "^4.2.3", "thread-loader": "^3.0.4", "uglifyjs-webpack-plugin": "^2.0.1", "url-loader": "^1.1.1", "vite": "^2.9.15", "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.20.0", "babel-polyfill": "6.26.0", "classnames": "2.3.1", "echarts": "5.2.2", "element-ui": "2.15.3", "enquire.js": "2.1.6", "event-emitter": "^0.3.5", "font-awesome": "4.7.0", "hi-taskcenter": "^1.0.9", "hi-ui": "^1.2.3560", "js-cookie": "3.0.1", "js-md5": "0.7.3", "js-pinyin": "0.1.9", "lodash": "4.17.11", "qrcode": "^1.5.3", "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-jstree": "2.1.6", "vue-router": "3.3.4", "vuex": "3.6.2", "zhc-birt-cmps": "^3.0.16", "zhc-flowchart": "^1.0.20", "zhc-visualstudio": "^1.0.10" }, "preview": { "autoStopTime": 172800 } } { "name": "hi-vui-template", "version": "1.1.60", "description": "A hi-vui-template project", "author": "zhcTeam", "scripts": { "rm:vite": "rimraf node_modules/.vite && rimraf node_modules/.cache", "pm2:start": "pm2 -s 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", "caniuse-lite": "^1.0.30001436", "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.0.4", "less-loader": "5.0.0", "mini-css-extract-plugin": "^1.6.2", "node-sass": "4.14.1", "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.57.1", "sass-loader": "7.3.1", "style-loader": "^0.23.0", "terser-webpack-plugin": "^4.2.3", "thread-loader": "^3.0.4", "uglifyjs-webpack-plugin": "^2.0.1", "url-loader": "^1.1.1", "vite": "^2.9.15", "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.20.0", "babel-polyfill": "6.26.0", "classnames": "2.3.1", "echarts": "5.2.2", "element-ui": "2.15.3", "enquire.js": "2.1.6", "event-emitter": "^0.3.5", "font-awesome": "4.7.0", "hi-taskcenter": "^1.0.9", "hi-ui": "^1.2.3560", "js-cookie": "3.0.1", "js-md5": "0.7.3", "js-pinyin": "0.1.9", "lodash": "4.17.11", "qrcode": "^1.5.3", "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-jstree": "2.1.6", "vue-router": "3.3.4", "vuex": "3.6.2", "zhc-birt-cmps": "^3.0.15", "zhc-flowchart": "^1.0.20", "zhc-visualstudio": "^1.0.10" }, "preview": { "autoStopTime": 172800 } }

Ignore Space Show notes View

package.json

{
  "name": "hi-vui-template",
  "version": "1.1.60",
  "description": "A hi-vui-template project",
  "author": "zhcTeam",
  "scripts": {
    "rm:vite": "rimraf node_modules/.vite && rimraf node_modules/.cache",
    "pm2:start": "pm2 -s 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",
    "caniuse-lite": "^1.0.30001436",
    "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.0.4",
    "less-loader": "5.0.0",
    "mini-css-extract-plugin": "^1.6.2",
    "node-sass": "4.14.1",
    "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.57.1",
    "sass-loader": "7.3.1",
    "style-loader": "^0.23.0",
    "terser-webpack-plugin": "^4.2.3",
    "thread-loader": "^3.0.4",
    "uglifyjs-webpack-plugin": "^2.0.1",
    "url-loader": "^1.1.1",
    "vite": "^2.9.15",
    "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.20.0",
    "babel-polyfill": "6.26.0",
    "classnames": "2.3.1",
    "echarts": "5.2.2",
    "element-ui": "2.15.3",
    "enquire.js": "2.1.6",
    "event-emitter": "^0.3.5",
    "font-awesome": "4.7.0",
    "hi-taskcenter": "^1.0.9",
    "hi-ui": "^1.2.3560",
    "js-cookie": "3.0.1",
    "js-md5": "0.7.3",
    "js-pinyin": "0.1.9",
    "lodash": "4.17.11",
    "qrcode": "^1.5.3",
    "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-jstree": "2.1.6",
    "vue-router": "3.3.4",
    "vuex": "3.6.2",
    "zhc-birt-cmps": "^3.0.16",
    "zhc-flowchart": "^1.0.20",
    "zhc-visualstudio": "^1.0.10"
  },
  "preview": {
    "autoStopTime": 172800
  }
}

{
  "name": "hi-vui-template",
  "version": "1.1.60",
  "description": "A hi-vui-template project",
  "author": "zhcTeam",
  "scripts": {
    "rm:vite": "rimraf node_modules/.vite && rimraf node_modules/.cache",
    "pm2:start": "pm2 -s 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",
    "caniuse-lite": "^1.0.30001436",
    "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.0.4",
    "less-loader": "5.0.0",
    "mini-css-extract-plugin": "^1.6.2",
    "node-sass": "4.14.1",
    "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.57.1",
    "sass-loader": "7.3.1",
    "style-loader": "^0.23.0",
    "terser-webpack-plugin": "^4.2.3",
    "thread-loader": "^3.0.4",
    "uglifyjs-webpack-plugin": "^2.0.1",
    "url-loader": "^1.1.1",
    "vite": "^2.9.15",
    "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.20.0",
    "babel-polyfill": "6.26.0",
    "classnames": "2.3.1",
    "echarts": "5.2.2",
    "element-ui": "2.15.3",
    "enquire.js": "2.1.6",
    "event-emitter": "^0.3.5",
    "font-awesome": "4.7.0",
    "hi-taskcenter": "^1.0.9",
    "hi-ui": "^1.2.3560",
    "js-cookie": "3.0.1",
    "js-md5": "0.7.3",
    "js-pinyin": "0.1.9",
    "lodash": "4.17.11",
    "qrcode": "^1.5.3",
    "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-jstree": "2.1.6",
    "vue-router": "3.3.4",
    "vuex": "3.6.2",
    "zhc-birt-cmps": "^3.0.15",
    "zhc-flowchart": "^1.0.20",
    "zhc-visualstudio": "^1.0.10"
  },
  "preview": {
    "autoStopTime": 172800
  }
}

Ignore Space Show notes View project/hivuiMain/views/layout/index.vue
<template> <div v-if="layout == 'level'" class="pl-page" :class="isFullscreen?'showTab':''"> <div :style="fullScreenTabHandleStyle" @mouseenter="showTab"></div> <Header v-show="!isFullscreen" :hasTitle="hasTitle" :logoWidth="logoWidth" ref="Header" style="box-shadow: 0 5px 7px rgba(221,221,221,0.5);z-index:10"></Header> <!-- <Navbar></Navbar> --> <Sidebar ref="Sidebar" :hasTitle="hasTitle" :sideWidth="sideWidth" :totop="totop" style="z-index: 11"></Sidebar> <Main ref="Main" @onFullScreen="handleFullScreen" :style="{left:toleft, top:totop+'px'}"></Main> </div> <div v-else class="pl-page" :class="isFullscreen?'showTab':''"> <div :style="fullScreenTabHandleStyle" @mouseenter="showTab"></div> <Header ref="Header" :logoWidth="logoWidth" v-show="!isFullscreen"></Header> <Navbar ref="Navbar" v-show="!isFullscreen"></Navbar> <Sidebar ref="Sidebar" v-show="hasQuickNav&&!isFullscreen"></Sidebar> <Main ref="Main" @onFullScreen="handleFullScreen" :style="{left:hasQuickNav?71:0}"></Main> </div> </template> <script> import {baseURL,codeProjectName,requestUrl} from '@main/config' import {getMenus} from '@main/api/menu' import {checkUrl} from '@main/utils/index' import {Header,Navbar,Sidebar,Main} from "./components" import screenfull from 'screenfull' // import { setTimeout } from 'timers'; export default { components:{ Header,Navbar,Sidebar,Main }, provide(){ let me=this; return { addTab(item){ // url,title,uid,callback,nearest // this.addTab(item);//inject 提供的方法只能传一个参数 me.addTab(item.ssoUrl\|\|item.resUrl,item.name,item.resId,item.callback,item.nearest,item.openType); // me.addTab(url,title,uid,callback,nearest); }, showTab(){ // console.log('layout index vue : showTab') me.showTab(); }, hideTab(){ // console.log('layout index vue : hideTab') me.hideTab(); } } }, data(){ return { hasTitle: true, toleft: window.__sysConfig.isMenuWordwrap?(window.__sysConfig.leftMenuWidth?(window.__sysConfig.leftMenuWidth+"px"):'141px'):'71px', sideWidth: window.__sysConfig.isMenuWordwrap?(window.__sysConfig.leftMenuWidth?(window.__sysConfig.leftMenuWidth+"px"):'140px'):'70px', logoWidth:'140px', totop: 50, isFullscreen: false, top: '', left: '', mainTop: '', navTop: '', timeout: null, sysConfig: this.$store.state.app.config, } }, computed:{ hasQuickNav(){ return this.$store.getters.navs.length; }, layout(){ return window.localStorage.getItem('layout'); }, isTitle(){ return this.hasTitle; }, fullScreenTabHandleStyle(){ let baseStyle={ position: "absolute", left: 0, top: 0, "z-index": 10000, }; if(this.layout=="level"){ Object.assign(baseStyle,{ height: "100%", width: "1px", }); }else{ Object.assign(baseStyle,{ height: "1px", width: "100%", }); } return baseStyle; } }, methods:{ addTab(url,title,uid,callback,nearest,openType){ console.log('layout addTab :',baseURL,codeProjectName,url); let __url=url; if(!checkUrl(url)){ //根据setting配置是否带e5 __url=(window._global?location.origin:window.HIVUI_SETTING.serverUrl)+url; } if(openType==2){//弹窗 this.$refs.Main.menuOpenList.push({ title:title, url:__url, uid:uid, }); }else if(openType==3){//浏览器标签打开 window.open(__url,"_blank"); }else{//主界面框架标签打开 window.Sys.addTab(__url,title,uid,callback,nearest); } }, hideTitle(name){ this.hasTitle = name; this.toleft = name?'71px':'49px'; this.sideWidth = name?'70px':'48px' }, /** * 是否全屏并按键ESC键的方法 / checkFull() { var isFull = document.fullscreenEnabled \|\| window.fullScreen \|\| document.webkitIsFullScreen \|\| document.msFullscreenEnabled // to fix : false \|\| undefined == undefined if (isFull === undefined) { isFull = false } return isFull }, handleFullScreen(){ screenfull.toggle() }, onchange(){ // console.log(this.isFullscreen) if(this.isFullscreen==true){ // this.$refs.Main.isFullscreen = true this.$refs.Sidebar.$el.style.top=0 this.$refs.Sidebar.$el.style.left=0 this.$refs.Main.$el.style.top=0 this.$refs.Main.$el.style.left=0 // console.log('222',this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style) this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.display='none' this.$refs.Sidebar.$el.style.display = 'none' this.$refs.Main.$refs['cmp-tabs'].resize() }else{ // console.log(222) // console.log('top',this.top) this.$refs['Sidebar'].$el.style.top=this.mainTop+this.navTop+'px' if(!this.sysConfig.isSinglePage){ this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.display='block'; } if(this.layout != 'level'&&this.hasQuickNav&&!this.isFullscreen){ this.$refs.Sidebar.$el.style.display = 'block'; } if(this.layout === 'level'){ this.$refs['Main'].$el.style.top=this.navTop+'px' this.$refs['Main'].$el.style.left=this.left }else{ this.$refs['Main'].$el.style.top=this.mainTop+this.navTop+'px' this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.top=this.mainTop+this.navTop+'px' this.$refs['Main'].$el.style.left=this.left this.$refs['Navbar'].$el.style.top=this.navTop+'px' this.$refs.Navbar.$el.style.display='block' } this.$refs.Main.$refs['cmp-tabs'].resize() } }, showTab(){ if(this.isFullscreen){ clearTimeout(this.timeout); this.timeout = setTimeout(()=>{ if(!this.sysConfig.isSinglePage){ this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.display='block' this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.top=this.mainTop+'px' } // this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.top='50px' // console.log(this.$refs.Main.$el.style.top) if(this.layout === 'level'){ this.$refs.Sidebar.$el.style.display = 'block' if(this.sysConfig.isSinglePage){ this.$refs.Sidebar.$el.style.top = '0px' }else{ this.$refs.Sidebar.$el.style.top = '39px' } }else{ // this.$refs.Sidebar.$el.style.display = 'block' this.$refs.Navbar.$el.style.display='none'; this.$refs.Navbar.$el.style.top=0 this.$refs.Navbar.$el.style.display='block' } // this.$refs.Main.$refs['cmp-tabs'].resize() },0); } }, hideTab(){ if(this.isFullscreen){ clearTimeout(this.timeout); this.timeout = setTimeout(()=>{ this.$refs.Main.$el.style.top=0 this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.display='none' if(this.layout === 'level'){ this.$refs.Sidebar.$el.style.display = 'none' }else{ this.$refs.Navbar.$el.style.display='none' } // this.$refs.Main.$refs['cmp-tabs'].resize() },0); } }, KeyDown(event) { if (event.keyCode === 122) { event.returnValue = false; this.handleFullScreen(); } } }, created(){ //单页模式强制左右布局 if(this.sysConfig.isSinglePage){ window.localStorage.setItem('layout','level'); }else if(this.sysConfig.layout&&!window.localStorage.getItem('layout')){ if(this.sysConfig.layout=="top"){ window.localStorage.setItem('layout','vertical'); }else if(this.sysConfig.layout=="left"){ window.localStorage.setItem('layout','level'); } } }, mounted(){ this.navTop = this.$refs.Header.$el.offsetHeight this.left = this.$refs.Main.$el.style.left console.log('left', this.isFullscreen) if(this.layout === 'level'){ this.totop = this.$refs.Header.$el.offsetHeight \|\| 50 }else{ this.mainTop = this.$refs.Navbar.$el.offsetHeight // console.log('mainTop', this.mainTop) } this.onchange(); window.onresize = () => { // 全屏下监控是否按键了ESC if (!this.checkFull()) { // 全屏下按键esc后要执行的动作 this.isFullscreen = false } this.isFullscreen=screenfull.isFullscreen this.onchange() }, window.addEventListener("keydown", this.KeyDown, true);//监听按键事件 } } </script> <style lang="less" scoped> .menuOpenDialog{ ::v-deep .el-dialog__body{ padding-top:0; } } </style> <template> <div v-if="layout == 'level'" class="pl-page" :class="isFullscreen?'showTab':''"> <div :style="fullScreenTabHandleStyle" @mouseenter="showTab"></div> <Header v-show="!isFullscreen" :hasTitle="hasTitle" :logoWidth="logoWidth" ref="Header" style="box-shadow: 0 5px 7px rgba(221,221,221,0.5);z-index:10"></Header> <!-- <Navbar></Navbar> --> <Sidebar ref="Sidebar" :hasTitle="hasTitle" :sideWidth="sideWidth" :totop="totop" style="z-index: 11"></Sidebar> <Main ref="Main" @onFullScreen="handleFullScreen" :style="{left:toleft, top:totop+'px'}"></Main> </div> <div v-else class="pl-page" :class="isFullscreen?'showTab':''"> <div :style="fullScreenTabHandleStyle" @mouseenter="showTab"></div> <Header ref="Header" :logoWidth="logoWidth" v-show="!isFullscreen"></Header> <Navbar ref="Navbar" v-show="!isFullscreen"></Navbar> <Sidebar ref="Sidebar" v-show="hasQuickNav&&!isFullscreen"></Sidebar> <Main ref="Main" @onFullScreen="handleFullScreen" :style="{left:hasQuickNav?71:0}"></Main> </div> </template> <script> import {baseURL,codeProjectName,requestUrl} from '@main/config' import {getMenus} from '@main/api/menu' import {checkUrl} from '@main/utils/index' import {Header,Navbar,Sidebar,Main} from "./components" import screenfull from 'screenfull' // import { setTimeout } from 'timers'; export default { components:{ Header,Navbar,Sidebar,Main }, provide(){ let me=this; return { addTab(item){ // url,title,uid,callback,nearest // this.addTab(item);//inject 提供的方法只能传一个参数 me.addTab(item.ssoUrl\|\|item.resUrl,item.name,item.resId,item.callback,item.nearest,item.openType); // me.addTab(url,title,uid,callback,nearest); }, showTab(){ // console.log('layout index vue : showTab') me.showTab(); }, hideTab(){ // console.log('layout index vue : hideTab') me.hideTab(); } } }, data(){ return { hasTitle: true, toleft: window.__sysConfig.isMenuWordwrap?(window.__sysConfig.leftMenuWidth?(window.__sysConfig.leftMenuWidth+"px"):'141px'):'71px', sideWidth: window.__sysConfig.isMenuWordwrap?(window.__sysConfig.leftMenuWidth?(window.__sysConfig.leftMenuWidth+"px"):'140px'):'70px', logoWidth:'140px', totop: 50, isFullscreen: false, top: '', left: '', mainTop: '', navTop: '', timeout: null, sysConfig: this.$store.state.app.config, } }, computed:{ hasQuickNav(){ return this.$store.getters.navs.length; }, layout(){ return window.localStorage.getItem('layout'); }, isTitle(){ return this.hasTitle; }, fullScreenTabHandleStyle(){ let baseStyle={ position: "absolute", left: 0, top: 0, "z-index": 10000, }; if(this.layout=="level"){ Object.assign(baseStyle,{ height: "100%", width: "1px", }); }else{ Object.assign(baseStyle,{ height: "1px", width: "100%", }); } return baseStyle; } }, methods:{ addTab(url,title,uid,callback,nearest,openType){ console.log('layout addTab :',baseURL,codeProjectName,url); let __url=url; if(!checkUrl(url)){ //根据setting配置是否带e5 __url=(window._global?location.origin:window.HIVUI_SETTING.serverUrl)+url; } if(openType==2){//弹窗 this.$refs.Main.menuOpenList.push({ title:title, url:__url, uid:uid, }); }else if(openType==3){//浏览器标签打开 window.open(__url,"_blank"); }else{//主界面框架标签打开 window.Sys.addTab(__url,title,uid,callback,nearest); } }, hideTitle(name){ this.hasTitle = name; this.toleft = name?'71px':'49px'; this.sideWidth = name?'70px':'48px' }, /* * 是否全屏并按键ESC键的方法 */ checkFull() { var isFull = document.fullscreenEnabled \|\| window.fullScreen \|\| document.webkitIsFullScreen \|\| document.msFullscreenEnabled // to fix : false \|\| undefined == undefined if (isFull === undefined) { isFull = false } return isFull }, handleFullScreen(){ screenfull.toggle() }, onchange(){ // console.log(this.isFullscreen) if(this.isFullscreen==true){ // this.$refs.Main.isFullscreen = true this.$refs.Sidebar.$el.style.top=0 this.$refs.Sidebar.$el.style.left=0 this.$refs.Main.$el.style.top=0 this.$refs.Main.$el.style.left=0 // console.log('222',this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style) this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.display='none' this.$refs.Sidebar.$el.style.display = 'none' this.$refs.Main.$refs['cmp-tabs'].resize() }else{ // console.log(222) // console.log('top',this.top) this.$refs['Sidebar'].$el.style.top=this.mainTop+this.navTop+'px' if(!this.sysConfig.isSinglePage){ this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.display='block'; } if(layout != 'level'&&hasQuickNav&&!isFullscreen){ this.$refs.Sidebar.$el.style.display = 'block'; } if(window.localStorage.getItem('layout') === 'level'){ this.$refs['Main'].$el.style.top=this.navTop+'px' this.$refs['Main'].$el.style.left=this.left }else{ this.$refs['Main'].$el.style.top=this.mainTop+this.navTop+'px' this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.top=this.mainTop+this.navTop+'px' this.$refs['Main'].$el.style.left=this.left this.$refs['Navbar'].$el.style.top=this.navTop+'px' this.$refs.Navbar.$el.style.display='block' } this.$refs.Main.$refs['cmp-tabs'].resize() } }, showTab(){ if(this.isFullscreen){ clearTimeout(this.timeout); this.timeout = setTimeout(()=>{ if(!this.sysConfig.isSinglePage){ this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.display='block' this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.top=this.mainTop+'px' } // this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.top='50px' // console.log(this.$refs.Main.$el.style.top) if(window.localStorage.getItem('layout') === 'level'){ this.$refs.Sidebar.$el.style.display = 'block' if(this.sysConfig.isSinglePage){ this.$refs.Sidebar.$el.style.top = '0px' }else{ this.$refs.Sidebar.$el.style.top = '39px' } }else{ // this.$refs.Sidebar.$el.style.display = 'block' this.$refs.Navbar.$el.style.display='none'; this.$refs.Navbar.$el.style.top=0 this.$refs.Navbar.$el.style.display='block' } // this.$refs.Main.$refs['cmp-tabs'].resize() },0); } }, hideTab(){ if(this.isFullscreen){ clearTimeout(this.timeout); this.timeout = setTimeout(()=>{ this.$refs.Main.$el.style.top=0 this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.display='none' if(window.localStorage.getItem('layout') === 'level'){ this.$refs.Sidebar.$el.style.display = 'none' }else{ this.$refs.Navbar.$el.style.display='none' } // this.$refs.Main.$refs['cmp-tabs'].resize() },0); } }, KeyDown(event) { if (event.keyCode === 122) { event.returnValue = false; this.handleFullScreen(); } } }, created(){ //单页模式强制左右布局 if(this.sysConfig.isSinglePage){ window.localStorage.setItem('layout','level'); }else if(this.sysConfig.layout&&!window.localStorage.getItem('layout')){ if(this.sysConfig.layout=="top"){ window.localStorage.setItem('layout','vertical'); }else if(this.sysConfig.layout=="left"){ window.localStorage.setItem('layout','level'); } } }, mounted(){ this.navTop = this.$refs.Header.$el.offsetHeight this.left = this.$refs.Main.$el.style.left console.log('left', this.isFullscreen) if(window.localStorage.getItem('layout') === 'level'){ this.totop = this.$refs.Header.$el.offsetHeight \|\| 50 }else{ this.mainTop = this.$refs.Navbar.$el.offsetHeight // console.log('mainTop', this.mainTop) } this.onchange(); window.onresize = () => { // 全屏下监控是否按键了ESC if (!this.checkFull()) { // 全屏下按键esc后要执行的动作 this.isFullscreen = false } this.isFullscreen=screenfull.isFullscreen this.onchange() }, window.addEventListener("keydown", this.KeyDown, true);//监听按键事件 } } </script> <style lang="less" scoped> .menuOpenDialog{ ::v-deep .el-dialog__body{ padding-top:0; } } </style>

Ignore Space Show notes View

project/hivuiMain/views/layout/index.vue

<template>
    <div v-if="layout == 'level'" class="pl-page" :class="isFullscreen?'showTab':''">
        <div :style="fullScreenTabHandleStyle" @mouseenter="showTab"></div>
        <Header v-show="!isFullscreen" :hasTitle="hasTitle" :logoWidth="logoWidth" ref="Header" style="box-shadow: 0 5px 7px rgba(221,221,221,0.5);z-index:10"></Header>
        
        <Sidebar ref="Sidebar" :hasTitle="hasTitle" :sideWidth="sideWidth" :totop="totop" style="z-index: 11"></Sidebar>
        <Main ref="Main" @onFullScreen="handleFullScreen" :style="{left:toleft, top:totop+'px'}"></Main>
    </div>
    <div v-else class="pl-page" :class="isFullscreen?'showTab':''">
        <div :style="fullScreenTabHandleStyle" @mouseenter="showTab"></div>
        <Header ref="Header" :logoWidth="logoWidth" v-show="!isFullscreen"></Header>
        <Navbar ref="Navbar" v-show="!isFullscreen"></Navbar>
        <Sidebar ref="Sidebar" v-show="hasQuickNav&&!isFullscreen"></Sidebar>
        <Main ref="Main" @onFullScreen="handleFullScreen" :style="{left:hasQuickNav?71:0}"></Main>
    </div>
</template>
<script>
import {baseURL,codeProjectName,requestUrl} from '@main/config'
import {getMenus} from '@main/api/menu'
import {checkUrl} from '@main/utils/index'
import {Header,Navbar,Sidebar,Main} from "./components"
import screenfull from 'screenfull'
// import { setTimeout } from 'timers';
export default {    
    components:{
        Header,Navbar,Sidebar,Main
    },
    provide(){
        let me=this;
        return {
            addTab(item){
                // url,title,uid,callback,nearest                
                // this.addTab(item);//inject 提供的方法只能 传一个参数
                me.addTab(item.ssoUrl||item.resUrl,item.name,item.resId,item.callback,item.nearest,item.openType);
                // me.addTab(url,title,uid,callback,nearest);
            },
            showTab(){
                // console.log('layout index vue : showTab')
                me.showTab();
            },
            hideTab(){
                // console.log('layout index vue : hideTab')
                me.hideTab();
            }
        }
    },
    data(){
        return {
            hasTitle: true,
            toleft: window.__sysConfig.isMenuWordwrap?(window.__sysConfig.leftMenuWidth?(window.__sysConfig.leftMenuWidth+"px"):'141px'):'71px',
            sideWidth: window.__sysConfig.isMenuWordwrap?(window.__sysConfig.leftMenuWidth?(window.__sysConfig.leftMenuWidth+"px"):'140px'):'70px',
            logoWidth:'140px',
            totop: 50,
            isFullscreen: false,
            top: '',
            left: '',
            mainTop: '',
            navTop: '',
            timeout: null,
            sysConfig: this.$store.state.app.config,
        }
    },
    computed:{
        hasQuickNav(){
            return this.$store.getters.navs.length;
        },
        layout(){
            return window.localStorage.getItem('layout');
        },
        isTitle(){
            return this.hasTitle;
        },
        fullScreenTabHandleStyle(){
            let baseStyle={
                position: "absolute",
                left: 0,
                top: 0,
                "z-index": 10000,
            };
            if(this.layout=="level"){
                Object.assign(baseStyle,{
                    height: "100%",
                    width: "1px",
                });
            }else{
                Object.assign(baseStyle,{
                    height: "1px",
                    width: "100%",
                });
            }
            return baseStyle;
        }
    },
    methods:{
        addTab(url,title,uid,callback,nearest,openType){
            console.log('layout addTab :',baseURL,codeProjectName,url);
            let __url=url;
            if(!checkUrl(url)){
                //根据setting配置是否带e5
                __url=(window._global?location.origin:window.HIVUI_SETTING.serverUrl)+url;
            }
            if(openType==2){//弹窗
                this.$refs.Main.menuOpenList.push({
                    title:title,
                    url:__url,
                    uid:uid,
                });
            }else if(openType==3){//浏览器标签打开
                window.open(__url,"_blank");
            }else{//主界面框架标签打开
                window.Sys.addTab(__url,title,uid,callback,nearest);
            }
        },
        hideTitle(name){
            this.hasTitle = name;
            this.toleft = name?'71px':'49px';
            this.sideWidth = name?'70px':'48px'
        },
        /**
         * 是否全屏并按键ESC键的方法
         */
        checkFull() {
            var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled
            // to fix : false || undefined == undefined
            if (isFull === undefined) {
                isFull = false
            }
            return isFull
        },
         handleFullScreen(){
            screenfull.toggle()
        },
        onchange(){
            // console.log(this.isFullscreen)
            if(this.isFullscreen==true){
                // this.$refs.Main.isFullscreen = true
                this.$refs.Sidebar.$el.style.top=0
                this.$refs.Sidebar.$el.style.left=0
                this.$refs.Main.$el.style.top=0
                this.$refs.Main.$el.style.left=0
                // console.log('222',this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style)
                this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.display='none'
                this.$refs.Sidebar.$el.style.display = 'none'
                this.$refs.Main.$refs['cmp-tabs'].resize()
            }else{
                // console.log(222)
                // console.log('top',this.top)
                this.$refs['Sidebar'].$el.style.top=this.mainTop+this.navTop+'px'
                if(!this.sysConfig.isSinglePage){
                    this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.display='block';
                }
                if(this.layout != 'level'&&this.hasQuickNav&&!this.isFullscreen){
                    this.$refs.Sidebar.$el.style.display = 'block';
                }
                if(this.layout === 'level'){
                    this.$refs['Main'].$el.style.top=this.navTop+'px'
                    this.$refs['Main'].$el.style.left=this.left
                }else{
                    this.$refs['Main'].$el.style.top=this.mainTop+this.navTop+'px'
                    this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.top=this.mainTop+this.navTop+'px'
                    this.$refs['Main'].$el.style.left=this.left
                    this.$refs['Navbar'].$el.style.top=this.navTop+'px'
                    this.$refs.Navbar.$el.style.display='block'
                }
                this.$refs.Main.$refs['cmp-tabs'].resize()
            }
        },
        showTab(){
            if(this.isFullscreen){
                
                clearTimeout(this.timeout);
                this.timeout = setTimeout(()=>{
                    if(!this.sysConfig.isSinglePage){
                        this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.display='block'
                        this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.top=this.mainTop+'px'
                    }
                    // this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.top='50px'
                    // console.log(this.$refs.Main.$el.style.top)
                    
                    if(this.layout === 'level'){
                        this.$refs.Sidebar.$el.style.display = 'block'
                        if(this.sysConfig.isSinglePage){
                            this.$refs.Sidebar.$el.style.top = '0px'
                        }else{
                            this.$refs.Sidebar.$el.style.top = '39px'
                        }
                    }else{
                        // this.$refs.Sidebar.$el.style.display = 'block'
                        this.$refs.Navbar.$el.style.display='none';
                        this.$refs.Navbar.$el.style.top=0
                        this.$refs.Navbar.$el.style.display='block'
                    }
                    // this.$refs.Main.$refs['cmp-tabs'].resize()

},0);
            }
        },
        hideTab(){
            if(this.isFullscreen){  
                clearTimeout(this.timeout);
                this.timeout = setTimeout(()=>{
                    this.$refs.Main.$el.style.top=0
                    this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.display='none'
                    if(this.layout === 'level'){
                        this.$refs.Sidebar.$el.style.display = 'none'
                    }else{
                        this.$refs.Navbar.$el.style.display='none'
                    }
                    // this.$refs.Main.$refs['cmp-tabs'].resize()
                },0);
                
            }
        },
        KeyDown(event) {
            if (event.keyCode === 122) {
                event.returnValue = false;
                this.handleFullScreen();
            }
        }
    },
    created(){
        //单页模式强制左右布局
        if(this.sysConfig.isSinglePage){
            window.localStorage.setItem('layout','level');
        }else if(this.sysConfig.layout&&!window.localStorage.getItem('layout')){
            if(this.sysConfig.layout=="top"){
                window.localStorage.setItem('layout','vertical');
            }else if(this.sysConfig.layout=="left"){
                window.localStorage.setItem('layout','level');
            }
        }
    },
    mounted(){
        this.navTop = this.$refs.Header.$el.offsetHeight
        this.left = this.$refs.Main.$el.style.left
        console.log('left', this.isFullscreen)
        if(this.layout === 'level'){
            this.totop = this.$refs.Header.$el.offsetHeight || 50
        }else{
            this.mainTop = this.$refs.Navbar.$el.offsetHeight
            // console.log('mainTop', this.mainTop)
        }
        this.onchange();
        window.onresize = () => {
            // 全屏下监控是否按键了ESC
            if (!this.checkFull()) {
            // 全屏下按键esc后要执行的动作
                this.isFullscreen = false
            }
            this.isFullscreen=screenfull.isFullscreen
            this.onchange()
        },
        window.addEventListener("keydown", this.KeyDown, true);//监听按键事件
    }
}
</script>
<style lang="less" scoped>
    .menuOpenDialog{
        ::v-deep .el-dialog__body{
            padding-top:0;
        }
    }
</style>

<template>
    <div v-if="layout == 'level'" class="pl-page" :class="isFullscreen?'showTab':''">
        <div :style="fullScreenTabHandleStyle" @mouseenter="showTab"></div>
        <Header v-show="!isFullscreen" :hasTitle="hasTitle" :logoWidth="logoWidth" ref="Header" style="box-shadow: 0 5px 7px rgba(221,221,221,0.5);z-index:10"></Header>
        
        <Sidebar ref="Sidebar" :hasTitle="hasTitle" :sideWidth="sideWidth" :totop="totop" style="z-index: 11"></Sidebar>
        <Main ref="Main" @onFullScreen="handleFullScreen" :style="{left:toleft, top:totop+'px'}"></Main>
    </div>
    <div v-else class="pl-page" :class="isFullscreen?'showTab':''">
        <div :style="fullScreenTabHandleStyle" @mouseenter="showTab"></div>
        <Header ref="Header" :logoWidth="logoWidth" v-show="!isFullscreen"></Header>
        <Navbar ref="Navbar" v-show="!isFullscreen"></Navbar>
        <Sidebar ref="Sidebar" v-show="hasQuickNav&&!isFullscreen"></Sidebar>
        <Main ref="Main" @onFullScreen="handleFullScreen" :style="{left:hasQuickNav?71:0}"></Main>
    </div>
</template>
<script>
import {baseURL,codeProjectName,requestUrl} from '@main/config'
import {getMenus} from '@main/api/menu'
import {checkUrl} from '@main/utils/index'
import {Header,Navbar,Sidebar,Main} from "./components"
import screenfull from 'screenfull'
// import { setTimeout } from 'timers';
export default {    
    components:{
        Header,Navbar,Sidebar,Main
    },
    provide(){
        let me=this;
        return {
            addTab(item){
                // url,title,uid,callback,nearest                
                // this.addTab(item);//inject 提供的方法只能 传一个参数
                me.addTab(item.ssoUrl||item.resUrl,item.name,item.resId,item.callback,item.nearest,item.openType);
                // me.addTab(url,title,uid,callback,nearest);
            },
            showTab(){
                // console.log('layout index vue : showTab')
                me.showTab();
            },
            hideTab(){
                // console.log('layout index vue : hideTab')
                me.hideTab();
            }
        }
    },
    data(){
        return {
            hasTitle: true,
            toleft: window.__sysConfig.isMenuWordwrap?(window.__sysConfig.leftMenuWidth?(window.__sysConfig.leftMenuWidth+"px"):'141px'):'71px',
            sideWidth: window.__sysConfig.isMenuWordwrap?(window.__sysConfig.leftMenuWidth?(window.__sysConfig.leftMenuWidth+"px"):'140px'):'70px',
            logoWidth:'140px',
            totop: 50,
            isFullscreen: false,
            top: '',
            left: '',
            mainTop: '',
            navTop: '',
            timeout: null,
            sysConfig: this.$store.state.app.config,
        }
    },
    computed:{
        hasQuickNav(){
            return this.$store.getters.navs.length;
        },
        layout(){
            return window.localStorage.getItem('layout');
        },
        isTitle(){
            return this.hasTitle;
        },
        fullScreenTabHandleStyle(){
            let baseStyle={
                position: "absolute",
                left: 0,
                top: 0,
                "z-index": 10000,
            };
            if(this.layout=="level"){
                Object.assign(baseStyle,{
                    height: "100%",
                    width: "1px",
                });
            }else{
                Object.assign(baseStyle,{
                    height: "1px",
                    width: "100%",
                });
            }
            return baseStyle;
        }
    },
    methods:{
        addTab(url,title,uid,callback,nearest,openType){
            console.log('layout addTab :',baseURL,codeProjectName,url);
            let __url=url;
            if(!checkUrl(url)){
                //根据setting配置是否带e5
                __url=(window._global?location.origin:window.HIVUI_SETTING.serverUrl)+url;
            }
            if(openType==2){//弹窗
                this.$refs.Main.menuOpenList.push({
                    title:title,
                    url:__url,
                    uid:uid,
                });
            }else if(openType==3){//浏览器标签打开
                window.open(__url,"_blank");
            }else{//主界面框架标签打开
                window.Sys.addTab(__url,title,uid,callback,nearest);
            }
        },
        hideTitle(name){
            this.hasTitle = name;
            this.toleft = name?'71px':'49px';
            this.sideWidth = name?'70px':'48px'
        },
        /**
         * 是否全屏并按键ESC键的方法
         */
        checkFull() {
            var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled
            // to fix : false || undefined == undefined
            if (isFull === undefined) {
                isFull = false
            }
            return isFull
        },
         handleFullScreen(){
            screenfull.toggle()
        },
        onchange(){
            // console.log(this.isFullscreen)
            if(this.isFullscreen==true){
                // this.$refs.Main.isFullscreen = true
                this.$refs.Sidebar.$el.style.top=0
                this.$refs.Sidebar.$el.style.left=0
                this.$refs.Main.$el.style.top=0
                this.$refs.Main.$el.style.left=0
                // console.log('222',this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style)
                this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.display='none'
                this.$refs.Sidebar.$el.style.display = 'none'
                this.$refs.Main.$refs['cmp-tabs'].resize()
            }else{
                // console.log(222)
                // console.log('top',this.top)
                this.$refs['Sidebar'].$el.style.top=this.mainTop+this.navTop+'px'
                if(!this.sysConfig.isSinglePage){
                    this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.display='block';
                }
                if(layout != 'level'&&hasQuickNav&&!isFullscreen){
                    this.$refs.Sidebar.$el.style.display = 'block';
                }
                if(window.localStorage.getItem('layout') === 'level'){
                    this.$refs['Main'].$el.style.top=this.navTop+'px'
                    this.$refs['Main'].$el.style.left=this.left
                }else{
                    this.$refs['Main'].$el.style.top=this.mainTop+this.navTop+'px'
                    this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.top=this.mainTop+this.navTop+'px'
                    this.$refs['Main'].$el.style.left=this.left
                    this.$refs['Navbar'].$el.style.top=this.navTop+'px'
                    this.$refs.Navbar.$el.style.display='block'
                }
                this.$refs.Main.$refs['cmp-tabs'].resize()
            }
        },
        showTab(){
            if(this.isFullscreen){
                
                clearTimeout(this.timeout);
                this.timeout = setTimeout(()=>{
                    if(!this.sysConfig.isSinglePage){
                        this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.display='block'
                        this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.top=this.mainTop+'px'
                    }
                    // this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.top='50px'
                    // console.log(this.$refs.Main.$el.style.top)
                    
                    if(window.localStorage.getItem('layout') === 'level'){
                        this.$refs.Sidebar.$el.style.display = 'block'
                        if(this.sysConfig.isSinglePage){
                            this.$refs.Sidebar.$el.style.top = '0px'
                        }else{
                            this.$refs.Sidebar.$el.style.top = '39px'
                        }
                    }else{
                        // this.$refs.Sidebar.$el.style.display = 'block'
                        this.$refs.Navbar.$el.style.display='none';
                        this.$refs.Navbar.$el.style.top=0
                        this.$refs.Navbar.$el.style.display='block'
                    }
                    // this.$refs.Main.$refs['cmp-tabs'].resize()

},0);
            }
        },
        hideTab(){
            if(this.isFullscreen){  
                clearTimeout(this.timeout);
                this.timeout = setTimeout(()=>{
                    this.$refs.Main.$el.style.top=0
                    this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.display='none'
                    if(window.localStorage.getItem('layout') === 'level'){
                        this.$refs.Sidebar.$el.style.display = 'none'
                    }else{
                        this.$refs.Navbar.$el.style.display='none'
                    }
                    // this.$refs.Main.$refs['cmp-tabs'].resize()
                },0);
                
            }
        },
        KeyDown(event) {
            if (event.keyCode === 122) {
                event.returnValue = false;
                this.handleFullScreen();
            }
        }
    },
    created(){
        //单页模式强制左右布局
        if(this.sysConfig.isSinglePage){
            window.localStorage.setItem('layout','level');
        }else if(this.sysConfig.layout&&!window.localStorage.getItem('layout')){
            if(this.sysConfig.layout=="top"){
                window.localStorage.setItem('layout','vertical');
            }else if(this.sysConfig.layout=="left"){
                window.localStorage.setItem('layout','level');
            }
        }
    },
    mounted(){
        this.navTop = this.$refs.Header.$el.offsetHeight
        this.left = this.$refs.Main.$el.style.left
        console.log('left', this.isFullscreen)
        if(window.localStorage.getItem('layout') === 'level'){
            this.totop = this.$refs.Header.$el.offsetHeight || 50
        }else{
            this.mainTop = this.$refs.Navbar.$el.offsetHeight
            // console.log('mainTop', this.mainTop)
        }
        this.onchange();
        window.onresize = () => {
            // 全屏下监控是否按键了ESC
            if (!this.checkFull()) {
            // 全屏下按键esc后要执行的动作
                this.isFullscreen = false
            }
            this.isFullscreen=screenfull.isFullscreen
            this.onchange()
        },
        window.addEventListener("keydown", this.KeyDown, true);//监听按键事件
    }
}
</script>
<style lang="less" scoped>
    .menuOpenDialog{
        ::v-deep .el-dialog__body{
            padding-top:0;
        }
    }
</style>

Ignore Space Show notes View project/hivuiMain/views/personalCenter/components/UserUpdate.vue
<template> <el-form :model="form" :rules="rules" ref="form"> <el-row> <el-col :span="12"> <el-form-item :label="$t('hivuiMain_personalCenter_name')" prop="FUSERNAME"> <el-input v-model="form.FUSERNAME"></el-input> </el-form-item> <el-form-item :label="$t('hivuiMain_personalCenter_sex')" prop="FSEX"> <el-radio-group v-model="form.FSEX"> <el-radio :label="1">{{ $t('hivuiMain_personalCenter_male') }}</el-radio> <el-radio :label="0">{{ $t('hivuiMain_personalCenter_female') }}</el-radio> </el-radio-group> </el-form-item> <el-form-item :label="$t('hivuiMain_personalCenter_birthday')" prop="FBIRTHDAY"> <el-date-picker format="yyyy-MM-dd" type="date" v-model="form.FBIRTHDAY" style="width: 100%" ></el-date-picker> </el-form-item> <el-form-item :label="$t('hivuiMain_personalCenter_mbphone')" prop="FMBPHONE"> <el-input v-model="form.FMBPHONE"></el-input> </el-form-item> <el-form-item :label="$t('hivuiMain_personalCenter_email')" prop="FEMAIL"> <el-input v-model="form.FEMAIL"></el-input> </el-form-item> <el-form-item label="QQ" prop="FQQ"> <el-input v-model="form.FQQ"></el-input> </el-form-item> <el-form-item :label="$t('hivuiMain_personalCenter_WeChat')" prop="FWEIXIN"> <el-input v-model="form.FWEIXIN"></el-input> </el-form-item> <el-form-item :label="$t('hivuiMain_personalCenter_usersfz')" prop="FUSERSFZ"> <el-input v-model="form.FUSERSFZ"></el-input> </el-form-item> <el-form-item :label="$t('hivuiMain_personalCenter_address')" prop="FADDRESS"> <el-input type="textarea" :rows="3" v-model="form.FADDRESS" ></el-input> </el-form-item> </el-col> <el-col :span="12" style="padding-left: 20px"> <el-form-item label="" prop="FUSERPHOTO"> <el-upload class="avatar-uploader" :http-request="uploadUserPhoto" :show-file-list="false" accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP" > <div class="showImg" v-if="userPhotoUrl"> <img :src="userPhotoUrl" class="avatar user" /> <span ref="showActions" class="el-upload-list__item-actions"> <span class="el-upload-list__item-preview" @click.stop="handlePreview(file, 'userPhoto')" > <i class="el-icon-zoom-in"></i> </span> <span v-if="!disabled" class="el-upload-list__item-delete" @click.stop="handleRemove(file, 'userPhoto')" > <i class="el-icon-delete"></i> </span> </span> </div> <i v-else class="el-icon-plus avatar-uploader-icon user" :style="`background-image:url(${userPic});background-size: 100% 100%`" ></i> </el-upload> </el-form-item> <el-form-item label="" prop="FUSERSFZPIC1"> <el-upload class="avatar-uploader" :http-request="uploadSfzPic1" :show-file-list="false" accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP" > <div class="showImg" v-if="sfzPic1Url"> <img :src="sfzPic1Url" class="avatar sfz" /> <span ref="showActions" class="el-upload-list__item-actions"> <span class="el-upload-list__item-preview" @click.stop="handlePreview(file, 'sfzPic1')" > <i class="el-icon-zoom-in"></i> </span> <span v-if="!disabled" class="el-upload-list__item-delete" @click.stop="handleRemove(file, 'sfzPic1')" > <i class="el-icon-delete"></i> </span> </span> </div> <div v-else class="avatar-uploader-icon sfz" :style="`background-image:url(${sfz1Pic});background-size: 100% 100%`" ></div> </el-upload> </el-form-item> <el-form-item label="" prop="FUSERSFZPIC2"> <el-upload class="avatar-uploader" :http-request="uploadSfzPic2" :show-file-list="false" accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP" > <div class="showImg" v-if="sfzPic2Url"> <img :src="sfzPic2Url" class="avatar sfz" /> <span ref="showActions" class="el-upload-list__item-actions"> <span class="el-upload-list__item-preview" @click.stop="handlePreview(file, 'sfzPic2')" > <i class="el-icon-zoom-in"></i> </span> <span v-if="!disabled" class="el-upload-list__item-delete" @click.stop="handleRemove(file, 'sfzPic2')" > <i class="el-icon-delete"></i> </span> </span> </div> <div v-else class="avatar-uploader-icon sfz" :style="`background-image:url(${sfz2Pic});background-size: 100% 100%`" ></div> </el-upload> </el-form-item> </el-col> </el-row> <el-form-item style="text-align: center"> <el-button type="primary" @click="submitForm('form')">{{ $t("hivuiMain_des_save") }}</el-button> <!-- <el-button @click="resetForm('form')">{{ $t("hivuiMain_des_cancel")}}</el-button> --> </el-form-item> <el-dialog v-if="dialogVisible" :visible.sync="dialogVisible" ref="dialog"> <img width="100%" :src="dialogImageUrl" alt="" /> </el-dialog> </el-form> </template> <script> import { update, upload } from "@main/api/user.js"; import { getToken } from "@main/utils/auth"; import userPic from "@main/assets/user.png"; import sfz1Pic from "@main/assets/sfz1.jpg"; import sfz2Pic from "@main/assets/sfz2.jpg"; export default { data() { return { form: { FUSERNAME: "", FSEX: "", FBIRTHDAY: "", FMBPHONE: "", FEMAIL: "", FQQ: "", FWEIXIN: "", FUSERSFZ: "", FADDRESS: [], FUSERPHOTO: "", FUSERSFZPIC1: "", FUSERSFZPIC2: "", }, // userPhotoUrl: '', // sfzPic1Url: '', // sfzPic2Url: '', rules: { FMBPHONE: [ { validator: this.isPhone, trigger: "blur", }, ], FEMAIL: [ { validator: this.isEmail, trigger: "blur", }, ], FUSERSFZ: [ { validator: this.isIdCard, trigger: "blur", }, ], }, dialogVisible: false, dialogImageUrl: "", userPic: userPic, sfz1Pic: sfz1Pic, sfz2Pic: sfz2Pic, copyForm:{} }; }, computed: { userPhotoUrl() { if (this.form && this.form.FUSERPHOTO) { return this._getImageUrl(this.form.FUSERPHOTO); } else { return ""; } }, sfzPic1Url() { if (this.form && this.form.FUSERSFZPIC1) { return this._getImageUrl(this.form.FUSERSFZPIC1); } else { return ""; } }, sfzPic2Url() { if (this.form && this.form.FUSERSFZPIC2) { return this._getImageUrl(this.form.FUSERSFZPIC2); } else { return ""; } }, reviewUrl(){ return this.$HI.review.includes(window.HIVUI_SETTING.url) ? this.$HI.review : window.HIVUI_SETTING.url + this.$HI.review } }, mounted() {}, methods: { uploadUserPhoto(param) { this.handleUpload(param, "userPhoto"); }, uploadSfzPic1(param) { this.handleUpload(param, "sfzPic1"); }, uploadSfzPic2(param) { this.handleUpload(param, "sfzPic2"); }, /* 手动上传附件 / handleUpload(param, type) { let formData = new FormData(); formData.append("files", param.file); let _this = this; upload(formData).then((res) => { if (type == "userPhoto") { let path = res.dataPack[0].nname; _this.form.FUSERPHOTO = path; // _this.userPhotoUrl = _this._getImageUrl(path); } else if (type == "sfzPic1") { let path = res.dataPack[0].nname; _this.form.FUSERSFZPIC1 = path; // _this.sfzPic1Url = _this._getImageUrl(path); } else if (type == "sfzPic2") { let path = res.dataPack[0].nname; _this.form.FUSERSFZPIC2 = path; // _this.sfzPic2Url = _this._getImageUrl(path); } }); }, _getImageUrl(path) { let token = getToken(); if (typeof path == "string") { path = path.replace(/\\/g, "/"); if(path.includes(";") && path.split(";").length >= 2){ path = path.split(";")[2]; } } return `${this.reviewUrl}?relativePath=${path}&access_token=${token}`; }, submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { let form = { ...this.form }; if (form.FBIRTHDAY && typeof form.FBIRTHDAY == "object") { form.FBIRTHDAY = this.formatDate(form.FBIRTHDAY); }else{ form.FBIRTHDAY = null } let data = this.getEditData() data.$old = { ...form }; data.$m = "/platf/user-info/entity/SysUserInfoBizEntity.xml"; update(data).then((res) => { this.$message({ type: "success", message: this.$t("hivuiMain_personalCenter_editTips") \|\| "修改成功", }); }); } else { console.log("error submit!!"); return false; } }); }, // resetForm(formName) { // this.$refs[formName].resetFields(); // }, isPhone(rule, value, callback) { const reg = /^[1][3,4,5,7,8,9][0-9]{9}$/; if (value == "" \|\| value == undefined \|\| value == null) { callback(); } else { if (!reg.test(value) && value != "") { callback( new Error( this.$t("hivuiMain_validate_FMBPHONE") \|\| "电话号码格式有误" ) ); } else { callback(); } } }, isEmail(rule, value, callback) { const reg = /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/; if (value == "" \|\| value == undefined \|\| value == null) { callback(); } else { if (!reg.test(value)) { callback( new Error( this.$t("hivuiMain_validate_FEMAIL") \|\| "邮箱地址格式有误" ) ); } else { callback(); } } }, isIdCard(rule, value, callback) { const reg = /^[1-9]\d{5}(18\|19\|20\|(3\d))\d{2}((0[1-9])\|(1[0-2]))(([0-2][1-9])\|10\|20\|30\|31)\d{3}[0-9Xx]$/; if (value == "" \|\| value == undefined \|\| value == null) { callback(); } else { if (!reg.test(value)) { callback( new Error( this.$t("hivuiMain_validate_FIDCARD") \|\| "身份证号格式有误" ) ); } else { callback(); } } }, formatDate(date) { const year = date.getFullYear(); const month = (date.getMonth() + 1).toString().padStart(2, "0"); const day = date.getDate().toString().padStart(2, "0"); return `${year}-${month}-${day}`; }, handlePreview(file, type) { this.dialogImageUrl = type == "userPhoto" ? this.userPhotoUrl : type == "sfzPic1" ? this.sfzPic1Url : type == "sfzPic2" ? this.sfzPic2Url : ""; this.dialogVisible = true; let dialog = this.$refs.dialog; dialog.$el.onclick = function () { event.stopPropagation(); }; }, handleRemove(file, type) { if (type == "userPhoto") { this.form.FUSERPHOTO = ""; } else if (type == "sfzPic1") { this.form.FUSERSFZPIC1 = ""; } else if (type == "sfzPic2") { this.form.FUSERSFZPIC2 = ""; } }, getEditData(){ let data = {} for(let key in this.form){ if(this.form[key] !== this.copyForm[key]){ data[key] = this.form[key] } } return data } }, }; </script> <style lang="less" scope> .avatar-uploader .el-upload { border: 1px dashed transparent; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; } .avatar-uploader .el-upload:hover { border-color: #409eff; } .avatar-uploader-icon.user { font-size: 28px; color: #8c939d; width: 166px; height: 166px; line-height: 166px; text-align: center; } .avatar-uploader-icon.sfz { font-size: 28px; color: #8c939d; width: 318px; height: 200px; line-height: 200px; text-align: center; } .avatar.user { width: 166px; height: 166px; display: block; } .avatar.sfz { width: 318px; height: 200px; display: block; } .el-upload-list__item-actions { position: absolute; width: 100%; height: 100%; left: 0; top: 0; cursor: default; text-align: center; color: #fff; opacity: 0; font-size: 20px; background-color: rgba(0, 0, 0, 0.5); transition: opacity 0.3s; display: flex; align-items: center; justify-content: center; } .showImg:hover { .el-upload-list__item-actions { opacity: 1; } } .el-upload-list__item-delete { display: block; position: static; font-size: inherit; color: inherit; .el-icon-delete { font-family: element-icons !important; speak: none; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; line-height: 1; vertical-align: baseline; display: inline-block; -webkit-font-smoothing: antialiased; } } .el-upload-list__item-actions span + span { margin-left: 15px; } .el-upload-list__item-name i:hover, .el-upload-list__item-name a:hover { color: #409eff; } .el-radio--mini.is-bordered{ display: block; width: fit-content; margin-bottom: 10px; } .el-radio.is-bordered+.el-radio.is-bordered{ margin-left: 0; } </style> <template> <el-form :model="form" :rules="rules" ref="form"> <el-row> <el-col :span="12"> <el-form-item :label="$t('hivuiMain_personalCenter_name')" prop="FUSERNAME"> <el-input v-model="form.FUSERNAME"></el-input> </el-form-item> <el-form-item :label="$t('hivuiMain_personalCenter_sex')" prop="FSEX"> <el-radio-group v-model="form.FSEX"> <el-radio :label="1">{{ $t('hivuiMain_personalCenter_male') }}</el-radio> <el-radio :label="0">{{ $t('hivuiMain_personalCenter_female') }}</el-radio> </el-radio-group> </el-form-item> <el-form-item :label="$t('hivuiMain_personalCenter_birthday')" prop="FBIRTHDAY"> <el-date-picker format="yyyy-MM-dd" type="date" v-model="form.FBIRTHDAY" style="width: 100%" ></el-date-picker> </el-form-item> <el-form-item :label="$t('hivuiMain_personalCenter_mbphone')" prop="FMBPHONE"> <el-input v-model="form.FMBPHONE"></el-input> </el-form-item> <el-form-item :label="$t('hivuiMain_personalCenter_email')" prop="FEMAIL"> <el-input v-model="form.FEMAIL"></el-input> </el-form-item> <el-form-item label="QQ" prop="FQQ"> <el-input v-model="form.FQQ"></el-input> </el-form-item> <el-form-item :label="$t('hivuiMain_personalCenter_WeChat')" prop="FWEIXIN"> <el-input v-model="form.FWEIXIN"></el-input> </el-form-item> <el-form-item :label="$t('hivuiMain_personalCenter_usersfz')" prop="FUSERSFZ"> <el-input v-model="form.FUSERSFZ"></el-input> </el-form-item> <el-form-item :label="$t('hivuiMain_personalCenter_address')" prop="FADDRESS"> <el-input type="textarea" :rows="3" v-model="form.FADDRESS" ></el-input> </el-form-item> </el-col> <el-col :span="12" style="padding-left: 20px"> <el-form-item label="" prop="FUSERPHOTO"> <el-upload class="avatar-uploader" :http-request="uploadUserPhoto" :show-file-list="false" accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP" > <div class="showImg" v-if="userPhotoUrl"> <img :src="userPhotoUrl" class="avatar user" /> <span ref="showActions" class="el-upload-list__item-actions"> <span class="el-upload-list__item-preview" @click.stop="handlePreview(file, 'userPhoto')" > <i class="el-icon-zoom-in"></i> </span> <span v-if="!disabled" class="el-upload-list__item-delete" @click.stop="handleRemove(file, 'userPhoto')" > <i class="el-icon-delete"></i> </span> </span> </div> <i v-else class="el-icon-plus avatar-uploader-icon user" :style="`background-image:url(${userPic});background-size: 100% 100%`" ></i> </el-upload> </el-form-item> <el-form-item label="" prop="FUSERSFZPIC1"> <el-upload class="avatar-uploader" :http-request="uploadSfzPic1" :show-file-list="false" accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP" > <div class="showImg" v-if="sfzPic1Url"> <img :src="sfzPic1Url" class="avatar sfz" /> <span ref="showActions" class="el-upload-list__item-actions"> <span class="el-upload-list__item-preview" @click.stop="handlePreview(file, 'sfzPic1')" > <i class="el-icon-zoom-in"></i> </span> <span v-if="!disabled" class="el-upload-list__item-delete" @click.stop="handleRemove(file, 'sfzPic1')" > <i class="el-icon-delete"></i> </span> </span> </div> <div v-else class="avatar-uploader-icon sfz" :style="`background-image:url(${sfz1Pic});background-size: 100% 100%`" ></div> </el-upload> </el-form-item> <el-form-item label="" prop="FUSERSFZPIC2"> <el-upload class="avatar-uploader" :http-request="uploadSfzPic2" :show-file-list="false" accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP" > <div class="showImg" v-if="sfzPic2Url"> <img :src="sfzPic2Url" class="avatar sfz" /> <span ref="showActions" class="el-upload-list__item-actions"> <span class="el-upload-list__item-preview" @click.stop="handlePreview(file, 'sfzPic2')" > <i class="el-icon-zoom-in"></i> </span> <span v-if="!disabled" class="el-upload-list__item-delete" @click.stop="handleRemove(file, 'sfzPic2')" > <i class="el-icon-delete"></i> </span> </span> </div> <div v-else class="avatar-uploader-icon sfz" :style="`background-image:url(${sfz2Pic});background-size: 100% 100%`" ></div> </el-upload> </el-form-item> </el-col> </el-row> <el-form-item style="text-align: center"> <el-button type="primary" @click="submitForm('form')">{{ $t("hivuiMain_des_save") }}</el-button> <!-- <el-button @click="resetForm('form')">{{ $t("hivuiMain_des_cancel")}}</el-button> --> </el-form-item> <el-dialog v-if="dialogVisible" :visible.sync="dialogVisible" ref="dialog"> <img width="100%" :src="dialogImageUrl" alt="" /> </el-dialog> </el-form> </template> <script> import { update, upload } from "@main/api/user.js"; import { getToken } from "@main/utils/auth"; import userPic from "@main/assets/user.png"; import sfz1Pic from "@main/assets/sfz1.jpg"; import sfz2Pic from "@main/assets/sfz2.jpg"; export default { data() { return { form: { FUSERNAME: "", FSEX: "", FBIRTHDAY: "", FMBPHONE: "", FEMAIL: "", FQQ: "", FWEIXIN: "", FUSERSFZ: "", FADDRESS: [], FUSERPHOTO: "", FUSERSFZPIC1: "", FUSERSFZPIC2: "", }, // userPhotoUrl: '', // sfzPic1Url: '', // sfzPic2Url: '', rules: { FMBPHONE: [ { validator: this.isPhone, trigger: "blur", }, ], FEMAIL: [ { validator: this.isEmail, trigger: "blur", }, ], FUSERSFZ: [ { validator: this.isIdCard, trigger: "blur", }, ], }, dialogVisible: false, dialogImageUrl: "", userPic: userPic, sfz1Pic: sfz1Pic, sfz2Pic: sfz2Pic, copyForm:{} }; }, computed: { userPhotoUrl() { if (this.form && this.form.FUSERPHOTO) { return this._getImageUrl(this.form.FUSERPHOTO); } else { return ""; } }, sfzPic1Url() { if (this.form && this.form.FUSERSFZPIC1) { return this._getImageUrl(this.form.FUSERSFZPIC1); } else { return ""; } }, sfzPic2Url() { if (this.form && this.form.FUSERSFZPIC2) { return this._getImageUrl(this.form.FUSERSFZPIC2); } else { return ""; } }, reviewUrl(){ return this.$HI.review.includes(window.HIVUI_SETTING.url) ? this.$HI.review : window.HIVUI_SETTING.url + this.$HI.review } }, mounted() {}, methods: { uploadUserPhoto(param) { this.handleUpload(param, "userPhoto"); }, uploadSfzPic1(param) { this.handleUpload(param, "sfzPic1"); }, uploadSfzPic2(param) { this.handleUpload(param, "sfzPic2"); }, / 手动上传附件 */ handleUpload(param, type) { let formData = new FormData(); formData.append("files", param.file); let _this = this; upload(formData).then((res) => { if (type == "userPhoto") { let path = res.dataPack[0].nname; _this.form.FUSERPHOTO = path; // _this.userPhotoUrl = _this._getImageUrl(path); } else if (type == "sfzPic1") { let path = res.dataPack[0].nname; _this.form.FUSERSFZPIC1 = path; // _this.sfzPic1Url = _this._getImageUrl(path); } else if (type == "sfzPic2") { let path = res.dataPack[0].nname; _this.form.FUSERSFZPIC2 = path; // _this.sfzPic2Url = _this._getImageUrl(path); } }); }, _getImageUrl(path) { let token = getToken(); if (typeof path == "string") { path = path.replace(/\\/g, "/"); } return `${this.reviewUrl}?relativePath=${path}&access_token=${token}`; }, submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { let form = { ...this.form }; if (form.FBIRTHDAY && typeof form.FBIRTHDAY == "object") { form.FBIRTHDAY = this.formatDate(form.FBIRTHDAY); }else{ form.FBIRTHDAY = null } let data = this.getEditData() data.$old = { ...form }; data.$m = "/platf/user-info/entity/SysUserInfoBizEntity.xml"; update(data).then((res) => { this.$message({ type: "success", message: this.$t("hivuiMain_personalCenter_editTips") \|\| "修改成功", }); }); } else { console.log("error submit!!"); return false; } }); }, // resetForm(formName) { // this.$refs[formName].resetFields(); // }, isPhone(rule, value, callback) { const reg = /^[1][3,4,5,7,8,9][0-9]{9}$/; if (value == "" \|\| value == undefined \|\| value == null) { callback(); } else { if (!reg.test(value) && value != "") { callback( new Error( this.$t("hivuiMain_validate_FMBPHONE") \|\| "电话号码格式有误" ) ); } else { callback(); } } }, isEmail(rule, value, callback) { const reg = /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/; if (value == "" \|\| value == undefined \|\| value == null) { callback(); } else { if (!reg.test(value)) { callback( new Error( this.$t("hivuiMain_validate_FEMAIL") \|\| "邮箱地址格式有误" ) ); } else { callback(); } } }, isIdCard(rule, value, callback) { const reg = /^[1-9]\d{5}(18\|19\|20\|(3\d))\d{2}((0[1-9])\|(1[0-2]))(([0-2][1-9])\|10\|20\|30\|31)\d{3}[0-9Xx]$/; if (value == "" \|\| value == undefined \|\| value == null) { callback(); } else { if (!reg.test(value)) { callback( new Error( this.$t("hivuiMain_validate_FIDCARD") \|\| "身份证号格式有误" ) ); } else { callback(); } } }, formatDate(date) { const year = date.getFullYear(); const month = (date.getMonth() + 1).toString().padStart(2, "0"); const day = date.getDate().toString().padStart(2, "0"); return `${year}-${month}-${day}`; }, handlePreview(file, type) { this.dialogImageUrl = type == "userPhoto" ? this.userPhotoUrl : type == "sfzPic1" ? this.sfzPic1Url : type == "sfzPic2" ? this.sfzPic2Url : ""; this.dialogVisible = true; let dialog = this.$refs.dialog; dialog.$el.onclick = function () { event.stopPropagation(); }; }, handleRemove(file, type) { if (type == "userPhoto") { this.form.FUSERPHOTO = ""; } else if (type == "sfzPic1") { this.form.FUSERSFZPIC1 = ""; } else if (type == "sfzPic2") { this.form.FUSERSFZPIC2 = ""; } }, getEditData(){ let data = {} for(let key in this.form){ if(this.form[key] !== this.copyForm[key]){ data[key] = this.form[key] } } return data } }, }; </script> <style lang="less" scope> .avatar-uploader .el-upload { border: 1px dashed transparent; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; } .avatar-uploader .el-upload:hover { border-color: #409eff; } .avatar-uploader-icon.user { font-size: 28px; color: #8c939d; width: 166px; height: 166px; line-height: 166px; text-align: center; } .avatar-uploader-icon.sfz { font-size: 28px; color: #8c939d; width: 318px; height: 200px; line-height: 200px; text-align: center; } .avatar.user { width: 166px; height: 166px; display: block; } .avatar.sfz { width: 318px; height: 200px; display: block; } .el-upload-list__item-actions { position: absolute; width: 100%; height: 100%; left: 0; top: 0; cursor: default; text-align: center; color: #fff; opacity: 0; font-size: 20px; background-color: rgba(0, 0, 0, 0.5); transition: opacity 0.3s; display: flex; align-items: center; justify-content: center; } .showImg:hover { .el-upload-list__item-actions { opacity: 1; } } .el-upload-list__item-delete { display: block; position: static; font-size: inherit; color: inherit; .el-icon-delete { font-family: element-icons !important; speak: none; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; line-height: 1; vertical-align: baseline; display: inline-block; -webkit-font-smoothing: antialiased; } } .el-upload-list__item-actions span + span { margin-left: 15px; } .el-upload-list__item-name i:hover, .el-upload-list__item-name a:hover { color: #409eff; } .el-radio--mini.is-bordered{ display: block; width: fit-content; margin-bottom: 10px; } .el-radio.is-bordered+.el-radio.is-bordered{ margin-left: 0; } </style>

Ignore Space Show notes View

project/hivuiMain/views/personalCenter/components/UserUpdate.vue

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-row>
      <el-col :span="12">
        <el-form-item :label="$t('hivuiMain_personalCenter_name')" prop="FUSERNAME">
          <el-input v-model="form.FUSERNAME"></el-input>
        </el-form-item>
        <el-form-item :label="$t('hivuiMain_personalCenter_sex')" prop="FSEX">
          <el-radio-group v-model="form.FSEX">
            <el-radio :label="1">{{ $t('hivuiMain_personalCenter_male') }}</el-radio>
            <el-radio :label="0">{{ $t('hivuiMain_personalCenter_female') }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('hivuiMain_personalCenter_birthday')" prop="FBIRTHDAY">
          <el-date-picker
            format="yyyy-MM-dd"
            type="date"
            v-model="form.FBIRTHDAY"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item :label="$t('hivuiMain_personalCenter_mbphone')" prop="FMBPHONE">
          <el-input v-model="form.FMBPHONE"></el-input>
        </el-form-item>
        <el-form-item :label="$t('hivuiMain_personalCenter_email')" prop="FEMAIL">
          <el-input v-model="form.FEMAIL"></el-input>
        </el-form-item>
        <el-form-item label="QQ" prop="FQQ">
          <el-input v-model="form.FQQ"></el-input>
        </el-form-item>
        <el-form-item :label="$t('hivuiMain_personalCenter_WeChat')" prop="FWEIXIN">
          <el-input v-model="form.FWEIXIN"></el-input>
        </el-form-item>
        <el-form-item :label="$t('hivuiMain_personalCenter_usersfz')" prop="FUSERSFZ">
          <el-input v-model="form.FUSERSFZ"></el-input>
        </el-form-item>
        <el-form-item :label="$t('hivuiMain_personalCenter_address')"  prop="FADDRESS">
          <el-input
            type="textarea"
            :rows="3"
            v-model="form.FADDRESS"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12" style="padding-left: 20px">
        <el-form-item label="" prop="FUSERPHOTO">
          <el-upload
            class="avatar-uploader"
            :http-request="uploadUserPhoto"
            :show-file-list="false"
            accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP"
          >
            <div class="showImg" v-if="userPhotoUrl">
              <img :src="userPhotoUrl" class="avatar user" />
              <span ref="showActions" class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click.stop="handlePreview(file, 'userPhoto')"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click.stop="handleRemove(file, 'userPhoto')"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
            <i
              v-else
              class="el-icon-plus avatar-uploader-icon user"
              :style="`background-image:url(${userPic});background-size: 100% 100%`"
            ></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="" prop="FUSERSFZPIC1">
          <el-upload
            class="avatar-uploader"
            :http-request="uploadSfzPic1"
            :show-file-list="false"
            accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP"
          >
            <div class="showImg" v-if="sfzPic1Url">
              <img :src="sfzPic1Url" class="avatar sfz" />
              <span ref="showActions" class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click.stop="handlePreview(file, 'sfzPic1')"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click.stop="handleRemove(file, 'sfzPic1')"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
            <div
              v-else
              class="avatar-uploader-icon sfz"
              :style="`background-image:url(${sfz1Pic});background-size: 100% 100%`"
            ></div>
          </el-upload>
        </el-form-item>
        <el-form-item label="" prop="FUSERSFZPIC2">
          <el-upload
            class="avatar-uploader"
            :http-request="uploadSfzPic2"
            :show-file-list="false"
            accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP"
          >
            <div class="showImg" v-if="sfzPic2Url">
              <img :src="sfzPic2Url" class="avatar sfz" />
              <span ref="showActions" class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click.stop="handlePreview(file, 'sfzPic2')"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click.stop="handleRemove(file, 'sfzPic2')"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
            <div
              v-else
              class="avatar-uploader-icon sfz"
              :style="`background-image:url(${sfz2Pic});background-size: 100% 100%`"
            ></div>
          </el-upload>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item style="text-align: center">
      <el-button type="primary" @click="submitForm('form')">{{
        $t("hivuiMain_des_save")
      }}</el-button>
      
    </el-form-item>
    <el-dialog v-if="dialogVisible" :visible.sync="dialogVisible" ref="dialog">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </el-form>
</template>

Ignore Space Show notes View project/hivuiMain/views/personalCenter/index.vue
<template> <div class="app-container" style="height: 100%;overflow:auto;"> <el-row v-if="user" style="height: 100%;"> <el-col :span="6" :xs="24" style="padding: 10px;height: 100%;box-sizing: border-box"> <user-card :user="userCardInfo" :avatar="avatar" ref="userCard" style="height: 100%;min-height: 772px;"/> </el-col> <el-col :span="18" :xs="24" style="padding: 10px;height: 100%;box-sizing: border-box"> <el-card class="r-card" style="height: 100%;min-height: 772px;" :body-style="{padding:'0 20px',height: '100%'}"> <el-tabs v-model="activeTab"> <el-tab-pane :label="userLabel" :name="userLabel"> <user-update ref="userUpdate" /> </el-tab-pane> <el-tab-pane :label="bzLabel" :name="bzLabel"> <bz-update ref="bzUpdate" /> </el-tab-pane> </el-tabs> </el-card> </el-col> </el-row> </div> </template> <script> import UserCard from './components/UserCard' import UserUpdate from './components/UserUpdate' import BzUpdate from './components/BzUpdate' import { getToken } from '@main/utils/auth' import { query,getBzList } from '@main/api/user.js' export default { name: 'Profile', components: { UserCard,UserUpdate, BzUpdate }, data() { return { user: {}, activeTab: this.$t("hivuiMain_app_user", { default: '用户' }), userInfo:{}, bzList:[], userLabel: this.$t("hivuiMain_app_user", { default: '用户' }), bzLabel: this.$t("hivuiMain_app_orgbz", { default: '岗编' }) } }, computed: { avatar(){ let me=this; if(me.userInfo && me.userInfo.FUSERPHOTO){ return me._getImageUrl(me.userInfo.FUSERPHOTO) }else{ return false } }, userCardInfo(){ let me=this; console.log('userInfo', me.userInfo) return Object.assign(me.user, me.userInfo \|\| {}) }, reviewUrl(){ let me=this; return me.$HI.review.includes(window.HIVUI_SETTING.url) ? me.$HI.review : window.HIVUI_SETTING.url + me.$HI.review } }, mounted() { let me=this; me.getUser(); me.getUserInfo(); me.getBzList(); }, methods: { getBzList(){ let me=this; getBzList().then(res =>{ me.bzList = res.dataPack; let curtBz = me.bzList.filter(res => res.fdefaultbz)[0] me.$refs.userCard.bzList = me.bzList me.$refs.bzUpdate.bzList = me.bzList if(curtBz && curtBz.fbzid){ me.$refs.bzUpdate.curtBzId = curtBz.fbzid } }) }, getUser() { let me=this; me.user = top.Scp.User }, getUserInfo(){ let me=this; var param = { modelFilePath: "/platf/user-info/entity/SysUserInfoBizEntity.xml", pageSize: 10, pageNum: 1, __zcQuery: false, __returnCount: true, __bottomSummary: false, } let userId = top.Scp.User && top.Scp.User.fuserid if(userId){ let queryCdions = { join: 'and', items:[ { sign: 'eq', name: 'FUSERID', dataType: 'dbString', value: userId, enable: true } ] } let __body = JSON.stringify({queryCdions: queryCdions}) param.__body = __body query(param).then((res)=>{ let data = res.dataPack && res.dataPack.rows if(data && data.length){ me.userInfo = data[0] let form = { FSEX: "", FBIRTHDAY: "", FMBPHONE: "", FEMAIL: "", FQQ: "", FWEIXIN: "", FUSERSFZ: "", FADDRESS: [], FUSERPHOTO: '', FUSERSFZPIC1: '', FUSERSFZPIC2: '', } form = Object.assign(form, data[0]) me.$refs.userUpdate.form = form me.$refs.userUpdate.copyForm = {...form} } }) } }, _getImageUrl(path) { let me=this; let token = getToken(); if (typeof path == "string") { path = path.replace(/\\/g, "/"); if(path.includes(";") && path.split(";").length >= 2){ path = path.split(";")[2]; } } return `${me.reviewUrl}?relativePath=${path}&access_token=${token}`; }, } } </script> <template> <div class="app-container" style="height: 100%;overflow:auto;"> <el-row v-if="user" style="height: 100%;"> <el-col :span="6" :xs="24" style="padding: 10px;height: 100%;box-sizing: border-box"> <user-card :user="userCardInfo" :avatar="avatar" ref="userCard" style="height: 100%;min-height: 772px;"/> </el-col> <el-col :span="18" :xs="24" style="padding: 10px;height: 100%;box-sizing: border-box"> <el-card class="r-card" style="height: 100%;min-height: 772px;" :body-style="{padding:'0 20px',height: '100%'}"> <el-tabs v-model="activeTab"> <el-tab-pane :label="userLabel" :name="userLabel"> <user-update ref="userUpdate" /> </el-tab-pane> <el-tab-pane :label="bzLabel" :name="bzLabel"> <bz-update ref="bzUpdate" /> </el-tab-pane> </el-tabs> </el-card> </el-col> </el-row> </div> </template> <script> import UserCard from './components/UserCard' import UserUpdate from './components/UserUpdate' import BzUpdate from './components/BzUpdate' import { getToken } from '@main/utils/auth' import { query,getBzList } from '@main/api/user.js' export default { name: 'Profile', components: { UserCard,UserUpdate, BzUpdate }, data() { return { user: {}, activeTab: this.$t("hivuiMain_app_user", { default: '用户' }), userInfo:{}, bzList:[], userLabel: this.$t("hivuiMain_app_user", { default: '用户' }), bzLabel: this.$t("hivuiMain_app_orgbz", { default: '岗编' }) } }, computed: { avatar(){ let me=this; if(me.userInfo && me.userInfo.FUSERPHOTO){ return me._getImageUrl(me.userInfo.FUSERPHOTO) }else{ return false } }, userCardInfo(){ let me=this; console.log('userInfo', me.userInfo) return Object.assign(me.user, me.userInfo \|\| {}) }, reviewUrl(){ let me=this; return me.$HI.review.includes(window.HIVUI_SETTING.url) ? me.$HI.review : window.HIVUI_SETTING.url + me.$HI.review } }, mounted() { let me=this; me.getUser(); me.getUserInfo(); me.getBzList(); }, methods: { getBzList(){ let me=this; getBzList().then(res =>{ me.bzList = res.dataPack; let curtBz = me.bzList.filter(res => res.fdefaultbz)[0] me.$refs.userCard.bzList = me.bzList me.$refs.bzUpdate.bzList = me.bzList if(curtBz && curtBz.fbzid){ me.$refs.bzUpdate.curtBzId = curtBz.fbzid } }) }, getUser() { let me=this; me.user = top.Scp.User }, getUserInfo(){ let me=this; var param = { modelFilePath: "/platf/user-info/entity/SysUserInfoBizEntity.xml", pageSize: 10, pageNum: 1, __zcQuery: false, __returnCount: true, __bottomSummary: false, } let userId = top.Scp.User && top.Scp.User.fuserid if(userId){ let queryCdions = { join: 'and', items:[ { sign: 'eq', name: 'FUSERID', dataType: 'dbString', value: userId, enable: true } ] } let __body = JSON.stringify({queryCdions: queryCdions}) param.__body = __body query(param).then((res)=>{ let data = res.dataPack && res.dataPack.rows if(data && data.length){ me.userInfo = data[0] let form = { FSEX: "", FBIRTHDAY: "", FMBPHONE: "", FEMAIL: "", FQQ: "", FWEIXIN: "", FUSERSFZ: "", FADDRESS: [], FUSERPHOTO: '', FUSERSFZPIC1: '', FUSERSFZPIC2: '', } form = Object.assign(form, data[0]) me.$refs.userUpdate.form = form me.$refs.userUpdate.copyForm = {...form} } }) } }, _getImageUrl(path) { let me=this; let token = getToken(); if (typeof path == "string") { path = path.replace(/\\/g, "/"); } return `${me.reviewUrl}?relativePath=${path}&access_token=${token}`; }, } } </script>

Ignore Space Show notes View

project/hivuiMain/views/personalCenter/index.vue

<el-col :span="18" :xs="24" style="padding: 10px;height: 100%;box-sizing: border-box">
        <el-card class="r-card" style="height: 100%;min-height: 772px;" :body-style="{padding:'0 20px',height: '100%'}">
          <el-tabs v-model="activeTab">
            <el-tab-pane :label="userLabel" :name="userLabel">
              <user-update ref="userUpdate" />
            </el-tab-pane>
            <el-tab-pane :label="bzLabel" :name="bzLabel">
              <bz-update ref="bzUpdate" />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>

</el-row>
  </div>
</template>

export default {
  name: 'Profile',
  components: { UserCard,UserUpdate, BzUpdate },
  data() {
    return {
      user: {},
      activeTab: this.$t("hivuiMain_app_user", { default: '用户' }),
      userInfo:{},
      bzList:[],
      userLabel: this.$t("hivuiMain_app_user", { default: '用户' }),
      bzLabel: this.$t("hivuiMain_app_orgbz", { default: '岗编' })
    }
  },
  computed: {
    avatar(){
      let me=this;
      if(me.userInfo && me.userInfo.FUSERPHOTO){
        return me._getImageUrl(me.userInfo.FUSERPHOTO)
      }else{
        return false
      }
    },
    userCardInfo(){
      let me=this;
      console.log('userInfo', me.userInfo)
      return Object.assign(me.user, me.userInfo || {})
    },
    reviewUrl(){
      let me=this;
      return me.$HI.review.includes(window.HIVUI_SETTING.url) ? me.$HI.review : window.HIVUI_SETTING.url + me.$HI.review
    }
  },
  mounted() {
    let me=this;
    me.getUser();
    me.getUserInfo();
    me.getBzList();
  },
  methods: {
    getBzList(){
      let me=this;
      getBzList().then(res =>{
        me.bzList = res.dataPack;
        let curtBz = me.bzList.filter(res => res.fdefaultbz)[0]
        me.$refs.userCard.bzList = me.bzList
        me.$refs.bzUpdate.bzList = me.bzList
        if(curtBz && curtBz.fbzid){
          me.$refs.bzUpdate.curtBzId = curtBz.fbzid
        }
      })
    },
    getUser() {
      let me=this;
      me.user = top.Scp.User
    },
    getUserInfo(){
      let me=this;
      var param = {
        modelFilePath: "/platf/user-info/entity/SysUserInfoBizEntity.xml",
        pageSize: 10,
        pageNum: 1,
        __zcQuery: false,
        __returnCount: true,
        __bottomSummary: false,
      }
      let userId = top.Scp.User && top.Scp.User.fuserid
      if(userId){
        let queryCdions = {
          join: 'and',
          items:[
            {
              sign: 'eq',
              name: 'FUSERID',
              dataType: 'dbString',
              value: userId,
              enable: true
            }
          ]
        }
        let __body = JSON.stringify({queryCdions: queryCdions})
        param.__body = __body
        query(param).then((res)=>{
          let data = res.dataPack && res.dataPack.rows
          if(data && data.length){
            me.userInfo = data[0]
            let form = {
              FSEX: "",
              FBIRTHDAY: "",
              FMBPHONE: "",
              FEMAIL: "",
              FQQ: "",
              FWEIXIN: "",
              FUSERSFZ: "",
              FADDRESS: [],
              FUSERPHOTO: '',
              FUSERSFZPIC1: '',
              FUSERSFZPIC2: '',
            }
            form = Object.assign(form, data[0])
            me.$refs.userUpdate.form = form
            me.$refs.userUpdate.copyForm = {...form}
          }
        })
      }
    },
    _getImageUrl(path) {
      let me=this;
      let token = getToken();
      if (typeof path == "string") {
        path = path.replace(/\\/g, "/");
        if(path.includes(";") && path.split(";").length >= 2){
          path = path.split(";")[2];
        }
      }
      return `${me.reviewUrl}?relativePath=${path}&access_token=${token}`;
    },
  }
}
</script>

</el-row>
  </div>
</template>

export default {
  name: 'Profile',
  components: { UserCard,UserUpdate, BzUpdate },
  data() {
    return {
      user: {},
      activeTab: this.$t("hivuiMain_app_user", { default: '用户' }),
      userInfo:{},
      bzList:[],
      userLabel: this.$t("hivuiMain_app_user", { default: '用户' }),
      bzLabel: this.$t("hivuiMain_app_orgbz", { default: '岗编' })
    }
  },
  computed: {
    avatar(){
      let me=this;
      if(me.userInfo && me.userInfo.FUSERPHOTO){
        return me._getImageUrl(me.userInfo.FUSERPHOTO)
      }else{
        return false
      }
    },
    userCardInfo(){
      let me=this;
      console.log('userInfo', me.userInfo)
      return Object.assign(me.user, me.userInfo || {})
    },
    reviewUrl(){
      let me=this;
      return me.$HI.review.includes(window.HIVUI_SETTING.url) ? me.$HI.review : window.HIVUI_SETTING.url + me.$HI.review
    }
  },
  mounted() {
    let me=this;
    me.getUser();
    me.getUserInfo();
    me.getBzList();
  },
  methods: {
    getBzList(){
      let me=this;
      getBzList().then(res =>{
        me.bzList = res.dataPack;
        let curtBz = me.bzList.filter(res => res.fdefaultbz)[0]
        me.$refs.userCard.bzList = me.bzList
        me.$refs.bzUpdate.bzList = me.bzList
        if(curtBz && curtBz.fbzid){
          me.$refs.bzUpdate.curtBzId = curtBz.fbzid
        }
      })
    },
    getUser() {
      let me=this;
      me.user = top.Scp.User
    },
    getUserInfo(){
      let me=this;
      var param = {
        modelFilePath: "/platf/user-info/entity/SysUserInfoBizEntity.xml",
        pageSize: 10,
        pageNum: 1,
        __zcQuery: false,
        __returnCount: true,
        __bottomSummary: false,
      }
      let userId = top.Scp.User && top.Scp.User.fuserid
      if(userId){
        let queryCdions = {
          join: 'and',
          items:[
            {
              sign: 'eq',
              name: 'FUSERID',
              dataType: 'dbString',
              value: userId,
              enable: true
            }
          ]
        }
        let __body = JSON.stringify({queryCdions: queryCdions})
        param.__body = __body
        query(param).then((res)=>{
          let data = res.dataPack && res.dataPack.rows
          if(data && data.length){
            me.userInfo = data[0]
            let form = {
              FSEX: "",
              FBIRTHDAY: "",
              FMBPHONE: "",
              FEMAIL: "",
              FQQ: "",
              FWEIXIN: "",
              FUSERSFZ: "",
              FADDRESS: [],
              FUSERPHOTO: '',
              FUSERSFZPIC1: '',
              FUSERSFZPIC2: '',
            }
            form = Object.assign(form, data[0])
            me.$refs.userUpdate.form = form
            me.$refs.userUpdate.copyForm = {...form}
          }
        })
      }
    },
    _getImageUrl(path) {
      let me=this;
      let token = getToken();
      if (typeof path == "string") {
        path = path.replace(/\\/g, "/");
      }
      return `${me.reviewUrl}?relativePath=${path}&access_token=${token}`;
    },
  }
}
</script>

Show line notes below