From 6cf3de01660ba785c6b0722baf2c6cde286379d6 Mon Sep 17 00:00:00 2001 From: GoldenZqqq <1361001127@qq.com> Date: Fri, 27 Dec 2024 09:43:32 +0800 Subject: [PATCH 1/6] =?UTF-8?q?feat:=20=E6=A0=B7=E5=BC=8F=E5=B8=83?= =?UTF-8?q?=E5=B1=80=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/bpm/model/form/BasicInfo.vue | 10 ++-------- src/views/bpm/model/form/index.vue | 4 ++-- 2 files changed, 4 insertions(+), 10 deletions(-) diff --git a/src/views/bpm/model/form/BasicInfo.vue b/src/views/bpm/model/form/BasicInfo.vue index 532ec786..0359ea89 100644 --- a/src/views/bpm/model/form/BasicInfo.vue +++ b/src/views/bpm/model/form/BasicInfo.vue @@ -1,15 +1,9 @@ { w.bpmnInstances = null } }) + +/** 获取XML字符串 */ +const saveXML = async () => { + if (!modeler.value) { + return { xml: undefined } + } + try { + return await modeler.value.saveXML({ format: true }) + } catch (error) { + console.error('获取XML失败:', error) + return { xml: undefined } + } +} + +/** 获取SVG字符串 */ +const saveSVG = async () => { + if (!modeler.value) { + return { svg: undefined } + } + try { + return await modeler.value.saveSVG() + } catch (error) { + console.error('获取SVG失败:', error) + return { svg: undefined } + } +} + +/** 刷新视图 */ +const refresh = () => { + if (processDesigner.value?.refresh) { + processDesigner.value.refresh() + } +} + +// 暴露必要的属性和方法给父组件 +defineExpose({ + modeler, + isModelerReady, + saveXML, + saveSVG, + refresh +}) diff --git a/src/views/bpm/model/form/ProcessDesign.vue b/src/views/bpm/model/form/ProcessDesign.vue index 2e8f94c9..11384370 100644 --- a/src/views/bpm/model/form/ProcessDesign.vue +++ b/src/views/bpm/model/form/ProcessDesign.vue @@ -7,6 +7,7 @@ :model-key="modelData.key" :model-name="modelData.name" :value="modelData.bpmnXml" + ref="bpmnEditorRef" @success="handleDesignSuccess" /> @@ -19,6 +20,7 @@ :model-key="modelData.key" :model-name="modelData.name" :value="modelData.bpmnXml" + ref="simpleEditorRef" @success="handleDesignSuccess" /> @@ -38,7 +40,8 @@ const props = defineProps({ const emit = defineEmits(['update:modelValue', 'success']) -const xmlString = ref() +const bpmnEditorRef = ref() +const simpleEditorRef = ref() // 创建本地数据副本 const modelData = computed({ @@ -46,21 +49,56 @@ const modelData = computed({ set: (val) => emit('update:modelValue', val) }) -// 监听modelValue变化,确保XML数据同步 -watch( - () => props.modelValue, - (newVal) => { - if (newVal?.bpmnXml) { - xmlString.value = newVal.bpmnXml +/** 表单校验 */ +const validate = async () => { + try { + // 根据流程类型获取对应的编辑器引用 + const editorRef = + modelData.value.type === BpmModelType.BPMN ? bpmnEditorRef.value : simpleEditorRef.value + if (!editorRef) { + throw new Error('流程设计器未初始化') } - }, - { immediate: true, deep: true } -) + + // 获取最新的XML数据 + const bpmnXml = await getXmlString() + console.warn(bpmnXml, 'bpmnXml') + if (!bpmnXml) { + throw new Error('请设计流程') + } + + return true + } catch (error) { + throw error + } +} + +/** 获取当前XML字符串 */ +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() + return xml + } + } else { + // Simple设计器 + if (simpleEditorRef.value) { + const flowData = simpleEditorRef.value.getCurrentFlowData() + return flowData ? JSON.stringify(flowData) : undefined + } + } + return undefined + } catch (error) { + console.error('获取流程数据失败:', error) + return undefined + } +} /** 处理设计器保存成功 */ const handleDesignSuccess = (bpmnXml?: string) => { if (bpmnXml) { - xmlString.value = bpmnXml modelData.value = { ...modelData.value, bpmnXml @@ -69,34 +107,11 @@ const handleDesignSuccess = (bpmnXml?: string) => { } } -/** 表单校验 */ -const validate = async () => { - // 获取最新的XML数据 - const currentXml = xmlString.value || modelData.value?.bpmnXml - - // 如果是修改场景且有XML数据（无论是新的还是原有的） - if (modelData.value.id && currentXml) { - return true - } - - // 新增场景必须有XML数据 - if (!currentXml) { - throw new Error('请设计流程') - } - - return true -} - /** 是否显示设计器 */ const showDesigner = computed(() => { return Boolean(modelData.value?.key && modelData.value?.name) }) -/** 获取当前XML字符串 */ -const getXmlString = () => { - return xmlString.value || modelData.value?.bpmnXml || '' -} - defineExpose({ validate, getXmlString diff --git a/src/views/bpm/model/form/index.vue b/src/views/bpm/model/form/index.vue index b0aef58c..0b55e483 100644 --- a/src/views/bpm/model/form/index.vue +++ b/src/views/bpm/model/form/index.vue @@ -7,7 +7,7 @@ >
- + {{ formData.name || '创建流程' }} @@ -322,6 +322,14 @@ const handleDesignSuccess = (bpmnXml?: string) => { } } +/** 返回列表页 */ +const handleBack = () => { + // 先删除当前页签 + delView(unref(router.currentRoute)) + // 跳转到列表页 + router.push({ name: 'BpmModel' }) +} + /** 初始化 */ onMounted(async () => { await initData() From a8c1fd4473364f3a391f7f1ddd98c9050d869531 Mon Sep 17 00:00:00 2001 From: GoldenZqqq <1361001127@qq.com> Date: Fri, 27 Dec 2024 14:58:43 +0800 Subject: [PATCH 4/6] =?UTF-8?q?feat:=20Simple=E8=AE=BE=E8=AE=A1=E5=99=A8?= =?UTF-8?q?=E5=90=8C=E6=AD=A5=E8=8E=B7=E5=8F=96bpmnXml=E6=95=B0=E6=8D=AE?= =?UTF-8?q?=E7=9B=B8=E5=85=B3=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/SimpleProcessDesigner.vue | 18 ++++++++++++- .../src/SimpleProcessModel.vue | 17 +++++++----- src/views/bpm/model/form/ProcessDesign.vue | 20 +++++++++++--- src/views/bpm/model/form/index.vue | 26 ++++++++++++++++--- src/views/bpm/simple/SimpleModelDesign.vue | 17 ++++++++++++ 5 files changed, 84 insertions(+), 14 deletions(-) diff --git a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue index bc952d74..a8e1dd4b 100644 --- a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue +++ b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue @@ -1,6 +1,7 @@