117 lines
4.4 KiB
Vue
117 lines
4.4 KiB
Vue
<script setup>
|
||
import AppLayout from "../../Layouts/AppLayout.vue"
|
||
import TableCards from './DataTable/Index.vue'
|
||
import ArchiveHistoryCreateModal from './ArchiveHistoryCreateModal/Index.vue'
|
||
import { NInput, NFlex, NDivider, NDatePicker, NSpace, NFormItem, NRadioButton, NH1, NTabs, NButton, NSelect } from 'naive-ui'
|
||
import {useMedicalHistoryFilter} from "../../Composables/useMedicalHistoryFilter.js";
|
||
import {ref} from "vue";
|
||
|
||
const props = defineProps({
|
||
cards: {
|
||
type: Array,
|
||
default: []
|
||
},
|
||
statuses: {
|
||
type: Array,
|
||
default: []
|
||
},
|
||
filters: {
|
||
type: Array,
|
||
default: []
|
||
}
|
||
})
|
||
|
||
const ArchiveHistoryCreateModalShow = ref(false)
|
||
const {
|
||
isLoading, applyFilters, filtersRef, handleSearch, dateRange, searchValue,
|
||
statusValue, handleDateRangeChange, handleViewTypeChange, handleStatusChange
|
||
} = useMedicalHistoryFilter(props.filters)
|
||
|
||
const viewType = ref('archive')
|
||
const searchRef = ref()
|
||
|
||
const onHandleSearch = (search) => {
|
||
handleSearch(search)
|
||
}
|
||
|
||
const handleBeforeLeave = (tabName) => {
|
||
handleViewTypeChange(tabName)
|
||
return true
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<AppLayout>
|
||
<template #header>
|
||
<NSpace vertical>
|
||
<NFlex class="pb-4" align="center" :wrap="false">
|
||
<NFormItem class="w-[720px]" label="Поиск" :show-feedback="false">
|
||
<NInput placeholder="Поиск по ФИО, № карты"
|
||
autofocus
|
||
ref="searchRef"
|
||
clearable
|
||
v-model:value="searchValue"
|
||
@update:value="val => onHandleSearch(val)"
|
||
size="large"
|
||
:loading="isLoading"
|
||
:disabled="isLoading"
|
||
/>
|
||
</NFormItem>
|
||
<div class="mt-6">
|
||
<NDivider vertical />
|
||
</div>
|
||
<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"
|
||
:disabled="isLoading"
|
||
/>
|
||
</NFormItem>
|
||
<NFormItem class="w-[340px]" label="Статус карты" :show-feedback="false">
|
||
<NSelect :options="statuses"
|
||
:value="statusValue"
|
||
@update:value="val => handleStatusChange(val)"
|
||
clearable
|
||
size="large"
|
||
:loading="isLoading"
|
||
:disabled="isLoading"
|
||
/>
|
||
</NFormItem>
|
||
<div class="mt-6">
|
||
<NDivider vertical />
|
||
</div>
|
||
<NFormItem class="w-[340px]" :show-feedback="false">
|
||
<NButton type="primary"
|
||
@click="ArchiveHistoryCreateModalShow = true"
|
||
secondary
|
||
size="large"
|
||
:loading="isLoading"
|
||
:disabled="isLoading"
|
||
>
|
||
Добавить карту в архив
|
||
</NButton>
|
||
</NFormItem>
|
||
</NFlex>
|
||
</NSpace>
|
||
</template>
|
||
<TableCards :filters="filters"
|
||
:data="cards.data"
|
||
:meta="cards.meta"
|
||
min-height="calc(100vh - 212px)"
|
||
max-height="calc(100vh - 320px)"
|
||
/>
|
||
<ArchiveHistoryCreateModal v-model:open="ArchiveHistoryCreateModalShow" />
|
||
</AppLayout>
|
||
</template>
|
||
|
||
<style scoped>
|
||
:deep(.n-tabs .n-tabs-nav) {
|
||
max-width: 420px;
|
||
}
|
||
</style>
|