流程图节点添加点击选中的事件

上篇文章讲到了通过传递当前流程图的modeler，就是实例化的bpmn的流程图的信息，我们通过在流程的原型上添加选中的事件，通过点击的参数带出选中的流程图节点信息，比如，用户任务、服务任务等

js 复制代码

     componentDidMount(){
     // 组件挂载完成之后，在modeler中添加一个选中的事件
     this.props.modeler.on('selection.changed',(e)=>{
     // 这个e.newSelection[0]就是每次选中的节点信息，可以用于区分不同的节点类型
     
     // 比如用户任务，选中之后，我们可以用来回显右侧属性栏的表单信息
     // 将选中的节点存在变量selectedElement  
        const selectedElement = e.newSelection[0];  
        console.log(selectedElement, '选中节点');  
        if (selectedElement) {  
          this.setState({  
            currentElement: selectedElement,  
          });  
  
      
        // 回显用户任务  
        if (selectedElement && selectedElement.type === 'bpmn:UserTask') {  
          const { id, name, $type: type } = selectedElement?.businessObject;  
          const { width, height } = selectedElement;  
          const {  
            name: modelName,  
            id: modelKey,  
          } = selectedElement.businessObject.$parent;  
          this.userTaskNodeInfoRef.current.setFieldsValue({  
            id,  
            name,  
            type,  
            width,  
            height,  
            modelName,  
            modelKey,  
          });  
        }
     })
     
     }

怎么更新节点信息

上文中我们保存了当前点击的节点信息currentElement，可以使用bpmn.js提供的方法updateProperties来进行更新，下面代码，通过接受的属性，获取到模型的modeling来更新

js 复制代码

// 更新自定义属性  
  updateProperties = (properties) => {  
    const modeling = this.props.modeler.get('modeling');  
    modeling.updateProperties(this.state.currentElement, properties);  
  };

下面以一个服务任务更新属性作为示例，其他的任务也都同样的方式，只不过是创建标签的类型不同，下面的示例中有调用了俩次更新，一次是更新服务的委托实现类，一次是更新字段名

js 复制代码

// 保存服务任务节点信息  
  saveServiceTaskNodeInfo = () => {  
    const settings = this.serviceTaskSettingRef.current.getFieldsValue();  
    // 属性  
    // 删除多余属性  
    const serviceTaskNodeInfoFormClone = JSON.parse(JSON.stringify(settings));  
    const properties = {};  
    for (const key in serviceTaskNodeInfoFormClone) {  
      if (serviceTaskNodeInfoFormClone.hasOwnProperty(key)) {  
        const value = serviceTaskNodeInfoFormClone[key];  
        if (value.length !== 0) {  
          properties[`flowable:${key}`] = Array.isArray(value)  
            ? value.toString()  
            : value;  
        }  
      }  
    }  
   
    // 节点字段名  
    let extensionElements = this.state.currentElement.businessObject.get(  
      'extensionElements',  
    );  
    if (!extensionElements) {  
      extensionElements = this.props.modeler  
        .get('moddle')  
        .create('bpmn:ExtensionElements');  
    }  
    //判断是否有服务委托类,并且字段名存在  
   
      extensionElements.values = [];  
      // 服务任务委托类  
      this.state.serviceClassList.forEach((item) => {  
        let field = [];  
        // 判断如果类型是字符串 就创建string类型的标签，  
        if (item.data[1].value == 'string') {  
          field = this.props.modeler.get('moddle').create('flowable:string');  
        }  
        // 判断如果类型是表达式 就创建expression类型的标签，  
        if (item.data[1].value == 'expression') {  
          field = this.props.modeler  
            .get('moddle')  
            .create('flowable:expression');  
        }  
        field['body'] = item.data[2].value;  
        const executeListener = this.props.modeler  
          .get('moddle')  
          .create('flowable:Field');  
        executeListener['name'] = item.data[0].value;  
        executeListener['string'] = field;  
        extensionElements.get('values').push(executeListener);  
      });  
      this.updateProperties({ extensionElements: extensionElements });  
  //  更新服务任务流程  
    this.updateProperties(properties);  
  };

基于React的工作流 bpmn.js基本使用（2）-自定义右侧属性栏之更新业务属性到bpmn内

流程图节点添加点击选中的事件

怎么更新节点信息