fix: 修复第三步骤流程设计中点击保存模型xml保存无效问题

Author: GoldenZqqq

src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue

@@ -315,6 +315,20 @@ const props = defineProps({
   }
 })
 
+// 监听value变化,重新加载流程图
+watch(() => props.value, (newValue) => {
+  if (newValue && bpmnModeler) {
+    createNewDiagram(newValue)
+  }
+}, { immediate: true })
+
+// 监听processId和processName变化
+watch([() => props.processId, () => props.processName], ([newId, newName]) => {
+  if (newId && newName && !props.value) {
+    createNewDiagram(null)
+  }
+}, { immediate: true })
+
 provide('configGlobal', props)
 let bpmnModeler: any = null
 const defaultZoom = ref(1)
@@ -666,18 +680,17 @@ const previewProcessJson = () => {
 }
 /* ------------------------------------------------ 芋道源码 methods ------------------------------------------------------ */
 const processSave = async () => {
-  // console.log(bpmnModeler, 'bpmnModelerbpmnModelerbpmnModelerbpmnModeler')
-  const { err, xml } = await bpmnModeler.saveXML()
-  // console.log(err, 'errerrerrerrerr')
-  // console.log(xml, 'xmlxmlxmlxmlxml')
-  // 读取异常时抛出异常
-  if (err) {
-    // this.$modal.msgError('保存模型失败，请重试！')
-    alert('保存模型失败，请重试！')
-    return
+  try {
+    const { err, xml } = await bpmnModeler.saveXML()
+    if (err) {
+      ElMessage.error('保存流程设计失败，请重试！')
+      return
+    }
+    emit('save', xml)
+  } catch (error) {
+    console.error(error)
+    ElMessage.error('保存流程设计失败，请重试！')
   }
-  // 触发 save 事件
-  emit('save', xml)
 }
 /** 高亮显示 */
 // const highlightedCode = (previewType, previewResult) => {

src/views/bpm/model/form/ProcessDesign.vue

@@ -6,6 +6,7 @@
       :model-id="modelData.id"
       :model-key="modelData.key"
       :model-name="modelData.name"
+      :value="modelData.bpmnXml"
       @success="handleDesignSuccess"
     />
   </template>
@@ -17,6 +18,7 @@
       :model-id="modelData.id"
       :model-key="modelData.key"
       :model-name="modelData.name"
+      :value="modelData.bpmnXml"
       @success="handleDesignSuccess"
     />
   </template>
@@ -44,6 +46,13 @@ const modelData = computed({
   set: (val) => emit('update:modelValue', val)
 })
 
+// 监听modelValue变化,确保XML数据同步
+watch(() => props.modelValue, (newVal) => {
+  if (newVal.bpmnXml) {
+    xmlString.value = newVal.bpmnXml
+  }
+}, { immediate: true, deep: true })
+
 /** 处理设计器保存成功 */
 const handleDesignSuccess = (bpmnXml?: string) => {
   if (bpmnXml) {
@@ -52,23 +61,25 @@ const handleDesignSuccess = (bpmnXml?: string) => {
       ...modelData.value,
       bpmnXml
     })
+    emit('success', bpmnXml)
   }
-  emit('success', bpmnXml)
 }
 
 /** 表单校验 */
 const validate = async () => {
   if (!xmlString.value) {
     throw new Error('请设计流程')
   }
+  return true
 }
 
 /** 是否显示设计器 */
 const showDesigner = computed(() => {
-  return Boolean(modelData.value.id || (modelData.value.key && modelData.value.name))
+  return Boolean(modelData.value.key && modelData.value.name)
 })
 
 defineExpose({
-  validate
+  validate,
+  getXmlString: () => xmlString.value
 })
 </script> 

src/views/bpm/model/form/index.vue

@@ -173,6 +173,19 @@ const initData = async () => {
 /** 保存操作 */
 const handleSave = async () => {
   try {
+    // 保存前确保当前步骤的数据已经验证通过
+    if (typeof steps[currentStep.value].validator === 'function') {
+      await steps[currentStep.value].validator()
+    }
+    
+    // 如果是第三步，需要先获取最新的流程设计数据
+    if (currentStep.value === 2) {
+      const bpmnXml = processDesignRef.value?.getXmlString()
+      if (bpmnXml) {
+        formData.value.bpmnXml = bpmnXml
+      }
+    }
+    
     if (formData.value.id) {
       await ModelApi.updateModel(formData.value)
       message.success('修改成功')
@@ -183,6 +196,7 @@ const handleSave = async () => {
     }
   } catch (error) {
     console.error('保存失败:', error)
+    message.error(error.message || '保存失败')
   }
 }
 
@@ -196,6 +210,13 @@ const handleDeploy = async () => {
         await step.validator()
       }
     }
+    // 如果是第三步，需要先获取最新的流程设计数据
+    if (currentStep.value === 2) {
+      const bpmnXml = processDesignRef.value?.getXmlString()
+      if (bpmnXml) {
+        formData.value.bpmnXml = bpmnXml
+      }
+    }
     await handleSave()
     await ModelApi.deployModel(formData.value.id)
     message.success('发布成功')
@@ -250,8 +271,6 @@ const handleDesignSuccess = (bpmnXml?: string) => {
   if (bpmnXml) {
     formData.value.bpmnXml = bpmnXml
   }
-  handleSave() // 自动保存
-  message.success('保存成功')
 }
 
 /** 初始化 */