From 4253b2afbb0307a9a92e0a053b0e4757558252e1 Mon Sep 17 00:00:00 2001
From: LiuHao <liuhaoai545@gmail.com>
Date: 星期一, 18 三月 2024 14:19:30 +0800
Subject: [PATCH] update 增加子流程多实例
---
src/components/BpmnDesign/panel/SubProcessPanel.vue | 192 +++++++++++++++++++++++++++++++++++++++--------
1 files changed, 159 insertions(+), 33 deletions(-)
diff --git a/src/components/BpmnDesign/panel/SubProcessPanel.vue b/src/components/BpmnDesign/panel/SubProcessPanel.vue
index cf32fc6..0310072 100644
--- a/src/components/BpmnDesign/panel/SubProcessPanel.vue
+++ b/src/components/BpmnDesign/panel/SubProcessPanel.vue
@@ -1,62 +1,188 @@
<template>
<div>
- <el-collapse v-model="currentCollapseItem">
- <el-collapse-item name="1">
- <template #title>
- <div class="collapse__title">
- <el-icon>
- <InfoFilled />
- </el-icon>
- 甯歌
- </div>
- </template>
- <div>
- <el-form ref="formRef" :model="formData" :rules="formRules" label-width="90px">
+ <el-form ref="formRef" :model="formData" :rules="formRules" label-width="90px">
+ <el-collapse v-model="currentCollapseItem">
+ <el-collapse-item name="1">
+ <template #title>
+ <div class="collapse__title">
+ <el-icon>
+ <InfoFilled />
+ </el-icon>
+ 甯歌
+ </div>
+ </template>
+ <div>
<el-form-item prop="id" label="鑺傜偣 ID">
<el-input v-model="formData.id" @change="idChange"> </el-input>
</el-form-item>
<el-form-item prop="name" label="鑺傜偣鍚嶇О">
<el-input v-model="formData.name" @change="nameChange"> </el-input>
</el-form-item>
- </el-form>
- </div>
- </el-collapse-item>
-
- <el-collapse-item name="2">
- <template #title>
- <div class="collapse__title">
- <el-icon>
- <BellFilled />
- </el-icon>
- 鎵ц鐩戝惉鍣�
</div>
- </template>
- <div>
- <ExecutionListener :element="element"></ExecutionListener>
- </div>
- </el-collapse-item>
- </el-collapse>
+ </el-collapse-item>
+
+ <el-collapse-item name="2">
+ <template #title>
+ <div class="collapse__title">
+ <el-icon>
+ <BellFilled />
+ </el-icon>
+ 鎵ц鐩戝惉鍣�
+ </div>
+ </template>
+ <div>
+ <ExecutionListener :element="element"></ExecutionListener>
+ </div>
+ </el-collapse-item>
+ <el-collapse-item name="3">
+ <template #title>
+ <div class="collapse__title">
+ <el-icon>
+ <HelpFilled />
+ </el-icon>
+ 澶氬疄渚�
+ </div>
+ </template>
+ <div>
+ <el-form-item label="澶氬疄渚嬬被鍨�">
+ <el-select v-model="formData.multiInstanceType" @change="multiInstanceTypeChange">
+ <el-option v-for="item in constant.MultiInstanceType" :key="item.id" :value="item.value" :label="item.label"> </el-option>
+ </el-select>
+ </el-form-item>
+
+ <div v-if="formData.multiInstanceType !== MultiInstanceTypeEnum.NONE">
+ <el-form-item label="闆嗗悎">
+ <template #label>
+ <span>
+ 闆嗗悎
+ <el-tooltip placement="top">
+ <el-icon><QuestionFilled /></el-icon>
+ <template #content>
+ 灞炴�т細浣滀负琛ㄨ揪寮忚繘琛岃В鏋愩�傚鏋滆〃杈惧紡瑙ｆ瀽涓哄瓧绗︿覆鑰屼笉鏄竴涓泦鍚堬紝<br />
+ 涓嶈鏄洜涓烘湰韬厤缃殑灏辨槸闈欐�佸瓧绗︿覆鍊硷紝杩樻槸琛ㄨ揪寮忚绠楃粨鏋滀负瀛楃涓诧紝<br />
+ 杩欎釜瀛楃涓查兘浼氳褰撳仛鍙橀噺鍚嶏紝骞朵粠娴佺▼鍙橀噺涓敤浜庤幏鍙栧疄闄呯殑闆嗗悎銆�
+ </template>
+ </el-tooltip>
+ </span>
+ </template>
+ <el-input v-model="formData.collection" @change="collectionChange"></el-input>
+ </el-form-item>
+ <el-form-item label="鍏冪礌鍙橀噺">
+ <template #label>
+ <span>
+ 鍏冪礌鍙橀噺
+ <el-tooltip placement="top">
+ <el-icon><QuestionFilled /></el-icon>
+ <template #content>
+ 姣忓垱寤轰竴涓敤鎴蜂换鍔″墠锛屽厛浠ヨ鍏冪礌鍙橀噺涓簂abel锛岄泦鍚堜腑鐨勪竴椤逛负value锛�<br />
+ 鍒涘缓锛堝眬閮級娴佺▼鍙橀噺锛岃灞�閮ㄦ祦绋嬪彉閲忚鐢ㄤ簬鎸囨淳鐢ㄦ埛浠诲姟銆�<br />
+ 涓�鑸潵璇达紝璇ュ瓧绗︿覆搴斾笌鎸囧畾浜哄憳鍙橀噺鐩稿悓銆�
+ </template>
+ </el-tooltip>
+ </span>
+ </template>
+ <el-input v-model="formData.elementVariable" @change="elementVariableChange"> </el-input>
+ </el-form-item>
+ <el-form-item label="瀹屾垚鏉′欢">
+ <template #label>
+ <span>
+ 瀹屾垚鏉′欢
+ <el-tooltip placement="top">
+ <el-icon><QuestionFilled /></el-icon>
+ <template #content>
+ 澶氬疄渚嬫椿鍔ㄥ湪鎵�鏈夊疄渚嬮兘瀹屾垚鏃剁粨鏉燂紝鐒惰�屼篃鍙互鎸囧畾涓�涓〃杈惧紡锛屽湪姣忎釜瀹炰緥<br />
+ 缁撴潫鏃惰繘琛岃绠椼�傚綋琛ㄨ揪寮忚绠椾负true鏃讹紝灏嗛攢姣佹墍鏈夊墿浣欑殑瀹炰緥锛屽苟缁撴潫澶氬疄渚�<br />
+ 娲诲姩锛岀户缁墽琛屾祦绋嬨�備緥濡� ${nrOfCompletedInstances/nrOfInstances >= 0.6 }锛�<br />
+ 琛ㄧず褰撲换鍔″畬鎴�60%鏃讹紝璇ヨ妭鐐瑰氨绠楀畬鎴�
+ </template>
+ </el-tooltip>
+ </span>
+ </template>
+ <el-input v-model="formData.completionCondition" @change="completionConditionChange"> </el-input>
+ </el-form-item>
+ </div>
+ </div>
+ </el-collapse-item>
+ </el-collapse>
+ </el-form>
</div>
</template>
<script setup lang="ts">
import useParseElement from '@/components/BpmnDesign/hooks/useParseElement';
import usePanel from '@/components/BpmnDesign/hooks/usePanel';
import { ModdleElement } from 'bpmn';
-import { StartEndPanel } from 'bpmnDesign';
+import { SubProcessPanel } from 'bpmnDesign';
+import { MultiInstanceTypeEnum } from '@/enums/bpmn/IndexEnums';
interface PropType {
element: ModdleElement;
}
const props = withDefaults(defineProps<PropType>(), {});
-const { nameChange, idChange } = usePanel({
+const { nameChange, idChange, updateProperties, createModdleElement, constant } = usePanel({
element: toRaw(props.element)
});
const { parseData } = useParseElement({
element: toRaw(props.element)
});
-const formData = ref(parseData<StartEndPanel>());
-const currentCollapseItem = ref(['1', '2']);
+const formData = ref(parseData<SubProcessPanel>());
+const currentCollapseItem = ref(['1', '2', '3']);
+
+const multiInstanceTypeChange = (newVal) => {
+ if (newVal !== MultiInstanceTypeEnum.NONE) {
+ let loopCharacteristics = props.element.businessObject.get('loopCharacteristics');
+ if (!loopCharacteristics) {
+ loopCharacteristics = createModdleElement('bpmn:MultiInstanceLoopCharacteristics', {}, props.element.businessObject);
+ }
+ loopCharacteristics.isSequential = newVal === MultiInstanceTypeEnum.SERIAL;
+ updateProperties({ loopCharacteristics: loopCharacteristics });
+ } else {
+ updateProperties({ loopCharacteristics: undefined });
+ }
+};
+const collectionChange = (newVal) => {
+ let loopCharacteristics = props.element.businessObject.get('loopCharacteristics');
+ if (!loopCharacteristics) {
+ loopCharacteristics = createModdleElement('bpmn:MultiInstanceLoopCharacteristics', {}, props.element.businessObject);
+ }
+ loopCharacteristics.collection = newVal && newVal.length > 0 ? newVal : undefined;
+ updateProperties({ loopCharacteristics: loopCharacteristics });
+};
+const elementVariableChange = (newVal) => {
+ let loopCharacteristics = props.element.businessObject.get('loopCharacteristics');
+ if (!loopCharacteristics) {
+ loopCharacteristics = createModdleElement('bpmn:MultiInstanceLoopCharacteristics', {}, props.element.businessObject);
+ }
+ loopCharacteristics.elementVariable = newVal && newVal.length > 0 ? newVal : undefined;
+ updateProperties({ loopCharacteristics: loopCharacteristics });
+};
+const completionConditionChange = (newVal) => {
+ let loopCharacteristics = props.element.businessObject.get<ModdleElement>('loopCharacteristics');
+ if (!loopCharacteristics) {
+ loopCharacteristics = createModdleElement('bpmn:MultiInstanceLoopCharacteristics', {}, props.element.businessObject);
+ }
+ if (newVal && newVal.length > 0) {
+ if (!loopCharacteristics.completionCondition) {
+ loopCharacteristics.completionCondition = createModdleElement('bpmn:Expression', { body: newVal }, loopCharacteristics);
+ } else {
+ loopCharacteristics.completionCondition.body = newVal;
+ }
+ } else {
+ loopCharacteristics.completionCondition = undefined;
+ }
+ updateProperties({ loopCharacteristics: loopCharacteristics });
+};
+
+onBeforeMount(() => {
+ if (formData.value.loopCharacteristics) {
+ const loopCharacteristics = formData.value.loopCharacteristics;
+ formData.value.collection = loopCharacteristics.collection || '';
+ formData.value.elementVariable = loopCharacteristics.elementVariable || '';
+ formData.value.completionCondition = loopCharacteristics.completionCondition?.body || '';
+ formData.value.multiInstanceType = loopCharacteristics.isSequential ? MultiInstanceTypeEnum.SERIAL : MultiInstanceTypeEnum.PARALLEL;
+ }
+});
+
const formRules = ref<ElFormRules>({
id: [{ required: true, message: '璇疯緭鍏�', trigger: 'blur' }],
name: [{ required: true, message: '璇疯緭鍏�', trigger: 'blur' }]
--
Gitblit v1.9.3