SimpleModelDesign.vue 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <template>
  2. <ContentWrap :bodyStyle="{ padding: '20px 16px' }">
  3. <SimpleProcessDesigner
  4. :model-id="modelId"
  5. :model-key="modelKey"
  6. :model-name="modelName"
  7. @success="handleSuccess"
  8. ref="designerRef"
  9. />
  10. </ContentWrap>
  11. </template>
  12. <script setup lang="ts">
  13. import { SimpleProcessDesigner } from '@/components/SimpleProcessDesignerV2/src/'
  14. defineOptions({
  15. name: 'SimpleModelDesign'
  16. })
  17. const props = defineProps<{
  18. modelId?: string
  19. modelKey?: string
  20. modelName?: string
  21. }>()
  22. const emit = defineEmits(['success'])
  23. const designerRef = ref()
  24. // 监听属性变化
  25. watch([() => props.modelKey, () => props.modelName], ([newKey, newName]) => {
  26. if (designerRef.value && newKey && newName) {
  27. designerRef.value.updateModel(newKey, newName)
  28. }
  29. }, { immediate: true, deep: true })
  30. // 修改成功回调
  31. const handleSuccess = (data?: any) => {
  32. emit('success', data)
  33. }
  34. /** 获取当前流程数据 */
  35. const getCurrentFlowData = async () => {
  36. try {
  37. if (designerRef.value) {
  38. return await designerRef.value.getCurrentFlowData()
  39. }
  40. return undefined
  41. } catch (error) {
  42. console.error('获取流程数据失败:', error)
  43. return undefined
  44. }
  45. }
  46. defineExpose({
  47. getCurrentFlowData
  48. })
  49. </script>
  50. <style lang="scss" scoped></style>