fix: show payable amount after discount on payment views
Hide the payable row when there is no discount, clamp create-form discounts, and cap notes length.
This commit is contained in:
@@ -33,7 +33,7 @@
|
|||||||
<span class="text-muted text-xs block mb-1">تخفیف</span>
|
<span class="text-muted text-xs block mb-1">تخفیف</span>
|
||||||
<span class="font-semibold text-orange-500 text-lg">{{ toPersianDigits((payment.discount || 0).toLocaleString()) }} تومان</span>
|
<span class="font-semibold text-orange-500 text-lg">{{ toPersianDigits((payment.discount || 0).toLocaleString()) }} تومان</span>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div v-if="payment.discount">
|
||||||
<span class="text-muted text-xs block mb-1">مبلغ قابل پرداخت</span>
|
<span class="text-muted text-xs block mb-1">مبلغ قابل پرداخت</span>
|
||||||
<span class="font-bold text-color text-xl">{{ toPersianDigits(payableAmount.toLocaleString()) }} تومان</span>
|
<span class="font-bold text-color text-xl">{{ toPersianDigits(payableAmount.toLocaleString()) }} تومان</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -120,6 +120,7 @@
|
|||||||
v-model="trxForm.notes"
|
v-model="trxForm.notes"
|
||||||
rows="3"
|
rows="3"
|
||||||
class="w-full text-sm"
|
class="w-full text-sm"
|
||||||
|
maxlength="5000"
|
||||||
placeholder="یادداشت داخلی درباره این تراکنش…"
|
placeholder="یادداشت داخلی درباره این تراکنش…"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -151,6 +151,7 @@
|
|||||||
v-model="createForm.notes"
|
v-model="createForm.notes"
|
||||||
rows="3"
|
rows="3"
|
||||||
class="w-full text-sm"
|
class="w-full text-sm"
|
||||||
|
maxlength="5000"
|
||||||
placeholder="یادداشت داخلی درباره این صورتحساب…"
|
placeholder="یادداشت داخلی درباره این صورتحساب…"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -267,6 +268,7 @@ const onClassesSelected = () => {
|
|||||||
|
|
||||||
if (!createForm.classes || createForm.classes.length === 0) {
|
if (!createForm.classes || createForm.classes.length === 0) {
|
||||||
createForm.amount = 0;
|
createForm.amount = 0;
|
||||||
|
createForm.discount = 0;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
let totalFee = 0;
|
let totalFee = 0;
|
||||||
@@ -279,6 +281,9 @@ const onClassesSelected = () => {
|
|||||||
if (totalFee > 0) {
|
if (totalFee > 0) {
|
||||||
createForm.amount = totalFee;
|
createForm.amount = totalFee;
|
||||||
}
|
}
|
||||||
|
if ((createForm.discount || 0) > (createForm.amount || 0)) {
|
||||||
|
createForm.discount = createForm.amount || 0;
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const resetCreateForm = () => {
|
const resetCreateForm = () => {
|
||||||
|
|||||||
@@ -158,7 +158,10 @@
|
|||||||
<DataTable :value="payments" class="p-datatable-sm text-sm">
|
<DataTable :value="payments" class="p-datatable-sm text-sm">
|
||||||
<Column field="amount" header="مبلغ کل">
|
<Column field="amount" header="مبلغ کل">
|
||||||
<template #body="{ data }">
|
<template #body="{ data }">
|
||||||
{{ toPersianDigits(data.amount?.toLocaleString()) }} تومان
|
<div>{{ toPersianDigits(getPayableAmount(data).toLocaleString()) }} تومان</div>
|
||||||
|
<small v-if="data.discount" class="text-muted text-xs">
|
||||||
|
تخفیف {{ toPersianDigits((data.discount || 0).toLocaleString()) }} تومان
|
||||||
|
</small>
|
||||||
</template>
|
</template>
|
||||||
</Column>
|
</Column>
|
||||||
<Column field="paidAmount" header="پرداختی">
|
<Column field="paidAmount" header="پرداختی">
|
||||||
@@ -217,6 +220,7 @@ import { userApi } from '@/api/userApi';
|
|||||||
import { courseApi } from '@/api/courseApi';
|
import { courseApi } from '@/api/courseApi';
|
||||||
import { usePersianDate } from '@/composables/usePersianDate';
|
import { usePersianDate } from '@/composables/usePersianDate';
|
||||||
import { useToast } from '@/composables/useToast';
|
import { useToast } from '@/composables/useToast';
|
||||||
|
import { getPayableAmount } from '@/utils/paymentAmount';
|
||||||
import PageHeader from '@/components/common/PageHeader.vue';
|
import PageHeader from '@/components/common/PageHeader.vue';
|
||||||
import PermissionGate from '@/components/common/PermissionGate.vue';
|
import PermissionGate from '@/components/common/PermissionGate.vue';
|
||||||
import StatusTag from '@/components/common/StatusTag.vue';
|
import StatusTag from '@/components/common/StatusTag.vue';
|
||||||
|
|||||||
Reference in New Issue
Block a user