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

ทะเบียนประวัติ: UI ประวัติการศึกษา

Browse source
This commit is contained in:
oat_dev 2024-03-12 14:00:04 +07:00
parent b11c147a5b
commit 8777cf4e93
2 changed files with 848 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

67
src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
View file

@ -6,7 +6,7 @@ import { QForm, useQuasar } from "quasar";
const mixin = useCounterMixin();
const $q = useQuasar();
const { dialogConfirm, success, messageError, showLoader, hideLoader } = mixin;
const { dialogConfirm } = mixin;
const formRef = ref<QForm | null>(null);
@ -16,7 +16,7 @@ const fatherPrefixRef = ref<any>(null);
const fatherFirstNameRef = ref<any>(null);
const fatherLastNameRef = ref<any>(null);
const fatherData = reactive({
isHaveInfo: "0",
isHaveInfo: 0,
isDead: false,
citizenId: null,
prefix: null,
@ -26,7 +26,7 @@ const fatherData = reactive({
job: null,
});
const motherData = reactive({
isHaveInfo: "0",
isHaveInfo: 0,
isDead: false,
citizenId: null,
prefix: null,
@ -36,7 +36,7 @@ const motherData = reactive({
job: null,
});
const spouseData = reactive({
isHave: "0",
isHave: 0,
isDead: false,
citizenId: null,
prefix: null,
@ -69,7 +69,6 @@ function closeHistoryDialog() {
}
function validateForm() {
console.log("test");
onSubmit();
}
@ -105,8 +104,8 @@ function deleteChildren(items: any) {
<template>
<div>
<div class="flex justify-between text-center">
<div class="text-h6 text-center">ข้อมูลครอบครัว</div>
<div class="flex justify-between">
<div class="toptitle col text-dark">ข้อมูลครอบครัว</div>
<div>
<q-btn
round
@ -217,7 +216,7 @@ function deleteChildren(items: any) {
v-model="motherData.isHaveInfo"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="1"
:val="1"
:disable="true"
label="มีข้อมูล"
dense
@ -227,7 +226,7 @@ function deleteChildren(items: any) {
v-model="motherData.isHaveInfo"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="0"
:val="0"
:disable="true"
color="red"
label="ไม่มีข้อมูล"
@ -465,7 +464,7 @@ function deleteChildren(items: any) {
v-model="fatherData.isHaveInfo"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="1"
:val="1"
label="มีข้อมูล"
dense
color="primary"
@ -474,14 +473,14 @@ function deleteChildren(items: any) {
v-model="fatherData.isHaveInfo"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="0"
:val="0"
color="red"
label="ไม่มีข้อมูล"
dense
/>
<q-separator color="grey-4" vertical />
<q-checkbox
:disable="fatherData.isHaveInfo === '0' ? true : false"
:disable="!fatherData.isHaveInfo"
outline
v-model="fatherData.isDead"
label="เสียชีวิตแล้ว"
@ -492,7 +491,7 @@ function deleteChildren(items: any) {
</div>
<div class="flex q-gutter-sm">
<q-input
:disable="fatherData.isHaveInfo === '0' ? true : false"
:disable="!fatherData.isHaveInfo"
class="col"
outlined
hide-bottom-space
@ -503,7 +502,7 @@ function deleteChildren(items: any) {
mask="#############"
/>
<q-select
:disable="fatherData.isHaveInfo === '0' ? true : false"
:disable="!fatherData.isHaveInfo"
class="col"
outlined
lazy-rules
@ -512,9 +511,10 @@ function deleteChildren(items: any) {
:options="fatherData.optionPrefix"
:rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
label="คำนำหน้าชื่อ"
hidden-space
/>
<q-input
:disable="fatherData.isHaveInfo === '0' ? true : false"
:disable="!fatherData.isHaveInfo"
class="col"
outlined
dense
@ -522,9 +522,10 @@ function deleteChildren(items: any) {
v-model="fatherData.firstName"
:rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
label="ชื่อ"
hidden-space
/>
<q-input
:disable="fatherData.isHaveInfo === '0' ? true : false"
:disable="!fatherData.isHaveInfo"
class="col"
outlined
dense
@ -534,7 +535,7 @@ function deleteChildren(items: any) {
label="นามสกุล"
/>
<q-input
:disable="fatherData.isHaveInfo === '0' ? true : false"
:disable="!fatherData.isHaveInfo"
class="col"
outlined
dense
@ -549,7 +550,7 @@ function deleteChildren(items: any) {
v-model="motherData.isHaveInfo"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="1"
:val="1"
label="มีข้อมูล"
dense
color="primary"
@ -558,14 +559,14 @@ function deleteChildren(items: any) {
v-model="motherData.isHaveInfo"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="0"
:val="0"
color="red"
label="ไม่มีข้อมูล"
dense
/>
<q-separator color="grey-4" vertical />
<q-checkbox
:disable="motherData.isHaveInfo === '0' ? true : false"
:disable="!motherData.isHaveInfo"
outline
v-model="motherData.isDead"
label="เสียชีวิตแล้ว"
@ -576,7 +577,7 @@ function deleteChildren(items: any) {
</div>
<div class="flex q-gutter-sm">
<q-input
:disable="motherData.isHaveInfo === '0' ? true : false"
:disable="!motherData.isHaveInfo"
class="col"
outlined
hide-bottom-space
@ -587,7 +588,7 @@ function deleteChildren(items: any) {
mask="#############"
/>
<q-select
:disable="motherData.isHaveInfo === '0' ? true : false"
:disable="!motherData.isHaveInfo"
class="col"
outlined
dense
@ -598,7 +599,7 @@ function deleteChildren(items: any) {
label="คำนำหน้าชื่อ"
/>
<q-input
:disable="motherData.isHaveInfo === '0' ? true : false"
:disable="!motherData.isHaveInfo"
class="col"
outlined
:rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
@ -608,7 +609,7 @@ function deleteChildren(items: any) {
label="ชื่อ"
/>
<q-input
:disable="motherData.isHaveInfo === '0' ? true : false"
:disable="!motherData.isHaveInfo"
:rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
class="col"
outlined
@ -618,7 +619,7 @@ function deleteChildren(items: any) {
label="นามสกุล"
/>
<q-input
:disable="motherData.isHaveInfo === '0' ? true : false"
:disable="!motherData.isHaveInfo"
class="col"
outlined
dense
@ -633,7 +634,7 @@ function deleteChildren(items: any) {
v-model="spouseData.isHave"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="1"
:val="1"
label="มี"
dense
color="primary"
@ -642,14 +643,14 @@ function deleteChildren(items: any) {
v-model="spouseData.isHave"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="0"
:val="0"
color="red"
label="ไม่มี"
dense
/>
<q-separator color="grey-4" vertical />
<q-checkbox
:disable="spouseData.isHave === '0' ? true : false"
:disable="!spouseData.isHave"
outline
v-model="spouseData.isDead"
label="เสียชีวิตแล้ว"
@ -661,7 +662,7 @@ function deleteChildren(items: any) {
<div class="flex q-gutter-sm">
<q-input
class="col"
:disable="spouseData.isHave === '0' ? true : false"
:disable="!spouseData.isHave"
outlined
hide-bottom-space
dense
@ -672,7 +673,7 @@ function deleteChildren(items: any) {
/>
<q-select
class="col"
:disable="spouseData.isHave === '0' ? true : false"
:disable="!spouseData.isHave"
outlined
dense
v-model="spouseData.prefix"
@ -682,7 +683,7 @@ function deleteChildren(items: any) {
/>
<q-input
class="col"
:disable="spouseData.isHave === '0' ? true : false"
:disable="!spouseData.isHave"
outlined
dense
:rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
@ -692,7 +693,7 @@ function deleteChildren(items: any) {
<q-input
class="col"
:rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
:disable="spouseData.isHave === '0' ? true : false"
:disable="!spouseData.isHave"
outlined
dense
v-model="spouseData.lastName"
@ -700,7 +701,7 @@ function deleteChildren(items: any) {
/>
<q-input
class="col"
:disable="spouseData.isHave === '0' ? true : false"
:disable="!spouseData.isHave"
outlined
dense
v-model="spouseData.job"

817
src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
View file

@ -1,6 +1,817 @@
<script setup lang="ts"></script>
<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import moment from "moment";
import dialogHeader from "@/components/DialogHeader.vue";
import type { QTableProps } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { QForm, useQuasar } from "quasar";
const mixin = useCounterMixin();
const $q = useQuasar();
const { dialogConfirm, date2Thai } = mixin;
const addDataDialog = ref<boolean>(false);
const mode = ref<string>("table");
const columns = ref<QTableProps["columns"]>([
{
name: "level",
align: "left",
label: "ระดับศึกษา",
sortable: true,
field: "level",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "institute",
align: "left",
label: "สถานศึกษา",
sortable: true,
field: "institute",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "startDate",
align: "left",
label: "ตั้งแต่",
sortable: true,
field: "startDate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "finishDate",
align: "left",
label: "ถึง",
sortable: true,
field: "finishDate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "graduateDate",
align: "left",
label: "วันที่สำเร็จการศึกษา",
sortable: true,
field: "graduateDate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "isEducation",
align: "left",
label: "เป็นวุฒิการศึกษาในตำแหน่ง",
sortable: true,
field: "isEducation",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "degree",
align: "left",
label: "วุฒิการศึกษา",
sortable: true,
field: "degree",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "field",
align: "left",
label: "สาขาวิชา/ทาง",
sortable: true,
field: "field",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "fundName",
align: "left",
label: "ทุน",
sortable: true,
field: "fundName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "gpa",
align: "left",
label: "เกรดเฉลี่ย",
sortable: true,
field: "gpa",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "country",
align: "left",
label: "ประเทศ",
sortable: true,
field: "country",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "other",
align: "left",
label: "ข้อมูลการติดต่อ",
sortable: true,
field: "other",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "duration",
align: "left",
label: "ระยะเวลา",
sortable: true,
field: "duration",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "durationYear",
align: "left",
label: "ระยะเวลาหลักสูตร",
sortable: true,
field: "durationYear",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const isDate = ref<string>("false");
const educationOption = ["ใช่", "ไม่ใช่"];
const educationData = reactive({
level: "",
institute: "",
startYear: new Date().getFullYear(),
finishYear: new Date().getFullYear(),
graduateDate: new Date(),
startDate: new Date(),
finishDate: new Date(),
isEducation: "",
degree: "",
field: "",
fundName: "",
gpa: null,
country: "",
other: "",
duration: "",
durationYear: "",
note: "",
});
const row = [
{
level: "ประกาศนียบัตรบัณฑิต",
institute: "เชียงใหม่วิทย์",
degree: "ปริญญาตรี",
field: "วิศวะคอม",
gpa: "",
country: "อังกฤษ",
duration: "3 ปี",
durationYear: "4 ปี",
other: "อบต เชียงใหม่",
fundName: "ทุนรัฐบาล",
isEducation: "ปริญญาตรี",
finishDate: new Date(),
startDate: new Date(),
graduateDate: new Date(),
},
{
level: "ประกาศนียบัตรบัณฑิต",
institute: "โปลิวิทยาคม",
degree: "ปริญญาตรี",
field: "วิศวะคอม",
gpa: "3.8",
country: "อังกฤษ",
duration: "3 ปี",
durationYear: "4 ปี",
other: "อบต เชียงใหม่",
fundName: "ทุนรัฐบาล",
isEducation: "ปริญญาตรี",
finishDate: new Date(),
startDate: new Date(),
graduateDate: new Date(),
},
{
level: "ประกาศนียบัตรบัณฑิต",
institute: "โรงเรียนวัฒโน",
degree: "ปริญญาตรี",
field: "วิศวะคอม",
gpa: "3.8",
country: "อังกฤษ",
duration: "3 ปี",
durationYear: "4 ปี",
other: "อบต เชียงใหม่",
fundName: "ทุนรัฐบาล",
isEducation: "ปริญญาตรี",
finishDate: new Date(),
startDate: new Date(),
graduateDate: new Date(),
},
{
level: "ประกาศนียบัตรบัณฑิต",
institute: "โรงเรียนวัฒโน",
degree: "ปริญญาตรี",
field: "วิศวะคอม",
gpa: "3.8",
country: "อังกฤษ",
duration: "3 ปี",
durationYear: "4 ปี",
other: "อบต เชียงใหม่",
fundName: "ทุนรัฐบาล",
isEducation: "ปริญญาตรี",
finishDate: new Date(),
startDate: new Date(),
graduateDate: new Date(),
},
];
const visibleColumns = ref<string[]>([
"level",
"institute",
"degree",
"field",
"gpa",
"country",
"duration",
"durationYear",
"other",
"fundName",
"isEducation",
"finishDate",
"startDate",
"graduateDate",
]);
function validateForm() {
onSubmit();
}
async function onSubmit() {
dialogConfirm(
$q,
async () => {
closeDialog();
},
"ยืนยันการบันทึกข้อมูล",
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
);
}
function closeDialog() {
addDataDialog.value = false;
}
watch(
() => isDate.value,
() => {
if (isDate.value === "true") {
educationData.startDate = new Date(`${educationData.startYear}`);
educationData.finishDate = new Date(`${educationData.finishYear}`);
} else {
educationData.startYear = parseInt(
moment(educationData.startDate).format("YYYY")
);
educationData.finishYear = parseInt(
moment(educationData.finishDate).format("YYYY")
);
}
}
);
</script>
<template>
<div>5</div>
<div class="toptitle col text-dark">ประวัติการศึกษา</div>
<q-toolbar style="padding: 0px">
<q-btn
round
flat
color="primary"
icon="add"
size="16px"
@click="addDataDialog = true"
>
<q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
>
<q-space />
<q-select
v-if="mode === 'table'"
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
options-cover
style="min-width: 150px"
class="q-mr-sm"
/>
<q-btn-toggle
v-model="mode"
dense
class="no-shadow"
toggle-color="grey-4"
:options="[
{ value: 'table', slot: 'table' },
{ value: 'card', slot: 'card' },
]"
>
<template v-slot:table>
<q-icon
name="format_list_bulleted"
size="24px"
:style="{
color: mode === 'table' ? '#787B7C' : '#C9D3DB',
}"
/>
</template>
<template v-slot:card>
<q-icon
name="mdi-view-grid-outline"
size="24px"
:style="{
color: mode === 'card' ? '#787B7C' : '#C9D3DB',
}"
/>
</template>
</q-btn-toggle>
</q-toolbar>
<d-table
:grid="mode === 'card'"
ref="table"
:columns="columns"
:rows="row"
row-key="name"
flat
bordered
:paging="true"
dense
:rows-per-page-options="[20, 50, 100]"
class="custom-header-table"
:visible-columns="visibleColumns"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width />
</q-tr>
</template>
<template v-slot:body="props" v-if="mode === 'table'">
<q-tr :props="props" class="cursor-pointer">
<q-td v-for="col in props.cols" :key="col.id">
<div
v-if="
col.name === 'startDate' ||
col.name === 'finishDate' ||
col.name === 'graduateDate'
"
>
{{ col.value ? date2Thai(col.value) : "-" }}
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn color="info" flat dense round size="14px" icon="mdi-history" />
</q-td>
</q-tr>
</template>
<template v-slot:item="props" v-else>
<div
class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
>
<q-card bordered>
<q-card-actions align="right">
<q-btn flat round color="primary" icon="edit">
<q-tooltip>แก่ไขข้อมุล</q-tooltip>
</q-btn>
<q-btn flat round color="blue" icon="history">
<q-tooltip>ประวัติบันทึกวันที่ไม่ได้รับเงินเดือนฯ</q-tooltip>
</q-btn>
</q-card-actions>
<q-separator />
<q-list>
<q-item
v-for="col in props.cols.filter((col) => col.name !== 'desc')"
:key="col.name"
>
<q-item-section>
<q-item-label>{{ col.label }}</q-item-label>
</q-item-section>
<q-item-section side>
<q-item-label
caption
v-if="
col.name === 'startDate' ||
col.name === 'finishDate' ||
col.name === 'graduateDate'
"
>
{{ col.value ? date2Thai(col.value) : "-" }}
</q-item-label>
<q-item-label caption v-else>{{ col.value }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</template>
</d-table>
<q-dialog v-model="addDataDialog" class="dialog" persistent>
<q-card style="min-width: 40%" class="bg-grey-11">
<q-form @submit.prevent greedy @validation-success="validateForm">
<q-card-section class="flex justify-between" style="padding: 0">
<dialog-header tittle="เพิ่มประวัติการศึกษา" :close="closeDialog" />
</q-card-section>
<q-separator color="grey-4" />
<div class="col">
<q-card-section class="row q-gutter-sm">
<q-input
outlined
v-model="educationData.level"
label="ระดับการศึกษา"
bg-color="white"
class="col"
dense
:rules="[(val) => !!val || `${'กรุณากรอกระดับการศึกษา'}`]"
hide-bottom-space
/>
<q-input
outlined
v-model="educationData.institute"
label="สถานศึกษา"
bg-color="white"
class="col"
dense
:rules="[(val) => !!val || `${'กรุณากรอกสถานศึกษา'}`]"
hide-bottom-space
/>
</q-card-section>
<q-card flat bordered class="q-px-sm q-mx-md q-mb q-pb-sm borderCard">
<div class="row col-12 q-gutter-md q-py-sm text-grey-7">
<q-radio
v-model="isDate"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="false"
label="ปี"
dense
/>
<q-radio
v-model="isDate"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="true"
label="วัน/เดือน/ปี"
dense
/>
</div>
<div v-if="isDate === 'false'" class="row q-gutter-sm">
<datepicker
menu-class-name="modalfix"
v-model="educationData.startYear"
:locale="'th'"
autoApply
class="col"
year-picker
:enableTimePicker="false"
@update:modelValue="educationData.startYear"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
lazy-rules
outlined
hide-bottom-space
:model-value="educationData.startYear + 543"
:rules="[
(val) => !!val || `${'กรุณาเลือกปีที่เริ่มต้นศึกษา'}`,
]"
:label="`${'ปีที่เริ่มต้นศึกษา'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
menu-class-name="modalfix"
v-model="educationData.finishYear"
:locale="'th'"
autoApply
class="col"
year-picker
:enableTimePicker="false"
@update:modelValue="educationData.finishYear"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
lazy-rules
outlined
hide-bottom-space
:model-value="educationData.finishYear + 543"
:rules="[
(val) => !!val || `${'กรุณาเลือกปีที่จบการศึกษา'}`,
]"
: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="isDate === 'true'" class="row q-gutter-sm">
<datepicker
class="col"
menu-class-name="modalfix"
v-model="educationData.startDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
outlined
dense
lazy-rules
:model-value="date2Thai(educationData.startDate)"
:rules="[
(val) => !!val || `${'กรุณาเลือกวันที่เริ่มต้นศึกษา'}`,
]"
hide-bottom-space
:label="`${'วัน/เดือน/ปี ที่เริ่มต้นศึกษา'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
color="primary"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
menu-class-name="modalfix"
v-model="educationData.finishDate"
:locale="'th'"
class="col"
autoApply
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
outlined
dense
lazy-rules
:model-value="date2Thai(educationData.finishDate)"
:rules="[
(val) => !!val || `${'กรุณาเลือกวันที่จบการศึกษา'}`,
]"
hide-bottom-space
:label="`${'วัน/เดือน/ปี ที่จบการศึกษา'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
color="primary"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
</q-card>
<q-card-section class="row q-gutter-sm q-pt-sm">
<datepicker
menu-class-name="modalfix"
v-model="educationData.graduateDate"
:locale="'th'"
class="col"
autoApply
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
outlined
bg-color="white"
dense
lazy-rules
:model-value="date2Thai(educationData.graduateDate)"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
hide-bottom-space
:label="`${'วันที่ได้รับ'}`"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" color="primary">
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-select
outlined
dense
bg-color="white"
class="col"
v-model="educationData.isEducation"
:options="educationOption"
label="เป็นวุฒิการศึกษาในตำแหน่ง"
/>
</q-card-section>
<q-card-section class="row q-gutter-sm q-py-none">
<q-input
outlined
v-model="educationData.degree"
label="วุฒิการศึกษา"
bg-color="white"
class="col"
dense
:rules="[(val) => !!val || `${'กรุณากรอกวุฒิการศึกษา'}`]"
hide-bottom-space
/>
<q-input
outlined
v-model="educationData.field"
label="สาขาวิชา/ทาง"
bg-color="white"
class="col"
dense
/>
</q-card-section>
<q-card-section class="row q-gutter-sm q-pt-sm q-pb-none">
<q-input
outlined
v-model="educationData.fundName"
label="ทุน"
bg-color="white"
class="col"
dense
/>
<q-input
outlined
v-model="educationData.gpa"
label="เกรดเฉลี่ย"
bg-color="white"
class="col"
dense
mask="#.##"
/>
</q-card-section>
<q-card-section class="row q-gutter-sm q-pt-sm q-pb-none">
<q-input
outlined
v-model="educationData.country"
label="ประเทศ"
bg-color="white"
class="col"
dense
/>
<q-input
outlined
v-model="educationData.other"
label="ข้อมูลติดต่อ"
bg-color="white"
class="col"
dense
/>
</q-card-section>
<q-card-section class="row q-gutter-sm q-pt-sm q-pb-none">
<q-input
outlined
v-model="educationData.duration"
label="ระยะเวลา"
bg-color="white"
class="col"
dense
/>
<q-input
outlined
v-model="educationData.durationYear"
label="ระยะเวลาหลักสูตร"
bg-color="white"
class="col"
type="number"
dense
/>
</q-card-section>
<q-card-section class="row q-gutter-sm q-pt-sm">
<q-input
outlined
v-model="educationData.note"
label="หมายเหตุ"
bg-color="white"
class="col"
dense
type="textarea"
/>
</q-card-section>
</div>
<q-card-actions align="right">
<q-btn
id="onSubmit"
type="submit"
dense
unelevated
label="บันทึก"
color="public"
class="q-px-md"
>
<q-tooltip>บันทึกข้อมูล</q-tooltip>
</q-btn>
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
</template>
<style scoped></style>
<style scoped>
.borderCard {
border: 1px solid #d0d0d0;
}
</style>