forked from Gitlink/forgeplus-react
407 lines
15 KiB
JavaScript
407 lines
15 KiB
JavaScript
import React, { Component } from "react";
|
||
import { Link } from 'react-router-dom';
|
||
import { Dropdown, Menu, Icon, Pagination, Spin, Button, Checkbox } from 'antd';
|
||
import './order.scss';
|
||
import { FlexAJ } from '../Component/layout';
|
||
import CheckProfile from '../Component/ProfileModal/Profile';
|
||
import AllMenus from "../Issues/Component/allMenus";
|
||
import NoneData from '../Nodata';
|
||
import OrderItem from './OrderItem';
|
||
|
||
import axios from 'axios';
|
||
import './milepost.scss';
|
||
|
||
/**
|
||
* issue_chosen:下拉的筛选列表,
|
||
* data:列表接口返回的所有数据,
|
||
* issues:列表数组,
|
||
* isSpin:加载中,
|
||
* author_id:发布者id,
|
||
* assigned_to_id:指派给。。。的id，
|
||
* limit:每页条数,
|
||
* page:当前页,
|
||
* search_count:列表总条数
|
||
* issue_type:搜索条件
|
||
* status_type: issue的关闭和开启，1表示开启中的，2表示关闭的
|
||
* category: issue状态： 全部、开启、关闭
|
||
*/
|
||
class MilepostDetail extends Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
issue_chosen: undefined,
|
||
data: undefined,
|
||
issues: undefined,
|
||
isSpin: true,
|
||
author_id: undefined,
|
||
status_id: undefined,
|
||
assigned_to_id: undefined,
|
||
limit: 15,
|
||
page: 1,
|
||
search_count: undefined,
|
||
issue_type: undefined,
|
||
status_type: '1',
|
||
//设置选择高亮
|
||
issue_tag_ids: '标记',
|
||
tracker_ids: '类型',
|
||
author_ids: '发布人',
|
||
assigned_to_ids: '负责人',
|
||
status_ids: "状态",
|
||
done_ratios: '完成度',
|
||
paix: '排序',
|
||
issueFlag:true,
|
||
checkAll: false,
|
||
allValue: [],
|
||
allIds: [],
|
||
category: 'all'
|
||
}
|
||
}
|
||
|
||
componentDidMount = () => {
|
||
this.getSelectList();
|
||
const { page } = this.state;
|
||
this.getIssueList(page);
|
||
}
|
||
|
||
componentDidUpdate=(prevProps)=>{
|
||
this.updateDocumentTitle();
|
||
const prebannerList = prevProps && prevProps.bannerList;
|
||
const bannerList = this.props && this.props.bannerList;
|
||
if(prebannerList !== bannerList){
|
||
if(bannerList && bannerList.length>0){
|
||
let i = bannerList.filter(i=>i.menu_name === "issues");
|
||
this.setState({
|
||
issueFlag:i && i.length === 0 ? false :true
|
||
})
|
||
}
|
||
}
|
||
}
|
||
|
||
// 更新网页标题
|
||
updateDocumentTitle(){
|
||
const {projectDetail} = this.props;
|
||
const {data} = this.state;
|
||
if(projectDetail && data){
|
||
const { author, name} = projectDetail;
|
||
document.title = `${data.name}-里程碑-${author.name}/${name}`;
|
||
}
|
||
}
|
||
|
||
getSelectList = () => {
|
||
const { projectsId , owner } = this.props.match.params;
|
||
const url = `/${owner}/${projectsId}/issues/index_chosen.json`;
|
||
axios.get(url).then((result) => {
|
||
if (result) {
|
||
this.setState({
|
||
issue_chosen: result.data.issue_chosen
|
||
})
|
||
}
|
||
}).catch((error) => {
|
||
console.log(error);
|
||
})
|
||
}
|
||
|
||
deletedetail = (id) => {
|
||
const { projectsId , owner } = this.props.match.params;
|
||
const url = `/${owner}/${projectsId}/issues/${id}.json`;
|
||
axios.delete(url, {
|
||
data: {
|
||
project_id: projectsId,
|
||
id: id,
|
||
},
|
||
})
|
||
.then((result) => {
|
||
if (result) {
|
||
const { page } = this.state;
|
||
this.getIssueList(page);
|
||
const { getDetail } = this.props;
|
||
getDetail && getDetail();
|
||
}
|
||
})
|
||
.catch((error) => {
|
||
console.log(error);
|
||
});
|
||
};
|
||
// 获取列表数据
|
||
getIssueList = ( page , item , value , update , updateValue , type ) => {
|
||
const { projectsId, meilid , owner } = this.props.match.params;
|
||
const { limit , order_name , order_type , issue_tag_id , author_id , assigned_to_id , tracker_id , status_id , done_ratio , status_type } = this.state;
|
||
|
||
const url = `/v1/${owner}/${projectsId}/milestones/${meilid}.json`;
|
||
let params = update ? {
|
||
page, limit , order_name:value , order_type:updateValue , issue_tag_id ,
|
||
author_id , assigned_to_id , tracker_id , status_id , done_ratio,
|
||
status_type:type || status_type,
|
||
}:{
|
||
page, limit , order_name , order_type , issue_tag_id ,
|
||
author_id , assigned_to_id , tracker_id , status_id , done_ratio,
|
||
status_type:type || status_type,
|
||
[item]:value
|
||
}
|
||
axios.get(url, {
|
||
params: params
|
||
}).then((result) => {
|
||
if (result) {
|
||
this.setState({
|
||
data: result.data.milestone,
|
||
issues: result.data.issues,
|
||
search_count: params.status_type ==="1" ? result.data.open_issues_count : result.data.close_issues_count,
|
||
isSpin: false
|
||
})
|
||
}
|
||
}).catch((error) => {
|
||
console.log(error);
|
||
})
|
||
}
|
||
|
||
getOption = (e, id, name) => {
|
||
if (e.key === "created_on") {
|
||
if (e.item.props.value === "desc") {
|
||
this.setState({
|
||
paix: '最新创建'
|
||
})
|
||
} else {
|
||
this.setState({
|
||
paix: '最早创建'
|
||
})
|
||
}
|
||
} else if (e.key === "updated_on") {
|
||
if (e.item.props.value === "desc") {
|
||
this.setState({
|
||
paix: '最新更新'
|
||
})
|
||
} else {
|
||
this.setState({
|
||
paix: '最早更新'
|
||
})
|
||
}
|
||
}
|
||
this.setState({
|
||
[id]: e.key,
|
||
[id+"s"]:name,
|
||
page:1
|
||
})
|
||
if (e.key === "created_on" || e.key === "updated_on") {
|
||
this.setState({
|
||
order_name: e.key,
|
||
order_type: e.item.props.value
|
||
})
|
||
this.getIssueList(1,id,e.key,true,e.item.props.value);
|
||
}else{
|
||
this.getIssueList(1,id,e.key);
|
||
}
|
||
}
|
||
|
||
renderMenu = (array, name, id) => {
|
||
return (
|
||
<Menu className="orderCondition">
|
||
<Menu.Item key={"all"} onClick={(e) => this.getOption(e, id, name)}>{name}</Menu.Item>
|
||
{
|
||
array && array.length > 0 && array.map((item, key) => {
|
||
return (
|
||
<Menu.Item key={item.id} onClick={(e) => this.getOption(e, id, item.name)}>{item.name}</Menu.Item>
|
||
)
|
||
})
|
||
}
|
||
</Menu>
|
||
)
|
||
}
|
||
|
||
// 翻页
|
||
ChangePage = (page) => {
|
||
this.setState({
|
||
page,
|
||
isSpin: true
|
||
})
|
||
this.getIssueList(page);
|
||
}
|
||
|
||
category = (type) => {
|
||
this.setState({
|
||
status_type: type,
|
||
issue_tag_id : undefined,
|
||
author_id : undefined,
|
||
tracker_id : undefined,
|
||
done_ratio : undefined,
|
||
status_id: undefined,
|
||
assigned_to_id: undefined,
|
||
issue_tag_ids: '标记',
|
||
tracker_ids: '类型',
|
||
author_ids: '发布人',
|
||
assigned_to_ids: '负责人',
|
||
status_ids: "状态",
|
||
done_ratios: '完成度',
|
||
paix: '排序'
|
||
},() => {
|
||
this.getIssueList(1,undefined,undefined,undefined,undefined,type);
|
||
});
|
||
|
||
}
|
||
|
||
// 全选所有issue
|
||
chooseAll = (e) =>{
|
||
const {allIds} = this.state;
|
||
this.setState({
|
||
checkAll: e.target.checked,
|
||
allValue: e.target.checked ? allIds : []
|
||
});
|
||
}
|
||
|
||
render() {
|
||
|
||
const { issue_chosen, issues, limit, page, search_count, data, isSpin , status_type , issueFlag, checkAll, allValue, category } = this.state;
|
||
const { projectsId, meilid ,owner} = this.props.match.params;
|
||
const { current_user , showLoginDialog , projectDetail } = this.props;
|
||
const menu = (
|
||
<Menu onClick={(e) => this.getOption(e)}>
|
||
<Menu.Item key={'created_on'} value="desc">最新创建</Menu.Item>
|
||
<Menu.Item key={'created_on'} value="asc">最早创建</Menu.Item>
|
||
<Menu.Item key={'updated_on'} value="desc">最新更新</Menu.Item>
|
||
<Menu.Item key={'updated_on'} value="asc">最早更新</Menu.Item>
|
||
</Menu>
|
||
)
|
||
return (
|
||
<div className="main milepostDetail">
|
||
<FlexAJ>
|
||
<div>
|
||
<p className="font-17 font-bd color-black" style={{width: '900px'}}>{data && data.name}</p>
|
||
<p className="mt7">
|
||
<span className="mr20">
|
||
<i className="iconfont icon-a-31shijian font-14 mr5 color-grey-89">
|
||
</i>
|
||
{
|
||
data && data.effective_date ?
|
||
<span className="color-grey-89">{data && data.effective_date}</span>
|
||
:
|
||
<span className="color-grey-89">暂无截止时间</span>
|
||
}
|
||
</span>
|
||
{data && (data.percent || data.percent===0) ? <span style={{color: '#1aaf42'}}> {data.percent > 0 ? data.percent.toFixed(2):data.percent}%完成 </span> :"" }
|
||
</p>
|
||
</div>
|
||
<div className="milepostdiv">
|
||
{
|
||
(current_user && current_user.login) && ( projectDetail && projectDetail.permission && projectDetail.permission !== "Reporter") ?
|
||
<Link to={`/${owner}/${projectsId}/milestones/${meilid}/edit`} className="grayButton" style={{ marginRight: 15 }}><i className="iconfont icon-lichengbeiicon1 font-12 mr5"></i>编辑里程碑</Link>
|
||
:""
|
||
}
|
||
{
|
||
issueFlag ? (current_user && current_user.login ?
|
||
<Button type='primary' onClick={() => {this.props.history.push(`/${owner}/${projectsId}/issues/${meilid}/new`)}} className='createMilepostBtn' style={{width: '83px'}}>+ 创建疑修</Button>
|
||
:<Button type='primary' onClick={showLoginDialog} className='createMilepostBtn' style={{width: '83px'}}>+ 创建疑修</Button>)
|
||
:""
|
||
}
|
||
</div>
|
||
</FlexAJ>
|
||
|
||
<Spin spinning={isSpin}>
|
||
<div className="listheader">
|
||
<div style={{display:"flex"}}>
|
||
<Checkbox value="all" style={{marginRight: "16px"}} checked={checkAll} onChange={this.chooseAll}></Checkbox>
|
||
{
|
||
allValue && allValue.length>0 ?
|
||
<span>选择{allValue.length}个issue</span>
|
||
:
|
||
<ul className="statusul">
|
||
<li className={category === "all" ?"active":""} onClick={() => this.category("all")}>全部<span>{total}</span></li>
|
||
<li className={category === "opened" ?"active":""} onClick={() => this.category("opened")}>开启中<span>{openedCount}</span></li>
|
||
<li className={category === "closed" ?"active":""} onClick={() => this.category("closed")}>已关闭<span>{closedCount}</span></li>
|
||
</ul>
|
||
}
|
||
</div>
|
||
<div className="menusul">
|
||
<AllMenus
|
||
ref={menuRef}
|
||
update={allValue && allValue.length>0}
|
||
owner={owner}
|
||
projectsId={projectsId}
|
||
chooseFunc={chooseFunc}
|
||
/>
|
||
{
|
||
allValue && allValue.length>0 ?
|
||
<div>
|
||
<Button type="primary" ghost onClick={sureUpdate}>确定</Button>
|
||
<Button type="danger" ghost className="ml10" onClick={()=>setVisible(true)}>删除</Button>
|
||
<Button ghost className="ml10 mr10" onClick={cancelUpdate}>取消</Button>
|
||
</div>
|
||
:""
|
||
}
|
||
</div>
|
||
</div>
|
||
{/* <div className="pl20 pr20">
|
||
<div className="f-wrap-between pt15 pb15 bor-bottom-greyE">
|
||
<ul className="topWrapper_type_infos">
|
||
<li className={status_type==="1" ? "active" : ""} onClick={() => this.openorder("1")}>{data && data.open_issues_count}个开启中</li>
|
||
<li className={status_type==="2" ? "active" : ""} onClick={() => this.openorder("2")}>{data && data.close_issues_count}个已关闭</li>
|
||
</ul>
|
||
<ul className="topWrapper_select">
|
||
<li>
|
||
<Dropdown className="topWrapperSelect" overlay={this.renderMenu(issue_chosen && issue_chosen.issue_tag, '标记', 'issue_tag_id')} trigger={['click']} placement="bottomCenter">
|
||
<span>{this.state.issue_tag_ids}<Icon type="caret-down" className="ml5" /></span>
|
||
</Dropdown>
|
||
</li>
|
||
<li>
|
||
<Dropdown className="topWrapperSelect" overlay={this.renderMenu(issue_chosen && issue_chosen.assign_user, '发布人', 'author_id')} trigger={['click']} placement="bottomCenter">
|
||
<span>{this.state.author_ids}<Icon type="caret-down" className="ml5" /></span>
|
||
</Dropdown>
|
||
</li>
|
||
<li>
|
||
<Dropdown className="topWrapperSelect" overlay={this.renderMenu(issue_chosen && issue_chosen.assign_user, '负责人', 'assigned_to_id')} trigger={['click']} placement="bottomCenter">
|
||
<span>{this.state.assigned_to_ids}<Icon type="caret-down" className="ml5" /></span>
|
||
</Dropdown>
|
||
</li>
|
||
<li>
|
||
<Dropdown className="topWrapperSelect" overlay={this.renderMenu(issue_chosen && issue_chosen.tracker, '类型', 'tracker_id')} trigger={['click']} placement="bottomCenter">
|
||
<span>{this.state.tracker_ids}<Icon type="caret-down" className="ml5" /></span>
|
||
</Dropdown>
|
||
</li>
|
||
<li>
|
||
<Dropdown className="topWrapperSelect" overlay={this.renderMenu(issue_chosen && issue_chosen.issue_status, '状态', 'status_id')} trigger={['click']} placement="bottomCenter">
|
||
<span>{this.state.status_ids}<Icon type="caret-down" className="ml5" /></span>
|
||
</Dropdown>
|
||
</li>
|
||
<li>
|
||
<Dropdown className="topWrapperSelect" overlay={this.renderMenu(issue_chosen && issue_chosen.done_ratio, '完成度', 'done_ratio')} trigger={['click']} placement="bottomCenter">
|
||
<span>{this.state.done_ratios}<Icon type="caret-down" className="ml5" /></span>
|
||
</Dropdown>
|
||
</li>
|
||
<li>
|
||
<Dropdown className="topWrapperSelect" overlay={menu} trigger={['click']} placement="bottomCenter">
|
||
<span>{this.state.paix}<Icon type="caret-down" className="ml5" /></span>
|
||
</Dropdown>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div className="setItemStyle">
|
||
{
|
||
search_count === 0 ?
|
||
<NoneData _html="暂时还没有相关数据!" />
|
||
:
|
||
issues && issues.length>0 && issues.map((item,key)=>{
|
||
return(
|
||
<OrderItem
|
||
key={key} mile
|
||
item={item}
|
||
search_count={search_count}
|
||
page={page}
|
||
limit={limit}
|
||
{...this.props} {...this.state}
|
||
deletedetail={this.deletedetail}
|
||
></OrderItem>
|
||
)
|
||
})
|
||
}
|
||
</div>
|
||
{
|
||
search_count > limit?
|
||
<div className="pt30 pb30 edu-txt-center" style={{borderTop:"1px solid #eee"}}>
|
||
<Pagination simple current={page} total={search_count} pageSize={limit} onChange={this.ChangePage}></Pagination>
|
||
</div>:""
|
||
}
|
||
</div> */}
|
||
</Spin>
|
||
</div>
|
||
)
|
||
}
|
||
}
|
||
export default MilepostDetail; |