ต่อ api แก้ไข meeting

src/modules/12_evaluatePersonal/views/MainPage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { onMounted, ref, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 import http from "@/plugins/http";
@@ -20,101 +20,70 @@ const { showLoader, hideLoader, messageError } = mixin;
 const initialPagination = ref<Pagination>({
   rowsPerPage: 0,
 });
-function Detailpage(id:string) {
+function Detailpage(id: string) {
   router.push(`/evaluate/detail/${id}`);
 }
 
-const page = ref<number>(1);
+const currentPage = ref<number>(1);
 const pageSize = ref<number>(10);
 const maxPage = ref<number>(1);
+const page = ref<number>(1);
 const filter = ref<string>("");
+const rowsPerPage = ref<number>(10);
+/**
+ *pagination ของตาราง
+ */
+const pagination = ref({
+  descending: false,
+  page: page.value,
+  rowsPerPage: rowsPerPage.value,
+});
+
+watch(
+  () => currentPage.value,
+  () => {
+    rowsPerPage.value = pagination.value.rowsPerPage;
+    getList();
+  }
+);
+
+watch(
+  () => pagination.value.rowsPerPage,
+  () => {
+    rowsPerPage.value = pagination.value.rowsPerPage;
+    currentPage.value = 1;
+    getList();
+  }
+);
+
+function getList() {
+  showLoader();
+  http
+    .get(
+      config.API.evaluationMain(
+        currentPage.value,
+        rowsPerPage.value,
+        filter.value
+      )
+    )
+    .then((res) => {
+      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
+      const data = res.data.result;
+      store.fetchData(data);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
 
 /**เมื่อเริ่มโหลดหน้า
  * ส่งข้อมูลจำลองไปยัง store
  */
 onMounted(async () => {
-  store.fetchData([
-    {
-      id:'xxx1',
-      citizanId: "1230030004001",
-      fullName: "นางวัศยา ศรีสร้อย",
-      position: "ผู้อำนวยการสถาบัน",
-      level: "ปฏิบัติการ",
-      positionNumber: "สก.ก412",
-      agency: "กลุ่มงานกฎหมาย",
-      status: "WAIT_CHECK_DOC_V1",
-    },
-    {
-      id:'xxx2',
-      citizanId: "122222000401",
-      fullName: "นายสิริศักดิ์ พรมบุตร",
-      position: "นักบริหาร",
-      level: "ชำนาญการพิเศษ",
-      positionNumber: "สก.ก412",
-      agency: "กลุ่มงานกฎหมายอาคาร",
-      status: "WAIT_CHECK_DOC_V2",
-    },
-    {
-      id:'xxx3',
-      citizanId: "111111100401",
-      fullName: "นายเอกฉัท วีระโชติ ",
-      position: "นักบริหาร",
-      level: "อำนวยการ",
-      positionNumber: "สก.ก412",
-      agency: "กลุ่มงานการคลัง",
-      status: "DONE",
-    },
-    {
-      id:'xxx4',
-      citizanId: "122203000401",
-      fullName: "นางธนิดา มั่นคงประสิทธิ์",
-      position: "ผู้อำนวยการกอง",
-      level: "อาวุโส",
-      positionNumber: "สก.ก412",
-      agency: "กลุ่มกิจการสภา",
-      status: "WAIT_CHECK_DOC_V1",
-    },
-    {
-      id:'xxx5',
-      citizanId: "123003111401",
-      fullName: "นางณิชมน ลือขำ ",
-      position: "ผู้อำนวยการสถาบัน",
-      level: "ชำนาญงาน",
-      positionNumber: "สก.ก412",
-      agency: "กลุ่มกิจการสภา",
-      status: "WAIT_CHECK_DOC_V2",
-    },
-    {
-      id:'xxx6',
-      citizanId: "111111100401",
-      fullName: "นายเอกฉัท วีระโชติ ",
-      position: "นักบริหาร",
-      level: "อำนวยการ",
-      positionNumber: "สก.ก412",
-      agency: "กลุ่มงานการคลัง",
-      status: "ANNOUNCE_WEB",
-    },
-    {
-      id:'xxx7',
-      citizanId: "111111100401",
-      fullName: "นายเอกฉัท วีระโชติ ",
-      position: "นักบริหาร",
-      level: "อำนวยการ",
-      positionNumber: "สก.ก412",
-      agency: "กลุ่มงานการคลัง",
-      status: "PREPARE_DOC_V2",
-    },
-    {
-      id:'xxx8',
-      citizanId: "111111100401",
-      fullName: "นายเอกฉัท วีระโชติ ",
-      position: "นักบริหาร",
-      level: "อำนวยการ",
-      positionNumber: "สก.ก412",
-      agency: "กลุ่มงานการคลัง",
-      status: "CHECK_DOC_V2",
-    },
-  ]);
+  getList();
 });
 </script>
 
@@ -141,7 +110,12 @@ onMounted(async () => {
       >
         <template #columns="props">
           <q-tr :props="props" class="cursor-pointer">
-            <q-td v-for="col in props.cols" :key="col.name" :props="props" @click="Detailpage(props.row.id)">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="Detailpage(props.row.id)"
+            >
               <div v-if="col.name == 'no'">
                 {{ props.rowIndex + 1 }}
               </div>