| | |
| | | width="200" |
| | | /> |
| | | <el-table-column |
| | | label="开票金额(元)" |
| | | label="合同金额(元)" |
| | | prop="invoiceTotal" |
| | | show-overflow-tooltip |
| | | :formatter="formattedNumber" |
| | | width="200" |
| | | /> |
| | | <el-table-column |
| | | label="回款金额(元)" |
| | | prop="receiptPaymentAmount" |
| | | show-overflow-tooltip |
| | | :formatter="formattedNumber" |
| | | width="200" |
| | | /> |
| | | <el-table-column |
| | | label="应收金额(元)" |
| | | prop="unReceiptPaymentAmount" |
| | | show-overflow-tooltip |
| | | width="200" |
| | | > |
| | | <template #default="{ row, column }"> |
| | | <el-text type="danger"> |
| | | {{ formattedNumber(row, column, row.unReceiptPaymentAmount) }} |
| | | </el-text> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="操作" fixed="right" width="180" align="center"> |
| | | <template #default="{ row }"> |
| | | <el-button link type="primary" @click.stop="showMoneyInteractions(row)">金钱往来</el-button> |
| | | <el-button link type="success" @click.stop="showSalesInteractions(row)">销售往来</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <pagination |
| | | v-show="total > 0" |
| | | :total="total" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :page="page.current" |
| | | :limit="page.size" |
| | | @pagination="paginationChange" |
| | | /> |
| | | </div> |
| | | <div class="table_list"> |
| | | <el-table |
| | | v-if="recordMode === 'money'" |
| | | :data="receiptRecord" |
| | | border |
| | | :row-key="(row) => row.id" |
| | | show-summary |
| | | :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 |
| | | width="110" |
| | | /> |
| | | <el-table-column |
| | | label="销售合同号" |
| | | prop="salesContractNo" |
| | | show-overflow-tooltip |
| | | width="200" |
| | | /> |
| | | <el-table-column |
| | | label="合同金额(元)" |
| | | prop="invoiceTotal" |
| | | show-overflow-tooltip |
| | | :formatter="formattedNumber" |
| | |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <pagination |
| | | v-show="total > 0" |
| | | :total="total" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :page="page.current" |
| | | :limit="page.size" |
| | | @pagination="paginationChange" |
| | | /> |
| | | </div> |
| | | <div class="table_list"> |
| | | <el-table |
| | | :data="receiptRecord" |
| | | v-else |
| | | :data="salesRecord" |
| | | border |
| | | :row-key="(row) => row.id" |
| | | show-summary |
| | | :summary-method="summarizeMainTable1" |
| | | :summary-method="summarizeSalesTable" |
| | | height="calc(100vh - 18.5em)" |
| | | > |
| | | <el-table-column |
| | | align="center" |
| | | label="序号" |
| | | type="index" |
| | | width="60" |
| | | /> |
| | | <el-table-column |
| | | label="发生日期" |
| | | prop="happenTime" |
| | | show-overflow-tooltip |
| | | width="110" |
| | | /> |
| | | <el-table-column |
| | | label="开票金额(元)" |
| | | prop="invoiceAmount" |
| | | show-overflow-tooltip |
| | | :formatter="formattedNumber" |
| | | width="200" |
| | | /> |
| | | <el-table-column |
| | | label="回款金额(元)" |
| | | prop="receiptAmount" |
| | | show-overflow-tooltip |
| | | :formatter="formattedNumber" |
| | | width="200" |
| | | /> |
| | | <el-table-column |
| | | label="应收金额(元)" |
| | | prop="unReceiptAmount" |
| | | show-overflow-tooltip |
| | | width="200" |
| | | > |
| | | <template #default="{ row, column }"> |
| | | <el-text type="danger"> |
| | | {{ formattedNumber(row, column, row.unReceiptAmount) }} |
| | | </el-text> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column align="center" label="序号" type="index" width="60" /> |
| | | <el-table-column label="货名" prop="goodsName" show-overflow-tooltip width="220" /> |
| | | <el-table-column label="规格" prop="specificationModel" show-overflow-tooltip width="220" /> |
| | | <el-table-column label="已发货" prop="shippedQuantity" show-overflow-tooltip width="140" /> |
| | | <el-table-column label="未发货" prop="unshippedQuantity" show-overflow-tooltip width="140" /> |
| | | </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 {onMounted, ref} from "vue"; |
| | | import { onMounted, ref, reactive, toRefs, getCurrentInstance } from "vue"; |
| | | import { invoiceLedgerSalesAccount } from "../../../api/salesManagement/invoiceLedger.js"; |
| | | import { customerInteractions } from "../../../api/salesManagement/receiptPayment.js"; |
| | | import { customerInteractions, customerSalesInteractions } from "../../../api/salesManagement/receiptPayment.js"; |
| | | import Pagination from "../../../components/PIMTable/Pagination.vue"; |
| | | const { proxy } = getCurrentInstance(); |
| | | const tableData = ref([]); |
| | | const receiptRecord = ref([]); |
| | | const salesRecord = ref([]); |
| | | const tableLoading = ref(false); |
| | | const page = reactive({ |
| | | current: 1, |
| | |
| | | }); |
| | | const total = ref(0); |
| | | const recordTotal = ref(0); |
| | | const recordMode = ref("money"); |
| | | const data = reactive({ |
| | | searchForm: { |
| | | searchText: "", |
| | |
| | | const customerId = ref(""); |
| | | const { searchForm } = toRefs(data); |
| | | const originReceiptRecord = ref([]); |
| | | const originSalesRecord = ref([]); |
| | | // 查询列表 |
| | | /** 搜索按钮操作 */ |
| | | const handleQuery = () => { |
| | |
| | | getList(); |
| | | }; |
| | | const paginationChange = (obj) => { |
| | | console.log("paginationChange", current, limit); |
| | | page.current = obj.page; |
| | | page.size = obj.limit; |
| | | getList(); |
| | |
| | | return summarizeTable; |
| | | }; |
| | | |
| | | // 销售往来表合计(已发货/未发货) |
| | | const summarizeSalesTable = (param) => { |
| | | return proxy.summarizeTable( |
| | | param, |
| | | ["shippedQuantity", "unshippedQuantity"], |
| | | { |
| | | shippedQuantity: { noDecimal: false }, |
| | | unshippedQuantity: { noDecimal: false }, |
| | | } |
| | | ); |
| | | }; |
| | | |
| | | const receiptPaymentList = (id) => { |
| | | const param = { |
| | | customerId: id, |
| | |
| | | }); |
| | | }; |
| | | |
| | | const salesInteractionList = (id) => { |
| | | const param = { |
| | | customerId: id, |
| | | }; |
| | | customerSalesInteractions(param).then((res) => { |
| | | // 支持后端直接返回数组,或 data.records 形式 |
| | | originSalesRecord.value = res?.data?.records || res?.data || []; |
| | | salesRecord.value = originSalesRecord.value; |
| | | }); |
| | | }; |
| | | |
| | | const showMoneyInteractions = (row) => { |
| | | customerId.value = row.id; |
| | | recordMode.value = "money"; |
| | | receiptPaymentList(customerId.value); |
| | | }; |
| | | |
| | | const showSalesInteractions = (row) => { |
| | | customerId.value = row.id; |
| | | recordMode.value = "sales"; |
| | | salesInteractionList(customerId.value); |
| | | }; |
| | | |
| | | // 汇款记录列表分页 |
| | | const recordPaginationChange = (pagination) => { |
| | | handlePagination(pagination); |
| | |
| | | |
| | | const rowClickMethod = (row) => { |
| | | customerId.value = row.id; |
| | | receiptPaymentList(customerId.value); |
| | | if (recordMode.value === "money") { |
| | | receiptPaymentList(customerId.value); |
| | | } else { |
| | | salesInteractionList(customerId.value); |
| | | } |
| | | }; |
| | | |
| | | const handlePagination = ({ page, limit }) => { |