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

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

@@ -1,11 +1,14 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive } from "vue";
+import { ref, onMounted, reactive, watch } from "vue";
 import { useRouter } from "vue-router";
 import { useQuasar, type QTableProps } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import genReportXLSX from "@/plugins/genreportxlsx";
 
+/**importType*/
+import type { NewPagination } from "@/modules/15_development/interface/index/Main";
+
 /** importStore*/
 import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
 import { useCounterMixin } from "@/stores/mixin";
@@ -23,6 +26,7 @@ const formFilter = reactive({
   year: new Date().getFullYear(),
 });
 const maxPage = ref<number>(1);
+const totalList = ref<number>(0); //จำนวนข้อมูลรายการ
 
 /** use*/
 const router = useRouter();
@@ -110,12 +114,14 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 
 const agencyOp = ref<[]>([]);
+
 function fetchListOrg() {
   showLoader();
   http
     .get(config.API.developmentHistoryListOrg("officer", formFilter.year))
     .then((res) => {
       formFilter.root = null;
+      formFilter.page = 1;
       rows.value = [];
       agencyOp.value = res.data.result;
       getData();
@@ -135,6 +141,8 @@ function getData() {
     .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,
@@ -181,6 +189,23 @@ function onEdit(id: string) {
   router.push(`/development/history/${id}`);
 }
 
+/**
+ * function updatePagination
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+function updatePagination(newPagination: NewPagination) {
+  formFilter.page = 1;
+  formFilter.pageSize = newPagination.rowsPerPage;
+}
+
+/** callbackFunction ทำเมื่อมีการอัปเดท pageSize*/
+watch(
+  () => formFilter.pageSize,
+  () => {
+    getData();
+  }
+);
+
 onMounted(() => {
   fetchListOrg();
 });
@@ -275,9 +300,8 @@ onMounted(() => {
             v-model="formFilter.keyword"
             ref="filterRef"
             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" />
@@ -324,8 +348,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"
@@ -335,6 +361,7 @@ onMounted(() => {
             size="sm"
             boundary-links
             direction-links
+            @update:model-value="getData"
           ></q-pagination>
         </template>
         <template v-slot:header="props">