You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
386 lines
9.2 KiB
386 lines
9.2 KiB
<template>
|
|
|
|
<div :class="classObj" class="app-wrapper">
|
|
<!-- 最顶部导航栏-->
|
|
<div class="top-head-bar">
|
|
<div class="top-head-bar__logo">
|
|
<img style="height: 20px" src="../assets/logo_test.png" alt="logo" />
|
|
</div>
|
|
|
|
<ul>
|
|
<li
|
|
v-for="item in $store.state.permission.rootMenu"
|
|
:class="{
|
|
'li-active':
|
|
new RegExp(`^${item.path}`).test($route.path)
|
|
}"
|
|
@click="menuClick(item)"
|
|
>
|
|
{{ item.name }}
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="top-head-bar__user">
|
|
<el-dropdown class="avatar-container" trigger="click">
|
|
<div class="avatar-wrapper">
|
|
<div class="avatar-wrapper__name">{{ $store.state.user.name }}</div>
|
|
<i class="el-icon-caret-bottom" />
|
|
</div>
|
|
<el-dropdown-menu slot="dropdown" class="user-dropdown">
|
|
<router-link to="/">
|
|
<el-dropdown-item> 系统首页 </el-dropdown-item>
|
|
</router-link>
|
|
<el-dropdown-item divided @click.native="logout">
|
|
<span style="display: block">退出</span>
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="device === 'mobile' && sidebar.opened"
|
|
class="drawer-bg"
|
|
@click="handleClickOutside"
|
|
/>
|
|
|
|
<template v-if="$route.path === '/worker'">
|
|
<el-scrollbar style="padding-top: 50px; height: 100%">
|
|
<worker></worker>
|
|
</el-scrollbar>
|
|
</template>
|
|
<template v-else-if="/^\/asset/.test($route.path)">
|
|
|
|
<sidebar class="sidebar-container" />
|
|
<div class="main-container">
|
|
<iframe style="width: 100%;height: 100%;" ref="bookIframe" :src="iframeUrl"
|
|
>你的浏览器不支持该iframe</iframe
|
|
>
|
|
</div>
|
|
<!-- <div class="main-container">-->
|
|
<!-- <div :class="{ 'fixed-header': fixedHeader }" v-if="false">-->
|
|
<!-- <navbar />-->
|
|
<!-- </div>-->
|
|
<!-- <el-scrollbar style="height: 100%">-->
|
|
<!-- <app-main />-->
|
|
<!-- </el-scrollbar>-->
|
|
<!-- </div>-->
|
|
</template>
|
|
<!-- <template v-else-if="$route.path === '/gdzc'">-->
|
|
<!-- <div-->
|
|
<!-- style="width: 100%; height: 100%; padding-top: 50px; overflow-x: hidden"-->
|
|
<!-- >-->
|
|
<!-- <iframe ref="gdzcIframe" :src="gdzcUrl"-->
|
|
<!-- >你的浏览器不支持该iframe</iframe-->
|
|
<!-- >-->
|
|
<!-- </div>-->
|
|
<!-- </template>-->
|
|
<template v-else-if="$route.path === '/old'">
|
|
<div
|
|
style="width: 100%; height: 100%; padding-top: 50px; overflow-x: hidden"
|
|
>
|
|
<iframe ref="oldIframe" :src="oldUrl">你的浏览器不支持该iframe</iframe>
|
|
</div>
|
|
</template>
|
|
<!-- <template v-else-if="$route.path === '/goods'">-->
|
|
<!-- <div-->
|
|
<!-- style="width: 100%; height: 100%; padding-top: 50px; overflow-x: hidden"-->
|
|
<!-- >-->
|
|
<!-- <iframe ref="goodsIframe" :src="goodsUrl">你的浏览器不支持该iframe</iframe>-->
|
|
<!-- </div>-->
|
|
<!-- </template>-->
|
|
<template v-else>
|
|
<sidebar class="sidebar-container" />
|
|
<div class="main-container">
|
|
<div :class="{ 'fixed-header': fixedHeader }" v-if="false">
|
|
<navbar />
|
|
</div>
|
|
<el-scrollbar style="height: 100%">
|
|
<app-main />
|
|
</el-scrollbar>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { ossLogin } from "@/api/system/ossLogin";
|
|
import { Navbar, Sidebar, AppMain } from "./components";
|
|
import ResizeMixin from "./mixin/ResizeHandler";
|
|
import worker from "./components/worker/index.vue";
|
|
import axios from "axios";
|
|
export default {
|
|
name: "Layout",
|
|
components: {
|
|
Navbar,
|
|
Sidebar,
|
|
AppMain,
|
|
worker,
|
|
},
|
|
mixins: [ResizeMixin],
|
|
data() {
|
|
return {
|
|
active: 0,
|
|
bookUrl: process.env.VUE_APP_OUT_Book,
|
|
gdzcUrl: `${process.env.VUE_APP_OUT_GDZC}/member/oss_login?id=${this.$store.state.user.userId}&username=${this.$store.state.user.username}`,
|
|
oldUrl: `${process.env.VUE_APP_OUT_OLD}/login/oss_login?id=${this.$store.state.user.userId}&username=${this.$store.state.user.username}`,
|
|
goodsUrl: `${process.env.VUE_APP_OUT_GOODS}/admin/oss-login?id=${this.$store.state.user.userId}&username=${this.$store.state.user.username}`,
|
|
};
|
|
},
|
|
computed: {
|
|
sidebar() {
|
|
return this.$store.state.app.sidebar;
|
|
},
|
|
device() {
|
|
return this.$store.state.app.device;
|
|
},
|
|
fixedHeader() {
|
|
return this.$store.state.settings.fixedHeader;
|
|
},
|
|
classObj() {
|
|
return {
|
|
hideSidebar: !this.sidebar.opened,
|
|
openSidebar: this.sidebar.opened,
|
|
withoutAnimation: this.sidebar.withoutAnimation,
|
|
mobile: this.device === "mobile",
|
|
};
|
|
},
|
|
iframeUrl() {
|
|
let urlMap = new Map([
|
|
['/bookmanage', this.bookUrl],
|
|
['/gdzc', this.gdzcUrl],
|
|
['/goods', this.goodsUrl]
|
|
])
|
|
return urlMap.get(this.$route.path.substring(this.$route.path.lastIndexOf('/')))
|
|
}
|
|
},
|
|
methods: {
|
|
async logout() {
|
|
await this.$store.dispatch('app/clearLayout')
|
|
await this.$store.dispatch("user/logout");
|
|
this.$router.push(`/login?redirect=${this.$route.fullPath}`);
|
|
},
|
|
handleClickOutside() {
|
|
this.$store.dispatch("app/closeSideBar", {
|
|
withoutAnimation: false,
|
|
});
|
|
},
|
|
|
|
menuClick(item) {
|
|
this.$router.push(item.path);
|
|
},
|
|
},
|
|
mounted() {},
|
|
watch: {
|
|
"$route.path": {
|
|
handler: function (url) {
|
|
if(/^\/asset/.test(url)) {
|
|
if(this.$store.state.app.sidebar.opened) {
|
|
this.$store.commit('app/TOGGLE_SIDEBAR')
|
|
}
|
|
}
|
|
if (/\/bookmanage/.test(url)) {
|
|
this.$nextTick(() => {
|
|
this.$refs['bookIframe'].onload = () => {
|
|
this.$refs["bookIframe"].contentWindow.postMessage(
|
|
{
|
|
key: "login",
|
|
data: {
|
|
id: this.$store.state.user.userId,
|
|
username: this.$store.state.user.username,
|
|
},
|
|
},
|
|
"*"
|
|
);
|
|
}
|
|
})
|
|
return;
|
|
}
|
|
|
|
},
|
|
immediate: true,
|
|
},
|
|
},
|
|
beforeRouteEnter(to,from,next){
|
|
document.getElementsByTagName('iframe').forEach(dom => {
|
|
dom.onload = null;
|
|
})
|
|
next()
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "~@/styles/mixin.scss";
|
|
@import "~@/styles/variables.scss";
|
|
|
|
.app-wrapper {
|
|
@include clearfix;
|
|
position: relative;
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
&.mobile.openSidebar {
|
|
position: fixed;
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
.top-head-bar {
|
|
background: #338de3ff;
|
|
height: 50px;
|
|
filter: drop-shadow(0 1px 1px #49a0f3);
|
|
display: grid;
|
|
grid-template-columns: auto 0.5fr 6fr 0.2fr 1fr;
|
|
grid-template-rows: 50px;
|
|
grid-template-areas: "logo . menu . user";
|
|
|
|
z-index: 2000;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
|
|
&__logo {
|
|
height: 50px;
|
|
grid-area: logo;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
padding: 0 20px;
|
|
}
|
|
@media screen and (max-width: 1000px) {
|
|
&__logo {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&__user {
|
|
grid-area: user;
|
|
}
|
|
|
|
ul {
|
|
grid-area: menu;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-self: flex-end;
|
|
align-items: flex-end;
|
|
|
|
li {
|
|
color: #fff;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
list-style: none;
|
|
transition: all 300ms ease-out;
|
|
border-top-right-radius: 6px;
|
|
border-top-left-radius: 6px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
cursor: pointer;
|
|
|
|
padding: 0 20px;
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: "";
|
|
background: #338de3ff;
|
|
height: 3px;
|
|
width: 0;
|
|
border-radius: 1px;
|
|
transition: all 300ms ease-out;
|
|
|
|
position: absolute;
|
|
left: 6px;
|
|
bottom: 2px;
|
|
}
|
|
& + li {
|
|
margin-left: 20px;
|
|
}
|
|
&:hover {
|
|
background: #fff;
|
|
color: rgb(100, 100, 100);
|
|
|
|
&::after {
|
|
width: calc(100% - 12px);
|
|
}
|
|
}
|
|
}
|
|
.li-active {
|
|
background: #fff;
|
|
color: rgb(100, 100, 100);
|
|
|
|
&::after {
|
|
width: calc(100% - 12px);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.drawer-bg {
|
|
background: #000;
|
|
opacity: 0.3;
|
|
width: 100%;
|
|
top: 0;
|
|
height: 100%;
|
|
position: absolute;
|
|
z-index: 999;
|
|
}
|
|
|
|
.fixed-header {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 9;
|
|
width: calc(100% - #{$sideBarWidth});
|
|
transition: width 0.28s;
|
|
}
|
|
|
|
.hideSidebar .fixed-header {
|
|
width: calc(100% - 54px);
|
|
}
|
|
|
|
.mobile .fixed-header {
|
|
width: 100%;
|
|
}
|
|
|
|
.avatar-container {
|
|
height: 100%;
|
|
margin-right: 30px;
|
|
|
|
.avatar-wrapper {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
.user-avatar {
|
|
cursor: pointer;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 10px;
|
|
}
|
|
&__name {
|
|
color: #fff;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
|
|
padding: 0 6px;
|
|
}
|
|
.el-icon-caret-bottom {
|
|
cursor: pointer;
|
|
color: #fff;
|
|
position: absolute;
|
|
right: -20px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
iframe {
|
|
width: calc(100% + 12px);
|
|
border: none;
|
|
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
}
|
|
</style>
|