|
@@ -1,18 +1,17 @@
|
|
|
<script setup name="FlowDesign">
|
|
|
import { onMounted, ref, watch } from 'vue'
|
|
|
-// import JsonEditorVue from 'json-editor-vue3'
|
|
|
import CodeMirrorEditor from '@/components/CodeMirrorEditor/index.vue'
|
|
|
|
|
|
import ScWorkflow from '@/components/scWorkflow'
|
|
|
import useFlowStore from '@/store/modules/flow'
|
|
|
import useClipboard from 'vue-clipboard3'
|
|
|
import { storeToRefs } from 'pinia'
|
|
|
+import { ElMessage } from 'element-plus'
|
|
|
|
|
|
const flowStore = useFlowStore()
|
|
|
const { modelContent } = storeToRefs(flowStore)
|
|
|
const { toClipboard } = useClipboard()
|
|
|
|
|
|
-const fetchTxtFileData = ref('你好 世界!')
|
|
|
const formRef = ref()
|
|
|
const drawer = ref(false)
|
|
|
const jsonFormat = ref({})
|
|
@@ -37,24 +36,22 @@ const updateCompInfo = () => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-const copyParseJson = async () => {
|
|
|
- await toClipboard(JSON.stringify(jsonFormat.value, null, ' '))
|
|
|
-}
|
|
|
+// const copyParseJson = async () => {
|
|
|
+// await toClipboard(JSON.stringify(jsonFormat.value, null, ' '))
|
|
|
+// }
|
|
|
|
|
|
const copyJson = async () => {
|
|
|
- await toClipboard(JSON.stringify(jsonFormat.value))
|
|
|
-}
|
|
|
-
|
|
|
-watch(
|
|
|
- () => form.value.processConfig,
|
|
|
- value => {
|
|
|
- jsonFormat.value = JSON.stringify(form.value.processConfig)
|
|
|
- },
|
|
|
- {
|
|
|
- // 初始化立即执行
|
|
|
- immediate: true
|
|
|
+ if (!jsonFormat.value) {
|
|
|
+ return ElMessage.warning('当前没有数据噢')
|
|
|
+ }
|
|
|
+ const json = JSON.parse(jsonFormat.value || {})
|
|
|
+ try {
|
|
|
+ await toClipboard(JSON.stringify(json))
|
|
|
+ ElMessage.success('复制成功')
|
|
|
+ } catch (e) {
|
|
|
+ ElMessage.warning('复制失败')
|
|
|
}
|
|
|
-)
|
|
|
+}
|
|
|
|
|
|
const validate = () => {
|
|
|
// 保存表单设计
|
|
@@ -65,6 +62,11 @@ const validate = () => {
|
|
|
})
|
|
|
}
|
|
|
|
|
|
+const openDrawerEv = () => {
|
|
|
+ jsonFormat.value = JSON.stringify(form.value.processConfig, null, ' ')
|
|
|
+ drawer.value = !drawer.value
|
|
|
+}
|
|
|
+
|
|
|
onMounted(() => {
|
|
|
updateCompInfo()
|
|
|
})
|
|
@@ -80,16 +82,16 @@ defineExpose({
|
|
|
<template>
|
|
|
<div>
|
|
|
<div style="z-index: 999" class="fixed top-44 right-48">
|
|
|
- <el-button type="primary" @click="() => (drawer = true)"> 查看 JSON </el-button>
|
|
|
+ <el-button type="primary" @click="openDrawerEv"> 查看 JSON </el-button>
|
|
|
</div>
|
|
|
|
|
|
<ScWorkflow v-model="form.processConfig"></ScWorkflow>
|
|
|
|
|
|
- <el-dialog v-model="drawer" size="600px" :append-to-body="true" title="查看JSON">
|
|
|
+ <el-dialog v-if="drawer" v-model="drawer" class="le-dialog" size="600px" :append-to-body="true" title="查看JSON" destroy-on-close>
|
|
|
<code-mirror-editor v-model="jsonFormat"></code-mirror-editor>
|
|
|
<template #footer>
|
|
|
- <el-button type="primary">复制 JSON</el-button>
|
|
|
- <el-button>关 闭</el-button>
|
|
|
+ <el-button type="primary" @click="copyJson">复制 JSON</el-button>
|
|
|
+ <el-button @click="() => (drawer = false)">关 闭</el-button>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
</div>
|