fix Load

src/views/HistoryView.vue

@@ -24,6 +24,7 @@ const pageSize = ref<number>(10) // จำนวนแถวต่อหน้
 const total = ref<number>(0) // จำนวนทั้งหมด
 const maxPage = ref<number>(1) // จำนวนวหน้าทั้งหมด
 const filter = ref<string>('') //search data table
+const isLoading = ref<boolean>(false) // ตัวแปรสำหรับเช็คการโหลดข้อมูล
 
 /**
  * ฟังก์ชั่น api เปลี่ยนหน้า
@@ -38,19 +39,15 @@ async function changePage(pageVal: number, pageSizeVal: number, key: string) {
   await functionFetch()
 }
 
-/**
- * ฟังก์ชันสำหรับดึงข้อมูลตามประเภทแท็บที่เลือก
- */
+/** ฟังก์ชันสำหรับดึงข้อมูลตามประเภทแท็บที่เลือก*/
 async function functionFetch() {
   stores.rows = []
   stores.tab === 'history' ? await fetchlistHistory() : await fetchlistTime()
 }
 
-/***
- * ฟังก์ชั่นดึงข้อมูลรายการประวัติการลงเวลา
- */
+/** ฟังก์ชั่นดึงข้อมูลรายการประวัติการลงเวลา*/
 async function fetchlistHistory() {
-  showLoader()
+  isLoading.value = true
   await http
     .get(
       config.API.history() +
@@ -72,7 +69,7 @@ async function fetchlistHistory() {
       messageError($q, err)
     })
     .finally(() => {
-      hideLoader()
+      isLoading.value = false
     })
 }
 
@@ -80,7 +77,7 @@ async function fetchlistHistory() {
  * ฟังก์ชั่นดึงรายการลงเวลากรณีพิเศษ
  */
 async function fetchlistTime() {
-  showLoader()
+  isLoading.value = true
   await http
     .get(
       config.API.historyTime() +
@@ -104,7 +101,7 @@ async function fetchlistTime() {
       messageError($q, err)
     })
     .finally(() => {
-      hideLoader()
+      isLoading.value = false
     })
 }
 
@@ -193,6 +190,7 @@ onMounted(() => {
                 @update:change-page="changePage"
                 :max-page="maxPage"
                 :tab="stores.tab"
+                :is-loading="isLoading"
               />
             </q-tab-panel>
 
@@ -211,6 +209,7 @@ onMounted(() => {
                 @update:change-page="changePage"
                 :max-page="maxPage"
                 :tab="stores.tab"
+                :is-loading="isLoading"
               />
             </q-tab-panel>
           </q-tab-panels>