แก้ paging วินัย

src/modules/11_discipline/components/2_InvestigateFacts/Form.vue

@@ -61,13 +61,19 @@ const editDirectorId = ref<string>();
 const dutyVal = ref<string>();
 const commandNoVal = ref<string>();
 
+const total = ref<number>(0);
+const totalList = ref<number>(1);
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+
 const filter = ref<string>("");
 const isUpdate = ref<boolean>(false);
 const filterTable = ref<string>("");
 const filterKeyword = ref<string>("");
-const maxPage = ref<number>(1);
-const page = ref<number>(1);
-const rowsPerPage = ref<number>(10);
 
 const investigationExtendStatus = ref<boolean>(false);
 
@@ -359,28 +365,25 @@ async function getOc(activeId: string) {
     });
 }
 
-async function updatePagingProp(rowPerpage: number, pageCurrent: number) {
-  rowsPerPage.value = rowPerpage;
-  page.value = pageCurrent;
-  await getList();
-}
-
 /** ดึงข้อมูลรายละเอียดสืบสวน */
 async function getList() {
   showLoader();
   await http
     .get(
       config.API.directorList(
-        page.value,
-        rowsPerPage.value,
-        filterKeyword.value,
+        pagination.value.page,
+        pagination.value.rowsPerPage,
+        filterKeyword2.value,
         mainStore.pathDirector(route.name as string)
       )
     )
     //
     .then((res) => {
-      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
       const data = res.data.result.data;
+      totalList.value = Math.ceil(
+        res.data.result.total / pagination.value.rowsPerPage
+      );
+      total.value = res.data.result.total;
       investigateDis.fecthDirector(data);
     })
     .catch((e) => {
@@ -600,6 +603,18 @@ function filterOptionFnCauseText(val: string, update: Function) {
   });
 }
 
+function getSearch() {
+  pagination.value.page = 1;
+  getList();
+}
+
+watch(
+  () => pagination.value.rowsPerPage,
+  async () => {
+    getSearch();
+  }
+);
+
 /**
  * เช็คข้อมูลจาก props
  * เมื่อมีข้อมูล
@@ -1744,17 +1759,17 @@ onMounted(async () => {
 
   <DialogDirector
     :get-list="getList"
+    :get-search="getSearch"
     v-model:Modal="modal"
     :click-close="clickClose"
     :rows2="investigateDis.rows2"
     v-model:filterKeyword2="filterKeyword2"
     v-model:type="type"
     :filter-table="filterTable"
-    :rows-per-page="rowsPerPage"
-    :page="page"
-    :max-page="maxPage"
+    v-model:pagination="pagination"
+    v-model:total="total"
+    v-model:total-list="totalList"
     :selected-row="rows"
-    @update:pagination="updatePagingProp"
     @returnDirector="returnDirector"
   />
 

src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue

@@ -20,19 +20,15 @@ const option = ref<any[]>(dataInvestigate.statusOptions);
 const filterKeyword = ref<string>("");
 const filterRef = ref<HTMLInputElement | null>(null);
 const statusFilter = ref<string>("NEW");
-const currentPage = ref<number>(1);
-const maxPage = ref<number>(1);
-const page = ref<number>(1);
-const rowsPerPage = ref<number>(10);
 const toptitle = ref<number>(0);
 
-/**
- *pagination ของตาราง
- */
+const total = ref<number>(0);
+const totalList = ref<number>(1);
 const pagination = ref({
-  descending: false,
-  page: page.value,
-  rowsPerPage: rowsPerPage.value,
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
 });
 
 const attrs = ref<any>(useAttrs());
@@ -52,14 +48,17 @@ async function getList() {
   await http
     .get(
       config.API.investigateMain(
-        currentPage.value,
-        rowsPerPage.value,
+        pagination.value.page,
+        pagination.value.rowsPerPage,
         filterKeyword.value,
         statusFilter.value
       )
     )
     .then((res) => {
-      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
+      totalList.value = Math.ceil(
+        res.data.result.total / pagination.value.rowsPerPage
+      );
+      total.value = res.data.result.total;
       toptitle.value = res.data.result.total;
 
       const data = res.data.result.data;
@@ -104,20 +103,20 @@ function filterOptionFn(val: string, update: Function) {
   });
 }
 
-watch(
-  () => currentPage.value,
-  () => {
-    rowsPerPage.value = pagination.value.rowsPerPage;
-    getList();
-  }
-);
+function updatePagination(newPagination: any) {
+  pagination.value.page = 1;
+  pagination.value.rowsPerPage = newPagination.rowsPerPage;
+}
+
+function getSerach() {
+  pagination.value.page = 1;
+  getList();
+}
 
 watch(
   () => pagination.value.rowsPerPage,
-  () => {
-    rowsPerPage.value = pagination.value.rowsPerPage;
-    currentPage.value = 1;
-    getList();
+  async () => {
+    getSerach();
   }
 );
 
@@ -145,7 +144,7 @@ onMounted(async () => {
           option-label="name"
           option-value="id"
           :options="option"
-          @update:model-value="getList()"
+          @update:model-value="getSerach()"
           use-input
           @filter="filterOptionFn"
         >
@@ -160,7 +159,7 @@ onMounted(async () => {
               @click.stop.prevent="
                 (option = dataInvestigate.statusOptions),
                   (statusFilter = 'ALL'),
-                  getList()
+                  getSerach()
               "
               class="cursor-pointer"
             />
@@ -178,7 +177,7 @@ onMounted(async () => {
         ref="filterRef"
         outlined
         placeholder="ค้นหา"
-        @keydown.enter.prevent="getList()"
+        @keydown.enter.prevent="getSerach()"
       >
         <template v-slot:append>
           <q-icon v-if="filterKeyword == ''" name="search" />
@@ -222,8 +221,8 @@ onMounted(async () => {
         class="custom-header-table"
         v-bind="attrs"
         :visible-columns="dataInvestigate.visibleColumns"
-        v-model:pagination="pagination"
         :rows-per-page-options="[10, 25, 50, 100]"
+        @update:pagination="updatePagination"
       >
         <template v-slot:header="props">
           <q-tr :props="props">
@@ -271,7 +270,7 @@ onMounted(async () => {
             <q-td v-for="col in props.cols" :key="col.name" :props="props">
               <div v-if="col.name == 'no'">
                 {{
-                  (currentPage - 1) * Number(pagination.rowsPerPage) +
+                  (pagination.page - 1) * pagination.rowsPerPage +
                   props.rowIndex +
                   1
                 }}
@@ -293,15 +292,17 @@ onMounted(async () => {
           </q-tr>
         </template>
         <template v-slot:pagination="scope">
-          ทั้งหมด {{ toptitle }}รายการ
+          ทั้งหมด {{ 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="getList()"
           ></q-pagination>
         </template>
       </d-table>