42 lines
1.2 KiB
Vue
42 lines
1.2 KiB
Vue
<script setup>
|
||
import AppLayout from "../../Layouts/AppLayout.vue"
|
||
import TableCards from './DataTable/Index.vue'
|
||
import { NInput, NFlex, NDivider, NDatePicker } from 'naive-ui'
|
||
import {useMedicalHistory} from "../../Composables/useMedicalHistory.js";
|
||
import {useDebounceFn} from "@vueuse/core";
|
||
|
||
const props = defineProps({
|
||
cards: {
|
||
type: Array,
|
||
default: []
|
||
}
|
||
})
|
||
|
||
const { navigate } = useMedicalHistory('/')
|
||
|
||
const search = (value) => {
|
||
navigate(value)
|
||
}
|
||
|
||
const debounceSearch = useDebounceFn((searchValue) => {
|
||
search(searchValue)
|
||
}, 500)
|
||
</script>
|
||
|
||
<template>
|
||
<AppLayout>
|
||
<template #header>
|
||
<NFlex class="py-4" align="center" :wrap="false">
|
||
<NInput placeholder="Поиск по ФИО, № карты" @update:value="val => debounceSearch(val)"/>
|
||
<NDivider vertical />
|
||
<NDatePicker type="daterange" clearable format="dd.MM.yyyy" start-placeholder="Дата выписки с" end-placeholder="по" />
|
||
</NFlex>
|
||
</template>
|
||
<TableCards :data="cards.data" :meta="cards.meta" min-height="calc(100vh - 179px)" max-height="calc(100vh - 196px)" />
|
||
</AppLayout>
|
||
</template>
|
||
|
||
<style scoped>
|
||
|
||
</style>
|