forked from Gitlink/forgeplus-react
131 lines
3.8 KiB
JavaScript
131 lines
3.8 KiB
JavaScript
import React, { useState , useEffect } from 'react';
|
||
import { Button , Table } from 'antd';
|
||
import { getImageUrl } from 'educoder';
|
||
import NewModal from './component/new';
|
||
import { Link } from 'react-router-dom';
|
||
import "./index.scss";
|
||
import axios from 'axios';
|
||
|
||
function Index(props){
|
||
const { project , match } =props;
|
||
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 = 20;
|
||
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%"
|
||
},
|
||
{
|
||
title:"创建者",
|
||
dataIndex:"creator",
|
||
key:3,
|
||
width:"10%",
|
||
render:(value,item)=>{
|
||
return <img src={getImageUrl(`/${value.image_url}`)} alt="" style={{borderRadius:"50%"}} width="32px" height="32px" />
|
||
}
|
||
},
|
||
{
|
||
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);
|
||
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>
|
||
<p className="font-16 weight500">{detail.title}</p>
|
||
<p>{detail.description}</p>
|
||
</div>
|
||
<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>
|
||
<p className="mt25 font-15 color-grey-6 weight400">我们非常欢迎您创建并分享您的数据集，以便与其他用户共同促进开源社区的发展</p>
|
||
<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)}}
|
||
/>
|
||
}
|
||
</div>
|
||
)
|
||
}
|
||
export default Index; |