252 lines
11 KiB
Vue
252 lines
11 KiB
Vue
<template>
|
|
<div class="layout-wrap">
|
|
<header class="header-container fix">
|
|
<div class="fl align-middle icon-box">
|
|
<div :class="['icon-btn', isPanel ? 'active' : '']" @click="showPanel">
|
|
<svg width="22" height="22" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<g clip-path="url(#clip0)">
|
|
<path d="M24 0.972656H0V24.9727H24V0.972656Z" fill="white" fill-opacity="0.01" />
|
|
<path
|
|
d="M9 2.97266H3C2.44772 2.97266 2 3.42037 2 3.97266V9.97266C2 10.5249 2.44772 10.9727 3 10.9727H9C9.55228 10.9727 10 10.5249 10 9.97266V3.97266C10 3.42037 9.55228 2.97266 9 2.97266Z"
|
|
stroke="white"
|
|
stroke-width="1.6"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M9 14.9727H3C2.44772 14.9727 2 15.4204 2 15.9727V21.9727C2 22.5249 2.44772 22.9727 3 22.9727H9C9.55228 22.9727 10 22.5249 10 21.9727V15.9727C10 15.4204 9.55228 14.9727 9 14.9727Z"
|
|
stroke="white"
|
|
stroke-width="1.6"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M21 2.97266H15C14.4477 2.97266 14 3.42037 14 3.97266V9.97266C14 10.5249 14.4477 10.9727 15 10.9727H21C21.5523 10.9727 22 10.5249 22 9.97266V3.97266C22 3.42037 21.5523 2.97266 21 2.97266Z"
|
|
stroke="white"
|
|
stroke-width="1.6"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M14 14.9727H22"
|
|
stroke="white"
|
|
stroke-width="1.6"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M18 18.9727H22"
|
|
stroke="white"
|
|
stroke-width="1.6"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M14 22.9727H22"
|
|
stroke="white"
|
|
stroke-width="1.6"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="clip0">
|
|
<rect width="24" height="24" fill="white" transform="translate(0 0.972656)" />
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
</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="javascript:;" @click="logout" class="logout fl align-middle" title="退出登陆">
|
|
<svg
|
|
t="1615536538850"
|
|
viewBox="0 0 1024 1024"
|
|
version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
p-id="3048"
|
|
width="18"
|
|
height="18"
|
|
>
|
|
<path
|
|
d="M554.666667 426.666667a42.666667 42.666667 0 0 1-85.333334 0V128a42.666667 42.666667 0 0 1 85.333334 0v298.666667z m101.973333-133.376a42.666667 42.666667 0 0 1 41.429333-74.581334 384 384 0 1 1-372.138666 0 42.666667 42.666667 0 0 1 41.386666 74.581334 298.666667 298.666667 0 1 0 289.365334 0z"
|
|
p-id="3049"
|
|
fill="#ffffff"
|
|
></path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="left-menu" v-if="!isAlone">
|
|
<div class="menu-top-box"></div>
|
|
<ul>
|
|
<li
|
|
:class="item.page == currPath ? 'active' : ''"
|
|
v-for="(item, index) in modList"
|
|
: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>
|
|
</ul>
|
|
<div class="clear-box"></div>
|
|
</div>
|
|
<template v-if="!isAlone">
|
|
<div class="path-nav">
|
|
<Breadcrumb separator=">">
|
|
<a :href="baseHost + '/BschHome/front/index.html'">
|
|
<BreadcrumbItem>
|
|
<Icon type="ios-home-outline" size="14"></Icon>
|
|
首页
|
|
</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>
|
|
<!-- <div class="path-nav" v-else>
|
|
{{ navPath }}
|
|
</div> -->
|
|
</template>
|
|
|
|
<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: "/layout",
|
|
navPath: "默认列表",
|
|
};
|
|
},
|
|
created() {
|
|
const _this = this;
|
|
for (const key in _this.layoutData) _this[key] = _this.layoutData[key];
|
|
_this.routeChange(_this.$route); //初次加载时手动触发route的change
|
|
this.$watch("$route", _this.routeChange);
|
|
},
|
|
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;
|
|
window.document.title = router.meta.title || "弘育云平台";
|
|
let currentMod = router.meta.modId;
|
|
//时间有限，仅支持一层.暂时写死，有需求再改
|
|
_this.modList.forEach(element => {
|
|
let childIndex = element.children.findIndex(x => x.modId == currentMod);
|
|
if (currentMod == element.modId || childIndex > -1) {
|
|
_this.currPath = element.page;
|
|
if (childIndex > -1) {
|
|
let navArr = [];
|
|
navArr.push({ name: element.name, page: element.page });
|
|
navArr.push({
|
|
name: element.children[childIndex].name,
|
|
page: element.children[childIndex].page,
|
|
});
|
|
_this.navPath = navArr;
|
|
} else _this.navPath = element.name;
|
|
}
|
|
});
|
|
},
|
|
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";
|
|
},
|
|
logout() {
|
|
let url = window.location.href;
|
|
url = "/logout?service=" + url;
|
|
top.location.href = this.ssoHost + url;
|
|
},
|
|
},
|
|
};
|
|
</script>
|