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-28 14:51:48 +07:00
parent a95c2fcbb4
commit 05d19419e7
11 changed files with 341 additions and 285 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/Table.vue
View file

@ -95,7 +95,7 @@ import type { Pagination } from '@/modules/01_exam/interface/index/Main'
const attrs = ref<any>(useAttrs()) const attrs = ref<any>(useAttrs())
const table = ref<any>(null) const table = ref<any>(null)
const filterRef = ref<any>(null) const filterRef = ref<any>(null)
const editBtn = ref<boolean>(false) const editBtn = ref<boolean>(true)
const initialPagination = ref<Pagination>({ const initialPagination = ref<Pagination>({
// descending: false, // descending: false,
rowsPerPage: 0 rowsPerPage: 0

11
src/modules/01_exam/components/Conference.vue
View file

@ -78,14 +78,19 @@
จะไม่ดำเนินการอื่นใดแตกต่างจากที่ระบุในวัตถุประสงค์เว้นแต่มีกฏหมายบัญญัติให้กระทำหรือมีหนังสือร้องขอที่สามารถปฏิบัติได้ตามกฏหมาย จะไม่ดำเนินการอื่นใดแตกต่างจากที่ระบุในวัตถุประสงค์เว้นแต่มีกฏหมายบัญญัติให้กระทำหรือมีหนังสือร้องขอที่สามารถปฏิบัติได้ตามกฏหมาย
เช่น เพื่อความจำเป็นในการป้องกันด้านสุขภาพและโรคติดต่ออันตราย เช่น เพื่อความจำเป็นในการป้องกันด้านสุขภาพและโรคติดต่ออันตราย
</p> </p>
<q-checkbox
v-model="acceptTermOfUse"
label="ข้าพเจ้ารับรองว่า ข้าพเจ้ามีคุณสมบัติครบถ้วนตามประกาศรับสมัคร ข้อความข้างต้นตรงตามความจริงทุกประการ"
/>
</q-card-section> </q-card-section>
</q-card> </q-card>
</div> </div>
</q-card-section> </q-card-section>
<q-separator /> <q-separator />
<q-card-actions align="right" class="bg-white text-teal justify-center"> <q-card-actions align="right" class="bg-white text-teal justify-center">
<q-btn label="ยกเลิก" color="grey" @click="close" flat /> <!-- <q-btn label="ยกเลิก" color="grey" @click="close" flat /> -->
<q-btn label="ตกลง" color="primary" @click="ok" /> <!-- <q-space /> -->
<q-btn label="ตกลง" color="primary" @click="ok" :disable="!acceptTermOfUse" />
</q-card-actions> </q-card-actions>
</template> </template>
@ -104,6 +109,8 @@ const props = defineProps({
}) })
const fullname = ref<string>('') const fullname = ref<string>('')
const acceptTermOfUse = ref<boolean>(false)
/** /**
* ดิงชื่อผู้ใช้งานจาก keycloak * ดิงชื่อผู้ใช้งานจาก keycloak
*/ */

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

@ -1,7 +1,8 @@
<!-- step กรอกข้อมูล --> <!-- step กรอกข้อมูล -->
<template> <template>
<div> <div>
<q-splitter v-model="splitterModel" style="height: 450px"> <Profile :loader="loader" v-model:statusEdit="statusEdit" :status="status" />
<!-- <q-splitter v-model="splitterModel" style="height: 450px">
<template v-slot:before> <template v-slot:before>
<q-tab-panels <q-tab-panels
v-model="tab" v-model="tab"
@ -10,23 +11,22 @@
transition-prev="jump-up" transition-prev="jump-up"
transition-next="jump-up" transition-next="jump-up"
> >
<!-- swipeable --> ข้อมูลส่วนบุคคล
<!-- ข้อมูลส่วนบุคคล -->
<q-tab-panel name="profile"> <q-tab-panel name="profile">
<Profile :loader="loader" v-model:statusEdit="statusEdit" :status="status" /> <Profile :loader="loader" v-model:statusEdit="statusEdit" :status="status" />
</q-tab-panel> </q-tab-panel>
<!-- ประวัติการศีกษา --> ประวัติการศีกษา
<q-tab-panel name="education" <q-tab-panel name="education">
><Education :loader="loader" v-model:statusEdit="statusEdit" :status="status" <Education :loader="loader" v-model:statusEdit="statusEdit" :status="status" />
/></q-tab-panel> </q-tab-panel>
<!-- ประวัติการทำงาน/ฝึกงาน --> ประวัติการทำงาน/ฝึกงาน
<q-tab-panel name="career" <q-tab-panel name="career">
><Career :loader="loader" v-model:statusEdit="statusEdit" :status="status" <Career :loader="loader" v-model:statusEdit="statusEdit" :status="status" />
/></q-tab-panel> </q-tab-panel>
<!-- ไฟล์ --> ไฟล์
<q-tab-panel name="document"> <q-tab-panel name="document">
<Document :loader="loader" v-model:statusEdit="statusEdit" :status="status" /> <Document :loader="loader" v-model:statusEdit="statusEdit" :status="status" />
</q-tab-panel> </q-tab-panel>
@ -40,19 +40,19 @@
<q-tab name="document" label="อัปโหลดเอกสาร" :disable="statusEdit" /> <q-tab name="document" label="อัปโหลดเอกสาร" :disable="statusEdit" />
</q-tabs> </q-tabs>
</template> </template>
</q-splitter> </q-splitter> -->
<div> <div>
<q-checkbox <q-checkbox
v-model="acceptTermOfUse" v-model="acceptTermOfUse"
:disable="(status !== 'register' && status !== 'rejectRegister') || statusEdit" :disable="(status !== 'register' && status !== 'rejectRegister') || statusEdit"
v-if="tab == 'document'"
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 <!-- <q-btn
color="primary" color="primary"
class="q-ml-md" class="q-ml-md"
label="กลับ" label="กลับ"
@ -75,13 +75,21 @@
" "
icon-right="mdi-chevron-right" icon-right="mdi-chevron-right"
:disable="statusEdit" :disable="statusEdit"
/> -->
<q-btn
color="primary"
class="q-ml-md"
label="บันทึกข้อมูล"
@click="okModalConfirm"
v-if="status === 'register' || status === 'rejectRegister'"
:disable="!acceptTermOfUse || statusEdit"
/> />
<q-btn <q-btn
color="primary" color="primary"
class="q-ml-md" class="q-ml-md"
label="สมัครสอบ" label="สมัครสอบ"
@click="okModalConfirm" @click="okModalConfirm"
v-if="(status === 'register' || status === 'rejectRegister') && tab == 'document'" v-if="status === 'register' || status === 'rejectRegister'"
:disable="!acceptTermOfUse || statusEdit" :disable="!acceptTermOfUse || statusEdit"
/> />
</div> </div>
@ -113,8 +121,8 @@ const props = defineProps({
const $q = useQuasar() const $q = useQuasar()
const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
const { modalConfirm, modalError, success } = mixin const { modalConfirm, modalError, success } = mixin
const tab = ref<string>('profile') // const tab = ref<string>('profile')
const splitterModel = ref<number>(90) // 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)
@ -154,36 +162,35 @@ const saveForm = async () => {
}) })
} }
const clickPreview = (val: string) => { // const clickPreview = (val: string) => {
console.log(val) // switch (val) {
switch (val) { // case 'profile':
case 'profile': // return (tab.value = 'profile')
return (tab.value = 'profile') // case 'education':
case 'education': // return (tab.value = 'profile')
return (tab.value = 'profile') // case 'career':
case 'career': // return (tab.value = 'education')
return (tab.value = 'education') // case 'document':
case 'document': // return (tab.value = 'career')
return (tab.value = 'career') // default:
default: // return (tab.value = 'profile')
return (tab.value = 'profile') // }
} // }
}
const clickNext = (val: string) => { // const clickNext = (val: string) => {
switch (val) { // switch (val) {
case 'profile': // case 'profile':
return (tab.value = 'education') // return (tab.value = 'education')
case 'education': // case 'education':
return (tab.value = 'career') // return (tab.value = 'career')
case 'career': // case 'career':
return (tab.value = 'document') // return (tab.value = 'document')
case 'document': // case 'document':
return (tab.value = 'profile') // return (tab.value = 'profile')
default: // default:
return (tab.value = 'profile') // return (tab.value = 'profile')
} // }
} // }
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>

78
src/modules/01_exam/components/Form/Profile/Address.vue → src/modules/01_exam/components/Form/Address.vue
View file

@ -17,27 +17,27 @@
<div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"> <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
<div class="col-xs-12"> <div class="col-xs-12">
<q-input <q-input
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="edit" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
type="textarea" type="textarea"
autogrow autogrow
:readonly="!edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!edit" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="addressData.address" v-model="addressData.address"
:rules="[(val) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]" :rules="[(val) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
:label="`${'ที่อยู่ตามทะเบียนบ้าน'}`" :label="`${'ที่อยู่ตามทะเบียนบ้าน'}`"
/> />
<!-- :filled="edit" --> <!-- :filled="(status == 'register' || status == 'rejectRegister')" -->
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3"> <div class="col-xs-6 col-sm-3 col-md-3">
<q-select <q-select
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
:readonly="!edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!edit" :borderless="!(status == 'register' || status == 'rejectRegister')"
:rules="[(val) => !!val || `${'กรุณาเลือก จังหวัด'}`]" :rules="[(val) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
:outlined="edit" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
v-model="addressData.provinceId" v-model="addressData.provinceId"
@ -52,11 +52,11 @@
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3"> <div class="col-xs-6 col-sm-3 col-md-3">
<q-select <q-select
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
:readonly="!edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!edit" :borderless="!(status == 'register' || status == 'rejectRegister')"
:rules="[(val) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]" :rules="[(val) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
:outlined="edit" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
v-model="addressData.districtId" v-model="addressData.districtId"
@ -71,11 +71,11 @@
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3"> <div class="col-xs-6 col-sm-3 col-md-3">
<q-select <q-select
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
:readonly="!edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!edit" :borderless="!(status == 'register' || status == 'rejectRegister')"
:rules="[(val) => !!val || `${'กรุณาเลือก ตำบล / แขวง'}`]" :rules="[(val) => !!val || `${'กรุณาเลือก ตำบล / แขวง'}`]"
:outlined="edit" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
v-model="addressData.subdistrictId" v-model="addressData.subdistrictId"
@ -90,13 +90,13 @@
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3"> <div class="col-xs-6 col-sm-3 col-md-3">
<q-input <q-input
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
dense dense
lazy-rules lazy-rules
readonly readonly
borderless borderless
v-model="addressData.code" v-model="addressData.code"
:style="!edit ? '' : 'padding:0 12px;'" :style="!(status == 'register' || status == 'rejectRegister') ? '' : 'padding:0 12px;'"
:label="`${'รหัสไปรษณีย์'}`" :label="`${'รหัสไปรษณีย์'}`"
/> />
</div> </div>
@ -110,7 +110,7 @@
val="1" val="1"
label="ใช่" label="ใช่"
dense dense
:disable="!edit" :disable="!(status == 'register' || status == 'rejectRegister')"
/> />
<q-radio <q-radio
v-model="addressData.same" v-model="addressData.same"
@ -119,20 +119,20 @@
val="0" val="0"
label="ไม่" label="ไม่"
dense dense
:disable="!edit" :disable="!(status == 'register' || status == 'rejectRegister')"
/> />
</div> </div>
<div class="col-xs-12" v-if="addressData.same == '0'"> <div class="col-xs-12" v-if="addressData.same == '0'">
<q-input <q-input
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="edit" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
type="textarea" type="textarea"
autogrow autogrow
:readonly="!edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!edit" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="addressData.addressC" v-model="addressData.addressC"
:rules="[(val) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]" :rules="[(val) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]"
:label="`${'ที่อยู่ปัจจุบัน'}`" :label="`${'ที่อยู่ปัจจุบัน'}`"
@ -140,11 +140,11 @@
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'"> <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
<q-select <q-select
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
:readonly="!edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!edit" :borderless="!(status == 'register' || status == 'rejectRegister')"
:rules="[(val) => !!val || `${'กรุณาเลือก จังหวัด'}`]" :rules="[(val) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
:outlined="edit" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
v-model="addressData.provinceIdC" v-model="addressData.provinceIdC"
@ -159,11 +159,11 @@
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'"> <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
<q-select <q-select
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
:readonly="!edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!edit" :borderless="!(status == 'register' || status == 'rejectRegister')"
:rules="[(val) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]" :rules="[(val) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
:outlined="edit" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
v-model="addressData.districtIdC" v-model="addressData.districtIdC"
@ -178,11 +178,11 @@
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'"> <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
<q-select <q-select
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
:readonly="!edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!edit" :borderless="!(status == 'register' || status == 'rejectRegister')"
:rules="[(val) => !!val || `${'กรุณาเลือก ตำบล / แขวง'}`]" :rules="[(val) => !!val || `${'กรุณาเลือก ตำบล / แขวง'}`]"
:outlined="edit" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
v-model="addressData.subdistrictIdC" v-model="addressData.subdistrictIdC"
@ -197,13 +197,13 @@
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'"> <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
<q-input <q-input
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
dense dense
lazy-rules lazy-rules
readonly readonly
borderless borderless
v-model="addressData.codeC" v-model="addressData.codeC"
:style="!edit ? '' : 'padding:0 12px;'" :style="!(status == 'register' || status == 'rejectRegister') ? '' : 'padding:0 12px;'"
:label="`${'รหัสไปรษณีย์'}`" :label="`${'รหัสไปรษณีย์'}`"
/> />
</div> </div>

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

@ -1,6 +1,6 @@
<!-- tab ประวัติการทำงาน/ฝึกงาน --> <!-- tab ประวัติการทำงาน/ฝึกงาน -->
<template> <template>
<q-card flat bordered class="col-12 q-px-lg q-py-md"> <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
<q-form ref="myForm"> <q-form ref="myForm">
<Table <Table
:rows="rows" :rows="rows"

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

@ -1,6 +1,6 @@
<!-- card อัปโหลดเอกสาร --> <!-- card อัปโหลดเอกสาร -->
<template> <template>
<q-card flat bordered class="col-12 q-px-lg q-py-md"> <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
<div class="col-12"> <div class="col-12">
<HeaderTop <HeaderTop
v-model:edit="edit" v-model:edit="edit"
@ -99,7 +99,7 @@ const props = defineProps({
} }
}) })
const edit = ref<boolean>(true) const edit = ref<boolean>(props.status == 'register' || props.status == 'rejectRegister')
const name = ref<string>('') const name = ref<string>('')
const files = ref<any>([ const files = ref<any>([
{ {

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

@ -1,6 +1,6 @@
<!-- tab ประวัติการศึกษา --> <!-- tab ประวัติการศึกษา -->
<template> <template>
<q-card flat bordered class="col-12 q-px-lg q-py-md"> <q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
<q-form ref="myForm"> <q-form ref="myForm">
<Table <Table
:rows="rows" :rows="rows"

124
src/modules/01_exam/components/Form/Profile/Family.vue → src/modules/01_exam/components/Form/Family.vue
View file

@ -24,7 +24,7 @@
val="1" val="1"
label="มี" label="มี"
dense dense
:disable="!edit" :disable="!(status == 'register' || status == 'rejectRegister')"
@update:model-value="selectRadio" @update:model-value="selectRadio"
/> />
<q-radio <q-radio
@ -34,17 +34,17 @@
val="0" val="0"
label="ไม่มี" label="ไม่มี"
dense dense
:disable="!edit" :disable="!(status == 'register' || status == 'rejectRegister')"
@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="familyData.same == '1'">
<q-select <q-select
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
:readonly="!edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!edit" :borderless="!(status == 'register' || status == 'rejectRegister')"
:rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]" :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
:outlined="edit" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
v-model="familyData.prefixIdC" v-model="familyData.prefixIdC"
@ -59,12 +59,12 @@
<div class="col-xs-6 col-sm-3 col-md-3" v-if="familyData.same == '1'"> <div class="col-xs-6 col-sm-3 col-md-3" v-if="familyData.same == '1'">
<q-input <q-input
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="edit" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
:readonly="!edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!edit" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.firstnameC" v-model="familyData.firstnameC"
:rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]" :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
:label="`${'ชื่อ'}`" :label="`${'ชื่อ'}`"
@ -72,12 +72,12 @@
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3" v-if="familyData.same == '1'"> <div class="col-xs-6 col-sm-3 col-md-3" v-if="familyData.same == '1'">
<q-input <q-input
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="edit" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
:readonly="!edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!edit" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.lastnameC" v-model="familyData.lastnameC"
:rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]" :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
:label="`${'นามสกุล'}`" :label="`${'นามสกุล'}`"
@ -85,12 +85,12 @@
</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="familyData.same == '1'">
<q-input <q-input
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="edit" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
:readonly="!edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!edit" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.occupationC" v-model="familyData.occupationC"
:rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]" :rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]"
:label="`${'อาชีพ'}`" :label="`${'อาชีพ'}`"
@ -98,12 +98,12 @@
</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="familyData.same == '1'">
<q-input <q-input
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="edit" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
:readonly="!edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!edit" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.nationalityC" v-model="familyData.nationalityC"
:rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]" :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
:label="`${'สัญชาติ'}`" :label="`${'สัญชาติ'}`"
@ -113,11 +113,11 @@
<div class="col-xs-12 text-weight-bold">• บิดา</div> <div class="col-xs-12 text-weight-bold">• บิดา</div>
<div class="col-xs-12 col-sm-2 col-md-2"> <div class="col-xs-12 col-sm-2 col-md-2">
<q-select <q-select
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
:readonly="!edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!edit" :borderless="!(status == 'register' || status == 'rejectRegister')"
:rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]" :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
:outlined="edit" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
v-model="familyData.prefixIdM" v-model="familyData.prefixIdM"
@ -132,12 +132,12 @@
<div class="col-xs-6 col-sm-3 col-md-3"> <div class="col-xs-6 col-sm-3 col-md-3">
<q-input <q-input
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="edit" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
:readonly="!edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!edit" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.firstnameM" v-model="familyData.firstnameM"
:rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]" :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
:label="`${'ชื่อ'}`" :label="`${'ชื่อ'}`"
@ -145,12 +145,12 @@
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3"> <div class="col-xs-6 col-sm-3 col-md-3">
<q-input <q-input
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="edit" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
:readonly="!edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!edit" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.lastnameM" v-model="familyData.lastnameM"
:rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]" :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
:label="`${'นามสกุล'}`" :label="`${'นามสกุล'}`"
@ -158,12 +158,12 @@
</div> </div>
<div class="col-xs-12 col-sm-2 col-md-2"> <div class="col-xs-12 col-sm-2 col-md-2">
<q-input <q-input
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="edit" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
:readonly="!edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!edit" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.occupationM" v-model="familyData.occupationM"
:rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]" :rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]"
:label="`${'อาชีพ'}`" :label="`${'อาชีพ'}`"
@ -171,12 +171,12 @@
</div> </div>
<div class="col-xs-12 col-sm-2 col-md-2"> <div class="col-xs-12 col-sm-2 col-md-2">
<q-input <q-input
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="edit" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
:readonly="!edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!edit" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.nationalityM" v-model="familyData.nationalityM"
:rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]" :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
:label="`${'สัญชาติ'}`" :label="`${'สัญชาติ'}`"
@ -186,11 +186,11 @@
<div class="col-xs-12 text-weight-bold">• มารดา</div> <div class="col-xs-12 text-weight-bold">• มารดา</div>
<div class="col-xs-12 col-sm-2 col-md-2"> <div class="col-xs-12 col-sm-2 col-md-2">
<q-select <q-select
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
:readonly="!edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!edit" :borderless="!(status == 'register' || status == 'rejectRegister')"
:rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]" :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
:outlined="edit" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
v-model="familyData.prefixIdF" v-model="familyData.prefixIdF"
@ -204,12 +204,12 @@
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3"> <div class="col-xs-6 col-sm-3 col-md-3">
<q-input <q-input
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="edit" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
:readonly="!edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!edit" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.firstnameF" v-model="familyData.firstnameF"
:rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]" :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
:label="`${'ชื่อ'}`" :label="`${'ชื่อ'}`"
@ -217,12 +217,12 @@
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3"> <div class="col-xs-6 col-sm-3 col-md-3">
<q-input <q-input
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="edit" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
:readonly="!edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!edit" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.lastnameF" v-model="familyData.lastnameF"
:rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]" :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
:label="`${'นามสกุล'}`" :label="`${'นามสกุล'}`"
@ -230,12 +230,12 @@
</div> </div>
<div class="col-xs-12 col-sm-2 col-md-2"> <div class="col-xs-12 col-sm-2 col-md-2">
<q-input <q-input
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="edit" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
:readonly="!edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!edit" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.occupationF" v-model="familyData.occupationF"
:rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]" :rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]"
:label="`${'อาชีพ'}`" :label="`${'อาชีพ'}`"
@ -243,12 +243,12 @@
</div> </div>
<div class="col-xs-12 col-sm-2 col-md-2"> <div class="col-xs-12 col-sm-2 col-md-2">
<q-input <q-input
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="edit" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
:readonly="!edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!edit" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="familyData.nationalityF" v-model="familyData.nationalityF"
:rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]" :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
:label="`${'สัญชาติ'}`" :label="`${'สัญชาติ'}`"

174
src/modules/01_exam/components/Form/Profile/Information.vue → src/modules/01_exam/components/Form/Information.vue
View file

@ -15,13 +15,13 @@
<!-- :changeBtn="changeBtn" --> <!-- :changeBtn="changeBtn" -->
<q-form ref="myform" class="col-12 row"> <q-form ref="myform" class="col-12 row">
<div class="row col-10 items-center q-col-gutter-x-sm q-col-gutter-y-sm"> <div class="row col-10 items-center q-col-gutter-x-sm q-col-gutter-y-sm">
<div class="col-xs-6 col-sm-3 col-md-3"> <div class="col-xs-6 col-sm-2 col-md-2">
<q-select <q-select
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
:readonly="!edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!edit" :borderless="!(status == 'register' || status == 'rejectRegister')"
:rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]" :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
:outlined="edit" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
v-model="informaData.prefixId" v-model="informaData.prefixId"
@ -33,27 +33,27 @@
:label="`${'คำนำหน้า'}`" :label="`${'คำนำหน้า'}`"
/> />
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3"> <div class="col-xs-6 col-sm-5 col-md-5">
<q-input <q-input
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="edit" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
:readonly="!edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!edit" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="informaData.firstname" v-model="informaData.firstname"
:rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]" :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
:label="`${'ชื่อ'}`" :label="`${'ชื่อ'}`"
/> />
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3"> <div class="col-xs-6 col-sm-5 col-md-5">
<q-input <q-input
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="edit" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
:readonly="!edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!edit" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="informaData.lastname" v-model="informaData.lastname"
:rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]" :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
:label="`${'นามสกุล'}`" :label="`${'นามสกุล'}`"
@ -61,12 +61,12 @@
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3"> <div class="col-xs-6 col-sm-3 col-md-3">
<q-input <q-input
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="edit" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
:readonly="!edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!edit" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="informaData.nationality" v-model="informaData.nationality"
:rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]" :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
:label="`${'สัญชาติ'}`" :label="`${'สัญชาติ'}`"
@ -80,7 +80,7 @@
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
:max-date="new Date()" :max-date="new Date()"
:disabled="!edit" :disabled="!(status == 'register' || status == 'rejectRegister')"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
@ -90,12 +90,12 @@
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="edit" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
:readonly="!edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!edit" :borderless="!(status == 'register' || status == 'rejectRegister')"
:model-value=" :model-value="
informaData.birthDate == null ? null : date2Thai(informaData.birthDate) informaData.birthDate == null ? null : date2Thai(informaData.birthDate)
" "
@ -106,7 +106,11 @@
<q-icon <q-icon
name="event" name="event"
class="cursor-pointer" class="cursor-pointer"
:style="edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'" :style="
status == 'register' || status == 'rejectRegister'
? 'color: var(--q-primary)'
: 'color: var(--q-grey)'
"
> >
</q-icon> </q-icon>
</template> </template>
@ -116,23 +120,23 @@
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3"> <div class="col-xs-6 col-sm-3 col-md-3">
<q-input <q-input
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
dense dense
lazy-rules lazy-rules
readonly readonly
borderless borderless
:style="!edit ? '' : 'padding:0 12px;'" :style="!(status == 'register' || status == 'rejectRegister') ? '' : 'padding:0 12px;'"
:model-value="informaData.birthDate == null ? null : calAge(informaData.birthDate)" :model-value="informaData.birthDate == null ? null : calAge(informaData.birthDate)"
:label="`${'อายุ'}`" :label="`${'อายุ'}`"
/> />
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3"> <div class="col-xs-6 col-sm-3 col-md-3">
<q-select <q-select
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
:readonly="!edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!edit" :borderless="!(status == 'register' || status == 'rejectRegister')"
:rules="[(val) => !!val || `${'กรุณาเลือก สถานภาพ'}`]" :rules="[(val) => !!val || `${'กรุณาเลือก สถานภาพ'}`]"
:outlined="edit" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
v-model="informaData.relationship" v-model="informaData.relationship"
@ -146,26 +150,13 @@
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3"> <div class="col-xs-6 col-sm-3 col-md-3">
<q-input <q-input
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="edit" :outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="informaData.email"
:rules="[(val) => !!val || `${'กรุณากรอก E-mail address'}`]"
label="E-mail address"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense dense
counter counter
lazy-rules lazy-rules
:readonly="!edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!edit" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="informaData.cardid" v-model="informaData.cardid"
maxlength="13" maxlength="13"
:rules="[ :rules="[
@ -177,11 +168,11 @@
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3"> <div class="col-xs-6 col-sm-3 col-md-3">
<q-select <q-select
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
:readonly="!edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!edit" :borderless="!(status == 'register' || status == 'rejectRegister')"
:rules="[(val) => !!val || `${'กรุณาเลือก จังหวัด'}`]" :rules="[(val) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
:outlined="edit" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
v-model="informaData.provinceId" v-model="informaData.provinceId"
@ -196,23 +187,23 @@
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3"> <div class="col-xs-6 col-sm-3 col-md-3">
<!-- <q-input <!-- <q-input
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="edit" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
:readonly="!edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!edit" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="informaData.cardid" v-model="informaData.cardid"
:rules="[(val) => !!val || `${'กรุณากรอก ออกให้ ณ อำเภอ'}`]" :rules="[(val) => !!val || `${'กรุณากรอก ออกให้ ณ อำเภอ'}`]"
label="ออกให้ ณ อำเภอ" label="ออกให้ ณ อำเภอ"
/> --> /> -->
<q-select <q-select
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
:readonly="!edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!edit" :borderless="!(status == 'register' || status == 'rejectRegister')"
:rules="[(val) => !!val || `${'กรุณากรอกอำเภอ'}`]" :rules="[(val) => !!val || `${'กรุณากรอกอำเภอ'}`]"
:outlined="edit" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
v-model="informaData.districtId" v-model="informaData.districtId"
@ -233,7 +224,7 @@
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
:max-date="new Date()" :max-date="new Date()"
:disabled="!edit" :disabled="!(status == 'register' || status == 'rejectRegister')"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
@ -243,23 +234,27 @@
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="edit" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
:readonly="!edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!edit" :borderless="!(status == 'register' || status == 'rejectRegister')"
:model-value=" :model-value="
informaData.cardIdDate == null ? null : date2Thai(informaData.cardIdDate) informaData.cardIdDate == null ? null : date2Thai(informaData.cardIdDate)
" "
:rules="[(val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี'}`]" :rules="[(val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี ที่ออกบัตร'}`]"
:label="`${'วัน/เดือน/ปี'}`" :label="`${'วัน/เดือน/ปี ที่ออกบัตร'}`"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
name="event" name="event"
class="cursor-pointer" class="cursor-pointer"
:style="edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'" :style="
status == 'register' || status == 'rejectRegister'
? 'color: var(--q-primary)'
: 'color: var(--q-grey)'
"
> >
</q-icon> </q-icon>
</template> </template>
@ -269,15 +264,15 @@
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3"> <div class="col-xs-6 col-sm-3 col-md-3">
<q-input <q-input
:outlined="edit" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
counter counter
lazy-rules lazy-rules
type="tel" type="tel"
maxlength="10" maxlength="10"
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
:readonly="!edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!edit" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="informaData.tel" v-model="informaData.tel"
:rules="[ :rules="[
(val) => !!val || `${'กรุณากรอก โทรศัพท์'}`, (val) => !!val || `${'กรุณากรอก โทรศัพท์'}`,
@ -288,15 +283,15 @@
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3"> <div class="col-xs-6 col-sm-3 col-md-3">
<q-input <q-input
:outlined="edit" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
counter counter
lazy-rules lazy-rules
type="tel" type="tel"
maxlength="10" maxlength="10"
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
:readonly="!edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!edit" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="informaData.phone" v-model="informaData.phone"
:rules="[ :rules="[
(val) => !!val || `${'กรุณากรอก โทรศัพท์มือถือ'}`, (val) => !!val || `${'กรุณากรอก โทรศัพท์มือถือ'}`,
@ -305,16 +300,27 @@
:label="`${'โทรศัพท์มือถือ'}`" :label="`${'โทรศัพท์มือถือ'}`"
/> />
</div> </div>
<div class="col-xs-12 col-sm-12 col-md-12"> <div class="col-xs-6 col-sm-3 col-md-3">
<q-input <q-input
:class="getClass(edit)" :class="getClass(false)"
:outlined="edit" :outlined="false"
dense dense
lazy-rules lazy-rules
:readonly="!edit" :readonly="true"
:borderless="!edit" :borderless="true"
v-model="informaData.email"
label="E-mail address"
/>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="informaData.knowledge" v-model="informaData.knowledge"
:rules="[(val) => !!val || `${'กรุณากรอก ความรู้ความสามารถพิเศษ'}`]"
label="ความรู้ความสามารถพิเศษ" label="ความรู้ความสามารถพิเศษ"
type="textarea" type="textarea"
/> />
@ -326,11 +332,11 @@
borderless borderless
v-model="fileData" v-model="fileData"
stack-label stack-label
:readonly="statusEdit" :readonly="!(status == 'register' || status == 'rejectRegister')"
@update:model-value="pickFile" @update:model-value="pickFile"
> >
<q-img src="@/assets/avatar_user.jpg" class="col-12"> <q-img src="@/assets/avatar_user.jpg" class="col-12">
<div class="overlay" v-if="!statusEdit"> <div class="overlay" v-if="status == 'register' || status == 'rejectRegister'">
<q-icon name="mdi-camera" /> <q-icon name="mdi-camera" />
<br />อัปเดต <br />อัปเดต
</div> </div>

99
src/modules/01_exam/components/Form/Profile/Occupation.vue → src/modules/01_exam/components/Form/Occupation.vue
View file

@ -17,17 +17,20 @@
<div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"> <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
<div class="col-12 row"> <div class="col-12 row">
<q-input <q-input
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
hide-bottom-space hide-bottom-space
dense dense
lazy-rules lazy-rules
type="textarea" type="textarea"
autogrow autogrow
:readonly="!edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!edit" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.official" v-model="occupationData.official"
:rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]" :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
:disable="occupationData.status !== 'official' || !edit" :disable="
occupationData.status !== 'official' ||
!(status == 'register' || status == 'rejectRegister')
"
> >
<template v-slot:before> <template v-slot:before>
<q-radio <q-radio
@ -37,24 +40,27 @@
val="official" val="official"
label="ข้าราชการกรุงเทพมหานคร ตำแหน่ง" label="ข้าราชการกรุงเทพมหานคร ตำแหน่ง"
dense dense
:disable="!edit" :disable="!(status == 'register' || status == 'rejectRegister')"
size="md" size="md"
style="font-size: 14px; color: black" style="font-size: 14px; color: black"
/> />
</template> </template>
</q-input> </q-input>
<q-input <q-input
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
hide-bottom-space hide-bottom-space
dense dense
lazy-rules lazy-rules
type="textarea" type="textarea"
autogrow autogrow
:readonly="!edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!edit" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.personnel" v-model="occupationData.personnel"
:rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]" :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
:disable="occupationData.status !== 'personnel' || !edit" :disable="
occupationData.status !== 'personnel' ||
!(status == 'register' || status == 'rejectRegister')
"
> >
<template v-slot:before> <template v-slot:before>
<q-radio <q-radio
@ -64,24 +70,27 @@
val="personnel" val="personnel"
label="บุคลากรกรุงเทพมหานคร ตำแหน่ง" label="บุคลากรกรุงเทพมหานคร ตำแหน่ง"
dense dense
:disable="!edit" :disable="!(status == 'register' || status == 'rejectRegister')"
size="md" size="md"
style="font-size: 14px; color: black" style="font-size: 14px; color: black"
/> />
</template> </template>
</q-input> </q-input>
<q-input <q-input
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
hide-bottom-space hide-bottom-space
dense dense
lazy-rules lazy-rules
type="textarea" type="textarea"
autogrow autogrow
:readonly="!edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!edit" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.officialsOther" v-model="occupationData.officialsOther"
:rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]" :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
:disable="occupationData.status !== 'officialsOther' || !edit" :disable="
occupationData.status !== 'officialsOther' ||
!(status == 'register' || status == 'rejectRegister')
"
> >
<template v-slot:before> <template v-slot:before>
<q-radio <q-radio
@ -91,24 +100,27 @@
val="officialsOther" val="officialsOther"
label="ข้าราชการประเภทอื่น ตำแหน่ง" label="ข้าราชการประเภทอื่น ตำแหน่ง"
dense dense
:disable="!edit" :disable="!(status == 'register' || status == 'rejectRegister')"
size="md" size="md"
style="font-size: 14px; color: black" style="font-size: 14px; color: black"
/> />
</template> </template>
</q-input> </q-input>
<q-input <q-input
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
hide-bottom-space hide-bottom-space
dense dense
lazy-rules lazy-rules
type="textarea" type="textarea"
autogrow autogrow
:readonly="!edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!edit" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.employee" v-model="occupationData.employee"
:rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]" :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
:disable="occupationData.status !== 'employee' || !edit" :disable="
occupationData.status !== 'employee' ||
!(status == 'register' || status == 'rejectRegister')
"
> >
<template v-slot:before> <template v-slot:before>
<q-radio <q-radio
@ -118,7 +130,7 @@
val="employee" val="employee"
label="ลูกจ้าง/พนักงานราชการของส่วนราชการอื่น ตำแหน่ง" label="ลูกจ้าง/พนักงานราชการของส่วนราชการอื่น ตำแหน่ง"
dense dense
:disable="!edit" :disable="!(status == 'register' || status == 'rejectRegister')"
size="md" size="md"
style="font-size: 14px; color: black" style="font-size: 14px; color: black"
/> />
@ -131,22 +143,25 @@
val="studying" val="studying"
label="กำลังศึกษาต่อ" label="กำลังศึกษาต่อ"
dense dense
:disable="!edit" :disable="!(status == 'register' || status == 'rejectRegister')"
size="md" size="md"
style="font-size: 14px; color: black" style="font-size: 14px; color: black"
/> />
<q-input <q-input
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
hide-bottom-space hide-bottom-space
dense dense
lazy-rules lazy-rules
type="textarea" type="textarea"
autogrow autogrow
:readonly="!edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!edit" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.other" v-model="occupationData.other"
:rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]" :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
:disable="occupationData.status !== 'other' || !edit" :disable="
occupationData.status !== 'other' ||
!(status == 'register' || status == 'rejectRegister')
"
> >
<template v-slot:before> <template v-slot:before>
<q-radio <q-radio
@ -156,7 +171,7 @@
val="other" val="other"
label="อื่นๆ" label="อื่นๆ"
dense dense
:disable="!edit" :disable="!(status == 'register' || status == 'rejectRegister')"
size="md" size="md"
style="font-size: 14px; color: black" style="font-size: 14px; color: black"
/> />
@ -165,15 +180,15 @@
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3"> <div class="col-xs-6 col-sm-3 col-md-3">
<q-input <q-input
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
hide-bottom-space hide-bottom-space
:outlined="edit" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
type="textarea" type="textarea"
autogrow autogrow
:readonly="!edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!edit" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.company" v-model="occupationData.company"
:rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]" :rules="[(val) => !!val || `${'กรุณากรอก สำนัก/บริษัท'}`]"
:label="`${'สำนัก/บริษัท'}`" :label="`${'สำนัก/บริษัท'}`"
@ -181,15 +196,15 @@
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3"> <div class="col-xs-6 col-sm-3 col-md-3">
<q-input <q-input
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
hide-bottom-space hide-bottom-space
:outlined="edit" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
type="textarea" type="textarea"
autogrow autogrow
:readonly="!edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!edit" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.department" v-model="occupationData.department"
:rules="[(val) => !!val || `${'กรุณากรอก กอง/ฝ่าย'}`]" :rules="[(val) => !!val || `${'กรุณากรอก กอง/ฝ่าย'}`]"
:label="`${'กอง/ฝ่าย'}`" :label="`${'กอง/ฝ่าย'}`"
@ -197,15 +212,15 @@
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3"> <div class="col-xs-6 col-sm-3 col-md-3">
<q-input <q-input
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
hide-bottom-space hide-bottom-space
:outlined="edit" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
type="textarea" type="textarea"
autogrow autogrow
:readonly="!edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!edit" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.email" v-model="occupationData.email"
:rules="[(val) => !!val || `${'กรุณากรอก E-mail address'}`]" :rules="[(val) => !!val || `${'กรุณากรอก E-mail address'}`]"
:label="`${'E-mail address'}`" :label="`${'E-mail address'}`"
@ -213,15 +228,15 @@
</div> </div>
<div class="col-xs-6 col-sm-3 col-md-3"> <div class="col-xs-6 col-sm-3 col-md-3">
<q-input <q-input
:class="getClass(edit)" :class="getClass(status == 'register' || status == 'rejectRegister')"
hide-bottom-space hide-bottom-space
:outlined="edit" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
lazy-rules lazy-rules
type="textarea" type="textarea"
autogrow autogrow
:readonly="!edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!edit" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="occupationData.tel" v-model="occupationData.tel"
:rules="[(val) => !!val || `${'กรุณากรอก โทรศัพท์'}`]" :rules="[(val) => !!val || `${'กรุณากรอก โทรศัพท์'}`]"
:label="`${'โทรศัพท์'}`" :label="`${'โทรศัพท์'}`"

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

@ -21,6 +21,24 @@
:status="status" :status="status"
/> />
<Occupation v-model:statusEdit="statusEdit" :notiNoEdit="notiNoEdit" :status="status" /> <Occupation v-model:statusEdit="statusEdit" :notiNoEdit="notiNoEdit" :status="status" />
<Education
:loader="loader"
v-model:statusEdit="statusEdit"
:notiNoEdit="notiNoEdit"
:status="status"
/>
<Career
:loader="loader"
v-model:statusEdit="statusEdit"
:notiNoEdit="notiNoEdit"
:status="status"
/>
<Document
:loader="loader"
v-model:statusEdit="statusEdit"
:notiNoEdit="notiNoEdit"
:status="status"
/>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, watch } from 'vue' import { ref, onMounted, watch } from 'vue'
@ -29,10 +47,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 type { DataOption } from '@/modules/01_exam/interface/index/Main' import type { DataOption } from '@/modules/01_exam/interface/index/Main'
import Information from '@/modules/01_exam/components/Form/Profile/Information.vue' import Information from '@/modules/01_exam/components/Form/Information.vue'
import Address from '@/modules/01_exam/components/Form/Profile/Address.vue' import Address from '@/modules/01_exam/components/Form/Address.vue'
import Family from '@/modules/01_exam/components/Form/Profile/Family.vue' import Family from '@/modules/01_exam/components/Form/Family.vue'
import Occupation from '@/modules/01_exam/components/Form/Profile/Occupation.vue' import Occupation from '@/modules/01_exam/components/Form/Occupation.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'
const props = defineProps({ const props = defineProps({
loader: { loader: {