erp/hrm
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Viet An
2026-04-06 13:47:10 +07:00
commit f423d9ab20
439 changed files with 97497 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
app/components/viewer/Rollcall.vue Normal file
View File

@@ -0,0 +1,183 @@
<script setup>
import RollcallRow from '@/components/viewer/RollcallRow.vue';
const rollcall = [
{
id: 1,
empcode: 'EMP001',
empname: 'Nguyễn Văn An',
date: '2026-03-20',
checkin: '2026-03-20T01:00:00.000Z',
checkout: '2026-03-20T09:00:00.000Z',
duration: '8',
status: 'Đúng giờ',
},
{
id: 2,
empcode: 'EMP002',
empname: 'Trần Thị Bình',
date: '2026-03-20',
checkin: '2026-03-20T01:15:00.000Z',
checkout: '2026-03-20T09:25:00.000Z',
duration: '8.17',
status: 'Đi muộn',
},
{
id: 3,
empcode: 'EMP003',
empname: 'Lê Hoàng Cường',
date: '2026-03-20',
checkin: '2026-03-20T00:45:00.000Z',
checkout: '2026-03-20T09:00:00.000Z',
duration: '8.25',
status: 'Đúng giờ',
},
{
id: 4,
empcode: 'EMP004',
empname: 'Phạm Thị Dung',
date: '2026-03-20',
checkin: '2026-03-20T01:05:00.000Z',
checkout: '2026-03-20T09:30:00.000Z',
duration: '7.42',
status: 'Về sớm',
},
{
id: 5,
empcode: 'EMP005',
empname: 'Võ Minh Em',
date: '2026-03-20',
checkin: null,
checkout: null,
duration: null,
status: 'Nghỉ phép',
},
];
</script>
<template>
<div class="columns">
<div class="column is-3">
<div class="card">
<div class="card-content">
<div class="content">
<p>Đúng giờ</p>
<div class="is-flex is-flex-direction-column">
<p class="fsb-22 m-0">8</p>
<p class="fs-14 m-0 has-text-grey">nhân viên</p>
</div>
</div>
</div>
</div>
</div>
<div class="column is-3">
<div class="card">
<div class="card-content">
<div class="content">
<p>Đi muộn</p>
<div class="is-flex is-flex-direction-column">
<p class="fsb-22 m-0">2</p>
<p class="fs-14 m-0 has-text-grey">nhân viên</p>
</div>
</div>
</div>
</div>
</div>
<div class="column is-3">
<div class="card">
<div class="card-content">
<div class="content">
<p>Nghỉ phép</p>
<div class="is-flex is-flex-direction-column">
<p class="fsb-22 m-0">8</p>
<p class="fs-14 m-0 has-text-grey">nhân viên</p>
</div>
</div>
</div>
</div>
</div>
<div class="column is-3">
<div class="card">
<div class="card-content">
<div class="content">
<p>Tổng giờ làm</p>
<div class="is-flex is-flex-direction-column">
<p class="fsb-22 m-0">58.3</p>
<p class="fs-14 m-0 has-text-grey">giờ</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-content is-flex is-gap-2">
<Datepicker />
<div class="select">
<select style="width: 300px">
<option>Tất cả trạng thái</option>
<option>Đúng giờ</option>
<option>Đi muộn</option>
<option>Về sớm</option>
<option>Nghỉ phép</option>
</select>
</div>
</div>
</div>
<div class="card mt-4">
<div class="card-content">
<p class="mb-4">
Bảng chấm công ngày {{ $dayjs('2026-03-20').format('DD/MM/YYYY') }}
</p>
<table class="table is-fullwidth fs-14">
<thead>
<tr>
<th>Mã NV</th>
<th>Họ tên</th>
<th>Ngày</th>
<th>Giờ vào</th>
<th>Giờ ra</th>
<th>Giờ làm</th>
<th>Trạng thái</th>
</tr>
</thead>
<tbody>
<RollcallRow v-for="row in rollcall" :key="row.id" :row="row" />
</tbody>
</table>
</div>
</div>
<div class="card mt-4">
<div class="card-content">
<p class="mb-4">Quản lý ca làm việc</p>
<div class="columns">
<div class="column is-4">
<div class="card">
<div class="card-content">
<p class="fsb-18 mb-3">Ca sáng</p>
<p class="fs-14">08:00 - 12:00</p>
<p class="fs-14 has-text-grey">28 nhân viên</p>
</div>
</div>
</div>
<div class="column is-4">
<div class="card">
<div class="card-content">
<p class="fsb-18 mb-3">Ca chiều</p>
<p class="fs-14">13:00 - 17:30</p>
<p class="fs-14 has-text-grey">20 nhân viên</p>
</div>
</div>
</div>
<div class="column is-4">
<div class="card">
<div class="card-content">
<p class="fsb-18 mb-3">Ca tối</p>
<p class="fs-14">18:00 - 21:00</p>
<p class="fs-14 has-text-grey">4 nhân viên</p>
</div>
</div>
</div>
</div>
</div>
</div>
</template>