| | |
| | | > |
| | | </div> |
| | | </div> |
| | | <div style="display: flex"> |
| | | <div class="ledger-content"> |
| | | <div class="table_list"> |
| | | <el-table |
| | | :data="tableData" |
| | |
| | | :summary-method="summarizeMainTable" |
| | | @row-click="rowClickMethod" |
| | | height="calc(100vh - 18.5em)" |
| | | style="width: 100%" |
| | | > |
| | | <el-table-column |
| | | align="center" |
| | | label="序号" |
| | | type="index" |
| | | width="60" |
| | | min-width="60" |
| | | /> |
| | | <el-table-column |
| | | label="客户名称" |
| | | prop="customerName" |
| | | show-overflow-tooltip |
| | | width="200" |
| | | min-width="200" |
| | | /> |
| | | <el-table-column |
| | | label="合同金额(元)" |
| | | prop="invoiceTotal" |
| | | show-overflow-tooltip |
| | | :formatter="formattedNumber" |
| | | width="200" |
| | | min-width="200" |
| | | /> |
| | | <el-table-column |
| | | label="回款金额(元)" |
| | | prop="receiptPaymentAmount" |
| | | show-overflow-tooltip |
| | | :formatter="formattedNumber" |
| | | width="200" |
| | | min-width="200" |
| | | /> |
| | | <el-table-column |
| | | label="应收金额(元)" |
| | | prop="unReceiptPaymentAmount" |
| | | show-overflow-tooltip |
| | | width="200" |
| | | min-width="200" |
| | | > |
| | | <template #default="{ row, column }"> |
| | | <el-text type="danger"> |
| | |
| | | show-summary |
| | | :summary-method="summarizeMainTable1" |
| | | height="calc(100vh - 18.5em)" |
| | | style="width: 100%" |
| | | > |
| | | <el-table-column |
| | | align="center" |
| | | label="序号" |
| | | type="index" |
| | | width="60" |
| | | min-width="60" |
| | | /> |
| | | <el-table-column |
| | | label="发生日期" |
| | | prop="receiptPaymentDate" |
| | | show-overflow-tooltip |
| | | width="110" |
| | | min-width="110" |
| | | /> |
| | | <el-table-column |
| | | label="销售合同号" |
| | | prop="salesContractNo" |
| | | show-overflow-tooltip |
| | | width="200" |
| | | min-width="200" |
| | | /> |
| | | <el-table-column |
| | | label="合同金额(元)" |
| | | prop="invoiceTotal" |
| | | show-overflow-tooltip |
| | | :formatter="formattedNumber" |
| | | width="200" |
| | | min-width="200" |
| | | /> |
| | | <el-table-column |
| | | label="回款金额(元)" |
| | | prop="receiptPaymentAmount" |
| | | show-overflow-tooltip |
| | | :formatter="formattedNumber" |
| | | width="200" |
| | | min-width="200" |
| | | /> |
| | | <el-table-column |
| | | label="应收金额(元)" |
| | | prop="unReceiptPaymentAmount" |
| | | show-overflow-tooltip |
| | | width="200" |
| | | min-width="200" |
| | | > |
| | | <template #default="{ row, column }"> |
| | | <el-text type="danger"> |
| | |
| | | }); |
| | | }; |
| | | const formattedNumber = (row, column, cellValue) => { |
| | | return parseFloat(cellValue).toFixed(2); |
| | | const num = Number(cellValue); |
| | | return Number.isFinite(num) ? num.toFixed(2) : "0.00"; |
| | | }; |
| | | // 主表合计方法 |
| | | const summarizeMainTable = (param) => { |
| | |
| | | }; |
| | | // 子表合计方法 |
| | | const summarizeMainTable1 = (param) => { |
| | | var summarizeTable = proxy.summarizeTable( |
| | | param, |
| | | ["invoiceAmount", "receiptAmount", "unReceiptAmount"], |
| | | { |
| | | ticketsNum: { noDecimal: true }, // 不保留小数 |
| | | futureTickets: { noDecimal: true }, // 不保留小数 |
| | | const toNum = (v) => { |
| | | const n = Number(v); |
| | | return Number.isFinite(n) ? n : 0; |
| | | }; |
| | | |
| | | // 以右侧当前展示数据为准 |
| | | const rows = receiptRecord.value || []; |
| | | |
| | | // 合同金额按销售合同号去重 |
| | | const invoiceByContract = new Map(); |
| | | for (const row of rows) { |
| | | const contractNo = row?.salesContractNo; |
| | | if (!contractNo) continue; |
| | | if (!invoiceByContract.has(contractNo)) { |
| | | invoiceByContract.set(contractNo, toNum(row?.invoiceTotal)); |
| | | } |
| | | ); |
| | | // 取最后一行数据; |
| | | if (receiptRecord.value?.length > 0) { |
| | | const index = tableData.value.findIndex( |
| | | (item) => item.id == customerId.value |
| | | ); |
| | | summarizeTable[summarizeTable.length - 1] = |
| | | tableData.value[index].unReceiptPaymentAmount.toFixed(2); |
| | | } else { |
| | | summarizeTable[summarizeTable.length - 1] = 0.0; |
| | | } |
| | | return summarizeTable; |
| | | const invoiceTotal = Array.from(invoiceByContract.values()).reduce( |
| | | (sum, val) => sum + val, |
| | | 0 |
| | | ); |
| | | |
| | | // 回款金额正常求和 |
| | | const receiptTotal = rows.reduce( |
| | | (sum, row) => sum + toNum(row?.receiptPaymentAmount), |
| | | 0 |
| | | ); |
| | | |
| | | // 应收金额保持主表当前客户口径 |
| | | let unReceiptTotal = 0; |
| | | if (rows.length > 0) { |
| | | const index = tableData.value.findIndex((item) => item.id == customerId.value); |
| | | if (index > -1) { |
| | | unReceiptTotal = toNum(tableData.value[index]?.unReceiptPaymentAmount); |
| | | } |
| | | } |
| | | |
| | | const columns = param?.columns || []; |
| | | return columns.map((column, index) => { |
| | | if (index === 0) return "合计"; |
| | | const prop = column?.property ?? column?.prop; |
| | | if (prop === "invoiceTotal") return invoiceTotal.toFixed(2); |
| | | if (prop === "receiptPaymentAmount") return receiptTotal.toFixed(2); |
| | | if (prop === "unReceiptPaymentAmount") return unReceiptTotal.toFixed(2); |
| | | return ""; |
| | | }); |
| | | }; |
| | | |
| | | const receiptPaymentList = (id) => { |
| | |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | .ledger-content { |
| | | display: flex; |
| | | gap: 12px; |
| | | } |
| | | |
| | | .table_list { |
| | | width: 50%; |
| | | flex: 1; |
| | | min-width: 0; |
| | | } |
| | | </style> |