From 4ff1334b321a0afaf8ad791731c5de4b58324c06 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 28 Nov 2023 11:49:26 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=20Tab=20=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81=E0=B8=B2=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=87=E0=B9=80=E0=B8=A7=E0=B8=A5=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/HistoryView.vue | 48 ++++++++++++++++++++++++++++++++++++++-
 1 file changed, 47 insertions(+), 1 deletion(-)

diff --git a/src/views/HistoryView.vue b/src/views/HistoryView.vue
index 1bbee5b..288be85 100644
--- a/src/views/HistoryView.vue
+++ b/src/views/HistoryView.vue
@@ -17,6 +17,8 @@ const { showLoader, hideLoader, messageError } = mixin
 const { fetchHistoryList } = stores
 const $q = useQuasar() //ใช้ noti quasar
 
+const tab = ref<string>('1')
+
 // paging
 const page = ref<number>(1)
 const year = ref<number>(new Date().getFullYear())
@@ -110,7 +112,26 @@ onMounted(() => {
         </div>
         <div class="col-12 q-pa-md text-grey-9">
           <ToolBar :fetchData="fetchlistHistory" @update:year="updateYear" />
-          <Table
+          <q-card bordered flat>
+            <q-tabs
+              v-model="tab"
+              dense
+              align="left"
+              inline-label
+              class="rounded-borders"
+              indicator-color="primary"
+              active-bg-color="teal-1"
+              active-class="text-primary"
+            >
+              <q-tab name="1" label="ประวัติการลงเวลา" />
+              <q-tab name="2" label="รายการลงเวลากรณีพิเศษ" />
+            </q-tabs>
+
+            <q-separator />
+
+            <q-tab-panels v-model="tab" animated>
+              <q-tab-panel name="1">
+                <Table
             :fetchData="fetchlistHistory"
             :page-size="pageSize"
             :total="total"
@@ -119,6 +140,31 @@ onMounted(() => {
             @update:change-page="changePage"
             :max-page="maxPage"
           />
+              </q-tab-panel>
+
+              <q-tab-panel name="2">
+                <Table
+            :fetchData="fetchlistHistory"
+            :page-size="pageSize"
+            :total="total"
+            :page="page"
+            :paging="true"
+            @update:change-page="changePage"
+            :max-page="maxPage"
+          />
+              </q-tab-panel>
+            </q-tab-panels>
+            <!-- </q-card> -->
+          </q-card>
+          <!-- <Table
+            :fetchData="fetchlistHistory"
+            :page-size="pageSize"
+            :total="total"
+            :page="page"
+            :paging="true"
+            @update:change-page="changePage"
+            :max-page="maxPage"
+          /> -->
         </div>
       </q-card>
     </div>