UserclassFront/src/App.Net.vue

<template>
    <div id="app" v-if="isLogin">
        <layout :layoutData="layoutData" ref="layout"></layout>
        <div :class="['base-wrap-main', layoutData.isAlone ? 'alone-page' : '']">
            <template v-if="!isNoAuthority">
                <transition name="fade" mode="out-in">
                    <router-view v-if="isRouterAlive"></router-view>
                </transition>
            </template>
            <div v-else class="no-authority-wrap">
                <h3>暂无权限</h3>
                <h6>如需查看，请联络管理员为您分配权限</h6>
            </div>
        </div>
    </div>
</template>

<script>
import layout from "@/frame/layout";
const appendLink = (baseHost, name, version) => {
    var headHTML = `<link type="text/css" rel="stylesheet" href="${baseHost}/BschHome/front/css/${name}.css?v=${version}">`;
    $("head:eq(0)").append(headHTML);
};
export default {
    name: "App",
    data() {
        return {
            isRouterAlive: true,
            isFull: false,
            isLogin: false,
            layoutData: {},
            isNoAuthority: false,
        };
    },
    components: { layout },
    provide() {
        return {
            reload: this.reload,
        };
    },
    async created() {
        const _this = this;
        try {
            var data = await this.getLayoutData();
            const baseHost = data.pageUrl.replace("/v/", "");
            var version = localStorage.getItem("themeVersion");
            appendLink(baseHost, "base.layout", version ? version : new Date().getTime());
            var bschResult = await this.getBschHomeJsonp(baseHost, data.id);

            this.setCurrentRole(bschResult, baseHost);
            data = await this.getLayoutData();
            this.layoutInit(data, bschResult.appList, baseHost);
            this.isLogin = true;
        } catch (error) {
            console.error(error);
            this.$Message.error("载入用户信息失败！");
        }
        //console.log(process.env);
    },
    methods: {
        reload() {
            this.isRouterAlive = false;
            this.$nextTick(() => (this.isRouterAlive = true));
        },
        getLayoutData() {
            const _this = this;
            return new Promise((resolve, reject) => {
                _this.$api.get(
                    APIConfig.Base.GetLayout,
                    null,
                    resp => {
                        resolve(resp.data);
                    },
                    error => {
                        reject(error);
                    }
                );
            });
        },
        getBschHomeJsonp(baseHost, userId) {
            var version = localStorage.getItem("themeVersion") || new Date().getTime();
            return new Promise((resolve, reject) => {
                var crossStorage,
                    crossUrl = `${baseHost}/BschHome/front/libs/cross`;
                try {
                    var HEAD = document.getElementsByTagName("head")[0];
                    var node = document.createElement("script");
                    node.src = `${crossUrl}/client.js?v=${version}`;
                    node.onload = function () {
                        crossStorage = new Client(`${crossUrl}/middle.html?v=${version}`, () => {
                            crossStorage.getRoteData({ userId }, resp => {
                                resolve(resp);
                            });
                        });

                        //分页数据默认条数
                        const customPageCount = localStorage.getItem("customPageCount");
                        crossStorage.getItem("customPageCount", resp => {
                            if (resp == null) return false;
                            if (customPageCount == null) localStorage.setItem("customPageCount", resp);
                            else if (resp != customPageCount) {
                                crossStorage.setItem({
                                    key: "customPageCount",
                                    value: customPageCount,
                                });
                            }
                        });
                    };
                    HEAD.appendChild(node);
                } catch (error) {
                    console.error(error);
                    resolve(null);
                }
            });
        },
        layoutInit(data, appList, baseHost) {
            this.layoutData.appName = data.topName;
            this.layoutData.baseHost = baseHost;
            this.layoutData.ssoHost = data.ssoUrl;
            let arr = [];
            const routes = this.$router.options.routes;
            data.pathList.forEach(element => {
                let iconIndex = routes.findIndex(x => typeof x.meta !== "undefined" && typeof x.meta.modId !== "undefined" && typeof x.meta.icon !== "undefined" && x.meta.modId == element.modId);
                let icon = iconIndex > -1 ? "iconfont " + routes[iconIndex].meta.icon : ""; //icon不传则为默认
                arr.push({
                    id: element.id,
                    name: element.name,
                    modId: element.modId,
                    page: element.page,
                    children: element.children || [],
                    icon, //icon不传则为默认
                });
            });
            // arr[0].icon = "iconfont icon-qunzu"; //icon样式示例，参见static/style/font 目录
            //console.log(arr);
            this.layoutData.modList = arr.sort((a, b) => a.modId - b.modId);
            this.layoutData.isAlone = arr.length == 1; //当只有一个选项卡时，隐藏menu和nav
            // let { id, name, profilePicture } = data;
            let { id, username, avatar } = data;
            this.layoutData.userInfo = { id, name: username, avatar };
            this.layoutData.appList = appList || [];
            //无权限
            if (arr.length == 0) {
                this.layoutData.isAlone = true;
                this.isNoAuthority = true;
            }
        },
        setCurrentRole(result, baseHost) {
            if (result) {
                let { childId, roleId, schId } = result.checkRole;
                localStorage.setItem("currentRole", encodeURI(JSON.stringify({ childId, roleId, schId })));
                localStorage.setItem("themeVersion", result.themeVersion);
                appendLink(baseHost, result.themeName, result.themeVersion);
            } else {
                appendLink(baseHost, "default-theme", new Date().getTime());
            }
        },
    },
};
</script>

<style lang="scss">
#loging-box {
    display: none;
}
.fade-enter-active,
.fade-leave-active {
    transition: all 1ms cubic-bezier(0, 0.99, 1, 0.03);
}
/* 进入开始 */
.fade-enter {
    // transform: translateY(10px);
    opacity: 0;
}
/* 出去终点 */
.fade-leave-active {
    // transform: translateY(-10px);
    // opacity: 0;
}

.back-enter-active,
.back-leave-active {
    transition: all 1ms cubic-bezier(0, 0.99, 1, 0.03);
}
/* 进入开始 */
.back-enter {
    display: none;
}
/* 出去终点 */
.back-leave-active {
    display: none;
}
.main-wrap {
    padding: 120px 0 0 200px;
    height: 100%;
}
.main-panel {
    height: 100%;
    overflow-y: auto;
    position: relative;
    box-sizing: border-box;
    padding: 15px;
}
.main-panel.is-page {
    height: calc(100% - 60px);
}

.full {
    padding: 0;
}
</style>