เงืนเดือนค่าจ้่าง => แสเดงรายการทั้งหมด

src/modules/13_salary/views/salaryRound.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { getDateMeta } from "@fullcalendar/core/internal";
-import { ref, reactive, onMounted } from "vue";
+import { ref, watch, onMounted } from "vue";
 import { useSalaryDataStore } from "@/modules/13_salary/store/SalaryStore";
 import { useCounterMixin } from "@/stores/mixin";
 import type { QTableProps } from "quasar";
@@ -37,6 +36,7 @@ const effectiveDate = ref<Date | null>(null);
 
 const yearData = ref<number | null>(0);
 const maxPage = ref<number>(1);
+const totalList = ref<number>(0);
 const currentPage = ref<number>(1);
 const page = ref<number>(1);
 
@@ -128,6 +128,7 @@ function getData() {
     .then((res) => {
       dataStore.fetchDataMap(res.data.result.data);
       maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
+      totalList.value = res.data.result.total;
     })
     .catch((e) => {
       messageError($q, e);
@@ -137,6 +138,7 @@ function getData() {
     });
 }
 function dataUpdate() {
+  page.value = 1;
   getData();
 }
 /** set ปี ทั้งหมด */
@@ -211,6 +213,18 @@ onMounted(async () => {
   dataStore.visibleColumns = visibleColumns.value;
   dataStore.columns = columns.value;
 });
+
+function updatePageSize(newPagination: any) {
+  page.value = 1;
+  rowsPerPage.value = newPagination.rowsPerPage;
+}
+
+watch(
+  () => rowsPerPage.value,
+  () => {
+    getData();
+  }
+);
 </script>
 
 <template>
@@ -330,8 +344,10 @@ onMounted(async () => {
         :visible-columns="dataStore.visibleColumns"
         v-model:pagination="pagination"
         :rows-per-page-options="[10, 25, 50, 100]"
+        @update:pagination="updatePageSize"
       >
         <template v-slot:pagination="scope">
+          ทั้งหมด {{ totalList }} รายการ
           <q-pagination
             v-model="currentPage"
             active-color="primary"
@@ -340,6 +356,7 @@ onMounted(async () => {
             size="sm"
             boundary-links
             direction-links
+            @update:model-value="getData"
           ></q-pagination>
         </template>
         <template v-slot:header="props">