08335 / hivui-platform-template
hivui平台项目模板
Newer
Older
hivui-platform-template / project / hivuiMain / views / layout / components / Main.vue
caibinghong on 4 Jun 2021 add
<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>