forgeplus-react/src/forge/Source/UploadSource.jsx

import React , { forwardRef, useEffect, useState } from 'react';
import { Modal , Form , Checkbox , Input , Table } from 'antd';
import Upload from './Upload';
import { AlignCenter } from '../Component/layout';
import axios from 'axios';
const { TextArea } = Input;

const https = 'https://testfiles.trustie.net';
function UploadSource({ form , visible , onCancel , onOk , showNotification , attachments , id ,owner,projectsId}){
  const [ tableData , setTableData ] = useState(undefined);
  const [ fileId , setFilesId ] = useState(undefined);
  const [ fileName , setFileName ] = useState(undefined);
  const { getFieldDecorator, validateFields , setFieldsValue } = form;

  useEffect(()=>{
    if(id && attachments){
      setTableData(attachments);
    }
  },[id,attachments])
  // 上传附件后得到的文件id数组
  function UploadFunc(id,name){
    setFilesId(id);
    setFileName(name);
  }

  const columns = [
    {
      dataIndex:"fileName",
      key:"fileName",
      title:"资源名称",
      width:"42%",
      ellipsis:true,
      render:(value,item,key)=>{
        return <AlignCenter>
          <div className="task-hide" style={{maxWidth:key===0 ? "240px":"100%"}}>{value}</div>
          { key === 0 && <span className="currentTip">当前版本</span> }
        </AlignCenter>
      }
    },
    {
      dataIndex:"downloads",
      key:"downloads",
      title:"下载数",
      width:"14%",
      className:"edu-txt-center"
    },
    {
      dataIndex:"fileSizeString",
      key:"fileSizeString",
      title:"文件大小",
      width:"16%",
      className:"edu-txt-center"
    },
    {
      dataIndex:"createdAt",
      key:"createdAt",
      title:"上传时间",
    }
  ]

  // 确定
  function submit(){
    if(fileId){
      validateFields((error,values)=>{
        if(!error){
          postInfo(values);
        }
      })
    }else{
      showNotification("请先上传文件！");
    }
  }

  function postInfo(values){
    const url = https+`/api/project/achievement/`;
    if(id){
      // 修改
      axios.put(url,{
        id,fileName,fileId:`${fileId}`,
        remark:values.remark
      }).then(result=>{
        if(result && result.data){
          onOk();
        }
      }).catch(error=>{})
    }else{
      // 上传
      axios.post(url,{
        fileId:`${fileId}`,
        fileName,
        login:owner,
        projectId:projectsId,
        ...values
      }).then(result=>{
        if(result && result.data){
          onOk();
        }
      }).catch(error=>{})
    }
    
  }
  return(
    <Modal 
      title={id?"更新资源版本":"上传资源"}
      closable={false}
      visible={visible}
      onCancel={onCancel}
      onOk={submit}
      cancelText="取消"
      okText="确定"
      width="600px"
      centered
    >
      <div>
        <Form>
          {id && <Table className="versionTable mb20" columns={columns} dataSource={tableData} pagination={false} size={"small"}/> }
          <Form.Item style={{display:id?"none":"block"}}>
            {getFieldDecorator("tagNames",{
              rules:[]
            })(
              <Checkbox.Group>
                <Checkbox value="软件版本">软件版本</Checkbox>
                <Checkbox value="文档">文档</Checkbox>
                <Checkbox value="代码">代码</Checkbox>
                <Checkbox value="媒体">媒体</Checkbox>
                <Checkbox value="论文">论文</Checkbox>
                <Checkbox value="其它">其它</Checkbox>
              </Checkbox.Group>
            )}
          </Form.Item>
          <Upload 
            className="commentStyle"
            load={UploadFunc}
            size={100}
            showNotification={showNotification}
            actionUrl= {https}
          />
          <Form.Item className="mt20">
            {getFieldDecorator("remark",{
              rules:[]
            })(
              <TextArea rows={4} placeholder="请输入资源描述" />
            )}
          </Form.Item>
        </Form>
      </div>
    </Modal>
  )
}
export default Form.create()(forwardRef(UploadSource));;