chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

fix(04): service with workflow

Browse source
This commit is contained in:
puriphatt 2024-10-29 17:17:32 +07:00
parent e2d2f526e8
commit aaa39fc72f
4 changed files with 994 additions and 557 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/components/04_product-service/FormServiceWork.vue
View file

@ -74,7 +74,12 @@ async function addWork() {
workItems.value.push({
id: '',
name: '',
attributes: { additional: [], showTotalPrice: false },
attributes: {
additional: [],
showTotalPrice: false,
stepProperties: [],
workflowId: '',
},
product: [],
});
await nextTick();
@ -177,8 +182,16 @@ watch(
v-model:product-items="work.product"
v-model:attributes="work.attributes"
@add-product="$emit('addProduct', index)"
@move-work-up="moveItemUp(workItems, index)"
@move-work-down="moveItemDown(workItems, index)"
@move-work-up="
() => {
moveItemUp(workItems, index);
}
"
@move-work-down="
() => {
moveItemDown(workItems, index);
}
"
@delete-work="confirmDelete(workItems, index)"
@move-product-up="moveItemUp"
@move-product-down="moveItemDown"

977
src/components/04_product-service/ServiceProperties.vue
View file

File diff suppressed because it is too large Load diff

479
src/components/04_product-service/WorkManagementComponent.vue
View file

@ -1,21 +1,32 @@
<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 { QSelect } from 'quasar';
import { storeToRefs } from 'pinia';
import { ref, watch } from 'vue';
import { Icon } from '@iconify/vue';
import { onMounted, ref, watch } from 'vue';
import useOptionStore from 'stores/options';
import useProductServiceStore from 'stores/product-service';
import { formatNumberDecimal } from 'stores/utils';
import { useWorkflowTemplate } from 'src/stores/workflow-template';
import { Attributes, Product } from 'stores/product-service/types';
import { WorkflowTemplate } from 'src/stores/workflow-template/types';
import SelectInput from '../shared/SelectInput.vue';
import NoData from '../NoData.vue';
import { AddButton } from '../button';
const baseUrl = ref<string>(import.meta.env.VITE_API_BASE_URL);
const productServiceStore = useProductServiceStore();
const optionStore = useOptionStore();
const workflowStore = useWorkflowTemplate();
const { fetchListOfWork } = productServiceStore;
const { workNameItems } = storeToRefs(productServiceStore);
// const { fetchListOfWork } = productServiceStore;
const { splitPay } = storeToRefs(productServiceStore);
withDefaults(
const { getWorkflowTemplateList } = workflowStore;
const { data: workflowData } = storeToRefs(workflowStore);
const props = withDefaults(
defineProps<{
workIndex: number;
length: number;
@ -46,7 +57,7 @@ const productItems = defineModel<(Product & { nameEn: string })[]>(
},
);
const refMenu = ref();
// const refMenu = ref();
defineEmits<{
(e: 'moveWorkUp'): void;
@ -61,18 +72,94 @@ defineEmits<{
(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);
// 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];
}
// 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];
// }
// },
// );
function mapFlowName(id: string): string {
const targetFlow = workflowData.value.find(
(w) => w.id === attributes.value.workflowId,
);
return targetFlow?.name || '';
}
function mapStepName(id: string) {
const targetFlow = workflowData.value.find(
(w) => w.id === attributes.value.workflowId,
);
if (!targetFlow) return;
const name = targetFlow.step.find((s) => s.id === id)?.name;
return name || '-';
}
function selectFlow(workflow: WorkflowTemplate) {
workName.value = workflow.name;
attributes.value.workflowId = workflow.id;
attributes.value.stepProperties = workflow.step.map((s) => ({
id: s.id,
attributes: [],
productsId: [],
}));
}
async function filter(val: string, update: (...args: unknown[]) => void) {
update(
async () => {
await fetchWorkflowOption(val);
},
(ref: QSelect) => {
if (val !== '' && ref.options && ref.options?.length > 0) {
ref.setOptionIndex(-1);
ref.moveOptionSelection(1, true);
}
},
);
}
async function fetchWorkflowOption(val?: string) {
const res = await workflowStore.getWorkflowTemplateList({
query: val,
pageSize: 30,
});
if (res) workflowData.value = res.result;
}
function toggleCheckProductInStep(id: string, stepIndex: number) {
const index =
attributes.value.stepProperties[stepIndex].productsId.indexOf(id);
if (!attributes.value.stepProperties[stepIndex].productsId.includes(id)) {
attributes.value.stepProperties[stepIndex].productsId.push(id);
} else {
attributes.value.stepProperties[stepIndex].productsId.splice(index, 1);
}
}
onMounted(async () => {
if (props.workIndex === 0) {
await fetchWorkflowOption();
}
});
watch(
() => productItems.value,
() => {
attributes.value.stepProperties.forEach((s) => {
s.productsId = productItems.value.map((p) => p.id);
});
},
{ deep: true },
);
</script>
<template>
@ -84,7 +171,7 @@ watch(
switch-toggle-side
default-opened
expand-icon="mdi-chevron-down-circle"
header-class="surface-2 expansion-rounded"
header-class="expansion-rounded"
header-style="border-top-left-radius: var(--radius-2); border-top-right-radius: var(--radius-2)"
>
<template v-slot:header>
@ -115,7 +202,7 @@ watch(
style="color: hsl(var(--text-mute-2))"
@click.stop="$emit('moveWorkDown')"
/>
<div
<!-- <div
:for="`select-work-name-${index + 1}`"
class="col q-py-sm q-px-md"
style="background-color: var(--surface-1); z-index: 2"
@ -184,7 +271,28 @@ watch(
</div>
</q-item>
</q-menu>
</div>
</div> -->
<SelectInput
:readonly
incremental
:model-value="mapFlowName(attributes.workflowId)"
id="select-workflow-name"
for="select-workflow-name"
class="col"
option-label="name"
:option="workflowData"
:placeholder="$t('productService.service.workName')"
@update:model-value="(val: WorkflowTemplate) => selectFlow(val)"
@filter="(val: string, update) => filter(val, update)"
>
<template #prepend>
<span class="text-body2" style="color: var(--foreground)">
{{
$t('productService.service.workNo', { msg: workIndex + 1 })
}}:
</span>
</template>
</SelectInput>
<q-btn
v-if="!readonly"
id="btn-delete-work"
@ -203,60 +311,14 @@ watch(
</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>
<section
v-if="!workName && productItems.length === 0"
class="surface-2 row items-center justify-center q-py-sm"
>
<NoData />
</section>
<section v-else class="surface-2">
<!-- product -->
<div class="bordered-t">
<div
@ -276,19 +338,11 @@ watch(
:disable="readonly"
/>
</span>
<q-btn
<AddButton
v-if="!readonly"
icon-only
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>
@ -297,15 +351,17 @@ watch(
v-if="productItems.length > 0"
class="q-py-md q-px-md full-width q-gutter-y-sm"
>
<div
<section
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"
class="row col items-center justify-between full-width surface-1 q-px-sm q-py-xs"
style="min-height: 70px"
>
<div
<!-- product detail -->
<section
class="row items-center col-md col-12 no-wrap"
v-if="productItems"
>
@ -316,6 +372,7 @@ watch(
dense
flat
round
size="sm"
:disable="index === 0"
style="color: hsl(var(--text-mute-2))"
@click.stop="$emit('moveProductUp', productItems, index)"
@ -328,27 +385,27 @@ watch(
dense
flat
round
class="q-mx-sm"
size="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'"
size="sm"
class="q-mx-sm"
style="background-color: var(--surface-tab)"
>
{{ index + 1 }}
</q-avatar>
<div class="row no-wrap">
<div class="col row no-wrap items-center">
<div
v-if="$q.screen.gt.xs"
class="bordered q-mx-md col-3 image-box"
>
<q-img
:src="`${baseUrl}/product/${product?.id}/image`"
:src="`${baseUrl}/product/${product.id}/image/${product.selectedImage}`"
style="object-fit: cover; width: 100%; height: 100%"
>
<template #error>
@ -360,35 +417,30 @@ watch(
</template>
</q-img>
</div>
<div class="column col justify-between">
<article class="column col full-width justify-between">
<span
class="text-weight-bold ellipsis-2-lines"
:style="`max-width: ${$q.screen.gt.sm ? (!readonly ? '10vw' : '25vw') : '20vw'}`"
class="text-weight-medium ellipsis-2-lines full-width"
>
{{ 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="text-caption">
<span class="bordered q-px-xs rounded q-mr-sm">
{{ product.code }}
</span>
<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)"
>
<q-icon name="mdi-clock-outline" />
{{ product.process }} {{ $t('general.day') }}
</div>
</article>
</div>
</section>
<!-- product price -->
<div class="row justify-end text-right col-md col-12">
<span class="col-12 row" style="color: var(--teal-9)">
<span
v-if="priceDisplay?.price"
class="col ellipsis price-orange text-weight-bold"
@ -437,29 +489,34 @@ watch(
฿{{ formatNumberDecimal(product.serviceCharge, 2) }}
</q-tooltip>
</span>
<span class="col ellipsis text-weight-bold">
<span class="col ellipsis column text-weight-medium">
<div class="text-caption app-text-muted-2">
งวดที่จ่าย
</div>
{{ !readonly ? '' : product.installmentNo }}
<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"
min="0"
/>
<span class="row justify-end">
<q-input
v-if="!readonly && $q.screen.gt.xs"
outlined
:max="splitPay"
input-class="text-right no-padding"
for="input-bankbook"
hide-bottom-space
class="installment-no col-10"
dense
type="number"
v-model="product.installmentNo"
min="0"
@update:model-value="
(v) => {
if (Number(v) > splitPay)
product.installmentNo = splitPay;
}
"
/>
</span>
</span>
</span>
<span class="col-9 q-mt-sm text-caption app-text-muted-2">
{{ $t('productService.product.processingTime') }}
{{ product.process }} {{ $t('general.day') }}
</span>
</div>
</div>
@ -478,19 +535,149 @@ watch(
>
<q-tooltip>{{ $t('general.delete') }}</q-tooltip>
</q-btn>
</div>
</section>
</div>
<div v-else class="app-text-muted q-py-md q-px-lg">
<div v-else class="app-text-muted q-py-md q-px-md">
{{ $t('productService.product.noProduct') }}
</div>
</div>
</div>
<!-- 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('flow.processStep') }}
</span>
<q-btn
v-if="!readonly"
id="btn-add-work-product"
class="text-capitalize rounded"
flat
dense
padding="4px 8px"
style="color: hsl(var(--info-bg))"
@click.stop="$emit('workProperties')"
>
<Icon
icon="basil:settings-adjust-solid"
width="20.08px"
style="color: hsl(var(--info-bg))"
/>
</q-btn>
</div>
<div class="q-py-md q-px-md full-width column">
<span
v-if="
attributes.stepProperties?.length === 0 ||
!attributes.stepProperties
"
class="app-text-muted"
>
{{ $t('flow.noProcessStep') }}
</span>
<span
v-else
v-for="(step, stepIndex) in attributes.stepProperties"
:key="step.id"
>
<q-icon name="mdi-circle-medium" />
{{ $t('flow.stepNo', { msg: stepIndex + 1 }) }}:
{{ mapStepName(step.id) }}
<!-- step att -->
<section
class="col scroll q-pa-sm flex items-center surface-1 rounded"
>
<div
v-if="
attributes.stepProperties[stepIndex].attributes.length > 0
"
class="row q-gutter-sm"
>
<span
v-for="(att, i) in step.attributes"
:key="i"
class="surface-2 bordered rounded q-px-xs"
>
{{ optionStore.mapOption(att.fieldName ?? '') }}
</span>
</div>
<div v-else class="app-text-muted-2">
{{ $t('productService.service.noProperties') }}
</div>
</section>
<!-- step product -->
<section
class="q-pt-sm q-pl-lg column"
:class="{
'q-pb-sm': stepIndex !== attributes.stepProperties.length - 1,
}"
>
<span class="app-text-muted-2 text-caption">
{{
$t('general.select', {
msg: $t('productService.product.title'),
})
}}
</span>
<div
v-if="productItems.length > 0"
class="surface-1 rounded q-pa-xs"
>
<div v-for="product in productItems" :key="product.id">
<q-checkbox
:disable="readonly"
:model-value="
attributes.stepProperties[
stepIndex
].productsId.includes(product.id)
"
@click="toggleCheckProductInStep(product.id, stepIndex)"
size="xs"
/>
{{ product.name }}
</div>
</div>
<span v-else class="app-text-muted-2 surface-1 rounded q-pa-xs">
{{ $t('productService.product.noProduct') }}
</span>
</section>
</span>
</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>
</section>
</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 }}
{{ mapFlowName(attributes.workflowId) }}
</span>
</div>
<div>
@ -502,8 +689,8 @@ watch(
<style lang="scss" scoped>
.image-box {
height: 70px;
width: 70px;
height: 45px;
width: 45px;
border-color: var(--teal-9);
border-radius: 10px;
background-color: var(--surface-3);
@ -540,4 +727,18 @@ watch(
.price-pink {
color: var(--pink-6);
}
:deep(i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon) {
color: hsl(var(--text-mute));
}
:deep(
i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon.q-expansion-item__toggle-icon--rotated
) {
color: var(--brand-1);
}
:deep(.installment-no .q-field__control) {
height: 23px;
}
</style>

76
src/pages/04_product-service/MainPage.vue
View file

@ -63,6 +63,7 @@ import {
Attributes,
} from 'stores/product-service/types';
import { computed } from 'vue';
import { WorkflowTemplate } from 'src/stores/workflow-template/types';
const flowStore = useFlowStore();
const utilsStore = useUtilsStore();
@ -94,7 +95,7 @@ const {
deleteWork,
} = productServiceStore;
const { workNameItems } = storeToRefs(productServiceStore);
const { workNameItems, splitPay } = storeToRefs(productServiceStore);
const readOnlybranchOption = ref<boolean>(false);
const allStat = ref<{ mode: string; count: number }[]>([]);
const stat = ref<
@ -264,10 +265,14 @@ const formDataProduct = ref<ProductCreate>({
image: undefined,
});
const workflow = ref<WorkflowTemplate>();
const formDataProductService = ref<ServiceCreate>({
work: [],
attributes: {
showTotalPrice: false,
additional: [],
workflowId: '',
stepProperties: [],
},
detail: '',
name: '',
@ -892,6 +897,9 @@ async function assignFormDataGroup(data: ProductGroup) {
const prevService = ref<ServiceCreate>({
work: [],
attributes: {
showTotalPrice: false,
workflowId: '',
stepProperties: [],
additional: [],
},
detail: '',
@ -941,6 +949,11 @@ async function assignFormDataProductService(id: string) {
formDataProductService.value.work = prevService.value.work;
workItems.value = res.work.map((item) => {
splitPay.value = Math.max(
...item.productOnWork.map(
(productOnWorkItem) => productOnWorkItem.installmentNo,
),
);
return {
id: item.id,
name: item.name,
@ -1043,13 +1056,16 @@ function clearFormService() {
name: '',
detail: '',
attributes: {
workflowId: '',
stepProperties: [],
additional: [],
showTotalPrice: false,
},
work: [],
status: undefined,
productGroupId: '',
};
splitPay.value = 0;
workItems.value = [];
selectProduct.value = [];
dialogService.value = false;
@ -1229,6 +1245,9 @@ function triggerConfirmCloseWork() {
}
const tempValueProperties = ref<Attributes>({
showTotalPrice: false,
workflowId: '',
stepProperties: [],
additional: [],
});
const currentPropertiesMode = ref<'service' | 'work'>('service');
@ -3818,13 +3837,13 @@ watch(
<div
class="col surface-1 rounded bordered scroll row relative-position"
:class="{
'q-mb-lg q-mx-lg ': $q.screen.gt.sm,
'q-mb-md q-mx-lg ': $q.screen.gt.sm,
'q-mb-sm q-mx-md': !$q.screen.gt.sm,
}"
id="service-form"
>
<div
class="col"
class="col column justify-between"
style="height: 100%; max-height: 100; overflow-y: auto"
v-if="$q.screen.gt.sm"
>
@ -3876,6 +3895,20 @@ watch(
"
/>
</div>
<span
class="row items-center justify-center q-py-md text-caption no-wrap"
>
{{ $t('productService.service.splitPay') }}
<q-input
dense
outlined
class="col-3 split-pay q-mx-sm"
input-class="text-caption text-right"
type="number"
v-model="splitPay"
/>
{{ $t('quotation.receiptDialog.installments') }}
</span>
</div>
<div
class="col-12 col-md-10"
@ -3973,7 +4006,7 @@ watch(
/>
</div>
</div>
<div
<!-- <div
class="col-2 surface-1 rounded bordered row"
:class="{
'q-mb-lg q-mx-lg ': $q.screen.gt.sm,
@ -3993,7 +4026,7 @@ watch(
}
"
/>
</div>
</div> -->
</DialogForm>
<!-- service properties -->
@ -4026,12 +4059,12 @@ watch(
}
"
>
<div class="q-pa-lg full-width full-height">
<section class="col column">
<ServiceProperties
v-model:properties-option="propertiesOption"
v-model:form-service-properties="tempValueProperties"
/>
</div>
</section>
</DialogForm>
<!-- manage work name -->
@ -4241,7 +4274,7 @@ watch(
/>
</div>
<div
class="col"
class="col column justify-between"
style="height: 100%; max-height: 100; overflow-y: auto"
v-if="$q.screen.gt.sm"
>
@ -4297,13 +4330,28 @@ watch(
}"
/>
</div>
<span
class="row items-center justify-center q-py-md text-caption no-wrap"
>
{{ $t('productService.service.splitPay') }}
<q-input
:readonly="!infoServiceEdit"
dense
outlined
class="col-3 split-pay q-mx-sm"
input-class="text-caption text-right"
type="number"
v-model="splitPay"
/>
{{ $t('quotation.receiptDialog.installments') }}
</span>
</div>
<div
class="col-12 col-md-10"
id="customer-form-content"
:class="{
'q-py-md q-pr-md ': $q.screen.gt.sm,
'q-py-md q-px-lg': !$q.screen.gt.sm,
'q-py-sm q-px-lg': !$q.screen.gt.sm,
}"
style="height: 100%; max-height: 100%; overflow-y: auto"
>
@ -4354,7 +4402,7 @@ watch(
/>
</div>
</div>
<div
<!-- <div
class="col-2 surface-1 rounded bordered row"
:class="{
'q-mb-lg q-mx-lg ': $q.screen.gt.sm,
@ -4375,7 +4423,7 @@ watch(
}
"
/>
</div>
</div> -->
</DialogForm>
<q-dialog v-model="holdDialog" position="bottom">
@ -4751,4 +4799,8 @@ watch(
color: hsl(var(--info-bg));
font-weight: 600;
}
:deep(.split-pay .q-field__control) {
height: 23px;
}
</style>