emis-frontend/src/views/emis/emisSettleBill/ChargeBillMoneyList.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" >
            <ChargeBillMoneyPanel key="billList"  @onSelect="onSelectBill" @onPayInput="onPayInput"> </ChargeBillMoneyPanel>
          </el-tab-pane>
          <el-tab-pane :label="'收/退款:'+currentSettleBillNo"  name="payRecordInput" v-if="currentSettleBillNo">
            <PayRecordInput :settleBillNo="currentSettleBillNo" settleType="1"  @on-changed="handleFormChanged" @on-cancel="cancelForm"></PayRecordInput>
          </el-tab-pane>
          <el-tab-pane v-for="(item, index) in billTabs" :key="index"  :name="item.settleBillNo" :label="'账单:'+item.settleBillNo"  closable >
            <BillDetailPanelReadOnly :key="'Detail_'+index" :settleBillNo="item.settleBillNo"></BillDetailPanelReadOnly>
          </el-tab-pane>
        </el-tabs>
      </div>

  </div>
</template>

<script>
import ChargeBillMoneyPanel from '@/views/emis/emisSettleBill/panel/ChargeBillMoneyPanel.vue';
import BillDetailPanelReadOnly from '@/views/emis/emisSettleBill/panel/BillDetailPanelReadOnly.vue';
import PayRecordInput from '@/views/emis/emisSettlePayRecord/panel/PayRecordInput.vue';


export default {
  name: "ChargeBillMoneyList",
  components: {
    ChargeBillMoneyPanel,
    BillDetailPanelReadOnly,
    PayRecordInput
 },
  dicts: [
  ],
  data() {
    return {
      activeTab:'billList',
      billTabs:[],
      currentSettleBillNo:null,
    };
  },
  created() {
  },
  methods: {
    handleTabsClick(){

    },
    onPayInput(settleBillNo){
      this.currentSettleBillNo=settleBillNo;
      this.activeTab="payRecordInput";
    },
    handleFormChanged(){
      this.currentSettleBillNo=null;
      this.activeTab="billList";
    },
    cancelForm(){
      this.currentSettleBillNo=null;
      this.activeTab="billList";
    },

    onSelectBill(item) {

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

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