gaoluyang
2026-06-04 0e2d3f632e5286485321fc15a50b2531e53d6094
src/pages/procurementManagement/paymentLedger/detail.vue
@@ -3,27 +3,7 @@
    <!-- 使用通用页面头部组件 -->
    <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"
@@ -36,98 +16,98 @@
                       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(() => {
@@ -173,46 +153,6 @@
  .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 {
@@ -262,6 +202,32 @@
    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;
  }
@@ -289,16 +255,6 @@
    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 {