ทะเบียนประวัติ: ข้อมูลที่อยู่ (แก้การเลือกจังหวัด)

src/modules/04_registryNew/components/detail/PersonalInformation/03_Address.vue

@@ -47,7 +47,7 @@ const resultData = ref({
   currentDistrictId: "ce9a2984-938f-454c-a758-26dcf8176afe",
   currentSubDistrictId: "97dba284-7cdc-45c6-863c-9590810fe8e2",
   currentZipCode: "50100",
-  registrationSame: "1",
+  registrationSame: "0",
 });
 
 const dataLabel = {
@@ -262,6 +262,20 @@ function defaultAdd() {
 }
 
 async function fetchData() {
+  // mock data
+  addressData.value.address = resultData.value.registrationAddress;
+  addressData.value.provinceId = resultData.value.registrationProvinceId;
+  addressData.value.districtId = resultData.value.registrationDistrictId;
+  addressData.value.subdistrictId = resultData.value.registrationSubDistrictId;
+  addressData.value.codep = resultData.value.registrationZipCode;
+
+  addressData.value.same = resultData.value.registrationSame;
+
+  addressData.value.addressC = resultData.value.currentAddress;
+  addressData.value.provinceIdC = resultData.value.currentProvinceId;
+  addressData.value.districtIdC = resultData.value.currentDistrictId;
+  addressData.value.subdistrictIdC = resultData.value.currentSubDistrictId;
+  addressData.value.codec = resultData.value.currentZipCode;
   // if (route.params.id) {
   //   // showLoader();
   //   await http
@@ -464,13 +478,57 @@ async function fetchSubDistrict(id: string | null, position: string) {
   } else isLoad.value++;
 }
 
+async function selectProvince(e: string | null, name: string) {
+  if (e != null) {
+    if (name == "1") {
+      addressData.value.districtId = "";
+      addressData.value.subdistrictId = "";
+      addressData.value.codep = "";
+    } else {
+      addressData.value.districtIdC = "";
+      addressData.value.subdistrictIdC = "";
+      addressData.value.codec = "";
+    }
+    myForm.value.resetValidation();
+    await fetchDistrict(e, name);
+  }
+};
+
+async function selectDistrict(e: string | null, name: string) {
+  if (e != null) {
+    if (name == "1") {
+      addressData.value.subdistrictId = "";
+      addressData.value.codep = "";
+    } else {
+      addressData.value.subdistrictIdC = "";
+      addressData.value.codec = "";
+    }
+    myForm.value.resetValidation();
+    await fetchSubDistrict(e, name);
+  }
+};
+
+function selectSubDistrict(e: string | null, name: string) {
+  if (e != null) {
+    if (name == "1") {
+      const findcode = Ops.value.subdistrictOps.filter((r) => r.id == e);
+      const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
+      addressData.value.codep = namecode;
+    } else {
+      const findcode = Ops.value.subdistrictCOps.filter((r) => r.id == e);
+      const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
+      addressData.value.codec = namecode;
+    }
+  }
+};
+
 async function getNewData() {
   await fetchData();
   await fetchProvince();
-  await fetchDistrict(resultData.value.registrationProvinceId, "1");
+  await fetchDistrict(addressData.value.provinceId, "1");
-  await fetchDistrict(resultData.value.currentProvinceId, "2");
+  await fetchDistrict(addressData.value.provinceIdC, "2");
-  await fetchSubDistrict(resultData.value.registrationDistrictId, "1");
+  await fetchSubDistrict(addressData.value.districtId, "1");
-  await fetchSubDistrict(resultData.value.currentDistrictId, "2");
+  await fetchSubDistrict(addressData.value.districtIdC, "2");
 }
 
 function filterSelector(val: any, update: Function, refData: string) {
@@ -554,15 +612,14 @@ function onSubmit() {
   myForm.value.validate().then(async (result: boolean) => {
     if (result) {
       // await saveData();
-      console.log("Hello");
       modal.value = false;
     }
   });
 }
 
 onMounted(async () => {
-  await getNewData();
   defaultAdd();
+  await getNewData();
 });
 </script>
 <template>
@@ -587,7 +644,7 @@ onMounted(async () => {
     <div :class="$q.screen.gt.xs ? 'row' : 'column'">
       <!-- column 1 -->
       <div class="col-md-6 col-12 row">
-        <div class="col-4 text-grey-6 text-weight-medium">
+        <div class="col-5 text-grey-6 text-weight-medium">
           <div
             v-for="label in Object.keys(dataLabel).slice(0, 5)"
             class="q-py-xs"
@@ -596,16 +653,16 @@ onMounted(async () => {
           </div>
         </div>
         <!-- data -->
-        <div class="col-8">
+        <div class="col-7">
           <div class="q-py-xs">
-            {{ resultData.registrationAddress }}
+            {{ addressData.address }}
           </div>
           <div class="q-py-xs">
             {{
-              resultData.registrationProvinceId
+              addressData.provinceId
                 ? (
                     Ops.provinceOps.find(
-                      (r) => r.id === resultData.registrationProvinceId
+                      (r) => r.id === addressData.provinceId
                     ) || {}
                   ).name
                 : "-"
@@ -613,10 +670,10 @@ onMounted(async () => {
           </div>
           <div class="q-py-xs">
             {{
-              resultData.registrationDistrictId
+              addressData.districtId
                 ? (
                     Ops.districtOps.find(
-                      (r) => r.id === resultData.registrationDistrictId
+                      (r) => r.id === addressData.districtId
                     ) || {}
                   ).name
                 : "-"
@@ -624,17 +681,17 @@ onMounted(async () => {
           </div>
           <div class="q-py-xs">
             {{
-              resultData.registrationSubDistrictId
+              addressData.subdistrictId
                 ? (
                     Ops.subdistrictOps.find(
-                      (r) => r.id === resultData.registrationSubDistrictId
+                      (r) => r.id === addressData.subdistrictId
                     ) || {}
                   ).name
                 : "-"
             }}
           </div>
           <div class="q-py-xs">
-            {{ resultData.registrationZipCode }}
+            {{ addressData.codep }}
           </div>
         </div>
       </div>
@@ -642,12 +699,12 @@ onMounted(async () => {
       <!-- column 2 -->
       <div
         class="text-grey-6 text-weight-medium"
-        v-if="resultData.registrationSame === '1'"
+        v-if="addressData.same === '1'"
       >
         ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน
       </div>
       <div class="col-md-6 col-12 row" v-else>
-        <div class="col-4 text-grey-6 text-weight-medium">
+        <div class="col-5 text-grey-6 text-weight-medium">
           <div
             v-for="label in Object.keys(dataLabel).slice(5, 10)"
             class="q-py-xs"
@@ -656,16 +713,16 @@ onMounted(async () => {
           </div>
         </div>
         <!-- data -->
-        <div class="col-8">
+        <div class="col-7">
           <div class="q-py-xs">
-            {{ resultData.currentAddress }}
+            {{ addressData.addressC }}
           </div>
           <div class="q-py-xs">
             {{
-              resultData.currentProvinceId
+              addressData.provinceIdC
                 ? (
                     Ops.provinceOps.find(
-                      (r) => r.id === resultData.currentProvinceId
+                      (r) => r.id === addressData.provinceIdC
                     ) || {}
                   ).name
                 : "-"
@@ -673,10 +730,10 @@ onMounted(async () => {
           </div>
           <div class="q-py-xs">
             {{
-              resultData.currentDistrictId
+              addressData.districtIdC
                 ? (
-                    Ops.districtOps.find(
+                    Ops.districtCOps.find(
-                      (r) => r.id === resultData.currentDistrictId
+                      (r) => r.id === addressData.districtIdC
                     ) || {}
                   ).name
                 : "-"
@@ -684,17 +741,17 @@ onMounted(async () => {
           </div>
           <div class="q-py-xs">
             {{
-              resultData.currentSubDistrictId
+              addressData.subdistrictIdC
                 ? (
-                    Ops.subdistrictOps.find(
+                    Ops.subdistrictCOps.find(
-                      (r) => r.id === resultData.currentSubDistrictId
+                      (r) => r.id === addressData.subdistrictIdC
                     ) || {}
                   ).name
                 : "-"
             }}
           </div>
           <div class="q-py-xs">
-            {{ resultData.registrationZipCode }}
+            {{ addressData.codec }}
           </div>
         </div>
       </div>
@@ -719,14 +776,14 @@ onMounted(async () => {
               lazy-rules
               hide-bottom-space
               type="textarea"
-              v-model="resultData.registrationAddress"
+              v-model="addressData.address"
               :label="dataLabel.registrationAddress"
               :rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
             />
           </div>
           <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">
-              <selector
+              <q-select
                 dense
                 outlined
                 use-input
@@ -737,17 +794,18 @@ onMounted(async () => {
                 option-value="id"
                 option-label="name"
                 input-debounce="0"
-                v-model="resultData.registrationProvinceId"
+                v-model="addressData.provinceId"
                 :options="Ops.provinceOps"
                 :label="dataLabel.registrationProvince"
                 :rules="[(val:string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
+                @update:model-value="(value:string) => selectProvince(value, '1')"
                 @filter="(inputValue:string,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'provinceOps'
                       ) "
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
-              <selector
+              <q-select
                 dense
                 outlined
                 use-input
@@ -758,17 +816,18 @@ onMounted(async () => {
                 option-value="id"
                 option-label="name"
                 input-debounce="0"
-                v-model="resultData.registrationDistrictId"
+                v-model="addressData.districtId"
                 :options="Ops.districtOps"
                 :label="dataLabel.registrationDistrict"
                 :rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
+                @update:model-value="(value:string) => selectDistrict(value, '1')"
                 @filter="(inputValue:string,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'districtOps'
                       ) "
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
-              <selector
+              <q-select
                 dense
                 outlined
                 use-input
@@ -779,10 +838,11 @@ onMounted(async () => {
                 option-value="id"
                 option-label="name"
                 input-debounce="0"
-                v-model="resultData.registrationSubDistrictId"
+                v-model="addressData.subdistrictId"
                 :options="Ops.subdistrictOps"
                 :label="dataLabel.registrationSubDistrict"
-                :rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือก แขวง / ตำบล'}`]"
+                @update:model-value="(value:string) => selectSubDistrict(value, '1')"
                 @filter="(inputValue:string,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictOps'
                       ) "
@@ -795,7 +855,7 @@ onMounted(async () => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                v-model="resultData.registrationZipCode"
+                v-model="addressData.codep"
                 :label="dataLabel.registrationZipCode"
               />
             </div>
@@ -806,24 +866,24 @@ onMounted(async () => {
               >ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</label
             >
             <q-radio
-              v-model="resultData.registrationSame"
+              dense
-              checked-icon="task_alt"
-              unchecked-icon="panorama_fish_eye"
               val="1"
               label="ใช่"
-              dense
+              checked-icon="task_alt"
+              v-model="addressData.same"
+              unchecked-icon="panorama_fish_eye"
             />
             <q-radio
-              v-model="resultData.registrationSame"
+              dense
-              checked-icon="task_alt"
-              unchecked-icon="panorama_fish_eye"
               val="0"
               label="ไม่"
-              dense
+              checked-icon="task_alt"
+              v-model="addressData.same"
+              unchecked-icon="panorama_fish_eye"
             />
           </div>
           <!-- current address -->
-          <div v-if="resultData.registrationSame === '0'">
+          <div v-if="addressData.same === '0'">
             <div class="col-12 q-pb-xs">
               <q-input
                 dense
@@ -831,14 +891,14 @@ onMounted(async () => {
                 lazy-rules
                 hide-bottom-space
                 type="textarea"
-                v-model="resultData.currentAddress"
+                v-model="addressData.addressC"
                 :label="dataLabel.currentAddress"
                 :rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]"
               />
             </div>
             <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">
-                <selector
+                <q-select
                   dense
                   outlined
                   use-input
@@ -849,17 +909,18 @@ onMounted(async () => {
                   option-value="id"
                   option-label="name"
                   input-debounce="0"
-                  v-model="resultData.currentProvinceId"
+                  v-model="addressData.provinceIdC"
                   :options="Ops.provinceOps"
                   :label="dataLabel.currentProvince"
                   :rules="[(val:string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
+                  @update:model-value="(value:string) => selectProvince(value, '2')"
                   @filter="(inputValue:string,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'provinceOps'
                       ) "
                 />
               </div>
               <div class="col-xs-6 col-sm-6 col-md-6">
-                <selector
+                <q-select
                   dense
                   outlined
                   use-input
@@ -870,17 +931,18 @@ onMounted(async () => {
                   option-value="id"
                   option-label="name"
                   input-debounce="0"
-                  v-model="resultData.currentDistrictId"
+                  v-model="addressData.districtIdC"
-                  :options="Ops.districtOps"
+                  :options="Ops.districtCOps"
                   :label="dataLabel.currentDistrict"
                   :rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
+                  @update:model-value="(value:string) => selectDistrict(value, '2')"
                   @filter="(inputValue:string,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'districtOps'
                       ) "
                 />
               </div>
               <div class="col-xs-6 col-sm-6 col-md-6">
-                <selector
+                <q-select
                   dense
                   outlined
                   use-input
@@ -891,10 +953,11 @@ onMounted(async () => {
                   option-value="id"
                   option-label="name"
                   input-debounce="0"
-                  v-model="resultData.currentSubDistrictId"
+                  v-model="addressData.subdistrictIdC"
-                  :options="Ops.subdistrictOps"
+                  :options="Ops.subdistrictCOps"
                   :label="dataLabel.currentSubDistrict"
-                  :rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือก แขวง / ตำบล'}`]"
+                  @update:model-value="(value:string) => selectSubDistrict(value, '2')"
                   @filter="(inputValue:string,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictOps'
                       ) "
@@ -907,7 +970,7 @@ onMounted(async () => {
                   outlined
                   lazy-rules
                   hide-bottom-space
-                  v-model="resultData.registrationZipCode"
+                  v-model="addressData.codec"
                   :label="dataLabel.registrationZipCode"
                 />
               </div>
@@ -917,10 +980,10 @@ onMounted(async () => {
         <q-separator />
         <div class="text-right q-pa-sm">
           <q-btn
-            id="onSubmit"
-            type="submit"
             dense
             unelevated
+            id="onSubmit"
+            type="submit"
             label="บันทึก"
             color="public"
             class="q-px-md"
@@ -933,14 +996,14 @@ onMounted(async () => {
   </q-dialog>
 
   <HistoryTable
-    :rows="rowsHistory"
-    :columns="columnsHistory"
-    :filter="filterHistory"
-    :visible-columns="visibleColumnsHistory"
     v-model:modal="modalHistory"
+    v-model:tittle="tittleHistory"
     v-model:inputfilter="filterHistory"
     v-model:inputvisible="visibleColumnsHistory"
-    v-model:tittle="tittleHistory"
+    :rows="rowsHistory"
+    :filter="filterHistory"
+    :columns="columnsHistory"
+    :visible-columns="visibleColumnsHistory"
   >
     <template #columns="props">
       <q-tr :props="props">