index.tsx 11.9 KB
Newer Older
陈帅's avatar
陈帅 committed
1 2
import {
  Button,
陈帅's avatar
陈帅 committed
3
  Card,
陈帅's avatar
陈帅 committed
4 5
  Col,
  DatePicker,
陈帅's avatar
陈帅 committed
6 7
  Form,
  Icon,
陈帅's avatar
陈帅 committed
8 9
  Input,
  Popover,
陈帅's avatar
陈帅 committed
10 11 12
  Row,
  Select,
  TimePicker,
陈帅's avatar
陈帅 committed
13
} from 'antd';
陈帅's avatar
陈帅 committed
14 15
import React, { Component } from 'react';

16
import { Dispatch } from 'redux';
陈帅's avatar
陈帅 committed
17
import { FormComponentProps } from 'antd/es/form';
18
import { PageHeaderWrapper } from '@ant-design/pro-layout';
陈帅's avatar
陈帅 committed
19
import { connect } from 'dva';
陈帅's avatar
陈帅 committed
20 21
import TableForm from './components/TableForm';
import FooterToolbar from './components/FooterToolbar';
陈帅's avatar
陈帅 committed
22
import styles from './style.less';
23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

const { Option } = Select;
const { RangePicker } = DatePicker;

const fieldLabels = {
  name: '仓库名',
  url: '仓库域名',
  owner: '仓库管理员',
  approver: '审批人',
  dateRange: '生效日期',
  type: '仓库类型',
  name2: '任务名',
  url2: '任务描述',
  owner2: '执行人',
  approver2: '责任人',
  dateRange2: '生效日期',
  type2: '任务类型',
};

jim's avatar
jim committed
42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61
const tableData = [
  {
    key: '1',
    workId: '00001',
    name: 'John Brown',
    department: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    workId: '00002',
    name: 'Jim Green',
    department: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    workId: '00003',
    name: 'Joe Black',
    department: 'Sidney No. 1 Lake Park',
  },
];
62

63
interface PAGE_NAME_UPPER_CAMEL_CASEProps extends FormComponentProps {
陈帅's avatar
陈帅 committed
64
  dispatch: Dispatch<any>;
陈帅's avatar
陈帅 committed
65
  submitting: boolean;
66 67
}

陈帅's avatar
陈帅 committed
68
@connect(({ loading }: { loading: { effects: { [key: string]: boolean } } }) => ({
69
  submitting: loading.effects['BLOCK_NAME_CAMEL_CASE/submitAdvancedForm'],
70
}))
71
class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEProps> {
afc163's avatar
afc163 committed
72 73 74
  state = {
    width: '100%',
  };
陈帅's avatar
陈帅 committed
75

afc163's avatar
afc163 committed
76
  componentDidMount() {
jim's avatar
jim committed
77
    window.addEventListener('resize', this.resizeFooterToolbar, { passive: true });
afc163's avatar
afc163 committed
78
  }
陈帅's avatar
陈帅 committed
79

afc163's avatar
afc163 committed
80 81 82
  componentWillUnmount() {
    window.removeEventListener('resize', this.resizeFooterToolbar);
  }
陈帅's avatar
陈帅 committed
83

afc163's avatar
afc163 committed
84 85 86 87 88 89 90 91 92
  getErrorInfo = () => {
    const {
      form: { getFieldsError },
    } = this.props;
    const errors = getFieldsError();
    const errorCount = Object.keys(errors).filter(key => errors[key]).length;
    if (!errors || errorCount === 0) {
      return null;
    }
93
    const scrollToField = (fieldKey: string) => {
afc163's avatar
afc163 committed
94 95 96 97 98 99 100 101 102
      const labelNode = document.querySelector(`label[for="${fieldKey}"]`);
      if (labelNode) {
        labelNode.scrollIntoView(true);
      }
    };
    const errorList = Object.keys(errors).map(key => {
      if (!errors[key]) {
        return null;
      }
103
      const errorMessage = errors[key] || [];
afc163's avatar
afc163 committed
104 105 106
      return (
        <li key={key} className={styles.errorListItem} onClick={() => scrollToField(key)}>
          <Icon type="cross-circle-o" className={styles.errorIcon} />
107
          <div className={styles.errorMessage}>{errorMessage[0]}</div>
afc163's avatar
afc163 committed
108 109 110 111 112 113 114 115 116 117 118
          <div className={styles.errorField}>{fieldLabels[key]}</div>
        </li>
      );
    });
    return (
      <span className={styles.errorIcon}>
        <Popover
          title="表单校验信息"
          content={errorList}
          overlayClassName={styles.errorPopover}
          trigger="click"
陈帅's avatar
陈帅 committed
119 120 121 122 123 124
          getPopupContainer={(trigger: HTMLElement) => {
            if (trigger && trigger.parentNode) {
              return trigger.parentNode as HTMLElement;
            }
            return trigger;
          }}
afc163's avatar
afc163 committed
125 126 127 128 129 130 131 132
        >
          <Icon type="exclamation-circle" />
        </Popover>
        {errorCount}
      </span>
    );
  };

afc163's avatar
afc163 committed
133
  resizeFooterToolbar = () => {
jim's avatar
jim committed
134
    requestAnimationFrame(() => {
135
      const sider = document.querySelectorAll('.ant-layout-sider')[0] as HTMLDivElement;
陈帅's avatar
陈帅 committed
136 137 138 139 140 141
      if (sider) {
        const width = `calc(100% - ${sider.style.width})`;
        const { width: stateWidth } = this.state;
        if (stateWidth !== width) {
          this.setState({ width });
        }
jim's avatar
jim committed
142 143
      }
    });
jim's avatar
jim committed
144
  };
陈帅's avatar
陈帅 committed
145

afc163's avatar
afc163 committed
146 147 148 149 150 151 152 153 154
  validate = () => {
    const {
      form: { validateFieldsAndScroll },
      dispatch,
    } = this.props;
    validateFieldsAndScroll((error, values) => {
      if (!error) {
        // submit the values
        dispatch({
155
          type: 'BLOCK_NAME_CAMEL_CASE/submitAdvancedForm',
afc163's avatar
afc163 committed
156 157
          payload: values,
        });
158
      }
afc163's avatar
afc163 committed
159 160 161 162 163 164
    });
  };

  render() {
    const {
      form: { getFieldDecorator },
陈帅's avatar
陈帅 committed
165
      submitting,
afc163's avatar
afc163 committed
166
    } = this.props;
陈帅's avatar
陈帅 committed
167
    const { width } = this.state;
168
    return (
169
      <>
170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329
        <PageHeaderWrapper content="高级表单常见于一次性输入和提交大批量数据的场景。">
          <Card title="仓库管理" className={styles.card} bordered={false}>
            <Form layout="vertical" hideRequiredMark>
              <Row gutter={16}>
                <Col lg={6} md={12} sm={24}>
                  <Form.Item label={fieldLabels.name}>
                    {getFieldDecorator('name', {
                      rules: [{ required: true, message: '请输入仓库名称' }],
                    })(<Input placeholder="请输入仓库名称" />)}
                  </Form.Item>
                </Col>
                <Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
                  <Form.Item label={fieldLabels.url}>
                    {getFieldDecorator('url', {
                      rules: [{ required: true, message: '请选择' }],
                    })(
                      <Input
                        style={{ width: '100%' }}
                        addonBefore="http://"
                        addonAfter=".com"
                        placeholder="请输入"
                      />,
                    )}
                  </Form.Item>
                </Col>
                <Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
                  <Form.Item label={fieldLabels.owner}>
                    {getFieldDecorator('owner', {
                      rules: [{ required: true, message: '请选择管理员' }],
                    })(
                      <Select placeholder="请选择管理员">
                        <Option value="xiao">付晓晓</Option>
                        <Option value="mao">周毛毛</Option>
                      </Select>,
                    )}
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={16}>
                <Col lg={6} md={12} sm={24}>
                  <Form.Item label={fieldLabels.approver}>
                    {getFieldDecorator('approver', {
                      rules: [{ required: true, message: '请选择审批员' }],
                    })(
                      <Select placeholder="请选择审批员">
                        <Option value="xiao">付晓晓</Option>
                        <Option value="mao">周毛毛</Option>
                      </Select>,
                    )}
                  </Form.Item>
                </Col>
                <Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
                  <Form.Item label={fieldLabels.dateRange}>
                    {getFieldDecorator('dateRange', {
                      rules: [{ required: true, message: '请选择生效日期' }],
                    })(
                      <RangePicker
                        placeholder={['开始日期', '结束日期']}
                        style={{ width: '100%' }}
                      />,
                    )}
                  </Form.Item>
                </Col>
                <Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
                  <Form.Item label={fieldLabels.type}>
                    {getFieldDecorator('type', {
                      rules: [{ required: true, message: '请选择仓库类型' }],
                    })(
                      <Select placeholder="请选择仓库类型">
                        <Option value="private">私密</Option>
                        <Option value="public">公开</Option>
                      </Select>,
                    )}
                  </Form.Item>
                </Col>
              </Row>
            </Form>
          </Card>
          <Card title="任务管理" className={styles.card} bordered={false}>
            <Form layout="vertical" hideRequiredMark>
              <Row gutter={16}>
                <Col lg={6} md={12} sm={24}>
                  <Form.Item label={fieldLabels.name2}>
                    {getFieldDecorator('name2', {
                      rules: [{ required: true, message: '请输入' }],
                    })(<Input placeholder="请输入" />)}
                  </Form.Item>
                </Col>
                <Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
                  <Form.Item label={fieldLabels.url2}>
                    {getFieldDecorator('url2', {
                      rules: [{ required: true, message: '请选择' }],
                    })(<Input placeholder="请输入" />)}
                  </Form.Item>
                </Col>
                <Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
                  <Form.Item label={fieldLabels.owner2}>
                    {getFieldDecorator('owner2', {
                      rules: [{ required: true, message: '请选择管理员' }],
                    })(
                      <Select placeholder="请选择管理员">
                        <Option value="xiao">付晓晓</Option>
                        <Option value="mao">周毛毛</Option>
                      </Select>,
                    )}
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={16}>
                <Col lg={6} md={12} sm={24}>
                  <Form.Item label={fieldLabels.approver2}>
                    {getFieldDecorator('approver2', {
                      rules: [{ required: true, message: '请选择审批员' }],
                    })(
                      <Select placeholder="请选择审批员">
                        <Option value="xiao">付晓晓</Option>
                        <Option value="mao">周毛毛</Option>
                      </Select>,
                    )}
                  </Form.Item>
                </Col>
                <Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
                  <Form.Item label={fieldLabels.dateRange2}>
                    {getFieldDecorator('dateRange2', {
                      rules: [{ required: true, message: '请输入' }],
                    })(
                      <TimePicker
                        placeholder="提醒时间"
                        style={{ width: '100%' }}
                        getPopupContainer={trigger => {
                          if (trigger && trigger.parentNode) {
                            return trigger.parentNode as HTMLElement;
                          }
                          return trigger;
                        }}
                      />,
                    )}
                  </Form.Item>
                </Col>
                <Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
                  <Form.Item label={fieldLabels.type2}>
                    {getFieldDecorator('type2', {
                      rules: [{ required: true, message: '请选择仓库类型' }],
                    })(
                      <Select placeholder="请选择仓库类型">
                        <Option value="private">私密</Option>
                        <Option value="public">公开</Option>
                      </Select>,
                    )}
                  </Form.Item>
                </Col>
              </Row>
            </Form>
          </Card>
          <Card title="成员管理" bordered={false}>
            {getFieldDecorator('members', {
              initialValue: tableData,
            })(<TableForm />)}
          </Card>
        </PageHeaderWrapper>
陈帅's avatar
陈帅 committed
330
        <FooterToolbar style={{ width }}>
afc163's avatar
afc163 committed
331 332
          {this.getErrorInfo()}
          <Button type="primary" onClick={this.validate} loading={submitting}>
afc163's avatar
afc163 committed
333 334
            提交
          </Button>
陈帅's avatar
陈帅 committed
335
        </FooterToolbar>
336
      </>
337
    );
afc163's avatar
afc163 committed
338
  }
339
}
陈帅's avatar
陈帅 committed
340

陈帅's avatar
陈帅 committed
341
export default Form.create<PAGE_NAME_UPPER_CAMEL_CASEProps>()(PAGE_NAME_UPPER_CAMEL_CASE);