124 lines
3.5 KiB
Vue
124 lines
3.5 KiB
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>
|