แก้ ส่ง id เเละ paging

src/modules/01_masterdata/views/indicatorByPlan.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted } from "vue";
+import { ref, reactive, onMounted,watch } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
 import { useRouter, useRoute } from "vue-router";
 
@@ -30,6 +30,15 @@ const dataHistory = ref<DataHistory[]>([]);
 const modalHistory = ref<boolean>(false);
 const isAll = ref<boolean>(false);
 
+const total = ref<number>(0);
+const totalList = ref<number>(1);
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+
 /** หัวตาราง */
 const rows = ref<IndicatorType[]>([]);
 const columns = ref<QTableProps["columns"]>([
@@ -63,12 +72,8 @@ const roundOp = ref<DataOption[]>([
   { id: "OCT", name: "รอบตุลาคม" },
 ]);
 
-const totalList = ref<number>(1);
-
 const year = ref<number | null>(new Date().getFullYear());
 const nodeData = reactive<any>({
-  page: 1,
-  pageSize: 10,
   round: "",
   nodeId: null,
   node: null,
@@ -87,12 +92,15 @@ function fetchList() {
         nodeId: nodeData.nodeId,
         period: nodeData.round,
         year: year.value?.toString(),
-        pageSize: nodeData.pageSize,
+        pageSize: pagination.value.rowsPerPage,
-        page: nodeData.page,
+        page: pagination.value.page,
       })
       .then((res) => {
         const data = res.data.result.data;
-        totalList.value = Math.ceil(res.data.result.total / nodeData.pageSize);
+        totalList.value = Math.ceil(
+        res.data.result.total / pagination.value.rowsPerPage
+      );
+       total.value = res.data.result.total;
         rows.value = data;
       })
       .catch((err) => {
@@ -147,13 +155,7 @@ function updateSelectedTreeMain(data: any) {
     nodeData.node = data.orgLevel;
     nodeData.nodeId = data.orgTreeId;
   }
-  fetchListProjectNew();
+  getSearch();
-}
-
-/** ดึงรายละเอียดโครงสร้าง */
-function fetchListProjectNew() {
-  nodeData.page = 1;
-  fetchList();
 }
 
 /** delete */
@@ -177,7 +179,7 @@ async function deleteData(idData: string) {
 /** clear input filter */
 function clearFilter() {
   nodeData.keyword = "";
-  fetchListProjectNew();
+  getSearch();
 }
 
 /**
@@ -200,6 +202,25 @@ function onClickHistory(id: string) {
       hideLoader();
     });
 }
+
+function updatePagination(newPagination: any) {
+  pagination.value.page = 1;
+  pagination.value.rowsPerPage = newPagination.rowsPerPage;
+
+}
+
+function getSearch() {
+  pagination.value.page = 1;
+  fetchList();
+}
+
+watch(
+  () => pagination.value.rowsPerPage,
+  async () => {
+    getSearch();
+  }
+);
+
 onMounted(() => {
   fetchTree();
 });
@@ -284,7 +305,7 @@ onMounted(() => {
             year-picker
             :enableTimePicker="false"
             style="width: 150px"
-            @update:model-value="fetchListProjectNew"
+            @update:model-value="getSearch"
           >
             <template #year="{ year }">{{ year + 543 }}</template>
             <template #year-overlay-value="{ value }">{{
@@ -309,7 +330,7 @@ onMounted(() => {
                   <q-icon
                     name="cancel"
                     @click.stop.prevent="
-                      (year = null), (nodeData.page = 1), fetchListProjectNew()
+                      (year = null),getSearch()
                     "
                     class="cursor-pointer"
                   />
@@ -327,14 +348,14 @@ onMounted(() => {
             option-value="id"
             emit-value
             map-options
-            @update:model-value="fetchListProjectNew"
+            @update:model-value="getSearch"
             style="min-width: 120px"
           >
             <template v-if="nodeData.round" v-slot:append>
               <q-icon
                 name="cancel"
                 @click.stop.prevent="
-                  (nodeData.round = ''), fetchListProjectNew()
+                  (nodeData.round = ''), getSearch()
                 "
                 class="cursor-pointer"
               />
@@ -360,7 +381,7 @@ onMounted(() => {
             v-model="isAll"
             label="แสดงทั้งหมด"
             color="primary"
-            @update:model-value="fetchListProjectNew"
+            @update:model-value="getSearch"
           >
             <q-tooltip
               >แสดงตำแหน่งทั้งหมดภายใต้หน่วยงาน/ส่วนราชการที่เลือก</q-tooltip
@@ -374,7 +395,7 @@ onMounted(() => {
             outlined
             style="width: 150px"
             placeholder="ค้นหา"
-            @keydown.enter.prevent="fetchListProjectNew"
+            @keydown.enter.prevent="getSearch"
           >
             <template v-slot:append>
               <q-icon v-if="nodeData.keyword == ''" name="search" />
@@ -414,6 +435,7 @@ onMounted(() => {
             dense
             class="custom-header-table"
             :rows-per-page-options="[10, 25, 50, 100]"
+            @update:pagination="updatePagination"
             :visible-columns="visibleColumns"
           >
             <template v-slot:header="props">
@@ -531,6 +553,20 @@ onMounted(() => {
                 </q-td>
               </q-tr>
             </template>
+            <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="fetchList"
+              ></q-pagination>
+            </template>
           </d-table>
         </div>
       </div>

src/modules/04_registryPerson/views/listView.vue

@@ -342,6 +342,11 @@ watch(selectNode, () => {
 /**
  * hook เมื่อมีการเรียกใช้ Components
  */
+
+function getSearch() {
+  store.formFilter.page = 1;
+  fetchDataPerson();
+}
 onMounted(async () => {
   await Promise.all([selectType(), fetchTree()]);
 });
@@ -543,7 +548,7 @@ onMounted(async () => {
               v-model="store.formFilter.isAll"
               color="primary"
               label="แสดงตำแหน่งทั้งหมด"
-              @update:model-value="fetchDataPerson"
+              @update:model-value="getSearch"
             />
           </div>
 
@@ -555,20 +560,20 @@ onMounted(async () => {
               v-model="store.formFilter.isProbation"
               color="primary"
               label="ทดลองปฏิบัติหน้าที่ราชการ"
-              @update:model-value="fetchDataPerson"
+              @update:model-value="getSearch"
             />
             <q-toggle
               v-model="store.formFilter.isShowRetire"
               color="primary"
               label="แสดงข้อมูลผู้พ้นจากราชการ"
-              @update:model-value="fetchDataPerson"
+              @update:model-value="getSearch"
             />
             <q-toggle
               v-if="store.formFilter.nodeId"
               v-model="store.formFilter.isAll"
               color="primary"
               label="แสดงตำแหน่งทั้งหมด"
-              @update:model-value="fetchDataPerson"
+              @update:model-value="getSearch"
             />
           </div>
         </div>

src/modules/05_placement/components/PersonalList/Table.vue

@@ -1170,7 +1170,7 @@ onMounted(async () => {
                       color="info"
                       icon="info"
                       size="sm"
-                      @click="onclickViewinfo(props.row.personalId)"
+                      @click="onclickViewinfo(props.row.profileId)"
                       ><q-tooltip>ดูข้อมูลทะเบียนประวัติ</q-tooltip></q-btn
                     >
                   </div>

src/modules/05_placement/components/probation/MainProbation.vue

@@ -593,7 +593,7 @@ onMounted(async () => {
           dense
           class="custom-header-table"
           :visible-columns="visibleColumns"
-          :rows-per-page-options="[10, 25, 50, 100]"
+          :rows-per-page-options="[1, 25, 50, 100]"
           @update:pagination="updatePaginationMain"
         >
           <template v-slot:header="props">

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

@@ -57,7 +57,6 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
         let data = res.data.result.data;
         total.value = res.data.result.total;
         maxPage.value = await Math.ceil(total.value / pageSize.value);
-        maxPage.value = maxPage.value < 1 ? 1 : maxPage.value;
         rows.value = [];
         data.map((e: any) => {
           rows.value.push({
@@ -255,6 +254,7 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
     pageSize,
     month,
     filter,
+    convertStatus
     // changeMonth,
   };
 });

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { useQuasar } from "quasar";
+import type { QTableProps } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -17,11 +18,25 @@ import type {
 import DialogReason from "@/components/Dialogs/PopupReason.vue";
 import DialogApprove from "@/modules/09_leave/components/4_specialTime/DialogApprove.vue";
 
-const dataSpecialTime = useSpecialTimeStore();
 const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
-const { hideLoader, monthYear2Thai, messageError, showLoader, success } = mixin;
+const store = useSpecialTimeStore();
+const {
+  hideLoader,
+  monthYear2Thai,
+  messageError,
+  showLoader,
+  success,
+  date2Thai,
+} = mixin;
 const emit = defineEmits(["update:change-page"]);
+const rows = ref<any[]>([]);
+const toDay = ref<Date>(new Date());
+const monthToday = toDay.value.getMonth();
+const yearToday = toDay.value.getFullYear();
+
+const month = ref<number>(monthToday + 1);
+const year = ref<number>(yearToday);
 
 /**ตัวแปรที่ใช้ */
 const modalUnapprove = ref<boolean>(false);
@@ -42,14 +57,13 @@ const dateMonth = ref<DataDateMonthObject>({
   year: new Date().getFullYear(),
 });
 
-// paging
+const total = ref<number>(0);
-const currentPage = ref<number>(1);
+const totalList = ref<number>(1);
-const pageSize = ref<number>(10);
+const pagination = ref({
-const initialPagination = ref<Pagination>({
+  sortBy: "createdAt",
-  sortBy: null,
+  descending: true,
-  descending: false,
   page: 1,
-  rowsPerPage: pageSize.value, // set ตาม page หลักส่งมา
+  rowsPerPage: 10,
 });
 
 // ค้นหาในตาราง
@@ -57,13 +71,88 @@ const filterKeyword = ref<string>("");
 const filterRef = ref<HTMLInputElement | null>(null);
 const resetFilter = () => {
   filterKeyword.value = "";
-  dataSpecialTime.filter = filterKeyword.value;
+  fetchData();
-  dataSpecialTime.fetchData();
   if (filterRef.value) {
     filterRef.value.focus();
   }
 };
 
+const visibleColumns = ref<String[]>([
+  "no",
+  "fullname",
+  "date",
+  "dateFix",
+  "timeMorning",
+  "timeAfternoon",
+  "description",
+]);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "center",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "date",
+    align: "left",
+    label: "วันที่ยื่นเรื่อง",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "dateFix",
+    align: "left",
+    label: "วันที่ขอแก้ไข",
+    sortable: true,
+    field: "dateFix",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "timeMorning",
+    align: "left",
+    label: "ช่วงเช้า",
+    sortable: true,
+    field: "timeMorning",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "timeAfternoon",
+    align: "left",
+    label: "ช่วงบ่าย",
+    sortable: true,
+    field: "timeAfternoon",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "description",
+    align: "left",
+    label: "เหตุผล",
+    sortable: true,
+    field: "description",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
 /**
  * ฟังก์ชั่นไม่อนุมัติ
  * @param fullname ชื่อ
@@ -117,26 +206,11 @@ async function clickSave(reason: string) {
       messageError($q, e);
     })
     .finally(async () => {
-      await dataSpecialTime.fetchData();
+      await fetchData();
       hideLoader();
     });
 }
 
-async function updatePagination(initialPagination: any) {
-  currentPage.value = 1;
-  dataSpecialTime.pageSize = initialPagination.rowsPerPage;
-  dataSpecialTime.page = 1; // set current page เป็น 1 เสมอเมื่อเปลี่ยน per row
-}
-
-/** function ค้นหาข้อมูลแล้วอัปเดท*/
-function filterFn() {
-  updatePagination(filterKeyword.value);
-  console.log(filterKeyword.value);
-  dataSpecialTime.filter = filterKeyword.value;
-  dataSpecialTime.pageSize = pageSize.value;
-  dataSpecialTime.fetchData();
-}
-
 /**
  * ดึงข้อมูลตามปี
  * @param e ปี
@@ -144,10 +218,10 @@ function filterFn() {
 async function updateMonth(e: DataDateMonthObject) {
   if (e != null) {
     dateYear.value = e.year;
-    dateYear.value = dataSpecialTime.year;
+    dateYear.value = year.value;
-    dataSpecialTime.month = dateMonth.value.month + 1;
+    month.value = dateMonth.value.month + 1;
-    dataSpecialTime.year = dateMonth.value.year;
+    year.value = dateMonth.value.year;
-    await dataSpecialTime.fetchData();
+    getSearch();
   }
 }
 
@@ -157,23 +231,93 @@ function monthYearThai(val: any) {
   else return monthYear2Thai(val.month, val.year);
 }
 
+function updatePagination(newPagination: any) {
+  pagination.value.page = 1;
+  pagination.value.rowsPerPage = newPagination.rowsPerPage;
+}
+
+function getSearch() {
+  pagination.value.page = 1;
+  fetchData();
+}
+
 watch(
-  [() => currentPage.value, () => initialPagination.value.rowsPerPage],
+  () => pagination.value.rowsPerPage,
   async () => {
-    dataSpecialTime.page = currentPage.value;
+    getSearch();
-    await dataSpecialTime.fetchData();
   }
 );
 
+/**
+ * ฟังชั้นเรียกดูข้อมูล
+ */
+async function fetchData() {
+  showLoader();
+  await http
+    .get(
+      config.API.specialTime() +
+        `?year=${year.value}&month=${month.value}&page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}&keyword=${filterKeyword.value}`
+    )
+    .then(async (res) => {
+      let data = res.data.result.data;
+      total.value = res.data.result.total;
+      totalList.value = Math.ceil(
+        res.data.result.total / pagination.value.rowsPerPage
+      );
+      total.value = res.data.result.total;
+      rows.value = [];
+      data.map((e: any) => {
+        rows.value.push({
+          id: e.id,
+          fullname: e.fullName,
+          date: date2Thai(new Date(e.createdAt), false, true),
+          dateFix: date2Thai(new Date(e.checkDate)),
+          timeMorning:
+            e.startTimeMorning == null
+              ? "-"
+              : e.checkInEdit == true
+              ? e.startTimeMorning + " - " + e.endTimeMorning
+              : "-",
+          timeAfternoon:
+            e.startTimeAfternoon == null
+              ? "-"
+              : e.checkOutEdit == true
+              ? e.startTimeAfternoon + " - " + e.endTimeAfternoon
+              : "-",
+          startTimeMorning: e.startTimeMorning,
+          endTimeMorning: e.endTimeMorning,
+          startTimeAfternoon: e.startTimeAfternoon,
+          endTimeAfternoon: e.endTimeAfternoon,
+          checkIn: e.checkInTime,
+          checkOut: e.checkOutTime,
+          status: e.status,
+          checkInStatus: store.convertStatus(e.checkInStatus),
+          checkOutStatus: store.convertStatus(e.checkOutStatus),
+          reason: e.reason,
+          description: e.description,
+          checkInEdit: e.checkInEdit,
+          checkOutEdit: e.checkOutEdit,
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+      console.log(month.value);
+    });
+}
+
 /**Hook */
 onMounted(async () => {
   //อัพเดทเป็นวันปัจจุบันเมื่อเข้าหน้านี้
   const toDay = ref<Date>(new Date());
   const monthToday = toDay.value.getMonth();
   const yearToday = toDay.value.getFullYear();
-  dataSpecialTime.month = monthToday + 1;
+  month.value = monthToday + 1;
-  dataSpecialTime.year = yearToday;
+  year.value = yearToday;
-  await dataSpecialTime.fetchData();
+  await fetchData();
 });
 </script>
 
@@ -228,7 +372,7 @@ onMounted(async () => {
         outlined
         debounce="300"
         placeholder="ค้นหาชื่อ-นามสกุล"
-        @keydown.enter.prevent="filterFn"
+        @keydown.enter.prevent="getSearch()"
       >
         <template v-slot:append>
           <q-icon v-if="filterKeyword == ''" name="search" />
@@ -242,7 +386,7 @@ onMounted(async () => {
       </q-input>
 
       <q-select
-        v-model="dataSpecialTime.visibleColumns"
+        v-model="visibleColumns"
         multiple
         outlined
         dense
@@ -250,7 +394,7 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
         emit-value
         map-options
-        :options="dataSpecialTime.columns"
+        :options="columns"
         option-value="name"
         options-cover
         style="min-width: 150px"
@@ -260,29 +404,29 @@ onMounted(async () => {
 
     <div class="col-12">
       <d-table
-        :columns="dataSpecialTime.columns"
+        :columns="columns"
-        :rows="dataSpecialTime.rows"
+        :rows="rows"
         row-key="tb-list"
         flat
         bordered
         :paging="false"
         dense
-        :visible-columns="dataSpecialTime.visibleColumns"
+        :visible-columns="visibleColumns"
         :rows-per-page-options="[10, 25, 50, 100]"
-        v-model:pagination="initialPagination"
         @update:pagination="updatePagination"
       >
         <template v-slot:pagination="scope">
-          ทั้งหมด {{ dataSpecialTime.total }} รายการ
+          ทั้งหมด {{ total }} รายการ
           <q-pagination
-            v-model="currentPage"
+            v-model="pagination.page"
             active-color="primary"
             color="dark"
-            :max-pages="5"
+            :max="Number(totalList)"
             size="sm"
             boundary-links
             direction-links
-            :max="Number(dataSpecialTime.maxPage)"
+            :max-pages="5"
+            @update:model-value="fetchData()"
           ></q-pagination>
         </template>
         <template v-slot:header="props">
@@ -349,7 +493,7 @@ onMounted(async () => {
             <q-td v-for="col in props.cols" :key="col.name" :props="props">
               <div v-if="col.name == 'no'">
                 {{
-                  (dataSpecialTime.page - 1) * dataSpecialTime.pageSize +
+                  (pagination.page - 1) * pagination.rowsPerPage +
                   props.rowIndex +
                   1
                 }}

src/modules/16_positionEmployee/components/DialogSelectPerson.vue

@@ -337,6 +337,11 @@ function searchData() {
     });
 }
 
+function getSearch() {
+  page.value = 1;
+  searchData();
+}
+
 /**
  * function update PageSize
  */
@@ -405,12 +410,12 @@ watch(
   }
 );
 
-/**
+watch(
- * callback function ทำงานการค้นหาข้อมุลคนครองเมื่อมีการ update Pagination
+  () => pageSize.value,
- */
+  async () => {
-watch([() => page.value, () => pageSize.value], () => {
+    getSearch();
-  searchData();
+  }
-});
+);
 </script>
 
 <template>
@@ -600,7 +605,7 @@ watch([() => page.value, () => pageSize.value], () => {
                       color="teal-5"
                       class="full-height"
                       icon="search"
-                      @click="searchData"
+                      @click="getSearch()"
                     />
                   </div>
 
@@ -689,6 +694,7 @@ watch([() => page.value, () => pageSize.value], () => {
                           size="sm"
                           boundary-links
                           direction-links
+                          @update:model-value="searchData"
                         ></q-pagination>
                       </template>
                     </d-table>

src/modules/19_condition/view/Main.vue

@@ -403,7 +403,7 @@ onMounted(async () => {
               flat
               bordered
               dense
-              :rows-per-page-options="[10, 25, 50, 100]"
+              :rows-per-page-options="[1, 25, 50, 100]"
               :loading="isLoadTable"
               v-model:pagination="pagination"
               @update:pagination="updatePagination"