fix bug

src/modules/09_leave/components/04_SpecialTime/DialogApprove.vue

@@ -7,10 +7,8 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore";
 
-import type {
-  dataRowRound,
-  MyObjectRoundRef,
-} from "@/modules/09_leave/interface/response/specialTime";
+import type { dataRowRound } from "@/modules/09_leave/interface/response/specialTime";
+import type { DataOption } from "@/modules/09_leave/interface/index/Main";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
@@ -19,7 +17,7 @@ const $q = useQuasar();
 const SpecialTimeStore = useSpecialTimeStore();
 const mixin = useCounterMixin();
 const { dialogConfirm, showLoader, success, messageError, hideLoader } = mixin;
-const option = ref<any[]>(SpecialTimeStore.optionStatus);
+const option = ref<DataOption[]>(SpecialTimeStore.optionStatus);
 
 /** props*/
 const props = defineProps({
@@ -32,14 +30,9 @@ const props = defineProps({
   checkOutStatus: { type: String, default: "" },
   closeDialog: { type: Function, default: () => {} },
   detailData: Object,
+  fetchData: { type: Function, default: () => {} },
 });
 
-const checkInRef = ref<Object | null>(null);
-const checkOutRef = ref<Object | null>(null);
-const checkInStatusRef = ref<Object | null>(null);
-const checkOutStatusRef = ref<Object | null>(null);
-const reasonRef = ref<Object | null>(null);
-
 const formData = reactive<dataRowRound>({
   checkIn: "",
   checkOut: "",
@@ -50,73 +43,35 @@ const formData = reactive<dataRowRound>({
   checkOutEdit: false,
 });
 
-const objectRound: MyObjectRoundRef = {
-  checkIn: checkInRef,
-  checkOut: checkOutRef,
-  checkInStatus: checkInStatusRef,
-  checkOutStatus: checkOutStatusRef,
-  note: reasonRef,
-};
-
-/** function validateFom*/
-function validateForm() {
-  const hasError = [];
-  for (const key in objectRound) {
-    if (Object.prototype.hasOwnProperty.call(objectRound, key)) {
-      const property = objectRound[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    onSubmit();
-  }
-}
-
 /** function confrim*/
-function onSubmit() {
-  dialogConfirm(
-    $q,
-    async () => {
-      await approveData();
-      props.closeDialog?.();
-    },
-    "ยืนยันการบันทึกข้อมูล",
-    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
-  );
-}
-
-/** function บันทึกข้อมูล*/
-async function approveData() {
-  showLoader();
-  const body = {
-    checkInTime: formData.checkIn,
-    checkOutTime: formData.checkOut,
-    checkInStatus: formData.checkInStatus,
-    checkOutStatus: formData.checkOutStatus,
-    reason: formData.note,
-  };
-  await http
-    .put(config.API.specialTimeApprove(props.id), body)
-    .then(() => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      SpecialTimeStore.fetchData();
-      hideLoader();
-    });
+async function onSubmit() {
+  dialogConfirm($q, async () => {
+    showLoader();
+    await http
+      .put(config.API.specialTimeApprove(props.id), {
+        checkInTime: formData.checkIn,
+        checkOutTime: formData.checkOut,
+        checkInStatus: formData.checkInStatus,
+        checkOutStatus: formData.checkOutStatus,
+        reason: formData.note,
+      })
+      .then(async () => {
+        await props.fetchData();
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        props.closeDialog?.();
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        hideLoader();
+      });
+  });
 }
 
 /** function closeDialog*/
 function close() {
-  if (props.closeDialog) {
-    props.closeDialog();
-  }
+  props.closeDialog();
 }
 
 /**
@@ -127,7 +82,7 @@ function close() {
 function filterOptionFn(val: string, update: Function) {
   update(() => {
     option.value = SpecialTimeStore.optionStatus.filter(
-      (e: any) => e.name.search(val) !== -1
+      (e: DataOption) => e.name.search(val) !== -1
     );
   });
 }
@@ -176,7 +131,7 @@ watch(
 <template>
   <q-dialog v-model="props.modal" persistent>
     <q-card style="width: 350px" class="bg-grey-11">
-      <form @submit.prevent="validateForm">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
         <DialogHeader
           :tittle="
             props.editCheck === 'PENDING'
@@ -269,7 +224,10 @@ watch(
                 option-label="name"
                 label="สถานะ"
                 use-input
+                hide-selected
+                fill-input
                 @filter="filterOptionFn"
+                class="inputgreen"
               >
                 <template v-slot:no-option>
                   <q-item>
@@ -302,19 +260,30 @@ watch(
                 hide-bottom-space
                 full-width
                 v-model="formData.checkOutStatus"
-                :options="SpecialTimeStore.optionStatus"
+                :options="option"
                 option-value="id"
                 option-label="name"
                 label="สถานะ"
                 use-input
+                hide-selected
+                fill-input
+                class="inputgreen"
+                @filter="filterOptionFn"
               >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
               </q-select>
             </div>
           </div>
 
           <q-input
             ref="reasonRef"
-            class="col-12 bg-white q-ma-md"
+            class="col-12 bg-white q-ma-md inputgreen"
             outlined
             stack-label
             :rules="[(val:string) => !!val || 'กรุณาเหตุผล']"
@@ -327,20 +296,12 @@ watch(
         <q-separator color="grey-4" />
         <div class="q-pa-xs">
           <div class="row justify-end">
-            <q-btn
-              dense
-              unelevated
-              label="บันทึก"
-              color="public"
-              id="onSubmit"
-              type="submit"
-              class="q-px-md"
-            >
+            <q-btn label="บันทึก" color="public" id="onSubmit" type="submit">
               <q-tooltip>บันทึก</q-tooltip>
             </q-btn>
           </div>
         </div>
-      </form>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>

src/modules/09_leave/views/04_SpecialTimeMain.vue

@@ -69,13 +69,6 @@ const pagination = ref({
 // ค้นหาในตาราง
 const filterKeyword = ref<string>("");
 const filterRef = ref<HTMLInputElement | null>(null);
-const resetFilter = () => {
-  filterKeyword.value = "";
-  fetchData();
-  if (filterRef.value) {
-    filterRef.value.focus();
-  }
-};
 
 const visibleColumns = ref<String[]>([
   "no",
@@ -193,7 +186,6 @@ function closeDialog() {
 async function clickSave(reason: string) {
   dialogConfirm($q, async () => {
     showLoader();
-    modalUnapprove.value = false;
     const body = {
       reason: reason,
     };
@@ -202,6 +194,7 @@ async function clickSave(reason: string) {
       .then(async () => {
         await fetchData();
         success($q, "บันทึกข้อมูลสำเร็จ");
+        modalUnapprove.value = false;
       })
       .catch((e) => {
         messageError($q, e);
@@ -253,6 +246,8 @@ watch(
  * ฟังชั้นเรียกดูข้อมูล
  */
 async function fetchData() {
+  console.log(pagination.value.page);
+
   showLoader();
   await http
     .get(
@@ -264,7 +259,7 @@ async function fetchData() {
         }&keyword=${filterKeyword.value.trim()}`
     )
     .then(async (res) => {
-      let data = res.data.result.data;
+      let data = await res.data.result.data;
       total.value = res.data.result.total;
       totalList.value = Math.ceil(
         res.data.result.total / pagination.value.rowsPerPage
@@ -310,7 +305,6 @@ async function fetchData() {
     })
     .finally(() => {
       hideLoader();
-      console.log(month.value);
     });
 }
 
@@ -403,7 +397,7 @@ onMounted(async () => {
       <d-table
         :columns="columns"
         :rows="rows"
-        row-key="tb-list"
+        row-key="id"
         flat
         bordered
         :paging="false"
@@ -412,20 +406,6 @@ onMounted(async () => {
         :rows-per-page-options="[10, 25, 50, 100]"
         @update:pagination="updatePagination"
       >
-        <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="fetchData()"
-          ></q-pagination>
-        </template>
         <template v-slot:header="props">
           <q-tr :props="props">
             <q-th auto-width />
@@ -500,14 +480,29 @@ onMounted(async () => {
                 v-else-if="col.name === 'description'"
                 class="table_ellipsis"
               >
-                {{ props.row.description }}
+                {{ col.value ?? "-" }}
               </div>
               <div v-else>
-                {{ col.value }}
+                {{ col.value ?? "-" }}
               </div>
             </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="fetchData()"
+          ></q-pagination>
+        </template>
       </d-table>
     </div>
   </q-card>
@@ -528,6 +523,7 @@ onMounted(async () => {
     :id="id"
     :editCheck="editCheck"
     :detailData="detailData"
+    :fetch-data="fetchData"
   />
 </template>