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

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>
        <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 = {
      search: undefined,
      page: 1,
      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);
      }
    })
    .catch((error) => {
      console.log(error);
    });
  };

  islogin=()=>{
    this.props.showLoginDialog();
  }
  renderNew =()=>{
    const { projectsId , owner } = this.props.match.params;
    if (this.props.checkIfLogin()) {
      return(
        <Link className="topWrapper_btn ml10" target="_blank" to={`/projects/${owner}/${projectsId}/issues/new`}>
          +&nbsp;创建易修
        </Link>
      )
    }else{
      return(
        <a className="topWrapper_btn ml10" onClick={this.islogin}>+&nbsp;创建易修</a>
      )
    }
  }

  // 修改开始时间
  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) {
        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) {
            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 ?
                  <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 ? <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}
                      ></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;