ผูก API และปรับหน้าประวัติการลงเวลาในระบบ checkin

src/components/TableHistory.vue

@@ -17,10 +17,6 @@ const props = defineProps({
     type: Boolean,
     defualt: false,
   },
-  // selected: {
-  //   type: Array,
-  //   defualt: [],
-  // },
   pageSize: {
     type: Number,
     defualt: 10,
@@ -37,6 +33,11 @@ const props = defineProps({
     type: Number,
     defualt: 0,
   },
+  tab: {
+    type: String,
+    defualt: '',
+    required: true,
+  },
   nornmalData: {
     type: Boolean,
     defualt: false,
@@ -77,7 +78,8 @@ const props = defineProps({
   },
 })
 
-const keyword = ref<string>()
+const keyword = ref<string>('')
+const tab = ref<string>(props.tab?.toString())
 
 const emit = defineEmits(['update:change-page'])
 
@@ -98,7 +100,6 @@ watch(
       'update:change-page',
       currentPage.value,
       initialPagination.value.rowsPerPage,
-      true,
       keyword.value
     )
   }
@@ -115,7 +116,6 @@ async function filterFn() {
     'update:change-page',
     1,
     initialPagination.value.rowsPerPage,
-    true,
     keyword.value
   )
 }
@@ -222,17 +222,6 @@ function classStatus(status: string) {
       break
   }
 }
-
-const checkRequestEdit = (checkInStatus: string, checkOutStatus: string) => {
-  if (
-    checkInStatus === 'ขาด' ||
-    checkInStatus === 'สาย' ||
-    checkOutStatus === 'ขาด' ||
-    checkOutStatus === 'สาย'
-  )
-    return true
-  else false
-}
 </script>
 
 <template>
@@ -313,14 +302,9 @@ const checkRequestEdit = (checkInStatus: string, checkOutStatus: string) => {
             {{ col.value }}
           </div>
         </q-td>
-        <q-td>
+        <q-td v-if="tab === 'history'">
           <q-btn
-            v-if="
-              checkRequestEdit(
-                props.row.checkInStatus,
-                props.row.checkOutStatus
-              )
-            "
+            v-if="!props.row.isEdit"
             style="min-width: 110px"
             outline
             icon="edit"
@@ -329,8 +313,9 @@ const checkRequestEdit = (checkInStatus: string, checkOutStatus: string) => {
             color="cyan-6"
             @click="openPopup(props.row)"
           />
+        </q-td>
+        <q-td v-else-if="tab === 'time'">
           <q-chip
-            v-else-if="props.row.editStatus != ''"
             :color="`${stores.classColorStatus(props.row.editStatus)}-2`"
             :text-color="`${stores.classColorStatus(props.row.editStatus)}-7`"
             >{{ props.row.editStatus }}</q-chip
@@ -369,16 +354,8 @@ const checkRequestEdit = (checkInStatus: string, checkOutStatus: string) => {
             </q-item>
           </q-list>
           <q-card-section>
-            <div class="row">
-              <div
-                class="col"
-                v-if="
-                  checkRequestEdit(
-                    props.row.checkInStatus,
-                    props.row.checkOutStatus
-                  )
-                "
-              >
+            <div class="row" v-if="tab === 'history'">
+              <div class="col" v-if="!props.row.isEdit">
                 <q-btn
                   class="full-width text-cen"
                   outline
@@ -389,7 +366,10 @@ const checkRequestEdit = (checkInStatus: string, checkOutStatus: string) => {
                   @click="openPopup(props.row)"
                 />
               </div>
-              <div class="col" v-else>
+            </div>
+
+            <div class="row" v-else-if="tab === 'time'">
+              <div>
                 <q-chip
                   :color="`${stores.classColorStatus(props.row.editStatus)}-2`"
                   :text-color="`${stores.classColorStatus(