BJ_ZTEITS-Developers / parking-cloud-yudao

Commit 2de81e438afcc3f1d1cea6bf43c7ce1cd4144806

Authored by YunaiV
1 parent 5a4392dc

流程详情页 100% - 完成流程图的高亮功能

Inline Side-by-side
Showing 1 changed file with 89 additions and 65 deletions
yudao-admin-ui/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
  View file @2de81e4
1 1 <template>
2 2 <div class="my-process-designer">
3 3 <div class="my-process-designer__container">
4   - <div class="my-process-designer__canvas" ref="canvas"></div>
  4 + <div class="my-process-designer__canvas" ref="bpmn-canvas"></div>
5 5 </div>
6 6 </div>
7 7 </template>
... ... @@ -56,7 +56,7 @@ export default {
56 56 initBpmnModeler() {
57 57 if (this.bpmnModeler) return;
58 58 this.bpmnModeler = new BpmnViewer({
59   - container: this.$refs["canvas"],
  59 + container: this.$refs["bpmn-canvas"],
60 60 bpmnRenderer: {
61 61 }
62 62 })
... ... @@ -88,54 +88,68 @@ export default {
88 88 if (!this.bpmnModeler.getDefinitions().rootElements[0].flowElements) {
89 89 return;
90 90 }
  91 + // 参考自 https://gitee.com/tony2y/RuoYi-flowable/blob/master/ruoyi-ui/src/components/Process/index.vue#L222 实现
91 92 let canvas = this.bpmnModeler.get('canvas');
92   - this.bpmnModeler.getDefinitions().rootElements[0].flowElements.forEach(n => {
  93 + this.bpmnModeler.getDefinitions().rootElements[0].flowElements?.forEach(n => {
  94 + let completeTask = this.tasks.find(m => m.definitionKey === n.id)
  95 + let todoTask = this.tasks.find(m => !m.endTime)
  96 + let endTask = this.tasks[this.tasks.length - 1]
93 97 if (n.$type === 'bpmn:UserTask') {
94   - let completeTask = this.tasks.find(m => m.definitionKey === n.id)
95   - let todoTask = this.tasks.find(m => !m.endTime)
96   - let endTask = this.tasks[this.tasks.length - 1]
97 98 if (completeTask) {
98 99 canvas.addMarker(n.id, completeTask.endTime ? 'highlight' : 'highlight-todo');
99   - console.log(n.id + ' : ' + (completeTask.endTime ? 'highlight' : 'highlight-todo'));
100   - // n.outgoing.forEach(nn => {
101   - // let targetTask = this.tasks.find(m => m.definitionKey === nn.targetRef.id)
102   - // if (targetTask) {
103   - // canvas.addMarker(nn.id, targetTask.endTime ? 'highlight' : 'highlight-todo');
104   - // } else if (nn.targetRef.$type === 'bpmn:ExclusiveGateway') {
105   - // // canvas.addMarker(nn.id, 'highlight');
106   - // canvas.addMarker(nn.id, completeTask.endTime ? 'highlight' : 'highlight-todo');
107   - // canvas.addMarker(nn.targetRef.id, completeTask.endTime ? 'highlight' : 'highlight-todo');
108   - // } else if (nn.targetRef.$type === 'bpmn:EndEvent') {
109   - // if (!todoTask && endTask.definitionKey === n.id) {
110   - // canvas.addMarker(nn.id, 'highlight');
111   - // canvas.addMarker(nn.targetRef.id, 'highlight');
112   - // }
113   - // if (!completeTask.endTime) {
114   - // canvas.addMarker(nn.id, 'highlight-todo');
115   - // canvas.addMarker(nn.targetRef.id, 'highlight-todo');
116   - // }
117   - // }
118   - // });
  100 + // console.log(n.id + ' : ' + (completeTask.endTime ? 'highlight' : 'highlight-todo'));
  101 + n.outgoing?.forEach(nn => {
  102 + let targetTask = this.tasks.find(m => m.definitionKey === nn.targetRef.id)
  103 + if (targetTask) {
  104 + canvas.addMarker(nn.id, targetTask.endTime ? 'highlight' : 'highlight-todo');
  105 + } else if (nn.targetRef.$type === 'bpmn:ExclusiveGateway') {
  106 + // canvas.addMarker(nn.id, 'highlight');
  107 + canvas.addMarker(nn.id, completeTask.endTime ? 'highlight' : 'highlight-todo');
  108 + canvas.addMarker(nn.targetRef.id, completeTask.endTime ? 'highlight' : 'highlight-todo');
  109 + } else if (nn.targetRef.$type === 'bpmn:EndEvent') {
  110 + if (!todoTask && endTask.definitionKey === n.id) {
  111 + canvas.addMarker(nn.id, 'highlight');
  112 + canvas.addMarker(nn.targetRef.id, 'highlight');
  113 + }
  114 + if (!completeTask.endTime) {
  115 + canvas.addMarker(nn.id, 'highlight-todo');
  116 + canvas.addMarker(nn.targetRef.id, 'highlight-todo');
  117 + }
  118 + }
  119 + });
119 120 }
120 121 } else if (n.$type === 'bpmn:ExclusiveGateway') {
121   - // n.outgoing.forEach(nn => {
122   - // let targetTask = this.tasks.find(m => m.definitionKey === nn.targetRef.id)
123   - // if (targetTask) {
124   - // canvas.addMarker(nn.id, targetTask.endTime ? 'highlight' : 'highlight-todo');
125   - // }
126   - // })
127   - }
128   - if (n.$type === 'bpmn:StartEvent') {
129   - canvas.addMarker(n.id, 'highlight-todo');
130   -
131   - // n.outgoing.forEach(nn => {
132   - // let completeTask = this.tasks.find(m => m.definitionKey === nn.targetRef.id)
133   - // if (completeTask) {
134   - // canvas.addMarker(nn.id, 'highlight');
135   - // canvas.addMarker(n.id, 'highlight');
136   - // return
137   - // }
138   - // });
  122 + n.outgoing?.forEach(nn => {
  123 + let targetTask = this.tasks.find(m => m.definitionKey === nn.targetRef.id)
  124 + if (targetTask) {
  125 + canvas.addMarker(nn.id, targetTask.endTime ? 'highlight' : 'highlight-todo');
  126 + }
  127 + })
  128 + } else if (n.$type === 'bpmn:ParallelGateway') {
  129 + if (completeTask) {
  130 + canvas.addMarker(n.id, completeTask.endTime ? 'highlight' : 'highlight-todo')
  131 + n.outgoing?.forEach(nn => {
  132 + const targetTask = this.taskList.find(m => m.definitionKey === nn.targetRef.id)
  133 + if (targetTask) {
  134 + canvas.addMarker(nn.id, targetTask.endTime ? 'highlight' : 'highlight-todo')
  135 + canvas.addMarker(nn.targetRef.id, targetTask.endTime ? 'highlight' : 'highlight-todo')
  136 + }
  137 + })
  138 + }
  139 + } else if (n.$type === 'bpmn:StartEvent') {
  140 + n.outgoing?.forEach(nn => {
  141 + let completeTask = this.tasks.find(m => m.definitionKey === nn.targetRef.id)
  142 + if (completeTask) {
  143 + canvas.addMarker(nn.id, 'highlight');
  144 + canvas.addMarker(n.id, 'highlight');
  145 + return
  146 + }
  147 + });
  148 + } else if (n.$type === 'bpmn:EndEvent') {
  149 + if (endTask.definitionKey === n.id && endTask.endTime) {
  150 + canvas.addMarker(n.id, 'highlight')
  151 + return
  152 + }
139 153 }
140 154 })
141 155 }
... ... @@ -144,24 +158,39 @@ export default {
144 158 </script>
145 159  
146 160 <style>
147   -.containers {
148   - position: absolute;
149   - background-color: #ffffff;
150   - top:0;
151   - left: 0;
152   - width: 100%;
153   - height: 100%;
  161 +
  162 +.highlight.djs-shape .djs-visual > :nth-child(1) {
  163 + fill: green !important;
  164 + stroke: green !important;
  165 + fill-opacity: 0.2 !important;
154 166 }
155   -.canvas {
156   - width: 100%;
157   - height: 100%;
  167 +.highlight.djs-shape .djs-visual > :nth-child(2) {
  168 + fill: green !important;
  169 +}
  170 +.highlight.djs-shape .djs-visual > path {
  171 + fill: green !important;
  172 + fill-opacity: 0.2 !important;
  173 + stroke: green !important;
  174 +}
  175 +.highlight.djs-connection > .djs-visual > path {
  176 + stroke: green !important;
  177 +}
  178 +
  179 +.highlight-todo.djs-connection > .djs-visual > path {
  180 + stroke: orange !important;
  181 + stroke-dasharray: 4px !important;
  182 + fill-opacity: 0.2 !important;
  183 +}
  184 +.highlight-todo.djs-shape .djs-visual > :nth-child(1) {
  185 + fill: orange !important;
  186 + stroke: orange !important;
  187 + stroke-dasharray: 4px !important;
  188 + fill-opacity: 0.2 !important;
158 189 }
159 190  
160   -/*/deep/.highlight-todo {*/
161   -/* background-color: red;*/
162   -/* fill: green !important;*/
163   -/* stroke: green !important;*/
164   -/*}*/
  191 +.highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
  192 + fill: green !important; /* color elements as green */
  193 +}
165 194  
166 195 /deep/.highlight.djs-shape .djs-visual > :nth-child(1) {
167 196 fill: green !important;
... ... @@ -191,10 +220,5 @@ export default {
191 220 stroke-dasharray: 4px !important;
192 221 fill-opacity: 0.2 !important;
193 222 }
194   -/deep/.overlays-div {
195   - font-size: 10px;
196   - color: red;
197   - width: 100px;
198   - top: -20px !important;
199   -}
  223 +
200 224 </style>
... ...