马宇豪
2023-12-19 d5f70e01396783b1d2b84b49344b6d2798eb1097
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" v-if="editableTabsValue == item.path">
                          <app-main/>
                      </div>
                  </el-tab-pane>
              </el-tabs>
          </el-main>
        </el-container>
      </el-container>
@@ -21,7 +30,8 @@
    </div>
    <el-footer height="auto">
      <div class="bottom-container">
        <span>Copyright ©2020-{{nowadayYear}} 中国科学院苏州纳米技术与纳米仿生研究所</span>
        <span>Copyright ©2020-{{nowadayYear}} 技术保障</span><br/>
        <span style="line-height:28px;">技术支持电话:0512-62872943 (工作日 8:30~17:30)</span>
      </div>
    </el-footer>
  </el-container>
@@ -45,11 +55,19 @@
    return {
      path: null,
      WarningInfo: null,
      titleName: '新疆维吾尔自治区烟花爆竹流向管理信息实名登记系统'
      titleName: '新疆维吾尔自治区烟花爆竹流向管理信息实名登记系统',
        editableTabsValue: '/enterprise/basic',
        editableTabs: []
    }
  },
  mounted() {
      this.getBreadcrumb()
  },
    watch: {
        $route() {
            this.getBreadcrumb()
        }
    },
  computed: {
    ...mapGetters([
      'userType',
@@ -80,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>
@@ -96,6 +155,9 @@
      top: 0;
    }
  }
  .el-tabs ::v-deep.el-tabs__content{
      padding: 0;
  }
  .drawer-bg {
    background: #000;
    opacity: 0.3;