表单设计器form-marking的使用（一）

前言

项目开发要做工作流，也因此需要一个表单设计功能，所以在网上找到了form-marking这个组件。
官方地址：http://docs.form.making.link

安装

// 依赖包安装
npm install form-making -S

引入

// vue引入
// 全局
import FormMaking from '@/lib/vue-form-making'
import '@/lib/vue-form-making/dist/FormMaking.css'

Vue.use(FormMaking)

//局部
import {
  GenerateForm,
  MakingForm
} from '@/lib/vue-form-making'
import '@/lib/vue-form-making/dist/FormMaking.css'

Vue.component(GenerateForm.name, GenerateForm)
Vue.component(MakingForm.name, MakingForm)
/* 或写为
 * Vue.use(GenerateForm)
 * Vue.use(MakingForm)
 */

使用

组件
MakingForm 表单设计组件
GenerateForm 表单生成组件
GenerateAntdForm Ant Design 风格的表单生成器组件

因为项目UI框架使用了element-UI,我这里使用了前两个组件。

1、 MakingForm

<template>
  <fm-making-form 
    ref="makingform" 
    style="height: 700px;"
    upload preview generate-code generate-json clearable
  >
    <!-- upload：上传 preview：预览 generate-code：生成代码 generate-json：生成表单json clearable：清空 -->
  </fm-making-form>
</template>

方法

通过 this.$refs 可以获取到 MakingForm 实例并调用实例方法
getJSON 获取设计器配置的json数据
getHtml 获取设计器生成的可以直接使用的代码
setJSON 设置设计器配置的json数据
项目中需要通过方法获取表单的JSON传给后台，
预览表单需要通过调接口获取对应表单的JSON数据，赋给表单生成器绑定的jsonData

2、GenerateForm

<template>
  <div>
    <fm-generate-form 
      :data="jsonData" 
      ref="generateForm"
    >
    </fm-generate-form>
    <el-button type="primary" @click="handleSubmit">Submit</el-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      jsonData: {"list":[{"type":"input","icon":"icon-input","options":{"width":"100%","defaultValue":"","required":false,"requiredMessage":"","dataType":"","dataTypeCheck":false,"dataTypeMessage":"","pattern":"","patternCheck":false,"patternMessage":"","placeholder":"","customClass":"","disabled":false,"labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"showPassword":false,"remoteFunc":"func_1606804886162","remoteOption":"option_1606804886162"},"name":"单行文本","key":"1606804886162","model":"input_1606804886162","rules":[]},{"type":"textarea","icon":"icon-diy-com-textarea","options":{"width":"100%","defaultValue":"","required":false,"requiredMessage":"","disabled":false,"pattern":"","patternMessage":"","placeholder":"","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"remoteFunc":"func_1606804889637","remoteOption":"option_1606804889637"},"name":"多行文本","key":"1606804889637","model":"textarea_1606804889637","rules":[]},{"type":"radio","icon":"icon-radio-active","options":{"inline":false,"defaultValue":"","showLabel":false,"options":[{"value":"Option 1","label":"Option 1"},{"value":"Option 2","label":"Option 2"},{"value":"Option 3","label":"Option 3"}],"required":false,"requiredMessage":"","width":"","remote":false,"remoteType":"option","remoteOption":"option_1606804894092","remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_1606804894092","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"disabled":false},"name":"单选框组","key":"1606804894092","model":"radio_1606804894092","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"small","customClass":"","ui":"element","layout":"horizontal","labelCol":3,"width":"100%","hideLabel":false,"hideErrorMessage":false}},
    }
  },
  methods: {
    handleSubmit () {
      this.$refs.generateForm.getData().then(data => {
        this.$alert(data, '表单数据')
      }).catch(e => {
      })
    }
  }
}
</script>

方法

通过 this.$refs 可以获取到 GenerateForm 实例并调用实例方法
getData 获取表单数据
reset 重置表单数据
setData 设置表单数据
getData获取表单中填写的表单信息，setData则是用来做回显

这里没有把方法介绍完，只介绍用到的一些，后续可能会继续跟新。