halfDay ใส่ใน formData

This commit is contained in:
AnandaTon 2023-11-09 17:46:11 +07:00
parent fdec45119b
commit b9e761a526
3 changed files with 254 additions and 310 deletions

View file

@ -1,347 +1,289 @@
<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import type {
FormData,
FormRef,
} from "@/modules/05_leave/interface/request/SickForm";
import { useCounterMixin } from "@/stores/mixin";
import { ref, reactive, watch } from "vue"
import type { FormData, FormRef } from "@/modules/05_leave/interface/request/SickForm"
import { useCounterMixin } from "@/stores/mixin"
const mixin = useCounterMixin();
const { date2Thai } = mixin;
const edit = ref<boolean>(true);
const halfDay = ref<string>("day");
const mixin = useCounterMixin()
const { date2Thai } = 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<FormData>({
leaveNo: "",
startLeaveDate: null,
endLeaveDate: null,
contractTel: "",
leaveTotal: "",
leaveContactTel: "",
leaveContactLocation: "",
leaveDetail: "",
file: [],
});
leaveNo: "",
startLeaveDate: null,
endLeaveDate: null,
halfDay: "day",
contractTel: "",
leaveTotal: "",
leaveContactTel: "",
leaveContactLocation: "",
leaveDetail: "",
file: [],
})
/** ตัวแปร 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 leaveNoRef = ref<object | null>(null)
const startLeaveDateRef = ref<object | null>(null)
const endLeaveDateRef = ref<object | null>(null)
const halfDayRef = 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)
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const FormRef: FormRef = {
leaveNo: leaveNoRef,
startLeaveDate: startLeaveDateRef,
endLeaveDate: endLeaveDateRef,
contractTel: contractTelRef,
leaveTotal: leaveTotalRef,
leaveContactTel: leaveContactTelRef,
leaveContactLocation: leaveContactLocationRef,
leaveDetail: leaveDetailRef,
file: fileRef,
};
leaveNo: leaveNoRef,
startLeaveDate: startLeaveDateRef,
endLeaveDate: endLeaveDateRef,
halfDay: halfDayRef,
contractTel: contractTelRef,
leaveTotal: leaveTotalRef,
leaveContactTel: leaveContactTelRef,
leaveContactLocation: leaveContactLocationRef,
leaveDetail: leaveDetailRef,
file: fileRef,
}
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ 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.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
})
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
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()
}
}
</script>
<!-- ฟอรมลาปวย ลาคลอดบตร และลากจสวนต -->
<template>
<form @submit.prevent.stop="onValidate">
<div>
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกขอม</div>
<div class="col-12 row q-col-gutter-md q-pa-md">
<div class="col-xs-12 col-sm-12">
<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="เขียนที่"
:readonly="!edit"
:rules="[(val) => !!val || `${'เขียนที่'}`]"
/>
<form @submit.prevent.stop="onValidate">
<div>
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกขอม</div>
<div class="col-12 row q-col-gutter-md q-pa-md">
<div class="col-xs-12 col-sm-12">
<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="เขียนที่"
:readonly="!edit"
:rules="[val => !!val || `${'เขียนที่'}`]"
/>
<div class="col-md-4 col-sm-12">
<q-radio v-model="halfDay" val="day" label="ลาทั้งวัน" />
<q-radio
v-model="halfDay"
val="half_day_morning"
label="ลาครึ่งวันเช้า"
/>
<q-radio
v-model="halfDay"
val="half_day_afternoon"
label="ลาครึ่งวันบ่าย"
/>
</div>
<div class="col-md-4 col-sm-12">
<q-radio v-model="formData.halfDay" val="day" label="ลาทั้งวัน" />
<q-radio v-model="formData.halfDay" val="half_day_morning" label="ลาครึ่งวันเช้า" />
<q-radio v-model="formData.halfDay" val="half_day_afternoon" label="ลาครึ่งวันบ่าย" />
</div>
<datepicker
class="col-md-3 col-sm-12"
menu-class-name="modalfix"
v-model="formData.startLeaveDate"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
:readonly="!edit"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
ref="startLeaveDateRef"
for="startLeaveDateRef"
hide-bottom-space
: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-md-3 col-sm-12"
menu-class-name="modalfix"
v-model="formData.startLeaveDate"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
:readonly="!edit"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
ref="startLeaveDateRef"
for="startLeaveDateRef"
hide-bottom-space
: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-md-3 col-sm-12"
menu-class-name="modalfix"
v-model="formData.endLeaveDate"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
:readonly="!edit"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
ref="endLeaveDateRef"
for="endLeaveDateRef"
hide-bottom-space
:readonly="!edit"
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-md-2 col-sm-12"
dense
outlined
ref="leaveTotalRef"
for="leaveTotalRef"
type="number"
v-model="formData.leaveTotal"
label="จำนวนวันที่ลา"
readonly
:rules="[(val) => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
/>
<datepicker
class="col-md-3 col-sm-12"
menu-class-name="modalfix"
v-model="formData.endLeaveDate"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
:readonly="!edit"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
ref="endLeaveDateRef"
for="endLeaveDateRef"
hide-bottom-space
:readonly="!edit"
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-md-2 col-sm-12"
dense
outlined
ref="leaveTotalRef"
for="leaveTotalRef"
type="number"
v-model="formData.leaveTotal"
label="จำนวนวันที่ลา"
readonly
:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
/>
<q-input
class="col-3"
dense
outlined
ref="leaveContactTelRef"
for="leaveContactTelRef"
v-model="formData.leaveContactTel"
mask="(###)-###-####"
unmasked-value
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
:readonly="!edit"
:rules="[
(val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
]"
/>
<q-input
class="col-3"
dense
outlined
ref="leaveContactTelRef"
for="leaveContactTelRef"
v-model="formData.leaveContactTel"
mask="(###)-###-####"
unmasked-value
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
:readonly="!edit"
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
/>
<q-input
class="col-md-9 col-sm-12"
dense
outlined
ref="leaveContactLocationRef"
for="leaveContactLocationRef"
v-model="formData.leaveContactLocation"
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
:readonly="!edit"
:rules="[
(val) =>
!!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
]"
/>
<q-input
class="col-md-9 col-sm-12"
dense
outlined
ref="leaveContactLocationRef"
for="leaveContactLocationRef"
v-model="formData.leaveContactLocation"
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
:readonly="!edit"
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
/>
<q-input
type="textarea"
class="col-md-12 col-sm-12"
dense
outlined
ref="leaveDetailRef"
for="leaveDetailRef"
v-model="formData.leaveDetail"
label="รายละเอียด"
:readonly="!edit"
/>
<q-input
type="textarea"
class="col-md-12 col-sm-12"
dense
outlined
ref="leaveDetailRef"
for="leaveDetailRef"
v-model="formData.leaveDetail"
label="รายละเอียด"
:readonly="!edit"
/>
<q-file
v-model="formData.file"
@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>
</q-file>
<q-file v-model="formData.file" @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>
</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>
</div>
</div>
<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>
</div>
</div>
<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>
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก" />
</div>
</form>
</template>

View file

@ -22,7 +22,7 @@ const formData = reactive<FormData>({
startLeaveDate: null,
endLeaveDate: null,
leaveTotal: "", //
salary: 0, //
salary: 25000, //
spouseName: "", //
spousePosition: "", //
spouseLevel: "", //