From f0c7cf2c727ee39a7447e5c7d76f9bcfc89fa698 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Fri, 5 Jan 2024 15:47:01 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84=E0=B8=82?=
 =?UTF-8?q?=E0=B9=81=E0=B8=9A=E0=B8=9A=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

---
 .../components/FormLeave/09_StudyForm.vue     |  14 +-
 .../components/FormLeave/10_TrainForm.vue     |  16 +-
 .../FormLeave/11_WorkInternationalForm.vue    |  53 +++---
 .../FormLeave/12_FollowSpouseForm.vue         | 173 ++++++++++--------
 .../FormLeave/13_RehabilitationForm.vue       |  55 +++---
 src/modules/05_leave/views/EditPage.vue       |  34 ++--
 6 files changed, 188 insertions(+), 157 deletions(-)

diff --git a/src/modules/05_leave/components/FormLeave/09_StudyForm.vue b/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
index 6fb7157..3bf2e7a 100644
--- a/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
+++ b/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
@@ -155,7 +155,7 @@ function onValidate() {
  * @param formData
  */
 const isLeave = ref<boolean>(true);
-async function FetchCheck() {
+async function fetchCheck() {
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
@@ -181,16 +181,16 @@ async function FetchCheck() {
  * function อัพเดทค่า LeaveTotal
  */
 function updateLeaveTotal() {
+  fetchCheck();
   const newLeaveTotal = calculateDurationYmd(
     formDataStudy.leaveStartDate,
     formDataStudy.leaveEndDate
   );
   formDataStudy.leaveTotal = newLeaveTotal;
-  console.log("test");
 }
 
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
-onMounted(() => {
+onMounted(async () => {
   if (props.data) {
     formDataStudy.leaveWrote = props.data.leaveWrote;
     formDataStudy.leaveStartDate = props.data.leaveStartDate;
@@ -209,6 +209,12 @@ onMounted(() => {
     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;
   }
 });
 </script>
@@ -287,7 +293,7 @@ onMounted(() => {
           borderless
           week-start="0"
           :locale="'th'"
-          @update:model-value="updateLeaveTotal, FetchCheck()"
+          @update:model-value="updateLeaveTotal()"
           :readonly="!formDataStudy.leaveStartDate"
           :enableTimePicker="false"
           :min-date="formDataStudy.leaveStartDate"
diff --git a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
index 2119590..d23bcf9 100644
--- a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
+++ b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
@@ -153,7 +153,7 @@ function onValidate() {
  * @param formData
  */
 const isLeave = ref<boolean>(true);
-async function FetchCheck() {
+async function fetchCheck() {
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
@@ -165,7 +165,7 @@ async function FetchCheck() {
       isLeave.value = data.isLeave;
       if (data.isLeave === true) {
         // formDataTrain.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-        formDataTrain.leaveTotal = data.totalDate
+        formDataTrain.leaveTotal = data.totalDate;
       } else {
         fails($q, "ไม่สามารถลาได้");
       }
@@ -179,12 +179,12 @@ async function FetchCheck() {
  * function อัพเดทค่า LeaveTotal
  */
 function updateLeaveTotal() {
+  fetchCheck();
   const newLeaveTotal = calculateDurationYmd(
     formDataTrain.leaveStartDate,
     formDataTrain.leaveEndDate
   );
   formDataTrain.leaveTotal = newLeaveTotal;
-  console.log("test");
 }
 
 /**
@@ -197,7 +197,7 @@ const formattedSalary = computed(() => {
 });
 
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
-onMounted(() => {
+onMounted(async () => {
   if (props.data) {
     formDataTrain.leaveWrote = props.data.leaveWrote;
     formDataTrain.leaveStartDate = props.data.leaveStartDate;
@@ -215,6 +215,11 @@ onMounted(() => {
     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;
   }
 });
 </script>
@@ -291,7 +296,7 @@ onMounted(() => {
           menu-class-name="modalfix"
           autoApply
           borderless
-          @update:model-value="updateLeaveTotal, FetchCheck()"
+          @update:model-value="updateLeaveTotal()"
           week-start="0"
           :readonly="!formDataTrain.leaveStartDate"
           :locale="'th'"
@@ -564,7 +569,6 @@ onMounted(() => {
             bg-color="white"
             dense
             outlined
-            
             label="เอกสารประกอบ"
           >
             <template v-slot:prepend>
diff --git a/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue b/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
index 18197f3..ce2d0b5 100644
--- a/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
+++ b/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
@@ -13,7 +13,7 @@ import genReport from "@/plugins/genreport";
 const dataStore = useLeaveStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { date2Thai, dialogConfirm, fails, dateToISO, success, messageError } =
+const { date2Thai, dialogConfirm, fails, dateToISO, success, messageError, showLoader } =
   mixin;
 const edit = ref<boolean>(true);
 const router = useRouter();
@@ -124,7 +124,7 @@ function onValidate() {
 
 //download function
 async function onClickDownloadFile(id: string, fileName: string) {
-  // showLoader();
+  showLoader();
   await http
     .get(config.API.leaveReport(id))
     .then(async (res) => {
@@ -167,6 +167,7 @@ async function FetchCheck() {
     });
 }
 
+const leaveDraftDocument = ref<string>();
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 onMounted(() => {
   if (props.data) {
@@ -177,8 +178,7 @@ onMounted(() => {
     formDataWorkInternational.leaveEndDate = new Date(props.data.leaveEndDate);
     formDataWorkInternational.leaveDetail = props.data.leaveDetail;
     // formDataWorkInternational.leaveDocument = props.data.leaveDocument;
-    // formDataWorkInternational.leaveDraftDocument =
-    //   props.data.leaveDraftDocument;
+    leaveDraftDocument.value = props.data.leaveDraftDocument;
   }
 });
 </script>
@@ -372,14 +372,7 @@ onMounted(() => {
       </div>
     </q-card>
 
-    <div
-      v-if="
-        formDataWorkInternational.leaveWrote &&
-        formDataWorkInternational.leaveEndDate &&
-        formDataWorkInternational.leaveStartDate
-      "
-      class="q-mt-md"
-    >
+    <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">
@@ -388,33 +381,32 @@ onMounted(() => {
       </div>
       <q-card class="bg-grey-1 q-pa-sm" bordered>
         <div class="row">
-          <div class="col-12 col-sm-4 col-md-4 q-my-sm offset-sm-1 offset-md-2">
+          <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 class="q-pl-sm text-weight-bold text-dark text-center">
                 ดาวน์โหลด
-              </div>
+              </div> -->
               <q-btn
                 color="primary"
                 icon="download"
                 label="ดาวน์โหลดแบบฟอร์ม"
-                @click="
-                  onClickDownloadFile(data.id, `แบบฟอร์ม${data.leaveTypeName}`)
-                "
+                @click="onClickDownloadFile(data.id, `แบบฟอร์ม${data.leaveTypeName}`)"
               />
             </div>
           </div>
-          <div class="col-10 col-sm-5 col-md-4 q-my-sm">
+          <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 class="q-pl-sm text-weight-bold text-dark text-center">
                 อัปโหลด
-              </div>
+              </div> -->
               <q-file
                 v-model="formDataWorkInternational.leaveDraftDocument"
+                use-chips
                 dense
-                label="แบบฟอร์ม"
+                label="อัปโหลดแบบฟอร์ม"
                 outlined
                 bg-color="white"
-                accept=".pdf"
+                accept="application/pdf"
               >
                 <template v-slot:prepend>
                   <q-icon name="attach_file" color="primary" />
@@ -422,6 +414,21 @@ onMounted(() => {
               </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> -->
+              <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
diff --git a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
index 5ff488e..127cfb2 100644
--- a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
@@ -51,31 +51,21 @@ const formDataFollowSpouse = reactive<any>({
   leaveStartDate: null,
   leaveEndDate: null,
   leaveTotal: "", //จำนวนวันลา
-  leaveSalaryText: 25000,
-  leaveSalary: 25000, //เงินเดือนปัจจุบัน
+  leaveSalaryText: "",
+  leaveSalary: 0, //เงินเดือนปัจจุบัน
   coupleDayName: "", //ชื่อคู่สมรส
   coupleDayPosition: "", //ตำแหน่งคู่สมรส
   coupleDayLevel: "", //ระดับคู่สมรส
   coupleDayLevelCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ
-  followHistoryCountry: "ลาว", //ประวัติการลาติดตามคู่สมรส
-  followHistoryTime: "0 วัน",
-  followHistoryStart: new Date(),
-  followHistoryEnd: new Date(),
+  coupleDayCountryHistory: "", //ประวัติการลาติดตามคู่สมรส
+  coupleDayTotalHistory: null,
+  coupleDayStartDateHistory: null,
+  coupleDayEndDateHistory: null,
   leaveDetail:
     "ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา ...ปี, ...เดือน, ...วัน", //รายละเอียดการลา
   leaveDocument: [], //เอกสารปะกอบ
 });
 
-/** แปลงตัวแปร Salary */
-const formattleaveSalaryText = arabicNumberToText(
-  formDataFollowSpouse.leaveSalaryText
-);
-const formattSalary = computed(() => {
-  return formDataFollowSpouse.leaveSalary !== null
-    ? formDataFollowSpouse.leaveSalary.toLocaleString("th-TH")
-    : "";
-});
-
 /** ตัวแปร ref สำหรับแสดง validate */
 const leaveWroteRef = ref<object | null>(null);
 const leaveStartDateRef = ref<object | null>(null);
@@ -88,10 +78,10 @@ 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 followHistoryCountryRef = ref<object | null>(null);
-const followHistoryTimeRef = ref<object | null>(null);
-const followHistoryStartRef = ref<object | null>(null);
-const followHistoryEndRef = 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 เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
@@ -105,10 +95,10 @@ const FormRef: FormRef = {
   coupleDayPosition: coupleDayPositionRef, //ตำแหน่งคู่สมรส
   coupleDayLevel: coupleDayLevelRef, //ระดับคู่สมรส
   coupleDayLevelCountry: coupleDayLevelCountryRef, //ไปปฏิบัติราชการ ณ ประเทศ
-  followHistoryCountry: followHistoryCountryRef, //ประวัติการลาติดตามคู่สมรส
-  followHistoryEnd: followHistoryEndRef, //ประวัติการลาติดตามคู่สมรส
-  followHistoryTime: followHistoryTimeRef, //ประวัติการลาติดตามคู่สมรส
-  followHistoryStart: followHistoryStartRef, //ประวัติการลาติดตามคู่สมรส
+  coupleDayCountryHistory: coupleDayCountryHistoryRef, //ประวัติการลาติดตามคู่สมรส
+  coupleDayEndDateHistory: coupleDayEndDateHistoryRef, //ประวัติการลาติดตามคู่สมรส
+  coupleDayTotalHistory: coupleDayTotalHistoryRef, //ประวัติการลาติดตามคู่สมรส
+  coupleDayStartDateHistory: coupleDayStartDateHistoryRef, //ประวัติการลาติดตามคู่สมรส
   leaveDetail: leaveDetailRef, //รายละเอียดการลา
   leaveAddress: leaveAddressRef, //สถานที่ติดต่อขณะลา
   leaveDocument: leaveDocumentRef,
@@ -155,24 +145,24 @@ function onValidate() {
       dateToISO(formDataFollowSpouse.leaveEndDate)
     ); //
     formData.append(
-      "followHistoryStart",
-      dateToISO(formDataFollowSpouse.followHistoryStart)
+      "coupleDayStartDateHistory",
+      dateToISO(formDataFollowSpouse.coupleDayStartDateHistory)
     ); //
     formData.append(
-      "followHistoryEnd",
-      dateToISO(formDataFollowSpouse.followHistoryEnd)
+      "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(
-      "followHistoryTime",
-      formDataFollowSpouse.followHistoryTime
+      "coupleDayTotalHistory",
+      formDataFollowSpouse.coupleDayTotalHistory
     ); //
     formData.append(
-      "followHistoryCountry",
-      formDataFollowSpouse.followHistoryCountry
+      "coupleDayCountryHistory",
+      formDataFollowSpouse.coupleDayCountryHistory
     ); //
     formData.append(
       "coupleDayLevelCountry",
@@ -194,7 +184,7 @@ function onValidate() {
  * @param formData
  */
 const isLeave = ref<boolean>(true);
-async function FetchCheck() {
+async function fetchCheck() {
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
@@ -205,9 +195,8 @@ async function FetchCheck() {
       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;
+        // formDataFollowSpouse.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday;
+        //   formDataFollowSpouse.leaveTotal = data.totalDate;
       } else {
         fails($q, "ไม่สามารถลาได้");
       }
@@ -221,6 +210,8 @@ async function FetchCheck() {
  * function อัพเดทค่า LeaveTotal
  */
 function updateLeaveTotal() {
+  fetchCheck();
+
   const newLeaveTotal = calculateDurationYmd(
     formDataFollowSpouse.leaveStartDate,
     formDataFollowSpouse.leaveEndDate
@@ -228,8 +219,19 @@ function updateLeaveTotal() {
   formDataFollowSpouse.leaveTotal = newLeaveTotal;
 }
 
+/**
+ * function อัพเดทค่า LeaveTotal
+ */
+function updateLeaveHistoryTotal() {
+  const newLeaveTotal = calculateDurationYmd(
+    formDataFollowSpouse.coupleDayStartDateHistory,
+    formDataFollowSpouse.coupleDayEndDateHistory
+  );
+  formDataFollowSpouse.coupleDayTotalHistory = newLeaveTotal;
+}
+
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
-onMounted(() => {
+onMounted(async () => {
   if (props.data) {
     formDataFollowSpouse.leaveWrote = props.data.leaveWrote;
     formDataFollowSpouse.leaveStartDate = new Date(props.data.leaveStartDate);
@@ -244,10 +246,26 @@ onMounted(() => {
     formDataFollowSpouse.coupleDayLevel = props.data.coupleDayLevel;
     formDataFollowSpouse.coupleDayLevelCountry =
       props.data.coupleDayLevelCountry;
-    formDataFollowSpouse.followHistoryCountry = props.data.followHistoryCountry;
-    formDataFollowSpouse.followHistoryTime = props.data.followHistoryTime;
-    formDataFollowSpouse.followHistoryStart = props.data.followHistoryStart;
-    formDataFollowSpouse.followHistoryEnd = props.data.followHistoryEnd;
+    formDataFollowSpouse.coupleDayCountryHistory =
+      props.data.coupleDayCountryHistory;
+    formDataFollowSpouse.coupleDayTotalHistory =
+      props.data.coupleDayTotalHistory;
+    formDataFollowSpouse.coupleDayStartDateHistory =
+      props.data.coupleDayStartDateHistory;
+    formDataFollowSpouse.coupleDayEndDateHistory =
+      props.data.coupleDayEndDateHistory;
+
+    const leaveTotal = await calculateDurationYmd(
+      new Date(props.data.leaveStartDate),
+      new Date(props.data.leaveEndDate)
+    );
+    formDataFollowSpouse.leaveTotal = leaveTotal;
+
+    const coupleDayTotalHistory = await calculateDurationYmd(
+      new Date(props.data.coupleDayStartDateHistory),
+      new Date(props.data.coupleDayEndDateHistory)
+    );
+    formDataFollowSpouse.coupleDayTotalHistory = coupleDayTotalHistory;
   }
 });
 </script>
@@ -332,7 +350,7 @@ onMounted(() => {
           hide-bottom-space
           :enableTimePicker="false"
           week-start="0"
-          @update:model-value="updateLeaveTotal, FetchCheck()"
+          @update:model-value="updateLeaveTotal()"
           :readonly="!formDataFollowSpouse.leaveStartDate"
           :min-date="formDataFollowSpouse.leaveStartDate"
         >
@@ -392,7 +410,7 @@ onMounted(() => {
             for="leaveSalaryRef"
             dense
             outlined
-            v-model="formattSalary"
+            v-model="dataStore.salary"
             label="เงินเดือนปัจจุบัน"
             readonly
           />
@@ -406,7 +424,7 @@ onMounted(() => {
             for="leaveSalaryRef"
             dense
             outlined
-            v-model="formattleaveSalaryText"
+            v-model="dataStore.salaryText"
             label="เงินเดือนปัจจุบัน"
             readonly
           />
@@ -476,16 +494,15 @@ onMounted(() => {
           ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย
         </div>
         <datepicker
-          class="col-12 col-md-3 col-sm-12"
+          class="col-12 col-md-3 col-sm-12 inputgreen"
           menu-class-name="modalfix"
-          v-model="formDataFollowSpouse.followHistoryStart"
+          v-model="formDataFollowSpouse.coupleDayStartDateHistory"
           :locale="'th'"
           autoApply
           hide-bottom-space
           borderless
           :enableTimePicker="false"
           week-start="0"
-          readonly
         >
           <template #year="{ year }">
             {{ year + 543 }}
@@ -497,15 +514,14 @@ onMounted(() => {
             <q-input
               outlined
               dense
-              ref="followHistoryStartRef"
-              for="followHistoryStartRef"
+              ref="coupleDayStartDateHistoryRef"
+              for="coupleDayStartDateHistoryRef"
               hide-bottom-space
-              readonly
               bg-color="white"
               class="full-width"
               :model-value="
-                formDataFollowSpouse.followHistoryStart != null
-                  ? date2Thai(formDataFollowSpouse.followHistoryStart)
+                formDataFollowSpouse.coupleDayStartDateHistory != null
+                  ? date2Thai(formDataFollowSpouse.coupleDayStartDateHistory)
                   : null
               "
               :label="`${'ตั้งแต่วันที่'}`"
@@ -515,7 +531,7 @@ onMounted(() => {
                 <q-icon
                   name="event"
                   class="cursor-pointer"
-                  style="color: var(--black)"
+                  style="color: var(--q-primary)"
                 >
                 </q-icon>
               </template>
@@ -523,16 +539,16 @@ onMounted(() => {
           </template>
         </datepicker>
         <datepicker
-          class="col-12 col-md-3 col-sm-12"
+          class="col-12 col-md-3 col-sm-12 inputgreen"
           menu-class-name="modalfix"
-          v-model="formDataFollowSpouse.followHistoryEnd"
+          v-model="formDataFollowSpouse.coupleDayEndDateHistory"
           :locale="'th'"
           autoApply
           hide-bottom-space
           borderless
           :enableTimePicker="false"
           week-start="0"
-          readonly
+          @update:model-value="updateLeaveHistoryTotal()"
         >
           <template #year="{ year }">
             {{ year + 543 }}
@@ -544,15 +560,14 @@ onMounted(() => {
             <q-input
               outlined
               dense
-              ref="followHistoryEndRef"
-              for="followHistoryEndRef"
+              ref="coupleDayEndDateHistoryRef"
+              for="coupleDayEndDateHistoryRef"
               hide-bottom-space
               bg-color="white"
-              readonly
               class="full-width"
               :model-value="
-                formDataFollowSpouse.followHistoryEnd != null
-                  ? date2Thai(formDataFollowSpouse.followHistoryEnd)
+                formDataFollowSpouse.coupleDayEndDateHistory != null
+                  ? date2Thai(formDataFollowSpouse.coupleDayEndDateHistory)
                   : null
               "
               :label="`${'ถึงวันที่'}`"
@@ -562,37 +577,38 @@ onMounted(() => {
                 <q-icon
                   name="event"
                   class="cursor-pointer"
-                  style="color: var(--black)"
+                  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
           hide-bottom-space
           bg-color="white"
-          ref="followHistoryCountryRef"
-          for="followHistoryCountryRef"
-          v-model="formDataFollowSpouse.followHistoryCountry"
+          ref="coupleDayCountryHistoryRef"
+          for="coupleDayCountryHistoryRef"
+          v-model="formDataFollowSpouse.coupleDayCountryHistory"
           label="ประเทศ"
           :rules="[(val) => !!val || `${'กรุณาเลือกประเทศ'}`]"
-          readonly
-        />
-        <q-input
-          class="col-12 col-md-3 col-sm-12"
-          dense
-          outlined
-          :readonly="formDataFollowSpouse.followHistoryTime !== ''"
-          hide-bottom-space
-          bg-color="white"
-          ref="followHistoryTimeRef"
-          for="followHistoryTimeRef"
-          v-model="formDataFollowSpouse.followHistoryTime"
-          label="เป็นเวลา"
         />
 
         <q-input
@@ -619,7 +635,6 @@ onMounted(() => {
           label="เอกสารประกอบ"
           outlined
           use-chips
-          
           class="q-pl-sm col-12"
         >
           <template v-slot:prepend>
diff --git a/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue b/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
index 447b283..3ae86de 100644
--- a/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
@@ -13,7 +13,7 @@ import genReport from "@/plugins/genreport";
 const dataStore = useLeaveStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { date2Thai, dialogConfirm, fails, dateToISO, success, messageError } =
+const { date2Thai, dialogConfirm, fails, dateToISO, success, messageError, showLoader } =
   mixin;
 const router = useRouter();
 const edit = ref<boolean>(true);
@@ -151,7 +151,6 @@ async function onClickDownloadFile(id: string, fileName: string) {
   await http
     .get(config.API.leaveReport(id))
     .then(async (res) => {
-      console.log(res);
       const data = res.data.result;
       await genReport(data, fileName);
     })
@@ -163,6 +162,7 @@ async function onClickDownloadFile(id: string, fileName: string) {
     });
 }
 
+const leaveDraftDocument = ref<string>();
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 onMounted(() => {
   if (props.data) {
@@ -171,8 +171,7 @@ onMounted(() => {
     formDataRehabilitation.leaveEndDate = new Date(props.data.leaveEndDate);
     formDataRehabilitation.leaveDetail = props.data.leaveDetail;
     // formDataRehabilitation.leaveDocument = props.data.leaveDocument;
-    // formDataRehabilitation.leaveDraftDocument =
-    //   props.data.leaveDraftDocument;
+    leaveDraftDocument.value = props.data.leaveDraftDocument;
   }
 });
 </script>
@@ -302,7 +301,7 @@ onMounted(() => {
           label="รายละเอียด"
         />
 
-        <div class="col-12 col-sm-6">
+        <div class="col-12">
           <!-- multiple -->
           <q-file
             v-model="formDataRehabilitation.leaveDocument"
@@ -311,7 +310,6 @@ onMounted(() => {
             bg-color="white"
             dense
             outlined
-            
             label="เอกสารประกอบ"
           >
             <template v-slot:prepend>
@@ -343,14 +341,7 @@ onMounted(() => {
       </div>
     </q-card>
 
-    <div
-      v-if="
-        formDataRehabilitation.leaveWrote &&
-        formDataRehabilitation.leaveStartDate &&
-        formDataRehabilitation.leaveEndDate
-      "
-      class="q-mt-md"
-    >
+    <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">
@@ -359,34 +350,29 @@ onMounted(() => {
       </div>
       <q-card class="bg-grey-1 q-pa-sm" bordered>
         <div class="row">
-          <div class="col-12 col-sm-4 col-md-4 q-my-sm offset-sm-1 offset-md-2">
+          <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 class="q-pl-sm text-weight-bold text-dark text-center">
                 ดาวน์โหลด
-              </div>
+              </div> -->
               <q-btn
                 color="primary"
                 icon="download"
                 label="ดาวน์โหลดแบบฟอร์ม"
-                @click="
-                  onClickDownloadFile(
-                    '08dc05c8-4cfd-4603-81f8-92a401571717',
-                    'แบบฟอร์ม'
-                  )
-                "
+                @click="onClickDownloadFile(data.id, `แบบฟอร์ม${data.leaveTypeName}`)"
               />
             </div>
           </div>
-          <div class="col-10 col-sm-5 col-md-4 q-my-sm">
+          <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 class="q-pl-sm text-weight-bold text-dark text-center">
                 อัปโหลด
-              </div>
+              </div> -->
               <q-file
                 v-model="formDataRehabilitation.leaveDraftDocument"
                 use-chips
                 dense
-                label="แบบฟอร์ม"
+                label="อัปโหลดแบบฟอร์ม"
                 outlined
                 bg-color="white"
                 accept="application/pdf"
@@ -397,6 +383,21 @@ onMounted(() => {
               </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> -->
+              <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
diff --git a/src/modules/05_leave/views/EditPage.vue b/src/modules/05_leave/views/EditPage.vue
index 308ea5c..842f503 100644
--- a/src/modules/05_leave/views/EditPage.vue
+++ b/src/modules/05_leave/views/EditPage.vue
@@ -47,10 +47,10 @@ const formData = reactive<any>({
   leaveTypeName: "", // Name ประเภทการลา
   leaveTypeId: "", //Id ประเภทการลา
   fullname: "", //คำนำหน้า ชื่อ นามสกุล คนขอลา
-  dateSendLeave: new Date(), // วันที่ยืนใบลา
+  dateSendLeave: null, // วันที่ยืนใบลา
   status: "", //สถานะการของลา
-  leaveDateStart: new Date(), //วันเริ่มการลา
-  leaveDateEnd: new Date(), //วันสิ้นสุดการลา
+  leaveDateStart: null, //วันเริ่มการลา
+  leaveDateEnd: null, //วันสิ้นสุดการลา
   leaveCount: 0, //จำนวนวันลา
   leaveWrote: "", //เขียนที่
   leaveAddress: "", //สถานที่ติดต่อขณะลา
@@ -58,29 +58,29 @@ const formData = reactive<any>({
   leaveDetail: "", //รายละเอียดการลา
   leaveDocument: "", //อัปโหลดเอกสารประกอบรายละเอียด
   leaveDraftDocument: "", //อัปโหลดแบบฟอร์มการลา
-  leaveLastStart: new Date(), //ลาครั้งสุดท้ายในประเภทนั้น ๆ เริ่มเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
-  leaveLastEnd: new Date(), //ลาครั้งสุดท้ายในประเภทนั้น ๆ สิ้นสุดเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
+  leaveLastStart: null, //ลาครั้งสุดท้ายในประเภทนั้น ๆ เริ่มเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
+  leaveLastEnd: null, //ลาครั้งสุดท้ายในประเภทนั้น ๆ สิ้นสุดเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
   leaveTotal: 0, //จำนวนวันที่ลา(Auto)
-  leavebirthDate: new Date(), //วันเดือนปีเกิด(Auto)
-  leavegovernmentDate: new Date(), //วันที่เข้ารับราชการ(Auto)
+  leavebirthDate: null, //วันเดือนปีเกิด(Auto)
+  leavegovernmentDate: null, //วันที่เข้ารับราชการ(Auto)
   leaveSalary: 0, //เงินเดือนปัจจุบัน(Auto)
   leaveSalaryText: "", //เงินเดือนปัจจุบัน(เขียนเป็นคำอ่าน)
   leaveTypeDay: "", //ประเภทการลาในวันนั้นเช่น
   wifeDayName: "", //ชื่อภรรยา(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
-  wifeDayDateBorn: new Date(), //วันที่คลอด(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
+  wifeDayDateBorn: null, //วันที่คลอด(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
   restDayOldTotal: 0, //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา(ลาพักผ่อน)(Auto)
   restDayCurrentTotal: 0, //จำนวนวันลาพักผ่อนประจำปีปัจจุบัน(ลาพักผ่อน)(Auto)
   ordainDayStatus: "", //เคย/ไม่เคยบวช (ให้เลือก) (ลาอุปสมบท)
   ordainDayLocationName: "", //สถานที่บวช ชื่อวัด(ลาอุปสมบท)
   ordainDayLocationAddress: "", //สถานที่บวช ที่อยู่(ลาอุปสมบท)
   ordainDayLocationNumber: "", //สถานที่บวช หมายเลขโทรศัพท์(ลาอุปสมบท)
-  ordainDayOrdination: new Date(), //สถานที่บวช วันอุปสมบท(ลาอุปสมบท)
+  ordainDayOrdination: null, //สถานที่บวช วันอุปสมบท(ลาอุปสมบท)
   ordainDayBuddhistLentName: "", //สถานที่จำพรรษา ชื่อวัด(ลาอุปสมบท)
   ordainDayBuddhistLentAddress: "", //สถานที่จำพรรษา ที่อยู่(ลาอุปสมบท)
   hajjDayStatus: "", //เคย/ไม่เคยไปประกอบพิธีฮัจญ์ (ให้เลือก) (ลาประกอบพิธีฮัจญ์)
   absentDaySummon: "", //ได้รับหมายเรียกของ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
   absentDayLocation: "", //ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
-  absentDayRegistorDate: new Date(), //ลงวันที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+  absentDayRegistorDate: null, //ลงวันที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
   absentDayGetIn: "", //ให้เข้ารับการ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
   absentDayAt: "", //ณ ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
   studyDaySubject: "", //กรณีลาไปศึกษาต่อ ศึกษาวิชา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
@@ -96,8 +96,8 @@ const formData = reactive<any>({
   coupleDayLevelCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ (ลาติดตามคู่สมรส)
   coupleDayCountryHistory: "", //ประวัติ ประเทศ (ลาติดตามคู่สมรส)
   coupleDayTotalHistory: "", //ประวัติ เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
-  coupleDayStartDateHistory: new Date(), //ประวัติ ตั้งแต่วันที่ (ลาติดตามคู่สมรส)
-  coupleDayEndDateHistory: new Date(), //ประวัติ ถึงวันที่ (ลาติดตามคู่สมรส)
+  coupleDayStartDateHistory: null, //ประวัติ ตั้งแต่วันที่ (ลาติดตามคู่สมรส)
+  coupleDayEndDateHistory: null, //ประวัติ ถึงวันที่ (ลาติดตามคู่สมรส)
   coupleDaySumTotalHistory: "", //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
   approveStep: "",
   dear: "",
@@ -183,11 +183,8 @@ async function fetchDataDetail(id: string) {
       formData.coupleDayLevelCountry = data.coupleDayLevelCountry ?? "-";
       formData.coupleDayCountryHistory = data.coupleDayCountryHistory ?? "-";
       formData.coupleDayTotalHistory = data.coupleDayTotalHistory ?? "-";
-      formData.coupleDayStartDateHistory =
-        data.coupleDayStartDateHistory &&
-        date2Thai(data.coupleDayStartDateHistory);
-      formData.coupleDayEndDateHistory =
-        data.coupleDayEndDateHistory && date2Thai(data.coupleDayEndDateHistory);
+      formData.coupleDayStartDateHistory = data.coupleDayStartDateHistory;
+      formData.coupleDayEndDateHistory = data.coupleDayEndDateHistory;
       formData.coupleDaySumTotalHistory = data.coupleDaySumTotalHistory ?? "-";
       formData.approveStep = data.approveStep ?? "-";
       formData.dear = data.dear ?? "-";
@@ -254,7 +251,8 @@ function onConfirm(id: string) {
       //     await http
       //       .post(config.API.leaveUser() + "/" + id)
       //       .then(() => {
-      //         success($q, "บันทึกสำเร็จ");
+      router.push("/leave");
+      success($q, "ยื่นใบลาสำเร็จ");
       //       })
       //       .catch((e: any) => {
       //         messageError($q, e);