fix(evaluate):sort

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,

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>