| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273 | 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;
 |