fix(KPI):sort

src/modules/14_KPI/components/results/tableIndividual.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
@@ -8,6 +8,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useKpiDataStore } from "@/modules/14_KPI/store";
 import { checkPermission } from "@/utils/permissions";
 import { calculateFiscalYear } from "@/utils/function";
+import { usePagination } from "@/composables/usePagination";
 
 /** importType*/
 import type { QTableProps } from "quasar";
@@ -24,18 +25,13 @@ import DialogIndividual from "@/modules/14_KPI/components/results/dialogIndividu
 const $q = useQuasar();
 const { showLoader, messageError, hideLoader } = useCounterMixin();
 const store = useKpiDataStore();
+const { pagination, params, onRequest } = usePagination("", fetcDataList);
 
 /** props*/
 const tab = defineModel<string>("tab", { required: true });
 
-/**
+/** ตัวแปร*/
- * ตัวแปร
- */
 const rows = ref<ResDevelopment[]>([]); // ข่อมูลรายการ
-const page = ref<number>(1);
-const pageSize = ref<number>(10);
-const maxPage = ref<number>(1);
-const total = ref<number>(1);
 const keyword = ref<string>("");
 const modalDetail = ref<boolean>(false);
 const devId = ref<string>("");
@@ -52,11 +48,11 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "fullName",
+    name: "firstname",
     align: "left",
     label: "ชื่อ-นามสกุล",
     sortable: true,
-    field: "fullName",
+    field: "firstname",
     format: (val, row) => {
       return `${row.prefix ?? ""}${row.firstname ?? ""} ${row.lastname ?? ""}`;
     },
@@ -120,7 +116,7 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 const visibleColumns = ref<string[]>([
   "no",
-  "fullName",
+  "firstname",
   "name",
   "organization",
   "position",
@@ -128,10 +124,6 @@ const visibleColumns = ref<string[]>([
   "posLevelName",
   "root",
 ]);
-const pagination = ref({
-  page: page.value,
-  rowsPerPage: pageSize.value,
-});
 
 /** ตัวแปร*/
 const year = ref<number | null>(calculateFiscalYear(new Date())); //ปีงบประมาณ
@@ -142,19 +134,18 @@ async function fetcDataList() {
   showLoader();
   await http
     .post(config.API.achievementDev, {
-      page: page.value,
+      ...params.value,
-      pageSize: pageSize.value,
       keyword: keyword.value.trim(),
       kpiPeriodId: store.formQuery.round ? store.formQuery.round : "",
     })
     .then(async (res) => {
-      const data = await res.data.result;
+      const result = await res.data.result;
-      rows.value = data.data;
+      pagination.value.rowsNumber = result.total;
-      total.value = data.total;
+      rows.value = result.data;
-      maxPage.value = Math.ceil(total.value / pageSize.value);
     })
     .catch((err) => {
       messageError($q, err);
+      rows.value = [];
     })
     .finally(() => {
       hideLoader();
@@ -201,13 +192,13 @@ async function fetchRoundOption() {
 
 /** function เปลี่ยนรอบการประเมิน และ เรียกข้อมูลรายการแผนพัฒนาการปฏิบัติราชการรายบุคคลย้อนหลัง*/
 function changRound() {
-  store.formQuery.page = 1;
+  pagination.value.page = 1;
   fetcDataList();
 }
 
 /** ค้นหาข้อมูล*/
 function onSearchData() {
-  page.value = 1;
+  pagination.value.page = 1;
   fetcDataList();
 }
 
@@ -220,12 +211,6 @@ function onClickView(id: string) {
   devId.value = id;
 }
 
-/** ทำงานเมื่อมีการเปลี่ยนแถวต่อหน้า*/
-watch(pagination, () => {
-  page.value = 1;
-  pageSize.value = pagination.value.rowsPerPage;
-});
-
 /** HookLifecycle*/
 onMounted(async () => {
   store.formQuery.round = "";
@@ -313,14 +298,15 @@ onMounted(async () => {
         style="min-width: 140px"
       />
     </div>
-    <d-table
+    <p-table
       :columns="columns"
       :rows="rows"
       row-key="id"
       :rows-per-page-options="[10, 25, 50, 100]"
-      v-model:pagination="pagination"
       :paging="true"
       :visible-columns="visibleColumns"
+      @request="onRequest"
+      v-model:pagination="pagination"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -355,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 == 'organization'"
@@ -370,21 +356,7 @@ onMounted(async () => {
           </q-td>
         </q-tr>
       </template>
-      <template v-slot:pagination="scope">
+    </p-table>
-        ทั้งหมด {{ total }} รายการ
-        <q-pagination
-          v-model="page"
-          active-color="primary"
-          color="dark"
-          :max="Number(maxPage)"
-          size="sm"
-          boundary-links
-          direction-links
-          :max-pages="5"
-          @update:model-value="fetcDataList()"
-        ></q-pagination>
-      </template>
-    </d-table>
   </q-card-section>
 
   <DialogIndividual v-model:devId="devId" v-model:modal="modalDetail" />

src/modules/14_KPI/components/results/tableResults.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
@@ -27,21 +27,19 @@ const {
   hideLoader,
   date2Thai,
 } = useCounterMixin();
-const { convertResults, convertStatus } = useKpiDataStore();
+const { convertResults } = useKpiDataStore();
 const store = useKpiDataStore();
 
 /** props*/
 const tab = defineModel<string>("tab", { required: true });
 const rows = defineModel<ResResults[]>("row", { required: true });
-const page = defineModel<number>("page", { required: true });
-const pageSize = defineModel<number>("pageSize", { required: true });
-const maxPage = defineModel<number>("maxPage", { required: true });
-const total = defineModel<number>("total", { required: true });
 const keyword = defineModel<string>("keyword", { required: true });
 const result = defineModel<string>("result", { required: true });
+const pagination = defineModel<any>("pagination", { required: true });
 
-const porps = defineProps({
+const props = defineProps({
   fetchData: { type: Function, required: true }, // function เรีนกข้อมูลประกาศผล
+  onRequest: { type: Function, required: true },
 });
 
 /** Table*/
@@ -57,11 +55,11 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "fullName",
+    name: "firstname",
     align: "left",
     label: "ผู้รับการประเมิน",
     sortable: true,
-    field: "fullName",
+    field: "firstname",
     format: (val, row) => {
       return `${row.prefix ?? ""}${row.firstname ?? ""} ${row.lastname ?? ""}`;
     },
@@ -96,7 +94,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "evaluationResults",
     align: "left",
     label: "ผลการประเมิน",
-    sortable: true,
+    sortable: false,
     field: "evaluationResults",
     format(val, row) {
       return convertResults(val);
@@ -152,7 +150,7 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 const visibleColumns = ref<string[]>([
   "no",
-  "fullName",
+  "firstname",
   "createdAt",
   // "evaluationStatus",
   "evaluationResults",
@@ -162,10 +160,6 @@ const visibleColumns = ref<string[]>([
   "posLevelName",
   "root",
 ]);
-const pagination = ref({
-  page: page.value,
-  rowsPerPage: pageSize.value,
-});
 
 /** ตัวแปร*/
 const year = ref<number | null>(calculateFiscalYear(new Date())); //ปีงบประมาณ
@@ -184,7 +178,7 @@ function onAnnounce() {
           id: ids,
         })
         .then(async () => {
-          await porps.fetchData();
+          await props.fetchData();
           await success($q, "ประกาศผลสำเร็จ");
           selected.value = [];
         })
@@ -223,7 +217,7 @@ async function fetchRoundOption() {
 
         roundOp.value = list;
         store.formQuery.round = list[0].id;
-        await porps.fetchData();
+        await props.fetchData();
       } else {
         roundOp.value = [];
         store.formQuery.round = "";
@@ -239,15 +233,15 @@ async function fetchRoundOption() {
 }
 
 /** function เปลี่ยนรอบการประเมิน และ เรียกข้อมูลรายการแผนพัฒนาการปฏิบัติราชการรายบุคคลย้อนหลัง*/
-function changRound() {
+function changeRound() {
-  store.formQuery.page = 1;
+  pagination.value.page = 1;
-  porps.fetchData();
+  props.fetchData();
 }
 
 /** ค้นหาข้อมูล*/
 function onSearchData() {
-  page.value = 1;
+  pagination.value.page = 1;
-  porps.fetchData();
+  props.fetchData();
 }
 
 /**
@@ -271,13 +265,6 @@ function filterSelector(val: string, update: Function, refData: string) {
   }
 }
 
-/** ทำงานเมื่อมีการเปลี่ยนแถวต่อหน้า*/
-watch(pagination, () => {
-  page.value = 1;
-  pageSize.value = pagination.value.rowsPerPage;
-});
-
-/** ทำงานเมื่อมีการเปลี่ยนแถวต่อหน้า*/
 onMounted(async () => {
   store.formQuery.round = "";
   await fetchRoundOption();
@@ -366,7 +353,7 @@ onMounted(async () => {
                 style="min-width: 150px"
                 emit-value
                 map-options
-                @update:model-value="changRound"
+                @update:model-value="changeRound"
               />
             </div>
 
@@ -409,16 +396,17 @@ onMounted(async () => {
       </div>
 
       <div class="col-12">
-        <d-table
+        <p-table
           :columns="columns"
           :rows="rows"
           row-key="id"
           :selection="tab === 'COMPLETE' ? 'multiple' : null"
           v-model:selected="selected"
           :rows-per-page-options="[10, 25, 50, 100]"
-          v-model:pagination="pagination"
           :paging="true"
           :visible-columns="visibleColumns"
+          v-model:pagination="pagination"
+          @request="props.onRequest"
         >
           <template v-slot:header-selection="scope" v-if="tab === 'COMPLETE'">
             <q-checkbox
@@ -444,7 +432,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 == 'organization'"
@@ -459,21 +447,7 @@ onMounted(async () => {
               </q-td>
             </q-tr>
           </template>
-          <template v-slot:pagination="scope">
+        </p-table>
-            ทั้งหมด {{ total }} รายการ
-            <q-pagination
-              v-model="page"
-              active-color="primary"
-              color="dark"
-              :max="Number(maxPage)"
-              size="sm"
-              boundary-links
-              direction-links
-              :max-pages="5"
-              @update:model-value="porps.fetchData()"
-            ></q-pagination>
-          </template>
-        </d-table>
       </div>
     </div>
   </q-card-section>

src/modules/14_KPI/views/01_kpiRound.vue

@@ -7,16 +7,11 @@ import { checkPermission } from "@/utils/permissions";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { calculateFiscalYear } from "@/utils/function";
+import { usePagination } from "@/composables/usePagination";
 
 /** importType*/
-import type {
+import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
-  DataOption,
+import type { FormRound } from "@/modules/14_KPI/interface/request/Main";
-  NewPagination,
-} from "@/modules/14_KPI/interface/index/Main";
-import type {
-  FormQueryRound,
-  FormRound,
-} from "@/modules/14_KPI/interface/request/Main";
 import type { ResRound } from "@/modules/14_KPI/interface/response/Main";
 
 /** importComponents*/
@@ -33,11 +28,13 @@ const {
   dialogConfirm,
   dialogRemove,
 } = useCounterMixin();
+const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
+  "",
+  fetchList
+);
 
 /** Table*/
 const rows = ref<ResRound[]>([]); //รายการรอบการประเมินผลการปฏิบัติหน้าที่ราชการ
-const totalList = ref<number>(1); //จำนวนรายการรอบการประเมินผลการปฏิบัติหน้าที่ราชการทั้งหมด
-const total = ref<number>(0); //จำนวนหน้าทั้งหมด
 const columns = ref<QTableProps["columns"]>([
   {
     name: "year",
@@ -99,16 +96,12 @@ const visibleColumns = ref<string[]>([
   "isActive",
 ]);
 
-//ฟร์อมข้อมูลค้นหา
-const formQuery = reactive<FormQueryRound>({
-  page: 1, //หน้า
-  pageSize: 10, //จำนวนหน้า
-  year: calculateFiscalYear(new Date()), //ปีงประมาณ
-  keyword: "",
-});
 const modalDialog = ref<boolean>(false); //modal เพิ่มรอบการประเมินผลการปฏิบัติหน้าที่ราชการ
 const isStatusEdit = ref<boolean>(false); //status การแก้ไขข้อมูล
 
+const fiscalyear = ref<number>(calculateFiscalYear(new Date())); //ปีงบประมาณปัจจุบัน
+const keyword = ref<string>(""); //คำค้นหา
+
 //ฟร์อมข้อมูลเพิ่มรอบการประเมินผลการปฏิบัติหน้าที่ราชการ
 const formData = reactive<FormRound>({
   durationKPI: "", //รอบการประเมิน
@@ -129,15 +122,17 @@ const roundOp = ref<DataOption[]>([
 async function fetchList() {
   showLoader();
   await http
-    .get(
+    .get(config.API.kpiPeriod + "/admin", {
-      config.API.kpiPeriod +
+      params: {
-        `/admin?page=${formQuery.page}&pageSize=${formQuery.pageSize}&keyword=${formQuery.keyword}&year=${formQuery.year}`
+        ...params.value,
-    )
+        year: fiscalyear.value,
+        keyword: keyword.value.trim(),
+      },
+    })
     .then(async (res) => {
-      const data = await res.data.result;
+      const result = await res.data.result;
-      totalList.value = Math.ceil(data.total / formQuery.pageSize);
+      pagination.value.rowsNumber = result.total;
-      total.value = data.total;
+      rows.value = result.data;
-      rows.value = data.data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -289,6 +284,7 @@ function onDeleteRound(id: string) {
     http
       .delete(config.API.kpiPeriodById(id))
       .then(async () => {
+        await checkAndUpdatePage(rows.value.length);
         await fetchList();
         await success($q, "ลบข้อมูลสำเร็จ");
       })
@@ -312,29 +308,12 @@ function connvertName(val: string) {
   return findData?.name;
 }
 
-/**
- * ฟังก์ชัน updatePagination
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePagination(newPagination: NewPagination) {
-  formQuery.page = 1;
-  formQuery.pageSize = newPagination.rowsPerPage;
-}
-
 /** function อัพเดทปีงบประมาณ และ fetch รายการรอบการประเมินผลการปฏิบัติหน้าที่ราชการ*/
 function handleUpdateYear() {
-  formQuery.page = 1;
+  pagination.value.page = 1;
   fetchList();
 }
 
-/** callback function fetch รายการรอบการประเมินผลการปฏิบัติหน้าที่ราชการ เมือมีการเปลี่ยนแถวต่อหน้า*/
-watch(
-  () => formQuery.pageSize,
-  () => {
-    fetchList();
-  }
-);
-
 /** callback function เช็ต วันเริ่มต้น และวันสิ้นสุด รอบการประเมินผลการปฏิบัติหน้าที่ราชการ*/
 watch(
   [() => formData.durationKPI, () => formData.year],
@@ -365,7 +344,7 @@ onMounted(async () => {
     <div class="row q-col-gutter-sm">
       <div class="row col-12">
         <datepicker
-          v-model="formQuery.year"
+          v-model="fiscalyear"
           :locale="'th'"
           autoApply
           year-picker
@@ -381,7 +360,7 @@ onMounted(async () => {
               dense
               outlined
               :model-value="
-                formQuery.year === 0 ? 'ทั้งหมด' : Number(formQuery.year) + 543
+                fiscalyear === 0 ? 'ทั้งหมด' : Number(fiscalyear) + 543
               "
               :label="`${'ปีงบประมาณ'}`"
             >
@@ -393,11 +372,11 @@ onMounted(async () => {
                 >
                 </q-icon>
               </template>
-              <template v-if="formQuery.year" v-slot:append>
+              <template v-if="fiscalyear" v-slot:append>
                 <q-icon
                   name="cancel"
                   @click.stop.prevent="
-                    (formQuery.year = 0), (formQuery.page = 1), fetchList()
+                    (fiscalyear = 0), (pagination.page = 1), fetchList()
                   "
                   class="cursor-pointer"
                 />
@@ -435,7 +414,7 @@ onMounted(async () => {
       </div>
 
       <div class="col-12">
-        <d-table
+        <p-table
           for="table"
           ref="table"
           :columns="columns"
@@ -447,7 +426,8 @@ onMounted(async () => {
           class="custom-header-table"
           :visible-columns="visibleColumns"
           :rows-per-page-options="[10, 25, 50, 100]"
-          @update:pagination="updatePagination"
+          v-model:pagination="pagination"
+          @request="onRequest"
         >
           <template v-slot:header="props">
             <q-tr :props="props">
@@ -493,21 +473,7 @@ onMounted(async () => {
               </q-td>
             </q-tr>
           </template>
-          <template v-slot:pagination="scope">
+        </p-table>
-            ทั้งหมด {{ 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>
       </div>
     </div>
   </q-card>

src/modules/14_KPI/views/02_kpiLists.vue

@@ -7,6 +7,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useKpiDataStore } from "@/modules/14_KPI/store";
 import { checkPermission } from "@/utils/permissions";
 import { calculateFiscalYear } from "@/utils/function";
+import { usePagination } from "@/composables/usePagination";
 import config from "@/app.config";
 import http from "@/plugins/http";
 
@@ -22,11 +23,10 @@ const $q = useQuasar();
 const router = useRouter();
 const store = useKpiDataStore();
 const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
+const { pagination, params, onRequest } = usePagination("", fetchList);
 
 const year = ref<number | null>(calculateFiscalYear(new Date())); //ปีงบประมาณ
 const formQuery = reactive({
-  page: 1, //หน้า
-  pageSize: 10, //จำนวนแถวต่อหน้า
   status: "",
   results: "",
 });
@@ -42,25 +42,23 @@ const rows = ref<any[]>([]); //รายการการประเมิน
 const maxPage = ref<number>(1); //จำนวนหน้าทั้งหมด
 const totalList = ref<number>(0); //จำนวนรายการทั้งหมด
 const visibleColumns = ref<string[]>([
-  "name",
+  "firstName",
   "createdAt",
   "evaluationStatus",
   "evaluationResults",
 ]);
 const columns = ref<QTableProps["columns"]>([
   {
-    name: "name",
+    name: "firstName",
     align: "left",
     label: "ผู้รับการประเมิน",
     sortable: true,
-    field: "name",
+    field: "firstName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format(val, row) {
       return `${row.prefix}${row.firstname}  ${row.lastname}`;
     },
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "createdAt",
@@ -71,32 +69,26 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => date2Thai(v, false, true),
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "evaluationStatus",
     align: "left",
     label: "สถานะการประเมิน",
-    sortable: true,
+    sortable: false,
     field: "evaluationStatus",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => store.convertStatus(v),
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "evaluationResults",
     align: "left",
     label: "ผลการประเมิน",
-    sortable: true,
+    sortable: false,
     field: "evaluationResults",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => store.convertResults(v),
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
 
@@ -142,8 +134,7 @@ async function fetchRoundOption() {
 async function fetchList() {
   showLoader();
   const body = {
-    page: formQuery.page,
+    ...params.value,
-    pageSize: formQuery.pageSize,
     kpiPeriodId: store.formQuery.round,
     keyword: store.formQuery.keyword.trim(),
     status: formQuery.status === "" ? undefined : formQuery.status,
@@ -154,10 +145,9 @@ async function fetchList() {
   await http
     .post(config.API.kpiUserEvaluation + `/list`, body)
     .then(async (res) => {
-      const data = await res.data.result;
+      const result = await res.data.result;
-      maxPage.value = Math.ceil(data.total / formQuery.pageSize);
+      pagination.value.rowsNumber = result.total;
-      totalList.value = data.total;
+      rows.value = result.data;
-      rows.value = data.data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -173,7 +163,7 @@ async function fetchList() {
  * แล้วเรียกข้อมูลรายการการประเมินผลการปฏิบัติราชการระดับบุคคลใหม่
  */
 async function changRound() {
-  formQuery.page = 1;
+  pagination.value.page = 1;
   await fetchList();
 }
 
@@ -195,22 +185,6 @@ function redirectViewDetailOnly(id: string) {
   router.push(`KPI-list-detail/${id}`);
 }
 
-/** ฟังก์ชันเคลียข้อมูลค้นหาเป็นค้นหาจ้อมูลทั้งหมด*/
-// function clearYear() {
-//   year.value = null;
-//   store.formQuery.round = "";
-//   roundOp.value = [];
-//   changRound();
-// }
-
-/**
- * function updatePagination
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePagination(newPagination: any) {
-  formQuery.pageSize = newPagination.rowsPerPage;
-}
-
 /**
  * ฟังก์ชันค้นหาข้อมูลในรายการตัวเลือก
  * @param val คำค้นหา
@@ -239,19 +213,6 @@ function filterSelector(val: string, update: Function, refData: string) {
   }
 }
 
-/**
- * ดูการเปลี่ยนแปลงของ formQuery.pageSize เมื่อมีการเปลี่ยนของแถวทั้งหมด
- * จะกำหนด formQuery.page เป็นหน้าแรก
- * แล้วเรียกข้อมูลรายการการประเมินผลการปฏิบัติราชการระดับบุคคลใหม่
- */
-watch(
-  () => formQuery.pageSize,
-  () => {
-    formQuery.page = 1;
-    fetchList();
-  }
-);
-
 /** Hook */
 onMounted(async () => {
   await fetchRoundOption();
@@ -374,7 +335,7 @@ onMounted(async () => {
                 lazy-rules
                 hide-bottom-space
                 outlined
-                @update:model-value="(formQuery.page = 1), fetchList()"
+                @update:model-value="(pagination.page = 1), fetchList()"
                 use-input
                 @clear="
                   (formQuery.status = ''), (statusOp = store.statusOptions)
@@ -409,7 +370,7 @@ onMounted(async () => {
                 lazy-rules
                 hide-bottom-space
                 outlined
-                @update:model-value="(formQuery.page = 1), fetchList()"
+                @update:model-value="(pagination.page = 1), fetchList()"
                 use-input
                 @clear="
                   (formQuery.results = ''), (resultOp = store.resultsOptions)
@@ -433,7 +394,7 @@ onMounted(async () => {
         </div>
 
         <div class="col-12">
-          <d-table
+          <p-table
             ref="table"
             :columns="columns"
             :rows="rows"
@@ -444,7 +405,8 @@ onMounted(async () => {
             dense
             :rows-per-page-options="[10, 25, 50, 100]"
             :visible-columns="visibleColumns"
-            @update:pagination="updatePagination"
+            v-model:pagination="pagination"
+            @request="onRequest"
           >
             <template v-slot:header="props">
               <q-tr :props="props">
@@ -490,21 +452,7 @@ onMounted(async () => {
                 </q-td>
               </q-tr>
             </template>
-            <template v-slot:pagination="scope">
+          </p-table>
-              ทั้งหมด {{ totalList }} รายการ
-              <q-pagination
-                v-model="formQuery.page"
-                active-color="primary"
-                color="dark"
-                :max="Number(maxPage)"
-                size="sm"
-                boundary-links
-                direction-links
-                :max-pages="5"
-                @update:model-value="fetchList"
-              ></q-pagination>
-            </template>
-          </d-table>
         </div>
       </div>
     </q-card>

src/modules/14_KPI/views/03_results.vue

@@ -4,6 +4,7 @@ import { useQuasar } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useKpiDataStore } from "@/modules/14_KPI/store";
+import { usePagination } from "@/composables/usePagination";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -19,6 +20,7 @@ import TableIndividual from "@/modules/14_KPI/components/results/tableIndividual
 const store = useKpiDataStore();
 const $q = useQuasar();
 const { messageError, showLoader, hideLoader } = useCounterMixin();
+const { pagination, params, onRequest } = usePagination("", fetcDataList);
 
 const tab = ref<string>("COMPLETE");
 const tabItems = ref<ItemsTab[]>([
@@ -27,10 +29,6 @@ const tabItems = ref<ItemsTab[]>([
   { name: "IDP", label: "แผนพัฒนาการปฏิบัติราชการรายบุคคล" },
 ]);
 const dataList = ref<ResResults[]>([]); // ข่อมูลรายการ
-const page = ref<number>(1);
-const pageSize = ref<number>(10);
-const maxPage = ref<number>(1);
-const total = ref<number>(1);
 const keyword = ref<string>("");
 const result = ref<string>("");
 
@@ -40,17 +38,15 @@ async function fetcDataList() {
   await http
     .post(config.API.evaluationUser, {
       status: tab.value,
-      page: page.value,
+      ...params.value,
-      pageSize: pageSize.value,
       keyword: keyword.value.trim(),
       kpiPeriodId: store.formQuery.round ? store.formQuery.round : "",
       results: result.value === "" ? undefined : result.value,
     })
     .then(async (res) => {
-      const data = await res.data.result;
+      const result = await res.data.result;
-      dataList.value = data.data;
+      pagination.value.rowsNumber = result.total;
-      total.value = data.total;
+      dataList.value = result.data;
-      maxPage.value = Math.ceil(total.value / pageSize.value);
     })
     .catch((err) => {
       messageError($q, err);
@@ -62,16 +58,11 @@ async function fetcDataList() {
 
 /** ทำงานเมื่อมีการเปลี่ยน Tab */
 watch(tab, () => {
-  page.value = 1;
+  pagination.value.page = 1;
   result.value = "";
   keyword.value = "";
   dataList.value = [];
 });
-
-/** ทำงานเมื่อมีการเปลี่ยนแถวต่อหน้า*/
-watch(pageSize, () => {
-  fetcDataList();
-});
 </script>
 
 <template>
@@ -97,13 +88,11 @@ watch(pageSize, () => {
         <TableResults
           :tab="tab"
           :row="dataList"
-          v-model:page="page"
-          v-model:pageSize="pageSize"
-          v-model:maxPage="maxPage"
-          v-model:total="total"
           v-model:keyword="keyword"
           v-model:result="result"
+          v-model:pagination="pagination"
           :fetchData="fetcDataList"
+          :onRequest="onRequest"
         />
       </q-tab-panel>
 
@@ -111,13 +100,11 @@ watch(pageSize, () => {
         <TableResults
           :tab="tab"
           :row="dataList"
-          v-model:page="page"
-          v-model:pageSize="pageSize"
-          v-model:maxPage="maxPage"
-          v-model:total="total"
           v-model:keyword="keyword"
           v-model:result="result"
+          v-model:pagination="pagination"
           :fetchData="fetcDataList"
+          :onRequest="onRequest"
         />
       </q-tab-panel>
       <q-tab-panel name="IDP" style="padding: 0px">