forgeplus-react/src/forge/Merge/MergeDetail.js

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

import axios from 'axios';
import UploadComponent from '../Upload/Index';
import { Modal , Form, Input, Tooltip, Popconfirm } from 'antd'
import NoneData from '../Nodata';

const TextArea = Input.TextArea;


class MergeDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: undefined,
      isShow: false,
      imgsrc: '',
      journalsdata: undefined,
      //图片区域是否显示 none 隐藏 block 显示
      display: 'none',
      titledisplay: 'none',
      countvalue: '',
      //是否需要编辑
      isedit: 'block',
      showFiles: true
    }
  }

  componentDidMount = () => {
    this.getDetail();
  }

  getDetail = () => {
    const { projectsId, mergeid ,owner } = this.props.match.params;
    const url = `/projects/${owner}/${projectsId}/pulls/${mergeid}.json`;
    axios.get(url).then((result) => {
      if (result) {
        this.setState({
          data: result.data,
        })
        this.getjournalslist();
      }
    }).catch((error) => {
      console.log(error);
    })
  }

  handleok = () => {
    this.setState({
      isShow: false
    });
  };
  handleCancel = () => {
    this.setState({
      isShow: false
    });
  }

  imgshow = () => {
    this.setState({
      isShow: true
    });
  };

  //添加评论 
  addjournals = () => {
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        const { data } = this.state;
        const url = `/issues/${data.pull_request.id}/journals.json`;
        axios.post(url, {
          ...values,
          issue_id: data.id,
        }).then(result => {
          if (result) {
            this.setState({
              showFiles: false
            })
            this.getjournalslist();
          }
        }).catch(error => {
          console.log(error);
        })
      }
    })
  }
  //获取评论信息
  getjournalslist = () => {
    const { data } = this.state;
    const url = `/issues/${data.pull_request.id}/journals.json`;
    let id = data.id;
    axios.get(url, {
      params: {
        id
      }
    }).then(result => {
      if (result) {
        this.setState({
          journalsdata: result.data
        })
      }
    }).catch(error => {
      console.log(error);
    })
  }

  //关闭任务
  closedetail = (id) => {
    const { projectsId, orderId , owner } = this.props.match.params;
    const url = `/${owner}/${projectsId}/issues/${orderId}/close_issue.json`;
    axios.post(url, {
      project_id: projectsId,
      id: orderId,
      status_id: id,
    }).then(result => {
      if (result) {
        this.getDetail();
      }
    }).catch(error => {
      console.log(error);
    })
  }

  //修改评论
  updatedetail = (id) => {
    const { mergeid } = this.props.match.params;
    const url = `/issues/${mergeid}/journals/${id}.json`;
    axios.put(url, {
      issue_id: mergeid,
      id: id,
      content: this.state.countvalue
    }).then(result => {
      if (result) {
        this.setState({
          isedit: 'block'
        })
        this.getjournalslist();
      }
    }).catch(error => {
      console.log(error);
    })
  }

  changmodelname = (e) => {
    this.setState({
      countvalue: e.target.value
    })
  }
  editdetail = (count, status) => {
    this.setState({
      countvalue: count,
      isedit: status
    })
  }

  // 判断是否重新上传文件
  changeIsComplete = (flag) => {
    this.setState({
      showFiles: flag
    })
  }
  render() {
    const { projectsId, mergeid , owner } = this.props.match.params;
    const { data, journalsdata, showFiles } = this.state;
    const { getFieldDecorator } = this.props.form;
    const url = this.props.history.location.pathname;
    const renderList = () => {
      if (journalsdata && journalsdata.issue_journals && journalsdata.issue_journals.length > 0) {
        return (
          <div className="tagList">{
            journalsdata.issue_journals.map((item, key) => {
              return (
                <li>
                  <div className="df">
                    <Link to={``}><img class="user_img" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1608431072,669449145&fm=27&gp=0.jpg" alt="" /></Link>
                    <div className="detail_context" >
                      <div className="topWrapper_detali">
                        <p className="detail_p">{item.user_name}
                          <Tooltip title={item.format_time} placement="bottom">
                            <span className="commenttitle">于{item.created_at}</span>
                          </Tooltip>
                          评论</p>
                        <div className="detail_right">
                          <i className="iconfont icon-weibiaoti1 font-18 mr3" onClick={() => this.editdetail(item.content, 'none')}></i>
                          <div style={{ width: 20 }}></div>
                          <Popconfirm placement="bottom" title={'确定要删除当前评论吗'} okText="是" cancelText="否" onConfirm={() => this.deletedetail(item.id)}>
                            <i className="iconfont icon-yiguanbi1 font-18 mr3"></i>
                          </Popconfirm>
                        </div>

                      </div>
                      <div className="detail_ptitlecount">
                        <p style={{ display: this.state.isedit }} >{item.content}</p>
                        <div style={{ display: this.state.isedit === 'none' ? 'block' : 'none' }}>
                          <TextArea style={{ height: "200px" }} value={this.state.countvalue} onChange={this.changmodelname} />
                          <p className="clearfix mt15">
                            <a className="topWrapper_btn fr" type="submit" onClick={() => this.updatedetail(item.id)}>保存</a>
                            <a className="Closeor_btn fr" type="submit" onClick={() => this.editdetail(item.content, 'block')}>取消</a>
                          </p>
                        </div>
                      </div>
                      <div style={{ display: this.state.display }}>
                        <div className="div_line" ></div>
                      </div>
                    </div>
                  </div>
                  <div className="order_line" style={{ marginLeft: 80 }}></div>
                </li>
              )
            })
          }
          </div>
        )
      } else {
        return (
          <NoneData _html="暂时还没有相关数据!" />
        )
      }
    }

    return (
      <div className="main">
        <div>
          <div className="detailContent">
            <p>
              <span className="font-16" > {data && data.issue.subject}</span>
              <div>
                {
                  data && data.issue.user_permission ?
                    <Link to={`/${owner}/${projectsId}/pulls/${mergeid}/updatemerge`} className="color-blue fr">编辑</Link>
                    : ''
                }
              </div>
            </p>
            <p className="mt15">{data && data.issue.description}</p>
            <p className="mt10">
              <div className={data && data.issue_status === "关闭" ? "closedetail" : "opendetail"}>{data && data.issue_status === "关闭" ? "关闭中!" : "开启中!"} </div>
              <span className="color-grey-c">
                由 {data && data.issue.author_name} 于 {data && data.issue.created_at}创建{data && data.issue.journals_count && data.issue.journals_count > 0 ? ` · ${data.issue.journals_count} 条评论` : ""}
              </span>

              <span className="span_title ml10">
                请求从<strong> {data && data.pull_request.head} </strong>分支合并到<strong> {data && data.pull_request.base} </strong>分支
             </span>
            </p>
          </div>
          <div className="detailHeader-wrapper">
            <div className="normal f-wrap-between">
              <ul className="headerMenu-wrapper">
                <li className={url.indexOf("Messagecount") > 0 ? "active" : ""}><Link to={`/${owner}/${projectsId}/pulls/${mergeid}/Messagecount`}>对话内容</Link></li>
                <li className={url.indexOf("MergeSubmit") > 0 ? "active" : ""}><Link to={`/${owner}/${projectsId}/pulls/${mergeid}/MergeSubmit`}>代码提交</Link></li>
              </ul>
            </div>
          </div>
          <div className="f-wrap-between mt20" style={{ alignItems: "flex-start" }}>
            <div className="list-right df divwidth" >
              <ul className="ul_width">
                {renderList()}
                <li>
                  <div className="df">
                    <Link to={``}><img class="user_img" onClick={this.imgshow} src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1608431072,669449145&fm=27&gp=0.jpg" alt="" />      </Link>
                    <div className="new_context">
                      <Form.Item>
                        {getFieldDecorator('content', {
                          rules: [{
                            required: true, message: '请输入内容'
                          }],
                        })(
                          <TextArea placeholder="请输入描述内容..." style={{ height: "200px" }} />
                        )}
                      </Form.Item>
                      <UploadComponent load={this.UploadFunc} isComplete={showFiles} changeIsComplete={this.changeIsComplete}></UploadComponent>
                      <p className="clearfix mt15">
                        <a className="topWrapper_btn fr" type="submit" onClick={this.addjournals}>评论</a>
                        <a className="Closeor_btn fr" type="submit" onClick={() => this.closedetail(data && data.issue_status === "关闭" ? 2 : 5)}>{data && data.issue_status === "关闭" ? "开启" : "关闭"}</a>
                      </p>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div className="list-left DetailRight">
              <p>
                <span className="span_title">当前状态</span>
                <span>{data && data.issue.issue_status}</span>
              </p>
              <p>
                <span className="span_title">优先级</span>
                <span>{data && data.issue.priority}</span>
              </p>
              <p>
                <span className="span_title">指派给</span>
                <span>{data && data.issue.assign_user_name}</span>
              </p>
              <p style={{ display: "inline-block", 'white-space': "nowrap" }}>
                <span className="span_title">里程碑</span>
                <span className="title_overflow">{data && data.issue.version === null ? "未添加里程碑" : data && data.issue.version.length === 0 ? data.issue.version : '未添加里程碑'}</span>
              </p>
            </div>
          </div>
        </div>
        <Modal
          onCancel={this.handleCancel}
          visible={this.state.isShow}
          width="400px"
          footer={
            []
          }
          bodyStyle={{ textAlign: 'center' }}
        >
          <img class="list_img" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1608431072,669449145&fm=27&gp=0.jpg" alt="" />
        </Modal>
      </div>
    )
  }
}

const WrappedMergeDetailForm = Form.create({ name: 'MergeDetailOrderForm' })(MergeDetail);
export default WrappedMergeDetailForm;