form ยื่นใบลา
This commit is contained in:
setthawutttty
parent
d69ca225a4
commit
14388119e9
15 changed files with 863 additions and 268 deletions
|
|
@ -32,202 +32,200 @@ const props = defineProps({
|
|||
(อาจดึงมาจากที่อยู่ปัจจุบันโดยอัตโนมัติ แต่ให้ผู้ใช้งานแก้ไขได้)
|
||||
</p> -->
|
||||
|
||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
class="col-12 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
v-model="Writeat"
|
||||
label="เขียนที่"
|
||||
:readonly="!edit"
|
||||
:rules="[(val) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
||||
<div class="col-md-4 col-sm-12">
|
||||
<q-radio v-model="halfDay" val="day" label="ลาทั้งวัน" />
|
||||
<q-radio
|
||||
v-model="halfDay"
|
||||
val="half_day_morning"
|
||||
label="ลาครึ่งวันเช้า"
|
||||
/>
|
||||
<q-radio
|
||||
v-model="halfDay"
|
||||
val="half_day_afternoon"
|
||||
label="ลาครึ่งวันบ่าย"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<datepicker
|
||||
class="col-md-3 col-sm-12"
|
||||
menu-class-name="modalfix"
|
||||
v-model="dateLeaveStart"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
class="col-12 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
v-model="Writeat"
|
||||
label="เขียนที่"
|
||||
:readonly="!edit"
|
||||
:rules="[(val) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
|
||||
<div class="col-md-4 col-sm-12">
|
||||
<q-radio v-model="halfDay" val="day" label="ลาทั้งวัน" />
|
||||
<q-radio
|
||||
v-model="halfDay"
|
||||
val="half_day_morning"
|
||||
label="ลาครึ่งวันเช้า"
|
||||
/>
|
||||
<q-radio
|
||||
v-model="halfDay"
|
||||
val="half_day_afternoon"
|
||||
label="ลาครึ่งวันบ่าย"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<datepicker
|
||||
class="col-md-3 col-sm-12"
|
||||
menu-class-name="modalfix"
|
||||
v-model="dateLeaveStart"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
hide-bottom-space
|
||||
:readonly="!edit"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
dateLeaveStart != null ? date2Thai(dateLeaveStart) : null
|
||||
"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
: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>
|
||||
|
||||
<datepicker
|
||||
class="col-md-3 col-sm-12"
|
||||
menu-class-name="modalfix"
|
||||
v-model="dateLeaveEnd"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
hide-bottom-space
|
||||
:readonly="!edit"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
dateLeaveEnd != null ? date2Thai(dateLeaveEnd) : null
|
||||
"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
: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>
|
||||
<q-input
|
||||
class="col-md-2 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
type="number"
|
||||
v-model="dateTotal"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
class="col-3"
|
||||
dense
|
||||
outlined
|
||||
v-model="tel"
|
||||
mask="(###)-###-####"
|
||||
unmasked-value
|
||||
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
||||
hide-bottom-space
|
||||
:readonly="!edit"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
|
||||
]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
class="col-md-9 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
v-model="locationAbsence"
|
||||
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
||||
:readonly="!edit"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
|
||||
]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
type="textarea"
|
||||
class="col-md-12 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
v-model="detail"
|
||||
label="รายละเอียด"
|
||||
:readonly="!edit"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
|
||||
/>
|
||||
|
||||
<q-file
|
||||
v-model="files"
|
||||
dense
|
||||
label="เอกสารประกอบ"
|
||||
outlined
|
||||
use-chips
|
||||
multiple
|
||||
class="q-pl-sm col-6"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
dateLeaveStart != null ? date2Thai(dateLeaveStart) : null
|
||||
"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-file>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<div class="col-12 row" v-if="!edit">
|
||||
<div
|
||||
class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
|
||||
>
|
||||
<div class="q-pl-sm text-weight-bold text-dark">
|
||||
เอกสารเพิ่มเติม
|
||||
</div>
|
||||
</div>
|
||||
<q-card bordered flat class="full-width">
|
||||
<q-list separator>
|
||||
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
|
||||
<q-item-section>
|
||||
<q-item-label class="full-width ellipsis">
|
||||
{{ file.fileName }}
|
||||
</q-item-label>
|
||||
<datepicker
|
||||
class="col-md-3 col-sm-12"
|
||||
menu-class-name="modalfix"
|
||||
v-model="dateLeaveEnd"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
hide-bottom-space
|
||||
:readonly="!edit"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
dateLeaveEnd != null ? date2Thai(dateLeaveEnd) : null
|
||||
"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
: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>
|
||||
<q-input
|
||||
class="col-md-2 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
type="number"
|
||||
v-model="dateTotal"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
|
||||
/>
|
||||
|
||||
<q-item-label caption> </q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
<q-input
|
||||
class="col-3"
|
||||
dense
|
||||
outlined
|
||||
v-model="tel"
|
||||
mask="(###)-###-####"
|
||||
unmasked-value
|
||||
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
||||
:readonly="!edit"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
|
||||
]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
class="col-md-9 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
v-model="locationAbsence"
|
||||
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
||||
:readonly="!edit"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
|
||||
]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
type="textarea"
|
||||
class="col-md-12 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
v-model="detail"
|
||||
label="รายละเอียด"
|
||||
:readonly="!edit"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
|
||||
/>
|
||||
|
||||
<q-file
|
||||
v-model="files"
|
||||
dense
|
||||
label="เอกสารประกอบ"
|
||||
outlined
|
||||
use-chips
|
||||
multiple
|
||||
class="q-pl-sm col-6"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
|
||||
<div class="col-12 row" v-if="!edit">
|
||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||
<div class="q-pl-sm text-weight-bold text-dark">
|
||||
เอกสารเพิ่มเติม
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<q-card bordered flat class="full-width">
|
||||
<q-list separator>
|
||||
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
|
||||
<q-item-section>
|
||||
<q-item-label class="full-width ellipsis">
|
||||
{{ file.fileName }}
|
||||
</q-item-label>
|
||||
|
||||
<q-item-label caption> </q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue"
|
||||
import { ref } from "vue";
|
||||
|
||||
const edit = ref<boolean>(false)
|
||||
const edit = ref<boolean>(false);
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
|
|
@ -11,6 +11,8 @@ const props = defineProps({
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||
<div>
|
||||
ลาไปช่วยเหลือภริยาที่คลอดบุตร
|
||||
<ul>
|
||||
|
|
@ -26,7 +28,8 @@ const props = defineProps({
|
|||
<li>เอกสารประกอบ</li>
|
||||
</ul>
|
||||
<p>
|
||||
*หมายเหตุ ที่อยู่ที่ติดต่อได้ระหว่างลา (อาจดึงมาจากที่อยู่ปัจจุบันโดยอัตโนมัติ แต่ให้ผู้ใช้งานแก้ไขได้)
|
||||
*หมายเหตุ ที่อยู่ที่ติดต่อได้ระหว่างลา
|
||||
(อาจดึงมาจากที่อยู่ปัจจุบันโดยอัตโนมัติ แต่ให้ผู้ใช้งานแก้ไขได้)
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue"
|
||||
import { ref } from "vue";
|
||||
|
||||
const edit = ref<boolean>(false)
|
||||
const edit = ref<boolean>(false);
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
|
|
@ -11,6 +11,8 @@ const props = defineProps({
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||
<div>
|
||||
ลาพักผ่อน
|
||||
<ul>
|
||||
|
|
|
|||
|
|
@ -1,30 +1,467 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue"
|
||||
|
||||
const edit = ref<boolean>(false)
|
||||
import { reactive, ref } from "vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import type { FormRef06 } from "@/modules/05_leave/interface/request/AddAbsence";
|
||||
import { useQuasar } from "quasar";
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, dialogConfirm } = mixin;
|
||||
const edit = ref<boolean>(true);
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
});
|
||||
const files = ref<any>(null);
|
||||
const formData = reactive<any>({
|
||||
writeat: "",
|
||||
government: new Date(),
|
||||
birthday: new Date(),
|
||||
dateLeaveStart: new Date(),
|
||||
dateLeaveEnd: new Date(),
|
||||
totalLeave: new Date(),
|
||||
dateOrdination: new Date(),
|
||||
measureLocationName: "",
|
||||
tel: null,
|
||||
addressMeasure: "",
|
||||
buddhistLocationName: "",
|
||||
addressBuddhist: "",
|
||||
monk: "",
|
||||
});
|
||||
|
||||
const writeatRef = ref<object | null>(null);
|
||||
const governmentRef = ref<object | null>(null);
|
||||
const birthdayRef = ref<object | null>(null);
|
||||
const dateLeaveStartRef = ref<object | null>(null);
|
||||
const dateLeaveEndRef = ref<object | null>(null);
|
||||
const totalLeaveRef = ref<object | null>(null);
|
||||
const dateOrdinationRef = ref<object | null>(null);
|
||||
const measureLocationNameRef = ref<object | null>(null);
|
||||
const telRef = ref<object | null>(null);
|
||||
const addressMeasureRef = ref<object | null>(null);
|
||||
const buddhistLocationNameRef = ref<object | null>(null);
|
||||
const addressBuddhistRef = ref<object | null>(null);
|
||||
|
||||
const formRef: FormRef06 = {
|
||||
writeat: writeatRef,
|
||||
government: governmentRef,
|
||||
birthday: birthdayRef,
|
||||
dateLeaveStart: dateLeaveStartRef,
|
||||
dateLeaveEnd: dateLeaveEndRef,
|
||||
totalLeave: totalLeaveRef,
|
||||
dateOrdination: dateOrdinationRef,
|
||||
measureLocationName: measureLocationNameRef,
|
||||
tel: telRef,
|
||||
addressMeasure: addressMeasureRef,
|
||||
buddhistLocationName: buddhistLocationNameRef,
|
||||
addressBuddhist: addressBuddhistRef,
|
||||
};
|
||||
|
||||
function onValidate() {
|
||||
const hasError = [];
|
||||
|
||||
for (const key in formRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
|
||||
const property = formRef[key];
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate();
|
||||
hasError.push(isValid);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasError.every((result) => result === true)) {
|
||||
onSubmit();
|
||||
}
|
||||
}
|
||||
function onSubmit() {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
console.log(formData);
|
||||
props.onSubmit();
|
||||
},
|
||||
"ยืนยันการบันทึกข้อมูล",
|
||||
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
ลาอุปสมบท
|
||||
<ul>
|
||||
<li>ลาตั้งแต่วันที่</li>
|
||||
<li>ลาถึงวันที่</li>
|
||||
<li>จำนวนวันที่ลา Auto (ส่งลาตั้งแต่วันที่และลาถึงวันที่ ไปคำนวนที่ฝั่ง backend)</li>
|
||||
<li>วันเดือนปีเกิด (Auto)</li>
|
||||
<li>วันที่เข้ารับราชการ (Auto)</li>
|
||||
<li>เคย/ไม่เคยบวช (ให้เลือก)</li>
|
||||
<li>สถานที่บวช มีข้อมูล ชื่อวัด, ที่อยู่, หมายเลขโทรศัพท์</li>
|
||||
<li>วันอุปสมบท</li>
|
||||
<li>สถานที่จำพรรษา มีข้อมูล ชื่อวัด, ที่อยู่</li>
|
||||
<li>รายละเอียด (ไม่บังคับกรอก)</li>
|
||||
<li>เอกสารประกอบ</li>
|
||||
</ul>
|
||||
</div>
|
||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||
<form @submit.prevent="onValidate" class="full-width">
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
ref="writeatRef"
|
||||
class="col-12 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
v-model="formData.writeat"
|
||||
label="เขียนที่"
|
||||
:rules="[(val) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formData.government"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
ref="governmentRef"
|
||||
dense
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
:readonly="!edit"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formData.government != null
|
||||
? date2Thai(formData.government)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่เข้ารับราชการ'}`"
|
||||
: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>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formData.birthday"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
: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
|
||||
ref="birthdayRef"
|
||||
dense
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
:readonly="!edit"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formData.birthday != null
|
||||
? date2Thai(formData.birthday)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันเดือนปีเกิด'}`"
|
||||
: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>
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formData.dateLeaveStart"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
: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
|
||||
ref="dateLeaveStartRef"
|
||||
hide-bottom-space
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formData.dateLeaveStart != null
|
||||
? date2Thai(formData.dateLeaveStart)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
: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>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formData.dateLeaveEnd"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
: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
|
||||
ref="dateLeaveEndRef"
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formData.dateLeaveEnd != null
|
||||
? date2Thai(formData.dateLeaveEnd)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
: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>
|
||||
<q-input
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
type="number"
|
||||
v-model="formData.totalLeave"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
/>
|
||||
|
||||
<div class="q-pl-sm text-weight-bold text-dark col-12">
|
||||
เคยบวชหรือไม่
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-radio
|
||||
v-model="formData.monk"
|
||||
val="ever"
|
||||
label="เคยบวช"
|
||||
checked-icon="task_alt"
|
||||
/>
|
||||
<q-radio
|
||||
v-model="formData.monk"
|
||||
val="never"
|
||||
label="ไม่เคยบวช"
|
||||
checked-icon="task_alt"
|
||||
/>
|
||||
</div>
|
||||
<div class="q-pl-sm text-weight-bold text-dark col-12">สถานที่บวช</div>
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formData.dateOrdination"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
: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
|
||||
ref="dateOrdinationRef"
|
||||
dense
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formData.dateOrdination != null
|
||||
? date2Thai(formData.dateOrdination)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันอุปสมบท'}`"
|
||||
: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>
|
||||
<q-input
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
dense
|
||||
hide-bottom-space
|
||||
ref="measureLocationNameRef"
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formData.measureLocationName"
|
||||
label="ชื่อวัด"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกชื่อวัด'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
ref="telRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="formData.tel"
|
||||
bg-color="white"
|
||||
mask="(###)-###-####"
|
||||
unmasked-value
|
||||
hide-bottom-space
|
||||
label="หมายเลขโทรศัพท์"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์'}`]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-input
|
||||
class="col-12 q-mt-sm"
|
||||
dense
|
||||
ref="addressMeasureRef"
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formData.addressMeasure"
|
||||
label="ที่อยู่"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกที่อยู่'}`]"
|
||||
type="textarea"
|
||||
/>
|
||||
<div class="q-pl-sm text-weight-bold text-dark col-12">
|
||||
สถานที่จำพรรษา
|
||||
</div>
|
||||
<q-input
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
dense
|
||||
ref="buddhistLocationNameRef"
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
outlined
|
||||
v-model="formData.buddhistLocationName"
|
||||
label="ชื่อวัด"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกชื่อวัด'}`]"
|
||||
/>
|
||||
<q-input
|
||||
class="col-12"
|
||||
dense
|
||||
ref="addressBuddhistRef"
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formData.addressBuddhist"
|
||||
label="ที่อยู่"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกที่อยู่'}`]"
|
||||
type="textarea"
|
||||
/>
|
||||
<div class="col-12 row" v-if="!edit">
|
||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||
<div class="q-pl-sm text-weight-bold text-dark">
|
||||
เอกสารเพิ่มเติม
|
||||
</div>
|
||||
</div>
|
||||
<q-card bordered flat class="full-width">
|
||||
<q-list separator>
|
||||
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
|
||||
<q-item-section>
|
||||
<q-item-label class="full-width ellipsis">
|
||||
{{ file.fileName }}
|
||||
</q-item-label>
|
||||
|
||||
<q-item-label caption> </q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
<q-separator class="q-mt-sm" />
|
||||
<div class="row col-12 q-pt-md">
|
||||
<q-space />
|
||||
<q-btn
|
||||
id="onSubmit"
|
||||
type="submit"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center btnBlue"
|
||||
label="บันทึก"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue"
|
||||
import { ref } from "vue";
|
||||
|
||||
const edit = ref<boolean>(false)
|
||||
const edit = ref<boolean>(false);
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
|
|
@ -11,12 +11,17 @@ const props = defineProps({
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||
<div>
|
||||
ลาประกอบพิธีฮัจย์
|
||||
<ul>
|
||||
<li>ลาตั้งแต่วันที่</li>
|
||||
<li>ลาถึงวันที่</li>
|
||||
<li>จำนวนวันที่ลา Auto (ส่งลาตั้งแต่วันที่และลาถึงวันที่ ไปคำนวนที่ฝั่ง backend)</li>
|
||||
<li>
|
||||
จำนวนวันที่ลา Auto (ส่งลาตั้งแต่วันที่และลาถึงวันที่ ไปคำนวนที่ฝั่ง
|
||||
backend)
|
||||
</li>
|
||||
<li>วันที่เข้ารับราชการ (Auto)</li>
|
||||
<li>เคย/ไม่เคยไปประกอบพิธีฮัจย์ (ให้เลือก)</li>
|
||||
<li>รายละเอียด (ไม่บังคับกรอก)</li>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue"
|
||||
import { ref } from "vue";
|
||||
|
||||
const edit = ref<boolean>(false)
|
||||
const edit = ref<boolean>(false);
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
|
|
@ -11,12 +11,17 @@ const props = defineProps({
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||
<div>
|
||||
ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล
|
||||
<ul>
|
||||
<li>ลาตั้งแต่วันที่</li>
|
||||
<li>ลาถึงวันที่</li>
|
||||
<li>จำนวนวันที่ลา Auto (ส่งลาตั้งแต่วันที่และลาถึงวันที่ ไปคำนวนที่ฝั่ง backend)</li>
|
||||
<li>
|
||||
จำนวนวันที่ลา Auto (ส่งลาตั้งแต่วันที่และลาถึงวันที่ ไปคำนวนที่ฝั่ง
|
||||
backend)
|
||||
</li>
|
||||
<li>ได้รับหมายเรียกของ</li>
|
||||
<li>ที่</li>
|
||||
<li>ลงวันที่</li>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue"
|
||||
import { ref } from "vue";
|
||||
|
||||
const edit = ref<boolean>(false)
|
||||
const edit = ref<boolean>(false);
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
|
|
@ -11,6 +11,8 @@ const props = defineProps({
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||
<div>
|
||||
ลาไปศึกษา
|
||||
<ul>
|
||||
|
|
@ -20,7 +22,9 @@ const props = defineProps({
|
|||
<li>วันเดือนปีเกิด (Auto)</li>
|
||||
<li>วันที่เข้ารับราชการ (Auto)</li>
|
||||
<li>เงินเดือนปัจจุบัน (Auto)</li>
|
||||
<li>เงินเดือนปัจจุบัน (เขียนเป็นคำอ่าน) ใช้ฟังก์ชั่นแปลงเลขเป็นข้อความ</li>
|
||||
<li>
|
||||
เงินเดือนปัจจุบัน (เขียนเป็นคำอ่าน) ใช้ฟังก์ชั่นแปลงเลขเป็นข้อความ
|
||||
</li>
|
||||
<li>ศึกษาวิชา</li>
|
||||
<li>ขั้นปริญญา</li>
|
||||
<li>ชื่อสถานศึกษา</li>
|
||||
|
|
@ -33,7 +37,8 @@ const props = defineProps({
|
|||
</ul>
|
||||
|
||||
<p>
|
||||
*หมายเหตุ ที่อยู่ที่ติดต่อได้ระหว่างลา (อาจดึงมาจากที่อยู่ปัจจุบันโดยอัตโนมัติ แต่ให้ผู้ใช้งานแก้ไขได้)
|
||||
*หมายเหตุ ที่อยู่ที่ติดต่อได้ระหว่างลา
|
||||
(อาจดึงมาจากที่อยู่ปัจจุบันโดยอัตโนมัติ แต่ให้ผู้ใช้งานแก้ไขได้)
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue"
|
||||
import { ref } from "vue";
|
||||
|
||||
const edit = ref<boolean>(false)
|
||||
const edit = ref<boolean>(false);
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
|
|
@ -11,6 +11,8 @@ const props = defineProps({
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||
<div>
|
||||
ลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน
|
||||
<ul>
|
||||
|
|
@ -20,7 +22,9 @@ const props = defineProps({
|
|||
<li>วันเดือนปีเกิด (Auto)</li>
|
||||
<li>วันที่เข้ารับราชการ (Auto)</li>
|
||||
<li>เงินเดือนปัจจุบัน (Auto)</li>
|
||||
<li>เงินเดือนปัจจุบัน (เขียนเป็นคำอ่าน) ใช้ฟังก์ชั่นแปลงเลขเป็นข้อความ</li>
|
||||
<li>
|
||||
เงินเดือนปัจจุบัน (เขียนเป็นคำอ่าน) ใช้ฟังก์ชั่นแปลงเลขเป็นข้อความ
|
||||
</li>
|
||||
<li>ด้าน/หลักสูตร</li>
|
||||
<li>ณ สถานที่</li>
|
||||
<li>ประเทศ</li>
|
||||
|
|
@ -32,7 +36,8 @@ const props = defineProps({
|
|||
</ul>
|
||||
|
||||
<p>
|
||||
*หมายเหตุ ที่อยู่ที่ติดต่อได้ระหว่างลา (อาจดึงมาจากที่อยู่ปัจจุบันโดยอัตโนมัติ แต่ให้ผู้ใช้งานแก้ไขได้)
|
||||
*หมายเหตุ ที่อยู่ที่ติดต่อได้ระหว่างลา
|
||||
(อาจดึงมาจากที่อยู่ปัจจุบันโดยอัตโนมัติ แต่ให้ผู้ใช้งานแก้ไขได้)
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue"
|
||||
import { ref } from "vue";
|
||||
|
||||
const edit = ref<boolean>(false)
|
||||
const edit = ref<boolean>(false);
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
|
|
@ -11,10 +11,10 @@ const props = defineProps({
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||
<div>
|
||||
ลาไปปฏิบัติงานในองค์การระหว่างประเทศ
|
||||
<p>
|
||||
*หมายเหตุ รายละเอียดฟิลด์ในหัวข้อนี้มีเยอะยังไม่ทำรอ user confirm
|
||||
</p>
|
||||
<p>*หมายเหตุ รายละเอียดฟิลด์ในหัวข้อนี้มีเยอะยังไม่ทำรอ user confirm</p>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue"
|
||||
import { ref } from "vue";
|
||||
|
||||
const edit = ref<boolean>(false)
|
||||
const edit = ref<boolean>(false);
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
|
|
@ -11,6 +11,8 @@ const props = defineProps({
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||
<div>
|
||||
ลาติดตามคู่สมรส
|
||||
<ul>
|
||||
|
|
@ -20,9 +22,17 @@ const props = defineProps({
|
|||
<li>วันเดือนปีเกิด (Auto)</li>
|
||||
<li>วันที่เข้ารับราชการ (Auto)</li>
|
||||
<li>เงินเดือนปัจจุบัน (Auto)</li>
|
||||
<li>เงินเดือนปัจจุบัน (เขียนเป็นคำอ่าน) ใช้ฟังก์ชั่นแปลงเลขเป็นข้อความ</li>
|
||||
<li>กรณีลาไปศึกษาต่อ มีฟิลด์เพิ่มคือ ศึกษาวิชา, ขั้นปริญญา, ชื่อสถานศึกษา, ประเทศ, ด้วยทุน</li>
|
||||
<li>กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน มีฟิลด์เพิ่มคือ ด้าน/หลักสูตร, ณ สถานที่, ประเทศ, ด้วยทุน</li>
|
||||
<li>
|
||||
เงินเดือนปัจจุบัน (เขียนเป็นคำอ่าน) ใช้ฟังก์ชั่นแปลงเลขเป็นข้อความ
|
||||
</li>
|
||||
<li>
|
||||
กรณีลาไปศึกษาต่อ มีฟิลด์เพิ่มคือ ศึกษาวิชา, ขั้นปริญญา, ชื่อสถานศึกษา,
|
||||
ประเทศ, ด้วยทุน
|
||||
</li>
|
||||
<li>
|
||||
กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน มีฟิลด์เพิ่มคือ ด้าน/หลักสูตร,
|
||||
ณ สถานที่, ประเทศ, ด้วยทุน
|
||||
</li>
|
||||
<li>ที่อยู่ที่ติดต่อได้ระหว่างลา</li>
|
||||
<li>หมายเลขโทรศัพท์</li>
|
||||
<li>รายละเอียด (ไม่บังคับกรอก)</li>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue"
|
||||
import { ref } from "vue";
|
||||
|
||||
const edit = ref<boolean>(false)
|
||||
const edit = ref<boolean>(false);
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
|
|
@ -11,10 +11,10 @@ const props = defineProps({
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||
<div>
|
||||
ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ
|
||||
<p>
|
||||
*หมายเหตุ รายละเอียดฟิลด์ในหัวข้อนี้มีเยอะยังไม่ทำรอ user confirm
|
||||
</p>
|
||||
<p>*หมายเหตุ รายละเอียดฟิลด์ในหัวข้อนี้มีเยอะยังไม่ทำรอ user confirm</p>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -58,6 +58,7 @@ const formData = reactive<FormData>({
|
|||
<q-input
|
||||
outlined
|
||||
dense
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
readonly
|
||||
class="full-width datepicker"
|
||||
|
|
@ -81,6 +82,7 @@ const formData = reactive<FormData>({
|
|||
<q-input
|
||||
class="col-12 col-sm-4"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
readonly
|
||||
v-model="dataStore.typeLeave"
|
||||
|
|
@ -91,6 +93,7 @@ const formData = reactive<FormData>({
|
|||
dense
|
||||
outlined
|
||||
readonly
|
||||
bg-color="white"
|
||||
v-model="formData.who"
|
||||
label="เรียน"
|
||||
/>
|
||||
|
|
@ -99,6 +102,7 @@ const formData = reactive<FormData>({
|
|||
dense
|
||||
outlined
|
||||
readonly
|
||||
bg-color="white"
|
||||
v-model="formData.requestName"
|
||||
label="ชื่อผู้ยื่นขอ"
|
||||
/>
|
||||
|
|
@ -107,6 +111,7 @@ const formData = reactive<FormData>({
|
|||
dense
|
||||
outlined
|
||||
readonly
|
||||
bg-color="white"
|
||||
v-model="formData.position"
|
||||
label="ตำแหน่งผู้ยื่นขอ"
|
||||
/>
|
||||
|
|
@ -115,6 +120,7 @@ const formData = reactive<FormData>({
|
|||
dense
|
||||
outlined
|
||||
readonly
|
||||
bg-color="white"
|
||||
v-model="formData.level"
|
||||
label="ระดับผู้ยื่นขอ"
|
||||
/>
|
||||
|
|
@ -123,6 +129,7 @@ const formData = reactive<FormData>({
|
|||
dense
|
||||
outlined
|
||||
readonly
|
||||
bg-color="white"
|
||||
v-model="formData.ocRequest"
|
||||
label="สังกัดผู้ยื่นขอ"
|
||||
/>
|
||||
|
|
@ -131,6 +138,7 @@ const formData = reactive<FormData>({
|
|||
dense
|
||||
outlined
|
||||
readonly
|
||||
bg-color="white"
|
||||
v-model="formData.leaveReceived"
|
||||
label="จำนวนสิทธิ์การลาที่ได้รับในแต่ละประเภท"
|
||||
/>
|
||||
|
|
@ -139,6 +147,7 @@ const formData = reactive<FormData>({
|
|||
dense
|
||||
outlined
|
||||
readonly
|
||||
bg-color="white"
|
||||
v-model="formData.leaveUse"
|
||||
label="จำนวนสิทธิ์การลาที่ใช้ไปในแต่ละประเภท"
|
||||
/>
|
||||
|
|
@ -147,6 +156,7 @@ const formData = reactive<FormData>({
|
|||
dense
|
||||
outlined
|
||||
readonly
|
||||
bg-color="white"
|
||||
v-model="formData.leaveRemaining"
|
||||
label="จำนวนสิทธิ์การลาคงเหลือในแต่ละประเภท"
|
||||
/>
|
||||
|
|
@ -1,16 +1,32 @@
|
|||
interface FormData {
|
||||
dateStart:Date
|
||||
subject:string
|
||||
who:string
|
||||
requestName:string
|
||||
position:string
|
||||
level:string
|
||||
ocRequest:string
|
||||
leaveReceived:string
|
||||
leaveUse:string
|
||||
leaveRemaining:string
|
||||
dateStart: Date
|
||||
subject: string
|
||||
who: string
|
||||
requestName: string
|
||||
position: string
|
||||
level: string
|
||||
ocRequest: string
|
||||
leaveReceived: string
|
||||
leaveUse: string
|
||||
leaveRemaining: string
|
||||
|
||||
}
|
||||
interface FormRef06 {
|
||||
writeat:object|null;
|
||||
government:object|null;
|
||||
birthday:object|null;
|
||||
dateLeaveStart:object|null;
|
||||
dateLeaveEnd:object|null;
|
||||
totalLeave:object|null;
|
||||
dateOrdination:object|null;
|
||||
measureLocationName:object|null;
|
||||
tel:object|null;
|
||||
addressMeasure:object|null;
|
||||
buddhistLocationName:object|null;
|
||||
addressBuddhist:object|null;
|
||||
[key: string]: any;
|
||||
}
|
||||
export type {
|
||||
FormData
|
||||
FormData,
|
||||
FormRef06
|
||||
}
|
||||
|
|
@ -3,8 +3,18 @@ import { ref, onMounted, computed } from "vue";
|
|||
import { useQuasar } from "quasar";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
|
||||
import Form from "@/modules/05_leave/componenst/Form.vue";
|
||||
import Form from "@/modules/05_leave/componenst/Forms/Form.vue";
|
||||
import Form3 from "@/modules/05_leave/componenst/Forms/01_SickForm.vue";
|
||||
import Form4 from "@/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue";
|
||||
import Form5 from "@/modules/05_leave/componenst/Forms/05_VacationForm.vue";
|
||||
import Form6 from "@/modules/05_leave/componenst/Forms/06_OrdinationForm.vue";
|
||||
import Form7 from "@/modules/05_leave/componenst/Forms/07_HajjForm.vue";
|
||||
import Form8 from "@/modules/05_leave/componenst/Forms/08_MilitaryForm.vue";
|
||||
import Form9 from "@/modules/05_leave/componenst/Forms/09_StudyForm.vue";
|
||||
import Form10 from "@/modules/05_leave/componenst/Forms/10_TrainForm.vue";
|
||||
import Form11 from "@/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue";
|
||||
import Form12 from "@/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue";
|
||||
import Form13 from "@/modules/05_leave/componenst/Forms/13_RehabilitationForm.vue";
|
||||
import { useLeaveStore } from "@/modules/05_leave/store";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
|
@ -18,7 +28,7 @@ const myform = ref<QForm | null>(null);
|
|||
const $q = useQuasar();
|
||||
|
||||
const model = ref("");
|
||||
const modelSpecific = ref(null);
|
||||
const modelSpecific = ref("");
|
||||
|
||||
const clickBack = () => {
|
||||
router.push(`/leave`);
|
||||
|
|
@ -48,6 +58,10 @@ const saveAbsence = () => {
|
|||
.onCancel(() => {})
|
||||
.onDismiss(() => {});
|
||||
};
|
||||
|
||||
const onSubmit = async () => {
|
||||
console.log("save");
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-12 row justify-center">
|
||||
|
|
@ -85,7 +99,7 @@ const saveAbsence = () => {
|
|||
emit-value
|
||||
map-options
|
||||
prefix="ประเภทใบลา :"
|
||||
@update:model-value="dataStore.typeConvert(model,null)"
|
||||
@update:model-value="dataStore.typeConvert(model, null)"
|
||||
/>
|
||||
<!-- v-if (ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ||ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน) -->
|
||||
<div
|
||||
|
|
@ -107,7 +121,9 @@ const saveAbsence = () => {
|
|||
emit-value
|
||||
map-options
|
||||
prefix="ประเภทใบลา :"
|
||||
@update:model-value="dataStore.typeConvert(model,modelSpecific)"
|
||||
@update:model-value="
|
||||
dataStore.typeConvert(model, modelSpecific)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -116,22 +132,46 @@ const saveAbsence = () => {
|
|||
<Form :model="model" />
|
||||
</div>
|
||||
<div v-if="model">
|
||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||
<Form3 v-if="model === '0' || model === '1' || model === '2'"/>
|
||||
<Form3
|
||||
:on-submit="onSubmit"
|
||||
v-if="model === '0' || model === '1' || model === '2'"
|
||||
/>
|
||||
<Form4
|
||||
:on-submit="onSubmit"
|
||||
v-if="model === '3'"
|
||||
/>
|
||||
<Form5
|
||||
:on-submit="onSubmit"
|
||||
v-if="model === '4'"
|
||||
/>
|
||||
<Form6
|
||||
:on-submit="onSubmit"
|
||||
v-if="model === '5' && modelSpecific === '0'"
|
||||
/>
|
||||
<Form7
|
||||
:on-submit="onSubmit"
|
||||
v-if="model === '5' && modelSpecific === '1'"
|
||||
/>
|
||||
<Form8 :on-submit="onSubmit" v-if="model === '6'" />
|
||||
<Form9
|
||||
:on-submit="onSubmit"
|
||||
v-if="model === '7' && modelSpecific === '0'"
|
||||
/>
|
||||
<Form10
|
||||
:on-submit="onSubmit"
|
||||
v-if="
|
||||
model === '7' &&
|
||||
(modelSpecific === '1' ||
|
||||
modelSpecific === '2' ||
|
||||
modelSpecific === '3')
|
||||
"
|
||||
/>
|
||||
<Form11 :on-submit="onSubmit" v-if="model === '8'" />
|
||||
<Form12 :on-submit="onSubmit" v-if="model === '9'" />
|
||||
<Form13 :on-submit="onSubmit" v-if="model === '10'" />
|
||||
</div>
|
||||
</div>
|
||||
<q-separator />
|
||||
<div class="row col-12 q-pa-md">
|
||||
<q-space />
|
||||
<q-btn
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center btnBlue"
|
||||
label="บันทึก"
|
||||
@click="saveAbsence"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</q-card>
|
||||
</q-form>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue