แก้ ส่ง id เเละ paging

src/modules/01_masterdata/views/indicatorByPlan.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted } from "vue";
+import { ref, reactive, onMounted,watch } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
 import { useRouter, useRoute } from "vue-router";
 
@@ -30,6 +30,15 @@ const dataHistory = ref<DataHistory[]>([]);
 const modalHistory = ref<boolean>(false);
 const isAll = ref<boolean>(false);
 
+const total = ref<number>(0);
+const totalList = ref<number>(1);
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+
 /** หัวตาราง */
 const rows = ref<IndicatorType[]>([]);
 const columns = ref<QTableProps["columns"]>([
@@ -63,12 +72,8 @@ const roundOp = ref<DataOption[]>([
   { id: "OCT", name: "รอบตุลาคม" },
 ]);
 
-const totalList = ref<number>(1);
-
 const year = ref<number | null>(new Date().getFullYear());
 const nodeData = reactive<any>({
-  page: 1,
-  pageSize: 10,
   round: "",
   nodeId: null,
   node: null,
@@ -87,12 +92,15 @@ function fetchList() {
         nodeId: nodeData.nodeId,
         period: nodeData.round,
         year: year.value?.toString(),
-        pageSize: nodeData.pageSize,
-        page: nodeData.page,
+        pageSize: pagination.value.rowsPerPage,
+        page: pagination.value.page,
       })
       .then((res) => {
         const data = res.data.result.data;
-        totalList.value = Math.ceil(res.data.result.total / nodeData.pageSize);
+        totalList.value = Math.ceil(
+        res.data.result.total / pagination.value.rowsPerPage
+      );
+       total.value = res.data.result.total;
         rows.value = data;
       })
       .catch((err) => {
@@ -147,13 +155,7 @@ function updateSelectedTreeMain(data: any) {
     nodeData.node = data.orgLevel;
     nodeData.nodeId = data.orgTreeId;
   }
-  fetchListProjectNew();
-}
-
-/** ดึงรายละเอียดโครงสร้าง */
-function fetchListProjectNew() {
-  nodeData.page = 1;
-  fetchList();
+  getSearch();
 }
 
 /** delete */
@@ -177,7 +179,7 @@ async function deleteData(idData: string) {
 /** clear input filter */
 function clearFilter() {
   nodeData.keyword = "";
-  fetchListProjectNew();
+  getSearch();
 }
 
 /**
@@ -200,6 +202,25 @@ function onClickHistory(id: string) {
       hideLoader();
     });
 }
+
+function updatePagination(newPagination: any) {
+  pagination.value.page = 1;
+  pagination.value.rowsPerPage = newPagination.rowsPerPage;
+
+}
+
+function getSearch() {
+  pagination.value.page = 1;
+  fetchList();
+}
+
+watch(
+  () => pagination.value.rowsPerPage,
+  async () => {
+    getSearch();
+  }
+);
+
 onMounted(() => {
   fetchTree();
 });
@@ -284,7 +305,7 @@ onMounted(() => {
             year-picker
             :enableTimePicker="false"
             style="width: 150px"
-            @update:model-value="fetchListProjectNew"
+            @update:model-value="getSearch"
           >
             <template #year="{ year }">{{ year + 543 }}</template>
             <template #year-overlay-value="{ value }">{{
@@ -309,7 +330,7 @@ onMounted(() => {
                   <q-icon
                     name="cancel"
                     @click.stop.prevent="
-                      (year = null), (nodeData.page = 1), fetchListProjectNew()
+                      (year = null),getSearch()
                     "
                     class="cursor-pointer"
                   />
@@ -327,14 +348,14 @@ onMounted(() => {
             option-value="id"
             emit-value
             map-options
-            @update:model-value="fetchListProjectNew"
+            @update:model-value="getSearch"
             style="min-width: 120px"
           >
             <template v-if="nodeData.round" v-slot:append>
               <q-icon
                 name="cancel"
                 @click.stop.prevent="
-                  (nodeData.round = ''), fetchListProjectNew()
+                  (nodeData.round = ''), getSearch()
                 "
                 class="cursor-pointer"
               />
@@ -360,7 +381,7 @@ onMounted(() => {
             v-model="isAll"
             label="แสดงทั้งหมด"
             color="primary"
-            @update:model-value="fetchListProjectNew"
+            @update:model-value="getSearch"
           >
             <q-tooltip
               >แสดงตำแหน่งทั้งหมดภายใต้หน่วยงาน/ส่วนราชการที่เลือก</q-tooltip
@@ -374,7 +395,7 @@ onMounted(() => {
             outlined
             style="width: 150px"
             placeholder="ค้นหา"
-            @keydown.enter.prevent="fetchListProjectNew"
+            @keydown.enter.prevent="getSearch"
           >
             <template v-slot:append>
               <q-icon v-if="nodeData.keyword == ''" name="search" />
@@ -414,6 +435,7 @@ onMounted(() => {
             dense
             class="custom-header-table"
             :rows-per-page-options="[10, 25, 50, 100]"
+            @update:pagination="updatePagination"
             :visible-columns="visibleColumns"
           >
             <template v-slot:header="props">
@@ -531,6 +553,20 @@ onMounted(() => {
                 </q-td>
               </q-tr>
             </template>
+            <template v-slot:pagination="scope">
+              ทั้งหมด {{ total }} รายการ
+              <q-pagination
+                v-model="pagination.page"
+                active-color="primary"
+                color="dark"
+                :max="Number(totalList)"
+                size="sm"
+                boundary-links
+                direction-links
+                :max-pages="5"
+                @update:model-value="fetchList"
+              ></q-pagination>
+            </template>
           </d-table>
         </div>
       </div>