-
+
- {{ index + 1 }}
+
+ {{ index + 1 }}
+
+
{{ step.title }}
-
{{ step.title }}
-
-
+
+
保 存
发 布
@@ -264,15 +269,26 @@
+
-
+
-
+
@@ -520,9 +536,27 @@ const steps = [
]
// 处理设计器保存成功
-const handleDesignSuccess = () => {
+const handleDesignSuccess = (bpmnXml?: string) => {
+ if (bpmnXml) {
+ // 新建时，保存设计器生成的XML
+ formData.value.bpmnXml = bpmnXml
+ }
message.success('保存成功')
}
+
+// 步骤切换处理
+const handleStepClick = async (index: number) => {
+ // 如果是切换到第三步（流程设计），需要校验key和name
+ if (index === 2 && !formData.value.id) {
+ // 新增时才校验
+ if (!formData.value.key || !formData.value.name) {
+ message.warning('请先填写流程标识和流程名称')
+ return
+ }
+ }
+
+ currentStep.value = index
+}
From 21c28c3665a6e0b3a9fc02d1fa4ced2d03294a44 Mon Sep 17 00:00:00 2001
From: GoldenZqqqq <1361001127@qq.com>
Date: Sat, 14 Dec 2024 00:21:43 +0800
Subject: [PATCH 5/6] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=E8=AE=BE?=
=?UTF-8?q?=E8=AE=A1=E6=B5=81=E7=A8=8B=E5=88=87=E6=8D=A2=E5=88=B0=E7=AC=AC?=
=?UTF-8?q?=E4=B8=89=E6=AD=A5=E8=87=AA=E5=8A=A8=E8=B5=8B=E5=80=BC=E6=B5=81?=
=?UTF-8?q?=E7=A8=8B=E6=A0=87=E8=AF=86=E4=B8=8E=E6=B5=81=E7=A8=8B=E5=90=8D?=
=?UTF-8?q?=E7=A7=B0=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../src/SimpleProcessDesigner.vue | 26 ++++
.../package/penal/PropertiesPanel.vue | 122 ++++++++++++------
src/views/bpm/model/CreateUpdate.vue | 41 +++++-
src/views/bpm/model/editor/index.vue | 118 +++++++++++++----
src/views/bpm/simple/SimpleModelDesign.vue | 11 +-
5 files changed, 245 insertions(+), 73 deletions(-)
diff --git a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
index 3cefd343..bc952d74 100644
--- a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
+++ b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
@@ -79,6 +79,32 @@ const processNodeTree = ref
()
const errorDialogVisible = ref(false)
let errorNodes: SimpleFlowNode[] = []
+// 添加更新模型的方法
+const updateModel = (key?: string, name?: string) => {
+ if (!processNodeTree.value) {
+ processNodeTree.value = {
+ name: name || '发起人',
+ type: NodeType.START_USER_NODE,
+ id: NodeId.START_USER_NODE_ID,
+ childNode: {
+ id: NodeId.END_EVENT_NODE_ID,
+ name: '结束',
+ type: NodeType.END_EVENT_NODE
+ }
+ }
+ } else if (name) {
+ // 更新现有模型的名称
+ processNodeTree.value.name = name
+ }
+}
+
+// 监听属性变化
+watch([() => props.modelKey, () => props.modelName], ([newKey, newName]) => {
+ if (!props.modelId && newKey && newName) {
+ updateModel(newKey, newName)
+ }
+}, { immediate: true, deep: true })
+
const saveSimpleFlowModel = async (simpleModelNode: SimpleFlowNode) => {
if (!simpleModelNode) {
message.error('模型数据为空')
diff --git a/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue b/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
index 5cd76383..7056403f 100644
--- a/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
+++ b/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
@@ -1,6 +1,6 @@
-
+
@@ -108,24 +108,16 @@ const elementBusinessObject = ref({}) // 元素 businessObject 镜像，提
const conditionFormVisible = ref(false) // 流转条件设置
const formVisible = ref(false) // 表单配置
const bpmnElement = ref()
+const isReady = ref(false)
provide('prefix', props.prefix)
provide('width', props.width)
-const bpmnInstances = () => (window as any)?.bpmnInstances
-// 监听 props.bpmnModeler 然后 initModels
-const unwatchBpmn = watch(
- () => props.bpmnModeler,
- () => {
- // 避免加载时 流程图 并未加载完成
- if (!props.bpmnModeler) {
- console.log('缺少props.bpmnModeler')
- return
- }
-
- console.log('props.bpmnModeler 有值了！！！')
- const w = window as any
- w.bpmnInstances = {
+// 初始化 bpmnInstances
+const initBpmnInstances = () => {
+ if (!props.bpmnModeler) return false
+ try {
+ const instances = {
modeler: props.bpmnModeler,
modeling: props.bpmnModeler.get('modeling'),
moddle: props.bpmnModeler.get('moddle'),
@@ -136,10 +128,46 @@ const unwatchBpmn = watch(
replace: props.bpmnModeler.get('replace'),
selection: props.bpmnModeler.get('selection')
}
+
+ // 检查所有实例是否都存在
+ const allInstancesExist = Object.values(instances).every(instance => instance)
+ if (allInstancesExist) {
+ const w = window as any
+ w.bpmnInstances = instances
+ return true
+ }
+ return false
+ } catch (error) {
+ console.error('初始化 bpmnInstances 失败:', error)
+ return false
+ }
+}
- console.log(bpmnInstances(), 'window.bpmnInstances')
- getActiveElement()
- unwatchBpmn()
+const bpmnInstances = () => (window as any)?.bpmnInstances
+
+// 监听 props.bpmnModeler 然后 initModels
+const unwatchBpmn = watch(
+ () => props.bpmnModeler,
+ async () => {
+ // 避免加载时 流程图 并未加载完成
+ if (!props.bpmnModeler) {
+ console.log('缺少props.bpmnModeler')
+ return
+ }
+
+ try {
+ // 等待 modeler 初始化完成
+ await nextTick()
+ if (initBpmnInstances()) {
+ isReady.value = true
+ await nextTick()
+ getActiveElement()
+ } else {
+ console.error('modeler 实例未完全初始化')
+ }
+ } catch (error) {
+ console.error('初始化失败:', error)
+ }
},
{
immediate: true
@@ -147,6 +175,8 @@ const unwatchBpmn = watch(
)
const getActiveElement = () => {
+ if (!isReady.value || !props.bpmnModeler) return
+
// 初始第一个选中元素 bpmn:Process
initFormOnChanged(null)
props.bpmnModeler.on('import.done', (e) => {
@@ -164,8 +194,11 @@ const getActiveElement = () => {
}
})
}
+
// 初始化数据
const initFormOnChanged = (element) => {
+ if (!isReady.value || !bpmnInstances()) return
+
let activatedElement = element
if (!activatedElement) {
activatedElement =
@@ -173,32 +206,36 @@ const initFormOnChanged = (element) => {
bpmnInstances().elementRegistry.find((el) => el.type === 'bpmn:Collaboration')
}
if (!activatedElement) return
- console.log(`
- ----------
- select element changed:
- id: ${activatedElement.id}
- type: ${activatedElement.businessObject.$type}
- ----------
- `)
- console.log('businessObject: ', activatedElement.businessObject)
- bpmnInstances().bpmnElement = activatedElement
- bpmnElement.value = activatedElement
- elementId.value = activatedElement.id
- elementType.value = activatedElement.type.split(':')[1] || ''
- elementBusinessObject.value = JSON.parse(JSON.stringify(activatedElement.businessObject))
- conditionFormVisible.value = !!(
- elementType.value === 'SequenceFlow' &&
- activatedElement.source &&
- activatedElement.source.type.indexOf('StartEvent') === -1
- )
- formVisible.value = elementType.value === 'UserTask' || elementType.value === 'StartEvent'
+
+ try {
+ console.log(`
+ ----------
+ select element changed:
+ id: ${activatedElement.id}
+ type: ${activatedElement.businessObject.$type}
+ ----------
+ `)
+ console.log('businessObject: ', activatedElement.businessObject)
+ bpmnInstances().bpmnElement = activatedElement
+ bpmnElement.value = activatedElement
+ elementId.value = activatedElement.id
+ elementType.value = activatedElement.type.split(':')[1] || ''
+ elementBusinessObject.value = JSON.parse(JSON.stringify(activatedElement.businessObject))
+ conditionFormVisible.value = !!(
+ elementType.value === 'SequenceFlow' &&
+ activatedElement.source &&
+ activatedElement.source.type.indexOf('StartEvent') === -1
+ )
+ formVisible.value = elementType.value === 'UserTask' || elementType.value === 'StartEvent'
+ } catch (error) {
+ console.error('初始化表单数据失败:', error)
+ }
}
onBeforeUnmount(() => {
const w = window as any
w.bpmnInstances = null
- console.log(props, 'props1')
- console.log(props.bpmnModeler, 'props.bpmnModeler1')
+ isReady.value = false
})
watch(
@@ -208,3 +245,10 @@ watch(
}
)
+
diff --git a/src/views/bpm/model/CreateUpdate.vue b/src/views/bpm/model/CreateUpdate.vue
index 2a03f75d..849be1ed 100644
--- a/src/views/bpm/model/CreateUpdate.vue
+++ b/src/views/bpm/model/CreateUpdate.vue
@@ -274,6 +274,7 @@
{
// 步骤切换处理
const handleStepClick = async (index: number) => {
// 如果是切换到第三步（流程设计），需要校验key和name
- if (index === 2 && !formData.value.id) {
- // 新增时才校验
- if (!formData.value.key || !formData.value.name) {
- message.warning('请先填写流程标识和流程名称')
- return
+ if (index === 2) {
+ if (!formData.value.id) {
+ // 新增时才校验
+ try {
+ await formRef.value?.validateField(['key', 'name'])
+ // 确保数据已经准备好
+ await nextTick()
+ } catch (error) {
+ message.warning('请先填写流程标识和流程名称')
+ return
+ }
}
+ // 确保数据已经准备好再切换
+ await nextTick()
}
-
currentStep.value = index
}
+
+// 添加一个计算属性来判断是否显示设计器
+const showDesigner = computed(() => {
+ return currentStep.value === 2 && Boolean(formData.value.id || (formData.value.key && formData.value.name))
+})
+
+// 监听步骤变化，确保数据准备完成
+watch(() => currentStep.value, async (newStep) => {
+ if (newStep === 2) {
+ await nextTick()
+ }
+}, { immediate: false })
+
+// 在组件卸载时清理
+onBeforeUnmount(() => {
+ const w = window as any
+ if (w.bpmnInstances) {
+ w.bpmnInstances = null
+ }
+})
diff --git a/src/views/bpm/model/CreateUpdate.vue b/src/views/bpm/model/CreateUpdate.vue
index 849be1ed..9dc4e6a0 100644
--- a/src/views/bpm/model/CreateUpdate.vue
+++ b/src/views/bpm/model/CreateUpdate.vue
@@ -550,34 +550,33 @@ const handleDesignSuccess = (bpmnXml?: string) => {
const handleStepClick = async (index: number) => {
// 如果是切换到第三步（流程设计），需要校验key和name
if (index === 2) {
- if (!formData.value.id) {
- // 新增时才校验
- try {
- await formRef.value?.validateField(['key', 'name'])
- // 确保数据已经准备好
- await nextTick()
- } catch (error) {
- message.warning('请先填写流程标识和流程名称')
- return
- }
+ if (!formData.value.key || !formData.value.name) {
+ message.warning('请先填写流程标识和流程名称')
+ return
}
- // 确保数据已经准备好再切换
- await nextTick()
}
+
currentStep.value = index
}
// 添加一个计算属性来判断是否显示设计器
const showDesigner = computed(() => {
- return currentStep.value === 2 && Boolean(formData.value.id || (formData.value.key && formData.value.name))
+ return (
+ currentStep.value === 2 &&
+ Boolean(formData.value.id || (formData.value.key && formData.value.name))
+ )
})
// 监听步骤变化，确保数据准备完成
-watch(() => currentStep.value, async (newStep) => {
- if (newStep === 2) {
- await nextTick()
- }
-}, { immediate: false })
+watch(
+ () => currentStep.value,
+ async (newStep) => {
+ if (newStep === 2) {
+ await nextTick()
+ }
+ },
+ { immediate: false }
+)
// 在组件卸载时清理
onBeforeUnmount(() => {