forgeplus-react/src/forge/Dataset/Index.jsx

import React, { useState , useEffect } from 'react';
import { Button , Table , Tooltip } from 'antd';
import { getImageUrl } from 'educoder';
import paperImg from './image/paperImg.png';
import NewModal from './component/new';
import { Link } from 'react-router-dom';
import "./index.scss";
import axios from 'axios';

function Index(props){
  const { project , match , current_user , projectDetail , getProject } =props;
  const permission = current_user && current_user.login ? (projectDetail && projectDetail.permission):"";
  const { owner ,projectsId } = match && match.params;
  const [ dataSource , setDataSource ] = useState([]);
  const [ empty , setEmpty ] = useState(project && (!project.has_dataset));
  const [ total , setTotal ] = useState(0);
  const [ page , setPage ] = useState(1);
  const [ visible , setVisible ] = useState(false);
  const [ detail , setDetail ] = useState({});
  const pageSize = 10;

  useEffect(()=>{
    if(!empty){
      Init();
    }
  },[empty,page])

  function Init(){
    const url = `/v1/${owner}/${projectsId}/dataset`;

    axios.get(url,{
      params:{
        page,limit:pageSize
      }
    }).then((result) => {
      if (result) {
        setDetail(result.data);
        setDataSource(result.data && result.data.attachments);
        setTotal(result.data.attachment_total_count);
      }
    }).catch((error) => { })
  }

  const columns=[
    {
      title:"文件名称",
      dataIndex:"title",
      key:1,
      ellipsis:true,
      width:"25%"
    },
    {
      title:"描述",
      dataIndex:"description",
      key:2,
      ellipsis:true,
      width:"30%",
      render:(value)=>{
        return <Tooltip title={value}>{value}</Tooltip>
      }
    },
    {
      title:"创建者",
      dataIndex:"creator",
      key:3,
      width:"10%",
      render:(value,item)=>{
        return <Link to={`/${value.login}`}><img src={getImageUrl(`/${value.image_url}`)} alt="" style={{borderRadius:"50%"}} width="32px" height="32px" /></Link>
      }
    },
    {
      title:"上传时间",
      dataIndex:"created_on",
      key:4,
      width:"15%"
    },
    {
      title:"大小",
      dataIndex:"filesize",
      key:5,
    },
    {
      title:"操作",
      dataIndex:"url",
      key:6,
      width:"10%",
      render:(value,item)=>{
        return <a href={value} className="color-blue">下载</a>
      }
    },
  ]

  // 添加成功
  function addFunc(){
    setEmpty(false);
    setVisible(false);
    getProject && getProject();
    detail && detail.id && Init();
  }
  return(
    <div className={`dataset`}>
      <NewModal visible={visible} detail={detail} owner={owner} repo={projectsId} onCancel={()=>setVisible(false)} onOk={addFunc}/>
      <div className={`mnistData`}>
        {empty ?
        <span className="font-16">数据集</span>
        :
        <React.Fragment>
          <div style={{width:0,flex:1}} className="mr20">
            <div className="df mb15" style={{alignItems:"center"}}><p className="font-16 weight500 task-hide">{detail.title}</p>{ detail.license_name ? <span className="license ml20">许可证 : {detail.license_name}</span> :""}</div>
            <p style={{wordBreak:"break-all"}}>{detail.description}</p>
          </div>
          {(permission && permission!== "") ? <div className="df">
            <Button type="primary" ghost onClick={()=>{setVisible(true)}}><i className="iconfont icon-a-bianji12 color-blue mr5 font-12"></i>编辑</Button>
            <Link className="ml20 operateButton" to={`/${owner}/${projectsId}/dataset/upload`}><i className="iconfont icon-a-shangchuan2x color-white mr5 font-13"></i>上传文件</Link>
          </div>:""}
        </React.Fragment>
        }
      </div>
      {
        empty?
        <div className={"emtpyData"}>
          <img src={require('./image/empty.png')} alt="" width="68px"/>
          <span className="font-22 weight400 color-grey-3">暂无数据集</span>
          { (permission && permission!== "") ? <p className="mt25 font-15 color-grey-6 weight400">我们非常欢迎您创建并分享您的数据集，以便与其他用户共同促进开源社区的发展</p> :"" }
          { (permission && permission!== "") ? <Button type="primary" className="mt15" onClick={()=>{setVisible(true)}}>创建数据集</Button> :""}
        </div>
        :
        <Table
          className={`datasetTable`}
          columns={columns}
          dataSource={dataSource}
          pagination={{total,pageSize,current:page,hideOnSinglePage:true,onChange:(p)=>setPage(p)}}
        />
      }
      {
        detail.paper_content ?
        <div className="mt25">
          <p className="mb15 df" style={{alignItems:'center'}}><img src={paperImg} width={24} className="mr10" alt="" /><span className="font-16">研究论文</span></p>
          <div className={`mnistData`}>{ detail.paper_content }</div>
        </div>
        :""
      }
    </div>
  )
}
export default Index;