移动端页面之上传PDF附件

ContractUploader.jsx

import React, { Component } from 'react';
import './ContractUploader.scss';
import { Viewport, FormButton, NoContext } from 'components';
import { debug, getUserId, feedback } from 'src/lib';
import * as formAPI from 'src/xhr/form';
import { workflow } from 'src/store';
import LineUploader from '../components/LineUploader';

export class ContractUploader extends Component {
  state = {
    loading: false,
  };

  variables = {
    nrEnterId: getUserId(),
  };

  submit = () => {
    const err = this.validate(this.variables);
    if (err) {
      feedback.warning(err.message);
      return;
    }

    this._submit(this.variables);
  };

  onUrlChange(field, urls) {
    this.onChange(field, urls[0]);
  }

  onChange(field, value) {
    this.variables[field] = value;
  }

  validate(variables) {
    if (!variables.nrPaperContractAnnex) {
      return new Error('请上传盖章后的PDF扫描文档');
    }
    return null;
  }

  _submit(variables) {
    debug.log(variables);
    this.setState({ loading: true });
    const stopLoading = feedback.loading();
    formAPI
      .updatePendingTask(variables)
      .then(res => {
        if (res.data.code !== 200) {
          feedback.error(`上传纸质附件失败。${res.data.message}`);
          return;
        }

        feedback.success('上传纸质附件成功', () => {
          this.props.history.push('/handled');
        });
      })
      .catch(err => {
        feedback.error(`上传纸质附件失败。${err.message}`);
      })
      .finally(() => {
        this.setState({ loading: false });
        stopLoading();
      });
  }

  renderContent() {
    if (!workflow._received) {
      return <NoContext />;
    }

    return (
      <div className="contract-uploader">
        <div className="_container">
          <LineUploader
            label="签约合同附件"
            placeholder="请上传合同PDF扫描文档"
            onChange={this.onUrlChange.bind(this, 'nrPaperContractAnnex')}
          />
          <LineUploader
            label="委托协议书"
            placeholder="请上传合同委托协议书（选填）"
            onChange={this.onUrlChange.bind(this, 'nrEntrustmentAgreement')}
          />
        </div>

        <textarea
          className="_memo"
          placeholder="说明"
          onChange={e => this.onChange.call(this, 'nrMemo', e.target.value)}
        />
        <FormButton onClick={this.submit} disabled={this.state.loading}>
          提交
        </FormButton>
      </div>
    );
  }

  render() {
    return (
      <Viewport title="上传纸质附件" style={{ background: '#F5F5F5' }}>
        {this.renderContent()}
      </Viewport>
    );
  }
}

export default ContractUploader;

LineUploader.jsx

import React, { Component } from 'react';
import classnames from 'classnames';
import * as oss from 'src/lib/oss';
import PropTypes from 'prop-types';
import './LineUploader.scss';

class LineUploader extends Component {
  static propTypes = {
    onChange: PropTypes.func,
  };

  state = {
    name: '',
  };

  onChange = e => {
    let { onChange } = this.props;
    const files = this.input.files;
    const [file] = files;
    this.setState({ name: file.name });
    oss
      .uploadFileList([file])
      .then(res => {
        const urls = res.map(item => item.url);
        onChange(urls);
      })
      .catch(err => {
        console.error(err.message);
      });
  };

  renderFile() {
    const { placeholder } = this.props;
    const { name } = this.state;
    return (
      <span className={classnames('_text', { '_text-placeholder': !name })}>
        {name || placeholder}
      </span>
    );
  }

  render() {
    const { label } = this.props;
    return (
      <div className="line-uploader">
        <form className="_inner-container">
          <span className="_label">{label}</span>
          {this.renderFile()}

          <input
            className="_input"
            type="file"
            accept="application/pdf"
            onChange={this.onChange}
            ref={el => (this.input = el)}
          />
        </form>
      </div>
    );
  }
}

export default LineUploader;

LineUploader.scss

.line-uploader {
  background: white;
  height: 3.2em;
  font-size: 14px;
  padding: 0 16px;
  &:not(:last-child) {
    border-bottom: 1px solid #e0e0e0;
  }

  ._inner-container {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  ._input {
    background: transparent;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
  }

  ._text {
    color: #666666;
    &._text-placeholder {
      color: #999999;
    }
  }
}