From 1b67db241bb89ceb30fe45f0bf913164c19c07ec Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 3 Oct 2025 10:52:47 +0700
Subject: [PATCH] fix(development):sort

---
 .../components/history/DialogGov.vue          | 158 +++++++-----------
 .../15_development/interface/index/Main.ts    |   2 -
 .../15_development/interface/request/Main.ts  |   2 -
 .../15_development/views/EmployeeHistory.vue  | 121 +++++---------
 src/modules/15_development/views/History.vue  | 125 ++++----------
 src/modules/15_development/views/MainPage.vue |  90 +++-------
 .../15_development/views/Scholarship.vue      | 109 ++++--------
 7 files changed, 188 insertions(+), 419 deletions(-)

diff --git a/src/modules/15_development/components/history/DialogGov.vue b/src/modules/15_development/components/history/DialogGov.vue
index c81a24dfc..a9071f8b0 100644
--- a/src/modules/15_development/components/history/DialogGov.vue
+++ b/src/modules/15_development/components/history/DialogGov.vue
@@ -6,11 +6,11 @@ import { useQuasar, type QTableProps } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
+import { usePagination } from "@/composables/usePagination";
 
 import type {
   DataOption,
   FormFilter,
-  NewPagination,
 } from "@/modules/15_development/interface/index/Main";
 
 import Header from "@/components/DialogHeader.vue";
@@ -18,33 +18,13 @@ import Header from "@/components/DialogHeader.vue";
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const { messageError, dialogMessageNotify, showLoader, hideLoader } = mixin;
+const { pagination, params, onRequest } = usePagination("", searchFilter);
 
 const rows = ref<any[]>([]);
 const props = defineProps({
   upDate: { type: Function },
 });
 
-const maxPage = ref<number>(1); // จำนวนหน้าสูงสุด
-
-const formFilter = reactive<FormFilter>({
-  page: 1,
-  pageSize: 20,
-  keyword: "",
-  year: new Date().getFullYear(),
-  type: "",
-  posType: "",
-  posLevel: "",
-  retireYear: "",
-  rangeYear: { min: 0, max: 60 },
-  isShowRetire: null,
-  isProbation: null,
-});
-
-const pagination = ref({
-  page: 1,
-  rowsPerPage: 20,
-});
-
 const modal = defineModel<boolean>("modal", { required: true });
 const selected = ref<any[]>([]); // checkbox
 const search = ref<string>("citizenId"); // กำหนดค่าเริ่มต้น ค้นหาจาก
@@ -62,11 +42,11 @@ const govOp = ref<DataOption[]>([
 
 const visibleColumns = ref<string[]>([
   "citizenId",
-  "name",
+  "firstName",
   "position",
-  "type",
-  "level",
-  "positionSide",
+  "posType",
+  "posLevel",
+  "posExecutive",
 ]);
 
 const columns = ref<QTableProps["columns"]>([
@@ -80,7 +60,7 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "name",
+    name: "firstName",
     align: "left",
     label: "ชื่อ-นามสกุล",
     sortable: true,
@@ -99,7 +79,7 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "type",
+    name: "posType",
     align: "left",
     label: "ตำแหน่งประเภท",
     sortable: true,
@@ -108,7 +88,7 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "level",
+    name: "posLevel",
     align: "left",
     label: "ระดับตำแหน่ง",
     sortable: true,
@@ -117,7 +97,7 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "positionSide",
+    name: "posExecutive",
     align: "left",
     label: "ตําแหน่งทางการบริหาร",
     sortable: true,
@@ -168,46 +148,49 @@ function closeDialog() {
   inputSearch.value = "";
 }
 
-/** class */
-function getClass() {
-  return "inputgreen";
-}
-
 /** ดึงข้อมูลตาม keyword */
-function searchFilter() {
+async function searchFilter() {
   showLoader();
-  http
-    .get(
-      config.API.registryNew("") +
-        `?page=${formFilter.page}&pageSize=${formFilter.pageSize}&searchField=${search.value}&searchKeyword=${inputSearch.value}`
-    )
+  await http
+    .get(config.API.registryNew(""), {
+      params: {
+        ...params.value,
+        searchField: search.value,
+        searchKeyword: inputSearch.value.trim(),
+      },
+    })
     .then((res) => {
-      const data = res.data.result.data;
-      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
-      rows.value = data.map((item: any) => ({
-        id: item.id ? item.id : null,
-        name: item.firstName
-          ? `${item.prefix}${item.firstName} ${item.lastName}`
-          : null,
-        prefix: item.prefix ? item.prefix : null,
-        rank: item.rank ? item.rank : null,
-        firstName: item.firstName ? item.firstName : null,
-        lastName: item.lastName ? item.lastName : null,
-        citizenId: item.citizenId ? item.citizenId : null,
-        level: item.posLevel ? item.posLevel : null,
-        type: item.posType ? item.posType : null,
-        posLevelId: item.posLevelId ? item.posLevelId : null,
-        posTypeId: item.posTypeId ? item.posTypeId : null,
-        position: item.position ? item.position : null,
-        positionSide: item.posExecutive ? item.posExecutive : null,
-        posNo: item.posNo ? item.posNo : null,
-        org: item.org ? item.org : null,
-        rootId: item.rootId ? item.rootId : null,
-        rootDnaId: item.rootId ? item.rootDnaId : null,
-        root: item.root ? item.root : null,
-        orgRootShortName: item.orgRootShortName ? item.orgRootShortName : null,
-        orgRevisionId: item.orgRevisionId ? item.orgRevisionId : null,
-      }));
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+
+      if (result.data.length !== 0) {
+        rows.value = result.data.map((item: any) => ({
+          id: item.id ? item.id : null,
+          name: item.firstName
+            ? `${item.prefix}${item.firstName} ${item.lastName}`
+            : null,
+          prefix: item.prefix ? item.prefix : null,
+          rank: item.rank ? item.rank : null,
+          firstName: item.firstName ? item.firstName : null,
+          lastName: item.lastName ? item.lastName : null,
+          citizenId: item.citizenId ? item.citizenId : null,
+          level: item.posLevel ? item.posLevel : null,
+          type: item.posType ? item.posType : null,
+          posLevelId: item.posLevelId ? item.posLevelId : null,
+          posTypeId: item.posTypeId ? item.posTypeId : null,
+          position: item.position ? item.position : null,
+          positionSide: item.posExecutive ? item.posExecutive : null,
+          posNo: item.posNo ? item.posNo : null,
+          org: item.org ? item.org : null,
+          rootId: item.rootId ? item.rootId : null,
+          rootDnaId: item.rootId ? item.rootDnaId : null,
+          root: item.root ? item.root : null,
+          orgRootShortName: item.orgRootShortName
+            ? item.orgRootShortName
+            : null,
+          orgRevisionId: item.orgRevisionId ? item.orgRevisionId : null,
+        }));
+      }
     })
     .catch((e) => {
       messageError($q, e);
@@ -217,25 +200,10 @@ function searchFilter() {
     });
 }
 
-/** update ค่า เเถวข้อมูล */
-function updatePage(val: number) {
-  formFilter.page = val;
+function onfetchNewData() {
+  pagination.value.page = 1;
   searchFilter();
 }
-
-/** update ค่า เเถวข้อมูล */
-function updatePageSize(newPagination: NewPagination) {
-  formFilter.page = 1;
-  formFilter.pageSize = newPagination.rowsPerPage;
-}
-
-/** เช็คเเถวข้อมูลว่ามีการเปลี่ยนแปลงไหม */
-watch(
-  () => formFilter.pageSize,
-  () => {
-    searchFilter();
-  }
-);
 </script>
 <template>
   <q-dialog v-model="modal" persistent>
@@ -266,6 +234,7 @@ watch(
               label="ค้นหา"
               v-model="inputSearch"
               :mask="search === 'citizenId' ? '#############' : undefined"
+              @keyup.enter="onfetchNewData()"
             />
           </div>
           <div class="col-2">
@@ -275,13 +244,13 @@ watch(
               unelevated
               outline
               color="primary"
-              @click="(formFilter.page = 1), searchFilter()"
+              @click="onfetchNewData()"
             >
             </q-btn>
           </div>
         </div>
         <div class="q-mt-sm">
-          <d-table
+          <p-table
             style="max-height: 70vh"
             virtual-scroll
             selection="single"
@@ -298,21 +267,8 @@ watch(
             :visible-columns="visibleColumns"
             v-model:pagination="pagination"
             :rows-per-page-options="[20, 25, 50, 100]"
-            @update:pagination="updatePageSize"
+            @request="onRequest"
           >
-            <template v-slot:pagination="scope">
-              <q-pagination
-                v-model="formFilter.page"
-                active-color="primary"
-                color="dark"
-                :max="Number(maxPage)"
-                :max-pages="5"
-                size="sm"
-                boundary-links
-                direction-links
-                @update:model-value="updatePage"
-              ></q-pagination>
-            </template>
             <template v-slot:header="props">
               <q-tr :props="props">
                 <q-th class="text-center"> </q-th>
@@ -338,7 +294,7 @@ watch(
                 </q-td>
               </q-tr>
             </template>
-          </d-table>
+          </p-table>
         </div>
       </q-card-section>
       <q-separator />
diff --git a/src/modules/15_development/interface/index/Main.ts b/src/modules/15_development/interface/index/Main.ts
index 1b65e14c9..d571e21a5 100644
--- a/src/modules/15_development/interface/index/Main.ts
+++ b/src/modules/15_development/interface/index/Main.ts
@@ -13,8 +13,6 @@ interface DataOptionTechnique {
 }
 
 interface FormFilter {
-  page: number;
-  pageSize: number;
   keyword: string;
   type: string;
   year: number;
diff --git a/src/modules/15_development/interface/request/Main.ts b/src/modules/15_development/interface/request/Main.ts
index 4f906cfe3..075ba9fc2 100644
--- a/src/modules/15_development/interface/request/Main.ts
+++ b/src/modules/15_development/interface/request/Main.ts
@@ -1,7 +1,5 @@
 interface FormQueryListProject {
   year: number | null;
-  page: number;
-  pageSize: number;
   org: string;
   keyword: string;
   status: string;
diff --git a/src/modules/15_development/views/EmployeeHistory.vue b/src/modules/15_development/views/EmployeeHistory.vue
index a0f99a578..87e7f696e 100644
--- a/src/modules/15_development/views/EmployeeHistory.vue
+++ b/src/modules/15_development/views/EmployeeHistory.vue
@@ -10,9 +10,12 @@ import { useDevelopmentDataStore } from "@/modules/15_development/store/developm
 import { useCounterMixin } from "@/stores/mixin";
 import { checkPermission } from "@/utils/permissions";
 import { calculateFiscalYear } from "@/utils/function";
+import { usePagination } from "@/composables/usePagination";
 
 import type {
   NewPagination,
+  DataHistory,
+  DataOption,
   ItemsMenu,
 } from "@/modules/15_development/interface/index/Main";
 
@@ -22,24 +25,16 @@ const router = useRouter();
 const route = useRoute();
 const store = useDevelopmentDataStore();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
+const { pagination, params, onRequest } = usePagination("", getData);
 
-const maxPage = ref<number>(1); // จำนวนหน้า
-const totalList = ref<number>(0); //จำนวนข้อมูลรายการ
 const formFilter = reactive({
   root: null,
-  page: 1,
-  pageSize: 10,
   keyword: "",
   year: calculateFiscalYear(new Date()), //ปีงบประมาณ
 });
 
-const pagination = ref({
-  page: formFilter.page,
-  rowsPerPage: formFilter.pageSize,
-});
-
-const rows = ref<any[]>([]);
-const agencyOp = ref<any[]>([]);
+const rows = ref<DataHistory[]>([]);
+const agencyOp = ref<DataOption[]>([]);
 const itemMenu = ref<ItemsMenu[]>([
   {
     label: "ไฟล์ .xlsx",
@@ -54,18 +49,15 @@ const itemMenu = ref<ItemsMenu[]>([
     color: "red",
   },
 ]);
-
 const visibleColumns = ref<string[]>([
   "year",
   "citizenId",
-  "name",
+  "fullName",
   "position",
-  "type",
-  "level",
-  "positionSide",
+  "posType",
+  "posLevel",
   "projectName",
 ]);
-
 const columns = ref<QTableProps["columns"]>([
   {
     name: "year",
@@ -87,11 +79,11 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "name",
+    name: "fullName",
     align: "left",
     label: "ชื่อ-นามสกุล",
     sortable: true,
-    field: "name",
+    field: "fullName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -106,20 +98,20 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "type",
+    name: "posType",
     align: "left",
     label: "กลุ่มงาน",
     sortable: true,
-    field: "type",
+    field: "posType",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "level",
+    name: "posLevel",
     align: "left",
     label: "ระดับชั้นงาน",
     sortable: true,
-    field: "level",
+    field: "posLevel",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -141,7 +133,7 @@ async function fetchListOrg() {
     .get(config.API.developmentHistoryListOrg("employee", formFilter.year))
     .then(async (res) => {
       formFilter.root = null;
-      formFilter.page = 1;
+      pagination.value.page = 1;
       rows.value = [];
       const option = [{ name: "ทั้งหมด", id: null }];
       const optionNew = await res.data.result.map((e: string) => ({
@@ -150,7 +142,6 @@ async function fetchListOrg() {
       }));
       option.push(...optionNew);
       agencyOp.value = option;
-      // agencyOp.value = res.data.result;
       await getData();
     })
     .catch((err) => {
@@ -171,9 +162,9 @@ function onDownload(type: string) {
       year: formFilter.year,
       root: formFilter.root,
     })
-    .then((res) => {
+    .then(async (res) => {
       const dataList = res.data.result;
-      genReportXLSX(dataList, "รายการประวัติฝึกอบรม/ดูงาน ลูกจ้าง", type);
+      await genReportXLSX(dataList, "รายการประวัติฝึกอบรม/ดูงาน ลูกจ้าง", type);
     })
     .catch((e) => {
       messageError($q, e);
@@ -183,7 +174,7 @@ function onDownload(type: string) {
     });
 }
 
-/** edit page
+/** ฟังก์ชันแก้ไขข้อมูล
  * @param id id ของ row
  */
 function onEdit(id: string) {
@@ -193,30 +184,20 @@ function onEdit(id: string) {
   }
 }
 
-/** ดึงข้อมูล */
+/** ฟังก์ชันดึงข้อมูลรายการประวัติฝึกอบรม/ดูงาน */
 async function getData() {
   showLoader();
   formFilter.keyword = formFilter.keyword.trim();
   await http
-    .post(config.API.developmentHistoryList("employee"), formFilter)
+    .post(config.API.developmentHistoryList("employee"), {
+      ...params.value,
+      ...formFilter,
+      keyword: formFilter.keyword.trim(),
+    })
     .then((res) => {
-      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,
-        name: item.fullName ? item.fullName : null,
-        prefix: item.prefix ? item.prefix : null,
-        firstName: item.firstName ? item.firstName : null,
-        lastName: item.lastName ? item.lastName : null,
-        position: item.position ? item.position : null,
-        type: item.posType ? item.posType : null,
-        level: item.posLevel ? item.posLevel : null,
-        positionSide: item.posExecutive ? item.posExecutive : null,
-        projectName: item.projectName ? item.projectName : null,
-        year: item.year ? item.year : null,
-      }));
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -226,23 +207,12 @@ async function getData() {
     });
 }
 
-/**
- * function updatePagination
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePagination(newPagination: NewPagination) {
-  formFilter.page = 1;
-  formFilter.pageSize = newPagination.rowsPerPage;
+/** ฟังก์ชันดึงข้อมูลใหม่ */
+function onfetchNewData() {
+  pagination.value.page = 1;
+  getData();
 }
 
-/** callbackFunction ทำเมื่อมีการอัปเดท pageSize*/
-watch(
-  () => formFilter.pageSize,
-  () => {
-    getData();
-  }
-);
-
 /** ดึงข้อมูลเมื่อโหลดหน้าเสร็จสิ้น */
 onMounted(async () => {
   await fetchListOrg();
@@ -253,6 +223,7 @@ onMounted(async () => {
   <div class="toptitle text-dark col-12 row items-center">
     รายการประวัติฝึกอบรม/ดูงาน ลูกจ้าง
   </div>
+
   <q-card flat bordered class="q-pa-md">
     <div class="row no-wrap shadow-1 justify-between">
       <q-toolbar class="row col-8 q-pa-none q-gutter-x-sm">
@@ -307,7 +278,7 @@ onMounted(async () => {
           :options="agencyOp"
           option-value="id"
           option-label="name"
-          @update:model-value="(formFilter.page = 1), getData()"
+          @update:model-value="onfetchNewData()"
           style="min-width: 150px"
           map-options
           emit-value
@@ -359,7 +330,7 @@ onMounted(async () => {
             ref="filterRef"
             outlined
             placeholder="ค้นหา"
-            @keydown.enter.prevent="(formFilter.page = 1), getData()"
+            @keydown.enter.prevent="onfetchNewData()"
           >
             <template v-slot:append>
               <q-icon name="search" />
@@ -385,7 +356,7 @@ onMounted(async () => {
     </div>
 
     <div class="col-12">
-      <d-table
+      <p-table
         for="table"
         ref="table"
         :columns="columns"
@@ -396,24 +367,10 @@ onMounted(async () => {
         dense
         class="custom-header-table"
         :visible-columns="visibleColumns"
-        v-model:pagination="pagination"
         :rows-per-page-options="[10, 25, 50, 100]"
-        @update:pagination="updatePagination"
+        v-model:pagination="pagination"
+        @request="onRequest"
       >
-        <template v-slot:pagination="scope">
-          ทั้งหมด {{ totalList }} รายการ
-          <q-pagination
-            v-model="formFilter.page"
-            active-color="primary"
-            color="dark"
-            :max="Number(maxPage)"
-            :max-pages="5"
-            size="sm"
-            boundary-links
-            direction-links
-            @update:model-value="getData"
-          ></q-pagination>
-        </template>
         <template v-slot:header="props">
           <q-tr :props="props">
             <q-th auto-width></q-th>
@@ -444,7 +401,7 @@ onMounted(async () => {
             </q-td>
           </q-tr>
         </template>
-      </d-table>
+      </p-table>
     </div>
   </q-card>
 </template>
diff --git a/src/modules/15_development/views/History.vue b/src/modules/15_development/views/History.vue
index ed327ce9e..76a8079ea 100644
--- a/src/modules/15_development/views/History.vue
+++ b/src/modules/15_development/views/History.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive, watch } from "vue";
+import { ref, onMounted, reactive } from "vue";
 import { useRouter } from "vue-router";
 import { useQuasar, type QTableProps } from "quasar";
 
@@ -10,39 +10,31 @@ import { useDevelopmentDataStore } from "@/modules/15_development/store/developm
 import { useCounterMixin } from "@/stores/mixin";
 import { checkPermission } from "@/utils/permissions";
 import { calculateFiscalYear } from "@/utils/function";
+import { usePagination } from "@/composables/usePagination";
 
-/**
- * importType
- */
+/** importType*/
 import type {
   DataOption,
   DataHistory,
-  NewPagination,
   ItemsMenu,
 } from "@/modules/15_development/interface/index/Main";
-import type { ResHistory } from "@/modules/15_development/interface/response/Main";
 
 /** use*/
 const $q = useQuasar();
 const router = useRouter();
 const store = useDevelopmentDataStore();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
+const { pagination, params, onRequest } = usePagination("", getData);
 
 const formFilter = reactive({
   root: null,
-  page: 1,
-  pageSize: 10,
   keyword: "",
   year: calculateFiscalYear(new Date()), //ปีงบประมาณ
 });
 const agencyOp = ref<DataOption[]>([]); // หน่วยงาน
 
-/**
- * ข้อมูล Table
- */
+/** ข้อมูล Table*/
 const rows = ref<DataHistory[]>([]);
-const maxPage = ref<number>(1); //จำนวนหน้าสูงสุด
-const totalList = ref<number>(0); //จำนวนข้อมูลรายการ
 const columns = ref<QTableProps["columns"]>([
   {
     name: "year",
@@ -64,11 +56,11 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "name",
+    name: "fullName",
     align: "left",
     label: "ชื่อ-นามสกุล",
     sortable: true,
-    field: "name",
+    field: "fullName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -83,29 +75,29 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "type",
+    name: "posType",
     align: "left",
     label: "ตำแหน่งประเภท",
     sortable: true,
-    field: "type",
+    field: "posType",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "level",
+    name: "posLevel",
     align: "left",
     label: "ระดับตำแหน่ง",
     sortable: true,
-    field: "level",
+    field: "posLevel",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "positionSide",
+    name: "posExecutive",
     align: "left",
     label: "ตําแหน่งทางการบริหาร",
     sortable: true,
-    field: "positionSide",
+    field: "posExecutive",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -119,18 +111,14 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-const pagination = ref({
-  page: formFilter.page,
-  rowsPerPage: formFilter.pageSize,
-});
 const visibleColumns = ref<string[]>([
   "year",
   "citizenId",
-  "name",
+  "fullName",
   "position",
-  "type",
-  "level",
-  "positionSide",
+  "posType",
+  "posLevel",
+  "posExecutive",
   "projectName",
 ]);
 
@@ -150,16 +138,14 @@ const itemMenu = ref<ItemsMenu[]>([
   },
 ]);
 
-/**
- * function เรียกข้อมูหน่วยงาน
- */
+/** function เรียกข้อมูหน่วยงาน*/
 function fetchListOrg() {
   showLoader();
   http
     .get(config.API.developmentHistoryListOrg("officer", formFilter.year))
     .then(async (res) => {
       formFilter.root = null;
-      formFilter.page = 1;
+      pagination.value.page = 1;
       rows.value = [];
       const option = [{ name: "ทั้งหมด", id: null }];
       const optionNew = await res.data.result.map((e: string) => ({
@@ -178,29 +164,20 @@ function fetchListOrg() {
     });
 }
 
-/**
- * function เรียกข้อมูลรายการประวัติการฝึกอบรม/ดูงาน ข้าราชการกรุงเทพมหานครสามัญ
- */
+/** function เรียกข้อมูลรายการประวัติการฝึกอบรม/ดูงาน ข้าราชการกรุงเทพมหานครสามัญ*/
 async function getData() {
   showLoader();
   formFilter.keyword = formFilter.keyword.trim();
   await http
-    .post(config.API.developmentHistoryList("officer"), formFilter)
+    .post(config.API.developmentHistoryList("officer"), {
+      ...params.value,
+      ...formFilter,
+      keyword: formFilter.keyword.trim(),
+    })
     .then((res) => {
-      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: ResHistory) => ({
-        id: item.id ? item.id : null,
-        citizenId: item.citizenId ? item.citizenId : null,
-        name: item.fullName ? item.fullName : null,
-        position: item.position ? item.position : null,
-        type: item.posType ? item.posType : null,
-        level: item.posLevel ? item.posLevel : null,
-        projectName: item.projectName ? item.projectName : null,
-        positionSide: item.posExecutive ? item.posExecutive : null,
-        year: item.year ? item.year : null,
-      }));
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -246,25 +223,12 @@ 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;
+/** ฟังก์ชันเรียกข้อมูลใหม่ */
+function onfetchNewData() {
+  pagination.value.page = 1;
+  getData();
 }
 
-/**
- * callbackFunction ทำเมื่อมีการอัปเดท pageSize
- */
-watch(
-  () => formFilter.pageSize,
-  () => {
-    getData();
-  }
-);
-
 /** ดึงข้อมูลเมื่ออยู่ในหน้า */
 onMounted(() => {
   fetchListOrg();
@@ -329,7 +293,7 @@ onMounted(() => {
           :options="agencyOp"
           option-value="id"
           option-label="name"
-          @update:model-value="(formFilter.page = 1), getData()"
+          @update:model-value="onfetchNewData()"
           style="min-width: 150px"
           map-options
           emit-value
@@ -382,7 +346,7 @@ onMounted(() => {
             ref="filterRef"
             outlined
             placeholder="ค้นหา"
-            @keydown.enter.prevent="(formFilter.page = 1), getData()"
+            @keydown.enter.prevent="onfetchNewData()"
           >
             <template v-slot:append>
               <q-icon name="search" />
@@ -406,7 +370,7 @@ onMounted(() => {
       </q-toolbar>
     </div>
     <div class="col-12">
-      <d-table
+      <p-table
         for="table"
         ref="table"
         :columns="columns"
@@ -419,7 +383,7 @@ onMounted(() => {
         :visible-columns="visibleColumns"
         v-model:pagination="pagination"
         :rows-per-page-options="[10, 25, 50, 100]"
-        @update:pagination="updatePagination"
+        @request="onRequest"
       >
         <template v-slot:header="props">
           <q-tr :props="props">
@@ -452,22 +416,7 @@ onMounted(() => {
             </q-td>
           </q-tr>
         </template>
-
-        <template v-slot:pagination="scope">
-          ทั้งหมด {{ totalList }} รายการ
-          <q-pagination
-            v-model="formFilter.page"
-            active-color="primary"
-            color="dark"
-            :max="Number(maxPage)"
-            :max-pages="5"
-            size="sm"
-            boundary-links
-            direction-links
-            @update:model-value="getData"
-          ></q-pagination>
-        </template>
-      </d-table>
+      </p-table>
     </div>
   </q-card>
 </template>
diff --git a/src/modules/15_development/views/MainPage.vue b/src/modules/15_development/views/MainPage.vue
index 781561949..8572b38d0 100644
--- a/src/modules/15_development/views/MainPage.vue
+++ b/src/modules/15_development/views/MainPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive, watch } from "vue";
+import { ref, onMounted, reactive } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
 import { useRoute, useRouter } from "vue-router";
 
@@ -10,13 +10,12 @@ import { useStructureTree } from "@/stores/structureTree";
 import genReportXLSX from "@/plugins/genreportxlsx";
 import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
 import { useCounterMixin } from "@/stores/mixin";
-import { updateCurrentPage } from "@/utils/function";
 import { calculateFiscalYear } from "@/utils/function";
+import { usePagination } from "@/composables/usePagination";
 
 /**importType*/
 import type {
   DataOption,
-  NewPagination,
   OrgTree,
 } from "@/modules/15_development/interface/index/Main";
 import type {
@@ -45,6 +44,10 @@ const {
   dialogRemove,
   success,
 } = useCounterMixin();
+const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
+  "",
+  fetchListProject
+);
 
 const node = ref<OrgTree[]>([]); // หน่วยงาน/ส่วนราชการ
 const expanded = ref<string[]>([]);
@@ -54,8 +57,6 @@ const filter = ref<string>(""); //ค้นหา เพิ่มโครงก
 const filterMain = ref<string>(""); //ค้นหา หน่วยงาน/ส่วนราชการ
 const splitterModel = ref<number>(60); //แบ่ง ส่วน
 const modal = ref<boolean>(false); // ตัวแปร dialog
-const totalList = ref<number>(0); //จำนวนข้อมูลรายการ
-const totalPage = ref<number>(1); // จำนวนข้อมูลที่มี
 
 const statusOpt = ref<DataOption[]>([
   { id: "ONGOING", name: "กำลังดำเนินการ" },
@@ -109,8 +110,6 @@ const formProject = reactive<FormProject>({
 /** formQuery */
 const formQuery = reactive<FormQueryListProject>({
   year: calculateFiscalYear(new Date()), //ปีงบประมาณ
-  page: 1,
-  pageSize: 10,
   org: "1",
   keyword: "",
   status: "ONGOING",
@@ -122,19 +121,20 @@ const formQuery = reactive<FormQueryListProject>({
 async function fetchListProject() {
   showLoader();
   await http
-    .get(
-      config.API.developmentMain +
-        `?page=${formQuery.page}&pageSize=${
-          formQuery.pageSize
-        }&keyword=${formQuery.keyword.trim()}&year=${formQuery.year}&status=${
-          formQuery.status
-        }&node=${formQuery.node}&nodeId=${formQuery.nodeId}`
-    )
+    .get(config.API.developmentMain, {
+      params: {
+        ...params.value,
+        keyword: formQuery.keyword.trim(),
+        year: formQuery.year,
+        status: formQuery.status,
+        node: formQuery.node,
+        nodeId: formQuery.nodeId,
+      },
+    })
     .then((res) => {
-      const data = res.data.result.data;
-      totalPage.value = Math.ceil(res.data.result.total / formQuery.pageSize);
-      totalList.value = res.data.result.total;
-      rows.value = data;
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -162,7 +162,7 @@ function onAdd() {
  * function fetchข้อมูลหน้าแรกใหม่
  */
 function fetchListProjectNew() {
-  formQuery.page = 1;
+  pagination.value.page = 1;
   fetchListProject();
 }
 
@@ -242,9 +242,7 @@ function updateSelected(data: DataTree) {
   formProject.orgRevisionId = data.orgRevisionId;
 }
 
-/**
- * function เลือกหน่วยงานที่จะค้นหาโครงกา
- */
+/** function เลือกหน่วยงานที่จะค้นหาโครงกา*/
 function updateSelectedTreeMain(data: DataTree) {
   if (
     formQuery.node === data.orgLevel &&
@@ -259,15 +257,6 @@ function updateSelectedTreeMain(data: DataTree) {
   fetchListProjectNew(); //  fetch โครงการ
 }
 
-/**
- * function updatePagination
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePagination(newPagination: NewPagination) {
-  formQuery.page = 1;
-  formQuery.pageSize = newPagination.rowsPerPage;
-}
-
 /**
  * function redirect หน้าบันทึกผล
  * @param id โครงการ
@@ -282,11 +271,7 @@ function onDelete(id: string) {
     await http
       .delete(config.API.developmentMain + `/${id}`)
       .then(async () => {
-        formQuery.page = await updateCurrentPage(
-          formQuery.page,
-          totalList.value,
-          rows.value.length
-        );
+        await checkAndUpdatePage(rows.value.length);
         await fetchListProject();
         success($q, "ลบข้อมูลสำเร็จ");
       })
@@ -307,14 +292,6 @@ function onDetail(id: string) {
   router.push(`/development-detail/${id}`);
 }
 
-/** callbackFunction ทำเมื่อมีการอัปเดท pageSize*/
-watch(
-  () => formQuery.pageSize,
-  () => {
-    fetchListProject();
-  }
-);
-
 /** ดึงข้อมูลเมื่อโหลดหน้าเสร็จสิ้น */
 onMounted(() => {
   fetchActive();
@@ -502,7 +479,7 @@ onMounted(() => {
         </q-toolbar>
 
         <div class="col-12">
-          <d-table
+          <p-table
             for="table"
             ref="table"
             :columns="columns"
@@ -512,9 +489,10 @@ onMounted(() => {
             bordered
             dense
             class="custom-header-table"
-            :rows-per-page-options="[10, 25, 50, 100]"
+            :rows-per-page-options="[1, 10, 25, 50, 100]"
             :visible-columns="visibleColumns"
-            @update:pagination="updatePagination"
+            v-model:pagination="pagination"
+            @request="onRequest"
           >
             <template v-slot:header="props">
               <q-tr :props="props">
@@ -590,21 +568,7 @@ onMounted(() => {
                 </q-td>
               </q-tr>
             </template>
-            <template v-slot:pagination="scope">
-              ทั้งหมด {{ totalList }} รายการ
-              <q-pagination
-                v-model="formQuery.page"
-                active-color="primary"
-                color="dark"
-                :max="Number(totalPage)"
-                size="sm"
-                boundary-links
-                direction-links
-                :max-pages="5"
-                @update:model-value="fetchListProject"
-              ></q-pagination>
-            </template>
-          </d-table>
+          </p-table>
         </div>
       </div>
     </div>
diff --git a/src/modules/15_development/views/Scholarship.vue b/src/modules/15_development/views/Scholarship.vue
index db79f7dc8..f68b131d0 100644
--- a/src/modules/15_development/views/Scholarship.vue
+++ b/src/modules/15_development/views/Scholarship.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, watch } from "vue";
+import { ref, reactive, onMounted } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
 import { useRouter } from "vue-router";
 
@@ -7,21 +7,17 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { checkPermission } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
-import genReportXLSX from "@/plugins/genreportxlsx";
 import { calculateFiscalYear } from "@/utils/function";
+import { usePagination } from "@/composables/usePagination";
 
-import type {
-  DataOption,
-  NewPagination,
-} from "@/modules/15_development/interface/index/Main";
+import type { DataOption } from "@/modules/15_development/interface/index/Main";
 import type { ListSholarship } from "@/modules/15_development/interface/response/Scholarship";
-/** importStore*/
 
-/** use*/
+/** use */
 const $q = useQuasar();
 const router = useRouter();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
-
+const { pagination, params, onRequest } = usePagination("", fetchList);
 /** หัวตาราง */
 const rows = ref<ListSholarship[]>([]);
 const columns = ref<QTableProps["columns"]>([
@@ -142,32 +138,27 @@ const scholarshipTypeOp = ref<DataOption[]>([
 ]);
 
 const formQuery = reactive({
-  page: 1,
-  pageSize: 10,
   year: calculateFiscalYear(new Date()), //ปีงบประมาณ
   type: "DOMESTICE",
   keyword: "",
 });
-const totalList = ref<number>(1); //จำนวนข้อมูลรายการ
-const maxPage = ref<number>(1);
 
 /** ดึงข้อมูล */
-function fetchList() {
+async function fetchList() {
   showLoader();
-  http
-    .get(
-      config.API.devScholarship +
-        `?page=${formQuery.page}&pageSize=${
-          formQuery.pageSize
-        }&keyword=${formQuery.keyword.trim()}&year=${
-          formQuery.year
-        }&scholarshipType=${formQuery.type}`
-    )
+  await http
+    .get(config.API.devScholarship, {
+      params: {
+        ...params.value,
+        keyword: formQuery.keyword.trim(),
+        year: formQuery.year,
+        scholarshipType: formQuery.type,
+      },
+    })
     .then((res) => {
-      const data = res.data.result.data;
-      maxPage.value = Math.ceil(res.data.result.total / formQuery.pageSize);
-      totalList.value = res.data.result.total;
-      rows.value = data;
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -179,7 +170,7 @@ function fetchList() {
 
 /** ฟังชั่นดึงข้อมูล รายการ ใหม่ */
 function fetchNewList() {
-  formQuery.page = 1;
+  pagination.value.page = 1;
   fetchList();
 }
 
@@ -190,15 +181,12 @@ function onClickAddOrView(status: boolean = false, id: string = "") {
     : router.push("/development/scholarship/add");
 }
 
-/**
- * function updatePagination
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePagination(newPagination: NewPagination) {
-  formQuery.page = 1;
-  formQuery.pageSize = newPagination.rowsPerPage;
+/** ฟังชั่นดูรายละเอียด */
+function onDetail(id: string) {
+  router.push(`/development/scholarship-detail/${id}`);
 }
 
+/** ฟังก์ชั่นแปลงสถานะ */
 function conventStatus(val: string) {
   switch (val) {
     case "PENDING":
@@ -212,35 +200,6 @@ function conventStatus(val: string) {
   }
 }
 
-// /** download file */
-// function onDownload() {
-//   showLoader();
-//   http
-//     .get(config.API.developmentReportScholarship())
-//     .then((res) => {
-//       const dataList = res.data.result;
-//       genReportXLSX(dataList, "รายการข้าราชการ ฯ ที่ได้รับทุนการศึกษา/ฝึกอบรม");
-//     })
-//     .catch((e) => {
-//       messageError($q, e);
-//     })
-//     .finally(() => {
-//       hideLoader();
-//     });
-// }
-
-/** เช็ค เมื่อมีการเปลี่ยนค่าของ ข้อมูลในเเถว */
-watch(
-  () => formQuery.pageSize,
-  () => {
-    fetchNewList();
-  }
-);
-
-function onDetail(id: string) {
-  router.push(`/development/scholarship-detail/${id}`);
-}
-
 /** ดึงข้อมูลเมื่ออยู่ในหน้า */
 onMounted(() => {
   fetchList();
@@ -251,6 +210,7 @@ onMounted(() => {
   <div class="toptitle text-dark col-12 row items-center">
     รายการข้าราชการฯ ที่ได้รับทุนการศึกษา/ฝึกอบรม
   </div>
+
   <q-card flat bordered class="q-pa-md">
     <q-toolbar class="q-pa-none">
       <div class="row q-gutter-sm">
@@ -360,7 +320,7 @@ onMounted(() => {
     </q-toolbar>
 
     <div class="col-12">
-      <d-table
+      <p-table
         for="table"
         ref="table"
         :columns="columns"
@@ -372,7 +332,8 @@ onMounted(() => {
         class="custom-header-table"
         :visible-columns="visibleColumns"
         :rows-per-page-options="[10, 25, 50, 100]"
-        @update:pagination="updatePagination"
+        v-model:pagination="pagination"
+        @request="onRequest"
       >
         <template v-slot:header="props">
           <q-tr :props="props">
@@ -419,21 +380,7 @@ onMounted(() => {
             </q-td>
           </q-tr>
         </template>
-        <template v-slot:pagination="scope">
-          ทั้งหมด {{ totalList }} รายการ
-          <q-pagination
-            v-model="formQuery.page"
-            active-color="primary"
-            color="dark"
-            :max="Number(maxPage)"
-            size="sm"
-            boundary-links
-            direction-links
-            :max-pages="5"
-            @update:model-value="fetchList"
-          ></q-pagination>
-        </template>
-      </d-table>
+      </p-table>
     </div>
   </q-card>
 </template>