init
This commit is contained in:
lijing
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<div id="app" v-if="isLogin">
|
||||
<layout-old v-if="isLayoutOld" :layoutData="layoutData"></layout-old>
|
||||
<layout v-else :layoutData="layoutData"></layout>
|
||||
<div :class="['base-wrap-main', layoutData.isAlone ? 'alone-page' : '']">
|
||||
<transition v-if="!isNoAuthority" :name="!isBack ? 'fade' : 'back'" :mode="!isBack ? 'out-in' : 'in-out'">
|
||||
<router-view v-if="isRouterAlive"></router-view>
|
||||
</transition>
|
||||
<div v-else class="no-authority-wrap">
|
||||
<h3>暂无权限</h3>
|
||||
<h6>如需查看，请联络管理员为您分配权限</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import layout from "./frame/layout.vue";
|
||||
import layoutOld from "./frame/layout_old.vue";
|
||||
|
||||
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 {
|
||||
components: { layout, layoutOld },
|
||||
name: "app",
|
||||
data() {
|
||||
return {
|
||||
isRouterAlive: true,
|
||||
isBack: false,
|
||||
isLogin: false,
|
||||
isNoAuthority: false,
|
||||
layoutData: {},
|
||||
isLayoutOld: conf.isLayoutOld,
|
||||
};
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
reload: this.reload,
|
||||
};
|
||||
},
|
||||
async created() {
|
||||
try {
|
||||
const baseHost = window.conf.baseHost,
|
||||
ssoHost = window.conf.ssoHost;
|
||||
var version = localStorage.getItem("themeVersion") || new Date().getTime();
|
||||
appendLink(baseHost, "base.layout", version);
|
||||
var info = await this.getUserInfo();
|
||||
var bschResult = await this.getBschHomeJsonp(baseHost, info.id);
|
||||
this.setCurrentRole(bschResult, baseHost);
|
||||
var mod = await this.getUserMod();
|
||||
this.layoutInit(info, mod, bschResult.appList, baseHost, ssoHost);
|
||||
this.isLogin = true;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
this.$Message.error("载入用户信息失败！");
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
var isTrident = navigator.userAgent.indexOf("Trident") > -1; // 是否是IE内核
|
||||
if (isTrident) {
|
||||
$("html").css("overflow", "hidden");
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
reload() {
|
||||
this.isRouterAlive = false;
|
||||
this.$nextTick(() => (this.isRouterAlive = true));
|
||||
},
|
||||
getUserInfo() {
|
||||
const _this = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
_this.$api.get(
|
||||
APIConfig.Base.GetUserInfo,
|
||||
null,
|
||||
resp => {
|
||||
resolve(resp.data);
|
||||
},
|
||||
error => reject(error)
|
||||
);
|
||||
});
|
||||
},
|
||||
getUserMod() {
|
||||
const _this = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
_this.$api.get(
|
||||
APIConfig.Base.GetUserMod,
|
||||
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);
|
||||
console.error("获取身份信息失败！");
|
||||
resolve(null);
|
||||
}
|
||||
});
|
||||
},
|
||||
layoutInit(info, mod, appList, baseHost, ssoHost) {
|
||||
this.layoutData.appName = "应用页规范示例";
|
||||
this.layoutData.baseHost = baseHost;
|
||||
this.layoutData.ssoHost = ssoHost;
|
||||
const routes = this.$router.options.routes;
|
||||
let arr = [];
|
||||
mod.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,
|
||||
});
|
||||
});
|
||||
// arr[0].icon = "iconfont icon-apps"; //icon样式示例，参见static/style/font 目录
|
||||
this.layoutData.modList = arr.sort((a, b) => a.modId - b.modId);
|
||||
this.layoutData.isAlone = arr.length == 1; //当只有一个选项卡时，隐藏menu和nav
|
||||
let { id, name, profilePicture } = info;
|
||||
this.layoutData.userInfo = { id, name, avatar: profilePicture };
|
||||
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,
|
||||
.mop-load-div {
|
||||
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;
|
||||
}
|
||||
#app {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user