Hotax/src/routes/Resource/Picture/PictureSingleUpload.js

import React, { PureComponent, Fragment } from 'react';
import { Form, Input, Button, Alert } from 'antd';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import Uploader from '../../../components/AXUpload';
import { Hotax } from '../../../utils/config';

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 14 },
    md: { span: 12 },
  },
};
const submitFormLayout = {
  wrapperCol: {
    xs: { span: 24, offset: 0 },
    sm: { span: 12, offset: 6 },
  },
};

function picNameFormat(name) {
  if (!name) return name;
  const separatorIndex = name.lastIndexOf('.');
  if (separatorIndex !== -1) {
    return name.substring(0, separatorIndex);
  }
  return name;
}

@Form.create()
@connect(({ loading }) => ({
  submitting: loading.models.resource,
}))
export default class PictureSingleUpload extends PureComponent {
  state = {
    fileList: [],
    code: null,
  };
  handleCodeInputChange = (e) => {
    this.setState({ code: e.target.value });
  };
  handleOnChangeEvent = (fileList) => {
    this.setState({ fileList });
    return fileList;
  };
  handlePageBack = () => {
    const { UIParams, Queryers, isCard } = this.props.location.state || {};
    this.props.dispatch(
      routerRedux.push({
        pathname: '/resource/picture',
        state: {
          isCard,
          UIParams,
          Queryers,
        },
      })
    );
  };
  handlePageSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        const { fileList, ...params } = values;
        if (Array.isArray(fileList) && fileList.length) {
          params.url = fileList[0].url;
        }
        params.type = Hotax.RESOURCE_IMAGE;
        params.status = Hotax.STATUS_NORMAL;
        this.props.dispatch({
          type: 'resource/createImage',
          payload: params,
        });
      }
    });
  };
  render() {
    const { form, submitting } = this.props;
    const { getFieldDecorator } = form;
    const { fileList, code } = this.state;
    const firstPicture = fileList[0] || {};
    const { type, size, path, name } = firstPicture;

    return (
      <Form onSubmit={this.handlePageSubmit}>
        <Form.Item {...submitFormLayout}>
          <Alert
            showIcon
            type="warning"
            message={
              <Fragment>
                <p>1.上传图片前应先填写符合规范的图片编号，否则不能上传图片；</p>
                <p>2.上传成功后会自动生成图片名称、大小、格式、路径等信息，无需手动填写；</p>
              </Fragment>
            }
          />
        </Form.Item>
        <Form.Item label="图片编号" hasFeedback {...formItemLayout}>
          {getFieldDecorator('code', {
            rules: [{
              required: true, message: '编号不能为空!',
            }, {
              pattern: /^[a-zA-Z0-9|-]+$/ig, message: '编号格式错误!',
            }],
          })(
            <Input onChange={this.handleCodeInputChange} />
          )}
        </Form.Item>
        <Form.Item label="图片上传" {...formItemLayout}>
          {getFieldDecorator('fileList', {
            getValueFromEvent: this.handleOnChangeEvent,
          })(
            <Uploader
              forbidden={
                !((code && /^[a-zA-Z0-9|-]+$/ig.test(code)))
              }
              fileCode={code}
              fileList={fileList}
              accept="image"
              multiple={false}
              totalLimit={1}
            />
          )}
        </Form.Item>
        <Form.Item label="图片名称" hasFeedback {...formItemLayout}>
          {getFieldDecorator('name', {
            rules: [{ required: true, message: '名称不能为空!' }],
            initialValue: picNameFormat(name),
          })(
            <Input />
          )}
        </Form.Item>
        <Form.Item label="图片路径" {...formItemLayout}>
          {getFieldDecorator('path', {
            initialValue: path,
          })(
            <Input disabled />
          )}
        </Form.Item>
        <Form.Item label="图片格式" {...formItemLayout}>
          {getFieldDecorator('format', {
            initialValue: type ? type.split('/')[1] : '',
          })(
            <Input disabled />
          )}
        </Form.Item>
        <Form.Item label="图片大小" {...formItemLayout}>
          {getFieldDecorator('size', {
            initialValue: size,
          })(
            <Input disabled />
          )}
        </Form.Item>
        <Form.Item {...submitFormLayout} style={{ marginTop: 32 }}>
          <Button onClick={this.handlePageBack}>取消</Button>
          <Button
            type="primary"
            htmlType="submit"
            loading={submitting}
            style={{ marginLeft: 8 }}
          >提交
          </Button>
        </Form.Item>
      </Form>
    );
  }
}