แก้ไข paginationApi รายการลงเวลาพิเศษ

src/modules/09_leave/views/SpecialTimeMain.vue

@@ -8,7 +8,7 @@ import DialogReason from "@/components/Dialogs/PopupReason.vue";
 import DialogApprove from "@/modules/09_leave/components/4_specialTime/DialogApprove.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
-
+import type { DataDateMonthObject } from "@/modules/09_leave/interface/request/specialTime";
 import { useRouter } from "vue-router";
 import { identity } from "@fullcalendar/core/internal";
 
@@ -28,6 +28,7 @@ const name = ref<string>("");
 const id = ref<string>("");
 const dateDialog = ref<string>("");
 const dateFixDialog = ref<string>("");
+const dateYear = ref<number>(new Date().getFullYear());
 
 /**ฟังก์ชั่นไม่อนุมัติ */
 const unapprove = async (fullname: string, personId: string) => {
@@ -35,6 +36,7 @@ const unapprove = async (fullname: string, personId: string) => {
   dialogTitle.value = " ไม่อนุมัติการลงเวลาพิเศษของ" + fullname;
   name.value = fullname;
   modalUnapprove.value = true;
+
   // rejectData();
 };
 
@@ -79,35 +81,20 @@ const clickSave = async (reason: string) => {
     .catch((e) => {
       messageError($q, e);
     })
-    .finally(async () => {});
+    .finally(async () => {
+      dataSpecialTime.fetchData();
+    });
+
   console.log(reason);
 };
 
-// ค้นหาในตาราง
-const filterKeyword = ref<string>("");
-const filterRef = ref<HTMLInputElement | null>(null);
-const resetFilter = () => {
-  filterKeyword.value = "";
-  if (filterRef.value) {
-    filterRef.value.focus();
-  }
-};
-
 // paging
-const page = ref<number>(1);
 const pageSize = ref<number>(10);
-const filter = ref<string>(""); //search data table
 /**
  * ฟังก์ชั่น api เปลี่ยนหน้า
  * @param pageVal page
  * @param pageSizeVal pagesize
  */
-async function changePage(pageVal: number, pageSizeVal: number) {
-  // page.value = await pageVal;
-  // pageSize.value = await pageSizeVal;
-  // dataSpecialTime.fetchData();
-  console.log("test");
-}
 // Pagination - initial pagination
 const initialPagination = ref<any>({
   sortBy: null,
@@ -123,21 +110,36 @@ watch(
   async () => {
     dataSpecialTime.page = currentPage.value;
     await dataSpecialTime.fetchData();
-    // emit(
-    //   "update:change-page",
-    //   currentPage.value,
-    //   initialPagination.value.rowsPerPage,
-    //   true
-    // );
   }
 );
+
 // Pagination - update rowsPerPage
-async function updatePagination(newPagination: any) {
+async function updatePagination(initialPagination: any) {
   currentPage.value = 1;
-  dataSpecialTime.pageSize = initialPagination.value.rowsPerPage;
+  dataSpecialTime.pageSize = initialPagination.rowsPerPage;
   dataSpecialTime.page = 1; // set current page เป็น 1 เสมอเมื่อเปลี่ยน per row
 }
 
+// ค้นหาในตาราง
+const filterKeyword = ref<string>("");
+const filterRef = ref<HTMLInputElement | null>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  dataSpecialTime.filter = filterKeyword.value;
+  dataSpecialTime.fetchData();
+  if (filterRef.value) {
+    filterRef.value.focus();
+  }
+};
+/** function ค้นหาข้อมูลแล้วอัปเดท*/
+function filterFn() {
+  updatePagination(filterKeyword.value);
+  console.log(filterKeyword.value);
+  dataSpecialTime.filter = filterKeyword.value;
+  dataSpecialTime.pageSize = pageSize.value;
+  dataSpecialTime.fetchData();
+}
+
 /**Hook */
 onMounted(async () => {
   console.log("test");
@@ -145,11 +147,23 @@ onMounted(async () => {
 });
 
 /** Function Date */
-const selectedDate = ref<string>("");
 const dateMonth = ref<any>({
   month: new Date().getMonth(),
   year: new Date().getFullYear(),
 });
+const updateMonth = async (e: DataDateMonthObject) => {
+  // console.log(dateMonth.value);
+  if (e != null) {
+    dateYear.value = e.year;
+    dateYear.value = dataSpecialTime.year;
+    dataSpecialTime.month = dateMonth.value.month + 1;
+    dataSpecialTime.year = dateMonth.value.year;
+    // filterKeyword.value = "";
+  }
+  await dataSpecialTime.fetchData();
+};
+
+//แปลงเดือนเป็นไทย
 const monthYearThai = (val: any) => {
   if (val == null) return "";
   else return monthYear2Thai(val.month, val.year);
@@ -164,11 +178,12 @@ const monthYearThai = (val: any) => {
     <div class="row col-12 q-col-gutter-sm q-mb-sm">
       <div class="q-gutter-sm">
         <datepicker
-          v-model="selectedDate"
+          v-model="dateMonth"
           :locale="'th'"
           autoApply
           month-picker
           :enableTimePicker="false"
+          @update:modelValue="updateMonth"
         >
           <template #year="{ year }">{{ year + 543 }}</template>
           <template #year-overlay-value="{ value }">{{
@@ -205,7 +220,8 @@ const monthYearThai = (val: any) => {
         ref="filterRef"
         outlined
         debounce="300"
-        placeholder="ค้นหา"
+        placeholder="ค้นหาชื่อ-นามสกุล"
+        @keydown.enter.prevent="filterFn"
       >
         <template v-slot:append>
           <q-icon v-if="filterKeyword == ''" name="search" />
@@ -246,7 +262,7 @@ const monthYearThai = (val: any) => {
         :paging="false"
         dense
         :visible-columns="dataSpecialTime.visibleColumns"
-        :rows-per-page-options="[5, 10, 25, 50, 100]"
+        :rows-per-page-options="[10, 25, 50, 100]"
         v-model:pagination="initialPagination"
         @update:pagination="updatePagination"
       >
@@ -275,7 +291,11 @@ const monthYearThai = (val: any) => {
           <q-tr :props="props" class="cursor-pointer">
             <q-td v-for="col in props.cols" :key="col.name" :props="props">
               <div v-if="col.name == 'no'">
-                {{ props.rowIndex + 1 }}
+                {{
+                  (dataSpecialTime.page - 1) * dataSpecialTime.pageSize +
+                  props.rowIndex +
+                  1
+                }}
               </div>
               <div v-else>
                 {{ col.value }}