Afiq Hamzah
324 lines
14 KiB
Vue
324 lines
14 KiB
Vue
<template>
|
|
<div class="container">
|
|
<div class="flex w-full">
|
|
<div class="xl:w-2/3 2xl:w-1/2 p-8 mx-auto">
|
|
<div
|
|
class="bg-yellow-600 text-gray-200 text-lg px-6 py-4 rounded-t-lg"
|
|
>
|
|
<router-link to="/akaunhome">
|
|
<i class="fas fa-backspace text-white"></i>
|
|
</router-link>
|
|
<span class="text-center mx-auto text-white font-bold"
|
|
>Imbang Duga</span
|
|
>
|
|
</div>
|
|
<form
|
|
method="get"
|
|
id="formgadaian"
|
|
:action="Urlredirect()"
|
|
target="_blank"
|
|
>
|
|
<div class="rounded bg-white shadow p-6">
|
|
<div class="pb-6">
|
|
<label
|
|
for="username"
|
|
class="font-semibold text-gray-700 block pb-1"
|
|
>Tarikh</label
|
|
>
|
|
<div class="flex">
|
|
<span
|
|
style="background-color: #f9fafb"
|
|
class="text-gray-600 border rounded-l px-4 py-2 whitespace-no-wrap"
|
|
>Mula</span
|
|
>
|
|
<input
|
|
id="tarikhmula"
|
|
name="datetarikh"
|
|
@change="dateChecking"
|
|
v-model="tarikhmula"
|
|
class="border border-l-0 rounded-r px-4 py-2 w-1/2 mr-2"
|
|
type="date"
|
|
/>
|
|
<span
|
|
style="background-color: #f9fafb"
|
|
class="text-gray-600 border rounded-l px-4 py-2 whitespace-no-wrap"
|
|
>Hingga</span
|
|
>
|
|
<input
|
|
id="tarikhhingga"
|
|
name="datehingga"
|
|
v-model="tarikhhingga"
|
|
@change="dateChecking"
|
|
class="border border-l-0 rounded-r px-4 py-2 w-1/2 mr-2"
|
|
type="date"
|
|
/>
|
|
</div>
|
|
<div class="flex justify-end mt-5">
|
|
<button
|
|
@click.prevent="getImbangDuga(1)"
|
|
class="border border-yellow-600 text-yellow-600 font-montserrat py-2 px-8 font-medium rounded-xl hover:bg-yellow-600 hover:text-white transition-all duration-300"
|
|
>
|
|
<i class="fas fa-eye mr-2"></i>Cari
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="container mx-auto px-5 my-10">
|
|
<modal ref="modal"></modal>
|
|
<table class="min-w-full leading-normal">
|
|
<thead class="text-center">
|
|
<tr>
|
|
<th
|
|
class="px-4 py-8 border-b-2 border-gray-200 bg-gray-100 text-left text-sm font-semibold text-gray-600 uppercase tracking-wider"
|
|
></th>
|
|
<th
|
|
class="px-4 py-8 border-b-2 border-gray-200 bg-gray-100 text-left text-sm font-semibold text-gray-600 uppercase tracking-wider"
|
|
>
|
|
Bil
|
|
</th>
|
|
<th
|
|
class="px-4 py-6 border-b-2 border-gray-200 bg-gray-100 text-left text-sm font-semibold text-gray-600 uppercase tracking-wider"
|
|
>
|
|
Tarikh
|
|
</th>
|
|
<th
|
|
class="px-4 py-6 border-b-2 border-gray-200 bg-gray-100 text-left text-sm font-semibold text-gray-600 uppercase tracking-wider"
|
|
>
|
|
Kod Caw
|
|
</th>
|
|
<th
|
|
class="px-4 py-6 border-b-2 border-gray-200 bg-gray-100 text-left text-sm font-semibold text-gray-600 uppercase tracking-wider"
|
|
>
|
|
Tanggungan Semasa
|
|
</th>
|
|
<th
|
|
class="px-4 py-6 border-b-2 border-gray-200 bg-gray-100 text-left text-sm font-semibold text-gray-600 uppercase tracking-wider"
|
|
>
|
|
Harta Semasa
|
|
</th>
|
|
<th
|
|
class="px-4 py-6 border-b-2 border-gray-200 bg-gray-100 text-left text-sm font-semibold text-gray-600 uppercase tracking-wider"
|
|
>
|
|
Tag Telly
|
|
</th>
|
|
<th
|
|
class="px-10 py-6 border-b-2 border-gray-200 bg-gray-100 text-left text-sm font-semibold text-gray-600 uppercase tracking-wider"
|
|
>
|
|
Act
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="(imbangduga, i) in showimbangduga.data" :key="i">
|
|
<td
|
|
class="px-5 py-5 border-b border-gray-200 bg-white text-sm"
|
|
>
|
|
|
|
</td>
|
|
<td
|
|
class="px-5 py-5 border-b border-gray-200 bg-white text-sm"
|
|
>
|
|
<div class="flex items-center">
|
|
<div class="ml-3">
|
|
<p
|
|
class="text-gray-900 whitespace-no-wrap"
|
|
v-text="showimbangduga.from + i"
|
|
></p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td
|
|
class="px-5 py-5 border-b border-gray-200 bg-white text-sm"
|
|
>
|
|
<div class="flex items-center">
|
|
<div class="ml-3">
|
|
<p
|
|
class="text-gray-900 whitespace-no-wrap"
|
|
v-text="imbangduga.tarikh"
|
|
></p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td
|
|
class="px-5 py-5 border-b border-gray-200 bg-white text-sm"
|
|
>
|
|
<div class="flex items-center">
|
|
<div class="ml-3">
|
|
<p
|
|
class="text-gray-900 whitespace-no-wrap"
|
|
v-text="imbangduga.kodcaw"
|
|
></p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td
|
|
class="px-5 py-5 border-b border-gray-200 bg-white text-sm"
|
|
>
|
|
<div class="flex items-center">
|
|
<div class="ml-3">
|
|
<p
|
|
class="text-gray-900 whitespace-no-wrap"
|
|
v-text="
|
|
formatterfunction(
|
|
imbangduga.totaltanggungan
|
|
)
|
|
"
|
|
></p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td
|
|
class="px-5 py-5 border-b border-gray-200 bg-white text-sm"
|
|
>
|
|
<div class="flex items-center">
|
|
<div class="ml-3">
|
|
<p
|
|
class="text-gray-900 whitespace-no-wrap"
|
|
v-text="
|
|
formatterfunction(
|
|
imbangduga.totalharta
|
|
)
|
|
"
|
|
></p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td
|
|
class="px-5 py-5 border-b border-gray-200 bg-white text-sm"
|
|
>
|
|
<div class="flex items-center">
|
|
<div class="ml-3">
|
|
<span
|
|
:class="{
|
|
'bg-green-100 text-green-800 border-green-400 dark:text-green-400':
|
|
imbangduga.tagtally,
|
|
}"
|
|
class="bg-red-100 text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400"
|
|
>          </span
|
|
>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td
|
|
class="px-5 py-5 border-b border-gray-200 bg-white text-sm"
|
|
>
|
|
<button
|
|
@click="action('2024', 'kb2')"
|
|
class="border border-yellow-600 text-yellow-600 font-montserrat py-2 px-4 font-medium rounded-xl hover:bg-yellow-600 hover:text-white transition-all duration-300"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
fill="currentColor"
|
|
class="bi bi-card-checklist"
|
|
viewBox="0 0 16 16"
|
|
>
|
|
<path
|
|
d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"
|
|
/>
|
|
<path
|
|
d="M7 5.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0zM7 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<pagination
|
|
:data="paginate"
|
|
@clickEvent_="getImbangDuga"
|
|
></pagination>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import modal from "../components/util/ImbangdugaModal.vue";
|
|
import pagination from "../components/pagination.vue";
|
|
|
|
const formatter = new Intl.NumberFormat("en-US", {
|
|
minimumFractionDigits: 2,
|
|
});
|
|
|
|
export default {
|
|
components: {
|
|
pagination,
|
|
modal,
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
tarikhmula: "",
|
|
tarikhhingga: "",
|
|
|
|
index: 0,
|
|
leftToRight: true,
|
|
imbangduga: [],
|
|
PaginationLimit: 2,
|
|
perPage: 5,
|
|
totalPage: 0,
|
|
currentPage: 1,
|
|
lastPage: 5,
|
|
showimbangduga: [],
|
|
paginate: {},
|
|
activePage: 1,
|
|
showLoader: false,
|
|
};
|
|
},
|
|
methods: {
|
|
Urlredirect: function () {
|
|
return window.route("cetak.gadaian");
|
|
},
|
|
|
|
dateChecking() {
|
|
var tarikhMula = document.getElementById("tarikhmula");
|
|
var tarikhHingga = document.getElementById("tarikhhingga");
|
|
|
|
var tarikh1 = new Date(tarikhMula.value);
|
|
var tarikh2 = new Date(tarikhHingga.value);
|
|
var Difference_In_Time = tarikh2.getTime() - tarikh1.getTime();
|
|
var Difference_In_Days =
|
|
Difference_In_Time / (1000 * 3600 * 24) + 1;
|
|
|
|
if (Difference_In_Days > 62) {
|
|
this.$swal({
|
|
text: "Sila Pilih Tarikh Kurang Dari 2 Bulan",
|
|
icon: "error",
|
|
allowEscapeKey: false,
|
|
showCancelButton: false,
|
|
showConfirmButton: true,
|
|
});
|
|
}
|
|
},
|
|
action(tarikhmula, kodcaw, tarikhhingga) {
|
|
this.$refs.modal.showModal = true;
|
|
},
|
|
|
|
getImbangDuga(pageNumber) {
|
|
this.axios
|
|
.get(this.$hostname + "/api/reports/balancesheets/get", {
|
|
params: {
|
|
kodcaw: this.$kodcaw,
|
|
mula: this.tarikhmula,
|
|
hingga: this.tarikhhingga,
|
|
page: pageNumber,
|
|
},
|
|
})
|
|
.then((response) => {
|
|
this.showimbangduga = response.data;
|
|
this.paginate = response.data;
|
|
});
|
|
},
|
|
|
|
formatterfunction(value) {
|
|
return formatter.format(value);
|
|
},
|
|
},
|
|
};
|
|
</script>
|