operation.jsx 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527
  1. import React, { Component } from "react";
  2. import { Modal, Spin, TreeSelect, Form, Button, Input, Select, message, AutoComplete } from "antd";
  3. import $ from "jquery/src/ajax";
  4. import { newTreeData } from "@/tools";
  5. const Operation = React.createClass({
  6. getInitialState() {
  7. return {
  8. confirmLoading: false,
  9. levelData: [],
  10. };
  11. },
  12. componentDidMount() {
  13. const { levelData, lev, info } = this.props
  14. !!info.id && this.getDetails(info.id)
  15. this.setState({
  16. levelData: newTreeData(levelData, lev),
  17. })
  18. },
  19. // 巴详情接口
  20. getDetails(id) {
  21. this.setState({
  22. confirmLoading: true
  23. })
  24. $.ajax({
  25. method: "get",
  26. dataType: "json",
  27. crossDomain: false,
  28. url: globalConfig.context + "/api/admin/amb/details",
  29. data: { id },
  30. success: function (data) {
  31. this.setState({
  32. confirmLoading: false,
  33. });
  34. let thedata = data.data;
  35. if (data.error.length === 0) {
  36. this.setState({
  37. parentId: thedata.parentId,
  38. name: thedata.name,
  39. leader: thedata.leader,
  40. financeId: thedata.financeId,
  41. accountant: thedata.accountant,
  42. remarks: thedata.remarks,
  43. auto1: thedata.leaderName,
  44. auto2: thedata.financeName,
  45. auto3: thedata.accountantName,
  46. })
  47. } else {
  48. message.warning(data.error[0].message);
  49. }
  50. }.bind(this),
  51. }).always(
  52. function () {
  53. this.setState({
  54. confirmLoading: false
  55. })
  56. }.bind(this)
  57. );
  58. },
  59. // 巴主查询
  60. supervisor(e, role) {
  61. $.ajax({
  62. method: "get",
  63. dataType: "json",
  64. crossDomain: false,
  65. url: globalConfig.context + "/api/admin/customer/listAdminByName",
  66. data: {
  67. adminName: e,
  68. },
  69. success: function (data) {
  70. let thedata = data.data;
  71. if (!thedata) {
  72. if (data.error && data.error.length) {
  73. message.warning(data.error[0].message);
  74. }
  75. thedata = {};
  76. }
  77. if (role == "bz") {
  78. this.setState({
  79. customerArr1: thedata,
  80. });
  81. } else if (role == "cw") {
  82. this.setState({
  83. customerArr2: thedata,
  84. });
  85. } else if (role == "kj") {
  86. this.setState({
  87. customerArr3: thedata,
  88. });
  89. }
  90. }.bind(this),
  91. }).always(
  92. function () {
  93. }.bind(this)
  94. );
  95. },
  96. // 巴主输入触发
  97. httpChange1(e) {
  98. if (e.length >= 1) {
  99. this.supervisor(e, "bz");
  100. }
  101. this.setState({
  102. auto1: e,
  103. });
  104. },
  105. // 巴主选中
  106. selectAuto1(value, options) {
  107. let leaderid = "";
  108. let contactLists = this.state.customerArr1 || [];
  109. if (value) {
  110. contactLists.map(function (item) {
  111. if (item.name == value.toString()) {
  112. leaderid = item.id
  113. }
  114. });
  115. }
  116. this.setState({
  117. auto1: value,
  118. leader: leaderid,
  119. });
  120. },
  121. // 巴主失去焦点时间
  122. blurChange1(e) {
  123. let leaderid = "";
  124. let contactLists = this.state.customerArr1 || [];
  125. if (e) {
  126. contactLists.map(function (item) {
  127. if (item.name == e.toString()) {
  128. leaderid = item.id
  129. }
  130. });
  131. }
  132. this.setState({
  133. leader: leaderid,
  134. });
  135. },
  136. // 财务输入触发
  137. httpChange2(e) {
  138. if (e.length >= 1) {
  139. this.supervisor(e, "cw");
  140. }
  141. this.setState({
  142. auto2: e,
  143. });
  144. },
  145. // 财务选中
  146. selectAuto2(value, options) {
  147. let financeid = "";
  148. let contactLists = this.state.customerArr2 || [];
  149. if (value) {
  150. contactLists.map(function (item) {
  151. if (item.name == value.toString()) {
  152. financeid = item.id
  153. }
  154. });
  155. }
  156. this.setState({
  157. auto2: value,
  158. financeId: financeid,
  159. });
  160. },
  161. // 财务失去焦点时间
  162. blurChange2(e) {
  163. let financeid = "";
  164. let contactLists = this.state.customerArr2 || [];
  165. if (e) {
  166. contactLists.map(function (item) {
  167. if (item.name == e.toString()) {
  168. financeid = item.id
  169. }
  170. });
  171. }
  172. this.setState({
  173. financeId: financeid,
  174. });
  175. },
  176. // 财务输入触发
  177. httpChange3(e) {
  178. if (e.length >= 1) {
  179. this.supervisor(e, "kj");
  180. }
  181. this.setState({
  182. auto3: e,
  183. });
  184. },
  185. // 会计选中
  186. selectAuto3(value, options) {
  187. let accountant = "";
  188. let contactLists = this.state.customerArr3 || [];
  189. if (value) {
  190. contactLists.map(function (item) {
  191. if (item.name == value.toString()) {
  192. accountant = item.id
  193. }
  194. });
  195. }
  196. this.setState({
  197. auto3: value,
  198. accountant: accountant,
  199. });
  200. },
  201. // 会计失去焦点时间
  202. blurChange3(e) {
  203. let accountant = "";
  204. let contactLists = this.state.customerArr3 || [];
  205. if (e) {
  206. contactLists.map(function (item) {
  207. if (item.name == e.toString()) {
  208. accountant = item.id
  209. }
  210. });
  211. }
  212. this.setState({
  213. accountant: accountant,
  214. });
  215. },
  216. // 新建巴
  217. addSubmit() {
  218. if (this.state.parentId === undefined || !this.state.parentId) {
  219. message.warning("请选择上级部门!");
  220. return
  221. }
  222. if (!this.state.name) {
  223. message.warning("请填写巴名称!");
  224. return
  225. }
  226. if (this.state.leader === undefined || !this.state.leader) {
  227. message.warning("请设置巴主!");
  228. return
  229. }
  230. if (this.state.financeId === undefined || !this.state.financeId) {
  231. message.warning("请选择财务负责人!");
  232. return
  233. }
  234. if (this.state.accountant === undefined || !this.state.accountant) {
  235. message.warning("请选择会计负责人!");
  236. return
  237. }
  238. this.setState({
  239. confirmLoading: true
  240. })
  241. let data = {
  242. parentId: this.state.parentId,
  243. name: this.state.name,
  244. leader: this.state.leader,
  245. financeId: this.state.financeId,
  246. accountant: this.state.accountant,
  247. remarks: this.state.remarks,
  248. }
  249. $.ajax({
  250. method: "POST",
  251. dataType: "json",
  252. crossDomain: false,
  253. url: globalConfig.context + "/api/admin/amb/add",
  254. data,
  255. success: function (data) {
  256. if (data.error.length === 0) {
  257. message.success("保存成功!");
  258. this.props.handleCancel();
  259. } else {
  260. message.warning(data.error[0].message);
  261. }
  262. this.setState({
  263. confirmLoading: false,
  264. });
  265. }.bind(this),
  266. }).always(
  267. function () {
  268. this.setState({
  269. confirmLoading: false,
  270. });
  271. }.bind(this)
  272. );
  273. },
  274. // 编辑巴
  275. editSubmit() {
  276. if (this.state.parentId === undefined || !this.state.parentId) {
  277. message.warning("请选择上级部门!");
  278. return
  279. }
  280. if (!this.state.name) {
  281. message.warning("请填写巴名称!");
  282. return
  283. }
  284. if (this.state.leader === undefined || !this.state.leader) {
  285. message.warning("请设置巴主!");
  286. return
  287. }
  288. if (this.state.financeId === undefined || !this.state.financeId) {
  289. message.warning("请选择财务负责人!");
  290. return
  291. }
  292. if (this.state.accountant === undefined || !this.state.accountant) {
  293. message.warning("请选择会计负责人!");
  294. return
  295. }
  296. this.setState({
  297. confirmLoading: true
  298. })
  299. let data = {
  300. id: this.props.info.id,
  301. parentId: this.state.parentId,
  302. name: this.state.name,
  303. leader: this.state.leader,
  304. financeId: this.state.financeId,
  305. accountant: this.state.accountant,
  306. remarks: this.state.remarks,
  307. }
  308. $.ajax({
  309. method: "POST",
  310. dataType: "json",
  311. crossDomain: false,
  312. url: globalConfig.context + "/api/admin/amb/update",
  313. data,
  314. success: function (data) {
  315. if (data.error.length === 0) {
  316. message.success("保存成功!");
  317. this.props.handleCancel();
  318. } else {
  319. message.warning(data.error[0].message);
  320. }
  321. this.setState({
  322. confirmLoading: false,
  323. });
  324. }.bind(this),
  325. }).always(
  326. function () {
  327. this.setState({
  328. confirmLoading: false,
  329. });
  330. }.bind(this)
  331. );
  332. },
  333. render() {
  334. const { confirmLoading, levelData } = this.state
  335. const { visible, } = this.props;
  336. const FormItem = Form.Item;
  337. const formItemLayout = {
  338. labelCol: { span: 8 },
  339. wrapperCol: { span: 14 },
  340. };
  341. const dataSources1 = this.state.customerArr1 || [];
  342. const options1 = dataSources1.map((group) => (
  343. <Select.Option key={group.id} value={group.name}>
  344. {group.name}
  345. </Select.Option>
  346. ));
  347. const dataSources2 = this.state.customerArr2 || [];
  348. const options2 = dataSources2.map((group) => (
  349. <Select.Option key={group.id} value={group.name}>
  350. {group.name}
  351. </Select.Option>
  352. ));
  353. const dataSources3 = this.state.customerArr3 || [];
  354. const options3 = dataSources3.map((group) => (
  355. <Select.Option key={group.id} value={group.name}>
  356. {group.name}
  357. </Select.Option>
  358. ));
  359. return (
  360. <Modal
  361. maskClosable={false}
  362. width="600px"
  363. title={visible == "add"
  364. ? "新增巴" : visible == "edit"
  365. ? "编辑巴" : ""}
  366. visible={visible != ""}
  367. footer=""
  368. onCancel={this.props.handleCancel}
  369. >
  370. <Spin spinning={confirmLoading}>
  371. <div>
  372. <Form
  373. layout="horizontal"
  374. >
  375. <div className="clearfix">
  376. <FormItem
  377. className="mid-item"
  378. {...formItemLayout}
  379. label={<span><span className="mandatory">*</span>上级部门</span>}
  380. >
  381. <TreeSelect
  382. style={{ width: 250 }}
  383. value={this.state.parentId}
  384. dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
  385. treeData={levelData}
  386. placeholder="请选择上级部门"
  387. onChange={(e) => {
  388. this.setState({
  389. parentId: e,
  390. });
  391. }}
  392. />
  393. </FormItem>
  394. </div>
  395. <div className="clearfix">
  396. <FormItem
  397. className="mid-item"
  398. {...formItemLayout}
  399. label={<span><span className="mandatory">*</span>巴名称</span>}
  400. >
  401. <Input
  402. placeholder="请填写巴名称"
  403. style={{ width: "250px" }}
  404. value={this.state.name}
  405. onChange={(e) => {
  406. this.setState({ name: e.target.value });
  407. }}
  408. />
  409. </FormItem>
  410. </div>
  411. <div className="clearfix">
  412. <FormItem
  413. className="mid-item"
  414. {...formItemLayout}
  415. label={<span><span className="mandatory">*</span>巴主</span>}
  416. >
  417. <AutoComplete
  418. className="certain-category-search"
  419. dropdownClassName="certain-category-search-dropdown"
  420. dropdownMatchSelectWidth={false}
  421. style={{ width: "250px" }}
  422. dataSource={options1}
  423. placeholder='输入巴主名称'
  424. value={this.state.auto1}
  425. onChange={this.httpChange1}
  426. filterOption={true}
  427. onBlur={this.blurChange1}
  428. onSelect={this.selectAuto1}
  429. >
  430. <Input />
  431. </AutoComplete>
  432. </FormItem>
  433. </div>
  434. <div className="clearfix">
  435. <FormItem
  436. className="mid-item"
  437. {...formItemLayout}
  438. label={<span><span className="mandatory">*</span>财务负责人</span>}
  439. >
  440. <AutoComplete
  441. className="certain-category-search"
  442. dropdownClassName="certain-category-search-dropdown"
  443. dropdownMatchSelectWidth={false}
  444. style={{ width: "250px" }}
  445. dataSource={options2}
  446. placeholder='输入财务负责人名称'
  447. value={this.state.auto2}
  448. onChange={this.httpChange2}
  449. filterOption={true}
  450. onBlur={this.blurChange2}
  451. onSelect={this.selectAuto2}
  452. >
  453. <Input />
  454. </AutoComplete>
  455. </FormItem>
  456. </div>
  457. <div className="clearfix">
  458. <FormItem
  459. className="mid-item"
  460. {...formItemLayout}
  461. label={<span><span className="mandatory">*</span>会计负责人</span>}
  462. >
  463. <AutoComplete
  464. className="certain-category-search"
  465. dropdownClassName="certain-category-search-dropdown"
  466. dropdownMatchSelectWidth={false}
  467. style={{ width: "250px" }}
  468. dataSource={options3}
  469. placeholder='输入会计负责人名称'
  470. value={this.state.auto3}
  471. onChange={this.httpChange3}
  472. filterOption={true}
  473. onBlur={this.blurChange3}
  474. onSelect={this.selectAuto3}
  475. >
  476. <Input />
  477. </AutoComplete>
  478. </FormItem>
  479. </div>
  480. <div className="clearfix">
  481. <FormItem
  482. className="mid-item"
  483. {...formItemLayout}
  484. label={<span>备注巴说明</span>}
  485. >
  486. <Input
  487. type="textarea"
  488. placeholder=""
  489. style={{ width: "250px" }}
  490. autosize={{ minRows: 3 }}
  491. value={this.state.remarks}
  492. onChange={(e) => {
  493. this.setState({ remarks: e.target.value });
  494. }}
  495. />
  496. </FormItem>
  497. </div>
  498. <FormItem wrapperCol={{ span: 12, offset: 8 }}>
  499. <Button
  500. type="primary"
  501. onClick={!!this.props.info.id ? this.editSubmit : this.addSubmit}
  502. style={{ marginRight: "50px" }}
  503. >
  504. 保存
  505. </Button>
  506. <Button
  507. type="ghost"
  508. onClick={this.props.handleCancel}>
  509. 取消
  510. </Button>
  511. </FormItem>
  512. </Form>
  513. </div>
  514. </Spin>
  515. </Modal >
  516. );
  517. },
  518. });
  519. export default Operation;