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

import React, { Component } from "react";
import { Tabs } from 'antd';
import { Link } from "react-router-dom";
import { AlignCenter } from '../Component/layout';
import axios from "axios";
import { getImageUrl } from "educoder";
import {
  Form,
  Input,
  Spin,
  Dropdown,
  Icon,
  Menu,
  Select,
  Tag,
  Button,
  Alert,
} from "antd";
import "./merge.css";
import RenderHtml from "../../components/render-html";
import "../Order/order.css";
import MergeFooter from "./merge_footer";

const Option = Select.Option;
const TextArea = Input.TextArea;

function turnbar(str){
  if(str && str.length>0 && str.indexOf("/")>-1){
    return str.replaceAll('/','%2F');
  }
  return str;
}
class MessageCount extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: undefined,
      isSpin: false,
      ismesrge: false,
      buttonshow: "none",
      mergename: "合并请求",
      mergekey: "merge",
      title: "",
      body: "",
      SpinFlag: true,
      SpinMerge: false,
      edit_spin: false,
      pr_status: undefined,
      pull_request:undefined,
      conflict_files:[],

      copyVisible:false,
    };
  }

  componentDidMount = () => {
    this.setState({
      SpinFlag: true,
    });
    this.getDetail();

    // this.clickBody();
  };
  clickBody=()=>{
    document.body.addEventListener('click', e => {
      let name = e.target.className;
      if(name.indexOf("notHide")>-1 || name.indexOf("ant-tabs-tab")>-1 || name==="ant-tabs-nav-scroll"){return;}
      this.setState({
        copyVisible:false
      })
    })
  }

  getDetail = () => {
    const { projectsId, mergeId, owner } = this.props.match.params;
    const url = `/${owner}/${projectsId}/pulls/${mergeId}.json`;
    axios
      .get(url)
      .then((result) => {
        if (result && result.data) {
          this.setState({
            data: result.data,
            SpinFlag: false,
            pr_status: result.data.pull_request && result.data.pull_request.status,
            pull_request:result.data.pull_request,
            conflict_files:result.data.conflict_files
          });
        } else {
          this.setState({ SpinFlag: false });
        }
      })
      .catch((error) => {
        this.setState({
          SpinFlag: false,
        });
        console.log(error);
      });
  };

  //关闭任务
  closedetail = () => {
    this.setState({ isSpin: true });
    const { projectsId, mergeId , owner } = this.props.match.params;
    const url = `/${owner}/${projectsId}/pulls/${mergeId}/refuse_merge.json`;
    axios
      .post(url)
      .then((result) => {
        if (result) {
          this.setState({
            isSpin: false,
            pr_status: 2,
          });
          const { getDetail } = this.props;
          getDetail && getDetail();
        } else {
          this.setState({
            isSpin: false,
          });
        }
      })
      .catch((error) => {
        this.setState({
          isSpin: false,
        });
        console.log(error);
      });
  };

  //合并请求
  prmerge = () => {
    this.setState({
      SpinMerge: true,
    });
    const { projectsId , owner } = this.props.match.params;
    const { data, title, body, mergekey, pr_status } = this.state;
    const url = `/${owner}/${projectsId}/pulls/${data.pull_request.id}/pr_merge.json`;
    axios
      .post(url, {
        project_id: projectsId,
        id: data.pull_request.id,
        do: mergekey,
        body: body,
        title: title,
      })
      .then((result) => {
        if (result) {
          this.setState({
            SpinMerge: false,
            pr_status: 1,
          });
          const { getDetail } = this.props;
          getDetail && getDetail();
        } else {
          this.setState({ SpinMerge: false });
        }
      })
      .catch((error) => {
        this.setState({
          SpinMerge: false,
        });
        console.log(error);
      });
  };

  changtitlepr = (e) => {
    this.setState({
      title: e.target.value,
    });
  };

  changbodypr = (e) => {
    this.setState({
      body: e.target.value,
    });
  };

  submitmerge = () => {
    if (this.state.mergekey === "rebase") {
      this.setState({
        buttonshow: "block",
        ismesrge: true,
      });
    } else {
      this.setState({
        ismesrge: "block",
        buttonshow: false,
      });
    }
  };

  nonemerge = () => {
    this.setState({
      ismesrge: false,
      buttonshow: "none",
    });
  };

  getOption = (e) => {
    if (e.key === "rebase") {
      this.setState({
        mergename: e.item.props.value,
        mergekey: e.key,
        title: "",
        body: "",
        buttonshow: "block",
      });
    } else {
      this.setState({
        mergename: e.item.props.value,
        mergekey: e.key,
        title: "",
        body: "",
        ismesrge: true,
        buttonshow: "block",
      });
    }
  };

  cancelSubmit = () => {
    this.setState({
      editMerge: false,
    });
  };

  commentCtx = (v) => {
    return <RenderHtml className="break_word_comments imageLayerParent" value={v}  url={this.props.history.location}/>;
  };

  setCopyVisible=(e)=>{
    e.stopPropagation();
    this.setState({
      copyVisible:true
    })
  }

  copyItem =()=>{
    return(
      <div className="copyTab notHide">
        <Tabs defaultActiveKey="1" className="notHide" animated={false} size={"small"}>
          <Tabs.TabPane key="1" tab={<span className="notHide">HTTPS</span>}>{this.returnCopyUrl("https://gitee.com/44886/polhttp.git")}</Tabs.TabPane>
          <Tabs.TabPane key="2" tab={<span className="notHide">SSH</span>}>{this.returnCopyUrl("https://gitee.com/44886/polssh.git")}</Tabs.TabPane>
        </Tabs>
      </div>
    )
  }

  returnCopyUrl=(url)=>{
    return(
      <div className="df notHide">
        <Input value={url} className="notHide" disabled={true}/>
        <Button type="primary" ghost className="ml15 notHide">复制</Button>
      </div>
    )
  }

  // 点击按钮复制功能
  jsCopy = () => {
    const copyEle = document.querySelector('#descContent') // 获取要复制的节点
    const range = document.createRange(); // 创造range
    window.getSelection().removeAllRanges(); //清除页面中已有的selection
    range.selectNode(copyEle); // 选中需要复制的节点
    window.getSelection().addRange(range); // 执行选中元素
    document.execCommand("Copy"); // 执行copy操作
  }

  mergeabledMes=()=>{
    return(
      <div className="clearfix">
        <p className="fl">该分支存在冲突，无法自动合并，你可以尝试通过如下命令手动合并</p>
        <i className="iconfont icon-fuzhi font-16 fr" onClick={()=>this.jsCopy()}></i>
      </div>
    )
  }
  mergeabledDesc=(base,head,conflict_files)=>{
    return(
      <div>
        <ul id="descContent">
          <li>git fetch origin</li>
          <li>git checkout -b {`${base}`} origin/{`${base}`}</li>
          <li>git merge {`${head}`}</li>
        </ul>
        {
          conflict_files && conflict_files.length>0 && 
          <div>
            <p className="mt10 font-16 pt10" style={{borderTop:"1px solid #f9d7d5"}}>如下文件有代码冲突：</p>
            <p>
              {
                conflict_files.map((i,k)=>{
                  return <p>{i}</p>
                })
              }
            </p>
          </div>
        }
      </div>
    )
  }

  render() {
    const { projectsId, mergeId , owner } = this.props.match.params;
    
    const {
      data,
      SpinMerge,
      pr_status,
      isSpin,
      ismesrge,
      SpinFlag,
      copyVisible,
      pull_request,
      conflict_files
    } = this.state;
    const { current_user, projectDetail } = this.props;
    const menu = (
      <Menu onClick={(e) => this.getOption(e)}>
        <Menu.Item key={"merge"} value="合并请求">
          合并请求
        </Menu.Item>
        <Menu.Item key={"rebase"} value="变基并合并">
          变基并合并
        </Menu.Item>
        <Menu.Item key={"rebase-merge"} value="变基合并 --no-ff">
          变基合并 --no-ff
        </Menu.Item>
        <Menu.Item key={"squash"} value="压缩提交并合并">
          压缩提交并合并
        </Menu.Item>
      </Menu>
    );
    const permission = projectDetail && (projectDetail.permission === "Admin" || projectDetail.permission === "Owner" || projectDetail.permission === "Manager");
    const userLogin = current_user && current_user.login;
    const operate = userLogin && projectDetail && pr_status === 0 && permission;
    return (
      <div>
        {data ? (
          <div>
            <div className="main">
              <div>
                <div className="grid-item-top pb20 border-1f">
                  <div>
                    <div className="ver-middle">
                      <span className="mr10 ver-middle">
                        <span className="font-18 fwb">
                          {data.issue.subject}
                        </span>
                      </span>

                      {data.pull_request && (
                        <Tag
                          className={`pr_tags_${data.pull_request.pull_request_staus}`}
                        >
                          {pr_status === 1
                            ? "已合并"
                            : pr_status === 2
                            ? "已拒绝"
                            : "开启的"}
                        </Tag>
                      )}
                    </div>
                    {
                      <div className="mt15">
                        <Tag className="pr-branch-tag">
                          <Link
                            to={`/${data.pull_request.is_original ? data.pull_request.fork_project_user : data.issue.project_author_name}/${data.pull_request.is_original?data.project_identifier:projectsId}/tree/${turnbar(data.pull_request && data.pull_request.head)}`}
                            className="ver-middle"
                          >
                            {data.pull_request.is_original ? data.pull_request.fork_project_user : data.issue.project_author_name}: {data.pull_request && data.pull_request.head}
                          </Link>
                        </Tag>
                        <span className="mr8 ver-middle">
                          <i
                            className={
                              "iconfont icon-youjiang color-grey-c font-16"
                            }
                          ></i>
                        </span>
                        <Tag className="pr-branch-tag">
                          <Link
                            to={`/${owner}/${projectsId}/tree/${data.pull_request.base}`}
                            className="ver-middle"
                          >
                            {data.issue.project_author_name}:{data.pull_request.base}
                          </Link>
                        </Tag>
                      </div>
                    }

                    <div className="mt15">
                      <Link to={`/${data.issue.author_login}`} className="show-user-link">
                        <img className="mr5" src={getImageUrl(`/${data.issue.author_picture}`)}
                          alt="" width="24" height="24" style={{borderRadius:"50%"}}
                        />
                      </Link>
                      <span className="ver-middle">
                        <span className="color-grey-8 mr5">由</span>
                        <Link to={`/${data.issue.author_login}`} className="show-user-link color-blue">
                          {data.issue.author_name}
                        </Link>
                        <span className="ml5 color-grey-8">
                          {pr_status === 0
                            ? "创建于"
                            : pr_status === 1
                            ? "合并于"
                            : "更新于"}
                        </span>
                        <span className="color-grey-8 ml5">{data.pr_time}</span>
                        <span className="ml25">
                          <span className="color-grey-8">审查人员：</span>
                          {data.issue.assign_user_name ? (
                            <Link
                              to={`/${data.issue.assign_user_login}`}
                              className="show-user-link color-blue"
                            >
                              {data.issue.assign_user_name}
                            </Link>
                          ) : (
                            "--"
                          )}
                        </span>
                        <span className="ml25">
                          <span className="color-grey-8">里程碑：</span>
                          <span className="color-grey-3">
                            {data.issue.version ? data.issue.version : "--"}
                          </span>
                        </span>
                        <span className="ml25">
                          <span className="color-grey-8">标记：</span>
                          <span className="color-grey-3">
                            {data.issue.issue_tags &&
                            data.issue.issue_tags.length > 0
                              ? data.issue.issue_tags[0].name
                              : "--"}
                          </span>
                        </span>
                        <span className="ml25">
                          <span className="color-grey-8">优先级：</span>
                          <span className="color-grey-3">
                            {data.issue.priority ? data.issue.priority : "--"}
                          </span>
                        </span>
                      </span>
                    </div>
                  </div>
                  <div className="ml10">
                    <div className="mt15 text-right" style={{display:"flex",justifyContent:"flex-end"}}>
                      {operate && (
                          <Button
                            type="green"
                            ghost
                            className="ml20"
                            onClick={()=>{this.props.history.push(`/${owner}/${projectsId}/pulls/${mergeId}/UpdateMerge`);}}
                          >
                            编辑
                          </Button>
                        )}
                      {operate && (
                        <Button
                          type="danger"
                          ghost
                          onClick={() => this.closedetail()}
                          className="ml20"
                          loading={isSpin}
                        >
                          拒绝
                        </Button>
                      )}
                    </div>
                  </div>
                </div>
                {
                data.issue.description ? 
                  <div className="mt15">{this.commentCtx(data.issue.description)}</div>
                :
                  <p className="color-grey-9 ml3 mr3 mt15">没有描述</p>
                }
              </div>
              <div className="mt15">
                {pr_status === 2 && (
                  <Alert
                    message="提示"
                    description="该合并请求已被拒绝"
                    type="error"
                  />
                )}
                {pr_status === 1 && (
                  <Alert
                    message="提示"
                    description="该合并请求已被合并"
                    type="success"
                  />
                )}
                {operate && (
                  <Spin spinning={SpinFlag}>
                    <div
                      style={{
                        display:
                          this.state.mergekey === "rebase"
                            ? this.state.buttonshow === "none" ? "block" : "none"
                            : !ismesrge ? "block" : "none",
                      }}
                    >
                      <Dropdown.Button
                        overlay={menu}
                        type="primary"
                        onClick={this.submitmerge}
                        className="mb15"
                        icon={<Icon type="caret-down" />}
                        disabled={!pull_request || (pull_request && !pull_request.mergeable) }
                      >
                        {this.state.mergename}
                      </Dropdown.Button>
                      {pull_request && pull_request.mergeable
                        ?
                        <Alert
                          message="该合并请求可以进行自动合并操作"
                          type="success"
                          showIcon
                        />:
                        <Alert
                          message={this.mergeabledMes()}
                          type="error"
                          description={this.mergeabledDesc(pull_request.base,pull_request.head,conflict_files)}
                          showIcon
                        />
                      }
                    </div>
                    <div>
                      <div
                        style={{
                          display: ismesrge ? "block" : "none",
                          marginTop: 15,
                        }}
                      >
                        <Input
                          placeholder="标题"
                          value={this.state.title}
                          onChange={this.changtitlepr}
                        />
                        <TextArea
                          placeholder="请输入合并描述..."
                          style={{ height: "170px", marginTop: 20 }}
                          value={this.state.body}
                          onChange={this.changbodypr}
                        />
                      </div>
                      <p
                        className="clearfix mt15"
                        style={{ display: this.state.buttonshow }}
                      >
                        <Spin spinning={SpinMerge}>
                          <Button type="primary" onClick={() => this.prmerge()}>
                            确认合并
                          </Button>
                          <Button
                            onClick={() => this.nonemerge()}
                            className="ml15"
                          >
                            取消
                          </Button>
                        </Spin>
                      </p>
                    </div>
                  </Spin>
                )}
              </div>
            </div>

            <MergeFooter
              footer_type={true}
              order_id={data && data.issue.id}
              {...this.props}
              {...this.state}
            ></MergeFooter>
          </div>
        ) : (
          ""
        )}
      </div>
    );
  }
}

const MessageCountForm = Form.create({ name: "MessageCountForm" })(
  MessageCount
);
export default MessageCountForm;