รายละเอียดการลงเวลา

src/modules/09_leave/components/02_WorkList/DialogDetail.vue

@@ -77,6 +77,7 @@ async function fetchDetailByid(id: string, type: string) {
     .get(config.API.recordById(id, type))
     .then((res) => {
       const data = res.data.result;
+      stores.getData(data);
       formData.checkInDate = data.checkInDate && date2Thai(data.checkInDate);
       formData.checkInImg = data.checkInImg;
       formData.checkInLat = data.checkInLat ? data.checkInLat : "";
@@ -122,9 +123,34 @@ async function fetchDetailByid(id: string, type: string) {
 
 /** Function ปิด popup */
 function closePopup() {
+  clear();
   props.close ? props.close() : false;
 }
 
+function clear() {
+  formData.checkInDate = null;
+  formData.checkInImg = "";
+  formData.checkInLat = null;
+  formData.checkInLon = null;
+  formData.checkInLocation = "";
+  formData.checkInTime = "";
+  formData.checkInStatus = "";
+  formData.checkInDescription = "";
+  formData.checkOutDate = null;
+  formData.checkOutImg = "";
+  formData.checkOutLat = null;
+  formData.checkOutLon = null;
+  formData.checkOutLocation = "";
+  formData.checkOutTime = "";
+  formData.checkOutStatus = "";
+  formData.fullName = "";
+  formData.checkOutDescription = "";
+  formData.isLocationCheckIn = false;
+  formData.checkInLocationName = "";
+  formData.isLocationCheckOut = false;
+  formData.checkOutLocationName = "";
+}
+
 const modalMap = ref<boolean>(false);
 const titleMap = ref<string>("");
 function onClickMap(title: string) {
@@ -133,11 +159,35 @@ function onClickMap(title: string) {
 }
 
 watch(
-  () => props.modal,
+  () => [props.modal, props.detail && props.detail.id],
-  () => {
+  ([newModal, newId], [oldModal, oldId]) => {
-    props.modal === true &&
+    if (props.modal && props.detail) {
-      props.detail &&
+      if (newId !== oldId) {
-      fetchDetailByid(props.detail.id, props.typeTab as string);
+        fetchDetailByid(props.detail.id, props.typeTab as string);
+      } else {
+        formData.checkInDate = stores.formData.checkInDate;
+        formData.checkInImg = stores.formData.checkInImg;
+        formData.checkInLat = stores.formData.checkInLat;
+        formData.checkInLon = stores.formData.checkInLon;
+        formData.checkInLocation = stores.formData.checkInLocation;
+        formData.checkInTime = stores.formData.checkInTime;
+        formData.checkInStatus = stores.formData.checkInStatus;
+        formData.checkInDescription = stores.formData.checkInDescription;
+        formData.checkOutDate = stores.formData.checkOutDate;
+        formData.checkOutImg = stores.formData.checkOutImg;
+        formData.checkOutLat = stores.formData.checkOutLat;
+        formData.checkOutLon = stores.formData.checkOutLon;
+        formData.checkOutLocation = stores.formData.checkOutLocation;
+        formData.checkOutTime = stores.formData.checkOutTime;
+        formData.checkOutStatus = stores.formData.checkOutStatus;
+        formData.fullName = stores.formData.fullName;
+        formData.checkOutDescription = stores.formData.checkOutDescription;
+        formData.isLocationCheckIn = stores.formData.isLocationCheckIn;
+        formData.checkInLocationName = stores.formData.checkInLocationName;
+        formData.isLocationCheckOut = stores.formData.isLocationCheckOut;
+        formData.checkOutLocationName = stores.formData.checkOutLocationName;
+      }
+    }
   }
 );
 </script>
@@ -224,7 +274,11 @@ watch(
                       ในสถานที่
                     </div>
                     <div class="col" v-else>
-                      นอกสถานที่ ({{ formData.checkInLocationName }})
+                      {{
+                        formData.checkInLocationName
+                          ? `นอกสถานที่ (${formData.checkInLocationName})`
+                          : ""
+                      }}
                     </div>
                   </div>
                   <div class="row">
@@ -270,7 +324,9 @@ watch(
                   </div>
                   <div class="row">
                     <div class="col text-grey-8">หมายเหตุ</div>
-                    <div class="col">{{ formData.checkInDescription }}</div>
+                    <div class="col">
+                      {{ formData.checkInDescription }}
+                    </div>
                   </div>
                 </div>
               </q-card>
@@ -288,7 +344,11 @@ watch(
                       ในสถานที่
                     </div>
                     <div class="col" v-else>
-                      นอกสถานที่ ({{ formData.checkOutLocationName }})
+                      {{
+                        formData.checkInLocationName
+                          ? `นอกสถานที่ (${formData.checkInLocationName})`
+                          : ""
+                      }}
                     </div>
                   </div>
                   <div class="row">
@@ -334,7 +394,9 @@ watch(
                   </div>
                   <div class="row">
                     <div class="col text-grey-8">หมายเหตุ</div>
-                    <div class="col">{{ formData.checkOutDescription }}</div>
+                    <div class="col">
+                      {{ formData.checkOutDescription }}
+                    </div>
                   </div>
                 </div>
               </q-card>

src/modules/09_leave/stores/WorkStore.ts

@@ -1,11 +1,16 @@
 import { defineStore } from "pinia";
-import { ref } from "vue";
+import { ref, reactive } from "vue";
 
+import { useCounterMixin } from "@/stores/mixin";
 /** import Type */
 import type { QTableProps } from "quasar";
+import type { FormDetail } from "@/modules/09_leave/interface/response/work";
+
 
 export const useWorklistDataStore = defineStore("work", () => {
   /** ข้อมูล Table */
+  const mixin = useCounterMixin()
+  const { date2Thai } = mixin
   const columns = ref<QTableProps["columns"]>([]);
   const visibleColumns = ref<string[]>([]);
 
@@ -29,10 +34,72 @@ export const useWorklistDataStore = defineStore("work", () => {
         return "-";
     }
   }
+
+  const formData = reactive<FormDetail>({
+    checkInDate: null,
+    checkInImg: "",
+    checkInLat: null,
+    checkInLon: null,
+    checkInLocation: "",
+    checkInTime: "",
+    checkInStatus: "",
+    checkInDescription: "",
+    checkOutDate: null,
+    checkOutImg: "",
+    checkOutLat: null,
+    checkOutLon: null,
+    checkOutLocation: "",
+    checkOutTime: "",
+    checkOutStatus: "",
+    fullName: "",
+    checkOutDescription: "",
+    isLocationCheckIn: false,
+    checkInLocationName: "",
+    isLocationCheckOut: false,
+    checkOutLocationName: "",
+  });
+
+  function getData(data: any) {
+    formData.checkInDate = data.checkInDate && date2Thai(data.checkInDate);
+    formData.checkInImg = data.checkInImg;
+    formData.checkInLat = data.checkInLat ? data.checkInLat : "";
+    formData.checkInLon = data.checkInLon ? data.checkInLon : "";
+    formData.checkInLocation = data.checkInPOI ? data.checkInPOI : "-";
+    formData.checkInTime = data.checkInTime ? data.checkInTime : "-";
+    formData.checkOutDate = data.checkOutDate && date2Thai(data.checkOutDate);
+    formData.checkOutImg = data.checkOutImg;
+    formData.checkOutLat = data.checkOutLat ? data.checkOutLat : "";
+    formData.checkOutLon = data.checkOutLon ? data.checkOutLon : "";
+    formData.checkOutLocation = data.checkOutLocation
+      ? data.checkOutLocation
+      : "-";
+    formData.checkOutTime = data.checkOutTime ? data.checkOutTime : "-";
+    formData.fullName = data.fullName;
+    formData.checkOutLocation = data.checkOutPOI ? data.checkOutPOI : "-";
+    formData.checkInDescription = data.checkInDescription
+      ? data.checkInDescription
+      : "-";
+    formData.checkOutDescription = data.checkOutDescription
+      ? data.checkOutDescription
+      : "-";
+    formData.checkInStatus = data.checkInStatus
+      ? convertSatatus(data.checkInStatus)
+      : "-";
+    formData.checkOutStatus = data.checkOutStatus
+      ? convertSatatus(data.checkOutStatus)
+      : "-";
+
+    formData.isLocationCheckIn = data.isLocationCheckIn;
+    formData.checkInLocationName = data.checkInLocationName;
+    formData.isLocationCheckOut = data.isLocationCheckOut;
+    formData.checkOutLocationName = data.checkOutLocationName;
+  }
   return {
     columns,
     visibleColumns,
     selectDate,
     convertSatatus,
+    getData,
+    formData
   };
 });