From 221918bba28d2384d03c596a68256d7832e4a0e0 Mon Sep 17 00:00:00 2001
From: 潘志宝 <979469083@qq.com>
Date: 星期一, 06 一月 2025 13:30:50 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/views/bpm/model/form/ProcessDesign.vue | 235 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 235 insertions(+), 0 deletions(-)
diff --git a/src/views/bpm/model/form/ProcessDesign.vue b/src/views/bpm/model/form/ProcessDesign.vue
new file mode 100644
index 0000000..40d35ab
--- /dev/null
+++ b/src/views/bpm/model/form/ProcessDesign.vue
@@ -0,0 +1,235 @@
+<template>
+ <!-- BPMN设计器 -->
+ <template v-if="modelData.type === BpmModelType.BPMN">
+ <BpmModelEditor
+ v-if="showDesigner"
+ :model-id="modelData.id"
+ :model-key="modelData.key"
+ :model-name="modelData.name"
+ :value="currentBpmnXml"
+ ref="bpmnEditorRef"
+ @success="handleDesignSuccess"
+ @init-finished="handleEditorInit"
+ />
+ </template>
+
+ <!-- Simple设计器 -->
+ <template v-else>
+ <SimpleModelDesign
+ v-if="showDesigner"
+ :model-id="modelData.id"
+ :model-key="modelData.key"
+ :model-name="modelData.name"
+ :start-user-ids="modelData.startUserIds"
+ :value="currentSimpleModel"
+ ref="simpleEditorRef"
+ @success="handleDesignSuccess"
+ @init-finished="handleEditorInit"
+ />
+ </template>
+</template>
+
+<script lang="ts" setup>
+import { BpmModelType } from '@/utils/constants'
+import BpmModelEditor from '../editor/index.vue'
+import SimpleModelDesign from '../../simple/SimpleModelDesign.vue'
+
+const props = defineProps({
+ modelValue: {
+ type: Object,
+ required: true
+ }
+})
+
+const emit = defineEmits(['update:modelValue', 'success'])
+
+const bpmnEditorRef = ref()
+const simpleEditorRef = ref()
+const isEditorInitialized = ref(false)
+
+// 创建本地数据副本
+const modelData = computed({
+ get: () => props.modelValue,
+ set: (val) => emit('update:modelValue', val)
+})
+
+// 保存当前的流程XML或数据
+const currentBpmnXml = ref('')
+const currentSimpleModel = ref('')
+
+// 初始化或更新当前的XML数据
+const initOrUpdateXmlData = () => {
+ if (modelData.value) {
+ if (modelData.value.type === BpmModelType.BPMN) {
+ currentBpmnXml.value = modelData.value.bpmnXml || ''
+ } else {
+ currentSimpleModel.value = modelData.value.simpleModel || ''
+ }
+ }
+}
+
+// 监听modelValue的变化，更新数据
+watch(
+ () => props.modelValue,
+ (newVal) => {
+ if (newVal) {
+ if (newVal.type === BpmModelType.BPMN) {
+ if (newVal.bpmnXml && newVal.bpmnXml !== currentBpmnXml.value) {
+ currentBpmnXml.value = newVal.bpmnXml
+ // 如果编辑器已经初始化，刷新视图
+ if (isEditorInitialized.value && bpmnEditorRef.value?.refresh) {
+ nextTick(() => {
+ bpmnEditorRef.value.refresh()
+ })
+ }
+ }
+ } else {
+ if (newVal.simpleModel && newVal.simpleModel !== currentSimpleModel.value) {
+ currentSimpleModel.value = newVal.simpleModel
+ // 如果编辑器已经初始化，刷新视图
+ if (isEditorInitialized.value && simpleEditorRef.value?.refresh) {
+ nextTick(() => {
+ simpleEditorRef.value.refresh()
+ })
+ }
+ }
+ }
+ }
+ },
+ { immediate: true, deep: true }
+)
+
+/** 编辑器初始化完成的回调 */
+const handleEditorInit = async () => {
+ isEditorInitialized.value = true
+
+ // 等待下一个tick，确保编辑器已经准备好
+ await nextTick()
+
+ // 初始化完成后，设置初始值
+ if (modelData.value.type === BpmModelType.BPMN) {
+ if (modelData.value.bpmnXml) {
+ currentBpmnXml.value = modelData.value.bpmnXml
+ if (bpmnEditorRef.value?.refresh) {
+ await nextTick()
+ bpmnEditorRef.value.refresh()
+ }
+ }
+ } else {
+ if (modelData.value.simpleModel) {
+ currentSimpleModel.value = modelData.value.simpleModel
+ if (simpleEditorRef.value?.refresh) {
+ await nextTick()
+ simpleEditorRef.value.refresh()
+ }
+ }
+ }
+}
+
+/** 获取当前流程数据 */
+const getProcessData = async () => {
+ try {
+ if (modelData.value.type === BpmModelType.BPMN) {
+ if (!bpmnEditorRef.value || !isEditorInitialized.value) {
+ return currentBpmnXml.value || undefined
+ }
+ const { xml } = await bpmnEditorRef.value.saveXML()
+ if (xml) {
+ currentBpmnXml.value = xml
+ return xml
+ }
+ } else {
+ if (!simpleEditorRef.value || !isEditorInitialized.value) {
+ return currentSimpleModel.value || undefined
+ }
+ const flowData = await simpleEditorRef.value.getCurrentFlowData()
+ if (flowData) {
+ currentSimpleModel.value = flowData
+ return flowData
+ }
+ }
+ return modelData.value.type === BpmModelType.BPMN
+ ? currentBpmnXml.value
+ : currentSimpleModel.value
+ } catch (error) {
+ console.error('获取流程数据失败:', error)
+ return modelData.value.type === BpmModelType.BPMN
+ ? currentBpmnXml.value
+ : currentSimpleModel.value
+ }
+}
+
+/** 表单校验 */
+const validate = async () => {
+ try {
+ // 获取最新的流程数据
+ const processData = await getProcessData()
+ if (!processData) {
+ throw new Error('请设计流程')
+ }
+ return true
+ } catch (error) {
+ throw error
+ }
+}
+
+/** 处理设计器保存成功 */
+const handleDesignSuccess = async (data?: any) => {
+ if (data) {
+ if (modelData.value.type === BpmModelType.BPMN) {
+ currentBpmnXml.value = data
+ } else {
+ currentSimpleModel.value = data
+ }
+
+ // 创建新的对象以触发响应式更新
+ const newModelData = {
+ ...modelData.value,
+ bpmnXml: modelData.value.type === BpmModelType.BPMN ? data : null,
+ simpleModel: modelData.value.type === BpmModelType.BPMN ? null : data
+ }
+
+ // 使用emit更新父组件的数据
+ await nextTick()
+ emit('update:modelValue', newModelData)
+ emit('success', data)
+ }
+}
+
+/** 是否显示设计器 */
+const showDesigner = computed(() => {
+ return Boolean(modelData.value?.key && modelData.value?.name)
+})
+
+// 组件创建时初始化数据
+onMounted(() => {
+ initOrUpdateXmlData()
+})
+
+// 组件卸载前保存数据
+onBeforeUnmount(async () => {
+ try {
+ // 获取并保存最新的流程数据
+ const data = await getProcessData()
+ if (data) {
+ // 创建新的对象以触发响应式更新
+ const newModelData = {
+ ...modelData.value,
+ bpmnXml: modelData.value.type === BpmModelType.BPMN ? data : null,
+ simpleModel: modelData.value.type === BpmModelType.BPMN ? null : data
+ }
+
+ // 使用emit更新父组件的数据
+ await nextTick()
+ emit('update:modelValue', newModelData)
+ }
+ } catch (error) {
+ console.error('保存数据失败:', error)
+ }
+})
+
+defineExpose({
+ validate,
+ getProcessData
+})
+</script>
--
Gitblit v1.9.3