Обновление отчета

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

@@ -1,5 +1,5 @@
 <script setup>
-import {NCard, NFlex, NFormItem, NForm, NInputNumber} from "naive-ui";
+import {NCard, NSkeleton, NFlex, NFormItem, NForm, NInputNumber} from "naive-ui";
 import {useReportStore} from "../../../Stores/report.js";
 
 const reportStore = useReportStore()
@@ -9,6 +9,11 @@ const reportStore = useReportStore()
     <NCard>
         <NForm>
             <NFlex>
+                <template v-if="reportStore.isLoadReportInfo">
+                    <NSkeleton class="w-[246px]! h-[60px]!" />
+                    <NSkeleton class="w-[246px]! h-[60px]!" />
+                    <NSkeleton class="w-[246px]! h-[60px]!" />
+                </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}`]"

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

@@ -1,5 +1,5 @@
 <script setup>
-import {NStatistic, NRow, NCol, NCard, NButton, NTag, NDatePicker, NFlex, NSelect, NText, NH2} from "naive-ui";
+import {NSkeleton, NStatistic, NRow, NCol, NCard, NButton, NTag, NDatePicker, NFlex, NSelect, NText, NH2} from "naive-ui";
 import {computed, ref} from "vue";
 import {format} from "date-fns";
 import {useNow} from "@vueuse/core";
@@ -65,10 +65,20 @@ const currentDate = computed(() => {
             <NFlex justify="space-between" align="center" :wrap="false">
                 <NRow class="grow">
                     <NCol :span="4">
-                        <NStatistic label="Коек" :value="reportStore.reportInfo?.department.beds" />
+                        <NStatistic label="Коек">
+                            <template #default>
+                                <NSkeleton v-if="reportStore.isLoadReportInfo" round class="w-[70px]! mt-2 h-[29px]!" />
+                                <span v-else>{{ reportStore.reportInfo?.department.beds }}</span>
+                            </template>
+                        </NStatistic>
                     </NCol>
                     <NCol :span="5">
-                        <NStatistic label="Загруженность" :value="`${reportStore.reportInfo?.department.percentLoadedBeds}%`" />
+                        <NStatistic label="Загруженность">
+                            <template #default>
+                                <NSkeleton v-if="reportStore.isLoadReportInfo" round class="w-[70px]! mt-2 h-[29px]!" />
+                                <span v-else>{{ reportStore.reportInfo?.department.percentLoadedBeds }}%</span>
+                            </template>
+                        </NStatistic>
                     </NCol>
                 </NRow>
 

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

@@ -107,18 +107,14 @@ const handleDrop = (e) => {
 }
 
 const fetchPatients = async () => {
-    if (props.status === 'plan' || props.status === 'emergency') {
-        isLoading.value = true
-        await axios.post('/api/mis/patients', {
-            status: props.status
-        }).then((res) => {
-            patientsData.value[props.status] = res.data
-        }).finally(() => {
-            isLoading.value = false
-        })
-    } else {
+    isLoading.value = true
+    await axios.post('/api/mis/patients', {
+        status: props.status
+    }).then((res) => {
+        patientsData.value[props.status] = res.data
+    }).finally(() => {
         isLoading.value = false
-    }
+    })
 }
 
 function rowProps(row) {