forgeplus-react/src/forge/Order/CopyDetail.js

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

import axios from 'axios';
import Nav from './Nav';
import UploadComponent from '../Upload/Index';
import { getImageUrl } from 'educoder';
import { Modal, Form, Input, Select } from 'antd';
import MDEditor from '../../modules/tpm/challengesnew/tpm-md-editor';
import Attachments from '../Upload/attachment'

const Option = Select.Option;


class CopyDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: undefined,
      isShow: false,
      imgsrc: '',
      journalsdata: undefined,
      //图片区域是否显示 none 隐藏 block 显示
      display: 'none',
      titledisplay: 'none',
      subject: '',
      branch_name: "",
      issue_tag_ids: "",
      fixed_version_id: "",
      tracker_id: 0,
      issue_type: 0,
      status_id: 0,
      assigned_to_id: "",
      priority_id: 0,
      done_ratio: 0,
      textcount: "",
      fileList: undefined,
      get_attachments: undefined,
    }
  }

  componentDidMount = () => {
    this.getDetail();
  }
  getDetail = () => {
    const { projectsId, orderId } = this.props.match.params;
    const url = `/projects/${projectsId}/issues/${orderId}/edit.json`;
    axios.get(url).then((result) => {
      if (result) {
        this.setState({
          data: result.data,
          subject: result.data.subject,
          issue_chosen: result.data.issue_chosen,
          branches: result.data.branches,
          tracker_id: result.data.tracker_id,
          issue_type: result.data.issue_type,
          status_id: result.data.status_id,
          priority_id: result.data.priority_id,
          done_ratio: result.data.done_ratio,
          textcount: result.data.description,
          branch_name: result.data.branch_name,
          get_attachments: result.data.attachments,
          fileList: undefined,
          issue_tag_ids: result.data.issue_tags && result.data.issue_tags[0].id,
          fixed_version_id: result.data.fixed_version_id,
          assigned_to_id: result.data.assigned_to_id

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

  handleok = () => {
    this.setState({
      isShow: false
    });
  };
  handleCancel = () => {
    this.setState({
      isShow: false
    });
  }

  imgshow = () => {
    this.setState({
      isShow: true
    });
  };
  stringJson = (value) => {
    let _value = null;

    try {
      _value = JSON.parse(value);
    } catch (e) {
      _value = value;
    }
    return _value
  }

  //删除任务
  deleteorder = (id) => {
    const { projectsId, orderId } = this.props.match.params;
    const url = `/projects/${projectsId}/issues/${orderId}.json`;
    axios.delete(url, {
      data: {
        project_id: projectsId,
        id: id
      }
    }).then((result) => {
      if (result) {
        this.props.history.push(`/projects/${projectsId}/orders`);
      }
    }).catch((error) => {
      console.log(error);
    })
  }

  onContentChange = (value) => {
    this.setState({
      textcount: value
    })
  }

  changmodelname = (e) => {
    this.setState({
      subject: e.target.value
    })
  }
  changmodelcount = (e) => {
    this.setState({
      textcount: e.target.value
    })
  }

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

  handleSubmit = () => {
    const { fileList } = this.state;
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        const { projectsId, orderId } = this.props.match.params;
        const { subject } = this.state;
        const url = `/projects/${projectsId}/issues/${orderId}.json`;
        if (values.issue_tag_ids === 0) {
          values.issue_tag_ids = ""
        } else {
          values.issue_tag_ids = [values.issue_tag_ids]
        }
        if (values.assigned_to_id === 0) {
          values.assigned_to_id = ""
        }
        const { textcount } = this.state;

        axios.put(url, {
          project_id: projectsId,
          subject: subject,
          id: orderId,
          description: textcount,
          attachment_ids: fileList,
          ...values
        }).then(result => {
          if (result) {
            this.props.history.push(`/projects/${projectsId}/orders`);
          }
        }).catch(error => {
          console.log(error);
        })
      }
    })
  }


  render() {
    const { projectsId, orderId } = this.props.match.params;
    const { getFieldDecorator } = this.props.form;
    const { current_user } = this.props;
    const { issue_tag_ids, fixed_version_id, branch_name, status_id, tracker_id, issue_type, assigned_to_id, priority_id, done_ratio,
      issue_chosen, branches, subject, textcount, get_attachments } = this.state;
    return (
      <div className="main">
        <div className="topWrapper">
          <Nav  {...this.props} {...this.state} />
        </div>
        <div>
          <Form>
            <div className="f-wrap-between mt20" style={{ alignItems: "flex-start" }}>
              <div className="list-right df">
                <Link to={``}><img className="user_img"
                  src={getImageUrl(`images/${current_user && current_user.image_url}`)} alt="" /></Link>
                <div className="new_context">
                  <Form.Item>
                    {getFieldDecorator('subject', {
                      rules: [{
                        required: true, message: '请填写任务标题'
                      }],
                      initialValue: subject
                    })(
                      <Input placeholder="标题" onChange={this.changmodelname} />
                    )}
                  </Form.Item>
                  <div className="quillContent" style={{ marginBottom: "20px" }}>
                  </div>
                  <MDEditor placeholder={'请输入任务的描述...'} height={200}
                    mdID={'order-copy-description'} initValue={textcount} onChange={this.onContentChange} ></MDEditor>
                  <UploadComponent load={this.UploadFunc}
                    showNotification={this.props.showNotification} isComplete={true} ></UploadComponent>
                  {
                    get_attachments ?
                      <Attachments attachments={get_attachments} showNotification={this.props.showNotification}
                        canDelete={true} />
                      :
                      ""
                  }
                  <p className="clearfix mt15 text-right">
                    <a className="topWrapper_btn fr" type="submit" style={{ marginLeft: 5 }}
                      onClick={this.handleSubmit}>保存</a>
                    <Link to={`/projects/${projectsId}/orders/${orderId}/detail`}
                      className="a_btn cancel_btn fr">取消</Link>
                  </p>
                </div>
              </div>
              <div className="list-left" style={{ paddingRight: "0px", paddingLeft: "15px", paddingTop: "10px" }}>
                <div className="list-l-panel">
                  <Form.Item
                    label="分支"
                  >
                    {getFieldDecorator('branch_name', {
                      initialValue: branch_name,
                      rules: [],
                    })(
                      <Select>
                        <Option value={''}>分支未指定</Option>
                        {
                          branches && branches.length > 0 && branches.map((item, key) => {
                            return (
                              <Option value={item}>{item}</Option>
                            )
                          })
                        }
                      </Select>
                    )}
                  </Form.Item>
                  <Form.Item
                    label="标签"
                  >
                    {getFieldDecorator('issue_tag_ids', {
                      initialValue: issue_tag_ids ? [issue_tag_ids] : "",
                      rules: [],
                    })(
                      <Select>
                        <Option value={''}>{issue_chosen && issue_chosen.issue_tag.length > 0 ? '未选择标签' : '请在仓库设置里添加标签'}</Option>
                        {this.renderSelect(issue_chosen && issue_chosen.issue_tag)}
                      </Select>
                    )}
                  </Form.Item>
                  <Form.Item
                    label="里程碑"
                  >
                    {getFieldDecorator('fixed_version_id', {
                      initialValue: fixed_version_id ? fixed_version_id : "",
                      rules: [],
                    })(
                      <Select>
                        <Option value={''}>{issue_chosen && issue_chosen.issue_version.length > 0 ? '未选择里程碑' : '请添加里程碑'}</Option>
                        {this.renderSelect(issue_chosen && issue_chosen.issue_version)}
                      </Select>
                    )}
                  </Form.Item>
                  <Form.Item
                    label="状态"
                  >
                    {getFieldDecorator('status_id', {
                      initialValue: status_id,
                      rules: [{
                        required: true, message: '请选择完成状态'
                      }],
                    })(
                      <Select>
                        {this.renderSelect(issue_chosen && issue_chosen.issue_status)}
                      </Select>
                    )}
                  </Form.Item>
                  <Form.Item
                    label="分类"
                  >
                    {getFieldDecorator('tracker_id', {
                      initialValue: tracker_id,
                      rules: [{
                        required: true, message: '请选择分类'
                      }],
                    })(
                      <Select>
                        {this.renderSelect(issue_chosen && issue_chosen.tracker)}
                      </Select>
                    )}
                  </Form.Item>
                  <Form.Item
                    label="指派成员"
                  >
                    {getFieldDecorator('assigned_to_id', {
                      initialValue: assigned_to_id ? assigned_to_id : ""
                    })(
                      <Select>
                        <Option value={''}>未指派成员</Option>
                        {this.renderSelect(issue_chosen && issue_chosen.assign_user)}
                      </Select>
                    )}
                  </Form.Item>
                  <Form.Item
                    label="优先度"
                  >
                    {getFieldDecorator('priority_id', {

                      initialValue: priority_id,
                      rules: [{
                        required: true, message: '请选择优先度'
                      }],
                    })(
                      <Select>
                        {this.renderSelect(issue_chosen && issue_chosen.priority)}
                      </Select>
                    )}
                  </Form.Item>
                  <Form.Item
                    label="完成度"
                  >
                    {getFieldDecorator('done_ratio', {
                      initialValue: done_ratio,
                      rules: [{
                        required: true, message: '请选择完成度'
                      }],
                    })(
                      <Select value={done_ratio}>
                        {this.renderSelect(issue_chosen && issue_chosen.done_ratio)}
                      </Select>
                    )}
                  </Form.Item>
                </div>
              </div>
            </div>
          </Form>
        </div>
        <Modal
          onCancel={this.handleCancel}
          visible={this.state.isShow}
          width="400px"
          footer={
            []
          }
          bodyStyle={{ textAlign: 'center' }}
        >
          <img className="list_img"
            src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1608431072,669449145&fm=27&gp=0.jpg"
            alt="" />
        </Modal>
      </div>
    )
  }
}

const CopyDetailForm = Form.create({ name: 'CopyDetailForm' })(CopyDetail);
export default CopyDetailForm;