1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<template>
  <ContentWrap :bodyStyle="{ padding: '20px 16px' }">
    <SimpleProcessDesigner
      :model-id="modelId"
      :model-key="modelKey"
      :model-name="modelName"
      :value="currentValue"
      @success="handleSuccess"
      @init-finished="handleInit"
      :start-user-ids="startUserIds"
      ref="designerRef"
    />
  </ContentWrap>
</template>
<script setup lang="ts">
import { SimpleProcessDesigner } from '@/components/SimpleProcessDesignerV2/src/'
 
defineOptions({
  name: 'SimpleModelDesign'
})
 
const props = defineProps<{
  modelId?: string
  modelKey?: string
  modelName?: string
  value?: string
  startUserIds?: number[]
}>()
 
const emit = defineEmits(['success', 'init-finished'])
const designerRef = ref()
const isInitialized = ref(false)
const currentValue = ref('')
 
// 初始化或更新当前值
const initOrUpdateValue = async () => {
  console.log('initOrUpdateValue', props.value)
  if (props.value) {
    currentValue.value = props.value
    // 如果设计器已经初始化，立即加载数据
    if (isInitialized.value && designerRef.value) {
      try {
        await designerRef.value.loadProcessData(props.value)
        await nextTick()
        if (designerRef.value.refresh) {
          await designerRef.value.refresh()
        }
      } catch (error) {
        console.error('加载流程数据失败:', error)
      }
    }
  }
}
 
// 监听属性变化
watch(
  [() => props.modelKey, () => props.modelName, () => props.value],
  async ([newKey, newName, newValue], [oldKey, oldName, oldValue]) => {
    if (designerRef.value && isInitialized.value) {
      try {
        if (newKey && newName && (newKey !== oldKey || newName !== oldName)) {
          await designerRef.value.updateModel(newKey, newName)
        }
        if (newValue && newValue !== oldValue) {
          currentValue.value = newValue
          await designerRef.value.loadProcessData(newValue)
          await nextTick()
          if (designerRef.value.refresh) {
            await designerRef.value.refresh()
          }
        }
      } catch (error) {
        console.error('更新流程数据失败:', error)
      }
    }
  },
  { deep: true, immediate: true }
)
 
// 初始化完成回调
const handleInit = async () => {
  try {
    isInitialized.value = true
    emit('init-finished')
 
    // 等待下一个tick，确保设计器已经准备好
    await nextTick()
 
    // 初始化完成后，设置初始值
    if (props.modelKey && props.modelName) {
      await designerRef.value.updateModel(props.modelKey, props.modelName)
    }
    if (props.value) {
      currentValue.value = props.value
      await designerRef.value.loadProcessData(props.value)
      // 再次刷新确保数据正确加载
      await nextTick()
      if (designerRef.value.refresh) {
        await designerRef.value.refresh()
      }
    }
  } catch (error) {
    console.error('初始化流程数据失败:', error)
  }
}
 
// 修改成功回调
const handleSuccess = (data?: any) => {
  console.warn('handleSuccess', data)
  if (data && data !== currentValue.value) {
    currentValue.value = data
    emit('success', data)
  }
}
 
/** 获取当前流程数据 */
const getCurrentFlowData = async () => {
  try {
    if (designerRef.value) {
      const data = await designerRef.value.getCurrentFlowData()
      if (data) {
        currentValue.value = data
      }
      return data
    }
    return currentValue.value || undefined
  } catch (error) {
    console.error('获取流程数据失败:', error)
    return currentValue.value || undefined
  }
}
 
// 组件创建时初始化数据
onMounted(() => {
  initOrUpdateValue()
})
 
// 组件卸载前保存数据
onBeforeUnmount(async () => {
  try {
    const data = await getCurrentFlowData()
    if (data) {
      emit('success', data)
    }
  } catch (error) {
    console.error('保存数据失败:', error)
  }
})
 
defineExpose({
  getCurrentFlowData,
  refresh: () => designerRef.value?.refresh?.()
})
</script>
<style lang="scss" scoped></style>