Профиль хирургии

resources/js/Pages/Report/Components/ReportSection.vue

@@ -20,6 +20,17 @@ const handleItemDragged = (event) => {
     // console.log('Начато перетаскивание:', event)
 }
 
+const handleCollapseItemDragEnter = (e, itemName) => {
+    // Проверяем, активно ли перетаскивание и наведение происходит на нужную секцию ("3")
+    if (reportStore.isDragActive && itemName === '3') {
+        // Открываем секцию, если она еще не открыта
+        if (!reportStore.openedCollapsible.includes(itemName)) {
+            // Добавляем имя в массив открытых, если используется массив
+            reportStore.openedCollapsible = [...reportStore.openedCollapsible, itemName];
+        }
+    }
+}
+
 // Обработка события drop
 const handleItemDropped = (event) => {
     const { item, fromStatus, toStatus } = event
@@ -62,15 +73,17 @@ const isReadonlyMode = computed(() => props.mode.toLowerCase() === 'readonly')
                                    @item-dragged="handleItemDragged"
                 />
             </NCollapseItem>
-            <NCollapseItem name="3">
+            <NCollapseItem name="3" @dragenter="(e) => handleCollapseItemDragEnter(e, '3')">
                 <template #header>
                     <ReportSectionHeader title="Находятся на контроле" status="observation" />
                 </template>
                 <NFlex :size="12">
                     <ReportSectionItem status="observation"
+                                       id="observation-table"
                                        @item-dragged="handleItemDragged"
                                        @item-dropped="handleItemDropped"
                                        is-removable
+                                       is-draggable-drop
                     />
                     <NAlert v-if="isFillableMode" type="info" class="w-full">
                         Перетаскивайте строки из верхних таблиц, что бы добавить в наблюдение