forked from Gitlink/forgeplus-react
270 lines
9.9 KiB
JavaScript
270 lines
9.9 KiB
JavaScript
import React, { Component } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import { Dropdown, Icon, Menu, Pagination, Typography, Popconfirm, Spin } from 'antd';
|
|
import NoneData from '../Nodata';
|
|
import axios from 'axios';
|
|
import './order.css';
|
|
|
|
const { Text } = Typography;
|
|
|
|
class Milepost extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
data: undefined,
|
|
limit: 15,
|
|
page: 1,
|
|
order_type: undefined,
|
|
//新建标签区域是否显示 none 隐藏 block 显示
|
|
display: 'none',
|
|
status: 'open',
|
|
openselect: 1,
|
|
closeselect: undefined,
|
|
order_name: undefined,
|
|
|
|
spinings: true
|
|
}
|
|
}
|
|
|
|
componentDidMount = () => {
|
|
this.getList(1, this.state.status, 'desc');
|
|
}
|
|
|
|
getList = (page, status, order_type, order_name) => {
|
|
const { projectsId ,owner } = this.props.match.params;
|
|
const { limit } = this.state;
|
|
const url = `/${owner}/${projectsId}/milestones.json`;
|
|
axios.get(url, {
|
|
params: {
|
|
projectsId, page, limit, status, order_type, order_name
|
|
}
|
|
}).then((result) => {
|
|
if (result) {
|
|
this.setState({
|
|
data: result.data,
|
|
spinings: false
|
|
})
|
|
}
|
|
}).catch((error) => {
|
|
console.log(error);
|
|
})
|
|
}
|
|
|
|
opneMilelist = (type) => {
|
|
const { order_name } = this.state;
|
|
if (type) {
|
|
const { current_user } = this.props;
|
|
if (type === 1) {
|
|
this.setState({
|
|
status: 'open',
|
|
openselect: current_user.user_id,
|
|
closeselect: undefined,
|
|
|
|
})
|
|
this.getList(1, 'open', 'desc', order_name);
|
|
} else {
|
|
this.setState({
|
|
status: 'closed',
|
|
openselect: undefined,
|
|
closeselect: current_user.user_id
|
|
})
|
|
this.getList(1, 'closed', 'desc', order_name);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
updatestatusemile = (status, arr) => {
|
|
const { projectsId , owner } = this.props.match.params;
|
|
const url = `/${owner}/${projectsId}/milestones/${arr.id}/update_status.json`;
|
|
const { current_user } = this.props;
|
|
axios.post(url, {
|
|
project_id: projectsId,
|
|
id: arr.id,
|
|
status: status
|
|
}).then(result => {
|
|
if (result) {
|
|
this.setState({
|
|
status: status,
|
|
closeselect: status === "closed" ? current_user.user_id : undefined,
|
|
openselect: status === "closed" ? undefined : current_user.user_id
|
|
})
|
|
this.getList(1, status, 'desc');
|
|
const { getDetail } = this.props;
|
|
getDetail && getDetail();
|
|
}
|
|
}).catch(error => {
|
|
console.log(error);
|
|
})
|
|
}
|
|
|
|
closemile = (arr) => {
|
|
const { projectsId , owner } = this.props.match.params;
|
|
const url = `/${owner}/${projectsId}/milestones/${arr.id}.json`;
|
|
axios.delete(url, {
|
|
data: {
|
|
project_id: projectsId,
|
|
id: arr.id
|
|
}
|
|
}).then((result) => {
|
|
if (result) {
|
|
this.getList(1, this.state.status, 'desc');
|
|
const { getDetail } = this.props;
|
|
getDetail && getDetail();
|
|
}
|
|
}).catch((error) => {
|
|
console.log(error);
|
|
})
|
|
}
|
|
|
|
ChangePage = (page) => {
|
|
this.setState({
|
|
page
|
|
})
|
|
|
|
this.getList(page);
|
|
}
|
|
|
|
// 排序
|
|
arrayList = (e) => {
|
|
this.setState({
|
|
order_name: e.key,
|
|
order_type: e.item.props.value
|
|
})
|
|
this.getList(1, this.state.status, e.item.props.value, e.key);
|
|
}
|
|
|
|
|
|
//控制新建标签页是否显示
|
|
newshow = () => {
|
|
this.setState({
|
|
display: 'block'
|
|
});
|
|
|
|
};
|
|
newclose = () => {
|
|
this.setState({
|
|
display: 'none'
|
|
});
|
|
};
|
|
|
|
|
|
render() {
|
|
const { data, limit, page, openselect, closeselect, spinings } = this.state;
|
|
const { projectsId , owner } = this.props.match.params;
|
|
const menu = (
|
|
<Menu className="orderCondition" onClick={this.arrayList}>
|
|
<Menu.Item key={'effective_date'} value="desc">到期日从后到先</Menu.Item>
|
|
<Menu.Item key={'effective_date'} value="asc">到期日从先到后</Menu.Item>
|
|
<Menu.Item key={'percent'} value="asc">完成度从低到高</Menu.Item>
|
|
<Menu.Item key={'percent'} value="desc">完成度从高到低</Menu.Item>
|
|
<Menu.Item key={'issues_count'} value="desc">任务从多到少</Menu.Item>
|
|
<Menu.Item key={'issues_count'} value="asc">任务从少到多</Menu.Item>
|
|
</Menu>
|
|
)
|
|
|
|
|
|
return (
|
|
<Spin spinning={spinings}>
|
|
<div className="main" style={{minHeight:"400px"}}>
|
|
<div style={{ display: this.state.display }}>
|
|
<div className="tagdiv" >
|
|
<span>里程碑{data && data.issue_tags_count}已创建</span>
|
|
</div>
|
|
</div>
|
|
<div className="topWrapper" style={{borderBottom:"1px solid #eee"}}>
|
|
<div className="topWrapper_type_infos">
|
|
<li className={openselect ? "active" : ""} onClick={() => this.opneMilelist(1)}>{data && data.open_count}个开启中</li>
|
|
<li className={closeselect ? "active" : ""} onClick={() => this.opneMilelist(2)}>{data && data.closed_count}个已关闭</li>
|
|
</div>
|
|
<div className="topWrapper_select">
|
|
<ul className="topWrapper_select mb-0">
|
|
<li>
|
|
<Dropdown className="topWrapperSelect" overlay={menu} trigger={['click']} placement="bottomCenter">
|
|
<span>排序<Icon type="caret-down" className="ml5" /></span>
|
|
</Dropdown>
|
|
</li>
|
|
</ul>
|
|
{
|
|
data && data.user_admin_or_member ?
|
|
<Link to={`/projects/${owner}/${projectsId}/milestones/new`} className="topWrapper_btn">新的里程碑</Link>
|
|
: ''
|
|
}
|
|
</div>
|
|
</div>
|
|
{
|
|
data && data.versions && data.versions.length > 0
|
|
&&
|
|
<div className="tagList">
|
|
{
|
|
data.versions.map((item, key) => {
|
|
return (
|
|
<div style={{ display: 'block' }} key={key}>
|
|
<div className="milepostdiv">
|
|
<div className="milepostwidth">
|
|
<div className="grid-item width100">
|
|
<i className="iconfont icon-lubiaosignpost3 font-12 mr3"></i>
|
|
<Link to={`/projects/${owner}/${projectsId}/milestones/${item.id}`} className="font-16">{item.name}</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="milepostdiv" style={{ marginTop: 5 }}>
|
|
<div className="milepostrighe">
|
|
<div className="grid-item mr10">
|
|
<i className="iconfont icon-rili font-14 mr5"></i>
|
|
<span className={item.effective_date ? "color-red" : "color-grey-c"}>{item.effective_date || "暂无截止时间"}</span>
|
|
</div>
|
|
<div className="grid-item mr10 color-grey-9">
|
|
<i className="iconfont icon-issue font-14 mr5"></i>
|
|
<span>{item.open_issues_count}个开启</span>
|
|
</div>
|
|
<div className="grid-item mr10 color-grey-9">
|
|
<i className="iconfont icon-shanchudiao font-14 mr5"></i>
|
|
<span>{item.close_issues_count}个关闭</span>
|
|
</div>
|
|
</div>
|
|
{
|
|
data && data.user_admin_or_member ?
|
|
<div className="milepostleft">
|
|
<div className="grid-item ml15 color-grey-9">
|
|
<i className="iconfont icon-bianji3 font-14 mr5"></i>
|
|
<Link to={`/projects/${owner}/${projectsId}/milestones/${item.id}/edit`} className="color-grey-9">编辑</Link>
|
|
</div>
|
|
<div className="grid-item ml15 color-grey-9">
|
|
<i className={item.status === "closed" ? "iconfont icon-gouxuan font-14 mr5":"iconfont icon-yiguanbi1 font-14 mr5"}></i>
|
|
<a onClick={() => this.updatestatusemile(item.status === "closed" ? "open" : "closed", item)} className="color-grey-9">{this.state.status === "closed" ? "开启" : "关闭"}</a>
|
|
</div>
|
|
<div className="grid-item ml15 color-grey-9">
|
|
<i className="iconfont icon-lajitong font-14 mr5" ></i>
|
|
<Popconfirm placement="bottom" title={'是否删除里程碑？'} okText="是" cancelText="否" onConfirm={() => this.closemile(item)}>
|
|
<a className="color-grey-9">删除</a>
|
|
</Popconfirm>
|
|
</div>
|
|
</div>
|
|
: ''
|
|
}
|
|
</div>
|
|
<div className="milepostdiv" style={{ marginTop: 5 }}>
|
|
<div className="textwidth">
|
|
<Text type="secondary" ellipsis={{ rows: 30, expandable: false, onExpand: Function }} >{item.description}</Text>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
})
|
|
}
|
|
</div>
|
|
}
|
|
{ data && data.versions && data.versions.length === 0 && <NoneData _html="暂无里程碑"></NoneData> }
|
|
{
|
|
data && data.versions_count > limit ?
|
|
<div className="mt30 mb50 edu-txt-center">
|
|
<Pagination simple defaultCurrent={page} total={data && data.versions_count} pageSize={limit} onChange={this.ChangePage}></Pagination>
|
|
</div> : ""
|
|
}
|
|
</div>
|
|
</Spin>
|
|
)
|
|
}
|
|
}
|
|
export default Milepost; |