328 lines
8.8 KiB
Vue
328 lines
8.8 KiB
Vue
<script lang="ts" setup>
|
|
import { Icon } from '@iconify/vue';
|
|
import { QSelect } from 'quasar';
|
|
import { selectFilterOptionRefMod } from 'src/stores/utils';
|
|
import { onMounted, ref, watch } from 'vue';
|
|
|
|
import AppBox from 'components/app/AppBox.vue';
|
|
|
|
import useOptionStore from 'src/stores/options';
|
|
|
|
defineProps<{
|
|
readonly?: boolean;
|
|
data?: {
|
|
total: number;
|
|
discount: number;
|
|
totalVatExcluded: number;
|
|
totalVatIncluded: number;
|
|
totalAfterDiscount: number;
|
|
};
|
|
}>();
|
|
|
|
const quotationNo = defineModel<string>('quotationNo', { required: true });
|
|
const actor = defineModel<string>('actor', { required: true });
|
|
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<string>('dueDate', { required: true });
|
|
const payType = defineModel<string>('payType', { required: true });
|
|
const paySplitCount = defineModel<string>('paySplitCount', { required: true });
|
|
const payBank = defineModel<string>('payBank', { required: true });
|
|
|
|
const optionStore = useOptionStore();
|
|
|
|
const bankBookOptions = ref<Record<string, unknown>[]>([]);
|
|
let bankBoookFilter: (
|
|
value: string,
|
|
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
|
|
) => void;
|
|
|
|
onMounted(() => {
|
|
if (optionStore.globalOption) {
|
|
bankBoookFilter = selectFilterOptionRefMod(
|
|
ref(optionStore.globalOption.bankBook),
|
|
bankBookOptions,
|
|
'label',
|
|
);
|
|
}
|
|
});
|
|
|
|
watch(
|
|
() => optionStore.globalOption,
|
|
() => {
|
|
bankBoookFilter = selectFilterOptionRefMod(
|
|
ref(optionStore.globalOption.bankBook),
|
|
bankBookOptions,
|
|
'label',
|
|
);
|
|
},
|
|
);
|
|
</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('quotation.label.infoDocument') }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="q-pa-sm">
|
|
<div class="row q-col-gutter-sm">
|
|
<q-input
|
|
:label="$t('quotation.label.quotationNo')"
|
|
:readonly
|
|
v-model="quotationNo"
|
|
class="col-12"
|
|
dense
|
|
outlined
|
|
/>
|
|
<q-input
|
|
:label="$t('quotation.label.actor')"
|
|
:readonly
|
|
v-model="actor"
|
|
class="col-12"
|
|
dense
|
|
outlined
|
|
/>
|
|
<q-input
|
|
:label="$t('quotation.label.workName')"
|
|
:readonly
|
|
v-model="workName"
|
|
class="col-12"
|
|
dense
|
|
outlined
|
|
/>
|
|
<q-input
|
|
:label="$t('quotation.label.contactor')"
|
|
:readonly
|
|
v-model="contactor"
|
|
class="col-12"
|
|
dense
|
|
outlined
|
|
/>
|
|
<q-input
|
|
:label="$t('quotation.label.telephone')"
|
|
:readonly="readonly"
|
|
v-model="telephone"
|
|
class="col-12"
|
|
dense
|
|
outlined
|
|
/>
|
|
<q-input
|
|
:label="$t('quotation.label.documentReceivePoint')"
|
|
:readonly
|
|
v-model="documentReceivePoint"
|
|
class="col-12"
|
|
dense
|
|
outlined
|
|
/>
|
|
<q-input
|
|
:label="$t('quotation.label.dueDate')"
|
|
:readonly
|
|
v-model="dueDate"
|
|
class="col-12"
|
|
dense
|
|
outlined
|
|
/>
|
|
</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.label.infoPayment') }}
|
|
</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"
|
|
class="col-12"
|
|
autocomplete="off"
|
|
for="select-payType"
|
|
dense
|
|
:label="$t('quotation.label.payType')"
|
|
:options="[]"
|
|
:readonly
|
|
:hide-dropdown-icon="readonly"
|
|
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') }})
|
|
</span>
|
|
</template>
|
|
</q-field>
|
|
</div>
|
|
<div class="col-4">
|
|
<q-input
|
|
v-model="paySplitCount"
|
|
:readonly
|
|
class="col-6"
|
|
type="number"
|
|
dense
|
|
outlined
|
|
/>
|
|
</div>
|
|
<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.label.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.label.infoSummary') }}
|
|
</span>
|
|
</div>
|
|
<div class="q-pa-sm">
|
|
<div class="row">
|
|
{{ $t('general.total') }}
|
|
<span class="q-ml-auto">{{ data?.total || 0 }} ฿</span>
|
|
</div>
|
|
<div class="row">
|
|
{{ $t('general.discount') }}
|
|
<span class="q-ml-auto">{{ data?.discount || 0 }} ฿</span>
|
|
</div>
|
|
<div class="row">
|
|
{{ $t('general.totalAfterDiscount') }}
|
|
<span class="q-ml-auto">{{ data?.totalAfterDiscount || 0 }} ฿</span>
|
|
</div>
|
|
<div class="row">
|
|
{{ $t('general.totalVatExcluded') }}
|
|
<span class="q-ml-auto">{{ data?.totalVatExcluded || 0 }} ฿</span>
|
|
</div>
|
|
<div class="row">
|
|
{{ $t('general.totalVatIncluded') }}
|
|
<span class="q-ml-auto">{{ data?.totalVatIncluded || 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);
|
|
}
|
|
|
|
.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>
|