emis-frontend/src/views/emis/emisSettleBill/SiteInvoiceRecordApply.vue
2024-11-24 16:24:14 +08:00

152 lines
4.6 KiB
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>
<BillDetailPanelReadOnly :key="'Detail_'+curSettleBillNo" :settleBillNo="curSettleBillNo"></BillDetailPanelReadOnly>
<!-- <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';
import BillDetailPanelReadOnly from '@/views/emis/emisSettleBill/panel/BillDetailPanelReadOnly.vue';
export default {
name: "SiteInvoiceRecordApply",
components: {
InvoiceRecordApplyListPanel,
InvoiceDetailPanel,
SiteWaitOpenBillPanel,
EmisSettleInvoiceRecordForm,
SiteConfirmSubBillListPanel,
BillDetailPanelReadOnly
},
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>