577 lines
17 KiB
Vue
577 lines
17 KiB
Vue
<script lang="ts" setup>
|
|
import { ref, watch } from 'vue';
|
|
import { QTableProps, QTableSlots } from 'quasar';
|
|
import { storeToRefs } from 'pinia';
|
|
import { baseUrl } from 'stores/utils';
|
|
|
|
import WorkerItem from './WorkerItem.vue';
|
|
import DeleteButton from '../button/DeleteButton.vue';
|
|
import { precisionRound } from 'src/utils/arithmetic';
|
|
import {
|
|
ProductRelation,
|
|
ProductServiceList,
|
|
QuotationPayload,
|
|
} from 'stores/quotations/types';
|
|
import { formatNumberDecimal, commaInput } from 'stores/utils';
|
|
import { useConfigStore } from 'stores/config';
|
|
|
|
const props = defineProps<{
|
|
readonly?: boolean;
|
|
agentPrice: boolean;
|
|
installmentInput?: boolean;
|
|
maxInstallment?: number | null;
|
|
employeeRows?: {
|
|
foreignRefNo: string;
|
|
employeeName: string;
|
|
birthDate: string;
|
|
gender: string;
|
|
age: string;
|
|
nationality: string;
|
|
documentExpireDate: string;
|
|
imgUrl: string;
|
|
status: string;
|
|
}[];
|
|
}>();
|
|
|
|
defineEmits<{
|
|
(e: 'viewFile', data: ProductRelation): void;
|
|
(e: 'delete', index: number): void;
|
|
(
|
|
e: 'updateTable',
|
|
data: QuotationPayload['productServiceList'][number],
|
|
opt?: {
|
|
newInstallmentNo: number;
|
|
},
|
|
): void;
|
|
}>();
|
|
|
|
const configStore = useConfigStore();
|
|
const { data: config } = storeToRefs(configStore);
|
|
|
|
const rows = defineModel<
|
|
Required<QuotationPayload['productServiceList'][number]>[]
|
|
>('rows', { required: true });
|
|
|
|
const currentBtnOpen = ref<{ title: string; opened: boolean[] }[]>([
|
|
{ title: '', opened: [] },
|
|
]);
|
|
|
|
function calcPrice(c: (typeof rows.value)[number]) {
|
|
const originalPrice = c.pricePerUnit;
|
|
const finalPriceWithVat = precisionRound(
|
|
originalPrice + originalPrice * (config.value?.vat || 0.07),
|
|
);
|
|
const finalPriceNoVat = finalPriceWithVat / (1 + (config.value?.vat || 0.07));
|
|
|
|
const price = finalPriceNoVat * c.amount - c.discount;
|
|
const vat = c.product[props.agentPrice ? 'agentPriceCalcVat' : 'calcVat']
|
|
? (finalPriceNoVat * c.amount - c.discount) * (config.value?.vat || 0.07)
|
|
: 0;
|
|
return precisionRound(price + vat);
|
|
}
|
|
|
|
const discount4Show = ref<string[]>([]);
|
|
|
|
const columns = [
|
|
{
|
|
name: 'order',
|
|
align: 'center',
|
|
label: 'general.order',
|
|
field: 'order',
|
|
},
|
|
{
|
|
name: 'code',
|
|
align: 'left',
|
|
label: 'productService.product.code',
|
|
field: (v) => v.product.code,
|
|
},
|
|
{
|
|
name: 'name',
|
|
align: 'center',
|
|
label: 'quotation.productList',
|
|
field: (v) => v.product.name,
|
|
},
|
|
{
|
|
name: 'amount',
|
|
align: 'center',
|
|
label: 'taskOrder.amountOfEmployee',
|
|
field: 'amount',
|
|
},
|
|
{
|
|
name: 'pricePerUnit',
|
|
align: 'right',
|
|
label: 'quotation.pricePerUnit',
|
|
field: 'pricePerUnit',
|
|
},
|
|
{
|
|
name: 'discount',
|
|
align: 'center',
|
|
label: 'general.discount',
|
|
field: 'discount',
|
|
},
|
|
{
|
|
name: 'priceBeforeVat',
|
|
align: 'center',
|
|
label: 'quotation.priceBeforeVat',
|
|
field: 'priceBeforeVat',
|
|
},
|
|
{
|
|
name: 'vat',
|
|
align: 'center',
|
|
label: 'general.vat',
|
|
field: 'vat',
|
|
},
|
|
{
|
|
name: 'sumPrice',
|
|
align: 'right',
|
|
label: 'quotation.totalPriceBaht',
|
|
field: 'sumPrice',
|
|
},
|
|
] satisfies QTableProps['columns'];
|
|
|
|
function openEmployeeTable(title: string, index: number) {
|
|
currentBtnOpen.value[0].title = title;
|
|
currentBtnOpen.value[0].opened.map((_, i) => {
|
|
if (i !== index) {
|
|
currentBtnOpen.value[0].opened[i] = false;
|
|
}
|
|
});
|
|
|
|
currentBtnOpen.value[0].opened[index] =
|
|
!currentBtnOpen.value[0].opened[index];
|
|
}
|
|
|
|
function groupByServiceId(data: typeof rows.value) {
|
|
if (data.length === 0) return;
|
|
const groupedItems: {
|
|
title: string;
|
|
product: QuotationPayload['productServiceList'][number][];
|
|
}[] = [];
|
|
let noServiceGroup: QuotationPayload['productServiceList'][number][] = [];
|
|
let currentServiceId: string | null = null;
|
|
let currentServiceName: string | null = null;
|
|
let serviceFlag: boolean = false;
|
|
|
|
data.forEach((item) => {
|
|
if (item.service) {
|
|
if (noServiceGroup.length > 0) {
|
|
// console.log('push p changmode');
|
|
groupedItems.push({
|
|
title: `_product${groupedItems.length}`,
|
|
product: noServiceGroup,
|
|
});
|
|
noServiceGroup = [];
|
|
currentServiceId = null;
|
|
currentServiceName = null;
|
|
}
|
|
|
|
if (currentServiceId !== null && currentServiceId !== item.service.id) {
|
|
// console.log('push s chageS');
|
|
groupedItems.push({
|
|
title: currentServiceName || '',
|
|
product: rows.value.filter((i) => i.service?.id === currentServiceId),
|
|
});
|
|
}
|
|
|
|
// console.log('set id');
|
|
currentServiceId = item.service.id;
|
|
currentServiceName = item.service.name;
|
|
serviceFlag = true;
|
|
} else {
|
|
// console.log('push s chagemode');
|
|
serviceFlag &&
|
|
groupedItems.push({
|
|
title: currentServiceName || '',
|
|
product: rows.value.filter((i) => i.service?.id === currentServiceId),
|
|
});
|
|
noServiceGroup.push(item);
|
|
serviceFlag = false;
|
|
}
|
|
});
|
|
|
|
if (serviceFlag && currentServiceId !== null) {
|
|
// console.log('push s last');
|
|
groupedItems.push({
|
|
title: currentServiceName || '',
|
|
product: rows.value.filter((i) => i.service?.id === currentServiceId),
|
|
});
|
|
}
|
|
|
|
if (noServiceGroup.length > 0) {
|
|
// console.log('push p last');
|
|
groupedItems.push({
|
|
title: `_product${groupedItems.length}`,
|
|
product: noServiceGroup,
|
|
});
|
|
}
|
|
|
|
return groupedItems;
|
|
}
|
|
|
|
function handleCheck(
|
|
index: number,
|
|
data: QuotationPayload['productServiceList'][number],
|
|
) {
|
|
const equals = data.amount === data.workerIndex.length;
|
|
const target = data.workerIndex.indexOf(index);
|
|
if (target > -1) {
|
|
data.workerIndex.splice(target, 1);
|
|
if (equals) data.amount -= 1;
|
|
} else {
|
|
data.workerIndex.push(index);
|
|
if (equals) data.amount += 1;
|
|
}
|
|
data.amount = Math.max(data.workerIndex.length, data.amount);
|
|
}
|
|
|
|
watch(
|
|
() => props.employeeRows,
|
|
(current, before) => {
|
|
if (current === undefined || before === undefined) return;
|
|
|
|
rows.value.forEach((items) => {
|
|
const mapping = items.workerIndex.map((v) => before[v]);
|
|
const incoming = current.filter(
|
|
(lhs) =>
|
|
!before.find((rhs) => {
|
|
return JSON.stringify(lhs) === JSON.stringify(rhs);
|
|
}),
|
|
);
|
|
const selected = mapping.concat(incoming);
|
|
|
|
items.workerIndex = selected
|
|
.map((lhs) =>
|
|
current.findIndex((rhs) => {
|
|
return JSON.stringify(lhs) === JSON.stringify(rhs);
|
|
}),
|
|
)
|
|
.filter((v) => v !== -1);
|
|
items.amount = items.workerIndex.length;
|
|
});
|
|
},
|
|
);
|
|
|
|
watch(
|
|
() => props.maxInstallment,
|
|
() => {
|
|
if (!props.maxInstallment) return;
|
|
let test: ProductServiceList[] = [];
|
|
const items = groupByServiceId(
|
|
rows.value.map((v, i) => Object.assign(v, { i })),
|
|
) || [{ title: '', product: [] }];
|
|
|
|
items.forEach((p) => {
|
|
test = test.concat(p.product.flatMap((item) => item));
|
|
});
|
|
test.forEach((p) => {
|
|
if ((props.maxInstallment || 0) < (p.installmentNo || 0)) {
|
|
p.installmentNo = Number(props.maxInstallment);
|
|
}
|
|
});
|
|
},
|
|
);
|
|
</script>
|
|
<template>
|
|
<div class="column">
|
|
<div class="full-width">
|
|
<section
|
|
v-for="(item, i) in groupByServiceId(
|
|
rows.map((v, i) => Object.assign(v, { i })),
|
|
) || [{ title: '', product: [] }]"
|
|
:key="i"
|
|
class="q-pb-md"
|
|
>
|
|
<q-table
|
|
flat
|
|
bordered
|
|
hide-pagination
|
|
:columns="
|
|
installmentInput
|
|
? [
|
|
...columns.slice(0, 1),
|
|
{
|
|
name: 'periodNo',
|
|
align: 'left',
|
|
label: 'quotation.periodNo',
|
|
field: (v) => v.product.code,
|
|
},
|
|
...columns.slice(1),
|
|
]
|
|
: columns
|
|
"
|
|
:rows="item.product"
|
|
class="full-width"
|
|
:no-data-label="$t('general.noDataTable')"
|
|
:pagination="{
|
|
rowsPerPage: 0,
|
|
}"
|
|
>
|
|
<template #header="{ cols }">
|
|
<q-tr style="background-color: hsla(var(--info-bg) / 0.07)">
|
|
<q-th v-for="v in cols" :key="v">
|
|
{{ $t(v.label) }}
|
|
</q-th>
|
|
<q-th auto-width />
|
|
</q-tr>
|
|
</template>
|
|
|
|
<template
|
|
#body="props: {
|
|
row: Required<QuotationPayload['productServiceList'][number]>;
|
|
} & Omit<Parameters<QTableSlots['body']>[0], 'row'>"
|
|
>
|
|
<q-tr>
|
|
<q-td class="text-center">{{ props.rowIndex + 1 }}</q-td>
|
|
<q-td v-if="installmentInput">
|
|
<q-input
|
|
:readonly
|
|
:bg-color="readonly ? 'transparent' : ''"
|
|
dense
|
|
min="1"
|
|
:max="maxInstallment"
|
|
outlined
|
|
input-class="text-right"
|
|
type="number"
|
|
style="width: 60px"
|
|
:model-value="props.row.installmentNo"
|
|
@update:model-value="
|
|
(v) => {
|
|
$emit('updateTable', props.row, {
|
|
newInstallmentNo: Number(v),
|
|
});
|
|
props.row.installmentNo = Number(v);
|
|
}
|
|
"
|
|
></q-input>
|
|
</q-td>
|
|
<q-td class="text-center">{{ props.row.product.code }}</q-td>
|
|
<q-td style="width: 100%">
|
|
<q-avatar class="q-mr-sm" size="md">
|
|
<q-img
|
|
class="text-center"
|
|
:ratio="1"
|
|
:src="`${baseUrl}/product/${props.row.product.id}/image/${props.row.product.selectedImage}`"
|
|
>
|
|
<template #error>
|
|
<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)`"
|
|
/>
|
|
</template>
|
|
</q-img>
|
|
</q-avatar>
|
|
{{ props.row.product.name }}
|
|
</q-td>
|
|
<q-td align="center">
|
|
<q-input
|
|
:readonly
|
|
:bg-color="readonly ? 'transparent' : ''"
|
|
dense
|
|
outlined
|
|
:type="readonly ? 'text' : 'number'"
|
|
input-class="text-center"
|
|
style="width: 70px"
|
|
min="1"
|
|
debounce="500"
|
|
v-model="props.row.amount"
|
|
@update:model-value="
|
|
(v) => {
|
|
$emit('updateTable', props.row);
|
|
}
|
|
"
|
|
/>
|
|
</q-td>
|
|
<q-td align="right">
|
|
{{
|
|
formatNumberDecimal(
|
|
props.row.pricePerUnit +
|
|
(props.row.product[
|
|
agentPrice ? 'agentPriceCalcVat' : 'calcVat'
|
|
]
|
|
? props.row.pricePerUnit * (config?.vat || 0.07)
|
|
: 0),
|
|
2,
|
|
)
|
|
}}
|
|
</q-td>
|
|
<q-td align="center">
|
|
<q-input
|
|
:readonly
|
|
:bg-color="readonly ? 'transparent' : ''"
|
|
dense
|
|
min="0"
|
|
outlined
|
|
input-class="text-right"
|
|
style="width: 90px"
|
|
:model-value="
|
|
discount4Show[props.rowIndex] ||
|
|
commaInput(props.row.discount?.toString() || '0')
|
|
"
|
|
@blur="
|
|
() => {
|
|
props.row.discount = Number(
|
|
discount4Show[props.rowIndex].replace(/,/g, ''),
|
|
);
|
|
if (props.row.discount % 1 === 0) {
|
|
const [, dec] =
|
|
discount4Show[props.rowIndex].split('.');
|
|
if (!dec) {
|
|
discount4Show[props.rowIndex] += '.00';
|
|
}
|
|
}
|
|
}
|
|
"
|
|
@update:model-value="
|
|
(v) => {
|
|
discount4Show[props.rowIndex] = commaInput(
|
|
v?.toString() || '0',
|
|
'string',
|
|
);
|
|
}
|
|
"
|
|
/>
|
|
</q-td>
|
|
<q-td align="right">
|
|
{{
|
|
formatNumberDecimal(
|
|
props.row.pricePerUnit * props.row.amount -
|
|
props.row.discount,
|
|
2,
|
|
)
|
|
}}
|
|
</q-td>
|
|
<q-td align="right">
|
|
{{
|
|
formatNumberDecimal(
|
|
props.row.product[
|
|
agentPrice ? 'agentPriceCalcVat' : 'calcVat'
|
|
]
|
|
? precisionRound(
|
|
(props.row.pricePerUnit * props.row.amount -
|
|
props.row.discount) *
|
|
(config?.vat || 0.07),
|
|
)
|
|
: 0,
|
|
2,
|
|
)
|
|
}}
|
|
</q-td>
|
|
<q-td align="right">
|
|
{{ formatNumberDecimal(calcPrice(props.row), 2) }}
|
|
</q-td>
|
|
<q-td>
|
|
<div class="row items-center full-width justify-end no-wrap">
|
|
<q-btn
|
|
@click.stop="openEmployeeTable(item.title, props.rowIndex)"
|
|
dense
|
|
flat
|
|
size="sm"
|
|
class="rounded q-mr-xs"
|
|
>
|
|
<div class="row items-center no-wrap">
|
|
<q-icon name="mdi-account-group-outline" />
|
|
<q-icon
|
|
size="xs"
|
|
:name="`mdi-chevron-${currentBtnOpen[0].title === item.title && currentBtnOpen[0].opened[props.rowIndex] ? 'down' : 'up'}`"
|
|
/>
|
|
</div>
|
|
</q-btn>
|
|
<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));
|
|
"
|
|
@click="$emit('viewFile', props.row.product)"
|
|
/>
|
|
<DeleteButton
|
|
v-if="!readonly"
|
|
iconOnly
|
|
@click="$emit('delete', props.row.i)"
|
|
/>
|
|
</div>
|
|
</q-td>
|
|
</q-tr>
|
|
|
|
<q-tr
|
|
v-show="
|
|
currentBtnOpen[0].title === item.title &&
|
|
currentBtnOpen[0].opened[props.rowIndex]
|
|
"
|
|
:props="props"
|
|
>
|
|
<q-td colspan="100%" style="padding: 16px">
|
|
<WorkerItem
|
|
:readonly
|
|
:checkable="!readonly"
|
|
@check="(wokerIndex) => handleCheck(wokerIndex, props.row)"
|
|
inTable
|
|
hideQuantity
|
|
:check-list="props.row.workerIndex"
|
|
:rows="employeeRows"
|
|
/>
|
|
</q-td>
|
|
</q-tr>
|
|
</template>
|
|
</q-table>
|
|
</section>
|
|
</div>
|
|
</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;
|
|
overflow-x: hidden;
|
|
|
|
&.worker-item__female {
|
|
--side-color: hsl(var(--gender-female));
|
|
}
|
|
|
|
&.worker-item__male {
|
|
--side-color: hsl(var(--gender-male));
|
|
}
|
|
}
|
|
|
|
:deep(.price-tag .q-field__control) {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 25px;
|
|
}
|
|
|
|
.worker-item::before {
|
|
position: absolute;
|
|
content: ' ';
|
|
left: 0;
|
|
width: 7px;
|
|
top: 0;
|
|
bottom: 0;
|
|
background: var(--side-color);
|
|
}
|
|
|
|
:deep(i.q-icon.mdi.mdi-alert.q-table__bottom-nodata-icon) {
|
|
color: #ffc224 !important;
|
|
}
|
|
</style>
|