2550 lines
101 KiB
Vue
2550 lines
101 KiB
Vue
<script setup lang="ts">
|
|
import { ref, reactive, onMounted } from "vue";
|
|
import { useQuasar } from "quasar";
|
|
import { useRouter, useRoute } from "vue-router";
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
|
|
import type {
|
|
DataOption,
|
|
DataPerson,
|
|
} from "@/modules/15_development/interface/index/Main";
|
|
import type { FormsSholarship } from "@/modules/15_development/interface/request/Scholarship";
|
|
import type { DataSholarship } from "@/modules/15_development/interface/response/Scholarship";
|
|
|
|
import DialogGov from "@/modules/15_development/components/history/DialogGov.vue";
|
|
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
|
|
const $q = useQuasar();
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const {
|
|
dialogConfirm,
|
|
showLoader,
|
|
hideLoader,
|
|
messageError,
|
|
success,
|
|
date2Thai,
|
|
calculateDurationYmd,
|
|
} = useCounterMixin();
|
|
|
|
const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม");
|
|
const scholarshipId = ref<string | null>(
|
|
route.params.id ? route.params.id.toLocaleString() : null
|
|
);
|
|
const isStatus = ref<string>("");
|
|
const modalDialogGov = ref<boolean>(false);
|
|
|
|
const budgetSourceOp = ref<DataOption[]>([
|
|
{ id: "BKK", name: "งบประมาณ กทม." },
|
|
{ id: "HOSPITAL", name: "เงินบำรุงโรงพยาบาล" },
|
|
{ id: "FUND", name: "เงินกองทุน" },
|
|
{ id: "SUBSIDY", name: "เงินอุดหนุน" },
|
|
{ id: "OTHER", name: "เงินอื่น ๆ" },
|
|
]);
|
|
|
|
const scholarshipTypeOp = ref<DataOption[]>([
|
|
{ id: "DOMESTICE", name: "การศึกษาในประเทศ" },
|
|
{
|
|
id: "NOABROAD",
|
|
name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่ไม่มีการไปต่างประเทศ)",
|
|
},
|
|
{
|
|
id: "ABROAD",
|
|
name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่มีการไปต่างประเทศ)",
|
|
},
|
|
{
|
|
id: "EXECUTIVE",
|
|
name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรประเภทนักบริหาร)",
|
|
},
|
|
]);
|
|
const fundTypeOp = ref<DataOption[]>([
|
|
{ id: "FUND1", name: "ทุน 1 (ก)" },
|
|
{ id: "FUND2", name: "ทุน 1 (ข)" },
|
|
{ id: "FUND3", name: "ทุน 1 (ค)" },
|
|
{ id: "FUND4", name: "ทุน 2" },
|
|
{ id: "FUND5", name: "ทุนส่วนตัว" },
|
|
]);
|
|
|
|
const isGov = ref<boolean>(false);
|
|
const isGuarantor = ref<boolean>(false);
|
|
const isSelectGov = ref<boolean>(false);
|
|
const dataPerson = reactive({
|
|
id: "",
|
|
citizenId: "",
|
|
name: "",
|
|
position: "",
|
|
type: "",
|
|
level: "",
|
|
positionSide: "",
|
|
org: "-",
|
|
});
|
|
const dataGuarantor = reactive({
|
|
id: "",
|
|
citizenId: "",
|
|
name: "",
|
|
position: "",
|
|
type: "",
|
|
level: "",
|
|
positionSide: "",
|
|
org: "-",
|
|
});
|
|
|
|
const formBody = reactive<FormsSholarship>({
|
|
profileId: "",
|
|
rank: "", //ยศ
|
|
prefix: "", //คำนำหน้าชื่อ
|
|
firstName: "", //ชื่อ
|
|
lastName: "", //นามสกุล
|
|
citizenId: "", //เลขประจำตัวประชาชน
|
|
position: "", //ตำแหน่ง
|
|
posExecutive: "", //ชื่อตำแหน่งทางการบริหาร
|
|
posLevelId: null, //ไอดีระดับตำแหน่ง
|
|
posTypeId: null, //ไอดีประเภทตำแหน่ง
|
|
guarantorRank: "", //ยศ(ผู้ค้ำ)
|
|
guarantorPrefix: "", //คำนำหน้าชื่อ(ผู้ค้ำ)
|
|
guarantorFirstName: "", //ชื่อ(ผู้ค้ำ)
|
|
guarantorLastName: "", //นามสกุล(ผู้ค้ำ)
|
|
guarantorCitizenId: "", //เลขประจำตัวประชาชน(ผู้ค้ำ)
|
|
guarantorPosition: "", //ตำแหน่ง(ผู้ค้ำ)
|
|
guarantorPosExecutive: "", //ชื่อตำแหน่งทางการบริหาร(ผู้ค้ำ)
|
|
posLevelguarantorId: null, //ไอดีระดับตำแหน่ง(ผู้ค้ำ)
|
|
posTypeguarantorId: null, //ไอดีประเภทตำแหน่ง(ผู้ค้ำ)
|
|
scholarshipYear: null, //ปีงบประมาณที่ได้รับทุน
|
|
budgetSource: "", //แหล่งงบประมาณ
|
|
budgetApprove: null, //งบประมาณที่ได้รับอนุมัติตลอดหลักสูตร
|
|
bookNo: "", //เลขที่หนังสืออนุมัติ
|
|
bookNoDate: null, //ลงวันที่(หนังสือ)
|
|
bookApproveDate: null, //หนังสืออนุมัติเมื่อวันที่
|
|
useOfficialTime: false, //ใช้เวลาราชการ
|
|
changeDetail: "", //เปลี่ยนแปลงรายละเอียด
|
|
scholarshipType: "", //เลือกประเภททุน
|
|
fundType: "", //ประเภททุน
|
|
contractNo: "", //เลขที่สัญญา
|
|
contractDate: null, //ลงวันที่(เลขที่สัญญา)
|
|
reportBackNo: "", //เลขที่หนังสือรายงานตัวกลับ
|
|
reportBackNoDate: null, //ลงวันที่(เลขที่หนังสือรายงานตัวกลับ)
|
|
reportBackDate: null, //รายงานตัวกลับวันที่
|
|
degreeLevel: "", //ระดับปริญญา
|
|
course: "", //หลักสูตรการศึกษา/หลักสูตรการฝึกอบรม
|
|
field: "", //สาขาวิชา/สาขา
|
|
faculty: "", //คณะ
|
|
educationalInstitution: "", //สถาบันการศึกษา/สถาบันการศึกษา_หน่วยงานผู้จัดการฝึกอบรม/สถานที่ไปศึกษาดูงานในประเทศ
|
|
startDate: null, //วันเริ่มต้นการศึกษา/วันเริ่มต้นการฝึกอบรม/วันเริ่มต้นการศึกษาดูงานในประเทศ
|
|
endDate: null, //วันสิ้นสุดการศึกษา/วันสิ้นสุดการฝึกอบรม/วันสิ้นสุดการศึกษาดูงานในประเทศ
|
|
studyPlace: "", //สถานที่ไปศึกษาดูงาน
|
|
studyTopic: "", //หัวข้อการไปศึกษาดูงาน/หัวข้อการไปศึกษาดูงานในประเทศ
|
|
studyStartDate: null, //วันเริ่มต้นการศึกษาดูงาน
|
|
studyEndDate: null, //วันสิ้นสุดการศึกษาดูงาน
|
|
studyCountry: "", //ประเทศที่ไปศึกษาดูงาน
|
|
studyAbroadTopic: "", //หัวข้อการไปศึกษาดูงานต่างประเทศ
|
|
studyAbroadStartDate: null, //วันเริ่มต้นการศึกษาดูงานต่างประเทศ
|
|
studyAbroadEndDate: null, //วันสิ้นสุดการศึกษาดูงานต่างประเทศ
|
|
totalPeriod: "", //รวมระยะเวลาในการศึกษา/รวมระยะเวลาในการฝึกอบรม
|
|
planType: "",
|
|
isNoUseBudget: false,
|
|
});
|
|
|
|
function fetchDataDetail(id: string) {
|
|
showLoader();
|
|
http
|
|
.get(config.API.devScholarshipByid(id))
|
|
.then((res) => {
|
|
const data: DataSholarship = res.data.result;
|
|
console.log(data);
|
|
formBody.rank = data.rank;
|
|
formBody.prefix = data.prefix;
|
|
formBody.firstName = data.firstName;
|
|
formBody.lastName = data.lastName;
|
|
formBody.citizenId = data.citizenId;
|
|
formBody.position = data.position;
|
|
formBody.posExecutive = data.posExecutive;
|
|
formBody.posLevelId = data.posLevelId;
|
|
formBody.posTypeId = data.posTypeId;
|
|
formBody.guarantorRank = data.guarantorRank;
|
|
formBody.guarantorPrefix = data.guarantorPrefix;
|
|
formBody.guarantorFirstName = data.guarantorFirstName;
|
|
formBody.guarantorLastName = data.guarantorLastName;
|
|
formBody.guarantorCitizenId = data.guarantorCitizenId;
|
|
formBody.guarantorPosition = data.guarantorPosition;
|
|
formBody.guarantorPosExecutive = data.guarantorPosExecutive;
|
|
formBody.posLevelguarantorId = data.posLevelguarantorId;
|
|
formBody.posTypeguarantorId = data.posTypeguarantorId;
|
|
formBody.scholarshipYear = data.scholarshipYear;
|
|
formBody.budgetSource = data.budgetSource;
|
|
formBody.budgetApprove = data.budgetApprove;
|
|
formBody.bookNo = data.bookNo;
|
|
formBody.bookNoDate = data.bookNoDate;
|
|
formBody.bookApproveDate = data.bookApproveDate;
|
|
formBody.useOfficialTime = data.useOfficialTime
|
|
? data.useOfficialTime
|
|
: false;
|
|
formBody.changeDetail = data.changeDetail;
|
|
formBody.scholarshipType = data.scholarshipType;
|
|
formBody.fundType = data.fundType;
|
|
formBody.contractNo = data.contractNo;
|
|
formBody.contractDate = data.contractDate;
|
|
formBody.reportBackNo = data.reportBackNo;
|
|
formBody.reportBackNoDate = data.reportBackNoDate;
|
|
formBody.reportBackDate = data.reportBackDate;
|
|
|
|
formBody.degreeLevel = data.degreeLevel;
|
|
formBody.course = data.course;
|
|
formBody.field = data.field;
|
|
formBody.faculty = data.faculty;
|
|
formBody.educationalInstitution = data.educationalInstitution;
|
|
formBody.startDate = data.startDate;
|
|
formBody.endDate = data.endDate;
|
|
formBody.studyPlace = data.studyPlace;
|
|
formBody.studyTopic = data.studyTopic;
|
|
formBody.studyStartDate = data.studyStartDate;
|
|
formBody.studyEndDate = data.studyEndDate;
|
|
formBody.studyCountry = data.studyCountry;
|
|
formBody.studyAbroadTopic = data.studyAbroadTopic;
|
|
formBody.studyAbroadStartDate = data.studyAbroadStartDate;
|
|
formBody.studyAbroadEndDate = data.studyAbroadEndDate;
|
|
formBody.totalPeriod = data.totalPeriod;
|
|
formBody.planType = data.planType ? data.planType : "";
|
|
formBody.isNoUseBudget = data.isNoUseBudget ? data.isNoUseBudget : false;
|
|
|
|
dataPerson.citizenId = data.citizenId ? data.citizenId : "-";
|
|
dataPerson.name = `${data.prefix}${data.firstName} ${data.lastName}`;
|
|
dataPerson.position = data.position ? data.position : "-";
|
|
dataPerson.type = data.posTypeName ? data.posTypeName : "-";
|
|
dataPerson.level = data.posLevelName ? data.posLevelName : "-";
|
|
dataPerson.positionSide = data.posExecutive ? data.posExecutive : "-";
|
|
|
|
dataGuarantor.citizenId = data.guarantorCitizenId
|
|
? data.guarantorCitizenId
|
|
: "-";
|
|
dataGuarantor.name = `${data.guarantorPrefix} ${data.guarantorFirstName} ${data.guarantorLastName}`;
|
|
dataGuarantor.position = data.position ? data.position : "-";
|
|
dataGuarantor.type = data.posTypeguarantorName
|
|
? data.posTypeguarantorName
|
|
: "-";
|
|
dataGuarantor.level = data.posLevelguarantorName
|
|
? data.posLevelguarantorName
|
|
: "-";
|
|
dataGuarantor.positionSide = data.guarantorPosExecutive
|
|
? data.guarantorPosExecutive
|
|
: "-";
|
|
isStatus.value = data.status;
|
|
isGov.value = data.citizenId ? true : false;
|
|
isGuarantor.value = data.guarantorCitizenId ? true : false;
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
function onSubmit() {
|
|
dialogConfirm($q, async () => {
|
|
showLoader();
|
|
formBody.budgetApprove =
|
|
typeof formBody.budgetApprove === "string"
|
|
? Number(formBody.budgetApprove.replace(/,/g, ""))
|
|
: formBody.budgetApprove;
|
|
try {
|
|
const url = scholarshipId.value
|
|
? config.API.devScholarshipByid(scholarshipId.value)
|
|
: config.API.devScholarship;
|
|
const method = scholarshipId.value ? "put" : "post";
|
|
await http[method](url, formBody);
|
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
|
|
scholarshipId.value
|
|
? fetchDataDetail(scholarshipId.value)
|
|
: router.push("/development/scholarship");
|
|
} catch (e) {
|
|
messageError($q, e);
|
|
} finally {
|
|
hideLoader();
|
|
}
|
|
});
|
|
}
|
|
|
|
function changeStartDate(type: string) {
|
|
switch (type) {
|
|
case "startDate":
|
|
if (formBody?.startDate !== null && formBody?.endDate !== null) {
|
|
const startDate = new Date(formBody.startDate);
|
|
const endDate = new Date(formBody?.endDate);
|
|
if (startDate > endDate) {
|
|
formBody.endDate = null;
|
|
}
|
|
}
|
|
break;
|
|
|
|
case "studyStartDate":
|
|
if (
|
|
formBody?.studyStartDate !== null &&
|
|
formBody?.studyEndDate !== null
|
|
) {
|
|
const startDate = new Date(formBody.studyStartDate);
|
|
const endDate = new Date(formBody?.studyEndDate);
|
|
if (startDate > endDate) {
|
|
formBody.studyEndDate = null;
|
|
if (formBody.scholarshipType === "NOABROAD") {
|
|
formBody.totalPeriod = "";
|
|
}
|
|
} else {
|
|
if (formBody.scholarshipType === "NOABROAD") {
|
|
formBody.totalPeriod = calculateDurationYmd(startDate, endDate);
|
|
}
|
|
}
|
|
}
|
|
break;
|
|
|
|
case "studyAbroadStartDate":
|
|
if (
|
|
formBody?.studyAbroadStartDate !== null &&
|
|
formBody?.studyAbroadEndDate !== null
|
|
) {
|
|
const startDate = new Date(formBody.studyAbroadStartDate);
|
|
const endDate = new Date(formBody?.studyAbroadEndDate);
|
|
if (startDate > endDate) {
|
|
formBody.studyAbroadEndDate = null;
|
|
} else {
|
|
formBody.totalPeriod = calculateDurationYmd(startDate, endDate);
|
|
}
|
|
}
|
|
break;
|
|
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
|
|
function onClickUpdateStatus(type: string) {
|
|
dialogConfirm($q, () => {
|
|
if (scholarshipId.value) {
|
|
showLoader();
|
|
http
|
|
.get(config.API.devScholarshipStatus(scholarshipId.value, type))
|
|
.then(() => {
|
|
if (scholarshipId.value) {
|
|
fetchDataDetail(scholarshipId.value);
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
function updateTotalPeriod(
|
|
startDate: any,
|
|
endDate: any,
|
|
toDo: boolean = false
|
|
) {
|
|
if (!toDo && startDate && endDate) {
|
|
const start = new Date(startDate);
|
|
const end = new Date(endDate);
|
|
formBody.totalPeriod = calculateDurationYmd(start, end);
|
|
}
|
|
}
|
|
|
|
function onSelectGov(isGov: boolean) {
|
|
isSelectGov.value = isGov;
|
|
modalDialogGov.value = true;
|
|
}
|
|
|
|
function upDate(data: DataPerson) {
|
|
if (isSelectGov.value) {
|
|
console.log(data);
|
|
formBody.profileId = data.id;
|
|
formBody.rank = data.rank;
|
|
formBody.prefix = data.prefix;
|
|
formBody.firstName = data.firstName;
|
|
formBody.lastName = data.lastName;
|
|
formBody.citizenId = data.citizenId;
|
|
formBody.position = data.position;
|
|
formBody.posTypeId = data.posTypeId;
|
|
formBody.posLevelId = data.posLevelId;
|
|
formBody.posExecutive = data.positionSide;
|
|
|
|
dataPerson.id = data.id ? data.id : "-";
|
|
dataPerson.citizenId = data.citizenId ? data.citizenId : "-";
|
|
dataPerson.name = data.name ? data.name : "-";
|
|
dataPerson.position = data.position ? data.position : "-";
|
|
dataPerson.type = data.type ? data.type : "-";
|
|
dataPerson.level = data.level ? data.level : "-";
|
|
dataPerson.positionSide = data.positionSide ? data.positionSide : "-";
|
|
isGov.value = true;
|
|
} else {
|
|
formBody.guarantorRank = data.rank;
|
|
formBody.guarantorPrefix = data.prefix;
|
|
formBody.guarantorFirstName = data.firstName;
|
|
formBody.guarantorLastName = data.lastName;
|
|
formBody.guarantorCitizenId = data.citizenId;
|
|
formBody.guarantorPosition = data.position;
|
|
formBody.posTypeguarantorId = data.posTypeId;
|
|
formBody.posLevelguarantorId = data.posLevelId;
|
|
formBody.guarantorPosExecutive = data.positionSide;
|
|
|
|
dataGuarantor.id = data.id ? data.id : "-";
|
|
dataGuarantor.citizenId = data.citizenId ? data.citizenId : "-";
|
|
dataGuarantor.name = data.name ? data.name : "-";
|
|
dataGuarantor.position = data.position ? data.position : "-";
|
|
dataGuarantor.type = data.type ? data.type : "-";
|
|
dataGuarantor.level = data.level ? data.level : "-";
|
|
dataGuarantor.positionSide = data.positionSide ? data.positionSide : "-";
|
|
|
|
isGuarantor.value = true;
|
|
}
|
|
}
|
|
|
|
const fileBackReceived = ref<string>("");
|
|
async function checkFileBackReceived(id: string) {
|
|
showLoader();
|
|
await http
|
|
.get(
|
|
config.API.file("ระบบพัฒนาบุคคล", "ฟอร์มรายงานตัวกลับเข้ารับราชการ", id)
|
|
)
|
|
.then(async (res) => {
|
|
fileBackReceived.value = res.data.length > 0 ? res.data[0].fileName : "";
|
|
})
|
|
.catch(() => {})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
function downloadFileBackReceived() {
|
|
showLoader();
|
|
http
|
|
.get(
|
|
config.API.fileByFile(
|
|
"ระบบพัฒนาบุคคล",
|
|
"ฟอร์มรายงานตัวกลับเข้ารับราชการ",
|
|
id,
|
|
fileBackReceived.value
|
|
)
|
|
)
|
|
.then((res) => {
|
|
const data = res.data.downloadUrl;
|
|
window.open(data, "_blank");
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(async () => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
onMounted(() => {
|
|
if (scholarshipId.value) {
|
|
fetchDataDetail(scholarshipId.value);
|
|
checkFileBackReceived(scholarshipId.value);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="row items-center">
|
|
<div class="toptitle text-dark items-center">
|
|
<q-btn
|
|
flat
|
|
round
|
|
dense
|
|
class="q-mr-sm"
|
|
icon="mdi-arrow-left"
|
|
color="primary"
|
|
@click="router.go(-1)"
|
|
/>
|
|
{{ `${title}ข้าราชการฯที่ได้รับทุนการศึกษา/ฝึกอบรม` }}
|
|
</div>
|
|
<q-space />
|
|
<q-btn
|
|
v-if="fileBackReceived != ''"
|
|
flat
|
|
round
|
|
dense
|
|
icon="download"
|
|
color="blue"
|
|
@click="downloadFileBackReceived()"
|
|
>
|
|
<q-tooltip>ดาวน์โหลด</q-tooltip>
|
|
</q-btn>
|
|
<div class="row q-ml-md" v-if="scholarshipId">
|
|
<div class="q-gutter-sm" v-if="isStatus === 'PENDING'">
|
|
<q-btn
|
|
unelevated
|
|
color="green"
|
|
label="สำเร็จการศึกษา"
|
|
@click="onClickUpdateStatus('GRADUATE')"
|
|
/>
|
|
<q-btn
|
|
unelevated
|
|
color="red"
|
|
label="ไม่จบการศึกษา"
|
|
@click="onClickUpdateStatus('NOTGRADUATE')"
|
|
/>
|
|
</div>
|
|
<div :class="isStatus === 'GRADUATE' ? 'text-green' : 'text-red'" v-else>
|
|
{{ isStatus === "GRADUATE" ? "สำเร็จการศึกษา" : "ไม่จบการศึกษา" }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
|
<q-card flat bordered class="col-12">
|
|
<div class="q-pa-md">
|
|
<q-card bordered tyle="border: 1px solid #d6dee1">
|
|
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
|
|
ข้อมูลราชการ
|
|
<q-btn
|
|
flat
|
|
dense
|
|
icon="add"
|
|
color="primary"
|
|
label="เลือกข้าราชการ"
|
|
@click="onSelectGov(true)"
|
|
>
|
|
<q-tooltip>เพิ่ม</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
<div class="col-12"><q-separator /></div>
|
|
<div class="row col-12 q-col-gutter-md q-pa-md" v-if="isGov">
|
|
<div class="col">
|
|
<div class="row q-col-gutter-md">
|
|
<div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
|
|
<div class="col-8 text-weight-medium">
|
|
{{ dataPerson.citizenId }}
|
|
</div>
|
|
<div class="col-4 text-grey">ชื่อ-นามสกุล</div>
|
|
<div class="col-8 text-weight-medium">
|
|
{{ dataPerson.name }}
|
|
</div>
|
|
<div class="col-4 text-grey">ตำแหน่ง</div>
|
|
<div class="col-8 text-weight-medium">
|
|
{{ dataPerson.position }}
|
|
</div>
|
|
<div class="col-4 text-grey">ประเภท</div>
|
|
<div class="col-8 text-weight-medium">
|
|
{{ dataPerson.type }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="row q-col-gutter-md">
|
|
<div class="col-4 text-grey">ระดับตำแหน่ง</div>
|
|
<div class="col-8 text-weight-medium">
|
|
{{ dataPerson.level }}
|
|
</div>
|
|
<div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
|
|
<div class="col-8 text-weight-medium">
|
|
{{ dataPerson.positionSide }}
|
|
</div>
|
|
<div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
|
|
<div class="col-8 text-weight-medium">{{ dataPerson.org }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row col-12 q-pa-md" v-else>
|
|
<q-banner class="bg-grey-3 text-black col-12 text-center">
|
|
เลือกข้าราชการ
|
|
</q-banner>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
<div class="row q-col-gutter-md q-pa-md" v-if="isGov">
|
|
<div class="col-12">
|
|
<q-radio
|
|
v-model="formBody.planType"
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
val="INPLAN"
|
|
label="ในแผนฯ"
|
|
dense
|
|
/>
|
|
<q-radio
|
|
v-model="formBody.planType"
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
val="OUTPLAN"
|
|
label="นอกแผนฯ"
|
|
dense
|
|
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="[
|
|
(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="[
|
|
(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: 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="[
|
|
(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="[
|
|
(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="[
|
|
(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-checkbox
|
|
keep-color
|
|
color="primary"
|
|
v-model="formBody.useOfficialTime"
|
|
label="ใช้เวลาราชการ"
|
|
/>
|
|
</div>
|
|
<div class="col-12">
|
|
<q-input
|
|
outlined
|
|
dense
|
|
class="inputgreen"
|
|
v-model="formBody.changeDetail"
|
|
label="เปลี่ยนแปลงรายละเอียด"
|
|
rows="3"
|
|
hide-bottom-space
|
|
type="textarea"
|
|
:rules="[
|
|
(val: string) =>
|
|
!!val || `${'กรุณากรอกเปลี่ยนแปลงรายละเอียด'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
<div class="col-9">
|
|
<q-select
|
|
dense
|
|
outlined
|
|
hide-bottom-space
|
|
lazy-rules
|
|
v-model="formBody.scholarshipType"
|
|
:options="scholarshipTypeOp"
|
|
option-label="name"
|
|
option-value="id"
|
|
emit-value
|
|
map-options
|
|
class="inputgreen"
|
|
label="เลือกประเภททุน"
|
|
:rules="[
|
|
(val: string) =>
|
|
!!val || `${'กรุณาเลือกประเภททุน'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="col-3"
|
|
v-if="
|
|
formBody.scholarshipType !== '' &&
|
|
formBody.scholarshipType !== 'EXECUTIVE'
|
|
"
|
|
>
|
|
<q-select
|
|
dense
|
|
outlined
|
|
hide-bottom-space
|
|
lazy-rules
|
|
class="inputgreen"
|
|
v-model="formBody.fundType"
|
|
:options="fundTypeOp"
|
|
option-label="name"
|
|
option-value="id"
|
|
emit-value
|
|
map-options
|
|
label="ประเภททุน"
|
|
:rules="[
|
|
(val: string) =>
|
|
!!val || `${'กรุณาเลือกประเภททุน'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="col-12"
|
|
v-if="
|
|
formBody.scholarshipType !== '' &&
|
|
formBody.scholarshipType !== 'EXECUTIVE'
|
|
"
|
|
>
|
|
<div class="row col-12 q-col-gutter-md">
|
|
<div class="col-3">
|
|
<q-input
|
|
dense
|
|
outlined
|
|
lazy-rules
|
|
hide-bottom-space
|
|
label="เลขที่สัญญา"
|
|
class="inputgreen"
|
|
v-model="formBody.contractNo"
|
|
:rules="[
|
|
(val: string) =>
|
|
!!val || `${'กรุณากรอกเลขที่สัญญา'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
<div class="col-2">
|
|
<datepicker
|
|
menu-class-name="modalfix"
|
|
v-model="formBody.contractDate"
|
|
:locale="'th'"
|
|
autoApply
|
|
>
|
|
<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.contractDate
|
|
? date2Thai(formBody.contractDate)
|
|
: 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">
|
|
<q-input
|
|
dense
|
|
outlined
|
|
hide-bottom-space
|
|
lazy-rules
|
|
class="inputgreen"
|
|
v-model="formBody.reportBackNo"
|
|
label="เลขที่หนังสือรายงานตัวกลับ"
|
|
:rules="[
|
|
(val: string) => !!val || `${'กรุณากรอกเลขที่หนังสือรายงานตัวกลับ'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
<div class="col-2">
|
|
<datepicker
|
|
menu-class-name="modalfix"
|
|
v-model="formBody.reportBackNoDate"
|
|
: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.reportBackNoDate
|
|
? date2Thai(formBody.reportBackNoDate)
|
|
: 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-2">
|
|
<datepicker
|
|
menu-class-name="modalfix"
|
|
v-model="formBody.reportBackDate"
|
|
: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.reportBackDate
|
|
? date2Thai(formBody.reportBackDate)
|
|
: 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-12">
|
|
<q-card bordered tyle="border: 1px solid #d6dee1">
|
|
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
|
|
ข้อมูลผู้ค้ำประกัน
|
|
<q-btn
|
|
flat
|
|
dense
|
|
icon="add"
|
|
color="primary"
|
|
label="เลือกผู้ค้ำประกัน"
|
|
@click="onSelectGov(false)"
|
|
>
|
|
<q-tooltip>เพิ่ม</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
<div class="col-12"><q-separator /></div>
|
|
<div
|
|
class="row col-12 q-col-gutter-md q-pa-md"
|
|
v-if="isGuarantor"
|
|
>
|
|
<div class="col">
|
|
<div class="row q-col-gutter-md">
|
|
<div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
|
|
<div class="col-8 text-weight-medium">
|
|
{{ dataGuarantor.citizenId }}
|
|
</div>
|
|
<div class="col-4 text-grey">ชื่อ-นามสกุล</div>
|
|
<div class="col-8 text-weight-medium">
|
|
{{ dataGuarantor.name }}
|
|
</div>
|
|
<div class="col-4 text-grey">ตำแหน่ง</div>
|
|
<div class="col-8 text-weight-medium">
|
|
{{ dataGuarantor.position }}
|
|
</div>
|
|
<div class="col-4 text-grey">ประเภท</div>
|
|
<div class="col-8 text-weight-medium">
|
|
{{ dataGuarantor.type }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="row q-col-gutter-md">
|
|
<div class="col-4 text-grey">ระดับตำแหน่ง</div>
|
|
<div class="col-8 text-weight-medium">
|
|
{{ dataGuarantor.level }}
|
|
</div>
|
|
<div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
|
|
<div class="col-8 text-weight-medium">
|
|
{{ dataGuarantor.positionSide }}
|
|
</div>
|
|
<div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
|
|
<div class="col-8 text-weight-medium">
|
|
{{ dataGuarantor.org }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
|
|
<!-- เลือกทุน 1 -->
|
|
<div class="col-12" v-if="formBody.scholarshipType === 'DOMESTICE'">
|
|
<div class="row q-col-gutter-md">
|
|
<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-3">
|
|
<q-input
|
|
dense
|
|
outlined
|
|
lazy-rules
|
|
hide-bottom-space
|
|
label="หลักสูตรการศึกษา"
|
|
class="inputgreen"
|
|
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.educationalInstitution"
|
|
: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.studyPlace"
|
|
:rules="[
|
|
(val: string) =>
|
|
!!val || `${'กรุณากรอกสถานที่ไปศึกษาดูงาน'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
<div class="col-6">
|
|
<q-input
|
|
dense
|
|
outlined
|
|
lazy-rules
|
|
hide-bottom-space
|
|
label="หัวข้อการไปศึกษาดูงาน"
|
|
class="inputgreen"
|
|
v-model="formBody.studyTopic"
|
|
:rules="[
|
|
(val: string) =>
|
|
!!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงาน'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
<div class="col-3">
|
|
<datepicker
|
|
menu-class-name="modalfix"
|
|
v-model="formBody.studyStartDate"
|
|
:locale="'th'"
|
|
autoApply
|
|
:enableTimePicker="false"
|
|
week-start="0"
|
|
@update:model-value="changeStartDate('studyStartDate')"
|
|
>
|
|
<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.studyStartDate
|
|
? date2Thai(formBody.studyStartDate)
|
|
: 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.studyEndDate"
|
|
:locale="'th'"
|
|
autoApply
|
|
:enableTimePicker="false"
|
|
week-start="0"
|
|
:min-date="formBody.studyStartDate"
|
|
>
|
|
<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.studyEndDate
|
|
? date2Thai(formBody.studyEndDate)
|
|
: 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"></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 class="col-6">
|
|
<q-input
|
|
dense
|
|
outlined
|
|
lazy-rules
|
|
hide-bottom-space
|
|
label="หัวข้อการไปศึกษาดูงานต่างประเทศ"
|
|
class="inputgreen"
|
|
v-model="formBody.studyAbroadTopic"
|
|
:rules="[
|
|
(val: string) =>
|
|
!!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงานต่างประเทศ'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
<div class="col-3">
|
|
<datepicker
|
|
menu-class-name="modalfix"
|
|
v-model="formBody.studyAbroadStartDate"
|
|
:locale="'th'"
|
|
autoApply
|
|
:enableTimePicker="false"
|
|
week-start="0"
|
|
@update:model-value="
|
|
changeStartDate('studyAbroadStartDate')
|
|
"
|
|
>
|
|
<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.studyAbroadStartDate
|
|
? date2Thai(formBody.studyAbroadStartDate)
|
|
: 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.studyAbroadEndDate"
|
|
:locale="'th'"
|
|
autoApply
|
|
:enableTimePicker="false"
|
|
week-start="0"
|
|
:min-date="formBody.studyAbroadStartDate"
|
|
@update:model-value="
|
|
updateTotalPeriod(
|
|
formBody.studyAbroadStartDate,
|
|
formBody.studyAbroadEndDate
|
|
)
|
|
"
|
|
>
|
|
<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.studyAbroadEndDate
|
|
? date2Thai(formBody.studyAbroadEndDate)
|
|
: 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">
|
|
<q-input
|
|
dense
|
|
outlined
|
|
lazy-rules
|
|
hide-bottom-space
|
|
label="รวมระยะเวลาในการศึกษา"
|
|
class="inputgreen"
|
|
v-model="formBody.totalPeriod"
|
|
:rules="[
|
|
(val: string) =>
|
|
!!val || `${'กรุณากรอกรวมระยะเวลาในการศึกษา'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- เลือกทุน 2 -->
|
|
<div
|
|
class="col-12"
|
|
v-else-if="formBody.scholarshipType === 'NOABROAD'"
|
|
>
|
|
<div class="row q-col-gutter-md">
|
|
<div class="col-6">
|
|
<q-input
|
|
dense
|
|
outlined
|
|
lazy-rules
|
|
hide-bottom-space
|
|
label="หลักสูตรการฝึกอบรม"
|
|
class="inputgreen"
|
|
v-model="formBody.course"
|
|
:rules="[
|
|
(val: string) =>
|
|
!!val || `${'กรุณากรอกหลักสูตรการฝึกอบรม'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
<div class="col-6">
|
|
<q-input
|
|
dense
|
|
outlined
|
|
lazy-rules
|
|
hide-bottom-space
|
|
label="สาขา"
|
|
class="inputgreen"
|
|
v-model="formBody.field"
|
|
:rules="[
|
|
(val: string) =>
|
|
!!val || `${'กรุณากรอกสาขา'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
<div class="col-6">
|
|
<q-input
|
|
dense
|
|
outlined
|
|
lazy-rules
|
|
hide-bottom-space
|
|
label="สถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม"
|
|
class="inputgreen"
|
|
v-model="formBody.educationalInstitution"
|
|
: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.studyPlace"
|
|
:rules="[
|
|
(val: string) =>
|
|
!!val || `${'กรุณากรอกสถานที่ไปศึกษาดูงาน'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
<div class="col-6">
|
|
<q-input
|
|
dense
|
|
outlined
|
|
lazy-rules
|
|
hide-bottom-space
|
|
label="หัวข้อการไปศึกษาดูงาน"
|
|
class="inputgreen"
|
|
v-model="formBody.studyTopic"
|
|
:rules="[
|
|
(val: string) =>
|
|
!!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงาน'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
<div class="col-3">
|
|
<datepicker
|
|
menu-class-name="modalfix"
|
|
v-model="formBody.studyStartDate"
|
|
:locale="'th'"
|
|
autoApply
|
|
:enableTimePicker="false"
|
|
week-start="0"
|
|
@update:model-value="changeStartDate('studyStartDate')"
|
|
>
|
|
<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.studyStartDate
|
|
? date2Thai(formBody.studyStartDate)
|
|
: 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.studyEndDate"
|
|
:locale="'th'"
|
|
autoApply
|
|
:enableTimePicker="false"
|
|
week-start="0"
|
|
:min-date="formBody.studyStartDate"
|
|
@update:model-value="
|
|
updateTotalPeriod(
|
|
formBody.studyStartDate,
|
|
formBody.studyEndDate
|
|
)
|
|
"
|
|
>
|
|
<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.studyEndDate
|
|
? date2Thai(formBody.studyEndDate)
|
|
: 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">
|
|
<q-input
|
|
dense
|
|
outlined
|
|
lazy-rules
|
|
hide-bottom-space
|
|
label="รวมระยะเวลาในการฝึกอบรม"
|
|
class="inputgreen"
|
|
v-model="formBody.totalPeriod"
|
|
:rules="[
|
|
(val: string) =>
|
|
!!val || `${'กรุณากรอกระยะเวลาในการฝึกอบรม'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- เลือกทุน 3 -->
|
|
<div
|
|
class="col-12"
|
|
v-else-if="formBody.scholarshipType === 'ABROAD'"
|
|
>
|
|
<div class="row q-col-gutter-md">
|
|
<div class="col-6">
|
|
<q-input
|
|
dense
|
|
outlined
|
|
lazy-rules
|
|
hide-bottom-space
|
|
label="หลักสูตรการฝึกอบรม"
|
|
class="inputgreen"
|
|
v-model="formBody.course"
|
|
:rules="[
|
|
(val: string) =>
|
|
!!val || `${'กรุณากรอกหลักสูตรการฝึกอบรม'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
<div class="col-6">
|
|
<q-input
|
|
dense
|
|
outlined
|
|
lazy-rules
|
|
hide-bottom-space
|
|
label="สาขา"
|
|
class="inputgreen"
|
|
v-model="formBody.field"
|
|
:rules="[
|
|
(val: string) =>
|
|
!!val || `${'กรุณากรอกสาขา'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
<div class="col-6">
|
|
<q-input
|
|
dense
|
|
outlined
|
|
lazy-rules
|
|
hide-bottom-space
|
|
label="สถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม"
|
|
class="inputgreen"
|
|
v-model="formBody.educationalInstitution"
|
|
: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.studyPlace"
|
|
:rules="[
|
|
(val: string) =>
|
|
!!val || `${'กรุณากรอกสถานที่ไปศึกษาดูงาน'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
<div class="col-6">
|
|
<q-input
|
|
dense
|
|
outlined
|
|
lazy-rules
|
|
hide-bottom-space
|
|
label="หัวข้อการไปศึกษาดูงาน"
|
|
class="inputgreen"
|
|
v-model="formBody.studyTopic"
|
|
:rules="[
|
|
(val: string) =>
|
|
!!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงาน'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
<div class="col-3">
|
|
<datepicker
|
|
menu-class-name="modalfix"
|
|
v-model="formBody.studyStartDate"
|
|
:locale="'th'"
|
|
autoApply
|
|
:enableTimePicker="false"
|
|
week-start="0"
|
|
@update:model-value="changeStartDate('studyStartDate')"
|
|
>
|
|
<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.studyStartDate
|
|
? date2Thai(formBody.studyStartDate)
|
|
: 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.studyEndDate"
|
|
:locale="'th'"
|
|
autoApply
|
|
:enableTimePicker="false"
|
|
week-start="0"
|
|
:min-date="formBody.studyStartDate"
|
|
@update:model-value="
|
|
updateTotalPeriod(
|
|
formBody.studyStartDate,
|
|
formBody.studyEndDate,
|
|
true
|
|
)
|
|
"
|
|
>
|
|
<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.studyEndDate
|
|
? date2Thai(formBody.studyEndDate)
|
|
: 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"></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 class="col-6">
|
|
<q-input
|
|
dense
|
|
outlined
|
|
lazy-rules
|
|
hide-bottom-space
|
|
label="หัวข้อการไปศึกษาดูงานต่างประเทศ"
|
|
class="inputgreen"
|
|
v-model="formBody.studyAbroadTopic"
|
|
:rules="[
|
|
(val: string) =>
|
|
!!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงานต่างประเทศ'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
<div class="col-3">
|
|
<datepicker
|
|
menu-class-name="modalfix"
|
|
v-model="formBody.studyAbroadStartDate"
|
|
:locale="'th'"
|
|
autoApply
|
|
:enableTimePicker="false"
|
|
week-start="0"
|
|
@update:model-value="
|
|
changeStartDate('studyAbroadStartDate')
|
|
"
|
|
>
|
|
<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.studyAbroadStartDate
|
|
? date2Thai(formBody.studyAbroadStartDate)
|
|
: 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.studyAbroadEndDate"
|
|
:locale="'th'"
|
|
autoApply
|
|
:enableTimePicker="false"
|
|
week-start="0"
|
|
:min-date="formBody.studyAbroadStartDate"
|
|
@update:model-value="
|
|
updateTotalPeriod(
|
|
formBody.studyAbroadStartDate,
|
|
formBody.studyAbroadEndDate
|
|
)
|
|
"
|
|
>
|
|
<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.studyAbroadEndDate
|
|
? date2Thai(formBody.studyAbroadEndDate)
|
|
: 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">
|
|
<q-input
|
|
dense
|
|
outlined
|
|
lazy-rules
|
|
hide-bottom-space
|
|
label="รวมระยะเวลาในการศึกษา"
|
|
class="inputgreen"
|
|
v-model="formBody.totalPeriod"
|
|
:rules="[
|
|
(val: string) =>
|
|
!!val || `${'กรุณากรอกรวมระยะเวลาในการศึกษา'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- เลือกทุน 4 -->
|
|
<div
|
|
class="col-12"
|
|
v-else-if="formBody.scholarshipType === 'EXECUTIVE'"
|
|
>
|
|
<div class="row q-col-gutter-md">
|
|
<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-6">
|
|
<q-input
|
|
dense
|
|
outlined
|
|
lazy-rules
|
|
hide-bottom-space
|
|
class="inputgreen"
|
|
label="สถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม"
|
|
v-model="formBody.educationalInstitution"
|
|
: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"></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-6">
|
|
<q-input
|
|
dense
|
|
outlined
|
|
lazy-rules
|
|
hide-bottom-space
|
|
label="หัวข้อการไปศึกษาดูงาน"
|
|
class="inputgreen"
|
|
v-model="formBody.studyTopic"
|
|
:rules="[
|
|
(val: string) =>
|
|
!!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงาน'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
<div class="col-3">
|
|
<datepicker
|
|
menu-class-name="modalfix"
|
|
v-model="formBody.studyStartDate"
|
|
:locale="'th'"
|
|
autoApply
|
|
:enableTimePicker="false"
|
|
week-start="0"
|
|
@update:model-value="changeStartDate('studyAbroadStartDate')"
|
|
>
|
|
<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.studyStartDate
|
|
? date2Thai(formBody.studyStartDate)
|
|
: 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.studyEndDate"
|
|
:locale="'th'"
|
|
autoApply
|
|
:enableTimePicker="false"
|
|
week-start="0"
|
|
:min-date="formBody.studyStartDate"
|
|
@update:model-value="
|
|
updateTotalPeriod(
|
|
formBody.studyStartDate,
|
|
formBody.studyEndDate
|
|
)
|
|
"
|
|
>
|
|
<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.studyEndDate
|
|
? date2Thai(formBody.studyEndDate)
|
|
: 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"></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 class="col-6">
|
|
<q-input
|
|
dense
|
|
outlined
|
|
lazy-rules
|
|
hide-bottom-space
|
|
label="หัวข้อการไปศึกษาดูงานต่างประเทศ"
|
|
class="inputgreen"
|
|
v-model="formBody.studyAbroadTopic"
|
|
:rules="[
|
|
(val: string) =>
|
|
!!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงานต่างประเทศ'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
<div class="col-3">
|
|
<datepicker
|
|
menu-class-name="modalfix"
|
|
v-model="formBody.studyAbroadStartDate"
|
|
:locale="'th'"
|
|
autoApply
|
|
:enableTimePicker="false"
|
|
week-start="0"
|
|
@update:model-value="changeStartDate('studyAbroadStartDate')"
|
|
>
|
|
<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.studyAbroadStartDate
|
|
? date2Thai(formBody.studyAbroadStartDate)
|
|
: 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.studyAbroadEndDate"
|
|
:locale="'th'"
|
|
autoApply
|
|
:enableTimePicker="false"
|
|
week-start="0"
|
|
:min-date="formBody.studyAbroadStartDate"
|
|
@update:model-value="
|
|
updateTotalPeriod(
|
|
formBody.studyAbroadStartDate,
|
|
formBody.studyAbroadEndDate
|
|
)
|
|
"
|
|
>
|
|
<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.studyAbroadEndDate
|
|
? date2Thai(formBody.studyAbroadEndDate)
|
|
: 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">
|
|
<q-input
|
|
dense
|
|
outlined
|
|
lazy-rules
|
|
hide-bottom-space
|
|
label="รวมระยะเวลาในการศึกษา"
|
|
class="inputgreen"
|
|
v-model="formBody.totalPeriod"
|
|
:rules="[
|
|
(val: string) =>
|
|
!!val || `${'กรุณากรอกรวมระยะเวลาในการศึกษา'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<q-separator />
|
|
<div class="text-right q-pa-sm" v-if="isGov">
|
|
<q-btn
|
|
dense
|
|
unelevated
|
|
label="บันทึก"
|
|
id="onSubmit"
|
|
type="submit"
|
|
color="public"
|
|
class="q-px-md"
|
|
>
|
|
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
</q-card>
|
|
</q-form>
|
|
|
|
<DialogGov v-model:modal="modalDialogGov" :up-date="upDate" />
|
|
</template>
|
|
|
|
<style scoped></style>
|