From 5d20d4f27968f9230bba2be8bcb9c9cc984914ab Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Mon, 24 Jul 2023 17:11:12 +0700
Subject: [PATCH] =?UTF-8?q?ui=20=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=20=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9=E0=B8=A5=E0=B8=97?=
 =?UTF-8?q?=E0=B8=B0=E0=B9=80=E0=B8=9A=E0=B8=B5=E0=B8=A2=E0=B8=99=E0=B8=9B?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1=E0=B8=95=E0=B8=B4=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B9=E0=B8=81=E0=B8=88=E0=B9=89=E0=B8=B2=E0=B8=87=20//=20a?=
 =?UTF-8?q?pi?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/registry/api.profile.ts               |    1 +
 .../08_registryEmployee/views/Detail.vue      |  177 +--
 .../08_registryEmployee/views/information.vue | 1096 +++++++++++++++++
 3 files changed, 1099 insertions(+), 175 deletions(-)
 create mode 100644 src/modules/08_registryEmployee/views/information.vue

diff --git a/src/api/registry/api.profile.ts b/src/api/registry/api.profile.ts
index b91555296..0e30e10d6 100644
--- a/src/api/registry/api.profile.ts
+++ b/src/api/registry/api.profile.ts
@@ -180,4 +180,5 @@ export default {
     `${profile}changeName/history/${profileId}`,
 
   profileCitizenId: (citizenId: string) => `${profile}citizenId/${citizenId}`,
+  profileEmployeeIn: `${profile}information/employee`,
 };
diff --git a/src/modules/08_registryEmployee/views/Detail.vue b/src/modules/08_registryEmployee/views/Detail.vue
index 766423fb2..4819f4d54 100644
--- a/src/modules/08_registryEmployee/views/Detail.vue
+++ b/src/modules/08_registryEmployee/views/Detail.vue
@@ -12,74 +12,6 @@
           :statusAdd="true"
         />
       </div>
-      <div id="government" name="16" class="row col-12">
-        <!-- <Government v-model:statusEdit="statusEdit" :statusAdd="true" /> -->
-      </div>
-      <div id="address" name="17" class="row col-12">
-        <Address v-model:statusEdit="statusEdit" :statusAdd="true" />
-      </div>
-      <div id="family" name="18" class="row col-12">
-        <Family v-model:statusEdit="statusEdit" :statusAdd="true" />
-      </div>
-      <div id="certicate" name="15" class="row col-12">
-        <Certicate
-          v-model:statusEdit="statusEdit"
-          :statusAdd="true"
-          profileType="employee"
-        />
-      </div>
-      <div id="education" name="2" class="row col-12 q-mt-md">
-        <EducationVue v-model:statusEdit="statusEdit" :statusAdd="true" />
-      </div>
-      <div id="training" name="3" class="row col-12 q-mt-md">
-        <TrainVue v-model:statusEdit="statusEdit" :statusAdd="true" />
-      </div>
-      <div id="insignia" name="4" class="row col-12 q-mt-md">
-        <InsigniaVue v-model:statusEdit="statusEdit" :statusAdd="true" />
-      </div>
-      <div id="coined" name="5" class="row col-12 q-mt-md">
-        <CoinedVue
-          v-model:statusEdit="statusEdit"
-          :statusAdd="true"
-          profileType="employee"
-        />
-      </div>
-      <div id="assessment" name="6" class="row col-12 q-mt-md">
-        <AssessmentVue
-          v-model:statusEdit="statusEdit"
-          :statusAdd="true"
-          profileType="employee"
-        />
-      </div>
-      <div id="position" name="7" class="row col-12 q-mt-md">
-        <!-- <SalaryVue
-          v-model:statusEdit="statusEdit" :statusAdd="true"
-          v-if="profileType === 'officer'"
-        /> -->
-
-        <SalaryEmployeeVue v-model:statusEdit="statusEdit" :statusAdd="true" />
-      </div>
-      <div id="rule" name="8" class="row col-12 q-mt-md">
-        <DisciplineVue v-model:statusEdit="statusEdit" :statusAdd="true" />
-      </div>
-      <div id="leave" name="9" class="row col-12 q-mt-md">
-        <LeaveVue v-model:statusEdit="statusEdit" :statusAdd="true" />
-      </div>
-      <div id="talent" name="10" class="row col-12 q-mt-md">
-        <TalentVue v-model:statusEdit="statusEdit" :statusAdd="true" />
-      </div>
-      <div id="work" name="11" class="row col-12 q-mt-md">
-        <WorkVue v-model:statusEdit="statusEdit" :statusAdd="true" />
-      </div>
-      <div id="record" name="12" class="row col-12 q-mt-md">
-        <RecordVue v-model:statusEdit="statusEdit" :statusAdd="true" />
-      </div>
-      <div id="other" name="13" class="row col-12 q-mt-md">
-        <OtherVue v-model:statusEdit="statusEdit" :statusAdd="true" />
-      </div>
-      <div id="document" name="14" class="row col-12 q-my-md">
-        <DocumentVue v-model:statusEdit="statusEdit" :statusAdd="true" />
-      </div>
     </div>
     <q-page-sticky
       position="top"
@@ -152,9 +84,7 @@
             <div class="text-bold q-pb-xs text-name">
               เพิ่มข้อมูลทะเบียนประวัติ
             </div>
-            <div class="text-bold q-pb-xs text-sub">
-              ลูกจ้างชั่วคราว
-            </div>
+            <div class="text-bold q-pb-xs text-sub">ลูกจ้างชั่วคราว</div>
           </div>
         </div>
         <q-space />
@@ -512,26 +442,7 @@ import { useDataStore } from "@/stores/data";
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
-import EducationVue from "@/modules/04_registry/components/Education.vue";
-import TrainVue from "@/modules/04_registry/components/Train.vue";
-import InsigniaVue from "@/modules/04_registry/components/Insignia.vue";
-import CoinedVue from "@/modules/04_registry/components/Coin.vue";
-import AssessmentVue from "@/modules/04_registry/components/Assessment.vue";
-import SalaryVue from "@/modules/04_registry/components/Salary.vue";
-import SalaryEmployeeVue from "@/modules/04_registry/components/SalaryEmployee.vue";
-import DisciplineVue from "@/modules/04_registry/components/Discipline.vue";
-import LeaveVue from "@/modules/04_registry/components/Leave.vue";
-import TalentVue from "@/modules/04_registry/components/Talent.vue";
-import WorkVue from "@/modules/04_registry/components/Work.vue";
-import RecordVue from "@/modules/04_registry/components/Record.vue";
-import OtherVue from "@/modules/04_registry/components/Other.vue";
-import DocumentVue from "@/modules/04_registry/components/Document.vue";
-import Certicate from "@/modules/04_registry/components/Information/Certicate.vue";
-import Information from "@/modules/04_registry/components/Information/Information.vue";
-import Government from "@/modules/04_registry/components/Information/Government.vue";
-import Address from "@/modules/04_registry/components/Information/Address.vue";
-import Family from "@/modules/04_registry/components/Information/Family.vue";
-import OldName from "@/modules/04_registry/components/Information/OldName.vue";
+import Information from "@/modules/08_registryEmployee/views/information.vue";
 import type { DataOption } from "@/modules/04_registry/interface/index/Main";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -547,12 +458,6 @@ const imageUrl = ref<any>(null);
 const inputImage = ref<any>(null);
 const fullname = ref<string>("");
 const position = ref<string>("นักจัดการงานทั่วไป");
-const pdfSrc = ref<string>("");
-const pdfCurrentPage = ref<number>();
-const pdfTotalPage = ref<number>();
-const pdfSrcShort = ref<string>("");
-const pdfCurrentPageShort = ref<number>();
-const pdfTotalPageShort = ref<number>();
 const dialog = ref<boolean>(false);
 const dialogShort = ref<boolean>(false);
 const dialogLeave = ref<boolean>(false);
@@ -851,19 +756,6 @@ const clickKp7 = async () => {
   //     });
 };
 
-const downloadFilePDF = async (res: string, fileName: string) => {
-  const link = document.createElement("a");
-  //   link.href = window.URL.createObjectURL(new Blob([res]));
-  link.href = window.URL.createObjectURL(
-    new Blob([res], {
-      type: "application/vnd.ms-excel",
-    })
-  );
-  link.setAttribute("download", fileName);
-  document.body.appendChild(link);
-  link.click();
-};
-
 const clickKp7Short = async () => {
   if (profileId.value !== "") {
     window.open(config.API.profileKp7ShortId(profileId.value));
@@ -884,71 +776,6 @@ const clickKp7Short = async () => {
   //       loaderPage(false);
   //     });
 };
-
-const clickRetire = async () => {
-  if (reasonStatus.value == true) {
-    dialogMessage(
-      $q,
-      "โปรดยืนยัน",
-      "ต้องการย้ายข้อมูลจากพ้นราชการไปถือครองใช่หรือไม่",
-      "info",
-      undefined,
-      "primary",
-      Retire,
-      undefined,
-      false
-    );
-  } else {
-    leaveDate.value = new Date();
-    leaveDetail.value = "";
-    leaveNumberOrder.value = "";
-    leaveDateOrder.value = new Date();
-    reason.value = "";
-    dialogLeave.value = true;
-  }
-};
-
-const Retire = async () => {
-  if (profileId.value !== "") {
-    if (reasonStatus.value == true) {
-      loaderPage(true);
-      await http
-        .put(config.API.profileReactive(profileId.value))
-        .then((res) => {
-          if (res.data) {
-            dialogLeave.value = false;
-          }
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(() => {
-          router.push("/registry");
-        });
-    } else {
-      loaderPage(true);
-      await http
-        .put(config.API.profileDeactive(profileId.value), {
-          leaveDate: dateToISO(leaveDate.value),
-          leaveDetail: leaveDetail.value,
-          leaveNumberOrder: leaveNumberOrder.value,
-          leaveDateOrder: dateToISO(leaveDateOrder.value),
-          reason: reason.value,
-        })
-        .then((res) => {
-          if (res.data) {
-            dialogLeave.value = false;
-          }
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(() => {
-          router.push("/registry");
-        });
-    }
-  }
-};
 </script>
 <style>
 .image-size-default {
diff --git a/src/modules/08_registryEmployee/views/information.vue b/src/modules/08_registryEmployee/views/information.vue
new file mode 100644
index 000000000..6c0367fb4
--- /dev/null
+++ b/src/modules/08_registryEmployee/views/information.vue
@@ -0,0 +1,1096 @@
+<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()"
+      :disable="statusEdit"
+      :cancel="onCancel"
+      :historyClick="clickHistory"
+      :addEmployee="statusAdd()"
+    />
+    <q-form ref="myform" class="col-12">
+      <div class="row col-12 items-center 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"
+            @update:model-value="changeCardID"
+            :rules="[
+                (val:string) => !!val || `${'กรุณากรอก เลขบัตรประจำตัวประชาชน'}`,
+                (val:string) =>
+                  val.length >= 13 ||
+                  `${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,
+              ]"
+            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,
+                        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="`${'ชื่อ'}`"
+          />
+        </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="`${'นามสกุล'}`"
+          />
+        </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"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ 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="date2Thai(informaData.birthDate)"
+                :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>
+                </template>
+              </q-input>
+            </template>
+          </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="`${'อายุ'}`"
+          />
+        </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,
+                        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,
+                        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="`${'สัญชาติ'}`"
+          />
+        </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="`${'เชื้อชาติ'}`"
+          />
+        </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,
+                        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,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'bloodOps'
+                        ) "
+            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="`${'เบอร์โทร'}`"
+            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"
+            @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"
+            @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
+                        ) "
+          />
+        </div>
+        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></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"
+  >
+    <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"
+          >
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
+import { useQuasar } from "quasar";
+import type {
+  Information,
+  DataOption,
+} from "@/modules/04_registry/components/profileType";
+import { defaultInformation } from "@/modules/04_registry/components/profileType";
+import type {
+  RequestItemsHistoryObject,
+  Columns,
+} from "@/modules/04_registry/interface/request/Information";
+import type { ResponseObject } from "@/modules/04_registry/interface/response/Information";
+import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
+import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRoute } from "vue-router";
+import { useProfileDataStore } from "@/modules/08_registryEmployee/store";
+import type { QTableColumn, QForm } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+  fetchDataProfile: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  statusAdd: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emit = defineEmits(["update:statusEdit"]);
+
+const route = useRoute();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { date2Thai, success, dateToISO, messageError, dialogMessage } = mixin;
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const profileStore = useProfileDataStore();
+const { changeRetireText, changeBirth } = profileStore;
+const edit = ref<boolean>(false);
+const defaultCitizenData = ref<string | null>("");
+const informaData = ref<Information>(defaultInformation);
+const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลส่วนตัว"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const myform = ref<QForm | null>(null);
+const dateBefore = ref<Date>(new Date());
+const same = ref<string>("0");
+const Ops = ref<InformationOps>({
+  prefixOps: [],
+  prefixOldOps: [],
+  genderOps: [],
+  bloodOps: [],
+  statusOps: [],
+  religionOps: [],
+  employeeClassOps: [
+    { id: "perm", name: "ลูกจ้างประจำ" },
+    { id: "temp", name: "ลูกจ้างชั่วคราว" },
+  ],
+  employeeTypeOps: [
+    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
+    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
+  ],
+});
+const OpsFilter = ref<InformationOps>({
+  prefixOps: [],
+  prefixOldOps: [],
+  genderOps: [],
+  bloodOps: [],
+  statusOps: [],
+  religionOps: [],
+  employeeClassOps: [
+    { id: "perm", name: "ลูกจ้างประจำ" },
+    { id: "temp", name: "ลูกจ้างชั่วคราว" },
+  ],
+  employeeTypeOps: [
+    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
+    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
+  ],
+});
+const columnsHistory = ref<QTableColumn[]>([
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขบัตรประจำตัวประชาชน",
+    sortable: true,
+    field: "citizenId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "prefix",
+    align: "left",
+    label: "คำนำหน้าชื่อ",
+    sortable: true,
+    field: "prefix",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "firstName",
+    align: "left",
+    label: "ชื่อ",
+    sortable: true,
+    field: "firstName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastName",
+    align: "left",
+    label: "นามสกุล",
+    sortable: true,
+    field: "lastName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "birthDate",
+    align: "left",
+    label: "วัน/เดือน/ปี เกิด",
+    sortable: true,
+    field: "birthDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "gender",
+    align: "left",
+    label: "เพศ",
+    sortable: true,
+    field: "gender",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "relationship",
+    align: "left",
+    label: "สถานภาพ",
+    sortable: true,
+    field: "relationship",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "bloodGroup",
+    align: "left",
+    label: "หมู่เลือด",
+    sortable: true,
+    field: "bloodGroup",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "nationality",
+    align: "left",
+    label: "สัญชาติ",
+    sortable: true,
+    field: "nationality",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "race",
+    align: "left",
+    label: "เชื้อชาติ",
+    sortable: true,
+    field: "race",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "religion",
+    align: "left",
+    label: "ศาสนา",
+    sortable: true,
+    field: "religion",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "telephoneNumber",
+    align: "left",
+    label: "เบอร์โทร",
+    sortable: true,
+    field: "telephoneNumber",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "employeeType",
+    align: "left",
+    label: "ประเภทการจ้าง",
+    sortable: true,
+    field: "employeeType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "employeeClass",
+    align: "left",
+    label: "ประเภทลูกจ้าง",
+    sortable: true,
+    field: "employeeClass",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "citizenId",
+  "prefix",
+  "firstName",
+  "lastName",
+  "birthDate",
+  "gender",
+  "relationship",
+  "bloodGroup",
+  "nationality",
+  "race",
+  "religion",
+  "telephoneNumber",
+  "employeeType",
+  "employeeClass",
+  "createdFullName",
+  "createdAt",
+]);
+
+onMounted(async () => {
+  await fetchPerson();
+  await fetchData();
+  emit("update:statusEdit", false);
+  defaultAdd();
+});
+
+const statusAdd = () => props.statusAdd;
+
+const defaultAdd = () => {
+  if (props.statusAdd) {
+    edit.value = props.statusAdd;
+    informaData.value = {
+      cardid: null,
+      age: null,
+      prefix: null,
+      prefixId: null,
+      firstname: null,
+      lastname: null,
+      birthDate: new Date(),
+      genderId: null,
+      bloodId: null,
+      nationality: null,
+      ethnicity: null,
+      statusId: null,
+      religionId: null,
+      tel: null,
+      employeeType: null,
+      employeeClass: null,
+      profileType: null,
+    };
+  }
+};
+
+const onCancel = async () => {
+  if (myform.value != null) {
+    myform.value.reset();
+  }
+  await fetchData();
+};
+
+/**
+ * get รายการ ข้อมูลเกี่ยวกับบุคคล
+ */
+const fetchPerson = async () => {
+  loaderPage(true);
+  await http
+    .get(config.API.person)
+    .then((res) => {
+      const data = res.data.result;
+      let optionbloodGroups: DataOption[] = [];
+      data.bloodGroups.map((r: any) => {
+        optionbloodGroups.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.bloodOps = optionbloodGroups;
+      OpsFilter.value.bloodOps = optionbloodGroups;
+
+      let optiongenders: DataOption[] = [];
+      data.genders.map((r: any) => {
+        optiongenders.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.genderOps = optiongenders;
+      OpsFilter.value.genderOps = optiongenders;
+
+      let optionprefixs: DataOption[] = [];
+      data.prefixs.map((r: any) => {
+        optionprefixs.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.prefixOps = optionprefixs;
+      OpsFilter.value.prefixOps = optionprefixs;
+
+      let optionrelationships: DataOption[] = [];
+      data.relationships.map((r: any) => {
+        optionrelationships.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.statusOps = optionrelationships;
+      OpsFilter.value.statusOps = optionrelationships;
+
+      let optionreligions: DataOption[] = [];
+      data.religions.map((r: any) => {
+        optionreligions.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.religionOps = optionreligions;
+      OpsFilter.value.religionOps = optionreligions;
+    })
+    .catch((e: any) => {})
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+const changeCardID = (value: string | number | null) => {
+  if (value != null && typeof value == "string") {
+    if (value.length == 13 && value != defaultCitizenData.value) {
+      async () => {
+        await checkCitizen(value);
+        informaData.value.cardid = defaultCitizenData.value;
+      };
+    }
+  }
+};
+
+const checkCitizen = async (id: string) => {
+  loaderPage(true);
+  await http
+    .get(config.API.profileCitizenId(id))
+    .then((res) => {
+      const data = res.data.result.citizen;
+
+      if (!data) {
+        dialogMessage(
+          $q,
+          "ข้อความแจ้งเตือน",
+          "เลขบัตรประจำตัวประชาชนนี้มีการใช้งานแล้ว",
+          "warning",
+          undefined,
+          "orange",
+          undefined,
+          undefined,
+          true
+        );
+        informaData.value.cardid = defaultCitizenData.value;
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ */
+const clickHistory = async () => {
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileInforHisId(route.params.id.toString()))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: RequestItemsHistoryObject) => {
+        rowsHistory.value.push({
+          citizenId: e.citizenId,
+          prefix: e.prefix,
+          firstName: e.firstName,
+          lastName: e.lastName,
+          birthDate: new Date(e.birthDate),
+          gender: e.gender,
+          relationship: e.relationship,
+          bloodGroup: e.bloodGroup,
+          nationality: e.nationality,
+          race: e.race,
+          religion: e.religion,
+          telephoneNumber: e.telephoneNumber,
+          employeeType:
+            e.employeeType == "gov"
+              ? "งบประมาณเงินอุดหนุนรัฐบาล"
+              : e.employeeType == "bkk"
+              ? "งบประมาณกรุงเทพมหานคร"
+              : "-",
+          employeeClass:
+            e.employeeClass == "perm"
+              ? "ลูกจ้างประจำ"
+              : e.employeeClass == "temp"
+              ? "ลูกจ้างชั่วคราว"
+              : "-",
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+const filterSelector = (val: any, update: Function, refData: string) => {
+  switch (refData) {
+    case "prefixOps":
+      update(() => {
+        Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "genderOps":
+      update(() => {
+        Ops.value.genderOps = OpsFilter.value.genderOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "bloodOps":
+      update(() => {
+        Ops.value.bloodOps = OpsFilter.value.bloodOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "statusOps":
+      update(() => {
+        Ops.value.statusOps = OpsFilter.value.statusOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "religionOps":
+      update(() => {
+        Ops.value.religionOps = OpsFilter.value.religionOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "employeeClassOps":
+      update(() => {
+        Ops.value.employeeClassOps = OpsFilter.value.employeeClassOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "employeeTypeOps":
+      update(() => {
+        Ops.value.employeeTypeOps = OpsFilter.value.employeeTypeOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+};
+
+const handleDate = async (modelData: Date) => {
+  informaData.value.birthDate = modelData;
+  await calRetire(modelData);
+};
+
+const fetchDataComponent = async (modelData: Date) => {
+  await props.fetchDataProfile();
+  await fetchData();
+};
+
+const calRetire = async (birth: Date) => {
+  const body = {
+    birthDate: dateToISO(birth),
+  };
+  if (dateToISO(dateBefore.value) != dateToISO(birth)) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileCalRetire, body)
+      .then((res: any) => {
+        const data = res.data.result;
+        informaData.value.age = data.age;
+        changeRetireText(data.retireDate);
+        dateBefore.value = birth;
+      })
+      .catch((e: any) => {
+        messageError($q, e);
+        const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
+        informaData.value.birthDate = dateBefore.value;
+        changeRetireText(date2Thai(retire));
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+const fetchData = async () => {
+  if (route.params.id) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileInforId(route.params.id.toString()))
+      .then(async (res: any) => {
+        const data: ResponseObject = res.data.result;
+        defaultCitizenData.value = data.citizenId;
+        informaData.value.cardid = data.citizenId;
+        informaData.value.prefix = "";
+        informaData.value.prefixId = data.prefixId;
+        informaData.value.firstname = data.firstName;
+        informaData.value.lastname = data.lastName;
+        informaData.value.birthDate = new Date(data.birthDate);
+        informaData.value.genderId = data.genderId;
+        informaData.value.bloodId = data.bloodGroupId;
+        informaData.value.nationality = data.nationality;
+        informaData.value.ethnicity = data.race;
+        informaData.value.statusId = data.relationshipId;
+        informaData.value.religionId = data.religionId;
+        informaData.value.tel = data.telephoneNumber;
+        informaData.value.age = data.age;
+        informaData.value.employeeType = data.employeeType;
+        informaData.value.employeeClass = data.employeeClass;
+        informaData.value.profileType = data.profileType;
+        dateBefore.value = new Date(data.birthDate);
+        same.value = data.changeName == true ? "1" : "0";
+        await calRetire(new Date(dateToISO(new Date(data.birthDate))));
+        if (
+          data.profileType == "officer" &&
+          columnsHistory.value.length >= 15
+        ) {
+          columnsHistory.value.splice(13, 1);
+          columnsHistory.value.splice(12, 1);
+        }
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        //   loaderPage(false);
+        await props.fetchDataProfile();
+      });
+  }
+};
+
+const editData = async () => {
+  const body: any = {
+    citizenId: informaData.value.cardid,
+    prefixId: informaData.value.prefixId,
+    firstName: informaData.value.firstname,
+    lastName: informaData.value.lastname,
+    genderId: informaData.value.genderId,
+    nationality: informaData.value.nationality,
+    race: informaData.value.ethnicity,
+    religionId: informaData.value.religionId,
+    birthDate: dateToISO(informaData.value.birthDate) ?? dateToISO(new Date()),
+    bloodGroupId: informaData.value.bloodId,
+    relationshipId: informaData.value.statusId,
+    telephoneNumber: informaData.value.tel,
+    createdAt: new Date(),
+    age: null,
+    employeeType: informaData.value.employeeType,
+    employeeClass: informaData.value.employeeClass,
+    profileType: informaData.value.profileType,
+    createdFullName: "-",
+  };
+  loaderPage(true);
+  await http
+    .put(config.API.profileInforId(route.params.id.toString()), body)
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      edit.value = false;
+      emit("update:statusEdit", false);
+      await fetchData();
+      await changeBirth(informaData.value.birthDate ?? new Date());
+      loaderPage(false);
+    });
+};
+
+const addData = async () => {
+  const body = {
+    citizenId: informaData.value.cardid,
+    prefixId: informaData.value.prefixId,
+    firstName: informaData.value.firstname,
+    lastName: informaData.value.lastname,
+    genderId: informaData.value.genderId,
+    nationality: informaData.value.nationality,
+    race: informaData.value.ethnicity,
+    religionId: informaData.value.religionId,
+    birthDate: dateToISO(informaData.value.birthDate) ?? dateToISO(new Date()),
+    bloodGroupId: informaData.value.bloodId,
+    relationshipId: informaData.value.statusId,
+    telephoneNumber: informaData.value.tel,
+    createdAt: new Date(),
+    age: null,
+    employeeType: informaData.value.employeeType,
+    employeeClass: informaData.value.employeeClass,
+    profileType: informaData.value.profileType,
+    createdFullName: "-",
+  };
+  loaderPage(true);
+  //   await http
+  //     .post(config.API.profileEmployeeIn, body)
+  //     .then((res) => {
+  //       success($q, "บันทึกข้อมูลสำเร็จ");
+  //     })
+  //     .catch((e) => {
+  //       messageError($q, e);
+  //     })
+  //     .finally(async () => {
+  //       edit.value = false;
+  //   emit("update:statusEdit", false);
+  //   await fetchData();
+  //   await changeBirth(informaData.value.birthDate ?? new Date());
+  //   loaderPage(false);
+  // });
+  console.log(body);
+  loaderPage(false);
+};
+
+const saveData = async () => {
+  if (myform.value != null) {
+    await myform.value.validate().then(async (success: boolean) => {
+      if (success) {
+        if (props.statusAdd) {
+          await addData();
+        } else {
+          await editData();
+        }
+      }
+    });
+  }
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>