| | |
| | | type="index" |
| | | width="60" |
| | | /> |
| | | <el-table-column label="供应商名称" prop="supplierName" /> |
| | | <el-table-column |
| | | v-for="(item, index) in tableColumn" |
| | | :key="index" |
| | | :column-key="item.columnKey" |
| | | :filter-method="item.filterHandler" |
| | | :filter-multiple="item.filterMultiple" |
| | | :filtered-value="item.filteredValue" |
| | | :filters="item.filters" |
| | | :fixed="item.fixed" |
| | | :label="item.label" |
| | | :prop="item.prop" |
| | | label="发票金额(元)" |
| | | prop="invoiceAmount" |
| | | show-overflow-tooltip |
| | | :align="item.align" |
| | | :sortable="!!item.sortable" |
| | | :type="item.type" |
| | | :width="item.width" |
| | | :formatter="formattedNumber" |
| | | /> |
| | | <el-table-column |
| | | label="付款金额(元)" |
| | | prop="paymentAmount" |
| | | show-overflow-tooltip |
| | | :formatter="formattedNumber" |
| | | /> |
| | | <el-table-column |
| | | label="应付金额(元)" |
| | | prop="payableAmount" |
| | | show-overflow-tooltip |
| | | > |
| | | <template #default="{ row, column }"> |
| | | <el-text type="danger"> |
| | | {{ formattedNumber(row, column, row.payableAmount) }} |
| | | </el-text> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <pagination |
| | | v-show="total > 0" |
| | | @pagination="paginationSearch" |
| | | :total="total" |
| | | :layout="page.layout" |
| | | :page="page.current" |
| | | :limit="page.size" |
| | | v-show="total > 0" |
| | | @pagination="paginationSearch" |
| | | :total="total" |
| | | :layout="page.layout" |
| | | :page="page.current" |
| | | :limit="page.size" |
| | | /> |
| | | </div> |
| | | </el-col> |
| | |
| | | :tableLoading="tableLoadingSon" |
| | | :isShowSummary="isShowSummarySon" |
| | | :summaryMethod="summarizeMainTable1" |
| | | ></PIMTable> |
| | | > |
| | | <template #payableAmountSlot="{ row }"> |
| | | <el-text type="danger"> |
| | | {{ parseFloat(row.payableAmount).toFixed(2) }} |
| | | </el-text> |
| | | </template> |
| | | </PIMTable> |
| | | <pagination |
| | | v-show="sonTotal > 0" |
| | | :total="sonTotal" |
| | | @pagination="sonPaginationSearch" |
| | | :layout="page.layout" |
| | | :page="sonPage.current" |
| | | :limit="sonPage.size" |
| | | v-show="sonTotal > 0" |
| | | :total="sonTotal" |
| | | @pagination="sonPaginationSearch" |
| | | :layout="page.layout" |
| | | :page="sonPage.current" |
| | | :limit="sonPage.size" |
| | | /> |
| | | </div> |
| | | </el-col> |
| | |
| | | <script setup> |
| | | import { ref, toRefs } from "vue"; |
| | | import { Search } from "@element-plus/icons-vue"; |
| | | import { paymentLedgerList,paymentRecordList } from "@/api/procurementManagement/paymentLedger.js"; |
| | | import { |
| | | paymentLedgerList, |
| | | paymentRecordList, |
| | | } from "@/api/procurementManagement/paymentLedger.js"; |
| | | import Pagination from "../../../components/PIMTable/Pagination.vue"; |
| | | |
| | | const tableColumn = ref([ |
| | |
| | | const sonTotal = ref(0); |
| | | const isShowSummary = ref(true); |
| | | const { searchForm } = toRefs(data); |
| | | const currentSupplierId = ref('') |
| | | const currentSupplierId = ref(""); |
| | | const rowClick = (row) => { |
| | | currentSupplierId.value = row.supplierId; |
| | | getPaymenRecordtList(row.supplierId) |
| | | getPaymenRecordtList(row.supplierId); |
| | | }; |
| | | // 子模块 |
| | | const tableColumnSon = ref([ |
| | |
| | | prop: "invoiceAmount", |
| | | formatData: (params) => { |
| | | return parseFloat(params).toFixed(2); |
| | | } |
| | | }, |
| | | }, |
| | | { |
| | | label: "付款金额(元)", |
| | | prop: "currentPaymentAmount", |
| | | formatData: (params) => { |
| | | return parseFloat(params).toFixed(2); |
| | | } |
| | | }, |
| | | }, |
| | | { |
| | | label: "应付金额(元)", |
| | | prop: "payableAmount", |
| | | formatData: (params) => { |
| | | return parseFloat(params).toFixed(2); |
| | | } |
| | | dataType: "slot", |
| | | slot: "payableAmountSlot", |
| | | }, |
| | | ]); |
| | | const tableDataSon = ref([]); |
| | |
| | | const isShowSummarySon = ref(true); |
| | | const detailPageNum = ref(1); |
| | | const detailPageSize = ref(10); |
| | | const { proxy } = getCurrentInstance() |
| | | const { proxy } = getCurrentInstance(); |
| | | |
| | | // 主表合计方法 |
| | | const summarizeMainTable = (param) => { |
| | | return proxy.summarizeTable(param, ['invoiceAmount', 'paymentAmount', 'payableAmount'], { |
| | | ticketsNum: { noDecimal: true }, // 不保留小数 |
| | | futureTickets: { noDecimal: true }, // 不保留小数 |
| | | }); |
| | | return proxy.summarizeTable( |
| | | param, |
| | | ["invoiceAmount", "paymentAmount", "payableAmount"], |
| | | { |
| | | ticketsNum: { noDecimal: true }, // 不保留小数 |
| | | futureTickets: { noDecimal: true }, // 不保留小数 |
| | | } |
| | | ); |
| | | }; |
| | | // 子表合计方法 |
| | | const summarizeMainTable1 = (param) => { |
| | | let summarizeTable = proxy.summarizeTable(param, ['invoiceAmount', 'currentPaymentAmount'], { |
| | | ticketsNum: { noDecimal: true }, // 不保留小数 |
| | | futureTickets: { noDecimal: true }, // 不保留小数 |
| | | }); |
| | | if(originalTableDataSon.value.length > 0) { |
| | | summarizeTable[summarizeTable.length -1] = originalTableDataSon.value[originalTableDataSon.value.length - 1].payableAmount.toFixed(2) |
| | | }else { |
| | | summarizeTable[summarizeTable.length -1] = 0.00 |
| | | let summarizeTable = proxy.summarizeTable( |
| | | param, |
| | | ["invoiceAmount", "currentPaymentAmount"], |
| | | { |
| | | ticketsNum: { noDecimal: true }, // 不保留小数 |
| | | futureTickets: { noDecimal: true }, // 不保留小数 |
| | | } |
| | | ); |
| | | if (originalTableDataSon.value.length > 0) { |
| | | summarizeTable[summarizeTable.length - 1] = |
| | | originalTableDataSon.value[ |
| | | originalTableDataSon.value.length - 1 |
| | | ].payableAmount.toFixed(2); |
| | | } else { |
| | | summarizeTable[summarizeTable.length - 1] = 0.0; |
| | | } |
| | | return summarizeTable |
| | | return summarizeTable; |
| | | }; |
| | | /** 搜索按钮操作 */ |
| | | const handleQuery = () => { |
| | | page.current = 1; |
| | | getList(); |
| | | }; |
| | | const paginationSearch = ( obj) => { |
| | | const paginationSearch = (obj) => { |
| | | page.current = obj.page; |
| | | page.size = obj.limit; |
| | | getList(); |
| | |
| | | tableLoading.value = false; |
| | | tableData.value = result.records || []; |
| | | total.value = result.total || 0; |
| | | if(tableData.value.length > 0) { |
| | | if (tableData.value.length > 0) { |
| | | getPaymenRecordtList(tableData.value[0].supplierId); |
| | | currentSupplierId.value = tableData.value[0].supplierId |
| | | currentSupplierId.value = tableData.value[0].supplierId; |
| | | } |
| | | |
| | | }); |
| | | }; |
| | | |
| | | const getPaymenRecordtList = (supplierId) => { |
| | | tableLoadingSon.value = true; |
| | | paymentRecordList(supplierId).then(res => { |
| | | tableLoadingSon.value = false; |
| | | tableDataSon.value = res.data |
| | | handlePagination({ page: 1, limit: sonPage.size }); |
| | | sonTotal.value = res.data.length |
| | | }).catch((e) => { |
| | | tableLoadingSon.value = false; |
| | | }) |
| | | } |
| | | paymentRecordList(supplierId) |
| | | .then((res) => { |
| | | tableLoadingSon.value = false; |
| | | tableDataSon.value = res.data; |
| | | handlePagination({ page: 1, limit: sonPage.size }); |
| | | sonTotal.value = res.data.length; |
| | | }) |
| | | .catch((e) => { |
| | | tableLoadingSon.value = false; |
| | | }); |
| | | }; |
| | | const handlePagination = ({ page, limit }) => { |
| | | sonPage.current = page; |
| | | sonPage.size = limit; |
| | |
| | | const end = start + limit; |
| | | |
| | | originalTableDataSon.value = tableDataSon.value.slice(start, end); |
| | | } |
| | | }; |
| | | |
| | | const sonPaginationSearch = (pagination) => { |
| | | // 接收分页器参数 { page, limit } |
| | | handlePagination(pagination); |
| | | } |
| | | }; |
| | | const formattedNumber = (row, column, cellValue) => { |
| | | if (column.property !== 'supplierName') { |
| | | if (column.property !== "supplierName") { |
| | | return parseFloat(cellValue).toFixed(2); |
| | | } else { |
| | | return cellValue |
| | | return cellValue; |
| | | } |
| | | }; |
| | | getList(); |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | |
| | | .el-pagination { |
| | | width: 100%; |
| | | height: 55px; |