resolutionPro.jsx 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273
  1. import React from "react";
  2. import {
  3. Spin,
  4. Button,
  5. Tabs,
  6. Table,
  7. message,
  8. Modal,
  9. Input,
  10. Tag,
  11. Popconfirm
  12. } from "antd";
  13. import img from "./example.png"
  14. import $ from "jquery/src/ajax";
  15. const ResolutionPro = React.createClass({
  16. getInitialState() {
  17. return {
  18. visible: false,
  19. proArr: [
  20. {
  21. name: "子项目1",
  22. number: 0
  23. },
  24. {
  25. name: "子项目2",
  26. number: 0
  27. },
  28. {
  29. name: "子项目3",
  30. number: 0
  31. },
  32. ],
  33. inputArr: []
  34. };
  35. },
  36. componentWillReceiveProps(nextProps) {
  37. this.setState({
  38. visible: nextProps.resolutionVisible
  39. });
  40. const arr = [
  41. {
  42. name: "子项目1",
  43. number: 0
  44. },
  45. {
  46. name: "子项目2",
  47. number: 0
  48. },
  49. {
  50. name: "子项目3",
  51. number: 0
  52. }
  53. ];
  54. this.setState({
  55. proArr: arr
  56. });
  57. },
  58. handleOk() {
  59. const arr = [
  60. {
  61. name: "子项目1",
  62. number: 0
  63. },
  64. {
  65. name: "子项目2",
  66. number: 0
  67. },
  68. {
  69. name: "子项目3",
  70. number: 0
  71. }
  72. ];
  73. this.setState({
  74. visible: false,
  75. proArr: arr
  76. });
  77. },
  78. addPro() {
  79. const obj = {
  80. name: "子项目" + (this.state.proArr.length + 1),
  81. number: 0
  82. }
  83. this.state.proArr.push(obj)
  84. this.setState({
  85. proArr: this.state.proArr
  86. })
  87. },
  88. deletePro() {
  89. if(this.state.proArr.length == 2) {
  90. message.warning("不能继续删除子项目!")
  91. return
  92. }
  93. this.state.proArr.splice(this.state.proArr.length - 1, 1)
  94. this.setState({
  95. proArr: this.state.proArr
  96. })
  97. },
  98. submit() {
  99. const arr = this.state.proArr
  100. const numArr = []
  101. arr.forEach(item => {
  102. let num = +item.number
  103. if(num != 0) {
  104. numArr.push(num);
  105. }
  106. });
  107. let sum = 0
  108. numArr.forEach( item => {
  109. sum += item
  110. })
  111. if(sum != this.props.number) {
  112. message.warning("拆分数量总和与原项目数量不匹配,请重新填写数量!")
  113. return
  114. }
  115. let str = numArr.join(",")
  116. this.setState({
  117. loading: true
  118. });
  119. $.ajax({
  120. method: "post",
  121. dataType: "json",
  122. crossDomain: false,
  123. url: globalConfig.context + "/api/admin/orderProject/addSplitProject",
  124. data: {
  125. tid: this.props.id,
  126. splitList: str
  127. },
  128. success: function(data) {
  129. let thedata = data.data;
  130. if (!thedata) {
  131. if (data.error && data.error.length) {
  132. message.warning(data.error[0].message);
  133. }
  134. thedata = {};
  135. } else {
  136. message.success("拆分成功!")
  137. this.props.cancel()
  138. this.props.loadData()
  139. }
  140. }.bind(this)
  141. }).always(
  142. function() {
  143. this.setState({
  144. loading: false
  145. });
  146. }.bind(this)
  147. );
  148. },
  149. changeNum() {
  150. let sum = 0
  151. this.state.proArr.forEach(item => {
  152. sum += (+item.number)
  153. })
  154. return sum
  155. },
  156. render() {
  157. return (
  158. <div>
  159. <Modal
  160. style={{ position: "relative" }}
  161. title="拆分项目"
  162. visible={this.state.visible}
  163. onCancel={this.props.cancel}
  164. footer={null}
  165. destroyOnClose={true}
  166. >
  167. <div style={{ marginBottom: 10 }}>
  168. 当前项目名称:{this.props.name}
  169. </div>
  170. <div style={{ marginBottom: 10 }}>
  171. 当前项目数量:{this.props.number}
  172. </div>
  173. <div style={{ marginBottom: 10 }}>
  174. 选项:
  175. <Button type="primary" onClick={this.addPro}>
  176. +增加子项目
  177. </Button>
  178. <Button
  179. type="primary"
  180. style={{ marginLeft: 10 }}
  181. onClick={this.deletePro}
  182. >
  183. -删除子项目
  184. </Button>
  185. </div>
  186. <div style={{ width: "250px", marginBottom: "10px" }}>
  187. {this.state.proArr.map((item, index) => {
  188. return (
  189. <div style={{ display: "inline-block" }}>
  190. <span style={{ display: "block" }}>{item.name}</span>
  191. <Input
  192. value={item.number}
  193. style={{ width: 40 }}
  194. onBlur={e => {
  195. if (e.target.value.trim() == "") {
  196. this.state.proArr[index].number = 0;
  197. this.setState({
  198. proArr: this.state.proArr
  199. });
  200. }
  201. }}
  202. onChange={e => {
  203. const reg = /^[0-9]\d*$/;
  204. if (!reg.test(+e.target.value)) {
  205. return;
  206. }
  207. this.state.proArr[index].number = e.target.value;
  208. this.setState(
  209. {
  210. proArr: this.state.proArr
  211. },
  212. () => {
  213. // console.log(this.state.proArr);
  214. }
  215. );
  216. }}
  217. />
  218. <span color={"#2db7f5"} style={{ marginLeft: 5 }}>
  219. {index == this.state.proArr.length - 1 ? "=" : "+"}
  220. </span>
  221. <span style={{ marginLeft: 5 }}>
  222. {index == this.state.proArr.length - 1
  223. ? this.changeNum()
  224. : ""}
  225. </span>
  226. </div>
  227. );
  228. })}
  229. </div>
  230. <img
  231. src={img}
  232. style={{
  233. position: "absolute",
  234. width: "150px",
  235. right: "20px",
  236. top: "50%",
  237. transform: "translateY(-50%)"
  238. }}
  239. />
  240. <p style={{ color: "red" }}>各子项目相加需等于当前项目数量!</p>
  241. <Popconfirm
  242. placement="top"
  243. title={
  244. <span style={{ color: "red", fontWeight: 900 }}>
  245. 系统提示:请确定将当前项目数量按选项,进行拆分,拆分为子项目后,不可修改!!!
  246. </span>
  247. }
  248. onConfirm={this.submit}
  249. okText="确定"
  250. cancelText="取消"
  251. >
  252. <Button
  253. loading={this.state.loading}
  254. type="primary"
  255. style={{
  256. position: "relative",
  257. left: "50%",
  258. bottom: -20,
  259. transform: "translate(-50%, -50%)"
  260. }}
  261. >
  262. 确认拆分
  263. </Button>
  264. </Popconfirm>
  265. </Modal>
  266. </div>
  267. );
  268. }
  269. });
  270. export default ResolutionPro;