| | |
| | | </div> |
| | | </div> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12"> |
| | | <!-- 左侧客户列表 --> |
| | | <el-col :span="8"> |
| | | <div class="table_list" |
| | | style="width: 100%"> |
| | | <el-table :data="tableData" |
| | |
| | | prop="contractAmounts" |
| | | 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="receiptableAmount" |
| | | show-overflow-tooltip |
| | | width="200"> |
| | | <template #default="{ row, column }"> |
| | | <el-text type="danger"> |
| | | {{ formattedNumber(row, column, row.receiptableAmount) }} |
| | | </el-text> |
| | | </template> |
| | | </el-table-column> |
| | | width="150" /> |
| | | <!-- <el-table-column label="应收金额(元)"--> |
| | | <!-- prop="receiptableAmount"--> |
| | | <!-- show-overflow-tooltip--> |
| | | <!-- width="150">--> |
| | | <!-- <template #default="{ row, column }">--> |
| | | <!-- <el-text type="danger">--> |
| | | <!-- {{ formattedNumber(row, column, row.receiptableAmount) }}--> |
| | | <!-- </el-text>--> |
| | | <!-- </template>--> |
| | | <!-- </el-table-column>--> |
| | | </el-table> |
| | | <pagination v-show="total > 0" |
| | | :total="total" |
| | |
| | | @pagination="paginationChange" /> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <!-- 右侧订单信息 --> |
| | | <el-col :span="16"> |
| | | <div class="table_list" |
| | | style="width: 100%"> |
| | | <el-table :data="receiptRecord" |
| | | |
| | | <el-table :data="orderRecord" |
| | | border |
| | | :row-key="(row) => row.id" |
| | | show-summary |
| | | :summary-method="summarizeMainTable1" |
| | | height="calc(100vh - 18.5em)"> |
| | | v-loading="orderLoading" |
| | | height="calc(100vh - 20em)"> |
| | | <el-table-column align="center" |
| | | label="序号" |
| | | type="index" |
| | | width="60" /> |
| | | <el-table-column label="合同签订日期" |
| | | prop="executionDate" |
| | | show-overflow-tooltip |
| | | width="110" /> |
| | | <el-table-column label="销售合同号" |
| | | <el-table-column label="销售订单" |
| | | prop="salesContractNo" |
| | | show-overflow-tooltip |
| | | width="200" /> |
| | | <el-table-column label="合同金额(元)" |
| | | prop="contractAmount" |
| | | width="150" /> |
| | | <!-- <el-table-column label="发货订单号" |
| | | prop="shippingNo" |
| | | show-overflow-tooltip |
| | | :formatter="formattedNumber" |
| | | width="200" /> |
| | | <el-table-column label="回款金额(元)" |
| | | prop="receiptPaymentAmount" |
| | | width="150" /> --> |
| | | <el-table-column label="客户名称" |
| | | prop="customerName" |
| | | show-overflow-tooltip |
| | | :formatter="formattedNumber" |
| | | width="200" /> |
| | | <el-table-column label="应收金额(元)" |
| | | prop="receiptableAmount" |
| | | width="150" /> |
| | | <el-table-column label="产品名称" |
| | | prop="productName" |
| | | show-overflow-tooltip |
| | | width="200"> |
| | | <template #default="{ row, column }"> |
| | | <el-text type="danger"> |
| | | {{ formattedNumber(row, column, row.receiptableAmount) }} |
| | | </el-text> |
| | | width="150" /> |
| | | <el-table-column label="规格型号" |
| | | prop="specificationModel" |
| | | show-overflow-tooltip |
| | | width="120" /> |
| | | <el-table-column label="发货时间" |
| | | prop="shippingDate" |
| | | show-overflow-tooltip |
| | | width="110" /> |
| | | <el-table-column label="发货数量" |
| | | prop="totalQuantity" |
| | | show-overflow-tooltip |
| | | width="100" /> |
| | | <!-- <el-table-column label="发货车牌号" |
| | | prop="shippingCarNumber" |
| | | show-overflow-tooltip |
| | | width="120" /> |
| | | <el-table-column label="快递公司" |
| | | prop="expressCompany" |
| | | show-overflow-tooltip |
| | | width="120" /> |
| | | <el-table-column label="快递单号" |
| | | prop="expressNumber" |
| | | show-overflow-tooltip |
| | | width="150" /> --> |
| | | <el-table-column label="发货状态" |
| | | prop="status" |
| | | align="center" |
| | | width="100"> |
| | | <template #default="{ row }"> |
| | | <el-tag :type="getApprovalStatusType(row.status)"> |
| | | {{ getApprovalStatusText(row.status) }} |
| | | </el-tag> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="出库单号" |
| | | prop="outboundBatches" |
| | | show-overflow-tooltip |
| | | width="130" /> |
| | | </el-table> |
| | | <pagination v-show="recordTotal > 0" |
| | | :total="recordTotal" |
| | | <pagination v-show="orderTotal > 0" |
| | | :total="orderTotal" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :page="recordPage.current" |
| | | :limit="recordPage.size" |
| | | @pagination="recordPaginationChange" /> |
| | | :page="orderPage.current" |
| | | :limit="orderPage.size" |
| | | @pagination="orderPaginationChange" /> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | import { onMounted, ref, reactive, toRefs, getCurrentInstance } from "vue"; |
| | | import { |
| | | customewTransactions, |
| | | customewTransactionsDetails, |
| | | } from "@/api/salesManagement/indicatorStats.js"; |
| | | import { deliveryLedgerListPage } from "@/api/salesManagement/deliveryLedger.js"; |
| | | import Pagination from "../../../components/PIMTable/Pagination.vue"; |
| | | |
| | | const { proxy } = getCurrentInstance(); |
| | | const tableData = ref([]); |
| | | const receiptRecord = ref([]); |
| | | const orderRecord = ref([]); |
| | | const tableLoading = ref(false); |
| | | const orderLoading = ref(false); |
| | | const page = reactive({ |
| | | current: 1, |
| | | size: 100, |
| | | }); |
| | | const recordPage = reactive({ |
| | | const orderPage = reactive({ |
| | | current: 1, |
| | | size: 100, |
| | | }); |
| | | const total = ref(0); |
| | | const recordTotal = ref(0); |
| | | const orderTotal = ref(0); |
| | | const data = reactive({ |
| | | searchForm: { |
| | | searchText: "", |
| | |
| | | }); |
| | | const customerId = ref(""); |
| | | const { searchForm } = toRefs(data); |
| | | const originReceiptRecord = ref([]); |
| | | |
| | | // 查询列表 |
| | | /** 搜索按钮操作 */ |
| | | const handleQuery = () => { |
| | |
| | | tableData.value = res.data.records; |
| | | total.value = res.data.total; |
| | | if (tableData.value.length > 0) { |
| | | recordPage.current = 1; |
| | | orderPage.current = 1; |
| | | customerId.value = tableData.value[0].customerId; |
| | | receiptPaymentList(customerId.value); |
| | | getOrderList(customerId.value); |
| | | } else { |
| | | orderRecord.value = []; |
| | | customerId.value = ""; |
| | | } |
| | | }); |
| | | }; |
| | |
| | | const summarizeMainTable = param => { |
| | | return proxy.summarizeTable( |
| | | param, |
| | | ["invoiceTotal", "receiptPaymentAmount", "unReceiptPaymentAmount"], |
| | | ["contractAmounts", "receiptableAmount"], |
| | | { |
| | | ticketsNum: { noDecimal: true }, // 不保留小数 |
| | | futureTickets: { noDecimal: true }, // 不保留小数 |
| | | ticketsNum: { noDecimal: true }, |
| | | futureTickets: { noDecimal: true }, |
| | | } |
| | | ); |
| | | }; |
| | | // 子表合计方法 |
| | | const summarizeMainTable1 = param => { |
| | | var summarizeTable = proxy.summarizeTable( |
| | | param, |
| | | ["contractAmount", "receiptPaymentAmount", "receiptableAmount"], |
| | | { |
| | | ticketsNum: { noDecimal: true }, // 不保留小数 |
| | | futureTickets: { noDecimal: true }, // 不保留小数 |
| | | |
| | | // 获取订单列表(根据客户ID查询发货台账) |
| | | const getOrderList = async (id) => { |
| | | orderLoading.value = true; |
| | | try { |
| | | // 使用 deliveryLedgerListPage 接口根据 customerId 查询 |
| | | const res = await deliveryLedgerListPage({ |
| | | customerId: id, |
| | | current: 1, |
| | | size: 1000, |
| | | }); |
| | | let orders = []; |
| | | if (res.data) { |
| | | if (Array.isArray(res.data)) { |
| | | orders = res.data; |
| | | } else if (res.data.records && Array.isArray(res.data.records)) { |
| | | orders = res.data.records; |
| | | } |
| | | } |
| | | ); |
| | | return summarizeTable; |
| | | |
| | | orderTotal.value = orders.length; |
| | | handleOrderPagination({ page: orderPage.current, limit: orderPage.size }, orders); |
| | | } catch (error) { |
| | | console.error('获取订单列表失败:', error); |
| | | orderRecord.value = []; |
| | | } finally { |
| | | orderLoading.value = false; |
| | | } |
| | | }; |
| | | |
| | | const receiptPaymentList = id => { |
| | | const param = { |
| | | customerId: id, |
| | | current: recordPage.current, |
| | | size: recordPage.size, |
| | | }; |
| | | customewTransactionsDetails(param).then(res => { |
| | | if (Array.isArray(res.data)) { |
| | | originReceiptRecord.value = res.data; |
| | | recordTotal.value = res.data.length; |
| | | handlePagination({ page: 1, limit: recordPage.size }); |
| | | } else { |
| | | receiptRecord.value = res.data.records; |
| | | recordTotal.value = res.data.total; |
| | | } |
| | | }); |
| | | // 订单列表分页 |
| | | const orderPaginationChange = pagination => { |
| | | orderPage.current = pagination.page; |
| | | orderPage.size = pagination.limit; |
| | | getOrderList(customerId.value); |
| | | }; |
| | | |
| | | // 汇款记录列表分页 |
| | | const recordPaginationChange = pagination => { |
| | | recordPage.current = pagination.page; |
| | | recordPage.size = pagination.limit; |
| | | receiptPaymentList(customerId.value); |
| | | const handleOrderPagination = ({ page, limit }, allOrders) => { |
| | | const start = (page - 1) * limit; |
| | | const end = start + limit; |
| | | orderRecord.value = allOrders.slice(start, end); |
| | | }; |
| | | |
| | | const rowClickMethod = row => { |
| | | customerId.value = row.customerId; |
| | | receiptPaymentList(customerId.value); |
| | | orderPage.current = 1; |
| | | getOrderList(customerId.value); |
| | | }; |
| | | |
| | | const handlePagination = ({ page, limit }) => { |
| | | recordPage.current = page; |
| | | recordPage.size = limit; |
| | | // 审核状态标签类型 |
| | | const getApprovalStatusType = (status) => { |
| | | const statusMap = { |
| | | '已发货': 'success', |
| | | '审核通过': 'success', |
| | | '审核中': 'warning', |
| | | '审核不通过': 'danger', |
| | | }; |
| | | return statusMap[status] || 'info'; |
| | | }; |
| | | |
| | | const start = (page - 1) * limit; |
| | | const end = start + limit; |
| | | |
| | | receiptRecord.value = originReceiptRecord.value.slice(start, end); |
| | | // 审核状态文本 |
| | | const getApprovalStatusText = (status) => { |
| | | const statusMap = { |
| | | '已发货': '已发货', |
| | | '审核通过': '审核通过', |
| | | '审核中': '审核中', |
| | | '审核不通过': '审核不通过', |
| | | }; |
| | | return statusMap[status] || status || '--'; |
| | | }; |
| | | |
| | | onMounted(() => { |
| | |
| | | |
| | | <style scoped lang="scss"> |
| | | .table_list { |
| | | width: 50%; |
| | | width: 100%; |
| | | } |
| | | |
| | | </style> |