525 lines
20 KiB
Vue
525 lines
20 KiB
Vue
<template>
|
||
<div class="px-3">
|
||
<div v-if="loadingData" class="has-text-centered py-5">
|
||
<SvgIcon v-bind="{ name: 'loading.svg', type: 'primary', size: 18 }" />
|
||
<p class="mt-2">
|
||
{{ isVietnamese ? "Đang tải thông tin công nợ..." : "Loading payment schedule information..." }}
|
||
</p>
|
||
</div>
|
||
|
||
<div v-else-if="paymentScheduleData">
|
||
<div class="content">
|
||
<!-- Thông tin cơ bản (giữ nguyên) -->
|
||
<div class="columns is-multiline is-mobile">
|
||
<div class="column is-3">
|
||
<strong>{{ isVietnamese ? "Mã:" : "Schedule Code:" }}</strong>
|
||
<p>{{ paymentScheduleData.code || "-" }}</p>
|
||
</div>
|
||
<div class="column is-3">
|
||
<strong>{{ isVietnamese ? "Trạng thái:" : "Status:" }}</strong>
|
||
<p :class="{
|
||
'has-text-success': paymentScheduleData.status__name === 'Đã xác nhận' || paymentScheduleData.status__name === 'Paid',
|
||
'has-text-warning': paymentScheduleData.status__name === 'Chưa xác nhận' || paymentScheduleData.status__name === 'Pending',
|
||
'has-text-danger': paymentScheduleData.status__name === 'Quá hạn' || paymentScheduleData.status__name === 'Overdue'
|
||
}">
|
||
{{ paymentScheduleData.status__name || "-" }}
|
||
</p>
|
||
</div>
|
||
<div class="column is-3">
|
||
<strong>{{ isVietnamese ? "Loại thanh toán:" : "Payment Type:" }}</strong>
|
||
<p>{{ paymentScheduleData.type__name || "-" }}</p>
|
||
</div>
|
||
<div class="column is-3">
|
||
<strong>{{ isVietnamese ? "Đợt thanh toán:" : "Cycle:" }}</strong>
|
||
<p>{{ paymentScheduleData.cycle_days || 0 }} ngày</p>
|
||
</div>
|
||
<div class="column is-3">
|
||
<strong>{{ isVietnamese ? "Tiền gốc theo kỳ thanh toán:" : "Amount:" }}</strong>
|
||
<p class="has-text-weight-bold has-text-primary">{{ $numtoString(paymentScheduleData.amount) }}</p>
|
||
</div>
|
||
<div class="column is-3">
|
||
<strong>{{ isVietnamese ? "Số tiền gốc đã thanh toán:" : "Paid Amount:" }}</strong>
|
||
<p class="has-text-weight-bold has-text-primary">{{ $numtoString(paymentScheduleData.paid_amount) }}</p>
|
||
</div>
|
||
<div class="column is-3">
|
||
<strong>{{ isVietnamese ? "Số tiền gốc còn lại:" : "Remaining Principal:" }}</strong>
|
||
<p class="has-text-weight-bold"
|
||
:class="paymentScheduleData.amount_remain > 0 ? 'has-text-danger' : 'has-text-success'">
|
||
{{ $numtoString(paymentScheduleData.amount_remain) }}
|
||
</p>
|
||
</div>
|
||
<div class="column is-3">
|
||
<strong>{{ isVietnamese ? "Ngày đến hạn:" : "Due Date:" }}</strong>
|
||
<p :class="{ 'has-text-danger': isOverdue(paymentScheduleData.to_date && paymentScheduleData.ovd_days > 0) }">
|
||
{{ formatDate(paymentScheduleData.to_date) }}
|
||
<span v-if="isOverdue(paymentScheduleData.to_date && paymentScheduleData.ovd_days > 0 )" class="has-text-weight-bold">
|
||
(Quá hạn {{ paymentScheduleData.ovd_days }} ngày)
|
||
</span>
|
||
</p>
|
||
</div>
|
||
<div class="column is-3">
|
||
<strong>{{ isVietnamese ? "Tổng lãi phải thu:" : "Total Penalty Amount:" }}</strong>
|
||
<p class="has-text-weight-bold has-text-danger">
|
||
{{ paymentScheduleData.penalty_amount > 0 ? $numtoString(paymentScheduleData.penalty_amount) : "-" }}
|
||
</p>
|
||
</div>
|
||
<div class="column is-3">
|
||
<strong>{{ isVietnamese ? "Lãi phạt đã thanh toán:" : "Penalty Paid:" }}</strong>
|
||
<p class="has-text-weight-bold has-text-success">
|
||
{{ paymentScheduleData.penalty_paid > 0 ? $numtoString(paymentScheduleData.penalty_paid) : "-" }}
|
||
</p>
|
||
</div>
|
||
<div class="column is-3">
|
||
<strong>{{ isVietnamese ? "Lãi phạt còn lại:" : "Penalty Remaining:" }}</strong>
|
||
<p class="has-text-weight-bold has-text-danger">
|
||
{{ paymentScheduleData.penalty_remain > 0 ? $numtoString(paymentScheduleData.penalty_remain) : "-" }}
|
||
</p>
|
||
</div>
|
||
<div class="column is-3">
|
||
<strong>{{ isVietnamese ? "Miễn giảm lãi phạt:" : "Penalty Reduced:" }}</strong>
|
||
<p class="has-text-weight-bold has-text-primary">
|
||
{{ paymentScheduleData.penalty_reduce > 0 ? $numtoString(paymentScheduleData.penalty_reduce) : "-" }}
|
||
</p>
|
||
</div>
|
||
<div class="column is-3">
|
||
<strong>{{ isVietnamese ? "Tổng tiền phải thanh toán:" : "Total Remaining:" }}</strong>
|
||
<p class="has-text-weight-bold has-text-primary">{{ $numtoString(paymentScheduleData.remain_amount) }}</p>
|
||
</div>
|
||
<div class="column is-3">
|
||
<strong>{{ isVietnamese ? "Ghi chú:" : "Note:" }}</strong>
|
||
<p class="is-size-6">{{ paymentScheduleData.detail?.note || "-" }}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<hr />
|
||
|
||
|
||
|
||
|
||
<!-- Timeline lịch sử -->
|
||
|
||
|
||
<div v-if="processedEntries.length > 0" class="is-flex is-flex-direction-column is-gap-5" >
|
||
|
||
<div v-for="(item, index) in processedEntries" :key="index" class="is-flex is-align-items-start is-gap-4">
|
||
<div style="min-width: 3rem;">
|
||
<p class="is-size-5 has-text-weight-bold has-text-primary">
|
||
{{ formatDate(item.entry.date) }}
|
||
</p>
|
||
<p v-if="item.entry.code" class="is-size-6 has-text-grey">
|
||
{{ item.entry.code }}
|
||
</p>
|
||
</div>
|
||
|
||
<div class="is-flex-grow-1">
|
||
<p class="is-size-5 has-text-weight-bold has-text-dark mb-2">
|
||
{{ getEntryTypeLabel(item.entry.type) }}
|
||
<span v-if="item.entry.code" class="tag is-link is-light ml-2">
|
||
{{ item.entry.code }}
|
||
</span>
|
||
</p>
|
||
|
||
<div class="box is-shadowless p-4" style="border-left: 5px solid #204853;">
|
||
<div class="columns is-mobile is-multiline is-gap-3">
|
||
<div class="column is-6-mobile">
|
||
<span class="has-text-grey-light">Gốc trả:</span><br />
|
||
<span v-if="item.entry.principal > 0" class="has-text-success has-text-weight-semibold is-size-5">
|
||
{{ $numtoString(item.entry.principal) }}
|
||
</span>
|
||
<span v-else class="has-text-grey-light">-</span>
|
||
</div>
|
||
|
||
<div class="column is-6-mobile">
|
||
<span class="has-text-grey-light">Lãi trả:</span><br />
|
||
<span v-if="item.entry.penalty > 0" class="has-text-danger has-text-weight-semibold is-size-5">
|
||
{{ $numtoString(item.entry.penalty) }}
|
||
</span>
|
||
<span v-else class="has-text-grey-light">-</span>
|
||
</div>
|
||
|
||
<div class="column is-6-mobile">
|
||
<span class="has-text-grey-light">Gốc còn lại :</span><br />
|
||
<strong :class="item.principalRemain > 0 ? 'has-text-danger' : 'has-text-success'"
|
||
class="is-size-5">
|
||
{{ $numtoString(item.principalRemain) }}
|
||
</strong>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<!-- Chi tiết lãi phát sinh -->
|
||
<div class="">
|
||
<!-- Diễn giải chi tiết cách tính lãi kỳ này -->
|
||
<p v-if="item.penaltyThisPeriod > 0" class="is-size-6 has-text-grey">
|
||
Dư nợ gốc còn lại: {{ $numtoString(item.principalBefore) }} ×
|
||
{{ item.penaltyDetail.days }} ngày (từ {{ item.penaltyDetail.from }} đến {{ item.penaltyDetail.to
|
||
}}) × {{item.rate}}%/ngày = {{ $numtoString(item.penaltyThisPeriod) }}
|
||
</p>
|
||
|
||
<p class="is-size-6 mt-3">
|
||
<strong>Tổng lãi tích lũy đến {{ formatDate(item.entry.date) }}: </strong>
|
||
<span :class="item.penaltyAccumulated > 0 ? 'has-text-danger' : 'has-text-grey'">
|
||
{{ $numtoString(item.penaltyAccumulated) }}
|
||
</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tiền lãi hiện tại (nếu chưa hết nợ) -->
|
||
<div v-if="hasUnpaidDebt && latestPenaltyToThisEntry != paymentScheduleData.penalty_amount && processedEntries.length > 0 && latestPenaltyToThisEntry >0" class="mt-5 box has-background-warning-light">
|
||
|
||
<p class="is-size-5">
|
||
<strong>Lãi đến ngày thanh toán gần nhất ({{ latestEntryDate }}) :</strong> {{ $numtoString(latestPenaltyToThisEntry) }}
|
||
</p>
|
||
<p v-if="latestAdditionalPenalty > 0" class="is-size-5 mt-2">
|
||
<strong>Lãi phát sinh từ ngày {{ latestEntryDate }} đến nay:</strong> {{
|
||
$numtoString(latestAdditionalPenalty) }}
|
||
</p>
|
||
<p class="is-size-5 has-text-weight-bold mt-3">
|
||
Tổng lãi hiện tại : {{
|
||
$numtoString(latestPenaltyToThisEntry) }} + {{ $numtoString(latestAdditionalPenalty) }} = {{ $numtoString(paymentScheduleData.penalty_amount) }}
|
||
</p>
|
||
</div>
|
||
|
||
<hr />
|
||
|
||
<!-- Tóm tắt cuối cùng -->
|
||
<div class="columns is-mobile is-multiline">
|
||
<div class="column is-3-tablet is-6-mobile">
|
||
<p class="heading">Gốc đã trả</p>
|
||
<p class="title is-5 has-text-success">{{ $numtoString(paymentScheduleData.paid_amount) }}</p>
|
||
</div>
|
||
<div class="column is-3-tablet is-6-mobile">
|
||
<p class="heading">Gốc còn lại</p>
|
||
<p class="title is-5"
|
||
:class="paymentScheduleData.amount_remain > 0 ? 'has-text-danger' : 'has-text-success'">
|
||
{{ $numtoString(paymentScheduleData.amount_remain) }}
|
||
</p>
|
||
</div>
|
||
<div class="column is-3-tablet is-6-mobile">
|
||
<p class="heading">Lãi đã trả</p>
|
||
<p class="title is-5 has-text-success">{{ $numtoString(paymentScheduleData.penalty_paid) }}</p>
|
||
</div>
|
||
<div class="column is-3-tablet is-6-mobile">
|
||
<p class="heading">Lãi còn lại</p>
|
||
<p class="title is-5"
|
||
:class="paymentScheduleData.penalty_remain > 0 ? 'has-text-danger' : 'has-text-success'">
|
||
{{ $numtoString(paymentScheduleData.penalty_remain) }}
|
||
</p>
|
||
</div>
|
||
<div class="column is-3-tablet is-6-mobile">
|
||
<p class="heading">Tổng tiền phải thanh toán</p>
|
||
<p class="title is-5 has-text-primary">{{ $numtoString(paymentScheduleData.remain_amount) }}</p>
|
||
</div>
|
||
</div>
|
||
<div v-if="isConfirmAllowed && $getEditRights()" class="field is-grouped is-grouped-left ">
|
||
<p class="control">
|
||
<button class="button is-info mx-3 has-text-white" @click="handleViewEmail">
|
||
<span>Gửi thông báo</span>
|
||
</button>
|
||
<button v-if="paymentScheduleData.batch_date == null" class="button is-danger has-text-white"
|
||
:class="{ 'is-loading': isLoading }" @click="getPenalty" :disabled="isLoading">
|
||
<span>Tính lãi</span>
|
||
</button>
|
||
</p>
|
||
<Modal @close="showModalViewEmail = undefined" v-bind="showModalViewEmail" v-if="showModalViewEmail"></Modal>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, onMounted } from "vue";
|
||
import { useNuxtApp } from "#app";
|
||
import { useStore } from "@/stores/index";
|
||
import dayjs from "dayjs";
|
||
|
||
const props = defineProps({
|
||
scheduleItemId: {
|
||
type: [Number, String],
|
||
required: true,
|
||
},
|
||
});
|
||
|
||
const emit = defineEmits(["close", "confirmed"]);
|
||
|
||
const store = useStore();
|
||
const { $insertapi, $snackbar, $getEditRights, $getdata, $patchapi, $numtoString } = useNuxtApp();
|
||
|
||
const isLoading = ref(false);
|
||
const loadingData = ref(true);
|
||
const paymentScheduleData = ref(null);
|
||
const rule = ref(null);
|
||
const invoiceData = ref({
|
||
link: "",
|
||
ref_code: "",
|
||
});
|
||
const isUpdatingInvoice = ref(false);
|
||
const showModal = ref(null);
|
||
const showModalViewEmail = ref(null);
|
||
|
||
const isVietnamese = computed(() => store.lang === "vi");
|
||
|
||
const isOverdue = (dueDate) => {
|
||
if (!dueDate) return false;
|
||
return dayjs(dueDate).isBefore(dayjs(), "day");
|
||
};
|
||
|
||
const isConfirmAllowed = computed(() => paymentScheduleData.value?.status === 1);
|
||
const isInvoiceAllowed = computed(() => paymentScheduleData.value?.status === 2);
|
||
|
||
const formatDate = (dateString) => {
|
||
if (!dateString) return "-";
|
||
return dayjs(dateString).format("DD/MM/YYYY");
|
||
};
|
||
|
||
const getEntryTypeLabel = (type) => {
|
||
const labels = {
|
||
PAYMENT: "Thanh toán",
|
||
REDUCTION: "Miễn giảm",
|
||
};
|
||
return labels[type] || type;
|
||
};
|
||
|
||
// Xử lý timeline
|
||
const processedEntries = computed(() => {
|
||
if (!paymentScheduleData.value?.entry) return [];
|
||
|
||
const relevantEntries = paymentScheduleData.value.entry.filter(
|
||
(e) => e.type === "PAYMENT" && e.penalty_added_to_entry !== undefined
|
||
);
|
||
|
||
relevantEntries.sort((a, b) => new Date(a.date) - new Date(b.date));
|
||
|
||
let currentPrincipal = Number(paymentScheduleData.value.amount || 0);
|
||
let totalPenaltyAccumulated = 0;
|
||
let totalPenaltyPaid = Number(paymentScheduleData.value.penalty_paid || 0);
|
||
let lastDate = paymentScheduleData.value.to_date;
|
||
let principalBeforeThisPeriod = currentPrincipal;
|
||
|
||
const result = [];
|
||
|
||
relevantEntries.forEach((entry, index) => {
|
||
const entryDate = dayjs(entry.date);
|
||
const lastEventDate = dayjs(lastDate);
|
||
const days = entryDate.diff(lastEventDate, "day");
|
||
|
||
let penaltyThisPeriod = Number(entry.penalty_added_to_entry || 0);
|
||
|
||
totalPenaltyAccumulated += penaltyThisPeriod;
|
||
|
||
if (entry.type === "PAYMENT") {
|
||
const principalPaid = Number(entry.principal || 0);
|
||
const penaltyPaid = Number(entry.penalty || 0);
|
||
|
||
currentPrincipal -= principalPaid;
|
||
if (currentPrincipal < 0) currentPrincipal = 0;
|
||
|
||
totalPenaltyPaid += penaltyPaid;
|
||
principalBeforeThisPeriod = currentPrincipal;
|
||
}
|
||
|
||
lastDate = entry.date;
|
||
|
||
const penaltyRemain = totalPenaltyAccumulated - totalPenaltyPaid;
|
||
|
||
result.push({
|
||
entry,
|
||
principalRemain: Number(entry.amount_remain_after_allocation || 0), // Gốc còn lại sau bút toán này
|
||
principalBefore: Number(entry.amount_remain_after_allocation || 0) + Number(entry.principal || 0), // Dư nợ trước khi trừ principal của bút toán này
|
||
penaltyAccumulated: totalPenaltyAccumulated,
|
||
penaltyThisPeriod,
|
||
penaltyRemain,
|
||
rate:Number(entry.DAILY_PENALTY_RATE || 0)*100,
|
||
totalDebt: Number(entry.amount_remain_after_allocation || 0) + penaltyThisPeriod,
|
||
penaltyDetail: {
|
||
from: lastEventDate.format("DD/MM/YYYY"),
|
||
to: entryDate.format("DD/MM/YYYY"),
|
||
days,
|
||
},
|
||
});
|
||
});
|
||
|
||
return result;
|
||
});
|
||
|
||
// Tiền lãi hiện tại (từ entry gần nhất)
|
||
const latestEntry = computed(() => {
|
||
if (!paymentScheduleData.value?.entry?.length) return null;
|
||
const paymentEntries = paymentScheduleData.value.entry.filter(
|
||
e => e.type === "PAYMENT" && e.penalty_to_this_entry !== undefined
|
||
);
|
||
if (paymentEntries.length === 0) return null;
|
||
return paymentEntries[paymentEntries.length - 1];
|
||
});
|
||
|
||
const hasUnpaidDebt = computed(() => {
|
||
return (
|
||
paymentScheduleData.value?.amount_remain > 0 ||
|
||
paymentScheduleData.value?.penalty_remain > 0
|
||
);
|
||
});
|
||
|
||
const latestPenaltyToThisEntry = computed(() => {
|
||
return latestEntry.value?.penalty_to_this_entry || 0;
|
||
});
|
||
|
||
const latestAdditionalPenalty = computed(() => {
|
||
return paymentScheduleData.value?.penalty_amount - latestEntry.value?.penalty_to_this_entry || 0;
|
||
});
|
||
|
||
const latestTotalPenalty = computed(() => {
|
||
return latestPenaltyToThisEntry.value + latestAdditionalPenalty.value;
|
||
});
|
||
|
||
const latestEntryCode = computed(() => {
|
||
return latestEntry.value?.code || "-";
|
||
});
|
||
|
||
const latestEntryDate = computed(() => {
|
||
return latestEntry.value?.date ? formatDate(latestEntry.value.date) : "-";
|
||
});
|
||
|
||
const fetchPaymentScheduleData = async () => {
|
||
loadingData.value = true;
|
||
try {
|
||
const data = await $getdata("payment_schedule", { id: props.scheduleItemId }, undefined, true);
|
||
const ruleData = await $getdata("bizsetting", { code: "rule" }, undefined, true);
|
||
|
||
rule.value =
|
||
ruleData?.detail === "fee-principal"
|
||
? "Lãi phạt quá hạn trước - Gốc sau"
|
||
: "Tiền gốc trước - Lãi phạt quá hạn sau";
|
||
|
||
paymentScheduleData.value = data;
|
||
|
||
if (data?.link) invoiceData.value.link = data.link;
|
||
if (data?.ref_code) invoiceData.value.ref_code = data.ref_code;
|
||
} catch (e) {
|
||
console.error("Error fetching payment schedule data:", e);
|
||
$snackbar(
|
||
isVietnamese.value ? "Không thể tải thông tin công nợ." : "Failed to load payment schedule information.",
|
||
"Lỗi",
|
||
"Error"
|
||
);
|
||
} finally {
|
||
loadingData.value = false;
|
||
}
|
||
};
|
||
|
||
const getPenalty = async () => {
|
||
isLoading.value = true;
|
||
const target_item = paymentScheduleData.value;
|
||
const workflowPayload = {
|
||
workflow_code: "CALCULATE_LATE_PAYMENT_PENALTY",
|
||
trigger: "create",
|
||
target_item,
|
||
};
|
||
try {
|
||
const response = await $insertapi("workflow", workflowPayload, undefined, false);
|
||
if (response === "error" || !response?.success) throw new Error("Calculate penalty failed");
|
||
$snackbar("Tính lãi thành công!", "Thành công", "Success");
|
||
await fetchPaymentScheduleData();
|
||
} catch (e) {
|
||
$snackbar("Có lỗi xảy ra khi tính lãi.", "Lỗi", "Error");
|
||
} finally {
|
||
isLoading.value = false;
|
||
}
|
||
};
|
||
|
||
const handleUpdateInvoice = async () => {
|
||
if (!invoiceData.value.link || !invoiceData.value.ref_code) {
|
||
$snackbar(
|
||
isVietnamese.value ? "Vui lòng nhập đầy đủ link và mã xác thực" : "Please enter both link and reference code",
|
||
"Cảnh báo",
|
||
"Warning"
|
||
);
|
||
return;
|
||
}
|
||
|
||
isUpdatingInvoice.value = true;
|
||
try {
|
||
const response = await $patchapi(
|
||
"payment_schedule",
|
||
{
|
||
id: props.scheduleItemId,
|
||
link: invoiceData.value.link,
|
||
ref_code: invoiceData.value.ref_code,
|
||
},
|
||
undefined,
|
||
false
|
||
);
|
||
if (response === "error" || !response) throw new Error("Update failed");
|
||
$snackbar(
|
||
isVietnamese.value ? "Cập nhật hóa đơn thành công!" : "Invoice updated successfully!",
|
||
"Thành công",
|
||
"Success"
|
||
);
|
||
await fetchPaymentScheduleData();
|
||
} catch (error) {
|
||
console.error("Error updating invoice:", error);
|
||
$snackbar(
|
||
isVietnamese.value ? "Có lỗi xảy ra khi cập nhật hóa đơn" : "Error updating invoice",
|
||
"Lỗi",
|
||
"Error"
|
||
);
|
||
} finally {
|
||
isUpdatingInvoice.value = false;
|
||
}
|
||
};
|
||
|
||
const resetInvoiceData = () => {
|
||
invoiceData.value = { link: "", ref_code: "" };
|
||
};
|
||
|
||
function openEntryDetailModal(entry) {
|
||
if (!entry.code) return;
|
||
showModal.value = {
|
||
component: "accounting/InternalEntry",
|
||
title: `Chi tiết bút toán: ${entry.code}`,
|
||
height: "500px",
|
||
width: "80%",
|
||
vbind: {
|
||
row: { code: entry.code },
|
||
},
|
||
};
|
||
}
|
||
|
||
async function handleViewEmail() {
|
||
const emailTemplate = await $getdata(
|
||
"emailtemplate",
|
||
{ name: "Mail Thông báo đến hạn thanh toán" },
|
||
undefined,
|
||
false
|
||
);
|
||
showModalViewEmail.value = {
|
||
component: "marketing/email/viewEmail/ViewEmail",
|
||
title: "Xem trước nội dung nhắc thanh toán",
|
||
width: "60%",
|
||
vbind: {
|
||
idEmailTemplate: emailTemplate[0]?.id || null,
|
||
scheduleItemId: props.scheduleItemId,
|
||
},
|
||
onConfirm: () => { },
|
||
};
|
||
}
|
||
|
||
const handleModalClose = () => {
|
||
showModal.value = null;
|
||
};
|
||
|
||
const handleConfirmDelete = () => {
|
||
showModal.value = null;
|
||
};
|
||
|
||
onMounted(() => {
|
||
fetchPaymentScheduleData();
|
||
});
|
||
</script> |