表单的json化配置，使用
JSON Schema国际规范
结构描述
{
type: 'objcet', // 组件值的类型
properties: { // 只在对象组件（type: object）中使用，properties 用于包裹对象的子属性：
title: '输入框', // 标题，作为label展示
type: 'string', // 组件值的类型
widget: 'textarea', // 部件名称
default: '默认值', // 默认值
required: true, // 必填
}
}基础属性
type,format,enum和widget字段决定了使用哪个组件来渲染type,format,min,max,required和rules字段用于做校验判断props字段用于补充组件支持的更为细致的属性
{
displayType: 'row',
labelWidth: 130,
type: 'object',
properties: {
url: {
title: 'url输入框',
placeholder: '//www.taobao.com',
type: 'string',
format: 'url',
required: true,
},
email: {
title: 'email输入框',
type: 'string',
format: 'email',
},
string: {
title: '正则校验字符串',
description: 'a-z',
type: 'string',
hidden: false,
disabled: true,
rules: [{ pattern: '^[a-z]+$' }]
},
},
}| 参数 | 说明 | 类型 | 可选 | 默认 |
|---|---|---|---|---|
| title | 标题 | String | - | - |
| type | 值的数据类型 | String | 'string', 'number', 'boolean', 'array', 'object', 'range', 'html' | - |
| format | 格式化 | String | 'image', 'textarea', 'color'/'email', 'url'/ 'dateTime', 'date', 'time', 'upload' | |
| displayType | 展示方式 | String | 'row', 'column' | row |
| description | 描述 | String | - | - |
| descType | 描述的类型 | String | 'text'/'icon' | - |
展示
import React, { useEffect } from 'react'
import { Button } from 'antd';
import FormJson, { useForm } from 'RForm';
import Setting from './Edit/setting';
const schema = {
type: 'object',
displayType: 'row',
properties: {
input1: {
title: '简单输入框',
type: 'string',
required: true,
default: '111',
description: '来FR个提示',
tooltip: 'antd提示无效',
width: '33.333%',
widget: 'input',
seq: 1,
},
select1: {
title: '单选',
type: 'string',
width: '33.333%',
tooltip: 'antd提示无效',
widget: 'select',
api: '基础数据',
seq: 2,
},
object2: {
title: '单选',
type: 'string',
enum: ['ck1', 'ck2'],
enumNames: ['选项一', '选项二'],
width: '33.333%',
widget: 'radio',
seq: 3,
},
object3: {
title: '复选',
type: 'array',
enum: ['ck1', 'ck2'],
enumNames: ['选项一', '选项二'],
width: '33.333%',
widget: 'checkboxes',
seq: 4,
buttons: [
{
"text": "复制",
"icon": "CopyOutlined",
"callback": "copyLast"
}
]
},
},
};
const Paas = () => {
const form = useForm();
// 提交表单
const onFinish = (formData, errors) => {
if (errors.length > 0) {
console.log('errors:', errors)
} else {
console.log('formData:', formData)
}
};
useEffect(() => {
// 加载数据至下拉框: 服务端获取schema非空时使用
setTimeout(() => {
form && form.setSchemaByPath('select1', {
enum: ['east', 'south', 'west', 'north'],
enumNames: ['东', '南', '西', '北'],
});
}, 1000);
}, [])
return (
<>
<div>
<div>k333</div>
<div>
<Setting schema={schema} form={form} />
<FormJson schema={schema} form={form} onFinish={onFinish} />
<Button type="primary" onClick={() => form.submit()}>提交</Button>
</div>
</div>
</>
)
};
export default Paas;
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent