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

src/modules/13_salary/components/salaryEmployeeChart/TabCriteria.vue

@@ -22,7 +22,6 @@ import config from "@/app.config";
 
 const posTypeOp = ref<DataOption[]>([]);
 const posType = ref<string>("");
-const maxPage = ref<number>(1);
 const $q = useQuasar();
 const {
   date2Thai,
@@ -147,6 +146,8 @@ const formFilter = reactive({
   pageSize: 10,
   keyword: "",
 });
+const maxPage = ref<number>(1);
+const totalList = ref<number>(0);
 
 function filterFn() {
   formFilter.page = 1;
@@ -171,7 +172,7 @@ function getData() {
     )
     .then((res) => {
       const data = res.data.result.data;
-      const total = res.data.result.total;
+      totalList.value = res.data.result.total;
       maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
       rows.value = data.map((item: ResponseData) => ({
         id: item.id,
@@ -271,7 +272,10 @@ onMounted(() => {
         <template v-if="posType" v-slot:append>
           <q-icon
             name="cancel"
-            @click.stop.prevent="posType = '';getData()"
+            @click.stop.prevent="
+              posType = '';
+              getData();
+            "
             class="cursor-pointer"
           />
         </template>
@@ -409,6 +413,7 @@ onMounted(() => {
       </q-tr>
     </template>
     <template v-slot:pagination="scope">
+      ทั้งหมด {{ totalList }} รายการ
       <q-pagination
         v-model="formFilter.page"
         active-color="primary"

src/modules/13_salary/components/salaryEmployeeChart/TabStructure.vue

@@ -39,6 +39,7 @@ const formFilter = reactive<FormFilter>({
   keyword: "",
 });
 const maxPage = ref<number>(1);
+const totalList = ref<number>(0);
 
 /** ข้อมูล Table*/
 const columns = ref<QTableProps["columns"]>([
@@ -119,6 +120,7 @@ function fetchListChart() {
     )
     .then((res) => {
       rows.value = res.data.result.data;
+      totalList.value = res.data.result.total;
       maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
     })
     .catch((err) => {
@@ -349,6 +351,7 @@ onMounted(() => {
       </q-tr>
     </template>
     <template v-slot:pagination="scope">
+      ทั้งหมด {{ totalList }} รายการ
       <q-pagination
         v-model="formFilter.page"
         active-color="primary"

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

@@ -483,6 +483,7 @@ function redirectToPage(id: string, status: string) {
             bordered
             dense
             class="custom-header-table"
+            :rows-per-page-options="[10, 25, 50, 100, 500]"
             :visible-columns="visibleColumns"
             v-model:pagination="pagination"
           >

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

@@ -100,6 +100,7 @@ const formFilter = reactive<FormFilter>({
   keyword: "",
 });
 const maxPage = ref<number>(1);
+const totalList = ref<number>(0);
 
 const pagination = ref({
   page: formFilter.page,
@@ -127,6 +128,7 @@ function fetchSalalyEmployeeRate() {
     .then((res) => {
       rows.value = res.data.result.data;
       maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
+      totalList.value = res.data.result.total;
     })
     .catch((err) => {
       messageError($q, err);
@@ -346,6 +348,7 @@ onMounted(() => {
           </q-tr>
         </template>
         <template v-slot:pagination="scope">
+          ทั้งหมด {{ totalList }} รายการ
           <q-pagination
             v-model="formFilter.page"
             active-color="primary"

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

@@ -33,7 +33,7 @@ const {
   hideLoader,
 } = useCounterMixin();
 
-const isActive = ref<boolean>(false)
+const isActive = ref<boolean>(false);
 const salaryId = ref<string>(route.params.id.toString());
 
 /** modalDialog*/
@@ -121,7 +121,8 @@ const formQuery = reactive<FormQuerySalary>({
   pageSize: 100, //*จำนวนแถวต่อหน้า
   keyword: "", //keyword ค้นหา
 });
-const totalRow = ref<number>(1);
+const maxPage = ref<number>(1);
+const totalRow = ref<number>(0);
 
 async function fetchListSalalyRate() {
   showLoader();
@@ -134,7 +135,8 @@ async function fetchListSalalyRate() {
         `?page=${page}&pageSize=${pageSize}&keyword=${keyword}`
     )
     .then((res) => {
-      totalRow.value = Math.ceil(res.data.result.total / formQuery.pageSize);
+      maxPage.value = Math.ceil(res.data.result.total / formQuery.pageSize);
+      totalRow.value = res.data.result.total;
 
       rows.value = res.data.result.data;
     })
@@ -202,14 +204,14 @@ function clickDownload() {
       hideLoader();
     });
 }
-function fetchList(){
+function fetchList() {
   http
-  .get(config.API.salaryChartByid(salaryId.value))
-  .then((res)=>{
-    isActive.value = res.data.result.isActive
-  })
-  .catch((e)=>{})
-  .finally(()=>{})
+    .get(config.API.salaryChartByid(salaryId.value))
+    .then((res) => {
+      isActive.value = res.data.result.isActive;
+    })
+    .catch((e) => {})
+    .finally(() => {});
 }
 onMounted(async () => {
   await fetchList();
@@ -240,7 +242,7 @@ watch([() => formQuery.page, () => formQuery.pageSize], async () => {
   <q-card flat bordered class="q-pa-md">
     <div class="col-12 row">
       <q-btn
-      v-if="!isActive"
+        v-if="!isActive"
         flat
         round
         dense
@@ -285,7 +287,12 @@ watch([() => formQuery.page, () => formQuery.pageSize], async () => {
         </template>
         <template v-slot:body="props">
           <q-tr :props="props" class="cursor-pointer">
-            <q-td v-for="col in props.cols" :key="col.name" :props="props" :class="props.row.isNext === true ? 'text-edit text-bold':''">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              :class="props.row.isNext === true ? 'text-edit text-bold' : ''"
+            >
               <div v-if="col.name == 'no'">
                 {{
                   (formQuery.page - 1) * formQuery.pageSize + props.rowIndex + 1
@@ -335,7 +342,7 @@ watch([() => formQuery.page, () => formQuery.pageSize], async () => {
             </q-td>
             <q-td>
               <q-btn
-              v-if="!isActive"
+                v-if="!isActive"
                 flat
                 dense
                 icon="mdi-dots-vertical"
@@ -376,11 +383,12 @@ watch([() => formQuery.page, () => formQuery.pageSize], async () => {
           </q-tr>
         </template>
         <template v-slot:pagination="scope">
+          ทั้งหมด {{ totalRow }} รายการ
           <q-pagination
             v-model="formQuery.page"
             active-color="primary"
             color="dark"
-            :max="totalRow"
+            :max="maxPage"
             size="sm"
             boundary-links
             direction-links

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">