hrms-bangkok/hrms-recruit
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

แยกปุ่มอัพโหลด

Browse source
This commit is contained in:
Kittapath 2023-03-30 13:42:08 +07:00
parent ccc5efa421
commit abe8e9186c
11 changed files with 809 additions and 585 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/api/exam/api.candidate.ts
View file

@ -14,5 +14,6 @@ export default {
candidatePayment: (examId: string) => `${candidate}payment/${examId}`, candidatePayment: (examId: string) => `${candidate}payment/${examId}`,
candidateStatus: (examId: string) => `${candidate}status/${examId}`, candidateStatus: (examId: string) => `${candidate}status/${examId}`,
periodExamId: (examId: string) => `${periodExam}${examId}`, periodExamId: (examId: string) => `${periodExam}${examId}`,
candidateId: (examId: string) => `${candidate}${examId}`,
candidate candidate
} }

233
src/modules/01_exam/components/ExamForm.vue
View file

@ -1,87 +1,32 @@
<!-- step กรอกข้อมูล --> <!-- step กรอกข้อมูล -->
<template> <template>
<div> <div>
<Profile :loader="loader" v-model:statusEdit="statusEdit" :status="status" /> <Profile
<!-- <q-splitter v-model="splitterModel" style="height: 450px"> :loader="loader"
<template v-slot:before> v-model:statusEdit="statusEdit"
<q-tab-panels :status="status"
v-model="tab" :btnSave="btnSave"
animated v-model:formInformation="formInformation"
vertical v-model:formAddress="formAddress"
transition-prev="jump-up" v-model:formFamily="formFamily"
transition-next="jump-up" v-model:formOccupation="formOccupation"
> />
ข้อมูลส่วนบุคคล
<q-tab-panel name="profile">
<Profile :loader="loader" v-model:statusEdit="statusEdit" :status="status" />
</q-tab-panel>
ประวัติการศีกษา
<q-tab-panel name="education">
<Education :loader="loader" v-model:statusEdit="statusEdit" :status="status" />
</q-tab-panel>
ประวัติการทำงาน/ฝึกงาน
<q-tab-panel name="career">
<Career :loader="loader" v-model:statusEdit="statusEdit" :status="status" />
</q-tab-panel>
ไฟล์
<q-tab-panel name="document">
<Document :loader="loader" v-model:statusEdit="statusEdit" :status="status" />
</q-tab-panel>
</q-tab-panels>
</template>
<template v-slot:after>
<q-tabs v-model="tab" vertical class="text-teal">
<q-tab name="profile" label="ข้อมูลส่วนบุคคล" :disable="statusEdit" />
<q-tab name="education" label="ประวัติการศีกษา" :disable="statusEdit" />
<q-tab name="career" label="ประวัติการทำงาน/ฝึกงาน" :disable="statusEdit" />
<q-tab name="document" label="อัปโหลดเอกสาร" :disable="statusEdit" />
</q-tabs>
</template>
</q-splitter> -->
<div class="text-center q-pt-sm"> <div class="text-center q-pt-sm">
<q-checkbox <q-checkbox
v-model="acceptTermOfUse" v-model="acceptTermOfUse"
:disable="(status !== 'register' && status !== 'rejectRegister') || statusEdit" :disable="(status !== 'register' && status !== 'rejectRegister') || statusEdit"
label="ข้าพเจ้ารับรองว่า ข้าพเจ้ามีคุณสมบัติครบถ้วนตามประกาศรับสมัคร ข้อความข้างต้นตรงตามความจริงทุกประการ" label="ข้าพเจ้ารับรองว่า ข้าพเจ้ามีคุณสมบัติครบถ้วนตามประกาศรับสมัคร ข้อความข้างต้นตรงตามความจริงทุกประการ"
/> />
<!-- v-if="tab == 'document'" -->
</div> </div>
<div class="row justify-center q-pa-md"> <div class="row justify-center q-pa-md">
<!-- <q-btn
color="primary"
class="q-ml-md"
label="กลับ"
@click="clickPreview(tab)"
v-if="
(status === 'register' || status === 'rejectRegister') &&
(tab == 'education' || tab == 'career' || tab == 'document')
"
icon="mdi-chevron-left"
:disable="statusEdit"
/>
<q-btn
color="primary"
class="q-ml-md"
label="ต่อไป"
@click="clickNext(tab)"
v-if="
(status === 'register' || status === 'rejectRegister') &&
(tab == 'profile' || tab == 'education' || tab == 'career')
"
icon-right="mdi-chevron-right"
:disable="statusEdit"
/> -->
<q-btn <q-btn
color="blue" color="blue"
class="q-ml-md" class="q-ml-md"
label="บันทึกข้อมูล" label="บันทึกข้อมูล"
outline outline
icon="mdi-content-save" icon="mdi-content-save"
@click="okModalConfirm" @click="saveData"
v-if="status === 'register' || status === 'rejectRegister'" v-if="status === 'register' || status === 'rejectRegister'"
:disable="!acceptTermOfUse || statusEdit" :disable="!acceptTermOfUse || statusEdit"
/> />
@ -105,10 +50,13 @@ import { useCounterMixin } from '@/stores/mixin'
import http from '@/plugins/http' import http from '@/plugins/http'
import config from '@/app.config' import config from '@/app.config'
import Profile from '@/modules/01_exam/components/Form/Profile.vue' import Profile from '@/modules/01_exam/components/Form/Profile.vue'
import Education from '@/modules/01_exam/components/Form/Education.vue'
import Career from '@/modules/01_exam/components/Form/Career.vue'
import Document from '@/modules/01_exam/components/Form/Document.vue'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
import {
defaultInformation,
defaultOccupation,
defaultAddress,
defaultFamily
} from '@/modules/01_exam/interface/index/Main'
const props = defineProps({ const props = defineProps({
fetchStep: { fetchStep: {
@ -123,14 +71,17 @@ const props = defineProps({
const $q = useQuasar() const $q = useQuasar()
const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
const { modalConfirm, modalError, success } = mixin const { modalConfirm, modalError, success, dateToISO } = mixin
// const tab = ref<string>('profile')
// const splitterModel = ref<number>(90)
const loader = ref<boolean>(false) const loader = ref<boolean>(false)
const statusEdit = ref<boolean>(false) const statusEdit = ref<boolean>(false)
const acceptTermOfUse = ref<boolean>(false) const acceptTermOfUse = ref<boolean>(false)
const route = useRoute() const route = useRoute()
const examId = ref<string>(route.params.id.toString()) const examId = ref<string>(route.params.id.toString())
const btnSave = ref<boolean>(false)
const formInformation = ref<any>({})
const formAddress = ref<any>({})
const formFamily = ref<any>({})
const formOccupation = ref<any>({})
onMounted(async () => { onMounted(async () => {
if (props.status !== 'register') { if (props.status !== 'register') {
@ -166,35 +117,115 @@ const saveForm = async () => {
}) })
} }
// const clickPreview = (val: string) => { const saveData = async () => {
// switch (val) { await formInformation.value.validate().then(async (suc: boolean) => {
// case 'profile': if (suc) {
// return (tab.value = 'profile') await formAddress.value.validate().then(async (suc: boolean) => {
// case 'education': if (suc) {
// return (tab.value = 'profile') await formFamily.value.validate().then(async (suc: boolean) => {
// case 'career': if (suc) {
// return (tab.value = 'education') await formOccupation.value.validate().then(async (suc: boolean) => {
// case 'document': if (suc) {
// return (tab.value = 'career') const type = ref<string | null>('')
// default: if (defaultOccupation.value.status == 'official')
// return (tab.value = 'profile') type.value = defaultOccupation.value.official
// } if (defaultOccupation.value.status == 'personnel')
// } type.value = defaultOccupation.value.personnel
if (defaultOccupation.value.status == 'officialsOther')
// const clickNext = (val: string) => { type.value = defaultOccupation.value.officialsOther
// switch (val) { if (defaultOccupation.value.status == 'employee')
// case 'profile': type.value = defaultOccupation.value.employee
// return (tab.value = 'education') if (defaultOccupation.value.status == 'other')
// case 'education': type.value = defaultOccupation.value.other
// return (tab.value = 'career') loader.value = true
// case 'career': await http
// return (tab.value = 'document') .post(config.API.candidateId(examId.value), {
// case 'document': prefixId: defaultInformation.value.prefixId,
// return (tab.value = 'profile') lastName: defaultInformation.value.lastname,
// default: citizenProvinceId: defaultInformation.value.provinceId,
// return (tab.value = 'profile') citizenDistrictId: defaultInformation.value.districtId,
// } dateOfBirth:
// } defaultInformation.value.birthDate == null
? null
: dateToISO(defaultInformation.value.birthDate),
citizenDate:
defaultInformation.value.cardIdDate == null
? null
: dateToISO(defaultInformation.value.cardIdDate),
citizenId: defaultInformation.value.cardid,
firstName: defaultInformation.value.firstname,
relationshipId: defaultInformation.value.relationship,
nationality: defaultInformation.value.nationality,
email: defaultInformation.value.email,
mobilePhone: defaultInformation.value.phone,
telephone: defaultInformation.value.tel,
knowledge: defaultInformation.value.knowledge,
occupationType: defaultOccupation.value.status,
occupationCompany: defaultOccupation.value.company,
occupationDepartment: defaultOccupation.value.department,
occupationEmail: defaultOccupation.value.email,
occupationTelephone: defaultOccupation.value.tel,
occupationPosition: type.value,
registAddress: defaultAddress.value.address,
currentAddress: defaultAddress.value.addressC,
registProvinceId: defaultAddress.value.provinceId,
currentProvinceId: defaultAddress.value.provinceIdC,
registDistrictId: defaultAddress.value.districtId,
currentDistrictId: defaultAddress.value.districtIdC,
registSubDistrictId: defaultAddress.value.subdistrictId,
currentSubDistrictId: defaultAddress.value.subdistrictIdC,
registZipCode: defaultAddress.value.code,
currentZipCode: defaultAddress.value.codeC,
registSame:
defaultAddress.value.same == '1'
? true
: defaultAddress.value.same == '0'
? false
: null,
marryPrefixId: defaultFamily.value.prefixIdC,
marryFirstName: defaultFamily.value.firstnameC,
marryLastName: defaultFamily.value.lastnameC,
marryOccupation: defaultFamily.value.occupationC,
marryNationality: defaultFamily.value.nationalityC,
fatherPrefixId: defaultFamily.value.prefixIdM,
fatherFirstName: defaultFamily.value.firstnameM,
fatherLastName: defaultFamily.value.lastnameM,
fatherOccupation: defaultFamily.value.occupationM,
fatherNationality: defaultFamily.value.nationalityM,
motherPrefixId: defaultFamily.value.prefixIdF,
motherFirstName: defaultFamily.value.firstnameF,
motherLastName: defaultFamily.value.lastnameF,
motherOccupation: defaultFamily.value.occupationF,
motherNationality: defaultFamily.value.nationalityF,
marry:
defaultFamily.value.same == '1'
? true
: defaultFamily.value.same == '0'
? false
: null
})
.then(() => {
success($q, 'บันทึกข้อมูลส่วนตัวสำเร็จ')
})
.catch(() => {
// modalError.value = true
// modalErrorTittle.value = 'ไม่สามารถบันทึกข้อมูลร่างได้'
// modalErrorDetail.value = e.response.data.message
// statusCode.value = e.response.data.status
})
.finally(async () => {
loader.value = false
await props.fetchStep()
})
}
})
}
})
}
})
}
})
}
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>

534
src/modules/01_exam/components/Form/Address.vue
View file

@ -1,212 +1,212 @@
<!-- card ข้อมูลที่อยู่ --> <!-- card ข้อมูลที่อยู่ -->
<template> <template>
<HeaderTop <HeaderTop
v-model:edit="edit" v-model:edit="edit"
header="ข้อมูลที่อยู่" header="ข้อมูลที่อยู่"
icon="mdi-map-marker" icon="mdi-map-marker"
:save="saveData" :save="saveData"
:addData="true" :addData="true"
:editOnly="false" :editOnly="false"
:cancel="cancelData" :cancel="cancelData"
:editData="status == 'register' || status == 'rejectRegister'" :editData="false"
:disable="statusEdit" :disable="statusEdit"
/> />
<!-- :changeBtn="changeBtn" --> <!-- :changeBtn="changeBtn" -->
<q-form ref="myform"> <q-form ref="myform">
<div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-xs"> <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
<div class="col-xs-12"> <div class="col-xs-12">
<q-input <q-input
:class="getClass(status == 'register' || status == 'rejectRegister')" :class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
type="textarea" type="textarea"
autogrow autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="addressData.address" v-model="defaultAddress.address"
:rules="[(val) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]" :rules="[(val) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
:label="`${'ที่อยู่ตามทะเบียนบ้าน'}`" :label="`${'ที่อยู่ตามทะเบียนบ้าน'}`"
/> />
<!-- :filled="(status == 'register' || status == 'rejectRegister')" --> <!-- :filled="(status == 'register' || status == 'rejectRegister')" -->
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<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="addressData.provinceId"
emit-value
map-options
option-label="name"
:options="provinceOptions"
option-value="id"
:label="`${'จังหวัด'}`"
@update:model-value="(value) => selectProvince(value, '1')"
/>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<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="addressData.districtId"
emit-value
map-options
option-label="name"
:options="districtOptions"
option-value="id"
:label="`${'เขต / อำเภอ'}`"
@update:model-value="(value) => selectDistrict(value, '1')"
/>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<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="addressData.subdistrictId"
emit-value
map-options
option-label="name"
:options="subdistrictOptions"
option-value="id"
:label="`${'ตำบล / แขวง'}`"
@update:model-value="(value) => selectSubDistrict(value, '1')"
/>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
dense
lazy-rules
readonly
borderless
v-model="addressData.code"
:style="!(status == 'register' || status == 'rejectRegister') ? '' : 'padding:0 12px;'"
:label="`${'รหัสไปรษณีย์'}`"
/>
</div>
<div class="col-xs-12 q-gutter-sm items-center flex q-mb-sm">
<label class="text-bold">ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</label>
<q-radio
v-model="addressData.same"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="1"
label="ใช่"
dense
:disable="!(status == 'register' || status == 'rejectRegister')"
/>
<q-radio
v-model="addressData.same"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="0"
label="ไม่"
dense
:disable="!(status == 'register' || status == 'rejectRegister')"
/>
</div>
<div class="col-xs-12" v-if="addressData.same == '0'">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
type="textarea"
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="addressData.addressC"
:rules="[(val) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]"
:label="`${'ที่อยู่ปัจจุบัน'}`"
/>
</div>
<div class="col-xs-12 col-sm-3 col-md-3" v-if="addressData.same == '0'">
<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="addressData.provinceIdC"
emit-value
map-options
option-label="name"
:options="provinceOptions"
option-value="id"
:label="`${'จังหวัด'}`"
@update:model-value="(value) => selectProvince(value, '2')"
/>
</div>
<div class="col-xs-12 col-sm-3 col-md-3" v-if="addressData.same == '0'">
<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="addressData.districtIdC"
emit-value
map-options
option-label="name"
:options="districtCOptions"
option-value="id"
:label="`${'เขต / อำเภอ'}`"
@update:model-value="(value) => selectDistrict(value, '2')"
/>
</div>
<div class="col-xs-12 col-sm-3 col-md-3" v-if="addressData.same == '0'">
<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="addressData.subdistrictIdC"
emit-value
map-options
option-label="name"
:options="subdistrictCOptions"
option-value="id"
:label="`${'ตำบล / แขวง'}`"
@update:model-value="(value) => selectSubDistrict(value, '2')"
/>
</div>
<div class="col-xs-12 col-sm-3 col-md-3" v-if="addressData.same == '0'">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
dense
lazy-rules
readonly
borderless
v-model="addressData.codeC"
:style="!(status == 'register' || status == 'rejectRegister') ? '' : 'padding:0 12px;'"
:label="`${'รหัสไปรษณีย์'}`"
/>
</div>
</div> </div>
</q-form> <div class="col-xs-12 col-sm-3 col-md-3">
<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="defaultAddress.provinceId"
emit-value
map-options
option-label="name"
:options="provinceOptions"
option-value="id"
:label="`${'จังหวัด'}`"
@update:model-value="(value) => selectProvince(value, '1')"
/>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<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="defaultAddress.districtId"
emit-value
map-options
option-label="name"
:options="districtOptions"
option-value="id"
:label="`${'เขต / อำเภอ'}`"
@update:model-value="(value) => selectDistrict(value, '1')"
/>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<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="defaultAddress.subdistrictId"
emit-value
map-options
option-label="name"
:options="subdistrictOptions"
option-value="id"
:label="`${'ตำบล / แขวง'}`"
@update:model-value="(value) => selectSubDistrict(value, '1')"
/>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
dense
lazy-rules
readonly
borderless
v-model="defaultAddress.code"
:style="!(status == 'register' || status == 'rejectRegister') ? '' : 'padding:0 12px;'"
:label="`${'รหัสไปรษณีย์'}`"
/>
</div>
<div class="col-xs-12 q-gutter-sm items-center flex q-mb-sm">
<label class="text-bold">ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</label>
<q-radio
v-model="defaultAddress.same"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="1"
label="ใช่"
dense
:disable="!(status == 'register' || status == 'rejectRegister')"
/>
<q-radio
v-model="defaultAddress.same"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="0"
label="ไม่"
dense
:disable="!(status == 'register' || status == 'rejectRegister')"
/>
</div>
<div class="col-xs-12" v-if="defaultAddress.same == '0'">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
type="textarea"
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="defaultAddress.addressC"
:rules="[(val) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]"
:label="`${'ที่อยู่ปัจจุบัน'}`"
/>
</div>
<div class="col-xs-12 col-sm-3 col-md-3" v-if="defaultAddress.same == '0'">
<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="defaultAddress.provinceIdC"
emit-value
map-options
option-label="name"
:options="provinceOptions"
option-value="id"
:label="`${'จังหวัด'}`"
@update:model-value="(value) => selectProvince(value, '2')"
/>
</div>
<div class="col-xs-12 col-sm-3 col-md-3" v-if="defaultAddress.same == '0'">
<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="defaultAddress.districtIdC"
emit-value
map-options
option-label="name"
:options="districtCOptions"
option-value="id"
:label="`${'เขต / อำเภอ'}`"
@update:model-value="(value) => selectDistrict(value, '2')"
/>
</div>
<div class="col-xs-12 col-sm-3 col-md-3" v-if="defaultAddress.same == '0'">
<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="defaultAddress.subdistrictIdC"
emit-value
map-options
option-label="name"
:options="subdistrictCOptions"
option-value="id"
:label="`${'ตำบล / แขวง'}`"
@update:model-value="(value) => selectSubDistrict(value, '2')"
/>
</div>
<div class="col-xs-12 col-sm-3 col-md-3" v-if="defaultAddress.same == '0'">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
dense
lazy-rules
readonly
borderless
v-model="defaultAddress.codeC"
:style="!(status == 'register' || status == 'rejectRegister') ? '' : 'padding:0 12px;'"
:label="`${'รหัสไปรษณีย์'}`"
/>
</div>
</div>
</q-form>
<!-- <q-dialog :model-value="modalConsend" persistent> <!-- <q-dialog :model-value="modalConsend" persistent>
<q-card style="min-width: 800px"> <q-card style="min-width: 800px">
<Conference :ok="consendOk" :close="consenClose" /> <Conference :ok="consendOk" :close="consenClose" />
@ -214,15 +214,15 @@
</q-dialog> --> </q-dialog> -->
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from 'vue' import { ref, onMounted, watch } from 'vue'
import { useQuasar } from 'quasar' import { QForm, useQuasar } from 'quasar'
import { useCounterMixin } from '@/stores/mixin' import { useCounterMixin } from '@/stores/mixin'
import type { PropType } from 'vue' import type { PropType } from 'vue'
import http from '@/plugins/http' import http from '@/plugins/http'
import config from '@/app.config' import config from '@/app.config'
import { useExamDataStore } from '@/modules/01_exam/store' import { useExamDataStore } from '@/modules/01_exam/store'
import type { Address, DataOption } from '@/modules/01_exam/interface/index/Main' import type { Address, DataOption } from '@/modules/01_exam/interface/index/Main'
import { defaultAddress } from '@/modules/01_exam/interface/index/Main' import { defaultAddress, changeData } from '@/modules/01_exam/interface/index/Main'
import HeaderTop from '@/components/top.vue' import HeaderTop from '@/components/top.vue'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
@ -244,6 +244,14 @@ const props = defineProps({
status: { status: {
type: String, type: String,
required: true required: true
},
btnSave: {
type: Boolean,
required: true
},
form: {
type: Object,
required: true
} }
}) })
@ -254,25 +262,38 @@ const { success } = mixin
const route = useRoute() const route = useRoute()
const examId = ref<string>(route.params.id.toString()) const examId = ref<string>(route.params.id.toString())
const edit = ref<boolean>(true) const edit = ref<boolean>(true)
const addressData = ref<Address>(defaultAddress) // const defaultAddress = ref<Address>(defaultAddress)
const myform = ref<any>() const myform = ref<any>({})
// const modalConsend = ref<boolean>(false)
const loader = ref<boolean>(false) const loader = ref<boolean>(false)
const districtOptions = ref<DataOption[]>([]) const districtOptions = ref<DataOption[]>([])
const districtCOptions = ref<DataOption[]>([]) const districtCOptions = ref<DataOption[]>([])
const subdistrictOptions = ref<DataOption[]>([]) const subdistrictOptions = ref<DataOption[]>([])
const subdistrictCOptions = ref<DataOption[]>([]) const subdistrictCOptions = ref<DataOption[]>([])
const emit = defineEmits(['update:statusEdit']) const emit = defineEmits(['update:statusEdit', 'update:form'])
watch(props, async (count: any, prevCount: any) => {
// if (props.btnSave == true) await saveData()
})
watch(myform, async (count: any, prevCount: any) => {
emit('update:form', count)
})
watch(defaultAddress, async (count: Address, prevCount: Address) => {
await changeData('address', count)
})
onMounted(async () => { onMounted(async () => {
await fetchData() await fetchData()
if (addressData.value.provinceId != null) await fetchDistrict(addressData.value.provinceId, '1') if (defaultAddress.value.provinceId != null)
if (addressData.value.provinceIdC != null) await fetchDistrict(addressData.value.provinceIdC, '2') await fetchDistrict(defaultAddress.value.provinceId, '1')
if (addressData.value.districtId != null) if (defaultAddress.value.provinceIdC != null)
await fetchSubDistrict(addressData.value.districtId, '1') await fetchDistrict(defaultAddress.value.provinceIdC, '2')
if (addressData.value.districtIdC != null) if (defaultAddress.value.districtId != null)
await fetchSubDistrict(addressData.value.districtIdC, '2') await fetchSubDistrict(defaultAddress.value.districtId, '1')
if (defaultAddress.value.districtIdC != null)
await fetchSubDistrict(defaultAddress.value.districtIdC, '2')
}) })
const fetchData = async () => { const fetchData = async () => {
@ -280,17 +301,18 @@ const fetchData = async () => {
.get(config.API.candidateAddress(examId.value)) .get(config.API.candidateAddress(examId.value))
.then((res) => { .then((res) => {
const data = res.data.result const data = res.data.result
addressData.value.address = data.registAddress defaultAddress.value.address = data.registAddress
addressData.value.addressC = data.currentAddress defaultAddress.value.addressC = data.currentAddress
addressData.value.provinceId = data.registProvinceId defaultAddress.value.provinceId = data.registProvinceId
addressData.value.provinceIdC = data.currentProvinceId defaultAddress.value.provinceIdC = data.currentProvinceId
addressData.value.districtId = data.registDistrictId defaultAddress.value.districtId = data.registDistrictId
addressData.value.districtIdC = data.currentDistrictId defaultAddress.value.districtIdC = data.currentDistrictId
addressData.value.subdistrictId = data.registSubDistrictId defaultAddress.value.subdistrictId = data.registSubDistrictId
addressData.value.subdistrictIdC = data.currentSubDistrictId defaultAddress.value.subdistrictIdC = data.currentSubDistrictId
addressData.value.code = data.registZipCode defaultAddress.value.code = data.registZipCode
addressData.value.codeC = data.currentZipCode defaultAddress.value.codeC = data.currentZipCode
addressData.value.same = data.registSame == true ? '1' : data.registSame == false ? '0' : null defaultAddress.value.same =
data.registSame == true ? '1' : data.registSame == false ? '0' : null
}) })
.catch(() => {}) .catch(() => {})
.finally(() => { .finally(() => {
@ -305,21 +327,25 @@ const saveData = async () => {
loader.value = true loader.value = true
await http await http
.post(config.API.candidateAddress(examId.value), { .post(config.API.candidateAddress(examId.value), {
registAddress: addressData.value.address, registAddress: defaultAddress.value.address,
currentAddress: addressData.value.addressC, currentAddress: defaultAddress.value.addressC,
registProvinceId: addressData.value.provinceId, registProvinceId: defaultAddress.value.provinceId,
currentProvinceId: addressData.value.provinceIdC, currentProvinceId: defaultAddress.value.provinceIdC,
registDistrictId: addressData.value.districtId, registDistrictId: defaultAddress.value.districtId,
currentDistrictId: addressData.value.districtIdC, currentDistrictId: defaultAddress.value.districtIdC,
registSubDistrictId: addressData.value.subdistrictId, registSubDistrictId: defaultAddress.value.subdistrictId,
currentSubDistrictId: addressData.value.subdistrictIdC, currentSubDistrictId: defaultAddress.value.subdistrictIdC,
registZipCode: addressData.value.code, registZipCode: defaultAddress.value.code,
currentZipCode: addressData.value.codeC, currentZipCode: defaultAddress.value.codeC,
registSame: registSame:
addressData.value.same == '1' ? true : addressData.value.same == '0' ? false : null defaultAddress.value.same == '1'
? true
: defaultAddress.value.same == '0'
? false
: null
}) })
.then(() => { .then(() => {
success($q, 'บันทึกข้อมูลที่อยู่สำเร็จ') // success($q, 'บันทึกข้อมูลที่อยู่สำเร็จ')
// edit.value = false // edit.value = false
emit('update:statusEdit', false) emit('update:statusEdit', false)
}) })
@ -355,13 +381,13 @@ const saveData = async () => {
const selectProvince = (e: string, name: string) => { const selectProvince = (e: string, name: string) => {
if (name == '1') { if (name == '1') {
addressData.value.districtId = '' defaultAddress.value.districtId = ''
addressData.value.subdistrictId = '' defaultAddress.value.subdistrictId = ''
addressData.value.code = null defaultAddress.value.code = null
} else { } else {
addressData.value.districtIdC = '' defaultAddress.value.districtIdC = ''
addressData.value.subdistrictIdC = '' defaultAddress.value.subdistrictIdC = ''
addressData.value.codeC = null defaultAddress.value.codeC = null
} }
myform.value.resetValidation() myform.value.resetValidation()
fetchDistrict(e, name) fetchDistrict(e, name)
@ -369,11 +395,11 @@ const selectProvince = (e: string, name: string) => {
const selectDistrict = (e: string, name: string) => { const selectDistrict = (e: string, name: string) => {
if (name == '1') { if (name == '1') {
addressData.value.subdistrictId = '' defaultAddress.value.subdistrictId = ''
addressData.value.code = null defaultAddress.value.code = null
} else { } else {
addressData.value.subdistrictIdC = '' defaultAddress.value.subdistrictIdC = ''
addressData.value.codeC = null defaultAddress.value.codeC = null
} }
myform.value.resetValidation() myform.value.resetValidation()
fetchSubDistrict(e, name) fetchSubDistrict(e, name)
@ -383,11 +409,11 @@ const selectSubDistrict = (e: string, name: string) => {
if (name == '1') { if (name == '1') {
const findcode = subdistrictOptions.value.filter((r) => r.id == e) const findcode = subdistrictOptions.value.filter((r) => r.id == e)
const namecode = findcode.length > 0 ? findcode[0].zipCode : null const namecode = findcode.length > 0 ? findcode[0].zipCode : null
addressData.value.code = namecode defaultAddress.value.code = namecode
} else { } else {
const findcode = subdistrictCOptions.value.filter((r) => r.id == e) const findcode = subdistrictCOptions.value.filter((r) => r.id == e)
const namecode = findcode.length > 0 ? findcode[0].zipCode : null const namecode = findcode.length > 0 ? findcode[0].zipCode : null
addressData.value.codeC = namecode defaultAddress.value.codeC = namecode
} }
} }

13
src/modules/01_exam/components/Form/Career.vue
View file

@ -129,7 +129,11 @@
:model-value="dateThaiRange(duration)" :model-value="dateThaiRange(duration)"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="mdi-calendar-outline" class="cursor-pointer" style="color: var(--q-primary)"> <q-icon
name="mdi-calendar-outline"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
@ -192,7 +196,6 @@ import type { ResponseObject } from '@/modules/01_exam/interface/response/Career
import Table from '@/components/Table.vue' import Table from '@/components/Table.vue'
import DialogHeader from '@/components/DialogHeader.vue' import DialogHeader from '@/components/DialogHeader.vue'
import DialogFooter from '@/components/DialogFooter.vue' import DialogFooter from '@/components/DialogFooter.vue'
import Conference from '@/modules/01_exam/components/Conference.vue'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
const props = defineProps({ const props = defineProps({
@ -212,6 +215,10 @@ const props = defineProps({
notiNoEdit: { notiNoEdit: {
type: Function, type: Function,
default: () => console.log('not function') default: () => console.log('not function')
},
btnSave: {
type: Boolean,
required: true
} }
}) })
@ -236,9 +243,7 @@ const rowIndex = ref<number>(0) //indexข้อมูลเดิมที่
const previous = ref<boolean>() //แสดงปุ่มดูข้อมูลก่อนหน้า const previous = ref<boolean>() //แสดงปุ่มดูข้อมูลก่อนหน้า
const next = ref<boolean>() //แสดงปุ่มดูข้อมูลต่อไป const next = ref<boolean>() //แสดงปุ่มดูข้อมูลต่อไป
const editRow = ref<boolean>(false) //เช็คมีการแก้ไขข้อมูล const editRow = ref<boolean>(false) //เช็คมีการแก้ไขข้อมูล
const statusCode = ref<number>()
const checkValidate = ref<boolean>(false) //validate data ผ่านหรือไม่ const checkValidate = ref<boolean>(false) //validate data ผ่านหรือไม่
// const modalConsend = ref<boolean>(false)
const route = useRoute() const route = useRoute()
const examId = ref<string>(route.params.id.toString()) const examId = ref<string>(route.params.id.toString())
const rows = ref<RequestItemsObject[]>([]) const rows = ref<RequestItemsObject[]>([])

18
src/modules/01_exam/components/Form/Document.vue
View file

@ -50,15 +50,7 @@
<q-btn size="12px" flat dense round color="blue" icon="mdi-download-outline"> <q-btn size="12px" flat dense round color="blue" icon="mdi-download-outline">
<q-tooltip>ดาวน์โหลด</q-tooltip> <q-tooltip>ดาวน์โหลด</q-tooltip>
</q-btn> </q-btn>
<q-btn <q-btn size="12px" flat dense round color="red" icon="mdi-delete-outline" v-if="edit">
size="12px"
flat
dense
round
color="red"
icon="mdi-delete-outline"
v-if="edit"
>
<q-tooltip>ลบไฟล์</q-tooltip> <q-tooltip>ลบไฟล์</q-tooltip>
</q-btn> </q-btn>
</div> </div>
@ -88,6 +80,10 @@ const props = defineProps({
status: { status: {
type: String, type: String,
required: true required: true
},
btnSave: {
type: Boolean,
required: true
} }
}) })
@ -109,6 +105,10 @@ const files = ref<any>([
]) ])
const emit = defineEmits(['update:loader', 'update:statusEdit']) const emit = defineEmits(['update:loader', 'update:statusEdit'])
// watch(props, async (count: any, prevCount: any) => {
// if (props.btnSave == true) await saveData()
// })
watch(edit, (count: boolean, prevCount: boolean) => { watch(edit, (count: boolean, prevCount: boolean) => {
emit('update:statusEdit', count) emit('update:statusEdit', count)
}) })

17
src/modules/01_exam/components/Form/Education.vue
View file

@ -145,7 +145,11 @@
:model-value="dateThaiRange(duration)" :model-value="dateThaiRange(duration)"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="mdi-calendar-outline" class="cursor-pointer" style="color: var(--q-primary)"> <q-icon
name="mdi-calendar-outline"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
@ -194,7 +198,6 @@ import type { ResponseObject } from '@/modules/01_exam/interface/response/Educat
import Table from '@/components/Table.vue' import Table from '@/components/Table.vue'
import DialogHeader from '@/components/DialogHeader.vue' import DialogHeader from '@/components/DialogHeader.vue'
import DialogFooter from '@/components/DialogFooter.vue' import DialogFooter from '@/components/DialogFooter.vue'
import Conference from '@/modules/01_exam/components/Conference.vue'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
const props = defineProps({ const props = defineProps({
@ -214,6 +217,10 @@ const props = defineProps({
notiNoEdit: { notiNoEdit: {
type: Function, type: Function,
default: () => console.log('not function') default: () => console.log('not function')
},
btnSave: {
type: Boolean,
required: true
} }
}) })
@ -240,9 +247,7 @@ const rowIndex = ref<number>(0) //indexข้อมูลเดิมที่
const previous = ref<boolean>() //แสดงปุ่มดูข้อมูลก่อนหน้า const previous = ref<boolean>() //แสดงปุ่มดูข้อมูลก่อนหน้า
const next = ref<boolean>() //แสดงปุ่มดูข้อมูลต่อไป const next = ref<boolean>() //แสดงปุ่มดูข้อมูลต่อไป
const editRow = ref<boolean>(false) //เช็คมีการแก้ไขข้อมูล const editRow = ref<boolean>(false) //เช็คมีการแก้ไขข้อมูล
const statusCode = ref<number>()
const checkValidate = ref<boolean>(false) //validate data ผ่านหรือไม่ const checkValidate = ref<boolean>(false) //validate data ผ่านหรือไม่
// const modalConsend = ref<boolean>(false)
const rows = ref<RequestItemsObject[]>([]) const rows = ref<RequestItemsObject[]>([])
const route = useRoute() const route = useRoute()
const examId = ref<string>(route.params.id.toString()) const examId = ref<string>(route.params.id.toString())
@ -304,6 +309,10 @@ const columns = ref<Columns>([
} }
]) ])
// watch(props, async (count: any, prevCount: any) => {
// if (props.btnSave == true) await saveData()
// })
watch(loader, (count: boolean, prevCount: boolean) => { watch(loader, (count: boolean, prevCount: boolean) => {
emit('update:loader', count) emit('update:loader', count)
}) })

153
src/modules/01_exam/components/Form/Family.vue
View file

@ -8,7 +8,7 @@
:addData="true" :addData="true"
:editOnly="false" :editOnly="false"
:cancel="cancelData" :cancel="cancelData"
:editData="status == 'register' || status == 'rejectRegister'" :editData="false"
:disable="statusEdit" :disable="statusEdit"
/> />
<!-- :changeBtn="changeBtn" --> <!-- :changeBtn="changeBtn" -->
@ -17,7 +17,7 @@
<div class="col-xs-12 q-gutter-sm items-center flex q-mb-sm"> <div class="col-xs-12 q-gutter-sm items-center flex q-mb-sm">
<label class="text-weight-bold">• คู่สมรส</label> <label class="text-weight-bold">• คู่สมรส</label>
<q-radio <q-radio
v-model="familyData.same" v-model="defaultFamily.same"
checked-icon="task_alt" checked-icon="task_alt"
unchecked-icon="panorama_fish_eye" unchecked-icon="panorama_fish_eye"
val="1" val="1"
@ -27,7 +27,7 @@
@update:model-value="selectRadio" @update:model-value="selectRadio"
/> />
<q-radio <q-radio
v-model="familyData.same" v-model="defaultFamily.same"
checked-icon="task_alt" checked-icon="task_alt"
unchecked-icon="panorama_fish_eye" unchecked-icon="panorama_fish_eye"
val="0" val="0"
@ -37,7 +37,7 @@
@update:model-value="selectRadio" @update:model-value="selectRadio"
/> />
</div> </div>
<div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'"> <div class="col-xs-12 col-sm-2 col-md-2" v-if="defaultFamily.same == '1'">
<q-select <q-select
:class="getClass(status == 'register' || status == 'rejectRegister')" :class="getClass(status == 'register' || status == 'rejectRegister')"
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
@ -46,7 +46,7 @@
:outlined="status == 'register' || status == 'rejectRegister'" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
v-model="familyData.prefixIdC" v-model="defaultFamily.prefixIdC"
emit-value emit-value
map-options map-options
option-label="name" option-label="name"
@ -56,7 +56,7 @@
/> />
</div> </div>
<div class="col-xs-12 col-sm-3 col-md-3" v-if="familyData.same == '1'"> <div class="col-xs-12 col-sm-3 col-md-3" v-if="defaultFamily.same == '1'">
<q-input <q-input
:class="getClass(status == 'register' || status == 'rejectRegister')" :class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'" :outlined="status == 'register' || status == 'rejectRegister'"
@ -64,12 +64,12 @@
lazy-rules lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.firstnameC" v-model="defaultFamily.firstnameC"
:rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]" :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
:label="`${'ชื่อ'}`" :label="`${'ชื่อ'}`"
/> />
</div> </div>
<div class="col-xs-12 col-sm-3 col-md-3" v-if="familyData.same == '1'"> <div class="col-xs-12 col-sm-3 col-md-3" v-if="defaultFamily.same == '1'">
<q-input <q-input
:class="getClass(status == 'register' || status == 'rejectRegister')" :class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'" :outlined="status == 'register' || status == 'rejectRegister'"
@ -77,12 +77,12 @@
lazy-rules lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.lastnameC" v-model="defaultFamily.lastnameC"
:rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]" :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
:label="`${'นามสกุล'}`" :label="`${'นามสกุล'}`"
/> />
</div> </div>
<div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'"> <div class="col-xs-12 col-sm-2 col-md-2" v-if="defaultFamily.same == '1'">
<q-input <q-input
:class="getClass(status == 'register' || status == 'rejectRegister')" :class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'" :outlined="status == 'register' || status == 'rejectRegister'"
@ -90,12 +90,12 @@
lazy-rules lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.occupationC" v-model="defaultFamily.occupationC"
:rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]" :rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]"
:label="`${'อาชีพ'}`" :label="`${'อาชีพ'}`"
/> />
</div> </div>
<div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'"> <div class="col-xs-12 col-sm-2 col-md-2" v-if="defaultFamily.same == '1'">
<q-input <q-input
:class="getClass(status == 'register' || status == 'rejectRegister')" :class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'" :outlined="status == 'register' || status == 'rejectRegister'"
@ -103,7 +103,7 @@
lazy-rules lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.nationalityC" v-model="defaultFamily.nationalityC"
:rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]" :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
:label="`${'สัญชาติ'}`" :label="`${'สัญชาติ'}`"
/> />
@ -119,7 +119,7 @@
:outlined="status == 'register' || status == 'rejectRegister'" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
v-model="familyData.prefixIdM" v-model="defaultFamily.prefixIdM"
emit-value emit-value
map-options map-options
option-label="name" option-label="name"
@ -137,7 +137,7 @@
lazy-rules lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.firstnameM" v-model="defaultFamily.firstnameM"
:rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]" :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
:label="`${'ชื่อ'}`" :label="`${'ชื่อ'}`"
/> />
@ -150,7 +150,7 @@
lazy-rules lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.lastnameM" v-model="defaultFamily.lastnameM"
:rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]" :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
:label="`${'นามสกุล'}`" :label="`${'นามสกุล'}`"
/> />
@ -163,7 +163,7 @@
lazy-rules lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.occupationM" v-model="defaultFamily.occupationM"
:rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]" :rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]"
:label="`${'อาชีพ'}`" :label="`${'อาชีพ'}`"
/> />
@ -176,7 +176,7 @@
lazy-rules lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.nationalityM" v-model="defaultFamily.nationalityM"
:rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]" :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
:label="`${'สัญชาติ'}`" :label="`${'สัญชาติ'}`"
/> />
@ -192,7 +192,7 @@
:outlined="status == 'register' || status == 'rejectRegister'" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
v-model="familyData.prefixIdF" v-model="defaultFamily.prefixIdF"
emit-value emit-value
map-options map-options
option-label="name" option-label="name"
@ -209,7 +209,7 @@
lazy-rules lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.firstnameF" v-model="defaultFamily.firstnameF"
:rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]" :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
:label="`${'ชื่อ'}`" :label="`${'ชื่อ'}`"
/> />
@ -222,7 +222,7 @@
lazy-rules lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.lastnameF" v-model="defaultFamily.lastnameF"
:rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]" :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
:label="`${'นามสกุล'}`" :label="`${'นามสกุล'}`"
/> />
@ -235,7 +235,7 @@
lazy-rules lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.occupationF" v-model="defaultFamily.occupationF"
:rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]" :rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]"
:label="`${'อาชีพ'}`" :label="`${'อาชีพ'}`"
/> />
@ -248,7 +248,7 @@
lazy-rules lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.nationalityF" v-model="defaultFamily.nationalityF"
:rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]" :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
:label="`${'สัญชาติ'}`" :label="`${'สัญชาติ'}`"
/> />
@ -263,16 +263,15 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref, watch } from 'vue' import { onMounted, ref, watch } from 'vue'
import { useQuasar } from 'quasar' import { QForm, useQuasar } from 'quasar'
import { useCounterMixin } from '@/stores/mixin' import { useCounterMixin } from '@/stores/mixin'
import type { PropType } from 'vue' import type { PropType } from 'vue'
import http from '@/plugins/http' import http from '@/plugins/http'
import config from '@/app.config' import config from '@/app.config'
import { useExamDataStore } from '@/modules/01_exam/store' import { useExamDataStore } from '@/modules/01_exam/store'
import type { Family, DataOption } from '@/modules/01_exam/interface/index/Main' import type { Family, DataOption } from '@/modules/01_exam/interface/index/Main'
import { defaultFamily } from '@/modules/01_exam/interface/index/Main' import { defaultFamily, changeData } from '@/modules/01_exam/interface/index/Main'
import HeaderTop from '@/components/top.vue' import HeaderTop from '@/components/top.vue'
import Conference from '@/modules/01_exam/components/Conference.vue'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
const props = defineProps({ const props = defineProps({
@ -291,6 +290,14 @@ const props = defineProps({
status: { status: {
type: String, type: String,
required: true required: true
},
btnSave: {
type: Boolean,
required: true
},
form: {
type: Object,
required: true
} }
}) })
@ -299,14 +306,25 @@ const mixin = useCounterMixin()
const store = useExamDataStore() const store = useExamDataStore()
const { success } = mixin const { success } = mixin
const edit = ref<boolean>(true) const edit = ref<boolean>(true)
const myform = ref<any>() const myform = ref<any>({})
const familyData = ref<Family>(defaultFamily) // const defaultFamily = ref<Family>(defaultFamily)
// const modalConsend = ref<boolean>(false)
const route = useRoute() const route = useRoute()
const examId = ref<string>(route.params.id.toString()) const examId = ref<string>(route.params.id.toString())
const loader = ref<boolean>(false) const loader = ref<boolean>(false)
const emit = defineEmits(['update:statusEdit']) const emit = defineEmits(['update:statusEdit', 'update:form'])
watch(props, async (count: any, prevCount: any) => {
// if (props.btnSave == true) await saveData()
})
watch(myform, async (count: any, prevCount: any) => {
emit('update:form', count)
})
watch(defaultFamily, async (count: Family, prevCount: Family) => {
await changeData('family', count)
})
onMounted(async () => { onMounted(async () => {
await fetchData() await fetchData()
@ -318,22 +336,22 @@ const fetchData = async () => {
.get(config.API.candidateFamily(examId.value)) .get(config.API.candidateFamily(examId.value))
.then((res) => { .then((res) => {
const data = res.data.result const data = res.data.result
familyData.value.prefixIdC = data.marryPrefixId defaultFamily.value.prefixIdC = data.marryPrefixId
familyData.value.firstnameC = data.marryFirstName defaultFamily.value.firstnameC = data.marryFirstName
familyData.value.lastnameC = data.marryLastName defaultFamily.value.lastnameC = data.marryLastName
familyData.value.occupationC = data.marryOccupation defaultFamily.value.occupationC = data.marryOccupation
familyData.value.nationalityC = data.marryNationality defaultFamily.value.nationalityC = data.marryNationality
familyData.value.prefixIdM = data.fatherPrefixId defaultFamily.value.prefixIdM = data.fatherPrefixId
familyData.value.firstnameM = data.fatherFirstName defaultFamily.value.firstnameM = data.fatherFirstName
familyData.value.lastnameM = data.fatherLastName defaultFamily.value.lastnameM = data.fatherLastName
familyData.value.occupationM = data.fatherOccupation defaultFamily.value.occupationM = data.fatherOccupation
familyData.value.nationalityM = data.fatherNationality defaultFamily.value.nationalityM = data.fatherNationality
familyData.value.prefixIdF = data.motherPrefixId defaultFamily.value.prefixIdF = data.motherPrefixId
familyData.value.firstnameF = data.motherFirstName defaultFamily.value.firstnameF = data.motherFirstName
familyData.value.lastnameF = data.motherLastName defaultFamily.value.lastnameF = data.motherLastName
familyData.value.occupationF = data.motherOccupation defaultFamily.value.occupationF = data.motherOccupation
familyData.value.nationalityF = data.motherNationality defaultFamily.value.nationalityF = data.motherNationality
familyData.value.same = data.marry == true ? '1' : data.marry == false ? '0' : null defaultFamily.value.same = data.marry == true ? '1' : data.marry == false ? '0' : null
}) })
.catch(() => {}) .catch(() => {})
.finally(() => { .finally(() => {
@ -348,25 +366,26 @@ const saveData = async () => {
loader.value = true loader.value = true
await http await http
.post(config.API.candidateFamily(examId.value), { .post(config.API.candidateFamily(examId.value), {
marryPrefixId: familyData.value.prefixIdC, marryPrefixId: defaultFamily.value.prefixIdC,
marryFirstName: familyData.value.firstnameC, marryFirstName: defaultFamily.value.firstnameC,
marryLastName: familyData.value.lastnameC, marryLastName: defaultFamily.value.lastnameC,
marryOccupation: familyData.value.occupationC, marryOccupation: defaultFamily.value.occupationC,
marryNationality: familyData.value.nationalityC, marryNationality: defaultFamily.value.nationalityC,
fatherPrefixId: familyData.value.prefixIdM, fatherPrefixId: defaultFamily.value.prefixIdM,
fatherFirstName: familyData.value.firstnameM, fatherFirstName: defaultFamily.value.firstnameM,
fatherLastName: familyData.value.lastnameM, fatherLastName: defaultFamily.value.lastnameM,
fatherOccupation: familyData.value.occupationM, fatherOccupation: defaultFamily.value.occupationM,
fatherNationality: familyData.value.nationalityM, fatherNationality: defaultFamily.value.nationalityM,
motherPrefixId: familyData.value.prefixIdF, motherPrefixId: defaultFamily.value.prefixIdF,
motherFirstName: familyData.value.firstnameF, motherFirstName: defaultFamily.value.firstnameF,
motherLastName: familyData.value.lastnameF, motherLastName: defaultFamily.value.lastnameF,
motherOccupation: familyData.value.occupationF, motherOccupation: defaultFamily.value.occupationF,
motherNationality: familyData.value.nationalityF, motherNationality: defaultFamily.value.nationalityF,
marry: familyData.value.same == '1' ? true : familyData.value.same == '0' ? false : null marry:
defaultFamily.value.same == '1' ? true : defaultFamily.value.same == '0' ? false : null
}) })
.then(() => { .then(() => {
success($q, 'บันทึกข้อมูลครอบครัวสำเร็จ') // success($q, 'บันทึกข้อมูลครอบครัวสำเร็จ')
// edit.value = false // edit.value = false
emit('update:statusEdit', false) emit('update:statusEdit', false)
}) })
@ -402,10 +421,10 @@ const saveData = async () => {
const selectRadio = (e: boolean) => { const selectRadio = (e: boolean) => {
if (!e) { if (!e) {
familyData.value.prefixIdC = '' defaultFamily.value.prefixIdC = ''
familyData.value.firstnameC = '' defaultFamily.value.firstnameC = ''
familyData.value.lastnameC = '' defaultFamily.value.lastnameC = ''
familyData.value.occupationC = '' defaultFamily.value.occupationC = ''
} }
} }

155
src/modules/01_exam/components/Form/Information.vue
View file

@ -8,7 +8,7 @@
:addData="true" :addData="true"
:editOnly="false" :editOnly="false"
:cancel="cancelData" :cancel="cancelData"
:editData="status == 'register' || status == 'rejectRegister'" :editData="false"
:disable="statusEdit" :disable="statusEdit"
/> />
<!-- :changeBtn="changeBtn" --> <!-- :changeBtn="changeBtn" -->
@ -23,7 +23,7 @@
:outlined="status == 'register' || status == 'rejectRegister'" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
v-model="informaData.prefixId" v-model="defaultInformation.prefixId"
emit-value emit-value
map-options map-options
option-label="name" option-label="name"
@ -40,7 +40,7 @@
lazy-rules lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="informaData.firstname" v-model="defaultInformation.firstname"
:rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]" :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
:label="`${'ชื่อ'}`" :label="`${'ชื่อ'}`"
/> />
@ -53,7 +53,7 @@
lazy-rules lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="informaData.lastname" v-model="defaultInformation.lastname"
:rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]" :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
:label="`${'นามสกุล'}`" :label="`${'นามสกุล'}`"
/> />
@ -66,14 +66,14 @@
lazy-rules lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="informaData.nationality" v-model="defaultInformation.nationality"
:rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]" :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
:label="`${'สัญชาติ'}`" :label="`${'สัญชาติ'}`"
/> />
</div> </div>
<div class="col-xs-12 col-sm-3 col-md-3"> <div class="col-xs-12 col-sm-3 col-md-3">
<datepicker <datepicker
v-model="informaData.birthDate" v-model="defaultInformation.birthDate"
:locale="'th'" :locale="'th'"
autoApply autoApply
:enableTimePicker="false" :enableTimePicker="false"
@ -95,7 +95,11 @@
lazy-rules lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
:model-value="informaData.birthDate == null ? null : date2Thai(informaData.birthDate)" :model-value="
defaultInformation.birthDate == null
? null
: date2Thai(defaultInformation.birthDate)
"
:rules="[(val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]" :rules="[(val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
:label="`${'วัน/เดือน/ปี เกิด'}`" :label="`${'วัน/เดือน/ปี เกิด'}`"
> >
@ -124,7 +128,9 @@
readonly readonly
borderless borderless
:style="!(status == 'register' || status == 'rejectRegister') ? '' : 'padding:0 12px;'" :style="!(status == 'register' || status == 'rejectRegister') ? '' : 'padding:0 12px;'"
:model-value="informaData.birthDate == null ? null : calAge(informaData.birthDate)" :model-value="
defaultInformation.birthDate == null ? null : calAge(defaultInformation.birthDate)
"
:label="`${'อายุ'}`" :label="`${'อายุ'}`"
/> />
</div> </div>
@ -137,7 +143,7 @@
:outlined="status == 'register' || status == 'rejectRegister'" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
v-model="informaData.relationship" v-model="defaultInformation.relationship"
emit-value emit-value
map-options map-options
option-label="name" option-label="name"
@ -156,7 +162,7 @@
lazy-rules lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="informaData.cardid" v-model="defaultInformation.cardid"
maxlength="13" maxlength="13"
:rules="[ :rules="[
(val) => !!val || `${'กรุณากรอก เลขบัตรประจำตัวประชาชน'}`, (val) => !!val || `${'กรุณากรอก เลขบัตรประจำตัวประชาชน'}`,
@ -174,7 +180,7 @@
:outlined="status == 'register' || status == 'rejectRegister'" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
v-model="informaData.provinceId" v-model="defaultInformation.provinceId"
emit-value emit-value
map-options map-options
option-label="name" option-label="name"
@ -193,7 +199,7 @@
lazy-rules lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="informaData.cardid" v-model="defaultInformation.cardid"
:rules="[(val) => !!val || `${'กรุณากรอก ออกให้ ณ อำเภอ'}`]" :rules="[(val) => !!val || `${'กรุณากรอก ออกให้ ณ อำเภอ'}`]"
label="ออกให้ ณ อำเภอ" label="ออกให้ ณ อำเภอ"
/> --> /> -->
@ -205,7 +211,7 @@
:outlined="status == 'register' || status == 'rejectRegister'" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
v-model="informaData.districtId" v-model="defaultInformation.districtId"
emit-value emit-value
map-options map-options
option-label="name" option-label="name"
@ -217,7 +223,7 @@
<div class="col-xs-12 col-sm-3 col-md-3"> <div class="col-xs-12 col-sm-3 col-md-3">
<datepicker <datepicker
v-model="informaData.cardIdDate" v-model="defaultInformation.cardIdDate"
:locale="'th'" :locale="'th'"
autoApply autoApply
:enableTimePicker="false" :enableTimePicker="false"
@ -240,7 +246,9 @@
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
:model-value=" :model-value="
informaData.cardIdDate == null ? null : date2Thai(informaData.cardIdDate) defaultInformation.cardIdDate == null
? null
: date2Thai(defaultInformation.cardIdDate)
" "
:rules="[(val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี ที่ออกบัตร'}`]" :rules="[(val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี ที่ออกบัตร'}`]"
:label="`${'วัน/เดือน/ปี ที่ออกบัตร'}`" :label="`${'วัน/เดือน/ปี ที่ออกบัตร'}`"
@ -272,7 +280,7 @@
:class="getClass(status == 'register' || status == 'rejectRegister')" :class="getClass(status == 'register' || status == 'rejectRegister')"
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="informaData.tel" v-model="defaultInformation.tel"
:rules="[ :rules="[
(val) => !!val || `${'กรุณากรอก โทรศัพท์'}`, (val) => !!val || `${'กรุณากรอก โทรศัพท์'}`,
(val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกข้อมูลโทรศัพท์ให้ถูกต้อง'}` (val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกข้อมูลโทรศัพท์ให้ถูกต้อง'}`
@ -291,7 +299,7 @@
:class="getClass(status == 'register' || status == 'rejectRegister')" :class="getClass(status == 'register' || status == 'rejectRegister')"
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="informaData.phone" v-model="defaultInformation.phone"
:rules="[ :rules="[
(val) => !!val || `${'กรุณากรอก โทรศัพท์มือถือ'}`, (val) => !!val || `${'กรุณากรอก โทรศัพท์มือถือ'}`,
(val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกข้อมูลโทรศัพท์มือถือให้ถูกต้อง'}` (val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกข้อมูลโทรศัพท์มือถือให้ถูกต้อง'}`
@ -307,7 +315,7 @@
lazy-rules lazy-rules
:readonly="true" :readonly="true"
:borderless="true" :borderless="true"
v-model="informaData.email" v-model="defaultInformation.email"
label="E-mail address" label="E-mail address"
/> />
</div> </div>
@ -343,7 +351,7 @@
lazy-rules lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="informaData.knowledge" v-model="defaultInformation.knowledge"
label="ความรู้ความสามารถพิเศษ" label="ความรู้ความสามารถพิเศษ"
type="textarea" type="textarea"
/> />
@ -356,17 +364,16 @@
</q-dialog> --> </q-dialog> -->
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from 'vue' import { ref, onMounted, watch } from 'vue'
import { useQuasar } from 'quasar' import { QForm, useQuasar } from 'quasar'
import { useCounterMixin } from '@/stores/mixin' import { useCounterMixin } from '@/stores/mixin'
import http from '@/plugins/http' import http from '@/plugins/http'
import config from '@/app.config' import config from '@/app.config'
import { useExamDataStore } from '@/modules/01_exam/store' import { useExamDataStore } from '@/modules/01_exam/store'
import type { PropType } from 'vue' import type { PropType } from 'vue'
import type { Information, DataOption } from '@/modules/01_exam/interface/index/Main' import type { Information, DataOption } from '@/modules/01_exam/interface/index/Main'
import { defaultInformation } from '@/modules/01_exam/interface/index/Main' import { defaultInformation, changeData } from '@/modules/01_exam/interface/index/Main'
import HeaderTop from '@/components/top.vue' import HeaderTop from '@/components/top.vue'
import Conference from '@/modules/01_exam/components/Conference.vue'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
import keycloak from '@/plugins/keycloak' import keycloak from '@/plugins/keycloak'
@ -394,6 +401,14 @@ const props = defineProps({
status: { status: {
type: String, type: String,
required: true required: true
},
btnSave: {
type: Boolean,
required: true
},
form: {
type: Object,
required: true
} }
}) })
@ -405,19 +420,32 @@ const districtOptions = ref<DataOption[]>([])
const route = useRoute() const route = useRoute()
const examId = ref<string>(route.params.id.toString()) const examId = ref<string>(route.params.id.toString())
const edit = ref<boolean>(true) const edit = ref<boolean>(true)
const informaData = ref<Information>(defaultInformation) // const defaultInformation = ref<Information>(defaultInformation)
const myform = ref<any>() const myform = ref<any>({})
const imageUrl = ref<string | null>(null) const imageUrl = ref<string | null>(null)
const disabledPic = ref<boolean>(false) const disabledPic = ref<boolean>(false)
// const modalConsend = ref<boolean>(false) // const modalConsend = ref<boolean>(false)
const fileData = ref<File | null>() const fileData = ref<File | null>()
const loader = ref<boolean>(false) const loader = ref<boolean>(false)
const emit = defineEmits(['update:statusEdit']) const emit = defineEmits(['update:statusEdit', 'update:form'])
watch(props, async (count: any, prevCount: any) => {
// if (props.btnSave == true) await saveData()
})
watch(myform, async (count: any, prevCount: any) => {
emit('update:form', count)
})
watch(defaultInformation, async (count: Information, prevCount: Information) => {
await changeData('information', count)
})
onMounted(async () => { onMounted(async () => {
await fetchData() await fetchData()
if (informaData.value.provinceId != null) await fetchDistrict(informaData.value.provinceId) if (defaultInformation.value.provinceId != null)
await fetchDistrict(defaultInformation.value.provinceId)
}) })
const fetchData = async () => { const fetchData = async () => {
@ -426,26 +454,29 @@ const fetchData = async () => {
.get(config.API.candidateInformation(examId.value)) .get(config.API.candidateInformation(examId.value))
.then((res) => { .then((res) => {
const data = res.data.result const data = res.data.result
informaData.value.prefixId = data.prefixId defaultInformation.value.prefixId = data.prefixId
informaData.value.lastname = data.lastName defaultInformation.value.lastname = data.lastName
informaData.value.provinceId = data.citizenProvinceId defaultInformation.value.provinceId = data.citizenProvinceId
informaData.value.districtId = data.citizenDistrictId defaultInformation.value.districtId = data.citizenDistrictId
informaData.value.birthDate = data.dateOfBirth == null ? null : new Date(data.dateOfBirth) defaultInformation.value.birthDate =
informaData.value.cardIdDate = data.citizenDate == null ? null : new Date(data.citizenDate) data.dateOfBirth == null ? null : new Date(data.dateOfBirth)
informaData.value.cardid = data.citizenId defaultInformation.value.cardIdDate =
informaData.value.firstname = data.firstName data.citizenDate == null ? null : new Date(data.citizenDate)
informaData.value.relationship = data.relationshipId defaultInformation.value.cardid = data.citizenId
informaData.value.nationality = data.nationality defaultInformation.value.firstname = data.firstName
informaData.value.email = data.email defaultInformation.value.relationship = data.relationshipId
informaData.value.phone = data.mobilePhone defaultInformation.value.nationality = data.nationality
informaData.value.tel = data.telephone defaultInformation.value.email = data.email
informaData.value.knowledge = data.knowledge defaultInformation.value.phone = data.mobilePhone
defaultInformation.value.tel = data.telephone
defaultInformation.value.knowledge = data.knowledge
}) })
.catch(() => { .catch(() => {
informaData.value.email = keycloak.tokenParsed == null ? '' : keycloak.tokenParsed.email defaultInformation.value.email =
informaData.value.firstname = keycloak.tokenParsed == null ? '' : keycloak.tokenParsed.email
defaultInformation.value.firstname =
keycloak.tokenParsed == null ? '' : keycloak.tokenParsed.given_name keycloak.tokenParsed == null ? '' : keycloak.tokenParsed.given_name
informaData.value.lastname = defaultInformation.value.lastname =
keycloak.tokenParsed == null ? '' : keycloak.tokenParsed.family_name keycloak.tokenParsed == null ? '' : keycloak.tokenParsed.family_name
}) })
.finally(() => { .finally(() => {
@ -454,7 +485,7 @@ const fetchData = async () => {
} }
const selectProvince = (val: string) => { const selectProvince = (val: string) => {
informaData.value.districtId = '' defaultInformation.value.districtId = ''
myform.value.resetValidation() myform.value.resetValidation()
fetchDistrict(val) fetchDistrict(val)
} }
@ -466,25 +497,29 @@ const saveData = async () => {
loader.value = true loader.value = true
await http await http
.post(config.API.candidateInformation(examId.value), { .post(config.API.candidateInformation(examId.value), {
prefixId: informaData.value.prefixId, prefixId: defaultInformation.value.prefixId,
lastName: informaData.value.lastname, lastName: defaultInformation.value.lastname,
citizenProvinceId: informaData.value.provinceId, citizenProvinceId: defaultInformation.value.provinceId,
citizenDistrictId: informaData.value.districtId, citizenDistrictId: defaultInformation.value.districtId,
dateOfBirth: dateOfBirth:
informaData.value.birthDate == null ? null : dateToISO(informaData.value.birthDate), defaultInformation.value.birthDate == null
? null
: dateToISO(defaultInformation.value.birthDate),
citizenDate: citizenDate:
informaData.value.cardIdDate == null ? null : dateToISO(informaData.value.cardIdDate), defaultInformation.value.cardIdDate == null
citizenId: informaData.value.cardid, ? null
firstName: informaData.value.firstname, : dateToISO(defaultInformation.value.cardIdDate),
relationshipId: informaData.value.relationship, citizenId: defaultInformation.value.cardid,
nationality: informaData.value.nationality, firstName: defaultInformation.value.firstname,
email: informaData.value.email, relationshipId: defaultInformation.value.relationship,
mobilePhone: informaData.value.phone, nationality: defaultInformation.value.nationality,
telephone: informaData.value.tel, email: defaultInformation.value.email,
knowledge: informaData.value.knowledge mobilePhone: defaultInformation.value.phone,
telephone: defaultInformation.value.tel,
knowledge: defaultInformation.value.knowledge
}) })
.then(() => { .then(() => {
success($q, 'บันทึกข้อมูลส่วนตัวสำเร็จ') // success($q, 'บันทึกข้อมูลส่วนตัวสำเร็จ')
// edit.value = false // edit.value = false
emit('update:statusEdit', false) emit('update:statusEdit', false)
}) })

123
src/modules/01_exam/components/Form/Occupation.vue
View file

@ -8,7 +8,7 @@
:addData="true" :addData="true"
:editOnly="false" :editOnly="false"
:cancel="cancelData" :cancel="cancelData"
:editData="status == 'register' || status == 'rejectRegister'" :editData="false"
:disable="statusEdit" :disable="statusEdit"
/> />
<!-- :changeBtn="changeBtn" --> <!-- :changeBtn="changeBtn" -->
@ -24,16 +24,16 @@
autogrow autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.official" v-model="defaultOccupation.official"
:rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]" :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
:disable=" :disable="
occupationData.status !== 'official' || defaultOccupation.status !== 'official' ||
!(status == 'register' || status == 'rejectRegister') !(status == 'register' || status == 'rejectRegister')
" "
> >
<template v-slot:before> <template v-slot:before>
<q-radio <q-radio
v-model="occupationData.status" v-model="defaultOccupation.status"
checked-icon="task_alt" checked-icon="task_alt"
unchecked-icon="panorama_fish_eye" unchecked-icon="panorama_fish_eye"
val="official" val="official"
@ -54,16 +54,16 @@
autogrow autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.personnel" v-model="defaultOccupation.personnel"
:rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]" :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
:disable=" :disable="
occupationData.status !== 'personnel' || defaultOccupation.status !== 'personnel' ||
!(status == 'register' || status == 'rejectRegister') !(status == 'register' || status == 'rejectRegister')
" "
> >
<template v-slot:before> <template v-slot:before>
<q-radio <q-radio
v-model="occupationData.status" v-model="defaultOccupation.status"
checked-icon="task_alt" checked-icon="task_alt"
unchecked-icon="panorama_fish_eye" unchecked-icon="panorama_fish_eye"
val="personnel" val="personnel"
@ -84,16 +84,16 @@
autogrow autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.officialsOther" v-model="defaultOccupation.officialsOther"
:rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]" :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
:disable=" :disable="
occupationData.status !== 'officialsOther' || defaultOccupation.status !== 'officialsOther' ||
!(status == 'register' || status == 'rejectRegister') !(status == 'register' || status == 'rejectRegister')
" "
> >
<template v-slot:before> <template v-slot:before>
<q-radio <q-radio
v-model="occupationData.status" v-model="defaultOccupation.status"
checked-icon="task_alt" checked-icon="task_alt"
unchecked-icon="panorama_fish_eye" unchecked-icon="panorama_fish_eye"
val="officialsOther" val="officialsOther"
@ -114,16 +114,16 @@
autogrow autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.employee" v-model="defaultOccupation.employee"
:rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]" :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
:disable=" :disable="
occupationData.status !== 'employee' || defaultOccupation.status !== 'employee' ||
!(status == 'register' || status == 'rejectRegister') !(status == 'register' || status == 'rejectRegister')
" "
> >
<template v-slot:before> <template v-slot:before>
<q-radio <q-radio
v-model="occupationData.status" v-model="defaultOccupation.status"
checked-icon="task_alt" checked-icon="task_alt"
unchecked-icon="panorama_fish_eye" unchecked-icon="panorama_fish_eye"
val="employee" val="employee"
@ -136,7 +136,7 @@
</template> </template>
</q-input> </q-input>
<q-radio <q-radio
v-model="occupationData.status" v-model="defaultOccupation.status"
checked-icon="task_alt" checked-icon="task_alt"
unchecked-icon="panorama_fish_eye" unchecked-icon="panorama_fish_eye"
val="studying" val="studying"
@ -155,16 +155,16 @@
autogrow autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.other" v-model="defaultOccupation.other"
:rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]" :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
:disable=" :disable="
occupationData.status !== 'other' || defaultOccupation.status !== 'other' ||
!(status == 'register' || status == 'rejectRegister') !(status == 'register' || status == 'rejectRegister')
" "
> >
<template v-slot:before> <template v-slot:before>
<q-radio <q-radio
v-model="occupationData.status" v-model="defaultOccupation.status"
checked-icon="task_alt" checked-icon="task_alt"
unchecked-icon="panorama_fish_eye" unchecked-icon="panorama_fish_eye"
val="other" val="other"
@ -187,7 +187,7 @@
autogrow autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.company" v-model="defaultOccupation.company"
:rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]" :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
:label="`${'สำนัก/บริษัท'}`" :label="`${'สำนัก/บริษัท'}`"
/> />
@ -202,7 +202,7 @@
autogrow autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.department" v-model="defaultOccupation.department"
:rules="[(val) => !!val || `${'กรุณากรอก กอง/ฝ่าย'}`]" :rules="[(val) => !!val || `${'กรุณากรอก กอง/ฝ่าย'}`]"
:label="`${'กอง/ฝ่าย'}`" :label="`${'กอง/ฝ่าย'}`"
/> />
@ -217,7 +217,7 @@
autogrow autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.email" v-model="defaultOccupation.email"
:rules="[(val) => !!val || `${'กรุณากรอก E-mail address'}`]" :rules="[(val) => !!val || `${'กรุณากรอก E-mail address'}`]"
:label="`${'E-mail address'}`" :label="`${'E-mail address'}`"
/> />
@ -234,7 +234,7 @@
autogrow autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.tel" v-model="defaultOccupation.tel"
:rules="[ :rules="[
(val) => !!val || `${'กรุณากรอก โทรศัพท์'}`, (val) => !!val || `${'กรุณากรอก โทรศัพท์'}`,
(val) => /^[0-9]*$/.test(val) || 'กรุณากรอก โทรศัพท์ให้ถูกต้อง' (val) => /^[0-9]*$/.test(val) || 'กรุณากรอก โทรศัพท์ให้ถูกต้อง'
@ -251,16 +251,15 @@
</q-dialog> --> </q-dialog> -->
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from 'vue' import { ref, onMounted, watch } from 'vue'
import { useQuasar } from 'quasar' import { QForm, useQuasar } from 'quasar'
import { useCounterMixin } from '@/stores/mixin' import { useCounterMixin } from '@/stores/mixin'
import http from '@/plugins/http' import http from '@/plugins/http'
import config from '@/app.config' import config from '@/app.config'
import { useExamDataStore } from '@/modules/01_exam/store' import { useExamDataStore } from '@/modules/01_exam/store'
import type { Occupation } from '@/modules/01_exam/interface/index/Main' import type { Occupation } from '@/modules/01_exam/interface/index/Main'
import { defaultOccupation } from '@/modules/01_exam/interface/index/Main' import { defaultOccupation, changeData } from '@/modules/01_exam/interface/index/Main'
import HeaderTop from '@/components/top.vue' import HeaderTop from '@/components/top.vue'
import Conference from '@/modules/01_exam/components/Conference.vue'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
const props = defineProps({ const props = defineProps({
@ -275,6 +274,14 @@ const props = defineProps({
status: { status: {
type: String, type: String,
required: true required: true
},
btnSave: {
type: Boolean,
required: true
},
form: {
type: Object,
required: true
} }
}) })
@ -283,14 +290,26 @@ const mixin = useCounterMixin()
const store = useExamDataStore() const store = useExamDataStore()
const { success } = mixin const { success } = mixin
const edit = ref<boolean>(true) const edit = ref<boolean>(true)
const occupationData = ref<Occupation>(defaultOccupation) // const defaultOccupation = ref<Occupation>(defaultOccupation)
const myform = ref<any>() const myform = ref<any>({})
// const modalConsend = ref<boolean>(false) // const modalConsend = ref<boolean>(false)
const loader = ref<boolean>(false) const loader = ref<boolean>(false)
const route = useRoute() const route = useRoute()
const examId = ref<string>(route.params.id.toString()) const examId = ref<string>(route.params.id.toString())
const emit = defineEmits(['update:statusEdit']) const emit = defineEmits(['update:statusEdit', 'update:form'])
watch(props, async (count: any, prevCount: any) => {
// if (props.btnSave == true) await saveData()
})
watch(myform, async (count: any, prevCount: any) => {
emit('update:form', count)
})
watch(defaultOccupation, async (count: Occupation, prevCount: Occupation) => {
await changeData('occupation', count)
})
onMounted(async () => { onMounted(async () => {
await fetchData() await fetchData()
@ -302,20 +321,21 @@ const fetchData = async () => {
.get(config.API.candidateOccupation(examId.value)) .get(config.API.candidateOccupation(examId.value))
.then((res) => { .then((res) => {
const data = res.data.result const data = res.data.result
occupationData.value.status = data.occupationType defaultOccupation.value.status = data.occupationType
occupationData.value.company = data.occupationCompany defaultOccupation.value.company = data.occupationCompany
occupationData.value.department = data.occupationDepartment defaultOccupation.value.department = data.occupationDepartment
occupationData.value.email = data.occupationEmail defaultOccupation.value.email = data.occupationEmail
occupationData.value.tel = data.occupationTelephone defaultOccupation.value.tel = data.occupationTelephone
occupationData.value.official = defaultOccupation.value.official =
data.occupationType == 'official' ? data.occupationPosition : null data.occupationType == 'official' ? data.occupationPosition : null
occupationData.value.personnel = defaultOccupation.value.personnel =
data.occupationType == 'personnel' ? data.occupationPosition : null data.occupationType == 'personnel' ? data.occupationPosition : null
occupationData.value.officialsOther = defaultOccupation.value.officialsOther =
data.occupationType == 'officialsOther' ? data.occupationPosition : null data.occupationType == 'officialsOther' ? data.occupationPosition : null
occupationData.value.employee = defaultOccupation.value.employee =
data.occupationType == 'employee' ? data.occupationPosition : null data.occupationType == 'employee' ? data.occupationPosition : null
occupationData.value.other = data.occupationType == 'other' ? data.occupationPosition : null defaultOccupation.value.other =
data.occupationType == 'other' ? data.occupationPosition : null
}) })
.catch(() => {}) .catch(() => {})
.finally(() => { .finally(() => {
@ -328,24 +348,27 @@ const saveData = async () => {
if (suc) { if (suc) {
// if (store.consend == true) { // if (store.consend == true) {
const type = ref<string | null>('') const type = ref<string | null>('')
if (occupationData.value.status == 'official') type.value = occupationData.value.official if (defaultOccupation.value.status == 'official')
if (occupationData.value.status == 'personnel') type.value = occupationData.value.personnel type.value = defaultOccupation.value.official
if (occupationData.value.status == 'officialsOther') if (defaultOccupation.value.status == 'personnel')
type.value = occupationData.value.officialsOther type.value = defaultOccupation.value.personnel
if (occupationData.value.status == 'employee') type.value = occupationData.value.employee if (defaultOccupation.value.status == 'officialsOther')
if (occupationData.value.status == 'other') type.value = occupationData.value.other type.value = defaultOccupation.value.officialsOther
if (defaultOccupation.value.status == 'employee')
type.value = defaultOccupation.value.employee
if (defaultOccupation.value.status == 'other') type.value = defaultOccupation.value.other
loader.value = true loader.value = true
await http await http
.post(config.API.candidateOccupation(examId.value), { .post(config.API.candidateOccupation(examId.value), {
occupationType: occupationData.value.status, occupationType: defaultOccupation.value.status,
occupationCompany: occupationData.value.company, occupationCompany: defaultOccupation.value.company,
occupationDepartment: occupationData.value.department, occupationDepartment: defaultOccupation.value.department,
occupationEmail: occupationData.value.email, occupationEmail: defaultOccupation.value.email,
occupationTelephone: occupationData.value.tel, occupationTelephone: defaultOccupation.value.tel,
occupationPosition: type.value occupationPosition: type.value
}) })
.then(() => { .then(() => {
success($q, 'บันทึกข้อมูลอาชีพสำเร็จ') // success($q, 'บันทึกข้อมูลอาชีพสำเร็จ')
// edit.value = false // edit.value = false
emit('update:statusEdit', false) emit('update:statusEdit', false)
}) })

106
src/modules/01_exam/components/Form/Profile.vue
View file

@ -8,6 +8,8 @@
v-model:statusEdit="statusEdit" v-model:statusEdit="statusEdit"
:notiNoEdit="notiNoEdit" :notiNoEdit="notiNoEdit"
:status="status" :status="status"
:btnSave="btnSave"
v-model:form="formInformation"
/> />
</div> </div>
@ -18,6 +20,8 @@
v-model:statusEdit="statusEdit" v-model:statusEdit="statusEdit"
:notiNoEdit="notiNoEdit" :notiNoEdit="notiNoEdit"
:status="status" :status="status"
:btnSave="btnSave"
v-model:form="formAddress"
/> />
</div> </div>
@ -28,47 +32,58 @@
v-model:statusEdit="statusEdit" v-model:statusEdit="statusEdit"
:notiNoEdit="notiNoEdit" :notiNoEdit="notiNoEdit"
:status="status" :status="status"
:btnSave="btnSave"
v-model:form="formFamily"
/> />
</div> </div>
<q-separator class="q-my-lg bg-gray" size="5px" /> <q-separator class="q-my-lg bg-gray" size="5px" />
<div class="q-px-sm"> <div class="q-px-sm">
<Occupation v-model:statusEdit="statusEdit" :notiNoEdit="notiNoEdit" :status="status" /> <Occupation
v-model:statusEdit="statusEdit"
:notiNoEdit="notiNoEdit"
:status="status"
:btnSave="btnSave"
v-model:form="formOccupation"
/>
</div> </div>
<q-separator class="q-my-lg bg-gray" size="5px" /> <q-separator class="q-my-lg bg-gray" size="5px" />
<div class="q-px-sm"> <div class="q-px-sm">
<Education <Education
:loader="loader" :loader="loader"
v-model:statusEdit="statusEdit" v-model:statusEdit="statusEdit"
:notiNoEdit="notiNoEdit" :notiNoEdit="notiNoEdit"
:status="status" :status="status"
/> :btnSave="btnSave"
/>
</div> </div>
<q-separator class="q-my-lg bg-gray" size="5px" /> <q-separator class="q-my-lg bg-gray" size="5px" />
<div class="q-px-sm"> <div class="q-px-sm">
<Career <Career
:loader="loader" :loader="loader"
v-model:statusEdit="statusEdit" v-model:statusEdit="statusEdit"
:notiNoEdit="notiNoEdit" :notiNoEdit="notiNoEdit"
:status="status" :status="status"
/> :btnSave="btnSave"
/>
</div> </div>
<q-separator class="q-my-lg bg-gray" size="5px" /> <q-separator class="q-my-lg bg-gray" size="5px" />
<div class="q-px-sm"> <div class="q-px-sm">
<Document <Document
:loader="loader" :loader="loader"
v-model:statusEdit="statusEdit" v-model:statusEdit="statusEdit"
:notiNoEdit="notiNoEdit" :notiNoEdit="notiNoEdit"
:status="status" :status="status"
/> :btnSave="btnSave"
/>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, watch } from 'vue' import { ref, onMounted, watch } from 'vue'
import { useQuasar } from 'quasar' import { QForm, useQuasar } from 'quasar'
import { useCounterMixin } from '@/stores/mixin' import { useCounterMixin } from '@/stores/mixin'
import http from '@/plugins/http' import http from '@/plugins/http'
import config from '@/app.config' import config from '@/app.config'
@ -94,6 +109,26 @@ const props = defineProps({
status: { status: {
type: String, type: String,
required: true required: true
},
btnSave: {
type: Boolean,
required: true
},
formInformation: {
type: Object,
required: true
},
formAddress: {
type: Object,
required: true
},
formFamily: {
type: Object,
required: true
},
formOccupation: {
type: Object,
required: true
} }
}) })
@ -105,13 +140,40 @@ const statusEdit = ref<boolean>(false)
const prefixOptions = ref<DataOption[]>([]) const prefixOptions = ref<DataOption[]>([])
const relationshipOptions = ref<DataOption[]>([]) const relationshipOptions = ref<DataOption[]>([])
const provinceOptions = ref<DataOption[]>([]) const provinceOptions = ref<DataOption[]>([])
const formInformation = ref<any>({})
const formAddress = ref<any>({})
const formFamily = ref<any>({})
const formOccupation = ref<any>({})
const emit = defineEmits(['update:loader', 'update:statusEdit']) const emit = defineEmits([
'update:loader',
'update:statusEdit',
'update:formInformation',
'update:formAddress',
'update:formFamily',
'update:formOccupation'
])
watch(statusEdit, (count: boolean, prevCount: boolean) => { watch(statusEdit, (count: boolean, prevCount: boolean) => {
emit('update:statusEdit', count) emit('update:statusEdit', count)
}) })
watch(formInformation, async (count: Object, prevCount: Object) => {
emit('update:formInformation', count)
})
watch(formAddress, async (count: Object, prevCount: Object) => {
emit('update:formAddress', count)
})
watch(formFamily, async (count: Object, prevCount: Object) => {
emit('update:formFamily', count)
})
watch(formOccupation, async (count: Object, prevCount: Object) => {
emit('update:formOccupation', count)
})
onMounted(() => { onMounted(() => {
fetchPrefix() fetchPrefix()
fetchRelationship() fetchRelationship()
@ -143,7 +205,6 @@ const fetchRelationship = async () => {
.then((res) => { .then((res) => {
const data = res.data.result const data = res.data.result
let option: DataOption[] = [] let option: DataOption[] = []
// console.log(data);
data.map((r: any) => { data.map((r: any) => {
option.push({ id: r.id.toString(), name: r.name.toString() }) option.push({ id: r.id.toString(), name: r.name.toString() })
}) })
@ -162,7 +223,6 @@ const fetchProvince = async () => {
.then((res) => { .then((res) => {
const data = res.data.result const data = res.data.result
let option: DataOption[] = [] let option: DataOption[] = []
// console.log(data);
data.map((r: any) => { data.map((r: any) => {
option.push({ id: r.id.toString(), name: r.name.toString() }) option.push({ id: r.id.toString(), name: r.name.toString() })
}) })

31
src/modules/01_exam/interface/index/Main.ts
View file

@ -1,3 +1,4 @@
import { ref } from 'vue'
interface Pagination { interface Pagination {
rowsPerPage: number rowsPerPage: number
} }
@ -201,7 +202,7 @@ const defaultCard: ExamCard[] = [
} }
] ]
const defaultAddress: Address = { const defaultAddress = ref<Address>({
address: null, address: null,
provinceId: null, provinceId: null,
districtId: null, districtId: null,
@ -213,9 +214,9 @@ const defaultAddress: Address = {
subdistrictIdC: null, subdistrictIdC: null,
// codeC: , // codeC: ,
same: '1' same: '1'
} })
const defaultInformation: Information = { const defaultInformation = ref<Information>({
cardid: null, cardid: null,
prefix: null, prefix: null,
prefixId: null, prefixId: null,
@ -237,9 +238,9 @@ const defaultInformation: Information = {
districtId: null, districtId: null,
provinceId: null, provinceId: null,
statusId: null statusId: null
} })
const defaultFamily: Family = { const defaultFamily = ref<Family>({
prefixC: null, prefixC: null,
prefixIdC: null, prefixIdC: null,
firstnameC: null, firstnameC: null,
@ -259,9 +260,9 @@ const defaultFamily: Family = {
occupationF: null, occupationF: null,
nationalityF: null, nationalityF: null,
same: '0' same: '0'
} })
const defaultOccupation: Occupation = { const defaultOccupation = ref<Occupation>({
status: null, status: null,
company: null, company: null,
department: null, department: null,
@ -272,9 +273,23 @@ const defaultOccupation: Occupation = {
officialsOther: null, officialsOther: null,
employee: null, employee: null,
other: null other: null
})
const changeData = (system: String, val: any) => {
if (system == 'information') defaultInformation.value = val
if (system == 'address') defaultAddress.value = val
if (system == 'famliy') defaultFamily.value = val
if (system == 'occupation') defaultOccupation.value = val
} }
export { defaultInformation, defaultFamily, defaultAddress, defaultOccupation, defaultCard } export {
defaultInformation,
defaultFamily,
defaultAddress,
defaultOccupation,
defaultCard,
changeData
}
export type { export type {
Pagination, Pagination,
DataOption, DataOption,