ISMAIL MASSERAN
147 lines
4.5 KiB
Vue
147 lines
4.5 KiB
Vue
<template>
|
|
<div class="panel panel-default">
|
|
<div class="panel-body">
|
|
<div class="clearfix" style="margin-bottom: 12px;">
|
|
<h4 style="margin: 0; display: inline-block;">Ringkasan Elaun</h4>
|
|
<!-- <div class="pull-right" style="display:flex; gap:8px; align-items:center;">
|
|
<select v-model="methodFilter" class="form-control input-sm" style="width: 160px;">
|
|
<option value="">Semua kaedah</option>
|
|
<option value="cash">Tunai</option>
|
|
<option value="bank">Bank</option>
|
|
</select>
|
|
<button class="btn btn-default btn-sm" @click="refresh()">
|
|
<i class="fa fa-refresh"></i> Refresh
|
|
</button>
|
|
</div> -->
|
|
</div>
|
|
|
|
<div v-if="error" class="alert alert-danger">{{ error }}</div>
|
|
|
|
<admin-data-table :headers="headers" :items="items" :loading="loading" :show-pagination="false"
|
|
index-title="Bil." empty-text="Tiada rekod bayaran elaun" :exportable="true">
|
|
<template v-slot:item-admin_name="{ item }">
|
|
<div style="font-weight: 800;">{{ item.admin_name || '—' }}</div>
|
|
<div class="text-muted" style="font-size: 12px;">{{ item.admin_email || '' }}</div>
|
|
</template>
|
|
|
|
<template v-slot:item-total_amount_cents="{ item }">
|
|
<b>{{ formatCentsToRM(item.total_amount_cents) }}</b>
|
|
<div class="text-muted" style="font-size: 12px;">{{ item.payouts_count }} bayaran</div>
|
|
</template>
|
|
|
|
<template v-slot:item-cash_amount_cents="{ item }">
|
|
{{ formatCentsToRM(item.cash_amount_cents) }}
|
|
<div class="text-muted" style="font-size: 12px;">{{ item.cash_count }} tunai</div>
|
|
</template>
|
|
|
|
<template v-slot:item-bank_amount_cents="{ item }">
|
|
{{ formatCentsToRM(item.bank_amount_cents) }}
|
|
<div class="text-muted" style="font-size: 12px;">{{ item.bank_count }}</div>
|
|
</template>
|
|
|
|
</admin-data-table>
|
|
|
|
<div v-if="!loading && items.length" class="well well-sm" style="margin-top: 12px;">
|
|
<b>Jumlah keseluruhan:</b> {{ formatCentsToRM(grandTotalCents) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data: function () {
|
|
return {
|
|
loading: false,
|
|
error: '',
|
|
rows: [],
|
|
methodFilter: '',
|
|
headers: [
|
|
{
|
|
title: 'Admin',
|
|
key: 'admin_name',
|
|
sortable: true,
|
|
exportValue: function (item) {
|
|
var name = item && item.admin_name ? String(item.admin_name) : '—';
|
|
var email = item && item.admin_email ? String(item.admin_email) : '';
|
|
return email ? (name + ' (' + email + ')') : name;
|
|
}
|
|
},
|
|
{
|
|
title: 'Tunai (RM300.00)',
|
|
key: 'cash_amount_cents',
|
|
sortable: false,
|
|
exportValue: function (item) {
|
|
return item && item.cash_amount_cents != null ? (Number(item.cash_amount_cents) / 100).toFixed(2) : '';
|
|
}
|
|
},
|
|
{
|
|
title: 'Maya (RM150.00)',
|
|
key: 'bank_amount_cents',
|
|
sortable: false,
|
|
exportValue: function (item) {
|
|
return item && item.bank_amount_cents != null ? (Number(item.bank_amount_cents) / 100).toFixed(2) : '';
|
|
}
|
|
},
|
|
{
|
|
title: 'Jumlah (RM)',
|
|
key: 'total_amount_cents',
|
|
sortable: true,
|
|
exportValue: function (item) {
|
|
return item && item.total_amount_cents != null ? (Number(item.total_amount_cents) / 100).toFixed(2) : '';
|
|
}
|
|
},
|
|
],
|
|
};
|
|
},
|
|
|
|
created: function () {
|
|
this.refresh();
|
|
},
|
|
|
|
computed: {
|
|
items: function () {
|
|
return Array.isArray(this.rows) ? this.rows : [];
|
|
},
|
|
|
|
grandTotalCents: function () {
|
|
return this.items.reduce((sum, r) => sum + Number(r.total_amount_cents || 0), 0);
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
refresh: function () {
|
|
this.loading = true;
|
|
this.error = '';
|
|
|
|
var params = {};
|
|
if (this.methodFilter) params.method = this.methodFilter;
|
|
|
|
axios.get(config.API + 'allowance/summary', { params: params })
|
|
.then((response) => {
|
|
if (!response || !response.data || response.data.status !== 'success') {
|
|
this.error = (response && response.data && response.data.message) ? response.data.message : 'Gagal memuatkan ringkasan.';
|
|
return;
|
|
}
|
|
this.rows = response.data.rows || [];
|
|
})
|
|
.catch((error) => {
|
|
this.error =
|
|
(error && error.response && error.response.data && error.response.data.message)
|
|
? error.response.data.message
|
|
: (error && error.message ? error.message : 'Gagal memuatkan ringkasan.');
|
|
if (error && error.response) this.util.showResult(error, 'error');
|
|
})
|
|
.finally(() => {
|
|
this.loading = false;
|
|
});
|
|
},
|
|
|
|
formatCentsToRM: function (cents) {
|
|
var n = Number(cents || 0) / 100;
|
|
return n.toLocaleString('en-MY', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
|
},
|
|
},
|
|
};
|
|
</script>
|