แก้ 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>