forked from Gitlink/forgeplus-react
98 lines
2.7 KiB
JavaScript
98 lines
2.7 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
||
import { Modal , Checkbox , Pagination , Button , Spin } from 'antd';
|
||
import Axios from 'axios';
|
||
import { Link } from 'react-router-dom';
|
||
import { FlexAJ } from '../../Component/layout';
|
||
|
||
const limit = 20;
|
||
function ConcentrateBox({ visible , onCancel , onSure , username , choosed }) {
|
||
const [ page , setPage ]= useState(1);
|
||
const [ total , setTotal ]= useState(0);
|
||
const [ list , setList ]= useState(undefined);
|
||
const [ value , setValue ]= useState([]);
|
||
const [ isSpin , setIsSpin ]= useState(true);
|
||
const [ disable , setDisable ] = useState(false);
|
||
|
||
useEffect(()=>{
|
||
if(visible){
|
||
setIsSpin(true);
|
||
getProjectList();
|
||
}
|
||
},[visible,page])
|
||
|
||
useEffect(()=>{
|
||
if(choosed && choosed.length >0 ){
|
||
setValue(choosed);
|
||
}
|
||
},[choosed])
|
||
|
||
useEffect(()=>{
|
||
if(value && value.length === 6){
|
||
setDisable(true);
|
||
}else{
|
||
setDisable(false);
|
||
}
|
||
},[value])
|
||
|
||
function getProjectList() {
|
||
const url = `/users/${username}/projects.json`;
|
||
Axios.get(url,{
|
||
params:{
|
||
page,limit,is_public: "public"
|
||
}
|
||
}).then(result=>{
|
||
if(result && result.data){
|
||
setTotal(result.data.count);
|
||
setList(result.data.projects);
|
||
setIsSpin(false);
|
||
}
|
||
}).catch(error=>{})
|
||
}
|
||
|
||
function onOk() {
|
||
onSure && onSure(value);
|
||
setValue([]);
|
||
}
|
||
|
||
function chooseProject(params) {
|
||
setValue(params);
|
||
}
|
||
|
||
return(
|
||
<Modal
|
||
visible={visible}
|
||
title={'选择精选项目'}
|
||
closable={false}
|
||
width={500}
|
||
className="ConcentrateBox"
|
||
footer={
|
||
<FlexAJ>
|
||
{total > limit &&
|
||
<Pagination size={"small"} simple current={page} pageSize={limit} onChange={(p)=>setPage(p)} total={total}/>
|
||
}
|
||
<span>
|
||
<Button onClick={onCancel}>取消</Button>
|
||
<Button type={"primary"} className="ml20" onClick={onOk}>确定</Button>
|
||
</span>
|
||
</FlexAJ>
|
||
}
|
||
>
|
||
<Spin spinning={isSpin}>
|
||
{
|
||
list && list.length > 0 &&
|
||
<Checkbox.Group value={value} onChange={chooseProject} style={{width:"100%"}}>
|
||
{
|
||
list.map((i,k)=>{
|
||
return(
|
||
<Checkbox value={i.id} disabled={disable && (value.filter(j=>j === i.id).length===0)}>{i.name}</Checkbox>
|
||
)
|
||
})
|
||
}
|
||
</Checkbox.Group>
|
||
}
|
||
{ list && list.length === 0 && <div style={{textAlign:"center"}}>您还没有公开的项目，先去<Link to={`/projects/deposit/new`} className="color-blue">新建项目</Link></div> }
|
||
</Spin>
|
||
</Modal>
|
||
)
|
||
}
|
||
export default ConcentrateBox; |