1. 概述

流程图作为流程的图形化展示的重要部分,需要在设计器外的地方显示出来,这时有两种方式的显示办法:

  1. 在服务端通过流程定义XML生成流程图
  2. 在前端加载流程定义XML展示

本方案我们采用第二种方式,通过使用跟设计器一样的bpmn-js的组件进行流程图的显示。

引入bpmn-js 显示组件并封装

在Jpaas-vue项目中通过安装以下组件:

npm install bpmn-js

在Vue页面中定义如下:

  1. <template>
  2. <div style="width:100%;height:100%" class="flowImg">
  3. <div style="padding: 10px">温馨提示:按住鼠标左键可拖动查看</div>
  4. <div class="containers" ref="content">
  5. <div class="canvas" ref="canvas" style="width: 100%;height: 100%">
  6. </div>
  7. </div>
  8. </div>
  9. </template>
  10. <script>
  11. import BpmnViewer from 'bpmn-js/lib/NavigatedViewer'
  12. import {getBpmnXmlFromParam} from '@/api/bpm/core/bpmImage'
  13. export default {
  14. name: "BpmImageView",
  15. props:{
  16. instId: String,
  17. taskId:String,
  18. defId:String
  19. },
  20. created() {
  21. let self=this;
  22. this.$nextTick().then(() => {
  23. this.canvas = this.$refs.canvas;
  24. if(!this.viewer) {
  25. this.viewer = new BpmnViewer({
  26. container: this.canvas,
  27. keyboard: {
  28. bindTo: window
  29. },
  30. });
  31. }
  32. //从后台xml中获取
  33. getBpmnXmlFromParam({defId:self.defId,instId:self.instId,taskId:self.taskId,showHis:true}).then(result=>{
  34. if(!result) {
  35. return;
  36. }
  37. this.viewer.importXML(result.bpmnXml, function(err) {
  38. if (err) {
  39. console.log('error rendering', err);
  40. } else {
  41. console.log('rendered');
  42. }
  43. self.shows();
  44. // 加上节点的高亮显示
  45. let canvas = self.viewer.get('canvas');
  46. if(canvas && result.histories!=null){
  47. for(let i = 0 ; i < result.histories.length;i++){
  48. canvas.addMarker(result.histories[i].nodeId, 'highlight_' + result.histories[i].checkStatus);
  49. }
  50. }
  51. });
  52. });
  53. });
  54. },
  55. methods:{
  56. shows () {
  57. }
  58. }
  59. }
  60. </script>
  61. <style scoped>
  62. .containers{
  63. height:calc( 100% - 44px );
  64. width: 100%;
  65. }
  66. .containers>>> .bjs-powered-by{
  67. display: none;
  68. }
  69. .example {
  70. display: inline;
  71. height:32px;
  72. width:30px;
  73. padding:2px;
  74. border: solid 1px #c09853;
  75. margin:2px;
  76. }
  77. .flowImg >>> .highlight_AGREE:not(.djs-connection) .djs-visual > rect{
  78. fill:green !important;
  79. }
  80. .flowImg >>> .highlight_BACK:not(.djs-connection) .djs-visual > rect{
  81. fill: #ff174c !important;
  82. }
  83. .flowImg >>> .highlight_UNHANDLE:not(.djs-connection) .djs-visual > rect{
  84. fill: #ff1005 !important;
  85. }
  86. .flowImg >>> .highlight_HANDLE:not(.djs-connection) .djs-visual > rect{
  87. fill: #ff680a !important;
  88. }
  89. .djs-container > svg{
  90. overflow: auto!important;
  91. }
  92. </style>

展示效果

可定义不同的节点的不同的审批状态显示不同的颜色风格。

文档更新时间: 2020-10-12 09:25   作者:csx