erp/web
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Viet An
2026-03-02 09:45:33 +07:00
commit d17a9e2588
415 changed files with 92113 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
app/components/transaction/TransactionDetail.vue Normal file
View File

@@ -0,0 +1,214 @@
<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>