feat(05): quotation form
This commit is contained in:
puriphatt
parent
d79a28d31c
commit
9bf06ac209
3 changed files with 356 additions and 82 deletions
|
|
@ -2,18 +2,16 @@
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
import { QSelect } from 'quasar';
|
import { QSelect } from 'quasar';
|
||||||
|
|
||||||
import AppBox from 'components/app/AppBox.vue';
|
|
||||||
import MainDialog from 'components/05_quotation/MainDialog.vue';
|
|
||||||
import WorkerItem from 'components/05_quotation/WorkerItem.vue';
|
import WorkerItem from 'components/05_quotation/WorkerItem.vue';
|
||||||
import QuotationFormInfo from './QuotationFormInfo.vue';
|
import QuotationFormInfo from './QuotationFormInfo.vue';
|
||||||
import { AddButton, SaveButton } from 'components/button';
|
import { AddButton, SaveButton } from 'components/button';
|
||||||
|
import ToggleButton from 'src/components/button/ToggleButton.vue';
|
||||||
|
import ProductItem from 'src/components/05_quotation/ProductItem.vue';
|
||||||
|
|
||||||
defineProps<{
|
defineProps<{
|
||||||
readonly?: boolean;
|
readonly?: boolean;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const dialogState = defineModel<boolean>({ default: true });
|
|
||||||
|
|
||||||
const selectedBranchIssuer = ref('');
|
const selectedBranchIssuer = ref('');
|
||||||
const selectedCustomer = ref('');
|
const selectedCustomer = ref('');
|
||||||
const toggleWorker = ref(true);
|
const toggleWorker = ref(true);
|
||||||
|
|
@ -26,24 +24,32 @@ const telephone = ref('');
|
||||||
const documentReceivePoint = ref('');
|
const documentReceivePoint = ref('');
|
||||||
const dueDate = ref('');
|
const dueDate = ref('');
|
||||||
const payType = ref('');
|
const payType = ref('');
|
||||||
const paySplitCount = ref('');
|
const paySplitCount = ref(1);
|
||||||
const payBank = ref('');
|
const payBank = ref('');
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<MainDialog v-model:state="dialogState">
|
<div class="fullscreen column">
|
||||||
<template #title>
|
<div class="color-bar">
|
||||||
<span class="text-weight-medium" style="color: var(--brand-1)">
|
<div class="blue-segment"></div>
|
||||||
{{ $t('quotation.form.createTitle') }}
|
<div class="orange-segment"></div>
|
||||||
</span>
|
<div class="gray-segment"></div>
|
||||||
</template>
|
</div>
|
||||||
|
|
||||||
<div class="row q-pa-md items-center">
|
<header class="row q-pa-md items-center">
|
||||||
<div style="flex: 1"><q-img src="/logo.png" width="8rem" /></div>
|
<div style="flex: 1" class="row items-center">
|
||||||
|
<q-img src="/icons/favicon-512x512.png" width="4rem" />
|
||||||
|
<span class="column text-h6 text-bold q-ml-md">
|
||||||
|
{{ $t('quotation.title') }}
|
||||||
|
<span class="text-caption text-regular app-text-muted">
|
||||||
|
{{ $t('quotation.processOn', { msg: '27 มีนาคม 2567 16:00:01' }) }}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
<q-select
|
<q-select
|
||||||
v-model="selectedBranchIssuer"
|
v-model="selectedBranchIssuer"
|
||||||
:options="[{ label: 'Issuer 1', value: 'Issuer 1' }]"
|
:options="[{ label: 'Issuer 1', value: 'Issuer 1' }]"
|
||||||
:label="$t('quotation.form.customerBranchSelect')"
|
:label="$t('quotation.branch')"
|
||||||
id="select-branch-issuer"
|
id="select-branch-issuer"
|
||||||
for="select-branch-issuer"
|
for="select-branch-issuer"
|
||||||
style="width: 300px"
|
style="width: 300px"
|
||||||
|
|
@ -54,23 +60,23 @@ const payBank = ref('');
|
||||||
<q-select
|
<q-select
|
||||||
v-model="selectedCustomer"
|
v-model="selectedCustomer"
|
||||||
:options="[{ label: 'Customer 1', value: 'Customer 1' }]"
|
:options="[{ label: 'Customer 1', value: 'Customer 1' }]"
|
||||||
:label="$t('quotation.form.customerSelect')"
|
:label="$t('quotation.customer')"
|
||||||
id="select-customer"
|
id="select-customer"
|
||||||
for="select-customer"
|
for="select-customer"
|
||||||
style="width: 300px"
|
style="width: 300px"
|
||||||
outlined
|
outlined
|
||||||
dense
|
dense
|
||||||
/>
|
/>
|
||||||
</div>
|
</header>
|
||||||
|
|
||||||
<div
|
<body
|
||||||
class="surface-2 bordered-t row"
|
class="row col"
|
||||||
style="flex-grow: 1; overflow-y: hidden"
|
style="flex-grow: 1; overflow-y: hidden"
|
||||||
:style="{
|
:style="{
|
||||||
overflowY: $q.screen.gt.sm ? 'hidden' : 'auto',
|
overflowY: $q.screen.gt.sm ? 'hidden' : 'auto',
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<div
|
<section
|
||||||
class="col-12 col-sm-9 row"
|
class="col-12 col-sm-9 row"
|
||||||
style="padding: var(--size-3); overflow-y: auto"
|
style="padding: var(--size-3); overflow-y: auto"
|
||||||
:style="{
|
:style="{
|
||||||
|
|
@ -78,11 +84,138 @@ const payBank = ref('');
|
||||||
maxHeight: $q.screen.gt.sm ? '100%' : undefined,
|
maxHeight: $q.screen.gt.sm ? '100%' : undefined,
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<div class="col">
|
<div class="col q-gutter-y-md">
|
||||||
<AppBox bordered style="padding: var(--size-3)">
|
<q-expansion-item
|
||||||
|
for="item-up"
|
||||||
|
id="item-up"
|
||||||
|
dense
|
||||||
|
class="overflow-hidden"
|
||||||
|
switch-toggle-side
|
||||||
|
default-opened
|
||||||
|
style="border-radius: var(--radius-2)"
|
||||||
|
expand-icon="mdi-chevron-down-circle"
|
||||||
|
header-class="surface-1"
|
||||||
|
>
|
||||||
|
<template v-slot:header>
|
||||||
|
<div class="row full-width items-center q-pr-md q-py-sm">
|
||||||
|
<span
|
||||||
|
class="text-weight-medium q-mr-md"
|
||||||
|
style="font-size: 18px"
|
||||||
|
>
|
||||||
|
{{ $t('quotation.employeeList') }}
|
||||||
|
</span>
|
||||||
|
<ToggleButton class="q-mr-sm" v-model="toggleWorker" />
|
||||||
|
{{
|
||||||
|
toggleWorker ? $t('general.specify') : $t('general.noSpecify')
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
<AddButton icon-only class="q-ml-auto" @click.stop="" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<div class="surface-1 q-pa-md full-width">
|
||||||
|
<WorkerItem
|
||||||
|
:rows="[
|
||||||
|
{
|
||||||
|
foreignRefNo: '123',
|
||||||
|
employeeName: '123',
|
||||||
|
birthDate: '123',
|
||||||
|
gender: '123',
|
||||||
|
age: '123',
|
||||||
|
nationality: '123',
|
||||||
|
documentExpireDate: '123',
|
||||||
|
imgUrl: '/images/employee-avatar.png',
|
||||||
|
status: 'ACTIVE',
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</q-expansion-item>
|
||||||
|
|
||||||
|
<q-expansion-item
|
||||||
|
for="item-up"
|
||||||
|
id="item-up"
|
||||||
|
dense
|
||||||
|
class="overflow-hidden"
|
||||||
|
switch-toggle-side
|
||||||
|
default-opened
|
||||||
|
style="border-radius: var(--radius-2)"
|
||||||
|
expand-icon="mdi-chevron-down-circle"
|
||||||
|
header-class="surface-1"
|
||||||
|
>
|
||||||
|
<template v-slot:header>
|
||||||
|
<div class="row full-width items-center q-pr-md q-py-sm">
|
||||||
|
<span class="text-weight-medium" style="font-size: 18px">
|
||||||
|
{{ $t('quotation.productList') }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<AddButton icon-only class="q-ml-auto" @click.stop="" />
|
||||||
|
</template>
|
||||||
|
<div class="surface-1 q-pa-md full-width">
|
||||||
|
<ProductItem
|
||||||
|
:rows="[
|
||||||
|
{
|
||||||
|
code: '123456',
|
||||||
|
list: 'aaa',
|
||||||
|
type: 'product',
|
||||||
|
amount: 0,
|
||||||
|
pricePerUnit: 0,
|
||||||
|
discount: 0,
|
||||||
|
tax: 0,
|
||||||
|
sumPrice: 0,
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</q-expansion-item>
|
||||||
|
|
||||||
|
<q-expansion-item
|
||||||
|
for="item-up"
|
||||||
|
id="item-up"
|
||||||
|
dense
|
||||||
|
class="overflow-hidden"
|
||||||
|
switch-toggle-side
|
||||||
|
default-opened
|
||||||
|
style="border-radius: var(--radius-2)"
|
||||||
|
expand-icon="mdi-chevron-down-circle"
|
||||||
|
header-class="surface-1"
|
||||||
|
>
|
||||||
|
<template v-slot:header>
|
||||||
|
<div class="row full-width items-center q-pr-md q-py-sm">
|
||||||
|
<span class="text-weight-medium" style="font-size: 18px">
|
||||||
|
{{ $t('productService.group.title') }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div class="surface-1 q-pa-md full-width">
|
||||||
|
<q-editor
|
||||||
|
dense
|
||||||
|
:model-value="''"
|
||||||
|
min-height="5rem"
|
||||||
|
class="full-width"
|
||||||
|
toolbar-bg="input-border"
|
||||||
|
style="cursor: auto; color: var(--foreground)"
|
||||||
|
:flat="!readonly"
|
||||||
|
:readonly="readonly"
|
||||||
|
:style="`width: ${$q.screen.gt.xs ? '100%' : '63vw'}`"
|
||||||
|
:toolbar="[['left', 'center', 'justify'], ['clip']]"
|
||||||
|
:toolbar-toggle-color="readonly ? 'disabled' : 'primary'"
|
||||||
|
:toolbar-color="
|
||||||
|
readonly ? 'disabled' : $q.dark.isActive ? 'white' : ''
|
||||||
|
"
|
||||||
|
:definitions="{
|
||||||
|
clip: {
|
||||||
|
icon: 'mdi-paperclip',
|
||||||
|
tip: 'Upload',
|
||||||
|
handler: () => console.log('upload'),
|
||||||
|
},
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</q-expansion-item>
|
||||||
|
<!-- <AppBox bordered style="padding: var(--size-3)">
|
||||||
<div class="row items-center q-mb-sm">
|
<div class="row items-center q-mb-sm">
|
||||||
<span style="flex: 1">
|
<span style="flex: 1">
|
||||||
{{ $t('quotation.label.listWorker') }}
|
{{ $t('quotation.employeeList') }}
|
||||||
<q-toggle
|
<q-toggle
|
||||||
v-model="toggleWorker"
|
v-model="toggleWorker"
|
||||||
id="toggle-status"
|
id="toggle-status"
|
||||||
|
|
@ -110,9 +243,10 @@ const payBank = ref('');
|
||||||
color="male"
|
color="male"
|
||||||
/>
|
/>
|
||||||
</AppBox>
|
</AppBox>
|
||||||
</AppBox>
|
</AppBox> -->
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="col-12 col-sm-3"
|
class="col-12 col-sm-3"
|
||||||
style="padding: var(--size-3); overflow-y: auto"
|
style="padding: var(--size-3); overflow-y: auto"
|
||||||
|
|
@ -135,14 +269,18 @@ const payBank = ref('');
|
||||||
:readonly
|
:readonly
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</body>
|
||||||
|
|
||||||
<template #footer>
|
<footer class="surface-1 q-pa-md">
|
||||||
<div class="row justify-end full-width">
|
<div class="row full-width justify-between">
|
||||||
<SaveButton />
|
<q-btn dense outline color="primary" class="rounded" padding="2px 8px">
|
||||||
|
<q-icon name="mdi-play-box-outline" size="xs" class="q-mr-xs" />
|
||||||
|
{{ $t('general.view', { msg: $t('general.example') }) }}
|
||||||
|
</q-btn>
|
||||||
|
<SaveButton solid />
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
|
||||||
</MainDialog>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
@ -177,4 +315,46 @@ const payBank = ref('');
|
||||||
.dark .bg-color-orange {
|
.dark .bg-color-orange {
|
||||||
--_color: var(--orange-6-hsl / 0.2);
|
--_color: var(--orange-6-hsl / 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.color-bar {
|
||||||
|
width: 100%;
|
||||||
|
height: 1vh;
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
rgba(245, 159, 0, 1) 0%,
|
||||||
|
rgba(255, 255, 255, 1) 77%,
|
||||||
|
rgba(204, 204, 204, 1) 100%
|
||||||
|
);
|
||||||
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue-segment {
|
||||||
|
background-color: var(--yellow-7);
|
||||||
|
flex-grow: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.orange-segment {
|
||||||
|
background-color: hsla(var(--yellow-7-hsl) / 0.2);
|
||||||
|
flex-grow: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gray-segment {
|
||||||
|
background-color: #ccc;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue-segment,
|
||||||
|
.orange-segment,
|
||||||
|
.gray-segment {
|
||||||
|
transform: skewX(-60deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon) {
|
||||||
|
color: var(--brand-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.q-editor__toolbar-group):nth-child(2) {
|
||||||
|
margin-left: auto !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -3,8 +3,11 @@ import { Icon } from '@iconify/vue';
|
||||||
import { QSelect } from 'quasar';
|
import { QSelect } from 'quasar';
|
||||||
import { selectFilterOptionRefMod } from 'src/stores/utils';
|
import { selectFilterOptionRefMod } from 'src/stores/utils';
|
||||||
import { onMounted, ref, watch } from 'vue';
|
import { onMounted, ref, watch } from 'vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
|
||||||
import AppBox from 'components/app/AppBox.vue';
|
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';
|
import useOptionStore from 'src/stores/options';
|
||||||
|
|
||||||
|
|
@ -19,6 +22,8 @@ defineProps<{
|
||||||
};
|
};
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
|
||||||
const quotationNo = defineModel<string>('quotationNo', { required: true });
|
const quotationNo = defineModel<string>('quotationNo', { required: true });
|
||||||
const actor = defineModel<string>('actor', { required: true });
|
const actor = defineModel<string>('actor', { required: true });
|
||||||
const workName = defineModel<string>('workName', { 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 dueDate = defineModel<string>('dueDate', { required: true });
|
||||||
const payType = defineModel<string>('payType', { 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 payBank = defineModel<string>('payBank', { required: true });
|
||||||
|
|
||||||
const optionStore = useOptionStore();
|
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>[]>([]);
|
const bankBookOptions = ref<Record<string, unknown>[]>([]);
|
||||||
let bankBoookFilter: (
|
let bankBoookFilter: (
|
||||||
value: string,
|
value: string,
|
||||||
|
|
@ -71,14 +102,15 @@ watch(
|
||||||
<q-icon name="mdi-file-outline" />
|
<q-icon name="mdi-file-outline" />
|
||||||
</div>
|
</div>
|
||||||
<span class="text-weight-bold">
|
<span class="text-weight-bold">
|
||||||
{{ $t('quotation.label.infoDocument') }}
|
{{ $t('general.information', { msg: $t('general.attachment') }) }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="q-pa-sm">
|
<div class="q-pa-sm">
|
||||||
<div class="row q-col-gutter-sm">
|
<div class="row q-col-gutter-sm">
|
||||||
<q-input
|
<q-input
|
||||||
:label="$t('quotation.label.quotationNo')"
|
for="input-quotation"
|
||||||
|
:label="$t('general.itemNo', { msg: $t('quotation.title') })"
|
||||||
:readonly
|
:readonly
|
||||||
v-model="quotationNo"
|
v-model="quotationNo"
|
||||||
class="col-12"
|
class="col-12"
|
||||||
|
|
@ -86,7 +118,8 @@ watch(
|
||||||
outlined
|
outlined
|
||||||
/>
|
/>
|
||||||
<q-input
|
<q-input
|
||||||
:label="$t('quotation.label.actor')"
|
for="input-actor"
|
||||||
|
:label="$t('quotation.actor')"
|
||||||
:readonly
|
:readonly
|
||||||
v-model="actor"
|
v-model="actor"
|
||||||
class="col-12"
|
class="col-12"
|
||||||
|
|
@ -94,7 +127,8 @@ watch(
|
||||||
outlined
|
outlined
|
||||||
/>
|
/>
|
||||||
<q-input
|
<q-input
|
||||||
:label="$t('quotation.label.workName')"
|
for="input-work-name"
|
||||||
|
:label="$t('quotation.workName')"
|
||||||
:readonly
|
:readonly
|
||||||
v-model="workName"
|
v-model="workName"
|
||||||
class="col-12"
|
class="col-12"
|
||||||
|
|
@ -102,7 +136,8 @@ watch(
|
||||||
outlined
|
outlined
|
||||||
/>
|
/>
|
||||||
<q-input
|
<q-input
|
||||||
:label="$t('quotation.label.contactor')"
|
for="input-contact-name"
|
||||||
|
:label="$t('quotation.contactName')"
|
||||||
:readonly
|
:readonly
|
||||||
v-model="contactor"
|
v-model="contactor"
|
||||||
class="col-12"
|
class="col-12"
|
||||||
|
|
@ -110,7 +145,8 @@ watch(
|
||||||
outlined
|
outlined
|
||||||
/>
|
/>
|
||||||
<q-input
|
<q-input
|
||||||
:label="$t('quotation.label.telephone')"
|
for="input-telephone"
|
||||||
|
:label="$t('general.telephone')"
|
||||||
:readonly="readonly"
|
:readonly="readonly"
|
||||||
v-model="telephone"
|
v-model="telephone"
|
||||||
class="col-12"
|
class="col-12"
|
||||||
|
|
@ -118,20 +154,20 @@ watch(
|
||||||
outlined
|
outlined
|
||||||
/>
|
/>
|
||||||
<q-input
|
<q-input
|
||||||
:label="$t('quotation.label.documentReceivePoint')"
|
for="input-docs-receive-point"
|
||||||
|
:label="$t('quotation.documentReceivePoint')"
|
||||||
:readonly
|
:readonly
|
||||||
v-model="documentReceivePoint"
|
v-model="documentReceivePoint"
|
||||||
class="col-12"
|
class="col-12"
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
/>
|
/>
|
||||||
<q-input
|
<DatePicker
|
||||||
:label="$t('quotation.label.dueDate')"
|
id="select-due-date"
|
||||||
|
:label="$t('quotation.dueDate')"
|
||||||
:readonly
|
:readonly
|
||||||
v-model="dueDate"
|
v-model="dueDate"
|
||||||
class="col-12"
|
class="col-12"
|
||||||
dense
|
|
||||||
outlined
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -142,51 +178,96 @@ watch(
|
||||||
<q-icon name="mdi-bank-outline" />
|
<q-icon name="mdi-bank-outline" />
|
||||||
</div>
|
</div>
|
||||||
<span class="text-weight-bold">
|
<span class="text-weight-bold">
|
||||||
{{ $t('quotation.label.infoPayment') }}
|
{{ $t('quotation.paymentCondition') }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="q-pa-sm">
|
<div class="q-pa-sm">
|
||||||
<div class="row q-col-gutter-sm">
|
<div class="row q-col-gutter-sm">
|
||||||
<q-select
|
<SelectInput
|
||||||
outlined
|
|
||||||
clearable
|
|
||||||
use-input
|
|
||||||
emit-value
|
|
||||||
map-options
|
|
||||||
hide-bottom-space
|
|
||||||
input-debounce="0"
|
|
||||||
option-value="value"
|
|
||||||
option-label="label"
|
|
||||||
class="col-12"
|
class="col-12"
|
||||||
autocomplete="off"
|
:label="$t('quotation.payType')"
|
||||||
for="select-payType"
|
:option="payTypeOpion"
|
||||||
dense
|
|
||||||
:label="$t('quotation.label.payType')"
|
|
||||||
:options="[]"
|
|
||||||
:readonly
|
:readonly
|
||||||
:hide-dropdown-icon="readonly"
|
id="pay-type"
|
||||||
v-model="payType"
|
v-model="payType"
|
||||||
></q-select>
|
/>
|
||||||
<div class="col-8 column">
|
|
||||||
<q-field readonly dense outlined>
|
<q-field
|
||||||
<template #control>
|
dense
|
||||||
<span>{{ $t('quotation.label.paySplitCount') }}</span>
|
outlined
|
||||||
<span class="app-text-muted">
|
class="col-12"
|
||||||
({{ $t('quotation.label.payTotal') }})
|
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>
|
||||||
|
<span class="app-text-muted text-caption">
|
||||||
|
({{ $t('quotation.payTotal', { msg: '10,000' }) }})
|
||||||
</span>
|
</span>
|
||||||
</template>
|
|
||||||
</q-field>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-4">
|
|
||||||
<q-input
|
<q-input
|
||||||
v-model="paySplitCount"
|
v-model="paySplitCount"
|
||||||
:readonly
|
:readonly
|
||||||
class="col-6"
|
class="col-3"
|
||||||
type="number"
|
type="number"
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
|
min="1"
|
||||||
/>
|
/>
|
||||||
</div>
|
</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
|
<q-select
|
||||||
outlined
|
outlined
|
||||||
clearable
|
clearable
|
||||||
|
|
@ -202,7 +283,7 @@ watch(
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
for="select-bankbook"
|
for="select-bankbook"
|
||||||
dense
|
dense
|
||||||
:label="$t('quotation.label.bank')"
|
:label="$t('quotation.bank')"
|
||||||
:options="bankBookOptions"
|
:options="bankBookOptions"
|
||||||
:readonly
|
:readonly
|
||||||
:hide-dropdown-icon="readonly"
|
:hide-dropdown-icon="readonly"
|
||||||
|
|
@ -269,7 +350,7 @@ watch(
|
||||||
<Icon icon="iconoir:coins" />
|
<Icon icon="iconoir:coins" />
|
||||||
</div>
|
</div>
|
||||||
<span class="text-weight-bold">
|
<span class="text-weight-bold">
|
||||||
{{ $t('quotation.label.infoSummary') }}
|
{{ $t('quotation.summary') }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="q-pa-sm">
|
<div class="q-pa-sm">
|
||||||
|
|
@ -290,10 +371,17 @@ watch(
|
||||||
<span class="q-ml-auto">{{ data?.totalVatExcluded || 0 }} ฿</span>
|
<span class="q-ml-auto">{{ data?.totalVatExcluded || 0 }} ฿</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
{{ $t('general.totalVatIncluded') }}
|
{{ $t('general.totalVatIncluded') + ' 7%' }}
|
||||||
<span class="q-ml-auto">{{ data?.totalVatIncluded || 0 }} ฿</span>
|
<span class="q-ml-auto">{{ data?.totalVatIncluded || 0 }} ฿</span>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</AppBox>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -87,6 +87,12 @@ const routes: RouteRecordRaw[] = [
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
path: '/quotation/add-quotation',
|
||||||
|
name: 'QuotationAdd',
|
||||||
|
component: () => import('pages/05_quotation/QuotationForm.vue'),
|
||||||
|
},
|
||||||
|
|
||||||
// Always leave this as last one,
|
// Always leave this as last one,
|
||||||
// but you can also remove it
|
// but you can also remove it
|
||||||
{
|
{
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue