From 63055cc559f8eef3fc4d621fb72584115260d69f Mon Sep 17 00:00:00 2001
From: gexinzhineng/gxzn27 <1348660141@qq.com>
Date: Tue, 31 Jan 2023 16:17:11 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AF=A6=E6=83=85=E6=98=BE=E7=A4=BAbpmn?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../package/designer/ProcessViewer.vue | 74 ++++++++++++++++++-
.../src/views/bpm/processInstance/create.vue | 16 ++--
.../src/views/bpm/processInstance/detail.vue | 2 +
3 files changed, 85 insertions(+), 7 deletions(-)
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
index 33b848f7d..f2738e47c 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
+++ b/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 = `
Elemet id: ${element.value.id}
Elemet type: ${element.value.type}
` // 默认值
+ console.log(processInstance.value, 'processInstance')
if (element.value.type === 'bpmn:StartEvent' && processInstance.value) {
html = `发起人：${processInstance.value.startUser.nickname}
部门：${processInstance.value.startUser.deptName}
@@ -286,7 +303,7 @@ const elementHover = (element) => {
}
html = `审批人：${task.assigneeUser.nickname}
部门：${task.assigneeUser.deptName}
- 结果：${getDictDataLabel(
+
结果：${getIntDictOptions(
DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT,
task.result
)}
@@ -306,7 +323,7 @@ const elementHover = (element) => {
}
console.log(html)
} else if (element.value.type === 'bpmn:EndEvent' && processInstance.value) {
- html = `结果：${getDictDataLabel(
+ html = `
结果：${getIntDictOptions(
DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT,
processInstance.value.result
)}
`
@@ -314,10 +331,19 @@ const elementHover = (element) => {
html += `结束时间：${parseTime(processInstance.value.endTime)}
`
}
}
+ 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: `${html}
`
})
+ 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
diff --git a/yudao-ui-admin-vue3/src/views/bpm/processInstance/create.vue b/yudao-ui-admin-vue3/src/views/bpm/processInstance/create.vue
index 6be6747b6..c0542b227 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/processInstance/create.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/processInstance/create.vue
@@ -38,7 +38,13 @@
流程图
-
+
@@ -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'
+})