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

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Dropdown, Icon, Menu, Pagination, Typography, Popconfirm, Spin } from 'antd';
import NoneData from '../Nodata';
import axios from 'axios';
import './order.css';
import CheckProfile from '../Component/ProfileModal/Profile';

const { Text } = Typography;

class Milepost extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: undefined,
      limit: 15,
      page: 1,
      order_type: undefined,
      //新建标签区域是否显示 none 隐藏 block 显示
      display: 'none',
      status: 'open',
      openselect: 1,
      closeselect: undefined,
      order_name: undefined,

      spinings: true
    }
  }

  componentDidMount = () => {
    this.getList(1, this.state.status, 'desc');
  }

  getList = (page, status, order_type, order_name) => {
    const { projectsId ,owner } = this.props.match.params;
    const { limit } = this.state;
    const url = `/${owner}/${projectsId}/milestones.json`;
    axios.get(url, {
      params: {
        projectsId, page, limit, status, order_type, order_name
      }
    }).then((result) => {
      if (result) {
        this.setState({
          data: result.data,
          spinings: false
        })
      }
    }).catch((error) => {
      console.log(error);
    })
  }

  opneMilelist = (type) => {
    const { order_name } = this.state;
    if (type) {
      const { current_user } = this.props;
      if (type === 1) {
        this.setState({
          status: 'open',
          openselect: current_user.user_id,
          closeselect: undefined,

        })
        this.getList(1, 'open', 'desc', order_name);
      } else {
        this.setState({
          status: 'closed',
          openselect: undefined,
          closeselect: current_user.user_id
        })
        this.getList(1, 'closed', 'desc', order_name);
      }
    }

  }

  updatestatusemile = (status, arr) => {
    const { projectsId , owner } = this.props.match.params;
    const url = `/${owner}/${projectsId}/milestones/${arr.id}/update_status.json`;
    const { current_user } = this.props;
    axios.post(url, {
      project_id: projectsId,
      id: arr.id,
      status: status
    }).then(result => {
      if (result) {
        this.setState({
          status: status,
          closeselect: status === "closed" ? current_user.user_id : undefined,
          openselect: status === "closed" ? undefined : current_user.user_id
        })
        this.getList(1, status, 'desc');
        const { getDetail } = this.props;
        getDetail && getDetail();
      }
    }).catch(error => {
      console.log(error);
    })
  }

  closemile = (arr) => {
    const { projectsId , owner } = this.props.match.params;
    const url = `/${owner}/${projectsId}/milestones/${arr.id}.json`;
    axios.delete(url, {
      data: {
        project_id: projectsId,
        id: arr.id
      }
    }).then((result) => {
      if (result) {
        this.getList(1, this.state.status, 'desc');
        const { getDetail } = this.props;
        getDetail && getDetail();
      }
    }).catch((error) => {
      console.log(error);
    })
  }

  ChangePage = (page) => {
    this.setState({
      page
    })

    this.getList(page);
  }

  // 排序
  arrayList = (e) => {
    this.setState({
      order_name: e.key,
      order_type: e.item.props.value
    })
    this.getList(1, this.state.status, e.item.props.value, e.key);
  }


  //控制新建标签页是否显示
  newshow = () => {
    this.setState({
      display: 'block'
    });

  };
  newclose = () => {
    this.setState({
      display: 'none'
    });
  };


  render() {
    const { data, limit, page, openselect, closeselect, spinings } = this.state;
    const { projectsId , owner } = this.props.match.params;
    const menu = (
      <Menu className="orderCondition" onClick={this.arrayList}>
        <Menu.Item key={'effective_date'} value="desc">到期日从后到先</Menu.Item>
        <Menu.Item key={'effective_date'} value="asc">到期日从先到后</Menu.Item>
        <Menu.Item key={'percent'} value="asc">完成度从低到高</Menu.Item>
        <Menu.Item key={'percent'} value="desc">完成度从高到低</Menu.Item>
        <Menu.Item key={'issues_count'} value="desc">任务从多到少</Menu.Item>
        <Menu.Item key={'issues_count'} value="asc">任务从少到多</Menu.Item>
      </Menu>
    )


    return (
      <Spin spinning={spinings}>
        <div className="main" style={{minHeight:"400px"}}>
          <div style={{ display: this.state.display }}>
            <div className="tagdiv" >
              <span>里程碑{data && data.issue_tags_count}已创建</span>
            </div>
          </div>
          <div className="topWrapper" style={{borderBottom:"1px solid #eee"}}>
            <div className="topWrapper_type_infos">
              <li className={openselect ? "active" : ""} onClick={() => this.opneMilelist(1)}>{data && data.open_count}个开启中</li>
              <li className={closeselect ? "active" : ""} onClick={() => this.opneMilelist(2)}>{data && data.closed_count}个已关闭</li>
            </div>
            <div className="topWrapper_select">
              <ul className="topWrapper_select mb-0">
                <li>
                  <Dropdown className="topWrapperSelect" overlay={menu} trigger={['click']} placement="bottomCenter">
                    <span>排序<Icon type="caret-down" className="ml5" /></span>
                  </Dropdown>
                </li>
              </ul>
              {
                data && data.user_admin_or_member ?
                  <CheckProfile {...this.props} className="topWrapper_btn" sureFunc={() => {this.props.history.push(`/${owner}/${projectsId}/milestones/new`)}}>新的里程碑</CheckProfile>
                  : ''
              }
            </div>
          </div>
          {
            data && data.versions && data.versions.length > 0
              &&
              <div className="tagList">
                {
                  data.versions.map((item, key) => {
                    return (
                      <div style={{ display: 'block' }} key={key}>
                        <div className="milepostdiv">
                          <div className="milepostwidth">
                            <div className="grid-item width100">
                              <i className="iconfont icon-lubiaosignpost3 font-12 mr3"></i>
                              <Link to={`/${owner}/${projectsId}/milestones/${item.id}`} className="font-16">{item.name}</Link>
                            </div>
                          </div>
                        </div>
                        <div className="milepostdiv" style={{ marginTop: 5 }}>
                          <div className="milepostrighe">
                            <div className="grid-item mr10">
                              <i className="iconfont icon-rili font-14 mr5"></i>
                              <span className={item.effective_date ? "color-red" : "color-grey-c"}>{item.effective_date || "暂无截止时间"}</span>
                            </div>
                            <div className="grid-item mr10 color-grey-9">
                              <i className="iconfont icon-issue font-14 mr5"></i>
                              <span>{item.open_issues_count}个开启</span>
                            </div>
                            <div className="grid-item mr10 color-grey-9">
                              <i className="iconfont icon-shanchudiao font-14 mr5"></i>
                              <span>{item.close_issues_count}个关闭</span>
                            </div>
                          </div>
                          {
                            data && data.user_admin_or_member ?
                            <div className="milepostleft">
                              <div className="grid-item ml15 color-grey-9">
                                <i className="iconfont icon-bianji3 font-14 mr5"></i>
                                <Link to={`/${owner}/${projectsId}/milestones/${item.id}/edit`} className="color-grey-9">编辑</Link>
                              </div>
                              <div className="grid-item ml15 color-grey-9">
                                <i className={item.status === "closed" ? "iconfont icon-gouxuan font-14 mr5":"iconfont icon-yiguanbi1 font-14 mr5"}></i>
                                <a onClick={() => this.updatestatusemile(item.status === "closed" ? "open" : "closed", item)} className="color-grey-9">{this.state.status === "closed" ? "开启" : "关闭"}</a>
                              </div>
                              <div className="grid-item ml15 color-grey-9">
                                <i className="iconfont icon-lajitong font-14 mr5" ></i>
                                <Popconfirm placement="bottom" title={'是否删除里程碑？'} okText="是" cancelText="否" onConfirm={() => this.closemile(item)}>
                                  <a className="color-grey-9">删除</a>
                                </Popconfirm>
                              </div>
                            </div>
                            : ''
                          }
                        </div>
                        <div className="milepostdiv" style={{ marginTop: 5 }}>
                          <div className="textwidth">
                            <Text type="secondary" ellipsis={{ rows: 30, expandable: false, onExpand: Function }} >{item.description}</Text>
                          </div>
                        </div>
                      </div>
                    )
                  })
                }
              </div>
          }
          { data && data.versions &&  data.versions.length === 0 && <NoneData _html="暂无里程碑"></NoneData> }
          {
            data && data.versions_count > limit ?
              <div className="mt30 mb50 edu-txt-center">
                <Pagination simple defaultCurrent={page} total={data && data.versions_count} pageSize={limit} onChange={this.ChangePage}></Pagination>
              </div> : ""
          }
        </div>
      </Spin>
    )
  }
}
export default Milepost;