ปรับฟอร์มทุนระบบพัฒนา

This commit is contained in:
Warunee Tamkoo 2024-04-18 16:05:39 +07:00
parent 6fb49dd324
commit 44fe23f289
5 changed files with 516 additions and 254 deletions

View file

@ -106,6 +106,11 @@ const formBody = reactive<FormsSholarship>({
posExecutive: "", //
posLevelId: null, //
posTypeId: null, //
org: "",
rootId: null,
root: "",
orgRootShortName: "",
orgRevisionId: null,
guarantorRank: "", //()
guarantorPrefix: "", //()
guarantorFirstName: "", //()
@ -218,11 +223,12 @@ function fetchDataDetail(id: string) {
dataPerson.type = data.posTypeName ? data.posTypeName : "-";
dataPerson.level = data.posLevelName ? data.posLevelName : "-";
dataPerson.positionSide = data.posExecutive ? data.posExecutive : "-";
dataPerson.org = data.org ? data.org : "-";
dataGuarantor.citizenId = data.guarantorCitizenId
? data.guarantorCitizenId
: "-";
dataGuarantor.name = `${data.guarantorPrefix} ${data.guarantorFirstName} ${data.guarantorLastName}`;
dataGuarantor.name = `${data.guarantorPrefix}${data.guarantorFirstName} ${data.guarantorLastName}`;
dataGuarantor.position = data.position ? data.position : "-";
dataGuarantor.type = data.posTypeguarantorName
? data.posTypeguarantorName
@ -252,6 +258,17 @@ function onSubmit() {
typeof formBody.budgetApprove === "string"
? Number(formBody.budgetApprove.replace(/,/g, ""))
: formBody.budgetApprove;
if (formBody.scholarshipType === "RESEARCH") {
formBody.planType = "";
formBody.fundType = "";
formBody.budgetSource = "";
formBody.useOfficialTime = false;
formBody.reportBackNo = "";
formBody.reportBackNoDate = null;
formBody.reportBackDate = null;
formBody.changeDetail = "";
}
try {
const url = scholarshipId.value
? config.API.devScholarshipByid(scholarshipId.value)
@ -363,7 +380,6 @@ function onSelectGov(isGov: boolean) {
function upDate(data: DataPerson) {
if (isSelectGov.value) {
console.log(data);
formBody.profileId = data.id;
formBody.rank = data.rank;
formBody.prefix = data.prefix;
@ -374,6 +390,11 @@ function upDate(data: DataPerson) {
formBody.posTypeId = data.posTypeId;
formBody.posLevelId = data.posLevelId;
formBody.posExecutive = data.positionSide;
formBody.org = data.org;
formBody.rootId = data.rootId;
formBody.root = data.root;
formBody.orgRootShortName = data.orgRootShortName;
formBody.orgRevisionId = data.orgRevisionId;
dataPerson.id = data.id ? data.id : "-";
dataPerson.citizenId = data.citizenId ? data.citizenId : "-";
@ -382,6 +403,7 @@ function upDate(data: DataPerson) {
dataPerson.type = data.type ? data.type : "-";
dataPerson.level = data.level ? data.level : "-";
dataPerson.positionSide = data.positionSide ? data.positionSide : "-";
dataPerson.org = data.org ? data.org : "-";
isGov.value = true;
} else {
formBody.guarantorRank = data.rank;
@ -484,18 +506,18 @@ onMounted(() => {
<q-btn
unelevated
color="green"
label="สำเร็จการศึกษา"
label="เรียนจบ"
@click="onClickUpdateStatus('GRADUATE')"
/>
<q-btn
unelevated
color="red"
label="ไม่จบการศึกษา"
label="เรียนไม่จบ"
@click="onClickUpdateStatus('NOTGRADUATE')"
/>
</div>
<div :class="isStatus === 'GRADUATE' ? 'text-green' : 'text-red'" v-else>
{{ isStatus === "GRADUATE" ? "สำเร็จการศึกษา" : "ไม่จบการศึกษา" }}
{{ isStatus === "GRADUATE" ? "เรียนจบ" : "เรียนไม่จบ" }}
</div>
</div>
</div>
@ -533,7 +555,7 @@ onMounted(() => {
<div class="col-8 text-weight-medium">
{{ dataPerson.position }}
</div>
<div class="col-4 text-grey">ประเภท</div>
<div class="col-4 text-grey">ประเภทตำแหน</div>
<div class="col-8 text-weight-medium">
{{ dataPerson.type }}
</div>
@ -587,7 +609,8 @@ onMounted(() => {
class="col-3"
v-if="
formBody.scholarshipType !== '' &&
formBody.scholarshipType !== 'EXECUTIVE'
formBody.scholarshipType !== 'EXECUTIVE' &&
formBody.scholarshipType !== 'RESEARCH'
"
>
<q-select
@ -610,7 +633,7 @@ onMounted(() => {
/>
</div>
<div class="col-12">
<div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-12">
<q-radio
v-model="formBody.planType"
checked-icon="task_alt"
@ -629,193 +652,208 @@ onMounted(() => {
class="q-pl-sm"
/>
</div>
<div class="col-3">
<datepicker
menu-class-name="modalfix"
v-model="formBody.scholarshipYear"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
outlined
class="inputgreen"
:model-value="
formBody.scholarshipYear
? Number(formBody.scholarshipYear) + 543
: null
"
:label="`${'ปีงบประมาณที่ได้รับทุน'}`"
hide-bottom-space
:rules="[
<div class="row col-12 q-col-gutter-md">
<div class="col-3">
<datepicker
menu-class-name="modalfix"
v-model="formBody.scholarshipYear"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
outlined
class="inputgreen"
:model-value="
formBody.scholarshipYear
? Number(formBody.scholarshipYear) + 543
: null
"
:label="`${
formBody.scholarshipType === 'RESEARCH'
? 'ปีงบประมาณที่ได้รับอนุมัติ '
: 'ปีงบประมาณที่ได้รับทุน'
}`"
hide-bottom-space
:rules="[
(val: string) => !!val || `${'กรุณาเลือกปีงบประมาณที่ได้รับทุน'}`,
]"
>
<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-3">
<q-select
dense
outlined
class="inputgreen"
label="แหล่งงบประมาณ"
hide-bottom-space
v-model="formBody.budgetSource"
:options="budgetSourceOp"
option-label="name"
option-value="id"
emit-value
map-options
:rules="[
>
<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 v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-3">
<q-select
dense
outlined
class="inputgreen"
label="แหล่งงบประมาณ"
hide-bottom-space
v-model="formBody.budgetSource"
:options="budgetSourceOp"
option-label="name"
option-value="id"
emit-value
map-options
:rules="[
(val: string) =>
!!val || `${'กรุณาเลือกแหล่งงบประมาณ'}`,
]"
/>
/>
</div>
<div class="col-3">
<q-input
dense
outlined
hide-bottom-space
class="inputgreen"
v-model="formBody.budgetApprove"
label="งบประมาณที่ได้รับอนุมัติตลอดหลักสูตร"
mask="###,###,###,###,###,###"
reverse-fill-mask
:rules="[
(val: any) => {
if (!val && !formBody.isNoUseBudget) {
return 'กรุณากรอกงบประมาณที่ได้รับอนุมัติตลอดหลักสูตร';
}
return true;
},
]"
/>
</div>
<div class="col-3">
<q-checkbox
keep-color
color="primary"
v-model="formBody.isNoUseBudget"
label="ไม่ใช้งบประมาณ"
/>
</div>
</div>
<div class="col-3">
<q-input
dense
outlined
hide-bottom-space
class="inputgreen"
v-model="formBody.budgetApprove"
label="งบประมาณที่ได้รับอนุมัติตลอดหลักสูตร"
mask="###,###,###,###,###,###"
reverse-fill-mask
:rules="[
(val: string) =>
!!val || `${'กรุณากรอกงบประมาณที่ได้รับอนุมัติตลอดหลักสูตร'}`,
]"
/>
</div>
<div class="col-3">
<q-checkbox
keep-color
color="primary"
v-model="formBody.isNoUseBudget"
label="ไม่ใช้งบประมาณ"
/>
</div>
<div class="col-3">
<q-input
dense
outlined
class="inputgreen"
v-model="formBody.bookNo"
label="เลขที่หนังสืออนุมัติ"
hide-bottom-space
:rules="[
<div class="row col-12 q-col-gutter-md">
<div class="col-3">
<q-input
dense
outlined
class="inputgreen"
v-model="formBody.bookNo"
label="เลขที่หนังสืออนุมัติ"
hide-bottom-space
:rules="[
(val: string) =>
!!val || `${'กรุณากรอกเลขที่หนังสืออนุมัติ'}`,
]"
/>
</div>
<div class="col-3">
<datepicker
menu-class-name="modalfix"
v-model="formBody.bookNoDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
outlined
class="inputgreen"
:model-value="
formBody.bookNoDate ? date2Thai(formBody.bookNoDate) : null
"
:label="`${'ลงวันที่'}`"
hide-bottom-space
:rules="[
/>
</div>
<div class="col-3">
<datepicker
menu-class-name="modalfix"
v-model="formBody.bookNoDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
outlined
class="inputgreen"
:model-value="
formBody.bookNoDate ? date2Thai(formBody.bookNoDate) : null
"
:label="`${'ลงวันที่'}`"
hide-bottom-space
:rules="[
(val: string) =>
!!val || `${'กรุณาเลือกวันที่'}`,
]"
>
<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-3">
<datepicker
menu-class-name="modalfix"
v-model="formBody.bookApproveDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
outlined
class="inputgreen"
:model-value="
formBody.bookApproveDate
? date2Thai(formBody.bookApproveDate)
: null
"
:label="`${'หนังสืออนุมัติเมื่อวันที่'}`"
hide-bottom-space
:rules="[
>
<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-3">
<datepicker
menu-class-name="modalfix"
v-model="formBody.bookApproveDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
outlined
class="inputgreen"
:model-value="
formBody.bookApproveDate
? date2Thai(formBody.bookApproveDate)
: null
"
:label="`${'หนังสืออนุมัติเมื่อวันที่'}`"
hide-bottom-space
:rules="[
(val: string) =>
!!val || `${'กรุณาเลือกวันที่หนังสืออนุมัติเมื่อวันที่'}`,
]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
>
<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 v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-3">
<q-checkbox
keep-color
color="primary"
v-model="formBody.useOfficialTime"
label="ใช้เวลาราชการ"
/>
</div>
</div>
<div class="col-3">
<q-checkbox
keep-color
color="primary"
v-model="formBody.useOfficialTime"
label="ใช้เวลาราชการ"
/>
</div>
<div class="col-12">
<div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-12">
<q-input
outlined
dense
@ -832,13 +870,7 @@ onMounted(() => {
/>
</div>
<div
class="col-12"
v-if="
formBody.scholarshipType !== '' &&
formBody.scholarshipType !== 'EXECUTIVE'
"
>
<div class="col-12" v-if="formBody.scholarshipType !== 'EXECUTIVE'">
<div class="row col-12 q-col-gutter-md">
<div class="col-3">
<q-input
@ -895,7 +927,7 @@ onMounted(() => {
</template>
</datepicker>
</div>
<div class="col-3">
<div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-3">
<q-input
dense
outlined
@ -909,7 +941,7 @@ onMounted(() => {
]"
/>
</div>
<div class="col-2">
<div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-2">
<datepicker
menu-class-name="modalfix"
v-model="formBody.reportBackNoDate"
@ -950,7 +982,7 @@ onMounted(() => {
</template>
</datepicker>
</div>
<div class="col-2">
<div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-2">
<datepicker
menu-class-name="modalfix"
v-model="formBody.reportBackDate"
@ -1888,12 +1920,12 @@ onMounted(() => {
outlined
lazy-rules
hide-bottom-space
label="สถานที่ไปศึกษาดูงาน"
label="สถานที่ไปศึกษาดูงานในประเทศ"
class="inputgreen"
v-model="formBody.studyPlace"
:rules="[
(val: string) =>
!!val || `${'กรุณากรอกสถานที่ไปศึกษาดูงาน'}`,
!!val || `${'กรุณากรอกสถานที่ไปศึกษาดูงานในประเทศ'}`,
]"
/>
</div>
@ -1903,12 +1935,12 @@ onMounted(() => {
outlined
lazy-rules
hide-bottom-space
label="หัวข้อการไปศึกษาดูงาน"
label="หัวข้อการไปศึกษาดูงานในประเทศ"
class="inputgreen"
v-model="formBody.studyTopic"
:rules="[
(val: string) =>
!!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงาน'}`,
!!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงานในประเทศ'}`,
]"
/>
</div>
@ -1936,11 +1968,11 @@ onMounted(() => {
? date2Thai(formBody.studyStartDate)
: null
"
:label="`${'วันเริ่มต้นการศึกษาดูงาน'}`"
:label="`${'วันเริ่มต้นการศึกษาดูงานในประเทศ'}`"
hide-bottom-space
:rules="[
(val: string) =>
!!val || `${'กรุณาเลือกวันเริ่มต้นการศึกษาดูงาน'}`,
!!val || `${'กรุณาเลือกวันเริ่มต้นการศึกษาดูงานในประเทศ'}`,
]"
>
<template v-slot:prepend>
@ -1986,11 +2018,11 @@ onMounted(() => {
? date2Thai(formBody.studyEndDate)
: null
"
:label="`${'วันสิ้นสุดการศึกษาดูงาน'}`"
:label="`${'วันสิ้นสุดการศึกษาดูงานในประเทศ'}`"
hide-bottom-space
:rules="[
(val: string) =>
!!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการศึกษาดูงาน'}`,
!!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการศึกษาดูงานในประเทศ'}`,
]"
>
<template v-slot:prepend>
@ -2012,12 +2044,12 @@ onMounted(() => {
outlined
lazy-rules
hide-bottom-space
label="ประเทศที่ไปศึกษาดูงาน"
label="ประเทศที่เดินทางไปศึกษาดูงาน"
class="inputgreen"
v-model="formBody.studyCountry"
:rules="[
(val: string) =>
!!val || `${'กรุณากรอประเทศที่ไปศึกษาดูงาน'}`,
!!val || `${'กรุณากรอประเทศที่เดินทางไปศึกษาดูงาน'}`,
]"
/>
</div>
@ -2147,6 +2179,217 @@ onMounted(() => {
</div>
</div>
</div>
<!-- เลอกท 5 -->
<div
class="col-12"
v-else-if="formBody.scholarshipType === 'RESEARCH'"
>
<div class="row q-col-gutter-md">
<div class="col-3">
<q-select
dense
outlined
lazy-rules
hide-bottom-space
class="inputgreen"
label="ประเภทการพัฒนา"
v-model="formBody.studyTopic"
:options="[
'ศึกษา',
'ฝึกอบรม',
'ประชุม',
'ดูงาน',
'ปฏิบัติการวิจัย',
]"
:rules="[
(val: string) =>
!!val || `${'กรุณากรอกประเภทการพัฒนา'}`,
]"
/>
</div>
<div class="col-3">
<q-input
dense
outlined
lazy-rules
hide-bottom-space
label="ระดับปริญญา"
class="inputgreen"
v-model="formBody.degreeLevel"
:rules="[
(val: string) =>
!!val || `${'กรุณากรอกระดับปริญญา'}`,
]"
/>
</div>
<div class="col-6">
<q-input
dense
outlined
lazy-rules
hide-bottom-space
class="inputgreen"
label="หลักสูตรการฝึกอบรม"
v-model="formBody.course"
:rules="[
(val: string) =>
!!val || `${'กรุณากรอกหลักสูตรการฝึกอบรม'}`,
]"
/>
</div>
<div class="col-3">
<q-input
dense
outlined
lazy-rules
hide-bottom-space
label="สาขาวิชา"
class="inputgreen"
v-model="formBody.field"
:rules="[
(val: string) =>
!!val || `${'กรุณากรอกสาขาวิชา'}`,
]"
/>
</div>
<div class="col-3">
<q-input
dense
outlined
lazy-rules
hide-bottom-space
label="คณะ"
class="inputgreen"
v-model="formBody.faculty"
:rules="[
(val: string) =>
!!val || `${'กรุณากรอกคณะ'}`,
]"
/>
</div>
<div class="col-6">
<q-input
dense
outlined
lazy-rules
hide-bottom-space
label="สถาบันการศึกษา/หน่วยงานผู้จัด"
class="inputgreen"
v-model="formBody.studyPlace"
:rules="[
(val: string) =>
!!val || `${'กรุณากรอกสถาบันการศึกษา/หน่วยงานผู้จัด'}`,
]"
/>
</div>
<div class="col-3">
<datepicker
menu-class-name="modalfix"
v-model="formBody.startDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
@update:model-value="changeStartDate('startDate')"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
outlined
class="inputgreen"
:model-value="
formBody.startDate
? date2Thai(formBody.startDate)
: null
"
:label="`${'วันเริ่มต้นการฝึกอบรม'}`"
hide-bottom-space
:rules="[
(val: string) =>
!!val || `${'กรุณาเลือกวันเริ่มต้นการฝึกอบรม'}`,
]"
>
<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-3">
<datepicker
menu-class-name="modalfix"
v-model="formBody.endDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
:min-date="formBody.startDate"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
outlined
class="inputgreen"
:model-value="
formBody.endDate ? date2Thai(formBody.endDate) : null
"
:label="`${'วันสิ้นสุดการฝึกอบรม'}`"
hide-bottom-space
:rules="[
(val: string) =>
!!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการฝึกอบรม'}`,
]"
>
<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-6">
<q-input
dense
outlined
lazy-rules
hide-bottom-space
label="ประเทศที่ไปศึกษา ฝึกอบรม ประชุม ดูงาน และปฏิบัติการวิจัย"
class="inputgreen"
v-model="formBody.studyCountry"
:rules="[
(val: string) =>
!!val || `${'กรุณากรอกประเทศที่ไปศึกษา ฝึกอบรม ประชุม ดูงาน และปฏิบัติการวิจัย'}`,
]"
/>
</div>
</div>
</div>
</div>
</div>
@ -2276,12 +2519,12 @@ onMounted(() => {
outlined
lazy-rules
hide-bottom-space
label="สถานที่ไปศึกษาดูงาน"
label="สถานที่ไปศึกษาดูงานในประเทศ"
class="inputgreen"
v-model="formBody.studyPlace"
:rules="[
(val: string) =>
!!val || `${'กรุณากรอกสถานที่ไปศึกษาดูงาน'}`,
!!val || `${'กรุณากรอกสถานที่ไปศึกษาดูงานในประเทศ'}`,
]"
/>
</div>
@ -2291,12 +2534,12 @@ onMounted(() => {
outlined
lazy-rules
hide-bottom-space
label="หัวข้อการไปศึกษาดูงาน"
label="หัวข้อการไปศึกษาดูงานในประเทศ"
class="inputgreen"
v-model="formBody.studyTopic"
:rules="[
(val: string) =>
!!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงาน'}`,
!!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงานในประเทศ'}`,
]"
/>
</div>
@ -2324,11 +2567,11 @@ onMounted(() => {
? date2Thai(formBody.studyStartDate)
: null
"
:label="`${'วันเริ่มต้นการศึกษาดูงาน'}`"
:label="`${'วันเริ่มต้นการศึกษาดูงานในประเทศ'}`"
hide-bottom-space
:rules="[
(val: string) =>
!!val || `${'กรุณาเลือกวันเริ่มต้นการศึกษาดูงาน'}`,
!!val || `${'กรุณาเลือกวันเริ่มต้นการศึกษาดูงานในประเทศ'}`,
]"
>
<template v-slot:prepend>
@ -2373,11 +2616,11 @@ onMounted(() => {
? date2Thai(formBody.studyEndDate)
: null
"
:label="`${'วันสิ้นสุดการศึกษาดูงาน'}`"
:label="`${'วันสิ้นสุดการศึกษาดูงานในประเทศ'}`"
hide-bottom-space
:rules="[
(val: string) =>
!!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการศึกษาดูงาน'}`,
!!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการศึกษาดูงานในประเทศ'}`,
]"
>
<template v-slot:prepend>
@ -2521,12 +2764,12 @@ onMounted(() => {
outlined
lazy-rules
hide-bottom-space
label="รวมระยะเวลาในการศึกษา"
label="รวมระยะเวลาในการฝึกอบรม "
class="inputgreen"
v-model="formBody.totalPeriod"
:rules="[
(val: string) =>
!!val || `${'กรุณากรอกรวมระยะเวลาในการศึกษา'}`,
!!val || `${'กรุณากรอกรวมระยะเวลาในการฝึกอบรม '}`,
]"
/>
</div>