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

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