fix

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

@@ -67,7 +67,7 @@
         /> -->
       </div>
       <div class="col-xs-12 col-sm-3 col-md-2">
-        <q-select
+        <!-- <q-select
           :class="getClass(status == 'register' || status == 'rejectRegister')"
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
@@ -83,6 +83,26 @@
           option-value="id"
           :label="`${'คำนำหน้า'}`"
           @update:model-value="(value) => selectPrefix()"
+        /> -->
+
+        <q-select
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
+          :readonly="!(status == 'register' || status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
+          :outlined="status == 'register' || status == 'rejectRegister'"
+          dense
+          lazy-rules
+          v-model="defaultInformation.prefix"
+          :label="`${'คำนำหน้า'}`"
+          :options="filteredPrefixOptions"
+          use-input
+          fill-input
+          input-debounce="0"
+          @filter="filterPrefix"
+          @input-value="setModel"
+          hide-selected
+          hide-dropdown-icon
         />
       </div>
       <div class="col-xs-12 col-sm-3 col-md-3">
@@ -127,7 +147,7 @@
         />
       </div>
       <div class="col-xs-12 col-sm-3 col-md-3">
-        <q-select
+        <!-- <q-select
           :class="getClass(status == 'register' || status == 'rejectRegister')"
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
@@ -142,6 +162,25 @@
           :options="religionOptions"
           option-value="id"
           :label="`${'ศาสนา'}`"
+        /> -->
+        <q-select
+          :class="getClass(status == 'register' || status == 'rejectRegister')"
+          :readonly="!(status == 'register' || status == 'rejectRegister')"
+          :borderless="!(status == 'register' || status == 'rejectRegister')"
+          :rules="[(val) => !!val || `${'กรุณาเลือก ศาสนา'}`]"
+          :outlined="status == 'register' || status == 'rejectRegister'"
+          dense
+          lazy-rules
+          v-model="defaultInformation.religionName"
+          :label="`${'ศาสนา'}`"
+          :options="filteredReligionOptions"
+          use-input
+          fill-input
+          input-debounce="0"
+          @filter="filterReligion"
+          @input-value="setModelReligionId"
+          hide-selected
+          hide-dropdown-icon
         />
       </div>
       <div class="col-xs-12 col-sm-3 col-md-3">
@@ -214,23 +253,21 @@
         <q-input
           :outlined="status == 'register' || status == 'rejectRegister'"
           dense
-          :counter="status == 'register' || status == 'rejectRegister' ? true : false"
           lazy-rules
-          type="tel"
-          mask="##########"
-          maxlength="10"
           :class="getClass(status == 'register' || status == 'rejectRegister')"
           :readonly="!(status == 'register' || status == 'rejectRegister')"
           :borderless="!(status == 'register' || status == 'rejectRegister')"
           v-model="defaultInformation.tel"
           :label="`${'โทรศัพท์'}`"
-          :rules="[
-            (val) => !!val || '* กรุณากรอกข้อมูลหมายเลขโทรศัพท์',
-            (val) =>
-              (val.length >= 9 && val.length <= 10 && val.startsWith('0')) ||
-              'กรุณากรอกข้อมูลหมายเลขโทรศัพท์ให้ถูกต้อง'
-          ]"
+          :rules="[(val) => !!val || '* กรุณากรอกข้อมูลหมายเลขโทรศัพท์']"
         />
+        <!-- :counter="status == 'register' || status == 'rejectRegister' ? true : false" -->
+        <!-- type="tel" -->
+        <!-- mask="##########" -->
+        <!-- maxlength="10" -->
+        <!-- (val) =>
+              (val.length >= 9 && val.length <= 10 && val.startsWith('0')) ||
+              'กรุณากรอกข้อมูลหมายเลขโทรศัพท์ให้ถูกต้อง' -->
       </div>
       <!-- <div class="col-xs-12 col-sm-3 col-md-3">
         <q-input
@@ -374,9 +411,10 @@
   </q-dialog>
 </template>
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue'
+import { ref, onMounted, watch, computed } from 'vue'
 import { useCounterMixin } from '@/stores/mixin'
 import { useDataStore } from '@/stores/data'
+import { useExamDataStore } from '@/modules/01_exam/store'
 import http from '@/plugins/http'
 import config from '@/app.config'
 import type { PropType } from 'vue'
@@ -387,6 +425,8 @@ import type { Information, DataOption } from '@/modules/01_exam/interface/index/
 import { defaultInformation, changeData } from '@/modules/01_exam/interface/index/Main'
 import HeaderTop from '@/components/top.vue'
 
+const storeExam = useExamDataStore()
+
 const props = defineProps({
   prefixOptions: {
     type: Array as PropType<DataOption[]>,
@@ -427,7 +467,7 @@ const img = ref<string>('')
 const fileProfile = ref<File[]>([])
 const cardid1 = ref<string | null>('')
 const cardid2 = ref<string | null>('')
-const registerEndDate = ref<Date>(new Date())
+// const registerEndDate = ref<Date>(new Date())
 
 const opNat = ref(['ไทย'])
 const idModel = ref<boolean>(false)
@@ -445,7 +485,7 @@ onMounted(async () => {
   await fetchImgData()
   if (defaultInformation.value.provinceId != null)
     await fetchDistrict(defaultInformation.value.provinceId)
-  candidateCheck()
+  // candidateCheck()
 })
 
 const fetchData = async () => {
@@ -480,6 +520,8 @@ const fetchData = async () => {
       defaultInformation.value.phone = data.mobilePhone
       defaultInformation.value.tel = data.telephone
       defaultInformation.value.knowledge = data.knowledge
+      defaultInformation.value.prefix = data.prefixName
+      defaultInformation.value.religionName = data.religionName
     })
     .catch(() => {
       defaultInformation.value.email =
@@ -536,22 +578,28 @@ const selectBirthDate = async () => {
   }
 }
 
-const candidateCheck = async () => {
-  loaderPage(true)
-  await http
-    .get(config.API.candidateCheckCreate(examId.value, positionId.value))
-    .then(async (res) => {
-      const data = res.data.result
-      registerEndDate.value =
-        data.registerEndDate == null ? new Date() : new Date(data.registerEndDate)
-    })
-    .catch((e) => {
-      messageError($q, e)
-    })
-    .finally(() => {
-      loaderPage(false)
-    })
-}
+const registerEndDate = computed<Date>(() => {
+  return storeExam.examInfo?.registerEndDate == null
+    ? new Date()
+    : new Date(storeExam.examInfo?.registerEndDate)
+})
+
+// const candidateCheck = async () => {
+//   loaderPage(true)
+//   await http
+//     .get(config.API.candidateCheckCreate(examId.value, positionId.value))
+//     .then(async (res) => {
+//       const data = res.data.result
+//       registerEndDate.value =
+//         data.registerEndDate == null ? new Date() : new Date(data.registerEndDate)
+//     })
+//     .catch((e) => {
+//       messageError($q, e)
+//     })
+//     .finally(() => {
+//       loaderPage(false)
+//     })
+// }
 
 const fetchImgData = async () => {
   loaderPage(true)
@@ -636,6 +684,44 @@ function getMaxBirthDate(registerEndDate: Date | string): Date {
   date.setFullYear(date.getFullYear() - 18)
   return date
 }
+
+const filteredPrefixOptions = ref<string[]>([])
+
+const filterPrefix = (val: string, update: (fn: () => void) => void) => {
+  update(() => {
+    if (val === '') {
+      filteredPrefixOptions.value = []
+    } else {
+      const needle = val.toLowerCase()
+      filteredPrefixOptions.value = props.prefixOptions
+        .filter((v) => v.name.toLowerCase().indexOf(needle) > -1)
+        .map((v) => v.name)
+    }
+  })
+}
+
+const setModel = (val: string) => {
+  defaultInformation.value.prefix = val
+}
+
+const filteredReligionOptions = ref<string[]>([])
+
+const filterReligion = (val: string, update: (fn: () => void) => void) => {
+  update(() => {
+    if (val === '') {
+      filteredReligionOptions.value = []
+    } else {
+      const needle = val.toLowerCase()
+      filteredReligionOptions.value = props.religionOptions
+        .filter((v) => v.name.toLowerCase().indexOf(needle) > -1)
+        .map((v) => v.name)
+    }
+  })
+}
+
+const setModelReligionId = (val: string) => {
+  defaultInformation.value.religionName = val
+}
 </script>
 
 <style>