BJ_ZTEITS-Developers / parking-cloud-yudao

Commit bdf8bafec59ec280e843685859947479993234b0

Authored by gexinzhineng/gxzn27
1 parent 467a9849

bpmnjs图提示框显示问题

Inline Side-by-side
Showing 1 changed file with 35 additions and 40 deletions
yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
  View file @bdf8baf
... ... @@ -9,7 +9,7 @@
9 9 <script setup lang="ts" name="MyProcessViewer">
10 10 import BpmnViewer from 'bpmn-js/lib/Viewer'
11 11 import DefaultEmptyXML from './plugins/defaultEmpty'
12   -import { onMounted, onBeforeUnmount, provide, ref, watch } from 'vue'
  12 +import { onMounted, onBeforeUnmount, provide, ref, watch, toRaw } from 'vue'
13 13 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
14 14 const props = defineProps({
15 15 value: {
... ... @@ -49,8 +49,8 @@ const processInstance = ref(undefined)
49 49 const taskList = ref([])
50 50 const bpmnCanvas = ref()
51 51 // const element = ref()
52   -const elementOverlayIds = ref()
53   -const overlays = ref()
  52 +const elementOverlayIds = ref(null)
  53 +const overlays = ref(null)
54 54  
55 55 const initBpmnModeler = () => {
56 56 if (bpmnModeler) return
... ... @@ -67,7 +67,6 @@ const createNewDiagram = async (xml) =&gt; {
67 67 let newName = `业务流程_${new Date().getTime()}`
68 68 let xmlString = xml || DefaultEmptyXML(newId, newName, props.prefix)
69 69 try {
70   - // console.log(this.bpmnModeler.importXML);
71 70 let { warnings } = await bpmnModeler.importXML(xmlString)
72 71 if (warnings && warnings.length) {
73 72 warnings.forEach((warn) => console.warn(warn))
... ... @@ -94,7 +93,6 @@ const highlightDiagram = async () =&gt; {
94 93 let todoActivity = activityList.find((m) => !m.endTime) // 找到待办的任务
95 94 let endActivity = activityList[activityList.length - 1] // 获得最后一个任务
96 95 // debugger
97   - // console.log(this.bpmnModeler.getDefinitions().rootElements[0].flowElements);
98 96 bpmnModeler.getDefinitions().rootElements[0].flowElements?.forEach((n) => {
99 97 let activity = activityList.find((m) => m.key === n.id) // 找到对应的活动
100 98 if (!activity) {
... ... @@ -270,27 +268,14 @@ const elementHover = (element) =&gt; {
270 268 console.log(element.value, 'element.value')
271 269 const activity = activityLists.value.find((m) => m.key === element.value.id)
272 270 console.log(activity, 'activityactivityactivityactivity')
273   - if (!activity) {
274   - return
275   - }
276   - console.log(elementOverlayIds.value, 'elementOverlayIds.value')
277   - console.log(element.value.id, 'element.value.id')
278   - console.log(
279   - elementOverlayIds.value[element.value.id],
280   - 'elementOverlayIds.value[element.value.id]'
281   - )
282   - console.log(
283   - !elementOverlayIds.value[element.value.id],
284   - '!elementOverlayIds.value[element.value.id]'
285   - )
286   - console.log(element.value.type, 'element.value.type')
  271 + // if (!activity) {
  272 + // return
  273 + // }
287 274 if (!elementOverlayIds.value[element.value.id] && element.value.type !== 'bpmn:Process') {
288   - console.log('进入')
289 275 let html = `<div class="element-overlays">
290 276 <p>Elemet id: ${element.value.id}</p>
291 277 <p>Elemet type: ${element.value.type}</p>
292 278 </div>` // 默认值
293   - console.log(processInstance.value, 'processInstance')
294 279 if (element.value.type === 'bpmn:StartEvent' && processInstance.value) {
295 280 html = `<p>发起人：${processInstance.value.startUser.nickname}</p>
296 281 <p>部门：${processInstance.value.startUser.deptName}</p>
... ... @@ -301,13 +286,24 @@ const elementHover = (element) =&gt; {
301 286 if (!task) {
302 287 return
303 288 }
  289 + let optionData = getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT)
  290 + let dataResult = ''
  291 + optionData.forEach((element) => {
  292 + if (element.value == task.result) {
  293 + dataResult = element.label
  294 + }
  295 + })
304 296 html = `<p>审批人：${task.assigneeUser.nickname}</p>
305 297 <p>部门：${task.assigneeUser.deptName}</p>
306   - <p>结果：${getIntDictOptions(
307   - DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT,
308   - task.result
309   - )}</p>
  298 + <p>结果：${dataResult}</p>
310 299 <p>创建时间：${parseTime(task.createTime)}</p>`
  300 + // html = `<p>审批人：${task.assigneeUser.nickname}</p>
  301 + // <p>部门：${task.assigneeUser.deptName}</p>
  302 + // <p>结果：${getIntDictOptions(
  303 + // DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT,
  304 + // task.result
  305 + // )}</p>
  306 + // <p>创建时间：${parseTime(task.createTime)}</p>`
311 307 if (task.endTime) {
312 308 html += `<p>结束时间：${parseTime(task.endTime)}</p>`
313 309 }
... ... @@ -323,32 +319,32 @@ const elementHover = (element) =&gt; {
323 319 }
324 320 console.log(html)
325 321 } else if (element.value.type === 'bpmn:EndEvent' && processInstance.value) {
326   - html = `<p>结果：${getIntDictOptions(
327   - DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT,
328   - processInstance.value.result
329   - )}</p>`
  322 + let optionData = getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT)
  323 + let dataResult = ''
  324 + optionData.forEach((element) => {
  325 + if (element.value == processInstance.value.result) {
  326 + dataResult = element.label
  327 + }
  328 + })
  329 + html = `<p>结果：${dataResult}</p>`
  330 + // html = `<p>结果：${getIntDictOptions(
  331 + // DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT,
  332 + // processInstance.value.result
  333 + // )}</p>`
330 334 if (processInstance.value.endTime) {
331 335 html += `<p>结束时间：${parseTime(processInstance.value.endTime)}</p>`
332 336 }
333 337 }
334 338 console.log(html, 'html111111111111111')
335   - console.log(
336   - elementOverlayIds.value[element.value.id],
337   - 'elementOverlayIds.value[element.value.id]'
338   - )
339   - elementOverlayIds.value[element.value.id] = overlays.value.add(element.value, {
  339 + elementOverlayIds.value[element.value.id] = toRaw(overlays.value).add(element.value, {
340 340 position: { left: 0, bottom: 0 },
341 341 html: `<div class="element-overlays">${html}</div>`
342 342 })
343   - console.log(
344   - elementOverlayIds.value[element.value.id],
345   - 'elementOverlayIds.value[element.value.id]'
346   - )
347 343 }
348 344 }
349 345 // 流程图的元素被 out
350 346 const elementOut = (element) => {
351   - overlays.value.remove({ element })
  347 + toRaw(overlays.value).remove({ element })
352 348 elementOverlayIds.value[element.id] = null
353 349 }
354 350 const parseTime = (time) => {
... ... @@ -416,7 +412,6 @@ onBeforeUnmount(() =&gt; {
416 412 watch(
417 413 () => props.value,
418 414 (newValue) => {
419   - console.log(newValue, 'oldVal')
420 415 xml.value = newValue
421 416 createNewDiagram(xml.value)
422 417 }
... ...