FormMaking 基于Vue的表单设计器

介绍

基于 vue 和 element-ui 实现的表单设计器，可以让表单开发简单而高效。提供 表单设计器（MakingForm）和表单生成器（GenerateForm）两个组件，通过表单设计器快速设计出表单页面，生成可配置json和可直接运行的代码，使用表单生成器快速渲染出表单页面，并提供了丰富的操作API。

二次开发

安装项目依赖包

npm install

运行项目

运行启动的项目是引用设计器的官方网站代码，设计器源码在 src/components 下面

npm run serve

vue-form-making设计器源码分析

控件实际上是调用的element-ui框架里的组件库，当需要添加新的控件时
1.首先要在src/components/componentsConfig.js里去声明组件类型，包括type,name,icon以及options, 其中type里是element-ui组件名，name是展示在左侧字段名字，icon是展示图标图标是调用的vue-awesome组件库，需要用时，需要在Container.vue里important导入，方可使用。option是对这个控件做限制处理以及初始化处理具体可参考element-ui组件参数。

2.在WidgetFormItem.vue里添加控件模板，即拉取左侧图片到中间后，展示内容。具体写法类似于element-ui里的组件写法。

3.在GenerateFormItem.vue添加组件，这个主要是展示使用。也是最重要的一步，你所拉取的内容最终都会在这个vue里显示出来。在FormConfig.vue 下添加对表单的配置，其中 props.data 是上面配置信息的 widgetForm.config。配置完成后，最后就是渲染，在 src/components/GenerateForm.vue 下添加自己增加的配置即完成了对表单属性的扩展

4.添加组件配置信息
src/components/WidgetConfig.vue 下根据自己要求添加配置信息, props.data 结构为上面的配置信息，至此，自定义扩展的组件就成功的引入到设计器中。

5. 将组件拖拽到Container.vue容器中，通过handleGenerateCode调用generateCode.js方法生成代码片段。

生成代码片段

<template>
  <div>
    <fm-generate-form :data="jsonData" :remote="remoteFuncs" :value="editData" ref="generateForm">
      
    </fm-generate-form>
    <el-button type="primary" @click="handleSubmit">提交</el-button>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        jsonData: {"list":[
        {"type":"input",
        "icon":"icon-input",
        "options": {
        "width":"100%",
        "defaultValue":"",
        "required":false,
        "dataType":"string",
        "pattern":"",
        "placeholder":"",
        "disabled":false,"
       "remoteFunc":"func_1596074772000_50602"},
       "name":"单行文本",
       "key":"1596074772000_50602",
       "model":"input_1596074772000_50602",
       "rules":[{"type":"string","message":"单行文本格式不正确"}]}],
       "config":{"labelWidth":100,"labelPosition":"right","size":"small"}},
        editData: {},
        remoteFuncs: {
          
        }
      }
    },
    methods: {
      handleSubmit () {
        this.$refs.generateForm.getData().then(data => {
          // data check success
          // data - form data
        }).catch(e => {
          // data check failed
        })
      }
    }
  }
</script>

1.其中jsonData 是表单配置中生成的json数据，后端数据放入这个参数里，用于渲染生产form表单editData 里放的是表单需要显示的表单数据，即表单初始化显示的初始值,以对象的形式放入，key值中input的model值。例如editData: {input_1554173787000_79900: “123”}
2. remoteFuncs 组件配置时配置的远端方法,保持和配置时输入的名称一致，具体方法名，可从jsonData中获取到remoteFunc的value中获取 ，可用于改变单选或者多选的默认value值,具体改动value可以通过jsonData里props的值获取，这个一般用于获取后端参数后异步渲染value值。当点击提交按钮时，可通过ref去调取目标模板是否校验完成 this.$refs.generateForm.getData().then(data => {// 数据校验成功// data 为获取的表单数据}).catch(e => {// 数据校验失败})

特别感谢

这篇文章是我在网上找的几篇文章以及官方文档集合总结了一下，希望对看到人有帮助，原文链接传送门
链接: link. FormMaking 官方文档
链接: link. vue form表单开发快速模板vue-form-marking