动态页的动态效果

forge
lqx 5 years ago
parent 15444d43cf
commit 0544af149f

@ -74,7 +74,14 @@ class Activity extends Component{
const { type,status,page } = this.state; const { type,status,page } = this.state;
this.getInfo(e.key,type,status,page); this.getInfo(e.key,type,status,page);
} }
//筛选
changeTrends=(type,status)=>{
this.setState({
type,status
})
const {time,page}=this.state;
this.getInfo(time,type,status,page);
}
// 分页 // 分页
ChangePage=(page)=>{ ChangePage=(page)=>{
this.setState({ this.setState({
@ -127,19 +134,19 @@ class Activity extends Component{
<ul className="percentBox"> <ul className="percentBox">
<li> <li>
<span className="purple">{data && data.pr_count}</span> <span className="purple">{data && data.pr_count}</span>
<Link to={``}>合并请求</Link> <span className="change" onClick={()=>this.changeTrends("PullRequest",)}>合并请求</span>
</li> </li>
<li> <li>
<span className="green">{data && data.new_pr_count}</span> <span className="green">{data && data.new_pr_count}</span>
<Link to={``}>新合并请求</Link> <span className="change" onClick={()=>this.changeTrends("PullRequest","create")}>新合并请求</span>
</li> </li>
<li> <li>
<span className="red">{data && data.close_issues_count}</span> <span className="red">{data && data.close_issues_count}</span>
<Link to={``}>已关闭的工单</Link> <span className="change" onClick={()=>this.changeTrends("Issue","close")}>已关闭的工单</span>
</li> </li>
<li> <li>
<span className="green">{data && data.open_issues_count}</span> <span className="green">{data && data.open_issues_count}</span>
<Link to={``}>创建工单</Link> <span className="change" onClick={()=>this.changeTrends("Issue","create")}>创建工单</span>
</li> </li>
</ul> </ul>
</div> </div>
@ -157,7 +164,7 @@ class Activity extends Component{
{ {
project_trends && project_trends.map((item,key)=>{ project_trends && project_trends.map((item,key)=>{
return( return(
<ActivityItem item={item}></ActivityItem> <ActivityItem item={item} {...this.props} ></ActivityItem>
) )
}) })
} }

@ -6,21 +6,38 @@ import { getImageUrl } from 'educoder';
class ActivityItem extends Component{ class ActivityItem extends Component{
render(){ render(){
const { projectsId } = this.props.match.params;
const { item } = this.props; const { item } = this.props;
return( return(
<div className="activity_item"> <div className="activity_item">
<div className="flex1"> <div className="flex1">
<p className="itemLine"> {/* 如果是版本发布 */}
<Link to={``} className="color-blue font-16">{item.name}</Link> { item.trend_type==="VersionRelease"? 
<span className="activity_type">{item.trend_type}</span> <p className="itemLine">
</p> <Link to={`/projects/${projectsId}/version`} className="color-blue font-16">{item.name}</Link>
<p className="itemLine mt15"> <span className="activity_type">{item.trend_type}</span>
<img alt="" src={getImageUrl(`images/${item.user_avatar}`)} className="createImage"/> </p >
<span className="mr20">{item.user_name}</span> :
{ item.created_at && <span className="color-grey-9">创建于<span className="ml2 color-grey-6">{item.created_at}</span></span>} // 如果是工单
</p> item.trend_type==="Issue"?
</div> <p className="itemLine">
</div> <Link to={`/projects/${projectsId}/orders/${item.trend_id}/detail`} className="color-blue font-16">{item.name}</Link>
<span className="activity_type">{item.trend_type}</span>
</p >
:
// 如果是合并请求
<p className="itemLine">
<Link to={`/projects/${projectsId}/merge/${item.trend_id}/Messagecount`} className="color-blue font-16">{item.name}</Link>
<span className="activity_type">{item.trend_type}</span>
</p >
}
<p className="itemLine mt15">
<img alt="" src={getImageUrl(`images/${item.user_avatar}`)} className="createImage"/>
<span className="mr20">{item.user_name}</span>
{ item.created_at && <span className="color-grey-9">创建于<span className="ml2 color-grey-6">{item.created_at}</span></span>}
</p >
</div>
</div>
) )
} }
} }

@ -98,4 +98,11 @@
height: 22px; height: 22px;
line-height: 22px; line-height: 22px;
border-radius: 50%; border-radius: 50%;
}
.change{
color: black;
cursor: pointer;
}
.change:hover{
color: #4183c4;
} }
Loading…
Cancel
Save