เพิ่ม Tab รายการลงเวลา

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>