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

import React, { Component } from 'react';
import { Calendar, Select, Radio, Col, Row, Divider, Input, Form, Spin } from 'antd';
import axios from 'axios';
import moment from 'moment';
import '../Order/order.scss';


const TextArea = Input.TextArea;
const { Group, Button } = Radio;
class UpdateMilepost extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: undefined,
      value: moment('2017-01-25'),
      selectedValue: moment('2020-2-12'),
      isSpin: false
    }
  }

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

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

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

  getmeil = () => {
    const { projectsId , owner } = this.props.match.params;
    const { meilid } = this.props.match.params;
    const url = `/${owner}/${projectsId}/milestones/${meilid}/edit.json`;
    axios.get(url, {
      params: {
        projectsId, meilid
      }
    }).then((result) => {
      if (result) {
        this.setState({
          data: result.data,
          selectedValue: result.data.effective_date && moment(result.data.effective_date)
        })
        this.props.form.setFieldsValue({
          name: result.data.name,
          description: result.data.description
        });

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

  submit = () => {
    this.setState({ isSpin: true })
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        const { projectsId , owner } = this.props.match.params;
        const { meilid } = this.props.match.params;
        const url = `/${owner}/${projectsId}/milestones/${meilid}.json`;

        let time = this.state.selectedValue && this.state.selectedValue.format("YYYY-MM-DD");
        
        axios.put(url, {
          ...values,
          project_id: projectsId,
          id: meilid,
          effective_date: time,
          status: 'open'
        }).then(result => {
          if (result) {
            this.setState({ isSpin: false })
            this.props.history.push(`/${owner}/${projectsId}/milestones`);

          }

        }).catch(error => {
          this.setState({ isSpin: false })
          console.log(error);
        })
      }else{
        this.setState({ isSpin: false })
      }
    })
  }
  // 清楚截止日期
  claertime = () => {
    this.setState({
      selectedValue: undefined,
    })
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const { isSpin , selectedValue } = this.state;
    return (
      <div className="main">
        <Form>
          <div style={{ marginLeft: 15, marginTop: 24 }}>
            <h1 >编辑里程碑</h1>
            <h5 className="mt-5 color-grey-9">里程碑可以组织任务和合并请求，并跟踪进度.</h5>
          </div>
          <Divider />
          <div style={{ display: 'flex' }}>
            <div className="newmilepostleft">
              标题
               <div>
                <Form.Item>
                  {getFieldDecorator('name', {
                    rules: [{
                      required: true, message: '请输入标题'
                    }],
                  })(
                    <Input placeholder="标题" />
                  )}
                </Form.Item>
              </div>
              描述
               <Form.Item>
                {getFieldDecorator('description', {
                  rules: [{
                    required: true, message: '请输入描述内容'
                  }],
                })(
                  <TextArea placeholder="请输入描述内容..." style={{ height: "150px" }} />

                )}
              </Form.Item>
            </div>
            <div className="newmilepostrighe" >
              截止日期(可选) <a style={{ color: 'red' }} onClick={this.claertime}>清除</a>
              <div>
                <Input style={{ width: "120px" }} value={selectedValue && selectedValue.format('YYYY-MM-DD')} />
              </div>
              <div style={{ width: 300, border: '1px solid #d9d9d9', borderRadius: 4, marginTop: 5 }}>
                <Calendar
                  fullscreen={false}
                  headerRender={({ value, type, onChange, onTypeChange }) => {
                    const start = 0;
                    const end = 12;
                    const monthOptions = [];
                    const current = value.clone();
                    const localeData = value.localeData();
                    const months = [];
                    for (let i = 0; i < 12; i++) {
                      current.month(i);
                      months.push(localeData.monthsShort(current));
                    }

                    for (let index = start; index < end; index++) {
                      monthOptions.push(
                        <Select.Option className="month-item" key={`${index}`}>
                          {months[index]}
                        </Select.Option>,
                      );
                    }
                    const month = value.month();

                    const year = value.year();
                    const options = [];
                    for (let i = year - 10; i < year + 10; i += 1) {
                      options.push(
                        <Select.Option key={i} value={i} className="year-item">
                          {i}
                        </Select.Option>,
                      );
                    }
                    return (
                      <div style={{ padding: 10 }}>

                        <Row type="flex" justify="space-between">
                          <Col>
                            <Group size="small" onChange={e => onTypeChange(e.target.value)} value={type}>
                              <Button value="month">日期</Button>
                              <Button value="year">月份</Button>
                            </Group>
                          </Col>
                          <Col>
                            <Select
                              size="small"
                              dropdownMatchSelectWidth={false}
                              className="my-year-select"
                              style={{ width: 80 }}
                              onChange={newYear => {
                                const now = value.clone().year(newYear);
                                onChange(now);
                              }}
                              value={String(year)}
                            >
                              {options}
                            </Select>
                          </Col>
                          <Col>
                            <Select
                              size="small"
                              dropdownMatchSelectWidth={false}
                              value={String(month)}
                              onChange={selectedMonth => {
                                const newValue = value.clone();
                                newValue.month(parseInt(selectedMonth, 10));
                                onChange(newValue);
                              }}
                            >
                              {monthOptions}
                            </Select>
                          </Col>
                        </Row>
                      </div>
                    );
                  }}
                  onPanelChange={this.onPanelChange}
                  onSelect={this.onSelect}
                />
              </div>
            </div>
          </div>
          <Divider />
          <div className="clearfix mt15" onClick={this.submit}>
            <Spin spinning={isSpin}>
              <a className="topWrapper_btn fr"  >更新里程碑</a>
            </Spin>

          </div>
        </Form>
      </div>
    )
  }
}
const WrappedUpdatemile = Form.create({ name: 'UpdatemileFrom' })(UpdateMilepost);

export default WrappedUpdatemile;