<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"
>
<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>
</div>
</template>
<script>
import { baseURL, codeProjectName } 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 } from "@main/utils";
// import { type } from "os";
import md5 from "md5";
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
item.actived && (defTabKey = id);
if (item.url && getUrlValue(item.url, "__tabId") == "") {
//关系到用户调用,防止Scp.context.closeCurPage取不到__tabId出错
item.url = setUrlValue(item.url, "__tabId", id);
}
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;
let id = md5(uriStr);
uriStr = 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) {
console.log('跳转进来的功能:',searchObj.portal_func);
//?portal_func=/eaptpl/rjwhzx/rjzcgl/funcdir/zcmcx.func&id=11111
delete searchObj.portal_func;
let uriStr = baseURL + codeProjectName + menusList[i].resUrl;
let id = md5(uriStr);
uriStr = setUrlValue(uriStr, "__tabId", md5(uriStr));
for(let key in searchObj){
uriStr = 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;
}
}
console.log('sys default tabs :', list);
return {
defTabKey: defTabKey || "",
tabList: list,
sysConfig: this.$store.state.app.config,
isFullScreen: false,
};
},
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 (!(url == "" || url == "about:blank")) {
uid = md5(url);
}
let tabs = me.tabList.filter((item, index) => {
return item.id == uid;
});
if (tabs.length) {
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 = setUrlValue(url, "__tabId", uid);
}
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();
},
};
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;
console.log(
"onload replace links href,on iframe ",
Scp.Setting.appRoot,
url
);
if (
!reg.test(url) &&
url.indexOf(Scp.Setting.appRoot) < 0
) {
url = Scp.Setting.appRoot + url;
}
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;
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 &&
tab.tabPanelIframeEl.contentWindow
.$(tab.tabPanelIframeEl.contentDocument)
.trigger("iframeActiving", [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()
},
},
};
</script>
<style scoped>
</style>