97 lines
4.1 KiB
Vue
97 lines
4.1 KiB
Vue
<script setup>
|
|
import AllocateItem from '@/components/transaction/AllocateItem.vue';
|
|
|
|
const props = defineProps({
|
|
row: Object,
|
|
pagename: String
|
|
});
|
|
|
|
const { $getdata } = useNuxtApp();
|
|
const transaction = ref([]);
|
|
const isLoading = ref(true);
|
|
const paymentSchedules = ref([]);
|
|
const incompletePaymentSchedules = computed(() =>
|
|
paymentSchedules.value.filter(pm => pm.remain_amount > 0)
|
|
)
|
|
|
|
async function getTransaction() {
|
|
const transactionData = await $getdata('transaction', undefined, {
|
|
filter: {
|
|
id: props.row.id
|
|
},
|
|
values: 'date,txncurrent__detail,txncurrent__detail__status,customer__type,txncurrent,txncurrent__detail__amount,txncurrent__detail__amount_remaining,txncurrent__detail__status__name,product__zone_type__name,product__trade_code,product__cart__dealer,customer__legal_code,customer__legal_type__name,payment_plan,id,code,customer,customer__code,customer__fullname,customer__phone,product,phase,phase__name,phase__code,policy,policy__code,policy__name,origin_price,discount_amount,sale_price,deposit_amount,deposit_received,deposit_remaining,amount_received,amount_remain,create_time,update_time,total_received_amount,total_allocation_remain,total_allocation_amount'
|
|
}, true);
|
|
|
|
transaction.value = transactionData;
|
|
}
|
|
|
|
async function getPaymentSchedules() {
|
|
isLoading.value = true;
|
|
const paymentSchedulesData = await $getdata('payment_schedule', undefined, {
|
|
filter: {
|
|
txn_detail__transaction: transaction.value.id
|
|
},
|
|
sort: 'cycle',
|
|
values: 'invoice__ref_code,invoice__amount,txn_detail__amount,batch_date,amount_remain,penalty_remain,penalty_paid,penalty_amount,penalty_reduce,ovd_days,remain_amount,paid_amount,txn_detail__transaction__product,txn_detail__transaction__product__trade_code,txn_detail__status,txn_detail__status__name,txn_detail__transaction__product__code,txn_detail__phase__name,txn_detail,id,txn_detail__transaction__customer__fullname,txn_detail__transaction__customer__code,txn_detail__transaction__customer__legal_code,status__name,type__name,code,from_date,txn_detail__transaction__policy__code,to_date,amount,cycle,cycle_days,txn_detail__transaction,type,status,updater,entry,detail,txn_detail__transaction__code,txn_detail__code'
|
|
});
|
|
|
|
paymentSchedules.value = paymentSchedulesData;
|
|
isLoading.value = false;
|
|
}
|
|
|
|
async function getStuff() {
|
|
await getTransaction();
|
|
await getPaymentSchedules();
|
|
}
|
|
|
|
onMounted(() => {
|
|
getStuff();
|
|
});
|
|
</script>
|
|
<template>
|
|
<div class="columns mx-0 mt-2 mb-5">
|
|
<div class="column is-1">
|
|
<p class="has-text-weight-semibold">Mã GD</p>
|
|
<p>{{ transaction.code }}</p>
|
|
</div>
|
|
<div class="column">
|
|
<p class="has-text-weight-semibold">Sản phẩm</p>
|
|
<p>{{ transaction.product__trade_code }}</p>
|
|
</div>
|
|
<div class="column">
|
|
<p class="has-text-weight-semibold">Khách hàng</p>
|
|
<p>{{ transaction.customer__fullname }}</p>
|
|
</div>
|
|
<div class="column">
|
|
<p class="has-text-weight-semibold">Ngày</p>
|
|
<FormatDate :date="transaction.date" />
|
|
</div>
|
|
<div class="column">
|
|
<p class="has-text-weight-semibold">Đã nhận</p>
|
|
<FormatNumber :value="transaction.total_received_amount" />
|
|
</div>
|
|
<div class="column">
|
|
<p class="has-text-weight-semibold">Đã phân bổ</p>
|
|
<FormatNumber :value="transaction.total_allocation_amount" />
|
|
</div>
|
|
<div class="column">
|
|
<p class="has-text-weight-semibold">Chưa phân bổ</p>
|
|
<FormatNumber :value="transaction.total_allocation_remain" />
|
|
</div>
|
|
</div>
|
|
<div class="mb-6 is-flex is-flex-direction-column is-gap-4">
|
|
<template v-if="incompletePaymentSchedules.length > 0">
|
|
<AllocateItem
|
|
v-for="(paymentSchedule, i) in incompletePaymentSchedules"
|
|
v-bind="{ paymentSchedule, i, onRefresh: getStuff }"
|
|
/>
|
|
</template>
|
|
<div v-else-if="isLoading" class="is-flex is-justify-content-center">
|
|
<SvgIcon v-bind="{ name: 'loading.svg', type: 'info', size: 24 }" />
|
|
</div>
|
|
<template v-else>
|
|
<p class="my-4 fs-20 has-text-centered has-text-grey">Giao dịch đã phân bổ hoàn tất!</p>
|
|
</template>
|
|
</div>
|
|
</template>
|