557 lines
16 KiB
Vue
557 lines
16 KiB
Vue
<script lang="ts" setup>
|
|
import { Icon } from '@iconify/vue';
|
|
import { ref, watch, computed } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
import { View } from './types.ts';
|
|
|
|
import { formatNumberDecimal, commaInput } from 'stores/utils';
|
|
|
|
import { useConfigStore } from 'stores/config';
|
|
import AppBox from 'components/app/AppBox.vue';
|
|
import DatePicker from 'src/components/shared/DatePicker.vue';
|
|
import SelectInput from 'src/components/shared/SelectInput.vue';
|
|
|
|
import { storeToRefs } from 'pinia';
|
|
import { precisionRound } from 'src/utils/arithmetic';
|
|
import { PayCondition } from 'src/stores/quotations/types.ts';
|
|
|
|
defineEmits<{
|
|
(e: 'changePayType', type: PayCondition): void;
|
|
}>();
|
|
|
|
defineProps<{
|
|
readonly?: boolean;
|
|
quotationNo?: string;
|
|
installmentNo?: number[];
|
|
installmentAmount?: number;
|
|
|
|
view?: View;
|
|
data?: {
|
|
total: number;
|
|
discount: number;
|
|
totalVatExcluded: number;
|
|
totalVatIncluded: number;
|
|
totalAfterDiscount: number;
|
|
};
|
|
taskOrder?: boolean;
|
|
taskOrderComplete?: boolean;
|
|
debitNote?: boolean;
|
|
}>();
|
|
|
|
const { t } = useI18n();
|
|
const configStore = useConfigStore();
|
|
const { data: config } = storeToRefs(configStore);
|
|
const payBillDate = defineModel<Date | null | undefined>('payBillDate', {
|
|
required: false,
|
|
});
|
|
const payType = defineModel<PayCondition>('payType', { required: true });
|
|
const paySplitCount = defineModel<number | null>('paySplitCount', {
|
|
default: 1,
|
|
});
|
|
const paySplit = defineModel<{ no: number; name?: string; amount: number }[]>(
|
|
'paySplit',
|
|
{ required: true },
|
|
);
|
|
const summaryPrice = defineModel<{
|
|
totalPrice: number;
|
|
totalDiscount: number;
|
|
vat: number;
|
|
vatExcluded: number;
|
|
finalPrice: number;
|
|
}>('summaryPrice', {
|
|
required: true,
|
|
default: {
|
|
totalPrice: 0,
|
|
totalDiscount: 0,
|
|
vat: 0,
|
|
vatExcluded: 0,
|
|
finalPrice: 0,
|
|
},
|
|
});
|
|
|
|
// const finalDiscount = defineModel<number>('finalDiscount', { default: 0 });
|
|
// const finalDiscount4Show = ref<string>(finalDiscount.value.toString());
|
|
const payTypeOption = computed(() => [
|
|
{
|
|
value: 'Full',
|
|
label: t('quotation.type.fullAmountCash'),
|
|
},
|
|
{
|
|
value: 'Split',
|
|
label: t('quotation.type.installmentsCash'),
|
|
},
|
|
{
|
|
value: 'SplitCustom',
|
|
label: t('quotation.type.installmentsCustomCash'),
|
|
},
|
|
]);
|
|
const amount4Show = ref<string[]>([]);
|
|
|
|
function handleSplitCount(count: number) {
|
|
if (count > paySplit.value.length) {
|
|
paySplit.value.push({ no: Number(count), amount: 0 });
|
|
} else {
|
|
paySplit.value[paySplit.value.length - 2].amount =
|
|
paySplit.value[paySplit.value.length - 1].amount +
|
|
paySplit.value[paySplit.value.length - 2].amount;
|
|
paySplit.value.pop();
|
|
}
|
|
}
|
|
|
|
function calculateInstallments(param: {
|
|
customIndex?: number;
|
|
customAmount?: number;
|
|
newCount: number;
|
|
oldCount: number;
|
|
}) {
|
|
if (payType.value !== 'SplitCustom' && payType.value !== 'BillSplitCustom') {
|
|
return;
|
|
}
|
|
|
|
if (param.newCount !== null && param.oldCount !== null) {
|
|
const totalAmount = summaryPrice.value.finalPrice;
|
|
|
|
// if (param.newCount > param.oldCount) {
|
|
// const installmentAmount = +(totalAmount / param.newCount).toFixed(2);
|
|
|
|
// // Update existing
|
|
// paySplit.value.forEach((payment, i) => {
|
|
// if (i !== param.customIndex) {
|
|
// payment.amount = installmentAmount;
|
|
// amount4Show.value[i] = installmentAmount.toString();
|
|
// }
|
|
// });
|
|
|
|
// // Add
|
|
// for (let i = param.oldCount; i < param.newCount; i++) {
|
|
// paySplit.value.push({
|
|
// no: i + 1,
|
|
// amount: installmentAmount,
|
|
// });
|
|
// amount4Show.value.push(installmentAmount.toString());
|
|
// }
|
|
// } else if (param.newCount < param.oldCount) {
|
|
// // Remove extra
|
|
// paySplit.value.splice(param.newCount, param.oldCount - param.newCount);
|
|
// amount4Show.value.splice(param.newCount, param.oldCount - param.newCount);
|
|
|
|
// // Recalculate
|
|
// const installmentAmount = +(totalAmount / param.newCount).toFixed(2);
|
|
// paySplit.value.forEach((payment, i) => {
|
|
// if (i !== param.customIndex) {
|
|
// payment.amount = installmentAmount;
|
|
// amount4Show.value[i] = installmentAmount.toString();
|
|
// }
|
|
// });
|
|
if (param.newCount === param.oldCount) {
|
|
if (param.customIndex !== undefined && param.customAmount !== undefined) {
|
|
// paySplit.value[param.customIndex].amount = param.customAmount;
|
|
paySplit.value[param.customIndex].amount = Number(
|
|
amount4Show.value[param.customIndex]?.replace(/,/g, ''),
|
|
);
|
|
if (paySplit.value[param.customIndex].amount % 1 === 0) {
|
|
const [, dec] = amount4Show.value[param.customIndex].split('.');
|
|
if (!dec) {
|
|
amount4Show.value[param.customIndex] += '.00';
|
|
}
|
|
}
|
|
|
|
// amount4Show.value[param.customIndex] = param.customAmount.toString();
|
|
}
|
|
}
|
|
|
|
// Calculate last
|
|
if (paySplit.value.length > 0) {
|
|
const totalPreviousPayments = paySplit.value
|
|
.slice(0, -1)
|
|
.reduce((sum, payment) => sum + payment.amount, 0);
|
|
|
|
const remainingAmount = totalAmount - totalPreviousPayments;
|
|
paySplit.value[paySplit.value.length - 1].amount =
|
|
+remainingAmount.toFixed(2);
|
|
amount4Show.value[amount4Show.value.length - 1] = commaInput(
|
|
paySplit.value[paySplit.value.length - 1].amount.toString(),
|
|
);
|
|
// amount4Show.value[amount4Show.value.length - 1] =
|
|
// (+remainingAmount.toFixed(2)).toString();
|
|
}
|
|
}
|
|
}
|
|
|
|
// watch(
|
|
// () => [paySplitCount.value, summaryPrice.value.finalPrice],
|
|
// ([newCount, _newF], [oldCount, _oldF]) => {
|
|
// if (
|
|
// paySplitCount.value === 0 ||
|
|
// !paySplitCount.value ||
|
|
// !summaryPrice.value.finalPrice ||
|
|
// props.readonly
|
|
// ) {
|
|
// return;
|
|
// }
|
|
// calculateInstallments({ newCount: newCount || 0, oldCount: oldCount || 0 });
|
|
// },
|
|
// { deep: true },
|
|
// );
|
|
|
|
watch(
|
|
() => paySplit.value,
|
|
() => {
|
|
amount4Show.value = paySplit.value.map((payment) =>
|
|
commaInput(payment.amount.toString()),
|
|
);
|
|
},
|
|
{ deep: true },
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<AppBox
|
|
no-padding
|
|
bordered
|
|
class="main-color"
|
|
:class="{
|
|
row: $q.screen.gt.sm,
|
|
column: $q.screen.lt.md,
|
|
'invoice-color': view === View.Invoice,
|
|
'receipt-color': view === View.Receipt,
|
|
'task-order-color': taskOrder && !taskOrderComplete,
|
|
'debit-note-color': debitNote,
|
|
}"
|
|
>
|
|
<div class="col bordered-r" v-if="!taskOrder">
|
|
<div class="bordered-b q-px-md q-py-sm row bg-color-light items-center">
|
|
<div class="icon-wrapper bg-color q-mr-sm">
|
|
<q-icon name="mdi-bank-outline" />
|
|
</div>
|
|
<span class="text-weight-bold">
|
|
{{ $t('quotation.paymentCondition') }}
|
|
</span>
|
|
</div>
|
|
<div class="q-pa-sm">
|
|
<div class="row q-col-gutter-sm">
|
|
<section class="row q-col-gutter-sm col-12 items-center">
|
|
<SelectInput
|
|
class="col-md-6 col-12"
|
|
:label="$t('quotation.payType')"
|
|
:option="
|
|
taskOrder
|
|
? payTypeOption.filter((v) => v.value === 'Full')
|
|
: payTypeOption
|
|
"
|
|
:readonly
|
|
id="pay-type"
|
|
:model-value="payType"
|
|
@update:model-value="
|
|
(v) => {
|
|
payType = v as PayCondition;
|
|
$emit('changePayType', v as PayCondition);
|
|
}
|
|
"
|
|
/>
|
|
|
|
<div
|
|
class="col-md-6 col-12"
|
|
:class="{ 'q-pl-md': $q.screen.lt.md }"
|
|
v-if="payType === 'Split' || payType === 'SplitCustom'"
|
|
>
|
|
<div class="row full-width items-center justify-between q-py-xs">
|
|
<div class="column">
|
|
<span style="color: var(--foreground)">
|
|
{{ $t('quotation.paySplitCount') }}
|
|
</span>
|
|
<span class="app-text-muted text-caption">
|
|
({{
|
|
$t('quotation.payTotal', {
|
|
msg:
|
|
formatNumberDecimal(
|
|
Math.max(summaryPrice.finalPrice, 0),
|
|
2,
|
|
) || 0,
|
|
})
|
|
}})
|
|
</span>
|
|
</div>
|
|
<q-input
|
|
v-model="paySplitCount"
|
|
:readonly="readonly || payType === 'Split'"
|
|
class="col-3"
|
|
type="number"
|
|
dense
|
|
outlined
|
|
min="1"
|
|
@update:model-value="
|
|
(i) => {
|
|
paySplitCount = Number(i);
|
|
handleSplitCount(Number(i));
|
|
}
|
|
"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section
|
|
v-if="payType === 'Split' || payType === 'SplitCustom'"
|
|
class="col-12 text-caption"
|
|
style="padding-left: 20px"
|
|
>
|
|
<template
|
|
v-for="(period, i) in installmentNo?.length > 0
|
|
? paySplit.filter((value) => installmentNo?.includes(value.no))
|
|
: paySplit"
|
|
:key="period.no"
|
|
>
|
|
<div
|
|
class="row app-text-muted items-center"
|
|
:class="{ 'q-mb-sm': i !== paySplit.length }"
|
|
>
|
|
{{ `${$t('quotation.periodNo')} ${i + 1}` }}
|
|
<q-input
|
|
:readonly="readonly"
|
|
:label="$t('general.name')"
|
|
v-if="payType === 'SplitCustom'"
|
|
v-model="period.name"
|
|
class="col q-mx-sm"
|
|
dense
|
|
outlined
|
|
/>
|
|
<q-input
|
|
:readonly="readonly || payType === 'Split'"
|
|
class="col q-mx-sm"
|
|
:label="$t('quotation.amount')"
|
|
:model-value="
|
|
amount4Show[i] || commaInput(period.amount.toString())
|
|
"
|
|
dense
|
|
outlined
|
|
@blur="
|
|
() => {
|
|
period.amount = Number(amount4Show[i]?.replace(/,/g, ''));
|
|
if (period.amount % 1 === 0) {
|
|
const [, dec] = amount4Show[i].split('.');
|
|
if (!dec) {
|
|
amount4Show[i] += '.00';
|
|
}
|
|
}
|
|
|
|
calculateInstallments({
|
|
customIndex: i,
|
|
customAmount: parseFloat(
|
|
amount4Show[i].replace(/,/g, ''),
|
|
),
|
|
newCount: paySplit.length,
|
|
oldCount: paySplit.length,
|
|
});
|
|
|
|
const lastAmount = paySplit.at(-1);
|
|
if ((lastAmount?.amount || 0) < 0) {
|
|
period.amount = precisionRound(
|
|
paySplit[i].amount + (paySplit.at(-1)?.amount || 0),
|
|
);
|
|
amount4Show[i] = period.amount.toString();
|
|
if (lastAmount) lastAmount.amount = 0;
|
|
amount4Show[amount4Show.length - 1] = '0';
|
|
}
|
|
}
|
|
"
|
|
@update:model-value="
|
|
(v) => {
|
|
if (readonly) return;
|
|
|
|
amount4Show[i] = commaInput(
|
|
v?.toString() || '0',
|
|
'string',
|
|
);
|
|
}
|
|
"
|
|
>
|
|
<template #prepend>
|
|
<q-icon name="mdi-cash" color="primary" />
|
|
</template>
|
|
</q-input>
|
|
</div>
|
|
</template>
|
|
</section>
|
|
|
|
<DatePicker
|
|
v-if="payType === 'BillFull'"
|
|
:readonly
|
|
class="col-12"
|
|
:label="$t('quotation.callDueDate')"
|
|
v-model="payBillDate"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<div class="bordered-b q-px-md q-py-sm row bg-color-light items-center">
|
|
<div class="icon-wrapper bg-color q-mr-sm">
|
|
<Icon icon="iconoir:coins" />
|
|
</div>
|
|
<span class="text-weight-bold">
|
|
{{ $t('quotation.summary') }}
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="q-pa-sm price-container"
|
|
v-if="payType !== 'SplitCustom' || view !== View.Invoice"
|
|
>
|
|
<div class="row">
|
|
{{ $t('general.total') }}
|
|
<span class="q-ml-auto">
|
|
{{ formatNumberDecimal(summaryPrice.totalPrice, 2) }}
|
|
฿
|
|
</span>
|
|
</div>
|
|
<div class="row">
|
|
{{ $t('quotation.discountList') }}
|
|
<span class="q-ml-auto">
|
|
{{ formatNumberDecimal(summaryPrice.totalDiscount, 2) || 0 }} ฿
|
|
</span>
|
|
</div>
|
|
<div class="row">
|
|
{{ $t('general.totalAfterDiscount') }}
|
|
<span class="q-ml-auto">
|
|
{{
|
|
formatNumberDecimal(
|
|
summaryPrice.totalPrice - summaryPrice.totalDiscount,
|
|
2,
|
|
)
|
|
}}
|
|
฿
|
|
</span>
|
|
</div>
|
|
<div class="row">
|
|
{{ $t('general.totalVatExcluded') }}
|
|
<span class="q-ml-auto">
|
|
{{ formatNumberDecimal(summaryPrice.vatExcluded, 2) || 0 }}
|
|
฿
|
|
</span>
|
|
</div>
|
|
<div class="row">
|
|
{{
|
|
$t('general.vat', {
|
|
msg: `${config && Math.round(config.vat * 100)}%`,
|
|
})
|
|
}}
|
|
<span class="q-ml-auto">
|
|
{{ formatNumberDecimal(summaryPrice.vat, 2) }} ฿
|
|
</span>
|
|
</div>
|
|
<div class="row">
|
|
{{ $t('general.totalVatIncluded') }}
|
|
<span class="q-ml-auto">
|
|
{{
|
|
formatNumberDecimal(
|
|
summaryPrice.totalPrice - summaryPrice.totalDiscount,
|
|
2,
|
|
)
|
|
}}
|
|
฿
|
|
</span>
|
|
</div>
|
|
<!-- <div class="row">
|
|
{{ $t('general.discountAfterVat') }}
|
|
<q-input
|
|
:readonly
|
|
dense
|
|
outlined
|
|
class="q-ml-auto price-tag"
|
|
style="padding-inline: none !important"
|
|
input-class="text-right"
|
|
debounce="500"
|
|
:model-value="commaInput(finalDiscount.toString() || '0')"
|
|
@focus="(e) => (e.target as HTMLInputElement).select()"
|
|
@update:model-value="
|
|
(v) => {
|
|
if (typeof v === 'string') finalDiscount4Show = commaInput(v);
|
|
const x = parseFloat(
|
|
finalDiscount4Show && typeof finalDiscount4Show === 'string'
|
|
? finalDiscount4Show.replace(/,/g, '')
|
|
: '',
|
|
);
|
|
finalDiscount = x;
|
|
}
|
|
"
|
|
/>
|
|
</div> -->
|
|
</div>
|
|
<div class="q-pa-sm row surface-2 items-center text-weight-bold">
|
|
{{ $t('quotation.totalPriceBaht') }}
|
|
|
|
<span class="q-ml-auto" style="color: var(--brand-1)">
|
|
{{
|
|
payType === 'SplitCustom' && view === View.Invoice
|
|
? formatNumberDecimal(Math.max(installmentAmount || 0, 0), 2) || 0
|
|
: formatNumberDecimal(Math.max(summaryPrice.finalPrice, 0), 2) ||
|
|
0
|
|
}}
|
|
฿
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</AppBox>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.icon-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
aspect-ratio: 1/1;
|
|
font-size: 1.5rem;
|
|
padding: var(--size-1);
|
|
border-radius: var(--radius-2);
|
|
}
|
|
|
|
:deep(.price-tag .q-field__control) {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 90px;
|
|
height: 25px;
|
|
}
|
|
|
|
.main-color {
|
|
--_color: var(--yellow-7-hsl);
|
|
}
|
|
|
|
.invoice-color {
|
|
--_color: var(--purple-9-hsl);
|
|
}
|
|
|
|
.receipt-color {
|
|
--_color: var(--green-6-hsl);
|
|
}
|
|
|
|
.task-order-color {
|
|
--_color: var(--pink-7-hsl);
|
|
}
|
|
|
|
.debit-note-color {
|
|
--_color: var(--cyan-7-hsl);
|
|
}
|
|
|
|
.bg-color {
|
|
color: white;
|
|
background: hsla(var(--_color));
|
|
}
|
|
|
|
.dark .bg-color {
|
|
--_color: var(--orange-6-hsl);
|
|
}
|
|
|
|
.bg-color-light {
|
|
background: hsla(var(--_color) / 0.1);
|
|
}
|
|
|
|
.dark .bg-color-light {
|
|
--_color: var(--orange-6-hsl / 0.2);
|
|
}
|
|
|
|
.price-container > * {
|
|
padding: var(--size-1);
|
|
}
|
|
</style>
|