forgeplus-react/src/military/task/components/itemPayProof/index.jsx

import React, { useEffect, useState, useCallback } from 'react';
import { Pagination, Modal, Input, Button, Form, InputNumber } from 'antd';
import { Link } from "react-router-dom";
import Nodata from 'forge/Nodata';
import Loading from "src/Loading";
import Upload from 'military/components/Upload';
import { timeAgo, getImageUrl,goUser,goUserMes } from 'educoder';
import { uploadPayProof } from '../../api';
import './index.scss';

export default Form.create()((props) => {
  const { form, list, curPage, total, changePage, loading, showNotification, reloadList } = props;
  const { getFieldDecorator, validateFields, setFieldsValue } = form;
  const [checkedItem, setCheckedItem] = useState({});
  const [visible, setVisible] = useState(false);
  const [fileList, setFileList] = useState(null);
  const pageSize = props.pageSize || 10;

  // 上传附件后得到的文件数组
  function uploadFunc(fileList, files) {
    setFileList(fileList);
    setFieldsValue({ files });
  }

  function uploadPay() {
    validateFields((err, values) => {
      if (!err) {
        uploadPayProof({
          paperId: checkedItem.id,
          params: {
            files: values.files,
          }
        }).then(res => {
          if (res.message === 'success') {
            setFieldsValue({
              files: '',
            });
            setFileList([]);
            reloadList();
            setVisible(false);
            showNotification("上传支付凭证成功！");
          } else {
            showNotification(res.message || "上传支付凭证失败")
          }
        })
      }
    })
  }

  return (
    loading ? <Loading /> :
      <React.Fragment>
        {
          list.map(item => {
            return (
              <div className="list-box" key={item.id}>

                <img alt="" className="radius mr15" height="50px" src={item.user && getImageUrl(item.user.logo)} width="50px" />
                <div className="flex1">
                  <li className="clearfix mb20">
                    <a className="user-box fl mr15 color-grey-3 font-16" onClick={() => { goUser(item.user.login) }}>{item.user && (item.user.nickname || item.user.login)}</a>
                    <span className="fl color-grey-9 mt3 mr15">{timeAgo(item.createdAt)}</span>
                    <span className="infos_item color-grey-9 fl">发布方式:</span>
                    <span className="infos_item mr15 fl">{item.task && item.task.publishMode === 1 ? '统筹任务' : '自主提交'}</span>
                    <span className="fr"><a className="edu-default-btn edu-orangeline-btn ml20 fl" onClick={() => { item.user && goUserMes(item.user.id) }}>私信</a></span>
                  </li>
                  <div className="clearfix">
                    <div className="width100 lineh-35" >
                      <span className="with40 fl lineh-35">
                        <span className="color-grey-9 fl">任务编号:</span>
                        <span className="fl lineh-35 ml5">
                          <Link className="primary-link" to={`/task/taskDetail/${item.taskId}`}>{item.task.name}</Link>
                        </span>
                      </span>

                      <span className="with40 fl lineh-35">
                        <span className="color-grey-9 fl">任务编号:</span>
                        <span className="infos_item">{item.task.number}</span>
                      </span>
                    </div>
                    <div className="clearfix">
                    <span className="with40 fl lineh-35" style={{ display: "inline-flex" }}>
                        <span className="color-grey-9 fl">联系手机:</span>
                        <span className="infos_item">{item.user.phone}</span>
                      </span>
                    </div>

                    <div className="clearfix"></div>
                    {!item.isPay && (item.status !== 8) && <div className="width100 lineh-35 clearfix">
                      <Button type="primary" onClick={() => { setVisible(true); setCheckedItem(item) }}>上传支付报酬凭证</Button>
                    </div>}

                  </div>

                </div>
              </div>
            )
          })
        }

        {list.length > 0 ?
          <div className="edu-txt-center mt20 mb20">
            {total > pageSize && <Pagination
              showQuickJumper
              onChange={(page) => { changePage(page) }}
              current={curPage}
              total={total}
              showTotal={total => `共 ${total} 条`}
            />}
          </div> :
          <Nodata _html="暂无数据" />}

        <Modal
          title="上传支付报酬凭证"
          visible={visible}
          onOk={uploadPay}
          onCancel={() => { setVisible(false) }}
          className="form-edit-modal"
        >
          <div className="task-popup-content">
            <Form.Item className="upload-form" label="附件上传" required={true}>
              <Upload
                className="commentStyle"
                load={uploadFunc}
                size={50}
                showNotification={showNotification}
                fileList={fileList}
              />
              {getFieldDecorator('files', {
                rules: [{ required: visible, message: "请上传文件" }],
                validateFirst: true
              })(<Input style={{ display: 'none' }} />)}
            </Form.Item>
          </div>
        </Modal>


      </React.Fragment>

  )
}
)