78 lines
1.8 KiB
Vue
78 lines
1.8 KiB
Vue
<template>
|
|
<el-table
|
|
:data="list"
|
|
size="small"
|
|
stripe
|
|
class="pos-table"
|
|
max-height="320"
|
|
show-summary
|
|
:summary-method="getSummaries"
|
|
>
|
|
<el-table-column prop="rank" label="名次" width="56" />
|
|
<el-table-column prop="name" label="会员简称" min-width="110" />
|
|
<el-table-column :prop="String(qtyKey)" :label="qtyLabel" min-width="90" />
|
|
<el-table-column prop="change" label="增减" min-width="80">
|
|
<template #default="{ row }">
|
|
<span :class="row.change >= 0 ? 'price-up' : 'chg-down'">
|
|
{{ formatChange(row.change) }}
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { PositionRow } from '../../types'
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
list: PositionRow[]
|
|
qtyKey?: keyof PositionRow
|
|
qtyLabel?: string
|
|
}>(),
|
|
{
|
|
qtyKey: 'qty',
|
|
qtyLabel: '数量',
|
|
},
|
|
)
|
|
|
|
function formatChange(n: number): string {
|
|
return `${n > 0 ? '+' : ''}${n}`
|
|
}
|
|
|
|
function getSummaries(param: {
|
|
columns: { property?: string }[]
|
|
data: PositionRow[]
|
|
}): string[] {
|
|
const { columns, data } = param
|
|
const qtyTotal = data.reduce((acc, row) => acc + Number(row[props.qtyKey] ?? 0), 0)
|
|
const changeTotal = data.reduce((acc, row) => acc + Number(row.change ?? 0), 0)
|
|
|
|
return columns.map((column) => {
|
|
if (column.property === 'name') return '合计'
|
|
if (column.property === String(props.qtyKey)) {
|
|
return String(qtyTotal)
|
|
}
|
|
if (column.property === 'change') {
|
|
return formatChange(changeTotal)
|
|
}
|
|
return ''
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.pos-table {
|
|
width: 100%;
|
|
}
|
|
|
|
.pos-table :deep(.el-table__footer-wrapper td) {
|
|
font-weight: 600;
|
|
background: var(--el-fill-color-light, #f5f7fa);
|
|
}
|
|
|
|
.chg-down {
|
|
color: var(--short);
|
|
}
|
|
</style>
|