Привязка таблицы к смене статуса из модальных окон

resources/js/Pages/Home/ArchiveHistoryModal/Index.vue

@@ -45,7 +45,7 @@ const loadPatientData = async () => {
 
     loading.value = true
     try {
-        axios.get(`/api/si/patients/${props.patientId}?view_type=${filtersRef.value.view_type}`).then(res => {
+        await axios.get(`/api/si/patients/${props.patientId}?view_type=${filtersRef.value.view_type}`).then(res => {
             patient.value = res.data
             patientData.value = res.data.info
             archiveInfo.value = res.data.archiveInfo ?? {
@@ -109,8 +109,15 @@ const rowProps = (row) => ({
     }
 })
 
-const onUpdateHistory = (updatedData) => {
-    loadPatientData()
+const onUpdateHistory = async ({data}) => {
+    await loadPatientData()
+    const updatedData = {
+        status: archiveInfo.value.status,
+    }
+    emits('historyUpdated', {
+        data: updatedData,
+        patientId: props.patientId
+    })
 }
 
 const hasCreateNew = computed(() => archiveInfo.value === null)
@@ -119,11 +126,14 @@ const onSubmit = async () => {
     try {
         await axios.post(`/api/archive/histories/info/${props.patientId}`, archiveInfo.value).then(res => {
             // onCloseWithoutSave()
+            const updatedData = {
+                status: archiveInfo.value.status,
+            }
             emits('historyUpdated', {
-                type: hasCreateNew.value ? 'created' : 'updated',
-                data: res.data,
+                data: updatedData,
                 patientId: props.patientId
             })
+            open.value = false
         })
 
     } catch (error) {
@@ -134,9 +144,9 @@ const onSubmit = async () => {
 }
 
 // Наблюдаем за изменением patientId
-watch(() => props.patientId, (newId) => {
+watch(() => props.patientId, async (newId) => {
     if (newId) {
-        loadPatientData()
+        await loadPatientData()
     }
 }, { immediate: true })
 </script>

resources/js/Pages/Home/ArchiveHistoryMoveModal/Index.vue

@@ -73,12 +73,12 @@ const submit = () => {
             : `/api/archive/histories/move/${archiveHistory.value.id}`
 
         axios.post(url, archiveHistory.value).then(res => {
-            onCloseWithoutSave()
             emits('historyUpdated', {
                 type: props.isCreateNew ? 'created' : 'updated',
                 data: res.data,
                 historyId: archiveHistory.value.id
             })
+            onCloseWithoutSave()
         })
 
     } catch (error) {

resources/js/Pages/Home/DataTable/Index.vue

@@ -1,6 +1,6 @@
 <script setup>
 import {NDataTable, NEllipsis, NTag} from "naive-ui"
-import {computed, h, reactive, ref} from "vue"
+import {computed, h, reactive, ref, watch} from "vue"
 import {useMedicalHistoryFilter} from "../../../Composables/useMedicalHistoryFilter.js";
 import ArchiveHistoryModal from '../ArchiveHistoryModal/Index.vue'
 
@@ -24,6 +24,7 @@ const props = defineProps({
 })
 
 const { isLoading, handlePageChange, handlePageSizeChange, meta, filtersRef } = useMedicalHistoryFilter(props.filters)
+const dataTable = ref(props.data ?? [])
 
 const archiveStatusColumn = (status) => {
     const tagType = status?.variant ?? 'error'
@@ -132,11 +133,30 @@ const pagination = computed(() => {
         }
     }
 })
+
+const onCloseWithoutSave = () => {
+    selectedPatientId.value = null
+}
+
+const onUpdateHistory = ({data, patientId}) => {
+    console.log(data)
+    if (dataTable.value.length > 0) {
+        let needUpdateItem = dataTable.value.findIndex(itm => itm.id === patientId)
+        dataTable.value[needUpdateItem] = {
+            ...dataTable.value[needUpdateItem],
+            status: data.status
+        }
+    }
+}
+
+watch(() => props.data, (newData) => {
+    dataTable.value = newData
+})
 </script>
 
 <template>
-    <NDataTable remote striped :loading="isLoading" :row-props="rowProps" :columns="columns" :pagination="pagination" :max-height="maxHeight" size="small" :min-height="minHeight" :data="data" />
-    <ArchiveHistoryModal v-model:open="showArchiveHistoryModal" :patient-id="selectedPatientId" />
+    <NDataTable remote striped :loading="isLoading" :row-props="rowProps" :columns="columns" :pagination="pagination" :max-height="maxHeight" size="small" :min-height="minHeight" :data="dataTable" />
+    <ArchiveHistoryModal v-model:open="showArchiveHistoryModal" :patient-id="selectedPatientId" @history-updated="onUpdateHistory" @close-without-save="onCloseWithoutSave" />
 </template>
 
 <style scoped>