update pageSize รายการสมรรถณะ

src/modules/14_KPI/components/competency/01ListCompetency.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive } from "vue";
+import { ref, onMounted, reactive,watch } from "vue";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
@@ -14,6 +14,10 @@ import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+import type {
+  NewPagination,
+} from "@/modules/14_KPI/interface/index/Main";
+
 const store = useKPIDataStore();
 const router = useRouter();
 const $q = useQuasar();
@@ -117,6 +121,22 @@ function fetchNewList() {
   fetchList();
 }
 
+/**
+ * function updatePagination
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+ function updatePagination(newPagination: NewPagination) {
+  formQuery.page = 1;
+  formQuery.pageSize = newPagination.rowsPerPage;
+}
+
+watch(
+  () => formQuery.pageSize,
+  () => {
+    fetchNewList();
+  }
+);
+
 onMounted(() => {
   fetchList();
 });
@@ -188,6 +208,7 @@ onMounted(() => {
     :rows-per-page-options="[10, 25, 50, 100]"
     class="custom-header-table"
     :visible-columns="visibleColumns"
+    @update:pagination="updatePagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">