UI коструктора отчетов

resources/js/Pages/Analytics/Components/ResultTable.vue

@@ -0,0 +1,43 @@
+<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>