React 工作流 bpmn.js 从入门到实战：自定义属性栏更新业务属性

2023-08-14 06:47:54

利用 bpmn.js 和 React 构建自定义属性栏

在流程图应用的开发过程中，赋予用户在节点上添加和更新业务属性的能力至关重要。本文将深入探讨如何利用 bpmn.js 和 React 框架构建一个自定义的属性栏，满足这一需求。

第一步：设置环境

首先，我们需要安装必需的依赖项。使用 npm 包管理工具安装 bpmn-js、react 和 react-dom：

npm install --save bpmn-js react react-dom

第二步：创建 React 组件

接下来，我们创建一个 React 组件，负责显示属性栏。该组件名为 PropertyPanel，它接受 modeler 和 selectedElement 作为属性，其中 modeler 表示 bpmn.js 模型器，而 selectedElement 表示当前选中的流程图元素。

import React from 'react';

const PropertyPanel = (props) => {
  const { modeler, selectedElement } = props;

  return (
    <div>
      {selectedElement && (
        <div>
          <label>名称：</label>
          <input type="text" value={selectedElement.businessObject.name} onChange={(e) => {
            const newBusinessObject = { ...selectedElement.businessObject, name: e.target.value };
            modeler.updateBusinessObject(selectedElement, newBusinessObject);
          }} />
        </div>
      )}
    </div>
  );
};

export default PropertyPanel;

第三步：集成到 bpmn.js

现在，我们需要将 PropertyPanel 组件集成到 bpmn.js 模型器中。为此，我们在创建模型器时指定 propertiesPanel 选项，并将其 parent 和 component 设置为相应的属性栏容器和 React 组件：

import PropertyPanel from './PropertyPanel';

const bpmnModeler = new BpmnModeler({
  container: '#bpmn-canvas',
  propertiesPanel: {
    parent: '#properties-panel',
    component: PropertyPanel
  }
});

第四步：运行应用程序

最后，通过运行 npm start 命令启动应用程序，属性栏将集成到流程图编辑器中，允许用户修改选中节点的名称等业务属性。

代码示例

以下是完整的代码示例，展示了如何设置和使用自定义属性栏：

HTML

<div id="bpmn-canvas"></div>
<div id="properties-panel"></div>

JavaScript

import BpmnModeler from 'bpmn-js/lib/Modeler';
import PropertyPanel from './PropertyPanel';

const bpmnModeler = new BpmnModeler({
  container: '#bpmn-canvas',
  propertiesPanel: {
    parent: '#properties-panel',
    component: PropertyPanel
  }
});

bpmnModeler.importXML({ xml: '<bpmn2:process id="my-process"></bpmn2:process>' });