แยกแท็บหน้า รายการลงเวลาปฏิบัติงาน

src/modules/09_leave/views/WorkingMain.vue

@@ -17,6 +17,8 @@ const workStore = useWorklistDataStore();
 const { date2Thai } = mixin;
 const { fetchList } = workStore;
 
+const tab = ref("1")
+
 onMounted(() => {
   fecthWorkList();
 });
@@ -84,9 +86,38 @@ function fecthWorkList() {
     รายการลงเวลาปฏิบัติงาน
   </div>
   <div>
-    <q-card flat bordered class="col-12 q-mt-sm">
-      <div class="q-pa-md"><ToolBar /> <TableList /></div
-    ></q-card>
+    <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">
+          <!-- <TableList1 /> -->
+          <ToolBar />
+          <TableList />
+        </q-tab-panel>
+
+        <q-tab-panel name="2">
+          <!-- <TabList2Vue /> -->
+          <ToolBar />
+          <TableList />
+        </q-tab-panel>
+      </q-tab-panels>
+      <!-- </q-card> -->
+    </q-card>
   </div>
 </template>