fix(leave):bug watch

src/modules/05_leave/components/FormLeave/01_SickForm.vue

@@ -7,6 +7,10 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useLeaveStore } from "@/modules/05_leave/store";
 
+import type {
+  DocumentLists,
+  DataOptions,
+} from "@/modules/05_leave/interface/index/main";
 import type { FormRef } from "@/modules/05_leave/interface/request/SickForm";
 
 /** Use */
@@ -52,7 +56,7 @@ const formDataSick = reactive<any>({
   leaveDetail: "",
   leaveDocument: [],
 });
-const leaveDocumentList = ref<any>();
+const leaveDocumentList = ref<DocumentLists[]>([]);
 
 /** ตัวแปร ref สำหรับแสดง validate */
 const leaveWroteRef = ref<object | null>(null);
@@ -79,14 +83,27 @@ const FormRef: FormRef = {
   leaveDetail: leaveDetailRef,
 };
 
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const isLeave = ref<boolean>(true); // check ว่าลาได้ไหม จาก api
-const nameFile = ref<string>("");
+const reasonLeave = ref<string>(""); // ข้อความแจ้งเตือน กรณีลาไม่ได้
-const fileDocDataUpload = ref<File[]>([]);
+const leaveId = ref<string>("");
-async function fileUploadDoc(files: any) {
+const statusCheck = ref<string>("");
-  files.forEach((file: any) => {
+
-    fileDocDataUpload.value.push(file);
+/** ตรวจสอบวันลา */
-  });
+const checkDate = computed(() => {
-}
+  if (
+    convertDateToAPI(formDataSick.leaveStartDate) ==
+    convertDateToAPI(formDataSick.leaveEndDate)
+  ) {
+    return true;
+  } else {
+    return false;
+  }
+});
+
+/** แจ้งเมื่อวันลาไม่ถูกต้อง */
+const dateEndInputStyle = computed(() => {
+  return !isLeave.value ? "input-alert" : "";
+});
 
 /** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
 function onValidate() {
@@ -129,25 +146,7 @@ function onValidate() {
   }
 }
 
-/**
+/** ฟังก์ชันตรวจสอบวันลา */
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true);
-const reasonLeave = ref<string>("");
-
-const checkDate = computed(() => {
-  if (
-    convertDateToAPI(formDataSick.leaveStartDate) ==
-    convertDateToAPI(formDataSick.leaveEndDate)
-  ) {
-    return true;
-  } else {
-    return false;
-  }
-});
-
-// const totalCheck = ref<number | null>(null);
 async function fetchCheck() {
   if (formDataSick.leaveStartDate && formDataSick.leaveEndDate) {
     isLoadLeaveDate.value = true;
@@ -161,12 +160,11 @@ async function fetchCheck() {
           ? formDataSick.leaveRange
           : formDataSick.leaveRangeEnd,
       })
-      .then((res: any) => {
+      .then((res) => {
         const data = res.data.result;
         formDataSick.leaveTotal =
           data.totalDate - data.sumDateWork - data.sumDateHoliday;
-        // totalCheck.value =
+
-        //   data.totalDate - data.sumDateWork - data.sumDateHoliday;
         reasonLeave.value =
           data.message != ""
             ? data.message
@@ -175,9 +173,8 @@ async function fetchCheck() {
             : "ช่วงวันลาที่ระบุไม่ถูกต้อง";
         isLeave.value = formDataSick.leaveTotal > 0 ? data.isLeave : false;
       })
-      .catch((e: any) => {
+      .catch((e) => {
         messageError($q, e);
-        // totalCheck.value = null;
       })
       .finally(() => {
         leaveDocumentRef.value.resetValidation();
@@ -186,41 +183,16 @@ async function fetchCheck() {
   }
 }
 
-/** แจ้งเมื่อวันลาไม่ถูกต้อง */
+/** ฟังก์ชันสำหรับ map ข้อมูลจาก props เข้า form */
-const dateEndInputStyle = computed(() => {
+function mapPropsToFormData() {
-  return !isLeave.value ? "input-alert" : "";
-});
-
-const leaveId = ref<any>("");
-/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
-const statusCheck = ref<any>("");
-watch(
-  () => props.data,
-  () => {
   if (props.data) {
-      // totalCheck.value = null;
     formDataSick.leaveWrote = props.data.leaveWrote;
-      formDataSick.leaveStartDate = new Date(props.data.leaveStartDate);
+    formDataSick.leaveStartDate = props.data.leaveStartDate
-      formDataSick.leaveEndDate = new Date(props.data.leaveEndDate);
+      ? new Date(props.data.leaveStartDate)
-      formDataSick.contractTel = props.data.contractTel;
+      : null;
-      formDataSick.leaveTotal = props.data.leaveTotal;
+    formDataSick.leaveEndDate = props.data.leaveEndDate
-      formDataSick.leaveDetail = props.data.leaveDetail;
+      ? new Date(props.data.leaveEndDate)
-      formDataSick.leaveRange = props.data.leaveRange;
+      : null;
-      formDataSick.leaveRangeEnd = props.data.leaveRangeEnd;
-      leaveDocumentList.value = props.data.leaveDocument;
-      statusCheck.value = props.data.status;
-      formDataSick.leaveDocument = [];
-    }
-  }
-);
-
-/** Hook */
-onMounted(() => {
-  if (props.data) {
-    // totalCheck.value = null;
-    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.leaveDetail = props.data.leaveDetail;
@@ -229,7 +201,22 @@ onMounted(() => {
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
     leaveId.value = props.data.id;
+    formDataSick.leaveDocument = [];
+    console.log(props.data.leaveDocument);
   }
+}
+
+watch(
+  () => props.data,
+  () => {
+    mapPropsToFormData();
+  },
+  { deep: true }
+);
+
+/** Hook */
+onMounted(() => {
+  mapPropsToFormData();
 });
 </script>
 
@@ -391,7 +378,7 @@ onMounted(() => {
                 dense
                 bg-color="white"
                 v-model="formDataSick.leaveRangeEnd"
-                :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
+                :options="dataStore.rangeOptions.filter((items:DataOptions)=> items.id !== 'AFTERNOON')"
                 emit-value
                 map-options
                 option-value="id"

src/modules/05_leave/components/FormLeave/03_Birth.vue

@@ -8,6 +8,10 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useLeaveStore } from "@/modules/05_leave/store";
 
 import type { FormRef } from "@/modules/05_leave/interface/request/BirthForm";
+import type {
+  DocumentLists,
+  DataOptions,
+} from "@/modules/05_leave/interface/index/main";
 
 /** Use */
 const $q = useQuasar();
@@ -64,6 +68,12 @@ const leaveAddressRef = ref<object | null>(null);
 const leaveDetailRef = ref<object | null>(null);
 const leaveDocumentRef = ref<object | null>(null);
 
+const isLeave = ref<boolean>(true); // ตัวแปรตรวจสอบการลา
+const reasonLeave = ref<string>(""); // ตัวแปรเก็บข้อความแจ้งเตือนการลา
+const fileDocDataUpload = ref<File[]>([]); // ตัวแปรเก็บไฟล์เอกสารประกอบ
+const leaveDocumentList = ref<DocumentLists[]>([]); // ตัวแปรเก็บรายการเอกสารประกอบ
+const statusCheck = ref<string>(""); // ตัวแปรเก็บสถานะการลา
+
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const FormRef: FormRef = {
   leaveWrote: leaveWroteRef,
@@ -76,11 +86,29 @@ const FormRef: FormRef = {
   leaveDocument: leaveDocumentRef,
 };
 
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+/** ตรวจสอบวันลา */
-const nameFile = ref<string>("");
+const checkDate = computed(() => {
-const fileDocDataUpload = ref<File[]>([]);
+  if (
-async function fileUploadDoc(files: any) {
+    convertDateToAPI(formDataBirth.leaveEndDate) ==
-  files.forEach((file: any) => {
+    convertDateToAPI(formDataBirth.leaveStartDate)
+  ) {
+    return true;
+  } else {
+    return false;
+  }
+});
+
+/** แจ้งเมื่อวันลาไม่ถูกต้อง */
+const dateEndInputStyle = computed(() => {
+  return !isLeave.value ? "input-alert" : "";
+});
+
+/**
+ * ฟังก์ชั่นอัพโหลดเอกสารประกอบ
+ * @param files ไฟล์เอกสารประกอบ
+ */
+async function fileUploadDoc(files: File[]) {
+  files.forEach((file: File) => {
     fileDocDataUpload.value.push(file);
   });
 }
@@ -126,20 +154,6 @@ function onValidate() {
   }
 }
 
-const isLeave = ref<boolean>(true);
-const reasonLeave = ref<string>("");
-
-const checkDate = computed(() => {
-  if (
-    convertDateToAPI(formDataBirth.leaveEndDate) ==
-    convertDateToAPI(formDataBirth.leaveStartDate)
-  ) {
-    return true;
-  } else {
-    return false;
-  }
-});
-
 /**  ตรวจสอบวันลา */
 async function fetchCheck() {
   if (formDataBirth.leaveStartDate && formDataBirth.leaveEndDate) {
@@ -185,45 +199,36 @@ async function fetchCheck() {
   }
 }
 
-/** แจ้งเมื่อวันลาไม่ถูกต้อง */
+/** ฟังก์ชันสำหรับ map ข้อมูลจาก props เข้า form */
-const dateEndInputStyle = computed(() => {
+async function onMapDataProps() {
-  return !isLeave.value ? "input-alert" : "";
-});
-
-/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
-const leaveDocumentList = ref<any>();
-const statusCheck = ref<any>("");
-watch(
-  () => props.data,
-  () => {
   if (props.data) {
-      // totalCheck.value = null;
     formDataBirth.leaveWrote = props.data.leaveWrote;
     formDataBirth.leaveStartDate = props.data.leaveStartDate;
     formDataBirth.leaveEndDate = props.data.leaveEndDate;
     formDataBirth.leaveTotal = props.data.leaveTotal;
     formDataBirth.leaveDetail = props.data.leaveDetail;
+    formDataBirth.leaveRange = props.data.leaveRange;
     formDataBirth.leaveRangeEnd = props.data.leaveRangeEnd;
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
+    leaveId.value = props.data.id;
+  }
+}
+
+/** ตรวจสอบการเปลี่ยนแปลงข้อมูลใน props */
+watch(
+  () => props.data,
+  async () => {
+    await onMapDataProps();
     formDataBirth.leaveDocument = [];
-    }
+  },
-  }
+  { deep: true }
 );
 
 /** Hook */
 onMounted(() => {
   if (props.data) {
-    // totalCheck.value = null;
+    onMapDataProps();
-    formDataBirth.leaveWrote = props.data.leaveWrote;
-    formDataBirth.leaveStartDate = props.data.leaveStartDate;
-    formDataBirth.leaveEndDate = props.data.leaveEndDate;
-    formDataBirth.leaveTotal = props.data.leaveTotal;
-    formDataBirth.leaveDetail = props.data.leaveDetail;
-    leaveDocumentList.value = props.data.leaveDocument;
-    formDataBirth.leaveRange = props.data.leaveRange;
-    formDataBirth.leaveRangeEnd = props.data.leaveRangeEnd;
-    statusCheck.value = props.data.status;
     leaveId.value = props.data.id;
   }
 });
@@ -387,7 +392,7 @@ onMounted(() => {
                 dense
                 bg-color="white"
                 v-model="formDataBirth.leaveRangeEnd"
-                :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
+                :options="dataStore.rangeOptions.filter((items:DataOptions)=> items.id !== 'AFTERNOON')"
                 emit-value
                 map-options
                 option-value="id"

src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue

@@ -8,6 +8,10 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useLeaveStore } from "@/modules/05_leave/store";
 
 import type { FormRef } from "@/modules/05_leave/interface/request/HelpWifeForm";
+import type {
+  DocumentLists,
+  DataOptions,
+} from "@/modules/05_leave/interface/index/main";
 
 /** Use */
 const $q = useQuasar();
@@ -65,8 +69,8 @@ const leaveAddressRef = ref<object | null>(null);
 const leaveDetailRef = ref<object | null>(null);
 const leaveDocumentRef = ref<object | null>(null);
 
-const leaveDocumentList = ref<any>();
+const leaveDocumentList = ref<DocumentLists[]>([]);
-const statusCheck = ref<any>("");
+const statusCheck = ref<string>("");
 const isLeave = ref<boolean>(true);
 const dateEndInputStyle = computed(() => {
   return !isLeave.value ? "input-alert" : "";
@@ -88,8 +92,8 @@ const FormRef: FormRef = {
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
 const fileDocDataUpload = ref<File[]>([]);
-const fileUploadDoc = async (files: any) => {
+const fileUploadDoc = async (files: File[]) => {
-  files.forEach((file: any) => {
+  files.forEach((file: File) => {
     fileDocDataUpload.value.push(file);
   });
 };
@@ -168,7 +172,7 @@ async function fetchCheck() {
           ? formDataHelpWife.leaveRange
           : formDataHelpWife.leaveRangeEnd,
       })
-      .then((res: any) => {
+      .then((res) => {
         const data = res.data.result;
         formDataHelpWife.leaveTotal =
           data.totalDate - data.sumDateWork - data.sumDateHoliday;
@@ -207,7 +211,8 @@ watch(
       leaveDocumentList.value = props.data.leaveDocument;
       statusCheck.value = props.data.status;
     }
-  }
+  },
+  { deep: true }
 );
 
 /**Hook */
@@ -386,7 +391,7 @@ onMounted(async () => {
                 dense
                 bg-color="white"
                 v-model="formDataHelpWife.leaveRangeEnd"
-                :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
+                :options="dataStore.rangeOptions.filter((items:DataOptions)=> items.id !== 'AFTERNOON')"
                 emit-value
                 map-options
                 option-value="id"

src/modules/05_leave/components/FormLeave/05_VacationForm.vue

@@ -9,6 +9,7 @@ import { useLeaveStore } from "@/modules/05_leave/store";
 
 import type { FormRef } from "@/modules/05_leave/interface/request/VacationForm";
 import type { DataOption } from "@/modules/14_IDP/interface/Main";
+import type { DocumentLists } from "@/modules/05_leave/interface/index/main";
 
 /** Use */
 const $q = useQuasar();
@@ -84,14 +85,14 @@ const FormRef: FormRef = {
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
 const fileDocDataUpload = ref<File[]>([]);
-const fileUploadDoc = async (files: any) => {
+const fileUploadDoc = async (files: File[]) => {
-  files.forEach((file: any) => {
+  files.forEach((file: File) => {
     fileDocDataUpload.value.push(file);
   });
 };
 
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
-const leaveDocumentList = ref<any>();
+const leaveDocumentList = ref<DocumentLists[]>([]);
 const statusCheck = ref<string>("");
 
 /** แจ้งเมื่อวันลาไม่ถูกต้อง */
@@ -173,7 +174,7 @@ async function fetchCheck() {
           ? formDataVacation.leaveRange
           : formDataVacation.leaveRangeEnd,
       })
-      .then((res: any) => {
+      .then((res) => {
         const data = res.data.result;
         formDataVacation.leaveTotal =
           data.totalDate - data.sumDateWork - data.sumDateHoliday;
@@ -186,7 +187,7 @@ async function fetchCheck() {
             : "ช่วงวันลาที่ระบุไม่ถูกต้อง";
         isLeave.value = formDataVacation.leaveTotal > 0 ? data.isLeave : false;
       })
-      .catch((e: any) => {
+      .catch((e) => {
         messageError($q, e);
       })
       .finally(() => {
@@ -213,7 +214,8 @@ watch(
       formDataVacation.leaveRange = props.data.leaveRange;
       formDataVacation.leaveDocument = [];
     }
-  }
+  },
+  { deep: true }
 );
 
 /**Hook */

src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue

@@ -8,6 +8,10 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useLeaveStore } from "@/modules/05_leave/store";
 
 import type { OrdinationForm } from "@/modules/05_leave/interface/request/AddAbsence";
+import type {
+  DocumentLists,
+  DataOptions,
+} from "@/modules/05_leave/interface/index/main";
 
 /** Use */
 const $q = useQuasar();
@@ -92,8 +96,8 @@ const formRef: OrdinationForm = {
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
 const fileDocDataUpload = ref<File[]>([]);
-const fileUploadDoc = async (files: any) => {
+const fileUploadDoc = async (files: File[]) => {
-  files.forEach((file: any) => {
+  files.forEach((file: File) => {
     fileDocDataUpload.value.push(file);
   });
 };
@@ -195,7 +199,7 @@ async function fetchCheck() {
           ? formDataOrdination.leaveRange
           : formDataOrdination.leaveRangeEnd,
       })
-      .then((res: any) => {
+      .then((res) => {
         const data = res.data.result;
         formDataOrdination.leaveTotal = data.totalDate;
         reasonLeave.value =
@@ -207,7 +211,7 @@ async function fetchCheck() {
         isLeave.value =
           formDataOrdination.leaveTotal > 0 ? data.isLeave : false;
       })
-      .catch((e: any) => {
+      .catch((e) => {
         messageError($q, e);
       })
       .finally(() => {
@@ -222,7 +226,7 @@ const dateEndInputStyle = computed(() => {
 });
 
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
-const leaveDocumentList = ref<any>();
+const leaveDocumentList = ref<DocumentLists[]>([]);
 const statusCheck = ref<string>("");
 
 watch(
@@ -253,7 +257,8 @@ watch(
       statusCheck.value = props.data.status;
       formDataOrdination.leaveDocument = [];
     }
-  }
+  },
+  { deep: true }
 );
 
 /** Hook */
@@ -450,7 +455,7 @@ onMounted(async () => {
                 dense
                 bg-color="white"
                 v-model="formDataOrdination.leaveRangeEnd"
-                :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
+                :options="dataStore.rangeOptions.filter((items:DataOptions)=> items.id !== 'AFTERNOON')"
                 emit-value
                 map-options
                 option-value="id"

src/modules/05_leave/components/FormLeave/07_HajjForm.vue

@@ -8,6 +8,10 @@ import config from "@/app.config";
 import { useLeaveStore } from "@/modules/05_leave/store";
 
 import type { HajiForm } from "@/modules/05_leave/interface/request/AddAbsence";
+import type {
+  DocumentLists,
+  DataOptions,
+} from "@/modules/05_leave/interface/index/main";
 
 /** Use */
 const dataStore = useLeaveStore();
@@ -22,7 +26,7 @@ const {
 } = mixin;
 
 const edit = ref<boolean>(true);
-const leaveId = ref<any>("");
+const leaveId = ref<string>("");
 const leaveText = ref<string>("");
 
 /** ตัวแปร ref สำหรับแสดง validate */
@@ -78,8 +82,8 @@ const formRef: HajiForm = {
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
 const fileDocDataUpload = ref<File[]>([]);
-const fileUploadDoc = async (files: any) => {
+const fileUploadDoc = async (files: File[]) => {
-  files.forEach((file: any) => {
+  files.forEach((file: File) => {
     fileDocDataUpload.value.push(file);
   });
 };
@@ -156,7 +160,7 @@ async function fetchCheck() {
           ? formDataHaji.leaveRange
           : formDataHaji.leaveRangeEnd,
       })
-      .then((res: any) => {
+      .then((res) => {
         const data = res.data.result;
         formDataHaji.leaveTotal = data.totalDate;
         leaveText.value = calculateDurationYmd(
@@ -171,7 +175,7 @@ async function fetchCheck() {
             : "ช่วงวันลาที่ระบุไม่ถูกต้อง";
         isLeave.value = formDataHaji.leaveTotal > 0 ? data.isLeave : false;
       })
-      .catch((e: any) => {
+      .catch((e) => {
         messageError($q, e);
       })
       .finally(() => {
@@ -186,8 +190,8 @@ const dateEndInputStyle = computed(() => {
 });
 
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
-const leaveDocumentList = ref<any>();
+const leaveDocumentList = ref<DocumentLists[]>([]);
-const statusCheck = ref<any>("");
+const statusCheck = ref<string>("");
 watch(
   () => props.data,
   async () => {
@@ -205,7 +209,8 @@ watch(
       statusCheck.value = props.data.status;
       formDataHaji.leaveDocument = [];
     }
-  }
+  },
+  { deep: true }
 );
 
 /**Hook */
@@ -377,7 +382,7 @@ onMounted(async () => {
               class="col-12 col-md-3 col-sm-6 inputgreen"
               bg-color="white"
               v-model="formDataHaji.leaveRangeEnd"
-              :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
+              :options="dataStore.rangeOptions.filter((items:DataOptions)=> items.id !== 'AFTERNOON')"
               emit-value
               map-options
               option-value="id"

src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue

@@ -8,6 +8,10 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useLeaveStore } from "@/modules/05_leave/store";
 
 import type { MilitaryForm } from "@/modules/05_leave/interface/request/AddAbsence";
+import type {
+  DocumentLists,
+  DataOptions,
+} from "@/modules/05_leave/interface/index/main";
 
 /** Use */
 const dataStore = useLeaveStore();
@@ -69,8 +73,8 @@ const formDataMilitary = reactive<any>({
 
 const isLeave = ref<boolean>(true);
 const fileDocDataUpload = ref<File[]>([]);
-const fileUploadDoc = async (files: any) => {
+const fileUploadDoc = async (files: File[]) => {
-  files.forEach((file: any) => {
+  files.forEach((file: File) => {
     fileDocDataUpload.value.push(file);
   });
 };
@@ -81,8 +85,8 @@ const dateEndInputStyle = computed(() => {
 });
 
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
-const leaveDocumentList = ref<any>();
+const leaveDocumentList = ref<DocumentLists[]>([]);
-const statusCheck = ref<any>("");
+const statusCheck = ref<string>("");
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const formRef: MilitaryForm = {
@@ -173,7 +177,7 @@ async function fetchCheck() {
           ? formDataMilitary.leaveRange
           : formDataMilitary.leaveRangeEnd,
       })
-      .then((res: any) => {
+      .then((res) => {
         const data = res.data.result;
         isLeave.value = data.isLeave;
         formDataMilitary.leaveTotal = data.totalDate;
@@ -184,7 +188,7 @@ async function fetchCheck() {
         reasonLeave.value =
           data.message != "" ? data.message : "จำนวนวันลาเกินที่กำหนด";
       })
-      .catch((e: any) => {
+      .catch((e) => {
         messageError($q, e);
       })
       .finally(() => {
@@ -209,7 +213,7 @@ watch(
       formDataMilitary.absentDayAt = props.data.absentDayAt;
       formDataMilitary.leaveRange = props.data.leaveRange;
       formDataMilitary.leaveRangeEnd = props.data.leaveRangeEnd;
-      const leaveTotal = await calculateDurationYmd(
+      const leaveTotal = calculateDurationYmd(
         props.data.leaveStartDate,
         props.data.leaveEndDate
       );
@@ -219,7 +223,8 @@ watch(
       statusCheck.value = props.data.status;
       formDataMilitary.leaveDocument = [];
     }
-  }
+  },
+  { deep: true }
 );
 
 /**Hook */
@@ -239,7 +244,7 @@ onMounted(async () => {
 
     formDataMilitary.leaveRange = props.data.leaveRange;
     formDataMilitary.leaveRangeEnd = props.data.leaveRangeEnd;
-    const leaveTotal = await calculateDurationYmd(
+    const leaveTotal = calculateDurationYmd(
       props.data.leaveStartDate,
       props.data.leaveEndDate
     );

src/modules/05_leave/components/FormLeave/09_StudyForm.vue

@@ -8,6 +8,7 @@ import { useLeaveStore } from "@/modules/05_leave/store";
 import { useCounterMixin } from "@/stores/mixin";
 
 import type { studyDaySubjectForm } from "@/modules/05_leave/interface/request/AddAbsence";
+import type { DocumentLists } from "@/modules/05_leave/interface/index/main";
 
 /** Use */
 const $q = useQuasar();
@@ -99,15 +100,15 @@ const formRef: studyDaySubjectForm = {
 };
 
 const fileDocDataUpload = ref<File[]>([]);
-const leaveDocumentList = ref<any>();
+const leaveDocumentList = ref<DocumentLists[]>([]);
 const statusCheck = ref<string>("");
 const isLeave = ref<boolean>(true);
 const dateEndInputStyle = computed(() => {
   return !isLeave.value ? "input-alert" : "";
 });
 
-async function fileUploadDoc(files: any) {
+async function fileUploadDoc(files: File[]) {
-  files.forEach((file: any) => {
+  files.forEach((file: File) => {
     fileDocDataUpload.value.push(file);
   });
 }
@@ -193,7 +194,7 @@ async function fetchCheck() {
           ? formDataStudy.leaveRange
           : formDataStudy.leaveRangeEnd,
       })
-      .then((res: any) => {
+      .then((res) => {
         const data = res.data.result;
         isLeave.value = data.isLeave;
         formDataStudy.leaveTotal = data.totalDate;
@@ -206,7 +207,7 @@ async function fetchCheck() {
           ? data.message
           : "จำนวนวันลาเกินที่กำหนด";
       })
-      .catch((e: any) => {
+      .catch((e) => {
         messageError($q, e);
       })
       .finally(() => {
@@ -240,14 +241,15 @@ watch(
       formDataStudy.leaveRangeEnd = props.data.leaveRangeEnd;
       formDataStudy.leaveDocument = [];
       leaveDocumentList.value = props.data.leaveDocument;
-      const leaveTotal = await calculateDurationYmd(
+      const leaveTotal = calculateDurationYmd(
         props.data.leaveStartDate,
         props.data.leaveEndDate
       );
       leaveText.value = leaveTotal;
       statusCheck.value = props.data.status;
     }
-  }
+  },
+  { deep: true }
 );
 
 /**Hook */
@@ -275,7 +277,7 @@ onMounted(async () => {
     leaveDocumentList.value = props.data.leaveDocument;
     formDataStudy.leaveTotal = props.data.leaveTotal;
 
-    const leaveTotal = await calculateDurationYmd(
+    const leaveTotal = calculateDurationYmd(
       props.data.leaveStartDate,
       props.data.leaveEndDate
     );

src/modules/05_leave/components/FormLeave/10_TrainForm.vue

@@ -8,6 +8,7 @@ import { useQuasar } from "quasar";
 import { useLeaveStore } from "@/modules/05_leave/store";
 
 import type { TrainForm } from "@/modules/05_leave/interface/request/AddAbsence";
+import type { DocumentLists } from "@/modules/05_leave/interface/index/main";
 
 /** Use */
 const $q = useQuasar();
@@ -23,7 +24,7 @@ const {
 
 const leaveText = ref<string>("");
 const edit = ref<boolean>(true);
-const leaveId = ref<any>("");
+const leaveId = ref<string>("");
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
@@ -96,7 +97,7 @@ const formRef: TrainForm = {
 };
 
 const isLeave = ref<boolean>(true);
-const leaveDocumentList = ref<any>();
+const leaveDocumentList = ref<DocumentLists[]>([]);
 const statusCheck = ref<string>("");
 const dateEndInputStyle = computed(() => {
   return !isLeave.value ? "input-alert" : "";
@@ -180,7 +181,7 @@ async function fetchCheck() {
           ? formDataTrain.leaveRange
           : formDataTrain.leaveRangeEnd,
       })
-      .then((res: any) => {
+      .then((res) => {
         const data = res.data.result;
         isLeave.value = data.isLeave;
         formDataTrain.leaveTotal = data.totalDate;
@@ -193,7 +194,7 @@ async function fetchCheck() {
           ? data.message
           : "จำนวนวันลาเกินที่กำหนด";
       })
-      .catch((e: any) => {
+      .catch((e) => {
         messageError($q, e);
       })
       .finally(() => {

src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue

@@ -9,6 +9,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useLeaveStore } from "@/modules/05_leave/store";
 
 import type { FormRef } from "@/modules/05_leave/interface/request/WorkInternationalForm";
+import type { DocumentLists } from "@/modules/05_leave/interface/index/main";
 
 /** Use */
 const $q = useQuasar();
@@ -79,8 +80,8 @@ const FormRef: FormRef = {
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
 const fileDocDataUpload = ref<File[]>([]);
-const fileUploadDoc = async (files: any) => {
+const fileUploadDoc = async (files: File[]) => {
-  files.forEach((file: any) => {
+  files.forEach((file: File) => {
     fileDocDataUpload.value.push(file);
   });
 };
@@ -187,7 +188,7 @@ async function fetchCheck() {
           ? formDataWorkInternational.leaveRange
           : formDataWorkInternational.leaveRangeEnd,
       })
-      .then((res: any) => {
+      .then((res) => {
         const data = res.data.result;
         isLeave.value = data.isLeave;
         formDataWorkInternational.leaveTotal = data.totalDate;
@@ -199,7 +200,7 @@ async function fetchCheck() {
           ? data.message
           : "จำนวนวันลาเกินที่กำหนด";
       })
-      .catch((e: any) => {
+      .catch((e) => {
         messageError($q, e);
       })
       .finally(() => {
@@ -214,7 +215,7 @@ const dateEndInputStyle = computed(() => {
 });
 
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
-const leaveDocumentList = ref<any>();
+const leaveDocumentList = ref<DocumentLists[]>([]);
 const leaveDraftDocument = ref<string>();
 const statusCheck = ref<string>("");
 
@@ -245,21 +246,10 @@ watch(
       );
       leaveText.value = leaveTotal;
     }
-  }
+  },
+  { deep: true }
 );
 
-// watch(
-//   () => formDataWorkInternational.leaveEndDate,
-//   () => {
-//     if (
-//       formDataWorkInternational.leaveStartDate !== null &&
-//       formDataWorkInternational.leaveEndDate !== null
-//     ) {
-//       fetchCheck();
-//     }
-//   }
-// );
-
 /**Hook */
 onMounted(async () => {
   if (props.data) {

src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue

@@ -8,6 +8,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useLeaveStore } from "@/modules/05_leave/store";
 
 import type { FormRef } from "@/modules/05_leave/interface/request/FollowSpouseForm";
+import type { DocumentLists } from "@/modules/05_leave/interface/index/main";
 
 /** Use */
 const dataStore = useLeaveStore();
@@ -116,10 +117,9 @@ const FormRef: FormRef = {
 };
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("");
 const fileDocDataUpload = ref<File[]>([]);
-const fileUploadDoc = async (files: any) => {
+const fileUploadDoc = async (files: File[]) => {
-  files.forEach((file: any) => {
+  files.forEach((file: File) => {
     fileDocDataUpload.value.push(file);
   });
 };
@@ -220,7 +220,7 @@ async function fetchCheck() {
           ? formDataFollowSpouse.leaveRange
           : formDataFollowSpouse.leaveRangeEnd,
       })
-      .then((res: any) => {
+      .then((res) => {
         const data = res.data.result;
         isLeave.value = data.isLeave;
         formDataFollowSpouse.leaveTotal = data.totalDate;
@@ -234,7 +234,7 @@ async function fetchCheck() {
           : "จำนวนวันลาเกินที่กำหนด";
         checkTotalHistory();
       })
-      .catch((e: any) => {
+      .catch((e) => {
         messageError($q, e);
       })
       .finally(() => {
@@ -275,8 +275,8 @@ const dateEndInputStyle = computed(() => {
 });
 
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
-const leaveDocumentList = ref<any>();
+const leaveDocumentList = ref<DocumentLists[]>([]);
-const statusCheck = ref<any>("");
+const statusCheck = ref<string>("");
 watch(
   () => props.data,
   async () => {
@@ -308,13 +308,13 @@ watch(
         props.data.coupleDayEndDateHistory;
       leaveDocumentList.value = props.data.leaveDocument;
       checkTotalHistory();
-      const leaveTotal = await calculateDurationYmd(
+      const leaveTotal = calculateDurationYmd(
         props.data.leaveStartDate,
         props.data.leaveEndDate
       );
       leaveText.value = leaveTotal;
 
-      const coupleDayTotalHistory = await calculateDurationYmd(
+      const coupleDayTotalHistory = calculateDurationYmd(
         props.data.coupleDayStartDateHistory,
         props.data.coupleDayEndDateHistory
       );
@@ -322,7 +322,8 @@ watch(
       statusCheck.value = props.data.status;
       formDataFollowSpouse.leaveDocument = [];
     }
-  }
+  },
+  { deep: true }
 );
 
 /**Hook */
@@ -356,13 +357,13 @@ onMounted(async () => {
       props.data.coupleDayEndDateHistory;
     leaveDocumentList.value = props.data.leaveDocument;
     checkTotalHistory();
-    const leaveTotal = await calculateDurationYmd(
+    const leaveTotal = calculateDurationYmd(
       props.data.leaveStartDate,
       props.data.leaveEndDate
     );
     leaveText.value = leaveTotal;
 
-    const coupleDayTotalHistory = await calculateDurationYmd(
+    const coupleDayTotalHistory = calculateDurationYmd(
       props.data.coupleDayStartDateHistory,
       props.data.coupleDayEndDateHistory
     );

src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, computed, watch } from "vue";
-import { is, useQuasar } from "quasar";
+import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 
 import type { RehabilitationForm } from "@/modules/05_leave/interface/request/AddAbsence";
@@ -8,7 +8,8 @@ import { useLeaveStore } from "@/modules/05_leave/store";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import genReport from "@/plugins/genreport";
-import { load } from "@/router/loader";
+
+import type { DocumentLists } from "@/modules/05_leave/interface/index/main";
 
 const $q = useQuasar();
 const dataStore = useLeaveStore();
@@ -24,7 +25,7 @@ const {
 
 const edit = ref<boolean>(true);
 const isSave = ref<boolean>(false);
-const leaveId = ref<any>("");
+const leaveId = ref<string>("");
 const leaveStartDateRef = ref<object | null>(null);
 const leaveEndDateRef = ref<object | null>(null);
 const leaveWroteRef = ref<object | null>(null);
@@ -106,8 +107,8 @@ async function onValidate() {
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
 const fileDocDataUpload = ref<File[]>([]);
-const fileUploadDoc = async (files: any) => {
+const fileUploadDoc = async (files: File[]) => {
-  files.forEach((file: any) => {
+  files.forEach((file: File) => {
     fileDocDataUpload.value.push(file);
   });
 };
@@ -146,7 +147,7 @@ async function fetchCheck() {
           ? formDataRehabilitation.leaveRange
           : formDataRehabilitation.leaveRangeEnd,
       })
-      .then((res: any) => {
+      .then((res) => {
         const data = res.data.result;
         isLeave.value = data.isLeave;
         formDataRehabilitation.leaveTotal = data.totalDate;
@@ -160,7 +161,7 @@ async function fetchCheck() {
           ? data.message
           : "จำนวนวันลาเกินที่กำหนด";
       })
-      .catch((e: any) => {
+      .catch((e) => {
         messageError($q, e);
         // totalCheck.value = null
       })
@@ -193,7 +194,7 @@ const dateEndInputStyle = computed(() => {
 });
 
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
-const leaveDocumentList = ref<any>();
+const leaveDocumentList = ref<DocumentLists[]>([]);
 const leaveDraftDocument = ref<string>();
 const statusCheck = ref<string>("");
 watch(
@@ -220,7 +221,8 @@ watch(
       );
       leaveText.value = leaveTotal;
     }
-  }
+  },
+  { deep: true }
 );
 
 /**Hook */

src/modules/05_leave/components/ListView.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
-import { useRouter, useRoute } from "vue-router";
+import { useRouter } from "vue-router";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useLeaveStore } from "@/modules/05_leave/store";
+import { calculateFiscalYear } from "@/utils/functions";
 
 import type { LeaveType } from "@/modules/05_leave/interface/response/leave";
 
@@ -26,7 +27,7 @@ const leaveType = ref<LeaveType[]>();
 const leaveStatus = ref<string>("");
 
 /** filter */
-const year = ref<number>(new Date().getFullYear());
+const year = ref<number>(LeaveData.fiscalYearyear);
 const type = ref<string>("00000000-0000-0000-0000-000000000000");
 const status = ref<string>("ALL");
 const filter = ref<string>("");
@@ -139,6 +140,7 @@ async function updateFilterTable(y: number, t: string, s: string, k: string) {
     type.value = t;
     status.value = s;
     filter.value = k;
+    LeaveData.fiscalYearyear = y;
     await fetchDataTable();
   }
 }
@@ -180,6 +182,7 @@ function convert(val: any) {
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
 onMounted(async () => {
+  year.value = LeaveData.fiscalYearyear;
   await fectOptionType();
   await fetchDataTable();
 });

src/modules/05_leave/components/Table.vue

@@ -4,7 +4,6 @@ import { useQuasar } from "quasar";
 
 import type { PropsTable } from "@/interface/PropsTable";
 import { useLeaveStore } from "@/modules/05_leave/store";
-import { calculateFiscalYear } from "@/utils/functions";
 
 const $q = useQuasar();
 const attrs = ref<any>(useAttrs());
@@ -83,7 +82,7 @@ watch(
 );
 
 /** filter */
-const year = ref<number>(calculateFiscalYear(new Date()));
+const year = ref<number>(leaveStore.fiscalYearyear);
 const filter = ref<string>("");
 
 /** updateVisible*/

src/modules/05_leave/interface/index/main.ts

@@ -45,7 +45,7 @@ interface LeaveItem {
   remain: number;
 }
 
-interface MainList{
+interface MainList {
   id: string;
   leaveTypeName: string;
   leaveLimit: number;
@@ -128,6 +128,17 @@ interface FormData {
   leaveRange: string;
 }
 
+interface DocumentLists {
+  docId: string;
+  path: string;
+  name: string;
+}
+
+interface DataOptions {
+  id: string;
+  name: string;
+}
+
 export type {
   OptionData,
   FormLeavetMainData,
@@ -135,5 +146,7 @@ export type {
   TypeLeave,
   LeaveItem,
   MainList,
-  FormData
+  FormData,
+  DocumentLists,
+  DataOptions,
 };

src/modules/05_leave/store.ts

@@ -15,6 +15,7 @@ import type {
   ListLeaveTable,
 } from "@/modules/05_leave/interface/response/leave";
 import type { DataOption } from "../14_IDP/interface/Main";
+import { calculateFiscalYear } from "@/utils/functions";
 
 const mixin = useCounterMixin();
 const { date2Thai, showLoader, hideLoader } = mixin;
@@ -25,7 +26,7 @@ export const useLeaveStore = defineStore("Leave", () => {
   const typeLeave = ref<string | undefined>("");
   const LeaveType = ref<string | null>("0");
   const LeaveStatus = ref<string | null>("0");
-  const fiscalYearyear = ref<Number | null>(new Date().getFullYear());
+  const fiscalYearyear = ref<number>(calculateFiscalYear(new Date()));
   const rows = ref<ListLeaveTable[]>([]);
   const leaveTypeData = ref<TypeLeave[]>([]);
   const isLoadingProfile = ref<boolean>(false); // สถานะการโหลดข้อมูลโปรไฟล์

src/modules/05_leave/views/EditPage.vue

@@ -177,8 +177,7 @@ async function fetchDataDetail(id: string) {
       formData.studyDaySubject = data.studyDaySubject ?? "-";
       formData.studyDayDegreeLevel = data.studyDayDegreeLevel ?? "-";
       formData.studyDayUniversityName = data.studyDayUniversityName ?? "-";
-      formData.studyDayTrainingSubject =
+      formData.studyDayTrainingSubject = data.studyDayTrainingSubject ?? "-";
-        data.studyDayTrainingSubject ?? "-" ?? "-";
       formData.studyDayTrainingName = data.studyDayTrainingName ?? "-";
       formData.studyDayCountry = data.studyDayCountry ?? "-";
       formData.studyDayScholarship = data.studyDayScholarship ?? "-";
@@ -254,9 +253,7 @@ function onSubmit(formData: any, isLeave: boolean = true) {
   }
 }
 
-/**
+/** function ยื่นใบลา*/
- * funciotn ยื่นใบลา
- */
 function onConfirm() {
   dialogConfirm(
     $q,
@@ -282,14 +279,8 @@ function onConfirm() {
 
 //เเจ้งเตือนลบข้อมูล
 function clickDelete(id: string, docId: string) {
-  dialogRemove($q, () => onClickDelete(id, docId));
+  dialogRemove($q, async () => {
-}
+    showLoader();
-
-/**
- * function ลบรายการ
- * @param id
- */
-async function onClickDelete(id: string, docId: string) {
     await http
       .delete(config.API.leaveDocumentId(id, docId))
       .then(async () => {
@@ -302,6 +293,7 @@ async function onClickDelete(id: string, docId: string) {
       .finally(() => {
         hideLoader();
       });
+  });
 }
 
 /** function เรียกประเภทการลา */
@@ -423,6 +415,7 @@ onMounted(async () => {
             <div class="col-12">
               <SickForm
                 v-if="model === 'LV-001' || model === 'LV-002'"
+                :type="model"
                 :data="formData"
                 :on-submit="onSubmit"
                 :on-confirm="onConfirm"