在vue中bpmn-js手动加入userTask节点

最新推荐文章于 2024-06-09 20:17:27 发布

它经不起推敲的

最新推荐文章于 2024-06-09 20:17:27 发布

阅读量248

点赞数 1

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/m0_46365130/article/details/139010458

版权

需要加入的内容

<userTask id="Activity_02p4ene" name="指定人员（并签）" flowable:userType="candidateUsers" flowable:dataType="dynamic" flowable:candidateUsers="${approval}">
  <documentation>指定人员（并签）</documentation>
  <incoming>Flow_0wmym8h</incoming>
  <outgoing>Flow_1l60g5k</outgoing>
  <multiInstanceLoopCharacteristics flowable:collection="Activity_02p4ene_users" flowable:elementVariable="approval" isSequential="false">
    <completionCondition>${nrOfCompletedInstances==nrOfInstances}</completionCondition>
  </multiInstanceLoopCharacteristics>
</userTask>

实现代码

manuallyInsertUserTask() {
  const modeling = this.modeler.get('modeling');
  const elementFactory = this.modeler.get('elementFactory');
  const moddle = this.modeler.get('moddle');
  const elementRegistry = this.modeler.get('elementRegistry');
  // 查找流程定义元素
  const processElement = elementRegistry.find(element => element.type === 'bpmn:Process');
  // 创建 User Task 元素
  const userTaskElement = elementFactory.createShape({
    type: 'bpmn:UserTask',
    id: 'Activity_02p4ene', // 自定义 ID
    x: 100,
    y: 100,
  });
  // 设置 User Task 的属性
  const businessObject = userTaskElement.businessObject;
  businessObject.name = '指定人员（并签）';
  businessObject.set('flowable:userType', 'candidateUsers');
  businessObject.set('flowable:dataType', 'dynamic');
  businessObject.set('flowable:candidateUsers', '${approval}');
  
  // 创建 documentation 子元素
  const documentationElement = moddle.create('bpmn:Documentation', { text: '指定人员（并签）' });
  businessObject.documentation = [documentationElement];

  // 创建 incoming 元素
  const incomingElement = moddle.create('bpmn:SequenceFlow', { id: 'IncomingFlow', sourceRef: processElement });
  businessObject.incoming = [incomingElement];

  // 创建 outgoing 元素
  const outgoingElement = moddle.create('bpmn:SequenceFlow', { id: 'OutgoingFlow', targetRef: processElement });
  businessObject.outgoing = [outgoingElement];

  // 创建 multiInstanceLoopCharacteristics 元素
  const multiInstanceElement = moddle.create('bpmn:MultiInstanceLoopCharacteristics', {
    'isSequential': false,
    'flowable:collection': 'Activity_02p4ene_users',
    'flowable:elementVariable': 'approval'
  });
  const completionConditionElement = moddle.create('bpmn:FormalExpression', { body: '${nrOfCompletedInstances==nrOfInstances}' });
  multiInstanceElement.completionCondition = completionConditionElement;
  businessObject.loopCharacteristics = multiInstanceElement;

  modeling.createShape(userTaskElement, { x: 0, y: 0 }, processElement);
},