onboard/resources/js/Pages/Nurse/Components/AddMedicalHistoryModal.vue

<script setup>
import {NModal, NSteps, NStep, NTabs, NTabPane, NFlex, NGrid, NGi, NButton, NRadioGroup, NSelect, NInput, NFormItemGi, NDatePicker} from 'naive-ui'
import {computed, ref, watch} from "vue";
import AppRadio from "../../../Components/AppRadio.vue";
import {useDebounceFn} from "@vueuse/core";
import {format} from "date-fns";
const show = defineModel('show', { default: false })

const currentStep = ref(1)
const currentStatus = ref('process')
const isFinallyStep = computed(() => currentStep.value === 2)
const disableFillable = ref(false)

const form = ref({
    patient_source: 'mis',
    id: null,
    medical_card_number: null,
    full_name: '',
    urgency_id: 1,
    visit_result_id: 0,
    birth_date: null,
    recipient_date: new Date(),
    death_date: null,
    extract_date: null
})

const resetForm = () => {
    form.value = {
        ...form.value,
        id: null,
        medical_card_number: null,
        full_name: '',
        urgency_id: 1,
        visit_result_id: 0,
        birth_date: null,
        recipient_date: new Date(),
        death_date: null,
        extract_date: null
    }
}

const urgencyOptions = [
    {
        label: '0 - Не определено',
        value: 0
    },
    {
        label: '1 - Планово',
        value: 1
    },
    {
        label: '2 - Экстренно',
        value: 2
    }
]
const visitResultOptions = [
    {
        label: '0 - Не определено',
        value: 0
    },
    {
        label: '1 - Выписан',
        value: 1
    }
]

const prev = () => {
    if (currentStep.value === 0)
        currentStep.value = null
    else currentStep.value--
}

const next = () => {
    if (currentStep.value === null)
        currentStep.value = 1
    else currentStep.value++
}

const submit = () => {
    axios.post('/api/nurse/patients', {
        ...form.value
    }).then(res => {
        console.log(res)
    })
}

const searchOptions = ref([])

const debounceSearch = useDebounceFn((s) => {
    if (s.length === 0 || s.length === 1) return
    search(s)
}, 1000)

const search = (search) => {
    axios.post('/api/nurse/patients/search', {
        search
    }).then(res => {
        searchOptions.value = res.data
    })
}

const onChangeSearch = (historyId) => {
    axios.get(`/api/nurse/patients/${historyId}`).then(res => {
        form.value.medical_card_number = res.data.medical_card_number
        form.value.full_name = res.data.full_name
        form.value.urgency_id = res.data.urgency_id
        form.value.visit_result_id = res.data.visit_result_id

        form.value.birth_date = res.data.birth_date ? format(new Date(res.data.birth_date), 'yyyy-MM-dd HH:mm:ss') : null
        form.value.death_date = res.data.death_date ? format(new Date(res.data.death_date), 'yyyy-MM-dd HH:mm:ss') : null
        form.value.extract_date = res.data.extract_date ? format(new Date(res.data.extract_date), 'yyyy-MM-dd HH:mm:ss') : null
        form.value.recipient_date = res.data.recipient_date ? format(new Date(res.data.recipient_date), 'yyyy-MM-dd HH:mm:ss') : null
    })
}

watch(() => currentStep.value, (val) => {
    if (val === 1) resetForm()
})
</script>

<template>
    <NModal v-model:show="show"
            segmented
            preset="card"
            title="Добавление пациента"
            class="max-w-xl min-h-[500px]"
            draggable
    >
        <NSteps size="small" :current="currentStep" :status="currentStatus">
            <NStep title="Тип пациента" description="Укажите тип пациента" />
            <NStep title="Добавление пациента" description="Заполните базовую информацию" />
        </NSteps>
        <NTabs tab-class="hidden!" :value="currentStep">
            <NTabPane :name="1" class="mt-4">
                <NRadioGroup class="w-full space-y-2!" v-model:value="form.patient_source">
                    <AppRadio title="МИС" value="mis" description="Выберите, если пациента можно найти в системе МИС" />
                    <AppRadio title="Спец. контингент" value="special" description="Выберите, если пациента нет в системе МИС" />
                </NRadioGroup>
            </NTabPane>
            <NTabPane :name="2">
                <NGrid cols="2" x-gap="8">
                    <NFormItemGi v-if="form.patient_source === 'mis'" span="2" label="Поиск пациента">
                        <NSelect v-model:value="form.id"
                                 filterable
                                 placeholder="Найти пациента по ФИО"
                                 remote
                                 :options="searchOptions"
                                 @search="debounceSearch"
                                 @change="onChangeSearch"
                        />
                    </NFormItemGi>
                    <NFormItemGi span="2" label="ФИО">
                        <NInput v-model:value="form.full_name" placeholder="Иванов Иван Иванович" />
                    </NFormItemGi>
                    <NFormItemGi span="2" label="№ карты">
                        <NInput v-model:value="form.medical_card_number" />
                    </NFormItemGi>

                    <NFormItemGi span="1" label="Срочность">
                        <NSelect filterable v-model:value="form.urgency_id" :options="urgencyOptions" />
                    </NFormItemGi>
                    <NFormItemGi span="1" label="Исход госпитализации">
                        <NSelect filterable v-model:value="form.visit_result_id" :options="visitResultOptions" />
                    </NFormItemGi>
                    <NFormItemGi span="1" label="Дата рождения">
                        <NDatePicker v-model:value="form.birth_date" class="w-full" value-format="yyyy-MM-dd" />
                    </NFormItemGi>
                    <NFormItemGi span="1" label="Дата и время госпитализации">
                        <NDatePicker v-model:value="form.recipient_date" type="datetime" class="w-full" value-format="yyyy-MM-dd HH:mm:ss" />
                    </NFormItemGi>
                    <NFormItemGi span="1" label="Дата и время выписки">
                        <NDatePicker v-model:value="form.extract_date" type="datetime" class="w-full" value-format="yyyy-MM-dd HH:mm:ss" />
                    </NFormItemGi>
                    <NFormItemGi span="1" label="Дата и время смерти">
                        <NDatePicker v-model:value="form.death_date" type="datetime" class="w-full" value-format="yyyy-MM-dd HH:mm:ss" />
                    </NFormItemGi>
                </NGrid>
            </NTabPane>
        </NTabs>
        <template #action>
            <NGrid cols="2" justify="space-between">
                <NGi>
                    <NButton v-if="currentStep > 1" secondary @click="prev">
                        Назад
                    </NButton>
                </NGi>
                <NGi>
                    <NFlex justify="end">
                        <NButton v-if="isFinallyStep" secondary type="primary" @click="submit">
                            Добавить
                        </NButton>
                        <NButton v-else secondary type="primary" @click="next">
                            Далее
                        </NButton>
                    </NFlex>
                </NGi>
            </NGrid>
        </template>
    </NModal>
</template>

<style scoped>

</style>