forgeplus-react/src/forge/Order/order.js

855 lines
27 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import React, { Component } from "react";
import { Input, Dropdown, Menu, Icon, Pagination, Spin, DatePicker, Checkbox } from "antd";
import { Link } from 'react-router-dom';
import "./order.css";
import './index.scss';
import moment from 'moment';
import NoneData from "../Nodata";
import OrderItem from "./OrderItem";
import axios from "axios";
const Search = Input.Search;
/**
* 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 order 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,
search_count: undefined,
issue_type: undefined,
status_type: "1", // 默认显示开启中的
issue_tag_ids: "标签",
tracker_ids: "类型",
author_ids: "发布人",
assigned_to_ids: "负责人",
fixed_version_ids: "里程碑",
status_ids: "状态",
done_ratios: "完成度",
paix: "排序",
update_author_ids: "更换负责人",
update_fixed_version_ids: '更换里程碑',
update_status_ids: "修改状态",
begin: '',
end: '',
checkedValue: [],
allValue: [],
all: false,
select_params: {
assigned_to_id: undefined, // 负责人
author_id: undefined, // 发布人
issue_tag_id: undefined, // 标签
tracker_id: undefined, //类型
done_ratio: undefined, // 完成度
status_id: undefined, // 优先级
fixed_version_id: undefined,//里程碑
order_name: undefined,
order_type: undefined,
search: undefined,
update_author_id: undefined,
update_fixed_version_id: undefined,
update_status_id: undefined,
page: 1,
limit: 15,
},
};
}
componentDidMount = () => {
this.getSelectList();
this.getIssueList('1');
};
getSelectList = () => {
this.setState({
isSpin: true
})
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,
isSpin: false
});
}
})
.catch((error) => {
console.log(error);
});
};
// 获取列表数据
getIssueList = (status_type, begin, end) => {
this.setState({
isSpin: true
})
const { select_params } = this.state;
const { projectsId, owner } = this.props.match.params;
const url = `/${owner }/${projectsId}/issues.json`;
axios
.get(url, {
params: {
...select_params,
start_date: begin,
due_date: end,
status_type
}
})
.then((result) => {
if (result) {
const issues = result.data.issues
this.setState({
data: result.data,
issues: issues,
search_count: result.data.search_count,
isSpin: false,
allValue: issues && issues.length > 0 && issues.map((item) => {
return (item.id)
})
});
}
})
.catch((error) => {
console.log(error);
});
};
getMenu = (e, id, name) => {
this.setState({
isSpin: true,
});
let key_name = e.key.split("-");
if (key_name[0] === "created_on") {
if (e.item.props.value === "desc") {
this.setState({
paix: "最新创建",
});
} else {
this.setState({
paix: "最早创建",
});
}
this.state.select_params.order_name = e.key;
} else if (key_name[0] === "updated_on") {
if (e.item.props.value === "desc") {
this.setState({
paix: "最新更新",
});
} else {
this.setState({
paix: "最早更新",
});
}
}
this.state.select_params.order_name = key_name[0];
this.state.select_params.order_type = e.item.props.value;
this.state.select_params.page = 1;
const { status_type } = this.state;
this.getIssueList(status_type);
};
getOption = (e, id, name, toGet) => {
const { current_user } = this.props;
let option_id = e.key === "all" ? undefined : e.key;
let author_id = this.state.author_id;
let assigned_to_id = this.state.assigned_to_id;
let select_params = this.state.select_params;
select_params[`${id}`] = option_id;
select_params.page = 1;
if (current_user) {
author_id = (select_params.author_id && select_params.author_id === current_user.user_id) ? current_user.user_id : undefined;
assigned_to_id = (select_params.assigned_to_id && select_params.assigned_to_id === current_user.user_id) ? current_user.user_id : undefined;
}
this.setState({
[`${id}s`]: name,
select_params,
author_id,
assigned_to_id
});
if (!toGet) {
const { status_type } = this.state;
this.getIssueList(status_type);
}
};
renderMenu = (array, name, id, toGet) => {
return (
<Menu className="orderCondition">
<Menu.Item key={"all"} onClick={(e) => this.getOption(e, id, name, toGet)}>
{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, toGet)}
style={{textAlign:item.color ? "left" :"center",padding:"6px 15px"}}
>
{/* 标签前面的颜色tag */}
{item.color && <span className="tagColor" style={{backgroundColor:`${item.color}`}}></span>}
{item.name}
</Menu.Item>
);
})}
</Menu>
);
};
// 翻页
ChangePage = (page) => {
this.setState({
isSpin: true,
checkedValue: [],
all: false
});
const { status_type } = this.state;
this.state.select_params.page = page;
this.getIssueList(status_type);
};
// 搜索
searchFunc = (value) => {
this.setState({
search: value,
isSpin: true,
checkedValue:[],
all:undefined
});
const { status_type } = this.state;
this.state.select_params.search = value;
this.state.select_params.page = 1;
this.getIssueList(status_type);
};
openorder = (type) => {
this.setState({
author_id: undefined,
assigned_to_id: undefined,
status_type: type,
issue_tag_ids: "标签",
tracker_ids: "类型",
author_ids: "发布人",
assigned_to_ids: "负责人",
status_ids: "状态",
done_ratios: "完成度",
fixed_version_ids:"里程碑",
paix: "排序",
checkedValue:[],
all:undefined
});
this.state.select_params.page = 1;
this.state.select_params.limit = 15;
this.getIssueList(type);
};
// 筛选:全部、指派给我、由我创建
ChangeAssign = (type) => {
const { current_user } = this.props;
this.setState({
isSpin: true,
});
if (type) {
if (!current_user) {
this.setState({
isSpin: false,
});
return;
}
if (type === 1) {
this.setState({
assigned_to_ids: current_user.username,
assigned_to_id: current_user.user_id,
author_id: undefined,
author_ids: "发布人",
});
this.state.select_params.author_id = undefined;
this.state.select_params.assigned_to_id = current_user.user_id;
} else {
this.setState({
author_ids: current_user.username,
author_id: current_user.user_id,
assigned_to_id: undefined,
assigned_to_ids: "负责人",
});
this.state.select_params.assigned_to_id = undefined;
this.state.select_params.author_id = current_user.user_id;
}
} else {
this.setState({
author_ids: "发布人",
author_id: undefined,
assigned_to_ids: "负责人",
assigned_to_id: undefined,
});
this.state.select_params.assigned_to_id = undefined;
this.state.select_params.author_id = undefined;
}
const { status_type } = this.state;
this.getIssueList(status_type);
};
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 { status_type } = this.state;
this.getIssueList(status_type);
const { getDetail } = this.props;
getDetail && getDetail();
}
})
.catch((error) => {
console.log(error);
});
};
islogin=()=>{
this.props.showLoginDialog();
}
renderNew =()=>{
const { data } = this.state;
if(data && data.user_admin_or_member){
const { projectsId , owner } = this.props.match.params;
return(
<Link className="topWrapper_btn ml10" target="_blank" to={`/projects/${owner}/${projectsId}/issues/new`}>
+&nbsp;创建易修
</Link>
)
}
}
// 修改开始时间
changeBeginTime = (data, value) => {
const { status_type } = this.state;
this.setState({
begin: value
})
this.getIssueList(status_type, value, this.state.end);
}
changeEndTime = (data, value) => {
const { status_type } = this.state;
this.setState({
end: value
})
this.getIssueList(status_type, this.state.begin, value);
}
// 选择列表里面的checkbox
checkIssues = (value) => {
this.setState({
checkedValue: value
})
const { allValue } = this.state;
this.setState({
all: allValue && value && value.length === allValue.length,
})
// 不勾选数据时清除右上角选择的项
if (value.length === 0) {
this.setState({
update_author_ids: "更换负责人",
update_fixed_version_ids: "更换里程碑",
update_status_ids: "修改状态",
select_params: {
update_author_id: undefined,
update_fixed_version_id: undefined,
update_status_id: undefined
}
})
}
}
// 全选和反选
changeAll = (e) => {
if (e.target.checked) {
const { allValue } = this.state;
this.setState({
checkedValue: allValue
})
} else {
this.setState({
checkedValue: []
})
}
this.setState({
all: e.target.checked
})
}
// 批量修改
updateIssues = () => {
const { checkedValue, select_params } = this.state;
const { projectsId , owner } = this.props.match.params;
if (!select_params.update_author_id && !select_params.update_fixed_version_id && !select_params.update_status_id) {
this.resetSelectParams();
return;
}
this.setState({
isSpin: true
})
const url = `/${owner}/${projectsId}/issues/series_update.json`;
axios.post(url, {
ids: checkedValue,
assigned_to_id: select_params.update_author_id,
fixed_version_id: select_params.update_fixed_version_id,
status_id: select_params.update_status_id
}).then(result => {
if (result) {
const { getDetail } = this.props;
(select_params && select_params.update_status_id) && getDetail && getDetail();
this.props.showNotification("修改成功!");
this.successFunc();
}
}).catch(error => {
console.log(error);
})
}
successFunc = () => {
this.resetSelectParams();
const { status_type } = this.state;
this.getIssueList(status_type);
}
resetSelectParams = () => {
let select_params = this.state.select_params;
select_params.update_author_id = undefined;
select_params.update_fixed_version_id = undefined;
select_params.update_status_id = undefined;
this.setState({
all: false,
checkedValue: [],
update_author_ids: "更换负责人",
update_fixed_version_ids: "更换里程碑",
update_status_ids: "修改状态",
select_params
})
}
// 批量删除
deleteIssues = () => {
this.props.confirm({
content: "是否确认删除所有选中的任务?",
onOk: () => {
this.setState({
isSpin: true
})
const { checkedValue } = this.state;
const { projectsId , owner } = this.props.match.params;
const url = `/${owner}/${projectsId}/issues/clean.json`;
axios.post(url, {
ids: checkedValue
}).then(result => {
if (result) {
const { getDetail } = this.props;
getDetail && getDetail();
this.props.showNotification("删除成功!");
this.successFunc();
}
}).catch(error => {
console.log(error);
})
}
})
}
menu =()=> (
<Menu onClick={(e) => this.getMenu(e)}>
<Menu.Item key={"created_on-desc"} value="desc">
最新创建
</Menu.Item>
<Menu.Item key={"created_on-asc"} value="asc">
最早创建
</Menu.Item>
<Menu.Item key={"updated_on-desc"} value="desc">
最新更新
</Menu.Item>
<Menu.Item key={"updated_on-asc"} value="asc">
最早更新
</Menu.Item>
</Menu>
);
render() {
const { current_user } = this.props;
const {
issue_chosen,
issues,
search_count,
data,
author_id,
assigned_to_id,
isSpin,
status_type,
select_params,
begin, end, checkedValue, all
} = this.state;
return (
<div className="main" style={{padding:"0px"}}>
<div style={{padding:"10px 20px 0px 20px"}}>
<div className="topWrapper" style={{ paddingTop: "10px" }}>
<ul className="topWrapper_type">
<li>
<label>所有</label>
<span
className={status_type ? "" : "active"}
onClick={() => this.openorder()}
>{data && data.all_count}</span>
</li>
<li>
<label>开启中</label>
<span
className={status_type === "1" ? "active" : ""}
onClick={() => this.openorder("1")}
>{data && data.open_count}</span>
</li>
<li>
<label>已关闭</label>
<span className={status_type === "2" ? "active" : ""}
onClick={() => this.openorder("2")}>{data && data.close_count}</span>
</li>
</ul>
{this.renderNew()}
</div>
<div className="topWrapper" style={{borderBottom:"none"}}>
<div className="target-detail-search">
<Search
placeholder="输入关键字搜索易修"
enterButton
onSearch={this.searchFunc}
style={{ width: 300 }}
/>
</div>
<div>
<DatePicker
value={begin ? moment(begin, 'YYYY-MM-DD') : ""}
style={{ marginRight: "20px" }}
placeholder="请选择开始时间"
onChange={this.changeBeginTime}
/>
<DatePicker value={end ? moment(end, 'YYYY-MM-DD') : ""} placeholder="请选择结束时间" onChange={this.changeEndTime} />
</div>
</div>
</div>
<Spin spinning={isSpin}>
<div className="f-wrap-between screenWrap">
<div className="df">
{
((current_user && current_user.login) && (data && data.user_admin_or_member)) ?
<Checkbox value="0" style={{ lineHeight: "50px", marginRight: "15px" }} checked={all} onChange={this.changeAll}></Checkbox>
: ""
}
{checkedValue && checkedValue.length > 0 ?
<span style={{ lineHeight: "50px" }}>选中{checkedValue.length}个issue</span>
:
<ul className="searchBanner">
<li
className={!author_id && !assigned_to_id ? "active" : ""}
onClick={() => this.ChangeAssign()}
>
<label>搜索结果</label>
<span>{data && data.search_count}</span>
</li>
<li
style={{
display:
current_user && current_user.login === "" ? "none" : "flex",
}}
className={assigned_to_id ? "active" : ""}
onClick={() => this.ChangeAssign(1)}
>
<label>指派给我</label>
<span>{data && data.assign_me_count}</span>
</li>
<li
style={{
display:
current_user && current_user.login === "" ? "none" : "flex",
}}
className={author_id ? "active" : ""}
onClick={() => this.ChangeAssign(2)}
>
<label>我的发布</label>
<span>{data && data.my_published_count}</span>
</li>
</ul>
}
</div>
{
checkedValue && checkedValue.length > 0 ?
<ul className="topWrapper_select wrapperStyle">
<li className="mr20">
<Dropdown
className="topWrapperSelect"
overlay={this.renderMenu(
issue_chosen && issue_chosen.assign_user,
"更换负责人",
"update_author_id", true
)}
trigger={["click"]}
placement="bottomCenter"
>
<span>
{this.state.update_author_ids}
<Icon type="caret-down" className="ml5" />
</span>
</Dropdown>
</li>
<li className="mr20">
<Dropdown
className="topWrapperSelect wrapperStyle"
overlay={this.renderMenu(
issue_chosen && issue_chosen.issue_version,
"更换里程碑",
"update_fixed_version_id", true
)}
trigger={["click"]}
placement="bottomCenter"
>
<span>
{this.state.update_fixed_version_ids}
<Icon type="caret-down" className="ml5" />
</span>
</Dropdown>
</li>
<li className="mr20">
<Dropdown
className="topWrapperSelect wrapperStyle"
overlay={this.renderMenu(
issue_chosen && issue_chosen.issue_status,
"修改状态",
"update_status_id", true
)}
trigger={["click"]}
placement="bottomCenter"
>
<span>
{this.state.update_status_ids}
<Icon type="caret-down" className="ml5" />
</span>
</Dropdown>
</li>
<a onClick={this.updateIssues} className="updateBtn blue mr20">确定</a>
<a onClick={this.deleteIssues} className="updateBtn red mr20">删除</a>
</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_version,
"里程碑",
"fixed_version_id"
)}
trigger={["click"]}
placement="bottomCenter"
>
<span>
{this.state.fixed_version_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={this.menu()}
trigger={["click"]}
placement="bottomCenter"
>
<span>
{this.state.paix}
<Icon type="caret-down" className="ml5" />
</span>
</Dropdown>
</li>
</ul>
}
</div>
{search_count === 0 ? (
<NoneData _html="暂时还没有相关数据!" />
) : (
<div style={{ minHeight: "500px" }}>
<Checkbox.Group name="issues" onChange={this.checkIssues} value={checkedValue} style={{ width: "100%" }}>
{issues && issues.length > 0 && issues.map((item, key) => {
return (
<OrderItem
key={key}
item={item}
checkbox={current_user &&(data && data.user_admin_or_member) ? <Checkbox value={item.id} key={item.id} style={{ margin: '4px 15px 0px 0px' }}></Checkbox> : ""}
search_count={search_count}
page={select_params.page}
limit={select_params.limit}
{...this.props}
{...this.state}
deletedetail={this.deletedetail}
user_admin_or_member={data && data.user_admin_or_member}
></OrderItem>
)
})}
</Checkbox.Group>
</div>
)}
{
search_count > select_params.limit ?
<div className="mt30 mb30 edu-txt-center">
<Pagination
simple
defaultCurrent={select_params.page}
total={search_count}
pageSize={select_params.limit}
onChange={this.ChangePage}
></Pagination>
</div>
:
""
}
</Spin>
</div>
);
}
}
export default order;