แก้ไขการแสดงผล และการดึงข้อมูลในส่วนของประวัติและการลงเวลาพิเศษ

src/components/FormTime.vue

@@ -28,11 +28,14 @@ const props = defineProps({
   fetchData: {
     type: Function,
     require: true,
+    default: () => {
+      console.log('fetchData func')
+    },
   },
 })
 
 const dataByIdVal = ref<any>([])
-const date = ref<Date | null>(null)
+const date = ref<Date | null | string>(null)
 const checkboxIn = ref<boolean>(false)
 const checkboxOut = ref<boolean>(false)
 const reason = ref<string>('')
@@ -78,7 +81,7 @@ function onCkickSave() {
     )
   ) {
     dialogConfirm($q, async () => {
-      const data: FormTimeStemp = {
+      const data: FormTimeStemp = await {
         checkDate: date.value,
         checkInEdit: checkboxIn.value,
         checkOutEdit: checkboxOut.value,
@@ -86,8 +89,6 @@ function onCkickSave() {
       }
       createListTime(data)
     })
-  } else {
-    console.log('ไม่ผ่าน ')
   }
 }
 
@@ -106,7 +107,7 @@ async function createListTime(data: FormTimeStemp) {
     })
     .finally(() => {
       props.closePopup?.()
-      props.fetchData?.()
+      props.fetchData()
     })
 }
 
@@ -118,7 +119,9 @@ onMounted(() => {
   if (dataByIdVal.value == null) {
     statusAction.value = true
   } else {
-    date.value = new Date(dataByIdVal.value.checkInDateTime)
+    date.value = moment(new Date(dataByIdVal.value.checkInDateTime)).format(
+      'YYYY-MM-DD'
+    )
   }
 })
 
@@ -153,14 +156,15 @@ watch(
         </q-card-section>
       </q-card>
 
-      <q-card flat bordered class="col-12 q-mt-sm" v-if="statusAction">
+      <q-card flat bordered class="col-12 q-mt-sm">
         <div class="q-pa-sm">
           <datepicker
+            :readonly="!statusAction"
             v-model="date"
             :locale="'th'"
-            autoApply
             :enableTimePicker="false"
             week-start="0"
+            autoApply
             outlined
           >
             <template #year="{ year }">
@@ -171,12 +175,14 @@ watch(
             </template>
             <template #trigger>
               <q-input
+                :readonly="!statusAction"
                 ref="dateRef"
                 outlined
                 dense
-                :model-value="date !== null ? date2Thai(date) : null"
+                :model-value="date !== null ? date2Thai(new Date(date)) : null"
                 :label="`${'วันที่ขอแก้ไข'}`"
                 :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
+                format-header="YYYY-MM-DD"
                 lazy-rules
                 hide-bottom-space
               >
@@ -193,14 +199,14 @@ watch(
         </div>
       </q-card>
 
-      <q-card flat bordered class="q-pa-sm col-12 bg-grey-1 q-mt-sm" v-else>
+      <!-- <q-card flat bordered class="q-pa-sm col-12 bg-grey-1 q-mt-sm" v-else>
         <div class="row q-gutter-md text-grey-5">
           <div class="col-1">
             <q-icon color="grey-5" name="calendar_today" />
           </div>
           <div class="col">{{ dataByIdVal.checkInDate }}</div>
         </div>
-      </q-card>
+      </q-card> -->
 
       <q-card
         flat

src/interface/response/checkin.ts

@@ -34,7 +34,7 @@ interface Datalist {
 }
 
 interface FormTimeStemp {
-  checkDate: Date | null
+  checkDate: Date | null | string
   checkInEdit: boolean
   checkOutEdit: boolean
   description: string

src/stores/chekin.ts

@@ -9,6 +9,7 @@ const { date2Thai } = mixin
 export const useChekIn = defineStore('checkin', () => {
   const year = ref<number>(new Date().getFullYear())
   const rows = ref<Datalist[]>()
+  const tab = ref<string>('history') 
 
   /**
    * ฟังก์ชั่นสำหรับ map ข้อมูล เพื่อแสดงรายการในตารางประวัติการลงเวลา
@@ -94,5 +95,6 @@ export const useChekIn = defineStore('checkin', () => {
     year,
     fetchHistoryList,
     classColorStatus,
+    tab
   }
 })

src/views/HistoryView.vue

@@ -40,13 +40,13 @@ async function changePage(pageVal: number, pageSizeVal: number, key: string) {
   page.value = await pageVal
   pageSize.value = await pageSizeVal
   filter.value = await key
-  functionFetch.value
+  functionFetch()
 }
 
-const functionFetch = computed(() => {
-  const result = tab.value === 'history' ? fetchlistHistory() : fetchlistTime()
-  return result
-})
+function functionFetch() {
+  console.log(stores.tab)
+  stores.tab === 'history' ? fetchlistHistory() : fetchlistTime()
+}
 
 /**
  * ฟังก์ชั่นดึงข้อมูลรายการประวัติการลงเวลาจาก api มาแสดง
@@ -108,20 +108,20 @@ async function updateYear(y: number, m: number) {
   year.value = y
   month.value = m
   stores.year = y
-  functionFetch.value
+  functionFetch()
 }
 
 /** Hook*/
 onMounted(async () => {
-  await functionFetch.value
+  await functionFetch()
 })
 
 watch(
-  () => tab.value,
+  () => stores.tab,
   () => {
     page.value = 1
     filter.value = ''
-    functionFetch.value
+    functionFetch()
   }
 )
 </script>
@@ -144,19 +144,19 @@ watch(
           </div>
           <q-space />
           <span class="text-body1 text-weight-bold col-8 text-center"
-            >ประวัติการลงเวลา</span
-          >
+            >ประวัติการลงเวลา
+          </span>
           <div class="col-2"></div>
         </div>
         <div class="col-12 q-pa-md text-grey-9">
           <ToolBar
-            :fetchData="fetchlistHistory"
+            :fetchData="functionFetch"
             @update:year="updateYear"
-            :tab="tab"
+            :tab="stores.tab"
           />
           <q-card bordered flat>
             <q-tabs
-              v-model="tab"
+              v-model="stores.tab"
               dense
               align="left"
               inline-label
@@ -171,30 +171,30 @@ watch(
 
             <q-separator />
 
-            <q-tab-panels v-model="tab" animated>
+            <q-tab-panels v-model="stores.tab" animated>
               <q-tab-panel name="history">
                 <TableHistory
-                  :fetchData="fetchlistHistory"
+                  :fetchData="functionFetch"
                   :page-size="pageSize"
                   :total="total"
                   :page="page"
                   :paging="true"
                   @update:change-page="changePage"
                   :max-page="maxPage"
-                  :tab="tab"
+                  :tab="stores.tab"
                 />
               </q-tab-panel>
 
               <q-tab-panel name="time">
                 <TableHistory
-                  :fetchData="fetchlistHistory"
+                  :fetchData="functionFetch"
                   :page-size="pageSize"
                   :total="total"
                   :page="page"
                   :paging="true"
                   @update:change-page="changePage"
                   :max-page="maxPage"
-                  :tab="tab"
+                  :tab="stores.tab"
                 />
               </q-tab-panel>
             </q-tab-panels>