From 538152d3cd250bf59810e45716ed0019625bf236 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Tue, 7 Nov 2023 15:06:48 +0700
Subject: [PATCH] no message

---
 src/modules/05_leave/componenst/Form.vue      | 293 +++++++
 .../05_leave/componenst/addAbsence.vue        | 810 ++++++++++--------
 src/modules/05_leave/interface/index/main.ts  |   2 +-
 .../05_leave/interface/request/AddAbsence.ts  |   6 +
 src/modules/05_leave/router.ts                |   2 +-
 src/modules/05_leave/store.ts                 |  64 +-
 src/modules/05_leave/views/AddPage.vue        | 174 ++++
 7 files changed, 991 insertions(+), 360 deletions(-)
 create mode 100644 src/modules/05_leave/componenst/Form.vue
 create mode 100644 src/modules/05_leave/interface/request/AddAbsence.ts
 create mode 100644 src/modules/05_leave/views/AddPage.vue

diff --git a/src/modules/05_leave/componenst/Form.vue b/src/modules/05_leave/componenst/Form.vue
new file mode 100644
index 0000000..3c248c3
--- /dev/null
+++ b/src/modules/05_leave/componenst/Form.vue
@@ -0,0 +1,293 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRouter, useRoute } from "vue-router";
+
+const router = useRouter();
+const mixin = useCounterMixin();
+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 { date2Thai, dateToISO, success, messageError, showLoader, hideLoader } =
+  mixin;
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: "",
+  },
+  data: {
+    type: Object,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+});
+</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-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="props.type === '7'"
+        dense
+        outlined
+        v-model="levelStudy"
+        label="ระดับที่ขอลาศึกษา"
+        :readonly="routeName != 'addAbsence'"
+      />
+
+      <q-input
+        class="col-4"
+        v-if="props.type === '7'"
+        dense
+        outlined
+        v-model="degree"
+        label="ชื่อปริญญา/ประกาศนียบัตร"
+        :readonly="routeName != 'addAbsence'"
+      />
+
+      <q-input
+        class="col-4"
+        v-if="props.type === '7'"
+        dense
+        outlined
+        v-model="major"
+        label="สาขาวิชาเอก/หลักสูตร/วิชา"
+        :readonly="routeName != 'addAbsence'"
+      />
+
+      <q-input
+        class="col-4"
+        v-if="props.type === '7'"
+        dense
+        outlined
+        v-model="educational"
+        label="ณ สถานศึกษา"
+        :readonly="routeName != 'addAbsence'"
+      />
+
+      <q-input
+        class="col-4"
+        v-if="props.type === '7'"
+        dense
+        outlined
+        v-model="studyPeriod"
+        label="ระยะเวลาในการศึกษาตลอดหลักสูตร"
+        :readonly="routeName != 'addAbsence'"
+      />
+
+      <q-input
+        class="col-4"
+        v-if="props.type === '7'"
+        dense
+        outlined
+        v-model="country"
+        label="ประเทศ"
+        :readonly="routeName != 'addAbsence'"
+      />
+
+      <q-input
+        class="col-4"
+        v-if="props.type === '7'"
+        dense
+        outlined
+        v-model="capital"
+        label="ด้วยทุน"
+        :readonly="routeName != 'addAbsence'"
+      />
+
+      <q-input
+        class="col-8"
+        v-if="props.type === '7'"
+        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>
+
+      <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>
+</template>
diff --git a/src/modules/05_leave/componenst/addAbsence.vue b/src/modules/05_leave/componenst/addAbsence.vue
index bc8f629..7c670d9 100644
--- a/src/modules/05_leave/componenst/addAbsence.vue
+++ b/src/modules/05_leave/componenst/addAbsence.vue
@@ -1,364 +1,504 @@
 <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 http from "@/plugins/http"
-import config from "@/app.config"
-import type { QForm } from "quasar"
+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";
 
-const mixin = useCounterMixin()
-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 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 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:"ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ"},
+]);
 
-const optionsSpecific = ref(["ลาไปศึกษา", "ฝึกอบรม", "ปฎิบัติการวิจัย", "ดูงาน"])
+const optionsSpecific = ref([
+  {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="options" prefix="ประเภทใบลา :" />
-							</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/interface/index/main.ts b/src/modules/05_leave/interface/index/main.ts
index 96dd28b..486b8c3 100644
--- a/src/modules/05_leave/interface/index/main.ts
+++ b/src/modules/05_leave/interface/index/main.ts
@@ -21,7 +21,7 @@ interface formListLeaveData {
 	date: string | null
 	type: string
 	status: string
-	fiscalyear: string
+	year: string
 }
 
 export type { OptionData, FormLeavetMainData, formListLeaveData }
diff --git a/src/modules/05_leave/interface/request/AddAbsence.ts b/src/modules/05_leave/interface/request/AddAbsence.ts
new file mode 100644
index 0000000..13aaab3
--- /dev/null
+++ b/src/modules/05_leave/interface/request/AddAbsence.ts
@@ -0,0 +1,6 @@
+interface OptionDataAdd {
+
+}
+export type {
+    OptionDataAdd
+}
\ No newline at end of file
diff --git a/src/modules/05_leave/router.ts b/src/modules/05_leave/router.ts
index 777a84b..211bf09 100644
--- a/src/modules/05_leave/router.ts
+++ b/src/modules/05_leave/router.ts
@@ -3,7 +3,7 @@
  */
 const leave = () => import("@/modules/05_leave/views/Main.vue")
 
-const addAbsence = () => import("@/modules/05_leave/componenst/addAbsence.vue")
+const addAbsence = () => import("@/modules/05_leave/views/AddPage.vue")
 
 /* const Checkout = () => import("@/modules/04_checkin/views/Checkout.vue");
  */
diff --git a/src/modules/05_leave/store.ts b/src/modules/05_leave/store.ts
index acf78a6..b53cfac 100644
--- a/src/modules/05_leave/store.ts
+++ b/src/modules/05_leave/store.ts
@@ -1,7 +1,7 @@
 import { defineStore } from "pinia"
 import { ref, computed } from "vue"
 import type { QTableProps } from "quasar"
-import type { FormLeavetMainData, OptionData, formListLeaveData } from "@/modules/05_leave/interface/index/"
+import type { FormLeavetMainData, OptionData, formListLeaveData } from "@/modules/05_leave/interface/index/main"
 import { useCounterMixin } from "@/stores/mixin"
 
 export const useLeaveStore = defineStore("Leave", () => {
@@ -10,7 +10,7 @@ export const useLeaveStore = defineStore("Leave", () => {
 	const LeaveType = ref<string | null>("0")
 	const LeaveStatus = ref<string | null>("0")
 	const fiscalYearyear = ref<string | null>("0")
-	const rows = ref<formListLeaveData>([])
+	const rows = ref<formListLeaveData[]>([])
 	const DataMainOrig = ref<formListLeaveData[]>([]) // ข้อมูลหลักดั้งเดิม
 	async function fecthList(data: formListLeaveData[]) {
 		let datalist: formListLeaveData[] = data.map((e: any) => ({
@@ -31,21 +31,21 @@ export const useLeaveStore = defineStore("Leave", () => {
 		if (filterType === "" && filterStatus === "" && filterYear === "") {
 			DataMainUpdate.value = DataMainOrig.value
 		} else if (filterType !== "" && filterStatus === "" && filterYear === "") {
-			DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.Type === filterType)
+			DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.type === filterType)
 		} else if (filterType !== "" && filterStatus !== "" && filterYear === null) {
-			DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.Type === filterType && item.Status === filterStatus)
+			DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.type === filterType && item.status === filterStatus)
 		} else if (filterType !== "" && filterStatus === "" && filterYear !== "") {
-			DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.Type === filterType && item.fiscalYear === filterYear)
+			DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.type === filterType && item.year === filterYear)
 		} else if (filterType === "" && filterStatus !== "" && filterYear === "") {
-			DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.Status === filterStatus)
+			DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.status === filterStatus)
 		} else if (filterType === "" && filterStatus === "" && filterYear !== "") {
-			DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.fiscalYear === filterYear)
+			DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.year === filterYear)
 		} else if (filterType === "" && filterStatus !== "" && filterYear !== null) {
-			DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.Status === filterStatus && item.fiscalYear === filterYear)
+			DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.status === filterStatus && item.year === filterYear)
 		} else if (filterType !== "" && filterStatus !== "" && filterYear === "") {
-			DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.Status === filterStatus && item.Type === filterType)
+			DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.status === filterStatus && item.type === filterType)
 		} else if (filterType !== "" && filterStatus !== "" && filterYear !== null) {
-			DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.Type === filterType && item.Status === filterStatus && item.fiscalYear === filterYear)
+			DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.type === filterType && item.status === filterStatus && item.year === filterYear)
 		} else if (filterType == "0" && filterStatus == "0" && filterYear !== null) {
 			DataMainUpdate.value = DataMainOrig.value
 		}
@@ -67,13 +67,13 @@ export const useLeaveStore = defineStore("Leave", () => {
 			if (fiscalYearyear.value !== "0") {
 				filteredData = filteredData.filter((item: formListLeaveData) => item.year === fiscalYearyear.value)
 			}
-			const dataArr = filteredData.map((e: any) => ({
+			const dataArr: formListLeaveData[] = filteredData.map((e: any) => ({
 				no: e.no,
-				type: convertType(e.type),
-				status: convertStatus(e.status),
+				type: convertType(e.type) || '',
+				status: convertStatus(e.status) || '',
 				date: date2Thai(new Date(e.date)),
-				year: convertYear(e.year),
-			}))
+				year: e.year !== undefined ? e.year : ''
+			}));
 			rows.value = dataArr
 		}
 	}
@@ -162,12 +162,16 @@ export const useLeaveStore = defineStore("Leave", () => {
 		}
 	}
 
-	const optionsSpecific = ref<OptionData[]>([
-		{ id: "0", name: "ลาไปศึกษา" },
-		{ id: "1", name: "ฝึกอบรม" },
-		{ id: "2", name: "ปฎิบัติการวิจัย" },
-		{ id: "2", name: "ดูงาน" },
-	])
+	const optionsSpecific = ref([
+		{ id: '0', name: "ลาไปศึกษา" },
+		{ id: '1', name: "ฝึกอบรม" },
+		{ id: '2', name: "ปฎิบัติการวิจัย" },
+		{ id: '3', name: "ดูงาน" },
+	]);
+	const optionsOrdination = ref([
+		{ id: '0', name: "ลาอุปสมบท" },
+		{ id: '1', name: "ลาประกอบพิธีฮัจย์" },
+	]);
 	const typeOptions = ref<OptionData[]>([
 		{ id: "0", name: "ทั้งหมด" },
 		{ id: "1", name: "ลาป่วย" },
@@ -181,8 +185,20 @@ export const useLeaveStore = defineStore("Leave", () => {
 		{ id: "9", name: "ลาติดตามคู่สมรส" },
 		{ id: "10", name: "ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ" },
 	])
-
-	const statusOptions = ref<OptionData>([
+	const options = ref<OptionData[]>([
+		{ 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 statusOptions = ref<OptionData[]>([
 		{ id: "0", name: "ทั้งหมด" },
 		{ id: "1", name: "อนุมัติ" },
 		{ id: "2", name: "ไม่อนุมัติ" },
@@ -247,5 +263,7 @@ export const useLeaveStore = defineStore("Leave", () => {
 		searchFilterTable,
 		fiscalyearOP,
 		fiscalYearyear,
+		options,
+		optionsOrdination
 	}
 })
diff --git a/src/modules/05_leave/views/AddPage.vue b/src/modules/05_leave/views/AddPage.vue
new file mode 100644
index 0000000..06702f5
--- /dev/null
+++ b/src/modules/05_leave/views/AddPage.vue
@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import { ref, onMounted,computed } from "vue";
+import { useQuasar } from "quasar";
+import { useRouter, useRoute } from "vue-router";
+
+import Form from '@/modules/05_leave/componenst/Form.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 router = useRouter();
+const route = useRoute();
+const myform = ref<QForm | null>(null);
+const $q = useQuasar();
+
+const model = ref('');
+const modelSpecific = ref(null);
+
+
+
+const clickBack = () => {
+  router.push(`/leave`);
+};
+
+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(() => {});
+};
+</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">
+                เลือกประเภทการลา {{ model }}
+              </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.options"
+                  option-value="id"
+                  option-label="name"
+                  emit-value
+                  map-options
+                  prefix="ประเภทใบลา :"
+                />
+                <!-- v-if (ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ||ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน) -->
+                <div class="col-6 row q-pa-sm" v-if="model === '5' || model === '7'">
+                  <q-select
+                    dense
+                    class="q-ml-lg col-6"
+                    outlined
+                    v-model="modelSpecific"
+                    :options="model === '5' ? dataStore.optionsOrdination : dataStore.optionsSpecific"
+                    option-value="id"
+                    option-label="name"
+                    emit-value
+                    map-options
+                    prefix="ประเภทใบลา :"
+                  />
+                </div>
+              </div>
+              <q-icon
+                name="mdi-numeric-2-circle"
+                size="20px"
+                color="primary"
+                v-if="model == '7'"
+              />
+              <div
+                class="q-pl-sm text-weight-bold text-dark"
+                v-if="model == '7'"
+              >
+                เลือกประเภทใบลาศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน
+              </div>
+              <div
+                class="col-12 row q-pa-sm q-col-gutter-sm"
+                v-if="model == '7'"
+              >
+                <q-select
+                  dense
+                  class="q-ml-lg col-6"
+                  outlined
+                  v-model="modelSpecific"
+                  :options="dataStore.optionsSpecific"
+                  option-value="id"
+                  option-label="name"
+                  emit-value
+                  map-options
+                  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 == '7'"
+              />
+              <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+                <Form :type="model"/>
+            </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;
+}
+</style>