forked from Gitlink/forgeplus-react
612 lines
17 KiB
JavaScript
612 lines
17 KiB
JavaScript
import React, { Component } from "react";
|
||
import { Input, Dropdown, Menu, Icon, Pagination, Spin, Button, DatePicker } from "antd";
|
||
import "./order.css";
|
||
|
||
const { RangePicker } = DatePicker;
|
||
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,
|
||
// limit: 15,
|
||
// page: 1,
|
||
search_count: undefined,
|
||
issue_type: undefined,
|
||
status_type: "1",
|
||
//设置选择高亮
|
||
// openselect: 1,
|
||
// closeselect: undefined,
|
||
issue_tag_ids: "标签",
|
||
tracker_ids: "所有分类",
|
||
author_ids: "发布人",
|
||
assigned_to_ids: "指派人",
|
||
priority_ids: "优先度",
|
||
done_ratios: "完成度",
|
||
paix: "排序",
|
||
select_params: {
|
||
status_type: "1", //开启中和关闭中，默认为开启中的
|
||
assigned_to_id: undefined, // 指派人
|
||
author_id: undefined, // 发布人
|
||
issue_tag_id: undefined, // 标签
|
||
tracker_id: undefined, //所有分类
|
||
done_ratio: undefined, // 完成度
|
||
priority_id: undefined, // 优先级
|
||
order_name: undefined,
|
||
order_type: undefined,
|
||
search: undefined,
|
||
start_date:undefined,
|
||
due_date: undefined,
|
||
page: 1,
|
||
limit: 15,
|
||
},
|
||
};
|
||
}
|
||
|
||
componentDidMount = () => {
|
||
this.getSelectList();
|
||
this.getIssueList();
|
||
};
|
||
|
||
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 = () => {
|
||
const { select_params } = this.state;
|
||
const { projectsId } = this.props.match.params;
|
||
const url = `/projects/${projectsId}/issues.json`;
|
||
axios
|
||
.get(url, {
|
||
params: select_params,
|
||
})
|
||
.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);
|
||
});
|
||
};
|
||
|
||
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;
|
||
this.getIssueList();
|
||
};
|
||
|
||
getOption = (e, id, name) => {
|
||
const { current_user } = this.props;
|
||
this.setState({
|
||
isSpin: true,
|
||
});
|
||
let option_id = e.key === "all" ? undefined : e.key;
|
||
this.state.select_params[`${id}`] = option_id;
|
||
this.state.select_params.page = 1;
|
||
this.state[`${id}s`] = name;
|
||
if (current_user) {
|
||
if (
|
||
this.state.select_params.author_id &&
|
||
parseInt(this.state.select_params.author_id) === current_user.user_id
|
||
) {
|
||
this.state.author_id = current_user.user_id;
|
||
} else {
|
||
this.state.author_id = undefined;
|
||
}
|
||
|
||
if (
|
||
this.state.select_params.assigned_to_id &&
|
||
parseInt(this.state.select_params.assigned_to_id) ===
|
||
current_user.user_id
|
||
) {
|
||
this.state.assigned_to_id = current_user.user_id;
|
||
} else {
|
||
this.state.assigned_to_id = undefined;
|
||
}
|
||
}
|
||
this.getIssueList();
|
||
};
|
||
|
||
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({
|
||
isSpin: true,
|
||
});
|
||
this.state.select_params.page = page;
|
||
this.getIssueList();
|
||
};
|
||
|
||
// 搜索
|
||
searchFunc = (value) => {
|
||
this.setState({
|
||
search: value,
|
||
isSpin: true,
|
||
});
|
||
this.state.select_params.search = value;
|
||
this.state.select_params.page = 1;
|
||
this.getIssueList();
|
||
};
|
||
|
||
openorder = (type) => {
|
||
this.setState({
|
||
isSpin: true,
|
||
});
|
||
if (type) {
|
||
this.setState({
|
||
author_id: undefined,
|
||
assigned_to_id: undefined,
|
||
status_type: type,
|
||
issue_tag_ids: "标签",
|
||
tracker_ids: "所有分类",
|
||
author_ids: "发布人",
|
||
assigned_to_ids: "指派人",
|
||
priority_ids: "优先度",
|
||
done_ratios: "完成度",
|
||
paix: "排序",
|
||
});
|
||
this.state.select_params = {
|
||
status_type: type,
|
||
search: undefined,
|
||
page: 1,
|
||
limit: 15,
|
||
};
|
||
this.getIssueList();
|
||
}
|
||
};
|
||
|
||
// 筛选：全部、指派给我、由我创建
|
||
ChangeAssign = (type) => {
|
||
const { current_user } = this.props;
|
||
this.setState({
|
||
isSpin: true,
|
||
});
|
||
if (type) {
|
||
if (current_user === undefined) {
|
||
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;
|
||
}
|
||
|
||
this.getIssueList();
|
||
};
|
||
|
||
deletedetail = (id) => {
|
||
const { projectsId } = this.props.match.params;
|
||
const url = `/projects/${projectsId}/issues/${id}.json`;
|
||
axios
|
||
.delete(url, {
|
||
data: {
|
||
project_id: projectsId,
|
||
id: id,
|
||
},
|
||
})
|
||
.then((result) => {
|
||
if (result) {
|
||
this.getIssueList();
|
||
}
|
||
})
|
||
.catch((error) => {
|
||
console.log(error);
|
||
});
|
||
console.log(id);
|
||
};
|
||
|
||
islogin() {
|
||
const { projectsId } = this.props.match.params;
|
||
if (this.props.checkIfLogin() === false) {
|
||
this.props.showLoginDialog();
|
||
return;
|
||
} else {
|
||
this.props.history.push(`/projects/${projectsId}/orders/new`);
|
||
}
|
||
}
|
||
|
||
render() {
|
||
const { current_user } = this.props;
|
||
|
||
const {
|
||
issue_chosen,
|
||
issues,
|
||
search_count,
|
||
data,
|
||
author_id,
|
||
assigned_to_id,
|
||
isSpin,
|
||
status_type,
|
||
select_params,
|
||
} = this.state;
|
||
|
||
const 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>
|
||
);
|
||
|
||
const Paginations = (
|
||
<React.Fragment>
|
||
{search_count > select_params.limit ? (
|
||
<div className="mt30 mb50 edu-txt-center">
|
||
<Pagination
|
||
simple
|
||
defaultCurrent={select_params.page}
|
||
total={search_count}
|
||
pageSize={select_params.limit}
|
||
onChange={this.ChangePage}
|
||
></Pagination>
|
||
</div>
|
||
) : (
|
||
""
|
||
)}
|
||
</React.Fragment>
|
||
);
|
||
return (
|
||
<div className="main">
|
||
<div className="topWrapper" style={{ borderBottom: "none", padding: "0" }}>
|
||
<div>
|
||
<span className="mr40">
|
||
<span className="mr8 color-grey">所有:</span>
|
||
<Button size="small">{data && data.all_count}</Button>
|
||
</span>
|
||
<span className="mr40">
|
||
<span className="mr8 color-grey">开启中:</span>
|
||
<Button size="small">{data && data.open_count}</Button>
|
||
</span>
|
||
<span>
|
||
<span className="mr8 color-grey">已关闭:</span>
|
||
<Button size="small">{data && data.close_count}</Button>
|
||
</span>
|
||
</div>
|
||
<Button type="primary" onClick={() => this.islogin()}><Icon type="plus" size="16"></Icon>创建任务</Button>
|
||
|
||
</div>
|
||
<div className="topWrapper" style={{ borderBottom: "none" }}>
|
||
<div className="target-detail-search">
|
||
<Search
|
||
placeholder="搜索"
|
||
enterButton="搜索"
|
||
onSearch={this.searchFunc}
|
||
style={{ width: 350 }}
|
||
/>
|
||
</div>
|
||
<DatePicker showTime onChange={onChange} onOk={onOk} />
|
||
<br />
|
||
<RangePicker
|
||
showTime={{ format: 'HH:mm' }}
|
||
format="YYYY-MM-DD HH:mm"
|
||
onChange={onChange}
|
||
onOk={onOk}
|
||
/>
|
||
{/* <p className="topWrapper_type">
|
||
<li
|
||
className={status_type === "1" ? "active" : ""}
|
||
onClick={() => this.openorder("1")}
|
||
>
|
||
{data && data.open_count}个开启中
|
||
</li>
|
||
<li
|
||
className={status_type === "2" ? "active" : ""}
|
||
onClick={() => this.openorder("2")}
|
||
>
|
||
{data && data.close_count}个已关闭
|
||
</li>
|
||
</p> */}
|
||
|
||
{/* <div className="topWrapper_select">
|
||
<div className="target-detail-search">
|
||
<Search
|
||
placeholder="搜索"
|
||
enterButton
|
||
onSearch={this.searchFunc}
|
||
style={{ width: 300 }}
|
||
/>
|
||
</div>
|
||
<a className="topWrapper_btn ml10" onClick={() => this.islogin()}>
|
||
创建任务
|
||
</a>
|
||
</div> */}
|
||
</div>
|
||
<Spin spinning={isSpin}>
|
||
<div className="f-wrap-between mb20">
|
||
<ul className="topWrapper_type">
|
||
<li
|
||
className={!author_id && !assigned_to_id ? "active" : ""}
|
||
onClick={() => this.ChangeAssign()}
|
||
>
|
||
全部
|
||
</li>
|
||
<li
|
||
style={{
|
||
display:
|
||
current_user && current_user.login === "" ? "none" : "flex",
|
||
}}
|
||
className={assigned_to_id ? "active" : ""}
|
||
onClick={() => this.ChangeAssign(1)}
|
||
>
|
||
指派给我
|
||
</li>
|
||
<li
|
||
style={{
|
||
display:
|
||
current_user && current_user.login === "" ? "none" : "flex",
|
||
}}
|
||
className={author_id ? "active" : ""}
|
||
onClick={() => this.ChangeAssign(2)}
|
||
>
|
||
由我创建
|
||
</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.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 _html="暂时还没有相关数据哦!" />
|
||
) : (
|
||
<OrderItem
|
||
issues={issues}
|
||
search_count={search_count}
|
||
page={select_params.page}
|
||
limit={select_params.limit}
|
||
{...this.props}
|
||
{...this.state}
|
||
deletedetail={this.deletedetail}
|
||
></OrderItem>
|
||
)}
|
||
{Paginations}
|
||
</Spin>
|
||
</div>
|
||
);
|
||
}
|
||
}
|
||
export default order;
|