ทะเบียนประวัติ: ประวัติส่วนตัว (แก้การ mock ข้อมูล)

src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue

@@ -10,14 +10,17 @@ import HistoryTable from "@/components/TableHistory.vue";
 import DialogHeader from "@/components/DialogHeader.vue";
 import type {
   InformationOps,
+  Information,
   DataOption,
 } from "@/modules/04_registryNew/interface/index/Main";
+import { defaultInformation } from "@/modules/04_registryNew/interface/index/Main";
 import type { RequestItemsHistoryObject } from "@/modules/04_registryNew/interface/request/Information";
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, date2Thai, messageError } = mixin;
 
+const informaData = ref<Information>(defaultInformation);
 const modal = ref<boolean>(false);
 const myForm = ref<any>();
 const rowsHistory = ref<RequestItemsHistoryObject[]>([]);
@@ -300,6 +303,26 @@ const visibleColumnsHistory = ref<String[]>([
   "createdAt",
 ]);
 
+async function fetchData() {
+  informaData.value.cardid = resultData.value.citizenId;
+  informaData.value.prefixId = resultData.value.prefixId;
+  informaData.value.prefix = resultData.value.prefix;
+  informaData.value.firstname = resultData.value.firstName;
+  informaData.value.lastname = resultData.value.lastName;
+  informaData.value.birthDate = resultData.value.birthDate;
+  informaData.value.age = resultData.value.age;
+  informaData.value.genderId = resultData.value.genderId;
+  informaData.value.bloodId = resultData.value.bloodGroupId;
+  informaData.value.nationality = resultData.value.nationality;
+  informaData.value.ethnicity = resultData.value.race;
+  informaData.value.statusId = resultData.value.relationshipId;
+  informaData.value.religionId = resultData.value.religionId;
+  informaData.value.tel = resultData.value.telephoneNumber;
+  informaData.value.employeeType = resultData.value.employeeType;
+  informaData.value.employeeClass = resultData.value.employeeClass;
+  informaData.value.profileType = resultData.value.profileType;
+}
+
 // get person detail list
 async function fetchPerson() {
   // showLoader();
@@ -478,6 +501,7 @@ function onSubmit() {
 
 onMounted(async () => {
   await fetchPerson();
+  await fetchData();
 });
 </script>
 <template>
@@ -513,29 +537,35 @@ onMounted(async () => {
         <!-- data -->
         <div class="col-md-8 col-7">
           <div class="q-py-xs">
-            {{ resultData.citizenId }}
+            {{ informaData.cardid }}
           </div>
           <div class="q-py-xs">
             {{
-              `${resultData.prefix} ${resultData.firstName} ${resultData.lastName}`
+              `${informaData.prefix} ${informaData.firstname} ${informaData.lastname}`
             }}
           </div>
           <div class="q-py-xs">
-            {{ date2Thai(resultData.birthDate) }}
+            {{ date2Thai(informaData.birthDate) }}
           </div>
           <div class="q-py-xs">
-            {{ resultData.age ? resultData.age : "-" }}
+            {{ informaData.age ? informaData.age : "-" }}
-          </div>
-          <div class="q-py-xs">
-            {{ resultData.gender ? resultData.gender : "-" }}
           </div>
           <div class="q-py-xs">
             {{
-              resultData.relationshipId
+              informaData.genderId
                 ? (
-                    Ops.statusOps.find(
+                    Ops.genderOps.find((r) => r.id === informaData.genderId) ||
-                      (r) => r.id === resultData.relationshipId
+                    {}
-                    ) || {}
+                  ).name
+                : "-"
+            }}
+          </div>
+          <div class="q-py-xs">
+            {{
+              informaData.statusId
+                ? (
+                    Ops.statusOps.find((r) => r.id === informaData.statusId) ||
+                    {}
                   ).name
                 : "-"
             }}
@@ -556,17 +586,17 @@ onMounted(async () => {
         <!-- data -->
         <div class="col-md-8 col-7">
           <div class="q-py-xs">
-            {{ resultData.nationality ? resultData.nationality : "-" }}
+            {{ informaData.nationality ? informaData.nationality : "-" }}
           </div>
           <div class="q-py-xs">
-            {{ resultData.race ? resultData.race : "-" }}
+            {{ informaData.ethnicity ? informaData.ethnicity : "-" }}
           </div>
           <div class="q-py-xs">
             {{
-              resultData.religionId
+              informaData.religionId
                 ? (
                     Ops.religionOps.find(
-                      (r) => r.id === resultData.religionId
+                      (r) => r.id === informaData.religionId
                     ) || {}
                   ).name
                 : "-"
@@ -574,17 +604,14 @@ onMounted(async () => {
           </div>
           <div class="q-py-xs">
             {{
-              resultData.bloodGroupId
+              informaData.bloodId
-                ? (
+                ? (Ops.bloodOps.find((b) => b.id === informaData.bloodId) || {})
-                    Ops.bloodOps.find(
+                    .name
-                      (b) => b.id === resultData.bloodGroupId
-                    ) || {}
-                  ).name
                 : "-"
             }}
           </div>
           <div class="q-py-xs">
-            {{ resultData.telephoneNumber ? resultData.telephoneNumber : "-" }}
+            {{ informaData.tel ? informaData.tel : "-" }}
           </div>
         </div>
       </div>
@@ -610,7 +637,7 @@ onMounted(async () => {
                 hide-bottom-space
                 maxlength="13"
                 mask="#############"
-                v-model="resultData.citizenId"
+                v-model="informaData.cardid"
                 :label="dataLabel.citizenId"
                 :rules="[
                 (val: string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
@@ -621,7 +648,7 @@ onMounted(async () => {
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
-              <selector
+              <q-select
                 dense
                 outlined
                 use-input
@@ -632,7 +659,7 @@ onMounted(async () => {
                 option-value="id"
                 option-label="name"
                 input-debounce="0"
-                v-model="resultData.prefixId"
+                v-model="informaData.prefixId"
                 :options="Ops.prefixOps"
                 :label="dataLabel.prefix"
                 :rules="[(val: string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
@@ -647,7 +674,7 @@ onMounted(async () => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                v-model="resultData.firstName"
+                v-model="informaData.firstname"
                 :label="dataLabel.firstName"
                 :rules="[(val: string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
               />
@@ -658,7 +685,7 @@ onMounted(async () => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                v-model="resultData.lastName"
+                v-model="informaData.lastname"
                 :label="dataLabel.lastName"
                 :rules="[(val: string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
               />
@@ -669,7 +696,7 @@ onMounted(async () => {
                 borderless
                 week-start="0"
                 menu-class-name="modalfix"
-                v-model="resultData.birthDate"
+                v-model="informaData.birthDate"
                 :locale="'th'"
               >
                 <template #year="{ year }">
@@ -686,8 +713,8 @@ onMounted(async () => {
                     dense
                     hide-bottom-space
                     :model-value="
-                      resultData.birthDate != null
+                      informaData.birthDate != null
-                        ? date2Thai(resultData.birthDate)
+                        ? date2Thai(informaData.birthDate)
                         : null
                     "
                     :label="dataLabel.birthDate"
@@ -714,12 +741,12 @@ onMounted(async () => {
                 lazy-rules
                 hide-bottom-space
                 readonly
-                v-model="resultData.age"
+                v-model="informaData.age"
                 :label="dataLabel.age"
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
-              <selector
+              <q-select
                 dense
                 outlined
                 use-input
@@ -730,7 +757,7 @@ onMounted(async () => {
                 option-value="id"
                 option-label="name"
                 input-debounce="0"
-                v-model="resultData.genderId"
+                v-model="informaData.genderId"
                 :options="Ops.genderOps"
                 :label="dataLabel.gender"
                 @filter="(inputValue: any,
@@ -739,7 +766,7 @@ onMounted(async () => {
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
-              <selector
+              <q-select
                 dense
                 outlined
                 use-input
@@ -750,7 +777,7 @@ onMounted(async () => {
                 option-value="id"
                 option-label="name"
                 input-debounce="0"
-                v-model="resultData.relationshipId"
+                v-model="informaData.statusId"
                 :options="Ops.statusOps"
                 :label="dataLabel.relationship"
                 @filter="(inputValue: any,
@@ -764,7 +791,7 @@ onMounted(async () => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                v-model="resultData.nationality"
+                v-model="informaData.nationality"
                 :label="dataLabel.nationality"
               />
             </div>
@@ -774,12 +801,12 @@ onMounted(async () => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                v-model="resultData.race"
+                v-model="informaData.ethnicity"
                 :label="dataLabel.race"
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
-              <selector
+              <q-select
                 dense
                 outlined
                 use-input
@@ -790,7 +817,7 @@ onMounted(async () => {
                 option-value="id"
                 option-label="name"
                 input-debounce="0"
-                v-model="resultData.religionId"
+                v-model="informaData.religionId"
                 :options="Ops.religionOps"
                 :label="dataLabel.religion"
                 @filter="(inputValue: any,
@@ -799,7 +826,7 @@ onMounted(async () => {
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
-              <selector
+              <q-select
                 dense
                 outlined
                 use-input
@@ -810,7 +837,7 @@ onMounted(async () => {
                 option-value="id"
                 option-label="name"
                 input-debounce="0"
-                v-model="resultData.bloodGroupId"
+                v-model="informaData.bloodId"
                 :options="Ops.bloodOps"
                 :label="dataLabel.bloodGroup"
                 @filter="(inputValue: any,
@@ -825,7 +852,7 @@ onMounted(async () => {
                 lazy-rules
                 hide-bottom-space
                 mask="##########"
-                v-model="resultData.telephoneNumber"
+                v-model="informaData.tel"
                 :label="dataLabel.telephoneNumber"
               />
             </div>

src/modules/04_registryNew/interface/index/Main.ts

@@ -28,6 +28,26 @@ interface InformationOps {
   employeeTypeOps: DataOption[];
 }
 
+interface Information {
+  cardid: string | null;
+  prefix: string | null;
+  age: string | null;
+  prefixId: string | null;
+  firstname: string | null;
+  lastname: string | null;
+  birthDate: Date | 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 AddressOps {
   provinceOps: DataOption[];
   districtOps: DataOption[];
@@ -50,6 +70,26 @@ interface Address {
   codep: string | null;
 }
 
+const defaultInformation: Information = {
+  cardid: null,
+  age: null,
+  prefix: null,
+  prefixId: null,
+  firstname: null,
+  lastname: null,
+  birthDate: null,
+  genderId: null,
+  bloodId: null,
+  nationality: null,
+  ethnicity: null,
+  statusId: null,
+  religionId: null,
+  tel: null,
+  employeeType: null,
+  employeeClass: null,
+  profileType: null,
+};
+
 const defaultAddress: Address = {
   address: null,
   provinceId: null,
@@ -63,13 +103,15 @@ const defaultAddress: Address = {
   codep: null,
   same: "0",
 };
-export { defaultAddress };
+
+export { defaultAddress, defaultInformation };
 export type {
   Pagination,
   DataOption,
   DataOption2,
   zipCodeOption,
   InformationOps,
+  Information,
   AddressOps,
   Address,
 };