onboard/resources/js/Pages/Nurse/Report/Index.vue

<script setup>
import AppLayout from "../../../Layouts/AppLayout.vue";
import {NFlex, NTag, NDataTable, NButton, NTabs, NTabPane} from 'naive-ui'
import AppContainer from "../../../Components/AppContainer.vue";
import AppPanel from "../../../Components/AppPanel.vue";
import DatePickerQuery from "../../../Components/DatePickerQuery.vue";
import UrgencyBadge from "../../../Components/UrgencyBadge.vue";
import {h, ref, shallowRef} from "vue"
import {TbCirclePlus, TbPencil} from 'vue-icons-plus/tb'
import {useAuthStore} from "../../../Stores/auth.js";
import AddMedicalHistoryModal from "../Components/AddMedicalHistoryModal.vue";
import EditMedicalHistoryModal from "../Components/EditMedicalHistoryModal.vue";

const props = defineProps({
    inDepartmentHistories: {
        type: Array,
        default: []
    },
    recipientHistories: {
        type: Array,
        default: []
    },
    dischargedHistories: {
        type: Array,
        default: []
    },
    deceasedHistories: {
        type: Array,
        default: []
    },
    transferredHistories: {
        type: Array,
        default: []
    },
    dates: {
        type: Array,
        default: []
    }
})

const showAddMedicalHistoryModal = shallowRef(false)
const showEditMedicalHistoryModal = shallowRef(false)
const editHistoryId = ref(null)
const authStore = useAuthStore()
const userDepartment = authStore.userDepartment

const columns = [
    {
        title: 'ФИО',
        key: 'full_name',
        minWidth: 280,
        maxWidth: 400,
        resizable: true
    },
    {
        title: 'Дата поступления',
        key: 'latest_migration.ingoing_date',
        minWidth: 180,
        maxWidth: 180,
        width: 180,
        resizable: false
    },
    {
        title: 'Срочность',
        key: 'urgency_id',
        render: (row) => {
            return h(UrgencyBadge, {urgencyId: row.urgency_id})
        }
    },
    {
        title: '',
        key: 'actions',
        align: 'end',
        render: (row) => {
            return h(
                NButton, { size: 'tiny', type: 'default', secondary: true, onClick: () => onClickEditButton(row.id) },
                { default: () => 'Редактировать', icon: () => h(TbPencil, { size: '18px' }) })
        }
    }
]

const onClickEditButton = (historyId) => {
    showEditMedicalHistoryModal.value = true
    editHistoryId.value = historyId
}

const submit = () => {
    // TODO: сохранение отчета и пациентов
}

const formattedLabel = (word, count) => {
    return `${word} (${count})`
}
</script>

<template>
    <AppLayout>
        <AppContainer>
            <AppPanel>
                <NFlex justify="space-between" align="center">
                    <NTag type="info" :bordered="false">
                        {{ userDepartment.name_full }}
                    </NTag>
                    <DatePickerQuery :date="dates" class="text-lg!" />
                </NFlex>
            </AppPanel>
            <AppPanel header="Пациенты в отделении" header-include-body>
                <template #header-extra>
                    <NButton secondary @click="showAddMedicalHistoryModal = true">
                        <template #icon>
                            <TbCirclePlus />
                        </template>
                        Добавить пациента
                    </NButton>
                </template>
                <NTabs type="line">
                    <NTabPane name="all"
                              :tab="formattedLabel('В отделении', inDepartmentHistories.length)"
                    >
                        <NDataTable :columns="columns"
                                    :data="inDepartmentHistories"
                                    table-layout="fixed"
                                    max-height="calc(100vh - 435px)"
                                    min-height="calc(100vh - 435px)"
                        />
                    </NTabPane>
                    <NTabPane name="income" :tab="formattedLabel('Поступившие', recipientHistories.length)">
                        <NDataTable :columns="columns"
                                    :data="recipientHistories"
                                    table-layout="fixed"
                                    max-height="calc(100vh - 435px)"
                                    min-height="calc(100vh - 435px)"
                        />
                    </NTabPane>
                    <NTabPane name="outcome" :tab="formattedLabel('Выписанные', dischargedHistories.length)">
                        <NDataTable :columns="columns"
                                    :data="dischargedHistories"
                                    table-layout="fixed"
                                    max-height="calc(100vh - 435px)"
                                    min-height="calc(100vh - 435px)"
                        />
                    </NTabPane>
                    <NTabPane name="dead" :tab="formattedLabel('Умершие', deceasedHistories.length)">
                        <NDataTable :columns="columns"
                                    :data="deceasedHistories"
                                    table-layout="fixed"
                                    max-height="calc(100vh - 435px)"
                                    min-height="calc(100vh - 435px)"
                        />
                    </NTabPane>
                    <NTabPane name="transfer" :tab="formattedLabel('Переведенные', transferredHistories.length)">
                        <NDataTable :columns="columns"
                                    :data="transferredHistories"
                                    table-layout="fixed"
                                    max-height="calc(100vh - 435px)"
                                    min-height="calc(100vh - 435px)"
                        />
                    </NTabPane>
                </NTabs>
            </AppPanel>
            <NButton secondary size="large">
                Сохранить отчет
            </NButton>
        </AppContainer>
        <AddMedicalHistoryModal v-model:show="showAddMedicalHistoryModal" />
        <EditMedicalHistoryModal v-model:show="showEditMedicalHistoryModal" :history-id="editHistoryId" />
    </AppLayout>
</template>

<style scoped>
:deep(.n-data-table-th),
:deep(.n-data-table-td) {
    font-size: var(--n-font-size);
}
</style>