feat: Simple设计器同步获取bpmnXml数据相关逻辑

Author: GoldenZqqq

src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue

@@ -1,6 +1,7 @@
 <template>
   <div v-loading="loading" class="overflow-auto">
     <SimpleProcessModel
+      ref="simpleProcessModelRef"
       v-if="processNodeTree"
       :flow-node="processNodeTree"
       :readonly="false"
@@ -134,7 +135,7 @@ const saveSimpleFlowModel = async (simpleModelNode: SimpleFlowNode) => {
   }
 }
 
-// 校验节点设置。 暂时以 showText 为空 未节点错误配置
+// ���验节点设置。 暂时以 showText 为空 未节点错误配置
 const validateNode = (node: SimpleFlowNode | undefined, errorNodes: SimpleFlowNode[]) => {
   if (node) {
     const { type, showText, conditionNodes } = node
@@ -225,4 +226,19 @@ onMounted(async () => {
     loading.value = false
   }
 })
+
+const simpleProcessModelRef = ref()
+
+/** 获取当前流程数据 */
+const getCurrentFlowData = async () => {
+  if (simpleProcessModelRef.value) {
+    return await simpleProcessModelRef.value.getCurrentFlowData()
+  }
+  return undefined
+}
+
+defineExpose({
+  getCurrentFlowData,
+  updateModel
+})
 </script>

src/components/SimpleProcessDesignerV2/src/SimpleProcessModel.vue

@@ -125,14 +125,19 @@ const validateNode = (node: SimpleFlowNode | undefined, errorNodes: SimpleFlowNo
 }
 
 /** 获取当前流程数据 */
-const getCurrentFlowData = () => {
-  errorNodes = []
-  validateNode(processNodeTree.value, errorNodes)
-  if (errorNodes.length > 0) {
-    errorDialogVisible.value = true
+const getCurrentFlowData = async () => {
+  try {
+    errorNodes = []
+    validateNode(processNodeTree.value, errorNodes)
+    if (errorNodes.length > 0) {
+      errorDialogVisible.value = true
+      return undefined
+    }
+    return processNodeTree.value
+  } catch (error) {
+    console.error('获取流程数据失败:', error)
     return undefined
   }
-  return processNodeTree.value
 }
 
 defineExpose({

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

@@ -76,17 +76,31 @@ const validate = async () => {
 const getXmlString = async () => {
   try {
     if (modelData.value.type === BpmModelType.BPMN) {
-      console.warn('bpmnEditorRef.value', bpmnEditorRef.value)
       // BPMN设计器
       if (bpmnEditorRef.value) {
         const { xml } = await bpmnEditorRef.value.saveXML()
+        if (xml) {
+          // 更新本地数据
+          modelData.value = {
+            ...modelData.value,
+            bpmnXml: xml
+          }
+        }
         return xml
       }
     } else {
       // Simple设计器
       if (simpleEditorRef.value) {
-        const flowData = simpleEditorRef.value.getCurrentFlowData()
-        return flowData ? JSON.stringify(flowData) : undefined
+        const flowData = await simpleEditorRef.value.getCurrentFlowData()
+        if (flowData) {
+          const jsonData = JSON.stringify(flowData)
+          // 更新本地数据
+          modelData.value = {
+            ...modelData.value,
+            bpmnXml: jsonData
+          }
+          return jsonData
+        }
       }
     }
     return undefined

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

@@ -213,8 +213,16 @@ const handleSave = async () => {
     await validateAllSteps()
 
     // 获取最新的流程设计数据
-    const bpmnXml = processDesignRef.value?.getXmlString()
-    formData.value.bpmnXml = bpmnXml
+    const bpmnXml = await processDesignRef.value?.getXmlString()
+    if (!bpmnXml) {
+      throw new Error('获取流程数据失败')
+    }
+
+    // 更新表单数据
+    formData.value = {
+      ...formData.value,
+      bpmnXml: bpmnXml
+    }
 
     if (formData.value.id) {
       // 修改场景
@@ -245,6 +253,8 @@ const handleSave = async () => {
           params: { id: formData.value.id }
         })
       } catch {
+        // 先删除当前页签
+        delView(unref(router.currentRoute))
         // 用户点击返回列表
         await router.push({ name: 'BpmModel' })
       }
@@ -267,8 +277,16 @@ const handleDeploy = async () => {
     await validateAllSteps()
 
     // 获取最新的流程设计数据
-    const bpmnXml = processDesignRef.value?.getXmlString()
-    formData.value.bpmnXml = bpmnXml
+    const bpmnXml = await processDesignRef.value?.getXmlString()
+    if (!bpmnXml) {
+      throw new Error('获取流程数据失败')
+    }
+
+    // 更新表单数据
+    formData.value = {
+      ...formData.value,
+      bpmnXml: bpmnXml
+    }
 
     // 先保存所有数据
     if (formData.value.id) {

src/views/bpm/simple/SimpleModelDesign.vue

@@ -36,5 +36,22 @@ watch([() => props.modelKey, () => props.modelName], ([newKey, newName]) => {
 const handleSuccess = (data?: any) => {
   emit('success', data)
 }
+
+/** 获取当前流程数据 */
+const getCurrentFlowData = async () => {
+  try {
+    if (designerRef.value) {
+      return await designerRef.value.getCurrentFlowData()
+    }
+    return undefined
+  } catch (error) {
+    console.error('获取流程数据失败:', error)
+    return undefined
+  }
+}
+
+defineExpose({
+  getCurrentFlowData
+})
 </script>
 <style lang="scss" scoped></style>