You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
educoder/public/react/src/forge/Order/MilepostDetail.js

367 lines
11 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

import React , { Component } from "react";
import {Link} from 'react-router-dom';
import { Dropdown , Menu , Icon , Pagination , Spin } from 'antd';
import './order.css';
import NoneData from '../../modules/courses/coursesPublic/NoneData';
import OrderItem from './OrderItem';
import axios from 'axios';
/**
* issue_chosen:下拉的筛选列表,
* data:列表接口返回的所有数据,
* issues:列表数组,
* isSpin:加载中,
* search:搜索关键字,
* author_id:发布者id,
* assigned_to_id:指派给。。。的id
* limit:每页条数,
* page:当前页,
* search_count:列表总条数
* issue_type:搜索条件
* status_type: issue的关闭和开启1表示开启中的2表示关闭的
*/
class MilepostDetail extends Component{
constructor(props){
super(props);
this.state={
issue_chosen:undefined,
data:undefined,
issues:undefined,
isSpin:false,
search:undefined,
author_id:undefined,
assigned_to_id:undefined,
limit:15,
page:1,
search_count:undefined,
issue_type:undefined,
status_type:'1',
//设置选择高亮
openselect:1,
closeselect:undefined,
miledata:undefined,
// status_type: undefined
issue_tag_ids:'标签',
tracker_ids:'所有分类',
author_ids:'发布人',
assigned_to_ids:'指派人',
priority_ids:'优先度',
done_ratios:'完成度',
paix:'排序'
}
}
componentDidMount=()=>{
this.getSelectList();
this.getIssueList();
this.getmeil();
}
getmeil=()=>{
const { projectsId } = this.props.match.params;
const { meilid } = this.props.match.params;
const url = `/projects/${projectsId}/versions/${meilid}/edit.json`;
axios.get(url,{
params:{
projectsId,meilid
}
}).then((result)=>{
if(result){
this.setState({
miledata:result.data,
})
this.props.form.setFieldsValue({
name:result.data.name,
description:result.data.description
});
}
}).catch((error)=>{
console.log(error);
})
}
getSelectList=()=>{
const { projectsId } = this.props.match.params;
const url = `/projects/${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);
})
}
// 获取列表数据
getIssueList=(page,limit,search,author_id,assigned_to_id,id,value,status_type)=>{
const { projectsId,meilid} = this.props.match.params;
const url = `/projects/${projectsId}/versions/${meilid}.json`;
axios.get(url,{
params:{
page,limit,search,author_id,assigned_to_id,status_type,
[id]:value
}
}).then((result)=>{
if(result){
this.setState({
data:result.data,
issues:result.data.issues,
search_count:result.data.search_count,
isSpin:false
})
}
}).catch((error)=>{
console.log(error);
})
}
getOption=(e,id,name)=>{
if(id+'s'==="issue_tag_ids"){
this.setState({
[id]:e.key,
issue_tag_ids:name
})
}
if(id+'s'==="tracker_ids"){
this.setState({
[id]:e.key,
tracker_ids:name
})
}
if(id+'s'==="author_ids"){
this.setState({
[id]:e.key,
author_ids:name
})
}
if(id+'s'==="assigned_to_ids"){
this.setState({
[id]:e.key,
assigned_to_ids:name
})
}
if(id+'s'==="priority_ids"){
this.setState({
[id]:e.key,
priority_ids:name
})
}
if(id+'s'==="done_ratios"){
this.setState({
[id]:e.key,
done_ratios:name
})
}
if(e.key==="created_on"){
if(e.item.props.value==="desc"){
this.setState({
[id]:e.key,
paix:'最新创建'
})
}else{
this.setState({
[id]:e.key,
paix:'最早创建'
})
}
}else if(e.key==="updated_on"){
if(e.item.props.value==="desc"){
this.setState({
[id]:e.key,
paix:'最新更新'
})
}else{
this.setState({
[id]:e.key,
paix:'最早更新'
})
}
}
this.setState({
[id]:e.key
})
const { page,limit,search,author_id,assigned_to_id } = this.state;
if(e.key==="all"){
this.getIssueList(page,limit,search,author_id,assigned_to_id,id);
}else{
this.getIssueList(page,limit,search,author_id,assigned_to_id,id,e.key);
}
}
renderMenu =(array,name,id)=>{
return(
<Menu>
<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
})
const {limit,search} = this.state;
this.getIssueList(page,limit,search);
}
// 搜索
searchFunc=(value)=>{
this.setState({
search:value,
isSpin:true
})
const {page,limit} = this.state;
this.getIssueList(page,limit,value);
}
openorder=(type)=>{
if(type){
const { current_user } = this.props;
if(type===1){
this.setState({
status_type:'1',
openselect:current_user.user_id,
closeselect:undefined
})
this.getIssueList("","","","","","","",1);
}else{
this.setState({
status_type:'2',
openselect:undefined,
closeselect:current_user.user_id
})
this.getIssueList("","","","","","","",2);
}
}
}
render(){
const { issue_chosen , issues , limit , page , search_count , data , miledata , isSpin,openselect,closeselect } = this.state;
const { projectsId,meilid } = this.props.match.params;
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>
)
const Paginations = (
<React.Fragment>
{
search_count > limit ?
<div className="mt30 mb50 edu-txt-center">
<Pagination simple defaultCurrent={page} total={search_count} pageSize={limit} onChange={this.ChangePage}></Pagination>
</div>:""
}
</React.Fragment>
)
return(
<div className="main">
<div className="topWrapper">
<p>{miledata&&miledata.name}</p>
<div className="milepostdiv">
<Link to={`/projects/${projectsId}/orders/${meilid}/meilpost`} className="topWrapper_btn" style={{marginRight:15}} >编辑里程碑</Link>
<Link to={`/projects/${projectsId}/orders/new`} className="topWrapper_btn">创建工单</Link>
</div>
</div>
<div className="topWrapper" style={{borderBottom:"none"}}>
{/* <p className="topWrapper_type">
</p> */}
</div>
<Spin spinning={isSpin}>
<div className="f-wrap-between mb20">
<ul className="topWrapper_type">
<li className={openselect ? "active":""} onClick={()=>this.openorder(1)}>{data && data.open_issues_count}个开启中</li>
<li className={closeselect ? "active":""} onClick={()=>this.openorder(2)}>{data && data.close_issues_count}个已关闭</li>
{/* <li>@我的</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.issue_type,'所有类型','issue_type')} trigger={['click']} placement="bottomCenter">*/}
{/*<span>类型<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.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.priority,'优先度','priority_id')} trigger={['click']} placement="bottomCenter">
<span>{this.state.priority_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>
{
search_count === 0 ?
<NoneData></NoneData>
:
<OrderItem issues={issues} search_count={search_count} page={page} limit={limit} {...this.props} {...this.state}></OrderItem>
}
{ Paginations }
</Spin>
</div>
)
}
}
export default MilepostDetail;