emis-frontend/src/views/emis/emisSettleBill/SiteInvoiceRecordApply.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="waitOpenBillList" >
            <SiteWaitOpenBillPanel key="waitOpenBillList" confirmStatus="1"> </SiteWaitOpenBillPanel>
          </el-tab-pane>
          <el-tab-pane label="开票申请记录"  name="billList" >
            <InvoiceRecordApplyListPanel  key="billList"  @onSelect="onSelectApply"> </InvoiceRecordApplyListPanel>
          </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 InvoiceRecordApplyListPanel from '@/views/emis/emisSettleInvoiceRecord/panel/InvoiceRecordApplyListPanel.vue';
import InvoiceDetailPanel from '@/views/emis/emisSettleInvoiceRecord/panel/InvoiceDetailPanel.vue';
import SiteWaitOpenBillPanel from '@/views/emis/emisSettleBill/panel/SiteWaitOpenBillPanel.vue';


export default {
  name: "SiteInvoiceRecordApply",
  components: {
    InvoiceRecordApplyListPanel,
    InvoiceDetailPanel,
    SiteWaitOpenBillPanel
 },
  dicts: [
  ],
  data() {
    return {
      activeTab:'billList',
      billTabs:[],
    };
  },
  created() {
  },
  methods: {
    handleTabsClick(){

    },
    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 lang="scss" scoped>
.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>