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

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>