fix: 区分兼容bpmn设计器与simple设计器不同传参与不同处理方式

This commit is contained in:
GoldenZqqq
2024-12-27 15:22:02 +08:00
parent 3ba5cb460c
commit eeda821b74
2 changed files with 77 additions and 68 deletions

View File

@ -49,57 +49,23 @@ const modelData = computed({
set: (val) => emit('update:modelValue', val)
})
/** 表单校验 */
const validate = async () => {
try {
// 根据流程类型获取对应的编辑器引用
const editorRef =
modelData.value.type === BpmModelType.BPMN ? bpmnEditorRef.value : simpleEditorRef.value
if (!editorRef) {
throw new Error('流程设计器未初始化')
}
// 获取最新的XML数据
const bpmnXml = await getXmlString()
console.warn(bpmnXml, 'bpmnXml')
if (!bpmnXml) {
throw new Error('请设计流程')
}
return true
} catch (error) {
throw error
}
}
/** 获取当前XML字符串 */
const getXmlString = async () => {
/** 获取当前流程数据 */
const getProcessData = async () => {
try {
if (modelData.value.type === BpmModelType.BPMN) {
// BPMN设计器
if (bpmnEditorRef.value) {
const { xml } = await bpmnEditorRef.value.saveXML()
if (xml) {
// 更新本地数据
modelData.value = {
...modelData.value,
bpmnXml: xml
}
return xml
}
return xml
}
} else {
// Simple设计器
if (simpleEditorRef.value) {
const flowData = await simpleEditorRef.value.getCurrentFlowData()
if (flowData) {
const jsonData = JSON.stringify(flowData)
// 更新本地数据
modelData.value = {
...modelData.value,
bpmnXml: jsonData
}
return jsonData
return flowData // 直接返回流程数据对象,不需要转换为字符串
}
}
}
@ -110,14 +76,45 @@ const getXmlString = async () => {
}
}
/** 处理设计器保存成功 */
const handleDesignSuccess = (bpmnXml?: string) => {
if (bpmnXml) {
modelData.value = {
...modelData.value,
bpmnXml
/** 表单校验 */
const validate = async () => {
try {
// 根据流程类型获取对应的编辑器引用
const editorRef =
modelData.value.type === BpmModelType.BPMN ? bpmnEditorRef.value : simpleEditorRef.value
if (!editorRef) {
throw new Error('流程设计器未初始化')
}
emit('success', bpmnXml)
// 获取最新的流程数据
const processData = await getProcessData()
if (!processData) {
throw new Error('请设计流程')
}
return true
} catch (error) {
throw error
}
}
/** 处理设计器保存成功 */
const handleDesignSuccess = (data?: any) => {
if (data) {
if (modelData.value.type === BpmModelType.BPMN) {
modelData.value = {
...modelData.value,
bpmnXml: data,
simpleModel: null
}
} else {
modelData.value = {
...modelData.value,
bpmnXml: null,
simpleModel: data
}
}
emit('success', data)
}
}
@ -128,6 +125,6 @@ const showDesigner = computed(() => {
defineExpose({
validate,
getXmlString
getProcessData
})
</script>

View File

@ -177,7 +177,7 @@ const validateAllSteps = async () => {
currentStep.value = 0
throw new Error('请完善基本信息')
}
// 表单设计校验
await formDesignRef.value?.validate()
if (formData.value.formType === 10 && !formData.value.formId) {
@ -191,15 +191,15 @@ const validateAllSteps = async () => {
currentStep.value = 1
throw new Error('请完善自定义表单信息')
}
// 流程设计校验
await processDesignRef.value?.validate()
const bpmnXml = processDesignRef.value?.getXmlString()
if (!bpmnXml) {
const processData = await processDesignRef.value?.getProcessData()
if (!processData) {
currentStep.value = 2
throw new Error('请设计流程')
}
return true
} catch (error) {
throw error
@ -211,22 +211,28 @@ const handleSave = async () => {
try {
// 保存前校验所有步骤的数据
await validateAllSteps()
// 获取最新的流程设计数据
const bpmnXml = await processDesignRef.value?.getXmlString()
if (!bpmnXml) {
const processData = await processDesignRef.value?.getProcessData()
if (!processData) {
throw new Error('获取流程数据失败')
}
// 更新表单数据
formData.value = {
...formData.value,
bpmnXml: bpmnXml
const modelData = {
...formData.value
}
if (formData.value.type === BpmModelType.BPMN) {
modelData.bpmnXml = processData
modelData.simpleModel = null
} else {
modelData.bpmnXml = null
modelData.simpleModel = processData // 直接使用流程数据对象
}
if (formData.value.id) {
// 修改场景
await ModelApi.updateModel(formData.value)
await ModelApi.updateModel(modelData)
message.success('修改成功')
// 询问是否发布流程
try {
@ -238,7 +244,7 @@ const handleSave = async () => {
}
} else {
// 新增场景
const result = await ModelApi.createModel(formData.value)
const result = await ModelApi.createModel(modelData)
formData.value.id = result
message.success('新增成功')
try {
@ -275,24 +281,30 @@ const handleDeploy = async () => {
// 校验所有步骤
await validateAllSteps()
// 获取最新的流程设计数据
const bpmnXml = await processDesignRef.value?.getXmlString()
if (!bpmnXml) {
const processData = await processDesignRef.value?.getProcessData()
if (!processData) {
throw new Error('获取流程数据失败')
}
// 更新表单数据
formData.value = {
...formData.value,
bpmnXml: bpmnXml
const modelData = {
...formData.value
}
if (formData.value.type === BpmModelType.BPMN) {
modelData.bpmnXml = processData
modelData.simpleModel = null
} else {
modelData.bpmnXml = null
modelData.simpleModel = processData // 直接使用流程数据对象
}
// 先保存所有数据
if (formData.value.id) {
await ModelApi.updateModel(formData.value)
await ModelApi.updateModel(modelData)
} else {
const result = await ModelApi.createModel(formData.value)
const result = await ModelApi.createModel(modelData)
formData.value.id = result.id
}