* восстановление окна наблюдения

* добавил получение выбывших * фильтрация выбывших по результатам лечения * добавил подсказку при наведении на операции * добавил вывод причины наблюдения * добавил вкладки для выбывших * изменил связь и сохранение пациентов на контроле * добавил возможность редактирования причины контроля * полное изменение окна с нежелательными событиями * исправил просмотр причины контроля * работа над окном редактирования причины контроля в таблице * визуальное выделение умерших и проведенных операций * добавил выбор даты для роли врач * центрирование блоков статистики * разделение выполненных операций на срочность * поправил метод определения текущего дня для роли врач * функция блокировки при выборе другой даты для роли врач
2026-01-29 16:42:42 +09:00
parent cb43c74a72
commit 87e21f0e08
24 changed files with 2065 additions and 501 deletions
--- a/resources/js/Components/ReportSelectDate.vue
+++ b/resources/js/Components/ReportSelectDate.vue
@@ -2,34 +2,158 @@
 import {NDatePicker} from 'naive-ui'
 import {storeToRefs} from "pinia";
 import {useReportStore} from "../Stores/report.js";
-
-const themeOverride = {
-    peers: {
-        Input: {
-            border: null,
-            color: null,
-            colorFocus: null,
-            borderHover: null,
-            borderFocus: null,
-            boxShadowFocus: null,
-            paddingMedium: ''
-        }
-    }
-}
+import {useAuthStore} from "../Stores/auth.js";
+import {computed, ref, onMounted, onUnmounted} from "vue";

 const reportStore = useReportStore()
-const { timestampCurrentRange } = storeToRefs(reportStore)
+const authStore = useAuthStore()
+const {timestampCurrentRange} = storeToRefs(reportStore)
+
+// Текущее время для обновления
+const currentTime = ref(Date.now())
+
+// Обновляем время каждую секунду
+let intervalId = null
+onMounted(() => {
+    if (authStore.isDoctor) {
+        intervalId = setInterval(() => {
+            currentTime.value = Date.now()
+        }, 1000)
+    }
+})
+
+onUnmounted(() => {
+    if (intervalId) {
+        clearInterval(intervalId)
+    }
+})
+
+// Проверяем, является ли дата сегодняшней
+const isToday = (timestamp) => {
+    const date = new Date(timestamp)
+    const today = new Date()
+
+    return date.getDate() === today.getDate() &&
+        date.getMonth() === today.getMonth() &&
+        date.getFullYear() === today.getFullYear()
+}
+
+// Функция для форматирования с заглавной буквой
+const formatDateWithCapital = (timestamp) => {
+    const date = new Date(timestamp)
+    // Форматируем дату на русском
+    const formatted = date.toLocaleDateString('ru-RU', {
+        weekday: 'long',
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric'
+    })
+    // Делаем первую букву заглавной
+    return formatted.charAt(0).toUpperCase() + formatted.slice(1)
+}
+
+const themeOverride = computed(() => {
+    if (authStore.isDoctor) {
+        return {
+            peers: {
+                Input: {
+                    border: '',
+                    borderHover: '',
+                    borderFocus: '',
+                    boxShadowFocus: '',
+                    color: '',
+                    colorFocus: '',
+                    fontSizeMedium: '22px',
+                    fontWeight: '500'
+                }
+            }
+        }
+    }
+})
+
+// Используем кастомную функцию форматирования
+const formatComputed = computed(() => {
+    const baseFormat = "dd.MM.yyyy"
+
+    if (authStore.isDoctor) {
+        // Возвращаем функцию форматирования вместо строки
+        return formatDateWithCapital(modelComputed.value)
+    }
+
+    return baseFormat
+})
+
+const typeComputed = computed(() => authStore.isDoctor ? 'date' : 'daterange')
+
+const modelComputed = computed({
+    get: () => {
+        const value = reportStore.timestampCurrentRange
+
+        if (authStore.isDoctor) {
+            if (Array.isArray(value)) {
+                const doctorTimestamp = value[1]
+
+                // Если выбрана сегодняшняя дата - показываем текущее время
+                if (isToday(doctorTimestamp)) {
+                    return currentTime.value
+                }
+                // Иначе показываем выбранную дату (без обновления)
+                return doctorTimestamp
+            }
+            return value
+        }
+
+        if (Array.isArray(value)) {
+            return value
+        } else {
+            return [value, value]
+        }
+    },
+    set: (value) => {
+        if (Array.isArray(value)) {
+            reportStore.timestampCurrentRange = value
+        } else {
+            reportStore.timestampCurrentRange = [value, value]
+        }
+
+        reportStore.getDataOnReportDate(reportStore.timestampCurrentRange)
+    }
+})
+
+const classComputed = computed(() => {
+    const baseClasses = []
+
+    if (authStore.isDoctor) {
+        baseClasses.push('w-[400px]')
+        baseClasses.push('text-end')
+    } else {
+        baseClasses.push('max-w-[280px]')
+    }
+
+    return baseClasses
+})
 </script>

 <template>
-    <NDatePicker :theme-overrides="themeOverride"
-                 v-model:value="reportStore.timestampCurrentRange"
-                 format="dd.MM.YYYY"
-                 type="daterange"
-                 @update-value="value => reportStore.getDataOnReportDate(value)"
+    <NDatePicker
+        :theme-overrides="themeOverride"
+        v-model:value="modelComputed"
+        :class="classComputed"
+        :format="formatComputed"
+        :type="typeComputed"
+        placement="top-end"
+        input-readonly
+        bind-calendar-months
+        update-value-on-close
    />
 </template>

 <style scoped>
-
+:deep(.n-input__suffix) {
+    margin-left: 12px;
+}
+:deep(.n-input),
+:deep(.n-input__input-el) {
+    cursor: pointer !important;
+}
 </style>
--- a/resources/js/Pages/Report/Components/MoveModalComment.vue
+++ b/resources/js/Pages/Report/Components/MoveModalComment.vue
@@ -0,0 +1,56 @@
+<script setup>
+import {NModal, NForm, NFormItem, NInput, NButton} from 'naive-ui'
+import {useReportStore} from "../../../Stores/report.js";
+import {ref, watch} from "vue";
+const show = defineModel('show')
+const props = defineProps({
+    patientId: {
+        type: Number,
+        default: null
+    }
+})
+const reportStore = useReportStore()
+const droppedPatient = ref(null)
+
+const rules = {
+    comment: {
+        required: true,
+        trigger: ['blur'],
+        message: 'Введите описание причины'
+    }
+}
+watch(() => props.patientId, (newPatientId) => {
+    if (newPatientId) {
+        const patientIndex = reportStore.patientsData.observation.findIndex(itm => itm.id === newPatientId)
+        const patient = reportStore.patientsData.observation[patientIndex]
+        droppedPatient.value = patient
+    }
+})
+</script>
+
+<template>
+    <NModal v-model:show="show"
+            title="Постановка на контроль"
+            :mask-closable="false"
+            :closable="false"
+            class="max-w-lg"
+            preset="card"
+    >
+        <NForm :model="droppedPatient" :rules="rules">
+            <NFormItem label="Опишите причину" path="comment">
+                <NInput type="textarea" :rows="6" :resizable="false" v-model:value="droppedPatient.comment" />
+            </NFormItem>
+        </NForm>
+        <template #action>
+            <div class="flex justify-end">
+                <NButton type="primary" secondary @click="show = false">
+                    Сохранить
+                </NButton>
+            </div>
+        </template>
+    </NModal>
+</template>
+
+<style scoped>
+
+</style>
--- a/resources/js/Pages/Report/Components/ReportForm.vue
+++ b/resources/js/Pages/Report/Components/ReportForm.vue
@@ -5,6 +5,7 @@ import ReportFormInput from "./ReportFormInput.vue";
 import ReportSection from "./ReportSection.vue";
 import {useReportStore} from "../../../Stores/report.js";
 import {useAuthStore} from "../../../Stores/auth.js";
+import {computed} from "vue";

 const props = defineProps({
    mode: {
@@ -21,17 +22,19 @@ const onSubmit = () => {
        departmentId: authStore.userDepartment.department_id
    })
 }
+
+
 </script>

 <template>
    <NFlex vertical class="max-w-6xl mx-auto mt-6 mb-4 w-full">
        <ReportHeader :mode="mode" />

-        <ReportFormInput v-if="mode === 'fillable'" />
+        <ReportFormInput />

        <ReportSection label="Планово" />

-        <NButton secondary size="large" @click="onSubmit">
+        <NButton v-if="reportStore.reportInfo?.report.isActiveSendButton" secondary size="large" @click="onSubmit">
            Сохранить отчет
        </NButton>
    </NFlex>
--- a/resources/js/Pages/Report/Components/ReportFormInput.vue
+++ b/resources/js/Pages/Report/Components/ReportFormInput.vue
@@ -1,30 +1,69 @@
 <script setup>
-import {NCard, NSkeleton, NFlex, NFormItem, NForm, NInputNumber} from "naive-ui";
+import {NCard, NSkeleton, NSpace, NFlex, NFormItem, NForm, NInputNumber, NStatistic} from "naive-ui";
 import {useReportStore} from "../../../Stores/report.js";
+import {useAuthStore} from "../../../Stores/auth.js";

 const reportStore = useReportStore()
+const authStore = useAuthStore()
 </script>

 <template>
-    <NCard>
-        <NForm>
-            <NFlex>
+    <div class="grid grid-cols-[1fr_auto] gap-x-3">
+        <NCard v-if="reportStore.reportInfo?.report.isActiveSendButton">
+            <NForm>
                <template v-if="reportStore.isLoadReportInfo">
-                    <NSkeleton class="w-[246px]! h-[60px]!" />
-                    <NSkeleton class="w-[246px]! h-[60px]!" />
-                    <NSkeleton class="w-[246px]! h-[60px]!" />
+                    <NFlex>
+                        <NSkeleton class="rounded-md w-[246px]! h-[65px]!" />
+                        <NSkeleton class="rounded-md w-[246px]! h-[65px]!" />
+                        <NSkeleton class="rounded-md w-[246px]! h-[65px]!" />
+                    </NFlex>
                </template>
-                <template v-for="metrikaItem in reportStore.reportInfo?.metrikaItems">
-                    <NFormItem :label="metrikaItem.name" :show-feedback="false">
-                        <NInputNumber v-model:value="reportStore.reportForm[`metrika_item_${metrikaItem.metrika_item_id}`]"
-                                      :default-value="metrikaItem.default_value" />
-                    </NFormItem>
-                </template>
-            </NFlex>
-        </NForm>
-    </NCard>
+                <NFlex v-else justify="space-between" align="center">
+                    <NSpace>
+                        <template v-for="metrikaItem in reportStore.reportInfo?.metrikaItems">
+                            <NFormItem :label="metrikaItem.name" :show-feedback="false">
+                                <NInputNumber v-model:value="reportStore.reportForm[`metrika_item_${metrikaItem.metrika_item_id}`]"
+                                              :default-value="metrikaItem.default_value" />
+                            </NFormItem>
+                        </template>
+                    </NSpace>
+                </NFlex>
+            </NForm>
+        </NCard>
+        <NSpace :wrap="false">
+            <NCard class="min-w-[120px] max-w-[120px] min-h-[100px] max-h-[102px] h-full"
+                   style="--n-padding-top: 0; --n-padding-left: 0; --n-padding-bottom: 0; --n-padding-right: 0;"
+            >
+                <div class="w-full h-full flex flex items-center justify-center">
+                    <NStatistic label="Умерло" :value="reportStore.reportInfo?.department.deadCount" />
+                </div>
+            </NCard>
+            <NCard class="min-w-[120px] max-w-[120px] min-h-[100px] max-h-[102px] h-full"
+                   style="--n-padding-top: 0; --n-padding-bottom: 0; --n-padding-left: 8px; --n-padding-right: 8px;">
+                <div class="w-full h-full flex flex items-center justify-center">
+                    <NStatistic :value="reportStore.reportInfo?.department.surgicalCount[1]">
+                        <template #label>
+                            <div class="flex flex-col">
+                                <span>Операций</span>
+                                <span>Э / П</span>
+                            </div>
+                        </template>
+                        <template #suffix>
+                            / {{ reportStore.reportInfo?.department.surgicalCount[0] }}
+                        </template>
+                    </NStatistic>
+                </div>
+            </NCard>
+        </NSpace>
+    </div>
 </template>

 <style scoped>
-
+:deep(.n-statistic__label),
+:deep(.n-statistic-value__content) {
+    @apply text-center;
+}
+:deep(.n-statistic-value) {
+    @apply flex justify-center items-center;
+}
 </style>
--- a/resources/js/Pages/Report/Components/ReportHeader.vue
+++ b/resources/js/Pages/Report/Components/ReportHeader.vue
@@ -7,6 +7,7 @@ import {ru} from "date-fns/locale";
 import {useAuthStore} from "../../../Stores/auth.js";
 import {storeToRefs} from "pinia";
 import {RiAddCircleLine} from 'vue-icons-plus/ri'
+import {TbAlertCircle} from 'vue-icons-plus/tb'
 import {useReportStore} from "../../../Stores/report.js";
 import ReportSelectDate from "../../../Components/ReportSelectDate.vue";
 import DepartmentSelect from "../../../Components/DepartmentSelect.vue";
@@ -53,19 +54,16 @@ const currentDate = computed(() => {
 <template>
    <NCard>
        <NFlex vertical>
-            <NFlex align="center" justify="space-between" :wrap="false">
+            <div class="grid grid-cols-[auto_1fr_auto] items-center">
                <NTag v-if="isFillableMode" type="info" :bordered="false">
                    {{ authStore.userDepartment.name_full }}
                </NTag>
                <DepartmentSelect v-if="isReadonlyMode" />

-                <NFlex align="center" :wrap="false">
-                    <NH2 v-if="isFillableMode" class="mb-0!">
-                        {{ currentDate }}
-                    </NH2>
-                    <ReportSelectDate v-if="isReadonlyMode" />
-                </NFlex>
-            </NFlex>
+                <div class="col-3 w-full">
+                    <ReportSelectDate />
+                </div>
+            </div>

            <NFlex justify="space-between" align="center" :wrap="false">
                <NRow class="grow">
@@ -113,9 +111,9 @@ const currentDate = computed(() => {

                <NButton type="error" secondary @click="openUnwantedEventModal = true">
                    <template #icon>
-                        <RiAddCircleLine />
+                        <TbAlertCircle />
                    </template>
-                    Нежелательное событие
+                    Нежелательные события ({{ reportStore.unwantedEvents.length }})
                </NButton>
            </NFlex>
        </NFlex>
@@ -125,5 +123,11 @@ const currentDate = computed(() => {
 </template>

 <style scoped>
-
+:deep(.n-statistic__label),
+:deep(.n-statistic-value__content) {
+    @apply text-center;
+}
+:deep(.n-statistic-value) {
+    @apply flex justify-center items-center;
+}
 </style>
--- a/resources/js/Pages/Report/Components/ReportSection.vue
+++ b/resources/js/Pages/Report/Components/ReportSection.vue
@@ -1,5 +1,5 @@
 <script setup>
-import {NCard, NFlex, NAlert, NCollapse, NCollapseItem} from 'naive-ui'
+import {NCard, NFlex, NAlert, NCollapse, NCollapseItem, NTabPane, NTabs} from 'naive-ui'
 import ReportSectionItem from "./ReportSectionItem.vue";
 import {computed} from "vue";
 import {useReportStore} from "../../../Stores/report.js";
@@ -79,12 +79,37 @@ const isReadonlyMode = computed(() => props.mode.toLowerCase() === 'readonly')
            </NCollapseItem>
            <NCollapseItem name="4">
                <template #header>
-                    <ReportSectionHeader title="Умершие" status="deceased" />
+                    <ReportSectionHeader title="Выбывшие" status="outcome" />
                </template>
-                <ReportSectionItem status="deceased"
-                                   @item-dragged="handleItemDragged"
-                                   @item-dropped="handleItemDropped"
-                />
+                <NTabs type="segment" animated>
+                    <NTabPane name="transferred">
+                        <template #tab>
+                            <ReportSectionHeader title="Переведённые" status="outcome-transferred" />
+                        </template>
+                        <ReportSectionItem status="outcome-transferred"
+                                           @item-dragged="handleItemDragged"
+                                           @item-dropped="handleItemDropped"
+                        />
+                    </NTabPane>
+                    <NTabPane name="discharged">
+                        <template #tab>
+                            <ReportSectionHeader title="Выписанные" status="outcome-discharged" />
+                        </template>
+                        <ReportSectionItem status="outcome-discharged"
+                                           @item-dragged="handleItemDragged"
+                                           @item-dropped="handleItemDropped"
+                        />
+                    </NTabPane>
+                    <NTabPane name="deceased">
+                        <template #tab>
+                            <ReportSectionHeader title="Умершие" status="outcome-deceased" />
+                        </template>
+                        <ReportSectionItem status="outcome-deceased"
+                                           @item-dragged="handleItemDragged"
+                                           @item-dropped="handleItemDropped"
+                        />
+                    </NTabPane>
+                </NTabs>
            </NCollapseItem>
        </NCollapse>
    </NCard>
--- a/resources/js/Pages/Report/Components/ReportSectionHeader.vue
+++ b/resources/js/Pages/Report/Components/ReportSectionHeader.vue
@@ -19,21 +19,17 @@ const reportStore = useReportStore()
 const isLoading = ref(true)
 const countPatient = ref(null)
 const fetchPatientCount = async () => {
-    if (props.status === 'plan' || props.status === 'emergency') {
-        isLoading.value = true
-        const data = {
-            status: props.status,
-            startAt: reportStore.timestampCurrentRange[0],
-            endAt: reportStore.timestampCurrentRange[1]
-        }
-        await axios.post('/api/mis/patients/count', data).then((res) => {
-            countPatient.value = res.data
-        }).finally(() => {
-            isLoading.value = false
-        })
-    } else {
-        isLoading.value = false
+    isLoading.value = true
+    const data = {
+        status: props.status,
+        startAt: reportStore.timestampCurrentRange[0],
+        endAt: reportStore.timestampCurrentRange[1]
    }
+    await axios.post('/api/mis/patients/count', data).then((res) => {
+        countPatient.value = res.data
+    }).finally(() => {
+        isLoading.value = false
+    })
 }

 const computedHeader = computed(() => {
--- a/resources/js/Pages/Report/Components/ReportSectionItem.vue
+++ b/resources/js/Pages/Report/Components/ReportSectionItem.vue
@@ -1,10 +1,11 @@
 <script setup>
-import {NIcon, NText, NDataTable, NButton} from "naive-ui";
+import {NIcon, NText, NDataTable, NButton, NTabs, NTabPane} from "naive-ui";
 import {useReportStore} from "../../../Stores/report.js";
 import {computed, h, onMounted, ref, watch} from "vue";
 import { VueDraggableNext } from 'vue-draggable-next'
 import {storeToRefs} from "pinia";
 import {TbGripVertical} from "vue-icons-plus/tb";
+import MoveModalComment from "./MoveModalComment.vue";

 const props = defineProps({
    mode: {
@@ -30,7 +31,7 @@ const props = defineProps({
    accentIds: {
        type: Array,
        default: []
-    }
+    },
 })

 const isFillableMode = computed(() => props.mode.toLowerCase() === 'fillable')
@@ -46,10 +47,12 @@ const {patientsData} = storeToRefs(reportStore)
 const baseColumns = reportStore.getColumnsByKey(props.keys)
 const data = ref([])
 const isLoading = ref(true)
+const showMoveModal = ref(false)
+const latestDropItem = ref(null)

 // Добавляем drag колонку если режим fillable
 const columns = computed(() => {
-    if (!isFillableMode.value) return baseColumns
+    // if (!isFillableMode.value) return baseColumns

    const newColumns = []

@@ -83,7 +86,11 @@ const columns = computed(() => {
            {
                text: true,
                onClick: () => {
-                    alert('message')
+                    axios.post('/api/report/observation/remove', {
+                        id: row.id
+                    }).then(async () => {
+                        await fetchPatients()
+                    })
                }
            },
            [
@@ -92,11 +99,30 @@ const columns = computed(() => {
        )
    }

+    const expandColumn = {
+        type: 'expand',
+        renderExpand: (rowData) => {
+            return h(
+                NText,
+                {
+                    class: 'max-w-full break-words whitespace-normal'
+                },
+                {
+                    default: rowData.comment ?? 'Причина наблюдения не указана'
+                }
+            )
+        }
+    }
+
+    if (props.status === 'observation') {
+        newColumns.push(expandColumn)
+    }
+
    if (props.isDraggable) newColumns.push(dragColumn)
    newColumns.push(...baseColumns)
    if (props.isRemovable) newColumns.push(removeColumn)

-    if (props.status === 'emergency') {
+    if (props.status === 'emergency' || props.status === 'plan') {
        const operationColumn = {
            title: 'Операции',
            key: 'operations',
@@ -109,11 +135,25 @@ const columns = computed(() => {
                            return `${itm.code}; `
                        })
                    ]
-                ) : h('div', {}, '-')
+                ) : h('div', {}, '-'),
+            ellipsis: {
+                tooltip: true
+            }
        }
        newColumns.push(operationColumn)
    }

+    if (props.status === 'outcome') {
+        const typeColumn = {
+            title: 'Причина',
+            key: 'outcome_type',
+            ellipsis: {
+                tooltip: true
+            }
+        }
+        newColumns.push(typeColumn)
+    }
+
    return newColumns
 })

@@ -156,6 +196,9 @@ const handleDrop = (e) => {
            fromStatus: dragData.fromStatus,
            toStatus: props.status
        })
+
+        latestDropItem.value = dragData.row
+        showMoveModal.value = true
    } catch (error) {
        console.error('Drop error:', error)
    }
@@ -216,24 +259,21 @@ onMounted(async () => {
 </script>

 <template>
-    <NDataTable :columns="columns"
-                ref="tableRef"
-                :data="patientsData[status]"
-                size="small"
-                @drop="handleDrop"
-                @dragover="handleDragOver"
-                :loading="isLoading"
-                max-height="200"
-                min-height="200"
-                :row-props="rowProps"
-                class="text-sm!">
-    </NDataTable>
-<!--    <NDataTable :columns="columns"-->
-<!--                :data="data"-->
-<!--                size="small"-->
-<!--                max-height="200"-->
-<!--                class="text-sm!">-->
-<!--    </NDataTable>-->
+        <NDataTable :columns="columns"
+                    ref="tableRef"
+                    :data="patientsData[status]"
+                    size="small"
+                    @drop="handleDrop"
+                    @dragover="handleDragOver"
+                    :loading="isLoading"
+                    max-height="200"
+                    min-height="200"
+                    :row-props="rowProps"
+                    :row-key="(row) => row.id"
+                    class="text-sm!">
+        </NDataTable>
+
+        <MoveModalComment v-model:show="showMoveModal" :patient-id="latestDropItem?.id" />
 </template>

 <style scoped>
--- a/resources/js/Pages/Report/Components/UnwantedEventModal.vue
+++ b/resources/js/Pages/Report/Components/UnwantedEventModal.vue
@@ -1,12 +1,16 @@
 <script setup>
-import {NModal, NForm, NFormItem, NInput, NFlex, NButton} from 'naive-ui'
-import {useForm} from "@inertiajs/vue3";
+import {NModal, NList, NListItem, NThing, NAvatar, NIcon, NDrawer, NDrawerContent,
+    NText, NDivider, NForm, NFormItem, NInput, NFlex, NButton, NScrollbar, NEmpty
+} from 'naive-ui'
 import {useReportStore} from "../../../Stores/report.js";
 import {ref} from "vue";
 const open = defineModel('open')
+import { TbAlertCircle, TbPencil, TbTrashX, TbCirclePlus, TbCheck, TbX } from 'vue-icons-plus/tb'
+import {format, isValid} from "date-fns";

 const reportStore = useReportStore()
 const formRef = ref()
+const createDrawerShow = ref(false)
 const rules = {
    comment: {
        required: true,
@@ -14,34 +18,191 @@ const rules = {
        trigger: 'blur'
    }
 }
+const selectedEvent = ref(null)
+const drawerCreatingMode = ref(true) // or false = editing

-const onSubmit = () => {
+// Создание в сторе и открытие drawer с формой нежелательного события
+const onCreateEvent = () => {
+    drawerCreatingMode.value = true
+    const createDate = format(new Date(), 'Создано dd.MM.yyyy в HH:mm')
+    reportStore.unwantedEvents.push({
+        title: `Нежелательное событие №${reportStore.unwantedEvents.length + 1}`,
+        comment: '',
+        created_at: createDate
+    })
+
+    const length = reportStore.unwantedEvents.length
+
+    selectedEvent.value = reportStore.unwantedEvents[length - 1]
+    createDrawerShow.value = true
+}
+
+const onEditEvent = (event) => {
+    drawerCreatingMode.value = false
+    selectedEvent.value = event
+    createDrawerShow.value = true
+}
+
+const onDeleteEvent = (event) => {
+    const indexOfDelete = reportStore.unwantedEvents.findIndex(itm => itm === event)
+
+    if (typeof event.unwanted_event_id !== 'undefined') {
+        axios.delete(`/api/report/unwanted-event/${event.unwanted_event_id}`)
+            .then(() => {
+                reportStore.unwantedEvents.splice(indexOfDelete, 1)
+            })
+    } else {
+        reportStore.unwantedEvents.splice(indexOfDelete, 1)
+    }
+}
+
+const onCancelDrawerEvent = (event) => {
+    onDeleteEvent(event)
+    createDrawerShow.value = false
+}
+
+const onCreateDrawerEvent = () => {
    formRef.value?.validate((errors) => {
        if (!errors) {
-            open.value = false
+            console.log(createDrawerShow.value)
+            createDrawerShow.value = false
+            console.log(createDrawerShow.value)
        }
        else {

        }
    })
 }
+
+const onBeforeLeaveModal = () => {
+    selectedEvent.value = null
+    drawerCreatingMode.value = true
+    createDrawerShow.value = false
+}
 </script>

 <template>
-    <NModal v-model:show="open" title="Нежелательное событие" preset="card" class="max-w-xl">
-        <NForm ref="formRef" :model="reportStore.reportForm" :rules="rules">
-            <NFormItem :show-label="false" path="comment">
-                <NInput type="textarea" :rows="8" v-model:value="reportStore.reportForm.comment" />
-            </NFormItem>
-        </NForm>
+    <NModal v-model:show="open"
+            title="Нежелательные события"
+            preset="card"
+            :mask-closable="false"
+            :close-on-esc="false"
+            @before-leave="onBeforeLeaveModal"
+            class="max-w-4xl overflow-clip h-[calc(100vh-220px)]"
+    >
+        <template v-if="reportStore.unwantedEvents.length">
+            <NScrollbar class="max-h-[calc(100vh-282px)] pr-3">
+                <NList>
+                    <NListItem v-for="event in reportStore.unwantedEvents">
+                        <NThing>
+                            <template #avatar>
+                                <NAvatar>
+                                    <NIcon>
+                                        <TbAlertCircle class="text-red-400" />
+                                    </NIcon>
+                                </NAvatar>
+                            </template>
+                            <template #header>
+                                {{ event.title }}
+                            </template>
+                            <template #description>
+                                <NText depth="3">
+                                    {{ event.created_at }}
+                                </NText>
+                            </template>
+                            <NText>
+                                {{ event.comment }}
+                            </NText>
+                            <template #action>
+                                <NFlex align="center">
+                                    <NButton secondary size="small" @click="onEditEvent(event)">
+                                        <template #icon>
+                                            <TbPencil />
+                                        </template>
+                                        Редактировать
+                                    </NButton>
+                                    <NDivider vertical />
+                                    <NButton type="error" secondary size="small" @click="onDeleteEvent(event)">
+                                        <template #icon>
+                                            <TbTrashX />
+                                        </template>
+                                        Удалить
+                                    </NButton>
+                                </NFlex>
+                            </template>
+                        </NThing>
+                    </NListItem>
+                </NList>
+            </NScrollbar>
+        </template>
+        <template v-else>
+            <div class="h-full flex items-center justify-center">
+                <NEmpty description="Нежелательных событий не найдено!">
+                    <template #extra>
+                        <NButton type="primary" secondary @click="onCreateEvent()" size="small">
+                            <template #icon>
+                                <TbCirclePlus />
+                            </template>
+                            Создать
+                        </NButton>
+                    </template>
+                </NEmpty>
+            </div>
+        </template>

        <template #action>
-            <NFlex align="center" justify="end">
-                <NButton type="primary" tertiary @click="onSubmit">
-                    Сохранить
+            <NFlex id="modal-action" align="center" justify="space-between">
+                <NButton type="primary" secondary @click="onCreateEvent()">
+                    <template #icon>
+                        <TbCirclePlus />
+                    </template>
+                    Создать событие
                </NButton>
            </NFlex>
        </template>
+
+        <NDrawer
+            :show="createDrawerShow"
+            placement="bottom"
+            :max-height="600"
+            :min-height="400"
+            :default-height="400"
+            resizable
+            :trap-focus="false"
+            :block-scroll="false"
+            :mask-closable="false"
+            to="#modal-action"
+        >
+            <NDrawerContent>
+                <template #header>
+                    <template v-if="drawerCreatingMode">Создание события</template>
+                    <template v-else>Редактирование события</template>
+                </template>
+                <NForm ref="formRef" :model="selectedEvent" :rules="rules">
+                    <NFormItem :show-label="false" path="comment">
+                        <NInput type="textarea" :rows="8" v-model:value="selectedEvent.comment" />
+                    </NFormItem>
+                </NForm>
+                <template #footer>
+                    <NFlex align="center">
+                        <NButton v-if="drawerCreatingMode" type="error" secondary @click="onCancelDrawerEvent(selectedEvent)">
+                            <template #icon>
+                                <TbX />
+                            </template>
+                            Отменить создание
+                        </NButton>
+                        <NDivider v-if="drawerCreatingMode" vertical />
+                        <NButton type="primary" @click="onCreateDrawerEvent">
+                            <template #icon>
+                                <TbCheck />
+                            </template>
+                            <template v-if="drawerCreatingMode">Создать</template>
+                            <template v-else>Сохранить</template>
+                        </NButton>
+                    </NFlex>
+                </template>
+            </NDrawerContent>
+        </NDrawer>
    </NModal>
 </template>

--- a/resources/js/Stores/report.js
+++ b/resources/js/Stores/report.js
@@ -55,11 +55,14 @@ export const useReportStore = defineStore('reportStore', () => {
        plan: [],
        emergency: [],
        observation: [],
-        deceased: []
+        outcome: []
    })

    const reportForm = ref({})

+    // Нежелательные события
+    const unwantedEvents = ref([])
+
    const getColumnsByKey = (keys) => {
        const result = []
        for (const key of keys) {
@@ -74,9 +77,8 @@ export const useReportStore = defineStore('reportStore', () => {
        const form = {
            metrics: reportForm.value,
            observationPatients: patientsData.value['observation'],
-            unwantedEvent: {
-                comment: reportForm.comment
-            },
+            unwantedEvents: unwantedEvents.value,
+            dates: timestampCurrentRange.value,
            ...assignForm
        }

@@ -90,6 +92,7 @@ export const useReportStore = defineStore('reportStore', () => {

    const resetReportForm = () => {
        reportForm.value = {}
+        unwantedEvents.value = []
        patientsData.value.observation = []
    }

@@ -107,6 +110,8 @@ export const useReportStore = defineStore('reportStore', () => {
                reportForm.value.metrika_item_7 = reportInfo.value.department?.extractCount
                reportForm.value.metrika_item_8 = reportInfo.value.department?.currentCount

+                unwantedEvents.value = reportInfo.value.report.unwantedEvents
+
                timestampCurrentRange.value = [
                    reportInfo.value.dates.startAt,
                    reportInfo.value.dates.endAt,
@@ -128,6 +133,8 @@ export const useReportStore = defineStore('reportStore', () => {
                reportForm.value.metrika_item_7 = reportInfo.value.department?.extractCount
                reportForm.value.metrika_item_8 = reportInfo.value.department?.currentCount

+                unwantedEvents.value = reportInfo.value.report.unwantedEvents
+
                timestampCurrentRange.value = [
                    reportInfo.value.dates.startAt,
                    reportInfo.value.dates.endAt,
@@ -148,6 +155,7 @@ export const useReportStore = defineStore('reportStore', () => {
        patientsData,
        reportInfo,
        reportForm,
+        unwantedEvents,

        getColumnsByKey,
        getDataOnReportDate,