Hotax/src/routes/Resource/Video/VideoCreate.js

import React, { PureComponent } from 'react';
import pathToRegexp from 'path-to-regexp';
import { Card, Form, Radio, Input, Button } from 'antd';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
import { resourceTypes, resourceQuality } from '../../../utils/utils';
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 },
  },
};

@Form.create()
@connect(({ loading }) => ({
  submitting: loading.models.resource,
}))
export default class VideoCreatePage extends PureComponent {
  isEdit = () => {
    const { location } = this.props;
    const match = pathToRegexp('/resource/video-edit/:id').exec(location.pathname);
    if (match) {
      return match[1];
    }
    return false;
  };
  handlePageBack = () => {
    const { UIParams, Queryers } = this.props.location.state || {};
    this.props.dispatch(
      routerRedux.push({
        pathname: '/resource/video',
        state: { UIParams, Queryers },
      })
    );
  };
  handlePageSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        const { UIParams, Queryers } = this.props.location.state || {};
        const matchId = this.isEdit();
        if (matchId) {
          this.props.dispatch({
            type: 'resource/updateVideo',
            payload: { id: matchId, status: Hotax.STATUS_NORMAL, ...values },
            states: { UIParams, Queryers },
          });
          return;
        }
        this.props.dispatch({
          type: 'resource/createVideo',
          payload: { status: Hotax.STATUS_NORMAL, ...values },
          states: { UIParams, Queryers },
        });
      }
    });
  };
  render() {
    const { form, submitting, location } = this.props;
    const { getFieldDecorator } = form;
    const { state = {} } = location;
    const { code, name, size, type, path, rate, quality, format } = state;

    return (
      <PageHeaderLayout>
        <Card>
          <Form onSubmit={this.handlePageSubmit}>
            <Form.Item label="视频编号" {...formItemLayout}>
              {getFieldDecorator('code', {
                rules: [
                  {
                    required: true, message: '视频编号不能为空',
                  }, {
                    pattern: /^[a-zA-Z0-9|-]+$/g, message: '编号包含非法字符',
                  },
                ],
                initialValue: code,
              })(
                <Input placeholder="请填写" />
              )}
            </Form.Item>
            <Form.Item label="视频名称" {...formItemLayout}>
              {getFieldDecorator('name', {
                rules: [{ required: true, message: '视频名称不能为空' }],
                initialValue: name,
              })(
                <Input placeholder="请填写" />
              )}
            </Form.Item>
            <Form.Item label="视频路径" {...formItemLayout}>
              {getFieldDecorator('path', {
                rules: [{ required: true, message: '资源路径为必填项' }],
                initialValue: path,
              })(
                <Input placeholder="请填写" />
              )}
            </Form.Item>
            <Form.Item label="资源类型" {...formItemLayout}>
              {getFieldDecorator('type', {
                rules: [{ required: true, message: '资源类型不能为空' }],
                initialValue: type || Hotax.RESOURCE_VIDEO,
              })(
                <Radio.Group disabled>
                  {
                    Object.keys(resourceTypes).map(key =>
                      (
                        <Radio.Button
                          key={key}
                          value={parseInt(key, 10)}
                        >{resourceTypes[key]}
                        </Radio.Button>
                      )
                    )
                  }
                </Radio.Group>
              )}
            </Form.Item>
            <Form.Item label="清晰度" {...formItemLayout}>
              {getFieldDecorator('quality', {
                rules: [{ required: true, message: '清晰度为必选项' }],
                initialValue: quality || Hotax.QUALITY_HIGH,
              })(
                <Radio.Group disabled>
                  {
                    Object.keys(resourceQuality).map(key =>
                      (
                        <Radio.Button
                          key={key}
                          value={key}
                        >{resourceQuality[key]}
                        </Radio.Button>
                      )
                    )
                  }
                </Radio.Group>
              )}
            </Form.Item>
            <Form.Item label="视频格式" {...formItemLayout}>
              {getFieldDecorator('format', {
                rules: [{ required: true, message: '视频格式不能为空' }],
                initialValue: format || 'm3u8',
              })(
                <Input disabled placeholder="请填写" />
              )}
            </Form.Item>
            <Form.Item label="视频码流" {...formItemLayout}>
              {getFieldDecorator('rate', {
                initialValue: rate,
              })(
                <Input placeholder="请填写" />
              )}
            </Form.Item>
            <Form.Item label="视频大小" {...formItemLayout}>
              {getFieldDecorator('size', {
                initialValue: size,
              })(
                <Input placeholder="请填写" addonAfter="字节" />
              )}
            </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>
        </Card>
      </PageHeaderLayout>
    );
  }
}