fix(evaluate):sort

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>