update 支持多实例

2024-01-31 18:13:50 +08:00 · 2024-01-31 18:13:50 +08:00 · 0db70e5dd3
commit 0db70e5dd3
parent c9c33b9745
3 changed files with 158 additions and 59 deletions
--- a/src/components/BpmnDesign/panel/TaskPanel.vue
+++ b/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 { BellFilled, Checked, InfoFilled } from '@element-plus/icons-vue';
+import { AllocationTypeEnum, MultiInstanceTypeEnum, SpecifyDescEnum } from '@/enums/bpmn/IndexEnums';
 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 = [
-  { id: 'b5acea7c-b7e5-46b0-8778-390db091bdab', label: '串行（每人依次审批）', value: 'serial' },
-  { id: 'b4f0c683-1ccc-43c4-8380-e1b998986caf', label: '并行（所有人审批通过）', value: 'parallel' },
-  { id: '373d4b81-a0d1-4eb8-8685-0d2fb1b468e2', label: '或签（任意一人审批通过）', value: 'orSign' }
+const MultiInstanceType = [
+  { id: '373d4b81-a0d1-4eb8-8685-0d2fb1b468e2', label: '无', value: MultiInstanceTypeEnum.NONE },
+  { id: 'b5acea7c-b7e5-46b0-8778-390db091bdab', label: '串行', value: MultiInstanceTypeEnum.SERIAL },
+  { id: 'b4f0c683-1ccc-43c4-8380-e1b998986caf', label: '并行', value: MultiInstanceTypeEnum.PARALLEL }
 ];
 </script>

-<style lang="scss" scoped>
-.block-radio {
-  display: flex;
-  flex-flow: column nowrap;
-  align-items: flex-start;
-}
-</style>
+<style lang="scss" scoped></style>
--- a/src/enums/bpmn/IndexEnums.ts
+++ b/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'
 }
--- a/src/types/bpmn/panel.d.ts
+++ b/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 {}