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

src/api/exam/api.metadata.ts

@@ -4,9 +4,9 @@ const prefix = `${env.API_URI}/prefix/`
 const religion = `${env.API_URI}/religion/`
 const relationship = `${env.API_URI}/relationship/`
 const educationLevel = `${env.API_URI}/education-level/`
-const province = `${env.API_URI}/province/`;
+const province = `${env.API_URI}/province/`
-const district = `${env.API_URI}/district/`;
+const district = `${env.API_URI}/district/`
-const subDistrict = `${env.API_URI}/sub-district/`;
+const subDistrict = `${env.API_URI}/sub-district/`
 
 export default {
   countDashbordSubHistory: (type: number) => `${dashbord}${type}`,
@@ -17,5 +17,5 @@ export default {
   educationLevel,
   province,
   listDistrict: (id: string) => `${district}${id}`,
-  listSubDistrict: (id: string) => `${subDistrict}${id}`,
+  listSubDistrict: (id: string) => `${subDistrict}${id}`
 }

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'
+  informaData.value.prefix = 'e4e6a4f8-39c6-467f-bd84-7650d105fc4c'
-  relationship.value = '02fbc0e3-1da0-45b5-90da-783d344b5896'
+  informaData.value.relationship = '02fbc0e3-1da0-45b5-90da-783d344b5896'
-  province.value = '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

src/modules/01_exam/interface/index/Main.ts

@@ -28,8 +28,11 @@ interface Information {
   tel: string
   phone: string
   email: string
+  province: string
   provinceId: string
+  districtId: string
   cardIdDate: Date
+  relationship: string
   statusId: string
   knowledge: string
 }
@@ -227,10 +230,11 @@ const defaultInformation: Information = {
   tel: '0914569982',
   phone: '0914569982',
   email: 'kittapath@frappet.com',
-  provinceId: 'กรุงเทพ',
+  province: 'กรุงเทพ',
   cardIdDate: new Date('2000-01-10'),
-  statusId: 'โสด',
+  relationship: 'โสด',
-  knowledge: 'excel, word, photoshop'
+  knowledge: 'excel, word, photoshop',
+  district: 'บางพลัด'
 }
 
 const defaultFamily: Family = {