265 lines
11 KiB
Vue
265 lines
11 KiB
Vue
<template>
|
||
<div class="layout-wrap">
|
||
<header class="header-container fix">
|
||
<div class="fl align-middle icon-box">
|
||
<div title="常用应用" :class="['icon-btn', isPanel ? 'active' : '']" @click="showPanel">
|
||
<i class="iconfont icon-apps"></i>
|
||
</div>
|
||
</div>
|
||
<div class="delimiter fl align-middle"></div>
|
||
<h4 class="fl align-middle">{{ appName }}</h4>
|
||
<div class="school-bg"></div>
|
||
<div class="header-aside fr">
|
||
<img :src="userInfo.avatar" class="fl align-middle" @click="linkUserInfo" />
|
||
<a class="name fl align-middle text-ellipsis" href="javascript:void(0);" @click="linkUserInfo">
|
||
{{ userInfo.name }}
|
||
</a>
|
||
<div class="delimiter fl align-middle"></div>
|
||
<a href=" " @click="logout" class="logout fl align-middle" title="退出登陆">
|
||
<i class="iconfont icon-logout"></i>
|
||
</a>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="left-menu" v-if="!isAlone">
|
||
<div class="menu-top-box"></div>
|
||
<ul>
|
||
<template v-for="(item, index) in modArr">
|
||
<template v-if="item.children && item.children.length > 0">
|
||
<li>
|
||
<a href="javascript:;" @click="childChange(index)">
|
||
<i :class="item.childState ? 'arrow-down' : 'arrow-up'"></i>
|
||
<div v-if="item.icon" :class="['icon-box fl', item.icon]"></div>
|
||
<div v-else class="icon-box fl">
|
||
<svg
|
||
t="1615860353141"
|
||
class="icon"
|
||
viewBox="0 0 1024 1024"
|
||
version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
p-id="6624"
|
||
width="14"
|
||
height="14"
|
||
>
|
||
<path
|
||
d="M0 102.4h307.2v307.2H0zM0 614.4h307.2v307.2H0zM409.6 102.4h614.4v102.4H409.6zM409.6 307.2h614.4v102.4H409.6zM409.6 614.4h614.4v102.4H409.6zM409.6 819.2h614.4v102.4H409.6z"
|
||
p-id="6625"
|
||
fill="#656667"
|
||
></path>
|
||
</svg>
|
||
</div>
|
||
{{ item.name }}
|
||
</a>
|
||
</li>
|
||
<transition name="fade_child_ul">
|
||
<div class="child-item-wrap" v-show="item.childState">
|
||
<li
|
||
:class="citem.page == currPath ? 'active child-item' : 'child-item'"
|
||
v-for="citem in item.children"
|
||
>
|
||
<a href="javascript:;" @click="linkMenu(citem.page)">
|
||
{{ citem.name }}
|
||
</a>
|
||
</li>
|
||
</div>
|
||
</transition>
|
||
</template>
|
||
<li v-else :class="item.page == currPath ? 'active' : ''" :key="'menu_li_' + index">
|
||
<a href="javascript:;" @click="linkMenu(item.page)">
|
||
<div v-if="item.icon" :class="['icon-box fl', item.icon]"></div>
|
||
<div v-else class="icon-box fl">
|
||
<svg
|
||
t="1615860353141"
|
||
class="icon"
|
||
viewBox="0 0 1024 1024"
|
||
version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
p-id="6624"
|
||
width="14"
|
||
height="14"
|
||
>
|
||
<path
|
||
d="M0 102.4h307.2v307.2H0zM0 614.4h307.2v307.2H0zM409.6 102.4h614.4v102.4H409.6zM409.6 307.2h614.4v102.4H409.6zM409.6 614.4h614.4v102.4H409.6zM409.6 819.2h614.4v102.4H409.6z"
|
||
p-id="6625"
|
||
fill="#656667"
|
||
></path>
|
||
</svg>
|
||
</div>
|
||
{{ item.name }}
|
||
</a>
|
||
</li>
|
||
</template>
|
||
</ul>
|
||
<div class="clear-box"></div>
|
||
</div>
|
||
<div class="path-nav" v-if="!isAlone">
|
||
<Breadcrumb separator="＞">
|
||
<a :href="baseHost + '/BschHome/front/index.html'">
|
||
<BreadcrumbItem>
|
||
<i class="iconfont icon-category"></i>
|
||
首页
|
||
</BreadcrumbItem>
|
||
</a>
|
||
<BreadcrumbItem to="/">{{ appName }}</BreadcrumbItem>
|
||
<BreadcrumbItem v-if="typeof navPath == 'string'">{{ navPath }}</BreadcrumbItem>
|
||
<template v-else v-for="(item, index) in navPath">
|
||
<BreadcrumbItem v-if="index != navPath.length - 1" :to="item.page">{{ item.name }}</BreadcrumbItem>
|
||
<BreadcrumbItem v-else>{{ item.name }}</BreadcrumbItem>
|
||
</template>
|
||
</Breadcrumb>
|
||
</div>
|
||
|
||
<transition name="fade_apps">
|
||
<div class="app-panel" ref="appPanel" v-if="isPanel">
|
||
<div class="tips-box"></div>
|
||
<ul class="fix">
|
||
<li class="fl" v-for="item in appList">
|
||
<a :href="item.url" target="_bank" rel="noopener noreferrer">
|
||
<div class="icon-box">
|
||
<img :src="item.icon" alt="" />
|
||
</div>
|
||
<p class="text-ellipsis">{{ item.name }}</p>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
<div class="link-panel">
|
||
<a :href="baseHost + '/BschHome/front/index.html#/apps'" target="_bank" rel="noopener noreferrer">
|
||
全部应用
|
||
<i>→</i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</transition>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
inject: ["reload"],
|
||
props: {
|
||
layoutData: {
|
||
appName: String,
|
||
appList: Array,
|
||
modList: Array,
|
||
userInfo: Object,
|
||
ssoHost: String,
|
||
baseHost: String,
|
||
isAlone: Boolean //是否只有一个选项卡
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
color: "#fff",
|
||
isPanel: false,
|
||
themeColor: [],
|
||
currPath: "",
|
||
navPath: null,
|
||
modArr: [],
|
||
menuArr: []
|
||
};
|
||
},
|
||
created() {
|
||
const _this = this;
|
||
for (const key in _this.layoutData) _this[key] = _this.layoutData[key];
|
||
this.menuArr = this.flaten(this.modList);
|
||
_this.routeChange(_this.$route); //初次加载时手动触发route的change
|
||
this.$watch("$route", _this.routeChange);
|
||
this.modList.forEach(element => {
|
||
element.childState = true; //此处修改结点状态，默认打开
|
||
this.modArr.push(element);
|
||
});
|
||
|
||
this.$bus.$on("setNavPath", arr => (_this.navPath = arr));
|
||
this.$bus.$on("setMenuPath", modId => {
|
||
let find = this.menuArr.find(x => x.modId == modId);
|
||
!!find && (this.currPath = find.page);
|
||
});
|
||
},
|
||
mounted() {},
|
||
methods: {
|
||
showPanel() {
|
||
const _this = this;
|
||
if (_this.appList.length == 0) {
|
||
_this.$Message.info("暂无常用应用！");
|
||
return;
|
||
}
|
||
_this.isPanel = false;
|
||
setTimeout(() => {
|
||
_this.isPanel = true;
|
||
setTimeout(showPanel, 0);
|
||
}, 0);
|
||
var showPanel = () => {
|
||
_this.$refs["appPanel"].onclick = e => e.stopPropagation();
|
||
document.onclick = () => (_this.isPanel = false);
|
||
};
|
||
},
|
||
routeChange(router) {
|
||
const _this = this;
|
||
let { modId, title, parentId: routerPId } = router.meta,
|
||
navArr = [];
|
||
window.document.title = title || "弘育云平台";
|
||
var find = this.menuArr.find(x => x.modId == modId);
|
||
if (!find) {
|
||
let parentFind = this.menuArr.find(x => x.modId == routerPId);
|
||
if (!parentFind) {
|
||
// this.$router.push("/");
|
||
// throw "路由错误！";
|
||
let newmenuArr = this.menuArr.filter(x => x.pid>0);
|
||
if(newmenuArr.length>0){
|
||
if(newmenuArr.findIndex(x => x.page == this.$route.path)==-1){
|
||
this.$router.push(newmenuArr[0].page);
|
||
}
|
||
}else{
|
||
if(this.menuArr.findIndex(x => x.page == this.$route.path)==-1){
|
||
this.$router.push(this.menuArr[0].page);
|
||
}
|
||
}
|
||
parentFind=this.menuArr[0];
|
||
}
|
||
find = parentFind;
|
||
setTimeout(() => {
|
||
this.navPath.push({ name: title });
|
||
}, 0);
|
||
}
|
||
let { name, page, pid } = find;
|
||
this.currPath = page;
|
||
let pfind = this.menuArr.find(x => x.id == pid);
|
||
if (!!pfind) {
|
||
navArr.push({ name: pfind.name });
|
||
}
|
||
navArr.push({ name, page });
|
||
this.navPath = navArr;
|
||
},
|
||
linkMenu(page) {
|
||
const path = this.$route.path;
|
||
if (page === path) this.reload();
|
||
else this.$router.push(page);
|
||
},
|
||
linkUserInfo() {
|
||
top.location.href = this.baseHost + "/v/userinfo";
|
||
},
|
||
childChange(index) {
|
||
this.modArr[index].childState = !this.modArr[index].childState;
|
||
},
|
||
|
||
logout() {
|
||
// http://sso.yunhaixingtong.com/cas/logout
|
||
let url = window.location.href;
|
||
url = "/logout?service=" + url;
|
||
top.location.href = this.ssoHost + url;
|
||
},
|
||
flaten(tree, pid = 0) {
|
||
var arr = [];
|
||
tree.forEach(element => {
|
||
let { id, name, page, modId } = element;
|
||
arr.push({ id, name, page, modId, pid });
|
||
if (element.children) {
|
||
arr.push(...this.flaten(element.children, id));
|
||
}
|
||
});
|
||
return arr;
|
||
}
|
||
}
|
||
};
|
||
</script>
|