ผูก API รายการลงเวลาปฏิบัติงานที่ประมวลผลแล้ว (ADMIN) #15

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

@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 /** importType*/
 import type { QTableProps } from "quasar";
@@ -19,13 +22,15 @@ import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
 /** useStore */
 const mixin = useCounterMixin();
 const workStore = useWorklistDataStore();
-const { date2Thai, dateToISO, showLoader, hideLoader } = mixin;
+const { date2Thai, dateToISO, showLoader, hideLoader, messageError } = mixin;
+
+const $q = useQuasar(); //ใช้ noti quasar
 
 const keyword = ref<string>("");
 const page = ref<number>(1);
-const rowsPerPage = ref<number>(10);
+const rowsPerPage = ref<number>(3);
 const maxPage = ref<number>(1);
-const filetStatus = ref<string>("");
+const filetStatus = ref<string>("LATE");
 
 /** ข้อมูลหัวตาราง*/
 const columns = ref<QTableProps["columns"]>([
@@ -115,42 +120,6 @@ const visibleColumns = ref<string[]>([
 const rows = ref<TableRowsTime[]>([]);
 
 async function fetchListTimeRecord() {
-  showLoader();
-  const listData: DataResTime[] = [
-    {
-      id: "00000000-0000-0000-0000-000000000000",
-      fullName: "นางอมร ใจดี",
-      checkInDate: new Date(),
-      checkInTime: "08:30",
-      checkInLocation: "สำนักงงาน",
-      checkInLat: "18.7903",
-      checkInLon: "99.0029",
-      checkInStatus: "normal",
-      checkOutDate: new Date(),
-      checkOutLocation: "สำนักงงาน",
-      checkOutTime: "18:04",
-      checkOutLat: "18.7903",
-      checkOutLon: "99.0029",
-      checkOutStatus: "late",
-    },
-    {
-      id: "00000000-0000-0000-0000-000000000000",
-      fullName: "นางอมร ใจดี",
-      checkInDate: new Date(),
-      checkInTime: "08:30",
-      checkInLocation: "สำนักงงาน",
-      checkInLat: "18.7903",
-      checkInLon: "99.0029",
-      checkInStatus: "normal",
-      checkOutDate: new Date(),
-      checkOutLocation: "สำนักงงาน",
-      checkOutTime: "18:04",
-      checkOutLat: "18.7903",
-      checkOutLon: "99.0029",
-      checkOutStatus: "late",
-    },
-  ];
-
   const date = new Date(workStore.selectDate as string | Date);
   const querySting = {
     startDate: dateToISO(date), //*วันที่เริ่ม
@@ -160,29 +129,43 @@ async function fetchListTimeRecord() {
     pageSize: rowsPerPage.value, //*จำนวนแถวต่อหน้า
     keyword: keyword.value, //keyword ค้นหา
   };
-
-  console.log(querySting);
-
-  const datalist: TableRowsTime[] = listData.map((e: DataResTime) => ({
-    id: e.id,
-    fullName: e.fullName,
-    checkInDate: e.checkInDate && date2Thai(e.checkInDate),
-    checkInTime: e.checkInTime,
-    checkInLocation: e.checkInLocation,
-    checkInLat: e.checkInLat,
-    checkInLon: e.checkInLon,
-    checkInStatus: e.checkInStatus && workStore.convertSatatus(e.checkInStatus),
-    checkOutDate: e.checkOutDate && date2Thai(e.checkOutDate),
-    checkOutLocation: e.checkOutLocation,
-    checkOutTime: e.checkOutTime,
-    checkOutLat: e.checkOutLat,
-    checkOutLon: e.checkOutLon,
-    checkOutStatus:
-      e.checkOutStatus && workStore.convertSatatus(e.checkOutStatus),
-  }));
-  rows.value = datalist;
-  maxPage.value = Math.ceil(rows.value.length / rowsPerPage.value);
-  hideLoader();
+  showLoader();
+  await http
+    .get(
+      config.API.timeRecord() +
+        `?startDate=${querySting.startDate}&endDate=${querySting.startDate}
+        &status=${querySting.status}&page=${querySting.page}&pageSize=${querySting.pageSize}&keyword=${querySting.keyword}`
+    )
+    .then((res) => {
+      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
+      const datalist: TableRowsTime[] = res.data.result.data.map(
+        (e: DataResTime) => ({
+          id: e.id,
+          fullName: e.fullName,
+          checkInDate: e.checkInDate && date2Thai(e.checkInDate),
+          checkInTime: e.checkInTime,
+          checkInLocation: e.checkInLocation,
+          checkInLat: e.checkInLat,
+          checkInLon: e.checkInLon,
+          checkInStatus:
+            e.checkInStatus && workStore.convertSatatus(e.checkInStatus),
+          checkOutDate: e.checkOutDate && date2Thai(e.checkOutDate),
+          checkOutLocation: e.checkOutLocation,
+          checkOutTime: e.checkOutTime,
+          checkOutLat: e.checkOutLat,
+          checkOutLon: e.checkOutLon,
+          checkOutStatus:
+            e.checkOutStatus && workStore.convertSatatus(e.checkOutStatus),
+        })
+      );
+      rows.value = datalist;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 async function updatePaging(
@@ -194,7 +177,7 @@ async function updatePaging(
   page.value = currentPage;
   rowsPerPage.value = params.rowsPerPage ?? rowsPerPage.value;
   keyword.value = key ?? keyword.value;
-  filetStatus.value = status;
+  filetStatus.value = status ?? filetStatus.value;
   await fetchListTimeRecord();
 }
 

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

@@ -16,10 +16,10 @@ const updateProp = (newPagination: any, keyword: string, status: string) => {
 };
 
 const option = ref<any[]>([
-  { id: "", name: "ทั้งหมด" },
-  { id: "normal", name: "ปกติ" },
-  { id: "late", name: "สาย" },
-  { id: "absent", name: "ขาดราชการ" },
+  { id: "ALL", name: "ทั้งหมด" },
+  { id: "NORMAL", name: "ปกติ" },
+  { id: "LATE", name: "สาย" },
+  { id: "ABSENT", name: "ขาดราชการ" },
 ]);
 const filetStatus = ref<string>("");
 const keyword = ref<string>("");