<template>
|
<a-layout id="components-layout-demo-top-side" class="basiclayoutbox">
|
<global-header :menus="menus" />
|
<a-layout-content :style="{ padding: 0, height: mainHeight + 'px' }">
|
<a-layout style="padding: 0; background: #fff; height: 100%">
|
<side-menu
|
style="background: #fff; height: 100%; overflow: auto"
|
mode="inline"
|
:menus="menus"
|
:theme="'light'"
|
:collapsed="collapsed"
|
:collapsible="true"
|
></side-menu>
|
<a-layout-content
|
:style="{ padding: '0', minHeight: '280px', height: '100%' }"
|
>
|
<div style="display: flex; just-content: flex-start">
|
<div
|
style="
|
width: 40px;
|
text-align: center;
|
height: 40px;
|
line-height: 40px;
|
font-size: 25px;
|
"
|
>
|
<a-icon
|
class="trigger"
|
:type="collapsed ? 'menu-fold' : 'menu-unfold'"
|
@click="toggle"
|
/>
|
</div>
|
<multi-tab
|
style="flex: 1; margin-left: 0"
|
class="tabbox"
|
></multi-tab>
|
</div>
|
|
<div
|
:style="{
|
padding: '10px',
|
height: mainHeight - 42 + 'px',
|
overflow: 'auto',
|
position: 'relative',
|
backgroundColor:'#F1F2F6',
|
}"
|
>
|
<transition name="page-transition">
|
<route-view />
|
</transition>
|
</div>
|
</a-layout-content>
|
</a-layout>
|
</a-layout-content>
|
|
<global-footer />
|
</a-layout>
|
</template>
|
|
<script>
|
import { triggerWindowResizeEvent } from "@/utils/util";
|
import { mapState, mapGetters, mapActions } from "vuex";
|
import { mixin, mixinDevice } from "@/utils/mixin";
|
import RouteView from "./RouteView";
|
|
import SideMenu from "@/components/Menu/SideMenu";
|
import GlobalHeader from "@/components/GlobalHeader";
|
import MultiTab from "@/components/MultiTab";
|
import GlobalFooter from "@/components/GlobalFooter";
|
|
const listToTree = (list, tree, parentId) => {
|
list.forEach((item) => {
|
// 判断是否为父级菜单
|
// eslint-disable-next-line eqeqeq
|
if (item.pid == parentId) {
|
const child = {
|
...item,
|
key: item.key || item.name,
|
children: [],
|
};
|
// 迭代 list， 找到当前菜单相符合的所有子菜单
|
listToTree(list, child.children, item.id);
|
// 删掉不存在 children 值的属性
|
if (child.children.length <= 0) {
|
delete child.children;
|
}
|
// 加入到树中
|
tree.push(child);
|
}
|
});
|
};
|
|
export default {
|
name: "BasicLayout",
|
mixins: [mixin, mixinDevice],
|
components: {
|
RouteView,
|
SideMenu,
|
GlobalHeader,
|
GlobalFooter,
|
MultiTab,
|
},
|
data() {
|
return {
|
collapsed: false,
|
menus: [],
|
mainHeight: 280,
|
collapsed: true,
|
};
|
},
|
computed: {
|
...mapGetters(["userInfo"]),
|
...mapState({
|
moduleCode: (state) => state.user.moduleCode,
|
}),
|
contentPaddingLeft() {
|
if (!this.fixSidebar || this.isMobile()) {
|
return "0";
|
}
|
if (this.sidebarOpened) {
|
return "230px";
|
}
|
return "80px";
|
},
|
},
|
watch: {
|
sidebarOpened(val) {
|
this.collapsed = !val;
|
},
|
/**模块变化 */
|
moduleCode(val) {
|
this.setMenus();
|
},
|
},
|
created() {
|
this.setMenus();
|
this.collapsed = !this.sidebarOpened;
|
},
|
mounted() {
|
const userAgent = navigator.userAgent;
|
if (userAgent.indexOf("Edge") > -1) {
|
this.$nextTick(() => {
|
this.collapsed = !this.collapsed;
|
setTimeout(() => {
|
this.collapsed = !this.collapsed;
|
}, 16);
|
});
|
}
|
//basiclayoutbox
|
this.$nextTick(() => {
|
let headerheight = 0;
|
let footerheight = 0;
|
if (document.querySelector(".headerbox")) {
|
headerheight = document.querySelector(".headerbox").clientHeight;
|
}
|
if (document.querySelector(".footerbox")) {
|
footerheight = document.querySelector(".footerbox").clientHeight;
|
}
|
this.mainHeight =
|
document.body.clientHeight - headerheight - footerheight;
|
});
|
|
window.addEventListener("resize", () => {
|
this.$nextTick(() => {
|
let headerheight = 0;
|
let footerheight = 0;
|
if (document.querySelector(".headerbox")) {
|
headerheight = document.querySelector(".headerbox").clientHeight;
|
}
|
if (document.querySelector(".footerbox")) {
|
footerheight = document.querySelector(".footerbox").clientHeight;
|
}
|
this.mainHeight =
|
document.body.clientHeight - headerheight - footerheight;
|
});
|
});
|
},
|
methods: {
|
...mapActions(["setSidebar"]),
|
/**设置左侧菜单导航 */
|
setMenus() {
|
let data = this.userInfo.menus.filter((x) => {
|
x.hidden = true;
|
if (x.application == this.moduleCode) {
|
x.hidden = false;
|
}
|
return x.application == this.moduleCode;
|
});
|
let treedata = [];
|
listToTree(data, treedata, 0);
|
|
this.menus = treedata || [];
|
},
|
|
toggle() {
|
this.collapsed = !this.collapsed;
|
this.setSidebar(!this.collapsed);
|
triggerWindowResizeEvent();
|
},
|
paddingCalc() {
|
let left = "";
|
if (this.sidebarOpened) {
|
left = this.isDesktop() ? "230px" : "80px";
|
} else {
|
left = (this.isMobile() && "0") || (this.fixSidebar && "80px") || "0";
|
}
|
return left;
|
},
|
menuSelect() {},
|
drawerClose() {
|
this.collapsed = false;
|
},
|
},
|
};
|
</script>
|
|
|
<style scoped>
|
.basiclayoutbox {
|
height: 100%;
|
}
|
</style>
|
<style>
|
</style>
|
