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

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Popconfirm } from 'antd'



class OrderItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      //显示 隐藏
      isdisplay: false,
      orderid: '',
    }
  }
  set_issue_tags = (issue_tags) => {
    if (issue_tags && issue_tags.length > 0) {
      return (
        issue_tags.map((item, key) => {
          return (
            <span className="issue-tag-show" style={{ background: item.color }}>{item.name}</span>
          )
        })
      )
    } else {
      return ("--")
    }
  }

  deletedetail = (id) => {
    this.props.deletedetail(id);
  }

  onMouseMove = (type) => {
    this.setState({
      isdisplay: true,
      orderid: type
    })
  }

  onMouseOut = () => {
    this.setState({
      isdisplay: false
    })
  }

  render() {
    const { issues, search_count, page, limit } = this.props;
    const { projectsId } = this.props.match.params;
    const { current_user } = this.props

    const renderList = () => {
      if (issues && issues.length > 0) {
        return (
          issues.map((item, key) => {
            return (
              <div className="issueItem" key={key}>
                <div className="flex-1">
                  <p className="mb15 df">
                    <span className={item.issue_status === "关闭" ? "issueNo" : "issueNo issueOpen"}># {search_count - (key + (page - 1) * limit)}</span>
                    <Link to={`/projects/${projectsId}/orders/${item.id}/detail`} className="flex-1 hide-1 font-16 color-grey-3 lineh-30">{item.name}</Link>
                  </p>
                  <p className="color-grey-6 font-12">
                    <span>{item.format_time}</span><span className="ml5">发布</span>
                    {
                      item.updated_at === item.format_time ?
                        ""
                        :
                        <span className="ml20"><span>{item.updated_at}</span><span className="ml5">更新</span></span>
                    }
                  </p>
                </div>
                <ul className="topWrapper_select no-cursor" onMouseMove={() => this.onMouseMove(item.id)} onMouseOut={() => this.onMouseOut()} >
                  <li>{this.set_issue_tags(item.issue_tags)}</li>
                  <li>{item.tracker || "--"}</li>
                  <li>
                    {
                      item.author_name ?
                        <Link to={`/users/${item.author_login}/projects`} className="show-user-link">
                          {item.author_name}
                        </Link>
                        : "--"
                    }
                  </li>
                  <li>
                    {
                      item.assign_user_name ?
                        <Link to={`/users/${item.assign_user_login}/projects`} className="show-user-link">
                          {item.assign_user_name}
                        </Link>
                        : "--"
                    }
                  </li>
                  <li><p style={{ width: 60, height: 25, margin: 'auto', paddingTop: 2, background: item.priority === '高' ? '#e67e22' : item.priority === '正常' ? '#28be6c' : item.priority === '低' ? '#1abc9c' : '#e74c3c', color: '#ffffff', borderRadius: 4 }}>{item.priority || "--"}</p></li>
                  <li>{item.done_ratio || "--"}</li>
                  <li>
                    <div className="flex-1">
                      <p>
                        {item.journals_count ? <Link to={`/projects/${projectsId}/orders/${item.id}/detail`}><i className="iconfont icon-pinglun1 mr3 font-16"></i>{item.journals_count}</Link> : ""}
                      </p>
                      {
                        current_user && current_user.login ?
                          <div className="milepostleft" style={{ display: this.state.orderid === item.id && this.state.isdisplay ? 'flex' : 'none' }}>
                            <div className="grid-item mr15 color-grey-9">
                              <Link to={`/projects/${projectsId}/orders/${item.id}/updatedetail`} className="color-grey-9"><i className="iconfont icon-bianji3 font-14 mr5"></i></Link>
                            </div>
                            <div className="grid-item color-grey-9">
                              <Popconfirm placement="bottom" title={'您确定要删除吗'} okText="是" cancelText="否" onConfirm={() => this.deletedetail(item.id)}>
                                <i className="iconfont icon-yiguanbi1 font-14"></i>
                              </Popconfirm>
                            </div>
                          </div>
                          : ""
                      }
                    </div>
                  </li>
                </ul>
              </div>
            )
          })
        )
      }
    }
    return (
      <div>
        {renderList()}
      </div>
    )
  }
}

export default OrderItem;