GitBucket
4.6.0
Toggle navigation
Sign in
Files
Branches
1
Tags
Issues
Pull Requests
Labels
Milestones
Wiki
08335
/
hivui-platform-template
hivui平台项目模板
Browse code
@中文描述:token不一致,替换掉然后重新载入页面
@升级登记:1 @同步后端:0 @同步数据库:0 @同步配置:0 @向下兼容:1
master
1 parent
960bd84
commit
2b83860d282b145fb73e4fe3de7d07bac417eb3f
20278
authored
on 28 Apr 2023
Showing
3 changed files
project/hivuiMain/App.vue
project/hivuiMain/components/tabpanel/panel.vue
project/hivuiMain/views/layout/components/Main.vue
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 v-if="$store.state.appStatus=='loading'">{{$t('hivuiMain_sysLoading')}}</span> <span v-if="$store.state.appStatus!='loading'" 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: "" }; }, 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; //如果token不一致,替换掉然后重新载入 let urlToken=getUrlValue(location.href,"access_token"); let nowToken=getToken(); if(urlToken&&nowToken&&(urlToken!=nowToken)){ location=setUrlValue(decodeURIComponent(location.href),"access_token",nowToken); } 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" } } 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&&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++, 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:last-child { 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 v-if="$store.state.appStatus=='loading'">{{$t('hivuiMain_sysLoading')}}</span> <span v-if="$store.state.appStatus!='loading'" 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" export default { data() { return { loadTexts: "", logoSrc: "" }; }, 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; 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" } } 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&&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++, 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:last-child { 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/tabpanel/panel.vue
<template> <div class="pl-tabs-panel" :title="title" v-show="active" > <div class="pl-loading pl-loading-fixed" v-show="url&&!loaded" ref="dom-loader"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <iframe v-if="hasUrl" @load="handleIframeLoad" :name="'iframe'+name" ref="iframe"></iframe> <slot v-if="!hasUrl"></slot> </div> </template> <script> import { getUrlValue, setUrlValue,getUrlSearch } from "@main/utils"; import { getToken } from '@main/utils/auth' export default { name:'PTabpanel', props:{ close:[String,Number,Boolean], itemData:Object, title:{ type:String, default:"" }, name:{ type:[String,Number], default:"" }, url:{ type:[String], default:"" }, index:[String,Number] }, data(){ return { scrollTop: 0, loaded: false, hasUrl:!(this.url==null||this.url=='') } }, computed:{ active(){ const active = this.$parent.currentName === this.name; return active; } }, watch:{ active(val){ let ifm = this.$refs["iframe"]; if(val){ this.setIframeSrc(); if (ifm&&ifm.contentDocument) { this.$nextTick(()=>{ //保持原有的滚动位置 ifm.contentDocument.documentElement.scrollTop=this.scrollTop; }); } }else{ if (ifm&&ifm.contentDocument) { //保持原有的滚动位置 this.scrollTop = ifm.contentDocument.documentElement.scrollTop; } } } }, updated() { this.$parent.$emit('tab-nav-update'); }, mounted(){ if(this.active){ // console.log('___________ mounted active ! setIframeSrc') this.setIframeSrc(); } }, beforeDestroy() { // this.offIframeScroll(); }, methods:{ setIframeSrc(){ let ifm = this.$refs['iframe']; if(!this.hasUrl||this.loaded==true){ if (ifm&&ifm.contentDocument) { ifm.contentWindow.document.body.scrollTop = this.scrollTop; } return; } if(ifm&&this.url.indexOf("about:blank")<0){ this.loaded = false; ifm.setAttribute('src',this.url); }else{ this.loaded = true; } }, reload(){ let ifm = this.$refs['iframe']; this.loaded=false; // console.log(' reload this page :',ifm.src,ifm.contentWindow.window.location.href); //如果token不一致,替换掉然后重新载入 let urlToken=getUrlValue(ifm.contentWindow.location.href,"access_token"); let nowToken=getToken(); if(urlToken&&nowToken&&(urlToken!=nowToken)){ location=setUrlValue(decodeURIComponent(ifm.contentWindow.location.href),"access_token",nowToken); }else{ ifm.contentWindow.location.reload(); } }, handleIframeLoad(evt){ // if(this.active==false){ // //如果没有被激活,就不加载 // return; // } let ifm = this.$refs['iframe']; if(this.title==""&& ifm.contentWindow.document.title!=""){ this.$emit("update:title", ifm.contentWindow.document.title); } if(ifm.src!=''&&ifm.src!=="about:blank"){ this.loaded=true; }else{ if(ifm.contentWindow.document.body.innerHTML==""||ifm.contentWindow.document.head.innerHTML==""){ this.loaded=false; }else{ this.loaded=true; } } if (ifm.contentDocument) { ifm.contentWindow.window.addEventListener('beforeunload',()=>{ //this.loaded=false;//右击刷新 时进行加载状态 }); } this.loaded&&this.$emit('onIframeLoad',this,evt); }, } } </script>
<template> <div class="pl-tabs-panel" :title="title" v-show="active" > <div class="pl-loading pl-loading-fixed" v-show="url&&!loaded" ref="dom-loader"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <iframe v-if="hasUrl" @load="handleIframeLoad" :name="'iframe'+name" ref="iframe"></iframe> <slot v-if="!hasUrl"></slot> </div> </template> <script> export default { name:'PTabpanel', props:{ close:[String,Number,Boolean], itemData:Object, title:{ type:String, default:"" }, name:{ type:[String,Number], default:"" }, url:{ type:[String], default:"" }, index:[String,Number] }, data(){ return { scrollTop: 0, loaded: false, hasUrl:!(this.url==null||this.url=='') } }, computed:{ active(){ const active = this.$parent.currentName === this.name; return active; } }, watch:{ active(val){ let ifm = this.$refs["iframe"]; if(val){ this.setIframeSrc(); if (ifm&&ifm.contentDocument) { this.$nextTick(()=>{ //保持原有的滚动位置 ifm.contentDocument.documentElement.scrollTop=this.scrollTop; }); } }else{ if (ifm&&ifm.contentDocument) { //保持原有的滚动位置 this.scrollTop = ifm.contentDocument.documentElement.scrollTop; } } } }, updated() { this.$parent.$emit('tab-nav-update'); }, mounted(){ if(this.active){ // console.log('___________ mounted active ! setIframeSrc') this.setIframeSrc(); } }, beforeDestroy() { // this.offIframeScroll(); }, methods:{ setIframeSrc(){ let ifm = this.$refs['iframe']; if(!this.hasUrl||this.loaded==true){ if (ifm&&ifm.contentDocument) { ifm.contentWindow.document.body.scrollTop = this.scrollTop; } return; } if(ifm&&this.url.indexOf("about:blank")<0){ this.loaded = false; ifm.setAttribute('src',this.url); }else{ this.loaded = true; } }, reload(){ let ifm = this.$refs['iframe']; this.loaded=false; // console.log(' reload this page :',ifm.src,ifm.contentWindow.window.location.href); ifm.contentWindow.location.reload(); }, handleIframeLoad(evt){ // if(this.active==false){ // //如果没有被激活,就不加载 // return; // } let ifm = this.$refs['iframe']; if(this.title==""&& ifm.contentWindow.document.title!=""){ this.$emit("update:title", ifm.contentWindow.document.title); } if(ifm.src!=''&&ifm.src!=="about:blank"){ this.loaded=true; }else{ if(ifm.contentWindow.document.body.innerHTML==""||ifm.contentWindow.document.head.innerHTML==""){ this.loaded=false; }else{ this.loaded=true; } } if (ifm.contentDocument) { ifm.contentWindow.window.addEventListener('beforeunload',()=>{ //this.loaded=false;//右击刷新 时进行加载状态 }); } this.loaded&&this.$emit('onIframeLoad',this,evt); }, } } </script>
Ignore Space
Show notes
View
project/hivuiMain/views/layout/components/Main.vue
<template> <div class="pl-main"> <p-tabs ref="cmp-tabs" v-model="defTabKey" @onActiveTab="handleActiveTab" @onRemoveTab="handleRemoveTab" @onRemoveAllTab="handleRemoveAllTab" @onRemoveLeft="handleRemoveLeftTab" @onRemoveRight="handleRemoveRightTab" @onRemoveOther="handleRemoveOtherTab" @onFullScreen="handleFullScreen" :isSinglePage="sysConfig.isSinglePage" > <p-tabpanel v-for="(item,index) in tabList" :key="item.id" :close="item.close" :title.sync="item.title" :name="item.id" :url="item.url" :itemData="item" @onIframeLoad="handleIframeLoad" @onBeforeClose="handleBeforeClose" @onSelected="handleSelected" @onBeforeRefresh="handleBeforeRefresh" > <template v-if="item.type&&item.type=='home'"> <PortalSys :itemData="item" ref="protalSysHome" ></PortalSys> </template> <template v-if="item.type&&item.type=='work'"> <PortalUser :itemData="item" ref="portalUserWork" ></PortalUser> </template> </p-tabpanel> </p-tabs> <el-dialog class="miniLoginBox" width="450px" :visible.sync="isMiniLogin" :close-on-click-modal="false" :append-to-body="true"> <iframe v-if="isMiniLogin" width="100%" height="450px" :src="miniLoginUrl" style="border:none;"></iframe> </el-dialog> <div class="menuOpenBox" v-if="menuOpenList.length>0"> <el-dialog v-for="(item,index) in menuOpenList" :key="'menuOpenList'+index" class="menuOpenDialog" width="50%" top="5vh" :visible.sync="item.uid" :close-on-click-modal="false" :modal-append-to-body="false" @closed="handleCloseMenuDialog(item)"> <iframe width="100%" height="100%" :src="item.url" style="border:none;height:60vh;"></iframe> </el-dialog> </div> </div> </template> <script> import {changeBz} from "@main/api/user"; import { baseURL, codeProjectName,requestUrl } from "@main/config"; import { PTabs, PTabpanel } from "@main/components/tabpanel"; import PortalUser from "@main/views/Portal/user"; import PortalSys from "@main/views/Portal/sys"; import { getUrlValue, setUrlValue,getUrlSearch,closeWindow,notificationFunc } from "@main/utils"; import { getToken } from '@main/utils/auth' // import { type } from "os"; import md5 from "js-md5"; import { utils } from "hi-ui"; export default { inject: ["addTab", "showTab", "hideTab"], components: { PTabs, PTabpanel, PortalUser, PortalSys, }, data() { let cfg = this.$store.state.app.config || {}; let defTabs = cfg.sysDefTabs || []; let setTabs = cfg.sysSetTabs || []; let list = [], defTabKey = ""; defTabs = setTabs.concat(defTabs); defTabs.map((item, i) => { let id = item.url ? md5(item.url) : item.id; //强转成 url md5 id if(!window._global){//正式环境 item.url=utils.string.setUrlValue(item.url,"pn",window.HIVUI_SETTING.projectName); getToken()&&(item.url=utils.string.setUrlValue(item.url,"access_token",getToken())); } // if(cfg.isSinglePage){//单页面模式 // id="123456789"; // } item.actived && (defTabKey = id); if (item.url && getUrlValue(item.url, "__tabId") == "") { //关系到用户调用,防止Scp.context.closeCurPage取不到__tabId出错 item.url = utils.string.setUrlValue(item.url, "__tabId", id); } /*if(cfg.isSinglePage){ list[0]={ title: item.title, url: item.url, close: item.close, id: id, type: item.type, }; }else*/{ list.push({ title: item.title, url: item.url, close: item.close, id: id, type: item.type, }); } }); console.log('page default open tabs :',defTabs); //系统菜单 后台默认配激活 let menusDef2Tabs = this.$store.getters.defTabs, uriStr = ""; console.log('menus default open tabs :',defTabs); menusDef2Tabs.map((item, i) => { //uriStr = baseURL + codeProjectName + item.resUrl; uriStr = item.resUrl; if(!window._global){//正式环境 uriStr=utils.string.setUrlValue(uriStr,"pn",window.HIVUI_SETTING.projectName); getToken()&&(uriStr=utils.string.setUrlValue(uriStr,"access_token",getToken())); } if(uriStr.indexOf("http")==-1){ uriStr=location.origin+uriStr; } let id = md5(uriStr); uriStr = utils.string.setUrlValue(uriStr, "__tabId", id); list.push({ title: item.name, url: uriStr, close: true, id: id, type: item.type, }); }); // console.log('系统菜单',list); //第三方跳转过来地址自动打开功能tab let menusList = this.$store.getters.menusList; let searchObj = getUrlSearch(decodeURIComponent(this.$router.currentRoute.fullPath)); for (let i = menusList.length - 1; i >= 0; i--) { if ((menusList[i].type=="func"||menusList[i].type=="flow" )&& (searchObj.portal_func&&menusList[i].resUrl)&&searchObj.portal_func == menusList[i].resUrl) { console.log('跳转进来的功能:',searchObj.portal_func); //?portal_func=/project/rjwhzx/rjzcgl/funcdir/zcmcx.func&id=11111 delete searchObj.portal_func; // let uriStr = baseURL + codeProjectName + menusList[i].resUrl; let uriStr = menusList[i].resUrl; if(!window._global){//正式环境 uriStr=utils.string.setUrlValue(uriStr,"pn",window.HIVUI_SETTING.projectName); getToken()&&(uriStr=utils.string.setUrlValue(uriStr,"access_token",getToken())); } if(uriStr.indexOf("http")==-1){ uriStr=location.origin+uriStr; } let id = md5(uriStr); uriStr = utils.string.setUrlValue(uriStr, "__tabId", md5(uriStr)); for(let key in searchObj){ uriStr = utils.string.setUrlValue(uriStr,key,searchObj[key]); } let inMenu = false; for (let j = list.length - 1; j >= 0; j--) { if (list[j].id == id) { inMenu = true; break; } } if (inMenu) break; defTabKey = id; list.push({ id: id, title: menusList[i].name, url: uriStr, close: true, actived:true //默认选中 }); break; } } if(cfg.isPageCache&&window.localStorage.getItem('pageCacheArr')){ JSON.parse(window.localStorage.getItem('pageCacheArr')).map((item,index)=>{ uriStr = item.url; if(!window._global){//正式环境 uriStr=utils.string.setUrlValue(uriStr,"pn",window.HIVUI_SETTING.projectName); getToken()&&(uriStr=utils.string.setUrlValue(uriStr,"access_token",getToken())); } if(uriStr.indexOf("http")==-1){ uriStr=location.origin+uriStr; } let id = md5(uriStr); uriStr = utils.string.setUrlValue(uriStr, "__tabId", id); defTabKey = id; list.push({ title: item.title, url: uriStr, close: true, id: id, //type: item.type, }); }); } //地址栏打开标签 if(top.location.hash){ let hashTabParam={}; top.location.hash.replace("#/","").split("&zhc&").forEach((item=>{ if(item.indexOf("tabUrl=")==0){ hashTabParam.resUrl=item.replace("tabUrl=",""); }else if(item.indexOf("tabTitle=")==0){ hashTabParam.name=decodeURIComponent(item.replace("tabTitle=","")); } })); if(hashTabParam.resUrl){ if(hashTabParam.resUrl.indexOf("about:blank")==-1){//下推页面无法重新载入 //消除tabId干扰 let tabIdStr=hashTabParam.resUrl.match(/\__tabId=.*?&/)||hashTabParam.resUrl.match(/\?__tabId=.*/); if(tabIdStr&&tabIdStr[0]){ hashTabParam.resUrl=hashTabParam.resUrl.replace(tabIdStr[0],"").replace("?&","?"); } let id = md5(hashTabParam.resUrl); let existsItem=list.filter(item=>{//标签已存在 if(item.url&&hashTabParam.resUrl){ let itemMainUrl=item.url.split("?")[0]; let hashTabMainUrl=hashTabParam.resUrl.split("?")[0]; if(hashTabParam.resUrl.indexOf(itemMainUrl)!=-1){ return item; } } }); if(!existsItem[0]){ defTabKey = id; hashTabParam.resUrl = utils.string.setUrlValue(hashTabParam.resUrl, "__tabId", id); list.push({ title: hashTabParam.name, url: hashTabParam.resUrl, close: true, id: id, actived:true //默认选中 }); }else{ defTabKey=existsItem[0].id; } } } } console.log('sys default tabs :', list); return { defTabKey: defTabKey || "", tabList: list, sysConfig: this.$store.state.app.config, isFullScreen: false, isMiniLogin:false, miniLoginUrl:"", menuOpenList:[], }; }, mounted() { // console.log('主界面初始化~!'); let me = this, cTabs = this.$refs["cmp-tabs"]; window.Sys = { isVue: true, addEvent(evtName, fn) { //onLoad Bus.$on(evtName, fn); }, tabPanel: { autoResize() { cTabs.resize(); }, }, getSideNavs() { return [...me.$store.getters.navs]; }, setSideNavs(data) { if (data == null && !(data instanceof Array)) return; //me.$store.dispatch("app/setQuickNav", data); }, /** * @param {} url * @param {} title * @param {} uid * @param {} onLoad //iframe 加载后 * @param {} nearest //标签页是否紧接在其右侧打开 * @param {} renderedFn //渲染回调 */ addTab(url, title, uid, onLoad, nearest, renderedFn) { // if(me.sysConfig.isSinglePage){//单页面模式 // uid="123456789"; // }else if(me.sysConfig.isPageCache){//页面标签缓存模式 let _pcarr=window.localStorage.getItem('pageCacheArr'); let cacheArr=_pcarr?JSON.parse(_pcarr):[]; cacheArr=cacheArr.filter((item)=>{ if(url!=item.url){ return item } }); cacheArr.push({ "url":url, "title":title, }); if(cacheArr.length>20){ cacheArr.shift(); } window.localStorage.setItem('pageCacheArr',JSON.stringify(cacheArr)); } if (!(url == "" || url == "about:blank")) { uid = md5(url); } if(!window._global){//正式环境 url=utils.string.setUrlValue(url,"pn",window.HIVUI_SETTING.projectName); getToken()&&(url=utils.string.setUrlValue(url,"access_token",getToken())); } let tabs = me.tabList.filter((item, index) => { if(item.id == uid){ item.title=title; return item; } }); if (tabs.length/*&&!me.sysConfig.isSinglePage*/) { me.defTabKey = uid; me.$nextTick( (function (fn) { return function () { let tab = cTabs.getItemObj(uid); fn && fn(tab); }; })(renderedFn) ); return; } if (getUrlValue(url, "__tabId") == "") { //关系到用户调用,防止Scp.context.closeCurPage取不到__tabId出错 url = utils.string.setUrlValue(url, "__tabId", uid); } /*if(me.sysConfig.isSinglePage){ me.tabList.pop(); me.$nextTick(()=>{ me.tabList.push({ title: title, url: url, close: true, id: uid, listeners: { load: onLoad, }, }) }) }else{*/ me.tabList.push({ title: title, url: url, close: true, id: uid, listeners: { load: onLoad, }, }); //} me.defTabKey = uid; // window.____renderFunc = renderedFn; me.$nextTick( (function (fn, _uid) { return function () { let tab = cTabs.getItemObj(_uid); fn && fn(tab); }; })(renderedFn, uid) ); console.log(' addTab ',me.tabList); }, getTab(uid) { return cTabs.getItemObj(uid); }, seldTab(uid) { cTabs.defTabKey = uid; }, getSeldTab() { return cTabs.getSeldItemObj(); }, refreshTab(uid) { let tab = cTabs.getItemObj(uid); tab && tab.tabPanelIframeEl.contentWindow.window.location.reload(); }, //closeTab colseTab(uid) { cTabs.closeItem(uid); }, colseSeldTab() { cTabs.closeCurItem(); }, }; window.SysPage={ newPage : function(title, url, params, method, target) { var uid , tab; if(params&¶ms._ftaskguid){ uid=md5(url+"?tguid="+params._ftaskguid); }else if(params&¶ms.__viewItemId&&!target){ uid=md5(url+"?vItemId="+params.__viewItemId); }else{ uid=md5(url); } function formSubmit(cfg){ cfg.autoDestroy = true; var form = me.creatForm(cfg); form.submit(); } if(method=="get"){ //get 不刷新 var tab = top.Sys.getTab(uid); if(tab){ top.Sys.seldTab(uid); return; } } if(target=="opening"){ var cfg = { url : utils.string.setUrlValue(url,"__tabId",uid), data : params, target : '_blank', method : method || "get" }; formSubmit(cfg); //打开新标签 return; }else if(target=="me"){ //本页:框架页的本页面 var cfg = { url : url, data : params, target : '_self', method : method || "get" }; formSubmit(cfg); }else{ if (target == "_self"){ tab = top.Sys.getSeldTab(); if(top.Sys.isVue){ var titleEl = tab.tabEl.querySelector('.pl-tabs-itemTxt'); titleEl.innerText = ""; }else{ tab.tabEl.find('.sys-tab-item-text').html(""); } }else{ /*** * uid 让框架页可以关闭自己 closeCurPage */ if(top.Sys.isVue){ //6个参数,第7个是vue渲染后回调 if(target == "_blank"){ uid+=utils.string.id(4); } top.Sys.addTab("about:blank",title,uid,null,true,function(tab){ if(!window._global){//正式环境 url=utils.string.setUrlValue(url,"pn",window.HIVUI_SETTING.projectName); getToken()&&(url=utils.string.setUrlValue(url,"access_token",getToken())); } var cfg = { url : utils.string.setUrlValue(url,"__tabId",uid), data : params, target : null, method : method || "get" }; //var titleEl = tab.tabEl.querySelector('.pl-tabs-itemTxt'); //titleEl.innerText = ""; cfg.target = tab.tabPanelIframeEl.getAttribute('name'); formSubmit(cfg); }); }else{ var cfg = { url : utils.string.setUrlValue(url,"__tabId",uid), data : params, target : null, method : method || "get" }; //Sys.addTab(url, title, uid, callback) tab = top.Sys.addTab("about:blank",title,uid); tab.tabEl.find('.sys-tab-item-text').html(""); cfg.target = tab.tabPanelIframeEl.getAttribute('name'); formSubmit(cfg); } } } }, /** * 通过url 进行对应的目标功能 调用目标页的callback方法 * @param id * @param url */ closePage : function(id,url) { if (!top.Sys) { closeWindow() return; } var uid = md5(url||""), tab; if(!window.parent.Sys){ return; } var tab = window.parent.Sys.getTab(uid); if(tab){ window.parent.Sys.seldTab(uid); //var _scp = tab.tabPanelIframeEl.contentWindow.window.Scp; //if(_scp){ // _scp.context&&_scp.context.callback&&_scp.context.callback.call(_scp.context); //} }else{ if(url&&url.trim()!=""){ var tab = window.parent.Sys.addTab(url,"",null,null,true); } } if (id) { window.parent.Sys.colseTab(id); }else{ window.parent.Sys.colseSeldTab(); } }, closeCurPage:function(){ if(!window.parent.Sys){ return; } var id = getUrlValue(window.location.search,'__tabId'); window.parent.Sys.colseTab(id); }, setPageTitle:function(title){ if(!window.parent.Sys){ return; } var openway = getUrlValue('','openway'); if(openway=="openwin")return; var tab = window.parent.Sys.getSeldTab(); if(title!=""){ tab.tabEl.find('.sys-tab-item-text').html(title); window.parent.Sys.tabPanel.autoResize(); } }, //小登录弹窗打开 openMiniLogin:function(isRefresh){ if(window.HIVUI_SETTING.isSingleLogin||me.isMiniLogin){ return; } me.isMiniLogin=true; let params="questType=ajax"+(isRefresh?"&isRefresh=true":"")+"#"; let __login=window.HIVUI_SETTING.loginUrl.split("#"); me.miniLoginUrl=__login[0]+(__login[0].indexOf("?")==-1?"?":"&")+params+(__login[1]||"")+"miniLogin"; }, //小登录弹窗关闭 closeMiniLogin:function(isRefresh){ me.isMiniLogin=false; changeBz({ bzid:me.$store.state.user.userInfo.fbzid }); let tabId=location.href.match(/\?__tabId=.*?&/)[0].replace("?__tabId=","").replace("&",""); if(isRefresh&&tabId){ let hasToken=getUrlValue(location.href,"access_token"); if(hasToken){ location=setUrlValue(decodeURIComponent(location.href),"access_token",data.token); }else{ document.querySelector("iframe[name='iframe"+tabId+"']").contentWindow.location.reload(); } } }, //消息通知 notificationFunc:notificationFunc, }; if (this.defTabKey == "" && this.tabList.length) this.defTabKey = this.tabList[0].id; //默认如果指向下面两个的话,标识一下已经加载过 if (this.$refs["protalSysHome"]) { //this.$store.dispatch("portal/loadSysList"); //重新加载系统门户列表 // console.log('加载系统门户列表~!'); let itemData = this.$refs["protalSysHome"][0].itemData; if (itemData.id == this.defTabKey) { this.$refs["protalSysHome"][0].actived = true; } } if (this.$refs["portalUserWork"]) { //this.$store.dispatch("portal/loadList"); //重新加载工作台门户列表 // console.log('加载工作台门户列表~!'); let itemData = this.$refs["portalUserWork"][0].itemData; if (itemData.id == this.defTabKey) { this.$refs["portalUserWork"][0].actived = true; } } let events = this.sysConfig.events; if (events) { this.$nextTick((r) => { events.onLoad && events.onLoad(); }); } }, methods: { //将框架页里头的a 标签进行转换 initATagUrl(el) { let aList = el.querySelectorAll("a"); aList.forEach(function (aTag, i) { if (aTag.href) { var httpUrl = new RegExp( "^((https|http|ftp|rtsp|mms)?://)" ); if ( httpUrl.test( aTag.href.replace(window.location.origin, "") ) ) { return false; } if (!aTag.onclick) { if (aTag.target == "_blank") { aTag.addEventListener("click", function (evt) { evt.preventDefault(); evt.stopPropagation(); var tabTitle = ""; if (aTag.title) { tabTitle = aTag.title; } var url = this.getAttribute("href"); var reg = /^\//gi; Sys.addTab(url, tabTitle, "", "", true); return false; }); } } } }); window.Sys.tabPanel.autoResize(); }, handleBeforeRefresh(panel, evt) { //if (panel.itemData.type == "home") { // this.$store.state.app.sysList=[]; //this.$store.dispatch("portal/loadSysList"); //重新加载系统门户列表 //return false; //} if (panel.itemData.type == "work") { // this.$store.state.app.list=[]; //this.$store.dispatch("portal/loadList"); //重新加载工作台门户列表 return false; } }, handleIframeLoad(panelCmp, evt) { let me = this, key = panelCmp.name; let ifm = panelCmp.$refs["iframe"]; let tabData = panelCmp.itemData; if (tabData.listeners) { tabData.listeners.load && tabData.listeners.load(); } //转换A标签 me.initATagUrl(ifm.contentWindow.document.body); window.__UserInfo = { orgId: "", operator: "", }; if (panelCmp.title == null || panelCmp.title == "") { let cTabs = me.$refs["cmp-tabs"]; cTabs.resize(); } }, handleBeforeClose(panel, evt) { let ifm = panel.$refs["iframe"]; try { let flag = ifm.contentWindow.Scp.context.beforeunloadFn(evt, 1); return flag; } catch (e) { !document.all && window.console.log( "iframe : Scp.context.beforeunloadFn();" ); } }, handleActiveTab(panel) { if (!panel) return; top.location.hash="#/tabUrl="+panel.url+"&zhc&tabTitle="+panel.title; if (panel.itemData.type == "home") { this.$refs["protalSysHome"][0].doRender(); } if (panel.itemData.type == "work") { this.$refs["portalUserWork"][0].doRender(); } try { let tab = this.$refs["cmp-tabs"].getItemObj(panel.name); //tab.tabPanelIframeEl.contentDocument.trigger("iframeActiving", [panel.name]); tab.tabPanelIframeEl.contentDocument.dispatchEvent( new CustomEvent('iframeActiving', { detail:[panel.name] } ) ); } catch (e) { console.log("iframeActiving error!"); } }, //面板上面的事件特别处理,现在暂时没用 handleSelected(item) { return; let key = item.id; let ifm = this.$refs["dom-iframe" + key][0]; try { let __orgId = ifm.contentWindow.Scp.User.getId(); let __operator = ifm.contentWindow.Scp.User.getOperator(); window.__UserInfo = { orgId: __orgId, operator: __operator, }; } catch (e) {} }, handleRemoveTab(targetName) { let tabs = this.tabList; let activeName = this.defTabKey; if (activeName === targetName) { tabs.forEach((tab, index) => { if (tab.close && tab.id === targetName) { let nextTab = tabs[index + 1] || tabs[index - 1]; if (nextTab) { activeName = nextTab.id; } } }); } this.defTabKey = activeName; tabs = tabs.filter((tab) => { return tab.close == false || tab.id !== targetName; }); console.log('handleRemoveTab') this.$set(this, "tabList", tabs); if (this.tabList.length == 0) { this.defTabKey = "tabPanel_home"; } }, handleRemoveAllTab() { let tabs = this.tabList; this.tabList = tabs.filter((tab) => { return !tab.close; }); let l = this.tabList.length; this.defTabKey = l ? this.tabList[l - 1].id : ""; }, handleRemoveLeftTab(name, index) { let tabs = this.tabList; let defTabKey = this.defTabKey; this.tabList = tabs.filter((tab, i) => { if (tab.id == defTabKey && i < index) { //当前的选中,是在关闭区内 defTabKey = name; } return tab.close == false || i >= index; }); this.defTabKey = defTabKey; }, handleRemoveRightTab(name, index) { let tabs = this.tabList; let defTabKey = this.defTabKey; this.tabList = tabs.filter((tab, i) => { if (tab.id == defTabKey && i > index) { //当前的选中,是在关闭区内 defTabKey = name; } return tab.close == false || i <= index; }); this.defTabKey = defTabKey; }, handleRemoveOtherTab(name, index) { let tabs = this.tabList; tabs = tabs.filter((tab, i) => { return tab.close == false || i == index; }); this.$set(this, "tabList", tabs); this.defTabKey = name; }, handleFullScreen() { this.$emit("onFullScreen"); // screenfull.toggle() }, creatForm(opt){ let that=this; var _opt={ autoShow:false, cancelAction:false, url:null, target:null, action:null, method:null, params:null, data:null, autoDestroy:false, _id:utils.string.id(8), }; Object.assign(_opt,opt); var _formTpl=`<form style="display:none;" id="${_opt._id}"><input type="submit" value="submit" id="submit_${_opt._id}"/></form>`; var _el=document.createElement("div"); _el.innerHTML=_formTpl; document.getElementsByTagName("body")[0].appendChild(_el); var _form=_el.getElementsByTagName("form")[0]; this.setTarget=(str)=>{ _opt.target = str; _form.setAttribute('target',str); } this.setUrl=(str)=>{ this.formateUrl(str); var url = utils.string.setUrlValue(_opt.url,"_____r",new Date().getTime()); _form.setAttribute('action',url); } this.setMethod=(str)=>{ _opt.method = str||'get'; _form.setAttribute('method',str); } this.setParams=(params)=>{ _opt.params = params; } this.setData=(obj)=>{ _opt.data = obj||{}; if(_opt.method=="get"&&_opt.url!=null){ var parms =_opt.url.split("?")[1], item,i=0,len; if(parms!=null){ parms = parms.split("&"); for(i=0,len=parms.length;i<len;i++){ item = parms[i].split("="); _opt.data[item[0]]=item[1]; } } } _.each(_opt.data,function(value,key){ if(_.isObject(value)){ value = JSON.stringify(value); } var _hiddenInput=document.createElement("input"); _hiddenInput.setAttribute("type","hidden"); _form.appendChild(_hiddenInput); _hiddenInput.setAttribute('name',key); _hiddenInput.setAttribute('value',value); }); } this.removeData=()=>{ _opt.data = null; _form.children().remove(); } this.addData=(data)=>{ _opt.data = _.extend({},_opt.data||{},data||{}); _form.children().remove(); this.setData(_opt.data); } this.delData=(keys)=>{ _.each(keys||[],function(val,i){ if((val in _opt.data)){ delete _opt.data[val]; } }); _form.children().remove(); this.setData(_opt.data); } this.formateUrl=(url)=>{ var params= this.formateParams(_opt.params); if(!url)return; _opt.url = url; if(params){ if(_opt.url.indexOf('?')>0){ _opt.url+='&'+params; }else{ _opt.url+='?'+params; } } } this.formateParams=(obj)=>{ if(obj==null) return null; return $.param(obj||{}); } this.submit=()=>{ if(_opt.cancelAction) return; _opt.cancelAction = false; if(_opt.autoDestroy){ setTimeout(function(){ _form.submit() //_form.find('#submit'+me.id).click();//谷歌下面要用 按钮才有效果 },0); setTimeout(function(){that.destroy();},1000); }else{ _form.submit(); } } this.destroy=()=>{ _el.remove(); } this.setTarget(_opt.target); this.setMethod(_opt.method); this.setUrl(_opt.url); this.setData(_opt.data); return that; }, handleCloseMenuDialog(item){ this.menuOpenList=this.menuOpenList.filter((__item)=>{ if(__item.uid!=item.uid){ return __item; } }); } }, }; </script> <style lang="less" scoped> .miniLoginBox{ ::v-deep .el-dialog__body{ padding-top:0; } } .menuOpenBox{ ::v-deep .v-modal{ top:98px; height:calc(100% - 98px); } .menuOpenDialog{ top:98px; } } </style>
<template> <div class="pl-main"> <p-tabs ref="cmp-tabs" v-model="defTabKey" @onActiveTab="handleActiveTab" @onRemoveTab="handleRemoveTab" @onRemoveAllTab="handleRemoveAllTab" @onRemoveLeft="handleRemoveLeftTab" @onRemoveRight="handleRemoveRightTab" @onRemoveOther="handleRemoveOtherTab" @onFullScreen="handleFullScreen" :isSinglePage="sysConfig.isSinglePage" > <p-tabpanel v-for="(item,index) in tabList" :key="item.id" :close="item.close" :title.sync="item.title" :name="item.id" :url="item.url" :itemData="item" @onIframeLoad="handleIframeLoad" @onBeforeClose="handleBeforeClose" @onSelected="handleSelected" @onBeforeRefresh="handleBeforeRefresh" > <template v-if="item.type&&item.type=='home'"> <PortalSys :itemData="item" ref="protalSysHome" ></PortalSys> </template> <template v-if="item.type&&item.type=='work'"> <PortalUser :itemData="item" ref="portalUserWork" ></PortalUser> </template> </p-tabpanel> </p-tabs> <el-dialog class="miniLoginBox" width="450px" :visible.sync="isMiniLogin" :close-on-click-modal="false" :append-to-body="true"> <iframe v-if="isMiniLogin" width="100%" height="450px" :src="miniLoginUrl" style="border:none;"></iframe> </el-dialog> <div class="menuOpenBox" v-if="menuOpenList.length>0"> <el-dialog v-for="(item,index) in menuOpenList" :key="'menuOpenList'+index" class="menuOpenDialog" width="50%" top="5vh" :visible.sync="item.uid" :close-on-click-modal="false" :modal-append-to-body="false" @closed="handleCloseMenuDialog(item)"> <iframe width="100%" height="100%" :src="item.url" style="border:none;height:60vh;"></iframe> </el-dialog> </div> </div> </template> <script> import {changeBz} from "@main/api/user"; import { baseURL, codeProjectName,requestUrl } from "@main/config"; import { PTabs, PTabpanel } from "@main/components/tabpanel"; import PortalUser from "@main/views/Portal/user"; import PortalSys from "@main/views/Portal/sys"; import { getUrlValue, setUrlValue,getUrlSearch,closeWindow,notificationFunc } from "@main/utils"; import { getToken } from '@main/utils/auth' // import { type } from "os"; import md5 from "js-md5"; import { utils } from "hi-ui"; export default { inject: ["addTab", "showTab", "hideTab"], components: { PTabs, PTabpanel, PortalUser, PortalSys, }, data() { let cfg = this.$store.state.app.config || {}; let defTabs = cfg.sysDefTabs || []; let setTabs = cfg.sysSetTabs || []; let list = [], defTabKey = ""; defTabs = setTabs.concat(defTabs); defTabs.map((item, i) => { let id = item.url ? md5(item.url) : item.id; //强转成 url md5 id if(!window._global){//正式环境 item.url=utils.string.setUrlValue(item.url,"pn",window.HIVUI_SETTING.projectName); getToken()&&(item.url=utils.string.setUrlValue(item.url,"access_token",getToken())); } // if(cfg.isSinglePage){//单页面模式 // id="123456789"; // } item.actived && (defTabKey = id); if (item.url && getUrlValue(item.url, "__tabId") == "") { //关系到用户调用,防止Scp.context.closeCurPage取不到__tabId出错 item.url = utils.string.setUrlValue(item.url, "__tabId", id); } /*if(cfg.isSinglePage){ list[0]={ title: item.title, url: item.url, close: item.close, id: id, type: item.type, }; }else*/{ list.push({ title: item.title, url: item.url, close: item.close, id: id, type: item.type, }); } }); console.log('page default open tabs :',defTabs); //系统菜单 后台默认配激活 let menusDef2Tabs = this.$store.getters.defTabs, uriStr = ""; console.log('menus default open tabs :',defTabs); menusDef2Tabs.map((item, i) => { //uriStr = baseURL + codeProjectName + item.resUrl; uriStr = item.resUrl; if(!window._global){//正式环境 uriStr=utils.string.setUrlValue(uriStr,"pn",window.HIVUI_SETTING.projectName); getToken()&&(uriStr=utils.string.setUrlValue(uriStr,"access_token",getToken())); } if(uriStr.indexOf("http")==-1){ uriStr=location.origin+uriStr; } let id = md5(uriStr); uriStr = utils.string.setUrlValue(uriStr, "__tabId", id); list.push({ title: item.name, url: uriStr, close: true, id: id, type: item.type, }); }); // console.log('系统菜单',list); //第三方跳转过来地址自动打开功能tab let menusList = this.$store.getters.menusList; let searchObj = getUrlSearch(decodeURIComponent(this.$router.currentRoute.fullPath)); for (let i = menusList.length - 1; i >= 0; i--) { if ((menusList[i].type=="func"||menusList[i].type=="flow" )&& (searchObj.portal_func&&menusList[i].resUrl)&&searchObj.portal_func == menusList[i].resUrl) { console.log('跳转进来的功能:',searchObj.portal_func); //?portal_func=/project/rjwhzx/rjzcgl/funcdir/zcmcx.func&id=11111 delete searchObj.portal_func; // let uriStr = baseURL + codeProjectName + menusList[i].resUrl; let uriStr = menusList[i].resUrl; if(!window._global){//正式环境 uriStr=utils.string.setUrlValue(uriStr,"pn",window.HIVUI_SETTING.projectName); getToken()&&(uriStr=utils.string.setUrlValue(uriStr,"access_token",getToken())); } if(uriStr.indexOf("http")==-1){ uriStr=location.origin+uriStr; } let id = md5(uriStr); uriStr = utils.string.setUrlValue(uriStr, "__tabId", md5(uriStr)); for(let key in searchObj){ uriStr = utils.string.setUrlValue(uriStr,key,searchObj[key]); } let inMenu = false; for (let j = list.length - 1; j >= 0; j--) { if (list[j].id == id) { inMenu = true; break; } } if (inMenu) break; defTabKey = id; list.push({ id: id, title: menusList[i].name, url: uriStr, close: true, actived:true //默认选中 }); break; } } if(cfg.isPageCache&&window.localStorage.getItem('pageCacheArr')){ JSON.parse(window.localStorage.getItem('pageCacheArr')).map((item,index)=>{ uriStr = item.url; if(!window._global){//正式环境 uriStr=utils.string.setUrlValue(uriStr,"pn",window.HIVUI_SETTING.projectName); getToken()&&(uriStr=utils.string.setUrlValue(uriStr,"access_token",getToken())); } if(uriStr.indexOf("http")==-1){ uriStr=location.origin+uriStr; } let id = md5(uriStr); uriStr = utils.string.setUrlValue(uriStr, "__tabId", id); defTabKey = id; list.push({ title: item.title, url: uriStr, close: true, id: id, //type: item.type, }); }); } //地址栏打开标签 if(top.location.hash){ let hashTabParam={}; top.location.hash.replace("#/","").split("&zhc&").forEach((item=>{ if(item.indexOf("tabUrl=")==0){ hashTabParam.resUrl=item.replace("tabUrl=",""); }else if(item.indexOf("tabTitle=")==0){ hashTabParam.name=decodeURIComponent(item.replace("tabTitle=","")); } })); if(hashTabParam.resUrl){ if(hashTabParam.resUrl.indexOf("about:blank")==-1){//下推页面无法重新载入 //消除tabId干扰 let tabIdStr=hashTabParam.resUrl.match(/\__tabId=.*?&/)||hashTabParam.resUrl.match(/\?__tabId=.*/); if(tabIdStr&&tabIdStr[0]){ hashTabParam.resUrl=hashTabParam.resUrl.replace(tabIdStr[0],"").replace("?&","?"); } let id = md5(hashTabParam.resUrl); let existsItem=list.filter(item=>{//标签已存在 if(item.url&&hashTabParam.resUrl){ let itemMainUrl=item.url.split("?")[0]; let hashTabMainUrl=hashTabParam.resUrl.split("?")[0]; if(hashTabParam.resUrl.indexOf(itemMainUrl)!=-1){ return item; } } }); if(!existsItem[0]){ defTabKey = id; hashTabParam.resUrl = utils.string.setUrlValue(hashTabParam.resUrl, "__tabId", id); list.push({ title: hashTabParam.name, url: hashTabParam.resUrl, close: true, id: id, actived:true //默认选中 }); }else{ defTabKey=existsItem[0].id; } } } } console.log('sys default tabs :', list); return { defTabKey: defTabKey || "", tabList: list, sysConfig: this.$store.state.app.config, isFullScreen: false, isMiniLogin:false, miniLoginUrl:"", menuOpenList:[], }; }, mounted() { // console.log('主界面初始化~!'); let me = this, cTabs = this.$refs["cmp-tabs"]; window.Sys = { isVue: true, addEvent(evtName, fn) { //onLoad Bus.$on(evtName, fn); }, tabPanel: { autoResize() { cTabs.resize(); }, }, getSideNavs() { return [...me.$store.getters.navs]; }, setSideNavs(data) { if (data == null && !(data instanceof Array)) return; //me.$store.dispatch("app/setQuickNav", data); }, /** * @param {} url * @param {} title * @param {} uid * @param {} onLoad //iframe 加载后 * @param {} nearest //标签页是否紧接在其右侧打开 * @param {} renderedFn //渲染回调 */ addTab(url, title, uid, onLoad, nearest, renderedFn) { // if(me.sysConfig.isSinglePage){//单页面模式 // uid="123456789"; // }else if(me.sysConfig.isPageCache){//页面标签缓存模式 let _pcarr=window.localStorage.getItem('pageCacheArr'); let cacheArr=_pcarr?JSON.parse(_pcarr):[]; cacheArr=cacheArr.filter((item)=>{ if(url!=item.url){ return item } }); cacheArr.push({ "url":url, "title":title, }); if(cacheArr.length>20){ cacheArr.shift(); } window.localStorage.setItem('pageCacheArr',JSON.stringify(cacheArr)); } if (!(url == "" || url == "about:blank")) { uid = md5(url); } if(!window._global){//正式环境 url=utils.string.setUrlValue(url,"pn",window.HIVUI_SETTING.projectName); getToken()&&(url=utils.string.setUrlValue(url,"access_token",getToken())); } let tabs = me.tabList.filter((item, index) => { if(item.id == uid){ item.title=title; return item; } }); if (tabs.length/*&&!me.sysConfig.isSinglePage*/) { me.defTabKey = uid; me.$nextTick( (function (fn) { return function () { let tab = cTabs.getItemObj(uid); fn && fn(tab); }; })(renderedFn) ); return; } if (getUrlValue(url, "__tabId") == "") { //关系到用户调用,防止Scp.context.closeCurPage取不到__tabId出错 url = utils.string.setUrlValue(url, "__tabId", uid); } /*if(me.sysConfig.isSinglePage){ me.tabList.pop(); me.$nextTick(()=>{ me.tabList.push({ title: title, url: url, close: true, id: uid, listeners: { load: onLoad, }, }) }) }else{*/ me.tabList.push({ title: title, url: url, close: true, id: uid, listeners: { load: onLoad, }, }); //} me.defTabKey = uid; // window.____renderFunc = renderedFn; me.$nextTick( (function (fn, _uid) { return function () { let tab = cTabs.getItemObj(_uid); fn && fn(tab); }; })(renderedFn, uid) ); console.log(' addTab ',me.tabList); }, getTab(uid) { return cTabs.getItemObj(uid); }, seldTab(uid) { cTabs.defTabKey = uid; }, getSeldTab() { return cTabs.getSeldItemObj(); }, refreshTab(uid) { let tab = cTabs.getItemObj(uid); tab && tab.tabPanelIframeEl.contentWindow.window.location.reload(); }, //closeTab colseTab(uid) { cTabs.closeItem(uid); }, colseSeldTab() { cTabs.closeCurItem(); }, }; window.SysPage={ newPage : function(title, url, params, method, target) { var uid , tab; if(params&¶ms._ftaskguid){ uid=md5(url+"?tguid="+params._ftaskguid); }else if(params&¶ms.__viewItemId&&!target){ uid=md5(url+"?vItemId="+params.__viewItemId); }else{ uid=md5(url); } function formSubmit(cfg){ cfg.autoDestroy = true; var form = me.creatForm(cfg); form.submit(); } if(method=="get"){ //get 不刷新 var tab = top.Sys.getTab(uid); if(tab){ top.Sys.seldTab(uid); return; } } if(target=="opening"){ var cfg = { url : utils.string.setUrlValue(url,"__tabId",uid), data : params, target : '_blank', method : method || "get" }; formSubmit(cfg); //打开新标签 return; }else if(target=="me"){ //本页:框架页的本页面 var cfg = { url : url, data : params, target : '_self', method : method || "get" }; formSubmit(cfg); }else{ if (target == "_self"){ tab = top.Sys.getSeldTab(); if(top.Sys.isVue){ var titleEl = tab.tabEl.querySelector('.pl-tabs-itemTxt'); titleEl.innerText = ""; }else{ tab.tabEl.find('.sys-tab-item-text').html(""); } }else{ /*** * uid 让框架页可以关闭自己 closeCurPage */ if(top.Sys.isVue){ //6个参数,第7个是vue渲染后回调 if(target == "_blank"){ uid+=utils.string.id(4); } top.Sys.addTab("about:blank",title,uid,null,true,function(tab){ if(!window._global){//正式环境 url=utils.string.setUrlValue(url,"pn",window.HIVUI_SETTING.projectName); getToken()&&(url=utils.string.setUrlValue(url,"access_token",getToken())); } var cfg = { url : utils.string.setUrlValue(url,"__tabId",uid), data : params, target : null, method : method || "get" }; //var titleEl = tab.tabEl.querySelector('.pl-tabs-itemTxt'); //titleEl.innerText = ""; cfg.target = tab.tabPanelIframeEl.getAttribute('name'); formSubmit(cfg); }); }else{ var cfg = { url : utils.string.setUrlValue(url,"__tabId",uid), data : params, target : null, method : method || "get" }; //Sys.addTab(url, title, uid, callback) tab = top.Sys.addTab("about:blank",title,uid); tab.tabEl.find('.sys-tab-item-text').html(""); cfg.target = tab.tabPanelIframeEl.getAttribute('name'); formSubmit(cfg); } } } }, /** * 通过url 进行对应的目标功能 调用目标页的callback方法 * @param id * @param url */ closePage : function(id,url) { if (!top.Sys) { closeWindow() return; } var uid = md5(url||""), tab; if(!window.parent.Sys){ return; } var tab = window.parent.Sys.getTab(uid); if(tab){ window.parent.Sys.seldTab(uid); //var _scp = tab.tabPanelIframeEl.contentWindow.window.Scp; //if(_scp){ // _scp.context&&_scp.context.callback&&_scp.context.callback.call(_scp.context); //} }else{ if(url&&url.trim()!=""){ var tab = window.parent.Sys.addTab(url,"",null,null,true); } } if (id) { window.parent.Sys.colseTab(id); }else{ window.parent.Sys.colseSeldTab(); } }, closeCurPage:function(){ if(!window.parent.Sys){ return; } var id = getUrlValue(window.location.search,'__tabId'); window.parent.Sys.colseTab(id); }, setPageTitle:function(title){ if(!window.parent.Sys){ return; } var openway = getUrlValue('','openway'); if(openway=="openwin")return; var tab = window.parent.Sys.getSeldTab(); if(title!=""){ tab.tabEl.find('.sys-tab-item-text').html(title); window.parent.Sys.tabPanel.autoResize(); } }, //小登录弹窗打开 openMiniLogin:function(isRefresh){ if(window.HIVUI_SETTING.isSingleLogin||me.isMiniLogin){ return; } me.isMiniLogin=true; let params="questType=ajax"+(isRefresh?"&isRefresh=true":"")+"#"; let __login=window.HIVUI_SETTING.loginUrl.split("#"); me.miniLoginUrl=__login[0]+(__login[0].indexOf("?")==-1?"?":"&")+params+(__login[1]||"")+"miniLogin"; }, //小登录弹窗关闭 closeMiniLogin:function(isRefresh){ me.isMiniLogin=false; changeBz({ bzid:me.$store.state.user.userInfo.fbzid }); let tabId=location.href.match(/\?__tabId=.*?&/)[0].replace("?__tabId=","").replace("&",""); if(isRefresh&&tabId){ document.querySelector("iframe[name='iframe"+tabId+"']").contentWindow.location.reload(); } }, //消息通知 notificationFunc:notificationFunc, }; if (this.defTabKey == "" && this.tabList.length) this.defTabKey = this.tabList[0].id; //默认如果指向下面两个的话,标识一下已经加载过 if (this.$refs["protalSysHome"]) { //this.$store.dispatch("portal/loadSysList"); //重新加载系统门户列表 // console.log('加载系统门户列表~!'); let itemData = this.$refs["protalSysHome"][0].itemData; if (itemData.id == this.defTabKey) { this.$refs["protalSysHome"][0].actived = true; } } if (this.$refs["portalUserWork"]) { //this.$store.dispatch("portal/loadList"); //重新加载工作台门户列表 // console.log('加载工作台门户列表~!'); let itemData = this.$refs["portalUserWork"][0].itemData; if (itemData.id == this.defTabKey) { this.$refs["portalUserWork"][0].actived = true; } } let events = this.sysConfig.events; if (events) { this.$nextTick((r) => { events.onLoad && events.onLoad(); }); } }, methods: { //将框架页里头的a 标签进行转换 initATagUrl(el) { let aList = el.querySelectorAll("a"); aList.forEach(function (aTag, i) { if (aTag.href) { var httpUrl = new RegExp( "^((https|http|ftp|rtsp|mms)?://)" ); if ( httpUrl.test( aTag.href.replace(window.location.origin, "") ) ) { return false; } if (!aTag.onclick) { if (aTag.target == "_blank") { aTag.addEventListener("click", function (evt) { evt.preventDefault(); evt.stopPropagation(); var tabTitle = ""; if (aTag.title) { tabTitle = aTag.title; } var url = this.getAttribute("href"); var reg = /^\//gi; Sys.addTab(url, tabTitle, "", "", true); return false; }); } } } }); window.Sys.tabPanel.autoResize(); }, handleBeforeRefresh(panel, evt) { //if (panel.itemData.type == "home") { // this.$store.state.app.sysList=[]; //this.$store.dispatch("portal/loadSysList"); //重新加载系统门户列表 //return false; //} if (panel.itemData.type == "work") { // this.$store.state.app.list=[]; //this.$store.dispatch("portal/loadList"); //重新加载工作台门户列表 return false; } }, handleIframeLoad(panelCmp, evt) { let me = this, key = panelCmp.name; let ifm = panelCmp.$refs["iframe"]; let tabData = panelCmp.itemData; if (tabData.listeners) { tabData.listeners.load && tabData.listeners.load(); } //转换A标签 me.initATagUrl(ifm.contentWindow.document.body); window.__UserInfo = { orgId: "", operator: "", }; if (panelCmp.title == null || panelCmp.title == "") { let cTabs = me.$refs["cmp-tabs"]; cTabs.resize(); } }, handleBeforeClose(panel, evt) { let ifm = panel.$refs["iframe"]; try { let flag = ifm.contentWindow.Scp.context.beforeunloadFn(evt, 1); return flag; } catch (e) { !document.all && window.console.log( "iframe : Scp.context.beforeunloadFn();" ); } }, handleActiveTab(panel) { if (!panel) return; top.location.hash="#/tabUrl="+panel.url+"&zhc&tabTitle="+panel.title; if (panel.itemData.type == "home") { this.$refs["protalSysHome"][0].doRender(); } if (panel.itemData.type == "work") { this.$refs["portalUserWork"][0].doRender(); } try { let tab = this.$refs["cmp-tabs"].getItemObj(panel.name); //tab.tabPanelIframeEl.contentDocument.trigger("iframeActiving", [panel.name]); tab.tabPanelIframeEl.contentDocument.dispatchEvent( new CustomEvent('iframeActiving', { detail:[panel.name] } ) ); } catch (e) { console.log("iframeActiving error!"); } }, //面板上面的事件特别处理,现在暂时没用 handleSelected(item) { return; let key = item.id; let ifm = this.$refs["dom-iframe" + key][0]; try { let __orgId = ifm.contentWindow.Scp.User.getId(); let __operator = ifm.contentWindow.Scp.User.getOperator(); window.__UserInfo = { orgId: __orgId, operator: __operator, }; } catch (e) {} }, handleRemoveTab(targetName) { let tabs = this.tabList; let activeName = this.defTabKey; if (activeName === targetName) { tabs.forEach((tab, index) => { if (tab.close && tab.id === targetName) { let nextTab = tabs[index + 1] || tabs[index - 1]; if (nextTab) { activeName = nextTab.id; } } }); } this.defTabKey = activeName; tabs = tabs.filter((tab) => { return tab.close == false || tab.id !== targetName; }); console.log('handleRemoveTab') this.$set(this, "tabList", tabs); if (this.tabList.length == 0) { this.defTabKey = "tabPanel_home"; } }, handleRemoveAllTab() { let tabs = this.tabList; this.tabList = tabs.filter((tab) => { return !tab.close; }); let l = this.tabList.length; this.defTabKey = l ? this.tabList[l - 1].id : ""; }, handleRemoveLeftTab(name, index) { let tabs = this.tabList; let defTabKey = this.defTabKey; this.tabList = tabs.filter((tab, i) => { if (tab.id == defTabKey && i < index) { //当前的选中,是在关闭区内 defTabKey = name; } return tab.close == false || i >= index; }); this.defTabKey = defTabKey; }, handleRemoveRightTab(name, index) { let tabs = this.tabList; let defTabKey = this.defTabKey; this.tabList = tabs.filter((tab, i) => { if (tab.id == defTabKey && i > index) { //当前的选中,是在关闭区内 defTabKey = name; } return tab.close == false || i <= index; }); this.defTabKey = defTabKey; }, handleRemoveOtherTab(name, index) { let tabs = this.tabList; tabs = tabs.filter((tab, i) => { return tab.close == false || i == index; }); this.$set(this, "tabList", tabs); this.defTabKey = name; }, handleFullScreen() { this.$emit("onFullScreen"); // screenfull.toggle() }, creatForm(opt){ let that=this; var _opt={ autoShow:false, cancelAction:false, url:null, target:null, action:null, method:null, params:null, data:null, autoDestroy:false, _id:utils.string.id(8), }; Object.assign(_opt,opt); var _formTpl=`<form style="display:none;" id="${_opt._id}"><input type="submit" value="submit" id="submit_${_opt._id}"/></form>`; var _el=document.createElement("div"); _el.innerHTML=_formTpl; document.getElementsByTagName("body")[0].appendChild(_el); var _form=_el.getElementsByTagName("form")[0]; this.setTarget=(str)=>{ _opt.target = str; _form.setAttribute('target',str); } this.setUrl=(str)=>{ this.formateUrl(str); var url = utils.string.setUrlValue(_opt.url,"_____r",new Date().getTime()); _form.setAttribute('action',url); } this.setMethod=(str)=>{ _opt.method = str||'get'; _form.setAttribute('method',str); } this.setParams=(params)=>{ _opt.params = params; } this.setData=(obj)=>{ _opt.data = obj||{}; if(_opt.method=="get"&&_opt.url!=null){ var parms =_opt.url.split("?")[1], item,i=0,len; if(parms!=null){ parms = parms.split("&"); for(i=0,len=parms.length;i<len;i++){ item = parms[i].split("="); _opt.data[item[0]]=item[1]; } } } _.each(_opt.data,function(value,key){ if(_.isObject(value)){ value = JSON.stringify(value); } var _hiddenInput=document.createElement("input"); _hiddenInput.setAttribute("type","hidden"); _form.appendChild(_hiddenInput); _hiddenInput.setAttribute('name',key); _hiddenInput.setAttribute('value',value); }); } this.removeData=()=>{ _opt.data = null; _form.children().remove(); } this.addData=(data)=>{ _opt.data = _.extend({},_opt.data||{},data||{}); _form.children().remove(); this.setData(_opt.data); } this.delData=(keys)=>{ _.each(keys||[],function(val,i){ if((val in _opt.data)){ delete _opt.data[val]; } }); _form.children().remove(); this.setData(_opt.data); } this.formateUrl=(url)=>{ var params= this.formateParams(_opt.params); if(!url)return; _opt.url = url; if(params){ if(_opt.url.indexOf('?')>0){ _opt.url+='&'+params; }else{ _opt.url+='?'+params; } } } this.formateParams=(obj)=>{ if(obj==null) return null; return $.param(obj||{}); } this.submit=()=>{ if(_opt.cancelAction) return; _opt.cancelAction = false; if(_opt.autoDestroy){ setTimeout(function(){ _form.submit() //_form.find('#submit'+me.id).click();//谷歌下面要用 按钮才有效果 },0); setTimeout(function(){that.destroy();},1000); }else{ _form.submit(); } } this.destroy=()=>{ _el.remove(); } this.setTarget(_opt.target); this.setMethod(_opt.method); this.setUrl(_opt.url); this.setData(_opt.data); return that; }, handleCloseMenuDialog(item){ this.menuOpenList=this.menuOpenList.filter((__item)=>{ if(__item.uid!=item.uid){ return __item; } }); } }, }; </script> <style lang="less" scoped> .miniLoginBox{ ::v-deep .el-dialog__body{ padding-top:0; } } .menuOpenBox{ ::v-deep .v-modal{ top:98px; height:calc(100% - 98px); } .menuOpenDialog{ top:98px; } } </style>
Show line notes below