From 6621dfd7f0b7981dede3c44d9f6e802fa869728f Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Mon, 13 Nov 2023 14:36:34 +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=84=E0=B8=AD=E0=B8=A1=E0=B9=80=E0=B8=A1=E0=B8=99=E0=B8=95?=
 =?UTF-8?q?=E0=B9=8C=20code=2005=5FLeave?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_leave/componenst/Calendar.vue  | 245 ++---
 .../componenst/Forms/09_StudyForm.vue         | 859 ++++++++----------
 .../componenst/Forms/10_TrainForm.vue         | 823 ++++++++---------
 .../Forms/11_WorkInternationalForm.vue        |   1 +
 .../05_leave/componenst/Forms/Form.vue        | 224 ++---
 .../05_leave/componenst/ListCalendar.vue      | 111 ++-
 src/modules/05_leave/componenst/Table.vue     | 116 ++-
 7 files changed, 1065 insertions(+), 1314 deletions(-)

diff --git a/src/modules/05_leave/componenst/Calendar.vue b/src/modules/05_leave/componenst/Calendar.vue
index ab97329..c7cce6c 100644
--- a/src/modules/05_leave/componenst/Calendar.vue
+++ b/src/modules/05_leave/componenst/Calendar.vue
@@ -1,3 +1,135 @@
+<script setup lang="ts">
+import { ref, watch, onMounted } from "vue"
+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"
+
+/**
+ * Option ของปฏิทิน
+ */
+const fullCalendar = ref<any>() //ref calendar
+const calendarOptions = ref<CalendarOptions>({
+	plugins: [
+		dayGridPlugin,
+		timeGridPlugin,
+		interactionPlugin, // needed for dateClick
+		listPlugin,
+	],
+	buttonText: {
+		listYear: "รายการ",
+		dayGridMonth: "ปฏิทิน",
+		test: "เพิ่มวันหยุด",
+	},
+	headerToolbar: false,
+	initialView: "dayGridMonth",
+	initialEvents: [], // alternatively, use the `events` setting to fetch from a feed
+	selectable: true,
+	dayMaxEvents: true,
+	weekends: true,
+	locale: "th",
+	locales: allLocales,
+	expandRows: true,
+	nowIndicator: true,
+	height: "100%",
+	eventColor: "#fff",
+	eventTextColor: "#4A5568",
+	eventBorderColor: "#50a5fc",
+	displayEventTime: false,
+	editable: true,
+	events: [
+		{ groupId: "3", title: "ลากิจส่วนตัว", start: "2023-10-10", allDay: true, status: "done", color: "#E3FDDA" },
+		{ groupId: "3", title: "ลากิจส่วนตัว", start: "2023-11-10", allDay: true, status: "done", color: "#E3FDDA" },
+		{ groupId: "3", title: "ลากิจส่วนตัว", start: "2023-10-11", allDay: true, status: "done", color: "#E3FDDA" },
+		{ groupId: "3", title: "ลากิจส่วนตัว", start: "2023-10-12", allDay: true, status: "done", color: "#E3FDDA" },
+		{ groupId: "3", title: "ลากิจส่วนตัว", start: "2023-10-13", allDay: true, status: "done", color: "#E3FDDA" },
+		{ groupId: "2", title: "ลาป่วย", start: "2023-10-19", allDay: true, status: "proceed", color: "#e4f3ff" },
+		{ groupId: "1", title: "ลาป่วย", start: "2023-10-20", allDay: true, status: "new", color: "#FFF1CC" },
+	],
+})
+
+/**
+ * ตัวแปรทั้งหมด
+ */
+const modalCancel = ref(false)
+const title = ref("")
+const location = ref("บ้าน")
+const subject = ref("ลาป่วย")
+const dateStart = ref("20 ส.ค. 2566")
+const dateEnd = ref("21 ส.ค. 2566")
+const numDate = ref("20")
+const place = ref("บ้าน")
+const phone = ref("000-00000000")
+const reason = ref("ยกเลิกการลา")
+const model = ref(null)
+const modeCancel = ref(true)
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+	dateYear: {
+		//filter ปี วันหยุด
+		type: Number,
+		default: () => new Date().getFullYear(),
+	},
+	dateMonth: {
+		//filter เดือน วันหยุด
+		type: Number,
+		default: () => new Date().getMonth(),
+	},
+	// refreshData: {
+	// 	//หน้า main มีการอัพเดทค่าให้ refresh data
+	// 	type: Boolean,
+	// 	required: true,
+	// },
+	fetchDataSummaryCalendar: {
+		//ฟังก์ชันอัพเดทสรุปวันหยุด
+		type: Function,
+		default: () => console.log("not function"),
+	},
+})
+
+/**
+ * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
+ */
+onMounted(async () => {
+	if (fullCalendar !== undefined) {
+		const calen = fullCalendar.value.getApi()
+		const date = new Date(props.dateYear, props.dateMonth)
+		calen.gotoDate(date)
+	}
+})
+
+/**
+ * ค่า props(วันเดือนปีที่เลือก) ตอนอัพเดท ค่าฏิทินให้อัพเดทใหม่
+ */
+watch(props, async (count, prevCount) => {
+	const calen = fullCalendar.value.getApi()
+	const date = new Date(props.dateYear, props.dateMonth)
+	calen.gotoDate(date)
+})
+
+/**
+ * ฟังชันน์ยกเลิก model
+ * @param text
+ */
+const cancel = async (text: string) => {
+	title.value = text
+	modalCancel.value = true
+	modeCancel.value = true
+}
+/**
+ * ฟังชันน์เปิด model
+ * @param text
+ */
+const view = async (text: string) => {
+	title.value = text
+	modalCancel.value = true
+	modeCancel.value = false
+}
+</script>
 <template>
 	<div class="q-mt-sm">
 		<div class="row q-gutter-sm q-pb-sm main-content">
@@ -79,119 +211,6 @@
 		</q-card>
 	</q-dialog>
 </template>
-<script setup lang="ts">
-import { ref, watch, onMounted } from "vue"
-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"
-const fullCalendar = ref<any>() //ref calendar
-const calendarOptions = ref<CalendarOptions>({
-	plugins: [
-		dayGridPlugin,
-		timeGridPlugin,
-		interactionPlugin, // needed for dateClick
-		listPlugin,
-	],
-	buttonText: {
-		listYear: "รายการ",
-		dayGridMonth: "ปฏิทิน",
-		test: "เพิ่มวันหยุด",
-	},
-	headerToolbar: false,
-	initialView: "dayGridMonth",
-	initialEvents: [], // alternatively, use the `events` setting to fetch from a feed
-	selectable: true,
-	dayMaxEvents: true,
-	weekends: true,
-	locale: "th",
-	locales: allLocales,
-	expandRows: true,
-	nowIndicator: true,
-	height: "100%",
-	eventColor: "#fff",
-	eventTextColor: "#4A5568",
-	eventBorderColor: "#50a5fc",
-	displayEventTime: false,
-	editable: true,
-	events: [
-		{ groupId: "3", title: "ลากิจส่วนตัว", start: "2023-10-10", allDay: true, status: "done", color: "#E3FDDA" },
-		{ groupId: "3", title: "ลากิจส่วนตัว", start: "2023-11-10", allDay: true, status: "done", color: "#E3FDDA" },
-		{ groupId: "3", title: "ลากิจส่วนตัว", start: "2023-10-11", allDay: true, status: "done", color: "#E3FDDA" },
-		{ groupId: "3", title: "ลากิจส่วนตัว", start: "2023-10-12", allDay: true, status: "done", color: "#E3FDDA" },
-		{ groupId: "3", title: "ลากิจส่วนตัว", start: "2023-10-13", allDay: true, status: "done", color: "#E3FDDA" },
-		{ groupId: "2", title: "ลาป่วย", start: "2023-10-19", allDay: true, status: "proceed", color: "#e4f3ff" },
-		{ groupId: "1", title: "ลาป่วย", start: "2023-10-20", allDay: true, status: "new", color: "#FFF1CC" },
-	],
-})
-
-const modalCancel = ref(false)
-const title = ref("")
-const location = ref("บ้าน")
-const subject = ref("ลาป่วย")
-const dateStart = ref("20 ส.ค. 2566")
-const dateEnd = ref("21 ส.ค. 2566")
-const numDate = ref("20")
-const place = ref("บ้าน")
-const phone = ref("000-00000000")
-const reason = ref("ยกเลิกการลา")
-const model = ref(null)
-const modeCancel = ref(true)
-const props = defineProps({
-	dateYear: {
-		//filter ปี วันหยุด
-		type: Number,
-		default: () => new Date().getFullYear(),
-	},
-	dateMonth: {
-		//filter เดือน วันหยุด
-		type: Number,
-		default: () => new Date().getMonth(),
-	},
-	// refreshData: {
-	// 	//หน้า main มีการอัพเดทค่าให้ refresh data
-	// 	type: Boolean,
-	// 	required: true,
-	// },
-	fetchDataSummaryCalendar: {
-		//ฟังก์ชันอัพเดทสรุปวันหยุด
-		type: Function,
-		default: () => console.log("not function"),
-	},
-})
-/**
- * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
- */
-onMounted(async () => {
-	if (fullCalendar !== undefined) {
-		const calen = fullCalendar.value.getApi()
-		const date = new Date(props.dateYear, props.dateMonth)
-		calen.gotoDate(date)
-	}
-})
-
-/**
- * ค่า props(วันเดือนปีที่เลือก) ตอนอัพเดท ค่าฏิทินให้อัพเดทใหม่
- */
-watch(props, async (count, prevCount) => {
-	const calen = fullCalendar.value.getApi()
-	const date = new Date(props.dateYear, props.dateMonth)
-	calen.gotoDate(date)
-})
-const cancel = async (text: string) => {
-	title.value = text
-	modalCancel.value = true
-	modeCancel.value = true
-}
-const view = async (text: string) => {
-	title.value = text
-	modalCancel.value = true
-	modeCancel.value = false
-}
-</script>
 
 <style scope lang="scss">
 .main-content {
diff --git a/src/modules/05_leave/componenst/Forms/09_StudyForm.vue b/src/modules/05_leave/componenst/Forms/09_StudyForm.vue
index 5a337c3..e16d7cc 100644
--- a/src/modules/05_leave/componenst/Forms/09_StudyForm.vue
+++ b/src/modules/05_leave/componenst/Forms/09_StudyForm.vue
@@ -1,525 +1,426 @@
 <script setup lang="ts">
-import { reactive, ref, computed } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
-import type { FormRef09 } from "@/modules/05_leave/interface/request/AddAbsence";
+import { reactive, ref, computed } from "vue"
+import { useCounterMixin } from "@/stores/mixin"
+import { useQuasar } from "quasar"
+import type { FormRef09 } from "@/modules/05_leave/interface/request/AddAbsence"
 
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const { date2Thai, dialogConfirm, arabicNumberToText, calculateDurationYmd } =
-  mixin;
+const $q = useQuasar()
+const mixin = useCounterMixin()
+const { date2Thai, dialogConfirm, arabicNumberToText, calculateDurationYmd } = mixin
 
-const edit = ref<boolean>(true);
-const files = ref<any>(null);
+const edit = ref<boolean>(true)
+const files = ref<any>(null)
 
 /** ตัวแปร ref สำหรับแสดง validate */
-const dateLeaveStartRef = ref<object | null>(null);
-const dateLeaveEndRef = ref<object | null>(null);
-const birthdayRef = ref<object | null>(null);
-const dateGovernmentRef = ref<object | null>(null);
-const salaryRef = ref<object | null>(null);
-const telRef = ref<object | null>(null);
-const addressLeaveRef = ref<object | null>(null);
-const capitalRef = ref<object | null>(null);
-const countryRef = ref<object | null>(null);
-const nameEducationRef = ref<object | null>(null);
-const degreeRef = ref<object | null>(null);
-const studyRef = ref<object | null>(null);
-const writeatRef = ref<object | null>(null);
+const dateLeaveStartRef = ref<object | null>(null)
+const dateLeaveEndRef = ref<object | null>(null)
+const birthdayRef = ref<object | null>(null)
+const dateGovernmentRef = ref<object | null>(null)
+const salaryRef = ref<object | null>(null)
+const telRef = ref<object | null>(null)
+const addressLeaveRef = ref<object | null>(null)
+const capitalRef = ref<object | null>(null)
+const countryRef = ref<object | null>(null)
+const nameEducationRef = ref<object | null>(null)
+const degreeRef = ref<object | null>(null)
+const studyRef = ref<object | null>(null)
+const writeatRef = ref<object | null>(null)
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
-  data: {
-    type: Array,
-    default: null,
-  },
-  onSubmit: {
-    type: Function,
-    default: () => "",
-  },
-});
+	data: {
+		type: Array,
+		default: null,
+	},
+	onSubmit: {
+		type: Function,
+		default: () => "",
+	},
+})
 
 /** ข้อมูล v-model ของฟอร์ม */
 const formData = reactive<any>({
-  writeat: "",
-  dateLeaveStart: null,
-  dateLeaveEnd: null,
-  birthday: new Date(),
-  dateGovernment: new Date(),
-  salary: 10000,
-  salaryText: arabicNumberToText(10000),
-  tel: "",
-  addressLeave: "test",
-  capital: "",
-  country: "",
-  nameEducation: "",
-  degree: "",
-  study: "",
-  file: "",
-  info: "",
-});
+	writeat: "",
+	dateLeaveStart: null,
+	dateLeaveEnd: null,
+	birthday: new Date(),
+	dateGovernment: new Date(),
+	salary: 10000,
+	salaryText: arabicNumberToText(10000),
+	tel: "",
+	addressLeave: "test",
+	capital: "",
+	country: "",
+	nameEducation: "",
+	degree: "",
+	study: "",
+	file: "",
+	info: "",
+})
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const formRef: FormRef09 = {
-  dateLeaveStart: dateLeaveStartRef,
-  dateLeaveEnd: dateLeaveEndRef,
-  birthday: birthdayRef,
-  dateGovernment: dateGovernmentRef,
-  salary: salaryRef,
-  tel: telRef,
-  addressLeave: addressLeaveRef,
-  capital: capitalRef,
-  country: countryRef,
-  nameEducation: nameEducationRef,
-  degree: degreeRef,
-  study: studyRef,
-  writeat: writeatRef,
-};
+	dateLeaveStart: dateLeaveStartRef,
+	dateLeaveEnd: dateLeaveEndRef,
+	birthday: birthdayRef,
+	dateGovernment: dateGovernmentRef,
+	salary: salaryRef,
+	tel: telRef,
+	addressLeave: addressLeaveRef,
+	capital: capitalRef,
+	country: countryRef,
+	nameEducation: nameEducationRef,
+	degree: degreeRef,
+	study: studyRef,
+	writeat: writeatRef,
+}
 
 /** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
 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)) {
-    onSubmit();
-  }
+	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)) {
+		onSubmit()
+	}
 }
 
 /** ฟังชั่น บันทึก */
 function onSubmit() {
-  dialogConfirm(
-    $q,
-    async () => {
-      console.log(formData);
-      props.onSubmit();
-    },
-    "ยืนยันการบันทึกข้อมูล",
-    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
-  );
+	dialogConfirm(
+		$q,
+		async () => {
+			console.log(formData)
+			props.onSubmit()
+		},
+		"ยืนยันการบันทึกข้อมูล",
+		"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+	)
 }
 
+/**
+ * แปลงตัวเลขเงินเดือน
+ */
 const formattedSalary = computed(() => {
-  return formData.salary !== null
-    ? formData.salary.toLocaleString("th-TH")
-    : "";
-});
+	return formData.salary !== null ? formData.salary.toLocaleString("th-TH") : ""
+})
 </script>
 
 <template>
-  <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-  <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</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="formData.writeat"
-          ref="writeatRef"
-          class="col-12 col-sm-12"
-          bg-color="white"
-          dense
-          outlined
-          label="เขียนที่"
-          hide-bottom-space
-          :rules="[(val) => !!val || `${'เขียนที่'}`]"
-        />
+	<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+	<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</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="formData.writeat"
+					ref="writeatRef"
+					class="col-12 col-sm-12"
+					bg-color="white"
+					dense
+					outlined
+					label="เขียนที่"
+					hide-bottom-space
+					:rules="[val => !!val || `${'เขียนที่'}`]"
+				/>
 
-        <datepicker
-          v-model="formData.dateLeaveStart"
-          class="col-12 col-md-4 col-sm-6"
-          menu-class-name="modalfix"
-          autoApply
-          borderless
-          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="dateLeaveStartRef"
-              class="full-width datepicker"
-              bg-color="white"
-              outlined
-              dense
-              lazy-rules
-              hide-bottom-space
-              :label="`${'ลาตั้งแต่วันที่'}`"
-              :model-value="
-                formData.dateLeaveStart != null
-                  ? date2Thai(formData.dateLeaveStart)
-                  : 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="formData.dateLeaveStart" class="col-12 col-md-4 col-sm-6" menu-class-name="modalfix" autoApply borderless 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="dateLeaveStartRef"
+							class="full-width datepicker"
+							bg-color="white"
+							outlined
+							dense
+							lazy-rules
+							hide-bottom-space
+							:label="`${'ลาตั้งแต่วันที่'}`"
+							:model-value="formData.dateLeaveStart != null ? date2Thai(formData.dateLeaveStart) : 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="formData.dateLeaveEnd"
-          class="col-12 col-md-4 col-sm-6"
-          menu-class-name="modalfix"
-          autoApply
-          borderless
-          week-start="0"
-          :locale="'th'"
-          :readonly="!formData.dateLeaveStart"
-          :enableTimePicker="false"
-          :min-date="
-            formData.dateLeaveStart
-              ? new Date(
-                  formData.dateLeaveStart.getTime() + 24 * 60 * 60 * 1000
-                )
-              : null
-          "
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              ref="dateLeaveEndRef"
-              class="full-width datepicker"
-              outlined
-              dense
-              lazy-rules
-              bg-color="white"
-              hide-bottom-space
-              :label="`${'ลาถึงวันที่'}`"
-              :readonly="!formData.dateLeaveStart"
-              :model-value="
-                formData.dateLeaveEnd != null
-                  ? date2Thai(formData.dateLeaveEnd)
-                  : 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="formData.dateLeaveEnd"
+					class="col-12 col-md-4 col-sm-6"
+					menu-class-name="modalfix"
+					autoApply
+					borderless
+					week-start="0"
+					:locale="'th'"
+					:readonly="!formData.dateLeaveStart"
+					:enableTimePicker="false"
+					:min-date="formData.dateLeaveStart ? new Date(formData.dateLeaveStart.getTime() + 24 * 60 * 60 * 1000) : null"
+				>
+					<template #year="{ year }">
+						{{ year + 543 }}
+					</template>
+					<template #year-overlay-value="{ value }">
+						{{ parseInt(value + 543) }}
+					</template>
+					<template #trigger>
+						<q-input
+							ref="dateLeaveEndRef"
+							class="full-width datepicker"
+							outlined
+							dense
+							lazy-rules
+							bg-color="white"
+							hide-bottom-space
+							:label="`${'ลาถึงวันที่'}`"
+							:readonly="!formData.dateLeaveStart"
+							:model-value="formData.dateLeaveEnd != null ? date2Thai(formData.dateLeaveEnd) : 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>
 
-        <div class="col-12 col-md-4 col-sm-6">
-          <p
-            v-if="formData.dateLeaveStart && formData.dateLeaveEnd"
-            class="text-weight-bold text-subtitle1 q-mb-none"
-            style="padding-top: 7px; color: #26a69a"
-          >
-            ระยะเวลา
-            {{
-              calculateDurationYmd(
-                formData.dateLeaveStart,
-                formData.dateLeaveEnd
-              )
-            }}
-          </p>
-        </div>
+				<div class="col-12 col-md-4 col-sm-6">
+					<p v-if="formData.dateLeaveStart && formData.dateLeaveEnd" class="text-weight-bold text-subtitle1 q-mb-none" style="padding-top: 7px; color: #26a69a">
+						ระยะเวลา
+						{{ calculateDurationYmd(formData.dateLeaveStart, formData.dateLeaveEnd) }}
+					</p>
+				</div>
 
-        <div class="full-width">
-          <div class="q-col-gutter-sm row">
-            <datepicker
-              v-model="formData.dateGovernment"
-              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="dateGovernmentRef"
-                  class="full-width datepicker"
-                  bg-color="white"
-                  outlined
-                  readonly
-                  dense
-                  hide-bottom-space
-                  :label="`${'วันที่เข้ารับราชการ'}`"
-                  :model-value="
-                    formData.dateGovernment != null
-                      ? date2Thai(formData.dateGovernment)
-                      : 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>
+				<div class="full-width">
+					<div class="q-col-gutter-sm row">
+						<datepicker
+							v-model="formData.dateGovernment"
+							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="dateGovernmentRef"
+									class="full-width datepicker"
+									bg-color="white"
+									outlined
+									readonly
+									dense
+									hide-bottom-space
+									:label="`${'วันที่เข้ารับราชการ'}`"
+									:model-value="formData.dateGovernment != null ? date2Thai(formData.dateGovernment) : 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="formData.birthday"
-              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="birthdayRef"
-                  class="full-width datepicker"
-                  bg-color="white"
-                  outlined
-                  dense
-                  readonly
-                  hide-bottom-space
-                  :label="`${'วันเดือนปีเกิด'}`"
-                  :model-value="
-                    formData.birthday != null
-                      ? date2Thai(formData.birthday)
-                      : 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="formData.birthday"
+							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="birthdayRef"
+									class="full-width datepicker"
+									bg-color="white"
+									outlined
+									dense
+									readonly
+									hide-bottom-space
+									:label="`${'วันเดือนปีเกิด'}`"
+									:model-value="formData.birthday != null ? date2Thai(formData.birthday) : 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>
 
-            <q-input
-              v-model="formattedSalary"
-              ref="salaryRef"
-              class="col-12 col-sm-6 col-md-3"
-              bg-color="white"
-              dense
-              outlined
-              readonly
-              label="เงินเดือนปัจจุบัน"
-            />
+						<q-input v-model="formattedSalary" ref="salaryRef" class="col-12 col-sm-6 col-md-3" bg-color="white" dense outlined readonly label="เงินเดือนปัจจุบัน" />
 
-            <q-input
-              v-model="formData.salaryText"
-              ref="salaryRef"
-              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
+							v-model="formData.salaryText"
+							ref="salaryRef"
+							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="formData.nameEducation"
-              ref="nameEducationRef"
-              class="col-12 col-sm-6 col-md-4"
-              bg-color="white"
-              dense
-              outlined
-              label="ชื่อสถานศึกษา"
-              hide-bottom-space
-              :rules="[(val) => !!val || `${'กรุณากรอกชื่อสถานศึกษา'}`]"
-            />
+				<div class="full-width">
+					<div class="q-col-gutter-sm row">
+						<q-input
+							v-model="formData.nameEducation"
+							ref="nameEducationRef"
+							class="col-12 col-sm-6 col-md-4"
+							bg-color="white"
+							dense
+							outlined
+							label="ชื่อสถานศึกษา"
+							hide-bottom-space
+							:rules="[val => !!val || `${'กรุณากรอกชื่อสถานศึกษา'}`]"
+						/>
 
-            <q-input
-              v-model="formData.degree"
-              ref="degreeRef"
-              class="col-12 col-sm-6 col-md-4"
-              bg-color="white"
-              dense
-              outlined
-              label="ชั้นปริญญา"
-              hide-bottom-space
-              :rules="[(val) => !!val || `${'กรุณากรอกชั้นปริญญา'}`]"
-            />
+						<q-input
+							v-model="formData.degree"
+							ref="degreeRef"
+							class="col-12 col-sm-6 col-md-4"
+							bg-color="white"
+							dense
+							outlined
+							label="ชั้นปริญญา"
+							hide-bottom-space
+							:rules="[val => !!val || `${'กรุณากรอกชั้นปริญญา'}`]"
+						/>
 
-            <q-input
-              v-model="formData.study"
-              ref="studyRef"
-              class="col-12 col-sm-6 col-md-4"
-              bg-color="white"
-              dense
-              outlined
-              label="ศึกษาวิชา"
-              hide-bottom-space
-              :rules="[(val) => !!val || `${'กรุณากรอกศึกษาวิชา'}`]"
-            />
+						<q-input
+							v-model="formData.study"
+							ref="studyRef"
+							class="col-12 col-sm-6 col-md-4"
+							bg-color="white"
+							dense
+							outlined
+							label="ศึกษาวิชา"
+							hide-bottom-space
+							:rules="[val => !!val || `${'กรุณากรอกศึกษาวิชา'}`]"
+						/>
 
-            <q-input
-              v-model="formData.country"
-              ref="countryRef"
-              class="col-12 col-sm-6 col-md-4"
-              bg-color="white"
-              dense
-              outlined
-              label="ประเทศ"
-              hide-bottom-space
-              :rules="[(val) => !!val || `${'กรุณากรอกประเทศ'}`]"
-            />
+						<q-input
+							v-model="formData.country"
+							ref="countryRef"
+							class="col-12 col-sm-6 col-md-4"
+							bg-color="white"
+							dense
+							outlined
+							label="ประเทศ"
+							hide-bottom-space
+							:rules="[val => !!val || `${'กรุณากรอกประเทศ'}`]"
+						/>
 
-            <q-input
-              v-model="formData.capital"
-              ref="capitalRef"
-              class="col-12 col-sm-6 col-md-4"
-              bg-color="white"
-              dense
-              outlined
-              label="ด้วยทุน"
-              hide-bottom-space
-              :rules="[(val) => !!val || `${'กรุณากรอกด้วยทุน'}`]"
-            />
+						<q-input
+							v-model="formData.capital"
+							ref="capitalRef"
+							class="col-12 col-sm-6 col-md-4"
+							bg-color="white"
+							dense
+							outlined
+							label="ด้วยทุน"
+							hide-bottom-space
+							:rules="[val => !!val || `${'กรุณากรอกด้วยทุน'}`]"
+						/>
 
-            <q-input
-              v-model="formData.tel"
-              ref="telRef"
-              class="col-12 col-sm-6 col-md-4"
-              bg-color="white"
-              dense
-              outlined
-              unmasked-value
-              hide-bottom-space
-              mask="(###)-###-####"
-              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-              :rules="[
-                (val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
-              ]"
-            />
+						<q-input
+							v-model="formData.tel"
+							ref="telRef"
+							class="col-12 col-sm-6 col-md-4"
+							bg-color="white"
+							dense
+							outlined
+							unmasked-value
+							hide-bottom-space
+							mask="(###)-###-####"
+							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
+						/>
 
-            <q-input
-              v-model="formData.addressLeave"
-              ref="addressLeaveRef"
-              class="col-12"
-              bg-color="white"
-              dense
-              outlined
-              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-              hide-bottom-space
-              :rules="[
-                (val) => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
-              ]"
-            />
-          </div>
-        </div>
+						<q-input
+							v-model="formData.addressLeave"
+							ref="addressLeaveRef"
+							class="col-12"
+							bg-color="white"
+							dense
+							outlined
+							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+							hide-bottom-space
+							:rules="[val => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
+						/>
+					</div>
+				</div>
 
-        <q-input
-          v-model="formData.info"
-          class="col-12 q-mt-sm"
-          bg-color="white"
-          dense
-          outlined
-          type="textarea"
-          label="รายละเอียด"
-        />
+				<q-input v-model="formData.info" class="col-12 q-mt-sm" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
 
-        <div class="col-12 col-sm-6">
-          <q-file
-            v-model="formData.file"
-            bg-color="white"
-            dense
-            outlined
-            multiple
-            label="เอกสารประกอบ"
-          >
-            <template v-slot:prepend>
-              <q-icon name="attach_file" color="primary" />
-            </template>
-          </q-file>
-        </div>
+				<div class="col-12 col-sm-6">
+					<q-file v-model="formData.file" bg-color="white" dense outlined multiple label="เอกสารประกอบ">
+						<template v-slot:prepend>
+							<q-icon name="attach_file" color="primary" />
+						</template>
+					</q-file>
+				</div>
 
-        <div class="col-12 row" v-if="!edit">
-          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-            <div class="q-pl-sm text-weight-bold text-dark">
-              เอกสารเพิ่มเติม
-            </div>
-          </div>
-          <q-card bordered flat class="full-width">
-            <q-list separator>
-              <q-item v-for="file in files" :key="file.key" class="q-my-xs">
-                <q-item-section>
-                  <q-item-label class="full-width ellipsis">
-                    {{ file.fileName }}
-                  </q-item-label>
+				<div class="col-12 row" v-if="!edit">
+					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
+					</div>
+					<q-card bordered flat class="full-width">
+						<q-list separator>
+							<q-item v-for="file in files" :key="file.key" class="q-my-xs">
+								<q-item-section>
+									<q-item-label class="full-width ellipsis">
+										{{ file.fileName }}
+									</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
-        id="onSubmit"
-        type="submit"
-        unelevated
-        dense
-        class="q-px-md items-center btnBlue"
-        label="บันทึก"
-      />
-    </div>
-  </form>
+									<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 id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก" />
+		</div>
+	</form>
 </template>
diff --git a/src/modules/05_leave/componenst/Forms/10_TrainForm.vue b/src/modules/05_leave/componenst/Forms/10_TrainForm.vue
index 087da7d..c71d7d9 100644
--- a/src/modules/05_leave/componenst/Forms/10_TrainForm.vue
+++ b/src/modules/05_leave/componenst/Forms/10_TrainForm.vue
@@ -1,494 +1,397 @@
 <script setup lang="ts">
-import { reactive, ref, computed } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
-import type { FormRef10 } from "@/modules/05_leave/interface/request/AddAbsence";
-import { useQuasar } from "quasar";
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const { date2Thai, dialogConfirm, arabicNumberToText, calculateDurationYmd } =
-  mixin;
-const edit = ref<boolean>(true);
+import { reactive, ref, computed } from "vue"
+import { useCounterMixin } from "@/stores/mixin"
+import type { FormRef10 } from "@/modules/05_leave/interface/request/AddAbsence"
+import { useQuasar } from "quasar"
+
+const $q = useQuasar()
+const mixin = useCounterMixin()
+const { date2Thai, dialogConfirm, arabicNumberToText, calculateDurationYmd } = mixin
+const edit = ref<boolean>(true)
+const files = ref<any>(null)
+
+/** รับ props มาจากหน้าหลัก */
 const props = defineProps({
-  data: {
-    type: Array,
-    default: null,
-  },
-  onSubmit: {
-    type: Function,
-    default: () => "",
-  },
-});
-const files = ref<any>(null);
+	data: {
+		type: Array,
+		default: null,
+	},
+	onSubmit: {
+		type: Function,
+		default: () => "",
+	},
+})
+
+/** ข้อมูล v-model ของฟอร์ม */
 const formData = reactive<any>({
-  writeat: "",
-  dateLeaveStart: null,
-  dateLeaveEnd: null,
-  birthday: new Date(),
-  dateGovernment: new Date(),
-  salary: 10000,
-  salaryText: arabicNumberToText(10000),
-  tel: "",
-  addressLeave: "test",
-  capital: "",
-  country: "",
-  course: "",
-  location: "",
-  file: "",
-  info: "",
-});
+	writeat: "",
+	dateLeaveStart: null,
+	dateLeaveEnd: null,
+	birthday: new Date(),
+	dateGovernment: new Date(),
+	salary: 10000,
+	salaryText: arabicNumberToText(10000),
+	tel: "",
+	addressLeave: "test",
+	capital: "",
+	country: "",
+	course: "",
+	location: "",
+	file: "",
+	info: "",
+})
 
-const dateLeaveStartRef = ref<object | null>(null);
-const dateLeaveEndRef = ref<object | null>(null);
-const birthdayRef = ref<object | null>(null);
-const dateGovernmentRef = ref<object | null>(null);
-const telRef = ref<object | null>(null);
-const addressLeaveRef = ref<object | null>(null);
-const capitalRef = ref<object | null>(null);
-const countryRef = ref<object | null>(null);
-const courseRef = ref<object | null>(null);
-const locationRef = ref<object | null>(null);
-const writeatRef = ref<object | null>(null);
+/** ตัวแปร ref สำหรับแสดง validate */
+const dateLeaveStartRef = ref<object | null>(null)
+const dateLeaveEndRef = ref<object | null>(null)
+const birthdayRef = ref<object | null>(null)
+const dateGovernmentRef = ref<object | null>(null)
+const telRef = ref<object | null>(null)
+const addressLeaveRef = ref<object | null>(null)
+const capitalRef = ref<object | null>(null)
+const countryRef = ref<object | null>(null)
+const courseRef = ref<object | null>(null)
+const locationRef = ref<object | null>(null)
+const writeatRef = ref<object | null>(null)
 
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const formRef: FormRef10 = {
-  dateLeaveStart: dateLeaveStartRef,
-  dateLeaveEnd: dateLeaveEndRef,
-  birthday: birthdayRef,
-  dateGovernment: dateGovernmentRef,
-  tel: telRef,
-  addressLeave: addressLeaveRef,
-  capital: capitalRef,
-  country: countryRef,
-  course: courseRef,
-  location: locationRef,
-  writeat: writeatRef,
-};
+	dateLeaveStart: dateLeaveStartRef,
+	dateLeaveEnd: dateLeaveEndRef,
+	birthday: birthdayRef,
+	dateGovernment: dateGovernmentRef,
+	tel: telRef,
+	addressLeave: addressLeaveRef,
+	capital: capitalRef,
+	country: countryRef,
+	course: courseRef,
+	location: locationRef,
+	writeat: writeatRef,
+}
 
+/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
 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)) {
-    onSubmit();
-  }
+	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)) {
+		onSubmit()
+	}
 }
+
+/** ฟังชั่น บันทึก */
 function onSubmit() {
-  dialogConfirm(
-    $q,
-    async () => {
-      console.log(formData);
-      props.onSubmit();
-    },
-    "ยืนยันการบันทึกข้อมูล",
-    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
-  );
+	dialogConfirm(
+		$q,
+		async () => {
+			console.log(formData)
+			props.onSubmit()
+		},
+		"ยืนยันการบันทึกข้อมูล",
+		"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+	)
 }
-
+/**
+ * แปลงตัวเลขเงินเดือน
+ */
 const formattedSalary = computed(() => {
-  return formData.salary !== null
-    ? formData.salary.toLocaleString("th-TH")
-    : "";
-});
+	return formData.salary !== null ? formData.salary.toLocaleString("th-TH") : ""
+})
 </script>
 
 <template>
-  <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-  <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</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="formData.writeat"
-          ref="writeatRef"
-          class="col-12 col-sm-12"
-          bg-color="white"
-          dense
-          outlined
-          label="เขียนที่"
-          hide-bottom-space
-          :rules="[(val) => !!val || `${'เขียนที่'}`]"
-        />
+	<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+	<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</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="formData.writeat"
+					ref="writeatRef"
+					class="col-12 col-sm-12"
+					bg-color="white"
+					dense
+					outlined
+					label="เขียนที่"
+					hide-bottom-space
+					:rules="[val => !!val || `${'เขียนที่'}`]"
+				/>
 
-        <datepicker
-          v-model="formData.dateLeaveStart"
-          class="col-12 col-md-4 col-sm-6"
-          menu-class-name="modalfix"
-          autoApply
-          borderless
-          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="dateLeaveStartRef"
-              class="full-width datepicker"
-              bg-color="white"
-              outlined
-              dense
-              lazy-rules
-              hide-bottom-space
-              :label="`${'ลาตั้งแต่วันที่'}`"
-              :model-value="
-                formData.dateLeaveStart != null
-                  ? date2Thai(formData.dateLeaveStart)
-                  : 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="formData.dateLeaveStart" class="col-12 col-md-4 col-sm-6" menu-class-name="modalfix" autoApply borderless 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="dateLeaveStartRef"
+							class="full-width datepicker"
+							bg-color="white"
+							outlined
+							dense
+							lazy-rules
+							hide-bottom-space
+							:label="`${'ลาตั้งแต่วันที่'}`"
+							:model-value="formData.dateLeaveStart != null ? date2Thai(formData.dateLeaveStart) : 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="formData.dateLeaveEnd"
-          class="col-12 col-md-4 col-sm-6"
-          menu-class-name="modalfix"
-          autoApply
-          borderless
-          week-start="0"
-          :readonly="!formData.dateLeaveStart"
-          :locale="'th'"
-          :enableTimePicker="false"
-          :min-date="
-            formData.dateLeaveStart
-              ? new Date(
-                  formData.dateLeaveStart.getTime() + 24 * 60 * 60 * 1000
-                )
-              : null
-          "
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              ref="dateLeaveEndRef"
-              class="full-width datepicker"
-              outlined
-              dense
-              lazy-rules
-              bg-color="white"
-              hide-bottom-space
-              :label="`${'ลาถึงวันที่'}`"
-              :readonly="!formData.dateLeaveStart"
-              :model-value="
-                formData.dateLeaveEnd != null
-                  ? date2Thai(formData.dateLeaveEnd)
-                  : 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="formData.dateLeaveEnd"
+					class="col-12 col-md-4 col-sm-6"
+					menu-class-name="modalfix"
+					autoApply
+					borderless
+					week-start="0"
+					:readonly="!formData.dateLeaveStart"
+					:locale="'th'"
+					:enableTimePicker="false"
+					:min-date="formData.dateLeaveStart ? new Date(formData.dateLeaveStart.getTime() + 24 * 60 * 60 * 1000) : null"
+				>
+					<template #year="{ year }">
+						{{ year + 543 }}
+					</template>
+					<template #year-overlay-value="{ value }">
+						{{ parseInt(value + 543) }}
+					</template>
+					<template #trigger>
+						<q-input
+							ref="dateLeaveEndRef"
+							class="full-width datepicker"
+							outlined
+							dense
+							lazy-rules
+							bg-color="white"
+							hide-bottom-space
+							:label="`${'ลาถึงวันที่'}`"
+							:readonly="!formData.dateLeaveStart"
+							:model-value="formData.dateLeaveEnd != null ? date2Thai(formData.dateLeaveEnd) : 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>
 
-        <div class="col-12 col-md-4 col-sm-6">
-          <p
-            v-if="formData.dateLeaveStart && formData.dateLeaveEnd"
-            class="text-weight-bold text-subtitle1 q-mb-none"
-            style="padding-top: 7px; color: #26a69a"
-          >
-            ระยะเวลา
-            {{
-              calculateDurationYmd(
-                formData.dateLeaveStart,
-                formData.dateLeaveEnd
-              )
-            }}
-          </p>
-        </div>
+				<div class="col-12 col-md-4 col-sm-6">
+					<p v-if="formData.dateLeaveStart && formData.dateLeaveEnd" class="text-weight-bold text-subtitle1 q-mb-none" style="padding-top: 7px; color: #26a69a">
+						ระยะเวลา
+						{{ calculateDurationYmd(formData.dateLeaveStart, formData.dateLeaveEnd) }}
+					</p>
+				</div>
 
-        <div class="full-width">
-          <div class="q-col-gutter-sm row">
-            <datepicker
-              v-model="formData.dateGovernment"
-              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="dateGovernmentRef"
-                  class="full-width datepicker"
-                  outlined
-                  readonly
-                  bg-color="white"
-                  dense
-                  hide-bottom-space
-                  :label="`${'วันที่เข้ารับราชการ'}`"
-                  :model-value="
-                    formData.dateGovernment != null
-                      ? date2Thai(formData.dateGovernment)
-                      : 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>
+				<div class="full-width">
+					<div class="q-col-gutter-sm row">
+						<datepicker
+							v-model="formData.dateGovernment"
+							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="dateGovernmentRef"
+									class="full-width datepicker"
+									outlined
+									readonly
+									bg-color="white"
+									dense
+									hide-bottom-space
+									:label="`${'วันที่เข้ารับราชการ'}`"
+									:model-value="formData.dateGovernment != null ? date2Thai(formData.dateGovernment) : 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="formData.birthday"
-              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="birthdayRef"
-                  class="full-width datepicker"
-                  bg-color="white"
-                  outlined
-                  dense
-                  readonly
-                  hide-bottom-space
-                  :label="`${'วันเดือนปีเกิด'}`"
-                  :model-value="
-                    formData.birthday != null
-                      ? date2Thai(formData.birthday)
-                      : 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="formData.birthday"
+							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="birthdayRef"
+									class="full-width datepicker"
+									bg-color="white"
+									outlined
+									dense
+									readonly
+									hide-bottom-space
+									:label="`${'วันเดือนปีเกิด'}`"
+									:model-value="formData.birthday != null ? date2Thai(formData.birthday) : 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>
 
-            <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="formData.salaryText"
-              class="col-12 col-sm-6 col-md-3"
-              dense
-              readonly
-              outlined
-              bg-color="white"
-              label="เงินเดือนปัจจุบัน (ตัวอักษร)"
-            />
-          </div>
-        </div>
+						<q-input v-model="formData.salaryText" 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="formData.course"
-              class="col-12 col-sm-6 col-md-4"
-              ref="courseRef"
-              bg-color="white"
-              dense
-              outlined
-              label="ด้าน/หลักสูตร"
-              hide-bottom-space
-              :rules="[(val) => !!val || `${'กรุณากรอกด้าน/หลักสูตร'}`]"
-            />
+				<div class="full-width">
+					<div class="q-col-gutter-sm row">
+						<q-input
+							v-model="formData.course"
+							class="col-12 col-sm-6 col-md-4"
+							ref="courseRef"
+							bg-color="white"
+							dense
+							outlined
+							label="ด้าน/หลักสูตร"
+							hide-bottom-space
+							:rules="[val => !!val || `${'กรุณากรอกด้าน/หลักสูตร'}`]"
+						/>
 
-            <q-input
-              v-model="formData.location"
-              ref="locationRef"
-              class="col-12 col-sm-6 col-md-4"
-              bg-color="white"
-              dense
-              outlined
-              label="ณ สถานที่"
-              hide-bottom-space
-              :rules="[(val) => !!val || `${'กรุณากรอก ณ สถานที่'}`]"
-            />
+						<q-input
+							v-model="formData.location"
+							ref="locationRef"
+							class="col-12 col-sm-6 col-md-4"
+							bg-color="white"
+							dense
+							outlined
+							label="ณ สถานที่"
+							hide-bottom-space
+							:rules="[val => !!val || `${'กรุณากรอก ณ สถานที่'}`]"
+						/>
 
-            <q-input
-              v-model="formData.country"
-              ref="countryRef"
-              class="col-12 col-sm-6 col-md-4"
-              dense
-              bg-color="white"
-              outlined
-              label="ประเทศ"
-              hide-bottom-space
-              :rules="[(val) => !!val || `${'กรุณากรอกประเทศ'}`]"
-            />
+						<q-input
+							v-model="formData.country"
+							ref="countryRef"
+							class="col-12 col-sm-6 col-md-4"
+							dense
+							bg-color="white"
+							outlined
+							label="ประเทศ"
+							hide-bottom-space
+							:rules="[val => !!val || `${'กรุณากรอกประเทศ'}`]"
+						/>
 
-            <q-input
-              v-model="formData.capital"
-              ref="capitalRef"
-              class="col-12 col-sm-6 col-md-4"
-              bg-color="white"
-              dense
-              outlined
-              label="ด้วยทุน"
-              hide-bottom-space
-              :rules="[(val) => !!val || `${'กรุณากรอกด้วยทุน'}`]"
-            />
+						<q-input
+							v-model="formData.capital"
+							ref="capitalRef"
+							class="col-12 col-sm-6 col-md-4"
+							bg-color="white"
+							dense
+							outlined
+							label="ด้วยทุน"
+							hide-bottom-space
+							:rules="[val => !!val || `${'กรุณากรอกด้วยทุน'}`]"
+						/>
 
-            <q-input
-              v-model="formData.tel"
-              class="col-12 col-sm-6 col-md-4"
-              ref="telRef"
-              dense
-              outlined
-              unmasked-value
-              hide-bottom-space
-              bg-color="white"
-              mask="(###)-###-####"
-              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-              :rules="[
-                (val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
-              ]"
-            />
+						<q-input
+							v-model="formData.tel"
+							class="col-12 col-sm-6 col-md-4"
+							ref="telRef"
+							dense
+							outlined
+							unmasked-value
+							hide-bottom-space
+							bg-color="white"
+							mask="(###)-###-####"
+							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
+						/>
 
-            <q-input
-              v-model="formData.addressLeave"
-              ref="addressLeaveRef"
-              class="col-12"
-              bg-color="white"
-              dense
-              outlined
-              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-              hide-bottom-space
-              :rules="[
-                (val) => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
-              ]"
-            />
-          </div>
-        </div>
+						<q-input
+							v-model="formData.addressLeave"
+							ref="addressLeaveRef"
+							class="col-12"
+							bg-color="white"
+							dense
+							outlined
+							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+							hide-bottom-space
+							:rules="[val => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
+						/>
+					</div>
+				</div>
 
-        <q-input
-          v-model="formData.info"
-          class="col-12 q-mt-sm"
-          bg-color="white"
-          dense
-          outlined
-          type="textarea"
-          label="รายละเอียด"
-        />
+				<q-input v-model="formData.info" class="col-12 q-mt-sm" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
 
-        <div class="col-12 col-sm-6">
-          <q-file
-            v-model="formData.file"
-            bg-color="white"
-            dense
-            outlined
-            multiple
-            label="เอกสารประกอบ"
-          >
-            <template v-slot:prepend>
-              <q-icon name="attach_file" color="primary" />
-            </template>
-          </q-file>
-        </div>
+				<div class="col-12 col-sm-6">
+					<q-file v-model="formData.file" bg-color="white" dense outlined multiple label="เอกสารประกอบ">
+						<template v-slot:prepend>
+							<q-icon name="attach_file" color="primary" />
+						</template>
+					</q-file>
+				</div>
 
-        <div class="col-12 row" v-if="!edit">
-          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-            <div class="q-pl-sm text-weight-bold text-dark">
-              เอกสารเพิ่มเติม
-            </div>
-          </div>
-          <q-card bordered flat class="full-width">
-            <q-list separator>
-              <q-item v-for="file in files" :key="file.key" class="q-my-xs">
-                <q-item-section>
-                  <q-item-label class="full-width ellipsis">
-                    {{ file.fileName }}
-                  </q-item-label>
+				<div class="col-12 row" v-if="!edit">
+					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
+					</div>
+					<q-card bordered flat class="full-width">
+						<q-list separator>
+							<q-item v-for="file in files" :key="file.key" class="q-my-xs">
+								<q-item-section>
+									<q-item-label class="full-width ellipsis">
+										{{ file.fileName }}
+									</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
-        id="onSubmit"
-        type="submit"
-        unelevated
-        dense
-        class="q-px-md items-center btnBlue"
-        label="บันทึก"
-      />
-    </div>
-  </form>
+									<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 id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก" />
+		</div>
+	</form>
 </template>
diff --git a/src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue b/src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue
index 22337da..257ea49 100644
--- a/src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue
+++ b/src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue
@@ -83,6 +83,7 @@ function onValidate() {
 	}
 }
 
+/** ฟังชั่น บันทึก */
 function onSubmit() {
 	dialogConfirm(
 		$q,
diff --git a/src/modules/05_leave/componenst/Forms/Form.vue b/src/modules/05_leave/componenst/Forms/Form.vue
index 646615d..4451f11 100644
--- a/src/modules/05_leave/componenst/Forms/Form.vue
+++ b/src/modules/05_leave/componenst/Forms/Form.vue
@@ -1,165 +1,75 @@
 <script setup lang="ts">
-import { ref, reactive,watch } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
-import type { FormData } from "@/modules/05_leave/interface/request/AddAbsence";
-import { useLeaveStore } from '@/modules/05_leave/store'
-const mixin = useCounterMixin();
+import { ref, reactive, watch } from "vue"
+import { useCounterMixin } from "@/stores/mixin"
+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;
+const { date2Thai } = mixin
+
+/** รับ props มาจากหน้าหลัก */
 const props = defineProps({
-  model: {
-    type: String,
-    default: '',
-  },
-  onSubmit: {
-    type: Function,
-    default: () => "",
-  },
-});
+	model: {
+		type: String,
+		default: "",
+	},
+	onSubmit: {
+		type: Function,
+		default: () => "",
+	},
+})
 
+/** ข้อมูล v-model ของฟอร์ม */
 const formData = reactive<FormData>({
-  dateStart: new Date(),
-  subject: "เรื่อง",
-  who: "เรียนผู้ใด",
-  requestName: "ชื่อผู้ยื่น",
-  position: "ตำแหน่ง",
-  level: "ระดับ",
-  ocRequest: "สังกัด",
-  leaveReceived: "2",
-  leaveUse: "1",
-  leaveRemaining: "1",
-});
-
-
-
-
+	dateStart: new Date(),
+	subject: "เรื่อง",
+	who: "เรียนผู้ใด",
+	requestName: "ชื่อผู้ยื่น",
+	position: "ตำแหน่ง",
+	level: "ระดับ",
+	ocRequest: "สังกัด",
+	leaveReceived: "2",
+	leaveUse: "1",
+	leaveRemaining: "1",
+})
 </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="formData.dateStart"
-        :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 datepicker"
-            :model-value="
-              formData.dateStart != null ? date2Thai(formData.dateStart) : 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-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="formData.who"
-        label="เรียน"
-      />
-      <q-input
-        class="col-12 col-sm-3"
-        dense
-        outlined
-        readonly
-        bg-color="white"
-        v-model="formData.requestName"
-        label="ชื่อผู้ยื่นขอ"
-      />
-      <q-input
-        class="col-12 col-sm-3"
-        dense
-        outlined
-        readonly
-        bg-color="white"
-        v-model="formData.position"
-        label="ตำแหน่งผู้ยื่นขอ"
-      />
-      <q-input
-        class="col-12 col-sm-3"
-        dense
-        outlined
-        readonly
-        bg-color="white"
-        v-model="formData.level"
-        label="ระดับผู้ยื่นขอ"
-      />
-      <q-input
-        class="col-12 col-sm-3"
-        dense
-        outlined
-        readonly
-        bg-color="white"
-        v-model="formData.ocRequest"
-        label="สังกัดผู้ยื่นขอ"
-      />
-      <q-input
-        class="col-12 col-sm-4"
-        dense
-        outlined
-        readonly
-        bg-color="white"
-        v-model="formData.leaveReceived"
-        label="จำนวนสิทธิ์การลาที่ได้รับ"
-      />
-      <q-input
-        class="col-12 col-sm-4"
-        dense
-        outlined
-        readonly
-        bg-color="white"
-        v-model="formData.leaveUse"
-        label="จำนวนสิทธิ์การลาที่ใช้ไป"
-      />
-      <q-input
-        class="col-12 col-sm-4"
-        dense
-        outlined
-        readonly
-        bg-color="white"
-        v-model="formData.leaveRemaining"
-        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="formData.dateStart" :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 datepicker"
+						:model-value="formData.dateStart != null ? date2Thai(formData.dateStart) : 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-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="formData.who" label="เรียน" />
+			<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="formData.requestName" label="ชื่อผู้ยื่นขอ" />
+			<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="formData.position" label="ตำแหน่งผู้ยื่นขอ" />
+			<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="formData.level" label="ระดับผู้ยื่นขอ" />
+			<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="formData.ocRequest" label="สังกัดผู้ยื่นขอ" />
+			<q-input class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="formData.leaveReceived" label="จำนวนสิทธิ์การลาที่ได้รับ" />
+			<q-input class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="formData.leaveUse" label="จำนวนสิทธิ์การลาที่ใช้ไป" />
+			<q-input class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="formData.leaveRemaining" label="จำนวนสิทธิ์การลาคงเหลือ" />
+		</div>
+	</q-card>
 </template>
diff --git a/src/modules/05_leave/componenst/ListCalendar.vue b/src/modules/05_leave/componenst/ListCalendar.vue
index f4117f5..eab44a9 100644
--- a/src/modules/05_leave/componenst/ListCalendar.vue
+++ b/src/modules/05_leave/componenst/ListCalendar.vue
@@ -1,3 +1,68 @@
+<script setup lang="ts">
+import type { QTableProps } from "quasar"
+import { ref, onMounted } from "vue"
+import Table from "@/modules/05_leave/componenst/Table.vue"
+import { useLeaveStore } from "@/modules/05_leave/store"
+
+const LeaveData = useLeaveStore()
+const { fecthList, searchFilterTable } = LeaveData
+const filter = ref<string>("")
+
+/**
+ * ตั้งค่า pagination
+ */
+const initialPagination = ref({
+	rowsPerPage: 0,
+})
+
+/**
+ * mocking ค่าในตัวแปร
+ */
+const modalCancel = ref(false)
+const title = ref("")
+const location = ref("บ้าน")
+const subject = ref("ลาป่วย")
+const dateStart = ref("20 ส.ค. 2566")
+const dateEnd = ref("21 ส.ค. 2566")
+const numDate = ref("20")
+const place = ref("บ้าน")
+const phone = ref("000-00000000")
+const reason = ref("ยกเลิกการลา")
+const model = ref(null)
+const modeCancel = ref(true)
+
+/**
+ * ฟังชันน์ยกเลิก model
+ * @param text
+ */
+const cancel = async (text: string) => {
+	title.value = text
+	modalCancel.value = true
+	modeCancel.value = true
+}
+
+/**
+ * ฟังชันน์เปิด model
+ * @param text
+ */
+const view = async (text: string) => {
+	title.value = text
+	modalCancel.value = true
+	modeCancel.value = false
+}
+
+/**
+ * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
+ */
+onMounted(async () => {
+	searchFilterTable()
+	fecthList([
+		{ no: "1", date: "2023-09-20", type: "1", status: "4", year: "1" },
+		{ no: "2", date: "2023-09-19", type: "1", status: "2", year: "1" },
+		{ no: "3", date: "2023-09-10", type: "2", status: "3", year: "1" },
+	])
+})
+</script>
 <template>
 	<Table
 		:style="$q.screen.gt.xs ? 'height: 58.5vh' : ''"
@@ -86,49 +151,3 @@
 		</q-card>
 	</q-dialog>
 </template>
-<script setup lang="ts">
-import type { QTableProps } from "quasar"
-import { ref, onMounted } from "vue"
-import Table from "@/modules/05_leave/componenst/Table.vue"
-import { useLeaveStore } from "@/modules/05_leave/store"
-
-const LeaveData = useLeaveStore()
-const { fecthList, searchFilterTable } = LeaveData
-const filter = ref<string>("")
-
-const initialPagination = ref({
-	rowsPerPage: 0,
-})
-
-const modalCancel = ref(false)
-const title = ref("")
-const location = ref("บ้าน")
-const subject = ref("ลาป่วย")
-const dateStart = ref("20 ส.ค. 2566")
-const dateEnd = ref("21 ส.ค. 2566")
-const numDate = ref("20")
-const place = ref("บ้าน")
-const phone = ref("000-00000000")
-const reason = ref("ยกเลิกการลา")
-const model = ref(null)
-const modeCancel = ref(true)
-
-const cancel = async (text: string) => {
-	title.value = text
-	modalCancel.value = true
-	modeCancel.value = true
-}
-const view = async (text: string) => {
-	title.value = text
-	modalCancel.value = true
-	modeCancel.value = false
-}
-onMounted(async () => {
-	searchFilterTable()
-	fecthList([
-		{ no: "1", date: "2023-09-20", type: "1", status: "4", year: "1" },
-		{ no: "2", date: "2023-09-19", type: "1", status: "2", year: "1" },
-		{ no: "3", date: "2023-09-10", type: "2", status: "3", year: "1" },
-	])
-})
-</script>
diff --git a/src/modules/05_leave/componenst/Table.vue b/src/modules/05_leave/componenst/Table.vue
index d4c26e8..5636066 100644
--- a/src/modules/05_leave/componenst/Table.vue
+++ b/src/modules/05_leave/componenst/Table.vue
@@ -1,3 +1,60 @@
+<script setup lang="ts">
+import { ref, useAttrs, reactive, onMounted } from "vue"
+import { useLeaveStore } from "@/modules/05_leave/store"
+
+const LeaveData = useLeaveStore()
+const { filterSelector, searchFilterTable } = LeaveData
+const attrs = ref<any>(useAttrs())
+const table = ref<any>(null)
+const filterRef = ref<any>(null)
+
+/**
+ * ตั้งค่า pagination
+ */
+const paginationLabel = (start: string, end: string, total: string) => {
+	return start + "-" + end + " ใน " + total
+}
+const pagination = ref({
+	sortBy: "desc",
+	descending: false,
+	page: 1,
+	rowsPerPage: 10,
+})
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+	count: Number,
+	pass: Number,
+	notpass: Number,
+	inputfilter: String,
+	name: String,
+	icon: String,
+	inputvisible: Array,
+	editvisible: Boolean,
+	grid: Boolean,
+	inputShow: Boolean,
+})
+
+/**
+ *  ฟังชันน์ emit ค่าที่กำหนด
+ */
+const emit = defineEmits(["update:inputfilter", "update:inputvisible", "update:editvisible"])
+const updateInput = (value: string | number | null) => {
+	emit("update:inputfilter", value)
+}
+const updateVisible = (value: []) => {
+	emit("update:inputvisible", value)
+}
+
+/**
+ * reset ค่าที่ค้นหา
+ */
+const resetFilter = () => {
+	// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+	emit("update:inputfilter", "")
+	filterRef.value.focus()
+}
+</script>
 <template>
 	<div class="q-py-sm row">
 		<q-card bordered flat class="q-py-sm q-pl-sm col-12 row bg-grey-1 shadow-0">
@@ -100,66 +157,7 @@
 		</q-table>
 	</div>
 </template>
-<script setup lang="ts">
-import { ref, useAttrs, reactive, onMounted } from "vue"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import type { OptionData } from "@/modules/05_leave/interface/index/main"
-import type { an } from "@fullcalendar/core/internal-common"
-import { useCounterMixin } from "@/stores/mixin"
 
-const mixin = useCounterMixin()
-const { showLoader, hideLoader, date2Thai, messageError } = mixin
-const DataStore = useLeaveStore()
-const LeaveData = useLeaveStore()
-const { filterSelector, searchFilterTable } = LeaveData
-const attrs = ref<any>(useAttrs())
-const table = ref<any>(null)
-const filterRef = ref<any>(null)
-
-const rows = ref<any[]>([])
-const type = ref("ทั้งหมด")
-const status = ref("ทั้งหมด")
-const pagination = ref({
-	sortBy: "desc",
-	descending: false,
-	page: 1,
-	rowsPerPage: 10,
-})
-const initialPagination = ref({
-	rowsPerPage: 0,
-})
-const paginationLabel = (start: string, end: string, total: string) => {
-	return start + "-" + end + " ใน " + total
-}
-const props = defineProps({
-	count: Number,
-	pass: Number,
-	notpass: Number,
-
-	inputfilter: String,
-	name: String,
-	icon: String,
-	inputvisible: Array,
-	editvisible: Boolean,
-	grid: Boolean,
-
-	inputShow: Boolean,
-})
-
-const emit = defineEmits(["update:inputfilter", "update:inputvisible", "update:editvisible"])
-const updateInput = (value: string | number | null) => {
-	emit("update:inputfilter", value)
-}
-const updateVisible = (value: []) => {
-	emit("update:inputvisible", value)
-}
-
-const resetFilter = () => {
-	// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
-	emit("update:inputfilter", "")
-	filterRef.value.focus()
-}
-</script>
 <style lang="scss">
 .icon-color {
 	color: #4154b3;