import { Button } from 'antd';
import React, { useRef } from 'react';
import { XForm } from '../packages/react/src/index';
import { ISchema } from '../packages/types/src/index';
const schema: ISchema = [
{
key: 'array1',
type: 'Array',
ui: { label: 'Table' },
props: {
type: 'Table'
},
children: [
{
key: 'name',
type: 'Input',
ui: {
label: '姓名'
}
},
{
key: 'age',
type: 'InputNumber',
ui: {
label: '年龄'
}
},
{
key: 'sex',
type: 'Radio',
ui: {
label: '性别'
},
options: [
{
name: '男',
value: 'male'
},
{
name: '女',
value: 'female'
}
]
}
],
rules: [
{
type: 'array',
required: true,
defaultField: {
type: 'object',
fields: {
name: { type: 'string', required: true },
age: { type: 'number', required: true },
sex: { type: 'string', required: true }
}
},
trigger: 'change'
}
]
},
{
key: 'array2',
type: 'Array',
ui: { label: 'Card' },
props: {
type: 'Card'
},
children: [
{
key: 'input111',
type: 'Input',
ui: {
label: '姓名'
}
},
{
key: 'input222',
type: 'Input',
ui: {
label: '年龄'
}
},
{
key: 'input333',
type: 'Select',
value: 1,
ui: {
label: '性别'
},
options: [
{
name: '男',
value: 1
},
{
name: '女',
value: 0
}
]
}
],
rules: [
{
type: 'array',
required: true,
defaultField: {
type: 'object',
fields: {
name: { type: 'string', required: true },
age: { type: 'number', required: true },
sex: { type: 'string', required: true }
}
},
trigger: 'change'
}
]
},
{
key: 'hint',
type: 'Input',
status: 'preview',
ui: {
label: '以下都是展平的嵌套对象'
}
},
{
key: 'group1',
type: 'Object',
ui: {
label: '嵌套'
},
children: [
{
key: 'input1.1',
type: 'Input',
value: '111',
ui: {
label: '姓名'
}
},
{
key: 'group1.1',
type: 'Object',
ui: {
label: '成绩'
},
children: [
{
key: 'input1.1.1',
type: 'Input',
value: '111',
ui: {
label: '体育'
}
},
{
key: 'group1.1.1',
type: 'Object',
ui: {
label: '主科'
},
children: [
{
key: 'input1.1.1.1',
type: 'Input',
value: '111',
ui: {
label: '语文'
}
}
]
}
]
},
{
key: 'input1.2',
type: 'Input',
value: '111',
ui: {
label: '身高'
}
}
]
},
{
key: 'activityName',
type: 'Input',
ui: {
label: '活动名称'
},
props: {
placeholder: '不能超过三十个字'
}
},
{
key: 'ranks',
type: 'Array',
ui: { label: '榜单配置', required: true },
props: {
type: 'Card',
max: 10,
min: 1
},
children: [
{
key: 'liveType',
type: 'Radio',
value: 0,
ui: {
label: '榜单分区',
required: true,
labelCol: { span: 6 },
wrapperCol: { span: 18 }
},
options: [
{ name: '全区', value: 0 },
{ name: '视频', value: 1 },
{ name: '音频', value: 2 }
]
},
{
key: 'rankMemberType',
type: 'Radio',
value: 1,
ui: {
label: '榜单类型',
required: true,
labelCol: { span: 6 },
wrapperCol: { span: 18 }
},
options: [
{ name: '主播榜', value: 1 },
{ name: '用户榜', value: 2 }
]
},
{
key: 'rankGiftType',
type: 'Radio',
value: 1,
ui: {
label: '统计内容',
required: true,
labelCol: { span: 6 },
wrapperCol: { span: 18 }
},
options: [
{ name: '音符榜(统计所有礼物)', value: 1 },
{ name: '道具榜(统计特定礼物)', value: 2 }
]
},
{
key: 'giftIntegralRatio',
type: 'InputNumber',
value: 1,
ui: {
label: '积分计算',
tooltip: '1音符等于多少积分',
required: true,
labelCol: { span: 6 },
wrapperCol: { span: 18 }
},
props: {
placeholder: '>0两位小数',
min: 0.01,
step: 0.01
},
listeners: [
{
watch: ['rankGiftType'],
condition: 'rankGiftType.value != 1',
set: {
status: 'hidden'
}
}
],
rules: [
{
required: true,
message: '请填写积分计算'
}
]
},
{
key: 'notScoreFreeGift',
type: 'Switch',
value: false,
ui: {
label: '免费礼物不计入积分',
tooltip: '不勾选此项,免费礼物会按照比例计入积分',
required: true,
labelCol: { span: 6 },
wrapperCol: { span: 18 }
},
listeners: [
{
watch: ['rankGiftType'],
condition: 'rankGiftType.value != 1',
set: {
status: 'hidden'
}
}
]
},
{
key: 'specifyGifts',
type: 'Array',
status: 'edit',
ui: {
label: '积分计算',
tooltip:
'最多添加 10 个礼物',
required: true,
labelCol: { span: 6 },
wrapperCol: { span: 18 }
},
props: {
type: 'Table',
max: 10,
min: 1
},
children: [
{
key: 'giftId',
type: 'InputNumber',
ui: {
label: '礼物Id',
required: true
},
props: {
placeholder: '背包Id',
min: 1,
step: 1
},
rules: [
{
required: true,
message: '请填写礼物Id'
}
]
},
{
key: 'giftName',
type: 'Input',
status: 'preview',
ui: {
label: '礼物名称'
},
listeners: [
{
watch: ['giftId'],
set: (_valid, field, form) => {
const id = form.getValue('giftId');
if (!id) {
return;
}
field.setValue(id);
}
}
]
},
{
key: 'ratio',
type: 'InputNumber',
value: 1,
ui: {
label: '对应积分',
required: true
},
props: {
placeholder: '>=1整数',
min: 1,
step: 1
},
rules: [
{
required: true,
message: '请填写对应积分'
}
]
}
],
listeners: [
{
watch: ['rankGiftType'],
condition: 'rankGiftType.value != 2',
set: {
status: 'hidden'
}
}
],
rules: [
{
type: 'array',
required: true,
message: '请添加至少一个礼物'
}
]
},
{
key: 'topLimit',
type: 'InputNumber',
value: 200,
ui: {
label: '榜单显示个数',
required: true,
labelCol: { span: 6 },
wrapperCol: { span: 18 }
},
props: {
placeholder: '>=1整数',
min: 1,
step: 1
},
rules: [
{
required: true,
message: '请填写榜单显示个数'
}
]
},
{
key: 'userIdsType',
type: 'Radio',
value: 0,
ui: {
label: '参与活动UID',
required: true,
labelCol: { span: 6 },
wrapperCol: { span: 18 }
},
options: [
{ name: '全区', value: 0 },
{ name: '黑名单', value: 1 },
{ name: '白名单', value: 2 }
]
},
{
key: 'blackUserIds',
type: 'TextArea',
ui: {
label: '黑名单',
labelCol: { span: 6 },
wrapperCol: { span: 18 }
},
props: {
placeholder: '请输入UID,多个UID请用英文逗号或换行分隔',
autoSize: true
},
listeners: [
{
watch: ['userIdsType'],
condition: 'userIdsType.value != 2',
set: {
status: 'hidden'
}
}
],
rules: [
{
required: true,
message: '请填写黑名单'
}
]
},
{
key: 'whiteUserIds',
type: 'TextArea',
ui: {
label: '白名单',
labelCol: { span: 6 },
wrapperCol: { span: 18 }
},
props: {
placeholder: '请输入UID,多个UID请用英文逗号或换行分隔',
autoSize: true
},
listeners: [
{
watch: ['userIdsType'],
condition: 'userIdsType.value != 3',
set: {
status: 'hidden'
}
}
],
rules: [
{
required: true,
message: '请填写白名单'
}
]
}
],
rules: [
{
type: 'array',
required: true,
message: '请添加至少一个榜单'
}
]
}
];
export default function() {
const formRef = useRef(null);
const onSubmit = () => {
formRef.current.submit().then((data: any) => {
console.log(data);
});
};
const onReset = () => {
formRef.current.reset();
};
const onEmpty = () => {
formRef.current.empty();
};
return (
<>