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