ปรับ Load รายละเอียดทะเบียนประวัติ

src/modules/04_registry/components/Assessment.vue

@@ -626,7 +626,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        store.isLoad++
       });
   }
 };

src/modules/04_registry/components/Coin.vue

@@ -45,8 +45,8 @@
                 icon="mdi-history"
                 @click="clickHistory(props.row)"
               >
-            <q-tooltip>ประวัติแก้ไขประกาศเกียรติคุณ</q-tooltip>
+                <q-tooltip>ประวัติแก้ไขประกาศเกียรติคุณ</q-tooltip>
-            </q-btn>
+              </q-btn>
             </q-td>
           </q-tr>
         </template>
@@ -67,9 +67,7 @@
         />
         <q-separator />
         <q-card-section class="q-p-sm">
-          <div
+          <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
-            class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
-          >
             <div class="col-xs-6 col-sm-6 col-md-6">
               <datepicker
                 menu-class-name="modalfix"
@@ -516,7 +514,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        store.isLoad++;
       });
   }
 };

src/modules/04_registry/components/Discipline.vue

@@ -617,7 +617,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        store.isLoad++
       });
   }
 };

src/modules/04_registry/components/Document.vue

@@ -31,9 +31,9 @@
                   color="blue"
                   icon="mdi-download-outline"
                   @click="downloadData(file.file)"
-                  >
+                >
-              <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
+                  <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
-              </q-btn>
+                </q-btn>
                 <q-btn
                   class="gt-xs"
                   size="12px"
@@ -45,8 +45,8 @@
                   v-show="edit"
                   @click="deleteData(file.id)"
                 >
-              <q-tooltip>ลบเอกสารหลักฐาน</q-tooltip>
+                  <q-tooltip>ลบเอกสารหลักฐาน</q-tooltip>
-              </q-btn>
+                </q-btn>
               </div>
             </q-item-section>
           </q-item>
@@ -145,6 +145,9 @@ import { useRoute } from "vue-router";
 import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useProfileDataStore } from "@/modules/04_registry/store";
+
+const profileStore = useProfileDataStore();
 
 const props = defineProps({
   statusEdit: {
@@ -189,7 +192,7 @@ const getData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        profileStore.isLoad++;
       });
   }
 };

src/modules/04_registry/components/Education.vue

@@ -57,8 +57,8 @@
                 icon="mdi-history"
                 @click="clickHistory(props.row)"
               >
-            <q-tooltip>ประวัติแก้ไขประวัติการศึกษา</q-tooltip>
+                <q-tooltip>ประวัติแก้ไขประวัติการศึกษา</q-tooltip>
-            </q-btn>
+              </q-btn>
             </q-td>
           </q-tr>
         </template>
@@ -72,9 +72,7 @@
         <DialogHeader tittle="ประวัติการศึกษา" :close="clickClose" />
         <q-separator />
         <q-card-section class="q-p-sm">
-          <div
+          <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
-            class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
-          >
             <div class="col-xs-6 col-sm-6 col-md-6">
               <selector
                 :class="getClass(edit)"
@@ -1065,7 +1063,7 @@ const fetchLevel = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      store.isLoad++;
     });
 };
 
@@ -1087,7 +1085,8 @@ const fetchPositionPath = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      store.isLoad++;
+      // hideLoader();
     });
 };
 
@@ -1152,7 +1151,8 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        // hideLoader();
+        store.isLoad++;
       });
   }
 };

src/modules/04_registry/components/Information/Address.vue

@@ -306,6 +306,9 @@ import HistoryTable from "@/components/TableHistory.vue";
 import { useRoute } from "vue-router";
 import type { AddressOps } from "@/modules/04_registry/interface/index/Main";
 import type { QTableProps } from "quasar";
+import { useProfileDataStore } from "@/modules/04_registry/store";
+
+const profileStore = useProfileDataStore();
 
 const props = defineProps({
   statusEdit: {
@@ -631,7 +634,7 @@ const getNewData = async () => {
 
 const fetchData = async () => {
   if (route.params.id) {
-    showLoader();
+    // showLoader();
     await http
       .get(config.API.profileAdrsId(route.params.id.toString()))
       .then((res) => {
@@ -671,7 +674,8 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        // hideLoader();
+        profileStore.isLoad++;
       });
   }
 };
@@ -835,7 +839,7 @@ const fetchProvince = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      profileStore.isLoad++;
     });
 };
 
@@ -888,9 +892,9 @@ const fetchDistrict = async (id: string | null, position: string) => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        profileStore.isLoad++;
       });
-  }
+  } else profileStore.isLoad++;
 };
 
 const fetchSubDistrict = async (id: string | null, position: string) => {
@@ -942,9 +946,9 @@ const fetchSubDistrict = async (id: string | null, position: string) => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        profileStore.isLoad++;
       });
-  }
+  } else profileStore.isLoad++;
 };
 
 const changeBtn = async () => {

src/modules/04_registry/components/Information/Certicate.vue

@@ -69,9 +69,7 @@
         />
         <q-separator />
         <q-card-section class="q-p-sm">
-          <div
+          <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
-            class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
-          >
             <div class="col-xs-6 col-sm-6 col-md-6">
               <q-input
                 :class="getClass(edit)"
@@ -512,7 +510,8 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        // hideLoader();
+        store.isLoad++;
       });
   }
 };

src/modules/04_registry/components/Information/Family.vue

@@ -1284,17 +1284,17 @@
             </div>
             <div class="col">
               <q-input
-              :class="getClass(false)"
+                :class="getClass(false)"
-              hide-bottom-space
+                hide-bottom-space
-              :outlined="false"
+                :outlined="false"
-              dense
+                dense
-              lazy-rules
+                lazy-rules
-              :readonly="true"
+                :readonly="true"
-              :borderless="true"
+                :borderless="true"
-              v-model="items.childrenFirstName"
+                v-model="items.childrenFirstName"
-              :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
-              :label="`${'ชื่อ'}`"
+                :label="`${'ชื่อ'}`"
-            />
+              />
             </div>
             <div class="col">
               <q-input
@@ -1436,6 +1436,7 @@
 import { ref, onMounted } from "vue";
 import type { QForm } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
+import { useProfileDataStore } from "@/modules/04_registry/store";
 
 import { useQuasar } from "quasar";
 import type {
@@ -1453,6 +1454,8 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useRoute } from "vue-router";
 
+const profileStore = useProfileDataStore();
+
 const props = defineProps({
   statusEdit: {
     type: Boolean,
@@ -1595,7 +1598,8 @@ const fetchPrefix = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      // hideLoader();
+      profileStore.isLoad++;
     });
 };
 
@@ -1747,7 +1751,8 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(async () => {
-        hideLoader();
+        // hideLoader();
+        profileStore.isLoad++
       });
   }
 };

src/modules/04_registry/components/Information/Government.vue

@@ -619,7 +619,7 @@ watch(retireText, async () => {
 });
 
 const fetchData = async () => {
-  showLoader();
+  // showLoader();
   await http
     .get(config.API.profileGovId(route.params.id.toString()))
     .then((res) => {
@@ -645,7 +645,8 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      // hideLoader();
+      profileStore.isLoad++;
     });
 };
 

src/modules/04_registry/components/Information/Information.vue

@@ -1,41 +1,106 @@
 <template>
   <q-card flat bordered class="col-12 q-px-lg q-py-md">
-    <HeaderTop v-model:edit="edit" header="ข้อมูลส่วนตัว" icon="mdi-account" :save="saveData" :history="!statusAdd()"
+    <HeaderTop
-      :changeBtn="changeBtn" :disable="statusEdit" :cancel="onCancel" :historyClick="clickHistory"
+      v-model:edit="edit"
-      :addEmployee="statusAdd()" />
+      header="ข้อมูลส่วนตัว"
+      icon="mdi-account"
+      :save="saveData"
+      :history="!statusAdd()"
+      :changeBtn="changeBtn"
+      :disable="statusEdit"
+      :cancel="onCancel"
+      :historyClick="clickHistory"
+      :addEmployee="statusAdd()"
+    />
     <q-form ref="myform" class="col-12">
       <div class="row col-12 q-col-gutter-x-sm q-col-gutter-y-sm">
         <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input :class="getClass(edit)" hide-bottom-space :outlined="edit" dense lazy-rules :readonly="!edit"
+          <q-input
-            :borderless="!edit" v-model="informaData.cardid" @update:model-value="changeCardID" :rules="[
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.cardid"
+            @update:model-value="changeCardID"
+            :rules="[
               (val: string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
               (val: string) =>
                 val.length >= 13 ||
                 `${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
-            ]" label="เลขประจำตัวประชาชน" maxlength="13" mask="#############" />
+            ]"
+            label="เลขประจำตัวประชาชน"
+            maxlength="13"
+            mask="#############"
+          />
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
-          <selector :hide-dropdown-icon="!edit" hide-bottom-space :class="getClass(edit)" :readonly="!edit"
+          <selector
-            :borderless="!edit" :rules="[(val: string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]" :outlined="edit" dense
+            :hide-dropdown-icon="!edit"
-            lazy-rules v-model="informaData.prefixId" emit-value map-options option-label="name" :options="Ops.prefixOps"
+            hide-bottom-space
-            option-value="id" :label="`${'คำนำหน้าชื่อ'}`" use-input input-debounce="0" @filter="(inputValue: any,
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.prefixId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.prefixOps"
+            option-value="id"
+            :label="`${'คำนำหน้าชื่อ'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue: any,
               doneFn: Function) => filterSelector(inputValue, doneFn, 'prefixOps'
-              )" />
+              )"
+          />
         </div>
 
         <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input :class="getClass(edit)" hide-bottom-space :outlined="edit" dense lazy-rules :readonly="!edit"
+          <q-input
-            :borderless="!edit" v-model="informaData.firstname" :rules="[(val: string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+            :class="getClass(edit)"
-            :label="`${'ชื่อ'}`" />
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.firstname"
+            :rules="[(val: string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+            :label="`${'ชื่อ'}`"
+          />
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input :class="getClass(edit)" hide-bottom-space :outlined="edit" dense lazy-rules :readonly="!edit"
+          <q-input
-            :borderless="!edit" v-model="informaData.lastname"
+            :class="getClass(edit)"
-            :rules="[(val: string) => !!val || `${'กรุณากรอก นามสกุล'}`]" :label="`${'นามสกุล'}`" />
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.lastname"
+            :rules="[(val: string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+            :label="`${'นามสกุล'}`"
+          />
         </div>
         <div class="col-xs-6 col-sm-2 col-md-2">
-          <datepicker v-model="informaData.birthDate" :locale="'th'" autoApply :enableTimePicker="false" week-start="0"
+          <datepicker
-            :max-date="new Date()" :disabled="!edit" @update:model-value="handleDate">
+            v-model="informaData.birthDate"
+            :locale="'th'"
+            autoApply
+            :enableTimePicker="false"
+            week-start="0"
+            :max-date="new Date()"
+            :disabled="!edit"
+            @update:model-value="handleDate"
+          >
             <template #year="{ year }">
               {{ year + 543 }}
             </template>
@@ -43,15 +108,30 @@
               {{ parseInt(value + 543) }}
             </template>
             <template #trigger>
-              <q-input :class="getClass(edit)" hide-bottom-space :outlined="edit" dense lazy-rules :readonly="!edit"
+              <q-input
-                :borderless="!edit" :model-value="informaData.birthDate !== null
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                :model-value="
+                  informaData.birthDate !== null
                     ? date2Thai(informaData.birthDate)
                     : null
-                  " :rules="[(val: string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
+                "
-                :label="`${'วัน/เดือน/ปี เกิด'}`">
+                :rules="[(val: string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
+                :label="`${'วัน/เดือน/ปี เกิด'}`"
+              >
                 <template v-slot:prepend>
-                  <q-icon name="event" class="cursor-pointer" :style="edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'
+                  <q-icon
-                    ">
+                    name="event"
+                    class="cursor-pointer"
+                    :style="
+                      edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'
+                    "
+                  >
                   </q-icon>
                 </template>
               </q-input>
@@ -59,99 +139,273 @@
           </datepicker>
         </div>
         <div class="col-xs-6 col-sm-2 col-md-2">
-          <q-input :class="getClass(false)" hide-bottom-space dense lazy-rules readonly borderless
+          <q-input
-            :style="!edit ? '' : 'padding:0 12px;'" :model-value="informaData.age" :label="`${'อายุ'}`" />
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :style="!edit ? '' : 'padding:0 12px;'"
+            :model-value="informaData.age"
+            :label="`${'อายุ'}`"
+          />
         </div>
         <div class="col-xs-6 col-sm-2 col-md-2">
-          <selector :hide-dropdown-icon="!edit" hide-bottom-space :class="getClass(edit)" :readonly="!edit"
+          <selector
-            :borderless="!edit" :outlined="edit" dense lazy-rules v-model="informaData.genderId" emit-value map-options
+            :hide-dropdown-icon="!edit"
-            option-label="name" :options="Ops.genderOps" option-value="id" :label="`${'เพศ'}`" use-input
+            hide-bottom-space
-            input-debounce="0" @filter="(inputValue: any,
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.genderId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.genderOps"
+            option-value="id"
+            :label="`${'เพศ'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue: any,
               doneFn: Function) => filterSelector(inputValue, doneFn, 'genderOps'
-              )" />
+              )"
+          />
         </div>
         <div class="col-xs-6 col-sm-2 col-md-2">
-          <selector :hide-dropdown-icon="!edit" hide-bottom-space :class="getClass(edit)" :readonly="!edit"
+          <selector
-            :borderless="!edit" :outlined="edit" dense lazy-rules v-model="informaData.statusId" emit-value map-options
+            :hide-dropdown-icon="!edit"
-            option-label="name" :options="Ops.statusOps" option-value="id" :label="`${'สถานภาพ'}`" use-input
+            hide-bottom-space
-            input-debounce="0" @filter="(inputValue: any,
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.statusId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.statusOps"
+            option-value="id"
+            :label="`${'สถานภาพ'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue: any,
               doneFn: Function) => filterSelector(inputValue, doneFn, 'statusOps'
-              )" />
+              )"
+          />
         </div>
         <div class="col-xs-6 col-sm-2 col-md-2">
-          <q-input :class="getClass(edit)" hide-bottom-space :outlined="edit" dense lazy-rules :readonly="!edit"
+          <q-input
-            :borderless="!edit" v-model="informaData.nationality" :label="`${'สัญชาติ'}`" />
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.nationality"
+            :label="`${'สัญชาติ'}`"
+          />
         </div>
         <div class="col-xs-6 col-sm-2 col-md-2">
-          <q-input :class="getClass(edit)" hide-bottom-space :outlined="edit" dense lazy-rules :readonly="!edit"
+          <q-input
-            :borderless="!edit" v-model="informaData.ethnicity" :label="`${'เชื้อชาติ'}`" />
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.ethnicity"
+            :label="`${'เชื้อชาติ'}`"
+          />
         </div>
         <div class="col-xs-6 col-sm-2 col-md-2">
-          <selector :hide-dropdown-icon="!edit" hide-bottom-space :class="getClass(edit)" :readonly="!edit"
+          <selector
-            :borderless="!edit" :outlined="edit" dense lazy-rules v-model="informaData.religionId" emit-value map-options
+            :hide-dropdown-icon="!edit"
-            option-label="name" :options="Ops.religionOps" option-value="id" :label="`${'ศาสนา'}`" use-input
+            hide-bottom-space
-            input-debounce="0" @filter="(inputValue: any,
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.religionId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.religionOps"
+            option-value="id"
+            :label="`${'ศาสนา'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue: any,
               doneFn: Function) => filterSelector(inputValue, doneFn, 'religionOps'
-              )" />
+              )"
+          />
         </div>
         <div class="col-xs-6 col-sm-2 col-md-2">
-          <selector :hide-dropdown-icon="!edit" hide-bottom-space :class="getClass(edit)" :readonly="!edit"
+          <selector
-            :borderless="!edit" :outlined="edit" dense lazy-rules v-model="informaData.bloodId" emit-value map-options
+            :hide-dropdown-icon="!edit"
-            option-label="name" :options="Ops.bloodOps" option-value="id" :label="`${'หมู่เลือด'}`" use-input
+            hide-bottom-space
-            input-debounce="0" @filter="(inputValue: any,
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.bloodId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.bloodOps"
+            option-value="id"
+            :label="`${'หมู่เลือด'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue: any,
               doneFn: Function) => filterSelector(inputValue, doneFn, 'bloodOps'
-              )" clearable />
+              )"
+            clearable
+          />
         </div>
         <div class="col-xs-6 col-sm-2 col-md-2">
-          <q-input hide-bottom-space :outlined="edit" dense lazy-rules type="tel" :class="getClass(edit)"
+          <q-input
-            :readonly="!edit" :borderless="!edit" v-model="informaData.tel" :label="`${'เบอร์โทร'}`" :rules="[
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            type="tel"
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.tel"
+            :label="`${'เบอร์โทร'}`"
+            :rules="[
               (val: string) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
               (val: string) =>
                 val.length >= 10 ||
                 `${'กรุณากรอกเบอร์โทรให้ครบ'}`,
-            ]" mask="##########" />
+            ]"
+            mask="##########"
+          />
         </div>
-        <div class="col-xs-6 col-sm-3 col-md-3" v-if="informaData.profileType == 'employee'">
+        <div
-          <selector :hide-dropdown-icon="!edit" hide-bottom-space :class="getClass(edit)" :readonly="!edit"
+          class="col-xs-6 col-sm-3 col-md-3"
-            :borderless="!edit" :rules="[(val: string) => !!val || `${'กรุณาเลือก ประเภทการจ้าง'}`]" :outlined="edit" dense
+          v-if="informaData.profileType == 'employee'"
-            lazy-rules v-model="informaData.employeeType" emit-value map-options option-label="name"
+        >
-            :options="Ops.employeeTypeOps" option-value="id" :label="`${'ประเภทการจ้าง'}`" use-input input-debounce="0"
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือก ประเภทการจ้าง'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.employeeType"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.employeeTypeOps"
+            option-value="id"
+            :label="`${'ประเภทการจ้าง'}`"
+            use-input
+            input-debounce="0"
             @filter="(inputValue: any,
               doneFn: Function) => filterSelector(inputValue, doneFn, 'employeeTypeOps'
-              )" />
+              )"
+          />
         </div>
-        <div class="col-xs-6 col-sm-3 col-md-3" v-if="informaData.profileType == 'employee'">
+        <div
-          <selector :hide-dropdown-icon="!edit" hide-bottom-space :class="getClass(edit)" :readonly="!edit"
+          class="col-xs-6 col-sm-3 col-md-3"
-            :borderless="!edit" :rules="[(val: string) => !!val || `${'กรุณาเลือก ประเภทลูกจ้าง'}`]" :outlined="edit" dense
+          v-if="informaData.profileType == 'employee'"
-            lazy-rules v-model="informaData.employeeClass" emit-value map-options option-label="name"
+        >
-            :options="Ops.employeeClassOps" option-value="id" :label="`${'ประเภทลูกจ้าง'}`" use-input input-debounce="0"
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือก ประเภทลูกจ้าง'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.employeeClass"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.employeeClassOps"
+            option-value="id"
+            :label="`${'ประเภทลูกจ้าง'}`"
+            use-input
+            input-debounce="0"
             @filter="(inputValue: any,
               doneFn: Function) => filterSelector(inputValue, doneFn, 'employeeClassOps'
-              )" />
+              )"
+          />
         </div>
         <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
         <div class="col-xs-12 q-col-gutter-x-sm items-center flex q-my-sm">
           <label class="text-weight-bold">• เปลี่ยนชื่อ-นามสกุล</label>
-          <q-radio v-model="same" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="1" label="มี" dense
+          <q-radio
-            :disable="!edit" />
+            v-model="same"
-          <q-radio v-model="same" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="0" label="ไม่มี"
+            checked-icon="task_alt"
-            color="grey-9" dense :disable="!edit" />
+            unchecked-icon="panorama_fish_eye"
+            val="1"
+            label="มี"
+            dense
+            :disable="!edit"
+          />
+          <q-radio
+            v-model="same"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="0"
+            label="ไม่มี"
+            color="grey-9"
+            dense
+            :disable="!edit"
+          />
         </div>
         <div class="row col-12">
-          <OldName v-if="same == '1'" v-model:statusEdit="edit" :fetchDataInformation="fetchDataComponent"
+          <OldName
-            :perfixId="informaData.prefixId == null ? '' : informaData.prefixId" :firstname="informaData.firstname == null ? '' : informaData.firstname
+            v-if="same == '1'"
-              " :lastname="informaData.lastname == null ? '' : informaData.lastname" />
+            v-model:statusEdit="edit"
+            :fetchDataInformation="fetchDataComponent"
+            :perfixId="informaData.prefixId == null ? '' : informaData.prefixId"
+            :firstname="
+              informaData.firstname == null ? '' : informaData.firstname
+            "
+            :lastname="informaData.lastname == null ? '' : informaData.lastname"
+          />
         </div>
       </div>
     </q-form>
   </q-card>
-  <HistoryTable :rows="rowsHistory" :columns="columnsHistory" :filter="filterHistory"
+  <HistoryTable
-    :visible-columns="visibleColumnsHistory" v-model:modal="modalHistory" v-model:inputfilter="filterHistory"
+    :rows="rowsHistory"
-    v-model:inputvisible="visibleColumnsHistory" v-model:tittle="tittleHistory">
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
     <template #columns="props">
       <q-tr :props="props">
         <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div v-if="col.name == 'birthDate' || col.name == 'createdAt'" class="table_ellipsis">
+          <div
+            v-if="col.name == 'birthDate' || col.name == 'createdAt'"
+            class="table_ellipsis"
+          >
             {{ date2Thai(col.value) }}
           </div>
           <div v-else class="table_ellipsis">
@@ -502,7 +756,7 @@ const onCancel = async () => {
  * get รายการ ข้อมูลเกี่ยวกับบุคคล
  */
 const fetchPerson = async () => {
-  showLoader();
+  // showLoader();
   await http
     .get(config.API.person)
     .then((res) => {
@@ -557,9 +811,10 @@ const fetchPerson = async () => {
       Ops.value.religionOps = optionreligions;
       OpsFilter.value.religionOps = optionreligions;
     })
-    .catch((e: any) => { })
+    .catch((e: any) => {})
     .finally(() => {
-      hideLoader();
+      // hideLoader();
+      profileStore.isLoad++;
     });
 };
 
@@ -643,14 +898,14 @@ const clickHistory = async () => {
             e.employeeType == "gov"
               ? "งบประมาณเงินอุดหนุนรัฐบาล"
               : e.employeeType == "bkk"
-                ? "งบประมาณกรุงเทพมหานคร"
+              ? "งบประมาณกรุงเทพมหานคร"
-                : "-",
+              : "-",
           employeeClass:
             e.employeeClass == "perm"
               ? "ลูกจ้างประจำ"
               : e.employeeClass == "temp"
-                ? "ลูกจ้างชั่วคราว"
+              ? "ลูกจ้างชั่วคราว"
-                : "-",
+              : "-",
           createdFullName: e.createdFullName,
           createdAt: new Date(e.createdAt),
         });
@@ -759,7 +1014,6 @@ const calRetire = async (birth: Date) => {
 
 const fetchData = async () => {
   if (route.params.id) {
-    showLoader();
     await http
       .get(config.API.profileInforId(route.params.id.toString()))
       .then(async (res: any) => {
@@ -829,7 +1083,10 @@ const editData = async () => {
     nationality: informaData.value.nationality,
     race: informaData.value.ethnicity,
     religionId: informaData.value.religionId,
-    birthDate: informaData.value.birthDate != null ? dateToISO(informaData.value.birthDate) : dateToISO(new Date()),
+    birthDate:
+      informaData.value.birthDate != null
+        ? dateToISO(informaData.value.birthDate)
+        : dateToISO(new Date()),
     bloodGroupId: informaData.value.bloodId,
     relationshipId: informaData.value.statusId,
     telephoneNumber: informaData.value.tel,

src/modules/04_registry/components/Insignia.vue

@@ -66,9 +66,7 @@
         <DialogHeader tittle="เครื่องราชอิสริยาภรณ์" :close="clickClose" />
         <q-separator />
         <q-card-section class="q-p-sm">
-          <div
+          <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
-            class="row col-12  q-col-gutter-x-xs q-col-gutter-y-xs"
-          >
             <div class="col-xs-6 col-sm-6 col-md-6">
               <datepicker
                 menu-class-name="modalfix"
@@ -938,7 +936,7 @@ const fetchInsignia = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      store.isLoad++;
     });
 };
 
@@ -977,7 +975,8 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        // hideLoader();
+        store.isLoad++;
       });
   }
 };

src/modules/04_registry/components/Leave.vue

@@ -748,7 +748,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        store.isLoad++
       });
   }
 };

src/modules/04_registry/components/Other.vue

@@ -40,9 +40,8 @@
                 icon="mdi-history"
                 @click="clickHistory(props.row)"
               >
-            <q-tooltip>ประวัติแก้ไขอื่นๆ
+                <q-tooltip>ประวัติแก้ไขอื่นๆ </q-tooltip>
-</q-tooltip>
+              </q-btn>
-            </q-btn>
             </q-td>
           </q-tr>
         </template>
@@ -56,9 +55,7 @@
         <DialogHeader tittle="อื่นๆ" :close="clickClose" />
         <q-separator />
         <q-card-section class="q-p-sm">
-          <div
+          <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
-            class="row col-12  q-col-gutter-x-xs q-col-gutter-y-xs"
-          >
             <div class="col-xs-6 col-sm-6 col-md-6">
               <datepicker
                 menu-class-name="modalfix"
@@ -327,7 +324,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        store.isLoad++;
       });
   }
 };

src/modules/04_registry/components/Profile.vue

@@ -153,7 +153,7 @@
           </div>
         </div>
         <q-space />
-      
+
         <q-btn
           v-if="
             profileType == 'officer' ||
@@ -211,11 +211,7 @@
                 <q-item-section>ปรับระดับชั้นงาน - ย้าย</q-item-section>
               </q-item>
               <q-separator />
-              <q-item
+              <q-item clickable v-close-popup @click="clickPassaway">
-                clickable
-                v-close-popup
-                @click="clickPassaway"
-              >
                 <q-item-section style="min-width: 0px" avatar class="q-py-sm">
                 </q-item-section>
                 <q-item-section>ถึงแก่กรรม</q-item-section>
@@ -290,8 +286,14 @@
           <q-menu>
             <q-list style="min-width: 100px">
               <q-item clickable v-close-popup @click="clickKp7()">
-                <q-item-section v-if="profileType == 'officer'" class="text-blue">ก.พ.7/ก.ก.1</q-item-section>
+                <q-item-section
-                <q-item-section v-else class="text-blue">ทะเบียนประวัติ</q-item-section>
+                  v-if="profileType == 'officer'"
+                  class="text-blue"
+                  >ก.พ.7/ก.ก.1</q-item-section
+                >
+                <q-item-section v-else class="text-blue"
+                  >ทะเบียนประวัติ</q-item-section
+                >
               </q-item>
               <q-item clickable v-close-popup @click="clickKp7Short()">
                 <q-item-section class="text-primary"
@@ -747,7 +749,7 @@
   <full-loader :visibility="loader"></full-loader>
 </template>
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, onUnmounted, watch } from "vue";
 import { useDataStore } from "@/stores/data";
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
@@ -778,9 +780,11 @@ import OldName from "@/modules/04_registry/components/Information/OldName.vue";
 import type { DataOption } from "@/modules/04_registry/interface/index/Main";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useProfileDataStore } from "@/modules/04_registry/store";
 
 const $q = useQuasar();
 const store = useDataStore();
+const profileStore = useProfileDataStore();
 const { changeTab } = store;
 const reasonDeath = ref("");
 const deathCertificateNo = ref("");
@@ -899,7 +903,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      profileStore.isLoad++;
     });
 };
 
@@ -1091,7 +1095,7 @@ const helpPost = async () => {
       })
       .finally(() => {
         hideLoader();
-        router.push('/help-government')
+        router.push("/help-government");
       });
   });
 };
@@ -1111,7 +1115,7 @@ const repatriationPost = async () => {
       })
       .finally(() => {
         hideLoader();
-        router.push('/repatriate')
+        router.push("/repatriate");
       });
   });
 };
@@ -1131,7 +1135,7 @@ const appointPost = async () => {
       })
       .finally(() => {
         hideLoader();
-        router.push('/appoint-promote')
+        router.push("/appoint-promote");
       });
   });
 };
@@ -1152,7 +1156,7 @@ const appointEmployeePost = async () => {
       })
       .finally(() => {
         hideLoader();
-        router.push('/appoint-employee')
+        router.push("/appoint-employee");
       });
   });
 };
@@ -1180,7 +1184,7 @@ const outPost = async () => {
       })
       .finally(() => {
         hideLoader();
-        router.push('/dismiss-order')
+        router.push("/dismiss-order");
       });
   });
 };
@@ -1200,7 +1204,7 @@ const dischargePost = async () => {
       })
       .finally(() => {
         hideLoader();
-        router.push('/discharged')
+        router.push("/discharged");
       });
   });
 };
@@ -1220,7 +1224,7 @@ const expulsionPost = async () => {
       })
       .finally(() => {
         hideLoader();
-        router.push('/expulsion')
+        router.push("/expulsion");
       });
   });
 };
@@ -1240,7 +1244,7 @@ const otherPost = async () => {
       })
       .finally(() => {
         hideLoader();
-        router.push('/other')
+        router.push("/other");
       });
   });
 };
@@ -1495,6 +1499,14 @@ const clickSaveDeceased = async () => {
     .onCancel(() => {})
     .onDismiss(() => {});
 };
+
+watch(
+  () => profileStore.isLoad,
+  () => {
+    profileStore.isLoad >= 33 && hideLoader();
+  }
+);
+onUnmounted(() => (profileStore.isLoad = 0));
 </script>
 <style>
 .image-size-default {

src/modules/04_registry/components/Record.vue

@@ -507,7 +507,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        store.isLoad++
       });
   }
 };

src/modules/04_registry/components/Salary.vue

@@ -383,7 +383,7 @@
                         hide-bottom-space
                       /> -->
                       <CurrencyInput
-                      lazy-rules
+                        lazy-rules
                         v-model="amount"
                         :edit="edit"
                         :options="{
@@ -396,7 +396,7 @@
                     </div>
                     <div class="col-xs-4 col-sm-4 col-md-4">
                       <CurrencyInput
-                      lazy-rules
+                        lazy-rules
                         v-model="positionSalaryAmount"
                         :edit="edit"
                         :options="{
@@ -434,7 +434,7 @@
                         hide-bottom-space
                       /> -->
                       <CurrencyInput
-                      lazy-rules
+                        lazy-rules
                         v-model="mouthSalaryAmount"
                         :edit="edit"
                         :options="{
@@ -1483,7 +1483,7 @@ const nodeTree = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      store.isLoad++;
     });
 };
 
@@ -1568,7 +1568,8 @@ const fetchPosition = async () => {
     })
     .catch((e: any) => {})
     .finally(() => {
-      hideLoader();
+      // hideLoader();
+      store.isLoad++;
     });
 };
 
@@ -1578,7 +1579,7 @@ const fetchData = async () => {
     await http
       .get(config.API.profileSalaryId(profileId.value))
       .then((res) => {
-        let data = res.data.result;      
+        let data = res.data.result;
         rows.value = [];
         data.map((e: ResponseObject) => {
           rows.value.push({
@@ -1624,7 +1625,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        store.isLoad++;
       });
   }
 };

src/modules/04_registry/components/SalaryEmployee.vue

@@ -1300,14 +1300,14 @@ onMounted(async () => {
 });
 
 const fetchDataSelector = async () => {
-  showLoader();
+  // showLoader();
   await fetchEmployeePosition();
   await fetchEmployeePositionSide();
   await fetchEmployeeLevel();
   await fetchEmployeeGroup();
   await fetchAgency();
   await nodeTree();
-  hideLoader();
+  // hideLoader();
 };
 // ตำแหน่ง
 const fetchEmployeePosition = async () => {
@@ -1416,7 +1416,7 @@ const nodeTree = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      store.isLoad++
     });
 };
 
@@ -1548,7 +1548,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        store.isLoad++
       });
   }
 };

src/modules/04_registry/components/SalaryEmployeeTemp.vue

@@ -1329,14 +1329,14 @@ onMounted(async () => {
 });
 
 const fetchDataSelector = async () => {
-  showLoader();
+  // showLoader();
   await fetchEmployeePosition();
   await fetchEmployeePositionSide();
   await fetchEmployeeLevel();
   await fetchEmployeeGroup();
   await fetchAgency();
   await nodeTree();
-  hideLoader();
+  // hideLoader();
 };
 // ตำแหน่ง
 const fetchEmployeePosition = async () => {
@@ -1445,7 +1445,7 @@ const nodeTree = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      store.isLoad++
     });
 };
 
@@ -1575,7 +1575,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        store.isLoad++
       });
   }
 };

src/modules/04_registry/components/Talent.vue

@@ -380,7 +380,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        store.isLoad++
       });
   }
 };

src/modules/04_registry/components/Train.vue

@@ -50,8 +50,8 @@
                 icon="mdi-history"
                 @click="clickHistory(props.row)"
               >
-            <q-tooltip>ประวัติแก้ไขการฝึกอบรม/ดูงาน</q-tooltip>
+                <q-tooltip>ประวัติแก้ไขการฝึกอบรม/ดูงาน</q-tooltip>
-            </q-btn>
+              </q-btn>
             </q-td>
           </q-tr>
         </template>
@@ -65,9 +65,7 @@
         <DialogHeader tittle="การฝึกอบรม/ดูงาน" :close="clickClose" />
         <q-separator />
         <q-card-section class="q-p-sm">
-          <div
+          <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
-            class="row col-12  q-col-gutter-x-xs q-col-gutter-y-xs"
-          >
             <div class="col-xs-6 col-sm-6 col-md-6">
               <q-input
                 :class="getClass(edit)"
@@ -784,7 +782,8 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        // hideLoader();
+        store.isLoad++;
       });
   }
 };

src/modules/04_registry/components/Work.vue

@@ -583,7 +583,7 @@ const fetchData = async () => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        store.isLoad++
       });
   }
 };

src/modules/04_registry/store.ts

@@ -2,7 +2,7 @@ import { ref, computed } from "vue";
 import { defineStore } from "pinia";
 
 export const useProfileDataStore = defineStore("profile", () => {
-  const emplployeeClass = ref<string | null>('')
+  const emplployeeClass = ref<string | null>("");
   interface profile {
     main: { columns: String[] };
     education: { columns: String[] };
@@ -73,7 +73,10 @@ export const useProfileDataStore = defineStore("profile", () => {
     profileData.value = JSON.parse(localStorage.getItem("profile") || "{}");
   }
 
+  const isLoad = ref<number>(0);
+
   return {
+    isLoad,
     profileData,
     changeProfileColumns,
     birthDate,