emis-frontend/src/views/emis/emisTmsPack/packageManagement.vue

<template>
  <div class="app-container">
    <div class="tab-container">
        <el-tabs v-model="activeTab" class="center-tabs" @tab-click="handleTabsClick"  @tab-remove="removeTab">
          <el-tab-pane label="待合包" name="billList" >
            <WaitPackList> </WaitPackList>
          </el-tab-pane>
          <el-tab-pane label="合包列表" name="hasPack" >
            <PackList  @onSelect="onSelectBill" ></PackList>
          </el-tab-pane>
          <!-- <el-tab-pane v-for="(item, index) in billTabs" :key="index"  :name="item.settleBillNo" :label="'账单:'+item.settleBillNo"  closable >
            <BillDetailPanel :settleBillNo="item.settleBillNo"></BillDetailPanel>
          </el-tab-pane> -->
        </el-tabs>
    </div>
  </div>
</template>

<script>
import WaitPackList from '@/views/emis/emisTmsPack/WaitPackList.vue';
import PackList from '@/views/emis/emisTmsPack/PackList';
// import BillDetailPanel from '@/views/emis/emisSettleBill/panel/BillDetailPanel.vue';


export default {
  name: "PackageManagement",
  components: {
    WaitPackList,
    PackList
 },
  dicts: [
  ],
  data() {
    return {
      activeTab:'billList',
      billTabs:[],
    };
  },
  created() {
  },
  methods: {
    handleTabsClick(){

    },
    onSelectBill(item) {
      let old=this.billTabs.find(mItem=>mItem.packNo==item.packNo);
      if(old){
        this.activeTab=item.packNo;
      }else{
        this.billTabs.push(item);
        this.activeTab=item.packNo;
      }
   },
   removeTab(targetName) {

        var self=this;
        let tabs = self.billTabs;
        self.billTabs = tabs.filter(tab => tab.packNo !== targetName);
        if(self.billTabs.length>0){
          this.activeTab=self.billTabs[self.billTabs.length-1].packNo;
        }else{
          this.activeTab="billList";
        }

    },

  }
};
</script>

<style>
.el-descriptions-item__label {
  width: 80px;
}

.el-descriptions-item__cell {
    font-weight: 500!important;
    color: black;
}

.tab-container {
  width: 100%;
}

.el-tabs__nav{
    display: flex !important;
    flex-wrap: wrap !important;
}

</style>