fix(KPI):sort

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,
-      pageSize: pageSize.value,
+      ...params.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;
-      dataList.value = data.data;
-      total.value = data.total;
-      maxPage.value = Math.ceil(total.value / pageSize.value);
+      const result = await res.data.result;
+      pagination.value.rowsNumber = result.total;
+      dataList.value = result.data;
     })
     .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">