UI ข้าราชการฯที่ได้รับทุนการศึกษา/ฝึกอบรม
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
ff064f27ff
commit
0a9b96567a
3 changed files with 1080 additions and 4 deletions
750
src/modules/15_development/components/scholarship/DetailView.vue
Normal file
750
src/modules/15_development/components/scholarship/DetailView.vue
Normal file
|
|
@ -0,0 +1,750 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const $q = useQuasar();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const { dialogConfirm, showLoader, hideLoader, date2Thai } = useCounterMixin();
|
||||
|
||||
const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม");
|
||||
|
||||
const budgetSourceOp = ref<any>(["แหล่งงบประมาณกทม", "แหล่งงบประมาณอื่นๆ"]);
|
||||
const scholarshipTypeOp = ref<any>([
|
||||
{ id: "1", label: "การศึกษาในประเทศ" },
|
||||
{
|
||||
id: "2",
|
||||
label:
|
||||
"ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่ไม่มีการไปต่างประเทศ)",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
label:
|
||||
"ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่มีการไปต่างประเทศ)",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
label:
|
||||
"ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรประเภทนักบริหาร)",
|
||||
},
|
||||
]);
|
||||
const scholarshipTypeShortOp = ref<any>(["ทุน 1 (ก)(ข)(ค)", "ทุน 2 (ก)(ข)"]);
|
||||
|
||||
const isGov = ref<boolean>(false);
|
||||
const dataPerson = reactive({
|
||||
id: "",
|
||||
citizenId: "123xxxxxxxxxx",
|
||||
name: "นางสาวสาวิตรี ศรีสมัย",
|
||||
position: "นักทรัพยากรบุคคล",
|
||||
type: "ทั่วไป",
|
||||
level: "ปฏิบัติงาน",
|
||||
positionPath: "นักทรัพยากรบุคคล",
|
||||
org: "-",
|
||||
});
|
||||
const formData = reactive({
|
||||
personId: "",
|
||||
year: null,
|
||||
budgetSource: "",
|
||||
approveBudget: "",
|
||||
approveNumber: "",
|
||||
date: null,
|
||||
approveDate: null,
|
||||
isTime: false,
|
||||
detail: "",
|
||||
scholarshipType: "",
|
||||
scholarshipTypeShort: "",
|
||||
contractNumber: "",
|
||||
contractDate: null,
|
||||
reportNumber: "",
|
||||
reportDate: null,
|
||||
reportLetterDate: null,
|
||||
guarantorId: "",
|
||||
trainingCourse: "",
|
||||
institution: "",
|
||||
trainingDateStart: null,
|
||||
trainingDateEnd: null,
|
||||
studyTopic: "",
|
||||
studyPlace: "",
|
||||
});
|
||||
|
||||
function onSubmit() {
|
||||
dialogConfirm($q, () => {
|
||||
console.log(formData);
|
||||
});
|
||||
}
|
||||
|
||||
function changeTrainingDateStart() {
|
||||
if (
|
||||
formData?.trainingDateStart !== null &&
|
||||
formData?.trainingDateEnd !== null
|
||||
) {
|
||||
const startDate = new Date(formData.trainingDateStart);
|
||||
const endDate = new Date(formData?.trainingDateEnd);
|
||||
if (startDate > endDate) {
|
||||
formData.trainingDateEnd = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
isGov.value = route.params.id ? true : false;
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
class="q-mr-sm"
|
||||
icon="mdi-arrow-left"
|
||||
color="primary"
|
||||
@click="router.go(-1)"
|
||||
/>
|
||||
{{ `${title}ข้าราชการฯที่ได้รับทุนการศึกษา/ฝึกอบรม` }}
|
||||
</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="เลือกข้าราชการ">
|
||||
<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.positionPath }}
|
||||
</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-3">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formData.year"
|
||||
: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
|
||||
:model-value="
|
||||
formData.year ? Number(formData.year) + 543 : null
|
||||
"
|
||||
:label="`${'ปีงบประมาณที่ได้รับทุน'}`"
|
||||
hide-bottom-space
|
||||
:rules="[
|
||||
(val) => !!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
|
||||
label="แหล่งงบประมาณ"
|
||||
hide-bottom-space
|
||||
v-model="formData.budgetSource"
|
||||
:options="budgetSourceOp"
|
||||
:rules="[
|
||||
(val:string) =>
|
||||
!!val || `${'กรุณาเลือกแหล่งงบประมาณ'}`,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
v-model="formData.approveBudget"
|
||||
label="งบประมาณที่ได้รับอนุมัติตลอดหลักสูตร"
|
||||
mask="###,###,###,###,###,###"
|
||||
reverse-fill-mask
|
||||
:rules="[
|
||||
(val:string) =>
|
||||
!!val || `${'กรุณากรอกงบประมาณที่ได้รับอนุมัติตลอดหลักสูตร'}`,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
v-model="formData.approveNumber"
|
||||
label="เลขที่หนังสิออนุมัติ"
|
||||
mask="#"
|
||||
hide-bottom-space
|
||||
reverse-fill-mask
|
||||
:rules="[
|
||||
(val:string) =>
|
||||
!!val || `${'กรุณากรอกเลขที่หนังสิออนุมัติ'}`,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formData.date"
|
||||
: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
|
||||
:model-value="formData.date ? date2Thai(formData.date) : 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="formData.approveDate"
|
||||
: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
|
||||
:model-value="
|
||||
formData.approveDate ? date2Thai(formData.approveDate) : 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="formData.isTime"
|
||||
label="ใช้เวลาราชการ"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
v-model="formData.detail"
|
||||
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="formData.scholarshipType"
|
||||
:options="scholarshipTypeOp"
|
||||
option-label="label"
|
||||
option-value="id"
|
||||
emit-value
|
||||
map-options
|
||||
input-class="text-red"
|
||||
label="เลือกประเภททุน"
|
||||
:rules="[
|
||||
(val:string) =>
|
||||
!!val || `${'กรุณาเลือกประเภททุน'}`,
|
||||
]"
|
||||
>
|
||||
<template v-slot:selected-item="scope">
|
||||
<div class="text-primary">{{ scope.opt.label }}</div>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
<div
|
||||
class="col-3"
|
||||
v-if="
|
||||
formData.scholarshipType !== '' && formData.scholarshipType !== '4'
|
||||
"
|
||||
>
|
||||
<q-select
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
lazy-rules
|
||||
v-model="formData.scholarshipTypeShort"
|
||||
:options="scholarshipTypeShortOp"
|
||||
label="ประเภททุน"
|
||||
:rules="[
|
||||
(val:string) =>
|
||||
!!val || `${'กรุณาเลือกประเภททุน'}`,
|
||||
]"
|
||||
>
|
||||
<template v-slot:selected>
|
||||
<div class="text-primary">
|
||||
{{ formData.scholarshipTypeShort }}
|
||||
</div>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
<div
|
||||
class="col-12"
|
||||
v-if="
|
||||
formData.scholarshipType !== '' && formData.scholarshipType !== '4'
|
||||
"
|
||||
>
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="col-3">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
reverse-fill-mask
|
||||
label="เลขที่สัญญา"
|
||||
mask="#"
|
||||
v-model="formData.contractNumber"
|
||||
:rules="[
|
||||
(val:string) =>
|
||||
!!val || `${'กรุณากรอกเลขที่สัญญา'}`,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formData.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
|
||||
:model-value="
|
||||
formData.contractDate
|
||||
? date2Thai(formData.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
|
||||
reverse-fill-mask
|
||||
lazy-rules
|
||||
v-model="formData.reportNumber"
|
||||
mask="#"
|
||||
label="เลขที่หนังสือรายงานตัวกลับ"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณากรอกเลขที่หนังสือรายงานตัวกลับ'}`,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formData.reportDate"
|
||||
: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
|
||||
:model-value="
|
||||
formData.reportDate
|
||||
? date2Thai(formData.reportDate)
|
||||
: 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="formData.reportLetterDate"
|
||||
: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
|
||||
:model-value="
|
||||
formData.reportLetterDate
|
||||
? date2Thai(formData.reportLetterDate)
|
||||
: 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="เลือกผู้ค้ำประกัน"
|
||||
>
|
||||
<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">
|
||||
<div class="col">
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
|
||||
<div class="col-8 text-weight-medium">123xxxxxxxxxx</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">123xxxxxxxxxx</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12" v-else-if="formData.scholarshipType === '4'">
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="col-6">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
label="หลักสูตรการฝึกอบรม"
|
||||
v-model="formData.trainingCourse"
|
||||
:rules="[
|
||||
(val:string) =>
|
||||
!!val || `${'กรุณากรอกหลักสูตรการฝึกอบรม'}`,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
label="สถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม"
|
||||
v-model="formData.institution"
|
||||
:rules="[
|
||||
(val:string) =>
|
||||
!!val || `${'กรุณากรอกสถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม'}`,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-3">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formData.trainingDateStart"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
@update:model-value="changeTrainingDateStart()"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
:model-value="
|
||||
formData.trainingDateStart
|
||||
? date2Thai(formData.trainingDateStart)
|
||||
: 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="formData.trainingDateEnd"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:min-date="formData.trainingDateStart"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
:model-value="
|
||||
formData.trainingDateEnd
|
||||
? date2Thai(formData.trainingDateEnd)
|
||||
: 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="สถานที่ไปศึกษาดูงาน"
|
||||
v-model="formData.studyPlace"
|
||||
:rules="[
|
||||
(val:string) =>
|
||||
!!val || `${'กรุณากรอกสถานที่ไปศึกษาดูงาน'}`,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
label="หัวข้อไปศึกษาดูงาน"
|
||||
v-model="formData.studyTopic"
|
||||
: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>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue