639 lines
18 KiB
Vue
639 lines
18 KiB
Vue
<script lang="ts" setup>
|
|
import { Icon } from '@iconify/vue';
|
|
import { ref, watch } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
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';
|
|
|
|
defineProps<{
|
|
readonly?: boolean;
|
|
quotationNo?: string;
|
|
data?: {
|
|
total: number;
|
|
discount: number;
|
|
totalVatExcluded: number;
|
|
totalVatIncluded: number;
|
|
totalAfterDiscount: number;
|
|
};
|
|
}>();
|
|
|
|
const { t } = useI18n();
|
|
const configStore = useConfigStore();
|
|
const { data: config } = storeToRefs(configStore);
|
|
|
|
const urgent = defineModel<boolean>('urgent', {
|
|
required: true,
|
|
default: false,
|
|
});
|
|
const actor = defineModel<string>('actor', { required: false });
|
|
const payBillDate = defineModel<Date | null | undefined>('payBillDate', {
|
|
required: false,
|
|
});
|
|
const workName = defineModel<string>('workName', { required: true });
|
|
const contactor = defineModel<string>('contactor', { required: true });
|
|
const telephone = defineModel<string>('telephone', { required: true });
|
|
const documentReceivePoint = defineModel<string>('documentReceivePoint', {
|
|
required: true,
|
|
});
|
|
const dueDate = defineModel<Date | string>('dueDate', { required: true });
|
|
const payType = defineModel<'Full' | 'Split' | 'BillFull' | 'BillSplit'>(
|
|
'payType',
|
|
{ required: true },
|
|
);
|
|
const paySplitCount = defineModel<number | null>('paySplitCount', {
|
|
default: 1,
|
|
});
|
|
const paySplit = defineModel<
|
|
{ no: number; date: string | Date | null; amount: number }[]
|
|
>('paySplit', { required: true });
|
|
const summaryPrice = defineModel<{
|
|
totalPrice: number;
|
|
totalDiscount: number;
|
|
vat: number;
|
|
finalPrice: number;
|
|
}>('summaryPrice', {
|
|
required: true,
|
|
default: {
|
|
totalPrice: 0,
|
|
totalDiscount: 0,
|
|
vat: 0,
|
|
finalPrice: 0,
|
|
},
|
|
});
|
|
|
|
const finalDiscount = defineModel<number>('finalDiscount', { default: 0 });
|
|
const finalDiscount4Show = ref<string>(finalDiscount.value.toString());
|
|
|
|
const payTypeOpion = ref([
|
|
{
|
|
value: 'Full',
|
|
label: t('quotation.type.fullAmountCash'),
|
|
},
|
|
{
|
|
value: 'Split',
|
|
label: t('quotation.type.installmentsCash'),
|
|
},
|
|
{
|
|
value: 'BillFull',
|
|
label: t('quotation.type.fullAmountBill'),
|
|
},
|
|
{
|
|
value: 'BillSplit',
|
|
label: t('quotation.type.installmentsBill'),
|
|
},
|
|
]);
|
|
|
|
const amount4Show = ref<string[]>([]);
|
|
|
|
function calculateInstallments(param: {
|
|
customIndex?: number;
|
|
customAmount?: number;
|
|
newCount: number;
|
|
oldCount: number;
|
|
}) {
|
|
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,
|
|
date: null,
|
|
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();
|
|
}
|
|
});
|
|
} else if (param.newCount === param.oldCount) {
|
|
if (param.customIndex !== undefined && param.customAmount !== undefined) {
|
|
paySplit.value[param.customIndex].amount = param.customAmount;
|
|
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] =
|
|
(+remainingAmount.toFixed(2)).toString();
|
|
}
|
|
}
|
|
}
|
|
|
|
function installmentsDate(date: Date | string) {
|
|
const firstPayDateObj = new Date(date);
|
|
|
|
paySplit.value = paySplit.value.map((pay, index) => {
|
|
if (index === 0) {
|
|
return pay;
|
|
}
|
|
|
|
// Create a new Date object to avoid mutating the original one
|
|
let updatedDate = new Date(firstPayDateObj);
|
|
updatedDate.setMonth(updatedDate.getMonth() + index);
|
|
|
|
return {
|
|
...pay,
|
|
date: updatedDate.toISOString(),
|
|
};
|
|
});
|
|
}
|
|
|
|
watch(
|
|
() => payType.value,
|
|
(v) => {
|
|
if (v === 'Split' || v === 'BillSplit') {
|
|
paySplitCount.value = 1;
|
|
} else {
|
|
paySplitCount.value = 0;
|
|
}
|
|
},
|
|
);
|
|
|
|
watch(
|
|
() => [paySplitCount.value, summaryPrice.value.finalPrice],
|
|
([newCount, _newF], [oldCount, _oldF]) => {
|
|
calculateInstallments({ newCount: newCount || 0, oldCount: oldCount || 0 });
|
|
if (newCount !== oldCount) {
|
|
paySplit.value[0].date && installmentsDate(paySplit.value[0].date);
|
|
}
|
|
},
|
|
{ deep: true },
|
|
);
|
|
|
|
watch(
|
|
() => paySplit.value[0]?.date,
|
|
(firstPayDate, beforeDate) => {
|
|
if (firstPayDate && firstPayDate !== beforeDate) {
|
|
installmentsDate(firstPayDate);
|
|
}
|
|
},
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<AppBox no-padding bordered class="column">
|
|
<div
|
|
class="bordered-b q-px-md q-py-sm row bg-color-orange-light items-center"
|
|
>
|
|
<div class="icon-wrapper bg-color-orange q-mr-sm">
|
|
<q-icon name="mdi-file-outline" />
|
|
</div>
|
|
<span class="text-weight-bold">
|
|
{{ $t('general.information', { msg: $t('general.attachment') }) }}
|
|
</span>
|
|
|
|
<q-checkbox
|
|
v-model="urgent"
|
|
class="q-ml-auto"
|
|
size="xs"
|
|
:label="$t('general.urgent')"
|
|
:disable="readonly"
|
|
/>
|
|
</div>
|
|
|
|
<div class="q-pa-sm">
|
|
<div class="row q-col-gutter-sm">
|
|
<q-input
|
|
for="input-quotation"
|
|
:label="$t('general.itemNo', { msg: $t('quotation.title') })"
|
|
:readonly
|
|
:model-value="!quotationNo ? $t('general.generated') : quotationNo"
|
|
:disable="!readonly"
|
|
class="col-12"
|
|
dense
|
|
outlined
|
|
/>
|
|
<q-input
|
|
for="input-actor"
|
|
:label="$t('quotation.actor')"
|
|
:readonly
|
|
v-model="actor"
|
|
:disable="!readonly"
|
|
class="col-12"
|
|
dense
|
|
outlined
|
|
/>
|
|
<q-input
|
|
for="input-work-name"
|
|
:label="$t('quotation.workName')"
|
|
:readonly
|
|
v-model="workName"
|
|
class="col-12"
|
|
dense
|
|
outlined
|
|
/>
|
|
<q-input
|
|
for="input-contact-name"
|
|
:label="$t('quotation.contactName')"
|
|
:readonly
|
|
v-model="contactor"
|
|
class="col-12"
|
|
dense
|
|
outlined
|
|
/>
|
|
<q-input
|
|
for="input-telephone"
|
|
:label="$t('general.telephone')"
|
|
:readonly="readonly"
|
|
v-model="telephone"
|
|
class="col-12"
|
|
dense
|
|
outlined
|
|
/>
|
|
<q-input
|
|
for="input-docs-receive-point"
|
|
:label="$t('quotation.documentReceivePoint')"
|
|
:readonly
|
|
v-model="documentReceivePoint"
|
|
class="col-12"
|
|
dense
|
|
outlined
|
|
/>
|
|
<DatePicker
|
|
id="select-due-date"
|
|
:label="$t('quotation.dueDate')"
|
|
:readonly
|
|
v-model="dueDate"
|
|
class="col-12"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="bordered-b q-px-md q-py-sm row bg-color-orange-light items-center"
|
|
>
|
|
<div class="icon-wrapper bg-color-orange 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">
|
|
<SelectInput
|
|
class="col-12"
|
|
:label="$t('quotation.payType')"
|
|
:option="payTypeOpion"
|
|
:readonly
|
|
id="pay-type"
|
|
v-model="payType"
|
|
/>
|
|
|
|
<q-field
|
|
dense
|
|
outlined
|
|
class="col-12"
|
|
v-if="payType === 'Split' || payType === 'BillSplit'"
|
|
>
|
|
<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
|
|
class="col-3"
|
|
type="number"
|
|
dense
|
|
outlined
|
|
min="1"
|
|
@update:model-value="(i) => (paySplitCount = Number(i))"
|
|
/>
|
|
</div>
|
|
</q-field>
|
|
|
|
<section
|
|
v-if="payType === 'Split' || payType === 'BillSplit'"
|
|
class="col-12 text-caption"
|
|
style="padding-left: 20px"
|
|
>
|
|
<template v-for="(period, i) in paySplit" :key="period.no">
|
|
<div
|
|
class="row app-text-muted items-center"
|
|
:class="{ 'q-mb-sm': i !== paySplit.length }"
|
|
>
|
|
{{ `${$t('quotation.periodNo')} ${period.no}` }}
|
|
<q-input
|
|
class="col q-mx-sm"
|
|
:label="$t('quotation.amount')"
|
|
:model-value="commaInput(period.amount.toString())"
|
|
dense
|
|
outlined
|
|
bg-color="input-border"
|
|
@update:model-value="
|
|
(v) => {
|
|
if (typeof v === 'string') amount4Show[i] = commaInput(v);
|
|
const x = parseFloat(
|
|
amount4Show[i] && typeof amount4Show[i] === 'string'
|
|
? amount4Show[i].replace(/,/g, '')
|
|
: '',
|
|
);
|
|
|
|
period.amount = precisionRound(x);
|
|
commaInput(period.amount.toString());
|
|
|
|
calculateInstallments({
|
|
customIndex: i,
|
|
customAmount: x,
|
|
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';
|
|
}
|
|
}
|
|
"
|
|
>
|
|
<template #prepend>
|
|
<q-icon name="mdi-cash" color="primary" />
|
|
</template>
|
|
</q-input>
|
|
<DatePicker
|
|
v-model="period.date"
|
|
class="col-5"
|
|
:label="$t('quotation.payDueDate')"
|
|
bg-color="input-border"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</section>
|
|
|
|
<DatePicker
|
|
v-if="payType === 'BillFull'"
|
|
class="col-12"
|
|
:label="$t('quotation.callDueDate')"
|
|
v-model="payBillDate"
|
|
/>
|
|
|
|
<!-- <q-select
|
|
outlined
|
|
clearable
|
|
use-input
|
|
emit-value
|
|
fill-input
|
|
map-options
|
|
hide-bottom-space
|
|
option-value="value"
|
|
input-debounce="0"
|
|
option-label="label"
|
|
class="col-12"
|
|
autocomplete="off"
|
|
for="select-bankbook"
|
|
dense
|
|
:label="$t('quotation.bank')"
|
|
:options="bankBookOptions"
|
|
:readonly
|
|
:hide-dropdown-icon="readonly"
|
|
v-model="payBank"
|
|
@filter="bankBoookFilter"
|
|
>
|
|
<template v-slot:option="scope">
|
|
<q-item
|
|
v-if="scope.opt"
|
|
v-bind="scope.itemProps"
|
|
class="row items-center"
|
|
>
|
|
<q-item-section avatar>
|
|
<q-img
|
|
:src="`/img/bank/${scope.opt.value}.png`"
|
|
class="bordered"
|
|
style="
|
|
border-radius: 50%;
|
|
aspect-ratio: 1;
|
|
height: 2rem;
|
|
width: 2rem;
|
|
"
|
|
/>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
{{ scope.opt.label }}
|
|
</q-item-section>
|
|
</q-item>
|
|
</template>
|
|
|
|
<template v-slot:selected-item="scope">
|
|
<q-item-section
|
|
v-if="scope.opt && !!payBank"
|
|
avatar
|
|
class="q-py-sm row"
|
|
>
|
|
<q-img
|
|
:src="`/img/bank/${scope.opt.value}.png`"
|
|
class="bordered"
|
|
style="
|
|
border-radius: 50%;
|
|
aspect-ratio: 1;
|
|
height: 2rem;
|
|
width: 2rem;
|
|
"
|
|
/>
|
|
</q-item-section>
|
|
</template>
|
|
|
|
<template v-slot:no-option>
|
|
<q-item>
|
|
<q-item-section class="text-grey">
|
|
{{ $t('general.noData') }}
|
|
</q-item-section>
|
|
</q-item>
|
|
</template>
|
|
</q-select> -->
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="bordered-b q-px-md q-py-sm row bg-color-orange-light items-center"
|
|
>
|
|
<div class="icon-wrapper bg-color-orange q-mr-sm">
|
|
<Icon icon="iconoir:coins" />
|
|
</div>
|
|
<span class="text-weight-bold">
|
|
{{ $t('quotation.summary') }}
|
|
</span>
|
|
</div>
|
|
<div class="q-pa-sm">
|
|
<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(0, 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 +
|
|
summaryPrice.vat,
|
|
2,
|
|
)
|
|
}}
|
|
฿
|
|
</span>
|
|
</div>
|
|
<div class="row">
|
|
{{ $t('general.discountAfterVat') }}
|
|
<q-input
|
|
:readonly
|
|
dense
|
|
outlined
|
|
class="q-ml-auto price-tag"
|
|
input-class="text-right"
|
|
debounce="500"
|
|
:model-value="commaInput(finalDiscount.toString() || '0')"
|
|
@update:model-value="
|
|
(v) => {
|
|
if (typeof v === 'string') finalDiscount4Show = commaInput(v);
|
|
const x = parseFloat(
|
|
finalDiscount4Show && typeof finalDiscount4Show === 'string'
|
|
? finalDiscount4Show.replace(/,/g, '')
|
|
: '',
|
|
);
|
|
finalDiscount = x;
|
|
}
|
|
"
|
|
/>
|
|
<!-- <span class="q-ml-auto">{{ data?.totalVatIncluded || 0 }} ฿</span> -->
|
|
</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)">
|
|
{{ formatNumberDecimal(Math.max(summaryPrice.finalPrice, 0), 2) || 0 }}
|
|
฿
|
|
</span>
|
|
</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;
|
|
}
|
|
|
|
.bg-color-orange {
|
|
--_color: var(--yellow-7-hsl);
|
|
color: white;
|
|
background: hsla(var(--_color));
|
|
}
|
|
|
|
.dark .bg-color-orange {
|
|
--_color: var(--orange-6-hsl);
|
|
}
|
|
|
|
.bg-color-orange-light {
|
|
--_color: var(--yellow-7-hsl);
|
|
background: hsla(var(--_color) / 0.2);
|
|
}
|
|
.dark .bg-color-orange {
|
|
--_color: var(--orange-6-hsl / 0.2);
|
|
}
|
|
</style>
|