<template>
|
<el-container >
|
<div v-title :data-title="titleName" class="main"/>
|
<div :class="classObj" class="app-wrapper">
|
<el-header style="text-align: left; padding: 0;height:80px">
|
<navbar />
|
</el-header>
|
<el-container>
|
<el-container>
|
<el-aside width="260px">
|
<sidebar class="sidebar-container"/>
|
</el-aside>
|
<el-main style="background-color: #DFE5EB;padding: 10px 30px 30px">
|
<el-tabs v-model="editableTabsValue" type="border-card" closable @tab-remove="removeTab" @tab-click="changePage">
|
<el-tab-pane
|
v-for="(item, index) in editableTabs"
|
:key= item.name
|
:label="item.meta.title"
|
:name="item.path"
|
>
|
<div class="main-container">
|
<app-main />
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
</el-main>
|
</el-container>
|
</el-container>
|
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
|
</div>
|
<el-footer height="auto">
|
<div class="bottom-container">
|
<span>Copyright ©2020-{{nowadayYear}} 中国科学院苏州纳米技术与纳米仿生研究所</span><br/>
|
<span style="line-height:28px;">技术支持电话：0512-62872943 （工作日 8:30~17:30）</span>
|
</div>
|
</el-footer>
|
</el-container>
|
</template>
|
|
<script>
|
import { Navbar, Sidebar, AppMain, TagsView } from './components'
|
import ResizeMixin from './mixin/ResizeHandler'
|
import { mapGetters } from 'vuex'
|
|
export default {
|
name: 'Layout',
|
components: {
|
Navbar,
|
Sidebar,
|
AppMain,
|
TagsView
|
},
|
mixins: [ResizeMixin],
|
data() {
|
return {
|
path: null,
|
WarningInfo: null,
|
titleName: '新疆维吾尔自治区烟花爆竹流向管理信息实名登记系统',
|
editableTabsValue: '/enterprise/basic',
|
editableTabs: []
|
}
|
},
|
mounted() {
|
this.getBreadcrumb()
|
},
|
watch: {
|
$route() {
|
this.getBreadcrumb()
|
}
|
},
|
computed: {
|
...mapGetters([
|
'userType',
|
'instituteId',
|
'instituteName',
|
'fullname'
|
]),
|
sidebar() {
|
return this.$store.state.app.sidebar
|
},
|
device() {
|
return this.$store.state.app.device
|
},
|
nowadayYear(){
|
let date=new Date();
|
return date.getFullYear()
|
},
|
classObj() {
|
return {
|
// hideSidebar: this.sidebar.opened,
|
openSidebar: this.sidebar.opened,
|
withoutAnimation: this.sidebar.withoutAnimation
|
// mobile: this.device === 'mobile'
|
}
|
}
|
},
|
methods: {
|
handleClickOutside() {
|
this.$store.dispatch('closeSideBar', { withoutAnimation: false })
|
},
|
removeTab(targetName) {
|
let tabs = this.editableTabs;
|
if(tabs.length>1){
|
let activeName = this.editableTabsValue;
|
if (activeName === targetName) {
|
tabs.forEach((tab, index) => {
|
if (tab.path === targetName) {
|
let nextTab = tabs[index + 1] || tabs[index - 1];
|
if (nextTab) {
|
activeName = nextTab.path;
|
this.$router.push(activeName)
|
}
|
}
|
});
|
}
|
this.editableTabsValue = activeName;
|
this.editableTabs = tabs.filter(tab => tab.path !== targetName);
|
}else{
|
this.$message({
|
type:'warning',
|
message: '最后一页无法关闭'
|
})
|
}
|
},
|
getBreadcrumb() {
|
let matched = this.$route.matched.filter(item => item.name)
|
|
const first = matched[0]
|
if (first && first.name.trim().toLocaleLowerCase() !== 'Dashboard'.toLocaleLowerCase()) {
|
matched = [{ path: '/dashboard', meta: { title: '首页' }}].concat(matched)
|
}
|
|
this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
|
if(!this.editableTabs.some(i=>i.path === this.levelList[2].path)){
|
this.editableTabs.push(this.levelList[2])
|
}
|
this.editableTabsValue = this.levelList[2].path
|
},
|
changePage(tab,event){
|
this.$router.push(this.editableTabsValue)
|
}
|
}
|
}
|
</script>
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
@import "~@/styles/mixin.scss";
|
.app-wrapper {
|
@include clearfix;
|
position: relative;
|
height: 100%;
|
width: 100%;
|
&.mobile.openSidebar{
|
position: fixed;
|
top: 0;
|
}
|
}
|
.el-tabs ::v-deep.el-tabs__content{
|
padding: 0;
|
}
|
.drawer-bg {
|
background: #000;
|
opacity: 0.3;
|
width: 100%;
|
top: 0;
|
height: 100%;
|
position: absolute;
|
z-index: 999;
|
}
|
.bottom-container{
|
padding:25px;
|
text-align: center;
|
font-size:12px;
|
margin-left: 15%;
|
}
|
</style>
|
