แก้ paging วินัย

src/modules/11_discipline/components/8_AppealComplain/MainPage.vue

@@ -31,21 +31,6 @@ const type = ref<DataOption[]>([
 
 const filterKeyword = ref<string>("");
 const dataRow = ref<RowList[]>([]);
-const currentPage = ref<number>(1);
-const maxPage = ref<number>(1);
-const page = ref<number>(1);
-const totalList = ref<number>(0);
-
-const rowsPerPage = ref<number>(10);
-
-/**
- *pagination ของตาราง
- */
-const pagination = ref({
-  descending: false,
-  page: page.value,
-  rowsPerPage: rowsPerPage.value,
-});
 
 const formData = reactive<any>({
   type: "ALL",
@@ -53,6 +38,15 @@ const formData = reactive<any>({
   year: new Date().getFullYear().toString(),
 });
 
+const total = ref<number>(0);
+const totalList = ref<number>(1);
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+
 const visibleColumns = ref<string[]>([
   "no",
   "type",
@@ -184,23 +178,6 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-watch(
-  () => currentPage.value,
-  () => {
-    rowsPerPage.value = pagination.value.rowsPerPage;
-    getData();
-  }
-);
-
-watch(
-  () => pagination.value.rowsPerPage,
-  () => {
-    rowsPerPage.value = pagination.value.rowsPerPage;
-    currentPage.value = 1;
-    getData();
-  }
-);
-
 /** ไปยังหน้าเพิ่มข้อมูล */
 function redirectToPageDetail(id: string) {
   dataStore.rowsAdd = [];
@@ -220,7 +197,7 @@ function editPage(id: string) {
 
 /** ดึงข้อมูลเมื่อ กด enter */
 function filterFn() {
-  getData();
+  getSearch();
 }
 
 /** ปิด pop up */
@@ -237,14 +214,16 @@ async function getData() {
         formData.status,
         formData.type,
         formData.year,
-        currentPage.value,
-        rowsPerPage.value,
+        pagination.value.page,
+        pagination.value.rowsPerPage,
         filterKeyword.value
       )
     )
     .then((res) => {
-      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
-      totalList.value = res.data.result.total;
+      totalList.value = Math.ceil(
+        res.data.result.total / pagination.value.rowsPerPage
+      );
+       total.value = res.data.result.total;
       fetchAppealComplain(res.data.result.data);
     })
     .catch((e) => {
@@ -257,19 +236,19 @@ async function getData() {
 
 /** update status */
 function dataUpdate() {
-  getData();
+  getSearch();
 }
 
 /** set ปี ทั้งหมด */
 function yearAll() {
   formData.year = 0;
-  getData();
+  getSearch();
 }
 
 /** ฟังชั่น เคลียฟิลเตอร์ */
 function resetFilter() {
   filterKeyword.value = "";
-  getData();
+  getSearch();
 }
 const option = ref<any[]>(dataStore.statusOptions);
 const optionType = ref<any[]>(type.value);
@@ -297,6 +276,24 @@ function filterOptionFnType(val: string, update: Function) {
   });
 }
 
+function updatePagination(newPagination: any) {
+  pagination.value.page = 1;
+  pagination.value.rowsPerPage = newPagination.rowsPerPage;
+
+}
+
+function getSearch() {
+  pagination.value.page = 1;
+  getData();
+}
+
+watch(
+  () => pagination.value.rowsPerPage,
+  async () => {
+    getSearch();
+  }
+);
+
 /** เรียกใช้งาน ฟังชั่น ตอนเริ่มโหลดหน้า */
 onMounted(async () => {
   getData();
@@ -496,19 +493,21 @@ onMounted(async () => {
         dense
         class="custom-header-table"
         :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="getData"
           ></q-pagination>
         </template>
         <template v-slot:header="props">
@@ -558,7 +557,7 @@ onMounted(async () => {
             <q-td v-for="col in props.cols" :key="col.name" :props="props">
               <div v-if="col.name == 'no'">
                 {{
-                  (currentPage - 1) * Number(pagination.rowsPerPage) +
+                  (pagination.page - 1) * pagination.rowsPerPage +
                   props.rowIndex +
                   1
                 }}