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