| | |
| | | <!-- 使用通用页面头部组件 --> |
| | | <PageHeader title="供应商往来详情" |
| | | @back="goBack" /> |
| | | <!-- 统计信息 --> |
| | | <view class="summary-info" |
| | | v-if="tableData.length > 0"> |
| | | <view class="summary-item"> |
| | | <text class="summary-label">总记录数</text> |
| | | <text class="summary-value">{{ tableData.length }}</text> |
| | | </view> |
| | | <view class="summary-item"> |
| | | <text class="summary-label">开票总金额</text> |
| | | <text class="summary-value">{{ formatAmount(invoiceTotal) }}</text> |
| | | </view> |
| | | <view class="summary-item"> |
| | | <text class="summary-label">回款总金额</text> |
| | | <text class="summary-value highlight">{{ formatAmount(receiptTotal) }}</text> |
| | | </view> |
| | | <view class="summary-item"> |
| | | <text class="summary-label">应收总金额</text> |
| | | <text class="summary-value danger">{{ formatAmount(unReceiptTotal) }}</text> |
| | | </view> |
| | | </view> |
| | | <!-- 回款记录明细列表 --> |
| | | <!-- 采购台账明细 --> |
| | | <view class="detail-list" |
| | | v-if="tableData.length > 0"> |
| | | <view v-for="(item, index) in tableData" |
| | |
| | | size="16" |
| | | color="#ffffff"></up-icon> |
| | | </view> |
| | | <text class="item-index">{{ index + 1 }}</text> |
| | | <text class="item-index">{{ item.purchaseContractNumber }}</text> |
| | | </view> |
| | | <view class="item-date">{{ item.happenTime }}</view> |
| | | <view class="item-status"> |
| | | <text class="status-tag" |
| | | :class="getReceiptStatusClass(item.status)">{{ receiptStatusText[item.status] || '未知状态' }}</text> |
| | | </view> |
| | | </view> |
| | | <up-divider></up-divider> |
| | | <view class="item-details"> |
| | | <view class="detail-row"> |
| | | <text class="detail-label">发票金额(元)</text> |
| | | <text class="detail-value">{{ formatAmount(item.invoiceAmount) }}</text> |
| | | <text class="detail-label">合同签订日期</text> |
| | | <text class="detail-value">{{ item.executionDate }}</text> |
| | | </view> |
| | | <view class="detail-row"> |
| | | <text class="detail-label">付款金额(元)</text> |
| | | <text class="detail-value highlight">{{ formatAmount(item.currentPaymentAmount) }}</text> |
| | | <text class="detail-label">项目名称</text> |
| | | <text class="detail-value">{{ item.projectName }}</text> |
| | | </view> |
| | | <view class="detail-row"> |
| | | <text class="detail-label">应付金额(元)</text> |
| | | <text class="detail-value danger">{{ formatAmount(item.payableAmount) }}</text> |
| | | </view> |
| | | <view class="detail-row"> |
| | | <text class="detail-label">发生日期</text> |
| | | <text class="detail-value">{{ item.paymentDate }}</text> |
| | | <text class="detail-label">合同金额(元)</text> |
| | | <text class="detail-value">{{ formatAmount(item.contractAmount) }}</text> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view v-else |
| | | class="no-data"> |
| | | <text>暂无回款记录</text> |
| | | <text>暂无采购台账记录</text> |
| | | </view> |
| | | </view> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { ref, computed, onMounted } from "vue"; |
| | | import { onShow } from "@dcloudio/uni-app"; |
| | | import { |
| | | paymentLedgerList, |
| | | paymentRecordList, |
| | | } from "@/api/procurementManagement/paymentLedger"; |
| | | import { ref, onMounted } from "vue"; |
| | | import { gePurchaseListPage } from "@/api/procurementManagement/invoiceEntry.js"; |
| | | |
| | | // 客户信息 |
| | | const supplierId = ref(""); |
| | | const supplierName = ref(""); |
| | | |
| | | // 表格数据 |
| | | const tableData = ref([]); |
| | | |
| | | const invoiceTotal = computed(() => { |
| | | return tableData.value.reduce((sum, item) => { |
| | | return sum + (parseFloat(item.invoiceAmount) || 0); |
| | | }, 0); |
| | | }); |
| | | // 收货状态文本映射 |
| | | const receiptStatusText = { |
| | | 1: '待收货', |
| | | 2: '收货中', |
| | | 3: '已收货' |
| | | }; |
| | | |
| | | const receiptTotal = computed(() => { |
| | | return tableData.value.reduce((sum, item) => { |
| | | return sum + (parseFloat(item.receiptAmount) || 0); |
| | | }, 0); |
| | | }); |
| | | |
| | | const unReceiptTotal = computed(() => { |
| | | return tableData.value.reduce((sum, item) => { |
| | | return sum + (parseFloat(item.unReceiptAmount) || 0); |
| | | }, 0); |
| | | }); |
| | | // 收货状态标签样式 |
| | | const getReceiptStatusClass = (status) => { |
| | | const classMap = { |
| | | 1: 'status-info', |
| | | 2: 'status-warning', |
| | | 3: 'status-success' |
| | | }; |
| | | return classMap[status] || 'status-info'; |
| | | }; |
| | | |
| | | // 返回上一页 |
| | | const goBack = () => { |
| | | uni.removeStorageSync("supplierId"); |
| | | uni.removeStorageSync("supplierName"); |
| | | uni.navigateBack(); |
| | | }; |
| | | |
| | | // 获取页面参数 |
| | | const getPageParams = () => { |
| | | // 从本地存储获取供应商ID |
| | | const storedSupplierId = uni.getStorageSync("supplierId"); |
| | | if (storedSupplierId) { |
| | | supplierId.value = storedSupplierId; |
| | | const storedSupplierName = uni.getStorageSync("supplierName"); |
| | | if (storedSupplierName) { |
| | | supplierName.value = storedSupplierName; |
| | | } |
| | | }; |
| | | |
| | | // 查询列表 |
| | | const getList = () => { |
| | | if (!supplierId.value) { |
| | | if (!supplierName.value) { |
| | | uni.showToast({ |
| | | title: "客户信息缺失", |
| | | title: "供应商信息缺失", |
| | | icon: "error", |
| | | }); |
| | | return; |
| | | } |
| | | showLoadingToast("加载中..."); |
| | | paymentRecordList({ supplierId: supplierId.value }) |
| | | gePurchaseListPage({ supplierName: supplierName.value, current: 1, size: 1000 }) |
| | | .then(res => { |
| | | tableData.value = res.data; |
| | | 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; |
| | | } |
| | | } |
| | | tableData.value = orders; |
| | | closeToast(); |
| | | }) |
| | | .catch(() => { |
| | |
| | | |
| | | .u-divider { |
| | | margin: 0 !important; |
| | | } |
| | | |
| | | .summary-info { |
| | | background: #ffffff; |
| | | margin: 20px 20px 0 20px; |
| | | border-radius: 12px; |
| | | padding: 16px; |
| | | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); |
| | | } |
| | | |
| | | .summary-item { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | margin-bottom: 8px; |
| | | |
| | | &:last-child { |
| | | margin-bottom: 0; |
| | | } |
| | | } |
| | | |
| | | .summary-label { |
| | | font-size: 14px; |
| | | color: #666; |
| | | } |
| | | |
| | | .summary-value { |
| | | font-size: 14px; |
| | | color: #333; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | .summary-value.highlight { |
| | | color: #2979ff; |
| | | font-weight: 600; |
| | | } |
| | | |
| | | .summary-value.danger { |
| | | color: #ff4757; |
| | | font-weight: 600; |
| | | } |
| | | |
| | | .detail-list { |
| | |
| | | color: #666; |
| | | } |
| | | |
| | | .item-status { |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | |
| | | .status-tag { |
| | | font-size: 12px; |
| | | padding: 2px 8px; |
| | | border-radius: 4px; |
| | | } |
| | | |
| | | .status-success { |
| | | color: #67c23a; |
| | | background: rgba(103, 194, 58, 0.1); |
| | | } |
| | | |
| | | .status-warning { |
| | | color: #e6a23c; |
| | | background: rgba(230, 162, 60, 0.1); |
| | | } |
| | | |
| | | .status-info { |
| | | color: #909399; |
| | | background: rgba(144, 147, 153, 0.1); |
| | | } |
| | | |
| | | .item-details { |
| | | padding: 16px 0; |
| | | } |
| | |
| | | text-align: right; |
| | | flex: 1; |
| | | margin-left: 16px; |
| | | } |
| | | |
| | | .detail-value.highlight { |
| | | color: #2979ff; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | .detail-value.danger { |
| | | color: #ff4757; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | .no-data { |