เงินเดือน => อัตราเงินเดือน แก้ไข Pagination

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

@@ -4,7 +4,7 @@ import { useQuasar } from "quasar";
 import { useRouter, useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import genReportXLSX from '@/plugins/genreportxlsx'
+import genReportXLSX from "@/plugins/genreportxlsx";
 /** importType*/
 import type { QTableProps } from "quasar";
 import type {
@@ -132,6 +132,8 @@ async function fetchListSalalyRate() {
         `?page=${page}&pageSize=${pageSize}&keyword=${keyword}`
     )
     .then((res) => {
+      totalRow.value = Math.ceil(res.data.result.total / formQuery.pageSize);
+
       rows.value = res.data.result.data;
     })
     .catch((err) => {
@@ -178,19 +180,20 @@ function onClickDelete(id: string) {
   });
 }
 
- function clickDownload(){
-  showLoader()
+function clickDownload() {
+  showLoader();
   http
-  .get(config.API.salaryReportByid(salaryId.value))
-  .then((res)=>{
-    const dataList = res.data.result
-    genReportXLSX(dataList,'อัตราเงินเดือน')
-  })
-  .catch((e)=>{
-    messageError($q,e)
-  }).finally(()=>{
-    hideLoader()
-  })
+    .get(config.API.salaryReportByid(salaryId.value))
+    .then((res) => {
+      const dataList = res.data.result;
+      genReportXLSX(dataList, "อัตราเงินเดือน");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 onMounted(async () => {
   await fetchListSalalyRate();
@@ -231,7 +234,13 @@ watch([() => formQuery.page, () => formQuery.pageSize], async () => {
       </q-btn>
       <q-space />
       <!-- <q-btn outline label="พิมพ์เอกสาร" icon="print" color="green" /> -->
-      <q-btn outline label="ดาวน์โหลด" icon="download" color="blue" @click="clickDownload()"/>
+      <q-btn
+        outline
+        label="ดาวน์โหลด"
+        icon="download"
+        color="blue"
+        @click="clickDownload()"
+      />
     </div>
 
     <div class="col-12 q-pt-sm">
@@ -260,9 +269,7 @@ watch([() => formQuery.page, () => formQuery.pageSize], async () => {
             <q-td v-for="col in props.cols" :key="col.name" :props="props">
               <div v-if="col.name == 'no'">
                 {{
-                  (formQuery.page - 1) * formQuery.pageSize +
-                  props.rowIndex +
-                  1
+                  (formQuery.page - 1) * formQuery.pageSize + props.rowIndex + 1
                 }}
               </div>
               <div v-else-if="col.name === 'salaryHalf'">