fix: quotation pay split amount input behavior

This commit is contained in:
puriphatt 2024-12-25 16:40:11 +07:00
parent cc8ef8c97b
commit 8e3ac4a264

View file

@ -20,7 +20,7 @@ defineEmits<{
(e: 'changePayType', type: PayCondition): void; (e: 'changePayType', type: PayCondition): void;
}>(); }>();
const props = defineProps<{ defineProps<{
readonly?: boolean; readonly?: boolean;
quotationNo?: string; quotationNo?: string;
installmentNo?: number[]; installmentNo?: number[];
@ -111,42 +111,42 @@ function calculateInstallments(param: {
if (param.newCount !== null && param.oldCount !== null) { if (param.newCount !== null && param.oldCount !== null) {
const totalAmount = summaryPrice.value.finalPrice; const totalAmount = summaryPrice.value.finalPrice;
if (param.newCount > param.oldCount) { // if (param.newCount > param.oldCount) {
const installmentAmount = +(totalAmount / param.newCount).toFixed(2); // const installmentAmount = +(totalAmount / param.newCount).toFixed(2);
// Update existing // // Update existing
paySplit.value.forEach((payment, i) => { // paySplit.value.forEach((payment, i) => {
if (i !== param.customIndex) { // if (i !== param.customIndex) {
payment.amount = installmentAmount; // payment.amount = installmentAmount;
amount4Show.value[i] = installmentAmount.toString(); // amount4Show.value[i] = installmentAmount.toString();
} // }
}); // });
// Add // // Add
for (let i = param.oldCount; i < param.newCount; i++) { // for (let i = param.oldCount; i < param.newCount; i++) {
paySplit.value.push({ // paySplit.value.push({
no: i + 1, // no: i + 1,
amount: installmentAmount, // amount: installmentAmount,
}); // });
amount4Show.value.push(installmentAmount.toString()); // amount4Show.value.push(installmentAmount.toString());
} // }
} else if (param.newCount < param.oldCount) { // } else if (param.newCount < param.oldCount) {
// Remove extra // // Remove extra
paySplit.value.splice(param.newCount, param.oldCount - param.newCount); // paySplit.value.splice(param.newCount, param.oldCount - param.newCount);
amount4Show.value.splice(param.newCount, param.oldCount - param.newCount); // amount4Show.value.splice(param.newCount, param.oldCount - param.newCount);
// Recalculate // // Recalculate
const installmentAmount = +(totalAmount / param.newCount).toFixed(2); // const installmentAmount = +(totalAmount / param.newCount).toFixed(2);
paySplit.value.forEach((payment, i) => { // paySplit.value.forEach((payment, i) => {
if (i !== param.customIndex) { // if (i !== param.customIndex) {
payment.amount = installmentAmount; // payment.amount = installmentAmount;
amount4Show.value[i] = installmentAmount.toString(); // amount4Show.value[i] = installmentAmount.toString();
} // }
}); // });
} else if (param.newCount === param.oldCount) { if (param.newCount === param.oldCount) {
if (param.customIndex !== undefined && param.customAmount !== undefined) { if (param.customIndex !== undefined && param.customAmount !== undefined) {
paySplit.value[param.customIndex].amount = param.customAmount; paySplit.value[param.customIndex].amount = param.customAmount;
amount4Show.value[param.customIndex] = param.customAmount.toString(); // amount4Show.value[param.customIndex] = param.customAmount.toString();
} }
} }
@ -159,8 +159,11 @@ function calculateInstallments(param: {
const remainingAmount = totalAmount - totalPreviousPayments; const remainingAmount = totalAmount - totalPreviousPayments;
paySplit.value[paySplit.value.length - 1].amount = paySplit.value[paySplit.value.length - 1].amount =
+remainingAmount.toFixed(2); +remainingAmount.toFixed(2);
amount4Show.value[amount4Show.value.length - 1] = amount4Show.value[amount4Show.value.length - 1] = commaInput(
(+remainingAmount.toFixed(2)).toString(); paySplit.value[paySplit.value.length - 1].amount.toString(),
);
// amount4Show.value[amount4Show.value.length - 1] =
// (+remainingAmount.toFixed(2)).toString();
} }
} }
} }
@ -180,6 +183,15 @@ function calculateInstallments(param: {
// }, // },
// { deep: true }, // { deep: true },
// ); // );
watch(
() => paySplit.value,
() => {
amount4Show.value = paySplit.value.map((payment) =>
commaInput(payment.amount.toString()),
);
},
);
</script> </script>
<template> <template>
@ -296,28 +308,36 @@ function calculateInstallments(param: {
:readonly="readonly || payType === 'Split'" :readonly="readonly || payType === 'Split'"
class="col q-mx-sm" class="col q-mx-sm"
:label="$t('quotation.amount')" :label="$t('quotation.amount')"
:model-value="commaInput(period.amount.toString())" :model-value="
amount4Show[i] || commaInput(period.amount.toString())
"
dense dense
outlined outlined
debounce="500" @blur="
@focus="(e) => (e.target as HTMLInputElement).select()" () => {
period.amount = Number(amount4Show[i]?.replace(/,/g, ''));
if (period.amount % 1 === 0) {
const [, dec] = amount4Show[i].split('.');
if (!dec) {
amount4Show[i] += '.00';
}
}
}
"
@update:model-value=" @update:model-value="
(v) => { (v) => {
if (readonly) return; if (readonly) return;
if (typeof v === 'string') amount4Show[i] = commaInput(v); amount4Show[i] = commaInput(
const x = parseFloat( v?.toString() || '0',
amount4Show[i] && typeof amount4Show[i] === 'string' 'string',
? amount4Show[i].replace(/,/g, '')
: '',
); );
period.amount = precisionRound(x);
commaInput(period.amount.toString());
calculateInstallments({ calculateInstallments({
customIndex: i, customIndex: i,
customAmount: x, customAmount: parseFloat(
amount4Show[i].replace(/,/g, ''),
),
newCount: paySplit.length, newCount: paySplit.length,
oldCount: paySplit.length, oldCount: paySplit.length,
}); });