1.安装bpmn.js
安装命令：npm install bpmn-js bpmn-js-properties-panel
2.汉化
汉化包：customTranslate
主要代码：
importcustomTranslatefrom'../../customTranslate';
constcustomTranslateModule={
translate:["value",customTranslate]}
additionalModules：[propertiesProviderModule,propertiesPanelModule,customTranslateModule]
3.整合activiti
引入activiti.json文件: import activitiModdleDescriptor from '@/api/bpmnjs/activiti.json'
主要代码
// 初始化BpmnModeler
initBpmnModeler() {
this.container = this.$refs.content
const canvas = this.$refs.canvas
var customTranslateModule = {
translate: ['value', customTranslate]
}
this.bpmnModeler = new BpmnModeler({
container: canvas,
propertiesPanel: {
parent: '#js-properties-panel'
},
additionalModules: [
// 右边的工具栏
propertiesPanelModule,
// 左边工具栏以及节点
propertiesProviderModule,
// customControlsModule,
// 汉化
customTranslateModule,
BpmnModeler, {
// paletteProvider: ['value', ''], // 禁用左面板
// labelEditingProvider: ['value', ''], // 禁用编辑
// contextPadProvider: ['value', ''], // 禁用点击出现的contextPad
// bendpoints: ['value', {}], // 禁止流程线变换waypoints
zoomScroll: ['value', ''] // 禁止画布滚动
// moveCanvas: ['value', ''] // 禁止拖拽
}
],
moddleExtensions: {
// 模块拓展，拓展activiti的描述
activiti: activitiModdleDescriptor
// camunda: camundaModdleDescriptor
}
})
this.importBpmnXml()
}
// 前进
handleRedo() {
this.bpmnModeler.get('commandStack').redo()
},
// 后退
handleUndo() {
this.bpmnModeler.get('commandStack').undo()
},
// 导出bpmn文件
exportBpmn() {
this.bpmnModeler.saveXML({ format: true }, function(err, xml) {
if (err) {
return console.error('无法保存BPMN', err)
}
// 如果浏览器支持msSaveOrOpenBlob方法（也就是使用IE浏览器的时候）
if (window.navigator.msSaveOrOpenBlob) {
var blob = new Blob([xml], { type: 'text/plain' })
window.navigator.msSaveOrOpenBlob(blob, 'activiti.bpmn')
} else {
var eleLink = document.createElement('a')
eleLink.download = 'activiti.bpmn'
eleLink.style.display = 'none'
const blob = new Blob([xml]) // 字符内容转变成blob地址
eleLink.href = URL.createObjectURL(blob)
document.body.appendChild(eleLink) // 触发点击
eleLink.click()
document.body.removeChild(eleLink) // 然后移除
}
})
},
// 导出图片
exportImg() {
if (window.navigator.msSaveOrOpenBlob) {
console.log('IE浏览器无法下载，建议使用谷歌浏览器')
return
}
// 获取SVG数据（图片）
this.bpmnModeler.saveSVG({ format: true }, (err, data) => {
if (err) {
console.log('保存失败')
}
var svgXml = data
var canvas = document.createElement('canvas') // 准备空画布
canvas.width = '1000px'
canvas.height = screen.availHeight
canvas.fillStyle = '#FFFFFF'
canvg(canvas, svgXml)
var imagedata = canvas.toDataURL('image/png')
// 如果浏览器支持msSaveOrOpenBlob方法（也就是使用IE浏览器的时候）
if (window.navigator.msSaveOrOpenBlob) {
var bstr = atob(imagedata.split(',')[1])
var n = bstr.length
var u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
var blob = new Blob([u8arr])
window.navigator.msSaveOrOpenBlob(blob, 'activiti.png')
} else {
var a = document.createElement('a')
a.href = imagedata // 将画布内的信息导出为png图片数据
a.download = 'activiti' // 设定下载名称
a.click() // 点击触发下载
}
})
},
// 直接部署(前后端)
deployEvent() {
const formData = new FormData()
// 获取保存的bpmn，发送给后台
this.bpmnModeler.saveXML({ format: true }, function(err, xml) {
if (err) {
return console.error('无法保存BPMN', err)
}
formData.append('reportFile', new Blob([xml], { type: 'text/xml' }), 'activiti.bpmn')
})
uploadFilesDirect(formData).then(data => {
// 跳转到流程管理列表
this.$router.push({
path: '/activiti/index'
})
this.$notify({
title: '成功',
message: '发布成功！',
type: 'success'
})
}).catch(response => {
this.$notify.error({
title: '错误',
message: '发布失败！'
})
})
},
export function uploadFiles(formData) {
return request({
url: '/processDefinition/deploy',
method: 'POST',
data: formData
})
}
@RequestMapping(value = "/deploy/direct", method = RequestMethod.POST)
public ResultVo<String> deployDirect(MultipartFile[] reportFile) {
String processes = "processes";
for (MultipartFile multipartFileBpmn : reportFile) {
try {
FileUtils.upload(multipartFileBpmn.getInputStream(), processes , multipartFileBpmn.getOriginalFilename());
String filePath = ResourceUtils.getURL("classpath:").getPath() + File.separator + processes
+ File.separator;
FileInputStream bpmnStream = new FileInputStream(filePath + multipartFileBpmn.getOriginalFilename());
repositoryService.createDeployment()
.addInputStream("activiti.bpmn", bpmnStream)
.deploy();
} catch (Exception e) {
logger.error(e.getMessage());
throw new BaseException(BaseExceptionCode.文件下载失败);
}
}
return ResultVo.success();
}
