form-create vue3版本

官方网址：http://www.form-create.com/v3/

设计器演示地址：http://www.form-create.com/designer/?fr=home

表单源码gitee地址：https://gitee.com/xaboy/form-create/tree/next/

设计器源码gitee地址：https://gitee.com/xaboy/form-create-designer/tree/next/

form-create v3使用

npm install @form-create/element-ui@next

import formCreate from '@form-create/element-ui'

app.use(formCreate)

<form-create :rule="rule" v-model:api="fApi" :option="options" v-model="value"/>

export default {
    data(){
        return {
            fApi:{},
            value:{field1:'111',field2:'222',time:'11:11:11'},
            options:{
                onSubmit:(formData)=>{
                    alert(JSON.stringify(formData))
                }
            },
            rule:[
                {type:'input', field:'field1',title:'field1',value:'aaa'},
                {type:'input', field:'field2',title:'field2',value:'sss'},
                {type:'timePicker', field:'time',title:'time',value:'12:12:12'},
                {
                    type:'ElButton',
                    title:'修改 field1',
                    native: false,
                    on:{
                        click: ()=>{
                            this.rule[0].value+='a'
                        }
                    },
                    children: ['点击'],
                }
            ]
        }
    }
}

form-create-designer v3使用

npm install @form-create/designer@next

import formCreate from '@form-create/element-ui'

import FcDesigner from '@form-create/designer'

app.use(formCreate)

app.use(FcDesigner)

<fc-designer ref="designer"/>

源码分析

• vue-codemirror 和 jsonlint-mod实现 form-create-designer的导入导出JSON

使用方法：

1. 下载插件

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

2. 在main.js引入vue-codemirror

import VueCodemirror from 'vue-codemirror'
Vue.use(VueCodemirror)

3. 在使用form-create-designer的页面引入相关css和js

import jsonlint from 'jsonlint-mod';
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'

4. HTML代码

<template>
  <div class="form-container">
    <el-row>
      <el-button icon="el-icon-download" type="primary" size="small" round @click="handleDownloadRule()">生成表单JSON</el-button>
      <el-button icon="el-icon-upload2" type="success" size="small" round @click="handleUploadRule()">导入表单JSON</el-button>
      <el-button icon="el-icon-download" type="primary" size="small" round @click="handleDownloadOption()">生成表单配置</el-button>
      <el-button icon="el-icon-upload2" type="success" size="small" round @click="handleUploadOption()">导入表单配置</el-button>
    </el-row>
    <!--form-create-designer-->
    <fc-designer ref="designer" />
    <!--代码预览-->
    <el-dialog :title="dialogTitle" :visible.sync="dialogState" :close-on-click-modal="false" append-to-body>
      <!--vue-codemirror-->
      <codemirror v-model="codemirrorContent" :options="codemirrorOptions" style="height: 90%;text-align: left;border: 1px solid #ccc;" />
      <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>

5. JS关键代码

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('输入内容格式有误!')
            }
        }
    }
}