新增tab页面切换

马宇豪

2023-01-31 7da332941f57f4729d5ba954ffa1630cee31b04b

新增tab页面切换

 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;