马铃薯app 1.客户往来、供应商往来查询展示修改

gaoluyang

2026-06-04 0e2d3f632e5286485321fc15a50b2531e53d6094

 src/pages/sales/receiptPaymentLedger/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,66 +16,59 @@
                       size="16"
                       color="#ffffff"></up-icon>
            </view>
            <text class="item-index">{{ index + 1 }}</text>
            <text class="item-index">{{ item.salesContractNo }}</text>
          </view>
          <view class="item-date">{{ item.happenTime }}</view>
          <view class="item-status">
            <text class="status-tag"
                  :class="getStatusClass(item.status)">{{ 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.invoiceTotal) }}</text>
            <text class="detail-label">客户名称</text>
            <text class="detail-value">{{ item.customerName }}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">回款金额(元)</text>
            <text class="detail-value highlight">{{ formatAmount(item.receiptPaymentAmount) }}</text>
            <text class="detail-label">产品名称</text>
            <text class="detail-value">{{ item.productName }}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">应收金额(元)</text>
            <text class="detail-value danger">{{ formatAmount(item.unReceiptPaymentAmount) }}</text>
            <text class="detail-label">规格型号</text>
            <text class="detail-value">{{ item.specificationModel }}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">发生日期</text>
            <text class="detail-value">{{ item.receiptPaymentDate }}</text>
            <text class="detail-label">发货时间</text>
            <text class="detail-value">{{ item.shippingDate }}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">发货数量</text>
            <text class="detail-value">{{ item.totalQuantity }}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">出库单号</text>
            <text class="detail-value">{{ item.outboundBatches }}</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 { ref, onMounted } from "vue";
  import { onShow } from "@dcloudio/uni-app";
  import { customerInteractions } from "@/api/salesManagement/receiptPayment.js";
  import { deliveryLedgerListPage } from "@/api/salesManagement/deliveryLedger.js";

  // 客户信息
  const customerId = ref("");

  // 表格数据
  const tableData = ref([]);

  const invoiceTotal = computed(() => {
    return tableData.value.reduce((sum, item) => {
      return sum + (parseFloat(item.invoiceTotal) || 0);
    }, 0);
  });

  const receiptTotal = computed(() => {
    return tableData.value.reduce((sum, item) => {
      return sum + (parseFloat(item.receiptPaymentAmount) || 0);
    }, 0);
  });

  const unReceiptTotal = computed(() => {
    return tableData.value.reduce((sum, item) => {
      return sum + (parseFloat(item.unReceiptPaymentAmount) || 0);
    }, 0);
  });

  // 返回上一页
  const goBack = () => {
@@ -105,7 +78,6 @@

  // 获取页面参数
  const getPageParams = () => {
    // 从本地存储获取客户ID
    const storedCustomerId = uni.getStorageSync("customerId");
    if (storedCustomerId) {
      customerId.value = storedCustomerId;
@@ -123,15 +95,21 @@
    }

    showLoadingToast("加载中...");
    const param = {
    deliveryLedgerListPage({
      customerId: customerId.value,
      current: -1,
      size: -1,
    };

    customerInteractions(param)
      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(() => {
@@ -143,9 +121,15 @@
      });
  };

  // 格式化金额
  const formatAmount = amount => {
    return amount ? parseFloat(amount).toFixed(2) : "0.00";
  // 发货状态样式
  const getStatusClass = (status) => {
    const statusMap = {
      '已发货': 'status-success',
      '审核通过': 'status-success',
      '审核中': 'status-warning',
      '审核不通过': 'status-danger',
    };
    return statusMap[status] || 'status-info';
  };

  // 显示加载提示
@@ -183,46 +167,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 {
@@ -272,6 +216,37 @@
    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-danger {
    color: #f56c6c;
    background: rgba(245, 108, 108, 0.1);
  }

  .status-info {
    color: #909399;
    background: rgba(144, 147, 153, 0.1);
  }

  .item-details {
    padding: 16px 0;
  }
@@ -301,19 +276,10 @@
    margin-left: 16px;
  }

  .detail-value.highlight {
    color: #2979ff;
    font-weight: 500;
  }

  .detail-value.danger {
    color: #ff4757;
    font-weight: 500;
  }

  .no-data {
    padding: 40px 0;
    text-align: center;
    color: #999;
  }

</style>