แก้ paging วินัย

src/modules/11_discipline/components/1_Complaint/MainPage.vue

@@ -26,18 +26,19 @@ const { fetchComplainst } = complainstStore;
 const filterRef = ref<HTMLInputElement | null>(null);
 const filterTable = ref<string>("");
 const filterKeyword = ref<string>("");
-const maxPage = ref<number>(1);
-const page = ref<number>(1);
-const rowsPerPage = ref<number>(10);
+
 const toptitle = ref<number>(0);
 const statusFilter = ref<string>("NEW");
 const option = ref<any[]>(complainstStore.statusOptions);
 
-async function updatePagingProp(rowPerpage: number, pageCurrent: number) {
-  rowsPerPage.value = rowPerpage;
-  page.value = pageCurrent;
-  await getList();
-}
+const total = ref<number>(0);
+const totalList = ref<number>(1);
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
 
 /** ดึงข้อมูล เรื่องร้องเรียน */
 async function getList() {
@@ -45,15 +46,18 @@ async function getList() {
   await http
     .get(
       config.API.complaintList(
-        page.value,
-        rowsPerPage.value,
+        pagination.value.page,
+        pagination.value.rowsPerPage,
         filterKeyword.value,
         statusFilter.value
       )
     )
     //
     .then((res) => {
-      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
+      totalList.value = Math.ceil(
+        res.data.result.total / pagination.value.rowsPerPage
+      );
+      total.value = res.data.result.total;
       toptitle.value = res.data.result.total;
       const data = res.data.result.data;
       fetchComplainst(data);
@@ -74,7 +78,7 @@ function redirectToPageadd() {
 /** ล้างค่าใน input */
 function resetFilter() {
   filterKeyword.value = "";
-  page.value = 1
+  pagination.value.page = 1;
   if (filterRef.value) {
     filterRef.value.focus();
     getList();
@@ -95,6 +99,18 @@ function filterOptionFn(val: string, update: Function) {
   });
 }
 
+function getSearch() {
+  pagination.value.page = 1;
+  getList();
+}
+
+watch(
+  () => pagination.value.rowsPerPage,
+  async () => {
+    await getSearch();
+  }
+);
+
 /** เรียกใช้งาน ฟังชั่น ตอนเริ่มโหลดหน้า */
 onMounted(async () => {
   await getList();
@@ -118,7 +134,7 @@ onMounted(async () => {
           option-label="name"
           option-value="id"
           :options="option"
-          @update:model-value="getList()"
+          @update:model-value="getSearch()"
           use-input
           @filter="filterOptionFn"
         >
@@ -133,7 +149,7 @@ onMounted(async () => {
               @click.stop.prevent="
                 (option = complainstStore.statusOptions),
                   (statusFilter = 'ALL'),
-                  getList()
+                  getSearch()
               "
               class="cursor-pointer"
             />
@@ -165,7 +181,7 @@ onMounted(async () => {
         ref="filterRef"
         outlined
         placeholder="ค้นหา"
-        @keydown.enter.prevent="getList()"
+        @keydown.enter.prevent="getSearch()"
       >
         <template v-slot:append>
           <q-icon v-if="filterKeyword == ''" name="search" />
@@ -199,11 +215,11 @@ onMounted(async () => {
     <div class="col-12">
       <TableComplaint
         :filter-table="filterTable"
-        :rows-per-page="rowsPerPage"
-        :page="page"
-        :max-page="maxPage"
-        @update:pagination="updatePagingProp"
+        v-model:pagination="pagination"
+        v-model:total="total"
+        v-model:total-list="totalList"
         :toptitle="toptitle"
+        :get-list="getList"
       />
     </div>
   </q-card>

src/modules/11_discipline/components/1_Complaint/TableComplaint.vue

@@ -6,29 +6,21 @@ import { useRouter } from "vue-router";
 
 import { checkPermission } from "@/utils/permissions";
 
-const currentPage = ref<number>(1);
 const router = useRouter();
 const complainstStore = useComplainstDataStore();
 
+const total = defineModel<number>("total", { required: true });
+const totalList = defineModel<number>("totalList", { required: true });
+const pagination = defineModel<any>("pagination", { required: true });
+
 const emit = defineEmits(["update:pagination"]);
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
+  getList: Function,
   filterTable: {
     type: String,
     default: "",
   },
-  maxPage: {
-    type: Number,
-    require: true,
-  },
-  rowsPerPage: {
-    type: Number,
-    require: true,
-  },
-  page: {
-    type: Number,
-    require: true,
-  },
   toptitle: {
     type: Number,
     require: true,
@@ -124,13 +116,6 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-/** แสดงจำนวนในตาราง */
-const pagination = ref({
-  descending: true,
-  page: Number(props.page),
-  rowsPerPage: props.rowsPerPage,
-});
-
 /**
  * ฟังชั่นสำหรับ เปลี่ยน route ตาม id ที่รับมา
  * @param id ไอดีระบุ
@@ -153,20 +138,10 @@ function onDetail(id: string) {
   router.push(`/discipline/complaints-detail/${id}`);
 }
 
-watch(
-  () => currentPage.value,
-  () => {
-    updateProp(pagination.value.rowsPerPage, currentPage.value);
-  }
-);
-
-watch(
-  () => pagination.value.rowsPerPage,
-  () => {
-    currentPage.value = 1;
-    updateProp(pagination.value.rowsPerPage, currentPage.value);
-  }
-);
+function updatePagination(newPagination: any) {
+  pagination.value.page = 1;
+  pagination.value.rowsPerPage = newPagination.rowsPerPage;
+}
 
 /** เริ่มโหลดหน้า page เอาข้อมูลไปเก็บ ใน store*/
 onMounted(() => {
@@ -181,7 +156,6 @@ onMounted(() => {
     ref="table"
     :columns="columns"
     :rows="complainstStore.rows"
-    :filter="props.filterTable"
     row-key="subject"
     flat
     bordered
@@ -189,8 +163,8 @@ onMounted(() => {
     dense
     class="custom-header-table"
     :visible-columns="complainstStore.visibleColumns"
-    v-model:pagination="pagination"
     :rows-per-page-options="[10, 25, 50, 100]"
+    @update:pagination="updatePagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -234,7 +208,7 @@ onMounted(() => {
         <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
             }}
@@ -249,15 +223,17 @@ onMounted(() => {
       </q-tr>
     </template>
     <template v-slot:pagination="scope">
-      ทั้งหมด {{ props.toptitle }}รายการ
+      ทั้งหมด {{ total }} รายการ
       <q-pagination
-        v-model="currentPage"
+        v-model="pagination.page"
         active-color="primary"
         color="dark"
-        :max="Number(props.maxPage)"
+        :max="Number(totalList)"
         size="sm"
         boundary-links
         direction-links
+        :max-pages="5"
+        @update:model-value="props.getList?.()"
       ></q-pagination>
     </template>
   </d-table>