fix(ข้อมูลการประเมิน):sort Pagination

src/composables/usePagination.ts

@@ -39,9 +39,16 @@ export function usePagination(
     }
   }
 
+  async function checkAndUpdatePage(totalRows: number) {
+    if (totalRows === 1 && pagination.value.page > 1) {
+      pagination.value.page = pagination.value.page - 1;
+    }
+  }
+
   return {
     pagination,
     params,
     onRequest,
+    checkAndUpdatePage,
   };
 }

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 keyword = ref<string>(""); // คำค้นหา
-const totalList = ref<number>(1); // จำนวนหน้าทั้งหมด
-const formQuery = reactive<FormQueryCapacity>({
-  page: 1,
-  pageSize: 10,
-  keyword: "",
-}); // form query สำหรับการค้นหา
 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(
+    .get(config.API.kpiCapacity + "/edit", { params: queryParams })
-      config.API.kpiCapacity +
-        `/edit?page=${formQuery.page}&pageSize=${
-          formQuery.pageSize
-        }&keyword=${formQuery.keyword.trim()}&type=${store.competencyTypeVal}`
-    )
     .then(async (res) => {
-      total.value = res.data.result.total;
+      const result = res.data.result;
-      const data: ResDataCapacity[] = res.data.result.data;
+      pagination.value.rowsNumber = result.total;
-      totalList.value = Math.ceil(res.data.result.total / formQuery.pageSize);
+      rows.value = result.data;
-      rows.value = 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(
+        await checkAndUpdatePage(rows.value.length);
-          formQuery.page,
-          totalList.value,
-          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">
+  </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>
 </template>

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(
+    .get(config.API.kpiGroup + "/edit", {
-      config.API.kpiGroup +
+      params: {
-        `/edit?page=${formQuery.page}&pageSize=${
+        ...params.value,
-          formQuery.pageSize
+        keyword: keyword.value.trim(),
-        }&keyword=${formQuery.keyword.trim()}`
+      },
-    )
+    })
     .then(async (res) => {
-      total.value = res.data.result.total;
+      const result = res.data.result;
-      const data = res.data.result;
+      pagination.value.rowsNumber = result.total;
-      totalList.value = Math.ceil(res.data.result.total / formQuery.pageSize);
+      rows.value = result.data;
-      rows.value = data.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(
+      await checkAndUpdatePage(rows.value.length);
-        formQuery.page,
-        totalList.value,
-        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">
+  </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="fetchData"
-      ></q-pagination>
-    </template>
-  </d-table>
 
   <q-dialog v-model="modal" persistent>
     <q-card flat bordered style="min-width: 50vh">

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
+  await http
-    .get(
+    .get(config.API.kpiLink + "/edit", {
-      config.API.kpiLink +
+      params: {
-        `/edit?page=${formQuery.page}&pageSize=${
+        ...params.value,
-          formQuery.pageSize
+        keyword: keyword.value.trim(),
-        }&keyword=${formQuery.keyword.trim()}`
+      },
-    )
+    })
     .then((res) => {
-      total.value = res.data.result.total;
+      const result = res.data.result;
-      const data = res.data.result;
+      pagination.value.rowsNumber = result.total;
-      totalList.value = Math.ceil(res.data.result.total / formQuery.pageSize);
+      rows.value = result.data;
-      rows.value = data.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(
+      await checkAndUpdatePage(rows.value.length);
-        formQuery.page,
-        totalList.value,
-        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]"
+    :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">
@@ -495,21 +467,7 @@ onMounted(() => {
         </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="getData"
-      ></q-pagination>
-    </template>
-  </d-table>
 
   <q-dialog v-model="modal" persistent>
     <q-card flat bordered style="min-width: 80vh">

src/modules/01_masterdata/interface/request/Main.ts

@@ -12,8 +12,8 @@ interface DataListsObject {
 }
 
 interface FormListMainByRole {
-  page: number;
+  page?: number;
-  pageSize: 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;
+  pageSize?: number;
-  page: number;
+  page?: number;
 }
 
 export type {

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);
+      const result = res.data.result;
-      totalList.value = res.data.result.total;
+      pagination.value.rowsNumber = result.total;
-      rows.value = res.data.result.data;
+      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(
+        await checkAndUpdatePage(rows.value.length);
-          formFilter.page,
-          maxPage.value,
-          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>

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,
+        ...params.value,
-        page: pagination.value.page,
       })
       .then((res) => {
-        const data = res.data.result.data;
+        const result = res.data.result;
-        totalList.value = Math.ceil(
+        pagination.value.rowsNumber = result.total;
-          res.data.result.total / pagination.value.rowsPerPage
+        rows.value = result.data;
-        );
-        total.value = res.data.result.total;
-        rows.value = 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(
+        await checkAndUpdatePage(rows.value.length);
-          pagination.value.page,
-          totalList.value,
-          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">
+          </p-table>
-              ทั้งหมด {{ 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>
         </div>
       </div>
     </div>

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,
+      ...params.value,
-      page: formFilter.page,
     })
     .then(async (res) => {
-      const data = await res.data.result.data;
+      const result = await res.data.result;
-      total.value = res.data.result.total;
+      pagination.value.rowsNumber = result.total;
-      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
+      rows.value = result.data;
-      rows.value = 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(
+        await checkAndUpdatePage(rows.value.length);
-          formFilter.page,
-          maxPage.value,
-          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'">
+              <div>
-                {{
-                  (formFilter.page - 1) * Number(pagination.rowsPerPage) +
-                  props.rowIndex +
-                  1
-                }}
-              </div>
-
-              <div v-else>
                 {{ col.value ? col.value : "-" }}
               </div>
             </q-td>
           </q-tr>
         </template>
-      </d-table>
+      </p-table>
     </div>
   </q-card>
 

src/modules/08_registryEmployee/views/Main.vue

@@ -37,7 +37,10 @@ const {
   findOrgNameHtml,
 } = useCounterMixin();
 const { statusText } = useRegistryEmp();
-const { pagination, params, onRequest } = usePagination("", fetchList);
+const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
+  "",
+  fetchList
+);
 
 const modalAddEmployee = ref<boolean>(false); // popup เพิ่มข้อมูลลูกจ้างชั่วคราว
 const modalPos = ref<boolean>(false); //popup กำหนดตำแหน่ง
@@ -224,9 +227,7 @@ function onClickDelete(id: string) {
     await http
       .delete(config.API.registryNew("-employee") + `/${id}`)
       .then(async () => {
-        if (rows.value.length === 1 && pagination.value.page > 1) {
+        await checkAndUpdatePage(rows.value.length);
-          pagination.value.page = pagination.value.page - 1;
-        }
         await fetchList();
         await success($q, "ลบข้อมูลสำเร็จ");
       })