ผูก API สรุปผลการพิจารณา

src/modules/11_discipline/components/4_Result/MainPage.vue

@@ -2,6 +2,9 @@
 import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
 import Table from "@/modules/11_discipline/components/4_Result/Table.vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDisciplineResultStore } from "@/modules/11_discipline/store/ResultStore";
@@ -9,16 +12,51 @@ import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
 
 const $q = useQuasar(); // show dialog
 const router = useRouter();
-const filter = ref<string>(""); //search data table
+//search data table
 const mixin = useCounterMixin();
-const dataInvestigateDis = useDisciplineResultStore();
-const { showLoader, hideLoader } = mixin;
-const { fecthList } = dataInvestigateDis;
+const store = useDisciplineResultStore();
+const { showLoader, hideLoader, messageError } = mixin;
+const { fetchList } = store;
 
 const initialPagination = ref<Pagination>({
   rowsPerPage: 0,
 });
 
+const page = ref<number>(1);
+const pageSize = ref<number>(5);
+const maxPage = ref<number>(1);
+const filter = ref<string>("");
+
+/** function เรียกรายการผลการพิจารณาทางวินัย*/
+async function fetchListResult() {
+  showLoader();
+  await http
+    .get(
+      config.API.listResult() +
+        `?page=${page.value}&pageSize=${pageSize.value}&keyword=${filter.value}`
+    )
+    .then(async (res) => {
+      const data = res.data.result.data;
+      maxPage.value = Math.ceil(res.data.result.total / pageSize.value);
+      await fetchList(data);
+      console.log(res);
+    })
+    .catch((err) => {
+      console.log(err);
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function updateQueryString(p: number, pS: number, key: string) {
+  page.value = pS === pageSize.value ? p : 1;
+  pageSize.value = pS;
+  filter.value = key;
+  await fetchListResult();
+}
+
 /**
  * ไปหน้าแก้ไข
  * @param id ไอดีเฉพาะ รายบุคคล
@@ -32,43 +70,7 @@ function openEdit(id: string) {
  * ส่งข้อมูลจำลองไปยัง store
  */
 onMounted(async () => {
-  showLoader();
-  fecthList([
-    {
-      id: "001",
-      subject: "ทุจริตในหน้าที่",
-      interrogated: "ศิรินภา คงน้อยี่",
-      fault: "1",
-      penaltyLevel: "7",
-      caseFault: "ทุจริตในหน้าที่",
-      dateInvestigate: "2023-12-01",
-      status: "0",
-      active: "2",
-    },
-    {
-      id: "002",
-      subject: "ทุจริตในหน้าที่",
-      interrogated: "ภัทรานุช คงน้อย",
-      fault: "1",
-      penaltyLevel: "7",
-      caseFault: "ทุจริตในหน้าที่",
-      dateInvestigate: "2023-11-30",
-      status: "0",
-      active: "0",
-    },
-    {
-      id: "003",
-      subject: "กระทำทุจริตเงินกองทุน",
-      interrogated: "ปรมาพร ศรีมี",
-      fault: "2",
-      penaltyLevel: "1",
-      caseFault: "พบการทุจริต",
-      dateInvestigate: "2023-09-14",
-      status: "1",
-      active: "1",
-    },
-  ]);
-  await hideLoader();
+  await fetchListResult();
 });
 </script>
 
@@ -80,16 +82,19 @@ onMounted(async () => {
     <div>
       <Table
         style="max-height: 80vh"
-        :rows="dataInvestigateDis.rows"
-        :columns="dataInvestigateDis.columns"
-        :filter="filter"
-        :visible-columns="dataInvestigateDis.visibleColumns"
+        :rows="store.rows"
+        :columns="store.columns"
+        :visible-columns="store.visibleColumns"
         v-model:inputfilter="filter"
-        v-model:inputvisible="dataInvestigateDis.visibleColumns"
+        v-model:inputvisible="store.visibleColumns"
         :pagination="initialPagination"
         :nornmalData="true"
         :paging="true"
         :titleText="''"
+        :page="page"
+        :pageSize="pageSize"
+        :maxPage="maxPage"
+        @update:queryString="updateQueryString"
       >
         <template #columns="props">
           <q-tr :props="props" class="cursor-pointer">