114 lines
3.3 KiB
Vue
114 lines
3.3 KiB
Vue
<script setup>
|
|
import TransactionDetail from "@/components/transaction/TransactionDetail.vue";
|
|
|
|
const props = defineProps({
|
|
transaction__code: String,
|
|
});
|
|
|
|
const { $exportpdf, $getdata, $snackbar } = useNuxtApp();
|
|
const txn = ref(null);
|
|
const txndetails = ref(null);
|
|
const showModal = ref(null);
|
|
|
|
function openChangeCustomerModal() {
|
|
showModal.value = {
|
|
title: "Đổi khách hàng",
|
|
height: "40vh",
|
|
width: "50%",
|
|
component: "transaction/ChangeCustomerModal",
|
|
vbind: { transactionId: txn.value.id },
|
|
};
|
|
}
|
|
|
|
function print() {
|
|
const fileName = `Giao-dich-${props.transaction__code}`;
|
|
const docId = "print-area";
|
|
$exportpdf(docId, fileName, "a4", "landscape");
|
|
$snackbar("Đang xuất PDF...", { type: "is-info" });
|
|
}
|
|
|
|
onMounted(async () => {
|
|
const fetchedTxn = await $getdata("transaction", { code: props.transaction__code }, undefined, true);
|
|
txn.value = fetchedTxn;
|
|
|
|
const fetchedTxndetails = await $getdata("reservation", undefined, {
|
|
filter: {
|
|
transaction__code: props.transaction__code,
|
|
},
|
|
sort: "create_time",
|
|
values:
|
|
"id,code,date,amount,amount_remaining,amount_received,due_date,transaction,customer_old__fullname,customer_new__fullname,transaction__code,phase,phase__name,creator,creator__fullname,status,status__name,approver,approver__fullname,approve_time,create_time,update_time",
|
|
});
|
|
txndetails.value = fetchedTxndetails;
|
|
});
|
|
</script>
|
|
<template>
|
|
<div id="print-area">
|
|
<!-- mt-1 because bug: print empty first page -->
|
|
<div class="columns mx-0 mt-1 mb-4">
|
|
<div class="column is-narrow is-flex is-align-items-center">
|
|
<p class="has-text-weight-semibold">{{ transaction__code }}</p>
|
|
</div>
|
|
<div class="column is-flex is-align-items-center">
|
|
<p>
|
|
<span>Giá hợp đồng: </span>
|
|
<span class="has-text-weight-semibold">{{ $numtoString(txn?.sale_price) }}</span>
|
|
</p>
|
|
</div>
|
|
<div class="column is-flex is-align-items-center">
|
|
<p>
|
|
<span>Đã thu: </span>
|
|
<span
|
|
class="has-text-weight-semibold"
|
|
style="color: hsl(120, 70%, 40%)"
|
|
>
|
|
{{ $numtoString(txn?.amount_received) }}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<div class="column is-flex is-align-items-center">
|
|
<p>
|
|
<span>Còn lại: </span>
|
|
<span
|
|
class="has-text-weight-semibold"
|
|
style="color: hsl(0, 50%, 50%)"
|
|
>
|
|
{{ $numtoString(txn?.amount_remain) }}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<div
|
|
id="ignore"
|
|
class="column is-narrow is-flex is-align-items-center is-gap-2"
|
|
>
|
|
<button
|
|
v-if="txn?.phase === 4 && $getEditRights('edit', { code: 'transaction', category: 'topmenu' })"
|
|
@click="openChangeCustomerModal"
|
|
class="button is-link"
|
|
>
|
|
Đổi khách hàng
|
|
</button>
|
|
<button
|
|
@click="print"
|
|
class="button is-light"
|
|
>
|
|
In thông tin
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="is-flex is-flex-direction-column is-gap-4">
|
|
<TransactionDetail
|
|
v-for="(txndetail, i) in txndetails"
|
|
:key="txndetail.id"
|
|
:index="i"
|
|
:txndetail="txndetail"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<Modal
|
|
v-if="showModal"
|
|
v-bind="showModal"
|
|
@close="showModal = undefined"
|
|
/>
|
|
</template>
|