From cf806db19f40aa57ca8c2f3d242f78b0d326b4a2 Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Wed, 10 Jan 2024 14:35:46 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=20multiple=20upload=20=E0=B9=83=E0=B8=99=E0=B9=84=E0=B8=9F?=
 =?UTF-8?q?=E0=B8=A5=E0=B9=8C=E0=B8=9F=E0=B8=AD=E0=B8=A3=E0=B9=8C=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=A5=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

เพิ่ม multiple upload
---
 .../components/FormLeave/01_SickForm.vue      |  843 ++++++------
 .../components/FormLeave/03_Birth.vue         |  752 +++++------
 .../FormLeave/04_HelpWifeBirthForm.vue        |  881 ++++++------
 .../components/FormLeave/05_VacationForm.vue  |  862 ++++++------
 .../FormLeave/06_OrdinationForm.vue           | 1112 +++++++--------
 .../components/FormLeave/07_HajjForm.vue      |  711 +++++-----
 .../components/FormLeave/08_MilitaryForm.vue  |  831 ++++++------
 .../components/FormLeave/09_StudyForm.vue     | 1062 +++++++--------
 .../components/FormLeave/10_TrainForm.vue     | 1042 +++++++-------
 .../FormLeave/11_WorkInternationalForm.vue    |  748 +++++------
 .../FormLeave/12_FollowSpouseForm.vue         | 1191 ++++++++---------
 .../FormLeave/13_RehabilitationForm.vue       |  697 +++++-----
 .../components/formDetail/formCheckSelect.vue |  148 +-
 .../components/formDetail/formChildbirth.vue  |  138 +-
 .../components/formDetail/formHajj.vue        |  122 +-
 .../components/formDetail/formHoliday.vue     |  146 +-
 .../components/formDetail/formLeave.vue       |  140 +-
 .../formDetail/formLeaveToTraining.vue        |  180 ++-
 .../formLeaveToWorkInternational.vue          |   17 +-
 .../components/formDetail/formSpouse.vue      |   15 +-
 .../components/formDetail/formStudy.vue       |   15 +-
 .../components/formDetail/formUpasom.vue      |  172 +--
 .../formVocationalRehabilitation.vue          |   17 +-
 src/modules/05_leave/views/EditPage.vue       |   10 +-
 24 files changed, 5549 insertions(+), 6303 deletions(-)

diff --git a/src/modules/05_leave/components/FormLeave/01_SickForm.vue b/src/modules/05_leave/components/FormLeave/01_SickForm.vue
index 8460013..a5eebb2 100644
--- a/src/modules/05_leave/components/FormLeave/01_SickForm.vue
+++ b/src/modules/05_leave/components/FormLeave/01_SickForm.vue
@@ -1,511 +1,452 @@
 <script setup lang="ts">
-import { ref, reactive, watch, computed, onMounted } from "vue";
-import type {
-  FormData,
-  FormRef,
-} from "@/modules/05_leave/interface/request/SickForm";
-import { useCounterMixin } from "@/stores/mixin";
-import { useLeaveStore } from "@/modules/05_leave/store";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useQuasar } from "quasar";
-import { useRouter } from "vue-router";
+import { ref, reactive, watch, computed, onMounted } from "vue"
+import type { FormData, FormRef } from "@/modules/05_leave/interface/request/SickForm"
+import { useCounterMixin } from "@/stores/mixin"
+import { useLeaveStore } from "@/modules/05_leave/store"
+import http from "@/plugins/http"
+import config from "@/app.config"
+import { useQuasar } from "quasar"
+import { useRouter } from "vue-router"
 
 /** Use */
-const dataStore = useLeaveStore();
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const router = useRouter();
-const {
-  date2Thai,
-  dateToISO,
-  dialogConfirm,
-  success,
-  messageError,
-  fails,
-  showLoader,
-  hideLoader,
-} = mixin;
-const edit = ref<boolean>(true);
+const dataStore = useLeaveStore()
+const $q = useQuasar()
+const mixin = useCounterMixin()
+const router = useRouter()
+const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails, showLoader, hideLoader } = mixin
+const edit = ref<boolean>(true)
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
-  data: {
-    type: Object,
-    default: null,
-  },
-  onSubmit: {
-    type: Function,
-    default: () => "",
-  },
-  onConfirm: {
-    type: Function,
-    default: () => "",
-  },
-});
+	data: {
+		type: Object,
+		default: null,
+	},
+	onSubmit: {
+		type: Function,
+		default: () => "",
+	},
+	onConfirm: {
+		type: Function,
+		default: () => "",
+	},
+})
 
 /** ข้อมูล v-model ของฟอร์ม */
 const formDataSick = reactive<any>({
-  type: dataStore.typeId,
-  leaveWrote: "",
-  leaveStartDate: null,
-  leaveEndDate: null,
-  leaveRange: "ALL",
-  leaveTotal: "",
-  leaveLast: null,
-  leaveNumber: "",
-  leaveAddress: "",
-  leaveDetail: "",
-  leaveDocument: [],
-});
+	type: dataStore.typeId,
+	leaveWrote: "",
+	leaveStartDate: null,
+	leaveEndDate: null,
+	leaveRange: "ALL",
+	leaveTotal: "",
+	leaveLast: null,
+	leaveNumber: "",
+	leaveAddress: "",
+	leaveDetail: "",
+	leaveDocument: [],
+})
+const leaveDocumentList = ref<any>()
 
 /** ตัวแปร ref สำหรับแสดง validate */
-const leaveWroteRef = ref<object | null>(null);
-const leaveStartDateRef = ref<object | null>(null);
-const leaveEndDateRef = ref<object | null>(null);
-const leaveRangeRef = ref<object | null>(null);
-const leaveTotalRef = ref<object | null>(null);
-const leaveLastRef = ref<object | null>(null);
-const leaveNumberRef = ref<object | null>(null);
-const leaveAddressRef = ref<object | null>(null);
-const leaveDetailRef = ref<object | null>(null);
+const leaveWroteRef = ref<object | null>(null)
+const leaveStartDateRef = ref<object | null>(null)
+const leaveEndDateRef = ref<object | null>(null)
+const leaveRangeRef = ref<object | null>(null)
+const leaveTotalRef = ref<object | null>(null)
+const leaveLastRef = ref<object | null>(null)
+const leaveNumberRef = ref<object | null>(null)
+const leaveAddressRef = ref<object | null>(null)
+const leaveDetailRef = ref<object | null>(null)
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const FormRef: FormRef = {
-  leaveWrote: leaveWroteRef,
-  leaveStartDate: leaveStartDateRef,
-  leaveEndDate: leaveEndDateRef,
-  leaveRange: leaveRangeRef,
-  leaveTotal: leaveTotalRef,
-  leaveNumber: leaveNumberRef,
-  leaveAddress: leaveAddressRef,
-  leaveDetail: leaveDetailRef,
-};
+	leaveWrote: leaveWroteRef,
+	leaveStartDate: leaveStartDateRef,
+	leaveEndDate: leaveEndDateRef,
+	leaveRange: leaveRangeRef,
+	leaveTotal: leaveTotalRef,
+	leaveNumber: leaveNumberRef,
+	leaveAddress: leaveAddressRef,
+	leaveDetail: leaveDetailRef,
+}
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("");
-const fileDocDataUpload = ref<File[]>([]);
+const nameFile = ref<string>("")
+const fileDocDataUpload = ref<File[]>([])
 async function fileUploadDoc(files: any) {
-  files.forEach((file: any) => {
-    fileDocDataUpload.value.push(file);
-  });
+	files.forEach((file: any) => {
+		fileDocDataUpload.value.push(file)
+	})
 }
 
 /**
  * function รีเซทค่า leaveStartDate เเละ leaveEndDate
  */
 function resetDate() {
-  if (
-    formDataSick.leaveRange === "MORNING" ||
-    formDataSick.leaveRange === "AFTERNOON"
-  ) {
-    formDataSick.leaveStartDate = null;
-    formDataSick.leaveEndDate = null;
-  }
-  console.log("testnull");
+	if (formDataSick.leaveRange === "MORNING" || formDataSick.leaveRange === "AFTERNOON") {
+		formDataSick.leaveStartDate = null
+		formDataSick.leaveEndDate = null
+	}
+	console.log("testnull")
 }
 
 /** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
 function onValidate() {
-  const hasError = [];
-  for (const key in FormRef) {
-    if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
-      const property = FormRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    const formData = new FormData();
-    //   if (formDataSick.leaveDocument.length > 0) {
-    //     const blob = formDataSick.leaveDocument.slice(
-    //       0,
-    //       formDataSick.leaveDocument[0].size
-    //     );
-    //     const newFile = new File(blob, nameFile.value, {
-    //       type: formDataSick.leaveDocument[0].type,
-    //     });
-    //     formData.append("leaveDocument", newFile);
-    //   }
+	const hasError = []
+	for (const key in FormRef) {
+		if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
+			const property = FormRef[key]
+			if (property.value && typeof property.value.validate === "function") {
+				const isValid = property.value.validate()
+				hasError.push(isValid)
+			}
+		}
+	}
+	if (hasError.every(result => result === true)) {
+		const formData = new FormData()
 
-    formData.append("leaveDocument", formDataSick.leaveDocument);
-    formData.append("type", formDataSick.type);
-    formData.append("leaveRange", formDataSick.leaveRange);
-    formData.append("leaveStartDate", dateToISO(formDataSick.leaveStartDate));
-    formData.append("leaveEndDate", dateToISO(formDataSick.leaveEndDate));
-    formData.append("leaveWrote", formDataSick.leaveWrote);
-    formData.append("leaveAddress", formDataSick.leaveAddress);
-    formData.append("leaveNumber", formDataSick.leaveNumber);
-    formData.append("leaveDetail", formDataSick.leaveDetail);
-    props.onSubmit(formData);
-  }
+		formDataSick.leaveDocument.forEach((file: File) => {
+			formData.append("leaveDocument", file)
+		})
+		// formData.append("leaveDocument", formDataSick.leaveDocument)
+		formData.append("type", formDataSick.type)
+		formData.append("leaveRange", formDataSick.leaveRange)
+		formData.append("leaveStartDate", dateToISO(formDataSick.leaveStartDate))
+		formData.append("leaveEndDate", dateToISO(formDataSick.leaveEndDate))
+		formData.append("leaveWrote", formDataSick.leaveWrote)
+		formData.append("leaveAddress", formDataSick.leaveAddress)
+		formData.append("leaveNumber", formDataSick.leaveNumber)
+		formData.append("leaveDetail", formDataSick.leaveDetail)
+		props.onSubmit(formData)
+	}
 }
 
 /**
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
-const isLeave = ref<boolean>(true);
+const isLeave = ref<boolean>(true)
 async function fetchCheck() {
-  await http
-    .post(config.API.leaveCheck(), {
-      type: dataStore.typeId ?? null,
-      StartLeaveDate: formDataSick.leaveStartDate ?? null,
-      EndLeaveDate: formDataSick.leaveEndDate ?? null,
-    })
-    .then((res: any) => {
-      const data = res.data.result;
-      isLeave.value = data.isLeave;
-      if (data.isLeave === true) {
-        formDataSick.leaveTotal =
-          data.totalDate - data.sumDateWork - data.sumDateHoliday;
-      } else {
-        fails($q, "ไม่สามารถลาได้");
-      }
-    })
-    .catch((e: any) => {
-      messageError($q, e);
-    });
+	await http
+		.post(config.API.leaveCheck(), {
+			type: dataStore.typeId ?? null,
+			StartLeaveDate: formDataSick.leaveStartDate ?? null,
+			EndLeaveDate: formDataSick.leaveEndDate ?? null,
+		})
+		.then((res: any) => {
+			const data = res.data.result
+			isLeave.value = data.isLeave
+			if (data.isLeave === true) {
+				formDataSick.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
+			} else {
+				fails($q, "ไม่สามารถลาได้")
+			}
+		})
+		.catch((e: any) => {
+			messageError($q, e)
+		})
 }
 
 /**
  * ฟังก์ชั่นแปลงครึ่งวัน/ทั้งวัน
  */
 const isReadOnly = computed(() => {
-  const conditionleaveRange =
-    formDataSick.leaveRange === "MORNING" ||
-    formDataSick.leaveRange === "AFTERNOON";
-  if (conditionleaveRange) {
-    formDataSick.leaveEndDate = formDataSick.leaveStartDate; // Set formDataSick.leaveEndDate to null
-    formDataSick.leaveTotal = 0.5;
-  } else {
-    formDataSick.leaveTotal = null;
-  }
-  return conditionleaveRange;
-});
+	const conditionleaveRange = formDataSick.leaveRange === "MORNING" || formDataSick.leaveRange === "AFTERNOON"
+	if (conditionleaveRange) {
+		formDataSick.leaveEndDate = formDataSick.leaveStartDate // Set formDataSick.leaveEndDate to null
+		formDataSick.leaveTotal = 0.5
+	} else {
+		formDataSick.leaveTotal = null
+	}
+	return conditionleaveRange
+})
 
 function inputEdit(val: boolean) {
-  return {
-    "full-width cursor-pointer ": val,
-    "full-width cursor-pointer inputgreen": !val,
-  };
+	return {
+		"full-width cursor-pointer ": val,
+		"full-width cursor-pointer inputgreen": !val,
+	}
 }
 
 function resetEndDate(type: string) {
-  if (type === "day") {
-    formDataSick.EndLeaveDate === null;
-  }
+	if (type === "day") {
+		formDataSick.EndLeaveDate === null
+	}
 }
 
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 onMounted(() => {
-  if (props.data) {
-    formDataSick.leaveWrote = props.data.leaveWrote;
-    formDataSick.leaveStartDate = new Date(props.data.leaveStartDate);
-    formDataSick.leaveEndDate = new Date(props.data.leaveEndDate);
-    formDataSick.contractTel = props.data.contractTel;
-    formDataSick.leaveTotal = props.data.leaveTotal;
-    formDataSick.leaveNumber = props.data.leaveNumber;
-    formDataSick.leaveDetail = props.data.leaveDetail;
-    // formDataSick.leaveDocument = props.data.leaveDocument;
-    formDataSick.leaveAddress = props.data.leaveAddress;
-  }
-});
+	if (props.data) {
+		formDataSick.leaveWrote = props.data.leaveWrote
+		formDataSick.leaveStartDate = new Date(props.data.leaveStartDate)
+		formDataSick.leaveEndDate = new Date(props.data.leaveEndDate)
+		formDataSick.contractTel = props.data.contractTel
+		formDataSick.leaveTotal = props.data.leaveTotal
+		formDataSick.leaveNumber = props.data.leaveNumber
+		formDataSick.leaveDetail = props.data.leaveDetail
+		leaveDocumentList.value = props.data.leaveDocument
+		formDataSick.leaveAddress = props.data.leaveAddress
+	}
+})
 </script>
 
 <!-- ฟอร์มลาป่วย และลากิจส่วนตัว -->
 <template>
-  <div style="display: flex; align-items: center">
-    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-  </div>
-  <form @submit.prevent.stop="onValidate">
-    <q-card bordered class="q-pa-md bg-grey-1">
-      <div class="col-12 row q-pa-sm q-col-gutter-sm">
-        <q-input
-          class="col-12 col-sm-12 cursor-pointer inputgreen"
-          ref="leaveWroteRef"
-          for="leaveWroteRef"
-          dense
-          hide-bottom-space
-          bg-color="white"
-          outlined
-          v-model="formDataSick.leaveWrote"
-          label="เขียนที่"
-          :readonly="!edit"
-          :rules="[(val) => !!val || `${'เขียนที่'}`]"
-        />
+	<div style="display: flex; align-items: center">
+		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+	</div>
+	<form @submit.prevent.stop="onValidate">
+		<q-card bordered class="q-pa-md bg-grey-1">
+			<div class="col-12 row q-pa-sm q-col-gutter-sm">
+				<q-input
+					class="col-12 col-sm-12 cursor-pointer inputgreen"
+					ref="leaveWroteRef"
+					for="leaveWroteRef"
+					dense
+					hide-bottom-space
+					bg-color="white"
+					outlined
+					v-model="formDataSick.leaveWrote"
+					label="เขียนที่"
+					:readonly="!edit"
+					:rules="[val => !!val || `${'เขียนที่'}`]"
+				/>
 
-        <div class="col-12 col-md-4 col-sm-12">
-          <q-radio
-            v-model="formDataSick.leaveRange"
-            val="ALL"
-            label="ลาทั้งวัน"
-            checked-icon="task_alt"
-          />
-          <q-radio
-            v-model="formDataSick.leaveRange"
-            val="MORNING"
-            label="ลาครึ่งวันเช้า"
-            checked-icon="task_alt"
-            @update:model-value="resetDate"
-          />
-          <q-radio
-            v-model="formDataSick.leaveRange"
-            val="AFTERNOON"
-            label="ลาครึ่งวันบ่าย"
-            checked-icon="task_alt"
-            @update:model-value="resetDate"
-          />
-        </div>
-        <div class="full-width">
-          <div class="q-col-gutter-sm row">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6"
-              menu-class-name="modalfix"
-              v-model="formDataSick.leaveStartDate"
-              :locale="'th'"
-              autoApply
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :readonly="!edit"
-              @update:model-value="formDataSick.leaveEndDate = null"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveStartDateRef"
-                  for="leaveStartDateRef"
-                  hide-bottom-space
-                  :readonly="!edit"
-                  bg-color="white"
-                  class="full-width cursor-pointer inputgreen"
-                  :model-value="
-                    formDataSick.leaveStartDate != null
-                      ? date2Thai(formDataSick.leaveStartDate)
-                      : null
-                  "
-                  :label="`${'ลาตั้งแต่วันที่'}`"
-                  :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-                  style="color: var(--q-primary)"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
+				<div class="col-12 col-md-4 col-sm-12">
+					<q-radio v-model="formDataSick.leaveRange" val="ALL" label="ลาทั้งวัน" checked-icon="task_alt" />
+					<q-radio v-model="formDataSick.leaveRange" val="MORNING" label="ลาครึ่งวันเช้า" checked-icon="task_alt" @update:model-value="resetDate" />
+					<q-radio v-model="formDataSick.leaveRange" val="AFTERNOON" label="ลาครึ่งวันบ่าย" checked-icon="task_alt" @update:model-value="resetDate" />
+				</div>
+				<div class="full-width">
+					<div class="q-col-gutter-sm row">
+						<datepicker
+							class="col-12 col-md-3 col-sm-6"
+							menu-class-name="modalfix"
+							v-model="formDataSick.leaveStartDate"
+							:locale="'th'"
+							autoApply
+							borderless
+							:enableTimePicker="false"
+							week-start="0"
+							:readonly="!edit"
+							@update:model-value="formDataSick.leaveEndDate = null"
+						>
+							<template #year="{ year }">
+								{{ year + 543 }}
+							</template>
+							<template #year-overlay-value="{ value }">
+								{{ parseInt(value + 543) }}
+							</template>
+							<template #trigger>
+								<q-input
+									outlined
+									dense
+									ref="leaveStartDateRef"
+									for="leaveStartDateRef"
+									hide-bottom-space
+									:readonly="!edit"
+									bg-color="white"
+									class="full-width cursor-pointer inputgreen"
+									:model-value="formDataSick.leaveStartDate != null ? date2Thai(formDataSick.leaveStartDate) : null"
+									:label="`${'ลาตั้งแต่วันที่'}`"
+									:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+									style="color: var(--q-primary)"
+								>
+									<template v-slot:prepend>
+										<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
+									</template>
+								</q-input>
+							</template>
+						</datepicker>
 
-            <datepicker
-              class="col-12 col-md-3 col-sm-6"
-              menu-class-name="modalfix"
-              v-model="formDataSick.leaveEndDate"
-              :locale="'th'"
-              autoApply
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              :readonly="!formDataSick.leaveStartDate"
-              @update:model-value="fetchCheck(), isReadOnly"
-              :min-date="formDataSick.leaveStartDate"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="leaveEndDateRef"
-                  for="leaveEndDateRef"
-                  hide-bottom-space
-                  bg-color="white"
-                  :readonly="!formDataSick.leaveStartDate"
-                  :class="inputEdit(isReadOnly)"
-                  :model-value="
-                    formDataSick.leaveEndDate != null
-                      ? date2Thai(formDataSick.leaveEndDate)
-                      : null
-                  "
-                  :label="`${'ลาถึงวันที่'}`"
-                  :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-            <q-input
-              class="col-12 col-md-3 col-sm-6"
-              dense
-              bg-color="white"
-              outlined
-              ref="leaveTotalRef"
-              for="leaveTotalRef"
-              v-model="formDataSick.leaveTotal"
-              label="จำนวนวันที่ลา"
-              readonly
-              hide-bottom-space
-            />
-            <q-input
-              class="col-12 col-md-3 col-sm-6"
-              dense
-              outlined
-              ref="leaveLastRef"
-              for="leaveLastRef"
-              v-model="dataStore.leaveLast"
-              label="ลาครั้งสุดท้ายเมื่อวันที่"
-              readonly
-              hide-bottom-space
-              bg-color="white"
-            />
-          </div>
-        </div>
-        <div class="full-width">
-          <div class="q-col-gutter-sm row">
-            <q-input
-              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-              dense
-              outlined
-              ref="leaveNumberRef"
-              for="leaveNumberRef"
-              v-model="formDataSick.leaveNumber"
-              mask="(###)-###-####"
-              hide-bottom-space
-              bg-color="white"
-              unmasked-value
-              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-              :readonly="!edit"
-              :rules="[
-                (val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
-              ]"
-            />
+						<datepicker
+							class="col-12 col-md-3 col-sm-6"
+							menu-class-name="modalfix"
+							v-model="formDataSick.leaveEndDate"
+							:locale="'th'"
+							autoApply
+							borderless
+							:enableTimePicker="false"
+							week-start="0"
+							:readonly="!formDataSick.leaveStartDate"
+							@update:model-value="fetchCheck(), isReadOnly"
+							:min-date="formDataSick.leaveStartDate"
+						>
+							<template #year="{ year }">
+								{{ year + 543 }}
+							</template>
+							<template #year-overlay-value="{ value }">
+								{{ parseInt(value + 543) }}
+							</template>
+							<template #trigger>
+								<q-input
+									outlined
+									dense
+									ref="leaveEndDateRef"
+									for="leaveEndDateRef"
+									hide-bottom-space
+									bg-color="white"
+									:readonly="!formDataSick.leaveStartDate"
+									:class="inputEdit(isReadOnly)"
+									:model-value="formDataSick.leaveEndDate != null ? date2Thai(formDataSick.leaveEndDate) : null"
+									:label="`${'ลาถึงวันที่'}`"
+									:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+								>
+									<template v-slot:prepend>
+										<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
+									</template>
+								</q-input>
+							</template>
+						</datepicker>
+						<q-input
+							class="col-12 col-md-3 col-sm-6"
+							dense
+							bg-color="white"
+							outlined
+							ref="leaveTotalRef"
+							for="leaveTotalRef"
+							v-model="formDataSick.leaveTotal"
+							label="จำนวนวันที่ลา"
+							readonly
+							hide-bottom-space
+						/>
+						<q-input
+							class="col-12 col-md-3 col-sm-6"
+							dense
+							outlined
+							ref="leaveLastRef"
+							for="leaveLastRef"
+							v-model="dataStore.leaveLast"
+							label="ลาครั้งสุดท้ายเมื่อวันที่"
+							readonly
+							hide-bottom-space
+							bg-color="white"
+						/>
+					</div>
+				</div>
+				<div class="full-width">
+					<div class="q-col-gutter-sm row">
+						<q-input
+							class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+							dense
+							outlined
+							ref="leaveNumberRef"
+							for="leaveNumberRef"
+							v-model="formDataSick.leaveNumber"
+							mask="(###)-###-####"
+							hide-bottom-space
+							bg-color="white"
+							unmasked-value
+							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+							:readonly="!edit"
+							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
+						/>
 
-            <q-input
-              class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
-              dense
-              outlined
-              ref="leaveAddressRef"
-              for="leaveAddressRef"
-              v-model="formDataSick.leaveAddress"
-              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-              :readonly="!edit"
-              :rules="[
-                (val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
-              ]"
-              hide-bottom-space
-              bg-color="white"
-            />
-          </div>
-        </div>
-        <q-input
-          type="textarea"
-          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-          dense
-          outlined
-          ref="leaveDetailRef"
-          for="leaveDetailRef"
-          v-model="formDataSick.leaveDetail"
-          label="รายละเอียด"
-          :readonly="!edit"
-          bg-color="white"
-        />
-        <div class="full-width">
-          <div class="q-col-gutter-sm row">
-            <!-- multiple -->
-            <q-file
-              for="leaveDocumentRef"
-              v-model="formDataSick.leaveDocument"
-              dense
-              label="เอกสารประกอบ"
-              outlined
-              use-chips
-              bg-color="white"
-              
-              class="col-12 q-pl-sm col-12"
-            >
-              <template v-slot:prepend>
-                <q-icon name="attach_file" color="primary" />
-              </template>
-            </q-file>
-          </div>
-        </div>
-        <div class="col-12 col-sm-6 row" v-if="!edit">
-          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-            <div class="q-pl-sm text-weight-bold text-dark">
-              เอกสารเพิ่มเติม
-            </div>
-          </div>
-          <q-card bordered flat class="full-width">
-            <q-list separator>
-              <q-item
-                v-for="(file, index) in formDataSick.leaveDocument"
-                :key="index"
-                class="q-my-xs"
-              >
-                <q-item-section>
-                  <q-item-label class="full-width ellipsis">
-                    {{ file.name }}
-                  </q-item-label>
-                  <q-item-label caption> </q-item-label>
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-card>
-        </div>
-      </div>
-    </q-card>
+						<q-input
+							class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
+							dense
+							outlined
+							ref="leaveAddressRef"
+							for="leaveAddressRef"
+							v-model="formDataSick.leaveAddress"
+							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+							:readonly="!edit"
+							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
+							hide-bottom-space
+							bg-color="white"
+						/>
+					</div>
+				</div>
+				<q-input
+					type="textarea"
+					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+					dense
+					outlined
+					ref="leaveDetailRef"
+					for="leaveDetailRef"
+					v-model="formDataSick.leaveDetail"
+					label="รายละเอียด"
+					:readonly="!edit"
+					bg-color="white"
+				/>
+				<div class="full-width">
+					<div class="q-col-gutter-sm row">
+						<!-- multiple -->
+						<q-file for="leaveDocumentRef" v-model="formDataSick.leaveDocument" dense label="เอกสารประกอบ" outlined use-chips multiple bg-color="white" class="col-12 q-pl-sm col-12">
+							<template v-slot:prepend>
+								<q-icon name="attach_file" color="primary" />
+							</template>
+						</q-file>
+						<!-- <div class="col-12" v-if="formDataSick.leaveDocument.length == 0 && !data">
+							<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
+						</div> -->
+					</div>
+				</div>
+				<div class="col-12" v-if="data">
+					<div class="col-12 col-md-12 col-sm-12">
+						<q-card bordered>
+							<!-- <div class="col-12">
+								<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ{{ leaveDocumentList }} </q-card>
+							</div> -->
+							<q-list separator>
+								<q-item v-for="(document, index) in leaveDocumentList" :key="index" class="q-my-xs">
+									<q-item-section>
+										<q-item-label class="row items-baseline">
+											<div class="col">
+												{{ "เอกสารแนบฉบับที่" + (index + 1) }}
+											</div>
+											<q-btn class="col-6" :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
+												<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+											</q-btn>
+										</q-item-label>
+									</q-item-section>
+								</q-item>
+							</q-list>
+						</q-card>
+					</div>
+				</div>
 
-    <q-separator class="q-mt-sm" />
+				<div class="col-12 col-sm-6 row" v-if="!edit">
+					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
+					</div>
+					<q-card bordered flat class="full-width">
+						<q-list separator>
+							<q-item v-for="(file, index) in leaveDocumentList" :key="index" class="q-my-xs">
+								<q-item-section>
+									<q-item-label class="full-width ellipsis">
+										{{ file.name }}
+									</q-item-label>
+									<q-item-label caption> </q-item-label>
+								</q-item-section>
+							</q-item>
+						</q-list>
+					</q-card>
+				</div>
+			</div>
+		</q-card>
 
-    <div class="row col-12 q-pt-md">
-      <q-space />
-      <q-btn
-        v-if="!props.data || props.data.status == 'DRAFT'"
-        id="onSubmit"
-        type="submit"
-        unelevated
-        dense
-        class="q-px-md items-center btnBlue"
-        label="บันทึก"
-        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
-      >
-      <q-btn
-        v-if="data"
-        id="onSubmit"
-        type="button"
-        unelevated
-        dense
-        class="q-px-md items-center q-ml-sm"
-        color="primary"
-        label="ยื่นใบลา"
-        @click="onConfirm"
-        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
-      >
-    </div>
-  </form>
+		<q-separator class="q-mt-sm" />
+
+		<div class="row col-12 q-pt-md">
+			<q-space />
+			<q-btn v-if="!props.data || props.data.status == 'DRAFT'" id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"
+				><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+			>
+			<q-btn
+				v-if="!props.data || props.data.status == 'DRAFT'"
+				id="onSubmit"
+				type="button"
+				unelevated
+				dense
+				class="q-px-md items-center q-ml-sm"
+				color="primary"
+				label="ยื่นใบลา"
+				@click="onConfirm"
+				><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+			>
+		</div>
+	</form>
 </template>
diff --git a/src/modules/05_leave/components/FormLeave/03_Birth.vue b/src/modules/05_leave/components/FormLeave/03_Birth.vue
index 1d1f1c2..f188671 100644
--- a/src/modules/05_leave/components/FormLeave/03_Birth.vue
+++ b/src/modules/05_leave/components/FormLeave/03_Birth.vue
@@ -1,425 +1,415 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted } from "vue";
-import { useQuasar } from "quasar";
-import type { FormRef } from "@/modules/05_leave/interface/request/BirthForm";
-import { useCounterMixin } from "@/stores/mixin";
-import { useLeaveStore } from "@/modules/05_leave/store";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useRouter } from "vue-router";
+import { ref, reactive, onMounted } from "vue"
+import { useQuasar } from "quasar"
+import type { FormRef } from "@/modules/05_leave/interface/request/BirthForm"
+import { useCounterMixin } from "@/stores/mixin"
+import { useLeaveStore } from "@/modules/05_leave/store"
+import http from "@/plugins/http"
+import config from "@/app.config"
+import { useRouter } from "vue-router"
 
 /** Use */
-const dataStore = useLeaveStore();
-const mixin = useCounterMixin();
-const router = useRouter();
-const $q = useQuasar();
-const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } =
-  mixin;
-const edit = ref<boolean>(true);
+const dataStore = useLeaveStore()
+const mixin = useCounterMixin()
+const router = useRouter()
+const $q = useQuasar()
+const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } = mixin
+const edit = ref<boolean>(true)
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
-  data: {
-    type: Object,
-    default: null,
-  },
-  onSubmit: {
-    type: Function,
-    default: () => "",
-  },
-  onConfirm: {
-    type: Function,
-    default: () => "",
-  },
-});
+	data: {
+		type: Object,
+		default: null,
+	},
+	onSubmit: {
+		type: Function,
+		default: () => "",
+	},
+	onConfirm: {
+		type: Function,
+		default: () => "",
+	},
+})
 
 /** ข้อมูล v-model ของฟอร์ม */
 const formDataBirth = reactive<any>({
-  type: dataStore.typeId,
-  leaveWrote: "",
-  leaveStartDate: null,
-  leaveEndDate: null,
-  leaveTotal: "",
-  leaveLast: "",
-  leaveNumber: "",
-  leaveAddress: "",
-  leaveDetail: "",
-  leaveDocument: [],
-});
+	type: dataStore.typeId,
+	leaveWrote: "",
+	leaveStartDate: null,
+	leaveEndDate: null,
+	leaveTotal: "",
+	leaveLast: "",
+	leaveNumber: "",
+	leaveAddress: "",
+	leaveDetail: "",
+	leaveDocument: [],
+})
 
 /** ตัวแปร ref สำหรับแสดง validate */
-const leaveWroteRef = ref<object | null>(null);
-const leaveStartDateRef = ref<object | null>(null);
-const leaveEndDateRef = ref<object | null>(null);
-const leaveTotalRef = ref<object | null>(null);
-const leaveNumberRef = ref<object | null>(null);
-const leaveAddressRef = ref<object | null>(null);
-const leaveDetailRef = ref<object | null>(null);
-const leaveDocumentRef = ref<object | null>(null);
+const leaveWroteRef = ref<object | null>(null)
+const leaveStartDateRef = ref<object | null>(null)
+const leaveEndDateRef = ref<object | null>(null)
+const leaveTotalRef = ref<object | null>(null)
+const leaveNumberRef = ref<object | null>(null)
+const leaveAddressRef = ref<object | null>(null)
+const leaveDetailRef = ref<object | null>(null)
+const leaveDocumentRef = ref<object | null>(null)
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const FormRef: FormRef = {
-  leaveWrote: leaveWroteRef,
-  leaveStartDate: leaveStartDateRef,
-  leaveEndDate: leaveEndDateRef,
-  leaveTotal: leaveTotalRef,
-  leaveNumber: leaveNumberRef,
-  leaveAddress: leaveAddressRef,
-  leaveDetail: leaveDetailRef,
-  leaveDocument: leaveDocumentRef,
-};
+	leaveWrote: leaveWroteRef,
+	leaveStartDate: leaveStartDateRef,
+	leaveEndDate: leaveEndDateRef,
+	leaveTotal: leaveTotalRef,
+	leaveNumber: leaveNumberRef,
+	leaveAddress: leaveAddressRef,
+	leaveDetail: leaveDetailRef,
+	leaveDocument: leaveDocumentRef,
+}
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("");
-const fileDocDataUpload = ref<File[]>([]);
+const nameFile = ref<string>("")
+const fileDocDataUpload = ref<File[]>([])
 async function fileUploadDoc(files: any) {
-  files.forEach((file: any) => {
-    fileDocDataUpload.value.push(file);
-  });
+	files.forEach((file: any) => {
+		fileDocDataUpload.value.push(file)
+	})
 }
 
 /** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
 function onValidate() {
-  const hasError = [];
-  for (const key in FormRef) {
-    if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
-      const property = FormRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    const formData = new FormData();
-    // if (formDataBirth.leaveDocument.length > 0) {
-    // 	const blob = formDataBirth.leaveDocument.slice(0, formDataBirth.leaveDocument[0].size)
-    // 	const newFile = new File(blob, nameFile.value, {
-    // 		type: formDataBirth.leaveDocument[0].type,
-    // 	})
-    // 	formData.append("leaveDocument", newFile)
-    // }
-    formData.append("leaveDocument", formDataBirth.leaveDocument);
-    formData.append("type", formDataBirth.type);
-    formData.append("leaveStartDate", dateToISO(formDataBirth.leaveStartDate));
-    formData.append("leaveEndDate", dateToISO(formDataBirth.leaveEndDate));
-    formData.append("leaveWrote", formDataBirth.leaveWrote);
-    formData.append("leaveAddress", formDataBirth.leaveAddress);
-    formData.append("leaveNumber", formDataBirth.leaveNumber);
-    formData.append("leaveDetail", formDataBirth.leaveDetail);
+	const hasError = []
+	for (const key in FormRef) {
+		if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
+			const property = FormRef[key]
+			if (property.value && typeof property.value.validate === "function") {
+				const isValid = property.value.validate()
+				hasError.push(isValid)
+			}
+		}
+	}
+	if (hasError.every(result => result === true)) {
+		const formData = new FormData()
+		formDataBirth.leaveDocument.forEach((file: File) => {
+			formData.append("leaveDocument", file)
+		})
+		// formData.append("leaveDocument", formDataBirth.leaveDocument);
+		formData.append("type", formDataBirth.type)
+		formData.append("leaveStartDate", dateToISO(formDataBirth.leaveStartDate))
+		formData.append("leaveEndDate", dateToISO(formDataBirth.leaveEndDate))
+		formData.append("leaveWrote", formDataBirth.leaveWrote)
+		formData.append("leaveAddress", formDataBirth.leaveAddress)
+		formData.append("leaveNumber", formDataBirth.leaveNumber)
+		formData.append("leaveDetail", formDataBirth.leaveDetail)
 
-    props.onSubmit(formData);
-  }
+		props.onSubmit(formData)
+	}
 }
 
 /**
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
-const isLeave = ref<boolean>(true);
+const isLeave = ref<boolean>(true)
 async function fetchCheck() {
-  await http
-    .post(config.API.leaveCheck(), {
-      type: dataStore.typeId ?? null,
-      StartLeaveDate: formDataBirth.leaveStartDate ?? null,
-      EndLeaveDate: formDataBirth.leaveEndDate ?? null,
-    })
-    .then((res: any) => {
-      const data = res.data.result;
-      isLeave.value = data.isLeave;
-      if (data.isLeave === true) {
-        formDataBirth.leaveTotal = data.totalDate;
-        // formDataBirth.leaveLast = data.sumDateWork
-      } else {
-        fails($q, "ไม่สามารถลาได้");
-      }
-    })
-    .catch((e: any) => {
-      messageError($q, e);
-    });
+	await http
+		.post(config.API.leaveCheck(), {
+			type: dataStore.typeId ?? null,
+			StartLeaveDate: formDataBirth.leaveStartDate ?? null,
+			EndLeaveDate: formDataBirth.leaveEndDate ?? null,
+		})
+		.then((res: any) => {
+			const data = res.data.result
+			isLeave.value = data.isLeave
+			if (data.isLeave === true) {
+				formDataBirth.leaveTotal = data.totalDate
+				// formDataBirth.leaveLast = data.sumDateWork
+			} else {
+				fails($q, "ไม่สามารถลาได้")
+			}
+		})
+		.catch((e: any) => {
+			messageError($q, e)
+		})
 }
 
+const leaveDocumentList = ref<any>()
+
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 onMounted(() => {
-  if (props.data) {
-    formDataBirth.leaveWrote = props.data.leaveWrote;
-    formDataBirth.leaveStartDate = props.data.leaveStartDate;
-    formDataBirth.leaveEndDate = props.data.leaveEndDate;
-    formDataBirth.leaveTotal = props.data.leaveTotal;
-    formDataBirth.leaveNumber = props.data.leaveNumber;
-    formDataBirth.leaveAddress = props.data.leaveAddress;
-    formDataBirth.leaveDetail = props.data.leaveDetail;
-    // formDataBirth.leaveDocument = props.data.leaveDocument;
-  }
-});
+	if (props.data) {
+		formDataBirth.leaveWrote = props.data.leaveWrote
+		formDataBirth.leaveStartDate = props.data.leaveStartDate
+		formDataBirth.leaveEndDate = props.data.leaveEndDate
+		formDataBirth.leaveTotal = props.data.leaveTotal
+		formDataBirth.leaveNumber = props.data.leaveNumber
+		formDataBirth.leaveAddress = props.data.leaveAddress
+		formDataBirth.leaveDetail = props.data.leaveDetail
+		leaveDocumentList.value = props.data.leaveDocument
+	}
+})
 </script>
 
 <!-- ฟอร์มลาคลอดบุตร-->
 <template>
-  <div style="display: flex; align-items: center">
-    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-  </div>
-  <form @submit.prevent.stop="onValidate">
-    <q-card bordered class="q-pa-md bg-grey-1">
-      <div class="col-12 row q-pa-sm q-col-gutter-sm">
-        <q-input
-          class="col-12 col-sm-12 cursor-pointer inputgreen"
-          ref="leaveWroteRef"
-          for="leaveWroteRef"
-          dense
-          outlined
-          v-model="formDataBirth.leaveWrote"
-          label="เขียนที่"
-          hide-bottom-space
-          bg-color="white"
-          :readonly="!edit"
-          :rules="[(val) => !!val || `${'เขียนที่'}`]"
-        />
+	<div style="display: flex; align-items: center">
+		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+	</div>
+	<form @submit.prevent.stop="onValidate">
+		<q-card bordered class="q-pa-md bg-grey-1">
+			<div class="col-12 row q-pa-sm q-col-gutter-sm">
+				<q-input
+					class="col-12 col-sm-12 cursor-pointer inputgreen"
+					ref="leaveWroteRef"
+					for="leaveWroteRef"
+					dense
+					outlined
+					v-model="formDataBirth.leaveWrote"
+					label="เขียนที่"
+					hide-bottom-space
+					bg-color="white"
+					:readonly="!edit"
+					:rules="[val => !!val || `${'เขียนที่'}`]"
+				/>
 
-        <datepicker
-          class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          v-model="formDataBirth.leaveStartDate"
-          :locale="'th'"
-          autoApply
-          hide-bottom-space
-          borderless
-          :enableTimePicker="false"
-          week-start="0"
-          :readonly="!edit"
-          @update:model-value="formDataBirth.leaveEndDate = null"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              outlined
-              dense
-              ref="leaveStartDateRef"
-              for="leaveStartDateRef"
-              hide-bottom-space
-              bg-color="white"
-              :readonly="!edit"
-              class="full-width datepicker"
-              :model-value="
-                formDataBirth.leaveStartDate != null
-                  ? date2Thai(formDataBirth.leaveStartDate)
-                  : null
-              "
-              :label="`${'ลาตั้งแต่วันที่'}`"
-              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
+				<datepicker
+					class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
+					menu-class-name="modalfix"
+					v-model="formDataBirth.leaveStartDate"
+					:locale="'th'"
+					autoApply
+					hide-bottom-space
+					borderless
+					:enableTimePicker="false"
+					week-start="0"
+					:readonly="!edit"
+					@update:model-value="formDataBirth.leaveEndDate = null"
+				>
+					<template #year="{ year }">
+						{{ year + 543 }}
+					</template>
+					<template #year-overlay-value="{ value }">
+						{{ parseInt(value + 543) }}
+					</template>
+					<template #trigger>
+						<q-input
+							outlined
+							dense
+							ref="leaveStartDateRef"
+							for="leaveStartDateRef"
+							hide-bottom-space
+							bg-color="white"
+							:readonly="!edit"
+							class="full-width datepicker"
+							:model-value="formDataBirth.leaveStartDate != null ? date2Thai(formDataBirth.leaveStartDate) : null"
+							:label="`${'ลาตั้งแต่วันที่'}`"
+							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+						>
+							<template v-slot:prepend>
+								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
+							</template>
+						</q-input>
+					</template>
+				</datepicker>
 
-        <datepicker
-          class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          v-model="formDataBirth.leaveEndDate"
-          :locale="'th'"
-          autoApply
-          @update:model-value="fetchCheck()"
-          borderless
-          hide-bottom-space
-          :enableTimePicker="false"
-          week-start="0"
-          :readonly="!formDataBirth.leaveStartDate"
-          :min-date="formDataBirth.leaveStartDate"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              outlined
-              dense
-              ref="leaveEndDateRef"
-              for="leaveEndDateRef"
-              hide-bottom-space
-              bg-color="white"
-              :readonly="!formDataBirth.leaveStartDate"
-              class="full-width datepicker"
-              :model-value="
-                formDataBirth.leaveEndDate != null
-                  ? date2Thai(formDataBirth.leaveEndDate)
-                  : null
-              "
-              :label="`${'ลาถึงวันที่'}`"
-              :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
-        <q-input
-          class="col-12 col-md-3 col-sm-6"
-          dense
-          outlined
-          ref="leaveTotalRef"
-          for="leaveTotalRef"
-          v-model="formDataBirth.leaveTotal"
-          label="จำนวนวันที่ลา"
-          bg-color="white"
-          readonly
-          hide-bottom-space
-        />
-        <q-input
-          class="col-12 col-md-3 col-sm-6"
-          dense
-          outlined
-          ref="leaveLastRef"
-          for="leaveLastRef"
-          v-model="dataStore.leaveLast"
-          label="ลาครั้งสุดท้ายเมื่อวันที่"
-          readonly
-          hide-bottom-space
-          bg-color="white"
-        />
-        <div class="full-width">
-          <div class="q-col-gutter-sm row">
-            <q-input
-              class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
-              dense
-              outlined
-              hide-bottom-space
-              bg-color="white"
-              ref="leaveNumberRef"
-              for="leaveNumberRef"
-              v-model="formDataBirth.leaveNumber"
-              mask="(###)-###-####"
-              unmasked-value
-              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-              :readonly="!edit"
-              :rules="[
-                (val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
-              ]"
-            />
+				<datepicker
+					class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
+					menu-class-name="modalfix"
+					v-model="formDataBirth.leaveEndDate"
+					:locale="'th'"
+					autoApply
+					@update:model-value="fetchCheck()"
+					borderless
+					hide-bottom-space
+					:enableTimePicker="false"
+					week-start="0"
+					:readonly="!formDataBirth.leaveStartDate"
+					:min-date="formDataBirth.leaveStartDate"
+				>
+					<template #year="{ year }">
+						{{ year + 543 }}
+					</template>
+					<template #year-overlay-value="{ value }">
+						{{ parseInt(value + 543) }}
+					</template>
+					<template #trigger>
+						<q-input
+							outlined
+							dense
+							ref="leaveEndDateRef"
+							for="leaveEndDateRef"
+							hide-bottom-space
+							bg-color="white"
+							:readonly="!formDataBirth.leaveStartDate"
+							class="full-width datepicker"
+							:model-value="formDataBirth.leaveEndDate != null ? date2Thai(formDataBirth.leaveEndDate) : null"
+							:label="`${'ลาถึงวันที่'}`"
+							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+						>
+							<template v-slot:prepend>
+								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
+							</template>
+						</q-input>
+					</template>
+				</datepicker>
+				<q-input
+					class="col-12 col-md-3 col-sm-6"
+					dense
+					outlined
+					ref="leaveTotalRef"
+					for="leaveTotalRef"
+					v-model="formDataBirth.leaveTotal"
+					label="จำนวนวันที่ลา"
+					bg-color="white"
+					readonly
+					hide-bottom-space
+				/>
+				<q-input
+					class="col-12 col-md-3 col-sm-6"
+					dense
+					outlined
+					ref="leaveLastRef"
+					for="leaveLastRef"
+					v-model="dataStore.leaveLast"
+					label="ลาครั้งสุดท้ายเมื่อวันที่"
+					readonly
+					hide-bottom-space
+					bg-color="white"
+				/>
+				<div class="full-width">
+					<div class="q-col-gutter-sm row">
+						<q-input
+							class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
+							dense
+							outlined
+							hide-bottom-space
+							bg-color="white"
+							ref="leaveNumberRef"
+							for="leaveNumberRef"
+							v-model="formDataBirth.leaveNumber"
+							mask="(###)-###-####"
+							unmasked-value
+							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+							:readonly="!edit"
+							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
+						/>
 
-            <q-input
-              class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
-              dense
-              outlined
-              hide-bottom-space
-              bg-color="white"
-              ref="leaveAddressRef"
-              for="leaveAddressRef"
-              v-model="formDataBirth.leaveAddress"
-              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-              :readonly="!edit"
-              :rules="[
-                (val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
-              ]"
-            />
-          </div>
-        </div>
-        <q-input
-          type="textarea"
-          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-          dense
-          outlined
-          bg-color="white"
-          ref="leaveDetailRef"
-          for="leaveDetailRef"
-          v-model="formDataBirth.leaveDetail"
-          label="รายละเอียด"
-          :readonly="!edit"
-        />
+						<q-input
+							class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
+							dense
+							outlined
+							hide-bottom-space
+							bg-color="white"
+							ref="leaveAddressRef"
+							for="leaveAddressRef"
+							v-model="formDataBirth.leaveAddress"
+							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+							:readonly="!edit"
+							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
+						/>
+					</div>
+				</div>
+				<q-input
+					type="textarea"
+					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+					dense
+					outlined
+					bg-color="white"
+					ref="leaveDetailRef"
+					for="leaveDetailRef"
+					v-model="formDataBirth.leaveDetail"
+					label="รายละเอียด"
+					:readonly="!edit"
+				/>
 
-        <!-- multiple -->
-        <q-file
-          for="leaveDocumentRef"
-          hide-bottom-space
-          v-model="formDataBirth.leaveDocument"
-          @added="fileUploadDoc"
-          dense
-          bg-color="white"
-          label="เอกสารประกอบ"
-          outlined
-          use-chips
-          
-          class="q-pl-sm col-12"
-        >
-          <template v-slot:prepend>
-            <q-icon name="attach_file" color="primary" />
-          </template>
-        </q-file>
+				<!-- multiple -->
+				<q-file
+					for="leaveDocumentRef"
+					hide-bottom-space
+					v-model="formDataBirth.leaveDocument"
+					@added="fileUploadDoc"
+					dense
+					bg-color="white"
+					label="เอกสารประกอบ"
+					outlined
+					multiple
+					use-chips
+					class="q-pl-sm col-12"
+				>
+					<template v-slot:prepend>
+						<q-icon name="attach_file" color="primary" />
+					</template>
+				</q-file>
+				<!-- <div class="col-12" v-if="formDataBirth.leaveDocument.length == 0">
+					<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
+				</div> -->
+				<!-- <div class="col-12" v-if="formDataBirth.leaveDocument.length">
+					<q-card bordered>
+						<q-list separator>
+							<q-item v-for="(file, index) in formDataBirth.leaveDocument" :key="index" class="q-my-xs">
+								<q-item-section>
+									<q-item-label class="full-width ellipsis">
+										{{ file.name }}
+									</q-item-label>
+									<q-item-label caption> </q-item-label>
+								</q-item-section>
+							</q-item>
+						</q-list>
+					</q-card>
+				</div> -->
+				<div class="col-12 row" v-if="data">
+					<!-- <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="(document, index) in leaveDocumentList" :key="index" class="q-my-xs">
+								<q-item-section>
+									<q-item-label class="row items-baseline">
+										<div class="col">
+											{{ "เอกสารแนบฉบับที่" + (index + 1) }}
+										</div>
+										<q-btn class="col-6" :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
+											<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+										</q-btn>
+									</q-item-label>
+								</q-item-section>
+							</q-item>
+						</q-list>
+					</q-card>
+				</div>
+				<div class="col-12 col-sm-6 row" v-if="!edit">
+					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
+					</div>
+					<q-card bordered flat class="full-width">
+						<q-list separator>
+							<q-item v-for="(file, index) in leaveDocumentList" :key="index" class="q-my-xs">
+								<q-item-section>
+									<q-item-label class="full-width ellipsis">
+										{{ file.name }}
+									</q-item-label>
+									<q-item-label caption> </q-item-label>
+								</q-item-section>
+							</q-item>
+						</q-list>
+					</q-card>
+				</div>
+			</div>
+		</q-card>
 
-        <div class="col-12 row" v-if="!edit">
-          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-            <div class="q-pl-sm text-weight-bold text-dark">
-              เอกสารเพิ่มเติม
-            </div>
-          </div>
-          <q-card bordered flat class="full-width">
-            <q-list separator>
-              <q-item
-                v-for="(file, index) in formDataBirth.leaveDocument"
-                :key="index"
-                class="q-my-xs"
-              >
-                <q-item-section>
-                  <q-item-label class="full-width ellipsis">
-                    {{ file.name }}
-                  </q-item-label>
-                  <q-item-label caption> </q-item-label>
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-card>
-        </div>
-      </div>
-    </q-card>
+		<q-separator class="q-mt-sm" />
 
-    <q-separator class="q-mt-sm" />
-
-    <div class="row col-12 q-pt-md">
-      <q-space />
-      <q-btn
-        v-if="!props.data || props.data.status == 'DRAFT'"
-        id="onSubmit"
-        type="submit"
-        unelevated
-        dense
-        class="q-px-md items-center btnBlue"
-        label="บันทึก"
-        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
-      >
-      <q-btn
-        v-if="data"
-        id="onSubmit"
-        type="button"
-        unelevated
-        dense
-        class="q-px-md items-center q-ml-sm"
-        color="primary"
-        label="ยื่นใบลา"
-        @click="onConfirm"
-        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
-      >
-    </div>
-  </form>
+		<div class="row col-12 q-pt-md">
+			<q-space />
+			<q-btn v-if="!props.data || props.data.status == 'DRAFT'" id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"
+				><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+			>
+			<q-btn v-if="data" id="onSubmit" type="button" unelevated dense class="q-px-md items-center q-ml-sm" color="primary" label="ยื่นใบลา" @click="onConfirm"
+				><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+			>
+		</div>
+	</form>
 </template>
diff --git a/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue b/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
index a3e7806..dd897f3 100644
--- a/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
+++ b/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
@@ -1,510 +1,463 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted } from "vue";
-import type {
-  FormData,
-  FormRef,
-} from "@/modules/05_leave/interface/request/HelpWifeForm";
-import { useCounterMixin } from "@/stores/mixin";
-import { useLeaveStore } from "@/modules/05_leave/store";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useQuasar } from "quasar";
-import { useRouter } from "vue-router";
+import { ref, reactive, onMounted } from "vue"
+import type { FormData, FormRef } from "@/modules/05_leave/interface/request/HelpWifeForm"
+import { useCounterMixin } from "@/stores/mixin"
+import { useLeaveStore } from "@/modules/05_leave/store"
+import http from "@/plugins/http"
+import config from "@/app.config"
+import { useQuasar } from "quasar"
+import { useRouter } from "vue-router"
 
 /** Use */
-const dataStore = useLeaveStore();
-const mixin = useCounterMixin();
-const router = useRouter();
-const $q = useQuasar();
-const {
-  date2Thai,
-  calculateDurationYmd,
-  dateToISO,
-  dialogConfirm,
-  fails,
-  success,
-  messageError,
-} = mixin;
-const edit = ref<boolean>(true);
+const dataStore = useLeaveStore()
+const mixin = useCounterMixin()
+const router = useRouter()
+const $q = useQuasar()
+const { date2Thai, calculateDurationYmd, dateToISO, dialogConfirm, fails, success, messageError } = mixin
+const edit = ref<boolean>(true)
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
-  data: {
-    type: Object,
-    default: null,
-  },
-  onSubmit: {
-    type: Function,
-    default: () => "",
-  },
-  onConfirm: {
-    type: Function,
-    default: () => "",
-  },
-});
+	data: {
+		type: Object,
+		default: null,
+	},
+	onSubmit: {
+		type: Function,
+		default: () => "",
+	},
+	onConfirm: {
+		type: Function,
+		default: () => "",
+	},
+})
 
 /** ข้อมูล v-model ของฟอร์ม */
 const formDataHelpWife = reactive<any>({
-  type: dataStore.typeId,
-  leaveWrote: "",
-  wifeDayName: "",
-  wifeDayDateBorn: null,
-  leaveStartDate: null,
-  leaveEndDate: null,
-  leaveTotal: "",
-  leaveNumber: "",
-  leaveAddress: "",
-  leaveDetail: "",
-  leaveDocument: [],
-});
+	type: dataStore.typeId,
+	leaveWrote: "",
+	wifeDayName: "",
+	wifeDayDateBorn: null,
+	leaveStartDate: null,
+	leaveEndDate: null,
+	leaveTotal: "",
+	leaveNumber: "",
+	leaveAddress: "",
+	leaveDetail: "",
+	leaveDocument: [],
+})
 
 /** ตัวแปร ref สำหรับแสดง validate */
-const leaveWroteRef = ref<object | null>(null);
-const wifeDayNameRef = ref<object | null>(null);
-const wifeDayDateBornRef = ref<object | null>(null);
-const leaveStartDateRef = ref<object | null>(null);
-const leaveEndDateRef = ref<object | null>(null);
-const leaveTotalRef = ref<object | null>(null);
-const leaveNumberRef = ref<object | null>(null);
-const leaveAddressRef = ref<object | null>(null);
-const leaveDetailRef = ref<object | null>(null);
-const leaveDocumentRef = ref<object | null>(null);
+const leaveWroteRef = ref<object | null>(null)
+const wifeDayNameRef = ref<object | null>(null)
+const wifeDayDateBornRef = ref<object | null>(null)
+const leaveStartDateRef = ref<object | null>(null)
+const leaveEndDateRef = ref<object | null>(null)
+const leaveTotalRef = ref<object | null>(null)
+const leaveNumberRef = ref<object | null>(null)
+const leaveAddressRef = ref<object | null>(null)
+const leaveDetailRef = ref<object | null>(null)
+const leaveDocumentRef = ref<object | null>(null)
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const FormRef: FormRef = {
-  leaveWrote: leaveWroteRef,
-  wifeDayName: wifeDayNameRef,
-  wifeDayDateBorn: wifeDayDateBornRef,
-  leaveStartDate: leaveStartDateRef,
-  leaveEndDate: leaveEndDateRef,
-  leaveTotal: leaveTotalRef,
-  leaveNumber: leaveNumberRef,
-  leaveAddress: leaveAddressRef,
-  leaveDetail: leaveDetailRef,
-  leaveDocument: leaveDocumentRef,
-};
+	leaveWrote: leaveWroteRef,
+	wifeDayName: wifeDayNameRef,
+	wifeDayDateBorn: wifeDayDateBornRef,
+	leaveStartDate: leaveStartDateRef,
+	leaveEndDate: leaveEndDateRef,
+	leaveTotal: leaveTotalRef,
+	leaveNumber: leaveNumberRef,
+	leaveAddress: leaveAddressRef,
+	leaveDetail: leaveDetailRef,
+	leaveDocument: leaveDocumentRef,
+}
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("");
-const fileDocDataUpload = ref<File[]>([]);
+const nameFile = ref<string>("")
+const fileDocDataUpload = ref<File[]>([])
 const fileUploadDoc = async (files: any) => {
-  files.forEach((file: any) => {
-    fileDocDataUpload.value.push(file);
-  });
-};
+	files.forEach((file: any) => {
+		fileDocDataUpload.value.push(file)
+	})
+}
 
 /** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
 function onValidate() {
-  const hasError = [];
-  for (const key in FormRef) {
-    if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
-      const property = FormRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    const formData = new FormData();
-    // if (formDataHelpWife.leaveDocument.length > 0) {
-    // 	const blob = formDataHelpWife.leaveDocument.slice(0, formDataHelpWife.leaveDocument[0].size)
-    // 	const newFile = new File(blob, nameFile.value, {
-    // 		type: formDataHelpWife.leaveDocument[0].type,
-    // 	})
-    // 	formData.append("leaveDocument", newFile)
-    // }
-    formData.append("leaveDocument", formDataHelpWife.leaveDocument);
-    formData.append("type", formDataHelpWife.type);
-    formData.append(
-      "leaveStartDate",
-      dateToISO(formDataHelpWife.leaveStartDate)
-    );
-    formData.append("leaveEndDate", dateToISO(formDataHelpWife.leaveEndDate));
-    formData.append("leaveWrote", formDataHelpWife.leaveWrote);
-    formData.append("leaveAddress", formDataHelpWife.leaveAddress);
-    formData.append("leaveNumber", formDataHelpWife.leaveNumber);
-    formData.append("leaveDetail", formDataHelpWife.leaveDetail);
-    formData.append("wifeDayName", formDataHelpWife.wifeDayName);
-    formData.append(
-      "wifeDayDateBorn",
-      dateToISO(formDataHelpWife.wifeDayDateBorn)
-    );
-    props.onSubmit(formData);
-  }
+	const hasError = []
+	for (const key in FormRef) {
+		if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
+			const property = FormRef[key]
+			if (property.value && typeof property.value.validate === "function") {
+				const isValid = property.value.validate()
+				hasError.push(isValid)
+			}
+		}
+	}
+	if (hasError.every(result => result === true)) {
+		const formData = new FormData()
+		formDataHelpWife.leaveDocument.forEach((file: File) => {
+			formData.append("leaveDocument", file)
+		})
+		formData.append("leaveDocument", formDataHelpWife.leaveDocument)
+		formData.append("type", formDataHelpWife.type)
+		formData.append("leaveStartDate", dateToISO(formDataHelpWife.leaveStartDate))
+		formData.append("leaveEndDate", dateToISO(formDataHelpWife.leaveEndDate))
+		formData.append("leaveWrote", formDataHelpWife.leaveWrote)
+		formData.append("leaveAddress", formDataHelpWife.leaveAddress)
+		formData.append("leaveNumber", formDataHelpWife.leaveNumber)
+		formData.append("leaveDetail", formDataHelpWife.leaveDetail)
+		formData.append("wifeDayName", formDataHelpWife.wifeDayName)
+		formData.append("wifeDayDateBorn", dateToISO(formDataHelpWife.wifeDayDateBorn))
+		props.onSubmit(formData)
+	}
 }
 
 /**
  * function อัพเดทค่า LeaveTotal
  */
 function updateLeaveTotal() {
-  const newLeaveTotal = calculateDurationYmd(
-    formDataHelpWife.leaveStartDate,
-    formDataHelpWife.leaveEndDate
-  );
-  formDataHelpWife.leaveTotal = newLeaveTotal;
+	const newLeaveTotal = calculateDurationYmd(formDataHelpWife.leaveStartDate, formDataHelpWife.leaveEndDate)
+	formDataHelpWife.leaveTotal = newLeaveTotal
 }
 
 /**
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
-const isLeave = ref<boolean>(true);
+const isLeave = ref<boolean>(true)
 async function fetchCheck() {
-  await http
-    .post(config.API.leaveCheck(), {
-      type: dataStore.typeId ?? null,
-      StartLeaveDate: formDataHelpWife.leaveStartDate ?? null,
-      EndLeaveDate: formDataHelpWife.leaveEndDate ?? null,
-    })
-    .then((res: any) => {
-      const data = res.data.result;
-      isLeave.value = data.isLeave;
-      if (data.isLeave === true) {
-        formDataHelpWife.leaveTotal =
-          data.totalDate - data.sumDateWork - data.sumDateHoliday;
-        // formDataHelpWife.leaveLast = data.totalDate
-      } else {
-        fails($q, "ไม่สามารถลาได้");
-      }
-    })
-    .catch((e: any) => {
-      messageError($q, e);
-    });
+	await http
+		.post(config.API.leaveCheck(), {
+			type: dataStore.typeId ?? null,
+			StartLeaveDate: formDataHelpWife.leaveStartDate ?? null,
+			EndLeaveDate: formDataHelpWife.leaveEndDate ?? null,
+		})
+		.then((res: any) => {
+			const data = res.data.result
+			isLeave.value = data.isLeave
+			if (data.isLeave === true) {
+				formDataHelpWife.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
+				// formDataHelpWife.leaveLast = data.totalDate
+			} else {
+				fails($q, "ไม่สามารถลาได้")
+			}
+		})
+		.catch((e: any) => {
+			messageError($q, e)
+		})
 }
 
+const leaveDocumentList = ref<any>()
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 onMounted(() => {
-  if (props.data) {
-    // console.log("data==>", props.data)
-    formDataHelpWife.leaveWrote = props.data.leaveWrote;
-    formDataHelpWife.wifeDayName = props.data.wifeDayName;
-    formDataHelpWife.wifeDayDateBorn = props.data.wifeDayDateBorn;
-    formDataHelpWife.leaveStartDate = props.data.leaveStartDate;
-    formDataHelpWife.leaveEndDate = props.data.leaveEndDate;
-    formDataHelpWife.leaveTotal = props.data.leaveTotal;
-    formDataHelpWife.leaveNumber = props.data.leaveNumber;
-    formDataHelpWife.leaveAddress = props.data.leaveAddress;
-    formDataHelpWife.leaveDetail = props.data.leaveDetail;
-    // formDataHelpWife.leaveDocument = props.data.leaveDocument;
-  }
-});
+	if (props.data) {
+		// console.log("data==>", props.data)
+		formDataHelpWife.leaveWrote = props.data.leaveWrote
+		formDataHelpWife.wifeDayName = props.data.wifeDayName
+		formDataHelpWife.wifeDayDateBorn = props.data.wifeDayDateBorn
+		formDataHelpWife.leaveStartDate = props.data.leaveStartDate
+		formDataHelpWife.leaveEndDate = props.data.leaveEndDate
+		formDataHelpWife.leaveTotal = props.data.leaveTotal
+		formDataHelpWife.leaveNumber = props.data.leaveNumber
+		formDataHelpWife.leaveAddress = props.data.leaveAddress
+		formDataHelpWife.leaveDetail = props.data.leaveDetail
+		leaveDocumentList.value = props.data.leaveDocument
+
+		// formDataHelpWife.leaveDocument = props.data.leaveDocument;
+	}
+})
 </script>
 
 <template>
-  <div style="display: flex; align-items: center">
-    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-  </div>
-  <form @submit.prevent.stop="onValidate">
-    <q-card bordered class="q-pa-md bg-grey-1">
-      <div class="col-12 row q-pa-sm q-col-gutter-sm">
-        <q-input
-          class="col-12 col-12 col-sm-12 cursor-pointer inputgreen"
-          ref="leaveWroteRef"
-          for="leaveWroteRef"
-          dense
-          outlined
-          hide-bottom-space
-          bg-color="white"
-          v-model="formDataHelpWife.leaveWrote"
-          label="เขียนที่"
-          :readonly="!edit"
-          :rules="[(val) => !!val || `${'เขียนที่'}`]"
-        />
-        <datepicker
-          class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          v-model="formDataHelpWife.leaveStartDate"
-          :locale="'th'"
-          autoApply
-          hide-bottom-space
-          borderless
-          :enableTimePicker="false"
-          week-start="0"
-          :readonly="!edit"
-          @update:model-value="formDataHelpWife.leaveEndDate = null"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              outlined
-              dense
-              ref="leaveStartDateRef"
-              for="leaveStartDateRef"
-              hide-bottom-space
-              bg-color="white"
-              :readonly="!edit"
-              class="full-width datepicker"
-              :model-value="
-                formDataHelpWife.leaveStartDate != null
-                  ? date2Thai(formDataHelpWife.leaveStartDate)
-                  : null
-              "
-              :label="`${'ลาตั้งแต่วันที่'}`"
-              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
+	<div style="display: flex; align-items: center">
+		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+	</div>
+	<form @submit.prevent.stop="onValidate">
+		<q-card bordered class="q-pa-md bg-grey-1">
+			<div class="col-12 row q-pa-sm q-col-gutter-sm">
+				<q-input
+					class="col-12 col-12 col-sm-12 cursor-pointer inputgreen"
+					ref="leaveWroteRef"
+					for="leaveWroteRef"
+					dense
+					outlined
+					hide-bottom-space
+					bg-color="white"
+					v-model="formDataHelpWife.leaveWrote"
+					label="เขียนที่"
+					:readonly="!edit"
+					:rules="[val => !!val || `${'เขียนที่'}`]"
+				/>
+				<datepicker
+					class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
+					menu-class-name="modalfix"
+					v-model="formDataHelpWife.leaveStartDate"
+					:locale="'th'"
+					autoApply
+					hide-bottom-space
+					borderless
+					:enableTimePicker="false"
+					week-start="0"
+					:readonly="!edit"
+					@update:model-value="formDataHelpWife.leaveEndDate = null"
+				>
+					<template #year="{ year }">
+						{{ year + 543 }}
+					</template>
+					<template #year-overlay-value="{ value }">
+						{{ parseInt(value + 543) }}
+					</template>
+					<template #trigger>
+						<q-input
+							outlined
+							dense
+							ref="leaveStartDateRef"
+							for="leaveStartDateRef"
+							hide-bottom-space
+							bg-color="white"
+							:readonly="!edit"
+							class="full-width datepicker"
+							:model-value="formDataHelpWife.leaveStartDate != null ? date2Thai(formDataHelpWife.leaveStartDate) : null"
+							:label="`${'ลาตั้งแต่วันที่'}`"
+							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+						>
+							<template v-slot:prepend>
+								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
+							</template>
+						</q-input>
+					</template>
+				</datepicker>
 
-        <datepicker
-          class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          v-model="formDataHelpWife.leaveEndDate"
-          :locale="'th'"
-          autoApply
-          borderless
-          hide-bottom-space
-          :enableTimePicker="false"
-          @update:model-value="updateLeaveTotal, fetchCheck()"
-          week-start="0"
-          :readonly="!formDataHelpWife.leaveStartDate"
-          :min-date="formDataHelpWife.leaveStartDate"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              outlined
-              dense
-              ref="leaveEndDateRef"
-              for="leaveEndDateRef"
-              hide-bottom-space
-              bg-color="white"
-              :readonly="!formDataHelpWife.leaveStartDate"
-              class="full-width datepicker"
-              :model-value="
-                formDataHelpWife.leaveEndDate != null
-                  ? date2Thai(formDataHelpWife.leaveEndDate)
-                  : null
-              "
-              :label="`${'ลาถึงวันที่'}`"
-              :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
-        <q-input
-          class="col-12 col-md-2 col-sm-6"
-          dense
-          outlined
-          ref="leaveTotalRef"
-          for="leaveTotalRef"
-          v-model="formDataHelpWife.leaveTotal"
-          label="จำนวนวันที่ลา"
-          readonly
-          hide-bottom-space
-          bg-color="white"
-        />
-        <div class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen">
-          <q-input
-            class="col-12 col-sm-12"
-            ref="wifeDayNameRef"
-            for="wifeDayNameRef"
-            dense
-            bg-color="white"
-            outlined
-            hide-bottom-space
-            v-model="formDataHelpWife.wifeDayName"
-            label="ชื่อภรรยา"
-            :readonly="!edit"
-            :rules="[(val) => !!val || `${'ชื่อภรรยา'}`]"
-          />
-        </div>
+				<datepicker
+					class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
+					menu-class-name="modalfix"
+					v-model="formDataHelpWife.leaveEndDate"
+					:locale="'th'"
+					autoApply
+					borderless
+					hide-bottom-space
+					:enableTimePicker="false"
+					@update:model-value="updateLeaveTotal, fetchCheck()"
+					week-start="0"
+					:readonly="!formDataHelpWife.leaveStartDate"
+					:min-date="formDataHelpWife.leaveStartDate"
+				>
+					<template #year="{ year }">
+						{{ year + 543 }}
+					</template>
+					<template #year-overlay-value="{ value }">
+						{{ parseInt(value + 543) }}
+					</template>
+					<template #trigger>
+						<q-input
+							outlined
+							dense
+							ref="leaveEndDateRef"
+							for="leaveEndDateRef"
+							hide-bottom-space
+							bg-color="white"
+							:readonly="!formDataHelpWife.leaveStartDate"
+							class="full-width datepicker"
+							:model-value="formDataHelpWife.leaveEndDate != null ? date2Thai(formDataHelpWife.leaveEndDate) : null"
+							:label="`${'ลาถึงวันที่'}`"
+							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+						>
+							<template v-slot:prepend>
+								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
+							</template>
+						</q-input>
+					</template>
+				</datepicker>
+				<q-input
+					class="col-12 col-md-2 col-sm-6"
+					dense
+					outlined
+					ref="leaveTotalRef"
+					for="leaveTotalRef"
+					v-model="formDataHelpWife.leaveTotal"
+					label="จำนวนวันที่ลา"
+					readonly
+					hide-bottom-space
+					bg-color="white"
+				/>
+				<div class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen">
+					<q-input
+						class="col-12 col-sm-12"
+						ref="wifeDayNameRef"
+						for="wifeDayNameRef"
+						dense
+						bg-color="white"
+						outlined
+						hide-bottom-space
+						v-model="formDataHelpWife.wifeDayName"
+						label="ชื่อภรรยา"
+						:readonly="!edit"
+						:rules="[val => !!val || `${'ชื่อภรรยา'}`]"
+					/>
+				</div>
 
-        <datepicker
-          class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          v-model="formDataHelpWife.wifeDayDateBorn"
-          :locale="'th'"
-          autoApply
-          borderless
-          hide-bottom-space
-          :enableTimePicker="false"
-          week-start="0"
-          :readonly="!edit"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              outlined
-              dense
-              ref="wifeDayDateBornRef"
-              for="wifeDayDateBornRef"
-              hide-bottom-space
-              bg-color="white"
-              :readonly="!edit"
-              class="full-width datepicker"
-              :model-value="
-                formDataHelpWife.wifeDayDateBorn != null
-                  ? date2Thai(formDataHelpWife.wifeDayDateBorn)
-                  : null
-              "
-              :label="`${'วันที่คลอด'}`"
-              :rules="[(val) => !!val || `${'กรุณาเลือกวันที่คลอด'}`]"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
-        <div class="full-width">
-          <div class="q-col-gutter-sm row">
-            <q-input
-              class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
-              dense
-              outlined
-              ref="leaveNumberRef"
-              for="leaveNumberRef"
-              v-model="formDataHelpWife.leaveNumber"
-              mask="(###)-###-####"
-              unmasked-value
-              hide-bottom-space
-              bg-color="white"
-              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-              :readonly="!edit"
-              :rules="[
-                (val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
-              ]"
-            />
+				<datepicker
+					class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
+					menu-class-name="modalfix"
+					v-model="formDataHelpWife.wifeDayDateBorn"
+					:locale="'th'"
+					autoApply
+					borderless
+					hide-bottom-space
+					:enableTimePicker="false"
+					week-start="0"
+					:readonly="!edit"
+				>
+					<template #year="{ year }">
+						{{ year + 543 }}
+					</template>
+					<template #year-overlay-value="{ value }">
+						{{ parseInt(value + 543) }}
+					</template>
+					<template #trigger>
+						<q-input
+							outlined
+							dense
+							ref="wifeDayDateBornRef"
+							for="wifeDayDateBornRef"
+							hide-bottom-space
+							bg-color="white"
+							:readonly="!edit"
+							class="full-width datepicker"
+							:model-value="formDataHelpWife.wifeDayDateBorn != null ? date2Thai(formDataHelpWife.wifeDayDateBorn) : null"
+							:label="`${'วันที่คลอด'}`"
+							:rules="[val => !!val || `${'กรุณาเลือกวันที่คลอด'}`]"
+						>
+							<template v-slot:prepend>
+								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
+							</template>
+						</q-input>
+					</template>
+				</datepicker>
+				<div class="full-width">
+					<div class="q-col-gutter-sm row">
+						<q-input
+							class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
+							dense
+							outlined
+							ref="leaveNumberRef"
+							for="leaveNumberRef"
+							v-model="formDataHelpWife.leaveNumber"
+							mask="(###)-###-####"
+							unmasked-value
+							hide-bottom-space
+							bg-color="white"
+							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+							:readonly="!edit"
+							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
+						/>
 
-            <q-input
-              class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
-              dense
-              outlined
-              hide-bottom-space
-              bg-color="white"
-              ref="leaveAddressRef"
-              for="leaveAddressRef"
-              v-model="formDataHelpWife.leaveAddress"
-              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-              :readonly="!edit"
-              :rules="[
-                (val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
-              ]"
-            />
-          </div>
-        </div>
-        <q-input
-          hide-bottom-space
-          bg-color="white"
-          type="textarea"
-          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-          dense
-          outlined
-          ref="leaveDetailRef"
-          for="leaveDetailRef"
-          v-model="formDataHelpWife.leaveDetail"
-          label="รายละเอียด"
-          :readonly="!edit"
-        />
+						<q-input
+							class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
+							dense
+							outlined
+							hide-bottom-space
+							bg-color="white"
+							ref="leaveAddressRef"
+							for="leaveAddressRef"
+							v-model="formDataHelpWife.leaveAddress"
+							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+							:readonly="!edit"
+							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
+						/>
+					</div>
+				</div>
+				<q-input
+					hide-bottom-space
+					bg-color="white"
+					type="textarea"
+					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+					dense
+					outlined
+					ref="leaveDetailRef"
+					for="leaveDetailRef"
+					v-model="formDataHelpWife.leaveDetail"
+					label="รายละเอียด"
+					:readonly="!edit"
+				/>
 
-        <!-- multiple -->
-        <q-file
-          bg-color="white"
-          ref="leaveDocumentRef"
-          v-model="formDataHelpWife.leaveDocument"
-          @added="fileUploadDoc"
-          dense
-          label="เอกสารประกอบ"
-          outlined
-          use-chips
-          
-          class="q-pl-sm col-12"
-        >
-          <template v-slot:prepend>
-            <q-icon name="attach_file" color="primary" />
-          </template>
-        </q-file>
+				<!-- multiple -->
+				<q-file bg-color="white" ref="leaveDocumentRef" v-model="formDataHelpWife.leaveDocument" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips class="q-pl-sm col-12">
+					<template v-slot:prepend>
+						<q-icon name="attach_file" color="primary" />
+					</template>
+				</q-file>
+				<div class="col-12" v-if="data">
+					<div class="col-12 col-md-12 col-sm-12">
+						<q-card bordered>
+							<!-- <div class="col-12">
+								<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ{{ leaveDocumentList }} </q-card>
+							</div> -->
+							<q-list separator>
+								<q-item v-for="(document, index) in leaveDocumentList" :key="index" class="q-my-xs">
+									<q-item-section>
+										<q-item-label class="row items-baseline">
+											<div class="col">
+												{{ "เอกสารแนบฉบับที่" + (index + 1) }}
+											</div>
+											<q-btn class="col-6" :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
+												<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+											</q-btn>
+										</q-item-label>
+									</q-item-section>
+								</q-item>
+							</q-list>
+						</q-card>
+					</div>
+				</div>
+				<div class="col-12 col-sm-6 row" v-if="!edit">
+					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
+					</div>
+					<q-card bordered flat class="full-width">
+						<q-list separator>
+							<q-item v-for="(file, index) in leaveDocumentList" :key="index" class="q-my-xs">
+								<q-item-section>
+									<q-item-label class="full-width ellipsis">
+										{{ file.name }}
+									</q-item-label>
+									<q-item-label caption> </q-item-label>
+								</q-item-section>
+							</q-item>
+						</q-list>
+					</q-card>
+				</div>
+				<div class="col-12 row" v-if="!edit">
+					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
+					</div>
+					<q-card bordered flat class="full-width">
+						<q-list separator>
+							<q-item v-for="(file, index) in formDataHelpWife.leaveDocument" :key="index" class="q-my-xs">
+								<q-item-section>
+									<q-item-label class="full-width ellipsis">
+										{{ file.name }}
+									</q-item-label>
+									<q-item-label caption> </q-item-label>
+								</q-item-section>
+							</q-item>
+						</q-list>
+					</q-card>
+				</div>
+			</div>
+		</q-card>
 
-        <div class="col-12 row" v-if="!edit">
-          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-            <div class="q-pl-sm text-weight-bold text-dark">
-              เอกสารเพิ่มเติม
-            </div>
-          </div>
-          <q-card bordered flat class="full-width">
-            <q-list separator>
-              <q-item
-                v-for="(file, index) in formDataHelpWife.leaveDocument"
-                :key="index"
-                class="q-my-xs"
-              >
-                <q-item-section>
-                  <q-item-label class="full-width ellipsis">
-                    {{ file.name }}
-                  </q-item-label>
-                  <q-item-label caption> </q-item-label>
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-card>
-        </div>
-      </div>
-    </q-card>
-
-    <q-separator class="q-mt-sm" />
-    <div class="row col-12 q-pt-md">
-      <q-space />
-      <q-btn
-        v-if="!props.data || props.data.status == 'DRAFT'"
-        id="onSubmit"
-        type="submit"
-        unelevated
-        dense
-        class="q-px-md items-center btnBlue"
-        label="บันทึก"
-        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
-      >
-      <q-btn
-        v-if="data"
-        id="onSubmit"
-        type="button"
-        unelevated
-        dense
-        class="q-px-md items-center q-ml-sm"
-        color="primary"
-        label="ยื่นใบลา"
-        @click="onConfirm"
-        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
-      >
-    </div>
-  </form>
+		<q-separator class="q-mt-sm" />
+		<div class="row col-12 q-pt-md">
+			<q-space />
+			<q-btn v-if="!props.data || props.data.status == 'DRAFT'" id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"
+				><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+			>
+			<q-btn v-if="data" id="onSubmit" type="button" unelevated dense class="q-px-md items-center q-ml-sm" color="primary" label="ยื่นใบลา" @click="onConfirm"
+				><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+			>
+		</div>
+	</form>
 </template>
diff --git a/src/modules/05_leave/components/FormLeave/05_VacationForm.vue b/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
index 2e2cba6..9a91894 100644
--- a/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
@@ -1,504 +1,456 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, computed } from "vue";
-import type {
-  FormData,
-  FormRef,
-} from "@/modules/05_leave/interface/request/VacationForm";
-import { useCounterMixin } from "@/stores/mixin";
-import { useLeaveStore } from "@/modules/05_leave/store";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useQuasar } from "quasar";
-import { useRouter } from "vue-router";
+import { ref, reactive, onMounted, computed } from "vue"
+import type { FormData, FormRef } from "@/modules/05_leave/interface/request/VacationForm"
+import { useCounterMixin } from "@/stores/mixin"
+import { useLeaveStore } from "@/modules/05_leave/store"
+import http from "@/plugins/http"
+import config from "@/app.config"
+import { useQuasar } from "quasar"
+import { useRouter } from "vue-router"
 
 /** Use */
-const $q = useQuasar();
-const dataStore = useLeaveStore();
-const mixin = useCounterMixin();
-const router = useRouter();
-const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } =
-  mixin;
-const edit = ref<boolean>(true);
+const $q = useQuasar()
+const dataStore = useLeaveStore()
+const mixin = useCounterMixin()
+const router = useRouter()
+const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } = mixin
+const edit = ref<boolean>(true)
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
-  data: {
-    type: Object,
-    default: null,
-  },
-  onSubmit: {
-    type: Function,
-    default: () => "",
-  },
-  onConfirm: {
-    type: Function,
-    default: () => "",
-  },
-});
+	data: {
+		type: Object,
+		default: null,
+	},
+	onSubmit: {
+		type: Function,
+		default: () => "",
+	},
+	onConfirm: {
+		type: Function,
+		default: () => "",
+	},
+})
 
 /** ข้อมูล v-model ของฟอร์ม */
 const formDataVacation = reactive<any>({
-  type: dataStore.typeId,
-  leaveWrote: "",
-  leaveRange: "ALL",
-  restDayOldTotal: "",
-  restDayCurrentTotal: "",
-  leaveStartDate: null,
-  leaveEndDate: null,
-  leaveTotal: "",
-  leaveNumber: "",
-  leaveAddress: "",
-  leaveDetail: "",
-  leaveDocument: [],
-});
+	type: dataStore.typeId,
+	leaveWrote: "",
+	leaveRange: "ALL",
+	restDayOldTotal: "",
+	restDayCurrentTotal: "",
+	leaveStartDate: null,
+	leaveEndDate: null,
+	leaveTotal: "",
+	leaveNumber: "",
+	leaveAddress: "",
+	leaveDetail: "",
+	leaveDocument: [],
+})
 
 /** ตัวแปร ref สำหรับแสดง validate */
-const leaveWroteRef = ref<object | null>(null);
-const restDayOldTotalRef = ref<object | null>(null);
-const restDayCurrentTotalRef = ref<object | null>(null);
-const leaveRangeRef = ref<object | null>(null);
-const leaveStartDateRef = ref<object | null>(null);
-const leaveEndDateRef = ref<object | null>(null);
-const leaveTotalRef = ref<object | null>(null);
-const leaveNumberRef = ref<object | null>(null);
-const leaveAddressRef = ref<object | null>(null);
-const leaveDetailRef = ref<object | null>(null);
-const leaveDocumentRef = ref<object | null>(null);
+const leaveWroteRef = ref<object | null>(null)
+const restDayOldTotalRef = ref<object | null>(null)
+const restDayCurrentTotalRef = ref<object | null>(null)
+const leaveRangeRef = ref<object | null>(null)
+const leaveStartDateRef = ref<object | null>(null)
+const leaveEndDateRef = ref<object | null>(null)
+const leaveTotalRef = ref<object | null>(null)
+const leaveNumberRef = ref<object | null>(null)
+const leaveAddressRef = ref<object | null>(null)
+const leaveDetailRef = ref<object | null>(null)
+const leaveDocumentRef = ref<object | null>(null)
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const FormRef: FormRef = {
-  leaveWrote: leaveWroteRef,
-  leaveRange: leaveRangeRef,
-  restDayOldTotal: restDayOldTotalRef,
-  restDayCurrentTotal: restDayCurrentTotalRef,
-  leaveStartDate: leaveStartDateRef,
-  leaveEndDate: leaveEndDateRef,
-  leaveTotal: leaveTotalRef,
-  leaveNumber: leaveNumberRef,
-  leaveAddress: leaveAddressRef,
-  leaveDetail: leaveDetailRef,
-  leaveDocument: leaveDocumentRef,
-};
+	leaveWrote: leaveWroteRef,
+	leaveRange: leaveRangeRef,
+	restDayOldTotal: restDayOldTotalRef,
+	restDayCurrentTotal: restDayCurrentTotalRef,
+	leaveStartDate: leaveStartDateRef,
+	leaveEndDate: leaveEndDateRef,
+	leaveTotal: leaveTotalRef,
+	leaveNumber: leaveNumberRef,
+	leaveAddress: leaveAddressRef,
+	leaveDetail: leaveDetailRef,
+	leaveDocument: leaveDocumentRef,
+}
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("");
-const fileDocDataUpload = ref<File[]>([]);
+const nameFile = ref<string>("")
+const fileDocDataUpload = ref<File[]>([])
 const fileUploadDoc = async (files: any) => {
-  files.forEach((file: any) => {
-    fileDocDataUpload.value.push(file);
-  });
-};
+	files.forEach((file: any) => {
+		fileDocDataUpload.value.push(file)
+	})
+}
 
 /** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
 function onValidate() {
-  const hasError = [];
-  for (const key in FormRef) {
-    if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
-      const property = FormRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    const formData = new FormData();
-    // if (formDataVacation.leaveDocument.length > 0) {
-    // 	const blob = formDataVacation.leaveDocument.slice(0, formDataVacation.leaveDocument[0].size)
-    // 	const newFile = new File(blob, nameFile.value, {
-    // 		type: formDataVacation.leaveDocument[0].type,
-    // 	})
-    // 	formData.append("leaveDocument", newFile)
-    // }
-    formData.append("leaveDocument", formDataVacation.leaveDocument);
-    formData.append("type", formDataVacation.type);
-    formData.append("leaveRange", formDataVacation.leaveRange);
-    formData.append(
-      "leaveStartDate",
-      dateToISO(formDataVacation.leaveStartDate)
-    );
-    formData.append("leaveEndDate", dateToISO(formDataVacation.leaveEndDate));
-    formData.append("leaveWrote", formDataVacation.leaveWrote);
-    formData.append("leaveAddress", formDataVacation.leaveAddress);
-    formData.append("leaveNumber", formDataVacation.leaveNumber);
-    formData.append("leaveDetail", formDataVacation.leaveDetail);
-    props.onSubmit(formData);
-  }
+	const hasError = []
+	for (const key in FormRef) {
+		if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
+			const property = FormRef[key]
+			if (property.value && typeof property.value.validate === "function") {
+				const isValid = property.value.validate()
+				hasError.push(isValid)
+			}
+		}
+	}
+	if (hasError.every(result => result === true)) {
+		const formData = new FormData()
+		formDataVacation.leaveDocument.forEach((file: File) => {
+			formData.append("leaveDocument", file)
+		})
+		// formData.append("leaveDocument", formDataVacation.leaveDocument);
+		formData.append("type", formDataVacation.type)
+		formData.append("leaveRange", formDataVacation.leaveRange)
+		formData.append("leaveStartDate", dateToISO(formDataVacation.leaveStartDate))
+		formData.append("leaveEndDate", dateToISO(formDataVacation.leaveEndDate))
+		formData.append("leaveWrote", formDataVacation.leaveWrote)
+		formData.append("leaveAddress", formDataVacation.leaveAddress)
+		formData.append("leaveNumber", formDataVacation.leaveNumber)
+		formData.append("leaveDetail", formDataVacation.leaveDetail)
+		props.onSubmit(formData)
+	}
 }
 
 /**
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
-const isLeave = ref<boolean>(true);
+const isLeave = ref<boolean>(true)
 async function fetchCheck() {
-  await http
-    .post(config.API.leaveCheck(), {
-      type: dataStore.typeId ?? null,
-      StartLeaveDate: formDataVacation.leaveStartDate ?? null,
-      EndLeaveDate: formDataVacation.leaveEndDate ?? null,
-    })
-    .then((res: any) => {
-      const data = res.data.result;
-      isLeave.value = data.isLeave;
-      if (data.isLeave === true) {
-        formDataVacation.leaveTotal =
-          data.totalDate - data.sumDateWork - data.sumDateHoliday;
-        // formDataVacation.leaveLast = data.totalDate
-      } else {
-        fails($q, "ไม่สามารถลาได้");
-      }
-    })
-    .catch((e: any) => {
-      messageError($q, e);
-    });
+	await http
+		.post(config.API.leaveCheck(), {
+			type: dataStore.typeId ?? null,
+			StartLeaveDate: formDataVacation.leaveStartDate ?? null,
+			EndLeaveDate: formDataVacation.leaveEndDate ?? null,
+		})
+		.then((res: any) => {
+			const data = res.data.result
+			isLeave.value = data.isLeave
+			if (data.isLeave === true) {
+				formDataVacation.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
+				// formDataVacation.leaveLast = data.totalDate
+			} else {
+				fails($q, "ไม่สามารถลาได้")
+			}
+		})
+		.catch((e: any) => {
+			messageError($q, e)
+		})
 }
 
 /**
  * function รีเซทค่า leaveStartDate เเละ leaveEndDate
  */
 function resetDate() {
-  if (
-    formDataVacation.leaveRange === "MORNING" ||
-    formDataVacation.leaveRange === "AFTERNOON"
-  ) {
-    formDataVacation.leaveStartDate = null;
-    formDataVacation.leaveEndDate = null;
-  }
-  console.log("testnull");
+	if (formDataVacation.leaveRange === "MORNING" || formDataVacation.leaveRange === "AFTERNOON") {
+		formDataVacation.leaveStartDate = null
+		formDataVacation.leaveEndDate = null
+	}
+	console.log("testnull")
 }
 
 /** ฟังก์ชั่นแปลงค่า ครึ่งวัน/ทั้งวัน */
 const isReadOnly = computed(() => {
-  const conditionleaveRange =
-    formDataVacation.leaveRange === "MORNING" ||
-    formDataVacation.leaveRange === "AFTERNOON";
-  if (conditionleaveRange) {
-    formDataVacation.leaveEndDate = formDataVacation.leaveStartDate; // Set formDataVacation.leaveEndDate to null
-    formDataVacation.leaveTotal = 0.5;
-  } else {
-    formDataVacation.leaveTotal = null;
-  }
-  return conditionleaveRange;
-});
+	const conditionleaveRange = formDataVacation.leaveRange === "MORNING" || formDataVacation.leaveRange === "AFTERNOON"
+	if (conditionleaveRange) {
+		formDataVacation.leaveEndDate = formDataVacation.leaveStartDate // Set formDataVacation.leaveEndDate to null
+		formDataVacation.leaveTotal = 0.5
+	} else {
+		formDataVacation.leaveTotal = null
+	}
+	return conditionleaveRange
+})
 
+const leaveDocumentList = ref<any>()
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 onMounted(() => {
-  if (props.data) {
-    // console.log("data==>", props.data)
-    formDataVacation.leaveWrote = props.data.leaveWrote;
-    formDataVacation.restDayOldTotal = props.data.restDayOldTotal;
-    formDataVacation.restDayCurrentTotal = props.data.restDayCurrentTotal;
-    formDataVacation.leaveStartDate = props.data.leaveStartDate;
-    formDataVacation.leaveEndDate = props.data.leaveEndDate;
-    formDataVacation.leaveTotal = props.data.leaveTotal;
-    formDataVacation.leaveNumber = props.data.leaveNumber;
-    formDataVacation.leaveAddress = props.data.leaveAddress;
-    formDataVacation.leaveDetail = props.data.leaveDetail;
-    // formDataVacation.leaveDocument = props.data.leaveDocument;
-  }
-});
+	if (props.data) {
+		// console.log("data==>", props.data)
+		formDataVacation.leaveWrote = props.data.leaveWrote
+		formDataVacation.restDayOldTotal = props.data.restDayOldTotal
+		formDataVacation.restDayCurrentTotal = props.data.restDayCurrentTotal
+		formDataVacation.leaveStartDate = props.data.leaveStartDate
+		formDataVacation.leaveEndDate = props.data.leaveEndDate
+		formDataVacation.leaveTotal = props.data.leaveTotal
+		formDataVacation.leaveNumber = props.data.leaveNumber
+		formDataVacation.leaveAddress = props.data.leaveAddress
+		formDataVacation.leaveDetail = props.data.leaveDetail
+		leaveDocumentList.value = props.data.leaveDocument
+		// formDataVacation.leaveDocument = props.data.leaveDocument;
+	}
+})
 </script>
 
 <template>
-  <div style="display: flex; align-items: center">
-    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-  </div>
-  <form @submit.prevent.stop="onValidate">
-    <q-card bordered class="q-pa-md bg-grey-1">
-      <div class="row q-pa-sm q-col-gutter-sm">
-        <q-input
-          class="col-12 col-sm-12 cursor-pointer inputgreen"
-          ref="leaveWroteRef"
-          for="leaveWroteRef"
-          dense
-          hide-bottom-space
-          bg-color="white"
-          outlined
-          v-model="formDataVacation.leaveWrote"
-          label="เขียนที่"
-          :readonly="!edit"
-          :rules="[(val) => !!val || `${'เขียนที่'}`]"
-        />
-        <div class="col-12 col-md-4 col-sm-6">
-          <q-radio
-            v-model="formDataVacation.leaveRange"
-            val="ALL"
-            label="ลาทั้งวัน"
-            checked-icon="task_alt"
-          />
-          <q-radio
-            v-model="formDataVacation.leaveRange"
-            val="MORNING"
-            label="ลาครึ่งวันเช้า"
-            checked-icon="task_alt"
-            @update:model-value="resetDate"
-          />
-          <q-radio
-            v-model="formDataVacation.leaveRange"
-            val="AFTERNOON"
-            label="ลาครึ่งวันบ่าย"
-            checked-icon="task_alt"
-            @update:model-value="resetDate"
-          />
-        </div>
-        <q-input
-          class="col-12 col-md-4 col-sm-6"
-          ref="restDayOldTotalRef"
-          for="restDayOldTotalRef"
-          dense
-          hide-bottom-space
-          bg-color="white"
-          readonly
-          outlined
-          v-model="dataStore.restDayTotalOld"
-          label="จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา"
-        />
+	<div style="display: flex; align-items: center">
+		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+	</div>
+	<form @submit.prevent.stop="onValidate">
+		<q-card bordered class="q-pa-md bg-grey-1">
+			<div class="row q-pa-sm q-col-gutter-sm">
+				<q-input
+					class="col-12 col-sm-12 cursor-pointer inputgreen"
+					ref="leaveWroteRef"
+					for="leaveWroteRef"
+					dense
+					hide-bottom-space
+					bg-color="white"
+					outlined
+					v-model="formDataVacation.leaveWrote"
+					label="เขียนที่"
+					:readonly="!edit"
+					:rules="[val => !!val || `${'เขียนที่'}`]"
+				/>
+				<div class="col-12 col-md-4 col-sm-6">
+					<q-radio v-model="formDataVacation.leaveRange" val="ALL" label="ลาทั้งวัน" checked-icon="task_alt" />
+					<q-radio v-model="formDataVacation.leaveRange" val="MORNING" label="ลาครึ่งวันเช้า" checked-icon="task_alt" @update:model-value="resetDate" />
+					<q-radio v-model="formDataVacation.leaveRange" val="AFTERNOON" label="ลาครึ่งวันบ่าย" checked-icon="task_alt" @update:model-value="resetDate" />
+				</div>
+				<q-input
+					class="col-12 col-md-4 col-sm-6"
+					ref="restDayOldTotalRef"
+					for="restDayOldTotalRef"
+					dense
+					hide-bottom-space
+					bg-color="white"
+					readonly
+					outlined
+					v-model="dataStore.restDayTotalOld"
+					label="จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา"
+				/>
 
-        <q-input
-          class="col-12 col-md-4 col-sm-6"
-          ref="restDayCurrentTotalRef"
-          for="restDayCurrentTotalRef"
-          dense
-          readonly
-          hide-bottom-space
-          bg-color="white"
-          outlined
-          v-model="dataStore.restDayCurrentTotal"
-          label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน"
-        />
+				<q-input
+					class="col-12 col-md-4 col-sm-6"
+					ref="restDayCurrentTotalRef"
+					for="restDayCurrentTotalRef"
+					dense
+					readonly
+					hide-bottom-space
+					bg-color="white"
+					outlined
+					v-model="dataStore.restDayCurrentTotal"
+					label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน"
+				/>
 
-        <datepicker
-          class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          v-model="formDataVacation.leaveStartDate"
-          :locale="'th'"
-          autoApply
-          hide-bottom-space
-          borderless
-          :enableTimePicker="false"
-          week-start="0"
-          :readonly="!edit"
-          @update:model-value="formDataVacation.leaveEndDate = null"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              outlined
-              dense
-              ref="leaveStartDateRef"
-              for="leaveStartDateRef"
-              hide-bottom-space
-              bg-color="white"
-              :readonly="!edit"
-              class="full-width datepicker"
-              :model-value="
-                formDataVacation.leaveStartDate != null
-                  ? date2Thai(formDataVacation.leaveStartDate)
-                  : null
-              "
-              :label="`${'ลาตั้งแต่วันที่'}`"
-              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
+				<datepicker
+					class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+					menu-class-name="modalfix"
+					v-model="formDataVacation.leaveStartDate"
+					:locale="'th'"
+					autoApply
+					hide-bottom-space
+					borderless
+					:enableTimePicker="false"
+					week-start="0"
+					:readonly="!edit"
+					@update:model-value="formDataVacation.leaveEndDate = null"
+				>
+					<template #year="{ year }">
+						{{ year + 543 }}
+					</template>
+					<template #year-overlay-value="{ value }">
+						{{ parseInt(value + 543) }}
+					</template>
+					<template #trigger>
+						<q-input
+							outlined
+							dense
+							ref="leaveStartDateRef"
+							for="leaveStartDateRef"
+							hide-bottom-space
+							bg-color="white"
+							:readonly="!edit"
+							class="full-width datepicker"
+							:model-value="formDataVacation.leaveStartDate != null ? date2Thai(formDataVacation.leaveStartDate) : null"
+							:label="`${'ลาตั้งแต่วันที่'}`"
+							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+						>
+							<template v-slot:prepend>
+								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
+							</template>
+						</q-input>
+					</template>
+				</datepicker>
 
-        <datepicker
-          class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          v-model="formDataVacation.leaveEndDate"
-          :locale="'th'"
-          autoApply
-          hide-bottom-space
-          @update:model-value="fetchCheck()"
-          borderless
-          :enableTimePicker="false"
-          week-start="0"
-          :readonly="isReadOnly"
-          :min-date="formDataVacation.leaveStartDate"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              outlined
-              dense
-              ref="leaveEndDateRef"
-              for="leaveEndDateRef"
-              hide-bottom-space
-              bg-color="white"
-              class="full-width datepicker"
-              :readonly="isReadOnly"
-              :model-value="
-                formDataVacation.leaveEndDate != null
-                  ? date2Thai(formDataVacation.leaveEndDate)
-                  : null
-              "
-              :label="`${'ลาถึงวันที่'}`"
-              :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
-        <q-input
-          class="col-12 col-md-2 col-sm-6"
-          bg-color="white"
-          dense
-          outlined
-          ref="leaveTotalRef"
-          for="leaveTotalRef"
-          v-model="formDataVacation.leaveTotal"
-          label="จำนวนวันที่ลา"
-          readonly
-          hide-bottom-space
-        />
-        <div class="full-width">
-          <div class="q-col-gutter-sm row">
-            <q-input
-              class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
-              dense
-              outlined
-              hide-bottom-space
-              bg-color="white"
-              ref="leaveNumberRef"
-              for="leaveNumberRef"
-              v-model="formDataVacation.leaveNumber"
-              mask="(###)-###-####"
-              unmasked-value
-              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-              :readonly="!edit"
-              :rules="[
-                (val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
-              ]"
-            />
+				<datepicker
+					class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+					menu-class-name="modalfix"
+					v-model="formDataVacation.leaveEndDate"
+					:locale="'th'"
+					autoApply
+					hide-bottom-space
+					@update:model-value="fetchCheck()"
+					borderless
+					:enableTimePicker="false"
+					week-start="0"
+					:readonly="isReadOnly"
+					:min-date="formDataVacation.leaveStartDate"
+				>
+					<template #year="{ year }">
+						{{ year + 543 }}
+					</template>
+					<template #year-overlay-value="{ value }">
+						{{ parseInt(value + 543) }}
+					</template>
+					<template #trigger>
+						<q-input
+							outlined
+							dense
+							ref="leaveEndDateRef"
+							for="leaveEndDateRef"
+							hide-bottom-space
+							bg-color="white"
+							class="full-width datepicker"
+							:readonly="isReadOnly"
+							:model-value="formDataVacation.leaveEndDate != null ? date2Thai(formDataVacation.leaveEndDate) : null"
+							:label="`${'ลาถึงวันที่'}`"
+							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+						>
+							<template v-slot:prepend>
+								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
+							</template>
+						</q-input>
+					</template>
+				</datepicker>
+				<q-input
+					class="col-12 col-md-2 col-sm-6"
+					bg-color="white"
+					dense
+					outlined
+					ref="leaveTotalRef"
+					for="leaveTotalRef"
+					v-model="formDataVacation.leaveTotal"
+					label="จำนวนวันที่ลา"
+					readonly
+					hide-bottom-space
+				/>
+				<div class="full-width">
+					<div class="q-col-gutter-sm row">
+						<q-input
+							class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
+							dense
+							outlined
+							hide-bottom-space
+							bg-color="white"
+							ref="leaveNumberRef"
+							for="leaveNumberRef"
+							v-model="formDataVacation.leaveNumber"
+							mask="(###)-###-####"
+							unmasked-value
+							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+							:readonly="!edit"
+							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
+						/>
 
-            <q-input
-              class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
-              dense
-              outlined
-              hide-bottom-space
-              bg-color="white"
-              ref="leaveAddressRef"
-              for="leaveAddressRef"
-              v-model="formDataVacation.leaveAddress"
-              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-              :readonly="!edit"
-              :rules="[
-                (val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
-              ]"
-            />
-          </div>
-        </div>
-        <q-input
-          type="textarea"
-          hide-bottom-space
-          bg-color="white"
-          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-          dense
-          outlined
-          ref="leaveDetailRef"
-          for="leaveDetailRef"
-          v-model="formDataVacation.leaveDetail"
-          label="รายละเอียด"
-          :readonly="!edit"
-        />
+						<q-input
+							class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
+							dense
+							outlined
+							hide-bottom-space
+							bg-color="white"
+							ref="leaveAddressRef"
+							for="leaveAddressRef"
+							v-model="formDataVacation.leaveAddress"
+							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+							:readonly="!edit"
+							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
+						/>
+					</div>
+				</div>
+				<q-input
+					type="textarea"
+					hide-bottom-space
+					bg-color="white"
+					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+					dense
+					outlined
+					ref="leaveDetailRef"
+					for="leaveDetailRef"
+					v-model="formDataVacation.leaveDetail"
+					label="รายละเอียด"
+					:readonly="!edit"
+				/>
+				<div class="full-width">
+					<div class="q-col-gutter-sm row">
+						<!-- multiple -->
+						<q-file
+							ref="leaveDocumentRef"
+							bg-color="white"
+							v-model="formDataVacation.leaveDocument"
+							@added="fileUploadDoc"
+							dense
+							label="เอกสารประกอบ"
+							multiple
+							outlined
+							use-chips
+							class="q-pl-sm col-12"
+						>
+							<template v-slot:prepend>
+								<q-icon name="attach_file" color="primary" />
+							</template>
+						</q-file>
+						<!-- <div class="col-12" v-if="formDataVacation.leaveDocument.length == 0">
+							<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
+						</div> -->
+					</div>
+				</div>
+				<div class="col-12" v-if="data">
+					<div class="col-12 col-md-12 col-sm-12">
+						<q-card bordered>
+							<!-- <div class="col-12">
+								<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ{{ leaveDocumentList }} </q-card>
+							</div> -->
+							<q-list separator>
+								<q-item v-for="(document, index) in leaveDocumentList" :key="index" class="q-my-xs">
+									<q-item-section>
+										<q-item-label class="row items-baseline">
+											<div class="col">
+												{{ "เอกสารแนบฉบับที่" + (index + 1) }}
+											</div>
+											<q-btn class="col-6" :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
+												<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+											</q-btn>
+										</q-item-label>
+									</q-item-section>
+								</q-item>
+							</q-list>
+						</q-card>
+					</div>
+				</div>
+				<div class="col-12 col-sm-6 row" v-if="!edit">
+					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
+					</div>
+					<q-card bordered flat class="full-width">
+						<q-list separator>
+							<q-item v-for="(file, index) in leaveDocumentList" :key="index" class="q-my-xs">
+								<q-item-section>
+									<q-item-label class="full-width ellipsis">
+										{{ file.name }}
+									</q-item-label>
+									<q-item-label caption> </q-item-label>
+								</q-item-section>
+							</q-item>
+						</q-list>
+					</q-card>
+				</div>
+			</div>
+		</q-card>
 
-        <!-- multiple -->
-        <q-file
-          ref="leaveDocumentRef"
-          bg-color="white"
-          v-model="formDataVacation.leaveDocument"
-          @added="fileUploadDoc"
-          dense
-          label="เอกสารประกอบ"
-          outlined
-          use-chips
-          
-          class="q-pl-sm col-12"
-        >
-          <template v-slot:prepend>
-            <q-icon name="attach_file" color="primary" />
-          </template>
-        </q-file>
-
-        <div class="col-12 row" v-if="!edit">
-          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-            <div class="q-pl-sm text-weight-bold text-dark">
-              เอกสารเพิ่มเติม
-            </div>
-          </div>
-          <q-card bordered flat class="full-width">
-            <q-list separator>
-              <q-item
-                v-for="(file, index) in formDataVacation.leaveDocument"
-                :key="index"
-                class="q-my-xs"
-              >
-                <q-item-section>
-                  <q-item-label class="full-width ellipsis">
-                    {{ file.name }}
-                  </q-item-label>
-                  <q-item-label caption> </q-item-label>
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-card>
-        </div>
-      </div>
-    </q-card>
-
-    <q-separator class="q-mt-sm" />
-    <div class="row col-12 q-pt-md">
-      <q-space />
-      <q-btn
-        v-if="!props.data || props.data.status == 'DRAFT'"
-        id="onSubmit"
-        type="submit"
-        unelevated
-        dense
-        class="q-px-md items-center btnBlue"
-        label="บันทึก"
-        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
-      >
-      <q-btn
-        v-if="data"
-        id="onSubmit"
-        type="button"
-        unelevated
-        dense
-        class="q-px-md items-center q-ml-sm"
-        color="primary"
-        label="ยื่นใบลา"
-        @click="onConfirm"
-        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
-      >
-    </div>
-  </form>
+		<q-separator class="q-mt-sm" />
+		<div class="row col-12 q-pt-md">
+			<q-space />
+			<q-btn v-if="!props.data || props.data.status == 'DRAFT'" id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"
+				><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+			>
+			<q-btn v-if="data" id="onSubmit" type="button" unelevated dense class="q-px-md items-center q-ml-sm" color="primary" label="ยื่นใบลา" @click="onConfirm"
+				><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+			>
+		</div>
+	</form>
 </template>
diff --git a/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue b/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
index 3e33edf..0387e85 100644
--- a/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
@@ -1,660 +1,560 @@
 <script setup lang="ts">
-import { reactive, ref, onMounted } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
-import type { OrdinationForm } from "@/modules/05_leave/interface/request/AddAbsence";
-import { useLeaveStore } from "@/modules/05_leave/store";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useRouter } from "vue-router";
+import { reactive, ref, onMounted } from "vue"
+import { useCounterMixin } from "@/stores/mixin"
+import { useQuasar } from "quasar"
+import type { OrdinationForm } from "@/modules/05_leave/interface/request/AddAbsence"
+import { useLeaveStore } from "@/modules/05_leave/store"
+import http from "@/plugins/http"
+import config from "@/app.config"
+import { useRouter } from "vue-router"
 
 /** Use */
-const dataStore = useLeaveStore();
-const $q = useQuasar();
-const router = useRouter();
-const mixin = useCounterMixin();
-const {
-  date2Thai,
-  dialogConfirm,
-  calculateDurationYmd,
-  fails,
-  dateToISO,
-  success,
-  messageError,
-} = mixin;
-const edit = ref<boolean>(true);
-const files = ref<any>(null);
+const dataStore = useLeaveStore()
+const $q = useQuasar()
+const router = useRouter()
+const mixin = useCounterMixin()
+const { date2Thai, dialogConfirm, calculateDurationYmd, fails, dateToISO, success, messageError } = mixin
+const edit = ref<boolean>(true)
+const files = ref<any>(null)
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
-  data: {
-    type: Array,
-    default: null,
-  },
-  onSubmit: {
-    type: Function,
-    default: () => "",
-  },
-  onConfirm: {
-    type: Function,
-    default: () => "",
-  },
-});
+	data: {
+		type: Object,
+		default: null,
+	},
+	onSubmit: {
+		type: Function,
+		default: () => "",
+	},
+	onConfirm: {
+		type: Function,
+		default: () => "",
+	},
+})
 
 /** ตัวแปร ref สำหรับแสดง validate */
-const ordainDayLocationNumberRef = ref<object | null>(null);
-const leaveWroteRef = ref<object | null>(null);
-const leavebirthDateRef = ref<object | null>(null);
-const leavegovernmentDateRef = ref<object | null>(null);
-const totalLeaveRef = ref<object | null>(null);
-const leaveEndDateRef = ref<object | null>(null);
-const ordainDayOrdinationRef = ref<object | null>(null);
-const leaveStartDateRef = ref<object | null>(null);
-const ordainDayLocationAddressRef = ref<object | null>(null);
-const ordainDayBuddhistLentAddressRef = ref<object | null>(null);
-const ordainDayLocationNameRef = ref<object | null>(null);
-const ordainDayBuddhistLentNameRef = ref<object | null>(null);
-const leaveDocumentRef = ref<object | null>(null);
+const ordainDayLocationNumberRef = ref<object | null>(null)
+const leaveWroteRef = ref<object | null>(null)
+const leavebirthDateRef = ref<object | null>(null)
+const leavegovernmentDateRef = ref<object | null>(null)
+const totalLeaveRef = ref<object | null>(null)
+const leaveEndDateRef = ref<object | null>(null)
+const ordainDayOrdinationRef = ref<object | null>(null)
+const leaveStartDateRef = ref<object | null>(null)
+const ordainDayLocationAddressRef = ref<object | null>(null)
+const ordainDayBuddhistLentAddressRef = ref<object | null>(null)
+const ordainDayLocationNameRef = ref<object | null>(null)
+const ordainDayBuddhistLentNameRef = ref<object | null>(null)
+const leaveDocumentRef = ref<object | null>(null)
 
 /** ข้อมูล v-model ของฟอร์ม */
 const formDataOrdination = reactive<any>({
-  type: dataStore.typeId,
-  leaveWrote: "",
-  leavegovernmentDate: null,
-  leavebirthDate: null,
-  leaveStartDate: null,
-  leaveEndDate: null,
-  totalLeave: 0,
-  ordainDayOrdination: null,
-  ordainDayLocationName: "",
-  ordainDayLocationNumber: null,
-  ordainDayLocationAddress: "",
-  ordainDayBuddhistLentName: "",
-  ordainDayBuddhistLentAddress: "",
-  ordainDayStatus: "true",
-  leaveDocument: null,
-});
+	type: dataStore.typeId,
+	leaveWrote: "",
+	leavegovernmentDate: null,
+	leavebirthDate: null,
+	leaveStartDate: null,
+	leaveEndDate: null,
+	totalLeave: 0,
+	ordainDayOrdination: null,
+	ordainDayLocationName: "",
+	ordainDayLocationNumber: null,
+	ordainDayLocationAddress: "",
+	ordainDayBuddhistLentName: "",
+	ordainDayBuddhistLentAddress: "",
+	ordainDayStatus: "true",
+	leaveDocument: null,
+})
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const formRef: OrdinationForm = {
-  leaveWrote: leaveWroteRef,
-  // leavegovernmentDate: leavegovernmentDateRef,
-  // leavebirthDate: leavebirthDateRef,
-  leaveStartDate: leaveStartDateRef,
-  leaveEndDate: leaveEndDateRef,
-  totalLeave: totalLeaveRef,
-  ordainDayOrdination: ordainDayOrdinationRef,
-  ordainDayLocationName: ordainDayLocationNameRef,
-  ordainDayLocationNumber: ordainDayLocationNumberRef,
-  ordainDayLocationAddress: ordainDayLocationAddressRef,
-  ordainDayBuddhistLentName: ordainDayBuddhistLentNameRef,
-  ordainDayBuddhistLentAddress: ordainDayBuddhistLentAddressRef,
-  leaveDocument: leaveDocumentRef,
-};
+	leaveWrote: leaveWroteRef,
+	leavegovernmentDate: leavegovernmentDateRef,
+	leavebirthDate: leavebirthDateRef,
+	leaveStartDate: leaveStartDateRef,
+	leaveEndDate: leaveEndDateRef,
+	totalLeave: totalLeaveRef,
+	ordainDayOrdination: ordainDayOrdinationRef,
+	ordainDayLocationName: ordainDayLocationNameRef,
+	ordainDayLocationNumber: ordainDayLocationNumberRef,
+	ordainDayLocationAddress: ordainDayLocationAddressRef,
+	ordainDayBuddhistLentName: ordainDayBuddhistLentNameRef,
+	ordainDayBuddhistLentAddress: ordainDayBuddhistLentAddressRef,
+	leaveDocument: leaveDocumentRef,
+}
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("");
-const fileDocDataUpload = ref<File[]>([]);
+const nameFile = ref<string>("")
+const fileDocDataUpload = ref<File[]>([])
 const fileUploadDoc = async (files: any) => {
-  files.forEach((file: any) => {
-    fileDocDataUpload.value.push(file);
-  });
-};
+	files.forEach((file: any) => {
+		fileDocDataUpload.value.push(file)
+	})
+}
 
 /** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
 function onValidate() {
-  const hasError = [];
-  for (const key in formRef) {
-    if (Object.prototype.hasOwnProperty.call(formRef, key)) {
-      const property = formRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    const formData = new FormData();
-    // if (formDataOrdination.leaveDocument.length > 0) {
-    // 	const blob = formDataOrdination.leaveDocument.slice(0, formDataOrdination.leaveDocument[0].size)
-    // 	const newFile = new File(blob, nameFile.value, {
-    // 		type: formDataOrdination.leaveDocument[0].type,
-    // 	})
-    // 	formData.append("leaveDocument", newFile)
-    // }
-    formData.append("leaveDocument", formDataOrdination.leaveDocument);
-    formData.append("type", formDataOrdination.type);
-    formData.append(
-      "leaveStartDate",
-      dateToISO(formDataOrdination.leaveStartDate)
-    );
-    formData.append("leaveEndDate", dateToISO(formDataOrdination.leaveEndDate));
-    formData.append(
-      "ordainDayOrdination",
-      dateToISO(formDataOrdination.ordainDayOrdination)
-    );
-    formData.append(
-      "ordainDayLocationName",
-      formDataOrdination.ordainDayLocationName
-    );
-    formData.append(
-      "ordainDayLocationNumber",
-      formDataOrdination.ordainDayLocationNumber
-    );
-    formData.append(
-      "ordainDayLocationAddress",
-      formDataOrdination.ordainDayLocationAddress
-    );
-    formData.append(
-      "ordainDayBuddhistLentName",
-      formDataOrdination.ordainDayBuddhistLentName
-    );
-    formData.append(
-      "ordainDayBuddhistLentAddress",
-      formDataOrdination.ordainDayBuddhistLentAddress
-    );
-    formData.append("ordainDayStatus", formDataOrdination.ordainDayStatus);
-    formData.append("leaveWrote", formDataOrdination.leaveWrote);
-    formData.append("leaveDetail", formDataOrdination.leaveDetail);
-    props.onSubmit(formData);
-  }
+	const hasError = []
+	for (const key in formRef) {
+		if (Object.prototype.hasOwnProperty.call(formRef, key)) {
+			const property = formRef[key]
+			if (property.value && typeof property.value.validate === "function") {
+				const isValid = property.value.validate()
+				hasError.push(isValid)
+			}
+		}
+	}
+	if (hasError.every(result => result === true)) {
+		const formData = new FormData()
+		formDataOrdination.leaveDocument.forEach((file: File) => {
+			formData.append("leaveDocument", file)
+		})
+		// formData.append("leaveDocument", formDataOrdination.leaveDocument);
+		formData.append("type", formDataOrdination.type)
+		formData.append("leaveStartDate", dateToISO(formDataOrdination.leaveStartDate))
+		formData.append("leaveEndDate", dateToISO(formDataOrdination.leaveEndDate))
+		formData.append("ordainDayOrdination", dateToISO(formDataOrdination.ordainDayOrdination))
+		formData.append("ordainDayLocationName", formDataOrdination.ordainDayLocationName)
+		formData.append("ordainDayLocationNumber", formDataOrdination.ordainDayLocationNumber)
+		formData.append("ordainDayLocationAddress", formDataOrdination.ordainDayLocationAddress)
+		formData.append("ordainDayBuddhistLentName", formDataOrdination.ordainDayBuddhistLentName)
+		formData.append("ordainDayBuddhistLentAddress", formDataOrdination.ordainDayBuddhistLentAddress)
+		formData.append("ordainDayStatus", formDataOrdination.ordainDayStatus)
+		formData.append("leaveWrote", formDataOrdination.leaveWrote)
+		formData.append("leaveDetail", formDataOrdination.leaveDetail)
+		props.onSubmit(formData)
+	}
 }
 
 /**
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
-const isLeave = ref<boolean>(true);
+const isLeave = ref<boolean>(true)
 async function fetchCheck() {
-  await http
-    .post(config.API.leaveCheck(), {
-      type: dataStore.typeId ?? null,
-      StartLeaveDate: formDataOrdination.leaveStartDate ?? null,
-      EndLeaveDate: formDataOrdination.leaveEndDate ?? null,
-    })
-    .then((res: any) => {
-      const data = res.data.result;
-      isLeave.value = data.isLeave;
-      if (data.isLeave === true) {
-        // formDataOrdination.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-        formDataOrdination.leaveTotal = data.totalDate;
-      } else {
-        fails($q, "ไม่สามารถลาได้");
-      }
-    })
-    .catch((e: any) => {
-      messageError($q, e);
-    });
+	await http
+		.post(config.API.leaveCheck(), {
+			type: dataStore.typeId ?? null,
+			StartLeaveDate: formDataOrdination.leaveStartDate ?? null,
+			EndLeaveDate: formDataOrdination.leaveEndDate ?? null,
+		})
+		.then((res: any) => {
+			const data = res.data.result
+			isLeave.value = data.isLeave
+			if (data.isLeave === true) {
+				// formDataOrdination.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
+				formDataOrdination.leaveTotal = data.totalDate
+			} else {
+				fails($q, "ไม่สามารถลาได้")
+			}
+		})
+		.catch((e: any) => {
+			messageError($q, e)
+		})
 }
 
 /**
  * function อัพเดทค่า LeaveTotal
  */
 function updateLeaveTotal() {
-  const newLeaveTotal = calculateDurationYmd(
-    formDataOrdination.leaveStartDate,
-    formDataOrdination.leaveEndDate
-  );
-  formDataOrdination.leaveTotal = newLeaveTotal;
+	const newLeaveTotal = calculateDurationYmd(formDataOrdination.leaveStartDate, formDataOrdination.leaveEndDate)
+	formDataOrdination.leaveTotal = newLeaveTotal
 }
 
+const leaveDocumentList = ref<any>()
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 onMounted(() => {
-  if (props.data) {
-    formDataOrdination.leaveWrote = props.data.leaveWrote;
-    formDataOrdination.leaveStartDate = props.data.leaveStartDate;
-    formDataOrdination.leaveEndDate = props.data.leaveEndDate;
-    formDataOrdination.leaveTotal = props.data.leaveTotal;
-    formDataOrdination.ordainDayOrdination = props.data.ordainDayOrdination;
-    formDataOrdination.ordainDayLocationName = props.data.ordainDayLocationName;
-    formDataOrdination.ordainDayLocationNumber =
-      props.data.ordainDayLocationNumber;
-    formDataOrdination.ordainDayLocationAddress =
-      props.data.ordainDayLocationAddress;
-    formDataOrdination.ordainDayBuddhistLentName =
-      props.data.ordainDayBuddhistLentName;
-    formDataOrdination.ordainDayBuddhistLentAddress =
-      props.data.ordainDayBuddhistLentAddress;
-    formDataOrdination.ordainDayStatus = props.data.ordainDayStatus;
-    formDataOrdination.leaveDetail = props.data.leaveDetail;
-    // formDataOrdination.leaveDocument = props.data.leaveDocument;
-  }
-});
+	if (props.data) {
+		formDataOrdination.leaveWrote = props.data.leaveWrote
+		formDataOrdination.leaveStartDate = props.data.leaveStartDate
+		formDataOrdination.leaveEndDate = props.data.leaveEndDate
+		formDataOrdination.leaveTotal = props.data.leaveTotal
+		formDataOrdination.ordainDayOrdination = props.data.ordainDayOrdination
+		formDataOrdination.ordainDayLocationName = props.data.ordainDayLocationName
+		formDataOrdination.ordainDayLocationNumber = props.data.ordainDayLocationNumber
+		formDataOrdination.ordainDayLocationAddress = props.data.ordainDayLocationAddress
+		formDataOrdination.ordainDayBuddhistLentName = props.data.ordainDayBuddhistLentName
+		formDataOrdination.ordainDayBuddhistLentAddress = props.data.ordainDayBuddhistLentAddress
+		formDataOrdination.ordainDayStatus = props.data.ordainDayStatus
+		formDataOrdination.leaveDetail = props.data.leaveDetail
+		leaveDocumentList.value = props.data.leaveDocument
+		// formDataOrdination.leaveDocument = props.data.leaveDocument;
+	}
+})
 </script>
 
 <!-- ฟอร์ม ลาอุปสมบท -->
 <template>
-  <div style="display: flex; align-items: center">
-    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-  </div>
-  <form @submit.prevent="onValidate" class="full-width">
-    <q-card bordered class="q-pa-md bg-grey-1">
-      <div class="row q-pa-sm q-col-gutter-sm">
-        <q-input
-          ref="leaveWroteRef"
-          class="col-12 col-sm-12 cursor-pointer inputgreen"
-          dense
-          outlined
-          bg-color="white"
-          hide-bottom-space
-          v-model="formDataOrdination.leaveWrote"
-          label="เขียนที่"
-          :rules="[(val) => !!val || `${'เขียนที่'}`]"
-        />
+	<div style="display: flex; align-items: center">
+		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+	</div>
+	<form @submit.prevent="onValidate" class="full-width">
+		<q-card bordered class="q-pa-md bg-grey-1">
+			<div class="row q-pa-sm q-col-gutter-sm">
+				<q-input
+					ref="leaveWroteRef"
+					class="col-12 col-sm-12 cursor-pointer inputgreen"
+					dense
+					outlined
+					bg-color="white"
+					hide-bottom-space
+					v-model="formDataOrdination.leaveWrote"
+					label="เขียนที่"
+					:rules="[val => !!val || `${'เขียนที่'}`]"
+				/>
 
-        <datepicker
-          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          v-model="formDataOrdination.leaveStartDate"
-          :locale="'th'"
-          autoApply
-          borderless
-          :enableTimePicker="false"
-          week-start="0"
-          @update:model-value="formDataOrdination.leaveEndDate = null"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              outlined
-              bg-color="white"
-              dense
-              ref="leaveStartDateRef"
-              hide-bottom-space
-              class="full-width datepicker"
-              :model-value="
-                formDataOrdination.leaveStartDate != null
-                  ? date2Thai(formDataOrdination.leaveStartDate)
-                  : null
-              "
-              :label="`${'ลาตั้งแต่วันที่'}`"
-              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
+				<datepicker
+					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+					menu-class-name="modalfix"
+					v-model="formDataOrdination.leaveStartDate"
+					:locale="'th'"
+					autoApply
+					borderless
+					:enableTimePicker="false"
+					week-start="0"
+					@update:model-value="formDataOrdination.leaveEndDate = null"
+				>
+					<template #year="{ year }">
+						{{ year + 543 }}
+					</template>
+					<template #year-overlay-value="{ value }">
+						{{ parseInt(value + 543) }}
+					</template>
+					<template #trigger>
+						<q-input
+							outlined
+							bg-color="white"
+							dense
+							ref="leaveStartDateRef"
+							hide-bottom-space
+							class="full-width datepicker"
+							:model-value="formDataOrdination.leaveStartDate != null ? date2Thai(formDataOrdination.leaveStartDate) : null"
+							:label="`${'ลาตั้งแต่วันที่'}`"
+							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+						>
+							<template v-slot:prepend>
+								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
+							</template>
+						</q-input>
+					</template>
+				</datepicker>
 
-        <datepicker
-          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          v-model="formDataOrdination.leaveEndDate"
-          :locale="'th'"
-          autoApply
-          borderless
-          @update:model-value="updateLeaveTotal, fetchCheck()"
-          :readonly="!formDataOrdination.leaveStartDate"
-          :enableTimePicker="false"
-          :min-date="formDataOrdination.leaveStartDate"
-          week-start="0"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              outlined
-              dense
-              ref="leaveEndDateRef"
-              bg-color="white"
-              hide-bottom-space
-              class="full-width datepicker"
-              :model-value="
-                formDataOrdination.leaveEndDate != null
-                  ? date2Thai(formDataOrdination.leaveEndDate)
-                  : null
-              "
-              :label="`${'ลาถึงวันที่'}`"
-              :readonly="!formDataOrdination.leaveStartDate"
-              :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
-        <q-input
-          class="col-12 col-md-2 col-sm-6"
-          dense
-          outlined
-          bg-color="white"
-          ref="leaveTotalRef"
-          for="leaveTotalRef"
-          v-model="formDataOrdination.leaveTotal"
-          label="จำนวนวันที่ลา"
-          readonly
-          hide-bottom-space
-        />
-        <div class="full-width">
-          <div class="q-col-gutter-sm row">
-            <datepicker
-              class="col-12 col-md-4 col-sm-6"
-              menu-class-name="modalfix"
-              v-model="formDataOrdination.leavegovernmentDate"
-              :locale="'th'"
-              autoApply
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-              readonly
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  ref="leavegovernmentDateRef"
-                  dense
-                  bg-color="white"
-                  hide-bottom-space
-                  readonly
-                  class="full-width"
-                  :model-value="
-                    dataStore.dateAppoint != null
-                      ? date2Thai(dataStore.dateAppoint)
-                      : null
-                  "
-                  :label="`${'วันที่เข้ารับราชการ'}`"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--black)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
+				<datepicker
+					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+					menu-class-name="modalfix"
+					v-model="formDataOrdination.leaveEndDate"
+					:locale="'th'"
+					autoApply
+					borderless
+					@update:model-value="updateLeaveTotal, fetchCheck()"
+					:readonly="!formDataOrdination.leaveStartDate"
+					:enableTimePicker="false"
+					:min-date="formDataOrdination.leaveStartDate"
+					week-start="0"
+				>
+					<template #year="{ year }">
+						{{ year + 543 }}
+					</template>
+					<template #year-overlay-value="{ value }">
+						{{ parseInt(value + 543) }}
+					</template>
+					<template #trigger>
+						<q-input
+							outlined
+							dense
+							ref="leaveEndDateRef"
+							bg-color="white"
+							hide-bottom-space
+							class="full-width datepicker"
+							:model-value="formDataOrdination.leaveEndDate != null ? date2Thai(formDataOrdination.leaveEndDate) : null"
+							:label="`${'ลาถึงวันที่'}`"
+							:readonly="!formDataOrdination.leaveStartDate"
+							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+						>
+							<template v-slot:prepend>
+								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
+							</template>
+						</q-input>
+					</template>
+				</datepicker>
+				<q-input
+					class="col-12 col-md-2 col-sm-6"
+					dense
+					outlined
+					bg-color="white"
+					ref="leaveTotalRef"
+					for="leaveTotalRef"
+					v-model="formDataOrdination.leaveTotal"
+					label="จำนวนวันที่ลา"
+					readonly
+					hide-bottom-space
+				/>
+				<div class="full-width">
+					<div class="q-col-gutter-sm row">
+						<datepicker
+							class="col-12 col-md-4 col-sm-6"
+							menu-class-name="modalfix"
+							v-model="formDataOrdination.leavegovernmentDate"
+							:locale="'th'"
+							autoApply
+							borderless
+							:enableTimePicker="false"
+							week-start="0"
+							readonly
+						>
+							<template #year="{ year }">
+								{{ year + 543 }}
+							</template>
+							<template #year-overlay-value="{ value }">
+								{{ parseInt(value + 543) }}
+							</template>
+							<template #trigger>
+								<q-input
+									outlined
+									ref="leavegovernmentDateRef"
+									dense
+									bg-color="white"
+									hide-bottom-space
+									readonly
+									class="full-width"
+									:model-value="dataStore.dateAppoint != null ? date2Thai(dataStore.dateAppoint) : null"
+									:label="`${'วันที่เข้ารับราชการ'}`"
+								>
+									<template v-slot:prepend>
+										<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
+									</template>
+								</q-input>
+							</template>
+						</datepicker>
 
-            <datepicker
-              class="col-12 col-md-4 col-sm-6"
-              menu-class-name="modalfix"
-              v-model="formDataOrdination.leavebirthDate"
-              :locale="'th'"
-              autoApply
-              borderless
-              readonly
-              :enableTimePicker="false"
-              week-start="0"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  ref="leavebirthDateRef"
-                  dense
-                  bg-color="white"
-                  hide-bottom-space
-                  readonly
-                  class="full-width"
-                  :model-value="
-                    dataStore.birthDate != null
-                      ? date2Thai(dataStore.birthDate)
-                      : null
-                  "
-                  :label="`${'วันเดือนปีเกิด'}`"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--black)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-          </div>
-        </div>
+						<datepicker
+							class="col-12 col-md-4 col-sm-6"
+							menu-class-name="modalfix"
+							v-model="formDataOrdination.leavebirthDate"
+							:locale="'th'"
+							autoApply
+							borderless
+							readonly
+							:enableTimePicker="false"
+							week-start="0"
+						>
+							<template #year="{ year }">
+								{{ year + 543 }}
+							</template>
+							<template #year-overlay-value="{ value }">
+								{{ parseInt(value + 543) }}
+							</template>
+							<template #trigger>
+								<q-input
+									outlined
+									ref="leavebirthDateRef"
+									dense
+									bg-color="white"
+									hide-bottom-space
+									readonly
+									class="full-width"
+									:model-value="dataStore.birthDate != null ? date2Thai(dataStore.birthDate) : null"
+									:label="`${'วันเดือนปีเกิด'}`"
+								>
+									<template v-slot:prepend>
+										<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
+									</template>
+								</q-input>
+							</template>
+						</datepicker>
+					</div>
+				</div>
 
-        <div class="q-pl-sm text-weight-bold text-dark col-12">
-          เคยบวชหรือไม่
-        </div>
-        <div class="col-12">
-          <q-radio
-            v-model="formDataOrdination.ordainDayStatus"
-            :val="true"
-            label="เคยบวช"
-            checked-icon="task_alt "
-            hide-bottom-space
-          />
-          <q-radio
-            v-model="formDataOrdination.ordainDayStatus"
-            :val="false"
-            label="ไม่เคยบวช"
-            checked-icon="task_alt"
-            hide-bottom-space
-          />
-        </div>
+				<div class="q-pl-sm text-weight-bold text-dark col-12">เคยบวชหรือไม่</div>
+				<div class="col-12">
+					<q-radio v-model="formDataOrdination.ordainDayStatus" :val="true" label="เคยบวช" checked-icon="task_alt " hide-bottom-space />
+					<q-radio v-model="formDataOrdination.ordainDayStatus" :val="false" label="ไม่เคยบวช" checked-icon="task_alt" hide-bottom-space />
+				</div>
 
-        <div class="text-weight-bold text-dark col-12">สถานที่บวช</div>
-        <datepicker
-          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          v-model="formDataOrdination.ordainDayOrdination"
-          :locale="'th'"
-          autoApply
-          full-width
-          borderless
-          hide-bottom-space
-          :enableTimePicker="false"
-          week-start="0"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              outlined
-              ref="ordainDayOrdinationRef"
-              dense
-              bg-color="white"
-              hide-bottom-space
-              class="full-width datepicker"
-              :model-value="
-                formDataOrdination.ordainDayOrdination != null
-                  ? date2Thai(formDataOrdination.ordainDayOrdination)
-                  : null
-              "
-              :label="`${'วันอุปสมบท'}`"
-              :rules="[(val) => !!val || `${'กรุณาเลือกวันอุปสมบท'}`]"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
+				<div class="text-weight-bold text-dark col-12">สถานที่บวช</div>
+				<datepicker
+					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+					menu-class-name="modalfix"
+					v-model="formDataOrdination.ordainDayOrdination"
+					:locale="'th'"
+					autoApply
+					full-width
+					borderless
+					hide-bottom-space
+					:enableTimePicker="false"
+					week-start="0"
+				>
+					<template #year="{ year }">
+						{{ year + 543 }}
+					</template>
+					<template #year-overlay-value="{ value }">
+						{{ parseInt(value + 543) }}
+					</template>
+					<template #trigger>
+						<q-input
+							outlined
+							ref="ordainDayOrdinationRef"
+							dense
+							bg-color="white"
+							hide-bottom-space
+							class="full-width datepicker"
+							:model-value="formDataOrdination.ordainDayOrdination != null ? date2Thai(formDataOrdination.ordainDayOrdination) : null"
+							:label="`${'วันอุปสมบท'}`"
+							:rules="[val => !!val || `${'กรุณาเลือกวันอุปสมบท'}`]"
+						>
+							<template v-slot:prepend>
+								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
+							</template>
+						</q-input>
+					</template>
+				</datepicker>
 
-        <q-input
-          class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-          dense
-          hide-bottom-space
-          ref="ordainDayLocationNameRef"
-          bg-color="white"
-          outlined
-          full-width
-          v-model="formDataOrdination.ordainDayLocationName"
-          label="ชื่อวัด"
-          :rules="[(val) => !!val || `${'กรุณากรอกชื่อวัด'}`]"
-        />
+				<q-input
+					class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+					dense
+					hide-bottom-space
+					ref="ordainDayLocationNameRef"
+					bg-color="white"
+					outlined
+					full-width
+					v-model="formDataOrdination.ordainDayLocationName"
+					label="ชื่อวัด"
+					:rules="[val => !!val || `${'กรุณากรอกชื่อวัด'}`]"
+				/>
 
-        <q-input
-          class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-          ref="ordainDayLocationNumberRef"
-          dense
-          full-width
-          outlined
-          v-model="formDataOrdination.ordainDayLocationNumber"
-          bg-color="white"
-          mask="(###)-###-####"
-          unmasked-value
-          hide-bottom-space
-          label="หมายเลขโทรศัพท์"
-          :rules="[(val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์'}`]"
-        />
-        <q-input
-          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-          dense
-          ref="ordainDayLocationAddressRef"
-          bg-color="white"
-          outlined
-          hide-bottom-space
-          v-model="formDataOrdination.ordainDayLocationAddress"
-          label="ที่อยู่"
-          :rules="[(val) => !!val || `${'กรุณากรอกที่อยู่'}`]"
-          type="textarea"
-        />
+				<q-input
+					class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+					ref="ordainDayLocationNumberRef"
+					dense
+					full-width
+					outlined
+					v-model="formDataOrdination.ordainDayLocationNumber"
+					bg-color="white"
+					mask="(###)-###-####"
+					unmasked-value
+					hide-bottom-space
+					label="หมายเลขโทรศัพท์"
+					:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์'}`]"
+				/>
+				<q-input
+					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+					dense
+					ref="ordainDayLocationAddressRef"
+					bg-color="white"
+					outlined
+					hide-bottom-space
+					v-model="formDataOrdination.ordainDayLocationAddress"
+					label="ที่อยู่"
+					:rules="[val => !!val || `${'กรุณากรอกที่อยู่'}`]"
+					type="textarea"
+				/>
 
-        <div class="q-pl-sm text-weight-bold text-dark col-12">
-          สถานที่จำพรรษา
-        </div>
-        <q-input
-          class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-          dense
-          ref="ordainDayBuddhistLentNameRef"
-          bg-color="white"
-          hide-bottom-space
-          outlined
-          v-model="formDataOrdination.ordainDayBuddhistLentName"
-          label="ชื่อวัด"
-          :rules="[(val) => !!val || `${'กรุณากรอกชื่อวัด'}`]"
-        />
+				<div class="q-pl-sm text-weight-bold text-dark col-12">สถานที่จำพรรษา</div>
+				<q-input
+					class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+					dense
+					ref="ordainDayBuddhistLentNameRef"
+					bg-color="white"
+					hide-bottom-space
+					outlined
+					v-model="formDataOrdination.ordainDayBuddhistLentName"
+					label="ชื่อวัด"
+					:rules="[val => !!val || `${'กรุณากรอกชื่อวัด'}`]"
+				/>
 
-        <q-input
-          class="col-12 cursor-pointer inputgreen"
-          dense
-          ref="ordainDayBuddhistLentAddressRef"
-          bg-color="white"
-          outlined
-          v-model="formDataOrdination.ordainDayBuddhistLentAddress"
-          label="ที่อยู่"
-          :rules="[(val) => !!val || `${'กรุณากรอกที่อยู่'}`]"
-          type="textarea"
-          hide-bottom-space
-        />
-        <q-input
-          type="textarea"
-          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-          dense
-          bg-color="white"
-          outlined
-          ref="leaveDetailRef"
-          for="leaveDetailRef"
-          v-model="formDataOrdination.leaveDetail"
-          label="รายละเอียด"
-          :readonly="!edit"
-        />
+				<q-input
+					class="col-12 cursor-pointer inputgreen"
+					dense
+					ref="ordainDayBuddhistLentAddressRef"
+					bg-color="white"
+					outlined
+					v-model="formDataOrdination.ordainDayBuddhistLentAddress"
+					label="ที่อยู่"
+					:rules="[val => !!val || `${'กรุณากรอกที่อยู่'}`]"
+					type="textarea"
+					hide-bottom-space
+				/>
+				<q-input
+					type="textarea"
+					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+					dense
+					bg-color="white"
+					outlined
+					ref="leaveDetailRef"
+					for="leaveDetailRef"
+					v-model="formDataOrdination.leaveDetail"
+					label="รายละเอียด"
+					:readonly="!edit"
+				/>
+				<div class="full-width col-12">
+					<div class="q-col-gutter-sm row">
+						<!-- multiple -->
+						<q-file ref="leaveDocumentRef" v-model="formDataOrdination.leaveDocument" @added="fileUploadDoc" dense label="เอกสารประกอบ" multiple outlined bg-color="white" use-chips>
+							<template v-slot:prepend>
+								<q-icon name="attach_file" color="primary" />
+							</template>
+						</q-file>
+						<!-- <div class="col-12" v-if="formDataOrdination.leaveDocument.length == 0">
+							<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
+						</div> -->
+					</div>
+				</div>
+				<div class="col-12" v-if="data">
+					<div class="col-12 col-md-12 col-sm-12">
+						<q-card bordered>
+							<!-- <div class="col-12">
+								<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ{{ leaveDocumentList }} </q-card>
+							</div> -->
+							<q-list separator>
+								<q-item v-for="(document, index) in leaveDocumentList" :key="index" class="q-my-xs">
+									<q-item-section>
+										<q-item-label class="row items-baseline">
+											<div class="col">
+												{{ "เอกสารแนบฉบับที่" + (index + 1) }}
+											</div>
+											<q-btn class="col-6" :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
+												<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+											</q-btn>
+										</q-item-label>
+									</q-item-section>
+								</q-item>
+							</q-list>
+						</q-card>
+					</div>
+				</div>
 
-        <div class="col-12">
-          <!-- multiple -->
-          <q-file
-            ref="leaveDocumentRef"
-            v-model="formDataOrdination.leaveDocument"
-            @added="fileUploadDoc"
-            dense
-            label="เอกสารประกอบ"
-            outlined
-            bg-color="white"
-            use-chips
-          >
-            <template v-slot:prepend>
-              <q-icon name="attach_file" color="primary" />
-            </template>
-          </q-file>
-        </div>
+				<div class="col-12 col-sm-6 row" v-if="!edit">
+					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
+					</div>
+					<q-card bordered flat class="full-width">
+						<q-list separator>
+							<q-item v-for="(file, index) in leaveDocumentList" :key="index" class="q-my-xs">
+								<q-item-section>
+									<q-item-label class="full-width ellipsis">
+										{{ file.name }}
+									</q-item-label>
+									<q-item-label caption> </q-item-label>
+								</q-item-section>
+							</q-item>
+						</q-list>
+					</q-card>
+				</div>
+			</div>
+		</q-card>
 
-        <div class="col-12 row" v-if="!edit">
-          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-            <div class="q-pl-sm text-weight-bold text-dark">
-              เอกสารเพิ่มเติม
-            </div>
-          </div>
-          <q-card bordered flat class="full-width">
-            <q-list separator>
-              <q-item v-for="file in files" :key="file.key" class="q-my-xs">
-                <q-item-section>
-                  <q-item-label class="full-width ellipsis">
-                    {{ file.fileName }}
-                  </q-item-label>
+		<q-separator class="q-mt-sm" />
 
-                  <q-item-label caption> </q-item-label>
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-card>
-        </div>
-      </div>
-    </q-card>
-
-    <q-separator class="q-mt-sm" />
-
-    <div class="row col-12 q-pt-md">
-      <q-space />
-      <q-btn
-        v-if="!props.data || props.data.status == 'DRAFT'"
-        id="onSubmit"
-        type="submit"
-        unelevated
-        dense
-        class="q-px-md items-center btnBlue"
-        label="บันทึก"
-        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
-      >
-      <q-btn
-        v-if="data"
-        id="onSubmit"
-        type="button"
-        unelevated
-        dense
-        class="q-px-md items-center q-ml-sm"
-        color="primary"
-        label="ยื่นใบลา"
-        @click="onConfirm"
-        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
-      >
-    </div>
-  </form>
+		<div class="row col-12 q-pt-md">
+			<q-space />
+			<q-btn v-if="!props.data || props.data.status == 'DRAFT'" id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"
+				><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+			>
+			<q-btn v-if="data" id="onSubmit" type="button" unelevated dense class="q-px-md items-center q-ml-sm" color="primary" label="ยื่นใบลา" @click="onConfirm"
+				><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+			>
+		</div>
+	</form>
 </template>
diff --git a/src/modules/05_leave/components/FormLeave/07_HajjForm.vue b/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
index 3374fda..ce414ee 100644
--- a/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
+++ b/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
@@ -1,439 +1,366 @@
 <script setup lang="ts">
-import { reactive, ref, onMounted } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
-import type { HajiForm } from "@/modules/05_leave/interface/request/AddAbsence";
-import { useLeaveStore } from "@/modules/05_leave/store";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useRouter } from "vue-router";
+import { reactive, ref, onMounted } from "vue"
+import { useCounterMixin } from "@/stores/mixin"
+import { useQuasar } from "quasar"
+import type { HajiForm } from "@/modules/05_leave/interface/request/AddAbsence"
+import { useLeaveStore } from "@/modules/05_leave/store"
+import http from "@/plugins/http"
+import config from "@/app.config"
+import { useRouter } from "vue-router"
 
 /** Use */
-const router = useRouter();
-const dataStore = useLeaveStore();
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const {
-  date2Thai,
-  dialogConfirm,
-  calculateDurationYmd,
-  fails,
-  messageError,
-  success,
-  dateToISO,
-} = mixin;
-const edit = ref<boolean>(true);
-const files = ref<any>(null);
+const router = useRouter()
+const dataStore = useLeaveStore()
+const $q = useQuasar()
+const mixin = useCounterMixin()
+const { date2Thai, dialogConfirm, calculateDurationYmd, fails, messageError, success, dateToISO } = mixin
+const edit = ref<boolean>(true)
+const files = ref<any>(null)
 
 /** ตัวแปร ref สำหรับแสดง validate */
-const leaveWroteRef = ref<object | null>(null);
-const leavegovernmentDateRef = ref<object | null>(null);
-const leaveStartDateRef = ref<object | null>(null);
-const leaveEndDateRef = ref<object | null>(null);
-const leaveDocumentRef = ref<object | null>(null);
+const leaveWroteRef = ref<object | null>(null)
+const leavegovernmentDateRef = ref<object | null>(null)
+const leaveStartDateRef = ref<object | null>(null)
+const leaveEndDateRef = ref<object | null>(null)
+const leaveDocumentRef = ref<object | null>(null)
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
-  data: {
-    type: Array,
-    default: null,
-  },
-  onSubmit: {
-    type: Function,
-    default: () => "",
-  },
-  onConfirm: {
-    type: Function,
-    default: () => "",
-  },
-});
+	data: {
+		type: Object,
+		default: null,
+	},
+	onSubmit: {
+		type: Function,
+		default: () => "",
+	},
+	onConfirm: {
+		type: Function,
+		default: () => "",
+	},
+})
 
 /** ข้อมูล v-model ของฟอร์ม */
 const formDataHaji = reactive<any>({
-  type: dataStore.typeId,
-  leaveWrote: "",
-  leavegovernmentDate: null,
-  leaveStartDate: null,
-  leaveEndDate: null,
-  totalLeave: null,
-  hajjDayStatus: "true",
-  leaveDocument: null,
-});
+	type: dataStore.typeId,
+	leaveWrote: "",
+	leavegovernmentDate: null,
+	leaveStartDate: null,
+	leaveEndDate: null,
+	totalLeave: null,
+	hajjDayStatus: "true",
+	leaveDocument: null,
+})
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const formRef: HajiForm = {
-  leaveWrote: leaveWroteRef,
-  leavegovernmentDate: leavegovernmentDateRef,
-  leaveStartDate: leaveStartDateRef,
-  leaveEndDate: leaveEndDateRef,
-  leaveDocument: leaveDocumentRef,
-};
+	leaveWrote: leaveWroteRef,
+	leavegovernmentDate: leavegovernmentDateRef,
+	leaveStartDate: leaveStartDateRef,
+	leaveEndDate: leaveEndDateRef,
+	leaveDocument: leaveDocumentRef,
+}
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("");
-const fileDocDataUpload = ref<File[]>([]);
+const nameFile = ref<string>("")
+const fileDocDataUpload = ref<File[]>([])
 const fileUploadDoc = async (files: any) => {
-  files.forEach((file: any) => {
-    fileDocDataUpload.value.push(file);
-  });
-};
+	files.forEach((file: any) => {
+		fileDocDataUpload.value.push(file)
+	})
+}
 
 /** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
 function onValidate() {
-  const hasError = [];
-  for (const key in formRef) {
-    if (Object.prototype.hasOwnProperty.call(formRef, key)) {
-      const property = formRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    const formData = new FormData();
-    // if (formDataHaji.leaveDocument.length > 0) {
-    // 	const blob = formDataHaji.leaveDocument.slice(0, formDataHaji.leaveDocument[0].size)
-    // 	const newFile = new File(blob, nameFile.value, {
-    // 		type: formDataHaji.leaveDocument[0].type,
-    // 	})
-    // 	formData.append("leaveDocument", newFile)
-    // }
-    formData.append("leaveDocument", formDataHaji.leaveDocument);
-    formData.append("type", formDataHaji.type);
-    formData.append("leaveStartDate", dateToISO(formDataHaji.leaveStartDate));
-    formData.append("leaveEndDate", dateToISO(formDataHaji.leaveEndDate));
-    formData.append("hajjDayStatus", formDataHaji.hajjDayStatus);
-    formData.append("leaveWrote", formDataHaji.leaveWrote);
-    formData.append("leaveDetail", formDataHaji.leaveDetail);
-    props.onSubmit(formData);
-  }
+	const hasError = []
+	for (const key in formRef) {
+		if (Object.prototype.hasOwnProperty.call(formRef, key)) {
+			const property = formRef[key]
+			if (property.value && typeof property.value.validate === "function") {
+				const isValid = property.value.validate()
+				hasError.push(isValid)
+			}
+		}
+	}
+	if (hasError.every(result => result === true)) {
+		const formData = new FormData()
+		formDataHaji.leaveDocument.forEach((file: File) => {
+			formData.append("leaveDocument", file)
+		})
+		// formData.append("leaveDocument", formDataHaji.leaveDocument);
+		formData.append("type", formDataHaji.type)
+		formData.append("leaveStartDate", dateToISO(formDataHaji.leaveStartDate))
+		formData.append("leaveEndDate", dateToISO(formDataHaji.leaveEndDate))
+		formData.append("hajjDayStatus", formDataHaji.hajjDayStatus)
+		formData.append("leaveWrote", formDataHaji.leaveWrote)
+		formData.append("leaveDetail", formDataHaji.leaveDetail)
+		props.onSubmit(formData)
+	}
 }
 
 /**
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
-const isLeave = ref<boolean>(true);
+const isLeave = ref<boolean>(true)
 async function fetchCheck() {
-  await http
-    .post(config.API.leaveCheck(), {
-      type: dataStore.typeId ?? null,
-      StartLeaveDate: formDataHaji.leaveStartDate ?? null,
-      EndLeaveDate: formDataHaji.leaveEndDate ?? null,
-    })
-    .then((res: any) => {
-      const data = res.data.result;
-      isLeave.value = data.isLeave;
-      if (data.isLeave === true) {
-        // formDataHaji.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-        formDataHaji.leaveTotal = data.totalDate;
-      } else {
-        fails($q, "ไม่สามารถลาได้");
-      }
-    })
-    .catch((e: any) => {
-      messageError($q, e);
-    });
+	await http
+		.post(config.API.leaveCheck(), {
+			type: dataStore.typeId ?? null,
+			StartLeaveDate: formDataHaji.leaveStartDate ?? null,
+			EndLeaveDate: formDataHaji.leaveEndDate ?? null,
+		})
+		.then((res: any) => {
+			const data = res.data.result
+			isLeave.value = data.isLeave
+			if (data.isLeave === true) {
+				// formDataHaji.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
+				formDataHaji.leaveTotal = data.totalDate
+			} else {
+				fails($q, "ไม่สามารถลาได้")
+			}
+		})
+		.catch((e: any) => {
+			messageError($q, e)
+		})
 }
 
 /**
  * function อัพเดทค่า LeaveTotal
  */
 function updateLeaveTotal() {
-  const newLeaveTotal = calculateDurationYmd(
-    formDataHaji.leaveStartDate,
-    formDataHaji.leaveEndDate
-  );
-  formDataHaji.leaveTotal = newLeaveTotal;
+	const newLeaveTotal = calculateDurationYmd(formDataHaji.leaveStartDate, formDataHaji.leaveEndDate)
+	formDataHaji.leaveTotal = newLeaveTotal
 }
 
+const leaveDocumentList = ref<any>()
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 onMounted(() => {
-  if (props.data) {
-    formDataHaji.leaveWrote = props.data.leaveWrote;
-    formDataHaji.leaveTotal = props.data.leaveTotal;
-    formDataHaji.leaveStartDate = props.data.leaveStartDate;
-    formDataHaji.leaveEndDate = props.data.leaveEndDate;
-    formDataHaji.totalLeave = props.data.totalLeave;
-    formDataHaji.hajjDayStatus = props.data.hajjDayStatus;
-    formDataHaji.leaveDetail = props.data.leaveDetail;
-    // formDataHaji.leaveDocument = props.data.leaveDocument;
-  }
-});
+	if (props.data) {
+		formDataHaji.leaveWrote = props.data.leaveWrote
+		formDataHaji.leaveTotal = props.data.leaveTotal
+		formDataHaji.leaveStartDate = props.data.leaveStartDate
+		formDataHaji.leaveEndDate = props.data.leaveEndDate
+		formDataHaji.totalLeave = props.data.totalLeave
+		formDataHaji.hajjDayStatus = props.data.hajjDayStatus
+		formDataHaji.leaveDetail = props.data.leaveDetail
+		leaveDocumentList.value = props.data.leaveDocument
+		// formDataHaji.leaveDocument = props.data.leaveDocument;
+	}
+})
 </script>
 
 <template>
-  <div style="display: flex; align-items: center">
-    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-  </div>
-  <form @submit.prevent="onValidate" class="full-width">
-    <q-card bordered class="q-pa-md bg-grey-1">
-      <div class="row q-pa-sm q-col-gutter-sm">
-        <q-input
-          v-model="formDataHaji.leaveWrote"
-          ref="leaveWroteRef"
-          class="col-12 col-sm-12 cursor-pointer inputgreen"
-          bg-color="white"
-          dense
-          outlined
-          label="เขียนที่"
-          hide-bottom-space
-          :rules="[(val) => !!val || `${'เขียนที่'}`]"
-        />
+	<div style="display: flex; align-items: center">
+		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+	</div>
+	<form @submit.prevent="onValidate" class="full-width">
+		<q-card bordered class="q-pa-md bg-grey-1">
+			<div class="row q-pa-sm q-col-gutter-sm">
+				<q-input
+					v-model="formDataHaji.leaveWrote"
+					ref="leaveWroteRef"
+					class="col-12 col-sm-12 cursor-pointer inputgreen"
+					bg-color="white"
+					dense
+					outlined
+					label="เขียนที่"
+					hide-bottom-space
+					:rules="[val => !!val || `${'เขียนที่'}`]"
+				/>
 
-        <div class="full-width">
-          <div class="q-col-gutter-sm row">
-            <datepicker
-              v-model="formDataHaji.leaveStartDate"
-              class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              autoApply
-              borderless
-              week-start="0"
-              :enableTimePicker="false"
-              :locale="'th'"
-              @update:model-value="formDataHaji.leaveEndDate = null"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  ref="leaveStartDateRef"
-                  bg-color="white"
-                  class="full-width datepicker"
-                  outlined
-                  dense
-                  hide-bottom-space
-                  :label="`${'ลาตั้งแต่วันที่'}`"
-                  :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-                  :model-value="
-                    formDataHaji.leaveStartDate != null
-                      ? date2Thai(formDataHaji.leaveStartDate)
-                      : null
-                  "
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
+				<div class="full-width">
+					<div class="q-col-gutter-sm row">
+						<datepicker
+							v-model="formDataHaji.leaveStartDate"
+							class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+							menu-class-name="modalfix"
+							autoApply
+							borderless
+							week-start="0"
+							:enableTimePicker="false"
+							:locale="'th'"
+							@update:model-value="formDataHaji.leaveEndDate = null"
+						>
+							<template #year="{ year }">
+								{{ year + 543 }}
+							</template>
+							<template #year-overlay-value="{ value }">
+								{{ parseInt(value + 543) }}
+							</template>
+							<template #trigger>
+								<q-input
+									ref="leaveStartDateRef"
+									bg-color="white"
+									class="full-width datepicker"
+									outlined
+									dense
+									hide-bottom-space
+									:label="`${'ลาตั้งแต่วันที่'}`"
+									:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+									:model-value="formDataHaji.leaveStartDate != null ? date2Thai(formDataHaji.leaveStartDate) : null"
+								>
+									<template v-slot:prepend>
+										<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
+									</template>
+								</q-input>
+							</template>
+						</datepicker>
 
-            <datepicker
-              v-model="formDataHaji.leaveEndDate"
-              class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              autoApply
-              borderless
-              week-start="0"
-              :enableTimePicker="false"
-              :locale="'th'"
-              @update:model-value="updateLeaveTotal"
-              :readonly="!formDataHaji.leaveStartDate"
-              :min-date="formDataHaji.leaveStartDate"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  ref="leaveEndDateRef"
-                  class="full-width datepicker"
-                  bg-color="white"
-                  outlined
-                  dense
-                  :readonly="!formDataHaji.leaveStartDate"
-                  hide-bottom-space
-                  :label="`${'ลาถึงวันที่'}`"
-                  @update:model-value="fetchCheck()"
-                  :model-value="
-                    formDataHaji.leaveEndDate != null
-                      ? date2Thai(formDataHaji.leaveEndDate)
-                      : null
-                  "
-                  :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
+						<datepicker
+							v-model="formDataHaji.leaveEndDate"
+							class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+							menu-class-name="modalfix"
+							autoApply
+							borderless
+							week-start="0"
+							:enableTimePicker="false"
+							:locale="'th'"
+							@update:model-value="updateLeaveTotal"
+							:readonly="!formDataHaji.leaveStartDate"
+							:min-date="formDataHaji.leaveStartDate"
+						>
+							<template #year="{ year }">
+								{{ year + 543 }}
+							</template>
+							<template #year-overlay-value="{ value }">
+								{{ parseInt(value + 543) }}
+							</template>
+							<template #trigger>
+								<q-input
+									ref="leaveEndDateRef"
+									class="full-width datepicker"
+									bg-color="white"
+									outlined
+									dense
+									:readonly="!formDataHaji.leaveStartDate"
+									hide-bottom-space
+									:label="`${'ลาถึงวันที่'}`"
+									@update:model-value="fetchCheck()"
+									:model-value="formDataHaji.leaveEndDate != null ? date2Thai(formDataHaji.leaveEndDate) : null"
+									:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+								>
+									<template v-slot:prepend>
+										<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
+									</template>
+								</q-input>
+							</template>
+						</datepicker>
 
-            <q-input
-              class="col-12 col-md-2 col-sm-6"
-              dense
-              outlined
-              bg-color="white"
-              ref="leaveTotalRef"
-              for="leaveTotalRef"
-              v-model="formDataHaji.leaveTotal"
-              label="จำนวนวันที่ลา"
-              readonly
-              hide-bottom-space
-            />
-            <datepicker
-              class="col-12 col-md-4 col-sm-6"
-              menu-class-name="modalfix"
-              autoApply
-              borderless
-              readonly
-              week-start="0"
-              :locale="'th'"
-              :enableTimePicker="false"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  ref="leavegovernmentDateRef"
-                  bg-color="white"
-                  class="full-width"
-                  outlined
-                  dense
-                  readonly
-                  hide-bottom-space
-                  :label="`${'วันที่เข้ารับราชการ'}`"
-                  :model-value="
-                    dataStore.dateAppoint != null
-                      ? date2Thai(dataStore.dateAppoint)
-                      : null
-                  "
-                  :rules="[
-                    (val) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
-                  ]"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--black)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-          </div>
-        </div>
+						<q-input
+							class="col-12 col-md-2 col-sm-6"
+							dense
+							outlined
+							bg-color="white"
+							ref="leaveTotalRef"
+							for="leaveTotalRef"
+							v-model="formDataHaji.leaveTotal"
+							label="จำนวนวันที่ลา"
+							readonly
+							hide-bottom-space
+						/>
+						<datepicker class="col-12 col-md-4 col-sm-6" menu-class-name="modalfix" autoApply borderless readonly week-start="0" :locale="'th'" :enableTimePicker="false">
+							<template #year="{ year }">
+								{{ year + 543 }}
+							</template>
+							<template #year-overlay-value="{ value }">
+								{{ parseInt(value + 543) }}
+							</template>
+							<template #trigger>
+								<q-input
+									ref="leavegovernmentDateRef"
+									bg-color="white"
+									class="full-width"
+									outlined
+									dense
+									readonly
+									hide-bottom-space
+									:label="`${'วันที่เข้ารับราชการ'}`"
+									:model-value="dataStore.dateAppoint != null ? date2Thai(dataStore.dateAppoint) : null"
+									:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
+								>
+									<template v-slot:prepend>
+										<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
+									</template>
+								</q-input>
+							</template>
+						</datepicker>
+					</div>
+				</div>
 
-        <div class="q-pl-sm text-weight-bold text-dark col-12">
-          เคยไปประกอบพิธีฮัจญ์หรือไม่
-        </div>
-        <div class="col-12">
-          <q-radio
-            v-model="formDataHaji.hajjDayStatus"
-            :val="true"
-            checked-icon="task_alt"
-            label="เคย"
-          />
-          <q-radio
-            v-model="formDataHaji.hajjDayStatus"
-            :val="false"
-            checked-icon="task_alt"
-            label="ไม่เคยไปประกอบพิธีฮัจญ์"
-          />
-        </div>
+				<div class="q-pl-sm text-weight-bold text-dark col-12">เคยไปประกอบพิธีฮัจญ์หรือไม่</div>
+				<div class="col-12">
+					<q-radio v-model="formDataHaji.hajjDayStatus" :val="'true'" checked-icon="task_alt" label="เคย" />
+					<q-radio v-model="formDataHaji.hajjDayStatus" :val="'false'" checked-icon="task_alt" label="ไม่เคยไปประกอบพิธีฮัจญ์" />
+				</div>
 
-        <q-input
-          v-model="formDataHaji.leaveDetail"
-          class="col-12 q-mt-sm cursor-pointer inputgreen"
-          bg-color="white"
-          dense
-          outlined
-          type="textarea"
-          label="รายละเอียด"
-        />
+				<q-input v-model="formDataHaji.leaveDetail" class="col-12 q-mt-sm cursor-pointer inputgreen" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
+				<div class="full-width">
+					<div class="q-col-gutter-sm row">
+						<!-- multiple -->
+						<q-file v-model="formDataHaji.leaveDocument" multiple bg-color="white" label="เอกสารประกอบ" use-chips @added="fileUploadDoc" dense outlined hide-bottom-space>
+							<template v-slot:prepend>
+								<q-icon name="attach_file" color="primary" />
+							</template>
+						</q-file>
+						<!-- <div class="col-12" v-if="formDataHaji.leaveDocument.length == 0">
+							<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
+						</div> -->
+					</div>
+				</div>
+				<div class="col-12" v-if="data">
+					<div class="col-12 col-md-12 col-sm-12">
+						<q-card bordered>
+							<!-- <div class="col-12">
+								<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ{{ leaveDocumentList }} </q-card>
+							</div> -->
+							<q-list separator>
+								<q-item v-for="(document, index) in leaveDocumentList" :key="index" class="q-my-xs">
+									<q-item-section>
+										<q-item-label class="row items-baseline">
+											<div class="col">
+												{{ "เอกสารแนบฉบับที่" + (index + 1) }}
+											</div>
+											<q-btn class="col-6" :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
+												<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+											</q-btn>
+										</q-item-label>
+									</q-item-section>
+								</q-item>
+							</q-list>
+						</q-card>
+					</div>
+				</div>
 
-        <div class="col-12">
-          <!-- multiple -->
-          <q-file
-            v-model="formDataHaji.leaveDocument"
-            bg-color="white"
-            label="เอกสารประกอบ"
-            use-chips
-            @added="fileUploadDoc"
-            dense
-            outlined
-            
-            hide-bottom-space
-          >
-            <template v-slot:prepend>
-              <q-icon name="attach_file" color="primary" />
-            </template>
-          </q-file>
-        </div>
-
-        <div class="col-12 row" v-if="!edit">
-          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-            <div class="q-pl-sm text-weight-bold text-dark">
-              เอกสารเพิ่มเติม
-            </div>
-          </div>
-          <q-card bordered flat class="full-width">
-            <q-list separator>
-              <q-item v-for="file in files" :key="file.key" class="q-my-xs">
-                <q-item-section>
-                  <q-item-label class="full-width ellipsis">
-                    {{ file.fileName }}
-                  </q-item-label>
-
-                  <q-item-label caption> </q-item-label>
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-card>
-        </div>
-      </div>
-    </q-card>
-    <q-separator class="q-mt-sm" />
-    <div class="row col-12 q-pt-md">
-      <q-space />
-      <q-btn
-        v-if="!props.data || props.data.status == 'DRAFT'"
-        id="onSubmit"
-        type="submit"
-        unelevated
-        dense
-        class="q-px-md items-center btnBlue"
-        label="บันทึก"
-        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
-      >
-      <q-btn
-        v-if="data"
-        id="onSubmit"
-        type="button"
-        unelevated
-        dense
-        class="q-px-md items-center q-ml-sm"
-        color="primary"
-        label="ยื่นใบลา"
-        @click="onConfirm"
-        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
-      >
-    </div>
-  </form>
+				<div class="col-12 col-sm-6 row" v-if="!edit">
+					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
+					</div>
+					<q-card bordered flat class="full-width">
+						<q-list separator>
+							<q-item v-for="(file, index) in leaveDocumentList" :key="index" class="q-my-xs">
+								<q-item-section>
+									<q-item-label class="full-width ellipsis">
+										{{ file.name }}
+									</q-item-label>
+									<q-item-label caption> </q-item-label>
+								</q-item-section>
+							</q-item>
+						</q-list>
+					</q-card>
+				</div>
+			</div>
+		</q-card>
+		<q-separator class="q-mt-sm" />
+		<div class="row col-12 q-pt-md">
+			<q-space />
+			<q-btn v-if="!props.data || props.data.status == 'DRAFT'" id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"
+				><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+			>
+			<q-btn v-if="data" id="onSubmit" type="button" unelevated dense class="q-px-md items-center q-ml-sm" color="primary" label="ยื่นใบลา" @click="onConfirm"
+				><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+			>
+		</div>
+	</form>
 </template>
diff --git a/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue b/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
index 05c09e1..88fbd5d 100644
--- a/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
+++ b/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
@@ -1,495 +1,438 @@
 <script setup lang="ts">
-import { reactive, ref, onMounted } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
-import type { MilitaryForm } from "@/modules/05_leave/interface/request/AddAbsence";
-import { useLeaveStore } from "@/modules/05_leave/store";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useRouter } from "vue-router";
+import { reactive, ref, onMounted } from "vue"
+import { useCounterMixin } from "@/stores/mixin"
+import { useQuasar } from "quasar"
+import type { MilitaryForm } from "@/modules/05_leave/interface/request/AddAbsence"
+import { useLeaveStore } from "@/modules/05_leave/store"
+import http from "@/plugins/http"
+import config from "@/app.config"
+import { useRouter } from "vue-router"
 
 /** Use */
-const router = useRouter();
-const dataStore = useLeaveStore();
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const {
-  date2Thai,
-  dialogConfirm,
-  calculateDurationYmd,
-  dateToISO,
-  success,
-  messageError,
-  fails,
-} = mixin;
-const edit = ref<boolean>(true);
-const files = ref<any>(null);
+const router = useRouter()
+const dataStore = useLeaveStore()
+const $q = useQuasar()
+const mixin = useCounterMixin()
+const { date2Thai, dialogConfirm, calculateDurationYmd, dateToISO, success, messageError, fails } = mixin
+const edit = ref<boolean>(true)
+const files = ref<any>(null)
 
 /** ตัวแปร ref สำหรับแสดง validate */
-const leaveStartDateRef = ref<object | null>(null);
-const leaveEndDateRef = ref<object | null>(null);
-const leaveWroteRef = ref<object | null>(null);
-const absentDaySummonRef = ref<object | null>(null);
-const absentDayLocationRef = ref<object | null>(null);
-const absentDayRegistorDateRef = ref<object | null>(null);
-const absentDayGetInRef = ref<object | null>(null);
-const absentDayAtRef = ref<object | null>(null);
-const leaveDetailRef = ref<object | null>(null);
+const leaveStartDateRef = ref<object | null>(null)
+const leaveEndDateRef = ref<object | null>(null)
+const leaveWroteRef = ref<object | null>(null)
+const absentDaySummonRef = ref<object | null>(null)
+const absentDayLocationRef = ref<object | null>(null)
+const absentDayRegistorDateRef = ref<object | null>(null)
+const absentDayGetInRef = ref<object | null>(null)
+const absentDayAtRef = ref<object | null>(null)
+const leaveDetailRef = ref<object | null>(null)
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
-  data: {
-    type: Array,
-    default: null,
-  },
-  onSubmit: {
-    type: Function,
-    default: () => "",
-  },
-  onConfirm: {
-    type: Function,
-    default: () => "",
-  },
-});
+	data: {
+		type: Object,
+		default: null,
+	},
+	onSubmit: {
+		type: Function,
+		default: () => "",
+	},
+	onConfirm: {
+		type: Function,
+		default: () => "",
+	},
+})
 
 /** ข้อมูล v-model ของฟอร์ม */
 const formDataMilitary = reactive<any>({
-  type: dataStore.typeId,
-  leaveStartDate: null,
-  leaveEndDate: null,
-  leaveTotal: 0,
-  leaveDocument: null,
-  leaveWrote: "",
-  absentDaySummon: "",
-  absentDayLocation: "",
-  absentDayRegistorDate: null,
-  absentDayGetIn: "",
-  absentDayAt: "",
-  leaveDetail: "",
-});
+	type: dataStore.typeId,
+	leaveStartDate: null,
+	leaveEndDate: null,
+	leaveTotal: 0,
+	leaveDocument: null,
+	leaveWrote: "",
+	absentDaySummon: "",
+	absentDayLocation: "",
+	absentDayRegistorDate: null,
+	absentDayGetIn: "",
+	absentDayAt: "",
+	leaveDetail: "",
+})
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("");
-const fileDocDataUpload = ref<File[]>([]);
+const nameFile = ref<string>("")
+const fileDocDataUpload = ref<File[]>([])
 const fileUploadDoc = async (files: any) => {
-  files.forEach((file: any) => {
-    fileDocDataUpload.value.push(file);
-  });
-};
+	files.forEach((file: any) => {
+		fileDocDataUpload.value.push(file)
+	})
+}
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const formRef: MilitaryForm = {
-  leaveStartDate: leaveStartDateRef,
-  leaveEndDate: leaveEndDateRef,
-  leaveWrote: leaveWroteRef,
-  absentDaySummon: absentDaySummonRef,
-  absentDayLocation: absentDayLocationRef,
-  absentDayRegistorDate: absentDayRegistorDateRef,
-  absentDayGetIn: absentDayGetInRef,
-  absentDayAt: absentDayAtRef,
-  leaveDetail: leaveDetailRef,
-};
+	leaveStartDate: leaveStartDateRef,
+	leaveEndDate: leaveEndDateRef,
+	leaveWrote: leaveWroteRef,
+	absentDaySummon: absentDaySummonRef,
+	absentDayLocation: absentDayLocationRef,
+	absentDayRegistorDate: absentDayRegistorDateRef,
+	absentDayGetIn: absentDayGetInRef,
+	absentDayAt: absentDayAtRef,
+	leaveDetail: leaveDetailRef,
+}
 
 /** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
 function onValidate() {
-  const hasError = [];
-  for (const key in formRef) {
-    if (Object.prototype.hasOwnProperty.call(formRef, key)) {
-      const property = formRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    const formData = new FormData();
-    // if (formDataMilitary.leaveDocument.length > 0) {
-    // 	const blob = formDataMilitary.leaveDocument.slice(0, formDataMilitary.leaveDocument[0].size)
-    // 	const newFile = new File(blob, nameFile.value, {
-    // 		type: formDataMilitary.leaveDocument[0].type,
-    // 	})
-    // 	formData.append("leaveDocument", newFile)
-    // }
-    formData.append("leaveDocument", formDataMilitary.leaveDocument);
-    formData.append("type", formDataMilitary.type);
-    formData.append(
-      "leaveStartDate",
-      dateToISO(formDataMilitary.leaveStartDate)
-    );
-    formData.append("leaveEndDate", dateToISO(formDataMilitary.leaveEndDate));
-    formData.append("absentDaySummon", formDataMilitary.absentDaySummon);
-    formData.append("absentDayLocation", formDataMilitary.absentDayLocation);
-    formData.append(
-      "absentDayRegistorDate",
-      dateToISO(formDataMilitary.absentDayRegistorDate)
-    );
-    formData.append("absentDayGetIn", formDataMilitary.absentDayGetIn);
-    formData.append("absentDayAt", formDataMilitary.absentDayAt);
-    formData.append("leaveWrote", formDataMilitary.leaveWrote);
-    formData.append("leaveDetail", formDataMilitary.leaveDetail);
-    props.onSubmit(formData);
-  }
+	const hasError = []
+	for (const key in formRef) {
+		if (Object.prototype.hasOwnProperty.call(formRef, key)) {
+			const property = formRef[key]
+			if (property.value && typeof property.value.validate === "function") {
+				const isValid = property.value.validate()
+				hasError.push(isValid)
+			}
+		}
+	}
+	if (hasError.every(result => result === true)) {
+		const formData = new FormData()
+		formDataMilitary.leaveDocument.forEach((file: File) => {
+			formData.append("leaveDocument", file)
+		})
+		// formData.append("leaveDocument", formDataMilitary.leaveDocument);
+		formData.append("type", formDataMilitary.type)
+		formData.append("leaveStartDate", dateToISO(formDataMilitary.leaveStartDate))
+		formData.append("leaveEndDate", dateToISO(formDataMilitary.leaveEndDate))
+		formData.append("absentDaySummon", formDataMilitary.absentDaySummon)
+		formData.append("absentDayLocation", formDataMilitary.absentDayLocation)
+		formData.append("absentDayRegistorDate", dateToISO(formDataMilitary.absentDayRegistorDate))
+		formData.append("absentDayGetIn", formDataMilitary.absentDayGetIn)
+		formData.append("absentDayAt", formDataMilitary.absentDayAt)
+		formData.append("leaveWrote", formDataMilitary.leaveWrote)
+		formData.append("leaveDetail", formDataMilitary.leaveDetail)
+		props.onSubmit(formData)
+	}
 }
 
 /**
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
-const isLeave = ref<boolean>(true);
+const isLeave = ref<boolean>(true)
 async function fetchCheck() {
-  await http
-    .post(config.API.leaveCheck(), {
-      type: dataStore.typeId ?? null,
-      StartLeaveDate: formDataMilitary.leaveStartDate ?? null,
-      EndLeaveDate: formDataMilitary.leaveEndDate ?? null,
-    })
-    .then((res: any) => {
-      const data = res.data.result;
-      isLeave.value = data.isLeave;
-      if (data.isLeave === true) {
-        // formDataMilitary.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-        formDataMilitary.leaveTotal = data.totalDate;
-      } else {
-        fails($q, "ไม่สามารถลาได้");
-      }
-    })
-    .catch((e: any) => {
-      messageError($q, e);
-    });
+	await http
+		.post(config.API.leaveCheck(), {
+			type: dataStore.typeId ?? null,
+			StartLeaveDate: formDataMilitary.leaveStartDate ?? null,
+			EndLeaveDate: formDataMilitary.leaveEndDate ?? null,
+		})
+		.then((res: any) => {
+			const data = res.data.result
+			isLeave.value = data.isLeave
+			if (data.isLeave === true) {
+				// formDataMilitary.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
+				formDataMilitary.leaveTotal = data.totalDate
+			} else {
+				fails($q, "ไม่สามารถลาได้")
+			}
+		})
+		.catch((e: any) => {
+			messageError($q, e)
+		})
 }
 
 /**
  * function อัพเดทค่า LeaveTotal
  */
 function updateLeaveTotal() {
-  const newLeaveTotal = calculateDurationYmd(
-    formDataMilitary.leaveStartDate,
-    formDataMilitary.leaveEndDate
-  );
-  formDataMilitary.leaveTotal = newLeaveTotal;
-  console.log("test");
+	const newLeaveTotal = calculateDurationYmd(formDataMilitary.leaveStartDate, formDataMilitary.leaveEndDate)
+	formDataMilitary.leaveTotal = newLeaveTotal
+	console.log("test")
 }
 
+const leaveDocumentList = ref<any>()
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 onMounted(() => {
-  if (props.data) {
-    formDataMilitary.leaveWrote = props.data.leaveWrote;
-    formDataMilitary.leaveStartDate = props.data.leaveStartDate;
-    formDataMilitary.leaveEndDate = props.data.leaveEndDate;
-    formDataMilitary.leaveTotal = props.data.leaveTotal;
-    formDataMilitary.absentDaySummon = props.data.absentDaySummon;
-    formDataMilitary.absentDayLocation = props.data.absentDayLocation;
-    formDataMilitary.absentDayRegistorDate = props.data.absentDayRegistorDate;
-    formDataMilitary.absentDayGetIn = props.data.absentDayGetIn;
-    formDataMilitary.absentDayAt = props.data.absentDayAt;
-    formDataMilitary.leaveDetail = props.data.leaveDetail;
-    // formDataMilitary.leaveDocument = props.data.leaveDocument;
-  }
-});
+	if (props.data) {
+		formDataMilitary.leaveWrote = props.data.leaveWrote
+		formDataMilitary.leaveStartDate = props.data.leaveStartDate
+		formDataMilitary.leaveEndDate = props.data.leaveEndDate
+		formDataMilitary.leaveTotal = props.data.leaveTotal
+		formDataMilitary.absentDaySummon = props.data.absentDaySummon
+		formDataMilitary.absentDayLocation = props.data.absentDayLocation
+		formDataMilitary.absentDayRegistorDate = props.data.absentDayRegistorDate
+		formDataMilitary.absentDayGetIn = props.data.absentDayGetIn
+		formDataMilitary.absentDayAt = props.data.absentDayAt
+		formDataMilitary.leaveDetail = props.data.leaveDetail
+		leaveDocumentList.value = props.data.leaveDocument
+		// formDataMilitary.leaveDocument = props.data.leaveDocument;
+	}
+})
 </script>
 
 <template>
-  <div style="display: flex; align-items: center">
-    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-  </div>
-  <form @submit.prevent="onValidate">
-    <q-card bordered class="q-pa-md bg-grey-1">
-      <div class="row q-pa-sm q-col-gutter-sm">
-        <q-input
-          ref="leaveWroteRef"
-          class="col-12 col-sm-12 cursor-pointer inputgreen"
-          dense
-          outlined
-          bg-color="white"
-          hide-bottom-space
-          v-model="formDataMilitary.leaveWrote"
-          label="เขียนที่"
-          :rules="[(val) => !!val || `${'เขียนที่'}`]"
-        />
+	<div style="display: flex; align-items: center">
+		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+	</div>
+	<form @submit.prevent="onValidate">
+		<q-card bordered class="q-pa-md bg-grey-1">
+			<div class="row q-pa-sm q-col-gutter-sm">
+				<q-input
+					ref="leaveWroteRef"
+					class="col-12 col-sm-12 cursor-pointer inputgreen"
+					dense
+					outlined
+					bg-color="white"
+					hide-bottom-space
+					v-model="formDataMilitary.leaveWrote"
+					label="เขียนที่"
+					:rules="[val => !!val || `${'เขียนที่'}`]"
+				/>
 
-        <datepicker
-          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          v-model="formDataMilitary.leaveStartDate"
-          :locale="'th'"
-          autoApply
-          borderless
-          :enableTimePicker="false"
-          week-start="0"
-          @update:model-value="formDataMilitary.leaveEndDate = null"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              outlined
-              bg-color="white"
-              dense
-              ref="leaveStartDateRef"
-              hide-bottom-space
-              class="full-width datepicker"
-              :model-value="
-                formDataMilitary.leaveStartDate != null
-                  ? date2Thai(formDataMilitary.leaveStartDate)
-                  : null
-              "
-              :label="`${'ลาตั้งแต่วันที่'}`"
-              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
+				<datepicker
+					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+					menu-class-name="modalfix"
+					v-model="formDataMilitary.leaveStartDate"
+					:locale="'th'"
+					autoApply
+					borderless
+					:enableTimePicker="false"
+					week-start="0"
+					@update:model-value="formDataMilitary.leaveEndDate = null"
+				>
+					<template #year="{ year }">
+						{{ year + 543 }}
+					</template>
+					<template #year-overlay-value="{ value }">
+						{{ parseInt(value + 543) }}
+					</template>
+					<template #trigger>
+						<q-input
+							outlined
+							bg-color="white"
+							dense
+							ref="leaveStartDateRef"
+							hide-bottom-space
+							class="full-width datepicker"
+							:model-value="formDataMilitary.leaveStartDate != null ? date2Thai(formDataMilitary.leaveStartDate) : null"
+							:label="`${'ลาตั้งแต่วันที่'}`"
+							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+						>
+							<template v-slot:prepend>
+								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
+							</template>
+						</q-input>
+					</template>
+				</datepicker>
 
-        <datepicker
-          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          v-model="formDataMilitary.leaveEndDate"
-          :locale="'th'"
-          autoApply
-          borderless
-          :enableTimePicker="false"
-          week-start="0"
-          @update:model-value="updateLeaveTotal, fetchCheck()"
-          :readonly="!formDataMilitary.leaveStartDate"
-          :min-date="formDataMilitary.leaveStartDate"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              outlined
-              dense
-              ref="leaveEndDateRef"
-              bg-color="white"
-              hide-bottom-space
-              :readonly="!formDataMilitary.leaveStartDate"
-              class="full-width datepicker"
-              :model-value="
-                formDataMilitary.leaveEndDate != null
-                  ? date2Thai(formDataMilitary.leaveEndDate)
-                  : null
-              "
-              :label="`${'ลาถึงวันที่'}`"
-              :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
+				<datepicker
+					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+					menu-class-name="modalfix"
+					v-model="formDataMilitary.leaveEndDate"
+					:locale="'th'"
+					autoApply
+					borderless
+					:enableTimePicker="false"
+					week-start="0"
+					@update:model-value="updateLeaveTotal, fetchCheck()"
+					:readonly="!formDataMilitary.leaveStartDate"
+					:min-date="formDataMilitary.leaveStartDate"
+				>
+					<template #year="{ year }">
+						{{ year + 543 }}
+					</template>
+					<template #year-overlay-value="{ value }">
+						{{ parseInt(value + 543) }}
+					</template>
+					<template #trigger>
+						<q-input
+							outlined
+							dense
+							ref="leaveEndDateRef"
+							bg-color="white"
+							hide-bottom-space
+							:readonly="!formDataMilitary.leaveStartDate"
+							class="full-width datepicker"
+							:model-value="formDataMilitary.leaveEndDate != null ? date2Thai(formDataMilitary.leaveEndDate) : null"
+							:label="`${'ลาถึงวันที่'}`"
+							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+						>
+							<template v-slot:prepend>
+								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
+							</template>
+						</q-input>
+					</template>
+				</datepicker>
 
-        <q-input
-          class="col-12 col-md-2 col-sm-6"
-          dense
-          outlined
-          bg-color="white"
-          ref="leaveTotalRef"
-          for="leaveTotalRef"
-          v-model="formDataMilitary.leaveTotal"
-          label="จำนวนวันที่ลา"
-          readonly
-          hide-bottom-space
-        />
-        <div class="full-width">
-          <div class="q-col-gutter-sm row">
-            <q-input
-              ref="absentDaySummonRef"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-              dense
-              bg-color="white"
-              outlined
-              v-model="formDataMilitary.absentDaySummon"
-              label="ได้รับหมายเรียกของ"
-              hide-bottom-space
-              :rules="[(val) => !!val || `${'กรุณากรอกได้รับหมายเรียกของ'}`]"
-            />
+				<q-input
+					class="col-12 col-md-2 col-sm-6"
+					dense
+					outlined
+					bg-color="white"
+					ref="leaveTotalRef"
+					for="leaveTotalRef"
+					v-model="formDataMilitary.leaveTotal"
+					label="จำนวนวันที่ลา"
+					readonly
+					hide-bottom-space
+				/>
+				<div class="full-width">
+					<div class="q-col-gutter-sm row">
+						<q-input
+							ref="absentDaySummonRef"
+							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+							dense
+							bg-color="white"
+							outlined
+							v-model="formDataMilitary.absentDaySummon"
+							label="ได้รับหมายเรียกของ"
+							hide-bottom-space
+							:rules="[val => !!val || `${'กรุณากรอกได้รับหมายเรียกของ'}`]"
+						/>
 
-            <q-input
-              ref="atRef"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-              dense
-              bg-color="white"
-              outlined
-              v-model="formDataMilitary.absentDayLocation"
-              label="ที่"
-              hide-bottom-space
-              :rules="[(val) => !!val || `${'กรุณากรอกที่'}`]"
-            />
-          </div>
-        </div>
+						<q-input
+							ref="atRef"
+							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+							dense
+							bg-color="white"
+							outlined
+							v-model="formDataMilitary.absentDayLocation"
+							label="ที่"
+							hide-bottom-space
+							:rules="[val => !!val || `${'กรุณากรอกที่'}`]"
+						/>
+					</div>
+				</div>
 
-        <div class="full-width">
-          <div class="q-col-gutter-sm row">
-            <datepicker
-              class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-              menu-class-name="modalfix"
-              v-model="formDataMilitary.absentDayRegistorDate"
-              :locale="'th'"
-              autoApply
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  ref="absentDayRegistorDateRef"
-                  bg-color="white"
-                  hide-bottom-space
-                  class="full-width datepicker"
-                  :model-value="
-                    formDataMilitary.absentDayRegistorDate != null
-                      ? date2Thai(formDataMilitary.absentDayRegistorDate)
-                      : null
-                  "
-                  :label="`${'ลงวันที่'}`"
-                  :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--q-primary)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
+				<div class="full-width">
+					<div class="q-col-gutter-sm row">
+						<datepicker
+							class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+							menu-class-name="modalfix"
+							v-model="formDataMilitary.absentDayRegistorDate"
+							:locale="'th'"
+							autoApply
+							borderless
+							:enableTimePicker="false"
+							week-start="0"
+						>
+							<template #year="{ year }">
+								{{ year + 543 }}
+							</template>
+							<template #year-overlay-value="{ value }">
+								{{ parseInt(value + 543) }}
+							</template>
+							<template #trigger>
+								<q-input
+									outlined
+									dense
+									ref="absentDayRegistorDateRef"
+									bg-color="white"
+									hide-bottom-space
+									class="full-width datepicker"
+									:model-value="formDataMilitary.absentDayRegistorDate != null ? date2Thai(formDataMilitary.absentDayRegistorDate) : null"
+									:label="`${'ลงวันที่'}`"
+									:rules="[val => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+								>
+									<template v-slot:prepend>
+										<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
+									</template>
+								</q-input>
+							</template>
+						</datepicker>
 
-            <q-input
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-              dense
-              bg-color="white"
-              ref="absentDayGetInRef"
-              outlined
-              v-model="formDataMilitary.absentDayGetIn"
-              label="ให้เข้ารับการ"
-              hide-bottom-space
-              :rules="[(val) => !!val || `${'กรุณากรอกให้เข้ารับการ'}`]"
-            />
+						<q-input
+							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+							dense
+							bg-color="white"
+							ref="absentDayGetInRef"
+							outlined
+							v-model="formDataMilitary.absentDayGetIn"
+							label="ให้เข้ารับการ"
+							hide-bottom-space
+							:rules="[val => !!val || `${'กรุณากรอกให้เข้ารับการ'}`]"
+						/>
 
-            <q-input
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-              dense
-              bg-color="white"
-              outlined
-              ref="absentDayAtRef"
-              v-model="formDataMilitary.absentDayAt"
-              label="ณ ที่"
-              hide-bottom-space
-              :rules="[(val) => !!val || `${'กรุณากรอก ณ ที่'}`]"
-            />
-          </div>
-        </div>
+						<q-input
+							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+							dense
+							bg-color="white"
+							outlined
+							ref="absentDayAtRef"
+							v-model="formDataMilitary.absentDayAt"
+							label="ณ ที่"
+							hide-bottom-space
+							:rules="[val => !!val || `${'กรุณากรอก ณ ที่'}`]"
+						/>
+					</div>
+				</div>
 
-        <q-input
-          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-          dense
-          bg-color="white"
-          outlined
-          v-model="formDataMilitary.leaveDetail"
-          type="textarea"
-          label="รายละเอียด"
-        />
+				<q-input class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" dense bg-color="white" outlined v-model="formDataMilitary.leaveDetail" type="textarea" label="รายละเอียด" />
 
-        <div class="col-12">
-          <!-- multiple -->
-          <q-file
-            v-model="formDataMilitary.leaveDocument"
-            dense
-            label="เอกสารประกอบ"
-            outlined
-            bg-color="white"
-            
-            hide-bottom-space
-            use-chips
-            @added="fileUploadDoc"
-          >
-            <template v-slot:prepend>
-              <q-icon name="attach_file" color="primary" />
-            </template>
-          </q-file>
-        </div>
+				<div class="col-12">
+					<!-- multiple -->
+					<q-file v-model="formDataMilitary.leaveDocument" multiple dense label="เอกสารประกอบ" outlined bg-color="white" hide-bottom-space use-chips @added="fileUploadDoc">
+						<template v-slot:prepend>
+							<q-icon name="attach_file" color="primary" />
+						</template>
+					</q-file>
+					<div class="col-12" v-if="formDataMilitary.leaveDocument.length == 0">
+						<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
+					</div>
+					<div class="col-12" v-if="data">
+						<div class="col-12 col-md-12 col-sm-12">
+							<q-card bordered>
+								<!-- <div class="col-12">
+								<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ{{ leaveDocumentList }} </q-card>
+							</div> -->
+								<q-list separator>
+									<q-item v-for="(document, index) in leaveDocumentList" :key="index" class="q-my-xs">
+										<q-item-section>
+											<q-item-label class="row items-baseline">
+												<div class="col">
+													{{ "เอกสารแนบฉบับที่" + (index + 1) }}
+												</div>
+												<q-btn class="col-6" :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
+													<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+												</q-btn>
+											</q-item-label>
+										</q-item-section>
+									</q-item>
+								</q-list>
+							</q-card>
+						</div>
+					</div>
+				</div>
 
-        <div class="col-12 row" v-if="!edit">
-          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-            <div class="q-pl-sm text-weight-bold text-dark">
-              เอกสารเพิ่มเติม
-            </div>
-          </div>
-          <q-card bordered flat class="full-width">
-            <q-list separator>
-              <q-item v-for="file in files" :key="file.key" class="q-my-xs">
-                <q-item-section>
-                  <q-item-label class="full-width ellipsis">
-                    {{ file.fileName }}
-                  </q-item-label>
-
-                  <q-item-label caption> </q-item-label>
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-card>
-        </div>
-      </div>
-    </q-card>
-    <q-separator class="q-mt-sm" />
-    <div class="row col-12 q-pt-md">
-      <q-space />
-      <q-btn
-        v-if="!props.data || props.data.status == 'DRAFT'"
-        id="onSubmit"
-        type="submit"
-        unelevated
-        dense
-        class="q-px-md items-center btnBlue"
-        label="บันทึก"
-        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
-      >
-      <q-btn
-        v-if="data"
-        id="onSubmit"
-        type="button"
-        unelevated
-        dense
-        class="q-px-md items-center q-ml-sm"
-        color="primary"
-        label="ยื่นใบลา"
-        @click="onConfirm"
-        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
-      >
-    </div>
-  </form>
+				<div class="col-12 col-sm-6 row" v-if="!edit">
+					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
+					</div>
+					<q-card bordered flat class="full-width">
+						<q-list separator>
+							<q-item v-for="(file, index) in leaveDocumentList" :key="index" class="q-my-xs">
+								<q-item-section>
+									<q-item-label class="full-width ellipsis">
+										{{ file.name }}
+									</q-item-label>
+									<q-item-label caption> </q-item-label>
+								</q-item-section>
+							</q-item>
+						</q-list>
+					</q-card>
+				</div>
+			</div>
+		</q-card>
+		<q-separator class="q-mt-sm" />
+		<div class="row col-12 q-pt-md">
+			<q-space />
+			<q-btn v-if="!props.data || props.data.status == 'DRAFT'" id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"
+				><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+			>
+			<q-btn v-if="data" id="onSubmit" type="button" unelevated dense class="q-px-md items-center q-ml-sm" color="primary" label="ยื่นใบลา" @click="onConfirm"
+				><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+			>
+		</div>
+	</form>
 </template>
diff --git a/src/modules/05_leave/components/FormLeave/09_StudyForm.vue b/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
index 3bf2e7a..29a53b4 100644
--- a/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
+++ b/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
@@ -1,640 +1,538 @@
 <script setup lang="ts">
-import { reactive, ref, computed, onMounted } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
-import type { studyDaySubjectForm } from "@/modules/05_leave/interface/request/AddAbsence";
-import { useLeaveStore } from "@/modules/05_leave/store";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useRouter } from "vue-router";
+import { reactive, ref, computed, onMounted } from "vue"
+import { useCounterMixin } from "@/stores/mixin"
+import { useQuasar } from "quasar"
+import type { studyDaySubjectForm } from "@/modules/05_leave/interface/request/AddAbsence"
+import { useLeaveStore } from "@/modules/05_leave/store"
+import http from "@/plugins/http"
+import config from "@/app.config"
+import { useRouter } from "vue-router"
 
 /** Use */
-const dataStore = useLeaveStore();
-const $q = useQuasar();
-const router = useRouter();
-const mixin = useCounterMixin();
-const {
-  date2Thai,
-  dialogConfirm,
-  calculateDurationYmd,
-  fails,
-  dateToISO,
-  success,
-  messageError,
-  arabicNumberToText,
-} = mixin;
-const edit = ref<boolean>(true);
-const files = ref<any>(null);
+const dataStore = useLeaveStore()
+const $q = useQuasar()
+const router = useRouter()
+const mixin = useCounterMixin()
+const { date2Thai, dialogConfirm, calculateDurationYmd, fails, dateToISO, success, messageError, arabicNumberToText } = mixin
+const edit = ref<boolean>(true)
+const files = ref<any>(null)
 
 /** ตัวแปร ref สำหรับแสดง validate */
-const leaveStartDateRef = ref<object | null>(null);
-const leaveEndDateRef = ref<object | null>(null);
-const leavebirthDateRef = ref<object | null>(null);
-const leavegovernmentDateRef = ref<object | null>(null);
-const leaveSalaryRef = ref<object | null>(null);
-const leaveNumberRef = ref<object | null>(null);
-const leaveAddressRef = ref<object | null>(null);
-const studyDayScholarshipRef = ref<object | null>(null);
-const studyDayCountryRef = ref<object | null>(null);
-const studyDayUniversityNameRef = ref<object | null>(null);
-const studyDayDegreeLevelRef = ref<object | null>(null);
-const studyDaySubjectRef = ref<object | null>(null);
-const leaveWroteRef = ref<object | null>(null);
+const leaveStartDateRef = ref<object | null>(null)
+const leaveEndDateRef = ref<object | null>(null)
+const leavebirthDateRef = ref<object | null>(null)
+const leavegovernmentDateRef = ref<object | null>(null)
+const leaveSalaryRef = ref<object | null>(null)
+const leaveNumberRef = ref<object | null>(null)
+const leaveAddressRef = ref<object | null>(null)
+const studyDayScholarshipRef = ref<object | null>(null)
+const studyDayCountryRef = ref<object | null>(null)
+const studyDayUniversityNameRef = ref<object | null>(null)
+const studyDayDegreeLevelRef = ref<object | null>(null)
+const studyDaySubjectRef = ref<object | null>(null)
+const leaveWroteRef = ref<object | null>(null)
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
-  data: {
-    type: Array,
-    default: null,
-  },
-  onSubmit: {
-    type: Function,
-    default: () => "",
-  },
-  onConfirm: {
-    type: Function,
-    default: () => "",
-  },
-});
+	data: {
+		type: Object,
+		default: null,
+	},
+	onSubmit: {
+		type: Function,
+		default: () => "",
+	},
+	onConfirm: {
+		type: Function,
+		default: () => "",
+	},
+})
 
 /** ข้อมูล v-model ของฟอร์ม */
 const formDataStudy = reactive<any>({
-  type: dataStore.typeId, //
-  leaveWrote: "", //
-  leaveStartDate: null,
-  leaveEndDate: null,
-  leavebirthDate: new Date(),
-  leavegovernmentDate: new Date(),
-  leaveSalary: 10000,
-  leaveSalaryText: arabicNumberToText(10000),
-  leaveNumber: "",
-  leaveAddress: "",
-  studyDayScholarship: "",
-  studyDayCountry: "",
-  studyDayUniversityName: "", //
-  studyDayDegreeLevel: "", //
-  studyDaySubject: "", //
-  leaveDocument: "", //
-  leaveDetail: "",
-  leaveTotal: "",
-});
+	type: dataStore.typeId, //
+	leaveWrote: "", //
+	leaveStartDate: null,
+	leaveEndDate: null,
+	leavebirthDate: new Date(),
+	leavegovernmentDate: new Date(),
+	leaveSalary: 10000,
+	leaveSalaryText: arabicNumberToText(10000),
+	leaveNumber: "",
+	leaveAddress: "",
+	studyDayScholarship: "",
+	studyDayCountry: "",
+	studyDayUniversityName: "", //
+	studyDayDegreeLevel: "", //
+	studyDaySubject: "", //
+	leaveDocument: "", //
+	leaveDetail: "",
+	leaveTotal: "",
+})
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const formRef: studyDaySubjectForm = {
-  leaveStartDate: leaveStartDateRef,
-  leaveEndDate: leaveEndDateRef,
-  leavebirthDate: leavebirthDateRef,
-  leavegovernmentDate: leavegovernmentDateRef,
-  leaveSalary: leaveSalaryRef,
-  leaveNumber: leaveNumberRef,
-  leaveAddress: leaveAddressRef,
-  studyDayScholarship: studyDayScholarshipRef,
-  studyDayCountry: studyDayCountryRef,
-  studyDayUniversityName: studyDayUniversityNameRef,
-  studyDayDegreeLevel: studyDayDegreeLevelRef,
-  studyDaySubject: studyDaySubjectRef,
-  leaveWrote: leaveWroteRef,
-};
+	leaveStartDate: leaveStartDateRef,
+	leaveEndDate: leaveEndDateRef,
+	leavebirthDate: leavebirthDateRef,
+	leavegovernmentDate: leavegovernmentDateRef,
+	leaveSalary: leaveSalaryRef,
+	leaveNumber: leaveNumberRef,
+	leaveAddress: leaveAddressRef,
+	studyDayScholarship: studyDayScholarshipRef,
+	studyDayCountry: studyDayCountryRef,
+	studyDayUniversityName: studyDayUniversityNameRef,
+	studyDayDegreeLevel: studyDayDegreeLevelRef,
+	studyDaySubject: studyDaySubjectRef,
+	leaveWrote: leaveWroteRef,
+}
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("");
-const fileDocDataUpload = ref<File[]>([]);
+const nameFile = ref<string>("")
+const fileDocDataUpload = ref<File[]>([])
 const fileUploadDoc = async (files: any) => {
-  files.forEach((file: any) => {
-    fileDocDataUpload.value.push(file);
-  });
-};
+	files.forEach((file: any) => {
+		fileDocDataUpload.value.push(file)
+	})
+}
 
 /** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
 function onValidate() {
-  const hasError = [];
-  for (const key in formRef) {
-    if (Object.prototype.hasOwnProperty.call(formRef, key)) {
-      const property = formRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    const formData = new FormData();
-    // if (formDataStudy.leaveDocument.length > 0) {
-    // 	const blob = formDataStudy.leaveDocument.slice(0, formDataStudy.leaveDocument[0].size)
-    // 	const newFile = new File(blob, nameFile.value, {
-    // 		type: formDataStudy.leaveDocument[0].type,
-    // 	})
-    // 	formData.append("leaveDocument", newFile)
-    // }
-    formData.append("leaveDocument", formDataStudy.leaveDocument);
-    formData.append("type", formDataStudy.type); //
-    formData.append("leaveStartDate", dateToISO(formDataStudy.leaveStartDate)); //
-    formData.append("leaveEndDate", dateToISO(formDataStudy.leaveEndDate)); //
-    formData.append("studyDaySubject", formDataStudy.studyDaySubject);
-    formData.append("studyDayDegreeLevel", formDataStudy.studyDayDegreeLevel);
-    formData.append(
-      "leavegovernmentDate",
-      dateToISO(formDataStudy.leavegovernmentDate)
-    );
-    formData.append(
-      "studyDayUniversityName",
-      formDataStudy.studyDayUniversityName
-    );
-    formData.append("studyDayCountry", formDataStudy.studyDayCountry);
-    formData.append("leaveWrote", formDataStudy.leaveWrote); //
-    formData.append("leaveDetail", formDataStudy.leaveDetail); //
-    formData.append("studyDayScholarship", formDataStudy.studyDayScholarship);
-    formData.append("leaveAddress", formDataStudy.leaveAddress); //
-    formData.append("leaveNumber", formDataStudy.leaveNumber); //
-    props.onSubmit(formData);
-  }
+	const hasError = []
+	for (const key in formRef) {
+		if (Object.prototype.hasOwnProperty.call(formRef, key)) {
+			const property = formRef[key]
+			if (property.value && typeof property.value.validate === "function") {
+				const isValid = property.value.validate()
+				hasError.push(isValid)
+			}
+		}
+	}
+	if (hasError.every(result => result === true)) {
+		const formData = new FormData()
+		formDataStudy.leaveDocument.forEach((file: File) => {
+			formData.append("leaveDocument", file)
+		})
+		// formData.append("leaveDocument", formDataStudy.leaveDocument);
+		formData.append("type", formDataStudy.type) //
+		formData.append("leaveStartDate", dateToISO(formDataStudy.leaveStartDate)) //
+		formData.append("leaveEndDate", dateToISO(formDataStudy.leaveEndDate)) //
+		formData.append("studyDaySubject", formDataStudy.studyDaySubject)
+		formData.append("studyDayDegreeLevel", formDataStudy.studyDayDegreeLevel)
+		formData.append("leavegovernmentDate", dateToISO(formDataStudy.leavegovernmentDate))
+		formData.append("studyDayUniversityName", formDataStudy.studyDayUniversityName)
+		formData.append("studyDayCountry", formDataStudy.studyDayCountry)
+		formData.append("leaveWrote", formDataStudy.leaveWrote) //
+		formData.append("leaveDetail", formDataStudy.leaveDetail) //
+		formData.append("studyDayScholarship", formDataStudy.studyDayScholarship)
+		formData.append("leaveAddress", formDataStudy.leaveAddress) //
+		formData.append("leaveNumber", formDataStudy.leaveNumber) //
+		props.onSubmit(formData)
+	}
 }
 
 /**
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
-const isLeave = ref<boolean>(true);
+const isLeave = ref<boolean>(true)
 async function fetchCheck() {
-  await http
-    .post(config.API.leaveCheck(), {
-      type: dataStore.typeId ?? null,
-      StartLeaveDate: formDataStudy.leaveStartDate ?? null,
-      EndLeaveDate: formDataStudy.leaveEndDate ?? null,
-    })
-    .then((res: any) => {
-      const data = res.data.result;
-      isLeave.value = data.isLeave;
-      if (data.isLeave === true) {
-        // formDataStudy.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday;
-        formDataStudy.leaveTotal = data.totalDate;
-      } else {
-        fails($q, "ไม่สามารถลาได้");
-      }
-    })
-    .catch((e: any) => {
-      messageError($q, e);
-    });
+	await http
+		.post(config.API.leaveCheck(), {
+			type: dataStore.typeId ?? null,
+			StartLeaveDate: formDataStudy.leaveStartDate ?? null,
+			EndLeaveDate: formDataStudy.leaveEndDate ?? null,
+		})
+		.then((res: any) => {
+			const data = res.data.result
+			isLeave.value = data.isLeave
+			if (data.isLeave === true) {
+				// formDataStudy.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday;
+				formDataStudy.leaveTotal = data.totalDate
+			} else {
+				fails($q, "ไม่สามารถลาได้")
+			}
+		})
+		.catch((e: any) => {
+			messageError($q, e)
+		})
 }
 
 /**
  * function อัพเดทค่า LeaveTotal
  */
 function updateLeaveTotal() {
-  fetchCheck();
-  const newLeaveTotal = calculateDurationYmd(
-    formDataStudy.leaveStartDate,
-    formDataStudy.leaveEndDate
-  );
-  formDataStudy.leaveTotal = newLeaveTotal;
+	fetchCheck()
+	const newLeaveTotal = calculateDurationYmd(formDataStudy.leaveStartDate, formDataStudy.leaveEndDate)
+	formDataStudy.leaveTotal = newLeaveTotal
 }
 
+const leaveDocumentList = ref<any>()
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 onMounted(async () => {
-  if (props.data) {
-    formDataStudy.leaveWrote = props.data.leaveWrote;
-    formDataStudy.leaveStartDate = props.data.leaveStartDate;
-    formDataStudy.leaveEndDate = props.data.leaveEndDate;
-    formDataStudy.leaveTotal = props.data.leaveTotal;
-    formDataStudy.leavebirthDate = props.data.leavebirthDate;
-    formDataStudy.leavegovernmentDate = props.data.leavegovernmentDate;
-    formDataStudy.leaveSalary = props.data.leaveSalary;
-    formDataStudy.leaveSalaryText = props.data.leaveSalaryText;
-    formDataStudy.leaveNumber = props.data.leaveNumber;
-    formDataStudy.leaveAddress = props.data.leaveAddress;
-    formDataStudy.studyDayScholarship = props.data.studyDayScholarship;
-    formDataStudy.studyDayCountry = props.data.studyDayCountry;
-    formDataStudy.studyDayUniversityName = props.data.studyDayUniversityName;
-    formDataStudy.studyDayDegreeLevel = props.data.studyDayDegreeLevel;
-    formDataStudy.studyDaySubject = props.data.studyDaySubject;
-    // formDataStudy.leaveDocument = props.data.leaveDocument;
-    formDataStudy.leaveDetail = props.data.leaveDetail;
-
-    const leaveTotal = await calculateDurationYmd(
-      new Date(props.data.leaveStartDate),
-      new Date(props.data.leaveEndDate)
-    );
-    formDataStudy.leaveTotal = leaveTotal;
-  }
-});
+	if (props.data) {
+		formDataStudy.leaveWrote = props.data.leaveWrote
+		formDataStudy.leaveStartDate = props.data.leaveStartDate
+		formDataStudy.leaveEndDate = props.data.leaveEndDate
+		formDataStudy.leaveTotal = props.data.leaveTotal
+		formDataStudy.leavebirthDate = props.data.leavebirthDate
+		formDataStudy.leavegovernmentDate = props.data.leavegovernmentDate
+		formDataStudy.leaveSalary = props.data.leaveSalary
+		formDataStudy.leaveSalaryText = props.data.leaveSalaryText
+		formDataStudy.leaveNumber = props.data.leaveNumber
+		formDataStudy.leaveAddress = props.data.leaveAddress
+		formDataStudy.studyDayScholarship = props.data.studyDayScholarship
+		formDataStudy.studyDayCountry = props.data.studyDayCountry
+		formDataStudy.studyDayUniversityName = props.data.studyDayUniversityName
+		formDataStudy.studyDayDegreeLevel = props.data.studyDayDegreeLevel
+		formDataStudy.studyDaySubject = props.data.studyDaySubject
+		// formDataStudy.leaveDocument = props.data.leaveDocument;
+		formDataStudy.leaveDetail = props.data.leaveDetail
+		leaveDocumentList.value = props.data.leaveDocument
+		const leaveTotal = await calculateDurationYmd(props.data.leaveStartDate, props.data.leaveEndDate)
+		formDataStudy.leaveTotal = leaveTotal
+	}
+})
 </script>
 
 <template>
-  <div style="display: flex; align-items: center">
-    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-  </div>
-  <form @submit.prevent="onValidate">
-    <q-card bordered class="q-pa-md bg-grey-1">
-      <div class="row q-pa-sm q-col-gutter-sm">
-        <q-input
-          v-model="formDataStudy.leaveWrote"
-          ref="leaveWroteRef"
-          class="col-12 col-sm-12 cursor-pointer inputgreen"
-          bg-color="white"
-          dense
-          outlined
-          label="เขียนที่"
-          hide-bottom-space
-          :rules="[(val) => !!val || `${'เขียนที่'}`]"
-        />
+	<div style="display: flex; align-items: center">
+		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+	</div>
+	<form @submit.prevent="onValidate">
+		<q-card bordered class="q-pa-md bg-grey-1">
+			<div class="row q-pa-sm q-col-gutter-sm">
+				<q-input
+					v-model="formDataStudy.leaveWrote"
+					ref="leaveWroteRef"
+					class="col-12 col-sm-12 cursor-pointer inputgreen"
+					bg-color="white"
+					dense
+					outlined
+					label="เขียนที่"
+					hide-bottom-space
+					:rules="[val => !!val || `${'เขียนที่'}`]"
+				/>
 
-        <datepicker
-          v-model="formDataStudy.leaveStartDate"
-          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          autoApply
-          borderless
-          week-start="0"
-          :enableTimePicker="false"
-          :locale="'th'"
-          @update:model-value="formDataStudy.leaveEndDate = null"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              ref="leaveStartDateRef"
-              class="full-width datepicker"
-              bg-color="white"
-              outlined
-              dense
-              lazy-rules
-              hide-bottom-space
-              :label="`${'ลาตั้งแต่วันที่'}`"
-              :model-value="
-                formDataStudy.leaveStartDate != null
-                  ? date2Thai(formDataStudy.leaveStartDate)
-                  : null
-              "
-              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
+				<datepicker
+					v-model="formDataStudy.leaveStartDate"
+					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+					menu-class-name="modalfix"
+					autoApply
+					borderless
+					week-start="0"
+					:enableTimePicker="false"
+					:locale="'th'"
+					@update:model-value="formDataStudy.leaveEndDate = null"
+				>
+					<template #year="{ year }">
+						{{ year + 543 }}
+					</template>
+					<template #year-overlay-value="{ value }">
+						{{ parseInt(value + 543) }}
+					</template>
+					<template #trigger>
+						<q-input
+							ref="leaveStartDateRef"
+							class="full-width datepicker"
+							bg-color="white"
+							outlined
+							dense
+							lazy-rules
+							hide-bottom-space
+							:label="`${'ลาตั้งแต่วันที่'}`"
+							:model-value="formDataStudy.leaveStartDate != null ? date2Thai(formDataStudy.leaveStartDate) : null"
+							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+						>
+							<template v-slot:prepend>
+								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
+							</template>
+						</q-input>
+					</template>
+				</datepicker>
 
-        <datepicker
-          v-model="formDataStudy.leaveEndDate"
-          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          autoApply
-          borderless
-          week-start="0"
-          :locale="'th'"
-          @update:model-value="updateLeaveTotal()"
-          :readonly="!formDataStudy.leaveStartDate"
-          :enableTimePicker="false"
-          :min-date="formDataStudy.leaveStartDate"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              ref="leaveEndDateRef"
-              class="full-width datepicker"
-              outlined
-              dense
-              lazy-rules
-              bg-color="white"
-              hide-bottom-space
-              :label="`${'ลาถึงวันที่'}`"
-              :readonly="!formDataStudy.leaveStartDate"
-              :model-value="
-                formDataStudy.leaveEndDate != null
-                  ? date2Thai(formDataStudy.leaveEndDate)
-                  : null
-              "
-              :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
+				<datepicker
+					v-model="formDataStudy.leaveEndDate"
+					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+					menu-class-name="modalfix"
+					autoApply
+					borderless
+					week-start="0"
+					:locale="'th'"
+					@update:model-value="updateLeaveTotal()"
+					:readonly="!formDataStudy.leaveStartDate"
+					:enableTimePicker="false"
+					:min-date="formDataStudy.leaveStartDate"
+				>
+					<template #year="{ year }">
+						{{ year + 543 }}
+					</template>
+					<template #year-overlay-value="{ value }">
+						{{ parseInt(value + 543) }}
+					</template>
+					<template #trigger>
+						<q-input
+							ref="leaveEndDateRef"
+							class="full-width datepicker"
+							outlined
+							dense
+							lazy-rules
+							bg-color="white"
+							hide-bottom-space
+							:label="`${'ลาถึงวันที่'}`"
+							:readonly="!formDataStudy.leaveStartDate"
+							:model-value="formDataStudy.leaveEndDate != null ? date2Thai(formDataStudy.leaveEndDate) : null"
+							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+						>
+							<template v-slot:prepend>
+								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
+							</template>
+						</q-input>
+					</template>
+				</datepicker>
 
-        <q-input
-          class="col-12 col-md-2 col-sm-6"
-          dense
-          outlined
-          bg-color="white"
-          ref="leaveTotalRef"
-          for="leaveTotalRef"
-          v-model="formDataStudy.leaveTotal"
-          label="มีกำหนด"
-          readonly
-          hide-bottom-space
-        />
+				<q-input
+					class="col-12 col-md-2 col-sm-6"
+					dense
+					outlined
+					bg-color="white"
+					ref="leaveTotalRef"
+					for="leaveTotalRef"
+					v-model="formDataStudy.leaveTotal"
+					label="มีกำหนด"
+					readonly
+					hide-bottom-space
+				/>
 
-        <div class="full-width">
-          <div class="q-col-gutter-sm row">
-            <datepicker
-              class="col-12 col-md-3 col-sm-6"
-              menu-class-name="modalfix"
-              autoApply
-              borderless
-              week-start="0"
-              readonly
-              :enableTimePicker="false"
-              :locale="'th'"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  ref="leavegovernmentDateRef"
-                  class="full-width"
-                  bg-color="white"
-                  outlined
-                  readonly
-                  dense
-                  hide-bottom-space
-                  :label="`${'วันที่เข้ารับราชการ'}`"
-                  :model-value="
-                    dataStore.dateAppoint != null
-                      ? date2Thai(dataStore.dateAppoint)
-                      : null
-                  "
-                  :rules="[
-                    (val) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
-                  ]"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--black)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
+				<div class="full-width">
+					<div class="q-col-gutter-sm row">
+						<datepicker class="col-12 col-md-3 col-sm-6" menu-class-name="modalfix" autoApply borderless week-start="0" readonly :enableTimePicker="false" :locale="'th'">
+							<template #year="{ year }">
+								{{ year + 543 }}
+							</template>
+							<template #year-overlay-value="{ value }">
+								{{ parseInt(value + 543) }}
+							</template>
+							<template #trigger>
+								<q-input
+									ref="leavegovernmentDateRef"
+									class="full-width"
+									bg-color="white"
+									outlined
+									readonly
+									dense
+									hide-bottom-space
+									:label="`${'วันที่เข้ารับราชการ'}`"
+									:model-value="dataStore.dateAppoint != null ? date2Thai(dataStore.dateAppoint) : null"
+									:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
+								>
+									<template v-slot:prepend>
+										<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
+									</template>
+								</q-input>
+							</template>
+						</datepicker>
 
-            <datepicker
-              class="col-12 col-md-3 col-sm-6"
-              menu-class-name="modalfix"
-              autoApply
-              borderless
-              readonly
-              week-start="0"
-              :enableTimePicker="false"
-              :locale="'th'"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  ref="leavebirthDateRef"
-                  class="full-width"
-                  bg-color="white"
-                  outlined
-                  dense
-                  readonly
-                  hide-bottom-space
-                  :label="`${'วันเดือนปีเกิด'}`"
-                  :model-value="
-                    dataStore.birthDate != null
-                      ? date2Thai(dataStore.birthDate)
-                      : null
-                  "
-                  :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--black)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
+						<datepicker class="col-12 col-md-3 col-sm-6" menu-class-name="modalfix" autoApply borderless readonly week-start="0" :enableTimePicker="false" :locale="'th'">
+							<template #year="{ year }">
+								{{ year + 543 }}
+							</template>
+							<template #year-overlay-value="{ value }">
+								{{ parseInt(value + 543) }}
+							</template>
+							<template #trigger>
+								<q-input
+									ref="leavebirthDateRef"
+									class="full-width"
+									bg-color="white"
+									outlined
+									dense
+									readonly
+									hide-bottom-space
+									:label="`${'วันเดือนปีเกิด'}`"
+									:model-value="dataStore.birthDate != null ? date2Thai(dataStore.birthDate) : null"
+									:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+								>
+									<template v-slot:prepend>
+										<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
+									</template>
+								</q-input>
+							</template>
+						</datepicker>
 
-            <q-input
-              :model-value="dataStore.salary"
-              ref="leaveSalaryRef"
-              class="col-12 col-sm-6 col-md-3"
-              bg-color="white"
-              dense
-              outlined
-              readonly
-              label="เงินเดือนปัจจุบัน"
-            />
+						<q-input :model-value="dataStore.salary" ref="leaveSalaryRef" class="col-12 col-sm-6 col-md-3" bg-color="white" dense outlined readonly label="เงินเดือนปัจจุบัน" />
 
-            <q-input
-              :model-value="dataStore.salaryText"
-              ref="leaveSalaryRef"
-              class="col-12 col-sm-6 col-md-3"
-              bg-color="white"
-              dense
-              readonly
-              outlined
-              label="เงินเดือนปัจจุบัน (ตัวอักษร)"
-              hide-bottom-space
-              :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือนปัจจุบัน'}`]"
-            />
-          </div>
-        </div>
+						<q-input
+							:model-value="dataStore.salaryText"
+							ref="leaveSalaryRef"
+							class="col-12 col-sm-6 col-md-3"
+							bg-color="white"
+							dense
+							readonly
+							outlined
+							label="เงินเดือนปัจจุบัน (ตัวอักษร)"
+							hide-bottom-space
+							:rules="[val => !!val || `${'กรุณากรอกเงินเดือนปัจจุบัน'}`]"
+						/>
+					</div>
+				</div>
 
-        <div class="full-width">
-          <div class="q-col-gutter-sm row">
-            <q-input
-              v-model="formDataStudy.studyDayUniversityName"
-              ref="studyDayUniversityNameRef"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-              bg-color="white"
-              dense
-              outlined
-              label="ชื่อสถานศึกษา"
-              hide-bottom-space
-              :rules="[(val) => !!val || `${'กรุณากรอกชื่อสถานศึกษา'}`]"
-            />
+				<div class="full-width">
+					<div class="q-col-gutter-sm row">
+						<q-input
+							v-model="formDataStudy.studyDayUniversityName"
+							ref="studyDayUniversityNameRef"
+							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+							bg-color="white"
+							dense
+							outlined
+							label="ชื่อสถานศึกษา"
+							hide-bottom-space
+							:rules="[val => !!val || `${'กรุณากรอกชื่อสถานศึกษา'}`]"
+						/>
 
-            <q-input
-              v-model="formDataStudy.studyDayDegreeLevel"
-              ref="studyDayDegreeLevelRef"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-              bg-color="white"
-              dense
-              outlined
-              label="ชั้นปริญญา"
-              hide-bottom-space
-              :rules="[(val) => !!val || `${'กรุณากรอกชั้นปริญญา'}`]"
-            />
+						<q-input
+							v-model="formDataStudy.studyDayDegreeLevel"
+							ref="studyDayDegreeLevelRef"
+							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+							bg-color="white"
+							dense
+							outlined
+							label="ชั้นปริญญา"
+							hide-bottom-space
+							:rules="[val => !!val || `${'กรุณากรอกชั้นปริญญา'}`]"
+						/>
 
-            <q-input
-              v-model="formDataStudy.studyDaySubject"
-              ref="studyDaySubjectRef"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-              bg-color="white"
-              dense
-              outlined
-              label="ศึกษาวิชา"
-              hide-bottom-space
-              :rules="[(val) => !!val || `${'กรุณากรอกศึกษาวิชา'}`]"
-            />
+						<q-input
+							v-model="formDataStudy.studyDaySubject"
+							ref="studyDaySubjectRef"
+							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+							bg-color="white"
+							dense
+							outlined
+							label="ศึกษาวิชา"
+							hide-bottom-space
+							:rules="[val => !!val || `${'กรุณากรอกศึกษาวิชา'}`]"
+						/>
 
-            <q-input
-              v-model="formDataStudy.studyDayCountry"
-              ref="studyDayCountryRef"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-              bg-color="white"
-              dense
-              outlined
-              label="ประเทศ"
-              hide-bottom-space
-              :rules="[(val) => !!val || `${'กรุณากรอกประเทศ'}`]"
-            />
+						<q-input
+							v-model="formDataStudy.studyDayCountry"
+							ref="studyDayCountryRef"
+							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+							bg-color="white"
+							dense
+							outlined
+							label="ประเทศ"
+							hide-bottom-space
+							:rules="[val => !!val || `${'กรุณากรอกประเทศ'}`]"
+						/>
 
-            <q-input
-              v-model="formDataStudy.studyDayScholarship"
-              ref="studyDayScholarshipRef"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-              bg-color="white"
-              dense
-              outlined
-              label="ด้วยทุน"
-              hide-bottom-space
-              :rules="[(val) => !!val || `${'กรุณากรอกด้วยทุน'}`]"
-            />
+						<q-input
+							v-model="formDataStudy.studyDayScholarship"
+							ref="studyDayScholarshipRef"
+							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+							bg-color="white"
+							dense
+							outlined
+							label="ด้วยทุน"
+							hide-bottom-space
+							:rules="[val => !!val || `${'กรุณากรอกด้วยทุน'}`]"
+						/>
 
-            <q-input
-              v-model="formDataStudy.leaveNumber"
-              ref="leaveNumberRef"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-              bg-color="white"
-              dense
-              outlined
-              unmasked-value
-              hide-bottom-space
-              mask="(###)-###-####"
-              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-              :rules="[
-                (val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
-              ]"
-            />
+						<q-input
+							v-model="formDataStudy.leaveNumber"
+							ref="leaveNumberRef"
+							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+							bg-color="white"
+							dense
+							outlined
+							unmasked-value
+							hide-bottom-space
+							mask="(###)-###-####"
+							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
+						/>
 
-            <q-input
-              v-model="formDataStudy.leaveAddress"
-              ref="leaveAddressRef"
-              class="col-12 cursor-pointer inputgreen"
-              bg-color="white"
-              dense
-              outlined
-              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-              hide-bottom-space
-              :rules="[
-                (val) => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
-              ]"
-            />
-          </div>
-        </div>
+						<q-input
+							v-model="formDataStudy.leaveAddress"
+							ref="leaveAddressRef"
+							class="col-12 cursor-pointer inputgreen"
+							bg-color="white"
+							dense
+							outlined
+							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+							hide-bottom-space
+							:rules="[val => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
+						/>
+					</div>
+				</div>
 
-        <q-input
-          v-model="formDataStudy.leaveDetail"
-          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-          bg-color="white"
-          dense
-          outlined
-          type="textarea"
-          label="รายละเอียด"
-        />
+				<q-input v-model="formDataStudy.leaveDetail" class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
 
-        <div class="col-12">
-          <!-- multiple -->
-          <q-file
-            v-model="formDataStudy.leaveDocument"
-            bg-color="white"
-            dense
-            outlined
-            use-chips
-            @added="fileUploadDoc"
-            label="เอกสารประกอบ"
-          >
-            <template v-slot:prepend>
-              <q-icon name="attach_file" color="primary" />
-            </template>
-          </q-file>
-        </div>
+				<div class="col-12">
+					<!-- multiple -->
+					<q-file v-model="formDataStudy.leaveDocument" bg-color="white" multiple dense outlined use-chips @added="fileUploadDoc" label="เอกสารประกอบ">
+						<template v-slot:prepend>
+							<q-icon name="attach_file" color="primary" />
+						</template>
+					</q-file>
+					<!-- <div class="col-12" v-if="formDataStudy.leaveDocument.length == 0">
+						<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
+					</div> -->
+					<div class="col-12" v-if="data">
+						<div class="col-12 col-md-12 col-sm-12">
+							<q-card bordered>
+								<!-- <div class="col-12">
+								<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ{{ leaveDocumentList }} </q-card>
+							</div> -->
+								<q-list separator>
+									<q-item v-for="(document, index) in leaveDocumentList" :key="index" class="q-my-xs">
+										<q-item-section>
+											<q-item-label class="row items-baseline">
+												<div class="col">
+													{{ "เอกสารแนบฉบับที่" + (index + 1) }}
+												</div>
+												<q-btn class="col-6" :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
+													<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+												</q-btn>
+											</q-item-label>
+										</q-item-section>
+									</q-item>
+								</q-list>
+							</q-card>
+						</div>
+					</div>
+				</div>
 
-        <div class="col-12 row" v-if="!edit">
-          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-            <div class="q-pl-sm text-weight-bold text-dark">
-              เอกสารเพิ่มเติม
-            </div>
-          </div>
-          <q-card bordered flat class="full-width">
-            <q-list separator>
-              <q-item v-for="file in files" :key="file.key" class="q-my-xs">
-                <q-item-section>
-                  <q-item-label class="full-width ellipsis">
-                    {{ file.fileName }}
-                  </q-item-label>
-
-                  <q-item-label caption> </q-item-label>
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-card>
-        </div>
-      </div>
-    </q-card>
-    <q-separator class="q-mt-sm" />
-    <div class="row col-12 q-pt-md">
-      <q-space />
-      <q-btn
-        v-if="!props.data || props.data.status == 'DRAFT'"
-        id="onSubmit"
-        type="submit"
-        unelevated
-        dense
-        class="q-px-md items-center btnBlue"
-        label="บันทึก"
-        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
-      >
-      <q-btn
-        v-if="data"
-        id="onSubmit"
-        type="button"
-        unelevated
-        dense
-        class="q-px-md items-center q-ml-sm"
-        color="primary"
-        label="ยื่นใบลา"
-        @click="onConfirm"
-        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
-      >
-    </div>
-  </form>
+				<div class="col-12 col-sm-6 row" v-if="!edit">
+					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
+					</div>
+					<q-card bordered flat class="full-width">
+						<q-list separator>
+							<q-item v-for="(file, index) in leaveDocumentList" :key="index" class="q-my-xs">
+								<q-item-section>
+									<q-item-label class="full-width ellipsis">
+										{{ file.name }}
+									</q-item-label>
+									<q-item-label caption> </q-item-label>
+								</q-item-section>
+							</q-item>
+						</q-list>
+					</q-card>
+				</div>
+			</div>
+		</q-card>
+		<q-separator class="q-mt-sm" />
+		<div class="row col-12 q-pt-md">
+			<q-space />
+			<q-btn v-if="!props.data || props.data.status == 'DRAFT'" id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"
+				><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+			>
+			<q-btn v-if="data" id="onSubmit" type="button" unelevated dense class="q-px-md items-center q-ml-sm" color="primary" label="ยื่นใบลา" @click="onConfirm"
+				><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+			>
+		</div>
+	</form>
 </template>
diff --git a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
index d23bcf9..3f63989 100644
--- a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
+++ b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
@@ -1,629 +1,539 @@
 <script setup lang="ts">
-import { reactive, ref, computed, onMounted } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
-import type { TrainForm } from "@/modules/05_leave/interface/request/AddAbsence";
-import { useQuasar } from "quasar";
-import { useLeaveStore } from "@/modules/05_leave/store";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useRouter } from "vue-router";
+import { reactive, ref, computed, onMounted } from "vue"
+import { useCounterMixin } from "@/stores/mixin"
+import type { TrainForm } from "@/modules/05_leave/interface/request/AddAbsence"
+import { useQuasar } from "quasar"
+import { useLeaveStore } from "@/modules/05_leave/store"
+import http from "@/plugins/http"
+import config from "@/app.config"
+import { useRouter } from "vue-router"
 
 /** Use */
-const dataStore = useLeaveStore();
-const $q = useQuasar();
-const router = useRouter();
-const mixin = useCounterMixin();
-const {
-  date2Thai,
-  dialogConfirm,
-  arabicNumberToText,
-  calculateDurationYmd,
-  fails,
-  dateToISO,
-  success,
-  messageError,
-} = mixin;
-const edit = ref<boolean>(true);
-const files = ref<any>(null);
+const dataStore = useLeaveStore()
+const $q = useQuasar()
+const router = useRouter()
+const mixin = useCounterMixin()
+const { date2Thai, dialogConfirm, arabicNumberToText, calculateDurationYmd, fails, dateToISO, success, messageError } = mixin
+const edit = ref<boolean>(true)
+const files = ref<any>(null)
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
-  data: {
-    type: Array,
-    default: null,
-  },
-  onSubmit: {
-    type: Function,
-    default: () => "",
-  },
-  onConfirm: {
-    type: Function,
-    default: () => "",
-  },
-});
+	data: {
+		type: Object,
+		default: null,
+	},
+	onSubmit: {
+		type: Function,
+		default: () => "",
+	},
+	onConfirm: {
+		type: Function,
+		default: () => "",
+	},
+})
 
 /** ข้อมูล v-model ของฟอร์ม */
 const formDataTrain = reactive<any>({
-  type: dataStore.typeId,
-  leaveWrote: "",
-  leaveStartDate: null,
-  leaveEndDate: null,
-  leavebirthDate: new Date(),
-  leavegovernmentDate: new Date(),
-  leaveSalary: 10000,
-  leaveSalaryText: arabicNumberToText(10000),
-  leaveNumber: "",
-  leaveAddress: "",
-  studyDayScholarship: "",
-  studyDayCountry: "",
-  studyDayTrainingSubject: "",
-  studyDayTrainingName: "",
-  leaveDocument: "",
-  leaveDetail: "",
-});
+	type: dataStore.typeId,
+	leaveWrote: "",
+	leaveStartDate: null,
+	leaveEndDate: null,
+	leavebirthDate: new Date(),
+	leavegovernmentDate: new Date(),
+	leaveSalary: 10000,
+	leaveSalaryText: arabicNumberToText(10000),
+	leaveNumber: "",
+	leaveAddress: "",
+	studyDayScholarship: "",
+	studyDayCountry: "",
+	studyDayTrainingSubject: "",
+	studyDayTrainingName: "",
+	leaveDocument: "",
+	leaveDetail: "",
+})
 
 /** ตัวแปร ref สำหรับแสดง validate */
-const leaveStartDateRef = ref<object | null>(null);
-const leaveEndDateRef = ref<object | null>(null);
-const leavebirthDateRef = ref<object | null>(null);
-const leavegovernmentDateRef = ref<object | null>(null);
-const leaveNumberRef = ref<object | null>(null);
-const leaveAddressRef = ref<object | null>(null);
-const studyDayScholarshipRef = ref<object | null>(null);
-const studyDayCountryRef = ref<object | null>(null);
-const studyDayTrainingSubjectRef = ref<object | null>(null);
-const studyDayTrainingNameRef = ref<object | null>(null);
-const leaveWroteRef = ref<object | null>(null);
+const leaveStartDateRef = ref<object | null>(null)
+const leaveEndDateRef = ref<object | null>(null)
+const leavebirthDateRef = ref<object | null>(null)
+const leavegovernmentDateRef = ref<object | null>(null)
+const leaveNumberRef = ref<object | null>(null)
+const leaveAddressRef = ref<object | null>(null)
+const studyDayScholarshipRef = ref<object | null>(null)
+const studyDayCountryRef = ref<object | null>(null)
+const studyDayTrainingSubjectRef = ref<object | null>(null)
+const studyDayTrainingNameRef = ref<object | null>(null)
+const leaveWroteRef = ref<object | null>(null)
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const formRef: TrainForm = {
-  leaveStartDate: leaveStartDateRef,
-  leaveEndDate: leaveEndDateRef,
-  leavebirthDate: leavebirthDateRef,
-  leavegovernmentDate: leavegovernmentDateRef,
-  leaveNumber: leaveNumberRef,
-  leaveAddress: leaveAddressRef,
-  studyDayScholarship: studyDayScholarshipRef,
-  studyDayCountry: studyDayCountryRef,
-  studyDayTrainingSubject: studyDayTrainingSubjectRef,
-  studyDayTrainingName: studyDayTrainingNameRef,
-  leaveWrote: leaveWroteRef,
-};
+	leaveStartDate: leaveStartDateRef,
+	leaveEndDate: leaveEndDateRef,
+	leavebirthDate: leavebirthDateRef,
+	leavegovernmentDate: leavegovernmentDateRef,
+	leaveNumber: leaveNumberRef,
+	leaveAddress: leaveAddressRef,
+	studyDayScholarship: studyDayScholarshipRef,
+	studyDayCountry: studyDayCountryRef,
+	studyDayTrainingSubject: studyDayTrainingSubjectRef,
+	studyDayTrainingName: studyDayTrainingNameRef,
+	leaveWrote: leaveWroteRef,
+}
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("");
-const fileDocDataUpload = ref<File[]>([]);
+const nameFile = ref<string>("")
+const fileDocDataUpload = ref<File[]>([])
 const fileUploadDoc = async (files: any) => {
-  files.forEach((file: any) => {
-    fileDocDataUpload.value.push(file);
-  });
-};
+	files.forEach((file: any) => {
+		fileDocDataUpload.value.push(file)
+	})
+}
 
 /** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
 function onValidate() {
-  const hasError = [];
+	const hasError = []
 
-  for (const key in formRef) {
-    if (Object.prototype.hasOwnProperty.call(formRef, key)) {
-      const property = formRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    const formData = new FormData();
-    // if (formDataTrain.leaveDocument.length > 0) {
-    // 	const blob = formDataTrain.leaveDocument.slice(0, formDataTrain.leaveDocument[0].size)
-    // 	const newFile = new File(blob, nameFile.value, {
-    // 		type: formDataTrain.leaveDocument[0].type,
-    // 	})
-    // 	formData.append("leaveDocument", newFile)
-    // } //
-    formData.append("leaveDocument", formDataTrain.leaveDocument);
-    formData.append("type", formDataTrain.type); //
-    formData.append("leaveStartDate", dateToISO(formDataTrain.leaveStartDate)); //
-    formData.append("leaveEndDate", dateToISO(formDataTrain.leaveEndDate)); //
-    formData.append("studyDayCountry", formDataTrain.studyDayCountry);
-    formData.append(
-      "leavegovernmentDate",
-      dateToISO(formDataTrain.leavegovernmentDate)
-    );
-    formData.append("leavebirthDate", dateToISO(formDataTrain.leavebirthDate));
-    formData.append("studyDayTrainingName", formDataTrain.studyDayTrainingName);
-    formData.append(
-      "studyDayTrainingSubject",
-      formDataTrain.studyDayTrainingSubject
-    );
-    formData.append("leaveWrote", formDataTrain.leaveWrote); //
-    formData.append("leaveDetail", formDataTrain.leaveDetail); //
-    formData.append("studyDayScholarship", formDataTrain.studyDayScholarship);
-    formData.append("leaveAddress", formDataTrain.leaveAddress); //
-    formData.append("leaveNumber", formDataTrain.leaveNumber); //
-    formData.append("leaveSalaryText", formDataTrain.leaveSalaryText); //
-    formData.append("leaveSalary", formDataTrain.leaveSalary); //
-    formData.append("leaveTotal", formDataTrain.leaveTotal); //
-    props.onSubmit(formData);
-  }
+	for (const key in formRef) {
+		if (Object.prototype.hasOwnProperty.call(formRef, key)) {
+			const property = formRef[key]
+			if (property.value && typeof property.value.validate === "function") {
+				const isValid = property.value.validate()
+				hasError.push(isValid)
+			}
+		}
+	}
+	if (hasError.every(result => result === true)) {
+		const formData = new FormData()
+		formDataTrain.leaveDocument.forEach((file: File) => {
+			formData.append("leaveDocument", file)
+		})
+		// formData.append("leaveDocument", formDataTrain.leaveDocument);
+		formData.append("type", formDataTrain.type) //
+		formData.append("leaveStartDate", dateToISO(formDataTrain.leaveStartDate)) //
+		formData.append("leaveEndDate", dateToISO(formDataTrain.leaveEndDate)) //
+		formData.append("studyDayCountry", formDataTrain.studyDayCountry)
+		formData.append("leavegovernmentDate", dateToISO(formDataTrain.leavegovernmentDate))
+		formData.append("leavebirthDate", dateToISO(formDataTrain.leavebirthDate))
+		formData.append("studyDayTrainingName", formDataTrain.studyDayTrainingName)
+		formData.append("studyDayTrainingSubject", formDataTrain.studyDayTrainingSubject)
+		formData.append("leaveWrote", formDataTrain.leaveWrote) //
+		formData.append("leaveDetail", formDataTrain.leaveDetail) //
+		formData.append("studyDayScholarship", formDataTrain.studyDayScholarship)
+		formData.append("leaveAddress", formDataTrain.leaveAddress) //
+		formData.append("leaveNumber", formDataTrain.leaveNumber) //
+		formData.append("leaveSalaryText", formDataTrain.leaveSalaryText) //
+		formData.append("leaveSalary", formDataTrain.leaveSalary) //
+		formData.append("leaveTotal", formDataTrain.leaveTotal) //
+		props.onSubmit(formData)
+	}
 }
 
 /**
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
-const isLeave = ref<boolean>(true);
+const isLeave = ref<boolean>(true)
 async function fetchCheck() {
-  await http
-    .post(config.API.leaveCheck(), {
-      type: dataStore.typeId ?? null,
-      StartLeaveDate: formDataTrain.leaveStartDate ?? null,
-      EndLeaveDate: formDataTrain.leaveEndDate ?? null,
-    })
-    .then((res: any) => {
-      const data = res.data.result;
-      isLeave.value = data.isLeave;
-      if (data.isLeave === true) {
-        // formDataTrain.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-        formDataTrain.leaveTotal = data.totalDate;
-      } else {
-        fails($q, "ไม่สามารถลาได้");
-      }
-    })
-    .catch((e: any) => {
-      messageError($q, e);
-    });
+	await http
+		.post(config.API.leaveCheck(), {
+			type: dataStore.typeId ?? null,
+			StartLeaveDate: formDataTrain.leaveStartDate ?? null,
+			EndLeaveDate: formDataTrain.leaveEndDate ?? null,
+		})
+		.then((res: any) => {
+			const data = res.data.result
+			isLeave.value = data.isLeave
+			if (data.isLeave === true) {
+				// formDataTrain.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
+				formDataTrain.leaveTotal = data.totalDate
+			} else {
+				fails($q, "ไม่สามารถลาได้")
+			}
+		})
+		.catch((e: any) => {
+			messageError($q, e)
+		})
 }
 
 /**
  * function อัพเดทค่า LeaveTotal
  */
 function updateLeaveTotal() {
-  fetchCheck();
-  const newLeaveTotal = calculateDurationYmd(
-    formDataTrain.leaveStartDate,
-    formDataTrain.leaveEndDate
-  );
-  formDataTrain.leaveTotal = newLeaveTotal;
+	fetchCheck()
+	const newLeaveTotal = calculateDurationYmd(formDataTrain.leaveStartDate, formDataTrain.leaveEndDate)
+	formDataTrain.leaveTotal = newLeaveTotal
 }
 
 /**
  * แปลงตัวเลขเงินเดือน
  */
 const formattedSalary = computed(() => {
-  return formDataTrain.leaveSalary !== null
-    ? formDataTrain.leaveSalary.toLocaleString("th-TH")
-    : "";
-});
+	return formDataTrain.leaveSalary !== null ? formDataTrain.leaveSalary.toLocaleString("th-TH") : ""
+})
 
+const leaveDocumentList = ref<any>()
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 onMounted(async () => {
-  if (props.data) {
-    formDataTrain.leaveWrote = props.data.leaveWrote;
-    formDataTrain.leaveStartDate = props.data.leaveStartDate;
-    formDataTrain.leaveEndDate = props.data.leaveEndDate;
-    formDataTrain.leaveTotal = props.data.leaveTotal;
-    formDataTrain.leavebirthDate = props.data.leavebirthDate;
-    formDataTrain.leavegovernmentDate = props.data.leavegovernmentDate;
-    formDataTrain.leaveSalary = props.data.leaveSalary;
-    formDataTrain.leaveSalaryText = props.data.leaveSalaryText;
-    formDataTrain.leaveNumber = props.data.leaveNumber;
-    formDataTrain.leaveAddress = props.data.leaveAddress;
-    formDataTrain.studyDayScholarship = props.data.studyDayScholarship;
-    formDataTrain.studyDayCountry = props.data.studyDayCountry;
-    formDataTrain.studyDayTrainingSubject = props.data.studyDayTrainingSubject;
-    formDataTrain.studyDayTrainingName = props.data.studyDayTrainingName;
-    formDataTrain.leaveDetail = props.data.leaveDetail;
-    // formDataTrain.leaveDocument = props.data.leaveDocument;
-    const leaveTotal = await calculateDurationYmd(
-      new Date(props.data.leaveStartDate),
-      new Date(props.data.leaveEndDate)
-    );
-    formDataStudy.leaveTotal = leaveTotal;
-  }
-});
+	if (props.data) {
+		formDataTrain.leaveWrote = props.data.leaveWrote
+		formDataTrain.leaveStartDate = props.data.leaveStartDate
+		formDataTrain.leaveEndDate = props.data.leaveEndDate
+		formDataTrain.leaveTotal = props.data.leaveTotal
+		formDataTrain.leavebirthDate = props.data.leavebirthDate
+		formDataTrain.leavegovernmentDate = props.data.leavegovernmentDate
+		formDataTrain.leaveSalary = props.data.leaveSalary
+		formDataTrain.leaveSalaryText = props.data.leaveSalaryText
+		formDataTrain.leaveNumber = props.data.leaveNumber
+		formDataTrain.leaveAddress = props.data.leaveAddress
+		formDataTrain.studyDayScholarship = props.data.studyDayScholarship
+		formDataTrain.studyDayCountry = props.data.studyDayCountry
+		formDataTrain.studyDayTrainingSubject = props.data.studyDayTrainingSubject
+		formDataTrain.studyDayTrainingName = props.data.studyDayTrainingName
+		formDataTrain.leaveDetail = props.data.leaveDetail
+		// formDataTrain.leaveDocument = props.data.leaveDocument;
+		const leaveTotal = await calculateDurationYmd(props.data.leaveStartDate, props.data.leaveEndDate)
+		formDataTrain.leaveTotal = leaveTotal
+		leaveDocumentList.value = props.data.leaveDocument
+	}
+})
 </script>
 
 <template>
-  <div style="display: flex; align-items: center">
-    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-  </div>
-  <form @submit.prevent="onValidate">
-    <q-card bordered class="q-pa-md bg-grey-1">
-      <div class="row q-pa-sm q-col-gutter-sm">
-        <q-input
-          v-model="formDataTrain.leaveWrote"
-          ref="leaveWroteRef"
-          class="col-12 col-sm-12 cursor-pointer inputgreen"
-          bg-color="white"
-          dense
-          outlined
-          label="เขียนที่"
-          hide-bottom-space
-          :rules="[(val) => !!val || `${'เขียนที่'}`]"
-        />
+	<div style="display: flex; align-items: center">
+		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+	</div>
+	<form @submit.prevent="onValidate">
+		<q-card bordered class="q-pa-md bg-grey-1">
+			<div class="row q-pa-sm q-col-gutter-sm">
+				<q-input
+					v-model="formDataTrain.leaveWrote"
+					ref="leaveWroteRef"
+					class="col-12 col-sm-12 cursor-pointer inputgreen"
+					bg-color="white"
+					dense
+					outlined
+					label="เขียนที่"
+					hide-bottom-space
+					:rules="[val => !!val || `${'เขียนที่'}`]"
+				/>
 
-        <datepicker
-          v-model="formDataTrain.leaveStartDate"
-          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          autoApply
-          borderless
-          week-start="0"
-          :enableTimePicker="false"
-          :locale="'th'"
-          @update:model-value="formDataTrain.leaveEndDate = null"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              ref="leaveStartDateRef"
-              class="full-width datepicker"
-              bg-color="white"
-              outlined
-              dense
-              lazy-rules
-              hide-bottom-space
-              :label="`${'ลาตั้งแต่วันที่'}`"
-              :model-value="
-                formDataTrain.leaveStartDate != null
-                  ? date2Thai(formDataTrain.leaveStartDate)
-                  : null
-              "
-              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
+				<datepicker
+					v-model="formDataTrain.leaveStartDate"
+					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+					menu-class-name="modalfix"
+					autoApply
+					borderless
+					week-start="0"
+					:enableTimePicker="false"
+					:locale="'th'"
+					@update:model-value="formDataTrain.leaveEndDate = null"
+				>
+					<template #year="{ year }">
+						{{ year + 543 }}
+					</template>
+					<template #year-overlay-value="{ value }">
+						{{ parseInt(value + 543) }}
+					</template>
+					<template #trigger>
+						<q-input
+							ref="leaveStartDateRef"
+							class="full-width datepicker"
+							bg-color="white"
+							outlined
+							dense
+							lazy-rules
+							hide-bottom-space
+							:label="`${'ลาตั้งแต่วันที่'}`"
+							:model-value="formDataTrain.leaveStartDate != null ? date2Thai(formDataTrain.leaveStartDate) : null"
+							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+						>
+							<template v-slot:prepend>
+								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
+							</template>
+						</q-input>
+					</template>
+				</datepicker>
 
-        <datepicker
-          v-model="formDataTrain.leaveEndDate"
-          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          autoApply
-          borderless
-          @update:model-value="updateLeaveTotal()"
-          week-start="0"
-          :readonly="!formDataTrain.leaveStartDate"
-          :locale="'th'"
-          :enableTimePicker="false"
-          :min-date="formDataTrain.leaveStartDate"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              ref="leaveEndDateRef"
-              class="full-width datepicker"
-              outlined
-              dense
-              lazy-rules
-              bg-color="white"
-              hide-bottom-space
-              :label="`${'ลาถึงวันที่'}`"
-              :readonly="!formDataTrain.leaveStartDate"
-              :model-value="
-                formDataTrain.leaveEndDate != null
-                  ? date2Thai(formDataTrain.leaveEndDate)
-                  : null
-              "
-              :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
+				<datepicker
+					v-model="formDataTrain.leaveEndDate"
+					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+					menu-class-name="modalfix"
+					autoApply
+					borderless
+					@update:model-value="updateLeaveTotal()"
+					week-start="0"
+					:readonly="!formDataTrain.leaveStartDate"
+					:locale="'th'"
+					:enableTimePicker="false"
+					:min-date="formDataTrain.leaveStartDate"
+				>
+					<template #year="{ year }">
+						{{ year + 543 }}
+					</template>
+					<template #year-overlay-value="{ value }">
+						{{ parseInt(value + 543) }}
+					</template>
+					<template #trigger>
+						<q-input
+							ref="leaveEndDateRef"
+							class="full-width datepicker"
+							outlined
+							dense
+							lazy-rules
+							bg-color="white"
+							hide-bottom-space
+							:label="`${'ลาถึงวันที่'}`"
+							:readonly="!formDataTrain.leaveStartDate"
+							:model-value="formDataTrain.leaveEndDate != null ? date2Thai(formDataTrain.leaveEndDate) : null"
+							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+						>
+							<template v-slot:prepend>
+								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
+							</template>
+						</q-input>
+					</template>
+				</datepicker>
 
-        <q-input
-          class="col-12 col-md-2 col-sm-6"
-          dense
-          outlined
-          bg-color="white"
-          ref="leaveTotalRef"
-          for="leaveTotalRef"
-          v-model="formDataTrain.leaveTotal"
-          label="มีกำหนด"
-          readonly
-          hide-bottom-space
-        />
+				<q-input
+					class="col-12 col-md-2 col-sm-6"
+					dense
+					outlined
+					bg-color="white"
+					ref="leaveTotalRef"
+					for="leaveTotalRef"
+					v-model="formDataTrain.leaveTotal"
+					label="มีกำหนด"
+					readonly
+					hide-bottom-space
+				/>
 
-        <div class="full-width">
-          <div class="q-col-gutter-sm row">
-            <datepicker
-              v-model="formDataTrain.leavegovernmentDate"
-              class="col-12 col-md-3 col-sm-6"
-              menu-class-name="modalfix"
-              autoApply
-              borderless
-              week-start="0"
-              readonly
-              :enableTimePicker="false"
-              :locale="'th'"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  ref="leavegovernmentDateRef"
-                  class="full-width"
-                  outlined
-                  readonly
-                  bg-color="white"
-                  dense
-                  hide-bottom-space
-                  :label="`${'วันที่เข้ารับราชการ'}`"
-                  :model-value="
-                    formDataTrain.leavegovernmentDate != null
-                      ? date2Thai(formDataTrain.leavegovernmentDate)
-                      : null
-                  "
-                  :rules="[
-                    (val) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
-                  ]"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(--black)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
+				<div class="full-width">
+					<div class="q-col-gutter-sm row">
+						<datepicker
+							v-model="formDataTrain.leavegovernmentDate"
+							class="col-12 col-md-3 col-sm-6"
+							menu-class-name="modalfix"
+							autoApply
+							borderless
+							week-start="0"
+							readonly
+							:enableTimePicker="false"
+							:locale="'th'"
+						>
+							<template #year="{ year }">
+								{{ year + 543 }}
+							</template>
+							<template #year-overlay-value="{ value }">
+								{{ parseInt(value + 543) }}
+							</template>
+							<template #trigger>
+								<q-input
+									ref="leavegovernmentDateRef"
+									class="full-width"
+									outlined
+									readonly
+									bg-color="white"
+									dense
+									hide-bottom-space
+									:label="`${'วันที่เข้ารับราชการ'}`"
+									:model-value="formDataTrain.leavegovernmentDate != null ? date2Thai(formDataTrain.leavegovernmentDate) : null"
+									:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
+								>
+									<template v-slot:prepend>
+										<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
+									</template>
+								</q-input>
+							</template>
+						</datepicker>
 
-            <datepicker
-              v-model="formDataTrain.leavebirthDate"
-              class="col-12 col-md-3 col-sm-6"
-              menu-class-name="modalfix"
-              autoApply
-              borderless
-              readonly
-              week-start="0"
-              :enableTimePicker="false"
-              :locale="'th'"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  ref="leavebirthDateRef"
-                  class="full-width"
-                  bg-color="white"
-                  outlined
-                  dense
-                  readonly
-                  hide-bottom-space
-                  :label="`${'วันเดือนปีเกิด'}`"
-                  :model-value="
-                    formDataTrain.leavebirthDate != null
-                      ? date2Thai(formDataTrain.leavebirthDate)
-                      : null
-                  "
-                  :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-                >
-                  <template v-slot:prepend>
-                    <q-icon
-                      name="event"
-                      class="cursor-pointer"
-                      style="color: var(---black)"
-                    >
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
+						<datepicker
+							v-model="formDataTrain.leavebirthDate"
+							class="col-12 col-md-3 col-sm-6"
+							menu-class-name="modalfix"
+							autoApply
+							borderless
+							readonly
+							week-start="0"
+							:enableTimePicker="false"
+							:locale="'th'"
+						>
+							<template #year="{ year }">
+								{{ year + 543 }}
+							</template>
+							<template #year-overlay-value="{ value }">
+								{{ parseInt(value + 543) }}
+							</template>
+							<template #trigger>
+								<q-input
+									ref="leavebirthDateRef"
+									class="full-width"
+									bg-color="white"
+									outlined
+									dense
+									readonly
+									hide-bottom-space
+									:label="`${'วันเดือนปีเกิด'}`"
+									:model-value="formDataTrain.leavebirthDate != null ? date2Thai(formDataTrain.leavebirthDate) : null"
+									:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+								>
+									<template v-slot:prepend>
+										<q-icon name="event" class="cursor-pointer" style="color: var(---black)"> </q-icon>
+									</template>
+								</q-input>
+							</template>
+						</datepicker>
 
-            <q-input
-              v-model="formattedSalary"
-              class="col-12 col-sm-6 col-md-3"
-              bg-color="white"
-              dense
-              outlined
-              readonly
-              label="เงินเดือนปัจจุบัน"
-            />
+						<q-input v-model="formattedSalary" class="col-12 col-sm-6 col-md-3" bg-color="white" dense outlined readonly label="เงินเดือนปัจจุบัน" />
 
-            <q-input
-              v-model="formDataTrain.leaveSalaryText"
-              class="col-12 col-sm-6 col-md-3"
-              dense
-              readonly
-              outlined
-              bg-color="white"
-              label="เงินเดือนปัจจุบัน (ตัวอักษร)"
-            />
-          </div>
-        </div>
+						<q-input v-model="formDataTrain.leaveSalaryText" class="col-12 col-sm-6 col-md-3" dense readonly outlined bg-color="white" label="เงินเดือนปัจจุบัน (ตัวอักษร)" />
+					</div>
+				</div>
 
-        <div class="full-width">
-          <div class="q-col-gutter-sm row">
-            <q-input
-              v-model="formDataTrain.studyDayTrainingSubject"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-              ref="studyDayTrainingSubjectRef"
-              bg-color="white"
-              dense
-              outlined
-              label="ด้าน/หลักสูตร"
-              hide-bottom-space
-              :rules="[(val) => !!val || `${'กรุณากรอกด้าน/หลักสูตร'}`]"
-            />
+				<div class="full-width">
+					<div class="q-col-gutter-sm row">
+						<q-input
+							v-model="formDataTrain.studyDayTrainingSubject"
+							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+							ref="studyDayTrainingSubjectRef"
+							bg-color="white"
+							dense
+							outlined
+							label="ด้าน/หลักสูตร"
+							hide-bottom-space
+							:rules="[val => !!val || `${'กรุณากรอกด้าน/หลักสูตร'}`]"
+						/>
 
-            <q-input
-              v-model="formDataTrain.studyDayTrainingName"
-              ref="studyDayTrainingNameRef"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-              bg-color="white"
-              dense
-              outlined
-              label="ณ สถานที่"
-              hide-bottom-space
-              :rules="[(val) => !!val || `${'กรุณากรอก ณ สถานที่'}`]"
-            />
+						<q-input
+							v-model="formDataTrain.studyDayTrainingName"
+							ref="studyDayTrainingNameRef"
+							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+							bg-color="white"
+							dense
+							outlined
+							label="ณ สถานที่"
+							hide-bottom-space
+							:rules="[val => !!val || `${'กรุณากรอก ณ สถานที่'}`]"
+						/>
 
-            <q-input
-              v-model="formDataTrain.studyDayCountry"
-              ref="studyDayCountryRef"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-              dense
-              bg-color="white"
-              outlined
-              label="ประเทศ"
-              hide-bottom-space
-              :rules="[(val) => !!val || `${'กรุณากรอกประเทศ'}`]"
-            />
+						<q-input
+							v-model="formDataTrain.studyDayCountry"
+							ref="studyDayCountryRef"
+							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+							dense
+							bg-color="white"
+							outlined
+							label="ประเทศ"
+							hide-bottom-space
+							:rules="[val => !!val || `${'กรุณากรอกประเทศ'}`]"
+						/>
 
-            <q-input
-              v-model="formDataTrain.studyDayScholarship"
-              ref="studyDayScholarshipRef"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-              bg-color="white"
-              dense
-              outlined
-              label="ด้วยทุน"
-              hide-bottom-space
-              :rules="[(val) => !!val || `${'กรุณากรอกด้วยทุน'}`]"
-            />
+						<q-input
+							v-model="formDataTrain.studyDayScholarship"
+							ref="studyDayScholarshipRef"
+							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+							bg-color="white"
+							dense
+							outlined
+							label="ด้วยทุน"
+							hide-bottom-space
+							:rules="[val => !!val || `${'กรุณากรอกด้วยทุน'}`]"
+						/>
 
-            <q-input
-              v-model="formDataTrain.leaveNumber"
-              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-              ref="leaveNumberRef"
-              dense
-              outlined
-              unmasked-value
-              hide-bottom-space
-              bg-color="white"
-              mask="(###)-###-####"
-              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-              :rules="[
-                (val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
-              ]"
-            />
+						<q-input
+							v-model="formDataTrain.leaveNumber"
+							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+							ref="leaveNumberRef"
+							dense
+							outlined
+							unmasked-value
+							hide-bottom-space
+							bg-color="white"
+							mask="(###)-###-####"
+							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
+						/>
 
-            <q-input
-              v-model="formDataTrain.leaveAddress"
-              ref="leaveAddressRef"
-              class="col-12 cursor-pointer inputgreen"
-              bg-color="white"
-              dense
-              outlined
-              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-              hide-bottom-space
-              :rules="[
-                (val) => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
-              ]"
-            />
-          </div>
-        </div>
+						<q-input
+							v-model="formDataTrain.leaveAddress"
+							ref="leaveAddressRef"
+							class="col-12 cursor-pointer inputgreen"
+							bg-color="white"
+							dense
+							outlined
+							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+							hide-bottom-space
+							:rules="[val => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
+						/>
+					</div>
+				</div>
 
-        <q-input
-          v-model="formDataTrain.leaveDetail"
-          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-          bg-color="white"
-          dense
-          outlined
-          type="textarea"
-          label="รายละเอียด"
-        />
+				<q-input v-model="formDataTrain.leaveDetail" class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
 
-        <div class="col-12">
-          <!-- multiple -->
-          <q-file
-            v-model="formDataTrain.leaveDocument"
-            bg-color="white"
-            dense
-            outlined
-            label="เอกสารประกอบ"
-          >
-            <template v-slot:prepend>
-              <q-icon name="attach_file" color="primary" />
-            </template>
-          </q-file>
-        </div>
+				<div class="col-12">
+					<!-- multiple -->
+					<q-file v-model="formDataTrain.leaveDocument" bg-color="white" multiple dense outlined label="เอกสารประกอบ">
+						<template v-slot:prepend>
+							<q-icon name="attach_file" color="primary" />
+						</template>
+					</q-file>
+					<!-- <div class="col-12" v-if="formDataTrain.leaveDocument.length == 0">
+						<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
+					</div> -->
+					<div class="col-12" v-if="data">
+						<div class="col-12 col-md-12 col-sm-12">
+							<q-card bordered>
+								<!-- <div class="col-12">
+								<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ{{ leaveDocumentList }} </q-card>
+							</div> -->
+								<q-list separator>
+									<q-item v-for="(document, index) in leaveDocumentList" :key="index" class="q-my-xs">
+										<q-item-section>
+											<q-item-label class="row items-baseline">
+												<div class="col">
+													{{ "เอกสารแนบฉบับที่" + (index + 1) }}
+												</div>
+												<q-btn class="col-6" :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
+													<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+												</q-btn>
+											</q-item-label>
+										</q-item-section>
+									</q-item>
+								</q-list>
+							</q-card>
+						</div>
+					</div>
+				</div>
 
-        <div class="col-12 row" v-if="!edit">
-          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-            <div class="q-pl-sm text-weight-bold text-dark">
-              เอกสารเพิ่มเติม
-            </div>
-          </div>
-          <q-card bordered flat class="full-width">
-            <q-list separator>
-              <q-item v-for="file in files" :key="file.key" class="q-my-xs">
-                <q-item-section>
-                  <q-item-label class="full-width ellipsis">
-                    {{ file.fileName }}
-                  </q-item-label>
-
-                  <q-item-label caption> </q-item-label>
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-card>
-        </div>
-      </div>
-    </q-card>
-    <q-separator class="q-mt-sm" />
-    <div class="row col-12 q-pt-md">
-      <q-space />
-      <q-btn
-        v-if="!props.data || props.data.status == 'DRAFT'"
-        id="onSubmit"
-        type="submit"
-        unelevated
-        dense
-        class="q-px-md items-center btnBlue"
-        label="บันทึก"
-        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
-      >
-      <q-btn
-        v-if="data"
-        id="onSubmit"
-        type="button"
-        unelevated
-        dense
-        class="q-px-md items-center q-ml-sm"
-        color="primary"
-        label="ยื่นใบลา"
-        @click="onConfirm"
-        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
-      >
-    </div>
-  </form>
+				<div class="col-12 col-sm-6 row" v-if="!edit">
+					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
+					</div>
+					<q-card bordered flat class="full-width">
+						<q-list separator>
+							<q-item v-for="(file, index) in leaveDocumentList" :key="index" class="q-my-xs">
+								<q-item-section>
+									<q-item-label class="full-width ellipsis">
+										{{ file.name }}
+									</q-item-label>
+									<q-item-label caption> </q-item-label>
+								</q-item-section>
+							</q-item>
+						</q-list>
+					</q-card>
+				</div>
+			</div>
+		</q-card>
+		<q-separator class="q-mt-sm" />
+		<div class="row col-12 q-pt-md">
+			<q-space />
+			<q-btn v-if="!props.data || props.data.status == 'DRAFT'" id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"
+				><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+			>
+			<q-btn v-if="data" id="onSubmit" type="button" unelevated dense class="q-px-md items-center q-ml-sm" color="primary" label="ยื่นใบลา" @click="onConfirm"
+				><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+			>
+		</div>
+	</form>
 </template>
diff --git a/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue b/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
index ce2d0b5..2c83133 100644
--- a/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
+++ b/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
@@ -1,309 +1,275 @@
 <script setup lang="ts">
-import { ref, reactive, watch, onMounted } from "vue";
-import type { FormRef } from "@/modules/05_leave/interface/request/WorkInternationalForm";
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
-import { useLeaveStore } from "@/modules/05_leave/store";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useRouter } from "vue-router";
-import genReport from "@/plugins/genreport";
+import { ref, reactive, watch, onMounted } from "vue"
+import type { FormRef } from "@/modules/05_leave/interface/request/WorkInternationalForm"
+import { useCounterMixin } from "@/stores/mixin"
+import { useQuasar } from "quasar"
+import { useLeaveStore } from "@/modules/05_leave/store"
+import http from "@/plugins/http"
+import config from "@/app.config"
+import { useRouter } from "vue-router"
+import genReport from "@/plugins/genreport"
 
 /** Use */
-const dataStore = useLeaveStore();
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const { date2Thai, dialogConfirm, fails, dateToISO, success, messageError, showLoader } =
-  mixin;
-const edit = ref<boolean>(true);
-const router = useRouter();
-const isSave = ref<boolean>(false);
+const dataStore = useLeaveStore()
+const $q = useQuasar()
+const mixin = useCounterMixin()
+const { date2Thai, dialogConfirm, fails, dateToISO, success, messageError, showLoader, hideLoader } = mixin
+const edit = ref<boolean>(true)
+const router = useRouter()
+const isSave = ref<boolean>(false)
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
-  data: {
-    type: Object,
-    default: null,
-  },
-  onSubmit: {
-    type: Function,
-    default: () => "",
-  },
-  onConfirm: {
-    type: Function,
-    default: () => "",
-  },
-});
+	data: {
+		type: Object,
+		default: null,
+	},
+	onSubmit: {
+		type: Function,
+		default: () => "",
+	},
+	onConfirm: {
+		type: Function,
+		default: () => "",
+	},
+})
 
 /** ข้อมูล v-model ของฟอร์ม */
 const formDataWorkInternational = reactive<any>({
-  type: dataStore.typeId,
-  leaveWrote: "",
-  leaveStartDate: null,
-  leaveEndDate: null,
-  leaveDetail: "",
-  leaveDocument: null,
-  leaveDraftDocument: [],
-});
+	type: dataStore.typeId,
+	leaveWrote: "",
+	leaveStartDate: null,
+	leaveEndDate: null,
+	leaveDetail: "",
+	leaveDocument: null,
+	leaveDraftDocument: [],
+})
 
 /** ตัวแปร ref สำหรับแสดง validate */
-const leaveWroteRef = ref<object | null>(null);
-const leaveStartDateRef = ref<object | null>(null);
-const leaveEndDateRef = ref<object | null>(null);
-const leaveDetailRef = ref<object | null>(null);
-const leaveDocumentRef = ref<object | null>(null);
+const leaveWroteRef = ref<object | null>(null)
+const leaveStartDateRef = ref<object | null>(null)
+const leaveEndDateRef = ref<object | null>(null)
+const leaveDetailRef = ref<object | null>(null)
+const leaveDocumentRef = ref<object | null>(null)
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const FormRef: FormRef = {
-  leaveWrote: leaveWroteRef,
-  leaveStartDate: leaveStartDateRef,
-  leaveEndDate: leaveEndDateRef,
-  leaveDetail: leaveDetailRef,
-  leaveDocument: leaveDocumentRef,
-};
+	leaveWrote: leaveWroteRef,
+	leaveStartDate: leaveStartDateRef,
+	leaveEndDate: leaveEndDateRef,
+	leaveDetail: leaveDetailRef,
+	leaveDocument: leaveDocumentRef,
+}
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("");
-const nameFileDraft = ref<string>("");
-const fileDocDataUpload = ref<File[]>([]);
+const nameFile = ref<string>("")
+const nameFileDraft = ref<string>("")
+const fileDocDataUpload = ref<File[]>([])
 const fileUploadDoc = async (files: any) => {
-  files.forEach((file: any) => {
-    fileDocDataUpload.value.push(file);
-  });
-};
+	files.forEach((file: any) => {
+		fileDocDataUpload.value.push(file)
+	})
+}
 
 /** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
 function onValidate() {
-  const hasError = [];
-  for (const key in FormRef) {
-    if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
-      const property = FormRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  // ถ้า Validate ผ่านให้บันทึกข้อมูล
-  if (hasError.every((result) => result === true)) {
-    const formData = new FormData();
+	const hasError = []
+	for (const key in FormRef) {
+		if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
+			const property = FormRef[key]
+			if (property.value && typeof property.value.validate === "function") {
+				const isValid = property.value.validate()
+				hasError.push(isValid)
+			}
+		}
+	}
+	// ถ้า Validate ผ่านให้บันทึกข้อมูล
+	if (hasError.every(result => result === true)) {
+		const formData = new FormData()
 
-    if (formDataWorkInternational.leaveDocument) {
-      // //
-      // if (formDataWorkInternational.leaveDocument.length > 0) {
-      // 	const blob = formDataWorkInternational.leaveDocument.slice(0, formDataWorkInternational.leaveDocument[0].size)
-      // 	const newFile = new File(blob, nameFile.value, {
-      // 		type: formDataWorkInternational.leaveDocument[0].type,
-      // 	})
-      // 	formData.append("leaveDocument", newFile)
-      // }
+		if (formDataWorkInternational.leaveDocument) {
+			formDataWorkInternational.leaveDocument.forEach((file: File) => {
+				formData.append("leaveDocument", file)
+			})
 
-      formData.append("leaveDocument", formDataWorkInternational.leaveDocument);
-    }
+			// formData.append("leaveDocument", formDataWorkInternational.leaveDocument)
+		}
 
-    if (formDataWorkInternational.leaveDraftDocument) {
-      formData.append(
-        "leaveDraftDocument",
-        formDataWorkInternational.leaveDraftDocument
-      );
-    }
-    formData.append("type", formDataWorkInternational.type); //
-    formData.append(
-      "leaveStartDate",
-      dateToISO(formDataWorkInternational.leaveStartDate)
-    ); //
-    formData.append(
-      "leaveEndDate",
-      dateToISO(formDataWorkInternational.leaveEndDate)
-    ); //
-    formData.append("leaveWrote", formDataWorkInternational.leaveWrote); //
-    formData.append("leaveDetail", formDataWorkInternational.leaveDetail); //
-    props.onSubmit(formData);
-  }
+		if (formDataWorkInternational.leaveDraftDocument) {
+			formData.append("leaveDraftDocument", formDataWorkInternational.leaveDraftDocument)
+		}
+		formData.append("type", formDataWorkInternational.type) //
+		formData.append("leaveStartDate", dateToISO(formDataWorkInternational.leaveStartDate)) //
+		formData.append("leaveEndDate", dateToISO(formDataWorkInternational.leaveEndDate)) //
+		formData.append("leaveWrote", formDataWorkInternational.leaveWrote) //
+		formData.append("leaveDetail", formDataWorkInternational.leaveDetail) //
+		props.onSubmit(formData)
+	}
 }
 
 //download function
 async function onClickDownloadFile(id: string, fileName: string) {
-  showLoader();
-  await http
-    .get(config.API.leaveReport(id))
-    .then(async (res) => {
-      const data = res.data.result;
-      await genReport(data, fileName);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+	showLoader()
+	await http
+		.get(config.API.leaveReport(id))
+		.then(async res => {
+			const data = res.data.result
+			await genReport(data, fileName)
+		})
+		.catch(err => {
+			messageError($q, err)
+		})
+		.finally(() => {
+			hideLoader()
+		})
 }
 
 /**
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
-const isLeave = ref<boolean>(true);
+const isLeave = ref<boolean>(true)
 async function FetchCheck() {
-  await http
-    .post(config.API.leaveCheck(), {
-      type: dataStore.typeId ?? null,
-      StartLeaveDate: formDataWorkInternational.leaveStartDate ?? null,
-      EndLeaveDate: formDataWorkInternational.leaveEndDate ?? null,
-    })
-    .then((res: any) => {
-      const data = res.data.result;
-      isLeave.value = data.isLeave;
-      if (data.isLeave === true) {
-        formDataWorkInternational.leaveTotal =
-          data.totalDate - data.sumDateWork - data.sumDateHoliday;
-        // formDataWorkInternational.leaveLast = data.totalDate
-      } else {
-        fails($q, "ไม่สามารถลาได้");
-      }
-    })
-    .catch((e: any) => {
-      messageError($q, e);
-    });
+	await http
+		.post(config.API.leaveCheck(), {
+			type: dataStore.typeId ?? null,
+			StartLeaveDate: formDataWorkInternational.leaveStartDate ?? null,
+			EndLeaveDate: formDataWorkInternational.leaveEndDate ?? null,
+		})
+		.then((res: any) => {
+			const data = res.data.result
+			isLeave.value = data.isLeave
+			if (data.isLeave === true) {
+				formDataWorkInternational.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
+				// formDataWorkInternational.leaveLast = data.totalDate
+			} else {
+				fails($q, "ไม่สามารถลาได้")
+			}
+		})
+		.catch((e: any) => {
+			messageError($q, e)
+		})
 }
 
-const leaveDraftDocument = ref<string>();
+const leaveDocumentList = ref<any>()
+const leaveDraftDocument = ref<string>()
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 onMounted(() => {
-  if (props.data) {
-    formDataWorkInternational.leaveWrote = props.data.leaveWrote;
-    formDataWorkInternational.leaveStartDate = new Date(
-      props.data.leaveStartDate
-    );
-    formDataWorkInternational.leaveEndDate = new Date(props.data.leaveEndDate);
-    formDataWorkInternational.leaveDetail = props.data.leaveDetail;
-    // formDataWorkInternational.leaveDocument = props.data.leaveDocument;
-    leaveDraftDocument.value = props.data.leaveDraftDocument;
-  }
-});
+	if (props.data) {
+		formDataWorkInternational.leaveWrote = props.data.leaveWrote
+		formDataWorkInternational.leaveStartDate = new Date(props.data.leaveStartDate)
+		formDataWorkInternational.leaveEndDate = new Date(props.data.leaveEndDate)
+		formDataWorkInternational.leaveDetail = props.data.leaveDetail
+		// formDataWorkInternational.leaveDocument = props.data.leaveDocument;
+		leaveDraftDocument.value = props.data.leaveDraftDocument
+		leaveDocumentList.value = props.data.leaveDocument
+	}
+})
 </script>
 
 <template>
-  <div style="display: flex; align-items: center">
-    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-  </div>
-  <form @submit.prevent.stop="onValidate">
-    <q-card bordered class="q-pa-md bg-grey-1">
-      <div class="col-12 row q-pa-sm q-col-gutter-sm">
-        <q-input
-          class="col-12 col-sm-12 cursor-pointer inputgreen"
-          ref="leaveWroteRef"
-          hide-bottom-space
-          bg-color="white"
-          for="leaveWroteRef"
-          dense
-          outlined
-          v-model="formDataWorkInternational.leaveWrote"
-          label="เขียนที่"
-          :readonly="!edit"
-          :rules="[(val) => !!val || `${'เขียนที่'}`]"
-        />
+	<div style="display: flex; align-items: center">
+		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+	</div>
+	<form @submit.prevent.stop="onValidate">
+		<q-card bordered class="q-pa-md bg-grey-1">
+			<div class="col-12 row q-pa-sm q-col-gutter-sm">
+				<q-input
+					class="col-12 col-sm-12 cursor-pointer inputgreen"
+					ref="leaveWroteRef"
+					hide-bottom-space
+					bg-color="white"
+					for="leaveWroteRef"
+					dense
+					outlined
+					v-model="formDataWorkInternational.leaveWrote"
+					label="เขียนที่"
+					:readonly="!edit"
+					:rules="[val => !!val || `${'เขียนที่'}`]"
+				/>
 
-        <datepicker
-          class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          v-model="formDataWorkInternational.leaveStartDate"
-          :locale="'th'"
-          hide-bottom-space
-          autoApply
-          borderless
-          :enableTimePicker="false"
-          week-start="0"
-          :readonly="!edit"
-          @update:model-value="formDataWorkInternational.leaveEndDate = null"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              outlined
-              dense
-              ref="leaveStartDateRef"
-              for="leaveStartDateRef"
-              hide-bottom-space
-              bg-color="white"
-              :readonly="!edit"
-              class="full-width datepicker"
-              :model-value="
-                formDataWorkInternational.leaveStartDate != null
-                  ? date2Thai(formDataWorkInternational.leaveStartDate)
-                  : null
-              "
-              :label="`${'ลาตั้งแต่วันที่'}`"
-              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
+				<datepicker
+					class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
+					menu-class-name="modalfix"
+					v-model="formDataWorkInternational.leaveStartDate"
+					:locale="'th'"
+					hide-bottom-space
+					autoApply
+					borderless
+					:enableTimePicker="false"
+					week-start="0"
+					:readonly="!edit"
+					@update:model-value="formDataWorkInternational.leaveEndDate = null"
+				>
+					<template #year="{ year }">
+						{{ year + 543 }}
+					</template>
+					<template #year-overlay-value="{ value }">
+						{{ parseInt(value + 543) }}
+					</template>
+					<template #trigger>
+						<q-input
+							outlined
+							dense
+							ref="leaveStartDateRef"
+							for="leaveStartDateRef"
+							hide-bottom-space
+							bg-color="white"
+							:readonly="!edit"
+							class="full-width datepicker"
+							:model-value="formDataWorkInternational.leaveStartDate != null ? date2Thai(formDataWorkInternational.leaveStartDate) : null"
+							:label="`${'ลาตั้งแต่วันที่'}`"
+							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+						>
+							<template v-slot:prepend>
+								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
+							</template>
+						</q-input>
+					</template>
+				</datepicker>
 
-        <datepicker
-          class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          v-model="formDataWorkInternational.leaveEndDate"
-          :locale="'th'"
-          autoApply
-          hide-bottom-space
-          borderless
-          :enableTimePicker="false"
-          @update:model-value="FetchCheck()"
-          week-start="0"
-          :readonly="!formDataWorkInternational.leaveStartDate"
-          :min-date="formDataWorkInternational.leaveStartDate"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              outlined
-              dense
-              ref="leaveEndDateRef"
-              for="leaveEndDateRef"
-              hide-bottom-space
-              bg-color="white"
-              :readonly="!formDataWorkInternational.leaveStartDate"
-              class="full-width datepicker"
-              :model-value="
-                formDataWorkInternational.leaveEndDate != null
-                  ? date2Thai(formDataWorkInternational.leaveEndDate)
-                  : 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
+				<datepicker
+					class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
+					menu-class-name="modalfix"
+					v-model="formDataWorkInternational.leaveEndDate"
+					:locale="'th'"
+					autoApply
+					hide-bottom-space
+					borderless
+					:enableTimePicker="false"
+					@update:model-value="FetchCheck()"
+					week-start="0"
+					:readonly="!formDataWorkInternational.leaveStartDate"
+					:min-date="formDataWorkInternational.leaveStartDate"
+				>
+					<template #year="{ year }">
+						{{ year + 543 }}
+					</template>
+					<template #year-overlay-value="{ value }">
+						{{ parseInt(value + 543) }}
+					</template>
+					<template #trigger>
+						<q-input
+							outlined
+							dense
+							ref="leaveEndDateRef"
+							for="leaveEndDateRef"
+							hide-bottom-space
+							bg-color="white"
+							:readonly="!formDataWorkInternational.leaveStartDate"
+							class="full-width datepicker"
+							:model-value="formDataWorkInternational.leaveEndDate != null ? date2Thai(formDataWorkInternational.leaveEndDate) : 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-md-3 col-sm-12"
 							dense
 							outlined
@@ -316,155 +282,139 @@ onMounted(() => {
 							:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
 						/> -->
 
-        <q-input
-          hide-bottom-space
-          type="textarea"
-          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-          dense
-          bg-color="white"
-          outlined
-          ref="leaveDetailRef"
-          for="leaveDetailRef"
-          v-model="formDataWorkInternational.leaveDetail"
-          label="รายละเอียด"
-          :readonly="!edit"
-        />
+				<q-input
+					hide-bottom-space
+					type="textarea"
+					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+					dense
+					bg-color="white"
+					outlined
+					ref="leaveDetailRef"
+					for="leaveDetailRef"
+					v-model="formDataWorkInternational.leaveDetail"
+					label="รายละเอียด"
+					:readonly="!edit"
+				/>
 
-        <q-file
-          ref="fileRef"
-          bg-color="white"
-          v-model="formDataWorkInternational.leaveDocument"
-          @added="fileUploadDoc"
-          dense
-          label="เอกสารประกอบ"
-          outlined
-          use-chips
-          class="q-pl-sm col-12"
-        >
-          <template v-slot:prepend>
-            <q-icon name="attach_file" color="primary" />
-          </template>
-        </q-file>
+				<q-file
+					ref="fileRef"
+					bg-color="white"
+					v-model="formDataWorkInternational.leaveDocument"
+					multiple
+					@added="fileUploadDoc"
+					dense
+					label="เอกสารประกอบ"
+					outlined
+					use-chips
+					class="q-pl-sm col-12"
+				>
+					<template v-slot:prepend>
+						<q-icon name="attach_file" color="primary" />
+					</template>
+				</q-file>
+				<!-- <div class="col-12" v-if="formDataWorkInternational.leaveDocument.length == 0">
+					<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
+				</div> -->
+				<div class="col-12" v-if="data">
+					<div class="col-12 col-md-12 col-sm-12">
+						<q-card bordered>
+							<!-- <div class="col-12">
+								<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ{{ leaveDocumentList }} </q-card>
+							</div> -->
+							<q-list separator>
+								<q-item v-for="(document, index) in leaveDocumentList" :key="index" class="q-my-xs">
+									<q-item-section>
+										<q-item-label class="row items-baseline">
+											<div class="col">
+												{{ "เอกสารแนบฉบับที่" + (index + 1) }}
+											</div>
+											<q-btn class="col-6" :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
+												<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+											</q-btn>
+										</q-item-label>
+									</q-item-section>
+								</q-item>
+							</q-list>
+						</q-card>
+					</div>
+				</div>
 
-        <div class="col-12 row" v-if="!edit">
-          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-            <div class="q-pl-sm text-weight-bold text-dark">
-              เอกสารเพิ่มเติม
-            </div>
-          </div>
-          <q-card bordered flat class="full-width">
-            <q-list separator>
-              <q-item
-                v-for="(file, index) in formDataWorkInternational.leaveDocument"
-                :key="index"
-                class="q-my-xs"
-              >
-                <q-item-section>
-                  <q-item-label class="full-width ellipsis">
-                    {{ file.name }}
-                  </q-item-label>
-                  <q-item-label caption> </q-item-label>
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-card>
-        </div>
-      </div>
-    </q-card>
+				<div class="col-12 col-sm-6 row" v-if="!edit">
+					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
+					</div>
+					<q-card bordered flat class="full-width">
+						<q-list separator>
+							<q-item v-for="(file, index) in leaveDocumentList" :key="index" class="q-my-xs">
+								<q-item-section>
+									<q-item-label class="full-width ellipsis">
+										{{ file.name }}
+									</q-item-label>
+									<q-item-label caption> </q-item-label>
+								</q-item-section>
+							</q-item>
+						</q-list>
+					</q-card>
+				</div>
+			</div>
+		</q-card>
 
-    <div v-if="data && data.id" class="q-mt-md">
-      <div style="display: flex; align-items: center">
-        <q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
-        <div class="q-pl-sm text-weight-bold text-dark">
-          ดาวน์โหลด/อัปโหลดแบบฟอร์ม
-        </div>
-      </div>
-      <q-card class="bg-grey-1 q-pa-sm" bordered>
-        <div class="row">
-          <div class="col-sm-3 q-my-sm">
-            <div class="column q-mx-xs">
-              <!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
+		<div v-if="data && data.id" class="q-mt-md">
+			<div style="display: flex; align-items: center">
+				<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
+				<div class="q-pl-sm text-weight-bold text-dark">ดาวน์โหลด/อัปโหลดแบบฟอร์ม</div>
+			</div>
+			<q-card class="bg-grey-1 q-pa-sm" bordered>
+				<div class="row">
+					<div class="col-sm-3 q-my-sm">
+						<div class="column q-mx-xs">
+							<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
                 ดาวน์โหลด
               </div> -->
-              <q-btn
-                color="primary"
-                icon="download"
-                label="ดาวน์โหลดแบบฟอร์ม"
-                @click="onClickDownloadFile(data.id, `แบบฟอร์ม${data.leaveTypeName}`)"
-              />
-            </div>
-          </div>
-          <div class="col-sm-5 q-my-sm">
-            <div class="column q-mx-xs">
-              <!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
+							<q-btn color="primary" icon="download" label="ดาวน์โหลดแบบฟอร์ม" @click="onClickDownloadFile(data.id, `แบบฟอร์ม${data.leaveTypeName}`)" />
+						</div>
+					</div>
+					<div class="col-sm-5 q-my-sm">
+						<div class="column q-mx-xs">
+							<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
                 อัปโหลด
               </div> -->
-              <q-file
-                v-model="formDataWorkInternational.leaveDraftDocument"
-                use-chips
-                dense
-                label="อัปโหลดแบบฟอร์ม"
-                outlined
-                bg-color="white"
-                accept="application/pdf"
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" color="primary" />
-                </template>
-              </q-file>
-            </div>
-          </div>
+							<q-file v-model="formDataWorkInternational.leaveDraftDocument" use-chips dense label="อัปโหลดแบบฟอร์ม" outlined bg-color="white" accept="application/pdf">
+								<template v-slot:prepend>
+									<q-icon name="attach_file" color="primary" />
+								</template>
+							</q-file>
+						</div>
+					</div>
 
-          <div v-if="leaveDraftDocument" class="col-sm-2 q-my-sm">
-            <div class="column q-mx-xs">
-              <!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
+					<div v-if="leaveDraftDocument" class="col-sm-2 q-my-sm">
+						<div class="column q-mx-xs">
+							<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
                 ดูไฟล์อัปโหลด
               </div> -->
-              <q-btn
-                icon="visibility"
-                color="blue"
-                label="ดาวน์โหลดไฟล์"
-                :href="leaveDraftDocument"
-                target="_blank"
-              />
-            </div>
-          </div>
-          <!-- <div class="col-md-1 self-end q-mb-sm">
+							<q-btn icon="visibility" color="blue" label="ดาวน์โหลดไฟล์" :href="leaveDraftDocument" target="_blank" />
+						</div>
+					</div>
+					<!-- <div class="col-md-1 self-end q-mb-sm">
 						<q-btn v-if="formDataWorkInternational.leaveDraftDocument != null" use-chips flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"
 							><q-tooltip>อัปโหลด</q-tooltip></q-btn
 						>
 					</div> -->
-        </div>
-      </q-card>
-    </div>
+				</div>
+			</q-card>
+		</div>
 
-    <div v-if="!isSave">
-      <q-separator class="q-mt-sm" />
-      <div class="row col-12 q-pt-md">
-        <q-space />
-        <q-btn
-          v-if="!props.data || props.data.status == 'DRAFT'"
-          id="onSubmit"
-          type="submit"
-          unelevated
-          dense
-          class="q-px-md items-center btnBlue"
-          label="บันทึก"
-          ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
-        >
-        <q-btn
-          v-if="data"
-          id="onSubmit"
-          type="button"
-          unelevated
-          dense
-          class="q-px-md items-center q-ml-sm"
-          color="primary"
-          label="ยื่นใบลา"
-          @click="onConfirm"
-          ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
-        >
-      </div>
-    </div>
-  </form>
+		<div v-if="!isSave">
+			<q-separator class="q-mt-sm" />
+			<div class="row col-12 q-pt-md">
+				<q-space />
+				<q-btn v-if="!props.data || props.data.status == 'DRAFT'" id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"
+					><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+				>
+				<q-btn v-if="data" id="onSubmit" type="button" unelevated dense class="q-px-md items-center q-ml-sm" color="primary" label="ยื่นใบลา" @click="onConfirm"
+					><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+				>
+			</div>
+		</div>
+	</form>
 </template>
diff --git a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
index 127cfb2..db1d633 100644
--- a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
@@ -1,698 +1,609 @@
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted } from "vue";
-import type {
-  FormData,
-  FormRef,
-} from "@/modules/05_leave/interface/request/FollowSpouseForm";
-import { useCounterMixin } from "@/stores/mixin";
-import { useLeaveStore } from "@/modules/05_leave/store";
-import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useRouter } from "vue-router";
+import { ref, reactive, computed, onMounted } from "vue"
+import type { FormData, FormRef } from "@/modules/05_leave/interface/request/FollowSpouseForm"
+import { useCounterMixin } from "@/stores/mixin"
+import { useLeaveStore } from "@/modules/05_leave/store"
+import { useQuasar } from "quasar"
+import http from "@/plugins/http"
+import config from "@/app.config"
+import { useRouter } from "vue-router"
 
 /** Use */
-const dataStore = useLeaveStore();
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const router = useRouter();
-const {
-  dialogConfirm,
-  date2Thai,
-  arabicNumberToText,
-  calculateDurationYmd,
-  dateToISO,
-  fails,
-  success,
-  messageError,
-} = mixin;
-const edit = ref<boolean>(true);
+const dataStore = useLeaveStore()
+const $q = useQuasar()
+const mixin = useCounterMixin()
+const router = useRouter()
+const { dialogConfirm, date2Thai, arabicNumberToText, calculateDurationYmd, dateToISO, fails, success, messageError } = mixin
+const edit = ref<boolean>(true)
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
-  data: {
-    type: Object,
-    default: null,
-  },
-  onSubmit: {
-    type: Function,
-    default: () => "",
-  },
-  onConfirm: {
-    type: Function,
-    default: () => "",
-  },
-});
+	data: {
+		type: Object,
+		default: null,
+	},
+	onSubmit: {
+		type: Function,
+		default: () => "",
+	},
+	onConfirm: {
+		type: Function,
+		default: () => "",
+	},
+})
 
 /** ข้อมูล v-model ของฟอร์ม */
 const formDataFollowSpouse = reactive<any>({
-  type: dataStore.typeId,
-  leaveWrote: "",
-  leaveStartDate: null,
-  leaveEndDate: null,
-  leaveTotal: "", //จำนวนวันลา
-  leaveSalaryText: "",
-  leaveSalary: 0, //เงินเดือนปัจจุบัน
-  coupleDayName: "", //ชื่อคู่สมรส
-  coupleDayPosition: "", //ตำแหน่งคู่สมรส
-  coupleDayLevel: "", //ระดับคู่สมรส
-  coupleDayLevelCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ
-  coupleDayCountryHistory: "", //ประวัติการลาติดตามคู่สมรส
-  coupleDayTotalHistory: null,
-  coupleDayStartDateHistory: null,
-  coupleDayEndDateHistory: null,
-  leaveDetail:
-    "ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา ...ปี, ...เดือน, ...วัน", //รายละเอียดการลา
-  leaveDocument: [], //เอกสารปะกอบ
-});
+	type: dataStore.typeId,
+	leaveWrote: "",
+	leaveStartDate: null,
+	leaveEndDate: null,
+	leaveTotal: "", //จำนวนวันลา
+	leaveSalaryText: "",
+	leaveSalary: 0, //เงินเดือนปัจจุบัน
+	coupleDayName: "", //ชื่อคู่สมรส
+	coupleDayPosition: "", //ตำแหน่งคู่สมรส
+	coupleDayLevel: "", //ระดับคู่สมรส
+	coupleDayLevelCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ
+	coupleDayCountryHistory: "", //ประวัติการลาติดตามคู่สมรส
+	coupleDayTotalHistory: null,
+	coupleDayStartDateHistory: null,
+	coupleDayEndDateHistory: null,
+	leaveDetail: "ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา ...ปี, ...เดือน, ...วัน", //รายละเอียดการลา
+	leaveDocument: [], //เอกสารปะกอบ
+})
 
 /** ตัวแปร ref สำหรับแสดง validate */
-const leaveWroteRef = ref<object | null>(null);
-const leaveStartDateRef = ref<object | null>(null);
-const leaveEndDateRef = ref<object | null>(null);
-const leaveSalaryRef = ref<object | null>(null);
-const leaveTotalRef = ref<object | null>(null);
-const coupleDayNameRef = ref<object | null>(null);
-const leaveAddressRef = ref<object | null>(null);
-const leaveDetailRef = ref<object | null>(null);
-const coupleDayPositionRef = ref<object | null>(null);
-const coupleDayLevelRef = ref<object | null>(null);
-const coupleDayLevelCountryRef = ref<object | null>(null);
-const coupleDayCountryHistoryRef = ref<object | null>(null);
-const coupleDayTotalHistoryRef = ref<object | null>(null);
-const coupleDayStartDateHistoryRef = ref<object | null>(null);
-const coupleDayEndDateHistoryRef = ref<object | null>(null);
-const leaveDocumentRef = ref<object | null>(null);
+const leaveWroteRef = ref<object | null>(null)
+const leaveStartDateRef = ref<object | null>(null)
+const leaveEndDateRef = ref<object | null>(null)
+const leaveSalaryRef = ref<object | null>(null)
+const leaveTotalRef = ref<object | null>(null)
+const coupleDayNameRef = ref<object | null>(null)
+const leaveAddressRef = ref<object | null>(null)
+const leaveDetailRef = ref<object | null>(null)
+const coupleDayPositionRef = ref<object | null>(null)
+const coupleDayLevelRef = ref<object | null>(null)
+const coupleDayLevelCountryRef = ref<object | null>(null)
+const coupleDayCountryHistoryRef = ref<object | null>(null)
+const coupleDayTotalHistoryRef = ref<object | null>(null)
+const coupleDayStartDateHistoryRef = ref<object | null>(null)
+const coupleDayEndDateHistoryRef = ref<object | null>(null)
+const leaveDocumentRef = ref<object | null>(null)
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const FormRef: FormRef = {
-  leaveWrote: leaveWroteRef, //เขียนที่***
-  leaveStartDate: leaveStartDateRef, //*วัน เดือน ปีเริ่มต้นลา
-  leaveEndDate: leaveEndDateRef, //*วัน เดือน ปีสิ้นสุดลา
-  leaveTotal: leaveTotalRef, //จำนวนวันลา
-  leaveSalary: leaveSalaryRef, //เงินเดือนปัจจุบัน
-  coupleDayName: coupleDayNameRef, //หมายเลขที่ติดต่อขณะลา
-  coupleDayPosition: coupleDayPositionRef, //ตำแหน่งคู่สมรส
-  coupleDayLevel: coupleDayLevelRef, //ระดับคู่สมรส
-  coupleDayLevelCountry: coupleDayLevelCountryRef, //ไปปฏิบัติราชการ ณ ประเทศ
-  coupleDayCountryHistory: coupleDayCountryHistoryRef, //ประวัติการลาติดตามคู่สมรส
-  coupleDayEndDateHistory: coupleDayEndDateHistoryRef, //ประวัติการลาติดตามคู่สมรส
-  coupleDayTotalHistory: coupleDayTotalHistoryRef, //ประวัติการลาติดตามคู่สมรส
-  coupleDayStartDateHistory: coupleDayStartDateHistoryRef, //ประวัติการลาติดตามคู่สมรส
-  leaveDetail: leaveDetailRef, //รายละเอียดการลา
-  leaveAddress: leaveAddressRef, //สถานที่ติดต่อขณะลา
-  leaveDocument: leaveDocumentRef,
-};
+	leaveWrote: leaveWroteRef, //เขียนที่***
+	leaveStartDate: leaveStartDateRef, //*วัน เดือน ปีเริ่มต้นลา
+	leaveEndDate: leaveEndDateRef, //*วัน เดือน ปีสิ้นสุดลา
+	leaveTotal: leaveTotalRef, //จำนวนวันลา
+	leaveSalary: leaveSalaryRef, //เงินเดือนปัจจุบัน
+	coupleDayName: coupleDayNameRef, //หมายเลขที่ติดต่อขณะลา
+	coupleDayPosition: coupleDayPositionRef, //ตำแหน่งคู่สมรส
+	coupleDayLevel: coupleDayLevelRef, //ระดับคู่สมรส
+	coupleDayLevelCountry: coupleDayLevelCountryRef, //ไปปฏิบัติราชการ ณ ประเทศ
+	coupleDayCountryHistory: coupleDayCountryHistoryRef, //ประวัติการลาติดตามคู่สมรส
+	coupleDayEndDateHistory: coupleDayEndDateHistoryRef, //ประวัติการลาติดตามคู่สมรส
+	coupleDayTotalHistory: coupleDayTotalHistoryRef, //ประวัติการลาติดตามคู่สมรส
+	coupleDayStartDateHistory: coupleDayStartDateHistoryRef, //ประวัติการลาติดตามคู่สมรส
+	leaveDetail: leaveDetailRef, //รายละเอียดการลา
+	leaveAddress: leaveAddressRef, //สถานที่ติดต่อขณะลา
+	leaveDocument: leaveDocumentRef,
+}
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("");
-const fileDocDataUpload = ref<File[]>([]);
+const nameFile = ref<string>("")
+const fileDocDataUpload = ref<File[]>([])
 const fileUploadDoc = async (files: any) => {
-  files.forEach((file: any) => {
-    fileDocDataUpload.value.push(file);
-  });
-};
+	files.forEach((file: any) => {
+		fileDocDataUpload.value.push(file)
+	})
+}
 
 /** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
 function onValidate() {
-  const hasError = [];
-  for (const key in FormRef) {
-    if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
-      const property = FormRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    const formData = new FormData();
-    // if (formDataFollowSpouse.leaveDocument.length > 0) {
-    // 	const blob = formDataFollowSpouse.leaveDocument.slice(0, formDataFollowSpouse.leaveDocument[0].size)
-    // 	const newFile = new File(blob, nameFile.value, {
-    // 		type: formDataFollowSpouse.leaveDocument[0].type,
-    // 	})
-    // 	formData.append("leaveDocument", newFile)
-    // } //
-    formData.append("leaveDocument", formDataFollowSpouse.leaveDocument);
-    formData.append("type", formDataFollowSpouse.type); //
-    formData.append(
-      "leaveStartDate",
-      dateToISO(formDataFollowSpouse.leaveStartDate)
-    ); //
-    formData.append(
-      "leaveEndDate",
-      dateToISO(formDataFollowSpouse.leaveEndDate)
-    ); //
-    formData.append(
-      "coupleDayStartDateHistory",
-      dateToISO(formDataFollowSpouse.coupleDayStartDateHistory)
-    ); //
-    formData.append(
-      "coupleDayEndDateHistory",
-      dateToISO(formDataFollowSpouse.coupleDayEndDateHistory)
-    ); //
-    formData.append("leaveWrote", formDataFollowSpouse.leaveWrote); //
-    formData.append("leaveDetail", formDataFollowSpouse.leaveDetail); //
-    formData.append("leaveSalaryText", formDataFollowSpouse.leaveSalaryText); //
-    formData.append("leaveSalary", formDataFollowSpouse.leaveSalary); //
-    formData.append(
-      "coupleDayTotalHistory",
-      formDataFollowSpouse.coupleDayTotalHistory
-    ); //
-    formData.append(
-      "coupleDayCountryHistory",
-      formDataFollowSpouse.coupleDayCountryHistory
-    ); //
-    formData.append(
-      "coupleDayLevelCountry",
-      formDataFollowSpouse.coupleDayLevelCountry
-    ); //
-    formData.append("coupleDayLevel", formDataFollowSpouse.coupleDayLevel); //
-    formData.append(
-      "coupleDayPosition",
-      formDataFollowSpouse.coupleDayPosition
-    ); //
-    formData.append("coupleDayName", formDataFollowSpouse.coupleDayName); //
-    formData.append("leaveTotal", formDataFollowSpouse.leaveTotal); //
-    props.onSubmit(formData);
-  }
+	const hasError = []
+	for (const key in FormRef) {
+		if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
+			const property = FormRef[key]
+			if (property.value && typeof property.value.validate === "function") {
+				const isValid = property.value.validate()
+				hasError.push(isValid)
+			}
+		}
+	}
+	if (hasError.every(result => result === true)) {
+		const formData = new FormData()
+		formDataFollowSpouse.leaveDocument.forEach((file: File) => {
+			formData.append("leaveDocument", file)
+		})
+		// formData.append("leaveDocument", formDataFollowSpouse.leaveDocument);
+		formData.append("type", formDataFollowSpouse.type) //
+		formData.append("leaveStartDate", dateToISO(formDataFollowSpouse.leaveStartDate)) //
+		formData.append("leaveEndDate", dateToISO(formDataFollowSpouse.leaveEndDate)) //
+		formData.append("coupleDayStartDateHistory", dateToISO(formDataFollowSpouse.coupleDayStartDateHistory)) //
+		formData.append("coupleDayEndDateHistory", dateToISO(formDataFollowSpouse.coupleDayEndDateHistory)) //
+		formData.append("leaveWrote", formDataFollowSpouse.leaveWrote) //
+		formData.append("leaveDetail", formDataFollowSpouse.leaveDetail) //
+		formData.append("leaveSalaryText", formDataFollowSpouse.leaveSalaryText) //
+		formData.append("leaveSalary", formDataFollowSpouse.leaveSalary) //
+		formData.append("coupleDayTotalHistory", formDataFollowSpouse.coupleDayTotalHistory) //
+		formData.append("coupleDayCountryHistory", formDataFollowSpouse.coupleDayCountryHistory) //
+		formData.append("coupleDayLevelCountry", formDataFollowSpouse.coupleDayLevelCountry) //
+		formData.append("coupleDayLevel", formDataFollowSpouse.coupleDayLevel) //
+		formData.append("coupleDayPosition", formDataFollowSpouse.coupleDayPosition) //
+		formData.append("coupleDayName", formDataFollowSpouse.coupleDayName) //
+		formData.append("leaveTotal", formDataFollowSpouse.leaveTotal) //
+		props.onSubmit(formData)
+	}
 }
 
 /**
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
-const isLeave = ref<boolean>(true);
+const isLeave = ref<boolean>(true)
 async function fetchCheck() {
-  await http
-    .post(config.API.leaveCheck(), {
-      type: dataStore.typeId ?? null,
-      StartLeaveDate: formDataFollowSpouse.leaveStartDate ?? null,
-      EndLeaveDate: formDataFollowSpouse.leaveEndDate ?? null,
-    })
-    .then((res: any) => {
-      const data = res.data.result;
-      isLeave.value = data.isLeave;
-      if (data.isLeave === true) {
-        // formDataFollowSpouse.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday;
-        //   formDataFollowSpouse.leaveTotal = data.totalDate;
-      } else {
-        fails($q, "ไม่สามารถลาได้");
-      }
-    })
-    .catch((e: any) => {
-      messageError($q, e);
-    });
+	await http
+		.post(config.API.leaveCheck(), {
+			type: dataStore.typeId ?? null,
+			StartLeaveDate: formDataFollowSpouse.leaveStartDate ?? null,
+			EndLeaveDate: formDataFollowSpouse.leaveEndDate ?? null,
+		})
+		.then((res: any) => {
+			const data = res.data.result
+			isLeave.value = data.isLeave
+			if (data.isLeave === true) {
+				// formDataFollowSpouse.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday;
+				//   formDataFollowSpouse.leaveTotal = data.totalDate;
+			} else {
+				fails($q, "ไม่สามารถลาได้")
+			}
+		})
+		.catch((e: any) => {
+			messageError($q, e)
+		})
 }
 
 /**
  * function อัพเดทค่า LeaveTotal
  */
 function updateLeaveTotal() {
-  fetchCheck();
+	fetchCheck()
 
-  const newLeaveTotal = calculateDurationYmd(
-    formDataFollowSpouse.leaveStartDate,
-    formDataFollowSpouse.leaveEndDate
-  );
-  formDataFollowSpouse.leaveTotal = newLeaveTotal;
+	const newLeaveTotal = calculateDurationYmd(formDataFollowSpouse.leaveStartDate, formDataFollowSpouse.leaveEndDate)
+	formDataFollowSpouse.leaveTotal = newLeaveTotal
 }
 
 /**
  * function อัพเดทค่า LeaveTotal
  */
 function updateLeaveHistoryTotal() {
-  const newLeaveTotal = calculateDurationYmd(
-    formDataFollowSpouse.coupleDayStartDateHistory,
-    formDataFollowSpouse.coupleDayEndDateHistory
-  );
-  formDataFollowSpouse.coupleDayTotalHistory = newLeaveTotal;
+	const newLeaveTotal = calculateDurationYmd(formDataFollowSpouse.coupleDayStartDateHistory, formDataFollowSpouse.coupleDayEndDateHistory)
+	formDataFollowSpouse.coupleDayTotalHistory = newLeaveTotal
 }
 
+const leaveDocumentList = ref<any>()
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 onMounted(async () => {
-  if (props.data) {
-    formDataFollowSpouse.leaveWrote = props.data.leaveWrote;
-    formDataFollowSpouse.leaveStartDate = new Date(props.data.leaveStartDate);
-    formDataFollowSpouse.leaveEndDate = new Date(props.data.leaveEndDate);
-    formDataFollowSpouse.leaveDetail = props.data.leaveDetail;
-    formDataFollowSpouse.leaveDocument = props.data.leaveDocument;
-    formDataFollowSpouse.leaveTotal = props.data.leaveTotal;
-    formDataFollowSpouse.leaveSalaryText = props.data.leaveSalaryText;
-    formDataFollowSpouse.leaveSalary = props.data.leaveSalary;
-    formDataFollowSpouse.coupleDayName = props.data.coupleDayName;
-    formDataFollowSpouse.coupleDayPosition = props.data.coupleDayPosition;
-    formDataFollowSpouse.coupleDayLevel = props.data.coupleDayLevel;
-    formDataFollowSpouse.coupleDayLevelCountry =
-      props.data.coupleDayLevelCountry;
-    formDataFollowSpouse.coupleDayCountryHistory =
-      props.data.coupleDayCountryHistory;
-    formDataFollowSpouse.coupleDayTotalHistory =
-      props.data.coupleDayTotalHistory;
-    formDataFollowSpouse.coupleDayStartDateHistory =
-      props.data.coupleDayStartDateHistory;
-    formDataFollowSpouse.coupleDayEndDateHistory =
-      props.data.coupleDayEndDateHistory;
+	if (props.data) {
+		formDataFollowSpouse.leaveWrote = props.data.leaveWrote
+		formDataFollowSpouse.leaveStartDate = new Date(props.data.leaveStartDate)
+		formDataFollowSpouse.leaveEndDate = new Date(props.data.leaveEndDate)
+		formDataFollowSpouse.leaveDetail = props.data.leaveDetail
+		formDataFollowSpouse.leaveDocument = props.data.leaveDocument
+		formDataFollowSpouse.leaveTotal = props.data.leaveTotal
+		formDataFollowSpouse.leaveSalaryText = props.data.leaveSalaryText
+		formDataFollowSpouse.leaveSalary = props.data.leaveSalary
+		formDataFollowSpouse.coupleDayName = props.data.coupleDayName
+		formDataFollowSpouse.coupleDayPosition = props.data.coupleDayPosition
+		formDataFollowSpouse.coupleDayLevel = props.data.coupleDayLevel
+		formDataFollowSpouse.coupleDayLevelCountry = props.data.coupleDayLevelCountry
+		formDataFollowSpouse.coupleDayCountryHistory = props.data.coupleDayCountryHistory
+		formDataFollowSpouse.coupleDayTotalHistory = props.data.coupleDayTotalHistory
+		formDataFollowSpouse.coupleDayStartDateHistory = props.data.coupleDayStartDateHistory
+		formDataFollowSpouse.coupleDayEndDateHistory = props.data.coupleDayEndDateHistory
+		leaveDocumentList.value = props.data.leaveDocument
 
-    const leaveTotal = await calculateDurationYmd(
-      new Date(props.data.leaveStartDate),
-      new Date(props.data.leaveEndDate)
-    );
-    formDataFollowSpouse.leaveTotal = leaveTotal;
+		const leaveTotal = await calculateDurationYmd(props.data.leaveStartDate, props.data.leaveEndDate)
+		formDataFollowSpouse.leaveTotal = leaveTotal
 
-    const coupleDayTotalHistory = await calculateDurationYmd(
-      new Date(props.data.coupleDayStartDateHistory),
-      new Date(props.data.coupleDayEndDateHistory)
-    );
-    formDataFollowSpouse.coupleDayTotalHistory = coupleDayTotalHistory;
-  }
-});
+		const coupleDayTotalHistory = await calculateDurationYmd(props.data.coupleDayStartDateHistory, props.data.coupleDayEndDateHistory)
+		formDataFollowSpouse.coupleDayTotalHistory = coupleDayTotalHistory
+	}
+})
 </script>
 
 <template>
-  <div style="display: flex; align-items: center">
-    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-  </div>
-  <form @submit.prevent.stop="onValidate">
-    <q-card bordered class="q-pa-md bg-grey-1">
-      <div class="col-12 row q-pa-sm q-col-gutter-sm">
-        <q-input
-          class="col-12 col-sm-12 cursor-pointer inputgreen"
-          ref="leaveWroteRef"
-          for="leaveWroteRef"
-          dense
-          hide-bottom-space
-          bg-color="white"
-          outlined
-          v-model="formDataFollowSpouse.leaveWrote"
-          label="เขียนที่"
-          :readonly="!edit"
-          :rules="[(val) => !!val || `${'เขียนที่'}`]"
-        />
-        <datepicker
-          class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          v-model="formDataFollowSpouse.leaveStartDate"
-          :locale="'th'"
-          autoApply
-          hide-bottom-space
-          borderless
-          :enableTimePicker="false"
-          week-start="0"
-          :readonly="!edit"
-          @update:model-value="formDataFollowSpouse.leaveEndDate = null"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              outlined
-              dense
-              ref="leaveStartDateRef"
-              for="leaveStartDateRef"
-              hide-bottom-space
-              bg-color="white"
-              :readonly="!edit"
-              class="full-width datepicker"
-              :model-value="
-                formDataFollowSpouse.leaveStartDate != null
-                  ? date2Thai(formDataFollowSpouse.leaveStartDate)
-                  : null
-              "
-              :label="`${'ลาตั้งแต่วันที่'}`"
-              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
+	<div style="display: flex; align-items: center">
+		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+	</div>
+	<form @submit.prevent.stop="onValidate">
+		<q-card bordered class="q-pa-md bg-grey-1">
+			<div class="col-12 row q-pa-sm q-col-gutter-sm">
+				<q-input
+					class="col-12 col-sm-12 cursor-pointer inputgreen"
+					ref="leaveWroteRef"
+					for="leaveWroteRef"
+					dense
+					hide-bottom-space
+					bg-color="white"
+					outlined
+					v-model="formDataFollowSpouse.leaveWrote"
+					label="เขียนที่"
+					:readonly="!edit"
+					:rules="[val => !!val || `${'เขียนที่'}`]"
+				/>
+				<datepicker
+					class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
+					menu-class-name="modalfix"
+					v-model="formDataFollowSpouse.leaveStartDate"
+					:locale="'th'"
+					autoApply
+					hide-bottom-space
+					borderless
+					:enableTimePicker="false"
+					week-start="0"
+					:readonly="!edit"
+					@update:model-value="formDataFollowSpouse.leaveEndDate = null"
+				>
+					<template #year="{ year }">
+						{{ year + 543 }}
+					</template>
+					<template #year-overlay-value="{ value }">
+						{{ parseInt(value + 543) }}
+					</template>
+					<template #trigger>
+						<q-input
+							outlined
+							dense
+							ref="leaveStartDateRef"
+							for="leaveStartDateRef"
+							hide-bottom-space
+							bg-color="white"
+							:readonly="!edit"
+							class="full-width datepicker"
+							:model-value="formDataFollowSpouse.leaveStartDate != null ? date2Thai(formDataFollowSpouse.leaveStartDate) : null"
+							:label="`${'ลาตั้งแต่วันที่'}`"
+							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+						>
+							<template v-slot:prepend>
+								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
+							</template>
+						</q-input>
+					</template>
+				</datepicker>
 
-        <datepicker
-          class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          v-model="formDataFollowSpouse.leaveEndDate"
-          :locale="'th'"
-          autoApply
-          borderless
-          hide-bottom-space
-          :enableTimePicker="false"
-          week-start="0"
-          @update:model-value="updateLeaveTotal()"
-          :readonly="!formDataFollowSpouse.leaveStartDate"
-          :min-date="formDataFollowSpouse.leaveStartDate"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              outlined
-              dense
-              ref="leaveEndDateRef"
-              for="leaveEndDateRef"
-              hide-bottom-space
-              bg-color="white"
-              :readonly="!formDataFollowSpouse.leaveStartDate"
-              class="full-width datepicker"
-              :model-value="
-                formDataFollowSpouse.leaveEndDate != null
-                  ? date2Thai(formDataFollowSpouse.leaveEndDate)
-                  : null
-              "
-              :label="`${'ลาถึงวันที่'}`"
-              :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
-        <q-input
-          class="col-12 col-md-2 col-sm-6"
-          bg-color="white"
-          dense
-          outlined
-          ref="leaveTotalRef"
-          for="leaveTotalRef"
-          v-model="formDataFollowSpouse.leaveTotal"
-          label="เป็นเวลา"
-          readonly
-          hide-bottom-space
-        />
-        <div class="col-12 col-md-6 col-sm-12">
-          <q-input
-            hide-bottom-space
-            bg-color="white"
-            class="col-12 col-sm-12"
-            ref="leaveSalaryRef"
-            for="leaveSalaryRef"
-            dense
-            outlined
-            v-model="dataStore.salary"
-            label="เงินเดือนปัจจุบัน"
-            readonly
-          />
-        </div>
-        <div class="col-12 col-md-6 col-sm-12">
-          <q-input
-            hide-bottom-space
-            bg-color="white"
-            class="col-12 col-sm-12"
-            ref="leaveSalaryRef"
-            for="leaveSalaryRef"
-            dense
-            outlined
-            v-model="dataStore.salaryText"
-            label="เงินเดือนปัจจุบัน"
-            readonly
-          />
-        </div>
+				<datepicker
+					class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
+					menu-class-name="modalfix"
+					v-model="formDataFollowSpouse.leaveEndDate"
+					:locale="'th'"
+					autoApply
+					borderless
+					hide-bottom-space
+					:enableTimePicker="false"
+					week-start="0"
+					@update:model-value="updateLeaveTotal()"
+					:readonly="!formDataFollowSpouse.leaveStartDate"
+					:min-date="formDataFollowSpouse.leaveStartDate"
+				>
+					<template #year="{ year }">
+						{{ year + 543 }}
+					</template>
+					<template #year-overlay-value="{ value }">
+						{{ parseInt(value + 543) }}
+					</template>
+					<template #trigger>
+						<q-input
+							outlined
+							dense
+							ref="leaveEndDateRef"
+							for="leaveEndDateRef"
+							hide-bottom-space
+							bg-color="white"
+							:readonly="!formDataFollowSpouse.leaveStartDate"
+							class="full-width datepicker"
+							:model-value="formDataFollowSpouse.leaveEndDate != null ? date2Thai(formDataFollowSpouse.leaveEndDate) : null"
+							:label="`${'ลาถึงวันที่'}`"
+							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+						>
+							<template v-slot:prepend>
+								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
+							</template>
+						</q-input>
+					</template>
+				</datepicker>
+				<q-input
+					class="col-12 col-md-2 col-sm-6"
+					bg-color="white"
+					dense
+					outlined
+					ref="leaveTotalRef"
+					for="leaveTotalRef"
+					v-model="formDataFollowSpouse.leaveTotal"
+					label="เป็นเวลา"
+					readonly
+					hide-bottom-space
+				/>
+				<div class="col-12 col-md-6 col-sm-12">
+					<q-input
+						hide-bottom-space
+						bg-color="white"
+						class="col-12 col-sm-12"
+						ref="leaveSalaryRef"
+						for="leaveSalaryRef"
+						dense
+						outlined
+						v-model="dataStore.salary"
+						label="เงินเดือนปัจจุบัน"
+						readonly
+					/>
+				</div>
+				<div class="col-12 col-md-6 col-sm-12">
+					<q-input
+						hide-bottom-space
+						bg-color="white"
+						class="col-12 col-sm-12"
+						ref="leaveSalaryRef"
+						for="leaveSalaryRef"
+						dense
+						outlined
+						v-model="dataStore.salaryText"
+						label="เงินเดือนปัจจุบัน"
+						readonly
+					/>
+				</div>
 
-        <div class="col-md-3 col-sm-12">
-          <q-input
-            class="col-12 col-sm-12 cursor-pointer inputgreen"
-            hide-bottom-space
-            ref="coupleDayNameRef"
-            for="coupleDayNameRef"
-            dense
-            bg-color="white"
-            outlined
-            v-model="formDataFollowSpouse.coupleDayName"
-            label="ชื่อคู่สมรส"
-            :readonly="!edit"
-            :rules="[(val) => !!val || `${'ชื่อคู่สมรส'}`]"
-          />
-        </div>
-        <div class="col-md-3 col-sm-12">
-          <q-input
-            class="col-12 col-sm-12 cursor-pointer inputgreen"
-            hide-bottom-space
-            ref="coupleDayPositionRef"
-            for="coupleDayPositionRef"
-            dense
-            outlined
-            bg-color="white"
-            v-model="formDataFollowSpouse.coupleDayPosition"
-            label="ตำแหน่งคู่สมรส"
-            :readonly="!edit"
-            :rules="[(val) => !!val || `${'ตำแหน่งคู่สมรส'}`]"
-          />
-        </div>
-        <div class="col-md-3 col-sm-12">
-          <q-input
-            class="col-12 col-sm-12 cursor-pointer inputgreen"
-            ref="coupleDayLevelRef"
-            for="coupleDayLevelRef"
-            dense
-            hide-bottom-space
-            outlined
-            bg-color="white"
-            v-model="formDataFollowSpouse.coupleDayLevel"
-            label="ระดับคู่สมรส"
-            :readonly="!edit"
-            :rules="[(val) => !!val || `${'ระดับคู่สมรส'}`]"
-          />
-        </div>
-        <div class="col-md-3 col-sm-12">
-          <q-input
-            class="col-12 col-sm-12 cursor-pointer inputgreen"
-            ref="coupleDayLevelCountryRef"
-            for="coupleDayLevelCountryRef"
-            hide-bottom-space
-            dense
-            outlined
-            bg-color="white"
-            v-model="formDataFollowSpouse.coupleDayLevelCountry"
-            label="ไปปฏิบัติราชการ ณ ประเทศ"
-            :readonly="!edit"
-            :rules="[(val) => !!val || `${'ปฏิบัติราชการ ณ ประเทศ'}`]"
-          />
-        </div>
-        <div class="text-weight-bold text-dark col-12">
-          ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย
-        </div>
-        <datepicker
-          class="col-12 col-md-3 col-sm-12 inputgreen"
-          menu-class-name="modalfix"
-          v-model="formDataFollowSpouse.coupleDayStartDateHistory"
-          :locale="'th'"
-          autoApply
-          hide-bottom-space
-          borderless
-          :enableTimePicker="false"
-          week-start="0"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              outlined
-              dense
-              ref="coupleDayStartDateHistoryRef"
-              for="coupleDayStartDateHistoryRef"
-              hide-bottom-space
-              bg-color="white"
-              class="full-width"
-              :model-value="
-                formDataFollowSpouse.coupleDayStartDateHistory != null
-                  ? date2Thai(formDataFollowSpouse.coupleDayStartDateHistory)
-                  : null
-              "
-              :label="`${'ตั้งแต่วันที่'}`"
-              :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วันที่'}`]"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
-        <datepicker
-          class="col-12 col-md-3 col-sm-12 inputgreen"
-          menu-class-name="modalfix"
-          v-model="formDataFollowSpouse.coupleDayEndDateHistory"
-          :locale="'th'"
-          autoApply
-          hide-bottom-space
-          borderless
-          :enableTimePicker="false"
-          week-start="0"
-          @update:model-value="updateLeaveHistoryTotal()"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              outlined
-              dense
-              ref="coupleDayEndDateHistoryRef"
-              for="coupleDayEndDateHistoryRef"
-              hide-bottom-space
-              bg-color="white"
-              class="full-width"
-              :model-value="
-                formDataFollowSpouse.coupleDayEndDateHistory != null
-                  ? date2Thai(formDataFollowSpouse.coupleDayEndDateHistory)
-                  : null
-              "
-              :label="`${'ถึงวันที่'}`"
-              :rules="[(val) => !!val || `${'กรุณาเลือกถึงวันที่'}`]"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
+				<div class="col-md-3 col-sm-12">
+					<q-input
+						class="col-12 col-sm-12 cursor-pointer inputgreen"
+						hide-bottom-space
+						ref="coupleDayNameRef"
+						for="coupleDayNameRef"
+						dense
+						bg-color="white"
+						outlined
+						v-model="formDataFollowSpouse.coupleDayName"
+						label="ชื่อคู่สมรส"
+						:readonly="!edit"
+						:rules="[val => !!val || `${'ชื่อคู่สมรส'}`]"
+					/>
+				</div>
+				<div class="col-md-3 col-sm-12">
+					<q-input
+						class="col-12 col-sm-12 cursor-pointer inputgreen"
+						hide-bottom-space
+						ref="coupleDayPositionRef"
+						for="coupleDayPositionRef"
+						dense
+						outlined
+						bg-color="white"
+						v-model="formDataFollowSpouse.coupleDayPosition"
+						label="ตำแหน่งคู่สมรส"
+						:readonly="!edit"
+						:rules="[val => !!val || `${'ตำแหน่งคู่สมรส'}`]"
+					/>
+				</div>
+				<div class="col-md-3 col-sm-12">
+					<q-input
+						class="col-12 col-sm-12 cursor-pointer inputgreen"
+						ref="coupleDayLevelRef"
+						for="coupleDayLevelRef"
+						dense
+						hide-bottom-space
+						outlined
+						bg-color="white"
+						v-model="formDataFollowSpouse.coupleDayLevel"
+						label="ระดับคู่สมรส"
+						:readonly="!edit"
+						:rules="[val => !!val || `${'ระดับคู่สมรส'}`]"
+					/>
+				</div>
+				<div class="col-md-3 col-sm-12">
+					<q-input
+						class="col-12 col-sm-12 cursor-pointer inputgreen"
+						ref="coupleDayLevelCountryRef"
+						for="coupleDayLevelCountryRef"
+						hide-bottom-space
+						dense
+						outlined
+						bg-color="white"
+						v-model="formDataFollowSpouse.coupleDayLevelCountry"
+						label="ไปปฏิบัติราชการ ณ ประเทศ"
+						:readonly="!edit"
+						:rules="[val => !!val || `${'ปฏิบัติราชการ ณ ประเทศ'}`]"
+					/>
+				</div>
+				<div class="text-weight-bold text-dark col-12">ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย</div>
+				<datepicker
+					class="col-12 col-md-3 col-sm-12 inputgreen"
+					menu-class-name="modalfix"
+					v-model="formDataFollowSpouse.coupleDayStartDateHistory"
+					:locale="'th'"
+					autoApply
+					hide-bottom-space
+					borderless
+					:enableTimePicker="false"
+					week-start="0"
+				>
+					<template #year="{ year }">
+						{{ year + 543 }}
+					</template>
+					<template #year-overlay-value="{ value }">
+						{{ parseInt(value + 543) }}
+					</template>
+					<template #trigger>
+						<q-input
+							outlined
+							dense
+							ref="coupleDayStartDateHistoryRef"
+							for="coupleDayStartDateHistoryRef"
+							hide-bottom-space
+							bg-color="white"
+							class="full-width"
+							:model-value="formDataFollowSpouse.coupleDayStartDateHistory != null ? date2Thai(formDataFollowSpouse.coupleDayStartDateHistory) : null"
+							:label="`${'ตั้งแต่วันที่'}`"
+							:rules="[val => !!val || `${'กรุณาเลือกตั้งแต่วันที่'}`]"
+						>
+							<template v-slot:prepend>
+								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
+							</template>
+						</q-input>
+					</template>
+				</datepicker>
+				<datepicker
+					class="col-12 col-md-3 col-sm-12 inputgreen"
+					menu-class-name="modalfix"
+					v-model="formDataFollowSpouse.coupleDayEndDateHistory"
+					:locale="'th'"
+					autoApply
+					hide-bottom-space
+					borderless
+					:enableTimePicker="false"
+					week-start="0"
+					@update:model-value="updateLeaveHistoryTotal()"
+				>
+					<template #year="{ year }">
+						{{ year + 543 }}
+					</template>
+					<template #year-overlay-value="{ value }">
+						{{ parseInt(value + 543) }}
+					</template>
+					<template #trigger>
+						<q-input
+							outlined
+							dense
+							ref="coupleDayEndDateHistoryRef"
+							for="coupleDayEndDateHistoryRef"
+							hide-bottom-space
+							bg-color="white"
+							class="full-width"
+							:model-value="formDataFollowSpouse.coupleDayEndDateHistory != null ? date2Thai(formDataFollowSpouse.coupleDayEndDateHistory) : null"
+							:label="`${'ถึงวันที่'}`"
+							:rules="[val => !!val || `${'กรุณาเลือกถึงวันที่'}`]"
+						>
+							<template v-slot:prepend>
+								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
+							</template>
+						</q-input>
+					</template>
+				</datepicker>
 
-        <q-input
-          class="col-12 col-md-3 col-sm-12"
-          dense
-          outlined
-          readonly
-          hide-bottom-space
-          bg-color="white"
-          ref="coupleDayTotalHistoryRef"
-          for="coupleDayTotalHistoryRef"
-          v-model="formDataFollowSpouse.coupleDayTotalHistory"
-          label="เป็นเวลา"
-        />
+				<q-input
+					class="col-12 col-md-3 col-sm-12"
+					dense
+					outlined
+					readonly
+					hide-bottom-space
+					bg-color="white"
+					ref="coupleDayTotalHistoryRef"
+					for="coupleDayTotalHistoryRef"
+					v-model="formDataFollowSpouse.coupleDayTotalHistory"
+					label="เป็นเวลา"
+				/>
 
-        <q-input
-          class="col-12 col-md-3 col-sm-12"
-          dense
-          outlined
-          hide-bottom-space
-          bg-color="white"
-          ref="coupleDayCountryHistoryRef"
-          for="coupleDayCountryHistoryRef"
-          v-model="formDataFollowSpouse.coupleDayCountryHistory"
-          label="ประเทศ"
-          :rules="[(val) => !!val || `${'กรุณาเลือกประเทศ'}`]"
-        />
+				<q-input
+					class="col-12 col-md-3 col-sm-12"
+					dense
+					outlined
+					hide-bottom-space
+					bg-color="white"
+					ref="coupleDayCountryHistoryRef"
+					for="coupleDayCountryHistoryRef"
+					v-model="formDataFollowSpouse.coupleDayCountryHistory"
+					label="ประเทศ"
+					:rules="[val => !!val || `${'กรุณาเลือกประเทศ'}`]"
+				/>
 
-        <q-input
-          hide-bottom-space
-          type="textarea"
-          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-          dense
-          bg-color="white"
-          outlined
-          ref="leaveDetailRef"
-          for="leaveDetailRef"
-          v-model="formDataFollowSpouse.leaveDetail"
-          label="รายละเอียด"
-          :readonly="!edit"
-        />
+				<q-input
+					hide-bottom-space
+					type="textarea"
+					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+					dense
+					bg-color="white"
+					outlined
+					ref="leaveDetailRef"
+					for="leaveDetailRef"
+					v-model="formDataFollowSpouse.leaveDetail"
+					label="รายละเอียด"
+					:readonly="!edit"
+				/>
 
-        <!-- multiple -->
-        <q-file
-          ref="fileRef"
-          bg-color="white"
-          v-model="formDataFollowSpouse.leaveDocument"
-          @added="fileUploadDoc"
-          dense
-          label="เอกสารประกอบ"
-          outlined
-          use-chips
-          class="q-pl-sm col-12"
-        >
-          <template v-slot:prepend>
-            <q-icon name="attach_file" color="primary" />
-          </template>
-        </q-file>
+				<!-- multiple -->
+				<q-file
+					ref="fileRef"
+					bg-color="white"
+					v-model="formDataFollowSpouse.leaveDocument"
+					multiple
+					@added="fileUploadDoc"
+					dense
+					label="เอกสารประกอบ"
+					outlined
+					use-chips
+					class="q-pl-sm col-12"
+				>
+					<template v-slot:prepend>
+						<q-icon name="attach_file" color="primary" />
+					</template>
+				</q-file>
+				<!-- <div class="col-12" v-if="formDataFollowSpouse.leaveDocument.length == 0">
+					<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
+				</div> -->
+				<div class="col-12" v-if="data">
+					<div class="col-12 col-md-12 col-sm-12">
+						<q-card bordered>
+							<!-- <div class="col-12">
+								<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ{{ leaveDocumentList }} </q-card>
+							</div> -->
+							<q-list separator>
+								<q-item v-for="(document, index) in leaveDocumentList" :key="index" class="q-my-xs">
+									<q-item-section>
+										<q-item-label class="row items-baseline">
+											<div class="col">
+												{{ "เอกสารแนบฉบับที่" + (index + 1) }}
+											</div>
+											<q-btn class="col-6" :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
+												<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+											</q-btn>
+										</q-item-label>
+									</q-item-section>
+								</q-item>
+							</q-list>
+						</q-card>
+					</div>
+				</div>
 
-        <div class="col-12 row" v-if="!edit">
-          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-            <div class="q-pl-sm text-weight-bold text-dark">
-              เอกสารเพิ่มเติม
-            </div>
-          </div>
-          <q-card bordered flat class="full-width">
-            <q-list separator>
-              <q-item
-                v-for="(file, index) in formDataFollowSpouse.leaveDocument"
-                :key="index"
-                class="q-my-xs"
-              >
-                <q-item-section>
-                  <q-item-label class="full-width ellipsis">
-                    {{ file.name }}
-                  </q-item-label>
-                  <q-item-label caption> </q-item-label>
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-card>
-        </div>
-      </div>
-    </q-card>
+				<div class="col-12 col-sm-6 row" v-if="!edit">
+					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
+					</div>
+					<q-card bordered flat class="full-width">
+						<q-list separator>
+							<q-item v-for="(file, index) in leaveDocumentList" :key="index" class="q-my-xs">
+								<q-item-section>
+									<q-item-label class="full-width ellipsis">
+										{{ file.name }}
+									</q-item-label>
+									<q-item-label caption> </q-item-label>
+								</q-item-section>
+							</q-item>
+						</q-list>
+					</q-card>
+				</div>
+			</div>
+		</q-card>
 
-    <q-separator class="q-mt-sm" />
-    <div class="row col-12 q-pt-md">
-      <q-space />
-      <q-btn
-        v-if="!props.data || props.data.status == 'DRAFT'"
-        id="onSubmit"
-        type="submit"
-        unelevated
-        dense
-        class="q-px-md items-center btnBlue"
-        label="บันทึก"
-        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
-      >
-      <q-btn
-        v-if="data"
-        id="onSubmit"
-        type="button"
-        unelevated
-        dense
-        class="q-px-md items-center q-ml-sm"
-        color="primary"
-        label="ยื่นใบลา"
-        @click="onConfirm"
-        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
-      >
-    </div>
-  </form>
+		<q-separator class="q-mt-sm" />
+		<div class="row col-12 q-pt-md">
+			<q-space />
+			<q-btn v-if="!props.data || props.data.status == 'DRAFT'" id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"
+				><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+			>
+			<q-btn v-if="data" id="onSubmit" type="button" unelevated dense class="q-px-md items-center q-ml-sm" color="primary" label="ยื่นใบลา" @click="onConfirm"
+				><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+			>
+		</div>
+	</form>
 </template>
diff --git a/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue b/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
index 3ae86de..44c9d79 100644
--- a/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
@@ -1,439 +1,378 @@
 <script setup lang="ts">
-import { reactive, ref, onMounted } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
-import type { RehabilitationForm } from "@/modules/05_leave/interface/request/AddAbsence";
-import { useLeaveStore } from "@/modules/05_leave/store";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useRouter } from "vue-router";
-import genReport from "@/plugins/genreport";
+import { reactive, ref, onMounted } from "vue"
+import { useCounterMixin } from "@/stores/mixin"
+import { useQuasar } from "quasar"
+import type { RehabilitationForm } from "@/modules/05_leave/interface/request/AddAbsence"
+import { useLeaveStore } from "@/modules/05_leave/store"
+import http from "@/plugins/http"
+import config from "@/app.config"
+import { useRouter } from "vue-router"
+import genReport from "@/plugins/genreport"
 
 /** Use */
-const dataStore = useLeaveStore();
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const { date2Thai, dialogConfirm, fails, dateToISO, success, messageError, showLoader } =
-  mixin;
-const router = useRouter();
-const edit = ref<boolean>(true);
-const isSave = ref<boolean>(false);
-const files = ref<any>(null);
+const dataStore = useLeaveStore()
+const $q = useQuasar()
+const mixin = useCounterMixin()
+const { date2Thai, dialogConfirm, fails, dateToISO, success, messageError, showLoader, hideLoader } = mixin
+const router = useRouter()
+const edit = ref<boolean>(true)
+const isSave = ref<boolean>(false)
+const files = ref<any>(null)
 
 /** ตัวแปร ref สำหรับแสดง validate */
-const leaveStartDateRef = ref<object | null>(null);
-const leaveEndDateRef = ref<object | null>(null);
-const leaveWroteRef = ref<object | null>(null);
+const leaveStartDateRef = ref<object | null>(null)
+const leaveEndDateRef = ref<object | null>(null)
+const leaveWroteRef = ref<object | null>(null)
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
-  data: {
-    type: Array,
-    default: null,
-  },
-  onSubmit: {
-    type: Function,
-    default: () => "",
-  },
-  onConfirm: {
-    type: Function,
-    default: () => "",
-  },
-});
+	data: {
+		type: Object,
+		default: null,
+	},
+	onSubmit: {
+		type: Function,
+		default: () => "",
+	},
+	onConfirm: {
+		type: Function,
+		default: () => "",
+	},
+})
 
 /** ข้อมูล v-model ของฟอร์ม */
 const formDataRehabilitation = reactive<any>({
-  type: dataStore.typeId,
-  leaveWrote: "",
-  leaveStartDate: null,
-  leaveEndDate: null,
-  leaveDocument: "",
-  leaveDetail: "",
-  leaveDraftDocument: null,
-});
+	type: dataStore.typeId,
+	leaveWrote: "",
+	leaveStartDate: null,
+	leaveEndDate: null,
+	leaveDocument: "",
+	leaveDetail: "",
+	leaveDraftDocument: null,
+})
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const formRef: RehabilitationForm = {
-  leaveStartDate: leaveStartDateRef,
-  leaveEndDate: leaveEndDateRef,
-  leaveWrote: leaveWroteRef,
-};
+	leaveStartDate: leaveStartDateRef,
+	leaveEndDate: leaveEndDateRef,
+	leaveWrote: leaveWroteRef,
+}
 
 /** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
 function onValidate() {
-  const hasError = [];
-  for (const key in formRef) {
-    if (Object.prototype.hasOwnProperty.call(formRef, key)) {
-      const property = formRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    const formData = new FormData();
+	const hasError = []
+	for (const key in formRef) {
+		if (Object.prototype.hasOwnProperty.call(formRef, key)) {
+			const property = formRef[key]
+			if (property.value && typeof property.value.validate === "function") {
+				const isValid = property.value.validate()
+				hasError.push(isValid)
+			}
+		}
+	}
+	if (hasError.every(result => result === true)) {
+		const formData = new FormData()
 
-    if (formDataRehabilitation.leaveDocument) {
-      // if (formDataRehabilitation.leaveDocument.length > 0) {
-      // 	const blob = formDataRehabilitation.leaveDocument.slice(0, formDataRehabilitation.leaveDocument[0].size)
-      // 	const newFile = new File(blob, nameFile.value, {
-      // 		type: formDataRehabilitation.leaveDocument[0].type,
-      // 	})
-      // 	formData.append("leaveDocument", newFile)
-      // } //
+		if (formDataRehabilitation.leaveDocument) {
+			formDataRehabilitation.leaveDocument.forEach((file: File) => {
+				formData.append("leaveDocument", file)
+			})
+			// formData.append("leaveDocument", formDataRehabilitation.leaveDocument)
+		}
 
-      formData.append("leaveDocument", formDataRehabilitation.leaveDocument);
-    }
+		if (formDataRehabilitation.leaveDraftDocument) {
+			formData.append("leaveDraftDocument", formDataRehabilitation.leaveDraftDocument)
+		}
 
-    if (formDataRehabilitation.leaveDraftDocument) {
-      formData.append(
-        "leaveDraftDocument",
-        formDataRehabilitation.leaveDraftDocument
-      );
-    }
-
-    formData.append("type", formDataRehabilitation.type); //
-    formData.append(
-      "leaveStartDate",
-      dateToISO(formDataRehabilitation.leaveStartDate)
-    ); //
-    formData.append(
-      "leaveEndDate",
-      dateToISO(formDataRehabilitation.leaveEndDate)
-    ); //
-    formData.append("leaveWrote", formDataRehabilitation.leaveWrote); //
-    formData.append("leaveDetail", formDataRehabilitation.leaveDetail); //
-    props.onSubmit(formData);
-  }
+		formData.append("type", formDataRehabilitation.type) //
+		formData.append("leaveStartDate", dateToISO(formDataRehabilitation.leaveStartDate)) //
+		formData.append("leaveEndDate", dateToISO(formDataRehabilitation.leaveEndDate)) //
+		formData.append("leaveWrote", formDataRehabilitation.leaveWrote) //
+		formData.append("leaveDetail", formDataRehabilitation.leaveDetail) //
+		props.onSubmit(formData)
+	}
 }
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("");
-const nameFileDraft = ref<string>("");
-const fileDocDataUpload = ref<File[]>([]);
+const nameFile = ref<string>("")
+const nameFileDraft = ref<string>("")
+const fileDocDataUpload = ref<File[]>([])
 const fileUploadDoc = async (files: any) => {
-  files.forEach((file: any) => {
-    fileDocDataUpload.value.push(file);
-  });
-};
+	files.forEach((file: any) => {
+		fileDocDataUpload.value.push(file)
+	})
+}
 
 /**
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
-const isLeave = ref<boolean>(true);
+const isLeave = ref<boolean>(true)
 async function FetchCheck() {
-  await http
-    .post(config.API.leaveCheck(), {
-      type: dataStore.typeId ?? null,
-      StartLeaveDate: formDataRehabilitation.leaveStartDate ?? null,
-      EndLeaveDate: formDataRehabilitation.leaveEndDate ?? null,
-    })
-    .then((res: any) => {
-      const data = res.data.result;
-      isLeave.value = data.isLeave;
-      if (data.isLeave === true) {
-        // formDataRehabilitation.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-        // formDataRehabilitation.leaveTotal = data.totalDate
-      } else {
-        fails($q, "ไม่สามารถลาได้");
-      }
-    })
-    .catch((e: any) => {
-      messageError($q, e);
-    });
+	await http
+		.post(config.API.leaveCheck(), {
+			type: dataStore.typeId ?? null,
+			StartLeaveDate: formDataRehabilitation.leaveStartDate ?? null,
+			EndLeaveDate: formDataRehabilitation.leaveEndDate ?? null,
+		})
+		.then((res: any) => {
+			const data = res.data.result
+			isLeave.value = data.isLeave
+			if (data.isLeave === true) {
+				// formDataRehabilitation.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
+				// formDataRehabilitation.leaveTotal = data.totalDate
+			} else {
+				fails($q, "ไม่สามารถลาได้")
+			}
+		})
+		.catch((e: any) => {
+			messageError($q, e)
+		})
 }
 
 //download function
 async function onClickDownloadFile(id: string, fileName: string) {
-  showLoader();
-  await http
-    .get(config.API.leaveReport(id))
-    .then(async (res) => {
-      const data = res.data.result;
-      await genReport(data, fileName);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+	showLoader()
+	await http
+		.get(config.API.leaveReport(id))
+		.then(async res => {
+			const data = res.data.result
+			await genReport(data, fileName)
+		})
+		.catch(err => {
+			messageError($q, err)
+		})
+		.finally(() => {
+			hideLoader()
+		})
 }
 
-const leaveDraftDocument = ref<string>();
+const leaveDocumentList = ref<any>()
+const leaveDraftDocument = ref<string>()
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 onMounted(() => {
-  if (props.data) {
-    formDataRehabilitation.leaveWrote = props.data.leaveWrote;
-    formDataRehabilitation.leaveStartDate = new Date(props.data.leaveStartDate);
-    formDataRehabilitation.leaveEndDate = new Date(props.data.leaveEndDate);
-    formDataRehabilitation.leaveDetail = props.data.leaveDetail;
-    // formDataRehabilitation.leaveDocument = props.data.leaveDocument;
-    leaveDraftDocument.value = props.data.leaveDraftDocument;
-  }
-});
+	if (props.data) {
+		formDataRehabilitation.leaveWrote = props.data.leaveWrote
+		formDataRehabilitation.leaveStartDate = new Date(props.data.leaveStartDate)
+		formDataRehabilitation.leaveEndDate = new Date(props.data.leaveEndDate)
+		formDataRehabilitation.leaveDetail = props.data.leaveDetail
+		// formDataRehabilitation.leaveDocument = props.data.leaveDocument;
+		leaveDraftDocument.value = props.data.leaveDraftDocument
+		leaveDocumentList.value = props.data.leaveDocument
+	}
+})
 </script>
 
 <template>
-  <div style="display: flex; align-items: center">
-    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-  </div>
-  <form @submit.prevent="onValidate">
-    <q-card bordered class="q-pa-md bg-grey-1">
-      <div class="row q-pa-sm q-col-gutter-sm">
-        <q-input
-          v-model="formDataRehabilitation.leaveWrote"
-          class="col-12 col-sm-12 cursor-pointer inputgreen"
-          ref="leaveWroteRef"
-          dense
-          outlined
-          bg-color="white"
-          label="เขียนที่"
-          hide-bottom-space
-          :rules="[(val) => !!val || `${'เขียนที่'}`]"
-        />
+	<div style="display: flex; align-items: center">
+		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+	</div>
+	<form @submit.prevent="onValidate">
+		<q-card bordered class="q-pa-md bg-grey-1">
+			<div class="row q-pa-sm q-col-gutter-sm">
+				<q-input
+					v-model="formDataRehabilitation.leaveWrote"
+					class="col-12 col-sm-12 cursor-pointer inputgreen"
+					ref="leaveWroteRef"
+					dense
+					outlined
+					bg-color="white"
+					label="เขียนที่"
+					hide-bottom-space
+					:rules="[val => !!val || `${'เขียนที่'}`]"
+				/>
 
-        <datepicker
-          v-model="formDataRehabilitation.leaveStartDate"
-          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          autoApply
-          borderless
-          week-start="0"
-          :enableTimePicker="false"
-          :locale="'th'"
-          @update:model-value="formDataRehabilitation.leaveEndDate = null"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              ref="leaveStartDateRef"
-              class="full-width datepicker"
-              bg-color="white"
-              outlined
-              dense
-              lazy-rules
-              hide-bottom-space
-              :model-value="
-                formDataRehabilitation.leaveStartDate != null
-                  ? date2Thai(formDataRehabilitation.leaveStartDate)
-                  : null
-              "
-              :label="`${'ลาตั้งแต่วันที่'}`"
-              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
+				<datepicker
+					v-model="formDataRehabilitation.leaveStartDate"
+					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+					menu-class-name="modalfix"
+					autoApply
+					borderless
+					week-start="0"
+					:enableTimePicker="false"
+					:locale="'th'"
+					@update:model-value="formDataRehabilitation.leaveEndDate = null"
+				>
+					<template #year="{ year }">
+						{{ year + 543 }}
+					</template>
+					<template #year-overlay-value="{ value }">
+						{{ parseInt(value + 543) }}
+					</template>
+					<template #trigger>
+						<q-input
+							ref="leaveStartDateRef"
+							class="full-width datepicker"
+							bg-color="white"
+							outlined
+							dense
+							lazy-rules
+							hide-bottom-space
+							:model-value="formDataRehabilitation.leaveStartDate != null ? date2Thai(formDataRehabilitation.leaveStartDate) : null"
+							:label="`${'ลาตั้งแต่วันที่'}`"
+							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+						>
+							<template v-slot:prepend>
+								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
+							</template>
+						</q-input>
+					</template>
+				</datepicker>
 
-        <datepicker
-          v-model="formDataRehabilitation.leaveEndDate"
-          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-          menu-class-name="modalfix"
-          autoApply
-          borderless
-          week-start="0"
-          :locale="'th'"
-          @update:model-value="FetchCheck()"
-          :readonly="!formDataRehabilitation.leaveStartDate"
-          :enableTimePicker="false"
-          :min-date="formDataRehabilitation.leaveStartDate"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              ref="leaveEndDateRef"
-              class="full-width datepicker"
-              outlined
-              dense
-              lazy-rules
-              bg-color="white"
-              hide-bottom-space
-              :readonly="!formDataRehabilitation.leaveStartDate"
-              :model-value="
-                formDataRehabilitation.leaveEndDate != null
-                  ? date2Thai(formDataRehabilitation.leaveEndDate)
-                  : null
-              "
-              :label="`${'ลาถึงวันที่'}`"
-              :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
+				<datepicker
+					v-model="formDataRehabilitation.leaveEndDate"
+					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+					menu-class-name="modalfix"
+					autoApply
+					borderless
+					week-start="0"
+					:locale="'th'"
+					@update:model-value="FetchCheck()"
+					:readonly="!formDataRehabilitation.leaveStartDate"
+					:enableTimePicker="false"
+					:min-date="formDataRehabilitation.leaveStartDate"
+				>
+					<template #year="{ year }">
+						{{ year + 543 }}
+					</template>
+					<template #year-overlay-value="{ value }">
+						{{ parseInt(value + 543) }}
+					</template>
+					<template #trigger>
+						<q-input
+							ref="leaveEndDateRef"
+							class="full-width datepicker"
+							outlined
+							dense
+							lazy-rules
+							bg-color="white"
+							hide-bottom-space
+							:readonly="!formDataRehabilitation.leaveStartDate"
+							:model-value="formDataRehabilitation.leaveEndDate != null ? date2Thai(formDataRehabilitation.leaveEndDate) : 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
-          v-model="formDataRehabilitation.leaveDetail"
-          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-          bg-color="white"
-          dense
-          outlined
-          type="textarea"
-          label="รายละเอียด"
-        />
+				<q-input v-model="formDataRehabilitation.leaveDetail" class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
 
-        <div class="col-12">
-          <!-- multiple -->
-          <q-file
-            v-model="formDataRehabilitation.leaveDocument"
-            @added="fileUploadDoc"
-            use-chips
-            bg-color="white"
-            dense
-            outlined
-            label="เอกสารประกอบ"
-          >
-            <template v-slot:prepend>
-              <q-icon name="attach_file" color="primary" />
-            </template>
-          </q-file>
-        </div>
+				<div class="col-12">
+					<!-- multiple -->
+					<q-file v-model="formDataRehabilitation.leaveDocument" @added="fileUploadDoc" multiple use-chips bg-color="white" dense outlined label="เอกสารประกอบ">
+						<template v-slot:prepend>
+							<q-icon name="attach_file" color="primary" />
+						</template>
+					</q-file>
+					<!-- <div class="col-12" v-if="formDataRehabilitation.leaveDocument.length == 0">
+						<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
+					</div> -->
+					<div class="col-12" v-if="data">
+						<div class="col-12 col-md-12 col-sm-12">
+							<q-card bordered>
+								<!-- <div class="col-12">
+								<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ{{ leaveDocumentList }} </q-card>
+							</div> -->
+								<q-list separator>
+									<q-item v-for="(document, index) in leaveDocumentList" :key="index" class="q-my-xs">
+										<q-item-section>
+											<q-item-label class="row items-baseline">
+												<div class="col">
+													{{ "เอกสารแนบฉบับที่" + (index + 1) }}
+												</div>
+												<q-btn class="col-6" :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
+													<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+												</q-btn>
+											</q-item-label>
+										</q-item-section>
+									</q-item>
+								</q-list>
+							</q-card>
+						</div>
+					</div>
+				</div>
 
-        <div class="col-12 row" v-if="!edit">
-          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-            <div class="q-pl-sm text-weight-bold text-dark">
-              เอกสารเพิ่มเติม
-            </div>
-          </div>
-          <q-card bordered flat class="full-width">
-            <q-list separator>
-              <q-item v-for="file in files" :key="file.key" class="q-my-xs">
-                <q-item-section>
-                  <q-item-label class="full-width ellipsis">
-                    {{ file.fileName }}
-                  </q-item-label>
+				<div class="col-12 col-sm-6 row" v-if="!edit">
+					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
+					</div>
+					<q-card bordered flat class="full-width">
+						<q-list separator>
+							<q-item v-for="(file, index) in leaveDocumentList" :key="index" class="q-my-xs">
+								<q-item-section>
+									<q-item-label class="full-width ellipsis">
+										{{ file.name }}
+									</q-item-label>
+									<q-item-label caption> </q-item-label>
+								</q-item-section>
+							</q-item>
+						</q-list>
+					</q-card>
+				</div>
+			</div>
+		</q-card>
 
-                  <q-item-label caption> </q-item-label>
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-card>
-        </div>
-      </div>
-    </q-card>
-
-    <div v-if="data && data.id" class="q-mt-md">
-      <div style="display: flex; align-items: center">
-        <q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
-        <div class="q-pl-sm text-weight-bold text-dark">
-          ดาวน์โหลด/อัปโหลดแบบฟอร์ม
-        </div>
-      </div>
-      <q-card class="bg-grey-1 q-pa-sm" bordered>
-        <div class="row">
-          <div class="col-sm-3 q-my-sm">
-            <div class="column q-mx-xs">
-              <!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
+		<div v-if="data && data.id" class="q-mt-md">
+			<div style="display: flex; align-items: center">
+				<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
+				<div class="q-pl-sm text-weight-bold text-dark">ดาวน์โหลด/อัปโหลดแบบฟอร์ม</div>
+			</div>
+			<q-card class="bg-grey-1 q-pa-sm" bordered>
+				<div class="row">
+					<div class="col-sm-3 q-my-sm">
+						<div class="column q-mx-xs">
+							<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
                 ดาวน์โหลด
               </div> -->
-              <q-btn
-                color="primary"
-                icon="download"
-                label="ดาวน์โหลดแบบฟอร์ม"
-                @click="onClickDownloadFile(data.id, `แบบฟอร์ม${data.leaveTypeName}`)"
-              />
-            </div>
-          </div>
-          <div class="col-sm-5 q-my-sm">
-            <div class="column q-mx-xs">
-              <!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
+							<q-btn color="primary" icon="download" label="ดาวน์โหลดแบบฟอร์ม" @click="onClickDownloadFile(data.id, `แบบฟอร์ม${data.leaveTypeName}`)" />
+						</div>
+					</div>
+					<div class="col-sm-5 q-my-sm">
+						<div class="column q-mx-xs">
+							<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
                 อัปโหลด
               </div> -->
-              <q-file
-                v-model="formDataRehabilitation.leaveDraftDocument"
-                use-chips
-                dense
-                label="อัปโหลดแบบฟอร์ม"
-                outlined
-                bg-color="white"
-                accept="application/pdf"
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" color="primary" />
-                </template>
-              </q-file>
-            </div>
-          </div>
+							<q-file v-model="formDataRehabilitation.leaveDraftDocument" use-chips dense label="อัปโหลดแบบฟอร์ม" outlined bg-color="white" accept="application/pdf">
+								<template v-slot:prepend>
+									<q-icon name="attach_file" color="primary" />
+								</template>
+							</q-file>
+						</div>
+					</div>
 
-          <div v-if="leaveDraftDocument" class="col-sm-2 q-my-sm">
-            <div class="column q-mx-xs">
-              <!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
+					<div v-if="leaveDraftDocument" class="col-sm-2 q-my-sm">
+						<div class="column q-mx-xs">
+							<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
                 ดูไฟล์อัปโหลด
               </div> -->
-              <q-btn
-                icon="visibility"
-                color="blue"
-                label="ดาวน์โหลดไฟล์"
-                :href="leaveDraftDocument"
-                target="_blank"
-              />
-            </div>
-          </div>
-          <!-- <div class="col-md-1 self-end q-mb-sm">
+							<q-btn icon="visibility" color="blue" label="ดาวน์โหลดไฟล์" :href="leaveDraftDocument" target="_blank" />
+						</div>
+					</div>
+					<!-- <div class="col-md-1 self-end q-mb-sm">
 						<q-btn v-if="formDataRehabilitation.leaveDraftDocument != null" flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"
 							><q-tooltip>อัปโหลด</q-tooltip></q-btn
 						>
 					</div> -->
-        </div>
-      </q-card>
-    </div>
+				</div>
+			</q-card>
+		</div>
 
-    <div v-if="!isSave">
-      <q-separator class="q-mt-sm" />
-      <div class="row col-12 q-pt-md">
-        <q-space />
-        <q-btn
-          v-if="!props.data || props.data.status == 'DRAFT'"
-          id="onSubmit"
-          type="submit"
-          unelevated
-          dense
-          class="q-px-md items-center btnBlue"
-          label="บันทึก"
-          ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
-        >
-        <q-btn
-          v-if="data"
-          id="onSubmit"
-          type="button"
-          unelevated
-          dense
-          class="q-px-md items-center q-ml-sm"
-          color="primary"
-          label="ยื่นใบลา"
-          @click="onConfirm"
-          ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
-        >
-      </div>
-    </div>
-  </form>
+		<div v-if="!isSave">
+			<q-separator class="q-mt-sm" />
+			<div class="row col-12 q-pt-md">
+				<q-space />
+				<q-btn v-if="!props.data || props.data.status == 'DRAFT'" id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"
+					><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+				>
+				<q-btn v-if="data" id="onSubmit" type="button" unelevated dense class="q-px-md items-center q-ml-sm" color="primary" label="ยื่นใบลา" @click="onConfirm"
+					><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+				>
+			</div>
+		</div>
+	</form>
 </template>
diff --git a/src/modules/05_leave/components/formDetail/formCheckSelect.vue b/src/modules/05_leave/components/formDetail/formCheckSelect.vue
index 0cead4d..2b83471 100644
--- a/src/modules/05_leave/components/formDetail/formCheckSelect.vue
+++ b/src/modules/05_leave/components/formDetail/formCheckSelect.vue
@@ -1,82 +1,82 @@
 <script setup lang="ts">
 const props = defineProps({
-  data: {
-    type: Object,
-    required: true,
-  },
-});
-console.log(props);
+	data: {
+		type: Object,
+		required: true,
+	},
+})
+console.log(props)
 </script>
 
 <template>
-  <q-card-section>
-    <div class="q-pa-md q-gutter-md">
-      <div class="row">
-        <div class="col text-grey-8">วันที่ยื่นใบลา</div>
-        <div class="col">{{ props.data.dateSendLeave }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เรื่อง</div>
-        <div class="col">{{ props.data.leaveTypeName }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เขียนที่</div>
-        <div class="col">{{ props.data.leaveWrote }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
-        <div class="col">{{ props.data.leaveDateStart }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลาถึงวันที่</div>
-        <div class="col">{{ props.data.leaveDateEnd }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">จำนวนวันที่ลา</div>
-        <div class="col">{{ props.data.leaveCount }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ได้รับหมายเรียกของ</div>
-        <div class="col">{{ props.data.absentDaySummon }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ที่</div>
-        <div class="col">{{ props.data.absentDayLocation }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลงวันที่</div>
-        <div class="col">{{ props.data.absentDayRegistorDate }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ให้เข้ารับการ</div>
-        <div class="col">{{ props.data.absentDayGetIn }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ณ ที่</div>
-        <div class="col">{{ props.data.absentDayAt }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">รายละเอียด</div>
-        <div class="col">{{ props.data.leaveDetail }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เอกสารแนบ</div>
-        <div class="col" v-if="props.data.leaveDocument">
-          <q-btn
-            :href="props.data.leaveDocument"
-            target="_blank"
-            outline
-            color="blue"
-            label="ดาวน์โหลด"
-            size="12px"
-          >
-            <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
-          >
-        </div>
-        <div class="col" v-else>-</div>
-      </div>
-    </div>
-  </q-card-section>
+	<q-card-section>
+		<div class="q-pa-md q-gutter-md">
+			<div class="row">
+				<div class="col text-grey-8">วันที่ยื่นใบลา</div>
+				<div class="col">{{ props.data.dateSendLeave }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เรื่อง</div>
+				<div class="col">{{ props.data.leaveTypeName }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เขียนที่</div>
+				<div class="col">{{ props.data.leaveWrote }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
+				<div class="col">{{ props.data.leaveDateStart }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาถึงวันที่</div>
+				<div class="col">{{ props.data.leaveDateEnd }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">จำนวนวันที่ลา</div>
+				<div class="col">{{ props.data.leaveCount }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ได้รับหมายเรียกของ</div>
+				<div class="col">{{ props.data.absentDaySummon }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ที่</div>
+				<div class="col">{{ props.data.absentDayLocation }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลงวันที่</div>
+				<div class="col">{{ props.data.absentDayRegistorDate }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ให้เข้ารับการ</div>
+				<div class="col">{{ props.data.absentDayGetIn }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ณ ที่</div>
+				<div class="col">{{ props.data.absentDayAt }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">รายละเอียด</div>
+				<div class="col">{{ props.data.leaveDetail }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เอกสารแนบ</div>
+				<div class="col">
+					<div v-if="props.data.leaveDocument && props.data.leaveDocument.length > 0">
+						<div v-for="(document, index) in props.data.leaveDocument" :key="index">
+							<div>
+								{{ "เอกสารแนบฉบับที่" + (index + 1) }}
+								<q-btn :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
+									<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+								</q-btn>
+							</div>
+						</div>
+					</div>
+					<div v-else>-</div>
+				</div>
+			</div>
+		</div>
+	</q-card-section>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/05_leave/components/formDetail/formChildbirth.vue b/src/modules/05_leave/components/formDetail/formChildbirth.vue
index 115f2f5..1740be4 100644
--- a/src/modules/05_leave/components/formDetail/formChildbirth.vue
+++ b/src/modules/05_leave/components/formDetail/formChildbirth.vue
@@ -1,76 +1,76 @@
 <script setup lang="ts">
 const props = defineProps({
-  data: {
-    type: Object,
-    required: true,
-  },
-});
+	data: {
+		type: Object,
+		required: true,
+	},
+})
 </script>
 <template>
-  <q-card-section>
-    <div class="q-pa-md q-gutter-md">
-      <div class="row">
-        <div class="col text-grey-8">วันที่ยื่นใบลา</div>
-        <div class="col">{{ props.data.dateSendLeave }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เรื่อง</div>
-        <div class="col">{{ props.data.leaveTypeName }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เขียนที่</div>
-        <div class="col">{{ props.data.leaveWrote }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
-        <div class="col">{{ props.data.leaveDateStart }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลาถึงวันที่</div>
-        <div class="col">{{ props.data.leaveDateEnd }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">จำนวนวันที่ลา</div>
-        <div class="col">{{ props.data.leaveCount }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ชื่อภรรยา</div>
-        <div class="col">{{ props.data.wifeDayName }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">วันที่คลอด</div>
-        <div class="col">{{ props.data.wifeDayDateBorn }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
-        <div class="col">{{ props.data.leaveNumber }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
-        <div class="col">{{ props.data.leaveAddress }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">รายละเอียด</div>
-        <div class="col">{{ props.data.leaveDetail }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เอกสารแนบ</div>
-        <div class="col" v-if="props.data.leaveDocument">
-          <q-btn
-            :href="props.data.leaveDocument"
-            target="_blank"
-            outline
-            color="blue"
-            label="ดาวน์โหลด"
-            size="12px"
-          >
-            <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
-          >
-        </div>
-        <div class="col" v-else>-</div>
-      </div>
-    </div>
-  </q-card-section>
+	<q-card-section>
+		<div class="q-pa-md q-gutter-md">
+			<div class="row">
+				<div class="col text-grey-8">วันที่ยื่นใบลา</div>
+				<div class="col">{{ props.data.dateSendLeave }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เรื่อง</div>
+				<div class="col">{{ props.data.leaveTypeName }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เขียนที่</div>
+				<div class="col">{{ props.data.leaveWrote }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
+				<div class="col">{{ props.data.leaveDateStart }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาถึงวันที่</div>
+				<div class="col">{{ props.data.leaveDateEnd }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">จำนวนวันที่ลา</div>
+				<div class="col">{{ props.data.leaveCount }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ชื่อภรรยา</div>
+				<div class="col">{{ props.data.wifeDayName }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">วันที่คลอด</div>
+				<div class="col">{{ props.data.wifeDayDateBorn }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
+				<div class="col">{{ props.data.leaveNumber }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
+				<div class="col">{{ props.data.leaveAddress }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">รายละเอียด</div>
+				<div class="col">{{ props.data.leaveDetail }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เอกสารแนบ</div>
+				<div class="col">
+					<div v-if="props.data.leaveDocument && props.data.leaveDocument.length > 0">
+						<div v-for="(document, index) in props.data.leaveDocument" :key="index">
+							<div>
+								{{ "เอกสารแนบฉบับที่" + (index + 1) }}
+								<q-btn :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
+									<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+								</q-btn>
+							</div>
+						</div>
+					</div>
+					<div v-else>-</div>
+				</div>
+			</div>
+		</div>
+	</q-card-section>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/05_leave/components/formDetail/formHajj.vue b/src/modules/05_leave/components/formDetail/formHajj.vue
index 903d36b..effc1a8 100644
--- a/src/modules/05_leave/components/formDetail/formHajj.vue
+++ b/src/modules/05_leave/components/formDetail/formHajj.vue
@@ -1,69 +1,69 @@
 <script setup lang="ts">
 const props = defineProps({
-  data: {
-    type: Object,
-    required: true,
-  },
-});
+	data: {
+		type: Object,
+		required: true,
+	},
+})
 </script>
 
 <template>
-  <q-card-section>
-    <div class="q-pa-md q-gutter-md">
-      <div class="row">
-        <div class="col text-grey-8">วันที่ยื่นใบลา</div>
-        <div class="col">{{ props.data.dateSendLeave }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เรื่อง</div>
-        <div class="col">{{ props.data.leaveTypeName }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เขียนที่</div>
-        <div class="col">{{ props.data.leaveWrote }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
-        <div class="col">{{ props.data.leaveDateStart }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลาถึงวันที่</div>
-        <div class="col">{{ props.data.leaveDateEnd }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">จำนวนวันที่ลา</div>
-        <div class="col">{{ props.data.leaveCount }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">วันที่เข้ารับราชการ</div>
-        <div class="col">{{ props.data.leavegovernmentDate }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เคย/ไม่เคยไปประกอบพิธีฮัจญ์</div>
-        <div class="col">{{ props.data.hajjDayStatus ? "เคย" : "ไม่เคย" }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">รายละเอียด</div>
-        <div class="col">{{ props.data.leaveDetail }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เอกสารแนบ</div>
-        <div class="col" v-if="props.data.leaveDocument">
-          <q-btn
-            :href="props.data.leaveDocument"
-            target="_blank"
-            outline
-            color="blue"
-            label="ดาวน์โหลด"
-            size="12px"
-          >
-            <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
-          >
-        </div>
-        <div class="col" v-else>-</div>
-      </div>
-    </div>
-  </q-card-section>
+	<q-card-section>
+		<div class="q-pa-md q-gutter-md">
+			<div class="row">
+				<div class="col text-grey-8">วันที่ยื่นใบลา</div>
+				<div class="col">{{ props.data.dateSendLeave }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เรื่อง</div>
+				<div class="col">{{ props.data.leaveTypeName }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เขียนที่</div>
+				<div class="col">{{ props.data.leaveWrote }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
+				<div class="col">{{ props.data.leaveDateStart }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาถึงวันที่</div>
+				<div class="col">{{ props.data.leaveDateEnd }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">จำนวนวันที่ลา</div>
+				<div class="col">{{ props.data.leaveCount }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">วันที่เข้ารับราชการ</div>
+				<div class="col">{{ props.data.leavegovernmentDate }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เคย/ไม่เคยไปประกอบพิธีฮัจญ์</div>
+				<div class="col">{{ props.data.hajjDayStatus ? "เคย" : "ไม่เคย" }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">รายละเอียด</div>
+				<div class="col">{{ props.data.leaveDetail }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เอกสารแนบ</div>
+				<div class="col">
+					<div v-if="props.data.leaveDocument && props.data.leaveDocument.length > 0">
+						<div v-for="(document, index) in props.data.leaveDocument" :key="index">
+							<div>
+								{{ "เอกสารแนบฉบับที่" + (index + 1) }}
+								<q-btn :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
+									<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+								</q-btn>
+							</div>
+						</div>
+					</div>
+					<div v-else>-</div>
+				</div>
+			</div>
+		</div>
+	</q-card-section>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/05_leave/components/formDetail/formHoliday.vue b/src/modules/05_leave/components/formDetail/formHoliday.vue
index 5b843c3..602bf03 100644
--- a/src/modules/05_leave/components/formDetail/formHoliday.vue
+++ b/src/modules/05_leave/components/formDetail/formHoliday.vue
@@ -1,81 +1,81 @@
 <script setup lang="ts">
 const props = defineProps({
-  data: {
-    type: Object,
-    required: true,
-  },
-});
+	data: {
+		type: Object,
+		required: true,
+	},
+})
 </script>
 
 <template>
-  <q-card-section>
-    <div class="q-pa-md q-gutter-md">
-      <div class="row">
-        <div class="col text-grey-8">วันที่ยื่นใบลา</div>
-        <div class="col">{{ props.data.dateSendLeave }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เรื่อง</div>
-        <div class="col">{{ props.data.leaveTypeName }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เขียนที่</div>
-        <div class="col">{{ props.data.leaveWrote }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา</div>
-        <div class="col">{{ props.data.restDayOldTotal }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">จำนวนวันลาพักผ่อนประจำปีปัจจุบัน</div>
-        <div class="col">{{ props.data.restDayCurrentTotal }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
-        <div class="col">{{ props.data.leaveDateStart }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลาถึงวันที่</div>
-        <div class="col">{{ props.data.leaveDateEnd }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">จำนวนวันที่ลา</div>
-        <div class="col">{{ props.data.leaveCount }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8"></div>
-        <div class="col">{{ props.data.leaveTypeDay }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
-        <div class="col">{{ props.data.leaveNumber }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
-        <div class="col">{{ props.data.leaveAddress }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">รายละเอียด</div>
-        <div class="col">{{ props.data.leaveDetail }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เอกสารแนบ</div>
-        <div class="col" v-if="props.data.leaveDocument">
-          <q-btn
-            :href="props.data.leaveDocument"
-            target="_blank"
-            outline
-            color="blue"
-            label="ดาวน์โหลด"
-            size="12px"
-          >
-            <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
-          >
-        </div>
-        <div class="col" v-else>-</div>
-      </div>
-    </div>
-  </q-card-section>
+	<q-card-section>
+		<div class="q-pa-md q-gutter-md">
+			<div class="row">
+				<div class="col text-grey-8">วันที่ยื่นใบลา</div>
+				<div class="col">{{ props.data.dateSendLeave }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เรื่อง</div>
+				<div class="col">{{ props.data.leaveTypeName }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เขียนที่</div>
+				<div class="col">{{ props.data.leaveWrote }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา</div>
+				<div class="col">{{ props.data.restDayOldTotal }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">จำนวนวันลาพักผ่อนประจำปีปัจจุบัน</div>
+				<div class="col">{{ props.data.restDayCurrentTotal }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
+				<div class="col">{{ props.data.leaveDateStart }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาถึงวันที่</div>
+				<div class="col">{{ props.data.leaveDateEnd }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">จำนวนวันที่ลา</div>
+				<div class="col">{{ props.data.leaveCount }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8"></div>
+				<div class="col">{{ props.data.leaveTypeDay }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
+				<div class="col">{{ props.data.leaveNumber }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
+				<div class="col">{{ props.data.leaveAddress }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">รายละเอียด</div>
+				<div class="col">{{ props.data.leaveDetail }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เอกสารแนบ</div>
+				<div class="col">
+					<div v-if="props.data.leaveDocument && props.data.leaveDocument.length > 0">
+						<div v-for="(document, index) in props.data.leaveDocument" :key="index">
+							<div>
+								{{ "เอกสารแนบฉบับที่" + (index + 1) }}
+								<q-btn :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
+									<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+								</q-btn>
+							</div>
+						</div>
+					</div>
+					<div v-else>-</div>
+				</div>
+			</div>
+		</div>
+	</q-card-section>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/05_leave/components/formDetail/formLeave.vue b/src/modules/05_leave/components/formDetail/formLeave.vue
index 3e176d8..b3fa6ba 100644
--- a/src/modules/05_leave/components/formDetail/formLeave.vue
+++ b/src/modules/05_leave/components/formDetail/formLeave.vue
@@ -1,79 +1,77 @@
 <script setup lang="ts">
 const props = defineProps({
-  data: {
-    type: Object,
-    required: true,
-  },
-});
+	data: {
+		type: Object,
+		required: true,
+	},
+})
 </script>
 
 <template>
-  <q-card-section>
-    <div class="q-pa-md q-gutter-md">
-      <div class="row">
-        <div class="col text-grey-8">วันที่ยื่นใบลา</div>
-        <div class="col">{{ props.data.dateSendLeave }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เรื่อง</div>
-        <div class="col">{{ props.data.leaveTypeName }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เขียนที่</div>
-        <div class="col">{{ props.data.leaveWrote }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
-        <div class="col">{{ props.data.leaveDateStart }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลาถึงวันที่</div>
-        <div class="col">{{ props.data.leaveDateEnd }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">จำนวนวันที่ลา</div>
-        <div class="col">{{ props.data.leaveCount }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8"></div>
-        <div class="col">{{ props.data.leaveTypeDay }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">
-          ลาครั้งสุดท้ายในประเภทนั้น ๆ เมื่อวันที่
-        </div>
-        <div class="col">{{ props.data.leaveLastStart }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
-        <div class="col">{{ props.data.leaveNumber }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
-        <div class="col">{{ props.data.leaveAddress }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">รายละเอียด</div>
-        <div class="col">{{ props.data.leaveDetail }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เอกสารแนบ</div>
-        <div class="col" v-if="props.data.leaveDocument">
-          <q-btn
-            :href="props.data.leaveDocument"
-            target="_blank"
-            outline
-            color="blue"
-            label="ดาวน์โหลด"
-            size="12px"
-          >
-            <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
-          >
-        </div>
-        <div class="col" v-else>-</div>
-      </div>
-    </div>
-  </q-card-section>
+	<q-card-section>
+		<div class="q-pa-md q-gutter-md">
+			<div class="row">
+				<div class="col text-grey-8">วันที่ยื่นใบลา</div>
+				<div class="col">{{ props.data.dateSendLeave }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เรื่อง</div>
+				<div class="col">{{ props.data.leaveTypeName }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เขียนที่</div>
+				<div class="col">{{ props.data.leaveWrote }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
+				<div class="col">{{ props.data.leaveDateStart }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาถึงวันที่</div>
+				<div class="col">{{ props.data.leaveDateEnd }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">จำนวนวันที่ลา</div>
+				<div class="col">{{ props.data.leaveCount }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8"></div>
+				<div class="col">{{ props.data.leaveTypeDay }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาครั้งสุดท้ายในประเภทนั้น ๆ เมื่อวันที่</div>
+				<div class="col">{{ props.data.leaveLastStart }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
+				<div class="col">{{ props.data.leaveNumber }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
+				<div class="col">{{ props.data.leaveAddress }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">รายละเอียด</div>
+				<div class="col">{{ props.data.leaveDetail }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เอกสารแนบ</div>
+				<div class="col">
+					<div v-if="props.data.leaveDocument && props.data.leaveDocument.length > 0">
+						<div v-for="(document, index) in props.data.leaveDocument" :key="index">
+							<div>
+								{{ "เอกสารแนบฉบับที่" + (index + 1) }}
+								<q-btn :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
+									<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+								</q-btn>
+							</div>
+						</div>
+					</div>
+					<div v-else>-</div>
+				</div>
+			</div>
+		</div>
+	</q-card-section>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/05_leave/components/formDetail/formLeaveToTraining.vue b/src/modules/05_leave/components/formDetail/formLeaveToTraining.vue
index 4df5389..13c6275 100644
--- a/src/modules/05_leave/components/formDetail/formLeaveToTraining.vue
+++ b/src/modules/05_leave/components/formDetail/formLeaveToTraining.vue
@@ -1,98 +1,96 @@
 <script setup lang="ts">
 const props = defineProps({
-  data: {
-    type: Object,
-    required: true,
-  },
-});
+	data: {
+		type: Object,
+		required: true,
+	},
+})
 </script>
 <template>
-  <q-card-section>
-    <div class="q-pa-md q-gutter-md">
-      <div class="row">
-        <div class="col text-grey-8">วันที่ยื่นใบลา</div>
-        <div class="col">{{ props.data.dateSendLeave }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เรื่อง</div>
-        <div class="col">{{ props.data.leaveTypeName }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เขียนที่</div>
-        <div class="col">{{ props.data.leaveWrote }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
-        <div class="col">{{ props.data.leaveDateStart }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลาถึงวันที่</div>
-        <div class="col">{{ props.data.leaveDateEnd }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">จำนวนวันที่ลา</div>
-        <div class="col">{{ props.data.leaveCount }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">วันเดือนปีเกิด</div>
-        <div class="col">{{ props.data.leavebirthDate }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">วันที่เข้ารับราชการ</div>
-        <div class="col">{{ props.data.leavegovernmentDate }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เงินเดือนปัจจุบัน</div>
-        <div class="col">
-          {{ props.data.leaveSalary }} ({{ props.data.leaveSalaryText }})
-        </div>
-      </div>
+	<q-card-section>
+		<div class="q-pa-md q-gutter-md">
+			<div class="row">
+				<div class="col text-grey-8">วันที่ยื่นใบลา</div>
+				<div class="col">{{ props.data.dateSendLeave }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เรื่อง</div>
+				<div class="col">{{ props.data.leaveTypeName }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เขียนที่</div>
+				<div class="col">{{ props.data.leaveWrote }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
+				<div class="col">{{ props.data.leaveDateStart }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาถึงวันที่</div>
+				<div class="col">{{ props.data.leaveDateEnd }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">จำนวนวันที่ลา</div>
+				<div class="col">{{ props.data.leaveCount }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">วันเดือนปีเกิด</div>
+				<div class="col">{{ props.data.leavebirthDate }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">วันที่เข้ารับราชการ</div>
+				<div class="col">{{ props.data.leavegovernmentDate }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เงินเดือนปัจจุบัน</div>
+				<div class="col">{{ props.data.leaveSalary }} ({{ props.data.leaveSalaryText }})</div>
+			</div>
 
-      <div class="row">
-        <div class="col text-grey-8">ด้าน/หลักสูตร</div>
-        <div class="col">{{ props.data.studyDayTrainingSubject }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ณ สถานที่</div>
-        <div class="col">{{ props.data.studyDayTrainingName }}</div>
-      </div>
+			<div class="row">
+				<div class="col text-grey-8">ด้าน/หลักสูตร</div>
+				<div class="col">{{ props.data.studyDayTrainingSubject }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ณ สถานที่</div>
+				<div class="col">{{ props.data.studyDayTrainingName }}</div>
+			</div>
 
-      <div class="row">
-        <div class="col text-grey-8">ประเทศ</div>
-        <div class="col">{{ props.data.studyDayCountry }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ด้วยทุน</div>
-        <div class="col">{{ props.data.studyDayScholarship }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
-        <div class="col">{{ props.data.leaveNumber }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
-        <div class="col">{{ props.data.leaveAddress }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">รายละเอียด</div>
-        <div class="col">{{ props.data.leaveDetail }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เอกสารแนบ</div>
-        <div class="col" v-if="props.data.leaveDocument">
-          <q-btn
-            :href="props.data.leaveDocument"
-            target="_blank"
-            outline
-            color="blue"
-            label="ดาวน์โหลด"
-            size="12px"
-          >
-            <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
-          >
-        </div>
-        <div class="col" v-else>-</div>
-      </div>
-    </div>
-  </q-card-section>
+			<div class="row">
+				<div class="col text-grey-8">ประเทศ</div>
+				<div class="col">{{ props.data.studyDayCountry }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ด้วยทุน</div>
+				<div class="col">{{ props.data.studyDayScholarship }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
+				<div class="col">{{ props.data.leaveNumber }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
+				<div class="col">{{ props.data.leaveAddress }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">รายละเอียด</div>
+				<div class="col">{{ props.data.leaveDetail }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เอกสารแนบ</div>
+				<div class="col">
+					<div v-if="props.data.leaveDocument && props.data.leaveDocument.length > 0">
+						<div v-for="(document, index) in props.data.leaveDocument" :key="index">
+							<div>
+								{{ "เอกสารแนบฉบับที่" + (index + 1) }}
+								<q-btn :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
+									<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+								</q-btn>
+							</div>
+						</div>
+					</div>
+					<div v-else>-</div>
+				</div>
+			</div>
+		</div>
+	</q-card-section>
 </template>
diff --git a/src/modules/05_leave/components/formDetail/formLeaveToWorkInternational.vue b/src/modules/05_leave/components/formDetail/formLeaveToWorkInternational.vue
index 7bf9065..9561acd 100644
--- a/src/modules/05_leave/components/formDetail/formLeaveToWorkInternational.vue
+++ b/src/modules/05_leave/components/formDetail/formLeaveToWorkInternational.vue
@@ -41,11 +41,20 @@ const props = defineProps({
 				<div class="col" v-else>-</div>
 			</div>
 			<div class="row">
-				<div class="col text-grey-8">เอกสารแบบฟอร์ม</div>
-				<div class="col" v-if="props.data.leaveDraftDocument">
-					<q-btn :href="props.data.leaveDraftDocument" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px"> <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn>
+				<div class="col text-grey-8">เอกสารแนบ</div>
+				<div class="col">
+					<div v-if="props.data.leaveDocument && props.data.leaveDocument.length > 0">
+						<div v-for="(document, index) in props.data.leaveDocument" :key="index">
+							<div>
+								{{ "เอกสารแนบฉบับที่" + (index + 1) }}
+								<q-btn :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
+									<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+								</q-btn>
+							</div>
+						</div>
+					</div>
+					<div v-else>-</div>
 				</div>
-				<div class="col" v-else>-</div>
 			</div>
 		</div>
 	</q-card-section>
diff --git a/src/modules/05_leave/components/formDetail/formSpouse.vue b/src/modules/05_leave/components/formDetail/formSpouse.vue
index e652a3c..9a79376 100644
--- a/src/modules/05_leave/components/formDetail/formSpouse.vue
+++ b/src/modules/05_leave/components/formDetail/formSpouse.vue
@@ -84,10 +84,19 @@ const props = defineProps({
 			</div>
 			<div class="row">
 				<div class="col text-grey-8">เอกสารแนบ</div>
-				<div class="col" v-if="props.data.leaveDocument">
-					<q-btn :href="props.data.leaveDocument" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px"> <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn>
+				<div class="col">
+					<div v-if="props.data.leaveDocument && props.data.leaveDocument.length > 0">
+						<div v-for="(document, index) in props.data.leaveDocument" :key="index">
+							<div>
+								{{ "เอกสารแนบฉบับที่" + (index + 1) }}
+								<q-btn :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
+									<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+								</q-btn>
+							</div>
+						</div>
+					</div>
+					<div v-else>-</div>
 				</div>
-				<div class="col" v-else>-</div>
 			</div>
 		</div>
 	</q-card-section>
diff --git a/src/modules/05_leave/components/formDetail/formStudy.vue b/src/modules/05_leave/components/formDetail/formStudy.vue
index d80fc1a..26975d2 100644
--- a/src/modules/05_leave/components/formDetail/formStudy.vue
+++ b/src/modules/05_leave/components/formDetail/formStudy.vue
@@ -80,10 +80,19 @@ const props = defineProps({
 			</div>
 			<div class="row">
 				<div class="col text-grey-8">เอกสารแนบ</div>
-				<div class="col" v-if="props.data.leaveDocument">
-					<q-btn :href="props.data.leaveDocument" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px"> <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn>
+				<div class="col">
+					<div v-if="props.data.leaveDocument && props.data.leaveDocument.length > 0">
+						<div v-for="(document, index) in props.data.leaveDocument" :key="index">
+							<div>
+								{{ "เอกสารแนบฉบับที่" + (index + 1) }}
+								<q-btn :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
+									<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+								</q-btn>
+							</div>
+						</div>
+					</div>
+					<div v-else>-</div>
 				</div>
-				<div class="col" v-else>-</div>
 			</div>
 		</div>
 	</q-card-section>
diff --git a/src/modules/05_leave/components/formDetail/formUpasom.vue b/src/modules/05_leave/components/formDetail/formUpasom.vue
index a38b9df..9241cb9 100644
--- a/src/modules/05_leave/components/formDetail/formUpasom.vue
+++ b/src/modules/05_leave/components/formDetail/formUpasom.vue
@@ -1,94 +1,94 @@
 <script setup lang="ts">
 const props = defineProps({
-  data: {
-    type: Object,
-    required: true,
-  },
-});
+	data: {
+		type: Object,
+		required: true,
+	},
+})
 </script>
 
 <template>
-  <q-card-section>
-    <div class="q-pa-md q-gutter-md">
-      <div class="row">
-        <div class="col text-grey-8">วันที่ยื่นใบลา</div>
-        <div class="col">{{ props.data.dateSendLeave }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เรื่อง</div>
-        <div class="col">{{ props.data.leaveTypeName }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เขียนที่</div>
-        <div class="col">{{ props.data.leaveWrote }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
-        <div class="col">{{ props.data.leaveLastStart }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลาถึงวันที่</div>
-        <div class="col">{{ props.data.leaveLastEnd }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">จำนวนวันที่ลา</div>
-        <div class="col">{{ props.data.leaveTotal }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">วันเดือนปีเกิด</div>
-        <div class="col">{{ props.data.leavebirthDate }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">วันที่เข้ารับราชการ</div>
-        <div class="col">{{ props.data.leavegovernmentDate }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เคย/ไม่เคยบวช</div>
-        <div class="col">
-          {{ props.data.ordainDayStatus ? "เคย" : "ไม่เคย" }}
-        </div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">สถานที่บวช</div>
-        <div class="col">
-          {{ props.data.ordainDayLocationName }}
-          {{ props.data.ordainDayLocationAddress }}
-          {{ props.data.ordainDayLocationNumber }}
-        </div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">วันอุปสมบท</div>
-        <div class="col">{{ props.data.ordainDayOrdination }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">สถานที่จำพรรษา</div>
-        <div class="col">
-          {{ props.data.ordainDayBuddhistLentName }}
-          {{ props.data.ordainDayBuddhistLentAddress }}
-        </div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">รายละเอียด</div>
-        <div class="col">{{ props.data.leaveDetail }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เอกสารแนบ</div>
-        <div class="col" v-if="props.data.leaveDocument">
-          <q-btn
-            :href="props.data.leaveDocument"
-            target="_blank"
-            outline
-            color="blue"
-            label="ดาวน์โหลด"
-            size="12px"
-          >
-            <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
-          >
-        </div>
-        <div class="col" v-else>-</div>
-      </div>
-    </div>
-  </q-card-section>
+	<q-card-section>
+		<div class="q-pa-md q-gutter-md">
+			<div class="row">
+				<div class="col text-grey-8">วันที่ยื่นใบลา</div>
+				<div class="col">{{ props.data.dateSendLeave }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เรื่อง</div>
+				<div class="col">{{ props.data.leaveTypeName }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เขียนที่</div>
+				<div class="col">{{ props.data.leaveWrote }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
+				<div class="col">{{ props.data.leaveLastStart }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาถึงวันที่</div>
+				<div class="col">{{ props.data.leaveLastEnd }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">จำนวนวันที่ลา</div>
+				<div class="col">{{ props.data.leaveTotal }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">วันเดือนปีเกิด</div>
+				<div class="col">{{ props.data.leavebirthDate }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">วันที่เข้ารับราชการ</div>
+				<div class="col">{{ props.data.leavegovernmentDate }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เคย/ไม่เคยบวช</div>
+				<div class="col">
+					{{ props.data.ordainDayStatus ? "เคย" : "ไม่เคย" }}
+				</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">สถานที่บวช</div>
+				<div class="col">
+					{{ props.data.ordainDayLocationName }}
+					{{ props.data.ordainDayLocationAddress }}
+					{{ props.data.ordainDayLocationNumber }}
+				</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">วันอุปสมบท</div>
+				<div class="col">{{ props.data.ordainDayOrdination }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">สถานที่จำพรรษา</div>
+				<div class="col">
+					{{ props.data.ordainDayBuddhistLentName }}
+					{{ props.data.ordainDayBuddhistLentAddress }}
+				</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">รายละเอียด</div>
+				<div class="col">{{ props.data.leaveDetail }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เอกสารแนบ</div>
+				<div class="col">
+					<div v-if="props.data.leaveDocument && props.data.leaveDocument.length > 0">
+						<div v-for="(document, index) in props.data.leaveDocument" :key="index">
+							<div>
+								{{ "เอกสารแนบฉบับที่" + (index + 1) }}
+								<q-btn :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
+									<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+								</q-btn>
+							</div>
+						</div>
+					</div>
+					<div v-else>-</div>
+				</div>
+			</div>
+		</div>
+	</q-card-section>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/05_leave/components/formDetail/formVocationalRehabilitation.vue b/src/modules/05_leave/components/formDetail/formVocationalRehabilitation.vue
index 7bf9065..9561acd 100644
--- a/src/modules/05_leave/components/formDetail/formVocationalRehabilitation.vue
+++ b/src/modules/05_leave/components/formDetail/formVocationalRehabilitation.vue
@@ -41,11 +41,20 @@ const props = defineProps({
 				<div class="col" v-else>-</div>
 			</div>
 			<div class="row">
-				<div class="col text-grey-8">เอกสารแบบฟอร์ม</div>
-				<div class="col" v-if="props.data.leaveDraftDocument">
-					<q-btn :href="props.data.leaveDraftDocument" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px"> <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn>
+				<div class="col text-grey-8">เอกสารแนบ</div>
+				<div class="col">
+					<div v-if="props.data.leaveDocument && props.data.leaveDocument.length > 0">
+						<div v-for="(document, index) in props.data.leaveDocument" :key="index">
+							<div>
+								{{ "เอกสารแนบฉบับที่" + (index + 1) }}
+								<q-btn :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
+									<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+								</q-btn>
+							</div>
+						</div>
+					</div>
+					<div v-else>-</div>
 				</div>
-				<div class="col" v-else>-</div>
 			</div>
 		</div>
 	</q-card-section>
diff --git a/src/modules/05_leave/views/EditPage.vue b/src/modules/05_leave/views/EditPage.vue
index 7f4cbb1..234c120 100644
--- a/src/modules/05_leave/views/EditPage.vue
+++ b/src/modules/05_leave/views/EditPage.vue
@@ -48,7 +48,7 @@ const formData = reactive<any>({
 	leaveAddress: "", //สถานที่ติดต่อขณะลา
 	leaveNumber: "", //หมายเลขที่ติดต่อขณะลา
 	leaveDetail: "", //รายละเอียดการลา
-	leaveDocument: "", //อัปโหลดเอกสารประกอบรายละเอียด
+	leaveDocument: [], //อัปโหลดเอกสารประกอบรายละเอียด
 	leaveDraftDocument: "", //อัปโหลดแบบฟอร์มการลา
 	leaveLastStart: null, //ลาครั้งสุดท้ายในประเภทนั้น ๆ เริ่มเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
 	leaveLastEnd: null, //ลาครั้งสุดท้ายในประเภทนั้น ๆ สิ้นสุดเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
@@ -216,18 +216,18 @@ function onSubmit(formData: FormData) {
 			})
 			.finally(() => {
 				hideLoader()
+				fetchDataDetail(personalId.value)
 			})
 	})
 }
 
-function onConfirm() {
-	console.log(personalId.value)
+function onConfirm(id: string) {
 	dialogConfirm(
 		$q,
 		async () => {
 			showLoader()
 			await http
-				.get(config.API.leaveUserSendId(personalId.value))
+				.put(config.API.leaveUserSendId(personalId.value), { reason: "" })
 				.then(() => {
 					// router.push("/leave")
 					success($q, "ยื่นใบลาสำเร็จ")
@@ -259,7 +259,7 @@ onMounted(() => {
 				<q-btn to="/leave" icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" />
 				<div>
 					แก้ไขใบลา
-					{{ formData.leaveTypeName }} {{ personalId }}
+					{{ formData.leaveTypeName }}
 				</div>
 			</div>
 			<q-form ref="myform" class="col-12">