From 37a0f984c373fc3dee4d25d3df549bc4cc1af1db Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Mon, 8 Jan 2024 18:05:30 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84=E0=B8=82?=
 =?UTF-8?q?=E0=B8=9F=E0=B8=AD=E0=B8=A3=E0=B9=8C=E0=B8=A1=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=A5=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/leave/api.leave.ts                   |   1 +
 src/modules/05_leave/components/ListView.vue | 376 ++++------
 src/modules/05_leave/views/AddPage.vue       | 345 ++++-----
 src/modules/05_leave/views/EditPage.vue      | 716 ++++++++-----------
 4 files changed, 591 insertions(+), 847 deletions(-)

diff --git a/src/api/leave/api.leave.ts b/src/api/leave/api.leave.ts
index 29515f2..313770b 100644
--- a/src/api/leave/api.leave.ts
+++ b/src/api/leave/api.leave.ts
@@ -21,6 +21,7 @@ export default {
 	leaveStats: () => `${leave}/user/summary`,
 	leaveUser: () => `${leave}/user`,
 	leaveUserId: (id: string) => `${leave}/user/${id}`,
+	leaveUserSendId: (id: string) => `${leave}/user/send/${id}`,
 	leaveProfile: () => `${leave}/user/profile`,
 	leaveCheck: () => `${leave}/user/check`,
 	leaveReport: (id: string) => `${leave}/report/${id}`,
diff --git a/src/modules/05_leave/components/ListView.vue b/src/modules/05_leave/components/ListView.vue
index cea050d..486ffd3 100644
--- a/src/modules/05_leave/components/ListView.vue
+++ b/src/modules/05_leave/components/ListView.vue
@@ -1,83 +1,82 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
-import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useRouter, useRoute } from "vue-router";
+import { ref, onMounted } from "vue"
+import { useQuasar } from "quasar"
+import http from "@/plugins/http"
+import config from "@/app.config"
+import { useRouter, useRoute } from "vue-router"
 
 /** import type*/
-import type { LeaveType } from "@/modules/05_leave/interface/response/leave";
+import type { LeaveType } from "@/modules/05_leave/interface/response/leave"
 
 /** import componest*/
-import DialogDetail from "@/modules/05_leave/components/DialogDetail.vue";
-import Table from "@/modules/05_leave/components/Table.vue";
+import DialogDetail from "@/modules/05_leave/components/DialogDetail.vue"
+import Table from "@/modules/05_leave/components/Table.vue"
 
 /** import stort*/
-import { useCounterMixin } from "@/stores/mixin";
-import { useLeaveStore } from "@/modules/05_leave/store";
+import { useCounterMixin } from "@/stores/mixin"
+import { useLeaveStore } from "@/modules/05_leave/store"
 
-const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, monthYear2Thai } =
-  mixin;
-const LeaveData = useLeaveStore();
-const router = useRouter();
-const route = useRoute();
-const $q = useQuasar();
+const mixin = useCounterMixin()
+const { showLoader, hideLoader, messageError, date2Thai, monthYear2Thai } = mixin
+const LeaveData = useLeaveStore()
+const router = useRouter()
+const route = useRoute()
+const $q = useQuasar()
 
 /** filter */
-const year = ref<number>(new Date().getFullYear());
-const type = ref<string>("00000000-0000-0000-0000-000000000000");
-const status = ref<string>("ALL");
-const filter = ref<string>("");
+const year = ref<number>(new Date().getFullYear())
+const type = ref<string>("00000000-0000-0000-0000-000000000000")
+const status = ref<string>("ALL")
+const filter = ref<string>("")
 
 /** pagination*/
-const maxPage = ref<number>(1);
-const page = ref<number>(1);
-const pageSize = ref<number>(10);
+const maxPage = ref<number>(1)
+const page = ref<number>(1)
+const pageSize = ref<number>(10)
 
 /** function เรียกข้อมูลการลา*/
 async function fetchDataTable() {
-  showLoader();
-  const body = {
-    year: year.value, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
-    type: type.value, //*Id ประเภทการลา
-    status: status.value, //*สถานะการของลา
-    page: page.value.toString(), //*หน้า
-    pageSize: pageSize.value.toString(), //*จำนวนแถวต่อหน้า
-    keyword: filter.value, //keyword ค้นหา
-  };
-  await http
-    .post(config.API.leaveTableList(), body)
-    .then((res) => {
-      const data = res.data.result.data;
-      LeaveData.fetchListLeave(data);
-      maxPage.value = Math.ceil(res.data.result.total / pageSize.value);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+	showLoader()
+	const body = {
+		year: year.value, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
+		type: type.value, //*Id ประเภทการลา
+		status: status.value, //*สถานะการของลา
+		page: page.value.toString(), //*หน้า
+		pageSize: pageSize.value.toString(), //*จำนวนแถวต่อหน้า
+		keyword: filter.value, //keyword ค้นหา
+	}
+	await http
+		.post(config.API.leaveTableList(), body)
+		.then(res => {
+			const data = res.data.result.data
+			LeaveData.fetchListLeave(data)
+			maxPage.value = Math.ceil(res.data.result.total / pageSize.value)
+		})
+		.catch(err => {
+			messageError($q, err)
+		})
+		.finally(() => {
+			hideLoader()
+		})
 }
 
-const leaveType = ref<LeaveType[]>();
+const leaveType = ref<LeaveType[]>()
 /** function เรียกประเภทการลา */
 async function fectOptionType() {
-  await http
-    .get(config.API.leaveType())
-    .then(async (res) => {
-      leaveType.value = res.data.result;
-      LeaveData.fetchLeaveType(res.data.result);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
+	await http
+		.get(config.API.leaveType())
+		.then(async res => {
+			leaveType.value = res.data.result
+			LeaveData.fetchLeaveType(res.data.result)
+		})
+		.catch(err => {
+			messageError($q, err)
+		})
 }
 
-const modal = ref<boolean>(false);
-const leaveId = ref<string>("");
-const leaveStatus = ref<string>("");
+const modal = ref<boolean>(false)
+const leaveId = ref<string>("")
+const leaveStatus = ref<string>("")
 
 /**
  * function openPopupDateail
@@ -85,18 +84,18 @@ const leaveStatus = ref<string>("");
  * @param status การลา
  */
 const onClickView = async (id: string, status: string) => {
-  modal.value = true;
-  leaveId.value = id;
-  leaveStatus.value = status;
-};
+	modal.value = true
+	leaveId.value = id
+	leaveStatus.value = status
+}
 
 const onClickEdit = async (id: string) => {
-  router.push(`/leave/edit/${id}`);
-};
+	router.push(`/leave/edit/${id}`)
+}
 
 /** function closePopup*/
 async function onClickClose() {
-  modal.value = false;
+	modal.value = false
 }
 
 /**
@@ -107,13 +106,13 @@ async function onClickClose() {
  * @param k คำค้นหา
  */
 async function updateFilterTable(y: number, t: string, s: string, k: string) {
-  if (t && s) {
-    year.value = await y;
-    type.value = await t;
-    status.value = await s;
-    filter.value = await k;
-    await fetchDataTable();
-  }
+	if (t && s) {
+		year.value = await y
+		type.value = await t
+		status.value = await s
+		filter.value = await k
+		await fetchDataTable()
+	}
 }
 
 /**
@@ -122,152 +121,96 @@ async function updateFilterTable(y: number, t: string, s: string, k: string) {
  * @param ps แถวต่อหน้า
  */
 async function updatePagination(p: number, ps: number) {
-  (page.value = await p), (pageSize.value = await ps);
-  await fetchDataTable();
+	;(page.value = await p), (pageSize.value = await ps)
+	await fetchDataTable()
 }
 
 /**
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
 onMounted(async () => {
-  await fetchDataTable();
-  await fectOptionType();
-});
+	await fetchDataTable()
+	await fectOptionType()
+})
 </script>
 <template>
-  <Table
-    :rows="LeaveData.rows"
-    :columns="LeaveData.columns"
-    :visible-columns="LeaveData.visibleColumns"
-    v-model:inputfilter="filter"
-    v-model:inputvisible="LeaveData.visibleColumns"
-    :inputShow="true"
-    :grid="$q.screen.gt.xs ? false : true"
-    @update:filter="updateFilterTable"
-    @update:Pagination="updatePagination"
-    :maxPage="maxPage"
-    :pageSize="pageSize"
-    :leaveType="leaveType"
-  >
-    <template #columns="props">
-      <q-tr :props="props" class="cursor-pointer">
-        <q-td
-          key="no"
-          :props="props"
-          @click="onClickView(props.row.id, props.row.status)"
-        >
-          {{ (page - 1) * pageSize + props.rowIndex + 1 }}
-        </q-td>
-        <q-td
-          key="leaveTypeName"
-          :props="props"
-          @click="onClickView(props.row.id, props.row.status)"
-        >
-          {{ props.row.leaveTypeName }}
-        </q-td>
-        <q-td
-          key="dateSendLeave"
-          :props="props"
-          @click="onClickView(props.row.id, props.row.status)"
-        >
-          {{ props.row.dateSendLeave }}
-        </q-td>
+	<Table
+		:rows="LeaveData.rows"
+		:columns="LeaveData.columns"
+		:visible-columns="LeaveData.visibleColumns"
+		v-model:inputfilter="filter"
+		v-model:inputvisible="LeaveData.visibleColumns"
+		:inputShow="true"
+		:grid="$q.screen.gt.xs ? false : true"
+		@update:filter="updateFilterTable"
+		@update:Pagination="updatePagination"
+		:maxPage="maxPage"
+		:pageSize="pageSize"
+		:leaveType="leaveType"
+	>
+		<template #columns="props">
+			<q-tr :props="props" class="cursor-pointer">
+				<q-td key="no" :props="props" @click="onClickView(props.row.id, props.row.status)">
+					{{ (page - 1) * pageSize + props.rowIndex + 1 }}
+				</q-td>
+				<q-td key="leaveTypeName" :props="props" @click="onClickView(props.row.id, props.row.status)">
+					{{ props.row.leaveTypeName }}
+				</q-td>
+				<q-td key="dateLeave" :props="props">
+					{{ props.row.dateLeave }}
+				</q-td>
+				<q-td key="dateSendLeave" :props="props" @click="onClickView(props.row.id, props.row.status)">
+					{{ props.row.dateSendLeave }}
+				</q-td>
 
-        <q-td key="status" :props="props">
-          <div class="col-12 row items-center">
-            <div @click="onClickView(props.row.id, props.row.status)">
-              <q-icon
-                v-if="props.row.status == 'DRAFT'"
-                size="10px"
-                color="light-grey"
-                name="mdi-circle"
-                class="q-mr-sm"
-              />
-              <q-icon
-                v-if="props.row.status == 'APPROVE'"
-                size="10px"
-                color="light-green"
-                name="mdi-circle"
-                class="q-mr-sm"
-              />
-              <q-icon
-                v-else-if="props.row.status == 'REJECT'"
-                size="10px"
-                color="red-6"
-                name="mdi-circle"
-                class="q-mr-sm"
-              />
-              <q-icon
-                v-else-if="props.row.status == 'PENDING'"
-                size="10px"
-                color="light-blue-14"
-                name="mdi-circle"
-                class="q-mr-sm"
-              />
-              <q-icon
-                v-else-if="props.row.status == 'NEW'"
-                size="10px"
-                color="orange"
-                name="mdi-circle"
-                class="q-mr-sm"
-              />
-              <q-icon
-                v-if="props.row.status == 'DELETE'"
-                size="10px"
-                color="grey-10"
-                name="mdi-circle"
-                class="q-mr-sm"
-              />
+				<q-td key="status" :props="props">
+					<div class="col-12 row items-center">
+						<div @click="onClickView(props.row.id, props.row.status)">
+							<q-icon v-if="props.row.status == 'DRAFT'" size="10px" color="light-grey" name="mdi-circle" class="q-mr-sm" />
+							<q-icon v-if="props.row.status == 'APPROVE'" size="10px" color="light-green" name="mdi-circle" class="q-mr-sm" />
+							<q-icon v-else-if="props.row.status == 'REJECT'" size="10px" color="red-6" name="mdi-circle" class="q-mr-sm" />
+							<q-icon v-else-if="props.row.status == 'PENDING'" size="10px" color="light-blue-14" name="mdi-circle" class="q-mr-sm" />
+							<q-icon v-else-if="props.row.status == 'NEW'" size="10px" color="orange" name="mdi-circle" class="q-mr-sm" />
+							<q-icon v-if="props.row.status == 'DELETE'" size="10px" color="grey-10" name="mdi-circle" class="q-mr-sm" />
 
-              <span class="q-pr-md">{{ props.row.statusConvert }}</span>
-            </div>
-            <q-space />
+							<span class="q-pr-md">{{ props.row.statusConvert }}</span>
+						</div>
+						<q-space />
 
-            <q-btn
-              v-if="
-                props.row.status != 'DELETE' &&
-                props.row.status != 'REJECT' &&
-                props.row.status != 'CANCEL'
-              "
-              flat
-              icon="mdi-dots-vertical"
-              color="grey-8"
-              for="#cancel"
-              dense
-              round
-              unelevated
-            >
-              <q-menu>
-                <q-list>
-                  <q-item
-                    clickable
-                    v-close-popup
-                    @click="onClickView(props.row.id, 'CANCEL')"
-                  >
-                    <q-item-section>
-                      <q-item-label>ขอยกเลิก</q-item-label>
-                    </q-item-section>
-                  </q-item>
-                  <q-item
-                    v-if="
-                      props.row.status != 'DELETE' &&
-                      props.row.status != 'REJECT' &&
-                      props.row.status != 'CANCEL' &&
-                      props.row.status == 'NEW'
-                    "
-                    clickable
-                    v-close-popup
-                    @click="onClickEdit(props.row.id)"
-                  >
-                    <q-item-section>
-                      <q-item-label>แก้ไข</q-item-label>
-                    </q-item-section>
-                  </q-item>
-                </q-list>
-              </q-menu>
-            </q-btn>
+						<q-btn
+							v-if="props.row.status != 'DELETE' && props.row.status != 'REJECT' && props.row.status != 'CANCEL'"
+							flat
+							icon="mdi-dots-vertical"
+							color="grey-8"
+							for="#cancel"
+							dense
+							round
+							unelevated
+						>
+							<q-menu>
+								<q-list>
+									<q-item clickable v-close-popup @click="onClickView(props.row.id, 'CANCEL')">
+										<q-item-section>
+											<q-item-label>ขอยกเลิก</q-item-label>
+										</q-item-section>
+									</q-item>
+									<q-item
+										v-if="
+											(props.row.status != 'DELETE' && props.row.status != 'REJECT' && props.row.status != 'CANCEL' && props.row.status == 'NEW') || props.row.status == 'DRAFT'
+										"
+										clickable
+										v-close-popup
+										@click="onClickEdit(props.row.id)"
+									>
+										<q-item-section>
+											<q-item-label>แก้ไข</q-item-label>
+										</q-item-section>
+									</q-item>
+								</q-list>
+							</q-menu>
+						</q-btn>
 
-            <!-- <q-btn
+						<!-- <q-btn
 							v-if="props.row.status != 'DELETE' && props.row.status != 'REJECT' && props.row.status != 'CANCEL'"
 							label="ขอยกเลิก"
 							@click="onClickView(props.row.id, 'CANCEL')"
@@ -288,18 +231,11 @@ onMounted(async () => {
 							dense
 							color="primary"
 						/> -->
-          </div>
-        </q-td>
-      </q-tr>
-    </template>
-  </Table>
+					</div>
+				</q-td>
+			</q-tr>
+		</template>
+	</Table>
 
-  <DialogDetail
-    :modal="modal"
-    :leaveId="leaveId"
-    :leaveStatus="leaveStatus"
-    :onClickClose="onClickClose"
-    :leaveType="leaveType"
-    :fetchDataTable="fetchDataTable"
-  />
+	<DialogDetail :modal="modal" :leaveId="leaveId" :leaveStatus="leaveStatus" :onClickClose="onClickClose" :leaveType="leaveType" :fetchDataTable="fetchDataTable" />
 </template>
diff --git a/src/modules/05_leave/views/AddPage.vue b/src/modules/05_leave/views/AddPage.vue
index 8105f40..344836e 100644
--- a/src/modules/05_leave/views/AddPage.vue
+++ b/src/modules/05_leave/views/AddPage.vue
@@ -1,235 +1,164 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
-import { useQuasar } from "quasar";
-import { useRouter, useRoute } from "vue-router";
-import { useLeaveStore } from "@/modules/05_leave/store";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import type { QForm } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
+import { ref, onMounted } from "vue"
+import { useQuasar } from "quasar"
+import { useRouter, useRoute } from "vue-router"
+import { useLeaveStore } from "@/modules/05_leave/store"
+import http from "@/plugins/http"
+import config from "@/app.config"
+import type { QForm } from "quasar"
+import { useCounterMixin } from "@/stores/mixin"
 
-import FormPart2 from "@/modules/05_leave/components/FormLeave/Form.vue";
-import SickForm from "@/modules/05_leave/components/FormLeave/01_SickForm.vue";
-import FormBirth from "@/modules/05_leave/components/FormLeave/03_Birth.vue";
-import HelpWifeBirthForm from "@/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue";
-import VacationForm from "@/modules/05_leave/components/FormLeave/05_VacationForm.vue";
-import OrdinationForm from "@/modules/05_leave/components/FormLeave/06_OrdinationForm.vue";
-import HajjForm from "@/modules/05_leave/components/FormLeave/07_HajjForm.vue";
-import MilitaryForm from "@/modules/05_leave/components/FormLeave/08_MilitaryForm.vue";
-import StudyForm from "@/modules/05_leave/components/FormLeave/09_StudyForm.vue";
-import TrainForm from "@/modules/05_leave/components/FormLeave/10_TrainForm.vue";
-import WorkInternationalForm from "@/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue";
-import FollowSpouseForm from "@/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue";
-import RehabilitationForm from "@/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue";
+import FormPart2 from "@/modules/05_leave/components/FormLeave/Form.vue"
+import SickForm from "@/modules/05_leave/components/FormLeave/01_SickForm.vue"
+import FormBirth from "@/modules/05_leave/components/FormLeave/03_Birth.vue"
+import HelpWifeBirthForm from "@/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue"
+import VacationForm from "@/modules/05_leave/components/FormLeave/05_VacationForm.vue"
+import OrdinationForm from "@/modules/05_leave/components/FormLeave/06_OrdinationForm.vue"
+import HajjForm from "@/modules/05_leave/components/FormLeave/07_HajjForm.vue"
+import MilitaryForm from "@/modules/05_leave/components/FormLeave/08_MilitaryForm.vue"
+import StudyForm from "@/modules/05_leave/components/FormLeave/09_StudyForm.vue"
+import TrainForm from "@/modules/05_leave/components/FormLeave/10_TrainForm.vue"
+import WorkInternationalForm from "@/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue"
+import FollowSpouseForm from "@/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue"
+import RehabilitationForm from "@/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue"
 
-const dataStore = useLeaveStore();
-const { fetchLeaveType } = dataStore;
-const mixin = useCounterMixin();
-const { dialogConfirm, success, messageError, showLoader, hideLoader } = mixin;
+const dataStore = useLeaveStore()
+const { fetchLeaveType } = dataStore
+const mixin = useCounterMixin()
+const { dialogConfirm, success, messageError, showLoader, hideLoader } = mixin
 
-const router = useRouter();
-const route = useRoute();
-const myform = ref<QForm | null>(null);
-const $q = useQuasar();
+const router = useRouter()
+const route = useRoute()
+const myform = ref<QForm | null>(null)
+const $q = useQuasar()
 
-const model = ref<string>("");
-const modelSpecific = ref<string>("");
+const model = ref<string>("")
+const modelSpecific = ref<string>("")
 
 /**
  * ดึงค่าประเภทการลาจาก Api
  */
 async function fectOptionType() {
-  await http
-    .get(config.API.leaveType())
-    .then(async (res) => {
-      const data = res.data.result;
-      await fetchLeaveType(data);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
+	await http
+		.get(config.API.leaveType())
+		.then(async res => {
+			const data = res.data.result
+			await fetchLeaveType(data)
+		})
+		.catch(err => {
+			messageError($q, err)
+		})
 }
 
 function inputEdit(val: boolean) {
-  return {
-    "full-width cursor-pointer ": val,
-    "full-width cursor-pointer inputgreen": !val,
-  };
+	return {
+		"full-width cursor-pointer ": val,
+		"full-width cursor-pointer inputgreen": !val,
+	}
 }
 
 function onSubmit(postData: FormData) {
-  dialogConfirm($q, async () => {
-    showLoader();
-    await http
-      .post(config.API.leaveUser(), postData)
-      .then(() => {
-        // router.push(`/leave/edit/${id}`);
-        router.push("/leave");
-        success($q, "บันทึกสำเร็จ");
-      })
-      .catch((e: any) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  });
+	dialogConfirm($q, async () => {
+		showLoader()
+		await http
+			.post(config.API.leaveUser(), postData)
+			.then(res => {
+				router.push(`/leave/edit/${res.data.result.id}`)
+				success($q, "บันทึกสำเร็จ")
+			})
+			.catch((e: any) => {
+				messageError($q, e)
+			})
+			.finally(() => {
+				hideLoader()
+			})
+	})
 }
 
 onMounted(async () => {
-  if (dataStore.options.length == 0) {
-    await fectOptionType();
-  }
-});
+	if (dataStore.options.length == 0) {
+		await fectOptionType()
+	}
+})
 </script>
 
 <template>
-  <div class="col-12 row justify-center">
-    <div class="col-xs-12 col-sm-12 col-md-11">
-      <div class="toptitle text-white col-12 row items-center">
-        <q-btn
-          to="/leave"
-          icon="mdi-arrow-left"
-          unelevated
-          round
-          dense
-          flat
-          color="primary"
-          class="q-mr-sm"
-        />
-        <div>สร้างใบลา</div>
-      </div>
+	<div class="col-12 row justify-center">
+		<div class="col-xs-12 col-sm-12 col-md-11">
+			<div class="toptitle text-white col-12 row items-center">
+				<q-btn to="/leave" icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" />
+				<div>สร้างใบลา</div>
+			</div>
 
-      <q-form ref="myform" class="col-12">
-        <q-card bordered>
-          <div class="col-12 row q-col-gutter-md q-pa-md">
-            <div class="col-xs-12 col-sm-12">
-              <div style="display: flex; align-items: center">
-                <q-icon
-                  name="mdi-numeric-1-circle"
-                  size="20px"
-                  color="primary"
-                />
-                <div class="q-pl-sm text-weight-bold text-dark">
-                  เลือกประเภทการลา
-                </div>
-              </div>
-              <div class="q-py-sm q-px-lg">
-                <div class="row">
-                  <q-select
-                    dense
-                    class="col-12 col-sm-6 col-md-4 inputgreen"
-                    outlined
-                    v-model="model"
-                    :options="dataStore.options"
-                    option-value="code"
-                    option-label="name"
-                    emit-value
-                    map-options
-                    prefix="ประเภทใบลา :"
-                    @update:model-value="
-                      dataStore.typeConvert(model, null),
-                        (modelSpecific = ''),
-                        dataStore.fetchProfile()
-                    "
-                  />
-                </div>
+			<q-form ref="myform" class="col-12">
+				<q-card bordered>
+					<div class="col-12 row q-col-gutter-md q-pa-md">
+						<div class="col-xs-12 col-sm-12">
+							<div style="display: flex; align-items: center">
+								<q-icon name="mdi-numeric-1-circle" size="20px" color="primary" />
+								<div class="q-pl-sm text-weight-bold text-dark">เลือกประเภทการลา</div>
+							</div>
+							<div class="q-py-sm q-px-lg">
+								<div class="row">
+									<q-select
+										dense
+										class="col-12 col-sm-6 col-md-4 inputgreen"
+										outlined
+										v-model="model"
+										:options="dataStore.options"
+										option-value="code"
+										option-label="name"
+										emit-value
+										map-options
+										prefix="ประเภทใบลา :"
+										@update:model-value="dataStore.typeConvert(model, null), (modelSpecific = ''), dataStore.fetchProfile()"
+									/>
+								</div>
 
-                <div class="row q-mt-sm">
-                  <div
-                    class="col-12 col-sm-6 col-md-3"
-                    v-if="model === 'LV-006' || model === 'LV-008'"
-                  >
-                    <q-select
-                      dense
-                      outlined
-                      v-model="modelSpecific"
-                      :options="
-                        model === 'LV-006'
-                          ? dataStore.optionsOrdination
-                          : dataStore.optionsSpecific
-                      "
-                      option-value="code"
-                      option-label="name"
-                      emit-value
-                      map-options
-                      prefix="ประเภทการลา :"
-                      @update:model-value="
-                        dataStore.typeConvert(model, modelSpecific)
-                      "
-                    />
-                  </div>
-                </div>
-              </div>
+								<div class="row q-mt-sm">
+									<div class="col-12 col-sm-6 col-md-3" v-if="model === 'LV-006' || model === 'LV-008'">
+										<q-select
+											dense
+											outlined
+											v-model="modelSpecific"
+											:options="model === 'LV-006' ? dataStore.optionsOrdination : dataStore.optionsSpecific"
+											option-value="code"
+											option-label="name"
+											emit-value
+											map-options
+											prefix="ประเภทการลา :"
+											@update:model-value="dataStore.typeConvert(model, modelSpecific)"
+										/>
+									</div>
+								</div>
+							</div>
 
-              <div>
-                <div style="display: flex; align-items: center">
-                  <q-icon
-                    name="mdi-numeric-2-circle"
-                    size="20px"
-                    color="primary"
-                  />
-                  <div class="q-pl-sm text-weight-bold text-dark">
-                    ข้อมูลการลา
-                  </div>
-                </div>
-                <FormPart2 :model="model" />
-              </div>
-            </div>
+							<div>
+								<div style="display: flex; align-items: center">
+									<q-icon name="mdi-numeric-2-circle" size="20px" color="primary" />
+									<div class="q-pl-sm text-weight-bold text-dark">ข้อมูลการลา</div>
+								</div>
+								<FormPart2 :model="model" />
+							</div>
+						</div>
 
-            <div class="col-12">
-              <SickForm
-                v-if="model === 'LV-001' || model === 'LV-002'"
-                :on-submit="onSubmit"
-              />
-              <FormBirth v-if="model === 'LV-003'" :on-submit="onSubmit" />
-              <HelpWifeBirthForm
-                v-if="model === 'LV-004'"
-                :on-submit="onSubmit"
-              />
-              <VacationForm v-if="model === 'LV-005'" :on-submit="onSubmit" />
-              <OrdinationForm
-                v-if="model === 'LV-006' && modelSpecific == 'b1'"
-                :on-submit="onSubmit"
-              />
-              <HajjForm
-                v-if="model === 'LV-006' && modelSpecific == 'b2'"
-                :on-submit="onSubmit"
-              />
-              <MilitaryForm
-                v-if="model === 'LV-007'"
-                style="width: 100%"
-                :on-submit="onSubmit"
-              />
-              <StudyForm
-                v-if="model === 'LV-008' && modelSpecific === 's1'"
-                style="width: 100%"
-                :on-submit="onSubmit"
-              />
-              <TrainForm
-                v-if="
-                  model === 'LV-008' &&
-                  modelSpecific != 's1' &&
-                  modelSpecific != ''
-                "
-                :on-submit="onSubmit"
-              />
-              <WorkInternationalForm
-                v-if="model === 'LV-009'"
-                :on-submit="onSubmit"
-              />
-              <FollowSpouseForm
-                v-if="model === 'LV-010'"
-                :on-submit="onSubmit"
-              />
-              <RehabilitationForm
-                v-if="model === 'LV-011'"
-                :on-submit="onSubmit"
-              />
-            </div>
-          </div>
-        </q-card>
-      </q-form>
-    </div>
-  </div>
+						<div class="col-12">
+							<SickForm v-if="model === 'LV-001' || model === 'LV-002'" :on-submit="onSubmit" />
+							<FormBirth v-if="model === 'LV-003'" :on-submit="onSubmit" />
+							<HelpWifeBirthForm v-if="model === 'LV-004'" :on-submit="onSubmit" />
+							<VacationForm v-if="model === 'LV-005'" :on-submit="onSubmit" />
+							<OrdinationForm v-if="model === 'LV-006' && modelSpecific == 'b1'" :on-submit="onSubmit" />
+							<HajjForm v-if="model === 'LV-006' && modelSpecific == 'b2'" :on-submit="onSubmit" />
+							<MilitaryForm v-if="model === 'LV-007'" style="width: 100%" :on-submit="onSubmit" />
+							<StudyForm v-if="model === 'LV-008' && modelSpecific === 's1'" style="width: 100%" :on-submit="onSubmit" />
+							<TrainForm v-if="model === 'LV-008' && modelSpecific != 's1' && modelSpecific != ''" :on-submit="onSubmit" />
+							<WorkInternationalForm v-if="model === 'LV-009'" :on-submit="onSubmit" />
+							<FollowSpouseForm v-if="model === 'LV-010'" :on-submit="onSubmit" />
+							<RehabilitationForm v-if="model === 'LV-011'" :on-submit="onSubmit" />
+						</div>
+					</div>
+				</q-card>
+			</q-form>
+		</div>
+	</div>
 </template>
diff --git a/src/modules/05_leave/views/EditPage.vue b/src/modules/05_leave/views/EditPage.vue
index 842f503..7f4cbb1 100644
--- a/src/modules/05_leave/views/EditPage.vue
+++ b/src/modules/05_leave/views/EditPage.vue
@@ -1,456 +1,334 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive, computed } from "vue";
+import { ref, onMounted, reactive, computed } from "vue"
 
 //import form
-import FormPart2 from "@/modules/05_leave/components/FormLeave/Form.vue";
-import SickForm from "@/modules/05_leave/components/FormLeave/01_SickForm.vue";
-import FormBirth from "@/modules/05_leave/components/FormLeave/03_Birth.vue";
-import HelpWifeBirthForm from "@/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue";
-import VacationForm from "@/modules/05_leave/components/FormLeave/05_VacationForm.vue";
-import OrdinationForm from "@/modules/05_leave/components/FormLeave/06_OrdinationForm.vue";
-import HajjForm from "@/modules/05_leave/components/FormLeave/07_HajjForm.vue";
-import MilitaryForm from "@/modules/05_leave/components/FormLeave/08_MilitaryForm.vue";
-import StudyForm from "@/modules/05_leave/components/FormLeave/09_StudyForm.vue";
-import TrainForm from "@/modules/05_leave/components/FormLeave/10_TrainForm.vue";
-import WorkInternationalForm from "@/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue";
-import FollowSpouseForm from "@/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue";
-import RehabilitationForm from "@/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue";
+import FormPart2 from "@/modules/05_leave/components/FormLeave/Form.vue"
+import SickForm from "@/modules/05_leave/components/FormLeave/01_SickForm.vue"
+import FormBirth from "@/modules/05_leave/components/FormLeave/03_Birth.vue"
+import HelpWifeBirthForm from "@/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue"
+import VacationForm from "@/modules/05_leave/components/FormLeave/05_VacationForm.vue"
+import OrdinationForm from "@/modules/05_leave/components/FormLeave/06_OrdinationForm.vue"
+import HajjForm from "@/modules/05_leave/components/FormLeave/07_HajjForm.vue"
+import MilitaryForm from "@/modules/05_leave/components/FormLeave/08_MilitaryForm.vue"
+import StudyForm from "@/modules/05_leave/components/FormLeave/09_StudyForm.vue"
+import TrainForm from "@/modules/05_leave/components/FormLeave/10_TrainForm.vue"
+import WorkInternationalForm from "@/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue"
+import FollowSpouseForm from "@/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue"
+import RehabilitationForm from "@/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue"
 
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
-import { useRoute } from "vue-router";
-import router from "@/router";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useLeaveStore } from "@/modules/05_leave/store";
+import { useCounterMixin } from "@/stores/mixin"
+import { useQuasar } from "quasar"
+import { useRoute } from "vue-router"
+import router from "@/router"
+import http from "@/plugins/http"
+import config from "@/app.config"
+import { useLeaveStore } from "@/modules/05_leave/store"
 
-const route = useRoute();
-const personalId = ref<string>(route.params.id as string);
-const leaveId = ref<string>("");
-const dataStore = useLeaveStore();
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const {
-  messageError,
-  showLoader,
-  hideLoader,
-  dialogConfirm,
-  success,
-  date2Thai,
-  dateToISO,
-} = mixin;
+const route = useRoute()
+const personalId = ref<string>(route.params.id as string)
+const leaveId = ref<string>("")
+const dataStore = useLeaveStore()
+const $q = useQuasar()
+const mixin = useCounterMixin()
+const { messageError, showLoader, hideLoader, dialogConfirm, success, date2Thai, dateToISO } = mixin
 
-const titleName = ref<string>("");
+const titleName = ref<string>("")
 /** Form รายละเอียดข้อมูล*/
 const formData = reactive<any>({
-  id: "", //Id การยื่นขอลา
-  leaveTypeName: "", // Name ประเภทการลา
-  leaveTypeId: "", //Id ประเภทการลา
-  fullname: "", //คำนำหน้า ชื่อ นามสกุล คนขอลา
-  dateSendLeave: null, // วันที่ยืนใบลา
-  status: "", //สถานะการของลา
-  leaveDateStart: null, //วันเริ่มการลา
-  leaveDateEnd: null, //วันสิ้นสุดการลา
-  leaveCount: 0, //จำนวนวันลา
-  leaveWrote: "", //เขียนที่
-  leaveAddress: "", //สถานที่ติดต่อขณะลา
-  leaveNumber: "", //หมายเลขที่ติดต่อขณะลา
-  leaveDetail: "", //รายละเอียดการลา
-  leaveDocument: "", //อัปโหลดเอกสารประกอบรายละเอียด
-  leaveDraftDocument: "", //อัปโหลดแบบฟอร์มการลา
-  leaveLastStart: null, //ลาครั้งสุดท้ายในประเภทนั้น ๆ เริ่มเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
-  leaveLastEnd: null, //ลาครั้งสุดท้ายในประเภทนั้น ๆ สิ้นสุดเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
-  leaveTotal: 0, //จำนวนวันที่ลา(Auto)
-  leavebirthDate: null, //วันเดือนปีเกิด(Auto)
-  leavegovernmentDate: null, //วันที่เข้ารับราชการ(Auto)
-  leaveSalary: 0, //เงินเดือนปัจจุบัน(Auto)
-  leaveSalaryText: "", //เงินเดือนปัจจุบัน(เขียนเป็นคำอ่าน)
-  leaveTypeDay: "", //ประเภทการลาในวันนั้นเช่น
-  wifeDayName: "", //ชื่อภรรยา(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
-  wifeDayDateBorn: null, //วันที่คลอด(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
-  restDayOldTotal: 0, //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา(ลาพักผ่อน)(Auto)
-  restDayCurrentTotal: 0, //จำนวนวันลาพักผ่อนประจำปีปัจจุบัน(ลาพักผ่อน)(Auto)
-  ordainDayStatus: "", //เคย/ไม่เคยบวช (ให้เลือก) (ลาอุปสมบท)
-  ordainDayLocationName: "", //สถานที่บวช ชื่อวัด(ลาอุปสมบท)
-  ordainDayLocationAddress: "", //สถานที่บวช ที่อยู่(ลาอุปสมบท)
-  ordainDayLocationNumber: "", //สถานที่บวช หมายเลขโทรศัพท์(ลาอุปสมบท)
-  ordainDayOrdination: null, //สถานที่บวช วันอุปสมบท(ลาอุปสมบท)
-  ordainDayBuddhistLentName: "", //สถานที่จำพรรษา ชื่อวัด(ลาอุปสมบท)
-  ordainDayBuddhistLentAddress: "", //สถานที่จำพรรษา ที่อยู่(ลาอุปสมบท)
-  hajjDayStatus: "", //เคย/ไม่เคยไปประกอบพิธีฮัจญ์ (ให้เลือก) (ลาประกอบพิธีฮัจญ์)
-  absentDaySummon: "", //ได้รับหมายเรียกของ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
-  absentDayLocation: "", //ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
-  absentDayRegistorDate: null, //ลงวันที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
-  absentDayGetIn: "", //ให้เข้ารับการ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
-  absentDayAt: "", //ณ ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
-  studyDaySubject: "", //กรณีลาไปศึกษาต่อ ศึกษาวิชา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-  studyDayDegreeLevel: "", //กรณีลาไปศึกษาต่อ ขั้นปริญญา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-  studyDayUniversityName: "", //กรณีลาไปศึกษาต่อ ชื่อสถานศึกษา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-  studyDayTrainingSubject: "", //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ด้าน/หลักสูตร (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-  studyDayTrainingName: "", //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ณ สถานที่	(ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-  studyDayCountry: "", //ประเทศ (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-  studyDayScholarship: "", //ด้วยทุน (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-  coupleDayName: "", //ชื่อคู่สมรส (ลาติดตามคู่สมรส)
-  coupleDayPosition: "", //ตำแหน่งคู่สมรส (ลาติดตามคู่สมรส)
-  coupleDayLevel: "", //ระดับคู่สมรส (ลาติดตามคู่สมรส)
-  coupleDayLevelCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ (ลาติดตามคู่สมรส)
-  coupleDayCountryHistory: "", //ประวัติ ประเทศ (ลาติดตามคู่สมรส)
-  coupleDayTotalHistory: "", //ประวัติ เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
-  coupleDayStartDateHistory: null, //ประวัติ ตั้งแต่วันที่ (ลาติดตามคู่สมรส)
-  coupleDayEndDateHistory: null, //ประวัติ ถึงวันที่ (ลาติดตามคู่สมรส)
-  coupleDaySumTotalHistory: "", //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
-  approveStep: "",
-  dear: "",
-  leaveLast: "",
-});
+	id: "", //Id การยื่นขอลา
+	leaveTypeName: "", // Name ประเภทการลา
+	leaveTypeId: "", //Id ประเภทการลา
+	fullname: "", //คำนำหน้า ชื่อ นามสกุล คนขอลา
+	dateSendLeave: null, // วันที่ยืนใบลา
+	status: "", //สถานะการของลา
+	leaveDateStart: null, //วันเริ่มการลา
+	leaveDateEnd: null, //วันสิ้นสุดการลา
+	leaveCount: 0, //จำนวนวันลา
+	leaveWrote: "", //เขียนที่
+	leaveAddress: "", //สถานที่ติดต่อขณะลา
+	leaveNumber: "", //หมายเลขที่ติดต่อขณะลา
+	leaveDetail: "", //รายละเอียดการลา
+	leaveDocument: "", //อัปโหลดเอกสารประกอบรายละเอียด
+	leaveDraftDocument: "", //อัปโหลดแบบฟอร์มการลา
+	leaveLastStart: null, //ลาครั้งสุดท้ายในประเภทนั้น ๆ เริ่มเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
+	leaveLastEnd: null, //ลาครั้งสุดท้ายในประเภทนั้น ๆ สิ้นสุดเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
+	leaveTotal: 0, //จำนวนวันที่ลา(Auto)
+	leavebirthDate: null, //วันเดือนปีเกิด(Auto)
+	leavegovernmentDate: null, //วันที่เข้ารับราชการ(Auto)
+	leaveSalary: 0, //เงินเดือนปัจจุบัน(Auto)
+	leaveSalaryText: "", //เงินเดือนปัจจุบัน(เขียนเป็นคำอ่าน)
+	leaveTypeDay: "", //ประเภทการลาในวันนั้นเช่น
+	wifeDayName: "", //ชื่อภรรยา(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
+	wifeDayDateBorn: null, //วันที่คลอด(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
+	restDayOldTotal: 0, //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา(ลาพักผ่อน)(Auto)
+	restDayCurrentTotal: 0, //จำนวนวันลาพักผ่อนประจำปีปัจจุบัน(ลาพักผ่อน)(Auto)
+	ordainDayStatus: "", //เคย/ไม่เคยบวช (ให้เลือก) (ลาอุปสมบท)
+	ordainDayLocationName: "", //สถานที่บวช ชื่อวัด(ลาอุปสมบท)
+	ordainDayLocationAddress: "", //สถานที่บวช ที่อยู่(ลาอุปสมบท)
+	ordainDayLocationNumber: "", //สถานที่บวช หมายเลขโทรศัพท์(ลาอุปสมบท)
+	ordainDayOrdination: null, //สถานที่บวช วันอุปสมบท(ลาอุปสมบท)
+	ordainDayBuddhistLentName: "", //สถานที่จำพรรษา ชื่อวัด(ลาอุปสมบท)
+	ordainDayBuddhistLentAddress: "", //สถานที่จำพรรษา ที่อยู่(ลาอุปสมบท)
+	hajjDayStatus: "", //เคย/ไม่เคยไปประกอบพิธีฮัจญ์ (ให้เลือก) (ลาประกอบพิธีฮัจญ์)
+	absentDaySummon: "", //ได้รับหมายเรียกของ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+	absentDayLocation: "", //ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+	absentDayRegistorDate: null, //ลงวันที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+	absentDayGetIn: "", //ให้เข้ารับการ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+	absentDayAt: "", //ณ ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+	studyDaySubject: "", //กรณีลาไปศึกษาต่อ ศึกษาวิชา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+	studyDayDegreeLevel: "", //กรณีลาไปศึกษาต่อ ขั้นปริญญา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+	studyDayUniversityName: "", //กรณีลาไปศึกษาต่อ ชื่อสถานศึกษา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+	studyDayTrainingSubject: "", //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ด้าน/หลักสูตร (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+	studyDayTrainingName: "", //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ณ สถานที่	(ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+	studyDayCountry: "", //ประเทศ (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+	studyDayScholarship: "", //ด้วยทุน (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+	coupleDayName: "", //ชื่อคู่สมรส (ลาติดตามคู่สมรส)
+	coupleDayPosition: "", //ตำแหน่งคู่สมรส (ลาติดตามคู่สมรส)
+	coupleDayLevel: "", //ระดับคู่สมรส (ลาติดตามคู่สมรส)
+	coupleDayLevelCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ (ลาติดตามคู่สมรส)
+	coupleDayCountryHistory: "", //ประวัติ ประเทศ (ลาติดตามคู่สมรส)
+	coupleDayTotalHistory: "", //ประวัติ เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
+	coupleDayStartDateHistory: null, //ประวัติ ตั้งแต่วันที่ (ลาติดตามคู่สมรส)
+	coupleDayEndDateHistory: null, //ประวัติ ถึงวันที่ (ลาติดตามคู่สมรส)
+	coupleDaySumTotalHistory: "", //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
+	approveStep: "",
+	dear: "",
+	leaveLast: "",
+})
 
 /**
  * function เรียกข้อมูลการลา
  * @param id การลา
  */
 async function fetchDataDetail(id: string) {
-  showLoader();
-  await http
-    .get(config.API.leaveUserId(id), {})
-    .then(async (res) => {
-      const data = await res.data.result;
+	showLoader()
+	await http
+		.get(config.API.leaveUserId(id), {})
+		.then(async res => {
+			const data = await res.data.result
 
-      dataStore.typeId = data.leaveTypeId;
+			dataStore.typeId = data.leaveTypeId
 
-      titleName.value = data.fullName ?? "-";
-      formData.id = data.id ?? "-";
-      formData.leaveTypeName = data.leaveTypeName ?? "-";
-      formData.leaveTypeId = data.leaveTypeId ?? "-";
-      formData.fullname = data.fullName ?? "-";
-      formData.dateSendLeave =
-        data.dateSendLeave && date2Thai(data.dateSendLeave);
-      formData.status = data.status ?? "-";
-      formData.leaveStartDate = data.leaveStartDate;
-      // console.log(formData.leaveDateStart)
-      formData.leaveEndDate = data.leaveEndDate;
-      // console.log(formData.leaveDateEnd)
-      formData.leaveCount = data.leaveTotal ?? "-";
-      formData.leaveWrote = data.leaveWrote ?? "-";
-      formData.leaveAddress = data.leaveAddress ?? "-";
-      formData.leaveNumber = data.leaveNumber ?? "-";
-      formData.leaveDetail = data.leaveDetail ?? "-";
-      formData.leaveDocument = data.leaveDocument;
-      formData.leaveDraftDocument = data.leaveDraftDocument;
-      formData.leaveLastStart =
-        data.leaveLastStart && date2Thai(data.leaveLastStart);
-      formData.leaveLastEnd =
-        data.leaveLastStart && date2Thai(data.leaveLastEnd);
-      formData.leaveTotal = data.leaveTotal;
-      formData.leavebirthDate =
-        data.leaveBirthDate && date2Thai(data.leaveBirthDate);
-      formData.leavegovernmentDate =
-        data.leaveGovernmentDate && date2Thai(data.leaveGovernmentDate);
-      formData.leaveSalary = data.leaveSalary ?? "-";
-      formData.leaveSalaryText = data.leaveSalaryText ?? "-";
-      formData.wifeDayName = data.wifeDayName ?? "-";
-      formData.wifeDayDateBorn =
-        data.wifeDayDateBorn && date2Thai(data.wifeDayDateBorn);
-      formData.restDayOldTotal = data.restDayOldTotal ?? "-";
-      formData.restDayCurrentTotal = data.restDayCurrentTotal ?? "-";
-      formData.ordainDayStatus = data.ordainDayStatus;
-      formData.ordainDayLocationName = data.ordainDayLocationName ?? "-";
-      formData.ordainDayLocationAddress = data.ordainDayLocationAddress ?? "-";
-      formData.ordainDayLocationNumber = data.ordainDayLocationNumber ?? "-";
-      formData.ordainDayOrdination =
-        data.ordainDayOrdination && date2Thai(data.ordainDayOrdination);
-      formData.ordainDayBuddhistLentName =
-        data.ordainDayBuddhistLentName ?? "-";
-      formData.ordainDayBuddhistLentAddress =
-        data.ordainDayBuddhistLentAddress ?? "-";
-      formData.hajjDayStatus = data.hajjDayStatus;
-      formData.absentDaySummon = data.absentDaySummon ?? "-";
-      formData.absentDayLocation = data.absentDayLocation ?? "-";
-      formData.absentDayRegistorDate =
-        data.absentDayRegistorDate && date2Thai(data.absentDayRegistorDate);
-      formData.absentDayGetIn = data.absentDayGetIn ?? "-";
-      formData.absentDayAt = data.absentDayAt ?? "-";
-      formData.studyDaySubject = data.studyDaySubject ?? "-";
-      formData.studyDayDegreeLevel = data.studyDayDegreeLevel ?? "-";
-      formData.studyDayUniversityName = data.studyDayUniversityName ?? "-";
-      formData.studyDayTrainingSubject =
-        data.studyDayTrainingSubject ?? "-" ?? "-";
-      formData.studyDayTrainingName = data.studyDayTrainingName ?? "-";
-      formData.studyDayCountry = data.studyDayCountry ?? "-";
-      formData.studyDayScholarship = data.studyDayScholarship ?? "-";
-      formData.coupleDayName = data.coupleDayName ?? "-";
-      formData.coupleDayPosition = data.coupleDayPosition ?? "-";
-      formData.coupleDayLevel = data.coupleDayLevel ?? "-";
-      formData.coupleDayLevelCountry = data.coupleDayLevelCountry ?? "-";
-      formData.coupleDayCountryHistory = data.coupleDayCountryHistory ?? "-";
-      formData.coupleDayTotalHistory = data.coupleDayTotalHistory ?? "-";
-      formData.coupleDayStartDateHistory = data.coupleDayStartDateHistory;
-      formData.coupleDayEndDateHistory = data.coupleDayEndDateHistory;
-      formData.coupleDaySumTotalHistory = data.coupleDaySumTotalHistory ?? "-";
-      formData.approveStep = data.approveStep ?? "-";
-      formData.dear = data.dear ?? "-";
-      formData.leaveLast = data.leaveLast ?? "-";
-      // checkLeaveType(formData.leaveTypeId, formData.leaveTypeName)
+			titleName.value = data.fullName ?? "-"
+			formData.id = data.id ?? "-"
+			formData.leaveTypeName = data.leaveTypeName ?? "-"
+			formData.leaveTypeId = data.leaveTypeId ?? "-"
+			formData.fullname = data.fullName ?? "-"
+			formData.dateSendLeave = data.dateSendLeave && date2Thai(data.dateSendLeave)
+			formData.status = data.status ?? "-"
+			formData.leaveStartDate = data.leaveStartDate
+			// console.log(formData.leaveDateStart)
+			formData.leaveEndDate = data.leaveEndDate
+			// console.log(formData.leaveDateEnd)
+			formData.leaveCount = data.leaveTotal ?? "-"
+			formData.leaveWrote = data.leaveWrote ?? "-"
+			formData.leaveAddress = data.leaveAddress ?? "-"
+			formData.leaveNumber = data.leaveNumber ?? "-"
+			formData.leaveDetail = data.leaveDetail ?? "-"
+			formData.leaveDocument = data.leaveDocument
+			formData.leaveDraftDocument = data.leaveDraftDocument
+			formData.leaveLastStart = data.leaveLastStart && date2Thai(data.leaveLastStart)
+			formData.leaveLastEnd = data.leaveLastStart && date2Thai(data.leaveLastEnd)
+			formData.leaveTotal = data.leaveTotal
+			formData.leavebirthDate = data.leaveBirthDate && date2Thai(data.leaveBirthDate)
+			formData.leavegovernmentDate = data.leaveGovernmentDate && date2Thai(data.leaveGovernmentDate)
+			formData.leaveSalary = data.leaveSalary ?? "-"
+			formData.leaveSalaryText = data.leaveSalaryText ?? "-"
+			formData.wifeDayName = data.wifeDayName ?? "-"
+			formData.wifeDayDateBorn = data.wifeDayDateBorn && date2Thai(data.wifeDayDateBorn)
+			formData.restDayOldTotal = data.restDayOldTotal ?? "-"
+			formData.restDayCurrentTotal = data.restDayCurrentTotal ?? "-"
+			formData.ordainDayStatus = data.ordainDayStatus
+			formData.ordainDayLocationName = data.ordainDayLocationName ?? "-"
+			formData.ordainDayLocationAddress = data.ordainDayLocationAddress ?? "-"
+			formData.ordainDayLocationNumber = data.ordainDayLocationNumber ?? "-"
+			formData.ordainDayOrdination = data.ordainDayOrdination && date2Thai(data.ordainDayOrdination)
+			formData.ordainDayBuddhistLentName = data.ordainDayBuddhistLentName ?? "-"
+			formData.ordainDayBuddhistLentAddress = data.ordainDayBuddhistLentAddress ?? "-"
+			formData.hajjDayStatus = data.hajjDayStatus
+			formData.absentDaySummon = data.absentDaySummon ?? "-"
+			formData.absentDayLocation = data.absentDayLocation ?? "-"
+			formData.absentDayRegistorDate = data.absentDayRegistorDate && date2Thai(data.absentDayRegistorDate)
+			formData.absentDayGetIn = data.absentDayGetIn ?? "-"
+			formData.absentDayAt = data.absentDayAt ?? "-"
+			formData.studyDaySubject = data.studyDaySubject ?? "-"
+			formData.studyDayDegreeLevel = data.studyDayDegreeLevel ?? "-"
+			formData.studyDayUniversityName = data.studyDayUniversityName ?? "-"
+			formData.studyDayTrainingSubject = data.studyDayTrainingSubject ?? "-" ?? "-"
+			formData.studyDayTrainingName = data.studyDayTrainingName ?? "-"
+			formData.studyDayCountry = data.studyDayCountry ?? "-"
+			formData.studyDayScholarship = data.studyDayScholarship ?? "-"
+			formData.coupleDayName = data.coupleDayName ?? "-"
+			formData.coupleDayPosition = data.coupleDayPosition ?? "-"
+			formData.coupleDayLevel = data.coupleDayLevel ?? "-"
+			formData.coupleDayLevelCountry = data.coupleDayLevelCountry ?? "-"
+			formData.coupleDayCountryHistory = data.coupleDayCountryHistory ?? "-"
+			formData.coupleDayTotalHistory = data.coupleDayTotalHistory ?? "-"
+			formData.coupleDayStartDateHistory = data.coupleDayStartDateHistory
+			formData.coupleDayEndDateHistory = data.coupleDayEndDateHistory
+			formData.coupleDaySumTotalHistory = data.coupleDaySumTotalHistory ?? "-"
+			formData.approveStep = data.approveStep ?? "-"
+			formData.dear = data.dear ?? "-"
+			formData.leaveLast = data.leaveLast ?? "-"
+			// checkLeaveType(formData.leaveTypeId, formData.leaveTypeName)
 
-      dataStore.fetchProfileOld(data);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+			dataStore.fetchProfileOld(data)
+		})
+		.catch(err => {
+			messageError($q, err)
+		})
+		.finally(() => {
+			hideLoader()
+		})
 }
 
 const model = computed(() => {
-  return (
-    dataStore.options.find((x) => x.id == formData.leaveTypeId)?.code ?? ""
-  );
-});
+	return dataStore.options.find(x => x.id == formData.leaveTypeId)?.code ?? ""
+})
 
 const modelSpecific = computed(() => {
-  const code = dataStore.options.find(
-    (x) => x.id == formData.leaveTypeId
-  )?.code;
+	const code = dataStore.options.find(x => x.id == formData.leaveTypeId)?.code
 
-  if (code == "LV-006" && formData.ordainDayLocationName != "") {
-    return "b1";
-  } else if (code == "LV-006" && formData.ordainDayLocationName == "") {
-    return "b2";
-  } else if (code == "LV-008" && formData.studyDayTrainingSubject == "") {
-    return "s1";
-  } else if (code == "LV-008" && formData.studyDayTrainingSubject != "") {
-    return "s2";
-  } else {
-    return "";
-  }
-});
+	if (code == "LV-006" && formData.ordainDayLocationName != "") {
+		return "b1"
+	} else if (code == "LV-006" && formData.ordainDayLocationName == "") {
+		return "b2"
+	} else if (code == "LV-008" && formData.studyDayTrainingSubject == "") {
+		return "s1"
+	} else if (code == "LV-008" && formData.studyDayTrainingSubject != "") {
+		return "s2"
+	} else {
+		return ""
+	}
+})
 
-function onSubmit(postData: FormData) {
-  dialogConfirm($q, async () => {
-    showLoader();
-    await http
-      .post(config.API.leaveUser(), postData)
-      // .put(config.API.leaveUser() + "/" + formData.id, postData)
-      .then(() => {
-        success($q, "บันทึกสำเร็จ");
-      })
-      .catch((e: any) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  });
+function onSubmit(formData: FormData) {
+	dialogConfirm($q, async () => {
+		showLoader()
+		await http
+			.put(config.API.leaveUserId(personalId.value), formData)
+			// .put(config.API.leaveUser() + "/" + formData.id, postData)
+			.then(() => {
+				success($q, "บันทึกสำเร็จ")
+			})
+			.catch((e: any) => {
+				messageError($q, e)
+			})
+			.finally(() => {
+				hideLoader()
+			})
+	})
 }
 
-function onConfirm(id: string) {
-  dialogConfirm(
-    $q,
-    async () => {
-      //     showLoader();
-      //     await http
-      //       .post(config.API.leaveUser() + "/" + id)
-      //       .then(() => {
-      router.push("/leave");
-      success($q, "ยื่นใบลาสำเร็จ");
-      //       })
-      //       .catch((e: any) => {
-      //         messageError($q, e);
-      //       })
-      //       .finally(() => {
-      //         hideLoader();
-      //       });
-    },
-    "ยืนยันการยื่นใบลา",
-    "หากยืนยันแล้วจะไม่สามารถกลับมาแก้ไขได้ ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่"
-  );
+function onConfirm() {
+	console.log(personalId.value)
+	dialogConfirm(
+		$q,
+		async () => {
+			showLoader()
+			await http
+				.get(config.API.leaveUserSendId(personalId.value))
+				.then(() => {
+					// router.push("/leave")
+					success($q, "ยื่นใบลาสำเร็จ")
+				})
+				.catch((e: any) => {
+					messageError($q, e)
+				})
+				.finally(() => {
+					hideLoader()
+				})
+		},
+		"ยืนยันการยื่นใบลา",
+		"หากยืนยันแล้วจะไม่สามารถกลับมาแก้ไขได้ ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่"
+	)
 }
 
 /**เมื่อเริ่มโหลดหน้า
  * เรียกใช้งาน fetchData เพื่อดึงข้อมูล
  */
 onMounted(() => {
-  fetchDataDetail(personalId.value);
-});
+	fetchDataDetail(personalId.value)
+})
 </script>
 
 <template>
-  <div class="col-12 row justify-center">
-    <div class="col-xs-12 col-sm-12 col-md-11">
-      <div class="toptitle text-white col-12 row items-center">
-        <q-btn
-          to="/leave"
-          icon="mdi-arrow-left"
-          unelevated
-          round
-          dense
-          flat
-          color="primary"
-          class="q-mr-sm"
-        />
-        <div>
-          แก้ไขใบลา
-          <!-- {{ formData.leaveTypeName }} {{ leaveId }} -->
-        </div>
-      </div>
-      <q-form ref="myform" class="col-12">
-        <q-card bordered>
-          <div class="col-12 row q-col-gutter-md q-pa-md">
-            <div class="col-xs-12 col-sm-12">
-              <div style="display: flex; align-items: center">
-                <q-icon
-                  name="mdi-numeric-1-circle"
-                  size="20px"
-                  color="primary"
-                />
-                <div class="q-pl-sm text-weight-bold text-dark">
-                  เลือกประเภทการลา
-                </div>
-              </div>
-              <div class="q-py-sm q-px-lg">
-                <div class="row">
-                  <q-select
-                    readonly
-                    dense
-                    class="col-12 col-sm-6 col-md-4"
-                    outlined
-                    v-model="formData.leaveTypeName"
-                    option-value="code"
-                    option-label="name"
-                    emit-value
-                    map-options
-                    prefix="ประเภทใบลา :"
-                  />
-                </div>
-                <div class="row q-mt-sm">
-                  <div
-                    class="col-12 col-sm-6 col-md-3"
-                    v-if="model === 'LV-006' || model === 'LV-008'"
-                  >
-                    <q-select
-                      readonly
-                      dense
-                      outlined
-                      v-model="modelSpecific"
-                      :options="
-                        model === 'LV-006'
-                          ? dataStore.optionsOrdination
-                          : dataStore.optionsSpecific
-                      "
-                      option-value="code"
-                      option-label="name"
-                      emit-value
-                      map-options
-                      prefix="ประเภทการลา :"
-                      @update:model-value="
-                        dataStore.typeConvert(model, modelSpecific)
-                      "
-                    />
-                  </div>
-                </div>
-              </div>
+	<div class="col-12 row justify-center">
+		<div class="col-xs-12 col-sm-12 col-md-11">
+			<div class="toptitle text-white col-12 row items-center">
+				<q-btn to="/leave" icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" />
+				<div>
+					แก้ไขใบลา
+					{{ formData.leaveTypeName }} {{ personalId }}
+				</div>
+			</div>
+			<q-form ref="myform" class="col-12">
+				<q-card bordered>
+					<div class="col-12 row q-col-gutter-md q-pa-md">
+						<div class="col-xs-12 col-sm-12">
+							<div style="display: flex; align-items: center">
+								<q-icon name="mdi-numeric-1-circle" size="20px" color="primary" />
+								<div class="q-pl-sm text-weight-bold text-dark">เลือกประเภทการลา</div>
+							</div>
+							<div class="q-py-sm q-px-lg">
+								<div class="row">
+									<q-select
+										readonly
+										dense
+										class="col-12 col-sm-6 col-md-4"
+										outlined
+										v-model="formData.leaveTypeName"
+										option-value="code"
+										option-label="name"
+										emit-value
+										map-options
+										prefix="ประเภทใบลา :"
+									/>
+								</div>
+								<div class="row q-mt-sm">
+									<div class="col-12 col-sm-6 col-md-3" v-if="model === 'LV-006' || model === 'LV-008'">
+										<q-select
+											readonly
+											dense
+											outlined
+											v-model="modelSpecific"
+											:options="model === 'LV-006' ? dataStore.optionsOrdination : dataStore.optionsSpecific"
+											option-value="code"
+											option-label="name"
+											emit-value
+											map-options
+											prefix="ประเภทการลา :"
+											@update:model-value="dataStore.typeConvert(model, modelSpecific)"
+										/>
+									</div>
+								</div>
+							</div>
 
-              <div>
-                <div style="display: flex; align-items: center">
-                  <q-icon
-                    name="mdi-numeric-2-circle"
-                    size="20px"
-                    color="primary"
-                  />
-                  <div class="q-pl-sm text-weight-bold text-dark">
-                    ข้อมูลการลา
-                  </div>
-                </div>
-                <FormPart2
-                  :model="model"
-                  :data="formData"
-                  :leaveTypeId="formData.leaveTypeId"
-                />
-              </div>
-            </div>
-            <div class="col-12">
-              <SickForm
-                v-if="model === 'LV-001' || model === 'LV-002'"
-                :data="formData"
-                :on-submit="onSubmit"
-                :on-confirm="onConfirm"
-              />
-              <FormBirth
-                v-if="model === 'LV-003'"
-                :data="formData"
-                :on-submit="onSubmit"
-                :on-confirm="onConfirm"
-              />
-              <HelpWifeBirthForm
-                v-if="model === 'LV-004'"
-                :data="formData"
-                :on-submit="onSubmit"
-                :on-confirm="onConfirm"
-              />
-              <VacationForm
-                v-if="model === 'LV-005'"
-                :data="formData"
-                :on-submit="onSubmit"
-                :on-confirm="onConfirm"
-              />
-              <OrdinationForm
-                v-if="model === 'LV-006' && modelSpecific === 'b1'"
-                :data="formData"
-                :on-submit="onSubmit"
-                :on-confirm="onConfirm"
-              />
-              <HajjForm
-                v-if="model === 'LV-006' && modelSpecific === 'b2'"
-                :data="formData"
-                :on-submit="onSubmit"
-                :on-confirm="onConfirm"
-              />
-              <MilitaryForm
-                v-if="model === 'LV-007'"
-                style="width: 100%"
-                :data="formData"
-                :on-submit="onSubmit"
-                :on-confirm="onConfirm"
-              />
-              <StudyForm
-                v-if="model === 'LV-008' && modelSpecific === 's1'"
-                style="width: 100%"
-                :data="formData"
-                :on-submit="onSubmit"
-                :on-confirm="onConfirm"
-              />
-              <TrainForm
-                v-if="
-                  model === 'LV-008' &&
-                  modelSpecific != 's1' &&
-                  modelSpecific != ''
-                "
-                :data="formData"
-                :on-submit="onSubmit"
-                :on-confirm="onConfirm"
-              />
-              <WorkInternationalForm
-                v-if="model === 'LV-009'"
-                :data="formData"
-                :on-submit="onSubmit"
-                :on-confirm="onConfirm"
-              />
-              <FollowSpouseForm
-                v-if="model === 'LV-010'"
-                :data="formData"
-                :on-submit="onSubmit"
-                :on-confirm="onConfirm"
-              />
-              <RehabilitationForm
-                v-if="model === 'LV-011'"
-                :data="formData"
-                :on-submit="onSubmit"
-                :on-confirm="onConfirm"
-              />
-            </div>
-          </div>
-        </q-card>
-      </q-form>
-    </div>
-  </div>
+							<div>
+								<div style="display: flex; align-items: center">
+									<q-icon name="mdi-numeric-2-circle" size="20px" color="primary" />
+									<div class="q-pl-sm text-weight-bold text-dark">ข้อมูลการลา</div>
+								</div>
+								<FormPart2 :model="model" :data="formData" :leaveTypeId="formData.leaveTypeId" />
+							</div>
+						</div>
+						<div class="col-12">
+							<SickForm v-if="model === 'LV-001' || model === 'LV-002'" :data="formData" :on-submit="onSubmit" :on-confirm="onConfirm" />
+							<FormBirth v-if="model === 'LV-003'" :data="formData" :on-submit="onSubmit" :on-confirm="onConfirm" />
+							<HelpWifeBirthForm v-if="model === 'LV-004'" :data="formData" :on-submit="onSubmit" :on-confirm="onConfirm" />
+							<VacationForm v-if="model === 'LV-005'" :data="formData" :on-submit="onSubmit" :on-confirm="onConfirm" />
+							<OrdinationForm v-if="model === 'LV-006' && modelSpecific === 'b1'" :data="formData" :on-submit="onSubmit" :on-confirm="onConfirm" />
+							<HajjForm v-if="model === 'LV-006' && modelSpecific === 'b2'" :data="formData" :on-submit="onSubmit" :on-confirm="onConfirm" />
+							<MilitaryForm v-if="model === 'LV-007'" style="width: 100%" :data="formData" :on-submit="onSubmit" :on-confirm="onConfirm" />
+							<StudyForm v-if="model === 'LV-008' && modelSpecific === 's1'" style="width: 100%" :data="formData" :on-submit="onSubmit" :on-confirm="onConfirm" />
+							<TrainForm v-if="model === 'LV-008' && modelSpecific != 's1' && modelSpecific != ''" :data="formData" :on-submit="onSubmit" :on-confirm="onConfirm" />
+							<WorkInternationalForm v-if="model === 'LV-009'" :data="formData" :on-submit="onSubmit" :on-confirm="onConfirm" />
+							<FollowSpouseForm v-if="model === 'LV-010'" :data="formData" :on-submit="onSubmit" :on-confirm="onConfirm" />
+							<RehabilitationForm v-if="model === 'LV-011'" :data="formData" :on-submit="onSubmit" :on-confirm="onConfirm" />
+						</div>
+					</div>
+				</q-card>
+			</q-form>
+		</div>
+	</div>
 </template>