feat(05): quotation form
This commit is contained in:
puriphatt
parent
d79a28d31c
commit
9bf06ac209
3 changed files with 356 additions and 82 deletions
|
|
@ -3,8 +3,11 @@ import { Icon } from '@iconify/vue';
|
|||
import { QSelect } from 'quasar';
|
||||
import { selectFilterOptionRefMod } from 'src/stores/utils';
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import AppBox from 'components/app/AppBox.vue';
|
||||
import DatePicker from 'src/components/shared/DatePicker.vue';
|
||||
import SelectInput from 'src/components/shared/SelectInput.vue';
|
||||
|
||||
import useOptionStore from 'src/stores/options';
|
||||
|
||||
|
|
@ -19,6 +22,8 @@ defineProps<{
|
|||
};
|
||||
}>();
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const quotationNo = defineModel<string>('quotationNo', { required: true });
|
||||
const actor = defineModel<string>('actor', { required: true });
|
||||
const workName = defineModel<string>('workName', { required: true });
|
||||
|
|
@ -29,11 +34,37 @@ const documentReceivePoint = defineModel<string>('documentReceivePoint', {
|
|||
});
|
||||
const dueDate = defineModel<string>('dueDate', { required: true });
|
||||
const payType = defineModel<string>('payType', { required: true });
|
||||
const paySplitCount = defineModel<string>('paySplitCount', { required: true });
|
||||
const paySplitCount = defineModel<number>('paySplitCount', {
|
||||
required: true,
|
||||
default: 1,
|
||||
});
|
||||
const payBank = defineModel<string>('payBank', { required: true });
|
||||
|
||||
const optionStore = useOptionStore();
|
||||
|
||||
// fullAmountCash
|
||||
// installmentsCash
|
||||
// fullAmountBill
|
||||
// installmentsBill
|
||||
const payTypeOpion = ref([
|
||||
{
|
||||
value: 'fullAmountCash',
|
||||
label: t('quotation.type.fullAmountCash'),
|
||||
},
|
||||
{
|
||||
value: 'installmentsCash',
|
||||
label: t('quotation.type.installmentsCash'),
|
||||
},
|
||||
{
|
||||
value: 'fullAmountBill',
|
||||
label: t('quotation.type.fullAmountBill'),
|
||||
},
|
||||
{
|
||||
value: 'installmentsBill',
|
||||
label: t('quotation.type.installmentsBill'),
|
||||
},
|
||||
]);
|
||||
|
||||
const bankBookOptions = ref<Record<string, unknown>[]>([]);
|
||||
let bankBoookFilter: (
|
||||
value: string,
|
||||
|
|
@ -71,14 +102,15 @@ watch(
|
|||
<q-icon name="mdi-file-outline" />
|
||||
</div>
|
||||
<span class="text-weight-bold">
|
||||
{{ $t('quotation.label.infoDocument') }}
|
||||
{{ $t('general.information', { msg: $t('general.attachment') }) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="q-pa-sm">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<q-input
|
||||
:label="$t('quotation.label.quotationNo')"
|
||||
for="input-quotation"
|
||||
:label="$t('general.itemNo', { msg: $t('quotation.title') })"
|
||||
:readonly
|
||||
v-model="quotationNo"
|
||||
class="col-12"
|
||||
|
|
@ -86,7 +118,8 @@ watch(
|
|||
outlined
|
||||
/>
|
||||
<q-input
|
||||
:label="$t('quotation.label.actor')"
|
||||
for="input-actor"
|
||||
:label="$t('quotation.actor')"
|
||||
:readonly
|
||||
v-model="actor"
|
||||
class="col-12"
|
||||
|
|
@ -94,7 +127,8 @@ watch(
|
|||
outlined
|
||||
/>
|
||||
<q-input
|
||||
:label="$t('quotation.label.workName')"
|
||||
for="input-work-name"
|
||||
:label="$t('quotation.workName')"
|
||||
:readonly
|
||||
v-model="workName"
|
||||
class="col-12"
|
||||
|
|
@ -102,7 +136,8 @@ watch(
|
|||
outlined
|
||||
/>
|
||||
<q-input
|
||||
:label="$t('quotation.label.contactor')"
|
||||
for="input-contact-name"
|
||||
:label="$t('quotation.contactName')"
|
||||
:readonly
|
||||
v-model="contactor"
|
||||
class="col-12"
|
||||
|
|
@ -110,7 +145,8 @@ watch(
|
|||
outlined
|
||||
/>
|
||||
<q-input
|
||||
:label="$t('quotation.label.telephone')"
|
||||
for="input-telephone"
|
||||
:label="$t('general.telephone')"
|
||||
:readonly="readonly"
|
||||
v-model="telephone"
|
||||
class="col-12"
|
||||
|
|
@ -118,20 +154,20 @@ watch(
|
|||
outlined
|
||||
/>
|
||||
<q-input
|
||||
:label="$t('quotation.label.documentReceivePoint')"
|
||||
for="input-docs-receive-point"
|
||||
:label="$t('quotation.documentReceivePoint')"
|
||||
:readonly
|
||||
v-model="documentReceivePoint"
|
||||
class="col-12"
|
||||
dense
|
||||
outlined
|
||||
/>
|
||||
<q-input
|
||||
:label="$t('quotation.label.dueDate')"
|
||||
<DatePicker
|
||||
id="select-due-date"
|
||||
:label="$t('quotation.dueDate')"
|
||||
:readonly
|
||||
v-model="dueDate"
|
||||
class="col-12"
|
||||
dense
|
||||
outlined
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -142,51 +178,96 @@ watch(
|
|||
<q-icon name="mdi-bank-outline" />
|
||||
</div>
|
||||
<span class="text-weight-bold">
|
||||
{{ $t('quotation.label.infoPayment') }}
|
||||
{{ $t('quotation.paymentCondition') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="q-pa-sm">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<q-select
|
||||
outlined
|
||||
clearable
|
||||
use-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-bottom-space
|
||||
input-debounce="0"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
<SelectInput
|
||||
class="col-12"
|
||||
autocomplete="off"
|
||||
for="select-payType"
|
||||
dense
|
||||
:label="$t('quotation.label.payType')"
|
||||
:options="[]"
|
||||
:label="$t('quotation.payType')"
|
||||
:option="payTypeOpion"
|
||||
:readonly
|
||||
:hide-dropdown-icon="readonly"
|
||||
id="pay-type"
|
||||
v-model="payType"
|
||||
></q-select>
|
||||
<div class="col-8 column">
|
||||
<q-field readonly dense outlined>
|
||||
<template #control>
|
||||
<span>{{ $t('quotation.label.paySplitCount') }}</span>
|
||||
<span class="app-text-muted">
|
||||
({{ $t('quotation.label.payTotal') }})
|
||||
/>
|
||||
|
||||
<q-field
|
||||
dense
|
||||
outlined
|
||||
class="col-12"
|
||||
v-if="
|
||||
payType === 'installmentsCash' || payType === 'installmentsBill'
|
||||
"
|
||||
>
|
||||
<div class="row full-width items-center justify-between q-py-xs">
|
||||
<div class="column">
|
||||
<span style="color: var(--foreground)">
|
||||
{{ $t('quotation.paySplitCount') }}
|
||||
</span>
|
||||
</template>
|
||||
</q-field>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<q-input
|
||||
v-model="paySplitCount"
|
||||
:readonly
|
||||
class="col-6"
|
||||
type="number"
|
||||
dense
|
||||
outlined
|
||||
/>
|
||||
</div>
|
||||
<span class="app-text-muted text-caption">
|
||||
({{ $t('quotation.payTotal', { msg: '10,000' }) }})
|
||||
</span>
|
||||
</div>
|
||||
<q-input
|
||||
v-model="paySplitCount"
|
||||
:readonly
|
||||
class="col-3"
|
||||
type="number"
|
||||
dense
|
||||
outlined
|
||||
min="1"
|
||||
/>
|
||||
</div>
|
||||
</q-field>
|
||||
<section
|
||||
v-if="
|
||||
payType === 'installmentsCash' || payType === 'installmentsBill'
|
||||
"
|
||||
class="col-12 text-caption"
|
||||
style="padding-left: 20px"
|
||||
>
|
||||
<template v-for="n in Number(paySplitCount)" :key="n">
|
||||
<div
|
||||
class="row app-text-muted items-center"
|
||||
:class="{ 'q-mb-sm': n !== Number(paySplitCount) }"
|
||||
>
|
||||
{{ `${$t('quotation.periodNo')} ${n}` }}
|
||||
<q-input
|
||||
class="col q-mx-sm"
|
||||
:label="$t('quotation.amount')"
|
||||
model-value="5,000"
|
||||
dense
|
||||
outlined
|
||||
bg-color="input-border"
|
||||
>
|
||||
<template #prepend>
|
||||
<q-icon name="mdi-cash" color="primary" />
|
||||
</template>
|
||||
</q-input>
|
||||
<DatePicker
|
||||
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'"
|
||||
class="col-12"
|
||||
:label="$t('quotation.callDueDate')"
|
||||
/>
|
||||
|
||||
<q-select
|
||||
outlined
|
||||
clearable
|
||||
|
|
@ -202,7 +283,7 @@ watch(
|
|||
autocomplete="off"
|
||||
for="select-bankbook"
|
||||
dense
|
||||
:label="$t('quotation.label.bank')"
|
||||
:label="$t('quotation.bank')"
|
||||
:options="bankBookOptions"
|
||||
:readonly
|
||||
:hide-dropdown-icon="readonly"
|
||||
|
|
@ -269,7 +350,7 @@ watch(
|
|||
<Icon icon="iconoir:coins" />
|
||||
</div>
|
||||
<span class="text-weight-bold">
|
||||
{{ $t('quotation.label.infoSummary') }}
|
||||
{{ $t('quotation.summary') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="q-pa-sm">
|
||||
|
|
@ -290,10 +371,17 @@ watch(
|
|||
<span class="q-ml-auto">{{ data?.totalVatExcluded || 0 }} ฿</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
{{ $t('general.totalVatIncluded') }}
|
||||
{{ $t('general.totalVatIncluded') + ' 7%' }}
|
||||
<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('general.totalAmount') }}
|
||||
|
||||
<span class="q-ml-auto" style="color: var(--brand-1)">
|
||||
{{ data?.totalVatIncluded || 0 }} ฿
|
||||
</span>
|
||||
</div>
|
||||
</AppBox>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue