hrms-mgt/src/modules/09_leave/views/WorkingMain.vue

<script setup lang="ts">
import { ref, onMounted } from "vue";
//import Stores
import { useCounterMixin } from "@/stores/mixin";
import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
//import Components
import TableList from "@/modules/09_leave/components/1_Work/TableList.vue";
import ToolBar from "@/modules/09_leave/components/1_Work/ToolBar.vue";
// import Type
import type {
  TableRows,
  DataRes,
} from "@/modules/09_leave/interface/response/work";
// use Store
const mixin = useCounterMixin();
const workStore = useWorklistDataStore();
const { date2Thai } = mixin;
const { fetchList } = workStore;

const tab = ref("1")

onMounted(() => {
  fecthWorkList();
});
//เรียกข้อมูลรายการลงเวลาปฏิบัติงาน
function fecthWorkList() {
  const listData: DataRes[] = [
    {
      fullName: "นายกัณฐิมา  กาฬสินธ์ุ",
      timeIn: "8:04",
      coordinatesIn: "สำนักงาน",
      latIn: "18.7903",
      longIn: "99.0029",
      timeOut: "18:04",
      coordinatesOut: "สำนักงาน",
      latOut: "18.7903",
      longOut: "99.0029",
      status: "normal",
      date: new Date(new Date()),
    },
    {
      fullName: "นายนครชัย วันดี",
      timeIn: "8:04",
      coordinatesIn: "สำนักงาน",
      latIn: "18.7903",
      longIn: "99.0029",
      timeOut: "18:04",
      coordinatesOut: "สำนักงาน",
      latOut: "18.7903",
      longOut: "99.0029",
      status: "late",
      date: new Date(new Date()),
    },
    {
      fullName: "นายปิยรมย์ ศิริธาราฟ",
      timeIn: "8:04",
      coordinatesIn: "สำนักงาน",
      latIn: "18.7903",
      longIn: "99.0029",
      timeOut: "18:04",
      coordinatesOut: "สำนักงาน",
      latOut: "18.7903",
      longOut: "99.0029",
      status: "absent",
      date: new Date("2023-10-27"),
    },
    {
      fullName: "นางสาวปลาทอง ใจกล้า",
      timeIn: "8:04",
      coordinatesIn: "สำนักงาน",
      latIn: "18.7903",
      longIn: "99.0029",
      timeOut: "18:04",
      coordinatesOut: "สำนักงาน",
      latOut: "18.7903",
      longOut: "99.0029",
      status: "normal",
      date: new Date("2023-10-27"),
    },
  ];
  fetchList(listData); // ส่งข้อมูลไปยัง stores
}
</script>
<template>
  <div class="toptitle text-dark col-12 row items-center">
    รายการลงเวลาปฏิบัติงาน
  </div>
  <div>
    <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>

<style scoped></style>