ข้อมูลทะเบียนประวัติ => เพิ่ม Pagination

src/modules/04_registryNew/components/registry/registry.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted, watch, reactive } from "vue";
 import type { QInput, QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRouter } from "vue-router";
@@ -112,12 +112,24 @@ onMounted(async () => {
   fetchType();
 });
 
+/** queryString*/
+const formQuery = reactive({
+  page: 1, //*หน้า
+  pageSize: 10, //*จำนวนแถวต่อหน้า
+  keyword: "", //keyword ค้นหา
+});
+const maxPage = ref<number>(1);
+
 async function fetchData() {
   showLoader();
   await http
-    .get(config.API.registryNew)
+    .get(
+      config.API.registryNew +
+        `?page=${formQuery.page}&pageSise=${formQuery.pageSize}&keyword=${formQuery.keyword}`
+    )
     .then(async (res) => {
-      store.save(res.data.result);
+      maxPage.value = Math.ceil(res.data.result.total / formQuery.pageSize);
+      store.save(res.data.result.data);
     })
     .catch((err) => {
       messageError($q, err);
@@ -284,6 +296,23 @@ watch(posTypeId, () => {
   }, 200);
 });
 
+watch([() => formQuery.page, () => formQuery.pageSize], async () => {
+  await fetchData();
+});
+
+/**
+ * function updatePagination
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+function updatePagination(newPagination: any) {
+  formQuery.page = 1;
+  formQuery.pageSize = newPagination.rowsPerPage;
+}
+
+async function filterFn(page: number) {
+  page !== 1 ? (formQuery.page = 1) : await fetchData();
+}
+
 /**
  * function ตรวจสอบเลขประจำตัวประชาชน
  * @param citizenId เลขประจำตัวประชาชน
@@ -333,7 +362,13 @@ async function changeCardID(citizenId: string | number | null) {
     </q-btn>
     <q-space />
     <div class="row q-gutter-sm">
-      <q-input outlined dense v-model="filterKeyword" label="ค้นหา"></q-input>
+      <q-input
+        outlined
+        dense
+        v-model="formQuery.keyword"
+        label="ค้นหา"
+        @keydown.enter.prevent="filterFn(formQuery.page)"
+      ></q-input>
       <q-select
         v-model="visibleColumns"
         multiple
@@ -355,7 +390,6 @@ async function changeCardID(citizenId: string | number | null) {
       ref="table"
       :columns="columns"
       :rows="store.row"
-      :filter="filterKeyword"
       row-key="name"
       flat
       bordered
@@ -363,6 +397,8 @@ async function changeCardID(citizenId: string | number | null) {
       dense
       class="custom-header-table"
       :visible-columns="visibleColumns"
+      :rows-per-page-options="[10, 25, 50, 100]"
+      @update:pagination="updatePagination"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -376,7 +412,9 @@ async function changeCardID(citizenId: string | number | null) {
         <q-tr :props="props" class="cursor-pointer">
           <q-td v-for="col in props.cols" :key="col.id">
             <div v-if="col.name == 'no'">
-              {{ props.rowIndex + 1 }}
+              {{
+                (formQuery.page - 1) * formQuery.pageSize + props.rowIndex + 1
+              }}
             </div>
             <div v-else-if="col.name == 'fullName'">
               {{ props.row.prefix }}{{ props.row.firstName }}
@@ -432,6 +470,17 @@ async function changeCardID(citizenId: string | number | null) {
           </q-td>
         </q-tr>
       </template>
+      <template v-slot:pagination="scope">
+        <q-pagination
+          v-model="formQuery.page"
+          active-color="primary"
+          color="dark"
+          :max="maxPage"
+          size="sm"
+          boundary-links
+          direction-links
+        ></q-pagination>
+      </template>
     </d-table>
   </div>