parent
cb75ffc2cb
commit
16678d3e03
@ -0,0 +1,317 @@
|
||||
<template>
|
||||
<div>
|
||||
<template v-if="$route.path === '/worker'">
|
||||
<el-scrollbar style="padding-top: 50px; height: 100%">
|
||||
<worker></worker>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
<template v-else-if="$route.path === '/bookmanage'">
|
||||
<div
|
||||
style="width: 100%; height: 100%; padding-top: 50px; overflow-x: hidden"
|
||||
>
|
||||
<iframe ref="bookIframe" :src="bookUrl"
|
||||
>你的浏览器不支持该iframe</iframe
|
||||
>
|
||||
</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>
|
||||
<div style="width: 100%;height: 100%">
|
||||
<transition name="fade-transform" mode="out-in">
|
||||
<router-view :key="$route.path" />
|
||||
</transition>
|
||||
</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: "noLayout",
|
||||
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",
|
||||
};
|
||||
},
|
||||
},
|
||||
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 (url === "/bookmanage") {
|
||||
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";
|
||||
|
||||
.nolayout-container {
|
||||
margin-top: 50px !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
.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);
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue