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

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Popconfirm } from 'antd'
import { TagInfo } from '../Utils/TagColor';
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="mr10" key={key}>{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 { item , checkbox , mile , user_admin_or_member } = this.props;
    const { projectsId , owner } = this.props.match.params;
    const { orderid , isdisplay } = this.state;
    const { current_user } = this.props;
    return (
      item &&
      <div className="issueItem">
        {current_user && current_user.login && checkbox}
        <div className="flex-1">
          <p className="mb10 df" style={{alignItems:"center"}}>
            <Link to={`/${owner}/${projectsId}/issues/${item.id}/detail`} target="_blank" title={item.name} className="hide-1 font-16 color-grey-3 lineh-30 mr10" style={{maxWidth:"370px"}}>{item.name}</Link>
            {TagInfo(item.priority,"mr10")}
          </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.author_name ?
                <Link to={`/${item.author_login}`} className="show-user-link">
                  {item.author_name}
                </Link>
                : "--"
            }
          </li>
          <li>
            {
              item.assign_user_name ?
                <Link to={`/${item.assign_user_login}`} className="show-user-link">
                  {item.assign_user_name}
                </Link>
                : "--"
            }
          </li>
          <li>{item.tracker || "--"}</li>
          { !mile ?<li>{item.version || "--"}</li>:""}
          <li>{item.issue_status || "--"}</li>
          <li style={{color:`${item.done_ratio === "100%"?"#28BD6C":"#F73030"}`}}>{item.done_ratio || "--"}</li>
          <li>
            <div className="milepostleft">
              <Link to={`/${owner}/${projectsId}/issues/${item.id}/detail`}><i className="iconfont icon-pinglun1 mr3 font-16"></i>{item.journals_count}</Link>
              {
                user_admin_or_member ?
                <div style={{ display: orderid === item.id && isdisplay ? 'flex' : 'none' }}>
                  <div className="mr8 ml8 color-grey-9">
                    <Link to={`/${owner}/${projectsId}/issues/${item.id}/updatedetail`} className="color-grey-9">
                      <i className="iconfont icon-bianji3 font-14 mr5"></i>
                    </Link>
                  </div>
                  <div className="color-grey-9">
                    <Popconfirm 
                      placement="bottom" 
                      overlayClassName={orderid === item.id && isdisplay ? "overlayBox" : "overlayBox hideOverlay" }
                      title={'您确定要删除当前易修吗？'} 
                      okText="是" 
                      cancelText="否" 
                      onConfirm={() => this.deletedetail(item.id)}
                    >
                      <i className="iconfont icon-yiguanbi1 font-14"></i>
                    </Popconfirm>
                  </div>
                </div>
                : ""
              }
            </div>
          </li>
        </ul>
      </div>
    )
  }
}

export default OrderItem;