539 lines
18 KiB
Vue
539 lines
18 KiB
Vue
<script lang="ts" setup>
|
|
import { Icon } from '@iconify/vue';
|
|
import { formatNumberDecimal } from 'stores/utils';
|
|
|
|
import useProductServiceStore from 'stores/product-service';
|
|
import useOptionStore from 'stores/options';
|
|
import { Attributes, Product } from 'stores/product-service/types';
|
|
import { storeToRefs } from 'pinia';
|
|
import { ref, watch } from 'vue';
|
|
|
|
const baseUrl = ref<string>(import.meta.env.VITE_API_BASE_URL);
|
|
const productServiceStore = useProductServiceStore();
|
|
const optionStore = useOptionStore();
|
|
|
|
const { fetchListOfWork } = productServiceStore;
|
|
const { workNameItems } = storeToRefs(productServiceStore);
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
workIndex: number;
|
|
length: number;
|
|
index: number;
|
|
readonly?: boolean;
|
|
|
|
priceDisplay?: {
|
|
price: boolean;
|
|
agentPrice: boolean;
|
|
serviceCharge: boolean;
|
|
};
|
|
}>(),
|
|
{
|
|
priceDisplay: () => ({
|
|
price: true,
|
|
agentPrice: true,
|
|
serviceCharge: true,
|
|
}),
|
|
},
|
|
);
|
|
|
|
const workName = defineModel<string>('workName');
|
|
const attributes = defineModel<Attributes>('attributes', { required: true });
|
|
const productItems = defineModel<(Product & { nameEn: string })[]>(
|
|
'productItems',
|
|
{
|
|
required: true,
|
|
},
|
|
);
|
|
|
|
const refMenu = ref();
|
|
|
|
defineEmits<{
|
|
(e: 'moveWorkUp'): void;
|
|
(e: 'moveWorkDown'): void;
|
|
(e: 'deleteWork'): void;
|
|
(e: 'addProduct'): void;
|
|
(e: 'moveProductUp', items: unknown[], index: number): void;
|
|
(e: 'moveProductDown', items: unknown[], index: number): void;
|
|
(e: 'deleteProduct', items: unknown[], index: number): void;
|
|
|
|
(e: 'manageWorkName'): void;
|
|
(e: 'workProperties'): void;
|
|
}>();
|
|
|
|
watch(
|
|
() => workNameItems.value,
|
|
(c, o) => {
|
|
const list = c.map((v: { name: string }) => v.name);
|
|
const oldList = o.map((v: { name: string }) => v.name);
|
|
const index = oldList.indexOf(workName.value);
|
|
|
|
if (list[index] !== oldList[index] && !list.includes(workName.value)) {
|
|
if (list.length - 1 === index - 1) workName.value = list[index - 1];
|
|
else workName.value = list[index];
|
|
}
|
|
},
|
|
);
|
|
</script>
|
|
<template>
|
|
<div class="bordered rounded">
|
|
<q-expansion-item
|
|
for="item-up"
|
|
id="item-up"
|
|
dense
|
|
switch-toggle-side
|
|
default-opened
|
|
expand-icon="mdi-chevron-down-circle"
|
|
header-class="surface-2 expansion-rounded"
|
|
header-style="border-top-left-radius: var(--radius-2); border-top-right-radius: var(--radius-2)"
|
|
>
|
|
<template v-slot:header>
|
|
<div class="column full-width">
|
|
<div class="row items-center q-py-sm full-width" @click.stop>
|
|
<q-btn
|
|
v-if="!readonly"
|
|
id="btn-work-up-product"
|
|
for="btn-work-up-product"
|
|
icon="mdi-arrow-up"
|
|
dense
|
|
flat
|
|
round
|
|
:disable="index === 0"
|
|
style="color: hsl(var(--text-mute-2))"
|
|
@click.stop="$emit('moveWorkUp')"
|
|
/>
|
|
<q-btn
|
|
v-if="!readonly"
|
|
id="btn-work-down-product"
|
|
for="btn-work-down-product"
|
|
icon="mdi-arrow-down"
|
|
dense
|
|
flat
|
|
round
|
|
class="q-mx-sm"
|
|
:disable="index === length - 1"
|
|
style="color: hsl(var(--text-mute-2))"
|
|
@click.stop="$emit('moveWorkDown')"
|
|
/>
|
|
<div
|
|
:for="`select-work-name-${index + 1}`"
|
|
class="col q-py-sm q-px-md"
|
|
style="background-color: var(--surface-1); z-index: 2"
|
|
@click="() => (readonly ? '' : fetchListOfWork())"
|
|
>
|
|
<span class="text-body2" style="color: var(--foreground)">
|
|
{{ $t('productService.service.work') }} {{ index + 1 }} :
|
|
<span class="app-text-muted-2">
|
|
{{
|
|
workName ? workName : $t('productService.service.workName')
|
|
}}
|
|
</span>
|
|
</span>
|
|
<q-menu
|
|
v-if="!readonly"
|
|
fit
|
|
ref="refMenu"
|
|
self="top left"
|
|
anchor="bottom left"
|
|
>
|
|
<q-item>
|
|
<div class="full-width flex items-center justify-between">
|
|
{{ $t('productService.service.workName') }}
|
|
<q-btn
|
|
dense
|
|
unelevated
|
|
class="bordered q-px-sm text-capitalize"
|
|
style="
|
|
border-radius: var(--radius-2);
|
|
color: hsl(var(--info-bg));
|
|
"
|
|
@click.stop="
|
|
() => {
|
|
refMenu.hide();
|
|
$emit('manageWorkName');
|
|
}
|
|
"
|
|
>
|
|
<q-icon name="mdi-cog" size="xs" class="q-mr-sm" />
|
|
{{ $t('general.manage') }}
|
|
</q-btn>
|
|
</div>
|
|
</q-item>
|
|
<q-item
|
|
@click="workName = item.name"
|
|
clickable
|
|
v-for="(item, index) in workNameItems"
|
|
:key="index"
|
|
>
|
|
<div class="full-width flex items-center">
|
|
<q-icon
|
|
v-if="workName === item.name"
|
|
name="mdi-checkbox-marked"
|
|
size="xs"
|
|
color="primary"
|
|
class="q-mr-sm"
|
|
/>
|
|
<q-icon
|
|
v-else
|
|
name="mdi-checkbox-blank-outline"
|
|
size="xs"
|
|
style="color: hsl(var(--text-mute))"
|
|
class="q-mr-sm"
|
|
/>
|
|
{{ item.name }}
|
|
</div>
|
|
</q-item>
|
|
</q-menu>
|
|
</div>
|
|
<q-btn
|
|
v-if="!readonly"
|
|
id="btn-delete-work"
|
|
icon="mdi-trash-can-outline"
|
|
dense
|
|
flat
|
|
round
|
|
padding="0"
|
|
class="q-ml-md"
|
|
color="negative"
|
|
@click.stop="$emit('deleteWork')"
|
|
>
|
|
<q-tooltip>{{ $t('general.delete') }}</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="surface-2">
|
|
<!-- properties -->
|
|
<div class="bordered-t">
|
|
<div
|
|
class="q-py-xs text-weight-medium row justify-between items-center q-px-md"
|
|
style="background-color: hsla(var(--info-bg) / 0.1)"
|
|
>
|
|
<span>
|
|
{{ $t('productService.service.propertiesInWork') }}
|
|
{{ workIndex + 1 }}
|
|
</span>
|
|
<q-btn
|
|
v-if="!readonly"
|
|
id="btn-add-work-product"
|
|
class="text-capitalize"
|
|
flat
|
|
dense
|
|
padding="0"
|
|
style="color: hsl(var(--info-bg))"
|
|
@click.stop="$emit('workProperties')"
|
|
>
|
|
<Icon
|
|
icon="basil:settings-adjust-solid"
|
|
width="24px"
|
|
class="q-mr-sm"
|
|
style="color: hsl(var(--info-bg))"
|
|
/>
|
|
<span v-if="$q.screen.gt.xs">
|
|
{{ $t('productService.service.properties') }}
|
|
</span>
|
|
</q-btn>
|
|
</div>
|
|
|
|
<div class="q-py-md q-px-md full-width">
|
|
<div
|
|
v-if="attributes.additional.length > 0"
|
|
class="row items-center full-width surface-1 q-pb-md q-pt-sm q-px-sm q-gutter-sm scroll"
|
|
:style="$q.screen.xs ? 'max-height: 100px' : ''"
|
|
>
|
|
<div
|
|
v-for="(p, index) in attributes.additional"
|
|
:key="index"
|
|
class="bordered q-px-sm surface-3"
|
|
style="border-radius: 6px"
|
|
>
|
|
{{ optionStore.mapOption(p.fieldName ?? '') }}
|
|
</div>
|
|
</div>
|
|
<div v-else class="app-text-muted">
|
|
{{ $t('productService.service.noProperties') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- product -->
|
|
<div class="bordered-t">
|
|
<div
|
|
class="q-py-xs text-weight-medium row justify-between items-center q-px-md"
|
|
style="background-color: hsla(var(--info-bg) / 0.1)"
|
|
>
|
|
<span>
|
|
{{ $t('productService.service.productInWork') }}
|
|
{{ workIndex + 1 }}
|
|
|
|
<q-checkbox
|
|
size="xs"
|
|
:class="$q.screen.gt.xs ? 'q-pl-lg' : 'q-pl-sm'"
|
|
v-model="attributes.showTotalPrice"
|
|
:label="$t('productService.service.showTotalPrice')"
|
|
style="color: hsl(var(--text-mute-2))"
|
|
:disable="readonly"
|
|
/>
|
|
</span>
|
|
<q-btn
|
|
v-if="!readonly"
|
|
id="btn-add-work-product"
|
|
for="btn-add-work-product"
|
|
flat
|
|
dense
|
|
icon="mdi-plus"
|
|
class="text-capitalize"
|
|
:label="
|
|
$q.screen.gt.xs ? $t('productService.product.addTitle') : ''
|
|
"
|
|
padding="0"
|
|
style="color: hsl(var(--info-bg))"
|
|
@click.stop="$emit('addProduct')"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
v-if="productItems.length > 0"
|
|
class="q-py-md q-px-md full-width q-gutter-y-sm"
|
|
>
|
|
<div
|
|
v-for="(product, index) in productItems"
|
|
:key="product.id"
|
|
class="full-width row items-center justify-between"
|
|
>
|
|
<div
|
|
class="row col items-center justify-between full-width surface-1 q-py-md q-px-sm"
|
|
>
|
|
<div
|
|
class="row items-center col-md col-12 no-wrap"
|
|
v-if="productItems"
|
|
>
|
|
<q-input
|
|
v-if="!readonly && $q.screen.gt.xs"
|
|
outlined
|
|
for="input-bankbook"
|
|
hide-bottom-space
|
|
class="col-2"
|
|
dense
|
|
type="number"
|
|
v-model="product.installmentNo"
|
|
/>
|
|
|
|
<q-btn
|
|
v-if="!readonly && $q.screen.gt.xs"
|
|
id="btn-product-up"
|
|
icon="mdi-arrow-up"
|
|
dense
|
|
flat
|
|
round
|
|
:disable="index === 0"
|
|
style="color: hsl(var(--text-mute-2))"
|
|
@click.stop="$emit('moveProductUp', productItems, index)"
|
|
/>
|
|
<q-btn
|
|
v-if="!readonly && $q.screen.gt.xs"
|
|
id="btn-product-down"
|
|
for="btn-product-down"
|
|
icon="mdi-arrow-down"
|
|
dense
|
|
flat
|
|
round
|
|
class="q-mx-sm"
|
|
:disable="index === productItems.length - 1"
|
|
style="color: hsl(var(--text-mute-2))"
|
|
@click.stop="$emit('moveProductDown', productItems, index)"
|
|
/>
|
|
|
|
<q-avatar
|
|
size="md"
|
|
:class="$q.screen.gt.xs ? 'q-mx-lg' : 'q-mr-lg'"
|
|
style="background-color: var(--surface-tab)"
|
|
>
|
|
{{ index + 1 }}
|
|
</q-avatar>
|
|
|
|
<div class="row no-wrap">
|
|
<div
|
|
v-if="$q.screen.gt.xs"
|
|
class="bordered q-mx-md col-3 image-box"
|
|
>
|
|
<q-img
|
|
:src="`${baseUrl}/product/${product?.id}/image`"
|
|
style="object-fit: cover; width: 100%; height: 100%"
|
|
>
|
|
<template #error>
|
|
<div
|
|
class="surface-3 full-width full-height no-padding"
|
|
>
|
|
<q-img src="blank-image.png"></q-img>
|
|
</div>
|
|
</template>
|
|
</q-img>
|
|
</div>
|
|
<div class="column col justify-between">
|
|
<span
|
|
class="text-weight-bold ellipsis-2-lines"
|
|
:style="`max-width: ${$q.screen.gt.sm ? '25vw' : '20vw'}`"
|
|
>
|
|
{{ product.name }}
|
|
<q-tooltip>
|
|
{{ product.name }}
|
|
</q-tooltip>
|
|
</span>
|
|
<div
|
|
class="bordered q-px-xs ellipsis"
|
|
style="border-radius: 6px; max-width: 100px"
|
|
>
|
|
{{ product.code }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="row justify-end text-right col-md-6 col-12"
|
|
:class="$q.screen.xs ? 'q-mt-sm text-caption' : 'q-pr-sm'"
|
|
>
|
|
<span
|
|
class="col-12 row"
|
|
:class="{ 'q-col-gutter-md': $q.screen.gt.xs }"
|
|
style="color: var(--teal-9)"
|
|
>
|
|
<span
|
|
v-if="priceDisplay?.price"
|
|
class="col ellipsis price-orange text-weight-bold"
|
|
>
|
|
<div class="text-caption app-text-muted-2">
|
|
{{ $t('productService.product.salePrice') }}
|
|
</div>
|
|
฿{{ formatNumberDecimal(product.price, 2) }}
|
|
<q-tooltip
|
|
anchor="bottom right"
|
|
self="center right"
|
|
:delay="300"
|
|
>
|
|
฿{{ formatNumberDecimal(product.price, 2) }}
|
|
</q-tooltip>
|
|
</span>
|
|
<span
|
|
v-if="priceDisplay?.agentPrice"
|
|
class="col ellipsis price-purple text-weight-bold"
|
|
>
|
|
<div class="text-caption app-text-muted-2">
|
|
{{ $t('productService.product.agentPrice') }}
|
|
</div>
|
|
฿{{ formatNumberDecimal(product.agentPrice, 2) }}
|
|
<q-tooltip
|
|
anchor="bottom right"
|
|
self="center right"
|
|
:delay="300"
|
|
>
|
|
฿{{ formatNumberDecimal(product.agentPrice, 2) }}
|
|
</q-tooltip>
|
|
</span>
|
|
<span
|
|
v-if="priceDisplay?.serviceCharge"
|
|
class="col ellipsis price-pink column"
|
|
>
|
|
<div class="text-caption app-text-muted-2">
|
|
{{ $t('productService.product.processingPrice') }}
|
|
</div>
|
|
฿{{ formatNumberDecimal(product.serviceCharge, 2) }}
|
|
<q-tooltip
|
|
anchor="bottom right"
|
|
self="center right"
|
|
:delay="300"
|
|
>
|
|
฿{{ formatNumberDecimal(product.serviceCharge, 2) }}
|
|
</q-tooltip>
|
|
</span>
|
|
</span>
|
|
|
|
<span class="col-9 q-mt-sm text-caption app-text-muted-2">
|
|
{{ $t('productService.product.processingTime') }}
|
|
</span>
|
|
<span class="col-3 q-mt-sm text-caption app-text-muted-2">
|
|
{{ product.process }} {{ $t('general.day') }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<q-btn
|
|
v-if="!readonly"
|
|
class="q-ml-md"
|
|
id="btn-delete-work-product"
|
|
for="btn-delete-work-product"
|
|
icon="mdi-trash-can-outline"
|
|
padding="0"
|
|
dense
|
|
flat
|
|
round
|
|
color="negative"
|
|
@click.stop="$emit('deleteProduct', productItems, index)"
|
|
>
|
|
<q-tooltip>{{ $t('general.delete') }}</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
<div v-else class="app-text-muted q-py-md q-px-lg">
|
|
{{ $t('productService.product.noProduct') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-expansion-item>
|
|
<div class="q-py-sm q-px-md bordered-t row items-center justify-between">
|
|
<div>
|
|
{{ $t('productService.service.totalProductWork') }}
|
|
<span class="app-text-muted-2">
|
|
{{ workName }}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
{{ productItems?.length ?? 0 }} {{ $t('productService.service.list') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.image-box {
|
|
height: 70px;
|
|
width: 70px;
|
|
border-color: var(--teal-9);
|
|
border-radius: 10px;
|
|
background-color: var(--surface-3);
|
|
overflow: hidden;
|
|
}
|
|
|
|
:deep(i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon) {
|
|
color: var(--brand-1);
|
|
}
|
|
|
|
:deep(
|
|
.q-item__section.column.q-item__section--side.justify-center.q-item__section--avatar.q-focusable.relative-position.cursor-pointer
|
|
) {
|
|
justify-content: start !important;
|
|
padding-right: 8px !important;
|
|
padding-top: 16px;
|
|
min-width: 0px;
|
|
}
|
|
|
|
.price-orange {
|
|
color: var(--orange-5);
|
|
&.dark {
|
|
color: var(--orange-6);
|
|
}
|
|
}
|
|
|
|
.price-purple {
|
|
color: var(--violet-11);
|
|
&.dark {
|
|
color: var(--violet-10);
|
|
}
|
|
}
|
|
|
|
.price-pink {
|
|
color: var(--pink-6);
|
|
}
|
|
</style>
|