1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
import React, { useEffect } from 'react';
import { Form, Button, Select, Input, Radio, Checkbox } from 'antd';
import Upload from '@/components/Upload';
import { useForm } from 'antd/lib/form/Form';
export const renderButtonGroup = props => {
const { buttons, wrapper = false } = props;
const bts = buttons.map(bt => {
const { text, ...rest } = bt;
return (
<Button {...rest} key={text}>
{text}
</Button>
);
});
if (wrapper) {
return wrapper(bts);
}
return bts;
};
export const ITEM_TYPE = {
INPUT: 'INPUT',
SELECT: 'SELECT', // 下拉选择
IMGSHOP: 'IMGSHOP', // 图片库
SINGLE_RADIO: 'SINGLE_RADIO', // 单选radio
CHECK_BOX: 'CHECK_BOX', // 多选框
};
const BaseFormItem = itemOption => {
const { formType, options = [], ...rest } = itemOption;
switch (formType) {
case ITEM_TYPE.INPUT:
// eslint-disable-next-line no-undef
return <Input allowClear {...rest} />;
case ITEM_TYPE.SELECT:
return (
<Select {...rest}>
{options.map((o, i) => (
<Select.Option key={`item_${i}`} {...o} />
))}
</Select>
);
case ITEM_TYPE.IMGSHOP:
return <Upload {...rest} />;
case ITEM_TYPE.SINGLE_RADIO:
// eslint-disable-next-line no-case-declarations
return (
<Radio.Group {...rest}>
{options.map((o, i) => (
<Radio key={`item_${i}`} {...o} />
))}
</Radio.Group>
);
case ITEM_TYPE.CHECK_BOX:
return (
<Checkbox.Group {...rest}>
{options.map((o, i) => (
<Checkbox key={`item_${i}`} {...o} />
))}
</Checkbox.Group>
);
default:
return null;
}
};
/**
* 基本表单
* @param {*} props
* items: 每个表单项
* buttons: 表单按钮
*/
const BaseForm = props => {
const {
items,
buttons = [],
buttonsWraper,
getForm, // 用来获取表单实例
formProps,
children,
...restProps
} = props;
const [form] = useForm();
useEffect(() => {
// 执行回调让外部组件拿到表单实例
// eslint-disable-next-line no-unused-expressions
getForm && getForm(form);
}, []);
return (
<div style={{ height: '800px', overflow: 'scroll' }}>
<Form form={form} {...formProps} {...restProps}>
{items &&
items.map(item => {
const {
label,
dataIndex,
initialValue = '',
rules = [],
formItemProps = {},
...rest
} = item;
return (
<Form.Item
label={label}
name={dataIndex}
key={`formItem_${dataIndex}`}
rules={rules}
initialValue={initialValue}
{...formItemProps}
>
<BaseFormItem {...rest} />
</Form.Item>
);
})}
{renderButtonGroup({
buttons,
wrapper: buttonsWraper || (bts => <Form.Item>{bts}</Form.Item>),
})}
{children}
</Form>
</div>
);
};
export default BaseForm;