feat: 加入查看JSON

package.json

@@ -60,7 +60,9 @@
     "vue-ls": "^4.2.0",
     "vue-router": "^4.2.1",
     "vuedraggable": "^4.1.0",
-    "webpack": "^5.91.0"
+    "webpack": "^5.91.0",
+		"json-editor-vue3": "^1.0.8",
+		"vue-clipboard3": "^2.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.21.0",

src/views/flow/create/components/FlowDesign.vue

@@ -2,20 +2,16 @@
 import { onMounted, ref } from 'vue'
 import ScWorkflow from '@/components/scWorkflow'
 import useFlowStore from '@/store/modules/flow'
+import useClipboard from 'vue-clipboard3'
 import { storeToRefs } from 'pinia'
 
-defineProps({
-	label: {
-		type: String
-	},
-	name: {
-		type: String
-	}
-})
-
 const flowStore = useFlowStore()
 const { modelContent } = storeToRefs(flowStore)
+const { toClipboard } = useClipboard()
+
 const formRef = ref()
+const drawer = ref(false)
+
 let form = ref({
 	processConfig: {
 		nodeName: '发起人',
@@ -28,15 +24,22 @@ let form = ref({
 const saveDesign = json => {
 	modelContent.value = JSON.stringify(form.value.processConfig)
 }
+
 const updateCompInfo = () => {
 	if (modelContent.value) {
 		const _val = JSON.parse(modelContent.value)
 		form.value = Object.assign({ processConfig: _val }, {})
 	}
 }
-onMounted(() => {
-	updateCompInfo()
-})
+
+const copyParseJson = async () => {
+	await toClipboard(JSON.stringify(data.value, null, '  '))
+}
+
+const copyJson = async () => {
+	await toClipboard(JSON.stringify(data.value))
+}
+
 const validate = () => {
 	// 保存表单设计
 	saveDesign()
@@ -45,6 +48,11 @@ const validate = () => {
 		resolve()
 	})
 }
+
+onMounted(() => {
+	updateCompInfo()
+})
+
 defineExpose({
 	formRef,
 	saveDesign,
@@ -54,5 +62,24 @@ defineExpose({
 </script>
 
 <template>
-	<ScWorkflow v-model="form.processConfig"></ScWorkflow>
+	<div>
+		<div style="z-index: 999;display: none;" class="fixed top-44 right-20">
+			<el-button type="primary" @click="() => (drawer = true)"> 查看 JSON </el-button>
+		</div>
+
+		<ScWorkflow v-model="form.processConfig"></ScWorkflow>
+
+		<el-drawer v-model="drawer" size="500px" class="drawer" :append-to-body="true" :modal="false" :with-header="false">
+			<div style="height: 100vh">
+				<div style="padding: 1px; background-color: #3883fa">
+					<el-button type="primary" plain @click="copyParseJson"> 复制格式化后的 JSON </el-button>
+					<el-button type="primary" plain @click="copyJson"> 复制压缩后的 JSON </el-button>
+					<el-button type="primary" plain @click="drawer = false"> 关闭弹窗 </el-button>
+				</div>
+				<json-editor-vue v-model="form.processConfig" class="editor" language="zh-CN" current-mode="view" />
+			</div>
+		</el-drawer>
+	</div>
 </template>
+
+<style lang="scss"></style>