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

import React, { Component } from "react";
import { Button, Form, Menu, Input, Select, Tag, Checkbox } from "antd";
import axios from "axios";

import "../Order/order.css";
import "./merge.css";
import MDEditor from "../../modules/tpm/challengesnew/tpm-md-editor";

const Option = Select.Option;

class MergeForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      desc: undefined,
      issue_tag_ids: undefined,
      fixed_version_id: undefined,
      assigned_to_id: undefined,
      titledata: undefined,
      isSpin: false,
      mergedata: undefined,
      priority_id: undefined,
      title: undefined,
    };
  }

  componentDidMount = () => {
    this.set_defatul();
  };
  set_defatul = () => {
    const { data, merge_type } = this.props;
    if (data && merge_type === "edit") {
      this.setState({
        desc: data.body,
        issue_tag_ids: data.issue_tag_ids[0],
        fixed_version_id: String(data.fixed_version_id),
        assigned_to_id: String(data.assigned_to_id),
        priority_id: String(data.priority_id),
        title: data.title,
      });
    }
    this.InitData();
  };
  InitData = () => {
    setTimeout(() => {
      this.props.form.setFieldsValue({
        ...this.state,
      });
    }, 100);
  };

  onPanelChange = (time, mode) => {
    this.setState({
      value: time,
    });
  };

  onSelect = (time) => {
    this.setState({
      value: time,
      selectedValue: time,
    });
  };

  renderMenu = (array, id) => {
    return (
      <Menu>
        {array &&
          array.length > 0 &&
          array.map((item, key) => {
            return (
              <Menu.Item key={item} onClick={() => this.getOption(item, id)}>
                {item}
              </Menu.Item>
            );
          })}
      </Menu>
    );
  };

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

  //创建合并请求

  handleSubmit = () => {
    this.setState({
      isSpin: true,
    });
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        const { projectsId, mergeId } = this.props.match.params;
        const { merge, pull, merge_type } = this.props;
        if (values.issue_tag_ids && values.issue_tag_ids.length > 0) {
          values.issue_tag_ids = [parseInt(values.issue_tag_ids)];
        } else {
          values.issue_tag_ids = [];
        }
        const { desc } = this.state;
        if (merge_type === "new") {
          let url = `/projects/${projectsId}/pull_requests.json`;
          axios
            .post(url, {
              ...values,
              body: desc,
              head: pull,
              base: merge,
            })
            .then((result) => {
              if (result) {
                this.setState({
                  isSpin: false,
                });
                this.props.history.push(`/projects/${projectsId}/merge`);
              } else {
                this.setState({
                  isSpin: false,
                });
              }
            })
            .catch((error) => {
              this.setState({
                isSpin: false,
              });
              console.log(error);
            });
        } else {
          let url = `/projects/${projectsId}/pull_requests/${mergeId}.json`;
          axios
          .put(url, {
            ...values,
            body: desc,
            head: pull,
            base: merge,
          })
          .then((result) => {
            if (result) {
              this.setState({
                isSpin: false,
              });
              this.props.history.push(`/projects/${projectsId}/merge/${mergeId}/Messagecount`);
            } else {
              this.setState({
                isSpin: false,
              });
            }
          })
          .catch((error) => {
            this.setState({
              isSpin: false,
            });
            console.log(error);
          });
        }
      } else {
        this.setState({
          isSpin: false,
        });
      }
    });
  };

  onContentChange = (value) => {
    this.setState({
      desc: value,
    });
  };

  render() {
    const { merge_type, data } = this.props;
    const { getFieldDecorator } = this.props.form;
    const { projectsId, mergeId } = this.props.match.params;
    const {
      issue_tag_ids,
      fixed_version_id,
      assigned_to_id,
      priority_id,
      desc,
      isSpin,
      title,
    } = this.state;
    return (
      <div>
        <div className="mt20 mb20">
          <span className="font-16 fwb mr10 ver-middle">
            {merge_type === "new" ? "新建" : "编辑"}合并请求:
          </span>
          <Tag color="#28BD6C" className="ver-middle">
            可合并的
          </Tag>
        </div>
        <Form>
          <div className="width100 inline-block">
            <div className="width70 pull-left">
              <Form.Item>
                {getFieldDecorator("title", {
                  rules: [
                    {
                      required: true,
                      message: "请填写请求标题",
                    },
                  ],
                  initialValue: title,
                })(<Input placeholder="标题" />)}
              </Form.Item>
              <MDEditor
                placeholder={"请输入合并请求的描述..."}
                height={350}
                mdID={"merge-new-description"}
                initValue={desc}
                onChange={this.onContentChange}
              ></MDEditor>
              <p className="clearfix mt20">
                <Button
                  type="primary"
                  loading={isSpin}
                  onClick={this.handleSubmit}
                >
                  <span className="plr10">
                    {merge_type === "new" ? "创建" : "提交"}
                  </span>
                </Button>
                <Button
                  type="default"
                  className="ml30"
                  href={
                    merge_type === "new"
                      ? `/projects/${projectsId}/merge`
                      : `/projects/${projectsId}/merge/${mergeId}/detail`
                  }
                >
                  <span className="plr10">取消</span>
                </Button>
              </p>
            </div>
            <div className="width30 pull-left">
              <div className="pl30">
                <Form.Item>
                  {getFieldDecorator("assigned_to_id", {
                    initialValue: assigned_to_id,
                  })(
                    <Select placeholder="审查人员" showSearch>
                      {this.renderSelect(data && data.members)}
                    </Select>
                  )}
                </Form.Item>
                <Form.Item>
                  {getFieldDecorator("fixed_version_id", {
                    initialValue: fixed_version_id,
                  })(
                    <Select
                      placeholder={
                        data && data.issue_versions.length > 0
                          ? "未选择里程碑"
                          : "请添加里程碑"
                      }
                      showSearch
                    >
                      {this.renderSelect(data && data.issue_versions)}
                    </Select>
                  )}
                </Form.Item>
                <Form.Item>
                  {getFieldDecorator("issue_tag_ids", {
                    initialValue: issue_tag_ids,
                  })(
                    <Select
                      placeholder={
                        data && data.issue_tags.length > 0
                          ? "未选择标签"
                          : "请在仓库设置里添加标签"
                      }
                      showSearch
                    >
                      {this.renderSelect(data && data.issue_tags)}
                    </Select>
                  )}
                </Form.Item>
                <Form.Item>
                  {getFieldDecorator("priority_id", {
                    initialValue: priority_id,
                  })(
                    <Select placeholder="优先级" showSearch>
                      {this.renderSelect(data && data.issue_priories)}
                    </Select>
                  )}
                </Form.Item>
                <Form.Item name="checkbox-group" label="其他">
                  <Checkbox.Group>
                    <div>
                      <Checkbox value="A">必须审查代码</Checkbox>
                    </div>
                    <div>
                      <Checkbox value="B">合并后删除提交分支</Checkbox>
                    </div>
                    <div>
                      <Checkbox value="C">合并后关闭提到的任务</Checkbox>
                    </div>
                  </Checkbox.Group>
                </Form.Item>
              </div>
            </div>
          </div>
        </Form>
      </div>
    );
  }
}
const WrappedNewMerge = Form.create({ name: "NewMergeForm" })(MergeForm);
export default WrappedNewMerge;