feat: 流程模型 - 动态表单 - 导入/生成 json 100%

src/components/FormCreateDesigner/FcDesigner.vue

@@ -255,7 +255,7 @@
 				</ElDialog>
 				<!-- 生成JSON / 导入JSON -->
 				<el-dialog :title="title[type]" v-model="state" class="_fc-t-dialog">
-					<div ref="editor" v-if="state"></div>
+					<div ref="editorRef" id="editor" v-if="state"></div>
 					<span style="color: red" v-if="err">输入内容格式有误!</span>
 					<template #footer v-if="type > 2">
 						<span slot="footer" class="dialog-footer">
@@ -346,7 +346,7 @@ export default defineComponent({
 			}
 			return orgRule(...args)
 		}
-
+		const editorRef = ref()
 		const data = reactive({
 			cacheProps: {},
 			moveRule: null,
@@ -447,8 +447,7 @@ export default defineComponent({
 			value: null,
 			err: false,
 			type: -1,
-			editor: null,
-			editorRef: ''
+			editor: null
 		})
 
 		watch(
@@ -1122,7 +1121,7 @@ export default defineComponent({
 					val = JSON.stringify(data.value, null, 2)
 				}
 				nextTick(() => {
-					data.editor = CodeMirror(data.editorRef, {
+					data.editor = CodeMirror(document.getElementById('editor'), {
 						lineNumbers: true,
 						mode: data.type === 2 ? { name: 'vue' } : 'application/json',
 						gutters: ['CodeMirror-lint-markers'],
@@ -1146,7 +1145,7 @@ export default defineComponent({
 			},
 			onOk() {
 				if (data.err) return
-				const json = data.editorRef.getValue()
+				const json = data.editor.getValue()
 				let val = JSON.parse(json)
 				if (data.type === 3) {
 					if (!Array.isArray(val)) {
@@ -1166,6 +1165,7 @@ export default defineComponent({
 		}
 		data.dragForm.rule = methods.makeDragRule(methods.makeChildren(data.children))
 		return {
+			editorRef,
 			...toRefs(data),
 			...methods,
 			dragHeight,