| | |
| | | > |
| | | </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 |
| | | min-width="200" |
| | | /> |
| | | <el-table-column |
| | | label="开票金额(元)" |
| | | label="合同金额(元)" |
| | | prop="invoiceTotal" |
| | | show-overflow-tooltip |
| | | :formatter="formattedNumber" |
| | | min-width="200" |
| | | /> |
| | | <el-table-column |
| | | label="回款金额(元)" |
| | | prop="receiptPaymentAmount" |
| | | show-overflow-tooltip |
| | | :formatter="formattedNumber" |
| | | min-width="200" |
| | | /> |
| | | <el-table-column |
| | | label="应收金额(元)" |
| | | prop="unReceiptPaymentAmount" |
| | | show-overflow-tooltip |
| | | 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="happenTime" |
| | | prop="receiptPaymentDate" |
| | | show-overflow-tooltip |
| | | min-width="110" |
| | | /> |
| | | <el-table-column |
| | | label="开票金额(元)" |
| | | prop="invoiceAmount" |
| | | label="销售合同号" |
| | | prop="salesContractNo" |
| | | show-overflow-tooltip |
| | | min-width="200" |
| | | /> |
| | | <el-table-column |
| | | label="合同金额(元)" |
| | | prop="invoiceTotal" |
| | | show-overflow-tooltip |
| | | :formatter="formattedNumber" |
| | | min-width="200" |
| | | /> |
| | | <el-table-column |
| | | label="回款金额(元)" |
| | | prop="receiptAmount" |
| | | prop="receiptPaymentAmount" |
| | | show-overflow-tooltip |
| | | :formatter="formattedNumber" |
| | | min-width="200" |
| | | /> |
| | | <el-table-column |
| | | label="应收金额(元)" |
| | | prop="unReceiptAmount" |
| | | prop="unReceiptPaymentAmount" |
| | | show-overflow-tooltip |
| | | min-width="200" |
| | | > |
| | | <template #default="{ row, column }"> |
| | | <el-text type="danger"> |
| | | {{ formattedNumber(row, column, row.unReceiptAmount) }} |
| | | {{ formattedNumber(row, column, row.unReceiptPaymentAmount) }} |
| | | </el-text> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <pagination |
| | | v-show="recordTotal > 0" |
| | | :total="recordTotal" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :page="recordPage.current" |
| | | :limit="recordPage.size" |
| | | @pagination="recordPaginationChange" |
| | | /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { ref } from "vue"; |
| | | import {onMounted, ref} from "vue"; |
| | | import { invoiceLedgerSalesAccount } from "../../../api/salesManagement/invoiceLedger.js"; |
| | | import { customerInteractions } from "../../../api/salesManagement/receiptPayment.js"; |
| | | import Pagination from "../../../components/PIMTable/Pagination.vue"; |
| | |
| | | getList(); |
| | | }; |
| | | const paginationChange = (obj) => { |
| | | console.log("paginationChange", current, limit); |
| | | page.current = obj.page; |
| | | page.size = obj.limit; |
| | | getList(); |
| | |
| | | }); |
| | | }; |
| | | 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"], |
| | | { |
| | | ticketsNum: { noDecimal: true }, // 不保留小数 |
| | | futureTickets: { noDecimal: true }, // 不保留小数 |
| | | const toNum = (v) => { |
| | | const n = Number(v); |
| | | return Number.isFinite(n) ? n : 0; |
| | | }; |
| | | const toTime = (v) => { |
| | | const t = new Date(v).getTime(); |
| | | return Number.isFinite(t) ? t : -Infinity; |
| | | }; |
| | | const toId = (v) => { |
| | | const n = Number(v); |
| | | return Number.isFinite(n) ? n : -Infinity; |
| | | }; |
| | | |
| | | // 以右侧当前展示数据为准 |
| | | 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; |
| | | } |
| | | // const sb = tableData.findIndex((item) => item.id == customerId.value); |
| | | // console.log(sb); |
| | | 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 |
| | | ); |
| | | |
| | | const latestRowByContract = new Map(); |
| | | for (const row of rows) { |
| | | const contractNo = row?.salesContractNo; |
| | | if (!contractNo) continue; |
| | | const existed = latestRowByContract.get(contractNo); |
| | | const currentTime = toTime(row?.receiptPaymentDate); |
| | | const existedTime = toTime(existed?.receiptPaymentDate); |
| | | const shouldReplace = |
| | | !existed || |
| | | currentTime > existedTime || |
| | | (currentTime === existedTime && toId(row?.id) > toId(existed?.id)); |
| | | if (shouldReplace) { |
| | | latestRowByContract.set(contractNo, row); |
| | | } |
| | | } |
| | | const unReceiptTotal = Array.from(latestRowByContract.values()).reduce( |
| | | (sum, row) => sum + toNum(row?.unReceiptPaymentAmount), |
| | | 0 |
| | | ); |
| | | |
| | | 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) => { |
| | |
| | | receiptRecord.value = originReceiptRecord.value.slice(start, end); |
| | | }; |
| | | |
| | | getList(); |
| | | onMounted(() => { |
| | | getList(); |
| | | }); |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | .ledger-content { |
| | | display: flex; |
| | | gap: 12px; |
| | | } |
| | | |
| | | .table_list { |
| | | width: 50%; |
| | | flex: 1; |
| | | min-width: 0; |
| | | } |
| | | </style> |