fix loading

src/modules/04_registryPerson/components/detail/PersonalInformation/02_NameChangeHistory.vue

@@ -17,7 +17,7 @@ import type { DataProfile } from "@/modules/04_registryPerson/interface/response
 import type { FormChangeName } from "@/modules/04_registryPerson/interface/request/Main";
 
 /** importComponents*/
-import dialogHeader from "@/components/DialogHeader.vue";
+import DialogHeader from "@/components/DialogHeader.vue";
 
 /** use*/
 const $q = useQuasar();
@@ -314,11 +314,11 @@ async function addData() {
     .then(async (res) => {
       subId.value = await res.data.result;
       await uploadProfile(res.data.result);
-      closeDialog();
+      await fetchData(profileId.value);
+      await props?.fetchDataPersonal?.();
+      await fetchDataPersonal();
       success($q, "บันทึกข้อมูลสำเร็จ");
-      fetchData(profileId.value);
-      props?.fetchDataPersonal?.();
-      fetchDataPersonal();
+      closeDialog();
     })
     .catch((err) => {
       messageError($q, err);
@@ -344,11 +344,11 @@ function editData(idData: string) {
     )
     .then(async () => {
       await uploadProfile(subId.value);
-      closeDialog();
       success($q, "บันทึกข้อมูลสำเร็จ");
-      fetchData(profileId.value);
-      props.fetchDataPersonal?.();
-      fetchDataPersonal();
+      await fetchData(profileId.value);
+      await props.fetchDataPersonal?.();
+      await fetchDataPersonal();
+      closeDialog();
     })
     .catch((err) => {
       messageError($q, err);
@@ -553,7 +553,7 @@ onMounted(async () => {
   <q-dialog v-model="dialog" persistent>
     <q-card>
       <q-form @submit.prevent greedy @validation-success="onSubmit()">
-        <dialog-header tittle="เปลี่ยนชื่อ - นามสกุล" :close="closeDialog" />
+        <DialogHeader tittle="เปลี่ยนชื่อ - นามสกุล" :close="closeDialog" />
         <q-separator />
         <q-card-section>
           <div class="row q-mb-sm">

src/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue

@@ -19,7 +19,7 @@ import type {
   DataEducationLevel,
 } from "@/modules/04_registryPerson/interface/response/Education";
 
-import dialogHeader from "@/components/DialogHeader.vue";
+import DialogHeader from "@/components/DialogHeader.vue";
 import DialogSortEducation from "@/modules/04_registryPerson/components/detail/PersonalInformation/DialogSortEducation.vue";
 
 const $q = useQuasar();
@@ -1046,7 +1046,7 @@ onMounted(async () => {
   <q-dialog v-model="dialog" class="dialog" persistent>
     <q-card>
       <q-form @submit.prevent greedy @validation-success="onSubmit()">
-        <dialog-header
+        <DialogHeader
           :tittle="
             dialogStatus == 'edit'
               ? 'แก้ไขข้อมูลประวัติการศึกษา'
@@ -1481,7 +1481,7 @@ onMounted(async () => {
   <!-- ประวัติแก้ไขประวัติการศึกษา -->
   <q-dialog v-model="historyDialog" class="dialog" persistent>
     <q-card style="min-width: 80%">
-      <dialog-header
+      <DialogHeader
         tittle="ประวัติแก้ไขประวัติการศึกษา"
         :close="closeHistoryDialog"
       />

src/modules/04_registryPerson/components/detail/PersonalInformation/Main.vue

@@ -1,15 +1,51 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, defineAsyncComponent } from "vue";
 
 import { useRegistryNewDataStore } from "@/modules/04_registryPerson/store";
 
 /** importComponents*/
-import Profile from "@/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue"; //ประวัติส่วนตัว
-import NameChangeHistory from "@/modules/04_registryPerson/components/detail/PersonalInformation/02_NameChangeHistory.vue"; //ประวัติการเปลี่ยนชื่อ
-import Address from "@/modules/04_registryPerson/components/detail/PersonalInformation/03_Address.vue"; //ข้อมูลที่อยู่
-import FamilyNew from "@/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue"; //ข้อมูลครอบครัว
-import Education from "@/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue"; //ประวัติการศึกษา
-import SpecialSkill from "@/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue"; //ความสามารถพิเศษ
+//ประวัติส่วนตัว
+const Profile = defineAsyncComponent(
+  () =>
+    import(
+      "@/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue"
+    )
+);
+//ประวัติการเปลี่ยนชื่อ
+const NameChangeHistory = defineAsyncComponent(
+  () =>
+    import(
+      "@/modules/04_registryPerson/components/detail/PersonalInformation/02_NameChangeHistory.vue"
+    )
+);
+//ข้อมูลที่อยู่
+const Address = defineAsyncComponent(
+  () =>
+    import(
+      "@/modules/04_registryPerson/components/detail/PersonalInformation/03_Address.vue"
+    )
+);
+//ข้อมูลครอบครัว
+const FamilyNew = defineAsyncComponent(
+  () =>
+    import(
+      "@/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue"
+    )
+);
+//ประวัติการศึกษา
+const Education = defineAsyncComponent(
+  () =>
+    import(
+      "@/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue"
+    )
+);
+//ความสามารถพิเศษ
+const SpecialSkill = defineAsyncComponent(
+  () =>
+    import(
+      "@/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue"
+    )
+);
 
 const storeRegistry = useRegistryNewDataStore();
 

src/modules/04_registryPerson/components/detail/TabMain.vue

@@ -1,17 +1,43 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, defineAsyncComponent } from "vue";
 import { useRoute } from "vue-router";
 
 import { useRegistryDetailNewDataStore } from "@/modules/04_registryPerson/stores/DetailMain";
 
 import type { ItemTab } from "@/modules/04_registryPerson/interface/index/Main";
 
-import PersonalInformationMain from "@/modules/04_registryPerson/components/detail/PersonalInformation/Main.vue"; //ข้อมูลส่วนตัว
-import GovernmentInformationMain from "@/modules/04_registryPerson/components/detail/GovernmentInformation/Main.vue"; //ข้อมูลราชการ
-import salaryMain from "@/modules/04_registryPerson/components/detail/Salary/Main.vue"; //ข้อมูลเงินเดือน/ค่าจ้าง
-import AchievementMain from "@/modules/04_registryPerson/components/detail/Achievement/Main.vue"; //ข้อมูลผลงานและเครื่องราชฯ
-import OtherMaim from "@/modules/04_registryPerson/components/detail/Other/Main.vue"; //เอกสารหลักฐานและอื่นๆ
-import EmployeeMain from "@/modules/04_registryPerson/components/detail/Employee/Main.vue"; //ข้อมูลลูกจ้าง
+//ข้อมูลส่วนตัว
+const PersonalInformationMain = defineAsyncComponent(
+  () =>
+    import(
+      "@/modules/04_registryPerson/components/detail/PersonalInformation/Main.vue"
+    )
+);
+//ข้อมูลราชการ
+const GovernmentInformationMain = defineAsyncComponent(
+  () =>
+    import(
+      "@/modules/04_registryPerson/components/detail/GovernmentInformation/Main.vue"
+    )
+);
+//ข้อมูลเงินเดือน/ค่าจ้าง
+const salaryMain = defineAsyncComponent(
+  () => import("@/modules/04_registryPerson/components/detail/Salary/Main.vue")
+);
+//ข้อมูลผลงานและเครื่องราชฯ
+const AchievementMain = defineAsyncComponent(
+  () =>
+    import("@/modules/04_registryPerson/components/detail/Achievement/Main.vue")
+);
+//เอกสารหลักฐานและอื่นๆ
+const OtherMaim = defineAsyncComponent(
+  () => import("@/modules/04_registryPerson/components/detail/Other/Main.vue")
+);
+//ข้อมูลลูกจ้าง
+const EmployeeMain = defineAsyncComponent(
+  () =>
+    import("@/modules/04_registryPerson/components/detail/Employee/Main.vue")
+);
 
 const route = useRoute();