From 7da332941f57f4729d5ba954ffa1630cee31b04b Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期二, 31 一月 2023 10:42:26 +0800
Subject: [PATCH] 新增tab页面切换
---
src/views/layout/Layout.vue | 71 +++++++++++++++++++++++++++++++++--
1 files changed, 66 insertions(+), 5 deletions(-)
diff --git a/src/views/layout/Layout.vue b/src/views/layout/Layout.vue
index 3f5fb7f..b78e3c1 100644
--- a/src/views/layout/Layout.vue
+++ b/src/views/layout/Layout.vue
@@ -10,10 +10,19 @@
<el-aside width="260px">
<sidebar class="sidebar-container"/>
</el-aside>
- <el-main style="background-color: #DFE5EB;padding: 30px">
- <div class="main-container">
- <app-main />
- </div>
+ <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>
@@ -46,11 +55,19 @@
return {
path: null,
WarningInfo: null,
- titleName: '新疆维吾尔自治区烟花爆竹流向管理信息实名登记系统'
+ titleName: '新疆维吾尔自治区烟花爆竹流向管理信息实名登记系统',
+ editableTabsValue: '/enterprise/basic',
+ editableTabs: []
}
},
mounted() {
+ this.getBreadcrumb()
},
+ watch: {
+ $route() {
+ this.getBreadcrumb()
+ }
+ },
computed: {
...mapGetters([
'userType',
@@ -81,6 +98,47 @@
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>
@@ -97,6 +155,9 @@
top: 0;
}
}
+ .el-tabs ::v-deep.el-tabs__content{
+ padding: 0;
+ }
.drawer-bg {
background: #000;
opacity: 0.3;
--
Gitblit v1.9.2