แก้ไข ui ฟอร์มการลา

-จัดโค้ด
-เพิ่ม function

src/modules/05_leave/componenst/Forms/01_SickForm.vue

@@ -29,6 +29,7 @@ const formData = reactive<any>({
 	halfDay: "day",
 	contractTel: "",
 	leaveTotal: "",
+	leaveLast: "",
 	leaveContactTel: "",
 	leaveContactLocation: "",
 	leaveDetail: "",
@@ -42,6 +43,7 @@ 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 leaveLastRef = ref<object | null>(null)
 const leaveContactTelRef = ref<object | null>(null)
 const leaveContactLocationRef = ref<object | null>(null)
 const leaveDetailRef = ref<object | null>(null)
@@ -82,6 +84,17 @@ async function fileUploadDoc(files: any) {
 	})
 }
 
+/**
+ * function รีเซทค่า startLeaveDate เเละ endLeaveDate
+ */
+function resetDate() {
+	if (formData.halfDay === "half_day_morning" || formData.halfDay === "half_day_afternoon") {
+		formData.startLeaveDate = null
+		formData.endLeaveDate = null
+	}
+	console.log("testnull")
+}
+
 /** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
 function onValidate() {
 	const hasError = []
@@ -103,6 +116,9 @@ 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.leaveTotal = "0.5 วัน "
+	} else {
+		formData.leaveTotal = null
 	}
 	return conditionHalfDay
 })
@@ -133,8 +149,8 @@ console.log(isReadOnly.value)
 
 				<div class="col-12 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" />
+					<q-radio v-model="formData.halfDay" val="half_day_morning" label="ลาครึ่งวันเช้า" checked-icon="task_alt" @update:model-value="resetDate" />
+					<q-radio v-model="formData.halfDay" val="half_day_afternoon" label="ลาครึ่งวันบ่าย" checked-icon="task_alt" @update:model-value="resetDate" />
 				</div>
 				<div class="full-width">
 					<div class="q-col-gutter-sm row">
@@ -212,16 +228,28 @@ console.log(isReadOnly.value)
 								</q-input>
 							</template>
 						</datepicker>
-						<div class="col-12 col-md-4 col-sm-6">
-							<p v-if="formData.startLeaveDate && formData.endLeaveDate" class="text-weight-bold text-subtitle1 q-mb-none" style="padding-top: 7px; color: #26a69a">
-								เป็นเวลา
-								{{
-									formData.halfDay === "half_day_morning" || formData.halfDay === "half_day_afternoon"
-										? "0.5 วัน"
-										: calculateDurationYmd(formData.startLeaveDate, formData.endLeaveDate)
-								}}
-							</p>
-						</div>
+						<q-input
+							class="col-12 col-md-2 col-sm-6"
+							dense
+							outlined
+							ref="leaveTotalRef"
+							for="leaveTotalRef"
+							v-model="formData.leaveTotal"
+							label="จำนวนวันที่ลา"
+							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
+						/>
 					</div>
 				</div>
 				<div class="full-width">

src/modules/05_leave/componenst/Forms/03_Birth.vue

@@ -26,6 +26,7 @@ const formData = reactive<any>({
 	endLeaveDate: null,
 	contractTel: "",
 	leaveTotal: "",
+	leaveLast: "",
 	leaveContactTel: "",
 	leaveContactLocation: "",
 	leaveDetail: "",
@@ -193,12 +194,18 @@ function onValidate() {
 						</q-input>
 					</template>
 				</datepicker>
-				<div class="col-12 col-md-4 col-sm-6">
-					<p v-if="formData.startLeaveDate && formData.endLeaveDate" class="text-weight-bold text-subtitle1 q-mb-none" style="padding-top: 7px; color: #26a69a">
-						เป็นเวลา
-						{{ calculateDurationYmd(formData.startLeaveDate, formData.endLeaveDate) }}
-					</p>
-				</div>
+				<q-input class="col-12 col-md-2 col-sm-6" dense outlined ref="leaveTotalRef" for="leaveTotalRef" v-model="formData.leaveTotal" label="จำนวนวันที่ลา" 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
+				/>
 				<div class="full-width">
 					<div class="q-col-gutter-sm row">
 						<q-input

src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue

@@ -215,12 +215,7 @@ function onValidate() {
 						</q-input>
 					</template>
 				</datepicker>
-				<div class="col-12 col-md-4 col-sm-6">
-					<p v-if="formData.startLeaveDate && formData.endLeaveDate" class="text-weight-bold text-subtitle1 q-mb-none" style="padding-top: 7px; color: #26a69a">
-						เป็นเวลา
-						{{ calculateDurationYmd(formData.startLeaveDate, formData.endLeaveDate) }}
-					</p>
-				</div>
+				<q-input class="col-12 col-md-2 col-sm-6" dense outlined ref="leaveTotalRef" for="leaveTotalRef" v-model="formData.leaveTotal" label="จำนวนวันที่ลา" readonly hide-bottom-space />
 				<div class="col-12 col-md-4 col-sm-12">
 					<q-input
 						class="col-12 col-sm-12"

src/modules/05_leave/componenst/Forms/05_VacationForm.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, watch } from "vue"
+import { ref, reactive, watch, computed } from "vue"
 import type { FormData, FormRef } from "@/modules/05_leave/interface/request/VacationForm"
 import { useCounterMixin } from "@/stores/mixin"
 
@@ -104,6 +104,28 @@ function onValidate() {
 		props.onSubmit()
 	}
 }
+
+/**
+ * function รีเซทค่า startLeaveDate เเละ endLeaveDate
+ */
+function resetDate() {
+	if (formData.halfDay === "half_day_morning" || formData.halfDay === "half_day_afternoon") {
+		formData.startLeaveDate = null
+		formData.endLeaveDate = null
+	}
+	console.log("testnull")
+}
+
+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.leaveTotal = "0.5 วัน "
+	} else {
+		formData.leaveTotal = null
+	}
+	return conditionHalfDay
+})
 </script>
 
 <template>
@@ -128,8 +150,8 @@ function onValidate() {
 				/>
 				<div class="col-12 col-md-4 col-sm-6">
 					<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" />
+					<q-radio v-model="formData.halfDay" val="half_day_morning" label="ลาครึ่งวันเช้า" checked-icon="task_alt" @update:model-value="resetDate" />
+					<q-radio v-model="formData.halfDay" val="half_day_afternoon" label="ลาครึ่งวันบ่าย" checked-icon="task_alt" @update:model-value="resetDate" />
 				</div>
 				<q-input
 					class="col-12 col-md-4 col-sm-6"
@@ -203,7 +225,7 @@ function onValidate() {
 					borderless
 					:enableTimePicker="false"
 					week-start="0"
-					:readonly="!formData.startLeaveDate"
+					:readonly="isReadOnly"
 					:min-date="formData.startLeaveDate ? new Date(formData.startLeaveDate.getTime() + 24 * 60 * 60 * 1000) : null"
 				>
 					<template #year="{ year }">
@@ -220,7 +242,7 @@ function onValidate() {
 							for="endLeaveDateRef"
 							hide-bottom-space
 							class="full-width datepicker"
-							:readonly="!formData.startLeaveDate"
+							:readonly="isReadOnly"
 							:model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : null"
 							:label="`${'ลาถึงวันที่'}`"
 							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
@@ -231,12 +253,7 @@ function onValidate() {
 						</q-input>
 					</template>
 				</datepicker>
-				<div class="col-12 col-md-4 col-sm-6">
-					<p v-if="formData.startLeaveDate && formData.endLeaveDate" class="text-weight-bold text-subtitle1 q-mb-none" style="padding-top: 7px; color: #26a69a">
-						เป็นเวลา
-						{{ calculateDurationYmd(formData.startLeaveDate, formData.endLeaveDate) }}
-					</p>
-				</div>
+				<q-input class="col-12 col-md-2 col-sm-6" dense outlined ref="leaveTotalRef" for="leaveTotalRef" v-model="formData.leaveTotal" label="จำนวนวันที่ลา" readonly hide-bottom-space />
 				<div class="full-width">
 					<div class="q-col-gutter-sm row">
 						<q-input

src/modules/05_leave/componenst/Forms/06_OrdinationForm.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, ref } from "vue"
+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"
@@ -71,6 +71,26 @@ const formRef: FormRef06 = {
 	addressBuddhist: addressBuddhistRef,
 }
 
+// Watch for changes in dateLeaveEnd and update leaveTotal accordingly
+watch(formData.dateLeaveEnd, async () => {
+	if (formData.dateLeaveStart !== undefined && formData.dateLeaveEnd !== undefined) {
+		const newLeaveTotal = calculateDurationYmd(formData.dateLeaveStart, formData.dateLeaveEnd)
+		formData.leaveTotal = newLeaveTotal
+		console.log(newLeaveTotal)
+	}
+	// Update the leaveTotal value
+	console.log("test")
+})
+
+/**
+ * function อัพเดทค่า LeaveTotal
+ */
+function updateLeaveTotal() {
+	const newLeaveTotal = calculateDurationYmd(formData.dateLeaveStart, formData.dateLeaveEnd)
+	formData.leaveTotal = newLeaveTotal
+	console.log("test")
+}
+
 /** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
 function onValidate() {
 	const hasError = []
@@ -157,6 +177,7 @@ function onSubmit() {
 					:locale="'th'"
 					autoApply
 					borderless
+					@update:model-value="updateLeaveTotal"
 					:readonly="!formData.dateLeaveStart"
 					:enableTimePicker="false"
 					:min-date="formData.dateLeaveStart ? new Date(formData.dateLeaveStart.getTime() + 24 * 60 * 60 * 1000) : null"
@@ -187,13 +208,18 @@ function onSubmit() {
 						</q-input>
 					</template>
 				</datepicker>
-
-				<div class="col-12 col-md-4 col-sm-6">
-					<p v-if="formData.dateLeaveStart && formData.dateLeaveEnd" class="text-weight-bold text-subtitle1 q-mb-none" style="padding-top: 7px; color: #26a69a">
-						เป็นเวลา
-						{{ calculateDurationYmd(formData.dateLeaveStart, formData.dateLeaveEnd) }}
-					</p>
-				</div>
+				<q-input
+					class="col-12 col-md-2 col-sm-6"
+					dense
+					outlined
+					bg-color="white"
+					ref="leaveTotalRef"
+					for="leaveTotalRef"
+					v-model="formData.leaveTotal"
+					label="จำนวนวันที่ลา"
+					readonly
+					hide-bottom-space
+				/>
 				<div class="full-width">
 					<div class="q-col-gutter-sm row">
 						<datepicker
@@ -385,6 +411,7 @@ function onSubmit() {
 					type="textarea"
 					class="col-12 col-md-12 col-sm-12"
 					dense
+					bg-color="white"
 					outlined
 					ref="leaveDetailRef"
 					for="leaveDetailRef"

src/modules/05_leave/componenst/Forms/07_HajjForm.vue

@@ -64,6 +64,14 @@ function onValidate() {
 		onSubmit()
 	}
 }
+/**
+ * function อัพเดทค่า LeaveTotal
+ */
+function updateLeaveTotal() {
+	const newLeaveTotal = calculateDurationYmd(formData.dateLeaveStart, formData.dateLeaveEnd)
+	formData.leaveTotal = newLeaveTotal
+	console.log("test")
+}
 
 /** ฟังก์ชั่น บันทึก */
 function onSubmit() {
@@ -145,6 +153,7 @@ function onSubmit() {
 							week-start="0"
 							:enableTimePicker="false"
 							:locale="'th'"
+							@update:model-value="updateLeaveTotal"
 							:readonly="!formData.dateLeaveStart"
 							:min-date="formData.dateLeaveStart ? new Date(formData.dateLeaveStart.getTime() + 24 * 60 * 60 * 1000) : null"
 						>
@@ -174,12 +183,18 @@ function onSubmit() {
 							</template>
 						</datepicker>
 
-						<div class="col-12 col-md-4 col-sm-6">
-							<p v-if="formData.dateLeaveStart && formData.dateLeaveEnd" class="text-weight-bold text-subtitle1 q-mb-none" style="padding-top: 7px; color: #26a69a">
-								เป็นเวลา
-								{{ calculateDurationYmd(formData.dateLeaveStart, formData.dateLeaveEnd) }}
-							</p>
-						</div>
+						<q-input
+							class="col-12 col-md-2 col-sm-6"
+							dense
+							outlined
+							bg-color="white"
+							ref="leaveTotalRef"
+							for="leaveTotalRef"
+							v-model="formData.leaveTotal"
+							label="จำนวนวันที่ลา"
+							readonly
+							hide-bottom-space
+						/>
 						<datepicker
 							v-model="formData.government"
 							class="col-12 col-md-4 col-sm-6"
@@ -219,10 +234,10 @@ function onSubmit() {
 					</div>
 				</div>
 
-				<div class="q-pl-sm text-weight-bold text-dark col-12">เคยไปประกอบพิธีฮัจย์หรือไม่</div>
+				<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.monk" 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="รายละเอียด" />

src/modules/05_leave/componenst/Forms/08_MilitaryForm.vue

@@ -77,6 +77,15 @@ function onValidate() {
 	}
 }
 
+/**
+ * function อัพเดทค่า LeaveTotal
+ */
+function updateLeaveTotal() {
+	const newLeaveTotal = calculateDurationYmd(formData.dateLeaveStart, formData.dateLeaveEnd)
+	formData.leaveTotal = newLeaveTotal
+	console.log("test")
+}
+
 /** ฟังก์ชั่น บันทึก */
 function onSubmit() {
 	dialogConfirm(
@@ -146,6 +155,7 @@ function onSubmit() {
 					borderless
 					:enableTimePicker="false"
 					week-start="0"
+					@update:model-value="updateLeaveTotal"
 					:readonly="!formData.dateLeaveStart"
 					:min-date="formData.dateLeaveStart ? new Date(formData.dateLeaveStart.getTime() + 24 * 60 * 60 * 1000) : null"
 				>
@@ -175,12 +185,18 @@ function onSubmit() {
 					</template>
 				</datepicker>
 
-				<div class="col-12 col-md-4 col-sm-6">
-					<p v-if="formData.dateLeaveStart && formData.dateLeaveEnd" class="text-weight-bold text-subtitle1 q-mb-none" style="padding-top: 7px; color: #26a69a">
-						เป็นเวลา
-						{{ calculateDurationYmd(formData.dateLeaveStart, formData.dateLeaveEnd) }}
-					</p>
-				</div>
+				<q-input
+					class="col-12 col-md-2 col-sm-6"
+					dense
+					outlined
+					bg-color="white"
+					ref="leaveTotalRef"
+					for="leaveTotalRef"
+					v-model="formData.leaveTotal"
+					label="จำนวนวันที่ลา"
+					readonly
+					hide-bottom-space
+				/>
 				<div class="full-width">
 					<div class="q-col-gutter-sm row">
 						<q-input

src/modules/05_leave/componenst/Forms/09_StudyForm.vue

@@ -92,6 +92,15 @@ function onValidate() {
 	}
 }
 
+/**
+ * function อัพเดทค่า LeaveTotal
+ */
+function updateLeaveTotal() {
+	const newLeaveTotal = calculateDurationYmd(formData.dateLeaveStart, formData.dateLeaveEnd)
+	formData.leaveTotal = newLeaveTotal
+	console.log("test")
+}
+
 /** ฟังก์ชั่น บันทึก */
 function onSubmit() {
 	dialogConfirm(
@@ -168,6 +177,7 @@ const formattedSalary = computed(() => {
 					borderless
 					week-start="0"
 					:locale="'th'"
+					@update:model-value="updateLeaveTotal"
 					:readonly="!formData.dateLeaveStart"
 					:enableTimePicker="false"
 					:min-date="formData.dateLeaveStart ? new Date(formData.dateLeaveStart.getTime() + 24 * 60 * 60 * 1000) : null"
@@ -199,12 +209,18 @@ const formattedSalary = computed(() => {
 					</template>
 				</datepicker>
 
-				<div class="col-12 col-md-4 col-sm-6">
-					<p v-if="formData.dateLeaveStart && formData.dateLeaveEnd" class="text-weight-bold text-subtitle1 q-mb-none" style="padding-top: 7px; color: #26a69a">
-						เป็นเวลา
-						{{ calculateDurationYmd(formData.dateLeaveStart, formData.dateLeaveEnd) }}
-					</p>
-				</div>
+				<q-input
+					class="col-12 col-md-2 col-sm-6"
+					dense
+					outlined
+					bg-color="white"
+					ref="leaveTotalRef"
+					for="leaveTotalRef"
+					v-model="formData.leaveTotal"
+					label="จำนวนวันที่ลา"
+					readonly
+					hide-bottom-space
+				/>
 
 				<div class="full-width">
 					<div class="q-col-gutter-sm row">

src/modules/05_leave/componenst/Forms/10_TrainForm.vue

@@ -87,6 +87,15 @@ function onValidate() {
 	}
 }
 
+/**
+ * function อัพเดทค่า LeaveTotal
+ */
+function updateLeaveTotal() {
+	const newLeaveTotal = calculateDurationYmd(formData.dateLeaveStart, formData.dateLeaveEnd)
+	formData.leaveTotal = newLeaveTotal
+	console.log("test")
+}
+
 /** ฟังก์ชั่น บันทึก */
 function onSubmit() {
 	dialogConfirm(
@@ -160,6 +169,7 @@ const formattedSalary = computed(() => {
 					menu-class-name="modalfix"
 					autoApply
 					borderless
+					@update:model-value="updateLeaveTotal"
 					week-start="0"
 					:readonly="!formData.dateLeaveStart"
 					:locale="'th'"
@@ -193,12 +203,18 @@ const formattedSalary = computed(() => {
 					</template>
 				</datepicker>
 
-				<div class="col-12 col-md-4 col-sm-6">
-					<p v-if="formData.dateLeaveStart && formData.dateLeaveEnd" class="text-weight-bold text-subtitle1 q-mb-none" style="padding-top: 7px; color: #26a69a">
-						ระยะเวลา
-						{{ calculateDurationYmd(formData.dateLeaveStart, formData.dateLeaveEnd) }}
-					</p>
-				</div>
+				<q-input
+					class="col-12 col-md-2 col-sm-6"
+					dense
+					outlined
+					bg-color="white"
+					ref="leaveTotalRef"
+					for="leaveTotalRef"
+					v-model="formData.leaveTotal"
+					label="จำนวนวันที่ลา"
+					readonly
+					hide-bottom-space
+				/>
 
 				<div class="full-width">
 					<div class="q-col-gutter-sm row">

src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue

@@ -119,6 +119,15 @@ function onValidate() {
 	}
 }
 
+/**
+ * function อัพเดทค่า LeaveTotal
+ */
+function updateLeaveTotal() {
+	const newLeaveTotal = calculateDurationYmd(formData.startLeaveDate, formData.endLeaveDate)
+	formData.leaveTotal = newLeaveTotal
+	console.log("test")
+}
+
 /**
  * function check ว่าถ้ามีค่ามาเเล้วจะเป็น readonly
  */
@@ -230,6 +239,7 @@ watch(formData.followHistoryEnd, newVal => {
 					hide-bottom-space
 					: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"
 				>
@@ -258,12 +268,18 @@ watch(formData.followHistoryEnd, newVal => {
 						</q-input>
 					</template>
 				</datepicker>
-				<div class="col-12 col-md-4 col-sm-6">
-					<p v-if="formData.startLeaveDate && formData.endLeaveDate" class="text-weight-bold text-subtitle1 q-mb-none" style="padding-top: 7px; color: #26a69a">
-						มีกำหนด
-						{{ calculateDurationYmd(formData.startLeaveDate, formData.endLeaveDate) }}
-					</p>
-				</div>
+				<q-input
+					class="col-12 col-md-2 col-sm-6"
+					dense
+					outlined
+					bg-color="white"
+					ref="leaveTotalRef"
+					for="leaveTotalRef"
+					v-model="formData.leaveTotal"
+					label="จำนวนวันที่ลา"
+					readonly
+					hide-bottom-space
+				/>
 				<div class="col-12 col-md-6 col-sm-12">
 					<q-input hide-bottom-space class="col-12 col-sm-12" ref="salaryRef" for="salaryRef" dense outlined v-model="formattSalary" label="เงินเดือนปัจจุบัน" readonly />
 				</div>