index.js 2.99 KB
Newer Older
1
import React, { useEffect } from 'react';
张烨's avatar
张烨 committed
2
import { Form, Button, Select, Input, Radio, Checkbox } from 'antd';
张烨's avatar
张烨 committed
3
import Upload from '@/components/Upload';
4
import { useForm } from 'antd/lib/form/Form';
张烨's avatar
张烨 committed
5

6
export const renderButtonGroup = props => {
张烨's avatar
张烨 committed
7
  const { buttons, wrapper = false } = props;
张烨's avatar
张烨 committed
8
  const bts = buttons.map(bt => {
张烨's avatar
张烨 committed
9
    const { text, ...rest } = bt;
10
    return (
张烨's avatar
张烨 committed
11
      <Button {...rest} key={text}>
12 13 14
        {text}
      </Button>
    );
张烨's avatar
张烨 committed
15 16
  });
  if (wrapper) {
张烨's avatar
张烨 committed
17
    return wrapper(bts);
张烨's avatar
张烨 committed
18 19 20 21
  }
  return bts;
};

张烨's avatar
张烨 committed
22 23
export const ITEM_TYPE = {
  INPUT: 'INPUT',
张烨's avatar
张烨 committed
24 25 26 27
  SELECT: 'SELECT', // 下拉选择
  IMGSHOP: 'IMGSHOP', // 图片库
  SINGLE_RADIO: 'SINGLE_RADIO', // 单选radio
  CHECK_BOX: 'CHECK_BOX', // 多选框
张烨's avatar
张烨 committed
28 29 30 31
};

const BaseFormItem = itemOption => {
  const { formType, options = [], ...rest } = itemOption;
张烨's avatar
张烨 committed
32
  switch (formType) {
张烨's avatar
张烨 committed
33
    case ITEM_TYPE.INPUT:
张烨's avatar
张烨 committed
34 35
      // eslint-disable-next-line no-undef
      return <Input allowClear {...rest} />;
张烨's avatar
张烨 committed
36 37 38
    case ITEM_TYPE.SELECT:
      return (
        <Select {...rest}>
张烨's avatar
张烨 committed
39 40
          {options.map((o, i) => (
            <Select.Option key={`item_${i}`} {...o} />
张烨's avatar
张烨 committed
41 42 43 44 45 46 47 48 49
          ))}
        </Select>
      );
    case ITEM_TYPE.IMGSHOP:
      return <Upload {...rest} />;
    case ITEM_TYPE.SINGLE_RADIO:
      // eslint-disable-next-line no-case-declarations
      return (
        <Radio.Group {...rest}>
张烨's avatar
张烨 committed
50
          {options.map((o, i) => (
51
            <Radio key={`item_${i}`} {...o} />
张烨's avatar
张烨 committed
52 53 54
          ))}
        </Radio.Group>
      );
张烨's avatar
张烨 committed
55 56 57
    case ITEM_TYPE.CHECK_BOX:
      return (
        <Checkbox.Group {...rest}>
张烨's avatar
张烨 committed
58 59
          {options.map((o, i) => (
            <Checkbox key={`item_${i}`} {...o} />
张烨's avatar
张烨 committed
60 61 62
          ))}
        </Checkbox.Group>
      );
张烨's avatar
张烨 committed
63 64 65 66 67 68 69 70 71 72 73 74 75 76 77
    default:
      return null;
  }
};

/**
 * 基本表单
 * @param {*} props
 *  items: 每个表单项
 *  buttons: 表单按钮
 */
const BaseForm = props => {
  const {
    items,
    buttons = [],
张烨's avatar
张烨 committed
78
    buttonsWraper,
张烨's avatar
张烨 committed
79 80
    getForm, // 用来获取表单实例
    formProps,
张烨's avatar
张烨 committed
81
    children,
82
    ...restProps
张烨's avatar
张烨 committed
83 84 85 86 87 88 89 90 91 92 93
  } = props;

  const [form] = useForm();

  useEffect(() => {
    // 执行回调让外部组件拿到表单实例
    // eslint-disable-next-line no-unused-expressions
    getForm && getForm(form);
  }, []);

  return (
94
    <Form size="small" form={form} {...formProps} {...restProps}>
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
      {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,
张烨's avatar
张烨 committed
120
        wrapper: buttonsWraper || (bts => <Form.Item>{bts}</Form.Item>),
张烨's avatar
张烨 committed
121
      })}
张烨's avatar
张烨 committed
122
      {children}
张烨's avatar
张烨 committed
123 124 125 126 127
    </Form>
  );
};

export default BaseForm;