api รายการสืบสวนข้อเท็จจริง

src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue

@@ -1,26 +1,26 @@
 <script setup lang="ts">
-import { ref, useAttrs, onMounted } from "vue";
+import { ref, useAttrs, onMounted,watch } from "vue";
 
 import router from "@/router";
 import { useQuasar } from "quasar";
-// import { useCounterMixin } from "@/stores/mixin";
+import { useCounterMixin } from "@/stores/mixin";
 
-// import config from "@/app.config";
-// import http from "@/plugins/http";
+import config from "@/app.config";
+import http from "@/plugins/http";
 
 import { useInvestigateFactStore } from "@/modules/11_discipline/store/InvestigateFactStore";
 const dataInvestigate = useInvestigateFactStore();
 const { fecthList } = dataInvestigate;
-// const mixin = useCounterMixin();
-// const {
-//   date2Thai,
-//   success,
-//   messageError,
-//   showLoader,
-//   hideLoader,
-//   dialogConfirm,
-//   dialogRemove,
-// } = mixin;
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  dialogRemove,
+} = mixin;
 const $q = useQuasar(); //ใช้ noti quasar
 
 /** ค้นหาข้อมูลในตาราง */
@@ -33,15 +33,55 @@ const resetFilter = () => {
   }
 };
 
+const currentPage = ref<number>(1);
+const maxPage = ref<number>(1);
+const page = ref<number>(1);
+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();
+})
+async function getList() {
+  showLoader();
+  await http
+    .get(
+      config.API.investigateMain(
+        currentPage.value,
+        rowsPerPage.value,
+        filterKeyword.value
+      )
+    )
+    .then((res) => {
+      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
+      const data = res.data.result.data
+      dataInvestigate.fecthList(data);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 const attrs = ref<any>(useAttrs());
 
-/** แสดงจำนวนในตาราง */
-const pagination = ref({
-  // sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
 
 /**ไปยังหน้าเพิ่มข้อมูล */
 const clickAdd = () => {
@@ -60,19 +100,7 @@ function editPage(id: string) {
  * ส่งข้อมูลจำลองไปยัง store
  */
 onMounted(async () => {
-  await fecthList([
-    {
-      id: "001",
-      subject: "ทุจริตในหน้าที่",
-      interrogated: "บุคคล",
-      complaintOffenseDetails: "NOT_SPECIFIED",
-      investigationDetail: "appoint_directors",
-      startDate: new Date ("2023-11-20"),
-      endDate: new Date ("2023-11-25"),
-      statusResult: "not_specified",
-      status: "new"
-    },
-  ]);
+  getList()
 });
 </script>
 <template>
@@ -152,6 +180,17 @@ onMounted(async () => {
         :visible-columns="dataInvestigate.visibleColumns"
         v-model:pagination="pagination"
       >
+      <template v-slot:pagination="scope">
+          <q-pagination
+            v-model="currentPage"
+            active-color="primary"
+            color="dark"
+            :max="Number(maxPage)"
+            size="sm"
+            boundary-links
+            direction-links
+          ></q-pagination>
+        </template>
         <template v-slot:header="props">
           <q-tr :props="props">
             <q-th