แก้ paging วินัย

src/modules/11_discipline/components/7_ListSuspend/ListsPage.vue

@@ -124,26 +124,19 @@ const columns = ref<QTableProps["columns"]>([
 
 const openModal = () => (modal.value = true);
 
-const currentPage = ref<number>(1);
-const maxPage = ref<number>(1);
-const page = ref<number>(1);
-
-const rowsPerPage = ref<number>(10);
-const totalList = ref<number>(0);
-
-/**
- *pagination ของตาราง
- */
+const total = ref<number>(0);
+const totalList = ref<number>(1);
 const pagination = ref({
-  descending: false,
-  page: page.value,
-  rowsPerPage: rowsPerPage.value,
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
 });
 
 function resetFilter() {
   filterKeyword.value = "";
   filterRef.value.focus();
-  getList();
+  getSearch();
 }
 
 /** เปิด popup ส่งไปออกคำสั่ง โดย PENDING*/
@@ -170,15 +163,17 @@ async function getList() {
   await http
     .get(
       config.API.suspendMain(
-        currentPage.value,
-        rowsPerPage.value,
+        pagination.value.page,
+        pagination.value.rowsPerPage,
         filterKeyword.value
       )
     )
     .then(async (res) => {
-      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
       const data = await res.data.result.data;
-      totalList.value = res.data.result.total;
+      totalList.value = Math.ceil(
+        res.data.result.total / pagination.value.rowsPerPage
+      );
+      total.value = res.data.result.total;
       await dataStore.getData(data);
       hideLoader();
     })
@@ -190,23 +185,23 @@ async function getList() {
 }
 
 function filterFn() {
+  getSearch();
+}
+
+function updatePagination(newPagination: any) {
+  pagination.value.page = 1;
+  pagination.value.rowsPerPage = newPagination.rowsPerPage;
+}
+
+function getSearch() {
+  pagination.value.page = 1;
   getList();
 }
 
-watch(
-  () => currentPage.value,
-  () => {
-    rowsPerPage.value = pagination.value.rowsPerPage;
-    getList();
-  }
-);
-
 watch(
   () => pagination.value.rowsPerPage,
-  () => {
-    rowsPerPage.value = pagination.value.rowsPerPage;
-    currentPage.value = 1;
-    getList();
+  async () => {
+    getSearch();
   }
 );
 
@@ -285,19 +280,21 @@ onMounted(async () => {
             :rows="dataStore.rows"
             row-key="id"
             :visible-columns="dataStore.visibleColumns"
-            v-model:pagination="pagination"
             :rows-per-page-options="[10, 25, 50, 100]"
+            @update:pagination="updatePagination"
           >
             <template v-slot:pagination="scope">
-              ทั้งหมด {{ totalList }} รายการ
+              ทั้งหมด {{ total }} รายการ
               <q-pagination
-                v-model="currentPage"
+                v-model="pagination.page"
                 active-color="primary"
                 color="dark"
-                :max="Number(maxPage)"
+                :max="Number(totalList)"
                 size="sm"
                 boundary-links
                 direction-links
+                :max-pages="5"
+                @update:model-value="getList"
               ></q-pagination>
             </template>
             <template v-slot:header="props">
@@ -341,9 +338,9 @@ onMounted(async () => {
                   </q-btn>
                 </q-td>
                 <q-td v-for="col in props.cols" :key="col.name" :props="props">
-                  <div v-if="col.name === 'no'">
+                  <div v-if="col.name == 'no'">
                     {{
-                      (currentPage - 1) * Number(pagination.rowsPerPage) +
+                      (pagination.page - 1) * pagination.rowsPerPage +
                       props.rowIndex +
                       1
                     }}