| | |
| | | <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 位小数(如 211.970000、¥3,420,674.200000), |
| | | // 页面按后端实际位数展示即可,不再补齐 6 位——多余的结尾 0 一律去掉。 |
| | | // maximumFractionDigits 保留 6,是为了兜住前端自己 reduce 求和时的浮点尾数(如 3420674.2000000002)。 |
| | | const NUM_FMT = { maximumFractionDigits: 6 } |
| | | |
| | | // 数量/金额统一格式化:带千分位,去掉结尾多余的 0;空值按 0 处理 |
| | | const formatNum = (val, prefix = '') => { |
| | | const num = parseFloat(val) |
| | | if (val === null || val === undefined || val === '' || Number.isNaN(num)) { |
| | | return `${prefix}0` |
| | | } |
| | | return `${prefix}${num.toLocaleString('zh-CN', NUM_FMT)}` |
| | | } |
| | | |
| | | // 汇总金额展示 |
| | | const formatStatAmount = (val) => { |
| | | return formatNum(val) |
| | | } |
| | | |
| | | // 表格列配置(根据后端字段定义) |
| | | const tableColumns = ref([ |
| | |
| | | label: '采购数量', |
| | | prop: 'purchaseNum', |
| | | width: 120, |
| | | formatData: (val) => { |
| | | return val ? parseFloat(val).toLocaleString() : '0' |
| | | } |
| | | formatData: (val) => formatNum(val) |
| | | }, |
| | | { |
| | | label: '退货数量', |
| | | prop: 'returnQuantity', |
| | | width: 120, |
| | | formatData: (val) => { |
| | | return val ? parseFloat(val).toLocaleString() : '0' |
| | | } |
| | | formatData: (val) => formatNum(val) |
| | | }, |
| | | { |
| | | label: '退货金额', |
| | | prop: 'returnAmount', |
| | | width: 120, |
| | | formatData: (val) => { |
| | | return val ? `¥${parseFloat(val).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` : '¥0.00' |
| | | } |
| | | formatData: (val) => formatNum(val, '¥') |
| | | }, |
| | | { |
| | | label: '退款储量', |
| | | prop: 'purchaseAmount', |
| | | formatData: (val) => { |
| | | return val ? `¥${parseFloat(val).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` : '¥0.00' |
| | | } |
| | | formatData: (val) => formatNum(val, '¥') |
| | | }, |
| | | { |
| | | label: '采购次数', |
| | |
| | | label: '平均单价', |
| | | prop: 'averagePrice', |
| | | width: 120, |
| | | formatData: (val) => { |
| | | return val ? `¥${parseFloat(val).toFixed(2)}` : '¥0.00' |
| | | } |
| | | formatData: (val) => formatNum(val, '¥') |
| | | }, |
| | | { |
| | | label: '供应商名称', |
| | |
| | | } 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; |