fix bug pagintion ==> ระบบเปลี่ยนแปลงรอบการปฏิบัติงานของผู้ใช้งาน

src/modules/09_leave/components/03_ChangeRound/DialogForm.vue

@@ -68,8 +68,8 @@ const pageSize = ref<number>(10);
 const initialPagination = ref<any>({
   sortBy: null,
   descending: false,
-  page: 1,
+  page: dataStore.page,
-  rowsPerPage: pageSize, // set ตาม page หลักส่งมา
+  rowsPerPage: dataStore.pageSize, // set ตาม page หลักส่งมา
 });
 
 // Pagination - page & change page & get new data
@@ -77,7 +77,7 @@ const currentPage = ref<number>(1);
 const roundOp = ref<any>([]);
 async function updatePagination(newPagination: any) {
   initialPagination.value = newPagination;
-  currentPage.value = 1; // set current page เป็น 1 เสมอเมื่อเปลี่ยน per row
+  // currentPage.value = 1; // set current page เป็น 1 เสมอเมื่อเปลี่ยน per row
 }
 
 /** Function validateForm */
@@ -103,7 +103,7 @@ function onSubmit() {
     $q,
     () => {
       changeRound();
-      props.closeDialog?.();
+      // props.closeDialog?.();
     },
     "ยืนยันการบันทึกข้อมูล",
     "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
@@ -112,6 +112,7 @@ function onSubmit() {
 
 /** Function เปลี่ยนรอบเวลา*/
 async function changeRound() {
+  showLoader();
   await http
     .post(config.API.leaveRound(), {
       profileId: props.personId,
@@ -121,12 +122,13 @@ async function changeRound() {
     })
     .then(() => {
       success($q, "บันทึกข้อมูลเปลี่ยนรอบเวลา");
+      props.closeDialog?.();
     })
     .catch((err) => {
       messageError($q, err);
     })
     .finally(() => {
-      props.closeDialog?.();
+      hideLoader();
     });
 }
 
@@ -135,7 +137,7 @@ async function changeRound() {
  *
  */
 async function fetchDataOption() {
-  showLoader();
+  props.editCheck !== "history" && showLoader();
   await http
     .get(config.API.leaveRound())
     .then((res) => {
@@ -156,7 +158,7 @@ async function fetchDataOption() {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      props.editCheck !== "history" && hideLoader();
     });
 }
 
@@ -168,8 +170,9 @@ function close() {
 }
 
 watch(
-  [() => currentPage.value, () => initialPagination.value.rowsPerPage],
+  () => initialPagination.value.rowsPerPage,
   () => {
+    currentPage.value = 1;
     emit(
       "update:change-page",
       currentPage.value,
@@ -179,6 +182,15 @@ watch(
   }
 );
 
+function nextPage() {
+  emit(
+    "update:change-page",
+    currentPage.value,
+    initialPagination.value.rowsPerPage,
+    true
+  );
+}
+
 watch(
   () => props.modal,
   async () => {
@@ -188,6 +200,7 @@ watch(
       formData.effectiveDate = null;
     }
     if (props.modal === true) {
+      currentPage.value = 1;
       await fetchDataOption();
     }
   }
@@ -355,7 +368,7 @@ watch(
             dense
             class="custom-header-table"
             :visible-columns="dataStore.visibleColumnsHistory"
-            :rows-per-page-options="[5, 10, 25, 50, 100]"
+            :rows-per-page-options="[1, 10, 25, 50, 100]"
             :pagination="initialPagination"
             @update:pagination="updatePagination"
           >
@@ -370,6 +383,7 @@ watch(
                 boundary-links
                 direction-links
                 :max="Number(dataStore.maxPage)"
+                @update:model-value="nextPage"
               ></q-pagination>
             </template>
             <template v-slot:header="props">

src/modules/09_leave/stores/ChangeRoundStore.ts

@@ -122,17 +122,16 @@ export const useChangeRoundDataStore = defineStore(
     const maxPageMain = ref<number>(0);
     const totalListMain = ref<number>(0);
 
-    function fetchDataForCardId(dataDetail: any) {
+    async function fetchDataForCardId(dataDetail: any) {
       if (dataDetail) {
-        rows.value = [];
         showLoader();
-        http
+        await http
           .post(config.API.leaveSearch(), {
             citizenId: dataDetail.cardId || "", //เลขประจำตัวประชาชน
             firstname: dataDetail.firstName || "", //ชื่อจริง
             lastname: dataDetail.lastName || "", //นามสกุล
-            page: dataDetail.page || 1, //*หน้า
+            page: dataDetail.page, //หน้า
-            pageSize: dataDetail.pageSize || 10, //*จำนวนแถวต่อหน้า
+            pageSize: dataDetail.pageSize || 10, //จำนวนแถวต่อหน้า
             keyword: dataDetail.keyword || "", //keyword ค้นหา
           })
           .then((res) => {
@@ -160,7 +159,7 @@ export const useChangeRoundDataStore = defineStore(
           .catch((e) => {
             messageError($q, e);
           })
-          .finally(async () => {
+          .finally(() => {
             hideLoader();
           });
       }
@@ -179,13 +178,13 @@ export const useChangeRoundDataStore = defineStore(
      * @param pageSizeVal pagesize
      */
     async function changePage(pageVal: number, pageSizeVal: number) {
-      page.value = await pageVal;
+      page.value = pageVal;
-      pageSize.value = await pageSizeVal;
+      pageSize.value = pageSizeVal;
       fetchDatainHistory();
     }
     /**ฟังก์ชั่นดึงดาต้าประวัติ */
     async function fetchDatainHistory() {
-      console.log(profileId.value);
+      rowsHistory.value = [];
       showLoader();
       await http
         .get(
@@ -194,7 +193,6 @@ export const useChangeRoundDataStore = defineStore(
         )
         .then((res) => {
           const dataHistory = res.data.result.data;
-          rowsHistory.value = [];
           dataHistory.map((e: DataInterface) => {
             rowsHistory.value.push({
               round: e.round,
@@ -206,9 +204,7 @@ export const useChangeRoundDataStore = defineStore(
             });
             total.value = res.data.result.total;
             maxPage.value = Math.ceil(total.value / pageSize.value);
-            maxPage.value = maxPage.value < 1 ? 1 : maxPage.value;
           });
-          console.log(rowsHistory.value);
         })
         .catch((err) => {
           messageError($q, err);
@@ -232,6 +228,8 @@ export const useChangeRoundDataStore = defineStore(
       changePage,
       total,
       maxPage,
+      page,
+      pageSize,
 
       totalListMain,
       maxPageMain,

src/modules/09_leave/views/03_ChangeRoundMain.vue

@@ -45,14 +45,15 @@ const formData = reactive<DataPost>({
  * @param check action edit,history
  * @param detail รายละเอียดข้อมูลรอบการปฏิบัติของผู้ใช้งาน
  */
-function Openmodal(check: string, detail: any) {
+async function Openmodal(check: string, detail: any) {
   DataRow.value = detail;
   modal.value = true;
   dataStore.setProfileId(DataRow.value.profileId);
   editCheck.value = check;
   if (check === "history") {
     modal.value = true;
-    dataStore.fetchDatainHistory();
+    dataStore.changePage(1, dataStore.pageSize);
+    // dataStore.fetchDatainHistory();
   }
 }
 
@@ -71,15 +72,15 @@ async function fetchDataCalendarWork(id: string) {
       messageError($q, err);
     })
     .finally(() => {
-      modalFix.value = true;
       hideLoader();
     });
 }
 
 const detailByid = ref();
 async function OpenmodalFix(detail: any) {
-  await fetchDataCalendarWork(detail.profileId);
   detailByid.value = detail;
+  modalFix.value = true;
+  await fetchDataCalendarWork(detail.profileId);
 }
 
 /** Function closePopup */
@@ -95,7 +96,8 @@ function save() {
       .put(config.API.leaveWorkByid(detailByid.value.profileId), {
         work: dateWork.value,
       })
-      .then(() => {
+      .then(async () => {
+        // await searchData();
         success($q, "บันทึกข้อมูลสำเร็จ");
         closeDialog();
       })
@@ -113,14 +115,13 @@ function save() {
  * @param newPagination ข้อมูล Pagination ใหม่
  */
 function updatePagination(newPagination: any) {
-  formData.page = 1;
   formData.pageSize = newPagination.rowsPerPage;
 }
 
 /** Function ค้นหาข้อมูล */
-function searchData() {
+async function searchData() {
   if (formData.cardId || formData.firstName || formData.lastName) {
-    dataStore.fetchDataForCardId(formData);
+    await dataStore.fetchDataForCardId(formData);
   } else {
     dialogMessageNotify($q, "กรุณากรอกข้อมูลอย่างน้อย 1 ช่อง");
   }
@@ -129,6 +130,7 @@ function searchData() {
 watch(
   () => formData.pageSize,
   () => {
+    formData.page = 1;
     searchData();
   }
 );