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

import React, { useState , useEffect } from 'react';
import { Button , Table , Tooltip, message } from 'antd';
import Modals from '../Component/PublicModal/Index';
import { AlignCenter } from '../Component/layout';
import { getImageUrl } from 'educoder';
import paperImg from './image/paperImg.png';
import NewModal from './component/new';
import { Link } from 'react-router-dom';
import { getProjectFunc } from '../../services/project'
import "./index.scss";
import axios from 'axios';

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

  useEffect(()=>{
    setEmpty(!has_dataset);
  },[has_dataset])

  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={`${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",
      align:"center",
      key:6,
      width:"12%",
      render:(value,item)=>{
        return <React.Fragment>
          <a href={value} className="color-blue" download={value}>下载</a>
          <a className='color-red ml20' onClick={()=>{setDelVisible(true);setDelId(item.id);}}>删除</a>
        </React.Fragment>
      }
    },
  ]

  // 添加成功
  async function addFunc(){
    setVisible(false);
    const data = await getProjectFunc(owner,projectsId);
    if (data.data) {
      getProject(data.data)
    }
    setEmpty(false);
    detail && detail.id && Init();
  }

  // 确定删除数据集
  function delDataSetFunc(){
    if(delId){
      const url = `/attachments/${delId}.json`;
      axios.delete(url).then(res=>{
        if(res){
          message.info("数据集附件删除");
          setDelVisible(false);
          setDelId(undefined);
          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>
        :""
      }
      
      <Modals
        visible={delVisible}
        onCancel={()=>{setDelVisible(false);setDelId(undefined);}}
        title={"删除附件"}
        btn={
          <div>
            <Button size={'large'} onClick={()=>{setDelVisible(false);setDelId(undefined);}}>取消</Button>
            <Button type={"danger"} size={"large"} onClick={delDataSetFunc}>确认</Button>
          </div>
        }
      >
        <div className="desc center">
          <AlignCenter className="descMain">
            <i className="iconfont icon-jinggao1 mr10 font-20 red"></i>确定删除该文件？</AlignCenter>
        </div>
      </Modals>
    </div>
  )
}
export default Index;