แก้ paging

src/modules/06_evaluate/components/TableListEvaluate.vue

@@ -15,6 +15,9 @@ const store = useEvaluateStore();
 const mixin = useCounterMixin();
 const router = useRouter();
 
+const total = defineModel<number>("total", { required: true });
+const totalList = defineModel<number>("totalList", { required: true });
+const pagination = defineModel<any>("pagination", { required: true });
 const { dialogRemove, showLoader, hideLoader, success, messageError } = mixin;
 
 const props = defineProps({
@@ -79,15 +82,6 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-/** paging*/
-const pagination = ref({
-  descending: false,
-  page: props.page,
-  rowsPerPage: props.pageSize,
-});
-
-const currentPage = ref<number>(1);
-
 /**
  * function ส่งข้อมูลไป Update Paging
  * @param newPagination ข้อมูล Paging ใหม่
@@ -97,13 +91,9 @@ function updateProp(newPagination: any, page: number) {
   emit("update:pagination", newPagination, page);
 }
 
-/**
- * function updatePageSize
- * @param newPagination  PageSize
- */
-function updateRowsPerPagen(newPagination: any) {
+function updatePagination(newPagination: any) {
+  pagination.value.page = 1;
   pagination.value.rowsPerPage = newPagination.rowsPerPage;
-  currentPage.value = 1;
 }
 
 /**
@@ -137,11 +127,6 @@ function redirectToDetail(data: any) {
   router.push(`/evaluate/detail/${data.typeparam.toLowerCase()}/${data.id}`);
 }
 
-/** function Callblck ทำงานเมื่อ pagination มีการเปลี่ยนแปลง */
-watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
-  updateProp(pagination.value, currentPage.value);
-});
-
 /** Hook lifecycle*/
 onMounted(() => {
   store.columns = columns.value;
@@ -158,10 +143,9 @@ onMounted(() => {
     :columns="columns"
     :rows="store.row"
     dense
-    :rows-per-page-options="[10, 25, 50, 100]"
     :visible-columns="store.visibleColumns"
-    v-model:pagination="pagination"
-    @update:pagination="updateRowsPerPagen"
+    :rows-per-page-options="[1, 25, 50, 100]"
+    @update:pagination="updatePagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -252,15 +236,17 @@ onMounted(() => {
       </div>
     </template>
     <template v-slot:pagination="scope">
-      ทั้งหมด {{ store.row.length }} รายการ
+      ทั้งหมด {{ total }} รายการ
       <q-pagination
-        v-model="currentPage"
+        v-model="pagination.page"
         active-color="primary"
         color="dark"
+        :max="Number(totalList)"
         size="sm"
         boundary-links
         direction-links
-        :max="Number(props.maxPage)"
+        :max-pages="5"
+        @update:model-value="props.fetchData?.()"
       ></q-pagination>
     </template>
   </d-table>

src/modules/06_evaluate/views/EvaluateMain.vue

@@ -47,6 +47,15 @@ const listMenu = ref<ListMenu[]>([
   },
 ]);
 
+const total = ref<number>(0);
+const totalList = ref<number>(1);
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+
 /**
  * function เปืด popup เพิ่มการประเมิน
  * @param data
@@ -60,24 +69,22 @@ function openExpert() {
   router.push("/evaluate/expert");
 }
 
-/** ตัวแปร Paging*/
-const page = ref<number>(1);
-const pageSize = ref<number>(25);
-const maxPage = ref<number>(10);
-
 /** function เรียกรายการประเมิน*/
 async function fetchEvaluteList() {
   showLoader();
   const body = {
-    page: page.value,
-    pageSize: pageSize.value,
+    page: pagination.value.page,
+    pageSize: pagination.value.rowsPerPage,
     keyword: store.filterKeyword,
     status: selectedStatus.value,
   };
   await http
     .put(config.API.evaluationList(), body)
     .then(async (res) => {
-      maxPage.value = Math.ceil(res.data.result.total / pageSize.value);
+      totalList.value = Math.ceil(
+        res.data.result.total / pagination.value.rowsPerPage
+      );
+      total.value = res.data.result.total;
       store.fetchEvaluateList(res.data.result.data);
       await getProfileCheck();
     })
@@ -112,24 +119,6 @@ async function getProfileCheck() {
     });
 }
 
-/**
- * function updatePaging
- * @param newPagination  ข้อมูลใหม่ของ Paging
- * @param currentPage  หน้า Page
- */
-async function updatePaging(newPagination: any, currentPage: number) {
-  page.value = currentPage;
-  pageSize.value = newPagination.rowsPerPage;
-
-  await fetchEvaluteList();
-}
-
-async function filterFn() {
-  page.value = 1;
-  pageSize.value = pageSize.value;
-  await fetchEvaluteList();
-}
-
 const selectedStatus = ref<string[]>([
   "CHECK_SPEC",
   "PREPARE_DOC_V1",
@@ -187,6 +176,18 @@ watch(
   }
 );
 
+function getSearch() {
+  pagination.value.page = 1;
+  fetchEvaluteList();
+}
+
+watch(
+  () => pagination.value.rowsPerPage,
+  async () => {
+    getSearch();
+  }
+);
+
 /** hook lifecycle*/
 onMounted(async () => {
   await fetchEvaluteList();
@@ -260,7 +261,7 @@ onMounted(async () => {
                 option-value="val"
                 label="ค้นหาสถานะ"
                 :style="!$q.screen.gt.xs ? '' : 'width: 35vw'"
-                @update:model-value="fetchEvaluteList"
+                @update:model-value="getSearch"
                 use-input
                 @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
               >
@@ -286,7 +287,7 @@ onMounted(async () => {
                 v-model="store.filterKeyword"
                 label="ค้นหา"
                 debounce="300"
-                @keydown.enter.prevent="filterFn"
+                @keydown.enter.prevent="getSearch"
               >
                 <template v-slot:append>
                   <q-icon name="search" />
@@ -311,11 +312,10 @@ onMounted(async () => {
           </div>
           <div class="col-12">
             <TableListEvaluate
-              :page="page"
-              :pageSize="pageSize"
-              :maxPage="maxPage"
-              @update:pagination="updatePaging"
               :fetchData="fetchEvaluteList"
+              v-model:total="total"
+              v-model:total-list="totalList"
+              v-model:pagination="pagination"
             />
           </div>
         </q-card>