ปรับแก้ไข เปลี่ยนแปลงรอบ

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, reactive, watch, onMounted } from "vue";
-import { useQuasar } from "quasar";
+import { date, useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useRoute } from "vue-router";
@@ -29,23 +29,31 @@ const {
 
 const route = useRoute();
 const $q = useQuasar();
-const profileId = ref<string>(
-  route.params.id ? route.params.id.toString() : ""
-);
-const roundRef = ref<Object | null>(null);
-const resonRef = ref<Object | null>(null);
-const effectiveDateRef = ref<Object | null>(null);
-
 const roundOp = ref<any>([]);
-const objectRoundChange: MyObjectRoundChangeRef = {
-  round: roundRef,
-  effectiveDate: effectiveDateRef,
-};
 
+/**Hook */
 onMounted(async () => {
   await fetchDataOption();
 });
 
+/**FormData */
+const formData = reactive<changeRoundEdit>({
+  round: "",
+  date: "",
+  reson: "",
+  effectiveDate: null,
+});
+
+/**Validate ข้อมูล */
+const roundRef = ref<Object | null>(null);
+const resonRef = ref<Object | null>(null);
+const effectiveDateRef = ref<Object | null>(null);
+const objectRoundChange: MyObjectRoundChangeRef = {
+  round: roundRef,
+  effectiveDate: effectiveDateRef,
+  reson: resonRef,
+};
+
 /** Function validateForm */
 function validateForm() {
   const hasError = [];
@@ -64,13 +72,7 @@ function validateForm() {
     console.log(hasError);
   }
 }
-
-const formData = reactive<changeRoundEdit>({
-  round: "",
-  date: "",
-  reson: "",
-  effectiveDate: null,
-});
+const dataToday = ref<Date>(new Date());
 
 /** Function ยืนยันการบันทึกข้อมูล */
 function onSubmit() {
@@ -133,6 +135,45 @@ async function fetchDataOption() {
     });
 }
 
+// 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
+ */
+
+// Pagination - initial pagination
+const initialPagination = ref<any>({
+  sortBy: null,
+  descending: false,
+  page: 1,
+  rowsPerPage: pageSize, // set ตาม page หลักส่งมา
+});
+
+// Pagination - page & change page & get new data
+const currentPage = ref<number>(1);
+watch(
+  [() => currentPage.value, () => initialPagination.value.rowsPerPage],
+  () => {
+    emit(
+      "update:change-page",
+      currentPage.value,
+      initialPagination.value.rowsPerPage,
+      true
+    );
+  }
+);
+const emit = defineEmits(["update:change-page"]);
+// Pagination - update rowsPerPage
+async function updatePagination(newPagination: any) {
+  initialPagination.value = newPagination;
+  currentPage.value = 1; // set current page เป็น 1 เสมอเมื่อเปลี่ยน per row
+}
+
+/**Props */
 const props = defineProps({
   modal: Boolean,
   closeDialog: Function,
@@ -141,6 +182,7 @@ const props = defineProps({
   personId: String,
 });
 
+/**ฟังก์ชั่น ปิดไดอาล็อก */
 function close() {
   if (props.closeDialog) {
     props.closeDialog();
@@ -228,6 +270,11 @@ watch(
                   borderless
                   :enableTimePicker="false"
                   week-start="0"
+                  :min-date="
+                    dataToday
+                      ? new Date(dataToday.getTime() + 24 * 60 * 60 * 1000)
+                      : null
+                  "
                 >
                   <template #year="{ year }">
                     {{ year + 543 }}
@@ -270,10 +317,12 @@ watch(
                 class="col-12 bg-white"
                 outlined
                 stack-label
+                ref="resonRef"
                 v-model="formData.reson"
                 label="เหตุผล"
                 hide-bottom-space
                 type="textarea"
+                :rules="[(val) => !!val || `กรุณากรอกเหตุผล`]"
               ></q-input>
             </div>
           </q-card-section>
@@ -306,8 +355,23 @@ watch(
             dense
             class="custom-header-table"
             :visible-columns="dataStore.visibleColumnsHistory"
-            :rows-per-page-options="[10, 25, 50, 100]"
+            :rows-per-page-options="[5, 10, 25, 50, 100]"
+            :pagination="initialPagination"
+            @update:pagination="updatePagination"
           >
+            <template v-slot:pagination="scope">
+              ทั้งหมด {{ dataStore.total }} รายการ
+              <q-pagination
+                v-model="currentPage"
+                active-color="primary"
+                color="dark"
+                :max-pages="5"
+                size="sm"
+                boundary-links
+                direction-links
+                :max="Number(dataStore.maxPage)"
+              ></q-pagination>
+            </template>
             <template v-slot:header="props">
               <q-tr :props="props">
                 <q-th

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

@@ -150,7 +150,7 @@ export const useChangeRoundDataStore = defineStore(
                 roundStart: e.startTimeMorning,
                 roundEnd: e.leaveTimeAfterNoon,
                 currentRound: `${e.startTimeMorning}-${e.leaveTimeAfterNoon}`,
-                effectiveDate: date2Thai(e.effectiveDate),
+                effectiveDate: date2Thai(e.effectiveDate) ?? "-",
               }));
               console.log(profileId.value);
               console.log(apiData.length);
@@ -171,7 +171,9 @@ export const useChangeRoundDataStore = defineStore(
     const rowsHistory = ref<historyShow[]>([]);
     // paging
     const page = ref<number>(1);
+    const total = ref<number>(0);
     const pageSize = ref<number>(10);
+    const maxPage = ref<number>(0);
     const filter = ref<string>(""); //search data table
     /**
      * ฟังก์ชั่น api เปลี่ยนหน้า
@@ -183,19 +185,19 @@ export const useChangeRoundDataStore = defineStore(
       pageSize.value = await pageSizeVal;
       fetchDatainHistory();
     }
-
+    /**ฟังก์ชั่นดึงดาต้าประวัติ */
     async function fetchDatainHistory() {
       console.log(profileId.value);
       showLoader();
       await http
-        .post(
-          config.API.leaveRoundById(profileId.value),
-          {
-            page: page.value,
-            pageSize: pageSize.value,
-            keyword: filter.value,
-          }
-          // `?page=${page.value}&pageSize=${pageSize.value}&keyword=${filter.value}`
+        .get(
+          config.API.leaveRoundById(profileId.value) +
+            // {
+            //   page: page.value,
+            //   pageSize: pageSize.value,
+            //   keyword: filter.value,
+            // }
+            `?page=${page.value}&pageSize=${pageSize.value}&keyword=${filter.value}`
         )
         .then((res) => {
           const dataHistory = res.data.result.data;
@@ -209,7 +211,9 @@ export const useChangeRoundDataStore = defineStore(
               effectiveDate: date2Thai(e.effectiveDate),
               reson: e.remark ?? "-",
             });
-            console.log(rowsHistory.value);
+            total.value = res.data.result.total;
+            maxPage.value = Math.ceil(total.value / pageSize.value);
+            maxPage.value = maxPage.value < 1 ? 1 : maxPage.value;
           });
         })
         .catch((err) => {
@@ -232,6 +236,8 @@ export const useChangeRoundDataStore = defineStore(
       checkCilck,
       setProfileId,
       changePage,
+      total,
+      maxPage,
     };
   }
 );

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

@@ -37,11 +37,13 @@ const formData = reactive<dataPost>({
 function Openmodal(check: string, detail: any) {
   DataRow.value = detail;
   modal.value = true;
-  console.log(DataRow.value.profileId);
   dataStore.setProfileId(DataRow.value.profileId);
-  console.log(DataRow.value.profileId);
   editCheck.value = check;
-  dataStore.fetchDatainHistory();
+  if (check === "history") {
+    modal.value = true;
+    dataStore.fetchDatainHistory();
+  }
+
   console.log(detail);
 }
 
@@ -58,11 +60,6 @@ function searchData() {
     dialogMessageNotify($q, "กรุณากรอกข้อมูลอย่างน้อย 1 ช่อง");
   }
 }
-
-/** Hook */
-onMounted(() => {
-  // dataStore.fetchDatainHistory();
-});
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">