fix bug

src/modules/09_leave/views/ChangeRoundMain.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive } from "vue";
+import { ref, watch, reactive } from "vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -38,6 +38,8 @@ const formData = reactive<dataPost>({
   cardId: "",
   firstName: "",
   lastName: "",
+  page: 1,
+  pageSize: 10,
 });
 
 /**
@@ -88,7 +90,7 @@ function closeDialog() {
   modalFix.value = false;
 }
 
-function save() { 
+function save() {
   dialogConfirm($q, async () => {
     showLoader();
     await http
@@ -102,12 +104,28 @@ function save() {
         messageError($q, err);
       })
       .finally(() => {
-        hideLoader();
         closeDialog();
+        hideLoader();
       });
   });
 }
 
+/**
+ * function updatePagination
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+function updatePagination(newPagination: any) {
+  formData.page = 1;
+  formData.pageSize = newPagination.rowsPerPage;
+}
+
+watch(
+  () => formData.pageSize,
+  () => {
+    searchData();
+  }
+);
+
 /** Function ค้นหาข้อมูล */
 function searchData() {
   if (formData.cardId || formData.firstName || formData.lastName) {
@@ -154,7 +172,7 @@ function searchData() {
             hide-bottom-space
           />
           <q-btn
-            @click="searchData"
+            @click="(formData.page = 1), searchData()"
             for="#search"
             dense
             unelevated
@@ -185,6 +203,8 @@ function searchData() {
         dense
         class="custom-header-table"
         :visible-columns="dataStore.visibleColumns"
+        :rows-per-page-options="[10, 25, 50, 100]"
+        @update:pagination="updatePagination"
       >
         <!-- :paging="true" -->
         <template v-slot:header="props">
@@ -254,6 +274,20 @@ function searchData() {
             </q-td>
           </q-tr>
         </template>
+        <template v-slot:pagination="scope">
+          ทั้งหมด {{ dataStore.totalListMain }} รายการ
+          <q-pagination
+            v-model="formData.page"
+            active-color="primary"
+            color="dark"
+            :max="Number(dataStore.maxPageMain)"
+            size="sm"
+            boundary-links
+            direction-links
+            :max-pages="5"
+            @update:model-value="dataStore.fetchDataForCardId(formData)"
+          ></q-pagination>
+        </template>
       </d-table>
     </div>
   </q-card>