Роли, переделывание отчета, изменение на главной странице

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

@@ -0,0 +1,90 @@
+<script setup>
+import {NCard, NFlex, NAlert, NCollapse, NCollapseItem} from 'naive-ui'
+import ReportSectionItem from "./ReportSectionItem.vue";
+import {computed} from "vue";
+import {useReportStore} from "../../../Stores/report.js";
+import {storeToRefs} from "pinia";
+import ReportSectionHeader from "./ReportSectionHeader.vue";
+
+const props = defineProps({
+    mode: {
+        type: String,
+        default: 'fillable' // 'fillable', 'readonly'
+    }
+})
+
+const reportStore = useReportStore()
+const {patientsData} = storeToRefs(reportStore)
+
+const handleItemDragged = (event) => {
+    console.log('Начато перетаскивание:', event)
+}
+
+// Обработка события drop
+const handleItemDropped = (event) => {
+    const { item, fromStatus, toStatus } = event
+
+    console.log(event)
+
+    // Добавляем в целевую таблицу
+    if (toStatus && patientsData.value[toStatus]) {
+        // Проверяем, нет ли уже такого элемента
+        if (!patientsData.value[toStatus].some(i => i.id === item.id)) {
+            patientsData.value[toStatus].push(item)
+        }
+    }
+}
+
+const isFillableMode = computed(() => props.mode.toLowerCase() === 'fillable')
+const isReadonlyMode = computed(() => props.mode.toLowerCase() === 'readonly')
+</script>
+
+<template>
+    <NCard>
+        <NCollapse>
+            <NCollapseItem name="1">
+                <template #header>
+                    <ReportSectionHeader title="Планово" status="plan" />
+                </template>
+                <ReportSectionItem status="plan"
+                                   @item-dragged="handleItemDragged"
+                />
+            </NCollapseItem>
+            <NCollapseItem name="2">
+                <template #header>
+                    <ReportSectionHeader title="Экстренно" status="emergency" />
+                </template>
+                <ReportSectionItem status="emergency"
+                                   @item-dragged="handleItemDragged"
+                />
+            </NCollapseItem>
+            <NCollapseItem name="3">
+                <template #header>
+                    <ReportSectionHeader title="Наблюдение" status="observation" />
+                </template>
+                <NFlex :size="12">
+                    <ReportSectionItem status="observation"
+                                       @item-dragged="handleItemDragged"
+                                       @item-dropped="handleItemDropped"
+                    />
+                    <NAlert v-if="isFillableMode" type="info" class="w-full">
+                        Перетаскивайте строки из верхних таблиц, что бы добавить в наблюдение
+                    </NAlert>
+                </NFlex>
+            </NCollapseItem>
+            <NCollapseItem name="4">
+                <template #header>
+                    <ReportSectionHeader title="Умершие" status="deceased" />
+                </template>
+                <ReportSectionItem status="deceased"
+                                   @item-dragged="handleItemDragged"
+                                   @item-dropped="handleItemDropped"
+                />
+            </NCollapseItem>
+        </NCollapse>
+    </NCard>
+</template>
+
+<style scoped>
+
+</style>