forked from Gitlink/forgeplus-react
155 lines
4.0 KiB
JavaScript
155 lines
4.0 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
||
import { Modal , Checkbox , Spin , Input } from 'antd';
|
||
import Axios from 'axios';
|
||
import { Link } from 'react-router-dom';
|
||
|
||
const { Search } = Input;
|
||
const limit = 20;
|
||
function ConcentrateBox({ visible , onCancel , onSure , username , choosed }) {
|
||
const [ page , setPage ]= useState(1);
|
||
const [ total , setTotal ]= useState(0);
|
||
const [ pageSize , setPageSize ] = useState(false);
|
||
const [ search , setSearch ] = useState(undefined);
|
||
|
||
const [ list , setList ]= useState([]);
|
||
const [ value , setValue ]= useState([]);
|
||
const [ isSpin , setIsSpin ]= useState(true);
|
||
const [ disable , setDisable ] = useState(false);
|
||
|
||
useEffect(()=>{
|
||
if(visible){
|
||
setIsSpin(true);
|
||
getProjectList();
|
||
}
|
||
setSearch(undefined);
|
||
},[visible])
|
||
|
||
useEffect(()=>{
|
||
if(page>1){
|
||
setIsSpin(true);
|
||
getProjectList(page,undefined);
|
||
}
|
||
},[page])
|
||
|
||
useEffect(()=>{
|
||
if(search !== undefined){
|
||
setIsSpin(true);
|
||
getProjectList(1,search);
|
||
}
|
||
},[search])
|
||
|
||
useEffect(()=>{
|
||
if(visible && choosed && choosed.length >0 ){
|
||
setValue(choosed);
|
||
}
|
||
},[visible,choosed])
|
||
|
||
useEffect(()=>{
|
||
if(value && value.length === 6){
|
||
setDisable(true);
|
||
}else{
|
||
setDisable(false);
|
||
}
|
||
},[value])
|
||
|
||
function getProjectList(p,s) {
|
||
const url = `/users/${username}/projects.json`;
|
||
Axios.get(url,{
|
||
params:{
|
||
page:p,limit,is_public: "public",search:s,choosed
|
||
}
|
||
}).then(result=>{
|
||
if(result && result.data){
|
||
let e = page > 1 ? mergeArrayMerge(list,result.data.projects) : result.data.projects;
|
||
setTotal(result.data.count);
|
||
setList(e);
|
||
setIsSpin(false);
|
||
|
||
// 查看更多需要页数
|
||
let s = parseInt(result.data.count/limit,0);
|
||
let y = result.data.count%limit;
|
||
setPageSize(y>0?s+1:s);
|
||
}
|
||
}).catch(error=>{})
|
||
}
|
||
|
||
function mergeArrayMerge (array1, array2) {
|
||
array1.map((v, index) => {
|
||
if (v !== '') {
|
||
let idx = array2.indexOf(v);
|
||
if (idx > -1) {
|
||
array2.splice(idx, 1)
|
||
}
|
||
}
|
||
});
|
||
array1 = array1.concat(array2);
|
||
return array1
|
||
}
|
||
|
||
function onOk() {
|
||
onSure && onSure(value);
|
||
setValue([]);
|
||
}
|
||
|
||
function chooseProject(e,p) {
|
||
setValue(e);
|
||
}
|
||
|
||
// 搜索
|
||
function onSearch(params) {
|
||
setPage(1);
|
||
setList([]);
|
||
setSearch(params);
|
||
// if(params){
|
||
// setValueCopy(value);
|
||
// }else{
|
||
// setValue(valueCopy);
|
||
// setValueCopy([]);
|
||
// }
|
||
}
|
||
|
||
return(
|
||
<Modal
|
||
visible={visible}
|
||
title={'选择精选项目'}
|
||
closable={true}
|
||
width={500}
|
||
className="ConcentrateBox"
|
||
onCancel={onCancel}
|
||
onOk={onOk}
|
||
okText="确定"
|
||
cancelText="取消"
|
||
>
|
||
<Spin spinning={isSpin}>
|
||
<div className="operateDiv">
|
||
<p>最多可选取6个公开仓库</p>
|
||
<Search
|
||
placeholder="请输入项目名称进行搜索"
|
||
onSearch={onSearch}
|
||
enterButton="搜索"
|
||
allowClear
|
||
value={search}
|
||
onChange={(e)=>setSearch(e.target.value)}
|
||
/>
|
||
</div>
|
||
<div className="listbox">
|
||
{
|
||
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>
|
||
}
|
||
</div>
|
||
{ total > limit && page < pageSize && <div className="morelist" onClick={()=>setPage(page+1)}>查看更多</div> }
|
||
{ list && list.length === 0 && <div style={{textAlign:"center"}}>您还没有公开的{search && `“${search}”`}项目，先去<Link to={`/projects/deposit/new`} className="color-blue">新建项目</Link></div> }
|
||
</Spin>
|
||
</Modal>
|
||
)
|
||
}
|
||
export default ConcentrateBox; |