ต่อ api จังหวัด /อำเภอ หน้า information

src/modules/01_exam/components/Form/Profile/Information.vue

@@ -140,7 +140,7 @@
             :outlined="edit"
             dense
             lazy-rules
-            v-model="relationship"
+            v-model="informaData.relationship"
             emit-value
             map-options
             option-label="name"
@@ -183,7 +183,27 @@
           />
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
+          <q-select
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.provinceId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="provinceOptions"
+            option-value="id"
+            :label="`${'จังหวัด'}`"
+            @update:model-value="(value) => selectProvince(value)"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <!-- <q-input
             :class="getClass(edit)"
             hide-bottom-space
             :outlined="edit"
@@ -194,27 +214,26 @@
             v-model="informaData.cardid"
             :rules="[(val) => !!val || `${'กรุณากรอก ออกให้ ณ อำเภอ'}`]"
             label="ออกให้ ณ อำเภอ"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
+          /> -->
           <q-select
             hide-bottom-space
             :class="getClass(edit)"
             :readonly="!edit"
             :borderless="!edit"
-            :rules="[(val) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
+            :rules="[(val) => !!val || `${'กรุณากรอกอำเภอ'}`]"
             :outlined="edit"
             dense
             lazy-rules
-            v-model="province"
+            v-model="informaData.districtId"
             emit-value
             map-options
             option-label="name"
-            :options="provinceOptions"
+            :options="districtOptions"
             option-value="id"
-            :label="`${'จังหวัด'}`"
+            :label="`${'ออกให้ ณ อำเภอ'}`"
           />
         </div>
+
         <div class="col-xs-6 col-sm-3 col-md-3">
           <datepicker
             v-model="informaData.cardIdDate"
@@ -357,11 +376,9 @@ import { useExamDataStore } from '@/modules/01_exam/store'
 const mixin = useCounterMixin()
 const store = useExamDataStore()
 const { date2Thai, calAge } = mixin
-const prefix = ref<string>()
-const province = ref<string>()
-const relationship = ref<string>()
 const prefixOptions = ref<DataOption[]>([])
 const relationshipOptions = ref<DataOption[]>([])
+const districtOptions = ref<DataOption[]>([])
 
 const edit = ref<boolean>(false)
 const informaData = ref<Information>(defaultInformation)
@@ -417,11 +434,19 @@ onMounted(async () => {
   await fetchprefix()
   await fetchrelationship()
   await fetchProvince()
+  await fetchDistrict(informaData.value.provinceId)
 })
 const fetchData = () => {
-  prefix.value = 'e4e6a4f8-39c6-467f-bd84-7650d105fc4c'
-  relationship.value = '02fbc0e3-1da0-45b5-90da-783d344b5896'
-  province.value = '02fbc0e3-1da0-45b5-90da-783d344b5896'
+  informaData.value.prefix = 'e4e6a4f8-39c6-467f-bd84-7650d105fc4c'
+  informaData.value.relationship = '02fbc0e3-1da0-45b5-90da-783d344b5896'
+  informaData.value.provinceId = '02fbc0e3-1da0-45b5-90da-783d344b5896'
+  informaData.value.districtId = 'e4e6a4f8-39c6-467f-bd84-7650d105fc4c'
+}
+const selectProvince = (e: string) => {
+  informaData.value.districtId = ''
+
+  myform.value.resetValidation()
+  fetchDistrict(e)
 }
 
 const saveData = async () => {
@@ -450,6 +475,25 @@ const changeBtn = async () => {
   })
 }
 
+const fetchDistrict = async (id: string) => {
+  //   loader.value = true;
+  await http
+    .get(config.API.listDistrict(id))
+    .then((res) => {
+      const data = res.data.result
+      let option: DataOption[] = []
+      //   console.log(data);
+      data.map((r: any) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() })
+      })
+      districtOptions.value = option
+    })
+    .catch((e: any) => {})
+    .finally(() => {
+      //   loader.value = false;
+    })
+}
+
 const fetchProvince = async () => {
   //   loader.value = true;
   await http