vue里使用bpmn绘制流程图（四）

比眉伴天荒 2024-04-18 19:34 38阅读 0赞

#### 1. 替换节点汉化 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb3lhbnl1Xw_size_16_color_FFFFFF_t_70]  
点击扳手图标可以将当前节点替换成新的节点。节点名称默认是英文，此处可以汉化

*  控制弹框显示的源码在 bpmn-js\\lib\\features\\popup-menu\\ReplaceMenuProvider.js中

import translation from './translationsGerman'; //引入翻译文件
    ReplaceMenuProvider.prototype._createMenuEntry = function(definition, element, action) { 
      var translate = this._translate;
      var replaceElement = this._bpmnReplace.replaceElement;
    
      var replaceAction = function() { 
        return replaceElement(element, definition.target);
      };
    
      action = action || replaceAction;
    
      var menuEntry = { 
        label: translation[definition.label], //将label显示的内容替换为中文
        // label: definition.label,
        className: definition.className,
        id: definition.actionName,
        action: action
      };
    
      return menuEntry;
    };

*  控制弹框内容的文件在bpmn-js\\lib\\features\\replace\\ReplaceOptions.js中  
    不同类型的节点，可替换的节点都不同，根据需要自行配置

#### 2.节点属性面板自定义 ####

1.  可以在原有面板的基础上进行扩展和修改

详细可参考官方demo [https://github.com/bpmn-io/bpmn-js-examples/tree/master/properties-panel-extension][https_github.com_bpmn-io_bpmn-js-examples_tree_master_properties-panel-extension]

react版本 [https://github.com/bpmn-io/bpmn-js-example-react-properties-panel][https_github.com_bpmn-io_bpmn-js-example-react-properties-panel]

新增一个`PropertiesProvider`文件，并注入到`propertiesProvider`中，如下。  
可以通过对节点类型等的判断`if(is(element, 'bpmn:Task'))`来控制面板显示不同的内容,

import MagicPropertiesProvider from './MagicPropertiesProvider';
    
    export default { 
      __init__: [ 'propertiesProvider' ],
      propertiesProvider: [ 'type', MagicPropertiesProvider ]
    };

1.  完全自定义控制面板

`propertiesPanel`属性注入自定的propertiesPanel.js文件

import PropertiesPanel from './propertiesPanel';
    
    export default { 
      __init__: ['propertiesPanel'],
      propertiesPanel: [ 'type', PropertiesPanel ]
    };

propertiesPanel.js  
定义构造函数PropertiesPanel

export default function PropertiesPanel(config, eventBus, modeling,bpmnFactory, commandStack, canvas) { 
    
    	this._eventBus = eventBus;
    	this._modeling = modeling;
    	this._commandStack = commandStack; //用于触发bpmn定义的一些命令
    	this._canvas = canvas;
    	this._bpmnFactory = bpmnFactory
    
    	this.createModal(); //创建节点的属性弹框，可以创建自定的vue组件或者react组件
    	this._init(config); //初始化，此处通过eventBus监听事件来控制弹框的显示等操作
    }
    //注入需要使用的模块
    PropertiesPanel.$inject = [
    	'config.propertiesPanel',
    	'eventBus',
    	'modeling',
    	'bpmnFactory',
    	'commandStack',
    	'canvas'
    ];

详细见 [https://github.com/haoyanyu/vue-with-bpmn][https_github.com_haoyanyu_vue-with-bpmn]中src/components/bpmn/custom/custom-panel/propertiesPanel.js

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb3lhbnl1Xw_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/3028bb65a5574ed093e174fcf8b19063.png
[https_github.com_bpmn-io_bpmn-js-examples_tree_master_properties-panel-extension]: https://github.com/bpmn-io/bpmn-js-examples/tree/master/properties-panel-extension
[https_github.com_bpmn-io_bpmn-js-example-react-properties-panel]: https://github.com/bpmn-io/bpmn-js-example-react-properties-panel
[https_github.com_haoyanyu_vue-with-bpmn]: https://github.com/haoyanyu/vue-with-bpmn