80 lines
3.4 KiB
Vue
80 lines
3.4 KiB
Vue
<script setup>
|
||
import AppLayout from "../../Layouts/AppLayout.vue"
|
||
import TableCards from './DataTable/Index.vue'
|
||
import { NInput, NFlex, NDivider, NDatePicker, NSpace, NFormItem, NRadioButton, NH1, NTabs, NTabPane, NSelect } from 'naive-ui'
|
||
import {useMedicalHistory} from "../../Composables/useMedicalHistory.js";
|
||
import {useDebounceFn} from "@vueuse/core";
|
||
import {useMedicalHistoryFilter} from "../../Composables/useMedicalHistoryFilter.js";
|
||
import {computed, ref} from "vue";
|
||
|
||
const props = defineProps({
|
||
cards: {
|
||
type: Array,
|
||
default: []
|
||
},
|
||
statuses: {
|
||
type: Array,
|
||
default: []
|
||
},
|
||
filters: {
|
||
type: Array,
|
||
default: []
|
||
}
|
||
})
|
||
|
||
const {
|
||
isLoading, applyFilters, filtersRef, handleSearch, dateRange, searchValue,
|
||
handleDateRangeChange, handleViewTypeChange, handleStatusChange
|
||
} = useMedicalHistoryFilter(props.filters)
|
||
|
||
const viewType = ref('archive')
|
||
|
||
const handleBeforeLeave = (tabName) => {
|
||
handleViewTypeChange(tabName)
|
||
return true
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<AppLayout>
|
||
<template #header>
|
||
<NSpace vertical>
|
||
<!-- <NH1 class="!my-0 mb-5">-->
|
||
<!-- Архив-->
|
||
<!-- </NH1>-->
|
||
<!-- <NRadioGroup v-model:value="viewType" @update:value="val => handleViewTypeChange(val)">-->
|
||
<!-- <NRadioButton value="archive">Архив</NRadioButton>-->
|
||
<!-- <NRadioButton value="mis">МИС</NRadioButton>-->
|
||
<!-- <NRadioButton value="softinfo">СофтИнфо</NRadioButton>-->
|
||
<!-- </NRadioGroup>-->
|
||
<NFlex class="pb-4" align="center" :wrap="false">
|
||
<NFormItem class="w-[720px]" label="Поиск" :show-feedback="false">
|
||
<NInput placeholder="Поиск по ФИО, № карты" v-model:value="searchValue" @update:value="val => handleSearch(val)" size="large" />
|
||
</NFormItem>
|
||
<NDivider vertical />
|
||
<NFormItem class="w-[340px]" label="Дата выписки" :show-feedback="false">
|
||
<NDatePicker v-model:value="dateRange" @update:value="handleDateRangeChange" type="daterange" clearable format="dd.MM.yyyy" start-placeholder="Дата выписки с" end-placeholder="по" size="large" />
|
||
</NFormItem>
|
||
<NFormItem class="w-[340px]" label="Статус карты" :show-feedback="false">
|
||
<NSelect :options="statuses" @update:value="val => handleStatusChange(val)" clearable size="large" />
|
||
</NFormItem>
|
||
</NFlex>
|
||
</NSpace>
|
||
</template>
|
||
<NTabs :value="filtersRef.view_type" type="segment" animated @before-leave="handleBeforeLeave">
|
||
<NTabPane name="si" :tab="`СофтИнфо (${cards.si?.meta.total})`">
|
||
<TableCards :filters="filters" :data="cards.si?.data" :meta="cards.si?.meta" min-height="calc(100vh - 286px)" max-height="calc(100vh - 320px)" />
|
||
</NTabPane>
|
||
<NTabPane name="mis" :tab="`МИС (${cards.mis?.meta.total})`">
|
||
<TableCards :filters="filters" :data="cards.mis?.data" :meta="cards.mis?.meta" min-height="calc(100vh - 286px)" max-height="calc(100vh - 320px)" />
|
||
</NTabPane>
|
||
</NTabs>
|
||
</AppLayout>
|
||
</template>
|
||
|
||
<style scoped>
|
||
:deep(.n-tabs .n-tabs-nav) {
|
||
max-width: 420px;
|
||
}
|
||
</style>
|