147 lines
3.8 KiB
Vue
147 lines
3.8 KiB
Vue
<script setup>
|
|
import SalaryRow from '@/components/viewer/SalaryRow.vue';
|
|
|
|
const salaries = [
|
|
{
|
|
empcode: 'EMP001',
|
|
empname: 'Nguyễn Văn An',
|
|
basic_salary: '25000000.00',
|
|
commission: '5000000.00',
|
|
kpi_bonus: '3000000.00',
|
|
deduction: '1500000.00',
|
|
net: '31500000.00',
|
|
},
|
|
{
|
|
empcode: 'EMP002',
|
|
empname: 'Trần Thị Bình',
|
|
basic_salary: '15000000.00',
|
|
commission: '2000000.00',
|
|
kpi_bonus: '1500000.00',
|
|
deduction: '800000.00',
|
|
net: '17700000.00',
|
|
},
|
|
{
|
|
empcode: 'EMP003',
|
|
empname: 'Lê Hoàng Cường',
|
|
basic_salary: '12000000.00',
|
|
commission: '3500000.00',
|
|
kpi_bonus: '1000000.00',
|
|
deduction: '600000.00',
|
|
net: '15900000.00',
|
|
},
|
|
{
|
|
empcode: 'EMP004',
|
|
empname: 'Phạm Thị Dung',
|
|
basic_salary: '20000000.00',
|
|
commission: '0',
|
|
kpi_bonus: '2000000.00',
|
|
deduction: '1000000.00',
|
|
net: '21000000.00',
|
|
},
|
|
];
|
|
</script>
|
|
<template>
|
|
<div class="columns">
|
|
<div class="column is-3">
|
|
<div class="card">
|
|
<div class="card-content">
|
|
<p>Lương cơ bản</p>
|
|
<p class="fsb-21 mt-5">72M</p>
|
|
<p class="fs-13 has-text-grey">VNĐ</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column is-3">
|
|
<div class="card">
|
|
<div class="card-content">
|
|
<p>Hoa hồng</p>
|
|
<p class="fsb-21 mt-5">11M</p>
|
|
<p class="fs-13 has-text-grey">VNĐ</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column is-3">
|
|
<div class="card">
|
|
<div class="card-content">
|
|
<p>Thưởng KPI</p>
|
|
<p class="fsb-21 mt-5">8M</p>
|
|
<p class="fs-13 has-text-grey">VNĐ</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column is-3">
|
|
<div class="card">
|
|
<div class="card-content">
|
|
<p>Tổng chi lương</p>
|
|
<p class="fsb-21 mt-5">86M</p>
|
|
<p class="fs-13 has-text-grey">VNĐ</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p class="mb-4">Cấu hình tính lương</p>
|
|
<div class="columns">
|
|
<div class="column is-4">
|
|
<div class="card">
|
|
<div class="card-content">
|
|
<p class="fsb-18 mb-1">Lương cứng</p>
|
|
<p class="has-text-grey fs-14">
|
|
Lương cơ bản theo vị trí và cấp bậc
|
|
</p>
|
|
<button class="button is-small mt-2">Cấu hình</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column is-4">
|
|
<div class="card">
|
|
<div class="card-content">
|
|
<p class="fsb-18 mb-1">Hoa hồng doanh số</p>
|
|
<p class="has-text-grey fs-14">% hoa hồng theo doanh số bán hàng</p>
|
|
<button class="button is-small mt-2">Cấu hình</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column is-4">
|
|
<div class="card">
|
|
<div class="card-content">
|
|
<p class="fsb-18 mb-1">Thưởng KPI</p>
|
|
<p class="has-text-grey fs-14">Thưởng đạt và vượt KPI</p>
|
|
<button class="button is-small mt-2">Cấu hình</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p class="my-4">Bảng lương tháng 2026/02</p>
|
|
<table class="table is-bordered is-narrow is-hoverable is-fullwidth fs-14">
|
|
<thead>
|
|
<tr>
|
|
<th>Mã NV</th>
|
|
<th>Họ tên</th>
|
|
<th>Lương cơ bản</th>
|
|
<th>Hoa hồng</th>
|
|
<th>Thưởng KPI</th>
|
|
<th>Khấu trừ</th>
|
|
<th>Thực lãnh</th>
|
|
<th>Thao tác</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<SalaryRow v-for="row in salaries" key="row.empcode" :row="row" />
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
<style scoped>
|
|
th:nth-child(3),
|
|
th:nth-child(4),
|
|
th:nth-child(5),
|
|
th:nth-child(6),
|
|
th:nth-child(7),
|
|
th:nth-child(8) {
|
|
text-align: right;
|
|
}
|
|
</style>
|