一、节点的配置(查看流程图)
①在服务器取到图并显示出来
②不能编辑和改动图
③可以获取到具体某个节点的信息
- html：
与(一)相同。 - js：
<script>
// 引入API接口
import {getBpmnXml, saveBpmnData, getNodeData} from '../../api/modeler'
export default {
data(){
return {
id: "",
bpmnModeler: null,
container: null,
canvas: null,
xmlStr: null,
// 点击节点获取的数据
nodeCode: "",
nodeName: ""
}
},
methods:{
createNewDiagram() {
const that = this;
let params = {
id: this.id
};
// 与后台交互获取到bpmnXmlStr
getBpmnXml(params).then(res => {
const bpmnXmlStr = res.obj;
// console.log(bpmnXmlStr)
this.bpmnModeler.importXML(bpmnXmlStr, function (err) {
if (err) {
console.error(err);
}
else {
// 字符串转换成图成功后执行的函数
that.success()
}
// 让图能自适应屏幕
var canvas = that.bpmnModeler.get('canvas');
canvas.zoom('fit-viewport');
});
})
},
// 增加事件监听器在Modeling里
success() {
const bpmnjs = this.bpmnModeler;
const eventBus = bpmnjs.get('eventBus');
const elementFactory = bpmnjs.get('elementFactory');
// viewer没有这两个 所以不传了，
// 如果是Modeler,应该要引入且const modeling = new Modeling(eventBus,elementFactory,commandStack,bpmnRules);
// const commandStack = bpmnjs.get('commandStack');
// const bpmnRules = bpmnjs.get('bpmnRules');
const Modeling = require('bpmn-js/lib/features/modeling/Modeling')
const modeling = new Modeling(eventBus,elementFactory);
this.addBpmnListener(this, modeling);
},
addBpmnListener(_self,modeling) {
const bpmnjs = this.bpmnModeler;
const eventBus = bpmnjs.get('eventBus');
const events = [
'element.click',
'element.dblclick'
];
events.forEach(function(event) {
eventBus.on(event, function(e) {
//bpmn:Lane bpmn:SequenceFlow bpmn:Task bpmn:SequenceFlow bpmn:ExclusiveGateway
//bpmn:Process
//console.log(event + ' ' + JSON.stringify(e.element));
if(e.element.type=='bpmn:Process'||e.element.type=='bpmn:Lane')
return;
var elementRegistry = bpmnjs.get('elementRegistry');
var shape = elementRegistry.get(e.element.id);
// 改变颜色
// modeling.setColor(shape,{ stroke:'RED' });
// console.log(shape)
// 我是通过console找到节点id和节点名称存储在哪里的
_self.nodeCode = shape.businessObject.id;
_self.nodeName = shape.businessObject.name;
// console.log(_self.nodeCode)
// console.log(_self.nodeName)
});
}
},
mounted(){
this.id = this.bpmnId;
// 不需要编辑功能，所以只用Viewer就够了，之前都是Modeler
var BpmnModeler = require('bpmn-js');
this.container = this.$refs.content;
var canvas = this.$refs.canvas;
this.bpmnModeler = new BpmnModeler({
container: canvas,
// // 添加右边属性控制板
// propertiesPanel: {
// parent: '#js-properties-panel'
// },
});
this.createNewDiagram(this.bpmnModeler);
},
// 父组件传来的id值
props: [
"bpmnId",
"modelId"
]
}
</script>
- css:
与(一)相同。
二、npmn-js框架英文汉化
通过代码追踪，最后发现node_modules/bpmn-js-properties-panel/lib/provider/camunda/CamundaPropertiesProvider.js的CamundaPropertiesProvider文件有个translate方法，因此我们知道bpmn-js-properties-panel组建设计的时候已经考虑到语言国际化问题，只是没有实现而已。
通过追踪translate方法的实现类，我们发现改方法的实现在node_modules/diagram-js/lib/i18n/translate/translate.js中，代码如下：
export default function translate(template, replacements) {
replacements = replacements || {};
return template.replace(/{([^}]+)}/g, function(_, key) {
return replacements[key] || '{' + key + '}';
});
}
将改代码修改成一下内容：
import zhCH from '../zh-CH';
export default function translate(template, replacements) {
replacements = replacements || zhCH;
if(replacements[template]){
return replacements[template];
}
return template.replace(/{([^}]+)}/g, function(_, key) {
return replacements[key] || '{' + key + '}';
});
}
其中zh-CH.js文件内容如下：
/**
* Create by pengweikang on 2019/4/11.
*/
module.exports = {
'Assignee':'代理人',
'Candidate Groups':'候选组',
'Candidate Users':'候选人',
'Due Date':'到期日',
'Follow Up Date':'跟踪日期',
'Priority':'优先',
'General':'一般信息',
'Listeners':'监听',
'Extensions':'扩展',
'Name':'名称',
'Version Tag':'版本标签',
'Executable':'可执行文件',
'External Task Configuration':'外部任务配置',
'Task Priority':'任务优先级',
'Job Configuration':'作业配置',
'Job Priority':'工作优先级',
'Documentation':'文档',
'Element Documentation':'元素文献',
'History Configuration':'历史配置',
'History Time To Live':'历史生存时间',
'Details':'详情',
'Initiator':'发起者',
'Asynchronous Continuations':'异步连续',
'Asynchronous Before':'异步之前',
'Asynchronous After':'异步之后',
'Forms':'表单',
'Input/Output':'输入/输出',
'Properties':'属性',
'Add Property':'添加属性',
'value':'值',
'Parameters':'参数',
'Input Parameters':'输入参数',
'Output Parameters':'输出参数',
'Execution Listener':'执行监听',
'Task Listener':'任务监听',
};
候选人与候选组可以通过 用户、机构（角色）选择
通过关键字查询，发现候选人与候选组输入框生成的代码在，node_modules/bpmn-js-properties-panel/lib/factory/TextInputEntryFactory.js中，部分代码如下：
resource.html =
'<label for="camunda-' + resource.id + '" ' +
(canBeDisabled ? 'data-disable="isDisabled" ' : '') +
(canBeHidden ? 'data-show="isHidden" ' : '') +
(dataValueLabel ? 'data-value="' + dataValueLabel + '"' : '') + '>'+ label +'</label>' +
'<div class="bpp-field-wrapper" ' +
(canBeDisabled ? 'data-disable="isDisabled"' : '') +
(canBeHidden ? 'data-show="isHidden"' : '') +
'>' +
'<input id="camunda-' + resource.id + '" type="text" name="' + options.modelProperty+'" ' +
(canBeDisabled ? 'data-disable="isDisabled"' : '') +
(canBeHidden ? 'data-show="isHidden"' : '') +
' />' +
'<button class="' + actionName + '" data-action="' + actionName + '" data-show="' + showName + '" ' +
(canBeDisabled ? 'data-disable="isDisabled"' : '') +
(canBeHidden ? ' data-show="isHidden"' : '') + '>' +
'<span>' + buttonLabel + '</span>' +
'</button>' +
'</div>';
