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

src/api/09_leave/api.leave.ts

@@ -6,4 +6,5 @@ export default {
 
   /**รายการลงเวลาปฏิบัติงาน */
   logRecord: () => `${leave}/log-record`,
+  timeRecordById: (id: string) => `${leave}/time-record/${id}`,
 };

src/modules/09_leave/components/1_Work/DialogDetail.vue

@@ -1,5 +1,16 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref, reactive, watch } from "vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { FormDetail } from "@/modules/09_leave/interface/response/work";
+
+/** importStores */
+import { useCounterMixin } from "@/stores/mixin";
+
+/** useStore */
+const mixin = useCounterMixin();
+const { date2Thai, showLoader, hideLoader } = mixin;
 
 /** props จาก TableList */
 const props = defineProps({
@@ -16,30 +27,74 @@ const props = defineProps({
     require: true,
   },
 });
-const statusEdit = ref<boolean>(false);
 
 /** รายละเอียดข้อมูล */
-const titlename = ref<string>("");
+const formData = reactive<FormDetail>({
-const timeIn = ref<string>("");
+  checkInDate: null,
-const timeOut = ref<string>("");
+  checkInImg: "",
-const coordinatesIn = ref<string>("");
+  checkInLat: null,
-const coordinatesOut = ref<string>("");
+  checkInLon: null,
-const status = ref<string>("");
+  checkInLocation: "",
+  checkInTime: "",
+  checkInStatus: "",
+  checkInDescription: "",
+  checkOutDate: null,
+  checkOutImg: "",
+  checkOutLat: null,
+  checkOutLon: null,
+  checkOutLocation: "",
+  checkOutTime: "",
+  checkOutStatus: "",
+  fullName: "",
+  checkOutDescription: "",
+});
 watch(props, () => {
   if (props.modal) {
     if (props.detail) {
-      console.log(props.detail);
+      fetchDetailByid(props.detail.id);
-      let data = props.detail;
-      titlename.value = data.fullName;
-      timeIn.value = data.timeIn;
-      timeOut.value = data.timeOut;
-      coordinatesIn.value = data.coordinatesIn;
-      coordinatesOut.value = data.coordinatesOut;
-      status.value = data.status;
     }
   }
 });
 
+/**
+ * function เรียกรายการลงเวลาตาม
+ * @param id รายการลงเวลาปฏิบัติงาน
+ */
+async function fetchDetailByid(id: string) {
+  showLoader();
+  await http
+    .get(config.API.timeRecordById(id))
+    .then((res) => {
+      const data = res.data.result;
+      formData.checkInDate = data.checkInDate && date2Thai(data.checkInDate);
+      formData.checkInImg = data.checkInImg;
+      formData.checkInLat = data.checkInLat;
+      formData.checkInLon = data.checkInLon;
+      formData.checkInLocation = data.checkInLocation;
+      formData.checkInTime = data.checkInTime;
+      formData.checkOutDate = data.checkOutDate && date2Thai(data.checkOutDate);
+      formData.checkOutImg = data.checkOutImg;
+      formData.checkOutLat = data.checkOutLat;
+      formData.checkOutLon = data.checkOutLon;
+      formData.checkOutLocation = data.checkOutLocation;
+      formData.checkOutTime = data.checkOutTime;
+      formData.fullName = data.fullName;
+      formData.checkOutLocation = data.checkOutLocation;
+      formData.checkInDescription = data.checkInDescription
+        ? data.checkInDescription
+        : "-";
+      formData.checkOutDescription = data.checkOutDescription
+        ? data.checkOutDescription
+        : "-";
+      formData.checkInStatus = data.checkInStatus;
+      formData.checkOutStatus = data.checkOutStatus;
+    })
+    .catch((err) => {})
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 /** Function ปิด popup */
 function colsePopup() {
   props.colse ? props.colse() : false;
@@ -52,7 +107,7 @@ function colsePopup() {
       <q-toolbar>
         <q-toolbar-title class="text-subtitle1 text-weight-bold">
           <span style="margin-right: 0"> รายละเอียดการลงเวลาของ</span>
-          <span class="text-primary">{{ titlename }}</span>
+          <span class="text-primary">{{ formData.fullName }}</span>
         </q-toolbar-title>
         <q-btn
           for="closeDialog"
@@ -76,7 +131,7 @@ function colsePopup() {
                       <q-item-label class="text-grey-8"
                         >ชื่อ-นามสกุล</q-item-label
                       >
-                      <q-item-label>{{ titlename }}</q-item-label>
+                      <q-item-label>{{ formData.fullName }}</q-item-label>
                     </q-item-section>
                   </q-item>
                 </q-list>
@@ -87,7 +142,7 @@ function colsePopup() {
                     <q-item-label class="text-grey-8">
                       วันที่เข้างาน</q-item-label
                     >
-                    <q-item-label>05 ต.ค. 56</q-item-label>
+                    <q-item-label>{{ formData.checkInDate }}</q-item-label>
                   </q-item-section>
                 </q-item>
               </div>
@@ -95,51 +150,10 @@ function colsePopup() {
                 <q-item>
                   <q-item-section>
                     <q-item-label class="text-grey-8">สถานะ</q-item-label>
-                    <q-item-label>{{ status }}</q-item-label>
+                    <q-item-label>{{ formData.checkInStatus }}</q-item-label>
                   </q-item-section>
                 </q-item>
               </div>
-              <!-- <div class="col row items-center">
-                <q-btn
-                  v-if="!statusEdit"
-                  for="editDialog"
-                  dense
-                  flat
-                  round
-                  color="primary"
-                  icon="mdi-pencil"
-                  size="12px"
-                  @click="statusEdit = true"
-                >
-                  <q-tooltip>แก้ไข</q-tooltip>
-                </q-btn>
-                <div v-if="statusEdit">
-                  <q-btn
-                    for="undoDialog"
-                    dense
-                    flat
-                    round
-                    color="red"
-                    icon="mdi-undo"
-                    size="12px"
-                    @click="statusEdit = false"
-                  >
-                    <q-tooltip>ยกเลิก</q-tooltip>
-                  </q-btn>
-                  <q-btn
-                    for="saveDialog"
-                    dense
-                    flat
-                    round
-                    color="secondary"
-                    icon="save"
-                    size="12px"
-                    class="q-ml-sm"
-                  >
-                    <q-tooltip>บันทึกข้อมูล</q-tooltip>
-                  </q-btn>
-                </div>
-              </div> -->
             </div>
           </q-card>
           <div class="row q-gutter-md q-pt-md">
@@ -148,11 +162,16 @@ function colsePopup() {
                 <div class="q-pa-md q-gutter-md">
                   <div class="row">
                     <div class="col text-grey-8">เวลาเข้างาน</div>
-                    <div class="col">{{ timeIn }}</div>
+                    <div class="col">{{ formData.checkInTime }}</div>
                   </div>
                   <div class="row">
                     <div class="col text-grey-8">พิกัด</div>
-                    <div class="col">{{ coordinatesIn }}</div>
+                    <div class="col">
+                      {{ formData.checkInLocation }}
+                      <div class="text-grey-6" v-if="formData.checkInLat">
+                        ({{ formData.checkInLat }}, {{ formData.checkInLon }})
+                      </div>
+                    </div>
                   </div>
                   <div class="row">
                     <div class="col-6 text-grey-8">รูปภาพ</div>
@@ -163,13 +182,13 @@ function colsePopup() {
                           max-width: 150px;
                           border-radius: 10px;
                         "
-                        src="https://picsum.photos/500/500"
+                        :src="formData.checkInImg"
                       />
                     </div>
                   </div>
                   <div class="row">
                     <div class="col text-grey-8">หมายเหตุ</div>
-                    <div class="col">-</div>
+                    <div class="col">{{ formData.checkInDescription }}</div>
                   </div>
                 </div>
               </q-card>
@@ -179,11 +198,16 @@ function colsePopup() {
                 <div class="q-pa-md q-gutter-md">
                   <div class="row">
                     <div class="col text-grey-8">เวลาออกงาน</div>
-                    <div class="col">{{ timeOut }}</div>
+                    <div class="col">{{ formData.checkOutTime }}</div>
                   </div>
                   <div class="row">
                     <div class="col text-grey-8">พิกัด</div>
-                    <div class="col">{{ coordinatesOut }}</div>
+                    <div class="col">
+                      {{ formData.checkOutLocation }}
+                      <div class="text-grey-6" v-if="formData.checkOutLat">
+                        ({{ formData.checkOutLat }}, {{ formData.checkOutLon }})
+                      </div>
+                    </div>
                   </div>
                   <div class="row">
                     <div class="col-6 text-grey-8">รูปภาพ</div>
@@ -194,13 +218,13 @@ function colsePopup() {
                           max-width: 150px;
                           border-radius: 10px;
                         "
-                        src="https://picsum.photos/500/500"
+                        :src="formData.checkOutImg"
                       />
                     </div>
                   </div>
                   <div class="row">
                     <div class="col text-grey-8">หมายเหตุ</div>
-                    <div class="col">-</div>
+                    <div class="col">{{ formData.checkOutDescription }}</div>
                   </div>
                 </div>
               </q-card>

src/modules/09_leave/components/1_Work/Tab1.vue

@@ -152,6 +152,7 @@ async function fetchListTimeRecord() {
   ];
 
   const date = new Date(workStore.selectDate as string | Date);
+  const querySting = {
     startDate: dateToISO(date), //*วันที่เริ่ม
     endDate: dateToISO(date), //*วันที่สิ้นสุด
     status: filetStatus.value, //*สถานะ

src/modules/09_leave/components/1_Work/Tab2.vue

@@ -113,15 +113,16 @@ async function fetchListLogRecord() {
       let datalist: TableRows[] = res.data.result.data.map((e: DataResLog) => ({
         id: e.id,
         fullName: e.fullName,
-        checkDate: e.checkDate && date2Thai(e.checkDate),
+        checkInDate: e.checkInDate && date2Thai(e.checkInDate),
         checkInTime: e.checkInTime,
         checkInLocation: e.checkInLocation,
         checkInLat: e.checkInLat,
         checkInLon: e.checkInLon,
+        checkOutDate: e.checkOutDate && date2Thai(e.checkOutDate),
         checkOutLocation: e.checkOutLocation,
         checkOutTime: e.checkOutTime,
-        checkOutLat: e.checkOutLat,
+        checkOutLat: e.checkOutLat ? e.checkOutLat : "",
-        checkOutLon: e.checkOutLon,
+        checkOutLon: e.checkOutLon ? e.checkOutLon : "",
       }));
       rows.value = datalist;
     })

src/modules/09_leave/interface/response/work.ts

@@ -47,14 +47,35 @@ interface DataResTime {
 interface DataResLog {
   id: string; //id รายการลงเวลาปฏิบัติงาน
   fullName: String; //ชื่อ-นามสกุล
-  checkDate: Date | null; //วันที่เข้างาน
+  checkInDate: Date | null; //วันที่เข้างาน
   checkInTime: string; //เวลาเข้างาน
   checkInLocation: String; //พิกัดเข้างาน
   checkInLat: String; //อัลติจูดเข้างาน
   checkInLon: String; //ละติจูดเข้างาน
+  checkOutDate: Date | null; //วันที่เข้างาน
   checkOutLocation: String; //พิกัดออกงาน
   checkOutTime: string; //เวลาออกงาน
   checkOutLat: String; //อัลติจูดออกงาน
   checkOutLon: String; //ละติจูดออกงาน
 }
-export type { TableRows, DataResLog, DataResTime, TableRowsTime };
+
+interface FormDetail {
+  fullName: string; //ชื่อ-นามสกุล
+  checkInDate: Date | null; //วันที่เข้างาน
+  checkInStatus: String; //สถานะการลงเวลาเข้างาน
+  checkInTime: string; //เวลาเข้างาน
+  checkInLocation: string; //ชื่อสถานที่เข้างาน
+  checkInLat: number | null; //พิกัด Lat เข้างาน
+  checkInLon: number | null; //พิกัด Lon เข้างาน
+  checkInImg: string; //รูปถ่ายเข้างาน
+  checkInDescription: string; //หมายเหตุเข้างาน
+  checkOutDate: Date | null; //วันที่ออกงาน
+  checkOutStatus: string; //สถานะการลงเวลาออกงาน
+  checkOutTime: string; //เวลาออกงาน
+  checkOutLocation: string; //ชื่อสถานที่ออกงาน
+  checkOutLat: number | null; //พิกัด Lat ออกงาน
+  checkOutLon: number | null; //พิกัด Lon ออกงาน
+  checkOutImg: string; //รูปถ่ายออกงาน
+  checkOutDescription: string; //หมายเหตุออกงาน
+}
+export type { TableRows, DataResLog, DataResTime, TableRowsTime, FormDetail };