| | |
| | | <div style="display: flex"> |
| | | <div class="table_list"> |
| | | <el-table :data="tableData" border v-loading="tableLoading" |
| | | @selection-change="handleSelectionChange" |
| | | :row-key="row => row.id" |
| | | show-summary |
| | | :summary-method="summarizeMainTable" |
| | | @row-click = "rowClickMethod" |
| | | height="calc(100vh - 18.5em)"> |
| | | <el-table-column align="center" type="selection" width="55" /> |
| | | <el-table-column align="center" label="序号" type="index" width="60" /> |
| | | <el-table-column label="客户名称" prop="customerName" show-overflow-tooltip/> |
| | | <el-table-column label="开票金额" prop="invoiceAmount" show-overflow-tooltip/> |
| | |
| | | show-summary |
| | | :summary-method="summarizeMainTable" |
| | | height="calc(100vh - 18.5em)"> |
| | | <el-table-column align="center" type="selection" width="55" /> |
| | | <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="invoiceAmount" show-overflow-tooltip/> |
| | | </el-table> |
| | | <pagination v-show="recordTotal > 0" :total="recordTotal" layout="total, sizes, prev, pager, next, jumper" :page="recordPage.current" |
| | | :limit="recordPage.size" @pagination="paginationChange" /> |
| | | :limit="recordPage.size" @pagination="recordPaginationChange" /> |
| | | </div> |
| | | </div> |
| | | |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import pagination from '@/components/PIMTable/Pagination.vue' |
| | | import { ref } from 'vue' |
| | | import {Search} from "@element-plus/icons-vue"; |
| | | import { |
| | | invoiceLedgerSalesAccount, |
| | | } from "../../../api/salesManagement/invoiceLedger.js"; |
| | |
| | | |
| | | const tableData = ref([]) |
| | | const receiptRecord = ref([]) |
| | | const selectedRows = ref([]) |
| | | const tableLoading = ref(false) |
| | | const page = reactive({ |
| | | current: 1, |
| | |
| | | invoiceDate:'' |
| | | } |
| | | }) |
| | | const customerId = ref('') |
| | | const { searchForm } = toRefs(data) |
| | | // 查询列表 |
| | | /** 搜索按钮操作 */ |
| | |
| | | tableData.value = res.data.records; |
| | | total.value = res.data.total; |
| | | if(tableData.value.length > 0) { |
| | | receiptPaymentList(recordPage,tableData.value[0].customerId); |
| | | recordPage.current = 1 |
| | | customerId.value = tableData.value[0].customerId |
| | | receiptPaymentList(customerId.value); |
| | | } |
| | | }) |
| | | } |
| | | // 表格选择数据 |
| | | const handleSelectionChange = (selection) => { |
| | | selectedRows.value = selection |
| | | } |
| | | // 主表合计方法 |
| | | const summarizeMainTable = (param) => { |
| | |
| | | return sums; |
| | | }; |
| | | |
| | | const receiptPaymentList = (page,id) => { |
| | | const receiptPaymentList = (id) => { |
| | | const param = { |
| | | customerId:id, |
| | | current: page.current, |
| | |
| | | } |
| | | receiptPaymentListPage(param).then(res => { |
| | | receiptRecord.value = res.data.records; |
| | | receiptRecord.total = res.data.total; |
| | | recordTotal.value = res.data.total; |
| | | }) |
| | | } |
| | | |
| | | // 汇款记录列表分页 |
| | | const recordPaginationChange = (currentPage, pageSize) => { |
| | | recordPage.current = currentPage; |
| | | recordPage.size = pageSize; |
| | | receiptPaymentList(customerId.value); |
| | | } |
| | | |
| | | const rowClickMethod = (row) => { |
| | | customerId.value = row.customerId; |
| | | receiptPaymentList(customerId.value); |
| | | } |
| | | |
| | | |
| | | getList() |
| | | </script> |