fix(KPI):sort

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 {
-  DataOption,
-  NewPagination,
-} from "@/modules/14_KPI/interface/index/Main";
-import type {
-  FormQueryRound,
-  FormRound,
-} from "@/modules/14_KPI/interface/request/Main";
+import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
+import type { 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(
-      config.API.kpiPeriod +
-        `/admin?page=${formQuery.page}&pageSize=${formQuery.pageSize}&keyword=${formQuery.keyword}&year=${formQuery.year}`
-    )
+    .get(config.API.kpiPeriod + "/admin", {
+      params: {
+        ...params.value,
+        year: fiscalyear.value,
+        keyword: keyword.value.trim(),
+      },
+    })
     .then(async (res) => {
-      const data = await res.data.result;
-      totalList.value = Math.ceil(data.total / formQuery.pageSize);
-      total.value = data.total;
-      rows.value = data.data;
+      const result = await res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.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">
-            ทั้งหมด {{ 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>
       </div>
     </div>
   </q-card>