深度画布保存接口

src/components/Canvas/DepthCanvas/index.vue

@@ -9,33 +9,54 @@
 <script setup lang="ts">
 	import { base64Tofile } from '../tools/tools'
 	import { uploadImage } from '@/api/upload'
+	import { getDepthCanvas, saveDepthCanvas } from '@/api/depth-canvas'
 	import FullscreenDialog from '../components/fullscreen-dialog.vue'
 	import depthCanvas from './depth-canvas.vue'
 	import { ref } from 'vue'
 	const dialogVisible = ref(false)
 	const config = ref({
-		id: '',
+		canvasId: '',
+		sketchId: '',
 		url: '',
-		json: ''
+		canvasData: '' as any,
+		onWorkbench(options) {},
+		onClose() {}
 	})
 
-	const open = (options) => {
+	const open = async (options) => {
 		config.value = options
-		console.log(config.value)
-		config.value.json = sessionStorage.getItem('canvasJson_' + config.value.id)
+		if (config.value.canvasId) {
+			const res = await getDepthCanvas(config.value.canvasId)
+			const canvas = res.deepCanvasDetail
+			const images = res.images
+			if (canvas && images) {
+				config.value.canvasData = { canvas: JSON.stringify(canvas), images }
+			} else {
+				config.value.canvasData = null
+			}
+		}
+
 		dialogVisible.value = true
 	}
 	// 工作区
 	const onWorkbench = async (options) => {
-		const json = options.json
-
-		sessionStorage.setItem('canvasJson_' + config.value.id, json)
-
+		// 保存画布数据
+		const data = {
+			deepCanvasDetail: JSON.parse(options.canvas),
+			images: options.images,
+			sketchId: config.value.sketchId,
+			id: config.value.canvasId || null
+		}
+		const sData = await saveDepthCanvas(data)
+		console.log(sData)
+		const canvasId = sData.id
+		// base64 转 file 上传转换为 url
 		const file = base64Tofile(options.url, 'canvas.png')
 		const formData = new FormData()
 		formData.append('file', file)
 		const url = await uploadImage(formData)
-		config.value.onWorkbench?.({ url })
+		config.value.onWorkbench?.({ url, canvasId })
+
 		dialogVisible.value = false
 	}
 	// 关闭