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

64 lines
1.9 KiB
Vue

<script setup lang="ts">
import { ref, onMounted } from "vue";
import type { DataRows } from "@/modules/09_leave/interface/response/leave";
// importStroe
import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
// importComponets
import TableList from "@/modules/09_leave/components/2_Leave/TableList.vue";
import ToolBar from "@/modules/09_leave/components/2_Leave/ToolBar.vue";
const leaveStore = useLeavelistDataStore();
const { fetchList, clearFilter } = leaveStore;
onMounted(() => {
fecthLeaveList();
});
// เรียกข้อมูลจาก API
function fecthLeaveList() {
const data = [
{
id: "00000000-0000-0000-0000-000000000000",
leaveType: "ลาป่วย",
name: "นายกัณฐิมา กาฬสินธ์ุ",
Date: "2023-11-03",
status: "NEW",
},
{
id: "00000000-0000-0000-0000-000000000000",
leaveType: "ลากิจส่วนตัว",
name: "นายนครชัย วันดี",
Date: "2023-11-01",
status: "APPROVE",
},
{
id: "00000000-0000-0000-0000-000000000000",
leaveType: "ลากิจส่วนตัว",
name: "นายกัณฐิมา กาฬสินธ์ุ",
Date: "2023-11-02",
status: "PENDING",
},
{
id: "00000000-0000-0000-0000-000000000000",
leaveType: "ลาป่วย",
name: "นายปิยรมย์ ศิริธาราฟ",
Date: "2023-11-01",
status: "PENDING",
},
];
fetchList(data); // ส่งข้อมูลไป stores
}
//เปลี่ยน 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 q-pt-sm q-pa-md">
<ToolBar />
<TableList />
</q-card>
</div>
</template>