visual-form-render v1.2.0

visual-form-render

可视化表单生成工具：通过结构化 json 生成渲染表单工具，可选择配套 visual-form-builder 使用（目前构造器还需要完善）。

visual-form-builder 可使用可视化的方式生成结构化 json，供本工具使用。

安装

yarn add visual-form-render

or

npm install --save visual-form-render

使用

• 更详细的使用可参考 /example/src/app.tsx

• 运行示例代码

cd example && yarn && yarn start

import React, { Component } from 'react'

import { FormRender } from 'visual-form-render'
import 'visual-form-render/dist/index.css'

const formItemData = [
  {
    type: 'input',
    name: 'idcard',
    label: '单行文本',
    tooltip: '输入唯一身份ID',
    placeholder: '输入16位身份id',
    value: '110120119',
    description: '',
    prefix: '+86',
    suffix: '',
    errorLabel: 'ID为必填项，且不可为空',
    required: true,
  },
  {
    type: 'radio',
    name: 'memberRole',
    label: '单选',
    tooltip: '',
    value: '0',
    options: [
      {
        label: '管理员',
        value: '0',
      },
      {
        label: '普通用户',
        value: '1',
      },
      {
        label: '审核人员',
        value: '2',
      },
    ],
    errorLabel: '',
    required: false,
  },
  {
    type: 'button',
    name: 'submitBtn',
    btnType: 'submit',
    label: '提交',
  },
]

const formGlobalConfigData = {
  formLayout: 'vertical',
  labelColSpan: 6,
  wrapperColSpan: 16,
  btnColSpan: 20,
  showLabel: true,
  fontSize: '14px',
  fontColor: '#000000',
  gridLayoutCols: 2,
  disableDragGridLayout: true,
}

class Example extends Component {
  render() {
    return (
      <FormRender
        key={'FormRender'}
        formItemConfig={formData}
        formGlobalConfigData={config}
        autoSubmit
        isEdit
        outputCB={(outputJson: any) => {
          console.log('-example output：', outputJson)
          setResult(JSON.stringify(outputJson, null, 2))
        }}
      />
    )
  }
}

export default Example

API

FormRender 表单渲染器

FormItemSchemaType

表单项：属性配置结构

ItemTypeEnum

支持表单类型枚举，现已支持以下类型表单。

'input' | 'textarea' | 'radio' | 'select' | 'checkbox' | 'date' | 'span' | 'button' | 'array'

ItemOptions

表单项 options。用于 select.options、radio.options

BeforeConditionalType

目前仅支持计算关联表单项等于某个值的时候控制当前表单项显示隐藏。

⛔️ AfterConditionalType

* 🚫 此部分功能近期正在开发中，API 可能有大的改动，暂时不要使用

GlobalFormConfigType

表单整体全局配置属性

待办列表

• 渲染表单类型
  • input
  • textarea
  • radio
  • select
  • checkbox
  • date
  • span
  • button
  • array
  • object
  • file
  • number
  • url
  • color
  • switch
  • sider
  • autocomplate
• 增加前置条件
• 增加后置条件
• 支持表单栅格化布局

License

MIT © dahui4dev