| | |
| | | <div class="summary-stats"> |
| | | <div class="stat-item"> |
| | | <span class="stat-label">采购总额:</span> |
| | | <span class="stat-value">¥{{ businessSummaryStats.totalAmount.toLocaleString() }}</span> |
| | | <span class="stat-value">¥{{ formatStatAmount(businessSummaryStats.totalAmount) }}</span> |
| | | </div> |
| | | <div class="stat-item"> |
| | | <span class="stat-label">商品种类:</span> |
| | |
| | | </div> |
| | | <div class="stat-item"> |
| | | <span class="stat-label">退款总额:</span> |
| | | <span class="stat-value">{{ businessSummaryStats.returnAmount }}</span> |
| | | <span class="stat-value">¥{{ formatStatAmount(businessSummaryStats.returnAmount) }}</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | // 统计数据 |
| | | const businessSummaryStats = ref({ |
| | | totalAmount: 0, |
| | | returnAmount: 0, |
| | | productTypes: 0 |
| | | }) |
| | | |
| | | // 汇总金额展示,保留6位小数 |
| | | const formatStatAmount = (val) => { |
| | | return Number(val || 0).toLocaleString('zh-CN', { |
| | | minimumFractionDigits: 6, |
| | | maximumFractionDigits: 6 |
| | | }) |
| | | } |
| | | |
| | | // 表格列配置(根据后端字段定义) |
| | | const tableColumns = ref([ |
| | |
| | | prop: 'purchaseNum', |
| | | width: 120, |
| | | formatData: (val) => { |
| | | return val ? parseFloat(val).toLocaleString() : '0' |
| | | return val ? parseFloat(val).toLocaleString('zh-CN', { minimumFractionDigits: 6, maximumFractionDigits: 6 }) : '0' |
| | | } |
| | | }, |
| | | { |
| | |
| | | prop: 'returnQuantity', |
| | | width: 120, |
| | | formatData: (val) => { |
| | | return val ? parseFloat(val).toLocaleString() : '0' |
| | | return val ? parseFloat(val).toLocaleString('zh-CN', { minimumFractionDigits: 6, maximumFractionDigits: 6 }) : '0' |
| | | } |
| | | }, |
| | | { |
| | |
| | | prop: 'returnAmount', |
| | | width: 120, |
| | | formatData: (val) => { |
| | | return val ? `¥${parseFloat(val).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` : '¥0.00' |
| | | return val ? `¥${parseFloat(val).toLocaleString('zh-CN', { minimumFractionDigits: 6, maximumFractionDigits: 6 })}` : '¥0.000000' |
| | | } |
| | | }, |
| | | { |
| | | label: '退款储量', |
| | | prop: 'purchaseAmount', |
| | | formatData: (val) => { |
| | | return val ? `¥${parseFloat(val).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` : '¥0.00' |
| | | return val ? `¥${parseFloat(val).toLocaleString('zh-CN', { minimumFractionDigits: 6, maximumFractionDigits: 6 })}` : '¥0.000000' |
| | | } |
| | | }, |
| | | { |
| | |
| | | prop: 'averagePrice', |
| | | width: 120, |
| | | formatData: (val) => { |
| | | return val ? `¥${parseFloat(val).toFixed(2)}` : '¥0.00' |
| | | return val ? `¥${parseFloat(val).toFixed(6)}` : '¥0.000000' |
| | | } |
| | | }, |
| | | { |
| | |
| | | businessSummaryStats.value.returnAmount = businessSummaryData.value.reduce((sum, item) => { |
| | | return sum + (parseFloat(item.returnAmount) || 0) |
| | | }, 0) |
| | | businessSummaryStats.value.productTypes = businessSummaryData.value.length |
| | | } else { |
| | | businessSummaryStats.value = { |
| | | totalAmount: 0, |
| | | returnAmount: 0, |
| | | productTypes: 0 |
| | | } |
| | | } |
| | |
| | | </script> |
| | | |
| | | <style scoped> |
| | | .app-container { |
| | | padding: 20px; |
| | | background-color: #f5f7fa; |
| | | min-height: 100vh; |
| | | } |
| | | |
| | | .page-header { |
| | | text-align: center; |
| | | margin-bottom: 20px; |