forgeplus-react/src/forge/Information/Component/addProjects.jsx

import React, { useEffect, useState } from 'react';
import { Modal , Table , Input , Button , Select , message , Popconfirm } from 'antd';
import { getManageProjects , getMemberProjectList , addProjects , addMemberProject , removeProject } from '../api';
const { Option } = Select;
function AddProjects({id,visible,typeList,role,onCancel,onFresh}){
    const [ dataSource , setDataSource ]= useState([]);
    const [ searchValue , setSearchValue ] = useState(null);
    const [ page ,setPage ] = useState(1);
    const [ total ,setTotal ] = useState(1);
    const [ loading ,setLoading ] = useState(false);
    const [repoTypeIds, setRepoTypeIds] = useState({});
    const limit = 10;


    useEffect(()=>{
        if(id && visible && role){
            Init(1,searchValue);
        }
    },[visible,id,role])

    async function Init(page,search){
        setLoading(true);
        let response =  {};
        if(role==="Manager"){
            // 管理员身份
            response = await getManageProjects(id,{search,page,limit})
        }else{
            // 专区会员身份
            response = await getMemberProjectList(id,{search,page,limit})
        }
        if(response){
            setDataSource(response.data.rows);
            setTotal(response.data.total);
            setLoading(false);
        }
    }

    // 回车搜索
    function SearchFunc(e){
        setSearchValue(e.target.value);
        setPage(1);
        Init(1,e.target.value);
    }
    

    const columns=[
        {
            title:"项目名称",
            key:"name",
            dataIndex:"name",
            ellipsis:true,
            render:(value,item)=>{
                return <span title={value}>{item.author && item.author.name}/{value}</span>
            }
        }, {
            title:"最近更新时间",
            key:"time",
            dataIndex:"time_ago",
            width:"15%",
        }, {
            title:"项目分类",
            key:"cate",
            dataIndex:"status",
            width:"20%",
            render:(value,item)=>{
                return <Select
                    defaultValue={typeList && typeList[0].id}
                    style={{width:"90%"}}
                    onChange={(v) => {
                        const map = repoTypeIds;
                        map[item.id] = v;
                        setRepoTypeIds(map);
                    }}>
                    {typeList && typeList.map(e=>{return <Option key={e.id} value={e.id}>{e.name}</Option>})}
                </Select>
            }
        }, {
            title:"操作",
            key:"name",
            width:"12%",
            render:(value,item)=>{
                let addArr={
                    gitlinkProjectId: item.id,
                    projectTypeId: repoTypeIds[item.id] || typeList[0].id,
                    zoneId:id
                }
                return item.isChoose ? 
                <Button size='small' disabled={true}>已添加</Button>
                : 
                <Button size='small' type="primary" onClick={()=>addProjectsFunc(item.id,id)}>+ 添加</Button> 
            }
        }
    ]


    async function addProjectsFunc(itemId,id){
        let item={
            gitlinkProjectId: itemId,
            projectTypeId: repoTypeIds[itemId] || typeList[0].id,
            zoneId:id
        }
        
        let response =  {};
        if(role==="Manager"){
            // 管理员身份
            response = await addProjects([item]);
        }else{
            // 专区会员身份
            response = await addMemberProject([item])
        }
        const res = response.data;
        if(res && res.code === 200){
            message.success("操作成功");
            Init(page,searchValue);
            onFresh();
        }else{
            message.error(res.msg);
        }
    }

    function cancelFunc(){
        setRepoTypeIds({});
        onCancel();
        setSearchValue(null);
    }
    return(
        <Modal
            visible={visible}
            width={900}
            footer={null}
            onCancel={cancelFunc}
            title="添加项目"
        >
            <div>
                <span>项目/所有者名称：</span>
                <Input placeholder='请输入项目名称回车搜索' 
                    allowClear 
                    value={searchValue}
                    style={{width:"200px"}} 
                    onChange={(e)=>{setSearchValue(e.target.value);if(!e.target.value)Init(1);}} 
                    onPressEnter={SearchFunc}
                />
            </div>
            <Table 
                columns={columns} 
                className='mt20 aboutProjects'
                size='small'
                loading={loading}
                dataSource={dataSource} 
                pagination={{current:page,pageSize:limit,onChange:(e)=>{setPage(e);Init(e,searchValue)},total:total,size:"small",hideOnSinglePage:true}}
            />
        </Modal>
    )
}
export default AddProjects;