From e1058f5d81d9d7301b53d2c07e103f2d747c336c Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Tue, 14 Nov 2023 15:24:04 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84=E0=B8=82?=
 =?UTF-8?q?=20ui=20form=20=E0=B8=81=E0=B8=B2=E0=B8=A3=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 |   8 +-
 .../05_leave/componenst/Forms/03_ฺBirth.vue    | 278 ++++++++++++++++++
 .../componenst/Forms/05_VacationForm.vue      |  52 ++--
 .../05_leave/interface/request/BirthForm.ts   |  27 ++
 .../interface/request/VacationForm.ts         |   2 +
 src/modules/05_leave/views/AddPage.vue        |   4 +-
 6 files changed, 342 insertions(+), 29 deletions(-)
 create mode 100644 src/modules/05_leave/componenst/Forms/03_ฺBirth.vue
 create mode 100644 src/modules/05_leave/interface/request/BirthForm.ts

diff --git a/src/modules/05_leave/componenst/Forms/01_SickForm.vue b/src/modules/05_leave/componenst/Forms/01_SickForm.vue
index 19a94f6..3781d1d 100644
--- a/src/modules/05_leave/componenst/Forms/01_SickForm.vue
+++ b/src/modules/05_leave/componenst/Forms/01_SickForm.vue
@@ -98,7 +98,7 @@ function onValidate() {
 }
 </script>
 
-<!-- ฟอร์มลาป่วย ลาคลอดบุตร และลากิจส่วนตัว -->
+<!-- ฟอร์มลาป่วย และลากิจส่วนตัว -->
 <template>
 	<div style="display: flex; align-items: center">
 		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
@@ -120,9 +120,9 @@ function onValidate() {
 				/>
 
 				<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="ลาครึ่งวันบ่าย" />
+					<q-radio v-model="formData.halfDay" val="day" label="ลาทั้งวัน" checked-icon="task_alt" />
+					<q-radio v-model="formData.halfDay" val="half_day_morning" label="ลาครึ่งวันเช้า" checked-icon="task_alt" />
+					<q-radio v-model="formData.halfDay" val="half_day_afternoon" label="ลาครึ่งวันบ่าย" checked-icon="task_alt" />
 				</div>
 
 				<datepicker
diff --git a/src/modules/05_leave/componenst/Forms/03_ฺBirth.vue b/src/modules/05_leave/componenst/Forms/03_ฺBirth.vue
new file mode 100644
index 0000000..d7be057
--- /dev/null
+++ b/src/modules/05_leave/componenst/Forms/03_ฺBirth.vue
@@ -0,0 +1,278 @@
+<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"
+
+const mixin = useCounterMixin()
+const { date2Thai } = mixin
+const edit = ref<boolean>(true)
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+	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: [],
+})
+
+/** ตัวแปร 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)
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const FormRef: FormRef = {
+	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
+})
+
+/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const fileDocDataUpload = ref<File[]>([])
+async function fileUploadDoc(files: any) {
+	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()
+	}
+}
+</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="เขียนที่"
+					:readonly="!edit"
+					:rules="[val => !!val || `${'เขียนที่'}`]"
+				/>
+
+				<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 || `${'กรุณากรอกจำนวนวัน'}`]"
+				/>
+
+				<q-input
+					class="col-4"
+					dense
+					outlined
+					ref="leaveContactTelRef"
+					for="leaveContactTelRef"
+					v-model="formData.leaveContactTel"
+					mask="(###)-###-####"
+					unmasked-value
+					label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+					:readonly="!edit"
+					:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
+				/>
+
+				<q-input
+					class="col-md-12 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-file
+					ref="fileRef"
+					for="fileRef"
+					v-model="formData.file"
+					@added="fileUploadDoc"
+					dense
+					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>
+
+		<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>
diff --git a/src/modules/05_leave/componenst/Forms/05_VacationForm.vue b/src/modules/05_leave/componenst/Forms/05_VacationForm.vue
index c7ba543..94562b4 100644
--- a/src/modules/05_leave/componenst/Forms/05_VacationForm.vue
+++ b/src/modules/05_leave/componenst/Forms/05_VacationForm.vue
@@ -22,6 +22,7 @@ const props = defineProps({
 /** ข้อมูล v-model ของฟอร์ม */
 const formData = reactive<FormData>({
 	leaveNo: "",
+	halfDay: "day",
 	lastYearVacation: "",
 	currentVacation: "",
 	startLeaveDate: null,
@@ -38,6 +39,7 @@ const formData = reactive<FormData>({
 const leaveNoRef = ref<object | null>(null)
 const lastYearVacationRef = ref<object | null>(null)
 const currentVacationRef = ref<object | null>(null)
+const halfDayRef = ref<object | null>(null)
 const startLeaveDateRef = ref<object | null>(null)
 const endLeaveDateRef = ref<object | null>(null)
 const contractTelRef = ref<object | null>(null)
@@ -50,6 +52,7 @@ const fileRef = ref<object | null>(null)
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const FormRef: FormRef = {
 	leaveNo: leaveNoRef,
+	halfDay: halfDayRef,
 	lastYearVacation: lastYearVacationRef,
 	currentVacation: currentVacationRef,
 	startLeaveDate: startLeaveDateRef,
@@ -138,31 +141,32 @@ function onValidate() {
 					:readonly="!edit"
 					:rules="[val => !!val || `${'เขียนที่'}`]"
 				/>
+				<div class="col-md-4 col-sm-12">
+					<q-radio v-model="formData.halfDay" val="day" label="ลาทั้งวัน" checked-icon="task_alt" />
+					<q-radio v-model="formData.halfDay" val="half_day_morning" label="ลาครึ่งวันเช้า" checked-icon="task_alt" />
+					<q-radio v-model="formData.halfDay" val="half_day_afternoon" label="ลาครึ่งวันบ่าย" checked-icon="task_alt" />
+				</div>
+				<q-input
+					class="col-md-4 col-sm-12"
+					ref="lastYearVacationRef"
+					for="lastYearVacationRef"
+					dense
+					readonly
+					outlined
+					v-model="formData.lastYearVacation"
+					label="จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา"
+				/>
 
-				<div class="col-md-6 col-sm-12">
-					<q-input
-						class="col-12 col-sm-12"
-						ref="lastYearVacationRef"
-						for="lastYearVacationRef"
-						dense
-						readonly
-						outlined
-						v-model="formData.lastYearVacation"
-						label="จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา"
-					/>
-				</div>
-				<div class="col-md-6 col-sm-12">
-					<q-input
-						class="col-12 col-sm-12"
-						ref="currentVacationRef"
-						for="currentVacationRef"
-						dense
-						readonly
-						outlined
-						v-model="formData.currentVacation"
-						label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน"
-					/>
-				</div>
+				<q-input
+					class="col-md-4 col-sm-12"
+					ref="currentVacationRef"
+					for="currentVacationRef"
+					dense
+					readonly
+					outlined
+					v-model="formData.currentVacation"
+					label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน"
+				/>
 
 				<datepicker
 					class="col-md-3 col-sm-12"
diff --git a/src/modules/05_leave/interface/request/BirthForm.ts b/src/modules/05_leave/interface/request/BirthForm.ts
new file mode 100644
index 0000000..56b9b51
--- /dev/null
+++ b/src/modules/05_leave/interface/request/BirthForm.ts
@@ -0,0 +1,27 @@
+interface FormData {
+	leaveNo: string //เขียนที่***
+	startLeaveDate: Date | null //*วัน เดือน ปีเริ่มต้นลา
+	endLeaveDate: Date | null //*วัน เดือน ปีสิ้นสุดลา
+	leaveTotal: string //จำนวนวันลา
+	contractTel: string //หมายเลขโทรศัพท์ที่ติดต่อได้
+	leaveContactTel: string //หมายเลขที่ติดต่อขณะลา
+	leaveDetail: string //รายละเอียดการลา
+	leaveContactLocation: string //สถานที่ติดต่อขณะลา
+	file: File[] | null //เอกสารปะกอบ
+	[key: string]: any
+}
+
+interface FormRef {
+	leaveNo: object | null //เขียนที่***
+	startLeaveDate: object | null //*วัน เดือน ปีเริ่มต้นลา
+	endLeaveDate: object | null //*วัน เดือน ปีสิ้นสุดลา
+	leaveTotal: object | null //จำนวนวันลา
+	contractTel: object | null //หมายเลขโทรศัพท์ที่ติดต่อได้
+	leaveContactTel: object | null //หมายเลขที่ติดต่อขณะลา
+	leaveDetail: object | null //รายละเอียดการลา
+	leaveContactLocation: object | null //สถานที่ติดต่อขณะลา
+	file: object | null //เอกสารปะกอบ
+	[key: string]: any
+}
+
+export type { FormData, FormRef }
diff --git a/src/modules/05_leave/interface/request/VacationForm.ts b/src/modules/05_leave/interface/request/VacationForm.ts
index 119d4ca..e114af5 100644
--- a/src/modules/05_leave/interface/request/VacationForm.ts
+++ b/src/modules/05_leave/interface/request/VacationForm.ts
@@ -1,5 +1,6 @@
 interface FormData {
 	leaveNo: string //เขียนที่***
+	halfDay: string
 	lastYearVacation: string //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา
 	currentVacation: string //จำนวนวันลาพักผ่อนประจำปีปัจจุบัน
 	startLeaveDate: Date | null //*วัน เดือน ปีเริ่มต้นลา
@@ -15,6 +16,7 @@ interface FormData {
 
 interface FormRef {
 	leaveNo: object | null //เขียนที่***
+	halfDay: object | null
 	startLeaveDate: object | null //*วัน เดือน ปีเริ่มต้นลา
 	lastYearVacation: object | null //ชื่อภรรยา
 	currentVacation: object | null //วันที่คลอด
diff --git a/src/modules/05_leave/views/AddPage.vue b/src/modules/05_leave/views/AddPage.vue
index ad9753f..dc9e850 100644
--- a/src/modules/05_leave/views/AddPage.vue
+++ b/src/modules/05_leave/views/AddPage.vue
@@ -5,6 +5,7 @@ import { useRouter, useRoute } from "vue-router"
 
 import Form from "@/modules/05_leave/componenst/Forms/Form.vue"
 import Form3 from "@/modules/05_leave/componenst/Forms/01_SickForm.vue"
+import FormBirth from "@/modules/05_leave/componenst/Forms/03_ฺBirth.vue"
 import Form4 from "@/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue"
 import Form5 from "@/modules/05_leave/componenst/Forms/05_VacationForm.vue"
 import Form6 from "@/modules/05_leave/componenst/Forms/06_OrdinationForm.vue"
@@ -121,7 +122,8 @@ const onSubmit = async () => {
 							</div>
 						</div>
 						<div v-if="model" class="col-12">
-							<Form3 :on-submit="onSubmit" v-if="model === '0' || model === '1' || model === '2'" />
+							<Form3 :on-submit="onSubmit" v-if="model === '0' || model === '1'" />
+							<FormBirth :on-submit="onSubmit" v-if="model === '2'" />
 							<Form4 :on-submit="onSubmit" v-if="model === '3'" />
 							<Form5 :on-submit="onSubmit" v-if="model === '4'" />
 							<Form6 :on-submit="onSubmit" v-if="model === '5' && modelSpecific === '0'" />