From b7919cbb405cdc05f6d3ab11c59d412bfd9e1678 Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Tue, 14 Nov 2023 11:25:04 +0700
Subject: [PATCH] =?UTF-8?q?=20=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=B1=E0=B8=A7=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=95=E0=B9=88=E0=B8=AD=E0=B8=88=E0=B8=B2=E0=B8=81?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B1=E0=B8=A7=E0=B9=80=E0=B8=A5=E0=B8=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../05_leave/componenst/Forms/01_SickForm.vue |   6 +-
 .../componenst/Forms/04_HelpWifeBirthForm.vue |   6 +-
 .../componenst/Forms/05_VacationForm.vue      |   6 +-
 .../componenst/Forms/06_OrdinationForm.vue    |   6 +-
 .../05_leave/componenst/Forms/07_HajjForm.vue |   6 +-
 .../componenst/Forms/08_MilitaryForm.vue      |   6 +-
 .../componenst/Forms/09_StudyForm.vue         |   6 +-
 .../componenst/Forms/10_TrainForm.vue         |   6 +-
 .../Forms/11_WorkInternationalForm.vue        |   6 +-
 .../componenst/Forms/12_FollowSpouseForm.vue  |   6 +-
 .../Forms/13_RehabilitationForm.vue           |   6 +-
 .../05_leave/componenst/addAbsence.vue        | 814 ++++++++----------
 src/modules/05_leave/views/AddPage.vue        | 288 +++----
 src/modules/05_leave/views/Main.vue           | 725 +++++++---------
 14 files changed, 827 insertions(+), 1066 deletions(-)

diff --git a/src/modules/05_leave/componenst/Forms/01_SickForm.vue b/src/modules/05_leave/componenst/Forms/01_SickForm.vue
index 72f8a4e..19a94f6 100644
--- a/src/modules/05_leave/componenst/Forms/01_SickForm.vue
+++ b/src/modules/05_leave/componenst/Forms/01_SickForm.vue
@@ -100,8 +100,10 @@ function onValidate() {
 
 <!-- ฟอร์มลาป่วย ลาคลอดบุตร และลากิจส่วนตัว -->
 <template>
-	<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-	<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+	<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">
diff --git a/src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue b/src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue
index f7e354e..8c74862 100644
--- a/src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue
+++ b/src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue
@@ -104,8 +104,10 @@ function onValidate() {
 </script>
 
 <template>
-	<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-	<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+	<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">
 		<!-- ลาไปช่วยเหลือภริยาที่คลอดบุตร
     <ul>
diff --git a/src/modules/05_leave/componenst/Forms/05_VacationForm.vue b/src/modules/05_leave/componenst/Forms/05_VacationForm.vue
index 7ed0542..c7ba543 100644
--- a/src/modules/05_leave/componenst/Forms/05_VacationForm.vue
+++ b/src/modules/05_leave/componenst/Forms/05_VacationForm.vue
@@ -120,8 +120,10 @@ function onValidate() {
 			<li>เอกสารประกอบ</li>
 		</ul>
 	</div> -->
-	<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-	<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+	<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">
diff --git a/src/modules/05_leave/componenst/Forms/06_OrdinationForm.vue b/src/modules/05_leave/componenst/Forms/06_OrdinationForm.vue
index c8c834b..fdbc59d 100644
--- a/src/modules/05_leave/componenst/Forms/06_OrdinationForm.vue
+++ b/src/modules/05_leave/componenst/Forms/06_OrdinationForm.vue
@@ -104,8 +104,10 @@ function onSubmit() {
 
 <!-- ฟอร์ม ลาอุปสมบท -->
 <template>
-	<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-	<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+	<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">
diff --git a/src/modules/05_leave/componenst/Forms/07_HajjForm.vue b/src/modules/05_leave/componenst/Forms/07_HajjForm.vue
index 99d7fe9..aa625aa 100644
--- a/src/modules/05_leave/componenst/Forms/07_HajjForm.vue
+++ b/src/modules/05_leave/componenst/Forms/07_HajjForm.vue
@@ -80,8 +80,10 @@ function onSubmit() {
 </script>
 
 <template>
-	<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-	<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+	<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">
diff --git a/src/modules/05_leave/componenst/Forms/08_MilitaryForm.vue b/src/modules/05_leave/componenst/Forms/08_MilitaryForm.vue
index 4e23e5f..b9036c5 100644
--- a/src/modules/05_leave/componenst/Forms/08_MilitaryForm.vue
+++ b/src/modules/05_leave/componenst/Forms/08_MilitaryForm.vue
@@ -92,8 +92,10 @@ function onSubmit() {
 </script>
 
 <template>
-	<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-	<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+	<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">
diff --git a/src/modules/05_leave/componenst/Forms/09_StudyForm.vue b/src/modules/05_leave/componenst/Forms/09_StudyForm.vue
index fe9c0e2..88b3ea6 100644
--- a/src/modules/05_leave/componenst/Forms/09_StudyForm.vue
+++ b/src/modules/05_leave/componenst/Forms/09_StudyForm.vue
@@ -114,8 +114,10 @@ const formattedSalary = computed(() => {
 </script>
 
 <template>
-	<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-	<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+	<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">
diff --git a/src/modules/05_leave/componenst/Forms/10_TrainForm.vue b/src/modules/05_leave/componenst/Forms/10_TrainForm.vue
index 1f76b5e..ad05f93 100644
--- a/src/modules/05_leave/componenst/Forms/10_TrainForm.vue
+++ b/src/modules/05_leave/componenst/Forms/10_TrainForm.vue
@@ -108,8 +108,10 @@ const formattedSalary = computed(() => {
 </script>
 
 <template>
-	<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-	<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+	<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">
diff --git a/src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue b/src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue
index eb97710..88fb942 100644
--- a/src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue
+++ b/src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue
@@ -121,8 +121,10 @@ function onSubmit() {
       และเพิ่มให้อัพโหหลดเอกสารกลับเข้ามาในระบบ
     </p>
   </div> -->
-	<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-	<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+	<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">
diff --git a/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue b/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
index 16d87f6..4b945ca 100644
--- a/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
@@ -143,8 +143,10 @@ function onValidate() {
 			<li>เอกสารประกอบ</li>
 		</ul>
 	</div> -->
-	<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-	<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+	<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">
diff --git a/src/modules/05_leave/componenst/Forms/13_RehabilitationForm.vue b/src/modules/05_leave/componenst/Forms/13_RehabilitationForm.vue
index 7996685..8d0cb68 100644
--- a/src/modules/05_leave/componenst/Forms/13_RehabilitationForm.vue
+++ b/src/modules/05_leave/componenst/Forms/13_RehabilitationForm.vue
@@ -86,8 +86,10 @@ function upLoadFile() {
 </script>
 
 <template>
-	<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-	<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+	<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">
diff --git a/src/modules/05_leave/componenst/addAbsence.vue b/src/modules/05_leave/componenst/addAbsence.vue
index 7c670d9..c1a633f 100644
--- a/src/modules/05_leave/componenst/addAbsence.vue
+++ b/src/modules/05_leave/componenst/addAbsence.vue
@@ -1,504 +1,374 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
-import { useQuasar } from "quasar";
-import { useRouter, useRoute } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
+import { ref, onMounted } from "vue"
+import { useQuasar } from "quasar"
+import { useRouter, useRoute } from "vue-router"
+import { useCounterMixin } from "@/stores/mixin"
 import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http";
-import config from "@/app.config";
-import type { QForm } from "quasar";
+import http from "@/plugins/http"
+import config from "@/app.config"
+import type { QForm } from "quasar"
 
-const mixin = useCounterMixin();
+const mixin = useCounterMixin()
 const dataStore = useLeaveStore()
-const { date2Thai, dateToISO, success, messageError, showLoader, hideLoader } =
-  mixin;
-const router = useRouter();
-const route = useRoute();
-const myform = ref<QForm | null>(null);
-const $q = useQuasar();
-const routeName = router.currentRoute.value.name;
-const id = ref<string>("");
-const fileDocDataUpload = ref<File[]>([]);
-const files = ref<any>();
-const locationAbsence = ref<string>("");
-const levelStudy = ref<string>("");
-const degree = ref<string>("");
-const major = ref<string>("");
-const educational = ref<string>("");
-const studyPeriod = ref<string>("");
-const country = ref<string>("");
-const capital = ref<string>("");
-const tel = ref<number>();
-const detail = ref<string>();
-const Writeat = ref<string>();
-const dateLeaveStart = ref<Date>(new Date());
-const dateLeaveEnd = ref<Date>(new Date());
-const dateTotal = ref<number>();
-const noteReason = ref("");
-const nameFile = ref<string>("");
-const model = ref(null);
-const modelSpecific = ref(null);
+const { date2Thai, dateToISO, success, messageError, showLoader, hideLoader } = mixin
+const router = useRouter()
+const route = useRoute()
+const myform = ref<QForm | null>(null)
+const $q = useQuasar()
+const routeName = router.currentRoute.value.name
+const id = ref<string>("")
+const fileDocDataUpload = ref<File[]>([])
+const files = ref<any>()
+const locationAbsence = ref<string>("")
+const levelStudy = ref<string>("")
+const degree = ref<string>("")
+const major = ref<string>("")
+const educational = ref<string>("")
+const studyPeriod = ref<string>("")
+const country = ref<string>("")
+const capital = ref<string>("")
+const tel = ref<number>()
+const detail = ref<string>()
+const Writeat = ref<string>()
+const dateLeaveStart = ref<Date>(new Date())
+const dateLeaveEnd = ref<Date>(new Date())
+const dateTotal = ref<number>()
+const noteReason = ref("")
+const nameFile = ref<string>("")
+const model = ref(null)
+const modelSpecific = ref(null)
 const options = ref([
-  {id:'0',name:"ลาป่วย"},
-  {id:'1',name:"ลากิจส่วนตัว"},
-  {id:'2',name:"ลาคลอดบุตร"},
-  {id:'3',name:"ลาไปช่วยเหลือภริยาที่คลอดบุตร"},
-  {id:'4',name:"ลาพักผ่อน"},
-  {id:'5',name:"ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ"},
-  {id:'6',name:"ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล"},
-  {id:'7',name:"ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน"},
-  {id:'8',name:"ลาไปปฎิบัติงานในองค์การระหว่างประเทศ"},
-  {id:'9',name:"ลาติดตามคู่สมรส"},
-  {id:'10',name:"ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ"},
-]);
+	{ id: "0", name: "ลาป่วย" },
+	{ id: "1", name: "ลากิจส่วนตัว" },
+	{ id: "2", name: "ลาคลอดบุตร" },
+	{ id: "3", name: "ลาไปช่วยเหลือภริยาที่คลอดบุตร" },
+	{ id: "4", name: "ลาพักผ่อน" },
+	{ id: "5", name: "ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ" },
+	{ id: "6", name: "ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล" },
+	{ id: "7", name: "ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน" },
+	{ id: "8", name: "ลาไปปฎิบัติงานในองค์การระหว่างประเทศ" },
+	{ id: "9", name: "ลาติดตามคู่สมรส" },
+	{ id: "10", name: "ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ" },
+])
 
 const optionsSpecific = ref([
-  {id:'0',name:"ลาไปศึกษา"},
-  {id:'1',name:"ฝึกอบรม"},
-  {id:'2',name:"ปฎิบัติการวิจัย"},
-  {id:'3',name:"ดูงาน"},
-]);
+	{ id: "0", name: "ลาไปศึกษา" },
+	{ id: "1", name: "ฝึกอบรม" },
+	{ id: "2", name: "ปฎิบัติการวิจัย" },
+	{ id: "3", name: "ดูงาน" },
+])
 
 const dataDetail = ref<any>({
-  datetext: "",
-  activeDate: new Date(),
-  createdAt: new Date(),
-  firstName: "",
-  id: "",
-  isActive: true,
-  lastName: "",
-  location: "",
-  organizationPositionOld: "",
-  positionLevelOld: "",
-  positionNumberOld: "",
-  positionTypeOld: "",
-  prefix: "",
-  profileId: "",
-  reason: "",
-  salary: 0,
-  sendDate: new Date(),
-  status: "",
-  statustext: "",
-  fullname: "",
-});
+	datetext: "",
+	activeDate: new Date(),
+	createdAt: new Date(),
+	firstName: "",
+	id: "",
+	isActive: true,
+	lastName: "",
+	location: "",
+	organizationPositionOld: "",
+	positionLevelOld: "",
+	positionNumberOld: "",
+	positionTypeOld: "",
+	prefix: "",
+	profileId: "",
+	reason: "",
+	salary: 0,
+	sendDate: new Date(),
+	status: "",
+	statustext: "",
+	fullname: "",
+})
 
 const clickBack = () => {
-  router.push(`/leave`);
-};
+	router.push(`/leave`)
+}
 
-onMounted(() => {});
+onMounted(() => {})
 
 const saveAbsence = () => {
-  $q.dialog({
-    title: "ยืนยันการยื่นข้อมูลลาออก",
-    message: "ต้องการยื่นข้อมูลลาออกนี้ใช่หรือไม่?",
-    cancel: {
-      flat: true,
-      color: "negative",
-    },
-    persistent: true,
-  })
-    .onOk(() => {
-      // createFormresign()
-      if (model.value !== "ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน") {
-        console.log(1);
-      } else if (
-        model.value === "ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน"
-      ) {
-        console.log(2);
-      }
-      router.push(`/leave`);
-    })
-    .onCancel(() => {})
-    .onDismiss(() => {});
-};
+	$q.dialog({
+		title: "ยืนยันการยื่นข้อมูลลาออก",
+		message: "ต้องการยื่นข้อมูลลาออกนี้ใช่หรือไม่?",
+		cancel: {
+			flat: true,
+			color: "negative",
+		},
+		persistent: true,
+	})
+		.onOk(() => {
+			// createFormresign()
+			if (model.value !== "ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน") {
+				console.log(1)
+			} else if (model.value === "ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน") {
+				console.log(2)
+			}
+			router.push(`/leave`)
+		})
+		.onCancel(() => {})
+		.onDismiss(() => {})
+}
 </script>
 <template>
-  <div class="col-12 row justify-center">
-    <div class="col-xs-12 col-sm-12 col-md-11">
-      <div class="toptitle text-white col-12 row items-center">
-        <q-btn
-          icon="mdi-arrow-left"
-          unelevated
-          round
-          dense
-          flat
-          color="primary"
-          class="q-mr-sm"
-          @click="clickBack"
-        />
-        <div>ยื่นใบลา</div>
-      </div>
-      <q-form ref="myform" class="col-12">
-        <q-card bordered>
-          <div class="col-12 row q-col-gutter-md q-pa-md">
-            <div class="col-xs-12 col-sm-12">
-              <q-icon name="mdi-numeric-1-circle" size="20px" color="primary" />
-              <div class="q-pl-sm text-weight-bold text-dark">
-                เลือกประเภทการลา
-              </div>
-              <div class="col-12 row q-pa-sm q-col-gutter-sm">
-                <q-select
-                  dense
-                  class="q-ml-lg col-6"
-                  outlined
-                  v-model="model"
-                  :options="dataStore.optionsSpecific"
-                  prefix="ประเภทใบลา :"
-                />
-                <div class="col-6 row q-pa-sm" v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'" >
-                  <q-select
-                    dense
-                    class="q-ml-lg col-6"
-                    outlined
-                    v-model="modelSpecific"
-                    :options="optionsSpecific"
-                    prefix="ประเภทใบลา :"
-                  />
-                </div>
-              </div>
-              <q-icon
-                name="mdi-numeric-2-circle"
-                size="20px"
-                color="primary"
-                v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
-              />
-              <div
-                class="q-pl-sm text-weight-bold text-dark"
-                v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
-              >
-                เลือกประเภทใบลาศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน
-              </div>
-              <div
-                class="col-12 row q-pa-sm q-col-gutter-sm"
-                v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
-              >
-                <q-select
-                  dense
-                  class="q-ml-lg col-6"
-                  outlined
-                  v-model="modelSpecific"
-                  :options="optionsSpecific"
-                  prefix="ประเภทใบลา :"
-                />
-              </div>
-              <q-icon
-                name="mdi-numeric-2-circle"
-                size="20px"
-                color="primary"
-                v-else
-              />
-              <q-icon
-                name="mdi-numeric-3-circle"
-                size="20px"
-                color="primary"
-                v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
-              />
-              <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-              <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-2"
-                    menu-class-name="modalfix"
-                    v-model="dateLeaveStart"
-                    :locale="'th'"
-                    autoApply
-                    borderless
-                    :enableTimePicker="false"
-                    week-start="0"
-                    :readonly="routeName != 'addAbsence'"
-                  >
-                    <template #year="{ year }">
-                      {{ year + 543 }}
-                    </template>
-                    <template #year-overlay-value="{ value }">
-                      {{ parseInt(value + 543) }}
-                    </template>
-                    <template #trigger>
-                      <q-input
-                        outlined
-                        dense
-                        hide-bottom-space
-                        :readonly="routeName != 'addAbsence'"
-                        class="full-width datepicker"
-                        :model-value="
-                          dateLeaveStart != null
-                            ? date2Thai(dateLeaveStart)
-                            : 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-2"
-                    menu-class-name="modalfix"
-                    v-model="dateLeaveEnd"
-                    :locale="'th'"
-                    autoApply
-                    borderless
-                    :enableTimePicker="false"
-                    week-start="0"
-                    :readonly="routeName != 'addAbsence'"
-                  >
-                    <template #year="{ year }">
-                      {{ year + 543 }}
-                    </template>
-                    <template #year-overlay-value="{ value }">
-                      {{ parseInt(value + 543) }}
-                    </template>
-                    <template #trigger>
-                      <q-input
-                        outlined
-                        dense
-                        hide-bottom-space
-                        :readonly="routeName != 'addAbsence'"
-                        class="full-width datepicker"
-                        :model-value="
-                          dateLeaveEnd != null ? date2Thai(dateLeaveEnd) : 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-2"
-                    dense
-                    outlined
-                    type="number"
-                    v-model="dateTotal"
-                    label="จำนวนวัน(บันทึกลง ก.พ.7)"
-                    :readonly="routeName != 'addAbsence'"
-                    :rules="[(val) => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
-                  />
-                  <q-input
-                    class="col-3"
-                    dense
-                    outlined
-                    v-model="Writeat"
-                    label="เขียนที่"
-                    :readonly="routeName != 'addAbsence'"
-                    :rules="[(val) => !!val || `${'เขียนที่'}`]"
-                  />
-                  <q-input
-                    class="col-3"
-                    dense
-                    outlined
-                    v-model="tel"
-                    mask="(###)-###-####"
-                    unmasked-value
-                    label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-                    :readonly="routeName != 'addAbsence'"
-                    :rules="[
-                      (val) =>
-                        !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
-                    ]"
-                  />
-                  <q-input
-                    class="col-6"
-                    dense
-                    outlined
-                    v-model="detail"
-                    label="รายละเอียด"
-                    :readonly="routeName != 'addAbsence'"
-                    :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
-                  />
-                  <q-input
-                    class="col-6"
-                    dense
-                    outlined
-                    v-model="locationAbsence"
-                    label="สถาที่ติดต่อขณะลา"
-                    :readonly="routeName != 'addAbsence'"
-                    :rules="[
-                      (val) => !!val || `${'กรุณากรอกสถาที่ติดต่อขณะลา'}`,
-                    ]"
-                  />
+	<div class="col-12 row justify-center">
+		<div class="col-xs-12 col-sm-12 col-md-11">
+			<div class="toptitle text-white col-12 row items-center">
+				<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="clickBack" />
+				<div>ยื่นใบลา</div>
+			</div>
+			<q-form ref="myform" class="col-12">
+				<q-card bordered>
+					<div class="col-12 row q-col-gutter-md q-pa-md">
+						<div class="col-xs-12 col-sm-12">
+							<q-icon name="mdi-numeric-1-circle" size="20px" color="primary" />
+							<div class="q-pl-sm text-weight-bold text-dark">เลือกประเภทการลา</div>
+							<div class="col-12 row q-pa-sm q-col-gutter-sm">
+								<q-select dense class="q-ml-lg col-6" outlined v-model="model" :options="dataStore.optionsSpecific" prefix="ประเภทใบลา :" />
+								<div class="col-6 row q-pa-sm" v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'">
+									<q-select dense class="q-ml-lg col-6" outlined v-model="modelSpecific" :options="optionsSpecific" prefix="ประเภทใบลา :" />
+								</div>
+							</div>
+							<q-icon name="mdi-numeric-2-circle" size="20px" color="primary" v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'" />
+							<div class="q-pl-sm text-weight-bold text-dark" v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'">เลือกประเภทใบลาศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน</div>
+							<div class="col-12 row q-pa-sm q-col-gutter-sm" v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'">
+								<q-select dense class="q-ml-lg col-6" outlined v-model="modelSpecific" :options="optionsSpecific" prefix="ประเภทใบลา :" />
+							</div>
+							<q-icon name="mdi-numeric-2-circle" size="20px" color="primary" v-else />
+							<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'" />
+							<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+							<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-2"
+										menu-class-name="modalfix"
+										v-model="dateLeaveStart"
+										:locale="'th'"
+										autoApply
+										borderless
+										:enableTimePicker="false"
+										week-start="0"
+										:readonly="routeName != 'addAbsence'"
+									>
+										<template #year="{ year }">
+											{{ year + 543 }}
+										</template>
+										<template #year-overlay-value="{ value }">
+											{{ parseInt(value + 543) }}
+										</template>
+										<template #trigger>
+											<q-input
+												outlined
+												dense
+												hide-bottom-space
+												:readonly="routeName != 'addAbsence'"
+												class="full-width datepicker"
+												:model-value="dateLeaveStart != null ? date2Thai(dateLeaveStart) : 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-2"
+										menu-class-name="modalfix"
+										v-model="dateLeaveEnd"
+										:locale="'th'"
+										autoApply
+										borderless
+										:enableTimePicker="false"
+										week-start="0"
+										:readonly="routeName != 'addAbsence'"
+									>
+										<template #year="{ year }">
+											{{ year + 543 }}
+										</template>
+										<template #year-overlay-value="{ value }">
+											{{ parseInt(value + 543) }}
+										</template>
+										<template #trigger>
+											<q-input
+												outlined
+												dense
+												hide-bottom-space
+												:readonly="routeName != 'addAbsence'"
+												class="full-width datepicker"
+												:model-value="dateLeaveEnd != null ? date2Thai(dateLeaveEnd) : 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-2"
+										dense
+										outlined
+										type="number"
+										v-model="dateTotal"
+										label="จำนวนวัน(บันทึกลง ก.พ.7)"
+										:readonly="routeName != 'addAbsence'"
+										:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
+									/>
+									<q-input class="col-3" dense outlined v-model="Writeat" label="เขียนที่" :readonly="routeName != 'addAbsence'" :rules="[val => !!val || `${'เขียนที่'}`]" />
+									<q-input
+										class="col-3"
+										dense
+										outlined
+										v-model="tel"
+										mask="(###)-###-####"
+										unmasked-value
+										label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+										:readonly="routeName != 'addAbsence'"
+										:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
+									/>
+									<q-input
+										class="col-6"
+										dense
+										outlined
+										v-model="detail"
+										label="รายละเอียด"
+										:readonly="routeName != 'addAbsence'"
+										:rules="[val => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+									/>
+									<q-input
+										class="col-6"
+										dense
+										outlined
+										v-model="locationAbsence"
+										label="สถาที่ติดต่อขณะลา"
+										:readonly="routeName != 'addAbsence'"
+										:rules="[val => !!val || `${'กรุณากรอกสถาที่ติดต่อขณะลา'}`]"
+									/>
 
-                  <q-input
-                    class="col-4"
-                    v-if="
-                      model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'
-                    "
-                    dense
-                    outlined
-                    v-model="levelStudy"
-                    label="ระดับที่ขอลาศึกษา"
-                    :readonly="routeName != 'addAbsence'"
-                  />
+									<q-input
+										class="col-4"
+										v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
+										dense
+										outlined
+										v-model="levelStudy"
+										label="ระดับที่ขอลาศึกษา"
+										:readonly="routeName != 'addAbsence'"
+									/>
 
-                  <q-input
-                    class="col-4"
-                    v-if="
-                      model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'
-                    "
-                    dense
-                    outlined
-                    v-model="degree"
-                    label="ชื่อปริญญา/ประกาศนียบัตร"
-                    :readonly="routeName != 'addAbsence'"
-                  />
+									<q-input
+										class="col-4"
+										v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
+										dense
+										outlined
+										v-model="degree"
+										label="ชื่อปริญญา/ประกาศนียบัตร"
+										:readonly="routeName != 'addAbsence'"
+									/>
 
-                  <q-input
-                    class="col-4"
-                    v-if="
-                      model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'
-                    "
-                    dense
-                    outlined
-                    v-model="major"
-                    label="สาขาวิชาเอก/หลักสูตร/วิชา"
-                    :readonly="routeName != 'addAbsence'"
-                  />
+									<q-input
+										class="col-4"
+										v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
+										dense
+										outlined
+										v-model="major"
+										label="สาขาวิชาเอก/หลักสูตร/วิชา"
+										:readonly="routeName != 'addAbsence'"
+									/>
 
-                  <q-input
-                    class="col-4"
-                    v-if="
-                      model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'
-                    "
-                    dense
-                    outlined
-                    v-model="educational"
-                    label="ณ สถานศึกษา"
-                    :readonly="routeName != 'addAbsence'"
-                  />
+									<q-input
+										class="col-4"
+										v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
+										dense
+										outlined
+										v-model="educational"
+										label="ณ สถานศึกษา"
+										:readonly="routeName != 'addAbsence'"
+									/>
 
-                  <q-input
-                    class="col-4"
-                    v-if="
-                      model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'
-                    "
-                    dense
-                    outlined
-                    v-model="studyPeriod"
-                    label="ระยะเวลาในการศึกษาตลอดหลักสูตร"
-                    :readonly="routeName != 'addAbsence'"
-                  />
+									<q-input
+										class="col-4"
+										v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
+										dense
+										outlined
+										v-model="studyPeriod"
+										label="ระยะเวลาในการศึกษาตลอดหลักสูตร"
+										:readonly="routeName != 'addAbsence'"
+									/>
 
-                  <q-input
-                    class="col-4"
-                    v-if="
-                      model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'
-                    "
-                    dense
-                    outlined
-                    v-model="country"
-                    label="ประเทศ"
-                    :readonly="routeName != 'addAbsence'"
-                  />
+									<q-input
+										class="col-4"
+										v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
+										dense
+										outlined
+										v-model="country"
+										label="ประเทศ"
+										:readonly="routeName != 'addAbsence'"
+									/>
 
-                  <q-input
-                    class="col-4"
-                    v-if="
-                      model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'
-                    "
-                    dense
-                    outlined
-                    v-model="capital"
-                    label="ด้วยทุน"
-                    :readonly="routeName != 'addAbsence'"
-                  />
+									<q-input
+										class="col-4"
+										v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
+										dense
+										outlined
+										v-model="capital"
+										label="ด้วยทุน"
+										:readonly="routeName != 'addAbsence'"
+									/>
 
-                  <q-input
-                    class="col-8"
-                    v-if="
-                      model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'
-                    "
-                    dense
-                    outlined
-                    v-model="noteReason"
-                    label="ที่มาของหลักสูตร"
-                    :readonly="routeName != 'addAbsence'"
-                  />
+									<q-input
+										class="col-8"
+										v-if="model == 'ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน'"
+										dense
+										outlined
+										v-model="noteReason"
+										label="ที่มาของหลักสูตร"
+										:readonly="routeName != 'addAbsence'"
+									/>
 
-                  <q-file
-                    v-model="files"
-                    dense
-                    label="เอกสารประกอบ"
-                    outlined
-                    use-chips
-                    multiple
-                    class="q-pl-sm col-6"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon name="attach_file" color="primary" />
-                    </template>
-                  </q-file>
+									<q-file v-model="files" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-6">
+										<template v-slot:prepend>
+											<q-icon name="attach_file" color="primary" />
+										</template>
+									</q-file>
 
-                  <div class="col-12 row" v-if="routeName != 'addAbsence'">
-                    <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="routeName != 'addAbsence'">
+										<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>
-            </div>
-          </div>
-          <q-separator />
-          <div class="row col-12 q-pa-md">
-            <q-space />
-            <q-btn
-              unelevated
-              dense
-              class="q-px-md items-center btnBlue"
-              label="บันทึก"
-              @click="saveAbsence"
-            />
-          </div>
-        </q-card>
-      </q-form>
-    </div>
-  </div>
+														<q-item-label caption> </q-item-label>
+													</q-item-section>
+												</q-item>
+											</q-list>
+										</q-card>
+									</div>
+								</div>
+							</q-card>
+						</div>
+					</div>
+					<q-separator />
+					<div class="row col-12 q-pa-md">
+						<q-space />
+						<q-btn unelevated dense class="q-px-md items-center btnBlue" label="บันทึก" @click="saveAbsence" />
+					</div>
+				</q-card>
+			</q-form>
+		</div>
+	</div>
 </template>
 <style scoped lang="scss">
 .btnBlue {
-  background-color: #016987;
-  color: #fff;
+	background-color: #016987;
+	color: #fff;
 }
 </style>
diff --git a/src/modules/05_leave/views/AddPage.vue b/src/modules/05_leave/views/AddPage.vue
index ec0f503..ad9753f 100644
--- a/src/modules/05_leave/views/AddPage.vue
+++ b/src/modules/05_leave/views/AddPage.vue
@@ -1,183 +1,141 @@
 <script setup lang="ts">
-import { ref, onMounted, computed } from "vue";
-import { useQuasar } from "quasar";
-import { useRouter, useRoute } from "vue-router";
+import { ref, onMounted, computed } from "vue"
+import { useQuasar } from "quasar"
+import { useRouter, useRoute } from "vue-router"
 
-import Form from "@/modules/05_leave/componenst/Forms/Form.vue";
-import Form3 from "@/modules/05_leave/componenst/Forms/01_SickForm.vue";
-import Form4 from "@/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue";
-import Form5 from "@/modules/05_leave/componenst/Forms/05_VacationForm.vue";
-import Form6 from "@/modules/05_leave/componenst/Forms/06_OrdinationForm.vue";
-import Form7 from "@/modules/05_leave/componenst/Forms/07_HajjForm.vue";
-import Form8 from "@/modules/05_leave/componenst/Forms/08_MilitaryForm.vue";
-import Form9 from "@/modules/05_leave/componenst/Forms/09_StudyForm.vue";
-import Form10 from "@/modules/05_leave/componenst/Forms/10_TrainForm.vue";
-import Form11 from "@/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue";
-import Form12 from "@/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue";
-import Form13 from "@/modules/05_leave/componenst/Forms/13_RehabilitationForm.vue";
-import { useLeaveStore } from "@/modules/05_leave/store";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import type { QForm } from "quasar";
+import Form from "@/modules/05_leave/componenst/Forms/Form.vue"
+import Form3 from "@/modules/05_leave/componenst/Forms/01_SickForm.vue"
+import Form4 from "@/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue"
+import Form5 from "@/modules/05_leave/componenst/Forms/05_VacationForm.vue"
+import Form6 from "@/modules/05_leave/componenst/Forms/06_OrdinationForm.vue"
+import Form7 from "@/modules/05_leave/componenst/Forms/07_HajjForm.vue"
+import Form8 from "@/modules/05_leave/componenst/Forms/08_MilitaryForm.vue"
+import Form9 from "@/modules/05_leave/componenst/Forms/09_StudyForm.vue"
+import Form10 from "@/modules/05_leave/componenst/Forms/10_TrainForm.vue"
+import Form11 from "@/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue"
+import Form12 from "@/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue"
+import Form13 from "@/modules/05_leave/componenst/Forms/13_RehabilitationForm.vue"
+import { useLeaveStore } from "@/modules/05_leave/store"
+import http from "@/plugins/http"
+import config from "@/app.config"
+import type { QForm } from "quasar"
 
-const dataStore = useLeaveStore();
+const dataStore = useLeaveStore()
 
-const router = useRouter();
-const route = useRoute();
-const myform = ref<QForm | null>(null);
-const $q = useQuasar();
+const router = useRouter()
+const route = useRoute()
+const myform = ref<QForm | null>(null)
+const $q = useQuasar()
 
-const model = ref<string>("");
-const modelSpecific = ref<string>("");
+const model = ref<string>("")
+const modelSpecific = ref<string>("")
 
 // onMounted(() => {});
 
 const saveAbsence = () => {
-  $q.dialog({
-    title: "ยืนยันการยื่นข้อมูลลาออก",
-    message: "ต้องการยื่นข้อมูลลาออกนี้ใช่หรือไม่?",
-    cancel: {
-      flat: true,
-      color: "negative",
-    },
-    persistent: true,
-  })
-    .onOk(() => {
-      // createFormresign()
-      if (model.value !== "7") {
-        console.log(1);
-      } else if (model.value === "7") {
-        console.log(2);
-      }
-      router.push(`/leave`);
-    })
-    .onCancel(() => {})
-    .onDismiss(() => {});
-};
+	$q.dialog({
+		title: "ยืนยันการยื่นข้อมูลลาออก",
+		message: "ต้องการยื่นข้อมูลลาออกนี้ใช่หรือไม่?",
+		cancel: {
+			flat: true,
+			color: "negative",
+		},
+		persistent: true,
+	})
+		.onOk(() => {
+			// createFormresign()
+			if (model.value !== "7") {
+				console.log(1)
+			} else if (model.value === "7") {
+				console.log(2)
+			}
+			router.push(`/leave`)
+		})
+		.onCancel(() => {})
+		.onDismiss(() => {})
+}
 
 const onSubmit = async () => {
-  console.log("save");
-};
+	console.log("save")
+}
 </script>
 
 <template>
-  <div class="col-12 row justify-center">
-    <div class="col-xs-12 col-sm-12 col-md-11">
-      <div class="toptitle text-white col-12 row items-center">
-        <q-btn
-          to="/leave"
-          icon="mdi-arrow-left"
-          unelevated
-          round
-          dense
-          flat
-          color="primary"
-          class="q-mr-sm"
-        />
-        <div>ยื่นใบลา</div>
-      </div>
+	<div class="col-12 row justify-center">
+		<div class="col-xs-12 col-sm-12 col-md-11">
+			<div class="toptitle text-white col-12 row items-center">
+				<q-btn to="/leave" icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" />
+				<div>ยื่นใบลา</div>
+			</div>
 
-      <q-form ref="myform" class="col-12">
-        <q-card bordered>
-          <div class="col-12 row q-col-gutter-md q-pa-md">
-            <div class="col-xs-12 col-sm-12">
-              <q-icon name="mdi-numeric-1-circle" size="20px" color="primary" />
-              <div class="q-pl-sm text-weight-bold text-dark">
-                เลือกประเภทการลา
-              </div>
-              <div class="q-py-sm q-px-lg">
-                <div class="row">
-                  <q-select
-                    dense
-                    class="col-12 col-sm-6 col-md-4"
-                    outlined
-                    v-model="model"
-                    :options="dataStore.options"
-                    option-value="id"
-                    option-label="name"
-                    emit-value
-                    map-options
-                    prefix="ประเภทใบลา :"
-                    @update:model-value="dataStore.typeConvert(model, null)"
-                  />
-                </div>
-                <div class="row q-mt-sm">
-                  <div
-                    class="col-12 col-sm-6 col-md-3"
-                    v-if="model === '5' || model === '7'"
-                  >
-                    <q-select
-                      dense
-                      outlined
-                      v-model="modelSpecific"
-                      :options="
-                        model === '5'
-                          ? dataStore.optionsOrdination
-                          : dataStore.optionsSpecific
-                      "
-                      option-value="id"
-                      option-label="name"
-                      emit-value
-                      map-options
-                      prefix="ประเภทใบลา :"
-                      @update:model-value="
-                        dataStore.typeConvert(model, modelSpecific)
-                      "
-                    />
-                  </div>
-                </div>
+			<q-form ref="myform" class="col-12">
+				<q-card bordered>
+					<div class="col-12 row q-col-gutter-md q-pa-md">
+						<div class="col-xs-12 col-sm-12">
+							<div style="display: flex; align-items: center">
+								<q-icon name="mdi-numeric-1-circle" size="20px" color="primary" />
+								<div class="q-pl-sm text-weight-bold text-dark">เลือกประเภทการลา</div>
+							</div>
+							<div class="q-py-sm q-px-lg">
+								<div class="row">
+									<q-select
+										dense
+										class="col-12 col-sm-6 col-md-4"
+										outlined
+										v-model="model"
+										:options="dataStore.options"
+										option-value="id"
+										option-label="name"
+										emit-value
+										map-options
+										prefix="ประเภทใบลา :"
+										@update:model-value="dataStore.typeConvert(model, null)"
+									/>
+								</div>
+								<div class="row q-mt-sm">
+									<div class="col-12 col-sm-6 col-md-3" v-if="model === '5' || model === '7'">
+										<q-select
+											dense
+											outlined
+											v-model="modelSpecific"
+											:options="model === '5' ? dataStore.optionsOrdination : dataStore.optionsSpecific"
+											option-value="id"
+											option-label="name"
+											emit-value
+											map-options
+											prefix="ประเภทใบลา :"
+											@update:model-value="dataStore.typeConvert(model, modelSpecific)"
+										/>
+									</div>
+								</div>
 
-                <!-- v-if (ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ||ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน) -->
-              </div>
+								<!-- v-if (ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ||ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน) -->
+							</div>
 
-              <div>
-                <q-icon
-                  name="mdi-numeric-2-circle"
-                  size="20px"
-                  color="primary"
-                />
-                <div class="q-pl-sm text-weight-bold text-dark">
-                  ข้อมูลการลา
-                </div>
-                <Form :model="model" />
-              </div>
-            </div>
-            <div v-if="model" class="col-12">
-              <Form3
-                :on-submit="onSubmit"
-                v-if="model === '0' || model === '1' || model === '2'"
-              />
-              <Form4 :on-submit="onSubmit" v-if="model === '3'" />
-              <Form5 :on-submit="onSubmit" v-if="model === '4'" />
-              <Form6
-                :on-submit="onSubmit"
-                v-if="model === '5' && modelSpecific === '0'"
-              />
-              <Form7
-                :on-submit="onSubmit"
-                v-if="model === '5' && modelSpecific === '1'"
-              />
-              <Form8
-                :on-submit="onSubmit"
-                v-if="model === '6'"
-                style="width: 100%"
-              />
-              <Form9
-                :on-submit="onSubmit"
-                v-if="model === '7' && modelSpecific === '0'"
-                style="width: 100%"
-              />
-              <Form10
-                :on-submit="onSubmit"
-                v-if="model === '7' && modelSpecific != '0' && modelSpecific != ''"
-              />
-              <Form11 :on-submit="onSubmit" v-if="model === '8'" />
-              <Form12 :on-submit="onSubmit" v-if="model === '9'" />
-              <Form13 :on-submit="onSubmit" v-if="model === '10'" />
-            </div>
-          </div>
-        </q-card>
-      </q-form>
-    </div>
-  </div>
+							<div>
+								<div style="display: flex; align-items: center">
+									<q-icon name="mdi-numeric-2-circle" size="20px" color="primary" />
+									<div class="q-pl-sm text-weight-bold text-dark">ข้อมูลการลา</div>
+								</div>
+								<Form :model="model" />
+							</div>
+						</div>
+						<div v-if="model" class="col-12">
+							<Form3 :on-submit="onSubmit" v-if="model === '0' || model === '1' || model === '2'" />
+							<Form4 :on-submit="onSubmit" v-if="model === '3'" />
+							<Form5 :on-submit="onSubmit" v-if="model === '4'" />
+							<Form6 :on-submit="onSubmit" v-if="model === '5' && modelSpecific === '0'" />
+							<Form7 :on-submit="onSubmit" v-if="model === '5' && modelSpecific === '1'" />
+							<Form8 :on-submit="onSubmit" v-if="model === '6'" style="width: 100%" />
+							<Form9 :on-submit="onSubmit" v-if="model === '7' && modelSpecific === '0'" style="width: 100%" />
+							<Form10 :on-submit="onSubmit" v-if="model === '7' && modelSpecific != '0' && modelSpecific != ''" />
+							<Form11 :on-submit="onSubmit" v-if="model === '8'" />
+							<Form12 :on-submit="onSubmit" v-if="model === '9'" />
+							<Form13 :on-submit="onSubmit" v-if="model === '10'" />
+						</div>
+					</div>
+				</q-card>
+			</q-form>
+		</div>
+	</div>
 </template>
diff --git a/src/modules/05_leave/views/Main.vue b/src/modules/05_leave/views/Main.vue
index a16cc62..2e12a0e 100644
--- a/src/modules/05_leave/views/Main.vue
+++ b/src/modules/05_leave/views/Main.vue
@@ -1,263 +1,242 @@
 <script setup lang="ts">
-import type { QTableProps } from "quasar";
-import { defineComponent, onMounted } from "@vue/runtime-core";
-import { reactive, ref, watch } from "vue";
-import { useRouter } from "vue-router";
-import subCalendarComponent from "@/modules/05_leave/componenst/Calendar.vue";
-import subListCalendarComponent from "@/modules/05_leave/componenst/ListCalendar.vue";
-import { useCounterMixin } from "@/stores/mixin";
-import type { DataDateMonthObject } from "@/modules/05_leave/interface/request/Calendar.ts";
-import { useLeaveStore } from "@/modules/05_leave/store";
+import type { QTableProps } from "quasar"
+import { defineComponent, onMounted } from "@vue/runtime-core"
+import { reactive, ref, watch } from "vue"
+import { useRouter } from "vue-router"
+import subCalendarComponent from "@/modules/05_leave/componenst/Calendar.vue"
+import subListCalendarComponent from "@/modules/05_leave/componenst/ListCalendar.vue"
+import { useCounterMixin } from "@/stores/mixin"
+import type { DataDateMonthObject } from "@/modules/05_leave/interface/request/Calendar.ts"
+import { useLeaveStore } from "@/modules/05_leave/store"
 
-const leaveStore = useLeaveStore();
-const { filterSelector, searchFilterTable } = leaveStore;
-const router = useRouter();
+const leaveStore = useLeaveStore()
+const { filterSelector, searchFilterTable } = leaveStore
+const router = useRouter()
 
 const dateMonth = ref<DataDateMonthObject>({
-  month: new Date().getMonth(),
-  year: new Date().getFullYear(),
-});
+	month: new Date().getMonth(),
+	year: new Date().getFullYear(),
+})
 // console.log(dateMonth.value);
 const props = defineProps({
-  dateYear: Number, //ปีที่ส่งไป parent สรุปวันหยุด
-  fetchDataSummaryCalendar: {
-    //ฟังก์ชันอัพเดทสรุปวันหยุด
-    type: Function,
-    default: () => console.log("not function"),
-  },
-});
-const dateYear = ref<number>(new Date().getFullYear());
-const emit = defineEmits(["update:dateYear"]);
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { monthYear2Thai } = mixin;
+	dateYear: Number, //ปีที่ส่งไป parent สรุปวันหยุด
+	fetchDataSummaryCalendar: {
+		//ฟังก์ชันอัพเดทสรุปวันหยุด
+		type: Function,
+		default: () => console.log("not function"),
+	},
+})
+const dateYear = ref<number>(new Date().getFullYear())
+const emit = defineEmits(["update:dateYear"])
+const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
+const { monthYear2Thai } = mixin
 /**
  * แปลง ปีและเดือนเป็นภาษาไทย
  * @param val datepicker แบบเลือกปีและเดือน
  */
 const 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)
+}
 
 const updateMonth = async (e: DataDateMonthObject) => {
-  console.log(dateMonth.value);
-  if (e != null) {
-    dateYear.value = e.year;
-    emit("update:dateYear", e.year);
-    await props.fetchDataSummaryCalendar();
-  }
-  console.log(dateMonth.value);
-};
+	console.log(dateMonth.value)
+	if (e != null) {
+		dateYear.value = e.year
+		emit("update:dateYear", e.year)
+		await props.fetchDataSummaryCalendar()
+	}
+	console.log(dateMonth.value)
+}
 
-const value = ref(90);
+const value = ref(90)
 const itemPie = ref([
-  {
-    text: "ลาป่วย",
-    color: "text-pink-5",
-    value: 90,
-    all: "10",
-    use: "9",
-    remain: "1",
-  },
-  {
-    text: "ลากิจส่วนตัว",
-    color: "text-deep-purple",
-    value: 80,
-    all: "12",
-    use: "9",
-    remain: "3",
-  },
-  {
-    text: "ลาพักผ่อน",
-    color: "text-indigo",
-    value: 78,
-    all: "20",
-    use: "17",
-    remain: "3",
-  },
-]);
+	{
+		text: "ลาป่วย",
+		color: "text-pink-5",
+		value: 90,
+		all: "10",
+		use: "9",
+		remain: "1",
+	},
+	{
+		text: "ลากิจส่วนตัว",
+		color: "text-deep-purple",
+		value: 80,
+		all: "12",
+		use: "9",
+		remain: "3",
+	},
+	{
+		text: "ลาพักผ่อน",
+		color: "text-indigo",
+		value: 78,
+		all: "20",
+		use: "17",
+		remain: "3",
+	},
+])
 
-const data = ref(false);
+const data = ref(false)
 const columns = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: true,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px; width:5%;",
-  },
-  {
-    name: "type",
-    align: "left",
-    label: "ประเภทการลา",
-    sortable: true,
-    field: "type",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px; width:15%;",
-  },
-  {
-    name: "numDate",
-    align: "left",
-    label: "โควตาวันลา",
-    sortable: true,
-    field: "numDate",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px; width:15%;",
-  },
-  {
-    name: "extend",
-    align: "left",
-    label: "ทดวันลา",
-    sortable: true,
-    field: "extend",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px; width:15%;",
-  },
-  {
-    name: "use",
-    align: "left",
-    label: "ใช้ไป (%)",
-    sortable: true,
-    field: "use",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px; width:15%;",
-  },
-  {
-    name: "numAll",
-    align: "left",
-    label: "จำนวนยื่นขอลา (วัน)",
-    sortable: true,
-    field: "numAll",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px; width:15%;",
-  },
-  {
-    name: "numDone",
-    align: "left",
-    label: "จำนวนที่อนุมัติ (วัน)",
-    sortable: true,
-    field: "numDone",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px; width:15%;",
-  },
-  {
-    name: "numNot",
-    align: "left",
-    label: "จำนวนที่ไม่อนุมัติ (วัน)",
-    sortable: true,
-    field: "numNot",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px; width:15%;",
-  },
-  {
-    name: "numCancel",
-    align: "left",
-    label: "จำนวนที่ยกเลิก (วัน)",
-    sortable: true,
-    field: "numCancel",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px; width:15%;",
-  },
-]);
+	{
+		name: "no",
+		align: "left",
+		label: "ลำดับ",
+		sortable: true,
+		field: "no",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px; width:5%;",
+	},
+	{
+		name: "type",
+		align: "left",
+		label: "ประเภทการลา",
+		sortable: true,
+		field: "type",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px; width:15%;",
+	},
+	{
+		name: "numDate",
+		align: "left",
+		label: "โควตาวันลา",
+		sortable: true,
+		field: "numDate",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px; width:15%;",
+	},
+	{
+		name: "extend",
+		align: "left",
+		label: "ทดวันลา",
+		sortable: true,
+		field: "extend",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px; width:15%;",
+	},
+	{
+		name: "use",
+		align: "left",
+		label: "ใช้ไป (%)",
+		sortable: true,
+		field: "use",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px; width:15%;",
+	},
+	{
+		name: "numAll",
+		align: "left",
+		label: "จำนวนยื่นขอลา (วัน)",
+		sortable: true,
+		field: "numAll",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px; width:15%;",
+	},
+	{
+		name: "numDone",
+		align: "left",
+		label: "จำนวนที่อนุมัติ (วัน)",
+		sortable: true,
+		field: "numDone",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px; width:15%;",
+	},
+	{
+		name: "numNot",
+		align: "left",
+		label: "จำนวนที่ไม่อนุมัติ (วัน)",
+		sortable: true,
+		field: "numNot",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px; width:15%;",
+	},
+	{
+		name: "numCancel",
+		align: "left",
+		label: "จำนวนที่ยกเลิก (วัน)",
+		sortable: true,
+		field: "numCancel",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px; width:15%;",
+	},
+])
 const rows = ref<any>([
-  { no: "1", type: "ลาป่วย" },
-  { no: "2", type: "ลากิจส่วนตัว" },
-  { no: "3", type: "ลาคลอดบุตร" },
-  { no: "4", type: "ลาช่วยเหลือภริยาที่คลอดบุตร" },
-  { no: "5", type: "ลาพักผ่อน" },
-  { no: "6", type: "ลาอุปสมบทหรือการลาประกอบพิธีฮัจย์ฯ" },
-  { no: "7", type: "ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล" },
-  { no: "8", type: "ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน" },
-  { no: "9", type: "ลาไปปฏิบัติงานในองค์การระหว่างประเทศ" },
-  { no: "10", type: "ลาติดตามคู่สมรส" },
-  { no: "11", type: "ลาฟื้นฟูสมรรถภาพด้านอาชีพ" },
-]);
-const pagination = ref({ rowsPerPage: 11 });
+	{ no: "1", type: "ลาป่วย" },
+	{ no: "2", type: "ลากิจส่วนตัว" },
+	{ no: "3", type: "ลาคลอดบุตร" },
+	{ no: "4", type: "ลาช่วยเหลือภริยาที่คลอดบุตร" },
+	{ no: "5", type: "ลาพักผ่อน" },
+	{ no: "6", type: "ลาอุปสมบทหรือการลาประกอบพิธีฮัจย์ฯ" },
+	{ no: "7", type: "ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล" },
+	{ no: "8", type: "ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน" },
+	{ no: "9", type: "ลาไปปฏิบัติงานในองค์การระหว่างประเทศ" },
+	{ no: "10", type: "ลาติดตามคู่สมรส" },
+	{ no: "11", type: "ลาฟื้นฟูสมรรถภาพด้านอาชีพ" },
+])
+const pagination = ref({ rowsPerPage: 11 })
 
 const addAbsence = async () => {
-  router.push(`/leave/add`);
-};
+	router.push(`/leave/add`)
+}
 </script>
 
 <template>
-  <div class="col-12 row justify-center">
-    <div class="col-xs-12 col-sm-12 col-md-11">
-      <div class="toptitle text-white col-12 row items-center">
-        <q-btn
-          icon="mdi-arrow-left"
-          unelevated
-          round
-          dense
-          flat
-          color="primary"
-          class="q-mr-sm"
-          @click="router.go(-1)"
-        />
-        <div>รายการลา</div>
-      </div>
-    </div>
-    <div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
-      <div class="row col-12 q-col-gutter-sm">
-        <div class="col-xs-12 col-sm-9 col-md-9 row">
-          <q-card bordered class="q-pa-md col-12">
-            <div class="row col-12">
-              <div class="row items-center">
-                <!-- filter เลือกเดือนปี -->
-                <datepicker
-                  v-model="dateMonth"
-                  :locale="'th'"
-                  autoApply
-                  month-picker
-                  :enableTimePicker="false"
-                  v-if="leaveStore.tabValue === 'calendar'"
-                  @update:modelValue="updateMonth"
-                >
-                  <template #year="{ year }">{{ year + 543 }}</template>
-                  <template #year-overlay-value="{ value }">{{
-                    parseInt(value + 543)
-                  }}</template>
-                  <template #trigger>
-                    <q-input
-                      :model-value="monthYearThai(dateMonth)"
-                      dense
-                      outlined
-                      style="width: 130px"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon
-                          name="event"
-                          class="cursor-pointer"
-                          style="color: var(--q-primary)"
-                        >
-                        </q-icon>
-                      </template>
-                    </q-input>
-                  </template>
-                </datepicker>
-                <q-select
-                  v-if="leaveStore.tabValue === 'list'"
-                  outlined
-                  dense
-                  lazy-rules
-                  v-model="leaveStore.fiscalYearyear"
-                  :label="`${'ปี พ.ศ.'}`"
-                  emit-value
-                  map-options
-                  option-label="name"
-                  :options="leaveStore.fiscalyearOP"
-                  option-value="id"
-                  hide-bottom-space
-                  style="min-width: 150px"
-                  class="col-xs-12 col-sm-auto"
-                  @update:model-value="searchFilterTable"
-                  @filter="(inputValue:any,
+	<div class="col-12 row justify-center">
+		<div class="col-xs-12 col-sm-12 col-md-11">
+			<div class="toptitle text-white col-12 row items-center">
+				<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
+				<div>รายการลา</div>
+			</div>
+		</div>
+		<div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
+			<div class="row col-12 q-col-gutter-sm">
+				<div class="col-xs-12 col-sm-9 col-md-9 row">
+					<q-card bordered class="q-pa-md col-12">
+						<div class="row col-12">
+							<div class="row items-center">
+								<!-- filter เลือกเดือนปี -->
+								<datepicker
+									v-model="dateMonth"
+									:locale="'th'"
+									autoApply
+									month-picker
+									:enableTimePicker="false"
+									v-if="leaveStore.tabValue === 'calendar'"
+									@update:modelValue="updateMonth"
+								>
+									<template #year="{ year }">{{ year + 543 }}</template>
+									<template #year-overlay-value="{ value }">{{ parseInt(value + 543) }}</template>
+									<template #trigger>
+										<q-input :model-value="monthYearThai(dateMonth)" dense outlined style="width: 130px">
+											<template v-slot:prepend>
+												<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
+											</template>
+										</q-input>
+									</template>
+								</datepicker>
+								<q-select
+									v-if="leaveStore.tabValue === 'list'"
+									outlined
+									dense
+									lazy-rules
+									v-model="leaveStore.fiscalYearyear"
+									:label="`${'ปี พ.ศ.'}`"
+									emit-value
+									map-options
+									option-label="name"
+									:options="leaveStore.fiscalyearOP"
+									option-value="id"
+									hide-bottom-space
+									style="min-width: 150px"
+									class="col-xs-12 col-sm-auto"
+									@update:model-value="searchFilterTable"
+									@filter="(inputValue:any,
                     doneFn:Function) => filterSelector(inputValue, doneFn,'fiscalyearOP'
                     ) "
-                />
-                <!-- filter เลือกปี -->
-                <!-- <datepicker v-model="dateYear" :locale="'th'" autoApply year-picker :enableTimePicker="false" v-if="leaveStore.tabValue === 'list'">
+								/>
+								<!-- filter เลือกปี -->
+								<!-- <datepicker v-model="dateYear" :locale="'th'" autoApply year-picker :enableTimePicker="false" v-if="leaveStore.tabValue === 'list'">
 									<template #year="{ year }">{{ year + 543 }}</template>
 									<template #year-overlay-value="{ value }">{{ parseInt(value + 543) }}</template>
 									<template #trigger>
@@ -268,182 +247,114 @@ const addAbsence = async () => {
 										</q-input>
 									</template>
 								</datepicker> -->
-                <div class="q-ml-sm">
-                  <!-- icon เพิ่มวันหยุด -->
-                  <q-btn
-                    round
-                    dense
-                    flat
-                    size="13px"
-                    class="q-px-sm"
-                    @click="addAbsence"
-                  >
-                    <q-icon name="mdi-plus" size="22px" color="primary" />
-                    <q-tooltip>ยื่นใบลา</q-tooltip>
-                  </q-btn>
-                </div>
-              </div>
-              <q-space />
-              <div class="justify-center row items-center">
-                <!-- tab รูปแบบแสดงวันหยุด ปฏิทินกับรายการ -->
-                <q-tabs
-                  v-model="leaveStore.tabValue"
-                  indicator-color="transparent"
-                  align="left"
-                  active-color="activetab"
-                  class="text-nativetab"
-                  inline-label
-                  dense
-                >
-                  <q-btn
-                    name="calendar"
-                    round
-                    size="12px"
-                    flat
-                    icon="mdi-calendar-month"
-                    @click="leaveStore.tabValue = 'calendar'"
-                    :color="
-                      leaveStore.tabValue == 'calendar' ? 'primary' : 'grey-6'
-                    "
-                    class="q-mr-sm"
-                  >
-                    <q-tooltip>ปฏิทิน</q-tooltip>
-                  </q-btn>
-                  <q-separator vertical inset />
-                  <q-btn
-                    name="list"
-                    round
-                    size="12px"
-                    flat
-                    icon="mdi-format-list-bulleted"
-                    @click="leaveStore.tabValue = 'list'"
-                    :color="
-                      leaveStore.tabValue == 'list' ? 'primary' : 'grey-6'
-                    "
-                    class="q-ml-sm"
-                  >
-                    <q-tooltip>รายการ</q-tooltip>
-                  </q-btn>
-                </q-tabs>
-              </div>
-            </div>
-            <div class="col-12">
-              <subCalendarComponent
-                :dateYear="dateMonth.year"
-                :dateMonth="dateMonth.month"
-                v-if="leaveStore.tabValue === 'calendar'"
-              />
-            </div>
+								<div class="q-ml-sm">
+									<!-- icon เพิ่มวันหยุด -->
+									<q-btn round dense flat size="13px" class="q-px-sm" @click="addAbsence">
+										<q-icon name="mdi-plus" size="22px" color="primary" />
+										<q-tooltip>ยื่นใบลา</q-tooltip>
+									</q-btn>
+								</div>
+							</div>
+							<q-space />
+							<div class="justify-center row items-center">
+								<!-- tab รูปแบบแสดงวันหยุด ปฏิทินกับรายการ -->
+								<q-tabs v-model="leaveStore.tabValue" indicator-color="transparent" align="left" active-color="activetab" class="text-nativetab" inline-label dense>
+									<q-btn
+										name="calendar"
+										round
+										size="12px"
+										flat
+										icon="mdi-calendar-month"
+										@click="leaveStore.tabValue = 'calendar'"
+										:color="leaveStore.tabValue == 'calendar' ? 'primary' : 'grey-6'"
+										class="q-mr-sm"
+									>
+										<q-tooltip>ปฏิทิน</q-tooltip>
+									</q-btn>
+									<q-separator vertical inset />
+									<q-btn
+										name="list"
+										round
+										size="12px"
+										flat
+										icon="mdi-format-list-bulleted"
+										@click="leaveStore.tabValue = 'list'"
+										:color="leaveStore.tabValue == 'list' ? 'primary' : 'grey-6'"
+										class="q-ml-sm"
+									>
+										<q-tooltip>รายการ</q-tooltip>
+									</q-btn>
+								</q-tabs>
+							</div>
+						</div>
+						<div class="col-12">
+							<subCalendarComponent :dateYear="dateMonth.year" :dateMonth="dateMonth.month" v-if="leaveStore.tabValue === 'calendar'" />
+						</div>
 
-            <div class="col-12">
-              <subListCalendarComponent v-if="leaveStore.tabValue === 'list'" />
-            </div>
-          </q-card>
-        </div>
-        <div class="col-xs-12 col-sm-3 col-md-3 row">
-          <q-card bordered class="col-12 row caedNone">
-            <div class="col-12 row">
-              <q-card class="row col-12 items-center q-px-md q-py-sm">
-                <div class="text-weight-bold">สถิติการลา</div>
-                <q-space />
-                <q-btn
-                  dense
-                  flat
-                  class="text-blue"
-                  icon="mdi-chart-line-variant"
-                  @click="data = true"
-                  label="ตารางสถิติการลา"
-                />
-              </q-card>
-              <div
-                bordered
-                class="col-12 row justify-center q-px-md q-pb-md"
-                v-for="(item, index) in itemPie"
-                :key="index"
-              >
-                <q-card
-                  bordered
-                  flat
-                  class="col-12 row q-pt-md justify-center shadow-0"
-                >
-                  <q-knob
-                    readonly
-                    v-model="item.value"
-                    show-value
-                    size="70px"
-                    :thickness="0.15"
-                    track-color="grey-3"
-                    :class="`${item.color}`"
-                  >
-                    <span class="text-subtitle2 text-weight-bold"
-                      >{{ item.value }}%</span
-                    >
-                  </q-knob>
-                  <div class="col-12 text-center text-weight-medium q-py-xs">
-                    {{ item.text }}
-                  </div>
-                  <div
-                    class="col-12 row bg-grey-1 no-wrap text-dark text-body2 items-center borderTop"
-                  >
-                    <div class="col-4 column q-pa-xs text-center">
-                      <span class="text-weight-bold">{{ item.all }}</span>
-                      <span class="text-grey-7 text-caption">ทั้งหมด</span>
-                    </div>
-                    <q-separator vertical />
-                    <div class="col-4 column q-pa-xs text-center">
-                      <span class="text-weight-bold">{{ item.use }}</span>
-                      <span class="text-grey-7 text-caption">ใช้ไป</span>
-                    </div>
-                    <q-separator vertical />
-                    <div class="col-4 column q-pa-xs text-center">
-                      <span class="text-weight-bold">{{ item.remain }}</span>
-                      <span class="text-grey-7 text-caption">คงเหลือ</span>
-                    </div>
-                  </div>
-                </q-card>
-              </div>
-            </div>
-          </q-card>
-        </div>
-      </div>
-    </div>
-  </div>
-  <!-- modal ตารางสถิติการลา -->
-  <q-dialog v-model="data" persistent>
-    <q-card style="min-width: 85%">
-      <q-card-section class="row items-center q-pa-sm">
-        <div class="text-bold q-pl-sm">ตารางสถิติการลา</div>
-        <q-space />
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          v-close-popup
-          style="color: #ff8080; background-color: #ffdede"
-        />
-      </q-card-section>
-      <q-separator />
-      <q-card-section class="q-p-md row">
-        <q-table
-          flat
-          bordered
-          dense
-          :rows="rows"
-          :columns="columns"
-          row-key="name"
-          class="col-12"
-          hide-bottom
-          v-model:pagination="pagination"
-        />
-      </q-card-section>
-    </q-card>
-  </q-dialog>
+						<div class="col-12">
+							<subListCalendarComponent v-if="leaveStore.tabValue === 'list'" />
+						</div>
+					</q-card>
+				</div>
+				<div class="col-xs-12 col-sm-3 col-md-3 row">
+					<q-card bordered class="col-12 row caedNone">
+						<div class="col-12 row">
+							<q-card class="row col-12 items-center q-px-md q-py-sm">
+								<div class="text-weight-bold">สถิติการลา</div>
+								<q-space />
+								<q-btn dense flat class="text-blue" icon="mdi-chart-line-variant" @click="data = true" label="ตารางสถิติการลา" />
+							</q-card>
+							<div bordered class="col-12 row justify-center q-px-md q-pb-md" v-for="(item, index) in itemPie" :key="index">
+								<q-card bordered flat class="col-12 row q-pt-md justify-center shadow-0">
+									<q-knob readonly v-model="item.value" show-value size="70px" :thickness="0.15" track-color="grey-3" :class="`${item.color}`">
+										<span class="text-subtitle2 text-weight-bold">{{ item.value }}%</span>
+									</q-knob>
+									<div class="col-12 text-center text-weight-medium q-py-xs">
+										{{ item.text }}
+									</div>
+									<div class="col-12 row bg-grey-1 no-wrap text-dark text-body2 items-center borderTop">
+										<div class="col-4 column q-pa-xs text-center">
+											<span class="text-weight-bold">{{ item.all }}</span>
+											<span class="text-grey-7 text-caption">ได้รับ</span>
+										</div>
+										<q-separator vertical />
+										<div class="col-4 column q-pa-xs text-center">
+											<span class="text-weight-bold">{{ item.use }}</span>
+											<span class="text-grey-7 text-caption">ใช้ไป</span>
+										</div>
+										<q-separator vertical />
+										<div class="col-4 column q-pa-xs text-center">
+											<span class="text-weight-bold">{{ item.remain }}</span>
+											<span class="text-grey-7 text-caption">คงเหลือ</span>
+										</div>
+									</div>
+								</q-card>
+							</div>
+						</div>
+					</q-card>
+				</div>
+			</div>
+		</div>
+	</div>
+	<!-- modal ตารางสถิติการลา -->
+	<q-dialog v-model="data" persistent>
+		<q-card style="min-width: 85%">
+			<q-card-section class="row items-center q-pa-sm">
+				<div class="text-bold q-pl-sm">ตารางสถิติการลา</div>
+				<q-space />
+				<q-btn icon="close" unelevated round dense v-close-popup style="color: #ff8080; background-color: #ffdede" />
+			</q-card-section>
+			<q-separator />
+			<q-card-section class="q-p-md row">
+				<q-table flat bordered dense :rows="rows" :columns="columns" row-key="name" class="col-12" hide-bottom v-model:pagination="pagination" />
+			</q-card-section>
+		</q-card>
+	</q-dialog>
 </template>
 
 <style scoped>
 .borderTop {
-  border-top: 1px solid #ededed;
-  border-bottom: 1px solid #ededed;
+	border-top: 1px solid #ededed;
+	border-bottom: 1px solid #ededed;
 }
 </style>