kede-client/js/component/manageCenter/project/task/resolutionPro.jsx

import React from "react";
import {
  Spin,
  Button,
  Tabs,
  Table,
  message,
  Modal,
  Input,
  Tag,
  Popconfirm
} from "antd";
import img from "./example.png"
import $ from "jquery/src/ajax";

const ResolutionPro = React.createClass({
  getInitialState() {
    return {
      visible: false,
      proArr: [
          {
              name: "子项目1",
              number: 0
          },
          {
              name: "子项目2",
              number: 0
          },
          {
              name: "子项目3",
              number: 0
          },
      ],
      inputArr: []
    };
  },
  componentWillReceiveProps(nextProps) {
    this.setState({
      visible: nextProps.resolutionVisible
    });
    const arr = [
      {
        name: "子项目1",
        number: 0
      },
      {
        name: "子项目2",
        number: 0
      },
      {
        name: "子项目3",
        number: 0
      }
    ];
    this.setState({
      proArr: arr
    });
  },
  handleOk() {
    const arr = [
      {
        name: "子项目1",
        number: 0
      },
      {
        name: "子项目2",
        number: 0
      },
      {
        name: "子项目3",
        number: 0
      }
    ];
    this.setState({
      visible: false,
      proArr: arr
    });
  },
  addPro() {
    const obj = {
        name: "子项目" + (this.state.proArr.length + 1),
        number: 0
    }
    this.state.proArr.push(obj)
    this.setState({
        proArr: this.state.proArr
    })
  },
  deletePro() {
    if(this.state.proArr.length == 2) {
        message.warning("不能继续删除子项目！")
        return
    }
    this.state.proArr.splice(this.state.proArr.length - 1, 1)
    this.setState({
        proArr: this.state.proArr
    })
  },
  submit() {
    const arr = this.state.proArr
    const numArr = []
    arr.forEach(item => {
      let num = +item.number
      if(num != 0) {
        numArr.push(num);
      }
    });
    let sum = 0
    numArr.forEach( item => {
      sum += item
    })
    if(sum != this.props.number) {
      message.warning("拆分数量总和与原项目数量不匹配，请重新填写数量！")
      return
    }
    let str = numArr.join(",")
    this.setState({
      loading: true
    });
    $.ajax({
      method: "post",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/orderProject/addSplitProject",
      data: {
        tid: this.props.id,
        splitList: str
      },
      success: function(data) {
        let thedata = data.data;
        if (!thedata) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
          thedata = {};
        } else {
          message.success("拆分成功！")
          this.props.cancel()
          this.props.loadData()
        }
      }.bind(this)
    }).always(
      function() {
        this.setState({
          loading: false
        });
      }.bind(this)
    );
  },
  changeNum() {
    let sum = 0
    this.state.proArr.forEach(item => {
      sum += (+item.number)
    })
    return sum
  },
  render() {
    return (
      <div>
        <Modal
          style={{ position: "relative" }}
          title="拆分项目"
          visible={this.state.visible}
          onCancel={this.props.cancel}
          footer={null}
          destroyOnClose={true}
        >
          <div style={{ marginBottom: 10 }}>
            当前项目名称：{this.props.name}
          </div>
          <div style={{ marginBottom: 10 }}>
            当前项目数量：{this.props.number}
          </div>
          <div style={{ marginBottom: 10 }}>
            选项：
            <Button type="primary" onClick={this.addPro}>
              +增加子项目
            </Button>
            <Button
              type="primary"
              style={{ marginLeft: 10 }}
              onClick={this.deletePro}
            >
              -删除子项目
            </Button>
          </div>
          <div style={{ width: "250px", marginBottom: "10px" }}>
            {this.state.proArr.map((item, index) => {
              return (
                <div style={{ display: "inline-block" }}>
                  <span style={{ display: "block" }}>{item.name}</span>
                  <Input
                    value={item.number}
                    style={{ width: 40 }}
                    onBlur={e => {
                      if (e.target.value.trim() == "") {
                        this.state.proArr[index].number = 0;
                        this.setState({
                          proArr: this.state.proArr
                        });
                      }
                    }}
                    onChange={e => {
                      const reg = /^[0-9]\d*$/;
                      if (!reg.test(+e.target.value)) {
                        return;
                      }
                      this.state.proArr[index].number = e.target.value;
                      this.setState(
                        {
                          proArr: this.state.proArr
                        },
                        () => {
                          console.log(this.state.proArr);
                        }
                      );
                    }}
                  />
                  <span color={"#2db7f5"} style={{ marginLeft: 5 }}>
                    {index == this.state.proArr.length - 1 ? "=" : "+"}
                  </span>
                  <span style={{ marginLeft: 5 }}>
                    {index == this.state.proArr.length - 1
                      ? this.changeNum()
                      : ""}
                  </span>
                </div>
              );
            })}
          </div>
          <img
            src={img}
            style={{
              position: "absolute",
              width: "150px",
              right: "20px",
              top: "50%",
              transform: "translateY(-50%)"
            }}
          />
          <p style={{ color: "red" }}>各子项目相加需等于当前项目数量！</p>
          <Popconfirm
            placement="top"
            title={
              <span style={{ color: "red", fontWeight: 900 }}>
                系统提示：请确定将当前项目数量按选项，进行拆分，拆分为子项目后，不可修改！！！
              </span>
            }
            onConfirm={this.submit}
            okText="确定"
            cancelText="取消"
          >
            <Button
              loading={this.state.loading}
              type="primary"
              style={{
                position: "relative",
                left: "50%",
                bottom: -20,
                transform: "translate(-50%, -50%)"
              }}
            >
              确认拆分
            </Button>
          </Popconfirm>
        </Modal>
      </div>
    );
  }
});

export default ResolutionPro;