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

import React, { Component } from "react";
import { getImageUrl } from "educoder";
import { Form, Input, Button, Radio, Icon, Spin } 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",
      filename: "",
      isSpin: false
    };
  }

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

    // 命名文件
    changeFileName = (e) => {
      this.setState({
        filename: e.target.value,
      });
    };

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

  // 确认修改文件
  UpdateFile = () => {
    this.setState({isSpin: true})
    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,
            message: values.desc,
          })
          .then((result) => {
            this.setState({isSpin: false})
            if (result.data && result.data.status === 1) {
              let url = values.branchname
                ? `/projects/${projectsId}/coders?branch=${values.branchname}`
                : `/projects/${projectsId}/coders`;
             
              this.props.history.push(url);
              this.props.showNotification("修改成功!");
            }
          })
          .catch((error) => {
            this.setState({isSpin: false})
            console.log(error);
          });
      }else{
        this.setState({isSpin: false})
      }
    });
  };

  render() {
    const { submitType,filename, isSpin } = 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;
    console.log("88888", filepath)

    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 mt30" 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 ver-middle">
              {current_user && current_user.username}：
            </span>
          </Link>

          <span className="color-grey-8">提交变更</span>
        </span>
        <Spin spinning={isSpin}>
        <div className="userScrew">
          <div className="screwPanel">
            <Form>
              <Form.Item style={{display: editor_type === "upload" ? "block" : "none"}}>
                {getFieldDecorator("path", {
                  rules: [],
                })(
                  // <Input
                  //   placeholder={`/${
                  //     projectDetail && projectDetail.identifier
                  //   }${filepath}`}
                  //   readOnly
                  // />
                  <div className="setInputAddon">
                  <Input
                    addonBefore={`/${
                      projectDetail && projectDetail.identifier
                    }/`}
                    value={filename ? filename: filepath}
                    onChange={this.changeFileName}
                    placeholder="文件路径..."
                  />
                </div>
                )}
              </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="mt20 text-center">
          <Button
            type="primary"
            onClick={editor_type === "edit" ? this.UpdateFile : this.subMitFrom}
            className="mr30"
          >
            提交变更
          </Button>
          <Button
            type="primary grey"
            onClick={() => {
              this.props.history.push(`/projects/${projectsId}/coders`);
            }}
            className="mr20"
          >
            取消
          </Button>
        </div>
        </Spin>

      </div>
    );
  }
}
const WrappedUserSubmitForm = Form.create({ name: "UserSubmitForm" })(
  UserSubmitComponent
);
export default WrappedUserSubmitForm;