| | |
| | | <el-aside width="260px"> |
| | | <sidebar class="sidebar-container"/> |
| | | </el-aside> |
| | | <el-main style="background-color: #DFE5EB;padding: 30px"> |
| | | <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> |
| | |
| | | return { |
| | | path: null, |
| | | WarningInfo: null, |
| | | titleName: '新疆维吾尔自治区烟花爆竹流向管理信息实名登记系统' |
| | | titleName: '新疆维吾尔自治区烟花爆竹流向管理信息实名登记系统', |
| | | editableTabsValue: '/enterprise/basic', |
| | | editableTabs: [] |
| | | } |
| | | }, |
| | | mounted() { |
| | | this.getBreadcrumb() |
| | | }, |
| | | watch: { |
| | | $route() { |
| | | this.getBreadcrumb() |
| | | } |
| | | }, |
| | | computed: { |
| | | ...mapGetters([ |
| | |
| | | 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> |
| | |
| | | top: 0; |
| | | } |
| | | } |
| | | .el-tabs ::v-deep.el-tabs__content{ |
| | | padding: 0; |
| | | } |
| | | .drawer-bg { |
| | | background: #000; |
| | | opacity: 0.3; |