first commit

resources/js/Pages/Home/DataTable/Index.vue

@@ -0,0 +1,78 @@
+<script setup>
+import {NDataTable, NEllipsis} from "naive-ui"
+import {h, ref} from "vue"
+
+const props = defineProps({
+    data: {
+        type: Array,
+        default: []
+    },
+    maxHeight: {
+        type: String,
+        default: null
+    },
+    minHeight: {
+        type: String,
+        default: null
+    }
+})
+
+const columns = ref([
+    {
+        title: '№ карты',
+        key: 'nkarta',
+        width: 100,
+        render: (row) => h(NEllipsis, null, { default: () => row.nkarta })
+    },
+    {
+        title: 'ФИО',
+        key: 'fullname',
+        width: 250,
+        render: (row) => h(NEllipsis, null, { default: () => row.fullname })
+    },
+    {
+        title: 'Дата рождения',
+        key: 'dr',
+        width: 130,
+        render: (row) => h(NEllipsis, null, { default: () => row.dr })
+    },
+    {
+        title: 'Дата поступления',
+        key: 'mpostdate',
+        width: 150,
+        render: (row) => h(NEllipsis, null, { default: () => row.mpostdate })
+    },
+    {
+        title: 'Дата выписки',
+        key: 'menddate',
+        width: 130,
+        render: (row) => h(NEllipsis, null, { default: () => row.menddate })
+    },
+    {
+        title: '№ архива',
+        key: 'narhiv',
+        width: 120,
+        render: (row) => h(NEllipsis, null, { default: () => row.narhiv })
+    },
+    {
+        title: 'Дата архива',
+        key: 'datearhiv',
+        width: 130,
+        render: (row) => h(NEllipsis, null, { default: () => row.datearhiv })
+    },
+    {
+        title: 'Статус',
+        key: 'status',
+        width: 100,
+        render: (row) => h(NEllipsis, null, { default: () => row.status || '-' })
+    }
+])
+</script>
+
+<template>
+    <NDataTable remote striped :columns="columns" :max-height="maxHeight" size="small" :min-height="minHeight" :data="data" />
+</template>
+
+<style scoped>
+
+</style>

resources/js/Pages/Home/Index.vue

@@ -0,0 +1,29 @@
+<script setup>
+import AppLayout from "../../Layouts/AppLayout.vue"
+import TableCards from './DataTable/Index.vue'
+import { NInput, NFlex, NDivider, NDatePicker } from 'naive-ui'
+
+const props = defineProps({
+    cards: {
+        type: Array,
+        default: []
+    }
+})
+</script>
+
+<template>
+    <AppLayout>
+        <template #header>
+            <NFlex class="py-4" align="center" :wrap="false">
+                <NInput placeholder="Поиск по ФИО, № карты" />
+                <NDivider vertical />
+                <NDatePicker type="daterange" clearable start-placeholder="Дата выписки с" end-placeholder="по" />
+            </NFlex>
+        </template>
+        <TableCards :data="cards.data" min-height="calc(100vh - 136px)" max-height="calc(100vh - 136px)" />
+    </AppLayout>
+</template>
+
+<style scoped>
+
+</style>