index.tsx 8.66 KB
Newer Older
afc163's avatar
afc163 committed
1
import {
jim's avatar
jim committed
2 3
  Button,
  Card,
陈帅's avatar
陈帅 committed
4 5 6 7
  DatePicker,
  Form,
  Icon,
  Input,
jim's avatar
jim committed
8 9
  InputNumber,
  Radio,
陈帅's avatar
陈帅 committed
10
  Select,
jim's avatar
jim committed
11
  Tooltip,
afc163's avatar
afc163 committed
12
} from 'antd';
陈帅's avatar
陈帅 committed
13 14 15 16 17
import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
import React, { Component } from 'react';

import { Dispatch } from 'redux';
import { FormComponentProps } from 'antd/es/form';
18
import { PageHeaderWrapper } from '@ant-design/pro-layout';
陈帅's avatar
陈帅 committed
19
import { connect } from 'dva';
afc163's avatar
afc163 committed
20
import styles from './style.less';
21 22

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

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

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

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

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

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

陈帅's avatar
陈帅 committed
250 251 252 253 254
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),
);