750 lines
26 KiB
Vue
750 lines
26 KiB
Vue
<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>
|