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,
??????????//?左邊工具欄以及節(jié)點(diǎn)
??????????propertiesProviderModule,
??????????//?customControlsModule,
??????????//?漢化
??????????customTranslateModule,
??????????BpmnModeler,?{
????????????//?paletteProvider:?['value',?''],?//?禁用左面板
????????????//?labelEditingProvider:?['value',?''],?//?禁用編輯
????????????//?contextPadProvider:?['value',?''],?//?禁用點(diǎn)擊出現(xiàn)的contextPad
????????????//?bendpoints:?['value',?{}],?//?禁止流程線變換waypoints
????????????zoomScroll:?['value',?'']?//?禁止畫(huà)布滾動(dòng)
????????????//?moveCanvas:?['value',?'']?//?禁止拖拽
??????????}
????????],
????????moddleExtensions:?{
??????????//?模塊拓展，拓展activiti的描述
??????????activiti:?activitiModdleDescriptor
??????????//?camunda:?camundaModdleDescriptor
????????}
??????})
??????this.importBpmnXml()
????}
//?前進(jìn)
????handleRedo()?{
??????this.bpmnModeler.get('commandStack').redo()
????},
//?后退
????handleUndo()?{
??????this.bpmnModeler.get('commandStack').undo()
????},
//?導(dǎo)出bpmn文件
????exportBpmn()?{
??????this.bpmnModeler.saveXML({?format:?true?},?function(err,?xml)?{
????????if?(err)?{
??????????return?console.error('無(wú)法保存BPMN',?err)
????????}
????????//?如果瀏覽器支持msSaveOrOpenBlob方法（也就是使用IE瀏覽器的時(shí)候）
????????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])?//?字符內(nèi)容轉(zhuǎn)變成blob地址
??????????eleLink.href?=?URL.createObjectURL(blob)
??????????document.body.appendChild(eleLink)?//?觸發(fā)點(diǎn)擊
??????????eleLink.click()
??????????document.body.removeChild(eleLink)?//?然后移除
????????}
??????})
????},
//?導(dǎo)出圖片
????exportImg()?{
??????if?(window.navigator.msSaveOrOpenBlob)?{
????????console.log('IE瀏覽器無(wú)法下載，建議使用谷歌瀏覽器')
????????return
??????}
??????//?獲取SVG數(shù)據(jù)（圖片）
??????this.bpmnModeler.saveSVG({?format:?true?},?(err,?data)?=>?{
????????if?(err)?{
??????????console.log('保存失敗')
????????}
????????var?svgXml?=?data
????????var?canvas?=?document.createElement('canvas')?//?準(zhǔn)備空畫(huà)布
????????canvas.width?=?'1000px'
????????canvas.height?=?screen.availHeight
????????canvas.fillStyle?=?'#FFFFFF'
????????canvg(canvas,?svgXml)
????????var?imagedata?=?canvas.toDataURL('image/png')
????????//?如果瀏覽器支持msSaveOrOpenBlob方法（也就是使用IE瀏覽器的時(shí)候）
????????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?//?將畫(huà)布內(nèi)的信息導(dǎo)出為png圖片數(shù)據(jù)
??????????a.download?=?'activiti'?//?設(shè)定下載名稱(chēng)
??????????a.click()?//?點(diǎn)擊觸發(fā)下載
????????}
??????})
????},
// 直接部署(前后端)
deployEvent()?{
??????const?formData?=?new?FormData()
??????//?獲取保存的bpmn椰棘，發(fā)送給后臺(tái)
??????this.bpmnModeler.saveXML({?format:?true?},?function(err,?xml)?{
????????if?(err)?{
??????????return?console.error('無(wú)法保存BPMN',?err)
????????}
????????formData.append('reportFile',?new?Blob([xml],?{?type:?'text/xml'?}),?'activiti.bpmn')
??????})
??????uploadFilesDirect(formData).then(data?=>?{
????????//?跳轉(zhuǎn)到流程管理列表
????????this.$router.push({
??????????path:?'/activiti/index'
????????})
????????this.$notify({
??????????title:?'成功',
??????????message:?'發(fā)布成功诺核！',
??????????type:?'success'
????????})
??????}).catch(response?=>?{
????????this.$notify.error({
??????????title:?'錯(cuò)誤',
??????????message:?'發(fā)布失敯瘴函荣！'
????????})
??????})
????},
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();
}
