From 9b11502663a3103066d2b3ab44bb824be91f7730 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 30 Sep 2025 15:30:30 +0700
Subject: [PATCH] fix(evaluate):sort

---
 src/components/TablePagination.vue            |   7 +-
 .../components/Detail/viewstep/tableStep1.vue |   2 +-
 .../components/Director/Form.vue              | 116 +++++-------------
 .../interface/index/evalute.ts                |   2 +-
 .../12_evaluatePersonal/store/Evaluate.ts     |  30 ++---
 .../12_evaluatePersonal/views/MainPage.vue    | 108 +++++-----------
 6 files changed, 81 insertions(+), 184 deletions(-)

diff --git a/src/components/TablePagination.vue b/src/components/TablePagination.vue
index cfbf5a724..02ed5960a 100644
--- a/src/components/TablePagination.vue
+++ b/src/components/TablePagination.vue
@@ -16,7 +16,12 @@
     :loading="loading"
   >
     <template v-slot:pagination="scope">
-      ทั้งหมด {{ pagination.rowsNumber || attrs.rows.length }} รายการ
+      ทั้งหมด
+      {{
+        pagination.rowsNumber.toLocaleString() ||
+        attrs.rows.length.toLocaleString()
+      }}
+      รายการ
       <q-pagination
         v-model="pagination.page"
         @update:model-value="handlePageChange"
diff --git a/src/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue b/src/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue
index 04a135fa1..7a4aadb1a 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue
@@ -20,7 +20,7 @@ const total = computed(() => {
 });
 
 const pagination = ref({
-  sortBy: "desc",
+  sortBy: "",
   descending: false,
   page: 1,
   rowsPerPage: 10,
diff --git a/src/modules/12_evaluatePersonal/components/Director/Form.vue b/src/modules/12_evaluatePersonal/components/Director/Form.vue
index 8185ac499..884f8d470 100644
--- a/src/modules/12_evaluatePersonal/components/Director/Form.vue
+++ b/src/modules/12_evaluatePersonal/components/Director/Form.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import { ref, reactive, watch, onMounted, computed, type PropType } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { usePagination } from "@/composables/usePagination";
 
-/**
- * importTypr
- */
+/** importType*/
 import type { QTableProps } from "quasar";
 import type {
   FormData,
@@ -17,21 +18,13 @@ import type {
 } from "@/modules/11_discipline/interface/request/director";
 import type { Pagination } from "@/modules/12_evaluatePersonal/interface/index/Main";
 
-/**
- * importComponenst
- */
+/** importComponenst*/
 import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
 
-/**
- * importStore
- */
-import { useCounterMixin } from "@/stores/mixin";
-
-/**
- * use
- */
+/** use*/
 const $q = useQuasar();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
+const { pagination, params, onRequest } = usePagination("", searchInput);
 
 /**
  * รับ props มาจาก page หลัก
@@ -109,7 +102,7 @@ const columnsRespondent = ref<QTableProps["columns"]>([
     name: "citizenId",
     align: "left",
     label: "เลขประจำตัวประชาชน",
-    sortable: false,
+    sortable: true,
     field: "citizenId",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -142,33 +135,19 @@ const columnsRespondent = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-const total = ref<number>(0);
-const totalList = ref<number>(1);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
 
-/**
- * บันทึกข้อมูล
- */
+/** บันทึกข้อมูล*/
 function onSubmit() {
   props.onSubmit(formData);
 }
 
-/**
- * update เมื่อเปลี่ยน option
- */
+/** update เมื่อเปลี่ยน option*/
 function updateSelect() {
   search.value = "";
 }
 
-/**
- * ค้นหารายชื่อ
- */
-function searchInput() {
+/** ค้นหารายชื่อ*/
+async function searchInput() {
   searchRef.value.validate();
   if (!searchRef.value.hasError) {
     showLoader();
@@ -177,19 +156,16 @@ function searchInput() {
       keyword: search.value ? search.value.trim() : "",
       system: (route.meta?.Key as string) || undefined,
     };
-    http
-      .post(
-        config.API.orgSearchPersonal() +
-          `?page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}`,
-        body
-      )
+    await http
+      .post(config.API.orgSearchPersonal(), body, {
+        params: {
+          ...params.value,
+        },
+      })
       .then((res) => {
-        const data = res.data.result.data;
-        totalList.value = Math.ceil(
-          res.data.result.total / pagination.value.rowsPerPage
-        );
-        total.value = res.data.result.total;
-        const list = data.map((e: ResponsePreson) => ({
+        const result = res.data.result;
+        pagination.value.rowsNumber = result.total;
+        const list = result.data.map((e: ResponsePreson) => ({
           personId: e.id,
           idcard: e.citizenId,
           prefix: e.prefix,
@@ -218,7 +194,8 @@ function searchInput() {
 }
 
 /**
- * เลืือกชื่อกรรมการ
+ * เลือกชื่อกรรมการ
+ * @param data เลือกชื่อกรรมการ
  */
 function returnDetail(data: ResponsePreson) {
   formData.prefix = data.prefix;
@@ -239,24 +216,17 @@ function onclickViewinfo(id: string) {
 }
 
 /**
- * เปิด,ปิด  popup ทะเบียนประวัติ
+ * ฟังก์ชันอัพเดท modal
+ * @param modal เปิด,ปิด  popup ทะเบียนประวัติ
  */
 function updatemodalPersonal(modal: boolean) {
   modalPersonal.value = modal;
 }
 
-function updatePagination(newPagination: Pagination) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
-watch(
-  () => pagination.value.rowsPerPage,
-  () => {
-    searchInput();
-  }
-);
-
+/**
+ * ฟังก์ชันโหลดข้อมูล
+ * @param data ข้อมูลที่ส่งมา edit,view
+ */
 async function fetchForm(data: FormData) {
   formData.prefix = data.prefix;
   formData.firstname = data.firstname;
@@ -327,7 +297,7 @@ onMounted(async () => {
             </div>
 
             <div class="col-12">
-              <d-table
+              <p-table
                 ref="table"
                 :columns="columnsRespondent"
                 :rows="rows"
@@ -339,23 +309,9 @@ onMounted(async () => {
                 class="custom-header-table"
                 :visible-columns="visibleColumnsRespondent"
                 :rows-per-page-options="[10, 25, 50, 100]"
-                @update:pagination="updatePagination"
+                v-model:pagination="pagination"
+                @request="onRequest"
               >
-                <template v-slot:pagination="scope">
-                  ทั้งหมด {{ 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="searchInput"
-                  ></q-pagination>
-                </template>
-
                 <template v-slot:header="props">
                   <q-tr :props="props">
                     <q-th
@@ -377,11 +333,7 @@ onMounted(async () => {
                       @click.stop.prevent="returnDetail(props.row)"
                     >
                       <div v-if="col.name == 'no'">
-                        {{
-                          (pagination.page - 1) * pagination.rowsPerPage +
-                          props.rowIndex +
-                          1
-                        }}
+                        {{ props.rowIndex + 1 }}
                       </div>
                       <div v-else-if="col.name == 'info'">
                         <q-btn
@@ -404,7 +356,7 @@ onMounted(async () => {
                     </q-td>
                   </q-tr>
                 </template>
-              </d-table>
+              </p-table>
             </div>
           </div>
 
diff --git a/src/modules/12_evaluatePersonal/interface/index/evalute.ts b/src/modules/12_evaluatePersonal/interface/index/evalute.ts
index 16ff58fa6..26135e7d6 100644
--- a/src/modules/12_evaluatePersonal/interface/index/evalute.ts
+++ b/src/modules/12_evaluatePersonal/interface/index/evalute.ts
@@ -59,7 +59,7 @@ interface CertificatesForm {
 
 interface EvaluateList {
   id: string;
-  citizanId: string;
+  citizenId: string;
   fullName: string;
   position: string;
   level: string | null;
diff --git a/src/modules/12_evaluatePersonal/store/Evaluate.ts b/src/modules/12_evaluatePersonal/store/Evaluate.ts
index 33bc33c40..96e37b202 100644
--- a/src/modules/12_evaluatePersonal/store/Evaluate.ts
+++ b/src/modules/12_evaluatePersonal/store/Evaluate.ts
@@ -59,7 +59,7 @@ export const useEvalutuonStore = defineStore("EvalutuonStore", () => {
       (data: EvaluateRes) =>
         ({
           id: data.id,
-          citizanId: data.citizenId,
+          citizenId: data.citizenId,
           fullName: data.fullName,
           position: data.position,
           level: convertType(data.type),
@@ -74,12 +74,12 @@ export const useEvalutuonStore = defineStore("EvalutuonStore", () => {
 
   const visibleColumns = ref<String[]>([
     "no",
-    "citizanId",
+    "citizenId",
     "fullName",
     "position",
     "level",
-    "positionNumber",
-    "agency",
+    "posNo",
+    "oc",
     "status",
   ]);
   const columns = ref<QTableProps["columns"]>([
@@ -96,19 +96,17 @@ export const useEvalutuonStore = defineStore("EvalutuonStore", () => {
       name: "level",
       align: "left",
       label: "ระดับที่ยื่นขอ",
-      sortable: true,
+      sortable: false,
       field: "level",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
     {
-      name: "citizanId",
+      name: "citizenId",
       align: "center",
       label: "เลขประจำตัวประชาชน",
-      sortable: false,
-      field: "citizanId",
+      sortable: true,
+      field: "citizenId",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
     },
@@ -129,36 +127,30 @@ export const useEvalutuonStore = defineStore("EvalutuonStore", () => {
       field: "position",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
     {
-      name: "positionNumber",
+      name: "posNo",
       align: "left",
       label: "เลขที่ตำแหน่ง",
       sortable: true,
       field: "positionNumber",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
     {
-      name: "agency",
+      name: "oc",
       align: "left",
       label: "สังกัด",
       sortable: true,
       field: "agency",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
     {
       name: "status",
       align: "left",
       label: "สถานะ",
-      sortable: true,
+      sortable: false,
       field: "status",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
diff --git a/src/modules/12_evaluatePersonal/views/MainPage.vue b/src/modules/12_evaluatePersonal/views/MainPage.vue
index ae134e11d..7335357d4 100644
--- a/src/modules/12_evaluatePersonal/views/MainPage.vue
+++ b/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>