kartoteka/resources/js/Pages/Home/ArchiveHistoryModal/Index.vue

<script setup>
import { NModal, NDataTable, NSpace, NFlex, NButton, NForm, NFormItem, NInput, NDatePicker, NDivider, NSwitch, NTag } from 'naive-ui'
import ArchiveHistoryMoveModal from '../ArchiveHistoryMoveModal/Index.vue'
import {ref, watch} from "vue";

const open = defineModel('open')
const props = defineProps({
    patientId: {
        type: Number,
    }
})

const loading = ref(true)
const patient = ref({})
const showArchiveHistoryModal = ref(false)
const selectedArchiveHistoryId = ref(null)


const patientData = ref({
    ...patient.value.info
})

const loadPatientData = async () => {
    if (!props.patientId) return

    loading.value = true
    try {
        axios.get(`/api/si/patients/${props.patientId}`).then(res => {
            patient.value = res.data
            patientData.value = res.data.info
        })
    } catch (error) {
        // message.error('Ошибка при загрузке данных пациента')
        console.error(error)
    } finally {
        loading.value = false
    }
}

const onShowArchiveHistoryModal = (id) => {
    selectedArchiveHistoryId.value = id
    showArchiveHistoryModal.value = true
}

const columns = [
    {
        title: 'Выдача',
        key: 'issue_at',
        width: 100
    },
    {
        title: 'Возврат',
        key: 'return_at',
        width: 100
    },
    {
        title: 'Организация',
        key: 'org',
        width: 220
    },
    {
        title: 'ФИО',
        key: 'employee_name',
        width: 180
    },
    {
        title: 'Должность',
        key: 'employee_post',
        width: 120
    },
]
const rowProps = (row) => ({
    onDblclick: () => {
        onShowArchiveHistoryModal(row.id)
    }
})

// Наблюдаем за изменением patientId
watch(() => props.patientId, (newId) => {
    if (newId) {
        loadPatientData()
    }
}, { immediate: true })
</script>

<template>
    <NModal v-model:show="open" preset="card" class="max-w-4xl" closable @close="open = false">
        <template #header>
            {{ patient.info?.medcardnum }} {{ patient.info?.family }} {{ patient.info?.name }} {{ patient.info?.ot }}
        </template>
        <NSpace vertical>
            <NFlex inline justify="space-between" align="center" :wrap="false">
                <NForm inline :show-feedback="false">
                    <NFormItem label="Статус карты">
                        <NTag type="default" :bordered="false" round>
                            Не определен
                        </NTag>
                    </NFormItem>
                    <NFormItem label="№ в архиве">
                        <NInput v-model:value="patientData.narhiv" />
                    </NFormItem>
                    <NFormItem label="Дата поступления карты в архив">
                        <NDatePicker v-model:value="patientData.datearhiv" format="dd.MM.yyyy" />
                    </NFormItem>
                </NForm>
            </NFlex>
            <NButton @click="onShowArchiveHistoryModal(null)">
                Добавить
            </NButton>
            <NDataTable :row-props="rowProps" min-height="420px" max-height="420px" :columns="columns" :data="patient?.journal" />
        </NSpace>
        <template #action>
            <NFlex justify="end" align="center">
                <NSpace align="center" :size="0">
                    <NButton secondary>
                        Закрыть без сохранения
                    </NButton>
                    <NDivider vertical />
                    <NButton secondary type="primary">
                        Сохранить
                    </NButton>
                </NSpace>
            </NFlex>
        </template>
    </NModal>
    <ArchiveHistoryMoveModal @close-without-save="selectedArchiveHistoryId = null" v-model:open="showArchiveHistoryModal" :archive-history-id="selectedArchiveHistoryId" />
</template>

<style scoped>

</style>