FormMaking

# 组件

# 表单设计器 （MakingForm）

# 代码演示

<template>
  <fm-making-form 
    ref="makingform" 
    style="height: 500px;" 
    preview 
    generate-code 
    generate-json
  >
    <template slot="action">
    </template>
  </fm-making-form>
</template>

使用时需要设置设计器的高度，默认情况高度是根据父元素 100% 来渲染

# 自定义操作按钮

<template>
  <fm-making-form 
    ref="makingform" 
    style="height: 500px;" 
  >
    <template slot="action">
      <!-- 自定义操作区域插槽 -->
      <el-button type="text" icon="el-icon-upload">保存</el-button>
    </template>
  </fm-making-form>
</template>

# 字段配置

<template>
  <fm-making-form 
    ref="makingform" 
    style="height: 500px;"
    :basic-fields="['input', 'textarea']"
    :advance-fields="['blank', 'fileupload']"
    :layout-fields="[]"
  >
  </fm-making-form>
</template>

在 字段说明 中提供的有设计器所有字段描述。

# 获取 json 数据

<fm-making-form 
  ref="makingform" 
  style="height: 500px;" 
  preview 
  generate-code 
  generate-json
>
</fm-making-form>

const json = this.$refs.makingform.getJSON()

# API

# Props

参数
说明
类型
默认值
preview 设计器预览操作按钮显示 Boolean fasle
generate-json 设计器生成JSON按钮显示 Boolean false
generate-code 设计器生成代码按钮显示 Boolean false
clearable 设计器清空按钮显示 Boolean false
upload 设计器导入JSON按钮显示 Boolean false
basic-fields 设计器左侧基础字段配置 Array -
advance-fields 设计器左侧高级字段配置 Array -
layout-fields 设计器左侧布局字段配置 Array -
custom-fields 设计器自定义字段配置 Array -

# Slots

name 说明
action 设计器头部操作按钮自定义区域

# 方法

通过 ref 可以获取到 MakingForm 实例并调用实例方法

方法名 说明 参数
getJSON 获取设计器配置的JSON数据 -
getHtml 获取设计器生成的可以直接使用的HTML代码 -
setJSON 设置设计器的配置信息 (value) 通过getJSON方法获取的JSON数据
clear 清空设计器 -
handleUndo 撤销 -
handleRedo 重做 -

# 字段说明

标红的字段表示高级版本才提供

# 基础字段

type 字段名
input 单行文本
textarea 多行文本
number 计数器
radio 单选框组
checkbox 多选框组
time 时间选择器
date 日期选择器
rate 评分
color 颜色选择器
select 下拉选择框
switch 开关
slider 滑块
text 文字
html HTML

# 高级字段

type 字段名
blank 自定义
imgupload 图片
editor 编辑器
cascader 级联选择器
fileupload 文件
table 子表单

# 布局字段

type 字段名
grid 栅格布局
tabs 标签页
divider 分割线

# 表单生成器 （GenerateForm）

# 代码演示

# 表单生成

直接根据设计器中生成的 json 即可渲染出表单，获取表单数据。

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

export default {
  data () {
    return {
      jsonData: {"list":[{"type":"input","icon":"icon-input","options":{"width":"100%","defaultValue":"","required":false,"dataType":"string","pattern":"","placeholder":"","customClass":"","disabled":false,"labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"showPassword":false,"remoteFunc":"func_1575897887618","remoteOption":"option_1575897887618"},"name":"单行文本","key":"1575897887618","model":"input_1575897887618","rules":[{"type":"string","message":"单行文本格式不正确"}]}],"config":{"labelWidth":100,"labelPosition":"right","size":"small","customClass":""}},
    }
  },
  methods: {
    handleSubmit () {
      this.$refs.generateForm.getData().then(data => {
        alert(JSON.stringify(data))
      }).catch(e => {
      })
    }
  }
}

# 加载表单数据

<template>
  <div>
    <fm-generate-form 
      :data="jsonData"
      :value="editData" 
      ref="generateForm"
    >
    </fm-generate-form>
  </div>
</template>

export default {
  data () {
    return {
      jsonData: {"list":[{"type":"input","icon":"icon-input","options":{"width":"100%","defaultValue":"","required":false,"dataType":"string","pattern":"","placeholder":"","customClass":"","disabled":false,"labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"showPassword":false,"remoteFunc":"func_1575897887618","remoteOption":"option_1575897887618"},"name":"名称","key":"1575897887618","model":"name","rules":[{"type":"string","message":"名称格式不正确"}]}],"config":{"labelWidth":100,"labelPosition":"right","size":"small","customClass":""}},
      editData: {
        /* 需要加载的表单数据可以在这里进行设置 */
        name: 'Gavin'
      },
    }
  }
}

# 表单字段值改变事件

表单字段值改变后会触发 on-change 事件。

<template>
  <div>
    <fm-generate-form 
      :data="jsonData" 
      @on-change="onChange"
      :value="formData"
      ref="generateForm"
    >
    </fm-generate-form>
  </div>
</template>

export default {
  data () {
    return {
      jsonData: {"list":[{"type":"input","icon":"icon-input","options":{"width":"100%","defaultValue":"","required":false,"dataType":"string","pattern":"","placeholder":"","customClass":"","disabled":false,"labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"showPassword":false,"remoteFunc":"func_1575897887618","remoteOption":"option_1575897887618"},"name":"名称","key":"1575897887618","model":"name","rules":[{"type":"string","message":"名称格式不正确"}]},{"type":"text","icon":"icon-wenzishezhi-","options":{"defaultValue":"","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"remoteFunc":"func_1575906202073","remoteOption":"option_1575906202073"},"name":"","key":"1575906202073","model":"show","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"small","customClass":""}},
      formData: {
        show: ''
      }
    }
  },
  methods: {
    onChange (field, value) {
      if (field == 'name') {
        this.formData.show = value
      }
    }
  }
}

# API

高级版本才提供的API使用红色字体标明。

# Props

参数
说明
类型
默认值
data 表单json配置数据 Object -
value 表单数据 Object -
remote 表单获取数据远端方法 Object {}
edit 表单可编辑状态 Boolean true
remote-option 表单动态选项配置 Object {}

# Events

事件名
说明
回调参数
on-change 表单数据变化时触发，在 Antd 表单生成器中废弃使用 field: 数据改变的字段标识
value: 数据改变后的值
data: 表单数据
on-${ID}-change 表单数据变化时触发，ID为配置的字段标识 value: 数据改变后的值

# 方法

通过 ref 可以获取到 GenerateForm 实例并调用实例方法

方法名 说明 参数
getData 获取表单数据 -
reset 重置表单数据 -
setData 设置表单数据 表单数据，例 {key: value}
display 显示表单隐藏的表单字段 fields : 字段标识数组，例 ['name']
hide 隐藏表单字段 fields : 字段标识数组，例 ['name']
disabled 动态设置表单禁用字段 fields : 设置字段标识数组
disabled : 是否禁用

# Antd表单生成器 （GenerateAntdForm）

<fm-generate-antd-form></fm-generate-antd-form>

查看 GenerateForm