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

ปรับ ui สรรหาสอบคัดเลือก

Browse source
This commit is contained in:
Kittapath 2023-10-02 00:22:43 +07:00
parent e3aa1d8221
commit 5fbf1bd8bd
11 changed files with 836 additions and 1200 deletions
Download patch file Download diff file Expand all files Collapse all files

65
src/modules/01_exam/components/Consendform.vue
View file

File diff suppressed because one or more lines are too long

19
src/modules/01_exam/components/ExamCard.vue
View file

@ -110,6 +110,10 @@
<div class="col-xs-6 col-sm-7 q-pr-xs"> <div class="col-xs-6 col-sm-7 q-pr-xs">
{{ position }} {{ position }}
</div> </div>
<div class="col-xs-6 col-sm-5 text-grey-7">ระดับ</div>
<div class="col-xs-6 col-sm-7 q-pr-xs">
{{ positionLevel }}
</div>
<div class="col-xs-6 col-sm-5 text-grey-7">ลำดับที่สอบได้</div> <div class="col-xs-6 col-sm-5 text-grey-7">ลำดับที่สอบได้</div>
<div class="col-xs-6 col-sm-7 q-pr-xs"> <div class="col-xs-6 col-sm-7 q-pr-xs">
{{ number }} {{ number }}
@ -138,9 +142,7 @@
readonly readonly
/> />
</div> </div>
<div class="col-xs-4 col-sm-5 q-pr-sm text-grey-7"> <div class="col-xs-4 col-sm-5 q-pr-sm text-grey-7">ความคิดเห็น/ข้อแนะนำ</div>
ความคิดเห็น/ข้อแนะนำ
</div>
<div class="col-xs-8 col-sm-6 q-pr-xs"> <div class="col-xs-8 col-sm-6 q-pr-xs">
{{ review }} {{ review }}
</div> </div>
@ -169,6 +171,7 @@ const positionId = ref<string>(route.params.positionId.toString())
const fullName = ref<string>('') const fullName = ref<string>('')
const examNumber = ref<string>('') const examNumber = ref<string>('')
const position = ref<string>('') const position = ref<string>('')
const positionLevel = ref<string>('')
const citizenId = ref<string>('') const citizenId = ref<string>('')
const examSeat = ref<string>('') const examSeat = ref<string>('')
const scoreAFull = ref<number | null>(null) const scoreAFull = ref<number | null>(null)
@ -183,8 +186,8 @@ const examResultinscore = ref<string>('')
const avatar = ref<string>('') const avatar = ref<string>('')
const score_expired = ref<Date>(new Date()) const score_expired = ref<Date>(new Date())
const number = ref<string>('') const number = ref<string>('')
const reviewPoint = ref<number>(0); const reviewPoint = ref<number>(0)
const review = ref<string>("-"); const review = ref<string>('-')
onMounted(async () => { onMounted(async () => {
await fetchStatus() await fetchStatus()
@ -204,7 +207,6 @@ const fetchStatus = async () => {
scoreA.value = data.pointA scoreA.value = data.pointA
scoreBFull.value = data.pointTotalB scoreBFull.value = data.pointTotalB
scoreB.value = data.pointB scoreB.value = data.pointB
position.value = data.posiiton == null ? '' : '' + data.posiiton.positionName
scoreCFull.value = data.pointTotalC scoreCFull.value = data.pointTotalC
scoreC.value = data.pointC scoreC.value = data.pointC
scoreSum.value = scoreSum.value =
@ -220,8 +222,9 @@ const fetchStatus = async () => {
score_expired.value = new Date(data.announcementDate) score_expired.value = new Date(data.announcementDate)
number.value = data.number number.value = data.number
position.value = data.position position.value = data.position
reviewPoint.value = data.reviewPoint; positionLevel.value = data.positionLevel
review.value = data.review == null ? "-" : data.review; reviewPoint.value = data.reviewPoint
review.value = data.review == null ? '-' : data.review
}) })
.catch((e) => { .catch((e) => {
messageError($q, e) messageError($q, e)

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

@ -6,16 +6,18 @@
v-model:formInformation="formInformation" v-model:formInformation="formInformation"
v-model:formAddress="formAddress" v-model:formAddress="formAddress"
v-model:formOccupation="formOccupation" v-model:formOccupation="formOccupation"
v-model:formEducation="formEducation"
/> />
<!-- v-model:formFamily="formFamily" --> <!-- v-model:formFamily="formFamily" -->
<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="ข้าพเจ้าขอให้คำรับรองและแสดงความยินยอมตามเงื่อนไขทุกประการ"
/> />
</div> </div>
<div> <div v-html="editorConfirm"></div>
<!-- <div>
1. ข้าพเจ้าขอให้คำรับรองว่า 1. ข้าพเจ้าขอให้คำรับรองว่า
ข้อความดังกล่าวข้างต้นนี้เป็นจริงทุกประการและข้าพเจ้ามีคุณสมบัติทั่วไปและ ไม่มีลักษณะต้องห้าม ข้อความดังกล่าวข้างต้นนี้เป็นจริงทุกประการและข้าพเจ้ามีคุณสมบัติทั่วไปและ ไม่มีลักษณะต้องห้าม
ตามมาตรา 43 แห่งพระราชบัญญัติระเบียบข้าราชการกรุงเทพมหานครและบุคลากร-กรุงเทพมหานคร พ.ศ. 2554 ตามมาตรา 43 แห่งพระราชบัญญัติระเบียบข้าราชการกรุงเทพมหานครและบุคลากร-กรุงเทพมหานคร พ.ศ. 2554
@ -41,7 +43,7 @@
ทั้งสิ้น ทั้งสิ้น
และหากข้าพเจ้าจงใจกรอกข้อความอันเป็นเท็จอาจมีความผิดทางอาญาฐานแจ้งความเท็จต่อเจ้าพนักงานตามประมวลกฎหมายอาญา และหากข้าพเจ้าจงใจกรอกข้อความอันเป็นเท็จอาจมีความผิดทางอาญาฐานแจ้งความเท็จต่อเจ้าพนักงานตามประมวลกฎหมายอาญา
มาตรา 137 มาตรา 137
</div> </div> -->
<div class="row justify-center q-pa-md"> <div class="row justify-center q-pa-md">
<q-btn <q-btn
@ -58,13 +60,62 @@
color="primary" color="primary"
class="q-ml-md" class="q-ml-md"
icon="mdi-check" icon="mdi-check"
label="สมัครสอบ" label="ส่งใบสมัคร"
@click="okModalConfirm" @click="dialogOpen"
v-if="status === 'register' || status === 'rejectRegister'" v-if="status === 'register' || status === 'rejectRegister'"
:disable="!acceptTermOfUse || statusEdit" :disable="!acceptTermOfUse || statusEdit"
/> />
</div> </div>
</div> </div>
<q-dialog v-model="dialog" persistent>
<q-card>
<q-card-section class="row items-center q-pa-sm">
<div class="text-bold">กรุณาตรวจสอบข้อมูลก่อนส่งใบสมัคร</div>
<q-space />
<q-btn
icon="close"
unelevated
round
dense
v-close-popup
style="color: #ff8080; background-color: #ffdede"
/>
</q-card-section>
<q-card-section class="q-pt-none">
<div class="col-12 q-pa-md">
<div class="q-pt-xs row">
<div class="">ชื่อ :</div>
<div class="text-black text-bold q-pl-sm">
{{ defaultInformation.firstname }}{{ defaultInformation.firstname }}
{{ defaultInformation.lastname }}
</div>
</div>
<div class="q-pt-xs row">
<div class="">เลขประจำตัวประชาชน :</div>
<div class="text-black text-bold q-pl-sm">{{ defaultInformation.cardid }}</div>
</div>
<div class="q-pt-xs row">
<div class="">ตำแหน่งที่สมัคร :</div>
<div class="text-black text-bold q-pl-sm">
{{ position }}{{ positionLevel == null ? null : '/' + positionLevel }}
</div>
</div>
</div>
</q-card-section>
<q-card-actions align="center">
<div class="col-12 row" align="center">
<div class="col-6" align="center">
<q-btn class="" label="แก้ไข" color="red-5" outline @click="dialogClose" />
</div>
<div class="col-6" align="center">
<q-btn class="" label="ส่งใบสมัคร" color="primary" @click="okModalConfirm" />
</div>
</div>
</q-card-actions>
</q-card>
</q-dialog>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -79,7 +130,7 @@ import {
defaultInformation, defaultInformation,
defaultOccupation, defaultOccupation,
defaultAddress, defaultAddress,
defaultFamily defaultEducation
} from '@/modules/01_exam/interface/index/Main' } from '@/modules/01_exam/interface/index/Main'
import Profile from '@/modules/01_exam/components/Form/Profile.vue' import Profile from '@/modules/01_exam/components/Form/Profile.vue'
@ -91,6 +142,19 @@ const props = defineProps({
status: { status: {
type: String, type: String,
required: true required: true
},
editorConfirm: {
type: String,
default: () =>
`<div style="color: rgb(53, 71, 60); font-size: 14px;">1. ข้าพเจ้าขอให้คำรับรองว่า ข้อความดังกล่าวข้างต้นนี้เป็นจริงทุกประการและข้าพเจ้ามีคุณสมบัติทั่วไปและ ไม่มีลักษณะต้องห้าม ตามมาตรา 43 แห่งพระราชบัญญัติระเบียบข้าราชการกรุงเทพมหานครและบุคลากร-กรุงเทพมหานคร พ.ศ. 2554 และมีคุณสมบัติเฉพาะสำหรับตำแหน่งที่สมัครตรงตามประกาศรับสมัคร</div><div style="color: rgb(53, 71, 60); font-size: 14px;">2. กรณีข้าพเจ้ามีลักษณะต้องห้าม ตามมาตรา 43 ข. แห่งพระราชบัญญัติระเบียบข้าราชการกรุงเทพมหานคร และบุคลากรกรุงเทพมหานคร พ.ศ. 2554 และประสงค์จะยื่นคำขอยกเว้นเข้ารับราชการฯ ต่อหัวหน้าสำนักงาน ก.ก. ตามระเบียบ ก.ก. ว่าด้วยการยกเว้นให้ผู้มีลักษณะต้องห้ามเข้ารับราชการเป็นข้าราชการกรุงเทพมหานคร พ.ศ. 2556 ตามมติ ก.ก. ครั้งที่ 7/2556 เมื่อวันที่ 15 สิงหาคม 2556 ข้าพเจ้าจะยื่นภายในวันปิดรับสมัคร ทั้งนี้ หากยื่นภายหลังกำหนด สำนักงาน ก.ก. จะไม่รับคำขอดังกล่าว</div><div style="color: rgb(53, 71, 60); font-size: 14px;">3. ข้าพเจ้าจะยื่นหลักฐานและเอกสารที่แสดงว่าเป็นผู้มีคุณสมบัติทั่วไปและมีคุณสมบัติเฉพาะสำหรับตำแหน่งที่สมัครตรงตามประกาศรับสมัครภายในระยะเวลาที่กำหนดตามประกาศฯ</div><div style="color: rgb(53, 71, 60); font-size: 14px;">4. หากมีการตรวจสอบหลักฐานและเอกสารและหรือคุณวุฒิการศึกษาของข้าพเจ้าในภายหลัง ปรากฏว่าข้าพเจ้ามีคุณสมบัติไม่ตรงหรือมีลักษณะต้องห้ามตามประกาศรับสมัครหรือไม่ได้รับการยกเว้นให้ถือว่าข้าพเจ้า เป็นผู้ขาดคุณสมบัติในการสมัครครั้งนี้มาตั้งแต่ต้น และไม่มีสิทธิได้รับการบรรจุและแต่งตั้งให้ดำรงตำแหน่ง และข้าพเจ้าจะไม่ใช้สิทธิเรียกร้องใด ๆ ทั้งสิ้น และหากข้าพเจ้าจงใจกรอกข้อความอันเป็นเท็จอาจมีความผิดทางอาญาฐานแจ้งความเท็จต่อเจ้าพนักงานตามประมวลกฎหมายอาญา มาตรา 137</div>`
},
position: {
type: String,
required: true
},
positionLevel: {
type: String,
required: true
} }
}) })
@ -106,14 +170,23 @@ const examId = ref<string>(route.params.id.toString())
const positionId = ref<string>(route.params.positionId.toString()) const positionId = ref<string>(route.params.positionId.toString())
const formInformation = ref<any>({}) const formInformation = ref<any>({})
const formAddress = ref<any>({}) const formAddress = ref<any>({})
// const formFamily = ref<any>({}) const formEducation = ref<any>({})
const formOccupation = ref<any>({}) const formOccupation = ref<any>({})
const saveAuto = ref<boolean>(false) const saveAuto = ref<boolean>(false)
const dialog = ref<boolean>(false)
onMounted(async () => { onMounted(async () => {
await fetchStatus() await fetchStatus()
}) })
const dialogClose = () => {
dialog.value = false
}
const dialogOpen = () => {
dialog.value = true
}
const okModalConfirm = () => { const okModalConfirm = () => {
if (statusEdit.value == true) { if (statusEdit.value == true) {
modalError($q, 'ไม่สามารถสมัครสอบได้', 'มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล') modalError($q, 'ไม่สามารถสมัครสอบได้', 'มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล')
@ -166,106 +239,81 @@ const saveData = async () => {
if (suc) { if (suc) {
await formAddress.value.validate().then(async (suc: boolean) => { await formAddress.value.validate().then(async (suc: boolean) => {
if (suc) { if (suc) {
// await formFamily.value.validate().then(async (suc: boolean) => { await formEducation.value.validate().then(async (suc: boolean) => {
// if (suc) {
await formOccupation.value.validate().then(async (suc: boolean) => {
if (suc) { if (suc) {
const type = ref<string | null>('') await formOccupation.value.validate().then(async (suc: boolean) => {
if (defaultOccupation.value.status == 'official') if (suc) {
type.value = defaultOccupation.value.official loaderPage(true)
if (defaultOccupation.value.status == 'personnel') await http
type.value = defaultOccupation.value.personnel .post(config.API.candidateId(examId.value, positionId.value), {
if (defaultOccupation.value.status == 'officialsOther') prefixId: defaultInformation.value.prefixId,
type.value = defaultOccupation.value.officialsOther prefixName: defaultInformation.value.prefixId,
if (defaultOccupation.value.status == 'employee') lastName: defaultInformation.value.lastname,
type.value = defaultOccupation.value.employee dateOfBirth:
if (defaultOccupation.value.status == 'other') defaultInformation.value.birthDate == null
type.value = defaultOccupation.value.other ? null
loaderPage(true) : dateToISO(defaultInformation.value.birthDate),
await http citizenId: defaultInformation.value.cardid,
.post(config.API.candidateId(examId.value, positionId.value), { firstName: defaultInformation.value.firstname,
prefixId: defaultInformation.value.prefixId, religionId: defaultInformation.value.religionId,
lastName: defaultInformation.value.lastname, nationality: defaultInformation.value.nationality,
citizenProvinceId: defaultInformation.value.provinceId, email: defaultInformation.value.email,
citizenDistrictId: defaultInformation.value.districtId, mobilePhone: defaultInformation.value.phone,
dateOfBirth: telephone: defaultInformation.value.tel,
defaultInformation.value.birthDate == null knowledge: defaultInformation.value.knowledge,
? null occupationOrg: defaultOccupation.value.org,
: dateToISO(defaultInformation.value.birthDate), occupationPile: defaultOccupation.value.pile,
citizenDate: occupationGroup: defaultOccupation.value.group,
defaultInformation.value.cardIdDate == null occupationSalary: defaultOccupation.value.salary,
? null occupationPosition: defaultOccupation.value.position,
: dateToISO(defaultInformation.value.cardIdDate), occupationPositionType: defaultOccupation.value.positionType,
citizenId: defaultInformation.value.cardid, occupationTelephone: defaultOccupation.value.tel,
firstName: defaultInformation.value.firstname, registAddress: defaultAddress.value.address,
religionId: defaultInformation.value.religionId, currentAddress: defaultAddress.value.addressC,
nationality: defaultInformation.value.nationality, registProvinceId: defaultAddress.value.provinceId,
email: defaultInformation.value.email, currentProvinceId: defaultAddress.value.provinceIdC,
mobilePhone: defaultInformation.value.phone, registDistrictId: defaultAddress.value.districtId,
telephone: defaultInformation.value.tel, currentDistrictId: defaultAddress.value.districtIdC,
knowledge: defaultInformation.value.knowledge, registSubDistrictId: defaultAddress.value.subdistrictId,
occupationType: defaultOccupation.value.status, currentSubDistrictId: defaultAddress.value.subdistrictIdC,
occupationCompany: defaultOccupation.value.company, registZipCode: defaultAddress.value.code,
occupationDepartment: defaultOccupation.value.department, currentZipCode: defaultAddress.value.codeC,
occupationEmail: defaultOccupation.value.email, registSame:
occupationTelephone: defaultOccupation.value.tel, defaultAddress.value.same == '1'
occupationPosition: type.value, ? true
registAddress: defaultAddress.value.address, : defaultAddress.value.same == '0'
currentAddress: defaultAddress.value.addressC, ? false
registProvinceId: defaultAddress.value.provinceId, : null,
currentProvinceId: defaultAddress.value.provinceIdC, educationLevelExamId: defaultEducation.value.educationLevelExamId,
registDistrictId: defaultAddress.value.districtId, educationName: defaultEducation.value.educationName,
currentDistrictId: defaultAddress.value.districtIdC, educationMajor: defaultEducation.value.educationMajor,
registSubDistrictId: defaultAddress.value.subdistrictId, educationLocation: defaultEducation.value.educationLocation,
currentSubDistrictId: defaultAddress.value.subdistrictIdC, educationType: defaultEducation.value.educationType,
registZipCode: defaultAddress.value.code, educationEndDate:
currentZipCode: defaultAddress.value.codeC, defaultEducation.value.educationEndDate == null
registSame: ? null
defaultAddress.value.same == '1' : dateToISO(defaultEducation.value.educationEndDate),
? true educationScores: defaultEducation.value.educationScores,
: defaultAddress.value.same == '0' educationLevelHighId: defaultEducation.value.educationLevelHighId
? false })
: null, .then(async () => {
marryPrefixId: defaultFamily.value.prefixIdC, success($q, 'บันทึกข้อมูลส่วนตัวสำเร็จ')
marryFirstName: defaultFamily.value.firstnameC, if (saveAuto.value) await saveForm()
marryLastName: defaultFamily.value.lastnameC, })
marryOccupation: defaultFamily.value.occupationC, .catch((e) => {
marryNationality: defaultFamily.value.nationalityC, messageError($q, e)
fatherPrefixId: defaultFamily.value.prefixIdM, })
fatherFirstName: defaultFamily.value.firstnameM, .finally(async () => {
fatherLastName: defaultFamily.value.lastnameM, await props.fetchStep()
fatherOccupation: defaultFamily.value.occupationM, })
fatherNationality: defaultFamily.value.nationalityM, } else {
motherPrefixId: defaultFamily.value.prefixIdF, notifyError($q, 'กรุณากรอกข้อมูลให้ครบถ้วน')
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(async () => {
success($q, 'บันทึกข้อมูลส่วนตัวสำเร็จ')
if (saveAuto.value) await saveForm()
})
.catch((e) => {
messageError($q, e)
})
.finally(async () => {
await props.fetchStep()
})
} else { } else {
notifyError($q, 'กรุณากรอกข้อมูลให้ครบถ้วน') notifyError($q, 'กรุณากรอกข้อมูลให้ครบถ้วน')
} }
}) })
// }else{
// notifyError($q,"กรุณากรอกข้อมูลให้ครบถ้วน")
// }
// })
} else { } else {
notifyError($q, 'กรุณากรอกข้อมูลให้ครบถ้วน') notifyError($q, 'กรุณากรอกข้อมูลให้ครบถ้วน')
} }

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

@ -1,4 +1,4 @@
<!-- tab ประวัติการทำงาน/ฝึกงาน --> <!-- tab ประวัติการทำงาน -->
<template> <template>
<q-form ref="myForm"> <q-form ref="myForm">
<Table <Table
@ -13,7 +13,7 @@
:edit="clickEdit" :edit="clickEdit"
:addData="false" :addData="false"
:editData="status == 'register' || status == 'rejectRegister'" :editData="status == 'register' || status == 'rejectRegister'"
name="ประวัติการทำงาน/ฝึกงาน" name="ประวัติการทำงาน (ตั้งแต่เริ่มปฏิบัติงานกับกรุงเทพมหานคร - ปัจจุบัน)"
icon="mdi-briefcase" icon="mdi-briefcase"
> >
<template #columns="props"> <template #columns="props">
@ -25,13 +25,10 @@
@click="selectData(props)" @click="selectData(props)"
class="cursor-pointer" class="cursor-pointer"
> >
<div v-if="col.name == 'salary'" class=""> <div v-if="col.name == 'startDate' || col.name == 'endDate'">
{{ col.value.toLocaleString('en-US') }} {{ date2Thai(col.value) }}
</div> </div>
<div v-else-if="col.name == 'duration'" class=""> <div v-else>
{{ dateThaiRange(col.value) }}
</div>
<div v-else class="">
{{ col.value }} {{ col.value }}
</div> </div>
</q-td> </q-td>
@ -53,25 +50,13 @@
<q-dialog v-model="modal" persistent> <q-dialog v-model="modal" persistent>
<q-card style="width: 600px"> <q-card style="width: 600px">
<q-form ref="myForm"> <q-form ref="myForm">
<DialogHeader tittle="ประวัติการทำงาน/ฝึกงาน" :close="checkClose" /> <DialogHeader
tittle="ประวัติการทำงาน (ตั้งแต่เริ่มปฏิบัติงานกับกรุงเทพมหานคร - ปัจจุบัน)"
:close="checkClose"
/>
<q-separator /> <q-separator />
<q-card-section class="q-p-sm"> <q-card-section class="q-p-sm">
<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 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="location"
:rules="[(val) => !!val || `${'กรุณากรอกสถานที่ทำงาน/ฝึกงาน'}`]"
:label="`${'สถานที่ทำงาน/ฝึกงาน'}`"
@update:modelValue="clickEditRow"
hide-bottom-space
/>
</div>
<div class="col-xs-12 col-sm-6 col-md-6"> <div class="col-xs-12 col-sm-6 col-md-6">
<q-input <q-input
:class="getClass(edit)" :class="getClass(edit)"
@ -95,23 +80,51 @@
lazy-rules lazy-rules
:readonly="!edit" :readonly="!edit"
:borderless="!edit" :borderless="!edit"
v-model="salary" v-model="group"
:rules="[(val) => !!val || `${'กรุณากรอกเงินเดือนสุดท้ายก่อนออก'}`]" :rules="[(val) => !!val || `${'กรุณากรอกกลุ่ม/ฝ่าย'}`]"
:label="`${'เงินเดือนสุดท้ายก่อนออก'}`" :label="`${'กลุ่ม/ฝ่าย'}`"
@update:modelValue="clickEditRow"
hide-bottom-space
/>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="pile"
:rules="[(val) => !!val || `${'กรุณากรอกกอง'}`]"
:label="`${'กอง'}`"
@update:modelValue="clickEditRow"
hide-bottom-space
/>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="org"
:rules="[(val) => !!val || `${'กรุณากรอกสังกัด'}`]"
:label="`${'สังกัด'}`"
@update:modelValue="clickEditRow" @update:modelValue="clickEditRow"
type="number"
hide-bottom-space hide-bottom-space
/> />
</div> </div>
<div class="col-xs-12 col-sm-6 col-md-6"> <div class="col-xs-12 col-sm-6 col-md-6">
<datepicker <datepicker
menu-class-name="modalfix"
:readonly="!edit" :readonly="!edit"
v-model="duration" v-model="startDate"
:locale="'th'" :locale="'th'"
autoApply autoApply
range
:enableTimePicker="false" :enableTimePicker="false"
@update:modelValue="clickEditRow"
week-start="0" week-start="0"
> >
<template #year="{ year }"> <template #year="{ year }">
@ -123,19 +136,60 @@
<template #trigger> <template #trigger>
<q-input <q-input
:class="getClass(edit)" :class="getClass(edit)"
class="datepicker"
:outlined="edit" :outlined="edit"
dense dense
lazy-rules lazy-rules
:borderless="!edit" :borderless="!edit"
:model-value="dateThaiRange(duration)" :model-value="date2Thai(startDate)"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่เริ่ม'}`]"
hide-bottom-space hide-bottom-space
:label="`${'วันที่เริ่ม'}`"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
name="mdi-calendar-outline" name="event"
class="cursor-pointer" class="cursor-pointer"
style="color: var(--q-primary)" :style="edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<datepicker
:readonly="!edit"
v-model="endDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
@update:modelValue="clickEditRow"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:borderless="!edit"
:model-value="date2Thai(endDate)"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
hide-bottom-space
:label="`${'วันที่สิ้นสุด'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
:style="edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'"
> >
</q-icon> </q-icon>
</template> </template>
@ -145,17 +199,15 @@
</div> </div>
<div class="col-xs-12 col-sm-12 col-md-12"> <div class="col-xs-12 col-sm-12 col-md-12">
<q-input <q-input
:class="getClass(edit)" :class="getClass(false)"
:outlined="edit" :outlined="false"
dense dense
lazy-rules lazy-rules
:readonly="!edit" :readonly="!false"
:borderless="!edit" :borderless="!false"
v-model="reason" v-model="rangeDate"
:rules="[(val) => !!val || `${'กรุณากรอกเหตุผลที่ออก'}`]" :label="`${'ระยะเวลา'}`"
:label="`${'เหตุผลที่ออก'}`"
@update:modelValue="clickEditRow" @update:modelValue="clickEditRow"
type="textarea"
hide-bottom-space hide-bottom-space
/> />
</div> </div>
@ -180,7 +232,7 @@
</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 { QTableProps, useQuasar } from 'quasar'
import { useCounterMixin } from '@/stores/mixin' import { useCounterMixin } from '@/stores/mixin'
import { useDataStore } from '@/stores/data' import { useDataStore } from '@/stores/data'
import http from '@/plugins/http' import http from '@/plugins/http'
@ -206,17 +258,19 @@ const props = defineProps({
const $q = useQuasar() const $q = useQuasar()
const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
const { dateThaiRange, modalDelete, modalConfirm, dateToISO, success, messageError } = mixin const { date2Thai, modalDelete, modalConfirm, dateToISO, success, messageError } = mixin
const store = useExamDataStore() const store = useExamDataStore()
const { examData, changeExamColumns } = store const { examData, changeExamColumns } = store
const dataStore = useDataStore() const dataStore = useDataStore()
const { loaderPage } = dataStore const { loaderPage } = dataStore
const id = ref<string>('') const id = ref<string>('')
const location = ref<string>() const position = ref<string | null>()
const position = ref<string>() const group = ref<string | null>()
const salary = ref<number | null>() const pile = ref<string | null>()
const duration = ref<[Date, Date]>([new Date(), new Date()]) const org = ref<string | null>()
const reason = ref<string>() const startDate = ref<Date>(new Date())
const endDate = ref<Date>(new Date())
const rangeDate = ref<string | null>()
const myForm = ref<any>() //form data input const myForm = ref<any>() //form data input
const edit = ref<boolean>(true) //เช็คการกดปุ่มแก้ไขใน dialog const edit = ref<boolean>(true) //เช็คการกดปุ่มแก้ไขใน dialog
const modal = ref<boolean>(false) //modal add detail const modal = ref<boolean>(false) //modal add detail
@ -230,60 +284,100 @@ const checkValidate = ref<boolean>(false) //validate data ผ่านหรื
const route = useRoute() const route = useRoute()
const examId = ref<string>(route.params.id.toString()) const examId = ref<string>(route.params.id.toString())
const positionId = ref<string>(route.params.positionId.toString()) const positionId = ref<string>(route.params.positionId.toString())
const rows = ref<RequestItemsObject[]>([]) const rows = ref<any>([])
const filter = ref<string>('') //search data table const filter = ref<string>('') //search data table
const visibleColumns = ref<String[]>([]) const visibleColumns = ref<String[]>([])
examData.career.columns.length == 0 examData.career.columns.length == 0
? (visibleColumns.value = ['location', 'position', 'salary', 'duration', 'reason']) ? (visibleColumns.value = [
'position',
'group',
'pile',
'org',
'startDate',
'endDate',
'rangeDate'
])
: (visibleColumns.value = examData.career.columns) : (visibleColumns.value = examData.career.columns)
const columns = ref<Columns>([ const columns = ref<QTableProps['columns']>([
{
name: 'location',
align: 'left',
label: 'สถานที่ทำงาน/ฝึกงาน',
sortable: true,
field: 'location',
headerStyle: 'font-size: 14px',
style: 'font-size: 14px'
},
{ {
name: 'position', name: 'position',
align: 'left', align: 'left',
label: 'ตำแหน่ง/ลักษณะงาน', label: 'ชื่อตำแหน่ง',
sortable: true, sortable: true,
field: 'position', field: 'position',
headerStyle: 'font-size: 14px', headerStyle: 'font-size: 14px',
style: 'font-size: 14px' style: 'font-size: 14px',
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
}, },
{ {
name: 'salary', name: 'group',
align: 'left', align: 'left',
label: 'เงินเดือนสุดท้ายก่อนออก', label: 'กลุ่ม/ฝ่าย',
sortable: true, sortable: true,
field: 'salary', field: 'group',
headerStyle: 'font-size: 14px', headerStyle: 'font-size: 14px',
style: 'font-size: 14px' style: 'font-size: 14px',
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
}, },
{ {
name: 'duration', name: 'pile',
align: 'left',
label: 'กอง',
sortable: true,
field: 'pile',
headerStyle: 'font-size: 14px',
style: 'font-size: 14px',
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
},
{
name: 'org',
align: 'left',
label: 'สังกัด',
sortable: true,
field: 'org',
headerStyle: 'font-size: 14px',
style: 'font-size: 14px',
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
},
{
name: 'startDate',
align: 'left',
label: 'เริ่ม',
sortable: true,
field: 'startDate',
headerStyle: 'font-size: 14px',
style: 'font-size: 14px',
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
},
{
name: 'endDate',
align: 'left',
label: 'สิ้นสุด',
sortable: true,
field: 'endDate',
headerStyle: 'font-size: 14px',
style: 'font-size: 14px',
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
},
{
name: 'rangeDate',
align: 'left', align: 'left',
label: 'ระยะเวลา', label: 'ระยะเวลา',
sortable: true, sortable: true,
field: 'duration', field: 'rangeDate',
headerStyle: 'font-size: 14px', headerStyle: 'font-size: 14px',
style: 'font-size: 14px' style: 'font-size: 14px',
}, sort: (a: string, b: string) =>
{ a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
name: 'reason',
align: 'left',
label: 'เหตุผลที่ออก',
sortable: true,
field: 'reason',
headerStyle: 'font-size: 14px',
style: 'font-size: 14px'
} }
]) ])
@ -302,11 +396,11 @@ const fetchData = async () => {
.then((res) => { .then((res) => {
const data = res.data.result const data = res.data.result
rows.value = [] rows.value = []
data.map((r: ResponseObject) => { data.map((r: any) => {
rows.value.push({ rows.value.push({
...r, ...r,
location: r.name, startDate: r.durationStart,
duration: [r.durationStart, r.durationEnd] endDate: r.durationEnd
}) })
}) })
}) })
@ -324,11 +418,13 @@ const fetchData = async () => {
const clickPrevious = async () => { const clickPrevious = async () => {
rowIndex.value -= 1 rowIndex.value -= 1
const row = rows.value[rowIndex.value] const row = rows.value[rowIndex.value]
location.value = row.location
position.value = row.position position.value = row.position
salary.value = row.salary group.value = row.group
duration.value = row.duration pile.value = row.pile
reason.value = row.reason org.value = row.org
startDate.value = row.startDate
endDate.value = row.endDate
rangeDate.value = row.rangeDate
id.value = row.id id.value = row.id
await checkRowPage() await checkRowPage()
} }
@ -339,11 +435,13 @@ const clickPrevious = async () => {
const clickNext = async () => { const clickNext = async () => {
rowIndex.value += 1 rowIndex.value += 1
const row = rows.value[rowIndex.value] const row = rows.value[rowIndex.value]
location.value = row.location
position.value = row.position position.value = row.position
salary.value = row.salary group.value = row.group
duration.value = row.duration pile.value = row.pile
reason.value = row.reason org.value = row.org
startDate.value = row.startDate
endDate.value = row.endDate
rangeDate.value = row.rangeDate
id.value = row.id id.value = row.id
await checkRowPage() await checkRowPage()
} }
@ -427,12 +525,13 @@ const saveData = async () => {
loaderPage(true) loaderPage(true)
await http await http
.post(config.API.candidateCareer(examId.value, positionId.value), { .post(config.API.candidateCareer(examId.value, positionId.value), {
name: location.value,
position: position.value, position: position.value,
salary: salary.value, group: group.value,
durationStart: dateToISO(new Date(duration.value[0])), pile: pile.value,
durationEnd: dateToISO(new Date(duration.value[1])), org: org.value,
reason: reason.value durationStart: dateToISO(new Date(startDate.value)),
durationEnd: dateToISO(new Date(endDate.value)),
rangeDate: rangeDate.value == null ? '-' : rangeDate.value //xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
}) })
.then(() => { .then(() => {
success($q, 'บันทึกข้อมูลสำเร็จ') success($q, 'บันทึกข้อมูลสำเร็จ')
@ -453,12 +552,13 @@ const editData = async () => {
loaderPage(true) loaderPage(true)
await http await http
.put(config.API.candidateCareer(id.value, ''), { .put(config.API.candidateCareer(id.value, ''), {
name: location.value,
position: position.value, position: position.value,
salary: salary.value, group: group.value,
durationStart: dateToISO(new Date(duration.value[0])), pile: pile.value,
durationEnd: dateToISO(new Date(duration.value[1])), org: org.value,
reason: reason.value durationStart: dateToISO(new Date(startDate.value)),
durationEnd: dateToISO(new Date(endDate.value)),
rangeDate: rangeDate.value == null ? '-' : rangeDate.value //xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
}) })
.then(() => { .then(() => {
success($q, 'บันทึกข้อมูลสำเร็จ') success($q, 'บันทึกข้อมูลสำเร็จ')
@ -495,17 +595,19 @@ const clickClose = async () => {
* กดเลือกข้อมูลที่จะแก้ไข * กดเลือกข้อมูลที่จะแก้ไข
* @param props ค่า props ใน row ที่เลือก * @param props ค่า props ใน row ที่เลือก
*/ */
const selectData = (props: DataProps) => { const selectData = (props: any) => {
modalEdit.value = true modalEdit.value = true
modal.value = true modal.value = true
editRow.value = false editRow.value = false
rawItem.value = props.row rawItem.value = props.row
rowIndex.value = props.rowIndex rowIndex.value = props.rowIndex
location.value = props.row.location
position.value = props.row.position position.value = props.row.position
salary.value = props.row.salary group.value = props.row.group
duration.value = props.row.duration pile.value = props.row.pile
reason.value = props.row.reason org.value = props.row.org
startDate.value = props.row.startDate
endDate.value = props.row.endDate
rangeDate.value = props.row.rangeDate
id.value = props.row.id id.value = props.row.id
next.value = false next.value = false
previous.value = false previous.value = false
@ -517,11 +619,13 @@ const selectData = (props: DataProps) => {
const addRow = () => { const addRow = () => {
modalEdit.value = false modalEdit.value = false
modal.value = true modal.value = true
location.value = '' position.value = null
position.value = '' group.value = null
salary.value = null pile.value = null
duration.value = [new Date(), new Date()] org.value = null
reason.value = '' startDate.value = new Date()
endDate.value = new Date()
rangeDate.value = null
} }
/** /**

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

@ -4,8 +4,8 @@
v-model:edit="edit" v-model:edit="edit"
:header=" :header="
$q.screen.gt.xs $q.screen.gt.xs
? 'อัปโหลดเอกสาร(เช่น สำเนาบัตรประชาชน ทะเบียนบ้าน วุฒิการศึกษา)' ? 'Upload รูปถ่าย (รูปถ่ายหน้าตรง ชุดสุภาพ ไม่สวมหมวก/แว่นตาดำ และไม่มีลวดลายใด ๆ บนรูปถ่าย)'
: 'อัปโหลดเอกสาร' : 'Upload'
" "
icon="mdi-file-document" icon="mdi-file-document"
:addData="true" :addData="true"
@ -182,7 +182,7 @@ const fileDelete = async (val: any) => {
const getData = async () => { const getData = async () => {
name.value = '' name.value = ''
file.value = [] file.value = []
uploader.value.reset() if (uploader.value != null) uploader.value.reset()
loaderPage(true) loaderPage(true)
await http await http
.get(config.API.candidateUpload(examId.value, positionId.value)) .get(config.API.candidateUpload(examId.value, positionId.value))

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

@ -1,302 +1,243 @@
<!-- tab ประวัติการศึกษา --> <!-- card วุฒิที่ใช้สมัครสอบ -->
<template> <template>
<q-form ref="myForm"> <HeaderTop
<Table v-model:edit="edit"
:rows="rows" header="วุฒิที่ใช้สมัครสอบ"
:columns="columns" icon="mdi-briefcase"
:filter="filter" :addData="true"
:visible-columns="visibleColumns" :editOnly="false"
v-model:inputfilter="filter" :editData="false"
v-model:inputvisible="visibleColumns" />
v-model:editvisible="edit" <q-form ref="myform">
:add="clickAdd" <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
:edit="clickEdit" <div class="col-12 row">
:addData="false" <div class="col-3">
:editData="status == 'register' || status == 'rejectRegister'" <q-select
name="ประวัติการศีกษา" :class="getClass(status == 'register' || status == 'rejectRegister')"
icon="mdi-school" :readonly="!(status == 'register' || status == 'rejectRegister')"
> :borderless="!(status == 'register' || status == 'rejectRegister')"
<template #columns="props"> :outlined="status == 'register' || status == 'rejectRegister'"
<q-tr :props="props"> dense
<q-td lazy-rules
v-for="col in props.cols" emit-value
:key="col.name" map-options
:props="props" option-label="name"
@click="selectData(props)" option-value="id"
class="cursor-pointer" :options="educationLevelOptions"
v-model="defaultEducation.educationLevelExamId"
:rules="[(val) => !!val || `${'กรุณาเลือก วุฒิที่ใช้สมัครสอบ'}`]"
:label="`${'วุฒิที่ใช้สมัครสอบ'}`"
/>
</div>
<div class="col-3">
<q-input
class="q-pl-sm"
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="defaultEducation.educationName"
:rules="[(val) => !!val || `${'กรุณากรอก ชื่อปริญญา'}`]"
:label="`${'ชื่อปริญญา'}`"
/>
</div>
<div class="col-3">
<q-input
class="q-pl-sm"
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="defaultEducation.educationMajor"
:rules="[(val) => !!val || `${'กรุณากรอก สาขาวิชา/วิชาเอก'}`]"
:label="`${'สาขาวิชา/วิชาเอก'}`"
/>
</div>
</div>
<div class="col-12 row">
<div class="col-3">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="defaultEducation.educationLocation"
:rules="[(val) => !!val || `${'กรุณากรอก ชื่อสถานศึกษา'}`]"
:label="`${'ชื่อสถานศึกษา'}`"
/>
</div>
<div class="col-3">
<q-select
class="q-pl-sm"
:class="getClass(status == 'register' || status == 'rejectRegister')"
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
emit-value
map-options
option-label="name"
option-value="id"
:options="educationTypeOptions"
v-model="defaultEducation.educationType"
:rules="[(val) => !!val || `${'กรุณาเลือก ประเภทสถานศึกษา'}`]"
:label="`${'ประเภทสถานศึกษา'}`"
/>
</div>
<div class="col-3">
<datepicker
:readonly="!(status == 'register' || status == 'rejectRegister')"
v-model="defaultEducation.educationEndDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
:max-date="new Date()"
:disabled="!(status == 'register' || status == 'rejectRegister')"
> >
<div v-if="col.name == 'duration'" class=""> <template #year="{ year }">
{{ dateThaiRange(col.value) }} {{ year + 543 }}
</div> </template>
<div v-else class=""> <template #year-overlay-value="{ value }">
{{ col.value }} {{ parseInt(value + 543) }}
</div> </template>
</q-td> <template #trigger>
<q-td auto-width v-if="edit === true">
<q-btn
color="red"
flat
dense
round
size="14px"
icon="mdi-trash-can-outline"
@click="checkDelete(props.row)"
/>
</q-td>
</q-tr>
</template>
</Table>
</q-form>
<q-dialog v-model="modal" persistent>
<q-card style="width: 600px">
<q-form ref="myForm">
<DialogHeader tittle="ประวัติการศึกษา" :close="checkClose" />
<q-separator />
<q-card-section class="q-p-sm">
<div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
<div class="col-xs-6 col-sm-6 col-md-6">
<q-select
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="educationLevelId"
:rules="[(val) => !!val || `${'กรุณาเลือกวุฒิที่ได้รับ'}`]"
:label="`${'วุฒิที่ได้รับ'}`"
@update:modelValue="clickEditRow"
emit-value
map-options
option-label="name"
:options="educationLevelOptions"
option-value="id"
hide-bottom-space
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input <q-input
:class="getClass(edit)" class="q-pl-sm"
:outlined="edit" :class="getClass(status == 'register' || status == 'rejectRegister')"
: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="major" :model-value="date2Thai(defaultEducation.educationEndDate)"
:rules="[(val) => !!val || `${'กรุณากรอกสาขาวิชา/วิชาเอก'}`]" :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สำเร็จการศึกษา'}`]"
:label="`${'สาขาวิชา/วิชาเอก'}`"
@update:modelValue="clickEditRow"
hide-bottom-space hide-bottom-space
/> :label="`${'วันที่สำเร็จการศึกษา'}`"
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
type="number"
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="scores"
:rules="[(val) => !!val || `${'กรุณากรอกคะแนนเฉลี่ยตลอดหลักสูตร'}`]"
:label="`${'คะแนนเฉลี่ยตลอดหลักสูตร'}`"
@update:modelValue="clickEditRow"
hide-bottom-space
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="name"
:rules="[(val) => !!val || `${'กรุณากรอกชื่อสถานศึกษา'}`]"
:label="`${'ชื่อสถานศึกษา'}`"
@update:modelValue="clickEditRow"
hide-bottom-space
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="duration"
:locale="'th'"
autoApply
range
:enableTimePicker="false"
week-start="0"
> >
<template #year="{ year }"> <template v-slot:prepend>
{{ year + 543 }} <q-icon
</template> name="event"
<template #year-overlay-value="{ value }"> class="cursor-pointer"
{{ parseInt(value + 543) }} :style="
</template> status == 'register' || status == 'rejectRegister'
<template #trigger> ? 'color: var(--q-primary)'
<q-input : 'color: var(--q-grey)'
:class="getClass(edit)" "
class="datepicker"
:outlined="edit"
dense
lazy-rules
:borderless="!edit"
:model-value="dateThaiRange(duration)"
hide-bottom-space
> >
<template v-slot:prepend> </q-icon>
<q-icon
name="mdi-calendar-outline"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template> </template>
</datepicker> </q-input>
</div> </template>
</div> </datepicker>
</q-card-section> </div>
<q-separator /> <div class="col-3">
<DialogFooter <q-input
:edit="clickEdit" class="q-pl-sm"
:save="clickSave" :class="getClass(status == 'register' || status == 'rejectRegister')"
:validate="validateData" :outlined="status == 'register' || status == 'rejectRegister'"
:clickNext="clickNext" dense
:clickPrevious="clickPrevious" lazy-rules
:editData="status == 'register' || status == 'rejectRegister'" type="number"
v-model:editvisible="edit" :readonly="!(status == 'register' || status == 'rejectRegister')"
v-model:next="next" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model:previous="previous" v-model="defaultEducation.educationScores"
v-model:modalEdit="modalEdit" :rules="[(val) => !!val || `${'กรุณากรอก คะแนนเฉลี่ยสะสม'}`]"
/> :label="`${'คะแนนเฉลี่ยสะสม'}`"
</q-form> />
</q-card> </div>
</q-dialog> </div>
<div class="col-12 row">
<div class="col-3">
<q-select
:class="getClass(status == 'register' || status == 'rejectRegister')"
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
emit-value
map-options
option-label="name"
option-value="id"
:options="educationLevelOptions"
v-model="defaultEducation.educationLevelHighId"
:rules="[(val) => !!val || `${'กรุณาเลือก วุฒิการศึกษาสูงสุด'}`]"
:label="`${'วุฒิการศึกษาสูงสุด'}`"
/>
</div>
</div>
</div>
</q-form>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref, watch } from 'vue' import { ref, onMounted, watch, PropType } from 'vue'
import type { PropType } from 'vue'
import { useQuasar } from 'quasar'
import { useCounterMixin } from '@/stores/mixin'
import { useDataStore } from '@/stores/data'
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 type { DataOption, Education } from '@/modules/01_exam/interface/index/Main'
import { defaultEducation, changeData } from '@/modules/01_exam/interface/index/Main'
import HeaderTop from '@/components/top.vue'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
import type {
RequestItemsObject, import { useCounterMixin } from '@/stores/mixin'
Columns, import { useDataStore } from '@/stores/data'
DataProps import { useQuasar } from 'quasar'
} from '@/modules/01_exam/interface/request/Education'
import type { DataOption } from '@/modules/01_exam/interface/index/Main'
import type { ResponseObject } from '@/modules/01_exam/interface/response/Education'
import Table from '@/components/Table.vue'
import DialogHeader from '@/components/DialogHeader.vue'
import DialogFooter from '@/components/DialogFooter.vue'
const props = defineProps({ const props = defineProps({
educationLevelOptions: {
type: Array as PropType<DataOption[]>,
required: true
},
status: { status: {
type: String, type: String,
required: true required: true
},
form: {
type: Object,
required: true
},
educationLevelOptions: {
type: Array as PropType<DataOption[]>,
required: true
} }
}) })
const $q = useQuasar() const $q = useQuasar()
const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง const edit = ref<boolean>(true)
const { dateThaiRange, modalDelete, modalConfirm, dateToISO, success, messageError } = mixin const myform = ref<any>({})
const store = useExamDataStore()
const { examData, changeExamColumns } = store
const dataStore = useDataStore()
const { loaderPage } = dataStore
const id = ref<string>('')
const educationLevel = ref<string>()
const educationLevelId = ref<string>()
const major = ref<string>()
const scores = ref<number | null>()
const name = ref<string>()
const duration = ref<[Date, Date]>([new Date(), new Date()])
const myForm = ref<any>() //form data input
const edit = ref<boolean>(true) //เช็คการกดปุ่มแก้ไขใน dialog
const modal = ref<boolean>(false) //modal add detail
const modalEdit = ref<boolean>(false) //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
const rawItem = ref<RequestItemsObject>() //ข้อมูลเดิมที่เลือกใน row นั้น
const rowIndex = ref<number>(0) //indexข้อมูลเดิมที่เลือกใน row นั้น
const previous = ref<boolean>() //แสดงปุ่มดูข้อมูลก่อนหน้า
const next = ref<boolean>() //แสดงปุ่มดูข้อมูลต่อไป
const editRow = ref<boolean>(false) //เช็คมีการแก้ไขข้อมูล
const checkValidate = ref<boolean>(false) //validate data ผ่านหรือไม่
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())
const positionId = ref<string>(route.params.positionId.toString()) const positionId = ref<string>(route.params.positionId.toString())
const filter = ref<string>('') //search data table const educationTypeOptions = ref<any>([
const visibleColumns = ref<String[]>([])
examData.education.columns.length == 0
? (visibleColumns.value = ['educationLevel', 'major', 'scores', 'name', 'duration'])
: (visibleColumns.value = examData.education.columns)
const columns = ref<Columns>([
{ {
name: 'educationLevel', name: 'รัฐบาล',
align: 'left', id: 'รัฐบาล'
label: 'วุฒิที่ได้รับ',
sortable: true,
field: 'educationLevel',
headerStyle: 'font-size: 14px',
style: 'font-size: 14px'
}, },
{ {
name: 'major', name: 'เอกชน',
align: 'left', id: 'เอกชน'
label: 'สาขาวิชา/วิชาเอก',
sortable: true,
field: 'major',
headerStyle: 'font-size: 14px',
style: 'font-size: 14px'
},
{
name: 'scores',
align: 'left',
label: 'คะแนนเฉลี่ยตลอดหลักสูตร',
sortable: true,
field: 'scores',
headerStyle: 'font-size: 14px',
style: 'font-size: 14px'
},
{
name: 'name',
align: 'left',
label: 'ชื่อสถานศึกษา',
sortable: true,
field: 'name',
headerStyle: 'font-size: 14px',
style: 'font-size: 14px'
},
{
name: 'duration',
align: 'left',
label: 'ระยะเวลา',
sortable: true,
field: 'duration',
headerStyle: 'font-size: 14px',
style: 'font-size: 14px'
} }
]) ])
watch(visibleColumns, async (count: String[], prevCount: String[]) => { const mixin = useCounterMixin()
await changeExamColumns('education', count) const { messageError, date2Thai } = mixin
const dataStore = useDataStore()
const { loaderPage } = dataStore
const emit = defineEmits(['update:form'])
watch(myform, async (count: any, prevCount: any) => {
emit('update:form', count)
})
watch(defaultEducation, async (count: Education, prevCount: Education) => {
await changeData('education', count)
}) })
onMounted(async () => { onMounted(async () => {
@ -309,15 +250,14 @@ const fetchData = async () => {
.get(config.API.candidateEducation(examId.value, positionId.value)) .get(config.API.candidateEducation(examId.value, positionId.value))
.then((res) => { .then((res) => {
const data = res.data.result const data = res.data.result
rows.value = [] defaultEducation.value.educationLevelExamId = data.educationLevelExamId
data.map((r: ResponseObject) => { defaultEducation.value.educationName = data.educationName
rows.value.push({ defaultEducation.value.educationMajor = data.educationMajor
...r, defaultEducation.value.educationLocation = data.educationLocation
educationLevelId: r.educationLevelId, defaultEducation.value.educationType = data.educationType
educationLevel: r.educationLevelName, defaultEducation.value.educationEndDate = new Date(data.educationEndDate)
duration: [r.durationStart, r.durationEnd] defaultEducation.value.educationScores = data.educationScores
}) defaultEducation.value.educationLevelHighId = data.educationLevelHighId
})
}) })
.catch((e) => { .catch((e) => {
// messageError($q, e) // messageError($q, e)
@ -327,239 +267,6 @@ const fetchData = async () => {
}) })
} }
/**
* กดดูข้อมูลก่อนหน้า
*/
const clickPrevious = async () => {
rowIndex.value -= 1
const row = rows.value[rowIndex.value]
educationLevel.value = row.educationLevel
educationLevelId.value = row.educationLevelId
major.value = row.major
scores.value = row.scores
name.value = row.name
duration.value = row.duration
id.value = row.id
await checkRowPage()
}
/**
* กดดูข้อมูลต่อไป
*/
const clickNext = async () => {
rowIndex.value += 1
const row = rows.value[rowIndex.value]
educationLevel.value = row.educationLevel
educationLevelId.value = row.educationLevelId
major.value = row.major
scores.value = row.scores
name.value = row.name
duration.value = row.duration
id.value = row.id
await checkRowPage()
}
/**
* เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
*/
const checkRowPage = () => {
editRow.value = false
next.value = true
previous.value = true
if (rowIndex.value + 1 >= rows.value.length) {
next.value = false
}
if (rowIndex.value - 1 < 0) {
previous.value = false
}
}
/**
* กดปุ่มแก้ไขใน dialog
*/
const clickEdit = () => {
next.value = false
previous.value = false
}
/**
* กดปุ่มเพิ่มด้านบน table
*/
const clickAdd = async () => {
await addRow()
}
const checkDelete = (row: RequestItemsObject) => {
rawItem.value = row
modalDelete($q, 'ยืนยันการลบข้อมูล', 'หากต้องการลบกดให้กดตกลง', clickDeleteRow)
}
/**
* ลบข้อมูลใน table
*/
const clickDeleteRow = async () => {
if (rawItem.value != null) {
loaderPage(true)
await http
.delete(config.API.candidateEducation(rawItem.value.id, ''))
.then(() => {
success($q, 'ลบข้อมูลสำเร็จ')
})
.catch((e) => {
messageError($q, e)
})
.finally(async () => {
await fetchData()
})
} else {
await fetchData()
}
}
/**
* กดบันทึกใน dialog
*/
const clickSave = async () => {
myForm.value.validate().then(async (result: boolean) => {
if (result) {
if (modalEdit.value) {
await editData()
} else {
await saveData()
}
}
})
}
/**
* บันทึกเพิ่มข้อมูล
*/
const saveData = async () => {
loaderPage(true)
await http
.post(config.API.candidateEducation(examId.value, positionId.value), {
educationLevelId: educationLevelId.value,
major: major.value,
scores: scores.value,
name: name.value,
durationStart: dateToISO(new Date(duration.value[0])),
durationEnd: dateToISO(new Date(duration.value[1]))
})
.then(() => {
success($q, 'บันทึกข้อมูลสำเร็จ')
})
.catch((e) => {
messageError($q, e)
})
.finally(async () => {
modal.value = false
await fetchData()
})
}
/**
* บันทึกแก้ไขข้อมูล
*/
const editData = async () => {
loaderPage(true)
await http
.put(config.API.candidateEducation(id.value, ''), {
educationLevelId: educationLevelId.value,
major: major.value,
scores: scores.value,
name: name.value,
durationStart: dateToISO(new Date(duration.value[0])),
durationEnd: dateToISO(new Date(duration.value[1]))
})
.then(() => {
success($q, 'บันทึกข้อมูลสำเร็จ')
})
.catch((e) => {
messageError($q, e)
})
.finally(async () => {
modal.value = false
await fetchData()
})
}
const checkClose = async () => {
if (editRow.value == true) {
modalConfirm($q, 'ข้อมูลมีการแก้ไข', 'ยืนยันการดำเนินต่อใช่หรือไม่', clickClose)
} else {
await clickClose()
}
await fetchData()
}
/**
* กดปิด dialog
*/
const clickClose = async () => {
modal.value = false
editRow.value = false
next.value = false
previous.value = false
}
/**
* กดเลือกข้อมูลที่จะแก้ไข
* @param props ค่า props ใน row ที่เลือก
*/
const selectData = (props: DataProps) => {
modalEdit.value = true
modal.value = true
editRow.value = false
rawItem.value = props.row
rowIndex.value = props.rowIndex
educationLevel.value = props.row.educationLevel
educationLevelId.value = props.row.educationLevelId
major.value = props.row.major
scores.value = props.row.scores
name.value = props.row.name
duration.value = props.row.duration
id.value = props.row.id
next.value = false
previous.value = false
}
/**
* กดปุ่มเพิ่มบน table
*/
const addRow = () => {
modalEdit.value = false
modal.value = true
educationLevel.value = ''
educationLevelId.value = ''
major.value = ''
scores.value = null
name.value = ''
duration.value = [new Date(), new Date()]
}
/**
* เช็คว่ามีการแก้ไขข้อมูล
*/
const clickEditRow = () => {
editRow.value = true
}
/**
* validate input ใน dialog
*/
const validateData = async () => {
checkValidate.value = true
await myForm.value.validate().then((result: boolean) => {
if (result == false) {
checkValidate.value = false
}
})
}
/**
* class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
* @param val ข้อมูล input สำหรับแก้ไขหรือไม่
*/
const getClass = (val: boolean) => { const getClass = (val: boolean) => {
return { return {
'full-width inputgreen cursor-pointer': val, 'full-width inputgreen cursor-pointer': val,
@ -567,8 +274,3 @@ const getClass = (val: boolean) => {
} }
} }
</script> </script>
<style lang="scss">
.modalfix {
position: fixed !important;
}
</style>

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

@ -10,7 +10,7 @@
/> />
<q-form ref="myform" class="col-12 row q-col-gutter-x-sm justify-center q-col-gutter-sm"> <q-form ref="myform" class="col-12 row q-col-gutter-x-sm justify-center q-col-gutter-sm">
<div class="row col-xs-12 col-sm-12 col-md-10 items-center q-col-gutter-x-sm q-col-gutter-y-xs"> <div class="row col-xs-12 col-sm-12 col-md-10 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
<div class="col-xs-12 col-sm-2 col-md-2"> <div class="col-xs-12 col-sm-3 col-md-3">
<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')"
@ -28,7 +28,7 @@
:label="`${'คำนำหน้า'}`" :label="`${'คำนำหน้า'}`"
/> />
</div> </div>
<div class="col-xs-12 col-sm-5 col-md-5"> <div class="col-xs-12 col-sm-3 col-md-3">
<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'"
@ -41,7 +41,7 @@
:label="`${'ชื่อ'}`" :label="`${'ชื่อ'}`"
/> />
</div> </div>
<div class="col-xs-12 col-sm-5 col-md-5"> <div class="col-xs-12 col-sm-3 col-md-3">
<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'"
@ -67,6 +67,24 @@
:label="`${'สัญชาติ'}`" :label="`${'สัญชาติ'}`"
/> />
</div> </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="defaultInformation.religionId"
emit-value
map-options
option-label="name"
:options="religionOptions"
option-value="id"
:label="`${'ศาสนา'}`"
/>
</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
menu-class-name="modalfix" menu-class-name="modalfix"
@ -132,21 +150,23 @@
/> />
</div> </div>
<div class="col-xs-12 col-sm-3 col-md-3"> <div class="col-xs-12 col-sm-3 col-md-3">
<q-select <q-input
:outlined="status == 'register' || status == 'rejectRegister'"
dense
:counter="status == 'register' || status == 'rejectRegister' ? true : false"
lazy-rules
type="tel"
mask="##########"
maxlength="10"
:class="getClass(status == 'register' || status == 'rejectRegister')" :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')"
:rules="[(val) => !!val || `${'กรุณาเลือก ศาสนา'}`]" v-model="defaultInformation.tel"
:outlined="status == 'register' || status == 'rejectRegister'" :label="`${'โทรศัพท์'}`"
dense :rules="[
lazy-rules (val) => val.length == 10 || `${'กรุณากรอก โทรศัพท์'}`,
v-model="defaultInformation.religionId" (val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกข้อมูลโทรศัพท์ให้ถูกต้อง'}`
emit-value ]"
map-options
option-label="name"
:options="religionOptions"
option-value="id"
: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">
@ -169,28 +189,7 @@
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">
<q-input
:outlined="status == 'register' || status == 'rejectRegister'"
dense
:counter="status == 'register' || status == 'rejectRegister' ? true : false"
lazy-rules
type="tel"
mask="##########"
maxlength="10"
:class="getClass(status == 'register' || status == 'rejectRegister')"
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="defaultInformation.tel"
:label="`${'โทรศัพท์'}`"
:rules="[
(val) => val.length == 10 || `${'กรุณากรอก โทรศัพท์'}`,
(val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกข้อมูลโทรศัพท์ให้ถูกต้อง'}`
]"
/>
<!-- -->
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<q-input <q-input
:outlined="status == 'register' || status == 'rejectRegister'" :outlined="status == 'register' || status == 'rejectRegister'"
dense dense
@ -209,7 +208,7 @@
]" ]"
:label="`${'โทรศัพท์มือถือ'}`" :label="`${'โทรศัพท์มือถือ'}`"
/> />
</div> </div> -->
<div class="col-xs-12 col-sm-3 col-md-3 q-pb-md"> <div class="col-xs-12 col-sm-3 col-md-3 q-pb-md">
<q-input <q-input
:class="getClass(status == 'register' || status == 'rejectRegister')" :class="getClass(status == 'register' || status == 'rejectRegister')"

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

@ -1,8 +1,8 @@
<!-- card อาชีพ --> <!-- card ตำแหน่งปัจจุบัน -->
<template> <template>
<HeaderTop <HeaderTop
v-model:edit="edit" v-model:edit="edit"
header="อาชีพ" header="ตำแหน่งปัจจุบัน"
icon="mdi-briefcase" icon="mdi-briefcase"
:addData="true" :addData="true"
:editOnly="false" :editOnly="false"
@ -10,231 +10,128 @@
/> />
<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-12 row q-pb-lg"> <div class="col-12">
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
hide-bottom-space
dense
lazy-rules
type="textarea"
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="defaultOccupation.official"
:disable="
defaultOccupation.status !== 'official' ||
!(status == 'register' || status == 'rejectRegister')
"
>
<template v-slot:before>
<q-radio
v-model="defaultOccupation.status"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="official"
label="ข้าราชการกรุงเทพมหานคร ตำแหน่ง"
dense
:disable="!(status == 'register' || status == 'rejectRegister')"
size="md"
style="font-size: 14px; color: black"
/>
</template>
</q-input>
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
hide-bottom-space
dense
lazy-rules
type="textarea"
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="defaultOccupation.personnel"
:disable="
defaultOccupation.status !== 'personnel' ||
!(status == 'register' || status == 'rejectRegister')
"
>
<template v-slot:before>
<q-radio
v-model="defaultOccupation.status"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="personnel"
label="บุคลากรกรุงเทพมหานคร ตำแหน่ง"
dense
:disable="!(status == 'register' || status == 'rejectRegister')"
size="md"
style="font-size: 14px; color: black"
/>
</template>
</q-input>
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
hide-bottom-space
dense
lazy-rules
type="textarea"
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="defaultOccupation.officialsOther"
:disable="
defaultOccupation.status !== 'officialsOther' ||
!(status == 'register' || status == 'rejectRegister')
"
>
<template v-slot:before>
<q-radio
v-model="defaultOccupation.status"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="officialsOther"
label="ข้าราชการประเภทอื่น ตำแหน่ง"
dense
:disable="!(status == 'register' || status == 'rejectRegister')"
size="md"
style="font-size: 14px; color: black"
/>
</template>
</q-input>
<q-input
:class="getClass(status == 'register' || status == 'rejectRegister')"
hide-bottom-space
dense
lazy-rules
type="textarea"
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="defaultOccupation.employee"
:disable="
defaultOccupation.status !== 'employee' ||
!(status == 'register' || status == 'rejectRegister')
"
>
<template v-slot:before>
<q-radio
v-model="defaultOccupation.status"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="employee"
label="ลูกจ้าง/พนักงานราชการของส่วนราชการอื่น ตำแหน่ง"
dense
:disable="!(status == 'register' || status == 'rejectRegister')"
size="md"
style="font-size: 14px; color: black"
/>
</template>
</q-input>
<q-radio <q-radio
v-model="defaultOccupation.status" v-model="defaultOccupation.positionType"
checked-icon="task_alt" label="ลูกจ้างประจำ"
unchecked-icon="panorama_fish_eye" color="teal"
val="studying" val="prem"
label="กำลังศึกษาต่อ"
dense
:disable="!(status == 'register' || status == 'rejectRegister')" :disable="!(status == 'register' || status == 'rejectRegister')"
size="md"
style="font-size: 14px; color: black"
/> />
<q-input <q-radio
:class="getClass(status == 'register' || status == 'rejectRegister')" v-model="defaultOccupation.positionType"
hide-bottom-space label="ลูกจ้างชั่วคราว"
dense color="teal"
lazy-rules val="temp"
type="textarea" :disable="!(status == 'register' || status == 'rejectRegister')"
autogrow />
:readonly="!(status == 'register' || status == 'rejectRegister')" <q-radio
:borderless="!(status == 'register' || status == 'rejectRegister')" v-model="defaultOccupation.positionType"
v-model="defaultOccupation.other" label="ผู้ปฏิบัติงานอื่นในกรุงเทพมหานคร"
:disable=" color="teal"
defaultOccupation.status !== 'other' || val="other"
!(status == 'register' || status == 'rejectRegister') :disable="!(status == 'register' || status == 'rejectRegister')"
"
>
<template v-slot:before>
<q-radio
v-model="defaultOccupation.status"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="other"
label="อื่นๆ"
dense
:disable="!(status == 'register' || status == 'rejectRegister')"
size="md"
style="font-size: 14px; color: black"
/>
</template>
</q-input>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<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="defaultOccupation.company"
:label="`${'สำนัก/บริษัท'}`"
hide-bottom-space
/> />
</div> </div>
<div class="col-xs-12 col-sm-3 col-md-3"> <div class="col-12 row">
<q-input <div class="col-3">
:class="getClass(status == 'register' || status == 'rejectRegister')" <q-input
:outlined="status == 'register' || status == 'rejectRegister'" :class="getClass(status == 'register' || status == 'rejectRegister')"
dense :outlined="status == 'register' || status == 'rejectRegister'"
lazy-rules dense
type="textarea" lazy-rules
autogrow autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="defaultOccupation.department" v-model="defaultOccupation.position"
:label="`${'กอง/ฝ่าย'}`" :rules="[(val) => !!val || `${'กรุณากรอก ชื่อตำแหน่ง'}`]"
hide-bottom-space :label="`${'ชื่อตำแหน่ง'}`"
/> />
</div>
<div class="col-3">
<q-input
class="q-pl-sm"
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
lazy-rules
type="number"
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="defaultOccupation.salary"
:rules="[(val) => !!val || `${'กรุณากรอก เงินเดือน'}`]"
:label="`${'เงินเดือน'}`"
/>
</div>
</div> </div>
<div class="col-xs-12 col-sm-3 col-md-3"> <div class="col-12 row">
<q-input <div class="col-3">
:class="getClass(status == 'register' || status == 'rejectRegister')" <q-input
:outlined="status == 'register' || status == 'rejectRegister'" :class="getClass(status == 'register' || status == 'rejectRegister')"
dense :outlined="status == 'register' || status == 'rejectRegister'"
lazy-rules dense
type="textarea" lazy-rules
autogrow autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')" :readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')" :borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="defaultOccupation.email" v-model="defaultOccupation.group"
:label="`${'E-mail address'}`" :rules="[(val) => !!val || `${'กรุณากรอก กลุ่ม/ฝ่าย'}`]"
hide-bottom-space :label="`${'กลุ่ม/ฝ่าย'}`"
/> />
<!-- :rules="[ </div>
(val) => <div class="col-3">
/^([a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})$/.test(val) || <q-input
'E-mail address ไม่ถูกต้อง' class="q-pl-sm"
]" --> :class="getClass(status == 'register' || status == 'rejectRegister')"
</div> :outlined="status == 'register' || status == 'rejectRegister'"
<div class="col-xs-12 col-sm-3 col-md-3"> dense
<q-input lazy-rules
:class="getClass(status == 'register' || status == 'rejectRegister')" autogrow
:outlined="status == 'register' || status == 'rejectRegister'" :readonly="!(status == 'register' || status == 'rejectRegister')"
dense :borderless="!(status == 'register' || status == 'rejectRegister')"
:counter="status == 'register' || status == 'rejectRegister' ? true : false" v-model="defaultOccupation.pile"
maxlength="10" :rules="[(val) => !!val || `${'กรุณากรอก กอง'}`]"
lazy-rules :label="`${'กอง'}`"
type="tel" />
mask="##########" </div>
autogrow <div class="col-3">
:readonly="!(status == 'register' || status == 'rejectRegister')" <q-input
:borderless="!(status == 'register' || status == 'rejectRegister')" class="q-pl-sm"
v-model="defaultOccupation.tel" :class="getClass(status == 'register' || status == 'rejectRegister')"
:label="`${'โทรศัพท์'}`" :outlined="status == 'register' || status == 'rejectRegister'"
hide-bottom-space dense
/> lazy-rules
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="defaultOccupation.org"
:rules="[(val) => !!val || `${'กรุณากรอก สังกัด'}`]"
:label="`${'สังกัด'}`"
/>
</div>
<div class="col-3">
<q-input
class="q-pl-sm"
:class="getClass(status == 'register' || status == 'rejectRegister')"
:outlined="status == 'register' || status == 'rejectRegister'"
dense
:counter="status == 'register' || status == 'rejectRegister' ? true : false"
maxlength="10"
lazy-rules
type="tel"
mask="##########"
autogrow
:readonly="!(status == 'register' || status == 'rejectRegister')"
:borderless="!(status == 'register' || status == 'rejectRegister')"
v-model="defaultOccupation.tel"
:rules="[
(val) => val.length == 10 || `${'กรุณากรอก เบอร์โทรที่ทำงาน'}`,
(val) => /^[0-9]*$/.test(val) || 'กรุณากรอก เบอร์โทรที่ทำงานให้ถูกต้อง'
]"
:label="`${'เบอร์โทรที่ทำงาน'}`"
/>
</div>
</div> </div>
</div> </div>
</q-form> </q-form>
@ -293,21 +190,13 @@ const fetchData = async () => {
.then((res) => { .then((res) => {
const data = res.data.result const data = res.data.result
if (data != null) { if (data != null) {
defaultOccupation.value.status = data.occupationType defaultOccupation.value.org = data.occupationOrg
defaultOccupation.value.company = data.occupationCompany defaultOccupation.value.pile = data.occupationPile
defaultOccupation.value.department = data.occupationDepartment defaultOccupation.value.group = data.occupationGroup
defaultOccupation.value.email = data.occupationEmail defaultOccupation.value.salary = data.occupationSalary
defaultOccupation.value.position = data.occupationPosition
defaultOccupation.value.positionType = data.occupationPositionType
defaultOccupation.value.tel = data.occupationTelephone defaultOccupation.value.tel = data.occupationTelephone
defaultOccupation.value.official =
data.occupationType == 'official' ? data.occupationPosition : null
defaultOccupation.value.personnel =
data.occupationType == 'personnel' ? data.occupationPosition : null
defaultOccupation.value.officialsOther =
data.occupationType == 'officialsOther' ? data.occupationPosition : null
defaultOccupation.value.employee =
data.occupationType == 'employee' ? data.occupationPosition : null
defaultOccupation.value.other =
data.occupationType == 'other' ? data.occupationPosition : null
} }
}) })
.catch((e) => { .catch((e) => {

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

@ -22,12 +22,16 @@
<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 :status="status" v-model:form="formOccupation" /> <Education
:status="status"
v-model:form="formEducation"
:educationLevelOptions="educationLevelOptions"
/>
</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 :educationLevelOptions="educationLevelOptions" :status="status" /> <Occupation :status="status" 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" />
@ -50,7 +54,7 @@ import { useQuasar } from 'quasar'
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/Information.vue' import Information from '@/modules/01_exam/components/Form/Information.vue'
import Address from '@/modules/01_exam/components/Form/Address.vue' import Address from '@/modules/01_exam/components/Form/Address.vue'
// import Family from '@/modules/01_exam/components/Form/Family.vue' import Family from '@/modules/01_exam/components/Form/Family.vue'
import Occupation from '@/modules/01_exam/components/Form/Occupation.vue' import Occupation from '@/modules/01_exam/components/Form/Occupation.vue'
import Education from '@/modules/01_exam/components/Form/Education.vue' import Education from '@/modules/01_exam/components/Form/Education.vue'
import Career from '@/modules/01_exam/components/Form/Career.vue' import Career from '@/modules/01_exam/components/Form/Career.vue'
@ -69,10 +73,10 @@ const props = defineProps({
type: Object, type: Object,
required: true required: true
}, },
// formFamily: { formEducation: {
// type: Object, type: Object,
// required: true required: true
// }, },
formOccupation: { formOccupation: {
type: Object, type: Object,
required: true required: true
@ -81,7 +85,7 @@ const props = defineProps({
const emit = defineEmits([ const emit = defineEmits([
'update:formInformation', 'update:formInformation',
'update:formAddress', 'update:formAddress',
// 'update:formFamily', 'update:formEducation',
'update:formOccupation' 'update:formOccupation'
]) ])
@ -96,7 +100,7 @@ const provinceOptions = ref<DataOption[]>([])
const educationLevelOptions = ref<DataOption[]>([]) const educationLevelOptions = ref<DataOption[]>([])
const formInformation = ref<any>({}) const formInformation = ref<any>({})
const formAddress = ref<any>({}) const formAddress = ref<any>({})
// const formFamily = ref<any>({}) const formEducation = ref<any>({})
const formOccupation = ref<any>({}) const formOccupation = ref<any>({})
watch(formInformation, async (count: Object, prevCount: Object) => { watch(formInformation, async (count: Object, prevCount: Object) => {
@ -107,9 +111,9 @@ watch(formAddress, async (count: Object, prevCount: Object) => {
emit('update:formAddress', count) emit('update:formAddress', count)
}) })
// watch(formFamily, async (count: Object, prevCount: Object) => { watch(formEducation, async (count: Object, prevCount: Object) => {
// emit('update:formFamily', count) emit('update:formEducation', count)
// }) })
watch(formOccupation, async (count: Object, prevCount: Object) => { watch(formOccupation, async (count: Object, prevCount: Object) => {
emit('update:formOccupation', count) emit('update:formOccupation', count)

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

@ -62,16 +62,24 @@ interface Family {
} }
interface Occupation { interface Occupation {
status: string | null org: string | null
company: string | null pile: string | null
department: string | null group: string | null
email: string | null salary: string | null
position: string | null
positionType: string | null
tel: string | null tel: string | null
official: string | null }
personnel: string | null
officialsOther: string | null interface Education {
employee: string | null educationLevelExamId: string | null
other: string | null educationName: string | null
educationMajor: string | null
educationLocation: string | null
educationType: string | null
educationEndDate: Date
educationScores: number | null
educationLevelHighId: string | null
} }
interface Address { interface Address {
@ -118,99 +126,6 @@ interface ExamCard {
yearly: Date yearly: Date
} }
const defaultCard: ExamCard[] = [
{
id: '1',
title: 'การสอบภาค ข. พิเศษ สำหรับผู้สอบผ่านของส่วนราชการแล้ว',
registerRound: 2,
announcementDate: new Date('2022-11-23'),
registerDateStart: new Date('2022-11-09'),
registerDateEnd: new Date('2022-11-10'),
yearly: new Date('2022-01-01')
},
{
id: '2',
title: 'การสอบภาค ก. พิเศษ สำหรับผู้สอบผ่านของส่วนราชการแล้ว',
registerRound: 1,
announcementDate: new Date('2022-10-14'),
registerDateStart: new Date('2022-10-09'),
registerDateEnd: new Date('2022-11-30'),
yearly: new Date('2022-01-01')
},
{
id: '2',
title: 'การสอบภาค ก. พิเศษ สำหรับผู้สอบผ่านของส่วนราชการแล้ว',
registerRound: 1,
announcementDate: new Date('2022-10-14'),
registerDateStart: new Date('2022-10-09'),
registerDateEnd: new Date('2022-11-30'),
yearly: new Date('2022-01-01')
},
{
id: '2',
title: 'การสอบภาค ก. พิเศษ สำหรับผู้สอบผ่านของส่วนราชการแล้ว',
registerRound: 1,
announcementDate: new Date('2022-10-14'),
registerDateStart: new Date('2022-10-09'),
registerDateEnd: new Date('2022-11-30'),
yearly: new Date('2022-01-01')
},
{
id: '2',
title: 'การสอบภาค ก. พิเศษ สำหรับผู้สอบผ่านของส่วนราชการแล้ว',
registerRound: 1,
announcementDate: new Date('2022-10-14'),
registerDateStart: new Date('2022-10-09'),
registerDateEnd: new Date('2022-11-30'),
yearly: new Date('2022-01-01')
},
{
id: '2',
title: 'การสอบภาค ก. พิเศษ สำหรับผู้สอบผ่านของส่วนราชการแล้ว',
registerRound: 1,
announcementDate: new Date('2022-10-14'),
registerDateStart: new Date('2022-10-09'),
registerDateEnd: new Date('2022-11-30'),
yearly: new Date('2022-01-01')
},
{
id: '2',
title: 'การสอบภาค ก. พิเศษ สำหรับผู้สอบผ่านของส่วนราชการแล้ว',
registerRound: 1,
announcementDate: new Date('2022-10-14'),
registerDateStart: new Date('2022-10-09'),
registerDateEnd: new Date('2022-11-30'),
yearly: new Date('2022-01-01')
},
{
id: '2',
title: 'การสอบภาค ก. พิเศษ สำหรับผู้สอบผ่านของส่วนราชการแล้ว',
registerRound: 1,
announcementDate: new Date('2022-10-14'),
registerDateStart: new Date('2022-10-09'),
registerDateEnd: new Date('2022-11-30'),
yearly: new Date('2022-01-01')
},
{
id: '2',
title: 'การสอบภาค ก. พิเศษ สำหรับผู้สอบผ่านของส่วนราชการแล้ว',
registerRound: 1,
announcementDate: new Date('2022-10-14'),
registerDateStart: new Date('2022-10-09'),
registerDateEnd: new Date('2022-11-30'),
yearly: new Date('2022-01-01')
},
{
id: '2',
title: 'การสอบภาค ก. พิเศษ สำหรับผู้สอบผ่านของส่วนราชการแล้ว',
registerRound: 1,
announcementDate: new Date('2022-10-14'),
registerDateStart: new Date('2022-10-09'),
registerDateEnd: new Date('2022-11-30'),
yearly: new Date('2022-01-01')
}
]
const defaultAddress = ref<Address>({ const defaultAddress = ref<Address>({
address: null, address: null,
provinceId: null, provinceId: null,
@ -234,7 +149,7 @@ const defaultInformation = ref<Information>({
birthDate: new Date(), birthDate: new Date(),
genderId: null, genderId: null,
bloodId: null, bloodId: null,
nationality: null, nationality: 'ไทย',
ethnicity: null, ethnicity: null,
religionId: null, religionId: null,
tel: null, tel: null,
@ -273,16 +188,24 @@ const defaultFamily = ref<Family>({
}) })
const defaultOccupation = ref<Occupation>({ const defaultOccupation = ref<Occupation>({
status: null, org: null,
company: null, pile: null,
department: null, group: null,
email: null, salary: null,
tel: null, position: null,
official: null, positionType: 'other',
personnel: null, tel: null
officialsOther: null, })
employee: null,
other: null const defaultEducation = ref<Education>({
educationLevelExamId: null,
educationName: null,
educationMajor: null,
educationLocation: null,
educationType: null,
educationEndDate: new Date(),
educationScores: null,
educationLevelHighId: null
}) })
const changeData = (system: String, val: any) => { const changeData = (system: String, val: any) => {
@ -290,6 +213,7 @@ const changeData = (system: String, val: any) => {
if (system == 'address') defaultAddress.value = val if (system == 'address') defaultAddress.value = val
if (system == 'famliy') defaultFamily.value = val if (system == 'famliy') defaultFamily.value = val
if (system == 'occupation') defaultOccupation.value = val if (system == 'occupation') defaultOccupation.value = val
if (system == 'education') defaultEducation.value = val
} }
export { export {
@ -297,7 +221,7 @@ export {
defaultFamily, defaultFamily,
defaultAddress, defaultAddress,
defaultOccupation, defaultOccupation,
defaultCard, defaultEducation,
changeData changeData
} }
export type { export type {
@ -310,6 +234,7 @@ export type {
Address, Address,
zipCodeOption, zipCodeOption,
Occupation, Occupation,
Education,
ExamCard, ExamCard,
UploadType UploadType
} }

23
src/modules/01_exam/views/ExamDetail.vue
View file

@ -6,7 +6,9 @@
{{ tittle }} {{ tittle }}
{{ `ครั้งที่${round}/${yearly == null ? '' : yearly + 543}` }} {{ `ครั้งที่${round}/${yearly == null ? '' : yearly + 543}` }}
</div> </div>
<div class="col-12">{{ position }}/{{ positionLevel }}</div> <div class="col-12">
{{ position }}{{ positionLevel == null ? null : '/' + positionLevel }}
</div>
</q-toolbar-title> </q-toolbar-title>
</q-toolbar> </q-toolbar>
<!-- <q-toolbar class="q-pa-sm text-center"> <!-- <q-toolbar class="q-pa-sm text-center">
@ -40,7 +42,13 @@
<li>{{ rejectMessage }}</li> <li>{{ rejectMessage }}</li>
</div> </div>
</q-card-actions> </q-card-actions>
<ExamForm :fetchStep="fetchStep" :status="status" /> <ExamForm
:fetchStep="fetchStep"
:status="status"
:editorConfirm="editorConfirm"
:position="position"
:positionLevel="positionLevel"
/>
</q-card> </q-card>
</q-step> </q-step>
<q-step <q-step
@ -69,7 +77,7 @@
</q-stepper> </q-stepper>
<q-dialog :model-value="modalConsend" persistent> <q-dialog :model-value="modalConsend" persistent>
<q-card :style="$q.screen.gt.xs ? 'min-width: 55vw' : 'min-width: 80vw'"> <q-card :style="$q.screen.gt.xs ? 'min-width: 55vw' : 'min-width: 80vw'">
<Consendform :ok="consendOk" /> <Consendform :ok="consendOk" :editorCondition="editorCondition" />
</q-card> </q-card>
</q-dialog> </q-dialog>
</template> </template>
@ -108,6 +116,8 @@ const stepPayment = ref<boolean>(true)
const rejectMessage = ref<string>('') const rejectMessage = ref<string>('')
const round = ref<number | null>(null) const round = ref<number | null>(null)
const yearly = ref<number | null>(null) const yearly = ref<number | null>(null)
const editorCondition = ref<string>(``)
const editorConfirm = ref<string>(``)
onMounted(async () => { onMounted(async () => {
await fetchPeriodExam() await fetchPeriodExam()
@ -121,6 +131,8 @@ const candidateCheck = async () => {
.then(async (res) => { .then(async (res) => {
const data = res.data.result const data = res.data.result
storeExam.consend = data.consend storeExam.consend = data.consend
editorCondition.value = data.editorCondition
editorConfirm.value = data.editorConfirm
const positionExam = data.positionExam const positionExam = data.positionExam
stepPayment.value = data.payment stepPayment.value = data.payment
if ( if (
@ -221,9 +233,8 @@ const fetchPeriodExam = async () => {
tittle.value = data.name tittle.value = data.name
round.value = data.round round.value = data.round
yearly.value = data.year yearly.value = data.year
position.value = data.posiiton == null ? '' : 'ตำแหน่ง: ' + data.posiiton position.value = data.position
positionLevel.value = data.posiitonLevel == null ? '' : 'ระดับ: ' + data.posiitonLevel positionLevel.value = data.positionLevel
console.log(data)
}) })
.catch((e) => { .catch((e) => {
messageError($q, e) messageError($q, e)