VFormRender 与 Form Render(xrender)

• 本组件是在xrender 基础上，根据业务需求进行了二次封装，增加了文件上传等组件

xrender 官网及示例

xrender 官网 | antd | xrender 官网-Schema 示例（基础组件、验证、联动等完整示例）

前言

1、v* (小写 v* )开头的属性为 自定义属性
2、V（大写 V ）开头的组件为 自定义组件
3、schema 最顶层的 type 总是 object

使用方法

1、安装依赖 form-render antd
2、引入 components/VFormRender
3、修改 config.js 中 ajaxUpload（文件上传）函数
4、完成可以直接使用了。

Props

| 参数 | 说明 | 类型 | 默认值 | | ------ | ------------- | -------- | ------ | | schema | 要渲染的 JSON | object | - |

FormInstance

| 名称 | 说明 | 类型 | 版本 | | --- | --- | --- | --- | | submit | 触发表单验证并提交，与 FormRender 略有不同，该组件进行了默认值处理，提交时不论有无值都会提供默认值，保证存在定义的全部字段 | () => Promise | - | | getValues | 获取表单内部维护的数据 formData | string | - |

json schema

schema 属性详细列表

常用属性

• type 类型
• properties 属性
• title 标题
• description 说明
• enum 选项值
• enumNames 选项名

表达式

• hidden 隐藏 | readOnly 只读 | disabled 禁用
• 如： "hidden":"{{formData.xx=='xx'}}" 或者 "readOnly":"{{formData.xx=='xx'}}"
• 注意： 列表内的用 "hidden":{{rootValue.xx=='xx'}}"

验证相关

• format

• • url | email

• min

• • 当 type 为 array 时，代表最小项数；当 type 为 string 时，代表最少字数；当 type 为 number 时，代表最小值。

• max

• • 当 type 为 array 时，代表最大项数；当 type 为 string 时，代表最多字数；当 type 为 number 时，代表最大值。

• required

• • boolean 是否必填

• rules [] 正则校验，支持多条

• 示例

"rules": [
        {
          "pattern": "^[a-z]+$",
          "message":"仅支持英文字母"
        }
        ]

其他

• props

• 当基础字段不够描述组件的展示时，使用 props 字段作为扩展。props 的具体属性可以查询 antd 的对应组件文档。所有 props 中的属性都会直接透传给组件。

• 如 文本框显示为密码类型，最大长度 10

{
  "type": "object",
  "properties": {
    "input_kn6fk0": {
      "title": "输入框",
      "type": "string",
      "props": {
        "type": "password",
        "maxLength": 10
      }
    }
  }
}

完整示例

import React, { useState, useRef } from 'react';
import { Input, Form, Button } from 'antd';
import VFormRender from '@/components/VFormRender';

const App = () => {
  const formRenderRef = useRef();
  const [schema] = useState({
    type: 'object',
    properties: {
      AllString: {
        title: 'string类',
        type: 'object',
        properties: {
          input: {
            title: '简单输入框',
            type: 'string',
            placeholder: '昵称',
          },
          textarea: {
            title: '简单文本编辑框',
            type: 'string',
            format: 'textarea',
          },
          color: {
            title: '颜色选择',
            type: 'string',
            format: 'color',
          },
          image: {
            title: '图片展示',
            type: 'string',
            format: 'image',
            default: 'http://placekitten.com/200/300',
          },
          uploader: {
            title: '上传文件',
            type: 'string',
            format: 'upload',
            props: {
              action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
            },
          },
          treeSelect: {
            title: '树形选择',
            type: 'string',
            widget: 'treeSelect',
            props: {
              treeDefaultExpandAll: true,
              treeData: [
                {
                  title: 'Node1',
                  value: '0-0',
                  key: '0-0',
                  children: [
                    {
                      title: 'Child Node1',
                      value: '0-0-1',
                      key: '0-0-1',
                    },
                    {
                      title: 'Child Node2',
                      value: '0-0-2',
                      key: '0-0-2',
                    },
                  ],
                },
                {
                  title: 'Node2',
                  value: '0-1',
                  key: '0-1',
                },
              ],
            },
          },
        },
      },
      allDate: {
        title: '时间类',
        type: 'object',
        properties: {
          date: {
            title: '日期选择',
            type: 'string',
            format: 'date',
          },
          dateTime: {
            title: '日期时间选择',
            type: 'string',
            format: 'dateTime',
          },
          time: {
            title: '时间选择',
            type: 'string',
            format: 'time',
          },
          dateRange: {
            title: '日期范围',
            type: 'range',
            format: 'dateTime',
            placeholder: ['开始时间', '结束时间'],
          },
          timeRange: {
            title: '时间范围',
            type: 'range',
            format: 'time',
          },
          year: {
            title: '年份选择',
            type: 'string',
            format: 'year',
          },
          month: {
            title: '月份选择',
            type: 'string',
            format: 'month',
          },
          week: {
            title: '周选择',
            type: 'string',
            format: 'week',
          },
          quarter: {
            title: '季度选择',
            type: 'string',
            format: 'quarter',
          },
        },
      },
      allNumber: {
        title: 'number类',
        type: 'object',
        properties: {
          number1: {
            title: '数字输入框',
            description: '1 - 1000',
            type: 'number',
            min: 1,
            required: true,
            max: 1000,
          },
          number2: {
            title: '带滑动条',
            type: 'number',
            widget: 'slider',
          },
          rate: {
            title: '评价',
            type: 'number',
            widget: 'rate',
          },
        },
      },
      allBoolean: {
        title: 'boolean类',
        type: 'object',
        properties: {
          radio: {
            title: '是否通过',
            type: 'boolean',
          },
          switch: {
            title: '开关控制',
            type: 'boolean',
            widget: 'switch',
          },
        },
      },
      allEnum: {
        title: '选择类',
        type: 'object',
        properties: {
          select: {
            title: '单选',
            type: 'string',
            enum: ['a', 'b', 'c'],
            enumNames: ['早', '中', '晚'],
            default: 'a',
            widget: 'select',
          },
          radio: {
            title: '单选',
            type: 'string',
            enum: ['a', 'b', 'c'],
            enumNames: ['早', '中', '晚'],
            widget: 'radio',
          },
          multiSelect: {
            title: '多选',
            description: '下拉多选',
            type: 'array',
            required: true,
            items: {
              type: 'string',
            },
            enum: ['A', 'B', 'C', 'D'],
            enumNames: ['杭州', '武汉', '湖州', '贵阳'],
            widget: 'multiSelect',
          },
          boxes: {
            title: '多选',
            description: 'checkbox',
            type: 'array',
            items: {
              type: 'string',
            },
            enum: ['A', 'B', 'C', 'D'],
            enumNames: ['杭州', '武汉', '湖州', '贵阳'],
            widget: 'checkboxes',
          },
        },
      },
      listName2: {
        title: '对象数组',
        description: '对象数组嵌套功能',
        type: 'array',
        min: 1,
        max: 3,
        items: {
          type: 'object',
          properties: {
            input1: {
              title: '简单输入框',
              type: 'string',
            },
            select1: {
              title: '单选',
              type: 'string',
              enum: ['a', 'b', 'c'],
              enumNames: ['早', '中', '晚'],
            },
          },
        },
      },
    },
  });
  //提交表单
  const renderSubmit = () => {
    formRenderRef.current
      ?.submit()
      .then(({ data, errors }) => {
        alert('验证已通过，详细数据请看F12控制台');
        console.log('验证已通过：formData:', data, 'errors', errors);
      })
      .catch(({ data, errors }) => {
        alert('验证未通过，详细数据请看F12控制台');
        console.log('验证未通过：formData:', data, 'errors', errors);
      });
  };
  return (
    <>
      <VFormRender ref={formRenderRef} schema={schema} displayType="row" debug={false} />
      <Button type="primary" onClick={renderSubmit}>
        提交
      </Button>
    </>
  );
};

export default App;