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" @onApply="onApply" @onSelect="onSelectShowBill"> </SiteWaitOpenBillPanel>
          </el-tab-pane>
          <el-tab-pane label="开票申请记录"  name="billList" >
            <InvoiceRecordApplyListPanel  key="billList"  @onSelect="onSelectApply"> </InvoiceRecordApplyListPanel>
          </el-tab-pane>
          <el-tab-pane label="发票申请"  name="applyPanel" v-if="showApply" closable>
            <EmisSettleInvoiceRecordForm :billList="selectBillList"   @on-changed="handleFormChanged" @on-cancel="cancelForm"></EmisSettleInvoiceRecordForm>
          </el-tab-pane>
          <el-tab-pane label="账单详情"  name="billDetail" v-if="showBillDetail" closable>
            <SiteConfirmSubBillListPanel :settleBillNo="curSettleBillNo"></SiteConfirmSubBillListPanel>
          </el-tab-pane>
          <el-tab-pane label="开票详情"  name="applyDetail" v-if="showApplyDetail" closable>
            <InvoiceDetailPanel :id="currApplyId"></InvoiceDetailPanel>
          </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';
import EmisSettleInvoiceRecordForm from '@/views/emis/emisSettleInvoiceRecord/emisSettleInvoiceRecordForm';
import SiteConfirmSubBillListPanel from '@/views/emis/emisSettleBill/panel/SiteConfirmSubBillListPanel.vue';

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

      showApply:false,
      selectBillList:null,

      curSettleBillNo:null,
      showBillDetail:false,

      currApplyId:null,
      showApplyDetail:false
    };
  },
  created() {
  },
  methods: {
    handleTabsClick(){

    },

    onSelectShowBill(item) {
      this.curSettleBillNo=item.settleBillNo;
      this.showBillDetail=true;
      this.activeTab="billDetail";
    },
    onSelectApply(item) {
      this.currApplyId=item.id;
      this.showApplyDetail=true;
      this.activeTab="applyDetail";

      // 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;
      // }
   },

   onApply(billList){
      this.showApply=true;
      this.selectBillList=billList;
      this.activeTab="applyPanel";
   },
   handleFormChanged(){
    this.showApply=false;
    this.selectBillList=null;
    this.activeTab="waitOpenBillList";
   },
   cancelForm(){
    this.showApply=false;
    this.selectBillList=null;
    this.activeTab="waitOpenBillList";
   },
   removeTab(targetName) {
      if(targetName=='applyPanel'){
        this.showApply=false;
        this.selectBillList=null;
        this.activeTab="waitOpenBillList";
      }
      else if(targetName=='billDetail'){
        this.curSettleBillNo=null;
        this.showBillDetail=false;
        this.activeTab="waitOpenBillList";
      }
      else if(targetName=='applyDetail'){
        this.currApplyId=null;
        this.showApplyDetail=false;
        this.activeTab="waitOpenBillList";
      }

    },

  }
};
</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>