From bb875da9445c5c46ea4adf8835556b8e5719e9ae Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Thu, 11 Jan 2024 10:49:01 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=E0=B8=9F?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=A3=E0=B9=8C=E0=B8=A1=E0=B8=81=E0=B8=B2=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/FormLeave/01_SickForm.vue      |  898 ++++++------
 .../components/FormLeave/03_Birth.vue         |  796 ++++++-----
 .../FormLeave/04_HelpWifeBirthForm.vue        |  973 +++++++------
 .../components/FormLeave/05_VacationForm.vue  |  917 ++++++------
 .../FormLeave/06_OrdinationForm.vue           | 1197 +++++++++-------
 .../components/FormLeave/07_HajjForm.vue      |  791 +++++-----
 .../components/FormLeave/08_MilitaryForm.vue  |  918 ++++++------
 .../components/FormLeave/09_StudyForm.vue     | 1147 ++++++++-------
 .../components/FormLeave/10_TrainForm.vue     | 1125 ++++++++-------
 .../FormLeave/11_WorkInternationalForm.vue    |  826 ++++++-----
 .../FormLeave/12_FollowSpouseForm.vue         | 1267 +++++++++--------
 .../FormLeave/13_RehabilitationForm.vue       |  784 +++++-----
 .../interface/request/FollowSpouseForm.ts     |    8 +-
 src/modules/05_leave/views/AddPage.vue        |  350 +++--
 src/modules/05_leave/views/EditPage.vue       |  719 ++++++----
 src/modules/05_leave/views/Main.vue           |    5 +-
 src/stores/mixin.ts                           |  125 +-
 src/style/quasar-variables.sass               |   13 +
 18 files changed, 7231 insertions(+), 5628 deletions(-)

diff --git a/src/modules/05_leave/components/FormLeave/01_SickForm.vue b/src/modules/05_leave/components/FormLeave/01_SickForm.vue
index d51d125..27ea45d 100644
--- a/src/modules/05_leave/components/FormLeave/01_SickForm.vue
+++ b/src/modules/05_leave/components/FormLeave/01_SickForm.vue
@@ -1,459 +1,559 @@
 <script setup lang="ts">
-import { ref, reactive, watch, computed, onMounted } from "vue"
-import type { FormData, FormRef } from "@/modules/05_leave/interface/request/SickForm"
-import { useCounterMixin } from "@/stores/mixin"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useQuasar } from "quasar"
-import { useRouter } from "vue-router"
+import { ref, reactive, watch, computed, onMounted } from "vue";
+import type {
+  FormData,
+  FormRef,
+} from "@/modules/05_leave/interface/request/SickForm";
+import { useCounterMixin } from "@/stores/mixin";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
 
 /** Use */
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const mixin = useCounterMixin()
-const router = useRouter()
-const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails, showLoader, hideLoader } = mixin
-const edit = ref<boolean>(true)
+const dataStore = useLeaveStore();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const router = useRouter();
+const {
+  date2Thai,
+  dateToISO,
+  dialogConfirm,
+  success,
+  messageError,
+  fails,
+  showLoader,
+  hideLoader,
+} = mixin;
+const edit = ref<boolean>(true);
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-	onConfirm: {
-		type: Function,
-		default: () => "",
-	},
-})
+  data: {
+    type: Object,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+});
 
 /** ข้อมูล v-model ของฟอร์ม */
 const formDataSick = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leaveRange: "ALL",
-	leaveTotal: "",
-	leaveLast: null,
-	leaveNumber: "",
-	leaveAddress: "",
-	leaveDetail: "",
-	leaveDocument: [],
-})
-const leaveDocumentList = ref<any>()
+  type: dataStore.typeId,
+  leaveWrote: "",
+  leaveStartDate: null,
+  leaveEndDate: null,
+  leaveRange: "ALL",
+  leaveTotal: "",
+  leaveLast: null,
+  leaveNumber: "",
+  leaveAddress: "",
+  leaveDetail: "",
+  leaveDocument: [],
+});
+const leaveDocumentList = ref<any>();
 
 /** ตัวแปร ref สำหรับแสดง validate */
-const leaveWroteRef = ref<object | null>(null)
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leaveRangeRef = ref<object | null>(null)
-const leaveTotalRef = ref<object | null>(null)
-const leaveLastRef = ref<object | null>(null)
-const leaveNumberRef = ref<object | null>(null)
-const leaveAddressRef = ref<object | null>(null)
-const leaveDetailRef = ref<object | null>(null)
+const leaveWroteRef = ref<object | null>(null);
+const leaveStartDateRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const leaveRangeRef = ref<object | null>(null);
+const leaveTotalRef = ref<object | null>(null);
+const leaveLastRef = ref<object | null>(null);
+const leaveNumberRef = ref<object | null>(null);
+const leaveAddressRef = ref<object | null>(null);
+const leaveDetailRef = ref<object | null>(null);
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const FormRef: FormRef = {
-	leaveWrote: leaveWroteRef,
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leaveRange: leaveRangeRef,
-	leaveTotal: leaveTotalRef,
-	leaveNumber: leaveNumberRef,
-	leaveAddress: leaveAddressRef,
-	leaveDetail: leaveDetailRef,
-}
+  leaveWrote: leaveWroteRef,
+  leaveStartDate: leaveStartDateRef,
+  leaveEndDate: leaveEndDateRef,
+  leaveRange: leaveRangeRef,
+  leaveTotal: leaveTotalRef,
+  leaveNumber: leaveNumberRef,
+  leaveAddress: leaveAddressRef,
+  leaveDetail: leaveDetailRef,
+};
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
+const nameFile = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
 async function fileUploadDoc(files: any) {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
 }
 
 /**
  * function รีเซทค่า leaveStartDate เเละ leaveEndDate
  */
 function resetDate() {
-	if (formDataSick.leaveRange === "MORNING" || formDataSick.leaveRange === "AFTERNOON") {
-		formDataSick.leaveStartDate = null
-		formDataSick.leaveEndDate = null
-	}
-	console.log("testnull")
+  if (
+    formDataSick.leaveRange === "MORNING" ||
+    formDataSick.leaveRange === "AFTERNOON"
+  ) {
+    formDataSick.leaveStartDate = null;
+    formDataSick.leaveEndDate = null;
+  }
 }
 
 /** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
 function onValidate() {
-	const hasError = []
-	for (const key in FormRef) {
-		if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
-			const property = FormRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		const formData = new FormData()
+  const hasError = [];
+  for (const key in FormRef) {
+    if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
+      const property = FormRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    const formData = new FormData();
 
-		formDataSick.leaveDocument.forEach((file: File) => {
-			formData.append("leaveDocument", file)
-		})
-		// formData.append("leaveDocument", formDataSick.leaveDocument)
-		formData.append("type", formDataSick.type)
-		formData.append("leaveRange", formDataSick.leaveRange)
-		formData.append("leaveStartDate", dateToISO(formDataSick.leaveStartDate))
-		formData.append("leaveEndDate", dateToISO(formDataSick.leaveEndDate))
-		formData.append("leaveWrote", formDataSick.leaveWrote)
-		formData.append("leaveAddress", formDataSick.leaveAddress)
-		formData.append("leaveNumber", formDataSick.leaveNumber)
-		formData.append("leaveDetail", formDataSick.leaveDetail)
-		props.onSubmit(formData)
-	}
+    formDataSick.leaveDocument.forEach((file: File) => {
+      formData.append("leaveDocument", file);
+    });
+    // formData.append("leaveDocument", formDataSick.leaveDocument)
+    formData.append("type", formDataSick.type);
+    formData.append("leaveRange", formDataSick.leaveRange);
+    formData.append("leaveStartDate", dateToISO(formDataSick.leaveStartDate));
+    formData.append("leaveEndDate", dateToISO(formDataSick.leaveEndDate));
+    formData.append("leaveWrote", formDataSick.leaveWrote);
+    formData.append("leaveAddress", formDataSick.leaveAddress);
+    formData.append("leaveNumber", formDataSick.leaveNumber);
+    formData.append("leaveDetail", formDataSick.leaveDetail);
+    props.onSubmit(formData, isLeave.value);
+  }
 }
 /**
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
-const leaveEndDateRules = ref([val => !!val || `${"กรุณาเลือกลาถึงวันที่"}`])
-const isLeave = ref<boolean>(true)
+const isLeave = ref<boolean>(true);
 async function fetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), {
-			type: dataStore.typeId ?? null,
-			StartLeaveDate: formDataSick.leaveStartDate ?? null,
-			EndLeaveDate: formDataSick.leaveEndDate ?? null,
-		})
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataSick.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				this.leaveEndDateRules = [val => !!val || `${"กรุณาเลือกลาถึงวันที่"}`]
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-				this.leaveEndDateRules = [val => false || `${"ไม่สามารถลาได้"}`]
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataSick.leaveStartDate ?? null,
+      EndLeaveDate: formDataSick.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      formDataSick.leaveTotal =
+        data.totalDate - data.sumDateWork - data.sumDateHoliday;
+      isLeave.value = data.isLeave;
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
 }
 
 /**
  * ฟังก์ชั่นแปลงครึ่งวัน/ทั้งวัน
  */
 const isReadOnly = computed(() => {
-	const conditionleaveRange = formDataSick.leaveRange === "MORNING" || formDataSick.leaveRange === "AFTERNOON"
-	if (conditionleaveRange) {
-		formDataSick.leaveEndDate = formDataSick.leaveStartDate // Set formDataSick.leaveEndDate to null
-		formDataSick.leaveTotal = 0.5
-	} else {
-		formDataSick.leaveTotal = null
-	}
-	return conditionleaveRange
-})
+  const conditionleaveRange =
+    formDataSick.leaveRange === "MORNING" ||
+    formDataSick.leaveRange === "AFTERNOON";
+  if (conditionleaveRange) {
+    formDataSick.leaveEndDate = formDataSick.leaveStartDate; // Set formDataSick.leaveEndDate to null
+    formDataSick.leaveTotal = 0.5;
+  } else {
+    formDataSick.leaveTotal = null;
+  }
+  return conditionleaveRange;
+});
 
 function inputEdit(val: boolean) {
-	return {
-		"full-width cursor-pointer ": val,
-		"full-width cursor-pointer inputgreen": !val,
-	}
+  return {
+    "full-width cursor-pointer ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
 }
 
-function resetEndDate(type: string) {
-	if (type === "day") {
-		formDataSick.EndLeaveDate === null
-	}
-}
+const dateEndInputStyle = computed(() => {
+  return !isLeave.value ? "input-alert" : "";
+});
 
-const statusCheck = ref<any>("")
+const statusCheck = ref<any>("");
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 onMounted(() => {
-	if (props.data) {
-		formDataSick.leaveWrote = props.data.leaveWrote
-		formDataSick.leaveStartDate = new Date(props.data.leaveStartDate)
-		formDataSick.leaveEndDate = new Date(props.data.leaveEndDate)
-		formDataSick.contractTel = props.data.contractTel
-		formDataSick.leaveTotal = props.data.leaveTotal
-		formDataSick.leaveNumber = props.data.leaveNumber
-		formDataSick.leaveDetail = props.data.leaveDetail
-		leaveDocumentList.value = props.data.leaveDocument
-		formDataSick.leaveAddress = props.data.leaveAddress
-		statusCheck.value = props.data.status
-		console.log(leaveDocumentList.value.length)
-		console.log(statusCheck.value != "NEW")
-	} else {
-		statusCheck.value = "START"
-		console.log(statusCheck.value != "NEW")
-	}
-})
+  if (props.data) {
+    formDataSick.leaveWrote = props.data.leaveWrote;
+    formDataSick.leaveStartDate = new Date(props.data.leaveStartDate);
+    formDataSick.leaveEndDate = new Date(props.data.leaveEndDate);
+    formDataSick.contractTel = props.data.contractTel;
+    formDataSick.leaveTotal = props.data.leaveTotal;
+    formDataSick.leaveNumber = props.data.leaveNumber;
+    formDataSick.leaveDetail = props.data.leaveDetail;
+    leaveDocumentList.value = props.data.leaveDocument;
+    formDataSick.leaveAddress = props.data.leaveAddress;
+    statusCheck.value = props.data.status;
+    console.log(leaveDocumentList.value.length);
+    console.log(statusCheck.value != "NEW");
+  } else {
+    statusCheck.value = "START";
+    console.log(statusCheck.value != "NEW");
+  }
+});
 </script>
 
 <!-- ฟอร์มลาป่วย และลากิจส่วนตัว -->
 <template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent.stop="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="col-12 row q-pa-sm q-col-gutter-sm">
-				<q-input
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					ref="leaveWroteRef"
-					for="leaveWroteRef"
-					dense
-					hide-bottom-space
-					bg-color="white"
-					outlined
-					v-model="formDataSick.leaveWrote"
-					label="เขียนที่"
-					:readonly="!edit || statusCheck === 'NEW'"
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
+  <div style="display: flex; align-items: center">
+    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+  </div>
+  <form @submit.prevent.stop="onValidate">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="col-12 row q-pa-sm q-col-gutter-sm">
+        <q-input
+          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          ref="leaveWroteRef"
+          for="leaveWroteRef"
+          dense
+          hide-bottom-space
+          bg-color="white"
+          outlined
+          v-model="formDataSick.leaveWrote"
+          label="เขียนที่"
+          :readonly="!edit || statusCheck === 'NEW'"
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
 
-				<div class="col-12 col-md-4 col-sm-12">
-					<q-radio v-model="formDataSick.leaveRange" :disable="!edit || statusCheck === 'NEW'" val="ALL" label="ลาทั้งวัน" checked-icon="task_alt" />
-					<q-radio v-model="formDataSick.leaveRange" :disable="!edit || statusCheck === 'NEW'" val="MORNING" label="ลาครึ่งวันเช้า" checked-icon="task_alt" @update:model-value="resetDate" />
-					<q-radio
-						v-model="formDataSick.leaveRange"
-						:disable="!edit || statusCheck === 'NEW'"
-						val="AFTERNOON"
-						label="ลาครึ่งวันบ่าย"
-						checked-icon="task_alt"
-						@update:model-value="resetDate"
-					/>
-				</div>
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<datepicker
-							class="col-12 col-md-3 col-sm-6"
-							menu-class-name="modalfix"
-							v-model="formDataSick.leaveStartDate"
-							:locale="'th'"
-							autoApply
-							borderless
-							:enableTimePicker="false"
-							week-start="0"
-							:readonly="!edit || statusCheck === 'NEW'"
-							@update:model-value="formDataSick.leaveEndDate = null"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									outlined
-									dense
-									ref="leaveStartDateRef"
-									for="leaveStartDateRef"
-									hide-bottom-space
-									:readonly="!edit || statusCheck === 'NEW'"
-									bg-color="white"
-									class="full-width cursor-pointer inputgreen"
-									:model-value="formDataSick.leaveStartDate != null ? date2Thai(formDataSick.leaveStartDate) : null"
-									:label="`${'ลาตั้งแต่วันที่'}`"
-									:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-									style="color: var(--q-primary)"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
+        <div class="col-12 col-md-4 col-sm-12">
+          <q-radio
+            v-model="formDataSick.leaveRange"
+            :disable="!edit || statusCheck === 'NEW'"
+            val="ALL"
+            label="ลาทั้งวัน"
+            checked-icon="task_alt"
+          />
+          <q-radio
+            v-model="formDataSick.leaveRange"
+            :disable="!edit || statusCheck === 'NEW'"
+            val="MORNING"
+            label="ลาครึ่งวันเช้า"
+            checked-icon="task_alt"
+            @update:model-value="resetDate"
+          />
+          <q-radio
+            v-model="formDataSick.leaveRange"
+            :disable="!edit || statusCheck === 'NEW'"
+            val="AFTERNOON"
+            label="ลาครึ่งวันบ่าย"
+            checked-icon="task_alt"
+            @update:model-value="resetDate"
+          />
+        </div>
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <datepicker
+              class="col-12 col-md-3 col-sm-6"
+              menu-class-name="modalfix"
+              v-model="formDataSick.leaveStartDate"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+              :readonly="!edit || statusCheck === 'NEW'"
+              @update:model-value="formDataSick.leaveEndDate = null"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  ref="leaveStartDateRef"
+                  for="leaveStartDateRef"
+                  hide-bottom-space
+                  :readonly="!edit || statusCheck === 'NEW'"
+                  bg-color="white"
+                  class="full-width cursor-pointer inputgreen"
+                  :model-value="
+                    formDataSick.leaveStartDate != null
+                      ? date2Thai(formDataSick.leaveStartDate)
+                      : null
+                  "
+                  :label="`${'ลาตั้งแต่วันที่'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+                  style="color: var(--q-primary)"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
 
-						<datepicker
-							class="col-12 col-md-3 col-sm-6"
-							menu-class-name="modalfix"
-							v-model="formDataSick.leaveEndDate"
-							:locale="'th'"
-							autoApply
-							borderless
-							:enableTimePicker="false"
-							week-start="0"
-							:readonly="!formDataSick.leaveStartDate"
-							@update:model-value="fetchCheck(), isReadOnly"
-							:min-date="formDataSick.leaveStartDate"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									outlined
-									dense
-									ref="leaveEndDateRef"
-									for="leaveEndDateRef"
-									hide-bottom-space
-									bg-color="white"
-									:readonly="!formDataSick.leaveStartDate"
-									:class="inputEdit(isReadOnly)"
-									:model-value="formDataSick.leaveEndDate != null ? date2Thai(formDataSick.leaveEndDate) : null"
-									:label="`${'ลาถึงวันที่'}`"
-									:rules="leaveEndDateRules"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-						<q-input
-							class="col-12 col-md-3 col-sm-6"
-							dense
-							bg-color="white"
-							outlined
-							ref="leaveTotalRef"
-							for="leaveTotalRef"
-							v-model="formDataSick.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="dataStore.leaveLast"
-							label="ลาครั้งสุดท้ายเมื่อวันที่"
-							readonly
-							hide-bottom-space
-							bg-color="white"
-						/>
-					</div>
-				</div>
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<q-input
-							class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-							dense
-							outlined
-							ref="leaveNumberRef"
-							for="leaveNumberRef"
-							v-model="formDataSick.leaveNumber"
-							mask="(###)-###-####"
-							hide-bottom-space
-							bg-color="white"
-							unmasked-value
-							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-							:readonly="!edit || statusCheck === 'NEW'"
-							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
-						/>
+            <datepicker
+              class="col-12 col-md-3 col-sm-6"
+              menu-class-name="modalfix"
+              v-model="formDataSick.leaveEndDate"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+              :readonly="!formDataSick.leaveStartDate"
+              @update:model-value="fetchCheck(), isReadOnly"
+              :min-date="formDataSick.leaveStartDate"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  ref="leaveEndDateRef"
+                  for="leaveEndDateRef"
+                  hide-bottom-space
+                  bg-color="white"
+                  :readonly="!formDataSick.leaveStartDate"
+                  :class="inputEdit(isReadOnly)"
+                  :model-value="
+                    formDataSick.leaveEndDate != null
+                      ? date2Thai(formDataSick.leaveEndDate)
+                      : null
+                  "
+                  :label="`${'ลาถึงวันที่'}`"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+            <q-input
+              :bottom-slots="!isLeave ? true : false"
+              :color="!isLeave ? 'red' : 'black'"
+              :bg-color="!isLeave ? 'red-2' : 'white'"
+              :border-color="!isLeave ? 'red' : 'gray'"
+              :input-class="!isLeave ? dateEndInputStyle : ''"
+              class="col-12 col-md-3 col-sm-6"
+              dense
+              outlined
+              ref="leaveTotalRef"
+              for="leaveTotalRef"
+              v-model="formDataSick.leaveTotal"
+              label="จำนวนวันที่ลา"
+              readonly
+            >
+              <template v-slot:hint>
+                <span style="color: red">
+                  {{ !isLeave ? "จำนวนวันลาเกินที่กำหนด" : "" }}
+                </span>
+              </template>
+            </q-input>
 
-						<q-input
-							class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
-							dense
-							outlined
-							ref="leaveAddressRef"
-							for="leaveAddressRef"
-							v-model="formDataSick.leaveAddress"
-							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-							:readonly="!edit || statusCheck === 'NEW'"
-							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
-							hide-bottom-space
-							bg-color="white"
-						/>
-					</div>
-				</div>
-				<q-input
-					type="textarea"
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					outlined
-					ref="leaveDetailRef"
-					for="leaveDetailRef"
-					v-model="formDataSick.leaveDetail"
-					label="รายละเอียด"
-					:readonly="!edit || statusCheck === 'NEW'"
-					bg-color="white"
-				/>
-				<div class="full-width" v-if="statusCheck != 'NEW'">
-					<div class="q-col-gutter-sm row">
-						<!-- multiple -->
-						<q-file for="leaveDocumentRef" v-model="formDataSick.leaveDocument" dense label="เอกสารประกอบ" outlined use-chips multiple bg-color="white" class="col-12 q-pl-sm col-12">
-							<template v-slot:prepend>
-								<q-icon name="attach_file" color="primary" />
-							</template>
-						</q-file>
-					</div>
-				</div>
-				<div class="col-12" v-if="data">
-					<div class="col-12 col-md-12 col-sm-12">
-						<q-card bordered flat>
-							<!-- <div class="col-12">
+            <q-input
+              class="col-12 col-md-3 col-sm-6"
+              dense
+              outlined
+              ref="leaveLastRef"
+              for="leaveLastRef"
+              v-model="dataStore.leaveLast"
+              label="ลาครั้งสุดท้ายเมื่อวันที่"
+              readonly
+              hide-bottom-space
+              bg-color="white"
+            />
+          </div>
+        </div>
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <q-input
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              dense
+              outlined
+              ref="leaveNumberRef"
+              for="leaveNumberRef"
+              v-model="formDataSick.leaveNumber"
+              mask="(###)-###-####"
+              hide-bottom-space
+              bg-color="white"
+              unmasked-value
+              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+              :readonly="!edit || statusCheck === 'NEW'"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
+              ]"
+            />
+
+            <q-input
+              class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
+              dense
+              outlined
+              ref="leaveAddressRef"
+              for="leaveAddressRef"
+              v-model="formDataSick.leaveAddress"
+              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+              :readonly="!edit || statusCheck === 'NEW'"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
+              ]"
+              hide-bottom-space
+              bg-color="white"
+            />
+          </div>
+        </div>
+        <q-input
+          type="textarea"
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          dense
+          outlined
+          ref="leaveDetailRef"
+          for="leaveDetailRef"
+          v-model="formDataSick.leaveDetail"
+          label="รายละเอียด"
+          :readonly="!edit || statusCheck === 'NEW'"
+          bg-color="white"
+        />
+        <div class="full-width" v-if="statusCheck != 'NEW'">
+          <div class="q-col-gutter-sm row">
+            <!-- multiple -->
+            <q-file
+              for="leaveDocumentRef"
+              v-model="formDataSick.leaveDocument"
+              dense
+              label="เอกสารประกอบ"
+              outlined
+              use-chips
+              multiple
+              bg-color="white"
+              class="col-12 q-pl-sm col-12"
+            >
+              <template v-slot:prepend>
+                <q-icon name="attach_file" color="primary" />
+              </template>
+            </q-file>
+          </div>
+        </div>
+        <div class="col-12" v-if="data">
+          <div class="col-12 col-md-12 col-sm-12">
+            <q-card bordered flat>
+              <!-- <div class="col-12">
 								<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ{{ leaveDocumentList }} </q-card>
 							</div> -->
-							<q-list separator v-if="leaveDocumentList && leaveDocumentList.length > 0">
-								<q-item v-for="(document, index) in leaveDocumentList" :key="index" class="q-my-xs">
-									<q-item-section>
-										<q-item-label class="row items-baseline">
-											<div class="col">
-												{{ "เอกสารแนบฉบับที่" + (index + 1) }}
-											</div>
-											<q-btn class="col-6" :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
-												<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
-											</q-btn>
-										</q-item-label>
-									</q-item-section>
-								</q-item>
-							</q-list>
-							<div class="col-12" v-else>
-								<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
-							</div>
-						</q-card>
-					</div>
-				</div>
+              <q-list
+                separator
+                v-if="leaveDocumentList && leaveDocumentList.length > 0"
+              >
+                <q-item
+                  v-for="(document, index) in leaveDocumentList"
+                  :key="index"
+                  class="q-my-xs"
+                >
+                  <q-item-section>
+                    <q-item-label class="row items-baseline">
+                      <div class="col">
+                        {{ "เอกสารแนบฉบับที่ " + (index + 1) }}
+                      </div>
+                      <q-btn
+                        :href="document"
+                        target="_blank"
+                        outline
+                        color="blue"
+                        label="ดาวน์โหลด"
+                        size="12px"
+                      >
+                        <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+                      </q-btn>
+                    </q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+              <div class="col-12" v-else>
+                <q-card class="q-pa-md" bordered>
+                  ไม่มีรายการเอกสารประกอบ
+                </q-card>
+              </div>
+            </q-card>
+          </div>
+        </div>
 
-				<div class="col-12 col-sm-6 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="(file, index) in leaveDocumentList" :key="index" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.name }}
-									</q-item-label>
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
+        <div class="col-12 col-sm-6 row" v-if="!edit">
+          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+            <div class="q-pl-sm text-weight-bold text-dark">
+              เอกสารเพิ่มเติม
+            </div>
+          </div>
+          <q-card bordered flat class="full-width">
+            <q-list separator>
+              <q-item
+                v-for="(file, index) in leaveDocumentList"
+                :key="index"
+                class="q-my-xs"
+              >
+                <q-item-section>
+                  <q-item-label class="full-width ellipsis">
+                    {{ file.name }}
+                  </q-item-label>
+                  <q-item-label caption> </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </div>
+    </q-card>
 
-		<q-separator class="q-mt-sm" />
+    <q-separator class="q-mt-sm" />
 
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn v-if="!props.data || props.data.status == 'DRAFT'" id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"
-				><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
-			>
-			<q-btn v-if="data && statusCheck != 'NEW'" id="onSubmit" type="button" unelevated dense class="q-px-md items-center q-ml-sm" color="primary" label="ยื่นใบลา" @click="onConfirm"
-				><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
-			>
-		</div>
-	</form>
+    <div class="row col-12 q-pt-md">
+      <q-space />
+      <q-btn
+        v-if="!props.data || props.data.status == 'DRAFT'"
+        id="onSubmit"
+        type="submit"
+        unelevated
+        dense
+        class="q-px-md items-center btnBlue"
+        label="บันทึก"
+        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+      >
+      <q-btn
+        v-if="data && statusCheck != 'NEW'"
+        id="onSubmit"
+        type="button"
+        unelevated
+        dense
+        class="q-px-md items-center q-ml-sm"
+        color="primary"
+        label="ยื่นใบลา"
+        @click="onConfirm()"
+        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+      >
+    </div>
+  </form>
 </template>
diff --git a/src/modules/05_leave/components/FormLeave/03_Birth.vue b/src/modules/05_leave/components/FormLeave/03_Birth.vue
index e361107..a25336e 100644
--- a/src/modules/05_leave/components/FormLeave/03_Birth.vue
+++ b/src/modules/05_leave/components/FormLeave/03_Birth.vue
@@ -1,358 +1,385 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted } from "vue"
-import { useQuasar } from "quasar"
-import type { FormRef } from "@/modules/05_leave/interface/request/BirthForm"
-import { useCounterMixin } from "@/stores/mixin"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRouter } from "vue-router"
+import { ref, reactive, onMounted, computed } from "vue";
+import { useQuasar } from "quasar";
+import type { FormRef } from "@/modules/05_leave/interface/request/BirthForm";
+import { useCounterMixin } from "@/stores/mixin";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter } from "vue-router";
 
 /** Use */
-const dataStore = useLeaveStore()
-const mixin = useCounterMixin()
-const router = useRouter()
-const $q = useQuasar()
-const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } = mixin
-const edit = ref<boolean>(true)
+const dataStore = useLeaveStore();
+const mixin = useCounterMixin();
+const router = useRouter();
+const $q = useQuasar();
+const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } =
+  mixin;
+const edit = ref<boolean>(true);
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-	onConfirm: {
-		type: Function,
-		default: () => "",
-	},
-})
+  data: {
+    type: Object,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+});
 
 /** ข้อมูล v-model ของฟอร์ม */
 const formDataBirth = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leaveTotal: "",
-	leaveLast: "",
-	leaveNumber: "",
-	leaveAddress: "",
-	leaveDetail: "",
-	leaveDocument: [],
-})
+  type: dataStore.typeId,
+  leaveWrote: "",
+  leaveStartDate: null,
+  leaveEndDate: null,
+  leaveTotal: "",
+  leaveLast: "",
+  leaveNumber: "",
+  leaveAddress: "",
+  leaveDetail: "",
+  leaveDocument: [],
+});
 
 /** ตัวแปร ref สำหรับแสดง validate */
-const leaveWroteRef = ref<object | null>(null)
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leaveTotalRef = ref<object | null>(null)
-const leaveNumberRef = ref<object | null>(null)
-const leaveAddressRef = ref<object | null>(null)
-const leaveDetailRef = ref<object | null>(null)
-const leaveDocumentRef = ref<object | null>(null)
+const leaveWroteRef = ref<object | null>(null);
+const leaveStartDateRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const leaveTotalRef = ref<object | null>(null);
+const leaveNumberRef = ref<object | null>(null);
+const leaveAddressRef = ref<object | null>(null);
+const leaveDetailRef = ref<object | null>(null);
+const leaveDocumentRef = ref<object | null>(null);
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const FormRef: FormRef = {
-	leaveWrote: leaveWroteRef,
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leaveTotal: leaveTotalRef,
-	leaveNumber: leaveNumberRef,
-	leaveAddress: leaveAddressRef,
-	leaveDetail: leaveDetailRef,
-	leaveDocument: leaveDocumentRef,
-}
+  leaveWrote: leaveWroteRef,
+  leaveStartDate: leaveStartDateRef,
+  leaveEndDate: leaveEndDateRef,
+  leaveTotal: leaveTotalRef,
+  leaveNumber: leaveNumberRef,
+  leaveAddress: leaveAddressRef,
+  leaveDetail: leaveDetailRef,
+  leaveDocument: leaveDocumentRef,
+};
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
+const nameFile = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
 async function fileUploadDoc(files: any) {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
 }
 
 /** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
 function onValidate() {
-	const hasError = []
-	for (const key in FormRef) {
-		if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
-			const property = FormRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		const formData = new FormData()
-		formDataBirth.leaveDocument.forEach((file: File) => {
-			formData.append("leaveDocument", file)
-		})
-		// formData.append("leaveDocument", formDataBirth.leaveDocument);
-		formData.append("type", formDataBirth.type)
-		formData.append("leaveStartDate", dateToISO(formDataBirth.leaveStartDate))
-		formData.append("leaveEndDate", dateToISO(formDataBirth.leaveEndDate))
-		formData.append("leaveWrote", formDataBirth.leaveWrote)
-		formData.append("leaveAddress", formDataBirth.leaveAddress)
-		formData.append("leaveNumber", formDataBirth.leaveNumber)
-		formData.append("leaveDetail", formDataBirth.leaveDetail)
+  const hasError = [];
+  for (const key in FormRef) {
+    if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
+      const property = FormRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    const formData = new FormData();
+    formDataBirth.leaveDocument.forEach((file: File) => {
+      formData.append("leaveDocument", file);
+    });
+    // formData.append("leaveDocument", formDataBirth.leaveDocument);
+    formData.append("type", formDataBirth.type);
+    formData.append("leaveStartDate", dateToISO(formDataBirth.leaveStartDate));
+    formData.append("leaveEndDate", dateToISO(formDataBirth.leaveEndDate));
+    formData.append("leaveWrote", formDataBirth.leaveWrote);
+    formData.append("leaveAddress", formDataBirth.leaveAddress);
+    formData.append("leaveNumber", formDataBirth.leaveNumber);
+    formData.append("leaveDetail", formDataBirth.leaveDetail);
 
-		props.onSubmit(formData)
-	}
+    props.onSubmit(formData, isLeave.value);
+  }
 }
 
-const leaveEndDateRules = ref([val => !!val || `${"กรุณาเลือกลาถึงวันที่"}`])
 /**
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
-const isLeave = ref<boolean>(true)
+const isLeave = ref<boolean>(true);
 async function fetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), {
-			type: dataStore.typeId ?? null,
-			StartLeaveDate: formDataBirth.leaveStartDate ?? null,
-			EndLeaveDate: formDataBirth.leaveEndDate ?? null,
-		})
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataBirth.leaveTotal = data.totalDate
-				this.leaveEndDateRules = [val => !!val || `${"กรุณาเลือกลาถึงวันที่"}`]
-				// formDataBirth.leaveLast = data.sumDateWork
-			} else {
-				this.leaveEndDateRules = [val => false || `${"ไม่สามารถลาได้"}`]
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataBirth.leaveStartDate ?? null,
+      EndLeaveDate: formDataBirth.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+      formDataBirth.leaveTotal = data.totalDate;
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
 }
 
-const leaveDocumentList = ref<any>()
-const statusCheck = ref<any>("")
+const dateEndInputStyle = computed(() => {
+  return !isLeave.value ? "input-alert" : "";
+});
+
+const leaveDocumentList = ref<any>();
+const statusCheck = ref<any>("");
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 onMounted(() => {
-	if (props.data) {
-		formDataBirth.leaveWrote = props.data.leaveWrote
-		formDataBirth.leaveStartDate = props.data.leaveStartDate
-		formDataBirth.leaveEndDate = props.data.leaveEndDate
-		formDataBirth.leaveTotal = props.data.leaveTotal
-		formDataBirth.leaveNumber = props.data.leaveNumber
-		formDataBirth.leaveAddress = props.data.leaveAddress
-		formDataBirth.leaveDetail = props.data.leaveDetail
-		leaveDocumentList.value = props.data.leaveDocument
-		statusCheck.value = props.data.status
-	}
-})
+  if (props.data) {
+    formDataBirth.leaveWrote = props.data.leaveWrote;
+    formDataBirth.leaveStartDate = props.data.leaveStartDate;
+    formDataBirth.leaveEndDate = props.data.leaveEndDate;
+    formDataBirth.leaveTotal = props.data.leaveTotal;
+    formDataBirth.leaveNumber = props.data.leaveNumber;
+    formDataBirth.leaveAddress = props.data.leaveAddress;
+    formDataBirth.leaveDetail = props.data.leaveDetail;
+    leaveDocumentList.value = props.data.leaveDocument;
+    statusCheck.value = props.data.status;
+  }
+});
 </script>
 
 <!-- ฟอร์มลาคลอดบุตร-->
 <template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent.stop="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="col-12 row q-pa-sm q-col-gutter-sm">
-				<q-input
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					ref="leaveWroteRef"
-					for="leaveWroteRef"
-					dense
-					outlined
-					v-model="formDataBirth.leaveWrote"
-					label="เขียนที่"
-					hide-bottom-space
-					bg-color="white"
-					:readonly="!edit || statusCheck === 'NEW'"
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
+  <div style="display: flex; align-items: center">
+    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+  </div>
+  <form @submit.prevent.stop="onValidate">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="col-12 row q-pa-sm q-col-gutter-sm">
+        <q-input
+          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          ref="leaveWroteRef"
+          for="leaveWroteRef"
+          dense
+          outlined
+          v-model="formDataBirth.leaveWrote"
+          label="เขียนที่"
+          hide-bottom-space
+          bg-color="white"
+          :readonly="!edit || statusCheck === 'NEW'"
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
 
-				<datepicker
-					class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataBirth.leaveStartDate"
-					:locale="'th'"
-					autoApply
-					hide-bottom-space
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					:readonly="!edit || statusCheck === 'NEW'"
-					@update:model-value="formDataBirth.leaveEndDate = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveStartDateRef"
-							for="leaveStartDateRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!edit || statusCheck === 'NEW'"
-							class="full-width datepicker"
-							:model-value="formDataBirth.leaveStartDate != null ? date2Thai(formDataBirth.leaveStartDate) : null"
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
+        <datepicker
+          class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataBirth.leaveStartDate"
+          :locale="'th'"
+          autoApply
+          hide-bottom-space
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          :readonly="!edit || statusCheck === 'NEW'"
+          @update:model-value="formDataBirth.leaveEndDate = null"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="leaveStartDateRef"
+              for="leaveStartDateRef"
+              hide-bottom-space
+              bg-color="white"
+              :readonly="!edit || statusCheck === 'NEW'"
+              class="full-width datepicker"
+              :model-value="
+                formDataBirth.leaveStartDate != null
+                  ? date2Thai(formDataBirth.leaveStartDate)
+                  : null
+              "
+              :label="`${'ลาตั้งแต่วันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
 
-				<datepicker
-					class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataBirth.leaveEndDate"
-					:locale="'th'"
-					autoApply
-					@update:model-value="fetchCheck()"
-					borderless
-					hide-bottom-space
-					:enableTimePicker="false"
-					week-start="0"
-					:readonly="!formDataBirth.leaveStartDate"
-					:min-date="formDataBirth.leaveStartDate"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveEndDateRef"
-							for="leaveEndDateRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!formDataBirth.leaveStartDate"
-							class="full-width datepicker"
-							:model-value="formDataBirth.leaveEndDate != null ? date2Thai(formDataBirth.leaveEndDate) : null"
-							:label="`${'ลาถึงวันที่'}`"
-							:rules="leaveEndDateRules"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-				<q-input
-					class="col-12 col-md-3 col-sm-6"
-					dense
-					outlined
-					ref="leaveTotalRef"
-					for="leaveTotalRef"
-					v-model="formDataBirth.leaveTotal"
-					label="จำนวนวันที่ลา"
-					bg-color="white"
-					readonly
-					hide-bottom-space
-				/>
-				<q-input
-					class="col-12 col-md-3 col-sm-6"
-					dense
-					outlined
-					ref="leaveLastRef"
-					for="leaveLastRef"
-					v-model="dataStore.leaveLast"
-					label="ลาครั้งสุดท้ายเมื่อวันที่"
-					readonly
-					hide-bottom-space
-					bg-color="white"
-				/>
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<q-input
-							class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
-							dense
-							outlined
-							hide-bottom-space
-							bg-color="white"
-							ref="leaveNumberRef"
-							for="leaveNumberRef"
-							v-model="formDataBirth.leaveNumber"
-							mask="(###)-###-####"
-							unmasked-value
-							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-							:readonly="!edit || statusCheck === 'NEW'"
-							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
-						/>
+        <datepicker
+          class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataBirth.leaveEndDate"
+          :locale="'th'"
+          autoApply
+          @update:model-value="fetchCheck()"
+          borderless
+          hide-bottom-space
+          :enableTimePicker="false"
+          week-start="0"
+          :readonly="!formDataBirth.leaveStartDate"
+          :min-date="formDataBirth.leaveStartDate"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="leaveEndDateRef"
+              for="leaveEndDateRef"
+              hide-bottom-space
+              :readonly="!formDataBirth.leaveStartDate"
+              class="full-width datepicker"
+              bg-color="white"
+              :model-value="
+                formDataBirth.leaveEndDate != null
+                  ? date2Thai(formDataBirth.leaveEndDate)
+                  : null
+              "
+              :label="`${'ลาถึงวันที่'}`"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+        <q-input
+          class="col-12 col-md-3 col-sm-6"
+          dense
+          outlined
+          ref="leaveTotalRef"
+          for="leaveTotalRef"
+          v-model="formDataBirth.leaveTotal"
+          label="จำนวนวันที่ลา"
+          readonly
+          :bottom-slots="!isLeave ? true : false"
+          :color="!isLeave ? 'red' : 'black'"
+          :bg-color="!isLeave ? 'red-2' : 'white'"
+          :border-color="!isLeave ? 'red' : 'gray'"
+          :input-class="!isLeave ? dateEndInputStyle : ''"
+        >
+          <template v-slot:hint>
+            <span style="color: red">
+              {{ !isLeave ? "จำนวนวันลาเกินที่กำหนด" : "" }}
+            </span>
+          </template>
+        </q-input>
+        <q-input
+          class="col-12 col-md-3 col-sm-6"
+          dense
+          outlined
+          ref="leaveLastRef"
+          for="leaveLastRef"
+          v-model="dataStore.leaveLast"
+          label="ลาครั้งสุดท้ายเมื่อวันที่"
+          readonly
+          hide-bottom-space
+          bg-color="white"
+        />
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <q-input
+              class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
+              dense
+              outlined
+              hide-bottom-space
+              bg-color="white"
+              ref="leaveNumberRef"
+              for="leaveNumberRef"
+              v-model="formDataBirth.leaveNumber"
+              mask="(###)-###-####"
+              unmasked-value
+              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+              :readonly="!edit || statusCheck === 'NEW'"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
+              ]"
+            />
 
-						<q-input
-							class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
-							dense
-							outlined
-							hide-bottom-space
-							bg-color="white"
-							ref="leaveAddressRef"
-							for="leaveAddressRef"
-							v-model="formDataBirth.leaveAddress"
-							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-							:readonly="!edit || statusCheck === 'NEW'"
-							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
-						/>
-					</div>
-				</div>
-				<q-input
-					type="textarea"
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					outlined
-					bg-color="white"
-					ref="leaveDetailRef"
-					for="leaveDetailRef"
-					v-model="formDataBirth.leaveDetail"
-					label="รายละเอียด"
-					:readonly="!edit || statusCheck === 'NEW'"
-				/>
-				<div class="full-width" v-if="statusCheck != 'NEW'">
-					<div class="q-col-gutter-sm row">
-						<!-- multiple -->
-						<q-file
-							for="leaveDocumentRef"
-							hide-bottom-space
-							v-model="formDataBirth.leaveDocument"
-							@added="fileUploadDoc"
-							dense
-							bg-color="white"
-							label="เอกสารประกอบ"
-							outlined
-							multiple
-							use-chips
-							class="q-pl-sm col-12"
-						>
-							<template v-slot:prepend>
-								<q-icon name="attach_file" color="primary" />
-							</template>
-						</q-file>
-					</div>
-				</div>
-				<!-- <div class="col-12" v-if="formDataBirth.leaveDocument.length == 0">
+            <q-input
+              class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
+              dense
+              outlined
+              hide-bottom-space
+              bg-color="white"
+              ref="leaveAddressRef"
+              for="leaveAddressRef"
+              v-model="formDataBirth.leaveAddress"
+              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+              :readonly="!edit || statusCheck === 'NEW'"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
+              ]"
+            />
+          </div>
+        </div>
+        <q-input
+          type="textarea"
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          dense
+          outlined
+          bg-color="white"
+          ref="leaveDetailRef"
+          for="leaveDetailRef"
+          v-model="formDataBirth.leaveDetail"
+          label="รายละเอียด"
+          :readonly="!edit || statusCheck === 'NEW'"
+        />
+        <div class="full-width" v-if="statusCheck != 'NEW'">
+          <div class="q-col-gutter-sm row">
+            <!-- multiple -->
+            <q-file
+              for="leaveDocumentRef"
+              hide-bottom-space
+              v-model="formDataBirth.leaveDocument"
+              @added="fileUploadDoc"
+              dense
+              bg-color="white"
+              label="เอกสารประกอบ"
+              outlined
+              multiple
+              use-chips
+              class="q-pl-sm col-12"
+            >
+              <template v-slot:prepend>
+                <q-icon name="attach_file" color="primary" />
+              </template>
+            </q-file>
+          </div>
+        </div>
+        <!-- <div class="col-12" v-if="formDataBirth.leaveDocument.length == 0">
 					<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
 				</div> -->
-				<!-- <div class="col-12" v-if="formDataBirth.leaveDocument.length">
+        <!-- <div class="col-12" v-if="formDataBirth.leaveDocument.length">
 					<q-card bordered>
 						<q-list separator>
 							<q-item v-for="(file, index) in formDataBirth.leaveDocument" :key="index" class="q-my-xs">
@@ -366,60 +393,99 @@ onMounted(() => {
 						</q-list>
 					</q-card>
 				</div> -->
-				<div class="col-12 row" v-if="data">
-					<!-- <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+        <div class="col-12 row" v-if="data">
+          <!-- <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
 						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
 					</div> -->
-					<q-card bordered flat class="full-width">
-						<q-list separator v-if="leaveDocumentList && leaveDocumentList.length > 0">
-							<q-item v-for="(document, index) in leaveDocumentList" :key="index" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="row items-baseline">
-										<div class="col">
-											{{ "เอกสารแนบฉบับที่" + (index + 1) }}
-										</div>
-										<q-btn class="col-6" :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
-											<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
-										</q-btn>
-									</q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-						<div class="col-12" v-else>
-							<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
-						</div>
-					</q-card>
-				</div>
-				<div class="col-12 col-sm-6 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="(file, index) in leaveDocumentList" :key="index" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.name }}
-									</q-item-label>
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
+          <q-card bordered flat class="full-width">
+            <q-list
+              separator
+              v-if="leaveDocumentList && leaveDocumentList.length > 0"
+            >
+              <q-item
+                v-for="(document, index) in leaveDocumentList"
+                :key="index"
+                class="q-my-xs"
+              >
+                <q-item-section>
+                  <q-item-label class="row items-baseline">
+                    <div class="col">
+                      {{ "เอกสารแนบฉบับที่" + (index + 1) }}
+                    </div>
+                    <q-btn
+                      class="col-6"
+                      :href="document"
+                      target="_blank"
+                      outline
+                      color="blue"
+                      label="ดาวน์โหลด"
+                      size="12px"
+                    >
+                      <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+                    </q-btn>
+                  </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+            <div class="col-12" v-else>
+              <q-card class="q-pa-md" bordered>
+                ไม่มีรายการเอกสารประกอบ
+              </q-card>
+            </div>
+          </q-card>
+        </div>
+        <div class="col-12 col-sm-6 row" v-if="!edit">
+          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+            <div class="q-pl-sm text-weight-bold text-dark">
+              เอกสารเพิ่มเติม
+            </div>
+          </div>
+          <q-card bordered flat class="full-width">
+            <q-list separator>
+              <q-item
+                v-for="(file, index) in leaveDocumentList"
+                :key="index"
+                class="q-my-xs"
+              >
+                <q-item-section>
+                  <q-item-label class="full-width ellipsis">
+                    {{ file.name }}
+                  </q-item-label>
+                  <q-item-label caption> </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </div>
+    </q-card>
 
-		<q-separator class="q-mt-sm" />
+    <q-separator class="q-mt-sm" />
 
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn v-if="!props.data || props.data.status == 'DRAFT'" id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"
-				><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
-			>
-			<q-btn v-if="data && statusCheck != 'NEW'" id="onSubmit" type="button" unelevated dense class="q-px-md items-center q-ml-sm" color="primary" label="ยื่นใบลา" @click="onConfirm"
-				><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
-			>
-		</div>
-	</form>
+    <div class="row col-12 q-pt-md">
+      <q-space />
+      <q-btn
+        v-if="!props.data || props.data.status == 'DRAFT'"
+        id="onSubmit"
+        type="submit"
+        unelevated
+        dense
+        class="q-px-md items-center btnBlue"
+        label="บันทึก"
+        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+      >
+      <q-btn
+        v-if="data && statusCheck != 'NEW'"
+        id="onSubmit"
+        type="button"
+        unelevated
+        dense
+        class="q-px-md items-center q-ml-sm"
+        color="primary"
+        label="ยื่นใบลา"
+        @click="onConfirm()"
+        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+      >
+    </div>
+  </form>
 </template>
diff --git a/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue b/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
index e9546b1..5c5ba12 100644
--- a/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
+++ b/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
@@ -1,483 +1,584 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted } from "vue"
-import type { FormData, FormRef } from "@/modules/05_leave/interface/request/HelpWifeForm"
-import { useCounterMixin } from "@/stores/mixin"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useQuasar } from "quasar"
-import { useRouter } from "vue-router"
+import { ref, reactive, onMounted, computed } from "vue";
+import type {
+  FormData,
+  FormRef,
+} from "@/modules/05_leave/interface/request/HelpWifeForm";
+import { useCounterMixin } from "@/stores/mixin";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
 
 /** Use */
-const dataStore = useLeaveStore()
-const mixin = useCounterMixin()
-const router = useRouter()
-const $q = useQuasar()
-const { date2Thai, calculateDurationYmd, dateToISO, dialogConfirm, fails, success, messageError } = mixin
-const edit = ref<boolean>(true)
+const dataStore = useLeaveStore();
+const mixin = useCounterMixin();
+const router = useRouter();
+const $q = useQuasar();
+const {
+  date2Thai,
+  calculateDurationYmd,
+  dateToISO,
+  dialogConfirm,
+  fails,
+  success,
+  messageError,
+} = mixin;
+const edit = ref<boolean>(true);
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-	onConfirm: {
-		type: Function,
-		default: () => "",
-	},
-})
+  data: {
+    type: Object,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+});
 
 /** ข้อมูล v-model ของฟอร์ม */
 const formDataHelpWife = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	wifeDayName: "",
-	wifeDayDateBorn: null,
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leaveTotal: "",
-	leaveNumber: "",
-	leaveAddress: "",
-	leaveDetail: "",
-	leaveDocument: [],
-})
+  type: dataStore.typeId,
+  leaveWrote: "",
+  wifeDayName: "",
+  wifeDayDateBorn: null,
+  leaveStartDate: null,
+  leaveEndDate: null,
+  leaveTotal: "",
+  leaveNumber: "",
+  leaveAddress: "",
+  leaveDetail: "",
+  leaveDocument: [],
+});
 
 /** ตัวแปร ref สำหรับแสดง validate */
-const leaveWroteRef = ref<object | null>(null)
-const wifeDayNameRef = ref<object | null>(null)
-const wifeDayDateBornRef = ref<object | null>(null)
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leaveTotalRef = ref<object | null>(null)
-const leaveNumberRef = ref<object | null>(null)
-const leaveAddressRef = ref<object | null>(null)
-const leaveDetailRef = ref<object | null>(null)
-const leaveDocumentRef = ref<object | null>(null)
+const leaveWroteRef = ref<object | null>(null);
+const wifeDayNameRef = ref<object | null>(null);
+const wifeDayDateBornRef = ref<object | null>(null);
+const leaveStartDateRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const leaveTotalRef = ref<object | null>(null);
+const leaveNumberRef = ref<object | null>(null);
+const leaveAddressRef = ref<object | null>(null);
+const leaveDetailRef = ref<object | null>(null);
+const leaveDocumentRef = ref<object | null>(null);
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const FormRef: FormRef = {
-	leaveWrote: leaveWroteRef,
-	wifeDayName: wifeDayNameRef,
-	wifeDayDateBorn: wifeDayDateBornRef,
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leaveTotal: leaveTotalRef,
-	leaveNumber: leaveNumberRef,
-	leaveAddress: leaveAddressRef,
-	leaveDetail: leaveDetailRef,
-	leaveDocument: leaveDocumentRef,
-}
+  leaveWrote: leaveWroteRef,
+  wifeDayName: wifeDayNameRef,
+  wifeDayDateBorn: wifeDayDateBornRef,
+  leaveStartDate: leaveStartDateRef,
+  leaveEndDate: leaveEndDateRef,
+  leaveTotal: leaveTotalRef,
+  leaveNumber: leaveNumberRef,
+  leaveAddress: leaveAddressRef,
+  leaveDetail: leaveDetailRef,
+  leaveDocument: leaveDocumentRef,
+};
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
+const nameFile = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
 const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
 
 /** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
 function onValidate() {
-	const hasError = []
-	for (const key in FormRef) {
-		if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
-			const property = FormRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		const formData = new FormData()
-		formDataHelpWife.leaveDocument.forEach((file: File) => {
-			formData.append("leaveDocument", file)
-		})
-		formData.append("leaveDocument", formDataHelpWife.leaveDocument)
-		formData.append("type", formDataHelpWife.type)
-		formData.append("leaveStartDate", dateToISO(formDataHelpWife.leaveStartDate))
-		formData.append("leaveEndDate", dateToISO(formDataHelpWife.leaveEndDate))
-		formData.append("leaveWrote", formDataHelpWife.leaveWrote)
-		formData.append("leaveAddress", formDataHelpWife.leaveAddress)
-		formData.append("leaveNumber", formDataHelpWife.leaveNumber)
-		formData.append("leaveDetail", formDataHelpWife.leaveDetail)
-		formData.append("wifeDayName", formDataHelpWife.wifeDayName)
-		formData.append("wifeDayDateBorn", dateToISO(formDataHelpWife.wifeDayDateBorn))
-		props.onSubmit(formData)
-	}
+  const hasError = [];
+  for (const key in FormRef) {
+    if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
+      const property = FormRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    const formData = new FormData();
+    formDataHelpWife.leaveDocument.forEach((file: File) => {
+      formData.append("leaveDocument", file);
+    });
+    formData.append("leaveDocument", formDataHelpWife.leaveDocument);
+    formData.append("type", formDataHelpWife.type);
+    formData.append(
+      "leaveStartDate",
+      dateToISO(formDataHelpWife.leaveStartDate)
+    );
+    formData.append("leaveEndDate", dateToISO(formDataHelpWife.leaveEndDate));
+    formData.append("leaveWrote", formDataHelpWife.leaveWrote);
+    formData.append("leaveAddress", formDataHelpWife.leaveAddress);
+    formData.append("leaveNumber", formDataHelpWife.leaveNumber);
+    formData.append("leaveDetail", formDataHelpWife.leaveDetail);
+    formData.append("wifeDayName", formDataHelpWife.wifeDayName);
+    formData.append(
+      "wifeDayDateBorn",
+      dateToISO(formDataHelpWife.wifeDayDateBorn)
+    );
+    props.onSubmit(formData, isLeave.value);
+  }
 }
 
 /**
  * function อัพเดทค่า LeaveTotal
  */
 function updateLeaveTotal() {
-	const newLeaveTotal = calculateDurationYmd(formDataHelpWife.leaveStartDate, formDataHelpWife.leaveEndDate)
-	formDataHelpWife.leaveTotal = newLeaveTotal
+  const newLeaveTotal = calculateDurationYmd(
+    formDataHelpWife.leaveStartDate,
+    formDataHelpWife.leaveEndDate
+  );
+  formDataHelpWife.leaveTotal = newLeaveTotal;
 }
 
 /**
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
-const leaveEndDateRules = ref([val => !!val || `${"กรุณาเลือกลาถึงวันที่"}`])
-const isLeave = ref<boolean>(true)
+const isLeave = ref<boolean>(true);
 async function fetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), {
-			type: dataStore.typeId ?? null,
-			StartLeaveDate: formDataHelpWife.leaveStartDate ?? null,
-			EndLeaveDate: formDataHelpWife.leaveEndDate ?? null,
-		})
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataHelpWife.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				this.leaveEndDateRules = [val => !!val || `${"กรุณาเลือกลาถึงวันที่"}`]
-				// formDataHelpWife.leaveLast = data.totalDate
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-				this.leaveEndDateRules = [val => false || `${"ไม่สามารถลาได้"}`]
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataHelpWife.leaveStartDate ?? null,
+      EndLeaveDate: formDataHelpWife.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+      formDataHelpWife.leaveTotal =
+        data.totalDate - data.sumDateWork - data.sumDateHoliday;
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
 }
 
-const leaveDocumentList = ref<any>()
-const statusCheck = ref<any>("")
+const dateEndInputStyle = computed(() => {
+  return !isLeave.value ? "input-alert" : "";
+});
+
+const leaveDocumentList = ref<any>();
+const statusCheck = ref<any>("");
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 onMounted(() => {
-	if (props.data) {
-		// console.log("data==>", props.data)
-		formDataHelpWife.leaveWrote = props.data.leaveWrote
-		formDataHelpWife.wifeDayName = props.data.wifeDayName
-		formDataHelpWife.wifeDayDateBorn = props.data.wifeDayDateBorn
-		formDataHelpWife.leaveStartDate = props.data.leaveStartDate
-		formDataHelpWife.leaveEndDate = props.data.leaveEndDate
-		formDataHelpWife.leaveTotal = props.data.leaveTotal
-		formDataHelpWife.leaveNumber = props.data.leaveNumber
-		formDataHelpWife.leaveAddress = props.data.leaveAddress
-		formDataHelpWife.leaveDetail = props.data.leaveDetail
-		leaveDocumentList.value = props.data.leaveDocument
-		statusCheck.value = props.data.status
-		// formDataHelpWife.leaveDocument = props.data.leaveDocument;
-	}
-})
+  if (props.data) {
+    // console.log("data==>", props.data)
+    formDataHelpWife.leaveWrote = props.data.leaveWrote;
+    formDataHelpWife.wifeDayName = props.data.wifeDayName;
+    formDataHelpWife.wifeDayDateBorn = props.data.wifeDayDateBorn;
+    formDataHelpWife.leaveStartDate = props.data.leaveStartDate;
+    formDataHelpWife.leaveEndDate = props.data.leaveEndDate;
+    formDataHelpWife.leaveTotal = props.data.leaveTotal;
+    formDataHelpWife.leaveNumber = props.data.leaveNumber;
+    formDataHelpWife.leaveAddress = props.data.leaveAddress;
+    formDataHelpWife.leaveDetail = props.data.leaveDetail;
+    leaveDocumentList.value = props.data.leaveDocument;
+    statusCheck.value = props.data.status;
+    // formDataHelpWife.leaveDocument = props.data.leaveDocument;
+  }
+});
 </script>
 
 <template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent.stop="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="col-12 row q-pa-sm q-col-gutter-sm">
-				<q-input
-					class="col-12 col-12 col-sm-12 cursor-pointer inputgreen"
-					ref="leaveWroteRef"
-					for="leaveWroteRef"
-					dense
-					outlined
-					hide-bottom-space
-					bg-color="white"
-					v-model="formDataHelpWife.leaveWrote"
-					label="เขียนที่"
-					:readonly="!edit || statusCheck === 'NEW'"
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-				<datepicker
-					class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataHelpWife.leaveStartDate"
-					:locale="'th'"
-					autoApply
-					hide-bottom-space
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					:readonly="!edit || statusCheck === 'NEW'"
-					@update:model-value="formDataHelpWife.leaveEndDate = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveStartDateRef"
-							for="leaveStartDateRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!edit || statusCheck === 'NEW'"
-							class="full-width datepicker"
-							:model-value="formDataHelpWife.leaveStartDate != null ? date2Thai(formDataHelpWife.leaveStartDate) : null"
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
+  <div style="display: flex; align-items: center">
+    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+  </div>
+  <form @submit.prevent.stop="onValidate">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="col-12 row q-pa-sm q-col-gutter-sm">
+        <q-input
+          class="col-12 col-12 col-sm-12 cursor-pointer inputgreen"
+          ref="leaveWroteRef"
+          for="leaveWroteRef"
+          dense
+          outlined
+          hide-bottom-space
+          bg-color="white"
+          v-model="formDataHelpWife.leaveWrote"
+          label="เขียนที่"
+          :readonly="!edit || statusCheck === 'NEW'"
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
+        <datepicker
+          class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataHelpWife.leaveStartDate"
+          :locale="'th'"
+          autoApply
+          hide-bottom-space
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          :readonly="!edit || statusCheck === 'NEW'"
+          @update:model-value="formDataHelpWife.leaveEndDate = null"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="leaveStartDateRef"
+              for="leaveStartDateRef"
+              hide-bottom-space
+              bg-color="white"
+              :readonly="!edit || statusCheck === 'NEW'"
+              class="full-width datepicker"
+              :model-value="
+                formDataHelpWife.leaveStartDate != null
+                  ? date2Thai(formDataHelpWife.leaveStartDate)
+                  : null
+              "
+              :label="`${'ลาตั้งแต่วันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
 
-				<datepicker
-					class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataHelpWife.leaveEndDate"
-					:locale="'th'"
-					autoApply
-					borderless
-					hide-bottom-space
-					:enableTimePicker="false"
-					@update:model-value="updateLeaveTotal, fetchCheck()"
-					week-start="0"
-					:readonly="!formDataHelpWife.leaveStartDate"
-					:min-date="formDataHelpWife.leaveStartDate"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveEndDateRef"
-							for="leaveEndDateRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!formDataHelpWife.leaveStartDate"
-							class="full-width datepicker"
-							:model-value="formDataHelpWife.leaveEndDate != null ? date2Thai(formDataHelpWife.leaveEndDate) : null"
-							:label="`${'ลาถึงวันที่'}`"
-							:rules="leaveEndDateRules"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-				<q-input
-					class="col-12 col-md-2 col-sm-6"
-					dense
-					outlined
-					ref="leaveTotalRef"
-					for="leaveTotalRef"
-					v-model="formDataHelpWife.leaveTotal"
-					label="จำนวนวันที่ลา"
-					readonly
-					hide-bottom-space
-					bg-color="white"
-				/>
-				<div class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen">
-					<q-input
-						class="col-12 col-sm-12"
-						ref="wifeDayNameRef"
-						for="wifeDayNameRef"
-						dense
-						bg-color="white"
-						outlined
-						hide-bottom-space
-						v-model="formDataHelpWife.wifeDayName"
-						label="ชื่อภรรยา"
-						:readonly="!edit || statusCheck === 'NEW'"
-						:rules="[val => !!val || `${'ชื่อภรรยา'}`]"
-					/>
-				</div>
+        <datepicker
+          class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataHelpWife.leaveEndDate"
+          :locale="'th'"
+          autoApply
+          borderless
+          hide-bottom-space
+          :enableTimePicker="false"
+          @update:model-value="updateLeaveTotal, fetchCheck()"
+          week-start="0"
+          :readonly="!formDataHelpWife.leaveStartDate"
+          :min-date="formDataHelpWife.leaveStartDate"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="leaveEndDateRef"
+              for="leaveEndDateRef"
+              hide-bottom-space
+              bg-color="white"
+              :readonly="!formDataHelpWife.leaveStartDate"
+              class="full-width datepicker"
+              :model-value="
+                formDataHelpWife.leaveEndDate != null
+                  ? date2Thai(formDataHelpWife.leaveEndDate)
+                  : null
+              "
+              :label="`${'ลาถึงวันที่'}`"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+        <q-input
+          class="col-12 col-md-2 col-sm-6"
+          dense
+          outlined
+          ref="leaveTotalRef"
+          for="leaveTotalRef"
+          v-model="formDataHelpWife.leaveTotal"
+          label="จำนวนวันที่ลา"
+          readonly
+          :bottom-slots="!isLeave ? true : false"
+          :color="!isLeave ? 'red' : 'black'"
+          :bg-color="!isLeave ? 'red-2' : 'white'"
+          :border-color="!isLeave ? 'red' : 'gray'"
+          :input-class="!isLeave ? dateEndInputStyle : ''"
+        >
+          <template v-slot:hint>
+            <span style="color: red">
+              {{ !isLeave ? "จำนวนวันลาเกินที่กำหนด" : "" }}
+            </span>
+          </template>
+        </q-input>
+        <div class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen">
+          <q-input
+            class="col-12 col-sm-12"
+            ref="wifeDayNameRef"
+            for="wifeDayNameRef"
+            dense
+            bg-color="white"
+            outlined
+            hide-bottom-space
+            v-model="formDataHelpWife.wifeDayName"
+            label="ชื่อภรรยา"
+            :readonly="!edit || statusCheck === 'NEW'"
+            :rules="[(val) => !!val || `${'ชื่อภรรยา'}`]"
+          />
+        </div>
 
-				<datepicker
-					class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataHelpWife.wifeDayDateBorn"
-					:locale="'th'"
-					autoApply
-					borderless
-					hide-bottom-space
-					:enableTimePicker="false"
-					week-start="0"
-					:readonly="!edit || statusCheck === 'NEW'"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="wifeDayDateBornRef"
-							for="wifeDayDateBornRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!edit || statusCheck === 'NEW'"
-							class="full-width datepicker"
-							:model-value="formDataHelpWife.wifeDayDateBorn != null ? date2Thai(formDataHelpWife.wifeDayDateBorn) : null"
-							:label="`${'วันที่คลอด'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกวันที่คลอด'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<q-input
-							class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
-							dense
-							outlined
-							ref="leaveNumberRef"
-							for="leaveNumberRef"
-							v-model="formDataHelpWife.leaveNumber"
-							mask="(###)-###-####"
-							unmasked-value
-							hide-bottom-space
-							bg-color="white"
-							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-							:readonly="!edit || statusCheck === 'NEW'"
-							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
-						/>
+        <datepicker
+          class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataHelpWife.wifeDayDateBorn"
+          :locale="'th'"
+          autoApply
+          borderless
+          hide-bottom-space
+          :enableTimePicker="false"
+          week-start="0"
+          :readonly="!edit || statusCheck === 'NEW'"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="wifeDayDateBornRef"
+              for="wifeDayDateBornRef"
+              hide-bottom-space
+              bg-color="white"
+              :readonly="!edit || statusCheck === 'NEW'"
+              class="full-width datepicker"
+              :model-value="
+                formDataHelpWife.wifeDayDateBorn != null
+                  ? date2Thai(formDataHelpWife.wifeDayDateBorn)
+                  : null
+              "
+              :label="`${'วันที่คลอด'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกวันที่คลอด'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <q-input
+              class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
+              dense
+              outlined
+              ref="leaveNumberRef"
+              for="leaveNumberRef"
+              v-model="formDataHelpWife.leaveNumber"
+              mask="(###)-###-####"
+              unmasked-value
+              hide-bottom-space
+              bg-color="white"
+              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+              :readonly="!edit || statusCheck === 'NEW'"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
+              ]"
+            />
 
-						<q-input
-							class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
-							dense
-							outlined
-							hide-bottom-space
-							bg-color="white"
-							ref="leaveAddressRef"
-							for="leaveAddressRef"
-							v-model="formDataHelpWife.leaveAddress"
-							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-							:readonly="!edit || statusCheck === 'NEW'"
-							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
-						/>
-					</div>
-				</div>
-				<q-input
-					hide-bottom-space
-					bg-color="white"
-					type="textarea"
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					outlined
-					ref="leaveDetailRef"
-					for="leaveDetailRef"
-					v-model="formDataHelpWife.leaveDetail"
-					label="รายละเอียด"
-					:readonly="!edit || statusCheck === 'NEW'"
-				/>
-				<div class="full-width" v-if="statusCheck != 'NEW'">
-					<div class="q-col-gutter-sm row">
-						<!-- multiple -->
-						<q-file
-							bg-color="white"
-							ref="leaveDocumentRef"
-							v-model="formDataHelpWife.leaveDocument"
-							@added="fileUploadDoc"
-							dense
-							label="เอกสารประกอบ"
-							outlined
-							use-chips
-							class="q-pl-sm col-12"
-						>
-							<template v-slot:prepend>
-								<q-icon name="attach_file" color="primary" />
-							</template>
-						</q-file>
-					</div>
-				</div>
-				<div class="col-12" v-if="data">
-					<div class="col-12 col-md-12 col-sm-12">
-						<q-card bordered>
-							<!-- <div class="col-12">
+            <q-input
+              class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
+              dense
+              outlined
+              hide-bottom-space
+              bg-color="white"
+              ref="leaveAddressRef"
+              for="leaveAddressRef"
+              v-model="formDataHelpWife.leaveAddress"
+              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+              :readonly="!edit || statusCheck === 'NEW'"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
+              ]"
+            />
+          </div>
+        </div>
+        <q-input
+          hide-bottom-space
+          bg-color="white"
+          type="textarea"
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          dense
+          outlined
+          ref="leaveDetailRef"
+          for="leaveDetailRef"
+          v-model="formDataHelpWife.leaveDetail"
+          label="รายละเอียด"
+          :readonly="!edit || statusCheck === 'NEW'"
+        />
+        <div class="full-width" v-if="statusCheck != 'NEW'">
+          <div class="q-col-gutter-sm row">
+            <!-- multiple -->
+            <q-file
+              bg-color="white"
+              ref="leaveDocumentRef"
+              v-model="formDataHelpWife.leaveDocument"
+              @added="fileUploadDoc"
+              dense
+              label="เอกสารประกอบ"
+              outlined
+              use-chips
+              class="q-pl-sm col-12"
+            >
+              <template v-slot:prepend>
+                <q-icon name="attach_file" color="primary" />
+              </template>
+            </q-file>
+          </div>
+        </div>
+        <div class="col-12" v-if="data">
+          <div class="col-12 col-md-12 col-sm-12">
+            <q-card bordered>
+              <!-- <div class="col-12">
 								<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ{{ leaveDocumentList }} </q-card>
 							</div> -->
-							<q-list separator v-if="leaveDocumentList && leaveDocumentList.length > 0">
-								<q-item v-for="(document, index) in leaveDocumentList" :key="index" class="q-my-xs">
-									<q-item-section>
-										<q-item-label class="row items-baseline">
-											<div class="col">
-												{{ "เอกสารแนบฉบับที่" + (index + 1) }}
-											</div>
-											<q-btn class="col-6" :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
-												<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
-											</q-btn>
-										</q-item-label>
-									</q-item-section>
-								</q-item>
-							</q-list>
-							<div class="col-12" v-else>
-								<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
-							</div>
-						</q-card>
-					</div>
-				</div>
-				<div class="col-12 col-sm-6 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="(file, index) in leaveDocumentList" :key="index" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.name }}
-									</q-item-label>
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-				<div class="col-12 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="(file, index) in formDataHelpWife.leaveDocument" :key="index" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.name }}
-									</q-item-label>
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
+              <q-list
+                separator
+                v-if="leaveDocumentList && leaveDocumentList.length > 0"
+              >
+                <q-item
+                  v-for="(document, index) in leaveDocumentList"
+                  :key="index"
+                  class="q-my-xs"
+                >
+                  <q-item-section>
+                    <q-item-label class="row items-baseline">
+                      <div class="col">
+                        {{ "เอกสารแนบฉบับที่" + (index + 1) }}
+                      </div>
+                      <q-btn
+                        class="col-6"
+                        :href="document"
+                        target="_blank"
+                        outline
+                        color="blue"
+                        label="ดาวน์โหลด"
+                        size="12px"
+                      >
+                        <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+                      </q-btn>
+                    </q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+              <div class="col-12" v-else>
+                <q-card class="q-pa-md" bordered>
+                  ไม่มีรายการเอกสารประกอบ
+                </q-card>
+              </div>
+            </q-card>
+          </div>
+        </div>
+        <div class="col-12 col-sm-6 row" v-if="!edit">
+          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+            <div class="q-pl-sm text-weight-bold text-dark">
+              เอกสารเพิ่มเติม
+            </div>
+          </div>
+          <q-card bordered flat class="full-width">
+            <q-list separator>
+              <q-item
+                v-for="(file, index) in leaveDocumentList"
+                :key="index"
+                class="q-my-xs"
+              >
+                <q-item-section>
+                  <q-item-label class="full-width ellipsis">
+                    {{ file.name }}
+                  </q-item-label>
+                  <q-item-label caption> </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+        <div class="col-12 row" v-if="!edit">
+          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+            <div class="q-pl-sm text-weight-bold text-dark">
+              เอกสารเพิ่มเติม
+            </div>
+          </div>
+          <q-card bordered flat class="full-width">
+            <q-list separator>
+              <q-item
+                v-for="(file, index) in formDataHelpWife.leaveDocument"
+                :key="index"
+                class="q-my-xs"
+              >
+                <q-item-section>
+                  <q-item-label class="full-width ellipsis">
+                    {{ file.name }}
+                  </q-item-label>
+                  <q-item-label caption> </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </div>
+    </q-card>
 
-		<q-separator class="q-mt-sm" />
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn v-if="!props.data || props.data.status == 'DRAFT'" id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"
-				><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
-			>
-			<q-btn v-if="data && statusCheck != 'NEW'" id="onSubmit" type="button" unelevated dense class="q-px-md items-center q-ml-sm" color="primary" label="ยื่นใบลา" @click="onConfirm"
-				><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
-			>
-		</div>
-	</form>
+    <q-separator class="q-mt-sm" />
+    <div class="row col-12 q-pt-md">
+      <q-space />
+      <q-btn
+        v-if="!props.data || props.data.status == 'DRAFT'"
+        id="onSubmit"
+        type="submit"
+        unelevated
+        dense
+        class="q-px-md items-center btnBlue"
+        label="บันทึก"
+        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+      >
+      <q-btn
+        v-if="data && statusCheck != 'NEW'"
+        id="onSubmit"
+        type="button"
+        unelevated
+        dense
+        class="q-px-md items-center q-ml-sm"
+        color="primary"
+        label="ยื่นใบลา"
+        @click="onConfirm()"
+        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+      >
+    </div>
+  </form>
 </template>
diff --git a/src/modules/05_leave/components/FormLeave/05_VacationForm.vue b/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
index 7f99cc0..0bd4dac 100644
--- a/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
@@ -1,464 +1,559 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, computed } from "vue"
-import type { FormData, FormRef } from "@/modules/05_leave/interface/request/VacationForm"
-import { useCounterMixin } from "@/stores/mixin"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useQuasar } from "quasar"
-import { useRouter } from "vue-router"
+import { ref, reactive, onMounted, computed } from "vue";
+import type {
+  FormData,
+  FormRef,
+} from "@/modules/05_leave/interface/request/VacationForm";
+import { useCounterMixin } from "@/stores/mixin";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
 
 /** Use */
-const $q = useQuasar()
-const dataStore = useLeaveStore()
-const mixin = useCounterMixin()
-const router = useRouter()
-const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } = mixin
-const edit = ref<boolean>(true)
+const $q = useQuasar();
+const dataStore = useLeaveStore();
+const mixin = useCounterMixin();
+const router = useRouter();
+const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } =
+  mixin;
+const edit = ref<boolean>(true);
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-	onConfirm: {
-		type: Function,
-		default: () => "",
-	},
-})
+  data: {
+    type: Object,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+});
 
 /** ข้อมูล v-model ของฟอร์ม */
 const formDataVacation = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	leaveRange: "ALL",
-	restDayOldTotal: "",
-	restDayCurrentTotal: "",
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leaveTotal: "",
-	leaveNumber: "",
-	leaveAddress: "",
-	leaveDetail: "",
-	leaveDocument: [],
-})
+  type: dataStore.typeId,
+  leaveWrote: "",
+  leaveRange: "ALL",
+  restDayOldTotal: "",
+  restDayCurrentTotal: "",
+  leaveStartDate: null,
+  leaveEndDate: null,
+  leaveTotal: "",
+  leaveNumber: "",
+  leaveAddress: "",
+  leaveDetail: "",
+  leaveDocument: [],
+});
 
 /** ตัวแปร ref สำหรับแสดง validate */
-const leaveWroteRef = ref<object | null>(null)
-const restDayOldTotalRef = ref<object | null>(null)
-const restDayCurrentTotalRef = ref<object | null>(null)
-const leaveRangeRef = ref<object | null>(null)
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leaveTotalRef = ref<object | null>(null)
-const leaveNumberRef = ref<object | null>(null)
-const leaveAddressRef = ref<object | null>(null)
-const leaveDetailRef = ref<object | null>(null)
-const leaveDocumentRef = ref<object | null>(null)
+const leaveWroteRef = ref<object | null>(null);
+const restDayOldTotalRef = ref<object | null>(null);
+const restDayCurrentTotalRef = ref<object | null>(null);
+const leaveRangeRef = ref<object | null>(null);
+const leaveStartDateRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const leaveTotalRef = ref<object | null>(null);
+const leaveNumberRef = ref<object | null>(null);
+const leaveAddressRef = ref<object | null>(null);
+const leaveDetailRef = ref<object | null>(null);
+const leaveDocumentRef = ref<object | null>(null);
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const FormRef: FormRef = {
-	leaveWrote: leaveWroteRef,
-	leaveRange: leaveRangeRef,
-	restDayOldTotal: restDayOldTotalRef,
-	restDayCurrentTotal: restDayCurrentTotalRef,
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leaveTotal: leaveTotalRef,
-	leaveNumber: leaveNumberRef,
-	leaveAddress: leaveAddressRef,
-	leaveDetail: leaveDetailRef,
-	leaveDocument: leaveDocumentRef,
-}
+  leaveWrote: leaveWroteRef,
+  leaveRange: leaveRangeRef,
+  restDayOldTotal: restDayOldTotalRef,
+  restDayCurrentTotal: restDayCurrentTotalRef,
+  leaveStartDate: leaveStartDateRef,
+  leaveEndDate: leaveEndDateRef,
+  leaveTotal: leaveTotalRef,
+  leaveNumber: leaveNumberRef,
+  leaveAddress: leaveAddressRef,
+  leaveDetail: leaveDetailRef,
+  leaveDocument: leaveDocumentRef,
+};
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
+const nameFile = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
 const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
 
 /** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
 function onValidate() {
-	const hasError = []
-	for (const key in FormRef) {
-		if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
-			const property = FormRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		const formData = new FormData()
-		formDataVacation.leaveDocument.forEach((file: File) => {
-			formData.append("leaveDocument", file)
-		})
-		// formData.append("leaveDocument", formDataVacation.leaveDocument);
-		formData.append("type", formDataVacation.type)
-		formData.append("leaveRange", formDataVacation.leaveRange)
-		formData.append("leaveStartDate", dateToISO(formDataVacation.leaveStartDate))
-		formData.append("leaveEndDate", dateToISO(formDataVacation.leaveEndDate))
-		formData.append("leaveWrote", formDataVacation.leaveWrote)
-		formData.append("leaveAddress", formDataVacation.leaveAddress)
-		formData.append("leaveNumber", formDataVacation.leaveNumber)
-		formData.append("leaveDetail", formDataVacation.leaveDetail)
-		props.onSubmit(formData)
-	}
+  const hasError = [];
+  for (const key in FormRef) {
+    if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
+      const property = FormRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    const formData = new FormData();
+    formDataVacation.leaveDocument.forEach((file: File) => {
+      formData.append("leaveDocument", file);
+    });
+    // formData.append("leaveDocument", formDataVacation.leaveDocument);
+    formData.append("type", formDataVacation.type);
+    formData.append("leaveRange", formDataVacation.leaveRange);
+    formData.append(
+      "leaveStartDate",
+      dateToISO(formDataVacation.leaveStartDate)
+    );
+    formData.append("leaveEndDate", dateToISO(formDataVacation.leaveEndDate));
+    formData.append("leaveWrote", formDataVacation.leaveWrote);
+    formData.append("leaveAddress", formDataVacation.leaveAddress);
+    formData.append("leaveNumber", formDataVacation.leaveNumber);
+    formData.append("leaveDetail", formDataVacation.leaveDetail);
+    props.onSubmit(formData, isLeave.value);
+  }
 }
 
 /**
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
-const leaveEndDateRules = ref([val => !!val || `${"กรุณาเลือกลาถึงวันที่"}`])
-const isLeave = ref<boolean>(true)
+const isLeave = ref<boolean>(true);
 async function fetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), {
-			type: dataStore.typeId ?? null,
-			StartLeaveDate: formDataVacation.leaveStartDate ?? null,
-			EndLeaveDate: formDataVacation.leaveEndDate ?? null,
-		})
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataVacation.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				// formDataVacation.leaveLast = data.totalDate
-				this.leaveEndDateRules = [val => !!val || `${"กรุณาเลือกลาถึงวันที่"}`]
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-				this.leaveEndDateRules = [val => false || `${"ไม่สามารถลาได้"}`]
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataVacation.leaveStartDate ?? null,
+      EndLeaveDate: formDataVacation.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+      formDataVacation.leaveTotal =
+        data.totalDate - data.sumDateWork - data.sumDateHoliday;
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
 }
 
 /**
  * function รีเซทค่า leaveStartDate เเละ leaveEndDate
  */
 function resetDate() {
-	if (formDataVacation.leaveRange === "MORNING" || formDataVacation.leaveRange === "AFTERNOON") {
-		formDataVacation.leaveStartDate = null
-		formDataVacation.leaveEndDate = null
-	}
-	console.log("testnull")
+  if (
+    formDataVacation.leaveRange === "MORNING" ||
+    formDataVacation.leaveRange === "AFTERNOON"
+  ) {
+    formDataVacation.leaveStartDate = null;
+    formDataVacation.leaveEndDate = null;
+  }
+  console.log("testnull");
 }
 
 /** ฟังก์ชั่นแปลงค่า ครึ่งวัน/ทั้งวัน */
 const isReadOnly = computed(() => {
-	const conditionleaveRange = formDataVacation.leaveRange === "MORNING" || formDataVacation.leaveRange === "AFTERNOON"
-	if (conditionleaveRange) {
-		formDataVacation.leaveEndDate = formDataVacation.leaveStartDate // Set formDataVacation.leaveEndDate to null
-		formDataVacation.leaveTotal = 0.5
-	} else {
-		formDataVacation.leaveTotal = null
-	}
-	return conditionleaveRange
-})
+  const conditionleaveRange =
+    formDataVacation.leaveRange === "MORNING" ||
+    formDataVacation.leaveRange === "AFTERNOON";
+  if (conditionleaveRange) {
+    formDataVacation.leaveEndDate = formDataVacation.leaveStartDate; // Set formDataVacation.leaveEndDate to null
+    formDataVacation.leaveTotal = 0.5;
+  } else {
+    formDataVacation.leaveTotal = null;
+  }
+  return conditionleaveRange;
+});
 
-const leaveDocumentList = ref<any>()
-const statusCheck = ref<any>("")
+const dateEndInputStyle = computed(() => {
+  return !isLeave.value ? "input-alert" : "";
+});
+
+const leaveDocumentList = ref<any>();
+const statusCheck = ref<any>("");
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 onMounted(() => {
-	if (props.data) {
-		// console.log("data==>", props.data)
-		formDataVacation.leaveWrote = props.data.leaveWrote
-		formDataVacation.restDayOldTotal = props.data.restDayOldTotal
-		formDataVacation.restDayCurrentTotal = props.data.restDayCurrentTotal
-		formDataVacation.leaveStartDate = props.data.leaveStartDate
-		formDataVacation.leaveEndDate = props.data.leaveEndDate
-		formDataVacation.leaveTotal = props.data.leaveTotal
-		formDataVacation.leaveNumber = props.data.leaveNumber
-		formDataVacation.leaveAddress = props.data.leaveAddress
-		formDataVacation.leaveDetail = props.data.leaveDetail
-		leaveDocumentList.value = props.data.leaveDocument
-		statusCheck.value = props.data.status
-		// formDataVacation.leaveDocument = props.data.leaveDocument;
-	}
-})
+  if (props.data) {
+    // console.log("data==>", props.data)
+    formDataVacation.leaveWrote = props.data.leaveWrote;
+    formDataVacation.restDayOldTotal = props.data.restDayOldTotal;
+    formDataVacation.restDayCurrentTotal = props.data.restDayCurrentTotal;
+    formDataVacation.leaveStartDate = props.data.leaveStartDate;
+    formDataVacation.leaveEndDate = props.data.leaveEndDate;
+    formDataVacation.leaveTotal = props.data.leaveTotal;
+    formDataVacation.leaveNumber = props.data.leaveNumber;
+    formDataVacation.leaveAddress = props.data.leaveAddress;
+    formDataVacation.leaveDetail = props.data.leaveDetail;
+    leaveDocumentList.value = props.data.leaveDocument;
+    statusCheck.value = props.data.status;
+    // formDataVacation.leaveDocument = props.data.leaveDocument;
+  }
+});
 </script>
 
 <template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent.stop="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="row q-pa-sm q-col-gutter-sm">
-				<q-input
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					ref="leaveWroteRef"
-					for="leaveWroteRef"
-					dense
-					hide-bottom-space
-					bg-color="white"
-					outlined
-					v-model="formDataVacation.leaveWrote"
-					label="เขียนที่"
-					:readonly="!edit || statusCheck === 'NEW'"
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-				<div class="col-12 col-md-4 col-sm-6">
-					<q-radio v-model="formDataVacation.leaveRange" val="ALL" label="ลาทั้งวัน" checked-icon="task_alt" />
-					<q-radio v-model="formDataVacation.leaveRange" val="MORNING" label="ลาครึ่งวันเช้า" checked-icon="task_alt" @update:model-value="resetDate" />
-					<q-radio v-model="formDataVacation.leaveRange" val="AFTERNOON" label="ลาครึ่งวันบ่าย" checked-icon="task_alt" @update:model-value="resetDate" />
-				</div>
-				<q-input
-					class="col-12 col-md-4 col-sm-6"
-					ref="restDayOldTotalRef"
-					for="restDayOldTotalRef"
-					dense
-					hide-bottom-space
-					bg-color="white"
-					readonly
-					outlined
-					v-model="dataStore.restDayTotalOld"
-					label="จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา"
-				/>
+  <div style="display: flex; align-items: center">
+    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+  </div>
+  <form @submit.prevent.stop="onValidate">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="row q-pa-sm q-col-gutter-sm">
+        <q-input
+          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          ref="leaveWroteRef"
+          for="leaveWroteRef"
+          dense
+          hide-bottom-space
+          bg-color="white"
+          outlined
+          v-model="formDataVacation.leaveWrote"
+          label="เขียนที่"
+          :readonly="!edit || statusCheck === 'NEW'"
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
+        <div class="col-12 col-md-4 col-sm-6">
+          <q-radio
+            v-model="formDataVacation.leaveRange"
+            val="ALL"
+            label="ลาทั้งวัน"
+            checked-icon="task_alt"
+          />
+          <q-radio
+            v-model="formDataVacation.leaveRange"
+            val="MORNING"
+            label="ลาครึ่งวันเช้า"
+            checked-icon="task_alt"
+            @update:model-value="resetDate"
+          />
+          <q-radio
+            v-model="formDataVacation.leaveRange"
+            val="AFTERNOON"
+            label="ลาครึ่งวันบ่าย"
+            checked-icon="task_alt"
+            @update:model-value="resetDate"
+          />
+        </div>
+        <q-input
+          class="col-12 col-md-4 col-sm-6"
+          ref="restDayOldTotalRef"
+          for="restDayOldTotalRef"
+          dense
+          hide-bottom-space
+          bg-color="white"
+          readonly
+          outlined
+          v-model="dataStore.restDayTotalOld"
+          label="จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา"
+        />
 
-				<q-input
-					class="col-12 col-md-4 col-sm-6"
-					ref="restDayCurrentTotalRef"
-					for="restDayCurrentTotalRef"
-					dense
-					readonly
-					hide-bottom-space
-					bg-color="white"
-					outlined
-					v-model="dataStore.restDayCurrentTotal"
-					label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน"
-				/>
+        <q-input
+          class="col-12 col-md-4 col-sm-6"
+          ref="restDayCurrentTotalRef"
+          for="restDayCurrentTotalRef"
+          dense
+          readonly
+          hide-bottom-space
+          bg-color="white"
+          outlined
+          v-model="dataStore.restDayCurrentTotal"
+          label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน"
+        />
 
-				<datepicker
-					class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataVacation.leaveStartDate"
-					:locale="'th'"
-					autoApply
-					hide-bottom-space
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					:readonly="!edit || statusCheck === 'NEW'"
-					@update:model-value="formDataVacation.leaveEndDate = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveStartDateRef"
-							for="leaveStartDateRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!edit || statusCheck === 'NEW'"
-							class="full-width datepicker"
-							:model-value="formDataVacation.leaveStartDate != null ? date2Thai(formDataVacation.leaveStartDate) : null"
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
+        <datepicker
+          class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataVacation.leaveStartDate"
+          :locale="'th'"
+          autoApply
+          hide-bottom-space
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          :readonly="!edit || statusCheck === 'NEW'"
+          @update:model-value="formDataVacation.leaveEndDate = null"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="leaveStartDateRef"
+              for="leaveStartDateRef"
+              hide-bottom-space
+              bg-color="white"
+              :readonly="!edit || statusCheck === 'NEW'"
+              class="full-width datepicker"
+              :model-value="
+                formDataVacation.leaveStartDate != null
+                  ? date2Thai(formDataVacation.leaveStartDate)
+                  : null
+              "
+              :label="`${'ลาตั้งแต่วันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
 
-				<datepicker
-					class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataVacation.leaveEndDate"
-					:locale="'th'"
-					autoApply
-					hide-bottom-space
-					@update:model-value="fetchCheck()"
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					:readonly="isReadOnly"
-					:min-date="formDataVacation.leaveStartDate"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveEndDateRef"
-							for="leaveEndDateRef"
-							hide-bottom-space
-							bg-color="white"
-							class="full-width datepicker"
-							:readonly="isReadOnly"
-							:model-value="formDataVacation.leaveEndDate != null ? date2Thai(formDataVacation.leaveEndDate) : null"
-							:label="`${'ลาถึงวันที่'}`"
-							:rules="leaveEndDateRules"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-				<q-input
-					class="col-12 col-md-2 col-sm-6"
-					bg-color="white"
-					dense
-					outlined
-					ref="leaveTotalRef"
-					for="leaveTotalRef"
-					v-model="formDataVacation.leaveTotal"
-					label="จำนวนวันที่ลา"
-					readonly
-					hide-bottom-space
-				/>
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<q-input
-							class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
-							dense
-							outlined
-							hide-bottom-space
-							bg-color="white"
-							ref="leaveNumberRef"
-							for="leaveNumberRef"
-							v-model="formDataVacation.leaveNumber"
-							mask="(###)-###-####"
-							unmasked-value
-							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-							:readonly="!edit || statusCheck === 'NEW'"
-							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
-						/>
+        <datepicker
+          class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataVacation.leaveEndDate"
+          :locale="'th'"
+          autoApply
+          hide-bottom-space
+          @update:model-value="fetchCheck()"
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          :readonly="isReadOnly"
+          :min-date="formDataVacation.leaveStartDate"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="leaveEndDateRef"
+              for="leaveEndDateRef"
+              hide-bottom-space
+              bg-color="white"
+              class="full-width datepicker"
+              :readonly="isReadOnly"
+              :model-value="
+                formDataVacation.leaveEndDate != null
+                  ? date2Thai(formDataVacation.leaveEndDate)
+                  : null
+              "
+              :label="`${'ลาถึงวันที่'}`"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+        <q-input
+          :bottom-slots="!isLeave ? true : false"
+          :color="!isLeave ? 'red' : 'black'"
+          :bg-color="!isLeave ? 'red-2' : 'white'"
+          :border-color="!isLeave ? 'red' : 'gray'"
+          :input-class="!isLeave ? dateEndInputStyle : ''"
+          class="col-12 col-md-2 col-sm-6"
+          dense
+          outlined
+          ref="leaveTotalRef"
+          for="leaveTotalRef"
+          v-model="formDataVacation.leaveTotal"
+          label="จำนวนวันที่ลา"
+          readonly
+        >
+          <template v-slot:hint>
+            <span style="color: red">
+              {{ !isLeave ? "จำนวนวันลาเกินที่กำหนด" : "" }}
+            </span>
+          </template>
+        </q-input>
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <q-input
+              class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
+              dense
+              outlined
+              hide-bottom-space
+              bg-color="white"
+              ref="leaveNumberRef"
+              for="leaveNumberRef"
+              v-model="formDataVacation.leaveNumber"
+              mask="(###)-###-####"
+              unmasked-value
+              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+              :readonly="!edit || statusCheck === 'NEW'"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
+              ]"
+            />
 
-						<q-input
-							class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
-							dense
-							outlined
-							hide-bottom-space
-							bg-color="white"
-							ref="leaveAddressRef"
-							for="leaveAddressRef"
-							v-model="formDataVacation.leaveAddress"
-							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-							:readonly="!edit || statusCheck === 'NEW'"
-							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
-						/>
-					</div>
-				</div>
-				<q-input
-					type="textarea"
-					hide-bottom-space
-					bg-color="white"
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					outlined
-					ref="leaveDetailRef"
-					for="leaveDetailRef"
-					v-model="formDataVacation.leaveDetail"
-					label="รายละเอียด"
-					:readonly="!edit || statusCheck === 'NEW'"
-				/>
-				<div class="full-width" v-if="statusCheck != 'NEW'">
-					<div class="q-col-gutter-sm row">
-						<!-- multiple -->
-						<q-file
-							ref="leaveDocumentRef"
-							bg-color="white"
-							v-model="formDataVacation.leaveDocument"
-							@added="fileUploadDoc"
-							dense
-							label="เอกสารประกอบ"
-							multiple
-							outlined
-							use-chips
-							class="q-pl-sm col-12"
-						>
-							<template v-slot:prepend>
-								<q-icon name="attach_file" color="primary" />
-							</template>
-						</q-file>
-						<!-- <div class="col-12" v-if="formDataVacation.leaveDocument.length == 0">
+            <q-input
+              class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
+              dense
+              outlined
+              hide-bottom-space
+              bg-color="white"
+              ref="leaveAddressRef"
+              for="leaveAddressRef"
+              v-model="formDataVacation.leaveAddress"
+              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+              :readonly="!edit || statusCheck === 'NEW'"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
+              ]"
+            />
+          </div>
+        </div>
+        <q-input
+          type="textarea"
+          hide-bottom-space
+          bg-color="white"
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          dense
+          outlined
+          ref="leaveDetailRef"
+          for="leaveDetailRef"
+          v-model="formDataVacation.leaveDetail"
+          label="รายละเอียด"
+          :readonly="!edit || statusCheck === 'NEW'"
+        />
+        <div class="full-width" v-if="statusCheck != 'NEW'">
+          <div class="q-col-gutter-sm row">
+            <!-- multiple -->
+            <q-file
+              ref="leaveDocumentRef"
+              bg-color="white"
+              v-model="formDataVacation.leaveDocument"
+              @added="fileUploadDoc"
+              dense
+              label="เอกสารประกอบ"
+              multiple
+              outlined
+              use-chips
+              class="q-pl-sm col-12"
+            >
+              <template v-slot:prepend>
+                <q-icon name="attach_file" color="primary" />
+              </template>
+            </q-file>
+            <!-- <div class="col-12" v-if="formDataVacation.leaveDocument.length == 0">
 							<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
 						</div> -->
-					</div>
-				</div>
-				<div class="col-12" v-if="data">
-					<div class="col-12 col-md-12 col-sm-12">
-						<q-card bordered>
-							<!-- <div class="col-12">
+          </div>
+        </div>
+        <div class="col-12" v-if="data">
+          <div class="col-12 col-md-12 col-sm-12">
+            <q-card bordered>
+              <!-- <div class="col-12">
 								<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ{{ leaveDocumentList }} </q-card>
 							</div> -->
-							<q-list separator v-if="leaveDocumentList && leaveDocumentList.length > 0">
-								<q-item v-for="(document, index) in leaveDocumentList" :key="index" class="q-my-xs">
-									<q-item-section>
-										<q-item-label class="row items-baseline">
-											<div class="col">
-												{{ "เอกสารแนบฉบับที่" + (index + 1) }}
-											</div>
-											<q-btn class="col-6" :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
-												<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
-											</q-btn>
-										</q-item-label>
-									</q-item-section>
-								</q-item>
-							</q-list>
-							<div class="col-12" v-else>
-								<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
-							</div>
-						</q-card>
-					</div>
-				</div>
-				<div class="col-12 col-sm-6 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="(file, index) in leaveDocumentList" :key="index" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.name }}
-									</q-item-label>
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
+              <q-list
+                separator
+                v-if="leaveDocumentList && leaveDocumentList.length > 0"
+              >
+                <q-item
+                  v-for="(document, index) in leaveDocumentList"
+                  :key="index"
+                  class="q-my-xs"
+                >
+                  <q-item-section>
+                    <q-item-label class="row items-baseline">
+                      <div class="col">
+                        {{ "เอกสารแนบฉบับที่" + (index + 1) }}
+                      </div>
+                      <q-btn
+                        class="col-6"
+                        :href="document"
+                        target="_blank"
+                        outline
+                        color="blue"
+                        label="ดาวน์โหลด"
+                        size="12px"
+                      >
+                        <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+                      </q-btn>
+                    </q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+              <div class="col-12" v-else>
+                <q-card class="q-pa-md" bordered>
+                  ไม่มีรายการเอกสารประกอบ
+                </q-card>
+              </div>
+            </q-card>
+          </div>
+        </div>
+        <div class="col-12 col-sm-6 row" v-if="!edit">
+          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+            <div class="q-pl-sm text-weight-bold text-dark">
+              เอกสารเพิ่มเติม
+            </div>
+          </div>
+          <q-card bordered flat class="full-width">
+            <q-list separator>
+              <q-item
+                v-for="(file, index) in leaveDocumentList"
+                :key="index"
+                class="q-my-xs"
+              >
+                <q-item-section>
+                  <q-item-label class="full-width ellipsis">
+                    {{ file.name }}
+                  </q-item-label>
+                  <q-item-label caption> </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </div>
+    </q-card>
 
-		<q-separator class="q-mt-sm" />
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn v-if="!props.data || props.data.status == 'DRAFT'" id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"
-				><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
-			>
-			<q-btn v-if="data && statusCheck != 'NEW'" id="onSubmit" type="button" unelevated dense class="q-px-md items-center q-ml-sm" color="primary" label="ยื่นใบลา" @click="onConfirm"
-				><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
-			>
-		</div>
-	</form>
+    <q-separator class="q-mt-sm" />
+    <div class="row col-12 q-pt-md">
+      <q-space />
+      <q-btn
+        v-if="!props.data || props.data.status == 'DRAFT'"
+        id="onSubmit"
+        type="submit"
+        unelevated
+        dense
+        class="q-px-md items-center btnBlue"
+        label="บันทึก"
+        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+      >
+      <q-btn
+        v-if="data && statusCheck != 'NEW'"
+        id="onSubmit"
+        type="button"
+        unelevated
+        dense
+        class="q-px-md items-center q-ml-sm"
+        color="primary"
+        label="ยื่นใบลา"
+        @click="onConfirm()"
+        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+      >
+    </div>
+  </form>
 </template>
diff --git a/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue b/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
index a1361bc..8c4401c 100644
--- a/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
@@ -1,578 +1,735 @@
 <script setup lang="ts">
-import { reactive, ref, onMounted } from "vue"
-import { useCounterMixin } from "@/stores/mixin"
-import { useQuasar } from "quasar"
-import type { OrdinationForm } from "@/modules/05_leave/interface/request/AddAbsence"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRouter } from "vue-router"
+import { reactive, ref, onMounted, computed } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import type { OrdinationForm } from "@/modules/05_leave/interface/request/AddAbsence";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter } from "vue-router";
 
 /** Use */
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const router = useRouter()
-const mixin = useCounterMixin()
-const { date2Thai, dialogConfirm, calculateDurationYmd, fails, dateToISO, success, messageError } = mixin
-const edit = ref<boolean>(true)
-const files = ref<any>(null)
+const dataStore = useLeaveStore();
+const $q = useQuasar();
+const router = useRouter();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  dialogConfirm,
+  calculateDurationYmd,
+  fails,
+  dateToISO,
+  success,
+  messageError,
+} = mixin;
+const edit = ref<boolean>(true);
+const files = ref<any>(null);
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-	onConfirm: {
-		type: Function,
-		default: () => "",
-	},
-})
+  data: {
+    type: Object,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+});
 
 /** ตัวแปร ref สำหรับแสดง validate */
-const ordainDayLocationNumberRef = ref<object | null>(null)
-const leaveWroteRef = ref<object | null>(null)
-const leavebirthDateRef = ref<object | null>(null)
-const leavegovernmentDateRef = ref<object | null>(null)
-const totalLeaveRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const ordainDayOrdinationRef = ref<object | null>(null)
-const leaveStartDateRef = ref<object | null>(null)
-const ordainDayLocationAddressRef = ref<object | null>(null)
-const ordainDayBuddhistLentAddressRef = ref<object | null>(null)
-const ordainDayLocationNameRef = ref<object | null>(null)
-const ordainDayBuddhistLentNameRef = ref<object | null>(null)
-const leaveDocumentRef = ref<object | null>(null)
+const ordainDayLocationNumberRef = ref<object | null>(null);
+const leaveWroteRef = ref<object | null>(null);
+const leavebirthDateRef = ref<object | null>(null);
+const leavegovernmentDateRef = ref<object | null>(null);
+const totalLeaveRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const ordainDayOrdinationRef = ref<object | null>(null);
+const leaveStartDateRef = ref<object | null>(null);
+const ordainDayLocationAddressRef = ref<object | null>(null);
+const ordainDayBuddhistLentAddressRef = ref<object | null>(null);
+const ordainDayLocationNameRef = ref<object | null>(null);
+const ordainDayBuddhistLentNameRef = ref<object | null>(null);
+const leaveDocumentRef = ref<object | null>(null);
 
 /** ข้อมูล v-model ของฟอร์ม */
 const formDataOrdination = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	leavegovernmentDate: null,
-	leavebirthDate: null,
-	leaveStartDate: null,
-	leaveEndDate: null,
-	totalLeave: 0,
-	ordainDayOrdination: null,
-	ordainDayLocationName: "",
-	ordainDayLocationNumber: null,
-	ordainDayLocationAddress: "",
-	ordainDayBuddhistLentName: "",
-	ordainDayBuddhistLentAddress: "",
-	ordainDayStatus: "true",
-	leaveDocument: null,
-})
+  type: dataStore.typeId,
+  leaveWrote: "",
+  leavegovernmentDate: null,
+  leavebirthDate: null,
+  leaveStartDate: null,
+  leaveEndDate: null,
+  totalLeave: 0,
+  ordainDayOrdination: null,
+  ordainDayLocationName: "",
+  ordainDayLocationNumber: null,
+  ordainDayLocationAddress: "",
+  ordainDayBuddhistLentName: "",
+  ordainDayBuddhistLentAddress: "",
+  ordainDayStatus: "true",
+  leaveDocument: null,
+});
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const formRef: OrdinationForm = {
-	leaveWrote: leaveWroteRef,
-	leavegovernmentDate: leavegovernmentDateRef,
-	leavebirthDate: leavebirthDateRef,
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	totalLeave: totalLeaveRef,
-	ordainDayOrdination: ordainDayOrdinationRef,
-	ordainDayLocationName: ordainDayLocationNameRef,
-	ordainDayLocationNumber: ordainDayLocationNumberRef,
-	ordainDayLocationAddress: ordainDayLocationAddressRef,
-	ordainDayBuddhistLentName: ordainDayBuddhistLentNameRef,
-	ordainDayBuddhistLentAddress: ordainDayBuddhistLentAddressRef,
-	leaveDocument: leaveDocumentRef,
-}
+  leaveWrote: leaveWroteRef,
+  leavegovernmentDate: leavegovernmentDateRef,
+  leavebirthDate: leavebirthDateRef,
+  leaveStartDate: leaveStartDateRef,
+  leaveEndDate: leaveEndDateRef,
+  totalLeave: totalLeaveRef,
+  ordainDayOrdination: ordainDayOrdinationRef,
+  ordainDayLocationName: ordainDayLocationNameRef,
+  ordainDayLocationNumber: ordainDayLocationNumberRef,
+  ordainDayLocationAddress: ordainDayLocationAddressRef,
+  ordainDayBuddhistLentName: ordainDayBuddhistLentNameRef,
+  ordainDayBuddhistLentAddress: ordainDayBuddhistLentAddressRef,
+  leaveDocument: leaveDocumentRef,
+};
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
+const nameFile = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
 const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
 
 /** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
 function onValidate() {
-	const hasError = []
-	for (const key in formRef) {
-		if (Object.prototype.hasOwnProperty.call(formRef, key)) {
-			const property = formRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		const formData = new FormData()
-		formDataOrdination.leaveDocument.forEach((file: File) => {
-			formData.append("leaveDocument", file)
-		})
-		// formData.append("leaveDocument", formDataOrdination.leaveDocument);
-		formData.append("type", formDataOrdination.type)
-		formData.append("leaveStartDate", dateToISO(formDataOrdination.leaveStartDate))
-		formData.append("leaveEndDate", dateToISO(formDataOrdination.leaveEndDate))
-		formData.append("ordainDayOrdination", dateToISO(formDataOrdination.ordainDayOrdination))
-		formData.append("ordainDayLocationName", formDataOrdination.ordainDayLocationName)
-		formData.append("ordainDayLocationNumber", formDataOrdination.ordainDayLocationNumber)
-		formData.append("ordainDayLocationAddress", formDataOrdination.ordainDayLocationAddress)
-		formData.append("ordainDayBuddhistLentName", formDataOrdination.ordainDayBuddhistLentName)
-		formData.append("ordainDayBuddhistLentAddress", formDataOrdination.ordainDayBuddhistLentAddress)
-		formData.append("ordainDayStatus", formDataOrdination.ordainDayStatus)
-		formData.append("leaveWrote", formDataOrdination.leaveWrote)
-		formData.append("leaveDetail", formDataOrdination.leaveDetail)
-		props.onSubmit(formData)
-	}
+  const hasError = [];
+  for (const key in formRef) {
+    if (Object.prototype.hasOwnProperty.call(formRef, key)) {
+      const property = formRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    const formData = new FormData();
+    formDataOrdination.leaveDocument.forEach((file: File) => {
+      formData.append("leaveDocument", file);
+    });
+    // formData.append("leaveDocument", formDataOrdination.leaveDocument);
+    formData.append("type", formDataOrdination.type);
+    formData.append(
+      "leaveStartDate",
+      dateToISO(formDataOrdination.leaveStartDate)
+    );
+    formData.append("leaveEndDate", dateToISO(formDataOrdination.leaveEndDate));
+    formData.append(
+      "ordainDayOrdination",
+      dateToISO(formDataOrdination.ordainDayOrdination)
+    );
+    formData.append(
+      "ordainDayLocationName",
+      formDataOrdination.ordainDayLocationName
+    );
+    formData.append(
+      "ordainDayLocationNumber",
+      formDataOrdination.ordainDayLocationNumber
+    );
+    formData.append(
+      "ordainDayLocationAddress",
+      formDataOrdination.ordainDayLocationAddress
+    );
+    formData.append(
+      "ordainDayBuddhistLentName",
+      formDataOrdination.ordainDayBuddhistLentName
+    );
+    formData.append(
+      "ordainDayBuddhistLentAddress",
+      formDataOrdination.ordainDayBuddhistLentAddress
+    );
+    formData.append("ordainDayStatus", formDataOrdination.ordainDayStatus);
+    formData.append("leaveWrote", formDataOrdination.leaveWrote);
+    formData.append("leaveDetail", formDataOrdination.leaveDetail);
+    props.onSubmit(formData, isLeave.value);
+  }
 }
 
 /**
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
-const leaveEndDateRules = ref([val => !!val || `${"กรุณาเลือกลาถึงวันที่"}`])
-const isLeave = ref<boolean>(true)
+const isLeave = ref<boolean>(true);
 async function fetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), {
-			type: dataStore.typeId ?? null,
-			StartLeaveDate: formDataOrdination.leaveStartDate ?? null,
-			EndLeaveDate: formDataOrdination.leaveEndDate ?? null,
-		})
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				// formDataOrdination.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				formDataOrdination.leaveTotal = data.totalDate
-				this.leaveEndDateRules = [val => !!val || `${"กรุณาเลือกลาถึงวันที่"}`]
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-				this.leaveEndDateRules = [val => false || `${"ไม่สามารถลาได้"}`]
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataOrdination.leaveStartDate ?? null,
+      EndLeaveDate: formDataOrdination.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+      formDataOrdination.leaveTotal = data.totalDate;
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
 }
 
 /**
  * function อัพเดทค่า LeaveTotal
  */
 function updateLeaveTotal() {
-	const newLeaveTotal = calculateDurationYmd(formDataOrdination.leaveStartDate, formDataOrdination.leaveEndDate)
-	formDataOrdination.leaveTotal = newLeaveTotal
+  const newLeaveTotal = calculateDurationYmd(
+    formDataOrdination.leaveStartDate,
+    formDataOrdination.leaveEndDate
+  );
+  formDataOrdination.leaveTotal = newLeaveTotal;
 }
 
-const leaveDocumentList = ref<any>()
-const statusCheck = ref<any>("")
+const dateEndInputStyle = computed(() => {
+  return !isLeave.value ? "input-alert" : "";
+});
+
+const leaveDocumentList = ref<any>();
+const statusCheck = ref<any>("");
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 onMounted(() => {
-	if (props.data) {
-		formDataOrdination.leaveWrote = props.data.leaveWrote
-		formDataOrdination.leaveStartDate = props.data.leaveStartDate
-		formDataOrdination.leaveEndDate = props.data.leaveEndDate
-		formDataOrdination.leaveTotal = props.data.leaveTotal
-		formDataOrdination.ordainDayOrdination = props.data.ordainDayOrdination
-		formDataOrdination.ordainDayLocationName = props.data.ordainDayLocationName
-		formDataOrdination.ordainDayLocationNumber = props.data.ordainDayLocationNumber
-		formDataOrdination.ordainDayLocationAddress = props.data.ordainDayLocationAddress
-		formDataOrdination.ordainDayBuddhistLentName = props.data.ordainDayBuddhistLentName
-		formDataOrdination.ordainDayBuddhistLentAddress = props.data.ordainDayBuddhistLentAddress
-		formDataOrdination.ordainDayStatus = props.data.ordainDayStatus
-		formDataOrdination.leaveDetail = props.data.leaveDetail
-		leaveDocumentList.value = props.data.leaveDocument
-		statusCheck.value = props.data.status
-		// formDataOrdination.leaveDocument = props.data.leaveDocument;
-	}
-})
+  if (props.data) {
+    formDataOrdination.leaveWrote = props.data.leaveWrote;
+    formDataOrdination.leaveStartDate = props.data.leaveStartDate;
+    formDataOrdination.leaveEndDate = props.data.leaveEndDate;
+    formDataOrdination.leaveTotal = props.data.leaveTotal;
+    formDataOrdination.ordainDayOrdination = props.data.ordainDayOrdination;
+    formDataOrdination.ordainDayLocationName = props.data.ordainDayLocationName;
+    formDataOrdination.ordainDayLocationNumber =
+      props.data.ordainDayLocationNumber;
+    formDataOrdination.ordainDayLocationAddress =
+      props.data.ordainDayLocationAddress;
+    formDataOrdination.ordainDayBuddhistLentName =
+      props.data.ordainDayBuddhistLentName;
+    formDataOrdination.ordainDayBuddhistLentAddress =
+      props.data.ordainDayBuddhistLentAddress;
+    formDataOrdination.ordainDayStatus = props.data.ordainDayStatus;
+    formDataOrdination.leaveDetail = props.data.leaveDetail;
+    leaveDocumentList.value = props.data.leaveDocument;
+    statusCheck.value = props.data.status;
+    // formDataOrdination.leaveDocument = props.data.leaveDocument;
+  }
+});
 </script>
 
 <!-- ฟอร์ม ลาอุปสมบท -->
 <template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent="onValidate" class="full-width">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="row q-pa-sm q-col-gutter-sm">
-				<q-input
-					ref="leaveWroteRef"
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					outlined
-					bg-color="white"
-					hide-bottom-space
-					v-model="formDataOrdination.leaveWrote"
-					label="เขียนที่"
-					:readonly="!edit || statusCheck === 'NEW'"
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
+  <div style="display: flex; align-items: center">
+    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+  </div>
+  <form @submit.prevent="onValidate" class="full-width">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="row q-pa-sm q-col-gutter-sm">
+        <q-input
+          ref="leaveWroteRef"
+          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          dense
+          outlined
+          bg-color="white"
+          hide-bottom-space
+          v-model="formDataOrdination.leaveWrote"
+          label="เขียนที่"
+          :readonly="!edit || statusCheck === 'NEW'"
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
 
-				<datepicker
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataOrdination.leaveStartDate"
-					:locale="'th'"
-					autoApply
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					:readonly="!edit || statusCheck === 'NEW'"
-					@update:model-value="formDataOrdination.leaveEndDate = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							bg-color="white"
-							:readonly="!edit || statusCheck === 'NEW'"
-							dense
-							ref="leaveStartDateRef"
-							hide-bottom-space
-							class="full-width datepicker"
-							:model-value="formDataOrdination.leaveStartDate != null ? date2Thai(formDataOrdination.leaveStartDate) : null"
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
+        <datepicker
+          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataOrdination.leaveStartDate"
+          :locale="'th'"
+          autoApply
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          :readonly="!edit || statusCheck === 'NEW'"
+          @update:model-value="formDataOrdination.leaveEndDate = null"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              bg-color="white"
+              :readonly="!edit || statusCheck === 'NEW'"
+              dense
+              ref="leaveStartDateRef"
+              hide-bottom-space
+              class="full-width datepicker"
+              :model-value="
+                formDataOrdination.leaveStartDate != null
+                  ? date2Thai(formDataOrdination.leaveStartDate)
+                  : null
+              "
+              :label="`${'ลาตั้งแต่วันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
 
-				<datepicker
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataOrdination.leaveEndDate"
-					:locale="'th'"
-					autoApply
-					borderless
-					@update:model-value="updateLeaveTotal, fetchCheck()"
-					:readonly="!formDataOrdination.leaveStartDate || statusCheck === 'NEW'"
-					:enableTimePicker="false"
-					:min-date="formDataOrdination.leaveStartDate"
-					week-start="0"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveEndDateRef"
-							bg-color="white"
-							hide-bottom-space
-							class="full-width datepicker"
-							:model-value="formDataOrdination.leaveEndDate != null ? date2Thai(formDataOrdination.leaveEndDate) : null"
-							:label="`${'ลาถึงวันที่'}`"
-							:readonly="!formDataOrdination.leaveStartDate || statusCheck === 'NEW'"
-							:rules="leaveEndDateRules"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-				<q-input
-					class="col-12 col-md-2 col-sm-6"
-					dense
-					outlined
-					bg-color="white"
-					ref="leaveTotalRef"
-					for="leaveTotalRef"
-					v-model="formDataOrdination.leaveTotal"
-					label="จำนวนวันที่ลา"
-					readonly
-					hide-bottom-space
-				/>
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<datepicker
-							class="col-12 col-md-4 col-sm-6"
-							menu-class-name="modalfix"
-							v-model="formDataOrdination.leavegovernmentDate"
-							:locale="'th'"
-							autoApply
-							borderless
-							:enableTimePicker="false"
-							week-start="0"
-							readonly
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									outlined
-									ref="leavegovernmentDateRef"
-									dense
-									bg-color="white"
-									hide-bottom-space
-									readonly
-									class="full-width"
-									:model-value="dataStore.dateAppoint != null ? date2Thai(dataStore.dateAppoint) : null"
-									:label="`${'วันที่เข้ารับราชการ'}`"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
+        <datepicker
+          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataOrdination.leaveEndDate"
+          :locale="'th'"
+          autoApply
+          borderless
+          @update:model-value="updateLeaveTotal, fetchCheck()"
+          :readonly="
+            !formDataOrdination.leaveStartDate || statusCheck === 'NEW'
+          "
+          :enableTimePicker="false"
+          :min-date="formDataOrdination.leaveStartDate"
+          week-start="0"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="leaveEndDateRef"
+              bg-color="white"
+              hide-bottom-space
+              class="full-width datepicker"
+              :model-value="
+                formDataOrdination.leaveEndDate != null
+                  ? date2Thai(formDataOrdination.leaveEndDate)
+                  : null
+              "
+              :label="`${'ลาถึงวันที่'}`"
+              :readonly="
+                !formDataOrdination.leaveStartDate || statusCheck === 'NEW'
+              "
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+        <q-input
+          :bottom-slots="!isLeave ? true : false"
+          :color="!isLeave ? 'red' : 'black'"
+          :bg-color="!isLeave ? 'red-2' : 'white'"
+          :border-color="!isLeave ? 'red' : 'gray'"
+          :input-class="!isLeave ? dateEndInputStyle : ''"
+          class="col-12 col-md-2 col-sm-6"
+          dense
+          outlined
+          ref="leaveTotalRef"
+          for="leaveTotalRef"
+          v-model="formDataOrdination.leaveTotal"
+          label="จำนวนวันที่ลา"
+          readonly
+        >
+          <template v-slot:hint>
+            <span style="color: red">
+              {{ !isLeave ? "จำนวนวันลาเกินที่กำหนด" : "" }}
+            </span>
+          </template>
+        </q-input>
 
-						<datepicker
-							class="col-12 col-md-4 col-sm-6"
-							menu-class-name="modalfix"
-							v-model="formDataOrdination.leavebirthDate"
-							:locale="'th'"
-							autoApply
-							borderless
-							readonly
-							:enableTimePicker="false"
-							week-start="0"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									outlined
-									ref="leavebirthDateRef"
-									dense
-									bg-color="white"
-									hide-bottom-space
-									readonly
-									class="full-width"
-									:model-value="dataStore.birthDate != null ? date2Thai(dataStore.birthDate) : null"
-									:label="`${'วันเดือนปีเกิด'}`"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-					</div>
-				</div>
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <datepicker
+              class="col-12 col-md-4 col-sm-6"
+              menu-class-name="modalfix"
+              v-model="formDataOrdination.leavegovernmentDate"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+              readonly
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  ref="leavegovernmentDateRef"
+                  dense
+                  bg-color="white"
+                  hide-bottom-space
+                  readonly
+                  class="full-width"
+                  :model-value="
+                    dataStore.dateAppoint != null
+                      ? date2Thai(dataStore.dateAppoint)
+                      : null
+                  "
+                  :label="`${'วันที่เข้ารับราชการ'}`"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--black)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
 
-				<div class="q-pl-sm text-weight-bold text-dark col-12">เคยบวชหรือไม่</div>
-				<div class="col-12">
-					<q-radio v-model="formDataOrdination.ordainDayStatus" :disable="!edit || statusCheck === 'NEW'" :val="true" label="เคยบวช" checked-icon="task_alt " hide-bottom-space />
-					<q-radio v-model="formDataOrdination.ordainDayStatus" :disable="!edit || statusCheck === 'NEW'" :val="false" label="ไม่เคยบวช" checked-icon="task_alt" hide-bottom-space />
-				</div>
+            <datepicker
+              class="col-12 col-md-4 col-sm-6"
+              menu-class-name="modalfix"
+              v-model="formDataOrdination.leavebirthDate"
+              :locale="'th'"
+              autoApply
+              borderless
+              readonly
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  ref="leavebirthDateRef"
+                  dense
+                  bg-color="white"
+                  hide-bottom-space
+                  readonly
+                  class="full-width"
+                  :model-value="
+                    dataStore.birthDate != null
+                      ? date2Thai(dataStore.birthDate)
+                      : null
+                  "
+                  :label="`${'วันเดือนปีเกิด'}`"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--black)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+        </div>
 
-				<div class="text-weight-bold text-dark col-12">สถานที่บวช</div>
-				<datepicker
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataOrdination.ordainDayOrdination"
-					:locale="'th'"
-					autoApply
-					full-width
-					borderless
-					:readonly="!edit || statusCheck === 'NEW'"
-					hide-bottom-space
-					:enableTimePicker="false"
-					week-start="0"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							ref="ordainDayOrdinationRef"
-							dense
-							bg-color="white"
-							hide-bottom-space
-							:readonly="!edit || statusCheck === 'NEW'"
-							class="full-width datepicker"
-							:model-value="formDataOrdination.ordainDayOrdination != null ? date2Thai(formDataOrdination.ordainDayOrdination) : null"
-							:label="`${'วันอุปสมบท'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกวันอุปสมบท'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
+        <div class="q-pl-sm text-weight-bold text-dark col-12">
+          เคยบวชหรือไม่
+        </div>
+        <div class="col-12">
+          <q-radio
+            v-model="formDataOrdination.ordainDayStatus"
+            :disable="!edit || statusCheck === 'NEW'"
+            :val="true"
+            label="เคยบวช"
+            checked-icon="task_alt "
+            hide-bottom-space
+          />
+          <q-radio
+            v-model="formDataOrdination.ordainDayStatus"
+            :disable="!edit || statusCheck === 'NEW'"
+            :val="false"
+            label="ไม่เคยบวช"
+            checked-icon="task_alt"
+            hide-bottom-space
+          />
+        </div>
 
-				<q-input
-					class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-					dense
-					hide-bottom-space
-					ref="ordainDayLocationNameRef"
-					bg-color="white"
-					outlined
-					full-width
-					:readonly="!edit || statusCheck === 'NEW'"
-					v-model="formDataOrdination.ordainDayLocationName"
-					label="ชื่อวัด"
-					:rules="[val => !!val || `${'กรุณากรอกชื่อวัด'}`]"
-				/>
+        <div class="text-weight-bold text-dark col-12">สถานที่บวช</div>
+        <datepicker
+          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataOrdination.ordainDayOrdination"
+          :locale="'th'"
+          autoApply
+          full-width
+          borderless
+          :readonly="!edit || statusCheck === 'NEW'"
+          hide-bottom-space
+          :enableTimePicker="false"
+          week-start="0"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              ref="ordainDayOrdinationRef"
+              dense
+              bg-color="white"
+              hide-bottom-space
+              :readonly="!edit || statusCheck === 'NEW'"
+              class="full-width datepicker"
+              :model-value="
+                formDataOrdination.ordainDayOrdination != null
+                  ? date2Thai(formDataOrdination.ordainDayOrdination)
+                  : null
+              "
+              :label="`${'วันอุปสมบท'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกวันอุปสมบท'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
 
-				<q-input
-					class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-					ref="ordainDayLocationNumberRef"
-					dense
-					full-width
-					outlined
-					v-model="formDataOrdination.ordainDayLocationNumber"
-					bg-color="white"
-					mask="(###)-###-####"
-					unmasked-value
-					:readonly="!edit || statusCheck === 'NEW'"
-					hide-bottom-space
-					label="หมายเลขโทรศัพท์"
-					:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์'}`]"
-				/>
-				<q-input
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					ref="ordainDayLocationAddressRef"
-					bg-color="white"
-					outlined
-					hide-bottom-space
-					v-model="formDataOrdination.ordainDayLocationAddress"
-					label="ที่อยู่"
-					:readonly="!edit || statusCheck === 'NEW'"
-					:rules="[val => !!val || `${'กรุณากรอกที่อยู่'}`]"
-					type="textarea"
-				/>
+        <q-input
+          class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+          dense
+          hide-bottom-space
+          ref="ordainDayLocationNameRef"
+          bg-color="white"
+          outlined
+          full-width
+          :readonly="!edit || statusCheck === 'NEW'"
+          v-model="formDataOrdination.ordainDayLocationName"
+          label="ชื่อวัด"
+          :rules="[(val) => !!val || `${'กรุณากรอกชื่อวัด'}`]"
+        />
 
-				<div class="q-pl-sm text-weight-bold text-dark col-12">สถานที่จำพรรษา</div>
-				<q-input
-					class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-					dense
-					ref="ordainDayBuddhistLentNameRef"
-					bg-color="white"
-					hide-bottom-space
-					outlined
-					:readonly="!edit || statusCheck === 'NEW'"
-					v-model="formDataOrdination.ordainDayBuddhistLentName"
-					label="ชื่อวัด"
-					:rules="[val => !!val || `${'กรุณากรอกชื่อวัด'}`]"
-				/>
+        <q-input
+          class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+          ref="ordainDayLocationNumberRef"
+          dense
+          full-width
+          outlined
+          v-model="formDataOrdination.ordainDayLocationNumber"
+          bg-color="white"
+          mask="(###)-###-####"
+          unmasked-value
+          :readonly="!edit || statusCheck === 'NEW'"
+          hide-bottom-space
+          label="หมายเลขโทรศัพท์"
+          :rules="[(val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์'}`]"
+        />
+        <q-input
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          dense
+          ref="ordainDayLocationAddressRef"
+          bg-color="white"
+          outlined
+          hide-bottom-space
+          v-model="formDataOrdination.ordainDayLocationAddress"
+          label="ที่อยู่"
+          :readonly="!edit || statusCheck === 'NEW'"
+          :rules="[(val) => !!val || `${'กรุณากรอกที่อยู่'}`]"
+          type="textarea"
+        />
 
-				<q-input
-					class="col-12 cursor-pointer inputgreen"
-					dense
-					ref="ordainDayBuddhistLentAddressRef"
-					bg-color="white"
-					outlined
-					:readonly="!edit || statusCheck === 'NEW'"
-					v-model="formDataOrdination.ordainDayBuddhistLentAddress"
-					label="ที่อยู่"
-					:rules="[val => !!val || `${'กรุณากรอกที่อยู่'}`]"
-					type="textarea"
-					hide-bottom-space
-				/>
-				<q-input
-					type="textarea"
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					bg-color="white"
-					outlined
-					ref="leaveDetailRef"
-					for="leaveDetailRef"
-					v-model="formDataOrdination.leaveDetail"
-					label="รายละเอียด"
-					:readonly="!edit || statusCheck === 'NEW'"
-				/>
-				<div class="full-width col-12" v-if="statusCheck != 'NEW'">
-					<div class="q-col-gutter-sm row">
-						<!-- multiple -->
-						<q-file ref="leaveDocumentRef" v-model="formDataOrdination.leaveDocument" @added="fileUploadDoc" dense label="เอกสารประกอบ" multiple outlined bg-color="white" use-chips>
-							<template v-slot:prepend>
-								<q-icon name="attach_file" color="primary" />
-							</template>
-						</q-file>
-						<!-- <div class="col-12" v-if="formDataOrdination.leaveDocument.length == 0">
+        <div class="q-pl-sm text-weight-bold text-dark col-12">
+          สถานที่จำพรรษา
+        </div>
+        <q-input
+          class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+          dense
+          ref="ordainDayBuddhistLentNameRef"
+          bg-color="white"
+          hide-bottom-space
+          outlined
+          :readonly="!edit || statusCheck === 'NEW'"
+          v-model="formDataOrdination.ordainDayBuddhistLentName"
+          label="ชื่อวัด"
+          :rules="[(val) => !!val || `${'กรุณากรอกชื่อวัด'}`]"
+        />
+
+        <q-input
+          class="col-12 cursor-pointer inputgreen"
+          dense
+          ref="ordainDayBuddhistLentAddressRef"
+          bg-color="white"
+          outlined
+          :readonly="!edit || statusCheck === 'NEW'"
+          v-model="formDataOrdination.ordainDayBuddhistLentAddress"
+          label="ที่อยู่"
+          :rules="[(val) => !!val || `${'กรุณากรอกที่อยู่'}`]"
+          type="textarea"
+          hide-bottom-space
+        />
+        <q-input
+          type="textarea"
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          dense
+          bg-color="white"
+          outlined
+          ref="leaveDetailRef"
+          for="leaveDetailRef"
+          v-model="formDataOrdination.leaveDetail"
+          label="รายละเอียด"
+          :readonly="!edit || statusCheck === 'NEW'"
+        />
+        <div class="full-width col-12" v-if="statusCheck != 'NEW'">
+          <div class="q-col-gutter-sm row">
+            <!-- multiple -->
+            <q-file
+              ref="leaveDocumentRef"
+              v-model="formDataOrdination.leaveDocument"
+              @added="fileUploadDoc"
+              dense
+              label="เอกสารประกอบ"
+              multiple
+              outlined
+              bg-color="white"
+              use-chips
+            >
+              <template v-slot:prepend>
+                <q-icon name="attach_file" color="primary" />
+              </template>
+            </q-file>
+            <!-- <div class="col-12" v-if="formDataOrdination.leaveDocument.length == 0">
 							<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
 						</div> -->
-					</div>
-				</div>
-				<div class="col-12" v-if="data">
-					<div class="col-12 col-md-12 col-sm-12">
-						<q-card bordered>
-							<!-- <div class="col-12">
+          </div>
+        </div>
+        <div class="col-12" v-if="data">
+          <div class="col-12 col-md-12 col-sm-12">
+            <q-card bordered>
+              <!-- <div class="col-12">
 								<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ{{ leaveDocumentList }} </q-card>
 							</div> -->
-							<q-list separator v-if="leaveDocumentList && leaveDocumentList.length > 0">
-								<q-item v-for="(document, index) in leaveDocumentList" :key="index" class="q-my-xs">
-									<q-item-section>
-										<q-item-label class="row items-baseline">
-											<div class="col">
-												{{ "เอกสารแนบฉบับที่" + (index + 1) }}
-											</div>
-											<q-btn class="col-6" :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
-												<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
-											</q-btn>
-										</q-item-label>
-									</q-item-section>
-								</q-item>
-							</q-list>
-							<div class="col-12" v-else>
-								<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
-							</div>
-						</q-card>
-					</div>
-				</div>
+              <q-list
+                separator
+                v-if="leaveDocumentList && leaveDocumentList.length > 0"
+              >
+                <q-item
+                  v-for="(document, index) in leaveDocumentList"
+                  :key="index"
+                  class="q-my-xs"
+                >
+                  <q-item-section>
+                    <q-item-label class="row items-baseline">
+                      <div class="col">
+                        {{ "เอกสารแนบฉบับที่" + (index + 1) }}
+                      </div>
+                      <q-btn
+                        class="col-6"
+                        :href="document"
+                        target="_blank"
+                        outline
+                        color="blue"
+                        label="ดาวน์โหลด"
+                        size="12px"
+                      >
+                        <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+                      </q-btn>
+                    </q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+              <div class="col-12" v-else>
+                <q-card class="q-pa-md" bordered>
+                  ไม่มีรายการเอกสารประกอบ
+                </q-card>
+              </div>
+            </q-card>
+          </div>
+        </div>
 
-				<div class="col-12 col-sm-6 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="(file, index) in leaveDocumentList" :key="index" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.name }}
-									</q-item-label>
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
+        <div class="col-12 col-sm-6 row" v-if="!edit">
+          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+            <div class="q-pl-sm text-weight-bold text-dark">
+              เอกสารเพิ่มเติม
+            </div>
+          </div>
+          <q-card bordered flat class="full-width">
+            <q-list separator>
+              <q-item
+                v-for="(file, index) in leaveDocumentList"
+                :key="index"
+                class="q-my-xs"
+              >
+                <q-item-section>
+                  <q-item-label class="full-width ellipsis">
+                    {{ file.name }}
+                  </q-item-label>
+                  <q-item-label caption> </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </div>
+    </q-card>
 
-		<q-separator class="q-mt-sm" />
+    <q-separator class="q-mt-sm" />
 
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn v-if="!props.data || props.data.status == 'DRAFT'" id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"
-				><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
-			>
-			<q-btn v-if="data && statusCheck != 'NEW'" id="onSubmit" type="button" unelevated dense class="q-px-md items-center q-ml-sm" color="primary" label="ยื่นใบลา" @click="onConfirm"
-				><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
-			>
-		</div>
-	</form>
+    <div class="row col-12 q-pt-md">
+      <q-space />
+      <q-btn
+        v-if="!props.data || props.data.status == 'DRAFT'"
+        id="onSubmit"
+        type="submit"
+        unelevated
+        dense
+        class="q-px-md items-center btnBlue"
+        label="บันทึก"
+        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+      >
+      <q-btn
+        v-if="data && statusCheck != 'NEW'"
+        id="onSubmit"
+        type="button"
+        unelevated
+        dense
+        class="q-px-md items-center q-ml-sm"
+        color="primary"
+        label="ยื่นใบลา"
+        @click="onConfirm()"
+        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+      >
+    </div>
+  </form>
 </template>
diff --git a/src/modules/05_leave/components/FormLeave/07_HajjForm.vue b/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
index ca073ff..c2cb6ea 100644
--- a/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
+++ b/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
@@ -1,388 +1,507 @@
 <script setup lang="ts">
-import { reactive, ref, onMounted } from "vue"
-import { useCounterMixin } from "@/stores/mixin"
-import { useQuasar } from "quasar"
-import type { HajiForm } from "@/modules/05_leave/interface/request/AddAbsence"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRouter } from "vue-router"
+import { reactive, ref, onMounted, computed } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import type { HajiForm } from "@/modules/05_leave/interface/request/AddAbsence";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter } from "vue-router";
 
 /** Use */
-const router = useRouter()
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const mixin = useCounterMixin()
-const { date2Thai, dialogConfirm, calculateDurationYmd, fails, messageError, success, dateToISO } = mixin
-const edit = ref<boolean>(true)
-const files = ref<any>(null)
+const router = useRouter();
+const dataStore = useLeaveStore();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  dialogConfirm,
+  calculateDurationYmd,
+  fails,
+  messageError,
+  success,
+  dateToISO,
+} = mixin;
+const edit = ref<boolean>(true);
+const files = ref<any>(null);
 
 /** ตัวแปร ref สำหรับแสดง validate */
-const leaveWroteRef = ref<object | null>(null)
-const leavegovernmentDateRef = ref<object | null>(null)
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leaveDocumentRef = ref<object | null>(null)
+const leaveWroteRef = ref<object | null>(null);
+const leavegovernmentDateRef = ref<object | null>(null);
+const leaveStartDateRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const leaveDocumentRef = ref<object | null>(null);
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-	onConfirm: {
-		type: Function,
-		default: () => "",
-	},
-})
+  data: {
+    type: Object,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+});
 
 /** ข้อมูล v-model ของฟอร์ม */
 const formDataHaji = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	leavegovernmentDate: null,
-	leaveStartDate: null,
-	leaveEndDate: null,
-	totalLeave: null,
-	hajjDayStatus: "true",
-	leaveDocument: null,
-})
+  type: dataStore.typeId,
+  leaveWrote: "",
+  leavegovernmentDate: null,
+  leaveStartDate: null,
+  leaveEndDate: null,
+  totalLeave: null,
+  hajjDayStatus: "true",
+  leaveDocument: null,
+});
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const formRef: HajiForm = {
-	leaveWrote: leaveWroteRef,
-	leavegovernmentDate: leavegovernmentDateRef,
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leaveDocument: leaveDocumentRef,
-}
+  leaveWrote: leaveWroteRef,
+  leavegovernmentDate: leavegovernmentDateRef,
+  leaveStartDate: leaveStartDateRef,
+  leaveEndDate: leaveEndDateRef,
+  leaveDocument: leaveDocumentRef,
+};
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
+const nameFile = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
 const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
 
 /** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
 function onValidate() {
-	const hasError = []
-	for (const key in formRef) {
-		if (Object.prototype.hasOwnProperty.call(formRef, key)) {
-			const property = formRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		const formData = new FormData()
-		formDataHaji.leaveDocument.forEach((file: File) => {
-			formData.append("leaveDocument", file)
-		})
-		// formData.append("leaveDocument", formDataHaji.leaveDocument);
-		formData.append("type", formDataHaji.type)
-		formData.append("leaveStartDate", dateToISO(formDataHaji.leaveStartDate))
-		formData.append("leaveEndDate", dateToISO(formDataHaji.leaveEndDate))
-		formData.append("hajjDayStatus", formDataHaji.hajjDayStatus)
-		formData.append("leaveWrote", formDataHaji.leaveWrote)
-		formData.append("leaveDetail", formDataHaji.leaveDetail)
-		props.onSubmit(formData)
-	}
+  const hasError = [];
+  for (const key in formRef) {
+    if (Object.prototype.hasOwnProperty.call(formRef, key)) {
+      const property = formRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    const formData = new FormData();
+    formDataHaji.leaveDocument.forEach((file: File) => {
+      formData.append("leaveDocument", file);
+    });
+    // formData.append("leaveDocument", formDataHaji.leaveDocument);
+    formData.append("type", formDataHaji.type);
+    formData.append("leaveStartDate", dateToISO(formDataHaji.leaveStartDate));
+    formData.append("leaveEndDate", dateToISO(formDataHaji.leaveEndDate));
+    formData.append("hajjDayStatus", formDataHaji.hajjDayStatus);
+    formData.append("leaveWrote", formDataHaji.leaveWrote);
+    formData.append("leaveDetail", formDataHaji.leaveDetail);
+    props.onSubmit(formData, isLeave.value);
+  }
 }
 
 /**
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
-const leaveEndDateRules = ref([val => !!val || `${"กรุณาเลือกลาถึงวันที่"}`])
-const isLeave = ref<boolean>(true)
+const isLeave = ref<boolean>(true);
 async function fetchCheck() {
-	console.log("check")
-	await http
-		.post(config.API.leaveCheck(), {
-			type: dataStore.typeId ?? null,
-			StartLeaveDate: formDataHaji.leaveStartDate ?? null,
-			EndLeaveDate: formDataHaji.leaveEndDate ?? null,
-		})
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				// formDataHaji.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				formDataHaji.leaveTotal = data.totalDate
-				this.leaveEndDateRules = [val => !!val || `${"กรุณาเลือกลาถึงวันที่"}`]
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-				this.leaveEndDateRules = [val => false || `${"ไม่สามารถลาได้"}`]
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
+  console.log("check");
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataHaji.leaveStartDate ?? null,
+      EndLeaveDate: formDataHaji.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+      formDataHaji.leaveTotal = data.totalDate;
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
 }
 
 /**
  * function อัพเดทค่า LeaveTotal
  */
 function updateLeaveTotal() {
-	const newLeaveTotal = calculateDurationYmd(formDataHaji.leaveStartDate, formDataHaji.leaveEndDate)
-	formDataHaji.leaveTotal = newLeaveTotal
+  const newLeaveTotal = calculateDurationYmd(
+    formDataHaji.leaveStartDate,
+    formDataHaji.leaveEndDate
+  );
+  formDataHaji.leaveTotal = newLeaveTotal;
 }
 
-const leaveDocumentList = ref<any>()
-const statusCheck = ref<any>("")
+const dateEndInputStyle = computed(() => {
+  return !isLeave.value ? "input-alert" : "";
+});
+
+const leaveDocumentList = ref<any>();
+const statusCheck = ref<any>("");
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 onMounted(() => {
-	if (props.data) {
-		formDataHaji.leaveWrote = props.data.leaveWrote
-		formDataHaji.leaveTotal = props.data.leaveTotal
-		formDataHaji.leaveStartDate = props.data.leaveStartDate
-		formDataHaji.leaveEndDate = props.data.leaveEndDate
-		formDataHaji.totalLeave = props.data.totalLeave
-		formDataHaji.hajjDayStatus = props.data.hajjDayStatus
-		formDataHaji.leaveDetail = props.data.leaveDetail
-		leaveDocumentList.value = props.data.leaveDocument
-		statusCheck.value = props.data.status
-		// formDataHaji.leaveDocument = props.data.leaveDocument;
-	}
-})
+  if (props.data) {
+    formDataHaji.leaveWrote = props.data.leaveWrote;
+    formDataHaji.leaveTotal = props.data.leaveTotal;
+    formDataHaji.leaveStartDate = props.data.leaveStartDate;
+    formDataHaji.leaveEndDate = props.data.leaveEndDate;
+    formDataHaji.totalLeave = props.data.totalLeave;
+    formDataHaji.hajjDayStatus = props.data.hajjDayStatus;
+    formDataHaji.leaveDetail = props.data.leaveDetail;
+    leaveDocumentList.value = props.data.leaveDocument;
+    statusCheck.value = props.data.status;
+    // formDataHaji.leaveDocument = props.data.leaveDocument;
+  }
+});
 </script>
 
 <template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent="onValidate" class="full-width">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="row q-pa-sm q-col-gutter-sm">
-				<q-input
-					v-model="formDataHaji.leaveWrote"
-					ref="leaveWroteRef"
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					bg-color="white"
-					dense
-					outlined
-					label="เขียนที่"
-					hide-bottom-space
-					:readonly="!edit || statusCheck === 'NEW'"
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
+  <div style="display: flex; align-items: center">
+    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+  </div>
+  <form @submit.prevent="onValidate" class="full-width">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="row q-pa-sm q-col-gutter-sm">
+        <q-input
+          v-model="formDataHaji.leaveWrote"
+          ref="leaveWroteRef"
+          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          bg-color="white"
+          dense
+          outlined
+          label="เขียนที่"
+          hide-bottom-space
+          :readonly="!edit || statusCheck === 'NEW'"
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
 
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<datepicker
-							v-model="formDataHaji.leaveStartDate"
-							class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-							menu-class-name="modalfix"
-							autoApply
-							borderless
-							week-start="0"
-							:enableTimePicker="false"
-							:locale="'th'"
-							:readonly="!edit || statusCheck === 'NEW'"
-							@update:model-value="formDataHaji.leaveEndDate = null"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									ref="leaveStartDateRef"
-									bg-color="white"
-									class="full-width datepicker"
-									outlined
-									dense
-									hide-bottom-space
-									:label="`${'ลาตั้งแต่วันที่'}`"
-									:readonly="!edit || statusCheck === 'NEW'"
-									:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-									:model-value="formDataHaji.leaveStartDate != null ? date2Thai(formDataHaji.leaveStartDate) : null"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <datepicker
+              v-model="formDataHaji.leaveStartDate"
+              class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+              menu-class-name="modalfix"
+              autoApply
+              borderless
+              week-start="0"
+              :enableTimePicker="false"
+              :locale="'th'"
+              :readonly="!edit || statusCheck === 'NEW'"
+              @update:model-value="formDataHaji.leaveEndDate = null"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  ref="leaveStartDateRef"
+                  bg-color="white"
+                  class="full-width datepicker"
+                  outlined
+                  dense
+                  hide-bottom-space
+                  :label="`${'ลาตั้งแต่วันที่'}`"
+                  :readonly="!edit || statusCheck === 'NEW'"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+                  :model-value="
+                    formDataHaji.leaveStartDate != null
+                      ? date2Thai(formDataHaji.leaveStartDate)
+                      : null
+                  "
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
 
-						<datepicker
-							v-model="formDataHaji.leaveEndDate"
-							class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-							menu-class-name="modalfix"
-							autoApply
-							borderless
-							week-start="0"
-							:enableTimePicker="false"
-							:locale="'th'"
-							@update:model-value="updateLeaveTotal(), fetchCheck()"
-							:readonly="!formDataHaji.leaveStartDate || statusCheck === 'NEW'"
-							:min-date="formDataHaji.leaveStartDate"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									ref="leaveEndDateRef"
-									class="full-width datepicker"
-									bg-color="white"
-									outlined
-									dense
-									:readonly="!formDataHaji.leaveStartDate || statusCheck === 'NEW'"
-									hide-bottom-space
-									:label="`${'ลาถึงวันที่'}`"
-									:model-value="formDataHaji.leaveEndDate != null ? date2Thai(formDataHaji.leaveEndDate) : null"
-									:rules="leaveEndDateRules"
-									@update:model-value="fetchCheck()"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
+            <datepicker
+              v-model="formDataHaji.leaveEndDate"
+              class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+              menu-class-name="modalfix"
+              autoApply
+              borderless
+              week-start="0"
+              :enableTimePicker="false"
+              :locale="'th'"
+              @update:model-value="updateLeaveTotal(), fetchCheck()"
+              :readonly="!formDataHaji.leaveStartDate || statusCheck === 'NEW'"
+              :min-date="formDataHaji.leaveStartDate"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  ref="leaveEndDateRef"
+                  class="full-width datepicker"
+                  bg-color="white"
+                  outlined
+                  dense
+                  :readonly="
+                    !formDataHaji.leaveStartDate || statusCheck === 'NEW'
+                  "
+                  hide-bottom-space
+                  :label="`${'ลาถึงวันที่'}`"
+                  :model-value="
+                    formDataHaji.leaveEndDate != null
+                      ? date2Thai(formDataHaji.leaveEndDate)
+                      : null
+                  "
+                  @update:model-value="fetchCheck()"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
 
-						<q-input
-							class="col-12 col-md-2 col-sm-6"
-							dense
-							outlined
-							bg-color="white"
-							ref="leaveTotalRef"
-							for="leaveTotalRef"
-							v-model="formDataHaji.leaveTotal"
-							label="จำนวนวันที่ลา"
-							readonly
-							hide-bottom-space
-						/>
-						<datepicker class="col-12 col-md-4 col-sm-6" menu-class-name="modalfix" autoApply borderless readonly week-start="0" :locale="'th'" :enableTimePicker="false">
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									ref="leavegovernmentDateRef"
-									bg-color="white"
-									class="full-width"
-									outlined
-									dense
-									readonly
-									hide-bottom-space
-									:label="`${'วันที่เข้ารับราชการ'}`"
-									:model-value="dataStore.dateAppoint != null ? date2Thai(dataStore.dateAppoint) : null"
-									:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-					</div>
-				</div>
+            <q-input
+              :bottom-slots="!isLeave ? true : false"
+              :color="!isLeave ? 'red' : 'black'"
+              :bg-color="!isLeave ? 'red-2' : 'white'"
+              :border-color="!isLeave ? 'red' : 'gray'"
+              :input-class="!isLeave ? dateEndInputStyle : ''"
+              class="col-12 col-md-2 col-sm-6"
+              dense
+              outlined
+              ref="leaveTotalRef"
+              for="leaveTotalRef"
+              v-model="formDataHaji.leaveTotal"
+              label="จำนวนวันที่ลา"
+              readonly
+            >
+              <template v-slot:hint>
+                <span style="color: red">
+                  {{ !isLeave ? "จำนวนวันลาเกินที่กำหนด" : "" }}
+                </span>
+              </template>
+            </q-input>
 
-				<div class="q-pl-sm text-weight-bold text-dark col-12">เคยไปประกอบพิธีฮัจญ์หรือไม่</div>
-				<div class="col-12">
-					<q-radio v-model="formDataHaji.hajjDayStatus" :disable="statusCheck === 'NEW'" :val="true" checked-icon="task_alt" label="เคย" />
-					<q-radio v-model="formDataHaji.hajjDayStatus" :disable="statusCheck === 'NEW'" :val="false" checked-icon="task_alt" label="ไม่เคยไปประกอบพิธีฮัจญ์" />
-				</div>
+            <datepicker
+              class="col-12 col-md-4 col-sm-6"
+              menu-class-name="modalfix"
+              autoApply
+              borderless
+              readonly
+              week-start="0"
+              :locale="'th'"
+              :enableTimePicker="false"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  ref="leavegovernmentDateRef"
+                  bg-color="white"
+                  class="full-width"
+                  outlined
+                  dense
+                  readonly
+                  hide-bottom-space
+                  :label="`${'วันที่เข้ารับราชการ'}`"
+                  :model-value="
+                    dataStore.dateAppoint != null
+                      ? date2Thai(dataStore.dateAppoint)
+                      : null
+                  "
+                  :rules="[
+                    (val) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
+                  ]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--black)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+        </div>
 
-				<q-input
-					v-model="formDataHaji.leaveDetail"
-					class="col-12 q-mt-sm cursor-pointer inputgreen"
-					bg-color="white"
-					dense
-					outlined
-					type="textarea"
-					label="รายละเอียด"
-					:readonly="!edit || statusCheck === 'NEW'"
-				/>
-				<div class="full-width" v-if="statusCheck != 'NEW'">
-					<div class="q-col-gutter-sm row">
-						<!-- multiple -->
-						<q-file v-model="formDataHaji.leaveDocument" multiple bg-color="white" label="เอกสารประกอบ" use-chips @added="fileUploadDoc" dense outlined hide-bottom-space>
-							<template v-slot:prepend>
-								<q-icon name="attach_file" color="primary" />
-							</template>
-						</q-file>
-						<!-- <div class="col-12" v-if="formDataHaji.leaveDocument.length == 0">
+        <div class="q-pl-sm text-weight-bold text-dark col-12">
+          เคยไปประกอบพิธีฮัจญ์หรือไม่
+        </div>
+        <div class="col-12">
+          <q-radio
+            v-model="formDataHaji.hajjDayStatus"
+            :disable="statusCheck === 'NEW'"
+            :val="true"
+            checked-icon="task_alt"
+            label="เคย"
+          />
+          <q-radio
+            v-model="formDataHaji.hajjDayStatus"
+            :disable="statusCheck === 'NEW'"
+            :val="false"
+            checked-icon="task_alt"
+            label="ไม่เคยไปประกอบพิธีฮัจญ์"
+          />
+        </div>
+
+        <q-input
+          v-model="formDataHaji.leaveDetail"
+          class="col-12 q-mt-sm cursor-pointer inputgreen"
+          bg-color="white"
+          dense
+          outlined
+          type="textarea"
+          label="รายละเอียด"
+          :readonly="!edit || statusCheck === 'NEW'"
+        />
+        <div class="full-width" v-if="statusCheck != 'NEW'">
+          <div class="q-col-gutter-sm row">
+            <!-- multiple -->
+            <q-file
+              v-model="formDataHaji.leaveDocument"
+              multiple
+              bg-color="white"
+              label="เอกสารประกอบ"
+              use-chips
+              @added="fileUploadDoc"
+              dense
+              outlined
+              hide-bottom-space
+            >
+              <template v-slot:prepend>
+                <q-icon name="attach_file" color="primary" />
+              </template>
+            </q-file>
+            <!-- <div class="col-12" v-if="formDataHaji.leaveDocument.length == 0">
 							<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
 						</div> -->
-					</div>
-				</div>
-				<div class="col-12" v-if="data">
-					<div class="col-12 col-md-12 col-sm-12">
-						<q-card bordered>
-							<!-- <div class="col-12">
+          </div>
+        </div>
+        <div class="col-12" v-if="data">
+          <div class="col-12 col-md-12 col-sm-12">
+            <q-card bordered>
+              <!-- <div class="col-12">
 								<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ{{ leaveDocumentList }} </q-card>
 							</div> -->
-							<q-list separator v-if="leaveDocumentList && leaveDocumentList.length > 0">
-								<q-item v-for="(document, index) in leaveDocumentList" :key="index" class="q-my-xs">
-									<q-item-section>
-										<q-item-label class="row items-baseline">
-											<div class="col">
-												{{ "เอกสารแนบฉบับที่" + (index + 1) }}
-											</div>
-											<q-btn class="col-6" :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
-												<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
-											</q-btn>
-										</q-item-label>
-									</q-item-section>
-								</q-item>
-							</q-list>
+              <q-list
+                separator
+                v-if="leaveDocumentList && leaveDocumentList.length > 0"
+              >
+                <q-item
+                  v-for="(document, index) in leaveDocumentList"
+                  :key="index"
+                  class="q-my-xs"
+                >
+                  <q-item-section>
+                    <q-item-label class="row items-baseline">
+                      <div class="col">
+                        {{ "เอกสารแนบฉบับที่" + (index + 1) }}
+                      </div>
+                      <q-btn
+                        class="col-6"
+                        :href="document"
+                        target="_blank"
+                        outline
+                        color="blue"
+                        label="ดาวน์โหลด"
+                        size="12px"
+                      >
+                        <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+                      </q-btn>
+                    </q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
 
-							<div class="col-12" v-else>
-								<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
-							</div>
-						</q-card>
-					</div>
-				</div>
+              <div class="col-12" v-else>
+                <q-card class="q-pa-md" bordered>
+                  ไม่มีรายการเอกสารประกอบ
+                </q-card>
+              </div>
+            </q-card>
+          </div>
+        </div>
 
-				<div class="col-12 col-sm-6 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="(file, index) in leaveDocumentList" :key="index" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.name }}
-									</q-item-label>
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-		<q-separator class="q-mt-sm" />
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn v-if="!props.data || props.data.status == 'DRAFT'" id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"
-				><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
-			>
-			<q-btn v-if="data && statusCheck != 'NEW'" id="onSubmit" type="button" unelevated dense class="q-px-md items-center q-ml-sm" color="primary" label="ยื่นใบลา" @click="onConfirm"
-				><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
-			>
-		</div>
-	</form>
+        <div class="col-12 col-sm-6 row" v-if="!edit">
+          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+            <div class="q-pl-sm text-weight-bold text-dark">
+              เอกสารเพิ่มเติม
+            </div>
+          </div>
+          <q-card bordered flat class="full-width">
+            <q-list separator>
+              <q-item
+                v-for="(file, index) in leaveDocumentList"
+                :key="index"
+                class="q-my-xs"
+              >
+                <q-item-section>
+                  <q-item-label class="full-width ellipsis">
+                    {{ file.name }}
+                  </q-item-label>
+                  <q-item-label caption> </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </div>
+    </q-card>
+    <q-separator class="q-mt-sm" />
+    <div class="row col-12 q-pt-md">
+      <q-space />
+      <q-btn
+        v-if="!props.data || props.data.status == 'DRAFT'"
+        id="onSubmit"
+        type="submit"
+        unelevated
+        dense
+        class="q-px-md items-center btnBlue"
+        label="บันทึก"
+        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+      >
+      <q-btn
+        v-if="data && statusCheck != 'NEW'"
+        id="onSubmit"
+        type="button"
+        unelevated
+        dense
+        class="q-px-md items-center q-ml-sm"
+        color="primary"
+        label="ยื่นใบลา"
+        @click="onConfirm()"
+        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+      >
+    </div>
+  </form>
 </template>
diff --git a/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue b/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
index 9a52128..39ca8d7 100644
--- a/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
+++ b/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
@@ -1,464 +1,564 @@
 <script setup lang="ts">
-import { reactive, ref, onMounted } from "vue"
-import { useCounterMixin } from "@/stores/mixin"
-import { useQuasar } from "quasar"
-import type { MilitaryForm } from "@/modules/05_leave/interface/request/AddAbsence"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRouter } from "vue-router"
+import { reactive, ref, onMounted, computed } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import type { MilitaryForm } from "@/modules/05_leave/interface/request/AddAbsence";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter } from "vue-router";
 
 /** Use */
-const router = useRouter()
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const mixin = useCounterMixin()
-const { date2Thai, dialogConfirm, calculateDurationYmd, dateToISO, success, messageError, fails } = mixin
-const edit = ref<boolean>(true)
-const files = ref<any>(null)
+const router = useRouter();
+const dataStore = useLeaveStore();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  dialogConfirm,
+  calculateDurationYmd,
+  dateToISO,
+  success,
+  messageError,
+  fails,
+} = mixin;
+const edit = ref<boolean>(true);
+const files = ref<any>(null);
 
 /** ตัวแปร ref สำหรับแสดง validate */
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leaveWroteRef = ref<object | null>(null)
-const absentDaySummonRef = ref<object | null>(null)
-const absentDayLocationRef = ref<object | null>(null)
-const absentDayRegistorDateRef = ref<object | null>(null)
-const absentDayGetInRef = ref<object | null>(null)
-const absentDayAtRef = ref<object | null>(null)
-const leaveDetailRef = ref<object | null>(null)
+const leaveStartDateRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const leaveWroteRef = ref<object | null>(null);
+const absentDaySummonRef = ref<object | null>(null);
+const absentDayLocationRef = ref<object | null>(null);
+const absentDayRegistorDateRef = ref<object | null>(null);
+const absentDayGetInRef = ref<object | null>(null);
+const absentDayAtRef = ref<object | null>(null);
+const leaveDetailRef = ref<object | null>(null);
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-	onConfirm: {
-		type: Function,
-		default: () => "",
-	},
-})
+  data: {
+    type: Object,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+});
 
 /** ข้อมูล v-model ของฟอร์ม */
 const formDataMilitary = reactive<any>({
-	type: dataStore.typeId,
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leaveTotal: 0,
-	leaveDocument: null,
-	leaveWrote: "",
-	absentDaySummon: "",
-	absentDayLocation: "",
-	absentDayRegistorDate: null,
-	absentDayGetIn: "",
-	absentDayAt: "",
-	leaveDetail: "",
-})
+  type: dataStore.typeId,
+  leaveStartDate: null,
+  leaveEndDate: null,
+  leaveTotal: 0,
+  leaveDocument: null,
+  leaveWrote: "",
+  absentDaySummon: "",
+  absentDayLocation: "",
+  absentDayRegistorDate: null,
+  absentDayGetIn: "",
+  absentDayAt: "",
+  leaveDetail: "",
+});
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
+const nameFile = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
 const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const formRef: MilitaryForm = {
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leaveWrote: leaveWroteRef,
-	absentDaySummon: absentDaySummonRef,
-	absentDayLocation: absentDayLocationRef,
-	absentDayRegistorDate: absentDayRegistorDateRef,
-	absentDayGetIn: absentDayGetInRef,
-	absentDayAt: absentDayAtRef,
-	leaveDetail: leaveDetailRef,
-}
+  leaveStartDate: leaveStartDateRef,
+  leaveEndDate: leaveEndDateRef,
+  leaveWrote: leaveWroteRef,
+  absentDaySummon: absentDaySummonRef,
+  absentDayLocation: absentDayLocationRef,
+  absentDayRegistorDate: absentDayRegistorDateRef,
+  absentDayGetIn: absentDayGetInRef,
+  absentDayAt: absentDayAtRef,
+  leaveDetail: leaveDetailRef,
+};
 
 /** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
 function onValidate() {
-	const hasError = []
-	for (const key in formRef) {
-		if (Object.prototype.hasOwnProperty.call(formRef, key)) {
-			const property = formRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		const formData = new FormData()
-		formDataMilitary.leaveDocument.forEach((file: File) => {
-			formData.append("leaveDocument", file)
-		})
-		// formData.append("leaveDocument", formDataMilitary.leaveDocument);
-		formData.append("type", formDataMilitary.type)
-		formData.append("leaveStartDate", dateToISO(formDataMilitary.leaveStartDate))
-		formData.append("leaveEndDate", dateToISO(formDataMilitary.leaveEndDate))
-		formData.append("absentDaySummon", formDataMilitary.absentDaySummon)
-		formData.append("absentDayLocation", formDataMilitary.absentDayLocation)
-		formData.append("absentDayRegistorDate", dateToISO(formDataMilitary.absentDayRegistorDate))
-		formData.append("absentDayGetIn", formDataMilitary.absentDayGetIn)
-		formData.append("absentDayAt", formDataMilitary.absentDayAt)
-		formData.append("leaveWrote", formDataMilitary.leaveWrote)
-		formData.append("leaveDetail", formDataMilitary.leaveDetail)
-		props.onSubmit(formData)
-	}
+  const hasError = [];
+  for (const key in formRef) {
+    if (Object.prototype.hasOwnProperty.call(formRef, key)) {
+      const property = formRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    const formData = new FormData();
+    formDataMilitary.leaveDocument.forEach((file: File) => {
+      formData.append("leaveDocument", file);
+    });
+    // formData.append("leaveDocument", formDataMilitary.leaveDocument);
+    formData.append("type", formDataMilitary.type);
+    formData.append(
+      "leaveStartDate",
+      dateToISO(formDataMilitary.leaveStartDate)
+    );
+    formData.append("leaveEndDate", dateToISO(formDataMilitary.leaveEndDate));
+    formData.append("absentDaySummon", formDataMilitary.absentDaySummon);
+    formData.append("absentDayLocation", formDataMilitary.absentDayLocation);
+    formData.append(
+      "absentDayRegistorDate",
+      dateToISO(formDataMilitary.absentDayRegistorDate)
+    );
+    formData.append("absentDayGetIn", formDataMilitary.absentDayGetIn);
+    formData.append("absentDayAt", formDataMilitary.absentDayAt);
+    formData.append("leaveWrote", formDataMilitary.leaveWrote);
+    formData.append("leaveDetail", formDataMilitary.leaveDetail);
+    props.onSubmit(formData, isLeave.value);
+  }
 }
 
 /**
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
-const leaveEndDateRules = ref([val => !!val || `${"กรุณาเลือกลาถึงวันที่"}`])
-const isLeave = ref<boolean>(true)
+const isLeave = ref<boolean>(true);
 async function fetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), {
-			type: dataStore.typeId ?? null,
-			StartLeaveDate: formDataMilitary.leaveStartDate ?? null,
-			EndLeaveDate: formDataMilitary.leaveEndDate ?? null,
-		})
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				// formDataMilitary.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				formDataMilitary.leaveTotal = data.totalDate
-				this.leaveEndDateRules = [val => !!val || `${"กรุณาเลือกลาถึงวันที่"}`]
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-				this.leaveEndDateRules = [val => false || `${"ไม่สามารถลาได้"}`]
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataMilitary.leaveStartDate ?? null,
+      EndLeaveDate: formDataMilitary.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+      formDataMilitary.leaveTotal = data.totalDate;
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
 }
 
 /**
  * function อัพเดทค่า LeaveTotal
  */
 function updateLeaveTotal() {
-	const newLeaveTotal = calculateDurationYmd(formDataMilitary.leaveStartDate, formDataMilitary.leaveEndDate)
-	formDataMilitary.leaveTotal = newLeaveTotal
-	console.log("test")
+  const newLeaveTotal = calculateDurationYmd(
+    formDataMilitary.leaveStartDate,
+    formDataMilitary.leaveEndDate
+  );
+  formDataMilitary.leaveTotal = newLeaveTotal;
+  console.log("test");
 }
 
-const leaveDocumentList = ref<any>()
-const statusCheck = ref<any>("")
+const dateEndInputStyle = computed(() => {
+  return !isLeave.value ? "input-alert" : "";
+});
+
+const leaveDocumentList = ref<any>();
+const statusCheck = ref<any>("");
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 onMounted(() => {
-	if (props.data) {
-		formDataMilitary.leaveWrote = props.data.leaveWrote
-		formDataMilitary.leaveStartDate = props.data.leaveStartDate
-		formDataMilitary.leaveEndDate = props.data.leaveEndDate
-		formDataMilitary.leaveTotal = props.data.leaveTotal
-		formDataMilitary.absentDaySummon = props.data.absentDaySummon
-		formDataMilitary.absentDayLocation = props.data.absentDayLocation
-		formDataMilitary.absentDayRegistorDate = props.data.absentDayRegistorDate
-		formDataMilitary.absentDayGetIn = props.data.absentDayGetIn
-		formDataMilitary.absentDayAt = props.data.absentDayAt
-		formDataMilitary.leaveDetail = props.data.leaveDetail
-		leaveDocumentList.value = props.data.leaveDocument
-		statusCheck.value = props.data.status
-		// formDataMilitary.leaveDocument = props.data.leaveDocument;
-	}
-})
+  if (props.data) {
+    formDataMilitary.leaveWrote = props.data.leaveWrote;
+    formDataMilitary.leaveStartDate = props.data.leaveStartDate;
+    formDataMilitary.leaveEndDate = props.data.leaveEndDate;
+    formDataMilitary.leaveTotal = props.data.leaveTotal;
+    formDataMilitary.absentDaySummon = props.data.absentDaySummon;
+    formDataMilitary.absentDayLocation = props.data.absentDayLocation;
+    formDataMilitary.absentDayRegistorDate = props.data.absentDayRegistorDate;
+    formDataMilitary.absentDayGetIn = props.data.absentDayGetIn;
+    formDataMilitary.absentDayAt = props.data.absentDayAt;
+    formDataMilitary.leaveDetail = props.data.leaveDetail;
+    leaveDocumentList.value = props.data.leaveDocument;
+    statusCheck.value = props.data.status;
+    // formDataMilitary.leaveDocument = props.data.leaveDocument;
+  }
+});
 </script>
 
 <template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="row q-pa-sm q-col-gutter-sm">
-				<q-input
-					ref="leaveWroteRef"
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					outlined
-					bg-color="white"
-					hide-bottom-space
-					v-model="formDataMilitary.leaveWrote"
-					label="เขียนที่"
-					:readonly="!edit || statusCheck === 'NEW'"
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
+  <div style="display: flex; align-items: center">
+    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+  </div>
+  <form @submit.prevent="onValidate">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="row q-pa-sm q-col-gutter-sm">
+        <q-input
+          ref="leaveWroteRef"
+          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          dense
+          outlined
+          bg-color="white"
+          hide-bottom-space
+          v-model="formDataMilitary.leaveWrote"
+          label="เขียนที่"
+          :readonly="!edit || statusCheck === 'NEW'"
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
 
-				<datepicker
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataMilitary.leaveStartDate"
-					:locale="'th'"
-					autoApply
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					:readonly="!edit || statusCheck === 'NEW'"
-					@update:model-value="formDataMilitary.leaveEndDate = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							bg-color="white"
-							dense
-							ref="leaveStartDateRef"
-							hide-bottom-space
-							:readonly="!edit || statusCheck === 'NEW'"
-							class="full-width datepicker"
-							:model-value="formDataMilitary.leaveStartDate != null ? date2Thai(formDataMilitary.leaveStartDate) : null"
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
+        <datepicker
+          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataMilitary.leaveStartDate"
+          :locale="'th'"
+          autoApply
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          :readonly="!edit || statusCheck === 'NEW'"
+          @update:model-value="formDataMilitary.leaveEndDate = null"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              bg-color="white"
+              dense
+              ref="leaveStartDateRef"
+              hide-bottom-space
+              :readonly="!edit || statusCheck === 'NEW'"
+              class="full-width datepicker"
+              :model-value="
+                formDataMilitary.leaveStartDate != null
+                  ? date2Thai(formDataMilitary.leaveStartDate)
+                  : null
+              "
+              :label="`${'ลาตั้งแต่วันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
 
-				<datepicker
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataMilitary.leaveEndDate"
-					:locale="'th'"
-					autoApply
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					@update:model-value="updateLeaveTotal, fetchCheck()"
-					:readonly="!formDataMilitary.leaveStartDate || statusCheck === 'NEW'"
-					:min-date="formDataMilitary.leaveStartDate"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveEndDateRef"
-							bg-color="white"
-							hide-bottom-space
-							:readonly="!formDataMilitary.leaveStartDate || statusCheck === 'NEW'"
-							class="full-width datepicker"
-							:model-value="formDataMilitary.leaveEndDate != null ? date2Thai(formDataMilitary.leaveEndDate) : null"
-							:label="`${'ลาถึงวันที่'}`"
-							:rules="leaveEndDateRules"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
+        <datepicker
+          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataMilitary.leaveEndDate"
+          :locale="'th'"
+          autoApply
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          @update:model-value="updateLeaveTotal, fetchCheck()"
+          :readonly="!formDataMilitary.leaveStartDate || statusCheck === 'NEW'"
+          :min-date="formDataMilitary.leaveStartDate"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="leaveEndDateRef"
+              bg-color="white"
+              hide-bottom-space
+              :readonly="
+                !formDataMilitary.leaveStartDate || statusCheck === 'NEW'
+              "
+              class="full-width datepicker"
+              :model-value="
+                formDataMilitary.leaveEndDate != null
+                  ? date2Thai(formDataMilitary.leaveEndDate)
+                  : null
+              "
+              :label="`${'ลาถึงวันที่'}`"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
 
-				<q-input
-					class="col-12 col-md-2 col-sm-6"
-					dense
-					outlined
-					bg-color="white"
-					ref="leaveTotalRef"
-					for="leaveTotalRef"
-					v-model="formDataMilitary.leaveTotal"
-					label="จำนวนวันที่ลา"
-					readonly
-					hide-bottom-space
-				/>
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<q-input
-							ref="absentDaySummonRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							dense
-							bg-color="white"
-							outlined
-							v-model="formDataMilitary.absentDaySummon"
-							label="ได้รับหมายเรียกของ"
-							hide-bottom-space
-							:readonly="!edit || statusCheck === 'NEW'"
-							:rules="[val => !!val || `${'กรุณากรอกได้รับหมายเรียกของ'}`]"
-						/>
+        <q-input
+          :bottom-slots="!isLeave ? true : false"
+          :color="!isLeave ? 'red' : 'black'"
+          :bg-color="!isLeave ? 'red-2' : 'white'"
+          :border-color="!isLeave ? 'red' : 'gray'"
+          :input-class="!isLeave ? dateEndInputStyle : ''"
+          class="col-12 col-md-2 col-sm-6"
+          dense
+          outlined
+          ref="leaveTotalRef"
+          for="leaveTotalRef"
+          v-model="formDataMilitary.leaveTotal"
+          label="จำนวนวันที่ลา"
+          readonly
+        >
+          <template v-slot:hint>
+            <span style="color: red">
+              {{ !isLeave ? "จำนวนวันลาเกินที่กำหนด" : "" }}
+            </span>
+          </template>
+        </q-input>
 
-						<q-input
-							ref="atRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							dense
-							bg-color="white"
-							outlined
-							v-model="formDataMilitary.absentDayLocation"
-							label="ที่"
-							hide-bottom-space
-							:readonly="!edit || statusCheck === 'NEW'"
-							:rules="[val => !!val || `${'กรุณากรอกที่'}`]"
-						/>
-					</div>
-				</div>
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <q-input
+              ref="absentDaySummonRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              dense
+              bg-color="white"
+              outlined
+              v-model="formDataMilitary.absentDaySummon"
+              label="ได้รับหมายเรียกของ"
+              hide-bottom-space
+              :readonly="!edit || statusCheck === 'NEW'"
+              :rules="[(val) => !!val || `${'กรุณากรอกได้รับหมายเรียกของ'}`]"
+            />
 
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<datepicker
-							class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-							menu-class-name="modalfix"
-							v-model="formDataMilitary.absentDayRegistorDate"
-							:locale="'th'"
-							autoApply
-							borderless
-							:readonly="!edit || statusCheck === 'NEW'"
-							:enableTimePicker="false"
-							week-start="0"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									outlined
-									dense
-									ref="absentDayRegistorDateRef"
-									bg-color="white"
-									hide-bottom-space
-									:readonly="!edit || statusCheck === 'NEW'"
-									class="full-width datepicker"
-									:model-value="formDataMilitary.absentDayRegistorDate != null ? date2Thai(formDataMilitary.absentDayRegistorDate) : null"
-									:label="`${'ลงวันที่'}`"
-									:rules="[val => !!val || `${'กรุณาเลือกลงวันที่'}`]"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
+            <q-input
+              ref="atRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              dense
+              bg-color="white"
+              outlined
+              v-model="formDataMilitary.absentDayLocation"
+              label="ที่"
+              hide-bottom-space
+              :readonly="!edit || statusCheck === 'NEW'"
+              :rules="[(val) => !!val || `${'กรุณากรอกที่'}`]"
+            />
+          </div>
+        </div>
 
-						<q-input
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							dense
-							bg-color="white"
-							ref="absentDayGetInRef"
-							outlined
-							v-model="formDataMilitary.absentDayGetIn"
-							label="ให้เข้ารับการ"
-							hide-bottom-space
-							:readonly="!edit || statusCheck === 'NEW'"
-							:rules="[val => !!val || `${'กรุณากรอกให้เข้ารับการ'}`]"
-						/>
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <datepicker
+              class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+              menu-class-name="modalfix"
+              v-model="formDataMilitary.absentDayRegistorDate"
+              :locale="'th'"
+              autoApply
+              borderless
+              :readonly="!edit || statusCheck === 'NEW'"
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  ref="absentDayRegistorDateRef"
+                  bg-color="white"
+                  hide-bottom-space
+                  :readonly="!edit || statusCheck === 'NEW'"
+                  class="full-width datepicker"
+                  :model-value="
+                    formDataMilitary.absentDayRegistorDate != null
+                      ? date2Thai(formDataMilitary.absentDayRegistorDate)
+                      : null
+                  "
+                  :label="`${'ลงวันที่'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
 
-						<q-input
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							dense
-							bg-color="white"
-							outlined
-							ref="absentDayAtRef"
-							v-model="formDataMilitary.absentDayAt"
-							label="ณ ที่"
-							hide-bottom-space
-							:readonly="!edit || statusCheck === 'NEW'"
-							:rules="[val => !!val || `${'กรุณากรอก ณ ที่'}`]"
-						/>
-					</div>
-				</div>
+            <q-input
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              dense
+              bg-color="white"
+              ref="absentDayGetInRef"
+              outlined
+              v-model="formDataMilitary.absentDayGetIn"
+              label="ให้เข้ารับการ"
+              hide-bottom-space
+              :readonly="!edit || statusCheck === 'NEW'"
+              :rules="[(val) => !!val || `${'กรุณากรอกให้เข้ารับการ'}`]"
+            />
 
-				<q-input
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					:readonly="!edit || statusCheck === 'NEW'"
-					bg-color="white"
-					outlined
-					v-model="formDataMilitary.leaveDetail"
-					type="textarea"
-					label="รายละเอียด"
-				/>
+            <q-input
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              dense
+              bg-color="white"
+              outlined
+              ref="absentDayAtRef"
+              v-model="formDataMilitary.absentDayAt"
+              label="ณ ที่"
+              hide-bottom-space
+              :readonly="!edit || statusCheck === 'NEW'"
+              :rules="[(val) => !!val || `${'กรุณากรอก ณ ที่'}`]"
+            />
+          </div>
+        </div>
 
-				<div class="col-12" v-if="statusCheck != 'NEW'">
-					<!-- multiple -->
-					<q-file v-model="formDataMilitary.leaveDocument" multiple dense label="เอกสารประกอบ" outlined bg-color="white" hide-bottom-space use-chips @added="fileUploadDoc">
-						<template v-slot:prepend>
-							<q-icon name="attach_file" color="primary" />
-						</template>
-					</q-file>
-					<!-- <div class="col-12" v-if="formDataMilitary.leaveDocument.length == 0">
+        <q-input
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          dense
+          :readonly="!edit || statusCheck === 'NEW'"
+          bg-color="white"
+          outlined
+          v-model="formDataMilitary.leaveDetail"
+          type="textarea"
+          label="รายละเอียด"
+        />
+
+        <div class="col-12" v-if="statusCheck != 'NEW'">
+          <!-- multiple -->
+          <q-file
+            v-model="formDataMilitary.leaveDocument"
+            multiple
+            dense
+            label="เอกสารประกอบ"
+            outlined
+            bg-color="white"
+            hide-bottom-space
+            use-chips
+            @added="fileUploadDoc"
+          >
+            <template v-slot:prepend>
+              <q-icon name="attach_file" color="primary" />
+            </template>
+          </q-file>
+          <!-- <div class="col-12" v-if="formDataMilitary.leaveDocument.length == 0">
 						<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
 					</div> -->
-					<div class="col-12" v-if="data">
-						<div class="col-12 col-md-12 col-sm-12">
-							<q-card bordered>
-								<!-- <div class="col-12">
+          <div class="col-12" v-if="data">
+            <div class="col-12 col-md-12 col-sm-12">
+              <q-card bordered>
+                <!-- <div class="col-12">
 								<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ{{ leaveDocumentList }} </q-card>
 							</div> -->
-								<q-list separator v-if="leaveDocumentList && leaveDocumentList.length > 0">
-									<q-item v-for="(document, index) in leaveDocumentList" :key="index" class="q-my-xs">
-										<q-item-section>
-											<q-item-label class="row items-baseline">
-												<div class="col">
-													{{ "เอกสารแนบฉบับที่" + (index + 1) }}
-												</div>
-												<q-btn class="col-6" :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
-													<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
-												</q-btn>
-											</q-item-label>
-										</q-item-section>
-									</q-item>
-								</q-list>
-								<div class="col-12" v-else>
-									<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
-								</div>
-							</q-card>
-						</div>
-					</div>
-				</div>
+                <q-list
+                  separator
+                  v-if="leaveDocumentList && leaveDocumentList.length > 0"
+                >
+                  <q-item
+                    v-for="(document, index) in leaveDocumentList"
+                    :key="index"
+                    class="q-my-xs"
+                  >
+                    <q-item-section>
+                      <q-item-label class="row items-baseline">
+                        <div class="col">
+                          {{ "เอกสารแนบฉบับที่" + (index + 1) }}
+                        </div>
+                        <q-btn
+                          class="col-6"
+                          :href="document"
+                          target="_blank"
+                          outline
+                          color="blue"
+                          label="ดาวน์โหลด"
+                          size="12px"
+                        >
+                          <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+                        </q-btn>
+                      </q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+                <div class="col-12" v-else>
+                  <q-card class="q-pa-md" bordered>
+                    ไม่มีรายการเอกสารประกอบ
+                  </q-card>
+                </div>
+              </q-card>
+            </div>
+          </div>
+        </div>
 
-				<div class="col-12 col-sm-6 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="(file, index) in leaveDocumentList" :key="index" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.name }}
-									</q-item-label>
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-		<q-separator class="q-mt-sm" />
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn v-if="!props.data || props.data.status == 'DRAFT'" id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"
-				><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
-			>
-			<q-btn v-if="data && statusCheck != 'NEW'" id="onSubmit" type="button" unelevated dense class="q-px-md items-center q-ml-sm" color="primary" label="ยื่นใบลา" @click="onConfirm"
-				><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
-			>
-		</div>
-	</form>
+        <div class="col-12 col-sm-6 row" v-if="!edit">
+          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+            <div class="q-pl-sm text-weight-bold text-dark">
+              เอกสารเพิ่มเติม
+            </div>
+          </div>
+          <q-card bordered flat class="full-width">
+            <q-list separator>
+              <q-item
+                v-for="(file, index) in leaveDocumentList"
+                :key="index"
+                class="q-my-xs"
+              >
+                <q-item-section>
+                  <q-item-label class="full-width ellipsis">
+                    {{ file.name }}
+                  </q-item-label>
+                  <q-item-label caption> </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </div>
+    </q-card>
+    <q-separator class="q-mt-sm" />
+    <div class="row col-12 q-pt-md">
+      <q-space />
+      <q-btn
+        v-if="!props.data || props.data.status == 'DRAFT'"
+        id="onSubmit"
+        type="submit"
+        unelevated
+        dense
+        class="q-px-md items-center btnBlue"
+        label="บันทึก"
+        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+      >
+      <q-btn
+        v-if="data && statusCheck != 'NEW'"
+        id="onSubmit"
+        type="button"
+        unelevated
+        dense
+        class="q-px-md items-center q-ml-sm"
+        color="primary"
+        label="ยื่นใบลา"
+        @click="onConfirm()"
+        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+      >
+    </div>
+  </form>
 </template>
diff --git a/src/modules/05_leave/components/FormLeave/09_StudyForm.vue b/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
index 9e2e0f7..55195f1 100644
--- a/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
+++ b/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
@@ -1,565 +1,706 @@
 <script setup lang="ts">
-import { reactive, ref, computed, onMounted } from "vue"
-import { useCounterMixin } from "@/stores/mixin"
-import { useQuasar } from "quasar"
-import type { studyDaySubjectForm } from "@/modules/05_leave/interface/request/AddAbsence"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRouter } from "vue-router"
+import { reactive, ref, computed, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import type { studyDaySubjectForm } from "@/modules/05_leave/interface/request/AddAbsence";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter } from "vue-router";
 
 /** Use */
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const router = useRouter()
-const mixin = useCounterMixin()
-const { date2Thai, dialogConfirm, calculateDurationYmd, fails, dateToISO, success, messageError, arabicNumberToText } = mixin
-const edit = ref<boolean>(true)
-const files = ref<any>(null)
+const dataStore = useLeaveStore();
+const $q = useQuasar();
+const router = useRouter();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  dialogConfirm,
+  calculateDurationYmd,
+  fails,
+  dateToISO,
+  success,
+  messageError,
+  arabicNumberToText,
+} = mixin;
+const edit = ref<boolean>(true);
+const files = ref<any>(null);
 
 /** ตัวแปร ref สำหรับแสดง validate */
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leavebirthDateRef = ref<object | null>(null)
-const leavegovernmentDateRef = ref<object | null>(null)
-const leaveSalaryRef = ref<object | null>(null)
-const leaveNumberRef = ref<object | null>(null)
-const leaveAddressRef = ref<object | null>(null)
-const studyDayScholarshipRef = ref<object | null>(null)
-const studyDayCountryRef = ref<object | null>(null)
-const studyDayUniversityNameRef = ref<object | null>(null)
-const studyDayDegreeLevelRef = ref<object | null>(null)
-const studyDaySubjectRef = ref<object | null>(null)
-const leaveWroteRef = ref<object | null>(null)
+const leaveStartDateRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const leavebirthDateRef = ref<object | null>(null);
+const leavegovernmentDateRef = ref<object | null>(null);
+const leaveSalaryRef = ref<object | null>(null);
+const leaveNumberRef = ref<object | null>(null);
+const leaveAddressRef = ref<object | null>(null);
+const studyDayScholarshipRef = ref<object | null>(null);
+const studyDayCountryRef = ref<object | null>(null);
+const studyDayUniversityNameRef = ref<object | null>(null);
+const studyDayDegreeLevelRef = ref<object | null>(null);
+const studyDaySubjectRef = ref<object | null>(null);
+const leaveWroteRef = ref<object | null>(null);
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-	onConfirm: {
-		type: Function,
-		default: () => "",
-	},
-})
+  data: {
+    type: Object,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+});
 
 /** ข้อมูล v-model ของฟอร์ม */
 const formDataStudy = reactive<any>({
-	type: dataStore.typeId, //
-	leaveWrote: "", //
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leavebirthDate: new Date(),
-	leavegovernmentDate: new Date(),
-	leaveSalary: 10000,
-	leaveSalaryText: arabicNumberToText(10000),
-	leaveNumber: "",
-	leaveAddress: "",
-	studyDayScholarship: "",
-	studyDayCountry: "",
-	studyDayUniversityName: "", //
-	studyDayDegreeLevel: "", //
-	studyDaySubject: "", //
-	leaveDocument: "", //
-	leaveDetail: "",
-	leaveTotal: "",
-})
+  type: dataStore.typeId, //
+  leaveWrote: "", //
+  leaveStartDate: null,
+  leaveEndDate: null,
+  leavebirthDate: new Date(),
+  leavegovernmentDate: new Date(),
+  leaveSalary: 10000,
+  leaveSalaryText: arabicNumberToText(10000),
+  leaveNumber: "",
+  leaveAddress: "",
+  studyDayScholarship: "",
+  studyDayCountry: "",
+  studyDayUniversityName: "", //
+  studyDayDegreeLevel: "", //
+  studyDaySubject: "", //
+  leaveDocument: "", //
+  leaveDetail: "",
+  leaveTotal: "",
+});
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const formRef: studyDaySubjectForm = {
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leavebirthDate: leavebirthDateRef,
-	leavegovernmentDate: leavegovernmentDateRef,
-	leaveSalary: leaveSalaryRef,
-	leaveNumber: leaveNumberRef,
-	leaveAddress: leaveAddressRef,
-	studyDayScholarship: studyDayScholarshipRef,
-	studyDayCountry: studyDayCountryRef,
-	studyDayUniversityName: studyDayUniversityNameRef,
-	studyDayDegreeLevel: studyDayDegreeLevelRef,
-	studyDaySubject: studyDaySubjectRef,
-	leaveWrote: leaveWroteRef,
-}
+  leaveStartDate: leaveStartDateRef,
+  leaveEndDate: leaveEndDateRef,
+  leavebirthDate: leavebirthDateRef,
+  leavegovernmentDate: leavegovernmentDateRef,
+  leaveSalary: leaveSalaryRef,
+  leaveNumber: leaveNumberRef,
+  leaveAddress: leaveAddressRef,
+  studyDayScholarship: studyDayScholarshipRef,
+  studyDayCountry: studyDayCountryRef,
+  studyDayUniversityName: studyDayUniversityNameRef,
+  studyDayDegreeLevel: studyDayDegreeLevelRef,
+  studyDaySubject: studyDaySubjectRef,
+  leaveWrote: leaveWroteRef,
+};
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
+const nameFile = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
 const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
 
 /** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
 function onValidate() {
-	const hasError = []
-	for (const key in formRef) {
-		if (Object.prototype.hasOwnProperty.call(formRef, key)) {
-			const property = formRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		const formData = new FormData()
-		formDataStudy.leaveDocument.forEach((file: File) => {
-			formData.append("leaveDocument", file)
-		})
-		// formData.append("leaveDocument", formDataStudy.leaveDocument);
-		formData.append("type", formDataStudy.type) //
-		formData.append("leaveStartDate", dateToISO(formDataStudy.leaveStartDate)) //
-		formData.append("leaveEndDate", dateToISO(formDataStudy.leaveEndDate)) //
-		formData.append("studyDaySubject", formDataStudy.studyDaySubject)
-		formData.append("studyDayDegreeLevel", formDataStudy.studyDayDegreeLevel)
-		formData.append("leavegovernmentDate", dateToISO(formDataStudy.leavegovernmentDate))
-		formData.append("studyDayUniversityName", formDataStudy.studyDayUniversityName)
-		formData.append("studyDayCountry", formDataStudy.studyDayCountry)
-		formData.append("leaveWrote", formDataStudy.leaveWrote) //
-		formData.append("leaveDetail", formDataStudy.leaveDetail) //
-		formData.append("studyDayScholarship", formDataStudy.studyDayScholarship)
-		formData.append("leaveAddress", formDataStudy.leaveAddress) //
-		formData.append("leaveNumber", formDataStudy.leaveNumber) //
-		props.onSubmit(formData)
-	}
+  const hasError = [];
+  for (const key in formRef) {
+    if (Object.prototype.hasOwnProperty.call(formRef, key)) {
+      const property = formRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    const formData = new FormData();
+    formDataStudy.leaveDocument.forEach((file: File) => {
+      formData.append("leaveDocument", file);
+    });
+    // formData.append("leaveDocument", formDataStudy.leaveDocument);
+    formData.append("type", formDataStudy.type); //
+    formData.append("leaveStartDate", dateToISO(formDataStudy.leaveStartDate)); //
+    formData.append("leaveEndDate", dateToISO(formDataStudy.leaveEndDate)); //
+    formData.append("studyDaySubject", formDataStudy.studyDaySubject);
+    formData.append("studyDayDegreeLevel", formDataStudy.studyDayDegreeLevel);
+    formData.append(
+      "leavegovernmentDate",
+      dateToISO(formDataStudy.leavegovernmentDate)
+    );
+    formData.append(
+      "studyDayUniversityName",
+      formDataStudy.studyDayUniversityName
+    );
+    formData.append("studyDayCountry", formDataStudy.studyDayCountry);
+    formData.append("leaveWrote", formDataStudy.leaveWrote); //
+    formData.append("leaveDetail", formDataStudy.leaveDetail); //
+    formData.append("studyDayScholarship", formDataStudy.studyDayScholarship);
+    formData.append("leaveAddress", formDataStudy.leaveAddress); //
+    formData.append("leaveNumber", formDataStudy.leaveNumber); //
+    props.onSubmit(formData, isLeave.value);
+  }
 }
 
+const dateEndInputStyle = computed(() => {
+  return !isLeave.value ? "input-alert" : "";
+});
+
 /**
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
-const isLeave = ref<boolean>(true)
-const leaveEndDateRules = ref([val => !!val || `${"กรุณาเลือกลาถึงวันที่"}`])
-
+const isLeave = ref<boolean>(true);
 async function fetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), {
-			type: dataStore.typeId ?? null,
-			StartLeaveDate: formDataStudy.leaveStartDate ?? null,
-			EndLeaveDate: formDataStudy.leaveEndDate ?? null,
-		})
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				// formDataStudy.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday;
-				formDataStudy.leaveTotal = data.totalDate
-				this.leaveEndDateRules = [val => !!val || `${"กรุณาเลือกลาถึงวันที่"}`]
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-				this.leaveEndDateRules = [val => false || `${"ไม่สามารถลาได้"}`]
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataStudy.leaveStartDate ?? null,
+      EndLeaveDate: formDataStudy.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+    //   formDataStudy.leaveTotal = formDataStudy.leaveStartDatee;
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
 }
 
 /**
  * function อัพเดทค่า LeaveTotal
  */
 function updateLeaveTotal() {
-	const newLeaveTotal = calculateDurationYmd(formDataStudy.leaveStartDate, formDataStudy.leaveEndDate)
-	formDataStudy.leaveTotal = newLeaveTotal
+  const newLeaveTotal = calculateDurationYmd(
+    formDataStudy.leaveStartDate,
+    formDataStudy.leaveEndDate
+  );
+  formDataStudy.leaveTotal = newLeaveTotal;
 }
 
-const leaveDocumentList = ref<any>()
-const statusCheck = ref<any>("")
+const leaveDocumentList = ref<any>();
+const statusCheck = ref<any>("");
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 onMounted(async () => {
-	if (props.data) {
-		formDataStudy.leaveWrote = props.data.leaveWrote
-		formDataStudy.leaveStartDate = props.data.leaveStartDate
-		formDataStudy.leaveEndDate = props.data.leaveEndDate
-		formDataStudy.leaveTotal = props.data.leaveTotal
-		formDataStudy.leavebirthDate = props.data.leavebirthDate
-		formDataStudy.leavegovernmentDate = props.data.leavegovernmentDate
-		formDataStudy.leaveSalary = props.data.leaveSalary
-		formDataStudy.leaveSalaryText = props.data.leaveSalaryText
-		formDataStudy.leaveNumber = props.data.leaveNumber
-		formDataStudy.leaveAddress = props.data.leaveAddress
-		formDataStudy.studyDayScholarship = props.data.studyDayScholarship
-		formDataStudy.studyDayCountry = props.data.studyDayCountry
-		formDataStudy.studyDayUniversityName = props.data.studyDayUniversityName
-		formDataStudy.studyDayDegreeLevel = props.data.studyDayDegreeLevel
-		formDataStudy.studyDaySubject = props.data.studyDaySubject
-		// formDataStudy.leaveDocument = props.data.leaveDocument;
-		formDataStudy.leaveDetail = props.data.leaveDetail
-		leaveDocumentList.value = props.data.leaveDocument
-		const leaveTotal = await calculateDurationYmd(props.data.leaveStartDate, props.data.leaveEndDate)
-		formDataStudy.leaveTotal = leaveTotal
-		statusCheck.value = props.data.status
-	}
-})
+  if (props.data) {
+    formDataStudy.leaveWrote = props.data.leaveWrote;
+    formDataStudy.leaveStartDate = props.data.leaveStartDate;
+    formDataStudy.leaveEndDate = props.data.leaveEndDate;
+    formDataStudy.leaveTotal = props.data.leaveTotal;
+    formDataStudy.leavebirthDate = props.data.leavebirthDate;
+    formDataStudy.leavegovernmentDate = props.data.leavegovernmentDate;
+    formDataStudy.leaveSalary = props.data.leaveSalary;
+    formDataStudy.leaveSalaryText = props.data.leaveSalaryText;
+    formDataStudy.leaveNumber = props.data.leaveNumber;
+    formDataStudy.leaveAddress = props.data.leaveAddress;
+    formDataStudy.studyDayScholarship = props.data.studyDayScholarship;
+    formDataStudy.studyDayCountry = props.data.studyDayCountry;
+    formDataStudy.studyDayUniversityName = props.data.studyDayUniversityName;
+    formDataStudy.studyDayDegreeLevel = props.data.studyDayDegreeLevel;
+    formDataStudy.studyDaySubject = props.data.studyDaySubject;
+    // formDataStudy.leaveDocument = props.data.leaveDocument;
+    formDataStudy.leaveDetail = props.data.leaveDetail;
+    leaveDocumentList.value = props.data.leaveDocument;
+    const leaveTotal = await calculateDurationYmd(
+      props.data.leaveStartDate,
+      props.data.leaveEndDate
+    );
+    formDataStudy.leaveTotal = leaveTotal;
+    statusCheck.value = props.data.status;
+  }
+});
 </script>
 
 <template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="row q-pa-sm q-col-gutter-sm">
-				<q-input
-					v-model="formDataStudy.leaveWrote"
-					ref="leaveWroteRef"
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					bg-color="white"
-					dense
-					outlined
-					label="เขียนที่"
-					hide-bottom-space
-					:readonly="!edit || statusCheck === 'NEW'"
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
+  <div style="display: flex; align-items: center">
+    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+  </div>
+  <form @submit.prevent="onValidate">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="row q-pa-sm q-col-gutter-sm">
+        <q-input
+          v-model="formDataStudy.leaveWrote"
+          ref="leaveWroteRef"
+          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          bg-color="white"
+          dense
+          outlined
+          label="เขียนที่"
+          hide-bottom-space
+          :readonly="!edit || statusCheck === 'NEW'"
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
 
-				<datepicker
-					v-model="formDataStudy.leaveStartDate"
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					autoApply
-					borderless
-					week-start="0"
-					:enableTimePicker="false"
-					:locale="'th'"
-					:readonly="!edit || statusCheck === 'NEW'"
-					@update:model-value="formDataStudy.leaveEndDate = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							ref="leaveStartDateRef"
-							class="full-width datepicker"
-							bg-color="white"
-							outlined
-							dense
-							lazy-rules
-							:readonly="!edit || statusCheck === 'NEW'"
-							hide-bottom-space
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:model-value="formDataStudy.leaveStartDate != null ? date2Thai(formDataStudy.leaveStartDate) : null"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
+        <datepicker
+          v-model="formDataStudy.leaveStartDate"
+          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          autoApply
+          borderless
+          week-start="0"
+          :enableTimePicker="false"
+          :locale="'th'"
+          :readonly="!edit || statusCheck === 'NEW'"
+          @update:model-value="formDataStudy.leaveEndDate = null"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              ref="leaveStartDateRef"
+              class="full-width datepicker"
+              bg-color="white"
+              outlined
+              dense
+              lazy-rules
+              :readonly="!edit || statusCheck === 'NEW'"
+              hide-bottom-space
+              :label="`${'ลาตั้งแต่วันที่'}`"
+              :model-value="
+                formDataStudy.leaveStartDate != null
+                  ? date2Thai(formDataStudy.leaveStartDate)
+                  : null
+              "
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
 
-				<datepicker
-					v-model="formDataStudy.leaveEndDate"
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					autoApply
-					borderless
-					week-start="0"
-					:locale="'th'"
-					@update:model-value="updateLeaveTotal(), fetchCheck()"
-					:readonly="!formDataStudy.leaveStartDate || statusCheck === 'NEW'"
-					:enableTimePicker="false"
-					:min-date="formDataStudy.leaveStartDate"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							ref="leaveEndDateRef"
-							class="full-width datepicker"
-							outlined
-							dense
-							lazy-rules
-							bg-color="white"
-							hide-bottom-space
-							:label="`${'ลาถึงวันที่'}`"
-							:readonly="!formDataStudy.leaveStartDate || statusCheck === 'NEW'"
-							:model-value="formDataStudy.leaveEndDate != null ? date2Thai(formDataStudy.leaveEndDate) : null"
-							:rules="leaveEndDateRules"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
+        <datepicker
+          v-model="formDataStudy.leaveEndDate"
+          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          autoApply
+          borderless
+          week-start="0"
+          :locale="'th'"
+          @update:model-value="updateLeaveTotal(), fetchCheck()"
+          :readonly="!formDataStudy.leaveStartDate || statusCheck === 'NEW'"
+          :enableTimePicker="false"
+          :min-date="formDataStudy.leaveStartDate"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              ref="leaveEndDateRef"
+              class="full-width datepicker"
+              outlined
+              dense
+              lazy-rules
+              bg-color="white"
+              hide-bottom-space
+              :label="`${'ลาถึงวันที่'}`"
+              :readonly="!formDataStudy.leaveStartDate || statusCheck === 'NEW'"
+              :model-value="
+                formDataStudy.leaveEndDate != null
+                  ? date2Thai(formDataStudy.leaveEndDate)
+                  : null
+              "
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
 
-				<q-input
-					class="col-12 col-md-2 col-sm-6"
-					dense
-					outlined
-					bg-color="white"
-					ref="leaveTotalRef"
-					for="leaveTotalRef"
-					v-model="formDataStudy.leaveTotal"
-					label="มีกำหนด"
-					readonly
-					hide-bottom-space
-				/>
+        <q-input
+          :bottom-slots="!isLeave ? true : false"
+          :color="!isLeave ? 'red' : 'black'"
+          :bg-color="!isLeave ? 'red-2' : 'white'"
+          :border-color="!isLeave ? 'red' : 'gray'"
+          :input-class="!isLeave ? dateEndInputStyle : ''"
+          class="col-12 col-md-2 col-sm-6"
+          dense
+          outlined
+          ref="leaveTotalRef"
+          for="leaveTotalRef"
+          v-model="formDataStudy.leaveTotal"
+          label="มีกำหนด"
+          readonly
+        >
+          <template v-slot:hint>
+            <span style="color: red">
+              {{ !isLeave ? "จำนวนวันลาเกินที่กำหนด" : "" }}
+            </span>
+          </template>
+        </q-input>
 
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<datepicker class="col-12 col-md-3 col-sm-6" menu-class-name="modalfix" autoApply borderless week-start="0" readonly :enableTimePicker="false" :locale="'th'">
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									ref="leavegovernmentDateRef"
-									class="full-width"
-									bg-color="white"
-									outlined
-									readonly
-									dense
-									hide-bottom-space
-									:label="`${'วันที่เข้ารับราชการ'}`"
-									:model-value="dataStore.dateAppoint != null ? date2Thai(dataStore.dateAppoint) : null"
-									:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <datepicker
+              class="col-12 col-md-3 col-sm-6"
+              menu-class-name="modalfix"
+              autoApply
+              borderless
+              week-start="0"
+              readonly
+              :enableTimePicker="false"
+              :locale="'th'"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  ref="leavegovernmentDateRef"
+                  class="full-width"
+                  bg-color="white"
+                  outlined
+                  readonly
+                  dense
+                  hide-bottom-space
+                  :label="`${'วันที่เข้ารับราชการ'}`"
+                  :model-value="
+                    dataStore.dateAppoint != null
+                      ? date2Thai(dataStore.dateAppoint)
+                      : null
+                  "
+                  :rules="[
+                    (val) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
+                  ]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--black)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
 
-						<datepicker class="col-12 col-md-3 col-sm-6" menu-class-name="modalfix" autoApply borderless readonly week-start="0" :enableTimePicker="false" :locale="'th'">
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									ref="leavebirthDateRef"
-									class="full-width"
-									bg-color="white"
-									outlined
-									dense
-									readonly
-									hide-bottom-space
-									:label="`${'วันเดือนปีเกิด'}`"
-									:model-value="dataStore.birthDate != null ? date2Thai(dataStore.birthDate) : null"
-									:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
+            <datepicker
+              class="col-12 col-md-3 col-sm-6"
+              menu-class-name="modalfix"
+              autoApply
+              borderless
+              readonly
+              week-start="0"
+              :enableTimePicker="false"
+              :locale="'th'"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  ref="leavebirthDateRef"
+                  class="full-width"
+                  bg-color="white"
+                  outlined
+                  dense
+                  readonly
+                  hide-bottom-space
+                  :label="`${'วันเดือนปีเกิด'}`"
+                  :model-value="
+                    dataStore.birthDate != null
+                      ? date2Thai(dataStore.birthDate)
+                      : null
+                  "
+                  :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--black)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
 
-						<q-input :model-value="dataStore.salary" ref="leaveSalaryRef" class="col-12 col-sm-6 col-md-3" bg-color="white" dense outlined readonly label="เงินเดือนปัจจุบัน" />
+            <q-input
+              :model-value="dataStore.salary"
+              ref="leaveSalaryRef"
+              class="col-12 col-sm-6 col-md-3"
+              bg-color="white"
+              dense
+              outlined
+              readonly
+              label="เงินเดือนปัจจุบัน"
+            />
 
-						<q-input
-							:model-value="dataStore.salaryText"
-							ref="leaveSalaryRef"
-							class="col-12 col-sm-6 col-md-3"
-							bg-color="white"
-							dense
-							readonly
-							outlined
-							label="เงินเดือนปัจจุบัน (ตัวอักษร)"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกเงินเดือนปัจจุบัน'}`]"
-						/>
-					</div>
-				</div>
+            <q-input
+              :model-value="dataStore.salaryText"
+              ref="leaveSalaryRef"
+              class="col-12 col-sm-6 col-md-3"
+              bg-color="white"
+              dense
+              readonly
+              outlined
+              label="เงินเดือนปัจจุบัน (ตัวอักษร)"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือนปัจจุบัน'}`]"
+            />
+          </div>
+        </div>
 
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<q-input
-							v-model="formDataStudy.studyDayUniversityName"
-							ref="studyDayUniversityNameRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							:readonly="!edit || statusCheck === 'NEW'"
-							label="ชื่อสถานศึกษา"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกชื่อสถานศึกษา'}`]"
-						/>
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <q-input
+              v-model="formDataStudy.studyDayUniversityName"
+              ref="studyDayUniversityNameRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              bg-color="white"
+              dense
+              outlined
+              :readonly="!edit || statusCheck === 'NEW'"
+              label="ชื่อสถานศึกษา"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกชื่อสถานศึกษา'}`]"
+            />
 
-						<q-input
-							v-model="formDataStudy.studyDayDegreeLevel"
-							ref="studyDayDegreeLevelRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							:readonly="!edit || statusCheck === 'NEW'"
-							label="ชั้นปริญญา"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกชั้นปริญญา'}`]"
-						/>
+            <q-input
+              v-model="formDataStudy.studyDayDegreeLevel"
+              ref="studyDayDegreeLevelRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              bg-color="white"
+              dense
+              outlined
+              :readonly="!edit || statusCheck === 'NEW'"
+              label="ชั้นปริญญา"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกชั้นปริญญา'}`]"
+            />
 
-						<q-input
-							v-model="formDataStudy.studyDaySubject"
-							ref="studyDaySubjectRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							:readonly="!edit || statusCheck === 'NEW'"
-							label="ศึกษาวิชา"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกศึกษาวิชา'}`]"
-						/>
+            <q-input
+              v-model="formDataStudy.studyDaySubject"
+              ref="studyDaySubjectRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              bg-color="white"
+              dense
+              outlined
+              :readonly="!edit || statusCheck === 'NEW'"
+              label="ศึกษาวิชา"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกศึกษาวิชา'}`]"
+            />
 
-						<q-input
-							v-model="formDataStudy.studyDayCountry"
-							ref="studyDayCountryRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							:readonly="!edit || statusCheck === 'NEW'"
-							label="ประเทศ"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกประเทศ'}`]"
-						/>
+            <q-input
+              v-model="formDataStudy.studyDayCountry"
+              ref="studyDayCountryRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              bg-color="white"
+              dense
+              outlined
+              :readonly="!edit || statusCheck === 'NEW'"
+              label="ประเทศ"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกประเทศ'}`]"
+            />
 
-						<q-input
-							v-model="formDataStudy.studyDayScholarship"
-							ref="studyDayScholarshipRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							:readonly="!edit || statusCheck === 'NEW'"
-							label="ด้วยทุน"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกด้วยทุน'}`]"
-						/>
+            <q-input
+              v-model="formDataStudy.studyDayScholarship"
+              ref="studyDayScholarshipRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              bg-color="white"
+              dense
+              outlined
+              :readonly="!edit || statusCheck === 'NEW'"
+              label="ด้วยทุน"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกด้วยทุน'}`]"
+            />
 
-						<q-input
-							v-model="formDataStudy.leaveNumber"
-							ref="leaveNumberRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							:readonly="!edit || statusCheck === 'NEW'"
-							unmasked-value
-							hide-bottom-space
-							mask="(###)-###-####"
-							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
-						/>
+            <q-input
+              v-model="formDataStudy.leaveNumber"
+              ref="leaveNumberRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              bg-color="white"
+              dense
+              outlined
+              :readonly="!edit || statusCheck === 'NEW'"
+              unmasked-value
+              hide-bottom-space
+              mask="(###)-###-####"
+              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
+              ]"
+            />
 
-						<q-input
-							v-model="formDataStudy.leaveAddress"
-							ref="leaveAddressRef"
-							class="col-12 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							:readonly="!edit || statusCheck === 'NEW'"
-							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
-						/>
-					</div>
-				</div>
+            <q-input
+              v-model="formDataStudy.leaveAddress"
+              ref="leaveAddressRef"
+              class="col-12 cursor-pointer inputgreen"
+              bg-color="white"
+              dense
+              outlined
+              :readonly="!edit || statusCheck === 'NEW'"
+              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+              hide-bottom-space
+              :rules="[
+                (val) => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
+              ]"
+            />
+          </div>
+        </div>
 
-				<q-input
-					v-model="formDataStudy.leaveDetail"
-					:readonly="!edit || statusCheck === 'NEW'"
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					bg-color="white"
-					dense
-					outlined
-					type="textarea"
-					label="รายละเอียด"
-				/>
+        <q-input
+          v-model="formDataStudy.leaveDetail"
+          :readonly="!edit || statusCheck === 'NEW'"
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          bg-color="white"
+          dense
+          outlined
+          type="textarea"
+          label="รายละเอียด"
+        />
 
-				<div class="col-12" v-if="statusCheck != 'NEW'">
-					<!-- multiple -->
-					<q-file v-model="formDataStudy.leaveDocument" bg-color="white" multiple dense outlined use-chips @added="fileUploadDoc" label="เอกสารประกอบ">
-						<template v-slot:prepend>
-							<q-icon name="attach_file" color="primary" />
-						</template>
-					</q-file>
-					<!-- <div class="col-12" v-if="formDataStudy.leaveDocument.length == 0">
+        <div class="col-12" v-if="statusCheck != 'NEW'">
+          <!-- multiple -->
+          <q-file
+            v-model="formDataStudy.leaveDocument"
+            bg-color="white"
+            multiple
+            dense
+            outlined
+            use-chips
+            @added="fileUploadDoc"
+            label="เอกสารประกอบ"
+          >
+            <template v-slot:prepend>
+              <q-icon name="attach_file" color="primary" />
+            </template>
+          </q-file>
+          <!-- <div class="col-12" v-if="formDataStudy.leaveDocument.length == 0">
 						<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
 					</div> -->
-					<div class="col-12" v-if="data">
-						<div class="col-12 col-md-12 col-sm-12">
-							<q-card bordered>
-								<!-- <div class="col-12">
+          <div class="col-12" v-if="data">
+            <div class="col-12 col-md-12 col-sm-12">
+              <q-card bordered>
+                <!-- <div class="col-12">
 								<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ{{ leaveDocumentList }} </q-card>
 							</div> -->
-								<q-list separator v-if="leaveDocumentList && leaveDocumentList.length > 0">
-									<q-item v-for="(document, index) in leaveDocumentList" :key="index" class="q-my-xs">
-										<q-item-section>
-											<q-item-label class="row items-baseline">
-												<div class="col">
-													{{ "เอกสารแนบฉบับที่" + (index + 1) }}
-												</div>
-												<q-btn class="col-6" :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
-													<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
-												</q-btn>
-											</q-item-label>
-										</q-item-section>
-									</q-item>
-								</q-list>
-								<div class="col-12" v-else>
-									<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
-								</div>
-							</q-card>
-						</div>
-					</div>
-				</div>
+                <q-list
+                  separator
+                  v-if="leaveDocumentList && leaveDocumentList.length > 0"
+                >
+                  <q-item
+                    v-for="(document, index) in leaveDocumentList"
+                    :key="index"
+                    class="q-my-xs"
+                  >
+                    <q-item-section>
+                      <q-item-label class="row items-baseline">
+                        <div class="col">
+                          {{ "เอกสารแนบฉบับที่" + (index + 1) }}
+                        </div>
+                        <q-btn
+                          class="col-6"
+                          :href="document"
+                          target="_blank"
+                          outline
+                          color="blue"
+                          label="ดาวน์โหลด"
+                          size="12px"
+                        >
+                          <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+                        </q-btn>
+                      </q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+                <div class="col-12" v-else>
+                  <q-card class="q-pa-md" bordered>
+                    ไม่มีรายการเอกสารประกอบ
+                  </q-card>
+                </div>
+              </q-card>
+            </div>
+          </div>
+        </div>
 
-				<div class="col-12 col-sm-6 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="(file, index) in leaveDocumentList" :key="index" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.name }}
-									</q-item-label>
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-		<q-separator class="q-mt-sm" />
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn v-if="!props.data || props.data.status == 'DRAFT'" id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"
-				><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
-			>
-			<q-btn v-if="data && statusCheck != 'NEW'" id="onSubmit" type="button" unelevated dense class="q-px-md items-center q-ml-sm" color="primary" label="ยื่นใบลา" @click="onConfirm"
-				><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
-			>
-		</div>
-	</form>
+        <div class="col-12 col-sm-6 row" v-if="!edit">
+          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+            <div class="q-pl-sm text-weight-bold text-dark">
+              เอกสารเพิ่มเติม
+            </div>
+          </div>
+          <q-card bordered flat class="full-width">
+            <q-list separator>
+              <q-item
+                v-for="(file, index) in leaveDocumentList"
+                :key="index"
+                class="q-my-xs"
+              >
+                <q-item-section>
+                  <q-item-label class="full-width ellipsis">
+                    {{ file.name }}
+                  </q-item-label>
+                  <q-item-label caption> </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </div>
+    </q-card>
+    <q-separator class="q-mt-sm" />
+    <div class="row col-12 q-pt-md">
+      <q-space />
+      <q-btn
+        v-if="!props.data || props.data.status == 'DRAFT'"
+        id="onSubmit"
+        type="submit"
+        unelevated
+        dense
+        class="q-px-md items-center btnBlue"
+        label="บันทึก"
+        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+      >
+      <q-btn
+        v-if="data && statusCheck != 'NEW'"
+        id="onSubmit"
+        type="button"
+        unelevated
+        dense
+        class="q-px-md items-center q-ml-sm"
+        color="primary"
+        label="ยื่นใบลา"
+        @click="onConfirm()"
+        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+      >
+    </div>
+  </form>
 </template>
diff --git a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
index 0e34655..2194a9c 100644
--- a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
+++ b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
@@ -1,565 +1,696 @@
 <script setup lang="ts">
-import { reactive, ref, computed, onMounted } from "vue"
-import { useCounterMixin } from "@/stores/mixin"
-import type { TrainForm } from "@/modules/05_leave/interface/request/AddAbsence"
-import { useQuasar } from "quasar"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRouter } from "vue-router"
+import { reactive, ref, computed, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import type { TrainForm } from "@/modules/05_leave/interface/request/AddAbsence";
+import { useQuasar } from "quasar";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter } from "vue-router";
 
 /** Use */
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const router = useRouter()
-const mixin = useCounterMixin()
-const { date2Thai, dialogConfirm, arabicNumberToText, calculateDurationYmd, fails, dateToISO, success, messageError } = mixin
-const edit = ref<boolean>(true)
-const files = ref<any>(null)
+const dataStore = useLeaveStore();
+const $q = useQuasar();
+const router = useRouter();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  dialogConfirm,
+  arabicNumberToText,
+  calculateDurationYmd,
+  fails,
+  dateToISO,
+  success,
+  messageError,
+} = mixin;
+const edit = ref<boolean>(true);
+const files = ref<any>(null);
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-	onConfirm: {
-		type: Function,
-		default: () => "",
-	},
-})
+  data: {
+    type: Object,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+});
 
 /** ข้อมูล v-model ของฟอร์ม */
 const formDataTrain = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leavebirthDate: new Date(),
-	leavegovernmentDate: new Date(),
-	leaveSalary: 10000,
-	leaveSalaryText: arabicNumberToText(10000),
-	leaveNumber: "",
-	leaveAddress: "",
-	studyDayScholarship: "",
-	studyDayCountry: "",
-	studyDayTrainingSubject: "",
-	studyDayTrainingName: "",
-	leaveDocument: "",
-	leaveDetail: "",
-})
+  type: dataStore.typeId,
+  leaveWrote: "",
+  leaveStartDate: null,
+  leaveEndDate: null,
+  leavebirthDate: new Date(),
+  leavegovernmentDate: new Date(),
+  leaveSalary: 10000,
+  leaveSalaryText: arabicNumberToText(10000),
+  leaveNumber: "",
+  leaveAddress: "",
+  studyDayScholarship: "",
+  studyDayCountry: "",
+  studyDayTrainingSubject: "",
+  studyDayTrainingName: "",
+  leaveDocument: "",
+  leaveDetail: "",
+});
 
 /** ตัวแปร ref สำหรับแสดง validate */
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leavebirthDateRef = ref<object | null>(null)
-const leavegovernmentDateRef = ref<object | null>(null)
-const leaveNumberRef = ref<object | null>(null)
-const leaveAddressRef = ref<object | null>(null)
-const studyDayScholarshipRef = ref<object | null>(null)
-const studyDayCountryRef = ref<object | null>(null)
-const studyDayTrainingSubjectRef = ref<object | null>(null)
-const studyDayTrainingNameRef = ref<object | null>(null)
-const leaveWroteRef = ref<object | null>(null)
+const leaveStartDateRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const leavebirthDateRef = ref<object | null>(null);
+const leavegovernmentDateRef = ref<object | null>(null);
+const leaveNumberRef = ref<object | null>(null);
+const leaveAddressRef = ref<object | null>(null);
+const studyDayScholarshipRef = ref<object | null>(null);
+const studyDayCountryRef = ref<object | null>(null);
+const studyDayTrainingSubjectRef = ref<object | null>(null);
+const studyDayTrainingNameRef = ref<object | null>(null);
+const leaveWroteRef = ref<object | null>(null);
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const formRef: TrainForm = {
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leavebirthDate: leavebirthDateRef,
-	leavegovernmentDate: leavegovernmentDateRef,
-	leaveNumber: leaveNumberRef,
-	leaveAddress: leaveAddressRef,
-	studyDayScholarship: studyDayScholarshipRef,
-	studyDayCountry: studyDayCountryRef,
-	studyDayTrainingSubject: studyDayTrainingSubjectRef,
-	studyDayTrainingName: studyDayTrainingNameRef,
-	leaveWrote: leaveWroteRef,
-}
+  leaveStartDate: leaveStartDateRef,
+  leaveEndDate: leaveEndDateRef,
+  leavebirthDate: leavebirthDateRef,
+  leavegovernmentDate: leavegovernmentDateRef,
+  leaveNumber: leaveNumberRef,
+  leaveAddress: leaveAddressRef,
+  studyDayScholarship: studyDayScholarshipRef,
+  studyDayCountry: studyDayCountryRef,
+  studyDayTrainingSubject: studyDayTrainingSubjectRef,
+  studyDayTrainingName: studyDayTrainingNameRef,
+  leaveWrote: leaveWroteRef,
+};
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
+const nameFile = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
 const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
 
 /** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
 function onValidate() {
-	const hasError = []
+  const hasError = [];
 
-	for (const key in formRef) {
-		if (Object.prototype.hasOwnProperty.call(formRef, key)) {
-			const property = formRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		const formData = new FormData()
-		formDataTrain.leaveDocument.forEach((file: File) => {
-			formData.append("leaveDocument", file)
-		})
-		// formData.append("leaveDocument", formDataTrain.leaveDocument);
-		formData.append("type", formDataTrain.type) //
-		formData.append("leaveStartDate", dateToISO(formDataTrain.leaveStartDate)) //
-		formData.append("leaveEndDate", dateToISO(formDataTrain.leaveEndDate)) //
-		formData.append("studyDayCountry", formDataTrain.studyDayCountry)
-		formData.append("leavegovernmentDate", dateToISO(formDataTrain.leavegovernmentDate))
-		formData.append("leavebirthDate", dateToISO(formDataTrain.leavebirthDate))
-		formData.append("studyDayTrainingName", formDataTrain.studyDayTrainingName)
-		formData.append("studyDayTrainingSubject", formDataTrain.studyDayTrainingSubject)
-		formData.append("leaveWrote", formDataTrain.leaveWrote) //
-		formData.append("leaveDetail", formDataTrain.leaveDetail) //
-		formData.append("studyDayScholarship", formDataTrain.studyDayScholarship)
-		formData.append("leaveAddress", formDataTrain.leaveAddress) //
-		formData.append("leaveNumber", formDataTrain.leaveNumber) //
-		formData.append("leaveSalaryText", formDataTrain.leaveSalaryText) //
-		formData.append("leaveSalary", formDataTrain.leaveSalary) //
-		formData.append("leaveTotal", formDataTrain.leaveTotal) //
-		props.onSubmit(formData)
-	}
+  for (const key in formRef) {
+    if (Object.prototype.hasOwnProperty.call(formRef, key)) {
+      const property = formRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    const formData = new FormData();
+    formDataTrain.leaveDocument.forEach((file: File) => {
+      formData.append("leaveDocument", file);
+    });
+    // formData.append("leaveDocument", formDataTrain.leaveDocument);
+    formData.append("type", formDataTrain.type); //
+    formData.append("leaveStartDate", dateToISO(formDataTrain.leaveStartDate)); //
+    formData.append("leaveEndDate", dateToISO(formDataTrain.leaveEndDate)); //
+    formData.append("studyDayCountry", formDataTrain.studyDayCountry);
+    formData.append(
+      "leavegovernmentDate",
+      dateToISO(formDataTrain.leavegovernmentDate)
+    );
+    formData.append("leavebirthDate", dateToISO(formDataTrain.leavebirthDate));
+    formData.append("studyDayTrainingName", formDataTrain.studyDayTrainingName);
+    formData.append(
+      "studyDayTrainingSubject",
+      formDataTrain.studyDayTrainingSubject
+    );
+    formData.append("leaveWrote", formDataTrain.leaveWrote); //
+    formData.append("leaveDetail", formDataTrain.leaveDetail); //
+    formData.append("studyDayScholarship", formDataTrain.studyDayScholarship);
+    formData.append("leaveAddress", formDataTrain.leaveAddress); //
+    formData.append("leaveNumber", formDataTrain.leaveNumber); //
+    formData.append("leaveSalaryText", formDataTrain.leaveSalaryText); //
+    formData.append("leaveSalary", formDataTrain.leaveSalary); //
+    formData.append("leaveTotal", formDataTrain.leaveTotal); //
+    props.onSubmit(formData, isLeave.value);
+  }
 }
 
 /**
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
-const leaveEndDateRules = ref([val => !!val || `${"กรุณาเลือกลาถึงวันที่"}`])
 
-const isLeave = ref<boolean>(true)
+const isLeave = ref<boolean>(true);
 async function fetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), {
-			type: dataStore.typeId ?? null,
-			StartLeaveDate: formDataTrain.leaveStartDate ?? null,
-			EndLeaveDate: formDataTrain.leaveEndDate ?? null,
-		})
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				// formDataTrain.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				formDataTrain.leaveTotal = data.totalDate
-				this.leaveEndDateRules = [val => !!val || `${"กรุณาเลือกลาถึงวันที่"}`]
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-				this.leaveEndDateRules = [val => false || `${"ไม่สามารถลาได้"}`]
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataTrain.leaveStartDate ?? null,
+      EndLeaveDate: formDataTrain.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+      //   formDataTrain.leaveTotal = data.totalDate;
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
 }
 
 /**
  * function อัพเดทค่า LeaveTotal
  */
 function updateLeaveTotal() {
-	const newLeaveTotal = calculateDurationYmd(formDataTrain.leaveStartDate, formDataTrain.leaveEndDate)
-	formDataTrain.leaveTotal = newLeaveTotal
+  const newLeaveTotal = calculateDurationYmd(
+    formDataTrain.leaveStartDate,
+    formDataTrain.leaveEndDate
+  );
+  formDataTrain.leaveTotal = newLeaveTotal;
 }
 
 /**
  * แปลงตัวเลขเงินเดือน
  */
 const formattedSalary = computed(() => {
-	return formDataTrain.leaveSalary !== null ? formDataTrain.leaveSalary.toLocaleString("th-TH") : ""
-})
+  return formDataTrain.leaveSalary !== null
+    ? formDataTrain.leaveSalary.toLocaleString("th-TH")
+    : "";
+});
 
-const leaveDocumentList = ref<any>()
-const statusCheck = ref<any>("")
+const dateEndInputStyle = computed(() => {
+  return !isLeave.value ? "input-alert" : "";
+});
+
+const leaveDocumentList = ref<any>();
+const statusCheck = ref<any>("");
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 onMounted(async () => {
-	if (props.data) {
-		formDataTrain.leaveWrote = props.data.leaveWrote
-		formDataTrain.leaveStartDate = props.data.leaveStartDate
-		formDataTrain.leaveEndDate = props.data.leaveEndDate
-		formDataTrain.leaveTotal = props.data.leaveTotal
-		formDataTrain.leavebirthDate = props.data.leavebirthDate
-		formDataTrain.leavegovernmentDate = props.data.leavegovernmentDate
-		formDataTrain.leaveSalary = props.data.leaveSalary
-		formDataTrain.leaveSalaryText = props.data.leaveSalaryText
-		formDataTrain.leaveNumber = props.data.leaveNumber
-		formDataTrain.leaveAddress = props.data.leaveAddress
-		formDataTrain.studyDayScholarship = props.data.studyDayScholarship
-		formDataTrain.studyDayCountry = props.data.studyDayCountry
-		formDataTrain.studyDayTrainingSubject = props.data.studyDayTrainingSubject
-		formDataTrain.studyDayTrainingName = props.data.studyDayTrainingName
-		formDataTrain.leaveDetail = props.data.leaveDetail
-		// formDataTrain.leaveDocument = props.data.leaveDocument;
-		const leaveTotal = await calculateDurationYmd(props.data.leaveStartDate, props.data.leaveEndDate)
-		formDataTrain.leaveTotal = leaveTotal
-		leaveDocumentList.value = props.data.leaveDocument
-		statusCheck.value = props.data.status
-	}
-})
+  if (props.data) {
+    formDataTrain.leaveWrote = props.data.leaveWrote;
+    formDataTrain.leaveStartDate = props.data.leaveStartDate;
+    formDataTrain.leaveEndDate = props.data.leaveEndDate;
+    formDataTrain.leaveTotal = props.data.leaveTotal;
+    formDataTrain.leavebirthDate = props.data.leavebirthDate;
+    formDataTrain.leavegovernmentDate = props.data.leavegovernmentDate;
+    formDataTrain.leaveSalary = props.data.leaveSalary;
+    formDataTrain.leaveSalaryText = props.data.leaveSalaryText;
+    formDataTrain.leaveNumber = props.data.leaveNumber;
+    formDataTrain.leaveAddress = props.data.leaveAddress;
+    formDataTrain.studyDayScholarship = props.data.studyDayScholarship;
+    formDataTrain.studyDayCountry = props.data.studyDayCountry;
+    formDataTrain.studyDayTrainingSubject = props.data.studyDayTrainingSubject;
+    formDataTrain.studyDayTrainingName = props.data.studyDayTrainingName;
+    formDataTrain.leaveDetail = props.data.leaveDetail;
+    // formDataTrain.leaveDocument = props.data.leaveDocument;
+    const leaveTotal = await calculateDurationYmd(
+      props.data.leaveStartDate,
+      props.data.leaveEndDate
+    );
+    formDataTrain.leaveTotal = leaveTotal;
+    leaveDocumentList.value = props.data.leaveDocument;
+    statusCheck.value = props.data.status;
+  }
+});
 </script>
 
 <template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="row q-pa-sm q-col-gutter-sm">
-				<q-input
-					v-model="formDataTrain.leaveWrote"
-					ref="leaveWroteRef"
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					bg-color="white"
-					dense
-					outlined
-					label="เขียนที่"
-					:readonly="!edit || statusCheck === 'NEW'"
-					hide-bottom-space
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
+  <div style="display: flex; align-items: center">
+    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+  </div>
+  <form @submit.prevent="onValidate">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="row q-pa-sm q-col-gutter-sm">
+        <q-input
+          v-model="formDataTrain.leaveWrote"
+          ref="leaveWroteRef"
+          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          bg-color="white"
+          dense
+          outlined
+          label="เขียนที่"
+          :readonly="!edit || statusCheck === 'NEW'"
+          hide-bottom-space
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
 
-				<datepicker
-					v-model="formDataTrain.leaveStartDate"
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					autoApply
-					borderless
-					week-start="0"
-					:enableTimePicker="false"
-					:locale="'th'"
-					:readonly="!edit || statusCheck === 'NEW'"
-					@update:model-value="formDataTrain.leaveEndDate = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							ref="leaveStartDateRef"
-							class="full-width datepicker"
-							bg-color="white"
-							outlined
-							dense
-							lazy-rules
-							hide-bottom-space
-							:readonly="!edit || statusCheck === 'NEW'"
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:model-value="formDataTrain.leaveStartDate != null ? date2Thai(formDataTrain.leaveStartDate) : null"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
+        <datepicker
+          v-model="formDataTrain.leaveStartDate"
+          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          autoApply
+          borderless
+          week-start="0"
+          :enableTimePicker="false"
+          :locale="'th'"
+          :readonly="!edit || statusCheck === 'NEW'"
+          @update:model-value="formDataTrain.leaveEndDate = null"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              ref="leaveStartDateRef"
+              class="full-width datepicker"
+              bg-color="white"
+              outlined
+              dense
+              lazy-rules
+              hide-bottom-space
+              :readonly="!edit || statusCheck === 'NEW'"
+              :label="`${'ลาตั้งแต่วันที่'}`"
+              :model-value="
+                formDataTrain.leaveStartDate != null
+                  ? date2Thai(formDataTrain.leaveStartDate)
+                  : null
+              "
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
 
-				<datepicker
-					v-model="formDataTrain.leaveEndDate"
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					autoApply
-					borderless
-					@update:model-value="updateLeaveTotal(), fetchCheck()"
-					week-start="0"
-					:readonly="!formDataTrain.leaveStartDate || statusCheck === 'NEW'"
-					:locale="'th'"
-					:enableTimePicker="false"
-					:min-date="formDataTrain.leaveStartDate"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							ref="leaveEndDateRef"
-							class="full-width datepicker"
-							outlined
-							dense
-							lazy-rules
-							bg-color="white"
-							hide-bottom-space
-							:label="`${'ลาถึงวันที่'}`"
-							:readonly="!formDataTrain.leaveStartDate || statusCheck === 'NEW'"
-							:model-value="formDataTrain.leaveEndDate != null ? date2Thai(formDataTrain.leaveEndDate) : null"
-							:rules="leaveEndDateRules"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
+        <datepicker
+          v-model="formDataTrain.leaveEndDate"
+          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          autoApply
+          borderless
+          @update:model-value="updateLeaveTotal(), fetchCheck()"
+          week-start="0"
+          :readonly="!formDataTrain.leaveStartDate || statusCheck === 'NEW'"
+          :locale="'th'"
+          :enableTimePicker="false"
+          :min-date="formDataTrain.leaveStartDate"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              ref="leaveEndDateRef"
+              class="full-width datepicker"
+              outlined
+              dense
+              lazy-rules
+              bg-color="white"
+              hide-bottom-space
+              :label="`${'ลาถึงวันที่'}`"
+              :readonly="!formDataTrain.leaveStartDate || statusCheck === 'NEW'"
+              :model-value="
+                formDataTrain.leaveEndDate != null
+                  ? date2Thai(formDataTrain.leaveEndDate)
+                  : null
+              "
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
 
-				<q-input
-					class="col-12 col-md-2 col-sm-6"
-					dense
-					outlined
-					bg-color="white"
-					ref="leaveTotalRef"
-					for="leaveTotalRef"
-					v-model="formDataTrain.leaveTotal"
-					label="มีกำหนด"
-					readonly
-					hide-bottom-space
-				/>
+        <q-input
+          class="col-12 col-md-2 col-sm-6"
+          dense
+          outlined
+          ref="leaveTotalRef"
+          for="leaveTotalRef"
+          v-model="formDataTrain.leaveTotal"
+          label="มีกำหนด"
+          readonly
+          :bottom-slots="!isLeave ? true : false"
+          :color="!isLeave ? 'red' : 'black'"
+          :bg-color="!isLeave ? 'red-2' : 'white'"
+          :border-color="!isLeave ? 'red' : 'gray'"
+          :input-class="!isLeave ? dateEndInputStyle : ''"
+        >
+          <template v-slot:hint>
+            <span style="color: red">
+              {{ !isLeave ? "จำนวนวันลาเกินที่กำหนด" : "" }}
+            </span>
+          </template>
+        </q-input>
 
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<datepicker
-							v-model="formDataTrain.leavegovernmentDate"
-							class="col-12 col-md-3 col-sm-6"
-							menu-class-name="modalfix"
-							autoApply
-							borderless
-							week-start="0"
-							readonly
-							:enableTimePicker="false"
-							:locale="'th'"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									ref="leavegovernmentDateRef"
-									class="full-width"
-									outlined
-									readonly
-									bg-color="white"
-									dense
-									hide-bottom-space
-									:label="`${'วันที่เข้ารับราชการ'}`"
-									:model-value="formDataTrain.leavegovernmentDate != null ? date2Thai(formDataTrain.leavegovernmentDate) : null"
-									:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <datepicker
+              v-model="formDataTrain.leavegovernmentDate"
+              class="col-12 col-md-3 col-sm-6"
+              menu-class-name="modalfix"
+              autoApply
+              borderless
+              week-start="0"
+              readonly
+              :enableTimePicker="false"
+              :locale="'th'"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  ref="leavegovernmentDateRef"
+                  class="full-width"
+                  outlined
+                  readonly
+                  bg-color="white"
+                  dense
+                  hide-bottom-space
+                  :label="`${'วันที่เข้ารับราชการ'}`"
+                  :model-value="
+                    formDataTrain.leavegovernmentDate != null
+                      ? date2Thai(formDataTrain.leavegovernmentDate)
+                      : null
+                  "
+                  :rules="[
+                    (val) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
+                  ]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--black)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
 
-						<datepicker
-							v-model="formDataTrain.leavebirthDate"
-							class="col-12 col-md-3 col-sm-6"
-							menu-class-name="modalfix"
-							autoApply
-							borderless
-							readonly
-							week-start="0"
-							:enableTimePicker="false"
-							:locale="'th'"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									ref="leavebirthDateRef"
-									class="full-width"
-									bg-color="white"
-									outlined
-									dense
-									readonly
-									hide-bottom-space
-									:label="`${'วันเดือนปีเกิด'}`"
-									:model-value="formDataTrain.leavebirthDate != null ? date2Thai(formDataTrain.leavebirthDate) : null"
-									:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(---black)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
+            <datepicker
+              v-model="formDataTrain.leavebirthDate"
+              class="col-12 col-md-3 col-sm-6"
+              menu-class-name="modalfix"
+              autoApply
+              borderless
+              readonly
+              week-start="0"
+              :enableTimePicker="false"
+              :locale="'th'"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  ref="leavebirthDateRef"
+                  class="full-width"
+                  bg-color="white"
+                  outlined
+                  dense
+                  readonly
+                  hide-bottom-space
+                  :label="`${'วันเดือนปีเกิด'}`"
+                  :model-value="
+                    formDataTrain.leavebirthDate != null
+                      ? date2Thai(formDataTrain.leavebirthDate)
+                      : null
+                  "
+                  :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(---black)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
 
-						<q-input v-model="formattedSalary" class="col-12 col-sm-6 col-md-3" bg-color="white" dense outlined readonly label="เงินเดือนปัจจุบัน" />
+            <q-input
+              v-model="formattedSalary"
+              class="col-12 col-sm-6 col-md-3"
+              bg-color="white"
+              dense
+              outlined
+              readonly
+              label="เงินเดือนปัจจุบัน"
+            />
 
-						<q-input v-model="formDataTrain.leaveSalaryText" class="col-12 col-sm-6 col-md-3" dense readonly outlined bg-color="white" label="เงินเดือนปัจจุบัน (ตัวอักษร)" />
-					</div>
-				</div>
+            <q-input
+              v-model="formDataTrain.leaveSalaryText"
+              class="col-12 col-sm-6 col-md-3"
+              dense
+              readonly
+              outlined
+              bg-color="white"
+              label="เงินเดือนปัจจุบัน (ตัวอักษร)"
+            />
+          </div>
+        </div>
 
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<q-input
-							v-model="formDataTrain.studyDayTrainingSubject"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							ref="studyDayTrainingSubjectRef"
-							bg-color="white"
-							dense
-							outlined
-							label="ด้าน/หลักสูตร"
-							hide-bottom-space
-							:readonly="!edit || statusCheck === 'NEW'"
-							:rules="[val => !!val || `${'กรุณากรอกด้าน/หลักสูตร'}`]"
-						/>
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <q-input
+              v-model="formDataTrain.studyDayTrainingSubject"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              ref="studyDayTrainingSubjectRef"
+              bg-color="white"
+              dense
+              outlined
+              label="ด้าน/หลักสูตร"
+              hide-bottom-space
+              :readonly="!edit || statusCheck === 'NEW'"
+              :rules="[(val) => !!val || `${'กรุณากรอกด้าน/หลักสูตร'}`]"
+            />
 
-						<q-input
-							v-model="formDataTrain.studyDayTrainingName"
-							ref="studyDayTrainingNameRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							label="ณ สถานที่"
-							hide-bottom-space
-							:readonly="!edit || statusCheck === 'NEW'"
-							:rules="[val => !!val || `${'กรุณากรอก ณ สถานที่'}`]"
-						/>
+            <q-input
+              v-model="formDataTrain.studyDayTrainingName"
+              ref="studyDayTrainingNameRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              bg-color="white"
+              dense
+              outlined
+              label="ณ สถานที่"
+              hide-bottom-space
+              :readonly="!edit || statusCheck === 'NEW'"
+              :rules="[(val) => !!val || `${'กรุณากรอก ณ สถานที่'}`]"
+            />
 
-						<q-input
-							v-model="formDataTrain.studyDayCountry"
-							ref="studyDayCountryRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							dense
-							bg-color="white"
-							outlined
-							label="ประเทศ"
-							hide-bottom-space
-							:readonly="!edit || statusCheck === 'NEW'"
-							:rules="[val => !!val || `${'กรุณากรอกประเทศ'}`]"
-						/>
+            <q-input
+              v-model="formDataTrain.studyDayCountry"
+              ref="studyDayCountryRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              dense
+              bg-color="white"
+              outlined
+              label="ประเทศ"
+              hide-bottom-space
+              :readonly="!edit || statusCheck === 'NEW'"
+              :rules="[(val) => !!val || `${'กรุณากรอกประเทศ'}`]"
+            />
 
-						<q-input
-							v-model="formDataTrain.studyDayScholarship"
-							ref="studyDayScholarshipRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							label="ด้วยทุน"
-							hide-bottom-space
-							:readonly="!edit || statusCheck === 'NEW'"
-							:rules="[val => !!val || `${'กรุณากรอกด้วยทุน'}`]"
-						/>
+            <q-input
+              v-model="formDataTrain.studyDayScholarship"
+              ref="studyDayScholarshipRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              bg-color="white"
+              dense
+              outlined
+              label="ด้วยทุน"
+              hide-bottom-space
+              :readonly="!edit || statusCheck === 'NEW'"
+              :rules="[(val) => !!val || `${'กรุณากรอกด้วยทุน'}`]"
+            />
 
-						<q-input
-							v-model="formDataTrain.leaveNumber"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							ref="leaveNumberRef"
-							dense
-							outlined
-							unmasked-value
-							hide-bottom-space
-							bg-color="white"
-							mask="(###)-###-####"
-							:readonly="!edit || statusCheck === 'NEW'"
-							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
-						/>
+            <q-input
+              v-model="formDataTrain.leaveNumber"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              ref="leaveNumberRef"
+              dense
+              outlined
+              unmasked-value
+              hide-bottom-space
+              bg-color="white"
+              mask="(###)-###-####"
+              :readonly="!edit || statusCheck === 'NEW'"
+              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
+              ]"
+            />
 
-						<q-input
-							v-model="formDataTrain.leaveAddress"
-							ref="leaveAddressRef"
-							class="col-12 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-							:readonly="!edit || statusCheck === 'NEW'"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
-						/>
-					</div>
-				</div>
+            <q-input
+              v-model="formDataTrain.leaveAddress"
+              ref="leaveAddressRef"
+              class="col-12 cursor-pointer inputgreen"
+              bg-color="white"
+              dense
+              outlined
+              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+              :readonly="!edit || statusCheck === 'NEW'"
+              hide-bottom-space
+              :rules="[
+                (val) => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
+              ]"
+            />
+          </div>
+        </div>
 
-				<q-input
-					v-model="formDataTrain.leaveDetail"
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					:readonly="!edit || statusCheck === 'NEW'"
-					bg-color="white"
-					dense
-					outlined
-					type="textarea"
-					label="รายละเอียด"
-				/>
+        <q-input
+          v-model="formDataTrain.leaveDetail"
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          :readonly="!edit || statusCheck === 'NEW'"
+          bg-color="white"
+          dense
+          outlined
+          type="textarea"
+          label="รายละเอียด"
+        />
 
-				<div class="col-12" v-if="statusCheck != 'NEW'">
-					<!-- multiple -->
-					<q-file v-model="formDataTrain.leaveDocument" bg-color="white" multiple dense outlined label="เอกสารประกอบ">
-						<template v-slot:prepend>
-							<q-icon name="attach_file" color="primary" />
-						</template>
-					</q-file>
-					<!-- <div class="col-12" v-if="formDataTrain.leaveDocument.length == 0">
+        <div class="col-12" v-if="statusCheck != 'NEW'">
+          <!-- multiple -->
+          <q-file
+            v-model="formDataTrain.leaveDocument"
+            bg-color="white"
+            multiple
+            dense
+            outlined
+            label="เอกสารประกอบ"
+          >
+            <template v-slot:prepend>
+              <q-icon name="attach_file" color="primary" />
+            </template>
+          </q-file>
+          <!-- <div class="col-12" v-if="formDataTrain.leaveDocument.length == 0">
 						<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
 					</div> -->
-					<div class="col-12" v-if="data">
-						<div class="col-12 col-md-12 col-sm-12">
-							<q-card bordered>
-								<!-- <div class="col-12">
+          <div class="col-12" v-if="data">
+            <div class="col-12 col-md-12 col-sm-12">
+              <q-card bordered>
+                <!-- <div class="col-12">
 								<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ{{ leaveDocumentList }} </q-card>
 							</div> -->
-								<q-list separator v-if="leaveDocumentList && leaveDocumentList.length > 0">
-									<q-item v-for="(document, index) in leaveDocumentList" :key="index" class="q-my-xs">
-										<q-item-section>
-											<q-item-label class="row items-baseline">
-												<div class="col">
-													{{ "เอกสารแนบฉบับที่" + (index + 1) }}
-												</div>
-												<q-btn class="col-6" :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
-													<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
-												</q-btn>
-											</q-item-label>
-										</q-item-section>
-									</q-item>
-								</q-list>
-								<div class="col-12" v-else>
-									<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
-								</div>
-							</q-card>
-						</div>
-					</div>
-				</div>
+                <q-list
+                  separator
+                  v-if="leaveDocumentList && leaveDocumentList.length > 0"
+                >
+                  <q-item
+                    v-for="(document, index) in leaveDocumentList"
+                    :key="index"
+                    class="q-my-xs"
+                  >
+                    <q-item-section>
+                      <q-item-label class="row items-baseline">
+                        <div class="col">
+                          {{ "เอกสารแนบฉบับที่" + (index + 1) }}
+                        </div>
+                        <q-btn
+                          class="col-6"
+                          :href="document"
+                          target="_blank"
+                          outline
+                          color="blue"
+                          label="ดาวน์โหลด"
+                          size="12px"
+                        >
+                          <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+                        </q-btn>
+                      </q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+                <div class="col-12" v-else>
+                  <q-card class="q-pa-md" bordered>
+                    ไม่มีรายการเอกสารประกอบ
+                  </q-card>
+                </div>
+              </q-card>
+            </div>
+          </div>
+        </div>
 
-				<div class="col-12 col-sm-6 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="(file, index) in leaveDocumentList" :key="index" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.name }}
-									</q-item-label>
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-		<q-separator class="q-mt-sm" />
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn v-if="!props.data || props.data.status == 'DRAFT'" id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"
-				><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
-			>
-			<q-btn v-if="data && statusCheck != 'NEW'" id="onSubmit" type="button" unelevated dense class="q-px-md items-center q-ml-sm" color="primary" label="ยื่นใบลา" @click="onConfirm"
-				><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
-			>
-		</div>
-	</form>
+        <div class="col-12 col-sm-6 row" v-if="!edit">
+          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+            <div class="q-pl-sm text-weight-bold text-dark">
+              เอกสารเพิ่มเติม
+            </div>
+          </div>
+          <q-card bordered flat class="full-width">
+            <q-list separator>
+              <q-item
+                v-for="(file, index) in leaveDocumentList"
+                :key="index"
+                class="q-my-xs"
+              >
+                <q-item-section>
+                  <q-item-label class="full-width ellipsis">
+                    {{ file.name }}
+                  </q-item-label>
+                  <q-item-label caption> </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </div>
+    </q-card>
+    <q-separator class="q-mt-sm" />
+    <div class="row col-12 q-pt-md">
+      <q-space />
+      <q-btn
+        v-if="!props.data || props.data.status == 'DRAFT'"
+        id="onSubmit"
+        type="submit"
+        unelevated
+        dense
+        class="q-px-md items-center btnBlue"
+        label="บันทึก"
+        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+      >
+      <q-btn
+        v-if="data && statusCheck != 'NEW'"
+        id="onSubmit"
+        type="button"
+        unelevated
+        dense
+        class="q-px-md items-center q-ml-sm"
+        color="primary"
+        label="ยื่นใบลา"
+        @click="onConfirm()"
+        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+      >
+    </div>
+  </form>
 </template>
diff --git a/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue b/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
index c6c2a42..d87bbcf 100644
--- a/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
+++ b/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
@@ -1,280 +1,328 @@
 <script setup lang="ts">
-import { ref, reactive, watch, onMounted } from "vue"
-import type { FormRef } from "@/modules/05_leave/interface/request/WorkInternationalForm"
-import { useCounterMixin } from "@/stores/mixin"
-import { useQuasar } from "quasar"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRouter } from "vue-router"
-import genReport from "@/plugins/genreport"
+import { ref, reactive, watch, onMounted, computed } from "vue";
+import type { FormRef } from "@/modules/05_leave/interface/request/WorkInternationalForm";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter } from "vue-router";
+import genReport from "@/plugins/genreport";
 
 /** Use */
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const mixin = useCounterMixin()
-const { date2Thai, dialogConfirm, fails, dateToISO, success, messageError, showLoader, hideLoader } = mixin
-const edit = ref<boolean>(true)
-const router = useRouter()
-const isSave = ref<boolean>(false)
+const dataStore = useLeaveStore();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  dialogConfirm,
+  fails,
+  dateToISO,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+} = mixin;
+const edit = ref<boolean>(true);
+const router = useRouter();
+const isSave = ref<boolean>(false);
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-	onConfirm: {
-		type: Function,
-		default: () => "",
-	},
-})
+  data: {
+    type: Object,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+});
 
 /** ข้อมูล v-model ของฟอร์ม */
 const formDataWorkInternational = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leaveDetail: "",
-	leaveDocument: null,
-	leaveDraftDocument: [],
-})
+  type: dataStore.typeId,
+  leaveWrote: "",
+  leaveStartDate: null,
+  leaveEndDate: null,
+  leaveDetail: "",
+  leaveDocument: null,
+  leaveDraftDocument: [],
+});
 
 /** ตัวแปร ref สำหรับแสดง validate */
-const leaveWroteRef = ref<object | null>(null)
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leaveDetailRef = ref<object | null>(null)
-const leaveDocumentRef = ref<object | null>(null)
+const leaveWroteRef = ref<object | null>(null);
+const leaveStartDateRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const leaveDetailRef = ref<object | null>(null);
+const leaveDocumentRef = ref<object | null>(null);
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const FormRef: FormRef = {
-	leaveWrote: leaveWroteRef,
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leaveDetail: leaveDetailRef,
-	leaveDocument: leaveDocumentRef,
-}
+  leaveWrote: leaveWroteRef,
+  leaveStartDate: leaveStartDateRef,
+  leaveEndDate: leaveEndDateRef,
+  leaveDetail: leaveDetailRef,
+  leaveDocument: leaveDocumentRef,
+};
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const nameFileDraft = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
+const nameFile = ref<string>("");
+const nameFileDraft = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
 const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
 
 /** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
 function onValidate() {
-	const hasError = []
-	for (const key in FormRef) {
-		if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
-			const property = FormRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	// ถ้า Validate ผ่านให้บันทึกข้อมูล
-	if (hasError.every(result => result === true)) {
-		const formData = new FormData()
+  const hasError = [];
+  for (const key in FormRef) {
+    if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
+      const property = FormRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  // ถ้า Validate ผ่านให้บันทึกข้อมูล
+  if (hasError.every((result) => result === true)) {
+    const formData = new FormData();
 
-		if (formDataWorkInternational.leaveDocument) {
-			formDataWorkInternational.leaveDocument.forEach((file: File) => {
-				formData.append("leaveDocument", file)
-			})
+    if (formDataWorkInternational.leaveDocument) {
+      formDataWorkInternational.leaveDocument.forEach((file: File) => {
+        formData.append("leaveDocument", file);
+      });
 
-			// formData.append("leaveDocument", formDataWorkInternational.leaveDocument)
-		}
+      // formData.append("leaveDocument", formDataWorkInternational.leaveDocument)
+    }
 
-		if (formDataWorkInternational.leaveDraftDocument) {
-			formData.append("leaveDraftDocument", formDataWorkInternational.leaveDraftDocument)
-		}
-		formData.append("type", formDataWorkInternational.type) //
-		formData.append("leaveStartDate", dateToISO(formDataWorkInternational.leaveStartDate)) //
-		formData.append("leaveEndDate", dateToISO(formDataWorkInternational.leaveEndDate)) //
-		formData.append("leaveWrote", formDataWorkInternational.leaveWrote) //
-		formData.append("leaveDetail", formDataWorkInternational.leaveDetail) //
-		props.onSubmit(formData)
-	}
+    if (formDataWorkInternational.leaveDraftDocument) {
+      formData.append(
+        "leaveDraftDocument",
+        formDataWorkInternational.leaveDraftDocument
+      );
+    }
+    formData.append("type", formDataWorkInternational.type); //
+    formData.append(
+      "leaveStartDate",
+      dateToISO(formDataWorkInternational.leaveStartDate)
+    ); //
+    formData.append(
+      "leaveEndDate",
+      dateToISO(formDataWorkInternational.leaveEndDate)
+    ); //
+    formData.append("leaveWrote", formDataWorkInternational.leaveWrote); //
+    formData.append("leaveDetail", formDataWorkInternational.leaveDetail); //
+    props.onSubmit(formData, isLeave.value);
+  }
 }
 
 //download function
 async function onClickDownloadFile(id: string, fileName: string) {
-	showLoader()
-	await http
-		.get(config.API.leaveReport(id))
-		.then(async res => {
-			const data = res.data.result
-			await genReport(data, fileName)
-		})
-		.catch(err => {
-			messageError($q, err)
-		})
-		.finally(() => {
-			hideLoader()
-		})
+  showLoader();
+  await http
+    .get(config.API.leaveReport(id))
+    .then(async (res) => {
+      const data = res.data.result;
+      await genReport(data, fileName);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 /**
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
-const leaveEndDateRules = ref([val => !!val || `${"กรุณาเลือกลาถึงวันที่"}`])
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), {
-			type: dataStore.typeId ?? null,
-			StartLeaveDate: formDataWorkInternational.leaveStartDate ?? null,
-			EndLeaveDate: formDataWorkInternational.leaveEndDate ?? null,
-		})
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataWorkInternational.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				// formDataWorkInternational.leaveLast = data.totalDate
-				this.leaveEndDateRules = [val => !!val || `${"กรุณาเลือกลาถึงวันที่"}`]
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-				this.leaveEndDateRules = [val => false || `${"ไม่สามารถลาได้"}`]
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
+const isLeave = ref<boolean>(true);
+async function fetchCheck() {
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataWorkInternational.leaveStartDate ?? null,
+      EndLeaveDate: formDataWorkInternational.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+      formDataWorkInternational.leaveTotal = data.totalDate;
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
 }
 
-const leaveDocumentList = ref<any>()
-const leaveDraftDocument = ref<string>()
-const statusCheck = ref<any>("")
+const dateEndInputStyle = computed(() => {
+  return !isLeave.value ? "input-alert" : "";
+});
+
+const leaveDocumentList = ref<any>();
+const leaveDraftDocument = ref<string>();
+const statusCheck = ref<any>("");
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 onMounted(() => {
-	if (props.data) {
-		formDataWorkInternational.leaveWrote = props.data.leaveWrote
-		formDataWorkInternational.leaveStartDate = new Date(props.data.leaveStartDate)
-		formDataWorkInternational.leaveEndDate = new Date(props.data.leaveEndDate)
-		formDataWorkInternational.leaveDetail = props.data.leaveDetail
-		// formDataWorkInternational.leaveDocument = props.data.leaveDocument;
-		leaveDraftDocument.value = props.data.leaveDraftDocument
-		leaveDocumentList.value = props.data.leaveDocument
-		statusCheck.value = props.data.status
-	}
-})
+  if (props.data) {
+    formDataWorkInternational.leaveWrote = props.data.leaveWrote;
+    formDataWorkInternational.leaveStartDate = new Date(
+      props.data.leaveStartDate
+    );
+    formDataWorkInternational.leaveEndDate = new Date(props.data.leaveEndDate);
+    formDataWorkInternational.leaveDetail = props.data.leaveDetail;
+    // formDataWorkInternational.leaveDocument = props.data.leaveDocument;
+    leaveDraftDocument.value = props.data.leaveDraftDocument;
+    leaveDocumentList.value = props.data.leaveDocument;
+    statusCheck.value = props.data.status;
+  }
+});
 </script>
 
 <template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent.stop="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="col-12 row q-pa-sm q-col-gutter-sm">
-				<q-input
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					ref="leaveWroteRef"
-					hide-bottom-space
-					bg-color="white"
-					for="leaveWroteRef"
-					dense
-					outlined
-					v-model="formDataWorkInternational.leaveWrote"
-					label="เขียนที่"
-					:readonly="!edit || statusCheck === 'NEW'"
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
+  <div style="display: flex; align-items: center">
+    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+  </div>
+  <form @submit.prevent.stop="onValidate">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="col-12 row q-pa-sm q-col-gutter-sm">
+        <q-input
+          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          ref="leaveWroteRef"
+          hide-bottom-space
+          bg-color="white"
+          for="leaveWroteRef"
+          dense
+          outlined
+          v-model="formDataWorkInternational.leaveWrote"
+          label="เขียนที่"
+          :readonly="!edit || statusCheck === 'NEW'"
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
 
-				<datepicker
-					class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataWorkInternational.leaveStartDate"
-					:locale="'th'"
-					hide-bottom-space
-					autoApply
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					:readonly="!edit || statusCheck === 'NEW'"
-					@update:model-value="formDataWorkInternational.leaveEndDate = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveStartDateRef"
-							for="leaveStartDateRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!edit || statusCheck === 'NEW'"
-							class="full-width datepicker"
-							:model-value="formDataWorkInternational.leaveStartDate != null ? date2Thai(formDataWorkInternational.leaveStartDate) : null"
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
+        <datepicker
+          class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataWorkInternational.leaveStartDate"
+          :locale="'th'"
+          hide-bottom-space
+          autoApply
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          :readonly="!edit || statusCheck === 'NEW'"
+          @update:model-value="formDataWorkInternational.leaveEndDate = null"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="leaveStartDateRef"
+              for="leaveStartDateRef"
+              hide-bottom-space
+              bg-color="white"
+              :readonly="!edit || statusCheck === 'NEW'"
+              class="full-width datepicker"
+              :model-value="
+                formDataWorkInternational.leaveStartDate != null
+                  ? date2Thai(formDataWorkInternational.leaveStartDate)
+                  : null
+              "
+              :label="`${'ลาตั้งแต่วันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
 
-				<datepicker
-					class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataWorkInternational.leaveEndDate"
-					:locale="'th'"
-					autoApply
-					hide-bottom-space
-					borderless
-					:enableTimePicker="false"
-					@update:model-value="FetchCheck()"
-					week-start="0"
-					:readonly="!formDataWorkInternational.leaveStartDate || statusCheck === 'NEW'"
-					:min-date="formDataWorkInternational.leaveStartDate"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveEndDateRef"
-							for="leaveEndDateRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!formDataWorkInternational.leaveStartDate || statusCheck === 'NEW'"
-							class="full-width datepicker"
-							:model-value="formDataWorkInternational.leaveEndDate != null ? date2Thai(formDataWorkInternational.leaveEndDate) : null"
-							:label="`${'ลาถึงวันที่'}`"
-							:rules="leaveEndDateRules"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-				<!-- <q-input
+        <datepicker
+          :class="!isLeave ? dateEndInputStyle : ''"
+          class="col-12 col-md-6 col-sm-6 cursor-pointer"
+          menu-class-name="modalfix"
+          v-model="formDataWorkInternational.leaveEndDate"
+          :locale="'th'"
+          autoApply
+          hide-bottom-space
+          borderless
+          :enableTimePicker="false"
+          @update:model-value="fetchCheck()"
+          week-start="0"
+          :readonly="
+            !formDataWorkInternational.leaveStartDate || statusCheck === 'NEW'
+          "
+          :min-date="formDataWorkInternational.leaveStartDate"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="leaveEndDateRef"
+              for="leaveEndDateRef"
+              :readonly="
+                !formDataWorkInternational.leaveStartDate ||
+                statusCheck === 'NEW'
+              "
+              class="full-width datepicker"
+              :model-value="
+                formDataWorkInternational.leaveEndDate != null
+                  ? date2Thai(formDataWorkInternational.leaveEndDate)
+                  : null
+              "
+              :label="`${'ลาถึงวันที่'}`"
+              :bottom-slots="!isLeave ? true : false"
+              :color="!isLeave ? 'red' : 'black'"
+              :bg-color="!isLeave ? 'red-2' : 'white'"
+              :border-color="!isLeave ? 'red' : 'gray'"
+              :input-class="!isLeave ? dateEndInputStyle : ''"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  color="primary"
+                >
+                </q-icon>
+              </template>
+
+              <template v-slot:hint>
+                <span style="color: red">
+                  {{ !isLeave ? "จำนวนวันลาเกินที่กำหนด" : "" }}
+                </span>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+        <!-- <q-input
 							class="col-md-3 col-sm-12"
 							dense
 							outlined
@@ -287,145 +335,207 @@ onMounted(() => {
 							:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
 						/> -->
 
-				<q-input
-					hide-bottom-space
-					type="textarea"
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					bg-color="white"
-					outlined
-					ref="leaveDetailRef"
-					for="leaveDetailRef"
-					v-model="formDataWorkInternational.leaveDetail"
-					label="รายละเอียด"
-					:readonly="!edit || statusCheck === 'NEW'"
-				/>
-				<div class="full-width" v-if="statusCheck != 'NEW'">
-					<div class="q-col-gutter-sm row">
-						<q-file
-							ref="fileRef"
-							bg-color="white"
-							v-model="formDataWorkInternational.leaveDocument"
-							multiple
-							@added="fileUploadDoc"
-							dense
-							label="เอกสารประกอบ"
-							outlined
-							use-chips
-							class="q-pl-sm col-12"
-						>
-							<template v-slot:prepend>
-								<q-icon name="attach_file" color="primary" />
-							</template>
-						</q-file>
-					</div>
-				</div>
-				<!-- <div class="col-12" v-if="formDataWorkInternational.leaveDocument.length == 0">
+        <q-input
+          hide-bottom-space
+          type="textarea"
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          dense
+          bg-color="white"
+          outlined
+          ref="leaveDetailRef"
+          for="leaveDetailRef"
+          v-model="formDataWorkInternational.leaveDetail"
+          label="รายละเอียด"
+          :readonly="!edit || statusCheck === 'NEW'"
+        />
+        <div class="full-width" v-if="statusCheck != 'NEW'">
+          <div class="q-col-gutter-sm row">
+            <q-file
+              ref="fileRef"
+              bg-color="white"
+              v-model="formDataWorkInternational.leaveDocument"
+              multiple
+              @added="fileUploadDoc"
+              dense
+              label="เอกสารประกอบ"
+              outlined
+              use-chips
+              class="q-pl-sm col-12"
+            >
+              <template v-slot:prepend>
+                <q-icon name="attach_file" color="primary" />
+              </template>
+            </q-file>
+          </div>
+        </div>
+        <!-- <div class="col-12" v-if="formDataWorkInternational.leaveDocument.length == 0">
 					<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
 				</div> -->
-				<div class="col-12" v-if="data">
-					<div class="col-12 col-md-12 col-sm-12">
-						<q-card bordered>
-							<!-- <div class="col-12">
+        <div class="col-12" v-if="data">
+          <div class="col-12 col-md-12 col-sm-12">
+            <q-card bordered>
+              <!-- <div class="col-12">
 								<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ{{ leaveDocumentList }} </q-card>
 							</div> -->
-							<q-list separator>
-								<q-item v-for="(document, index) in leaveDocumentList" :key="index" class="q-my-xs">
-									<q-item-section>
-										<q-item-label class="row items-baseline">
-											<div class="col">
-												{{ "เอกสารแนบฉบับที่" + (index + 1) }}
-											</div>
-											<q-btn class="col-6" :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
-												<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
-											</q-btn>
-										</q-item-label>
-									</q-item-section>
-								</q-item>
-							</q-list>
-						</q-card>
-					</div>
-				</div>
+              <q-list separator>
+                <q-item
+                  v-for="(document, index) in leaveDocumentList"
+                  :key="index"
+                  class="q-my-xs"
+                >
+                  <q-item-section>
+                    <q-item-label class="row items-baseline">
+                      <div class="col">
+                        {{ "เอกสารแนบฉบับที่" + (index + 1) }}
+                      </div>
+                      <q-btn
+                        class="col-6"
+                        :href="document"
+                        target="_blank"
+                        outline
+                        color="blue"
+                        label="ดาวน์โหลด"
+                        size="12px"
+                      >
+                        <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+                      </q-btn>
+                    </q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+          </div>
+        </div>
 
-				<div class="col-12 col-sm-6 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator v-if="leaveDocumentList && leaveDocumentList.length > 0">
-							<q-item v-for="(file, index) in leaveDocumentList" :key="index" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.name }}
-									</q-item-label>
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-						<div class="col-12" v-else>
-							<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
-						</div>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
+        <div class="col-12 col-sm-6 row" v-if="!edit">
+          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+            <div class="q-pl-sm text-weight-bold text-dark">
+              เอกสารเพิ่มเติม
+            </div>
+          </div>
+          <q-card bordered flat class="full-width">
+            <q-list
+              separator
+              v-if="leaveDocumentList && leaveDocumentList.length > 0"
+            >
+              <q-item
+                v-for="(file, index) in leaveDocumentList"
+                :key="index"
+                class="q-my-xs"
+              >
+                <q-item-section>
+                  <q-item-label class="full-width ellipsis">
+                    {{ file.name }}
+                  </q-item-label>
+                  <q-item-label caption> </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+            <div class="col-12" v-else>
+              <q-card class="q-pa-md" bordered>
+                ไม่มีรายการเอกสารประกอบ
+              </q-card>
+            </div>
+          </q-card>
+        </div>
+      </div>
+    </q-card>
 
-		<div v-if="data && data.id" class="q-mt-md">
-			<div style="display: flex; align-items: center">
-				<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
-				<div class="q-pl-sm text-weight-bold text-dark">ดาวน์โหลด/อัปโหลดแบบฟอร์ม</div>
-			</div>
-			<q-card class="bg-grey-1 q-pa-sm" bordered>
-				<div class="row">
-					<div class="col-sm-3 q-my-sm">
-						<div class="column q-mx-xs">
-							<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
+    <div v-if="data && data.id" class="q-mt-md">
+      <div style="display: flex; align-items: center">
+        <q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
+        <div class="q-pl-sm text-weight-bold text-dark">
+          ดาวน์โหลด/อัปโหลดแบบฟอร์ม
+        </div>
+      </div>
+      <q-card class="bg-grey-1 q-pa-sm" bordered>
+        <div class="row">
+          <div class="col-sm-3 q-my-sm">
+            <div class="column q-mx-xs">
+              <!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
                 ดาวน์โหลด
               </div> -->
-							<q-btn color="primary" icon="download" label="ดาวน์โหลดแบบฟอร์ม" @click="onClickDownloadFile(data.id, `แบบฟอร์ม${data.leaveTypeName}`)" />
-						</div>
-					</div>
-					<div class="col-sm-5 q-my-sm">
-						<div class="column q-mx-xs">
-							<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
+              <q-btn
+                color="primary"
+                icon="download"
+                label="ดาวน์โหลดแบบฟอร์ม"
+                @click="
+                  onClickDownloadFile(data.id, `แบบฟอร์ม${data.leaveTypeName}`)
+                "
+              />
+            </div>
+          </div>
+          <div class="col-sm-5 q-my-sm">
+            <div class="column q-mx-xs">
+              <!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
                 อัปโหลด
               </div> -->
-							<q-file v-model="formDataWorkInternational.leaveDraftDocument" use-chips dense label="อัปโหลดแบบฟอร์ม" outlined bg-color="white" accept="application/pdf">
-								<template v-slot:prepend>
-									<q-icon name="attach_file" color="primary" />
-								</template>
-							</q-file>
-						</div>
-					</div>
+              <q-file
+                v-model="formDataWorkInternational.leaveDraftDocument"
+                use-chips
+                dense
+                label="อัปโหลดแบบฟอร์ม"
+                outlined
+                bg-color="white"
+                accept="application/pdf"
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+            </div>
+          </div>
 
-					<div v-if="leaveDraftDocument" class="col-sm-2 q-my-sm">
-						<div class="column q-mx-xs">
-							<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
+          <div v-if="leaveDraftDocument" class="col-sm-2 q-my-sm">
+            <div class="column q-mx-xs">
+              <!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
                 ดูไฟล์อัปโหลด
               </div> -->
-							<q-btn icon="visibility" color="blue" label="ดาวน์โหลดไฟล์" :href="leaveDraftDocument" target="_blank" />
-						</div>
-					</div>
-					<!-- <div class="col-md-1 self-end q-mb-sm">
+              <q-btn
+                icon="visibility"
+                color="blue"
+                label="ดาวน์โหลดไฟล์"
+                :href="leaveDraftDocument"
+                target="_blank"
+              />
+            </div>
+          </div>
+          <!-- <div class="col-md-1 self-end q-mb-sm">
 						<q-btn v-if="formDataWorkInternational.leaveDraftDocument != null" use-chips flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"
 							><q-tooltip>อัปโหลด</q-tooltip></q-btn
 						>
 					</div> -->
-				</div>
-			</q-card>
-		</div>
+        </div>
+      </q-card>
+    </div>
 
-		<div v-if="!isSave">
-			<q-separator class="q-mt-sm" />
-			<div class="row col-12 q-pt-md">
-				<q-space />
-				<q-btn v-if="!props.data || props.data.status == 'DRAFT'" id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"
-					><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
-				>
-				<q-btn v-if="data && statusCheck != 'NEW'" id="onSubmit" type="button" unelevated dense class="q-px-md items-center q-ml-sm" color="primary" label="ยื่นใบลา" @click="onConfirm"
-					><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
-				>
-			</div>
-		</div>
-	</form>
+    <div v-if="!isSave">
+      <q-separator class="q-mt-sm" />
+      <div class="row col-12 q-pt-md">
+        <q-space />
+        <q-btn
+          v-if="!props.data || props.data.status == 'DRAFT'"
+          id="onSubmit"
+          type="submit"
+          unelevated
+          dense
+          class="q-px-md items-center btnBlue"
+          label="บันทึก"
+          ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+        >
+        <q-btn
+          v-if="data && statusCheck != 'NEW'"
+          id="onSubmit"
+          type="button"
+          unelevated
+          dense
+          class="q-px-md items-center q-ml-sm"
+          color="primary"
+          label="ยื่นใบลา"
+          @click="onConfirm()"
+          ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+        >
+      </div>
+    </div>
+  </form>
 </template>
diff --git a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
index fe5e4b4..4461c97 100644
--- a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
@@ -1,624 +1,763 @@
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted } from "vue"
-import type { FormData, FormRef } from "@/modules/05_leave/interface/request/FollowSpouseForm"
-import { useCounterMixin } from "@/stores/mixin"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import { useQuasar } from "quasar"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRouter } from "vue-router"
+import { ref, reactive, computed, onMounted } from "vue";
+import type {
+  FormData,
+  FormRef,
+} from "@/modules/05_leave/interface/request/FollowSpouseForm";
+import { useCounterMixin } from "@/stores/mixin";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter } from "vue-router";
 
 /** Use */
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const mixin = useCounterMixin()
-const router = useRouter()
-const { dialogConfirm, date2Thai, arabicNumberToText, calculateDurationYmd, dateToISO, fails, success, messageError } = mixin
-const edit = ref<boolean>(true)
+const dataStore = useLeaveStore();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const router = useRouter();
+const {
+  dialogConfirm,
+  date2Thai,
+  arabicNumberToText,
+  calculateDurationYmd,
+  dateToISO,
+  fails,
+  success,
+  messageError,
+} = mixin;
+const edit = ref<boolean>(true);
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-	onConfirm: {
-		type: Function,
-		default: () => "",
-	},
-})
+  data: {
+    type: Object,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+});
 
 /** ข้อมูล v-model ของฟอร์ม */
 const formDataFollowSpouse = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leaveTotal: "", //จำนวนวันลา
-	leaveSalaryText: "",
-	leaveSalary: 0, //เงินเดือนปัจจุบัน
-	coupleDayName: "", //ชื่อคู่สมรส
-	coupleDayPosition: "", //ตำแหน่งคู่สมรส
-	coupleDayLevel: "", //ระดับคู่สมรส
-	coupleDayLevelCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ
-	coupleDayCountryHistory: "", //ประวัติการลาติดตามคู่สมรส
-	coupleDayTotalHistory: null,
-	coupleDayStartDateHistory: null,
-	coupleDayEndDateHistory: null,
-	leaveDetail: "ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา ...ปี, ...เดือน, ...วัน", //รายละเอียดการลา
-	leaveDocument: [], //เอกสารปะกอบ
-})
+  type: dataStore.typeId,
+  leaveWrote: "",
+  leaveStartDate: null,
+  leaveEndDate: null,
+  leaveTotal: "", //จำนวนวันลา
+  leaveSalaryText: "",
+  leaveSalary: 0, //เงินเดือนปัจจุบัน
+  coupleDayName: "", //ชื่อคู่สมรส
+  coupleDayPosition: "", //ตำแหน่งคู่สมรส
+  coupleDayLevel: "", //ระดับคู่สมรส
+  coupleDayLevelCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ
+  coupleDayCountryHistory: "", //ประวัติการลาติดตามคู่สมรส
+  coupleDayTotalHistory: null,
+  coupleDayStartDateHistory: null,
+  coupleDayEndDateHistory: null,
+  leaveDetail:
+    "ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา ...ปี, ...เดือน, ...วัน", //รายละเอียดการลา
+  leaveDocument: [], //เอกสารปะกอบ
+});
 
 /** ตัวแปร ref สำหรับแสดง validate */
-const leaveWroteRef = ref<object | null>(null)
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leaveSalaryRef = ref<object | null>(null)
-const leaveTotalRef = ref<object | null>(null)
-const coupleDayNameRef = ref<object | null>(null)
-const leaveAddressRef = ref<object | null>(null)
-const leaveDetailRef = ref<object | null>(null)
-const coupleDayPositionRef = ref<object | null>(null)
-const coupleDayLevelRef = ref<object | null>(null)
-const coupleDayLevelCountryRef = ref<object | null>(null)
-const coupleDayCountryHistoryRef = ref<object | null>(null)
-const coupleDayTotalHistoryRef = ref<object | null>(null)
-const coupleDayStartDateHistoryRef = ref<object | null>(null)
-const coupleDayEndDateHistoryRef = ref<object | null>(null)
-const leaveDocumentRef = ref<object | null>(null)
+const leaveWroteRef = ref<object | null>(null);
+const leaveStartDateRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const leaveSalaryRef = ref<object | null>(null);
+const leaveTotalRef = ref<object | null>(null);
+const coupleDayNameRef = ref<object | null>(null);
+const leaveAddressRef = ref<object | null>(null);
+const leaveDetailRef = ref<object | null>(null);
+const coupleDayPositionRef = ref<object | null>(null);
+const coupleDayLevelRef = ref<object | null>(null);
+const coupleDayLevelCountryRef = ref<object | null>(null);
+const coupleDayCountryHistoryRef = ref<object | null>(null);
+const coupleDayTotalHistoryRef = ref<object | null>(null);
+const coupleDayStartDateHistoryRef = ref<object | null>(null);
+const coupleDayEndDateHistoryRef = ref<object | null>(null);
+const leaveDocumentRef = ref<object | null>(null);
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const FormRef: FormRef = {
-	leaveWrote: leaveWroteRef, //เขียนที่***
-	leaveStartDate: leaveStartDateRef, //*วัน เดือน ปีเริ่มต้นลา
-	leaveEndDate: leaveEndDateRef, //*วัน เดือน ปีสิ้นสุดลา
-	leaveTotal: leaveTotalRef, //จำนวนวันลา
-	leaveSalary: leaveSalaryRef, //เงินเดือนปัจจุบัน
-	coupleDayName: coupleDayNameRef, //หมายเลขที่ติดต่อขณะลา
-	coupleDayPosition: coupleDayPositionRef, //ตำแหน่งคู่สมรส
-	coupleDayLevel: coupleDayLevelRef, //ระดับคู่สมรส
-	coupleDayLevelCountry: coupleDayLevelCountryRef, //ไปปฏิบัติราชการ ณ ประเทศ
-	coupleDayCountryHistory: coupleDayCountryHistoryRef, //ประวัติการลาติดตามคู่สมรส
-	coupleDayEndDateHistory: coupleDayEndDateHistoryRef, //ประวัติการลาติดตามคู่สมรส
-	coupleDayTotalHistory: coupleDayTotalHistoryRef, //ประวัติการลาติดตามคู่สมรส
-	coupleDayStartDateHistory: coupleDayStartDateHistoryRef, //ประวัติการลาติดตามคู่สมรส
-	leaveDetail: leaveDetailRef, //รายละเอียดการลา
-	leaveAddress: leaveAddressRef, //สถานที่ติดต่อขณะลา
-	leaveDocument: leaveDocumentRef,
-}
+  leaveWrote: leaveWroteRef, //เขียนที่***
+  leaveStartDate: leaveStartDateRef, //*วัน เดือน ปีเริ่มต้นลา
+  leaveEndDate: leaveEndDateRef, //*วัน เดือน ปีสิ้นสุดลา
+  leaveTotal: leaveTotalRef, //จำนวนวันลา
+  leaveSalary: leaveSalaryRef, //เงินเดือนปัจจุบัน
+  coupleDayName: coupleDayNameRef, //หมายเลขที่ติดต่อขณะลา
+  coupleDayPosition: coupleDayPositionRef, //ตำแหน่งคู่สมรส
+  coupleDayLevel: coupleDayLevelRef, //ระดับคู่สมรส
+  coupleDayLevelCountry: coupleDayLevelCountryRef, //ไปปฏิบัติราชการ ณ ประเทศ
+  coupleDayCountryHistory: coupleDayCountryHistoryRef, //ประวัติการลาติดตามคู่สมรส
+  coupleDayEndDateHistory: coupleDayEndDateHistoryRef, //ประวัติการลาติดตามคู่สมรส
+  coupleDayTotalHistory: coupleDayTotalHistoryRef, //ประวัติการลาติดตามคู่สมรส
+  coupleDayStartDateHistory: coupleDayStartDateHistoryRef, //ประวัติการลาติดตามคู่สมรส
+  leaveDetail: leaveDetailRef, //รายละเอียดการลา
+  leaveAddress: leaveAddressRef, //สถานที่ติดต่อขณะลา
+  leaveDocument: leaveDocumentRef,
+};
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
+const nameFile = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
 const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
 
 /** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
 function onValidate() {
-	const hasError = []
-	for (const key in FormRef) {
-		if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
-			const property = FormRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		const formData = new FormData()
-		formDataFollowSpouse.leaveDocument.forEach((file: File) => {
-			formData.append("leaveDocument", file)
-		})
-		// formData.append("leaveDocument", formDataFollowSpouse.leaveDocument);
-		formData.append("type", formDataFollowSpouse.type) //
-		formData.append("leaveStartDate", dateToISO(formDataFollowSpouse.leaveStartDate)) //
-		formData.append("leaveEndDate", dateToISO(formDataFollowSpouse.leaveEndDate)) //
-		formData.append("coupleDayStartDateHistory", dateToISO(formDataFollowSpouse.coupleDayStartDateHistory)) //
-		formData.append("coupleDayEndDateHistory", dateToISO(formDataFollowSpouse.coupleDayEndDateHistory)) //
-		formData.append("leaveWrote", formDataFollowSpouse.leaveWrote) //
-		formData.append("leaveDetail", formDataFollowSpouse.leaveDetail) //
-		formData.append("leaveSalaryText", formDataFollowSpouse.leaveSalaryText) //
-		formData.append("leaveSalary", formDataFollowSpouse.leaveSalary) //
-		formData.append("coupleDayTotalHistory", formDataFollowSpouse.coupleDayTotalHistory) //
-		formData.append("coupleDayCountryHistory", formDataFollowSpouse.coupleDayCountryHistory) //
-		formData.append("coupleDayLevelCountry", formDataFollowSpouse.coupleDayLevelCountry) //
-		formData.append("coupleDayLevel", formDataFollowSpouse.coupleDayLevel) //
-		formData.append("coupleDayPosition", formDataFollowSpouse.coupleDayPosition) //
-		formData.append("coupleDayName", formDataFollowSpouse.coupleDayName) //
-		formData.append("leaveTotal", formDataFollowSpouse.leaveTotal) //
-		props.onSubmit(formData)
-	}
+  const hasError = [];
+  for (const key in FormRef) {
+    if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
+      const property = FormRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    const formData = new FormData();
+    formDataFollowSpouse.leaveDocument.forEach((file: File) => {
+      formData.append("leaveDocument", file);
+    });
+    // formData.append("leaveDocument", formDataFollowSpouse.leaveDocument);
+    formData.append("type", formDataFollowSpouse.type); //
+    formData.append(
+      "leaveStartDate",
+      dateToISO(formDataFollowSpouse.leaveStartDate)
+    ); //
+    formData.append(
+      "leaveEndDate",
+      dateToISO(formDataFollowSpouse.leaveEndDate)
+    ); //
+    formData.append(
+      "coupleDayStartDateHistory",
+      dateToISO(formDataFollowSpouse.coupleDayStartDateHistory)
+    ); //
+    formData.append(
+      "coupleDayEndDateHistory",
+      dateToISO(formDataFollowSpouse.coupleDayEndDateHistory)
+    ); //
+    formData.append("leaveWrote", formDataFollowSpouse.leaveWrote); //
+    formData.append("leaveDetail", formDataFollowSpouse.leaveDetail); //
+    formData.append("leaveSalaryText", formDataFollowSpouse.leaveSalaryText); //
+    formData.append("leaveSalary", formDataFollowSpouse.leaveSalary); //
+    formData.append(
+      "coupleDayTotalHistory",
+      formDataFollowSpouse.coupleDayTotalHistory
+    ); //
+    formData.append(
+      "coupleDayCountryHistory",
+      formDataFollowSpouse.coupleDayCountryHistory
+    ); //
+    formData.append(
+      "coupleDayLevelCountry",
+      formDataFollowSpouse.coupleDayLevelCountry
+    ); //
+    formData.append("coupleDayLevel", formDataFollowSpouse.coupleDayLevel); //
+    formData.append(
+      "coupleDayPosition",
+      formDataFollowSpouse.coupleDayPosition
+    ); //
+    formData.append("coupleDayName", formDataFollowSpouse.coupleDayName); //
+    formData.append("leaveTotal", formDataFollowSpouse.leaveTotal); //
+    props.onSubmit(formData, isLeave.value);
+  }
 }
 
 /**
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
-const leaveEndDateRules = ref([val => !!val || `${"กรุณาเลือกลาถึงวันที่"}`])
-const isLeave = ref<boolean>(true)
+const isLeave = ref<boolean>(true);
 async function fetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), {
-			type: dataStore.typeId ?? null,
-			StartLeaveDate: formDataFollowSpouse.leaveStartDate ?? null,
-			EndLeaveDate: formDataFollowSpouse.leaveEndDate ?? null,
-		})
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				// formDataFollowSpouse.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday;
-				//   formDataFollowSpouse.leaveTotal = data.totalDate;
-				this.leaveEndDateRules = [val => !!val || `${"กรุณาเลือกลาถึงวันที่"}`]
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-				this.leaveEndDateRules = [val => false || `${"ไม่สามารถลาได้"}`]
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataFollowSpouse.leaveStartDate ?? null,
+      EndLeaveDate: formDataFollowSpouse.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
 }
 
 /**
  * function อัพเดทค่า LeaveTotal
  */
 function updateLeaveTotal() {
-	fetchCheck()
+  fetchCheck();
 
-	const newLeaveTotal = calculateDurationYmd(formDataFollowSpouse.leaveStartDate, formDataFollowSpouse.leaveEndDate)
-	formDataFollowSpouse.leaveTotal = newLeaveTotal
+  const newLeaveTotal = calculateDurationYmd(
+    formDataFollowSpouse.leaveStartDate,
+    formDataFollowSpouse.leaveEndDate
+  );
+  formDataFollowSpouse.leaveTotal = newLeaveTotal;
 }
 
 /**
  * function อัพเดทค่า LeaveTotal
  */
 function updateLeaveHistoryTotal() {
-	const newLeaveTotal = calculateDurationYmd(formDataFollowSpouse.coupleDayStartDateHistory, formDataFollowSpouse.coupleDayEndDateHistory)
-	formDataFollowSpouse.coupleDayTotalHistory = newLeaveTotal
+  const newLeaveTotal = calculateDurationYmd(
+    formDataFollowSpouse.coupleDayStartDateHistory,
+    formDataFollowSpouse.coupleDayEndDateHistory
+  );
+  formDataFollowSpouse.coupleDayTotalHistory = newLeaveTotal;
 }
 
-const leaveDocumentList = ref<any>()
-const statusCheck = ref<any>("")
+const dateEndInputStyle = computed(() => {
+  return !isLeave.value ? "input-alert" : "";
+});
+
+const leaveDocumentList = ref<any>();
+const statusCheck = ref<any>("");
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 onMounted(async () => {
-	if (props.data) {
-		formDataFollowSpouse.leaveWrote = props.data.leaveWrote
-		formDataFollowSpouse.leaveStartDate = new Date(props.data.leaveStartDate)
-		formDataFollowSpouse.leaveEndDate = new Date(props.data.leaveEndDate)
-		formDataFollowSpouse.leaveDetail = props.data.leaveDetail
-		formDataFollowSpouse.leaveDocument = props.data.leaveDocument
-		formDataFollowSpouse.leaveTotal = props.data.leaveTotal
-		formDataFollowSpouse.leaveSalaryText = props.data.leaveSalaryText
-		formDataFollowSpouse.leaveSalary = props.data.leaveSalary
-		formDataFollowSpouse.coupleDayName = props.data.coupleDayName
-		formDataFollowSpouse.coupleDayPosition = props.data.coupleDayPosition
-		formDataFollowSpouse.coupleDayLevel = props.data.coupleDayLevel
-		formDataFollowSpouse.coupleDayLevelCountry = props.data.coupleDayLevelCountry
-		formDataFollowSpouse.coupleDayCountryHistory = props.data.coupleDayCountryHistory
-		formDataFollowSpouse.coupleDayTotalHistory = props.data.coupleDayTotalHistory
-		formDataFollowSpouse.coupleDayStartDateHistory = props.data.coupleDayStartDateHistory
-		formDataFollowSpouse.coupleDayEndDateHistory = props.data.coupleDayEndDateHistory
-		leaveDocumentList.value = props.data.leaveDocument
+  if (props.data) {
+    formDataFollowSpouse.leaveWrote = props.data.leaveWrote;
+    formDataFollowSpouse.leaveStartDate = new Date(props.data.leaveStartDate);
+    formDataFollowSpouse.leaveEndDate = new Date(props.data.leaveEndDate);
+    formDataFollowSpouse.leaveDetail = props.data.leaveDetail;
+    formDataFollowSpouse.leaveDocument = props.data.leaveDocument;
+    formDataFollowSpouse.leaveTotal = props.data.leaveTotal;
+    formDataFollowSpouse.leaveSalaryText = props.data.leaveSalaryText;
+    formDataFollowSpouse.leaveSalary = props.data.leaveSalary;
+    formDataFollowSpouse.coupleDayName = props.data.coupleDayName;
+    formDataFollowSpouse.coupleDayPosition = props.data.coupleDayPosition;
+    formDataFollowSpouse.coupleDayLevel = props.data.coupleDayLevel;
+    formDataFollowSpouse.coupleDayLevelCountry =
+      props.data.coupleDayLevelCountry;
+    formDataFollowSpouse.coupleDayCountryHistory =
+      props.data.coupleDayCountryHistory;
+    formDataFollowSpouse.coupleDayTotalHistory =
+      props.data.coupleDayTotalHistory;
+    formDataFollowSpouse.coupleDayStartDateHistory =
+      props.data.coupleDayStartDateHistory;
+    formDataFollowSpouse.coupleDayEndDateHistory =
+      props.data.coupleDayEndDateHistory;
+    leaveDocumentList.value = props.data.leaveDocument;
 
-		const leaveTotal = await calculateDurationYmd(props.data.leaveStartDate, props.data.leaveEndDate)
-		formDataFollowSpouse.leaveTotal = leaveTotal
-		const coupleDayTotalHistory = await calculateDurationYmd(props.data.coupleDayStartDateHistory, props.data.coupleDayEndDateHistory)
-		formDataFollowSpouse.coupleDayTotalHistory = coupleDayTotalHistory
-		statusCheck.value = props.data.status
-	}
-})
+    const leaveTotal = await calculateDurationYmd(
+      props.data.leaveStartDate,
+      props.data.leaveEndDate
+    );
+    formDataFollowSpouse.leaveTotal = leaveTotal;
+    const coupleDayTotalHistory = await calculateDurationYmd(
+      props.data.coupleDayStartDateHistory,
+      props.data.coupleDayEndDateHistory
+    );
+    formDataFollowSpouse.coupleDayTotalHistory = coupleDayTotalHistory;
+    statusCheck.value = props.data.status;
+  }
+});
 </script>
 
 <template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent.stop="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="col-12 row q-pa-sm q-col-gutter-sm">
-				<q-input
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					ref="leaveWroteRef"
-					for="leaveWroteRef"
-					dense
-					hide-bottom-space
-					bg-color="white"
-					outlined
-					v-model="formDataFollowSpouse.leaveWrote"
-					label="เขียนที่"
-					:readonly="!edit || statusCheck === 'NEW'"
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-				<datepicker
-					class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataFollowSpouse.leaveStartDate"
-					:locale="'th'"
-					autoApply
-					hide-bottom-space
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					:readonly="!edit || statusCheck === 'NEW'"
-					@update:model-value="formDataFollowSpouse.leaveEndDate = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveStartDateRef"
-							for="leaveStartDateRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!edit || statusCheck === 'NEW'"
-							class="full-width datepicker"
-							:model-value="formDataFollowSpouse.leaveStartDate != null ? date2Thai(formDataFollowSpouse.leaveStartDate) : null"
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
+  <div style="display: flex; align-items: center">
+    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+  </div>
+  <form @submit.prevent.stop="onValidate">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="col-12 row q-pa-sm q-col-gutter-sm">
+        <q-input
+          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          ref="leaveWroteRef"
+          for="leaveWroteRef"
+          dense
+          hide-bottom-space
+          bg-color="white"
+          outlined
+          v-model="formDataFollowSpouse.leaveWrote"
+          label="เขียนที่"
+          :readonly="!edit || statusCheck === 'NEW'"
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
+        <datepicker
+          class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataFollowSpouse.leaveStartDate"
+          :locale="'th'"
+          autoApply
+          hide-bottom-space
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          :readonly="!edit || statusCheck === 'NEW'"
+          @update:model-value="formDataFollowSpouse.leaveEndDate = null"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="leaveStartDateRef"
+              for="leaveStartDateRef"
+              hide-bottom-space
+              bg-color="white"
+              :readonly="!edit || statusCheck === 'NEW'"
+              class="full-width datepicker"
+              :model-value="
+                formDataFollowSpouse.leaveStartDate != null
+                  ? date2Thai(formDataFollowSpouse.leaveStartDate)
+                  : null
+              "
+              :label="`${'ลาตั้งแต่วันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
 
-				<datepicker
-					class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataFollowSpouse.leaveEndDate"
-					:locale="'th'"
-					autoApply
-					borderless
-					hide-bottom-space
-					:enableTimePicker="false"
-					week-start="0"
-					@update:model-value="updateLeaveTotal(), fetchCheck()"
-					:readonly="!formDataFollowSpouse.leaveStartDate || statusCheck === 'NEW'"
-					:min-date="formDataFollowSpouse.leaveStartDate"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveEndDateRef"
-							for="leaveEndDateRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!formDataFollowSpouse.leaveStartDate || statusCheck === 'NEW'"
-							class="full-width datepicker"
-							:model-value="formDataFollowSpouse.leaveEndDate != null ? date2Thai(formDataFollowSpouse.leaveEndDate) : null"
-							:label="`${'ลาถึงวันที่'}`"
-							:rules="leaveEndDateRules"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-				<q-input
-					class="col-12 col-md-2 col-sm-6"
-					bg-color="white"
-					dense
-					outlined
-					ref="leaveTotalRef"
-					for="leaveTotalRef"
-					v-model="formDataFollowSpouse.leaveTotal"
-					label="เป็นเวลา"
-					readonly
-					hide-bottom-space
-				/>
-				<div class="col-12 col-md-6 col-sm-12">
-					<q-input
-						hide-bottom-space
-						bg-color="white"
-						class="col-12 col-sm-12"
-						ref="leaveSalaryRef"
-						for="leaveSalaryRef"
-						dense
-						outlined
-						v-model="dataStore.salary"
-						label="เงินเดือนปัจจุบัน"
-						readonly
-					/>
-				</div>
-				<div class="col-12 col-md-6 col-sm-12">
-					<q-input
-						hide-bottom-space
-						bg-color="white"
-						class="col-12 col-sm-12"
-						ref="leaveSalaryRef"
-						for="leaveSalaryRef"
-						dense
-						outlined
-						v-model="dataStore.salaryText"
-						label="เงินเดือนปัจจุบัน"
-						readonly
-					/>
-				</div>
+        <datepicker
+          class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataFollowSpouse.leaveEndDate"
+          :locale="'th'"
+          autoApply
+          borderless
+          hide-bottom-space
+          :enableTimePicker="false"
+          week-start="0"
+          @update:model-value="updateLeaveTotal(), fetchCheck()"
+          :readonly="
+            !formDataFollowSpouse.leaveStartDate || statusCheck === 'NEW'
+          "
+          :min-date="formDataFollowSpouse.leaveStartDate"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="leaveEndDateRef"
+              for="leaveEndDateRef"
+              hide-bottom-space
+              bg-color="white"
+              :readonly="
+                !formDataFollowSpouse.leaveStartDate || statusCheck === 'NEW'
+              "
+              class="full-width datepicker"
+              :model-value="
+                formDataFollowSpouse.leaveEndDate != null
+                  ? date2Thai(formDataFollowSpouse.leaveEndDate)
+                  : null
+              "
+              :label="`${'ลาถึงวันที่'}`"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+        <q-input
+          :bottom-slots="!isLeave ? true : false"
+          :color="!isLeave ? 'red' : 'black'"
+          :bg-color="!isLeave ? 'red-2' : 'white'"
+          :border-color="!isLeave ? 'red' : 'gray'"
+          :input-class="!isLeave ? dateEndInputStyle : ''"
+          class="col-12 col-md-2 col-sm-6"
+          dense
+          outlined
+          ref="leaveTotalRef"
+          for="leaveTotalRef"
+          v-model="formDataFollowSpouse.leaveTotal"
+          label="เป็นเวลา"
+          readonly
+        >
+          <template v-slot:hint>
+            <span style="color: red">
+              {{ !isLeave ? "จำนวนวันลาเกินที่กำหนด" : "" }}
+            </span>
+          </template>
+        </q-input>
 
-				<div class="col-md-3 col-sm-12">
-					<q-input
-						class="col-12 col-sm-12 cursor-pointer inputgreen"
-						hide-bottom-space
-						ref="coupleDayNameRef"
-						for="coupleDayNameRef"
-						dense
-						bg-color="white"
-						outlined
-						v-model="formDataFollowSpouse.coupleDayName"
-						label="ชื่อคู่สมรส"
-						:readonly="!edit || statusCheck === 'NEW'"
-						:rules="[val => !!val || `${'ชื่อคู่สมรส'}`]"
-					/>
-				</div>
-				<div class="col-md-3 col-sm-12">
-					<q-input
-						class="col-12 col-sm-12 cursor-pointer inputgreen"
-						hide-bottom-space
-						ref="coupleDayPositionRef"
-						for="coupleDayPositionRef"
-						dense
-						outlined
-						bg-color="white"
-						v-model="formDataFollowSpouse.coupleDayPosition"
-						label="ตำแหน่งคู่สมรส"
-						:readonly="!edit || statusCheck === 'NEW'"
-						:rules="[val => !!val || `${'ตำแหน่งคู่สมรส'}`]"
-					/>
-				</div>
-				<div class="col-md-3 col-sm-12">
-					<q-input
-						class="col-12 col-sm-12 cursor-pointer inputgreen"
-						ref="coupleDayLevelRef"
-						for="coupleDayLevelRef"
-						dense
-						hide-bottom-space
-						outlined
-						bg-color="white"
-						v-model="formDataFollowSpouse.coupleDayLevel"
-						label="ระดับคู่สมรส"
-						:readonly="!edit || statusCheck === 'NEW'"
-						:rules="[val => !!val || `${'ระดับคู่สมรส'}`]"
-					/>
-				</div>
-				<div class="col-md-3 col-sm-12">
-					<q-input
-						class="col-12 col-sm-12 cursor-pointer inputgreen"
-						ref="coupleDayLevelCountryRef"
-						for="coupleDayLevelCountryRef"
-						hide-bottom-space
-						dense
-						outlined
-						bg-color="white"
-						v-model="formDataFollowSpouse.coupleDayLevelCountry"
-						label="ไปปฏิบัติราชการ ณ ประเทศ"
-						:readonly="!edit || statusCheck === 'NEW'"
-						:rules="[val => !!val || `${'ปฏิบัติราชการ ณ ประเทศ'}`]"
-					/>
-				</div>
-				<div class="text-weight-bold text-dark col-12">ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย</div>
-				<datepicker
-					class="col-12 col-md-3 col-sm-12 inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataFollowSpouse.coupleDayStartDateHistory"
-					:locale="'th'"
-					autoApply
-					hide-bottom-space
-					borderless
-					:readonly="!edit || statusCheck === 'NEW'"
-					:enableTimePicker="false"
-					week-start="0"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="coupleDayStartDateHistoryRef"
-							for="coupleDayStartDateHistoryRef"
-							hide-bottom-space
-							bg-color="white"
-							class="full-width"
-							:readonly="!edit || statusCheck === 'NEW'"
-							:model-value="formDataFollowSpouse.coupleDayStartDateHistory != null ? date2Thai(formDataFollowSpouse.coupleDayStartDateHistory) : null"
-							:label="`${'ตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-				<datepicker
-					class="col-12 col-md-3 col-sm-12 inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataFollowSpouse.coupleDayEndDateHistory"
-					:locale="'th'"
-					autoApply
-					hide-bottom-space
-					borderless
-					:enableTimePicker="false"
-					:readonly="!edit || statusCheck === 'NEW'"
-					week-start="0"
-					@update:model-value="updateLeaveHistoryTotal()"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="coupleDayEndDateHistoryRef"
-							for="coupleDayEndDateHistoryRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!edit || statusCheck === 'NEW'"
-							class="full-width"
-							:model-value="formDataFollowSpouse.coupleDayEndDateHistory != null ? date2Thai(formDataFollowSpouse.coupleDayEndDateHistory) : null"
-							:label="`${'ถึงวันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกถึงวันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
+        <div class="col-12 col-md-6 col-sm-12">
+          <q-input
+            hide-bottom-space
+            bg-color="white"
+            class="col-12 col-sm-12"
+            ref="leaveSalaryRef"
+            for="leaveSalaryRef"
+            dense
+            outlined
+            v-model="dataStore.salary"
+            label="เงินเดือนปัจจุบัน"
+            readonly
+          />
+        </div>
+        <div class="col-12 col-md-6 col-sm-12">
+          <q-input
+            hide-bottom-space
+            bg-color="white"
+            class="col-12 col-sm-12"
+            ref="leaveSalaryRef"
+            for="leaveSalaryRef"
+            dense
+            outlined
+            v-model="dataStore.salaryText"
+            label="เงินเดือนปัจจุบัน"
+            readonly
+          />
+        </div>
 
-				<q-input
-					class="col-12 col-md-3 col-sm-12"
-					dense
-					outlined
-					readonly
-					hide-bottom-space
-					bg-color="white"
-					ref="coupleDayTotalHistoryRef"
-					for="coupleDayTotalHistoryRef"
-					v-model="formDataFollowSpouse.coupleDayTotalHistory"
-					label="เป็นเวลา"
-				/>
+        <div class="col-md-3 col-sm-12">
+          <q-input
+            class="col-12 col-sm-12 cursor-pointer inputgreen"
+            hide-bottom-space
+            ref="coupleDayNameRef"
+            for="coupleDayNameRef"
+            dense
+            bg-color="white"
+            outlined
+            v-model="formDataFollowSpouse.coupleDayName"
+            label="ชื่อคู่สมรส"
+            :readonly="!edit || statusCheck === 'NEW'"
+            :rules="[(val) => !!val || `${'ชื่อคู่สมรส'}`]"
+          />
+        </div>
+        <div class="col-md-3 col-sm-12">
+          <q-input
+            class="col-12 col-sm-12 cursor-pointer inputgreen"
+            hide-bottom-space
+            ref="coupleDayPositionRef"
+            for="coupleDayPositionRef"
+            dense
+            outlined
+            bg-color="white"
+            v-model="formDataFollowSpouse.coupleDayPosition"
+            label="ตำแหน่งคู่สมรส"
+            :readonly="!edit || statusCheck === 'NEW'"
+            :rules="[(val) => !!val || `${'ตำแหน่งคู่สมรส'}`]"
+          />
+        </div>
+        <div class="col-md-3 col-sm-12">
+          <q-input
+            class="col-12 col-sm-12 cursor-pointer inputgreen"
+            ref="coupleDayLevelRef"
+            for="coupleDayLevelRef"
+            dense
+            hide-bottom-space
+            outlined
+            bg-color="white"
+            v-model="formDataFollowSpouse.coupleDayLevel"
+            label="ระดับคู่สมรส"
+            :readonly="!edit || statusCheck === 'NEW'"
+            :rules="[(val) => !!val || `${'ระดับคู่สมรส'}`]"
+          />
+        </div>
+        <div class="col-md-3 col-sm-12">
+          <q-input
+            class="col-12 col-sm-12 cursor-pointer inputgreen"
+            ref="coupleDayLevelCountryRef"
+            for="coupleDayLevelCountryRef"
+            hide-bottom-space
+            dense
+            outlined
+            bg-color="white"
+            v-model="formDataFollowSpouse.coupleDayLevelCountry"
+            label="ไปปฏิบัติราชการ ณ ประเทศ"
+            :readonly="!edit || statusCheck === 'NEW'"
+            :rules="[(val) => !!val || `${'ปฏิบัติราชการ ณ ประเทศ'}`]"
+          />
+        </div>
+        <div class="text-weight-bold text-dark col-12">
+          ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย
+        </div>
+        <datepicker
+          class="col-12 col-md-3 col-sm-12 inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataFollowSpouse.coupleDayStartDateHistory"
+          :locale="'th'"
+          autoApply
+          hide-bottom-space
+          borderless
+          :readonly="!edit || statusCheck === 'NEW'"
+          :enableTimePicker="false"
+          week-start="0"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="coupleDayStartDateHistoryRef"
+              for="coupleDayStartDateHistoryRef"
+              hide-bottom-space
+              bg-color="white"
+              class="full-width"
+              :readonly="!edit || statusCheck === 'NEW'"
+              :model-value="
+                formDataFollowSpouse.coupleDayStartDateHistory != null
+                  ? date2Thai(formDataFollowSpouse.coupleDayStartDateHistory)
+                  : null
+              "
+              :label="`${'ตั้งแต่วันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+        <datepicker
+          class="col-12 col-md-3 col-sm-12 inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataFollowSpouse.coupleDayEndDateHistory"
+          :locale="'th'"
+          autoApply
+          hide-bottom-space
+          borderless
+          :enableTimePicker="false"
+          :readonly="!edit || statusCheck === 'NEW'"
+          week-start="0"
+          @update:model-value="updateLeaveHistoryTotal()"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="coupleDayEndDateHistoryRef"
+              for="coupleDayEndDateHistoryRef"
+              hide-bottom-space
+              bg-color="white"
+              :readonly="!edit || statusCheck === 'NEW'"
+              class="full-width"
+              :model-value="
+                formDataFollowSpouse.coupleDayEndDateHistory != null
+                  ? date2Thai(formDataFollowSpouse.coupleDayEndDateHistory)
+                  : null
+              "
+              :label="`${'ถึงวันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกถึงวันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
 
-				<q-input
-					class="col-12 col-md-3 col-sm-12"
-					dense
-					outlined
-					hide-bottom-space
-					bg-color="white"
-					ref="coupleDayCountryHistoryRef"
-					for="coupleDayCountryHistoryRef"
-					v-model="formDataFollowSpouse.coupleDayCountryHistory"
-					label="ประเทศ"
-					:readonly="!edit || statusCheck === 'NEW'"
-					:rules="[val => !!val || `${'กรุณาเลือกประเทศ'}`]"
-				/>
+        <q-input
+          class="col-12 col-md-3 col-sm-12"
+          dense
+          outlined
+          readonly
+          hide-bottom-space
+          bg-color="white"
+          ref="coupleDayTotalHistoryRef"
+          for="coupleDayTotalHistoryRef"
+          v-model="formDataFollowSpouse.coupleDayTotalHistory"
+          label="เป็นเวลา"
+        />
 
-				<q-input
-					hide-bottom-space
-					type="textarea"
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					bg-color="white"
-					outlined
-					ref="leaveDetailRef"
-					for="leaveDetailRef"
-					v-model="formDataFollowSpouse.leaveDetail"
-					label="รายละเอียด"
-					:readonly="!edit || statusCheck === 'NEW'"
-				/>
-				<div class="full-width" v-if="statusCheck != 'NEW'">
-					<div class="q-col-gutter-sm row">
-						<!-- multiple -->
-						<q-file
-							ref="fileRef"
-							bg-color="white"
-							v-model="formDataFollowSpouse.leaveDocument"
-							multiple
-							@added="fileUploadDoc"
-							dense
-							label="เอกสารประกอบ"
-							outlined
-							use-chips
-							class="q-pl-sm col-12"
-						>
-							<template v-slot:prepend>
-								<q-icon name="attach_file" color="primary" />
-							</template>
-						</q-file>
-					</div>
-				</div>
-				<!-- <div class="col-12" v-if="formDataFollowSpouse.leaveDocument.length == 0">
+        <q-input
+          class="col-12 col-md-3 col-sm-12"
+          dense
+          outlined
+          hide-bottom-space
+          bg-color="white"
+          ref="coupleDayCountryHistoryRef"
+          for="coupleDayCountryHistoryRef"
+          v-model="formDataFollowSpouse.coupleDayCountryHistory"
+          label="ประเทศ"
+          :readonly="!edit || statusCheck === 'NEW'"
+          :rules="[(val) => !!val || `${'กรุณาเลือกประเทศ'}`]"
+        />
+
+        <q-input
+          hide-bottom-space
+          type="textarea"
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          dense
+          bg-color="white"
+          outlined
+          ref="leaveDetailRef"
+          for="leaveDetailRef"
+          v-model="formDataFollowSpouse.leaveDetail"
+          label="รายละเอียด"
+          :readonly="!edit || statusCheck === 'NEW'"
+        />
+        <div class="full-width" v-if="statusCheck != 'NEW'">
+          <div class="q-col-gutter-sm row">
+            <!-- multiple -->
+            <q-file
+              ref="fileRef"
+              bg-color="white"
+              v-model="formDataFollowSpouse.leaveDocument"
+              multiple
+              @added="fileUploadDoc"
+              dense
+              label="เอกสารประกอบ"
+              outlined
+              use-chips
+              class="q-pl-sm col-12"
+            >
+              <template v-slot:prepend>
+                <q-icon name="attach_file" color="primary" />
+              </template>
+            </q-file>
+          </div>
+        </div>
+        <!-- <div class="col-12" v-if="formDataFollowSpouse.leaveDocument.length == 0">
 					<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
 				</div> -->
-				<div class="col-12" v-if="data">
-					<div class="col-12 col-md-12 col-sm-12">
-						<q-card bordered>
-							<!-- <div class="col-12">
+        <div class="col-12" v-if="data">
+          <div class="col-12 col-md-12 col-sm-12">
+            <q-card bordered>
+              <!-- <div class="col-12">
 								<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ{{ leaveDocumentList }} </q-card>
 							</div> -->
-							<q-list separator v-if="leaveDocumentList && leaveDocumentList.length > 0">
-								<q-item v-for="(document, index) in leaveDocumentList" :key="index" class="q-my-xs">
-									<q-item-section>
-										<q-item-label class="row items-baseline">
-											<div class="col">
-												{{ "เอกสารแนบฉบับที่" + (index + 1) }}
-											</div>
-											<q-btn class="col-6" :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
-												<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
-											</q-btn>
-										</q-item-label>
-									</q-item-section>
-								</q-item>
-							</q-list>
-							<div class="col-12" v-else>
-								<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
-							</div>
-						</q-card>
-					</div>
-				</div>
+              <q-list
+                separator
+                v-if="leaveDocumentList && leaveDocumentList.length > 0"
+              >
+                <q-item
+                  v-for="(document, index) in leaveDocumentList"
+                  :key="index"
+                  class="q-my-xs"
+                >
+                  <q-item-section>
+                    <q-item-label class="row items-baseline">
+                      <div class="col">
+                        {{ "เอกสารแนบฉบับที่" + (index + 1) }}
+                      </div>
+                      <q-btn
+                        class="col-6"
+                        :href="document"
+                        target="_blank"
+                        outline
+                        color="blue"
+                        label="ดาวน์โหลด"
+                        size="12px"
+                      >
+                        <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+                      </q-btn>
+                    </q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+              <div class="col-12" v-else>
+                <q-card class="q-pa-md" bordered>
+                  ไม่มีรายการเอกสารประกอบ
+                </q-card>
+              </div>
+            </q-card>
+          </div>
+        </div>
 
-				<div class="col-12 col-sm-6 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="(file, index) in leaveDocumentList" :key="index" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.name }}
-									</q-item-label>
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
+        <div class="col-12 col-sm-6 row" v-if="!edit">
+          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+            <div class="q-pl-sm text-weight-bold text-dark">
+              เอกสารเพิ่มเติม
+            </div>
+          </div>
+          <q-card bordered flat class="full-width">
+            <q-list separator>
+              <q-item
+                v-for="(file, index) in leaveDocumentList"
+                :key="index"
+                class="q-my-xs"
+              >
+                <q-item-section>
+                  <q-item-label class="full-width ellipsis">
+                    {{ file.name }}
+                  </q-item-label>
+                  <q-item-label caption> </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </div>
+    </q-card>
 
-		<q-separator class="q-mt-sm" />
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn v-if="!props.data || props.data.status == 'DRAFT'" id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"
-				><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
-			>
-			<q-btn v-if="data && statusCheck != 'NEW'" id="onSubmit" type="button" unelevated dense class="q-px-md items-center q-ml-sm" color="primary" label="ยื่นใบลา" @click="onConfirm"
-				><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
-			>
-		</div>
-	</form>
+    <q-separator class="q-mt-sm" />
+    <div class="row col-12 q-pt-md">
+      <q-space />
+      <q-btn
+        v-if="!props.data || props.data.status == 'DRAFT'"
+        id="onSubmit"
+        type="submit"
+        unelevated
+        dense
+        class="q-px-md items-center btnBlue"
+        label="บันทึก"
+        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+      >
+      <q-btn
+        v-if="data && statusCheck != 'NEW'"
+        id="onSubmit"
+        type="button"
+        unelevated
+        dense
+        class="q-px-md items-center q-ml-sm"
+        color="primary"
+        label="ยื่นใบลา"
+        @click="onConfirm()"
+        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+      >
+    </div>
+  </form>
 </template>
diff --git a/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue b/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
index 7c88f21..21d66e0 100644
--- a/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
@@ -1,398 +1,514 @@
 <script setup lang="ts">
-import { reactive, ref, onMounted } from "vue"
-import { useCounterMixin } from "@/stores/mixin"
-import { useQuasar } from "quasar"
-import type { RehabilitationForm } from "@/modules/05_leave/interface/request/AddAbsence"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRouter } from "vue-router"
-import genReport from "@/plugins/genreport"
+import { reactive, ref, onMounted, computed } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import type { RehabilitationForm } from "@/modules/05_leave/interface/request/AddAbsence";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter } from "vue-router";
+import genReport from "@/plugins/genreport";
 
 /** Use */
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const mixin = useCounterMixin()
-const { date2Thai, dialogConfirm, fails, dateToISO, success, messageError, showLoader, hideLoader } = mixin
-const router = useRouter()
-const edit = ref<boolean>(true)
-const isSave = ref<boolean>(false)
-const files = ref<any>(null)
+const dataStore = useLeaveStore();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  dialogConfirm,
+  fails,
+  dateToISO,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+} = mixin;
+const router = useRouter();
+const edit = ref<boolean>(true);
+const isSave = ref<boolean>(false);
+const files = ref<any>(null);
 
 /** ตัวแปร ref สำหรับแสดง validate */
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leaveWroteRef = ref<object | null>(null)
+const leaveStartDateRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const leaveWroteRef = ref<object | null>(null);
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-	onConfirm: {
-		type: Function,
-		default: () => "",
-	},
-})
+  data: {
+    type: Object,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+});
 
 /** ข้อมูล v-model ของฟอร์ม */
 const formDataRehabilitation = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leaveDocument: "",
-	leaveDetail: "",
-	leaveDraftDocument: null,
-})
+  type: dataStore.typeId,
+  leaveWrote: "",
+  leaveStartDate: null,
+  leaveEndDate: null,
+  leaveDocument: "",
+  leaveDetail: "",
+  leaveDraftDocument: null,
+});
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const formRef: RehabilitationForm = {
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leaveWrote: leaveWroteRef,
-}
+  leaveStartDate: leaveStartDateRef,
+  leaveEndDate: leaveEndDateRef,
+  leaveWrote: leaveWroteRef,
+};
 
 /** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
 function onValidate() {
-	const hasError = []
-	for (const key in formRef) {
-		if (Object.prototype.hasOwnProperty.call(formRef, key)) {
-			const property = formRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		const formData = new FormData()
+  const hasError = [];
+  for (const key in formRef) {
+    if (Object.prototype.hasOwnProperty.call(formRef, key)) {
+      const property = formRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    const formData = new FormData();
 
-		if (formDataRehabilitation.leaveDocument) {
-			formDataRehabilitation.leaveDocument.forEach((file: File) => {
-				formData.append("leaveDocument", file)
-			})
-			// formData.append("leaveDocument", formDataRehabilitation.leaveDocument)
-		}
+    if (formDataRehabilitation.leaveDocument) {
+      formDataRehabilitation.leaveDocument.forEach((file: File) => {
+        formData.append("leaveDocument", file);
+      });
+      // formData.append("leaveDocument", formDataRehabilitation.leaveDocument)
+    }
 
-		if (formDataRehabilitation.leaveDraftDocument) {
-			formData.append("leaveDraftDocument", formDataRehabilitation.leaveDraftDocument)
-		}
+    if (formDataRehabilitation.leaveDraftDocument) {
+      formData.append(
+        "leaveDraftDocument",
+        formDataRehabilitation.leaveDraftDocument
+      );
+    }
 
-		formData.append("type", formDataRehabilitation.type) //
-		formData.append("leaveStartDate", dateToISO(formDataRehabilitation.leaveStartDate)) //
-		formData.append("leaveEndDate", dateToISO(formDataRehabilitation.leaveEndDate)) //
-		formData.append("leaveWrote", formDataRehabilitation.leaveWrote) //
-		formData.append("leaveDetail", formDataRehabilitation.leaveDetail) //
-		props.onSubmit(formData)
-	}
+    formData.append("type", formDataRehabilitation.type); //
+    formData.append(
+      "leaveStartDate",
+      dateToISO(formDataRehabilitation.leaveStartDate)
+    ); //
+    formData.append(
+      "leaveEndDate",
+      dateToISO(formDataRehabilitation.leaveEndDate)
+    ); //
+    formData.append("leaveWrote", formDataRehabilitation.leaveWrote); //
+    formData.append("leaveDetail", formDataRehabilitation.leaveDetail); //
+    props.onSubmit(formData, isLeave.value);
+  }
 }
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const nameFileDraft = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
+const nameFile = ref<string>("");
+const nameFileDraft = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
 const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
 
 /**
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
-const leaveEndDateRules = ref([val => !!val || `${"กรุณาเลือกลาถึงวันที่"}`])
-const isLeave = ref<boolean>(true)
+const isLeave = ref<boolean>(true);
 async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), {
-			type: dataStore.typeId ?? null,
-			StartLeaveDate: formDataRehabilitation.leaveStartDate ?? null,
-			EndLeaveDate: formDataRehabilitation.leaveEndDate ?? null,
-		})
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				this.leaveEndDateRules = [val => !!val || `${"กรุณาเลือกลาถึงวันที่"}`]
-				// formDataRehabilitation.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				// formDataRehabilitation.leaveTotal = data.totalDate
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-				this.leaveEndDateRules = [val => false || `${"ไม่สามารถลาได้"}`]
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataRehabilitation.leaveStartDate ?? null,
+      EndLeaveDate: formDataRehabilitation.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
 }
 
 //download function
 async function onClickDownloadFile(id: string, fileName: string) {
-	showLoader()
-	await http
-		.get(config.API.leaveReport(id))
-		.then(async res => {
-			const data = res.data.result
-			await genReport(data, fileName)
-		})
-		.catch(err => {
-			messageError($q, err)
-		})
-		.finally(() => {
-			hideLoader()
-		})
+  showLoader();
+  await http
+    .get(config.API.leaveReport(id))
+    .then(async (res) => {
+      const data = res.data.result;
+      await genReport(data, fileName);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
-const leaveDocumentList = ref<any>()
-const leaveDraftDocument = ref<string>()
-const statusCheck = ref<any>("")
+const dateEndInputStyle = computed(() => {
+  return !isLeave.value ? "input-alert" : "";
+});
+
+const leaveDocumentList = ref<any>();
+const leaveDraftDocument = ref<string>();
+const statusCheck = ref<any>("");
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 onMounted(() => {
-	if (props.data) {
-		formDataRehabilitation.leaveWrote = props.data.leaveWrote
-		formDataRehabilitation.leaveStartDate = new Date(props.data.leaveStartDate)
-		formDataRehabilitation.leaveEndDate = new Date(props.data.leaveEndDate)
-		formDataRehabilitation.leaveDetail = props.data.leaveDetail
-		// formDataRehabilitation.leaveDocument = props.data.leaveDocument;
-		leaveDraftDocument.value = props.data.leaveDraftDocument
-		leaveDocumentList.value = props.data.leaveDocument
-		statusCheck.value = props.data.status
-	}
-})
+  if (props.data) {
+    formDataRehabilitation.leaveWrote = props.data.leaveWrote;
+    formDataRehabilitation.leaveStartDate = new Date(props.data.leaveStartDate);
+    formDataRehabilitation.leaveEndDate = new Date(props.data.leaveEndDate);
+    formDataRehabilitation.leaveDetail = props.data.leaveDetail;
+    // formDataRehabilitation.leaveDocument = props.data.leaveDocument;
+    leaveDraftDocument.value = props.data.leaveDraftDocument;
+    leaveDocumentList.value = props.data.leaveDocument;
+    statusCheck.value = props.data.status;
+  }
+});
 </script>
 
 <template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="row q-pa-sm q-col-gutter-sm">
-				<q-input
-					v-model="formDataRehabilitation.leaveWrote"
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					ref="leaveWroteRef"
-					dense
-					outlined
-					bg-color="white"
-					label="เขียนที่"
-					hide-bottom-space
-					:readonly="!edit || statusCheck === 'NEW'"
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
+  <div style="display: flex; align-items: center">
+    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+  </div>
+  <form @submit.prevent="onValidate">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="row q-pa-sm q-col-gutter-sm">
+        <q-input
+          v-model="formDataRehabilitation.leaveWrote"
+          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          ref="leaveWroteRef"
+          dense
+          outlined
+          bg-color="white"
+          label="เขียนที่"
+          hide-bottom-space
+          :readonly="!edit || statusCheck === 'NEW'"
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
 
-				<datepicker
-					v-model="formDataRehabilitation.leaveStartDate"
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					autoApply
-					borderless
-					week-start="0"
-					:enableTimePicker="false"
-					:locale="'th'"
-					:readonly="!edit || statusCheck === 'NEW'"
-					@update:model-value="formDataRehabilitation.leaveEndDate = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							ref="leaveStartDateRef"
-							class="full-width datepicker"
-							bg-color="white"
-							outlined
-							dense
-							lazy-rules
-							hide-bottom-space
-							:readonly="!edit || statusCheck === 'NEW'"
-							:model-value="formDataRehabilitation.leaveStartDate != null ? date2Thai(formDataRehabilitation.leaveStartDate) : null"
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
+        <datepicker
+          v-model="formDataRehabilitation.leaveStartDate"
+          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          autoApply
+          borderless
+          week-start="0"
+          :enableTimePicker="false"
+          :locale="'th'"
+          :readonly="!edit || statusCheck === 'NEW'"
+          @update:model-value="formDataRehabilitation.leaveEndDate = null"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              ref="leaveStartDateRef"
+              class="full-width datepicker"
+              bg-color="white"
+              outlined
+              dense
+              lazy-rules
+              hide-bottom-space
+              :readonly="!edit || statusCheck === 'NEW'"
+              :model-value="
+                formDataRehabilitation.leaveStartDate != null
+                  ? date2Thai(formDataRehabilitation.leaveStartDate)
+                  : null
+              "
+              :label="`${'ลาตั้งแต่วันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
 
-				<datepicker
-					v-model="formDataRehabilitation.leaveEndDate"
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					autoApply
-					borderless
-					week-start="0"
-					:locale="'th'"
-					@update:model-value="FetchCheck()"
-					:readonly="!formDataRehabilitation.leaveStartDate || statusCheck === 'NEW'"
-					:enableTimePicker="false"
-					:min-date="formDataRehabilitation.leaveStartDate"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							ref="leaveEndDateRef"
-							class="full-width datepicker"
-							outlined
-							dense
-							lazy-rules
-							bg-color="white"
-							hide-bottom-space
-							:readonly="!formDataRehabilitation.leaveStartDate || statusCheck === 'NEW'"
-							:model-value="formDataRehabilitation.leaveEndDate != null ? date2Thai(formDataRehabilitation.leaveEndDate) : null"
-							:label="`${'ลาถึงวันที่'}`"
-							:rules="leaveEndDateRules"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
+        <datepicker
+          :class="!isLeave ? dateEndInputStyle : ''"
+          v-model="formDataRehabilitation.leaveEndDate"
+          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          autoApply
+          borderless
+          week-start="0"
+          :locale="'th'"
+          @update:model-value="FetchCheck()"
+          :readonly="
+            !formDataRehabilitation.leaveStartDate || statusCheck === 'NEW'
+          "
+          :enableTimePicker="false"
+          :min-date="formDataRehabilitation.leaveStartDate"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              ref="leaveEndDateRef"
+              class="full-width datepicker"
+              outlined
+              dense
+              lazy-rules
+              hide-bottom-space
+              :readonly="
+                !formDataRehabilitation.leaveStartDate || statusCheck === 'NEW'
+              "
+              :model-value="
+                formDataRehabilitation.leaveEndDate != null
+                  ? date2Thai(formDataRehabilitation.leaveEndDate)
+                  : null
+              "
+              :label="`${'ลาถึงวันที่'}`"
+              :bottom-slots="!isLeave ? true : false"
+              :color="!isLeave ? 'red' : 'black'"
+              :bg-color="!isLeave ? 'red-2' : 'white'"
+              :border-color="!isLeave ? 'red' : 'gray'"
+              :input-class="!isLeave ? dateEndInputStyle : ''"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
 
-				<q-input
-					v-model="formDataRehabilitation.leaveDetail"
-					:readonly="!edit || statusCheck === 'NEW'"
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					bg-color="white"
-					dense
-					outlined
-					type="textarea"
-					label="รายละเอียด"
-				/>
+              <template v-slot:hint>
+                <span style="color: red">
+                  {{ !isLeave ? "จำนวนวันลาเกินที่กำหนด" : "" }}
+                </span>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
 
-				<div class="col-12" v-if="statusCheck != 'NEW'">
-					<!-- multiple -->
-					<q-file v-model="formDataRehabilitation.leaveDocument" @added="fileUploadDoc" multiple use-chips bg-color="white" dense outlined label="เอกสารประกอบ">
-						<template v-slot:prepend>
-							<q-icon name="attach_file" color="primary" />
-						</template>
-					</q-file>
-					<!-- <div class="col-12" v-if="formDataRehabilitation.leaveDocument.length == 0">
+        <q-input
+          v-model="formDataRehabilitation.leaveDetail"
+          :readonly="!edit || statusCheck === 'NEW'"
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          bg-color="white"
+          dense
+          outlined
+          type="textarea"
+          label="รายละเอียด"
+        />
+
+        <div class="col-12" v-if="statusCheck != 'NEW'">
+          <!-- multiple -->
+          <q-file
+            v-model="formDataRehabilitation.leaveDocument"
+            @added="fileUploadDoc"
+            multiple
+            use-chips
+            bg-color="white"
+            dense
+            outlined
+            label="เอกสารประกอบ"
+          >
+            <template v-slot:prepend>
+              <q-icon name="attach_file" color="primary" />
+            </template>
+          </q-file>
+          <!-- <div class="col-12" v-if="formDataRehabilitation.leaveDocument.length == 0">
 						<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
 					</div> -->
-					<div class="col-12" v-if="data">
-						<div class="col-12 col-md-12 col-sm-12">
-							<q-card bordered>
-								<!-- <div class="col-12">
+          <div class="col-12" v-if="data">
+            <div class="col-12 col-md-12 col-sm-12">
+              <q-card bordered>
+                <!-- <div class="col-12">
 								<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ{{ leaveDocumentList }} </q-card>
 							</div> -->
-								<q-list separator>
-									<q-item v-for="(document, index) in leaveDocumentList" :key="index" class="q-my-xs">
-										<q-item-section>
-											<q-item-label class="row items-baseline">
-												<div class="col">
-													{{ "เอกสารแนบฉบับที่" + (index + 1) }}
-												</div>
-												<q-btn class="col-6" :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
-													<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
-												</q-btn>
-											</q-item-label>
-										</q-item-section>
-									</q-item>
-								</q-list>
-							</q-card>
-						</div>
-					</div>
-				</div>
+                <q-list separator>
+                  <q-item
+                    v-for="(document, index) in leaveDocumentList"
+                    :key="index"
+                    class="q-my-xs"
+                  >
+                    <q-item-section>
+                      <q-item-label class="row items-baseline">
+                        <div class="col">
+                          {{ "เอกสารแนบฉบับที่" + (index + 1) }}
+                        </div>
+                        <q-btn
+                          class="col-6"
+                          :href="document"
+                          target="_blank"
+                          outline
+                          color="blue"
+                          label="ดาวน์โหลด"
+                          size="12px"
+                        >
+                          <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+                        </q-btn>
+                      </q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-card>
+            </div>
+          </div>
+        </div>
 
-				<div class="col-12 col-sm-6 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator v-if="leaveDocumentList && leaveDocumentList.length > 0">
-							<q-item v-for="(file, index) in leaveDocumentList" :key="index" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.name }}
-									</q-item-label>
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-						<div class="col-12" v-else>
-							<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
-						</div>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
+        <div class="col-12 col-sm-6 row" v-if="!edit">
+          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+            <div class="q-pl-sm text-weight-bold text-dark">
+              เอกสารเพิ่มเติม
+            </div>
+          </div>
+          <q-card bordered flat class="full-width">
+            <q-list
+              separator
+              v-if="leaveDocumentList && leaveDocumentList.length > 0"
+            >
+              <q-item
+                v-for="(file, index) in leaveDocumentList"
+                :key="index"
+                class="q-my-xs"
+              >
+                <q-item-section>
+                  <q-item-label class="full-width ellipsis">
+                    {{ file.name }}
+                  </q-item-label>
+                  <q-item-label caption> </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+            <div class="col-12" v-else>
+              <q-card class="q-pa-md" bordered>
+                ไม่มีรายการเอกสารประกอบ
+              </q-card>
+            </div>
+          </q-card>
+        </div>
+      </div>
+    </q-card>
 
-		<div v-if="data && data.id" class="q-mt-md">
-			<div style="display: flex; align-items: center">
-				<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
-				<div class="q-pl-sm text-weight-bold text-dark">ดาวน์โหลด/อัปโหลดแบบฟอร์ม</div>
-			</div>
-			<q-card class="bg-grey-1 q-pa-sm" bordered>
-				<div class="row">
-					<div class="col-sm-3 q-my-sm">
-						<div class="column q-mx-xs">
-							<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
+    <div v-if="data && data.id" class="q-mt-md">
+      <div style="display: flex; align-items: center">
+        <q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
+        <div class="q-pl-sm text-weight-bold text-dark">
+          ดาวน์โหลด/อัปโหลดแบบฟอร์ม
+        </div>
+      </div>
+      <q-card class="bg-grey-1 q-pa-sm" bordered>
+        <div class="row">
+          <div class="col-sm-3 q-my-sm">
+            <div class="column q-mx-xs">
+              <!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
                 ดาวน์โหลด
               </div> -->
-							<q-btn color="primary" icon="download" label="ดาวน์โหลดแบบฟอร์ม" @click="onClickDownloadFile(data.id, `แบบฟอร์ม${data.leaveTypeName}`)" />
-						</div>
-					</div>
-					<div class="col-sm-5 q-my-sm">
-						<div class="column q-mx-xs">
-							<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
+              <q-btn
+                color="primary"
+                icon="download"
+                label="ดาวน์โหลดแบบฟอร์ม"
+                @click="
+                  onClickDownloadFile(data.id, `แบบฟอร์ม${data.leaveTypeName}`)
+                "
+              />
+            </div>
+          </div>
+          <div class="col-sm-5 q-my-sm">
+            <div class="column q-mx-xs">
+              <!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
                 อัปโหลด
               </div> -->
-							<q-file v-model="formDataRehabilitation.leaveDraftDocument" use-chips dense label="อัปโหลดแบบฟอร์ม" outlined bg-color="white" accept="application/pdf">
-								<template v-slot:prepend>
-									<q-icon name="attach_file" color="primary" />
-								</template>
-							</q-file>
-						</div>
-					</div>
+              <q-file
+                v-model="formDataRehabilitation.leaveDraftDocument"
+                use-chips
+                dense
+                label="อัปโหลดแบบฟอร์ม"
+                outlined
+                bg-color="white"
+                accept="application/pdf"
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+            </div>
+          </div>
 
-					<div v-if="leaveDraftDocument" class="col-sm-2 q-my-sm">
-						<div class="column q-mx-xs">
-							<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
+          <div v-if="leaveDraftDocument" class="col-sm-2 q-my-sm">
+            <div class="column q-mx-xs">
+              <!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
                 ดูไฟล์อัปโหลด
               </div> -->
-							<q-btn icon="visibility" color="blue" label="ดาวน์โหลดไฟล์" :href="leaveDraftDocument" target="_blank" />
-						</div>
-					</div>
-					<!-- <div class="col-md-1 self-end q-mb-sm">
+              <q-btn
+                icon="visibility"
+                color="blue"
+                label="ดาวน์โหลดไฟล์"
+                :href="leaveDraftDocument"
+                target="_blank"
+              />
+            </div>
+          </div>
+          <!-- <div class="col-md-1 self-end q-mb-sm">
 						<q-btn v-if="formDataRehabilitation.leaveDraftDocument != null" flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"
 							><q-tooltip>อัปโหลด</q-tooltip></q-btn
 						>
 					</div> -->
-				</div>
-			</q-card>
-		</div>
+        </div>
+      </q-card>
+    </div>
 
-		<div v-if="!isSave">
-			<q-separator class="q-mt-sm" />
-			<div class="row col-12 q-pt-md">
-				<q-space />
-				<q-btn v-if="!props.data || props.data.status == 'DRAFT'" id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"
-					><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
-				>
-				<q-btn v-if="data && statusCheck != 'NEW'" id="onSubmit" type="button" unelevated dense class="q-px-md items-center q-ml-sm" color="primary" label="ยื่นใบลา" @click="onConfirm"
-					><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
-				>
-			</div>
-		</div>
-	</form>
+    <div v-if="!isSave">
+      <q-separator class="q-mt-sm" />
+      <div class="row col-12 q-pt-md">
+        <q-space />
+        <q-btn
+          v-if="!props.data || props.data.status == 'DRAFT'"
+          id="onSubmit"
+          type="submit"
+          unelevated
+          dense
+          class="q-px-md items-center btnBlue"
+          label="บันทึก"
+          ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+        >
+        <q-btn
+          v-if="data && statusCheck != 'NEW'"
+          id="onSubmit"
+          type="button"
+          unelevated
+          dense
+          class="q-px-md items-center q-ml-sm"
+          color="primary"
+          label="ยื่นใบลา"
+          @click="onConfirm()"
+          ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+        >
+      </div>
+    </div>
+  </form>
 </template>
diff --git a/src/modules/05_leave/interface/request/FollowSpouseForm.ts b/src/modules/05_leave/interface/request/FollowSpouseForm.ts
index a07cb8e..82f6d04 100644
--- a/src/modules/05_leave/interface/request/FollowSpouseForm.ts
+++ b/src/modules/05_leave/interface/request/FollowSpouseForm.ts
@@ -27,10 +27,10 @@ interface FormRef {
 	coupleDayPosition: object | null //ตำแหน่งคู่สมรส
 	coupleDayLevel: object | null //ระดับคู่สมรส
 	coupleDayLevelCountry: object | null //ไปปฏิบัติราชการ ณ ประเทศ
-	followHistoryCountry: object | null //ประวัติการลาติดตามคู่สมรสประเทศ
-	followHistoryTime: object | null //ประวัติการลาติดตามคู่สมรสประเทศ
-	followHistoryStart: object | null //ประวัติการลาติดตามคู่สมรสประเทศ
-	followHistoryEnd: object | null //ประวัติการลาติดตามคู่สมรสประเทศ
+	// followHistoryCountry: object | null //ประวัติการลาติดตามคู่สมรสประเทศ
+	// followHistoryTime: object | null //ประวัติการลาติดตามคู่สมรสประเทศ
+	// followHistoryStart: object | null //ประวัติการลาติดตามคู่สมรสประเทศ
+	// followHistoryEnd: object | null //ประวัติการลาติดตามคู่สมรสประเทศ
 	leaveDetail: object | null //รายละเอียดการลา
 	leaveAddress: object | null //สถานที่ติดต่อขณะลา
 	leaveDocument: object | null //เอกสารปะกอบ
diff --git a/src/modules/05_leave/views/AddPage.vue b/src/modules/05_leave/views/AddPage.vue
index 344836e..0344fc9 100644
--- a/src/modules/05_leave/views/AddPage.vue
+++ b/src/modules/05_leave/views/AddPage.vue
@@ -1,164 +1,238 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue"
-import { useQuasar } from "quasar"
-import { useRouter, useRoute } from "vue-router"
-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"
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import { useRouter, useRoute } from "vue-router";
+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";
 
-import FormPart2 from "@/modules/05_leave/components/FormLeave/Form.vue"
-import SickForm from "@/modules/05_leave/components/FormLeave/01_SickForm.vue"
-import FormBirth from "@/modules/05_leave/components/FormLeave/03_Birth.vue"
-import HelpWifeBirthForm from "@/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue"
-import VacationForm from "@/modules/05_leave/components/FormLeave/05_VacationForm.vue"
-import OrdinationForm from "@/modules/05_leave/components/FormLeave/06_OrdinationForm.vue"
-import HajjForm from "@/modules/05_leave/components/FormLeave/07_HajjForm.vue"
-import MilitaryForm from "@/modules/05_leave/components/FormLeave/08_MilitaryForm.vue"
-import StudyForm from "@/modules/05_leave/components/FormLeave/09_StudyForm.vue"
-import TrainForm from "@/modules/05_leave/components/FormLeave/10_TrainForm.vue"
-import WorkInternationalForm from "@/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue"
-import FollowSpouseForm from "@/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue"
-import RehabilitationForm from "@/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue"
+import FormPart2 from "@/modules/05_leave/components/FormLeave/Form.vue";
+import SickForm from "@/modules/05_leave/components/FormLeave/01_SickForm.vue";
+import FormBirth from "@/modules/05_leave/components/FormLeave/03_Birth.vue";
+import HelpWifeBirthForm from "@/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue";
+import VacationForm from "@/modules/05_leave/components/FormLeave/05_VacationForm.vue";
+import OrdinationForm from "@/modules/05_leave/components/FormLeave/06_OrdinationForm.vue";
+import HajjForm from "@/modules/05_leave/components/FormLeave/07_HajjForm.vue";
+import MilitaryForm from "@/modules/05_leave/components/FormLeave/08_MilitaryForm.vue";
+import StudyForm from "@/modules/05_leave/components/FormLeave/09_StudyForm.vue";
+import TrainForm from "@/modules/05_leave/components/FormLeave/10_TrainForm.vue";
+import WorkInternationalForm from "@/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue";
+import FollowSpouseForm from "@/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue";
+import RehabilitationForm from "@/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue";
 
-const dataStore = useLeaveStore()
-const { fetchLeaveType } = dataStore
-const mixin = useCounterMixin()
-const { dialogConfirm, success, messageError, showLoader, hideLoader } = mixin
+const dataStore = useLeaveStore();
+const { fetchLeaveType } = dataStore;
+const mixin = useCounterMixin();
+const { dialogConfirm, success, messageError, showLoader, hideLoader } = mixin;
 
-const router = useRouter()
-const route = useRoute()
-const myform = ref<QForm | null>(null)
-const $q = useQuasar()
+const router = useRouter();
+const route = useRoute();
+const myform = ref<QForm | null>(null);
+const $q = useQuasar();
 
-const model = ref<string>("")
-const modelSpecific = ref<string>("")
+const model = ref<string>("");
+const modelSpecific = ref<string>("");
 
 /**
  * ดึงค่าประเภทการลาจาก Api
  */
 async function fectOptionType() {
-	await http
-		.get(config.API.leaveType())
-		.then(async res => {
-			const data = res.data.result
-			await fetchLeaveType(data)
-		})
-		.catch(err => {
-			messageError($q, err)
-		})
+  await http
+    .get(config.API.leaveType())
+    .then(async (res) => {
+      const data = res.data.result;
+      await fetchLeaveType(data);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
 }
 
 function inputEdit(val: boolean) {
-	return {
-		"full-width cursor-pointer ": val,
-		"full-width cursor-pointer inputgreen": !val,
-	}
+  return {
+    "full-width cursor-pointer ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
 }
 
-function onSubmit(postData: FormData) {
-	dialogConfirm($q, async () => {
-		showLoader()
-		await http
-			.post(config.API.leaveUser(), postData)
-			.then(res => {
-				router.push(`/leave/edit/${res.data.result.id}`)
-				success($q, "บันทึกสำเร็จ")
-			})
-			.catch((e: any) => {
-				messageError($q, e)
-			})
-			.finally(() => {
-				hideLoader()
-			})
-	})
+function onSubmit(postData: FormData, isLeave: boolean = true) {
+  if (isLeave) {
+    dialogConfirm($q, async () => {
+      showLoader();
+      await http
+        .post(config.API.leaveUser(), postData)
+        .then((res) => {
+          router.push(`/leave/edit/${res.data.result.id}`);
+          success($q, "บันทึกสำเร็จ");
+        })
+        .catch((e: any) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    });
+  } else {
+    messageError($q, "", "ไม่มีสิทธิ์ลา");
+  }
 }
 
 onMounted(async () => {
-	if (dataStore.options.length == 0) {
-		await fectOptionType()
-	}
-})
+  if (dataStore.options.length == 0) {
+    await fectOptionType();
+  }
+});
 </script>
 
 <template>
-	<div class="col-12 row justify-center">
-		<div class="col-xs-12 col-sm-12 col-md-11">
-			<div class="toptitle text-white col-12 row items-center">
-				<q-btn to="/leave" icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" />
-				<div>สร้างใบลา</div>
-			</div>
+  <div class="col-12 row justify-center">
+    <div class="col-xs-12 col-sm-12 col-md-11">
+      <div class="toptitle text-white col-12 row items-center">
+        <q-btn
+          to="/leave"
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+        />
+        <div>สร้างใบลา</div>
+      </div>
 
-			<q-form ref="myform" class="col-12">
-				<q-card bordered>
-					<div class="col-12 row q-col-gutter-md q-pa-md">
-						<div class="col-xs-12 col-sm-12">
-							<div style="display: flex; align-items: center">
-								<q-icon name="mdi-numeric-1-circle" size="20px" color="primary" />
-								<div class="q-pl-sm text-weight-bold text-dark">เลือกประเภทการลา</div>
-							</div>
-							<div class="q-py-sm q-px-lg">
-								<div class="row">
-									<q-select
-										dense
-										class="col-12 col-sm-6 col-md-4 inputgreen"
-										outlined
-										v-model="model"
-										:options="dataStore.options"
-										option-value="code"
-										option-label="name"
-										emit-value
-										map-options
-										prefix="ประเภทใบลา :"
-										@update:model-value="dataStore.typeConvert(model, null), (modelSpecific = ''), dataStore.fetchProfile()"
-									/>
-								</div>
+      <q-form ref="myform" class="col-12">
+        <q-card bordered>
+          <div class="col-12 row q-col-gutter-md q-pa-md">
+            <div class="col-xs-12 col-sm-12">
+              <div style="display: flex; align-items: center">
+                <q-icon
+                  name="mdi-numeric-1-circle"
+                  size="20px"
+                  color="primary"
+                />
+                <div class="q-pl-sm text-weight-bold text-dark">
+                  เลือกประเภทการลา
+                </div>
+              </div>
+              <div class="q-py-sm q-px-lg">
+                <div class="row">
+                  <q-select
+                    dense
+                    class="col-12 col-sm-6 col-md-4 inputgreen"
+                    outlined
+                    v-model="model"
+                    :options="dataStore.options"
+                    option-value="code"
+                    option-label="name"
+                    emit-value
+                    map-options
+                    prefix="ประเภทใบลา :"
+                    @update:model-value="
+                      dataStore.typeConvert(model, null),
+                        (modelSpecific = ''),
+                        dataStore.fetchProfile()
+                    "
+                  />
+                </div>
 
-								<div class="row q-mt-sm">
-									<div class="col-12 col-sm-6 col-md-3" v-if="model === 'LV-006' || model === 'LV-008'">
-										<q-select
-											dense
-											outlined
-											v-model="modelSpecific"
-											:options="model === 'LV-006' ? dataStore.optionsOrdination : dataStore.optionsSpecific"
-											option-value="code"
-											option-label="name"
-											emit-value
-											map-options
-											prefix="ประเภทการลา :"
-											@update:model-value="dataStore.typeConvert(model, modelSpecific)"
-										/>
-									</div>
-								</div>
-							</div>
+                <div class="row q-mt-sm">
+                  <div
+                    class="col-12 col-sm-6 col-md-3"
+                    v-if="model === 'LV-006' || model === 'LV-008'"
+                  >
+                    <q-select
+                      dense
+                      outlined
+                      v-model="modelSpecific"
+                      :options="
+                        model === 'LV-006'
+                          ? dataStore.optionsOrdination
+                          : dataStore.optionsSpecific
+                      "
+                      option-value="code"
+                      option-label="name"
+                      emit-value
+                      map-options
+                      prefix="ประเภทการลา :"
+                      @update:model-value="
+                        dataStore.typeConvert(model, modelSpecific)
+                      "
+                    />
+                  </div>
+                </div>
+              </div>
 
-							<div>
-								<div style="display: flex; align-items: center">
-									<q-icon name="mdi-numeric-2-circle" size="20px" color="primary" />
-									<div class="q-pl-sm text-weight-bold text-dark">ข้อมูลการลา</div>
-								</div>
-								<FormPart2 :model="model" />
-							</div>
-						</div>
+              <div>
+                <div style="display: flex; align-items: center">
+                  <q-icon
+                    name="mdi-numeric-2-circle"
+                    size="20px"
+                    color="primary"
+                  />
+                  <div class="q-pl-sm text-weight-bold text-dark">
+                    ข้อมูลการลา
+                  </div>
+                </div>
+                <FormPart2 :model="model" />
+              </div>
+            </div>
 
-						<div class="col-12">
-							<SickForm v-if="model === 'LV-001' || model === 'LV-002'" :on-submit="onSubmit" />
-							<FormBirth v-if="model === 'LV-003'" :on-submit="onSubmit" />
-							<HelpWifeBirthForm v-if="model === 'LV-004'" :on-submit="onSubmit" />
-							<VacationForm v-if="model === 'LV-005'" :on-submit="onSubmit" />
-							<OrdinationForm v-if="model === 'LV-006' && modelSpecific == 'b1'" :on-submit="onSubmit" />
-							<HajjForm v-if="model === 'LV-006' && modelSpecific == 'b2'" :on-submit="onSubmit" />
-							<MilitaryForm v-if="model === 'LV-007'" style="width: 100%" :on-submit="onSubmit" />
-							<StudyForm v-if="model === 'LV-008' && modelSpecific === 's1'" style="width: 100%" :on-submit="onSubmit" />
-							<TrainForm v-if="model === 'LV-008' && modelSpecific != 's1' && modelSpecific != ''" :on-submit="onSubmit" />
-							<WorkInternationalForm v-if="model === 'LV-009'" :on-submit="onSubmit" />
-							<FollowSpouseForm v-if="model === 'LV-010'" :on-submit="onSubmit" />
-							<RehabilitationForm v-if="model === 'LV-011'" :on-submit="onSubmit" />
-						</div>
-					</div>
-				</q-card>
-			</q-form>
-		</div>
-	</div>
+            <div class="col-12">
+              <SickForm
+                v-if="model === 'LV-001' || model === 'LV-002'"
+                :on-submit="onSubmit"
+              />
+              <FormBirth v-if="model === 'LV-003'" :on-submit="onSubmit" />
+              <HelpWifeBirthForm
+                v-if="model === 'LV-004'"
+                :on-submit="onSubmit"
+              />
+              <VacationForm v-if="model === 'LV-005'" :on-submit="onSubmit" />
+              <OrdinationForm
+                v-if="model === 'LV-006' && modelSpecific == 'b1'"
+                :on-submit="onSubmit"
+              />
+              <HajjForm
+                v-if="model === 'LV-006' && modelSpecific == 'b2'"
+                :on-submit="onSubmit"
+              />
+              <MilitaryForm
+                v-if="model === 'LV-007'"
+                style="width: 100%"
+                :on-submit="onSubmit"
+              />
+              <StudyForm
+                v-if="model === 'LV-008' && modelSpecific === 's1'"
+                style="width: 100%"
+                :on-submit="onSubmit"
+              />
+              <TrainForm
+                v-if="
+                  model === 'LV-008' &&
+                  modelSpecific != 's1' &&
+                  modelSpecific != ''
+                "
+                :on-submit="onSubmit"
+              />
+              <WorkInternationalForm
+                v-if="model === 'LV-009'"
+                :on-submit="onSubmit"
+              />
+              <FollowSpouseForm
+                v-if="model === 'LV-010'"
+                :on-submit="onSubmit"
+              />
+              <RehabilitationForm
+                v-if="model === 'LV-011'"
+                :on-submit="onSubmit"
+              />
+            </div>
+          </div>
+        </q-card>
+      </q-form>
+    </div>
+  </div>
 </template>
diff --git a/src/modules/05_leave/views/EditPage.vue b/src/modules/05_leave/views/EditPage.vue
index 234c120..0896e5f 100644
--- a/src/modules/05_leave/views/EditPage.vue
+++ b/src/modules/05_leave/views/EditPage.vue
@@ -1,334 +1,461 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive, computed } from "vue"
+import { ref, onMounted, reactive, computed } from "vue";
 
 //import form
-import FormPart2 from "@/modules/05_leave/components/FormLeave/Form.vue"
-import SickForm from "@/modules/05_leave/components/FormLeave/01_SickForm.vue"
-import FormBirth from "@/modules/05_leave/components/FormLeave/03_Birth.vue"
-import HelpWifeBirthForm from "@/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue"
-import VacationForm from "@/modules/05_leave/components/FormLeave/05_VacationForm.vue"
-import OrdinationForm from "@/modules/05_leave/components/FormLeave/06_OrdinationForm.vue"
-import HajjForm from "@/modules/05_leave/components/FormLeave/07_HajjForm.vue"
-import MilitaryForm from "@/modules/05_leave/components/FormLeave/08_MilitaryForm.vue"
-import StudyForm from "@/modules/05_leave/components/FormLeave/09_StudyForm.vue"
-import TrainForm from "@/modules/05_leave/components/FormLeave/10_TrainForm.vue"
-import WorkInternationalForm from "@/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue"
-import FollowSpouseForm from "@/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue"
-import RehabilitationForm from "@/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue"
+import FormPart2 from "@/modules/05_leave/components/FormLeave/Form.vue";
+import SickForm from "@/modules/05_leave/components/FormLeave/01_SickForm.vue";
+import FormBirth from "@/modules/05_leave/components/FormLeave/03_Birth.vue";
+import HelpWifeBirthForm from "@/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue";
+import VacationForm from "@/modules/05_leave/components/FormLeave/05_VacationForm.vue";
+import OrdinationForm from "@/modules/05_leave/components/FormLeave/06_OrdinationForm.vue";
+import HajjForm from "@/modules/05_leave/components/FormLeave/07_HajjForm.vue";
+import MilitaryForm from "@/modules/05_leave/components/FormLeave/08_MilitaryForm.vue";
+import StudyForm from "@/modules/05_leave/components/FormLeave/09_StudyForm.vue";
+import TrainForm from "@/modules/05_leave/components/FormLeave/10_TrainForm.vue";
+import WorkInternationalForm from "@/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue";
+import FollowSpouseForm from "@/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue";
+import RehabilitationForm from "@/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue";
 
-import { useCounterMixin } from "@/stores/mixin"
-import { useQuasar } from "quasar"
-import { useRoute } from "vue-router"
-import router from "@/router"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useLeaveStore } from "@/modules/05_leave/store"
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
+import router from "@/router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useLeaveStore } from "@/modules/05_leave/store";
 
-const route = useRoute()
-const personalId = ref<string>(route.params.id as string)
-const leaveId = ref<string>("")
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const mixin = useCounterMixin()
-const { messageError, showLoader, hideLoader, dialogConfirm, success, date2Thai, dateToISO } = mixin
+const route = useRoute();
+const personalId = ref<string>(route.params.id as string);
+const leaveId = ref<string>("");
+const dataStore = useLeaveStore();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  success,
+  date2Thai,
+  dateToISO,
+} = mixin;
 
-const titleName = ref<string>("")
+const titleName = ref<string>("");
 /** Form รายละเอียดข้อมูล*/
 const formData = reactive<any>({
-	id: "", //Id การยื่นขอลา
-	leaveTypeName: "", // Name ประเภทการลา
-	leaveTypeId: "", //Id ประเภทการลา
-	fullname: "", //คำนำหน้า ชื่อ นามสกุล คนขอลา
-	dateSendLeave: null, // วันที่ยืนใบลา
-	status: "", //สถานะการของลา
-	leaveDateStart: null, //วันเริ่มการลา
-	leaveDateEnd: null, //วันสิ้นสุดการลา
-	leaveCount: 0, //จำนวนวันลา
-	leaveWrote: "", //เขียนที่
-	leaveAddress: "", //สถานที่ติดต่อขณะลา
-	leaveNumber: "", //หมายเลขที่ติดต่อขณะลา
-	leaveDetail: "", //รายละเอียดการลา
-	leaveDocument: [], //อัปโหลดเอกสารประกอบรายละเอียด
-	leaveDraftDocument: "", //อัปโหลดแบบฟอร์มการลา
-	leaveLastStart: null, //ลาครั้งสุดท้ายในประเภทนั้น ๆ เริ่มเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
-	leaveLastEnd: null, //ลาครั้งสุดท้ายในประเภทนั้น ๆ สิ้นสุดเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
-	leaveTotal: 0, //จำนวนวันที่ลา(Auto)
-	leavebirthDate: null, //วันเดือนปีเกิด(Auto)
-	leavegovernmentDate: null, //วันที่เข้ารับราชการ(Auto)
-	leaveSalary: 0, //เงินเดือนปัจจุบัน(Auto)
-	leaveSalaryText: "", //เงินเดือนปัจจุบัน(เขียนเป็นคำอ่าน)
-	leaveTypeDay: "", //ประเภทการลาในวันนั้นเช่น
-	wifeDayName: "", //ชื่อภรรยา(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
-	wifeDayDateBorn: null, //วันที่คลอด(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
-	restDayOldTotal: 0, //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา(ลาพักผ่อน)(Auto)
-	restDayCurrentTotal: 0, //จำนวนวันลาพักผ่อนประจำปีปัจจุบัน(ลาพักผ่อน)(Auto)
-	ordainDayStatus: "", //เคย/ไม่เคยบวช (ให้เลือก) (ลาอุปสมบท)
-	ordainDayLocationName: "", //สถานที่บวช ชื่อวัด(ลาอุปสมบท)
-	ordainDayLocationAddress: "", //สถานที่บวช ที่อยู่(ลาอุปสมบท)
-	ordainDayLocationNumber: "", //สถานที่บวช หมายเลขโทรศัพท์(ลาอุปสมบท)
-	ordainDayOrdination: null, //สถานที่บวช วันอุปสมบท(ลาอุปสมบท)
-	ordainDayBuddhistLentName: "", //สถานที่จำพรรษา ชื่อวัด(ลาอุปสมบท)
-	ordainDayBuddhistLentAddress: "", //สถานที่จำพรรษา ที่อยู่(ลาอุปสมบท)
-	hajjDayStatus: "", //เคย/ไม่เคยไปประกอบพิธีฮัจญ์ (ให้เลือก) (ลาประกอบพิธีฮัจญ์)
-	absentDaySummon: "", //ได้รับหมายเรียกของ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
-	absentDayLocation: "", //ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
-	absentDayRegistorDate: null, //ลงวันที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
-	absentDayGetIn: "", //ให้เข้ารับการ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
-	absentDayAt: "", //ณ ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
-	studyDaySubject: "", //กรณีลาไปศึกษาต่อ ศึกษาวิชา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-	studyDayDegreeLevel: "", //กรณีลาไปศึกษาต่อ ขั้นปริญญา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-	studyDayUniversityName: "", //กรณีลาไปศึกษาต่อ ชื่อสถานศึกษา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-	studyDayTrainingSubject: "", //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ด้าน/หลักสูตร (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-	studyDayTrainingName: "", //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ณ สถานที่	(ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-	studyDayCountry: "", //ประเทศ (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-	studyDayScholarship: "", //ด้วยทุน (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-	coupleDayName: "", //ชื่อคู่สมรส (ลาติดตามคู่สมรส)
-	coupleDayPosition: "", //ตำแหน่งคู่สมรส (ลาติดตามคู่สมรส)
-	coupleDayLevel: "", //ระดับคู่สมรส (ลาติดตามคู่สมรส)
-	coupleDayLevelCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ (ลาติดตามคู่สมรส)
-	coupleDayCountryHistory: "", //ประวัติ ประเทศ (ลาติดตามคู่สมรส)
-	coupleDayTotalHistory: "", //ประวัติ เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
-	coupleDayStartDateHistory: null, //ประวัติ ตั้งแต่วันที่ (ลาติดตามคู่สมรส)
-	coupleDayEndDateHistory: null, //ประวัติ ถึงวันที่ (ลาติดตามคู่สมรส)
-	coupleDaySumTotalHistory: "", //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
-	approveStep: "",
-	dear: "",
-	leaveLast: "",
-})
+  id: "", //Id การยื่นขอลา
+  leaveTypeName: "", // Name ประเภทการลา
+  leaveTypeId: "", //Id ประเภทการลา
+  fullname: "", //คำนำหน้า ชื่อ นามสกุล คนขอลา
+  dateSendLeave: null, // วันที่ยืนใบลา
+  status: "", //สถานะการของลา
+  leaveDateStart: null, //วันเริ่มการลา
+  leaveDateEnd: null, //วันสิ้นสุดการลา
+  leaveCount: 0, //จำนวนวันลา
+  leaveWrote: "", //เขียนที่
+  leaveAddress: "", //สถานที่ติดต่อขณะลา
+  leaveNumber: "", //หมายเลขที่ติดต่อขณะลา
+  leaveDetail: "", //รายละเอียดการลา
+  leaveDocument: [], //อัปโหลดเอกสารประกอบรายละเอียด
+  leaveDraftDocument: "", //อัปโหลดแบบฟอร์มการลา
+  leaveLastStart: null, //ลาครั้งสุดท้ายในประเภทนั้น ๆ เริ่มเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
+  leaveLastEnd: null, //ลาครั้งสุดท้ายในประเภทนั้น ๆ สิ้นสุดเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
+  leaveTotal: 0, //จำนวนวันที่ลา(Auto)
+  leavebirthDate: null, //วันเดือนปีเกิด(Auto)
+  leavegovernmentDate: null, //วันที่เข้ารับราชการ(Auto)
+  leaveSalary: 0, //เงินเดือนปัจจุบัน(Auto)
+  leaveSalaryText: "", //เงินเดือนปัจจุบัน(เขียนเป็นคำอ่าน)
+  leaveTypeDay: "", //ประเภทการลาในวันนั้นเช่น
+  wifeDayName: "", //ชื่อภรรยา(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
+  wifeDayDateBorn: null, //วันที่คลอด(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
+  restDayOldTotal: 0, //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา(ลาพักผ่อน)(Auto)
+  restDayCurrentTotal: 0, //จำนวนวันลาพักผ่อนประจำปีปัจจุบัน(ลาพักผ่อน)(Auto)
+  ordainDayStatus: "", //เคย/ไม่เคยบวช (ให้เลือก) (ลาอุปสมบท)
+  ordainDayLocationName: "", //สถานที่บวช ชื่อวัด(ลาอุปสมบท)
+  ordainDayLocationAddress: "", //สถานที่บวช ที่อยู่(ลาอุปสมบท)
+  ordainDayLocationNumber: "", //สถานที่บวช หมายเลขโทรศัพท์(ลาอุปสมบท)
+  ordainDayOrdination: null, //สถานที่บวช วันอุปสมบท(ลาอุปสมบท)
+  ordainDayBuddhistLentName: "", //สถานที่จำพรรษา ชื่อวัด(ลาอุปสมบท)
+  ordainDayBuddhistLentAddress: "", //สถานที่จำพรรษา ที่อยู่(ลาอุปสมบท)
+  hajjDayStatus: "", //เคย/ไม่เคยไปประกอบพิธีฮัจญ์ (ให้เลือก) (ลาประกอบพิธีฮัจญ์)
+  absentDaySummon: "", //ได้รับหมายเรียกของ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+  absentDayLocation: "", //ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+  absentDayRegistorDate: null, //ลงวันที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+  absentDayGetIn: "", //ให้เข้ารับการ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+  absentDayAt: "", //ณ ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+  studyDaySubject: "", //กรณีลาไปศึกษาต่อ ศึกษาวิชา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+  studyDayDegreeLevel: "", //กรณีลาไปศึกษาต่อ ขั้นปริญญา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+  studyDayUniversityName: "", //กรณีลาไปศึกษาต่อ ชื่อสถานศึกษา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+  studyDayTrainingSubject: "", //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ด้าน/หลักสูตร (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+  studyDayTrainingName: "", //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ณ สถานที่	(ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+  studyDayCountry: "", //ประเทศ (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+  studyDayScholarship: "", //ด้วยทุน (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+  coupleDayName: "", //ชื่อคู่สมรส (ลาติดตามคู่สมรส)
+  coupleDayPosition: "", //ตำแหน่งคู่สมรส (ลาติดตามคู่สมรส)
+  coupleDayLevel: "", //ระดับคู่สมรส (ลาติดตามคู่สมรส)
+  coupleDayLevelCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ (ลาติดตามคู่สมรส)
+  coupleDayCountryHistory: "", //ประวัติ ประเทศ (ลาติดตามคู่สมรส)
+  coupleDayTotalHistory: "", //ประวัติ เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
+  coupleDayStartDateHistory: null, //ประวัติ ตั้งแต่วันที่ (ลาติดตามคู่สมรส)
+  coupleDayEndDateHistory: null, //ประวัติ ถึงวันที่ (ลาติดตามคู่สมรส)
+  coupleDaySumTotalHistory: "", //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
+  approveStep: "",
+  dear: "",
+  leaveLast: "",
+});
 
 /**
  * function เรียกข้อมูลการลา
  * @param id การลา
  */
 async function fetchDataDetail(id: string) {
-	showLoader()
-	await http
-		.get(config.API.leaveUserId(id), {})
-		.then(async res => {
-			const data = await res.data.result
+  showLoader();
+  await http
+    .get(config.API.leaveUserId(id), {})
+    .then(async (res) => {
+      const data = await res.data.result;
 
-			dataStore.typeId = data.leaveTypeId
+      dataStore.typeId = data.leaveTypeId;
 
-			titleName.value = data.fullName ?? "-"
-			formData.id = data.id ?? "-"
-			formData.leaveTypeName = data.leaveTypeName ?? "-"
-			formData.leaveTypeId = data.leaveTypeId ?? "-"
-			formData.fullname = data.fullName ?? "-"
-			formData.dateSendLeave = data.dateSendLeave && date2Thai(data.dateSendLeave)
-			formData.status = data.status ?? "-"
-			formData.leaveStartDate = data.leaveStartDate
-			// console.log(formData.leaveDateStart)
-			formData.leaveEndDate = data.leaveEndDate
-			// console.log(formData.leaveDateEnd)
-			formData.leaveCount = data.leaveTotal ?? "-"
-			formData.leaveWrote = data.leaveWrote ?? "-"
-			formData.leaveAddress = data.leaveAddress ?? "-"
-			formData.leaveNumber = data.leaveNumber ?? "-"
-			formData.leaveDetail = data.leaveDetail ?? "-"
-			formData.leaveDocument = data.leaveDocument
-			formData.leaveDraftDocument = data.leaveDraftDocument
-			formData.leaveLastStart = data.leaveLastStart && date2Thai(data.leaveLastStart)
-			formData.leaveLastEnd = data.leaveLastStart && date2Thai(data.leaveLastEnd)
-			formData.leaveTotal = data.leaveTotal
-			formData.leavebirthDate = data.leaveBirthDate && date2Thai(data.leaveBirthDate)
-			formData.leavegovernmentDate = data.leaveGovernmentDate && date2Thai(data.leaveGovernmentDate)
-			formData.leaveSalary = data.leaveSalary ?? "-"
-			formData.leaveSalaryText = data.leaveSalaryText ?? "-"
-			formData.wifeDayName = data.wifeDayName ?? "-"
-			formData.wifeDayDateBorn = data.wifeDayDateBorn && date2Thai(data.wifeDayDateBorn)
-			formData.restDayOldTotal = data.restDayOldTotal ?? "-"
-			formData.restDayCurrentTotal = data.restDayCurrentTotal ?? "-"
-			formData.ordainDayStatus = data.ordainDayStatus
-			formData.ordainDayLocationName = data.ordainDayLocationName ?? "-"
-			formData.ordainDayLocationAddress = data.ordainDayLocationAddress ?? "-"
-			formData.ordainDayLocationNumber = data.ordainDayLocationNumber ?? "-"
-			formData.ordainDayOrdination = data.ordainDayOrdination && date2Thai(data.ordainDayOrdination)
-			formData.ordainDayBuddhistLentName = data.ordainDayBuddhistLentName ?? "-"
-			formData.ordainDayBuddhistLentAddress = data.ordainDayBuddhistLentAddress ?? "-"
-			formData.hajjDayStatus = data.hajjDayStatus
-			formData.absentDaySummon = data.absentDaySummon ?? "-"
-			formData.absentDayLocation = data.absentDayLocation ?? "-"
-			formData.absentDayRegistorDate = data.absentDayRegistorDate && date2Thai(data.absentDayRegistorDate)
-			formData.absentDayGetIn = data.absentDayGetIn ?? "-"
-			formData.absentDayAt = data.absentDayAt ?? "-"
-			formData.studyDaySubject = data.studyDaySubject ?? "-"
-			formData.studyDayDegreeLevel = data.studyDayDegreeLevel ?? "-"
-			formData.studyDayUniversityName = data.studyDayUniversityName ?? "-"
-			formData.studyDayTrainingSubject = data.studyDayTrainingSubject ?? "-" ?? "-"
-			formData.studyDayTrainingName = data.studyDayTrainingName ?? "-"
-			formData.studyDayCountry = data.studyDayCountry ?? "-"
-			formData.studyDayScholarship = data.studyDayScholarship ?? "-"
-			formData.coupleDayName = data.coupleDayName ?? "-"
-			formData.coupleDayPosition = data.coupleDayPosition ?? "-"
-			formData.coupleDayLevel = data.coupleDayLevel ?? "-"
-			formData.coupleDayLevelCountry = data.coupleDayLevelCountry ?? "-"
-			formData.coupleDayCountryHistory = data.coupleDayCountryHistory ?? "-"
-			formData.coupleDayTotalHistory = data.coupleDayTotalHistory ?? "-"
-			formData.coupleDayStartDateHistory = data.coupleDayStartDateHistory
-			formData.coupleDayEndDateHistory = data.coupleDayEndDateHistory
-			formData.coupleDaySumTotalHistory = data.coupleDaySumTotalHistory ?? "-"
-			formData.approveStep = data.approveStep ?? "-"
-			formData.dear = data.dear ?? "-"
-			formData.leaveLast = data.leaveLast ?? "-"
-			// checkLeaveType(formData.leaveTypeId, formData.leaveTypeName)
+      titleName.value = data.fullName ?? "-";
+      formData.id = data.id ?? "-";
+      formData.leaveTypeName = data.leaveTypeName ?? "-";
+      formData.leaveTypeId = data.leaveTypeId ?? "-";
+      formData.fullname = data.fullName ?? "-";
+      formData.dateSendLeave =
+        data.dateSendLeave && date2Thai(data.dateSendLeave);
+      formData.status = data.status ?? "-";
+      formData.leaveStartDate = data.leaveStartDate;
+      // console.log(formData.leaveDateStart)
+      formData.leaveEndDate = data.leaveEndDate;
+      // console.log(formData.leaveDateEnd)
+      formData.leaveCount = data.leaveTotal ?? "-";
+      formData.leaveWrote = data.leaveWrote ?? "-";
+      formData.leaveAddress = data.leaveAddress ?? "-";
+      formData.leaveNumber = data.leaveNumber ?? "-";
+      formData.leaveDetail = data.leaveDetail ?? "-";
+      formData.leaveDocument = data.leaveDocument;
+      formData.leaveDraftDocument = data.leaveDraftDocument;
+      formData.leaveLastStart =
+        data.leaveLastStart && date2Thai(data.leaveLastStart);
+      formData.leaveLastEnd =
+        data.leaveLastStart && date2Thai(data.leaveLastEnd);
+      formData.leaveTotal = data.leaveTotal;
+      formData.leavebirthDate =
+        data.leaveBirthDate && date2Thai(data.leaveBirthDate);
+      formData.leavegovernmentDate =
+        data.leaveGovernmentDate && date2Thai(data.leaveGovernmentDate);
+      formData.leaveSalary = data.leaveSalary ?? "-";
+      formData.leaveSalaryText = data.leaveSalaryText ?? "-";
+      formData.wifeDayName = data.wifeDayName ?? "-";
+      formData.wifeDayDateBorn =
+        data.wifeDayDateBorn && date2Thai(data.wifeDayDateBorn);
+      formData.restDayOldTotal = data.restDayOldTotal ?? "-";
+      formData.restDayCurrentTotal = data.restDayCurrentTotal ?? "-";
+      formData.ordainDayStatus = data.ordainDayStatus;
+      formData.ordainDayLocationName = data.ordainDayLocationName ?? "-";
+      formData.ordainDayLocationAddress = data.ordainDayLocationAddress ?? "-";
+      formData.ordainDayLocationNumber = data.ordainDayLocationNumber ?? "-";
+      formData.ordainDayOrdination =
+        data.ordainDayOrdination && date2Thai(data.ordainDayOrdination);
+      formData.ordainDayBuddhistLentName =
+        data.ordainDayBuddhistLentName ?? "-";
+      formData.ordainDayBuddhistLentAddress =
+        data.ordainDayBuddhistLentAddress ?? "-";
+      formData.hajjDayStatus = data.hajjDayStatus;
+      formData.absentDaySummon = data.absentDaySummon ?? "-";
+      formData.absentDayLocation = data.absentDayLocation ?? "-";
+      formData.absentDayRegistorDate =
+        data.absentDayRegistorDate && date2Thai(data.absentDayRegistorDate);
+      formData.absentDayGetIn = data.absentDayGetIn ?? "-";
+      formData.absentDayAt = data.absentDayAt ?? "-";
+      formData.studyDaySubject = data.studyDaySubject ?? "-";
+      formData.studyDayDegreeLevel = data.studyDayDegreeLevel ?? "-";
+      formData.studyDayUniversityName = data.studyDayUniversityName ?? "-";
+      formData.studyDayTrainingSubject =
+        data.studyDayTrainingSubject ?? "-" ?? "-";
+      formData.studyDayTrainingName = data.studyDayTrainingName ?? "-";
+      formData.studyDayCountry = data.studyDayCountry ?? "-";
+      formData.studyDayScholarship = data.studyDayScholarship ?? "-";
+      formData.coupleDayName = data.coupleDayName ?? "-";
+      formData.coupleDayPosition = data.coupleDayPosition ?? "-";
+      formData.coupleDayLevel = data.coupleDayLevel ?? "-";
+      formData.coupleDayLevelCountry = data.coupleDayLevelCountry ?? "-";
+      formData.coupleDayCountryHistory = data.coupleDayCountryHistory ?? "-";
+      formData.coupleDayTotalHistory = data.coupleDayTotalHistory ?? "-";
+      formData.coupleDayStartDateHistory = data.coupleDayStartDateHistory;
+      formData.coupleDayEndDateHistory = data.coupleDayEndDateHistory;
+      formData.coupleDaySumTotalHistory = data.coupleDaySumTotalHistory ?? "-";
+      formData.approveStep = data.approveStep ?? "-";
+      formData.dear = data.dear ?? "-";
+      formData.leaveLast = data.leaveLast ?? "-";
+      // checkLeaveType(formData.leaveTypeId, formData.leaveTypeName)
 
-			dataStore.fetchProfileOld(data)
-		})
-		.catch(err => {
-			messageError($q, err)
-		})
-		.finally(() => {
-			hideLoader()
-		})
+      dataStore.fetchProfileOld(data);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 const model = computed(() => {
-	return dataStore.options.find(x => x.id == formData.leaveTypeId)?.code ?? ""
-})
+  return (
+    dataStore.options.find((x) => x.id == formData.leaveTypeId)?.code ?? ""
+  );
+});
 
 const modelSpecific = computed(() => {
-	const code = dataStore.options.find(x => x.id == formData.leaveTypeId)?.code
+  const code = dataStore.options.find(
+    (x) => x.id == formData.leaveTypeId
+  )?.code;
 
-	if (code == "LV-006" && formData.ordainDayLocationName != "") {
-		return "b1"
-	} else if (code == "LV-006" && formData.ordainDayLocationName == "") {
-		return "b2"
-	} else if (code == "LV-008" && formData.studyDayTrainingSubject == "") {
-		return "s1"
-	} else if (code == "LV-008" && formData.studyDayTrainingSubject != "") {
-		return "s2"
-	} else {
-		return ""
-	}
-})
+  if (code == "LV-006" && formData.ordainDayLocationName != "") {
+    return "b1";
+  } else if (code == "LV-006" && formData.ordainDayLocationName == "") {
+    return "b2";
+  } else if (code == "LV-008" && formData.studyDayTrainingSubject == "") {
+    return "s1";
+  } else if (code == "LV-008" && formData.studyDayTrainingSubject != "") {
+    return "s2";
+  } else {
+    return "";
+  }
+});
 
-function onSubmit(formData: FormData) {
-	dialogConfirm($q, async () => {
-		showLoader()
-		await http
-			.put(config.API.leaveUserId(personalId.value), formData)
-			// .put(config.API.leaveUser() + "/" + formData.id, postData)
-			.then(() => {
-				success($q, "บันทึกสำเร็จ")
-			})
-			.catch((e: any) => {
-				messageError($q, e)
-			})
-			.finally(() => {
-				hideLoader()
-				fetchDataDetail(personalId.value)
-			})
-	})
+function onSubmit(formData: FormData, isLeave: boolean = true) {
+  if (isLeave) {
+    dialogConfirm($q, async () => {
+      showLoader();
+      await http
+        .put(config.API.leaveUserId(personalId.value), formData)
+        // .put(config.API.leaveUser() + "/" + formData.id, postData)
+        .then(() => {
+          success($q, "บันทึกสำเร็จ");
+        })
+        .catch((e: any) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+          fetchDataDetail(personalId.value);
+        });
+    });
+  } else {
+    messageError($q, "", "ไม่มีสิทธิ์ลา");
+  }
 }
 
 function onConfirm(id: string) {
-	dialogConfirm(
-		$q,
-		async () => {
-			showLoader()
-			await http
-				.put(config.API.leaveUserSendId(personalId.value), { reason: "" })
-				.then(() => {
-					// router.push("/leave")
-					success($q, "ยื่นใบลาสำเร็จ")
-				})
-				.catch((e: any) => {
-					messageError($q, e)
-				})
-				.finally(() => {
-					hideLoader()
-				})
-		},
-		"ยืนยันการยื่นใบลา",
-		"หากยืนยันแล้วจะไม่สามารถกลับมาแก้ไขได้ ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่"
-	)
+  dialogConfirm(
+    $q,
+    async () => {
+      showLoader();
+      await http
+        .put(config.API.leaveUserSendId(personalId.value), { reason: "" })
+        .then(() => {
+          router.push("/leave");
+          success($q, "ยื่นใบลาสำเร็จ");
+        })
+        .catch((e: any) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ยืนยันการยื่นใบลา",
+    "หากยืนยันแล้วจะไม่สามารถกลับมาแก้ไขได้ ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่"
+  );
 }
 
 /**เมื่อเริ่มโหลดหน้า
  * เรียกใช้งาน fetchData เพื่อดึงข้อมูล
  */
 onMounted(() => {
-	fetchDataDetail(personalId.value)
-})
+  fetchDataDetail(personalId.value);
+});
 </script>
 
 <template>
-	<div class="col-12 row justify-center">
-		<div class="col-xs-12 col-sm-12 col-md-11">
-			<div class="toptitle text-white col-12 row items-center">
-				<q-btn to="/leave" icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" />
-				<div>
-					แก้ไขใบลา
-					{{ formData.leaveTypeName }}
-				</div>
-			</div>
-			<q-form ref="myform" class="col-12">
-				<q-card bordered>
-					<div class="col-12 row q-col-gutter-md q-pa-md">
-						<div class="col-xs-12 col-sm-12">
-							<div style="display: flex; align-items: center">
-								<q-icon name="mdi-numeric-1-circle" size="20px" color="primary" />
-								<div class="q-pl-sm text-weight-bold text-dark">เลือกประเภทการลา</div>
-							</div>
-							<div class="q-py-sm q-px-lg">
-								<div class="row">
-									<q-select
-										readonly
-										dense
-										class="col-12 col-sm-6 col-md-4"
-										outlined
-										v-model="formData.leaveTypeName"
-										option-value="code"
-										option-label="name"
-										emit-value
-										map-options
-										prefix="ประเภทใบลา :"
-									/>
-								</div>
-								<div class="row q-mt-sm">
-									<div class="col-12 col-sm-6 col-md-3" v-if="model === 'LV-006' || model === 'LV-008'">
-										<q-select
-											readonly
-											dense
-											outlined
-											v-model="modelSpecific"
-											:options="model === 'LV-006' ? dataStore.optionsOrdination : dataStore.optionsSpecific"
-											option-value="code"
-											option-label="name"
-											emit-value
-											map-options
-											prefix="ประเภทการลา :"
-											@update:model-value="dataStore.typeConvert(model, modelSpecific)"
-										/>
-									</div>
-								</div>
-							</div>
+  <div class="col-12 row justify-center">
+    <div class="col-xs-12 col-sm-12 col-md-11">
+      <div class="toptitle text-white col-12 row items-center">
+        <q-btn
+          to="/leave"
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+        />
+        <div>
+          แก้ไขใบลา
+          {{ formData.leaveTypeName }}
+        </div>
+      </div>
+      <q-form ref="myform" class="col-12">
+        <q-card bordered>
+          <div class="col-12 row q-col-gutter-md q-pa-md">
+            <div class="col-xs-12 col-sm-12">
+              <div style="display: flex; align-items: center">
+                <q-icon
+                  name="mdi-numeric-1-circle"
+                  size="20px"
+                  color="primary"
+                />
+                <div class="q-pl-sm text-weight-bold text-dark">
+                  เลือกประเภทการลา
+                </div>
+              </div>
+              <div class="q-py-sm q-px-lg">
+                <div class="row">
+                  <q-select
+                    readonly
+                    dense
+                    class="col-12 col-sm-6 col-md-4"
+                    outlined
+                    v-model="formData.leaveTypeName"
+                    option-value="code"
+                    option-label="name"
+                    emit-value
+                    map-options
+                    prefix="ประเภทใบลา :"
+                  />
+                </div>
+                <div class="row q-mt-sm">
+                  <div
+                    class="col-12 col-sm-6 col-md-3"
+                    v-if="model === 'LV-006' || model === 'LV-008'"
+                  >
+                    <q-select
+                      readonly
+                      dense
+                      outlined
+                      v-model="modelSpecific"
+                      :options="
+                        model === 'LV-006'
+                          ? dataStore.optionsOrdination
+                          : dataStore.optionsSpecific
+                      "
+                      option-value="code"
+                      option-label="name"
+                      emit-value
+                      map-options
+                      prefix="ประเภทการลา :"
+                      @update:model-value="
+                        dataStore.typeConvert(model, modelSpecific)
+                      "
+                    />
+                  </div>
+                </div>
+              </div>
 
-							<div>
-								<div style="display: flex; align-items: center">
-									<q-icon name="mdi-numeric-2-circle" size="20px" color="primary" />
-									<div class="q-pl-sm text-weight-bold text-dark">ข้อมูลการลา</div>
-								</div>
-								<FormPart2 :model="model" :data="formData" :leaveTypeId="formData.leaveTypeId" />
-							</div>
-						</div>
-						<div class="col-12">
-							<SickForm v-if="model === 'LV-001' || model === 'LV-002'" :data="formData" :on-submit="onSubmit" :on-confirm="onConfirm" />
-							<FormBirth v-if="model === 'LV-003'" :data="formData" :on-submit="onSubmit" :on-confirm="onConfirm" />
-							<HelpWifeBirthForm v-if="model === 'LV-004'" :data="formData" :on-submit="onSubmit" :on-confirm="onConfirm" />
-							<VacationForm v-if="model === 'LV-005'" :data="formData" :on-submit="onSubmit" :on-confirm="onConfirm" />
-							<OrdinationForm v-if="model === 'LV-006' && modelSpecific === 'b1'" :data="formData" :on-submit="onSubmit" :on-confirm="onConfirm" />
-							<HajjForm v-if="model === 'LV-006' && modelSpecific === 'b2'" :data="formData" :on-submit="onSubmit" :on-confirm="onConfirm" />
-							<MilitaryForm v-if="model === 'LV-007'" style="width: 100%" :data="formData" :on-submit="onSubmit" :on-confirm="onConfirm" />
-							<StudyForm v-if="model === 'LV-008' && modelSpecific === 's1'" style="width: 100%" :data="formData" :on-submit="onSubmit" :on-confirm="onConfirm" />
-							<TrainForm v-if="model === 'LV-008' && modelSpecific != 's1' && modelSpecific != ''" :data="formData" :on-submit="onSubmit" :on-confirm="onConfirm" />
-							<WorkInternationalForm v-if="model === 'LV-009'" :data="formData" :on-submit="onSubmit" :on-confirm="onConfirm" />
-							<FollowSpouseForm v-if="model === 'LV-010'" :data="formData" :on-submit="onSubmit" :on-confirm="onConfirm" />
-							<RehabilitationForm v-if="model === 'LV-011'" :data="formData" :on-submit="onSubmit" :on-confirm="onConfirm" />
-						</div>
-					</div>
-				</q-card>
-			</q-form>
-		</div>
-	</div>
+              <div>
+                <div style="display: flex; align-items: center">
+                  <q-icon
+                    name="mdi-numeric-2-circle"
+                    size="20px"
+                    color="primary"
+                  />
+                  <div class="q-pl-sm text-weight-bold text-dark">
+                    ข้อมูลการลา
+                  </div>
+                </div>
+                <FormPart2
+                  :model="model"
+                  :data="formData"
+                  :leaveTypeId="formData.leaveTypeId"
+                />
+              </div>
+            </div>
+            <div class="col-12">
+              <SickForm
+                v-if="model === 'LV-001' || model === 'LV-002'"
+                :data="formData"
+                :on-submit="onSubmit"
+                :on-confirm="onConfirm"
+              />
+              <FormBirth
+                v-if="model === 'LV-003'"
+                :data="formData"
+                :on-submit="onSubmit"
+                :on-confirm="onConfirm"
+              />
+              <HelpWifeBirthForm
+                v-if="model === 'LV-004'"
+                :data="formData"
+                :on-submit="onSubmit"
+                :on-confirm="onConfirm"
+              />
+              <VacationForm
+                v-if="model === 'LV-005'"
+                :data="formData"
+                :on-submit="onSubmit"
+                :on-confirm="onConfirm"
+              />
+              <OrdinationForm
+                v-if="model === 'LV-006' && modelSpecific === 'b1'"
+                :data="formData"
+                :on-submit="onSubmit"
+                :on-confirm="onConfirm"
+              />
+              <HajjForm
+                v-if="model === 'LV-006' && modelSpecific === 'b2'"
+                :data="formData"
+                :on-submit="onSubmit"
+                :on-confirm="onConfirm"
+              />
+              <MilitaryForm
+                v-if="model === 'LV-007'"
+                style="width: 100%"
+                :data="formData"
+                :on-submit="onSubmit"
+                :on-confirm="onConfirm"
+              />
+              <StudyForm
+                v-if="model === 'LV-008' && modelSpecific === 's1'"
+                style="width: 100%"
+                :data="formData"
+                :on-submit="onSubmit"
+                :on-confirm="onConfirm"
+              />
+              <TrainForm
+                v-if="
+                  model === 'LV-008' &&
+                  modelSpecific != 's1' &&
+                  modelSpecific != ''
+                "
+                :data="formData"
+                :on-submit="onSubmit"
+                :on-confirm="onConfirm"
+              />
+              <WorkInternationalForm
+                v-if="model === 'LV-009'"
+                :data="formData"
+                :on-submit="onSubmit"
+                :on-confirm="onConfirm"
+              />
+              <FollowSpouseForm
+                v-if="model === 'LV-010'"
+                :data="formData"
+                :on-submit="onSubmit"
+                :on-confirm="onConfirm"
+              />
+              <RehabilitationForm
+                v-if="model === 'LV-011'"
+                :data="formData"
+                :on-submit="onSubmit"
+                :on-confirm="onConfirm"
+              />
+            </div>
+          </div>
+        </q-card>
+      </q-form>
+    </div>
+  </div>
 </template>
diff --git a/src/modules/05_leave/views/Main.vue b/src/modules/05_leave/views/Main.vue
index 53fce09..2a1e2d0 100644
--- a/src/modules/05_leave/views/Main.vue
+++ b/src/modules/05_leave/views/Main.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from "vue";
 import { useQuasar } from "quasar";
-import { useRouter } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import type { LeaveItem } from "@/modules/05_leave/interface/index/main";
@@ -18,6 +18,7 @@ const leaveStore = useLeaveStore();
 const { showLoader, hideLoader, messageError } = mixin;
 
 const router = useRouter();
+const route = useRoute()
 const $q = useQuasar();
 
 const filterLeaveType = ref(["ลาป่วย", "ลากิจส่วนตัว", "ลาพักผ่อน"]);
@@ -199,7 +200,7 @@ onMounted(async () => {
           flat
           color="primary"
           class="q-mr-sm"
-          @click="router.go(-1)"
+          @click="router.push(`/`)"
         />
         <div>รายการลา</div>
       </div>
diff --git a/src/stores/mixin.ts b/src/stores/mixin.ts
index b3e06e2..2cbebb0 100644
--- a/src/stores/mixin.ts
+++ b/src/stores/mixin.ts
@@ -405,70 +405,83 @@ export const useCounterMixin = defineStore("mixin", () => {
     }
   }
 
-  const messageError = (q: any, e: any = "") => {
-    if (e.response !== undefined) {
-      if (e.response.data.status !== undefined) {
-        if (e.response.data.status == 401) {
-          //invalid_token
-          q.dialog({
-            component: CustomComponent,
-            componentProps: {
-              title: `พบข้อผิดพลาด`,
-              message: `ล็อกอินหมดอายุ กรุณาล็อกอินใหม่อีกครั้ง`,
-              icon: "warning",
-              color: "red",
-              onlycancel: true,
-            },
-          });
-        } else {
-          q.dialog({
-            component: CustomComponent,
-            componentProps: {
-              title: `พบข้อผิดพลาด`,
-              message: `${e.response.data.message}`,
-              icon: "warning",
-              color: "red",
-              onlycancel: true,
-            },
-          });
-        }
-      } else {
-        if (e.response.status == 401) {
-          //invalid_token
-          q.dialog({
-            component: CustomComponent,
-            componentProps: {
-              title: `พบข้อผิดพลาด`,
-              message: `ล็อกอินหมดอายุ กรุณาล็อกอินใหม่อีกครั้ง`,
-              icon: "warning",
-              color: "red",
-              onlycancel: true,
-            },
-          });
-        } else {
-          q.dialog({
-            component: CustomComponent,
-            componentProps: {
-              title: `พบข้อผิดพลาด`,
-              message: `ข้อมูลผิดพลาดทำให้เกิดการไม่ตอบสนองต่อการเรียกใช้งานดูเว็บไซต์`,
-              icon: "warning",
-              color: "red",
-              onlycancel: true,
-            },
-          });
-        }
-      }
-    } else {
+  const messageError = (q: any, e: any = "", text: string = "") => {
+    if (e == "" && text != "") {
       q.dialog({
         component: CustomComponent,
         componentProps: {
-          title: `พบข้อผิดพลาด`,
-          message: `ข้อมูลผิดพลาดทำให้เกิดการไม่ตอบสนองต่อการเรียกใช้งานดูเว็บไซต์`,
+          title: `ข้อความแจ้งเตือน`,
+          message: `ขออภัยไม่สามารถลาได้เนื่องจากจำนวนวันลาของคุณเกินสิทธิ์ที่กำหนด`,
           icon: "warning",
           color: "red",
           onlycancel: true,
         },
       });
+    } else {
+      if (e.response !== undefined) {
+        if (e.response.data.status !== undefined) {
+          if (e.response.data.status == 401) {
+            //invalid_token
+            q.dialog({
+              component: CustomComponent,
+              componentProps: {
+                title: `พบข้อผิดพลาด`,
+                message: `ล็อกอินหมดอายุ กรุณาล็อกอินใหม่อีกครั้ง`,
+                icon: "warning",
+                color: "red",
+                onlycancel: true,
+              },
+            });
+          } else {
+            q.dialog({
+              component: CustomComponent,
+              componentProps: {
+                title: `พบข้อผิดพลาด`,
+                message: `${e.response.data.message}`,
+                icon: "warning",
+                color: "red",
+                onlycancel: true,
+              },
+            });
+          }
+        } else {
+          if (e.response.status == 401) {
+            //invalid_token
+            q.dialog({
+              component: CustomComponent,
+              componentProps: {
+                title: `พบข้อผิดพลาด`,
+                message: `ล็อกอินหมดอายุ กรุณาล็อกอินใหม่อีกครั้ง`,
+                icon: "warning",
+                color: "red",
+                onlycancel: true,
+              },
+            });
+          } else {
+            q.dialog({
+              component: CustomComponent,
+              componentProps: {
+                title: `พบข้อผิดพลาด`,
+                message: `ข้อมูลผิดพลาดทำให้เกิดการไม่ตอบสนองต่อการเรียกใช้งานดูเว็บไซต์`,
+                icon: "warning",
+                color: "red",
+                onlycancel: true,
+              },
+            });
+          }
+        }
+      } else {
+        q.dialog({
+          component: CustomComponent,
+          componentProps: {
+            title: `พบข้อผิดพลาด`,
+            message: `ข้อมูลผิดพลาดทำให้เกิดการไม่ตอบสนองต่อการเรียกใช้งานดูเว็บไซต์`,
+            icon: "warning",
+            color: "red",
+            onlycancel: true,
+          },
+        });
+      }
     }
   };
 
diff --git a/src/style/quasar-variables.sass b/src/style/quasar-variables.sass
index 30c9bd9..39fea51 100644
--- a/src/style/quasar-variables.sass
+++ b/src/style/quasar-variables.sass
@@ -69,3 +69,16 @@ div
     -moz-osx-font-smoothing: grayscale
 
 $separator-color: #EDEDED !default
+
+input.input-alert
+    color: red !important
+
+.input-alert .q-field--outlined .q-field__control
+    border: 1px solid red !important
+    background-color: rgb(255, 216, 216)
+
+.input-alert .q-field--outlined input
+    color: #f00 !important
+
+.input-alert i.text-primary
+    color: #f00 !important