emis-frontend/src/views/emis/emisSettleBill/CenterInvoiceRecordDeal.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" >
            <CenterInvoiceRecordDealListPanel  ref="billList" @onSelect="onSelectApply"> </CenterInvoiceRecordDealListPanel>
          </el-tab-pane>
          <el-tab-pane label="已开票" name="hasOpenBillList" >
            <CenterInvoiceHasOpenPanel ref="hasOpenBillList" :invoiceStatus="2" @onSelect="onSelectApply"> </CenterInvoiceHasOpenPanel>
          </el-tab-pane>
          <!-- <el-tab-pane label="开票申请记录" name="invoiceApplyList" >
            <ChargeBillMoneyPanel @onSelect="onSelectBill"> </ChargeBillMoneyPanel>
          </el-tab-pane> -->
          <el-tab-pane v-for="(item, index) in billTabs" :key="index"  :name="item.applySeqNo" :label="'开票:'+item.applySeqNo"  closable >
            <InvoiceDetailPanel :id="item.id"></InvoiceDetailPanel>
          </el-tab-pane>
        </el-tabs>
      </div>
  </div>
</template>

<script>
import CenterInvoiceRecordDealListPanel from '@/views/emis/emisSettleInvoiceRecord/panel/CenterInvoiceRecordDealListPanel.vue';
import CenterInvoiceHasOpenPanel from '@/views/emis/emisSettleInvoiceRecord/panel/CenterInvoiceHasOpenPanel.vue';

import InvoiceDetailPanel from '@/views/emis/emisSettleInvoiceRecord/panel/InvoiceDetailPanel.vue';


export default {
  name: "CenterInvoiceRecordDeal",
  components: {
    CenterInvoiceRecordDealListPanel,
    CenterInvoiceHasOpenPanel,
    InvoiceDetailPanel
 },
  dicts: [
  ],
  data() {
    return {
      activeTab:'billList',
      billTabs:[],
    };
  },
  created() {
  },
  methods: {
    handleTabsClick(tab, event) {
        // console.log(tab, event);
        if (tab.name == 'billList') {
          this.$nextTick(() => {
              this.$refs.billList.doLayout()
          })
        }
        else if (tab.name == 'hasOpenBillList') {
          this.$nextTick(() => {
              this.$refs.hasOpenBillList.doLayout()
          })
        }
        else if (tab.name == 'dtlList') {
        }
    },
    onSelectApply(item) {
      let old=this.billTabs.find(mItem=>mItem.applySeqNo==item.applySeqNo);
      if(old){
        this.activeTab=item.applySeqNo;
      }else{
        this.billTabs.push(item);
        this.activeTab=item.applySeqNo;
      }
   },
   removeTab(targetName) {

        var self=this;
        let tabs = self.billTabs;
        self.billTabs = tabs.filter(tab => tab.applySeqNo !== targetName);
        if(self.billTabs.length>0){
          this.activeTab=self.billTabs[self.billTabs.length-1].applySeqNo;
        }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>