详情显示bpmn

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue

@@ -10,6 +10,7 @@
 import BpmnViewer from 'bpmn-js/lib/Viewer'
 import DefaultEmptyXML from './plugins/defaultEmpty'
 import { onMounted, onBeforeUnmount, provide, ref, watch } from 'vue'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 const props = defineProps({
   value: {
     // BPMN XML 字符串
@@ -265,15 +266,31 @@ const elementHover = (element) => {
   !elementOverlayIds.value && (elementOverlayIds.value = {})
   !overlays.value && (overlays.value = bpmnModeler.get('overlays'))
   // 展示信息
+  console.log(activityLists.value, 'activityLists.value')
+  console.log(element.value, 'element.value')
   const activity = activityLists.value.find((m) => m.key === element.value.id)
+  console.log(activity, 'activityactivityactivityactivity')
   if (!activity) {
     return
   }
+  console.log(elementOverlayIds.value, 'elementOverlayIds.value')
+  console.log(element.value.id, 'element.value.id')
+  console.log(
+    elementOverlayIds.value[element.value.id],
+    'elementOverlayIds.value[element.value.id]'
+  )
+  console.log(
+    !elementOverlayIds.value[element.value.id],
+    '!elementOverlayIds.value[element.value.id]'
+  )
+  console.log(element.value.type, 'element.value.type')
   if (!elementOverlayIds.value[element.value.id] && element.value.type !== 'bpmn:Process') {
+    console.log('进入')
     let html = `<div class="element-overlays">
             <p>Elemet id: ${element.value.id}</p>
             <p>Elemet type: ${element.value.type}</p>
           </div>` // 默认值
+    console.log(processInstance.value, 'processInstance')
     if (element.value.type === 'bpmn:StartEvent' && processInstance.value) {
       html = `<p>发起人：${processInstance.value.startUser.nickname}</p>
                   <p>部门：${processInstance.value.startUser.deptName}</p>
@@ -286,7 +303,7 @@ const elementHover = (element) => {
       }
       html = `<p>审批人：${task.assigneeUser.nickname}</p>
                   <p>部门：${task.assigneeUser.deptName}</p>
-                  <p>结果：${getDictDataLabel(
+                  <p>结果：${getIntDictOptions(
                     DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT,
                     task.result
                   )}</p>
@@ -306,7 +323,7 @@ const elementHover = (element) => {
       }
       console.log(html)
     } else if (element.value.type === 'bpmn:EndEvent' && processInstance.value) {
-      html = `<p>结果：${getDictDataLabel(
+      html = `<p>结果：${getIntDictOptions(
         DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT,
         processInstance.value.result
       )}</p>`
@@ -314,10 +331,19 @@ const elementHover = (element) => {
         html += `<p>结束时间：${parseTime(processInstance.value.endTime)}</p>`
       }
     }
+    console.log(html, 'html111111111111111')
+    console.log(
+      elementOverlayIds.value[element.value.id],
+      'elementOverlayIds.value[element.value.id]'
+    )
     elementOverlayIds.value[element.value.id] = overlays.value.add(element.value, {
       position: { left: 0, bottom: 0 },
       html: `<div class="element-overlays">${html}</div>`
     })
+    console.log(
+      elementOverlayIds.value[element.value.id],
+      'elementOverlayIds.value[element.value.id]'
+    )
   }
 }
 // 流程图的元素被 out
@@ -325,6 +351,50 @@ const elementOut = (element) => {
   overlays.value.remove({ element })
   elementOverlayIds.value[element.id] = null
 }
+const parseTime = (time) => {
+  if (!time) {
+    return null
+  }
+  const format = '{y}-{m}-{d} {h}:{i}:{s}'
+  let date
+  if (typeof time === 'object') {
+    date = time
+  } else {
+    if (typeof time === 'string' && /^[0-9]+$/.test(time)) {
+      time = parseInt(time)
+    } else if (typeof time === 'string') {
+      time = time
+        .replace(new RegExp(/-/gm), '/')
+        .replace('T', ' ')
+        .replace(new RegExp(/\.[\d]{3}/gm), '')
+    }
+    if (typeof time === 'number' && time.toString().length === 10) {
+      time = time * 1000
+    }
+    date = new Date(time)
+  }
+  const formatObj = {
+    y: date.getFullYear(),
+    m: date.getMonth() + 1,
+    d: date.getDate(),
+    h: date.getHours(),
+    i: date.getMinutes(),
+    s: date.getSeconds(),
+    a: date.getDay()
+  }
+  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
+    let value = formatObj[key]
+    // Note: getDay() returns 0 on Sunday
+    if (key === 'a') {
+      return ['日', '一', '二', '三', '四', '五', '六'][value]
+    }
+    if (result.length > 0 && value < 10) {
+      value = '0' + value
+    }
+    return value || 0
+  })
+  return time_str
+}
 
 onMounted(() => {
   xml.value = props.value

yudao-ui-admin-vue3/src/views/bpm/processInstance/create.vue

@@ -38,7 +38,13 @@
           <span class="el-icon-picture-outline">流程图</span>
         </div>
         <!-- TODO 芋艿：待完成？？？ -->
-        <!-- <my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" /> -->
+        <my-process-viewer
+          key="designer"
+          v-model="bpmnXML"
+          :value="bpmnXML"
+          v-bind="bpmnControlForm"
+          :prefix="bpmnControlForm.prefix"
+        />
       </el-card>
     </div>
   </ContentWrap>
@@ -89,7 +95,7 @@ const handleSelect = async (row) => {
 
     // 加载流程图
     DefinitionApi.getProcessDefinitionBpmnXMLApi(row.id).then((response) => {
-      bpmnXML.value = response.data
+      bpmnXML.value = response
     })
     // 情况二：业务表单
   } else if (row.formCustomCreatePath) {
@@ -126,9 +132,9 @@ const submitForm = async (formData) => {
 
 // // BPMN 数据
 const bpmnXML = ref(null)
-// const bpmnControlForm=ref( {
-//   prefix: "flowable"
-// })
+const bpmnControlForm = ref({
+  prefix: 'flowable'
+})
 </script>
 
 <style lang="scss">

yudao-ui-admin-vue3/src/views/bpm/processInstance/detail.vue

@@ -144,7 +144,9 @@
       <my-process-viewer
         key="designer"
         v-model="bpmnXML"
+        :value="bpmnXML"
         v-bind="bpmnControlForm"
+        :prefix="bpmnControlForm.prefix"
         :activityData="activityList"
         :processInstanceData="processInstance"
         :taskData="tasks"