107 lines
3.3 KiB
Vue
107 lines
3.3 KiB
Vue
<script setup>
|
|
import TransactionDetail from '@/components/transaction/TransactionDetail.vue';
|
|
|
|
const props = defineProps({
|
|
transaction__code: String,
|
|
});
|
|
|
|
const { $exportpdf, $getdata, $snackbar, $store } = useNuxtApp();
|
|
const { dealer} = $store;
|
|
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 && !dealer && $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> |