feat: 04 => enhance price data component with table display and calculations
This commit is contained in:
puriphatt
parent
3e619e6856
commit
38d9727738
2 changed files with 254 additions and 77 deletions
|
|
@ -1,6 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
import { commaInput } from 'stores/utils';
|
||||
import { formatNumberDecimal, commaInput } from 'stores/utils';
|
||||
import { QTableProps } from 'quasar';
|
||||
import { calculatePrice } from 'src/utils/arithmetic';
|
||||
|
||||
const serviceCharge = defineModel<number>('serviceCharge');
|
||||
const agentPrice = defineModel<number>('agentPrice');
|
||||
|
|
@ -12,6 +14,60 @@ const price4Show = ref('');
|
|||
const agentPrice4Show = ref('');
|
||||
const serviceCharge4Show = ref('');
|
||||
|
||||
const column = [
|
||||
{
|
||||
name: 'label',
|
||||
align: 'center',
|
||||
label: 'productService.product.priceInformation',
|
||||
field: 'label',
|
||||
},
|
||||
{
|
||||
name: 'pricePerUnit',
|
||||
align: 'center',
|
||||
label: 'quotation.pricePerUnit',
|
||||
field: 'pricePerUnit',
|
||||
},
|
||||
{
|
||||
name: 'beforeVat',
|
||||
align: 'right',
|
||||
label: 'quotation.priceBeforeVat',
|
||||
field: 'beforeVat',
|
||||
},
|
||||
{
|
||||
name: 'vat',
|
||||
align: 'right',
|
||||
label: 'general.vat',
|
||||
field: 'vat',
|
||||
},
|
||||
{
|
||||
name: 'total',
|
||||
align: 'right',
|
||||
label: 'quotation.sumPrice',
|
||||
field: 'total',
|
||||
},
|
||||
] as const satisfies QTableProps['columns'];
|
||||
|
||||
const row = [
|
||||
{
|
||||
label: 'productService.product.salePrice',
|
||||
beforeVat: 0,
|
||||
vat: 0,
|
||||
total: 0,
|
||||
},
|
||||
{
|
||||
label: 'productService.product.agentPrice',
|
||||
beforeVat: 0,
|
||||
vat: 0,
|
||||
total: 0,
|
||||
},
|
||||
{
|
||||
label: 'productService.product.processingPrice',
|
||||
beforeVat: 0,
|
||||
vat: 0,
|
||||
total: 0,
|
||||
},
|
||||
] as const satisfies QTableProps['rows'];
|
||||
|
||||
watch(calcVat, () => {
|
||||
if (calcVat.value === false) vatIncluded.value = false;
|
||||
});
|
||||
|
|
@ -101,84 +157,184 @@ withDefaults(
|
|||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 row q-col-gutter-sm">
|
||||
<q-input
|
||||
id="input-price"
|
||||
for="input-price"
|
||||
v-if="priceDisplay?.price"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
debounce="500"
|
||||
class="col-4"
|
||||
:label="$t('productService.product.salePrice')"
|
||||
:model-value="commaInput(price?.toString() || '0')"
|
||||
@update:model-value="
|
||||
(v) => {
|
||||
if (typeof v === 'string') price4Show = commaInput(v);
|
||||
const x = parseFloat(
|
||||
price4Show && typeof price4Show === 'string'
|
||||
? price4Show.replace(/,/g, '')
|
||||
: '',
|
||||
);
|
||||
price = x;
|
||||
}
|
||||
"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
id="input-agent-price"
|
||||
for="input-agent-price"
|
||||
v-if="priceDisplay?.agentPrice"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
debounce="500"
|
||||
class="col-4"
|
||||
:label="$t('productService.product.agentPrice')"
|
||||
:model-value="commaInput(agentPrice?.toString() || '0')"
|
||||
@update:model-value="
|
||||
(v) => {
|
||||
if (typeof v === 'string') agentPrice4Show = commaInput(v);
|
||||
const x = parseFloat(
|
||||
agentPrice4Show && typeof agentPrice4Show === 'string'
|
||||
? agentPrice4Show.replace(/,/g, '')
|
||||
: '',
|
||||
);
|
||||
agentPrice = x;
|
||||
}
|
||||
"
|
||||
/>
|
||||
<div class="col-12">
|
||||
<q-table
|
||||
:columns="column"
|
||||
:rows="row"
|
||||
:rows-per-page-options="[0]"
|
||||
bordered
|
||||
flat
|
||||
hide-pagination
|
||||
class="full-width"
|
||||
:no-data-label="$t('general.noDataTable')"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr
|
||||
style="background-color: hsla(var(--info-bg) / 0.07)"
|
||||
:props="props"
|
||||
>
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
{{ col.label && $t(col.label) }}
|
||||
</q-th>
|
||||
</q-tr>
|
||||
</template>
|
||||
|
||||
<q-input
|
||||
id="input-service-charge"
|
||||
for="input-service-charge"
|
||||
v-if="priceDisplay?.serviceCharge"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
debounce="500"
|
||||
class="col-4"
|
||||
:label="$t('productService.product.processingPrice')"
|
||||
:model-value="commaInput(serviceCharge?.toString() || '0')"
|
||||
@update:model-value="
|
||||
(v) => {
|
||||
if (typeof v === 'string') serviceCharge4Show = commaInput(v);
|
||||
const x = parseFloat(
|
||||
serviceCharge4Show && typeof serviceCharge4Show === 'string'
|
||||
? serviceCharge4Show.replace(/,/g, '')
|
||||
: '',
|
||||
);
|
||||
serviceCharge = x;
|
||||
}
|
||||
"
|
||||
/>
|
||||
<template v-slot:body="props">
|
||||
<q-tr>
|
||||
<q-td>{{ $t(props.row.label) }}</q-td>
|
||||
<q-td class="text-right" style="width: 15%">
|
||||
<q-input
|
||||
v-if="priceDisplay?.price && props.rowIndex === 0"
|
||||
id="input-price"
|
||||
for="input-price"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
input-class="text-right"
|
||||
debounce="500"
|
||||
:model-value="commaInput(price?.toString() || '0')"
|
||||
@update:model-value="
|
||||
(v) => {
|
||||
if (typeof v === 'string') price4Show = commaInput(v);
|
||||
const x = parseFloat(
|
||||
price4Show && typeof price4Show === 'string'
|
||||
? price4Show.replace(/,/g, '')
|
||||
: '',
|
||||
);
|
||||
price = x;
|
||||
}
|
||||
"
|
||||
/>
|
||||
<q-input
|
||||
v-if="priceDisplay?.agentPrice && props.rowIndex === 1"
|
||||
id="input-agent-price"
|
||||
for="input-agent-price"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
input-class="text-right"
|
||||
debounce="500"
|
||||
:model-value="commaInput(agentPrice?.toString() || '0')"
|
||||
@update:model-value="
|
||||
(v) => {
|
||||
if (typeof v === 'string') agentPrice4Show = commaInput(v);
|
||||
const x = parseFloat(
|
||||
agentPrice4Show && typeof agentPrice4Show === 'string'
|
||||
? agentPrice4Show.replace(/,/g, '')
|
||||
: '',
|
||||
);
|
||||
agentPrice = x;
|
||||
}
|
||||
"
|
||||
/>
|
||||
<q-input
|
||||
v-if="priceDisplay?.serviceCharge && props.rowIndex === 2"
|
||||
id="input-service-charge"
|
||||
for="input-service-charge"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
input-class="text-right"
|
||||
hide-bottom-space
|
||||
debounce="500"
|
||||
:model-value="commaInput(serviceCharge?.toString() || '0')"
|
||||
@update:model-value="
|
||||
(v) => {
|
||||
if (typeof v === 'string')
|
||||
serviceCharge4Show = commaInput(v);
|
||||
const x = parseFloat(
|
||||
serviceCharge4Show &&
|
||||
typeof serviceCharge4Show === 'string'
|
||||
? serviceCharge4Show.replace(/,/g, '')
|
||||
: '',
|
||||
);
|
||||
serviceCharge = x;
|
||||
}
|
||||
"
|
||||
/>
|
||||
</q-td>
|
||||
<q-td class="text-right" style="width: 15%">
|
||||
{{
|
||||
formatNumberDecimal(
|
||||
calculatePrice({
|
||||
output: 'beforeVat',
|
||||
vatIncluded: vatIncluded,
|
||||
price:
|
||||
(props.rowIndex === 0
|
||||
? price
|
||||
: props.rowIndex === 1
|
||||
? agentPrice
|
||||
: serviceCharge) || 0,
|
||||
}),
|
||||
2,
|
||||
)
|
||||
}}
|
||||
</q-td>
|
||||
<q-td class="text-right" style="width: 15%">
|
||||
{{
|
||||
formatNumberDecimal(
|
||||
calculatePrice({
|
||||
output: 'vat',
|
||||
calcVat: calcVat,
|
||||
price:
|
||||
(props.rowIndex === 0
|
||||
? price
|
||||
: props.rowIndex === 1
|
||||
? agentPrice
|
||||
: serviceCharge) || 0,
|
||||
}),
|
||||
2,
|
||||
)
|
||||
}}
|
||||
</q-td>
|
||||
<q-td class="text-right" style="width: 15%">
|
||||
<span
|
||||
class="text-weight-bold"
|
||||
:class="{
|
||||
'tags-color-orange': props.rowIndex === 0,
|
||||
'tags-color-purple': props.rowIndex === 1,
|
||||
'tags-color-pink': props.rowIndex === 2,
|
||||
dark: $q.dark.isActive,
|
||||
}"
|
||||
>
|
||||
{{
|
||||
formatNumberDecimal(
|
||||
calculatePrice({
|
||||
output: 'total',
|
||||
vat: 0.03,
|
||||
price:
|
||||
(props.rowIndex === 0
|
||||
? price
|
||||
: props.rowIndex === 1
|
||||
? agentPrice
|
||||
: serviceCharge) || 0,
|
||||
}) +
|
||||
(!vatIncluded
|
||||
? calculatePrice({
|
||||
output: 'vat',
|
||||
calcVat: calcVat,
|
||||
price:
|
||||
(props.rowIndex === 0
|
||||
? price
|
||||
: props.rowIndex === 1
|
||||
? agentPrice
|
||||
: serviceCharge) || 0,
|
||||
})
|
||||
: 0),
|
||||
2,
|
||||
)
|
||||
}}
|
||||
</span>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</q-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -193,4 +349,24 @@ withDefaults(
|
|||
background-color: var(--surface-1);
|
||||
}
|
||||
}
|
||||
|
||||
.tags-color-orange {
|
||||
color: var(--orange-5);
|
||||
}
|
||||
|
||||
.dark .tags-color-orange {
|
||||
color: var(--orange-6);
|
||||
}
|
||||
|
||||
.tags-color-purple {
|
||||
color: var(--violet-11);
|
||||
}
|
||||
|
||||
.dark .tags-color-purple {
|
||||
color: var(--violet-10);
|
||||
}
|
||||
|
||||
.tags-color-pink {
|
||||
color: var(--pink-6);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1054,6 +1054,7 @@ function clearFormProduct() {
|
|||
code: '',
|
||||
image: undefined,
|
||||
expenseType: '',
|
||||
calcVat: true,
|
||||
vatIncluded: true,
|
||||
};
|
||||
imageProduct.value = undefined;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue