แก้ paging

src/modules/06_evaluate/components/TableListEvaluate.vue

@@ -15,6 +15,9 @@ const store = useEvaluateStore();
 const mixin = useCounterMixin();
 const router = useRouter();
 
+const total = defineModel<number>("total", { required: true });
+const totalList = defineModel<number>("totalList", { required: true });
+const pagination = defineModel<any>("pagination", { required: true });
 const { dialogRemove, showLoader, hideLoader, success, messageError } = mixin;
 
 const props = defineProps({
@@ -79,15 +82,6 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-/** paging*/
-const pagination = ref({
-  descending: false,
-  page: props.page,
-  rowsPerPage: props.pageSize,
-});
-
-const currentPage = ref<number>(1);
-
 /**
  * function ส่งข้อมูลไป Update Paging
  * @param newPagination ข้อมูล Paging ใหม่
@@ -97,13 +91,9 @@ function updateProp(newPagination: any, page: number) {
   emit("update:pagination", newPagination, page);
 }
 
-/**
+function updatePagination(newPagination: any) {
- * function updatePageSize
+  pagination.value.page = 1;
- * @param newPagination  PageSize
- */
-function updateRowsPerPagen(newPagination: any) {
   pagination.value.rowsPerPage = newPagination.rowsPerPage;
-  currentPage.value = 1;
 }
 
 /**
@@ -137,11 +127,6 @@ function redirectToDetail(data: any) {
   router.push(`/evaluate/detail/${data.typeparam.toLowerCase()}/${data.id}`);
 }
 
-/** function Callblck ทำงานเมื่อ pagination มีการเปลี่ยนแปลง */
-watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
-  updateProp(pagination.value, currentPage.value);
-});
-
 /** Hook lifecycle*/
 onMounted(() => {
   store.columns = columns.value;
@@ -158,10 +143,9 @@ onMounted(() => {
     :columns="columns"
     :rows="store.row"
     dense
-    :rows-per-page-options="[10, 25, 50, 100]"
     :visible-columns="store.visibleColumns"
-    v-model:pagination="pagination"
+    :rows-per-page-options="[1, 25, 50, 100]"
-    @update:pagination="updateRowsPerPagen"
+    @update:pagination="updatePagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -252,15 +236,17 @@ onMounted(() => {
       </div>
     </template>
     <template v-slot:pagination="scope">
-      ทั้งหมด {{ store.row.length }} รายการ
+      ทั้งหมด {{ total }} รายการ
       <q-pagination
-        v-model="currentPage"
+        v-model="pagination.page"
         active-color="primary"
         color="dark"
+        :max="Number(totalList)"
         size="sm"
         boundary-links
         direction-links
-        :max="Number(props.maxPage)"
+        :max-pages="5"
+        @update:model-value="props.fetchData?.()"
       ></q-pagination>
     </template>
   </d-table>

src/modules/06_evaluate/views/EvaluateMain.vue

@@ -47,6 +47,15 @@ const listMenu = ref<ListMenu[]>([
   },
 ]);
 
+const total = ref<number>(0);
+const totalList = ref<number>(1);
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+
 /**
  * function เปืด popup เพิ่มการประเมิน
  * @param data
@@ -60,24 +69,22 @@ function openExpert() {
   router.push("/evaluate/expert");
 }
 
-/** ตัวแปร Paging*/
-const page = ref<number>(1);
-const pageSize = ref<number>(25);
-const maxPage = ref<number>(10);
-
 /** function เรียกรายการประเมิน*/
 async function fetchEvaluteList() {
   showLoader();
   const body = {
-    page: page.value,
+    page: pagination.value.page,
-    pageSize: pageSize.value,
+    pageSize: pagination.value.rowsPerPage,
     keyword: store.filterKeyword,
     status: selectedStatus.value,
   };
   await http
     .put(config.API.evaluationList(), body)
     .then(async (res) => {
-      maxPage.value = Math.ceil(res.data.result.total / pageSize.value);
+      totalList.value = Math.ceil(
+        res.data.result.total / pagination.value.rowsPerPage
+      );
+      total.value = res.data.result.total;
       store.fetchEvaluateList(res.data.result.data);
       await getProfileCheck();
     })
@@ -112,24 +119,6 @@ async function getProfileCheck() {
     });
 }
 
-/**
- * function updatePaging
- * @param newPagination  ข้อมูลใหม่ของ Paging
- * @param currentPage  หน้า Page
- */
-async function updatePaging(newPagination: any, currentPage: number) {
-  page.value = currentPage;
-  pageSize.value = newPagination.rowsPerPage;
-
-  await fetchEvaluteList();
-}
-
-async function filterFn() {
-  page.value = 1;
-  pageSize.value = pageSize.value;
-  await fetchEvaluteList();
-}
-
 const selectedStatus = ref<string[]>([
   "CHECK_SPEC",
   "PREPARE_DOC_V1",
@@ -187,6 +176,18 @@ watch(
   }
 );
 
+function getSearch() {
+  pagination.value.page = 1;
+  fetchEvaluteList();
+}
+
+watch(
+  () => pagination.value.rowsPerPage,
+  async () => {
+    getSearch();
+  }
+);
+
 /** hook lifecycle*/
 onMounted(async () => {
   await fetchEvaluteList();
@@ -260,7 +261,7 @@ onMounted(async () => {
                 option-value="val"
                 label="ค้นหาสถานะ"
                 :style="!$q.screen.gt.xs ? '' : 'width: 35vw'"
-                @update:model-value="fetchEvaluteList"
+                @update:model-value="getSearch"
                 use-input
                 @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
               >
@@ -286,7 +287,7 @@ onMounted(async () => {
                 v-model="store.filterKeyword"
                 label="ค้นหา"
                 debounce="300"
-                @keydown.enter.prevent="filterFn"
+                @keydown.enter.prevent="getSearch"
               >
                 <template v-slot:append>
                   <q-icon name="search" />
@@ -311,11 +312,10 @@ onMounted(async () => {
           </div>
           <div class="col-12">
             <TableListEvaluate
-              :page="page"
-              :pageSize="pageSize"
-              :maxPage="maxPage"
-              @update:pagination="updatePaging"
               :fetchData="fetchEvaluteList"
+              v-model:total="total"
+              v-model:total-list="totalList"
+              v-model:pagination="pagination"
             />
           </div>
         </q-card>

src/modules/07_appealComplain/views/Main.vue

@@ -13,12 +13,6 @@ import { useAppealComplainStore } from "@/modules/07_appealComplain/store";
 import type { FormType } from "@/modules/07_appealComplain/interface/response/mainType";
 import type { DataOption } from "@/modules/07_appealComplain/interface/index/main";
 
-const total = ref<number>(0);
-const currentPage = ref<number>(1);
-const maxPage = ref<number>(1);
-const page = ref<number>(1);
-const rowsPerPage = ref<number>(10);
-
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
@@ -31,14 +25,13 @@ const type = ref<DataOption[]>([
   ...dataStore.typeOptions,
 ]);
 
-/**
+const total = ref<number>(0);
- * ตั้งค่า pagination
+const totalList = ref<number>(1);
- */
 const pagination = ref({
-  sortBy: "lastUpdatedAt",
+  sortBy: "createdAt",
   descending: true,
-  page: page.value,
+  page: 1,
-  rowsPerPage: rowsPerPage.value,
+  rowsPerPage: 10,
 });
 
 /**
@@ -168,14 +161,16 @@ async function getData() {
         formData.status,
         formData.type,
         formData.year,
-        currentPage.value,
+        pagination.value.page,
-        rowsPerPage.value,
+        pagination.value.rowsPerPage,
         filterKeyword.value
       )
     )
     .then((res) => {
+      totalList.value = Math.ceil(
+        res.data.result.total / pagination.value.rowsPerPage
+      );
       total.value = res.data.result.total;
-      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
       let data = res.data.result.data;
       dataStore.fetchAppealComplain(data);
     })
@@ -196,12 +191,12 @@ function clickBack() {
 
 /** ดึงข้อมูลเมื่อมีการปรับฟิลเตอร์ */
 function dataUpdate() {
-  getData();
+  getSearch();
 }
 
 /** ดึงข้อมูลจาก keyword*/
 function filterFn() {
-  getData();
+  getSearch();
 }
 
 /**
@@ -216,20 +211,20 @@ function redirectToPageadd() {
   router.push(`/appeal-complain/add`);
 }
 
-watch(
+function updatePagination(newPagination: any) {
-  () => currentPage.value,
+  pagination.value.page = 1;
-  () => {
+  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-    rowsPerPage.value = pagination.value.rowsPerPage;
+}
-    getData();
+
-  }
+function getSearch() {
-);
+  pagination.value.page = 1;
+  getData();
+}
 
 watch(
   () => pagination.value.rowsPerPage,
-  () => {
+  async () => {
-    rowsPerPage.value = pagination.value.rowsPerPage;
+    getSearch();
-    currentPage.value = 1;
-    getData();
   }
 );
 
@@ -335,7 +330,7 @@ onMounted(async () => {
                 option-label="name"
                 option-value="id"
                 :options="dataStore.statusOptions"
-                @update:model-value="dataUpdate"
+                @update:model-value="getSearch"
               />
             </div>
             <q-space />
@@ -352,7 +347,13 @@ onMounted(async () => {
               @keydown.enter.prevent="filterFn"
             >
               <template v-slot:append>
-                <q-icon name="search" />
+                <q-icon v-if="filterKeyword == ''" name="search" />
+                <q-icon
+                  v-if="filterKeyword !== ''"
+                  name="clear"
+                  class="cursor-pointer"
+                  @click="(filterKeyword = ''), getSearch()"
+                />
               </template>
             </q-input>
 
@@ -383,21 +384,24 @@ onMounted(async () => {
                 :rows="dataStore.rows"
                 :columns="dataStore.columns"
                 :visible-columns="dataStore.visibleColumns"
-                v-model:pagination="pagination"
                 :rows-per-page-options="[10, 25, 50, 100]"
+                @update:pagination="updatePagination"
               >
                 <template v-slot:pagination="scope">
                   ทั้งหมด {{ total }} รายการ
                   <q-pagination
-                    v-model="currentPage"
+                    v-model="pagination.page"
                     active-color="primary"
                     color="dark"
-                    :max="Number(maxPage)"
+                    :max="Number(totalList)"
                     size="sm"
                     boundary-links
                     direction-links
+                    :max-pages="5"
+                    @update:model-value="getData()"
                   ></q-pagination>
                 </template>
+
                 <template v-slot:header="props">
                   <q-tr :props="props">
                     <q-th
@@ -420,11 +424,12 @@ onMounted(async () => {
                     >
                       <div v-if="col.name == 'no'">
                         {{
-                          (currentPage - 1) * Number(pagination.rowsPerPage) +
+                          (pagination.page - 1) * pagination.rowsPerPage +
                           props.rowIndex +
                           1
                         }}
                       </div>
+
                       <div v-else>
                         {{ col.value ? col.value : "-" }}
                       </div>

src/modules/08_KPI/components/Evaluator/01_TabAll.vue

@@ -51,7 +51,7 @@ async function redirectViewDetail(id: string) {
       :paging="true"
       dense
       class="custom-table2"
-      :rows-per-page-options="[10, 25, 50, 100]"
+      :rows-per-page-options="[1, 25, 50, 100]"
       :visible-columns="visibleColumns"
       v-model:pagination="pagination"
       @update:pagination="props.updatePagination"

src/modules/08_KPI/views/main.vue

@@ -414,7 +414,7 @@ onMounted(async () => {
                 autoApply
                 year-picker
                 :enableTimePicker="false"
-                @update:model-value="fetchRoundOption('main')"
+                @update:model-value="  formQuery.page = 1,fetchRoundOption('main')"
               >
                 <template #year="{ year }">{{ year + 543 }}</template>
                 <template #year-overlay-value="{ value }">{{

src/modules/08_KPI/views/mainEvaluator.vue

@@ -225,7 +225,7 @@ onMounted(async () => {
               autoApply
               year-picker
               :enableTimePicker="false"
-              @update:model-value="fetchRoundOption(true)"
+              @update:model-value="  store.formQuery.page = 1,fetchRoundOption(true)"
             >
               <template #year="{ year }">{{ year + 543 }}</template>
               <template #year-overlay-value="{ value }">{{

src/modules/14_IDP/views/main.vue

@@ -331,7 +331,7 @@ onMounted(async () => {
               <template v-if="status !== 'ALL'" v-slot:append>
                 <q-icon
                   name="cancel"
-                  @click.stop.prevent="(status = 'ALL'), getListData()"
+                  @click.stop.prevent="(status = 'ALL'), getSerach()"
                   class="cursor-pointer"
                 />
               </template>
@@ -382,7 +382,7 @@ onMounted(async () => {
               row-key="id"
               :paging="true"
               :visible-columns="visibleColumns"
-              :rows-per-page-options="[10, 25, 50, 100]"
+              :rows-per-page-options="[1, 25, 50, 100]"
               @update:pagination="updatePagination"
             >
               <template v-slot:header="props">