From f02468d7fdba21cf69fc1956e8003253bc32cece Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Mon, 20 Nov 2023 18:01:01 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20Ui=20=E0=B8=9F?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=A3=E0=B9=8C=E0=B8=A1=20=E0=B9=80=E0=B8=9E?=
 =?UTF-8?q?=E0=B8=B4=E0=B9=88=E0=B8=A1=20function=20=E0=B8=95=E0=B9=88?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=87=E0=B9=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../05_leave/componenst/Forms/01_SickForm.vue | 44 +++++-----
 .../05_leave/componenst/Forms/03_Birth.vue    | 83 +++++++++----------
 .../componenst/Forms/04_HelpWifeBirthForm.vue | 83 +++++++++----------
 .../componenst/Forms/05_VacationForm.vue      | 83 +++++++++----------
 .../componenst/Forms/06_OrdinationForm.vue    | 28 +++++--
 .../05_leave/componenst/Forms/07_HajjForm.vue | 16 ++--
 .../componenst/Forms/08_MilitaryForm.vue      | 16 ++--
 .../componenst/Forms/09_StudyForm.vue         |  8 +-
 .../componenst/Forms/10_TrainForm.vue         |  6 +-
 .../Forms/11_WorkInternationalForm.vue        |  6 +-
 .../componenst/Forms/12_FollowSpouseForm.vue  | 60 +++++++++-----
 .../Forms/13_RehabilitationForm.vue           |  6 +-
 .../05_leave/componenst/addAbsence.vue        |  4 +-
 src/modules/05_leave/views/AddPage.vue        |  8 +-
 14 files changed, 241 insertions(+), 210 deletions(-)

diff --git a/src/modules/05_leave/componenst/Forms/01_SickForm.vue b/src/modules/05_leave/componenst/Forms/01_SickForm.vue
index 9a85ca6..e341e8c 100644
--- a/src/modules/05_leave/componenst/Forms/01_SickForm.vue
+++ b/src/modules/05_leave/componenst/Forms/01_SickForm.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
-import { ref, reactive, watch } from "vue"
+import { ref, reactive, watch, computed } from "vue"
+import { useQuasar } from "quasar"
 import type { FormData, FormRef } from "@/modules/05_leave/interface/request/SickForm"
 import { useCounterMixin } from "@/stores/mixin"
 
+const $q = useQuasar()
 const mixin = useCounterMixin()
-const { date2Thai } = mixin
+const { date2Thai, calculateDurationYmd } = mixin
 const edit = ref<boolean>(true)
 
 /** รับ props มาจากหน้าหลัก */
@@ -20,11 +22,11 @@ const props = defineProps({
 })
 
 /** ข้อมูล v-model ของฟอร์ม */
-const formData = reactive<FormData>({
+const formData = reactive<any>({
 	leaveNo: "",
 	startLeaveDate: null,
 	endLeaveDate: null,
-	halfDay: "day",
+	halfDay: "half_day_morning",
 	contractTel: "",
 	leaveTotal: "",
 	leaveContactTel: "",
@@ -96,6 +98,15 @@ function onValidate() {
 		props.onSubmit()
 	}
 }
+
+const isReadOnly = computed(() => {
+	const condition = formData.halfDay === "half_day_morning" || formData.halfDay === "half_day_afternoon"
+	if (condition) {
+		formData.endLeaveDate = null // Set formData.endLeaveDate to null
+	}
+	return condition
+})
+console.log(isReadOnly.value)
 </script>
 
 <!-- ฟอร์มลาป่วย และลากิจส่วนตัว -->
@@ -173,7 +184,7 @@ function onValidate() {
 							borderless
 							:enableTimePicker="false"
 							week-start="0"
-							:readonly="!edit"
+							:readonly="isReadOnly"
 						>
 							<template #year="{ year }">
 								{{ year + 543 }}
@@ -188,7 +199,7 @@ function onValidate() {
 									ref="endLeaveDateRef"
 									for="endLeaveDateRef"
 									hide-bottom-space
-									:readonly="!edit"
+									:readonly="isReadOnly"
 									class="full-width datepicker"
 									:model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : null"
 									:label="`${'ลาถึงวันที่'}`"
@@ -200,19 +211,12 @@ function onValidate() {
 								</q-input>
 							</template>
 						</datepicker>
-						<q-input
-							class="col-12 col-md-2 col-sm-6"
-							dense
-							outlined
-							ref="leaveTotalRef"
-							for="leaveTotalRef"
-							type="number"
-							v-model="formData.leaveTotal"
-							label="จำนวนวันที่ลา"
-							readonly
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
-						/>
+						<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>
 					</div>
 				</div>
 				<div class="full-width">
@@ -302,7 +306,7 @@ function onValidate() {
 
 		<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="บันทึก" />
+			<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/03_Birth.vue b/src/modules/05_leave/componenst/Forms/03_Birth.vue
index 77b774b..e3ad3d7 100644
--- a/src/modules/05_leave/componenst/Forms/03_Birth.vue
+++ b/src/modules/05_leave/componenst/Forms/03_Birth.vue
@@ -4,7 +4,7 @@ import type { FormData, FormRef } from "@/modules/05_leave/interface/request/Bir
 import { useCounterMixin } from "@/stores/mixin"
 
 const mixin = useCounterMixin()
-const { date2Thai } = mixin
+const { date2Thai, calculateDurationYmd } = mixin
 const edit = ref<boolean>(true)
 
 /** รับ props มาจากหน้าหลัก */
@@ -20,7 +20,7 @@ const props = defineProps({
 })
 
 /** ข้อมูล v-model ของฟอร์ม */
-const formData = reactive<FormData>({
+const formData = reactive<any>({
 	leaveNo: "",
 	startLeaveDate: null,
 	endLeaveDate: null,
@@ -192,48 +192,43 @@ function onValidate() {
 						</q-input>
 					</template>
 				</datepicker>
-				<q-input
-					class="col-12 col-md-2 col-sm-12"
-					dense
-					hide-bottom-space
-					outlined
-					ref="leaveTotalRef"
-					for="leaveTotalRef"
-					type="number"
-					v-model="formData.leaveTotal"
-					label="จำนวนวันที่ลา"
-					readonly
-					:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
-				/>
-
-				<q-input
-					class="col-12 col-md-4 col-sm-12"
-					dense
-					outlined
-					hide-bottom-space
-					ref="leaveContactTelRef"
-					for="leaveContactTelRef"
-					v-model="formData.leaveContactTel"
-					mask="(###)-###-####"
-					unmasked-value
-					label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-					:readonly="!edit"
-					:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
-				/>
-
-				<q-input
-					class="col-12 col-md-12 col-sm-12"
-					dense
-					outlined
-					hide-bottom-space
-					ref="leaveContactLocationRef"
-					for="leaveContactLocationRef"
-					v-model="formData.leaveContactLocation"
-					label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-					:readonly="!edit"
-					:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
-				/>
+				<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>
+				<div class="full-width">
+					<div class="q-col-gutter-sm row">
+						<q-input
+							class="col-12 col-md-3 col-sm-12"
+							dense
+							outlined
+							hide-bottom-space
+							ref="leaveContactTelRef"
+							for="leaveContactTelRef"
+							v-model="formData.leaveContactTel"
+							mask="(###)-###-####"
+							unmasked-value
+							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+							:readonly="!edit"
+							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
+						/>
 
+						<q-input
+							class="col-12 col-md-9 col-sm-12"
+							dense
+							outlined
+							hide-bottom-space
+							ref="leaveContactLocationRef"
+							for="leaveContactLocationRef"
+							v-model="formData.leaveContactLocation"
+							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+							:readonly="!edit"
+							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
+						/>
+					</div>
+				</div>
 				<q-input
 					type="textarea"
 					class="col-12 col-md-12 col-sm-12"
@@ -289,7 +284,7 @@ function onValidate() {
 
 		<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="บันทึก" />
+			<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/04_HelpWifeBirthForm.vue b/src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue
index e1878af..3bb8379 100644
--- a/src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue
+++ b/src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue
@@ -4,7 +4,7 @@ import type { FormData, FormRef } from "@/modules/05_leave/interface/request/Hel
 import { useCounterMixin } from "@/stores/mixin"
 
 const mixin = useCounterMixin()
-const { date2Thai } = mixin
+const { date2Thai, calculateDurationYmd } = mixin
 const edit = ref<boolean>(true)
 
 /** รับ props มาจากหน้าหลัก */
@@ -20,7 +20,7 @@ const props = defineProps({
 })
 
 /** ข้อมูล v-model ของฟอร์ม */
-const formData = reactive<FormData>({
+const formData = reactive<any>({
 	leaveNo: "",
 	wifeName: "",
 	brithDate: null,
@@ -214,19 +214,12 @@ function onValidate() {
 						</q-input>
 					</template>
 				</datepicker>
-				<q-input
-					class="col-12 col-md-4 col-sm-12"
-					dense
-					outlined
-					ref="leaveTotalRef"
-					for="leaveTotalRef"
-					type="number"
-					hide-bottom-space
-					v-model="formData.leaveTotal"
-					label="จำนวนวันที่ลา"
-					readonly
-					:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
-				/>
+				<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>
 				<div class="col-12 col-md-4 col-sm-12">
 					<q-input
 						class="col-12 col-sm-12"
@@ -279,35 +272,37 @@ function onValidate() {
 						</q-input>
 					</template>
 				</datepicker>
+				<div class="full-width">
+					<div class="q-col-gutter-sm row">
+						<q-input
+							class="col-12 col-md-3 col-sm-12"
+							dense
+							outlined
+							ref="leaveContactTelRef"
+							for="leaveContactTelRef"
+							v-model="formData.leaveContactTel"
+							mask="(###)-###-####"
+							unmasked-value
+							hide-bottom-space
+							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+							:readonly="!edit"
+							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
+						/>
 
-				<q-input
-					class="col-12 col-md-4 col-sm-12"
-					dense
-					outlined
-					ref="leaveContactTelRef"
-					for="leaveContactTelRef"
-					v-model="formData.leaveContactTel"
-					mask="(###)-###-####"
-					unmasked-value
-					hide-bottom-space
-					label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-					:readonly="!edit"
-					:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
-				/>
-
-				<q-input
-					class="col-12 col-md-12 col-sm-12"
-					dense
-					outlined
-					hide-bottom-space
-					ref="leaveContactLocationRef"
-					for="leaveContactLocationRef"
-					v-model="formData.leaveContactLocation"
-					label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-					:readonly="!edit"
-					:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
-				/>
-
+						<q-input
+							class="col-12 col-md-9 col-sm-12"
+							dense
+							outlined
+							hide-bottom-space
+							ref="leaveContactLocationRef"
+							for="leaveContactLocationRef"
+							v-model="formData.leaveContactLocation"
+							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+							:readonly="!edit"
+							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
+						/>
+					</div>
+				</div>
 				<q-input
 					hide-bottom-space
 					type="textarea"
@@ -350,7 +345,7 @@ function onValidate() {
 		<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="บันทึก" />
+			<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 5799a45..698d501 100644
--- a/src/modules/05_leave/componenst/Forms/05_VacationForm.vue
+++ b/src/modules/05_leave/componenst/Forms/05_VacationForm.vue
@@ -4,7 +4,7 @@ import type { FormData, FormRef } from "@/modules/05_leave/interface/request/Vac
 import { useCounterMixin } from "@/stores/mixin"
 
 const mixin = useCounterMixin()
-const { date2Thai } = mixin
+const { date2Thai, calculateDurationYmd } = mixin
 const edit = ref<boolean>(true)
 
 /** รับ props มาจากหน้าหลัก */
@@ -20,7 +20,7 @@ const props = defineProps({
 })
 
 /** ข้อมูล v-model ของฟอร์ม */
-const formData = reactive<FormData>({
+const formData = reactive<any>({
 	leaveNo: "",
 	halfDay: "day",
 	lastYearVacation: "",
@@ -230,48 +230,43 @@ function onValidate() {
 						</q-input>
 					</template>
 				</datepicker>
-				<q-input
-					class="col-12 col-md-3 col-sm-12"
-					dense
-					outlined
-					hide-bottom-space
-					ref="leaveTotalRef"
-					for="leaveTotalRef"
-					type="number"
-					v-model="formData.leaveTotal"
-					label="จำนวนวันที่ลา"
-					readonly
-					:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
-				/>
-
-				<q-input
-					class="col-12 col-md-3 col-sm-12"
-					dense
-					outlined
-					hide-bottom-space
-					ref="leaveContactTelRef"
-					for="leaveContactTelRef"
-					v-model="formData.leaveContactTel"
-					mask="(###)-###-####"
-					unmasked-value
-					label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-					:readonly="!edit"
-					:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
-				/>
-
-				<q-input
-					class="col-12 col-md-12 col-sm-6"
-					dense
-					outlined
-					hide-bottom-space
-					ref="leaveContactLocationRef"
-					for="leaveContactLocationRef"
-					v-model="formData.leaveContactLocation"
-					label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-					:readonly="!edit"
-					:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
-				/>
+				<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>
+				<div class="full-width">
+					<div class="q-col-gutter-sm row">
+						<q-input
+							class="col-12 col-md-3 col-sm-12"
+							dense
+							outlined
+							hide-bottom-space
+							ref="leaveContactTelRef"
+							for="leaveContactTelRef"
+							v-model="formData.leaveContactTel"
+							mask="(###)-###-####"
+							unmasked-value
+							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+							:readonly="!edit"
+							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
+						/>
 
+						<q-input
+							class="col-12 col-md-9 col-sm-6"
+							dense
+							outlined
+							hide-bottom-space
+							ref="leaveContactLocationRef"
+							for="leaveContactLocationRef"
+							v-model="formData.leaveContactLocation"
+							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+							:readonly="!edit"
+							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
+						/>
+					</div>
+				</div>
 				<q-input
 					type="textarea"
 					hide-bottom-space
@@ -314,7 +309,7 @@ function onValidate() {
 		<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="บันทึก" />
+			<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/06_OrdinationForm.vue b/src/modules/05_leave/componenst/Forms/06_OrdinationForm.vue
index 13ab6e8..df5d253 100644
--- a/src/modules/05_leave/componenst/Forms/06_OrdinationForm.vue
+++ b/src/modules/05_leave/componenst/Forms/06_OrdinationForm.vue
@@ -6,7 +6,7 @@ import type { FormRef06 } from "@/modules/05_leave/interface/request/AddAbsence"
 
 const $q = useQuasar()
 const mixin = useCounterMixin()
-const { date2Thai, dialogConfirm } = mixin
+const { date2Thai, dialogConfirm, calculateDurationYmd } = mixin
 
 const edit = ref<boolean>(true)
 const files = ref<any>(null)
@@ -96,9 +96,10 @@ function onSubmit() {
 			console.log(formData)
 			props.onSubmit()
 		},
-		"ยืนยันการบันทึกข้อมูล",
-		"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+		"ยืนยันการยื่นใบลา",
+		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
 	)
+	console.log("tese")
 }
 </script>
 
@@ -175,8 +176,12 @@ function onSubmit() {
 					</template>
 				</datepicker>
 
-				<q-input class="col-12 col-md-4 col-sm-6" dense outlined bg-color="white" type="number" v-model="formData.totalLeave" label="จำนวนวันที่ลา" readonly />
-
+				<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>
 				<div class="full-width">
 					<div class="q-col-gutter-sm row">
 						<datepicker
@@ -364,6 +369,17 @@ function onSubmit() {
 					type="textarea"
 					hide-bottom-space
 				/>
+				<q-input
+					type="textarea"
+					class="col-12 col-md-12 col-sm-12"
+					dense
+					outlined
+					ref="leaveDetailRef"
+					for="leaveDetailRef"
+					v-model="formData.leaveDetail"
+					label="รายละเอียด"
+					:readonly="!edit"
+				/>
 
 				<div class="col-12 col-sm-6">
 					<q-file ref="fileRef" v-model="formData.file" dense label="เอกสารประกอบ" outlined bg-color="white" multiple>
@@ -398,7 +414,7 @@ function onSubmit() {
 
 		<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="บันทึก" />
+			<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/07_HajjForm.vue b/src/modules/05_leave/componenst/Forms/07_HajjForm.vue
index aa625aa..b939449 100644
--- a/src/modules/05_leave/componenst/Forms/07_HajjForm.vue
+++ b/src/modules/05_leave/componenst/Forms/07_HajjForm.vue
@@ -6,7 +6,7 @@ import type { FormRef07 } from "@/modules/05_leave/interface/request/AddAbsence"
 
 const $q = useQuasar()
 const mixin = useCounterMixin()
-const { date2Thai, dialogConfirm } = mixin
+const { date2Thai, dialogConfirm, calculateDurationYmd } = mixin
 
 const edit = ref<boolean>(true)
 const files = ref<any>(null)
@@ -73,8 +73,8 @@ function onSubmit() {
 			console.log(formData)
 			props.onSubmit()
 		},
-		"ยืนยันการบันทึกข้อมูล",
-		"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+		"ยืนยันการยื่นใบลา",
+		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
 	)
 }
 </script>
@@ -171,8 +171,12 @@ function onSubmit() {
 							</template>
 						</datepicker>
 
-						<q-input v-model="formData.totalLeave" class="col-12 col-md-4 col-sm-6" bg-color="white" dense outlined readonly type="number" label="จำนวนวันที่ลา" />
-
+						<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>
 						<datepicker
 							v-model="formData.government"
 							class="col-12 col-md-4 col-sm-6"
@@ -251,7 +255,7 @@ function onSubmit() {
 		<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="บันทึก" />
+			<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/08_MilitaryForm.vue b/src/modules/05_leave/componenst/Forms/08_MilitaryForm.vue
index 53c7149..f1faf28 100644
--- a/src/modules/05_leave/componenst/Forms/08_MilitaryForm.vue
+++ b/src/modules/05_leave/componenst/Forms/08_MilitaryForm.vue
@@ -6,7 +6,7 @@ import type { FormRef08 } from "@/modules/05_leave/interface/request/AddAbsence"
 
 const $q = useQuasar()
 const mixin = useCounterMixin()
-const { date2Thai, dialogConfirm } = mixin
+const { date2Thai, dialogConfirm, calculateDurationYmd } = mixin
 
 const edit = ref<boolean>(true)
 const files = ref<any>(null)
@@ -85,8 +85,8 @@ function onSubmit() {
 			console.log(formData)
 			props.onSubmit()
 		},
-		"ยืนยันการบันทึกข้อมูล",
-		"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+		"ยืนยันการยื่นใบลา",
+		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
 	)
 }
 </script>
@@ -163,8 +163,12 @@ function onSubmit() {
 					</template>
 				</datepicker>
 
-				<q-input class="col-12 col-md-4 col-sm-6" dense outlined bg-color="white" type="number" v-model="formData.totalLeave" label="จำนวนวันที่ลา" readonly />
-
+				<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>
 				<div class="full-width">
 					<div class="q-col-gutter-sm row">
 						<q-input
@@ -280,7 +284,7 @@ function onSubmit() {
 		<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="บันทึก" />
+			<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/09_StudyForm.vue b/src/modules/05_leave/componenst/Forms/09_StudyForm.vue
index 1f82a77..a8aa21b 100644
--- a/src/modules/05_leave/componenst/Forms/09_StudyForm.vue
+++ b/src/modules/05_leave/componenst/Forms/09_StudyForm.vue
@@ -100,8 +100,8 @@ function onSubmit() {
 			console.log(formData)
 			props.onSubmit()
 		},
-		"ยืนยันการบันทึกข้อมูล",
-		"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+		"ยืนยันการยื่นใบลา",
+		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
 	)
 }
 
@@ -201,7 +201,7 @@ const formattedSalary = computed(() => {
 
 				<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>
@@ -422,7 +422,7 @@ const formattedSalary = computed(() => {
 		<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="บันทึก" />
+			<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/10_TrainForm.vue b/src/modules/05_leave/componenst/Forms/10_TrainForm.vue
index 5f399de..a64900a 100644
--- a/src/modules/05_leave/componenst/Forms/10_TrainForm.vue
+++ b/src/modules/05_leave/componenst/Forms/10_TrainForm.vue
@@ -95,8 +95,8 @@ function onSubmit() {
 			console.log(formData)
 			props.onSubmit()
 		},
-		"ยืนยันการบันทึกข้อมูล",
-		"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+		"ยืนยันการยื่นใบลา",
+		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
 	)
 }
 /**
@@ -393,7 +393,7 @@ const formattedSalary = computed(() => {
 		<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="บันทึก" />
+			<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/11_WorkInternationalForm.vue b/src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue
index c712fba..167dd86 100644
--- a/src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue
+++ b/src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue
@@ -96,8 +96,8 @@ function onSubmit() {
 				console.log("savefile อัปโหลด", filesUpload.value)
 			}
 		},
-		!isSave.value ? "ยืนยันการบันทึกข้อมูล" : "ยืนยันการอัพโหลดไฟล์",
-		!isSave.value ? "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?" : "ต้องการยืนยันการอัพโหลดไฟล์นี้หรือไม่ ?"
+		!isSave.value ? "ยืนยันการยื่นใบลา" : "ยืนยันการอัพโหลดไฟล์",
+		!isSave.value ? "ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?" : "ต้องการยืนยันการอัพโหลดไฟล์นี้หรือไม่ ?"
 	)
 }
 </script>
@@ -302,7 +302,7 @@ function onSubmit() {
 			<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="บันทึก" />
+				<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
 			</div>
 		</div>
 	</form>
diff --git a/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue b/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
index 7890ab4..387534d 100644
--- a/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
@@ -4,7 +4,7 @@ import type { FormData, FormRef } from "@/modules/05_leave/interface/request/Fol
 import { useCounterMixin } from "@/stores/mixin"
 
 const mixin = useCounterMixin()
-const { date2Thai, arabicNumberToText } = mixin
+const { date2Thai, arabicNumberToText, calculateDurationYmd } = mixin
 const edit = ref<boolean>(true)
 
 /** รับ props มาจากหน้าหลัก */
@@ -20,7 +20,7 @@ const props = defineProps({
 })
 
 /** ข้อมูล v-model ของฟอร์ม */
-const formData = reactive<FormData>({
+const formData = reactive<any>({
 	leaveNo: "",
 	startLeaveDate: null,
 	endLeaveDate: null,
@@ -35,7 +35,7 @@ const formData = reactive<FormData>({
 	followHistoryTime: "",
 	followHistoryStart: null,
 	followHistoryEnd: null,
-	leaveDetail: "", //รายละเอียดการลา
+	leaveDetail: "ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา ...ปี, ...เดือน, ...วัน", //รายละเอียดการลา
 	file: [], //เอกสารปะกอบ
 })
 
@@ -118,6 +118,26 @@ function onValidate() {
 		props.onSubmit()
 	}
 }
+
+/**
+ * function check ว่าถ้ามีค่ามาเเล้วจะเป็น readonly
+ */
+const isReadOnly = ref(true)
+watch(formData.followHistoryCountry, newVal => {
+	isReadOnly.value = !!newVal
+})
+
+watch(formData.followHistoryTime, newVal => {
+	isReadOnly.value = !!newVal
+})
+
+watch(formData.followHistoryStart, newVal => {
+	isReadOnly.value = !!newVal
+})
+
+watch(formData.followHistoryEnd, newVal => {
+	isReadOnly.value = !!newVal
+})
 </script>
 
 <template>
@@ -237,20 +257,13 @@ function onValidate() {
 						</q-input>
 					</template>
 				</datepicker>
-				<q-input
-					class="col-12 col-md-4 col-sm-12"
-					dense
-					outlined
-					hide-bottom-space
-					ref="leaveTotalRef"
-					for="leaveTotalRef"
-					type="number"
-					v-model="formData.leaveTotal"
-					label="จำนวนวันที่ลา"
-					readonly
-					:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
-				/>
-				<div class="col-12 col-md-3 col-sm-12">
+				<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>
+				<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>
 				<div class="col-12 col-md-6 col-sm-12">
@@ -324,7 +337,7 @@ function onValidate() {
 					borderless
 					:enableTimePicker="false"
 					week-start="0"
-					:readonly="!edit"
+					:readonly="isReadOnly"
 				>
 					<template #year="{ year }">
 						{{ year + 543 }}
@@ -339,7 +352,7 @@ function onValidate() {
 							ref="followHistoryStartRef"
 							for="followHistoryStartRef"
 							hide-bottom-space
-							:readonly="!edit"
+							:readonly="isReadOnly"
 							class="full-width datepicker"
 							:model-value="formData.followHistoryStart != null ? date2Thai(formData.followHistoryStart) : null"
 							:label="`${'ตั้งแต่วันที่'}`"
@@ -361,7 +374,7 @@ function onValidate() {
 					borderless
 					:enableTimePicker="false"
 					week-start="0"
-					:readonly="!edit"
+					:readonly="isReadOnly"
 				>
 					<template #year="{ year }">
 						{{ year + 543 }}
@@ -376,7 +389,7 @@ function onValidate() {
 							ref="followHistoryEndRef"
 							for="followHistoryEndRef"
 							hide-bottom-space
-							:readonly="!edit"
+							:readonly="isReadOnly"
 							class="full-width datepicker"
 							:model-value="formData.followHistoryEnd != null ? date2Thai(formData.followHistoryEnd) : null"
 							:label="`${'ถึงวันที่'}`"
@@ -398,17 +411,18 @@ function onValidate() {
 					v-model="formData.followHistoryCountry"
 					label="ประเทศ"
 					:rules="[val => !!val || `${'กรุณาเลือกประเทศ'}`]"
+					:readonly="isReadOnly"
 				/>
 				<q-input
 					class="col-12 col-md-3 col-sm-12"
 					dense
 					outlined
+					:readonly="isReadOnly"
 					hide-bottom-space
 					ref="followHistoryTimeRef"
 					for="followHistoryTimeRef"
 					v-model="formData.followHistoryTime"
 					label="เป็นเวลา"
-					:rules="[val => !!val || `${'กรุณาเลือกเวลา'}`]"
 				/>
 
 				<q-input
@@ -453,7 +467,7 @@ function onValidate() {
 		<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="บันทึก" />
+			<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/13_RehabilitationForm.vue b/src/modules/05_leave/componenst/Forms/13_RehabilitationForm.vue
index c7339a2..bd6d237 100644
--- a/src/modules/05_leave/componenst/Forms/13_RehabilitationForm.vue
+++ b/src/modules/05_leave/componenst/Forms/13_RehabilitationForm.vue
@@ -72,8 +72,8 @@ function onSubmit() {
 			console.log(formData)
 			isSave.value = true
 		},
-		"ยืนยันการบันทึกข้อมูล",
-		"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+		"ยืนยันการยื่นใบลา",
+		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
 	)
 }
 
@@ -236,7 +236,7 @@ function upLoadFile() {
 			<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="บันทึก" />
+				<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
 			</div>
 		</div>
 	</form>
diff --git a/src/modules/05_leave/componenst/addAbsence.vue b/src/modules/05_leave/componenst/addAbsence.vue
index c1a633f..79078bd 100644
--- a/src/modules/05_leave/componenst/addAbsence.vue
+++ b/src/modules/05_leave/componenst/addAbsence.vue
@@ -89,8 +89,8 @@ onMounted(() => {})
 
 const saveAbsence = () => {
 	$q.dialog({
-		title: "ยืนยันการยื่นข้อมูลลาออก",
-		message: "ต้องการยื่นข้อมูลลาออกนี้ใช่หรือไม่?",
+		title: "ยืนยันการยื่นใบลา",
+		message: "ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่?",
 		cancel: {
 			flat: true,
 			color: "negative",
diff --git a/src/modules/05_leave/views/AddPage.vue b/src/modules/05_leave/views/AddPage.vue
index cc9b582..d74395a 100644
--- a/src/modules/05_leave/views/AddPage.vue
+++ b/src/modules/05_leave/views/AddPage.vue
@@ -20,9 +20,11 @@ import { useLeaveStore } from "@/modules/05_leave/store"
 import http from "@/plugins/http"
 import config from "@/app.config"
 import type { QForm } from "quasar"
+import { useCounterMixin } from "@/stores/mixin"
 
 const dataStore = useLeaveStore()
-
+const mixin = useCounterMixin()
+const { date2Thai, dialogConfirm } = mixin
 const router = useRouter()
 const route = useRoute()
 const myform = ref<QForm | null>(null)
@@ -55,8 +57,10 @@ const saveAbsence = () => {
 		.onCancel(() => {})
 		.onDismiss(() => {})
 }
-
+/** ฟังก์ชั่น บันทึก */
 const onSubmit = async () => {
+	dialogConfirm($q, async () => {}, "ยืนยันการยื่นใบลา", "ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?")
+
 	console.log("save")
 }
 </script>