contactPerson.jsx 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433
  1. import React from "react";
  2. import {
  3. Form,
  4. Table,
  5. Button,
  6. Spin,
  7. message,
  8. Input,
  9. Popconfirm,
  10. Col
  11. } from "antd";
  12. import ajax from "jquery/src/ajax/xhr.js";
  13. import $ from "jquery/src/ajax";
  14. const ContactPerson = React.createClass({
  15. getInitialState() {
  16. return {
  17. contactList: [],
  18. loading: false,
  19. ContactsLists: [
  20. {
  21. title: "姓名",
  22. dataIndex: "name",
  23. key: "name",
  24. render: (text, record, index) => {
  25. return (
  26. <Input
  27. value={record.name}
  28. placeholder="姓名(必填项)"
  29. key={record.id}
  30. required="required"
  31. onChange={e => {
  32. record.name = e.target.value;
  33. this.setState({ contactList: this.state.contactList });
  34. }}
  35. style={{ width: "120px" }}
  36. />
  37. );
  38. }
  39. },
  40. {
  41. title: "联系人部门",
  42. dataIndex: "depatrment",
  43. key: "depatrment",
  44. render: (text, record, index) => {
  45. return (
  46. <Input
  47. value={record.depatrment}
  48. placeholder="联系人部门"
  49. key={record.id}
  50. onChange={e => {
  51. record.depatrment = e.target.value;
  52. this.setState({ contactList: this.state.contactList });
  53. }}
  54. style={{ width: "120px" }}
  55. />
  56. );
  57. }
  58. },
  59. {
  60. title: "联系人职务",
  61. dataIndex: "position",
  62. key: "position",
  63. render: (text, record, index) => {
  64. return (
  65. <Input
  66. value={record.position}
  67. placeholder="联系人职务"
  68. key={record.id}
  69. onChange={e => {
  70. record.position = e.target.value;
  71. this.setState({ contactList: this.state.contactList });
  72. }}
  73. style={{ width: "120px" }}
  74. />
  75. );
  76. }
  77. },
  78. {
  79. title: "主要联系人",
  80. dataIndex: "major",
  81. width: 100,
  82. key: "major",
  83. render: text => {
  84. return text == 1 ? "是" : "否";
  85. }
  86. },
  87. {
  88. title: "手机号码",
  89. dataIndex: "mobile",
  90. key: "mobile",
  91. render: (text, record, index) => {
  92. return (
  93. <Input
  94. value={record.mobile}
  95. placeholder="手机号码(必填项)"
  96. key={record.id}
  97. required="required"
  98. onChange={e => {
  99. record.mobile = e.target.value;
  100. this.setState({ contactList: this.state.contactList });
  101. }}
  102. style={{ width: "120px" }}
  103. />
  104. );
  105. }
  106. },
  107. {
  108. title: "微信",
  109. dataIndex: "wechat",
  110. key: "wechat",
  111. render: (text, record, index) => {
  112. return (
  113. <Input
  114. value={record.wechat}
  115. placeholder="微信"
  116. key={record.id}
  117. onChange={e => {
  118. record.wechat = e.target.value;
  119. this.setState({ contactList: this.state.contactList });
  120. }}
  121. style={{ width: "120px" }}
  122. />
  123. );
  124. }
  125. },
  126. {
  127. title: "联系人QQ",
  128. dataIndex: "qq",
  129. key: "qq",
  130. render: (text, record, index) => {
  131. return (
  132. <Input
  133. value={record.qq}
  134. placeholder="联系人QQ"
  135. key={record.id}
  136. onChange={e => {
  137. record.qq = e.target.value;
  138. this.setState({ contactList: this.state.contactList });
  139. }}
  140. style={{ width: "120px" }}
  141. />
  142. );
  143. }
  144. },
  145. {
  146. title: "电子邮箱",
  147. dataIndex: "email",
  148. key: "email",
  149. render: (text, record, index) => {
  150. return (
  151. <Input
  152. value={record.email}
  153. placeholder="电子邮箱"
  154. key={record.id}
  155. onChange={e => {
  156. record.email = e.target.value;
  157. this.setState({ contactList: this.state.contactList });
  158. }}
  159. style={{ width: "120px" }}
  160. />
  161. );
  162. }
  163. },
  164. {
  165. title: "操作",
  166. dataIndex: "dels",
  167. key: "dels",
  168. render: (text, record, index) => {
  169. return (
  170. <div>
  171. {adminData.isSuperAdmin ? (
  172. <Popconfirm
  173. title="是否删除?"
  174. onConfirm={e => {
  175. this.confirmDelet(record);
  176. }}
  177. okText="删除"
  178. cancelText="不删除"
  179. >
  180. <Button
  181. style={{
  182. marginRight: "10px",
  183. color: "#ffffff",
  184. background: "#f00",
  185. border: "none"
  186. }}
  187. >
  188. 删除
  189. </Button>
  190. </Popconfirm>
  191. ) : (
  192. ""
  193. )}
  194. {record.name && record.mobile ? (
  195. <Button
  196. style={{
  197. marginRight: "10px",
  198. color: "#ffffff",
  199. background: "green",
  200. border: "none"
  201. }}
  202. onClick={e => {
  203. e.stopPropagation(), this.mainContact(record);
  204. }}
  205. >
  206. 设为主要联系人
  207. </Button>
  208. ) : (
  209. ""
  210. )}
  211. </div>
  212. );
  213. }
  214. }
  215. ]
  216. };
  217. },
  218. //tab2删除
  219. confirmDelet(e) {
  220. this.setState({
  221. loading: true
  222. });
  223. if (e.id) {
  224. $.ajax({
  225. method: "get",
  226. dataType: "json",
  227. crossDomain: false,
  228. url: globalConfig.context + "/api/admin/customer/deleteOneContact",
  229. data: {
  230. ocbId: e.id //删除的ID
  231. }
  232. }).done(
  233. function(data) {
  234. if (!data.error.length) {
  235. message.success("删除成功!");
  236. this.setState({
  237. loading: false
  238. });
  239. } else {
  240. message.warning(data.error[0].message);
  241. }
  242. this.contactLists();
  243. }.bind(this)
  244. );
  245. } else {
  246. this.contactLists();
  247. }
  248. },
  249. //选择主要联系人
  250. mainContact(record) {
  251. // this.setState({
  252. // loading: true
  253. // });
  254. // $.ajax({
  255. // method: "get",
  256. // dataType: "json",
  257. // crossDomain: false,
  258. // url: globalConfig.context + "/api/admin/customer/updateMainContact",
  259. // data: {
  260. // uid:this.props.data.id,
  261. // ocbId: record.id
  262. // }
  263. // }).done(function(data) {
  264. // if(!data.error.length) {
  265. // message.success('设为主要联系人成功!');
  266. // this.setState({
  267. // loading: false,
  268. // });
  269. // } else {
  270. // message.warning(data.error[0].message);
  271. // };
  272. // this.contactLists();
  273. // }.bind(this));
  274. this.state.contactList.forEach(item => {
  275. item.major = 0;
  276. });
  277. record.major = 1;
  278. // console.log(record);
  279. this.setState({
  280. contactList: this.state.contactList
  281. });
  282. console.log("....", this.state.contactList);
  283. },
  284. //tab2获取联系人详情
  285. contactLists(ids) {
  286. this.setState({
  287. loading: true
  288. });
  289. $.ajax({
  290. method: "get",
  291. dataType: "json",
  292. crossDomain: false,
  293. url: globalConfig.context + "/api/admin/customer/findCustomerContacts",
  294. data: {
  295. uid: ids || this.props.data.id //名称1
  296. },
  297. success: function(data) {
  298. let theArr = [];
  299. if (data.error.length || data.data.list == "") {
  300. if (data.error && data.error.length) {
  301. message.warning(data.error[0].message);
  302. }
  303. } else {
  304. for (let i = 0; i < data.data.length; i++) {
  305. let thisdata = data.data[i];
  306. theArr.push({
  307. key: i,
  308. id: thisdata.id,
  309. name: thisdata.name,
  310. mobile: thisdata.mobile,
  311. email: thisdata.email,
  312. qq: thisdata.qq,
  313. wechat: thisdata.wechat,
  314. depatrment: thisdata.depatrment,
  315. position: thisdata.position,
  316. major: thisdata.major
  317. });
  318. }
  319. }
  320. this.setState({
  321. contactList: theArr
  322. });
  323. }.bind(this)
  324. }).always(
  325. function() {
  326. this.setState({
  327. loading: false
  328. });
  329. }.bind(this)
  330. );
  331. },
  332. //新增
  333. //tab2新增联系人
  334. addcontact() {
  335. this.state.contactList.push({
  336. id: null,
  337. name: "",
  338. mobile: "",
  339. email: "",
  340. qq: "",
  341. wechat: "",
  342. depatrment: "",
  343. position: ""
  344. });
  345. this.setState({
  346. contactList: this.state.contactList
  347. });
  348. },
  349. //tab2联系人保存
  350. contactSave(e) {
  351. e.preventDefault();
  352. this.setState({
  353. loading: true
  354. });
  355. $.ajax({
  356. url: globalConfig.context + "/api/admin/customer/updateCustomerContacts",
  357. method: "post",
  358. data: {
  359. uid: this.props.data.id,
  360. contactList: JSON.stringify(this.state.contactList)
  361. }
  362. }).done(
  363. function(data) {
  364. this.setState({
  365. loading: false
  366. });
  367. if (!data.error.length) {
  368. message.success("保存成功!");
  369. this.props.closeDetail(false, true);
  370. } else {
  371. message.warning(data.error[0].message);
  372. }
  373. }.bind(this)
  374. );
  375. },
  376. componentWillMount() {
  377. this.contactLists(this.props.data.id);
  378. },
  379. detailsModal() {
  380. this.props.closeDetail(false, false);
  381. },
  382. componentWillReceiveProps(nextProps) {
  383. if (nextProps.data.id && nextProps.contactState) {
  384. this.contactLists(nextProps.data.id);
  385. }
  386. },
  387. render() {
  388. return (
  389. <div>
  390. <div className="clearfix">
  391. <Button
  392. className="ContactsList"
  393. type="primary"
  394. onClick={this.addcontact}
  395. >
  396. 新增
  397. </Button>
  398. </div>
  399. <div className="clearfix">
  400. <Spin spinning={this.state.loading}>
  401. <Form
  402. layout="horizontal"
  403. id="demand-form"
  404. onSubmit={this.contactSave}
  405. >
  406. <Table
  407. pagination={false}
  408. columns={this.state.ContactsLists}
  409. dataSource={this.state.contactList}
  410. />
  411. <Col span={24} offset={9} style={{ marginTop: "15px" }}>
  412. <Button type="primary" htmlType="submit">
  413. 保存
  414. </Button>
  415. <Button
  416. type="ghost"
  417. onClick={this.detailsModal}
  418. style={{ marginLeft: "100px" }}
  419. >
  420. 取消
  421. </Button>
  422. </Col>
  423. </Form>
  424. </Spin>
  425. </div>
  426. </div>
  427. );
  428. }
  429. });
  430. export default ContactPerson;