feat: 流程模型 - 动态表单 - 导入json 0%

src/components/FormCreateDesigner/FcDesigner.vue

@@ -170,7 +170,8 @@
 				<ElContainer class="_fc-m">
 					<el-header class="_fc-m-tools" height="45">
 						<slot name="handle"></slot>
-						<el-button size="small" type="primary">保存当前JSON</el-button>
+						<el-button size="small" @click="setJson"> 导入JSON</el-button>
+						<el-button size="small" type="primary" @click="showJson">生成JSON</el-button>
 						<el-button type="primary" plain round size="small" @click="previewFc"
 							><i class="fc-icon icon-preview"></i> {{ t('designer.preview') }}
 						</el-button>
@@ -248,14 +249,43 @@
 						</ElMain>
 					</ElContainer>
 				</ElAside>
+				<!-- 预览表单 -->
 				<ElDialog v-model="preview.state" width="800px" append-to-body>
 					<ViewForm :rule="preview.rule" :option="preview.option" v-if="preview.state"></ViewForm>
 				</ElDialog>
+				<!-- 生成JSON / 导入JSON -->
+				<el-dialog :title="title[type]" v-model="state" class="_fc-t-dialog">
+					<div ref="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">
+							<el-button @click="state = false" size="small">取 消</el-button>
+							<el-button type="primary" @click="onOk" size="small">确 定</el-button>
+						</span>
+					</template>
+				</el-dialog>
 			</ElContainer>
 		</ElMain>
 	</ElContainer>
 </template>
 <script>
+// 代码样式
+import 'codemirror/lib/codemirror.css'
+import 'codemirror/addon/lint/lint.css'
+import CodeMirror from 'codemirror/lib/codemirror'
+import 'codemirror/addon/lint/lint'
+import 'codemirror/addon/lint/json-lint'
+import 'codemirror/mode/javascript/javascript'
+import 'codemirror/mode/vue/vue'
+import 'codemirror/mode/xml/xml'
+import 'codemirror/mode/css/css'
+import 'codemirror/addon/mode/overlay'
+import 'codemirror/addon/mode/simple'
+import 'codemirror/addon/selection/selection-pointer'
+import 'codemirror/mode/handlebars/handlebars'
+import 'codemirror/mode/htmlmixed/htmlmixed'
+import 'codemirror/mode/pug/pug'
+// 代码样式
 import form from '../../config/base/form'
 import field from '../../config/base/field'
 import validate from '../../config/base/validate'
@@ -410,7 +440,15 @@ export default defineComponent({
 						fapi.setValue(fapi.options.formData || {})
 					}
 				}
-			}
+			},
+			// 生成JSON / 导入JSON
+			title: ['生成规则', '表单规则', '生成组件', '设置生成规则', '设置表单规则'],
+			state: false,
+			value: null,
+			err: false,
+			type: -1,
+			editor: null,
+			editorRef: ''
 		})
 
 		watch(
@@ -424,6 +462,23 @@ export default defineComponent({
 			}
 		)
 
+		watch(
+			() => data.state,
+			n => {
+				if (!n) {
+					data.value = null
+					data.err = false
+				}
+			}
+		)
+
+		watch(
+			() => data.value,
+			n => {
+				methods.load()
+			}
+		)
+
 		let unWatchActiveRule = null
 
 		watch(
@@ -1056,6 +1111,57 @@ export default defineComponent({
 						children: methods.makeChildren([rule])
 					}
 				}
+			},
+			load() {
+				let val
+				if (data.type === 2) {
+					val = data.value
+				} else if (data.type === 0) {
+					val = formCreate.toJson(data.value, 2)
+				} else {
+					val = JSON.stringify(data.value, null, 2)
+				}
+				nextTick(() => {
+					data.editor = CodeMirror(data.editorRef, {
+						lineNumbers: true,
+						mode: data.type === 2 ? { name: 'vue' } : 'application/json',
+						gutters: ['CodeMirror-lint-markers'],
+						// lint: true,
+						line: true,
+						tabSize: 2,
+						lineWrapping: true,
+						value: val || ''
+					})
+				})
+			},
+			showJson() {
+				data.state = true
+				data.type = 0
+				data.value = methods.getRule()
+			},
+			setJson() {
+				data.state = true
+				data.type = 3
+				data.value = []
+			},
+			onOk() {
+				if (data.err) return
+				const json = data.editorRef.getValue()
+				let val = JSON.parse(json)
+				if (data.type === 3) {
+					if (!Array.isArray(val)) {
+						data.err = true
+						return
+					}
+					methods.setRule(formCreate.parseJson(json))
+				} else {
+					if (!is.Object(val) || !val.form) {
+						data.err = true
+						return
+					}
+					methods.setOption(val)
+				}
+				data.state = false
 			}
 		}
 		data.dragForm.rule = methods.makeDragRule(methods.makeChildren(data.children))