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

2024-01-12 11:10:42 +07:00 · 2024-01-12 11:10:42 +07:00 · 77d8dee255
commit 77d8dee255
parent 9b4b5010c7
22 changed files with 468 additions and 190 deletions
--- a/src/modules/04_registry/components/Information/Address.vue
+++ b/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 () => {
--- a/src/modules/04_registry/components/Information/Certicate.vue
+++ b/src/modules/04_registry/components/Information/Certicate.vue
@ -69,9 +69,7 @@
        />
        <q-separator />
        <q-card-section class="q-p-sm">
-          <div
-            class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs"
-          >
+          <div 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++;
      });
  }
 };
--- a/src/modules/04_registry/components/Information/Family.vue
+++ b/src/modules/04_registry/components/Information/Family.vue
@ -1284,17 +1284,17 @@
            </div>
            <div class="col">
              <q-input
-              :class="getClass(false)"
-              hide-bottom-space
-              :outlined="false"
-              dense
-              lazy-rules
-              :readonly="true"
-              :borderless="true"
-              v-model="items.childrenFirstName"
-              :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
-              :label="`${'ชื่อ'}`"
-            />
+                :class="getClass(false)"
+                hide-bottom-space
+                :outlined="false"
+                dense
+                lazy-rules
+                :readonly="true"
+                :borderless="true"
+                v-model="items.childrenFirstName"
+                :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+                :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++
      });
  }
 };
--- a/src/modules/04_registry/components/Information/Government.vue
+++ b/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++;
    });
 };

--- a/src/modules/04_registry/components/Information/Information.vue
+++ b/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()"
-      :changeBtn="changeBtn" :disable="statusEdit" :cancel="onCancel" :historyClick="clickHistory"
-      :addEmployee="statusAdd()" />
+    <HeaderTop
+      v-model:edit="edit"
+      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"
-            :borderless="!edit" v-model="informaData.cardid" @update:model-value="changeCardID" :rules="[
+          <q-input
+            :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"
-            :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,
+          <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.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"
-            :borderless="!edit" v-model="informaData.firstname" :rules="[(val: string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
-            :label="`${'ชื่อ'}`" />
+          <q-input
+            :class="getClass(edit)"
+            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"
-            :borderless="!edit" v-model="informaData.lastname"
-            :rules="[(val: string) => !!val || `${'กรุณากรอก นามสกุล'}`]" :label="`${'นามสกุล'}`" />
+          <q-input
+            :class="getClass(edit)"
+            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"
-            :max-date="new Date()" :disabled="!edit" @update:model-value="handleDate">
+          <datepicker
+            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"
-                :borderless="!edit" :model-value="informaData.birthDate !== null
+              <q-input
+                :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
-            :style="!edit ? '' : 'padding:0 12px;'" :model-value="informaData.age" :label="`${'อายุ'}`" />
+          <q-input
+            :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"
-            :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,
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :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"
-            :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,
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :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"
-            :borderless="!edit" v-model="informaData.nationality" :label="`${'สัญชาติ'}`" />
+          <q-input
+            :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"
-            :borderless="!edit" v-model="informaData.ethnicity" :label="`${'เชื้อชาติ'}`" />
+          <q-input
+            :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"
-            :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,
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :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"
-            :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,
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :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)"
-            :readonly="!edit" :borderless="!edit" v-model="informaData.tel" :label="`${'เบอร์โทร'}`" :rules="[
+          <q-input
+            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'">
-          <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"
+        <div
+          class="col-xs-6 col-sm-3 col-md-3"
+          v-if="informaData.profileType == 'employee'"
+        >
+          <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'">
-          <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"
+        <div
+          class="col-xs-6 col-sm-3 col-md-3"
+          v-if="informaData.profileType == 'employee'"
+        >
+          <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
-            :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" />
+          <q-radio
+            v-model="same"
+            checked-icon="task_alt"
+            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"
-            :perfixId="informaData.prefixId == null ? '' : informaData.prefixId" :firstname="informaData.firstname == null ? '' : informaData.firstname
-              " :lastname="informaData.lastname == null ? '' : informaData.lastname" />
+          <OldName
+            v-if="same == '1'"
+            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"
-    :visible-columns="visibleColumnsHistory" v-model:modal="modalHistory" v-model:inputfilter="filterHistory"
-    v-model:inputvisible="visibleColumnsHistory" v-model:tittle="tittleHistory">
+  <HistoryTable
+    :rows="rowsHistory"
+    :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,