close #181 แก้ไขแสดง guid ที่อยู่ในหน้าประวัติผู้สอบของหน่วยงาน

src/modules/05_placement/components/PersonalDetail/Information/Address.vue

@@ -1,6 +1,6 @@
 <!-- card ข้อมูลที่อยู่ -->
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, reactive } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
@@ -16,7 +16,8 @@ import type {
   AddressOps,
   Address as AddressType,
   optionData,
-} from "@/modules//05_placement/interface/index/Main";
+  AddressData,
+} from "@/modules/05_placement/interface/index/Main";
 import type { PropType } from "vue";
 
 const props = defineProps({
@@ -61,6 +62,20 @@ const OpsFilter = ref<AddressOps>({
   subdistrictCOps: [],
 });
 
+const registAddress = reactive<AddressData>({
+  subDistrictId: "",
+  zipCode: "",
+  districtId: "",
+  provinceId: "",
+})
+
+const currentAddress = reactive<AddressData>({
+  subDistrictId: "",
+  zipCode: "",
+  districtId: "",
+  provinceId: "",
+})
+
 onMounted(async () => {
   await getNewData();
   emit("update:statusEdit", false);
@@ -117,40 +132,37 @@ const refreshData = async () => {
 const getNewData = async () => {
   await props.fetch();
   await fetchProvince();
-  await fetchDistrict(addressData.value.registProvinceId, "1");
-  await fetchDistrict(addressData.value.currentProvinceId, "2");
-  await fetchSubDistrict(addressData.value.registDistrictId, "1");
-  await fetchSubDistrict(addressData.value.currentDistrictId, "2");
 };
 
+// บันทึกข้อมูล
 const editData = async () => {
   const body = {
     registrationSame: addressData.value.registSame == "1",
     registrationAddress: addressData.value.registAddress,
-    registrationSubDistrictId: addressData.value.registSubDistrictId,
-    registrationDistrictId: addressData.value.registDistrictId,
-    registrationProvinceId: addressData.value.registProvinceId,
-    registrationZipCode: addressData.value.registZipCode,
+    registrationSubDistrictId: registAddress.subDistrictId,
+    registrationDistrictId: registAddress.districtId,
+    registrationProvinceId: registAddress.provinceId,
+    registrationZipCode: registAddress.provinceId,
     currentAddress:
       addressData.value.registSame == "1"
         ? addressData.value.registAddress
         : addressData.value.currentAddress,
     currentSubDistrictId:
       addressData.value.registSame == "1"
-        ? addressData.value.registSubDistrictId
-        : addressData.value.currentSubDistrictId,
+        ? registAddress.subDistrictId
+        : currentAddress.subDistrictId,
     currentDistrictId:
       addressData.value.registSame == "1"
-        ? addressData.value.registDistrictId
-        : addressData.value.currentDistrictId,
+        ? registAddress.districtId
+        : currentAddress.districtId,
     currentProvinceId:
       addressData.value.registSame == "1"
-        ? addressData.value.registProvinceId
-        : addressData.value.currentProvinceId,
+        ? registAddress.provinceId
+        : currentAddress.provinceId,
     currentZipCode:
       addressData.value.registSame == "1"
-        ? addressData.value.registZipCode
-        : addressData.value.currentZipCode,
+        ? registAddress.zipCode
+        : currentAddress.zipCode,
   };
   showLoader();
   await http
@@ -171,63 +183,68 @@ const editData = async () => {
     });
 };
 
+// เช็คข้อมูลก่อนบันทึก
 const saveData = async () => {
-  await myform.value.validate().then(async (success: boolean) => {
+  myform.value.validate().then((success: boolean) => {
     if (success) {
-      await editData();
+      editData();
     }
   });
 };
 
+// เลือกข้อมูลจังหวัด
 const selectProvince = async (e: string | null, name: string) => {
   if (e != null) {
     if (name == "1") {
-      addressData.value.registDistrictId = "";
-      addressData.value.registSubDistrictId = "";
-      addressData.value.registZipCode = "";
+      registAddress.subDistrictId = ""
+      registAddress.zipCode = ""
+      registAddress.districtId = ""
     } else {
-      addressData.value.currentDistrictId = "";
-      addressData.value.currentSubDistrictId = "";
-      addressData.value.currentZipCode = "";
+      currentAddress.subDistrictId = ""
+      currentAddress.zipCode = ""
+      currentAddress.districtId = ""
     }
     myform.value.resetValidation();
     await fetchDistrict(e, name);
   }
 };
 
+// เลือกข้อมูลอำเภอ
 const selectDistrict = async (e: string | null, name: string) => {
   if (e != null) {
     if (name == "1") {
-      addressData.value.registSubDistrictId = "";
-      addressData.value.registZipCode = "";
+      registAddress.subDistrictId = "";
+      registAddress.zipCode = "";
     } else {
-      addressData.value.currentSubDistrictId = "";
-      addressData.value.currentZipCode = "";
+      currentAddress.subDistrictId = "";
+      currentAddress.zipCode = "";
     }
     myform.value.resetValidation();
     await fetchSubDistrict(e, name);
   }
 };
 
+// เลือกข้อมูลตำบล
 const 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.registZipCode = namecode;
+      registAddress.zipCode = namecode;
     } else {
       const findcode = Ops.value.subdistrictCOps.filter((r) => r.id == e);
       const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
-      addressData.value.currentZipCode = namecode;
+      currentAddress.zipCode = namecode;
     }
   }
 };
 
+// ดึงข้อมูลจังหวัด
 const fetchProvince = async () => {
   showLoader();
   await http
     .get(config.API.province)
-    .then((res) => {
+    .then(async (res) => {
       const data = res.data.result;
       let option: optionData[] = [];
       data.map((r: any) => {
@@ -235,6 +252,40 @@ const fetchProvince = async () => {
       });
       Ops.value.provinceOps = option;
       OpsFilter.value.provinceOps = option;
+
+      const checkRegistProvinceId = await option.find((e: any) => e.id === addressData.value.registProvinceId)
+
+      // ที่อยู่ถ้า id จังหวัดว่างไม่ดึงค่าอำเภอ ตำบล และรหัสไปรษณีย์
+      if (addressData.value.registProvinceId == '' || addressData.value.registProvinceId == '00000000-0000-0000-0000-000000000000' || !checkRegistProvinceId) {
+        registAddress.subDistrictId = ""
+        registAddress.zipCode = ""
+        registAddress.districtId = ""
+      } else {
+        registAddress.provinceId = await addressData.value.registProvinceId
+        registAddress.zipCode = await addressData.value.registZipCode
+
+        await fetchDistrict(addressData.value.registProvinceId, "1");
+        if (addressData.value.registDistrictId != null && addressData.value.registDistrictId != '00000000-0000-0000-0000-000000000000') {
+          await fetchSubDistrict(addressData.value.registDistrictId, "1");
+        }
+      }
+
+      const checkCurrentProvinceId = await option.find((e: any) => e.id === addressData.value.currentProvinceId)
+
+      // ที่อยู่ปัจจุบันถ้า id จังหวัดว่างไม่ดึงค่าอำเภอ ตำบล และรหัสไปรษณีย์
+      if (addressData.value.currentProvinceId == '' || addressData.value.currentProvinceId == '00000000-0000-0000-0000-000000000000' || !checkCurrentProvinceId) {
+        currentAddress.subDistrictId = ""
+        currentAddress.zipCode = ""
+        currentAddress.districtId = ""
+      } else {
+        currentAddress.provinceId = addressData.value.currentProvinceId
+        currentAddress.zipCode = addressData.value.currentZipCode
+
+        await fetchDistrict(addressData.value.currentProvinceId, "2");
+        if (addressData.value.currentDistrictId != null && addressData.value.currentDistrictId != '00000000-0000-0000-0000-000000000000') {
+          await fetchSubDistrict(addressData.value.currentDistrictId, "2");
+        }
+      }
     })
     .catch((e) => {
       messageError($q, e);
@@ -244,12 +295,13 @@ const fetchProvince = async () => {
     });
 };
 
+// ดึงข้อมูลอำเภอ
 const fetchDistrict = async (id: string | null, position: string) => {
   if (id != null && id != "") {
     showLoader();
     await http
       .get(config.API.listDistrict(id))
-      .then((res) => {
+      .then(async (res) => {
         const data = res.data.result;
         let option: optionData[] = [];
         data.map((r: any) => {
@@ -258,9 +310,22 @@ const fetchDistrict = async (id: string | null, position: string) => {
         if (position == "1") {
           Ops.value.districtOps = option;
           OpsFilter.value.districtOps = option;
+
+          // ที่อยู่ เช็คอำเภอว่ามี id ใน array ไหม ถ้ามีค่อยกำหนดค่าไปในตัวแปรใหม่เพิ่มแสดงผล
+          const checkRegistDistrictId = option.find((e: any) => e.id === addressData.value.registDistrictId)
+
+          if (checkRegistDistrictId) {
+            registAddress.districtId = addressData.value.registDistrictId
+          }
         } else {
           Ops.value.districtCOps = option;
           OpsFilter.value.districtCOps = option;
+
+          // ที่อยู่ปัจจุบัน เช็คอำเภอว่ามี id ใน array ไหม ถ้ามีค่อยกำหนดค่าไปในตัวแปรใหม่เพิ่มแสดงผล
+          const checkCurrentDistrictId = await option.find((e: any) => e.id === addressData.value.currentDistrictId)
+          if (checkCurrentDistrictId) {
+            currentAddress.districtId = addressData.value.currentDistrictId
+          }
         }
       })
       .catch((e) => {
@@ -272,12 +337,13 @@ const fetchDistrict = async (id: string | null, position: string) => {
   }
 };
 
+// ดึงข้อมูลตำบล
 const fetchSubDistrict = async (id: string | null, position: string) => {
   if (id != null && id != "") {
     showLoader();
     await http
       .get(config.API.listSubDistrict(id))
-      .then((res) => {
+      .then(async (res) => {
         const data = res.data.result;
         let option: zipCodeOption[] = [];
         data.map((r: any) => {
@@ -290,9 +356,21 @@ const fetchSubDistrict = async (id: string | null, position: string) => {
         if (position == "1") {
           Ops.value.subdistrictOps = option;
           OpsFilter.value.subdistrictOps = option;
+
+          // ที่อยู่ เช็คตำบลว่ามี id ใน array ไหม ถ้ามีค่อยกำหนดค่าไปในตัวแปรใหม่เพิ่มแสดงผล
+          const checkRegistSubDistrictId = await option.find((e: any) => e.id === addressData.value.registSubDistrictId)
+          if (checkRegistSubDistrictId) {
+            registAddress.subDistrictId = addressData.value.registSubDistrictId
+          }
         } else {
           Ops.value.subdistrictCOps = option;
           OpsFilter.value.subdistrictCOps = option;
+
+          // ที่อยู่ปัจจุบัน เช็คตำบลว่ามี id ใน array ไหม ถ้ามีค่อยกำหนดค่าไปในตัวแปรใหม่เพิ่มแสดงผล
+          const checkCurrentSubDistrictId = await option.find((e: any) => e.id === addressData.value.currentSubDistrictId)
+          if (checkCurrentSubDistrictId) {
+            currentAddress.subDistrictId = addressData.value.currentSubDistrictId
+          }
         }
       })
       .catch((e) => {
@@ -324,270 +402,94 @@ const getClass = (val: boolean) => {
   };
 };
 </script>
+
 <template>
   <q-card class="col-12 q-px-lg q-py-md q-mt-md no-border">
-    <HeaderTop
-      v-model:edit="edit"
-      header="ข้อมูลที่อยู่"
-      icon="mdi-map-marker"
-      :save="saveData"
-      :history="false"
-      :changeBtn="changeBtn"
-      :disable="statusEdit"
-      :cancel="refreshData"
-    />
+    <HeaderTop v-model:edit="edit" header="ข้อมูลที่อยู่" icon="mdi-map-marker" :save="saveData" :history="false"
+      :changeBtn="changeBtn" :disable="statusEdit" :cancel="refreshData" />
     <q-form ref="myform">
       <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
         <div class="col-xs-12">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            type="textarea"
-            autogrow
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="addressData.registAddress"
-            :rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
-            :label="`${'ที่อยู่ตามทะเบียนบ้าน'}`"
-          />
+          <q-input :class="getClass(edit)" hide-bottom-space :outlined="edit" dense lazy-rules type="textarea" autogrow
+            :readonly="!edit" :borderless="!edit" v-model="addressData.registAddress"
+            :rules="[(val: string) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
+            :label="`${'ที่อยู่ตามทะเบียนบ้าน'}`" />
         </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="addressData.registProvinceId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.provinceOps"
-            option-value="id"
-            :label="`${'จังหวัด'}`"
-            @update:model-value="(value:string) => selectProvince(value, '1')"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'provinceOps'
-                      ) "
-          />
+          <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="registAddress.provinceId" emit-value map-options option-label="name"
+            :options="Ops.provinceOps" option-value="id" :label="`${'จังหวัด'}`"
+            @update:model-value="(value: string) => selectProvince(value, '1')" use-input input-debounce="0" @filter="(inputValue: string,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'provinceOps'
+              )" />
         </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="addressData.registDistrictId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.districtOps"
-            option-value="id"
-            :label="`${'เขต / อำเภอ'}`"
-            @update:model-value="(value:string) => selectDistrict(value, '1')"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'districtOps'
-                      ) "
-          />
+          <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="registAddress.districtId" emit-value map-options option-label="name"
+            :options="Ops.districtOps" option-value="id" :label="`${'เขต / อำเภอ'}`"
+            @update:model-value="(value: string) => selectDistrict(value, '1')" use-input input-debounce="0" @filter="(inputValue: string,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'districtOps'
+              )" />
         </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="addressData.registSubDistrictId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.subdistrictOps"
-            option-value="id"
-            :label="`${'แขวง / ตำบล '}`"
-            @update:model-value="(value:string) => selectSubDistrict(value, '1')"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictOps'
-                      ) "
-          />
+          <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="registAddress.subDistrictId" emit-value map-options option-label="name"
+            :options="Ops.subdistrictOps" option-value="id" :label="`${'แขวง / ตำบล '}`"
+            @update:model-value="(value: string) => selectSubDistrict(value, '1')" use-input input-debounce="0" @filter="(inputValue: string,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'subdistrictOps'
+              )" />
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            dense
-            lazy-rules
-            readonly
-            borderless
-            v-model="addressData.registZipCode"
-            :style="!edit ? '' : 'padding:0 12px;'"
-            :label="`${'รหัสไปรษณีย์'}`"
-          />
+          <q-input :class="getClass(edit)" hide-bottom-space dense lazy-rules readonly borderless
+            v-model="registAddress.zipCode" :style="!edit ? '' : 'padding:0 12px;'" :label="`${'รหัสไปรษณีย์'}`" />
         </div>
         <div class="col-12 q-pt-lg"><q-separator /></div>
         <div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
-          <label class="text-bold"
-            >ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</label
-          >
-          <q-radio
-            v-model="addressData.registSame"
-            checked-icon="task_alt"
-            unchecked-icon="panorama_fish_eye"
-            val="1"
-            label="ใช่"
-            dense
-            :disable="!edit"
-          />
-          <q-radio
-            v-model="addressData.registSame"
-            checked-icon="task_alt"
-            unchecked-icon="panorama_fish_eye"
-            val="0"
-            label="ไม่"
-            dense
-            :disable="!edit"
-          />
+          <label class="text-bold">ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</label>
+          <q-radio v-model="addressData.registSame" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="1"
+            label="ใช่" dense :disable="!edit" />
+          <q-radio v-model="addressData.registSame" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="0"
+            label="ไม่" dense :disable="!edit" />
         </div>
 
         <div class="col-xs-12" v-if="addressData.registSame == '0'">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            type="textarea"
-            autogrow
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="addressData.currentAddress"
-            :rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]"
-            :label="`${'ที่อยู่ปัจจุบัน'}`"
-          />
+          <q-input :class="getClass(edit)" hide-bottom-space :outlined="edit" dense lazy-rules type="textarea" autogrow
+            :readonly="!edit" :borderless="!edit" v-model="addressData.currentAddress"
+            :rules="[(val: string) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]" :label="`${'ที่อยู่ปัจจุบัน'}`" />
         </div>
-        <div
-          class="col-xs-6 col-sm-3 col-md-3"
-          v-if="addressData.registSame == '0'"
-        >
-          <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="addressData.currentProvinceId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.provinceOps"
-            option-value="id"
-            :label="`${'จังหวัด'}`"
-            @update:model-value="(value:string) => selectProvince(value, '2')"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'provinceOps'
-                      ) "
-          />
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.registSame == '0'">
+          <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="currentAddress.provinceId" emit-value map-options option-label="name"
+            :options="Ops.provinceOps" option-value="id" :label="`${'จังหวัด'}`"
+            @update:model-value="(value: string) => selectProvince(value, '2')" use-input input-debounce="0" @filter="(inputValue: string,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'provinceOps'
+              )" />
         </div>
-        <div
-          class="col-xs-6 col-sm-3 col-md-3"
-          v-if="addressData.registSame == '0'"
-        >
-          <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="addressData.currentDistrictId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.districtCOps"
-            option-value="id"
-            :label="`${'เขต / อำเภอ'}`"
-            @update:model-value="(value:string) => selectDistrict(value, '2')"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'districtCOps'
-                      ) "
-          />
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.registSame == '0'">
+          <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="currentAddress.districtId" emit-value map-options option-label="name"
+            :options="Ops.districtCOps" option-value="id" :label="`${'เขต / อำเภอ'}`"
+            @update:model-value="(value: string) => selectDistrict(value, '2')" use-input input-debounce="0" @filter="(inputValue: string,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'districtCOps'
+              )" />
         </div>
-        <div
-          class="col-xs-6 col-sm-3 col-md-3"
-          v-if="addressData.registSame == '0'"
-        >
-          <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="addressData.currentSubDistrictId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.subdistrictCOps"
-            option-value="id"
-            :label="`${'แขวง / ตำบล '}`"
-            @update:model-value="(value:string) => selectSubDistrict(value, '2')"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictCOps'
-                      ) "
-          />
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.registSame == '0'">
+          <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="currentAddress.subDistrictId" emit-value map-options option-label="name"
+            :options="Ops.subdistrictCOps" option-value="id" :label="`${'แขวง / ตำบล '}`"
+            @update:model-value="(value: string) => selectSubDistrict(value, '2')" use-input input-debounce="0" @filter="(inputValue: string,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'subdistrictCOps'
+              )" />
         </div>
-        <div
-          class="col-xs-6 col-sm-3 col-md-3"
-          v-if="addressData.registSame == '0'"
-        >
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            dense
-            lazy-rules
-            readonly
-            borderless
-            v-model="addressData.currentZipCode"
-            :style="!edit ? '' : 'padding:0 12px;'"
-            :label="`${'รหัสไปรษณีย์'}`"
-          />
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.registSame == '0'">
+          <q-input :class="getClass(edit)" hide-bottom-space dense lazy-rules readonly borderless
+            v-model="currentAddress.zipCode" :style="!edit ? '' : 'padding:0 12px;'" :label="`${'รหัสไปรษณีย์'}`" />
         </div>
       </div>
     </q-form>