使用
文档链接: x-render.gitee.io/form-render
Schema协议
Data Entry
Input
input: {
type: "string",
max: 20,
min: 1,
pattern: "//",
placeholder: "请输入"
}
Textarea
"textarea": {
"title": "简单文本编辑框",
"type": "string",
"format": "textarea"
},
Select
单选
select: {
title: '业务类型',
type: 'string',
enum: ['1', '2'],
enumNames: ['聚合服务商', 'SAAS服务商'],
widget: 'select',
}
多选
multiSelect: {
title: '业务类型',
type: 'array',
enum: ['1', '2'],
enumNames: ['聚合服务商', 'SAAS服务商'],
widget: 'multiSelect',
items: {
type: "string"
}
}
Date
日期选择
"date": {
"title": "日期选择",
"type": "string",
"format": "date"
},
日期时间选择
"dateTime": {
"title": "日期时间选择",
"type": "string",
"format": "dateTime"
},
时间选择
"time": {
"title": "时间选择",
"type": "string",
"format": "time"
},
日期范围
"dateRange": {
"title": "日期范围",
"type": "range",
"format": "date",
"placeholder": [
"开始时间",
"结束时间"
]
},
时间范围
"timeRange": {
"title": "时间范围",
"type": "range",
"format": "time"
},
日期时间范围
"dateTimeRange": {
"title": "日期范围",
"type": "range",
"format": "dateTime",
"placeholder": [
"开始时间",
"结束时间"
]
},
Number
"number": {
"title": "数字输入框",
"description": "1 - 1000",
"type": "number",
"min": 1,
"max": 1000
},
Rate
"rate": {
"title": "评价",
"type": "number",
"widget": "rate"
}
CheckBox
单个
"checkbox": {
"title": "是否通过",
"type": "boolean"
},
一组
"boxes": {
"title": "多选",
"description": "checkbox",
"type": "array",
"items": {
"type": "string"
},
"enum": [
"A",
"B",
"C",
"D"
],
"enumNames": [
"杭州",
"武汉",
"湖州",
"贵阳"
],
"widget": "checkboxes"
},
Radio
"radio": {
"title": "单选",
"type": "string",
"enum": [
"a",
"b",
"c"
],
"enumNames": [
"早",
"中",
"晚"
],
"widget": "radio"
},
Switch
"switch": {
"title": "开关控制",
"type": "boolean",
"widget": "switch"
}
List
列表的展示对于简单需求占位太多,复杂需求定制不够一直是痛点。所以我们给出了四种展示,充分满足从极简到复杂的所有需求
- 默认展示使用 widget: 'list0',卡片类型,用于展示数量不太多但结构复杂的 list
const schema = {
type: 'object',
properties: {
listName2: {
title: '对象数组',
description: '对象数组嵌套功能',
type: 'array',
// widget: 'list0',
items: {
type: 'object',
properties: {
input1: {
title: '简单输入框',
type: 'string',
required: true,
},
select1: {
title: '单选',
type: 'string',
enum: ['a', 'b', 'c'],
enumNames: ['早', '中', '晚'],
},
obj: {
title: '对象',
type: 'object',
properties: {
input1: {
title: '简单输入框',
type: 'string',
required: true,
},
select1: {
title: '单选',
type: 'string',
enum: ['a', 'b', 'c'],
enumNames: ['早', '中', '晚'],
},
},
},
},
},
},
},
};
- widget: 'list1' 用于展示每行只有 1-3 个简单元素的情况
const schema = {
type: 'object',
properties: {
listName2: {
title: '对象数组',
description: '对象数组嵌套功能',
type: 'array',
widget: 'list1',
items: {
type: 'object',
properties: {
input1: {
title: '简单输入框',
type: 'string',
required: true,
},
select1: {
title: '单选',
type: 'string',
enum: ['a', 'b', 'c'],
enumNames: ['早', '中', '晚'],
},
},
},
},
},
};
- widget: 'list2' 用于展示每行只有 3 - n 个简单元素的情况,特别是数据量很大需要分页的
4. widget: 'list3' 用于展示存在列表套列表,列表套对象等复杂元素的情况
高级用法
表单监听(watch)
const watch = {
// # 为全局
"#": (val) => {
console.log("表单的时时数据为:", val);
},
input2: (val) => {
alert(val)
if (val !== undefined) {
form.onItemChange("input2", val);
}
}
};
return (
<div>
<FormRender
form={form}
schema={schema}
onFinish={onFinish}
watch={watch}
/>
<Button type="primary" onClick={form.submit}>
提交
</Button>
</div>
);