form-create-designer插件搭建表单构建器 功能扩展

利用 codemirror 插件和 @form-create/designer 的API实现表单配置的导入导出功能

一、下载插件

// codemirror
	cnpm install vue-codemirror --save
// JSON校验器插件
	cnpm install jsonlint-mod --save

二、mian.js引入插件

	// 引入表单构建插件
	import Vue from 'vue'
	import formCreate from '@form-create/element-ui'
	import FcDesigner from '@form-create/designer'
	Vue.use(formCreate)
	Vue.use(FcDesigner)

	// 引入代码编辑器
	import jsonlint from 'jsonlint-mod';
	import {codemirror} from 'vue-codemirror'
	import 'codemirror/addon/lint/lint'
	import 'codemirror/addon/lint/json-lint'
	import 'codemirror/lib/codemirror.css'
	import 'codemirror/addon/lint/lint.css'
	import 'codemirror/addon/edit/matchbrackets.js'
	import 'codemirror/mode/javascript/javascript.js'

三、.vue 配置使用

<template>
  <div class="main">
    <div class="middle">
      <div class="tool">
        <!--功能按钮-->
        <el-row>
          <el-button icon="el-icon-download" type="primary" size="small" 
                     @click="handleDownloadRule()" round>生成表单JSON</el-button>
          <el-button icon="el-icon-upload2" type="success" size="small" 
                     @click="handleUploadRule()" round>导入表单JSON</el-button>
          <el-button icon="el-icon-download" type="primary" size="small" 
                     @click="handleDownloadOption()" round>生成表单配置</el-button>
          <el-button icon="el-icon-upload2" type="success" size="small" 
                     @click="handleUploadOption()" round>导入表单配置</el-button>
        </el-row>
      </div>
      <!--表单构建器-->
      <fc-designer class="form-build" ref="designer" style="height: 80vh;"/>
    </div>
	
    <!--对话框-->
    <el-dialog :title="dialogTitle" 
               :visible.sync="dialogState" 
               :close-on-click-modal="false" 
               append-to-body>
			 <codemirror v-model="codemirrorContent" 
						  :options="codemirrorOptions" 
						  style="height: 90%;text-align: left;border: 1px solid #ccc;">
			  </codemirror>
      <el-row v-if="dialogMenu">
        <el-button @click="dialogState = false">取 消</el-button>
        <el-button type="primary" @click="handleImport()">导 入</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
	import {codemirror} from 'vue-codemirror';
	export default {
	    beforeCreate() {
			// 开启JSON校验
	        // window.jsonlint = jsonlint
	    },
	    data() {
	        return {
	            dialogTitle: '', // 对话框标题
	            dialogState: false, // 对话框状态
	            dialogMenu: false, // 对话框菜单状态
				
	            // codemirror配置
	            codemirrorOptions: {
	                mode: "application/json",
	                theme: "default",
	                gutters: ['CodeMirror-lint-markers'],
	                tabSize: 2,
	                lint: true,
	                line: true,
	                lineNumbers: true,
	                matchBrackets: true,
	                lineWrapping: true,
	                styleActiveLine: true,
	                readOnly: false
	            },
	            // codemirror内容
	            codemirrorContent: null
	        }
	    },
	    components: {
	        codemirror
	    },
	    methods: {
	        // 导出表单JSON
	        handleDownloadRule(){
	            this.dialogTitle = "表单规则"
	            this.dialogState = true
	            this.dialogMenu = false
	
	            this.codemirrorOptions.readOnly = true
	            this.codemirrorContent = JSON.stringify(this.$refs.designer.getRule(),null, 2)
	        },
	        // 导出表单配置
	        handleDownloadOption(){
	            this.dialogTitle = "表单配置"
	            this.dialogState = true
	            this.dialogMenu = false
	
	            this.codemirrorOptions.readOnly = true
	            this.codemirrorContent = JSON.stringify(this.$refs.designer.getOption(), 
	                                                    null, 2)
	        },
	        // 导入表单JSON
	        handleUploadRule(){
	            this.dialogTitle = "导入表单规则"
	            this.dialogState = true
	            this.dialogMenu = true
	
	            this.codemirrorOptions.readOnly = false
	            this.codemirrorContent = JSON.stringify([], null, 2)
	        },
	        // 导入表单配置
	        handleUploadOption(){
	            this.dialogTitle = "导入表单配置"
	            this.dialogState = true
	            this.dialogMenu = true
	
	            this.codemirrorOptions.readOnly = false
	            this.codemirrorContent = JSON.stringify({}, null, 2)
	        },
	        // 配置导入
	        handleImport(){
	            try {
	                let content = JSON.parse(this.codemirrorContent)
	                if(this.dialogTitle == "导入表单规则"){
	                    this.$refs.designer.setRule(content)
	                }
	                if(this.dialogTitle == "导入表单配置"){
	                    this.$refs.designer.setOptions(content)
	                }
	                this.dialogState = false
	            } catch(e) {
	                alert('输入内容格式有误!')
	            }
	        }
	    }
	}

</script>

四、效果图