refactor(recruiting): add ScoreExpireDate to compete, qualify, and disable period forms
All checks were successful
Build & Deploy on Dev / build (push) Successful in 2m54s

This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2026-07-02 10:40:54 +07:00
parent 6f878a0e16
commit d3936e56b2
4 changed files with 208 additions and 20 deletions

View file

@ -56,6 +56,7 @@ const fileImgDataUpload = ref<File[]>([]);
const fileImgs = ref<UploadType[]>([]);
const id = ref<string>("");
const edit = ref<boolean>(false);
const scoreExpireDate = ref<Date | null>(null); //
/** กลับไปหน้าหลัก */
function clickBack() {
@ -101,6 +102,7 @@ async function fetchData() {
fileDocs.value = files;
fileImgs.value = images;
scoreExpireDate.value = data.scoreExpireDate;
})
.catch((e) => {
messageError($q, e);
@ -256,7 +258,11 @@ function sendData() {
year: yearly.value,
announcementDate:
dateAnnounce.value !== null ? convertDateToAPI(dateAnnounce.value) : null,
rootDnaId: !edit.value ? dataPositionKeycloak.value.rootDnaId : undefined,
scoreExpireDate:
scoreExpireDate.value !== null
? convertDateToAPI(scoreExpireDate.value)
: null,
rootDnaId: !edit.value ? dataPositionKeycloak.value.rootDnaId : undefined,
};
return valueData;
}
@ -359,6 +365,13 @@ function dateThaiRange(val: [Date, Date]) {
return `${date2Thai(val[0], true)} - ${date2Thai(val[1], true)}`;
}
}
function onUpdateScoreExpireDate(val: Date | null) {
if (val) {
const newDate = new Date(val);
newDate.setFullYear(newDate.getFullYear() + 2);
scoreExpireDate.value = newDate;
}
}
watch(organizationShortName, (count: DataOption2, prevCount: DataOption2) => {
organizationNameOptions.value = [];
@ -455,6 +468,7 @@ onMounted(async () => {
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-4 col-md-2" v-if="announcementExam">
<q-input
outlined
@ -470,6 +484,7 @@ onMounted(async () => {
input-class="text-right"
></q-input>
</div>
<div class="col-xs-12 col-sm-4 col-md-3" v-if="announcementExam">
<datepicker
v-model="dateExam"
@ -505,6 +520,7 @@ onMounted(async () => {
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<datepicker
v-model="dateAnnouncement"
@ -547,6 +563,7 @@ onMounted(async () => {
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
<datepicker
v-model="dateRegister"
@ -572,6 +589,7 @@ onMounted(async () => {
dateRegister != null ? dateThaiRange(dateRegister) : null
"
:label="`${'วันที่สมัคร'}`"
hide-bottom-space
>
<template v-slot:prepend>
<q-icon
@ -585,6 +603,7 @@ onMounted(async () => {
</template>
</datepicker>
</div>
<div
class="col-xs-12 col-sm-3 col-md-3"
v-if="announcementExam && isFeeNotZero"
@ -614,6 +633,7 @@ onMounted(async () => {
"
:label="`${'วันที่ชำระเงิน'}`"
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่ชำระเงิน'}`]"
hide-bottom-space
>
<template v-slot:prepend>
<q-icon
@ -636,6 +656,7 @@ onMounted(async () => {
borderless
:enableTimePicker="false"
week-start="0"
@update:model-value="onUpdateScoreExpireDate"
>
<template #year="{ year }">
{{ year + 543 }}
@ -653,6 +674,48 @@ onMounted(async () => {
"
:label="`${'วันประกาศผลสอบ'}`"
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันประกาศผลสอบ'}`]"
hide-bottom-space
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
<datepicker
v-model="scoreExpireDate"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
class="full-width datepicker q-mb-md"
:model-value="
scoreExpireDate != null ? date2Thai(scoreExpireDate) : null
"
:label="`${'วันหมดอายุบัญชี'}`"
clearable
@clear="scoreExpireDate = null"
hide-bottom-space
>
<template v-slot:prepend>
<q-icon

View file

@ -47,7 +47,7 @@ const positionPathOptions = ref<DataOption2[]>([]);
const organizationShortName = ref<DataOption2>({ id: "", name: "" });
const organizationName = ref<DataOption2>({ id: "", name: "" });
const organizationNameOptions = ref<DataOption2[]>([]);
const scoreExpireDate = ref<Date | null>(null); //
const fileDocDataUpload = ref<File[]>([]);
const fileDocs = ref<UploadType[]>([]);
const fileImgDataUpload = ref<File[]>([]);
@ -93,6 +93,7 @@ async function fetchData() {
data.announcementDate != null ? new Date(data.announcementDate) : null;
fileDocs.value = data.documents;
fileImgs.value = data.images;
scoreExpireDate.value = data.scoreExpireDate;
})
.catch((e) => {
messageError($q, e);
@ -163,6 +164,10 @@ function sendData() {
announcementDate:
dateAnnounce.value !== null ? convertDateToAPI(dateAnnounce.value) : null,
rootDnaId: !edit.value ? dataPositionKeycloak.value.rootDnaId : undefined,
scoreExpireDate:
scoreExpireDate.value !== null
? convertDateToAPI(scoreExpireDate.value)
: null,
};
return valueData;
}
@ -352,6 +357,14 @@ function dateThaiRange(val: [Date, Date] | null) {
}
}
function onUpdateScoreExpireDate(val: Date | null) {
if (val) {
const newDate = new Date(val);
newDate.setFullYear(newDate.getFullYear() + 2);
scoreExpireDate.value = newDate;
}
}
watch(organizationShortName, (count: DataOption2, prevCount: DataOption2) => {
organizationNameOptions.value = [];
});
@ -390,7 +403,7 @@ onMounted(async () => {
<q-form ref="myForm">
<q-card-section class="q-pa-md">
<div class="col-xs-12 col-sm-8"></div>
<div class="col-12 row items-center q-col-gutter-x-sm">
<div class="col-12 row q-col-gutter-sm">
<div class="col-xs-12 col-sm-6">
<q-input
outlined
@ -402,8 +415,10 @@ onMounted(async () => {
(val:string) =>
!!val || `${'กรุณากรอกชื่อรอบคัดเลือก/ชื่อประกาศ'}`,
]"
hide-bottom-space
></q-input>
</div>
<div class="col-xs-12 col-sm-4 col-md-1" v-if="announcementExam">
<q-input
outlined
@ -413,8 +428,10 @@ onMounted(async () => {
dense
lazy-rules
:rules="[(val:number) => val > 0 || `${'กรุณากรอกรอบการสอบให้ถูกต้อง'}`]"
hide-bottom-space
></q-input>
</div>
<div class="col-xs-12 col-sm-4 col-md-1" v-if="announcementExam">
<datepicker
v-model="yearly"
@ -435,6 +452,7 @@ onMounted(async () => {
:model-value="yearly + 543"
:rules="[(val:string) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`]"
:label="`${'ปีงบประมาณ'}`"
hide-bottom-space
>
<template v-slot:prepend>
<q-icon
@ -460,6 +478,7 @@ onMounted(async () => {
:rules="[
(val:any) => val >= 0 || `${'กรุณากรอกค่าธรรมเนียมให้ถูกต้อง'}`,
]"
hide-bottom-space
></q-input>
</div>
<div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
@ -484,6 +503,7 @@ onMounted(async () => {
:model-value="dateExam != null ? date2Thai(dateExam) : null"
:label="`${'วันที่สอบ'}`"
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สอบ'}`]"
hide-bottom-space
>
<template v-slot:prepend>
<q-icon
@ -517,10 +537,11 @@ onMounted(async () => {
<q-input
outlined
dense
class="full-width datepicker q-mb-md"
class="full-width datepicker"
:model-value="dateThaiRange(dateAnnouncement)"
:label="`${'วันที่ประกาศ'}`"
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่ประกาศ'}`]"
hide-bottom-space
>
<template v-slot:prepend>
<q-icon
@ -554,10 +575,11 @@ onMounted(async () => {
<q-input
outlined
dense
class="full-width datepicker q-mb-md"
class="full-width datepicker"
:model-value="dateThaiRange(dateRegister)"
:label="`${'วันที่สมัคร'}`"
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สมัคร'}`]"
hide-bottom-space
>
<template v-slot:prepend>
<q-icon
@ -594,12 +616,13 @@ onMounted(async () => {
<q-input
outlined
dense
class="full-width datepicker q-mb-md"
class="full-width datepicker"
:model-value="
datePayment != null ? dateThaiRange(datePayment) : null
"
:label="`${'วันที่ชำระเงิน'}`"
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่ชำระเงิน'}`]"
hide-bottom-space
>
<template v-slot:prepend>
<q-icon
@ -622,6 +645,7 @@ onMounted(async () => {
borderless
:enableTimePicker="false"
week-start="0"
@update:model-value="onUpdateScoreExpireDate"
>
<template #year="{ year }">
{{ year + 543 }}
@ -633,12 +657,54 @@ onMounted(async () => {
<q-input
outlined
dense
class="full-width datepicker q-mb-md"
class="full-width datepicker"
:model-value="
dateAnnounce != null ? date2Thai(dateAnnounce) : null
"
:label="`${'วันประกาศผลสอบ'}`"
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันประกาศผลสอบ'}`]"
hide-bottom-space
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
<datepicker
v-model="scoreExpireDate"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
class="full-width datepicker"
:model-value="
scoreExpireDate != null ? date2Thai(scoreExpireDate) : null
"
:label="`${'วันหมดอายุบัญชี'}`"
clearable
@clear="scoreExpireDate = null"
hide-bottom-space
>
<template v-slot:prepend>
<q-icon

View file

@ -93,6 +93,7 @@ const examTypeOptions = [
{ name: "แพทย์", id: "docter" },
];
const category = ref<string>("");
const scoreExpireDate = ref<Date | null>(null);
const fileDocDataUpload = ref<File[]>([]);
const fileDocs = ref<UploadType[]>([]);
@ -333,6 +334,7 @@ async function fetchData() {
refNo1.value = data.refNo1;
reason.value = data.reason;
graduationYearLock.value = data.graduationYearLock;
scoreExpireDate.value = data.scoreExpireDate;
})
.catch((e) => {
messageError($q, e);
@ -506,6 +508,10 @@ function sendData() {
refNo1: refNo1.value,
reason: reason.value,
graduationYearLock: Number(graduationYearLock.value),
scoreExpireDate:
scoreExpireDate.value != null
? convertDateToAPI(scoreExpireDate.value)
: null,
};
return valueData;
}
@ -939,6 +945,14 @@ watch(
}
);
function onUpdateScoreExpireDate(val: Date | null) {
if (val) {
const newDate = new Date(val);
newDate.setFullYear(newDate.getFullYear() + 2);
scoreExpireDate.value = newDate;
}
}
onMounted(async () => {
hideLoader();
if (route.params.id != undefined) {
@ -1242,6 +1256,7 @@ onMounted(async () => {
borderless
:enableTimePicker="false"
week-start="0"
@update:model-value="onUpdateScoreExpireDate"
>
<template #year="{ year }">
{{ year + 543 }}
@ -1275,21 +1290,63 @@ onMounted(async () => {
</template>
</datepicker>
</div>
<div class="row col-12" v-if="announcementExam">
<div class="col-xs-12 col-md-2">
<q-input
outlined
v-model="graduationYearLock"
label="ล็อกวันที่สำเร็จการศึกษา (ปี)"
dense
:readonly="checkRoutePermisson"
lazy-rules
:rules="[
<div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
<datepicker
v-model="scoreExpireDate"
:locale="'th'"
autoApply
:readonly="checkRoutePermisson"
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
:readonly="checkRoutePermisson"
dense
class="full-width datepicker q-mb-md"
:model-value="
scoreExpireDate != null ? date2Thai(scoreExpireDate) : null
"
:label="`${'วันหมดอายุบัญชี'}`"
clearable
@clear="scoreExpireDate = null"
hide-bottom-space
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-2 col-md-2" v-if="announcementExam">
<q-input
outlined
v-model="graduationYearLock"
label="ล็อกวันที่สำเร็จการศึกษา (ปี)"
dense
:readonly="checkRoutePermisson"
lazy-rules
:rules="[
(val:string) => !!val || `${'กรุณากรอกล็อกวันที่สำเร็จการศึกษา (ปี)'}`,
]"
type="number"
></q-input>
</div>
type="number"
></q-input>
</div>
<div class="col-12" v-if="announcementExam">