fix: product table
This commit is contained in:
puriphatt
parent
c2910ce459
commit
4e736a2c96
3 changed files with 326 additions and 122 deletions
|
|
@ -1,15 +1,17 @@
|
|||
<script lang="ts" setup>
|
||||
import { computed, watch } from 'vue';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { QTableProps } from 'quasar';
|
||||
import ThaiBahtText from 'thai-baht-text';
|
||||
import { toWords } from 'number-to-words';
|
||||
import { storeToRefs } from 'pinia';
|
||||
|
||||
import { commaInput } from 'stores/utils';
|
||||
import { precisionRound } from 'src/utils/arithmetic';
|
||||
import TableComponents from 'components/TableComponents.vue';
|
||||
import { QuotationPayload } from 'stores/quotations/types';
|
||||
import { formatNumberDecimal } from 'stores/utils';
|
||||
import { useConfigStore } from 'stores/config';
|
||||
import { Product, Service, Work } from 'src/stores/product-service/types';
|
||||
|
||||
defineProps<{
|
||||
agentPrice: boolean;
|
||||
|
|
@ -27,6 +29,21 @@ const rows = defineModel<
|
|||
Required<QuotationPayload['productServiceList'][number]>[]
|
||||
>('rows', { required: true });
|
||||
|
||||
const groupList = defineModel<
|
||||
{
|
||||
title: string;
|
||||
product: {
|
||||
amount: number;
|
||||
discount: number;
|
||||
pricePerUnit: number;
|
||||
vat: number;
|
||||
product: Product;
|
||||
service?: Service;
|
||||
work?: Work;
|
||||
}[];
|
||||
}[]
|
||||
>('groupList', { default: [] });
|
||||
|
||||
const summaryPrice = defineModel<{
|
||||
totalPrice: number;
|
||||
totalDiscount: number;
|
||||
|
|
@ -42,9 +59,13 @@ const summaryPrice = defineModel<{
|
|||
},
|
||||
});
|
||||
|
||||
const totalDiscount4show = ref(summaryPrice.value.totalDiscount.toString());
|
||||
|
||||
function calcPrice(c: (typeof rows.value)[number]) {
|
||||
return precisionRound(
|
||||
c.pricePerUnit * c.amount - c.discount + c.vat * c.amount,
|
||||
c.pricePerUnit * c.amount -
|
||||
c.discount +
|
||||
c.pricePerUnit * (config.value?.vat || 0.07) * c.amount,
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -87,7 +108,7 @@ const columns = [
|
|||
},
|
||||
{
|
||||
name: 'name',
|
||||
align: 'left',
|
||||
align: 'center',
|
||||
label: 'productService.service.list',
|
||||
field: (v) => v.product.name,
|
||||
},
|
||||
|
|
@ -109,10 +130,16 @@ const columns = [
|
|||
label: 'general.discount',
|
||||
field: 'discount',
|
||||
},
|
||||
{
|
||||
name: 'priceBeforeVat',
|
||||
align: 'center',
|
||||
label: 'quotation.priceBeforeVat',
|
||||
field: 'priceBeforeVat',
|
||||
},
|
||||
{
|
||||
name: 'tax',
|
||||
align: 'center',
|
||||
label: 'quotation.tax',
|
||||
label: 'general.vat',
|
||||
field: 'tax',
|
||||
},
|
||||
{
|
||||
|
|
@ -144,105 +171,217 @@ watch(
|
|||
<template>
|
||||
<div class="column">
|
||||
<div class="full-width">
|
||||
<TableComponents
|
||||
flat
|
||||
bordered
|
||||
hidePagination
|
||||
button-delete
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
:customColumn="[
|
||||
'name',
|
||||
'amount',
|
||||
'pricePerUnit',
|
||||
'discount',
|
||||
'tax',
|
||||
'sumPrice',
|
||||
]"
|
||||
@delete="(i) => $emit('delete', i)"
|
||||
>
|
||||
<template v-slot:body-cell-name="{ props }">
|
||||
<q-td>
|
||||
<q-avatar class="q-mr-sm" size="md">
|
||||
<q-icon
|
||||
class="full-width full-height"
|
||||
name="mdi-shopping-outline"
|
||||
:style="`color: var(--teal-10); background: hsla(var(--teal-${$q.dark.isActive ? '8' : '10'}-hsl)/0.15)`"
|
||||
/>
|
||||
</q-avatar>
|
||||
{{ props.row.product.name }}
|
||||
</q-td>
|
||||
</template>
|
||||
|
||||
<template v-slot:body-cell-amount="{ props }">
|
||||
<q-td align="center">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
type="number"
|
||||
style="width: 70px"
|
||||
min="0"
|
||||
v-model="props.row.amount"
|
||||
/>
|
||||
</q-td>
|
||||
</template>
|
||||
|
||||
<template v-slot:body-cell-pricePerUnit="{ props }">
|
||||
<q-td align="right">
|
||||
{{ formatNumberDecimal(props.row.pricePerUnit, 2) }}
|
||||
</q-td>
|
||||
</template>
|
||||
|
||||
<template v-slot:body-cell-discount="{ props }">
|
||||
<q-td align="center">
|
||||
<q-input
|
||||
dense
|
||||
min="0"
|
||||
outlined
|
||||
type="number"
|
||||
style="width: 70px"
|
||||
v-model="props.row.discount"
|
||||
/>
|
||||
</q-td>
|
||||
</template>
|
||||
|
||||
<template v-slot:body-cell-tax="{ props }">
|
||||
<q-td align="center">
|
||||
{{
|
||||
precisionRound(
|
||||
(props.row.pricePerUnit * props.row.amount -
|
||||
props.row.discount) *
|
||||
(config?.vat || 0.07),
|
||||
)
|
||||
}}
|
||||
</q-td>
|
||||
</template>
|
||||
|
||||
<template v-slot:body-cell-sumPrice="{ props }">
|
||||
<q-td align="right">
|
||||
{{ formatNumberDecimal(calcPrice(props.row), 2) }}
|
||||
</q-td>
|
||||
</template>
|
||||
|
||||
<template #button>
|
||||
<q-btn
|
||||
icon="mdi-monitor"
|
||||
<section v-for="(item, i) in groupList" :key="i" class="q-pb-md">
|
||||
<div
|
||||
v-if="item.title"
|
||||
class="q-py-sm q-px-md bordered"
|
||||
style="background: hsla(var(--orange-5-hsl) / 0.1)"
|
||||
>
|
||||
<q-avatar
|
||||
class="q-mr-lg"
|
||||
style="background: var(--orange-5); color: var(--surface-1)"
|
||||
size="sm"
|
||||
class="rounded q-mr-xs"
|
||||
padding="4px 8px"
|
||||
dense
|
||||
flat
|
||||
style="
|
||||
background-color: hsla(var(--positive-bg) / 0.1);
|
||||
color: hsl(var(--positive-bg));
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
</TableComponents>
|
||||
>
|
||||
{{ i + 1 }}
|
||||
</q-avatar>
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<TableComponents
|
||||
flat
|
||||
bordered
|
||||
hidePagination
|
||||
button-delete
|
||||
:columns="columns"
|
||||
:rows="item.product"
|
||||
:customColumn="[
|
||||
'name',
|
||||
'amount',
|
||||
'pricePerUnit',
|
||||
'discount',
|
||||
'tax',
|
||||
'sumPrice',
|
||||
'priceBeforeVat',
|
||||
]"
|
||||
@delete="(i) => $emit('delete', i)"
|
||||
>
|
||||
<template v-slot:body-cell-name="{ props }">
|
||||
<q-td>
|
||||
<q-avatar class="q-mr-sm" size="md">
|
||||
<q-icon
|
||||
class="full-width full-height"
|
||||
name="mdi-shopping-outline"
|
||||
:style="`color: var(--teal-10); background: hsla(var(--teal-${$q.dark.isActive ? '8' : '10'}-hsl)/0.15)`"
|
||||
/>
|
||||
</q-avatar>
|
||||
{{ props.row.product.name }}
|
||||
</q-td>
|
||||
</template>
|
||||
|
||||
<template v-slot:body-cell-amount="{ props }">
|
||||
<q-td align="center">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
type="number"
|
||||
style="width: 70px"
|
||||
min="0"
|
||||
v-model="props.row.amount"
|
||||
/>
|
||||
</q-td>
|
||||
</template>
|
||||
|
||||
<template v-slot:body-cell-pricePerUnit="{ props }">
|
||||
<q-td align="right">
|
||||
{{
|
||||
formatNumberDecimal(
|
||||
props.row.pricePerUnit +
|
||||
props.row.pricePerUnit * (config?.vat || 0.07),
|
||||
2,
|
||||
)
|
||||
}}
|
||||
</q-td>
|
||||
</template>
|
||||
|
||||
<template v-slot:body-cell-discount="{ props }">
|
||||
<q-td align="center">
|
||||
<q-input
|
||||
dense
|
||||
min="0"
|
||||
outlined
|
||||
input-class="text-right"
|
||||
type="number"
|
||||
style="width: 90px"
|
||||
v-model="props.row.discount"
|
||||
/>
|
||||
</q-td>
|
||||
</template>
|
||||
|
||||
<template v-slot:body-cell-priceBeforeVat="{ props }">
|
||||
<q-td align="right">
|
||||
{{ formatNumberDecimal(props.row.pricePerUnit, 2) }}
|
||||
</q-td>
|
||||
</template>
|
||||
|
||||
<template v-slot:body-cell-tax="{ props }">
|
||||
<q-td align="right">
|
||||
{{
|
||||
precisionRound(
|
||||
(props.row.pricePerUnit * props.row.amount -
|
||||
props.row.discount) *
|
||||
(config?.vat || 0.07),
|
||||
)
|
||||
}}
|
||||
</q-td>
|
||||
</template>
|
||||
|
||||
<template v-slot:body-cell-sumPrice="{ props }">
|
||||
<q-td align="right">
|
||||
{{ formatNumberDecimal(calcPrice(props.row), 2) }}
|
||||
</q-td>
|
||||
</template>
|
||||
|
||||
<template #button>
|
||||
<q-btn
|
||||
icon="mdi-monitor"
|
||||
size="sm"
|
||||
class="rounded q-mr-xs"
|
||||
padding="4px 8px"
|
||||
dense
|
||||
flat
|
||||
style="
|
||||
background-color: hsla(var(--positive-bg) / 0.1);
|
||||
color: hsl(var(--positive-bg));
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
</TableComponents>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="column q-ml-auto text-caption app-text-muted-2 q-pt-md"
|
||||
<div class="row text-weight-bold text-caption items-start">
|
||||
<span
|
||||
class="col row items-center justify-between q-px-md q-py-xs q-mr-lg rounded bg-color-orange-light"
|
||||
>
|
||||
<span class="app-text-muted-2">
|
||||
{{ $t('general.totalAmount') }}
|
||||
</span>
|
||||
<span v-if="summary.finalPrice">
|
||||
{{
|
||||
$i18n.locale === 'eng'
|
||||
? EngBahtText(summary.finalPrice)
|
||||
: ThaiBahtText(summary.finalPrice)
|
||||
}}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<div class="col column">
|
||||
<div class="row q-py-xs q-pr-xs q-pl-md">
|
||||
<span class="col-9 app-text-muted-2">
|
||||
{{ $t('quotation.allProductPrice') }}
|
||||
</span>
|
||||
<q-input
|
||||
dense
|
||||
class="col price-tag"
|
||||
readonly
|
||||
outlined
|
||||
input-class="text-right text-bold "
|
||||
:model-value="formatNumberDecimal(summary.totalPrice, 2)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="row q-py-xs q-pr-xs q-pl-md">
|
||||
<span class="col-9 app-text-muted-2">
|
||||
{{ $t('quotation.quotationDiscount') }}
|
||||
{{ console.log(totalDiscount4show) }}
|
||||
</span>
|
||||
<q-input
|
||||
dense
|
||||
class="col price-tag"
|
||||
outlined
|
||||
input-class="text-right text-bold"
|
||||
v-model="summary.totalDiscount"
|
||||
/>
|
||||
<!-- <q-input
|
||||
dense
|
||||
class="col price-tag"
|
||||
outlined
|
||||
input-class="text-right text-bold"
|
||||
:model-value="commaInput(summary.totalDiscount.toString())"
|
||||
@update:model-value="
|
||||
(v) => {
|
||||
if (typeof v === 'string') totalDiscount4show = commaInput(v);
|
||||
const x = parseInt(
|
||||
totalDiscount4show && typeof totalDiscount4show === 'string'
|
||||
? totalDiscount4show.replace(/,/g, '')
|
||||
: '',
|
||||
);
|
||||
summary.totalDiscount = x;
|
||||
}
|
||||
"
|
||||
/> -->
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="row text-bold bg-color-orange rounded q-py-xs q-pr-xs q-pl-md items-center"
|
||||
style="color: var(--surface-1)"
|
||||
>
|
||||
<span class="col-9">
|
||||
{{ $t('general.totalAmount') }}
|
||||
</span>
|
||||
<q-input
|
||||
dense
|
||||
class="col price-tag"
|
||||
outlined
|
||||
readonly
|
||||
input-class="text-right text-bold "
|
||||
:model-value="formatNumberDecimal(summary.finalPrice, 2)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div
|
||||
class="column q-ml-auto text-caption app-text-muted-2"
|
||||
style="width: 15vw"
|
||||
>
|
||||
<div class="row">
|
||||
|
|
@ -280,11 +419,26 @@ watch(
|
|||
? EngBahtText(summary.finalPrice)
|
||||
: ThaiBahtText(summary.finalPrice)
|
||||
}})
|
||||
</span>
|
||||
</span> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.bg-color-orange-light {
|
||||
--_color: var(--yellow-7-hsl);
|
||||
background: hsla(var(--_color) / 0.2);
|
||||
}
|
||||
|
||||
.bg-color-orange {
|
||||
--_color: var(--yellow-7-hsl);
|
||||
color: white;
|
||||
background: hsla(var(--_color));
|
||||
}
|
||||
|
||||
.dark .bg-color-orange {
|
||||
--_color: var(--orange-6-hsl / 0.2);
|
||||
}
|
||||
|
||||
.worker-item {
|
||||
--side-color: var(--brand-1);
|
||||
position: relative;
|
||||
|
|
@ -299,6 +453,12 @@ watch(
|
|||
}
|
||||
}
|
||||
|
||||
:deep(.price-tag .q-field__control) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.worker-item::before {
|
||||
position: absolute;
|
||||
content: ' ';
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts" setup>
|
||||
import { computed, reactive, ref, watch } from 'vue';
|
||||
import { computed, nextTick, reactive, ref, watch } from 'vue';
|
||||
import { moveItemUp, moveItemDown, deleteItem } from 'stores/utils';
|
||||
import useOptionStore from 'stores/options';
|
||||
|
||||
|
|
@ -46,6 +46,9 @@ const emit = defineEmits<{
|
|||
(e: 'submit', nodes: Node[]): void;
|
||||
}>();
|
||||
|
||||
const selectedProductGroup = defineModel<string>('selectedProductGroup', {
|
||||
default: '',
|
||||
});
|
||||
const model = defineModel<boolean>();
|
||||
const inputSearch = defineModel<string>('inputSearch');
|
||||
const productGroup = defineModel<ProductGroup[]>('productGroup', {
|
||||
|
|
@ -90,7 +93,6 @@ const productServiceCard = ref<{
|
|||
const splitterModel = ref(0);
|
||||
const selectedType = ref<'group' | 'type' | 'work' | 'product' | ''>('');
|
||||
const selectedNode = ref<Node[]>([]);
|
||||
const selectedProductGroup = ref('');
|
||||
const selectedItems = ref<Record<string, any>[]>([]);
|
||||
const preSelectedItems = ref<Record<string, any>[]>([]);
|
||||
const refSelectZone = ref<InstanceType<typeof SelectZone>>();
|
||||
|
|
@ -106,9 +108,13 @@ function triggerInfo() {
|
|||
pageState.infoDrawer = !pageState.infoDrawer;
|
||||
}
|
||||
|
||||
function triggerAddDialog() {
|
||||
assignSelect(preSelectedItems.value, selectedItems.value);
|
||||
async function triggerAddDialog() {
|
||||
pageState.addModal = true;
|
||||
await nextTick();
|
||||
refSelectZone.value?.assignSelect(
|
||||
preSelectedItems.value,
|
||||
selectedItems.value,
|
||||
);
|
||||
}
|
||||
|
||||
function toggleSelected(node: Node) {
|
||||
|
|
@ -179,7 +185,10 @@ function mapCard() {
|
|||
}
|
||||
|
||||
function mapNode() {
|
||||
assignSelect(selectedItems.value, preSelectedItems.value);
|
||||
refSelectZone.value?.assignSelect(
|
||||
selectedItems.value,
|
||||
preSelectedItems.value,
|
||||
);
|
||||
|
||||
const node = selectedItems.value.map((v) => {
|
||||
if (v.type === 'service') {
|
||||
|
|
@ -261,11 +270,11 @@ function mapNode() {
|
|||
})(),
|
||||
};
|
||||
} else {
|
||||
const price = prop.agentPrice ? v.agentPrice : v.price;
|
||||
const pricePerUnit = v.vatIncluded
|
||||
const price = prop.agentPrice ? v.raw.agentPrice : v.raw.price;
|
||||
const pricePerUnit = v.raw.vatIncluded
|
||||
? precisionRound(price / (1 + (config.value?.vat || 0.07)))
|
||||
: price;
|
||||
|
||||
console.log(v);
|
||||
return {
|
||||
id: v.id,
|
||||
title: v.name,
|
||||
|
|
@ -292,19 +301,6 @@ function mapNode() {
|
|||
pageState.addModal = false;
|
||||
}
|
||||
|
||||
function assignSelect(to: Record<string, any>[], from: Record<string, any>[]) {
|
||||
const existingItems = new Set(to);
|
||||
|
||||
for (let i = to.length - 1; i >= 0; i--) {
|
||||
if (!from.includes(to[i])) {
|
||||
to.splice(i, 1);
|
||||
}
|
||||
}
|
||||
|
||||
const newItems = from.filter((item) => !existingItems.has(item));
|
||||
to.push(...newItems);
|
||||
}
|
||||
|
||||
watch(
|
||||
() => selectedNode.value,
|
||||
(v) => {
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ import {
|
|||
ProductGroup,
|
||||
Product,
|
||||
Service,
|
||||
Work,
|
||||
} from 'src/stores/product-service/types';
|
||||
|
||||
// NOTE: Import Components
|
||||
|
|
@ -109,6 +110,7 @@ const selectedWorker = ref<
|
|||
>([]);
|
||||
const workerList = ref<Employee[]>([]);
|
||||
|
||||
const selectedProductGroup = ref('');
|
||||
const agentPrice = ref(false);
|
||||
const summaryPrice = ref<{
|
||||
totalPrice: number;
|
||||
|
|
@ -184,6 +186,20 @@ const formDataEmployee = ref<
|
|||
const productServiceList = ref<
|
||||
Required<QuotationPayload['productServiceList'][number]>[]
|
||||
>([]);
|
||||
const productServiceTableData = ref<
|
||||
{
|
||||
title: string;
|
||||
product: {
|
||||
amount: number;
|
||||
discount: number;
|
||||
pricePerUnit: number;
|
||||
vat: number;
|
||||
product: Product;
|
||||
service?: Service;
|
||||
work?: Work;
|
||||
}[];
|
||||
}[]
|
||||
>([{ title: '', product: [] }]);
|
||||
|
||||
function convertDataToFormSubmit() {
|
||||
quotationFormData.value.productServiceList = JSON.parse(
|
||||
|
|
@ -318,6 +334,25 @@ function convertToTable(nodes: Node[]) {
|
|||
|
||||
productServiceList.value = list;
|
||||
|
||||
const pdList: Node[] = [];
|
||||
const groupByService = nodes
|
||||
.map((n) => {
|
||||
if (n.type === 'type' && n.children) {
|
||||
const products = n.children.flatMap(_recursive).map((v) => v.value);
|
||||
return {
|
||||
title: n.title,
|
||||
product: products,
|
||||
};
|
||||
} else if (n.type === 'product') {
|
||||
pdList.push(n.value);
|
||||
}
|
||||
return null;
|
||||
})
|
||||
.filter((t) => t !== null);
|
||||
if (pdList.length > 0) groupByService.push({ title: '', product: pdList });
|
||||
productServiceTableData.value = [];
|
||||
productServiceTableData.value = groupByService;
|
||||
|
||||
pageState.productServiceModal = false;
|
||||
}
|
||||
|
||||
|
|
@ -590,9 +625,21 @@ watch(
|
|||
</section>
|
||||
</template>
|
||||
<div class="surface-1 q-pa-md full-width">
|
||||
<span
|
||||
v-if="productServiceList.length > 0"
|
||||
class="text-weight-bold row items-center q-pb-md"
|
||||
>
|
||||
{{
|
||||
productGroup.find((g) => g.id === selectedProductGroup)
|
||||
?.name || '-'
|
||||
}}
|
||||
<q-icon name="mdi-chevron-right" class="q-pl-sm" size="xs" />
|
||||
</span>
|
||||
|
||||
<ProductItem
|
||||
:agent-price="agentPrice"
|
||||
@delete="toggleDeleteProduct"
|
||||
v-model:groupList="productServiceTableData"
|
||||
v-model:rows="productServiceList"
|
||||
v-model:summary-price="summaryPrice"
|
||||
/>
|
||||
|
|
@ -791,6 +838,7 @@ watch(
|
|||
v-model:product-group="productGroup"
|
||||
v-model:product-list="productList"
|
||||
v-model:service-list="serviceList"
|
||||
v-model:selected-product-group="selectedProductGroup"
|
||||
:agent-price="agentPrice"
|
||||
@submit="convertToTable"
|
||||
@select-group="
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue