แก้ไข 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>

src/modules/05_leave/store.ts

@@ -1,356 +1,290 @@
-import { defineStore } from "pinia";
-import { ref, computed } from "vue";
-import type { QTableProps } from "quasar";
-import type {
-  FormLeavetMainData,
-  OptionData,
-  formListLeaveData,
-} from "@/modules/05_leave/interface/index/main";
-import { useCounterMixin } from "@/stores/mixin";
+import { defineStore } from "pinia"
+import { ref, computed } from "vue"
+import type { QTableProps } from "quasar"
+import type { FormLeavetMainData, OptionData, formListLeaveData } from "@/modules/05_leave/interface/index/main"
+import { useCounterMixin } from "@/stores/mixin"
 
 export const useLeaveStore = defineStore("Leave", () => {
-  const tabValue = ref<string>("calendar");
-  const typeLeave = ref<string | undefined>("");
-  const mixin = useCounterMixin();
-  const { date2Thai } = mixin;
-  const LeaveType = ref<string | null>("0");
-  const LeaveStatus = ref<string | null>("0");
-  const fiscalYearyear = ref<string | null>("0");
-  const rows = ref<formListLeaveData[]>([]);
-  const DataMainOrig = ref<formListLeaveData[]>([]); // ข้อมูลหลักดั้งเดิม
+	const tabValue = ref<string>("calendar")
+	const typeLeave = ref<string | undefined>("")
+	const mixin = useCounterMixin()
+	const { date2Thai } = mixin
+	const LeaveType = ref<string | null>("0")
+	const LeaveStatus = ref<string | null>("0")
+	const fiscalYearyear = ref<string | null>("0")
+	const rows = ref<formListLeaveData[]>([])
+	const DataMainOrig = ref<formListLeaveData[]>([]) // ข้อมูลหลักดั้งเดิม
 
-  async function fecthList(data: formListLeaveData[]) {
-    let datalist: formListLeaveData[] = data.map((e: any) => ({
-      no: e.no,
-      type: e.type,
-      status: e.status,
-      date: e.date,
-      year: e.year,
-    }));
-    rows.value = datalist;
-    DataMainOrig.value = datalist;
-  }
+	async function fecthList(data: formListLeaveData[]) {
+		let datalist: formListLeaveData[] = data.map((e: any) => ({
+			no: e.no,
+			type: e.type,
+			status: e.status,
+			date: e.date,
+			year: e.year,
+		}))
+		rows.value = datalist
+		DataMainOrig.value = datalist
+	}
 
-  const DataMainUpdate = ref<formListLeaveData[]>([]); // ข้อมูลเปลี่ยนแปลง
-  const DataMain = (val: formListLeaveData[]) => (DataMainOrig.value = val);
-  const DataUpdate = (
-    filterType: string,
-    filterStatus: string,
-    filterYear: string
-  ) => {
-    DataMainUpdate.value = [];
+	const DataMainUpdate = ref<formListLeaveData[]>([]) // ข้อมูลเปลี่ยนแปลง
+	const DataMain = (val: formListLeaveData[]) => (DataMainOrig.value = val)
+	const DataUpdate = (filterType: string, filterStatus: string, filterYear: string) => {
+		DataMainUpdate.value = []
 
-    if (filterType === "" && filterStatus === "" && filterYear === "") {
-      DataMainUpdate.value = DataMainOrig.value;
-    } else if (filterType !== "" && filterStatus === "" && filterYear === "") {
-      DataMainUpdate.value = DataMainOrig.value.filter(
-        (item: formListLeaveData) => item.type === filterType
-      );
-    } else if (
-      filterType !== "" &&
-      filterStatus !== "" &&
-      filterYear === null
-    ) {
-      DataMainUpdate.value = DataMainOrig.value.filter(
-        (item: formListLeaveData) =>
-          item.type === filterType && item.status === filterStatus
-      );
-    } else if (filterType !== "" && filterStatus === "" && filterYear !== "") {
-      DataMainUpdate.value = DataMainOrig.value.filter(
-        (item: formListLeaveData) =>
-          item.type === filterType && item.year === filterYear
-      );
-    } else if (filterType === "" && filterStatus !== "" && filterYear === "") {
-      DataMainUpdate.value = DataMainOrig.value.filter(
-        (item: formListLeaveData) => item.status === filterStatus
-      );
-    } else if (filterType === "" && filterStatus === "" && filterYear !== "") {
-      DataMainUpdate.value = DataMainOrig.value.filter(
-        (item: formListLeaveData) => item.year === filterYear
-      );
-    } else if (
-      filterType === "" &&
-      filterStatus !== "" &&
-      filterYear !== null
-    ) {
-      DataMainUpdate.value = DataMainOrig.value.filter(
-        (item: formListLeaveData) =>
-          item.status === filterStatus && item.year === filterYear
-      );
-    } else if (filterType !== "" && filterStatus !== "" && filterYear === "") {
-      DataMainUpdate.value = DataMainOrig.value.filter(
-        (item: formListLeaveData) =>
-          item.status === filterStatus && item.type === filterType
-      );
-    } else if (
-      filterType !== "" &&
-      filterStatus !== "" &&
-      filterYear !== null
-    ) {
-      DataMainUpdate.value = DataMainOrig.value.filter(
-        (item: formListLeaveData) =>
-          item.type === filterType &&
-          item.status === filterStatus &&
-          item.year === filterYear
-      );
-    } else if (
-      filterType == "0" &&
-      filterStatus == "0" &&
-      filterYear !== null
-    ) {
-      DataMainUpdate.value = DataMainOrig.value;
-    }
-  };
+		if (filterType === "" && filterStatus === "" && filterYear === "") {
+			DataMainUpdate.value = DataMainOrig.value
+		} else if (filterType !== "" && filterStatus === "" && filterYear === "") {
+			DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.type === filterType)
+		} else if (filterType !== "" && filterStatus !== "" && filterYear === null) {
+			DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.type === filterType && item.status === filterStatus)
+		} else if (filterType !== "" && filterStatus === "" && filterYear !== "") {
+			DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.type === filterType && item.year === filterYear)
+		} else if (filterType === "" && filterStatus !== "" && filterYear === "") {
+			DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.status === filterStatus)
+		} else if (filterType === "" && filterStatus === "" && filterYear !== "") {
+			DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.year === filterYear)
+		} else if (filterType === "" && filterStatus !== "" && filterYear !== null) {
+			DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.status === filterStatus && item.year === filterYear)
+		} else if (filterType !== "" && filterStatus !== "" && filterYear === "") {
+			DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.status === filterStatus && item.type === filterType)
+		} else if (filterType !== "" && filterStatus !== "" && filterYear !== null) {
+			DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.type === filterType && item.status === filterStatus && item.year === filterYear)
+		} else if (filterType == "0" && filterStatus == "0" && filterYear !== null) {
+			DataMainUpdate.value = DataMainOrig.value
+		}
+	}
 
-  //--------------|ฟิลเตอร์|--------------------------------------//
-  const searchFilterTable = async () => {
-    rows.value = [];
+	//--------------|ฟิลเตอร์|--------------------------------------//
+	const searchFilterTable = async () => {
+		rows.value = []
 
-    if (LeaveType.value !== undefined && LeaveType.value !== null) {
-      await DataUpdate(
-        LeaveType.value === "0" ? "all" : LeaveType.value!,
-        LeaveStatus.value === "0" ? "all" : LeaveStatus.value!,
-        fiscalYearyear.value === "0" ? "all" : fiscalYearyear.value!
-      );
-      let filteredData = DataMainOrig.value;
-      if (LeaveType.value !== "0") {
-        filteredData = filteredData.filter(
-          (item: formListLeaveData) => item.type === LeaveType.value
-        );
-      }
-      if (LeaveStatus.value !== "0") {
-        filteredData = filteredData.filter(
-          (item: formListLeaveData) => item.status === LeaveStatus.value
-        );
-      }
-      if (fiscalYearyear.value !== "0") {
-        filteredData = filteredData.filter(
-          (item: formListLeaveData) => item.year === fiscalYearyear.value
-        );
-      }
-      const dataArr: formListLeaveData[] = filteredData.map((e: any) => ({
-        no: e.no,
-        type: convertType(e.type) || "",
-        status: convertStatus(e.status) || "",
-        date: date2Thai(new Date(e.date)),
-        year: e.year !== undefined ? e.year : "",
-      }));
-      rows.value = dataArr;
-    }
-  };
+		if (LeaveType.value !== undefined && LeaveType.value !== null) {
+			await DataUpdate(LeaveType.value === "0" ? "all" : LeaveType.value!, LeaveStatus.value === "0" ? "all" : LeaveStatus.value!, fiscalYearyear.value === "0" ? "all" : fiscalYearyear.value!)
+			let filteredData = DataMainOrig.value
+			if (LeaveType.value !== "0") {
+				filteredData = filteredData.filter((item: formListLeaveData) => item.type === LeaveType.value)
+			}
+			if (LeaveStatus.value !== "0") {
+				filteredData = filteredData.filter((item: formListLeaveData) => item.status === LeaveStatus.value)
+			}
+			if (fiscalYearyear.value !== "0") {
+				filteredData = filteredData.filter((item: formListLeaveData) => item.year === fiscalYearyear.value)
+			}
+			const dataArr: formListLeaveData[] = filteredData.map((e: any) => ({
+				no: e.no,
+				type: convertType(e.type) || "",
+				status: convertStatus(e.status) || "",
+				date: date2Thai(new Date(e.date)),
+				year: e.year !== undefined ? e.year : "",
+			}))
+			rows.value = dataArr
+		}
+	}
 
-  /**
-   * 
-   * @param val 
-   * @param update 
-   * @param refData 
-   */
-  const filterSelector = (val: any, update: Function, refData: string) => {
-    switch (refData) {
-      case "fiscalyearOP":
-        update(() => {
-          fiscalyearOP.value = fiscalyearOP.value.filter(
-            (v: any) => v.name.indexOf(val) > -1
-          );
-        });
-        break;
-      case "LeaveTypeOption":
-        update(() => {
-          typeOptions.value = typeOptions.value.filter(
-            (v: any) => v.name.indexOf(val) > -1
-          );
-        });
-        break;
-      case "LeaveStatusOption":
-        update(() => {
-          statusOptions.value = statusOptions.value.filter(
-            (v: any) => v.name.indexOf(val) > -1
-          );
-        });
-        break;
-      default:
-        break;
-    }
-  };
+	/**
+	 *ฟังก์ชั่นเลือก selector ที่ใช่ในการฟิลเตอร์
+	 * @param val ค่าที่ต้องการฟิลเตอร์
+	 * @param update  อัพเดทค่า
+	 * @param refData ดาต้าที่ต้องการฟิลเตอร์
+	 */
+	const filterSelector = (val: any, update: Function, refData: string) => {
+		switch (refData) {
+			case "fiscalyearOP":
+				update(() => {
+					fiscalyearOP.value = fiscalyearOP.value.filter((v: any) => v.name.indexOf(val) > -1)
+				})
+				break
+			case "LeaveTypeOption":
+				update(() => {
+					typeOptions.value = typeOptions.value.filter((v: any) => v.name.indexOf(val) > -1)
+				})
+				break
+			case "LeaveStatusOption":
+				update(() => {
+					statusOptions.value = statusOptions.value.filter((v: any) => v.name.indexOf(val) > -1)
+				})
+				break
+			default:
+				break
+		}
+	}
 
-  /** filter ปี */
-  const fiscalyearOP = ref<OptionData[]>([
-    { id: "0", name: "ทั้งหมด" },
-    { id: "1", name: "2566" },
-    { id: "2", name: "2567" },
-    { id: "2", name: "2568" },
-  ]);
+	/** filter ปี */
+	const fiscalyearOP = ref<OptionData[]>([
+		{ id: "0", name: "ทั้งหมด" },
+		{ id: "1", name: "2566" },
+		{ id: "2", name: "2567" },
+		{ id: "2", name: "2568" },
+	])
 
-  /**
-   * 
-   * @param val 
-   * @returns 
-   */
-  function convertType(val: string) {
-    if (val == "0") return "ทั้งหมด";
-    else return options.value.find((x) => x.id == val)?.name;
-  }
+	/**
+	 *ฟังก์ชั่นค้นหาแสดง option ของประเภทการลา
+	 * @param val ค่าที่เเสดง
+	 * @returns option ทั้งหมด
+	 */
+	function convertType(val: string) {
+		if (val == "0") return "ทั้งหมด"
+		else return options.value.find(x => x.id == val)?.name
+	}
 
-  /** รายการประเภทการลาของ ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน*/
-  const optionsSpecific = ref([
-    { id: "s0", name: "ลาไปศึกษาต่อ" },
-    { id: "s1", name: "ลาฝึกอบรม" },
-    { id: "s2", name: "ลาปฎิบัติการวิจัย" },
-    { id: "s3", name: "ลาดูงาน" },
-  ]);
+	/** รายการประเภทการลาของ ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน*/
+	const optionsSpecific = ref([
+		{ id: "s0", name: "ลาไปศึกษาต่อ" },
+		{ id: "s1", name: "ลาฝึกอบรม" },
+		{ id: "s2", name: "ลาปฎิบัติการวิจัย" },
+		{ id: "s3", name: "ลาดูงาน" },
+	])
 
-  /** รายการประเภทการลาของ ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ*/
-  const optionsOrdination = ref([
-    { id: "0", name: "ลาอุปสมบท" },
-    { id: "1", name: "ลาประกอบพิธีฮัจย์" },
-  ]);
+	/** รายการประเภทการลาของ ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ*/
+	const optionsOrdination = ref([
+		{ id: "0", name: "ลาอุปสมบท" },
+		{ id: "1", name: "ลาประกอบพิธีฮัจย์" },
+	])
 
-  /** รายการข้อมูลประเภทใบลา */
-  const options = ref<OptionData[]>([
-    { id: "1", name: "ลาป่วย" },
-    { id: "2", name: "ลากิจส่วนตัว" },
-    { id: "3", name: "ลาคลอดบุตร" },
-    { id: "4", name: "ลาไปช่วยเหลือภริยาที่คลอดบุตร" },
-    { id: "5", name: "ลาพักผ่อน" },
-    { id: "6", name: "ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ" },
-    { id: "7", name: "ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล" },
-    { id: "8", name: "ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน" },
-    { id: "9", name: "ลาไปปฎิบัติงานในองค์การระหว่างประเทศ" },
-    { id: "10", name: "ลาติดตามคู่สมรส" },
-    { id: "11", name: "ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ" },
-  ]);
+	/** รายการข้อมูลประเภทใบลา */
+	const options = ref<OptionData[]>([
+		{ id: "1", name: "ลาป่วย" },
+		{ id: "2", name: "ลากิจส่วนตัว" },
+		{ id: "3", name: "ลาคลอดบุตร" },
+		{ id: "4", name: "ลาไปช่วยเหลือภริยาที่คลอดบุตร" },
+		{ id: "5", name: "ลาพักผ่อน" },
+		{ id: "6", name: "ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ" },
+		{ id: "7", name: "ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล" },
+		{ id: "8", name: "ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน" },
+		{ id: "9", name: "ลาไปปฎิบัติงานในองค์การระหว่างประเทศ" },
+		{ id: "10", name: "ลาติดตามคู่สมรส" },
+		{ id: "11", name: "ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ" },
+	])
 
-  /** filter ประเภทการลา */
-  const typeOptions = ref<OptionData[]>([
-    { id: "0", name: "ทั้งหมด" },
-    ...options.value,
-  ]);
+	/** filter ประเภทการลา */
+	const typeOptions = ref<OptionData[]>([{ id: "0", name: "ทั้งหมด" }, ...options.value])
 
-  /** สถานะของการลา */
-  const statusOptions = ref<OptionData[]>([
-    { id: "0", name: "ทั้งหมด" },
-    { id: "1", name: "อนุมัติ" },
-    { id: "2", name: "ไม่อนุมัติ" },
-    { id: "3", name: "อยู่ระหว่างดำเนินการ" },
-    { id: "4", name: "ใหม่" },
-  ]);
+	/** สถานะของการลา */
+	const statusOptions = ref<OptionData[]>([
+		{ id: "0", name: "ทั้งหมด" },
+		{ id: "1", name: "อนุมัติ" },
+		{ id: "2", name: "ไม่อนุมัติ" },
+		{ id: "3", name: "อยู่ระหว่างดำเนินการ" },
+		{ id: "4", name: "ใหม่" },
+	])
 
-  /**
-   *
-   * @param val
-   * @returns
-   */
-  function convertStatus(val: string) {
-    if (val == "0") return "ทั้งหมด";
-    else return statusOptions.value.find((x) => x.id == val)?.name;
-  }
+	/**
+	 *ฟังก์ชั่นค้นหาแสดง option ของสถานะ
+	 * @param val ค่าที่เเสดง
+	 * @returns option ทั้งหมด
+	 */
+	function convertStatus(val: string) {
+		if (val == "0") return "ทั้งหมด"
+		else return statusOptions.value.find(x => x.id == val)?.name
+	}
 
-  /** data table filter & column ของรายการลา */
-  const visibleColumns = ref<String[]>(["no", "type", "date", "status"]);
-  const columns = ref<QTableProps["columns"]>([
-    {
-      name: "no",
-      align: "left",
-      label: "ลำดับ",
-      sortable: true,
-      field: "no",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px; width:5%;",
-    },
-    {
-      name: "type",
-      align: "left",
-      label: "ประเภทการลา",
-      sortable: true,
-      field: "type",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px; width:15%;",
-    },
-    {
-      name: "date",
-      align: "left",
-      label: "วันที่ยื่นใบลา",
-      sortable: true,
-      field: "date",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px; width:15%;",
-    },
-    {
-      name: "status",
-      align: "left",
-      label: "สถานะ",
-      sortable: true,
-      field: "status",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px; width:10%;",
-    },
-  ]);
+	/** data table filter & column ของรายการลา */
+	const visibleColumns = ref<String[]>(["no", "type", "date", "status"])
+	const columns = ref<QTableProps["columns"]>([
+		{
+			name: "no",
+			align: "left",
+			label: "ลำดับ",
+			sortable: true,
+			field: "no",
+			headerStyle: "font-size: 14px",
+			style: "font-size: 14px; width:5%;",
+		},
+		{
+			name: "type",
+			align: "left",
+			label: "ประเภทการลา",
+			sortable: true,
+			field: "type",
+			headerStyle: "font-size: 14px",
+			style: "font-size: 14px; width:15%;",
+		},
+		{
+			name: "date",
+			align: "left",
+			label: "วันที่ยื่นใบลา",
+			sortable: true,
+			field: "date",
+			headerStyle: "font-size: 14px",
+			style: "font-size: 14px; width:15%;",
+		},
+		{
+			name: "status",
+			align: "left",
+			label: "สถานะ",
+			sortable: true,
+			field: "status",
+			headerStyle: "font-size: 14px",
+			style: "font-size: 14px; width:10%;",
+		},
+	])
 
-  /**
-   *
-   * @param item
-   * @param subitem
-   */
-  function typeConvert(item: string, subitem: any) {
-    // console.log('first',item)
-    if (item !== "6" && item !== "8") {
-      typeLeave.value = convertSubtitle(item);
-    } else if (item === "6") {
-      typeLeave.value = convertSubtitleInfo(subitem);
-    } else if (item === "8") {
-      typeLeave.value = convertSubtitleInfo2(subitem);
-    }
-  }
+	/**
+	 *ฟังก์ชั่นแปลงประเภทแบบฟอร์มลา
+	 * @param item ประเภทแบบฟอร์ม
+	 * @param subitem ประเภทแบบฟอร์มย่อย
+	 */
+	function typeConvert(item: string, subitem: any) {
+		// console.log('first',item)
+		if (item !== "6" && item !== "8") {
+			typeLeave.value = convertSubtitle(item)
+		} else if (item === "6") {
+			typeLeave.value = convertSubtitleInfo(subitem)
+		} else if (item === "8") {
+			typeLeave.value = convertSubtitleInfo2(subitem)
+		}
+	}
 
-  /**
-   *
-   * @param val
-   * @returns
-   */
-  function convertSubtitle(val: string) {
-    return options.value.find((x) => x.id == val)?.name;
-  }
+	/**
+	 *ฟังก์ชั่นแปลงประเภทแบบฟอร์มลา ลาอุปสมบท/ลาประกอบพิธีฮัจย์
+	 * @param val ค่า string
+	 * @returns ส่งค่าที่แปลงแล้ว
+	 */
+	function convertSubtitle(val: string) {
+		return options.value.find(x => x.id == val)?.name
+	}
 
-  /**
-   *
-   * @param val
-   * @returns
-   */
-  function convertSubtitleInfo(val: string) {
-    return optionsOrdination.value.find((x) => x.id == val)?.name;
-  }
+	/**
+	 *ฟังก์ชั่นแปลงประเภทแบบฟอร์มลา ลาอุปสมบท/ลาประกอบพิธีฮัจย์ ย่อย
+	 * @param val ค่า string
+	 * @returns ส่งค่าที่แปลงแล้ว
+	 */
+	function convertSubtitleInfo(val: string) {
+		return optionsOrdination.value.find(x => x.id == val)?.name
+	}
 
-  /**
-   *
-   * @param val
-   * @returns
-   */
-  function convertSubtitleInfo2(val: string) {
-    return optionsSpecific.value.find((x) => x.id == val)?.name;
-  }
+	/**
+	 *ฟังก์ชั่นแปลง ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน
+	 * @param val ค่า string
+	 * @returns ส่งค่าที่แปลงแล้ว
+	 */
+	function convertSubtitleInfo2(val: string) {
+		return optionsSpecific.value.find(x => x.id == val)?.name
+	}
 
-  return {
-    tabValue,
-    typeOptions,
-    optionsSpecific,
-    statusOptions,
-    DataMain,
-    DataMainUpdate,
-    DataUpdate,
-    DataMainOrig,
-    visibleColumns,
-    columns,
-    rows,
-    LeaveType,
-    LeaveStatus,
-    fecthList,
-    filterSelector,
-    searchFilterTable,
-    fiscalyearOP,
-    fiscalYearyear,
-    options,
-    optionsOrdination,
-    typeConvert,
-    typeLeave,
-  };
-});
+	return {
+		tabValue,
+		typeOptions,
+		optionsSpecific,
+		statusOptions,
+		DataMain,
+		DataMainUpdate,
+		DataUpdate,
+		DataMainOrig,
+		visibleColumns,
+		columns,
+		rows,
+		LeaveType,
+		LeaveStatus,
+		fecthList,
+		filterSelector,
+		searchFilterTable,
+		fiscalyearOP,
+		fiscalYearyear,
+		options,
+		optionsOrdination,
+		typeConvert,
+		typeLeave,
+	}
+})