214 lines
8.2 KiB
Vue
214 lines
8.2 KiB
Vue
<script setup>
|
|
import { isNotNil } from 'es-toolkit';
|
|
|
|
// receive either txndetail or txndetailCode
|
|
// pass index to show as timeline item
|
|
const props = defineProps({
|
|
txndetail: Object,
|
|
index: Number,
|
|
txndetailCode: Number,
|
|
});
|
|
|
|
const { $getdata, $insertapi, $snackbar } = useNuxtApp();
|
|
const store = useStore();
|
|
const txndetail = ref(props.txndetail);
|
|
|
|
const showModal = ref(null);
|
|
const paymentSchedules = ref(null);
|
|
const transaction = ref(null);
|
|
const isUploadingFile = ref(false);
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
if (!props.txndetail) {
|
|
const txndetailData = await $getdata('reservation', undefined, {
|
|
filter: { code: props.txndetailCode },
|
|
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'
|
|
}, true);
|
|
|
|
txndetail.value = txndetailData;
|
|
}
|
|
|
|
const schedules = await $getdata('payment_schedule', undefined, {
|
|
filter: { txn_detail: txndetail.value.id },
|
|
values: 'id,code,txn_detail,txn_detail__transaction__policy__code,type__name,from_date,to_date,amount,cycle,cycle_days,status__name,detail,entry',
|
|
});
|
|
paymentSchedules.value = schedules;
|
|
|
|
// Fetch transaction info
|
|
if (txndetail.value.transaction) {
|
|
transaction.value = await $getdata('transaction', { id: txndetail.value.transaction }, undefined, true);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching data:', error);
|
|
paymentSchedules.value = [];
|
|
}
|
|
});
|
|
|
|
function openModal() {
|
|
showModal.value = {
|
|
title: 'Hợp đồng',
|
|
height: '40vh',
|
|
width: '50%',
|
|
component: 'transaction/TransactionFiles',
|
|
vbind: { txndetail: txndetail.value.id }
|
|
}
|
|
}
|
|
|
|
async function handleFileUpload(uploadedFiles) {
|
|
if (!uploadedFiles || uploadedFiles.length === 0) return;
|
|
|
|
isUploadingFile.value = true;
|
|
try {
|
|
for (const fileRecord of uploadedFiles) {
|
|
const payload = {
|
|
txn_detail: txndetail.value.id,
|
|
file: fileRecord.id,
|
|
phase: txndetail.value.phase,
|
|
};
|
|
|
|
const result = await $insertapi("transactionfile", payload);
|
|
if (result && result.error) {
|
|
throw new Error(result.error || "Lưu file không thành công.");
|
|
}
|
|
}
|
|
|
|
$snackbar('File đã được upload thành công!', { type: 'is-success' });
|
|
} catch (error) {
|
|
console.error('Error uploading file:', error);
|
|
$snackbar(error.message || 'Có lỗi khi upload file.', { type: 'is-danger' });
|
|
} finally {
|
|
isUploadingFile.value = false;
|
|
}
|
|
}
|
|
</script>
|
|
<template>
|
|
<div v-if="txndetail" class="is-flex is-gap-2">
|
|
<div v-if="props.index !== undefined" class="is-flex is-flex-direction-column is-align-items-center is-gap-1">
|
|
<p class="is-size-5 has-text-weight-semibold is-flex is-justify-content-center is-align-items-center" style="
|
|
border: 4px solid rgb(32, 72, 83);
|
|
border-radius: 9999px;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
">
|
|
{{ props.index + 1 }}
|
|
</p>
|
|
<div style="
|
|
border: 3px solid #dddddd;
|
|
border-radius: 9999px;
|
|
flex-grow: 1;
|
|
width: min-content;
|
|
">
|
|
</div>
|
|
</div>
|
|
<div class="is-flex is-flex-direction-column is-align-items-baseline is-gap-2 is-flex-grow-1">
|
|
<div class="columns is-flex-wrap-wrap is-1.5 fs-15" style="width: 100%">
|
|
<div class="column is-12 my-0 columns">
|
|
<p class="column is-3">
|
|
<span>{{ txndetail.phase__name }} - </span>
|
|
<span class="has-text-weight-semibold">{{ txndetail.code }}</span>
|
|
</p>
|
|
<div v-if="phase != 7" class="column is-3 p-0">
|
|
<p>
|
|
<span>Số tiền: </span>
|
|
<span class="has-text-weight-semibold">{{ $numtoString(txndetail.amount) }}</span>
|
|
</p>
|
|
<p class="fs-14 has-text-grey" v-if="isNotNil(txndetail.amount_received) && isNotNil(txndetail.amount_remaining)">
|
|
<span>(</span>
|
|
<span title="Đã thu" class="has-text-weight-semibold" style="color: hsl(120, 70%, 40%)">
|
|
{{ $numtoString(txndetail.amount_received) }}
|
|
</span>
|
|
<span> • </span>
|
|
<span title="Còn lại" class="has-text-weight-semibold" style="color: hsl(0, 50%, 50%)">
|
|
{{ $numtoString(txndetail.amount_remaining) }}
|
|
</span>
|
|
<span>)</span>
|
|
</p>
|
|
</div>
|
|
<p v-if="phase != 7" class="column is-3">
|
|
<span>Trạng thái: </span>
|
|
<span class="has-text-weight-semibold">{{ txndetail.status__name }}</span>
|
|
</p>
|
|
<p v-if="phase === 7" class="column is-3">
|
|
<span>Khách hàng mới: </span>
|
|
<span class="has-text-weight-semibold">{{ txndetail.customer_new__fullname }}</span>
|
|
</p>
|
|
<p v-if="phase === 7" class="column is-3">
|
|
<span>Người chuyển nhượng: </span>
|
|
<span class="has-text-weight-semibold">{{ txndetail.creator__fullname }}</span>
|
|
</p>
|
|
<div class="column is-3 p-0 is-flex is-align-items-center is-gap-3">
|
|
<a class="fsb-15 has-text-primary" @click.prevent="openModal">Hợp đồng</a>
|
|
<!-- <span v-if="!store.dealer" class="mx-1 has-text-grey-light">•</span> -->
|
|
<FileUpload
|
|
v-if="txndetail.phase === 7 && !store.dealer && $getEditRights('edit', { code: 'transaction', category: 'topmenu' })"
|
|
:type="['image', 'pdf']"
|
|
@files="handleFileUpload"
|
|
position="right"
|
|
class="file-upload-inline"
|
|
style="display: inline-block;"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<hr class="column is-12 my-0 has-background-grey" />
|
|
<p v-if="phase === 7" class="column is-12 mt-1 ml-1 columns">
|
|
<span>Khách hàng <span class="has-text-weight-semibold">{{txndetail.customer_old__fullname}} </span> chuyển nhượng hợp đồng này cho khách hàng <span class="has-text-weight-semibold">{{txndetail.customer_new__fullname}} </span></span>
|
|
</p>
|
|
<div v-if="phase != 7" class="column is-12 mt-0 columns">
|
|
<p class="column is-3">
|
|
<span>Từ ngày: </span>
|
|
<span class="has-text-weight-semibold">{{ txndetail.date ? $dayjs(txndetail.date).format('DD/MM/YYYY') : '' }}</span>
|
|
</p>
|
|
|
|
<p class="column is-3">
|
|
<span>Đến ngày: </span>
|
|
<span class="has-text-weight-semibold">{{ txndetail.due_date ? $dayjs(txndetail.due_date).format('DD/MM/YYYY') : '' }}</span>
|
|
</p>
|
|
<p class="column is-3">
|
|
<span>Người tạo: </span>
|
|
<span class="has-text-weight-semibold">{{ txndetail.creator__fullname }}</span>
|
|
</p>
|
|
<p class="column is-3">
|
|
<span>Người duyệt: </span>
|
|
<span class="has-text-weight-semibold">{{ txndetail.approver__fullname }}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div style="width: 100%">
|
|
<DataView v-if="paymentSchedules && paymentSchedules.length > 0" v-bind="{
|
|
pagename: `txndetail-${txndetail.id}`,
|
|
api: 'payment_schedule',
|
|
params: {
|
|
filter: { txn_detail: txndetail.id },
|
|
sort: 'cycle',
|
|
values: 'penalty_paid,penalty_remain,penalty_amount,penalty_reduce,batch_date,remain_amount,paid_amount,remain_amount,code,txn_detail,txn_detail__transaction__policy__code,type__name,from_date,to_date,amount,cycle,cycle_days,status__name,detail,entry',
|
|
},
|
|
setting: 'payment_schedule_list_timeline',
|
|
}" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else>Đã có lỗi khi lấy thông tin chi tiết giao dịch.</div>
|
|
<Modal v-if="showModal" v-bind="showModal" @close="showModal = undefined" />
|
|
</template>
|
|
|
|
<style scoped>
|
|
:deep(.file-upload-inline) {
|
|
display: inline-block;
|
|
}
|
|
|
|
:deep(.file-upload-inline .button) {
|
|
height: 1.5em;
|
|
padding: 0.25em 0.5em;
|
|
font-size: 0.875rem;
|
|
background: none;
|
|
border: none;
|
|
color: #3273dc;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
:deep(.file-upload-inline .button:hover) {
|
|
background: none;
|
|
color: #1a5490;
|
|
}
|
|
</style> |