销售台账增加发货列表和发货功能

zhangwencui

9 小时以前 5b76649a97e92e3f02cdbb71e871443524fd0348

 src/pages/procurementManagement/paymentLedger/detail.vue

@@ -1,294 +1,305 @@
<template>
   <view class="receipt-payment-detail">
      <!-- 使用通用页面头部组件 -->
      <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" :key="index" class="detail-item">
            <view class="item-header">
               <view class="item-left">
                  <view class="record-icon">
                     <up-icon name="file-text" size="16" color="#ffffff"></up-icon>
                  </view>
                  <text class="item-index">{{ index + 1 }}</text>
               </view>
               <view class="item-date">{{ item.happenTime }}</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>
               </view>
               <view class="detail-row">
                  <text class="detail-label">付款金额(元)</text>
                  <text class="detail-value highlight">{{ formatAmount(item.currentPaymentAmount) }}</text>
               </view>
               <view class="detail-row">
                  <text class="detail-label">应付金额(元)</text>
                  <text class="detail-value danger">{{ formatAmount(item.payableAmount) }}</text>
               </view>
            </view>
         </view>
      </view>
      <view v-else class="no-data">
         <text>暂无回款记录</text>
      </view>
   </view>
  <view class="receipt-payment-detail">
    <!-- 使用通用页面头部组件 -->
    <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"
            :key="index"
            class="detail-item">
        <view class="item-header">
          <view class="item-left">
            <view class="record-icon">
              <up-icon name="file-text"
                       size="16"
                       color="#ffffff"></up-icon>
            </view>
            <text class="item-index">{{ index + 1 }}</text>
          </view>
          <view class="item-date">{{ item.happenTime }}</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>
          </view>
          <view class="detail-row">
            <text class="detail-label">付款金额(元)</text>
            <text class="detail-value highlight">{{ formatAmount(item.currentPaymentAmount) }}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">应付金额(元)</text>
            <text class="detail-value danger">{{ formatAmount(item.payableAmount) }}</text>
          </view>
        </view>
      </view>
    </view>
    <view v-else
          class="no-data">
      <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, computed, onMounted } from "vue";
  import { onShow } from "@dcloudio/uni-app";
  import {
    paymentLedgerList,
    paymentRecordList,
  } from "@/api/procurementManagement/paymentLedger";

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

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

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

const receiptTotal = computed(() => {
   return tableData.value.reduce((sum, item) => {
      return sum + (parseFloat(item.receiptAmount) || 0);
   }, 0);
});
  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 unReceiptTotal = computed(() => {
    return tableData.value.reduce((sum, item) => {
      return sum + (parseFloat(item.unReceiptAmount) || 0);
    }, 0);
  });

// 返回上一页
const goBack = () => {
   uni.removeStorageSync('supplierId')
   uni.navigateBack();
};
  // 返回上一页
  const goBack = () => {
    uni.removeStorageSync("supplierId");
    uni.navigateBack();
  };

// 获取页面参数
const getPageParams = () => {
   // 从本地存储获取供应商ID
   const storedSupplierId = uni.getStorageSync('supplierId');
   if (storedSupplierId) {
      supplierId.value = storedSupplierId;
   }
};
  // 获取页面参数
  const getPageParams = () => {
    // 从本地存储获取供应商ID
    const storedSupplierId = uni.getStorageSync("supplierId");
    if (storedSupplierId) {
      supplierId.value = storedSupplierId;
    }
  };

// 查询列表
const getList = () => {
   if (!supplierId.value) {
      uni.showToast({
         title: '客户信息缺失',
         icon: 'error'
      });
      return;
   }
   showLoadingToast('加载中...')
   paymentRecordList(supplierId.value).then((res) => {
      tableData.value = res.data;
      closeToast()
   }).catch(() => {
      closeToast()
      uni.showToast({
         title: '查询失败',
         icon: 'error'
      });
   });
};
  // 查询列表
  const getList = () => {
    if (!supplierId.value) {
      uni.showToast({
        title: "客户信息缺失",
        icon: "error",
      });
      return;
    }
    showLoadingToast("加载中...");
    paymentRecordList(supplierId.value)
      .then(res => {
        tableData.value = res.data;
        closeToast();
      })
      .catch(() => {
        closeToast();
        uni.showToast({
          title: "查询失败",
          icon: "error",
        });
      });
  };

// 格式化金额
const formatAmount = (amount) => {
   return amount ? parseFloat(amount).toFixed(2) : '0.00';
};
  // 格式化金额
  const formatAmount = amount => {
    return amount ? parseFloat(amount).toFixed(2) : "0.00";
  };

// 显示加载提示
const showLoadingToast = (message) => {
   uni.showLoading({
      title: message,
      mask: true
   });
};
  // 显示加载提示
  const showLoadingToast = message => {
    uni.showLoading({
      title: message,
      mask: true,
    });
  };

// 关闭提示
const closeToast = () => {
   uni.hideLoading();
};
  // 关闭提示
  const closeToast = () => {
    uni.hideLoading();
  };

onMounted(() => {
   // 页面加载时获取参数并刷新列表
   getPageParams();
   getList();
});
  onMounted(() => {
    // 页面加载时获取参数并刷新列表
    getPageParams();
    getList();
  });
</script>

<style scoped lang="scss">
.receipt-payment-detail {
   min-height: 100vh;
   background: #f8f9fa;
   position: relative;
}
  .receipt-payment-detail {
    min-height: 100vh;
    background: #f8f9fa;
    position: relative;
  }

.u-divider {
   margin: 0 !important;
}
  .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-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-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;

.summary-label {
   font-size: 14px;
   color: #666;
}
    &:last-child {
      margin-bottom: 0;
    }
  }

.summary-value {
   font-size: 14px;
   color: #333;
   font-weight: 500;
}
  .summary-label {
    font-size: 14px;
    color: #666;
  }

.summary-value.highlight {
   color: #2979ff;
   font-weight: 600;
}
  .summary-value {
    font-size: 14px;
    color: #333;
    font-weight: 500;
  }

.summary-value.danger {
   color: #ff4757;
   font-weight: 600;
}
  .summary-value.highlight {
    color: #2979ff;
    font-weight: 600;
  }

.detail-list {
   padding: 20px;
}
  .summary-value.danger {
    color: #ff4757;
    font-weight: 600;
  }

.detail-item {
   background: #ffffff;
   border-radius: 12px;
   margin-bottom: 16px;
   overflow: hidden;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
   padding: 0 16px;
}
  .detail-list {
    padding: 20px;
  }

.item-header {
   padding: 10px 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
}
  .detail-item {
    background: #ffffff;
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    padding: 0 16px;
  }

.item-left {
   display: flex;
   align-items: center;
   gap: 8px;
}
  .item-header {
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

.record-icon {
   width: 24px;
   height: 24px;
   background: #2979ff;
   border-radius: 4px;
   display: flex;
   align-items: center;
   justify-content: center;
}
  .item-left {
    display: flex;
    align-items: center;
    gap: 8px;
  }

.item-index {
   font-size: 14px;
   color: #333;
   font-weight: 500;
}
  .record-icon {
    width: 24px;
    height: 24px;
    background: #2979ff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

.item-date {
   font-size: 12px;
   color: #666;
}
  .item-index {
    font-size: 14px;
    color: #333;
    font-weight: 500;
  }

.item-details {
   padding: 16px 0;
}
  .item-date {
    font-size: 12px;
    color: #666;
  }

.detail-row {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   margin-bottom: 8px;
	
   &:last-child {
      margin-bottom: 0;
   }
}
  .item-details {
    padding: 16px 0;
  }

.detail-label {
   font-size: 12px;
   color: #777777;
   min-width: 60px;
}
  .detail-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 8px;

.detail-value {
   font-size: 12px;
   color: #000000;
   text-align: right;
   flex: 1;
   margin-left: 16px;
}
    &:last-child {
      margin-bottom: 0;
    }
  }

.detail-value.highlight {
   color: #2979ff;
   font-weight: 500;
}
  .detail-label {
    font-size: 12px;
    color: #777777;
    min-width: 60px;
  }

.detail-value.danger {
   color: #ff4757;
   font-weight: 500;
}
  .detail-value {
    font-size: 12px;
    color: #000000;
    text-align: right;
    flex: 1;
    margin-left: 16px;
  }

.no-data {
   padding: 40px 0;
   text-align: center;
   color: #999;
}
  .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>