init
This commit is contained in:
lijing
@@ -0,0 +1,305 @@
|
||||
<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
|
||||
t="1615518122113"
|
||||
class="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="1276"
|
||||
width="18"
|
||||
height="18"
|
||||
>
|
||||
<path
|
||||
d="M710.54933333 68.11733334a64 64 0 0 1 90.496 0l165.504 165.504a64 64 0 0 1 0 90.496l-165.504 165.504a64 64 0 0 1-90.496 0l-165.504-165.504a64 64 0 0 1 0-90.496l165.504-165.504zM165.33333333 69.33333334a96 96 0 0 0-96 96v224a96 96 0 0 0 96 96h224a96 96 0 0 0 96-96V165.33333334a96 96 0 0 0-96-96H165.33333333zM165.33333333 549.33333334a96 96 0 0 0-96 96v224a96 96 0 0 0 96 96h224a96 96 0 0 0 96-96v-224a96 96 0 0 0-96-96H165.33333333zM645.33333333 549.33333334a96 96 0 0 0-96 96v224a96 96 0 0 0 96 96h224a96 96 0 0 0 96-96v-224a96 96 0 0 0-96-96h-224z"
|
||||
p-id="1277"
|
||||
:fill="color"
|
||||
></path>
|
||||
</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>
|
||||
<!-- d5defe -->
|
||||
</svg>
|
||||
</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>
|
||||
<template v-if="!isAlone">
|
||||
<div
|
||||
class="path-nav"
|
||||
v-if="navPath instanceof Array && navPath.length > 1"
|
||||
>
|
||||
<Breadcrumb separator=">">
|
||||
<template v-for="(item, index) in navPath">
|
||||
<BreadcrumbItem>{{ 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: "",
|
||||
navPath: null,
|
||||
modArr: [],
|
||||
};
|
||||
},
|
||||
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);
|
||||
this.modList.forEach((element) => {
|
||||
element.childState = true;
|
||||
this.modArr.push(element);
|
||||
});
|
||||
},
|
||||
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.currPath = router.path;
|
||||
//时间有限，仅支持一层.暂时写死，有需求再改
|
||||
_this.modList.forEach((element) => {
|
||||
let childIndex = element.children.findIndex(
|
||||
(x) => x.modId == currentMod
|
||||
);
|
||||
if (currentMod == element.modId || childIndex > -1) {
|
||||
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";
|
||||
},
|
||||
childChange(index) {
|
||||
this.modArr[index].childState = !this.modArr[index].childState;
|
||||
},
|
||||
logout() {
|
||||
let url = window.location.href;
|
||||
url = "/logout?service=" + url;
|
||||
top.location.href = this.ssoHost + url;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user