update 支持多实例

src/components/BpmnDesign/panel/TaskPanel.vue

@@ -19,7 +19,7 @@
               <el-input v-model="formData.name" @change="nameChange"> </el-input>
             </el-form-item>
             <el-form-item v-if="showConfig.skipExpression" prop="skipExpression" label="跳过表达式">
-              <el-input v-model="formData.skipExpression"> </el-input>
+              <el-input v-model="formData.skipExpression" @change="skipExpressionChange"> </el-input>
             </el-form-item>
           </div>
         </el-collapse-item>
@@ -91,21 +91,84 @@
               </el-tab-pane>
             </el-tabs>
 
-            <el-form-item v-if="showConfig.multipleUserAuditType" prop="multipleUserAuditType" label="多人审批方式">
-              <el-radio-group v-model="formData.multipleUserAuditType" class="ml-4 block-radio">
-                <el-radio v-for="item in MultipleUserAuditType" :key="item.id" :label="item.value" size="large">{{ item.label }}</el-radio>
-              </el-radio-group>
-            </el-form-item>
             <el-form-item v-if="showConfig.dueDate" prop="dueDate" label="到期时间">
               <el-input v-model="formData.dueDate" @click="openDueDate"></el-input>
             </el-form-item>
             <el-form-item v-if="showConfig.priority" prop="priority" label="优先级">
-              <el-input-number v-model="formData.priority" :min="0"> </el-input-number>
+              <el-input-number v-model="formData.priority" :min="0" @change="priorityChange"> </el-input-number>
             </el-form-item>
           </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 MultiInstanceType" :key="item.id" :value="item.value" :label="item.label"> </el-option>
+              </el-select>
+            </el-form-item>
 
-        <el-collapse-item v-if="showConfig.taskListener" name="3">
+            <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>
+                        每创建一个用户任务前，先以该元素变量为label，集合中的一项为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-item v-if="showConfig.taskListener" name="4">
           <template #title>
             <div class="collapse__title">
               <el-icon>
@@ -118,7 +181,7 @@
             <TaskListener v-if="showConfig.taskListener" :element="element"></TaskListener>
           </div>
         </el-collapse-item>
-        <el-collapse-item v-if="showConfig.executionListener" name="4">
+        <el-collapse-item v-if="showConfig.executionListener" name="5">
           <template #title>
             <div class="collapse__title">
               <el-icon>
@@ -131,6 +194,7 @@
             <ExecutionListener v-if="showConfig.executionListener" :element="element"></ExecutionListener>
           </div>
         </el-collapse-item>
+
         <el-form-item v-if="showConfig.isForCompensation" prop="isForCompensation" label="是否为补偿">
           <el-switch v-model="formData.isForCompensation" inline-prompt active-text="是" inactive-text="否" />
         </el-form-item>
@@ -165,8 +229,7 @@ import RoleSelect from '@/components/RoleSelect';
 import DueDate from '@/components/BpmnDesign/panel/property/DueDate.vue';
 import { Element } from 'bpmn';
 import { TaskPanel } from 'bpmnDesign';
-import { AllocationTypeEnum, MultipleUserAuditTypeEnum, SpecifyDescEnum } from '@/enums/bpmn/IndexEnums';
+import { AllocationTypeEnum, MultiInstanceTypeEnum, SpecifyDescEnum } from '@/enums/bpmn/IndexEnums';
-import { BellFilled, Checked, InfoFilled } from '@element-plus/icons-vue';
 import { UserVO } from '@/api/system/user/types';
 import { RoleVO } from '@/api/system/role/types';
 
@@ -187,7 +250,7 @@ const initFormData = {
   id: '',
   name: '',
   dueDate: '',
-  multipleUserAuditType: MultipleUserAuditTypeEnum.SERIAL,
+  multiInstanceType: MultiInstanceTypeEnum.NONE,
   allocationType: AllocationTypeEnum.USER,
   specifyDesc: SpecifyDescEnum.SPECIFY_SINGLE
 };
@@ -279,6 +342,59 @@ const taskTabClick = (e) => {
 const syncChange = (newVal) => {
   updateProperties({ 'flowable:async': newVal });
 };
+
+const skipExpressionChange = (newVal) => {
+  updateProperties({ 'flowable:skipExpression': newVal && newVal.length > 0 ? newVal : undefined });
+};
+const priorityChange = (newVal) => {
+  updateProperties({ 'flowable:priority': newVal });
+};
+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('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 });
+};
+
 const selectUserLength = computed(() => {
   if (formData.value.candidateUsers) {
     return formData.value.candidateUsers.split(',').length;
@@ -293,36 +409,6 @@ const selectRoleLength = computed(() => {
     return 0;
   }
 });
-watch(
-  () => formData.value.async,
-  (newVal: boolean) => {
-    if (newVal) {
-      updateProperties({ 'flowable:async': true });
-    } else {
-      updateProperties({ 'flowable:async': undefined });
-    }
-  }
-);
-watch(
-  () => formData.value.skipExpression,
-  (newVal: string) => {
-    if (newVal) {
-      updateProperties({ 'flowable:skipExpression': newVal });
-    } else {
-      updateProperties({ 'flowable:skipExpression': undefined });
-    }
-  }
-);
-watch(
-  () => formData.value.priority,
-  (newVal: number) => {
-    if (newVal) {
-      updateProperties({ 'flowable:priority': newVal });
-    } else {
-      updateProperties({ 'flowable:priority': undefined });
-    }
-  }
-);
 watch(
   () => formData.value.dueDate,
   (newVal: string) => {
@@ -333,9 +419,7 @@ watch(
     }
   }
 );
-
 onBeforeMount(() => {
-  // formData.value = { ...initData, ...parseData<TaskPanel>() };
   const extensionElements = getExtensionElements(false);
   if (extensionElements && extensionElements.get('values')) {
     let extAssigneeElement = extensionElements.get('values').find((item) => item.$type === 'flowable:extAssignee');
@@ -343,6 +427,14 @@ onBeforeMount(() => {
       assignee.value = JSON.parse(extAssigneeElement.body);
     }
   }
+
+  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>({
@@ -361,17 +453,11 @@ const SpecifyDesc = [
   { id: '7365ff54-2e05-4312-9bfb-0b8edd779c5b', label: '指定多个人', value: 'specifyMultiple' }
 ];
 
-const MultipleUserAuditType = [
+const MultiInstanceType = [
-  { id: 'b5acea7c-b7e5-46b0-8778-390db091bdab', label: '串行（每人依次审批）', value: 'serial' },
+  { id: '373d4b81-a0d1-4eb8-8685-0d2fb1b468e2', label: '无', value: MultiInstanceTypeEnum.NONE },
-  { id: 'b4f0c683-1ccc-43c4-8380-e1b998986caf', label: '并行（所有人审批通过）', value: 'parallel' },
+  { id: 'b5acea7c-b7e5-46b0-8778-390db091bdab', label: '串行', value: MultiInstanceTypeEnum.SERIAL },
-  { id: '373d4b81-a0d1-4eb8-8685-0d2fb1b468e2', label: '或签（任意一人审批通过）', value: 'orSign' }
+  { id: 'b4f0c683-1ccc-43c4-8380-e1b998986caf', label: '并行', value: MultiInstanceTypeEnum.PARALLEL }
 ];
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped></style>
-.block-radio {
-  display: flex;
-  flex-flow: column nowrap;
-  align-items: flex-start;
-}
-</style>

src/enums/bpmn/IndexEnums.ts

@@ -10,8 +10,8 @@ export enum SpecifyDescEnum {
   SPECIFY_SINGLE = 'specifySingle'
 }
 
-export enum MultipleUserAuditTypeEnum {
+export enum MultiInstanceTypeEnum {
   SERIAL = 'serial',
   PARALLEL = 'parallel',
-  OR_SIGN = 'orSign'
+  NONE = 'none'
 }

src/types/bpmn/panel.d.ts

@@ -1,5 +1,5 @@
 declare module 'bpmnDesign' {
-  import { AllocationTypeEnum, SpecifyDescEnum, MultipleUserAuditTypeEnum } from '@/enums/bpmn/IndexEnums';
+  import { AllocationTypeEnum, SpecifyDescEnum, MultiInstanceTypeEnum } from '@/enums/bpmn/IndexEnums';
 
   export interface ParamVO {
     type: string;
@@ -31,7 +31,7 @@ declare module 'bpmnDesign' {
   export interface TaskPanel extends BasePanel {
     allocationType: AllocationTypeEnum;
     specifyDesc: SpecifyDescEnum;
-    multipleUserAuditType: MultipleUserAuditTypeEnum;
+    multiInstanceType: MultiInstanceTypeEnum;
     async?: boolean;
     priority?: number;
     skipExpression?: string;
@@ -47,6 +47,19 @@ declare module 'bpmnDesign' {
     candidateUsers?: string;
     assignee?: string;
     candidateGroups?: string;
+    collection?: string;
+    elementVariable?: string;
+    completionCondition?: string;
+    isSequential?: boolean;
+
+    loopCharacteristics?: {
+      collection: string;
+      elementVariable: string;
+      isSequential: boolean;
+      completionCondition: {
+        body: string;
+      };
+    };
   }
 
   export interface StartEndPanel extends BasePanel {}