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;

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: "1",
      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: "2",
      date: new Date("2023-10-28"),
    },
    {
      fullName: "นายปิยรมย์ ศิริธาราฟ",
      timeIn: "8:04",
      coordinatesIn: "สำนักงาน",
      latIn: "18.7903",
      longIn: "99.0029",
      timeOut: "18:04",
      coordinatesOut: "สำนักงาน",
      latOut: "18.7903",
      longOut: "99.0029",
      status: "3",
      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: "1",
      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 flat bordered class="col-12 q-mt-sm">
      <div class="q-pa-md"><ToolBar /> <TableList /></div
    ></q-card>
  </div>
</template>

<style scoped></style>