预研项目简介

基于 Ant Design Pro 4.x 的项目，包含了以下预研成果：

• bpmnjs 的基本使用

• bpmnjs 工具栏和属性面板的简单定制

• @antv/x6 的基本使用

  • 包含了 react-dnd
  • 包含了 mobx 6.x 的数模

• @antv/xflow 的基本使用

• @formily 的拖拽添加 formitem，联动关系的预研

  • basic @formily 的基本使用样例
  • intelform 基于 @formily 预研的拖拽联动表单

基础库使用简介

bpmn-js 基本使用

bpmn-js 的依赖

bpmn-js
bpmn-js-bpmnlint
bpmn-js-properties-panel
bpmnlint
camunda-bpmn-moddle
diagram-js-minimap

viewer

使用 Modeler，打开左侧浮动工具栏

引入了 bpmn-js/lib/Modeler 之后，就可以打开左侧的工具面板了，但需要全局导入 bpmn-js 的样式才可以看到面板

@import '~bpmn-js/dist/assets/diagram-js.css';
@import '~bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
@import '~bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
@import '~bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';

使用 bpmn-js-properties-panel 打开右侧属性编辑面板

需要 npm i bpmn-js-properties-panel --save

右边工具栏样式

@import '~bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css'

@antv/x6

@antv/xflow

xflow 是 antv 旗下基于 @antv/x6 的工作流图形引擎

依赖于：

• @antv/x6
• @antv/x6-react/shape

@formily

是从 alibaba 业务中台提炼出来的一套关联表单解决方案