FiDA_Front/src/components/Canvas/FlowCanvas/index.vue

<template>
	<fullscreen-dialog v-model="dialogVisible" @close="close" hide-destroy>
		<flow-canvas ref="flowCanvasRef" :config="config" @exportFlow="exportFlow" />
	</fullscreen-dialog>
</template>

<script setup lang="ts">
	import FullscreenDialog from '../components/fullscreen-dialog.vue'
	import flowCanvas from './flow-canvas.vue'
	import { ref } from 'vue'
	import { getSketchFlowCanvas, putSketchFlowCanvas } from '@/api/flow-canvas'

	const dialogVisible = ref(false)
	const config = ref({}) as any
	const flowCanvasRef = ref<any>()
	const open = async (options) => {
		let json = []
		await new Promise((resolve) => {
			getSketchFlowCanvas({ id: options.imgId }).then((res:any) => {
				if (res) {
					json = JSON.parse(res)
				}
				resolve(true)
			}).catch(() => {
				resolve(true)
			})
		})
		config.value = options || {}
		config.value.json = json
		dialogVisible.value = true
	}
	const exportFlow = async (str) => {
		if(!config.value.imgId || !str)return
		await new Promise((resolve) => {
			putSketchFlowCanvas({ 
				id: config.value.imgId,
				canvasData: str }).then(() => {
				resolve(true)
			}).catch(() => {
				resolve(true)
			})
		})
	}

	const close = async () => {
		const str = flowCanvasRef.value?.getFlowJson()
		await exportFlow(str)
		dialogVisible.value = false
	}
	defineExpose({
		open,
		close,
		exportFlow
	})
</script>
<style lang="less" scoped>
</style>