<template>
|
<el-dialog v-model="visible" :title="type === 'receivable' ? '应收账单结算记录' : '应付账单结算记录'" width="1200px"
|
destroy-on-close>
|
<el-descriptions title="账单信息" :column="3" border class="mb-5">
|
<el-descriptions-item label="系统编号">{{ billInfo.systemNo }}</el-descriptions-item>
|
<el-descriptions-item label="账单名称">{{ billInfo.billName }}</el-descriptions-item>
|
|
<el-descriptions-item v-if="type == 'receivable'" label="客户名称">{{ billInfo.customerName
|
}}</el-descriptions-item>
|
<el-descriptions-item v-if="type == 'payable'" label="供应商名称">{{ billInfo.supplierName
|
}}</el-descriptions-item>
|
|
<el-descriptions-item label="单据数量">{{ billInfo.documentCount }}</el-descriptions-item>
|
<el-descriptions-item label="应结算金额">
|
<span class="text-bold">{{ billInfo.totalAmount }}</span>
|
</el-descriptions-item>
|
<el-descriptions-item label="币制">{{ billInfo.currency }}</el-descriptions-item>
|
|
<el-descriptions-item :label="type === 'receivable' ? '已收金额' : '已付金额'">
|
{{ billInfo.receivedAmount }}
|
</el-descriptions-item>
|
<el-descriptions-item :label="type === 'receivable' ? '待收金额' : '待付金额'">
|
<span class="text-danger">{{ billInfo.pendingAmount }}</span>
|
</el-descriptions-item>
|
<el-descriptions-item label="减免金额">{{ billInfo.discountAmount }}</el-descriptions-item>
|
|
<el-descriptions-item label="周期类型">{{ billInfo.periodType }}</el-descriptions-item>
|
<el-descriptions-item label="业务期间">
|
{{ billInfo.businessStartDate }} {{ billInfo.businessEndDate ? '-' + billInfo.businessEndDate : '' }}
|
</el-descriptions-item>
|
<el-descriptions-item label="账单周期">
|
{{ billInfo.billingStartDate }} {{ billInfo.billingEndDate ? '-' + billInfo.billingEndDate : '' }}
|
</el-descriptions-item>
|
|
<el-descriptions-item label="账单生成日期">{{ billInfo.billGenerateDate }}</el-descriptions-item>
|
<el-descriptions-item label="账单发送日期">{{ billInfo.billSendDate }}</el-descriptions-item>
|
<el-descriptions-item label="账单到期日期">{{ billInfo.billDueDate }}</el-descriptions-item>
|
</el-descriptions>
|
|
<h3 class="section-title">结算明细</h3>
|
<el-table v-loading="loading" :data="dataList" border stripe style="width: 100%">
|
<el-table-column prop="settlementMethod" label="结算方式" align="center" width="100">
|
<template #default="{ row }">
|
{{ dictFormat(sys_clearing_form, row.settlementMethod) }}
|
</template>
|
</el-table-column>
|
|
|
<el-table-column v-if="type == 'receivable'" prop="customerBank" label="客户开户行" align="center"
|
min-width="150" />
|
<!-- <el-table-column v-if="type == 'payable'" prop="supplierName" label="供应商名称" align="center"
|
min-width="150" /> -->
|
|
<el-table-column v-if="type == 'receivable'" prop="customerBankAccount" label="客户银行账号"
|
align="center" min-width="180" />
|
<el-table-column v-if="type == 'receivable'" prop="receivingBank" label="收款账户开户行" align="center" min-width="150" />
|
<el-table-column v-if="type == 'receivable'" prop="receivingBankAccount" label="收款银行账户" align="center" min-width="180" />
|
<el-table-column v-if="type == 'receivable'" prop="receiptDate" label="收款日期" align="center"
|
min-width="150" />
|
<el-table-column v-if="type == 'receivable'" prop="receiptAmount" label="收款金额" align="center"
|
min-width="150" />
|
|
<el-table-column v-if="type == 'payable'" prop="paymentBank" label="付款账户开户行" align="center" min-width="150" />
|
<el-table-column v-if="type == 'payable'" prop="paymentBankAccount" label="付款账户银行账号" align="center" min-width="150" />
|
<el-table-column v-if="type == 'payable'" prop="paymentDate" label="付款日期" align="center" min-width="150" />
|
<el-table-column v-if="type == 'payable'" prop="paymentAmount" label="付款金额" align="center" min-width="150" />
|
<el-table-column prop="remainingPendingAmount" :label="type === 'receivable' ? '收款后待收金额' : '付款后待付金额'"
|
align="center" width="140" />
|
|
<el-table-column prop="createTime" label="创建时间" align="center" width="160" />
|
<el-table-column prop="createBy" label="创建人" align="center" width="100" />
|
</el-table>
|
<pagination v-show="pageF.total > 0" :total="pageF.total" v-model:page="queryParams.pageNum"
|
v-model:limit="queryParams.pageSize" @pagination="getDataList" />
|
|
|
<template #footer style="margin-top: 15px;">
|
<el-button @click="visible = false">关闭</el-button>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, reactive } from 'vue'
|
import { getReceivableBillManagement } from "@/api/cwgl/receivableBillManagement";
|
import { listReceivableBillSettlementDetail } from "@/api/cwgl/receivableBillSettlementDetail";
|
import useCurrentInstance from "@/utils/useCurrentInstance";
|
import { getPayableBillManagement, } from "@/api/cwgl/payableBillManagement";
|
import { listPayableBillSettlementDetail } from "@/api/cwgl/payableBillSettlementDetail";
|
|
const { proxy } = useCurrentInstance();
|
const { sys_clearing_form
|
} = proxy.useDict('sys_clearing_form');
|
const dictFormat = (dict: any, value: any) => {
|
return proxy.selectDictLabel(dict, value);
|
}
|
const props = defineProps<{
|
type: 'receivable' | 'payable'
|
}>()
|
|
const visible = ref(false)
|
const loading = ref(false)
|
const billInfo = ref<any>({})
|
const dataList = ref([])
|
|
// 分页与查询参数
|
const pageF = reactive({
|
total: 0
|
})
|
|
const queryParams = reactive({
|
pageNum: 1,
|
pageSize: 10,
|
billId: undefined
|
})
|
|
/** 查询结算历史列表 */
|
const getDataList = async () => {
|
loading.value = true
|
try {
|
console.log(props.type);
|
if (props.type === 'receivable') {
|
getReceivableBillManagement(queryParams.billId).then(response => {
|
if (response.code === 200) {
|
billInfo.value = response.data
|
}
|
})
|
listReceivableBillSettlementDetail(queryParams).then(res => {
|
if (res.code == 200) {
|
dataList.value = res.rows
|
pageF.total = res.total
|
}
|
})
|
} else {
|
getPayableBillManagement(queryParams.billId).then(response => {
|
if (response.code === 200) {
|
billInfo.value = response.data
|
}
|
})
|
listPayableBillSettlementDetail(queryParams).then(res => {
|
if (res.code == 200) {
|
dataList.value = res.rows
|
pageF.total = res.total
|
}
|
})
|
}
|
|
} finally {
|
loading.value = false
|
}
|
}
|
|
/** 打开弹窗 */
|
const open = (row: any) => {
|
visible.value = true
|
// console.log(row);
|
console.log(props.type);
|
|
// billInfo.value = { ...row }
|
queryParams.billId = row.id
|
queryParams.pageNum = 1
|
getDataList()
|
}
|
|
defineExpose({ open })
|
</script>
|
|
<style scoped>
|
.mb-5 {
|
margin-bottom: 20px;
|
}
|
|
.section-title {
|
font-size: 16px;
|
font-weight: bold;
|
margin: 20px 0 15px 0;
|
padding-left: 10px;
|
border-left: 4px solid #409eff;
|
}
|
|
.text-bold {
|
font-weight: bold;
|
}
|
|
.text-danger {
|
color: #f56c6c;
|
font-weight: bold;
|
}
|
|
.pagination-container {
|
margin-top: 15px;
|
display: flex;
|
justify-content: flex-end;
|
}
|
|
:deep(.el-descriptions__label) {
|
width: 120px;
|
background-color: #f5f7fa !important;
|
}
|
|
/* 兼容你之前代码的单元格样式 */
|
::v-deep .el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell {
|
padding: 8px 11px;
|
}
|
|
::v-deep .el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell {
|
padding: 8px 11px;
|
width: 200px;
|
}
|
</style>
|
