From c8f1e9770c881069c45f6cd373310aad260c134a Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Thu, 11 Jan 2024 21:25:49 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=9F=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=A3=E0=B9=8C=E0=B8=A1=E0=B8=A5=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../05_leave/components/DialogDetail.vue      |  10 +-
 .../components/FormLeave/01_SickForm.vue      |  47 ++-
 .../components/FormLeave/03_Birth.vue         | 141 +++----
 .../FormLeave/04_HelpWifeBirthForm.vue        |  91 ++--
 .../components/FormLeave/05_VacationForm.vue  |  70 ++-
 .../FormLeave/06_OrdinationForm.vue           |  43 +-
 .../components/FormLeave/07_HajjForm.vue      |  39 +-
 .../components/FormLeave/08_MilitaryForm.vue  |  74 ++--
 .../components/FormLeave/09_StudyForm.vue     | 105 ++---
 .../components/FormLeave/10_TrainForm.vue     | 104 ++---
 .../FormLeave/11_WorkInternationalForm.vue    |  78 ++--
 .../FormLeave/12_FollowSpouseForm.vue         |  72 +++-
 .../FormLeave/13_RehabilitationForm.vue       |  78 +---
 src/modules/05_leave/components/ListView.vue  | 398 ++++++++++--------
 .../formDetail/06_OrdinationForm.vue          |   2 +-
 .../components/formDetail/07_HajjForm.vue     |   2 +-
 .../components/formDetail/08_MilitaryForm.vue |   2 +-
 .../{formStudy.vue => 09_StudyForm.vue}       |   0
 ...rmLeaveToTraining.vue => 10_TrainForm.vue} |   0
 ...ation.vue => 11_WorkInternationalForm.vue} |   6 +
 ...formSpouse.vue => 12_FollowSpouseForm.vue} |   0
 ...national.vue => 13_RehabilitationForm.vue} |   0
 22 files changed, 671 insertions(+), 691 deletions(-)
 rename src/modules/05_leave/components/formDetail/{formStudy.vue => 09_StudyForm.vue} (100%)
 rename src/modules/05_leave/components/formDetail/{formLeaveToTraining.vue => 10_TrainForm.vue} (100%)
 rename src/modules/05_leave/components/formDetail/{formVocationalRehabilitation.vue => 11_WorkInternationalForm.vue} (92%)
 rename src/modules/05_leave/components/formDetail/{formSpouse.vue => 12_FollowSpouseForm.vue} (100%)
 rename src/modules/05_leave/components/formDetail/{formLeaveToWorkInternational.vue => 13_RehabilitationForm.vue} (100%)

diff --git a/src/modules/05_leave/components/DialogDetail.vue b/src/modules/05_leave/components/DialogDetail.vue
index 8eb7ea8..7a6d122 100644
--- a/src/modules/05_leave/components/DialogDetail.vue
+++ b/src/modules/05_leave/components/DialogDetail.vue
@@ -14,11 +14,11 @@ import FormHoliday from "@/modules/05_leave/components/formDetail/05_VacationFor
 import FormUpasom from "@/modules/05_leave/components/formDetail/06_OrdinationForm.vue"
 import FormHajj from "@/modules/05_leave/components/formDetail/07_HajjForm.vue"
 import FormCheckSelect from "@/modules/05_leave/components/formDetail/08_MilitaryForm.vue"
-import FormStudy from "@/modules/05_leave/components/formDetail/formStudy.vue"
-import FormLeaveToTraining from "@/modules/05_leave/components/formDetail/formLeaveToTraining.vue"
-import FormLeaveToWorkInternational from "@/modules/05_leave/components/formDetail/formLeaveToWorkInternational.vue"
-import FormSpouse from "@/modules/05_leave/components/formDetail/formSpouse.vue"
-import FormVocationalRehabilitation from "@/modules/05_leave/components/formDetail/formVocationalRehabilitation.vue"
+import FormStudy from "@/modules/05_leave/components/formDetail/09_StudyForm.vue"
+import FormLeaveToTraining from "@/modules/05_leave/components/formDetail/10_TrainForm.vue"
+import FormLeaveToWorkInternational from "@/modules/05_leave/components/formDetail/11_WorkInternationalForm.vue"
+import FormSpouse from "@/modules/05_leave/components/formDetail/12_FollowSpouseForm.vue"
+import FormVocationalRehabilitation from "@/modules/05_leave/components/formDetail/13_RehabilitationForm.vue"
 import FormCancel from "@/modules/05_leave/components/formDetail/formCancel.vue"
 
 /** import stort*/
diff --git a/src/modules/05_leave/components/FormLeave/01_SickForm.vue b/src/modules/05_leave/components/FormLeave/01_SickForm.vue
index b0ccf80..8ec15bf 100644
--- a/src/modules/05_leave/components/FormLeave/01_SickForm.vue
+++ b/src/modules/05_leave/components/FormLeave/01_SickForm.vue
@@ -120,14 +120,22 @@ function onValidate() {
   if (hasError.every((result) => result === true)) {
     const formData = new FormData();
 
-    formDataSick.leaveDocument.forEach((file: File) => {
-      formData.append("leaveDocument", file);
-    });
+    if (formDataSick.leaveDocument.length > 0) {
+      formDataSick.leaveDocument.forEach((file: File) => {
+        formData.append("leaveDocument", file);
+      });
+    }
 
     formData.append("type", formDataSick.type);
     formData.append("leaveRange", formDataSick.leaveRange);
-    formData.append("leaveStartDate", dateToISO(formDataSick.leaveStartDate));
-    formData.append("leaveEndDate", dateToISO(formDataSick.leaveEndDate));
+    formData.append(
+      "leaveStartDate",
+      dateToISO(new Date(formDataSick.leaveStartDate))
+    );
+    formData.append(
+      "leaveEndDate",
+      dateToISO(new Date(formDataSick.leaveEndDate))
+    );
     formData.append("leaveWrote", formDataSick.leaveWrote);
     formData.append("leaveAddress", formDataSick.leaveAddress);
     formData.append("leaveNumber", formDataSick.leaveNumber);
@@ -187,6 +195,23 @@ const dateEndInputStyle = computed(() => {
 
 const statusCheck = ref<any>("");
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+watch(props.data, () => {
+  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.leaveRange = props.data.leaveRange;
+    leaveDocumentList.value = props.data.leaveDocument;
+    formDataSick.leaveAddress = props.data.leaveAddress;
+    statusCheck.value = props.data.status;
+    formDataSick.leaveDocument = [];
+  }
+});
+
 onMounted(() => {
   if (props.data) {
     formDataSick.leaveWrote = props.data.leaveWrote;
@@ -200,8 +225,6 @@ onMounted(() => {
     leaveDocumentList.value = props.data.leaveDocument;
     formDataSick.leaveAddress = props.data.leaveAddress;
     statusCheck.value = props.data.status;
-  } else {
-    statusCheck.value = "START";
   }
 });
 </script>
@@ -459,10 +482,7 @@ onMounted(() => {
         </div>
         <div class="col-12" v-if="data">
           <div class="col-12 col-md-12 col-sm-12">
-            <q-card bordered flat>
-              <!-- <div class="col-12">
-								<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ{{ leaveDocumentList }} </q-card>
-							</div> -->
+            <q-card>
               <q-list
                 separator
                 v-if="leaveDocumentList && leaveDocumentList.length > 0"
@@ -491,11 +511,6 @@ onMounted(() => {
                   </q-item-section>
                 </q-item>
               </q-list>
-              <div class="col-12" v-else>
-                <q-card class="q-pa-md" bordered>
-                  ไม่มีรายการเอกสารประกอบ
-                </q-card>
-              </div>
             </q-card>
           </div>
         </div>
diff --git a/src/modules/05_leave/components/FormLeave/03_Birth.vue b/src/modules/05_leave/components/FormLeave/03_Birth.vue
index 718939a..80ee732 100644
--- a/src/modules/05_leave/components/FormLeave/03_Birth.vue
+++ b/src/modules/05_leave/components/FormLeave/03_Birth.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, computed } from "vue";
+import { ref, reactive, onMounted, computed, watch } from "vue";
 import { useQuasar } from "quasar";
 import type { FormRef } from "@/modules/05_leave/interface/request/BirthForm";
 import { useCounterMixin } from "@/stores/mixin";
@@ -92,13 +92,21 @@ function onValidate() {
   }
   if (hasError.every((result) => result === true)) {
     const formData = new FormData();
-    formDataBirth.leaveDocument.forEach((file: File) => {
-      formData.append("leaveDocument", file);
-    });
+    if (formDataBirth.leaveDocument.length > 0) {
+      formDataBirth.leaveDocument.forEach((file: File) => {
+        formData.append("leaveDocument", file);
+      });
+    }
     // formData.append("leaveDocument", formDataBirth.leaveDocument);
     formData.append("type", formDataBirth.type);
-    formData.append("leaveStartDate", dateToISO(new Date(formDataBirth.leaveStartDate)));
-    formData.append("leaveEndDate", dateToISO(new Date(formDataBirth.leaveEndDate)));
+    formData.append(
+      "leaveStartDate",
+      dateToISO(new Date(formDataBirth.leaveStartDate))
+    );
+    formData.append(
+      "leaveEndDate",
+      dateToISO(new Date(formDataBirth.leaveEndDate))
+    );
     formData.append("leaveWrote", formDataBirth.leaveWrote);
     formData.append("leaveAddress", formDataBirth.leaveAddress);
     formData.append("leaveNumber", formDataBirth.leaveNumber);
@@ -137,6 +145,21 @@ const dateEndInputStyle = computed(() => {
 const leaveDocumentList = ref<any>();
 const statusCheck = ref<any>("");
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+watch(props.data, () => {
+  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;
+    statusCheck.value = props.data.status;
+    formDataBirth.leaveDocument = [];
+  }
+});
+
 onMounted(() => {
   if (props.data) {
     formDataBirth.leaveWrote = props.data.leaveWrote;
@@ -376,85 +399,39 @@ onMounted(() => {
             </q-file>
           </div>
         </div>
-        <!-- <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
-              v-if="leaveDocumentList && leaveDocumentList.length > 0"
-            >
-              <q-item
-                v-for="(document, index) in leaveDocumentList"
-                :key="index"
-                class="q-my-xs"
+          <div class="col-12 col-md-12 col-sm-12">
+            <q-card>
+              <q-list
+                separator
+                v-if="leaveDocumentList && leaveDocumentList.length > 0"
               >
-                <q-item-section>
-                  <q-item-label class="row items-baseline">
-                    <div class="col">
-                      {{ "เอกสารแนบที่ " + (index + 1) }}
-                    </div>
-                    <q-btn
-                      :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>
-            <div class="col-12" v-else>
-              <q-card class="q-pa-md" bordered>
-                ไม่มีรายการเอกสารประกอบ
-              </q-card>
-            </div>
-          </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>
+                <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
+                        :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>
-          <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>
diff --git a/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue b/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
index c347cc6..459c4eb 100644
--- a/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
+++ b/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, computed } from "vue";
+import { ref, reactive, onMounted, computed, watch } from "vue";
 import type {
   FormData,
   FormRef,
@@ -107,10 +107,11 @@ function onValidate() {
   }
   if (hasError.every((result) => result === true)) {
     const formData = new FormData();
-    formDataHelpWife.leaveDocument.forEach((file: File) => {
-      formData.append("leaveDocument", file);
-    });
-    formData.append("leaveDocument", formDataHelpWife.leaveDocument);
+    if (formDataHelpWife.leaveDocument.length > 0) {
+      formDataHelpWife.leaveDocument.forEach((file: File) => {
+        formData.append("leaveDocument", file);
+      });
+    }
     formData.append("type", formDataHelpWife.type);
     formData.append(
       "leaveStartDate",
@@ -127,7 +128,7 @@ function onValidate() {
     formData.append("wifeDayName", formDataHelpWife.wifeDayName);
     formData.append(
       "wifeDayDateBorn",
-      dateToISO(formDataHelpWife.wifeDayDateBorn)
+      dateToISO(new Date(formDataHelpWife.wifeDayDateBorn))
     );
     props.onSubmit(formData, isLeave.value);
   }
@@ -174,6 +175,24 @@ const dateEndInputStyle = computed(() => {
 const leaveDocumentList = ref<any>();
 const statusCheck = ref<any>("");
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+watch(props.data, () => {
+  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 = [];
+    leaveDocumentList.value = props.data.leaveDocument;
+    statusCheck.value = props.data.status;
+  }
+});
+
 onMounted(() => {
   if (props.data) {
     // console.log("data==>", props.data)
@@ -188,7 +207,6 @@ onMounted(() => {
     formDataHelpWife.leaveDetail = props.data.leaveDetail;
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
-    // formDataHelpWife.leaveDocument = props.data.leaveDocument;
   }
 });
 </script>
@@ -447,7 +465,6 @@ onMounted(() => {
         />
         <div class="full-width" v-if="statusCheck != 'NEW'">
           <div class="q-col-gutter-sm row">
-            <!-- multiple -->
             <q-file
               bg-color="white"
               ref="leaveDocumentRef"
@@ -458,6 +475,7 @@ onMounted(() => {
               outlined
               use-chips
               class="q-pl-sm col-12"
+              multiple
             >
               <template v-slot:prepend>
                 <q-icon name="attach_file" color="primary" />
@@ -467,10 +485,7 @@ onMounted(() => {
         </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-card>
               <q-list
                 separator
                 v-if="leaveDocumentList && leaveDocumentList.length > 0"
@@ -499,64 +514,14 @@ onMounted(() => {
                   </q-item-section>
                 </q-item>
               </q-list>
-              <div class="col-12" v-else>
-                <q-card class="q-pa-md" bordered>
-                  ไม่มีรายการเอกสารประกอบ
-                </q-card>
-              </div>
             </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>
 
     <q-separator class="q-mt-sm" />
+
     <div class="row col-12 q-pt-md">
       <q-space />
       <q-btn
diff --git a/src/modules/05_leave/components/FormLeave/05_VacationForm.vue b/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
index bca0c20..59bb164 100644
--- a/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, computed } from "vue";
+import { ref, reactive, onMounted, computed, watch } from "vue";
 import type {
   FormData,
   FormRef,
@@ -103,9 +103,11 @@ function onValidate() {
   }
   if (hasError.every((result) => result === true)) {
     const formData = new FormData();
-    formDataVacation.leaveDocument.forEach((file: File) => {
-      formData.append("leaveDocument", file);
-    });
+    if (formDataVacation.leaveDocument.length > 0) {
+      formDataVacation.leaveDocument.forEach((file: File) => {
+        formData.append("leaveDocument", file);
+      });
+    }
     // formData.append("leaveDocument", formDataVacation.leaveDocument);
     formData.append("type", formDataVacation.type);
     formData.append("leaveRange", formDataVacation.leaveRange);
@@ -113,7 +115,10 @@ function onValidate() {
       "leaveStartDate",
       dateToISO(new Date(formDataVacation.leaveStartDate))
     );
-    formData.append("leaveEndDate", dateToISO(new Date(formDataVacation.leaveEndDate)));
+    formData.append(
+      "leaveEndDate",
+      dateToISO(new Date(formDataVacation.leaveEndDate))
+    );
     formData.append("leaveWrote", formDataVacation.leaveWrote);
     formData.append("leaveAddress", formDataVacation.leaveAddress);
     formData.append("leaveNumber", formDataVacation.leaveNumber);
@@ -180,6 +185,25 @@ const dateEndInputStyle = computed(() => {
 const leaveDocumentList = ref<any>();
 const statusCheck = ref<any>("");
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+watch(props.data, () => {
+  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;
+    statusCheck.value = props.data.status;
+    formDataVacation.leaveRange = props.data.leaveRange;
+    formDataVacation.leaveDocument = [];
+  }
+});
+
 onMounted(() => {
   if (props.data) {
     // console.log("data==>", props.data)
@@ -456,17 +480,11 @@ onMounted(() => {
                 <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-card>
               <q-list
                 separator
                 v-if="leaveDocumentList && leaveDocumentList.length > 0"
@@ -495,37 +513,9 @@ onMounted(() => {
                   </q-item-section>
                 </q-item>
               </q-list>
-              <div class="col-12" v-else>
-                <q-card class="q-pa-md" bordered>
-                  ไม่มีรายการเอกสารประกอบ
-                </q-card>
-              </div>
             </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>
 
diff --git a/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue b/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
index 476f568..5296ed6 100644
--- a/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, ref, onMounted, computed } from "vue";
+import { reactive, ref, onMounted, computed, watch } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 import type { OrdinationForm } from "@/modules/05_leave/interface/request/AddAbsence";
@@ -73,7 +73,7 @@ const formDataOrdination = reactive<any>({
   ordainDayBuddhistLentAddress: "",
   ordainDayStatus: true,
   leaveDocument: [],
-  leaveDetail: ""
+  leaveDetail: "",
 });
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
@@ -204,6 +204,30 @@ const dateEndInputStyle = computed(() => {
 const leaveDocumentList = ref<any>();
 const statusCheck = ref<any>("");
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+watch(props.data, () => {
+  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;
+    statusCheck.value = props.data.status;
+    formDataOrdination.leaveDocument = [];
+  }
+});
+
 onMounted(() => {
   if (props.data) {
     formDataOrdination.leaveWrote = props.data.leaveWrote;
@@ -638,17 +662,11 @@ onMounted(() => {
                 <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-card>
               <q-list
                 separator
                 v-if="leaveDocumentList && leaveDocumentList.length > 0"
@@ -661,7 +679,7 @@ onMounted(() => {
                   <q-item-section>
                     <q-item-label class="row items-baseline">
                       <div class="col">
-                        {{ "เอกสารแนบฉบับที่ " + (index + 1) }}
+                        {{ "เอกสารแนบที่ " + (index + 1) }}
                       </div>
                       <q-btn
                         :href="document"
@@ -677,11 +695,6 @@ onMounted(() => {
                   </q-item-section>
                 </q-item>
               </q-list>
-              <div class="col-12" v-else>
-                <q-card class="q-pa-md" bordered>
-                  ไม่มีรายการเอกสารประกอบ
-                </q-card>
-              </div>
             </q-card>
           </div>
         </div>
diff --git a/src/modules/05_leave/components/FormLeave/07_HajjForm.vue b/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
index 957c7d6..61e13db 100644
--- a/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
+++ b/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, ref, onMounted, computed } from "vue";
+import { reactive, ref, onMounted, computed, watch } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 import type { HajiForm } from "@/modules/05_leave/interface/request/AddAbsence";
@@ -93,9 +93,11 @@ function onValidate() {
   }
   if (hasError.every((result) => result === true)) {
     const formData = new FormData();
-    formDataHaji.leaveDocument.forEach((file: File) => {
-      formData.append("leaveDocument", file);
-    });
+    if (formDataHaji.leaveDocument) {
+      formDataHaji.leaveDocument.forEach((file: File) => {
+        formData.append("leaveDocument", file);
+      });
+    }
     // formData.append("leaveDocument", formDataHaji.leaveDocument);
     formData.append("type", formDataHaji.type);
     formData.append(
@@ -154,6 +156,21 @@ const dateEndInputStyle = computed(() => {
 const leaveDocumentList = ref<any>();
 const statusCheck = ref<any>("");
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+watch(props.data, () => {
+  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;
+    statusCheck.value = props.data.status;
+    formDataHaji.leaveDocument = [];
+  }
+});
+
 onMounted(() => {
   if (props.data) {
     formDataHaji.leaveWrote = props.data.leaveWrote;
@@ -410,17 +427,11 @@ onMounted(() => {
                 <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-card>
               <q-list
                 separator
                 v-if="leaveDocumentList && leaveDocumentList.length > 0"
@@ -449,12 +460,6 @@ onMounted(() => {
                   </q-item-section>
                 </q-item>
               </q-list>
-
-              <div class="col-12" v-else>
-                <q-card class="q-pa-md" bordered>
-                  ไม่มีรายการเอกสารประกอบ
-                </q-card>
-              </div>
             </q-card>
           </div>
         </div>
diff --git a/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue b/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
index d3790e7..9793e9a 100644
--- a/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
+++ b/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, ref, onMounted, computed } from "vue";
+import { reactive, ref, onMounted, computed, watch } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 import type { MilitaryForm } from "@/modules/05_leave/interface/request/AddAbsence";
@@ -104,16 +104,21 @@ function onValidate() {
   }
   if (hasError.every((result) => result === true)) {
     const formData = new FormData();
-    formDataMilitary.leaveDocument.forEach((file: File) => {
-      formData.append("leaveDocument", file);
-    });
+    if (formDataMilitary.leaveDocument) {
+      formDataMilitary.leaveDocument.forEach((file: File) => {
+        formData.append("leaveDocument", file);
+      });
+    }
     // formData.append("leaveDocument", formDataMilitary.leaveDocument);
     formData.append("type", formDataMilitary.type);
     formData.append(
       "leaveStartDate",
       dateToISO(new Date(formDataMilitary.leaveStartDate))
     );
-    formData.append("leaveEndDate", dateToISO(new Date(formDataMilitary.leaveEndDate)));
+    formData.append(
+      "leaveEndDate",
+      dateToISO(new Date(formDataMilitary.leaveEndDate))
+    );
     formData.append("absentDaySummon", formDataMilitary.absentDaySummon);
     formData.append("absentDayLocation", formDataMilitary.absentDayLocation);
     formData.append(
@@ -169,6 +174,24 @@ const dateEndInputStyle = computed(() => {
 const leaveDocumentList = ref<any>();
 const statusCheck = ref<any>("");
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+watch(props.data, () => {
+  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;
+    statusCheck.value = props.data.status;
+    formDataMilitary.leaveDocument = [];
+  }
+});
+
 onMounted(() => {
   if (props.data) {
     formDataMilitary.leaveWrote = props.data.leaveWrote;
@@ -461,18 +484,12 @@ onMounted(() => {
               <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 q-mt-sm" 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-card>
                 <q-list
-                  separator
                   v-if="leaveDocumentList && leaveDocumentList.length > 0"
+                  separator
                 >
                   <q-item
                     v-for="(document, index) in leaveDocumentList"
@@ -498,39 +515,10 @@ onMounted(() => {
                     </q-item-section>
                   </q-item>
                 </q-list>
-                <div class="col-12" v-else>
-                  <q-card class="q-pa-md" bordered>
-                    ไม่มีรายการเอกสารประกอบ
-                  </q-card>
-                </div>
               </q-card>
             </div>
           </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>
     <q-separator class="q-mt-sm" />
diff --git a/src/modules/05_leave/components/FormLeave/09_StudyForm.vue b/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
index 6a678f8..9875638 100644
--- a/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
+++ b/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, ref, computed, onMounted } from "vue";
+import { reactive, ref, computed, onMounted, watch } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 import type { studyDaySubjectForm } from "@/modules/05_leave/interface/request/AddAbsence";
@@ -74,7 +74,7 @@ const formDataStudy = reactive<any>({
   studyDayUniversityName: "", //
   studyDayDegreeLevel: "", //
   studyDaySubject: "", //
-  leaveDocument: "", //
+  leaveDocument: [], //
   leaveDetail: "",
   leaveTotal: "",
 });
@@ -119,19 +119,27 @@ function onValidate() {
   }
   if (hasError.every((result) => result === true)) {
     const formData = new FormData();
-    formDataStudy.leaveDocument.forEach((file: File) => {
-      formData.append("leaveDocument", file);
-    });
+    if (formDataStudy.leaveDocument) {
+      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(
+      "leaveStartDate",
+      dateToISO(new Date(formDataStudy.leaveStartDate))
+    );
+    formData.append(
+      "leaveEndDate",
+      dateToISO(new Date(formDataStudy.leaveEndDate))
+    );
     formData.append("studyDaySubject", formDataStudy.studyDaySubject);
     formData.append("studyDayDegreeLevel", formDataStudy.studyDayDegreeLevel);
-    formData.append(
-      "leavegovernmentDate",
-      dateToISO(formDataStudy.leavegovernmentDate)
-    );
+    // formData.append(
+    //   "leavegovernmentDate",
+    //   dateToISO(new Date(formDataStudy.leavegovernmentDate))
+    // );
     formData.append(
       "studyDayUniversityName",
       formDataStudy.studyDayUniversityName
@@ -165,7 +173,7 @@ async function fetchCheck() {
     .then((res: any) => {
       const data = res.data.result;
       isLeave.value = data.isLeave;
-    //   formDataStudy.leaveTotal = formDataStudy.leaveStartDatee;
+      //   formDataStudy.leaveTotal = formDataStudy.leaveStartDatee;
     })
     .catch((e: any) => {
       messageError($q, e);
@@ -186,6 +194,36 @@ function updateLeaveTotal() {
 const leaveDocumentList = ref<any>();
 const statusCheck = ref<any>("");
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+watch(props.data, 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;
+    formDataStudy.leaveDocument = [];
+    leaveDocumentList.value = props.data.leaveDocument;
+    const leaveTotal = await calculateDurationYmd(
+      props.data.leaveStartDate,
+      props.data.leaveEndDate
+    );
+    formDataStudy.leaveTotal = leaveTotal;
+    statusCheck.value = props.data.status;
+  }
+});
+
 onMounted(async () => {
   if (props.data) {
     formDataStudy.leaveWrote = props.data.leaveWrote;
@@ -588,7 +626,6 @@ onMounted(async () => {
         />
 
         <div class="col-12" v-if="statusCheck != 'NEW'">
-          <!-- multiple -->
           <q-file
             v-model="formDataStudy.leaveDocument"
             bg-color="white"
@@ -603,15 +640,9 @@ onMounted(async () => {
               <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 q-mt-sm" 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-card>
                 <q-list
                   separator
                   v-if="leaveDocumentList && leaveDocumentList.length > 0"
@@ -627,7 +658,6 @@ onMounted(async () => {
                           {{ "เอกสารแนบที่ " + (index + 1) }}
                         </div>
                         <q-btn
-                          class="col-6"
                           :href="document"
                           target="_blank"
                           outline
@@ -641,42 +671,15 @@ onMounted(async () => {
                     </q-item-section>
                   </q-item>
                 </q-list>
-                <div class="col-12" v-else>
-                  <q-card class="q-pa-md" bordered>
-                    ไม่มีรายการเอกสารประกอบ
-                  </q-card>
-                </div>
               </q-card>
             </div>
           </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>
+
     <q-separator class="q-mt-sm" />
+
     <div class="row col-12 q-pt-md">
       <q-space />
       <q-btn
diff --git a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
index 11165fc..41428b5 100644
--- a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
+++ b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, ref, computed, onMounted } from "vue";
+import { reactive, ref, computed, onMounted, watch } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import type { TrainForm } from "@/modules/05_leave/interface/request/AddAbsence";
 import { useQuasar } from "quasar";
@@ -58,7 +58,7 @@ const formDataTrain = reactive<any>({
   studyDayCountry: "",
   studyDayTrainingSubject: "",
   studyDayTrainingName: "",
-  leaveDocument: "",
+  leaveDocument: [],
   leaveDetail: "",
 });
 
@@ -114,19 +114,27 @@ function onValidate() {
   }
   if (hasError.every((result) => result === true)) {
     const formData = new FormData();
-    formDataTrain.leaveDocument.forEach((file: File) => {
-      formData.append("leaveDocument", file);
-    });
+    if (formDataTrain.leaveDocument) {
+      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));
+      "leaveStartDate",
+      dateToISO(new Date(formDataTrain.leaveStartDate))
+    ); //
+    formData.append(
+      "leaveEndDate",
+      dateToISO(new Date(formDataTrain.leaveEndDate))
+    ); //
+    formData.append("studyDayCountry", formDataTrain.studyDayCountry);
+    // formData.append(
+    //   "leavegovernmentDate",
+    //   dateToISO(formDataTrain.leavegovernmentDate)
+    // );
+    // formData.append("leavebirthDate", dateToISO(new Date(formDataTrain.leavebirthDate)));
     formData.append("studyDayTrainingName", formDataTrain.studyDayTrainingName);
     formData.append(
       "studyDayTrainingSubject",
@@ -194,6 +202,34 @@ const dateEndInputStyle = computed(() => {
 const leaveDocumentList = ref<any>();
 const statusCheck = ref<any>("");
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+watch(props.data, 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 = [];
+    const leaveTotal = await calculateDurationYmd(
+      props.data.leaveStartDate,
+      props.data.leaveEndDate
+    );
+    formDataTrain.leaveTotal = leaveTotal;
+    leaveDocumentList.value = props.data.leaveDocument;
+    statusCheck.value = props.data.status;
+  }
+});
+
 onMounted(async () => {
   if (props.data) {
     formDataTrain.leaveWrote = props.data.leaveWrote;
@@ -580,28 +616,22 @@ onMounted(async () => {
         />
 
         <div class="col-12" v-if="statusCheck != 'NEW'">
-          <!-- multiple -->
           <q-file
             v-model="formDataTrain.leaveDocument"
             bg-color="white"
             multiple
             dense
             outlined
+            use-chips
             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 q-mt-sm" 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-card>
                 <q-list
                   separator
                   v-if="leaveDocumentList && leaveDocumentList.length > 0"
@@ -617,7 +647,6 @@ onMounted(async () => {
                           {{ "เอกสารแนบที่ " + (index + 1) }}
                         </div>
                         <q-btn
-                          class="col-6"
                           :href="document"
                           target="_blank"
                           outline
@@ -631,42 +660,15 @@ onMounted(async () => {
                     </q-item-section>
                   </q-item>
                 </q-list>
-                <div class="col-12" v-else>
-                  <q-card class="q-pa-md" bordered>
-                    ไม่มีรายการเอกสารประกอบ
-                  </q-card>
-                </div>
               </q-card>
             </div>
           </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>
+
     <q-separator class="q-mt-sm" />
+
     <div class="row col-12 q-pt-md">
       <q-space />
       <q-btn
diff --git a/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue b/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
index 332c3b3..a694b71 100644
--- a/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
+++ b/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
@@ -50,8 +50,8 @@ const formDataWorkInternational = reactive<any>({
   leaveStartDate: null,
   leaveEndDate: null,
   leaveDetail: "",
-  leaveDocument: null,
-  leaveDraftDocument: [],
+  leaveDocument: [],
+  leaveDraftDocument: null,
 });
 
 /** ตัวแปร ref สำหรับแสดง validate */
@@ -81,7 +81,7 @@ const fileUploadDoc = async (files: any) => {
 };
 
 /** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
-function onValidate() {
+async function onValidate() {
   const hasError = [];
   for (const key in FormRef) {
     if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
@@ -96,7 +96,7 @@ function onValidate() {
   if (hasError.every((result) => result === true)) {
     const formData = new FormData();
 
-    if (formDataWorkInternational.leaveDocument) {
+    if (formDataWorkInternational.leaveDocument.length > 0) {
       formDataWorkInternational.leaveDocument.forEach((file: File) => {
         formData.append("leaveDocument", file);
       });
@@ -121,7 +121,7 @@ function onValidate() {
     ); //
     formData.append("leaveWrote", formDataWorkInternational.leaveWrote); //
     formData.append("leaveDetail", formDataWorkInternational.leaveDetail); //
-    props.onSubmit(formData, isLeave.value);
+    await props.onSubmit(formData, isLeave.value);
   }
 }
 
@@ -172,6 +172,22 @@ const leaveDocumentList = ref<any>();
 const leaveDraftDocument = ref<string>();
 const statusCheck = ref<any>("");
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+watch(props, () => {
+  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;
+    leaveDraftDocument.value = props.data.leaveDraftDocument;
+    leaveDocumentList.value = props.data.leaveDocument;
+    statusCheck.value = props.data.status;
+    formDataWorkInternational.leaveDraftDocument = null;
+    formDataWorkInternational.leaveDocument = [];
+  }
+});
+
 onMounted(() => {
   if (props.data) {
     formDataWorkInternational.leaveWrote = props.data.leaveWrote;
@@ -306,11 +322,7 @@ onMounted(() => {
               :input-class="!isLeave ? dateEndInputStyle : ''"
             >
               <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  color="primary"
-                >
+                <q-icon name="event" class="cursor-pointer" color="primary">
                 </q-icon>
               </template>
 
@@ -368,16 +380,13 @@ onMounted(() => {
             </q-file>
           </div>
         </div>
-        <!-- <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-card>
+              <q-list
+                v-if="leaveDocumentList && leaveDocumentList.length > 0"
+                separator
+              >
                 <q-item
                   v-for="(document, index) in leaveDocumentList"
                   :key="index"
@@ -389,7 +398,6 @@ onMounted(() => {
                         {{ "เอกสารแนบที่ " + (index + 1) }}
                       </div>
                       <q-btn
-                        class="col-6"
                         :href="document"
                         target="_blank"
                         outline
@@ -406,38 +414,6 @@ onMounted(() => {
             </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
-              v-if="leaveDocumentList && leaveDocumentList.length > 0"
-            >
-              <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>
-            <div class="col-12" v-else>
-              <q-card class="q-pa-md" bordered>
-                ไม่มีรายการเอกสารประกอบ
-              </q-card>
-            </div>
-          </q-card>
-        </div>
       </div>
     </q-card>
 
diff --git a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
index 0752a52..58ab580 100644
--- a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted } from "vue";
+import { ref, reactive, computed, onMounted, watch } from "vue";
 import type {
   FormData,
   FormRef,
@@ -127,26 +127,28 @@ function onValidate() {
   }
   if (hasError.every((result) => result === true)) {
     const formData = new FormData();
-    formDataFollowSpouse.leaveDocument.forEach((file: File) => {
-      formData.append("leaveDocument", file);
-    });
+    if (formDataFollowSpouse.leaveDocument.length > 0) {
+      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)
+      dateToISO(new Date(formDataFollowSpouse.leaveStartDate))
     ); //
     formData.append(
       "leaveEndDate",
-      dateToISO(formDataFollowSpouse.leaveEndDate)
+      dateToISO(new Date(formDataFollowSpouse.leaveEndDate))
     ); //
     formData.append(
       "coupleDayStartDateHistory",
-      dateToISO(formDataFollowSpouse.coupleDayStartDateHistory)
+      dateToISO(new Date(formDataFollowSpouse.coupleDayStartDateHistory))
     ); //
     formData.append(
       "coupleDayEndDateHistory",
-      dateToISO(formDataFollowSpouse.coupleDayEndDateHistory)
+      dateToISO(new Date(formDataFollowSpouse.coupleDayEndDateHistory))
     ); //
     formData.append("leaveWrote", formDataFollowSpouse.leaveWrote); //
     formData.append("leaveDetail", formDataFollowSpouse.leaveDetail); //
@@ -227,6 +229,46 @@ const dateEndInputStyle = computed(() => {
 const leaveDocumentList = ref<any>();
 const statusCheck = ref<any>("");
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+watch(props.data, 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;
+    leaveDocumentList.value = props.data.leaveDocument;
+
+    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;
+    formDataFollowSpouse.leaveDocument = [];
+  }
+});
+
 onMounted(async () => {
   if (props.data) {
     formDataFollowSpouse.leaveWrote = props.data.leaveWrote;
@@ -660,15 +702,9 @@ onMounted(async () => {
             </q-file>
           </div>
         </div>
-        <!-- <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-card>
               <q-list
                 separator
                 v-if="leaveDocumentList && leaveDocumentList.length > 0"
@@ -684,7 +720,6 @@ onMounted(async () => {
                         {{ "เอกสารแนบที่ " + (index + 1) }}
                       </div>
                       <q-btn
-                        class="col-6"
                         :href="document"
                         target="_blank"
                         outline
@@ -698,11 +733,6 @@ onMounted(async () => {
                   </q-item-section>
                 </q-item>
               </q-list>
-              <div class="col-12" v-else>
-                <q-card class="q-pa-md" bordered>
-                  ไม่มีรายการเอกสารประกอบ
-                </q-card>
-              </div>
             </q-card>
           </div>
         </div>
diff --git a/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue b/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
index cdec7f5..37e73fe 100644
--- a/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, ref, onMounted, computed } from "vue";
+import { reactive, ref, onMounted, computed, watch } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 import type { RehabilitationForm } from "@/modules/05_leave/interface/request/AddAbsence";
@@ -55,7 +55,7 @@ const formDataRehabilitation = reactive<any>({
   leaveWrote: "",
   leaveStartDate: null,
   leaveEndDate: null,
-  leaveDocument: "",
+  leaveDocument: [],
   leaveDetail: "",
   leaveDraftDocument: null,
 });
@@ -82,7 +82,7 @@ function onValidate() {
   if (hasError.every((result) => result === true)) {
     const formData = new FormData();
 
-    if (formDataRehabilitation.leaveDocument) {
+    if (formDataRehabilitation.leaveDocument.length > 0) {
       formDataRehabilitation.leaveDocument.forEach((file: File) => {
         formData.append("leaveDocument", file);
       });
@@ -99,12 +99,12 @@ function onValidate() {
     formData.append("type", formDataRehabilitation.type); //
     formData.append(
       "leaveStartDate",
-      dateToISO(formDataRehabilitation.leaveStartDate)
+      dateToISO(new Date(formDataRehabilitation.leaveStartDate))
     ); //
     formData.append(
       "leaveEndDate",
-      dateToISO(formDataRehabilitation.leaveEndDate)
-    ); //
+      dateToISO(new Date(formDataRehabilitation.leaveEndDate))
+    );
     formData.append("leaveWrote", formDataRehabilitation.leaveWrote); //
     formData.append("leaveDetail", formDataRehabilitation.leaveDetail); //
     props.onSubmit(formData, isLeave.value);
@@ -167,6 +167,20 @@ const leaveDocumentList = ref<any>();
 const leaveDraftDocument = ref<string>();
 const statusCheck = ref<any>("");
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+watch(props.data, () => {
+  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;
+    leaveDraftDocument.value = props.data.leaveDraftDocument;
+    leaveDocumentList.value = props.data.leaveDocument;
+    formDataRehabilitation.leaveDraftDocument = null;
+    formDataRehabilitation.leaveDocument = [];
+    statusCheck.value = props.data.status;
+  }
+});
+
 onMounted(() => {
   if (props.data) {
     formDataRehabilitation.leaveWrote = props.data.leaveWrote;
@@ -325,7 +339,6 @@ onMounted(() => {
         />
 
         <div class="col-12" v-if="statusCheck != 'NEW'">
-          <!-- multiple -->
           <q-file
             v-model="formDataRehabilitation.leaveDocument"
             @added="fileUploadDoc"
@@ -340,15 +353,9 @@ onMounted(() => {
               <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 q-mt-sm" 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-card>
                 <q-list separator>
                   <q-item
                     v-for="(document, index) in leaveDocumentList"
@@ -361,7 +368,6 @@ onMounted(() => {
                           {{ "เอกสารแนบที่ " + (index + 1) }}
                         </div>
                         <q-btn
-                          class="col-6"
                           :href="document"
                           target="_blank"
                           outline
@@ -379,38 +385,6 @@ onMounted(() => {
             </div>
           </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
-              v-if="leaveDocumentList && leaveDocumentList.length > 0"
-            >
-              <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>
-            <div class="col-12" v-else>
-              <q-card class="q-pa-md" bordered>
-                ไม่มีรายการเอกสารประกอบ
-              </q-card>
-            </div>
-          </q-card>
-        </div>
       </div>
     </q-card>
 
@@ -461,9 +435,6 @@ onMounted(() => {
 
           <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"
@@ -473,11 +444,6 @@ onMounted(() => {
               />
             </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>
diff --git a/src/modules/05_leave/components/ListView.vue b/src/modules/05_leave/components/ListView.vue
index b7ecfbf..6943c82 100644
--- a/src/modules/05_leave/components/ListView.vue
+++ b/src/modules/05_leave/components/ListView.vue
@@ -1,82 +1,83 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue"
-import { useQuasar } from "quasar"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRouter, useRoute } from "vue-router"
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter, useRoute } from "vue-router";
 
 /** import type*/
-import type { LeaveType } from "@/modules/05_leave/interface/response/leave"
+import type { LeaveType } from "@/modules/05_leave/interface/response/leave";
 
 /** import componest*/
-import DialogDetail from "@/modules/05_leave/components/DialogDetail.vue"
-import Table from "@/modules/05_leave/components/Table.vue"
+import DialogDetail from "@/modules/05_leave/components/DialogDetail.vue";
+import Table from "@/modules/05_leave/components/Table.vue";
 
 /** import stort*/
-import { useCounterMixin } from "@/stores/mixin"
-import { useLeaveStore } from "@/modules/05_leave/store"
+import { useCounterMixin } from "@/stores/mixin";
+import { useLeaveStore } from "@/modules/05_leave/store";
 
-const mixin = useCounterMixin()
-const { showLoader, hideLoader, messageError, date2Thai, monthYear2Thai } = mixin
-const LeaveData = useLeaveStore()
-const router = useRouter()
-const route = useRoute()
-const $q = useQuasar()
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai, monthYear2Thai } =
+  mixin;
+const LeaveData = useLeaveStore();
+const router = useRouter();
+const route = useRoute();
+const $q = useQuasar();
 
 /** filter */
-const year = ref<number>(new Date().getFullYear())
-const type = ref<string>("00000000-0000-0000-0000-000000000000")
-const status = ref<string>("ALL")
-const filter = ref<string>("")
+const year = ref<number>(new Date().getFullYear());
+const type = ref<string>("00000000-0000-0000-0000-000000000000");
+const status = ref<string>("ALL");
+const filter = ref<string>("");
 
 /** pagination*/
-const maxPage = ref<number>(1)
-const page = ref<number>(1)
-const pageSize = ref<number>(10)
+const maxPage = ref<number>(1);
+const page = ref<number>(1);
+const pageSize = ref<number>(10);
 
 /** function เรียกข้อมูลการลา*/
 async function fetchDataTable() {
-	showLoader()
-	const body = {
-		year: year.value, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
-		type: type.value, //*Id ประเภทการลา
-		status: status.value, //*สถานะการของลา
-		page: page.value.toString(), //*หน้า
-		pageSize: pageSize.value.toString(), //*จำนวนแถวต่อหน้า
-		keyword: filter.value, //keyword ค้นหา
-	}
-	await http
-		.post(config.API.leaveTableList(), body)
-		.then(res => {
-			const data = res.data.result.data
-			LeaveData.fetchListLeave(data)
-			maxPage.value = Math.ceil(res.data.result.total / pageSize.value)
-		})
-		.catch(err => {
-			messageError($q, err)
-		})
-		.finally(() => {
-			hideLoader()
-		})
+  showLoader();
+  const body = {
+    year: year.value, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
+    type: type.value, //*Id ประเภทการลา
+    status: status.value, //*สถานะการของลา
+    page: page.value.toString(), //*หน้า
+    pageSize: pageSize.value.toString(), //*จำนวนแถวต่อหน้า
+    keyword: filter.value, //keyword ค้นหา
+  };
+  await http
+    .post(config.API.leaveTableList(), body)
+    .then((res) => {
+      const data = res.data.result.data;
+      LeaveData.fetchListLeave(data);
+      maxPage.value = Math.ceil(res.data.result.total / pageSize.value);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
-const leaveType = ref<LeaveType[]>()
+const leaveType = ref<LeaveType[]>();
 /** function เรียกประเภทการลา */
 async function fectOptionType() {
-	await http
-		.get(config.API.leaveType())
-		.then(async res => {
-			leaveType.value = res.data.result
-			LeaveData.fetchLeaveType(res.data.result)
-		})
-		.catch(err => {
-			messageError($q, err)
-		})
+  await http
+    .get(config.API.leaveType())
+    .then(async (res) => {
+      leaveType.value = res.data.result;
+      LeaveData.fetchLeaveType(res.data.result);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
 }
 
-const modal = ref<boolean>(false)
-const leaveId = ref<string>("")
-const leaveStatus = ref<string>("")
+const modal = ref<boolean>(false);
+const leaveId = ref<string>("");
+const leaveStatus = ref<string>("");
 
 /**
  * function openPopupDateail
@@ -84,18 +85,18 @@ const leaveStatus = ref<string>("")
  * @param status การลา
  */
 const onClickView = async (id: string, status: string) => {
-	modal.value = true
-	leaveId.value = id
-	leaveStatus.value = status
-}
+  modal.value = true;
+  leaveId.value = id;
+  leaveStatus.value = status;
+};
 
 const onClickEdit = async (id: string) => {
-	router.push(`/leave/edit/${id}`)
-}
+  router.push(`/leave/edit/${id}`);
+};
 
 /** function closePopup*/
 async function onClickClose() {
-	modal.value = false
+  modal.value = false;
 }
 
 /**
@@ -106,13 +107,13 @@ async function onClickClose() {
  * @param k คำค้นหา
  */
 async function updateFilterTable(y: number, t: string, s: string, k: string) {
-	if (t && s) {
-		year.value = await y
-		type.value = await t
-		status.value = await s
-		filter.value = await k
-		await fetchDataTable()
-	}
+  if (t && s) {
+    year.value = await y;
+    type.value = await t;
+    status.value = await s;
+    filter.value = await k;
+    await fetchDataTable();
+  }
 }
 
 /**
@@ -121,121 +122,164 @@ async function updateFilterTable(y: number, t: string, s: string, k: string) {
  * @param ps แถวต่อหน้า
  */
 async function updatePagination(p: number, ps: number) {
-	;(page.value = await p), (pageSize.value = await ps)
-	await fetchDataTable()
+  (page.value = await p), (pageSize.value = await ps);
+  await fetchDataTable();
 }
 
 /**
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
 onMounted(async () => {
-	await fetchDataTable()
-	await fectOptionType()
-})
+  await fetchDataTable();
+  await fectOptionType();
+});
 </script>
 <template>
-	<Table
-		:rows="LeaveData.rows"
-		:columns="LeaveData.columns"
-		:visible-columns="LeaveData.visibleColumns"
-		v-model:inputfilter="filter"
-		v-model:inputvisible="LeaveData.visibleColumns"
-		:inputShow="true"
-		:grid="$q.screen.gt.xs ? false : true"
-		@update:filter="updateFilterTable"
-		@update:Pagination="updatePagination"
-		:maxPage="maxPage"
-		:pageSize="pageSize"
-		:leaveType="leaveType"
-	>
-		<template #columns="props">
-			<q-tr :props="props" class="cursor-pointer">
-				<q-td key="no" :props="props" @click="onClickView(props.row.id, props.row.status)">
-					{{ (page - 1) * pageSize + props.rowIndex + 1 }}
-				</q-td>
-				<q-td key="leaveTypeName" :props="props" @click="onClickView(props.row.id, props.row.status)">
-					{{ props.row.leaveTypeName }}
-				</q-td>
-				<q-td key="dateLeave" :props="props" @click="onClickView(props.row.id, props.row.status)">
-					{{ props.row.dateLeave }}
-				</q-td>
-				<q-td key="dateSendLeave" :props="props" @click="onClickView(props.row.id, props.row.status)">
-					{{ props.row.dateSendLeave }}
-				</q-td>
+  <Table
+    :rows="LeaveData.rows"
+    :columns="LeaveData.columns"
+    :visible-columns="LeaveData.visibleColumns"
+    v-model:inputfilter="filter"
+    v-model:inputvisible="LeaveData.visibleColumns"
+    :inputShow="true"
+    :grid="$q.screen.gt.xs ? false : true"
+    @update:filter="updateFilterTable"
+    @update:Pagination="updatePagination"
+    :maxPage="maxPage"
+    :pageSize="pageSize"
+    :leaveType="leaveType"
+  >
+    <template #columns="props">
+      <q-tr :props="props" class="cursor-pointer">
+        <q-td
+          key="no"
+          :props="props"
+          @click="onClickView(props.row.id, props.row.status)"
+        >
+          {{ (page - 1) * pageSize + props.rowIndex + 1 }}
+        </q-td>
+        <q-td
+          key="leaveTypeName"
+          :props="props"
+          @click="onClickView(props.row.id, props.row.status)"
+        >
+          {{ props.row.leaveTypeName }}
+        </q-td>
+        <q-td
+          key="dateLeave"
+          :props="props"
+          @click="onClickView(props.row.id, props.row.status)"
+        >
+          {{ props.row.dateLeave }}
+        </q-td>
+        <q-td
+          key="dateSendLeave"
+          :props="props"
+          @click="onClickView(props.row.id, props.row.status)"
+        >
+          {{ props.row.dateSendLeave }}
+        </q-td>
 
-				<q-td key="status" :props="props">
-					<div class="col-12 row items-center">
-						<div @click="onClickView(props.row.id, props.row.status)">
-							<q-icon v-if="props.row.status == 'DRAFT'" size="10px" color="light-grey" name="mdi-circle" class="q-mr-sm" />
-							<q-icon v-if="props.row.status == 'APPROVE'" size="10px" color="light-green" name="mdi-circle" class="q-mr-sm" />
-							<q-icon v-else-if="props.row.status == 'REJECT'" size="10px" color="red-6" name="mdi-circle" class="q-mr-sm" />
-							<q-icon v-else-if="props.row.status == 'PENDING'" size="10px" color="light-blue-14" name="mdi-circle" class="q-mr-sm" />
-							<q-icon v-else-if="props.row.status == 'NEW'" size="10px" color="orange" name="mdi-circle" class="q-mr-sm" />
-							<q-icon v-if="props.row.status == 'DELETE'" size="10px" color="grey-10" name="mdi-circle" class="q-mr-sm" />
+        <q-td key="status" :props="props">
+          <div class="col-12 row items-center">
+            <div @click="onClickView(props.row.id, props.row.status)">
+              <q-icon
+                v-if="props.row.status == 'DRAFT'"
+                size="10px"
+                color="light-grey"
+                name="mdi-circle"
+                class="q-mr-sm"
+              />
+              <q-icon
+                v-if="props.row.status == 'APPROVE'"
+                size="10px"
+                color="light-green"
+                name="mdi-circle"
+                class="q-mr-sm"
+              />
+              <q-icon
+                v-else-if="props.row.status == 'REJECT'"
+                size="10px"
+                color="red-6"
+                name="mdi-circle"
+                class="q-mr-sm"
+              />
+              <q-icon
+                v-else-if="props.row.status == 'PENDING'"
+                size="10px"
+                color="light-blue-14"
+                name="mdi-circle"
+                class="q-mr-sm"
+              />
+              <q-icon
+                v-else-if="props.row.status == 'NEW'"
+                size="10px"
+                color="orange"
+                name="mdi-circle"
+                class="q-mr-sm"
+              />
+              <q-icon
+                v-if="props.row.status == 'DELETE'"
+                size="10px"
+                color="grey-10"
+                name="mdi-circle"
+                class="q-mr-sm"
+              />
 
-							<span class="q-pr-md">{{ props.row.statusConvert }}</span>
-						</div>
-						<q-space />
+              <span class="q-pr-md">{{ props.row.statusConvert }}</span>
+            </div>
+            <q-space />
 
-						<q-btn
-							v-if="props.row.status != 'DELETE' && props.row.status != 'REJECT' && props.row.status != 'CANCEL'"
-							flat
-							icon="mdi-dots-vertical"
-							color="grey-8"
-							for="#cancel"
-							dense
-							round
-							unelevated
-						>
-							<q-menu>
-								<q-list>
-									<q-item clickable v-close-popup @click="onClickView(props.row.id, 'CANCEL')">
-										<q-item-section>
-											<q-item-label>ขอยกเลิก</q-item-label>
-										</q-item-section>
-									</q-item>
-									<q-item
-										v-if="
-											(props.row.status != 'DELETE' && props.row.status != 'REJECT' && props.row.status != 'CANCEL' && props.row.status == 'NEW') || props.row.status == 'DRAFT'
-										"
-										clickable
-										v-close-popup
-										@click="onClickEdit(props.row.id)"
-									>
-										<q-item-section>
-											<q-item-label>แก้ไข</q-item-label>
-										</q-item-section>
-									</q-item>
-								</q-list>
-							</q-menu>
-						</q-btn>
+            <q-btn
+              v-if="
+                props.row.status != 'DELETE' &&
+                props.row.status != 'REJECT' &&
+                props.row.status != 'CANCEL'
+              "
+              flat
+              icon="mdi-dots-vertical"
+              color="grey-8"
+              for="#cancel"
+              dense
+              round
+              unelevated
+            >
+              <q-menu>
+                <q-list>
+                  <q-item
+                    clickable
+                    v-close-popup
+                    @click="onClickView(props.row.id, 'CANCEL')"
+                  >
+                    <q-item-section>
+                      <q-item-label>ขอยกเลิก</q-item-label>
+                    </q-item-section>
+                  </q-item>
+                  <q-item
+                    v-if="props.row.status == 'DRAFT'"
+                    clickable
+                    v-close-popup
+                    @click="onClickEdit(props.row.id)"
+                  >
+                    <q-item-section>
+                      <q-item-label>แก้ไข</q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </Table>
 
-						<!-- <q-btn
-							v-if="props.row.status != 'DELETE' && props.row.status != 'REJECT' && props.row.status != 'CANCEL'"
-							label="ขอยกเลิก"
-							@click="onClickView(props.row.id, 'CANCEL')"
-							size="13px"
-							class="q-px-sm"
-							outline
-							dense
-							color="orange"
-						/>
-						<q-space />
-						<q-btn
-							v-if="props.row.status != 'DELETE' && props.row.status != 'REJECT' && props.row.status != 'CANCEL'"
-							label="ขอยืนยันการลา"
-							@click="onClickEdit(props.row.id, 'CANCEL')"
-							size="13px"
-							class="q-px-sm"
-							outline
-							dense
-							color="primary"
-						/> -->
-					</div>
-				</q-td>
-			</q-tr>
-		</template>
-	</Table>
-
-	<DialogDetail :modal="modal" :leaveId="leaveId" :leaveStatus="leaveStatus" :onClickClose="onClickClose" :leaveType="leaveType" :fetchDataTable="fetchDataTable" />
+  <DialogDetail
+    :modal="modal"
+    :leaveId="leaveId"
+    :leaveStatus="leaveStatus"
+    :onClickClose="onClickClose"
+    :leaveType="leaveType"
+    :fetchDataTable="fetchDataTable"
+  />
 </template>
diff --git a/src/modules/05_leave/components/formDetail/06_OrdinationForm.vue b/src/modules/05_leave/components/formDetail/06_OrdinationForm.vue
index d0031c6..94548e4 100644
--- a/src/modules/05_leave/components/formDetail/06_OrdinationForm.vue
+++ b/src/modules/05_leave/components/formDetail/06_OrdinationForm.vue
@@ -33,7 +33,7 @@ const props = defineProps({
       <div class="row">
         <div class="col text-grey-8">จำนวนวันที่ลา</div>
         <div class="col">
-          {{ props.data.leaveCount ? props.data.leaveCount : "-" }}
+          {{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}
         </div>
       </div>
       <div class="row">
diff --git a/src/modules/05_leave/components/formDetail/07_HajjForm.vue b/src/modules/05_leave/components/formDetail/07_HajjForm.vue
index f081a02..b1f20d0 100644
--- a/src/modules/05_leave/components/formDetail/07_HajjForm.vue
+++ b/src/modules/05_leave/components/formDetail/07_HajjForm.vue
@@ -33,7 +33,7 @@ const props = defineProps({
       <div class="row">
         <div class="col text-grey-8">จำนวนวันที่ลา</div>
         <div class="col">
-          {{ props.data.leaveCount ? props.data.leaveCount : "-" }}
+          {{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}
         </div>
       </div>
       <div class="row">
diff --git a/src/modules/05_leave/components/formDetail/08_MilitaryForm.vue b/src/modules/05_leave/components/formDetail/08_MilitaryForm.vue
index 54b375a..c96ec6f 100644
--- a/src/modules/05_leave/components/formDetail/08_MilitaryForm.vue
+++ b/src/modules/05_leave/components/formDetail/08_MilitaryForm.vue
@@ -34,7 +34,7 @@ console.log(props);
       <div class="row">
         <div class="col text-grey-8">จำนวนวันที่ลา</div>
         <div class="col">
-          {{ props.data.leaveCount ? props.data.leaveCount : "-" }}
+          {{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}
         </div>
       </div>
       <div class="row">
diff --git a/src/modules/05_leave/components/formDetail/formStudy.vue b/src/modules/05_leave/components/formDetail/09_StudyForm.vue
similarity index 100%
rename from src/modules/05_leave/components/formDetail/formStudy.vue
rename to src/modules/05_leave/components/formDetail/09_StudyForm.vue
diff --git a/src/modules/05_leave/components/formDetail/formLeaveToTraining.vue b/src/modules/05_leave/components/formDetail/10_TrainForm.vue
similarity index 100%
rename from src/modules/05_leave/components/formDetail/formLeaveToTraining.vue
rename to src/modules/05_leave/components/formDetail/10_TrainForm.vue
diff --git a/src/modules/05_leave/components/formDetail/formVocationalRehabilitation.vue b/src/modules/05_leave/components/formDetail/11_WorkInternationalForm.vue
similarity index 92%
rename from src/modules/05_leave/components/formDetail/formVocationalRehabilitation.vue
rename to src/modules/05_leave/components/formDetail/11_WorkInternationalForm.vue
index 6b4dd26..440c7da 100644
--- a/src/modules/05_leave/components/formDetail/formVocationalRehabilitation.vue
+++ b/src/modules/05_leave/components/formDetail/11_WorkInternationalForm.vue
@@ -29,6 +29,12 @@ const props = defineProps({
         <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 ? props.data.leaveCount : "-" }}
+        </div>
+      </div>
       <div class="row">
         <div class="col text-grey-8">รายละเอียด</div>
         <div class="col">
diff --git a/src/modules/05_leave/components/formDetail/formSpouse.vue b/src/modules/05_leave/components/formDetail/12_FollowSpouseForm.vue
similarity index 100%
rename from src/modules/05_leave/components/formDetail/formSpouse.vue
rename to src/modules/05_leave/components/formDetail/12_FollowSpouseForm.vue
diff --git a/src/modules/05_leave/components/formDetail/formLeaveToWorkInternational.vue b/src/modules/05_leave/components/formDetail/13_RehabilitationForm.vue
similarity index 100%
rename from src/modules/05_leave/components/formDetail/formLeaveToWorkInternational.vue
rename to src/modules/05_leave/components/formDetail/13_RehabilitationForm.vue