forked from Gitlink/forgeplus-react
285 lines
10 KiB
JavaScript
285 lines
10 KiB
JavaScript
import React, { Component } from 'react';
|
||
import { Tooltip, Badge, Modal, Form, Input, Upload, Button, Icon, Radio, message } from 'antd';
|
||
import { getImageUrl } from 'educoder';
|
||
import { AlignCenter } from '../Component/layout';
|
||
import { Link } from 'react-router-dom';
|
||
import '../css/index.scss';
|
||
import Nodata from '../Nodata';
|
||
import './list.css';
|
||
import img_parise from '../Images/parise.png';
|
||
import Axios from 'axios'; // 引入 Axios
|
||
import { getUploadActionUrl,appendFileSizeToUploadFileAll } from 'educoder';
|
||
|
||
class PrivateAccessModal extends Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
contentFileList: []
|
||
};
|
||
}
|
||
|
||
handleOk = () => {
|
||
this.props.form.validateFields((err, values) => {
|
||
if (!err) {
|
||
const url = `/applied_projects.json`;
|
||
let attachmentId = this.state.contentFileList.map(item => {
|
||
return item.response ? item.response.id : item.id
|
||
})
|
||
Axios.post(url, {
|
||
applied_project: {
|
||
alert_remarks: true,
|
||
...values,
|
||
attachment_id: attachmentId.join(','),
|
||
code: this.props.projectInfo.invite_code
|
||
},
|
||
})
|
||
.then((result) => {
|
||
if (result && result.data) {
|
||
this.setState({
|
||
contentFileList: []
|
||
});
|
||
message.info('申请已提交，请等待项目管理者审核!');
|
||
}
|
||
})
|
||
.catch((error) => {
|
||
console.log(error);
|
||
});
|
||
this.props.onClose();
|
||
this.props.form.resetFields();
|
||
}
|
||
});
|
||
}
|
||
|
||
handleCancel = () => {
|
||
this.props.onClose();
|
||
this.props.form.resetFields();
|
||
}
|
||
|
||
uploadProps = ()=>{
|
||
return {
|
||
fileList: this.state.contentFileList,
|
||
multiple: false,
|
||
action: `${getUploadActionUrl()}`,
|
||
onChange: (info) => {
|
||
let content = info.fileList;
|
||
this.setState({
|
||
contentFileList: appendFileSizeToUploadFileAll(content)
|
||
});
|
||
},
|
||
onRemove: (file) => {
|
||
if (file.response != undefined) {
|
||
Modal.confirm({
|
||
content: '是否确认删除?',
|
||
onOk: () => {
|
||
this.deleteAttachment(file);
|
||
},
|
||
onCancel() {
|
||
console.log('Cancel');
|
||
},
|
||
});
|
||
return false;
|
||
}
|
||
},
|
||
beforeUpload: (file) => {
|
||
console.log('beforeUpload', file.name);
|
||
const isLt150M = file.size / 1024 / 1024 <= 20;
|
||
if (!isLt150M) {
|
||
message.error('文件大小必须不超过20MB!');
|
||
}
|
||
return isLt150M;
|
||
},
|
||
};
|
||
}
|
||
|
||
deleteAttachment = (file) => {
|
||
const url = `/attachments/${file.response ? file.response.id : file.uid}.json`;
|
||
Axios.delete(url, {})
|
||
.then((response) => {
|
||
if (response.data) {
|
||
const { status } = response.data;
|
||
if (status === 0) {
|
||
this.setState({
|
||
contentFileList: []
|
||
});
|
||
}
|
||
}
|
||
})
|
||
.catch((error) => {
|
||
console.log(error);
|
||
});
|
||
};
|
||
|
||
render() {
|
||
const { getFieldDecorator } = this.props.form;
|
||
return (
|
||
<Modal
|
||
title="加入项目"
|
||
visible={this.props.visible}
|
||
onOk={this.handleOk}
|
||
onCancel={this.handleCancel}
|
||
centered={true}
|
||
width={500}
|
||
>
|
||
<Form layout="inline" className="inviteForm2">
|
||
<Form.Item label="选择角色">
|
||
{getFieldDecorator('role', {
|
||
rules: [{ required: true, message: '请选择角色' }],
|
||
initialValue: 'developer',
|
||
})(
|
||
<Radio.Group defaultValue={'developer'}>
|
||
<Radio value="manager">管理员</Radio>
|
||
<Radio value="developer">开发者</Radio>
|
||
<Radio value="reporter">报告者</Radio>
|
||
</Radio.Group>
|
||
)}
|
||
</Form.Item>
|
||
<Form.Item label="个人情况">
|
||
{getFieldDecorator('remarks', {
|
||
rules: [{ required: true, message: '请输入个人情况' }],
|
||
})(
|
||
<Input
|
||
placeholder="请输入个人情况"
|
||
// autoComplete="off"
|
||
maxLength={200}
|
||
style={{ width: '300px', pointerEvents: 'auto' }} // 确保 pointer-events 为 auto
|
||
/>
|
||
)}
|
||
</Form.Item>
|
||
<Form.Item label="个人资料" style={{ flexWrap: 'nowrap' }}>
|
||
{getFieldDecorator('attachment_id', {
|
||
rules: [],
|
||
})(
|
||
<Upload {...this.uploadProps()}>
|
||
<Button type="default" className='mr5'>
|
||
<Icon type="upload" /> 上传附件
|
||
</Button>
|
||
(单个文件最大20MB)
|
||
</Upload>
|
||
)}
|
||
</Form.Item>
|
||
</Form>
|
||
</Modal>
|
||
);
|
||
}
|
||
}
|
||
|
||
const WrappedPrivateAccessModal = Form.create()(PrivateAccessModal);
|
||
|
||
class IndexItem extends Component {
|
||
TurnToDetail = (login, url) => {
|
||
this.props.history.push({
|
||
pathname: url,
|
||
state: login
|
||
});
|
||
}
|
||
|
||
state = {
|
||
showModal: false,
|
||
projectInfo: null
|
||
};
|
||
|
||
openModal = (projectInfo) => {
|
||
this.setState({ showModal: true, projectInfo });
|
||
};
|
||
|
||
closeModal = () => {
|
||
this.setState({ showModal: false, projectInfo: null });
|
||
};
|
||
|
||
render() {
|
||
const { projects } = this.props;
|
||
return (
|
||
<div className="project-list minH-670" style={{ padding: "0px 20px" }}>
|
||
{projects && projects.length > 0 ? projects.map((item, key) => {
|
||
return (
|
||
<div className="p-r-Item" key={key}>
|
||
{
|
||
item.platform === "educoder" ? (
|
||
<a href="javascript:void(0)" style={{ cursor: "default" }} className="show-user-link">
|
||
<img className="p-r-photo" alt="" src={item.author && item.author.image_url} />
|
||
</a>
|
||
) : (
|
||
<Link to={item.author && (item.author.type === "Organization" ? `/organize/${item.author.login}` : `/users/${item.author.login}`)} className="show-user-link">
|
||
<img className="p-r-photo" alt="" src={getImageUrl(`/${item.author && item.author.image_url}`)} />
|
||
</Link>
|
||
)
|
||
}
|
||
<div className="p-r-Infos">
|
||
<div className="p-r-name">
|
||
<AlignCenter>
|
||
<Link onClick={(e) => {
|
||
if (item.is_member || item.is_manager || !item.join_project_need_verify) {
|
||
return true;
|
||
} else {
|
||
e.preventDefault();
|
||
this.openModal(item);
|
||
return false;
|
||
}
|
||
}} to={`/projects/${item.author.login}/${item.identifier}`} title={`${item.author.name}/${item.name}`} className="color-grey-3 font-18 task-hide " style={{ maxWidth: 470 }}>
|
||
{item.author.name}/{item.name}
|
||
</Link>
|
||
{!item.is_public && <span className="privateTag">私有</span>}
|
||
{
|
||
item.forked_from_project_id ? (
|
||
<span className="ml5">
|
||
<i className="iconfont icon-fork font-18 color-orange" />
|
||
</span>
|
||
) : null
|
||
}
|
||
{
|
||
item.type && item.type !== 0 ?
|
||
item.type === 2 ?
|
||
<Tooltip title="该项目是一个镜像" className="ml5">
|
||
<i className="iconfont icon-banbenku font-18 color-green" />
|
||
</Tooltip> :
|
||
<span className="ml5">
|
||
<i className="iconfont icon-jingxiang font-18 color-green" />
|
||
</span> : null
|
||
}
|
||
</AlignCenter>
|
||
<AlignCenter>
|
||
{
|
||
(item.is_manager && item.join_project_need_verify && !!item.pending_verify_count) && <span style={{position:'relative',display:'inline-block',width:'120px',textAlign:'center',background:'rgba(250,100,0,0.1)',borderRadius:'2px',border:'1px solid #FFDCC5'}}>
|
||
<Badge dot offset={[-90,7]} style={{ backgroundColor: '#FA6400' }}><span style={{fontSize:'12px',color:'#FA6400'}}>待审核申请：{item.pending_verify_count}</span></Badge>
|
||
</span>}
|
||
<span className="p-r-tags">
|
||
{
|
||
item.praises_count && item.praises_count > 0 ?
|
||
<span className="pariseTag">
|
||
<img src={img_parise} alt="" className="pariseImg" />赞 {item.praises_count}
|
||
</span> : null
|
||
}
|
||
{
|
||
item.forked_count && item.forked_count > 0 ?
|
||
<span>
|
||
<i className="iconfont icon-fork mr3 font-16" style={{ color: "#1B8FFF" }} />fork {item.forked_count}
|
||
</span> : null
|
||
}
|
||
</span>
|
||
</AlignCenter>
|
||
</div>
|
||
<p className="break_word task-hide-2 mt10" style={{ maxHeight: "44px", lineHeight: "22px" }}>{item.description}</p>
|
||
|
||
<div className="p-r-about">
|
||
<span className="p-r-detail">
|
||
{/* <span><label>浏览量：</label>{item.visits}</span> */}
|
||
{/* {item.category && item.category.id && <span>{item.category.name}</span>} */}
|
||
{item.last_update_time ? <span><label>更新于</label>{item.time_ago}</span> : null}
|
||
{item.language && item.language.id ? <span className="color-grey-3">{item.language.name}</span> : null}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}) : <Nodata _html="暂无数据~" />}
|
||
<WrappedPrivateAccessModal
|
||
visible={this.state.showModal}
|
||
onClose={this.closeModal}
|
||
projectInfo={this.state.projectInfo}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
}
|
||
|
||
export default IndexItem; |