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;