From aa76e7d03036ea8d60d3d1837020b83733ad3f63 Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Fri, 12 Jan 2024 17:45:20 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=9B=E0=B8=B8=E0=B9=88=E0=B8=A1=E0=B8=A5=E0=B8=9A/refactor?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/leave/api.leave.ts                    |   17 +-
 src/modules/05_leave/components/Calendar.vue  |  325 ++--
 .../05_leave/components/DialogDetail.vue      |  504 +++---
 .../components/FormLeave/01_SickForm.vue      |  976 ++++++------
 .../components/FormLeave/03_Birth.vue         |  811 +++++-----
 .../FormLeave/04_HelpWifeBirthForm.vue        |  961 +++++------
 .../components/FormLeave/05_VacationForm.vue  |  951 +++++------
 .../FormLeave/06_OrdinationForm.vue           | 1297 +++++++--------
 .../components/FormLeave/07_HajjForm.vue      |  857 +++++-----
 .../components/FormLeave/08_MilitaryForm.vue  |  953 +++++------
 .../components/FormLeave/09_StudyForm.vue     | 1245 ++++++++-------
 .../components/FormLeave/10_TrainForm.vue     | 1213 +++++++-------
 .../FormLeave/11_WorkInternationalForm.vue    |  849 +++++-----
 .../FormLeave/12_FollowSpouseForm.vue         | 1409 +++++++++--------
 .../FormLeave/13_RehabilitationForm.vue       |  809 +++++-----
 .../05_leave/components/FormLeave/Form.vue    |  294 ++--
 src/modules/05_leave/components/ListView.vue  |  434 ++---
 .../components/formDetail/01_SickForm.vue     |  185 ++-
 .../formDetail/04_HelpWifeBirthForm.vue       |  175 +-
 .../components/formDetail/05_VacationForm.vue |  189 +--
 .../formDetail/06_OrdinationForm.vue          |  209 +--
 .../components/formDetail/07_HajjForm.vue     |  159 +-
 .../components/formDetail/08_MilitaryForm.vue |  183 +--
 .../components/formDetail/09_StudyForm.vue    |  227 +--
 .../components/formDetail/10_TrainForm.vue    |  219 +--
 .../formDetail/11_WorkInternationalForm.vue   |  175 +-
 .../formDetail/12_FollowSpouseForm.vue        |  237 +--
 .../formDetail/13_RehabilitationForm.vue      |  163 +-
 .../components/formDetail/formCancel.vue      |   17 +-
 .../components/formDetail/formMain.vue        |   76 +-
 30 files changed, 8420 insertions(+), 7699 deletions(-)

diff --git a/src/api/leave/api.leave.ts b/src/api/leave/api.leave.ts
index 313770b..86b790c 100644
--- a/src/api/leave/api.leave.ts
+++ b/src/api/leave/api.leave.ts
@@ -1,14 +1,15 @@
-import env from "../index"
+import env from "../index";
 
-const retirementResign = `${env.API_URI}/retirement`
-const leave = `${env.API_URI}/leave`
-const holiday = `${env.API_URI}/metadata/holiday/`
+const retirementResign = `${env.API_URI}/retirement`;
+const leave = `${env.API_URI}/leave`;
+const holiday = `${env.API_URI}/metadata/holiday/`;
 
 export default {
 	listUser: () => `${retirementResign}/resign/user`,
 	listResign: () => `${retirementResign}/resign`,
 	resingByid: (id: string) => `${retirementResign}/resign/${id}`,
-	questionnaireByid: (id: string) => `${retirementResign}/resign/questionnaire/${id}`,
+	questionnaireByid: (id: string) =>
+		`${retirementResign}/resign/questionnaire/${id}`,
 	listquestionnaire: () => `${retirementResign}/resign/questionnaire`,
 	// คำถาม
 	questionList: () => `${retirementResign}/resign/questionnaire/question`,
@@ -26,6 +27,8 @@ export default {
 	leaveCheck: () => `${leave}/user/check`,
 	leaveReport: (id: string) => `${leave}/report/${id}`,
 	leaveSendReport: () => `${leave}/report-template/docx`,
+	leaveDocumentId: (id: string) => `${leave}/user/file/document/${id}`,
 
-	listHolidayHistoryYearMonth: (year: number, month: number) => `${holiday}${year}/${month}`,
-}
+	listHolidayHistoryYearMonth: (year: number, month: number) =>
+		`${holiday}${year}/${month}`,
+};
diff --git a/src/modules/05_leave/components/Calendar.vue b/src/modules/05_leave/components/Calendar.vue
index 60d80f5..2972d00 100644
--- a/src/modules/05_leave/components/Calendar.vue
+++ b/src/modules/05_leave/components/Calendar.vue
@@ -1,46 +1,50 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue"
-import { useQuasar } from "quasar"
-import keycloak from "@/plugins/keycloak"
-import http from "@/plugins/http"
-import config from "@/app.config"
+import { ref, onMounted, watch } from "vue";
+import { useQuasar } from "quasar";
+import keycloak from "@/plugins/keycloak";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 /**import calendar*/
-import FullCalendar from "@fullcalendar/vue3"
-import dayGridPlugin from "@fullcalendar/daygrid"
+import FullCalendar from "@fullcalendar/vue3";
+import dayGridPlugin from "@fullcalendar/daygrid";
 // import type { CalendarOptions } from "@fullcalendar/core"
-import timeGridPlugin from "@fullcalendar/timegrid"
-import interactionPlugin from "@fullcalendar/interaction"
-import allLocales from "@fullcalendar/core/locales-all"
-import listPlugin from "@fullcalendar/list"
+import timeGridPlugin from "@fullcalendar/timegrid";
+import interactionPlugin from "@fullcalendar/interaction";
+import allLocales from "@fullcalendar/core/locales-all";
+import listPlugin from "@fullcalendar/list";
 
 /** import type*/
-import type { DataDateMonthObject } from "@/modules/05_leave/interface/request/Calendar.ts"
-import type { DataCalendar, LeaveType } from "@/modules/05_leave/interface/response/leave"
+import type { DataDateMonthObject } from "@/modules/05_leave/interface/request/Calendar.ts";
+import type {
+	DataCalendar,
+	LeaveType,
+} from "@/modules/05_leave/interface/response/leave";
 
 /** import componest*/
-import DialogDetail from "@/modules/05_leave/components/DialogDetail.vue"
+import DialogDetail from "@/modules/05_leave/components/DialogDetail.vue";
 
 /** import stort*/
-import { useCounterMixin } from "@/stores/mixin"
+import { useCounterMixin } from "@/stores/mixin";
+
 // import { aR } from "@fullcalendar/core/internal-common"
-
-const mixin = useCounterMixin()
-const { showLoader, hideLoader, messageError, date2Thai, monthYear2Thai, dateToISO } = mixin
-
-const $q = useQuasar()
-
-const emit = defineEmits(["update:dateYear"])
-
-const fullName = ref<string>("")
-const mainData = ref<DataCalendar[]>([])
-
-const keycloakId = ref<string>(keycloak.tokenParsed ? keycloak.tokenParsed.sub!.toString() : "")
+/**ตัวแปรที่ใช้ */
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, monthYear2Thai } = mixin;
+const $q = useQuasar();
+const emit = defineEmits(["update:dateYear"]);
+const fullName = ref<string>("");
+const mainData = ref<DataCalendar[]>([]);
+const keycloakId = ref<string>(
+	keycloak.tokenParsed ? keycloak.tokenParsed.sub!.toString() : ""
+);
+const modal = ref<boolean>(false);
+const leaveId = ref<string>("");
 
 /**
  * Option ของปฏิทิน
  */
-const fullCalendar = ref<any>() //ref calendar
+const fullCalendar = ref<any>(); //ref calendar
 const calendarOptions = ref<any>({
 	plugins: [
 		dayGridPlugin,
@@ -65,38 +69,43 @@ const calendarOptions = ref<any>({
 	displayEventTime: false,
 	editable: true,
 	events: [],
-})
+});
 
+/**Map ตัวแปร dateMonth */
 const dateMonth = ref<DataDateMonthObject>({
 	month: new Date().getMonth(),
 	year: new Date().getFullYear(),
-})
+});
 
 /** function เรียกข้อมูล calendar*/
 async function fetchDataCalendar() {
-	showLoader()
+	showLoader();
 	await http
 		.post(config.API.leaveCalendar(), {
 			year: dateMonth.value.year,
 		})
-		.then(res => {
-			mainData.value = res.data.result
+		.then((res) => {
+			mainData.value = res.data.result;
 
-			const double_name = [...new Set(mainData.value.map((item: DataCalendar) => item.keycloakId))]
-			filterLists.value = []
+			const double_name = [
+				...new Set(mainData.value.map((item: DataCalendar) => item.keycloakId)),
+			];
+			filterLists.value = [];
 			for (let i = 1; i <= double_name.length; i++) {
-				const name = double_name[i - 1]
+				const name = double_name[i - 1];
 				const filterName = {
 					id: name,
 					name: convertKeycloakId(name),
 					color: name === keycloakId.value ? "green" : "grey",
-				}
-				filterLists.value.push(filterName)
+				};
+				filterLists.value.push(filterName);
 			}
-			console.log(double_name)
+			console.log(double_name);
 
 			if (filterVal.value.length !== 0) {
-				const data = mainData.value.filter((e: any) => e.keycloakId === keycloakId.value)
+				const data = mainData.value.filter(
+					(e: any) => e.keycloakId === keycloakId.value
+				);
 
 				const event = data
 					.filter((x: any) => x.status != "REJECT" && x.status != "DELETE")
@@ -104,45 +113,57 @@ async function fetchDataCalendar() {
 						id: e.id,
 						title: `${e.fullName} (${e.leaveTypeName})`,
 						start: e.leaveStartDate,
-						end: new Date(new Date(e.leaveEndDate).setHours(23, 59, 59)).toISOString(),
+						end: new Date(
+							new Date(e.leaveEndDate).setHours(23, 59, 59)
+						).toISOString(),
 						allDay: e.leaveStartDate === e.leaveEndDate ? true : false,
 						color: e.keycloakId === keycloakId.value ? "#DCEDC8" : "#CFD8DC",
 						textColor: "black",
-					}))
-				calendarOptions.value.events = event
-				console.log(calendarOptions.value.events)
+					}));
+				calendarOptions.value.events = event;
+				console.log(calendarOptions.value.events);
 			}
 		})
-		.catch(err => {
-			messageError($q, err)
+		.catch((err) => {
+			messageError($q, err);
 		})
 		.finally(() => {
-			hideLoader()
-		})
-	await fetchData()
+			hideLoader();
+		});
+	await fetchData();
 }
 
 /**
  * fetch วันหยุดในปฏิทิน
  */
 const fetchData = async () => {
-	showLoader()
+	showLoader();
 	await http
-		.get(config.API.listHolidayHistoryYearMonth(dateMonth.value.year, dateMonth.value.month + 1))
-		.then(res => {
-			const dataNormal = res.data.result.normal
-			const dataSixDays = res.data.result.sixDays
-			const data = dataNormal
+		.get(
+			config.API.listHolidayHistoryYearMonth(
+				dateMonth.value.year,
+				dateMonth.value.month + 1
+			)
+		)
+		.then((res) => {
+			const dataNormal = res.data.result.normal;
+			const dataSixDays = res.data.result.sixDays;
+			const data = dataNormal;
 			const event = data.map((e: any) => ({
 				id: e.id,
 				title: `${e.name} `,
 				start: e.holidayDate,
-				end: new Date(new Date(e.holidayDate).setHours(23, 59, 59)).toISOString(),
+				end: new Date(
+					new Date(e.holidayDate).setHours(23, 59, 59)
+				).toISOString(),
 				allDay: e.holidayDate === e.holidayDate ? true : false,
 				color: " #CCE5FF",
 				textColor: "#0080FF",
-			}))
-			calendarOptions.value.events = [...calendarOptions.value.events, ...event]
+			}));
+			calendarOptions.value.events = [
+				...calendarOptions.value.events,
+				...event,
+			];
 			// const dataSix = dataSixDays
 			// const eventSix = dataSix.map((e: any) => ({
 			// 	id: e.id,
@@ -154,32 +175,33 @@ const fetchData = async () => {
 			// 	textColor: "#FF8000",
 			// }))
 			// calendarOptions.value.events = [...calendarOptions.value.events, ...eventSix]
-			console.log(calendarOptions.value.events)
+			console.log(calendarOptions.value.events);
 		})
-		.catch(e => {
-			messageError($q, e)
+		.catch((e) => {
+			messageError($q, e);
 		})
 		.finally(async () => {
-			hideLoader()
-		})
-}
+			hideLoader();
+		});
+};
 
+/**function แปลงkeycloakId */
 function convertKeycloakId(id: any) {
-	const filterName = mainData.value.find((e: any) => e.keycloakId === id)
-	return filterName?.fullName
+	const filterName = mainData.value.find((e: any) => e.keycloakId === id);
+	return filterName?.fullName;
 }
 
-const leaveType = ref<LeaveType[]>([])
 /** function เรียกประเภทการลา */
+const leaveType = ref<LeaveType[]>([]);
 async function fectOptionType() {
 	await http
 		.get(config.API.leaveType())
-		.then(async res => {
-			leaveType.value = res.data.result
-		})
-		.catch(err => {
-			messageError($q, err)
+		.then(async (res) => {
+			leaveType.value = res.data.result;
 		})
+		.catch((err) => {
+			messageError($q, err);
+		});
 }
 
 /**
@@ -187,66 +209,72 @@ async function fectOptionType() {
  * @param val datepicker แบบเลือกปีและเดือน
  */
 function monthYearThai(val: DataDateMonthObject) {
-	if (val == null) return ""
-	else return monthYear2Thai(val.month, val.year)
+	if (val == null) return "";
+	else return monthYear2Thai(val.month, val.year);
 }
 
 /** function อัปเดท Calendar */
 async function updateMonth() {
-	await fetchDataCalendar()
-	await fetchData()
-	const calen = fullCalendar.value.getApi()
-	const date = new Date(dateMonth.value.year, dateMonth.value.month)
-	calen.gotoDate(date)
+	await fetchDataCalendar();
+	await fetchData();
+	const calen = fullCalendar.value.getApi();
+	const date = new Date(dateMonth.value.year, dateMonth.value.month);
+	calen.gotoDate(date);
 }
 
-const modal = ref<boolean>(false)
-const leaveId = ref<string>("")
-
 /**
  * function openPopupDateail
  * @param id การลา
  */
 async function onCilckview(id: string) {
-	modal.value = true
-	leaveId.value = id
+	modal.value = true;
+	leaveId.value = id;
 }
 
 /** function closePopup*/
 async function onClickClose() {
-	modal.value = false
+	modal.value = false;
 }
 
 /** filter calendar left */
-const filterLists = ref<any>([])
-const filterVal = ref<any>([])
+const filterLists = ref<any>([]);
+const filterVal = ref<any>([]);
 
+/**** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่Calendar */
 watch(
 	() => filterVal.value,
 	() => {
 		const eventData = filterVal.value.map((item: any) => {
 			return mainData.value
-				.filter((e: DataCalendar) => e.keycloakId === item && e.status != "REJECT" && e.status != "DELETE")
-				.map(e => ({
+				.filter(
+					(e: DataCalendar) =>
+						e.keycloakId === item &&
+						e.status != "REJECT" &&
+						e.status != "DELETE"
+				)
+				.map((e) => ({
 					id: e.id,
 					title: `${e.fullName} (${e.leaveTypeName})`,
 					start: e.leaveStartDate,
-					end: new Date(new Date(e.leaveEndDate).setHours(23, 59, 59)).toISOString(),
+					end: new Date(
+						new Date(e.leaveEndDate).setHours(23, 59, 59)
+					).toISOString(),
 					allDay: e.leaveStartDate === e.leaveEndDate ? true : false,
 					color: e.keycloakId === keycloakId.value ? "#DCEDC8" : "#CFD8DC",
 					textColor: "black",
-				}))
-		})
-		const allEventData = [].concat(...eventData)
-		calendarOptions.value.events = allEventData
+				}));
+		});
+		const allEventData = [].concat(...eventData);
+		calendarOptions.value.events = allEventData;
 	}
-)
+);
 
+/**Hook */
 onMounted(async () => {
-	filterVal.value.push(keycloakId.value)
-	await fetchDataCalendar()
-	await fectOptionType()
-})
+	filterVal.value.push(keycloakId.value);
+	await fetchDataCalendar();
+	await fectOptionType();
+});
 </script>
 
 <template>
@@ -255,8 +283,18 @@ onMounted(async () => {
 			<q-card class="col-12" flat bordered>
 				<div class="q-gutter-sm col-12">
 					<q-list class="rounded-borders q-pt-sm" dense>
-						<q-item v-for="(item, i) in filterLists" :key="i" tag="label" v-ripple>
-							<q-checkbox size="sm" v-model="filterVal" :val="item.id" :color="item.color" />
+						<q-item
+							v-for="(item, i) in filterLists"
+							:key="i"
+							tag="label"
+							v-ripple
+						>
+							<q-checkbox
+								size="sm"
+								v-model="filterVal"
+								:val="item.id"
+								:color="item.color"
+							/>
 							<q-item-section>
 								<q-item-label>{{ item.name }}</q-item-label>
 							</q-item-section>
@@ -270,16 +308,40 @@ onMounted(async () => {
 			<div class="q-mt-sm col-12">
 				<div class="row col-12 q-gutter-sm">
 					<div class="demo-app-main">
-						<q-card bordered flat class="q-pa-sm q-mb-sm col-12 row bg-grey-1 shadow-0">
+						<q-card
+							bordered
+							flat
+							class="q-pa-sm q-mb-sm col-12 row bg-grey-1 shadow-0"
+						>
 							<div class="items-center col-12 row q-col-gutter-sm">
 								<!-- filter เลือกเดือนปี -->
-								<datepicker v-model="dateMonth" :locale="'th'" autoApply month-picker :enableTimePicker="false" @update:modelValue="updateMonth">
+								<datepicker
+									v-model="dateMonth"
+									:locale="'th'"
+									autoApply
+									month-picker
+									:enableTimePicker="false"
+									@update:modelValue="updateMonth"
+								>
 									<template #year="{ year }">{{ year + 543 }}</template>
-									<template #year-overlay-value="{ value }">{{ parseInt(value + 543) }}</template>
+									<template #year-overlay-value="{ value }">{{
+										parseInt(value + 543)
+									}}</template>
 									<template #trigger>
-										<q-input :model-value="monthYearThai(dateMonth)" dense outlined bg-color="white" style="width: 130px">
+										<q-input
+											:model-value="monthYearThai(dateMonth)"
+											dense
+											outlined
+											bg-color="white"
+											style="width: 130px"
+										>
 											<template v-slot:prepend>
-												<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
+												<q-icon
+													name="event"
+													class="cursor-pointer"
+													style="color: var(--q-primary)"
+												>
+												</q-icon>
 											</template>
 										</q-input>
 									</template>
@@ -288,14 +350,29 @@ onMounted(async () => {
 						</q-card>
 
 						<div class="main-content">
-							<FullCalendar ref="fullCalendar" class="demo-app-calendar" :options="calendarOptions">
+							<FullCalendar
+								ref="fullCalendar"
+								class="demo-app-calendar"
+								:options="calendarOptions"
+							>
 								<template v-slot:eventContent="arg">
-									<div v-if="arg.event.textColor == 'black'" class="row col-12 items-center no-wrap" :style="`background: + ${arg.event.color}`">
-										<div class="textHover col-10" @click="onCilckview(arg.event.id)">
+									<div
+										v-if="arg.event.textColor == 'black'"
+										class="row col-12 items-center no-wrap"
+										:style="`background: + ${arg.event.color}`"
+									>
+										<div
+											class="textHover col-10"
+											@click="onCilckview(arg.event.id)"
+										>
 											{{ arg.event.title }}
 										</div>
 									</div>
-									<div v-else class="row col-12 items-center no-wrap" :style="`background: + ${arg.event.color}`">
+									<div
+										v-else
+										class="row col-12 items-center no-wrap"
+										:style="`background: + ${arg.event.color}`"
+									>
 										<div class="textHover col-10">
 											{{ arg.event.title }}
 										</div>
@@ -307,15 +384,30 @@ onMounted(async () => {
 				</div>
 				<div class="row q-col-gutter-lg justify-end">
 					<div class="items-center row">
-						<q-icon size="10px" color="blue" name="mdi-circle" class="q-mr-sm" />
+						<q-icon
+							size="10px"
+							color="blue"
+							name="mdi-circle"
+							class="q-mr-sm"
+						/>
 						<span class="text-caption text-grey-8">วันหยุด</span>
 					</div>
 					<div class="items-center row">
-						<q-icon size="10px" color="green-7" name="mdi-circle" class="q-mr-sm" />
+						<q-icon
+							size="10px"
+							color="green-7"
+							name="mdi-circle"
+							class="q-mr-sm"
+						/>
 						<span class="text-caption text-grey-8">การลาของฉัน</span>
 					</div>
 					<div class="items-center row">
-						<q-icon size="10px" color="grey-6" name="mdi-circle" class="q-mr-sm" />
+						<q-icon
+							size="10px"
+							color="grey-6"
+							name="mdi-circle"
+							class="q-mr-sm"
+						/>
 						<span class="text-caption text-grey-8">การลาของบุคคลอื่น</span>
 					</div>
 				</div>
@@ -323,7 +415,12 @@ onMounted(async () => {
 		</div>
 	</div>
 
-	<DialogDetail :modal="modal" :leaveId="leaveId" :onClickClose="onClickClose" :leaveType="leaveType" />
+	<DialogDetail
+		:modal="modal"
+		:leaveId="leaveId"
+		:onClickClose="onClickClose"
+		:leaveType="leaveType"
+	/>
 </template>
 
 <style scope lang="scss">
diff --git a/src/modules/05_leave/components/DialogDetail.vue b/src/modules/05_leave/components/DialogDetail.vue
index 7a6d122..7af57cd 100644
--- a/src/modules/05_leave/components/DialogDetail.vue
+++ b/src/modules/05_leave/components/DialogDetail.vue
@@ -1,37 +1,54 @@
 <script setup lang="ts">
-import { ref, reactive, watch } from "vue"
-import { useQuasar } from "quasar"
-import http from "@/plugins/http"
-import config from "@/app.config"
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 /** import type*/
-import type { FremDetail, FormDelete, FormDeleteRef, FromCancelDetail } from "@/modules/05_leave/interface/response/leave"
+import type {
+	FremDetail,
+	FormDelete,
+	FormDeleteRef,
+	FromCancelDetail,
+} from "@/modules/05_leave/interface/response/leave";
 
 /** import componest*/
-import FormLeave from "@/modules/05_leave/components/formDetail/01_SickForm.vue"
-import FormChildbirth from "@/modules/05_leave/components/formDetail/04_HelpWifeBirthForm.vue"
-import FormHoliday from "@/modules/05_leave/components/formDetail/05_VacationForm.vue"
-import FormUpasom from "@/modules/05_leave/components/formDetail/06_OrdinationForm.vue"
-import FormHajj from "@/modules/05_leave/components/formDetail/07_HajjForm.vue"
-import FormCheckSelect from "@/modules/05_leave/components/formDetail/08_MilitaryForm.vue"
-import FormStudy from "@/modules/05_leave/components/formDetail/09_StudyForm.vue"
-import FormLeaveToTraining from "@/modules/05_leave/components/formDetail/10_TrainForm.vue"
-import FormLeaveToWorkInternational from "@/modules/05_leave/components/formDetail/11_WorkInternationalForm.vue"
-import FormSpouse from "@/modules/05_leave/components/formDetail/12_FollowSpouseForm.vue"
-import FormVocationalRehabilitation from "@/modules/05_leave/components/formDetail/13_RehabilitationForm.vue"
-import FormCancel from "@/modules/05_leave/components/formDetail/formCancel.vue"
+import FormLeave from "@/modules/05_leave/components/formDetail/01_SickForm.vue";
+import FormChildbirth from "@/modules/05_leave/components/formDetail/04_HelpWifeBirthForm.vue";
+import FormHoliday from "@/modules/05_leave/components/formDetail/05_VacationForm.vue";
+import FormUpasom from "@/modules/05_leave/components/formDetail/06_OrdinationForm.vue";
+import FormHajj from "@/modules/05_leave/components/formDetail/07_HajjForm.vue";
+import FormCheckSelect from "@/modules/05_leave/components/formDetail/08_MilitaryForm.vue";
+import FormStudy from "@/modules/05_leave/components/formDetail/09_StudyForm.vue";
+import FormLeaveToTraining from "@/modules/05_leave/components/formDetail/10_TrainForm.vue";
+import FormLeaveToWorkInternational from "@/modules/05_leave/components/formDetail/11_WorkInternationalForm.vue";
+import FormSpouse from "@/modules/05_leave/components/formDetail/12_FollowSpouseForm.vue";
+import FormVocationalRehabilitation from "@/modules/05_leave/components/formDetail/13_RehabilitationForm.vue";
+import FormCancel from "@/modules/05_leave/components/formDetail/formCancel.vue";
 
 /** import stort*/
-import { useCounterMixin } from "@/stores/mixin"
-import { useLeaveStore } from "@/modules/05_leave/store"
+import { useCounterMixin } from "@/stores/mixin";
+import { useLeaveStore } from "@/modules/05_leave/store";
 
-const dataStore = useLeaveStore()
-const { convertStatud } = dataStore
-const mixin = useCounterMixin()
-const { showLoader, hideLoader, messageError, date2Thai, success, dialogConfirm, calculateDurationYmd } = mixin
-
-const $q = useQuasar()
+/**ตัวแปร */
+const dataStore = useLeaveStore();
+const { convertStatud } = dataStore;
+const titleMain = ref<string>("รายละเอียดการลาของ");
+const titleMainCancle = ref<string>("รายละเอียดการยกเลิกการลาของ");
+const titleName = ref<string>("");
+const mixin = useCounterMixin();
+const {
+	showLoader,
+	hideLoader,
+	messageError,
+	date2Thai,
+	success,
+	dialogConfirm,
+	calculateDurationYmd,
+} = mixin;
+const $q = useQuasar();
 
+/**Prop */
 const props = defineProps({
 	modal: {
 		type: Boolean,
@@ -57,13 +74,10 @@ const props = defineProps({
 		type: Function,
 		require: true,
 	},
-})
+});
 
-const titleMain = ref<string>("รายละเอียดการลาของ")
-const titleMainCancle = ref<string>("รายละเอียดการยกเลิกการลาของ")
-const titleName = ref<string>("")
 /**checkForm Form การลา*/
-const checkForm = ref<string>("")
+const checkForm = ref<string>("");
 
 /** Form รายละเอียดข้อมูล*/
 const formData = reactive<FremDetail>({
@@ -125,8 +139,9 @@ const formData = reactive<FremDetail>({
 	coupleDaySumTotalHistory: "", //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
 	approveStep: "",
 	dear: "",
-	leaveRange: ""
-})
+	leaveRange: "",
+});
+
 /** Form รายละเอียดข้อมูล*/
 const formDataCancle = reactive<FromCancelDetail>({
 	id: "",
@@ -142,103 +157,131 @@ const formDataCancle = reactive<FromCancelDetail>({
 	leaveTotal: 0,
 	leaveStartDate: new Date(),
 	leaveEndDate: new Date(),
-})
+});
 
 /** form ขอยกเลิก*/
 const formDelete = reactive<FormDelete>({
 	writeAt: "",
 	reason: "",
 	doc: null,
-})
+});
+
 /**Validate ข้อมูล */
-const writeAtRef = ref<Object | null>(null)
-const reasonRef = ref<Object | null>(null)
-const docRef = ref<Object | null>(null)
+const writeAtRef = ref<Object | null>(null);
+const reasonRef = ref<Object | null>(null);
+const docRef = ref<Object | null>(null);
 const formDeleteRef: FormDeleteRef = {
 	writeAt: writeAtRef,
 	reason: reasonRef,
 	doc: docRef,
-}
+};
 
 /**
  * function เรียกข้อมูลการลา
  * @param id การลา
  */
 async function fetchDataDetail(id: string) {
-	showLoader()
+	showLoader();
 	await http
 		.get(config.API.leaveUserId(id), {})
-		.then(res => {
-			const data = res.data.result
-			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.leaveDateStart = data.leaveStartDate && date2Thai(data.leaveStartDate)
-			formData.leaveDateEnd = data.leaveEndDate && date2Thai(data.leaveEndDate)
-			formData.leaveCount = calculateDurationYmd(data.leaveStartDate, data.leaveEndDate)
-			formData.leaveWrote = data.leaveWrote ?? "-"
-			formData.leaveAddress = data.leaveAddress ?? "-"
-			formData.leaveNumber = data.leaveNumber ?? "-"
-			formData.leaveDetail = data.leaveDetail ?? "-"
-			formData.leaveDocument = data.leaveDocument
-			formData.leaveDocument = data.leaveDocument
-			formData.leaveRange = data.leaveRange
-			formData.leaveLastStart = data.leaveLastStart && date2Thai(data.leaveLastStart)
-			formData.leaveLastEnd = data.leaveLastStart && date2Thai(data.leaveLastEnd)
+		.then((res) => {
+			const data = res.data.result;
+			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.leaveDateStart =
+				data.leaveStartDate && date2Thai(data.leaveStartDate);
+			formData.leaveDateEnd = data.leaveEndDate && date2Thai(data.leaveEndDate);
+			formData.leaveCount = calculateDurationYmd(
+				data.leaveStartDate,
+				data.leaveEndDate
+			);
+			formData.leaveWrote = data.leaveWrote ?? "-";
+			formData.leaveAddress = data.leaveAddress ?? "-";
+			formData.leaveNumber = data.leaveNumber ?? "-";
+			formData.leaveDetail = data.leaveDetail ?? "-";
+			formData.leaveDocument = data.leaveDocument;
+			formData.leaveDocument = data.leaveDocument;
+			formData.leaveRange = data.leaveRange;
+			formData.leaveLastStart =
+				data.leaveLastStart && date2Thai(data.leaveLastStart);
+			formData.leaveLastEnd =
+				data.leaveLastStart && date2Thai(data.leaveLastEnd);
 			// formData.leaveTotal = calculateDurationYmd(data.leaveStartDate, data.leaveEndDate)
-			formData.leaveTotal = data.leaveTotal
-			formData.leavebirthDate = data.leaveBirthDate && date2Thai(data.leaveBirthDate)
-			formData.leavegovernmentDate = data.leaveGovernmentDate && date2Thai(data.leaveGovernmentDate)
-			formData.leaveSalary = data.leaveSalary ? data.leaveSalary.toLocaleString("th-TH") : "-"
-			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 && date2Thai(data.coupleDayStartDateHistory)
-			formData.coupleDayEndDateHistory = data.coupleDayEndDateHistory && date2Thai(data.coupleDayEndDateHistory)
-			formData.coupleDaySumTotalHistory = data.coupleDaySumTotalHistory ?? "-"
-			formData.approveStep = data.approveStep ?? "-"
-			formData.dear = data.dear ?? "-"
-			checkLeaveType(formData.leaveTypeId, formData.leaveTypeName, formData.ordainDayLocationName, formData.studyDayTrainingSubject)
+			formData.leaveTotal = data.leaveTotal;
+			formData.leavebirthDate =
+				data.leaveBirthDate && date2Thai(data.leaveBirthDate);
+			formData.leavegovernmentDate =
+				data.leaveGovernmentDate && date2Thai(data.leaveGovernmentDate);
+			formData.leaveSalary = data.leaveSalary
+				? data.leaveSalary.toLocaleString("th-TH")
+				: "-";
+			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 &&
+				date2Thai(data.coupleDayStartDateHistory);
+			formData.coupleDayEndDateHistory =
+				data.coupleDayEndDateHistory && date2Thai(data.coupleDayEndDateHistory);
+			formData.coupleDaySumTotalHistory = data.coupleDaySumTotalHistory ?? "-";
+			formData.approveStep = data.approveStep ?? "-";
+			formData.dear = data.dear ?? "-";
+			checkLeaveType(
+				formData.leaveTypeId,
+				formData.leaveTypeName,
+				formData.ordainDayLocationName,
+				formData.studyDayTrainingSubject
+			);
 		})
-		.catch(err => {
-			props.onClickClose?.()
-			messageError($q, err)
+		.catch((err) => {
+			props.onClickClose?.();
+			messageError($q, err);
 		})
 		.finally(() => {
-			hideLoader()
-		})
+			hideLoader();
+		});
 }
 
 /**
@@ -246,38 +289,43 @@ async function fetchDataDetail(id: string) {
  * @param leaveTypeId  ประเภทการลา
  * @param leaveTypeName  ประเภทการลา
  */
-function checkLeaveType(leaveTypeId: string, leaveTypeName: string, ordainDayLocationName: string, studyDayTrainingSubject: string) {
-	console.log(leaveTypeName)
-	console.log(leaveTypeId)
-	console.log(ordainDayLocationName)
+function checkLeaveType(
+	leaveTypeId: string,
+	leaveTypeName: string,
+	ordainDayLocationName: string,
+	studyDayTrainingSubject: string
+) {
+	console.log(leaveTypeName);
+	console.log(leaveTypeId);
+	console.log(ordainDayLocationName);
 
 	if (props.leaveType) {
-		const filtertype = props.leaveType.find((e: any) => e.id === leaveTypeId)
-		const type = filtertype.code
-		console.log(type)
+		const filtertype = props.leaveType.find((e: any) => e.id === leaveTypeId);
+		const type = filtertype.code;
+		console.log(type);
 
 		if (type === "LV-001" || type === "LV-002" || type === "LV-003") {
-			checkForm.value = "FormLeave"
+			checkForm.value = "FormLeave";
 		} else if (type === "LV-004") {
-			checkForm.value = "FormChildbirth"
+			checkForm.value = "FormChildbirth";
 		} else if (type === "LV-005") {
-			checkForm.value = "FormHoliday"
+			checkForm.value = "FormHoliday";
 		} else if (type === "LV-006" && ordainDayLocationName === "") {
-			checkForm.value = "FormHajj"
+			checkForm.value = "FormHajj";
 		} else if (type === "LV-006") {
-			checkForm.value = "FormUpasom"
+			checkForm.value = "FormUpasom";
 		} else if (type === "LV-007") {
-			checkForm.value = "FormCheckSelect"
+			checkForm.value = "FormCheckSelect";
 		} else if (type === "LV-008" && studyDayTrainingSubject === "") {
-			checkForm.value = "FormStudy"
+			checkForm.value = "FormStudy";
 		} else if (type === "LV-008") {
-			checkForm.value = "FormLeaveToTraining"
+			checkForm.value = "FormLeaveToTraining";
 		} else if (type === "LV-009") {
-			checkForm.value = "FormLeaveToWorkInternational"
+			checkForm.value = "FormLeaveToWorkInternational";
 		} else if (type === "LV-010") {
-			checkForm.value = "FormSpouse"
+			checkForm.value = "FormSpouse";
 		} else if (type === "LV-011") {
-			checkForm.value = "FormVocationalRehabilitation"
+			checkForm.value = "FormVocationalRehabilitation";
 		}
 	}
 }
@@ -287,95 +335,100 @@ function checkLeaveType(leaveTypeId: string, leaveTypeName: string, ordainDayLoc
  * @param id ยกเลิกการลา
  */
 async function fetchDataCancelDetail(id: string) {
-	showLoader()
+	showLoader();
 	await http
 		.get(config.API.leaveCancelById(id))
-		.then(res => {
-			const data = res.data.result
-			formDataCancle.leaveTypeName = data.leaveTypeName ?? "-"
-			formDataCancle.leaveWrote = data.leaveWrote ?? "-"
-			formDataCancle.fullname = data.fullName ?? "-"
-			formDataCancle.status = convertStatud(data.status) ?? "-"
-			formDataCancle.leaveStartDate = data.leaveStartDate && date2Thai(data.leaveStartDate)
-			formDataCancle.leaveEndDate = data.leaveEndDate && date2Thai(data.leaveEndDate)
-			formDataCancle.leaveTotal = data.leaveTotal ?? "-"
-			formDataCancle.leaveAddress = data.leaveAddress ?? "-"
-			formDataCancle.leaveNumber = data.leaveNumber ?? "-"
-			formDataCancle.leaveResonDelete = data.leaveReasonDelete ?? "-"
-			formDataCancle.leaveDetail = data.leaveDetail ?? "-"
-			formDataCancle.leaveDocDelete = data.leaveDocDelete ?? null
+		.then((res) => {
+			const data = res.data.result;
+			formDataCancle.leaveTypeName = data.leaveTypeName ?? "-";
+			formDataCancle.leaveWrote = data.leaveWrote ?? "-";
+			formDataCancle.fullname = data.fullName ?? "-";
+			formDataCancle.status = convertStatud(data.status) ?? "-";
+			formDataCancle.leaveStartDate =
+				data.leaveStartDate && date2Thai(data.leaveStartDate);
+			formDataCancle.leaveEndDate =
+				data.leaveEndDate && date2Thai(data.leaveEndDate);
+			formDataCancle.leaveTotal = data.leaveTotal ?? "-";
+			formDataCancle.leaveAddress = data.leaveAddress ?? "-";
+			formDataCancle.leaveNumber = data.leaveNumber ?? "-";
+			formDataCancle.leaveResonDelete = data.leaveReasonDelete ?? "-";
+			formDataCancle.leaveDetail = data.leaveDetail ?? "-";
+			formDataCancle.leaveDocDelete = data.leaveDocDelete ?? null;
 
-			console.log(res)
+			console.log(res);
 		})
-		.catch(err => {
-			messageError($q, err)
+		.catch((err) => {
+			messageError($q, err);
 		})
 		.finally(() => {
-			hideLoader()
-		})
+			hideLoader();
+		});
 }
 
 /** function ยินยันการบันทึกข้อมูล*/
 async function onClickSave() {
-	const hasError = []
+	const hasError = [];
 	for (const key in formDeleteRef) {
 		if (Object.prototype.hasOwnProperty.call(formDeleteRef, key)) {
-			const property = formDeleteRef[key]
+			const property = formDeleteRef[key];
 			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
+				const isValid = property.value.validate();
+				hasError.push(isValid);
 			}
 		}
 	}
-	if (hasError.every(result => result === true)) {
+	if (hasError.every((result) => result === true)) {
 		dialogConfirm(
 			$q,
 			() => {
-				onSubmit()
+				onSubmit();
 			},
 			"ยืนยันการบันทึกข้อมูล",
 			"ต้องการยินยันการบันทึกข้อมูลนี้หรือไม่ ?"
-		)
+		);
 	} else {
-		console.log(hasError)
+		console.log(hasError);
 	}
 }
 
 /** function บันทึกข้อมูล*/
 async function onSubmit() {
-	showLoader()
-	const id = props.leaveId ? props.leaveId : ""
-	const formData = new FormData()
-	formData.append("leaveWrote", formDelete.writeAt)
-	formData.append("reason", formDelete.reason)
-	formData.append("doc", formDelete.doc)
+	showLoader();
+	const id = props.leaveId ? props.leaveId : "";
+	const formData = new FormData();
+	formData.append("leaveWrote", formDelete.writeAt);
+	formData.append("reason", formDelete.reason);
+	formData.append("doc", formDelete.doc);
 	await http
 		.post(config.API.leaveCancelById(id), formData)
 		.then(() => {
-			success($q, "บันทึกข้อมูลสำเร็จ")
-			props.onClickClose?.()
+			success($q, "บันทึกข้อมูลสำเร็จ");
+			props.onClickClose?.();
 		})
-		.catch(err => {
-			messageError($q, err)
+		.catch((err) => {
+			messageError($q, err);
 		})
 		.finally(() => {
-			props.fetchDataTable?.()
-			hideLoader()
-		})
+			props.fetchDataTable?.();
+			hideLoader();
+		});
 }
 
+/**** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาแล้วเปิด modal */
 watch(
 	() => props.modal,
 	() => {
 		if (props.modal === true) {
-			formDelete.writeAt = ""
-			formDelete.reason = ""
-			formDelete.doc = null
+			formDelete.writeAt = "";
+			formDelete.reason = "";
+			formDelete.doc = null;
 
-			props.leaveStatus === "DELETE" ? props.leaveId && fetchDataCancelDetail(props.leaveId) : props.leaveId && fetchDataDetail(props.leaveId)
+			props.leaveStatus === "DELETE"
+				? props.leaveId && fetchDataCancelDetail(props.leaveId)
+				: props.leaveId && fetchDataDetail(props.leaveId);
 		}
 	}
-)
+);
 </script>
 
 <template>
@@ -384,20 +437,38 @@ watch(
 			<q-card-section class="row items-center q-pa-sm">
 				<div class="text-bold q-pl-sm">{{ titleMain }}{{ titleName }}</div>
 				<q-space />
-				<q-btn icon="close" unelevated round dense @click="props.onClickClose" style="color: #ff8080; background-color: #ffdede" />
+				<q-btn
+					icon="close"
+					unelevated
+					round
+					dense
+					@click="props.onClickClose"
+					style="color: #ff8080; background-color: #ffdede"
+				/>
 			</q-card-section>
 			<q-separator />
 			<q-card-section class="q-p-md row q-gutter-y-md">
-				<div flat :class="props.leaveStatus === 'CANCEL' ? 'col-xs-6 col-sm-6' : 'col-12'">
+				<div
+					flat
+					:class="
+						props.leaveStatus === 'CANCEL' ? 'col-xs-6 col-sm-6' : 'col-12'
+					"
+				>
 					<div class="col-12 q-col-gutter-sm row items-center"></div>
 					<!-- ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว -->
 					<FormLeave v-if="checkForm === 'FormLeave'" :data="formData" />
 
 					<!-- ลาไปช่วยเหลือภริยาที่คลอดบุตร -->
-					<FormChildbirth v-else-if="checkForm === 'FormChildbirth'" :data="formData" />
+					<FormChildbirth
+						v-else-if="checkForm === 'FormChildbirth'"
+						:data="formData"
+					/>
 
 					<!-- ลาพักผ่อน -->
-					<FormHoliday v-else-if="checkForm === 'FormHoliday'" :data="formData" />
+					<FormHoliday
+						v-else-if="checkForm === 'FormHoliday'"
+						:data="formData"
+					/>
 
 					<!-- ลาอุปสมบท -->
 					<FormUpasom v-else-if="checkForm === 'FormUpasom'" :data="formData" />
@@ -406,28 +477,70 @@ watch(
 					<FormHajj v-else-if="checkForm === 'FormHajj'" :data="formData" />
 
 					<!-- ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล -->
-					<FormCheckSelect v-else-if="checkForm === 'FormCheckSelect'" :data="formData" />
+					<FormCheckSelect
+						v-else-if="checkForm === 'FormCheckSelect'"
+						:data="formData"
+					/>
 
 					<!-- ลาไปศึกษา -->
 					<FormStudy v-else-if="checkForm === 'FormStudy'" :data="formData" />
 
 					<!-- ลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน -->
-					<FormLeaveToTraining v-else-if="checkForm === 'FormLeaveToTraining'" :data="formData" />
+					<FormLeaveToTraining
+						v-else-if="checkForm === 'FormLeaveToTraining'"
+						:data="formData"
+					/>
 
 					<!-- ลาไปปฏิบัติงานในองค์การระหว่างประเทศ -->
-					<FormLeaveToWorkInternational v-else-if="checkForm === 'FormLeaveToWorkInternational'" :data="formData" />
+					<FormLeaveToWorkInternational
+						v-else-if="checkForm === 'FormLeaveToWorkInternational'"
+						:data="formData"
+					/>
 
 					<!-- ลาติดตามคู่สมรส -->
 					<FormSpouse v-else-if="checkForm === 'FormSpouse'" :data="formData" />
 
 					<!-- ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ -->
-					<FormVocationalRehabilitation v-else-if="checkForm === 'FormVocationalRehabilitation'" :data="formData" />
+					<FormVocationalRehabilitation
+						v-else-if="checkForm === 'FormVocationalRehabilitation'"
+						:data="formData"
+					/>
 				</div>
 
-				<div flat class="col-xs-6 col-sm-6" v-if="props.leaveStatus === 'CANCEL'">
-					<q-input ref="writeAtRef" v-model="formDelete.writeAt" label="เขียนที่" :rules="[val => !!val || 'กรุณากรอกเขียนที่']" lazy-rules outlined dense />
-					<q-input ref="reasonRef" v-model="formDelete.reason" type="textarea" label="กรอกเหตุผล" :rules="[val => !!val || 'กรูณากรอกเหตุผล']" lazy-rules outlined dense />
-					<q-file ref="docRef" outlined v-model="formDelete.doc" label="เลือกไฟล์เอกสารหลักฐาน" :rules="[val => !!val || 'กรูณา เลือกไฟล์เอกสารหลักฐาน']" lazy-rules use-chips dense>
+				<div
+					flat
+					class="col-xs-6 col-sm-6"
+					v-if="props.leaveStatus === 'CANCEL'"
+				>
+					<q-input
+						ref="writeAtRef"
+						v-model="formDelete.writeAt"
+						label="เขียนที่"
+						:rules="[(val) => !!val || 'กรุณากรอกเขียนที่']"
+						lazy-rules
+						outlined
+						dense
+					/>
+					<q-input
+						ref="reasonRef"
+						v-model="formDelete.reason"
+						type="textarea"
+						label="กรอกเหตุผล"
+						:rules="[(val) => !!val || 'กรูณากรอกเหตุผล']"
+						lazy-rules
+						outlined
+						dense
+					/>
+					<q-file
+						ref="docRef"
+						outlined
+						v-model="formDelete.doc"
+						label="เลือกไฟล์เอกสารหลักฐาน"
+						:rules="[(val) => !!val || 'กรูณา เลือกไฟล์เอกสารหลักฐาน']"
+						lazy-rules
+						use-chips
+						dense
+					>
 						<template v-slot:prepend>
 							<q-icon name="attach_file" />
 						</template>
@@ -435,17 +548,36 @@ watch(
 				</div>
 			</q-card-section>
 			<q-separator />
-			<q-card-section class="row items-center q-pa-sm" v-if="props.leaveStatus === 'CANCEL'">
+			<q-card-section
+				class="row items-center q-pa-sm"
+				v-if="props.leaveStatus === 'CANCEL'"
+			>
 				<q-space />
-				<q-btn label="ยืนยัน" unelevated color="secondary" dense class="q-px-md" @click="onClickSave" />
+				<q-btn
+					label="ยืนยัน"
+					unelevated
+					color="secondary"
+					dense
+					class="q-px-md"
+					@click="onClickSave"
+				/>
 			</q-card-section>
 		</q-card>
 
 		<q-card q-card style="min-width: 70%" v-if="props.leaveStatus === 'DELETE'">
 			<q-card-section class="row items-center q-pa-sm">
-				<div class="text-bold q-pl-sm">{{ titleMainCancle }}{{ titleName }}</div>
+				<div class="text-bold q-pl-sm">
+					{{ titleMainCancle }}{{ titleName }}
+				</div>
 				<q-space />
-				<q-btn icon="close" unelevated round dense @click="props.onClickClose" style="color: #ff8080; background-color: #ffdede" />
+				<q-btn
+					icon="close"
+					unelevated
+					round
+					dense
+					@click="props.onClickClose"
+					style="color: #ff8080; background-color: #ffdede"
+				/>
 			</q-card-section>
 			<q-separator />
 			<q-card-section class="q-p-md row q-gutter-y-md">
diff --git a/src/modules/05_leave/components/FormLeave/01_SickForm.vue b/src/modules/05_leave/components/FormLeave/01_SickForm.vue
index 8ec15bf..ea0a625 100644
--- a/src/modules/05_leave/components/FormLeave/01_SickForm.vue
+++ b/src/modules/05_leave/components/FormLeave/01_SickForm.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { ref, reactive, watch, computed, onMounted } from "vue";
 import type {
-  FormData,
-  FormRef,
+	FormData,
+	FormRef,
 } from "@/modules/05_leave/interface/request/SickForm";
 import { useCounterMixin } from "@/stores/mixin";
 import { useLeaveStore } from "@/modules/05_leave/store";
@@ -16,47 +16,38 @@ const dataStore = useLeaveStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const router = useRouter();
-const {
-  date2Thai,
-  dateToISO,
-  dialogConfirm,
-  success,
-  messageError,
-  fails,
-  showLoader,
-  hideLoader,
-} = mixin;
+const { date2Thai, dateToISO, messageError, dialogRemove } = 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: [],
+	type: dataStore.typeId,
+	leaveWrote: "",
+	leaveStartDate: null,
+	leaveEndDate: null,
+	leaveRange: "ALL",
+	leaveTotal: "",
+	leaveLast: null,
+	leaveNumber: "",
+	leaveAddress: "",
+	leaveDetail: "",
+	leaveDocument: [],
 });
 const leaveDocumentList = ref<any>();
 
@@ -73,500 +64,535 @@ 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[]>([]);
 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;
-  }
+	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();
 
-    if (formDataSick.leaveDocument.length > 0) {
-      formDataSick.leaveDocument.forEach((file: File) => {
-        formData.append("leaveDocument", file);
-      });
-    }
+		if (formDataSick.leaveDocument.length > 0) {
+			formDataSick.leaveDocument.forEach((file: File) => {
+				formData.append("leaveDocument", file);
+			});
+		}
 
-    formData.append("type", formDataSick.type);
-    formData.append("leaveRange", formDataSick.leaveRange);
-    formData.append(
-      "leaveStartDate",
-      dateToISO(new Date(formDataSick.leaveStartDate))
-    );
-    formData.append(
-      "leaveEndDate",
-      dateToISO(new Date(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);
-  }
+		formData.append("type", formDataSick.type);
+		formData.append("leaveRange", formDataSick.leaveRange);
+		formData.append(
+			"leaveStartDate",
+			dateToISO(new Date(formDataSick.leaveStartDate))
+		);
+		formData.append(
+			"leaveEndDate",
+			dateToISO(new Date(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 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;
-      formDataSick.leaveTotal =
-        data.totalDate - data.sumDateWork - data.sumDateHoliday;
-      isLeave.value = data.isLeave;
-    })
-    .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 clickDelete = (id: string) => {
+	dialogRemove($q, () => onClickDelete(id));
+};
+
+/**
+ * function ลบรายการ
+ * @param id
+ */
+const onClickDelete = async (id: string) => {
+	await http
+		.delete(config.API.leaveUserId(id))
+		.then(async (res) => {
+			console.log("delete");
+		})
+		.catch((err) => {
+			messageError($q, err);
+		});
+};
+
 /**
  * ฟังก์ชั่นแปลงครึ่งวัน/ทั้งวัน
  */
 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,
+	};
 }
 
+/** แจ้งเมื่อวันลาไม่ถูกต้อง */
 const dateEndInputStyle = computed(() => {
-  return !isLeave.value ? "input-alert" : "";
+	return !isLeave.value ? "input-alert" : "";
 });
 
-const statusCheck = ref<any>("");
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+const statusCheck = ref<any>("");
 watch(props.data, () => {
-  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;
-    formDataSick.leaveRange = props.data.leaveRange;
-    leaveDocumentList.value = props.data.leaveDocument;
-    formDataSick.leaveAddress = props.data.leaveAddress;
-    statusCheck.value = props.data.status;
-    formDataSick.leaveDocument = [];
-  }
+	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;
+		formDataSick.leaveRange = props.data.leaveRange;
+		leaveDocumentList.value = props.data.leaveDocument;
+		formDataSick.leaveAddress = props.data.leaveAddress;
+		statusCheck.value = props.data.status;
+		formDataSick.leaveDocument = [];
+	}
 });
 
+/** Hook */
 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;
-    formDataSick.leaveRange = props.data.leaveRange;
-    leaveDocumentList.value = props.data.leaveDocument;
-    formDataSick.leaveAddress = props.data.leaveAddress;
-    statusCheck.value = props.data.status;
-  }
+	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;
+		formDataSick.leaveRange = props.data.leaveRange;
+		leaveDocumentList.value = props.data.leaveDocument;
+		formDataSick.leaveAddress = props.data.leaveAddress;
+		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="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="`${'ลาถึงวันที่'}`"
-                >
-                  <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>
+						<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-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-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>
-              <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>
-            </q-card>
-          </div>
-        </div>
+						<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>
+							<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"
+												class="q-mr-md"
+											>
+												<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+											</q-btn>
 
-        <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-btn
+												@click="clickDelete"
+												target="_blank"
+												outline
+												color="red"
+												label="ลบไฟล์"
+												size="12px"
+											>
+												<q-tooltip>ลบไฟล์</q-tooltip>
+											</q-btn>
+										</q-item-label>
+									</q-item-section>
+								</q-item>
+							</q-list>
+						</q-card>
+					</div>
+				</div>
 
-    <q-separator class="q-mt-sm" />
+				<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="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/03_Birth.vue b/src/modules/05_leave/components/FormLeave/03_Birth.vue
index 80ee732..c9c5986 100644
--- a/src/modules/05_leave/components/FormLeave/03_Birth.vue
+++ b/src/modules/05_leave/components/FormLeave/03_Birth.vue
@@ -13,38 +13,38 @@ const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
 const router = useRouter();
 const $q = useQuasar();
-const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } =
-  mixin;
+const { date2Thai, dateToISO, dialogRemove, 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 */
@@ -59,61 +59,61 @@ 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[]>([]);
 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();
-    if (formDataBirth.leaveDocument.length > 0) {
-      formDataBirth.leaveDocument.forEach((file: File) => {
-        formData.append("leaveDocument", file);
-      });
-    }
-    // formData.append("leaveDocument", formDataBirth.leaveDocument);
-    formData.append("type", formDataBirth.type);
-    formData.append(
-      "leaveStartDate",
-      dateToISO(new Date(formDataBirth.leaveStartDate))
-    );
-    formData.append(
-      "leaveEndDate",
-      dateToISO(new Date(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();
+		if (formDataBirth.leaveDocument.length > 0) {
+			formDataBirth.leaveDocument.forEach((file: File) => {
+				formData.append("leaveDocument", file);
+			});
+		}
+		// formData.append("leaveDocument", formDataBirth.leaveDocument);
+		formData.append("type", formDataBirth.type);
+		formData.append(
+			"leaveStartDate",
+			dateToISO(new Date(formDataBirth.leaveStartDate))
+		);
+		formData.append(
+			"leaveEndDate",
+			dateToISO(new Date(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, isLeave.value);
-  }
+		props.onSubmit(formData, isLeave.value);
+	}
 }
 
 /**
@@ -122,346 +122,379 @@ function onValidate() {
  */
 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;
-      formDataBirth.leaveTotal = data.totalDate;
-    })
-    .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 dateEndInputStyle = computed(() => {
-  return !isLeave.value ? "input-alert" : "";
+	return !isLeave.value ? "input-alert" : "";
 });
 
+//เเจ้งเตือนลบข้อมูล
+const clickDelete = (id: string) => {
+	dialogRemove($q, () => onClickDelete(id));
+};
+
+/**
+ * function ลบรายการ
+ * @param id
+ */
+const onClickDelete = async (id: string) => {
+	await http
+		.delete(config.API.leaveUserId(id))
+		.then(async (res) => {
+			console.log("delete");
+		})
+		.catch((err) => {
+			messageError($q, err);
+		});
+};
+
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 const leaveDocumentList = ref<any>();
 const statusCheck = ref<any>("");
-/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 watch(props.data, () => {
-  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;
-    formDataBirth.leaveDocument = [];
-  }
+	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;
+		formDataBirth.leaveDocument = [];
+	}
 });
 
+/** Hook */
 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
-              :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 || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
-              ]"
-            />
+				<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 row" v-if="data">
-          <div class="col-12 col-md-12 col-sm-12">
-            <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
-                        :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-card>
+						<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 row" v-if="data">
+					<div class="col-12 col-md-12 col-sm-12">
+						<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
+												:href="document"
+												target="_blank"
+												outline
+												color="blue"
+												label="ดาวน์โหลด"
+												size="12px"
+												class="q-mr-md"
+											>
+												<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+											</q-btn>
+											<q-btn
+												@click="clickDelete"
+												target="_blank"
+												outline
+												color="red"
+												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-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 459c4eb..5da9063 100644
--- a/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
+++ b/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, computed, watch } from "vue";
 import type {
-  FormData,
-  FormRef,
+	FormData,
+	FormRef,
 } from "@/modules/05_leave/interface/request/HelpWifeForm";
 import { useCounterMixin } from "@/stores/mixin";
 import { useLeaveStore } from "@/modules/05_leave/store";
@@ -17,45 +17,65 @@ const mixin = useCounterMixin();
 const router = useRouter();
 const $q = useQuasar();
 const {
-  date2Thai,
-  calculateDurationYmd,
-  dateToISO,
-  dialogConfirm,
-  fails,
-  success,
-  messageError,
+	date2Thai,
+	calculateDurationYmd,
+	dateToISO,
+	dialogRemove,
+	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: () => "",
+	},
 });
 
+//เเจ้งเตือนลบข้อมูล
+const clickDelete = (id: string) => {
+	dialogRemove($q, () => onClickDelete(id));
+};
+
+/**
+ * function ลบรายการ
+ * @param id
+ */
+const onClickDelete = async (id: string) => {
+	await http
+		.delete(config.API.leaveUserId(id))
+		.then(async (res) => {
+			console.log("delete");
+		})
+		.catch((err) => {
+			messageError($q, err);
+		});
+};
+
 /** ข้อมูล 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 */
@@ -72,77 +92,77 @@ 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 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();
-    if (formDataHelpWife.leaveDocument.length > 0) {
-      formDataHelpWife.leaveDocument.forEach((file: File) => {
-        formData.append("leaveDocument", file);
-      });
-    }
-    formData.append("type", formDataHelpWife.type);
-    formData.append(
-      "leaveStartDate",
-      dateToISO(new Date(formDataHelpWife.leaveStartDate))
-    );
-    formData.append(
-      "leaveEndDate",
-      dateToISO(new Date(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(new Date(formDataHelpWife.wifeDayDateBorn))
-    );
-    props.onSubmit(formData, isLeave.value);
-  }
+	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 (formDataHelpWife.leaveDocument.length > 0) {
+			formDataHelpWife.leaveDocument.forEach((file: File) => {
+				formData.append("leaveDocument", file);
+			});
+		}
+		formData.append("type", formDataHelpWife.type);
+		formData.append(
+			"leaveStartDate",
+			dateToISO(new Date(formDataHelpWife.leaveStartDate))
+		);
+		formData.append(
+			"leaveEndDate",
+			dateToISO(new Date(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(new Date(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;
 }
 
 /**
@@ -151,401 +171,414 @@ function updateLeaveTotal() {
  */
 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;
-      formDataHelpWife.leaveTotal =
-        data.totalDate - data.sumDateWork - data.sumDateHoliday;
-    })
-    .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 dateEndInputStyle = computed(() => {
-  return !isLeave.value ? "input-alert" : "";
+	return !isLeave.value ? "input-alert" : "";
 });
 
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 const leaveDocumentList = ref<any>();
 const statusCheck = ref<any>("");
-/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 watch(props.data, () => {
-  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;
-    formDataHelpWife.leaveDocument = [];
-    leaveDocumentList.value = props.data.leaveDocument;
-    statusCheck.value = props.data.status;
-  }
+	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;
+		formDataHelpWife.leaveDocument = [];
+		leaveDocumentList.value = props.data.leaveDocument;
+		statusCheck.value = props.data.status;
+	}
 });
 
+/**Hook */
 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;
-  }
+	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;
+	}
 });
 </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="`${'ลาถึงวันที่'}`"
-            >
-              <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.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">
-            <q-file
-              bg-color="white"
-              ref="leaveDocumentRef"
-              v-model="formDataHelpWife.leaveDocument"
-              @added="fileUploadDoc"
-              dense
-              label="เอกสารประกอบ"
-              outlined
-              use-chips
-              class="q-pl-sm col-12"
-              multiple
-            >
-              <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>
-              <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>
-            </q-card>
-          </div>
-        </div>
-      </div>
-    </q-card>
+						<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">
+						<q-file
+							bg-color="white"
+							ref="leaveDocumentRef"
+							v-model="formDataHelpWife.leaveDocument"
+							@added="fileUploadDoc"
+							dense
+							label="เอกสารประกอบ"
+							outlined
+							use-chips
+							class="q-pl-sm col-12"
+							multiple
+						>
+							<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>
+							<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"
+												class="q-mr-md"
+											>
+												<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+											</q-btn>
+											<q-btn
+												@click="clickDelete"
+												target="_blank"
+												outline
+												color="red"
+												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-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/05_VacationForm.vue b/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
index 59bb164..ed1e5c8 100644
--- a/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, computed, watch } from "vue";
 import type {
-  FormData,
-  FormRef,
+	FormData,
+	FormRef,
 } from "@/modules/05_leave/interface/request/VacationForm";
 import { useCounterMixin } from "@/stores/mixin";
 import { useLeaveStore } from "@/modules/05_leave/store";
@@ -16,40 +16,40 @@ const $q = useQuasar();
 const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
 const router = useRouter();
-const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } =
-  mixin;
+const { date2Thai, dateToISO, dialogRemove, 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 */
@@ -67,483 +67,516 @@ 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 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();
-    if (formDataVacation.leaveDocument.length > 0) {
-      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(new Date(formDataVacation.leaveStartDate))
-    );
-    formData.append(
-      "leaveEndDate",
-      dateToISO(new Date(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);
-  }
+	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 (formDataVacation.leaveDocument.length > 0) {
+			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(new Date(formDataVacation.leaveStartDate))
+		);
+		formData.append(
+			"leaveEndDate",
+			dateToISO(new Date(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);
+	}
 }
 
+//เเจ้งเตือนลบข้อมูล
+const clickDelete = (id: string) => {
+	dialogRemove($q, () => onClickDelete(id));
+};
+
+/**
+ * function ลบรายการ
+ * @param id
+ */
+const onClickDelete = async (id: string) => {
+	await http
+		.delete(config.API.leaveUserId(id))
+		.then(async (res) => {
+			console.log("delete");
+		})
+		.catch((err) => {
+			messageError($q, err);
+		});
+};
+
 /**
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
 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;
-      formDataVacation.leaveTotal =
-        data.totalDate - data.sumDateWork - data.sumDateHoliday;
-    })
-    .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 dateEndInputStyle = computed(() => {
-  return !isLeave.value ? "input-alert" : "";
+	return !isLeave.value ? "input-alert" : "";
 });
 
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 const leaveDocumentList = ref<any>();
 const statusCheck = ref<any>("");
-/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 watch(props.data, () => {
-  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.leaveRange = props.data.leaveRange;
-    formDataVacation.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.leaveRange = props.data.leaveRange;
+		formDataVacation.leaveDocument = [];
+	}
 });
 
+/**Hook */
 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.leaveRange = props.data.leaveRange;
-    // 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.leaveRange = props.data.leaveRange;
+		// 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="`${'ลาถึงวันที่'}`"
-            >
-              <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 || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
-              ]"
-            />
+				<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>
-        </div>
-        <div class="col-12" v-if="data">
-          <div class="col-12 col-md-12 col-sm-12">
-            <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
-                        :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-card>
+						<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>
+				</div>
+				<div class="col-12" v-if="data">
+					<div class="col-12 col-md-12 col-sm-12">
+						<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
+												:href="document"
+												target="_blank"
+												outline
+												color="blue"
+												label="ดาวน์โหลด"
+												size="12px"
+												class="q-mr-md"
+											>
+												<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+											</q-btn>
+											<q-btn
+												@click="clickDelete"
+												target="_blank"
+												outline
+												color="red"
+												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-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 5296ed6..d06d25e 100644
--- a/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
@@ -14,31 +14,31 @@ const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
 const {
-  date2Thai,
-  dialogConfirm,
-  calculateDurationYmd,
-  fails,
-  dateToISO,
-  success,
-  messageError,
+	date2Thai,
+	dialogRemove,
+	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 */
@@ -58,110 +58,110 @@ 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: [],
-  leaveDetail: "",
+	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: [],
+	leaveDetail: "",
 });
 
 /** 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 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);
-      }
-    }
-  }
+	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 (hasError.every((result) => result === true)) {
+		const formData = new FormData();
 
-    if (formDataOrdination.leaveDocument) {
-      formDataOrdination.leaveDocument.forEach((file: File) => {
-        formData.append("leaveDocument", file);
-      });
-    }
-    // formData.append("leaveDocument", formDataOrdination.leaveDocument);
-    formData.append("type", formDataOrdination.type);
-    formData.append(
-      "leaveStartDate",
-      dateToISO(new Date(formDataOrdination.leaveStartDate))
-    );
-    formData.append(
-      "leaveEndDate",
-      dateToISO(new Date(formDataOrdination.leaveEndDate))
-    );
-    formData.append(
-      "ordainDayOrdination",
-      dateToISO(new Date(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);
-  }
+		if (formDataOrdination.leaveDocument) {
+			formDataOrdination.leaveDocument.forEach((file: File) => {
+				formData.append("leaveDocument", file);
+			});
+		}
+		// formData.append("leaveDocument", formDataOrdination.leaveDocument);
+		formData.append("type", formDataOrdination.type);
+		formData.append(
+			"leaveStartDate",
+			dateToISO(new Date(formDataOrdination.leaveStartDate))
+		);
+		formData.append(
+			"leaveEndDate",
+			dateToISO(new Date(formDataOrdination.leaveEndDate))
+		);
+		formData.append(
+			"ordainDayOrdination",
+			dateToISO(new Date(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);
+	}
 }
 
 /**
@@ -170,563 +170,596 @@ function onValidate() {
  */
 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;
-      formDataOrdination.leaveTotal = data.totalDate;
-    })
-    .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 dateEndInputStyle = computed(() => {
-  return !isLeave.value ? "input-alert" : "";
+	return !isLeave.value ? "input-alert" : "";
 });
 
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 const leaveDocumentList = ref<any>();
 const statusCheck = ref<any>("");
-/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 watch(props.data, () => {
-  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 = [];
-  }
+	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 = [];
+	}
 });
 
+/** Hook */
 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;
+	}
 });
+
+//เเจ้งเตือนลบข้อมูล
+const clickDelete = (id: string) => {
+	dialogRemove($q, () => onClickDelete(id));
+};
+
+/**
+ * function ลบรายการ
+ * @param id
+ */
+const onClickDelete = async (id: string) => {
+	await http
+		.delete(config.API.leaveUserId(id))
+		.then(async (res) => {
+			console.log("delete");
+		})
+		.catch((err) => {
+			messageError($q, err);
+		});
+};
 </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'
-              "
-            >
-              <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 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>
 
-        <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="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"
-              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>
+						<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="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>
+				<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>
 
-        <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="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"
-          dense
-          hide-bottom-space
-          ref="ordainDayLocationNameRef"
-          bg-color="white"
-          outlined
-          full-width
-          :readonly="!edit || statusCheck === 'NEW'"
-          v-model="formDataOrdination.ordainDayLocationName"
-          label="ชื่อวัด"
-          :rules="[(val) => !!val || `${'กรุณากรอกชื่อวัด'}`]"
-        />
+				<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 || `${'กรุณากรอกชื่อวัด'}`]"
+				/>
 
-        <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"
+					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"
+				/>
 
-        <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 || `${'กรุณากรอกชื่อวัด'}`]"
-        />
+				<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" 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
-              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>
-              <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>
-            </q-card>
-          </div>
-        </div>
-      </div>
-    </q-card>
+				<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" 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
+							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>
+							<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"
+												class="q-mr-md"
+											>
+												<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+											</q-btn>
+											<q-btn
+												@click="clickDelete"
+												target="_blank"
+												outline
+												color="red"
+												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-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 61e13db..ed373e6 100644
--- a/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
+++ b/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
@@ -14,13 +14,13 @@ const dataStore = useLeaveStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const {
-  date2Thai,
-  dialogConfirm,
-  calculateDurationYmd,
-  fails,
-  messageError,
-  success,
-  dateToISO,
+	date2Thai,
+	dialogRemove,
+	calculateDurationYmd,
+	fails,
+	messageError,
+	success,
+	dateToISO,
 } = mixin;
 const edit = ref<boolean>(true);
 const files = ref<any>(null);
@@ -34,85 +34,85 @@ 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: 0,
-  hajjDayStatus: "true",
-  leaveDocument: [],
-  leaveDetail: "",
+	type: dataStore.typeId,
+	leaveWrote: "",
+	leavegovernmentDate: null,
+	leaveStartDate: null,
+	leaveEndDate: null,
+	totalLeave: 0,
+	hajjDayStatus: "true",
+	leaveDocument: [],
+	leaveDetail: "",
 });
 
 /** 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 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();
-    if (formDataHaji.leaveDocument) {
-      formDataHaji.leaveDocument.forEach((file: File) => {
-        formData.append("leaveDocument", file);
-      });
-    }
-    // formData.append("leaveDocument", formDataHaji.leaveDocument);
-    formData.append("type", formDataHaji.type);
-    formData.append(
-      "leaveStartDate",
-      dateToISO(new Date(formDataHaji.leaveStartDate))
-    );
-    formData.append(
-      "leaveEndDate",
-      dateToISO(new Date(formDataHaji.leaveEndDate))
-    );
-    formData.append("hajjDayStatus", formDataHaji.hajjDayStatus);
-    formData.append("leaveWrote", formDataHaji.leaveWrote);
-    formData.append("leaveDetail", formDataHaji.leaveDetail);
-    props.onSubmit(formData, isLeave.value);
-  }
+	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 (formDataHaji.leaveDocument) {
+			formDataHaji.leaveDocument.forEach((file: File) => {
+				formData.append("leaveDocument", file);
+			});
+		}
+		// formData.append("leaveDocument", formDataHaji.leaveDocument);
+		formData.append("type", formDataHaji.type);
+		formData.append(
+			"leaveStartDate",
+			dateToISO(new Date(formDataHaji.leaveStartDate))
+		);
+		formData.append(
+			"leaveEndDate",
+			dateToISO(new Date(formDataHaji.leaveEndDate))
+		);
+		formData.append("hajjDayStatus", formDataHaji.hajjDayStatus);
+		formData.append("leaveWrote", formDataHaji.leaveWrote);
+		formData.append("leaveDetail", formDataHaji.leaveDetail);
+		props.onSubmit(formData, isLeave.value);
+	}
 }
 
 /**
@@ -121,375 +121,408 @@ function onValidate() {
  */
 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;
-      formDataHaji.leaveTotal = data.totalDate;
-    })
-    .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 dateEndInputStyle = computed(() => {
-  return !isLeave.value ? "input-alert" : "";
+	return !isLeave.value ? "input-alert" : "";
 });
 
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 const leaveDocumentList = ref<any>();
 const statusCheck = ref<any>("");
-/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 watch(props.data, () => {
-  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 = [];
-  }
+	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 = [];
+	}
 });
 
+/**Hook */
 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;
+	}
 });
+
+//เเจ้งเตือนลบข้อมูล
+const clickDelete = (id: string) => {
+	dialogRemove($q, () => onClickDelete(id));
+};
+
+/**
+ * function ลบรายการ
+ * @param id
+ */
+const onClickDelete = async (id: string) => {
+	await http
+		.delete(config.API.leaveUserId(id))
+		.then(async (res) => {
+			console.log("delete");
+		})
+		.catch((err) => {
+			messageError($q, err);
+		});
+};
 </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
-                  "
-                  @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
-              :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>
+						<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>
 
-            <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>
+						<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>
 
-        <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>
+				<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
-              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>
-              <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>
-            </q-card>
-          </div>
-        </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-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
+							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>
+							<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"
+												class="q-mr-md"
+											>
+												<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+											</q-btn>
+											<q-btn
+												@click="clickDelete"
+												target="_blank"
+												outline
+												color="red"
+												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-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 9793e9a..8960861 100644
--- a/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
+++ b/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
@@ -14,13 +14,13 @@ const dataStore = useLeaveStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const {
-  date2Thai,
-  dialogConfirm,
-  calculateDurationYmd,
-  dateToISO,
-  success,
-  messageError,
-  fails,
+	date2Thai,
+	dialogRemove,
+	calculateDurationYmd,
+	dateToISO,
+	success,
+	messageError,
+	fails,
 } = mixin;
 const edit = ref<boolean>(true);
 const files = ref<any>(null);
@@ -38,99 +38,99 @@ 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: [],
-  leaveWrote: "",
-  absentDaySummon: "",
-  absentDayLocation: "",
-  absentDayRegistorDate: null,
-  absentDayGetIn: "",
-  absentDayAt: "",
-  leaveDetail: "",
+	type: dataStore.typeId,
+	leaveStartDate: null,
+	leaveEndDate: null,
+	leaveTotal: 0,
+	leaveDocument: [],
+	leaveWrote: "",
+	absentDaySummon: "",
+	absentDayLocation: "",
+	absentDayRegistorDate: null,
+	absentDayGetIn: "",
+	absentDayAt: "",
+	leaveDetail: "",
 });
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
 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();
-    if (formDataMilitary.leaveDocument) {
-      formDataMilitary.leaveDocument.forEach((file: File) => {
-        formData.append("leaveDocument", file);
-      });
-    }
-    // formData.append("leaveDocument", formDataMilitary.leaveDocument);
-    formData.append("type", formDataMilitary.type);
-    formData.append(
-      "leaveStartDate",
-      dateToISO(new Date(formDataMilitary.leaveStartDate))
-    );
-    formData.append(
-      "leaveEndDate",
-      dateToISO(new Date(formDataMilitary.leaveEndDate))
-    );
-    formData.append("absentDaySummon", formDataMilitary.absentDaySummon);
-    formData.append("absentDayLocation", formDataMilitary.absentDayLocation);
-    formData.append(
-      "absentDayRegistorDate",
-      dateToISO(new Date(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);
-  }
+	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 (formDataMilitary.leaveDocument) {
+			formDataMilitary.leaveDocument.forEach((file: File) => {
+				formData.append("leaveDocument", file);
+			});
+		}
+		// formData.append("leaveDocument", formDataMilitary.leaveDocument);
+		formData.append("type", formDataMilitary.type);
+		formData.append(
+			"leaveStartDate",
+			dateToISO(new Date(formDataMilitary.leaveStartDate))
+		);
+		formData.append(
+			"leaveEndDate",
+			dateToISO(new Date(formDataMilitary.leaveEndDate))
+		);
+		formData.append("absentDaySummon", formDataMilitary.absentDaySummon);
+		formData.append("absentDayLocation", formDataMilitary.absentDayLocation);
+		formData.append(
+			"absentDayRegistorDate",
+			dateToISO(new Date(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);
+	}
 }
 
 /**
@@ -139,413 +139,446 @@ function onValidate() {
  */
 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;
-      formDataMilitary.leaveTotal = data.totalDate;
-    })
-    .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);
+		});
 }
 
+//เเจ้งเตือนลบข้อมูล
+const clickDelete = (id: string) => {
+	dialogRemove($q, () => onClickDelete(id));
+};
+
+/**
+ * function ลบรายการ
+ * @param id
+ */
+const onClickDelete = async (id: string) => {
+	await http
+		.delete(config.API.leaveUserId(id))
+		.then(async (res) => {
+			console.log("delete");
+		})
+		.catch((err) => {
+			messageError($q, err);
+		});
+};
+
 /**
  * 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 dateEndInputStyle = computed(() => {
-  return !isLeave.value ? "input-alert" : "";
+	return !isLeave.value ? "input-alert" : "";
 });
 
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 const leaveDocumentList = ref<any>();
 const statusCheck = ref<any>("");
-/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 watch(props.data, () => {
-  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 = [];
-  }
+	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 = [];
+	}
 });
 
+/**Hook */
 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="`${'ลาถึงวันที่'}`"
-            >
-              <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
-          :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
+					: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>
 
-        <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">
+						<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
-              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
+							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">
-            <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>
+				<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"
-              ref="absentDayGetInRef"
-              outlined
-              v-model="formDataMilitary.absentDayGetIn"
-              label="ให้เข้ารับการ"
-              hide-bottom-space
-              :readonly="!edit || statusCheck === 'NEW'"
-              :rules="[(val) => !!val || `${'กรุณากรอกให้เข้ารับการ'}`]"
-            />
+						<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-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"
+							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-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-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 q-mt-sm" v-if="data">
-            <div class="col-12 col-md-12 col-sm-12">
-              <q-card>
-                <q-list
-                  v-if="leaveDocumentList && leaveDocumentList.length > 0"
-                  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
-                          :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>
-    </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" 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 q-mt-sm" v-if="data">
+						<div class="col-12 col-md-12 col-sm-12">
+							<q-card>
+								<q-list
+									v-if="leaveDocumentList && leaveDocumentList.length > 0"
+									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
+													:href="document"
+													target="_blank"
+													outline
+													color="blue"
+													label="ดาวน์โหลด"
+													size="12px"
+													class="q-mr-md"
+												>
+													<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+												</q-btn>
+												<q-btn
+													@click="clickDelete"
+													target="_blank"
+													outline
+													color="red"
+													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>
+		</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 9875638..46aff04 100644
--- a/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
+++ b/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
@@ -14,14 +14,14 @@ const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
 const {
-  date2Thai,
-  dialogConfirm,
-  calculateDurationYmd,
-  fails,
-  dateToISO,
-  success,
-  messageError,
-  arabicNumberToText,
+	date2Thai,
+	dialogRemove,
+	calculateDurationYmd,
+	fails,
+	dateToISO,
+	success,
+	messageError,
+	arabicNumberToText,
 } = mixin;
 const edit = ref<boolean>(true);
 const files = ref<any>(null);
@@ -43,119 +43,140 @@ 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 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();
-    if (formDataStudy.leaveDocument) {
-      formDataStudy.leaveDocument.forEach((file: File) => {
-        formData.append("leaveDocument", file);
-      });
-    }
-    // formData.append("leaveDocument", formDataStudy.leaveDocument);
-    formData.append("type", formDataStudy.type); //
-    formData.append(
-      "leaveStartDate",
-      dateToISO(new Date(formDataStudy.leaveStartDate))
-    );
-    formData.append(
-      "leaveEndDate",
-      dateToISO(new Date(formDataStudy.leaveEndDate))
-    );
-    formData.append("studyDaySubject", formDataStudy.studyDaySubject);
-    formData.append("studyDayDegreeLevel", formDataStudy.studyDayDegreeLevel);
-    // formData.append(
-    //   "leavegovernmentDate",
-    //   dateToISO(new Date(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 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 (formDataStudy.leaveDocument) {
+			formDataStudy.leaveDocument.forEach((file: File) => {
+				formData.append("leaveDocument", file);
+			});
+		}
+		// formData.append("leaveDocument", formDataStudy.leaveDocument);
+		formData.append("type", formDataStudy.type); //
+		formData.append(
+			"leaveStartDate",
+			dateToISO(new Date(formDataStudy.leaveStartDate))
+		);
+		formData.append(
+			"leaveEndDate",
+			dateToISO(new Date(formDataStudy.leaveEndDate))
+		);
+		formData.append("studyDaySubject", formDataStudy.studyDaySubject);
+		formData.append("studyDayDegreeLevel", formDataStudy.studyDayDegreeLevel);
+		// formData.append(
+		//   "leavegovernmentDate",
+		//   dateToISO(new Date(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 clickDelete = (id: string) => {
+	dialogRemove($q, () => onClickDelete(id));
+};
+
+/**
+ * function ลบรายการ
+ * @param id
+ */
+const onClickDelete = async (id: string) => {
+	await http
+		.delete(config.API.leaveUserId(id))
+		.then(async (res) => {
+			console.log("delete");
+		})
+		.catch((err) => {
+			messageError($q, err);
+		});
+};
+
+/** แจ้งเมื่อวันลาไม่ถูกต้อง */
 const dateEndInputStyle = computed(() => {
-  return !isLeave.value ? "input-alert" : "";
+	return !isLeave.value ? "input-alert" : "";
 });
 
 /**
@@ -164,546 +185,558 @@ const dateEndInputStyle = computed(() => {
  */
 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;
-      //   formDataStudy.leaveTotal = formDataStudy.leaveStartDatee;
-    })
-    .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;
 }
 
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 const leaveDocumentList = ref<any>();
 const statusCheck = ref<any>("");
-/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 watch(props.data, 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;
-    formDataStudy.leaveDocument = [];
-    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;
+		formDataStudy.leaveDocument = [];
+		leaveDocumentList.value = props.data.leaveDocument;
+		const leaveTotal = await calculateDurationYmd(
+			props.data.leaveStartDate,
+			props.data.leaveEndDate
+		);
+		formDataStudy.leaveTotal = leaveTotal;
+		statusCheck.value = props.data.status;
+	}
 });
 
+/**Hook */
 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
-              "
-            >
-              <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
-          :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>
+				<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'">
-          <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 q-mt-sm" v-if="data">
-            <div class="col-12 col-md-12 col-sm-12">
-              <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
-                          :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>
-    </q-card>
+				<div class="col-12" v-if="statusCheck != 'NEW'">
+					<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 q-mt-sm" v-if="data">
+						<div class="col-12 col-md-12 col-sm-12">
+							<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
+													:href="document"
+													target="_blank"
+													outline
+													color="blue"
+													label="ดาวน์โหลด"
+													size="12px"
+													class="q-mr-md"
+												>
+													<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+												</q-btn>
+												<q-btn
+													@click="clickDelete"
+													target="_blank"
+													outline
+													color="red"
+													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>
+		</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/10_TrainForm.vue b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
index 41428b5..ee957d9 100644
--- a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
+++ b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
@@ -14,52 +14,52 @@ const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
 const {
-  date2Thai,
-  dialogConfirm,
-  arabicNumberToText,
-  calculateDurationYmd,
-  fails,
-  dateToISO,
-  success,
-  messageError,
+	date2Thai,
+	dialogRemove,
+	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 */
@@ -77,79 +77,79 @@ 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 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();
-    if (formDataTrain.leaveDocument) {
-      formDataTrain.leaveDocument.forEach((file: File) => {
-        formData.append("leaveDocument", file);
-      });
-    }
-    // formData.append("leaveDocument", formDataTrain.leaveDocument);
-    formData.append("type", formDataTrain.type); //
-    formData.append(
-      "leaveStartDate",
-      dateToISO(new Date(formDataTrain.leaveStartDate))
-    ); //
-    formData.append(
-      "leaveEndDate",
-      dateToISO(new Date(formDataTrain.leaveEndDate))
-    ); //
-    formData.append("studyDayCountry", formDataTrain.studyDayCountry);
-    // formData.append(
-    //   "leavegovernmentDate",
-    //   dateToISO(formDataTrain.leavegovernmentDate)
-    // );
-    // formData.append("leavebirthDate", dateToISO(new Date(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);
-  }
+	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 (formDataTrain.leaveDocument) {
+			formDataTrain.leaveDocument.forEach((file: File) => {
+				formData.append("leaveDocument", file);
+			});
+		}
+		// formData.append("leaveDocument", formDataTrain.leaveDocument);
+		formData.append("type", formDataTrain.type); //
+		formData.append(
+			"leaveStartDate",
+			dateToISO(new Date(formDataTrain.leaveStartDate))
+		); //
+		formData.append(
+			"leaveEndDate",
+			dateToISO(new Date(formDataTrain.leaveEndDate))
+		); //
+		formData.append("studyDayCountry", formDataTrain.studyDayCountry);
+		// formData.append(
+		//   "leavegovernmentDate",
+		//   dateToISO(formDataTrain.leavegovernmentDate)
+		// );
+		// formData.append("leavebirthDate", dateToISO(new Date(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);
+	}
 }
 
 /**
@@ -159,540 +159,573 @@ function onValidate() {
 
 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;
-      //   formDataTrain.leaveTotal = data.totalDate;
-    })
-    .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);
+		});
 }
 
+//เเจ้งเตือนลบข้อมูล
+const clickDelete = (id: string) => {
+	dialogRemove($q, () => onClickDelete(id));
+};
+
+/**
+ * function ลบรายการ
+ * @param id
+ */
+const onClickDelete = async (id: string) => {
+	await http
+		.delete(config.API.leaveUserId(id))
+		.then(async (res) => {
+			console.log("delete");
+		})
+		.catch((err) => {
+			messageError($q, err);
+		});
+};
+
 /**
  * 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 dateEndInputStyle = computed(() => {
-  return !isLeave.value ? "input-alert" : "";
+	return !isLeave.value ? "input-alert" : "";
 });
 
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 const leaveDocumentList = ref<any>();
 const statusCheck = ref<any>("");
-/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 watch(props.data, 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 = [];
-    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 = [];
+		const leaveTotal = await calculateDurationYmd(
+			props.data.leaveStartDate,
+			props.data.leaveEndDate
+		);
+		formDataTrain.leaveTotal = leaveTotal;
+		leaveDocumentList.value = props.data.leaveDocument;
+		statusCheck.value = props.data.status;
+	}
 });
 
+/**Hook */
 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
-              "
-            >
-              <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
-          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>
+				<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'">
-          <q-file
-            v-model="formDataTrain.leaveDocument"
-            bg-color="white"
-            multiple
-            dense
-            outlined
-            use-chips
-            label="เอกสารประกอบ"
-          >
-            <template v-slot:prepend>
-              <q-icon name="attach_file" color="primary" />
-            </template>
-          </q-file>
-          <div class="col-12 q-mt-sm" v-if="data">
-            <div class="col-12 col-md-12 col-sm-12">
-              <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
-                          :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>
-    </q-card>
+				<div class="col-12" v-if="statusCheck != 'NEW'">
+					<q-file
+						v-model="formDataTrain.leaveDocument"
+						bg-color="white"
+						multiple
+						dense
+						outlined
+						use-chips
+						label="เอกสารประกอบ"
+					>
+						<template v-slot:prepend>
+							<q-icon name="attach_file" color="primary" />
+						</template>
+					</q-file>
+					<div class="col-12 q-mt-sm" v-if="data">
+						<div class="col-12 col-md-12 col-sm-12">
+							<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
+													:href="document"
+													target="_blank"
+													outline
+													color="blue"
+													label="ดาวน์โหลด"
+													size="12px"
+													class="q-mr-md"
+												>
+													<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+												</q-btn>
+												<q-btn
+													@click="clickDelete"
+													target="_blank"
+													outline
+													color="red"
+													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>
+		</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/11_WorkInternationalForm.vue b/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
index a694b71..cabf55b 100644
--- a/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
+++ b/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
@@ -14,14 +14,14 @@ const dataStore = useLeaveStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const {
-  date2Thai,
-  dialogConfirm,
-  fails,
-  dateToISO,
-  success,
-  messageError,
-  showLoader,
-  hideLoader,
+	date2Thai,
+	dialogRemove,
+	fails,
+	dateToISO,
+	success,
+	messageError,
+	showLoader,
+	hideLoader,
 } = mixin;
 const edit = ref<boolean>(true);
 const router = useRouter();
@@ -29,29 +29,29 @@ 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: [],
-  leaveDraftDocument: null,
+	type: dataStore.typeId,
+	leaveWrote: "",
+	leaveStartDate: null,
+	leaveEndDate: null,
+	leaveDetail: "",
+	leaveDocument: [],
+	leaveDraftDocument: null,
 });
 
 /** ตัวแปร ref สำหรับแสดง validate */
@@ -63,11 +63,11 @@ 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,
 };
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
@@ -75,266 +75,288 @@ 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);
+	});
 };
 
 /** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
 async 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.length > 0) {
-      formDataWorkInternational.leaveDocument.forEach((file: File) => {
-        formData.append("leaveDocument", file);
-      });
+		if (formDataWorkInternational.leaveDocument.length > 0) {
+			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); //
-    await props.onSubmit(formData, isLeave.value);
-  }
+		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); //
+		await 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();
+		});
 }
 
+//เเจ้งเตือนลบข้อมูล
+const clickDelete = (id: string) => {
+	dialogRemove($q, () => onClickDelete(id));
+};
+
+/**
+ * function ลบรายการ
+ * @param id
+ */
+const onClickDelete = async (id: string) => {
+	await http
+		.delete(config.API.leaveUserId(id))
+		.then(async (res) => {
+			console.log("delete");
+		})
+		.catch((err) => {
+			messageError($q, err);
+		});
+};
+
 /**
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
 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);
-    });
+	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 dateEndInputStyle = computed(() => {
-  return !isLeave.value ? "input-alert" : "";
+	return !isLeave.value ? "input-alert" : "";
 });
 
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 const leaveDocumentList = ref<any>();
 const leaveDraftDocument = ref<string>();
 const statusCheck = ref<any>("");
-/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 watch(props, () => {
-  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;
-    leaveDraftDocument.value = props.data.leaveDraftDocument;
-    leaveDocumentList.value = props.data.leaveDocument;
-    statusCheck.value = props.data.status;
-    formDataWorkInternational.leaveDraftDocument = null;
-    formDataWorkInternational.leaveDocument = [];
-  }
+	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;
+		leaveDraftDocument.value = props.data.leaveDraftDocument;
+		leaveDocumentList.value = props.data.leaveDocument;
+		statusCheck.value = props.data.status;
+		formDataWorkInternational.leaveDraftDocument = null;
+		formDataWorkInternational.leaveDocument = [];
+	}
 });
 
+/**Hook */
 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="!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>
+				<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
+							<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
@@ -347,171 +369,182 @@ 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="data">
-          <div class="col-12 col-md-12 col-sm-12">
-            <q-card>
-              <q-list
-                v-if="leaveDocumentList && leaveDocumentList.length > 0"
-                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
-                        :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-card>
+				<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="data">
+					<div class="col-12 col-md-12 col-sm-12">
+						<q-card>
+							<q-list
+								v-if="leaveDocumentList && leaveDocumentList.length > 0"
+								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
+												:href="document"
+												target="_blank"
+												outline
+												color="blue"
+												label="ดาวน์โหลด"
+												size="12px"
+												class="q-mr-md"
+											>
+												<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+											</q-btn>
+											<q-btn
+												@click="clickDelete"
+												target="_blank"
+												outline
+												color="red"
+												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-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 58ab580..316d00d 100644
--- a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { ref, reactive, computed, onMounted, watch } from "vue";
 import type {
-  FormData,
-  FormRef,
+	FormData,
+	FormRef,
 } from "@/modules/05_leave/interface/request/FollowSpouseForm";
 import { useCounterMixin } from "@/stores/mixin";
 import { useLeaveStore } from "@/modules/05_leave/store";
@@ -17,53 +17,53 @@ const $q = useQuasar();
 const mixin = useCounterMixin();
 const router = useRouter();
 const {
-  dialogConfirm,
-  date2Thai,
-  arabicNumberToText,
-  calculateDurationYmd,
-  dateToISO,
-  fails,
-  success,
-  messageError,
+	dialogRemove,
+	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 */
@@ -86,95 +86,95 @@ 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 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();
-    if (formDataFollowSpouse.leaveDocument.length > 0) {
-      formDataFollowSpouse.leaveDocument.forEach((file: File) => {
-        formData.append("leaveDocument", file);
-      });
-    }
-    // formData.append("leaveDocument", formDataFollowSpouse.leaveDocument);
-    formData.append("type", formDataFollowSpouse.type); //
-    formData.append(
-      "leaveStartDate",
-      dateToISO(new Date(formDataFollowSpouse.leaveStartDate))
-    ); //
-    formData.append(
-      "leaveEndDate",
-      dateToISO(new Date(formDataFollowSpouse.leaveEndDate))
-    ); //
-    formData.append(
-      "coupleDayStartDateHistory",
-      dateToISO(new Date(formDataFollowSpouse.coupleDayStartDateHistory))
-    ); //
-    formData.append(
-      "coupleDayEndDateHistory",
-      dateToISO(new Date(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);
-  }
+	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 (formDataFollowSpouse.leaveDocument.length > 0) {
+			formDataFollowSpouse.leaveDocument.forEach((file: File) => {
+				formData.append("leaveDocument", file);
+			});
+		}
+		// formData.append("leaveDocument", formDataFollowSpouse.leaveDocument);
+		formData.append("type", formDataFollowSpouse.type); //
+		formData.append(
+			"leaveStartDate",
+			dateToISO(new Date(formDataFollowSpouse.leaveStartDate))
+		); //
+		formData.append(
+			"leaveEndDate",
+			dateToISO(new Date(formDataFollowSpouse.leaveEndDate))
+		); //
+		formData.append(
+			"coupleDayStartDateHistory",
+			dateToISO(new Date(formDataFollowSpouse.coupleDayStartDateHistory))
+		); //
+		formData.append(
+			"coupleDayEndDateHistory",
+			dateToISO(new Date(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);
+	}
 }
 
 /**
@@ -183,611 +183,644 @@ function onValidate() {
  */
 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;
-    })
-    .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);
+		});
 }
 
+//เเจ้งเตือนลบข้อมูล
+const clickDelete = (id: string) => {
+	dialogRemove($q, () => onClickDelete(id));
+};
+
+/**
+ * function ลบรายการ
+ * @param id
+ */
+const onClickDelete = async (id: string) => {
+	await http
+		.delete(config.API.leaveUserId(id))
+		.then(async (res) => {
+			console.log("delete");
+		})
+		.catch((err) => {
+			messageError($q, err);
+		});
+};
+
 /**
  * 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 dateEndInputStyle = computed(() => {
-  return !isLeave.value ? "input-alert" : "";
+	return !isLeave.value ? "input-alert" : "";
 });
 
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 const leaveDocumentList = ref<any>();
 const statusCheck = ref<any>("");
-/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 watch(props.data, 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;
-    formDataFollowSpouse.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;
+		formDataFollowSpouse.leaveDocument = [];
+	}
 });
 
+/**Hook */
 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="`${'ลาถึงวันที่'}`"
-            >
-              <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>
+				<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-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>
+				<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>
 
-        <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-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
-          readonly
-          hide-bottom-space
-          bg-color="white"
-          ref="coupleDayTotalHistoryRef"
-          for="coupleDayTotalHistoryRef"
-          v-model="formDataFollowSpouse.coupleDayTotalHistory"
-          label="เป็นเวลา"
-        />
+				<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
-          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
+					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="data">
-          <div class="col-12 col-md-12 col-sm-12">
-            <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
-                        :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-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="data">
+					<div class="col-12 col-md-12 col-sm-12">
+						<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
+												:href="document"
+												target="_blank"
+												outline
+												color="blue"
+												label="ดาวน์โหลด"
+												size="12px"
+												class="q-mr-md"
+											>
+												<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+											</q-btn>
+											<q-btn
+												@click="clickDelete"
+												target="_blank"
+												outline
+												color="red"
+												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>
-              <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 37e73fe..c1fdce3 100644
--- a/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
@@ -14,14 +14,14 @@ const dataStore = useLeaveStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const {
-  date2Thai,
-  dialogConfirm,
-  fails,
-  dateToISO,
-  success,
-  messageError,
-  showLoader,
-  hideLoader,
+	date2Thai,
+	dialogRemove,
+	fails,
+	dateToISO,
+	success,
+	messageError,
+	showLoader,
+	hideLoader,
 } = mixin;
 const router = useRouter();
 const edit = ref<boolean>(true);
@@ -35,80 +35,80 @@ 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.length > 0) {
-      formDataRehabilitation.leaveDocument.forEach((file: File) => {
-        formData.append("leaveDocument", file);
-      });
-      // formData.append("leaveDocument", formDataRehabilitation.leaveDocument)
-    }
+		if (formDataRehabilitation.leaveDocument.length > 0) {
+			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(new Date(formDataRehabilitation.leaveStartDate))
-    ); //
-    formData.append(
-      "leaveEndDate",
-      dateToISO(new Date(formDataRehabilitation.leaveEndDate))
-    );
-    formData.append("leaveWrote", formDataRehabilitation.leaveWrote); //
-    formData.append("leaveDetail", formDataRehabilitation.leaveDetail); //
-    props.onSubmit(formData, isLeave.value);
-  }
+		formData.append("type", formDataRehabilitation.type); //
+		formData.append(
+			"leaveStartDate",
+			dateToISO(new Date(formDataRehabilitation.leaveStartDate))
+		); //
+		formData.append(
+			"leaveEndDate",
+			dateToISO(new Date(formDataRehabilitation.leaveEndDate))
+		);
+		formData.append("leaveWrote", formDataRehabilitation.leaveWrote); //
+		formData.append("leaveDetail", formDataRehabilitation.leaveDetail); //
+		props.onSubmit(formData, isLeave.value);
+	}
 }
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
@@ -116,9 +116,9 @@ 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);
+	});
 };
 
 /**
@@ -127,354 +127,387 @@ const fileUploadDoc = async (files: any) => {
  */
 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;
-    })
-    .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 clickDelete = (id: string) => {
+	dialogRemove($q, () => onClickDelete(id));
+};
+
+/**
+ * function ลบรายการ
+ * @param id
+ */
+const onClickDelete = async (id: string) => {
+	await http
+		.delete(config.API.leaveUserId(id))
+		.then(async (res) => {
+			console.log("delete");
+		})
+		.catch((err) => {
+			messageError($q, err);
+		});
+};
+
+/** แจ้งเมื่อวันลาไม่ถูกต้อง */
 const dateEndInputStyle = computed(() => {
-  return !isLeave.value ? "input-alert" : "";
+	return !isLeave.value ? "input-alert" : "";
 });
 
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 const leaveDocumentList = ref<any>();
 const leaveDraftDocument = ref<string>();
 const statusCheck = ref<any>("");
-/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 watch(props.data, () => {
-  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;
-    leaveDraftDocument.value = props.data.leaveDraftDocument;
-    leaveDocumentList.value = props.data.leaveDocument;
-    formDataRehabilitation.leaveDraftDocument = null;
-    formDataRehabilitation.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;
+		leaveDraftDocument.value = props.data.leaveDraftDocument;
+		leaveDocumentList.value = props.data.leaveDocument;
+		formDataRehabilitation.leaveDraftDocument = null;
+		formDataRehabilitation.leaveDocument = [];
+		statusCheck.value = props.data.status;
+	}
 });
 
+/**Hook */
 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
-          :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>
+				<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>
 
-              <template v-slot:hint>
-                <span style="color: red">
-                  {{ !isLeave ? "จำนวนวันลาเกินที่กำหนด" : "" }}
-                </span>
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
+							<template v-slot:hint>
+								<span style="color: red">
+									{{ !isLeave ? "จำนวนวันลาเกินที่กำหนด" : "" }}
+								</span>
+							</template>
+						</q-input>
+					</template>
+				</datepicker>
 
-        <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="รายละเอียด"
-        />
+				<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'">
-          <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 q-mt-sm" v-if="data">
-            <div class="col-12 col-md-12 col-sm-12">
-              <q-card>
-                <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
-                          :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>
-    </q-card>
+				<div class="col-12" v-if="statusCheck != 'NEW'">
+					<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 q-mt-sm" v-if="data">
+						<div class="col-12 col-md-12 col-sm-12">
+							<q-card>
+								<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
+													:href="document"
+													target="_blank"
+													outline
+													color="blue"
+													label="ดาวน์โหลด"
+													size="12px"
+													class="q-mr-md"
+												>
+													<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+												</q-btn>
+												<q-btn
+													@click="clickDelete"
+													target="_blank"
+													outline
+													color="red"
+													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>
+		</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">
-              <q-btn
-                icon="visibility"
-                color="blue"
-                label="ดาวน์โหลดไฟล์"
-                :href="leaveDraftDocument"
-                target="_blank"
-              />
-            </div>
-          </div>
-        </div>
-      </q-card>
-    </div>
+					<div v-if="leaveDraftDocument" class="col-sm-2 q-my-sm">
+						<div class="column q-mx-xs">
+							<q-btn
+								icon="visibility"
+								color="blue"
+								label="ดาวน์โหลดไฟล์"
+								:href="leaveDraftDocument"
+								target="_blank"
+							/>
+						</div>
+					</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/Form.vue b/src/modules/05_leave/components/FormLeave/Form.vue
index 6e62e10..ef4ffc0 100644
--- a/src/modules/05_leave/components/FormLeave/Form.vue
+++ b/src/modules/05_leave/components/FormLeave/Form.vue
@@ -5,167 +5,169 @@ import { useQuasar } from "quasar";
 import type { FormData } from "@/modules/05_leave/interface/request/AddAbsence";
 import { useLeaveStore } from "@/modules/05_leave/store";
 
+/**ตัวแปรที่ใช้ */
 const mixin = useCounterMixin();
 const dataStore = useLeaveStore();
 const { date2Thai } = mixin;
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
-  model: {
-    type: String,
-    default: "",
-  },
+	model: {
+		type: String,
+		default: "",
+	},
 });
 
 /** ข้อมูล v-model ของฟอร์ม */
 const formData = reactive<FormData>({
-  dateStart: new Date(),
-  subject: "เรื่อง",
-  who: "เรียนผู้ใด",
-  requestName: "ชื่อผู้ยื่น",
-  position: "ตำแหน่ง",
-  level: "ระดับ",
-  ocRequest: "สังกัด",
-  leaveabsentDaySummon: "2",
-  leaveUse: "1",
-  leaveRemaining: "1",
+	dateStart: new Date(),
+	subject: "เรื่อง",
+	who: "เรียนผู้ใด",
+	requestName: "ชื่อผู้ยื่น",
+	position: "ตำแหน่ง",
+	level: "ระดับ",
+	ocRequest: "สังกัด",
+	leaveabsentDaySummon: "2",
+	leaveUse: "1",
+	leaveRemaining: "1",
 });
 
+/**Hook */
 onMounted(() => {
-  dataStore.typeLeave = "";
+	dataStore.typeLeave = "";
 });
 </script>
 
 <template>
-  <q-card bordered class="q-pa-md bg-grey-1">
-    <div class="col-12 row q-pa-sm q-col-gutter-sm">
-      <datepicker
-        class="col-12 col-sm-4"
-        menu-class-name="modalfix"
-        v-model="dataStore.dateSendLeave"
-        :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
-            dense
-            bg-color="white"
-            hide-bottom-space
-            readonly
-            class="full-width"
-            :model-value="
-              dataStore.dateSendLeave != null
-                ? date2Thai(dataStore.dateSendLeave)
-                : null
-            "
-            :label="`${'วันที่ยื่นใบลา'}`"
-            :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ยื่นใบลา'}`]"
-          >
-            <template v-slot:prepend>
-              <q-icon
-                name="event"
-                class="cursor-pointer inputblack"
-                style="color: var(--black)"
-              >
-              </q-icon>
-            </template>
-          </q-input>
-        </template>
-      </datepicker>
-      <q-input
-        class="col-12 col-sm-4"
-        dense
-        bg-color="white"
-        outlined
-        readonly
-        v-model="dataStore.typeLeave"
-        label="เรื่อง"
-      />
-      <q-input
-        class="col-12 col-sm-4"
-        dense
-        outlined
-        readonly
-        bg-color="white"
-        v-model="dataStore.dear"
-        label="เรียน"
-      />
-      <q-input
-        class="col-12 col-sm-3"
-        dense
-        outlined
-        readonly
-        bg-color="white"
-        v-model="dataStore.fullName"
-        label="ชื่อผู้ยื่นขอ"
-      />
-      <q-input
-        class="col-12 col-sm-3"
-        dense
-        outlined
-        readonly
-        bg-color="white"
-        v-model="dataStore.positionName"
-        label="ตำแหน่งผู้ยื่นขอ"
-      />
-      <q-input
-        class="col-12 col-sm-3"
-        dense
-        outlined
-        readonly
-        bg-color="white"
-        v-model="dataStore.positionLevelName"
-        label="ระดับผู้ยื่นขอ"
-      />
-      <q-input
-        class="col-12 col-sm-3"
-        dense
-        outlined
-        readonly
-        bg-color="white"
-        v-model="dataStore.organizationName"
-        label="สังกัดผู้ยื่นขอ"
-      />
-      <q-input
-        v-if="props.model === 'LV-005'"
-        class="col-12 col-sm-4"
-        dense
-        outlined
-        readonly
-        bg-color="white"
-        v-model="dataStore.leaveLimit"
-        label="จำนวนสิทธิ์การลาที่ได้รับ"
-      />
-      <q-input
-        class="col-12 col-sm-4"
-        dense
-        outlined
-        readonly
-        bg-color="white"
-        v-model="dataStore.leaveTotal"
-        label="จำนวนสิทธิ์การลาที่ใช้ไป"
-      />
-      <q-input
-        v-if="props.model === 'LV-005'"
-        class="col-12 col-sm-4"
-        dense
-        outlined
-        readonly
-        bg-color="white"
-        v-model="dataStore.leaveRemain"
-        label="จำนวนสิทธิ์การลาคงเหลือ"
-      />
-    </div>
-  </q-card>
+	<q-card bordered class="q-pa-md bg-grey-1">
+		<div class="col-12 row q-pa-sm q-col-gutter-sm">
+			<datepicker
+				class="col-12 col-sm-4"
+				menu-class-name="modalfix"
+				v-model="dataStore.dateSendLeave"
+				: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
+						dense
+						bg-color="white"
+						hide-bottom-space
+						readonly
+						class="full-width"
+						:model-value="
+							dataStore.dateSendLeave != null
+								? date2Thai(dataStore.dateSendLeave)
+								: null
+						"
+						:label="`${'วันที่ยื่นใบลา'}`"
+						:rules="[(val) => !!val || `${'กรุณาเลือกวันที่ยื่นใบลา'}`]"
+					>
+						<template v-slot:prepend>
+							<q-icon
+								name="event"
+								class="cursor-pointer inputblack"
+								style="color: var(--black)"
+							>
+							</q-icon>
+						</template>
+					</q-input>
+				</template>
+			</datepicker>
+			<q-input
+				class="col-12 col-sm-4"
+				dense
+				bg-color="white"
+				outlined
+				readonly
+				v-model="dataStore.typeLeave"
+				label="เรื่อง"
+			/>
+			<q-input
+				class="col-12 col-sm-4"
+				dense
+				outlined
+				readonly
+				bg-color="white"
+				v-model="dataStore.dear"
+				label="เรียน"
+			/>
+			<q-input
+				class="col-12 col-sm-3"
+				dense
+				outlined
+				readonly
+				bg-color="white"
+				v-model="dataStore.fullName"
+				label="ชื่อผู้ยื่นขอ"
+			/>
+			<q-input
+				class="col-12 col-sm-3"
+				dense
+				outlined
+				readonly
+				bg-color="white"
+				v-model="dataStore.positionName"
+				label="ตำแหน่งผู้ยื่นขอ"
+			/>
+			<q-input
+				class="col-12 col-sm-3"
+				dense
+				outlined
+				readonly
+				bg-color="white"
+				v-model="dataStore.positionLevelName"
+				label="ระดับผู้ยื่นขอ"
+			/>
+			<q-input
+				class="col-12 col-sm-3"
+				dense
+				outlined
+				readonly
+				bg-color="white"
+				v-model="dataStore.organizationName"
+				label="สังกัดผู้ยื่นขอ"
+			/>
+			<q-input
+				v-if="props.model === 'LV-005'"
+				class="col-12 col-sm-4"
+				dense
+				outlined
+				readonly
+				bg-color="white"
+				v-model="dataStore.leaveLimit"
+				label="จำนวนสิทธิ์การลาที่ได้รับ"
+			/>
+			<q-input
+				class="col-12 col-sm-4"
+				dense
+				outlined
+				readonly
+				bg-color="white"
+				v-model="dataStore.leaveTotal"
+				label="จำนวนสิทธิ์การลาที่ใช้ไป"
+			/>
+			<q-input
+				v-if="props.model === 'LV-005'"
+				class="col-12 col-sm-4"
+				dense
+				outlined
+				readonly
+				bg-color="white"
+				v-model="dataStore.leaveRemain"
+				label="จำนวนสิทธิ์การลาคงเหลือ"
+			/>
+		</div>
+	</q-card>
 </template>
diff --git a/src/modules/05_leave/components/ListView.vue b/src/modules/05_leave/components/ListView.vue
index 6943c82..0bb2626 100644
--- a/src/modules/05_leave/components/ListView.vue
+++ b/src/modules/05_leave/components/ListView.vue
@@ -16,13 +16,24 @@ import Table from "@/modules/05_leave/components/Table.vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useLeaveStore } from "@/modules/05_leave/store";
 
+/**ตัวแปรที่ใช้ */
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, monthYear2Thai } =
-  mixin;
+const {
+	showLoader,
+	hideLoader,
+	messageError,
+	date2Thai,
+	monthYear2Thai,
+	dialogRemove,
+} = mixin;
 const LeaveData = useLeaveStore();
 const router = useRouter();
 const route = useRoute();
 const $q = useQuasar();
+const leaveType = ref<LeaveType[]>();
+const modal = ref<boolean>(false);
+const leaveId = ref<string>("");
+const leaveStatus = ref<string>("");
 
 /** filter */
 const year = ref<number>(new Date().getFullYear());
@@ -37,66 +48,85 @@ const pageSize = ref<number>(10);
 
 /** function เรียกข้อมูลการลา*/
 async function fetchDataTable() {
-  showLoader();
-  const body = {
-    year: year.value, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
-    type: type.value, //*Id ประเภทการลา
-    status: status.value, //*สถานะการของลา
-    page: page.value.toString(), //*หน้า
-    pageSize: pageSize.value.toString(), //*จำนวนแถวต่อหน้า
-    keyword: filter.value, //keyword ค้นหา
-  };
-  await http
-    .post(config.API.leaveTableList(), body)
-    .then((res) => {
-      const data = res.data.result.data;
-      LeaveData.fetchListLeave(data);
-      maxPage.value = Math.ceil(res.data.result.total / pageSize.value);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+	showLoader();
+	const body = {
+		year: year.value, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
+		type: type.value, //*Id ประเภทการลา
+		status: status.value, //*สถานะการของลา
+		page: page.value.toString(), //*หน้า
+		pageSize: pageSize.value.toString(), //*จำนวนแถวต่อหน้า
+		keyword: filter.value, //keyword ค้นหา
+	};
+	await http
+		.post(config.API.leaveTableList(), body)
+		.then((res) => {
+			const data = res.data.result.data;
+			LeaveData.fetchListLeave(data);
+			maxPage.value = Math.ceil(res.data.result.total / pageSize.value);
+		})
+		.catch((err) => {
+			messageError($q, err);
+		})
+		.finally(() => {
+			hideLoader();
+		});
 }
 
-const leaveType = ref<LeaveType[]>();
 /** function เรียกประเภทการลา */
 async function fectOptionType() {
-  await http
-    .get(config.API.leaveType())
-    .then(async (res) => {
-      leaveType.value = res.data.result;
-      LeaveData.fetchLeaveType(res.data.result);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
+	await http
+		.get(config.API.leaveType())
+		.then(async (res) => {
+			leaveType.value = res.data.result;
+			LeaveData.fetchLeaveType(res.data.result);
+		})
+		.catch((err) => {
+			messageError($q, err);
+		});
 }
 
-const modal = ref<boolean>(false);
-const leaveId = ref<string>("");
-const leaveStatus = ref<string>("");
-
 /**
  * function openPopupDateail
  * @param id การลา
  * @param status การลา
  */
 const onClickView = async (id: string, status: string) => {
-  modal.value = true;
-  leaveId.value = id;
-  leaveStatus.value = status;
+	modal.value = true;
+	leaveId.value = id;
+	leaveStatus.value = status;
 };
 
+/**
+ * function ไปหน้า edit
+ * @param id
+ */
 const onClickEdit = async (id: string) => {
-  router.push(`/leave/edit/${id}`);
+	router.push(`/leave/edit/${id}`);
+};
+
+//เเจ้งเตือนลบข้อมูล
+const clickDelete = (id: string) => {
+	dialogRemove($q, () => onClickDelete(id));
+};
+
+/**
+ * function ลบรายการ
+ * @param id
+ */
+const onClickDelete = async (id: string) => {
+	await http
+		.delete(config.API.leaveUserId(id))
+		.then(async (res) => {
+			console.log("delete");
+		})
+		.catch((err) => {
+			messageError($q, err);
+		});
 };
 
 /** function closePopup*/
 async function onClickClose() {
-  modal.value = false;
+	modal.value = false;
 }
 
 /**
@@ -107,13 +137,13 @@ async function onClickClose() {
  * @param k คำค้นหา
  */
 async function updateFilterTable(y: number, t: string, s: string, k: string) {
-  if (t && s) {
-    year.value = await y;
-    type.value = await t;
-    status.value = await s;
-    filter.value = await k;
-    await fetchDataTable();
-  }
+	if (t && s) {
+		year.value = await y;
+		type.value = await t;
+		status.value = await s;
+		filter.value = await k;
+		await fetchDataTable();
+	}
 }
 
 /**
@@ -122,164 +152,174 @@ async function updateFilterTable(y: number, t: string, s: string, k: string) {
  * @param ps แถวต่อหน้า
  */
 async function updatePagination(p: number, ps: number) {
-  (page.value = await p), (pageSize.value = await ps);
-  await fetchDataTable();
+	(page.value = await p), (pageSize.value = await ps);
+	await fetchDataTable();
 }
 
 /**
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
 onMounted(async () => {
-  await fetchDataTable();
-  await fectOptionType();
+	await fetchDataTable();
+	await fectOptionType();
 });
 </script>
 <template>
-  <Table
-    :rows="LeaveData.rows"
-    :columns="LeaveData.columns"
-    :visible-columns="LeaveData.visibleColumns"
-    v-model:inputfilter="filter"
-    v-model:inputvisible="LeaveData.visibleColumns"
-    :inputShow="true"
-    :grid="$q.screen.gt.xs ? false : true"
-    @update:filter="updateFilterTable"
-    @update:Pagination="updatePagination"
-    :maxPage="maxPage"
-    :pageSize="pageSize"
-    :leaveType="leaveType"
-  >
-    <template #columns="props">
-      <q-tr :props="props" class="cursor-pointer">
-        <q-td
-          key="no"
-          :props="props"
-          @click="onClickView(props.row.id, props.row.status)"
-        >
-          {{ (page - 1) * pageSize + props.rowIndex + 1 }}
-        </q-td>
-        <q-td
-          key="leaveTypeName"
-          :props="props"
-          @click="onClickView(props.row.id, props.row.status)"
-        >
-          {{ props.row.leaveTypeName }}
-        </q-td>
-        <q-td
-          key="dateLeave"
-          :props="props"
-          @click="onClickView(props.row.id, props.row.status)"
-        >
-          {{ props.row.dateLeave }}
-        </q-td>
-        <q-td
-          key="dateSendLeave"
-          :props="props"
-          @click="onClickView(props.row.id, props.row.status)"
-        >
-          {{ props.row.dateSendLeave }}
-        </q-td>
+	<Table
+		:rows="LeaveData.rows"
+		:columns="LeaveData.columns"
+		:visible-columns="LeaveData.visibleColumns"
+		v-model:inputfilter="filter"
+		v-model:inputvisible="LeaveData.visibleColumns"
+		:inputShow="true"
+		:grid="$q.screen.gt.xs ? false : true"
+		@update:filter="updateFilterTable"
+		@update:Pagination="updatePagination"
+		:maxPage="maxPage"
+		:pageSize="pageSize"
+		:leaveType="leaveType"
+	>
+		<template #columns="props">
+			<q-tr :props="props" class="cursor-pointer">
+				<q-td
+					key="no"
+					:props="props"
+					@click="onClickView(props.row.id, props.row.status)"
+				>
+					{{ (page - 1) * pageSize + props.rowIndex + 1 }}
+				</q-td>
+				<q-td
+					key="leaveTypeName"
+					:props="props"
+					@click="onClickView(props.row.id, props.row.status)"
+				>
+					{{ props.row.leaveTypeName }}
+				</q-td>
+				<q-td
+					key="dateLeave"
+					:props="props"
+					@click="onClickView(props.row.id, props.row.status)"
+				>
+					{{ props.row.dateLeave }}
+				</q-td>
+				<q-td
+					key="dateSendLeave"
+					:props="props"
+					@click="onClickView(props.row.id, props.row.status)"
+				>
+					{{ props.row.dateSendLeave }}
+				</q-td>
 
-        <q-td key="status" :props="props">
-          <div class="col-12 row items-center">
-            <div @click="onClickView(props.row.id, props.row.status)">
-              <q-icon
-                v-if="props.row.status == 'DRAFT'"
-                size="10px"
-                color="light-grey"
-                name="mdi-circle"
-                class="q-mr-sm"
-              />
-              <q-icon
-                v-if="props.row.status == 'APPROVE'"
-                size="10px"
-                color="light-green"
-                name="mdi-circle"
-                class="q-mr-sm"
-              />
-              <q-icon
-                v-else-if="props.row.status == 'REJECT'"
-                size="10px"
-                color="red-6"
-                name="mdi-circle"
-                class="q-mr-sm"
-              />
-              <q-icon
-                v-else-if="props.row.status == 'PENDING'"
-                size="10px"
-                color="light-blue-14"
-                name="mdi-circle"
-                class="q-mr-sm"
-              />
-              <q-icon
-                v-else-if="props.row.status == 'NEW'"
-                size="10px"
-                color="orange"
-                name="mdi-circle"
-                class="q-mr-sm"
-              />
-              <q-icon
-                v-if="props.row.status == 'DELETE'"
-                size="10px"
-                color="grey-10"
-                name="mdi-circle"
-                class="q-mr-sm"
-              />
+				<q-td key="status" :props="props">
+					<div class="col-12 row items-center">
+						<div @click="onClickView(props.row.id, props.row.status)">
+							<q-icon
+								v-if="props.row.status == 'DRAFT'"
+								size="10px"
+								color="light-grey"
+								name="mdi-circle"
+								class="q-mr-sm"
+							/>
+							<q-icon
+								v-if="props.row.status == 'APPROVE'"
+								size="10px"
+								color="light-green"
+								name="mdi-circle"
+								class="q-mr-sm"
+							/>
+							<q-icon
+								v-else-if="props.row.status == 'REJECT'"
+								size="10px"
+								color="red-6"
+								name="mdi-circle"
+								class="q-mr-sm"
+							/>
+							<q-icon
+								v-else-if="props.row.status == 'PENDING'"
+								size="10px"
+								color="light-blue-14"
+								name="mdi-circle"
+								class="q-mr-sm"
+							/>
+							<q-icon
+								v-else-if="props.row.status == 'NEW'"
+								size="10px"
+								color="orange"
+								name="mdi-circle"
+								class="q-mr-sm"
+							/>
+							<q-icon
+								v-if="props.row.status == 'DELETE'"
+								size="10px"
+								color="grey-10"
+								name="mdi-circle"
+								class="q-mr-sm"
+							/>
 
-              <span class="q-pr-md">{{ props.row.statusConvert }}</span>
-            </div>
-            <q-space />
+							<span class="q-pr-md">{{ props.row.statusConvert }}</span>
+						</div>
+						<q-space />
 
-            <q-btn
-              v-if="
-                props.row.status != 'DELETE' &&
-                props.row.status != 'REJECT' &&
-                props.row.status != 'CANCEL'
-              "
-              flat
-              icon="mdi-dots-vertical"
-              color="grey-8"
-              for="#cancel"
-              dense
-              round
-              unelevated
-            >
-              <q-menu>
-                <q-list>
-                  <q-item
-                    clickable
-                    v-close-popup
-                    @click="onClickView(props.row.id, 'CANCEL')"
-                  >
-                    <q-item-section>
-                      <q-item-label>ขอยกเลิก</q-item-label>
-                    </q-item-section>
-                  </q-item>
-                  <q-item
-                    v-if="props.row.status == 'DRAFT'"
-                    clickable
-                    v-close-popup
-                    @click="onClickEdit(props.row.id)"
-                  >
-                    <q-item-section>
-                      <q-item-label>แก้ไข</q-item-label>
-                    </q-item-section>
-                  </q-item>
-                </q-list>
-              </q-menu>
-            </q-btn>
-          </div>
-        </q-td>
-      </q-tr>
-    </template>
-  </Table>
+						<q-btn
+							v-if="
+								props.row.status != 'DELETE' &&
+								props.row.status != 'REJECT' &&
+								props.row.status != 'CANCEL'
+							"
+							flat
+							icon="mdi-dots-vertical"
+							color="grey-8"
+							for="#cancel"
+							dense
+							round
+							unelevated
+						>
+							<q-menu>
+								<q-list>
+									<q-item
+										clickable
+										v-close-popup
+										@click="onClickView(props.row.id, 'CANCEL')"
+									>
+										<q-item-section>
+											<q-item-label>ขอยกเลิก</q-item-label>
+										</q-item-section>
+									</q-item>
+									<q-item
+										v-if="props.row.status == 'DRAFT'"
+										clickable
+										v-close-popup
+										@click="onClickEdit(props.row.id)"
+									>
+										<q-item-section>
+											<q-item-label>แก้ไข</q-item-label>
+										</q-item-section>
+									</q-item>
+									<q-item
+										v-if="props.row.status == 'DRAFT'"
+										clickable
+										v-close-popup
+										@click="clickDelete(props.row.id)"
+									>
+										<q-item-section>
+											<q-item-label>ลบรายการการลา</q-item-label>
+										</q-item-section>
+									</q-item>
+								</q-list>
+							</q-menu>
+						</q-btn>
+					</div>
+				</q-td>
+			</q-tr>
+		</template>
+	</Table>
 
-  <DialogDetail
-    :modal="modal"
-    :leaveId="leaveId"
-    :leaveStatus="leaveStatus"
-    :onClickClose="onClickClose"
-    :leaveType="leaveType"
-    :fetchDataTable="fetchDataTable"
-  />
+	<DialogDetail
+		:modal="modal"
+		:leaveId="leaveId"
+		:leaveStatus="leaveStatus"
+		:onClickClose="onClickClose"
+		:leaveType="leaveType"
+		:fetchDataTable="fetchDataTable"
+	/>
 </template>
diff --git a/src/modules/05_leave/components/formDetail/01_SickForm.vue b/src/modules/05_leave/components/formDetail/01_SickForm.vue
index cdf2077..5d25c4d 100644
--- a/src/modules/05_leave/components/formDetail/01_SickForm.vue
+++ b/src/modules/05_leave/components/formDetail/01_SickForm.vue
@@ -1,97 +1,106 @@
 <script setup lang="ts">
+/**
+ * รับ prop จาก component
+ */
 const props = defineProps({
-  data: {
-    type: Object,
-    required: true,
-  },
+	data: {
+		type: Object,
+		required: true,
+	},
 });
 </script>
 
 <template>
-  <q-card-section>
-    <div class="q-pa-md q-gutter-md">
-      <div class="row">
-        <div class="col text-grey-8">วันที่ยื่นใบลา</div>
-        <div class="col">{{ props.data.dateSendLeave }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เรื่อง</div>
-        <div class="col">{{ props.data.leaveTypeName }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เขียนที่</div>
-        <div class="col">{{ props.data.leaveWrote }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
-        <div class="col">{{ props.data.leaveDateStart }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลาถึงวันที่</div>
-        <div class="col">{{ props.data.leaveDateEnd }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">จำนวนวันที่ลา</div>
-        <div class="col">
-          {{ props.data.leaveRange == 'ALL' ? props.data.leaveTotal + ' วัน' : props.data.leaveRange == 'MORNING' ? 'ลาครึ่งวันเช้า (0.5)': 'ลาครึ่งวันบ่าย (0.5)' }}
-        </div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8"></div>
-        <div class="col">{{ props.data.leaveTypeDay }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">
-          ลาครั้งสุดท้ายในประเภทนั้น ๆ เมื่อวันที่
-        </div>
-        <div class="col">{{ props.data.leaveLastStart }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
-        <div class="col">{{ props.data.leaveNumber }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
-        <div class="col">{{ props.data.leaveAddress }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">รายละเอียด</div>
-        <div class="col">
-          {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
-        </div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เอกสารแนบ</div>
-        <div class="col">
-          <div
-            v-if="
-              props.data.leaveDocument && props.data.leaveDocument.length > 0
-            "
-          >
-            <div
-              v-for="(document, index) in props.data.leaveDocument"
-              :key="index"
-              :style="{ marginBottom: '10px' }"
-            >
-              <div>
-                <q-btn
-                  :href="document"
-                  target="_blank"
-                  outline
-                  color="blue"
-                  :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
-                  size="12px"
-                >
-                  <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
-                </q-btn>
-              </div>
-            </div>
-          </div>
-          <div v-else>-</div>
-        </div>
-      </div>
-    </div>
-  </q-card-section>
+	<q-card-section>
+		<div class="q-pa-md q-gutter-md">
+			<div class="row">
+				<div class="col text-grey-8">วันที่ยื่นใบลา</div>
+				<div class="col">{{ props.data.dateSendLeave }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เรื่อง</div>
+				<div class="col">{{ props.data.leaveTypeName }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เขียนที่</div>
+				<div class="col">{{ props.data.leaveWrote }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
+				<div class="col">{{ props.data.leaveDateStart }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาถึงวันที่</div>
+				<div class="col">{{ props.data.leaveDateEnd }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">จำนวนวันที่ลา</div>
+				<div class="col">
+					{{
+						props.data.leaveRange == "ALL"
+							? props.data.leaveTotal + " วัน"
+							: props.data.leaveRange == "MORNING"
+							? "ลาครึ่งวันเช้า (0.5)"
+							: "ลาครึ่งวันบ่าย (0.5)"
+					}}
+				</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8"></div>
+				<div class="col">{{ props.data.leaveTypeDay }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">
+					ลาครั้งสุดท้ายในประเภทนั้น ๆ เมื่อวันที่
+				</div>
+				<div class="col">{{ props.data.leaveLastStart }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
+				<div class="col">{{ props.data.leaveNumber }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
+				<div class="col">{{ props.data.leaveAddress }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">รายละเอียด</div>
+				<div class="col">
+					{{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
+				</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เอกสารแนบ</div>
+				<div class="col">
+					<div
+						v-if="
+							props.data.leaveDocument && props.data.leaveDocument.length > 0
+						"
+					>
+						<div
+							v-for="(document, index) in props.data.leaveDocument"
+							:key="index"
+							:style="{ marginBottom: '10px' }"
+						>
+							<div>
+								<q-btn
+									:href="document"
+									target="_blank"
+									outline
+									color="blue"
+									:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
+									size="12px"
+								>
+									<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
+								</q-btn>
+							</div>
+						</div>
+					</div>
+					<div v-else>-</div>
+				</div>
+			</div>
+		</div>
+	</q-card-section>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/05_leave/components/formDetail/04_HelpWifeBirthForm.vue b/src/modules/05_leave/components/formDetail/04_HelpWifeBirthForm.vue
index 596511e..d232a8a 100644
--- a/src/modules/05_leave/components/formDetail/04_HelpWifeBirthForm.vue
+++ b/src/modules/05_leave/components/formDetail/04_HelpWifeBirthForm.vue
@@ -1,94 +1,97 @@
 <script setup lang="ts">
+/**
+ * รับ prop จาก component
+ */
 const props = defineProps({
-  data: {
-    type: Object,
-    required: true,
-  },
+	data: {
+		type: Object,
+		required: true,
+	},
 });
 </script>
 <template>
-  <q-card-section>
-    <div class="q-pa-md q-gutter-md">
-      <div class="row">
-        <div class="col text-grey-8">วันที่ยื่นใบลา</div>
-        <div class="col">{{ props.data.dateSendLeave }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เรื่อง</div>
-        <div class="col">{{ props.data.leaveTypeName }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เขียนที่</div>
-        <div class="col">{{ props.data.leaveWrote }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
-        <div class="col">{{ props.data.leaveDateStart }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลาถึงวันที่</div>
-        <div class="col">{{ props.data.leaveDateEnd }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">จำนวนวันที่ลา</div>
-        <div class="col">
-          {{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}
-        </div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ชื่อภรรยา</div>
-        <div class="col">{{ props.data.wifeDayName }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">วันที่คลอด</div>
-        <div class="col">{{ props.data.wifeDayDateBorn }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
-        <div class="col">{{ props.data.leaveNumber }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
-        <div class="col">{{ props.data.leaveAddress }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">รายละเอียด</div>
-        <div class="col">
-          {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
-        </div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เอกสารแนบ</div>
-        <div class="col">
-          <div
-            v-if="
-              props.data.leaveDocument && props.data.leaveDocument.length > 0
-            "
-          >
-            <div
-              v-for="(document, index) in props.data.leaveDocument"
-              :key="index"
-              :style="{ marginBottom: '11px' }"
-            >
-              <div>
-                <q-btn
-                  :href="document"
-                  target="_blank"
-                  outline
-                  color="blue"
-                  :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
-                  size="12px"
-                >
-                  <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
-                </q-btn>
-              </div>
-            </div>
-          </div>
-          <div v-else>-</div>
-        </div>
-      </div>
-    </div>
-  </q-card-section>
+	<q-card-section>
+		<div class="q-pa-md q-gutter-md">
+			<div class="row">
+				<div class="col text-grey-8">วันที่ยื่นใบลา</div>
+				<div class="col">{{ props.data.dateSendLeave }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เรื่อง</div>
+				<div class="col">{{ props.data.leaveTypeName }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เขียนที่</div>
+				<div class="col">{{ props.data.leaveWrote }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
+				<div class="col">{{ props.data.leaveDateStart }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาถึงวันที่</div>
+				<div class="col">{{ props.data.leaveDateEnd }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">จำนวนวันที่ลา</div>
+				<div class="col">
+					{{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}
+				</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ชื่อภรรยา</div>
+				<div class="col">{{ props.data.wifeDayName }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">วันที่คลอด</div>
+				<div class="col">{{ props.data.wifeDayDateBorn }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
+				<div class="col">{{ props.data.leaveNumber }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
+				<div class="col">{{ props.data.leaveAddress }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">รายละเอียด</div>
+				<div class="col">
+					{{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
+				</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เอกสารแนบ</div>
+				<div class="col">
+					<div
+						v-if="
+							props.data.leaveDocument && props.data.leaveDocument.length > 0
+						"
+					>
+						<div
+							v-for="(document, index) in props.data.leaveDocument"
+							:key="index"
+							:style="{ marginBottom: '11px' }"
+						>
+							<div>
+								<q-btn
+									:href="document"
+									target="_blank"
+									outline
+									color="blue"
+									:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
+									size="12px"
+								>
+									<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
+								</q-btn>
+							</div>
+						</div>
+					</div>
+					<div v-else>-</div>
+				</div>
+			</div>
+		</div>
+	</q-card-section>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/05_leave/components/formDetail/05_VacationForm.vue b/src/modules/05_leave/components/formDetail/05_VacationForm.vue
index 38db660..f77ea2e 100644
--- a/src/modules/05_leave/components/formDetail/05_VacationForm.vue
+++ b/src/modules/05_leave/components/formDetail/05_VacationForm.vue
@@ -1,99 +1,108 @@
 <script setup lang="ts">
+/**
+ * รับ prop จาก component
+ */
 const props = defineProps({
-  data: {
-    type: Object,
-    required: true,
-  },
+	data: {
+		type: Object,
+		required: true,
+	},
 });
 </script>
 
 <template>
-  <q-card-section>
-    <div class="q-pa-md q-gutter-md">
-      <div class="row">
-        <div class="col text-grey-8">วันที่ยื่นใบลา</div>
-        <div class="col">{{ props.data.dateSendLeave }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เรื่อง</div>
-        <div class="col">{{ props.data.leaveTypeName }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เขียนที่</div>
-        <div class="col">{{ props.data.leaveWrote }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา</div>
-        <div class="col">{{ props.data.restDayOldTotal }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">จำนวนวันลาพักผ่อนประจำปีปัจจุบัน</div>
-        <div class="col">{{ props.data.restDayCurrentTotal }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
-        <div class="col">{{ props.data.leaveDateStart }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลาถึงวันที่</div>
-        <div class="col">{{ props.data.leaveDateEnd }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">จำนวนวันที่ลา</div>
-        <div class="col">
-          {{ props.data.leaveRange == 'ALL' ? props.data.leaveTotal + ' วัน' : props.data.leaveRange == 'MORNING' ? 'ลาครึ่งวันเช้า (0.5)': 'ลาครึ่งวันบ่าย (0.5)' }}
-        </div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8"></div>
-        <div class="col">{{ props.data.leaveTypeDay }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
-        <div class="col">{{ props.data.leaveNumber }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
-        <div class="col">{{ props.data.leaveAddress }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">รายละเอียด</div>
-        <div class="col">
-          {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
-        </div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เอกสารแนบ</div>
-        <div class="col">
-          <div
-            v-if="
-              props.data.leaveDocument && props.data.leaveDocument.length > 0
-            "
-          >
-            <div
-              v-for="(document, index) in props.data.leaveDocument"
-              :key="index"
-              :style="{ marginBottom: '10px' }"
-            >
-              <div>
-                <q-btn
-                  :href="document"
-                  target="_blank"
-                  outline
-                  color="blue"
-                  :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
-                  size="12px"
-                >
-                  <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
-                </q-btn>
-              </div>
-            </div>
-          </div>
-          <div v-else>-</div>
-        </div>
-      </div>
-    </div>
-  </q-card-section>
+	<q-card-section>
+		<div class="q-pa-md q-gutter-md">
+			<div class="row">
+				<div class="col text-grey-8">วันที่ยื่นใบลา</div>
+				<div class="col">{{ props.data.dateSendLeave }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เรื่อง</div>
+				<div class="col">{{ props.data.leaveTypeName }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เขียนที่</div>
+				<div class="col">{{ props.data.leaveWrote }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา</div>
+				<div class="col">{{ props.data.restDayOldTotal }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">จำนวนวันลาพักผ่อนประจำปีปัจจุบัน</div>
+				<div class="col">{{ props.data.restDayCurrentTotal }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
+				<div class="col">{{ props.data.leaveDateStart }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาถึงวันที่</div>
+				<div class="col">{{ props.data.leaveDateEnd }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">จำนวนวันที่ลา</div>
+				<div class="col">
+					{{
+						props.data.leaveRange == "ALL"
+							? props.data.leaveTotal + " วัน"
+							: props.data.leaveRange == "MORNING"
+							? "ลาครึ่งวันเช้า (0.5)"
+							: "ลาครึ่งวันบ่าย (0.5)"
+					}}
+				</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8"></div>
+				<div class="col">{{ props.data.leaveTypeDay }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
+				<div class="col">{{ props.data.leaveNumber }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
+				<div class="col">{{ props.data.leaveAddress }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">รายละเอียด</div>
+				<div class="col">
+					{{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
+				</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เอกสารแนบ</div>
+				<div class="col">
+					<div
+						v-if="
+							props.data.leaveDocument && props.data.leaveDocument.length > 0
+						"
+					>
+						<div
+							v-for="(document, index) in props.data.leaveDocument"
+							:key="index"
+							:style="{ marginBottom: '10px' }"
+						>
+							<div>
+								<q-btn
+									:href="document"
+									target="_blank"
+									outline
+									color="blue"
+									:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
+									size="12px"
+								>
+									<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
+								</q-btn>
+							</div>
+						</div>
+					</div>
+					<div v-else>-</div>
+				</div>
+			</div>
+		</div>
+	</q-card-section>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/05_leave/components/formDetail/06_OrdinationForm.vue b/src/modules/05_leave/components/formDetail/06_OrdinationForm.vue
index 94548e4..559a43d 100644
--- a/src/modules/05_leave/components/formDetail/06_OrdinationForm.vue
+++ b/src/modules/05_leave/components/formDetail/06_OrdinationForm.vue
@@ -1,112 +1,115 @@
 <script setup lang="ts">
+/**
+ * รับ prop จาก component
+ */
 const props = defineProps({
-  data: {
-    type: Object,
-    required: true,
-  },
+	data: {
+		type: Object,
+		required: true,
+	},
 });
 </script>
 
 <template>
-  <q-card-section>
-    <div class="q-pa-md q-gutter-md">
-      <div class="row">
-        <div class="col text-grey-8">วันที่ยื่นใบลา</div>
-        <div class="col">{{ props.data.dateSendLeave }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เรื่อง</div>
-        <div class="col">{{ props.data.leaveTypeName }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เขียนที่</div>
-        <div class="col">{{ props.data.leaveWrote }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
-        <div class="col">{{ props.data.leaveLastStart }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลาถึงวันที่</div>
-        <div class="col">{{ props.data.leaveLastEnd }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">จำนวนวันที่ลา</div>
-        <div class="col">
-          {{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}
-        </div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">วันเดือนปีเกิด</div>
-        <div class="col">{{ props.data.leavebirthDate }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">วันที่เข้ารับราชการ</div>
-        <div class="col">{{ props.data.leavegovernmentDate }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เคย/ไม่เคยบวช</div>
-        <div class="col">
-          {{ props.data.ordainDayStatus ? "เคย" : "ไม่เคย" }}
-        </div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">สถานที่บวช</div>
-        <div class="col">
-          {{ props.data.ordainDayLocationName }}
-          {{ props.data.ordainDayLocationAddress }}
-          {{ props.data.ordainDayLocationNumber }}
-        </div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">วันอุปสมบท</div>
-        <div class="col">{{ props.data.ordainDayOrdination }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">สถานที่จำพรรษา</div>
-        <div class="col">
-          {{ props.data.ordainDayBuddhistLentName }}
-          {{ props.data.ordainDayBuddhistLentAddress }}
-        </div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">รายละเอียด</div>
-        <div class="col">
-          {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
-        </div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เอกสารแนบ</div>
-        <div class="col">
-          <div
-            v-if="
-              props.data.leaveDocument && props.data.leaveDocument.length > 0
-            "
-          >
-            <div
-              v-for="(document, index) in props.data.leaveDocument"
-              :key="index"
-              :style="{ marginBottom: '10px' }"
-            >
-              <div>
-                <q-btn
-                  :href="document"
-                  target="_blank"
-                  outline
-                  color="blue"
-                  :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
-                  size="12px"
-                >
-                  <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
-                </q-btn>
-              </div>
-            </div>
-          </div>
-          <div v-else>-</div>
-        </div>
-      </div>
-    </div>
-  </q-card-section>
+	<q-card-section>
+		<div class="q-pa-md q-gutter-md">
+			<div class="row">
+				<div class="col text-grey-8">วันที่ยื่นใบลา</div>
+				<div class="col">{{ props.data.dateSendLeave }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เรื่อง</div>
+				<div class="col">{{ props.data.leaveTypeName }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เขียนที่</div>
+				<div class="col">{{ props.data.leaveWrote }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
+				<div class="col">{{ props.data.leaveLastStart }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาถึงวันที่</div>
+				<div class="col">{{ props.data.leaveLastEnd }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">จำนวนวันที่ลา</div>
+				<div class="col">
+					{{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}
+				</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">วันเดือนปีเกิด</div>
+				<div class="col">{{ props.data.leavebirthDate }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">วันที่เข้ารับราชการ</div>
+				<div class="col">{{ props.data.leavegovernmentDate }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เคย/ไม่เคยบวช</div>
+				<div class="col">
+					{{ props.data.ordainDayStatus ? "เคย" : "ไม่เคย" }}
+				</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">สถานที่บวช</div>
+				<div class="col">
+					{{ props.data.ordainDayLocationName }}
+					{{ props.data.ordainDayLocationAddress }}
+					{{ props.data.ordainDayLocationNumber }}
+				</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">วันอุปสมบท</div>
+				<div class="col">{{ props.data.ordainDayOrdination }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">สถานที่จำพรรษา</div>
+				<div class="col">
+					{{ props.data.ordainDayBuddhistLentName }}
+					{{ props.data.ordainDayBuddhistLentAddress }}
+				</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">รายละเอียด</div>
+				<div class="col">
+					{{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
+				</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เอกสารแนบ</div>
+				<div class="col">
+					<div
+						v-if="
+							props.data.leaveDocument && props.data.leaveDocument.length > 0
+						"
+					>
+						<div
+							v-for="(document, index) in props.data.leaveDocument"
+							:key="index"
+							:style="{ marginBottom: '10px' }"
+						>
+							<div>
+								<q-btn
+									:href="document"
+									target="_blank"
+									outline
+									color="blue"
+									:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
+									size="12px"
+								>
+									<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
+								</q-btn>
+							</div>
+						</div>
+					</div>
+					<div v-else>-</div>
+				</div>
+			</div>
+		</div>
+	</q-card-section>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/05_leave/components/formDetail/07_HajjForm.vue b/src/modules/05_leave/components/formDetail/07_HajjForm.vue
index b1f20d0..76e010d 100644
--- a/src/modules/05_leave/components/formDetail/07_HajjForm.vue
+++ b/src/modules/05_leave/components/formDetail/07_HajjForm.vue
@@ -1,87 +1,90 @@
 <script setup lang="ts">
+/**
+ * รับ prop จาก component
+ */
 const props = defineProps({
-  data: {
-    type: Object,
-    required: true,
-  },
+	data: {
+		type: Object,
+		required: true,
+	},
 });
 </script>
 
 <template>
-  <q-card-section>
-    <div class="q-pa-md q-gutter-md">
-      <div class="row">
-        <div class="col text-grey-8">วันที่ยื่นใบลา</div>
-        <div class="col">{{ props.data.dateSendLeave }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เรื่อง</div>
-        <div class="col">{{ props.data.leaveTypeName }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เขียนที่</div>
-        <div class="col">{{ props.data.leaveWrote }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
-        <div class="col">{{ props.data.leaveDateStart }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลาถึงวันที่</div>
-        <div class="col">{{ props.data.leaveDateEnd }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">จำนวนวันที่ลา</div>
-        <div class="col">
-          {{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}
-        </div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">วันที่เข้ารับราชการ</div>
-        <div class="col">{{ props.data.leavegovernmentDate }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เคย/ไม่เคยไปประกอบพิธีฮัจญ์</div>
-        <div class="col">{{ props.data.hajjDayStatus ? "เคย" : "ไม่เคย" }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">รายละเอียด</div>
-        <div class="col">
-          {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
-        </div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เอกสารแนบ</div>
-        <div class="col">
-          <div
-            v-if="
-              props.data.leaveDocument && props.data.leaveDocument.length > 0
-            "
-          >
-            <div
-              v-for="(document, index) in props.data.leaveDocument"
-              :key="index"
-              :style="{ marginBottom: '10px' }"
-            >
-              <div>
-                <q-btn
-                  :href="document"
-                  target="_blank"
-                  outline
-                  color="blue"
-                  :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
-                  size="12px"
-                >
-                  <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
-                </q-btn>
-              </div>
-            </div>
-          </div>
-          <div v-else>-</div>
-        </div>
-      </div>
-    </div>
-  </q-card-section>
+	<q-card-section>
+		<div class="q-pa-md q-gutter-md">
+			<div class="row">
+				<div class="col text-grey-8">วันที่ยื่นใบลา</div>
+				<div class="col">{{ props.data.dateSendLeave }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เรื่อง</div>
+				<div class="col">{{ props.data.leaveTypeName }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เขียนที่</div>
+				<div class="col">{{ props.data.leaveWrote }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
+				<div class="col">{{ props.data.leaveDateStart }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาถึงวันที่</div>
+				<div class="col">{{ props.data.leaveDateEnd }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">จำนวนวันที่ลา</div>
+				<div class="col">
+					{{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}
+				</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">วันที่เข้ารับราชการ</div>
+				<div class="col">{{ props.data.leavegovernmentDate }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เคย/ไม่เคยไปประกอบพิธีฮัจญ์</div>
+				<div class="col">{{ props.data.hajjDayStatus ? "เคย" : "ไม่เคย" }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">รายละเอียด</div>
+				<div class="col">
+					{{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
+				</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เอกสารแนบ</div>
+				<div class="col">
+					<div
+						v-if="
+							props.data.leaveDocument && props.data.leaveDocument.length > 0
+						"
+					>
+						<div
+							v-for="(document, index) in props.data.leaveDocument"
+							:key="index"
+							:style="{ marginBottom: '10px' }"
+						>
+							<div>
+								<q-btn
+									:href="document"
+									target="_blank"
+									outline
+									color="blue"
+									:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
+									size="12px"
+								>
+									<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
+								</q-btn>
+							</div>
+						</div>
+					</div>
+					<div v-else>-</div>
+				</div>
+			</div>
+		</div>
+	</q-card-section>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/05_leave/components/formDetail/08_MilitaryForm.vue b/src/modules/05_leave/components/formDetail/08_MilitaryForm.vue
index c96ec6f..646d18b 100644
--- a/src/modules/05_leave/components/formDetail/08_MilitaryForm.vue
+++ b/src/modules/05_leave/components/formDetail/08_MilitaryForm.vue
@@ -1,100 +1,103 @@
 <script setup lang="ts">
+/**
+ * รับ prop จาก component
+ */
 const props = defineProps({
-  data: {
-    type: Object,
-    required: true,
-  },
+	data: {
+		type: Object,
+		required: true,
+	},
 });
 console.log(props);
 </script>
 
 <template>
-  <q-card-section>
-    <div class="q-pa-md q-gutter-md">
-      <div class="row">
-        <div class="col text-grey-8">วันที่ยื่นใบลา</div>
-        <div class="col">{{ props.data.dateSendLeave }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เรื่อง</div>
-        <div class="col">{{ props.data.leaveTypeName }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เขียนที่</div>
-        <div class="col">{{ props.data.leaveWrote }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
-        <div class="col">{{ props.data.leaveDateStart }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลาถึงวันที่</div>
-        <div class="col">{{ props.data.leaveDateEnd }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">จำนวนวันที่ลา</div>
-        <div class="col">
-          {{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}
-        </div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ได้รับหมายเรียกของ</div>
-        <div class="col">{{ props.data.absentDaySummon }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ที่</div>
-        <div class="col">{{ props.data.absentDayLocation }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลงวันที่</div>
-        <div class="col">{{ props.data.absentDayRegistorDate }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ให้เข้ารับการ</div>
-        <div class="col">{{ props.data.absentDayGetIn }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ณ ที่</div>
-        <div class="col">{{ props.data.absentDayAt }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">รายละเอียด</div>
-        <div class="col">
-          {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
-        </div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เอกสารแนบ</div>
-        <div class="col">
-          <div
-            v-if="
-              props.data.leaveDocument && props.data.leaveDocument.length > 0
-            "
-          >
-            <div
-              v-for="(document, index) in props.data.leaveDocument"
-              :key="index"
-              :style="{ marginBottom: '10px' }"
-            >
-              <div>
-                <q-btn
-                  :href="document"
-                  target="_blank"
-                  outline
-                  color="blue"
-                  :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
-                  size="12px"
-                >
-                  <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
-                </q-btn>
-              </div>
-            </div>
-          </div>
-          <div v-else>-</div>
-        </div>
-      </div>
-    </div>
-  </q-card-section>
+	<q-card-section>
+		<div class="q-pa-md q-gutter-md">
+			<div class="row">
+				<div class="col text-grey-8">วันที่ยื่นใบลา</div>
+				<div class="col">{{ props.data.dateSendLeave }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เรื่อง</div>
+				<div class="col">{{ props.data.leaveTypeName }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เขียนที่</div>
+				<div class="col">{{ props.data.leaveWrote }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
+				<div class="col">{{ props.data.leaveDateStart }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาถึงวันที่</div>
+				<div class="col">{{ props.data.leaveDateEnd }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">จำนวนวันที่ลา</div>
+				<div class="col">
+					{{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}
+				</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ได้รับหมายเรียกของ</div>
+				<div class="col">{{ props.data.absentDaySummon }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ที่</div>
+				<div class="col">{{ props.data.absentDayLocation }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลงวันที่</div>
+				<div class="col">{{ props.data.absentDayRegistorDate }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ให้เข้ารับการ</div>
+				<div class="col">{{ props.data.absentDayGetIn }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ณ ที่</div>
+				<div class="col">{{ props.data.absentDayAt }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">รายละเอียด</div>
+				<div class="col">
+					{{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
+				</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เอกสารแนบ</div>
+				<div class="col">
+					<div
+						v-if="
+							props.data.leaveDocument && props.data.leaveDocument.length > 0
+						"
+					>
+						<div
+							v-for="(document, index) in props.data.leaveDocument"
+							:key="index"
+							:style="{ marginBottom: '10px' }"
+						>
+							<div>
+								<q-btn
+									:href="document"
+									target="_blank"
+									outline
+									color="blue"
+									:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
+									size="12px"
+								>
+									<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
+								</q-btn>
+							</div>
+						</div>
+					</div>
+					<div v-else>-</div>
+				</div>
+			</div>
+		</div>
+	</q-card-section>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/05_leave/components/formDetail/09_StudyForm.vue b/src/modules/05_leave/components/formDetail/09_StudyForm.vue
index f5e6d8c..4608b90 100644
--- a/src/modules/05_leave/components/formDetail/09_StudyForm.vue
+++ b/src/modules/05_leave/components/formDetail/09_StudyForm.vue
@@ -1,121 +1,124 @@
 <script setup lang="ts">
+/**
+ * รับ prop จาก component
+ */
 const props = defineProps({
-  data: {
-    type: Object,
-    required: true,
-  },
+	data: {
+		type: Object,
+		required: true,
+	},
 });
 </script>
 
 <template>
-  <q-card-section>
-    <div class="q-pa-md q-gutter-md">
-      <div class="row">
-        <div class="col text-grey-8">วันที่ยื่นใบลา</div>
-        <div class="col">{{ props.data.dateSendLeave }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เรื่อง</div>
-        <div class="col">{{ props.data.leaveTypeName }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เขียนที่</div>
-        <div class="col">{{ props.data.leaveWrote }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
-        <div class="col">{{ props.data.leaveDateStart }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลาถึงวันที่</div>
-        <div class="col">{{ props.data.leaveDateEnd }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">จำนวนวันที่ลา</div>
-        <div class="col">
-          {{ props.data.leaveCount ? props.data.leaveCount : "-" }}
-        </div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">วันเดือนปีเกิด</div>
-        <div class="col">{{ props.data.leavebirthDate }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">วันที่เข้ารับราชการ</div>
-        <div class="col">{{ props.data.leavegovernmentDate }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เงินเดือนปัจจุบัน</div>
-        <div class="col">
-          {{ props.data.leaveSalary }} ({{ props.data.leaveSalaryText }})
-        </div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ศึกษาวิชา</div>
-        <div class="col">{{ props.data.studyDaySubject }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ขั้นปริญญา</div>
-        <div class="col">{{ props.data.studyDayDegreeLevel }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ชื่อสถานศึกษา</div>
-        <div class="col">{{ props.data.studyDayUniversityName }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ประเทศ</div>
-        <div class="col">{{ props.data.studyDayCountry }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ด้วยทุน</div>
-        <div class="col">{{ props.data.studyDayScholarship }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
-        <div class="col">{{ props.data.leaveNumber }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
-        <div class="col">{{ props.data.leaveAddress }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">รายละเอียด</div>
-        <div class="col">
-          {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
-        </div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เอกสารแนบ</div>
-        <div class="col">
-          <div
-            v-if="
-              props.data.leaveDocument && props.data.leaveDocument.length > 0
-            "
-          >
-            <div
-              v-for="(document, index) in props.data.leaveDocument"
-              :key="index"
-              :style="{ marginBottom: '10px' }"
-            >
-              <div>
-                <q-btn
-                  :href="document"
-                  target="_blank"
-                  outline
-                  color="blue"
-                  :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
-                  size="12px"
-                >
-                  <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
-                </q-btn>
-              </div>
-            </div>
-          </div>
-          <div v-else>-</div>
-        </div>
-      </div>
-    </div>
-  </q-card-section>
+	<q-card-section>
+		<div class="q-pa-md q-gutter-md">
+			<div class="row">
+				<div class="col text-grey-8">วันที่ยื่นใบลา</div>
+				<div class="col">{{ props.data.dateSendLeave }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เรื่อง</div>
+				<div class="col">{{ props.data.leaveTypeName }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เขียนที่</div>
+				<div class="col">{{ props.data.leaveWrote }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
+				<div class="col">{{ props.data.leaveDateStart }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาถึงวันที่</div>
+				<div class="col">{{ props.data.leaveDateEnd }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">จำนวนวันที่ลา</div>
+				<div class="col">
+					{{ props.data.leaveCount ? props.data.leaveCount : "-" }}
+				</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">วันเดือนปีเกิด</div>
+				<div class="col">{{ props.data.leavebirthDate }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">วันที่เข้ารับราชการ</div>
+				<div class="col">{{ props.data.leavegovernmentDate }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เงินเดือนปัจจุบัน</div>
+				<div class="col">
+					{{ props.data.leaveSalary }} ({{ props.data.leaveSalaryText }})
+				</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ศึกษาวิชา</div>
+				<div class="col">{{ props.data.studyDaySubject }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ขั้นปริญญา</div>
+				<div class="col">{{ props.data.studyDayDegreeLevel }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ชื่อสถานศึกษา</div>
+				<div class="col">{{ props.data.studyDayUniversityName }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ประเทศ</div>
+				<div class="col">{{ props.data.studyDayCountry }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ด้วยทุน</div>
+				<div class="col">{{ props.data.studyDayScholarship }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
+				<div class="col">{{ props.data.leaveNumber }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
+				<div class="col">{{ props.data.leaveAddress }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">รายละเอียด</div>
+				<div class="col">
+					{{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
+				</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เอกสารแนบ</div>
+				<div class="col">
+					<div
+						v-if="
+							props.data.leaveDocument && props.data.leaveDocument.length > 0
+						"
+					>
+						<div
+							v-for="(document, index) in props.data.leaveDocument"
+							:key="index"
+							:style="{ marginBottom: '10px' }"
+						>
+							<div>
+								<q-btn
+									:href="document"
+									target="_blank"
+									outline
+									color="blue"
+									:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
+									size="12px"
+								>
+									<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
+								</q-btn>
+							</div>
+						</div>
+					</div>
+					<div v-else>-</div>
+				</div>
+			</div>
+		</div>
+	</q-card-section>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/05_leave/components/formDetail/10_TrainForm.vue b/src/modules/05_leave/components/formDetail/10_TrainForm.vue
index 61f5ec9..a3064d5 100644
--- a/src/modules/05_leave/components/formDetail/10_TrainForm.vue
+++ b/src/modules/05_leave/components/formDetail/10_TrainForm.vue
@@ -1,116 +1,119 @@
 <script setup lang="ts">
+/**
+ * รับ prop จาก component
+ */
 const props = defineProps({
-  data: {
-    type: Object,
-    required: true,
-  },
+	data: {
+		type: Object,
+		required: true,
+	},
 });
 </script>
 <template>
-  <q-card-section>
-    <div class="q-pa-md q-gutter-md">
-      <div class="row">
-        <div class="col text-grey-8">วันที่ยื่นใบลา</div>
-        <div class="col">{{ props.data.dateSendLeave }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เรื่อง</div>
-        <div class="col">{{ props.data.leaveTypeName }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เขียนที่</div>
-        <div class="col">{{ props.data.leaveWrote }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
-        <div class="col">{{ props.data.leaveDateStart }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลาถึงวันที่</div>
-        <div class="col">{{ props.data.leaveDateEnd }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">จำนวนวันที่ลา</div>
-        <div class="col">
-          {{ props.data.leaveCount ? props.data.leaveCount : "-" }}
-        </div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">วันเดือนปีเกิด</div>
-        <div class="col">{{ props.data.leavebirthDate }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">วันที่เข้ารับราชการ</div>
-        <div class="col">{{ props.data.leavegovernmentDate }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เงินเดือนปัจจุบัน</div>
-        <div class="col">
-          {{ props.data.leaveSalary }} ({{ props.data.leaveSalaryText }})
-        </div>
-      </div>
+	<q-card-section>
+		<div class="q-pa-md q-gutter-md">
+			<div class="row">
+				<div class="col text-grey-8">วันที่ยื่นใบลา</div>
+				<div class="col">{{ props.data.dateSendLeave }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เรื่อง</div>
+				<div class="col">{{ props.data.leaveTypeName }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เขียนที่</div>
+				<div class="col">{{ props.data.leaveWrote }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
+				<div class="col">{{ props.data.leaveDateStart }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาถึงวันที่</div>
+				<div class="col">{{ props.data.leaveDateEnd }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">จำนวนวันที่ลา</div>
+				<div class="col">
+					{{ props.data.leaveCount ? props.data.leaveCount : "-" }}
+				</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">วันเดือนปีเกิด</div>
+				<div class="col">{{ props.data.leavebirthDate }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">วันที่เข้ารับราชการ</div>
+				<div class="col">{{ props.data.leavegovernmentDate }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เงินเดือนปัจจุบัน</div>
+				<div class="col">
+					{{ props.data.leaveSalary }} ({{ props.data.leaveSalaryText }})
+				</div>
+			</div>
 
-      <div class="row">
-        <div class="col text-grey-8">ด้าน/หลักสูตร</div>
-        <div class="col">{{ props.data.studyDayTrainingSubject }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ณ สถานที่</div>
-        <div class="col">{{ props.data.studyDayTrainingName }}</div>
-      </div>
+			<div class="row">
+				<div class="col text-grey-8">ด้าน/หลักสูตร</div>
+				<div class="col">{{ props.data.studyDayTrainingSubject }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ณ สถานที่</div>
+				<div class="col">{{ props.data.studyDayTrainingName }}</div>
+			</div>
 
-      <div class="row">
-        <div class="col text-grey-8">ประเทศ</div>
-        <div class="col">{{ props.data.studyDayCountry }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ด้วยทุน</div>
-        <div class="col">{{ props.data.studyDayScholarship }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
-        <div class="col">{{ props.data.leaveNumber }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
-        <div class="col">{{ props.data.leaveAddress }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">รายละเอียด</div>
-        <div class="col">
-          {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
-        </div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เอกสารแนบ</div>
-        <div class="col">
-          <div
-            v-if="
-              props.data.leaveDocument && props.data.leaveDocument.length > 0
-            "
-          >
-            <div
-              v-for="(document, index) in props.data.leaveDocument"
-              :key="index"
-              :style="{ marginBottom: '10px' }"
-            >
-              <div>
-                <q-btn
-                  :href="document"
-                  target="_blank"
-                  outline
-                  color="blue"
-                  :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
-                  size="12px"
-                >
-                  <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
-                </q-btn>
-              </div>
-            </div>
-          </div>
-          <div v-else>-</div>
-        </div>
-      </div>
-    </div>
-  </q-card-section>
+			<div class="row">
+				<div class="col text-grey-8">ประเทศ</div>
+				<div class="col">{{ props.data.studyDayCountry }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ด้วยทุน</div>
+				<div class="col">{{ props.data.studyDayScholarship }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
+				<div class="col">{{ props.data.leaveNumber }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
+				<div class="col">{{ props.data.leaveAddress }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">รายละเอียด</div>
+				<div class="col">
+					{{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
+				</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เอกสารแนบ</div>
+				<div class="col">
+					<div
+						v-if="
+							props.data.leaveDocument && props.data.leaveDocument.length > 0
+						"
+					>
+						<div
+							v-for="(document, index) in props.data.leaveDocument"
+							:key="index"
+							:style="{ marginBottom: '10px' }"
+						>
+							<div>
+								<q-btn
+									:href="document"
+									target="_blank"
+									outline
+									color="blue"
+									:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
+									size="12px"
+								>
+									<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
+								</q-btn>
+							</div>
+						</div>
+					</div>
+					<div v-else>-</div>
+				</div>
+			</div>
+		</div>
+	</q-card-section>
 </template>
diff --git a/src/modules/05_leave/components/formDetail/11_WorkInternationalForm.vue b/src/modules/05_leave/components/formDetail/11_WorkInternationalForm.vue
index 440c7da..f26dc2e 100644
--- a/src/modules/05_leave/components/formDetail/11_WorkInternationalForm.vue
+++ b/src/modules/05_leave/components/formDetail/11_WorkInternationalForm.vue
@@ -1,92 +1,95 @@
 <script setup lang="ts">
+/**
+ * รับ prop จาก component
+ */
 const props = defineProps({
-  data: {
-    type: Object,
-    required: true,
-  },
+	data: {
+		type: Object,
+		required: true,
+	},
 });
 </script>
 <template>
-  <q-card-section>
-    <div class="q-pa-md q-gutter-md">
-      <div class="row">
-        <div class="col text-grey-8">วันที่ยื่นใบลา</div>
-        <div class="col">{{ props.data.dateSendLeave }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เรื่อง</div>
-        <div class="col">{{ props.data.leaveTypeName }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เขียนที่</div>
-        <div class="col">{{ props.data.leaveWrote }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
-        <div class="col">{{ props.data.leaveDateStart }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลาถึงวันที่</div>
-        <div class="col">{{ props.data.leaveDateEnd }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">จำนวนวันที่ลา</div>
-        <div class="col">
-          {{ props.data.leaveCount ? props.data.leaveCount : "-" }}
-        </div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">รายละเอียด</div>
-        <div class="col">
-          {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
-        </div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เอกสารประกอบ</div>
-        <div class="col" v-if="props.data.leaveDocument">
-          <q-btn
-            :href="props.data.leaveDocument"
-            target="_blank"
-            outline
-            color="blue"
-            label="ดาวน์โหลด"
-            size="12px"
-          >
-            <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
-          >
-        </div>
-        <div class="col" v-else>-</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เอกสารแนบ</div>
-        <div class="col">
-          <div
-            v-if="
-              props.data.leaveDocument && props.data.leaveDocument.length > 0
-            "
-          >
-            <div
-              v-for="(document, index) in props.data.leaveDocument"
-              :key="index"
-              :style="{ marginBottom: '10px' }"
-            >
-              <div>
-                <q-btn
-                  :href="document"
-                  target="_blank"
-                  outline
-                  color="blue"
-                  :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
-                  size="12px"
-                >
-                  <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
-                </q-btn>
-              </div>
-            </div>
-          </div>
-          <div v-else>-</div>
-        </div>
-      </div>
-    </div>
-  </q-card-section>
+	<q-card-section>
+		<div class="q-pa-md q-gutter-md">
+			<div class="row">
+				<div class="col text-grey-8">วันที่ยื่นใบลา</div>
+				<div class="col">{{ props.data.dateSendLeave }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เรื่อง</div>
+				<div class="col">{{ props.data.leaveTypeName }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เขียนที่</div>
+				<div class="col">{{ props.data.leaveWrote }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
+				<div class="col">{{ props.data.leaveDateStart }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาถึงวันที่</div>
+				<div class="col">{{ props.data.leaveDateEnd }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">จำนวนวันที่ลา</div>
+				<div class="col">
+					{{ props.data.leaveCount ? props.data.leaveCount : "-" }}
+				</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">รายละเอียด</div>
+				<div class="col">
+					{{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
+				</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เอกสารประกอบ</div>
+				<div class="col" v-if="props.data.leaveDocument">
+					<q-btn
+						:href="props.data.leaveDocument"
+						target="_blank"
+						outline
+						color="blue"
+						label="ดาวน์โหลด"
+						size="12px"
+					>
+						<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+					>
+				</div>
+				<div class="col" v-else>-</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เอกสารแนบ</div>
+				<div class="col">
+					<div
+						v-if="
+							props.data.leaveDocument && props.data.leaveDocument.length > 0
+						"
+					>
+						<div
+							v-for="(document, index) in props.data.leaveDocument"
+							:key="index"
+							:style="{ marginBottom: '10px' }"
+						>
+							<div>
+								<q-btn
+									:href="document"
+									target="_blank"
+									outline
+									color="blue"
+									:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
+									size="12px"
+								>
+									<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
+								</q-btn>
+							</div>
+						</div>
+					</div>
+					<div v-else>-</div>
+				</div>
+			</div>
+		</div>
+	</q-card-section>
 </template>
diff --git a/src/modules/05_leave/components/formDetail/12_FollowSpouseForm.vue b/src/modules/05_leave/components/formDetail/12_FollowSpouseForm.vue
index d6b32ac..8f5868d 100644
--- a/src/modules/05_leave/components/formDetail/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/components/formDetail/12_FollowSpouseForm.vue
@@ -1,123 +1,126 @@
 <script setup lang="ts">
+/**
+ * รับ prop จาก component
+ */
 const props = defineProps({
-  data: {
-    type: Object,
-    required: true,
-  },
+	data: {
+		type: Object,
+		required: true,
+	},
 });
 </script>
 <template>
-  <q-card-section>
-    <div class="q-pa-md q-gutter-md">
-      <div class="row">
-        <div class="col text-grey-8">วันที่ยื่นใบลา</div>
-        <div class="col">{{ props.data.dateSendLeave }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เรื่อง</div>
-        <div class="col">{{ props.data.leaveTypeName }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เขียนที่</div>
-        <div class="col">{{ props.data.leaveWrote }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
-        <div class="col">{{ props.data.leaveDateStart }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลาถึงวันที่</div>
-        <div class="col">{{ props.data.leaveDateEnd }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">จำนวนวันที่ลา</div>
-        <div class="col">
-          {{ props.data.leaveCount ? props.data.leaveCount : "-" }}
-        </div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">วันเดือนปีเกิด</div>
-        <div class="col">{{ props.data.leavebirthDate }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">วันที่เข้ารับราชการ</div>
-        <div class="col">{{ props.data.leavegovernmentDate }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เงินเดือนปัจจุบัน</div>
-        <div class="col">
-          {{ props.data.leaveSalary }} ({{ props.data.leaveSalaryText }})
-        </div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ชื่อคู่สมรส</div>
-        <div class="col">{{ props.data.coupleDayName }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ตำแหน่งคู่สมรส</div>
-        <div class="col">{{ props.data.coupleDayPosition }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ไปปฏิบัติราชการ ณ ประเทศ</div>
-        <div class="col">{{ props.data.coupleDayLevelCountry }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย</div>
-      </div>
-      <div class="row q-mt-xs">
-        <div class="col text-grey-8">
-          <div class="q-ml-md" style="list-style-type: circle">
-            <li>ประเทศ</li>
-            <li>จำนวนวัน</li>
-            <li>ตั้งแต่วันที่</li>
-            <li>ถึงวันที่</li>
-            <li>ลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย</li>
-          </div>
-        </div>
-        <div class="col">
-          <div>{{ props.data.coupleDayCountryHistory }}</div>
-          <div>{{ props.data.coupleDayTotalHistory }}</div>
-          <div>{{ props.data.coupleDayStartDateHistory }}</div>
-          <div>{{ props.data.coupleDayEndDateHistory }}</div>
-          <div>{{ props.data.coupleDaySumTotalHistory }}</div>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">รายละเอียด</div>
-        <div class="col">
-          {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
-        </div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เอกสารแนบ</div>
-        <div class="col">
-          <div
-            v-if="
-              props.data.leaveDocument && props.data.leaveDocument.length > 0
-            "
-          >
-            <div
-              v-for="(document, index) in props.data.leaveDocument"
-              :key="index"
-              :style="{ marginBottom: '10px' }"
-            >
-              <div>
-                <q-btn
-                  :href="document"
-                  target="_blank"
-                  outline
-                  color="blue"
-                  :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
-                  size="12px"
-                >
-                  <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
-                </q-btn>
-              </div>
-            </div>
-          </div>
-          <div v-else>-</div>
-        </div>
-      </div>
-    </div>
-  </q-card-section>
+	<q-card-section>
+		<div class="q-pa-md q-gutter-md">
+			<div class="row">
+				<div class="col text-grey-8">วันที่ยื่นใบลา</div>
+				<div class="col">{{ props.data.dateSendLeave }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เรื่อง</div>
+				<div class="col">{{ props.data.leaveTypeName }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เขียนที่</div>
+				<div class="col">{{ props.data.leaveWrote }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
+				<div class="col">{{ props.data.leaveDateStart }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาถึงวันที่</div>
+				<div class="col">{{ props.data.leaveDateEnd }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">จำนวนวันที่ลา</div>
+				<div class="col">
+					{{ props.data.leaveCount ? props.data.leaveCount : "-" }}
+				</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">วันเดือนปีเกิด</div>
+				<div class="col">{{ props.data.leavebirthDate }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">วันที่เข้ารับราชการ</div>
+				<div class="col">{{ props.data.leavegovernmentDate }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เงินเดือนปัจจุบัน</div>
+				<div class="col">
+					{{ props.data.leaveSalary }} ({{ props.data.leaveSalaryText }})
+				</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ชื่อคู่สมรส</div>
+				<div class="col">{{ props.data.coupleDayName }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ตำแหน่งคู่สมรส</div>
+				<div class="col">{{ props.data.coupleDayPosition }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ไปปฏิบัติราชการ ณ ประเทศ</div>
+				<div class="col">{{ props.data.coupleDayLevelCountry }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย</div>
+			</div>
+			<div class="row q-mt-xs">
+				<div class="col text-grey-8">
+					<div class="q-ml-md" style="list-style-type: circle">
+						<li>ประเทศ</li>
+						<li>จำนวนวัน</li>
+						<li>ตั้งแต่วันที่</li>
+						<li>ถึงวันที่</li>
+						<li>ลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย</li>
+					</div>
+				</div>
+				<div class="col">
+					<div>{{ props.data.coupleDayCountryHistory }}</div>
+					<div>{{ props.data.coupleDayTotalHistory }}</div>
+					<div>{{ props.data.coupleDayStartDateHistory }}</div>
+					<div>{{ props.data.coupleDayEndDateHistory }}</div>
+					<div>{{ props.data.coupleDaySumTotalHistory }}</div>
+				</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">รายละเอียด</div>
+				<div class="col">
+					{{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
+				</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เอกสารแนบ</div>
+				<div class="col">
+					<div
+						v-if="
+							props.data.leaveDocument && props.data.leaveDocument.length > 0
+						"
+					>
+						<div
+							v-for="(document, index) in props.data.leaveDocument"
+							:key="index"
+							:style="{ marginBottom: '10px' }"
+						>
+							<div>
+								<q-btn
+									:href="document"
+									target="_blank"
+									outline
+									color="blue"
+									:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
+									size="12px"
+								>
+									<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
+								</q-btn>
+							</div>
+						</div>
+					</div>
+					<div v-else>-</div>
+				</div>
+			</div>
+		</div>
+	</q-card-section>
 </template>
diff --git a/src/modules/05_leave/components/formDetail/13_RehabilitationForm.vue b/src/modules/05_leave/components/formDetail/13_RehabilitationForm.vue
index 6b4dd26..daaf94f 100644
--- a/src/modules/05_leave/components/formDetail/13_RehabilitationForm.vue
+++ b/src/modules/05_leave/components/formDetail/13_RehabilitationForm.vue
@@ -1,86 +1,89 @@
 <script setup lang="ts">
+/**
+ * รับ prop จาก component
+ */
 const props = defineProps({
-  data: {
-    type: Object,
-    required: true,
-  },
+	data: {
+		type: Object,
+		required: true,
+	},
 });
 </script>
 <template>
-  <q-card-section>
-    <div class="q-pa-md q-gutter-md">
-      <div class="row">
-        <div class="col text-grey-8">วันที่ยื่นใบลา</div>
-        <div class="col">{{ props.data.dateSendLeave }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เรื่อง</div>
-        <div class="col">{{ props.data.leaveTypeName }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เขียนที่</div>
-        <div class="col">{{ props.data.leaveWrote }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
-        <div class="col">{{ props.data.leaveDateStart }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลาถึงวันที่</div>
-        <div class="col">{{ props.data.leaveDateEnd }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">รายละเอียด</div>
-        <div class="col">
-          {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
-        </div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เอกสารประกอบ</div>
-        <div class="col" v-if="props.data.leaveDocument">
-          <q-btn
-            :href="props.data.leaveDocument"
-            target="_blank"
-            outline
-            color="blue"
-            label="ดาวน์โหลด"
-            size="12px"
-          >
-            <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
-          >
-        </div>
-        <div class="col" v-else>-</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เอกสารแนบ</div>
-        <div class="col">
-          <div
-            v-if="
-              props.data.leaveDocument && props.data.leaveDocument.length > 0
-            "
-          >
-            <div
-              v-for="(document, index) in props.data.leaveDocument"
-              :key="index"
-              :style="{ marginBottom: '10px' }"
-            >
-              <div>
-                <q-btn
-                  :href="document"
-                  target="_blank"
-                  outline
-                  color="blue"
-                  :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
-                  size="12px"
-                >
-                  <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
-                </q-btn>
-              </div>
-            </div>
-          </div>
-          <div v-else>-</div>
-        </div>
-      </div>
-    </div>
-  </q-card-section>
+	<q-card-section>
+		<div class="q-pa-md q-gutter-md">
+			<div class="row">
+				<div class="col text-grey-8">วันที่ยื่นใบลา</div>
+				<div class="col">{{ props.data.dateSendLeave }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เรื่อง</div>
+				<div class="col">{{ props.data.leaveTypeName }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เขียนที่</div>
+				<div class="col">{{ props.data.leaveWrote }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
+				<div class="col">{{ props.data.leaveDateStart }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาถึงวันที่</div>
+				<div class="col">{{ props.data.leaveDateEnd }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">รายละเอียด</div>
+				<div class="col">
+					{{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
+				</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เอกสารประกอบ</div>
+				<div class="col" v-if="props.data.leaveDocument">
+					<q-btn
+						:href="props.data.leaveDocument"
+						target="_blank"
+						outline
+						color="blue"
+						label="ดาวน์โหลด"
+						size="12px"
+					>
+						<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+					>
+				</div>
+				<div class="col" v-else>-</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เอกสารแนบ</div>
+				<div class="col">
+					<div
+						v-if="
+							props.data.leaveDocument && props.data.leaveDocument.length > 0
+						"
+					>
+						<div
+							v-for="(document, index) in props.data.leaveDocument"
+							:key="index"
+							:style="{ marginBottom: '10px' }"
+						>
+							<div>
+								<q-btn
+									:href="document"
+									target="_blank"
+									outline
+									color="blue"
+									:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
+									size="12px"
+								>
+									<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
+								</q-btn>
+							</div>
+						</div>
+					</div>
+					<div v-else>-</div>
+				</div>
+			</div>
+		</div>
+	</q-card-section>
 </template>
diff --git a/src/modules/05_leave/components/formDetail/formCancel.vue b/src/modules/05_leave/components/formDetail/formCancel.vue
index ce59263..28b7933 100644
--- a/src/modules/05_leave/components/formDetail/formCancel.vue
+++ b/src/modules/05_leave/components/formDetail/formCancel.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
+/**
+ * รับ prop จาก component
+ */
 const props = defineProps({
 	data: {
 		type: Object,
 		required: true,
 	},
-})
+});
 </script>
-
 <template>
 	<q-card-section>
 		<div class="q-pa-md q-gutter-md">
@@ -57,7 +59,16 @@ const props = defineProps({
 			<div class="row">
 				<div class="col text-grey-8">เอกสารการยกเลิกการลา</div>
 				<div class="col" v-if="props.data.leaveDocDelete">
-					<q-btn :href="props.data.leaveDocDelete" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px"> <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn>
+					<q-btn
+						:href="props.data.leaveDocDelete"
+						target="_blank"
+						outline
+						color="blue"
+						label="ดาวน์โหลด"
+						size="12px"
+					>
+						<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+					>
 				</div>
 				<div class="col" v-else>-</div>
 			</div>
diff --git a/src/modules/05_leave/components/formDetail/formMain.vue b/src/modules/05_leave/components/formDetail/formMain.vue
index 4be3ddf..38cd3f5 100644
--- a/src/modules/05_leave/components/formDetail/formMain.vue
+++ b/src/modules/05_leave/components/formDetail/formMain.vue
@@ -1,45 +1,47 @@
 <script setup lang="ts">
+/**
+ * รับ prop จาก component
+ */
 const props = defineProps({
-  data: {
-    type: Object,
-    required: true,
-  },
+	data: {
+		type: Object,
+		required: true,
+	},
 });
-console.log(props);
 </script>
 <template>
-  <q-card-section>
-    <div class="q-pa-md q-gutter-md">
-      <div class="row">
-        <div class="col-4 text-grey-8">วันที่ยืนใบลา</div>
-        <div class="col">{{ props.data.dateSendLeave }}</div>
-      </div>
-      <div class="row">
-        <div class="col-4 text-grey-8">เรื่อง</div>
-        <div class="col">{{ props.data.leaveTypeName }}</div>
-      </div>
-      <div class="row">
-        <div class="col-4 text-grey-8">เรียน</div>
-        <div class="col">{{ props.data.notification }}</div>
-      </div>
-      <div class="row">
-        <div class="col-4 text-grey-8">ชื่อผู้ยื่นขอ</div>
-        <div class="col">{{ props.data.fullname }}</div>
-      </div>
-      <div class="row">
-        <div class="col-4 text-grey-8">ตำแหน่งผู้ยืนขอ</div>
-        <div class="col">{{ props.data.positionName }}</div>
-      </div>
-      <div class="row">
-        <div class="col-4 text-grey-8">ระดับผู้ยืนขอ</div>
-        <div class="col">{{ props.data.positionLevelName }}</div>
-      </div>
-      <div class="row">
-        <div class="col-4 text-grey-8">สังกัดผู้ยืนขอ</div>
-        <div class="col">{{ props.data.organizationName }}</div>
-      </div>
-    </div>
-  </q-card-section>
+	<q-card-section>
+		<div class="q-pa-md q-gutter-md">
+			<div class="row">
+				<div class="col-4 text-grey-8">วันที่ยืนใบลา</div>
+				<div class="col">{{ props.data.dateSendLeave }}</div>
+			</div>
+			<div class="row">
+				<div class="col-4 text-grey-8">เรื่อง</div>
+				<div class="col">{{ props.data.leaveTypeName }}</div>
+			</div>
+			<div class="row">
+				<div class="col-4 text-grey-8">เรียน</div>
+				<div class="col">{{ props.data.notification }}</div>
+			</div>
+			<div class="row">
+				<div class="col-4 text-grey-8">ชื่อผู้ยื่นขอ</div>
+				<div class="col">{{ props.data.fullname }}</div>
+			</div>
+			<div class="row">
+				<div class="col-4 text-grey-8">ตำแหน่งผู้ยืนขอ</div>
+				<div class="col">{{ props.data.positionName }}</div>
+			</div>
+			<div class="row">
+				<div class="col-4 text-grey-8">ระดับผู้ยืนขอ</div>
+				<div class="col">{{ props.data.positionLevelName }}</div>
+			</div>
+			<div class="row">
+				<div class="col-4 text-grey-8">สังกัดผู้ยืนขอ</div>
+				<div class="col">{{ props.data.organizationName }}</div>
+			</div>
+		</div>
+	</q-card-section>
 </template>
 
 <style scoped></style>