44 lines
1.5 KiB
Vue
44 lines
1.5 KiB
Vue
<script setup>
|
|
import { computed, h } from 'vue'
|
|
import { NDataTable, NEmpty, NText } from 'naive-ui'
|
|
|
|
const props = defineProps({
|
|
columns: { type: Array, default: () => [] },
|
|
rows: { type: Array, default: () => [] },
|
|
})
|
|
|
|
const formatValue = (value, column) => {
|
|
if (column.kind === 'dimension') return value ?? '—'
|
|
if (value === null || value === undefined || value === '') return '—'
|
|
const num = Number(value)
|
|
if (Number.isNaN(num)) return value
|
|
if (column.unit === 'percent') return `${Math.round(num * 10) / 10}%`
|
|
if (column.unit === 'money') return `${num.toLocaleString('ru-RU')} ₽`
|
|
return Number.isInteger(num) ? num.toLocaleString('ru-RU') : (Math.round(num * 100) / 100).toLocaleString('ru-RU')
|
|
}
|
|
|
|
const tableColumns = computed(() => props.columns.map((col) => ({
|
|
title: col.label,
|
|
key: col.key,
|
|
fixed: col.kind === 'dimension' && props.columns.indexOf(col) === 0 ? 'left' : undefined,
|
|
minWidth: col.kind === 'dimension' ? 160 : 120,
|
|
align: col.kind === 'dimension' ? 'left' : 'right',
|
|
render: (row) => formatValue(row[col.key], col),
|
|
})))
|
|
</script>
|
|
|
|
<template>
|
|
<NEmpty v-if="!rows.length" description="Сформируйте отчёт, чтобы увидеть данные" style="padding: 32px;" />
|
|
<NDataTable
|
|
v-else
|
|
min-height="calc(100vh - 740px)"
|
|
max-height="calc(100vh - 740px)"
|
|
:columns="tableColumns"
|
|
:data="rows"
|
|
:bordered="false"
|
|
:scroll-x="columns.length * 160"
|
|
size="small"
|
|
striped
|
|
/>
|
|
</template>
|