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

import React, { Component } from "react";
import { Input, Select, Button, Spin, Alert } from "antd";
import axios from "axios";
import "../Order/order.css";
import "./merge.css";
import MergeForm from "./merge_form"
import MergeFooter from "./merge_footer"
const Option = Select.Option;
class NewMerge extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: undefined,
      branches: undefined,
      origin_branches: undefined,
      merge: undefined,
      pull: undefined,
      isSpin: false,
      show_message: true,
      default_message: "必须选择不同的分支",
    };
  }

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

  //获取新建分枝数据
  getmergelist = () => {
    const { projectsId } = this.props.match.params;
    const url = `/projects/${projectsId}/pull_requests/new.json`;
    axios
      .get(url)
      .then((result) => {
        if (result) {
          this.setState({
            data: result.data,
            branches: result.data.branches,
            origin_branches: result.data.branches,
          });
        }
      })
      .catch((error) => {
        console.log(error);
      });
  };

  selectBrach = (type, value) => {
    this.state[type] = value;
    this.ischeckmerge();
  };

  //判断2分支是否可以合并

  ischeckmerge = () => {
    this.setState({ isSpin: true });
    const { projectsId } = this.props.match.params;
    const { pull, merge } = this.state;
    const url = `/projects/${projectsId}/pull_requests/check_can_merge.json`;
    axios
      .post(url, {
        project_id: projectsId,
        head: merge ? merge : "master",
        base: pull ? pull : "master",
      })
      .then((result) => {
        if (result) {
          if (result.data.status === 0) {
            this.setState({
              isSpin: false,
              show_message: false,
            });
          } else {
            this.setState({
              isSpin: false,
              show_message: true,
              default_message: result.data.message,
            });
          }
        } else {
          this.setState({
            isSpin: false,
            show_message: true,
            default_message: "出现错误了",
          });
        }
      })
      .catch((error) => {
        this.setState({ isSpin: false, show_message: true });
        console.log(error);
      });
  };

  render() {
    const {
      data,
      branches,
      origin_branches,
      pull,
      merge,
      isSpin,
      show_message,
      default_message,
    } = this.state;

    const renderBrances = (list) => {
      if (list && list.length > 0) {
        return list.map((item, key) => {
          return (
            <Option key={key + 1} value={item}>
              {item}
            </Option>
          );
        });
      }
    };

    const withHtml = (html) => {
      return <div dangerouslySetInnerHTML={{ __html: html }}></div>;
    };

    return (
      <div >
        <div className="main">
        <Spin spinning={isSpin}>
          <div className="merge-header width100 inline-block">
            <div className="width45 pull-left">
              <div className="color-grey-3 mb10 fwb">源分支:</div>
              <Input.Group compact>
                <Button className="merge-header-button maxW50 hide-1 task-hide">
                  {data && data.project_author} / {data && data.project_name}
                </Button>
                <Select
                  defaultValue={pull ? pull : "master"}
                  onSelect={(e) => this.selectBrach("pull", e)}
                  showSearch
                  className="minW50"
                >
                  {renderBrances(branches)}
                </Select>
              </Input.Group>
            </div>
            <div className="width10 pull-left text-center mt25">
              <i className={"iconfont icon-youjiang color-grey-c font-32"}></i>
            </div>
            <div className="width45 pull-left">
              <div>
                <div className="color-grey-3 mb10 fwb">目标分支:</div>
                <Input.Group compact>
                  <Button className="merge-header-button  maxW50 hide-1 task-hide">
                    {data && data.project_author} / {data && data.project_name}
                  </Button>
                  <Select
                    defaultValue={merge ? merge : "master"}
                    onSelect={(e) => this.selectBrach("merge", e)}
                    showSearch
                    className="minW50"
                  >
                    {renderBrances(branches)}
                  </Select>
                </Input.Group>
              </div>
            </div>
          </div>
          {show_message ? (
            <div className="mb50 mt50">
              <Alert
                description={withHtml(default_message)}
                type="error"
              />
            </div>
          )
          :
          <MergeForm {...this.props} merge_type="new" data={data} merge={merge?merge:"master"} pull={pull?pull:"master"}></MergeForm>
        }
        </Spin>
        </div>
       <div className=" main">
       <MergeFooter footer_type="new" {...this.props}></MergeFooter>
       </div>
        
      </div>
    );
  }
}

export default NewMerge;