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

Merge branch 'develop' into dev-tee

Browse source
This commit is contained in:
setthawutttty 2023-12-15 13:49:02 +07:00
commit 8b6a90aa06
13 changed files with 561 additions and 462 deletions
Download patch file Download diff file Expand all files Collapse all files

808
src/modules/05_leave/components/Forms/01_SickForm.vue
View file

@ -1,424 +1,510 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, watch, computed } from "vue" import { ref, reactive, watch, computed } from "vue";
import type { FormData, FormRef } from "@/modules/05_leave/interface/request/SickForm" import type {
import { useCounterMixin } from "@/stores/mixin" FormData,
import { useLeaveStore } from "@/modules/05_leave/store" FormRef,
import http from "@/plugins/http" } from "@/modules/05_leave/interface/request/SickForm";
import config from "@/app.config" import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar" import { useLeaveStore } from "@/modules/05_leave/store";
import { useRouter } from "vue-router" import http from "@/plugins/http";
import config from "@/app.config";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
/** Use */ /** Use */
const dataStore = useLeaveStore() const dataStore = useLeaveStore();
const $q = useQuasar() const $q = useQuasar();
const mixin = useCounterMixin() const mixin = useCounterMixin();
const router = useRouter() const router = useRouter();
const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } = mixin const {
const edit = ref<boolean>(true) date2Thai,
dateToISO,
dialogConfirm,
success,
messageError,
fails,
showLoader,
hideLoader,
} = mixin;
const edit = ref<boolean>(true);
/** รับ props มาจากหน้าหลัก */ /** รับ props มาจากหน้าหลัก */
const props = defineProps({ const props = defineProps({
data: { data: {
type: Object, type: Object,
default: null, default: null,
}, },
onSubmit: { onSubmit: {
type: Function, type: Function,
default: () => "", default: () => "",
}, },
}) });
/** ข้อมูล v-model ของฟอร์ม */ /** ข้อมูล v-model ของฟอร์ม */
const formDataSick = reactive<any>({ const formDataSick = reactive<any>({
type: dataStore.typeId, type: dataStore.typeId,
leaveWrote: "", leaveWrote: "",
leaveStartDate: null, leaveStartDate: null,
leaveEndDate: null, leaveEndDate: null,
halfDay: "day", halfDay: "day",
leaveTotal: "", leaveTotal: "",
leaveLast: null, leaveLast: null,
leaveNumber: "", leaveNumber: "",
leaveAddress: "", leaveAddress: "",
leaveDetail: "", leaveDetail: "",
leaveDocument: [], leaveDocument: [],
}) });
/** ตัวแปร ref สำหรับแสดง validate */ /** ตัวแปร ref สำหรับแสดง validate */
const leaveWroteRef = ref<object | null>(null) const leaveWroteRef = ref<object | null>(null);
const leaveStartDateRef = ref<object | null>(null) const leaveStartDateRef = ref<object | null>(null);
const leaveEndDateRef = ref<object | null>(null) const leaveEndDateRef = ref<object | null>(null);
const halfDayRef = ref<object | null>(null) const halfDayRef = ref<object | null>(null);
const leaveTotalRef = ref<object | null>(null) const leaveTotalRef = ref<object | null>(null);
const leaveLastRef = ref<object | null>(null) const leaveLastRef = ref<object | null>(null);
const leaveNumberRef = ref<object | null>(null) const leaveNumberRef = ref<object | null>(null);
const leaveAddressRef = ref<object | null>(null) const leaveAddressRef = ref<object | null>(null);
const leaveDetailRef = ref<object | null>(null) const leaveDetailRef = ref<object | null>(null);
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */ /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const FormRef: FormRef = { const FormRef: FormRef = {
leaveWrote: leaveWroteRef, leaveWrote: leaveWroteRef,
leaveStartDate: leaveStartDateRef, leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef, leaveEndDate: leaveEndDateRef,
halfDay: halfDayRef, halfDay: halfDayRef,
leaveTotal: leaveTotalRef, leaveTotal: leaveTotalRef,
leaveNumber: leaveNumberRef, leaveNumber: leaveNumberRef,
leaveAddress: leaveAddressRef, leaveAddress: leaveAddressRef,
leaveDetail: leaveDetailRef, leaveDetail: leaveDetailRef,
} };
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */ /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props.data, async () => { watch(props.data, async () => {
// console.log("data==>", props.data) // console.log("data==>", props.data)
formDataSick.leaveWrote = props.data.leaveWrote formDataSick.leaveWrote = props.data.leaveWrote;
formDataSick.leaveStartDate = props.data.leaveStartDate formDataSick.leaveStartDate = props.data.leaveStartDate;
formDataSick.leaveEndDate = props.data.leaveEndDate formDataSick.leaveEndDate = props.data.leaveEndDate;
formDataSick.contractTel = props.data.contractTel formDataSick.contractTel = props.data.contractTel;
formDataSick.leaveTotal = props.data.leaveTotal formDataSick.leaveTotal = props.data.leaveTotal;
formDataSick.leaveNumber = props.data.leaveNumber formDataSick.leaveNumber = props.data.leaveNumber;
formDataSick.leaveDetail = props.data.leaveDetail formDataSick.leaveDetail = props.data.leaveDetail;
formDataSick.leaveDocument = props.data.leaveDocument formDataSick.leaveDocument = props.data.leaveDocument;
}) });
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */ /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("") const nameFile = ref<string>("");
const fileDocDataUpload = ref<File[]>([]) const fileDocDataUpload = ref<File[]>([]);
async function fileUploadDoc(files: any) { async function fileUploadDoc(files: any) {
files.forEach((file: any) => { files.forEach((file: any) => {
fileDocDataUpload.value.push(file) fileDocDataUpload.value.push(file);
}) });
} }
/** /**
* function รีเซทค่า leaveStartDate เเละ leaveEndDate * function รีเซทค่า leaveStartDate เเละ leaveEndDate
*/ */
function resetDate() { function resetDate() {
if (formDataSick.halfDay === "half_day_morning" || formDataSick.halfDay === "half_day_afternoon") { if (
formDataSick.leaveStartDate = null formDataSick.halfDay === "half_day_morning" ||
formDataSick.leaveEndDate = null formDataSick.halfDay === "half_day_afternoon"
} ) {
console.log("testnull") formDataSick.leaveStartDate = null;
formDataSick.leaveEndDate = null;
}
console.log("testnull");
} }
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */ /** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
function onValidate() { function onValidate() {
const hasError = [] const hasError = [];
for (const key in FormRef) { for (const key in FormRef) {
if (Object.prototype.hasOwnProperty.call(FormRef, key)) { if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
const property = FormRef[key] const property = FormRef[key];
if (property.value && typeof property.value.validate === "function") { if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate() const isValid = property.value.validate();
hasError.push(isValid) hasError.push(isValid);
} }
} }
} }
if (hasError.every(result => result === true)) { if (hasError.every((result) => result === true)) {
onSubmit() onSubmit();
} }
} }
/** ฟังก์ชั่น บันทึก */ /** ฟังก์ชั่น บันทึก */
const onSubmit = async () => { const onSubmit = async () => {
dialogConfirm( dialogConfirm(
$q, $q,
async () => { async () => {
await saveFormData() await saveFormData();
}, },
"ยืนยันการยื่นใบลา", "ยืนยันการยื่นใบลา",
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?" "ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
) );
} };
/** /**
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
*/ */
async function saveFormData() { async function saveFormData() {
const formData = new FormData() showLoader();
if (formDataSick.leaveDocument.length > 0) { const formData = new FormData();
const blob = formDataSick.leaveDocument.slice(0, formDataSick.leaveDocument[0].size) // if (formDataSick.leaveDocument.length > 0) {
const newFile = new File(blob, nameFile.value, { // const blob = formDataSick.leaveDocument.slice(
type: formDataSick.leaveDocument[0].type, // 0,
}) // formDataSick.leaveDocument[0].size
formData.append("leaveDocument", newFile) // );
} // const newFile = new File(blob, nameFile.value, {
// type: formDataSick.leaveDocument[0].type,
// });
// formData.append("leaveDocument", newFile);
// }
formData.append("type", formDataSick.type) formData.append("leaveDocument", formDataSick.leaveDocument);
formData.append("leaveStartDate", dateToISO(formDataSick.leaveStartDate)) formData.append("type", formDataSick.type);
formData.append("leaveEndDate", dateToISO(formDataSick.leaveEndDate)) formData.append("leaveStartDate", dateToISO(formDataSick.leaveStartDate));
formData.append("leaveWrote", formDataSick.leaveWrote) formData.append("leaveEndDate", dateToISO(formDataSick.leaveEndDate));
formData.append("leaveAddress", formDataSick.leaveAddress) formData.append("leaveWrote", formDataSick.leaveWrote);
formData.append("leaveNumber", formDataSick.leaveNumber) formData.append("leaveAddress", formDataSick.leaveAddress);
formData.append("leaveDetail", formDataSick.leaveDetail) formData.append("leaveNumber", formDataSick.leaveNumber);
await http formData.append("leaveDetail", formDataSick.leaveDetail);
.post(config.API.leaveUser(), formData) await http
.then((res: any) => { .post(config.API.leaveUser(), formData)
success($q, "บันทึกสำเร็จ") .then(() => {
router.push(`/leave`) success($q, "บันทึกสำเร็จ");
}) router.push(`/leave`);
.catch((e: any) => { })
messageError($q, e) .catch((e: any) => {
}) messageError($q, e);
})
.finally(() => {
hideLoader();
});
} }
/** /**
* check ว่าลาได้ไหม จาก api * check ว่าลาได้ไหม จาก api
* @param formData * @param formData
*/ */
const isLeave = ref<boolean>(true) const isLeave = ref<boolean>(true);
async function FetchCheck() { async function FetchCheck() {
await http await http
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataSick.leaveStartDate ?? null, EndLeaveDate: formDataSick.leaveEndDate ?? null }) .post(config.API.leaveCheck(), {
.then((res: any) => { type: dataStore.typeId ?? null,
const data = res.data.result StartLeaveDate: formDataSick.leaveStartDate ?? null,
isLeave.value = data.isLeave EndLeaveDate: formDataSick.leaveEndDate ?? null,
if (data.isLeave === true) { })
formDataSick.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday .then((res: any) => {
} else { const data = res.data.result;
fails($q, "ไม่สามารถลาได้") isLeave.value = data.isLeave;
} if (data.isLeave === true) {
}) formDataSick.leaveTotal =
.catch((e: any) => { data.totalDate - data.sumDateWork - data.sumDateHoliday;
messageError($q, e) } else {
}) fails($q, "ไม่สามารถลาได้");
}
})
.catch((e: any) => {
messageError($q, e);
});
} }
/** /**
* ฟังก์ชั่นแปลงครึ่งวัน/ทั้งวัน * ฟังก์ชั่นแปลงครึ่งวัน/ทั้งวัน
*/ */
const isReadOnly = computed(() => { const isReadOnly = computed(() => {
const conditionHalfDay = formDataSick.halfDay === "half_day_morning" || formDataSick.halfDay === "half_day_afternoon" const conditionHalfDay =
if (conditionHalfDay) { formDataSick.halfDay === "half_day_morning" ||
formDataSick.leaveEndDate = formDataSick.leaveStartDate // Set formDataSick.leaveEndDate to null formDataSick.halfDay === "half_day_afternoon";
formDataSick.leaveTotal = "0.5 วัน " if (conditionHalfDay) {
} else { formDataSick.leaveEndDate = formDataSick.leaveStartDate; // Set formDataSick.leaveEndDate to null
formDataSick.leaveTotal = null formDataSick.leaveTotal = "0.5 วัน ";
} } else {
return conditionHalfDay formDataSick.leaveTotal = null;
}) }
return conditionHalfDay;
});
</script> </script>
<!-- ฟอร์มลาป่วย และลากิจส่วนตัว --> <!-- ฟอร์มลาป่วย และลากิจส่วนตัว -->
<template> <template>
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" /> <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div> <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
</div> </div>
<form @submit.prevent.stop="onValidate"> <form @submit.prevent.stop="onValidate">
<q-card bordered class="q-pa-md bg-grey-1"> <q-card bordered class="q-pa-md bg-grey-1">
<div class="col-12 row q-pa-sm q-col-gutter-sm"> <div class="col-12 row q-pa-sm q-col-gutter-sm">
<q-input <q-input
class="col-12 col-sm-12" class="col-12 col-sm-12"
ref="leaveWroteRef" ref="leaveWroteRef"
for="leaveWroteRef" for="leaveWroteRef"
dense dense
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
outlined outlined
v-model="formDataSick.leaveWrote" v-model="formDataSick.leaveWrote"
label="เขียนที่" label="เขียนที่"
:readonly="!edit" :readonly="!edit"
:rules="[val => !!val || `${'เขียนที่'}`]" :rules="[(val) => !!val || `${'เขียนที่'}`]"
/> />
<div class="col-12 col-md-4 col-sm-12"> <div class="col-12 col-md-4 col-sm-12">
<q-radio v-model="formDataSick.halfDay" val="day" label="ลาทั้งวัน" checked-icon="task_alt" /> <q-radio
<q-radio v-model="formDataSick.halfDay" val="half_day_morning" label="ลาครึ่งวันเช้า" checked-icon="task_alt" @update:model-value="resetDate" /> v-model="formDataSick.halfDay"
<q-radio v-model="formDataSick.halfDay" val="half_day_afternoon" label="ลาครึ่งวันบ่าย" checked-icon="task_alt" @update:model-value="resetDate" /> val="day"
</div> label="ลาทั้งวัน"
<div class="full-width"> checked-icon="task_alt"
<div class="q-col-gutter-sm row"> />
<datepicker <q-radio
class="col-12 col-md-3 col-sm-6" v-model="formDataSick.halfDay"
menu-class-name="modalfix" val="half_day_morning"
v-model="formDataSick.leaveStartDate" label="ลาครึ่งวันเช้า"
:locale="'th'" checked-icon="task_alt"
autoApply @update:model-value="resetDate"
borderless />
:enableTimePicker="false" <q-radio
week-start="0" v-model="formDataSick.halfDay"
:readonly="!edit" val="half_day_afternoon"
> label="ลาครึ่งวันบ่าย"
<template #year="{ year }"> checked-icon="task_alt"
{{ year + 543 }} @update:model-value="resetDate"
</template> />
<template #year-overlay-value="{ value }"> </div>
{{ parseInt(value + 543) }} <div class="full-width">
</template> <div class="q-col-gutter-sm row">
<template #trigger> <datepicker
<q-input class="col-12 col-md-3 col-sm-6"
outlined menu-class-name="modalfix"
dense v-model="formDataSick.leaveStartDate"
ref="leaveStartDateRef" :locale="'th'"
for="leaveStartDateRef" autoApply
hide-bottom-space borderless
:readonly="!edit" :enableTimePicker="false"
bg-color="white" week-start="0"
class="full-width datepicker" :readonly="!edit"
:model-value="formDataSick.leaveStartDate != null ? date2Thai(formDataSick.leaveStartDate) : null" >
:label="`${'ลาตั้งแต่วันที่'}`" <template #year="{ year }">
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]" {{ year + 543 }}
> </template>
<template v-slot:prepend> <template #year-overlay-value="{ value }">
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon> {{ parseInt(value + 543) }}
</template> </template>
</q-input> <template #trigger>
</template> <q-input
</datepicker> outlined
dense
ref="leaveStartDateRef"
for="leaveStartDateRef"
hide-bottom-space
:readonly="!edit"
bg-color="white"
class="full-width datepicker"
:model-value="
formDataSick.leaveStartDate != null
? date2Thai(formDataSick.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 <datepicker
class="col-12 col-md-3 col-sm-6" class="col-12 col-md-3 col-sm-6"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataSick.leaveEndDate" v-model="formDataSick.leaveEndDate"
:locale="'th'" :locale="'th'"
autoApply autoApply
borderless borderless
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
:readonly="isReadOnly" :readonly="isReadOnly"
@update:model-value="FetchCheck()" @update:model-value="FetchCheck()"
:min-date="formDataSick.leaveStartDate ? new Date(formDataSick.leaveStartDate.getTime() * 60 * 60 * 1000) : null" :min-date="
> formDataSick.leaveStartDate
<template #year="{ year }"> ? new Date(
{{ year + 543 }} formDataSick.leaveStartDate.getTime() * 60 * 60 * 1000
</template> )
<template #year-overlay-value="{ value }"> : null
{{ parseInt(value + 543) }} "
</template> >
<template #trigger> <template #year="{ year }">
<q-input {{ year + 543 }}
outlined </template>
dense <template #year-overlay-value="{ value }">
ref="leaveEndDateRef" {{ parseInt(value + 543) }}
for="leaveEndDateRef" </template>
hide-bottom-space <template #trigger>
bg-color="white" <q-input
:readonly="isReadOnly" outlined
class="full-width datepicker" dense
:model-value="formDataSick.leaveEndDate != null ? date2Thai(formDataSick.leaveEndDate) : null" ref="leaveEndDateRef"
:label="`${'ลาถึงวันที่'}`" for="leaveEndDateRef"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]" hide-bottom-space
> bg-color="white"
<template v-slot:prepend> :readonly="isReadOnly"
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon> class="full-width datepicker"
</template> :model-value="
</q-input> formDataSick.leaveEndDate != null
</template> ? date2Thai(formDataSick.leaveEndDate)
</datepicker> : null
<q-input "
class="col-12 col-md-3 col-sm-6" :label="`${'ลาถึงวันที่'}`"
dense :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
bg-color="white" >
outlined <template v-slot:prepend>
ref="leaveTotalRef" <q-icon
for="leaveTotalRef" name="event"
v-model="formDataSick.leaveTotal" class="cursor-pointer"
label="จำนวนวันที่ลา" style="color: var(--q-primary)"
readonly >
hide-bottom-space </q-icon>
/> </template>
<q-input </q-input>
class="col-12 col-md-3 col-sm-6" </template>
dense </datepicker>
outlined <q-input
ref="leaveLastRef" class="col-12 col-md-3 col-sm-6"
for="leaveLastRef" dense
v-model="dataStore.leaveLast" bg-color="white"
label="ลาครั้งสุดท้ายเมื่อวันที่" outlined
readonly ref="leaveTotalRef"
hide-bottom-space for="leaveTotalRef"
bg-color="white" v-model="formDataSick.leaveTotal"
/> label="จำนวนวันที่ลา"
</div> readonly
</div> hide-bottom-space
<div class="full-width"> />
<div class="q-col-gutter-sm row"> <q-input
<q-input class="col-12 col-md-3 col-sm-6"
class="col-12 col-md-3 col-sm-6" dense
dense outlined
outlined ref="leaveLastRef"
ref="leaveNumberRef" for="leaveLastRef"
for="leaveNumberRef" v-model="dataStore.leaveLast"
v-model="formDataSick.leaveNumber" label="ลาครั้งสุดท้ายเมื่อวันที่"
mask="(###)-###-####" readonly
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
unmasked-value />
label="หมายเลขโทรศัพท์ที่ติดต่อได้" </div>
:readonly="!edit" </div>
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]" <div class="full-width">
/> <div class="q-col-gutter-sm row">
<q-input
class="col-12 col-md-3 col-sm-6"
dense
outlined
ref="leaveNumberRef"
for="leaveNumberRef"
v-model="formDataSick.leaveNumber"
mask="(###)-###-####"
hide-bottom-space
bg-color="white"
unmasked-value
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
:readonly="!edit"
:rules="[
(val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
]"
/>
<q-input <q-input
class="col-12 col-md-9 col-sm-6" class="col-12 col-md-9 col-sm-6"
dense dense
outlined outlined
ref="leaveAddressRef" ref="leaveAddressRef"
for="leaveAddressRef" for="leaveAddressRef"
v-model="formDataSick.leaveAddress" v-model="formDataSick.leaveAddress"
label="ที่อยู่ที่ติดต่อได้ระหว่างลา" label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
:readonly="!edit" :readonly="!edit"
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]" :rules="[
hide-bottom-space (val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
bg-color="white" ]"
/> hide-bottom-space
</div> bg-color="white"
</div> />
<q-input </div>
type="textarea" </div>
class="col-12 col-md-12 col-sm-12" <q-input
dense type="textarea"
outlined class="col-12 col-md-12 col-sm-12"
ref="leaveDetailRef" dense
for="leaveDetailRef" outlined
v-model="formDataSick.leaveDetail" ref="leaveDetailRef"
label="รายละเอียด" for="leaveDetailRef"
:readonly="!edit" v-model="formDataSick.leaveDetail"
bg-color="white" label="รายละเอียด"
/> :readonly="!edit"
<div class="full-width"> bg-color="white"
<div class="q-col-gutter-sm row"> />
<q-file <div class="full-width">
for="leaveDocumentRef" <div class="q-col-gutter-sm row">
v-model="formDataSick.leaveDocument" <q-file
@added="fileUploadDoc" for="leaveDocumentRef"
dense v-model="formDataSick.leaveDocument"
label="เอกสารประกอบ" dense
outlined label="เอกสารประกอบ"
use-chips outlined
multiple use-chips
bg-color="white" bg-color="white"
class="col-12 q-pl-sm col-12" class="col-12 q-pl-sm col-12"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="attach_file" color="primary" /> <q-icon name="attach_file" color="primary" />
</template> </template>
</q-file> </q-file>
</div> </div>
</div> </div>
<div class="col-12 col-sm-6 row" v-if="!edit"> <div class="col-12 col-sm-6 row" v-if="!edit">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"> <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 class="q-pl-sm text-weight-bold text-dark">
</div> เอกสารเพิ่มเติม
<q-card bordered flat class="full-width"> </div>
<q-list separator> </div>
<q-item v-for="(file, index) in formDataSick.leaveDocument" :key="index" class="q-my-xs"> <q-card bordered flat class="full-width">
<q-item-section> <q-list separator>
<q-item-label class="full-width ellipsis"> <q-item
{{ file.name }} v-for="(file, index) in formDataSick.leaveDocument"
</q-item-label> :key="index"
<q-item-label caption> </q-item-label> class="q-my-xs"
</q-item-section> >
</q-item> <q-item-section>
</q-list> <q-item-label class="full-width ellipsis">
</q-card> {{ file.name }}
</div> </q-item-label>
</div> <q-item-label caption> </q-item-label>
</q-card> </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"> <div class="row col-12 q-pt-md">
<q-space /> <q-space />
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" /> <q-btn
</div> id="onSubmit"
</form> type="submit"
unelevated
dense
class="q-px-md items-center btnBlue"
label="ยื่นใบลา"
/>
</div>
</form>
</template> </template>

15
src/modules/05_leave/components/Forms/03_Birth.vue
View file

@ -142,13 +142,14 @@ async function FetchCheck() {
*/ */
async function saveFormData() { async function saveFormData() {
const formData = new FormData() const formData = new FormData()
if (formDataBirth.leaveDocument.length > 0) { // if (formDataBirth.leaveDocument.length > 0) {
const blob = formDataBirth.leaveDocument.slice(0, formDataBirth.leaveDocument[0].size) // const blob = formDataBirth.leaveDocument.slice(0, formDataBirth.leaveDocument[0].size)
const newFile = new File(blob, nameFile.value, { // const newFile = new File(blob, nameFile.value, {
type: formDataBirth.leaveDocument[0].type, // type: formDataBirth.leaveDocument[0].type,
}) // })
formData.append("leaveDocument", newFile) // formData.append("leaveDocument", newFile)
} // }
formData.append("leaveDocument", formDataBirth.leaveDocument)
formData.append("type", formDataBirth.type) formData.append("type", formDataBirth.type)
formData.append("leaveStartDate", dateToISO(formDataBirth.leaveStartDate)) formData.append("leaveStartDate", dateToISO(formDataBirth.leaveStartDate))
formData.append("leaveEndDate", dateToISO(formDataBirth.leaveEndDate)) formData.append("leaveEndDate", dateToISO(formDataBirth.leaveEndDate))

15
src/modules/05_leave/components/Forms/04_HelpWifeBirthForm.vue
View file

@ -158,13 +158,14 @@ async function FetchCheck() {
*/ */
async function saveFormData() { async function saveFormData() {
const formData = new FormData() const formData = new FormData()
if (formDataHelpWife.leaveDocument.length > 0) { // if (formDataHelpWife.leaveDocument.length > 0) {
const blob = formDataHelpWife.leaveDocument.slice(0, formDataHelpWife.leaveDocument[0].size) // const blob = formDataHelpWife.leaveDocument.slice(0, formDataHelpWife.leaveDocument[0].size)
const newFile = new File(blob, nameFile.value, { // const newFile = new File(blob, nameFile.value, {
type: formDataHelpWife.leaveDocument[0].type, // type: formDataHelpWife.leaveDocument[0].type,
}) // })
formData.append("leaveDocument", newFile) // formData.append("leaveDocument", newFile)
} // }
formData.append("leaveDocument", formDataHelpWife.leaveDocument)
formData.append("type", formDataHelpWife.type) formData.append("type", formDataHelpWife.type)
formData.append("leaveStartDate", dateToISO(formDataHelpWife.leaveStartDate)) formData.append("leaveStartDate", dateToISO(formDataHelpWife.leaveStartDate))
formData.append("leaveEndDate", dateToISO(formDataHelpWife.leaveEndDate)) formData.append("leaveEndDate", dateToISO(formDataHelpWife.leaveEndDate))

15
src/modules/05_leave/components/Forms/05_VacationForm.vue
View file

@ -154,13 +154,14 @@ async function FetchCheck() {
*/ */
async function saveFormData() { async function saveFormData() {
const formData = new FormData() const formData = new FormData()
if (formDataVacation.leaveDocument.length > 0) { // if (formDataVacation.leaveDocument.length > 0) {
const blob = formDataVacation.leaveDocument.slice(0, formDataVacation.leaveDocument[0].size) // const blob = formDataVacation.leaveDocument.slice(0, formDataVacation.leaveDocument[0].size)
const newFile = new File(blob, nameFile.value, { // const newFile = new File(blob, nameFile.value, {
type: formDataVacation.leaveDocument[0].type, // type: formDataVacation.leaveDocument[0].type,
}) // })
formData.append("leaveDocument", newFile) // formData.append("leaveDocument", newFile)
} // }
formData.append("leaveDocument", formDataVacation.leaveDocument)
formData.append("type", formDataVacation.type) formData.append("type", formDataVacation.type)
formData.append("leaveStartDate", dateToISO(formDataVacation.leaveStartDate)) formData.append("leaveStartDate", dateToISO(formDataVacation.leaveStartDate))
formData.append("leaveEndDate", dateToISO(formDataVacation.leaveEndDate)) formData.append("leaveEndDate", dateToISO(formDataVacation.leaveEndDate))

19
src/modules/05_leave/components/Forms/06_OrdinationForm.vue
View file

@ -157,13 +157,14 @@ async function FetchCheck() {
*/ */
async function saveFormData() { async function saveFormData() {
const formData = new FormData() const formData = new FormData()
if (formDataOrdination.leaveDocument.length > 0) { // if (formDataOrdination.leaveDocument.length > 0) {
const blob = formDataOrdination.leaveDocument.slice(0, formDataOrdination.leaveDocument[0].size) // const blob = formDataOrdination.leaveDocument.slice(0, formDataOrdination.leaveDocument[0].size)
const newFile = new File(blob, nameFile.value, { // const newFile = new File(blob, nameFile.value, {
type: formDataOrdination.leaveDocument[0].type, // type: formDataOrdination.leaveDocument[0].type,
}) // })
formData.append("leaveDocument", newFile) // formData.append("leaveDocument", newFile)
} // }
formData.append("leaveDocument", formDataOrdination.leaveDocument)
formData.append("type", formDataOrdination.type) formData.append("type", formDataOrdination.type)
formData.append("leaveStartDate", dateToISO(formDataOrdination.leaveStartDate)) formData.append("leaveStartDate", dateToISO(formDataOrdination.leaveStartDate))
formData.append("leaveEndDate", dateToISO(formDataOrdination.leaveEndDate)) formData.append("leaveEndDate", dateToISO(formDataOrdination.leaveEndDate))
@ -337,7 +338,7 @@ function updateLeaveTotal() {
:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]" :rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon> <q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
@ -374,7 +375,7 @@ function updateLeaveTotal() {
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]" :rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon> <q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>

17
src/modules/05_leave/components/Forms/07_HajjForm.vue
View file

@ -123,13 +123,14 @@ async function FetchCheck() {
*/ */
async function saveFormData() { async function saveFormData() {
const formData = new FormData() const formData = new FormData()
if (formDataHaji.leaveDocument.length > 0) { // if (formDataHaji.leaveDocument.length > 0) {
const blob = formDataHaji.leaveDocument.slice(0, formDataHaji.leaveDocument[0].size) // const blob = formDataHaji.leaveDocument.slice(0, formDataHaji.leaveDocument[0].size)
const newFile = new File(blob, nameFile.value, { // const newFile = new File(blob, nameFile.value, {
type: formDataHaji.leaveDocument[0].type, // type: formDataHaji.leaveDocument[0].type,
}) // })
formData.append("leaveDocument", newFile) // formData.append("leaveDocument", newFile)
} // }
formData.append("leaveDocument", formDataHaji.leaveDocument)
formData.append("type", formDataHaji.type) formData.append("type", formDataHaji.type)
formData.append("leaveStartDate", dateToISO(formDataHaji.leaveStartDate)) formData.append("leaveStartDate", dateToISO(formDataHaji.leaveStartDate))
formData.append("leaveEndDate", dateToISO(formDataHaji.leaveEndDate)) formData.append("leaveEndDate", dateToISO(formDataHaji.leaveEndDate))
@ -299,7 +300,7 @@ function updateLeaveTotal() {
:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]" :rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon> <q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>

15
src/modules/05_leave/components/Forms/08_MilitaryForm.vue
View file

@ -135,13 +135,14 @@ async function FetchCheck() {
*/ */
async function saveFormData() { async function saveFormData() {
const formData = new FormData() const formData = new FormData()
if (formDataMilitary.leaveDocument.length > 0) { // if (formDataMilitary.leaveDocument.length > 0) {
const blob = formDataMilitary.leaveDocument.slice(0, formDataMilitary.leaveDocument[0].size) // const blob = formDataMilitary.leaveDocument.slice(0, formDataMilitary.leaveDocument[0].size)
const newFile = new File(blob, nameFile.value, { // const newFile = new File(blob, nameFile.value, {
type: formDataMilitary.leaveDocument[0].type, // type: formDataMilitary.leaveDocument[0].type,
}) // })
formData.append("leaveDocument", newFile) // formData.append("leaveDocument", newFile)
} // }
formData.append("leaveDocument", formDataMilitary.leaveDocument)
formData.append("type", formDataMilitary.type) formData.append("type", formDataMilitary.type)
formData.append("leaveStartDate", dateToISO(formDataMilitary.leaveStartDate)) formData.append("leaveStartDate", dateToISO(formDataMilitary.leaveStartDate))
formData.append("leaveEndDate", dateToISO(formDataMilitary.leaveEndDate)) formData.append("leaveEndDate", dateToISO(formDataMilitary.leaveEndDate))

19
src/modules/05_leave/components/Forms/09_StudyForm.vue
View file

@ -145,13 +145,14 @@ async function FetchCheck() {
} }
async function saveFormData() { async function saveFormData() {
const formData = new FormData() const formData = new FormData()
if (formDataStudy.leaveDocument.length > 0) { // if (formDataStudy.leaveDocument.length > 0) {
const blob = formDataStudy.leaveDocument.slice(0, formDataStudy.leaveDocument[0].size) // const blob = formDataStudy.leaveDocument.slice(0, formDataStudy.leaveDocument[0].size)
const newFile = new File(blob, nameFile.value, { // const newFile = new File(blob, nameFile.value, {
type: formDataStudy.leaveDocument[0].type, // type: formDataStudy.leaveDocument[0].type,
}) // })
formData.append("leaveDocument", newFile) // formData.append("leaveDocument", newFile)
} // }
formData.append("leaveDocument", formDataStudy.leaveDocument)
formData.append("type", formDataStudy.type) // formData.append("type", formDataStudy.type) //
formData.append("leaveStartDate", dateToISO(formDataStudy.leaveStartDate)) // formData.append("leaveStartDate", dateToISO(formDataStudy.leaveStartDate)) //
formData.append("leaveEndDate", dateToISO(formDataStudy.leaveEndDate)) // formData.append("leaveEndDate", dateToISO(formDataStudy.leaveEndDate)) //
@ -337,7 +338,7 @@ const formattedleaveSalary = computed(() => {
:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]" :rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon> <q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
@ -374,7 +375,7 @@ const formattedleaveSalary = computed(() => {
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]" :rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon> <q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>

15
src/modules/05_leave/components/Forms/10_TrainForm.vue
View file

@ -144,13 +144,14 @@ async function FetchCheck() {
*/ */
async function saveFormData() { async function saveFormData() {
const formData = new FormData() const formData = new FormData()
if (formDataTrain.leaveDocument.length > 0) { // if (formDataTrain.leaveDocument.length > 0) {
const blob = formDataTrain.leaveDocument.slice(0, formDataTrain.leaveDocument[0].size) // const blob = formDataTrain.leaveDocument.slice(0, formDataTrain.leaveDocument[0].size)
const newFile = new File(blob, nameFile.value, { // const newFile = new File(blob, nameFile.value, {
type: formDataTrain.leaveDocument[0].type, // type: formDataTrain.leaveDocument[0].type,
}) // })
formData.append("leaveDocument", newFile) // formData.append("leaveDocument", newFile)
} // // } //
formData.append("leaveDocument", formDataTrain.leaveDocument)
formData.append("type", formDataTrain.type) // formData.append("type", formDataTrain.type) //
formData.append("leaveStartDate", dateToISO(formDataTrain.leaveStartDate)) // formData.append("leaveStartDate", dateToISO(formDataTrain.leaveStartDate)) //
formData.append("leaveEndDate", dateToISO(formDataTrain.leaveEndDate)) // formData.append("leaveEndDate", dateToISO(formDataTrain.leaveEndDate)) //

34
src/modules/05_leave/components/Forms/11_WorkInternationalForm.vue
View file

@ -138,22 +138,24 @@ async function FetchCheck() {
*/ */
async function saveFormData() { async function saveFormData() {
const formData = new FormData() const formData = new FormData()
// // //
if (formDataWorkInternational.leaveDocument.length > 0) { // if (formDataWorkInternational.leaveDocument.length > 0) {
const blob = formDataWorkInternational.leaveDocument.slice(0, formDataWorkInternational.leaveDocument[0].size) // const blob = formDataWorkInternational.leaveDocument.slice(0, formDataWorkInternational.leaveDocument[0].size)
const newFile = new File(blob, nameFile.value, { // const newFile = new File(blob, nameFile.value, {
type: formDataWorkInternational.leaveDocument[0].type, // type: formDataWorkInternational.leaveDocument[0].type,
}) // })
formData.append("leaveDocument", newFile) // formData.append("leaveDocument", newFile)
} // }
// // //
if (formDataWorkInternational.leaveDraftDocument.length > 0) { // if (formDataWorkInternational.leaveDraftDocument.length > 0) {
const blobDrafe = formDataWorkInternational.leaveDraftDocument.slice(0, formDataWorkInternational.leaveDraftDocument[0].size) // const blobDrafe = formDataWorkInternational.leaveDraftDocument.slice(0, formDataWorkInternational.leaveDraftDocument[0].size)
const newFileDraft = new File(blobDrafe, nameFileDraft.value, { // const newFileDraft = new File(blobDrafe, nameFileDraft.value, {
type: formDataWorkInternational.leaveDraftDocument[0].type, // type: formDataWorkInternational.leaveDraftDocument[0].type,
}) // })
formData.append("leaveDraftDocument", newFileDraft) // // formData.append("leaveDraftDocument", newFileDraft) //
} // }
formData.append("leaveDocument", formDataWorkInternational.leaveDocument)
formData.append("leaveDraftDocument", formDataWorkInternational.leaveDraftDocument)
formData.append("type", formDataWorkInternational.type) // formData.append("type", formDataWorkInternational.type) //
formData.append("leaveStartDate", dateToISO(formDataWorkInternational.leaveStartDate)) // formData.append("leaveStartDate", dateToISO(formDataWorkInternational.leaveStartDate)) //
formData.append("leaveEndDate", dateToISO(formDataWorkInternational.leaveEndDate)) // formData.append("leaveEndDate", dateToISO(formDataWorkInternational.leaveEndDate)) //

19
src/modules/05_leave/components/Forms/12_FollowSpouseForm.vue
View file

@ -170,13 +170,14 @@ async function FetchCheck() {
*/ */
async function saveFormData() { async function saveFormData() {
const formData = new FormData() const formData = new FormData()
if (formDataFollowSpouse.leaveDocument.length > 0) { // if (formDataFollowSpouse.leaveDocument.length > 0) {
const blob = formDataFollowSpouse.leaveDocument.slice(0, formDataFollowSpouse.leaveDocument[0].size) // const blob = formDataFollowSpouse.leaveDocument.slice(0, formDataFollowSpouse.leaveDocument[0].size)
const newFile = new File(blob, nameFile.value, { // const newFile = new File(blob, nameFile.value, {
type: formDataFollowSpouse.leaveDocument[0].type, // type: formDataFollowSpouse.leaveDocument[0].type,
}) // })
formData.append("leaveDocument", newFile) // formData.append("leaveDocument", newFile)
} // // } //
formData.append("leaveDocument", formDataFollowSpouse.leaveDocument)
formData.append("type", formDataFollowSpouse.type) // formData.append("type", formDataFollowSpouse.type) //
formData.append("leaveStartDate", dateToISO(formDataFollowSpouse.leaveStartDate)) // formData.append("leaveStartDate", dateToISO(formDataFollowSpouse.leaveStartDate)) //
formData.append("leaveEndDate", dateToISO(formDataFollowSpouse.leaveEndDate)) // formData.append("leaveEndDate", dateToISO(formDataFollowSpouse.leaveEndDate)) //
@ -450,7 +451,7 @@ function updateLeaveTotal() {
:rules="[val => !!val || `${'กรุณาเลือกตั้งแต่วันที่'}`]" :rules="[val => !!val || `${'กรุณาเลือกตั้งแต่วันที่'}`]"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon> <q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
@ -488,7 +489,7 @@ function updateLeaveTotal() {
:rules="[val => !!val || `${'กรุณาเลือกถึงวันที่'}`]" :rules="[val => !!val || `${'กรุณาเลือกถึงวันที่'}`]"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon> <q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>

30
src/modules/05_leave/components/Forms/13_RehabilitationForm.vue
View file

@ -120,21 +120,23 @@ async function FetchCheck() {
*/ */
async function saveFormData() { async function saveFormData() {
const formData = new FormData() const formData = new FormData()
if (formDataRehabilitation.leaveDraftDocument.length > 0) { // if (formDataRehabilitation.leaveDraftDocument.length > 0) {
const blobDrafe = formDataRehabilitation.leaveDraftDocument.slice(0, formDataRehabilitation.leaveDraftDocument[0].size) // const blobDrafe = formDataRehabilitation.leaveDraftDocument.slice(0, formDataRehabilitation.leaveDraftDocument[0].size)
const newFileDraft = new File(blobDrafe, nameFileDraft.value, { // const newFileDraft = new File(blobDrafe, nameFileDraft.value, {
type: formDataRehabilitation.leaveDraftDocument[0].type, // type: formDataRehabilitation.leaveDraftDocument[0].type,
}) // })
formData.append("leaveDraftDocument", newFileDraft) // // formData.append("leaveDraftDocument", newFileDraft) //
} // }
if (formDataRehabilitation.leaveDocument.length > 0) { // if (formDataRehabilitation.leaveDocument.length > 0) {
const blob = formDataRehabilitation.leaveDocument.slice(0, formDataRehabilitation.leaveDocument[0].size) // const blob = formDataRehabilitation.leaveDocument.slice(0, formDataRehabilitation.leaveDocument[0].size)
const newFile = new File(blob, nameFile.value, { // const newFile = new File(blob, nameFile.value, {
type: formDataRehabilitation.leaveDocument[0].type, // type: formDataRehabilitation.leaveDocument[0].type,
}) // })
formData.append("leaveDocument", newFile) // formData.append("leaveDocument", newFile)
} // // } //
formData.append("leaveDraftDocument", formDataRehabilitation.leaveDraftDocument)
formData.append("leaveDocument", formDataRehabilitation.leaveDocument)
formData.append("type", formDataRehabilitation.type) // formData.append("type", formDataRehabilitation.type) //
formData.append("leaveStartDate", dateToISO(formDataRehabilitation.leaveStartDate)) // formData.append("leaveStartDate", dateToISO(formDataRehabilitation.leaveStartDate)) //
formData.append("leaveEndDate", dateToISO(formDataRehabilitation.leaveEndDate)) // formData.append("leaveEndDate", dateToISO(formDataRehabilitation.leaveEndDate)) //

2
src/modules/05_leave/components/Forms/Form.vue
View file

@ -65,7 +65,7 @@ onMounted(async () => {
:rules="[val => !!val || `${'กรุณาเลือกวันที่ยื่นใบลา'}`]" :rules="[val => !!val || `${'กรุณาเลือกวันที่ยื่นใบลา'}`]"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon> <q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>