2536 lines
100 KiB
Vue
2536 lines
100 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, reactive, ref } from "vue";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
import axios from "axios";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import { useQuasar } from "quasar";
|
|
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
|
|
import type { DataOptions } from "@/modules/09_scholarship/interface/index/Main";
|
|
import type {
|
|
FormsSholarship,
|
|
DataSholarship,
|
|
} from "@/modules/09_scholarship/interface/request/index";
|
|
|
|
import DialogReturn from "@/modules/09_scholarship/components/Dialog/DialogReturn.vue";
|
|
import genReport from "@/plugins/genreport";
|
|
|
|
const isGuarantor = ref<boolean>(false);
|
|
const isGov = ref<boolean>(false);
|
|
const isStatus = ref<string>("");
|
|
const fileList = ref<any[]>();
|
|
const route = useRoute();
|
|
const $q = useQuasar();
|
|
const mixin = useCounterMixin();
|
|
const {
|
|
showLoader,
|
|
hideLoader,
|
|
messageError,
|
|
date2Thai,
|
|
calculateDurationYmd,
|
|
dialogConfirm,
|
|
success,
|
|
} = mixin;
|
|
const router = useRouter();
|
|
|
|
const dialogReturn = ref<boolean>(false);
|
|
|
|
const documentFile = ref<any>(null);
|
|
const id = ref<string>(route.params.id.toLocaleString());
|
|
const budgetSourceOp = ref<DataOptions[]>([
|
|
{ id: "BKK", name: "งบประมาณ กทม." },
|
|
{ id: "HOSPITAL", name: "เงินบำรุงโรงพยาบาล" },
|
|
{ id: "FUND", name: "เงินกองทุน" },
|
|
{ id: "SUBSIDY", name: "เงินอุดหนุน" },
|
|
{ id: "OTHER", name: "เงินอื่น ๆ" },
|
|
]);
|
|
|
|
const formBody = reactive<FormsSholarship>({
|
|
profileId: "",
|
|
rank: "", //ยศ
|
|
prefix: "", //คำนำหน้าชื่อ
|
|
firstName: "", //ชื่อ
|
|
lastName: "", //นามสกุล
|
|
citizenId: "", //เลขประจำตัวประชาชน
|
|
position: "", //ตำแหน่ง
|
|
posExecutive: "", //ชื่อตำแหน่งทางการบริหาร
|
|
posLevelId: null, //ไอดีระดับตำแหน่ง
|
|
posTypeId: null, //ไอดีประเภทตำแหน่ง
|
|
org: "",
|
|
rootId: null,
|
|
root: "",
|
|
orgRootShortName: "",
|
|
orgRevisionId: null,
|
|
guarantorRank: "", //ยศ(ผู้ค้ำ)
|
|
guarantorPrefix: "", //คำนำหน้าชื่อ(ผู้ค้ำ)
|
|
guarantorFirstName: "", //ชื่อ(ผู้ค้ำ)
|
|
guarantorLastName: "", //นามสกุล(ผู้ค้ำ)
|
|
guarantorCitizenId: "", //เลขประจำตัวประชาชน(ผู้ค้ำ)
|
|
guarantorPosition: "", //ตำแหน่ง(ผู้ค้ำ)
|
|
guarantorPosExecutive: "", //ชื่อตำแหน่งทางการบริหาร(ผู้ค้ำ)
|
|
guarantorOrg: "",
|
|
guarantorRootId: null,
|
|
guarantorRoot: "",
|
|
guarantorOrgRootShortName: "",
|
|
guarantorOrgRevisionId: null,
|
|
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,
|
|
});
|
|
|
|
const dataPerson = reactive({
|
|
id: "",
|
|
citizenId: "",
|
|
name: "",
|
|
prefix: "",
|
|
firstName: "",
|
|
lastName: "",
|
|
position: "",
|
|
type: "",
|
|
level: "",
|
|
positionSide: "",
|
|
org: "-",
|
|
});
|
|
|
|
const dataGuarantor = reactive({
|
|
id: "",
|
|
prefix: "",
|
|
firstName: "",
|
|
lastName: "",
|
|
citizenId: "",
|
|
name: "",
|
|
position: "",
|
|
type: "",
|
|
level: "",
|
|
positionSide: "",
|
|
org: "-",
|
|
});
|
|
|
|
const scholarshipTypeOp = ref<DataOptions[]>([
|
|
{ id: "DOMESTICE", name: "การศึกษาในประเทศ" },
|
|
{
|
|
id: "NOABROAD",
|
|
name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยงานภายนอก (หลักสูตรที่ไม่มีการไปต่างประเทศ)",
|
|
},
|
|
{
|
|
id: "ABROAD",
|
|
name: "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยงานภายนอก (หลักสูตรที่มีการไปต่างประเทศ)",
|
|
},
|
|
{
|
|
id: "EXECUTIVE",
|
|
name: " ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยงานภายนอก (หลักสูตรประเภทนักบริหาร)",
|
|
},
|
|
{
|
|
id: "RESEARCH",
|
|
name: "ศึกษา ฝึกอบรม ประชุม ดูงาน และปฏิบัติการวิจัย ณ ต่างประเทศ",
|
|
},
|
|
]);
|
|
|
|
const fundTypeOp = ref<DataOptions[]>([
|
|
{ id: "FUND1", name: "ทุน 1 (ก)" },
|
|
{ id: "FUND2", name: "ทุน 1 (ข)" },
|
|
{ id: "FUND3", name: "ทุน 1 (ค)" },
|
|
{ id: "FUND4", name: "ทุน 2" },
|
|
{ id: "FUND5", name: "ทุนส่วนตัว" },
|
|
]);
|
|
|
|
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 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 onOpenReturn() {
|
|
dialogReturn.value = true;
|
|
}
|
|
|
|
function onDownload() {
|
|
showLoader();
|
|
http
|
|
.get(config.API.developmentScholarshipReport + `/${id.value}`)
|
|
.then((res) => {
|
|
const dataList = res.data.result;
|
|
genReport(dataList, "ฟอร์มรายงานตัวกลับเข้ารับราชการ(ต้นแบบ)");
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
async function clickUpload(file: any) {
|
|
const fileName = { fileName: file.name };
|
|
|
|
dialogConfirm(
|
|
$q,
|
|
async () => {
|
|
const selectedFile = file;
|
|
const formdata = new FormData();
|
|
formdata.append("file", selectedFile);
|
|
await http
|
|
.post(
|
|
config.API.developmentSalaryFile(
|
|
"ระบบพัฒนาบุคคล",
|
|
"ฟอร์มรายงานตัวกลับเข้ารับราชการ",
|
|
id.value
|
|
),
|
|
{
|
|
replace: false,
|
|
fileList: fileName,
|
|
}
|
|
)
|
|
.then(async (res) => {
|
|
const foundKey: string | undefined = Object.keys(res.data).find(
|
|
(key) =>
|
|
res.data[key]?.fileName !== undefined &&
|
|
res.data[key]?.fileName !== ""
|
|
);
|
|
foundKey &&
|
|
uploadFileDoc(res.data[foundKey]?.uploadUrl, documentFile.value);
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
});
|
|
},
|
|
"ยืนยันการอัปโหลดไฟล์",
|
|
"ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
|
|
);
|
|
}
|
|
|
|
/**
|
|
* ฟังก์ชั่นสำหรับอัพโหลดไฟล์เอกสารหลักฐาน
|
|
*/
|
|
async function uploadFileDoc(uploadUrl: string, file: any) {
|
|
const Data = new FormData();
|
|
Data.append("file", documentFile.value);
|
|
showLoader();
|
|
await axios
|
|
.put(uploadUrl, file, {
|
|
headers: {
|
|
"Content-Type": file.type,
|
|
},
|
|
})
|
|
.then((res) => {
|
|
success($q, "อัปโหลดไฟล์สำเร็จ");
|
|
fetchDataDetail(id.value);
|
|
getFile();
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
documentFile.value = null;
|
|
});
|
|
}
|
|
|
|
function getFile() {
|
|
http
|
|
.get(
|
|
config.API.developmentSalaryFile(
|
|
"ระบบพัฒนาบุคคล",
|
|
"ฟอร์มรายงานตัวกลับเข้ารับราชการ",
|
|
id.value
|
|
)
|
|
)
|
|
.then((res) => {
|
|
if (res) {
|
|
const dataFile = res.data;
|
|
fileList.value = dataFile[0];
|
|
}
|
|
})
|
|
.finally(() => {});
|
|
}
|
|
|
|
function downloadFile(file: any) {
|
|
showLoader();
|
|
http
|
|
.get(
|
|
config.API.developmentSalaryFile(
|
|
"ระบบพัฒนาบุคคล",
|
|
"ฟอร์มรายงานตัวกลับเข้ารับราชการ",
|
|
id.value
|
|
) + `/${file.fileName}`
|
|
)
|
|
.then((res) => {
|
|
const data = res.data.downloadUrl;
|
|
window.open(data, "_blank");
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
function fetchDataDetail(id: string) {
|
|
showLoader();
|
|
http
|
|
.get(config.API.developmentScholarship + `/${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.guarantorOrg = data.guarantorOrg;
|
|
formBody.guarantorRootId = data.guarantorRootId;
|
|
formBody.guarantorRoot = data.guarantorRoot;
|
|
formBody.guarantorOrgRootShortName = data.guarantorOrgRootShortName;
|
|
formBody.guarantorOrgRevisionId = data.guarantorOrgRevisionId;
|
|
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.prefix = data.prefix),
|
|
(dataPerson.firstName = data.firstName),
|
|
(dataPerson.lastName = 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 : "-";
|
|
dataPerson.org = data.org ? data.org : "-";
|
|
|
|
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
|
|
: "-";
|
|
dataGuarantor.org = data.guarantorOrg ? data.guarantorOrg : "-";
|
|
isStatus.value = data.status;
|
|
isGov.value = data.citizenId ? true : false;
|
|
isGuarantor.value = data.guarantorCitizenId ? true : false;
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
onMounted(async () => {
|
|
await fetchDataDetail(id.value);
|
|
await getFile();
|
|
});
|
|
</script>
|
|
<template>
|
|
<div class="col-12 row justify-center">
|
|
<div class="col-xs-12 col-sm-12 col-md-11">
|
|
<div class="toptitle text-white col-12 row items-center">
|
|
<q-btn
|
|
icon="mdi-arrow-left"
|
|
unelevated
|
|
round
|
|
dense
|
|
flat
|
|
color="primary"
|
|
class="q-mr-sm"
|
|
@click="router.push(`/scholarship`)"
|
|
/>
|
|
รายละเอียดทุนการศึกษา/ฝึกอบรม
|
|
</div>
|
|
|
|
<q-card flat bordered class="col-12 q-pa-md">
|
|
<q-toolbar class="q-px-none q-pb-sm">
|
|
<div class="row q-col-gutter-x-sm full-width">
|
|
<div class="col-2 q-pa-none">
|
|
<q-btn
|
|
flat
|
|
icon="mdi-dots-vertical"
|
|
color="grey-8"
|
|
for="#cancel"
|
|
dense
|
|
round
|
|
unelevated
|
|
>
|
|
<q-menu>
|
|
<q-list>
|
|
<q-item clickable v-close-popup @click="onOpenReturn">
|
|
<q-item-section>
|
|
<q-item-label>
|
|
<q-icon name="edit" color="edit" size="18px" />
|
|
แก้ไขข้อมูลรายงานตัวกลับเข้ารับราชการ
|
|
</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item clickable v-close-popup @click="onDownload">
|
|
<q-item-section>
|
|
<q-item-label>
|
|
<q-icon name="download" color="primary" size="18px" />
|
|
ดาวน์โหลดฟอร์มต้นแบบ
|
|
</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-menu>
|
|
</q-btn>
|
|
</div>
|
|
|
|
<q-space />
|
|
<div v-if="fileList == null" class="col-xs-5 col-3">
|
|
<q-file
|
|
for="inputFiles"
|
|
class="col-12"
|
|
outlined
|
|
dense
|
|
v-model="documentFile"
|
|
label="ไฟล์เอกสารหลักฐาน"
|
|
accept=".pdf,.xlsx,.docx,.png,.jpg"
|
|
clearable
|
|
>
|
|
<template v-slot:prepend>
|
|
<q-icon name="attach_file" color="primary" />
|
|
</template>
|
|
<template v-slot:after>
|
|
<q-btn
|
|
size="14px"
|
|
v-if="documentFile"
|
|
flat
|
|
round
|
|
dense
|
|
color="add"
|
|
icon="mdi-upload"
|
|
@click="clickUpload(documentFile)"
|
|
><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
|
|
>
|
|
</template>
|
|
</q-file>
|
|
</div>
|
|
<div v-else class="col-2 text-right">
|
|
<q-btn
|
|
size="12px"
|
|
flat
|
|
round
|
|
dense
|
|
color="blue"
|
|
icon="mdi-download"
|
|
@click="downloadFile(fileList)"
|
|
>
|
|
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
|
>
|
|
</div>
|
|
</div>
|
|
</q-toolbar>
|
|
|
|
<q-card flat style="border-radius: 5px; border: 1px solid #d6dee1">
|
|
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
|
|
ข้อมูลราชการ
|
|
</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-xs-12 col-md-6">
|
|
<div class="row q-col-gutter-md">
|
|
<div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
|
|
<div class="col-8 text-weight-medium">
|
|
{{ dataPerson.citizenId ? dataPerson.citizenId : "-" }}
|
|
</div>
|
|
<div class="col-4 text-grey">ชื่อ-นามสกุล</div>
|
|
<div class="col-8 text-weight-medium">
|
|
{{ dataPerson.firstName ? dataPerson.name : "-" }}
|
|
</div>
|
|
<div class="col-4 text-grey">ตำแหน่ง</div>
|
|
<div class="col-8 text-weight-medium">
|
|
{{ dataPerson.position ? dataPerson.position : "-" }}
|
|
</div>
|
|
<div class="col-4 text-grey">ประเภทตำแหน่ง</div>
|
|
<div class="col-8 text-weight-medium">
|
|
{{ dataPerson.type ? dataPerson.type : "-" }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12 col-md-6">
|
|
<div class="row q-col-gutter-md">
|
|
<div class="col-4 text-grey">ระดับตำแหน่ง</div>
|
|
<div class="col-8 text-weight-medium">
|
|
{{ dataPerson.level ? dataPerson.level : "-" }}
|
|
</div>
|
|
<div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
|
|
<div class="col-8 text-weight-medium">
|
|
{{ dataPerson.positionSide ? dataPerson.positionSide : "-" }}
|
|
</div>
|
|
<div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
|
|
<div class="col-8 text-weight-medium">
|
|
{{ dataPerson.org ? 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 class="row q-col-gutter-md q-mt-sm">
|
|
<div class="col-md-9 col-xs-12">
|
|
<q-select
|
|
dense
|
|
readonly
|
|
outlined
|
|
v-model="formBody.scholarshipType"
|
|
:options="scholarshipTypeOp"
|
|
option-label="name"
|
|
option-value="id"
|
|
emit-value
|
|
map-options
|
|
class="inputgreen"
|
|
label="เลือกประเภททุน"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="col-md-3 col-xs-12"
|
|
v-if="
|
|
formBody.scholarshipType !== '' &&
|
|
formBody.scholarshipType !== 'EXECUTIVE' &&
|
|
formBody.scholarshipType !== 'RESEARCH'
|
|
"
|
|
>
|
|
<q-select
|
|
dense
|
|
outlined
|
|
class="inputgreen"
|
|
v-model="formBody.fundType"
|
|
:options="fundTypeOp"
|
|
option-label="name"
|
|
option-value="id"
|
|
emit-value
|
|
readonly
|
|
map-options
|
|
label="ประเภททุน"
|
|
/>
|
|
</div>
|
|
|
|
<div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-12">
|
|
<q-radio
|
|
v-model="formBody.planType"
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
val="INPLAN"
|
|
label="ในแผน ฯ"
|
|
dense
|
|
disable
|
|
/>
|
|
<q-radio
|
|
v-model="formBody.planType"
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
val="OUTPLAN"
|
|
label="นอกแผน ฯ"
|
|
dense
|
|
disable
|
|
class="q-pl-sm"
|
|
/>
|
|
</div>
|
|
|
|
<div class="row col-12 q-col-gutter-md">
|
|
<div class="col-xs-12 col-md-3">
|
|
<datepicker
|
|
menu-class-name="modalfix"
|
|
v-model="formBody.scholarshipYear"
|
|
:locale="'th'"
|
|
autoApply
|
|
readonly
|
|
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
|
|
readonly
|
|
class="inputgreen"
|
|
:model-value="
|
|
formBody.scholarshipYear
|
|
? Number(formBody.scholarshipYear) + 543
|
|
: null
|
|
"
|
|
:label="`${
|
|
formBody.scholarshipType === 'RESEARCH'
|
|
? 'ปีงบประมาณที่ได้รับอนุมัติ '
|
|
: 'ปีงบประมาณที่ได้รับทุน'
|
|
}`"
|
|
>
|
|
<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-xs-12 col-md-3"
|
|
>
|
|
<q-select
|
|
dense
|
|
outlined
|
|
class="inputgreen"
|
|
label="แหล่งงบประมาณ"
|
|
v-model="formBody.budgetSource"
|
|
:options="budgetSourceOp"
|
|
option-label="name"
|
|
option-value="id"
|
|
emit-value
|
|
map-options
|
|
readonly
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-md-3">
|
|
<q-input
|
|
dense
|
|
outlined
|
|
readonly
|
|
class="inputgreen"
|
|
v-model="formBody.budgetApprove"
|
|
label="งบประมาณที่ได้รับอนุมัติตลอดหลักสูตร"
|
|
mask="###,###,###,###,###,###"
|
|
reverse-fill-mask
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-md-3">
|
|
<q-checkbox
|
|
keep-color
|
|
disable
|
|
color="primary"
|
|
v-model="formBody.isNoUseBudget"
|
|
label="ไม่ใช้งบประมาณ"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row col-12 q-col-gutter-md">
|
|
<div class="col-xs-12 col-md-3">
|
|
<q-input
|
|
dense
|
|
readonly
|
|
outlined
|
|
class="inputgreen"
|
|
v-model="formBody.bookNo"
|
|
label="เลขที่หนังสืออนุมัติ"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-md-3">
|
|
<datepicker
|
|
menu-class-name="modalfix"
|
|
v-model="formBody.bookNoDate"
|
|
:locale="'th'"
|
|
readonly
|
|
autoApply
|
|
:enableTimePicker="false"
|
|
>
|
|
<template #year="{ year }">{{ year + 543 }}</template>
|
|
<template #year-overlay-value="{ value }">{{
|
|
parseInt(value + 543)
|
|
}}</template>
|
|
<template #trigger>
|
|
<q-input
|
|
dense
|
|
outlined
|
|
readonly
|
|
class="inputgreen"
|
|
:model-value="
|
|
formBody.bookNoDate
|
|
? date2Thai(formBody.bookNoDate)
|
|
: null
|
|
"
|
|
:label="`${'ลงวันที่'}`"
|
|
>
|
|
<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-md-3">
|
|
<datepicker
|
|
menu-class-name="modalfix"
|
|
v-model="formBody.bookApproveDate"
|
|
:locale="'th'"
|
|
autoApply
|
|
readonly
|
|
:enableTimePicker="false"
|
|
>
|
|
<template #year="{ year }">{{ year + 543 }}</template>
|
|
<template #year-overlay-value="{ value }">{{
|
|
parseInt(value + 543)
|
|
}}</template>
|
|
<template #trigger>
|
|
<q-input
|
|
dense
|
|
readonly
|
|
outlined
|
|
class="inputgreen"
|
|
:model-value="
|
|
formBody.bookApproveDate
|
|
? date2Thai(formBody.bookApproveDate)
|
|
: null
|
|
"
|
|
:label="`${'หนังสืออนุมัติเมื่อวันที่'}`"
|
|
>
|
|
<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-xs-12 col-md-3"
|
|
>
|
|
<q-checkbox
|
|
keep-color
|
|
disable
|
|
color="primary"
|
|
v-model="formBody.useOfficialTime"
|
|
label="ใช้เวลาราชการ"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-12">
|
|
<q-input
|
|
outlined
|
|
dense
|
|
readonly
|
|
class="inputgreen"
|
|
v-model="formBody.changeDetail"
|
|
label="เปลี่ยนแปลงรายละเอียด"
|
|
rows="3"
|
|
type="textarea"
|
|
/>
|
|
</div>
|
|
|
|
<div class="col-12" v-if="formBody.scholarshipType !== 'EXECUTIVE'">
|
|
<div class="row col-12 q-col-gutter-md">
|
|
<div class="col-xs-12 col-md-3">
|
|
<q-input
|
|
dense
|
|
readonly
|
|
outlined
|
|
label="เลขที่สัญญา"
|
|
class="inputgreen"
|
|
v-model="formBody.contractNo"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-md-2">
|
|
<datepicker
|
|
readonly
|
|
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
|
|
readonly
|
|
outlined
|
|
class="inputgreen"
|
|
:model-value="
|
|
formBody.contractDate
|
|
? date2Thai(formBody.contractDate)
|
|
: null
|
|
"
|
|
:label="`${'ลงวันที่'}`"
|
|
>
|
|
<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-xs-12 col-md-3"
|
|
>
|
|
<q-input
|
|
dense
|
|
readonly
|
|
outlined
|
|
class="inputgreen"
|
|
v-model="formBody.reportBackNo"
|
|
label="เลขที่หนังสือรายงานตัวกลับ"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-if="formBody.scholarshipType !== 'RESEARCH'"
|
|
class="col-xs-12 col-md-2"
|
|
>
|
|
<datepicker
|
|
readonly
|
|
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
|
|
readonly
|
|
outlined
|
|
class="inputgreen"
|
|
:model-value="
|
|
formBody.reportBackNoDate
|
|
? date2Thai(formBody.reportBackNoDate)
|
|
: null
|
|
"
|
|
:label="`${'ลงวันที่'}`"
|
|
>
|
|
<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-xs-12 col-md-2"
|
|
>
|
|
<datepicker
|
|
menu-class-name="modalfix"
|
|
v-model="formBody.reportBackDate"
|
|
:locale="'th'"
|
|
autoApply
|
|
readonly
|
|
:enableTimePicker="false"
|
|
>
|
|
<template #year="{ year }">{{ year + 543 }}</template>
|
|
<template #year-overlay-value="{ value }">{{
|
|
parseInt(value + 543)
|
|
}}</template>
|
|
<template #trigger>
|
|
<q-input
|
|
dense
|
|
outlined
|
|
readonly
|
|
class="inputgreen"
|
|
:model-value="
|
|
formBody.reportBackDate
|
|
? date2Thai(formBody.reportBackDate)
|
|
: null
|
|
"
|
|
:label="`${'รายงานตัวกลับเมื่่อวันที่'}`"
|
|
>
|
|
<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">
|
|
ข้อมูลผู้ค้ำประกัน
|
|
</div>
|
|
<div class="col-12"><q-separator /></div>
|
|
<div class="row col-12 q-col-gutter-md q-pa-md">
|
|
<div class="col-xs-12 col-md-6">
|
|
<div class="row q-col-gutter-md">
|
|
<div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
|
|
<div class="col-8 text-weight-medium">
|
|
{{
|
|
dataGuarantor.citizenId
|
|
? dataGuarantor.citizenId
|
|
: "-"
|
|
}}
|
|
</div>
|
|
<div class="col-4 text-grey">ชื่อ-นามสกุล</div>
|
|
<div class="col-8 text-weight-medium">
|
|
{{
|
|
dataGuarantor.firstName ? dataGuarantor.name : "-"
|
|
}}
|
|
</div>
|
|
<div class="col-4 text-grey">ตำแหน่ง</div>
|
|
<div class="col-8 text-weight-medium">
|
|
{{
|
|
dataGuarantor.position
|
|
? dataGuarantor.position
|
|
: "-"
|
|
}}
|
|
</div>
|
|
<div class="col-4 text-grey">ประเภท</div>
|
|
<div class="col-8 text-weight-medium">
|
|
{{ dataGuarantor.type ? dataGuarantor.type : "-" }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12 col-md-6">
|
|
<div class="row q-col-gutter-md">
|
|
<div class="col-4 text-grey">ระดับตำแหน่ง</div>
|
|
<div class="col-8 text-weight-medium">
|
|
{{ dataGuarantor.level ? dataGuarantor.level : "-" }}
|
|
</div>
|
|
<div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
|
|
<div class="col-8 text-weight-medium">
|
|
{{
|
|
dataGuarantor.positionSide
|
|
? dataGuarantor.positionSide
|
|
: "-"
|
|
}}
|
|
</div>
|
|
<div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
|
|
<div class="col-8 text-weight-medium">
|
|
{{ dataGuarantor.org ? 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-xs-12 col-md-3">
|
|
<q-input
|
|
dense
|
|
readonly
|
|
outlined
|
|
label="ระดับปริญญา"
|
|
class="inputgreen"
|
|
v-model="formBody.degreeLevel"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-md-3">
|
|
<q-input
|
|
dense
|
|
readonly
|
|
outlined
|
|
label="หลักสูตรการศึกษา"
|
|
class="inputgreen"
|
|
v-model="formBody.course"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-md-3">
|
|
<q-input
|
|
dense
|
|
outlined
|
|
readonly
|
|
label="สาขาวิชา"
|
|
class="inputgreen"
|
|
v-model="formBody.field"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-md-3">
|
|
<q-input
|
|
dense
|
|
outlined
|
|
readonly
|
|
label="คณะ"
|
|
class="inputgreen"
|
|
v-model="formBody.faculty"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-md-6">
|
|
<q-input
|
|
dense
|
|
outlined
|
|
readonly
|
|
label="สถาบันการศึกษา"
|
|
class="inputgreen"
|
|
v-model="formBody.educationalInstitution"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-md-3">
|
|
<datepicker
|
|
menu-class-name="modalfix"
|
|
v-model="formBody.startDate"
|
|
:locale="'th'"
|
|
autoApply
|
|
readonly
|
|
: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
|
|
readonly
|
|
class="inputgreen"
|
|
:model-value="
|
|
formBody.startDate
|
|
? date2Thai(formBody.startDate)
|
|
: null
|
|
"
|
|
:label="`${'วันเริ่มต้นการศึกษา'}`"
|
|
>
|
|
<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-md-3">
|
|
<datepicker
|
|
menu-class-name="modalfix"
|
|
v-model="formBody.endDate"
|
|
:locale="'th'"
|
|
readonly
|
|
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
|
|
readonly
|
|
class="inputgreen"
|
|
:model-value="
|
|
formBody.endDate
|
|
? date2Thai(formBody.endDate)
|
|
: null
|
|
"
|
|
:label="`${'วันสิ้นสุดการศึกษา'}`"
|
|
>
|
|
<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-md-6">
|
|
<q-input
|
|
dense
|
|
readonly
|
|
outlined
|
|
label="สถานที่ไปศึกษาดูงาน"
|
|
class="inputgreen"
|
|
v-model="formBody.studyPlace"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-md-6">
|
|
<q-input
|
|
dense
|
|
readonly
|
|
outlined
|
|
label="หัวข้อการไปศึกษาดูงาน"
|
|
class="inputgreen"
|
|
v-model="formBody.studyTopic"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-md-3">
|
|
<datepicker
|
|
readonly
|
|
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
|
|
readonly
|
|
class="inputgreen"
|
|
:model-value="
|
|
formBody.studyStartDate
|
|
? date2Thai(formBody.studyStartDate)
|
|
: null
|
|
"
|
|
:label="`${'วันเริ่มต้นการศึกษาดูงาน'}`"
|
|
>
|
|
<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-md-3">
|
|
<datepicker
|
|
menu-class-name="modalfix"
|
|
readonly
|
|
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
|
|
readonly
|
|
class="inputgreen"
|
|
:model-value="
|
|
formBody.studyEndDate
|
|
? date2Thai(formBody.studyEndDate)
|
|
: null
|
|
"
|
|
:label="`${'วันสิ้นสุดการศึกษาดูงาน'}`"
|
|
>
|
|
<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" v-if="!$q.screen.gt.xs"></div>
|
|
<div class="col-xs-12 col-md-6">
|
|
<q-input
|
|
dense
|
|
readonly
|
|
outlined
|
|
label="ประเทศที่ไปศึกษาดูงาน"
|
|
class="inputgreen"
|
|
v-model="formBody.studyCountry"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-md-6">
|
|
<q-input
|
|
dense
|
|
readonly
|
|
outlined
|
|
label="หัวข้อการไปศึกษาดูงานต่างประเทศ"
|
|
class="inputgreen"
|
|
v-model="formBody.studyAbroadTopic"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-md-3">
|
|
<datepicker
|
|
readonly
|
|
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
|
|
readonly
|
|
outlined
|
|
class="inputgreen"
|
|
:model-value="
|
|
formBody.studyAbroadStartDate
|
|
? date2Thai(formBody.studyAbroadStartDate)
|
|
: null
|
|
"
|
|
:label="`${'วันเริ่มต้นการศึกษาดูงานต่างประเทศ'}`"
|
|
>
|
|
<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-md-3">
|
|
<datepicker
|
|
readonly
|
|
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
|
|
readonly
|
|
outlined
|
|
class="inputgreen"
|
|
:model-value="
|
|
formBody.studyAbroadEndDate
|
|
? date2Thai(formBody.studyAbroadEndDate)
|
|
: null
|
|
"
|
|
:label="`${'วันสิ้นสุดการศึกษาดูงานต่างประเทศ'}`"
|
|
>
|
|
<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-md-3">
|
|
<q-input
|
|
dense
|
|
readonly
|
|
outlined
|
|
label="รวมระยะเวลาในการศึกษา"
|
|
class="inputgreen"
|
|
v-model="formBody.totalPeriod"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- เลือกทุน 2 -->
|
|
<div
|
|
class="col-12"
|
|
v-else-if="formBody.scholarshipType === 'NOABROAD'"
|
|
>
|
|
<div class="row q-col-gutter-md">
|
|
<div class="col-xs-12 col-md-6">
|
|
<q-input
|
|
dense
|
|
outlined
|
|
readonly
|
|
label="หลักสูตรการฝึกอบรม"
|
|
class="inputgreen"
|
|
v-model="formBody.course"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-md-6">
|
|
<q-input
|
|
dense
|
|
readonly
|
|
outlined
|
|
label="สาขา"
|
|
class="inputgreen"
|
|
v-model="formBody.field"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-md-6">
|
|
<q-input
|
|
readonly
|
|
dense
|
|
outlined
|
|
label="สถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม"
|
|
class="inputgreen"
|
|
v-model="formBody.educationalInstitution"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-md-3">
|
|
<datepicker
|
|
readonly
|
|
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
|
|
readonly
|
|
outlined
|
|
class="inputgreen"
|
|
:model-value="
|
|
formBody.startDate
|
|
? date2Thai(formBody.startDate)
|
|
: null
|
|
"
|
|
:label="`${'วันเริ่มต้นการฝึกอบรม'}`"
|
|
>
|
|
<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-md-3">
|
|
<datepicker
|
|
readonly
|
|
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
|
|
readonly
|
|
class="inputgreen"
|
|
:model-value="
|
|
formBody.endDate
|
|
? date2Thai(formBody.endDate)
|
|
: null
|
|
"
|
|
:label="`${'วันสิ้นสุดการฝึกอบรม'}`"
|
|
>
|
|
<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-md-6">
|
|
<q-input
|
|
dense
|
|
readonly
|
|
outlined
|
|
label="สถานที่ไปศึกษาดูงาน"
|
|
class="inputgreen"
|
|
v-model="formBody.studyPlace"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-md-6">
|
|
<q-input
|
|
dense
|
|
readonly
|
|
outlined
|
|
label="หัวข้อการไปศึกษาดูงาน"
|
|
class="inputgreen"
|
|
v-model="formBody.studyTopic"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-md-3">
|
|
<datepicker
|
|
menu-class-name="modalfix"
|
|
v-model="formBody.studyStartDate"
|
|
:locale="'th'"
|
|
autoApply
|
|
readonly
|
|
: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
|
|
readonly
|
|
class="inputgreen"
|
|
:model-value="
|
|
formBody.studyStartDate
|
|
? date2Thai(formBody.studyStartDate)
|
|
: null
|
|
"
|
|
:label="`${'วันเริ่มต้นการศึกษาดูงาน'}`"
|
|
>
|
|
<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-md-3">
|
|
<datepicker
|
|
readonly
|
|
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
|
|
readonly
|
|
class="inputgreen"
|
|
:model-value="
|
|
formBody.studyEndDate
|
|
? date2Thai(formBody.studyEndDate)
|
|
: null
|
|
"
|
|
:label="`${'วันสิ้นสุดการศึกษาดูงาน'}`"
|
|
>
|
|
<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-md-3">
|
|
<q-input
|
|
dense
|
|
readonly
|
|
outlined
|
|
label="รวมระยะเวลาในการฝึกอบรม"
|
|
class="inputgreen"
|
|
v-model="formBody.totalPeriod"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- เลือกทุน 3 -->
|
|
<div
|
|
class="col-12"
|
|
v-else-if="formBody.scholarshipType === 'ABROAD'"
|
|
>
|
|
<div class="row q-col-gutter-md">
|
|
<div class="col-xs-12 col-md-6">
|
|
<q-input
|
|
dense
|
|
readonly
|
|
outlined
|
|
label="หลักสูตรการฝึกอบรม"
|
|
class="inputgreen"
|
|
v-model="formBody.course"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-md-6">
|
|
<q-input
|
|
dense
|
|
outlined
|
|
readonly
|
|
label="สาขา"
|
|
class="inputgreen"
|
|
v-model="formBody.field"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-md-6">
|
|
<q-input
|
|
dense
|
|
readonly
|
|
outlined
|
|
label="สถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม"
|
|
class="inputgreen"
|
|
v-model="formBody.educationalInstitution"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-md-3">
|
|
<datepicker
|
|
readonly
|
|
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
|
|
readonly
|
|
dense
|
|
outlined
|
|
class="inputgreen"
|
|
:model-value="
|
|
formBody.startDate
|
|
? date2Thai(formBody.startDate)
|
|
: null
|
|
"
|
|
:label="`${'วันเริ่มต้นการฝึกอบรม'}`"
|
|
>
|
|
<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-md-3">
|
|
<datepicker
|
|
readonly
|
|
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
|
|
readonly
|
|
outlined
|
|
class="inputgreen"
|
|
:model-value="
|
|
formBody.endDate
|
|
? date2Thai(formBody.endDate)
|
|
: null
|
|
"
|
|
:label="`${'วันสิ้นสุดการฝึกอบรม'}`"
|
|
>
|
|
<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-md-6">
|
|
<q-input
|
|
dense
|
|
readonly
|
|
outlined
|
|
label="สถานที่ไปศึกษาดูงานในประเทศ"
|
|
class="inputgreen"
|
|
v-model="formBody.studyPlace"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-md-6">
|
|
<q-input
|
|
dense
|
|
readonly
|
|
outlined
|
|
label="หัวข้อการไปศึกษาดูงานในประเทศ"
|
|
class="inputgreen"
|
|
v-model="formBody.studyTopic"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-md-3">
|
|
<datepicker
|
|
readonly
|
|
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
|
|
readonly
|
|
outlined
|
|
class="inputgreen"
|
|
:model-value="
|
|
formBody.studyStartDate
|
|
? date2Thai(formBody.studyStartDate)
|
|
: null
|
|
"
|
|
:label="`${'วันเริ่มต้นการศึกษาดูงานในประเทศ'}`"
|
|
>
|
|
<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-md-3">
|
|
<datepicker
|
|
readonly
|
|
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
|
|
readonly
|
|
outlined
|
|
class="inputgreen"
|
|
:model-value="
|
|
formBody.studyEndDate
|
|
? date2Thai(formBody.studyEndDate)
|
|
: null
|
|
"
|
|
:label="`${'วันสิ้นสุดการศึกษาดูงานในประเทศ'}`"
|
|
>
|
|
<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" v-if="!$q.screen.gt.xs"></div>
|
|
<div class="col-xs-12 col-md-6">
|
|
<q-input
|
|
dense
|
|
readonly
|
|
outlined
|
|
label="ประเทศที่เดินทางไปศึกษาดูงาน"
|
|
class="inputgreen"
|
|
v-model="formBody.studyCountry"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-md-6">
|
|
<q-input
|
|
dense
|
|
readonly
|
|
outlined
|
|
label="หัวข้อการไปศึกษาดูงานต่างประเทศ"
|
|
class="inputgreen"
|
|
v-model="formBody.studyAbroadTopic"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-md-3">
|
|
<datepicker
|
|
readonly
|
|
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
|
|
readonly
|
|
outlined
|
|
class="inputgreen"
|
|
:model-value="
|
|
formBody.studyAbroadStartDate
|
|
? date2Thai(formBody.studyAbroadStartDate)
|
|
: null
|
|
"
|
|
:label="`${'วันเริ่มต้นการศึกษาดูงานต่างประเทศ'}`"
|
|
>
|
|
<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-md-3">
|
|
<datepicker
|
|
readonly
|
|
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
|
|
readonly
|
|
outlined
|
|
class="inputgreen"
|
|
:model-value="
|
|
formBody.studyAbroadEndDate
|
|
? date2Thai(formBody.studyAbroadEndDate)
|
|
: null
|
|
"
|
|
:label="`${'วันสิ้นสุดการศึกษาดูงานต่างประเทศ'}`"
|
|
>
|
|
<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-md-3">
|
|
<q-input
|
|
readonly
|
|
dense
|
|
outlined
|
|
label="รวมระยะเวลาในการศึกษา"
|
|
class="inputgreen"
|
|
v-model="formBody.totalPeriod"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- เลือกทุน 5 -->
|
|
<div
|
|
class="col-12"
|
|
v-else-if="formBody.scholarshipType === 'RESEARCH'"
|
|
>
|
|
<div class="row q-col-gutter-md">
|
|
<div class="col-xs-12 col-md-3">
|
|
<q-select
|
|
dense
|
|
readonly
|
|
outlined
|
|
class="inputgreen"
|
|
label="ประเภทการพัฒนา"
|
|
v-model="formBody.studyTopic"
|
|
:options="[
|
|
'ศึกษา',
|
|
'ฝึกอบรม',
|
|
'ประชุม',
|
|
'ดูงาน',
|
|
'ปฏิบัติการวิจัย',
|
|
]"
|
|
/>
|
|
</div>
|
|
|
|
<div class="col-xs-12 col-md-3">
|
|
<q-input
|
|
dense
|
|
readonly
|
|
outlined
|
|
label="ระดับปริญญา"
|
|
class="inputgreen"
|
|
v-model="formBody.degreeLevel"
|
|
/>
|
|
</div>
|
|
|
|
<div class="col-xs-12 col-md-6">
|
|
<q-input
|
|
dense
|
|
readonly
|
|
outlined
|
|
class="inputgreen"
|
|
label="หลักสูตรการฝึกอบรม"
|
|
v-model="formBody.course"
|
|
/>
|
|
</div>
|
|
|
|
<div class="col-xs-12 col-md-3">
|
|
<q-input
|
|
dense
|
|
readonly
|
|
outlined
|
|
label="สาขาวิชา"
|
|
class="inputgreen"
|
|
v-model="formBody.field"
|
|
/>
|
|
</div>
|
|
|
|
<div class="col-xs-12 col-md-3">
|
|
<q-input
|
|
dense
|
|
readonly
|
|
outlined
|
|
label="คณะ"
|
|
class="inputgreen"
|
|
v-model="formBody.faculty"
|
|
/>
|
|
</div>
|
|
|
|
<div class="col-xs-12 col-md-6">
|
|
<q-input
|
|
readonly
|
|
dense
|
|
outlined
|
|
label="สถาบันการศึกษา/หน่วยงานผู้จัด"
|
|
class="inputgreen"
|
|
v-model="formBody.studyPlace"
|
|
/>
|
|
</div>
|
|
|
|
<div class="col-xs-12 col-md-3">
|
|
<datepicker
|
|
readonly
|
|
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
|
|
readonly
|
|
class="inputgreen"
|
|
:model-value="
|
|
formBody.startDate
|
|
? date2Thai(formBody.startDate)
|
|
: null
|
|
"
|
|
:label="`${'วันเริ่มต้นการฝึกอบรม'}`"
|
|
>
|
|
<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-md-3">
|
|
<datepicker
|
|
readonly
|
|
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
|
|
readonly
|
|
class="inputgreen"
|
|
:model-value="
|
|
formBody.endDate
|
|
? date2Thai(formBody.endDate)
|
|
: null
|
|
"
|
|
:label="`${'วันสิ้นสุดการฝึกอบรม'}`"
|
|
>
|
|
<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-md-6">
|
|
<q-input
|
|
dense
|
|
readonly
|
|
outlined
|
|
label="ประเทศที่ไปศึกษา ฝึกอบรม ประชุม ดูงาน และปฏิบัติการวิจัย"
|
|
class="inputgreen"
|
|
v-model="formBody.studyCountry"
|
|
/>
|
|
</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-xs-12 col-md-md-6">
|
|
<q-input
|
|
readonly
|
|
dense
|
|
outlined
|
|
class="inputgreen"
|
|
label="หลักสูตรการฝึกอบรม"
|
|
v-model="formBody.course"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-md-md-6">
|
|
<q-input
|
|
dense
|
|
readonly
|
|
outlined
|
|
class="inputgreen"
|
|
label="สถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม"
|
|
v-model="formBody.educationalInstitution"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-md-md-3">
|
|
<datepicker
|
|
readonly
|
|
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
|
|
readonly
|
|
outlined
|
|
class="inputgreen"
|
|
:model-value="
|
|
formBody.startDate
|
|
? date2Thai(formBody.startDate)
|
|
: null
|
|
"
|
|
:label="`${'วันเริ่มต้นการฝึกอบรม'}`"
|
|
>
|
|
<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-md-md-3">
|
|
<datepicker
|
|
readonly
|
|
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
|
|
readonly
|
|
class="inputgreen"
|
|
:model-value="
|
|
formBody.endDate ? date2Thai(formBody.endDate) : null
|
|
"
|
|
:label="`${'วันสิ้นสุดการฝึกอบรม'}`"
|
|
>
|
|
<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" v-if="!$q.screen.gt.xs"></div>
|
|
<div class="col-xs-12 col-md-6">
|
|
<q-input
|
|
dense
|
|
readonly
|
|
outlined
|
|
label="สถานที่ไปศึกษาดูงานในประเทศ"
|
|
class="inputgreen"
|
|
v-model="formBody.studyPlace"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-md-6">
|
|
<q-input
|
|
dense
|
|
readonly
|
|
outlined
|
|
label="หัวข้อการไปศึกษาดูงานในประเทศ"
|
|
class="inputgreen"
|
|
v-model="formBody.studyTopic"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-md-3">
|
|
<datepicker
|
|
readonly
|
|
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
|
|
readonly
|
|
outlined
|
|
class="inputgreen"
|
|
:model-value="
|
|
formBody.studyStartDate
|
|
? date2Thai(formBody.studyStartDate)
|
|
: null
|
|
"
|
|
:label="`${'วันเริ่มต้นการศึกษาดูงานในประเทศ'}`"
|
|
>
|
|
<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-md-3">
|
|
<datepicker
|
|
readonly
|
|
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
|
|
readonly
|
|
outlined
|
|
class="inputgreen"
|
|
:model-value="
|
|
formBody.studyEndDate
|
|
? date2Thai(formBody.studyEndDate)
|
|
: null
|
|
"
|
|
:label="`${'วันสิ้นสุดการศึกษาดูงานในประเทศ'}`"
|
|
>
|
|
<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" v-if="!$q.screen.gt.xs"></div>
|
|
<div class="col-xs-12 col-md-6">
|
|
<q-input
|
|
dense
|
|
readonly
|
|
outlined
|
|
label="ประเทศที่ไปศึกษาดูงาน"
|
|
class="inputgreen"
|
|
v-model="formBody.studyCountry"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-md-6">
|
|
<q-input
|
|
dense
|
|
outlined
|
|
readonly
|
|
label="หัวข้อการไปศึกษาดูงานต่างประเทศ"
|
|
class="inputgreen"
|
|
v-model="formBody.studyAbroadTopic"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-12 col-md-3">
|
|
<datepicker
|
|
readonly
|
|
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
|
|
readonly
|
|
outlined
|
|
class="inputgreen"
|
|
:model-value="
|
|
formBody.studyAbroadStartDate
|
|
? date2Thai(formBody.studyAbroadStartDate)
|
|
: null
|
|
"
|
|
:label="`${'วันเริ่มต้นการศึกษาดูงานต่างประเทศ'}`"
|
|
>
|
|
<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="ccol-xs-12 ol-md-3">
|
|
<datepicker
|
|
readonly
|
|
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
|
|
readonly
|
|
outlined
|
|
class="inputgreen"
|
|
:model-value="
|
|
formBody.studyAbroadEndDate
|
|
? date2Thai(formBody.studyAbroadEndDate)
|
|
: null
|
|
"
|
|
:label="`${'วันสิ้นสุดการศึกษาดูงานต่างประเทศ'}`"
|
|
>
|
|
<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-md-3">
|
|
<q-input
|
|
readonly
|
|
dense
|
|
outlined
|
|
label="รวมระยะเวลาในการฝึกอบรม "
|
|
class="inputgreen"
|
|
v-model="formBody.totalPeriod"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
|
|
<DialogReturn v-model:modal="dialogReturn" />
|
|
</template>
|