refactor: package workflow (#73)
* fix: service attributes type * feat: select workflow component * refactor: dialog properties => select work flow * refactor: package => work new workflow step * fix: useless in future (service properties) * fix: handle work undefine --------- Co-authored-by: puriphatt <puriphat@frappet.com>
This commit is contained in:
Methapon Metanipat
GitHub
parent
bd718eb492
commit
6e796049d5
7 changed files with 374 additions and 187 deletions
|
|
@ -1,10 +1,12 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch, reactive } from 'vue';
|
||||
import { nextTick, ref, watch, reactive } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { onMounted } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useQuasar, type QTableProps } from 'quasar';
|
||||
|
||||
import SelectFlow from 'src/components/shared/select/SelectFlow.vue';
|
||||
import DialogProperties from 'src/components/dialog/DialogProperties.vue';
|
||||
import ProductCardComponent from 'components/04_product-service/ProductCardComponent.vue';
|
||||
import StatCard from 'components/StatCardComponent.vue';
|
||||
import DrawerInfo from 'components/DrawerInfo.vue';
|
||||
|
|
@ -14,7 +16,6 @@ import BasicInfoProduct from 'components/04_product-service/BasicInfoProduct.vue
|
|||
import PriceDataComponent from 'components/04_product-service/PriceDataComponent.vue';
|
||||
import TotalProductCardComponent from 'components/04_product-service/TotalProductCardComponent.vue';
|
||||
import FormServiceWork from 'components/04_product-service/FormServiceWork.vue';
|
||||
import ServiceProperties from 'components/04_product-service/ServiceProperties.vue';
|
||||
import WorkNameManagement from 'components/04_product-service/WorkNameManagement.vue';
|
||||
import useOptionStore from 'stores/options';
|
||||
import FormServiceProperties from 'components/04_product-service/FormServiceProperties.vue';
|
||||
|
|
@ -40,6 +41,7 @@ import useFlowStore from 'stores/flow';
|
|||
|
||||
import { dateFormat } from 'src/utils/datetime';
|
||||
import { formatNumberDecimal, isRoleInclude } from 'stores/utils';
|
||||
const { getWorkflowTemplate } = useWorkflowTemplate();
|
||||
|
||||
import { Status } from 'stores/types';
|
||||
|
||||
|
|
@ -60,6 +62,7 @@ import {
|
|||
} from 'stores/product-service/types';
|
||||
import { computed } from 'vue';
|
||||
import { WorkflowTemplate } from 'src/stores/workflow-template/types';
|
||||
import { useWorkflowTemplate } from 'src/stores/workflow-template';
|
||||
|
||||
const flowStore = useFlowStore();
|
||||
const navigatorStore = useNavigator();
|
||||
|
|
@ -261,15 +264,14 @@ const formDataProduct = ref<ProductCreate>({
|
|||
image: undefined,
|
||||
});
|
||||
|
||||
const workflow = ref<WorkflowTemplate>();
|
||||
const currWorkflow = ref<WorkflowTemplate>();
|
||||
const formDataProductService = ref<ServiceCreate>({
|
||||
work: [],
|
||||
attributes: {
|
||||
showTotalPrice: false,
|
||||
additional: [],
|
||||
workflowId: '',
|
||||
workflowName: '',
|
||||
stepProperties: [],
|
||||
workflowStep: [],
|
||||
},
|
||||
detail: '',
|
||||
name: '',
|
||||
|
|
@ -860,10 +862,9 @@ const prevService = ref<ServiceCreate>({
|
|||
work: [],
|
||||
attributes: {
|
||||
showTotalPrice: false,
|
||||
workflowName: '',
|
||||
workflowId: '',
|
||||
stepProperties: [],
|
||||
additional: [],
|
||||
workflowStep: [],
|
||||
},
|
||||
detail: '',
|
||||
name: '',
|
||||
|
|
@ -1019,16 +1020,16 @@ function clearFormProduct() {
|
|||
}
|
||||
|
||||
function clearFormService() {
|
||||
currWorkflow.value = undefined;
|
||||
formDataProductService.value = {
|
||||
code: '',
|
||||
name: '',
|
||||
detail: '',
|
||||
attributes: {
|
||||
workflowName: '',
|
||||
workflowId: '',
|
||||
stepProperties: [],
|
||||
additional: [],
|
||||
showTotalPrice: false,
|
||||
workflowStep: [],
|
||||
},
|
||||
work: [],
|
||||
status: undefined,
|
||||
|
|
@ -1183,8 +1184,11 @@ function submitAddWorkProduct() {
|
|||
installmentNo: splitPay.value > 0 ? 1 : 0,
|
||||
nameEn: '',
|
||||
});
|
||||
workItems.value[currentWorkIndex.value].attributes.stepProperties.forEach(
|
||||
workItems.value[currentWorkIndex.value].attributes.workflowStep.forEach(
|
||||
(s) => {
|
||||
if (!s.hasOwnProperty('productsId')) {
|
||||
s.productsId = [];
|
||||
}
|
||||
s.productsId.push(i.id);
|
||||
},
|
||||
);
|
||||
|
|
@ -1192,7 +1196,7 @@ function submitAddWorkProduct() {
|
|||
});
|
||||
|
||||
// filter remain product
|
||||
workItems.value[currentWorkIndex.value].attributes.stepProperties.forEach(
|
||||
workItems.value[currentWorkIndex.value].attributes.workflowStep.forEach(
|
||||
(s) => {
|
||||
s.productsId = s.productsId.filter((pid) =>
|
||||
selectProduct.value.some((i) => i.id === pid),
|
||||
|
|
@ -1254,10 +1258,9 @@ function triggerConfirmCloseWork() {
|
|||
|
||||
const tempValueProperties = ref<Attributes>({
|
||||
showTotalPrice: false,
|
||||
workflowName: '',
|
||||
workflowId: '',
|
||||
stepProperties: [],
|
||||
additional: [],
|
||||
workflowStep: [],
|
||||
});
|
||||
const currentPropertiesMode = ref<'service' | 'work'>('service');
|
||||
|
||||
|
|
@ -1331,7 +1334,7 @@ async function alternativeFetch() {
|
|||
}
|
||||
}
|
||||
|
||||
function cloneServiceData() {
|
||||
async function cloneServiceData() {
|
||||
if (!currentService.value) return;
|
||||
const currentSelectedImage = formDataProductService.value.selectedImage;
|
||||
formDataProductService.value = {
|
||||
|
|
@ -1340,6 +1343,7 @@ function cloneServiceData() {
|
|||
};
|
||||
formDataProductService.value.selectedImage = currentSelectedImage;
|
||||
|
||||
await nextTick();
|
||||
workItems.value = currentService.value.work.map((item) => {
|
||||
return {
|
||||
id: item.id,
|
||||
|
|
@ -1565,6 +1569,34 @@ watch(
|
|||
if (profileFileImg.value !== null) isImageEdit.value = true;
|
||||
},
|
||||
);
|
||||
|
||||
function handleChangeWorkflowId(workflowId: string) {
|
||||
if (workItems.value.length > 0 && currWorkflow.value) {
|
||||
workItems.value.forEach((w) => {
|
||||
w.attributes.workflowId = workflowId;
|
||||
w.attributes.workflowStep = currWorkflow.value
|
||||
? JSON.parse(
|
||||
JSON.stringify(
|
||||
currWorkflow.value.step.map((step) => ({
|
||||
name: step.name,
|
||||
attributes: step.attributes,
|
||||
productsId: [],
|
||||
})),
|
||||
),
|
||||
)
|
||||
: [];
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => formDataProductService.value.attributes.workflowId,
|
||||
async (a, b) => {
|
||||
if (a && a !== b) {
|
||||
handleChangeWorkflowId(a);
|
||||
}
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -3982,6 +4014,7 @@ watch(
|
|||
</div>
|
||||
<SaveButton id="btn-info-basic-save" icon-only type="submit" />
|
||||
</div>
|
||||
|
||||
<BasicInformation
|
||||
v-if="serviceTab === 1"
|
||||
dense
|
||||
|
|
@ -3991,10 +4024,30 @@ watch(
|
|||
v-model:service-name-th="formDataProductService.name"
|
||||
/>
|
||||
|
||||
<!-- <div v-if="serviceTab === 1" class="row q-pt-sm">
|
||||
<SelectFlow
|
||||
class="col-4"
|
||||
v-model:value="formDataProductService.attributes.workflowId"
|
||||
:label="$t('flow.title')"
|
||||
simple
|
||||
@update-value="
|
||||
async (id) => {
|
||||
if (id) {
|
||||
console.log('2');
|
||||
const ret = await getWorkflowTemplate(id);
|
||||
if (ret) currWorkflow = ret;
|
||||
handleChangeWorkflowId(id);
|
||||
}
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div> -->
|
||||
|
||||
<FormServiceWork
|
||||
v-if="serviceTab === 2"
|
||||
ref="refAddServiceWork"
|
||||
v-model:work-items="workItems"
|
||||
v-model:workflow="currWorkflow"
|
||||
:tree-view="serviceTreeView"
|
||||
:service="formDataProductService"
|
||||
dense
|
||||
|
|
@ -4048,43 +4101,19 @@ watch(
|
|||
</div> -->
|
||||
</DialogForm>
|
||||
|
||||
<!-- service properties -->
|
||||
<DialogForm
|
||||
no-address
|
||||
no-app-box
|
||||
height="75vh"
|
||||
width="75%"
|
||||
:title="$t('productService.service.properties')"
|
||||
v-model:modal="propertiesDialog"
|
||||
:submit="
|
||||
() => {
|
||||
if (currentPropertiesMode === 'service') {
|
||||
formDataProductService.attributes = JSON.parse(
|
||||
JSON.stringify(tempValueProperties),
|
||||
);
|
||||
}
|
||||
if (currentPropertiesMode === 'work') {
|
||||
workItems[currentWorkIndex].attributes = JSON.parse(
|
||||
JSON.stringify(tempValueProperties),
|
||||
);
|
||||
}
|
||||
|
||||
propertiesDialog = false;
|
||||
<!-- service properties, work properties -->
|
||||
<DialogProperties
|
||||
v-if="workItems[currentWorkIndex]"
|
||||
selectFlow
|
||||
v-model:data-step="workItems[currentWorkIndex].attributes.workflowStep"
|
||||
v-model:workflow-id="formDataProductService.attributes.workflowId"
|
||||
v-model="propertiesDialog"
|
||||
@submit="
|
||||
(v) => {
|
||||
currWorkflow = v;
|
||||
}
|
||||
"
|
||||
:close="
|
||||
() => {
|
||||
propertiesDialog = false;
|
||||
}
|
||||
"
|
||||
>
|
||||
<section class="col column">
|
||||
<ServiceProperties
|
||||
v-model:properties-option="propertiesOption"
|
||||
v-model:form-service-properties="tempValueProperties"
|
||||
/>
|
||||
</section>
|
||||
</DialogForm>
|
||||
></DialogProperties>
|
||||
|
||||
<!-- manage work name -->
|
||||
<DialogForm
|
||||
|
|
@ -4387,15 +4416,36 @@ watch(
|
|||
v-model:service-name-th="formDataProductService.name"
|
||||
/>
|
||||
|
||||
<!-- <div v-if="serviceTab === 1" class="row q-pt-sm">
|
||||
<SelectFlow
|
||||
:readonly="!infoServiceEdit"
|
||||
class="col-4"
|
||||
v-model:value="formDataProductService.attributes.workflowId"
|
||||
:label="$t('flow.title')"
|
||||
simple
|
||||
@update-value="
|
||||
async (id) => {
|
||||
if (id) {
|
||||
console.log('2');
|
||||
const ret = await getWorkflowTemplate(id);
|
||||
if (ret) currWorkflow = ret;
|
||||
handleChangeWorkflowId(id);
|
||||
}
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div> -->
|
||||
|
||||
<FormServiceWork
|
||||
v-if="serviceTab === 2"
|
||||
ref="refEditServiceWork"
|
||||
v-model:work-items="workItems"
|
||||
v-model:workflow="currWorkflow"
|
||||
:service="formDataProductService"
|
||||
:tree-view="serviceTreeView"
|
||||
:readonly="!infoServiceEdit"
|
||||
v-model:work-items="workItems"
|
||||
dense
|
||||
:price-display="priceDisplay"
|
||||
dense
|
||||
@add-product="
|
||||
async (index) => {
|
||||
await fetchListOfProductIsAdd(currentIdGroup);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue