From 8bdb84cd957b303708a079bdbe5e56343d2e8168 Mon Sep 17 00:00:00 2001
From: Kittapath <kittapath@frappet.com>
Date: Wed, 10 Jan 2024 09:32:25 +0700
Subject: [PATCH 1/4] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=99=E0=B8=97=E0=B8=B6=E0=B8=81=E0=B9=81=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B9=80=E0=B8=A1=E0=B8=B4?=
 =?UTF-8?q?=E0=B8=99=E0=B8=8A=E0=B8=B7=E0=B9=88=E0=B8=AD=E0=B8=9C=E0=B8=B4?=
 =?UTF-8?q?=E0=B8=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/EvaluateStepMain.vue           | 1138 ++++++++---------
 1 file changed, 502 insertions(+), 636 deletions(-)

diff --git a/src/modules/06_evaluate/components/EvaluateStepMain.vue b/src/modules/06_evaluate/components/EvaluateStepMain.vue
index 49bee53..ca64004 100644
--- a/src/modules/06_evaluate/components/EvaluateStepMain.vue
+++ b/src/modules/06_evaluate/components/EvaluateStepMain.vue
@@ -1,133 +1,120 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, watch } from "vue";
-import { useRouter, useRoute } from "vue-router";
-import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
+import { ref, reactive, onMounted, watch } from "vue"
+import { useRouter, useRoute } from "vue-router"
+import { useQuasar } from "quasar"
+import http from "@/plugins/http"
+import config from "@/app.config"
 
 /** import Type*/
-import type {
-  PersonInformation,
-  FormSpec,
-  FormCommand,
-  FormCommandRef,
-} from "@/modules/06_evaluate/interface/evalute";
+import type { PersonInformation, FormSpec, FormCommand, FormCommandRef } from "@/modules/06_evaluate/interface/evalute"
 
 /** import Components*/
-import Stepper from "@/modules/06_evaluate/components/Stepper.vue";
-import Step1 from "@/modules/06_evaluate/components/step/step1.vue"; // 1.ตรวจสอบคุณสมบัติ
-import Step2 from "@/modules/06_evaluate/components/step/step2.vue"; // 2.จัดเตรียมเอกสารเล่ม 1
-import Step3 from "@/modules/06_evaluate/components/step/step3.vue"; // 3.ตรวจสอบเอกสารเล่ม 1
-import Step4 from "@/modules/06_evaluate/components/step/step4.vue"; // 4.รอตรวจสอบคุณสมบัติ
-import Step5 from "@/modules/06_evaluate/components/step/step5.vue"; // 5.ประกาศบนเว็บไซต์
-import Step6 from "@/modules/06_evaluate/components/step/step6.vue"; // 6.จัดเตรียมเอกสารเล่ม 2
-import Step7 from "@/modules/06_evaluate/components/step/step7.vue"; // 7.รอพิจารณาผลการประเมิน 2
-import Step8 from "@/modules/06_evaluate/components/step/step8.vue"; // 8.ตรวจสอบความถูกต้องของเอกสารเล่ม 2
-import Step9 from "@/modules/06_evaluate/components/step/step9.vue"; // 9.เสร็จสิ้น
-import ViewStep1 from "@/modules/06_evaluate/components/viewstep/viewStep1.vue"; //  ข้อมูลส่วนตัว
-import ViewStep3 from "@/modules/06_evaluate/components/viewstep/viewStep3.vue"; //
-import ViewStep7 from "@/modules/06_evaluate/components/viewstep/viewStep7.vue"; //
-import PopupHistory from "@/modules/06_evaluate/components/viewstep/popupHistory.vue"; // ประวัติการประเมิน
+import Stepper from "@/modules/06_evaluate/components/Stepper.vue"
+import Step1 from "@/modules/06_evaluate/components/step/step1.vue" // 1.ตรวจสอบคุณสมบัติ
+import Step2 from "@/modules/06_evaluate/components/step/step2.vue" // 2.จัดเตรียมเอกสารเล่ม 1
+import Step3 from "@/modules/06_evaluate/components/step/step3.vue" // 3.ตรวจสอบเอกสารเล่ม 1
+import Step4 from "@/modules/06_evaluate/components/step/step4.vue" // 4.รอตรวจสอบคุณสมบัติ
+import Step5 from "@/modules/06_evaluate/components/step/step5.vue" // 5.ประกาศบนเว็บไซต์
+import Step6 from "@/modules/06_evaluate/components/step/step6.vue" // 6.จัดเตรียมเอกสารเล่ม 2
+import Step7 from "@/modules/06_evaluate/components/step/step7.vue" // 7.รอพิจารณาผลการประเมิน 2
+import Step8 from "@/modules/06_evaluate/components/step/step8.vue" // 8.ตรวจสอบความถูกต้องของเอกสารเล่ม 2
+import Step9 from "@/modules/06_evaluate/components/step/step9.vue" // 9.เสร็จสิ้น
+import ViewStep1 from "@/modules/06_evaluate/components/viewstep/viewStep1.vue" //  ข้อมูลส่วนตัว
+import ViewStep3 from "@/modules/06_evaluate/components/viewstep/viewStep3.vue" //
+import ViewStep7 from "@/modules/06_evaluate/components/viewstep/viewStep7.vue" //
+import PopupHistory from "@/modules/06_evaluate/components/viewstep/popupHistory.vue" // ประวัติการประเมิน
 
 /** import Store*/
-import { useEvaluateStore } from "@/modules/06_evaluate/store";
-import { useCounterMixin } from "@/stores/mixin";
+import { useEvaluateStore } from "@/modules/06_evaluate/store"
+import { useCounterMixin } from "@/stores/mixin"
 
 /** use*/
-const router = useRouter();
-const route = useRoute();
-const store = useEvaluateStore();
-const mixin = useCounterMixin();
-const $q = useQuasar();
+const router = useRouter()
+const route = useRoute()
+const store = useEvaluateStore()
+const mixin = useCounterMixin()
+const $q = useQuasar()
 
-const { showLoader, hideLoader, messageError, dialogConfirm } = mixin;
+const { showLoader, hideLoader, messageError, dialogConfirm } = mixin
 
-const externalLink =
-  "https://accreditation.ocsc.go.th/accreditation/search/curriculum";
+const externalLink = "https://accreditation.ocsc.go.th/accreditation/search/curriculum"
 
-const showLoadStatus = ref<boolean>(false);
+const showLoadStatus = ref<boolean>(false)
 
-const modalHistory = ref<boolean>(false);
+const modalHistory = ref<boolean>(false)
 function onClickPopupHistory() {
-  modalHistory.value = !modalHistory.value;
+	modalHistory.value = !modalHistory.value
 }
 
 /** function NextToStep*/
 async function onCilckNextStep() {
-  const functionCreateDoc: (() => Promise<void>) | null =
-    store.step === 1
-      ? await saveStep1
-      : store.step === 3
-      ? await saveStep3
-      : store.step === 7
-      ? await saveStep7
-      : null;
-  store.step === 2 || store.step === 6
-    ? validateForm()
-    : store.step == 3 || store.step == 7
-    ? dialogConfirm(
-        $q,
-        () => {
-          functionCreateDoc?.();
-        },
-        "ยืนยันการยื่นเอกสาร",
-        "ต้องการยืนยันการยื่นเอกสารใช่หรือไม่? หากยืนยันแล้วคุณจะไม่สามารถกลับมาแก้ไขเอกสารได้อีก"
-      )
-    : store.step < 9 &&
-      dialogConfirm(
-        $q,
-        async () => {
-          showLoader();
-          await functionCreateDoc?.();
-        },
-        "ยืนยันการดำเนินการ",
-        "ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
-      );
+	const functionCreateDoc: (() => Promise<void>) | null = store.step === 1 ? await saveStep1 : store.step === 3 ? await saveStep3 : store.step === 7 ? await saveStep7 : null
+	store.step === 2 || store.step === 6
+		? validateForm()
+		: store.step == 3 || store.step == 7
+		? dialogConfirm(
+				$q,
+				() => {
+					functionCreateDoc?.()
+				},
+				"ยืนยันการยื่นเอกสาร",
+				"ต้องการยืนยันการยื่นเอกสารใช่หรือไม่? หากยืนยันแล้วคุณจะไม่สามารถกลับมาแก้ไขเอกสารได้อีก"
+		  )
+		: store.step < 9 &&
+		  dialogConfirm(
+				$q,
+				async () => {
+					showLoader()
+					await functionCreateDoc?.()
+				},
+				"ยืนยันการดำเนินการ",
+				"ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
+		  )
 }
 
 /** function validateForm Step 2,4*/
 async function validateForm() {
-  store.checkFileupload = !store.checkFileupload;
-  const emptyValues = downloadFileRef.value.filter((e: string) => e === "");
-  const hasError = [];
-  for (const key in formCommandRef) {
-    if (Object.prototype.hasOwnProperty.call(formCommandRef, key)) {
-      const property = formCommandRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    if (emptyValues.length > 0 && store.statusUpload === true) {
-      console.log("There are empty values in the array.");
-    } else if (store.step === 2) {
-      if (store.statusUpload === false) {
-        saveStep2();
-      } else {
-        nextTostep3();
-      }
-    } else {
-      if (store.statusUpload === false) {
-        saveStep6();
-      } else {
-        nextTostep7();
-      }
-    }
-  }
+	store.checkFileupload = !store.checkFileupload
+	const emptyValues = downloadFileRef.value.filter((e: string) => e === "")
+	const hasError = []
+	for (const key in formCommandRef) {
+		if (Object.prototype.hasOwnProperty.call(formCommandRef, key)) {
+			const property = formCommandRef[key]
+			if (property.value && typeof property.value.validate === "function") {
+				const isValid = property.value.validate()
+				hasError.push(isValid)
+			}
+		}
+	}
+	if (hasError.every(result => result === true)) {
+		if (emptyValues.length > 0 && store.statusUpload === true) {
+			console.log("There are empty values in the array.")
+		} else if (store.step === 2) {
+			if (store.statusUpload === false) {
+				saveStep2()
+			} else {
+				nextTostep3()
+			}
+		} else {
+			if (store.statusUpload === false) {
+				saveStep6()
+			} else {
+				nextTostep7()
+			}
+		}
+	}
 }
 
-const pdfSrc = ref<any>();
-const urlDownloadFile = ref<string>("");
+const pdfSrc = ref<any>()
+const urlDownloadFile = ref<string>("")
 /**
  * function update ลิงก์ PDF
  * @param url ลิงก์ PDF
  * @param urlDownload  ลิงก์ดาวน์โหลด
  */
 async function updateFilePDF(url: any, urlDownload: string) {
-  pdfSrc.value = url;
-  urlDownloadFile.value = urlDownload;
+	pdfSrc.value = url
+	urlDownloadFile.value = urlDownload
 }
 
 /**
@@ -135,78 +122,78 @@ async function updateFilePDF(url: any, urlDownload: string) {
  * @param id idประเมิน
  */
 async function fetchCheckStep(id: string) {
-  showLoadStatus.value = false;
-  if (id) {
-    await http
-      .get(config.API.evaluationCheckStep(id))
-      .then((res) => {
-        const data = res.data.result;
+	showLoadStatus.value = false
+	if (id) {
+		await http
+			.get(config.API.evaluationCheckStep(id))
+			.then(res => {
+				const data = res.data.result
 
-        let step =
-          data.step === "CHECK_SPEC"
-            ? 1
-            : data.step === "PREPARE_DOC_V1"
-            ? 2
-            : data.step === "CHECK_DOC_V1"
-            ? 3
-            : data.step === "WAIT_CHECK_DOC_V1"
-            ? 4
-            : data.step === "ANNOUNCE_WEB"
-            ? 5
-            : data.step === "PREPARE_DOC_V2"
-            ? 6
-            : data.step === "WAIT_CHECK_DOC_V2"
-            ? 7
-            : data.step === "CHECK_DOC_V2"
-            ? 8
-            : data.step === "DONE"
-            ? 9
-            : 1;
+				let step =
+					data.step === "CHECK_SPEC"
+						? 1
+						: data.step === "PREPARE_DOC_V1"
+						? 2
+						: data.step === "CHECK_DOC_V1"
+						? 3
+						: data.step === "WAIT_CHECK_DOC_V1"
+						? 4
+						: data.step === "ANNOUNCE_WEB"
+						? 5
+						: data.step === "PREPARE_DOC_V2"
+						? 6
+						: data.step === "WAIT_CHECK_DOC_V2"
+						? 7
+						: data.step === "CHECK_DOC_V2"
+						? 8
+						: data.step === "DONE"
+						? 9
+						: 1
 
-        store.currentStep = step;
-        store.step = step;
-      })
-      .catch((err) => {
-        messageError($q, err);
-      })
-      .finally(() => {
-        showLoadStatus.value = true;
-      });
-  } else (store.step = 1), (store.currentStep = 1);
+				store.currentStep = step
+				store.step = step
+			})
+			.catch(err => {
+				messageError($q, err)
+			})
+			.finally(() => {
+				showLoadStatus.value = true
+			})
+	} else (store.step = 1), (store.currentStep = 1)
 }
 
 /** STEP 1*/
 const formSpec = reactive<FormSpec>({
-  isEducationalQft: false, // คุณวุฒิการศึกษา
-  isGovermantServiceHtr: false, // ประวัติการรับราชการ
-  isOperatingExp: false, // ประสบการณ์ในการปฏิบัติงาน
-  isMinPeriodOfTenure: false, // ระยะเวลาขั้นต่ำในการดำรงตำแหน่งในสายงานที่ขอเข้ารับการคัดเลือก
-  isHaveSpecificQft: false, // มีคุณสมบัติตรงตามคุณสมบัติเฉพาะสำหรับตำแหน่งที่กำหนด ในมาตราฐานกำหนดตำแหน่ง
-  isHaveProLicense: false, // มีใบอนุญาตประกอบวิชาชีพของสายงานต่างๆ
-  isHaveMinPeriodOrHoldPos: false, // มีระยะเวลาขั้นต่ำในการดำรงตำแหน่งหรือเคยดำรงตำแหน่งในสายงานที่จะคัดเลือกตามคุณวุฒิของบุคคลและระดับตำแหน่งที่จะคัดเลือก
-});
-const formDetail = ref<any>();
-const formDataStep1 = ref<PersonInformation>();
+	isEducationalQft: false, // คุณวุฒิการศึกษา
+	isGovermantServiceHtr: false, // ประวัติการรับราชการ
+	isOperatingExp: false, // ประสบการณ์ในการปฏิบัติงาน
+	isMinPeriodOfTenure: false, // ระยะเวลาขั้นต่ำในการดำรงตำแหน่งในสายงานที่ขอเข้ารับการคัดเลือก
+	isHaveSpecificQft: false, // มีคุณสมบัติตรงตามคุณสมบัติเฉพาะสำหรับตำแหน่งที่กำหนด ในมาตราฐานกำหนดตำแหน่ง
+	isHaveProLicense: false, // มีใบอนุญาตประกอบวิชาชีพของสายงานต่างๆ
+	isHaveMinPeriodOrHoldPos: false, // มีระยะเวลาขั้นต่ำในการดำรงตำแหน่งหรือเคยดำรงตำแหน่งในสายงานที่จะคัดเลือกตามคุณวุฒิของบุคคลและระดับตำแหน่งที่จะคัดเลือก
+})
+const formDetail = ref<any>()
+const formDataStep1 = ref<PersonInformation>()
 /**
  * function เรียกข่้อมูลตรวจสอบคุณสมบัติ
  * @param id id ประเมิน
  */
 async function fetchDataStep1(id: string) {
-  showLoadStatus.value = false;
-  showLoader();
-  await http
-    .get(config.API.evaluationCheckspecByid(id))
-    .then((res) => {
-      const data = res.data.result;
-      formDataStep1.value = data;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-      showLoadStatus.value = true;
-    });
+	showLoadStatus.value = false
+	showLoader()
+	await http
+		.get(config.API.evaluationCheckspecByid(id))
+		.then(res => {
+			const data = res.data.result
+			formDataStep1.value = data
+		})
+		.catch(err => {
+			messageError($q, err)
+		})
+		.finally(() => {
+			hideLoader()
+			showLoadStatus.value = true
+		})
 }
 
 /**
@@ -214,547 +201,426 @@ async function fetchDataStep1(id: string) {
  * @param data  ข้อมูลคุณสมบัติ
  */
 async function updateCheckSpec(data: FormSpec) {
-  formSpec.isEducationalQft = data.isEducationalQft;
-  formSpec.isGovermantServiceHtr = data.isGovermantServiceHtr;
-  formSpec.isOperatingExp = data.isOperatingExp;
-  formSpec.isMinPeriodOfTenure = data.isMinPeriodOfTenure;
-  formSpec.isHaveSpecificQft = data.isHaveSpecificQft;
-  formSpec.isHaveProLicense = data.isHaveProLicense;
-  formSpec.isHaveMinPeriodOrHoldPos = data.isHaveMinPeriodOrHoldPos;
+	formSpec.isEducationalQft = data.isEducationalQft
+	formSpec.isGovermantServiceHtr = data.isGovermantServiceHtr
+	formSpec.isOperatingExp = data.isOperatingExp
+	formSpec.isMinPeriodOfTenure = data.isMinPeriodOfTenure
+	formSpec.isHaveSpecificQft = data.isHaveSpecificQft
+	formSpec.isHaveProLicense = data.isHaveProLicense
+	formSpec.isHaveMinPeriodOrHoldPos = data.isHaveMinPeriodOrHoldPos
 }
 /**
  * funciton อัปเดทข้อมูลส่วนตัว
  * @param data ข้อมูลส่วนตัว
  */
 function updateFormDetail(data: any) {
-  formDetail.value = data;
+	formDetail.value = data
 }
 /** function บันทักตรวจสอบคุณสมบัติ*/
 async function saveStep1() {
-  const salaries = formDetail.value.trainings.map((e: any) => ({
-    amount: e.amount,
-    date: e.date,
-    mouthSalaryAmount: e.mouthSalaryAmount ? e.mouthSalaryAmount : 0,
-    posNo: e.posNo,
-    position: e.position,
-    positionSalaryAmount: e.positionSalaryAmount ? e.positionSalaryAmount : 0,
-    refCommandDate: e.refCommandDate,
-    refCommandNo: e.refCommandNo ? e.refCommandNo : "",
-    salaryClass: e.salaryClass ? e.salaryClass : "",
-    salaryRef: e.salaryRef ? e.salaryRef : "",
-    salaryStatus: e.salaryStatus ? e.salariesStatus : "",
-  }));
+	const salaries = formDetail.value.trainings.map((e: any) => ({
+		amount: e.amount,
+		date: e.date,
+		mouthSalaryAmount: e.mouthSalaryAmount ? e.mouthSalaryAmount : 0,
+		posNo: e.posNo,
+		position: e.position,
+		positionSalaryAmount: e.positionSalaryAmount ? e.positionSalaryAmount : 0,
+		refCommandDate: e.refCommandDate,
+		refCommandNo: e.refCommandNo ? e.refCommandNo : "",
+		salaryClass: e.salaryClass ? e.salaryClass : "",
+		salaryRef: e.salaryRef ? e.salaryRef : "",
+		salaryStatus: e.salaryStatus ? e.salariesStatus : "",
+	}))
 
-  const educations = formDetail.value.educations.map((e: any) => ({
-    country: e.country,
-    degree: e.degree,
-    duration: e.duration,
-    durationYear: e.durationYear.toString(),
-    educationLevel: e.educationLevel,
-    endDate: e.endDate,
-    field: e.field,
-    finishDate: e.finishDate,
-    fundName: e.fundName,
-    gpa: e.gpa,
-    institute: e.institute,
-    isDate: e.isDate,
-    isEducation: e.isEducation,
-    other: e.other,
-    startDate: e.startDate,
-  }));
-  const evaluateType = route.params.type.toString();
+	const educations = formDetail.value.educations.map((e: any) => ({
+		country: e.country,
+		degree: e.degree,
+		duration: e.duration,
+		durationYear: e.durationYear.toString(),
+		educationLevel: e.educationLevel,
+		endDate: e.endDate,
+		field: e.field,
+		finishDate: e.finishDate,
+		fundName: e.fundName,
+		gpa: e.gpa,
+		institute: e.institute,
+		isDate: e.isDate,
+		isEducation: e.isEducation,
+		other: e.other,
+		startDate: e.startDate,
+	}))
+	const evaluateType = route.params.type.toString()
 
-  const form = {
-    userId: formDetail.value.id,
-    citizenId: formDetail.value.citizenId,
-    prefix: formDetail.value.prefix,
-    fullName: `${formDetail.value.firstName}   ${formDetail.value.lastName}.`,
-    position: formDetail.value.position,
-    oc: formDetail.value.oc,
-    salary: formDetail.value.salary.toString(),
-    positionLevel: formDetail.value.positionLevel,
-    posNo: formDetail.value.posNo,
-    birthDate: formDetail.value.birthDate,
-    govAge: formDetail.value.govAge,
-    type: evaluateType.toUpperCase(),
-    step: "PREPARE_DOC_V1",
-    isEducationalQft: formSpec.isEducationalQft,
-    isGovermantServiceHtr: formSpec.isGovermantServiceHtr,
-    isOperatingExp: formSpec.isOperatingExp,
-    isMinPeriodOfTenure: formSpec.isMinPeriodOfTenure,
-    isHaveSpecificQft: formSpec.isHaveSpecificQft,
-    isHaveProLicense: formSpec.isHaveProLicense,
-    isHaveMinPeriodOrHoldPos: formSpec.isHaveMinPeriodOrHoldPos,
-    reason: "",
-    educations: [...educations],
-    certificates: [...formDetail.value.certificates],
-    salaries: [...salaries],
-    trainings: [...formDetail.value.trainings],
-    assessments: [...formDetail.value.assessments],
-  };
+	const form = {
+		userId: formDetail.value.id,
+		citizenId: formDetail.value.citizenId,
+		prefix: formDetail.value.prefix,
+		fullName: `${formDetail.value.firstName} ${formDetail.value.lastName}`,
+		position: formDetail.value.position,
+		oc: formDetail.value.oc,
+		salary: formDetail.value.salary.toString(),
+		positionLevel: formDetail.value.positionLevel,
+		posNo: formDetail.value.posNo,
+		birthDate: formDetail.value.birthDate,
+		govAge: formDetail.value.govAge,
+		type: evaluateType.toUpperCase(),
+		step: "PREPARE_DOC_V1",
+		isEducationalQft: formSpec.isEducationalQft,
+		isGovermantServiceHtr: formSpec.isGovermantServiceHtr,
+		isOperatingExp: formSpec.isOperatingExp,
+		isMinPeriodOfTenure: formSpec.isMinPeriodOfTenure,
+		isHaveSpecificQft: formSpec.isHaveSpecificQft,
+		isHaveProLicense: formSpec.isHaveProLicense,
+		isHaveMinPeriodOrHoldPos: formSpec.isHaveMinPeriodOrHoldPos,
+		reason: "",
+		educations: [...educations],
+		certificates: [...formDetail.value.certificates],
+		salaries: [...salaries],
+		trainings: [...formDetail.value.trainings],
+		assessments: [...formDetail.value.assessments],
+	}
 
-  await http
-    .post(config.API.evaluationCheckspec(), form)
-    .then((res) => {
-      const id = res.data.result.id;
-      router.push(`/evaluate/detail/${route.params.type}/${id}`);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+	await http
+		.post(config.API.evaluationCheckspec(), form)
+		.then(res => {
+			const id = res.data.result.id
+			router.push(`/evaluate/detail/${route.params.type}/${id}`)
+		})
+		.catch(err => {
+			messageError($q, err)
+		})
+		.finally(() => {
+			hideLoader()
+		})
 }
 
 /** STEP 2*/
-const statusUpload = ref<boolean>(false);
+const statusUpload = ref<boolean>(false)
 const formCommand = reactive<FormCommand>({
-  commanderFullname: "",
-  commanderPosition: "",
-  commanderAboveFullname: "",
-  commanderAbovePosition: "",
-  author: "",
-  subject: "",
-  assignedPosition: "",
-});
-const commanderFullnameRef = ref<object | null>(null);
-const commanderPositionRef = ref<object | null>(null);
-const commanderAboveFullnameRef = ref<object | null>(null);
-const commanderAbovePositionRef = ref<object | null>(null);
-const fileEvaluation1Ref = ref<object | null>(null);
-const fileEvaluation2Ref = ref<object | null>(null);
-const fileEvaluation3Ref = ref<object | null>(null);
-const fileEvaluation4Ref = ref<object | null>(null);
-const fileEvaluation5Ref = ref<object | null>(null);
-const fileEvaluation6Ref = ref<object | null>(null);
-const performanceRef = ref<object | null>(null);
-const performanceOwnerRef = ref<object | null>(null);
-const assignedPositionRef = ref<object | null>(null);
+	commanderFullname: "",
+	commanderPosition: "",
+	commanderAboveFullname: "",
+	commanderAbovePosition: "",
+	author: "",
+	subject: "",
+	assignedPosition: "",
+})
+const commanderFullnameRef = ref<object | null>(null)
+const commanderPositionRef = ref<object | null>(null)
+const commanderAboveFullnameRef = ref<object | null>(null)
+const commanderAbovePositionRef = ref<object | null>(null)
+const fileEvaluation1Ref = ref<object | null>(null)
+const fileEvaluation2Ref = ref<object | null>(null)
+const fileEvaluation3Ref = ref<object | null>(null)
+const fileEvaluation4Ref = ref<object | null>(null)
+const fileEvaluation5Ref = ref<object | null>(null)
+const fileEvaluation6Ref = ref<object | null>(null)
+const performanceRef = ref<object | null>(null)
+const performanceOwnerRef = ref<object | null>(null)
+const assignedPositionRef = ref<object | null>(null)
 const formCommandRef: FormCommandRef = {
-  commanderFullname: commanderFullnameRef,
-  commanderPosition: commanderPositionRef,
-  commanderAboveFullname: commanderAboveFullnameRef,
-  commanderAbovePosition: commanderAbovePositionRef,
-  fileEvaluation1: fileEvaluation1Ref,
-  fileEvaluation2: fileEvaluation2Ref,
-  fileEvaluation3: fileEvaluation3Ref,
-  fileEvaluation4: fileEvaluation4Ref,
-  fileEvaluation5: fileEvaluation5Ref,
-  fileEvaluation6: fileEvaluation6Ref,
-  performance: performanceRef,
-  performanceOwner: performanceOwnerRef,
-  assignedPosition: assignedPositionRef,
-};
-const downloadFileRef = ref<any>();
+	commanderFullname: commanderFullnameRef,
+	commanderPosition: commanderPositionRef,
+	commanderAboveFullname: commanderAboveFullnameRef,
+	commanderAbovePosition: commanderAbovePositionRef,
+	fileEvaluation1: fileEvaluation1Ref,
+	fileEvaluation2: fileEvaluation2Ref,
+	fileEvaluation3: fileEvaluation3Ref,
+	fileEvaluation4: fileEvaluation4Ref,
+	fileEvaluation5: fileEvaluation5Ref,
+	fileEvaluation6: fileEvaluation6Ref,
+	performance: performanceRef,
+	performanceOwner: performanceOwnerRef,
+	assignedPosition: assignedPositionRef,
+}
+const downloadFileRef = ref<any>()
 /**
  * function  อัปเดท ผลงาน,ผู้เซ็นเอกสาร, Ref
  * @param val ผู้เซ็นเอกสาร
  * @param ref validate
  */
 function updateformCommand(val: any, ref: any) {
-  formCommand.commanderFullname = val.commanderFullname;
-  formCommand.commanderPosition = val.commanderPosition;
-  formCommand.commanderAboveFullname = val.commanderAboveFullname;
-  formCommand.commanderAbovePosition = val.commanderAbovePosition;
-  formCommand.author = val.author;
-  formCommand.subject = val.subject;
-  formCommand.assignedPosition = val.assignedPosition;
-  commanderFullnameRef.value = ref.commanderFullnameRef;
-  commanderPositionRef.value = ref.commanderPositionRef;
-  commanderAboveFullnameRef.value = ref.commanderAboveFullnameRef;
-  commanderAbovePositionRef.value = ref.commanderAbovePositionRef;
-  fileEvaluation1Ref.value = ref.fileEvaluation1Ref;
-  fileEvaluation2Ref.value = ref.fileEvaluation2Ref;
-  fileEvaluation3Ref.value = ref.fileEvaluation3Ref;
-  fileEvaluation4Ref.value = ref.fileEvaluation4Ref;
-  fileEvaluation5Ref.value = ref.fileEvaluation5Ref;
-  fileEvaluation6Ref.value = ref.fileEvaluation6Ref;
-  downloadFileRef.value = ref.downloadFile;
-  performanceRef.value = ref.performance;
-  performanceOwnerRef.value = ref.performanceOwner;
-  assignedPositionRef.value = ref.assignedPosition;
-  statusUpload.value = ref.statusUpload;
+	formCommand.commanderFullname = val.commanderFullname
+	formCommand.commanderPosition = val.commanderPosition
+	formCommand.commanderAboveFullname = val.commanderAboveFullname
+	formCommand.commanderAbovePosition = val.commanderAbovePosition
+	formCommand.author = val.author
+	formCommand.subject = val.subject
+	formCommand.assignedPosition = val.assignedPosition
+	commanderFullnameRef.value = ref.commanderFullnameRef
+	commanderPositionRef.value = ref.commanderPositionRef
+	commanderAboveFullnameRef.value = ref.commanderAboveFullnameRef
+	commanderAbovePositionRef.value = ref.commanderAbovePositionRef
+	fileEvaluation1Ref.value = ref.fileEvaluation1Ref
+	fileEvaluation2Ref.value = ref.fileEvaluation2Ref
+	fileEvaluation3Ref.value = ref.fileEvaluation3Ref
+	fileEvaluation4Ref.value = ref.fileEvaluation4Ref
+	fileEvaluation5Ref.value = ref.fileEvaluation5Ref
+	fileEvaluation6Ref.value = ref.fileEvaluation6Ref
+	downloadFileRef.value = ref.downloadFile
+	performanceRef.value = ref.performance
+	performanceOwnerRef.value = ref.performanceOwner
+	assignedPositionRef.value = ref.assignedPosition
+	statusUpload.value = ref.statusUpload
 }
 /** function บันทึกข้อมูล ผลงานม,ผู้เซ็นเอกสาร*/
 async function saveStep2() {
-  const body = {
-    commanderFullname: formCommand.commanderFullname,
-    commanderPosition: formCommand.commanderPosition,
-    commanderAboveFullname: formCommand.commanderAboveFullname,
-    commanderAbovePosition: formCommand.commanderAbovePosition,
-    author: formCommand.author,
-    subject: formCommand.subject,
-  };
+	const body = {
+		commanderFullname: formCommand.commanderFullname,
+		commanderPosition: formCommand.commanderPosition,
+		commanderAboveFullname: formCommand.commanderAboveFullname,
+		commanderAbovePosition: formCommand.commanderAbovePosition,
+		author: formCommand.author,
+		subject: formCommand.subject,
+	}
 
-  dialogConfirm(
-    $q,
-    async () => {
-      statusUpload.value = true;
-      store.statusUpload = statusUpload.value;
-      showLoader();
-      await http
-        .put(
-          config.API.evaluationUpdateAuthor(
-            route.params.id.toString(),
-            "director"
-          ),
-          body
-        )
-        .then(() => {
-          route.params.id && fetchCheckStep(route.params.id.toString());
-        })
-        .catch((err) => {
-          messageError($q, err);
-        })
-        .finally(() => {
-          hideLoader();
-        });
-    },
-    "ยืนยันการบันทึกข้อมูล",
-    "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?"
-  );
+	dialogConfirm(
+		$q,
+		async () => {
+			statusUpload.value = true
+			store.statusUpload = statusUpload.value
+			showLoader()
+			await http
+				.put(config.API.evaluationUpdateAuthor(route.params.id.toString(), "director"), body)
+				.then(() => {
+					route.params.id && fetchCheckStep(route.params.id.toString())
+				})
+				.catch(err => {
+					messageError($q, err)
+				})
+				.finally(() => {
+					hideLoader()
+				})
+		},
+		"ยืนยันการบันทึกข้อมูล",
+		"ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?"
+	)
 }
 /** function ดำเนินการต่อไป 3.ตรวจสอบเอกสารเล่ม 1*/
 async function nextTostep3() {
-  dialogConfirm(
-    $q,
-    async () => {
-      showLoader();
-      await http
-        .put(
-          config.API.evaluationPreparedoc(route.params.id.toString(), "approve")
-        )
-        .then(() => {
-          route.params.id && fetchCheckStep(route.params.id.toString());
-        })
-        .catch((err) => {
-          messageError($q, err);
-        })
-        .finally(() => {
-          hideLoader();
-        });
-    },
-    "ยืนยันการดำเนินการ",
-    "ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
-  );
+	dialogConfirm(
+		$q,
+		async () => {
+			showLoader()
+			await http
+				.put(config.API.evaluationPreparedoc(route.params.id.toString(), "approve"))
+				.then(() => {
+					route.params.id && fetchCheckStep(route.params.id.toString())
+				})
+				.catch(err => {
+					messageError($q, err)
+				})
+				.finally(() => {
+					hideLoader()
+				})
+		},
+		"ยืนยันการดำเนินการ",
+		"ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
+	)
 }
 
 /** STEP3*/
 /** function ยืนยันการยื่นเอกสารไปยัง 4.รอตรวจสอบคุณสมบัติ*/
 async function saveStep3() {
-  showLoader();
-  await http
-    .put(config.API.evaluationCheckdoc(route.params.id.toString(), "approve"))
-    .then(() => {
-      route.params.id && fetchCheckStep(route.params.id.toString());
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+	showLoader()
+	await http
+		.put(config.API.evaluationCheckdoc(route.params.id.toString(), "approve"))
+		.then(() => {
+			route.params.id && fetchCheckStep(route.params.id.toString())
+		})
+		.catch(err => {
+			messageError($q, err)
+		})
+		.finally(() => {
+			hideLoader()
+		})
 }
 
 /** STEP 6*/
 /** function บันทึกข้อมูล ผลงานม,ผู้เซ็นเอกสาร*/
 async function saveStep6() {
-  const body = {
-    commanderAboveFullnameDoc2: formCommand.commanderAboveFullname,
-    commanderAbovePositionDoc2: formCommand.commanderAbovePosition,
-    commanderFullnameDoc2: formCommand.commanderFullname,
-    commanderPositionDoc2: formCommand.commanderPosition,
-    authorDoc2: formCommand.author,
-    subjectDoc2: formCommand.subject,
-    assignedPosition: formCommand.assignedPosition,
-  };
-  dialogConfirm(
-    $q,
-    async () => {
-      statusUpload.value = true;
-      store.statusUpload = statusUpload.value;
-      showLoader();
-      await http
-        .put(
-          config.API.evaluationUpdateAuthor(
-            route.params.id.toString(),
-            "director2"
-          ),
-          body
-        )
-        .then(() => {
-          route.params.id && fetchCheckStep(route.params.id.toString());
-        })
-        .catch((err) => {
-          messageError($q, err);
-        })
-        .finally(() => {
-          hideLoader();
-        });
-    },
-    "ยืนยันการบันทึกข้อมูล",
-    "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?"
-  );
+	const body = {
+		commanderAboveFullnameDoc2: formCommand.commanderAboveFullname,
+		commanderAbovePositionDoc2: formCommand.commanderAbovePosition,
+		commanderFullnameDoc2: formCommand.commanderFullname,
+		commanderPositionDoc2: formCommand.commanderPosition,
+		authorDoc2: formCommand.author,
+		subjectDoc2: formCommand.subject,
+		assignedPosition: formCommand.assignedPosition,
+	}
+	dialogConfirm(
+		$q,
+		async () => {
+			statusUpload.value = true
+			store.statusUpload = statusUpload.value
+			showLoader()
+			await http
+				.put(config.API.evaluationUpdateAuthor(route.params.id.toString(), "director2"), body)
+				.then(() => {
+					route.params.id && fetchCheckStep(route.params.id.toString())
+				})
+				.catch(err => {
+					messageError($q, err)
+				})
+				.finally(() => {
+					hideLoader()
+				})
+		},
+		"ยืนยันการบันทึกข้อมูล",
+		"ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?"
+	)
 }
 /** function ดำเนินการต่อไป 7.รอพิจารณาผลการประเมิน 2*/
 async function nextTostep7() {
-  dialogConfirm(
-    $q,
-    async () => {
-      showLoader();
-      await http
-        .put(config.API.evaluationCheckdocV2(route.params.id.toString()))
-        .then(() => {
-          route.params.id && fetchCheckStep(route.params.id.toString());
-        })
-        .catch((err) => {
-          messageError($q, err);
-        })
-        .finally(() => {
-          hideLoader();
-        });
-    },
-    "ยืนยันการดำเนินการ",
-    "ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
-  );
+	dialogConfirm(
+		$q,
+		async () => {
+			showLoader()
+			await http
+				.put(config.API.evaluationCheckdocV2(route.params.id.toString()))
+				.then(() => {
+					route.params.id && fetchCheckStep(route.params.id.toString())
+				})
+				.catch(err => {
+					messageError($q, err)
+				})
+				.finally(() => {
+					hideLoader()
+				})
+		},
+		"ยืนยันการดำเนินการ",
+		"ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
+	)
 }
 
 /** STEP 7*/
 /** function ยืนยันการยื่นเอกสารไปยัง 8.ตรวจสอบความถูกต้องของเอกสารเล่ม 2
  */
 async function saveStep7() {
-  showLoader();
-  await http
-    .put(config.API.evaluationPreparedocV2(route.params.id.toString()))
-    .then(() => {
-      route.params.id && fetchCheckStep(route.params.id.toString());
-    })
-    .catch(() => {})
-    .finally(() => {
-      hideLoader();
-    });
+	showLoader()
+	await http
+		.put(config.API.evaluationPreparedocV2(route.params.id.toString()))
+		.then(() => {
+			route.params.id && fetchCheckStep(route.params.id.toString())
+		})
+		.catch(() => {})
+		.finally(() => {
+			hideLoader()
+		})
 }
 
 /** function callblck ทำงานเมื่อมีการเปลี่ยน Step*/
 watch(
-  () => store.step,
-  () => {
-    if (route.params.id) {
-      const id = route.params.id.toString();
-      store.step === 1 && fetchDataStep1(id);
-    }
-  }
-);
+	() => store.step,
+	() => {
+		if (route.params.id) {
+			const id = route.params.id.toString()
+			store.step === 1 && fetchDataStep1(id)
+		}
+	}
+)
 
 /** Hook lifecycle*/
 onMounted(async () => {
-  route.params.id && fetchCheckStep(route.params.id.toString());
-  route.name === "evaluate-add" &&
-    (showLoadStatus.value = true) &&
-    store.step === 1;
-});
+	route.params.id && fetchCheckStep(route.params.id.toString())
+	route.name === "evaluate-add" && (showLoadStatus.value = true) && store.step === 1
+})
 </script>
 
 <template>
-  <div class="col-12 row justify-center">
-    <div class="col-xs-12 col-sm-12 col-md-11">
-      <div class="toptitle text-white col-12 row items-center">
-        <q-btn
-          icon="mdi-arrow-left"
-          unelevated
-          round
-          dense
-          flat
-          color="primary"
-          class="q-mr-sm"
-          @click="router.go(-1)"
-        />
-        <div>ประเมินบุคคล</div>
-      </div>
-    </div>
+	<div class="col-12 row justify-center">
+		<div class="col-xs-12 col-sm-12 col-md-11">
+			<div class="toptitle text-white col-12 row items-center">
+				<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
+				<div>ประเมินบุคคล</div>
+			</div>
+		</div>
 
-    <div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md q-mt-xs">
-      <div class="col-12 row">
-        <q-card bordered class="col-12 row caedNone q-pa-md q-col-gutter-md">
-          <div class="col-xs-12 col-sm-3">
-            <div class="toptitle">
-              {{
-                route.params.type === "expert"
-                  ? "ประเมินชำนาญการ"
-                  : "ประเมินชำนาญการพิเศษ"
-              }}
-              <q-btn
-                flat
-                round
-                dense
-                color="primary"
-                icon="history"
-                @click="onClickPopupHistory"
-              >
-                <q-tooltip>ประวัติการประเมิน</q-tooltip>
-              </q-btn>
-            </div>
-            <Stepper />
-          </div>
+		<div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md q-mt-xs">
+			<div class="col-12 row">
+				<q-card bordered class="col-12 row caedNone q-pa-md q-col-gutter-md">
+					<div class="col-xs-12 col-sm-3">
+						<div class="toptitle">
+							{{ route.params.type === "expert" ? "ประเมินชำนาญการ" : "ประเมินชำนาญการพิเศษ" }}
+							<q-btn flat round dense color="primary" icon="history" @click="onClickPopupHistory">
+								<q-tooltip>ประวัติการประเมิน</q-tooltip>
+							</q-btn>
+						</div>
+						<Stepper />
+					</div>
 
-          <div class="col-xs-12 col-sm-9" v-if="showLoadStatus">
-            <div class="col-12 row">
-              <div class="col-9">
-                <div class="toptitle">
-                  {{ store.step }}.{{ store.title[store.step - 1] }}
-                </div>
-              </div>
-              <div class="col-3 text-right">
-                <q-btn
-                  v-if="store.step === 1"
-                  :href="externalLink"
-                  target="_blank"
-                  outline
-                  color="blue"
-                  no-caps
-                >
-                  ตรวจสอบคุณสมบัติกับ ก.พ.
-                </q-btn>
-              </div>
-            </div>
-            <div class="row q-col-gutter-md col-12">
-              <div
-                :class="
-                  store.step === 2 ||
-                  store.step === 4 ||
-                  store.step === 5 ||
-                  store.step === 6 ||
-                  store.step === 8 ||
-                  store.step === 9
-                    ? 'col-xs-12 col-sm-12 row'
-                    : 'col-xs-12 col-sm-5 row'
-                "
-              >
-                <q-card flat bordered class="col-12 q-pa-md">
-                  <q-card-section>
-                    <Step1
-                      v-if="store.step === 1"
-                      @update:spec="updateCheckSpec"
-                      :data="formDataStep1"
-                      :educations="formDetail?.educations"
-                    />
-                    <Step2
-                      v-if="store.step === 2"
-                      @update:form="updateformCommand"
-                    />
-                    <Step3
-                      v-if="store.step === 3"
-                      @update:file="updateFilePDF"
-                    />
-                    <Step4 v-if="store.step === 4" />
-                    <Step5 v-if="store.step === 5" />
-                    <Step6
-                      v-if="store.step === 6"
-                      @update:form="updateformCommand"
-                    />
-                    <Step7
-                      v-if="store.step === 7"
-                      @update:file="updateFilePDF"
-                    />
-                    <Step8 v-if="store.step === 8" />
-                    <Step9 v-if="store.step === 9" />
-                  </q-card-section>
-                </q-card>
-              </div>
-              <div
-                class="col-xs-12 col-sm-7 row"
-                v-if="store.step === 1 || store.step === 3 || store.step === 7"
-              >
-                <div class="col-12">
-                  <ViewStep1
-                    v-if="store.step === 1"
-                    @update:formDeital="updateFormDetail"
-                    :data="formDataStep1"
-                  />
-                  <ViewStep3
-                    v-if="store.step === 3 && pdfSrc"
-                    :pdfSrc="pdfSrc"
-                    :urlDownloadFile="urlDownloadFile"
-                  />
-                  <ViewStep7
-                    v-if="store.step === 7 && pdfSrc"
-                    :pdfSrc="pdfSrc"
-                    :urlDownloadFile="urlDownloadFile"
-                  />
-                </div>
-              </div>
-            </div>
-            <div class="q-mt-md q-gutter-md" align="right">
-              <q-btn
-                v-if="
-                  store.step >= store.currentStep &&
-                  store.statusUpload === false &&
-                  store.step !== 3 &&
-                  store.step !== 4 &&
-                  store.step !== 5 &&
-                  store.step !== 7 &&
-                  store.step !== 8 &&
-                  store.step !== 9
-                "
-                unelevated
-                :label="
-                  store.step === 2 || store.step === 6
-                    ? 'บันทึกข้อมูล'
-                    : 'ดำเนินการต่อ'
-                "
-                color="public"
-                @click="onCilckNextStep()"
-              />
+					<div class="col-xs-12 col-sm-9" v-if="showLoadStatus">
+						<div class="col-12 row">
+							<div class="col-9">
+								<div class="toptitle">{{ store.step }}.{{ store.title[store.step - 1] }}</div>
+							</div>
+							<div class="col-3 text-right">
+								<q-btn v-if="store.step === 1" :href="externalLink" target="_blank" outline color="blue" no-caps> ตรวจสอบคุณสมบัติกับ ก.พ. </q-btn>
+							</div>
+						</div>
+						<div class="row q-col-gutter-md col-12">
+							<div
+								:class="
+									store.step === 2 || store.step === 4 || store.step === 5 || store.step === 6 || store.step === 8 || store.step === 9
+										? 'col-xs-12 col-sm-12 row'
+										: 'col-xs-12 col-sm-5 row'
+								"
+							>
+								<q-card flat bordered class="col-12 q-pa-md">
+									<q-card-section>
+										<Step1 v-if="store.step === 1" @update:spec="updateCheckSpec" :data="formDataStep1" :educations="formDetail?.educations" />
+										<Step2 v-if="store.step === 2" @update:form="updateformCommand" />
+										<Step3 v-if="store.step === 3" @update:file="updateFilePDF" />
+										<Step4 v-if="store.step === 4" />
+										<Step5 v-if="store.step === 5" />
+										<Step6 v-if="store.step === 6" @update:form="updateformCommand" />
+										<Step7 v-if="store.step === 7" @update:file="updateFilePDF" />
+										<Step8 v-if="store.step === 8" />
+										<Step9 v-if="store.step === 9" />
+									</q-card-section>
+								</q-card>
+							</div>
+							<div class="col-xs-12 col-sm-7 row" v-if="store.step === 1 || store.step === 3 || store.step === 7">
+								<div class="col-12">
+									<ViewStep1 v-if="store.step === 1" @update:formDeital="updateFormDetail" :data="formDataStep1" />
+									<ViewStep3 v-if="store.step === 3 && pdfSrc" :pdfSrc="pdfSrc" :urlDownloadFile="urlDownloadFile" />
+									<ViewStep7 v-if="store.step === 7 && pdfSrc" :pdfSrc="pdfSrc" :urlDownloadFile="urlDownloadFile" />
+								</div>
+							</div>
+						</div>
+						<div class="q-mt-md q-gutter-md" align="right">
+							<q-btn
+								v-if="
+									store.step >= store.currentStep &&
+									store.statusUpload === false &&
+									store.step !== 3 &&
+									store.step !== 4 &&
+									store.step !== 5 &&
+									store.step !== 7 &&
+									store.step !== 8 &&
+									store.step !== 9
+								"
+								unelevated
+								:label="store.step === 2 || store.step === 6 ? 'บันทึกข้อมูล' : 'ดำเนินการต่อ'"
+								color="public"
+								@click="onCilckNextStep()"
+							/>
 
-              <q-btn
-                v-else-if="
-                  store.step >= store.currentStep &&
-                  (store.step == 3 || store.step == 7)
-                "
-                unelevated
-                label="ยื่นเอกการ"
-                color="public"
-                @click="onCilckNextStep()"
-              />
+							<q-btn v-else-if="store.step >= store.currentStep && (store.step == 3 || store.step == 7)" unelevated label="ยื่นเอกการ" color="public" @click="onCilckNextStep()" />
 
-              <q-btn
-                v-if="
-                  store.step >= store.currentStep &&
-                  store.step == 2 &&
-                  store.statusUpload
-                "
-                unelevated
-                label="ดำเนินการต่อ"
-                color="public"
-                @click="onCilckNextStep()"
-              />
-              <q-btn
-                v-if="
-                  store.step >= store.currentStep &&
-                  store.step == 6 &&
-                  store.statusUpload
-                "
-                unelevated
-                label="ดำเนินการต่อ"
-                color="public"
-                @click="onCilckNextStep()"
-              />
-            </div>
-          </div>
-        </q-card>
-      </div>
-    </div>
-  </div>
+							<q-btn v-if="store.step >= store.currentStep && store.step == 2 && store.statusUpload" unelevated label="ดำเนินการต่อ" color="public" @click="onCilckNextStep()" />
+							<q-btn v-if="store.step >= store.currentStep && store.step == 6 && store.statusUpload" unelevated label="ดำเนินการต่อ" color="public" @click="onCilckNextStep()" />
+						</div>
+					</div>
+				</q-card>
+			</div>
+		</div>
+	</div>
 
-  <PopupHistory
-    :modal="modalHistory"
-    :close="onClickPopupHistory"
-    :id="store.evaluateId"
-  />
+	<PopupHistory :modal="modalHistory" :close="onClickPopupHistory" :id="store.evaluateId" />
 </template>
 <style>
 .q-stepper--vertical .q-stepper__step-inner {
-  padding: 0;
+	padding: 0;
 }
 </style>

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 2/4] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=20multiple=20upload=20=E0=B9=83=E0=B8=99=E0=B9=84?=
 =?UTF-8?q?=E0=B8=9F=E0=B8=A5=E0=B9=8C=E0=B8=9F=E0=B8=AD=E0=B8=A3=E0=B9=8C?=
 =?UTF-8?q?=E0=B8=A1=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">

From 4dc852d180cf742b3d523327e004ffc5da44ca59 Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Wed, 10 Jan 2024 14:51:31 +0700
Subject: [PATCH 3/4] Update 01_SickForm.vue

---
 .../05_leave/components/FormLeave/01_SickForm.vue     | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/src/modules/05_leave/components/FormLeave/01_SickForm.vue b/src/modules/05_leave/components/FormLeave/01_SickForm.vue
index a5eebb2..d9b9569 100644
--- a/src/modules/05_leave/components/FormLeave/01_SickForm.vue
+++ b/src/modules/05_leave/components/FormLeave/01_SickForm.vue
@@ -435,16 +435,7 @@ onMounted(() => {
 			<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-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>

From 16b6fedcb8009fdb14b2dfa0c386c9fba67097f4 Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Wed, 10 Jan 2024 16:13:48 +0700
Subject: [PATCH 4/4] =?UTF-8?q?readOnly=20=E0=B9=80=E0=B8=A1=E0=B8=B7?=
 =?UTF-8?q?=E0=B9=88=E0=B8=AD=20Status=20=3D=20New?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/FormLeave/01_SickForm.vue      | 40 +++++++----
 .../components/FormLeave/03_Birth.vue         | 58 ++++++++--------
 .../FormLeave/04_HelpWifeBirthForm.vue        | 50 +++++++++-----
 .../components/FormLeave/05_VacationForm.vue  | 18 ++---
 .../FormLeave/06_OrdinationForm.vue           | 26 +++++--
 .../components/FormLeave/07_HajjForm.vue      | 28 ++++++--
 .../components/FormLeave/08_MilitaryForm.vue  | 34 +++++++--
 .../components/FormLeave/09_StudyForm.vue     | 31 +++++++--
 .../components/FormLeave/10_TrainForm.vue     | 30 ++++++--
 .../FormLeave/11_WorkInternationalForm.vue    | 53 +++++++-------
 .../FormLeave/12_FollowSpouseForm.vue         | 69 +++++++++++--------
 .../FormLeave/13_RehabilitationForm.vue       | 24 +++++--
 12 files changed, 305 insertions(+), 156 deletions(-)

diff --git a/src/modules/05_leave/components/FormLeave/01_SickForm.vue b/src/modules/05_leave/components/FormLeave/01_SickForm.vue
index d9b9569..7c67049 100644
--- a/src/modules/05_leave/components/FormLeave/01_SickForm.vue
+++ b/src/modules/05_leave/components/FormLeave/01_SickForm.vue
@@ -175,6 +175,7 @@ function resetEndDate(type: string) {
 	}
 }
 
+const statusCheck = ref<any>("")
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 onMounted(() => {
 	if (props.data) {
@@ -187,6 +188,12 @@ onMounted(() => {
 		formDataSick.leaveDetail = props.data.leaveDetail
 		leaveDocumentList.value = props.data.leaveDocument
 		formDataSick.leaveAddress = props.data.leaveAddress
+		statusCheck.value = props.data.status
+		console.log(leaveDocumentList.value.length)
+		console.log(statusCheck.value != "NEW")
+	} else {
+		statusCheck.value = "START"
+		console.log(statusCheck.value != "NEW")
 	}
 })
 </script>
@@ -210,14 +217,21 @@ onMounted(() => {
 					outlined
 					v-model="formDataSick.leaveWrote"
 					label="เขียนที่"
-					:readonly="!edit"
+					:readonly="!edit || statusCheck === 'NEW'"
 					: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" />
+					<q-radio v-model="formDataSick.leaveRange" :disable="!edit || statusCheck === 'NEW'" val="ALL" label="ลาทั้งวัน" checked-icon="task_alt" />
+					<q-radio v-model="formDataSick.leaveRange" :disable="!edit || statusCheck === 'NEW'" val="MORNING" label="ลาครึ่งวันเช้า" checked-icon="task_alt" @update:model-value="resetDate" />
+					<q-radio
+						v-model="formDataSick.leaveRange"
+						:disable="!edit || statusCheck === 'NEW'"
+						val="AFTERNOON"
+						label="ลาครึ่งวันบ่าย"
+						checked-icon="task_alt"
+						@update:model-value="resetDate"
+					/>
 				</div>
 				<div class="full-width">
 					<div class="q-col-gutter-sm row">
@@ -230,7 +244,7 @@ onMounted(() => {
 							borderless
 							:enableTimePicker="false"
 							week-start="0"
-							:readonly="!edit"
+							:readonly="!edit || statusCheck === 'NEW'"
 							@update:model-value="formDataSick.leaveEndDate = null"
 						>
 							<template #year="{ year }">
@@ -246,7 +260,7 @@ onMounted(() => {
 									ref="leaveStartDateRef"
 									for="leaveStartDateRef"
 									hide-bottom-space
-									:readonly="!edit"
+									:readonly="!edit || statusCheck === 'NEW'"
 									bg-color="white"
 									class="full-width cursor-pointer inputgreen"
 									:model-value="formDataSick.leaveStartDate != null ? date2Thai(formDataSick.leaveStartDate) : null"
@@ -340,7 +354,7 @@ onMounted(() => {
 							bg-color="white"
 							unmasked-value
 							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-							:readonly="!edit"
+							:readonly="!edit || statusCheck === 'NEW'"
 							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
 						/>
 
@@ -352,7 +366,7 @@ onMounted(() => {
 							for="leaveAddressRef"
 							v-model="formDataSick.leaveAddress"
 							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-							:readonly="!edit"
+							:readonly="!edit || statusCheck === 'NEW'"
 							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
 							hide-bottom-space
 							bg-color="white"
@@ -368,10 +382,10 @@ onMounted(() => {
 					for="leaveDetailRef"
 					v-model="formDataSick.leaveDetail"
 					label="รายละเอียด"
-					:readonly="!edit"
+					:readonly="!edit || statusCheck === 'NEW'"
 					bg-color="white"
 				/>
-				<div class="full-width">
+				<div class="full-width" v-if="statusCheck != 'NEW'">
 					<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">
@@ -379,9 +393,9 @@ onMounted(() => {
 								<q-icon name="attach_file" color="primary" />
 							</template>
 						</q-file>
-						<!-- <div class="col-12" v-if="formDataSick.leaveDocument.length == 0 && !data">
+						<div class="col-12" v-if="leaveDocumentList">
 							<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
-						</div> -->
+						</div>
 					</div>
 				</div>
 				<div class="col-12" v-if="data">
@@ -435,7 +449,7 @@ onMounted(() => {
 			<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-btn v-if="data && statusCheck != 'NEW'" 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>
diff --git a/src/modules/05_leave/components/FormLeave/03_Birth.vue b/src/modules/05_leave/components/FormLeave/03_Birth.vue
index f188671..978a6fa 100644
--- a/src/modules/05_leave/components/FormLeave/03_Birth.vue
+++ b/src/modules/05_leave/components/FormLeave/03_Birth.vue
@@ -135,7 +135,7 @@ async function fetchCheck() {
 }
 
 const leaveDocumentList = ref<any>()
-
+const statusCheck = ref<any>("")
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 onMounted(() => {
 	if (props.data) {
@@ -147,6 +147,7 @@ onMounted(() => {
 		formDataBirth.leaveAddress = props.data.leaveAddress
 		formDataBirth.leaveDetail = props.data.leaveDetail
 		leaveDocumentList.value = props.data.leaveDocument
+		statusCheck.value = props.data.status
 	}
 })
 </script>
@@ -170,7 +171,7 @@ onMounted(() => {
 					label="เขียนที่"
 					hide-bottom-space
 					bg-color="white"
-					:readonly="!edit"
+					:readonly="!edit || statusCheck === 'NEW'"
 					:rules="[val => !!val || `${'เขียนที่'}`]"
 				/>
 
@@ -184,7 +185,7 @@ onMounted(() => {
 					borderless
 					:enableTimePicker="false"
 					week-start="0"
-					:readonly="!edit"
+					:readonly="!edit || statusCheck === 'NEW'"
 					@update:model-value="formDataBirth.leaveEndDate = null"
 				>
 					<template #year="{ year }">
@@ -201,7 +202,7 @@ onMounted(() => {
 							for="leaveStartDateRef"
 							hide-bottom-space
 							bg-color="white"
-							:readonly="!edit"
+							:readonly="!edit || statusCheck === 'NEW'"
 							class="full-width datepicker"
 							:model-value="formDataBirth.leaveStartDate != null ? date2Thai(formDataBirth.leaveStartDate) : null"
 							:label="`${'ลาตั้งแต่วันที่'}`"
@@ -292,7 +293,7 @@ onMounted(() => {
 							mask="(###)-###-####"
 							unmasked-value
 							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-							:readonly="!edit"
+							:readonly="!edit || statusCheck === 'NEW'"
 							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
 						/>
 
@@ -306,7 +307,7 @@ onMounted(() => {
 							for="leaveAddressRef"
 							v-model="formDataBirth.leaveAddress"
 							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-							:readonly="!edit"
+							:readonly="!edit || statusCheck === 'NEW'"
 							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
 						/>
 					</div>
@@ -321,27 +322,30 @@ onMounted(() => {
 					for="leaveDetailRef"
 					v-model="formDataBirth.leaveDetail"
 					label="รายละเอียด"
-					:readonly="!edit"
+					:readonly="!edit || statusCheck === 'NEW'"
 				/>
-
-				<!-- 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="full-width" v-if="statusCheck != 'NEW'">
+					<div class="q-col-gutter-sm row">
+						<!-- 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>
+				</div>
 				<!-- <div class="col-12" v-if="formDataBirth.leaveDocument.length == 0">
 					<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
 				</div> -->
@@ -407,7 +411,7 @@ onMounted(() => {
 			<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-btn v-if="data && statusCheck != 'NEW'" 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>
diff --git a/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue b/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
index dd897f3..4d4334a 100644
--- a/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
+++ b/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
@@ -149,6 +149,7 @@ async function fetchCheck() {
 }
 
 const leaveDocumentList = ref<any>()
+const statusCheck = ref<any>("")
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 onMounted(() => {
 	if (props.data) {
@@ -163,7 +164,7 @@ onMounted(() => {
 		formDataHelpWife.leaveAddress = props.data.leaveAddress
 		formDataHelpWife.leaveDetail = props.data.leaveDetail
 		leaveDocumentList.value = props.data.leaveDocument
-
+		statusCheck.value = props.data.status
 		// formDataHelpWife.leaveDocument = props.data.leaveDocument;
 	}
 })
@@ -187,7 +188,7 @@ onMounted(() => {
 					bg-color="white"
 					v-model="formDataHelpWife.leaveWrote"
 					label="เขียนที่"
-					:readonly="!edit"
+					:readonly="!edit || statusCheck === 'NEW'"
 					:rules="[val => !!val || `${'เขียนที่'}`]"
 				/>
 				<datepicker
@@ -200,7 +201,7 @@ onMounted(() => {
 					borderless
 					:enableTimePicker="false"
 					week-start="0"
-					:readonly="!edit"
+					:readonly="!edit || statusCheck === 'NEW'"
 					@update:model-value="formDataHelpWife.leaveEndDate = null"
 				>
 					<template #year="{ year }">
@@ -217,7 +218,7 @@ onMounted(() => {
 							for="leaveStartDateRef"
 							hide-bottom-space
 							bg-color="white"
-							:readonly="!edit"
+							:readonly="!edit || statusCheck === 'NEW'"
 							class="full-width datepicker"
 							:model-value="formDataHelpWife.leaveStartDate != null ? date2Thai(formDataHelpWife.leaveStartDate) : null"
 							:label="`${'ลาตั้งแต่วันที่'}`"
@@ -293,7 +294,7 @@ onMounted(() => {
 						hide-bottom-space
 						v-model="formDataHelpWife.wifeDayName"
 						label="ชื่อภรรยา"
-						:readonly="!edit"
+						:readonly="!edit || statusCheck === 'NEW'"
 						:rules="[val => !!val || `${'ชื่อภรรยา'}`]"
 					/>
 				</div>
@@ -308,7 +309,7 @@ onMounted(() => {
 					hide-bottom-space
 					:enableTimePicker="false"
 					week-start="0"
-					:readonly="!edit"
+					:readonly="!edit || statusCheck === 'NEW'"
 				>
 					<template #year="{ year }">
 						{{ year + 543 }}
@@ -324,7 +325,7 @@ onMounted(() => {
 							for="wifeDayDateBornRef"
 							hide-bottom-space
 							bg-color="white"
-							:readonly="!edit"
+							:readonly="!edit || statusCheck === 'NEW'"
 							class="full-width datepicker"
 							:model-value="formDataHelpWife.wifeDayDateBorn != null ? date2Thai(formDataHelpWife.wifeDayDateBorn) : null"
 							:label="`${'วันที่คลอด'}`"
@@ -350,7 +351,7 @@ onMounted(() => {
 							hide-bottom-space
 							bg-color="white"
 							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-							:readonly="!edit"
+							:readonly="!edit || statusCheck === 'NEW'"
 							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
 						/>
 
@@ -364,7 +365,7 @@ onMounted(() => {
 							for="leaveAddressRef"
 							v-model="formDataHelpWife.leaveAddress"
 							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-							:readonly="!edit"
+							:readonly="!edit || statusCheck === 'NEW'"
 							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
 						/>
 					</div>
@@ -380,15 +381,28 @@ onMounted(() => {
 					for="leaveDetailRef"
 					v-model="formDataHelpWife.leaveDetail"
 					label="รายละเอียด"
-					:readonly="!edit"
+					:readonly="!edit || statusCheck === 'NEW'"
 				/>
-
-				<!-- 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="full-width" v-if="statusCheck != 'NEW'">
+					<div class="q-col-gutter-sm row">
+						<!-- 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>
+				</div>
 				<div class="col-12" v-if="data">
 					<div class="col-12 col-md-12 col-sm-12">
 						<q-card bordered>
@@ -455,7 +469,7 @@ onMounted(() => {
 			<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-btn v-if="data && statusCheck != 'NEW'" 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>
diff --git a/src/modules/05_leave/components/FormLeave/05_VacationForm.vue b/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
index 9a91894..43318eb 100644
--- a/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
@@ -166,6 +166,7 @@ const isReadOnly = computed(() => {
 })
 
 const leaveDocumentList = ref<any>()
+const statusCheck = ref<any>("")
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 onMounted(() => {
 	if (props.data) {
@@ -180,6 +181,7 @@ onMounted(() => {
 		formDataVacation.leaveAddress = props.data.leaveAddress
 		formDataVacation.leaveDetail = props.data.leaveDetail
 		leaveDocumentList.value = props.data.leaveDocument
+		statusCheck.value = props.data.status
 		// formDataVacation.leaveDocument = props.data.leaveDocument;
 	}
 })
@@ -203,7 +205,7 @@ onMounted(() => {
 					outlined
 					v-model="formDataVacation.leaveWrote"
 					label="เขียนที่"
-					:readonly="!edit"
+					:readonly="!edit || statusCheck === 'NEW'"
 					:rules="[val => !!val || `${'เขียนที่'}`]"
 				/>
 				<div class="col-12 col-md-4 col-sm-6">
@@ -247,7 +249,7 @@ onMounted(() => {
 					borderless
 					:enableTimePicker="false"
 					week-start="0"
-					:readonly="!edit"
+					:readonly="!edit || statusCheck === 'NEW'"
 					@update:model-value="formDataVacation.leaveEndDate = null"
 				>
 					<template #year="{ year }">
@@ -264,7 +266,7 @@ onMounted(() => {
 							for="leaveStartDateRef"
 							hide-bottom-space
 							bg-color="white"
-							:readonly="!edit"
+							:readonly="!edit || statusCheck === 'NEW'"
 							class="full-width datepicker"
 							:model-value="formDataVacation.leaveStartDate != null ? date2Thai(formDataVacation.leaveStartDate) : null"
 							:label="`${'ลาตั้งแต่วันที่'}`"
@@ -343,7 +345,7 @@ onMounted(() => {
 							mask="(###)-###-####"
 							unmasked-value
 							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-							:readonly="!edit"
+							:readonly="!edit || statusCheck === 'NEW'"
 							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
 						/>
 
@@ -357,7 +359,7 @@ onMounted(() => {
 							for="leaveAddressRef"
 							v-model="formDataVacation.leaveAddress"
 							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-							:readonly="!edit"
+							:readonly="!edit || statusCheck === 'NEW'"
 							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
 						/>
 					</div>
@@ -373,9 +375,9 @@ onMounted(() => {
 					for="leaveDetailRef"
 					v-model="formDataVacation.leaveDetail"
 					label="รายละเอียด"
-					:readonly="!edit"
+					:readonly="!edit || statusCheck === 'NEW'"
 				/>
-				<div class="full-width">
+				<div class="full-width" v-if="statusCheck != 'NEW'">
 					<div class="q-col-gutter-sm row">
 						<!-- multiple -->
 						<q-file
@@ -448,7 +450,7 @@ onMounted(() => {
 			<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-btn v-if="data && statusCheck != 'NEW'" 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>
diff --git a/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue b/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
index 0387e85..e697820 100644
--- a/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
@@ -163,6 +163,7 @@ function updateLeaveTotal() {
 }
 
 const leaveDocumentList = ref<any>()
+const statusCheck = ref<any>("")
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 onMounted(() => {
 	if (props.data) {
@@ -179,6 +180,7 @@ onMounted(() => {
 		formDataOrdination.ordainDayStatus = props.data.ordainDayStatus
 		formDataOrdination.leaveDetail = props.data.leaveDetail
 		leaveDocumentList.value = props.data.leaveDocument
+		statusCheck.value = props.data.status
 		// formDataOrdination.leaveDocument = props.data.leaveDocument;
 	}
 })
@@ -202,6 +204,7 @@ onMounted(() => {
 					hide-bottom-space
 					v-model="formDataOrdination.leaveWrote"
 					label="เขียนที่"
+					:readonly="!edit || statusCheck === 'NEW'"
 					:rules="[val => !!val || `${'เขียนที่'}`]"
 				/>
 
@@ -214,6 +217,7 @@ onMounted(() => {
 					borderless
 					:enableTimePicker="false"
 					week-start="0"
+					:readonly="!edit || statusCheck === 'NEW'"
 					@update:model-value="formDataOrdination.leaveEndDate = null"
 				>
 					<template #year="{ year }">
@@ -226,6 +230,7 @@ onMounted(() => {
 						<q-input
 							outlined
 							bg-color="white"
+							:readonly="!edit || statusCheck === 'NEW'"
 							dense
 							ref="leaveStartDateRef"
 							hide-bottom-space
@@ -249,7 +254,7 @@ onMounted(() => {
 					autoApply
 					borderless
 					@update:model-value="updateLeaveTotal, fetchCheck()"
-					:readonly="!formDataOrdination.leaveStartDate"
+					:readonly="!formDataOrdination.leaveStartDate || statusCheck === 'NEW'"
 					:enableTimePicker="false"
 					:min-date="formDataOrdination.leaveStartDate"
 					week-start="0"
@@ -270,7 +275,7 @@ onMounted(() => {
 							class="full-width datepicker"
 							:model-value="formDataOrdination.leaveEndDate != null ? date2Thai(formDataOrdination.leaveEndDate) : null"
 							:label="`${'ลาถึงวันที่'}`"
-							:readonly="!formDataOrdination.leaveStartDate"
+							:readonly="!formDataOrdination.leaveStartDate || statusCheck === 'NEW'"
 							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
 						>
 							<template v-slot:prepend>
@@ -369,8 +374,8 @@ onMounted(() => {
 
 				<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 />
+					<q-radio v-model="formDataOrdination.ordainDayStatus" :disable="!edit || statusCheck === 'NEW'" :val="true" label="เคยบวช" checked-icon="task_alt " hide-bottom-space />
+					<q-radio v-model="formDataOrdination.ordainDayStatus" :disable="!edit || statusCheck === 'NEW'" :val="false" label="ไม่เคยบวช" checked-icon="task_alt" hide-bottom-space />
 				</div>
 
 				<div class="text-weight-bold text-dark col-12">สถานที่บวช</div>
@@ -382,6 +387,7 @@ onMounted(() => {
 					autoApply
 					full-width
 					borderless
+					:readonly="!edit || statusCheck === 'NEW'"
 					hide-bottom-space
 					:enableTimePicker="false"
 					week-start="0"
@@ -399,6 +405,7 @@ onMounted(() => {
 							dense
 							bg-color="white"
 							hide-bottom-space
+							:readonly="!edit || statusCheck === 'NEW'"
 							class="full-width datepicker"
 							:model-value="formDataOrdination.ordainDayOrdination != null ? date2Thai(formDataOrdination.ordainDayOrdination) : null"
 							:label="`${'วันอุปสมบท'}`"
@@ -419,6 +426,7 @@ onMounted(() => {
 					bg-color="white"
 					outlined
 					full-width
+					:readonly="!edit || statusCheck === 'NEW'"
 					v-model="formDataOrdination.ordainDayLocationName"
 					label="ชื่อวัด"
 					:rules="[val => !!val || `${'กรุณากรอกชื่อวัด'}`]"
@@ -434,6 +442,7 @@ onMounted(() => {
 					bg-color="white"
 					mask="(###)-###-####"
 					unmasked-value
+					:readonly="!edit || statusCheck === 'NEW'"
 					hide-bottom-space
 					label="หมายเลขโทรศัพท์"
 					:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์'}`]"
@@ -447,6 +456,7 @@ onMounted(() => {
 					hide-bottom-space
 					v-model="formDataOrdination.ordainDayLocationAddress"
 					label="ที่อยู่"
+					:readonly="!edit || statusCheck === 'NEW'"
 					:rules="[val => !!val || `${'กรุณากรอกที่อยู่'}`]"
 					type="textarea"
 				/>
@@ -459,6 +469,7 @@ onMounted(() => {
 					bg-color="white"
 					hide-bottom-space
 					outlined
+					:readonly="!edit || statusCheck === 'NEW'"
 					v-model="formDataOrdination.ordainDayBuddhistLentName"
 					label="ชื่อวัด"
 					:rules="[val => !!val || `${'กรุณากรอกชื่อวัด'}`]"
@@ -470,6 +481,7 @@ onMounted(() => {
 					ref="ordainDayBuddhistLentAddressRef"
 					bg-color="white"
 					outlined
+					:readonly="!edit || statusCheck === 'NEW'"
 					v-model="formDataOrdination.ordainDayBuddhistLentAddress"
 					label="ที่อยู่"
 					:rules="[val => !!val || `${'กรุณากรอกที่อยู่'}`]"
@@ -486,9 +498,9 @@ onMounted(() => {
 					for="leaveDetailRef"
 					v-model="formDataOrdination.leaveDetail"
 					label="รายละเอียด"
-					:readonly="!edit"
+					:readonly="!edit || statusCheck === 'NEW'"
 				/>
-				<div class="full-width col-12">
+				<div class="full-width col-12" v-if="statusCheck != 'NEW'">
 					<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>
@@ -552,7 +564,7 @@ onMounted(() => {
 			<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-btn v-if="data && statusCheck != 'NEW'" 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>
diff --git a/src/modules/05_leave/components/FormLeave/07_HajjForm.vue b/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
index ce414ee..6c67c11 100644
--- a/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
+++ b/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
@@ -134,6 +134,7 @@ function updateLeaveTotal() {
 }
 
 const leaveDocumentList = ref<any>()
+const statusCheck = ref<any>("")
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 onMounted(() => {
 	if (props.data) {
@@ -145,6 +146,7 @@ onMounted(() => {
 		formDataHaji.hajjDayStatus = props.data.hajjDayStatus
 		formDataHaji.leaveDetail = props.data.leaveDetail
 		leaveDocumentList.value = props.data.leaveDocument
+		statusCheck.value = props.data.status
 		// formDataHaji.leaveDocument = props.data.leaveDocument;
 	}
 })
@@ -167,6 +169,7 @@ onMounted(() => {
 					outlined
 					label="เขียนที่"
 					hide-bottom-space
+					:readonly="!edit || statusCheck === 'NEW'"
 					:rules="[val => !!val || `${'เขียนที่'}`]"
 				/>
 
@@ -181,6 +184,7 @@ onMounted(() => {
 							week-start="0"
 							:enableTimePicker="false"
 							:locale="'th'"
+							:readonly="!edit || statusCheck === 'NEW'"
 							@update:model-value="formDataHaji.leaveEndDate = null"
 						>
 							<template #year="{ year }">
@@ -198,6 +202,7 @@ onMounted(() => {
 									dense
 									hide-bottom-space
 									:label="`${'ลาตั้งแต่วันที่'}`"
+									:readonly="!edit || statusCheck === 'NEW'"
 									:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
 									:model-value="formDataHaji.leaveStartDate != null ? date2Thai(formDataHaji.leaveStartDate) : null"
 								>
@@ -218,7 +223,7 @@ onMounted(() => {
 							:enableTimePicker="false"
 							:locale="'th'"
 							@update:model-value="updateLeaveTotal"
-							:readonly="!formDataHaji.leaveStartDate"
+							:readonly="!formDataHaji.leaveStartDate || statusCheck === 'NEW'"
 							:min-date="formDataHaji.leaveStartDate"
 						>
 							<template #year="{ year }">
@@ -234,7 +239,7 @@ onMounted(() => {
 									bg-color="white"
 									outlined
 									dense
-									:readonly="!formDataHaji.leaveStartDate"
+									:readonly="!formDataHaji.leaveStartDate || statusCheck === 'NEW'"
 									hide-bottom-space
 									:label="`${'ลาถึงวันที่'}`"
 									@update:model-value="fetchCheck()"
@@ -291,12 +296,21 @@ onMounted(() => {
 
 				<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="ไม่เคยไปประกอบพิธีฮัจญ์" />
+					<q-radio v-model="formDataHaji.hajjDayStatus" :disable="statusCheck === 'NEW'" :val="true" checked-icon="task_alt" label="เคย" />
+					<q-radio v-model="formDataHaji.hajjDayStatus" :disable="statusCheck === 'NEW'" :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="รายละเอียด" />
-				<div class="full-width">
+				<q-input
+					v-model="formDataHaji.leaveDetail"
+					class="col-12 q-mt-sm cursor-pointer inputgreen"
+					bg-color="white"
+					dense
+					outlined
+					type="textarea"
+					label="รายละเอียด"
+					:readonly="!edit || statusCheck === 'NEW'"
+				/>
+				<div class="full-width" v-if="statusCheck != 'NEW'">
 					<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>
@@ -358,7 +372,7 @@ onMounted(() => {
 			<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-btn v-if="data && statusCheck != 'NEW'" 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>
diff --git a/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue b/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
index 88fbd5d..25cbc8d 100644
--- a/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
+++ b/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
@@ -151,6 +151,7 @@ function updateLeaveTotal() {
 }
 
 const leaveDocumentList = ref<any>()
+const statusCheck = ref<any>("")
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 onMounted(() => {
 	if (props.data) {
@@ -165,6 +166,7 @@ onMounted(() => {
 		formDataMilitary.absentDayAt = props.data.absentDayAt
 		formDataMilitary.leaveDetail = props.data.leaveDetail
 		leaveDocumentList.value = props.data.leaveDocument
+		statusCheck.value = props.data.status
 		// formDataMilitary.leaveDocument = props.data.leaveDocument;
 	}
 })
@@ -187,6 +189,7 @@ onMounted(() => {
 					hide-bottom-space
 					v-model="formDataMilitary.leaveWrote"
 					label="เขียนที่"
+					:readonly="!edit || statusCheck === 'NEW'"
 					:rules="[val => !!val || `${'เขียนที่'}`]"
 				/>
 
@@ -199,6 +202,7 @@ onMounted(() => {
 					borderless
 					:enableTimePicker="false"
 					week-start="0"
+					:readonly="!edit || statusCheck === 'NEW'"
 					@update:model-value="formDataMilitary.leaveEndDate = null"
 				>
 					<template #year="{ year }">
@@ -214,6 +218,7 @@ onMounted(() => {
 							dense
 							ref="leaveStartDateRef"
 							hide-bottom-space
+							:readonly="!edit || statusCheck === 'NEW'"
 							class="full-width datepicker"
 							:model-value="formDataMilitary.leaveStartDate != null ? date2Thai(formDataMilitary.leaveStartDate) : null"
 							:label="`${'ลาตั้งแต่วันที่'}`"
@@ -236,7 +241,7 @@ onMounted(() => {
 					:enableTimePicker="false"
 					week-start="0"
 					@update:model-value="updateLeaveTotal, fetchCheck()"
-					:readonly="!formDataMilitary.leaveStartDate"
+					:readonly="!formDataMilitary.leaveStartDate || statusCheck === 'NEW'"
 					:min-date="formDataMilitary.leaveStartDate"
 				>
 					<template #year="{ year }">
@@ -252,7 +257,7 @@ onMounted(() => {
 							ref="leaveEndDateRef"
 							bg-color="white"
 							hide-bottom-space
-							:readonly="!formDataMilitary.leaveStartDate"
+							:readonly="!formDataMilitary.leaveStartDate || statusCheck === 'NEW'"
 							class="full-width datepicker"
 							:model-value="formDataMilitary.leaveEndDate != null ? date2Thai(formDataMilitary.leaveEndDate) : null"
 							:label="`${'ลาถึงวันที่'}`"
@@ -288,6 +293,7 @@ onMounted(() => {
 							v-model="formDataMilitary.absentDaySummon"
 							label="ได้รับหมายเรียกของ"
 							hide-bottom-space
+							:readonly="!edit || statusCheck === 'NEW'"
 							:rules="[val => !!val || `${'กรุณากรอกได้รับหมายเรียกของ'}`]"
 						/>
 
@@ -300,6 +306,7 @@ onMounted(() => {
 							v-model="formDataMilitary.absentDayLocation"
 							label="ที่"
 							hide-bottom-space
+							:readonly="!edit || statusCheck === 'NEW'"
 							:rules="[val => !!val || `${'กรุณากรอกที่'}`]"
 						/>
 					</div>
@@ -314,6 +321,7 @@ onMounted(() => {
 							:locale="'th'"
 							autoApply
 							borderless
+							:readonly="!edit || statusCheck === 'NEW'"
 							:enableTimePicker="false"
 							week-start="0"
 						>
@@ -330,6 +338,7 @@ onMounted(() => {
 									ref="absentDayRegistorDateRef"
 									bg-color="white"
 									hide-bottom-space
+									:readonly="!edit || statusCheck === 'NEW'"
 									class="full-width datepicker"
 									:model-value="formDataMilitary.absentDayRegistorDate != null ? date2Thai(formDataMilitary.absentDayRegistorDate) : null"
 									:label="`${'ลงวันที่'}`"
@@ -351,6 +360,7 @@ onMounted(() => {
 							v-model="formDataMilitary.absentDayGetIn"
 							label="ให้เข้ารับการ"
 							hide-bottom-space
+							:readonly="!edit || statusCheck === 'NEW'"
 							:rules="[val => !!val || `${'กรุณากรอกให้เข้ารับการ'}`]"
 						/>
 
@@ -363,23 +373,33 @@ onMounted(() => {
 							v-model="formDataMilitary.absentDayAt"
 							label="ณ ที่"
 							hide-bottom-space
+							:readonly="!edit || statusCheck === 'NEW'"
 							: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
+					:readonly="!edit || statusCheck === 'NEW'"
+					bg-color="white"
+					outlined
+					v-model="formDataMilitary.leaveDetail"
+					type="textarea"
+					label="รายละเอียด"
+				/>
 
-				<div class="col-12">
+				<div class="col-12" v-if="statusCheck != 'NEW'">
 					<!-- 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">
+					<!-- <div class="col-12" v-if="formDataMilitary.leaveDocument.length == 0">
 						<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
-					</div>
+					</div> -->
 					<div class="col-12" v-if="data">
 						<div class="col-12 col-md-12 col-sm-12">
 							<q-card bordered>
@@ -430,7 +450,7 @@ onMounted(() => {
 			<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-btn v-if="data && statusCheck != 'NEW'" 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>
diff --git a/src/modules/05_leave/components/FormLeave/09_StudyForm.vue b/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
index 29a53b4..234770d 100644
--- a/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
+++ b/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
@@ -168,6 +168,7 @@ function updateLeaveTotal() {
 }
 
 const leaveDocumentList = ref<any>()
+const statusCheck = ref<any>("")
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 onMounted(async () => {
 	if (props.data) {
@@ -191,6 +192,7 @@ onMounted(async () => {
 		leaveDocumentList.value = props.data.leaveDocument
 		const leaveTotal = await calculateDurationYmd(props.data.leaveStartDate, props.data.leaveEndDate)
 		formDataStudy.leaveTotal = leaveTotal
+		statusCheck.value = props.data.status
 	}
 })
 </script>
@@ -212,6 +214,7 @@ onMounted(async () => {
 					outlined
 					label="เขียนที่"
 					hide-bottom-space
+					:readonly="!edit || statusCheck === 'NEW'"
 					:rules="[val => !!val || `${'เขียนที่'}`]"
 				/>
 
@@ -224,6 +227,7 @@ onMounted(async () => {
 					week-start="0"
 					:enableTimePicker="false"
 					:locale="'th'"
+					:readonly="!edit || statusCheck === 'NEW'"
 					@update:model-value="formDataStudy.leaveEndDate = null"
 				>
 					<template #year="{ year }">
@@ -240,6 +244,7 @@ onMounted(async () => {
 							outlined
 							dense
 							lazy-rules
+							:readonly="!edit || statusCheck === 'NEW'"
 							hide-bottom-space
 							:label="`${'ลาตั้งแต่วันที่'}`"
 							:model-value="formDataStudy.leaveStartDate != null ? date2Thai(formDataStudy.leaveStartDate) : null"
@@ -261,7 +266,7 @@ onMounted(async () => {
 					week-start="0"
 					:locale="'th'"
 					@update:model-value="updateLeaveTotal()"
-					:readonly="!formDataStudy.leaveStartDate"
+					:readonly="!formDataStudy.leaveStartDate || statusCheck === 'NEW'"
 					:enableTimePicker="false"
 					:min-date="formDataStudy.leaveStartDate"
 				>
@@ -281,7 +286,7 @@ onMounted(async () => {
 							bg-color="white"
 							hide-bottom-space
 							:label="`${'ลาถึงวันที่'}`"
-							:readonly="!formDataStudy.leaveStartDate"
+							:readonly="!formDataStudy.leaveStartDate || statusCheck === 'NEW'"
 							:model-value="formDataStudy.leaveEndDate != null ? date2Thai(formDataStudy.leaveEndDate) : null"
 							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
 						>
@@ -387,6 +392,7 @@ onMounted(async () => {
 							bg-color="white"
 							dense
 							outlined
+							:readonly="!edit || statusCheck === 'NEW'"
 							label="ชื่อสถานศึกษา"
 							hide-bottom-space
 							:rules="[val => !!val || `${'กรุณากรอกชื่อสถานศึกษา'}`]"
@@ -399,6 +405,7 @@ onMounted(async () => {
 							bg-color="white"
 							dense
 							outlined
+							:readonly="!edit || statusCheck === 'NEW'"
 							label="ชั้นปริญญา"
 							hide-bottom-space
 							:rules="[val => !!val || `${'กรุณากรอกชั้นปริญญา'}`]"
@@ -411,6 +418,7 @@ onMounted(async () => {
 							bg-color="white"
 							dense
 							outlined
+							:readonly="!edit || statusCheck === 'NEW'"
 							label="ศึกษาวิชา"
 							hide-bottom-space
 							:rules="[val => !!val || `${'กรุณากรอกศึกษาวิชา'}`]"
@@ -423,6 +431,7 @@ onMounted(async () => {
 							bg-color="white"
 							dense
 							outlined
+							:readonly="!edit || statusCheck === 'NEW'"
 							label="ประเทศ"
 							hide-bottom-space
 							:rules="[val => !!val || `${'กรุณากรอกประเทศ'}`]"
@@ -435,6 +444,7 @@ onMounted(async () => {
 							bg-color="white"
 							dense
 							outlined
+							:readonly="!edit || statusCheck === 'NEW'"
 							label="ด้วยทุน"
 							hide-bottom-space
 							:rules="[val => !!val || `${'กรุณากรอกด้วยทุน'}`]"
@@ -447,6 +457,7 @@ onMounted(async () => {
 							bg-color="white"
 							dense
 							outlined
+							:readonly="!edit || statusCheck === 'NEW'"
 							unmasked-value
 							hide-bottom-space
 							mask="(###)-###-####"
@@ -461,6 +472,7 @@ onMounted(async () => {
 							bg-color="white"
 							dense
 							outlined
+							:readonly="!edit || statusCheck === 'NEW'"
 							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
 							hide-bottom-space
 							:rules="[val => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
@@ -468,9 +480,18 @@ onMounted(async () => {
 					</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"
+					:readonly="!edit || statusCheck === 'NEW'"
+					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+					bg-color="white"
+					dense
+					outlined
+					type="textarea"
+					label="รายละเอียด"
+				/>
 
-				<div class="col-12">
+				<div class="col-12" v-if="statusCheck != 'NEW'">
 					<!-- multiple -->
 					<q-file v-model="formDataStudy.leaveDocument" bg-color="white" multiple dense outlined use-chips @added="fileUploadDoc" label="เอกสารประกอบ">
 						<template v-slot:prepend>
@@ -530,7 +551,7 @@ onMounted(async () => {
 			<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-btn v-if="data && statusCheck != 'NEW'" 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>
diff --git a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
index 3f63989..d79b75e 100644
--- a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
+++ b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
@@ -173,6 +173,7 @@ const formattedSalary = computed(() => {
 })
 
 const leaveDocumentList = ref<any>()
+const statusCheck = ref<any>("")
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 onMounted(async () => {
 	if (props.data) {
@@ -195,6 +196,7 @@ onMounted(async () => {
 		const leaveTotal = await calculateDurationYmd(props.data.leaveStartDate, props.data.leaveEndDate)
 		formDataTrain.leaveTotal = leaveTotal
 		leaveDocumentList.value = props.data.leaveDocument
+		statusCheck.value = props.data.status
 	}
 })
 </script>
@@ -215,6 +217,7 @@ onMounted(async () => {
 					dense
 					outlined
 					label="เขียนที่"
+					:readonly="!edit || statusCheck === 'NEW'"
 					hide-bottom-space
 					:rules="[val => !!val || `${'เขียนที่'}`]"
 				/>
@@ -228,6 +231,7 @@ onMounted(async () => {
 					week-start="0"
 					:enableTimePicker="false"
 					:locale="'th'"
+					:readonly="!edit || statusCheck === 'NEW'"
 					@update:model-value="formDataTrain.leaveEndDate = null"
 				>
 					<template #year="{ year }">
@@ -245,6 +249,7 @@ onMounted(async () => {
 							dense
 							lazy-rules
 							hide-bottom-space
+							:readonly="!edit || statusCheck === 'NEW'"
 							:label="`${'ลาตั้งแต่วันที่'}`"
 							:model-value="formDataTrain.leaveStartDate != null ? date2Thai(formDataTrain.leaveStartDate) : null"
 							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
@@ -264,7 +269,7 @@ onMounted(async () => {
 					borderless
 					@update:model-value="updateLeaveTotal()"
 					week-start="0"
-					:readonly="!formDataTrain.leaveStartDate"
+					:readonly="!formDataTrain.leaveStartDate || statusCheck === 'NEW'"
 					:locale="'th'"
 					:enableTimePicker="false"
 					:min-date="formDataTrain.leaveStartDate"
@@ -285,7 +290,7 @@ onMounted(async () => {
 							bg-color="white"
 							hide-bottom-space
 							:label="`${'ลาถึงวันที่'}`"
-							:readonly="!formDataTrain.leaveStartDate"
+							:readonly="!formDataTrain.leaveStartDate || statusCheck === 'NEW'"
 							:model-value="formDataTrain.leaveEndDate != null ? date2Thai(formDataTrain.leaveEndDate) : null"
 							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
 						>
@@ -402,6 +407,7 @@ onMounted(async () => {
 							outlined
 							label="ด้าน/หลักสูตร"
 							hide-bottom-space
+							:readonly="!edit || statusCheck === 'NEW'"
 							:rules="[val => !!val || `${'กรุณากรอกด้าน/หลักสูตร'}`]"
 						/>
 
@@ -414,6 +420,7 @@ onMounted(async () => {
 							outlined
 							label="ณ สถานที่"
 							hide-bottom-space
+							:readonly="!edit || statusCheck === 'NEW'"
 							:rules="[val => !!val || `${'กรุณากรอก ณ สถานที่'}`]"
 						/>
 
@@ -426,6 +433,7 @@ onMounted(async () => {
 							outlined
 							label="ประเทศ"
 							hide-bottom-space
+							:readonly="!edit || statusCheck === 'NEW'"
 							:rules="[val => !!val || `${'กรุณากรอกประเทศ'}`]"
 						/>
 
@@ -438,6 +446,7 @@ onMounted(async () => {
 							outlined
 							label="ด้วยทุน"
 							hide-bottom-space
+							:readonly="!edit || statusCheck === 'NEW'"
 							:rules="[val => !!val || `${'กรุณากรอกด้วยทุน'}`]"
 						/>
 
@@ -451,6 +460,7 @@ onMounted(async () => {
 							hide-bottom-space
 							bg-color="white"
 							mask="(###)-###-####"
+							:readonly="!edit || statusCheck === 'NEW'"
 							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
 							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
 						/>
@@ -463,15 +473,25 @@ onMounted(async () => {
 							dense
 							outlined
 							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+							:readonly="!edit || statusCheck === 'NEW'"
 							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"
+					:readonly="!edit || statusCheck === 'NEW'"
+					bg-color="white"
+					dense
+					outlined
+					type="textarea"
+					label="รายละเอียด"
+				/>
 
-				<div class="col-12">
+				<div class="col-12" v-if="statusCheck != 'NEW'">
 					<!-- multiple -->
 					<q-file v-model="formDataTrain.leaveDocument" bg-color="white" multiple dense outlined label="เอกสารประกอบ">
 						<template v-slot:prepend>
@@ -531,7 +551,7 @@ onMounted(async () => {
 			<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-btn v-if="data && statusCheck != 'NEW'" 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>
diff --git a/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue b/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
index 2c83133..9b01c85 100644
--- a/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
+++ b/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
@@ -153,6 +153,7 @@ async function FetchCheck() {
 
 const leaveDocumentList = ref<any>()
 const leaveDraftDocument = ref<string>()
+const statusCheck = ref<any>("")
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 onMounted(() => {
 	if (props.data) {
@@ -163,6 +164,7 @@ onMounted(() => {
 		// formDataWorkInternational.leaveDocument = props.data.leaveDocument;
 		leaveDraftDocument.value = props.data.leaveDraftDocument
 		leaveDocumentList.value = props.data.leaveDocument
+		statusCheck.value = props.data.status
 	}
 })
 </script>
@@ -185,7 +187,7 @@ onMounted(() => {
 					outlined
 					v-model="formDataWorkInternational.leaveWrote"
 					label="เขียนที่"
-					:readonly="!edit"
+					:readonly="!edit || statusCheck === 'NEW'"
 					:rules="[val => !!val || `${'เขียนที่'}`]"
 				/>
 
@@ -199,7 +201,7 @@ onMounted(() => {
 					borderless
 					:enableTimePicker="false"
 					week-start="0"
-					:readonly="!edit"
+					:readonly="!edit || statusCheck === 'NEW'"
 					@update:model-value="formDataWorkInternational.leaveEndDate = null"
 				>
 					<template #year="{ year }">
@@ -216,7 +218,7 @@ onMounted(() => {
 							for="leaveStartDateRef"
 							hide-bottom-space
 							bg-color="white"
-							:readonly="!edit"
+							:readonly="!edit || statusCheck === 'NEW'"
 							class="full-width datepicker"
 							:model-value="formDataWorkInternational.leaveStartDate != null ? date2Thai(formDataWorkInternational.leaveStartDate) : null"
 							:label="`${'ลาตั้งแต่วันที่'}`"
@@ -240,7 +242,7 @@ onMounted(() => {
 					:enableTimePicker="false"
 					@update:model-value="FetchCheck()"
 					week-start="0"
-					:readonly="!formDataWorkInternational.leaveStartDate"
+					:readonly="!formDataWorkInternational.leaveStartDate || statusCheck === 'NEW'"
 					:min-date="formDataWorkInternational.leaveStartDate"
 				>
 					<template #year="{ year }">
@@ -257,7 +259,7 @@ onMounted(() => {
 							for="leaveEndDateRef"
 							hide-bottom-space
 							bg-color="white"
-							:readonly="!formDataWorkInternational.leaveStartDate"
+							:readonly="!formDataWorkInternational.leaveStartDate || statusCheck === 'NEW'"
 							class="full-width datepicker"
 							:model-value="formDataWorkInternational.leaveEndDate != null ? date2Thai(formDataWorkInternational.leaveEndDate) : null"
 							:label="`${'ลาถึงวันที่'}`"
@@ -293,25 +295,28 @@ onMounted(() => {
 					for="leaveDetailRef"
 					v-model="formDataWorkInternational.leaveDetail"
 					label="รายละเอียด"
-					:readonly="!edit"
+					:readonly="!edit || statusCheck === 'NEW'"
 				/>
-
-				<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="full-width" v-if="statusCheck != 'NEW'">
+					<div class="q-col-gutter-sm row">
+						<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>
+				</div>
 				<!-- <div class="col-12" v-if="formDataWorkInternational.leaveDocument.length == 0">
 					<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
 				</div> -->
@@ -411,7 +416,7 @@ onMounted(() => {
 				<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-btn v-if="data && statusCheck != 'NEW'" 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>
diff --git a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
index db1d633..0dd0bff 100644
--- a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
@@ -184,6 +184,7 @@ function updateLeaveHistoryTotal() {
 }
 
 const leaveDocumentList = ref<any>()
+const statusCheck = ref<any>("")
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 onMounted(async () => {
 	if (props.data) {
@@ -207,9 +208,9 @@ onMounted(async () => {
 
 		const leaveTotal = await calculateDurationYmd(props.data.leaveStartDate, props.data.leaveEndDate)
 		formDataFollowSpouse.leaveTotal = leaveTotal
-
 		const coupleDayTotalHistory = await calculateDurationYmd(props.data.coupleDayStartDateHistory, props.data.coupleDayEndDateHistory)
 		formDataFollowSpouse.coupleDayTotalHistory = coupleDayTotalHistory
+		statusCheck.value = props.data.status
 	}
 })
 </script>
@@ -232,7 +233,7 @@ onMounted(async () => {
 					outlined
 					v-model="formDataFollowSpouse.leaveWrote"
 					label="เขียนที่"
-					:readonly="!edit"
+					:readonly="!edit || statusCheck === 'NEW'"
 					:rules="[val => !!val || `${'เขียนที่'}`]"
 				/>
 				<datepicker
@@ -245,7 +246,7 @@ onMounted(async () => {
 					borderless
 					:enableTimePicker="false"
 					week-start="0"
-					:readonly="!edit"
+					:readonly="!edit || statusCheck === 'NEW'"
 					@update:model-value="formDataFollowSpouse.leaveEndDate = null"
 				>
 					<template #year="{ year }">
@@ -262,7 +263,7 @@ onMounted(async () => {
 							for="leaveStartDateRef"
 							hide-bottom-space
 							bg-color="white"
-							:readonly="!edit"
+							:readonly="!edit || statusCheck === 'NEW'"
 							class="full-width datepicker"
 							:model-value="formDataFollowSpouse.leaveStartDate != null ? date2Thai(formDataFollowSpouse.leaveStartDate) : null"
 							:label="`${'ลาตั้งแต่วันที่'}`"
@@ -286,7 +287,7 @@ onMounted(async () => {
 					:enableTimePicker="false"
 					week-start="0"
 					@update:model-value="updateLeaveTotal()"
-					:readonly="!formDataFollowSpouse.leaveStartDate"
+					:readonly="!formDataFollowSpouse.leaveStartDate || statusCheck === 'NEW'"
 					:min-date="formDataFollowSpouse.leaveStartDate"
 				>
 					<template #year="{ year }">
@@ -303,7 +304,7 @@ onMounted(async () => {
 							for="leaveEndDateRef"
 							hide-bottom-space
 							bg-color="white"
-							:readonly="!formDataFollowSpouse.leaveStartDate"
+							:readonly="!formDataFollowSpouse.leaveStartDate || statusCheck === 'NEW'"
 							class="full-width datepicker"
 							:model-value="formDataFollowSpouse.leaveEndDate != null ? date2Thai(formDataFollowSpouse.leaveEndDate) : null"
 							:label="`${'ลาถึงวันที่'}`"
@@ -367,7 +368,7 @@ onMounted(async () => {
 						outlined
 						v-model="formDataFollowSpouse.coupleDayName"
 						label="ชื่อคู่สมรส"
-						:readonly="!edit"
+						:readonly="!edit || statusCheck === 'NEW'"
 						:rules="[val => !!val || `${'ชื่อคู่สมรส'}`]"
 					/>
 				</div>
@@ -382,7 +383,7 @@ onMounted(async () => {
 						bg-color="white"
 						v-model="formDataFollowSpouse.coupleDayPosition"
 						label="ตำแหน่งคู่สมรส"
-						:readonly="!edit"
+						:readonly="!edit || statusCheck === 'NEW'"
 						:rules="[val => !!val || `${'ตำแหน่งคู่สมรส'}`]"
 					/>
 				</div>
@@ -397,7 +398,7 @@ onMounted(async () => {
 						bg-color="white"
 						v-model="formDataFollowSpouse.coupleDayLevel"
 						label="ระดับคู่สมรส"
-						:readonly="!edit"
+						:readonly="!edit || statusCheck === 'NEW'"
 						:rules="[val => !!val || `${'ระดับคู่สมรส'}`]"
 					/>
 				</div>
@@ -412,7 +413,7 @@ onMounted(async () => {
 						bg-color="white"
 						v-model="formDataFollowSpouse.coupleDayLevelCountry"
 						label="ไปปฏิบัติราชการ ณ ประเทศ"
-						:readonly="!edit"
+						:readonly="!edit || statusCheck === 'NEW'"
 						:rules="[val => !!val || `${'ปฏิบัติราชการ ณ ประเทศ'}`]"
 					/>
 				</div>
@@ -425,6 +426,7 @@ onMounted(async () => {
 					autoApply
 					hide-bottom-space
 					borderless
+					:readonly="!edit || statusCheck === 'NEW'"
 					:enableTimePicker="false"
 					week-start="0"
 				>
@@ -443,6 +445,7 @@ onMounted(async () => {
 							hide-bottom-space
 							bg-color="white"
 							class="full-width"
+							:readonly="!edit || statusCheck === 'NEW'"
 							:model-value="formDataFollowSpouse.coupleDayStartDateHistory != null ? date2Thai(formDataFollowSpouse.coupleDayStartDateHistory) : null"
 							:label="`${'ตั้งแต่วันที่'}`"
 							:rules="[val => !!val || `${'กรุณาเลือกตั้งแต่วันที่'}`]"
@@ -462,6 +465,7 @@ onMounted(async () => {
 					hide-bottom-space
 					borderless
 					:enableTimePicker="false"
+					:readonly="!edit || statusCheck === 'NEW'"
 					week-start="0"
 					@update:model-value="updateLeaveHistoryTotal()"
 				>
@@ -479,6 +483,7 @@ onMounted(async () => {
 							for="coupleDayEndDateHistoryRef"
 							hide-bottom-space
 							bg-color="white"
+							:readonly="!edit || statusCheck === 'NEW'"
 							class="full-width"
 							:model-value="formDataFollowSpouse.coupleDayEndDateHistory != null ? date2Thai(formDataFollowSpouse.coupleDayEndDateHistory) : null"
 							:label="`${'ถึงวันที่'}`"
@@ -514,6 +519,7 @@ onMounted(async () => {
 					for="coupleDayCountryHistoryRef"
 					v-model="formDataFollowSpouse.coupleDayCountryHistory"
 					label="ประเทศ"
+					:readonly="!edit || statusCheck === 'NEW'"
 					:rules="[val => !!val || `${'กรุณาเลือกประเทศ'}`]"
 				/>
 
@@ -528,26 +534,29 @@ onMounted(async () => {
 					for="leaveDetailRef"
 					v-model="formDataFollowSpouse.leaveDetail"
 					label="รายละเอียด"
-					:readonly="!edit"
+					:readonly="!edit || statusCheck === 'NEW'"
 				/>
-
-				<!-- 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="full-width" v-if="statusCheck != 'NEW'">
+					<div class="q-col-gutter-sm row">
+						<!-- 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>
+				</div>
 				<!-- <div class="col-12" v-if="formDataFollowSpouse.leaveDocument.length == 0">
 					<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
 				</div> -->
@@ -601,7 +610,7 @@ onMounted(async () => {
 			<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-btn v-if="data && statusCheck != 'NEW'" 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>
diff --git a/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue b/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
index 44c9d79..20c17cc 100644
--- a/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
@@ -149,6 +149,7 @@ async function onClickDownloadFile(id: string, fileName: string) {
 
 const leaveDocumentList = ref<any>()
 const leaveDraftDocument = ref<string>()
+const statusCheck = ref<any>("")
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 onMounted(() => {
 	if (props.data) {
@@ -159,6 +160,7 @@ onMounted(() => {
 		// formDataRehabilitation.leaveDocument = props.data.leaveDocument;
 		leaveDraftDocument.value = props.data.leaveDraftDocument
 		leaveDocumentList.value = props.data.leaveDocument
+		statusCheck.value = props.data.status
 	}
 })
 </script>
@@ -180,6 +182,7 @@ onMounted(() => {
 					bg-color="white"
 					label="เขียนที่"
 					hide-bottom-space
+					:readonly="!edit || statusCheck === 'NEW'"
 					:rules="[val => !!val || `${'เขียนที่'}`]"
 				/>
 
@@ -192,6 +195,7 @@ onMounted(() => {
 					week-start="0"
 					:enableTimePicker="false"
 					:locale="'th'"
+					:readonly="!edit || statusCheck === 'NEW'"
 					@update:model-value="formDataRehabilitation.leaveEndDate = null"
 				>
 					<template #year="{ year }">
@@ -209,6 +213,7 @@ onMounted(() => {
 							dense
 							lazy-rules
 							hide-bottom-space
+							:readonly="!edit || statusCheck === 'NEW'"
 							:model-value="formDataRehabilitation.leaveStartDate != null ? date2Thai(formDataRehabilitation.leaveStartDate) : null"
 							:label="`${'ลาตั้งแต่วันที่'}`"
 							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
@@ -229,7 +234,7 @@ onMounted(() => {
 					week-start="0"
 					:locale="'th'"
 					@update:model-value="FetchCheck()"
-					:readonly="!formDataRehabilitation.leaveStartDate"
+					:readonly="!formDataRehabilitation.leaveStartDate || statusCheck === 'NEW'"
 					:enableTimePicker="false"
 					:min-date="formDataRehabilitation.leaveStartDate"
 				>
@@ -248,7 +253,7 @@ onMounted(() => {
 							lazy-rules
 							bg-color="white"
 							hide-bottom-space
-							:readonly="!formDataRehabilitation.leaveStartDate"
+							:readonly="!formDataRehabilitation.leaveStartDate || statusCheck === 'NEW'"
 							:model-value="formDataRehabilitation.leaveEndDate != null ? date2Thai(formDataRehabilitation.leaveEndDate) : null"
 							:label="`${'ลาถึงวันที่'}`"
 							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
@@ -260,9 +265,18 @@ onMounted(() => {
 					</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"
+					:readonly="!edit || statusCheck === 'NEW'"
+					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+					bg-color="white"
+					dense
+					outlined
+					type="textarea"
+					label="รายละเอียด"
+				/>
 
-				<div class="col-12">
+				<div class="col-12" v-if="statusCheck != 'NEW'">
 					<!-- multiple -->
 					<q-file v-model="formDataRehabilitation.leaveDocument" @added="fileUploadDoc" multiple use-chips bg-color="white" dense outlined label="เอกสารประกอบ">
 						<template v-slot:prepend>
@@ -369,7 +383,7 @@ onMounted(() => {
 				<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-btn v-if="data && statusCheck != 'NEW'" 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>