vue整合bpmn.js,漢化及整合activiti

1、vue整合bpmn.js,漢化及整合activiti1安裝bpmn.js安裝命令：npminstallbpmn-jsbpmn-js-properties-panel2漢化漢化包：customTranslate主要代碼：importcustomTranslatefrom././customTranslate;constcustomTranslateModule=translate:value,customTranslateadditionalModules:propertiesProviderModule,propertiesPanelModule,customTranslateModule3整

2、合activiti引入activiti.json文件：importactivitiModdleDescriptorfrom/api/bpmnjs/activiti.json/初始化BpmnModelerinitBpmnModeler()this.container=this.$refs.contentconstcanvas=this.$refs.canvasvarcustomTranslateModule=translate:value,customTranslatethis.bpmnModeler=newBpmnModeler(container:canvas,propertiesPanel

3、:parent:#js-properties-panel,additionalModules:/右邊的工具欄propertiesPanelModule,/左邊工具欄以及節(jié)點propertiesProviderModule,/customControlsModule,漢化customTranslateModule,BpmnModeler,/paletteProvider:value,/禁用左面板/labelEditingProvider:value,/禁用編輯/contextPadProvider:value,/禁用點擊出現(xiàn)的contextPad/bendpoints:value,/禁止流程線變

4、換waypointszoomScroll:value,/禁止畫布滾動/moveCanvas:value,/禁止拖拽,moddleExtensions:/模塊拓展，拓展activiti的描述activiti:activitiModdleDescriptor/camunda:camundaModdleDescriptor)this.importBpmnXml()/前進handleRedo()this.bpmnModeler.get(commandStack).redo(),/后退handleUndo()this.bpmnModeler.get(commandStack).undo(),/導(dǎo)出bpm

5、n文件exportBpmn()this.bpmnModeler.saveXML(format:true,function(err,xml)f(err)returnconsole.error(無法保存BPMN,err)/如果瀏覽器支持msSaveOrOpenBlob方法(也就是使用IE瀏覽器的時候)if(window.navigator.msSaveOrOpenBlob)varblob=newBlob(xml,type:text/plain)window.navigator.msSaveOrOpenBlob(blob,activiti.bpmn)elsevareleLink=document.c

6、reateElement(a)eleLink.download=activiti.bpmneleLink.style.display=noneconstblob=newBlob(xml)/字符內(nèi)容轉(zhuǎn)變成blob地址eleLink.href=URL.createObjectURL(blob)document.body.appendChild(eleLink)/觸發(fā)點擊eleLink.click()document.body.removeChild(eleLink)/然后移除),/導(dǎo)出圖片exportImg()if(window.navigator.msSaveOrOpenBlob)console

7、.log(IE瀏覽器無法下載，建議使用谷歌瀏覽器)return/獲取SVG數(shù)據(jù)(圖片)this.bpmnModeler.saveSVG(format:true,(err,data)=f(err)consoleog(保存失敗)varsvgXml=datavarcanvas=document.createElement(canvas)/準備空畫布canvas.width=1000pxcanvas.height=screen.availHeightcanvas.fillStyle=#FFFFFFcanvg(canvas,svgXml)varimagedata=canvas.toDataURL(ima

8、ge/png)/如果瀏覽器支持msSaveOrOpenBlob方法(也就是使用IE瀏覽器的時候)if(window.navigator.msSaveOrOpenBlob)varbstr=atob(imagedata.split(,)1)varn=bstr.1engthvaru8arr=newUint8Array(n)while(n-)u8arrn=bstr.charCodeAt(n)varblob=newBlob(u8arr)window.navigator.msSaveOrOpenBlob(blob,activiti.png)elsevara=document.createElement(a

9、)a.href=imagedata/將畫布內(nèi)的信息導(dǎo)出為png圖片數(shù)據(jù)a.download=activiti/設(shè)定下載名稱a.click()/點擊觸發(fā)下載),/直接部署(前后端)deployEvent()constformData=newFormData()/獲取保存的bpmn,發(fā)送給后臺this.bpmnModeler.saveXML(format:true,function(err,xml)訐(err)returnconsole.error(無法保存BPMN,err)formData.append(reportFile,newBlob(xml,type:text/xml),activiti

10、.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:錯誤，message:發(fā)布失?。?,exportfunctionuploadFiles(formData)returnrequesturl:/processDefinition/deploy,method:POST,data:form

11、Data)RequestMapping(value=/deploy/direct,method=RequestMethod.POST)publicResultVodeployDirect(MultipartFilereportFile)Stringprocesses=processes;for(MultipartFilemultipartFileBpmn:reportFile)tryFileUtils.upload(multipartFileBpmn.getlnputStream(),processes,multipartFileBpmn.getOriginalFilename();StringfilePath=ResourceUtils.getURL(classpath:).getPath()+File.separator+processes+File.separator;FileInputStreambpmnStream=newFilelnputStream(filePath+multipartFileBpmn.getOriginalFilename();repositoryService.cre