พัฒนาบุคคล => แสดงรายการทั้งหมด

src/modules/15_development/views/EmployeeHistory.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive } from "vue";
+import { ref, onMounted, reactive, watch } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import genReportXLSX from "@/plugins/genreportxlsx";
 import { useRouter } from "vue-router";
 
+import type { NewPagination } from "@/modules/15_development/interface/index/Main";
+
 /** importStore*/
 import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
 import { useCounterMixin } from "@/stores/mixin";
@@ -21,6 +23,8 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 const maxPage = ref<number>(1);
+const totalList = ref<number>(0); //จำนวนข้อมูลรายการ
+
 const formFilter = reactive({
   root: null,
   page: 1,
@@ -147,8 +151,9 @@ function getData() {
   http
     .post(config.API.developmentHistoryList("employee"), formFilter)
     .then((res) => {
-      console.log(res.data.result.data);
       const data = res.data.result.data;
+      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
+      totalList.value = res.data.result.total;
       rows.value = data.map((item: any) => ({
         id: item.id ? item.id : null,
         citizenId: item.citizenId ? item.citizenId : null,
@@ -171,6 +176,23 @@ function getData() {
     });
 }
 
+/**
+ * function updatePagination
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+function updatePagination(newPagination: NewPagination) {
+  formFilter.page = 1;
+  formFilter.pageSize = newPagination.rowsPerPage;
+}
+
+/** callbackFunction ทำเมื่อมีการอัปเดท pageSize*/
+watch(
+  () => formFilter.pageSize,
+  () => {
+    getData();
+  }
+);
+
 onMounted(() => {
   fetchListOrg();
 });
@@ -267,7 +289,7 @@ onMounted(() => {
             outlined
             debounce="300"
             placeholder="ค้นหา"
-            @keydown.enter.prevent="getData()"
+            @keydown.enter.prevent="(formFilter.page = 1), getData()"
           >
             <template v-slot:append>
               <q-icon v-if="formFilter.keyword == ''" name="search" />
@@ -316,8 +338,10 @@ onMounted(() => {
         :visible-columns="visibleColumns"
         v-model:pagination="pagination"
         :rows-per-page-options="[10, 25, 50, 100]"
+        @update:pagination="updatePagination"
       >
         <template v-slot:pagination="scope">
+          ทั้งหมด {{ totalList }} รายการ
           <q-pagination
             v-model="formFilter.page"
             active-color="primary"
@@ -327,6 +351,7 @@ onMounted(() => {
             size="sm"
             boundary-links
             direction-links
+            @update:model-value="getData"
           ></q-pagination>
         </template>
         <template v-slot:header="props">