refactor: bind quotationFormInfo & cal installment
This commit is contained in:
puriphatt
parent
e5b95e5cc0
commit
036f5e10a0
2 changed files with 153 additions and 71 deletions
|
|
@ -73,16 +73,21 @@ const preSelectedWorker = ref<Employee[]>([]);
|
|||
const selectedWorker = ref<Employee[]>([]);
|
||||
const workerList = ref<Employee[]>([]);
|
||||
|
||||
const documentReceivePoint = ref('');
|
||||
const paySplitCount = ref(1);
|
||||
const agentPrice = ref(false);
|
||||
const summaryPrice = ref<{
|
||||
totalPrice: number;
|
||||
totalDiscount: number;
|
||||
vat: number;
|
||||
finalPrice: number;
|
||||
}>({
|
||||
totalPrice: 0,
|
||||
totalDiscount: 0,
|
||||
vat: 0,
|
||||
finalPrice: 0,
|
||||
});
|
||||
|
||||
const quotationNo = ref('');
|
||||
const workName = ref('');
|
||||
const contactor = ref('');
|
||||
const telephone = ref('');
|
||||
const dueDate = ref('');
|
||||
const payType = ref('');
|
||||
const payBank = ref('');
|
||||
const actor = ref('');
|
||||
|
||||
const pageState = reactive({
|
||||
hideStat: false,
|
||||
|
|
@ -153,7 +158,6 @@ async function triggerSelectEmployeeDialog() {
|
|||
|
||||
function triggerProductServiceDialog() {
|
||||
pageState.productServiceModal = true;
|
||||
// TODO: form and state controll
|
||||
}
|
||||
|
||||
function toggleDeleteProduct(index: number) {
|
||||
|
|
@ -206,29 +210,7 @@ function changeMode(mode: string) {
|
|||
}
|
||||
|
||||
onMounted(async () => {
|
||||
const ret = await productServiceStore.fetchListProductService({
|
||||
page: 1,
|
||||
pageSize: 9999,
|
||||
});
|
||||
if (ret) productGroup.value = ret.result;
|
||||
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const queryDate = urlParams.get('date');
|
||||
date.value = queryDate && new Date(Number(queryDate));
|
||||
branchId.value = urlParams.get('branchId') || '';
|
||||
quotationFormData.value.customerBranchId =
|
||||
urlParams.get('customerBranchId') || '';
|
||||
|
||||
const resultOption = await fetch('/option/option.json');
|
||||
const rawOption = await resultOption.json();
|
||||
if (locale.value === 'eng') optionStore.globalOption = rawOption.eng;
|
||||
if (locale.value === 'tha') optionStore.globalOption = rawOption.tha;
|
||||
|
||||
const retEmp = await customerStore.fetchBranchEmployee(
|
||||
quotationFormData.value.customerBranchId,
|
||||
);
|
||||
if (retEmp) workerList.value = retEmp.data.result;
|
||||
|
||||
// get language
|
||||
const getCurLang = localStorage.getItem('currentLanguage');
|
||||
if (getCurLang === 'English') {
|
||||
locale.value = 'eng';
|
||||
|
|
@ -239,6 +221,7 @@ onMounted(async () => {
|
|||
setLocale('th');
|
||||
}
|
||||
|
||||
// get theme
|
||||
const getCurTheme = localStorage.getItem('currentTheme');
|
||||
if (
|
||||
getCurTheme === 'light' ||
|
||||
|
|
@ -249,6 +232,35 @@ onMounted(async () => {
|
|||
} else {
|
||||
changeMode('light');
|
||||
}
|
||||
|
||||
// get query string
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
branchId.value = urlParams.get('branchId') || '';
|
||||
|
||||
const price = urlParams.get('agentPrice');
|
||||
agentPrice.value = price === 'true' ? true : false;
|
||||
|
||||
date.value = Date.now();
|
||||
|
||||
quotationFormData.value.customerBranchId =
|
||||
urlParams.get('customerBranchId') || '';
|
||||
|
||||
// fetch option
|
||||
const resultOption = await fetch('/option/option.json');
|
||||
const rawOption = await resultOption.json();
|
||||
if (locale.value === 'eng') optionStore.globalOption = rawOption.eng;
|
||||
if (locale.value === 'tha') optionStore.globalOption = rawOption.tha;
|
||||
|
||||
const ret = await productServiceStore.fetchListProductService({
|
||||
page: 1,
|
||||
pageSize: 9999,
|
||||
});
|
||||
if (ret) productGroup.value = ret.result;
|
||||
|
||||
const retEmp = await customerStore.fetchBranchEmployee(
|
||||
quotationFormData.value.customerBranchId,
|
||||
);
|
||||
if (retEmp) workerList.value = retEmp.data.result;
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -388,8 +400,10 @@ onMounted(async () => {
|
|||
</template>
|
||||
<div class="surface-1 q-pa-md full-width">
|
||||
<ProductItem
|
||||
:agent-price="agentPrice"
|
||||
@delete="toggleDeleteProduct"
|
||||
v-model:rows="productServiceList"
|
||||
v-model:summary-price="summaryPrice"
|
||||
/>
|
||||
</div>
|
||||
</q-expansion-item>
|
||||
|
|
@ -450,17 +464,22 @@ onMounted(async () => {
|
|||
}"
|
||||
>
|
||||
<QuotationFormInfo
|
||||
v-model:urgent="quotationFormData.urgent"
|
||||
v-model:quotation-no="quotationNo"
|
||||
v-model:actor="actor"
|
||||
v-model:work-name="workName"
|
||||
v-model:contactor="contactor"
|
||||
v-model:telephone="telephone"
|
||||
v-model:document-receive-point="documentReceivePoint"
|
||||
v-model:due-date="dueDate"
|
||||
v-model:pay-type="payType"
|
||||
v-model:actor="quotationFormData.actorName"
|
||||
v-model:work-name="quotationFormData.workName"
|
||||
v-model:contactor="quotationFormData.contactName"
|
||||
v-model:telephone="quotationFormData.contactTel"
|
||||
v-model:document-receive-point="
|
||||
quotationFormData.documentReceivePoint
|
||||
"
|
||||
v-model:due-date="quotationFormData.dueDate"
|
||||
v-model:pay-type="quotationFormData.payCondition"
|
||||
v-model:pay-bank="payBank"
|
||||
v-model:pay-split-count="paySplitCount"
|
||||
v-model:pay-split-count="quotationFormData.paySplitCount"
|
||||
v-model:pay-split="quotationFormData.paySplit"
|
||||
:readonly
|
||||
v-model:summary-price="summaryPrice"
|
||||
/>
|
||||
</div>
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@ import { selectFilterOptionRefMod } from 'src/stores/utils';
|
|||
import { onMounted, ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { formatNumberDecimal } from 'stores/utils';
|
||||
|
||||
import AppBox from 'components/app/AppBox.vue';
|
||||
import DatePicker from 'src/components/shared/DatePicker.vue';
|
||||
import SelectInput from 'src/components/shared/SelectInput.vue';
|
||||
|
|
@ -24,6 +26,10 @@ defineProps<{
|
|||
|
||||
const { t } = useI18n();
|
||||
|
||||
const urgent = defineModel<boolean>('urgent', {
|
||||
required: true,
|
||||
default: false,
|
||||
});
|
||||
const quotationNo = defineModel<string>('quotationNo', { required: true });
|
||||
const actor = defineModel<string>('actor', { required: true });
|
||||
const workName = defineModel<string>('workName', { required: true });
|
||||
|
|
@ -32,35 +38,50 @@ const telephone = defineModel<string>('telephone', { required: true });
|
|||
const documentReceivePoint = defineModel<string>('documentReceivePoint', {
|
||||
required: true,
|
||||
});
|
||||
const dueDate = defineModel<string>('dueDate', { required: true });
|
||||
const payType = defineModel<string>('payType', { required: true });
|
||||
const paySplitCount = defineModel<number>('paySplitCount', {
|
||||
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 payBank = defineModel<string>('payBank', { required: true });
|
||||
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 optionStore = useOptionStore();
|
||||
|
||||
// fullAmountCash
|
||||
// installmentsCash
|
||||
// fullAmountBill
|
||||
// installmentsBill
|
||||
const payTypeOpion = ref([
|
||||
{
|
||||
value: 'fullAmountCash',
|
||||
value: 'Full',
|
||||
label: t('quotation.type.fullAmountCash'),
|
||||
},
|
||||
{
|
||||
value: 'installmentsCash',
|
||||
value: 'Split',
|
||||
label: t('quotation.type.installmentsCash'),
|
||||
},
|
||||
{
|
||||
value: 'fullAmountBill',
|
||||
value: 'BillFull',
|
||||
label: t('quotation.type.fullAmountBill'),
|
||||
},
|
||||
{
|
||||
value: 'installmentsBill',
|
||||
value: 'BillSplit',
|
||||
label: t('quotation.type.installmentsBill'),
|
||||
},
|
||||
]);
|
||||
|
|
@ -91,6 +112,50 @@ watch(
|
|||
);
|
||||
},
|
||||
);
|
||||
|
||||
watch(
|
||||
() => payType.value,
|
||||
(v) => {
|
||||
if (v === 'Split' || v === 'BillSplit') {
|
||||
paySplitCount.value = 1;
|
||||
} else {
|
||||
paySplitCount.value = 0;
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
watch(
|
||||
() => paySplitCount.value,
|
||||
(newCount, oldCount) => {
|
||||
if (newCount !== null && oldCount !== null) {
|
||||
const totalAmount = summaryPrice.value.finalPrice;
|
||||
|
||||
if (newCount > oldCount) {
|
||||
const installmentAmount = totalAmount / newCount;
|
||||
|
||||
paySplit.value.forEach((payment, index) => {
|
||||
payment.amount = installmentAmount;
|
||||
});
|
||||
|
||||
for (let i = oldCount; i < newCount; i++) {
|
||||
paySplit.value.push({
|
||||
no: i + 1,
|
||||
date: null,
|
||||
amount: installmentAmount,
|
||||
});
|
||||
}
|
||||
} else if (newCount < oldCount) {
|
||||
paySplit.value.splice(newCount, oldCount - newCount);
|
||||
|
||||
const installmentAmount = totalAmount / newCount;
|
||||
paySplit.value.forEach((payment) => {
|
||||
payment.amount = installmentAmount;
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -104,6 +169,13 @@ watch(
|
|||
<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')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="q-pa-sm">
|
||||
|
|
@ -198,9 +270,7 @@ watch(
|
|||
dense
|
||||
outlined
|
||||
class="col-12"
|
||||
v-if="
|
||||
payType === 'installmentsCash' || payType === 'installmentsBill'
|
||||
"
|
||||
v-if="payType === 'Split' || payType === 'BillSplit'"
|
||||
>
|
||||
<div class="row full-width items-center justify-between q-py-xs">
|
||||
<div class="column">
|
||||
|
|
@ -219,27 +289,27 @@ watch(
|
|||
dense
|
||||
outlined
|
||||
min="1"
|
||||
@update:model-value="(i) => (paySplitCount = Number(i))"
|
||||
/>
|
||||
</div>
|
||||
</q-field>
|
||||
<section
|
||||
v-if="
|
||||
payType === 'installmentsCash' || payType === 'installmentsBill'
|
||||
"
|
||||
v-if="payType === 'Split' || payType === 'BillSplit'"
|
||||
class="col-12 text-caption"
|
||||
style="padding-left: 20px"
|
||||
>
|
||||
<template v-for="n in Number(paySplitCount)" :key="n">
|
||||
<template v-for="(period, i) in paySplit" :key="period.no">
|
||||
<div
|
||||
class="row app-text-muted items-center"
|
||||
:class="{ 'q-mb-sm': n !== Number(paySplitCount) }"
|
||||
:class="{ 'q-mb-sm': i !== paySplit.length }"
|
||||
>
|
||||
{{ `${$t('quotation.periodNo')} ${n}` }}
|
||||
{{ `${$t('quotation.periodNo')} ${period.no}` }}
|
||||
<q-input
|
||||
class="col q-mx-sm"
|
||||
:label="$t('quotation.amount')"
|
||||
model-value="5,000"
|
||||
:model-value="formatNumberDecimal(period.amount, 2)"
|
||||
dense
|
||||
readonly
|
||||
outlined
|
||||
bg-color="input-border"
|
||||
>
|
||||
|
|
@ -248,24 +318,17 @@ watch(
|
|||
</template>
|
||||
</q-input>
|
||||
<DatePicker
|
||||
v-model="period.date"
|
||||
class="col-5"
|
||||
:label="$t('quotation.payDueDate')"
|
||||
bg-color="input-border"
|
||||
/>
|
||||
<!-- <q-input
|
||||
class="col"
|
||||
:label="$t('quotation.amount')"
|
||||
model-value="5,000"
|
||||
dense
|
||||
outlined
|
||||
bg-color="input-border"
|
||||
/> -->
|
||||
</div>
|
||||
</template>
|
||||
</section>
|
||||
|
||||
<DatePicker
|
||||
v-if="payType === 'fullAmountBill'"
|
||||
v-if="payType === 'BillFull'"
|
||||
class="col-12"
|
||||
:label="$t('quotation.callDueDate')"
|
||||
/>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue