From b3523dfd4f7f2bde20e471262d290ec3ffcba3fb Mon Sep 17 00:00:00 2001 From: waruneeta Date: Thu, 23 Nov 2023 10:46:59 +0700 Subject: [PATCH] =?UTF-8?q?layout=20form=20=E0=B8=A5=E0=B8=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../05_leave/componenst/Forms/01_SickForm.vue | 2 +- .../05_leave/componenst/Forms/03_Birth.vue | 595 ++++++++++-------- 2 files changed, 326 insertions(+), 271 deletions(-) diff --git a/src/modules/05_leave/componenst/Forms/01_SickForm.vue b/src/modules/05_leave/componenst/Forms/01_SickForm.vue index 4969346..b7c0dd4 100644 --- a/src/modules/05_leave/componenst/Forms/01_SickForm.vue +++ b/src/modules/05_leave/componenst/Forms/01_SickForm.vue @@ -232,7 +232,7 @@ console.log(isReadOnly.value) -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(true) +const mixin = useCounterMixin(); +const { date2Thai, calculateDurationYmd } = mixin; +const edit = ref(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({ - leaveNo: "", - startLeaveDate: null, - endLeaveDate: null, - contractTel: "", - leaveTotal: "", - leaveLast: "", - leaveContactTel: "", - leaveContactLocation: "", - leaveDetail: "", - file: [], -}) + leaveNo: "", + startLeaveDate: null, + endLeaveDate: null, + contractTel: "", + leaveTotal: "", + leaveLast: "", + leaveContactTel: "", + leaveContactLocation: "", + leaveDetail: "", + file: [], +}); /** ตัวแปร ref สำหรับแสดง validate */ -const leaveNoRef = ref(null) -const startLeaveDateRef = ref(null) -const endLeaveDateRef = ref(null) -const contractTelRef = ref(null) -const leaveTotalRef = ref(null) -const leaveContactTelRef = ref(null) -const leaveContactLocationRef = ref(null) -const leaveDetailRef = ref(null) -const fileRef = ref(null) +const leaveNoRef = ref(null); +const startLeaveDateRef = ref(null); +const endLeaveDateRef = ref(null); +const contractTelRef = ref(null); +const leaveTotalRef = ref(null); +const leaveContactTelRef = ref(null); +const leaveContactLocationRef = ref(null); +const leaveDetailRef = ref(null); +const fileRef = ref(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, + 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([]) +const fileDocDataUpload = ref([]); 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(); + } }