From 7597f271a65b014fb37b43015ce73c34a2118740 Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Wed, 1 May 2024 14:19:25 +0700
Subject: [PATCH] =?UTF-8?q?=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=20?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=9A=E0=B9=82=E0=B8=AD=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../04_registry/interface/index/Main.ts       |  27 +
 .../components/Receive/AddEmployee/Main.vue   | 697 +++++++++++++++---
 2 files changed, 616 insertions(+), 108 deletions(-)

diff --git a/src/modules/04_registry/interface/index/Main.ts b/src/modules/04_registry/interface/index/Main.ts
index b5032e628..4405392c3 100644
--- a/src/modules/04_registry/interface/index/Main.ts
+++ b/src/modules/04_registry/interface/index/Main.ts
@@ -104,6 +104,31 @@ interface FormSalaryNewRef {
   [key: string]: any;
 }
 
+interface FormAddPerson {
+  birthDate: Date | null;
+  prefix: string;
+  firstName: string;
+  lastName: string;
+  citizenId: string;
+  age: string | null;
+  genderId: string | null;
+  bloodId: string | null;
+  nationality: string | null;
+  ethnicity: string | null;
+  statusId: string | null;
+  religionId: string | null;
+  tel: string | null;
+  employeeType: string | null;
+  employeeClass: string | null;
+  profileType: string | null;
+}
+
+interface DataType {
+  id: string;
+  posLevels: any;
+  posTypeName: string;
+  posTypeRank: number;
+}
 export type {
   FormSalaryNew,
   FormSalaryNewRef,
@@ -121,4 +146,6 @@ export type {
   DataOptionLeave,
   OptionType,
   OptionLevel,
+  FormAddPerson,
+  DataType,
 };
diff --git a/src/modules/05_placement/components/Receive/AddEmployee/Main.vue b/src/modules/05_placement/components/Receive/AddEmployee/Main.vue
index 9ab021f2e..6c06adea2 100644
--- a/src/modules/05_placement/components/Receive/AddEmployee/Main.vue
+++ b/src/modules/05_placement/components/Receive/AddEmployee/Main.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, reactive, watch } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 
@@ -12,11 +12,16 @@ import { useProfileDataStore } from "@/modules/08_registryEmployee/store";
 import type {
   Information,
   DataOption,
-  DataOptioninfo
+  DataOptioninfo,
 } from "@/modules/04_registry/components/profileType";
-import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
+import type {
+  InformationOps,
+  FormAddPerson,
+  DataType,
+} from "@/modules/04_registry/interface/index/Main";
 import HeaderTop from "@/modules/08_registryEmployee/components/AddEmployee/HeaderTop.vue";
 
+const retireDate = ref<Date>();
 const router = useRouter();
 const $q = useQuasar();
 const mixin = useCounterMixin();
@@ -34,14 +39,16 @@ const {
 const profileStore = useProfileDataStore();
 const { changeRetireText, changeBirth } = profileStore;
 
-const informaData = ref<Information>({
-  cardid: null,
-  age: null,
-  prefix: null,
-  prefixId: null,
-  firstname: null,
-  lastname: null,
+const prefixOps = ref<DataOption[]>([]);
+const age = ref<string | null>("");
+
+const informaData = ref<FormAddPerson>({
+  prefix: "",
+  firstName: "",
+  lastName: "",
+  citizenId: "",
   birthDate: null,
+  age: null,
   genderId: null,
   bloodId: null,
   nationality: null,
@@ -79,16 +86,11 @@ const OpsFilter = ref<InformationOps>({
   employeeTypeOps: [],
 });
 
-// call function get รายการข้อมูลต่างๆ
-onMounted(async () => {
-  await fetchPerson();
-});
-
 /*** get รายการข้อมูลเกี่ยวกับบุคคล (dropdown list) */
 const fetchPerson = async () => {
   showLoader();
   await http
-    .get(config.API.person)
+    .get(config.API.profileNewMetaMain)
     .then((res) => {
       const data = res.data.result;
       let optionbloodGroups: DataOption[] = [];
@@ -141,7 +143,7 @@ const fetchPerson = async () => {
       Ops.value.religionOps = optionreligions;
       OpsFilter.value.religionOps = optionreligions;
     })
-    .catch((e: any) => { })
+    .catch((e: any) => {})
     .finally(() => {
       hideLoader();
     });
@@ -194,7 +196,7 @@ const checkCitizen = async (id: string) => {
           undefined,
           true
         );
-        informaData.value.cardid = defaultCitizenData.value;
+        informaData.value.citizenId = defaultCitizenData.value;
       }
     })
     .catch((e) => {
@@ -252,7 +254,7 @@ const filterSelector = (val: any, update: Function, refData: string) => {
 // เช็ควันที่ที่สามารถเลือกวันเกิดได้โดย max date น้อยกว่าวันปัจจุบัน เพื่อให้ฟังก์ชั่นการเช็คทำงานได้ปกติ
 const calculateMaxDate = () => {
   const today = new Date();
-  today.setDate(today.getDate() - 1);
+  today.setFullYear(today.getFullYear() - 18);
   return today;
 };
 
@@ -287,29 +289,18 @@ const calRetire = async (birth: Date) => {
   }
 };
 
-// หลังจากกดปุ่มบันทึกเช็ค validate ก่อน
-const saveData = async () => {
-  if (myform.value != null) {
-    await myform.value.validate().then(async (saveDataTest: Boolean) => {
-      if (saveDataTest) {
-        dialogConfirm($q, () => addData()); // validate ผ่านส่งไปบันทึกที่ api
-      }
-    });
-  }
-};
-
 // post เพิ่มข้อมูลทะเบียนประวัติไปที่ api
-const addData = async () => {
+const onSubmit = async () => {
   const formData = new FormData();
   if (fileData.value != null) formData.append("File", fileData.value); //แก้ไขรูป
-  if (informaData.value.cardid != undefined)
-    formData.append("citizenId", informaData.value.cardid);
-  if (informaData.value.prefixId != undefined)
-    formData.append("prefix", informaData.value.prefixId);
-  if (informaData.value.firstname != undefined)
-    formData.append("firstName", informaData.value.firstname);
-  if (informaData.value.lastname != undefined)
-    formData.append("lastName", informaData.value.lastname);
+  if (informaData.value.citizenId != undefined)
+    formData.append("citizenId", informaData.value.citizenId);
+  if (informaData.value.prefix != undefined)
+    formData.append("prefix", informaData.value.prefix);
+  if (informaData.value.firstName != undefined)
+    formData.append("firstName", informaData.value.firstName);
+  if (informaData.value.lastName != undefined)
+    formData.append("lastName", informaData.value.lastName);
   if (informaData.value.genderId != undefined)
     formData.append("genderId", informaData.value.genderId);
   if (informaData.value.nationality != undefined)
@@ -334,64 +325,157 @@ const addData = async () => {
   if (informaData.value.employeeClass != undefined)
     formData.append("employeeClass", informaData.value.employeeClass);
 
-  showLoader();
-  await http
-    .post(config.API.receiveData(), formData)
-    .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await changeBirth(informaData.value.birthDate ?? new Date());
-      await clickBack();
-      hideLoader();
-    });
-  hideLoader();
+  dialogConfirm($q, async () => {
+    showLoader();
+    await http
+      .post(config.API.receiveData(), formData)
+      .then(async (res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        await changeBirth(informaData.value.birthDate ?? new Date());
+        await clickBack();
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        hideLoader();
+      });
+  });
 };
 
 // ปุ่ม back
 const clickBack = () => {
   router.push("/receive");
 };
+
+function fetchPrefix() {
+  http
+    .get(config.API.orgPrefix)
+    .then((res) => {
+      prefixOps.value = res.data.result.map((v: any) => ({
+        id: v.name,
+        name: v.name,
+      }));
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+function calculateAge(birthDate: Date | null) {
+  if (!birthDate) return null;
+  const birthDateTimeStamp = new Date(birthDate).getTime();
+  const now = new Date();
+  const diff = now.getTime() - birthDateTimeStamp;
+
+  const ageDate = new Date(diff);
+  const years = ageDate.getUTCFullYear() - 1970;
+  const months = ageDate.getUTCMonth();
+  const days = ageDate.getUTCDate() - 1;
+  const retire = new Date(birthDate);
+  retire.setFullYear(retire.getFullYear() + 60);
+  retireDate.value = retire;
+
+  if (years > 60) {
+    return "อายุเกิน 60 ปี";
+  }
+
+  return `${years} ปี ${months} เดือน ${days} วัน`;
+}
+
+watch(
+  () => informaData.value.birthDate,
+  (v) => {
+    if (v) {
+      age.value = calculateAge(v);
+    }
+  }
+);
+
+onMounted(async () => {
+  await fetchPerson();
+  await fetchPrefix();
+});
 </script>
 
 <template>
-  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+  <!-- <q-card flat bordered class="col-12 q-px-lg q-py-md">
     <HeaderTop header="ข้อมูลส่วนตัว" icon="mdi-account" />
     <q-form ref="myform" class="col-12 q-pt-md">
       <div class="row">
         <div class="row col-12 q-col-gutter-x-sm q-mb-xs">
           <div class="col-xs-6 col-sm-3 col-md-3">
-            <q-input hide-bottom-space outlined v-model="informaData.cardid" dense @update:model-value="changeCardID"
-              lazy-rules :rules="[
+            <q-input
+              hide-bottom-space
+              outlined
+              v-model="informaData.citizenId"
+              dense
+              @update:model-value="changeCardID"
+              lazy-rules
+              :rules="[
                 (val: string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
                 (val: string) =>
                   val.length >= 13 ||
                   `${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
-              ]" label="เลขประจำตัวประชาชน" maxlength="13" mask="#############" />
-            <!-- :rules="[(val:any) =>val.length != 13 ||`${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,]" -->
+              ]"
+              label="เลขประจำตัวประชาชน"
+              maxlength="13"
+              mask="#############"
+            />
           </div>
           <div class="col-xs-6 col-sm-3 col-md-3">
-            <selector hide-bottom-space outlined :rules="[(val: string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]" 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')" />
+            <selector
+              hide-bottom-space
+              outlined
+              :rules="[(val: string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
+              dense
+              lazy-rules
+              v-model="informaData.prefix"
+              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 hide-bottom-space outlined dense lazy-rules v-model="informaData.firstname"
-              :rules="[(val: string) => !!val || `${'กรุณากรอก ชื่อ'}`]" :label="`${'ชื่อ'}`" />
+            <q-input
+              hide-bottom-space
+              outlined
+              dense
+              lazy-rules
+              v-model="informaData.firstName"
+              :rules="[(val: string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+              :label="`${'ชื่อ'}`"
+            />
           </div>
           <div class="col-xs-6 col-sm-3 col-md-3">
-            <q-input hide-bottom-space outlined dense lazy-rules v-model="informaData.lastname"
-              :rules="[(val: string) => !!val || `${'กรุณากรอก นามสกุล'}`]" :label="`${'นามสกุล'}`" />
+            <q-input
+              hide-bottom-space
+              outlined
+              dense
+              lazy-rules
+              v-model="informaData.lastName"
+              :rules="[(val: string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+              :label="`${'นามสกุล'}`"
+            />
           </div>
         </div>
         <div class="row col-12 q-col-gutter-x-sm q-mb-xs">
           <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="calculateMaxDate()" @update:model-value="handleDate">
+            <datepicker
+              v-model="informaData.birthDate"
+              :locale="'th'"
+              autoApply
+              :enableTimePicker="false"
+              week-start="0"
+              :max-date="calculateMaxDate()"
+              @update:model-value="handleDate"
+            >
               <template #year="{ year }">
                 {{ year + 543 }}
               </template>
@@ -399,13 +483,25 @@ const clickBack = () => {
                 {{ parseInt(value + 543) }}
               </template>
               <template #trigger>
-                <q-input hide-bottom-space outlined dense lazy-rules :model-value="informaData.birthDate == null
-                  ? null
-                  : date2Thai(informaData.birthDate)
-                  " :rules="[(val: string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
-                  :label="`${'วัน/เดือน/ปี เกิด'}`">
+                <q-input
+                  hide-bottom-space
+                  outlined
+                  dense
+                  lazy-rules
+                  :model-value="
+                    informaData.birthDate == null
+                      ? null
+                      : date2Thai(informaData.birthDate)
+                  "
+                  :rules="[(val: string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
+                  :label="`${'วัน/เดือน/ปี เกิด'}`"
+                >
                   <template v-slot:prepend>
-                    <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
                     </q-icon>
                   </template>
                 </q-input>
@@ -413,50 +509,131 @@ const clickBack = () => {
             </datepicker>
           </div>
           <div class="col-xs-6 col-sm-2 col-md-2">
-            <q-input hide-bottom-space dense lazy-rules readonly borderless style="padding:0 12px;"
-              :model-value="informaData.age" :label="`${'อายุ'}`" />
+            <q-input
+              hide-bottom-space
+              dense
+              lazy-rules
+              readonly
+              borderless
+              style="padding: 0 12px"
+              :model-value="informaData.age"
+              :label="`${'อายุ'}`"
+            />
           </div>
           <div class="col-xs-6 col-sm-2 col-md-2">
-            <selector hide-bottom-space outlined 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-bottom-space
+              outlined
+              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-bottom-space outlined 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-bottom-space
+              outlined
+              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 hide-bottom-space outlined dense lazy-rules v-model="informaData.nationality"
-              :label="`${'สัญชาติ'}`" />
+            <q-input
+              hide-bottom-space
+              outlined
+              dense
+              lazy-rules
+              v-model="informaData.nationality"
+              :label="`${'สัญชาติ'}`"
+            />
           </div>
           <div class="col-xs-6 col-sm-2 col-md-2">
-            <q-input hide-bottom-space outlined dense lazy-rules v-model="informaData.ethnicity"
-              :label="`${'เชื้อชาติ'}`" />
+            <q-input
+              hide-bottom-space
+              outlined
+              dense
+              lazy-rules
+              v-model="informaData.ethnicity"
+              :label="`${'เชื้อชาติ'}`"
+            />
           </div>
         </div>
         <div class="row col-12 q-col-gutter-x-sm q-mb-xs">
           <div class="col-xs-6 col-sm-2 col-md-2">
-            <selector hide-bottom-space outlined 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-bottom-space
+              outlined
+              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-bottom-space outlined 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-bottom-space
+              outlined
+              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 dense lazy-rules type="tel" v-model="informaData.tel"
-              :label="`${'เบอร์โทร'}`" mask="##########" />
+            <q-input
+              hide-bottom-space
+              outlined
+              dense
+              lazy-rules
+              type="tel"
+              v-model="informaData.tel"
+              :label="`${'เบอร์โทร'}`"
+              mask="##########"
+            />
           </div>
         </div>
       </div>
@@ -464,25 +641,58 @@ const clickBack = () => {
     <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
     <div class="row col-12">
       <q-space />
-      <q-btn unelevated dense class="q-px-md items-center" color="light-blue-10" label="บันทึก" @click="saveData" />
+      <q-btn
+        unelevated
+        dense
+        class="q-px-md items-center"
+        color="light-blue-10"
+        label="บันทึก"
+        @click="saveData"
+      />
     </div>
-  </q-card>
+  </q-card> -->
 
   <!-- Header  -->
-  <q-page-sticky position="top" expand class="bg-grey-2 text-white" style="z-index: 99; padding: 0% 1% 0% 1%">
+  <q-page-sticky
+    position="top"
+    expand
+    class="bg-grey-2 text-white"
+    style="z-index: 99; padding: 0% 1% 0% 1%"
+  >
     <div class="row col-12 q-gutter-sm q-pb-sm text-dark no-wrap items-center">
-      <q-btn flat round class="bg-teal-1 full-height" color="primary" icon="mdi-chevron-left" dense
-        @click="router.push(`/receive`)">
+      <q-btn
+        flat
+        round
+        class="bg-teal-1 full-height"
+        color="primary"
+        icon="mdi-chevron-left"
+        dense
+        @click="router.push(`/receive`)"
+      >
       </q-btn>
       <q-avatar size="65px" rounded class="containerimage">
-        <img v-if="image == null" src="@/assets/avatar_user.jpg" class="bg-grey-3" style="object-fit: cover" />
+        <img
+          v-if="image == null"
+          src="@/assets/avatar_user.jpg"
+          class="bg-grey-3"
+          style="object-fit: cover"
+        />
         <img :src="image" class="bg-grey-3" style="object-fit: cover" />
-        <div class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer" @click="addNewImage()">
+        <div
+          class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
+          @click="addNewImage()"
+        >
           <q-icon name="mdi-camera" size="18px" color="blue">
             <q-tooltip>อัปเดตรูปภาพ</q-tooltip>
           </q-icon>
 
-          <input type="file" style="display: none" ref="inputImage" accept="image/*" @change="uploadImage" />
+          <input
+            type="file"
+            style="display: none"
+            ref="inputImage"
+            accept="image/*"
+            @change="uploadImage"
+          />
         </div>
       </q-avatar>
 
@@ -498,4 +708,275 @@ const clickBack = () => {
     </div>
   </q-page-sticky>
   <!-- End Header  -->
-</template>
\ No newline at end of file
+
+  <q-card flat bordered class="col-12">
+    <q-form greedy @submit.prevent @validation-success="onSubmit">
+      <HeaderTop
+        header="ข้อมูลส่วนตัว"
+        icon="mdi-account"
+        class="q-px-lg q-pt-md"
+      />
+      <q-card-section class="q-px-lg">
+        <div class="row q-col-gutter-sm">
+          <div class="col-3">
+            <q-input
+              bg-color="white"
+              outlined
+              v-model="informaData.citizenId"
+              label="เลขประจำตัวประชาชน"
+              class="inputgreen"
+              dense
+              lazy-rules
+              borderless
+              :rules="[
+                        (val: string) => !!val || `${'กรุณากรอกเลขประจำตัวประชาชน'}`,
+                        (val: string) =>
+                          val.length >= 13 ||
+                          `${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
+                      ]"
+              maxlength="13"
+              hide-bottom-space
+              mask="#############"
+              @update:model-value="changeCardID"
+            />
+          </div>
+          <div class="col-3">
+            <q-select
+              bg-color="white"
+              v-model="informaData.prefix"
+              label="คำนำหน้าชื่อ"
+              outlined
+              dense
+              lazy-rules
+              class="inputgreen"
+              :options="prefixOps"
+              option-label="name"
+              option-value="id"
+              map-options
+              hide-bottom-space
+              :rules="[
+                (val) => {
+                  return val.length > 0 || 'กรุณาเลือกคำนำหน้าชื่อ';
+                },
+              ]"
+              emit-value
+            />
+          </div>
+          <div class="col-3">
+            <q-input
+              bg-color="white"
+              outlined
+              v-model="informaData.firstName"
+              label="ชื่อ"
+              dense
+              lazy-rules
+              class="inputgreen"
+              borderless
+              :rules="[(val) => val.length > 0 || 'กรุณากรอกชื่อ']"
+              hide-bottom-space
+            />
+          </div>
+          <div class="col-3">
+            <q-input
+              bg-color="white"
+              outlined
+              v-model="informaData.lastName"
+              label="นามสกุล"
+              class="inputgreen"
+              dense
+              lazy-rules
+              borderless
+              :rules="[(val) => val.length > 0 || 'กรุณากรอกนามสกุล']"
+              hide-bottom-space
+            />
+          </div>
+
+          <div class="col-2">
+            <datepicker
+              autoApply
+              borderless
+              week-start="0"
+              :max-date="calculateMaxDate()"
+              :enableTimePicker="false"
+              menu-class-name="modalfix"
+              v-model="informaData.birthDate"
+              :locale="'th'"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  for="inputDatereceive"
+                  outlined
+                  dense
+                  hide-bottom-space
+                  class="inputgreen"
+                  :model-value="
+                    informaData.birthDate != null
+                      ? date2Thai(informaData.birthDate)
+                      : null
+                  "
+                  label="วัน/เดือน/ปี เกิด"
+                  :rules="[
+                    (val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`,
+                  ]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="event" class="cursor-pointer" color="primary">
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+          <div class="col-2">
+            <q-input
+              dense
+              outlined
+              lazy-rules
+              hide-bottom-space
+              readonly
+              class="inputgreen"
+              v-model="age"
+              label="อายุ"
+            />
+          </div>
+          <div class="col-2">
+            <q-select
+              dense
+              outlined
+              use-input
+              clearable
+              lazy-rules
+              emit-value
+              map-options
+              hide-bottom-space
+              input-debounce="0"
+              option-label="name"
+              option-value="id"
+              v-model="informaData.genderId"
+              class="inputgreen"
+              :options="Ops.genderOps"
+              label="เพศ"
+              @filter="(inputValue: any,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'genderOps'
+              )"
+            />
+          </div>
+          <div class="col-2">
+            <q-select
+              dense
+              outlined
+              use-input
+              clearable
+              lazy-rules
+              emit-value
+              map-options
+              hide-bottom-space
+              option-value="id"
+              option-label="name"
+              input-debounce="0"
+              class="inputgreen"
+              v-model="informaData.statusId"
+              :options="Ops.statusOps"
+              label="สถานภาพ"
+              @filter="(inputValue: any,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'statusOps'
+              )"
+            />
+          </div>
+          <div class="col-2">
+            <q-input
+              dense
+              outlined
+              lazy-rules
+              hide-bottom-space
+              class="inputgreen"
+              v-model="informaData.nationality"
+              label="สัญชาติ"
+            />
+          </div>
+          <div class="col-2">
+            <q-input
+              dense
+              outlined
+              lazy-rules
+              hide-bottom-space
+              class="inputgreen"
+              v-model="informaData.ethnicity"
+              label="เชื้อชาติ"
+            />
+          </div>
+          <div class="col-2">
+            <q-select
+              dense
+              outlined
+              use-input
+              clearable
+              lazy-rules
+              emit-value
+              map-options
+              hide-bottom-space
+              option-value="id"
+              option-label="name"
+              input-debounce="0"
+              v-model="informaData.religionId"
+              class="inputgreen"
+              :options="Ops.religionOps"
+              label="ศาสนา"
+              @filter="(inputValue: any,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'religionOps'
+              )"
+            />
+          </div>
+          <div class="col-2">
+            <q-select
+              dense
+              outlined
+              use-input
+              clearable
+              lazy-rules
+              emit-value
+              map-options
+              hide-bottom-space
+              option-value="id"
+              option-label="name"
+              input-debounce="0"
+              v-model="informaData.bloodId"
+              class="inputgreen"
+              :options="Ops.bloodOps"
+              label="หมู่เลือด"
+              @filter="(inputValue: any,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'bloodOps'
+              )"
+            />
+          </div>
+          <div class="col-2">
+            <q-input
+              dense
+              outlined
+              lazy-rules
+              hide-bottom-space
+              mask="##########"
+              class="inputgreen"
+              v-model="informaData.tel"
+              label="เบอร์โทร"
+            />
+          </div>
+        </div>
+      </q-card-section>
+
+      <q-separator />
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn label="บันทึก" color="secondary" type="submit"
+          ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+        >
+      </q-card-actions>
+    </q-form>
+  </q-card>
+</template>