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

API สร้างคำขอการลา

Browse source
This commit is contained in:
AnandaTon 2023-12-01 16:56:43 +07:00
parent 78f3bd810c
commit 8982c3da6e
22 changed files with 1243 additions and 1408 deletions
Download patch file Download diff file Expand all files Collapse all files

106
src/modules/05_leave/componenst/Forms/01_SickForm.vue
View file

@ -6,7 +6,7 @@ import { useCounterMixin } from "@/stores/mixin"
const $q = useQuasar()
const mixin = useCounterMixin()
const { date2Thai, calculateDurationYmd } = mixin
const { date2Thai, calculateDurationYmd, dialogConfirm } = mixin
const edit = ref<boolean>(true)
/** รับ props มาจากหน้าหลัก */
@ -23,57 +23,54 @@ const props = defineProps({
/** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<any>({
leaveNo: "",
startLeaveDate: null,
endLeaveDate: null,
leaveWrote: "",
leaveStartDate: null,
leaveEndDate: null,
halfDay: "day",
contractTel: "",
leaveTotal: "",
leaveLast: "",
leaveContactTel: "",
leaveContactLocation: "",
leaveNumber: "",
leaveAddress: "",
leaveDetail: "",
file: [],
leaveDocument: [],
})
/** ตัวแปร ref สำหรับแสดง validate */
const leaveNoRef = ref<object | null>(null)
const startLeaveDateRef = ref<object | null>(null)
const endLeaveDateRef = ref<object | null>(null)
const leaveWroteRef = ref<object | null>(null)
const leaveStartDateRef = ref<object | null>(null)
const leaveEndDateRef = ref<object | null>(null)
const halfDayRef = ref<object | null>(null)
const contractTelRef = ref<object | null>(null)
const leaveTotalRef = ref<object | null>(null)
const leaveLastRef = ref<object | null>(null)
const leaveContactTelRef = ref<object | null>(null)
const leaveContactLocationRef = ref<object | null>(null)
const leaveNumberRef = ref<object | null>(null)
const leaveAddressRef = ref<object | null>(null)
const leaveDetailRef = ref<object | null>(null)
const fileRef = ref<object | null>(null)
const leaveDocumentRef = ref<object | null>(null)
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const FormRef: FormRef = {
leaveNo: leaveNoRef,
startLeaveDate: startLeaveDateRef,
endLeaveDate: endLeaveDateRef,
leaveWrote: leaveWroteRef,
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
halfDay: halfDayRef,
contractTel: contractTelRef,
leaveTotal: leaveTotalRef,
leaveContactTel: leaveContactTelRef,
leaveContactLocation: leaveContactLocationRef,
leaveNumber: leaveNumberRef,
leaveAddress: leaveAddressRef,
leaveDetail: leaveDetailRef,
file: fileRef,
leaveDocument: leaveDocumentRef,
}
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props.data, async () => {
// console.log("data==>", props.data)
formData.leaveNo = props.data.leaveNo
formData.startLeaveDate = props.data.startLeaveDate
formData.endLeaveDate = props.data.endLeaveDate
formData.leaveWrote = props.data.leaveWrote
formData.leaveStartDate = props.data.leaveStartDate
formData.leaveEndDate = props.data.leaveEndDate
formData.contractTel = props.data.contractTel
formData.leaveTotal = props.data.leaveTotal
formData.leaveContactTel = props.data.leaveContactTel
formData.leaveNumber = props.data.leaveNumber
formData.leaveDetail = props.data.leaveDetail
formData.file = props.data.file
formData.leaveDocument = props.data.leaveDocument
})
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
@ -85,12 +82,12 @@ async function fileUploadDoc(files: any) {
}
/**
* function รีเซทค่า startLeaveDate เเละ endLeaveDate
* function รีเซทค่า leaveStartDate เเละ leaveEndDate
*/
function resetDate() {
if (formData.halfDay === "half_day_morning" || formData.halfDay === "half_day_afternoon") {
formData.startLeaveDate = null
formData.endLeaveDate = null
formData.leaveStartDate = null
formData.leaveEndDate = null
}
console.log("testnull")
}
@ -108,21 +105,20 @@ function onValidate() {
}
}
if (hasError.every(result => result === true)) {
props.onSubmit()
props.onSubmit(formData)
}
}
const isReadOnly = computed(() => {
const conditionHalfDay = formData.halfDay === "half_day_morning" || formData.halfDay === "half_day_afternoon"
if (conditionHalfDay) {
formData.endLeaveDate = formData.startLeaveDate // Set formData.endLeaveDate to null
formData.leaveEndDate = formData.leaveStartDate // Set formData.leaveEndDate to null
formData.leaveTotal = "0.5 วัน "
} else {
formData.leaveTotal = null
}
return conditionHalfDay
})
console.log(isReadOnly.value)
</script>
<!-- ฟอร์มลาป่วย และลากิจส่วนตัว -->
@ -136,13 +132,13 @@ console.log(isReadOnly.value)
<div class="col-12 row q-pa-sm q-col-gutter-sm">
<q-input
class="col-12 col-sm-12"
ref="leaveNoRef"
for="leaveNoRef"
ref="leaveWroteRef"
for="leaveWroteRef"
dense
hide-bottom-space
bg-color="white"
outlined
v-model="formData.leaveNo"
v-model="formData.leaveWrote"
label="เขียนที่"
:readonly="!edit"
:rules="[val => !!val || `${'เขียนที่'}`]"
@ -158,7 +154,7 @@ console.log(isReadOnly.value)
<datepicker
class="col-12 col-md-3 col-sm-6"
menu-class-name="modalfix"
v-model="formData.startLeaveDate"
v-model="formData.leaveStartDate"
:locale="'th'"
autoApply
borderless
@ -176,13 +172,13 @@ console.log(isReadOnly.value)
<q-input
outlined
dense
ref="startLeaveDateRef"
for="startLeaveDateRef"
ref="leaveStartDateRef"
for="leaveStartDateRef"
hide-bottom-space
:readonly="!edit"
bg-color="white"
class="full-width datepicker"
:model-value="formData.startLeaveDate != null ? date2Thai(formData.startLeaveDate) : null"
:model-value="formData.leaveStartDate != null ? date2Thai(formData.leaveStartDate) : null"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
@ -196,14 +192,14 @@ console.log(isReadOnly.value)
<datepicker
class="col-12 col-md-3 col-sm-6"
menu-class-name="modalfix"
v-model="formData.endLeaveDate"
v-model="formData.leaveEndDate"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
:readonly="isReadOnly"
:min-date="formData.startLeaveDate ? new Date(formData.startLeaveDate.getTime() + 24 * 60 * 60 * 1000) : null"
:min-date="formData.leaveStartDate ? new Date(formData.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
>
<template #year="{ year }">
{{ year + 543 }}
@ -215,13 +211,13 @@ console.log(isReadOnly.value)
<q-input
outlined
dense
ref="endLeaveDateRef"
for="endLeaveDateRef"
ref="leaveEndDateRef"
for="leaveEndDateRef"
hide-bottom-space
bg-color="white"
:readonly="isReadOnly"
class="full-width datepicker"
:model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : null"
:model-value="formData.leaveEndDate != null ? date2Thai(formData.leaveEndDate) : null"
:label="`${'ลาถึงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
@ -263,9 +259,9 @@ console.log(isReadOnly.value)
class="col-12 col-md-3 col-sm-6"
dense
outlined
ref="leaveContactTelRef"
for="leaveContactTelRef"
v-model="formData.leaveContactTel"
ref="leaveNumberRef"
for="leaveNumberRef"
v-model="formData.leaveNumber"
mask="(###)-###-####"
hide-bottom-space
bg-color="white"
@ -279,9 +275,9 @@ console.log(isReadOnly.value)
class="col-12 col-md-9 col-sm-6"
dense
outlined
ref="leaveContactLocationRef"
for="leaveContactLocationRef"
v-model="formData.leaveContactLocation"
ref="leaveAddressRef"
for="leaveAddressRef"
v-model="formData.leaveAddress"
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
:readonly="!edit"
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
@ -305,9 +301,9 @@ console.log(isReadOnly.value)
<div class="full-width">
<div class="q-col-gutter-sm row">
<q-file
ref="fileRef"
for="fileRef"
v-model="formData.file"
ref="leaveDocumentRef"
for="leaveDocumentRef"
v-model="formData.leaveDocument"
@added="fileUploadDoc"
dense
label="เอกสารประกอบ"
@ -330,7 +326,7 @@ console.log(isReadOnly.value)
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="(file, index) in formData.file" :key="index" class="q-my-xs">
<q-item v-for="(file, index) in formData.leaveDocument" :key="index" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.name }}

602
src/modules/05_leave/componenst/Forms/03_Birth.vue
View file

@ -1,361 +1,313 @@
<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import type {
FormData,
FormRef,
} from "@/modules/05_leave/interface/request/BirthForm";
import { useCounterMixin } from "@/stores/mixin";
import { ref, reactive, watch } from "vue"
import type { FormData, FormRef } from "@/modules/05_leave/interface/request/BirthForm"
import { useCounterMixin } from "@/stores/mixin"
const mixin = useCounterMixin();
const { date2Thai, calculateDurationYmd } = mixin;
const edit = ref<boolean>(true);
const mixin = useCounterMixin()
const { date2Thai, calculateDurationYmd } = mixin
const edit = ref<boolean>(true)
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
data: {
type: Object,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
});
data: {
type: Object,
default: null,
},
onSubmit: {
type: Function,
default: () => "",
},
})
/** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<any>({
leaveNo: "",
startLeaveDate: null,
endLeaveDate: null,
contractTel: "",
leaveTotal: "",
leaveLast: "",
leaveContactTel: "",
leaveContactLocation: "",
leaveDetail: "",
file: [],
});
leaveWrote: "",
leaveStartDate: null,
leaveEndDate: null,
leaveTotal: "",
leaveLast: "",
leaveNumber: "",
leaveAddress: "",
leaveDetail: "",
leaveDocument: [],
})
/** ตัวแปร ref สำหรับแสดง validate */
const leaveNoRef = ref<object | null>(null);
const startLeaveDateRef = ref<object | null>(null);
const endLeaveDateRef = ref<object | null>(null);
const contractTelRef = ref<object | null>(null);
const leaveTotalRef = ref<object | null>(null);
const leaveContactTelRef = ref<object | null>(null);
const leaveContactLocationRef = ref<object | null>(null);
const leaveDetailRef = ref<object | null>(null);
const fileRef = ref<object | null>(null);
const leaveWroteRef = ref<object | null>(null)
const leaveStartDateRef = ref<object | null>(null)
const leaveEndDateRef = ref<object | null>(null)
const leaveTotalRef = ref<object | null>(null)
const leaveNumberRef = ref<object | null>(null)
const leaveAddressRef = ref<object | null>(null)
const leaveDetailRef = ref<object | null>(null)
const leaveDocumentRef = ref<object | null>(null)
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const FormRef: FormRef = {
leaveNo: leaveNoRef,
startLeaveDate: startLeaveDateRef,
endLeaveDate: endLeaveDateRef,
contractTel: contractTelRef,
leaveTotal: leaveTotalRef,
leaveContactTel: leaveContactTelRef,
leaveContactLocation: leaveContactLocationRef,
leaveDetail: leaveDetailRef,
file: fileRef,
};
leaveWrote: leaveWroteRef,
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
leaveTotal: leaveTotalRef,
leaveNumber: leaveNumberRef,
leaveAddress: leaveAddressRef,
leaveDetail: leaveDetailRef,
leaveDocument: leaveDocumentRef,
}
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props.data, async () => {
// console.log("data==>", props.data)
formData.leaveNo = props.data.leaveNo;
formData.startLeaveDate = props.data.startLeaveDate;
formData.endLeaveDate = props.data.endLeaveDate;
formData.contractTel = props.data.contractTel;
formData.leaveTotal = props.data.leaveTotal;
formData.leaveContactTel = props.data.leaveContactTel;
formData.leaveDetail = props.data.leaveDetail;
formData.file = props.data.file;
});
// console.log("data==>", props.data)
formData.leaveWrote = props.data.leaveWrote
formData.leaveStartDate = props.data.leaveStartDate
formData.leaveEndDate = props.data.leaveEndDate
formData.leaveTotal = props.data.leaveTotal
formData.leaveNumber = props.data.leaveNumber
formData.leaveDetail = props.data.leaveDetail
formData.leaveDocument = props.data.leaveDocument
})
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const fileDocDataUpload = ref<File[]>([]);
const fileDocDataUpload = ref<File[]>([])
async function fileUploadDoc(files: any) {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file);
});
files.forEach((file: any) => {
fileDocDataUpload.value.push(file)
})
}
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
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)) {
props.onSubmit();
}
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)) {
props.onSubmit(formData)
}
}
</script>
<!-- ฟอร์มลาคลอดบุตร-->
<template>
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
</div>
<form @submit.prevent.stop="onValidate">
<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"
ref="leaveNoRef"
for="leaveNoRef"
dense
outlined
v-model="formData.leaveNo"
label="เขียนที่"
hide-bottom-space
bg-color="white"
:readonly="!edit"
:rules="[(val) => !!val || `${'เขียนที่'}`]"
/>
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
</div>
<form @submit.prevent.stop="onValidate">
<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"
ref="leaveWroteRef"
for="leaveWroteRef"
dense
outlined
v-model="formData.leaveWrote"
label="เขียนที่"
hide-bottom-space
bg-color="white"
:readonly="!edit"
:rules="[val => !!val || `${'เขียนที่'}`]"
/>
<datepicker
class="col-12 col-md-3 col-sm-12"
menu-class-name="modalfix"
v-model="formData.startLeaveDate"
:locale="'th'"
autoApply
hide-bottom-space
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
ref="startLeaveDateRef"
for="startLeaveDateRef"
hide-bottom-space
bg-color="white"
:readonly="!edit"
class="full-width datepicker"
:model-value="
formData.startLeaveDate != null
? date2Thai(formData.startLeaveDate)
: 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-3 col-sm-12"
menu-class-name="modalfix"
v-model="formData.leaveStartDate"
:locale="'th'"
autoApply
hide-bottom-space
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
ref="leaveStartDateRef"
for="leaveStartDateRef"
hide-bottom-space
bg-color="white"
:readonly="!edit"
class="full-width datepicker"
:model-value="formData.leaveStartDate != null ? date2Thai(formData.leaveStartDate) : 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-3 col-sm-12"
menu-class-name="modalfix"
v-model="formData.endLeaveDate"
:locale="'th'"
autoApply
borderless
hide-bottom-space
:enableTimePicker="false"
week-start="0"
:readonly="!formData.startLeaveDate"
:min-date="
formData.startLeaveDate
? new Date(
formData.startLeaveDate.getTime() + 24 * 60 * 60 * 1000
)
: null
"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
ref="endLeaveDateRef"
for="endLeaveDateRef"
hide-bottom-space
bg-color="white"
:readonly="!formData.startLeaveDate"
class="full-width datepicker"
:model-value="
formData.endLeaveDate != null
? date2Thai(formData.endLeaveDate)
: 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-3 col-sm-6"
dense
outlined
ref="leaveTotalRef"
for="leaveTotalRef"
v-model="formData.leaveTotal"
label="จำนวนวันที่ลา"
bg-color="white"
readonly
hide-bottom-space
/>
<q-input
class="col-12 col-md-3 col-sm-6"
dense
outlined
ref="leaveLastRef"
for="leaveLastRef"
v-model="formData.leaveLast"
label="ลาครั้งสุดท้ายเมื่อวันที่"
readonly
hide-bottom-space
bg-color="white"
/>
<div class="full-width">
<div class="q-col-gutter-sm row">
<q-input
class="col-12 col-md-3 col-sm-12"
dense
outlined
hide-bottom-space
bg-color="white"
ref="leaveContactTelRef"
for="leaveContactTelRef"
v-model="formData.leaveContactTel"
mask="(###)-###-####"
unmasked-value
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
:readonly="!edit"
:rules="[
(val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
]"
/>
<datepicker
class="col-12 col-md-3 col-sm-12"
menu-class-name="modalfix"
v-model="formData.leaveEndDate"
:locale="'th'"
autoApply
borderless
hide-bottom-space
:enableTimePicker="false"
week-start="0"
:readonly="!formData.leaveStartDate"
:min-date="formData.leaveStartDate ? new Date(formData.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
ref="leaveEndDateRef"
for="leaveEndDateRef"
hide-bottom-space
bg-color="white"
:readonly="!formData.leaveStartDate"
class="full-width datepicker"
:model-value="formData.leaveEndDate != null ? date2Thai(formData.leaveEndDate) : 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-3 col-sm-6"
dense
outlined
ref="leaveTotalRef"
for="leaveTotalRef"
v-model="formData.leaveTotal"
label="จำนวนวันที่ลา"
bg-color="white"
readonly
hide-bottom-space
/>
<q-input
class="col-12 col-md-3 col-sm-6"
dense
outlined
ref="leaveLastRef"
for="leaveLastRef"
v-model="formData.leaveLast"
label="ลาครั้งสุดท้ายเมื่อวันที่"
readonly
hide-bottom-space
bg-color="white"
/>
<div class="full-width">
<div class="q-col-gutter-sm row">
<q-input
class="col-12 col-md-3 col-sm-12"
dense
outlined
hide-bottom-space
bg-color="white"
ref="leaveNumberRef"
for="leaveNumberRef"
v-model="formData.leaveNumber"
mask="(###)-###-####"
unmasked-value
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
:readonly="!edit"
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
/>
<q-input
class="col-12 col-md-9 col-sm-12"
dense
outlined
hide-bottom-space
bg-color="white"
ref="leaveContactLocationRef"
for="leaveContactLocationRef"
v-model="formData.leaveContactLocation"
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
:readonly="!edit"
:rules="[
(val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
]"
/>
</div>
</div>
<q-input
type="textarea"
class="col-12 col-md-12 col-sm-12"
dense
outlined
bg-color="white"
ref="leaveDetailRef"
for="leaveDetailRef"
v-model="formData.leaveDetail"
label="รายละเอียด"
:readonly="!edit"
/>
<q-input
class="col-12 col-md-9 col-sm-12"
dense
outlined
hide-bottom-space
bg-color="white"
ref="leaveAddressRef"
for="leaveAddressRef"
v-model="formData.leaveAddress"
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
:readonly="!edit"
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
/>
</div>
</div>
<q-input
type="textarea"
class="col-12 col-md-12 col-sm-12"
dense
outlined
bg-color="white"
ref="leaveDetailRef"
for="leaveDetailRef"
v-model="formData.leaveDetail"
label="รายละเอียด"
:readonly="!edit"
/>
<q-file
ref="fileRef"
for="fileRef"
hide-bottom-space
v-model="formData.file"
@added="fileUploadDoc"
dense
bg-color="white"
label="เอกสารประกอบ"
outlined
use-chips
multiple
class="q-pl-sm col-12"
:rules="[(val) => !!val || `${'กรุณาเลือกไฟล์'}`]"
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
<q-file
ref="leaveDocumentRef"
for="leaveDocumentRef"
hide-bottom-space
v-model="formData.leaveDocument"
@added="fileUploadDoc"
dense
bg-color="white"
label="เอกสารประกอบ"
outlined
use-chips
multiple
class="q-pl-sm col-12"
:rules="[val => !!val || `${'กรุณาเลือกไฟล์'}`]"
>
<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 bordered flat class="full-width">
<q-list separator>
<q-item
v-for="(file, index) in formData.file"
:key="index"
class="q-my-xs"
>
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.name }}
</q-item-label>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<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, index) in formData.leaveDocument" :key="index" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.name }}
</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" />
<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>
<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>

126
src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue
View file

@ -21,60 +21,58 @@ const props = defineProps({
/** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<any>({
leaveNo: "",
wifeName: "",
brithDate: null,
startLeaveDate: null,
endLeaveDate: null,
leaveWrote: "",
wifeDayName: "",
wifeDayDateBorn: null,
leaveStartDate: null,
leaveEndDate: null,
contractTel: "",
leaveTotal: "",
leaveContactTel: "",
leaveContactLocation: "",
leaveNumber: "",
leaveAddress: "",
leaveDetail: "",
file: [],
leaveDocument: [],
})
/** ตัวแปร ref สำหรับแสดง validate */
const leaveNoRef = ref<object | null>(null)
const wifeNameRef = ref<object | null>(null)
const brithDateRef = ref<object | null>(null)
const startLeaveDateRef = ref<object | null>(null)
const endLeaveDateRef = ref<object | null>(null)
const leaveWroteRef = ref<object | null>(null)
const wifeDayNameRef = ref<object | null>(null)
const wifeDayDateBornRef = ref<object | null>(null)
const leaveStartDateRef = ref<object | null>(null)
const leaveEndDateRef = ref<object | null>(null)
const contractTelRef = ref<object | null>(null)
const leaveTotalRef = ref<object | null>(null)
const leaveContactTelRef = ref<object | null>(null)
const leaveContactLocationRef = ref<object | null>(null)
const leaveNumberRef = ref<object | null>(null)
const leaveAddressRef = ref<object | null>(null)
const leaveDetailRef = ref<object | null>(null)
const fileRef = ref<object | null>(null)
const leaveDocumentRef = ref<object | null>(null)
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const FormRef: FormRef = {
leaveNo: leaveNoRef,
wifeName: wifeNameRef,
brithDate: brithDateRef,
startLeaveDate: startLeaveDateRef,
endLeaveDate: endLeaveDateRef,
contractTel: contractTelRef,
leaveWrote: leaveWroteRef,
wifeDayName: wifeDayNameRef,
wifeDayDateBorn: wifeDayDateBornRef,
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
leaveTotal: leaveTotalRef,
leaveContactTel: leaveContactTelRef,
leaveContactLocation: leaveContactLocationRef,
leaveNumber: leaveNumberRef,
leaveAddress: leaveAddressRef,
leaveDetail: leaveDetailRef,
file: fileRef,
leaveDocument: leaveDocumentRef,
}
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props.data, async () => {
// console.log("data==>", props.data)
formData.leaveNo = props.data.leaveNo
formData.wifeName = props.data.wifeName
formData.brithDate = props.data.brithDate
formData.startLeaveDate = props.data.startLeaveDate
formData.endLeaveDate = props.data.endLeaveDate
formData.contractTel = props.data.contractTel
formData.leaveWrote = props.data.leaveWrote
formData.wifeDayName = props.data.wifeDayName
formData.wifeDayDateBorn = props.data.wifeDayDateBorn
formData.leaveStartDate = props.data.leaveStartDate
formData.leaveEndDate = props.data.leaveEndDate
formData.leaveTotal = props.data.leaveTotal
formData.leaveContactTel = props.data.leaveContactTel
formData.leaveNumber = props.data.leaveNumber
formData.leaveDetail = props.data.leaveDetail
formData.file = props.data.file
formData.leaveDocument = props.data.leaveDocument
})
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
@ -98,7 +96,7 @@ function onValidate() {
}
}
if (hasError.every(result => result === true)) {
props.onSubmit()
props.onSubmit(formData)
}
}
@ -106,7 +104,7 @@ function onValidate() {
* function อัพเดทค่า LeaveTotal
*/
function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(formData.startLeaveDate, formData.endLeaveDate)
const newLeaveTotal = calculateDurationYmd(formData.leaveStartDate, formData.leaveEndDate)
formData.leaveTotal = newLeaveTotal
console.log("test")
}
@ -138,13 +136,13 @@ function updateLeaveTotal() {
<div class="col-12 row q-pa-sm q-col-gutter-sm">
<q-input
class="col-12 col-12 col-sm-12"
ref="leaveNoRef"
for="leaveNoRef"
ref="leaveWroteRef"
for="leaveWroteRef"
dense
outlined
hide-bottom-space
bg-color="white"
v-model="formData.leaveNo"
v-model="formData.leaveWrote"
label="เขียนที่"
:readonly="!edit"
:rules="[val => !!val || `${'เขียนที่'}`]"
@ -152,7 +150,7 @@ function updateLeaveTotal() {
<datepicker
class="col-12 col-md-4 col-sm-12"
menu-class-name="modalfix"
v-model="formData.startLeaveDate"
v-model="formData.leaveStartDate"
:locale="'th'"
autoApply
hide-bottom-space
@ -171,13 +169,13 @@ function updateLeaveTotal() {
<q-input
outlined
dense
ref="startLeaveDateRef"
for="startLeaveDateRef"
ref="leaveStartDateRef"
for="leaveStartDateRef"
hide-bottom-space
bg-color="white"
:readonly="!edit"
class="full-width datepicker"
:model-value="formData.startLeaveDate != null ? date2Thai(formData.startLeaveDate) : null"
:model-value="formData.leaveStartDate != null ? date2Thai(formData.leaveStartDate) : null"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
@ -191,7 +189,7 @@ function updateLeaveTotal() {
<datepicker
class="col-12 col-md-4 col-sm-12"
menu-class-name="modalfix"
v-model="formData.endLeaveDate"
v-model="formData.leaveEndDate"
:locale="'th'"
autoApply
borderless
@ -199,8 +197,8 @@ function updateLeaveTotal() {
:enableTimePicker="false"
@update:model-value="updateLeaveTotal"
week-start="0"
:readonly="!formData.startLeaveDate"
:min-date="formData.startLeaveDate ? new Date(formData.startLeaveDate.getTime() + 24 * 60 * 60 * 1000) : null"
:readonly="!formData.leaveStartDate"
:min-date="formData.leaveStartDate ? new Date(formData.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
>
<template #year="{ year }">
{{ year + 543 }}
@ -212,13 +210,13 @@ function updateLeaveTotal() {
<q-input
outlined
dense
ref="endLeaveDateRef"
for="endLeaveDateRef"
ref="leaveEndDateRef"
for="leaveEndDateRef"
hide-bottom-space
bg-color="white"
:readonly="!formData.startLeaveDate"
:readonly="!formData.leaveStartDate"
class="full-width datepicker"
:model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : null"
:model-value="formData.leaveEndDate != null ? date2Thai(formData.leaveEndDate) : null"
:label="`${'ลาถึงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
@ -243,13 +241,13 @@ function updateLeaveTotal() {
<div class="col-12 col-md-4 col-sm-12">
<q-input
class="col-12 col-sm-12"
ref="wifeNameRef"
for="wifeNameRef"
ref="wifeDayNameRef"
for="wifeDayNameRef"
dense
bg-color="white"
outlined
hide-bottom-space
v-model="formData.wifeName"
v-model="formData.wifeDayName"
label="ชื่อภรรยา"
:readonly="!edit"
:rules="[val => !!val || `${'ชื่อภรรยา'}`]"
@ -259,7 +257,7 @@ function updateLeaveTotal() {
<datepicker
class="col-12 col-md-4 col-sm-12"
menu-class-name="modalfix"
v-model="formData.brithDate"
v-model="formData.wifeDayDateBorn"
:locale="'th'"
autoApply
borderless
@ -278,13 +276,13 @@ function updateLeaveTotal() {
<q-input
outlined
dense
ref="brithDateRef"
for="brithDateRef"
ref="wifeDayDateBornRef"
for="wifeDayDateBornRef"
hide-bottom-space
bg-color="white"
:readonly="!edit"
class="full-width datepicker"
:model-value="formData.brithDate != null ? date2Thai(formData.brithDate) : null"
:model-value="formData.wifeDayDateBorn != null ? date2Thai(formData.wifeDayDateBorn) : null"
:label="`${'วันที่คลอด'}`"
:rules="[val => !!val || `${'กรุณาเลือกวันที่คลอด'}`]"
>
@ -300,9 +298,9 @@ function updateLeaveTotal() {
class="col-12 col-md-3 col-sm-12"
dense
outlined
ref="leaveContactTelRef"
for="leaveContactTelRef"
v-model="formData.leaveContactTel"
ref="leaveNumberRef"
for="leaveNumberRef"
v-model="formData.leaveNumber"
mask="(###)-###-####"
unmasked-value
hide-bottom-space
@ -318,9 +316,9 @@ function updateLeaveTotal() {
outlined
hide-bottom-space
bg-color="white"
ref="leaveContactLocationRef"
for="leaveContactLocationRef"
v-model="formData.leaveContactLocation"
ref="leaveAddressRef"
for="leaveAddressRef"
v-model="formData.leaveAddress"
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
:readonly="!edit"
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
@ -341,7 +339,7 @@ function updateLeaveTotal() {
:readonly="!edit"
/>
<q-file bg-color="white" ref="fileRef" v-model="formData.file" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-12">
<q-file bg-color="white" ref="leaveDocumentRef" v-model="formData.leaveDocument" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-12">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
@ -353,7 +351,7 @@ function updateLeaveTotal() {
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="(file, index) in formData.file" :key="index" class="q-my-xs">
<q-item v-for="(file, index) in formData.leaveDocument" :key="index" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.name }}

124
src/modules/05_leave/componenst/Forms/05_VacationForm.vue
View file

@ -21,63 +21,63 @@ const props = defineProps({
/** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<any>({
leaveNo: "",
leaveWrote: "",
halfDay: "day",
lastYearVacation: "",
currentVacation: "",
startLeaveDate: null,
endLeaveDate: null,
restDayOldTotal: "",
restDayCurrentTotal: "",
leaveStartDate: null,
leaveEndDate: null,
contractTel: "",
leaveTotal: "",
leaveContactTel: "",
leaveContactLocation: "",
leaveNumber: "",
leaveAddress: "",
leaveDetail: "",
file: [],
leaveDocument: [],
})
/** ตัวแปร ref สำหรับแสดง validate */
const leaveNoRef = ref<object | null>(null)
const lastYearVacationRef = ref<object | null>(null)
const currentVacationRef = ref<object | null>(null)
const leaveWroteRef = ref<object | null>(null)
const restDayOldTotalRef = ref<object | null>(null)
const restDayCurrentTotalRef = ref<object | null>(null)
const halfDayRef = ref<object | null>(null)
const startLeaveDateRef = ref<object | null>(null)
const endLeaveDateRef = ref<object | null>(null)
const leaveStartDateRef = ref<object | null>(null)
const leaveEndDateRef = ref<object | null>(null)
const contractTelRef = ref<object | null>(null)
const leaveTotalRef = ref<object | null>(null)
const leaveContactTelRef = ref<object | null>(null)
const leaveContactLocationRef = ref<object | null>(null)
const leaveNumberRef = ref<object | null>(null)
const leaveAddressRef = ref<object | null>(null)
const leaveDetailRef = ref<object | null>(null)
const fileRef = ref<object | null>(null)
const leaveDocumentRef = ref<object | null>(null)
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const FormRef: FormRef = {
leaveNo: leaveNoRef,
leaveWrote: leaveWroteRef,
halfDay: halfDayRef,
lastYearVacation: lastYearVacationRef,
currentVacation: currentVacationRef,
startLeaveDate: startLeaveDateRef,
endLeaveDate: endLeaveDateRef,
restDayOldTotal: restDayOldTotalRef,
restDayCurrentTotal: restDayCurrentTotalRef,
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
contractTel: contractTelRef,
leaveTotal: leaveTotalRef,
leaveContactTel: leaveContactTelRef,
leaveContactLocation: leaveContactLocationRef,
leaveNumber: leaveNumberRef,
leaveAddress: leaveAddressRef,
leaveDetail: leaveDetailRef,
file: fileRef,
leaveDocument: leaveDocumentRef,
}
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props.data, async () => {
// console.log("data==>", props.data)
formData.leaveNo = props.data.leaveNo
formData.lastYearVacation = props.data.lastYearVacation
formData.currentVacation = props.data.currentVacation
formData.startLeaveDate = props.data.startLeaveDate
formData.endLeaveDate = props.data.endLeaveDate
formData.leaveWrote = props.data.leaveWrote
formData.restDayOldTotal = props.data.restDayOldTotal
formData.restDayCurrentTotal = props.data.restDayCurrentTotal
formData.leaveStartDate = props.data.leaveStartDate
formData.leaveEndDate = props.data.leaveEndDate
formData.contractTel = props.data.contractTel
formData.leaveTotal = props.data.leaveTotal
formData.leaveContactTel = props.data.leaveContactTel
formData.leaveNumber = props.data.leaveNumber
formData.leaveDetail = props.data.leaveDetail
formData.file = props.data.file
formData.leaveDocument = props.data.leaveDocument
})
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
@ -101,17 +101,17 @@ function onValidate() {
}
}
if (hasError.every(result => result === true)) {
props.onSubmit()
props.onSubmit(formData)
}
}
/**
* function รีเซทค่า startLeaveDate เเละ endLeaveDate
* function รีเซทค่า leaveStartDate เเละ leaveEndDate
*/
function resetDate() {
if (formData.halfDay === "half_day_morning" || formData.halfDay === "half_day_afternoon") {
formData.startLeaveDate = null
formData.endLeaveDate = null
formData.leaveStartDate = null
formData.leaveEndDate = null
}
console.log("testnull")
}
@ -119,7 +119,7 @@ function resetDate() {
const isReadOnly = computed(() => {
const conditionHalfDay = formData.halfDay === "half_day_morning" || formData.halfDay === "half_day_afternoon"
if (conditionHalfDay) {
formData.endLeaveDate = formData.startLeaveDate // Set formData.endLeaveDate to null
formData.leaveEndDate = formData.leaveStartDate // Set formData.leaveEndDate to null
formData.leaveTotal = "0.5 วัน "
} else {
formData.leaveTotal = null
@ -138,13 +138,13 @@ const isReadOnly = computed(() => {
<div class="row q-pa-sm q-col-gutter-sm">
<q-input
class="col-12 col-sm-12"
ref="leaveNoRef"
for="leaveNoRef"
ref="leaveWroteRef"
for="leaveWroteRef"
dense
hide-bottom-space
bg-color="white"
outlined
v-model="formData.leaveNo"
v-model="formData.leaveWrote"
label="เขียนที่"
:readonly="!edit"
:rules="[val => !!val || `${'เขียนที่'}`]"
@ -156,34 +156,34 @@ const isReadOnly = computed(() => {
</div>
<q-input
class="col-12 col-md-4 col-sm-6"
ref="lastYearVacationRef"
for="lastYearVacationRef"
ref="restDayOldTotalRef"
for="restDayOldTotalRef"
dense
hide-bottom-space
bg-color="white"
readonly
outlined
v-model="formData.lastYearVacation"
v-model="formData.restDayOldTotal"
label="จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา"
/>
<q-input
class="col-12 col-md-4 col-sm-6"
ref="currentVacationRef"
for="currentVacationRef"
ref="restDayCurrentTotalRef"
for="restDayCurrentTotalRef"
dense
readonly
hide-bottom-space
bg-color="white"
outlined
v-model="formData.currentVacation"
v-model="formData.restDayCurrentTotal"
label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน"
/>
<datepicker
class="col-12 col-md-3 col-sm-6"
menu-class-name="modalfix"
v-model="formData.startLeaveDate"
v-model="formData.leaveStartDate"
:locale="'th'"
autoApply
hide-bottom-space
@ -202,13 +202,13 @@ const isReadOnly = computed(() => {
<q-input
outlined
dense
ref="startLeaveDateRef"
for="startLeaveDateRef"
ref="leaveStartDateRef"
for="leaveStartDateRef"
hide-bottom-space
bg-color="white"
:readonly="!edit"
class="full-width datepicker"
:model-value="formData.startLeaveDate != null ? date2Thai(formData.startLeaveDate) : null"
:model-value="formData.leaveStartDate != null ? date2Thai(formData.leaveStartDate) : null"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
@ -222,7 +222,7 @@ const isReadOnly = computed(() => {
<datepicker
class="col-12 col-md-3 col-sm-6"
menu-class-name="modalfix"
v-model="formData.endLeaveDate"
v-model="formData.leaveEndDate"
:locale="'th'"
autoApply
hide-bottom-space
@ -230,7 +230,7 @@ const isReadOnly = computed(() => {
:enableTimePicker="false"
week-start="0"
:readonly="isReadOnly"
:min-date="formData.startLeaveDate ? new Date(formData.startLeaveDate.getTime() + 24 * 60 * 60 * 1000) : null"
:min-date="formData.leaveStartDate ? new Date(formData.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
>
<template #year="{ year }">
{{ year + 543 }}
@ -242,13 +242,13 @@ const isReadOnly = computed(() => {
<q-input
outlined
dense
ref="endLeaveDateRef"
for="endLeaveDateRef"
ref="leaveEndDateRef"
for="leaveEndDateRef"
hide-bottom-space
bg-color="white"
class="full-width datepicker"
:readonly="isReadOnly"
:model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : null"
:model-value="formData.leaveEndDate != null ? date2Thai(formData.leaveEndDate) : null"
:label="`${'ลาถึงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
@ -278,9 +278,9 @@ const isReadOnly = computed(() => {
outlined
hide-bottom-space
bg-color="white"
ref="leaveContactTelRef"
for="leaveContactTelRef"
v-model="formData.leaveContactTel"
ref="leaveNumberRef"
for="leaveNumberRef"
v-model="formData.leaveNumber"
mask="(###)-###-####"
unmasked-value
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
@ -294,9 +294,9 @@ const isReadOnly = computed(() => {
outlined
hide-bottom-space
bg-color="white"
ref="leaveContactLocationRef"
for="leaveContactLocationRef"
v-model="formData.leaveContactLocation"
ref="leaveAddressRef"
for="leaveAddressRef"
v-model="formData.leaveAddress"
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
:readonly="!edit"
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
@ -317,7 +317,7 @@ const isReadOnly = computed(() => {
:readonly="!edit"
/>
<q-file ref="fileRef" bg-color="white" v-model="formData.file" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-12">
<q-file ref="leaveDocumentRef" bg-color="white" v-model="formData.leaveDocument" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-12">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
@ -329,7 +329,7 @@ const isReadOnly = computed(() => {
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="(file, index) in formData.file" :key="index" class="q-my-xs">
<q-item v-for="(file, index) in formData.leaveDocument" :key="index" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.name }}

138
src/modules/05_leave/componenst/Forms/06_OrdinationForm.vue
View file

@ -2,7 +2,7 @@
import { reactive, ref, watch } from "vue"
import { useCounterMixin } from "@/stores/mixin"
import { useQuasar } from "quasar"
import type { FormRef06 } from "@/modules/05_leave/interface/request/AddAbsence"
import type { OrdinationForm } from "@/modules/05_leave/interface/request/AddAbsence"
const $q = useQuasar()
const mixin = useCounterMixin()
@ -24,57 +24,59 @@ const props = defineProps({
})
/** ตัวแปร ref สำหรับแสดง validate */
const telRef = ref<object | null>(null)
const writeatRef = ref<object | null>(null)
const ordainDayLocationNumberRef = ref<object | null>(null)
const leaveWroteRef = ref<object | null>(null)
const birthdayRef = ref<object | null>(null)
const governmentRef = ref<object | null>(null)
const totalLeaveRef = ref<object | null>(null)
const endLeaveDateRef = ref<object | null>(null)
const dateOrdinationRef = ref<object | null>(null)
const startLeaveDateRef = ref<object | null>(null)
const addressMeasureRef = ref<object | null>(null)
const addressBuddhistRef = ref<object | null>(null)
const measureLocationNameRef = ref<object | null>(null)
const buddhistLocationNameRef = ref<object | null>(null)
const leaveEndDateRef = ref<object | null>(null)
const ordainDayOrdinationRef = ref<object | null>(null)
const leaveStartDateRef = ref<object | null>(null)
const ordainDayLocationAddressRef = ref<object | null>(null)
const ordainDayBuddhistLentAddressRef = ref<object | null>(null)
const ordainDayLocationNameRef = ref<object | null>(null)
const ordainDayBuddhistLentNameRef = ref<object | null>(null)
const leaveDocumentRef = ref<object | null>(null)
/** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<any>({
writeat: "",
leaveWrote: "",
government: new Date(),
birthday: new Date(),
startLeaveDate: null,
endLeaveDate: null,
leaveStartDate: null,
leaveEndDate: null,
totalLeave: new Date(),
dateOrdination: new Date(),
measureLocationName: "",
tel: null,
addressMeasure: "",
buddhistLocationName: "",
addressBuddhist: "",
ordainDayOrdination: new Date(),
ordainDayLocationName: "",
ordainDayLocationNumber: null,
ordainDayLocationAddress: "",
ordainDayBuddhistLentName: "",
ordainDayBuddhistLentAddress: "",
monk: "never",
file: null,
leaveDocument: null,
})
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const formRef: FormRef06 = {
writeat: writeatRef,
const formRef: OrdinationForm = {
leaveWrote: leaveWroteRef,
government: governmentRef,
birthday: birthdayRef,
startLeaveDate: startLeaveDateRef,
endLeaveDate: endLeaveDateRef,
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
totalLeave: totalLeaveRef,
dateOrdination: dateOrdinationRef,
measureLocationName: measureLocationNameRef,
tel: telRef,
addressMeasure: addressMeasureRef,
buddhistLocationName: buddhistLocationNameRef,
addressBuddhist: addressBuddhistRef,
ordainDayOrdination: ordainDayOrdinationRef,
ordainDayLocationName: ordainDayLocationNameRef,
ordainDayLocationNumber: ordainDayLocationNumberRef,
ordainDayLocationAddress: ordainDayLocationAddressRef,
ordainDayBuddhistLentName: ordainDayBuddhistLentNameRef,
ordainDayBuddhistLentAddress: ordainDayBuddhistLentAddressRef,
leaveDocument: leaveDocumentRef,
}
// Watch for changes in endLeaveDate and update leaveTotal accordingly
watch(formData.endLeaveDate, async () => {
if (formData.startLeaveDate !== undefined && formData.endLeaveDate !== undefined) {
const newLeaveTotal = calculateDurationYmd(formData.startLeaveDate, formData.endLeaveDate)
// Watch for changes in leaveEndDate and update leaveTotal accordingly
watch(formData.leaveEndDate, async () => {
if (formData.leaveStartDate !== undefined && formData.leaveEndDate !== undefined) {
const newLeaveTotal = calculateDurationYmd(formData.leaveStartDate, formData.leaveEndDate)
formData.leaveTotal = newLeaveTotal
console.log(newLeaveTotal)
}
@ -86,7 +88,7 @@ watch(formData.endLeaveDate, async () => {
* function อัพเดทค่า LeaveTotal
*/
function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(formData.startLeaveDate, formData.endLeaveDate)
const newLeaveTotal = calculateDurationYmd(formData.leaveStartDate, formData.leaveEndDate)
formData.leaveTotal = newLeaveTotal
console.log("test")
}
@ -104,23 +106,9 @@ function onValidate() {
}
}
if (hasError.every(result => result === true)) {
onSubmit()
props.onSubmit(formData)
}
}
/** ฟังก์ชั่น บันทึก */
function onSubmit() {
dialogConfirm(
$q,
async () => {
console.log(formData)
props.onSubmit()
},
"ยืนยันการยื่นใบลา",
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
)
console.log("tese")
}
</script>
<!-- ฟอร์ม ลาอุปสมบท -->
@ -133,18 +121,18 @@ function onSubmit() {
<q-card bordered class="q-pa-md bg-grey-1">
<div class="row q-pa-sm q-col-gutter-sm">
<q-input
ref="writeatRef"
ref="leaveWroteRef"
class="col-12 col-sm-12"
dense
outlined
bg-color="white"
hide-bottom-space
v-model="formData.writeat"
v-model="formData.leaveWrote"
label="เขียนที่"
:rules="[val => !!val || `${'เขียนที่'}`]"
/>
<datepicker class="col-12 col-md-4 col-sm-6" menu-class-name="modalfix" v-model="formData.startLeaveDate" :locale="'th'" autoApply borderless :enableTimePicker="false" week-start="0">
<datepicker class="col-12 col-md-4 col-sm-6" menu-class-name="modalfix" v-model="formData.leaveStartDate" :locale="'th'" autoApply borderless :enableTimePicker="false" week-start="0">
<template #year="{ year }">
{{ year + 543 }}
</template>
@ -156,10 +144,10 @@ function onSubmit() {
outlined
bg-color="white"
dense
ref="startLeaveDateRef"
ref="leaveStartDateRef"
hide-bottom-space
class="full-width datepicker"
:model-value="formData.startLeaveDate != null ? date2Thai(formData.startLeaveDate) : null"
:model-value="formData.leaveStartDate != null ? date2Thai(formData.leaveStartDate) : null"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
@ -173,14 +161,14 @@ function onSubmit() {
<datepicker
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
v-model="formData.endLeaveDate"
v-model="formData.leaveEndDate"
:locale="'th'"
autoApply
borderless
@update:model-value="updateLeaveTotal"
:readonly="!formData.startLeaveDate"
:readonly="!formData.leaveStartDate"
:enableTimePicker="false"
:min-date="formData.startLeaveDate ? new Date(formData.startLeaveDate.getTime() + 24 * 60 * 60 * 1000) : null"
:min-date="formData.leaveStartDate ? new Date(formData.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
week-start="0"
>
<template #year="{ year }">
@ -193,13 +181,13 @@ function onSubmit() {
<q-input
outlined
dense
ref="endLeaveDateRef"
ref="leaveEndDateRef"
bg-color="white"
hide-bottom-space
class="full-width datepicker"
:model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : null"
:model-value="formData.leaveEndDate != null ? date2Thai(formData.leaveEndDate) : null"
:label="`${'ลาถึงวันที่'}`"
:readonly="!formData.startLeaveDate"
:readonly="!formData.leaveStartDate"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
@ -308,7 +296,7 @@ function onSubmit() {
<datepicker
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
v-model="formData.dateOrdination"
v-model="formData.ordainDayOrdination"
:locale="'th'"
autoApply
full-width
@ -326,12 +314,12 @@ function onSubmit() {
<template #trigger>
<q-input
outlined
ref="dateOrdinationRef"
ref="ordainDayOrdinationRef"
dense
bg-color="white"
hide-bottom-space
class="full-width datepicker"
:model-value="formData.dateOrdination != null ? date2Thai(formData.dateOrdination) : null"
:model-value="formData.ordainDayOrdination != null ? date2Thai(formData.ordainDayOrdination) : null"
:label="`${'วันอุปสมบท'}`"
:rules="[val => !!val || `${'กรุณาเลือกวันอุปสมบท'}`]"
>
@ -346,22 +334,22 @@ function onSubmit() {
class="col-12 col-sm-6 col-md-4"
dense
hide-bottom-space
ref="measureLocationNameRef"
ref="ordainDayLocationNameRef"
bg-color="white"
outlined
full-width
v-model="formData.measureLocationName"
v-model="formData.ordainDayLocationName"
label="ชื่อวัด"
:rules="[val => !!val || `${'กรุณากรอกชื่อวัด'}`]"
/>
<q-input
class="col-12 col-sm-6 col-md-4"
ref="telRef"
ref="ordainDayLocationNumberRef"
dense
full-width
outlined
v-model="formData.tel"
v-model="formData.ordainDayLocationNumber"
bg-color="white"
mask="(###)-###-####"
unmasked-value
@ -372,11 +360,11 @@ function onSubmit() {
<q-input
class="col-12 col-md-12 col-sm-12"
dense
ref="addressMeasureRef"
ref="ordainDayLocationAddressRef"
bg-color="white"
outlined
hide-bottom-space
v-model="formData.addressMeasure"
v-model="formData.ordainDayLocationAddress"
label="ที่อยู่"
:rules="[val => !!val || `${'กรุณากรอกที่อยู่'}`]"
type="textarea"
@ -386,11 +374,11 @@ function onSubmit() {
<q-input
class="col-12 col-sm-6 col-md-4"
dense
ref="buddhistLocationNameRef"
ref="ordainDayBuddhistLentNameRef"
bg-color="white"
hide-bottom-space
outlined
v-model="formData.buddhistLocationName"
v-model="formData.ordainDayBuddhistLentName"
label="ชื่อวัด"
:rules="[val => !!val || `${'กรุณากรอกชื่อวัด'}`]"
/>
@ -398,10 +386,10 @@ function onSubmit() {
<q-input
class="col-12"
dense
ref="addressBuddhistRef"
ref="ordainDayBuddhistLentAddressRef"
bg-color="white"
outlined
v-model="formData.addressBuddhist"
v-model="formData.ordainDayBuddhistLentAddress"
label="ที่อยู่"
:rules="[val => !!val || `${'กรุณากรอกที่อยู่'}`]"
type="textarea"
@ -421,7 +409,7 @@ function onSubmit() {
/>
<div class="col-12 col-sm-6">
<q-file ref="fileRef" v-model="formData.file" dense label="เอกสารประกอบ" outlined bg-color="white" multiple>
<q-file ref="leaveDocumentRef" v-model="formData.leaveDocument" dense label="เอกสารประกอบ" outlined bg-color="white" multiple>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>

76
src/modules/05_leave/componenst/Forms/07_HajjForm.vue
View file

@ -2,7 +2,7 @@
import { reactive, ref } from "vue"
import { useCounterMixin } from "@/stores/mixin"
import { useQuasar } from "quasar"
import type { FormRef07 } from "@/modules/05_leave/interface/request/AddAbsence"
import type { HajiForm } from "@/modules/05_leave/interface/request/AddAbsence"
const $q = useQuasar()
const mixin = useCounterMixin()
@ -12,11 +12,11 @@ const edit = ref<boolean>(true)
const files = ref<any>(null)
/** ตัวแปร ref สำหรับแสดง validate */
const writeatRef = ref<object | null>(null)
const leaveWroteRef = ref<object | null>(null)
const governmentRef = ref<object | null>(null)
const startLeaveDateRef = ref<object | null>(null)
const endLeaveDateRef = ref<object | null>(null)
const leaveStartDateRef = ref<object | null>(null)
const leaveEndDateRef = ref<object | null>(null)
const leaveDocumentRef = ref<object | null>(null)
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
data: {
@ -31,21 +31,22 @@ const props = defineProps({
/** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<any>({
writeat: "",
leaveWrote: "",
government: new Date(),
startLeaveDate: null,
endLeaveDate: null,
leaveStartDate: null,
leaveEndDate: null,
totalLeave: new Date(),
monk: "never",
file: null,
hajjDayStatus: "never",
leaveDocument: null,
})
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const formRef: FormRef07 = {
writeat: writeatRef,
const formRef: HajiForm = {
leaveWrote: leaveWroteRef,
government: governmentRef,
startLeaveDate: startLeaveDateRef,
endLeaveDate: endLeaveDateRef,
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
leaveDocument: leaveDocumentRef,
}
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
@ -61,30 +62,17 @@ function onValidate() {
}
}
if (hasError.every(result => result === true)) {
onSubmit()
props.onSubmit(formData)
}
}
/**
* function อัพเดทค่า LeaveTotal
*/
function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(formData.startLeaveDate, formData.endLeaveDate)
const newLeaveTotal = calculateDurationYmd(formData.leaveStartDate, formData.leaveEndDate)
formData.leaveTotal = newLeaveTotal
console.log("test")
}
/** ฟังก์ชั่น บันทึก */
function onSubmit() {
dialogConfirm(
$q,
async () => {
console.log(formData)
props.onSubmit()
},
"ยืนยันการยื่นใบลา",
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
)
}
</script>
<template>
@ -96,8 +84,8 @@ function onSubmit() {
<q-card bordered class="q-pa-md bg-grey-1">
<div class="row q-pa-sm q-col-gutter-sm">
<q-input
v-model="formData.writeat"
ref="writeatRef"
v-model="formData.leaveWrote"
ref="leaveWroteRef"
class="col-12 col-sm-12"
bg-color="white"
dense
@ -110,7 +98,7 @@ function onSubmit() {
<div class="full-width">
<div class="q-col-gutter-sm row">
<datepicker
v-model="formData.startLeaveDate"
v-model="formData.leaveStartDate"
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
autoApply
@ -127,7 +115,7 @@ function onSubmit() {
</template>
<template #trigger>
<q-input
ref="startLeaveDateRef"
ref="leaveStartDateRef"
bg-color="white"
class="full-width datepicker"
outlined
@ -135,7 +123,7 @@ function onSubmit() {
hide-bottom-space
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
:model-value="formData.startLeaveDate != null ? date2Thai(formData.startLeaveDate) : null"
:model-value="formData.leaveStartDate != null ? date2Thai(formData.leaveStartDate) : null"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
@ -145,7 +133,7 @@ function onSubmit() {
</datepicker>
<datepicker
v-model="formData.endLeaveDate"
v-model="formData.leaveEndDate"
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
autoApply
@ -154,8 +142,8 @@ function onSubmit() {
:enableTimePicker="false"
:locale="'th'"
@update:model-value="updateLeaveTotal"
:readonly="!formData.startLeaveDate"
:min-date="formData.startLeaveDate ? new Date(formData.startLeaveDate.getTime() + 24 * 60 * 60 * 1000) : null"
:readonly="!formData.leaveStartDate"
:min-date="formData.leaveStartDate ? new Date(formData.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
>
<template #year="{ year }">
{{ year + 543 }}
@ -165,15 +153,15 @@ function onSubmit() {
</template>
<template #trigger>
<q-input
ref="endLeaveDateRef"
ref="leaveEndDateRef"
class="full-width datepicker"
bg-color="white"
outlined
dense
:readonly="!formData.startLeaveDate"
:readonly="!formData.leaveStartDate"
hide-bottom-space
:label="`${'ลาถึงวันที่'}`"
:model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : null"
:model-value="formData.leaveEndDate != null ? date2Thai(formData.leaveEndDate) : null"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
@ -236,14 +224,14 @@ function onSubmit() {
<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" checked-icon="task_alt" label="เคย" />
<q-radio v-model="formData.monk" val="never" checked-icon="task_alt" label="ไม่เคยไปประกอบพิธีฮัจย์ฯ" />
<q-radio v-model="formData.hajjDayStatus" val="ever" checked-icon="task_alt" label="เคย" />
<q-radio v-model="formData.hajjDayStatus" val="never" checked-icon="task_alt" label="ไม่เคยไปประกอบพิธีฮัจย์ฯ" />
</div>
<q-input v-model="formData.info" class="col-12 q-mt-sm" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
<q-input v-model="formData.leaveDetail" class="col-12 q-mt-sm" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
<div class="col-12 col-sm-6">
<q-file v-model="formData.file" bg-color="white" label="เอกสารประกอบ" dense outlined multiple hide-bottom-space>
<q-file v-model="formData.leaveDocument" bg-color="white" label="เอกสารประกอบ" dense outlined multiple hide-bottom-space>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>

130
src/modules/05_leave/componenst/Forms/08_MilitaryForm.vue
View file

@ -2,7 +2,7 @@
import { reactive, ref } from "vue"
import { useCounterMixin } from "@/stores/mixin"
import { useQuasar } from "quasar"
import type { FormRef08 } from "@/modules/05_leave/interface/request/AddAbsence"
import type { MilitaryForm } from "@/modules/05_leave/interface/request/AddAbsence"
const $q = useQuasar()
const mixin = useCounterMixin()
@ -12,14 +12,15 @@ const edit = ref<boolean>(true)
const files = ref<any>(null)
/** ตัวแปร ref สำหรับแสดง validate */
const startLeaveDateRef = ref<object | null>(null)
const endLeaveDateRef = ref<object | null>(null)
const writeatRef = ref<object | null>(null)
const receivedRef = ref<object | null>(null)
const atRef = ref<object | null>(null)
const dateAtRef = ref<object | null>(null)
const admittedRef = ref<object | null>(null)
const atPlaceRef = ref<object | null>(null)
const leaveStartDateRef = ref<object | null>(null)
const leaveEndDateRef = ref<object | null>(null)
const leaveWroteRef = ref<object | null>(null)
const absentDaySummonRef = ref<object | null>(null)
const absentDayLocationRef = ref<object | null>(null)
const absentDayRegistorDateRef = ref<object | null>(null)
const absentDayGetInRef = ref<object | null>(null)
const absentDayAtRef = ref<object | null>(null)
const leaveDetailRef = ref<object | null>(null)
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
@ -35,29 +36,30 @@ const props = defineProps({
/** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<any>({
startLeaveDate: null,
endLeaveDate: null,
leaveStartDate: null,
leaveEndDate: null,
totalLeave: 1,
file: null,
writeat: "",
received: "",
at: "",
dateAt: "",
admitted: "",
atPlace: "",
info: "",
leaveDocument: null,
leaveWrote: "",
absentDaySummon: "",
absentDayLocation: "",
absentDayRegistorDate: "",
absentDayGetIn: "",
absentDayAt: "",
leaveDetail: "",
})
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const formRef: FormRef08 = {
startLeaveDate: startLeaveDateRef,
endLeaveDate: endLeaveDateRef,
writeat: writeatRef,
received: receivedRef,
at: atRef,
dateAt: dateAtRef,
admitted: admittedRef,
atPlace: atPlaceRef,
const formRef: MilitaryForm = {
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
leaveWrote: leaveWroteRef,
absentDaySummon: absentDaySummonRef,
absentDayLocation: absentDayLocationRef,
absentDayRegistorDate: absentDayRegistorDateRef,
absentDayGetIn: absentDayGetInRef,
absentDayAt: absentDayAtRef,
leaveDetail: leaveDetailRef,
}
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
@ -73,7 +75,7 @@ function onValidate() {
}
}
if (hasError.every(result => result === true)) {
onSubmit()
props.onSubmit(formData)
}
}
@ -81,23 +83,10 @@ function onValidate() {
* function อัพเดทค่า LeaveTotal
*/
function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(formData.startLeaveDate, formData.endLeaveDate)
const newLeaveTotal = calculateDurationYmd(formData.leaveStartDate, formData.leaveEndDate)
formData.leaveTotal = newLeaveTotal
console.log("test")
}
/** ฟังก์ชั่น บันทึก */
function onSubmit() {
dialogConfirm(
$q,
async () => {
console.log(formData)
props.onSubmit()
},
"ยืนยันการยื่นใบลา",
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
)
}
</script>
<template>
@ -109,18 +98,18 @@ function onSubmit() {
<q-card bordered class="q-pa-md bg-grey-1">
<div class="row q-pa-sm q-col-gutter-sm">
<q-input
ref="writeatRef"
ref="leaveWroteRef"
class="col-12 col-sm-12"
dense
outlined
bg-color="white"
hide-bottom-space
v-model="formData.writeat"
v-model="formData.leaveWrote"
label="เขียนที่"
:rules="[val => !!val || `${'เขียนที่'}`]"
/>
<datepicker class="col-12 col-md-4 col-sm-6" menu-class-name="modalfix" v-model="formData.startLeaveDate" :locale="'th'" autoApply borderless :enableTimePicker="false" week-start="0">
<datepicker class="col-12 col-md-4 col-sm-6" menu-class-name="modalfix" v-model="formData.leaveStartDate" :locale="'th'" autoApply borderless :enableTimePicker="false" week-start="0">
<template #year="{ year }">
{{ year + 543 }}
</template>
@ -132,10 +121,10 @@ function onSubmit() {
outlined
bg-color="white"
dense
ref="startLeaveDateRef"
ref="leaveStartDateRef"
hide-bottom-space
class="full-width datepicker"
:model-value="formData.startLeaveDate != null ? date2Thai(formData.startLeaveDate) : null"
:model-value="formData.leaveStartDate != null ? date2Thai(formData.leaveStartDate) : null"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
@ -149,15 +138,15 @@ function onSubmit() {
<datepicker
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
v-model="formData.endLeaveDate"
v-model="formData.leaveEndDate"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
@update:model-value="updateLeaveTotal"
:readonly="!formData.startLeaveDate"
:min-date="formData.startLeaveDate ? new Date(formData.startLeaveDate.getTime() + 24 * 60 * 60 * 1000) : null"
:readonly="!formData.leaveStartDate"
:min-date="formData.leaveStartDate ? new Date(formData.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
>
<template #year="{ year }">
{{ year + 543 }}
@ -169,12 +158,12 @@ function onSubmit() {
<q-input
outlined
dense
ref="endLeaveDateRef"
ref="leaveEndDateRef"
bg-color="white"
hide-bottom-space
:readonly="!formData.startLeaveDate"
:readonly="!formData.leaveStartDate"
class="full-width datepicker"
:model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : null"
:model-value="formData.leaveEndDate != null ? date2Thai(formData.leaveEndDate) : null"
:label="`${'ลาถึงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
@ -200,12 +189,12 @@ function onSubmit() {
<div class="full-width">
<div class="q-col-gutter-sm row">
<q-input
ref="receivedRef"
ref="absentDaySummonRef"
class="col-12 col-sm-6 col-md-4"
dense
bg-color="white"
outlined
v-model="formData.received"
v-model="formData.absentDaySummon"
label="ได้รับหมายเรียกของ"
hide-bottom-space
:rules="[val => !!val || `${'กรุณากรอกได้รับหมายเรียกของ'}`]"
@ -217,7 +206,7 @@ function onSubmit() {
dense
bg-color="white"
outlined
v-model="formData.at"
v-model="formData.absentDayLocation"
label="ที่"
hide-bottom-space
:rules="[val => !!val || `${'กรุณากรอกที่'}`]"
@ -227,7 +216,16 @@ function onSubmit() {
<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.dateAt" :locale="'th'" autoApply borderless :enableTimePicker="false" week-start="0">
<datepicker
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
v-model="formData.absentDayRegistorDate"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
@ -238,11 +236,11 @@ function onSubmit() {
<q-input
outlined
dense
ref="dateAtRef"
ref="absentDayRegistorDateRef"
bg-color="white"
hide-bottom-space
class="full-width datepicker"
:model-value="formData.dateAt != null ? date2Thai(formData.dateAt) : null"
:model-value="formData.absentDayRegistorDate != null ? date2Thai(formData.absentDayRegistorDate) : null"
:label="`${'ลงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลงวันที่'}`]"
>
@ -257,9 +255,9 @@ function onSubmit() {
class="col-12 col-sm-6 col-md-4"
dense
bg-color="white"
ref="admittedRef"
ref="absentDayGetInRef"
outlined
v-model="formData.admitted"
v-model="formData.absentDayGetIn"
label="ให้เข้ารับการ"
hide-bottom-space
:rules="[val => !!val || `${'กรุณากรอกให้เข้ารับการ'}`]"
@ -270,8 +268,8 @@ function onSubmit() {
dense
bg-color="white"
outlined
ref="atPlaceRef"
v-model="formData.atPlace"
ref="absentDayAtRef"
v-model="formData.absentDayAt"
label="ณ ที่"
hide-bottom-space
:rules="[val => !!val || `${'กรุณากรอก ณ ที่'}`]"
@ -279,10 +277,10 @@ function onSubmit() {
</div>
</div>
<q-input class="col-12 col-md-12 col-sm-12" dense bg-color="white" outlined v-model="formData.info" type="textarea" label="รายละเอียด" />
<q-input class="col-12 col-md-12 col-sm-12" dense bg-color="white" outlined v-model="formData.leaveDetail" type="textarea" label="รายละเอียด" />
<div class="col-12 col-sm-6">
<q-file v-model="formData.file" dense label="เอกสารประกอบ" outlined bg-color="white" multiple hide-bottom-space>
<q-file v-model="formData.leaveDocument" dense label="เอกสารประกอบ" outlined bg-color="white" multiple hide-bottom-space>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>

157
src/modules/05_leave/componenst/Forms/09_StudyForm.vue
View file

@ -2,7 +2,7 @@
import { reactive, ref, computed } from "vue"
import { useCounterMixin } from "@/stores/mixin"
import { useQuasar } from "quasar"
import type { FormRef09 } from "@/modules/05_leave/interface/request/AddAbsence"
import type { studyDaySubjectForm } from "@/modules/05_leave/interface/request/AddAbsence"
const $q = useQuasar()
const mixin = useCounterMixin()
@ -12,19 +12,19 @@ const edit = ref<boolean>(true)
const files = ref<any>(null)
/** ตัวแปร ref สำหรับแสดง validate */
const startLeaveDateRef = ref<object | null>(null)
const endLeaveDateRef = ref<object | null>(null)
const leaveStartDateRef = ref<object | null>(null)
const leaveEndDateRef = ref<object | null>(null)
const birthdayRef = ref<object | null>(null)
const dateGovernmentRef = ref<object | null>(null)
const salaryRef = ref<object | null>(null)
const telRef = ref<object | null>(null)
const addressLeaveRef = ref<object | null>(null)
const capitalRef = ref<object | null>(null)
const countryRef = ref<object | null>(null)
const nameEducationRef = ref<object | null>(null)
const degreeRef = ref<object | null>(null)
const studyRef = ref<object | null>(null)
const writeatRef = ref<object | null>(null)
const leaveSalaryRef = ref<object | null>(null)
const leaveNumberRef = ref<object | null>(null)
const leaveAddressRef = ref<object | null>(null)
const studyDayScholarshipRef = ref<object | null>(null)
const studyDayCountryRef = ref<object | null>(null)
const studyDayUniversityNameRef = ref<object | null>(null)
const studyDayDegreeLevelRef = ref<object | null>(null)
const studyDaySubjectRef = ref<object | null>(null)
const leaveWroteRef = ref<object | null>(null)
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
@ -40,39 +40,39 @@ const props = defineProps({
/** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<any>({
writeat: "",
startLeaveDate: null,
endLeaveDate: null,
leaveWrote: "",
leaveStartDate: null,
leaveEndDate: null,
birthday: new Date(),
dateGovernment: new Date(),
salary: 10000,
salaryText: arabicNumberToText(10000),
tel: "",
addressLeave: "test",
capital: "",
country: "",
nameEducation: "",
degree: "",
study: "",
file: "",
info: "",
leaveSalary: 10000,
leaveSalaryText: arabicNumberToText(10000),
leaveNumber: "",
leaveAddress: "test",
studyDayScholarship: "",
studyDayCountry: "",
studyDayUniversityName: "",
studyDayDegreeLevel: "",
studyDaySubject: "",
leaveDocument: "",
leaveDetail: "",
})
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const formRef: FormRef09 = {
startLeaveDate: startLeaveDateRef,
endLeaveDate: endLeaveDateRef,
const formRef: studyDaySubjectForm = {
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
birthday: birthdayRef,
dateGovernment: dateGovernmentRef,
salary: salaryRef,
tel: telRef,
addressLeave: addressLeaveRef,
capital: capitalRef,
country: countryRef,
nameEducation: nameEducationRef,
degree: degreeRef,
study: studyRef,
writeat: writeatRef,
leaveSalary: leaveSalaryRef,
leaveNumber: leaveNumberRef,
leaveAddress: leaveAddressRef,
studyDayScholarship: studyDayScholarshipRef,
studyDayCountry: studyDayCountryRef,
studyDayUniversityName: studyDayUniversityNameRef,
studyDayDegreeLevel: studyDayDegreeLevelRef,
studyDaySubject: studyDaySubjectRef,
leaveWrote: leaveWroteRef,
}
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
@ -88,7 +88,7 @@ function onValidate() {
}
}
if (hasError.every(result => result === true)) {
onSubmit()
props.onSubmit(formData)
}
}
@ -96,29 +96,16 @@ function onValidate() {
* function อัพเดทค่า LeaveTotal
*/
function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(formData.startLeaveDate, formData.endLeaveDate)
const newLeaveTotal = calculateDurationYmd(formData.leaveStartDate, formData.leaveEndDate)
formData.leaveTotal = newLeaveTotal
console.log("test")
}
/** ฟังก์ชั่น บันทึก */
function onSubmit() {
dialogConfirm(
$q,
async () => {
console.log(formData)
props.onSubmit()
},
"ยืนยันการยื่นใบลา",
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
)
}
/**
* แปลงตัวเลขเงินเดือน
*/
const formattedSalary = computed(() => {
return formData.salary !== null ? formData.salary.toLocaleString("th-TH") : ""
const formattedleaveSalary = computed(() => {
return formData.leaveSalary !== null ? formData.leaveSalary.toLocaleString("th-TH") : ""
})
</script>
@ -131,8 +118,8 @@ const formattedSalary = computed(() => {
<q-card bordered class="q-pa-md bg-grey-1">
<div class="row q-pa-sm q-col-gutter-sm">
<q-input
v-model="formData.writeat"
ref="writeatRef"
v-model="formData.leaveWrote"
ref="leaveWroteRef"
class="col-12 col-sm-12"
bg-color="white"
dense
@ -142,7 +129,7 @@ const formattedSalary = computed(() => {
:rules="[val => !!val || `${'เขียนที่'}`]"
/>
<datepicker v-model="formData.startLeaveDate" class="col-12 col-md-4 col-sm-6" menu-class-name="modalfix" autoApply borderless week-start="0" :enableTimePicker="false" :locale="'th'">
<datepicker v-model="formData.leaveStartDate" class="col-12 col-md-4 col-sm-6" menu-class-name="modalfix" autoApply borderless week-start="0" :enableTimePicker="false" :locale="'th'">
<template #year="{ year }">
{{ year + 543 }}
</template>
@ -151,7 +138,7 @@ const formattedSalary = computed(() => {
</template>
<template #trigger>
<q-input
ref="startLeaveDateRef"
ref="leaveStartDateRef"
class="full-width datepicker"
bg-color="white"
outlined
@ -159,7 +146,7 @@ const formattedSalary = computed(() => {
lazy-rules
hide-bottom-space
:label="`${'ลาตั้งแต่วันที่'}`"
:model-value="formData.startLeaveDate != null ? date2Thai(formData.startLeaveDate) : null"
:model-value="formData.leaveStartDate != null ? date2Thai(formData.leaveStartDate) : null"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
<template v-slot:prepend>
@ -170,7 +157,7 @@ const formattedSalary = computed(() => {
</datepicker>
<datepicker
v-model="formData.endLeaveDate"
v-model="formData.leaveEndDate"
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
autoApply
@ -178,9 +165,9 @@ const formattedSalary = computed(() => {
week-start="0"
:locale="'th'"
@update:model-value="updateLeaveTotal"
:readonly="!formData.startLeaveDate"
:readonly="!formData.leaveStartDate"
:enableTimePicker="false"
:min-date="formData.startLeaveDate ? new Date(formData.startLeaveDate.getTime() + 24 * 60 * 60 * 1000) : null"
:min-date="formData.leaveStartDate ? new Date(formData.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
>
<template #year="{ year }">
{{ year + 543 }}
@ -190,7 +177,7 @@ const formattedSalary = computed(() => {
</template>
<template #trigger>
<q-input
ref="endLeaveDateRef"
ref="leaveEndDateRef"
class="full-width datepicker"
outlined
dense
@ -198,8 +185,8 @@ const formattedSalary = computed(() => {
bg-color="white"
hide-bottom-space
:label="`${'ลาถึงวันที่'}`"
:readonly="!formData.startLeaveDate"
:model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : null"
:readonly="!formData.leaveStartDate"
:model-value="formData.leaveEndDate != null ? date2Thai(formData.leaveEndDate) : null"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
@ -298,11 +285,11 @@ const formattedSalary = computed(() => {
</template>
</datepicker>
<q-input v-model="formattedSalary" ref="salaryRef" class="col-12 col-sm-6 col-md-3" bg-color="white" dense outlined readonly label="เงินเดือนปัจจุบัน" />
<q-input v-model="formattedleaveSalary" ref="leaveSalaryRef" class="col-12 col-sm-6 col-md-3" bg-color="white" dense outlined readonly label="เงินเดือนปัจจุบัน" />
<q-input
v-model="formData.salaryText"
ref="salaryRef"
v-model="formData.leaveSalaryText"
ref="leaveSalaryRef"
class="col-12 col-sm-6 col-md-3"
bg-color="white"
dense
@ -318,8 +305,8 @@ const formattedSalary = computed(() => {
<div class="full-width">
<div class="q-col-gutter-sm row">
<q-input
v-model="formData.nameEducation"
ref="nameEducationRef"
v-model="formData.studyDayUniversityName"
ref="studyDayUniversityNameRef"
class="col-12 col-sm-6 col-md-4"
bg-color="white"
dense
@ -330,8 +317,8 @@ const formattedSalary = computed(() => {
/>
<q-input
v-model="formData.degree"
ref="degreeRef"
v-model="formData.studyDayDegreeLevel"
ref="studyDayDegreeLevelRef"
class="col-12 col-sm-6 col-md-4"
bg-color="white"
dense
@ -342,8 +329,8 @@ const formattedSalary = computed(() => {
/>
<q-input
v-model="formData.study"
ref="studyRef"
v-model="formData.studyDaySubject"
ref="studyDaySubjectRef"
class="col-12 col-sm-6 col-md-4"
bg-color="white"
dense
@ -354,8 +341,8 @@ const formattedSalary = computed(() => {
/>
<q-input
v-model="formData.country"
ref="countryRef"
v-model="formData.studyDayCountry"
ref="studyDayCountryRef"
class="col-12 col-sm-6 col-md-4"
bg-color="white"
dense
@ -366,8 +353,8 @@ const formattedSalary = computed(() => {
/>
<q-input
v-model="formData.capital"
ref="capitalRef"
v-model="formData.studyDayScholarship"
ref="studyDayScholarshipRef"
class="col-12 col-sm-6 col-md-4"
bg-color="white"
dense
@ -378,8 +365,8 @@ const formattedSalary = computed(() => {
/>
<q-input
v-model="formData.tel"
ref="telRef"
v-model="formData.leaveNumber"
ref="leaveNumberRef"
class="col-12 col-sm-6 col-md-4"
bg-color="white"
dense
@ -392,8 +379,8 @@ const formattedSalary = computed(() => {
/>
<q-input
v-model="formData.addressLeave"
ref="addressLeaveRef"
v-model="formData.leaveAddress"
ref="leaveAddressRef"
class="col-12"
bg-color="white"
dense
@ -405,10 +392,10 @@ const formattedSalary = computed(() => {
</div>
</div>
<q-input v-model="formData.info" class="col-12 col-md-12 col-sm-12" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
<q-input v-model="formData.leaveDetail" class="col-12 col-md-12 col-sm-12" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
<div class="col-12 col-sm-6">
<q-file v-model="formData.file" bg-color="white" dense outlined multiple label="เอกสารประกอบ">
<q-file v-model="formData.leaveDocument" bg-color="white" dense outlined multiple label="เอกสารประกอบ">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>

132
src/modules/05_leave/componenst/Forms/10_TrainForm.vue
View file

@ -1,7 +1,7 @@
<script setup lang="ts">
import { reactive, ref, computed } from "vue"
import { useCounterMixin } from "@/stores/mixin"
import type { FormRef10 } from "@/modules/05_leave/interface/request/AddAbsence"
import type { TrainForm } from "@/modules/05_leave/interface/request/AddAbsence"
import { useQuasar } from "quasar"
const $q = useQuasar()
@ -24,49 +24,49 @@ const props = defineProps({
/** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<any>({
writeat: "",
startLeaveDate: null,
endLeaveDate: null,
leaveWrote: "",
leaveStartDate: null,
leaveEndDate: null,
birthday: new Date(),
dateGovernment: new Date(),
salary: 10000,
leaveSalary: 10000,
salaryText: arabicNumberToText(10000),
tel: "",
addressLeave: "test",
capital: "",
country: "",
course: "",
location: "",
file: "",
info: "",
leaveNumber: "",
leaveAddress: "test",
studyDayScholarship: "",
studyDayCountry: "",
studyDayTrainingSubject: "",
studyDayTrainingName: "",
leaveDocument: "",
leaveDetail: "",
})
/** ตัวแปร ref สำหรับแสดง validate */
const startLeaveDateRef = ref<object | null>(null)
const endLeaveDateRef = ref<object | null>(null)
const leaveStartDateRef = ref<object | null>(null)
const leaveEndDateRef = ref<object | null>(null)
const birthdayRef = ref<object | null>(null)
const dateGovernmentRef = ref<object | null>(null)
const telRef = ref<object | null>(null)
const addressLeaveRef = ref<object | null>(null)
const capitalRef = ref<object | null>(null)
const countryRef = ref<object | null>(null)
const courseRef = ref<object | null>(null)
const locationRef = ref<object | null>(null)
const writeatRef = ref<object | null>(null)
const leaveNumberRef = ref<object | null>(null)
const leaveAddressRef = ref<object | null>(null)
const studyDayScholarshipRef = ref<object | null>(null)
const studyDayCountryRef = ref<object | null>(null)
const studyDayTrainingSubjectRef = ref<object | null>(null)
const studyDayTrainingNameRef = ref<object | null>(null)
const leaveWroteRef = ref<object | null>(null)
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const formRef: FormRef10 = {
startLeaveDate: startLeaveDateRef,
endLeaveDate: endLeaveDateRef,
const formRef: TrainForm = {
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
birthday: birthdayRef,
dateGovernment: dateGovernmentRef,
tel: telRef,
addressLeave: addressLeaveRef,
capital: capitalRef,
country: countryRef,
course: courseRef,
location: locationRef,
writeat: writeatRef,
leaveNumber: leaveNumberRef,
leaveAddress: leaveAddressRef,
studyDayScholarship: studyDayScholarshipRef,
studyDayCountry: studyDayCountryRef,
studyDayTrainingSubject: studyDayTrainingSubjectRef,
studyDayTrainingName: studyDayTrainingNameRef,
leaveWrote: leaveWroteRef,
}
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
@ -83,7 +83,7 @@ function onValidate() {
}
}
if (hasError.every(result => result === true)) {
onSubmit()
props.onSubmit(formData)
}
}
@ -91,28 +91,16 @@ function onValidate() {
* function อัพเดทค่า LeaveTotal
*/
function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(formData.startLeaveDate, formData.endLeaveDate)
const newLeaveTotal = calculateDurationYmd(formData.leaveStartDate, formData.leaveEndDate)
formData.leaveTotal = newLeaveTotal
console.log("test")
}
/** ฟังก์ชั่น บันทึก */
function onSubmit() {
dialogConfirm(
$q,
async () => {
console.log(formData)
props.onSubmit()
},
"ยืนยันการยื่นใบลา",
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
)
}
/**
* แปลงตัวเลขเงินเดือน
*/
const formattedSalary = computed(() => {
return formData.salary !== null ? formData.salary.toLocaleString("th-TH") : ""
return formData.leaveSalary !== null ? formData.leaveSalary.toLocaleString("th-TH") : ""
})
</script>
@ -125,8 +113,8 @@ const formattedSalary = computed(() => {
<q-card bordered class="q-pa-md bg-grey-1">
<div class="row q-pa-sm q-col-gutter-sm">
<q-input
v-model="formData.writeat"
ref="writeatRef"
v-model="formData.leaveWrote"
ref="leaveWroteRef"
class="col-12 col-sm-12"
bg-color="white"
dense
@ -136,7 +124,7 @@ const formattedSalary = computed(() => {
:rules="[val => !!val || `${'เขียนที่'}`]"
/>
<datepicker v-model="formData.startLeaveDate" class="col-12 col-md-4 col-sm-6" menu-class-name="modalfix" autoApply borderless week-start="0" :enableTimePicker="false" :locale="'th'">
<datepicker v-model="formData.leaveStartDate" class="col-12 col-md-4 col-sm-6" menu-class-name="modalfix" autoApply borderless week-start="0" :enableTimePicker="false" :locale="'th'">
<template #year="{ year }">
{{ year + 543 }}
</template>
@ -145,7 +133,7 @@ const formattedSalary = computed(() => {
</template>
<template #trigger>
<q-input
ref="startLeaveDateRef"
ref="leaveStartDateRef"
class="full-width datepicker"
bg-color="white"
outlined
@ -153,7 +141,7 @@ const formattedSalary = computed(() => {
lazy-rules
hide-bottom-space
:label="`${'ลาตั้งแต่วันที่'}`"
:model-value="formData.startLeaveDate != null ? date2Thai(formData.startLeaveDate) : null"
:model-value="formData.leaveStartDate != null ? date2Thai(formData.leaveStartDate) : null"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
<template v-slot:prepend>
@ -164,17 +152,17 @@ const formattedSalary = computed(() => {
</datepicker>
<datepicker
v-model="formData.endLeaveDate"
v-model="formData.leaveEndDate"
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
autoApply
borderless
@update:model-value="updateLeaveTotal"
week-start="0"
:readonly="!formData.startLeaveDate"
:readonly="!formData.leaveStartDate"
:locale="'th'"
:enableTimePicker="false"
:min-date="formData.startLeaveDate ? new Date(formData.startLeaveDate.getTime() + 24 * 60 * 60 * 1000) : null"
:min-date="formData.leaveStartDate ? new Date(formData.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
>
<template #year="{ year }">
{{ year + 543 }}
@ -184,7 +172,7 @@ const formattedSalary = computed(() => {
</template>
<template #trigger>
<q-input
ref="endLeaveDateRef"
ref="leaveEndDateRef"
class="full-width datepicker"
outlined
dense
@ -192,8 +180,8 @@ const formattedSalary = computed(() => {
bg-color="white"
hide-bottom-space
:label="`${'ลาถึงวันที่'}`"
:readonly="!formData.startLeaveDate"
:model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : null"
:readonly="!formData.leaveStartDate"
:model-value="formData.leaveEndDate != null ? date2Thai(formData.leaveEndDate) : null"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
@ -301,9 +289,9 @@ const formattedSalary = computed(() => {
<div class="full-width">
<div class="q-col-gutter-sm row">
<q-input
v-model="formData.course"
v-model="formData.studyDayTrainingSubject"
class="col-12 col-sm-6 col-md-4"
ref="courseRef"
ref="studyDayTrainingSubjectRef"
bg-color="white"
dense
outlined
@ -313,8 +301,8 @@ const formattedSalary = computed(() => {
/>
<q-input
v-model="formData.location"
ref="locationRef"
v-model="formData.studyDayTrainingName"
ref="studyDayTrainingNameRef"
class="col-12 col-sm-6 col-md-4"
bg-color="white"
dense
@ -325,8 +313,8 @@ const formattedSalary = computed(() => {
/>
<q-input
v-model="formData.country"
ref="countryRef"
v-model="formData.studyDayCountry"
ref="studyDayCountryRef"
class="col-12 col-sm-6 col-md-4"
dense
bg-color="white"
@ -337,8 +325,8 @@ const formattedSalary = computed(() => {
/>
<q-input
v-model="formData.capital"
ref="capitalRef"
v-model="formData.studyDayScholarship"
ref="studyDayScholarshipRef"
class="col-12 col-sm-6 col-md-4"
bg-color="white"
dense
@ -349,9 +337,9 @@ const formattedSalary = computed(() => {
/>
<q-input
v-model="formData.tel"
v-model="formData.leaveNumber"
class="col-12 col-sm-6 col-md-4"
ref="telRef"
ref="leaveNumberRef"
dense
outlined
unmasked-value
@ -363,8 +351,8 @@ const formattedSalary = computed(() => {
/>
<q-input
v-model="formData.addressLeave"
ref="addressLeaveRef"
v-model="formData.leaveAddress"
ref="leaveAddressRef"
class="col-12"
bg-color="white"
dense
@ -376,10 +364,10 @@ const formattedSalary = computed(() => {
</div>
</div>
<q-input v-model="formData.info" class="col-12 col-md-12 col-sm-12" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
<q-input v-model="formData.leaveDetail" class="col-12 col-md-12 col-sm-12" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
<div class="col-12 col-sm-6">
<q-file v-model="formData.file" bg-color="white" dense outlined multiple label="เอกสารประกอบ">
<q-file v-model="formData.leaveDocument" bg-color="white" dense outlined multiple label="เอกสารประกอบ">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>

105
src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue
View file

@ -8,7 +8,6 @@ const $q = useQuasar()
const mixin = useCounterMixin()
const { date2Thai, dialogConfirm, notifyError } = mixin
const edit = ref<boolean>(true)
const filesUpload = ref<any>(null)
const isSave = ref<boolean>(false)
/** รับ props มาจากหน้าหลัก */
@ -25,37 +24,39 @@ const props = defineProps({
/** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<FormData>({
leaveNo: "",
startLeaveDate: null,
endLeaveDate: null,
leaveWrote: "",
leaveStartDate: null,
leaveEndDate: null,
leaveDetail: "",
file: [],
leaveDocument: [],
leaveDraftDocument: [],
})
/** ตัวแปร ref สำหรับแสดง validate */
const leaveNoRef = ref<object | null>(null)
const startLeaveDateRef = ref<object | null>(null)
const endLeaveDateRef = ref<object | null>(null)
const leaveWroteRef = ref<object | null>(null)
const leaveStartDateRef = ref<object | null>(null)
const leaveEndDateRef = ref<object | null>(null)
const leaveDetailRef = ref<object | null>(null)
const fileRef = ref<object | null>(null)
const leaveDocumentRef = ref<object | null>(null)
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const FormRef: FormRef = {
leaveNo: leaveNoRef,
startLeaveDate: startLeaveDateRef,
endLeaveDate: endLeaveDateRef,
leaveWrote: leaveWroteRef,
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
leaveDetail: leaveDetailRef,
file: fileRef,
leaveDocument: leaveDocumentRef,
}
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props.data, async () => {
// console.log("data==>", props.data)
formData.leaveNo = props.data.leaveNo
formData.startLeaveDate = props.data.startLeaveDate
formData.endLeaveDate = props.data.endLeaveDate
formData.leaveWrote = props.data.leaveWrote
formData.leaveStartDate = props.data.leaveStartDate
formData.leaveEndDate = props.data.leaveEndDate
formData.leaveDetail = props.data.leaveDetail
formData.file = props.data.file
formData.leaveDocument = props.data.leaveDocument
formData.leaveDraftDocument = props.data.leaveDraftDocument
})
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
@ -79,42 +80,12 @@ function onValidate() {
}
}
if (hasError.every(result => result === true)) {
onSubmit()
props.onSubmit(formData)
}
}
/** ฟังก์ชั่น บันทึก */
function onSubmit() {
dialogConfirm($q, async () => {
if (filesUpload.value) {
console.log(filesUpload.value)
} else {
notifyError($q, "กรุณาอัปโหลดแบบฟอร์ม")
console.log("false")
}
})
}
</script>
<template>
<!-- <div>
ลาไปปฏิบัติงานในองค์การระหว่างประเทศ
<ul>
<li>เขียนที่</li>
<li>ลาตั้งแต่วันที่</li>
<li>ลาถึงวันที่</li>
<li>รายละเอียด (ไม่บังคับกรอก)</li>
<li>เอกสารประกอบ</li>
<li>*หลังจากบันทึก แสดงปุ่มดาวน์โหลดแบบฟอร์ม</li>
<li>*หลังจากบันทึก แสดง input ให้อัพโหลดเอกสารกลับเข้าระบบ</li>
</ul>
<p>*หมายเหตุ
รายละเอียดฟิลด์ในหัวข้อนี้มีเยอะ หลังจากกดบันทึกแล้วแสดงเอกสาร docx ให้ดาวน์โหลด เพื่อกรอก
และเพิ่มให้อัพโหหลดเอกสารกลับเข้ามาในระบบ
</p>
</div> -->
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
@ -124,13 +95,13 @@ function onSubmit() {
<div class="col-12 row q-pa-sm q-col-gutter-sm">
<q-input
class="col-12 col-sm-12"
ref="leaveNoRef"
ref="leaveWroteRef"
hide-bottom-space
bg-color="white"
for="leaveNoRef"
for="leaveWroteRef"
dense
outlined
v-model="formData.leaveNo"
v-model="formData.leaveWrote"
label="เขียนที่"
:readonly="!edit"
:rules="[val => !!val || `${'เขียนที่'}`]"
@ -139,7 +110,7 @@ function onSubmit() {
<datepicker
class="col-12 col-md-6 col-sm-6"
menu-class-name="modalfix"
v-model="formData.startLeaveDate"
v-model="formData.leaveStartDate"
:locale="'th'"
hide-bottom-space
autoApply
@ -158,13 +129,13 @@ function onSubmit() {
<q-input
outlined
dense
ref="startLeaveDateRef"
for="startLeaveDateRef"
ref="leaveStartDateRef"
for="leaveStartDateRef"
hide-bottom-space
bg-color="white"
:readonly="!edit"
class="full-width datepicker"
:model-value="formData.startLeaveDate != null ? date2Thai(formData.startLeaveDate) : null"
:model-value="formData.leaveStartDate != null ? date2Thai(formData.leaveStartDate) : null"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
@ -178,15 +149,15 @@ function onSubmit() {
<datepicker
class="col-12 col-md-6 col-sm-6"
menu-class-name="modalfix"
v-model="formData.endLeaveDate"
v-model="formData.leaveEndDate"
:locale="'th'"
autoApply
hide-bottom-space
borderless
:enableTimePicker="false"
week-start="0"
:readonly="!formData.startLeaveDate"
:min-date="formData.startLeaveDate ? new Date(formData.startLeaveDate.getTime() + 24 * 60 * 60 * 1000) : null"
:readonly="!formData.leaveStartDate"
:min-date="formData.leaveStartDate ? new Date(formData.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
>
<template #year="{ year }">
{{ year + 543 }}
@ -198,13 +169,13 @@ function onSubmit() {
<q-input
outlined
dense
ref="endLeaveDateRef"
for="endLeaveDateRef"
ref="leaveEndDateRef"
for="leaveEndDateRef"
hide-bottom-space
bg-color="white"
:readonly="!formData.startLeaveDate"
:readonly="!formData.leaveStartDate"
class="full-width datepicker"
:model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : null"
:model-value="formData.leaveEndDate != null ? date2Thai(formData.leaveEndDate) : null"
:label="`${'ลาถึงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
@ -241,7 +212,7 @@ function onSubmit() {
:readonly="!edit"
/>
<q-file ref="fileRef" bg-color="white" v-model="formData.file" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-12">
<q-file ref="fileRef" bg-color="white" v-model="formData.leaveDocument" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-12">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
@ -253,7 +224,7 @@ function onSubmit() {
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="(file, index) in formData.file" :key="index" class="q-my-xs">
<q-item v-for="(file, index) in formData.leaveDocument" :key="index" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.name }}
@ -267,7 +238,7 @@ function onSubmit() {
</div>
</q-card>
<div v-if="formData.leaveNo && formData.endLeaveDate && formData.startLeaveDate" class="q-mt-md">
<div v-if="formData.leaveWrote && formData.leaveEndDate && formData.leaveStartDate" class="q-mt-md">
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">ดาวน์โหลด/อัปโหลดแบบฟอร์ม</div>
@ -283,7 +254,7 @@ function onSubmit() {
<div class="col-10 col-sm-5 col-md-4 q-my-sm">
<div class="column q-mx-xs">
<div class="q-pl-sm text-weight-bold text-dark text-center">อัปโหลด</div>
<q-file v-model="filesUpload" dense label="แบบฟอร์ม" outlined bg-color="white" multiple accept=".pdf">
<q-file v-model="formData.leaveDraftDocument" dense label="แบบฟอร์ม" outlined bg-color="white" multiple accept=".pdf">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
@ -291,7 +262,7 @@ function onSubmit() {
</div>
</div>
<div class="col-md-1 self-end q-mb-sm">
<q-btn v-if="filesUpload" flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"><q-tooltip>อัปโหลด</q-tooltip></q-btn>
<q-btn v-if="formData.leaveDraftDocument" flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"><q-tooltip>อัปโหลด</q-tooltip></q-btn>
</div>
</div>
</q-card>

167
src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
View file

@ -21,77 +21,77 @@ const props = defineProps({
/** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<any>({
leaveNo: "",
startLeaveDate: null,
endLeaveDate: null,
leaveWrote: "",
leaveStartDate: null,
leaveEndDate: null,
leaveTotal: "", //จำนวนวันลา
salaryText: 25000,
salary: 25000, //เงินเดือนปัจจุบัน
spouseName: "", //ชื่อคู่สมรส
spousePosition: "", //ตำแหน่งคู่สมรส
spouseLevel: "", //ระดับคู่สมรส
dutyCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ
leaveSalary: 25000, //เงินเดือนปัจจุบัน
coupleDayName: "", //ชื่อคู่สมรส
coupleDayPosition: "", //ตำแหน่งคู่สมรส
coupleDayLevel: "", //ระดับคู่สมรส
coupleDayLevelCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ
followHistoryCountry: "", //ประวัติการลาติดตามคู่สมรส
followHistoryTime: "",
followHistoryStart: null,
followHistoryEnd: null,
leaveDetail: "ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา ...ปี, ...เดือน, ...วัน", //รายละเอียดการลา
file: [], //เอกสารปะกอบ
leaveDocument: [], //เอกสารปะกอบ
})
/** แปลงตัวแปร Salary */
const formattSalaryText = arabicNumberToText(formData.salaryText)
const formattSalary = computed(() => {
return formData.salary !== null ? formData.salary.toLocaleString("th-TH") : ""
return formData.leaveSalary !== null ? formData.leaveSalary.toLocaleString("th-TH") : ""
})
/** ตัวแปร ref สำหรับแสดง validate */
const leaveNoRef = ref<object | null>(null)
const startLeaveDateRef = ref<object | null>(null)
const endLeaveDateRef = ref<object | null>(null)
const salaryRef = ref<object | null>(null)
const leaveWroteRef = ref<object | null>(null)
const leaveStartDateRef = ref<object | null>(null)
const leaveEndDateRef = ref<object | null>(null)
const leaveSalaryRef = ref<object | null>(null)
const leaveTotalRef = ref<object | null>(null)
const spouseNameRef = ref<object | null>(null)
const leaveContactLocationRef = ref<object | null>(null)
const coupleDayNameRef = ref<object | null>(null)
const leaveAddressRef = ref<object | null>(null)
const leaveDetailRef = ref<object | null>(null)
const spousePositionRef = ref<object | null>(null)
const spouseLevelRef = ref<object | null>(null)
const dutyCountryRef = ref<object | null>(null)
const coupleDayPositionRef = ref<object | null>(null)
const coupleDayLevelRef = ref<object | null>(null)
const coupleDayLevelCountryRef = ref<object | null>(null)
const followHistoryCountryRef = ref<object | null>(null)
const followHistoryTimeRef = ref<object | null>(null)
const followHistoryStartRef = ref<object | null>(null)
const followHistoryEndRef = ref<object | null>(null)
const fileRef = ref<object | null>(null)
const leaveDocumentRef = ref<object | null>(null)
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const FormRef: FormRef = {
leaveNo: leaveNoRef, //เขียนที่***
startLeaveDate: startLeaveDateRef, //*วัน เดือน ปีเริ่มต้นลา
endLeaveDate: endLeaveDateRef, //*วัน เดือน ปีสิ้นสุดลา
leaveWrote: leaveWroteRef, //เขียนที่***
leaveStartDate: leaveStartDateRef, //*วัน เดือน ปีเริ่มต้นลา
leaveEndDate: leaveEndDateRef, //*วัน เดือน ปีสิ้นสุดลา
leaveTotal: leaveTotalRef, //จำนวนวันลา
salary: salaryRef, //เงินเดือนปัจจุบัน
spouseName: spouseNameRef, //หมายเลขที่ติดต่อขณะลา
spousePosition: spousePositionRef, //ตำแหน่งคู่สมรส
spouseLevel: spouseLevelRef, //ระดับคู่สมรส
dutyCountry: dutyCountryRef, //ไปปฏิบัติราชการ ณ ประเทศ
leaveSalary: leaveSalaryRef, //เงินเดือนปัจจุบัน
coupleDayName: coupleDayNameRef, //หมายเลขที่ติดต่อขณะลา
coupleDayPosition: coupleDayPositionRef, //ตำแหน่งคู่สมรส
coupleDayLevel: coupleDayLevelRef, //ระดับคู่สมรส
coupleDayLevelCountry: coupleDayLevelCountryRef, //ไปปฏิบัติราชการ ณ ประเทศ
followHistoryCountry: followHistoryCountryRef, //ประวัติการลาติดตามคู่สมรส
followHistoryEnd: followHistoryEndRef, //ประวัติการลาติดตามคู่สมรส
followHistoryTime: followHistoryTimeRef, //ประวัติการลาติดตามคู่สมรส
followHistoryStart: followHistoryStartRef, //ประวัติการลาติดตามคู่สมรส
leaveDetail: leaveDetailRef, //รายละเอียดการลา
leaveContactLocation: leaveContactLocationRef, //สถานที่ติดต่อขณะลา
file: fileRef,
leaveAddress: leaveAddressRef, //สถานที่ติดต่อขณะลา
leaveDocument: leaveDocumentRef,
}
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props.data, async () => {
// console.log("data==>", props.data)
formData.leaveNo = props.data.leaveNo
formData.startLeaveDate = props.data.startLeaveDate
formData.endLeaveDate = props.data.endLeaveDate
formData.leaveWrote = props.data.leaveWrote
formData.leaveStartDate = props.data.leaveStartDate
formData.leaveEndDate = props.data.leaveEndDate
formData.leaveTotal = props.data.leaveTotal
formData.leaveDetail = props.data.leaveDetail
formData.file = props.data.file
formData.leaveDocument = props.data.leaveDocument
})
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
@ -115,7 +115,7 @@ function onValidate() {
}
}
if (hasError.every(result => result === true)) {
props.onSubmit()
props.onSubmit(formData)
}
}
@ -123,35 +123,13 @@ function onValidate() {
* function อัพเดทค่า LeaveTotal
*/
function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(formData.startLeaveDate, formData.endLeaveDate)
const newLeaveTotal = calculateDurationYmd(formData.leaveStartDate, formData.leaveEndDate)
formData.leaveTotal = newLeaveTotal
console.log("test")
}
</script>
<template>
<!-- <div>
ลาติดตามคู่สมรส
<ul>
<li>เขียนที่</li>
<li>ลาตั้งแต่วันที่</li>
<li>ลาถึงวันที่</li>
<li>มีกำหนด กี่ปี กี่เดือน กี่วัน (คำนวนจากทาง frontend Auto)</li>
<li>เงินเดือนปัจจุบัน (Auto)</li>
<li>เงินเดือนปัจจุบัน (เขียนเป็นคำอ่าน) ใช้ฟังก์ชั่นแปลงเลขเป็นข้อความ</li>
<li>ชื่อคู่สมรส</li>
<li>ตำแหน่งคู่สมรส</li>
<li>ระดับคู่สมรส</li>
<li>ไปปฏิบัติราชการ ณ ประเทศ</li>
<li>ระดับคู่สมรส</li>
<li>
ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย ประกอบด้วย ประเทศ, เป็นเวลา กี่ปี กี่เดือน กี่วัน, ตั้งแต่วันที่, ถึงวันที่ (ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน
กี่วัน ข้อมูลมาจาก API (Auto))
</li>
<li>รายละเอียด (ไม่บังคับกรอก)</li>
<li>เอกสารประกอบ</li>
</ul>
</div> -->
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
@ -161,13 +139,13 @@ function updateLeaveTotal() {
<div class="col-12 row q-pa-sm q-col-gutter-sm">
<q-input
class="col-12 col-sm-12"
ref="leaveNoRef"
for="leaveNoRef"
ref="leaveWroteRef"
for="leaveWroteRef"
dense
hide-bottom-space
bg-color="white"
outlined
v-model="formData.leaveNo"
v-model="formData.leaveWrote"
label="เขียนที่"
:readonly="!edit"
:rules="[val => !!val || `${'เขียนที่'}`]"
@ -175,7 +153,7 @@ function updateLeaveTotal() {
<datepicker
class="col-12 col-md-4 col-sm-12"
menu-class-name="modalfix"
v-model="formData.startLeaveDate"
v-model="formData.leaveStartDate"
:locale="'th'"
autoApply
hide-bottom-space
@ -194,13 +172,13 @@ function updateLeaveTotal() {
<q-input
outlined
dense
ref="startLeaveDateRef"
for="startLeaveDateRef"
ref="leaveStartDateRef"
for="leaveStartDateRef"
hide-bottom-space
bg-color="white"
:readonly="!edit"
class="full-width datepicker"
:model-value="formData.startLeaveDate != null ? date2Thai(formData.startLeaveDate) : null"
:model-value="formData.leaveStartDate != null ? date2Thai(formData.leaveStartDate) : null"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
@ -214,7 +192,7 @@ function updateLeaveTotal() {
<datepicker
class="col-12 col-md-4 col-sm-12"
menu-class-name="modalfix"
v-model="formData.endLeaveDate"
v-model="formData.leaveEndDate"
:locale="'th'"
autoApply
borderless
@ -222,8 +200,8 @@ function updateLeaveTotal() {
:enableTimePicker="false"
week-start="0"
@update:model-value="updateLeaveTotal"
:readonly="!formData.startLeaveDate"
:min-date="formData.startLeaveDate ? new Date(formData.startLeaveDate.getTime() + 24 * 60 * 60 * 1000) : null"
:readonly="!formData.leaveStartDate"
:min-date="formData.leaveStartDate ? new Date(formData.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
>
<template #year="{ year }">
{{ year + 543 }}
@ -235,13 +213,13 @@ function updateLeaveTotal() {
<q-input
outlined
dense
ref="endLeaveDateRef"
for="endLeaveDateRef"
ref="leaveEndDateRef"
for="leaveEndDateRef"
hide-bottom-space
bg-color="white"
:readonly="!formData.startLeaveDate"
:readonly="!formData.leaveStartDate"
class="full-width datepicker"
:model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : null"
:model-value="formData.leaveEndDate != null ? date2Thai(formData.leaveEndDate) : null"
:label="`${'ลาถึงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
@ -264,15 +242,26 @@ function updateLeaveTotal() {
hide-bottom-space
/>
<div class="col-12 col-md-6 col-sm-12">
<q-input hide-bottom-space bg-color="white" class="col-12 col-sm-12" ref="salaryRef" for="salaryRef" dense outlined v-model="formattSalary" label="เงินเดือนปัจจุบัน" readonly />
<q-input
hide-bottom-space
bg-color="white"
class="col-12 col-sm-12"
ref="leaveSalaryRef"
for="leaveSalaryRef"
dense
outlined
v-model="formattSalary"
label="เงินเดือนปัจจุบัน"
readonly
/>
</div>
<div class="col-12 col-md-6 col-sm-12">
<q-input
hide-bottom-space
bg-color="white"
class="col-12 col-sm-12"
ref="salaryRef"
for="salaryRef"
ref="leaveSalaryRef"
for="leaveSalaryRef"
dense
outlined
v-model="formattSalaryText"
@ -285,12 +274,12 @@ function updateLeaveTotal() {
<q-input
class="col-12 col-sm-12"
hide-bottom-space
ref="spouseNameRef"
for="spouseNameRef"
ref="coupleDayNameRef"
for="coupleDayNameRef"
dense
bg-color="white"
outlined
v-model="formData.spouseName"
v-model="formData.coupleDayName"
label="ชื่อคู่สมรส"
:readonly="!edit"
:rules="[val => !!val || `${'ชื่อคู่สมรส'}`]"
@ -300,12 +289,12 @@ function updateLeaveTotal() {
<q-input
class="col-12 col-sm-12"
hide-bottom-space
ref="spousePositionRef"
for="spousePositionRef"
ref="coupleDayPositionRef"
for="coupleDayPositionRef"
dense
outlined
bg-color="white"
v-model="formData.spousePosition"
v-model="formData.coupleDayPosition"
label="ตำแหน่งคู่สมรส"
:readonly="!edit"
:rules="[val => !!val || `${'ตำแหน่งคู่สมรส'}`]"
@ -314,13 +303,13 @@ function updateLeaveTotal() {
<div class="col-md-3 col-sm-12">
<q-input
class="col-12 col-sm-12"
ref="spouseLevelRef"
for="spouseLevelRef"
ref="coupleDayLevelRef"
for="coupleDayLevelRef"
dense
hide-bottom-space
outlined
bg-color="white"
v-model="formData.spouseLevel"
v-model="formData.coupleDayLevel"
label="ระดับคู่สมรส"
:readonly="!edit"
:rules="[val => !!val || `${'ระดับคู่สมรส'}`]"
@ -329,13 +318,13 @@ function updateLeaveTotal() {
<div class="col-md-3 col-sm-12">
<q-input
class="col-12 col-sm-12"
ref="dutyCountryRef"
for="dutyCountryRef"
ref="coupleDayLevelCountryRef"
for="coupleDayLevelCountryRef"
hide-bottom-space
dense
outlined
bg-color="white"
v-model="formData.dutyCountry"
v-model="formData.coupleDayLevelCountry"
label="ไปปฏิบัติราชการ ณ ประเทศ"
:readonly="!edit"
:rules="[val => !!val || `${'ปฏิบัติราชการ ณ ประเทศ'}`]"
@ -458,7 +447,7 @@ function updateLeaveTotal() {
:readonly="!edit"
/>
<q-file ref="fileRef" bg-color="white" v-model="formData.file" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-12">
<q-file ref="fileRef" bg-color="white" v-model="formData.leaveDocument" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-12">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
@ -470,7 +459,7 @@ function updateLeaveTotal() {
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="(file, index) in formData.file" :key="index" class="q-my-xs">
<q-item v-for="(file, index) in formData.leaveDocument" :key="index" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.name }}

87
src/modules/05_leave/componenst/Forms/13_RehabilitationForm.vue
View file

@ -2,7 +2,7 @@
import { reactive, ref, computed } from "vue"
import { useCounterMixin } from "@/stores/mixin"
import { useQuasar } from "quasar"
import type { FormRef13 } from "@/modules/05_leave/interface/request/AddAbsence"
import type { RehabilitationForm } from "@/modules/05_leave/interface/request/AddAbsence"
const $q = useQuasar()
const mixin = useCounterMixin()
@ -14,9 +14,9 @@ const files = ref<any>(null)
const filesUpload = ref<any>(null)
/** ตัวแปร ref สำหรับแสดง validate */
const startLeaveDateRef = ref<object | null>(null)
const endLeaveDateRef = ref<object | null>(null)
const writeatRef = ref<object | null>(null)
const leaveStartDateRef = ref<object | null>(null)
const leaveEndDateRef = ref<object | null>(null)
const leaveWroteRef = ref<object | null>(null)
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
@ -32,18 +32,19 @@ const props = defineProps({
/** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<any>({
writeat: "",
startLeaveDate: null,
endLeaveDate: null,
file: "",
info: "",
leaveWrote: "",
leaveStartDate: null,
leaveEndDate: null,
leaveDocument: "",
leaveDetail: "",
leaveDraftDocument: "",
})
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const formRef: FormRef13 = {
startLeaveDate: startLeaveDateRef,
endLeaveDate: endLeaveDateRef,
writeat: writeatRef,
const formRef: RehabilitationForm = {
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
leaveWrote: leaveWroteRef,
}
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
@ -59,36 +60,10 @@ function onValidate() {
}
}
if (hasError.every(result => result === true)) {
onSubmit()
props.onSubmit(formData)
}
}
// /** ฟังก์ชั่น บันทึก */
// function onSubmit() {
// dialogConfirm(
// $q,
// async () => {
// props.onSubmit()
// console.log(formData)
// isSave.value = true
// },
// "ยืนยันการยื่นใบลา",
// "ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
// )
// }
/** ฟังก์ชั่น บันทึก */
function onSubmit() {
dialogConfirm($q, async () => {
if (filesUpload.value) {
console.log(filesUpload.value)
} else {
notifyError($q, "กรุณาอัปโหลดแบบฟอร์ม")
console.log("false")
}
})
}
/** ฟังก์ชั่น อัปโหลด
* consolelog ไว้ก่อน
*/
@ -106,9 +81,9 @@ function upLoadFile() {
<q-card bordered class="q-pa-md bg-grey-1">
<div class="row q-pa-sm q-col-gutter-sm">
<q-input
v-model="formData.writeat"
v-model="formData.leaveWrote"
class="col-12 col-sm-12"
ref="writeatRef"
ref="leaveWroteRef"
dense
outlined
bg-color="white"
@ -117,7 +92,7 @@ function upLoadFile() {
:rules="[val => !!val || `${'เขียนที่'}`]"
/>
<datepicker v-model="formData.startLeaveDate" class="col-12 col-md-4 col-sm-6" menu-class-name="modalfix" autoApply borderless week-start="0" :enableTimePicker="false" :locale="'th'">
<datepicker v-model="formData.leaveStartDate" class="col-12 col-md-4 col-sm-6" menu-class-name="modalfix" autoApply borderless week-start="0" :enableTimePicker="false" :locale="'th'">
<template #year="{ year }">
{{ year + 543 }}
</template>
@ -126,14 +101,14 @@ function upLoadFile() {
</template>
<template #trigger>
<q-input
ref="startLeaveDateRef"
ref="leaveStartDateRef"
class="full-width datepicker"
bg-color="white"
outlined
dense
lazy-rules
hide-bottom-space
:model-value="formData.startLeaveDate != null ? date2Thai(formData.startLeaveDate) : null"
:model-value="formData.leaveStartDate != null ? date2Thai(formData.leaveStartDate) : null"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
@ -145,16 +120,16 @@ function upLoadFile() {
</datepicker>
<datepicker
v-model="formData.endLeaveDate"
v-model="formData.leaveEndDate"
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
autoApply
borderless
week-start="0"
:locale="'th'"
:readonly="!formData.startLeaveDate"
:readonly="!formData.leaveStartDate"
:enableTimePicker="false"
:min-date="formData.startLeaveDate ? new Date(formData.startLeaveDate.getTime() + 24 * 60 * 60 * 1000) : null"
:min-date="formData.leaveStartDate ? new Date(formData.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
>
<template #year="{ year }">
{{ year + 543 }}
@ -164,15 +139,15 @@ function upLoadFile() {
</template>
<template #trigger>
<q-input
ref="endLeaveDateRef"
ref="leaveEndDateRef"
class="full-width datepicker"
outlined
dense
lazy-rules
bg-color="white"
hide-bottom-space
:readonly="!formData.startLeaveDate"
:model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : null"
:readonly="!formData.leaveStartDate"
:model-value="formData.leaveEndDate != null ? date2Thai(formData.leaveEndDate) : null"
:label="`${'ลาถึงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
@ -183,10 +158,10 @@ function upLoadFile() {
</template>
</datepicker>
<q-input v-model="formData.info" class="col-12 col-md-12 col-sm-12" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
<q-input v-model="formData.leaveDetail" class="col-12 col-md-12 col-sm-12" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
<div class="col-12 col-sm-6">
<q-file v-model="formData.file" bg-color="white" dense outlined multiple label="เอกสารประกอบ">
<q-file v-model="formData.leaveDocument" bg-color="white" dense outlined multiple label="เอกสารประกอบ">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
@ -214,7 +189,7 @@ function upLoadFile() {
</div>
</q-card>
<div v-if="formData.writeat && formData.startLeaveDate && formData.endLeaveDate" class="q-mt-md">
<div v-if="formData.leaveWrote && formData.leaveStartDate && formData.leaveEndDate" class="q-mt-md">
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">ดาวน์โหลด/อัปโหลดแบบฟอร์ม</div>
@ -230,7 +205,7 @@ function upLoadFile() {
<div class="col-10 col-sm-5 col-md-4 q-my-sm">
<div class="column q-mx-xs">
<div class="q-pl-sm text-weight-bold text-dark text-center">อัปโหลด</div>
<q-file v-model="filesUpload" dense label="แบบฟอร์ม" outlined bg-color="white" multiple accept="application/pdf">
<q-file v-model="formData.leaveDraftDocument" dense label="แบบฟอร์ม" outlined bg-color="white" multiple accept="application/pdf">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
@ -238,7 +213,7 @@ function upLoadFile() {
</div>
</div>
<div class="col-md-1 self-end q-mb-sm">
<q-btn v-if="filesUpload" flat round color="primary" icon="mdi-arrow-up-bold" @click="upLoadFile"><q-tooltip>อัปโหลด</q-tooltip></q-btn>
<q-btn v-if="formData.leaveDraftDocument" flat round color="primary" icon="mdi-arrow-up-bold" @click="upLoadFile"><q-tooltip>อัปโหลด</q-tooltip></q-btn>
</div>
</div>
</q-card>

4
src/modules/05_leave/componenst/Forms/Form.vue
View file

@ -28,7 +28,7 @@ const formData = reactive<FormData>({
position: "ตำแหน่ง",
level: "ระดับ",
ocRequest: "สังกัด",
leaveReceived: "2",
leaveabsentDaySummon: "2",
leaveUse: "1",
leaveRemaining: "1",
})
@ -67,7 +67,7 @@ const formData = reactive<FormData>({
<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="formData.position" label="ตำแหน่งผู้ยื่นขอ" />
<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="formData.level" label="ระดับผู้ยื่นขอ" />
<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="formData.ocRequest" label="สังกัดผู้ยื่นขอ" />
<q-input class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="formData.leaveReceived" label="จำนวนสิทธิ์การลาที่ได้รับ" />
<q-input class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="formData.leaveabsentDaySummon" label="จำนวนสิทธิ์การลาที่ได้รับ" />
<q-input class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="formData.leaveUse" label="จำนวนสิทธิ์การลาที่ใช้ไป" />
<q-input class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="formData.leaveRemaining" label="จำนวนสิทธิ์การลาคงเหลือ" />
</div>