แก้ไขตาม task

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

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+// importStroe
+import { useLeavelistDataStore } from "../stores/LeaveStore";
+// importComponets
+import TableList from "../components/2_Leave/TableList.vue";
+
+const leaveStore = useLeavelistDataStore();
+const { fecthList, clearFilter } = leaveStore;
+
+onMounted(() => {
+  fecthLeaveList();
+});
+function fecthLeaveList() {
+  const data = [
+    {
+      leaveType: "ลาป่วย",
+      name: "นายกัณฐิมา  กาฬสินธ์ุ",
+      Date: "",
+      status: "1",
+    },
+    {
+      leaveType: "ลากิจส่วนตัว",
+      name: "นายนครชัย วันดี",
+      Date: "",
+      status: "3",
+    },
+    {
+      leaveType: "ลากิจส่วนตัว",
+      name: "นายกัณฐิมา  กาฬสินธ์ุ",
+      Date: "",
+      status: "2",
+    },
+    {
+      leaveType: "ลาป่วย",
+      name: "นายปิยรมย์ ศิริธาราฟ",
+      Date: "",
+      status: "2",
+    },
+  ];
+  fecthList(data);
+}
+//เปลี่ยน Tab
+function changTab() {
+  clearFilter();
+  fecthLeaveList();
+}
+</script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">รายการลา</div>
+  <div>
+    <!-- <q-card flat bordered class="col-12 q-mt-sm"> -->
+    <div class="q-pa-md">
+      <q-tabs
+        v-model="leaveStore.tab"
+        dense
+        align="left"
+        inline-label
+        class="bg-grey-4 rounded-borders"
+        indicator-color="white"
+      >
+        <q-tab
+          @click="changTab"
+          name="1"
+          label="รายการลาที่อยู่ระหว่างดำเนิดการ"
+          :class="
+            leaveStore.tab == '1' ? 'bg-white text-primary rounded-borders	' : ''
+          "
+        >
+          <q-badge
+            color="grey-4"
+            :class="
+              leaveStore.tab == '1'
+                ? 'q-px-sm text-weight-medium text-primary q-ml-xl'
+                : 'q-px-sm text-weight-medium text-black q-ml-xl'
+            "
+            :label="leaveStore.amounttab1"
+            rounded
+          />
+        </q-tab>
+        <q-tab
+          @click="changTab"
+          name="2"
+          label="รายการลาทั้งหมด"
+          :class="
+            leaveStore.tab == '2'
+              ? 'bg-white text-primary rounded rounded-borders	'
+              : ''
+          "
+        >
+          <q-badge
+            color="grey-4"
+            :class="
+              leaveStore.tab == '2'
+                ? 'q-px-sm text-weight-medium text-primary q-ml-xl'
+                : 'q-px-sm text-weight-medium text-black q-ml-xl'
+            "
+            :label="leaveStore.amounttab2"
+            rounded
+          />
+        </q-tab>
+      </q-tabs>
+
+      <q-tab-panels v-model="leaveStore.tab" animated>
+        <q-tab-panel name="1">
+          <!-- <TableList1 /> -->
+          <TableList />
+        </q-tab-panel>
+
+        <q-tab-panel name="2">
+          <!-- <TabList2Vue /> -->
+          <TableList />
+        </q-tab-panel>
+      </q-tab-panels>
+    </div>
+    <!-- </q-card> -->
+  </div>
+</template>
+
+<style scoped></style>

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

@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">รายงานสถิติ</div>
+  <div>
+    <q-card flat bordered class="col-12 q-mt-sm"> </q-card>
+  </div>
+</template>
+
+<style scoped></style>

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

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+//import Stores
+import { useCounterMixin } from "@/stores/mixin";
+import { useWorklistDataStore } from "../stores/WorkStore";
+//import Components
+import TableList from "../components/1_Work/TableList.vue";
+// use Store
+const mixin = useCounterMixin();
+const workStore = useWorklistDataStore();
+const { date2Thai } = mixin;
+const { fecthList } = workStore;
+
+onMounted(() => {
+  fecthWorkList();
+});
+//เรียกข้อมูลรายการลงเวลาปฏิบัติงาน
+function fecthWorkList() {
+  const listData = [
+    {
+      fullName: "นายกัณฐิมา  กาฬสินธ์ุ",
+      timeIn: "8:04",
+      coordinatesIn: "สำนักงาน",
+      latIn: "18.7903",
+      longIn: "99.0029",
+      timeOut: "18:04",
+      coordinatesOut: "สำนักงาน",
+      latOut: "18.7903",
+      longOut: "99.0029",
+      status: "1",
+    },
+    {
+      fullName: "นายนครชัย วันดี",
+      timeIn: "8:04",
+      coordinatesIn: "สำนักงาน",
+      latIn: "18.7903",
+      longIn: "99.0029",
+      timeOut: "18:04",
+      coordinatesOut: "สำนักงาน",
+      latOut: "18.7903",
+      longOut: "99.0029",
+      status: "2",
+    },
+    {
+      fullName: "นายปิยรมย์ ศิริธาราฟ",
+      timeIn: "8:04",
+      coordinatesIn: "สำนักงาน",
+      latIn: "18.7903",
+      longIn: "99.0029",
+      timeOut: "18:04",
+      coordinatesOut: "สำนักงาน",
+      latOut: "18.7903",
+      longOut: "99.0029",
+      status: "3",
+    },
+    {
+      fullName: "นางสาวปลาทอง ใจกล้า",
+      timeIn: "8:04",
+      coordinatesIn: "สำนักงาน",
+      latIn: "18.7903",
+      longIn: "99.0029",
+      timeOut: "18:04",
+      coordinatesOut: "สำนักงาน",
+      latOut: "18.7903",
+      longOut: "99.0029",
+      status: "1",
+    },
+  ];
+  fecthList(listData);
+}
+</script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการลงเวลาปฏิบัติงาน
+  </div>
+  <div>
+    <q-card flat bordered class="col-12 q-mt-sm">
+      <div class="q-pa-md">
+        <TableList /></div
+    ></q-card>
+  </div>
+</template>
+
+<style scoped></style>