52 lines
1.1 KiB
Vue
52 lines
1.1 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
row: Object,
|
|
});
|
|
|
|
function shortenCurrency(amount) {
|
|
return new Intl.NumberFormat('en', { notation: 'compact' }).format(
|
|
Number(amount),
|
|
);
|
|
}
|
|
</script>
|
|
<template>
|
|
<tr>
|
|
<td>{{ row.empcode }}</td>
|
|
<td>{{ row.empname }}</td>
|
|
<td>{{ row.title }}</td>
|
|
<td>{{ shortenCurrency(row.target) }}</td>
|
|
<td>{{ shortenCurrency(row.reached) }}</td>
|
|
<td>
|
|
<div class="is-flex is-align-items-center is-gap-1">
|
|
<progress
|
|
class="progress is-small is-primary m-0"
|
|
style="width: 100px; background-color: #ddd !important"
|
|
:value="row.progress"
|
|
max="100"
|
|
></progress>
|
|
<span class="fs-13">{{ row.progress }}%</span>
|
|
</div>
|
|
</td>
|
|
<td>{{ row.evaluation }}</td>
|
|
<td>
|
|
<button class="button">
|
|
<span class="icon">
|
|
<SvgIcon v-bind="{ name: 'pen1.svg', size: 16, type: 'primary' }" />
|
|
</span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
<style scoped>
|
|
td {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
td:nth-child(4),
|
|
td:nth-child(5),
|
|
td:nth-child(7),
|
|
td:nth-child(8) {
|
|
text-align: right;
|
|
}
|
|
</style>
|