| | |
| | | <div class="app-container"> |
| | | <div class="search_form"> |
| | | <div> |
| | | <span class="search_title">回款台账</span> |
| | | <span class="search_title">客户名称:</span> |
| | | <el-input |
| | | v-model="searchForm.searchText" |
| | | style="width: 240px" |
| | | placeholder="输入客户名称搜索" |
| | | @change="handleQuery" |
| | | clearable |
| | | :prefix-icon="Search" |
| | | prefix-icon="Search" |
| | | /> |
| | | <el-button type="primary" @click="handleQuery" style="margin-left: 10px">搜索</el-button> |
| | | </div> |
| | |
| | | height="calc(100vh - 18.5em)"> |
| | | <el-table-column align="center" label="序号" type="index" width="60" /> |
| | | <el-table-column label="客户名称" prop="customerName" show-overflow-tooltip/> |
| | | <el-table-column label="开票金额" prop="invoiceTotal" show-overflow-tooltip/> |
| | | <el-table-column label="回款金额" prop="receiptPaymentAmount" show-overflow-tooltip/> |
| | | <el-table-column label="未回款金额" prop="unReceiptPaymentAmount" show-overflow-tooltip/> |
| | | <el-table-column label="开票金额(元)" prop="invoiceTotal" show-overflow-tooltip :formatter="formattedNumber"/> |
| | | <el-table-column label="回款金额(元)" prop="receiptPaymentAmount" show-overflow-tooltip :formatter="formattedNumber"/> |
| | | <el-table-column label="未回款金额(元)" prop="unReceiptPaymentAmount" show-overflow-tooltip :formatter="formattedNumber"/> |
| | | </el-table> |
| | | <pagination v-show="total > 0" :total="total" layout="total, sizes, prev, pager, next, jumper" :page="page.current" |
| | | :limit="page.size" @pagination="paginationChange" /> |
| | |
| | | <el-table :data="receiptRecord" border |
| | | :row-key="row => row.id" |
| | | show-summary |
| | | :summary-method="summarizeMainTable" |
| | | :summary-method="summarizeMainTable1" |
| | | height="calc(100vh - 18.5em)"> |
| | | <el-table-column align="center" label="序号" type="index" width="60" /> |
| | | <el-table-column label="发生日期" prop="receiptPaymentDate" show-overflow-tooltip/> |
| | | <el-table-column label="回款金额" prop="receiptPaymentAmount" show-overflow-tooltip/> |
| | | <el-table-column label="待收金额" prop="noReceiptAmount" show-overflow-tooltip/> |
| | | <el-table-column label="应收金额" prop="invoiceTotal" show-overflow-tooltip/> |
| | | <el-table-column label="发生日期" prop="happenTime" show-overflow-tooltip/> |
| | | <el-table-column label="开票金额(元)" prop="invoiceAmount" show-overflow-tooltip :formatter="formattedNumber"/> |
| | | <el-table-column label="回款金额(元)" prop="receiptAmount" show-overflow-tooltip :formatter="formattedNumber"/> |
| | | <el-table-column label="应收金额(元)" prop="unReceiptAmount" show-overflow-tooltip :formatter="formattedNumber"/> |
| | | </el-table> |
| | | <pagination v-show="recordTotal > 0" :total="recordTotal" layout="total, sizes, prev, pager, next, jumper" :page="recordPage.current" |
| | | :limit="recordPage.size" @pagination="recordPaginationChange" /> |
| | |
| | | invoiceLedgerSalesAccount, |
| | | } from "../../../api/salesManagement/invoiceLedger.js"; |
| | | import { |
| | | receiptPaymentListPage |
| | | customerInteractions |
| | | } from "../../../api/salesManagement/receiptPayment.js"; |
| | | import Pagination from "../../../components/PIMTable/Pagination.vue"; |
| | | |
| | | const { proxy } = getCurrentInstance() |
| | | const tableData = ref([]) |
| | | const receiptRecord = ref([]) |
| | | const tableLoading = ref(false) |
| | | const page = reactive({ |
| | | current: 1, |
| | | size: 10, |
| | | size: 100, |
| | | }) |
| | | const recordPage = reactive({ |
| | | current: 1, |
| | | size: 10, |
| | | size: 100, |
| | | }) |
| | | const total = ref(0) |
| | | const recordTotal = ref(0) |
| | |
| | | }) |
| | | const customerId = ref('') |
| | | const { searchForm } = toRefs(data) |
| | | const originReceiptRecord = ref([]) |
| | | // 查询列表 |
| | | /** 搜索按钮操作 */ |
| | | const handleQuery = () => { |
| | |
| | | } |
| | | }) |
| | | } |
| | | const formattedNumber = (row, column, cellValue) => { |
| | | return parseFloat(cellValue).toFixed(2); |
| | | }; |
| | | // 主表合计方法 |
| | | const summarizeMainTable = (param) => { |
| | | const { columns, data } = param; |
| | | const sums = []; |
| | | columns.forEach((column, index) => { |
| | | if (index === 0) { |
| | | sums[index] = '合计'; |
| | | return; |
| | | } |
| | | const prop = column.property; |
| | | if (['invoiceAmount','receiptPaymentAmount','unReceiptPaymentAmount'].includes(prop)) { |
| | | const values = data.map(item => Number(item[prop])); |
| | | if (!values.every(value => isNaN(value))) { |
| | | sums[index] = values.reduce((acc, val) => (!isNaN(val) ? acc + val : acc), 0); |
| | | } else { |
| | | sums[index] = ''; |
| | | } |
| | | } else { |
| | | sums[index] = ''; |
| | | } |
| | | }) |
| | | return sums; |
| | | return proxy.summarizeTable(param, ['invoiceTotal', 'receiptPaymentAmount', 'unReceiptPaymentAmount'], { |
| | | ticketsNum: { noDecimal: true }, // 不保留小数 |
| | | futureTickets: { noDecimal: true }, // 不保留小数 |
| | | }); |
| | | }; |
| | | // 子表合计方法 |
| | | const summarizeMainTable1 = (param) => { |
| | | var summarizeTable = proxy.summarizeTable(param, ['invoiceAmount', 'receiptAmount'], { |
| | | ticketsNum: { noDecimal: true }, // 不保留小数 |
| | | futureTickets: { noDecimal: true }, // 不保留小数 |
| | | }); |
| | | console.log('summarizeTable',summarizeTable) |
| | | // 取最后一行数据 |
| | | if(receiptRecord.value?.length > 0) { |
| | | summarizeTable[summarizeTable.length - 1] = receiptRecord.value[receiptRecord.value.length - 1].unReceiptAmount.toFixed(2); |
| | | }else { |
| | | summarizeTable[summarizeTable.length - 1] = 0.00 |
| | | } |
| | | |
| | | return summarizeTable |
| | | }; |
| | | |
| | | const receiptPaymentList = (id) => { |
| | | const param = { |
| | | customerId:id, |
| | | current: recordPage.current, |
| | | size: recordPage.size, |
| | | customerId:id |
| | | } |
| | | console.log('param', param) |
| | | receiptPaymentListPage(param).then(res => { |
| | | receiptRecord.value = res.data.records; |
| | | recordTotal.value = res.data.total; |
| | | |
| | | customerInteractions(param).then(res => { |
| | | originReceiptRecord.value = res.data; |
| | | handlePagination({ page: 1, limit: recordPage.size }); |
| | | recordTotal.value = res.data.length; |
| | | }) |
| | | } |
| | | |
| | | // 汇款记录列表分页 |
| | | const recordPaginationChange = (obj) => { |
| | | console.log('recordPaginationChange', obj ); |
| | | recordPage.current = obj.page; |
| | | recordPage.size = obj.limit; |
| | | console.log('recordPage',recordPage) |
| | | receiptPaymentList(customerId.value); |
| | | const recordPaginationChange = (pagination) => { |
| | | handlePagination(pagination); |
| | | } |
| | | |
| | | const rowClickMethod = (row) => { |
| | |
| | | receiptPaymentList(customerId.value); |
| | | } |
| | | |
| | | const handlePagination = ({ page, limit }) => { |
| | | recordPage.current = page; |
| | | recordPage.size = limit; |
| | | |
| | | const start = (page - 1) * limit; |
| | | const end = start + limit; |
| | | |
| | | receiptRecord.value = originReceiptRecord.value.slice(start, end); |
| | | } |
| | | |
| | | |
| | | getList() |
| | | </script> |