forgeplus-react/src/forge/Newfile/UserSubmitComponent.js

import React, { Component } from "react";
import { getImageUrl } from "educoder";
import { Form, Input, Button, Radio, Icon } from "antd";
import { Link } from "react-router-dom";
import "./index.css";

import axios from "axios";
const TextArea = Input.TextArea;
class UserSubmitComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      submitType: "0"
    };
  }

  changeSubmittype = (e) => {
    this.setState({
      submitType: e.target.value,
    });
  };

  // 提交变更
  subMitFrom = () => {
    const { filepath, content } = this.props;
    const { branch, projectsId } = this.props.match.params;
    const { submitType } = this.state;
    let path = filepath.substr(1);
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        const url = `/repositories/${projectsId}/create_file.json`;
        axios
          .post(url, {
            filepath: path,
            branch: branch,
            new_branch: submitType === "1" ? values.branchname : undefined,
            content,
            message: values.desc,
          })
          .then((result) => {
            if (result && result.data.name) {
              const url = values.branchname
                ? `/projects/${projectsId}/coders?branch=${values.branchname}`
                : `/projects/${projectsId}/coders`;
              this.props.history.push(url);
            }
          })
          .catch((error) => {
            console.log(error);
          });
      }
    });
  };


  // 确认修改文件
  UpdateFile=()=>{
    const { branch , detail,content,filepath}= this.props;
    const { projectsId } = this.props.match.params;
    const { submitType } = this.state;
    const url =`/repositories/${projectsId}/update_file.json`;
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        axios.put(url,{
          filepath:detail.path,
          branch: branch,
          new_branch: submitType === "1" ? values.branchname : undefined,
          content:content,
          sha:detail.sha,
        }).then(result=>{
          if(result){
            const url = `/projects/${projectsId}/coders?url=${detail.path.split("/")[0]}`;
              this.props.history.push(url);
            this.props.showNotification("修改成功!");

          }
        }).catch(error=>{
          console.log(error);
        })
      }
    })

  }

  render() {
    const { submitType } = this.state;
    const { getFieldDecorator } = this.props.form;

    const { branch, projectsId } = this.props.match.params;

    const { current_user, filepath, projectDetail } = this.props;
    const {editor_type} = this.props

    const changeSubmitBranch = () => {
      if (submitType === "1") {
        return (
          <div className="mt15">
            <Form.Item style={{ paddingLeft: "24px" }}>
              {getFieldDecorator("branchname", {
                rules: [
                  {
                    required: true,
                    message: "请输入分支名称",
                  },
                ],
              })(
                <Input
                  placeholder={`请输入分支名称`}
                  style={{ width: "220px" }}
                />
              )}
            </Form.Item>
          </div>
        );
      }
    };
    return (
      <div>
        <span className="df mt20" style={{ alignItems: "center" }}>
          <Link
            to={`/users/${current_user && current_user.login}/projects`}
            className="show-user-link"
          >
            <img
              src={getImageUrl(
                `images/${current_user && current_user.image_url}`
              )}
              alt=""
              className="screwImg"
            />
            <span className="color-grey-3">
              {current_user && current_user.username}：
            </span>
          </Link>

          <span className="color-grey-8">提交变更</span>
        </span>
        <div className="userScrew">
          <div className="screwPanel">
            <Form>
              <Form.Item>
                {getFieldDecorator("path", {
                  rules: [],
                })(
                  <Input
                    placeholder={`/${
                      projectDetail && projectDetail.identifier
                    }${filepath}`}
                    readOnly
                  />
                )}
              </Form.Item>
              <Form.Item>
                {getFieldDecorator("desc", {
                  rules: [
                    {
                      required: true,
                      message: "请输入合并请求的描述内容",
                    },
                  ],
                })(
                  <TextArea
                    placeholder={`请输入合并请求的描述,(必填)`}
                    authSize={{ minRows: 3, maxRows: 5 }}
                  />
                )}
              </Form.Item>
              <Radio.Group value={submitType} onChange={this.changeSubmittype}>
                <Radio value="0" className="mb10">
                  <i className="iconfont icon-banbenku font-16 mr5"></i>
                  直接提交至<span className="color-orange">{branch}</span>分支
                </Radio>
                <Radio value="1">
                  <Icon type="pull-request" className="mr5" />
                  为此提交创建一个<span className="font-bd">新的分支</span>
                  并发起合并请求
                </Radio>
              </Radio.Group>
              {changeSubmitBranch()}
            </Form>
          </div>
        </div>
        <div className="mt50 text-center">
          <Button type="primary" onClick={editor_type==="new" ? this.subMitFrom : this.UpdateFile} className="mr30">
            提交变更
          </Button>
          <Button
            type="primary grey"
            onClick={() => {
              this.props.history.push(`/projects/${projectsId}/coders`);
            }}
            className="mr20"
          >
            取消
          </Button>
        </div>
      </div>
    );
  }
}
const WrappedUserSubmitForm = Form.create({ name: "UserSubmitForm" })(
  UserSubmitComponent
);
export default WrappedUserSubmitForm;