Browse code Merge branch 'master' of http://git.hieap.cn/gitbucket/git/08335/hivui-platform-template master
commit 9e998783a0637722d1ffd75d38cbf2a219c87a6e 2 parents 22260a8 + da7c5b8 zhuojinhui authored on 10 Aug 2023

Showing 11 changed files

• project/hivuiBirt/funclib/AxiosUtil.js
• project/hivuiMain/App.vue
• project/hivuiMain/components/contextMenu/ContextMenuItem.vue
• project/hivuiMain/components/contextMenu/index.vue
• project/hivuiMain/lang/zh-CN.js
• project/hivuiMain/views/layout/components/Header.vue
• project/hivuiMain/views/personalCenter/components/BzUpdate.vue
• project/hivuiMain/views/personalCenter/components/UserCard.vue
• project/hivuiMain/views/personalCenter/components/UserUpdate.vue
• project/hivuiMain/views/personalCenter/index.vue
• vite-plugin/vite-plugin-func.js

Ignore Space Show notes View project/hivuiBirt/funclib/AxiosUtil.js

/** * 请求工具类,临时方案，待完善 * @author cls * @date 2021-01-30 */ import { baseURL, projectName, requestUrl } from '@birt/config' import Message from '../components/vue-m-message/index.js' import axios from 'axios'; import { getToken } from '@birt/utils/auth' var pn = projectName || 'birt' //请求状态码属性 const STATUS_KEY = "status"; //请求成功状态码 const STATUS_SUCCESS = 200; //超时 const STATUS_TIMEOUT = 418; // 检测登录超时 function checkTimeout(res) { if (res[STATUS_KEY] == STATUS_TIMEOUT) { // to re-login MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', { confirmButtonText: 'Re-Login', cancelButtonText: 'Cancel', type: 'warning' }).then(() => { console.log("这里处理超时登录"); }) return true; } return false } debugger axios.baseURL = baseURL axios.interceptors.request.use( config => { // "3d3fe30c-3d99-41e8-9aea-addd8528aa07" // config.headers["Authorization"] = "bearer " + "b9e6a365-c551-4551-b258-c56e3acd0eed"; if (getToken()) { config.headers["Authorization"] = "bearer " + getToken(); } // else { // //没有token，跳转登录页 // if (window.HIVUI_SETTING.loginUrl) { // location = window.HIVUI_SETTING.loginUrl; // } else { // location = "/" + projectName + "/hivuiLogin/index.html#/"; // } // } if (!config.url.startsWith("/api") && config.url.indexOf(requestUrl) == -1) { config.url = requestUrl + config.url; } if (config.url.indexOf(pn) == -1) { if (config.url.indexOf('pn=birt') != -1) { var url = config.url.replace('birt', pn) console.log('url', url) config.url = url } else if (config.url.indexOf('pn=false') != -1) { var url = config.url.replace('false', pn) console.log('url', url) config.url = url } else { if (config.url.indexOf('?') == -1) { config.url += "?pn=" + pn; } else { config.url += "&pn=" + pn } } } if(window.hivuiBirt && window.hivuiBirt.user && window.hivuiBirt.user.fbzid){ let fbzid = window.hivuiBirt.user.fbzid; config.url += "&fbzid=" + fbzid }else if(localStorage.getItem("bzid")){ let fbzid = localStorage.getItem("bzid"); config.url += "&fbzid=" + fbzid } if(!config.url.startsWith(window.HIVUI_SETTING.serverUrl) && !config.url.includes('http')){ config.url = window.HIVUI_SETTING.serverUrl + config.url } return config }, error => { console.log(error) return Promise.reject(error) } ) axios.interceptors.response.use(function (response) { // 因返回mock数据包格式不统一，做兼容处理，枚举接口未返回status:200 var res = (response[STATUS_KEY] && response.dataPack) ? response : response.data; res = (res || response.dataPack) || response; let status = res[STATUS_KEY]; // 流程特殊添加options,流程批处理返回 let flowData = response.config && response.config.data; if (flowData && (typeof flowData == "string" && flowData.indexOf("__isIntercept") != -1) && JSON.parse(flowData).__isIntercept === false) { try { res.options = JSON.parse(response.config.data) } catch (e) { } } if (status && status != STATUS_SUCCESS && status != 207) { if (!checkTimeout(res)) { let msgType = "error"; if (res == 700) { msgType = "info"; } Message({ message: res.msg || 'error', type: msgType, duration: 5 * 1000 }) } return Promise.reject(res.msg || 'error') } else if (res[STATUS_KEY] == 401) { // Message({ // message: 'token失效', // type: 'error', // duration: 5 * 1000 // }) MessageBox.alert('你已被登出,请重新登录', '登录超时', { confirmButtonText: '重新登录', type: 'warning' }).then(() => { let loginUrl = window.HIVUI_SETTING.loginUrl if (window.HIVUI_SETTING.isSingleLogin) { loginUrl = window.HIVUI_SETTING.singleLoginUrl; } if (loginUrl.endsWith("=")) { let params = window.location.search.slice(1, -1).split("&").filter(item => { if (item.indexOf("ticket") == -1) { return item } }); loginUrl = loginUrl + window.location.origin + window.location.pathname + (params.length > 0 ? '?' : '') + params.join("&"); } window.location.href = loginUrl }) } else { return res } }, function (error) { const res = error.response.data; if (res[STATUS_KEY] == 401) { if(top&&top.window.SysPage&&top.window.SysPage.openMiniLogin){//小窗口 top.window.SysPage.openMiniLogin(); }else{ Message({ message: 'token失效', type: 'error', duration: 5 * 1000 }) } } else { if (!checkTimeout(res)) { Message({ showClose: true, message: res.msg || '未知错误', type: 'error', duration: 5 * 1000 }) return Promise.reject(error) } } }); export default axios; /** * 请求工具类,临时方案，待完善 * @author cls * @date 2021-01-30 */ import { baseURL, projectName, requestUrl } from '@birt/config' import Message from '../components/vue-m-message/index.js' import axios from 'axios'; import { getToken } from '@birt/utils/auth' var pn = projectName || 'birt' //请求状态码属性 const STATUS_KEY = "status"; //请求成功状态码 const STATUS_SUCCESS = 200; //超时 const STATUS_TIMEOUT = 418; // 检测登录超时 function checkTimeout(res) { if (res[STATUS_KEY] == STATUS_TIMEOUT) { // to re-login MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', { confirmButtonText: 'Re-Login', cancelButtonText: 'Cancel', type: 'warning' }).then(() => { console.log("这里处理超时登录"); }) return true; } return false } debugger axios.baseURL = baseURL axios.interceptors.request.use( config => { // "3d3fe30c-3d99-41e8-9aea-addd8528aa07" // config.headers["Authorization"] = "bearer " + "b9e6a365-c551-4551-b258-c56e3acd0eed"; if (getToken()) { config.headers["Authorization"] = "bearer " + getToken(); } // else { // //没有token，跳转登录页 // if (window.HIVUI_SETTING.loginUrl) { // location = window.HIVUI_SETTING.loginUrl; // } else { // location = "/" + projectName + "/hivuiLogin/index.html#/"; // } // } if (!config.url.startsWith("/api") && config.url.indexOf(requestUrl) == -1) { config.url = requestUrl + config.url; } if (config.url.indexOf(pn) == -1) { if (config.url.indexOf('pn=birt') != -1) { var url = config.url.replace('birt', pn) console.log('url', url) config.url = url } else if (config.url.indexOf('pn=false') != -1) { var url = config.url.replace('false', pn) console.log('url', url) config.url = url } else { if (config.url.indexOf('?') == -1) { config.url += "?pn=" + pn; } else { config.url += "&pn=" + pn } } } if(window.hivuiBirt && window.hivuiBirt.user && window.hivuiBirt.user.fbzid){ let fbzid = window.hivuiBirt.user.fbzid; config.url += "&fbzid=" + fbzid } if(!config.url.startsWith(window.HIVUI_SETTING.serverUrl) && !config.url.includes('http')){ config.url = window.HIVUI_SETTING.serverUrl + config.url } return config }, error => { console.log(error) return Promise.reject(error) } ) axios.interceptors.response.use(function (response) { // 因返回mock数据包格式不统一，做兼容处理，枚举接口未返回status:200 var res = (response[STATUS_KEY] && response.dataPack) ? response : response.data; res = (res || response.dataPack) || response; let status = res[STATUS_KEY]; // 流程特殊添加options,流程批处理返回 let flowData = response.config && response.config.data; if (flowData && (typeof flowData == "string" && flowData.indexOf("__isIntercept") != -1) && JSON.parse(flowData).__isIntercept === false) { try { res.options = JSON.parse(response.config.data) } catch (e) { } } if (status && status != STATUS_SUCCESS && status != 207) { if (!checkTimeout(res)) { let msgType = "error"; if (res == 700) { msgType = "info"; } Message({ message: res.msg || 'error', type: msgType, duration: 5 * 1000 }) } return Promise.reject(res.msg || 'error') } else if (res[STATUS_KEY] == 401) { // Message({ // message: 'token失效', // type: 'error', // duration: 5 * 1000 // }) MessageBox.alert('你已被登出,请重新登录', '登录超时', { confirmButtonText: '重新登录', type: 'warning' }).then(() => { let loginUrl = window.HIVUI_SETTING.loginUrl if (window.HIVUI_SETTING.isSingleLogin) { loginUrl = window.HIVUI_SETTING.singleLoginUrl; } if (loginUrl.endsWith("=")) { let params = window.location.search.slice(1, -1).split("&").filter(item => { if (item.indexOf("ticket") == -1) { return item } }); loginUrl = loginUrl + window.location.origin + window.location.pathname + (params.length > 0 ? '?' : '') + params.join("&"); } window.location.href = loginUrl }) } else { return res } }, function (error) { const res = error.response.data; if (res[STATUS_KEY] == 401) { if(top&&top.window.SysPage&&top.window.SysPage.openMiniLogin){//小窗口 top.window.SysPage.openMiniLogin(); }else{ Message({ message: 'token失效', type: 'error', duration: 5 * 1000 }) } } else { if (!checkTimeout(res)) { Message({ showClose: true, message: res.msg || '未知错误', type: 'error', duration: 5 * 1000 }) return Promise.reject(error) } } }); export default axios;

Ignore Space Show notes View project/hivuiMain/App.vue

<template> <div class="app"> <transition> <router-view v-if="$store.state.appStatus=='success'" /> </transition> <transition> <div v-if="$store.state.appStatus!='success'" class="loader" > <div class="pl-logo-lg fadeInUp animated"> <img :src="logoSrc" v-if="logoSrc!=''" > </div> <span class="txt"> <span v-for="(str,index) in loadTexts" :key="index">{{str}}</span> <span class="msgInfo" v-if="$store.state.appStatus=='loading'">{{$t('hivuiMain_sysLoading')}}</span> <span class="msgInfo" v-if="$store.state.appStatus!='loading'&&!mainPageInitErrorJump" style="color:red" @click="handleReload" >{{$store.state.appStatusMsg||$t('hivuiMain_loadedFailClickRefresh')}}</span> </span> </div> </transition> </div> </template> <script> import Cookies from 'js-cookie' import LoginPic from "@main/assets/logo_max.png" import { getUrlValue, setUrlValue,getUrlSearch } from "@main/utils"; import { getToken } from '@main/utils/auth' export default { data() { return { loadTexts: "", logoSrc: "", mainPageInitErrorJump:window.mainPageInitErrorJump, }; }, methods: { handleReload() { window.location.reload(); }, detectZoom (){ var ratio = 0, screen = window.screen, ua = navigator.userAgent.toLowerCase(); if (window.devicePixelRatio !== undefined) { ratio = window.devicePixelRatio; } else if (~ua.indexOf('msie')) { if (screen.deviceXDPI && screen.logicalXDPI) { ratio = screen.deviceXDPI / screen.logicalXDPI; } } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) { ratio = window.outerWidth / window.innerWidth; } if (ratio){ ratio = Math.round(ratio * 100); } return ratio; }, checkZoom(){ let ratio = this.detectZoom(); if(ratio!=100){ // this.$message.error('警告，浏览器没有按正常比例显示会影响部份功能！') } }, }, mounted() { // this.checkZoom(); // window.addEventListener('resize',()=>{ // this.checkZoom(); // }); let me=this; // 设置任务中心刷新状态 top.window.__setRefreshTaskcenter = function (state) { if(state==undefined){ state = true; } top.window.__refreshTaskcenter = state; } let urlPn=getUrlValue(location.search,"pn"); if(urlPn){ if(!getUrlValue(window.HIVUI_SETTING.loginUrl,"pn")){ window.HIVUI_SETTING.loginUrl+="?pn="+urlPn; } if(!getUrlValue(window.HIVUI_SETTING.mainPageUrl,"pn")){ window.HIVUI_SETTING.mainPageUrl+="?pn="+urlPn; } } //如果token不一致，替换掉然后重新载入 let urlToken=getUrlValue(location.href,"access_token"); let nowToken=getToken(); if(!window._global&&urlToken&&nowToken&&(urlToken!=nowToken)){//正式环境 let newUrl=setUrlValue(decodeURIComponent(location.href),"access_token",nowToken); location=newUrl; location.reload(); } //系统间跳转，将ticket去除 if(!window._global&&getUrlValue(decodeURIComponent(location.href),"ticket")){ let newUrl=setUrlValue(decodeURIComponent(location.href),"ticket",""); location=newUrl.replace("&ticket=","")+(location.hash?location.hash:"#/"); //location.reload(); } window.Scp = { User: { id: "admin", name: "管理员", deptId: "", deptName: "", positionId: "GLY", postionName: "管理员", bzId: "admin_3", bzName: "管理员岗位3", bzDeptId: ".WLDJT.DGS", bzDeptName: "D公司", bzPositionId: "HQRY", bzPositionName: "后勤人员", orgId: "admin_3", defOrgId: "admin_3" } } //customSysCofig默认值 window.customSysCofig=_.merge({ showMiniLogin:true, },window.customSysCofig); if(!window.localStorage.getItem("locale")){ window.localStorage.setItem("locale",JSON.stringify({ desc:"中文", name:"zh-CN", })); Cookies.set("locale","zh-CN"); } window.__guid = new Date().valueOf(); //window.customSysCofig=_.merge(window.default_customSysCfg,window.customSysCofig||{}); window.customSysCofig&&window.customSysCofig.thirdParty&&window.customSysCofig.thirdParty.forEach((item)=>{//第三方脚本样式资源引用 let _dom; switch(item.type){ case "js": _dom=document.createElement("script"); _dom.type="text/javascript"; _dom.src=item.link; break; case "css": _dom=document.createElement("link"); _dom.rel="stylesheet"; _dom.href=item.link; break; } document.querySelector("head").appendChild(_dom); }); setTimeout(()=>{ window.__sysConfig = _.merge({ events: { onLoad1: function () { } }, projectName: "eaptpl", /*sysProjectMange: { id: __guid++, name: '工程树', iconClass: 'icon-tree', uri: 'amreport/designer/tree/design.do', url: '/amrept-web/amreport/designer/tree/design.do' },*/ sysList: [ ], langList:{ id: __guid++, name: (window.localStorage.getItem("locale")?(JSON.parse(window.localStorage.getItem("locale")).desc):"中文"), type: 'lang', iconClass: 'icon-edit', children: [ { id: __guid++, name:"中文", handler:function(){ window.localStorage.setItem("locale",JSON.stringify({ desc:"中文", name:"zh-CN", })); Cookies.set("locale","zh-CN"); window.location.reload(); }, }, { id: __guid++, name:"English", handler:function(){ window.localStorage.setItem("locale",JSON.stringify({ desc:"English", name:"en", })); Cookies.set("locale","en"); window.location.reload(); }, }, ] }, userInfo:{ id: __guid++, name: '${fusername}', type: 'userInfo', iconClass: 'icon-user', children: [ { id: __guid++, name:me.$t('hivuiMain_app_user')+'：${fusername}/${fuserid}', iconClass:'icon-user', }, { id: __guid++, name:me.$t('hivuiMain_app_orgbz')+'：${fbzname}/${fbzid}', iconClass:'icon-user', type:"orgBz", }, { id: __guid++, name:me.$t('hivuiMain_app_orgname')+'：${forgname}/${forgid}', iconClass:'icon-user', }, { id: __guid++, name:me.$t('hivuiMain_app_rolename')+'：${frolename}/${froleid}', iconClass:'icon-user', }, { id: __guid++, name:me.$t('hivuiMain_app_personal_Center'), iconClass:'icon-user', type: "personalCenter" }, /*{ id: __guid++, iconClass:'icon-edit', name:'修改用户信息', type:'modifyUserInfo', },*/ { id: __guid++, iconClass:'icon-edit', name:me.$t('hivuiMain_app_modifyPw'), type:'modifyPw', }, ] }, },window.customSysCofig); this.$store.dispatch("app/getSysConfig").then(res=>{ let cfg = this.$store.state.app.config || {}; let loadText = (cfg.sysLoadLogo && cfg.sysLoadLogo.title) || ""; let logoSrc = (cfg.sysLoadLogo && cfg.sysLoadLogo.src) || ""; this.loadTexts=loadText.split(""); this.logoSrc=logoSrc||LoginPic; }); },0); } }; </script> <style scoped> .app { height: 100%; background: linear-gradient( rgb(255, 255, 255) 0px, rgb(243, 248, 253) 50%, rgb(229, 240, 250) ); } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } .loader { position: absolute; top: 50%; left: 50%; margin-top: -50px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -mos-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default; } .loader .txt { display: inline-block; word-break: normal; white-space: nowrap; margin: auto; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 3px 5px rgba(0, 0, 0, 0.1), 0 5px 10px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.1), 0 20px 20px rgba(0, 0, 0, 0.15); } .loader .txt span { display: inline-block; font-size: 68px !important; padding: 0 5px; -webkit-animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite; -moz-animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite; -moz-animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite; -ms-animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite; -o-animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite; animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite; color: #0066cc; } .loader .txt span:nth-child(1) { -webkit-animation-delay: 0ms; -moz-animation-delay: 0ms; -ms-animation-delay: 0ms; -o-animation-delay: 0ms; animation-delay: 0ms; } .loader .txt span:nth-child(2) { -webkit-animation-delay: 100ms; -moz-animation-delay: 100ms; -ms-animation-delay: 100ms; -o-animation-delay: 100ms; animation-delay: 100ms; } .loader .txt span:nth-child(3) { -webkit-animation-delay: 200ms; -moz-animation-delay: 200ms; -ms-animation-delay: 200ms; -o-animation-delay: 200ms; animation-delay: 200ms; } .loader .txt span:nth-child(4) { -webkit-animation-delay: 300ms; -moz-animation-delay: 300ms; -ms-animation-delay: 300ms; -o-animation-delay: 300ms; animation-delay: 300ms; } .loader .txt span:nth-child(5) { -webkit-animation-delay: 400ms; -moz-animation-delay: 400ms; -ms-animation-delay: 400ms; -o-animation-delay: 400ms; animation-delay: 400ms; } .loader .txt span:nth-child(6) { -webkit-animation-delay: 500ms; -moz-animation-delay: 500ms; -ms-animation-delay: 500ms; -o-animation-delay: 500ms; animation-delay: 500ms; } .loader .txt span:nth-child(7) { -webkit-animation-delay: 600ms; -moz-animation-delay: 600ms; -ms-animation-delay: 600ms; -o-animation-delay: 600ms; animation-delay: 600ms; } .loader .txt span:nth-child(8) { -webkit-animation-delay: 700ms; -moz-animation-delay: 700ms; -ms-animation-delay: 700ms; -o-animation-delay: 700ms; animation-delay: 700ms; } .loader .txt span:nth-child(9) { -webkit-animation-delay: 800ms; -moz-animation-delay: 800ms; -ms-animation-delay: 800ms; -o-animation-delay: 800ms; animation-delay: 800ms; } .loader .txt span:nth-child(10) { -webkit-animation-delay: 900ms; -moz-animation-delay: 900ms; -ms-animation-delay: 900ms; -o-animation-delay: 900ms; animation-delay: 900ms; } .loader .txt span:nth-child(11) { -webkit-animation-delay: 1000ms; -moz-animation-delay: 1000ms; -ms-animation-delay: 1000ms; -o-animation-delay: 1000ms; animation-delay: 1000ms; } .loader .txt span:nth-child(12) { -webkit-animation-delay: 1100ms; -moz-animation-delay: 1100ms; -ms-animation-delay: 1100ms; -o-animation-delay: 1100ms; animation-delay: 1100ms; } .loader .txt span:nth-child(13) { -webkit-animation-delay: 1200ms; -moz-animation-delay: 1200ms; -ms-animation-delay: 1200ms; -o-animation-delay: 1200ms; animation-delay: 1200ms; } .loader .txt span.msgInfo { display: block; padding-top: 15px; font-size: 16px !important; text-shadow: none; color: #0272bd; text-shadow: none; animation: none; -webkit-animation: none; } @-webkit-keyframes text { 0% { color: #0066cc; } 40% { color: #fff; } 70%, 100% { color: #0066cc; } } @-moz-keyframes text { 0% { color: #0066cc; } 40% { color: #fff; } 70%, 100% { color: #0066cc; } } @-mos-keyframes text { 0% { color: #0066cc; } 40% { color: #fff; } 70%, 100% { color: #0066cc; } } @-o-keyframes text { 0% { color: #0066cc; } 40% { color: #fff; } 70%, 100% { color: #0066cc; } } @keyframes text { 0% { color: #0066cc; } 40% { color: #fff; } 70%, 100% { color: #0066cc; } } </style> <template> <div class="app"> <transition> <router-view v-if="$store.state.appStatus=='success'" /> </transition> <transition> <div v-if="$store.state.appStatus!='success'" class="loader" > <div class="pl-logo-lg fadeInUp animated"> <img :src="logoSrc" v-if="logoSrc!=''" > </div> <span class="txt"> <span v-for="(str,index) in loadTexts" :key="index">{{str}}</span> <span class="msgInfo" v-if="$store.state.appStatus=='loading'">{{$t('hivuiMain_sysLoading')}}</span> <span class="msgInfo" v-if="$store.state.appStatus!='loading'&&!mainPageInitErrorJump" style="color:red" @click="handleReload" >{{$store.state.appStatusMsg||$t('hivuiMain_loadedFailClickRefresh')}}</span> </span> </div> </transition> </div> </template> <script> import Cookies from 'js-cookie' import LoginPic from "@main/assets/logo_max.png" import { getUrlValue, setUrlValue,getUrlSearch } from "@main/utils"; import { getToken } from '@main/utils/auth' export default { data() { return { loadTexts: "", logoSrc: "", mainPageInitErrorJump:window.mainPageInitErrorJump, }; }, methods: { handleReload() { window.location.reload(); }, detectZoom (){ var ratio = 0, screen = window.screen, ua = navigator.userAgent.toLowerCase(); if (window.devicePixelRatio !== undefined) { ratio = window.devicePixelRatio; } else if (~ua.indexOf('msie')) { if (screen.deviceXDPI && screen.logicalXDPI) { ratio = screen.deviceXDPI / screen.logicalXDPI; } } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) { ratio = window.outerWidth / window.innerWidth; } if (ratio){ ratio = Math.round(ratio * 100); } return ratio; }, checkZoom(){ let ratio = this.detectZoom(); if(ratio!=100){ // this.$message.error('警告，浏览器没有按正常比例显示会影响部份功能！') } }, }, mounted() { // this.checkZoom(); // window.addEventListener('resize',()=>{ // this.checkZoom(); // }); let me=this; // 设置任务中心刷新状态 top.window.__setRefreshTaskcenter = function (state) { if(state==undefined){ state = true; } top.window.__refreshTaskcenter = state; } let urlPn=getUrlValue(location.search,"pn"); if(urlPn){ if(!getUrlValue(window.HIVUI_SETTING.loginUrl,"pn")){ window.HIVUI_SETTING.loginUrl+="?pn="+urlPn; } if(!getUrlValue(window.HIVUI_SETTING.mainPageUrl,"pn")){ window.HIVUI_SETTING.mainPageUrl+="?pn="+urlPn; } } //如果token不一致，替换掉然后重新载入 let urlToken=getUrlValue(location.href,"access_token"); let nowToken=getToken(); if(!window._global&&urlToken&&nowToken&&(urlToken!=nowToken)){//正式环境 let newUrl=setUrlValue(decodeURIComponent(location.href),"access_token",nowToken); location=newUrl; location.reload(); } //系统间跳转，将ticket去除 if(!window._global&&getUrlValue(decodeURIComponent(location.href),"ticket")){ let newUrl=setUrlValue(decodeURIComponent(location.href),"ticket",""); location=newUrl.replace("&ticket=","")+"#/"; //location.reload(); } window.Scp = { User: { id: "admin", name: "管理员", deptId: "", deptName: "", positionId: "GLY", postionName: "管理员", bzId: "admin_3", bzName: "管理员岗位3", bzDeptId: ".WLDJT.DGS", bzDeptName: "D公司", bzPositionId: "HQRY", bzPositionName: "后勤人员", orgId: "admin_3", defOrgId: "admin_3" } } //customSysCofig默认值 window.customSysCofig=_.merge({ showMiniLogin:true, },window.customSysCofig); if(!window.localStorage.getItem("locale")){ window.localStorage.setItem("locale",JSON.stringify({ desc:"中文", name:"zh-CN", })); Cookies.set("locale","zh-CN"); } window.__guid = new Date().valueOf(); //window.customSysCofig=_.merge(window.default_customSysCfg,window.customSysCofig||{}); window.customSysCofig&&window.customSysCofig.thirdParty&&window.customSysCofig.thirdParty.forEach((item)=>{//第三方脚本样式资源引用 let _dom; switch(item.type){ case "js": _dom=document.createElement("script"); _dom.type="text/javascript"; _dom.src=item.link; break; case "css": _dom=document.createElement("link"); _dom.rel="stylesheet"; _dom.href=item.link; break; } document.querySelector("head").appendChild(_dom); }); setTimeout(()=>{ window.__sysConfig = _.merge({ events: { onLoad1: function () { } }, projectName: "eaptpl", /*sysProjectMange: { id: __guid++, name: '工程树', iconClass: 'icon-tree', uri: 'amreport/designer/tree/design.do', url: '/amrept-web/amreport/designer/tree/design.do' },*/ sysList: [ ], langList:{ id: __guid++, name: (window.localStorage.getItem("locale")?(JSON.parse(window.localStorage.getItem("locale")).desc):"中文"), type: 'lang', iconClass: 'icon-edit', children: [ { id: __guid++, name:"中文", handler:function(){ window.localStorage.setItem("locale",JSON.stringify({ desc:"中文", name:"zh-CN", })); Cookies.set("locale","zh-CN"); window.location.reload(); }, }, { id: __guid++, name:"English", handler:function(){ window.localStorage.setItem("locale",JSON.stringify({ desc:"English", name:"en", })); Cookies.set("locale","en"); window.location.reload(); }, }, ] }, userInfo:{ id: __guid++, name: '${fusername}', type: 'userInfo', iconClass: 'icon-user', children: [ { id: __guid++, name:me.$t('hivuiMain_app_user')+'：${fusername}/${fuserid}', iconClass:'icon-user', }, { id: __guid++, name:me.$t('hivuiMain_app_orgbz')+'：${fbzname}/${fbzid}', iconClass:'icon-user', type:"orgBz", }, { id: __guid++, name:me.$t('hivuiMain_app_orgname')+'：${forgname}/${forgid}', iconClass:'icon-user', }, { id: __guid++, name:me.$t('hivuiMain_app_rolename')+'：${frolename}/${froleid}', iconClass:'icon-user', }, { id: __guid++, name:me.$t('hivuiMain_app_personal_Center'), iconClass:'icon-user', type: "personalCenter" }, /*{ id: __guid++, iconClass:'icon-edit', name:'修改用户信息', type:'modifyUserInfo', },*/ { id: __guid++, iconClass:'icon-edit', name:me.$t('hivuiMain_app_modifyPw'), type:'modifyPw', }, ] }, },window.customSysCofig); this.$store.dispatch("app/getSysConfig").then(res=>{ let cfg = this.$store.state.app.config || {}; let loadText = (cfg.sysLoadLogo && cfg.sysLoadLogo.title) || ""; let logoSrc = (cfg.sysLoadLogo && cfg.sysLoadLogo.src) || ""; this.loadTexts=loadText.split(""); this.logoSrc=logoSrc||LoginPic; }); },0); } }; </script> <style scoped> .app { height: 100%; background: linear-gradient( rgb(255, 255, 255) 0px, rgb(243, 248, 253) 50%, rgb(229, 240, 250) ); } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } .loader { position: absolute; top: 50%; left: 50%; margin-top: -50px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -mos-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default; } .loader .txt { display: inline-block; word-break: normal; white-space: nowrap; margin: auto; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 3px 5px rgba(0, 0, 0, 0.1), 0 5px 10px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.1), 0 20px 20px rgba(0, 0, 0, 0.15); } .loader .txt span { display: inline-block; font-size: 68px !important; padding: 0 5px; -webkit-animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite; -moz-animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite; -moz-animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite; -ms-animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite; -o-animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite; animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite; color: #0066cc; } .loader .txt span:nth-child(1) { -webkit-animation-delay: 0ms; -moz-animation-delay: 0ms; -ms-animation-delay: 0ms; -o-animation-delay: 0ms; animation-delay: 0ms; } .loader .txt span:nth-child(2) { -webkit-animation-delay: 100ms; -moz-animation-delay: 100ms; -ms-animation-delay: 100ms; -o-animation-delay: 100ms; animation-delay: 100ms; } .loader .txt span:nth-child(3) { -webkit-animation-delay: 200ms; -moz-animation-delay: 200ms; -ms-animation-delay: 200ms; -o-animation-delay: 200ms; animation-delay: 200ms; } .loader .txt span:nth-child(4) { -webkit-animation-delay: 300ms; -moz-animation-delay: 300ms; -ms-animation-delay: 300ms; -o-animation-delay: 300ms; animation-delay: 300ms; } .loader .txt span:nth-child(5) { -webkit-animation-delay: 400ms; -moz-animation-delay: 400ms; -ms-animation-delay: 400ms; -o-animation-delay: 400ms; animation-delay: 400ms; } .loader .txt span:nth-child(6) { -webkit-animation-delay: 500ms; -moz-animation-delay: 500ms; -ms-animation-delay: 500ms; -o-animation-delay: 500ms; animation-delay: 500ms; } .loader .txt span:nth-child(7) { -webkit-animation-delay: 600ms; -moz-animation-delay: 600ms; -ms-animation-delay: 600ms; -o-animation-delay: 600ms; animation-delay: 600ms; } .loader .txt span:nth-child(8) { -webkit-animation-delay: 700ms; -moz-animation-delay: 700ms; -ms-animation-delay: 700ms; -o-animation-delay: 700ms; animation-delay: 700ms; } .loader .txt span:nth-child(9) { -webkit-animation-delay: 800ms; -moz-animation-delay: 800ms; -ms-animation-delay: 800ms; -o-animation-delay: 800ms; animation-delay: 800ms; } .loader .txt span:nth-child(10) { -webkit-animation-delay: 900ms; -moz-animation-delay: 900ms; -ms-animation-delay: 900ms; -o-animation-delay: 900ms; animation-delay: 900ms; } .loader .txt span:nth-child(11) { -webkit-animation-delay: 1000ms; -moz-animation-delay: 1000ms; -ms-animation-delay: 1000ms; -o-animation-delay: 1000ms; animation-delay: 1000ms; } .loader .txt span:nth-child(12) { -webkit-animation-delay: 1100ms; -moz-animation-delay: 1100ms; -ms-animation-delay: 1100ms; -o-animation-delay: 1100ms; animation-delay: 1100ms; } .loader .txt span:nth-child(13) { -webkit-animation-delay: 1200ms; -moz-animation-delay: 1200ms; -ms-animation-delay: 1200ms; -o-animation-delay: 1200ms; animation-delay: 1200ms; } .loader .txt span.msgInfo { display: block; padding-top: 15px; font-size: 16px !important; text-shadow: none; color: #0272bd; text-shadow: none; animation: none; -webkit-animation: none; } @-webkit-keyframes text { 0% { color: #0066cc; } 40% { color: #fff; } 70%, 100% { color: #0066cc; } } @-moz-keyframes text { 0% { color: #0066cc; } 40% { color: #fff; } 70%, 100% { color: #0066cc; } } @-mos-keyframes text { 0% { color: #0066cc; } 40% { color: #fff; } 70%, 100% { color: #0066cc; } } @-o-keyframes text { 0% { color: #0066cc; } 40% { color: #fff; } 70%, 100% { color: #0066cc; } } @keyframes text { 0% { color: #0066cc; } 40% { color: #fff; } 70%, 100% { color: #0066cc; } } </style>

Ignore Space Show notes View project/hivuiMain/components/contextMenu/ContextMenuItem.vue

<template> <li ref="contextMenu" @click="handleClick(item, $event)" :class="itemClass" :title="item[field]"> <div class="label" :class="(item.hoverBtn||item.chooseIcon)?'withHoverBtn':''"> <i class="iconfont" :class="item.iconClass" v-if="item.iconClass"></i> <span class="item-label" v-html="item.html||item[field]"></span> <span class="children-indicator iconfont icon-arrow-right trigger" v-if="item.children"></span> <div class="chooseIcon" v-if="item.chooseIcon" :title="item.chooseIcon.title"> <i :class="item.chooseIcon.iconClass"></i> </div> <div class="hoverBtn" v-if="item.hoverBtn" :title="item.hoverBtn.title" @click="hoverBtnHandleClick(item.hoverBtn,$event)"> <i :class="item.hoverBtn.iconClass"></i> </div> </div> <ul class="context-menu" v-if="item.children" :style="contextMenuStyle"> <context-menu-item v-for="(childItem, index) in item.children" :item="childItem" :field="field" :key="index"> </context-menu-item> </ul> </li> </template> <script> export default { name: 'context-menu-item', props: { item: { type: Object, }, field:{ type:String, default:'title' } }, inject:['getActiveKey','setActiveKey'], data(){ return { contextMenuStyle:"", } }, computed:{ itemClass() { let item =this.item; return { // 'item-active':(item.id!=null)&&this.activeKey==item.id, 'item-active':item.actived, 'item-disabled': this.isItemDisabled(item) }; }, activeKey(){ return this.getActiveKey(); }, }, watch:{ "item.children":{ handler:function(val,old){ setTimeout(()=>{ if(!this.$refs.contextMenu){ this.contextMenuStyle= ""; }else{ let _domRect=this.$refs.contextMenu.getBoundingClientRect(); this.contextMenuStyle= "max-height:calc(100vh - "+(_domRect.top+30)+"px)"; } },100); }, immediate: true, deep: true } }, methods: { handleClick(item, event) { // !item.children&&this.setActiveKey(item.id); if (typeof item.handler !== 'undefined') { if (!this.isItemDisabled(item)) { item.handler(event); } else { event.stopPropagation(); } }else{ } }, hoverBtnHandleClick(item,event){ event.stopPropagation(); if (typeof item.handler !== 'undefined') { item.handler(event); } }, isItemDisabled(item) { if (typeof item.disabled !== 'undefined') { return item.disabled; } return false; }, }, }; </script> <template> <li @click="handleClick(item, $event)" :class="itemClass" :title="item[field]"> <div class="label"> <i class="iconfont" :class="item.iconClass" v-if="item.iconClass"></i> <span class="item-label" v-html="item.html||item[field]"></span> <span class="children-indicator iconfont icon-arrow-right trigger" v-if="item.children"></span> </div> <ul class="context-menu" v-if="item.children"> <context-menu-item v-for="(childItem, index) in item.children" :item="childItem" :field="field" :key="index"> </context-menu-item> </ul> </li> </template> <script> export default { name: 'context-menu-item', props: { item: { type: Object, }, field:{ type:String, default:'title' } }, inject:['getActiveKey','setActiveKey'], computed:{ itemClass() { let item =this.item; return { // 'item-active':(item.id!=null)&&this.activeKey==item.id, 'item-active':item.actived, 'item-disabled': this.isItemDisabled(item) }; }, activeKey(){ return this.getActiveKey(); } }, methods: { handleClick(item, event) { // !item.children&&this.setActiveKey(item.id); if (typeof item.handler !== 'undefined') { if (!this.isItemDisabled(item)) { item.handler(event); } else { event.stopPropagation(); } }else{ } }, isItemDisabled(item) { if (typeof item.disabled !== 'undefined') { return item.disabled; } return false; }, }, }; </script>

Ignore Space Show notes View project/hivuiMain/components/contextMenu/index.vue

<template> <div class="context-menu context-menu-container" :class="openPosition" v-if="visible" :style="contextMenuPosition" v-click-outside="close" @click="close" @mouseenter="visble=true" @mouseleave="visible=false" ref="contextMenu" > <ul> <context-menu-item :field="field" v-for="(menuItem, index) in menuItems" :item="menuItem" :key="index"> </context-menu-item> </ul> </div> </template> <script> /* eslint-disable prefer-destructuring */ import ContextMenuItem from './ContextMenuItem.vue'; /** * A simple context menu component * * ```html * <ContextMenu :menu-items="[....]"/> * ``` */ export default { props: { menuItems: { type: Array, required: true, }, field:{ type:String, default:'title' } }, provide(){ let me=this; return { getActiveKey(){ return me.activeKey; }, setActiveKey(key){ me.activeKey = key; } } }, data() { return { visible: false, activeKey:'', contextMenuPosition: { top: 0, left: 0, }, openPosition: 'context-menu-open-right', }; }, methods: { close() { this.visible = false; }, /** * Accepts an Object with an `x, y` position or an instance of Event */ open(position) { this.visible = true; this.$nextTick(() => { let x = 0; let y = 0; if (typeof position !== 'undefined' && typeof position === 'object') { if (position instanceof Event) { const windowWidth = window.innerWidth; // const contextMenuWidth = this.$refs.contextMenu.getBoundingClientRect().width; //ie getBoundingClientRect null const contextMenuWidth = this.$refs.contextMenu.offsetWidth; let pageX = position.pageX; let pageY = position.pageY; // let elRect = position.currentTarget.getBoundingClientRect(); //ie getBoundingClientRect null let elRect = (position.currentTarget||position.target).getBoundingClientRect(); if( position.type != "contextmenu"){ pageX = elRect.left; pageY = elRect.top+elRect.height; if(pageX>=(windowWidth - contextMenuWidth*2)){ this.openPosition = 'context-menu-open-left'; x = windowWidth<(pageX+contextMenuWidth)?(windowWidth-contextMenuWidth):pageX; }else{ this.openPosition = 'context-menu-open-right'; x = pageX; } }else{ if (pageX >= (windowWidth - contextMenuWidth)) { this.openPosition = 'context-menu-open-left'; x = windowWidth - contextMenuWidth - 10; } else { this.openPosition = 'context-menu-open-right'; x = pageX; } } y = pageY; } else { x = position.x; y = position.y; } } this.contextMenuPosition = { left: `${x}px`, top: `${y}px`, }; }); }, }, components: { 'context-menu-item': ContextMenuItem, }, directives: { 'click-outside': { inserted: function (el) { document.body.appendChild(el) }, bind(el, binding, vnode) { el.clickOutsideEvent = (event) => { // here I check that click was outside the el and his childrens if (!(el === event.target || el.contains(event.target))) { // and if it did, call method provided in attribute value vnode.context[binding.expression](event); } }; document.body.addEventListener('click', el.clickOutsideEvent); }, unbind(el) { document.body.removeEventListener('click', el.clickOutsideEvent); }, } }, }; </script> <style lang="less"> @context-menu-border-radius: 0px; .context-menu-container { position: absolute; user-select: none; z-index: 100; } .context-menu { background: #fff; border-radius: @context-menu-border-radius; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); ul { margin: 0; padding: 0; list-style: none; :first-child { border-top-right-radius: @context-menu-border-radius; border-top-left-radius: @context-menu-border-radius; } :last-child { border-bottom-right-radius: @context-menu-border-radius; border-bottom-left-radius: @context-menu-border-radius; } li { position: relative; padding: 5px; display: block; line-height: 25px; cursor: pointer; .label { display: flex; white-space: nowrap; position: relative; .iconfont{ margin-right: 5px; } .item-label { margin-right: 10px; } .children-indicator{ margin-left:auto; } &.withHoverBtn{ padding-right:28px; .hoverBtn,.chooseIcon{ height:24px; line-height:24px; width:24px; position: absolute; top:0; bottom:0; right:0; margin:auto; display: none; &:hover{ color:#fc0; } i{ font-size: 20px; line-height:24px; font-weight: bold; } } .chooseIcon,&:hover .hoverBtn{ display: block; } .chooseIcon{ color:#fc0; } } } &.item-disabled { cursor: not-allowed; opacity: 0.3; } ul { display: none; } &.item-active{ background: #0066cc; >.label{ color:#fff; } } &:hover { background: #0066cc; >.label{ color:#fff; } > ul { position: absolute; // left: calc(100% + 2px); left:100%; top: 0; display: inline-block; min-width: 100px; overflow: auto; } } } } &.context-menu-open-left { ul { li { &:hover { > ul { left: auto; // right: calc(100% + 2px); right: 100%; } } } } } } </style> <template> <div class="context-menu context-menu-container" :class="openPosition" v-if="visible" :style="contextMenuPosition" v-click-outside="close" @click="close" @mouseenter="visble=true" @mouseleave="visible=false" ref="contextMenu" > <ul> <context-menu-item :field="field" v-for="(menuItem, index) in menuItems" :item="menuItem" :key="index"> </context-menu-item> </ul> </div> </template> <script> /* eslint-disable prefer-destructuring */ import ContextMenuItem from './ContextMenuItem.vue'; /** * A simple context menu component * * ```html * <ContextMenu :menu-items="[....]"/> * ``` */ export default { props: { menuItems: { type: Array, required: true, }, field:{ type:String, default:'title' } }, provide(){ let me=this; return { getActiveKey(){ return me.activeKey; }, setActiveKey(key){ me.activeKey = key; } } }, data() { return { visible: false, activeKey:'', contextMenuPosition: { top: 0, left: 0, }, openPosition: 'context-menu-open-right', }; }, methods: { close() { this.visible = false; }, /** * Accepts an Object with an `x, y` position or an instance of Event */ open(position) { this.visible = true; this.$nextTick(() => { let x = 0; let y = 0; if (typeof position !== 'undefined' && typeof position === 'object') { if (position instanceof Event) { const windowWidth = window.innerWidth; // const contextMenuWidth = this.$refs.contextMenu.getBoundingClientRect().width; //ie getBoundingClientRect null const contextMenuWidth = this.$refs.contextMenu.offsetWidth; let pageX = position.pageX; let pageY = position.pageY; // let elRect = position.currentTarget.getBoundingClientRect(); //ie getBoundingClientRect null let elRect = (position.currentTarget||position.target).getBoundingClientRect(); if( position.type != "contextmenu"){ pageX = elRect.left; pageY = elRect.top+elRect.height; if(pageX>=(windowWidth - contextMenuWidth*2)){ this.openPosition = 'context-menu-open-left'; x = windowWidth<(pageX+contextMenuWidth)?(windowWidth-contextMenuWidth):pageX; }else{ this.openPosition = 'context-menu-open-right'; x = pageX; } }else{ if (pageX >= (windowWidth - contextMenuWidth)) { this.openPosition = 'context-menu-open-left'; x = windowWidth - contextMenuWidth - 10; } else { this.openPosition = 'context-menu-open-right'; x = pageX; } } y = pageY; } else { x = position.x; y = position.y; } } this.contextMenuPosition = { left: `${x}px`, top: `${y}px`, }; }); }, }, components: { 'context-menu-item': ContextMenuItem, }, directives: { 'click-outside': { inserted: function (el) { document.body.appendChild(el) }, bind(el, binding, vnode) { el.clickOutsideEvent = (event) => { // here I check that click was outside the el and his childrens if (!(el === event.target || el.contains(event.target))) { // and if it did, call method provided in attribute value vnode.context[binding.expression](event); } }; document.body.addEventListener('click', el.clickOutsideEvent); }, unbind(el) { document.body.removeEventListener('click', el.clickOutsideEvent); }, } }, }; </script> <style lang="less"> @context-menu-border-radius: 0px; .context-menu-container { position: absolute; user-select: none; z-index: 100; } .context-menu { background: #fff; border-radius: @context-menu-border-radius; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); ul { margin: 0; padding: 0; list-style: none; :first-child { border-top-right-radius: @context-menu-border-radius; border-top-left-radius: @context-menu-border-radius; } :last-child { border-bottom-right-radius: @context-menu-border-radius; border-bottom-left-radius: @context-menu-border-radius; } li { position: relative; padding: 5px; display: block; line-height: 25px; cursor: pointer; .label { display: flex; white-space: nowrap; .iconfont{ margin-right: 5px; } .item-label { margin-right: 10px; } .children-indicator{ margin-left:auto; } } &.item-disabled { cursor: not-allowed; opacity: 0.3; } ul { display: none; } &.item-active{ background: #0066cc; >.label{ color:#fff; } } &:hover { background: #0066cc; >.label{ color:#fff; } > ul { position: absolute; // left: calc(100% + 2px); left:100%; top: 0; display: inline-block; min-width: 100px; } } } } &.context-menu-open-left { ul { li { &:hover { > ul { left: auto; // right: calc(100% + 2px); right: 100%; } } } } } } </style>

Ignore Space Show notes View project/hivuiMain/lang/zh-CN.js

var GLOBAL_LANG_TPL = { "hivuiMain_sysInit": "系统初始化中...", "hivuiMain_clickRefresh": "【点我刷新】", "hivuiMain_recentlyUsed": "最近使用", "hivuiMain_projectManage": "项目管理", "hivuiMain_allFunction": "全部功能", "hivuiMain_nodata": "暂无数据", "hivuiMain_searchKey": "搜索关键字", "hivuiMain_customWorkbench": "自定义工作台", "hivuiMain_logout": "退出系统", "hivuiMain_sysLoading": "系统加载中...", "hivuiMain_loadedFailClickRefresh": "加载失败,点我重试!", "hivuiMain_dialog_cancel": "取消", "hivuiMain_dialog_define": "确定", "hivuiMain_dialog_def_title": "提示", "hivuiMain_portal_text": "暂无功能权限!", "hivuiMain_tab_ctxmenu_refresh": "刷新", "hivuiMain_tab_ctxmenu_close": "关闭", "hivuiMain_tab_ctxmenu_closeleft": "关闭左侧", "hivuiMain_tab_ctxmenu_closeright": "关闭右侧", "hivuiMain_tab_ctxmenu_closeother": "关闭其它", "hivuiMain_tab_ctxmenu_closeall": "关闭所有", "hivuiMain_tab_ctxmenu_fullscreen": "全屏", "hivuiMain_tab_scroll_lt": "左边滚动", "hivuiMain_tab_scroll_rt": "右边滚动", "hivuiMain_tab_scroll_more": "更多", "hivuiMain_store_msg1": "获取", "hivuiMain_store_msg2": "失败，", "hivuiMain_store_msg3": "点我重试!", "hivuiMain_store_sysmenu": "系统菜单", "hivuiMain_store_userinfo": "用户信息", "hivuiMain_store_bzlist": "多岗信息", "hivuiMain_store_lately": "最近使用功能", "hivuiMain_allfuncmenu_text": "请输入关键词", "hivuiMain_modifypw_title": "修改密码", "hivuiMain_modifypw_oldpw": "旧密码:", "hivuiMain_modifypw_oldpw": "请输入旧密码", "hivuiMain_modifypw_newpw": "新密码:", "hivuiMain_modifypw_newpw_ph": "请输入4-25个数字、字母或符号组合", "hivuiMain_modifypw_valid_pw2_msg": "两次输入密码不一致!", "hivuiMain_modifypw_valid_pw_empty": "请输入新密码!", "hivuiMain_modifypw_valid_pw2_empty": "请再次输入新密码!", "hivuiMain_modifypw_valid_pw2_empty2": "请再次输入密码!", "hivuiMain_modifypw_newpw2": "确认新密码:", "hivuiMain_modifypw_newpw2_ph": "再次确认新密码", "hivuiMain_modifypw_weak": "弱", "hivuiMain_modifypw_middle": "中", "hivuiMain_modifypw_strong": "高", "hivuiMain_modifypw_success": "修改成功！请重新登录", "hivuiMain_header_null": "空", "hivuiMain_header_notification_title": "消息提示", "hivuiMain_header_bzhoverbtn_title": "设为主岗", "hivuiMain_header_bzchooseIcon_title":"当前主岗", "hivuiMain_taskcenter_untreated": "未处理", "hivuiMain_app_user": "用户编号", "hivuiMain_app_orgbz": "岗位编制", "hivuiMain_app_orgname": "机构名称", "hivuiMain_app_rolename": "岗位名称", "hivuiMain_app_personal_Center": "个人中心", "hivuiMain_app_modifyPw": "修改密码", "hivuiMain_des_title": "门户自定义", "hivuiMain_des_setHeight": "设置高度", "hivuiMain_des_dragOrderFlag": "拖动排序标识", "hivuiMain_des_cancel": "取消", "hivuiMain_des_ok": "确定", "hivuiMain_des_editSerialRowLayout": "确定", "hivuiMain_des_serialRowLayout": "第{0}行布局", "hivuiMain_des_addColunms": "添加门户栏目", "hivuiMain_des_dragInArea": "拖入此区", "hivuiMain_des_save": "保存", "hivuiMain_des_columnLayout": "栏目布局", "hivuiMain_des_selectTemplate": "选择模板", "hivuiMain_des_addSingleLine": "添加单行", "hivuiMain_des_demoLayoutTip": "选择以下模板，拖拽添加至内容区", "hivuiMain_des_row24": "一行一栏", "hivuiMain_des_rowAvg2": "两栏均分", "hivuiMain_des_row8_16": "一行两栏", "hivuiMain_des_rowAvg3": "三栏均分", "hivuiMain_des_rowAvg4": "一行四栏", "hivuiMain_des_customLayoutTip": "自定义分栏数值，数字总和须为24，以空格分隔，点击任意位置确认", "hivuiMain_des_custom": "自定义", "hivuiMain_des_spaceSeparate": "数值以[空格]隔开", "hivuiMain_des_saving": "保存中...", "hivuiMain_des_saveSuc": "保存成功！", "hivuiMain_des_saveError": "保存出错！", "hivuiMain_app_user": "用户", "hivuiMain_app_orgbz": "岗编", "hivuiMain_eap_msgTips": "消息提示", "hivuiMain_eap_define": "确定", "hivuiMain_eap_showErrorDetail": "弹出报错详情", "hivuiMain_eap_hideErrorDetail": "收起报错详情", "hivuiMain_eap_noPermissionTips": "你已被登出,请重新登录", "hivuiMain_eap_timeOut": "登录超时", "hivuiMain_eap_Relist": "重新登录", "hivuiMain_main_bz": "主岗", "hivuiMain_validate_FMBPHONE": "电话号码格式有误", "hivuiMain_validate_FEMAIL": "邮箱地址格式有误", "hivuiMain_validate_FIDCARD": "身份证号格式有误", "customSysCfg_taskcenter": "任务中心", "customSysCfg_mainpage": "首页", "customSysCfg_layout": "布局", "customSysCfg_updownlayout": "上下布局", "customSysCfg_leftrightlayout": "左右布局", "customSysCfg_messagecenter": "消息中心", "customSysCfg_unreadmessage": "您有{0}条未读消息", "customSysCfg_companyname": "中海创科技", "customSysCfg_copyright": "版权所有 © 2020-2025 中海创科技", "customSysCfg_pageTitle": "中海创主页", "hivuiMain_personalCenter_name": "性别", "hivuiMain_personalCenter_sex": "性别", "hivuiMain_personalCenter_birthday": "出生年月", "hivuiMain_personalCenter_mbphone": "手机号码", "hivuiMain_personalCenter_email": "邮箱", "hivuiMain_personalCenter_WeChat": "微信", "hivuiMain_personalCenter_usersfz": "身份证号", "hivuiMain_personalCenter_address": "地址", "hivuiMain_personalCenter_male": "男", "hivuiMain_personalCenter_female": "女", "hivuiMain_personalCenter_editTips": "修改成功", "hi_messagebox_title": "提示", "hi_messagebox_confirm": "确定", "hi_messagebox_cancel": "取消", "hi_monitor_approvalRecord": "审批记录", "hi_monitor_flow": "流程", "hi_monitor_displayname": "流程名称", "hi_monitor_ordernumber": "流程编号", "hi_monitor_createtime": "创建时间", "hi_monitor_finishtime": "完成时间", "hi_monitor_flowstate": "流程状态", "hi_monitor_finish": "已完成", "hi_monitor_taskname": "任务名称", "hi_monitor_noReceived": "未接收", "hi_monitor_timeConsuming": "耗时", "hi_monitor_approver": "审批人", "hi_monitor_processingStatus": "处理状态", "hi_monitor_processe": "需处理", "hi_monitor_postscript": "附言", "hi_monitor_flowchart": "流程图", "hi_monitor_processed": "已处理", "hi_monitor_back": "回退", "hi_monitor_sysAuto": "系统自动流转", "hi_monitor_terminate": "终止", "hi_monitor_cancel": "取消", "hi_monitor_transfer": "转办", "hi_monitor_taskWithdraw": "任务撤回", "hi_monitor_tsBeforSigning": "前加签中", "hi_monitor_tsAfterSigning": "后加签中", "hi_monitor_tsBeforSignDW": "前加签处理", "hi_monitor_tsAfterSignDW": "后加签处理", "hi_monitor_tsBeforSigned": "已前加签", "hi_monitor_tsAfterSigned": "已后加签", "hi_monitor_day": "天", "hi_monitor_hour": "小时", "hi_monitor_Min": "分", "hi_monitor_second": "秒", "hi_taskcenter_myTasks": "我的任务", "hi_taskcenter_query": "查询", "hi_taskcenter_reset": "重置", "hi_taskcenter_operate": "操作", "hi_taskcenter_batchProcessing": "批处理", "hi_taskcenter_flowOut": "流转", "hi_taskcenter_flowBack": "回退", "hi_taskcenter_process": "处理", "hi_taskcenter_view": "查看", "hi_taskcenter_fwithdraw": "撤回", "hi_taskcenter_originator": "发起人", "hi_taskcenter_approver": "审批人", "hi_taskcenter_urgent": "急", "hi_taskcenter_back": "退", "hi_taskcenter_summary": "流程摘要", "hi_taskcenter_summaryinfo": "流程摘要信息", "hi_taskcenter_task": "任务", "hi_taskcenter_createtime": "创建时间", "hi_taskcenter_finishtime": "完成时间", "hi_taskcenter_monitor": "流程监控", "hi_taskcenter_batchTitle": "任务批处理({0})", "hi_taskcenter_batchtip": "任务正在处理中{0}/{1}，已成功{2}个，失败{3}个。", "hi_taskcenter_number": "单号", "hi_taskcenter_flowname": "流程名称", "hi_taskcenter_taskname": "任务名称", "hi_taskcenter_detailMsg": "处理结果", "hi_taskcenter_untreated": "未处理", "hi_taskcenter_processed": "已处理", "hi_taskcenter_completed": "已完成", "hi_taskcenter_displayname": "环节名称", "hi_taskcenter_fordernumber": "流程单号", "hi_taskcenter_fusername": "编制ID", "hi_taskcenter_withdrawinfo": "是否撤回任务？", "hi_taskcenter_confirmtitle": "确认信息", "hi_taskcenter_processSuccess": "处理成功", "hi_taskcenter_oneselect": "请至少选择一条单据!", }; var GLOBAL_LANG_TPL = { "hivuiMain_sysInit": "系统初始化中...", "hivuiMain_clickRefresh": "【点我刷新】", "hivuiMain_recentlyUsed": "最近使用", "hivuiMain_projectManage": "项目管理", "hivuiMain_allFunction": "全部功能", "hivuiMain_nodata": "暂无数据", "hivuiMain_searchKey": "搜索关键字", "hivuiMain_customWorkbench": "自定义工作台", "hivuiMain_logout": "退出系统", "hivuiMain_sysLoading": "系统加载中...", "hivuiMain_loadedFailClickRefresh": "加载失败,点我重试!", "hivuiMain_dialog_cancel": "取消", "hivuiMain_dialog_define": "确定", "hivuiMain_dialog_def_title": "提示", "hivuiMain_portal_text": "暂无功能权限!", "hivuiMain_tab_ctxmenu_refresh": "刷新", "hivuiMain_tab_ctxmenu_close": "关闭", "hivuiMain_tab_ctxmenu_closeleft": "关闭左侧", "hivuiMain_tab_ctxmenu_closeright": "关闭右侧", "hivuiMain_tab_ctxmenu_closeother": "关闭其它", "hivuiMain_tab_ctxmenu_closeall": "关闭所有", "hivuiMain_tab_ctxmenu_fullscreen": "全屏", "hivuiMain_tab_scroll_lt": "左边滚动", "hivuiMain_tab_scroll_rt": "右边滚动", "hivuiMain_tab_scroll_more": "更多", "hivuiMain_store_msg1": "获取", "hivuiMain_store_msg2": "失败，", "hivuiMain_store_msg3": "点我重试!", "hivuiMain_store_sysmenu": "系统菜单", "hivuiMain_store_userinfo": "用户信息", "hivuiMain_store_bzlist": "多岗信息", "hivuiMain_store_lately": "最近使用功能", "hivuiMain_allfuncmenu_text": "请输入关键词", "hivuiMain_modifypw_title": "修改密码", "hivuiMain_modifypw_oldpw": "旧密码:", "hivuiMain_modifypw_oldpw": "请输入旧密码", "hivuiMain_modifypw_newpw": "新密码:", "hivuiMain_modifypw_newpw_ph": "请输入4-25个数字、字母或符号组合", "hivuiMain_modifypw_valid_pw2_msg": "两次输入密码不一致!", "hivuiMain_modifypw_valid_pw_empty": "请输入新密码!", "hivuiMain_modifypw_valid_pw2_empty": "请再次输入新密码!", "hivuiMain_modifypw_valid_pw2_empty2": "请再次输入密码!", "hivuiMain_modifypw_newpw2": "确认新密码:", "hivuiMain_modifypw_newpw2_ph": "再次确认新密码", "hivuiMain_modifypw_weak": "弱", "hivuiMain_modifypw_middle": "中", "hivuiMain_modifypw_strong": "高", "hivuiMain_modifypw_success": "修改成功！请重新登录", "hivuiMain_header_null": "空", "hivuiMain_header_notification_title": "消息提示", "hivuiMain_header_bzhoverbtn_title": "设为主岗", "hivuiMain_header_bzchooseIcon_title":"当前主岗", "hivuiMain_taskcenter_untreated": "未处理", "hivuiMain_app_user": "用户编号", "hivuiMain_app_orgbz": "岗位编制", "hivuiMain_app_orgname": "机构名称", "hivuiMain_app_rolename": "岗位名称", "hivuiMain_app_personal_Center": "个人中心", "hivuiMain_app_modifyPw": "修改密码", "hivuiMain_des_title": "门户自定义", "hivuiMain_des_setHeight": "设置高度", "hivuiMain_des_dragOrderFlag": "拖动排序标识", "hivuiMain_des_cancel": "取消", "hivuiMain_des_ok": "确定", "hivuiMain_des_editSerialRowLayout": "确定", "hivuiMain_des_serialRowLayout": "第{0}行布局", "hivuiMain_des_addColunms": "添加门户栏目", "hivuiMain_des_dragInArea": "拖入此区", "hivuiMain_des_save": "保存", "hivuiMain_des_columnLayout": "栏目布局", "hivuiMain_des_selectTemplate": "选择模板", "hivuiMain_des_addSingleLine": "添加单行", "hivuiMain_des_demoLayoutTip": "选择以下模板，拖拽添加至内容区", "hivuiMain_des_row24": "一行一栏", "hivuiMain_des_rowAvg2": "两栏均分", "hivuiMain_des_row8_16": "一行两栏", "hivuiMain_des_rowAvg3": "三栏均分", "hivuiMain_des_rowAvg4": "一行四栏", "hivuiMain_des_customLayoutTip": "自定义分栏数值，数字总和须为24，以空格分隔，点击任意位置确认", "hivuiMain_des_custom": "自定义", "hivuiMain_des_spaceSeparate": "数值以[空格]隔开", "hivuiMain_des_saving": "保存中...", "hivuiMain_des_saveSuc": "保存成功！", "hivuiMain_des_saveError": "保存出错！", "hivuiMain_app_user": "用户", "hivuiMain_app_orgbz": "岗编", "hivuiMain_eap_msgTips": "消息提示", "hivuiMain_eap_define": "确定", "hivuiMain_eap_showErrorDetail": "弹出报错详情", "hivuiMain_eap_hideErrorDetail": "收起报错详情", "hivuiMain_eap_noPermissionTips": "你已被登出,请重新登录", "hivuiMain_eap_timeOut": "登录超时", "hivuiMain_eap_Relist": "重新登录", "hivuiMain_main_bz": "主岗", "hivuiMain_validate_FMBPHONE": "电话号码格式有误", "hivuiMain_validate_FEMAIL": "邮箱地址格式有误", "hivuiMain_validate_FIDCARD": "身份证号格式有误", "customSysCfg_taskcenter": "任务中心", "customSysCfg_mainpage": "首页", "customSysCfg_layout": "布局", "customSysCfg_updownlayout": "上下布局", "customSysCfg_leftrightlayout": "左右布局", "customSysCfg_messagecenter": "消息中心", "customSysCfg_unreadmessage": "您有{0}条未读消息", "customSysCfg_companyname": "中海创科技", "customSysCfg_copyright": "版权所有 © 2020-2025 中海创科技", "customSysCfg_pageTitle": "中海创主页", "hivuiMain_personalCenter_sex": "性别", "hivuiMain_personalCenter_birthday": "出生年月", "hivuiMain_personalCenter_mbphone": "手机号码", "hivuiMain_personalCenter_email": "邮箱", "hivuiMain_personalCenter_WeChat": "微信", "hivuiMain_personalCenter_usersfz": "身份证号", "hivuiMain_personalCenter_address": "地址", "hivuiMain_personalCenter_male": "男", "hivuiMain_personalCenter_female": "女", "hivuiMain_personalCenter_editTips": "修改成功", "hi_monitor_approvalRecord": "审批记录", "hi_monitor_flow": "流程", "hi_monitor_displayname": "流程名称", "hi_monitor_ordernumber": "流程编号", "hi_monitor_createtime": "创建时间", "hi_monitor_finishtime": "完成时间", "hi_monitor_flowstate": "流程状态", "hi_monitor_finish": "已完成", "hi_monitor_taskname": "任务名称", "hi_monitor_noReceived": "未接收", "hi_monitor_timeConsuming": "耗时", "hi_monitor_approver": "审批人", "hi_monitor_processingStatus": "处理状态", "hi_monitor_processe": "需处理", "hi_monitor_postscript": "附言", "hi_monitor_flowchart": "流程图", "hi_monitor_processed": "已处理", "hi_monitor_back": "回退", "hi_monitor_sysAuto": "系统自动流转", "hi_monitor_terminate": "终止", "hi_monitor_cancel": "取消", "hi_monitor_transfer": "转办", "hi_monitor_taskWithdraw": "任务撤回", "hi_monitor_tsBeforSigning": "前加签中", "hi_monitor_tsAfterSigning": "后加签中", "hi_monitor_tsBeforSignDW": "前加签处理", "hi_monitor_tsAfterSignDW": "后加签处理", "hi_monitor_tsBeforSigned": "已前加签", "hi_monitor_tsAfterSigned": "已后加签", "hi_monitor_day": "天", "hi_monitor_hour": "小时", "hi_monitor_Min": "分", "hi_monitor_second": "秒", "hi_taskcenter_myTasks": "我的任务", "hi_taskcenter_query": "查询", "hi_taskcenter_reset": "重置", "hi_taskcenter_operate": "操作", "hi_taskcenter_batchProcessing": "批处理", "hi_taskcenter_flowOut": "流转", "hi_taskcenter_flowBack": "回退", "hi_taskcenter_process": "处理", "hi_taskcenter_view": "查看", "hi_taskcenter_fwithdraw": "撤回", "hi_taskcenter_originator": "发起人", "hi_taskcenter_approver": "审批人", "hi_taskcenter_urgent": "急", "hi_taskcenter_back": "退", "hi_taskcenter_summary": "流程摘要", "hi_taskcenter_summaryinfo": "流程摘要信息", "hi_taskcenter_task": "任务", "hi_taskcenter_createtime": "创建时间", "hi_taskcenter_finishtime": "完成时间", "hi_taskcenter_monitor": "流程监控", "hi_taskcenter_batchTitle": "任务批处理({0})", "hi_taskcenter_batchtip": "任务正在处理中{0}/{1}，已成功{2}个，失败{3}个。", "hi_taskcenter_number": "单号", "hi_taskcenter_flowname": "流程名称", "hi_taskcenter_taskname": "任务名称", "hi_taskcenter_detailMsg": "处理结果", "hi_taskcenter_untreated": "未处理", "hi_taskcenter_processed": "已处理", "hi_taskcenter_completed": "已完成", "hi_taskcenter_displayname": "环节名称", "hi_taskcenter_fordernumber": "流程单号", "hi_taskcenter_fusername": "编制ID", "hi_taskcenter_withdrawinfo": "是否撤回任务？", "hi_taskcenter_confirmtitle": "确认信息", "hi_taskcenter_processSuccess": "处理成功", "hi_taskcenter_oneselect": "请至少选择一条单据!", };

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

Ignore Space Show notes View project/hivuiMain/views/personalCenter/components/BzUpdate.vue

<template> <el-form :model="form" :rules="rules" ref="form"> <el-form-item :label="label" prop="FSEX"> <el-radio-group v-model="curtBzId" style="display:flex;flex-wrap: wrap;"> <el-radio v-for="(item,index) in orgInfo" border :label="item.FBZID">{{ getOrgPathName(item) }}({{item.FBZID}})</el-radio> </el-radio-group> </el-form-item> <el-form-item style="text-align: center;"> <el-button type="primary" @click="submitForm">{{ $t("hivuiMain_des_save")}}</el-button> </el-form-item> </el-form> </template> <script> import { query, update} from '@main/api/user.js' export default { data(){ return { bzList:[], label: this.$t("hivuiMain_main_bz", { default: '主岗' }), curtBzId: '', orgInfo:{} } }, created(){ this.getOrgInfo() }, methods: { getOrgInfo(){ var param = { modelFilePath: "/platf/org/entity/SysOrgPsmEntity.xml", pageSize: -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)=>{ this.orgInfo = res.dataPack && res.dataPack.rows if(this.orgInfo && this.orgInfo.length){ } }) } }, submitForm() { // let bz = this.bzList.filter(res => res.fbzid == this.curtBzId)[0] let org = this.orgInfo.filter(res => res.FBZID == this.curtBzId)[0] let data = { $m:"/platf/org/entity/SysOrgPsmEntity.xml", $old:org, FDEFAULTBZ:1 } update(data).then(res =>{ this.$message({ type: 'success', message: this.$t("hivuiMain_personalCenter_editTips") || "修改成功", }) }) }, getOrgPathName(obj){ if(this.bzList && this.bzList.length){ let bz = this.bzList.filter(item => item.fbzid == obj.FBZID) return bz[0]?.forgnamepath || obj.FBZNAME }else{ return obj.FBZNAME } } } } </script> <style lang="less"> .avatar-uploader-icon { font-size: 28px; color: #8c939d; width: 178px; height: 178px; line-height: 178px; text-align: center; } .avatar { width: 178px; height: 178px; 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; } </style> <template> <el-form :model="form" :rules="rules" ref="form"> <el-form-item :label="label" prop="FSEX"> <el-radio-group v-model="curtBzId"> <el-radio v-for="(item,index) in orgInfo" border :label="item.FBZID">{{ item.FBZNAME}}/{{item.FBZID}}</el-radio> </el-radio-group> </el-form-item> <el-form-item style="text-align: center;"> <el-button type="primary" @click="submitForm">{{ $t("hivuiMain_des_save")}}</el-button> </el-form-item> </el-form> </template> <script> import { query, update} from '@main/api/user.js' export default { data(){ return { bzList:[], label: this.$t("hivuiMain_main_bz", { default: '主岗' }), curtBzId: '', orgInfo:{} } }, created(){ this.getOrgInfo() }, methods: { getOrgInfo(){ var param = { modelFilePath: "/platf/org/entity/SysOrgPsmEntity.xml", pageSize: -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)=>{ this.orgInfo = res.dataPack && res.dataPack.rows }) } }, submitForm() { // let bz = this.bzList.filter(res => res.fbzid == this.curtBzId)[0] let org = this.orgInfo.filter(res => res.FBZID == this.curtBzId)[0] let data = { $m:"/platf/org/entity/SysOrgPsmEntity.xml", $old:org, FDEFAULTBZ:1 } update(data).then(res =>{ this.$message({ type: 'success', message: this.$t("hivuiMain_personalCenter_editTips") || "修改成功", }) }) } } } </script> <style lang="less"> .avatar-uploader-icon { font-size: 28px; color: #8c939d; width: 178px; height: 178px; line-height: 178px; text-align: center; } .avatar { width: 178px; height: 178px; 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; } </style>

Ignore Space Show notes View project/hivuiMain/views/personalCenter/components/UserCard.vue

<template> <el-card style="margin-bottom:20px;"> <div class="user-profile"> <div class="account-center-avatarHolder"> <div class="avatar"> <img :src="avatar || userPic"/> </div> <div class="username">{{ user.fusername }}</div> <div class="bio">{{ user.fuserid }}</div> </div> <div class="account-center-detail"> <p> <i class="el-icon-s-custom"></i>{{ user.fbzname }} </p> <p> <i class="iconfont icon-tree"></i>{{ `${user.forgname} - ${user.fdeptname} - ${user.frolename}` }} </p> <p> <i class="el-icon-phone-outline"></i><span>{{ user.FMBPHONE || user.fmbphone}}</span><span></span> </p> </div> <el-divider /> </div> <div class="user-bio"> <div class="user-education user-bio-section"> <div class="user-bio-section-header"><svg-icon icon-class="education" /><span>{{ $t("hivuiMain_app_orgbz")}}</span></div> <div class="user-bio-section-body" v-for="item in bzList"> <p style="display: inline-flex;"> <i class="el-icon-s-custom"></i><span>{{ item.forgnamepath || item.fbzname }}</span><i class="el-icon-star-on" title="主岗" v-if="item.fdefaultbz"></i><span class="bzid">{{ item.fbzid}}</span><span></span> </p> </div> </div> </div> </el-card> </template> <script> import userPic from "@main/assets/user.png" export default { props: { user: { type: Object, default: () => { return { name: '', email: '', avatar: '', role: '' } } }, avatar:{ type: String, default: "" } }, data(){ return{ userPic: userPic, bzList:[] } }, mounted(){ debugger; console.log('多语言', this.$t("hivuiMain_app_orgbz")) }, methods:{ } } </script> <style lang="scss" scoped> .box-center { margin: 0 auto; display: table; } .text-muted { color: #777; } .user-profile { .user-name { font-weight: bold; } .box-center { padding-top: 10px; } .user-role { padding-top: 10px; font-weight: 400; font-size: 14px; } .box-social { padding-top: 30px; .el-table { border-top: 1px solid #dfe6ec; } } .user-follow { padding-top: 20px; } } .account-center-avatarHolder { text-align: center; margin-bottom: 24px; & > .avatar { margin: 0 auto; width: 104px; height: 104px; margin-bottom: 20px; border-radius: 50%; overflow: hidden; img { height: 100%; width: 100%; } } .username { color: rgba(0, 0, 0, 0.85); font-size: 20px; line-height: 28px; font-weight: 500; margin-bottom: 4px; } } .account-center-detail { p { margin-bottom: 8px; padding-left: 26px; position: relative; } i { position: absolute; height: 14px; width: 14px; left: 0; top: 4px; // background: url(https://gw.alipayobjects.com/zos/rmsportal/pBjWzVAHnOOtAUvZmZfy.svg) } .title { background-position: 0 0; } .group { background-position: 0 -22px; } .address { background-position: 0 -44px; } } .user-bio { margin-top: 20px; color: #606266; span { padding-left: 4px; } .user-bio-section-body{ .bzid{ float: right; color: #000; } .el-icon-star-on{ color: #06c; } } .user-bio-section { font-size: 14px; padding: 15px 0; .user-bio-section-header { border-bottom: 1px solid #dfe6ec; padding-bottom: 10px; margin-bottom: 10px; font-weight: bold; } } } </style> <template> <el-card style="margin-bottom:20px;"> <div class="user-profile"> <div class="account-center-avatarHolder"> <div class="avatar"> <img :src="avatar || userPic"/> </div> <div class="username">{{ user.fusername }}</div> <div class="bio">{{ user.fuserid }}</div> </div> <div class="account-center-detail"> <p> <i class="el-icon-s-custom"></i>{{ user.fbzname }} </p> <p> <i class="iconfont icon-tree"></i>{{ `${user.forgname} - ${user.fdeptname} - ${user.frolename}` }} </p> <p> <i class="el-icon-phone-outline"></i><span>{{ user.FMBPHONE || user.fmbphone}}</span><span></span> </p> </div> <el-divider /> </div> <div class="user-bio"> <div class="user-education user-bio-section"> <div class="user-bio-section-header"><svg-icon icon-class="education" /><span>{{ $t("hivuiMain_app_orgbz")}}</span></div> <div class="user-bio-section-body" v-for="item in bzList"> <p> <i class="el-icon-s-custom"></i><span>{{ item.fbzname}}</span><i class="el-icon-star-on" title="主岗" v-if="item.fdefaultbz"></i><span class="bzid">{{ item.fbzid}}</span><span></span> </p> </div> </div> </div> </el-card> </template> <script> import userPic from "@main/assets/user.png" export default { props: { user: { type: Object, default: () => { return { name: '', email: '', avatar: '', role: '' } } }, avatar:{ type: String, default: "" } }, data(){ return{ userPic: userPic, bzList:[] } }, mounted(){ debugger; console.log('多语言', this.$t("hivuiMain_app_orgbz")) }, methods:{ } } </script> <style lang="scss" scoped> .box-center { margin: 0 auto; display: table; } .text-muted { color: #777; } .user-profile { .user-name { font-weight: bold; } .box-center { padding-top: 10px; } .user-role { padding-top: 10px; font-weight: 400; font-size: 14px; } .box-social { padding-top: 30px; .el-table { border-top: 1px solid #dfe6ec; } } .user-follow { padding-top: 20px; } } .account-center-avatarHolder { text-align: center; margin-bottom: 24px; & > .avatar { margin: 0 auto; width: 104px; height: 104px; margin-bottom: 20px; border-radius: 50%; overflow: hidden; img { height: 100%; width: 100%; } } .username { color: rgba(0, 0, 0, 0.85); font-size: 20px; line-height: 28px; font-weight: 500; margin-bottom: 4px; } } .account-center-detail { p { margin-bottom: 8px; padding-left: 26px; position: relative; } i { position: absolute; height: 14px; width: 14px; left: 0; top: 4px; // background: url(https://gw.alipayobjects.com/zos/rmsportal/pBjWzVAHnOOtAUvZmZfy.svg) } .title { background-position: 0 0; } .group { background-position: 0 -22px; } .address { background-position: 0 -44px; } } .user-bio { margin-top: 20px; color: #606266; span { padding-left: 4px; } .user-bio-section-body{ .bzid{ float: right; color: #000; } .el-icon-star-on{ color: #06c; } } .user-bio-section { font-size: 14px; padding: 15px 0; .user-bio-section-header { border-bottom: 1px solid #dfe6ec; padding-bottom: 10px; margin-bottom: 10px; font-weight: bold; } } } </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, }; }, 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 = { ...form }; 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 = ""; } }, }, }; </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_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="5" 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: { 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, }; }, 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 = { ...form }; 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 = ""; } }, }, }; </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/index.vue

<template> <div class="app-container" style="height: 100%;"> <el-row v-if="user" style="height: 100%;"> <el-col :span="6" :xs="24" style="height: 100%;"> <user-card :user="userCardInfo" :avatar="avatar" ref="userCard" /> </el-col> <el-col :span="18" :xs="24" style="padding-left: 20px;height: 100%;"> <el-card class="r-card" :body-style="{padding:'0 20px'}"> <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(){ if(this.userInfo && this.userInfo.FUSERPHOTO){ return this._getImageUrl(this.userInfo.FUSERPHOTO) }else{ return false } }, userCardInfo(){ console.log('userInfo', this.userInfo) return Object.assign(this.user, this.userInfo || {}) }, reviewUrl(){ return this.$HI.review.includes(window.HIVUI_SETTING.url) ? this.$HI.review : window.HIVUI_SETTING.url + this.$HI.review } }, created() { this.getUser(); this.getUserInfo(); this.getBzList(); }, methods: { getBzList(){ getBzList().then(res =>{ this.bzList = res.dataPack; let curtBz = this.bzList.filter(res => res.fdefaultbz)[0] this.$refs.userCard.bzList = this.bzList this.$refs.bzUpdate.bzList = this.bzList if(curtBz && curtBz.fbzid){ this.$refs.bzUpdate.curtBzId = curtBz.fbzid } }) }, getUser() { this.user = top.Scp.User }, getUserInfo(){ 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){ this.userInfo = data[0] let form = { FSEX: "", FBIRTHDAY: "", FMBPHONE: "", FEMAIL: "", FQQ: "", FWEIXIN: "", FUSERSFZ: "", FADDRESS: [], FUSERPHOTO: '', FUSERSFZPIC1: '', FUSERSFZPIC2: '', } form = Object.assign(form, data[0]) this.$refs.userUpdate.form = form } }) } }, _getImageUrl(path) { let token = getToken(); if (typeof path == "string") { path = path.replace(/\\/g, "/"); } return `${this.reviewUrl}?relativePath=${path}&access_token=${token}`; }, } } </script> <template> <div class="app-container"> <div v-if="user"> <el-row> <el-col :span="6" :xs="24"> <user-card :user="userCardInfo" :avatar="avatar" ref="userCard" /> </el-col> <el-col :span="18" :xs="24" style="padding-left: 20px;"> <el-card> <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> </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(){ if(this.userInfo && this.userInfo.FUSERPHOTO){ return this._getImageUrl(this.userInfo.FUSERPHOTO) }else{ return false } }, userCardInfo(){ console.log('userInfo', this.userInfo) return Object.assign(this.user, this.userInfo || {}) }, reviewUrl(){ return this.$HI.review.includes(window.HIVUI_SETTING.url) ? this.$HI.review : window.HIVUI_SETTING.url + this.$HI.review } }, created() { this.getUser(); this.getUserInfo(); this.getBzList(); }, methods: { getBzList(){ getBzList().then(res =>{ this.bzList = res.dataPack; let curtBz = this.bzList.filter(res => res.fdefaultbz)[0] this.$refs.userCard.bzList = this.bzList this.$refs.bzUpdate.bzList = this.bzList if(curtBz && curtBz.fbzid){ this.$refs.bzUpdate.curtBzId = curtBz.fbzid } }) }, getUser() { this.user = top.Scp.User }, getUserInfo(){ 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){ this.userInfo = data[0] let form = { FSEX: "", FBIRTHDAY: "", FMBPHONE: "", FEMAIL: "", FQQ: "", FWEIXIN: "", FUSERSFZ: "", FADDRESS: [], FUSERPHOTO: '', FUSERSFZPIC1: '', FUSERSFZPIC2: '', } form = Object.assign(form, data[0]) this.$refs.userUpdate.form = form } }) } }, _getImageUrl(path) { let token = getToken(); if (typeof path == "string") { path = path.replace(/\\/g, "/"); } return `${this.reviewUrl}?relativePath=${path}&access_token=${token}`; }, } } </script>

Ignore Space Show notes View vite-plugin/vite-plugin-func.js

var querystring = require('querystring'); var url = require('url'); const fs = require('fs') var https = require('https'); var request = require('request'); var ejs = require('ejs'); function myPlugin(rawOptions) { let projectName = process.env.VITE_APP_PN.split("/")[0]; let userName = process.env.VITE_APP_PN.split("/")[1]; var previewPath = `${projectName}/setting/studio/preview.json` var setting try { let settingContent = fs.readFileSync(previewPath, { encoding: 'utf8' }); setting = JSON.parse(settingContent) } catch (e) { console.log("preview数据有错！") } var VITE_APP_BASE_API, VITE_APP_SERVER; if (setting) { VITE_APP_BASE_API = (setting.server || {}).VITE_APP_BASE_API || process.env.VITE_APP_BASE_API; VITE_APP_SERVER = (setting.server || {}).VITE_APP_SERVER || process.env.VITE_APP_SERVER; } else { VITE_APP_BASE_API = process.env.VITE_APP_BASE_API; VITE_APP_SERVER = process.env.VITE_APP_SERVER; } const options = { isProduction: process.env.NODE_ENV === 'production', ...rawOptions, VITE_APP_BASE_API: VITE_APP_BASE_API, VITE_APP_SERVER: VITE_APP_SERVER, root: process.cwd(), }; var routerOption = { url: `${VITE_APP_BASE_API}/map.html?pn=${process.env.VITE_APP_PN}`, method: "GET", json: true, headers: { "Content-Type": "application/json;charset=UTF-8" } } const routerMap = {}; request(routerOption, function (error, response, body) { if (body) { for (var i = 0; i < body.length; i++) { let routerPath = body[i].value; routerPath = routerPath.substr(routerPath.indexOf("/") + 1) + ".html" routerMap["/" + body[i].key] = routerPath; } } }) const TokenKey = 'EAP-Token'; let postData; let config; return { name: 'vite-plugin-func', // 必须的，将会显示在 warning 和 error 中 configResolved(resolvedConfig) { // 存储最终解析的配置 config = resolvedConfig }, configureServer(server) { server.middlewares.use((req, res, next) => { var Cookies = {}; if (req.headers.cookie != null) { req.headers.cookie.split(';').forEach(l => { var parts = l.split('='); Cookies[parts[0].trim()] = (parts[1] || '').trim(); }); } var param = req._parsedUrl.query; var result = {}; if (param) { let values = param.split("&"); for (let i = 0; i < values.length; i++) { const element = values[i]; let _val = element.split("="); result[_val[0]] = _val[1]; } } function isFlow(type) { return type.endsWith(".flow") || type.endsWith(".flowc"); } // 接口 function isInfc(type) { return type.endsWith(".infc") } function isFunc(type) { return type.endsWith(".func") } function isHtml(type) { return type.endsWith(".html") } function isStudio(type) { return type.endsWith("/studio.html") } // 渲染页面 function renderHtml(pcform, isGuest, body) { let content; try { content = fs.readFileSync(pcform, { encoding: 'utf8' }) } catch (e) { res.writeHead(404, { "Content-Type": "application/json;charset=UTF-8" }); res.end("pcform:" + pcform + "文件异常!"); return; } const statusCode = 200; if (!body) throw new Error(`No body text found for the ${statusCode} status code`); try { var html = ejs.render(content, options); } catch (e) { res.end(e.message); return; } let postDataStr = JSON.stringify(postData || {}); let varName = options.varName || 'viteRequestData'; let varGlobal = JSON.stringify(options.global || {}); let funcName = new Date().valueOf(); let queryScript = ` function _viteGetQuery${funcName}() { var url = window.location.search; var theRequest = new Object(); if (url.indexOf("?") != -1) { var str = url.substr(1); strs = str.split("&"); for(var i = 0; i < strs.length; i ++) { theRequest[strs[i].split("=")[0]]=decodeURI(strs[i].split("=")[1]); } } return theRequest; }` let titleStr = html.match(/<head(.*?)>/g)[0] || ""; var pathname = req._parsedUrl.pathname; if (!isStudio(pathname)) { html = html.replace( /<head(.*?)>/g, `${titleStr}<script>${queryScript};window.isGuest=${isGuest}; window.${varName} = Object.assign(_viteGetQuery${funcName}(),${postDataStr}); window._global=${varGlobal}</script> ` ) let titleEnd = html.match(/<\/head(.*?)>/g)[0] || ""; let lang = result["locale"] || Cookies["locale"] || "zh-CN"; lang = lang.replace("_", "-"); var sam = ""; var samDef = ""; if (pcform.indexOf("hivuiSam/index.html") != -1) {//统计分析 samDef = `<script src="/${projectName}/hivuiSam/lang/zh-CN.js"></script>` sam = `<script src="${VITE_APP_BASE_API}/lang/ref?pn=${process.env.VITE_APP_PN}&vmId=tpl&filePath=${userName}/${projectName}/hivuiSam/lang/def.language&locale=${lang}"></script>` }; var platfPlugin = ''; var platfPluginDef = ''; if (pcform.indexOf("hivuiBirt/index.html") != -1) {//平台插件 platfPluginDef = `<script src="/${projectName}/hivuiBirt/lang/zh-CN.js"></script>` platfPlugin = `<script src="${VITE_APP_BASE_API}/lang/ref?pn=${process.env.VITE_APP_PN}&vmId=tpl&filePath=${userName}/${projectName}/hivuiBirt/lang/def.language&locale=${lang}"></script>` }; let funcDefLangMap = { 'hivuiLogin/index.html': `/${projectName}/hivuiLogin/lang/zh-CN.js`, 'hivuiMain/index.html': `/${projectName}/hivuiMain/lang/zh-CN.js`, } let funcLangMap = { 'hivuiLogin/index.html': `${VITE_APP_BASE_API}/lang/ref?pn=${process.env.VITE_APP_PN}&vmId=tpl&filePath=${userName}/${projectName}/hivuiLogin/lang/def.language&locale=${lang}`, 'hivuiMain/index.html': `${VITE_APP_BASE_API}/lang/ref?pn=${process.env.VITE_APP_PN}&vmId=tpl&filePath=${userName}/${projectName}/hivuiMain/lang/def.language&locale=${lang}`, 'platf/permission': `${VITE_APP_BASE_API}/lang/ref?pn=${process.env.VITE_APP_PN}&vmId=scheme&bizPath=${projectName}.pro/setting.project_setrootdir/global.dir/rolescheme.roletp&locale=${lang}` } let curFuncLangScript = '' for (let k in funcDefLangMap) { if (pathname.indexOf(k) > -1 || (routerMap[pathname] && routerMap[pathname].indexOf(k) > -1)) { curFuncLangScript += `<script src="${funcDefLangMap[k]}"></script>` break; } } for (let k in funcLangMap) { if (pathname.indexOf(k) > -1 || (routerMap[pathname] && routerMap[pathname].indexOf(k) > -1)) { curFuncLangScript += `<script src="${funcLangMap[k]}"></script>` break; } } var viteData = html.match(/<vite>([\s\S]*)<\/vite>/); var viteTpl = "", viteprojectTpl = ""; let token = Cookies[TokenKey]; if (viteData) { //流引入多语言 var viteDataJson = JSON.parse(html.match(/<vite>([\s\S]*)<\/vite>/)[1]); viteprojectTpl = `<script src="${VITE_APP_BASE_API}/lang/static?pn=${process.env.VITE_APP_PN}&vmId=${viteDataJson.project_vmid}&locale=${lang}"></script>` if (viteDataJson.module_vmid && viteDataJson.bizpath) viteTpl = `<script src="${VITE_APP_BASE_API}/lang/ref?pn=${process.env.VITE_APP_PN}&vmId=${viteDataJson.module_vmid}&bizPath=${viteDataJson.bizpath}&locale=${lang}"></script>` } html = html.replace( /<\/head(.*?)>/g, `<script src="/assets_platform/vue-i18n/vue-i18n.js"></script> <script src="/${projectName}/lang/element-ui/${lang}.js"></script> <script src="${VITE_APP_BASE_API}/lang/ref?pn=${process.env.VITE_APP_PN}&vmId=hiui&filePath=${userName}/${projectName}/lang/hi-ui/def.language&locale=${lang}"></script> ${curFuncLangScript} ${viteprojectTpl} ${viteTpl} ${samDef} ${platfPluginDef} ${sam} ${platfPlugin} <script> try{ window.global={ pName:"${projectName}", pUser:"${userName}", pn:"${projectName}/${userName}" } // 统一输出语言包 zh-CN 名 if(!window.GLOBAL_LANG_TPL){ console.log('不影响运行,提示:[[${req.url},当前模板语言包不存在]]') } if(!window.GLOBAL_LANG_HIUI){ console.log('不影响运行,提示:[[${req.url},hiui语言包不存在]]') } window.lang = window.lang ||{}; window.lang.keys = Object.assign({},window.GLOBAL_LANG_TPL||{},window.GLOBAL_LANG_HIUI||{},window.GLOBAL_LANG_PROJECT||{},window.GLOBAL_LANG_MODULE||{},window.GLOBAL_LANG_SCHEME||{}); Vue.prototype._i18n  = new VueI18n({                 locale: 'localelang',                 messages: {                     'localelang':window.lang.keys,                 }             }); (function(lang){ lang = lang.split('-'); lang= lang[0]+((lang[1]||'').charAt(0).toUpperCase() + (lang[1]||'').slice(1)); console.log(lang)             ELEMENT.locale(ELEMENT.lang[lang]) })('${lang}');         }catch(e){             console.log('语言包加载出错！')         } </script> <script src="/assets_platform/customSysCfg/index.js"></script> <script src="/${projectName}/setting/desktop/base.js" type="text/javascript"></script> <script src="/${projectName}/setting/desktop/development.js" type="text/javascript"></script> ${titleEnd}`) } res.writeHead(statusCode, { "serverInfo": `${VITE_APP_BASE_API},${VITE_APP_SERVER}`, // 'Content-Length': html.length, 'Content-Type': 'html' }); res.write(html) res.end(); } var serverPath = VITE_APP_BASE_API + VITE_APP_SERVER; if (req.url.indexOf("/development.js") != -1) { if (req.headers.referer) { if (req.headers.referer.startsWith("https")) { options["VITE_APP_BASE_API"] = options["VITE_APP_BASE_API"].replace("http://", "https://"); } else { options["VITE_APP_BASE_API"] = options["VITE_APP_BASE_API"].replace("https://", "http://"); } } let content; try { content = fs.readFileSync(req.url.substr(1), { encoding: 'utf8' }) } catch (e) { res.writeHead(404, { "Content-Type": "application/json;charset=UTF-8" }); res.end("获取", req.url + "文件异常!"); return; } try { var html = ejs.render(content, options); } catch (e) { res.end(e.message); return; } res.end(html); return; } let pathname = req._parsedUrl.pathname; //console.log(new Date(), 'req.url:', req.url) if (isFlow(pathname) || isFunc(pathname) || isInfc(pathname)) { // let url = req.url; let post = ''; postData = ''; let path; let fmodelpath = pathname; // url.split("?")[0]; var post_data = {}; // var param = req.url.split("?")[1]; if (isFlow(fmodelpath)) { var fversion = ""; var ftaskguid = ""; var fbzid = ""; if (param) { fversion = result["_version"] || result["version"]; ftaskguid = result["_ftaskguid"] || result["ftaskguid"]; fbzid = result["fbzid"]; } post_data = { fmodelpath: fmodelpath, fversion, ftaskguid, fbzid } path = serverPath + "/flow/open?origin=pre&skip=false&pn="; } else if (isInfc(fmodelpath)) { path = serverPath + fmodelpath + "?pn="; } else { var viewItemId = "" if (param) { viewItemId = result["__viewItemId"] || result["viewItemId"] || ""; } path = serverPath + fmodelpath + "?origin=pre&skip=false&viewItemId=" + viewItemId + "&pn=" } // let pn = url.split("/")[1]; function handleFunc() { let token = Cookies[TokenKey]; let requestUrl = path + process.env.VITE_APP_PN; if (param) { requestUrl = requestUrl + "&" + param; } console.log("----requestUrl:", requestUrl, "token:", token); Object.assign(post_data, postData); let lang = result["locale"] || Cookies["locale"] || "zh-CN"; lang = lang.replace("_", "-"); var requestOption = { url: requestUrl, method: "POST", json: true, body: post_data, headers: { "token": token, "Cookie": `locale=${lang}`, "Authorization": "Bearer " + token, "Content-Type": "application/json;charset=UTF-8" } } if (isFlow(pathname)) { requestOption["body"] = post_data; } else if (isFunc(pathname)) { //页面流用表单提交 requestOption["form"] = post_data; } request(requestOption, function (error, response, body) { //console.log(error, response, body); if (!error && response.statusCode == 200) { let pcform; let designPath; let isGuest = false; if (body) { if (isFlow(fmodelpath) && body.outParameter) { pcform = body.outParameter.task.bizpcform; if (!result["locale"] && body.outParameter.locale) { result["locale"] = body.outParameter.locale; } } else if (isFunc(fmodelpath) || isInfc(fmodelpath)) { if (body && body.logicflow || isInfc(fmodelpath)) { //逻辑流 let statusCode = body.status || response.statusCode; res.writeHead(statusCode, { "Content-Type": "application/json;charset=UTF-8" }); res.end(JSON.stringify(body)); return; } else if (body.dataPack) { pcform = body.dataPack.path; designPath = body.dataPack.designPath; isGuest = body.dataPack.isGuest; if (!result["locale"] && body.dataPack.locale) { result["locale"] = body.dataPack.locale; } } } } if (!pcform) { res.writeHead(500, { "serverInfo": `${VITE_APP_BASE_API},${VITE_APP_SERVER}`, "Content-Type": "application/json;charset=UTF-8" }); res.end(JSON.stringify(body)); return; } if (designPath && (designPath.endsWith(".vm") || designPath.endsWith(".dvm"))) { res.writeHead(200, { 'Content-Type': 'html' }); let projectName = process.env.VITE_APP_PN.split("/")[0]; var pn = `pn=${process.env.VITE_APP_PN}` if (req.url.indexOf("?") == -1) { pn = "?" + pn; } else { pn = "&" + pn; } let accessToken = "" if (token) { accessToken = `&access_token=${token}`; } let html = ` <script src="/assets_platform/eap/eap.umd.min.js"></script> <script> window._global ={ env :"dev" } </script> <script src="/${projectName}/setting/desktop/development.js" type="text/javascript"></script> <script> window.location.href="${serverPath}${req.url}${pn}${accessToken}"; </script> ` res.end(html); return; } // var fullPath = "eaptpl/12112/mokuai/shitumulu/biaodan/dtv/1.0.0/desktop/index.html"; renderHtml(pcform, isGuest, body); } else { if (response && response.statusCode == 401) { res.writeHead(200, { "serverInfo": `${VITE_APP_BASE_API},${VITE_APP_SERVER}`, 'Content-Type': 'html' }); let projectName = process.env.VITE_APP_PN.split("/")[0]; let html = ` <script src="/assets_platform/eap/eap.umd.min.js"></script> <script> window._global ={ env :"dev" } </script> <script> if(top.window.SysPage&&top.window.SysPage.openMiniLogin){//小窗口 top.window.SysPage.openMiniLogin(true); }else{ window.location.href=window.HIVUI_SETTING.loginUrl; } </script> ` res.end(html); } else { res.writeHead(500, { "serverInfo": `${VITE_APP_BASE_API},${VITE_APP_SERVER}`, "Content-Type": "application/json;charset=UTF-8" }); res.end(JSON.stringify(body)); } //res.end(requestUrl + ":" + JSON.stringify(error) + JSON.stringify(body)); } }, (msg) => { res.writeHead(404, { "Content-Type": "application/json;charset=UTF-8" }); res.end(JSON.stringify(msg)); // console.log(msg) }); } req.on('data', (chunk) => { post += chunk; postData = querystring.parse(post); }); req.on('end', (chunk) => { handleFunc() }); return; } else if (routerMap[pathname]) { let pcform = routerMap[pathname]; renderHtml(pcform, false, {}) } // else if (pathname.endsWith("studio.html")) { //动态流程 routerMap[pathname]已处理 // let projectName = process.env.VITE_APP_PN.split("/")[0]; // let pcform = `${projectName}/hivuiStudio/index.html` // renderHtml(pcform, false, {}) // } else { if (isHtml(pathname)) { renderHtml(pathname.substr(1), false, {}) } else { var newPath = `/render/${userName}`; var assets_platform = "/render/assets_platform"; if (pathname.indexOf(newPath) != -1) { req.url = req.url.replace(newPath, ""); } if (pathname.indexOf(assets_platform) != -1) { req.url = req.url.replace(assets_platform, "/assets_platform"); } next(); } } }) }, } } export default myPlugin; var querystring = require('querystring'); var url = require('url'); const fs = require('fs') var https = require('https'); var request = require('request'); var ejs = require('ejs'); function myPlugin(rawOptions) { let projectName = process.env.VITE_APP_PN.split("/")[0]; let userName = process.env.VITE_APP_PN.split("/")[1]; var previewPath = `${projectName}/setting/studio/preview.json` var setting try { let settingContent = fs.readFileSync(previewPath, { encoding: 'utf8' }); setting = JSON.parse(settingContent) } catch (e) { console.log("preview数据有错！") } var VITE_APP_BASE_API, VITE_APP_SERVER; if (setting) { VITE_APP_BASE_API = (setting.server || {}).VITE_APP_BASE_API || process.env.VITE_APP_BASE_API; VITE_APP_SERVER = (setting.server || {}).VITE_APP_SERVER || process.env.VITE_APP_SERVER; } else { VITE_APP_BASE_API = process.env.VITE_APP_BASE_API; VITE_APP_SERVER = process.env.VITE_APP_SERVER; } const options = { isProduction: process.env.NODE_ENV === 'production', ...rawOptions, VITE_APP_BASE_API: VITE_APP_BASE_API, VITE_APP_SERVER: VITE_APP_SERVER, root: process.cwd(), }; var routerOption = { url: `${VITE_APP_BASE_API}/map.html?pn=${process.env.VITE_APP_PN}`, method: "GET", json: true, headers: { "Content-Type": "application/json;charset=UTF-8" } } const routerMap = {}; request(routerOption, function (error, response, body) { if (body) { for (var i = 0; i < body.length; i++) { let routerPath = body[i].value; routerPath = routerPath.substr(routerPath.indexOf("/") + 1) + ".html" routerMap["/" + body[i].key] = routerPath; } } }) const TokenKey = 'EAP-Token'; let postData; let config; return { name: 'vite-plugin-func', // 必须的，将会显示在 warning 和 error 中 configResolved(resolvedConfig) { // 存储最终解析的配置 config = resolvedConfig }, configureServer(server) { server.middlewares.use((req, res, next) => { var Cookies = {}; if (req.headers.cookie != null) { req.headers.cookie.split(';').forEach(l => { var parts = l.split('='); Cookies[parts[0].trim()] = (parts[1] || '').trim(); }); } var param = req._parsedUrl.query; var result = {}; if (param) { let values = param.split("&"); for (let i = 0; i < values.length; i++) { const element = values[i]; let _val = element.split("="); result[_val[0]] = _val[1]; } } function isFlow(type) { return type.endsWith(".flow") || type.endsWith(".flowc"); } // 接口 function isInfc(type) { return type.endsWith(".infc") } function isFunc(type) { return type.endsWith(".func") } function isHtml(type) { return type.endsWith(".html") } function isStudio(type) { return type.endsWith("/studio.html") } // 渲染页面 function renderHtml(pcform, isGuest, body) { let content; try { content = fs.readFileSync(pcform, { encoding: 'utf8' }) } catch (e) { res.writeHead(404, { "Content-Type": "application/json;charset=UTF-8" }); res.end("pcform:" + pcform + "文件异常!"); return; } const statusCode = 200; if (!body) throw new Error(`No body text found for the ${statusCode} status code`); try { var html = ejs.render(content, options); } catch (e) { res.end(e.message); return; } let postDataStr = JSON.stringify(postData || {}); let varName = options.varName || 'viteRequestData'; let varGlobal = JSON.stringify(options.global || {}); let funcName = new Date().valueOf(); let queryScript = ` function _viteGetQuery${funcName}() { var url = window.location.search; var theRequest = new Object(); if (url.indexOf("?") != -1) { var str = url.substr(1); strs = str.split("&"); for(var i = 0; i < strs.length; i ++) { theRequest[strs[i].split("=")[0]]=decodeURI(strs[i].split("=")[1]); } } return theRequest; }` let titleStr = html.match(/<head(.*?)>/g)[0] || ""; var pathname = req._parsedUrl.pathname; if (!isStudio(pathname)) { html = html.replace( /<head(.*?)>/g, `${titleStr}<script>${queryScript};window.isGuest=${isGuest}; window.${varName} = Object.assign(_viteGetQuery${funcName}(),${postDataStr}); window._global=${varGlobal}</script> ` ) let titleEnd = html.match(/<\/head(.*?)>/g)[0] || ""; let lang = result["locale"] || Cookies["locale"] || "zh-CN"; lang = lang.replace("_", "-"); var sam = ""; var samDef = ""; if (pcform.indexOf("hivuiSam/index.html") != -1) {//统计分析 samDef = `<script src="/${projectName}/hivuiSam/lang/zh-CN.js"></script>` sam = `<script src="${VITE_APP_BASE_API}/lang/ref?pn=${process.env.VITE_APP_PN}&vmId=tpl&filePath=${userName}/${projectName}/hivuiSam/lang/def.language&locale=${lang}"></script>` }; var platfPlugin = ''; var platfPluginDef = ''; if (pcform.indexOf("hivuiBirt/index.html") != -1) {//平台插件 platfPluginDef = `<script src="/${projectName}/hivuiBirt/lang/zh-CN.js"></script>` platfPlugin = `<script src="${VITE_APP_BASE_API}/lang/ref?pn=${process.env.VITE_APP_PN}&vmId=tpl&filePath=${userName}/${projectName}/hivuiBirt/lang/def.language&locale=${lang}"></script>` }; let funcDefLangMap = { 'hivuiLogin/index.html': `/${projectName}/hivuiLogin/lang/zh-CN.js`, 'hivuiMain/index.html': `/${projectName}/hivuiMain/lang/zh-CN.js`, } let funcLangMap = { 'hivuiLogin/index.html': `${VITE_APP_BASE_API}/lang/ref?pn=${process.env.VITE_APP_PN}&vmId=tpl&filePath=${userName}/${projectName}/hivuiLogin/lang/def.language&locale=${lang}`, 'hivuiMain/index.html': `${VITE_APP_BASE_API}/lang/ref?pn=${process.env.VITE_APP_PN}&vmId=tpl&filePath=${userName}/${projectName}/hivuiMain/lang/def.language&locale=${lang}`, 'platf/permission': `${VITE_APP_BASE_API}/lang/ref?pn=${process.env.VITE_APP_PN}&vmId=scheme&bizPath=${projectName}.pro/setting.project_setrootdir/global.dir/rolescheme.roletp&locale=${lang}` } let curFuncLangScript = '' for (let k in funcDefLangMap) { if (pathname.indexOf(k) > -1 || (routerMap[pathname] && routerMap[pathname].indexOf(k) > -1)) { curFuncLangScript += `<script src="${funcDefLangMap[k]}"></script>` break; } } for (let k in funcLangMap) { if (pathname.indexOf(k) > -1 || (routerMap[pathname] && routerMap[pathname].indexOf(k) > -1)) { curFuncLangScript += `<script src="${funcLangMap[k]}"></script>` break; } } var viteData = html.match(/<vite>([\s\S]*)<\/vite>/); var viteTpl = "", viteprojectTpl = ""; let token = Cookies[TokenKey]; if (viteData) { //流引入多语言 var viteDataJson = JSON.parse(html.match(/<vite>([\s\S]*)<\/vite>/)[1]); viteprojectTpl = `<script src="${VITE_APP_BASE_API}/lang/static?pn=${process.env.VITE_APP_PN}&vmId=${viteDataJson.project_vmid}&locale=${lang}"></script>` if (viteDataJson.module_vmid && viteDataJson.bizpath) viteTpl = `<script src="${VITE_APP_BASE_API}/lang/ref?pn=${process.env.VITE_APP_PN}&vmId=${viteDataJson.module_vmid}&bizPath=${viteDataJson.bizpath}&locale=${lang}"></script>` } html = html.replace( /<\/head(.*?)>/g, `<script src="/assets_platform/vue-i18n/vue-i18n.js"></script> <script src="/${projectName}/lang/element-ui/${lang}.js"></script> <script src="${VITE_APP_BASE_API}/lang/ref?pn=${process.env.VITE_APP_PN}&vmId=hiui&filePath=${userName}/${projectName}/lang/hi-ui/def.language&locale=${lang}"></script> ${curFuncLangScript} ${viteprojectTpl} ${viteTpl} ${samDef} ${platfPluginDef} ${sam} ${platfPlugin} <script> try{ window.global={ pName:"${projectName}", pUser:"${userName}", pn:"${projectName}/${userName}" } // 统一输出语言包 zh-CN 名 if(!window.GLOBAL_LANG_TPL){ console.log('不影响运行,提示:[[${req.url},当前模板语言包不存在]]') } if(!window.GLOBAL_LANG_HIUI){ console.log('不影响运行,提示:[[${req.url},hiui语言包不存在]]') } window.lang = window.lang ||{}; window.lang.keys = Object.assign({},window.GLOBAL_LANG_TPL||{},window.GLOBAL_LANG_HIUI||{},window.GLOBAL_LANG_PROJECT||{},window.GLOBAL_LANG_MODULE||{},window.GLOBAL_LANG_SCHEME||{}); Vue.prototype._i18n  = new VueI18n({                 locale: 'localelang',                 messages: {                     'localelang':window.lang.keys,                 }             }); (function(lang){ lang = lang.split('-'); lang= lang[0]+((lang[1]||'').charAt(0).toUpperCase() + (lang[1]||'').slice(1)); console.log(lang)             ELEMENT.locale(ELEMENT.lang[lang]) })('${lang}');         }catch(e){             console.log('语言包加载出错！')         } </script> <script src="/assets_platform/customSysCfg/index.js"></script> <script src="/${projectName}/setting/desktop/base.js" type="text/javascript"></script> <script src="/${projectName}/setting/desktop/development.js" type="text/javascript"></script> ${titleEnd}`) } res.writeHead(statusCode, { "serverInfo": `${VITE_APP_BASE_API},${VITE_APP_SERVER}`, // 'Content-Length': html.length, 'Content-Type': 'html' }); res.write(html) res.end(); } var serverPath = VITE_APP_BASE_API + VITE_APP_SERVER; if (req.url.indexOf("/development.js") != -1) { if (req.headers.referer) { if (req.headers.referer.startsWith("https")) { options["VITE_APP_BASE_API"] = options["VITE_APP_BASE_API"].replace("http://", "https://"); } else { options["VITE_APP_BASE_API"] = options["VITE_APP_BASE_API"].replace("https://", "http://"); } } let content; try { content = fs.readFileSync(req.url.substr(1), { encoding: 'utf8' }) } catch (e) { res.writeHead(404, { "Content-Type": "application/json;charset=UTF-8" }); res.end("获取", req.url + "文件异常!"); return; } try { var html = ejs.render(content, options); } catch (e) { res.end(e.message); return; } res.end(html); return; } let pathname = req._parsedUrl.pathname; //console.log(new Date(), 'req.url:', req.url) if (isFlow(pathname) || isFunc(pathname) || isInfc(pathname)) { // let url = req.url; let post = ''; postData = ''; let path; let fmodelpath = pathname; // url.split("?")[0]; var post_data = {}; // var param = req.url.split("?")[1]; if (isFlow(fmodelpath)) { var fversion = ""; var ftaskguid = ""; var fbzid = ""; if (param) { fversion = result["_version"] || result["version"]; ftaskguid = result["_ftaskguid"] || result["ftaskguid"]; fbzid = result["fbzid"]; } post_data = { fmodelpath: fmodelpath, fversion, ftaskguid, fbzid } path = serverPath + "/flow/open?origin=pre&skip=false&pn="; } else if (isInfc(fmodelpath)) { path = serverPath + fmodelpath + "?pn="; } else { var viewItemId = "" if (param) { viewItemId = result["__viewItemId"] || result["viewItemId"] || ""; } path = serverPath + fmodelpath + "?origin=pre&skip=false&viewItemId=" + viewItemId + "&pn=" } // let pn = url.split("/")[1]; function handleFunc() { let token = Cookies[TokenKey]; let requestUrl = path + process.env.VITE_APP_PN; if (param) { requestUrl = requestUrl + "&" + param; } console.log("----requestUrl:", requestUrl, "token:", token); Object.assign(post_data, postData); let lang = result["locale"] || Cookies["locale"] || "zh-CN"; lang = lang.replace("_", "-"); var requestOption = { url: requestUrl, method: "POST", json: true, body: post_data, headers: { "token": token, "Cookie": `locale=${lang}`, "Authorization": "Bearer " + token, "Content-Type": "application/json;charset=UTF-8" } } if (isFlow(pathname)) { requestOption["body"] = post_data; } else if (isFunc(pathname)) { //页面流用表单提交 requestOption["form"] = post_data; } request(requestOption, function (error, response, body) { //console.log(error, response, body); if (!error && response.statusCode == 200) { let pcform; let designPath; let isGuest = false; if (body) { if (isFlow(fmodelpath) && body.outParameter) { pcform = body.outParameter.task.bizpcform; if (!result["locale"] && body.outParameter.locale) { result["locale"] = body.outParameter.locale; } } else if (isFunc(fmodelpath) || isInfc(fmodelpath)) { if (body && body.logicflow || isInfc(fmodelpath)) { //逻辑流 let statusCode = body.status || response.statusCode; res.writeHead(statusCode, { "Content-Type": "application/json;charset=UTF-8" }); res.end(JSON.stringify(body)); return; } else if (body.dataPack) { pcform = body.dataPack.path; designPath = body.dataPack.designPath; isGuest = body.dataPack.isGuest; if (!result["locale"] && body.dataPack.locale) { result["locale"] = body.dataPack.locale; } } } } if (!pcform) { res.writeHead(500, { "serverInfo": `${VITE_APP_BASE_API},${VITE_APP_SERVER}`, "Content-Type": "application/json;charset=UTF-8" }); res.end(JSON.stringify(body)); return; } if (designPath && (designPath.endsWith(".vm") || designPath.endsWith(".dvm"))) { res.writeHead(200, { 'Content-Type': 'html' }); let projectName = process.env.VITE_APP_PN.split("/")[0]; var pn = `pn=${process.env.VITE_APP_PN}` if (req.url.indexOf("?") == -1) { pn = "?" + pn; } else { pn = "&" + pn; } let accessToken = "" if (token) { accessToken = `&access_token=${token}`; } let html = ` <script src="/assets_platform/eap/eap.umd.min.js"></script> <script> window._global ={ env :"dev" } </script> <script src="/${projectName}/setting/desktop/development.js" type="text/javascript"></script> <script> window.location.href="${serverPath}${req.url}${pn}${accessToken}"; </script> ` res.end(html); return; } // var fullPath = "eaptpl/12112/mokuai/shitumulu/biaodan/dtv/1.0.0/desktop/index.html"; renderHtml(pcform, isGuest, body); } else { if (response && response.statusCode == 401) { res.writeHead(200, { "serverInfo": `${VITE_APP_BASE_API},${VITE_APP_SERVER}`, 'Content-Type': 'html' }); let projectName = process.env.VITE_APP_PN.split("/")[0]; let html = ` <script src="/assets_platform/eap/eap.umd.min.js"></script> <script> window._global ={ env :"dev" } </script> <script> if(top.window.SysPage&&top.window.SysPage.openMiniLogin){//小窗口 top.window.SysPage.openMiniLogin(true); }else{ window.location.href=window.HIVUI_SETTING.loginUrl; } </script> ` res.end(html); } else { res.writeHead(500, { "serverInfo": `${VITE_APP_BASE_API},${VITE_APP_SERVER}`, "Content-Type": "application/json;charset=UTF-8" }); res.end(JSON.stringify(body)); } //res.end(requestUrl + ":" + JSON.stringify(error) + JSON.stringify(body)); } }, (msg) => { res.writeHead(404, { "Content-Type": "application/json;charset=UTF-8" }); res.end(JSON.stringify(msg)); // console.log(msg) }); } req.on('data', (chunk) => { post += chunk; postData = querystring.parse(post); }); req.on('end', (chunk) => { handleFunc() }); return; } else if (routerMap[pathname]) { let pcform = routerMap[pathname]; renderHtml(pcform, false, {}) } // else if (pathname.endsWith("studio.html")) { //动态流程 routerMap[pathname]已处理 // let projectName = process.env.VITE_APP_PN.split("/")[0]; // let pcform = `${projectName}/hivuiStudio/index.html` // renderHtml(pcform, false, {}) // } else { if (isHtml(pathname)) { renderHtml(pathname.substr(1), false, {}) } else { var newPath = `/render/${userName}`; if (pathname.indexOf(newPath) != -1) { req.url = req.url.replace(newPath, ""); } next(); } } }) }, } } export default myPlugin;

Show line notes below