Merge branch 'develop' into dev

* develop: fix(evaluate):sort fix(command): sort fix(Probation):sort fix(ข้อมูลการประเมิน):sort Pagination fix(registry):sortBy fix กรณีไม่มีประวัติโครงสร้างเลย fix: pageing fix:add keyword filter fix(registry): sort data
2025-09-30 16:28:22 +07:00 · 2025-09-30 16:28:22 +07:00 · 51465dff73
commit 51465dff73
parent 398402f9ac 70be19b5c4
37 changed files with 924 additions and 1302 deletions
--- a/src/components/TablePagination.vue
+++ b/src/components/TablePagination.vue
@ -0,0 +1,239 @@
+<template>
+  <q-table
+    ref="table"
+    flat
+    bordered
+    class="custom-header-table"
+    v-bind="attrs"
+    virtual-scroll
+    :virtual-scroll-sticky-size-start="48"
+    dense
+    :pagination-label="paginationLabel"
+    v-model:pagination="pagination"
+    @request="onRequest"
+    :grid="!$q.screen.gt.xs"
+    :rows-per-page-options="[10, 25, 50, 100]"
+    :loading="loading"
+  >
+    <template v-slot:pagination="scope">
+      ทั้งหมด
+      {{
+        pagination.rowsNumber.toLocaleString() ||
+        attrs.rows.length.toLocaleString()
+      }}
+      รายการ
+      <q-pagination
+        v-model="pagination.page"
+        @update:model-value="handlePageChange"
+        active-color="primary"
+        color="dark"
+        :max="scope.pagesNumber"
+        :max-pages="5"
+        size="sm"
+        boundary-links
+        direction-links
+      ></q-pagination>
+    </template>
+
+    <template v-for="(_, slot) in slots" v-slot:[slot]="scope" :key="slot">
+      <slot :name="slot" v-bind="scope || {}" />
+    </template>
+
+    <template v-slot:loading>
+      <q-inner-loading showing class="q-mt-lg">
+        <q-spinner-dots color="primary" size="40px" />
+      </q-inner-loading>
+    </template>
+
+    <template v-slot:no-data>
+      <div
+        v-if="!loading && attrs.rows.length === 0"
+        class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
+      >
+        <span> ไม่พบข้อมูล </span>
+      </div>
+    </template>
+
+    <!-- <template #item="props">
+      <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+        <q-card bordered flat>
+          <q-list>
+            <q-item
+              v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
+              :key="col.name"
+            >
+              <q-item-section>
+                <q-item-label caption>{{ col.label }}</q-item-label>
+
+                <q-item-label v-if="col.name === 'no'">
+                  {{ props.rowIndex + 1 }}
+                </q-item-label>
+
+                <q-item-label v-else>{{ col.value }}</q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card>
+      </div>
+    </template> -->
+  </q-table>
+</template>
+<script setup lang="ts">
+import { ref, useAttrs, useSlots, computed, watch } from "vue";
+
+const attrs = ref<any>(useAttrs());
+const slots = ref<any>(useSlots());
+
+const emit = defineEmits(["update:pagination", "request"]);
+
+const props = defineProps({
+  paging: {
+    type: Boolean,
+    default: false,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  pagination: {
+    type: Object,
+    default: () => ({
+      sortBy: "desc",
+      descending: false,
+      page: 1,
+      rowsPerPage: 10,
+      // rowsNumber: 0,
+    }),
+  },
+});
+
+// Internal pagination state ที่จะจัดการเอง
+const internalPagination = ref({
+  ...props.pagination,
+});
+
+// ใช้ computed เพื่อ sync กับ props และ internal state
+const pagination = computed({
+  get: () => internalPagination.value,
+  set: (value) => {
+    internalPagination.value = { ...value };
+    emit("update:pagination", value);
+  },
+});
+
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (props.paging == true)
+    return " " + start + " ถึง " + end + " จากจำนวน " + total + " รายการ";
+  else return start + "-" + end + " ใน " + total;
+};
+
+function onRequest(requestProp: any) {
+  if (!requestProp || !requestProp.pagination) {
+    return;
+  }
+
+  const { pagination: newPagination } = requestProp;
+
+  internalPagination.value = {
+    ...internalPagination.value,
+    ...newPagination,
+  };
+
+  // if (isPageChange) {
+  emit("request", requestProp);
+  // }
+}
+
+function handlePageChange(newPage: number) {
+  if (!newPage || newPage < 1) {
+    return;
+  }
+
+  internalPagination.value = {
+    ...internalPagination.value,
+    page: newPage,
+  };
+
+  // สร้าง request object เหมือนกับ onRequest
+  const requestProp = {
+    pagination: internalPagination.value,
+    filter: null,
+    getCellValue: () => {},
+  };
+
+  emit("request", requestProp);
+}
+
+// Watch props เพื่ออัปเดต internal state เมื่อ parent เปลี่ยน
+watch(
+  () => props.pagination,
+  (newPagination) => {
+    internalPagination.value = { ...newPagination };
+  },
+  { deep: true, immediate: true }
+);
+</script>
+
+<style lang="scss">
+.icon-color {
+  color: #4154b3;
+}
+.custom-header-table {
+  height: auto;
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+  .q-table__middle {
+    margin-bottom: 0 !important;
+    min-height: 0px !important;
+  }
+
+  // Loading styles
+  .loading-overlay {
+    width: 100%;
+  }
+
+  .loading-row {
+    background: white;
+  }
+
+  .loading-cell {
+    text-align: center;
+    padding: 60px 20px;
+    border: none;
+  }
+
+  .loading-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .loading-text {
+    color: #666;
+    font-size: 14px;
+    font-weight: 500;
+  }
+}
+</style>
--- a/src/composables/usePagination.ts
+++ b/src/composables/usePagination.ts
@ -0,0 +1,54 @@
+import { ref, computed } from "vue";
+import type { PropsTable } from "@/interface/index/PropsTable";
+
+export function usePagination(
+  defaultSort = "",
+  fetchFunction?: () => Promise<any>
+) {
+  const pagination = ref<PropsTable.Pagination>({
+    sortBy: defaultSort,
+    descending: true,
+    page: 1,
+    rowsPerPage: 10,
+    rowsNumber: 0,
+  });
+
+  const params = computed(() => {
+    const queryParams: Record<string, string> = {
+      page: pagination.value.page.toString(),
+      pageSize: pagination.value.rowsPerPage.toString(),
+    };
+
+    if (pagination.value.sortBy) {
+      queryParams.sortBy = pagination.value.sortBy;
+      queryParams.descending = (
+        pagination.value.descending ?? false
+      ).toString();
+    }
+
+    return queryParams;
+  });
+
+  async function onRequest(props: PropsTable.RequestProps) {
+    const newPagination = props?.pagination || props;
+    if (!newPagination?.page || !newPagination?.rowsPerPage) return;
+
+    pagination.value = { ...newPagination };
+    if (fetchFunction) {
+      await fetchFunction(); // เรียกฟังก์ชันที่ส่งเข้ามา
+    }
+  }
+
+  async function checkAndUpdatePage(totalRows: number) {
+    if (totalRows === 1 && pagination.value.page > 1) {
+      pagination.value.page = pagination.value.page - 1;
+    }
+  }
+
+  return {
+    pagination,
+    params,
+    onRequest,
+    checkAndUpdatePage,
+  };
+}
--- a/src/interface/index/PropsTable.ts
+++ b/src/interface/index/PropsTable.ts
@ -0,0 +1,36 @@
+/** Namespace สำหรับ Table-related types */
+export namespace PropsTable {
+  /** Interface สำหรับ pagination object */
+  export interface Pagination {
+    /** หน้าปัจจุบัน (เริ่มจาก 1) */
+    page: number;
+    /** จำนวนแถวต่อหน้า */
+    rowsPerPage: number;
+    /** จำนวนแถวทั้งหมด */
+    rowsNumber?: number;
+    /** คอลัมน์ที่ใช้ sort */
+    sortBy?: string;
+    /** เรียงจากมากไปน้อย */
+    descending?: boolean;
+
+    rowsTotal?: number;
+  }
+
+  /** Interface สำหรับ request props จาก d-table */
+  export interface RequestProps {
+    /** ข้อมูล pagination */
+    pagination: Pagination;
+    /** ตัวกรองข้อมูล */
+    filter?: any;
+    /** function สำหรับดึงค่าจาก cell */
+    getCellValue?: (col: any, row: any) => any;
+  }
+
+  /** Union type สำหรับ handleRequest function */
+  export type HandleRequestProps = RequestProps;
+}
+
+// Export แบบเดิมเพื่อ backward compatibility
+export type TablePagination = PropsTable.Pagination;
+export type TableRequestProps = PropsTable.RequestProps;
+export type HandleRequestProps = PropsTable.HandleRequestProps;
--- a/src/main.ts
+++ b/src/main.ts
@ -73,5 +73,10 @@ app.component(
  defineAsyncComponent(() => import("@/components/Table.vue"))
 );

+app.component(
+  "p-table",
+  defineAsyncComponent(() => import("@/components/TablePagination.vue"))
+);
+
 app.config.globalProperties.$http = http;
 app.mount("#app");
--- a/src/modules/01_masterdata/components/competency/01ListCompetency.vue
+++ b/src/modules/01_masterdata/components/competency/01ListCompetency.vue
@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive, watch } from "vue";
+import { ref, onMounted } from "vue";
 import type { QTableProps } from "quasar";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
@ -9,13 +9,11 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useKPIDataStore } from "@/modules/01_masterdata/stores/KPIStore";
 import { checkPermission } from "@/utils/permissions";
-import { updateCurrentPage } from "@/utils/function";
+import { usePagination } from "@/composables/usePagination";
+
+
+import type { DataOption } from "@/modules/01_masterdata/interface/index/Main";

-import type {
-  DataOption,
-  NewPagination,
-} from "@/modules/01_masterdata/interface/index/Main";
-import type { FormQueryCapacity } from "@/modules/01_masterdata/interface/request/Main";
 import type { ResDataCapacity } from "@/modules/01_masterdata/interface/response/Main";

 import CompetencyTotal from "@/modules/01_masterdata/components/competency/Summary.vue";
@ -23,6 +21,10 @@ import CompetencyTotal from "@/modules/01_masterdata/components/competency/Summa
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const { dialogRemove, messageError, showLoader, hideLoader, success } = mixin;
+const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
+  "",
+  fetchList
+);

 const store = useKPIDataStore();
 const router = useRouter();
@ -36,20 +38,12 @@ const columns = ref<QTableProps["columns"]>([
    field: "name",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
 ]);
 const visibleColumns = ref<string[]>(["name"]);

 const rows = ref<ResDataCapacity[]>([]); // ข้อมูลสมรรถนะ
-const total = ref<number>(0); // จำนวนรายการทั้งหมด
-const totalList = ref<number>(1); // จำนวนหน้าทั้งหมด
-const formQuery = reactive<FormQueryCapacity>({
-  page: 1,
-  pageSize: 10,
-  keyword: "",
-}); // form query สำหรับการค้นหา
+const keyword = ref<string>(""); // คำค้นหา
 const competencyTypeOp = ref<DataOption[]>([
  {
    id: "HEAD",
@ -76,18 +70,17 @@ const competencyTypeOp = ref<DataOption[]>([
 /** ฟังก์ชันดึงข้อมูลรายการสมรรถนะ */
 async function fetchList() {
  showLoader();
+  const queryParams = {
+    ...params.value,
+    keyword: keyword.value.trim(),
+    type: store.competencyTypeVal,
+  };
  await http
-    .get(
-      config.API.kpiCapacity +
-        `/edit?page=${formQuery.page}&pageSize=${
-          formQuery.pageSize
-        }&keyword=${formQuery.keyword.trim()}&type=${store.competencyTypeVal}`
-    )
+    .get(config.API.kpiCapacity + "/edit", { params: queryParams })
    .then(async (res) => {
-      total.value = res.data.result.total;
-      const data: ResDataCapacity[] = res.data.result.data;
-      totalList.value = Math.ceil(res.data.result.total / formQuery.pageSize);
-      rows.value = data;
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data;
    })
    .catch((err) => {
      messageError($q, err);
@ -123,11 +116,7 @@ function deleteData(id: string) {
    await http
      .delete(config.API.kpiCapacity + `/${id}`)
      .then(async () => {
-        formQuery.page = await updateCurrentPage(
-          formQuery.page,
-          totalList.value,
-          rows.value.length
-        );
+        await checkAndUpdatePage(rows.value.length);
        await fetchList();
        success($q, "ลบข้อมูลสำเร็จ");
      })
@ -146,26 +135,10 @@ function onAdd() {
 }

 function fetchNewList() {
-  formQuery.page = 1;
+  pagination.value.page = 1;
  fetchList();
 }

-/**
- * function updatePagination
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePagination(newPagination: NewPagination) {
-  formQuery.page = 1;
-  formQuery.pageSize = newPagination.rowsPerPage;
-}
-
-watch(
-  () => formQuery.pageSize,
-  () => {
-    fetchNewList();
-  }
-);
-
 onMounted(() => {
  fetchList();
 });
@ -206,7 +179,7 @@ onMounted(() => {
      <q-input
        outlined
        dense
-        v-model="formQuery.keyword"
+        v-model="keyword"
        label="ค้นหา"
        @keyup.enter="fetchNewList()"
      >
@ -230,7 +203,7 @@ onMounted(() => {
    </div>
  </q-toolbar>

-  <d-table
+  <p-table
    ref="table"
    :columns="columns"
    :rows="rows"
@ -242,7 +215,8 @@ onMounted(() => {
    :rows-per-page-options="[10, 25, 50, 100]"
    class="custom-header-table"
    :visible-columns="visibleColumns"
-    @update:pagination="updatePagination"
+    @request="onRequest"
+    v-model:pagination="pagination"
  >
    <template v-slot:header="props">
      <q-tr :props="props">
@ -303,19 +277,5 @@ onMounted(() => {
        </q-td>
      </q-tr>
    </template>
-    <template v-slot:pagination="scope">
-      ทั้งหมด {{ total }} รายการ
-      <q-pagination
-        v-model="formQuery.page"
-        active-color="primary"
-        color="dark"
-        :max="Number(totalList)"
-        size="sm"
-        boundary-links
-        direction-links
-        :max-pages="5"
-        @update:model-value="fetchList"
-      ></q-pagination>
-    </template>
-  </d-table>
+  </p-table>
 </template>
--- a/src/modules/01_masterdata/components/competency/02ListLinkPosition.vue
+++ b/src/modules/01_masterdata/components/competency/02ListLinkPosition.vue
@ -7,10 +7,9 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { checkPermission } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
-import { updateCurrentPage } from "@/utils/function";
+import { usePagination } from "@/composables/usePagination";

 import type { DataKPIGroup } from "@/modules/01_masterdata/interface/response/Main";
-import type { NewPagination } from "@/modules/14_KPI/interface/index/Main";

 import dialogHeader from "@/components/DialogHeader.vue";

@ -24,6 +23,10 @@ const {
  messageError,
  success,
 } = mixin;
+const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
+  "",
+  fetchData
+);

 const columns = ref<QTableProps["columns"]>([
  {
@ -34,21 +37,13 @@ const columns = ref<QTableProps["columns"]>([
    field: "nameGroupKPI",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
 ]);
 const visibleColumns = ref<string[]>(["nameGroupKPI"]);

-const formQuery = reactive({
-  page: 1,
-  pageSize: 10,
-  keyword: "",
-});
-const totalList = ref<number>(1); //จำนวนหน้าทั้งหมด
-const total = ref<number>(0); // จำนวนรายการทั้งหมด
 const modal = ref<boolean>(false); // เปิด/ปิด dialog
 const rows = ref<DataKPIGroup[]>([]); // ข้อมูลกลุ่มงาน
+const keyword = ref<string>(""); // คำค้นหา
 const groupName = ref<string>(""); // ชื่อกลุ่มงาน
 const editStatus = ref<boolean>(false); // สถานะการแก้ไข
 const editId = ref<string>(""); // รหัสกลุ่มงานที่ต้องการแก้ไข
@ -57,17 +52,16 @@ const editId = ref<string>(""); // รหัสกลุ่มงานที่
 async function fetchData() {
  showLoader();
  await http
-    .get(
-      config.API.kpiGroup +
-        `/edit?page=${formQuery.page}&pageSize=${
-          formQuery.pageSize
-        }&keyword=${formQuery.keyword.trim()}`
-    )
+    .get(config.API.kpiGroup + "/edit", {
+      params: {
+        ...params.value,
+        keyword: keyword.value.trim(),
+      },
+    })
    .then(async (res) => {
-      total.value = res.data.result.total;
-      const data = res.data.result;
-      totalList.value = Math.ceil(res.data.result.total / formQuery.pageSize);
-      rows.value = data.data;
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data;
    })
    .catch((err) => {
      messageError($q, err);
@ -127,11 +121,7 @@ async function deleteData(id: string) {
  await http
    .delete(config.API.kpiGroupById(id))
    .then(async () => {
-      formQuery.page = await updateCurrentPage(
-        formQuery.page,
-        totalList.value,
-        rows.value.length
-      );
+      await checkAndUpdatePage(rows.value.length);
      await fetchData();
      success($q, "ลบข้อมูลสำเร็จ");
    })
@ -179,29 +169,12 @@ async function onSubmit() {
  );
 }

-/**
- * ฟังก์ชันอัปเดตข้อมูล Pagination
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePagination(newPagination: NewPagination) {
-  formQuery.page = 1;
-  formQuery.pageSize = newPagination.rowsPerPage;
-}
-
 /** ฟังก์ชันดึงข้อมูลกลุ่มงานใหม่ */
 function fetchNewList() {
-  formQuery.page = 1;
+  pagination.value.page = 1;
  fetchData();
 }

-/** ฟังก์ชันติดตามการเปลี่ยนแปลงจำนวนแถวต่อหน้า */
-watch(
-  () => formQuery.pageSize,
-  () => {
-    fetchNewList();
-  }
-);
-
 /** lifecycle hook */
 onMounted(() => {
  fetchData();
@ -225,7 +198,7 @@ onMounted(() => {
      <q-input
        outlined
        dense
-        v-model="formQuery.keyword"
+        v-model="keyword"
        label="ค้นหา"
        @keyup.enter="fetchNewList()"
      >
@ -247,7 +220,7 @@ onMounted(() => {
    </div>
  </q-toolbar>

-  <d-table
+  <p-table
    ref="table"
    :columns="columns"
    :rows="rows"
@ -257,9 +230,10 @@ onMounted(() => {
    :paging="true"
    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"
+    @request="onRequest"
+    v-model:pagination="pagination"
  >
    <template v-slot:header="props">
      <q-tr :props="props">
@ -309,21 +283,7 @@ onMounted(() => {
        </q-td>
      </q-tr>
    </template>
-    <template v-slot:pagination="scope">
-      ทั้งหมด {{ total }} รายการ
-      <q-pagination
-        v-model="formQuery.page"
-        active-color="primary"
-        color="dark"
-        :max="Number(totalList)"
-        size="sm"
-        boundary-links
-        direction-links
-        :max-pages="5"
-        @update:model-value="fetchData"
-      ></q-pagination>
-    </template>
-  </d-table>
+  </p-table>

  <q-dialog v-model="modal" persistent>
    <q-card flat bordered style="min-width: 50vh">
--- a/src/modules/01_masterdata/components/competency/03ListLinkGroup.vue
+++ b/src/modules/01_masterdata/components/competency/03ListLinkGroup.vue
@ -9,6 +9,7 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { checkPermission } from "@/utils/permissions";
 import { updateCurrentPage } from "@/utils/function";
+import { usePagination } from "@/composables/usePagination";

 import type {
  DataOption,
@ -34,6 +35,10 @@ const {
  success,
  dialogConfirm,
 } = mixin;
+const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
+  "",
+  getData
+);

 const id = ref<string>(""); // รหัสกลุ่มงานที่ต้องการแก้ไข
 const modal = ref<boolean>(false); // เปิด/ปิด dialog
@ -49,14 +54,8 @@ const positionMainOp = ref<DataOption[]>([]); // ตำแหน่งหลั
 const competencyOp = ref<DataOption[]>([]); // สมรรถนะ
 const competencyOpMain = ref<DataOption[]>([]); // สมรรถนะหลัก

-const formQuery = reactive({
-  page: 1,
-  pageSize: 10,
-  keyword: "",
-});
-const totalList = ref<number>(1); // จำนวนหน้าทั้งหมด
-const total = ref<number>(0); // จำนวนรายการทั้งหมด
 const rows = ref<ListLinkGroup[]>([]); // ข้อมูลเชื่อมโยงกับกลุ่มงานและตำแหน่ง
+const keyword = ref<string>(""); // คำค้นหา
 const columns = ref<QTableProps["columns"]>([
  {
    name: "groupName",
@ -66,30 +65,24 @@ const columns = ref<QTableProps["columns"]>([
    field: "groupName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "positions",
    align: "left",
    label: "ตำแหน่ง",
-    sortable: true,
+    sortable: false,
    field: "positions",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "capacitys",
    align: "left",
    label: "สมรรถนะประจำกลุ่มงาน",
-    sortable: true,
+    sortable: false,
    field: "capacitys",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
 ]);
 const visibleColumns = ref<string[]>(["groupName", "positions", "capacitys"]);
@ -97,18 +90,17 @@ const visibleColumns = ref<string[]>(["groupName", "positions", "capacitys"]);
 /** ฟังก์ชันดึงข้อมูลรายการเชื่อมโยงกับกลุ่มงานและตำแหน่ง */
 async function getData() {
  showLoader();
-  http
-    .get(
-      config.API.kpiLink +
-        `/edit?page=${formQuery.page}&pageSize=${
-          formQuery.pageSize
-        }&keyword=${formQuery.keyword.trim()}`
-    )
+  await http
+    .get(config.API.kpiLink + "/edit", {
+      params: {
+        ...params.value,
+        keyword: keyword.value.trim(),
+      },
+    })
    .then((res) => {
-      total.value = res.data.result.total;
-      const data = res.data.result;
-      totalList.value = Math.ceil(res.data.result.total / formQuery.pageSize);
-      rows.value = data.data;
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data;
    })
    .catch((err) => {
      messageError($q, err);
@ -127,11 +119,7 @@ async function deleteData(id: string) {
  await http
    .delete(config.API.kpiLink + `/${id}`)
    .then(async () => {
-      formQuery.page = await updateCurrentPage(
-        formQuery.page,
-        totalList.value,
-        rows.value.length
-      );
+      await checkAndUpdatePage(rows.value.length);
      await getData();
      success($q, "ลบข้อมูลสำเร็จ");
    })
@ -346,29 +334,12 @@ function filterOptionSelect(val: string, update: Function, type: string) {
  }
 }

-/**
- * ฟังก์ชันอัปเดต Pagination
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePagination(newPagination: NewPagination) {
-  formQuery.page = 1;
-  formQuery.pageSize = newPagination.rowsPerPage;
-}
-
 /** ฟังก์ชันดึงข้อมูลใหม่ */
 function fetchNewList() {
-  formQuery.page = 1;
+  pagination.value.page = 1;
  getData();
 }

-/** ฟังก์ชันติดตามการเปลี่ยนแปลงจำนวนแถวต่อหน้า */
-watch(
-  () => formQuery.pageSize,
-  () => {
-    fetchNewList();
-  }
-);
-
 /** lifecycle hook */
 onMounted(() => {
  getData();
@ -392,7 +363,7 @@ onMounted(() => {
      <q-input
        outlined
        dense
-        v-model="formQuery.keyword"
+        v-model="keyword"
        label="ค้นหา"
        @keyup.enter="fetchNewList()"
      >
@ -415,7 +386,7 @@ onMounted(() => {
    </div>
  </q-toolbar>

-  <d-table
+  <p-table
    ref="table"
    :columns="columns"
    :rows="rows"
@ -426,8 +397,9 @@ onMounted(() => {
    class="custom-header-table"
    :visible-columns="visibleColumns"
    :separator="'cell'"
-    :rows-per-page-options="[1, 10, 25, 50, 100]"
-    @update:pagination="updatePagination"
+    :rows-per-page-options="[10, 25, 50, 100]"
+    @request="onRequest"
+    v-model:pagination="pagination"
  >
    <template v-slot:header="props">
      <q-tr :props="props">
@ -495,21 +467,7 @@ onMounted(() => {
        </q-td>
      </q-tr>
    </template>
-    <template v-slot:pagination="scope">
-      ทั้งหมด {{ total }} รายการ
-      <q-pagination
-        v-model="formQuery.page"
-        active-color="primary"
-        color="dark"
-        :max="Number(totalList)"
-        size="sm"
-        boundary-links
-        direction-links
-        :max-pages="5"
-        @update:model-value="getData"
-      ></q-pagination>
-    </template>
-  </d-table>
+  </p-table>

  <q-dialog v-model="modal" persistent>
    <q-card flat bordered style="min-width: 80vh">
--- a/src/modules/01_masterdata/interface/request/Main.ts
+++ b/src/modules/01_masterdata/interface/request/Main.ts
@ -12,8 +12,8 @@ interface DataListsObject {
 }

 interface FormListMainByRole {
-  page: number;
-  pageSize: number;
+  page?: number;
+  pageSize?: number;
  position: string;
  round: string;
  keyword: string;
@ -60,8 +60,8 @@ interface FormFilterAssignment {
  keyword: string;
  period: string;
  year: number | string | null;
-  pageSize: number;
-  page: number;
+  pageSize?: number;
+  page?: number;
 }

 export type {
--- a/src/modules/01_masterdata/views/Assignment.vue
+++ b/src/modules/01_masterdata/views/Assignment.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 http from "@/plugins/http";
@ -7,24 +7,27 @@ import config from "@/app.config";
 import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { checkPermission } from "@/utils/permissions";
-import { updateCurrentPage } from "@/utils/function";
+import { usePagination } from "@/composables/usePagination";

 /** importType*/
 import type {
  DataOption,
-  NewPagination,
  DataAssignment,
 } from "@/modules/01_masterdata/interface/index/Main";
 import type { FormFilterAssignment } from "@/modules/01_masterdata/interface/request/Main";
 import type { ResAssignment } from "@/modules/01_masterdata/interface/response/Main";

-/** importStore*/
-
+/** importComponents*/
 import Summary from "@/modules/01_masterdata/components/Indicators/Summary.vue";
+
 const $q = useQuasar();
 const router = useRouter();
 const { showLoader, hideLoader, dialogRemove, success, messageError } =
  useCounterMixin();
+const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
+  "",
+  fetchList
+);

 /** table*/
 const columns = ref<QTableProps["columns"]>([
@ -61,26 +64,22 @@ const formFilter = reactive<FormFilterAssignment>({
  keyword: "",
  period: "",
  year: new Date().getFullYear(),
-  pageSize: 10,
-  page: 1,
 });
-const totalList = ref<number>(0); //จำนวนข้อมูลรายการ
-const maxPage = ref<number>(1);

 /** ฟังก์ชันดึงข้อมูลรายการงานอื่นๆ ที่ได้รับมอบหมาย*/
 async function fetchList() {
  showLoader();
-  rows.value = [];
  formFilter.year = formFilter.year ? formFilter.year.toString() : null;
  await http
    .post(config.API.kpiSpecial + `/search-edit`, {
      ...formFilter,
+      ...params.value,
      keyword: formFilter.keyword.trim(),
    })
    .then((res: ResAssignment) => {
-      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
-      totalList.value = res.data.result.total;
-      rows.value = res.data.result.data;
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data;
    })
    .catch((err) => {
      messageError($q, err);
@ -108,11 +107,7 @@ function onClickDelete(id: string) {
    await http
      .delete(config.API.kpiSpecial + `/${id}`)
      .then(async () => {
-        formFilter.page = await updateCurrentPage(
-          formFilter.page,
-          maxPage.value,
-          rows.value.length
-        );
+        await checkAndUpdatePage(rows.value.length);
        await fetchList();
        success($q, "ลบข้อมูลสำเร็จ");
      })
@ -126,22 +121,10 @@ function onClickDelete(id: string) {
 }

 function fetchNewList() {
-  formFilter.page = 1;
+  pagination.value.page = 1;
  fetchList();
 }

-function updatePageSize(newPagination: NewPagination) {
-  formFilter.page = 1;
-  formFilter.pageSize = newPagination.rowsPerPage;
-}
-
-watch(
-  () => formFilter.pageSize,
-  () => {
-    fetchList();
-  }
-);
-
 onMounted(async () => {
  await fetchList();
 });
@ -266,7 +249,8 @@ onMounted(async () => {
        class="custom-header-table"
        :rows-per-page-options="[10, 25, 50, 100]"
        :visible-columns="visibleColumns"
-        @update:pagination="updatePageSize"
+        v-model:pagination="pagination"
+        @request="onRequest"
      >
        <template v-slot:header="props">
          <q-tr :props="props">
@ -309,20 +293,6 @@ onMounted(async () => {
            </q-td>
          </q-tr>
        </template>
-        <template v-slot:pagination="scope">
-          ทั้งหมด {{ totalList }} รายการ
-          <q-pagination
-            v-model="formFilter.page"
-            active-color="primary"
-            color="dark"
-            :max="maxPage"
-            :max-pages="5"
-            size="sm"
-            boundary-links
-            direction-links
-            @update:model-value="fetchList"
-          ></q-pagination>
-        </template>
      </d-table>
    </div>
  </q-card>
--- a/src/modules/01_masterdata/views/indicatorByPlan.vue
+++ b/src/modules/01_masterdata/views/indicatorByPlan.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, useRoute } from "vue-router";

@ -8,7 +8,7 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { checkPermission } from "@/utils/permissions";
 import { useStructureTree } from "@/stores/structureTree";
-import { updateCurrentPage } from "@/utils/function";
+import { usePagination } from "@/composables/usePagination";

 import type {
  DataOption,
@ -16,7 +16,6 @@ import type {
  OrgTreeNode,
  DataHistory,
  FormDataNodeData,
-  NewPagination,
 } from "@/modules/01_masterdata/interface/index/Main";

 import DialogHistory from "@/modules/01_masterdata/components/Indicators/DialogHistory.vue";
@ -28,14 +27,15 @@ const route = useRoute();
 const { fetchStructureTree } = useStructureTree();
 const { showLoader, hideLoader, dialogRemove, success, messageError } =
  useCounterMixin();
+const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
+  "",
+  () => fetchList()
+);

 const dataHistory = ref<DataHistory[]>([]);
 const modalHistory = ref<boolean>(false);
 const isAll = ref<boolean>(false);

-const total = ref<number>(0);
-const totalList = ref<number>(1);
-
 /** หัวตาราง */
 const rows = ref<IndicatorType[]>([]);
 const columns = ref<QTableProps["columns"]>([
@ -59,12 +59,6 @@ const columns = ref<QTableProps["columns"]>([
  },
 ]);
 const visibleColumns = ref<string[]>(["including", "includingName"]);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});

 const node = ref<OrgTreeNode[]>([]);
 const expanded = ref<string[]>([]);
@ -96,16 +90,12 @@ async function fetchList() {
        nodeId: nodeData.nodeId,
        period: nodeData.round,
        year: year.value?.toString(),
-        pageSize: pagination.value.rowsPerPage,
-        page: pagination.value.page,
+        ...params.value,
      })
      .then((res) => {
-        const data = res.data.result.data;
-        totalList.value = Math.ceil(
-          res.data.result.total / pagination.value.rowsPerPage
-        );
-        total.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,11 +152,7 @@ async function deleteData(idData: string) {
    await http
      .delete(config.API.kpiPlanById(idData))
      .then(async () => {
-        pagination.value.page = await updateCurrentPage(
-          pagination.value.page,
-          totalList.value,
-          rows.value.length
-        );
+        await checkAndUpdatePage(rows.value.length);
        await fetchList();
        success($q, "ลบข้อมูลสำเร็จ");
      })
@ -200,23 +186,11 @@ function onClickHistory(id: string) {
    });
 }

-function updatePagination(newPagination: NewPagination) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
 function getSearch() {
  pagination.value.page = 1;
  fetchList();
 }

-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    getSearch();
-  }
-);
-
 onMounted(() => {
  fetchTree();
 });
@ -403,7 +377,7 @@ onMounted(() => {
        </div>

        <div class="col-12">
-          <d-table
+          <p-table
            for="table"
            ref="table"
            :columns="columns"
@ -414,8 +388,9 @@ onMounted(() => {
            dense
            class="custom-header-table"
            :rows-per-page-options="[10, 25, 50, 100]"
-            @update:pagination="updatePagination"
            :visible-columns="visibleColumns"
+            @request="onRequest"
+            v-model:pagination="pagination"
          >
            <template v-slot:header="props">
              <q-tr :props="props">
@ -532,21 +507,7 @@ onMounted(() => {
                </q-td>
              </q-tr>
            </template>
-            <template v-slot:pagination="scope">
-              ทั้งหมด {{ total }} รายการ
-              <q-pagination
-                v-model="pagination.page"
-                active-color="primary"
-                color="dark"
-                :max="Number(totalList)"
-                size="sm"
-                boundary-links
-                direction-links
-                :max-pages="5"
-                @update:model-value="fetchList"
-              ></q-pagination>
-            </template>
-          </d-table>
+          </p-table>
        </div>
      </div>
    </div>
--- a/src/modules/01_masterdata/views/indicatorByRole.vue
+++ b/src/modules/01_masterdata/views/indicatorByRole.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,12 +7,11 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { checkPermission } from "@/utils/permissions";
-import { updateCurrentPage } from "@/utils/function";
+import { usePagination } from "@/composables/usePagination";

 import type { FormListMainByRole } from "@/modules/01_masterdata/interface/request/Main";
 import type {
  DataOption,
-  NewPagination,
  KpiRoleData,
  IndicatorType,
  IndicatorTotal,
@ -26,17 +25,18 @@ const $q = useQuasar();
 const router = useRouter();
 const { showLoader, hideLoader, dialogRemove, success, messageError } =
  useCounterMixin();
+const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
+  "",
+  fetchList
+);

 /** use*/
 const dataHistory = ref<KpiRoleData[]>([]);
 const modalHistory = ref<boolean>(false);
-const total = ref<number>(0);

 const positionOp = ref<DataOption[]>([{ id: "", name: "ทั้งหมด" }]);
 const positionMainOp = ref<DataOption[]>([{ id: "", name: "ทั้งหมด" }]);

-const maxPage = ref<number>(1);
-
 /** หัวตาราง */
 const rows = ref<IndicatorType[]>([]);
 const columns = ref<QTableProps["columns"]>([
@ -62,17 +62,11 @@ const columns = ref<QTableProps["columns"]>([
 const visibleColumns = ref<string[]>(["including", "includingName"]);

 const formFilter = reactive<FormListMainByRole>({
-  page: 1,
-  pageSize: 10,
  position: "",
  round: "",
  keyword: "",
  year: new Date().getFullYear(),
 });
-const pagination = ref({
-  page: formFilter.page,
-  rowsPerPage: formFilter.pageSize,
-});

 const indicatorTotal = ref<IndicatorTotal[]>([
  {
@ -105,7 +99,7 @@ const roundOp = ref<DataOption[]>([
 ]);

 async function fetchList() {
-  rows.value = [];
+  showLoader();
  await http
    .post(config.API.kpiRoleMainList + `/search-edit`, {
      keyword: formFilter.keyword.trim(),
@ -114,17 +108,18 @@ async function fetchList() {
      node: 0,
      nodeId: "",
      year: formFilter.year?.toString(),
-      pageSize: formFilter.pageSize,
-      page: formFilter.page,
+      ...params.value,
    })
    .then(async (res) => {
-      const data = await res.data.result.data;
-      total.value = res.data.result.total;
-      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
-      rows.value = data;
+      const result = await res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data;
    })
    .catch((err) => {
      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
    });
 }

@ -144,11 +139,7 @@ function onClickDelete(id: number) {
    await http
      .delete(config.API.kpiRoleMainList + `/${id}`)
      .then(async () => {
-        formFilter.page = await updateCurrentPage(
-          formFilter.page,
-          maxPage.value,
-          rows.value.length
-        );
+        await checkAndUpdatePage(rows.value.length);
        await fetchList();
        success($q, "ลบข้อมูลสำเร็จ");
      })
@ -161,33 +152,6 @@ function onClickDelete(id: number) {
  });
 }

-async function updatePage(val: number) {
-  showLoader();
-  try {
-    formFilter.page = val;
-    await fetchList();
-  } finally {
-    hideLoader();
-  }
-}
-
-function updatePageSize(newPagination: NewPagination) {
-  formFilter.page = 1;
-  formFilter.pageSize = newPagination.rowsPerPage;
-}
-
-watch(
-  () => formFilter.pageSize,
-  async () => {
-    showLoader();
-    try {
-      await fetchList();
-    } finally {
-      hideLoader();
-    }
-  }
-);
-
 /**
 * function ต้นหาข้อมูลของ Option
 * @param val ค่าที่ต้องการฟิลเตอร์
@ -282,7 +246,7 @@ onMounted(async () => {

 <template>
  <div class="toptitle text-dark col-12 row items-center">
-    รายการตัวชี้วัดตามตำแหน่ง
+    รายการตัวชี้วัดตามตำแหน่งasdassd
  </div>

  <Summary />
@ -304,7 +268,7 @@ onMounted(async () => {
        :options="positionOp"
        use-input
        @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
-        @update:model-value="(formFilter.page = 1), fetchList()"
+        @update:model-value="(pagination.page = 1), fetchList()"
      >
        <template v-slot:no-option>
          <q-item>
@ -315,7 +279,7 @@ onMounted(async () => {
          <q-icon
            name="cancel"
            @click.stop.prevent="
-              (formFilter.position = ''), (formFilter.page = 1), fetchList()
+              (formFilter.position = ''), (pagination.page = 1), fetchList()
            "
            class="cursor-pointer"
          />
@ -329,7 +293,7 @@ onMounted(async () => {
        autoApply
        year-picker
        :enableTimePicker="false"
-        @update:model-value="(formFilter.page = 1), fetchList()"
+        @update:model-value="(pagination.page = 1), fetchList()"
      >
        <template #year="{ year }">{{ year + 543 }}</template>
        <template #year-overlay-value="{ value }">{{
@ -358,7 +322,7 @@ onMounted(async () => {
              <q-icon
                name="cancel"
                @click.stop.prevent="
-                  (formFilter.year = null), (formFilter.page = 1), fetchList()
+                  (formFilter.year = null), (pagination.page = 1), fetchList()
                "
                class="cursor-pointer"
              />
@ -377,14 +341,14 @@ onMounted(async () => {
        option-value="id"
        emit-value
        map-options
-        @update:model-value="(formFilter.page = 1), fetchList()"
+        @update:model-value="(pagination.page = 1), fetchList()"
        style="width: 160px"
      >
        <template v-if="formFilter.round !== ''" v-slot:append>
          <q-icon
            name="cancel"
            @click.stop.prevent="
-              (formFilter.round = ''), (formFilter.page = 1), fetchList()
+              (formFilter.round = ''), (pagination.page = 1), fetchList()
            "
            class="cursor-pointer"
          />
@ -411,7 +375,7 @@ onMounted(async () => {
        ref="filterRef"
        outlined
        placeholder="ค้นหา"
-        @keyup.enter="(formFilter.page = 1), fetchList()"
+        @keyup.enter="(pagination.page = 1), fetchList()"
      >
        <template v-slot:append>
          <q-icon name="search" />
@ -434,7 +398,7 @@ onMounted(async () => {
    </div>

    <div class="col-12">
-      <d-table
+      <p-table
        for="table"
        ref="table"
        :columns="columns"
@ -446,22 +410,9 @@ onMounted(async () => {
        class="custom-header-table"
        :visible-columns="visibleColumns"
        :rows-per-page-options="[10, 20, 50, 100]"
-        @update:pagination="updatePageSize"
+        v-model:pagination="pagination"
+        @request="onRequest"
      >
-        <template v-slot:pagination="scope">
-          ทั้งหมด {{ total }} รายการ
-          <q-pagination
-            v-model="formFilter.page"
-            active-color="primary"
-            color="dark"
-            :max="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 auto-width />
@ -570,21 +521,13 @@ onMounted(async () => {
              </q-btn>
            </q-td>
            <q-td v-for="col in props.cols" :key="col.name" :props="props">
-              <div v-if="col.name === 'no'">
-                {{
-                  (formFilter.page - 1) * Number(pagination.rowsPerPage) +
-                  props.rowIndex +
-                  1
-                }}
-              </div>
-
-              <div v-else>
+              <div>
                {{ col.value ? col.value : "-" }}
              </div>
            </q-td>
          </q-tr>
        </template>
-      </d-table>
+      </p-table>
    </div>
  </q-card>

--- a/src/modules/02_organization/store/organizational.ts
+++ b/src/modules/02_organization/store/organizational.ts
@ -24,7 +24,7 @@ export const useOrganizational = defineStore("organizationalStore", () => {
  const activeId = ref<string>(); // id โครงสร้างปัจจุบัน
  const draftId = ref<string>(); // id แบบร่างโครงสร้าง
  const historyId = ref<string>(); // id ประวัติโครงสร้าง
-  const historyDnaOrgId = ref<string>(); // id ของโครงสร้างสำหรับใช้ในเมนูสืบทอดตำแหน่ง
+  const historyDnaOrgId = ref<string>(""); // id ของโครงสร้างสำหรับใช้ในเมนูสืบทอดตำแหน่ง
  const isPublic = ref<boolean>(false); // การเผยแพร่
  const treeId = ref<string>(); // id โหนด
  const level = ref<number>(); // ระดับโหนด
--- a/src/modules/02_organization/views/main.vue
+++ b/src/modules/02_organization/views/main.vue
@ -94,16 +94,18 @@ async function fetchHistory() {
        (e: OrgRevision) => !e.orgRevisionIsDraft && !e.orgRevisionIsCurrent
      );

-      itemHistory.value = filterData.map((e: OrgRevision) => ({
-        id: e.orgRevisionId,
-        name: e.orgRevisionName,
-        orgRevisionCreatedAt: e.orgRevisionCreatedAt
-          ? date2Thai(e.orgRevisionCreatedAt)
-          : "",
-      }));
+      itemHistory.value =
+        filterData.map((e: OrgRevision) => ({
+          id: e.orgRevisionId,
+          name: e.orgRevisionName,
+          orgRevisionCreatedAt: e.orgRevisionCreatedAt
+            ? date2Thai(e.orgRevisionCreatedAt)
+            : "",
+        })) || [];

      // id ของโครงสร้างสำหรับใช้ในเมนูสืบทอดตำแหน่ง
-      store.historyDnaOrgId = itemHistory.value[0].id;
+      store.historyDnaOrgId =
+        itemHistory.value.length > 0 ? itemHistory.value[0].id : "";
    })
    .catch((err) => {
      messageError($q, err);
--- a/src/modules/03_recruiting/components/Table.vue
+++ b/src/modules/03_recruiting/components/Table.vue
@ -15,6 +15,7 @@ const props = defineProps({
  fetchData: Function,
  count: Number,
  totalList: Number,
+  total: Number,
  pass: Number,
  notpass: Number,
  missed_exam: Number,
@ -75,8 +76,13 @@ function updatePagination(newPagination: any) {
  }
 }

-function getList() {
-  props.fetchData?.();
+function getList(enter?: string) {
+  if (enter == "enter") {
+    pagination.value.page = 1;
+    props.fetchData?.();
+  } else {
+    props.fetchData?.();
+  }
 }

 watch(
@ -187,7 +193,9 @@ watch(
        outlined
        placeholder="ค้นหา"
        style="max-width: 200px"
-        @keydown.enter.prevent="props.onSearch?.()"
+        @keydown.enter.prevent="
+          nornmalData ? props.onSearch?.() : getList('enter')
+        "
      >
        <template v-slot:append>
          <q-icon name="search" />
@ -238,7 +246,7 @@ watch(
      <slot v-bind="props" name="columns"></slot>
    </template>
    <template v-if="!nornmalData" v-slot:pagination="scope">
-      ทั้งหมด {{ props.count && props.count.toLocaleString() }} รายการ
+      ทั้งหมด {{ props.total?.toLocaleString() }} รายการ
      <q-pagination
        v-model="pagination.page"
        active-color="primary"
--- a/src/modules/03_recruiting/views/01_compete/Detail.vue
+++ b/src/modules/03_recruiting/views/01_compete/Detail.vue
@ -22,7 +22,7 @@ const { messageError, success, showLoader, hideLoader, onSearchDataTable } =
  mixin;

 const initialPagination = ref<Pagination>({
-  page:1,
+  page: 1,
  rowsPerPage: 10,
  sortBy: "year",
 });
@ -30,6 +30,7 @@ const year = ref<string>("");
 const round = ref<string>("");
 const name = ref<string>("");
 const count = ref<number>(0);
+const total = ref<number>(0);
 const totalList = ref<number>(0);
 const pass = ref<number>(0);
 const notpass = ref<number>(0);
@ -355,9 +356,10 @@ async function fetchData() {
  await http
    .post(config.API.getExamResultById(importId.value), {
      examAttribute: "",
+      keyword: filter.value,
      examResult: "",
-      page:initialPagination.value.page,
-      pageSize:initialPagination.value.rowsPerPage,
+      page: initialPagination.value.page,
+      pageSize: initialPagination.value.rowsPerPage,
    })
    .then((res) => {
      let header = res.data.result.header;
@ -367,8 +369,9 @@ async function fetchData() {
      notpass.value = header.notpass;
      missed_exam.value = header.missed_exam;
      other.value = header.other;
+      total.value = res.data.result.total;
      totalList.value = Math.ceil(
-        header.count / initialPagination.value.rowsPerPage
+        res.data.result.total / initialPagination.value.rowsPerPage
      );
      if (period != null) {
        name.value = period.name;
@ -504,6 +507,7 @@ onMounted(async () => {
        v-model:inputfilter="filter"
        v-model:inputvisible="visibleColumns"
        v-model:totalList="totalList"
+        v-model:total="total"
        v-model:pagination="initialPagination"
        :nornmalData="false"
        :conclude="true"
--- a/src/modules/03_recruiting/views/02_qualify/DisableDetail.vue
+++ b/src/modules/03_recruiting/views/02_qualify/DisableDetail.vue
@ -36,6 +36,7 @@ const pass = ref<number>(0);
 const notpass = ref<number>(0);
 const missed_exam = ref<number>(0);
 const other = ref<number>(0);
+const total = ref<number>(0);
 const totalList = ref<number>(0);

 const importId = ref<string>(route.params.id as string); // Period Import Id
@ -297,6 +298,7 @@ async function fetchData() {
  await http
    .post(config.API.getDisableExamResultById(importId.value), {
      examAttribute: "",
+      keyword: filter.value,
      examResult: "",
      page: initialPagination.value.page,
      pageSize: initialPagination.value.rowsPerPage,
@ -309,8 +311,9 @@ async function fetchData() {
      notpass.value = header.notpass;
      missed_exam.value = header.missed_exam;
      other.value = header.other;
+      total.value = res.data.result.total;
      totalList.value = Math.ceil(
-        header.count / initialPagination.value.rowsPerPage
+        res.data.result.total / initialPagination.value.rowsPerPage
      );
      const data = res.data.result.data;
      let result: RecruitDetailResponse[] = [];
@ -443,6 +446,7 @@ onMounted(async () => {
        :pagination="initialPagination"
        :visible-columns="visibleColumns"
        v-model:inputfilter="filter"
+        v-model:total="total"
        v-model:inputvisible="visibleColumns"
        :nornmalData="false"
        :conclude="true"
--- a/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue
@ -6,6 +6,7 @@ import { useRoute } from "vue-router";
 import { checkPermission } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
 import { useResultsPerformDataStore } from "@/modules/04_registryPerson/stores/ResultsPerformance";
+import { usePagination } from "@/composables/usePagination";
 import http from "@/plugins/http";
 import config from "@/app.config";

@ -24,6 +25,9 @@ const $q = useQuasar();
 const route = useRoute();
 const store = useResultsPerformDataStore();
 const { textRangePoint, textPoint } = store;
+const { pagination, params, onRequest } = usePagination("", () =>
+  getDevelop(true)
+);
 const mixin = useCounterMixin();
 const {
  date2Thai,
@ -61,15 +65,6 @@ const isLeave = defineModel<boolean>("isLeave", {
  required: true,
 });

-const totalIdp = ref<number>(0);
-const totalListIdp = ref<number>(1);
-const paginationIdp = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
-
 const resPerformForm = reactive<RequestItemsObject>({
  name: "",
  point1Total: 0, //ส่วนที่1 (น้ำหนัก)
@ -273,9 +268,6 @@ const columns = ref<QTableColumn[]>(
 const visibleColumns = ref<string[]>(
  baseVisibleColumns.value.filter((e: string) => e !== "lastUpdateFullName")
 );
-const pagination = ref({
-  sortBy: "lastUpdatedAt",
-});

 //Table การพัฒนารายบุคคล (Individual Development Plan)
 const rowsPlan = ref<any[]>([]);
@ -295,12 +287,10 @@ const columnsPlan = ref<QTableColumn[]>([
    name: "name",
    align: "left",
    label: "ความรู้/ทักษะ/สมรรถนะที่ต้องได้รับการพัฒนา",
-    sortable: false,
+    sortable: true,
    field: "name",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "developmentProjects",
@ -310,44 +300,36 @@ const columnsPlan = ref<QTableColumn[]>([
    field: "developmentProjects",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "developmentTarget",
    align: "left",
    label: "เป้าหมายการพัฒนา",
-    sortable: false,
+    sortable: true,
    field: "developmentTarget",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "developmentResults",
    align: "left",
    label: "วิธีการวัดผลการพัฒนา",
-    sortable: false,
+    sortable: true,
    field: "developmentResults",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
  {
    name: "developmentReport",
    align: "left",
    label: "รายงานผลการพัฒนา",
-    sortable: false,
+    sortable: true,
    field: "developmentReport",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
  },
 ]);
-const visibleColumnsPlan = ref<String[]>([
+const visibleColumnsPlan = ref<string[]>([
  "no",
  "name",
  "developmentProjects",
@ -357,8 +339,6 @@ const visibleColumnsPlan = ref<String[]>([
 ]);

 //Table ประวัติแก้ไข
-const rowsHistory = ref<ResponseObject[]>([]);
-const rowsHistoryMain = ref<ResponseObject[]>([]);
 const historyId = ref<string>("");
 const columnsHistory = ref<QTableColumn[]>(baseColumns.value);
 const visibleColumnsHistory = ref<string[]>(baseVisibleColumns.value);
@ -378,8 +358,8 @@ async function fetchData() {
    rowsMain.value = res.data.result;
  } catch (error) {
    messageError($q, error);
-    hideLoader();
  } finally {
+    hideLoader();
  }
 }

@ -387,29 +367,25 @@ async function fetchData() {
 async function getDevelop(isLoad?: boolean) {
  if (!profileId.value) return;
  isLoad && showLoader();
+  const queryParams = {
+    ...params.value,
+    searchKeyword: filterSearchPlan.value.trim(),
+  };
  await http
-    .get(
-      config.API.developMentPlan(empType.value) +
-        `/${profileId.value}?page=${paginationIdp.value.page}&pageSize=${
-          paginationIdp.value.rowsPerPage
-        }&searchKeyword=${filterSearchPlan.value.trim()}
-`
-    )
+    .get(config.API.developMentPlan(empType.value) + `/${profileId.value}`, {
+      params: queryParams,
+    })
    .then((res) => {
-      const data = res.data.result.data;
-      totalListIdp.value = Math.ceil(
-        res.data.result.total / paginationIdp.value.rowsPerPage
-      );
-      totalIdp.value = res.data.result.total;
-      rowsPlan.value = data;
-
-      isLoad && hideLoader();
+      const data = res.data.result;
+      pagination.value.rowsNumber = data.total;
+      rowsPlan.value = data.data;
    })
    .catch((e) => {
      messageError($q, e);
-      hideLoader();
    })
-    .finally(() => {});
+    .finally(() => {
+      isLoad && hideLoader();
+    });
 }

 /**
@ -531,11 +507,6 @@ function openDialogDevelop(data: any) {
  typeIDP.value = data.type;
 }

-function updatePaginationIdp(newPagination: any) {
-  paginationIdp.value.page = 1;
-  paginationIdp.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
 function serchDataTable() {
  rows.value = onSearchDataTable(
    filterSearch.value,
@ -544,13 +515,6 @@ function serchDataTable() {
  );
 }

-watch(
-  () => paginationIdp.value.rowsPerPage,
-  async () => {
-    await getDevelop(true);
-  }
-);
-
 onMounted(async () => {
  await fetchData();
  empType.value !== "-temp" && (await getDevelop());
@ -647,7 +611,6 @@ onMounted(async () => {
            bordered
            :rows="rows"
            :columns="columns"
-            v-model:pagination="pagination"
            :grid="modeView === 'card'"
            :visible-columns="visibleColumns"
          >
@ -769,9 +732,7 @@ onMounted(async () => {
              ref="filterPlanRef"
              outlined
              placeholder="ค้นหา"
-              @keydown.enter.prevent="
-                (paginationIdp.page = 1), getDevelop(true)
-              "
+              @keydown.enter.prevent="(pagination.page = 1), getDevelop(true)"
            >
              <template v-slot:append>
                <q-icon name="search" />
@ -825,7 +786,7 @@ onMounted(async () => {
        </div>

        <div class="col-12">
-          <d-table
+          <p-table
            flat
            dense
            bordered
@ -837,23 +798,9 @@ onMounted(async () => {
            :card-container-class="
              modeViewPlan === 'card' ? 'q-col-gutter-md' : ''
            "
-            @update:pagination="updatePaginationIdp"
+            @request="onRequest"
+            v-model:pagination="pagination"
          >
-            <template v-slot:pagination="scope">
-              ทั้งหมด {{ totalIdp.toLocaleString() }} รายการ
-              <q-pagination
-                v-model="paginationIdp.page"
-                active-color="primary"
-                color="dark"
-                :max="Number(totalListIdp)"
-                size="sm"
-                boundary-links
-                direction-links
-                :max-pages="5"
-                @update:model-value="getDevelop"
-              ></q-pagination>
-            </template>
-
            <template v-slot:header="props">
              <q-tr :props="props">
                <q-th auto-width />
@ -880,11 +827,7 @@ onMounted(async () => {
                >
                <q-td v-for="col in props.cols" :key="col.name" :props="props">
                  <div v-if="col.name == 'no'">
-                    {{
-                      (paginationIdp.page - 1) * paginationIdp.rowsPerPage +
-                      props.rowIndex +
-                      1
-                    }}
+                    {{ props.rowIndex + 1 }}
                  </div>
                  <div v-else-if="col.name == 'developmentProjects'">
                    <div class="column">
@ -996,7 +939,7 @@ onMounted(async () => {
                </q-card>
              </div>
            </template>
-          </d-table>
+          </p-table>
        </div>
      </q-card>
    </div>
--- a/src/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue
+++ b/src/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue
@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";

 import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRouter, useRoute } from "vue-router";
+import { usePagination } from "@/composables/usePagination";
 import config from "@/app.config";
 import http from "@/plugins/http";

@ -12,7 +13,6 @@ import http from "@/plugins/http";
 import type { QTableProps } from "quasar";
 import type {
  DataOption,
-  Pagination,
  Request,
 } from "@/modules/04_registryPerson/interface/index/Main";
 import type { DataRequest } from "@/modules/04_registryPerson/interface/response/Main";
@ -22,14 +22,11 @@ const router = useRouter();
 const route = useRoute();
 const store = useRequestEditStore();
 const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
+const { pagination, params, onRequest } = usePagination("", fetchListRequset);

 const routerName = ref<string>(route.name as string);
 //Table
 const rows = ref<DataRequest[]>([]); //รายการข้อมูลคำร้องขอแก้ไขทะเบียนประวัติ
-const page = ref<number>(1); //หน้า
-const pageSize = ref<number>(10); //จำนวนต่อหน้า
-const rowsTotal = ref<number>(0); //จำนวนรายการ
-const maxPage = ref<number>(0); //จำนวนหน้า
 const columns = ref<QTableProps["columns"]>([
  {
    name: "createdAt",
@ -45,7 +42,7 @@ const columns = ref<QTableProps["columns"]>([
    name: "fullname",
    align: "left",
    label: "ชื่อ-นามสกุล",
-    sortable: false,
+    sortable: true,
    field: "fullname",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
@ -54,7 +51,7 @@ const columns = ref<QTableProps["columns"]>([
    name: "topic",
    align: "left",
    label: "ชื่อเรื่อง",
-    sortable: false,
+    sortable: true,
    field: "topic",
    format: (v) => (v ? v : "-"),
    headerStyle: "font-size: 14px",
@ -64,7 +61,7 @@ const columns = ref<QTableProps["columns"]>([
    name: "detail",
    align: "left",
    label: "รายละเอียด",
-    sortable: false,
+    sortable: true,
    field: "detail",
    format: (v) => (v ? v : "-"),
    headerStyle: "font-size: 14px",
@ -84,7 +81,7 @@ const columns = ref<QTableProps["columns"]>([
    name: "remark",
    align: "left",
    label: "หมายเหตุ",
-    sortable: false,
+    sortable: true,
    field: "remark",
    format: (v) => (v ? v : "-"),
    headerStyle: "font-size: 14px",
@ -116,8 +113,7 @@ async function fetchListRequset() {
      ) + `admin`,
      {
        params: {
-          page: page.value,
-          pageSize: pageSize.value,
+          ...params.value,
          status: status.value,
          keyword: keyword.value.trim(),
        },
@ -125,8 +121,7 @@ async function fetchListRequset() {
    )
    .then((res) => {
      const data = res.data.result;
-      maxPage.value = Math.ceil(data.total / pageSize.value);
-      rowsTotal.value = data.total;
+      pagination.value.rowsNumber = data.total;
      rows.value = data.data;
    })
    .catch((err) => {
@ -139,7 +134,7 @@ async function fetchListRequset() {

 /** function เลือกสถานะคำร้อง*/
 function updateStatusValue() {
-  page.value = 1;
+  pagination.value.page = 1;
  // fetch รายการคำร้องขอแก้ไขทะเบียนประวัติ
  fetchListRequset();
 }
@ -177,26 +172,6 @@ function onclickEdit(data: Request) {
  }
 }

-/**
- * function เลือกแถวต่อหน้า
- * @param newPagination
- */
-function updatePageSizePagination(newPagination: Pagination) {
-  page.value = 1;
-  pageSize.value = newPagination.rowsPerPage;
-}
-
-/**
- * ดูการเปลี่ยนแปลงของ pageSize
- * เมื่อมีการเปลี่ยนแปลงจำทำการ ดึงช้อมูลรายการคำร้องขอแก้ไขทะเบียนประวัติตามจำนวน pageSize
- */
-watch(
-  () => pageSize.value,
-  () => {
-    fetchListRequset();
-  }
-);
-
 /**  HooK lifecycle ทำงานเมื่อมีการเรียกใช้งาน Componenets */
 onMounted(() => {
  fetchListRequset();
@ -265,14 +240,15 @@ onMounted(() => {
    </div>

    <div class="col-12">
-      <d-table
+      <p-table
        :columns="columns"
        :rows="rows"
        row-key="id"
        :rows-per-page-options="[10, 25, 50, 100]"
        :paging="true"
        :visible-columns="visibleColumns"
-        @update:pagination="updatePageSizePagination"
+        @request="onRequest"
+        v-model:pagination="pagination"
      >
        <template v-slot:header="props">
          <q-tr :props="props">
@ -302,21 +278,7 @@ onMounted(() => {
            </q-td>
          </q-tr>
        </template>
-        <template v-slot:pagination="scope">
-          ทั้งหมด {{ rowsTotal.toLocaleString() }} รายการ
-          <q-pagination
-            v-model="page"
-            active-color="primary"
-            color="dark"
-            :max="Number(maxPage)"
-            :max-pages="5"
-            size="sm"
-            boundary-links
-            direction-links
-            @update:model-value="fetchListRequset()"
-          ></q-pagination>
-        </template>
-      </d-table>
+      </p-table>
    </div>
  </q-card>
 </template>
--- a/src/modules/04_registryPerson/components/requestEdit/02_TabIDP.vue
+++ b/src/modules/04_registryPerson/components/requestEdit/02_TabIDP.vue
@ -1,17 +1,18 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted,  } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useQuasar } from "quasar";

 import { useCounterMixin } from "@/stores/mixin";
 import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
+import { usePagination } from "@/composables/usePagination";
 import config from "@/app.config";
 import http from "@/plugins/http";

 import type { QTableProps } from "quasar";
 import type {
  DataOption,
-  Pagination,
+  
 } from "@/modules/04_registryPerson/interface/index/Main";
 import type { DataListsIDP } from "@/modules/04_registryPerson/interface/response/Main";

@ -22,6 +23,7 @@ const route = useRoute();
 const store = useRequestEditStore();
 const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
 const routerName = ref<string>(route.name as string);
+const { pagination, params, onRequest } = usePagination("", fetchData);
 //ตัวแปร
 const status = ref<string>("PENDING"); //ค้นหาตามสถานะ
 const keyword = ref<string>(""); //คำค้นหา
@ -29,16 +31,12 @@ const statusOption = ref<DataOption[]>(store.optionStatusIDP); //รายกา

 //Table
 const rows = ref<DataListsIDP[]>([]); //รายการข้อมูลการพัฒนารายบุคคล
-const page = ref<number>(1); //หน้า
-const pageSize = ref<number>(10); //จำนวนต่อหน้า
-const rowsTotal = ref<number>(0); //จำนวนรายการ
-const maxPage = ref<number>(0); //จำนวนหน้า
 const columns = ref<QTableProps["columns"]>([
  {
    name: "createdAt",
    align: "left",
    label: "วันที่ยื่นขอ",
-    sortable: false,
+    sortable: true,
    field: "createdAt",
    format: (v) => (v ? date2Thai(v, false, true) : "-"),
    headerStyle: "font-size: 14px",
@ -48,7 +46,7 @@ const columns = ref<QTableProps["columns"]>([
    name: "createdFullName",
    align: "left",
    label: "ผู้ยื่นขอ",
-    sortable: false,
+    sortable: true,
    field: "createdFullName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
@ -57,7 +55,7 @@ const columns = ref<QTableProps["columns"]>([
    name: "name",
    align: "left",
    label: "ความรู้/ทักษะ/สมรรถนะที่ต้องได้รับการพัฒนา",
-    sortable: false,
+    sortable: true,
    field: "name",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
@ -75,7 +73,7 @@ const columns = ref<QTableProps["columns"]>([
    name: "developmentTarget",
    align: "left",
    label: "เป้าหมายการพัฒนา",
-    sortable: false,
+    sortable: true,
    field: "developmentTarget",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
@ -84,7 +82,7 @@ const columns = ref<QTableProps["columns"]>([
    name: "developmentResults",
    align: "left",
    label: "วิธีการวัดผลการพัฒนา",
-    sortable: false,
+    sortable: true,
    field: "developmentResults",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
@ -93,7 +91,7 @@ const columns = ref<QTableProps["columns"]>([
    name: "developmentReport",
    align: "left",
    label: "รายงานผลการพัฒนา",
-    sortable: false,
+    sortable: true,
    field: "developmentReport",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
@ -121,7 +119,7 @@ const columns = ref<QTableProps["columns"]>([
    name: "reason",
    align: "left",
    label: "หมายเหตุ",
-    sortable: false,
+    sortable: true,
    field: "reason",
    format: (v) => (v ? v : "-"),
    headerStyle: "font-size: 14px",
@ -151,17 +149,15 @@ async function fetchData() {
      ) + `admin`,
      {
        params: {
-          page: page.value,
-          pageSize: pageSize.value,
+          ...params.value,
          status: status.value ? status.value : "",
-          keyword: keyword.value,
+          keyword: keyword.value.trim(),
        },
      }
    )
    .then(async (res) => {
      const data = await res.data.result;
-      maxPage.value = Math.ceil(data.total / pageSize.value);
-      rowsTotal.value = data.total;
+      pagination.value.rowsNumber = data.total;
      rows.value = data.data;
    })
    .catch((err) => {
@ -174,7 +170,7 @@ async function fetchData() {

 /** function เลือกสถานะคำร้อง */
 function updateStatusValue() {
-  page.value = 1;
+  pagination.value.page = 1;
  // fetch รายการคำร้องขอแก้ไขทะเบียนประวัติ
  fetchData();
 }
@ -199,16 +195,7 @@ function filterOption(val: string, update: Function) {
 }

 /**
- * function เลือกแถวต่อหน้า
- * @param newPagination
- */
-function updatePageSizePagination(newPagination: Pagination) {
-  page.value = 1;
-  pageSize.value = newPagination.rowsPerPage;
-}
-
-/**
- * funciton  แก่ไขคำร้อง
+ * function  แก้ไขคำร้อง
 * @param id รายการคำร้อง
 */
 function onclickEdit(id: string) {
@ -266,17 +253,6 @@ async function downloadUrl(id: string, fileName: string) {
    });
 }

-/**
- * ดูการเปลี่ยนแปลงของ pageSize
- * เมื่อมีการเปลี่ยนแปลงจำทำการ ดึงช้อมูลรายการคำร้องขอแก้ไขทะเบียนประวัติตามจำนวน pageSize
- */
-watch(
-  () => pageSize.value,
-  () => {
-    fetchData();
-  }
-);
-
 /**  HooK lifecycle ทำงานเมื่อมีการเรียกใช้งาน Componenets */
 onMounted(() => {
  props.isIdp && fetchData();
@ -344,14 +320,15 @@ onMounted(() => {
    </div>

    <div class="col-12">
-      <d-table
+      <p-table
        :columns="columns"
        :rows="rows"
        row-key="id"
        :rows-per-page-options="[10, 25, 50, 100]"
        :paging="true"
        :visible-columns="visibleColumns"
-        @update:pagination="updatePageSizePagination"
+        @request="onRequest"
+        v-model:pagination="pagination"
      >
        <template v-slot:header="props">
          <q-tr :props="props">
@ -413,21 +390,7 @@ onMounted(() => {
            </q-td>
          </q-tr>
        </template>
-        <template v-slot:pagination="scope">
-          ทั้งหมด {{ rowsTotal.toLocaleString() }} รายการ
-          <q-pagination
-            v-model="page"
-            active-color="primary"
-            color="dark"
-            :max="Number(maxPage)"
-            :max-pages="5"
-            size="sm"
-            boundary-links
-            direction-links
-            @update:model-value="fetchData"
-          ></q-pagination>
-        </template>
-      </d-table>
+      </p-table>
    </div>
  </q-card>
 </template>
--- a/src/modules/04_registryPerson/interface/request/Edit.ts
+++ b/src/modules/04_registryPerson/interface/request/Edit.ts
@ -2,8 +2,8 @@ interface DataFilter {
  status: string;
  empType: string;
  keyword: string;
-  page: number;
-  pageSize: number;
+  page?: number;
+  pageSize?: number;
 }

 interface FormDataSalary {
--- a/src/modules/04_registryPerson/views/edit/list.vue
+++ b/src/modules/04_registryPerson/views/edit/list.vue
@ -7,6 +7,7 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRoute, useRouter } from "vue-router";
 import { useEditPosDataStore } from "@/modules/04_registryPerson/stores/Edit";
+import { usePagination } from "@/composables/usePagination";

 /** importType*/
 import type { QTableColumn } from "quasar";
@ -23,6 +24,7 @@ const route = useRoute();
 const router = useRouter();
 const store = useEditPosDataStore();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
+const { pagination, params, onRequest } = usePagination("", fetchData);

 const organizationOps = ref<DataOption[]>([]);
 const organizationOpsMain = ref<DataOption[]>([]);
@ -57,11 +59,7 @@ const filter = reactive<DataFilter>({
  status: store.status,
  empType: store.empType,
  keyword: store.keyword,
-  page: store.page,
-  pageSize: store.pageSize,
 });
-const total = ref<number>(0);
-const maxPage = ref<number>(0);
 const rows = ref<DataSalaryPos[]>([]);
 const columns = ref<QTableColumn[]>([
  {
@ -83,7 +81,7 @@ const columns = ref<QTableColumn[]>([
    style: "font-size: 14px",
  },
  {
-    name: "fullName",
+    name: "firstName",
    align: "left",
    label: "ชื่อ-นามสกุล",
    sortable: true,
@ -130,7 +128,7 @@ const columns = ref<QTableColumn[]>([
    name: "org",
    align: "left",
    label: "สังกัด",
-    sortable: true,
+    sortable: false,
    field: "org",
    headerStyle: "font-size: 14px;min-width: 280px",
    style: "font-size: 14px",
@ -151,7 +149,7 @@ const columns = ref<QTableColumn[]>([
 const visibleColumns = ref<string[]>([
  "posNo",
  "citizenId",
-  "fullName",
+  "firstName",
  "position",
  "posType",
  "posLevel",
@ -240,10 +238,9 @@ function filterSelector(val: string, update: Function, type: string) {
 }

 /** function fetch รายการแก้ไขทะเบียนประวัติ ตำแหน่ง/เงินเดือน*/
-function fetchData() {
+async function fetchData() {
  let queryParams = {
-    page: filter.page,
-    pageSize: filter.pageSize,
+    ...params.value,
    type: filter.empType?.toLocaleUpperCase(),
    searchKeyword: filter.keyword,
    statusCheckEdit: filter.status?.toLocaleUpperCase(),
@ -253,18 +250,17 @@ function fetchData() {
  store.status = filter.status;
  store.empType = filter.empType;
  store.keyword = filter.keyword;
-  store.page = filter.page;
-  store.pageSize = filter.pageSize;
+  store.page = pagination.value.page;
+  store.pageSize = pagination.value.rowsPerPage;

  if (organization.value !== "" && filter.empType !== "") {
    rows.value = [];
    showLoader();
-    http
+    await http
      .get(config.API.salaryTemp, { params: queryParams })
      .then((res) => {
        const data = res.data.result;
-        total.value = data.total;
-        maxPage.value = Math.ceil(data.total / filter.pageSize);
+        pagination.value.rowsNumber = data.total;
        rows.value = data.data;
      })
      .catch((err) => {
@ -283,21 +279,12 @@ function fetchData() {
 function onSearchData(val: boolean = true) {
  store.orgId = organization.value;
  if (val) {
-    filter.page = 1;
+    pagination.value.page = 1;
  }

  fetchData();
 }

-/**
- * function เปลี่ยนแถวต่อหน้า
- * @param newPagination ข้อมูล Pagination
- */
-function updatePageSize(newPagination: Pagination) {
-  filter.pageSize = newPagination.rowsPerPage;
-  onSearchData();
-}
-
 /**
 * function ไปหน้ารายการประวัติตำแหน่ง/เงินเดือน
 * @param id ProfileID
@ -315,6 +302,9 @@ onMounted(async () => {
  } else {
    organizationOpsMain.value = store.orgData;
    organizationOps.value = store.orgData;
+    pagination.value.page = store.page;
+    pagination.value.rowsPerPage = store.pageSize;
+    fetchData();
  }
 });
 </script>
@ -436,7 +426,7 @@ onMounted(async () => {
    </div>

    <div class="col-12">
-      <d-table
+      <p-table
        ref="table"
        row-key="id"
        flat
@ -447,7 +437,8 @@ onMounted(async () => {
        :paging="true"
        :rows-per-page-options="[20, 50, 100]"
        :visible-columns="visibleColumns"
-        @update:pagination="updatePageSize"
+        @request="onRequest"
+        v-model:pagination="pagination"
      >
        >
        <template v-slot:header="props">
@ -490,21 +481,7 @@ onMounted(async () => {
            </q-td>
          </q-tr>
        </template>
-        <template v-slot:pagination="scope">
-          ทั้งหมด {{ total.toLocaleString() }} รายการ
-          <q-pagination
-            v-model="filter.page"
-            active-color="primary"
-            color="dark"
-            :max="Number(maxPage)"
-            :max-pages="5"
-            size="sm"
-            boundary-links
-            direction-links
-            @update:model-value="onSearchData(false)"
-          ></q-pagination>
-        </template>
-      </d-table>
+      </p-table>
    </div>
  </q-card>
 </template>
--- a/src/modules/05_placement/components/probation/MainProbation.vue
+++ b/src/modules/05_placement/components/probation/MainProbation.vue
@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive, watch } from "vue";
+import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";

@ -12,9 +12,9 @@ import {
 } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
 import { useTransferDataStore } from "@/modules/05_placement/store";
+import { usePagination } from "@/composables/usePagination";

 import type { QTableProps } from "quasar";
-import type { Pagination } from "@/modules/05_placement/interface/index/Main";
 import type { OpfillterTypeSt } from "@/modules/05_placement/interface/request/Main";
 import type {
  ResListProbation,
@ -30,10 +30,18 @@ const mixin = useCounterMixin();
 const router = useRouter();
 const { statusProbationMain } = storeFn;
 const { messageError, success, showLoader, hideLoader, dialogConfirm } = mixin;
+const { pagination, params, onRequest } = usePagination(
+  "",
+  fetchProbationPersonalList
+);
+const {
+  pagination: pagination2,
+  params: params2,
+  onRequest: onRequest2,
+} = usePagination("", onclickAddProbation);

 const modalCommand = ref<boolean>(false); // ตัวแปร popup ออกคำสั่ง
 const modal = ref<boolean>(false);
-const paging2 = ref<boolean>(true);
 const fillterStatus = ref<ResListProbation[]>([]);
 const fillter = ref<string>("");
 const filterKeyword = ref<string>("");
@ -43,8 +51,6 @@ const rows2 = ref<ResProfileProbation[]>([]);
 const dataUpdate = ref<ResListProbation[]>([]);
 const Opfillter = ref<OpfillterTypeSt[]>([]);
 const Opfillter2 = ref<OpfillterTypeSt[]>([]);
-const formProbation = reactive({ keyword: "", pageSize: 10, page: 1 });
-const maxPage = ref<number>(1);

 const modalAdd = ref<boolean>(false); //เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ
 const personId = ref<string>(""); //เก็บ id คน ตาม row
@ -52,8 +58,6 @@ const topic = ref<string>(
  "แต่งตั้งคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ"
 );

-const total = ref<number>(0);
-const totalList = ref<number>(1);
 /** columns ฟังก์ชันดดึงข้อมูลรายการผู้ทดลองปฏิบัติหน้าที่ราชการ */
 const columns = ref<QTableProps["columns"]>([
  {
@ -106,7 +110,7 @@ const columns = ref<QTableProps["columns"]>([
    name: "probation_no",
    align: "center",
    label: "ครั้งที่ทดลองปฏิบัติหน้าที่ราชการ",
-    sortable: true,
+    sortable: false,
    field: "probation_no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
@ -130,7 +134,7 @@ const columns = ref<QTableProps["columns"]>([
    name: "probation_status",
    align: "left",
    label: "สถานะ",
-    sortable: true,
+    sortable: false,
    field: "probation_status",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
@ -146,12 +150,6 @@ const visibleColumns = ref<string[]>([
  "order_number",
  "probation_status",
 ]);
-const pagination = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});

 /** columns หัวตารางเพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ */
 const columns2 = ref<QTableProps["columns"]>([
@ -165,7 +163,7 @@ const columns2 = ref<QTableProps["columns"]>([
    style: "font-size: 14px",
  },
  {
-    name: "fullname",
+    name: "firstName",
    align: "left",
    label: "ชื่อ-นามสกุล",
    sortable: true,
@ -198,11 +196,11 @@ const columns2 = ref<QTableProps["columns"]>([
    },
  },
  {
-    name: "organizationOrganization",
+    name: "orgRootName",
    align: "left",
    label: "สังกัด",
    sortable: true,
-    field: "organizationOrganization",
+    field: "orgRootName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
@ -210,50 +208,39 @@ const columns2 = ref<QTableProps["columns"]>([
    name: "status",
    align: "left",
    label: "ทดลองปฏิบัติหน้าที่ราชการ",
-    sortable: true,
+    sortable: false,
    field: "status",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
-    name: "refCommandNo",
+    name: "commandNo",
    align: "center",
    label: "เลขที่คําสั่งบรรจุแต่งตั้ง",
    sortable: true,
-    field: "refCommandNo",
+    field: "commandNo",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
 ]);
-const pagination2 = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});

 /** ฟังก์ชันดดึงข้อมูลรายการผู้ทดลองปฏิบัติหน้าที่ราชการ*/
 async function fetchProbationPersonalList() {
-  rows.value = [];
  showLoader();
  await http
-    .get(
-      config.API.probationPersonalList() +
-        `?status=${!fillter.value ? "" : fillter.value}&page=${
-          pagination.value.page
-        }&pageSize=${
-          pagination.value.rowsPerPage
-        }&keyword=${filterKeyword.value.trim()}`
-    )
+    .get(config.API.probationPersonalList(), {
+      params: {
+        ...params.value,
+        status: !fillter.value ? "" : fillter.value,
+        keyword: filterKeyword.value.trim(),
+      },
+    })
    .then(async (res) => {
-      const data = await res.data.result.data;
-      const resTotal = await res.data.result.total;
-
-      rows.value = data;
-      fillterStatus.value = data;
-      dataUpdate.value = data;
-      totalList.value = Math.ceil(resTotal / pagination.value.rowsPerPage);
-      total.value = resTotal;
+      const result = await res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data;
+      fillterStatus.value = result.data;
+      dataUpdate.value = result.data;

      // option  filter
      Opfillter.value = storeFn.optionStatusProbation;
@ -261,6 +248,7 @@ async function fetchProbationPersonalList() {
    })
    .catch((e) => {
      messageError($q, e);
+      rows.value = [];
    })
    .finally(() => {
      hideLoader();
@ -269,43 +257,30 @@ async function fetchProbationPersonalList() {

 /* ฟังก์ชันดึงข้อมูลเพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ*/
 async function onclickAddProbation() {
-  rows2.value = [];
  modal.value = true;
  modal.value && showLoader();
  await http
-    .post(config.API.orgProfileProbation, formProbation)
+    .post(config.API.orgProfileProbation, {
+      ...params2.value,
+      keyword: filterKeyword2.value.trim(),
+    })
    .then((res) => {
-      maxPage.value = Math.ceil(res.data.result.total / formProbation.pageSize);
-      rows2.value = res.data.result.data;
+      const result = res.data.result;
+      pagination2.value.rowsNumber = result.total;
+      rows2.value = result.data;
    })
    .catch((err) => {
      messageError($q, err);
+      rows2.value = [];
    })
    .finally(() => {
      hideLoader();
    });
 }

-/**
- * function updatePagination
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePagination(newPagination: Pagination) {
-  formProbation.page = 1;
-  formProbation.pageSize = newPagination.rowsPerPage;
-}
-
-/**
- * function updatePagination
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePaginationMain(newPagination: Pagination) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
-function filterKeyword2Fn(page: number) {
-  page !== 1 ? (formProbation.page = 1) : onclickAddProbation();
+function filterKeyword2Fn() {
+  pagination2.value.page = 1;
+  onclickAddProbation();
 }

 /**
@ -377,11 +352,6 @@ async function onCloseDialog() {
  modal.value = false;
 }

-function paginationLabel2(start: string, end: string, total: string) {
-  if (paging2.value == true) return " " + start + "-" + end + " ใน " + total;
-  else return start + "-" + end + " ใน " + total;
-}
-
 /**
 * ค้นหาตาม text
 * @param val ค่าที่ค้นหา
@ -441,25 +411,22 @@ function closeAdd() {
  modalAdd.value = false;
  personId.value = "";
  topic.value = "แต่งตั้งคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ";
+  rows2.value = [];
+  filterKeyword2.value = "";
+  pagination2.value = {
+    page: 1,
+    rowsNumber: 0,
+    rowsPerPage: 10,
+    sortBy: "",
+    descending: false,
+  };
 }

 function getSearchMain() {
-  rows.value = [];
  pagination.value.page = 1;
  fetchProbationPersonalList();
 }

-watch([() => formProbation.page, () => formProbation.pageSize], () => {
-  onclickAddProbation();
-});
-
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    getSearchMain();
-  }
-);
-
 /** get ค่า เมื่อโหลดหน้า */
 onMounted(() => {
  fetchProbationPersonalList();
@ -564,7 +531,7 @@ onMounted(() => {
        />
      </div>
      <div class="col-12">
-        <d-table
+        <p-table
          :columns="columns"
          :rows="rows"
          row-key="personal_id"
@ -575,7 +542,8 @@ onMounted(() => {
          class="custom-header-table"
          :visible-columns="visibleColumns"
          :rows-per-page-options="[10, 25, 50, 100]"
-          @update:pagination="updatePaginationMain"
+          @request="onRequest"
+          v-model:pagination="pagination"
        >
          <template v-slot:header="props">
            <q-tr :props="props">
@ -617,11 +585,7 @@ onMounted(() => {
              </q-td>
              <q-td v-for="col in props.cols" :key="col.name" :props="props">
                <div v-if="col.name == 'no'">
-                  {{
-                    (pagination.page - 1) * pagination.rowsPerPage +
-                    props.rowIndex +
-                    1
-                  }}
+                  {{ props.rowIndex + 1 }}
                </div>
                <div v-else-if="col.name == 'order_number'">
                  {{
@ -649,27 +613,13 @@ onMounted(() => {
              </q-td>
            </q-tr>
          </template>
-          <template v-slot:pagination="scope">
-            ทั้งหมด {{ total.toLocaleString() }} รายการ
-            <q-pagination
-              v-model="pagination.page"
-              active-color="primary"
-              color="dark"
-              :max="Number(totalList)"
-              size="sm"
-              boundary-links
-              direction-links
-              :max-pages="5"
-              @update:model-value="fetchProbationPersonalList"
-            ></q-pagination>
-          </template>
-        </d-table>
+        </p-table>
      </div>
    </div>
  </q-card>

  <q-dialog v-model="modal" persistent>
-    <q-card style="width: 900px; max-width: 80vw">
+    <q-card style="min-width: 75%">
      <q-form ref="myForm">
        <DialogHeader
          tittle="เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ "
@ -681,10 +631,10 @@ onMounted(() => {
            class="col-12"
            standout
            dense
-            v-model="formProbation.keyword"
+            v-model="filterKeyword2"
            outlined
            placeholder="ค้นหา"
-            @keydown.enter.prevent="filterKeyword2Fn(formProbation.page)"
+            @keydown.enter.prevent="filterKeyword2Fn()"
          >
            <template v-slot:append>
              <q-icon v-if="filterKeyword2 == ''" name="search" />
@ -696,7 +646,7 @@ onMounted(() => {
            </template>
          </q-input>
          <div class="col-12">
-            <d-table
+            <p-table
              ref="table2"
              :columns="columns2"
              :rows="rows2"
@ -706,10 +656,9 @@ onMounted(() => {
              :paging="true"
              dense
              class="custom-header-table"
-              :pagination-label="paginationLabel2"
              v-model:pagination="pagination2"
-              @update:pagination="updatePagination"
              :rows-per-page-options="[10, 25, 50, 100]"
+              @request="onRequest2"
            >
              <template v-slot:header="props">
                <q-tr :props="props">
@ -742,14 +691,10 @@ onMounted(() => {
                    :props="props"
                  >
                    <div v-if="col.name == 'no'">
-                      {{
-                        (formProbation.page - 1) * formProbation.pageSize +
-                        props.rowIndex +
-                        1
-                      }}
+                      {{ props.rowIndex + 1 }}
                    </div>

-                    <div v-else-if="col.name == 'fullname'">
+                    <div v-else-if="col.name == 'firstName'">
                      {{
                        (props.row.prefix ? props.row.prefix : "") +
                        props.row.firstName +
@ -766,7 +711,7 @@ onMounted(() => {
                      />
                    </div>
                    <div
-                      v-else-if="col.name == 'organizationOrganization'"
+                      v-else-if="col.name == 'orgRootName'"
                      class="table_ellipsis"
                    >
                      <div
@ -800,7 +745,7 @@ onMounted(() => {
                        }${props.row.orgRootName ? props.row.orgRootName : ""}`
                      }}
                    </div>
-                    <div v-else-if="col.name == 'refCommandNo'">
+                    <div v-else-if="col.name == 'commandNo'">
                      {{
                        props.row.commandNo
                          ? props.row.commandNo != "xx/2566"
@ -815,20 +760,7 @@ onMounted(() => {
                  </q-td>
                </q-tr>
              </template>
-              <template v-slot:pagination="scope">
-                ทั้งหมด {{ rows2.length.toLocaleString() }} รายการ
-                <q-pagination
-                  v-model="formProbation.page"
-                  active-color="primary"
-                  color="dark"
-                  :max="maxPage"
-                  size="sm"
-                  boundary-links
-                  direction-links
-                  :max-pages="5"
-                ></q-pagination>
-              </template>
-            </d-table>
+            </p-table>
          </div>
        </q-card-section>
      </q-form>
@ -836,7 +768,7 @@ onMounted(() => {
  </q-dialog>

  <q-dialog v-model="modalAdd" persistent>
-    <q-card style="width: 900px; max-width: 80vw">
+    <q-card style="width: 90%; max-width: 80vw">
      <q-form greedy @submit.prevent @validation-success="onSubmitAdd">
        <DialogHeader
          tittle="เพิ่มการแต่งตั้งคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ"
@ -866,5 +798,8 @@ onMounted(() => {
    </q-card>
  </q-dialog>

-  <DialogOrder v-model:modal="modalCommand" :fetch-data="fetchProbationPersonalList" />
+  <DialogOrder
+    v-model:modal="modalCommand"
+    :fetch-data="fetchProbationPersonalList"
+  />
 </template>
--- a/src/modules/05_placement/components/probation/MainSurvey.vue
+++ b/src/modules/05_placement/components/probation/MainSurvey.vue
@ -1,24 +1,24 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref } from "vue";
 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 { Pagination } from "@/modules/05_placement/interface/index/Main";
 import type { MainData } from "@/modules/05_placement/interface/index/Survey";

 const $q = useQuasar();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+const { pagination, params, onRequest } = usePagination("", getData);

 const year = ref<number | null>(new Date().getFullYear()); //ปีงบประมาณ

 const rows = ref<MainData[]>([]);
 const filterKeyword = ref<string>("");
-const total = ref<number>(0);
-const totalList = ref<number>(1);
+
 /** หัวตาราง */
 const columns = ref<QTableProps["columns"]>([
  {
@ -97,31 +97,21 @@ const visibleColumns = ref<string[]>([
  "answer3",
  "createdAt",
 ]);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 10,
-  rowsPerPage: 10,
-});

 async function getData() {
  showLoader();
  await http
    .get(config.API.probationSurvey, {
      params: {
+        ...params.value,
        year: year.value,
-        keyword: filterKeyword.value,
-        page: pagination.value.page,
-        pageSize: pagination.value.rowsPerPage,
+        keyword: filterKeyword.value.trim(),
      },
    })
    .then(async (res) => {
-      const data = await res.data.result.data;
-      totalList.value = Math.ceil(
-        res.data.result.total / pagination.value.rowsPerPage
-      );
-      total.value = res.data.result.total;
-      rows.value = data;
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data;
    })
    .catch((e) => {
      messageError($q, e);
@ -131,23 +121,11 @@ async function getData() {
    });
 }

-function updatePagination(newPagination: Pagination) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
 function getSearch() {
  pagination.value.page = 1;
  getData();
 }

-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    getSearch();
-  }
-);
-
 onMounted(async () => {
  await getData();
 });
@ -166,7 +144,7 @@ onMounted(async () => {
              autoApply
              year-picker
              :enableTimePicker="false"
-              @update:model-value="getData()"
+              @update:model-value="getSearch()"
            >
              <template #year="{ year }">{{ year + 543 }}</template>
              <template #year-overlay-value="{ value }">{{
@ -193,7 +171,7 @@ onMounted(async () => {
            ref="filterRef"
            outlined
            placeholder="ค้นหาจากชื่อ - นามสกุล /ตำแหน่ง"
-            @keydown.enter.prevent="getData()"
+            @keydown.enter.prevent="getSearch()"
            style="width: 350px"
          >
            <template v-slot:append>
@ -217,7 +195,7 @@ onMounted(async () => {
        </div>
      </div>
      <div class="col-12">
-        <d-table
+        <p-table
          ref="table"
          :columns="columns"
          :rows="rows"
@ -228,23 +206,9 @@ onMounted(async () => {
          :paging="true"
          dense
          :rows-per-page-options="[10, 25, 50, 100]"
-          @update:pagination="updatePagination"
+          v-model:pagination="pagination"
+          @request="onRequest"
        >
-          <template v-slot:pagination="scope">
-            ทั้งหมด {{ total.toLocaleString() }} รายการ
-            <q-pagination
-              v-model="pagination.page"
-              active-color="primary"
-              color="dark"
-              :max="Number(totalList)"
-              size="sm"
-              boundary-links
-              direction-links
-              :max-pages="5"
-              @update:model-value="getData()"
-            ></q-pagination>
-          </template>
-
          <template v-slot:header="props">
            <q-tr :props="props">
              <q-th v-for="col in props.cols" :key="col.name" :props="props">
@ -256,11 +220,7 @@ onMounted(async () => {
            <q-tr :props="props">
              <q-td v-for="col in props.cols" :key="col.name" :props="props">
                <div v-if="col.name == 'no'">
-                  {{
-                    (pagination.page - 1) * pagination.rowsPerPage +
-                    props.rowIndex +
-                    1
-                  }}
+                  {{ props.rowIndex + 1 }}
                </div>

                <div v-else>
@ -269,7 +229,7 @@ onMounted(async () => {
              </q-td>
            </q-tr>
          </template>
-        </d-table>
+        </p-table>
      </div>
    </div>
  </q-card>
--- a/src/modules/08_registryEmployee/views/Main.vue
+++ b/src/modules/08_registryEmployee/views/Main.vue
@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive, watch } from "vue";
+import { ref, onMounted, reactive } from "vue";
 import { useQuasar } from "quasar";

 import { useRouter } from "vue-router";
@ -8,18 +8,16 @@ import {
  checkPermissionList,
  checkPermissionCreate,
 } from "@/utils/permissions";
-import { updateCurrentPage } from "@/utils/function";
+
 import { useCounterMixin } from "@/stores/mixin";
 import { useRegistryEmp } from "@/modules/08_registryEmployee/stores/registry-employee";
+import { usePagination } from "@/composables/usePagination";
 import http from "@/plugins/http";
 import config from "@/app.config";

 /** importType*/
 import type { QInput, QTableProps } from "quasar";
-import type {
-  NewPagination,
-  DataOption,
-} from "@/modules/08_registryEmployee/interface/index/Main";
+import type { DataOption } from "@/modules/08_registryEmployee/interface/index/Main";
 import type { DataEmployee } from "@/modules/08_registryEmployee/interface/response/Employee";

 /** importComponents*/
@ -39,6 +37,10 @@ const {
  findOrgNameHtml,
 } = useCounterMixin();
 const { statusText } = useRegistryEmp();
+const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
+  "",
+  fetchList
+);

 const modalAddEmployee = ref<boolean>(false); // popup เพิ่มข้อมูลลูกจ้างชั่วคราว
 const modalPos = ref<boolean>(false); //popup กำหนดตำแหน่ง
@ -47,11 +49,7 @@ const dataRow = ref<DataEmployee>(); //ข้อมูลรายชื่อ

 /** Table */
 const rows = ref<DataEmployee[]>([]); //รายชื่อลูกจ้างชั่วคราว
-const maxPage = ref<number>(0); //จำนวนหน้า
-const total = ref<number>(0); //จำนวนข้อมูล
 const queryParams = reactive({
-  page: 1,
-  pageSize: 10,
  type: "temp",
  searchField: "fullName",
  searchKeyword: "",
@ -67,12 +65,7 @@ const columns = ref<QTableProps["columns"]>([
    align: "left",
    label: "ลำดับ",
    sortable: false,
-    field: (row) =>
-      (
-        (queryParams.page - 1) * queryParams.pageSize +
-        rows.value.indexOf(row) +
-        1
-      ).toLocaleString(),
+    field: "no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
@ -80,16 +73,16 @@ const columns = ref<QTableProps["columns"]>([
    name: "citizenId",
    align: "left",
    label: "เลขประจำตัวประชาชน",
-    sortable: false,
+    sortable: true,
    field: "citizenId",
    headerStyle: "font-size: 14px; min-width: 200px",
    style: "font-size: 14px; ",
  },
  {
-    name: "fullname",
+    name: "firstName",
    align: "left",
    label: "ชื่อ-นามสกุล",
-    sortable: false,
+    sortable: true,
    field: "fullname",
    format(val, row) {
      return `${row.prefix}${row.firstName}  ${row.lastName}`;
@ -98,29 +91,20 @@ const columns = ref<QTableProps["columns"]>([
    style: "font-size: 14px; ",
  },
  {
-    name: "draftOrganizationOrganization",
+    name: "positionTemp",
    align: "left",
    label: "ตำแหน่ง/สังกัดที่รับการบรรจุ",
-    sortable: false,
-    field: "draftOrganizationOrganization",
+    sortable: true,
+    field: "positionTemp",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
-  // {
-  //   name: "draftPositionEmployee",
-  //   align: "left",
-  //   label: "ตำแหน่งที่บรรจุ",
-  //   sortable: false,
-  //   field: "draftPositionEmployee",
-  //   headerStyle: "font-size: 14px; min-width: 200px",
-  //   style: "font-size: 14px; ",
-  // },

  {
    name: "govAge",
    align: "left",
    label: "อายุราชการ(ปี)",
-    sortable: false,
+    sortable: true,
    field: "govAge",
    format(val) {
      return val;
@ -143,17 +127,17 @@ const columns = ref<QTableProps["columns"]>([
    name: "dateAppoint",
    align: "left",
    label: "วันที่แต่งตั้ง",
-    sortable: false,
+    sortable: true,
    field: "dateAppoint",
    headerStyle: "font-size: 14px",
    format: (val) => date2Thai(val),
    style: "font-size: 14px",
  },
  {
-    name: "age",
+    name: "birthDate",
    align: "left",
    label: "อายุ",
-    sortable: false,
+    sortable: true,
    field: "age",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
@ -162,7 +146,7 @@ const columns = ref<QTableProps["columns"]>([
    name: "createdAt",
    align: "left",
    label: "วันที่สร้าง",
-    sortable: false,
+    sortable: true,
    field: "createdAt",
    format(val) {
      return date2Thai(val);
@ -174,7 +158,7 @@ const columns = ref<QTableProps["columns"]>([
    name: "dateRetireLaw",
    align: "left",
    label: "วันที่พ้นราชการ",
-    sortable: false,
+    sortable: true,
    field: "dateRetireLaw",
    format(val) {
      return date2Thai(val);
@ -198,12 +182,11 @@ const columns = ref<QTableProps["columns"]>([
 const visibleColumns = ref<String[]>([
  "no",
  "citizenId",
-  "fullname",
-  "draftOrganizationOrganization",
-  // "draftPositionEmployee",
+  "firstName",
+  "positionTemp",
  "govAge",
  "dateEmployment",
-  "age",
+  "birthDate",
  "createdAt",
  "dateRetireLaw",
  "statustext",
@ -216,14 +199,15 @@ async function fetchList() {
  await http
    .get(config.API.registryNew("-temp"), {
      params: {
+        ...params.value,
        ...queryParams,
        searchKeyword: queryParams.searchKeyword.trim(),
      },
    })
    .then(async (res) => {
-      rows.value = await res.data.result.data;
-      maxPage.value = Math.ceil(res.data.result.total / queryParams.pageSize);
-      total.value = res.data.result.total;
+      const result = await res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data;
    })
    .catch((err) => {
      messageError($q, err);
@ -243,11 +227,7 @@ function onClickDelete(id: string) {
    await http
      .delete(config.API.registryNew("-employee") + `/${id}`)
      .then(async () => {
-        queryParams.page = await updateCurrentPage(
-          queryParams.page,
-          maxPage.value,
-          rows.value.length
-        );
+        await checkAndUpdatePage(rows.value.length);
        await fetchList();
        await success($q, "ลบข้อมูลสำเร็จ");
      })
@ -287,22 +267,22 @@ function onClickSendOrder() {
  modalSendOrder.value = true;
 }

-/**
- * ฟังก์ชันอัพเดต Pagination
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePagination(newPagination: NewPagination) {
-  queryParams.page = 1;
-  queryParams.pageSize = newPagination.rowsPerPage;
-}
+// /**
+//  * ฟังก์ชันอัพเดต Pagination
+//  * @param newPagination ข้อมูล Pagination ใหม่
+//  */
+// function updatePagination(newPagination: NewPagination) {
+//   queryParams.page = 1;
+//   queryParams.pageSize = newPagination.rowsPerPage;
+// }

-/** ทำงานเมื่อมีการเปลี่่ยนจำนวนข้อมูลต่อหน้า */
-watch(
-  () => queryParams.pageSize,
-  () => {
-    fetchList();
-  }
-);
+// /** ทำงานเมื่อมีการเปลี่่ยนจำนวนข้อมูลต่อหน้า */
+// watch(
+//   () => queryParams.pageSize,
+//   () => {
+//     fetchList();
+//   }
+// );

 /** ทำงานเมื่อมีการเรียกใข้ Components */
 onMounted(async () => {
@ -364,7 +344,12 @@ onMounted(async () => {
          placeholder="ค้นหา"
          style="max-width: 200px"
          class="q-ml-sm"
-          @keydown.enter.prevent="(queryParams.page = 1), fetchList()"
+          @keydown.enter.prevent="
+            () => {
+              pagination.page = 1;
+              fetchList();
+            }
+          "
        >
          <template v-slot:append>
            <q-icon name="search" />
@ -388,13 +373,14 @@ onMounted(async () => {
      </div>
    </div>
    <div class="col-12 q-pt-sm">
-      <d-table
+      <p-table
        :rows="rows"
        :columns="columns"
        :visible-columns="visibleColumns"
        row-key="id"
        :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">
@ -473,7 +459,7 @@ onMounted(async () => {
              </q-btn>
            </q-td>
            <q-td v-for="col in props.cols" :key="col.name" :props="props">
-              <template v-if="col.name === 'draftOrganizationOrganization'">
+              <template v-if="col.name === 'positionTemp'">
                <div v-if="props.row.draftPositionEmployee !== null">
                  <div class="col-4">
                    <div>
@ -522,13 +508,16 @@ onMounted(async () => {
                  </div>
                </div>
              </template>
+              <div v-else-if="col.name === 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
              <div v-else>
                {{ col.value !== null && col.value !== "" ? col.value : "-" }}
              </div>
            </q-td>
          </q-tr>
        </template>
-        <template v-slot:pagination="scope">
+        <!-- <template v-slot:pagination="scope">
          ทั้งหมด {{ total }} รายการ
          <q-pagination
            v-model="queryParams.page"
@ -541,8 +530,8 @@ onMounted(async () => {
            :max-pages="5"
            @update:model-value="fetchList"
          ></q-pagination>
-        </template>
-      </d-table>
+        </template> -->
+      </p-table>
    </div>
  </q-card>

--- a/src/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue
@ -20,7 +20,7 @@ const total = computed(() => {
 });

 const pagination = ref({
-  sortBy: "desc",
+  sortBy: "",
  descending: false,
  page: 1,
  rowsPerPage: 10,
--- a/src/modules/12_evaluatePersonal/components/Director/Form.vue
+++ b/src/modules/12_evaluatePersonal/components/Director/Form.vue
@ -1,13 +1,14 @@
 <script setup lang="ts">
 import { ref, reactive, watch, onMounted, computed, type PropType } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { usePagination } from "@/composables/usePagination";

-/**
- * importTypr
- */
+/** importType*/
 import type { QTableProps } from "quasar";
 import type {
  FormData,
@ -17,21 +18,13 @@ import type {
 } from "@/modules/11_discipline/interface/request/director";
 import type { Pagination } from "@/modules/12_evaluatePersonal/interface/index/Main";

-/**
- * importComponenst
- */
+/** importComponenst*/
 import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";

-/**
- * importStore
- */
-import { useCounterMixin } from "@/stores/mixin";
-
-/**
- * use
- */
+/** use*/
 const $q = useQuasar();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
+const { pagination, params, onRequest } = usePagination("", searchInput);

 /**
 * รับ props มาจาก page หลัก
@ -109,7 +102,7 @@ const columnsRespondent = ref<QTableProps["columns"]>([
    name: "citizenId",
    align: "left",
    label: "เลขประจำตัวประชาชน",
-    sortable: false,
+    sortable: true,
    field: "citizenId",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
@ -142,33 +135,19 @@ const columnsRespondent = ref<QTableProps["columns"]>([
    style: "font-size: 14px",
  },
 ]);
-const total = ref<number>(0);
-const totalList = ref<number>(1);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});

-/**
- * บันทึกข้อมูล
- */
+/** บันทึกข้อมูล*/
 function onSubmit() {
  props.onSubmit(formData);
 }

-/**
- * update เมื่อเปลี่ยน option
- */
+/** update เมื่อเปลี่ยน option*/
 function updateSelect() {
  search.value = "";
 }

-/**
- * ค้นหารายชื่อ
- */
-function searchInput() {
+/** ค้นหารายชื่อ*/
+async function searchInput() {
  searchRef.value.validate();
  if (!searchRef.value.hasError) {
    showLoader();
@ -177,19 +156,16 @@ function searchInput() {
      keyword: search.value ? search.value.trim() : "",
      system: (route.meta?.Key as string) || undefined,
    };
-    http
-      .post(
-        config.API.orgSearchPersonal() +
-          `?page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}`,
-        body
-      )
+    await http
+      .post(config.API.orgSearchPersonal(), body, {
+        params: {
+          ...params.value,
+        },
+      })
      .then((res) => {
-        const data = res.data.result.data;
-        totalList.value = Math.ceil(
-          res.data.result.total / pagination.value.rowsPerPage
-        );
-        total.value = res.data.result.total;
-        const list = data.map((e: ResponsePreson) => ({
+        const result = res.data.result;
+        pagination.value.rowsNumber = result.total;
+        const list = result.data.map((e: ResponsePreson) => ({
          personId: e.id,
          idcard: e.citizenId,
          prefix: e.prefix,
@ -218,7 +194,8 @@ function searchInput() {
 }

 /**
- * เลืือกชื่อกรรมการ
+ * เลือกชื่อกรรมการ
+ * @param data เลือกชื่อกรรมการ
 */
 function returnDetail(data: ResponsePreson) {
  formData.prefix = data.prefix;
@ -239,24 +216,17 @@ function onclickViewinfo(id: string) {
 }

 /**
- * เปิด,ปิด  popup ทะเบียนประวัติ
+ * ฟังก์ชันอัพเดท modal
+ * @param modal เปิด,ปิด  popup ทะเบียนประวัติ
 */
 function updatemodalPersonal(modal: boolean) {
  modalPersonal.value = modal;
 }

-function updatePagination(newPagination: Pagination) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
-watch(
-  () => pagination.value.rowsPerPage,
-  () => {
-    searchInput();
-  }
-);
-
+/**
+ * ฟังก์ชันโหลดข้อมูล
+ * @param data ข้อมูลที่ส่งมา edit,view
+ */
 async function fetchForm(data: FormData) {
  formData.prefix = data.prefix;
  formData.firstname = data.firstname;
@ -327,7 +297,7 @@ onMounted(async () => {
            </div>

            <div class="col-12">
-              <d-table
+              <p-table
                ref="table"
                :columns="columnsRespondent"
                :rows="rows"
@ -339,23 +309,9 @@ onMounted(async () => {
                class="custom-header-table"
                :visible-columns="visibleColumnsRespondent"
                :rows-per-page-options="[10, 25, 50, 100]"
-                @update:pagination="updatePagination"
+                v-model:pagination="pagination"
+                @request="onRequest"
              >
-                <template v-slot:pagination="scope">
-                  ทั้งหมด {{ total }} รายการ
-                  <q-pagination
-                    v-model="pagination.page"
-                    active-color="primary"
-                    color="dark"
-                    :max="Number(totalList)"
-                    size="sm"
-                    boundary-links
-                    direction-links
-                    :max-pages="5"
-                    @update:model-value="searchInput"
-                  ></q-pagination>
-                </template>
-
                <template v-slot:header="props">
                  <q-tr :props="props">
                    <q-th
@ -377,11 +333,7 @@ onMounted(async () => {
                      @click.stop.prevent="returnDetail(props.row)"
                    >
                      <div v-if="col.name == 'no'">
-                        {{
-                          (pagination.page - 1) * pagination.rowsPerPage +
-                          props.rowIndex +
-                          1
-                        }}
+                        {{ props.rowIndex + 1 }}
                      </div>
                      <div v-else-if="col.name == 'info'">
                        <q-btn
@ -404,7 +356,7 @@ onMounted(async () => {
                    </q-td>
                  </q-tr>
                </template>
-              </d-table>
+              </p-table>
            </div>
          </div>

--- a/src/modules/12_evaluatePersonal/interface/index/evalute.ts
+++ b/src/modules/12_evaluatePersonal/interface/index/evalute.ts
@ -59,7 +59,7 @@ interface CertificatesForm {

 interface EvaluateList {
  id: string;
-  citizanId: string;
+  citizenId: string;
  fullName: string;
  position: string;
  level: string | null;
--- a/src/modules/12_evaluatePersonal/store/Evaluate.ts
+++ b/src/modules/12_evaluatePersonal/store/Evaluate.ts
@ -59,7 +59,7 @@ export const useEvalutuonStore = defineStore("EvalutuonStore", () => {
      (data: EvaluateRes) =>
        ({
          id: data.id,
-          citizanId: data.citizenId,
+          citizenId: data.citizenId,
          fullName: data.fullName,
          position: data.position,
          level: convertType(data.type),
@ -74,12 +74,12 @@ export const useEvalutuonStore = defineStore("EvalutuonStore", () => {

  const visibleColumns = ref<String[]>([
    "no",
-    "citizanId",
+    "citizenId",
    "fullName",
    "position",
    "level",
-    "positionNumber",
-    "agency",
+    "posNo",
+    "oc",
    "status",
  ]);
  const columns = ref<QTableProps["columns"]>([
@ -96,19 +96,17 @@ export const useEvalutuonStore = defineStore("EvalutuonStore", () => {
      name: "level",
      align: "left",
      label: "ระดับที่ยื่นขอ",
-      sortable: true,
+      sortable: false,
      field: "level",
      headerStyle: "font-size: 14px",
      style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
    },
    {
-      name: "citizanId",
+      name: "citizenId",
      align: "center",
      label: "เลขประจำตัวประชาชน",
-      sortable: false,
-      field: "citizanId",
+      sortable: true,
+      field: "citizenId",
      headerStyle: "font-size: 14px",
      style: "font-size: 14px",
    },
@ -129,36 +127,30 @@ export const useEvalutuonStore = defineStore("EvalutuonStore", () => {
      field: "position",
      headerStyle: "font-size: 14px",
      style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
    },
    {
-      name: "positionNumber",
+      name: "posNo",
      align: "left",
      label: "เลขที่ตำแหน่ง",
      sortable: true,
      field: "positionNumber",
      headerStyle: "font-size: 14px",
      style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
    },
    {
-      name: "agency",
+      name: "oc",
      align: "left",
      label: "สังกัด",
      sortable: true,
      field: "agency",
      headerStyle: "font-size: 14px",
      style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
    },
    {
      name: "status",
      align: "left",
      label: "สถานะ",
-      sortable: true,
+      sortable: false,
      field: "status",
      headerStyle: "font-size: 14px",
      style: "font-size: 14px",
--- a/src/modules/12_evaluatePersonal/views/MainPage.vue
+++ b/src/modules/12_evaluatePersonal/views/MainPage.vue
@ -7,6 +7,7 @@ import genReportXLSX from "@/plugins/genreportxlsx";

 import http from "@/plugins/http";
 import config from "@/app.config";
+import { usePagination } from "@/composables/usePagination";

 /** importType*/
 import type {
@ -28,6 +29,7 @@ const route = useRoute();
 const mixin = useCounterMixin();
 const store = useEvalutuonStore();
 const { showLoader, hideLoader, messageError } = mixin;
+const { pagination, params, onRequest } = usePagination("", fetchEvaluteList);

 /** request body*/
 const organization = ref<string>("");
@ -37,12 +39,7 @@ const organizationOps = ref<DataOption[]>([]);
 const year = ref<number>(new Date().getFullYear());
 const modalReport = ref<boolean>(false); //ตัวแปร popup report
 const loadingBtn = ref<boolean>(false); //ตัวแปร popup report
-const currentPage = ref<number>(1); //หน้าปัจจุบัน
-const maxPage = ref<number>(0); //จำนวนหน่า
-const page = ref<number>(1); //หน้า
-const total = ref<number>(0); //จำนวนข้อมูลทั้งหมด
 const filter = ref<string>(""); //คำค้นหา
-const pageSize = ref<number>(10); //จำนวนรายการต่อหน้า

 //ค้นหาตามสถานะ
 const selectedStatus = ref<string[]>([
@ -69,50 +66,39 @@ const optionsMain = ref<OptionStatus[]>([
 ]);
 const options = ref<OptionStatus[]>([]); //ตัวเลือกค้นหาตามสถานะ

-/** pagination ของตาราง*/
-const initialPagination = ref<any>({
-  sortBy: null,
-  descending: false,
-  page: 1,
-  rowsPerPage: pageSize,
+/** ชื่อค่าที่ค้นหาสภานะ*/
+const label = computed(() => {
+  const filterOption = optionsMain.value.filter((option) =>
+    selectedStatus.value.includes(option.val)
+  );
+  const labelval = filterOption.map((e) => e.label);
+  if (labelval.length !== 0) {
+    return labelval.length <= 2
+      ? `${labelval.slice(0, 2).join(", ")}`
+      : `${labelval.slice(0, 2).join(", ")}, อื่นๆ (${labelval.length - 2})`;
+  } else return "";
 });

-/**
- * function อัปเดท paging
- * @param initialPagination ข้อมูล pagination
- */
-async function updatePagination(initialPagination: any) {
-  currentPage.value = 1;
-  pageSize.value = initialPagination.rowsPerPage;
-}
-
-/**
- * function ค้นหาตาม keyword
- */
+/** function ค้นหาตาม keyword*/
 function filterFn() {
-  updatePagination(filter.value);
-  pageSize.value = initialPagination.value.rowsPerPage;
+  pagination.value.page = 1;
  fetchEvaluteList();
 }

-/**
- * function เรียกรายการคำขอประเมินD
- */
+/** function เรียกรายการคำขอประเมิน*/
 async function fetchEvaluteList() {
  showLoader();
  const body = {
-    page: currentPage.value,
-    pageSize: pageSize.value,
+    ...params.value,
    keyword: filter.value.trim(),
    status: selectedStatus.value,
  };
  await http
    .post(config.API.evaluationMain(), body)
    .then(async (res) => {
-      const data = res.data.result.data;
-      total.value = res.data.result.total;
-      maxPage.value = Math.ceil(total.value / pageSize.value);
-      store.fetchData(data);
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      store.fetchData(result.data);
    })
    .catch((e) => {
      messageError($q, e);
@ -135,21 +121,6 @@ function Detailpage(id: string, type: string) {
  }
 }

-/**
- * ชื่อค่าที่ค้นหาสภานะ
- */
-const label = computed(() => {
-  const filterOption = optionsMain.value.filter((option) =>
-    selectedStatus.value.includes(option.val)
-  );
-  const labelval = filterOption.map((e) => e.label);
-  if (labelval.length !== 0) {
-    return labelval.length <= 2
-      ? `${labelval.slice(0, 2).join(", ")}`
-      : `${labelval.slice(0, 2).join(", ")}, อื่นๆ (${labelval.length - 2})`;
-  } else return "";
-});
-
 /**
 * function ต้นหาข้อมูลของ Option
 * @param val ค่าที่ต้องการฟิลเตอร์
@ -207,9 +178,7 @@ async function getReport() {
    });
 }

-/**
- * function fetch ข้อมูลโครงสร้างปัจจุบัน
- */
+/** function fetch ข้อมูลโครงสร้างปัจจุบัน*/
 async function getActiveId() {
  showLoader();
  await http
@ -252,14 +221,6 @@ function filterSelector(val: string, update: Function) {
  });
 }

-/** function callback เมื่อมีการเปลี่ยนหน้า*/
-watch(
-  () => pageSize.value,
-  () => {
-    fetchEvaluteList();
-  }
-);
-
 /** HookLifecycle */
 onMounted(async () => {
  await fetchEvaluteList(); // เรียกข้อมูลรายการปรัเมิน
@ -339,20 +300,20 @@ onMounted(async () => {
      />
    </div>
    <div>
-      <d-table
+      <p-table
        ref="table"
        :columns="store.columns"
        :rows="store.rows"
-        row-key="interrogated"
+        row-key="id"
        flat
        bordered
        :paging="false"
        dense
        class="custom-header-table"
        :visible-columns="store.visibleColumns"
-        v-model:pagination="initialPagination"
        :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">
@ -362,6 +323,7 @@ onMounted(async () => {
            </q-th>
          </q-tr>
        </template>
+
        <template v-slot:body="props">
          <q-tr :props="props">
            <q-td auto-width>
@ -379,7 +341,7 @@ onMounted(async () => {
            </q-td>
            <q-td v-for="col in props.cols" :key="col.name" :props="props">
              <div v-if="col.name == 'no'">
-                {{ (page - 1) * pageSize + props.rowIndex + 1 }}
+                {{ props.rowIndex + 1 }}
              </div>

              <div v-else-if="col.name === 'agency'">
@ -393,21 +355,7 @@ onMounted(async () => {
            </q-td>
          </q-tr>
        </template>
-        <template v-slot:pagination="scope">
-          ทั้งหมด {{ total }} รายการ
-          <q-pagination
-            v-model="currentPage"
-            active-color="primary"
-            color="dark"
-            :max="Number(maxPage)"
-            size="sm"
-            boundary-links
-            direction-links
-            :max-pages="5"
-            @update:model-value="fetchEvaluteList"
-          ></q-pagination>
-        </template>
-      </d-table>
+      </p-table>
    </div>
  </q-card>

--- a/src/modules/18_command/components/DialogCreateCommand.vue
+++ b/src/modules/18_command/components/DialogCreateCommand.vue
@ -7,6 +7,7 @@ import config from "@/app.config";
 import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useCommandMainStore } from "@/modules/18_command/store/Main";
+import { usePagination } from "@/composables/usePagination";

 import type { QTableProps } from "quasar";
 import type {
@ -25,6 +26,7 @@ const $q = useQuasar();
 const mixin = useCounterMixin();
 const { showLoader, messageError, dialogConfirm, hideLoader, date2Thai } =
  mixin;
+const { pagination, params, onRequest } = usePagination("", getListCommandDraf);

 /** props*/
 const modal = defineModel<boolean>("modal", { required: true });
@ -52,8 +54,6 @@ const commandChapter = ref<string>(""); //ตอนที่
 const rows = ref<DataListCommand[]>([]); // รายการคำสั่ง
 const selected = ref<DataOrder[]>([]); // id คำสั่งที่เลือก
 const filter = ref<string>(""); // คำค้นหา
-const total = ref<number>(0); //จำนวนรายการ
-const totalList = ref<number>(1); //จำนวนหน้า
 const visibleColumns = ref<string[]>([
  "commandNo",
  "issue",
@ -67,7 +67,7 @@ const columns = ref<QTableProps["columns"]>([
    name: "commandNo",
    align: "left",
    label: "เลขที่คำสั่ง",
-    sortable: false,
+    sortable: true,
    field: "commandNo",
    format(val, row) {
      return val ? `${val}/${row.commandYear + 543}` : "-";
@ -88,7 +88,7 @@ const columns = ref<QTableProps["columns"]>([
    name: "commandAffectDate",
    align: "left",
    label: "วันที่ลงนาม",
-    sortable: false,
+    sortable: true,
    field: "commandAffectDate",
    format(val) {
      return val ? date2Thai(val) : "-";
@ -100,7 +100,7 @@ const columns = ref<QTableProps["columns"]>([
    name: "commandExcecuteDate",
    align: "left",
    label: "วันที่คำสั่งมีผล",
-    sortable: false,
+    sortable: true,
    field: "commandExcecuteDate",
    format(val) {
      return val ? date2Thai(val) : "-";
@ -112,7 +112,7 @@ const columns = ref<QTableProps["columns"]>([
    name: "createdFullName",
    align: "left",
    label: "ผู้สร้าง",
-    sortable: false,
+    sortable: true,
    field: "createdFullName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
@ -127,12 +127,6 @@ const columns = ref<QTableProps["columns"]>([
    style: "font-size: 14px",
  },
 ]);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});

 const selectCreate = ref<string | null>("NEW"); //ประเภทการออกคำสั่ง สร้างใหม่/คำสั่งแบบร่าง

@ -140,16 +134,19 @@ const selectCreate = ref<string | null>("NEW"); //ประเภทการอ
 async function getListCommandDraf() {
  showLoader();
  await http
-    .get(
-      config.API.commandList +
-        `?page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}&year=${commandYear.value}&keyword=${filter.value}&status=DRAFT&commandTypeId=${commandType.value}`
-    )
+    .get(config.API.commandList, {
+      params: {
+        ...params.value,
+        year: commandYear.value,
+        keyword: filter.value.trim(),
+        status: "DRAFT",
+        commandTypeId: commandType.value,
+      },
+    })
    .then(async (res) => {
-      totalList.value = Math.ceil(
-        res.data.result.total / pagination.value.rowsPerPage
-      );
-      total.value = res.data.result.total;
-      rows.value = res.data.result.data;
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data;
    })
    .catch((err) => {
      messageError($q, err);
@ -179,19 +176,6 @@ function createCommand(isRedirect: boolean) {
      posLevel: e.posLevel,
      ...(e.remarkVertical ? { remarkVertical: e.remarkVertical } : {}),
      ...(e.remarkHorizontal ? { remarkHorizontal: e.remarkHorizontal } : {}),
-
-      // ...(props.commandTypeCode == "C-PM-01" ||
-      // props.commandTypeCode == "C-PM-02"
-      //   ? { position: e.position ? e.position : null }
-      //   : {}),
-      // ...(props.commandTypeCode == "C-PM-01" ||
-      // props.commandTypeCode == "C-PM-02"
-      //   ? { posType: e.posType ? e.posType : null }
-      //   : {}),
-      // ...(props.commandTypeCode == "C-PM-01" ||
-      // props.commandTypeCode == "C-PM-02"
-      //   ? { posLevel: e.posLevel ? e.posLevel : null }
-      //   : {}),
    }));

    const body = {
@ -310,15 +294,6 @@ async function fetchCommandType() {
  commandCode.value = commandOp.value[0].code;
 }

-/**
- * ฟังก์ชันอัปเดทจำนวนแถวต่อหน้า
- * @param newPagination จำนวนแถวที่ต้องการ
- */
-function updatePagination(newPagination: Pagination) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
 const isHold = ref<boolean>(true); // true คือแสดงปุ่มบันทึกและเลือกรายชื่อต่อ / false คือซ่อนปุ่มบันทึกและเลือกรายชื่อต่อ
 // tab สร้างคำสั่งใหม่ และเลือกคำสั่งที่เป็นแบบร่าง
 const tabOptions = ref<TabOptions[]>([
@ -340,14 +315,6 @@ async function displayTab() {
    : [{ label: "สร้างคำสั่งใหม่", value: "NEW" }];
 }

-/** ดูการเปลี่ยนแปลงของจำนวนแถวต่อหน้า*/
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    await getListCommandDraf();
-  }
-);
-
 /** ดูการเปลี่ยนแปลงของ modal*/
 watch(modal, () => {
  if (modal.value && props.persons?.length !== 0) {
@ -561,7 +528,7 @@ watch(
            />
          </q-toolbar>
          <div class="col-12">
-            <d-table
+            <p-table
              :columns="columns"
              :rows="rows"
              row-key="id"
@ -569,23 +536,9 @@ watch(
              selection="single"
              v-model:selected="selected"
              :rows-per-page-options="[10, 25, 50, 100]"
-              @update:pagination="updatePagination"
+              v-model:pagination="pagination"
+              @request="onRequest"
            >
-              <template v-slot:pagination="scope">
-                ทั้งหมด {{ total.toLocaleString() }} รายการ
-                <q-pagination
-                  v-model="pagination.page"
-                  active-color="primary"
-                  color="dark"
-                  :max="Number(totalList)"
-                  size="sm"
-                  boundary-links
-                  direction-links
-                  :max-pages="5"
-                  @update:model-value="getListCommandDraf"
-                ></q-pagination>
-              </template>
-
              <template v-slot:body="props">
                <q-tr :props="props" class="cursor-pointer">
                  <q-td>
@ -607,7 +560,7 @@ watch(
                  </q-td>
                </q-tr>
              </template>
-            </d-table>
+            </p-table>
          </div>
        </div>
      </q-card-section>
--- a/src/modules/18_command/components/DialogCreateCommandORG.vue
+++ b/src/modules/18_command/components/DialogCreateCommandORG.vue
@ -633,18 +633,6 @@ watch(modal, async () => {
                    </q-td>
                  </q-tr>
                </template>
-                <!-- <template v-slot:pagination="scope">
-                    <q-pagination
-                      v-model="reqMaster.page"
-                      active-color="primary"
-                      color="dark"
-                      :max="totalPage"
-                      :max-pages="5"
-                      size="sm"
-                      boundary-links
-                      direction-links
-                    ></q-pagination>
-                  </template> -->
              </d-table>
            </div>
          </div>
--- a/src/modules/18_command/components/Main/TableMain.vue
+++ b/src/modules/18_command/components/Main/TableMain.vue
@ -6,7 +6,6 @@ import { useRouter } from "vue-router";
 import { checkPermission } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
 import { useCommandListStore } from "@/modules/18_command/store/ListStore";
-import { updateCurrentPage } from "@/utils/function";
 import http from "@/plugins/http";
 import config from "@/app.config";

@ -27,11 +26,11 @@ const {
  dialogConfirm,
 } = useCounterMixin();

-const page = defineModel<number>("page", { required: true });
-const pageSize = defineModel<number>("pageSize", { required: true });
-
+const pagination = defineModel<Pagination>("pagination", { required: true });
 const props = defineProps({
  fetchList: { type: Function, required: true },
+  onRequest: { type: Function, required: true },
+  checkAndUpdatePage: { type: Function, required: true },
 });

 const modalCopy = ref<boolean>(false);
@ -82,11 +81,7 @@ function onReCommand(id: string) {
      await http
        .put(config.API.commandAction(id, "resume"))
        .then(async () => {
-          page.value = await updateCurrentPage(
-            page.value,
-            store.maxPage,
-            store.rows.length
-          );
+          await props.checkAndUpdatePage(store.rows.length);
          await fetchListCommand();
          success($q, "ดึงไปทำคำสั่งใหม่สำเร็จ");
        })
@ -109,11 +104,7 @@ function onDeleteCommand(id: string) {
      await http
        .delete(config.API.command + `/${id}`)
        .then(async () => {
-          page.value = await updateCurrentPage(
-            page.value,
-            store.maxPage,
-            store.rows.length
-          );
+          await props.checkAndUpdatePage(store.rows.length);
          await fetchListCommand();
          success($q, "ลบรายการสำเร็จ");
        })
@ -129,27 +120,13 @@ function onDeleteCommand(id: string) {
  );
 }

-/**
- * function updatePagination
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePagination(newPagination: Pagination) {
-  page.value = 1;
-  pageSize.value = newPagination.rowsPerPage;
-}
-
-watch(pageSize, () => {
-  isCheckPageSize.value = true;
-  fetchListCommand();
-});
-
 onMounted(() => {
  !isCheckPageSize.value && fetchListCommand();
 });
 </script>

 <template>
-  <d-table
+  <p-table
    ref="table"
    :columns="store.columns"
    :visible-columns="store.visibleColumns"
@ -160,7 +137,8 @@ onMounted(() => {
    bordered
    :paging="true"
    :rows-per-page-options="[10, 25, 50, 100]"
-    @update:pagination="updatePagination"
+    @request="onRequest"
+    v-model:pagination="pagination"
  >
    <template v-slot:header="props">
      <q-tr :props="props">
@ -332,21 +310,7 @@ onMounted(() => {
        </q-td>
      </q-tr>
    </template>
-    <template v-slot:pagination="scope">
-      ทั้งหมด {{ store.total.toLocaleString() }} รายการ
-      <q-pagination
-        v-model="page"
-        active-color="primary"
-        color="dark"
-        :max="Number(store.maxPage)"
-        size="sm"
-        boundary-links
-        direction-links
-        :max-pages="5"
-        @update:model-value="fetchListCommand"
-      ></q-pagination>
-    </template>
-  </d-table>
+  </p-table>

  <DialogFormCommand
    v-model:modal="modalCopy"
--- a/src/modules/18_command/components/Step/PerviewPDF.vue
+++ b/src/modules/18_command/components/Step/PerviewPDF.vue
@ -6,7 +6,6 @@ import axios from "axios";

 import { useCounterMixin } from "@/stores/mixin";

-import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
 import type { DataFileDownload } from "@/modules/18_command/interface/response/Main";

 import DialogHeader from "@/components/DialogHeader.vue";
@ -15,9 +14,11 @@ const $q = useQuasar();
 const { messageError } = useCounterMixin();

 const modal = defineModel<boolean>("modal", { required: true });
-const dataFile = defineModel<DataFileDownload>("dataFile", { required: true });
+const dataFile = defineModel<DataFileDownload | undefined>("dataFile", {
+  required: false,
+});

-const pdfSrc = ref<PDFDocumentLoadingTask | undefined>();
+const pdfSrc = ref<any | undefined>();
 const numOfPages = ref<number>(0);
 const page = ref<number>(1);
 const vuePDFRef = ref<any>(null);
@ -59,7 +60,7 @@ function onClose() {
 }

 watch(modal, (val) => {
-  if (val) {
+  if (val && dataFile.value) {
    fetchPDF(dataFile.value.downloadUrl, dataFile.value.fileType);
  } else {
    pdfSrc.value = undefined;
--- a/src/modules/18_command/components/Step/View0_Digital.vue
+++ b/src/modules/18_command/components/Step/View0_Digital.vue
@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
 import axios from "axios";

 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useCommandDetail } from "@/modules/18_command/store/DetailStore";
+import { usePagination } from "@/composables/usePagination";
 import http from "@/plugins/http";
 import config from "@/app.config";

 import type { QTableProps } from "quasar";
-import type { Pagination } from "@/modules/18_command/interface/index/Main";
 import type {
  DataFileDownload,
  DataDirector,
@ -31,6 +31,7 @@ const {
  dialogConfirm,
  dialogMessageNotify,
 } = useCounterMixin();
+const { pagination, params, onRequest } = usePagination("", fetchListDirector);

 const commandId = ref<string>(route.params.id.toString()); //ID คำสั่ง

@ -48,16 +49,13 @@ const fileUploadOrder = ref<any>(null); //ไฟล์คำสั่ง
 const fileUploadTailer = ref<any>(null); //ไฟล์เอกสารแนบท้าย
 const fileOrder = ref<any>(null); //ไฟล์คำสั่ง
 const fileTailer = ref<any>(null); //ไฟล์เอกสารแนบท้าย
-const isDirector = ref<boolean>(true);
-const isAct = ref<boolean>(false);
+const isDirector = ref<boolean>(true); //ผู้บังคับบัญชา
+const isAct = ref<boolean>(false); //รักษาการแทน
+const dataFile = ref<DataFileDownload>(); //ข้อมูลไฟล์คำสั่งที่ดาวน์โหลดมา

 const modalSelect = ref<boolean>(false); //popup เลือกผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง
 const search = ref<string>("");
 const rows = ref<DataDirector[]>([]); //รายชื่อผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง
-const page = ref<number>(1);
-const pageSize = ref<number>(10);
-const maxPaeg = ref<number>(1);
-const total = ref<number>(0);
 const selected = ref<DataDirector[]>([]); //เลือกผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง
 const columns = ref<QTableProps["columns"]>([
  {
@ -80,7 +78,7 @@ const columns = ref<QTableProps["columns"]>([
  },

  {
-    name: "fullName",
+    name: "firstName",
    align: "left",
    label: "ชื่อ-นามสกุล",
    sortable: true,
@ -133,14 +131,11 @@ const modalComment = ref<boolean>(false); //popup แสดงความเห
 const reason = ref<string>("");

 //รอออกคำสั่ง
-const isCheckOrder = ref<boolean>(true); //เช็ครอออกคำสั่ง
 const isLoad = ref<boolean>(false); //แสดงโหลด
 const isPersonSign = ref<boolean>(false); //ผู้มีอำนาจลงนาม
 const modalPerView = ref<boolean>(false);

-/**
- * ฟังก์ชันยืนยันการส่งให้ผู้มีอำนาจลงนามอนุมัติ
- */
+/** ฟังก์ชันยืนยันการส่งให้ผู้มีอำนาจลงนามอนุมัติ*/
 function onConfirmDraft() {
  if (
    store?.dataCommand?.commandNo !== "" &&
@ -156,21 +151,20 @@ function onConfirmDraft() {
  }
 }

-function fetchListDirector() {
+/** ฟังก์ชันดึงข้อมูลผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง */
+async function fetchListDirector() {
  showLoader();
-  http
+  await http
    .post(config.API.commandDirector, {
      isDirector: isDirector.value, // fix ค่านี้เป็น true
      isAct: isAct.value,
      keyword: search.value,
-      page: page.value,
-      pageSize: pageSize.value,
+      ...params.value,
    })
    .then((res) => {
-      const data = res.data.result;
-      rows.value = data.data;
-      maxPaeg.value = Math.ceil(data.total / pageSize.value);
-      total.value = data.total;
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data;
    })
    .catch((err) => {
      messageError($q, err);
@ -180,11 +174,13 @@ function fetchListDirector() {
    });
 }

+/** ฟังก์ชันค้นหาข้อมูล */
 function onSearchData() {
-  page.value = 1;
+  pagination.value.page = 1;
  fetchListDirector();
 }

+/** ฟังก์ชันยืนยันการส่งไปยังผู้บังคับบัญชา/ผู้มีอำนาจ */
 function onConfirmSendToCommander() {
  dialogConfirm(
    $q,
@ -212,12 +208,14 @@ function onConfirmSendToCommander() {
  );
 }

+/** ฟังก์ชันแสดง popup แสดงความเห็น */
 function onComment(id: string, isStatus: boolean) {
  modalComment.value = true;
  commandSignId.value = id;
  isSignatory.value = isStatus;
 }

+/** ฟังก์ชันบันทึกความคิดเห็น */
 function onSubmitComment() {
  dialogConfirm($q, async () => {
    showLoader();
@ -243,6 +241,7 @@ function onSubmitComment() {
  });
 }

+/** ฟังก์ชันปิด dialog และ reset ค่า */
 function onCloseDialog() {
  isAct.value = false;
  isDirector.value = true;
@ -252,17 +251,21 @@ function onCloseDialog() {
  rows.value = [];
  selected.value = [];
  search.value = "";
-  page.value = 1;
-  pageSize.value = 10;
-  maxPaeg.value = 1;
-  total.value = 0;
+  pagination.value = {
+    page: 1,
+    rowsPerPage: 10,
+    rowsNumber: 0,
+    sortBy: "",
+    descending: false,
+  };
+
  reason.value = "";
 }

-function updatePagination(newPagination: Pagination) {
-  pageSize.value = newPagination.rowsPerPage;
-}
-
+/**
+ *  ฟังก์ชันดึงข้อมูลเอกสารคำสั่ง
+ * @param group ประเภทคำสั่ง order=คำสั่ง, tailer=เอกสารแนบท้าย
+ */
 async function fetchDoc(group: string) {
  showLoader();
  let type = group === "order" ? "คำสั่ง" : "แนบท้าย";
@ -284,6 +287,10 @@ async function fetchDoc(group: string) {
    });
 }

+/**
+ * ฟังก์ชันอัพโหลดไฟล์คำสั่ง
+ * @param group ประเภทคำสั่ง order=คำสั่ง, tailer=เอกสารแนบท้าย
+ */
 function onUploadFile(group: string) {
  showLoader();
  let type = group === "order" ? "คำสั่ง" : "แนบท้าย";
@ -312,7 +319,10 @@ function onUploadFile(group: string) {
 }

 /**
- * ฟังก์ชั่นสำหรับอัพโหลดไฟล์เอกสารหลักฐาน
+ * ฟังก์ชันอัพโหลดไฟล์คำสั่ง
+ * @param uploadUrl ลิงค์อัพโหลดไฟล์
+ * @param file ไฟล์ที่อัพโหลด
+ * @param group ประเภทคำสั่ง order=คำสั่ง, tailer=เอกสารแนบท้าย
 */
 async function uploadFileDoc(uploadUrl: string, file: any, group: string) {
  const formData = new FormData();
@ -340,11 +350,11 @@ async function uploadFileDoc(uploadUrl: string, file: any, group: string) {
    });
 }

-const dataFile = ref<DataFileDownload>();
-
 /**
- * ดาวน์โหลดลิงก์ไฟล์
- * @param fileName file name
+ * ฟังก์ชันดาวน์โหลดไฟล์
+ * @param file ข้อมูลไฟล์
+ * @param group ประเภทคำสั่ง order=คำสั่ง, tailer=เอกสารแนบท้าย
+ * @param isView ดูไฟล์ในหน้าใหม่ไหม (default=false)
 */
 function downloadFile(file: any, group: string, isView: boolean = false) {
  let type = group === "order" ? "คำสั่ง" : "แนบท้าย";
@ -375,6 +385,7 @@ function downloadFile(file: any, group: string, isView: boolean = false) {
    });
 }

+/** ฟังก์ชันดึงข้อมูลรายการผู้มีอำนาจ */
 async function fetchListAuthority() {
  await http
    .get(config.API.command + `/step/${commandId.value}`)
@ -387,17 +398,11 @@ async function fetchListAuthority() {
    });
 }

+/** ฟังก์ชันแสดงเฉพาะรักษาการแทน */
 function onAct() {
  isDirector.value = !isDirector.value;
 }

-watch(
-  () => pageSize.value,
-  () => {
-    onSearchData();
-  }
-);
-
 onMounted(async () => {
  isLoad.value = false;
  let promises = [fetchDoc("order")];
@ -742,7 +747,7 @@ onMounted(async () => {
          </div>

          <div class="col-12">
-            <d-table
+            <p-table
              flat
              :columns="columns"
              :rows="rows"
@ -751,7 +756,8 @@ onMounted(async () => {
              selection="single"
              v-model:selected="selected"
              :rows-per-page-options="[10, 25, 50, 100]"
-              @update:pagination="updatePagination"
+              v-model:pagination="pagination"
+              @request="onRequest"
            >
              <template v-slot:header-selection="scope">
                <q-checkbox
@ -796,21 +802,7 @@ onMounted(async () => {
                  </q-td>
                </q-tr>
              </template>
-              <template v-slot:pagination="scope">
-                ทั้งหมด {{ total.toLocaleString() }} รายการ
-                <q-pagination
-                  v-model="page"
-                  active-color="primary"
-                  color="dark"
-                  :max="Number(maxPaeg)"
-                  size="sm"
-                  boundary-links
-                  direction-links
-                  :max-pages="5"
-                  @update:model-value="fetchListDirector"
-                ></q-pagination>
-              </template>
-            </d-table>
+            </p-table>
          </div>

          <div class="col-12">
@ -861,10 +853,7 @@ onMounted(async () => {
    </q-card>
  </q-dialog>

-  <PerviewPDF
-    v-model:modal="modalPerView"
-    v-model:data-file="dataFile as DataFileDownload"
-  />
+  <PerviewPDF v-model:modal="modalPerView" v-model:data-file="dataFile" />
 </template>

 <style lang="scss" scoped>
--- a/src/modules/18_command/interface/request/Main.ts
+++ b/src/modules/18_command/interface/request/Main.ts
@ -1,6 +1,6 @@
 interface FormQuery {
-  page: number;
-  pageSize: number;
+  page?: number;
+  pageSize?: number;
  year: number;
  keyword: string;
  commandTypeId: string;
--- a/src/modules/18_command/store/ListStore.ts
+++ b/src/modules/18_command/store/ListStore.ts
@ -22,7 +22,7 @@ export const useCommandListStore = defineStore("commandListStore", () => {
      name: "commandNo",
      align: "left",
      label: "เลขที่คำสั่ง",
-      sortable: false,
+      sortable: true,
      field: "commandNo",
      format(val, row) {
        return val
@ -47,7 +47,7 @@ export const useCommandListStore = defineStore("commandListStore", () => {
      name: "commandAffectDate",
      align: "left",
      label: "วันที่ลงนาม",
-      sortable: false,
+      sortable: true,
      field: "commandAffectDate",
      format(val) {
        return val ? date2Thai(val) : "-";
@ -59,7 +59,7 @@ export const useCommandListStore = defineStore("commandListStore", () => {
      name: "commandExcecuteDate",
      align: "left",
      label: "วันที่คำสั่งมีผล",
-      sortable: false,
+      sortable: true,
      field: "commandExcecuteDate",
      format(val) {
        return val ? date2Thai(val) : "-";
@ -71,7 +71,7 @@ export const useCommandListStore = defineStore("commandListStore", () => {
      name: "createdFullName",
      align: "left",
      label: "ผู้สร้าง",
-      sortable: false,
+      sortable: true,
      field: "createdFullName",
      headerStyle: "font-size: 14px",
      style: "font-size: 14px",
--- a/src/modules/18_command/views/lists.vue
+++ b/src/modules/18_command/views/lists.vue
@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref, watch } from "vue";
+import { onMounted, reactive, ref } from "vue";
 import { useQuasar } from "quasar";

 import { checkPermission } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
 import { useCommandListStore } from "@/modules/18_command/store/ListStore";
+import { usePagination } from "@/composables/usePagination";
 import http from "@/plugins/http";
 import config from "@/app.config";

@ -20,6 +21,10 @@ import TableList from "@/modules/18_command/components/Main/TableMain.vue";
 const $q = useQuasar();
 const store = useCommandListStore();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
+const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
+  "",
+  fetchListCommand
+);

 //รายการ Tab รายการคำสั่ง
 const tabsManu = ref<ItemTabs[]>([
@ -31,8 +36,6 @@ const tabsManu = ref<ItemTabs[]>([
 ]);
 //ฟอร์มช้อมูลการค้นหา
 const queryParams = reactive<FormQuery>({
-  page: 1, //หน้า
-  pageSize: 10, //จำนวนต่อหน้า
  year: new Date().getFullYear(), //ปีงบประมาณ
  keyword: "", //คำค้นหา
  commandTypeId: "",
@ -47,28 +50,26 @@ const commandOp = ref<DataOption[]>([]);

 const modalAdd = ref<boolean>(false); // เพิ่มคำสั่ง

-/**
- * ฟังก์ชันดึงข้อมูลรายการคำสั่ง
- */
+/** ฟังก์ชันดึงข้อมูลรายการคำสั่ง */
 async function fetchListCommand() {
-  store.rows = [];
  showLoader();
  await http
    .get(config.API.commandList, {
      params: {
        ...queryParams,
+        ...params.value,
        status: store.tabsMain,
        keyword: queryParams.keyword.trim(),
      },
    })
    .then(async (res) => {
-      const data = await res.data.result;
-      store.rows = data.data;
-      store.total = data.total;
-      store.maxPage = Math.ceil(data.total / queryParams.pageSize);
+      const result = await res.data.result;
+      pagination.value.rowsNumber = result.total;
+      store.rows = result.data;
    })
    .catch((err) => {
      messageError($q, err);
+      store.rows = [];
    })
    .finally(() => {
      hideLoader();
@ -246,8 +247,9 @@ onMounted(async () => {
        >
          <TableList
            :fetch-list="fetchListCommand"
-            v-model:page="queryParams.page"
-            v-model:pageSize="queryParams.pageSize"
+            v-model:pagination="pagination"
+            @request="onRequest"
+            :checkAndUpdatePage="checkAndUpdatePage"
          />
        </q-tab-panel>
      </q-tab-panels>