index.tsx 8.66 KB
Newer Older
陈帅's avatar
陈帅 committed
1
import React, { Component } from 'react';
2
import { connect } from 'dva';
陈帅's avatar
陈帅 committed
3
import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
afc163's avatar
afc163 committed
4
import {
jim's avatar
jim committed
5 6 7 8 9 10 11 12 13 14
  Form,
  Input,
  DatePicker,
  Select,
  Button,
  Card,
  InputNumber,
  Radio,
  Icon,
  Tooltip,
afc163's avatar
afc163 committed
15
} from 'antd';
16
import { PageHeaderWrapper } from '@ant-design/pro-layout';
afc163's avatar
afc163 committed
17
import styles from './style.less';
陈帅's avatar
陈帅 committed
18
import { FormComponentProps } from 'antd/es/form';
陈帅's avatar
陈帅 committed
19
import { Dispatch } from 'redux';
20 21

const FormItem = Form.Item;
afc163's avatar
afc163 committed
22
const { Option } = Select;
23
const { RangePicker } = DatePicker;
afc163's avatar
afc163 committed
24
const { TextArea } = Input;
25

陈帅's avatar
陈帅 committed
26 27
interface PAGE_NAME_UPPER_CAMEL_CASEProps extends FormComponentProps {
  submitting: boolean;
陈帅's avatar
陈帅 committed
28
  dispatch: Dispatch<any>;
陈帅's avatar
陈帅 committed
29 30 31
}
class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEProps> {
  handleSubmit = (e: React.FormEvent) => {
陈帅's avatar
陈帅 committed
32
    const { dispatch, form } = this.props;
33
    e.preventDefault();
陈帅's avatar
陈帅 committed
34
    form.validateFieldsAndScroll((err, values) => {
35
      if (!err) {
陈帅's avatar
陈帅 committed
36
        dispatch({
37
          type: 'BLOCK_NAME_CAMEL_CASE/submitRegularForm',
38 39 40 41
          payload: values,
        });
      }
    });
jim's avatar
jim committed
42
  };
陈帅's avatar
陈帅 committed
43

44 45
  render() {
    const { submitting } = this.props;
陈帅's avatar
陈帅 committed
46 47 48
    const {
      form: { getFieldDecorator, getFieldValue },
    } = this.props;
49 50 51 52

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
afc163's avatar
afc163 committed
53
        sm: { span: 7 },
54 55 56 57 58 59 60 61 62 63 64
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 },
      },
    };

    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
afc163's avatar
afc163 committed
65
        sm: { span: 10, offset: 7 },
66 67 68 69
      },
    };

    return (
陈帅's avatar
陈帅 committed
70
      <PageHeaderWrapper content={<FormattedMessage id="BLOCK_NAME.basic.description" />}>
71
        <Card bordered={false}>
jim's avatar
jim committed
72
          <Form onSubmit={this.handleSubmit} hideRequiredMark style={{ marginTop: 8 }}>
73
            <FormItem {...formItemLayout} label={<FormattedMessage id="BLOCK_NAME.title.label" />}>
afc163's avatar
afc163 committed
74
              {getFieldDecorator('title', {
jim's avatar
jim committed
75 76 77
                rules: [
                  {
                    required: true,
78
                    message: formatMessage({ id: 'BLOCK_NAME.title.required' }),
jim's avatar
jim committed
79 80
                  },
                ],
81
              })(<Input placeholder={formatMessage({ id: 'BLOCK_NAME.title.placeholder' })} />)}
82
            </FormItem>
83
            <FormItem {...formItemLayout} label={<FormattedMessage id="BLOCK_NAME.date.label" />}>
afc163's avatar
afc163 committed
84
              {getFieldDecorator('date', {
jim's avatar
jim committed
85 86 87
                rules: [
                  {
                    required: true,
88
                    message: formatMessage({ id: 'BLOCK_NAME.date.required' }),
jim's avatar
jim committed
89 90
                  },
                ],
91 92 93 94
              })(
                <RangePicker
                  style={{ width: '100%' }}
                  placeholder={[
95 96
                    formatMessage({ id: 'BLOCK_NAME.placeholder.start' }),
                    formatMessage({ id: 'BLOCK_NAME.placeholder.end' }),
97
                  ]}
陈帅's avatar
陈帅 committed
98
                />,
99
              )}
100
            </FormItem>
101
            <FormItem {...formItemLayout} label={<FormattedMessage id="BLOCK_NAME.goal.label" />}>
afc163's avatar
afc163 committed
102
              {getFieldDecorator('goal', {
jim's avatar
jim committed
103 104 105
                rules: [
                  {
                    required: true,
106
                    message: formatMessage({ id: 'BLOCK_NAME.goal.required' }),
jim's avatar
jim committed
107 108
                  },
                ],
109
              })(
jim's avatar
jim committed
110 111
                <TextArea
                  style={{ minHeight: 32 }}
112
                  placeholder={formatMessage({ id: 'BLOCK_NAME.goal.placeholder' })}
jim's avatar
jim committed
113
                  rows={4}
陈帅's avatar
陈帅 committed
114
                />,
115 116
              )}
            </FormItem>
xiaohuoni's avatar
xiaohuoni committed
117 118 119 120
            <FormItem
              {...formItemLayout}
              label={<FormattedMessage id="BLOCK_NAME.standard.label" />}
            >
afc163's avatar
afc163 committed
121
              {getFieldDecorator('standard', {
jim's avatar
jim committed
122 123 124
                rules: [
                  {
                    required: true,
125
                    message: formatMessage({ id: 'BLOCK_NAME.standard.required' }),
jim's avatar
jim committed
126 127
                  },
                ],
128 129 130
              })(
                <TextArea
                  style={{ minHeight: 32 }}
131
                  placeholder={formatMessage({ id: 'BLOCK_NAME.standard.placeholder' })}
132
                  rows={4}
陈帅's avatar
陈帅 committed
133
                />,
134
              )}
135 136 137
            </FormItem>
            <FormItem
              {...formItemLayout}
afc163's avatar
afc163 committed
138 139
              label={
                <span>
140
                  <FormattedMessage id="BLOCK_NAME.client.label" />
afc163's avatar
afc163 committed
141
                  <em className={styles.optional}>
142 143
                    <FormattedMessage id="BLOCK_NAME.form.optional" />
                    <Tooltip title={<FormattedMessage id="BLOCK_NAME.label.tooltip" />}>
afc163's avatar
afc163 committed
144 145 146 147 148
                      <Icon type="info-circle-o" style={{ marginRight: 4 }} />
                    </Tooltip>
                  </em>
                </span>
              }
149
            >
afc163's avatar
afc163 committed
150
              {getFieldDecorator('client')(
陈帅's avatar
陈帅 committed
151
                <Input placeholder={formatMessage({ id: 'BLOCK_NAME.client.placeholder' })} />,
152 153 154 155
              )}
            </FormItem>
            <FormItem
              {...formItemLayout}
jim's avatar
jim committed
156 157
              label={
                <span>
158
                  <FormattedMessage id="BLOCK_NAME.invites.label" />
159
                  <em className={styles.optional}>
160
                    <FormattedMessage id="BLOCK_NAME.form.optional" />
161
                  </em>
jim's avatar
jim committed
162 163
                </span>
              }
164
            >
afc163's avatar
afc163 committed
165
              {getFieldDecorator('invites')(
陈帅's avatar
陈帅 committed
166
                <Input placeholder={formatMessage({ id: 'BLOCK_NAME.invites.placeholder' })} />,
167 168
              )}
            </FormItem>
afc163's avatar
afc163 committed
169 170
            <FormItem
              {...formItemLayout}
jim's avatar
jim committed
171 172
              label={
                <span>
173
                  <FormattedMessage id="BLOCK_NAME.weight.label" />
174
                  <em className={styles.optional}>
175
                    <FormattedMessage id="BLOCK_NAME.form.optional" />
176
                  </em>
jim's avatar
jim committed
177 178
                </span>
              }
afc163's avatar
afc163 committed
179
            >
180 181
              {getFieldDecorator('weight')(
                <InputNumber
182
                  placeholder={formatMessage({ id: 'BLOCK_NAME.weight.placeholder' })}
183 184
                  min={0}
                  max={100}
陈帅's avatar
陈帅 committed
185
                />,
186
              )}
afc163's avatar
afc163 committed
187
              <span className="ant-form-text">%</span>
afc163's avatar
afc163 committed
188
            </FormItem>
189 190
            <FormItem
              {...formItemLayout}
191 192
              label={<FormattedMessage id="BLOCK_NAME.public.label" />}
              help={<FormattedMessage id="BLOCK_NAME.label.help" />}
193
            >
afc163's avatar
afc163 committed
194 195 196 197
              <div>
                {getFieldDecorator('public', {
                  initialValue: '1',
                })(
afc163's avatar
afc163 committed
198
                  <Radio.Group>
199
                    <Radio value="1">
200
                      <FormattedMessage id="BLOCK_NAME.radio.public" />
201 202
                    </Radio>
                    <Radio value="2">
203
                      <FormattedMessage id="BLOCK_NAME.radio.partially-public" />
204 205
                    </Radio>
                    <Radio value="3">
206
                      <FormattedMessage id="BLOCK_NAME.radio.private" />
207
                    </Radio>
陈帅's avatar
陈帅 committed
208
                  </Radio.Group>,
afc163's avatar
afc163 committed
209
                )}
afc163's avatar
afc163 committed
210 211 212 213
                <FormItem style={{ marginBottom: 0 }}>
                  {getFieldDecorator('publicUsers')(
                    <Select
                      mode="multiple"
214
                      placeholder={formatMessage({ id: 'BLOCK_NAME.publicUsers.placeholder' })}
afc163's avatar
afc163 committed
215 216 217 218 219
                      style={{
                        margin: '8px 0',
                        display: getFieldValue('public') === '2' ? 'block' : 'none',
                      }}
                    >
220
                      <Option value="1">
221
                        <FormattedMessage id="BLOCK_NAME.option.A" />
222 223
                      </Option>
                      <Option value="2">
224
                        <FormattedMessage id="BLOCK_NAME.option.B" />
225 226
                      </Option>
                      <Option value="3">
227
                        <FormattedMessage id="BLOCK_NAME.option.C" />
228
                      </Option>
陈帅's avatar
陈帅 committed
229
                    </Select>,
afc163's avatar
afc163 committed
230
                  )}
231
                </FormItem>
afc163's avatar
afc163 committed
232 233
              </div>
            </FormItem>
afc163's avatar
afc163 committed
234
            <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
235
              <Button type="primary" htmlType="submit" loading={submitting}>
236
                <FormattedMessage id="BLOCK_NAME.form.submit" />
237 238
              </Button>
              <Button style={{ marginLeft: 8 }}>
239
                <FormattedMessage id="BLOCK_NAME.form.save" />
240 241 242 243
              </Button>
            </FormItem>
          </Form>
        </Card>
244
      </PageHeaderWrapper>
245 246 247
    );
  }
}
lijiehua's avatar
lijiehua committed
248

陈帅's avatar
陈帅 committed
249 250 251 252 253
export default Form.create<PAGE_NAME_UPPER_CAMEL_CASEProps>(
  connect(({ loading }: { loading: { effects: { [key: string]: boolean } } }) => ({
    submitting: loading.effects['BLOCK_NAME_CAMEL_CASE/submitRegularForm'],
  }))(PAGE_NAME_UPPER_CAMEL_CASE),
);