75 lines
1.9 KiB
Vue
75 lines
1.9 KiB
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, onMounted, onBeforeUnmount } from 'vue'
|
|
import { getSketchFlowCanvas, putSketchFlowCanvas } from '@/api/flow-canvas'
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
const dialogVisible = ref(false)
|
|
const config = ref({}) as any
|
|
const flowCanvasRef = ref<any>()
|
|
const {t:$t} = useI18n()
|
|
const open = async (options) => {
|
|
let json = []
|
|
await new Promise((resolve) => {
|
|
getSketchFlowCanvas({ id: options.imgId },true).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 },true).then(() => {
|
|
resolve(true)
|
|
}).catch(() => {
|
|
resolve(true)
|
|
})
|
|
})
|
|
}
|
|
|
|
const close = async () => {
|
|
const str = flowCanvasRef.value?.getFlowJson()
|
|
await exportFlow(str)
|
|
dialogVisible.value = false
|
|
}
|
|
const handleBeforeUnload = (event) => {
|
|
const str = flowCanvasRef.value?.getFlowJson()
|
|
if (str) {
|
|
event.preventDefault()
|
|
event.returnValue = $t('flowCanvas.confirmLeave')
|
|
return $t('flowCanvas.confirmLeave')
|
|
}
|
|
}
|
|
onMounted(() => {
|
|
// 添加事件监听
|
|
window.addEventListener('beforeunload', handleBeforeUnload)
|
|
})
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener('beforeunload', handleBeforeUnload)
|
|
})
|
|
defineExpose({
|
|
open,
|
|
close,
|
|
exportFlow
|
|
})
|
|
</script>
|
|
<style lang="less" scoped>
|
|
</style>
|