API ทำเรืองลาออก

src/modules/03_leave/views/Main.vue

@@ -3,6 +3,7 @@ import type { QTableProps } from "quasar";
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -10,6 +11,9 @@ import Table from "@/components/Table.vue";
 
 const router = useRouter();
 const $q = useQuasar();
+const mixin = useCounterMixin();
+const { date2Thai, dateToISO, success, messageError, showLoader, hideLoader } =
+  mixin;
 
 const filter = ref<string>("");
 const visibleColumns = ref<String[]>([
@@ -66,26 +70,7 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px; width:10%;",
   },
 ]);
-const rows = ref<any>([
-  {
-    placeLeave: "สํานักงานกรุงเทพมหานคร ",
-    dateStartLeave: "02/02/2566",
-    dateLeave: "10/03/2565",
-    status: "รอดำเนินการ",
-  },
-  {
-    placeLeave: "สํานักงานกรุงเทพมหานคร ",
-    dateStartLeave: "02/02/2566",
-    dateLeave: "10/03/2565",
-    status: "เสร็จสิ้น",
-  },
-  {
-    placeLeave: "สํานักงานกรุงเทพมหานคร ",
-    dateStartLeave: "02/02/2566",
-    dateLeave: "10/03/2565",
-    status: "เสร็จสิ้น",
-  },
-]);
+const rows = ref<any>([]);
 const initialPagination = ref({
   rowsPerPage: 0,
 });
@@ -95,9 +80,28 @@ onMounted(() => {
 });
 
 const fectListleave = async () => {
-  // console.log(config.API.listUser());
-
-  await http.get(config.API.listUser()).then((res:any)=>{}).catch((e:any)=>{});
+  showLoader();
+  await http
+    .get(config.API.listUser())
+    .then((res: any) => {
+      // console.log(res);
+      let data = res.data.result;
+      console.log(data);
+      rows.value = data.map((e: any) => ({
+        id: e.id,
+        placeLeave: e.location,
+        dateStartLeave: date2Thai(e.sendDate),
+        dateLeave: date2Thai(e.activeDate),
+        status: e.status,
+      }));
+    })
+    .catch((e: any) => {
+      console.log(e);
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 };
 
 const clickAdd = async () => {
@@ -139,7 +143,7 @@ const clickAdd = async () => {
               <q-tr
                 :props="props"
                 class="cursor-pointer"
-                @click="router.push(`/leave/1`)"
+                @click="router.push(`/leave/` + props.row.id)"
               >
                 <q-td v-for="col in props.cols" :key="col.name" :props="props">
                   <div v-if="col.name == 'no'">
@@ -148,7 +152,7 @@ const clickAdd = async () => {
                   <div v-else-if="col.name == 'status'">
                     <q-icon
                       size="20px"
-                      v-if="props.row.status == 'รอดำเนินการ'"
+                      v-if="props.row.status == 'PENDING'"
                       name="mdi-timer-sand"
                       color="deep-orange"
                     >