contacts.jsx 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458
  1. /*
  2. @author:李霆
  3. @update:2018/05/29
  4. @descript:复制粘贴,拿起来就是干!!
  5. */
  6. import React from 'react';
  7. import './contacts.less';
  8. import { Row, Col, Button, Card, Input, Form, message, Spin } from 'antd';
  9. import ajax from 'jquery/src/ajax/xhr.js';
  10. import $ from 'jquery/src/ajax';
  11. const FormItem = Form.Item;
  12. class Contancts extends React.Component {
  13. constructor(props) {
  14. super(props);
  15. this.state = {
  16. loading: false,
  17. contactData: [
  18. {
  19. id: '12',
  20. edit: false,
  21. name: '李霆1',
  22. department: '平台事业发展',
  23. post: '前端',
  24. photo: '18320746285',
  25. telPhoto: '5551456',
  26. qq: '265478954',
  27. email: '125468@qq.com',
  28. remarks: '这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字'
  29. },
  30. {
  31. id: '123',
  32. edit: false,
  33. name: '李霆2',
  34. department: '平台事业发展',
  35. post: '前端',
  36. photo: '18320746285',
  37. telPhoto: '5551456',
  38. qq: '265478954',
  39. email: '125468@qq.com',
  40. remarks: '这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字'
  41. }
  42. ],
  43. oldData: [
  44. {
  45. id: '12',
  46. edit: false,
  47. name: '李霆1',
  48. department: '平台事业发展',
  49. post: '前端',
  50. photo: '18320746285',
  51. telPhoto: '5551456',
  52. qq: '265478954',
  53. email: '125468@qq.com',
  54. remarks: '这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字'
  55. },
  56. {
  57. id: '123',
  58. edit: false,
  59. name: '李霆2',
  60. department: '平台事业发展',
  61. post: '前端',
  62. photo: '18320746285',
  63. telPhoto: '5551456',
  64. qq: '265478954',
  65. email: '125468@qq.com',
  66. remarks: '这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字'
  67. }
  68. ]
  69. };
  70. }
  71. loadData() {
  72. this.setState({
  73. loading: true
  74. });
  75. $.ajax({
  76. method: 'post',
  77. dataType: 'json',
  78. crossDomain: false,
  79. url: globalConfig.context + '/api/admin/customer/shuju',
  80. data: {},
  81. success: function(data) {
  82. if (data.error.length || data.data == '') {
  83. if (data.error && data.error.length) {
  84. message.warning(data.error[0].message);
  85. }
  86. } else {
  87. this.setState({
  88. contactData: data.data,
  89. oldData: data.data
  90. });
  91. }
  92. }.bind(this)
  93. }).always(
  94. function() {
  95. this.setState({
  96. loading: false
  97. });
  98. }.bind(this)
  99. );
  100. }
  101. //添加联系人
  102. addContact() {
  103. let contactData = this.state.contactData;
  104. contactData.push({
  105. id: '',
  106. name: '',
  107. edit: true,
  108. department: '',
  109. post: '',
  110. photo: '',
  111. telPhoto: '',
  112. qq: '',
  113. email: '',
  114. remarks: ''
  115. });
  116. this.setState({ contactData });
  117. }
  118. //保存函数
  119. saveFun(item, index) {
  120. console.log(item,index)
  121. let contactData = this.state.contactData;
  122. if(!item.name||!item.photo){
  123. message.warning('请填写带 * 号项!');
  124. return;
  125. }
  126. if (item.id) {
  127. this.state.oldData[index].id = item.id;
  128. this.state.oldData[index].name = item.name;
  129. this.state.oldData[index].department = item.department;
  130. this.state.oldData[index].post = item.post;
  131. this.state.oldData[index].photo = item.photo;
  132. this.state.oldData[index].telPhoto = item.telPhoto;
  133. this.state.oldData[index].qq = item.qq;
  134. this.state.oldData[index].email = item.email;
  135. this.state.oldData[index].remarks = item.remarks;
  136. } else {
  137. this.state.oldData.push({
  138. id: '',
  139. name: item.name,
  140. department: item.department,
  141. post: item.post,
  142. photo: item.photo,
  143. telPhoto: item.telPhoto,
  144. qq: item.qq,
  145. email: item.email,
  146. remarks: item.remarks
  147. });
  148. }
  149. console.log(this.state.oldData)
  150. return;
  151. this.setState({
  152. loading: true
  153. });
  154. $.ajax({
  155. method: 'post',
  156. dataType: 'json',
  157. url: globalConfig.context + '/api/admin/customer/updatePersonalCustomer',
  158. data: {
  159. contactData: JSON.stringify(this.state.oldData)
  160. }
  161. }).done(
  162. function(data) {
  163. this.setState({
  164. loading: false
  165. });
  166. if (!data.error.length) {
  167. message.success('保存成功!');
  168. this.loadData();
  169. } else {
  170. message.warning(data.error[0].message);
  171. }
  172. }.bind(this)
  173. );
  174. }
  175. //删除
  176. delFun(item, index) {
  177. let contactData = this.state.contactData;
  178. if (!item.id) {
  179. contactData.splice(index, 1);
  180. this.setState(contactData);
  181. message.success('删除成功');
  182. } else {
  183. this.setState({
  184. loading: true
  185. });
  186. $.ajax({
  187. method: 'post',
  188. dataType: 'json',
  189. url: globalConfig.context + '/api/admin/customer/del',
  190. data: {
  191. uid: item.id
  192. }
  193. }).done(
  194. function(data) {
  195. this.setState({
  196. loading: false
  197. });
  198. if (!data.error.length) {
  199. message.success('删除成功!');
  200. this.loadData();
  201. } else {
  202. message.warning(data.error[0].message);
  203. }
  204. }.bind(this)
  205. );
  206. }
  207. }
  208. //编辑时
  209. editFun(item, index) {
  210. this.state.oldData[index].edit = true;
  211. this.setState({
  212. contactData: this.state.oldData
  213. });
  214. }
  215. //取消编辑
  216. cancelFun(item,index){
  217. this.state.oldData[index].edit = false;
  218. this.setState({
  219. contactData:this.state.oldData
  220. })
  221. }
  222. componentWillMount() {
  223. this.loadData();
  224. }
  225. render() {
  226. const formItemLayout = {
  227. labelCol: {
  228. span: 6
  229. },
  230. wrapperCol: {
  231. span: 14
  232. }
  233. };
  234. return (
  235. <div className="contact-wrap">
  236. <Spin spinning={this.state.loading}>
  237. <Row>
  238. <Col span={4} offset={1}>
  239. <h4>常用联系人</h4>
  240. </Col>
  241. <Col span={6} offset={8}>
  242. <Button size="large" type="primary" onClick={this.addContact.bind(this)}>
  243. 添加常用联系人
  244. </Button>
  245. </Col>
  246. </Row>
  247. {this.state.contactData.map((item, index) => {
  248. return (
  249. <Row className="card" key={index}>
  250. <Card>
  251. <Row>
  252. <Col span={6}>
  253. <FormItem {...formItemLayout} label="姓名">
  254. {item.edit && (
  255. <Input
  256. style={{ width: '90%' }}
  257. placeholder="联系人姓名"
  258. value={item.name}
  259. onChange={(e) => {
  260. (item.name = e.target.value),
  261. this.setState({ contactData: this.state.contactData });
  262. }}
  263. />
  264. )}
  265. {item.edit ? (
  266. <span className="color-red"> * </span>
  267. ) : (
  268. <span>{item.name}</span>
  269. )}
  270. </FormItem>
  271. </Col>
  272. <Col span={6}>
  273. <FormItem {...formItemLayout} label="部门">
  274. {item.edit ? (
  275. <Input
  276. style={{ width: '90%' }}
  277. placeholder="联系人部门"
  278. value={item.department}
  279. onChange={(e) => {
  280. (item.department = e.target.value),
  281. this.setState({ contactData: this.state.contactData });
  282. }}
  283. />
  284. ) : (
  285. <span>{item.department}</span>
  286. )}
  287. </FormItem>
  288. </Col>
  289. <Col span={6}>
  290. <FormItem {...formItemLayout} label="职务">
  291. {item.edit ? (
  292. <Input
  293. style={{ width: '90%' }}
  294. placeholder="联系人职务"
  295. value={item.post}
  296. onChange={(e) => {
  297. (item.post = e.target.value),
  298. this.setState({ contactData: this.state.contactData });
  299. }}
  300. />
  301. ) : (
  302. <span>{item.post}</span>
  303. )}
  304. </FormItem>
  305. </Col>
  306. <Col span={6}>
  307. <FormItem {...formItemLayout} label="手机号码">
  308. {item.edit && (
  309. <Input
  310. style={{ width: '90%' }}
  311. placeholder="联系人手机"
  312. value={item.photo}
  313. onChange={(e) => {
  314. (item.photo = e.target.value),
  315. this.setState({ contactData: this.state.contactData });
  316. }}
  317. />
  318. )}
  319. {item.edit ? (
  320. <span className="color-red"> * </span>
  321. ) : (
  322. <span>{item.photo}</span>
  323. )}
  324. </FormItem>
  325. </Col>
  326. </Row>
  327. <Row>
  328. <Col span={6}>
  329. <FormItem {...formItemLayout} label="固定电话">
  330. {item.edit ? (
  331. <Input
  332. style={{ width: '90%' }}
  333. placeholder="联系人固定电话"
  334. value={item.telPhoto}
  335. onChange={(e) => {
  336. (item.telPhoto = e.target.value),
  337. this.setState({ contactData: this.state.contactData });
  338. }}
  339. />
  340. ) : (
  341. <span>{item.telPhoto}</span>
  342. )}
  343. </FormItem>
  344. </Col>
  345. <Col span={6}>
  346. <FormItem {...formItemLayout} label="QQ">
  347. {item.edit ? (
  348. <Input
  349. style={{ width: '90%' }}
  350. placeholder="联系人QQ"
  351. value={item.qq}
  352. onChange={(e) => {
  353. (item.qq = e.target.value),
  354. this.setState({ contactData: this.state.contactData });
  355. }}
  356. />
  357. ) : (
  358. <span>{item.qq}</span>
  359. )}
  360. </FormItem>
  361. </Col>
  362. <Col span={6}>
  363. <FormItem {...formItemLayout} label="邮箱">
  364. {item.edit ? (
  365. <Input
  366. style={{ width: '90%' }}
  367. placeholder="联系人电子邮箱"
  368. value={item.email}
  369. onChange={(e) => {
  370. (item.email = e.target.value),
  371. this.setState({ contactData: this.state.contactData });
  372. }}
  373. />
  374. ) : (
  375. <span>{item.email}</span>
  376. )}
  377. </FormItem>
  378. </Col>
  379. </Row>
  380. <Row>
  381. <Col span={18}>
  382. <FormItem labelCol={{ span: 2 }} wrapperCol={{ span: 20 }} label="备注">
  383. {item.edit ? (
  384. <Input
  385. type="textarea"
  386. placeholder="输入备注"
  387. rows={4}
  388. value={item.remarks}
  389. onChange={(e, pre) => {
  390. (item.remarks = e.target.value),
  391. this.setState({ contactData: this.state.contactData });
  392. }}
  393. />
  394. ) : (
  395. <span>{item.remarks}</span>
  396. )}
  397. </FormItem>
  398. </Col>
  399. <Col span={6}>
  400. {!item.edit ? (
  401. <Button
  402. type="primary"
  403. icon="edit"
  404. size="large"
  405. style={{ marginRight: 20 }}
  406. onClick={() => {
  407. this.editFun(item, index);
  408. }}
  409. />
  410. ) : (
  411. <Button
  412. type="primary"
  413. size="large"
  414. style={{ marginRight: 20 }}
  415. onClick={() => {
  416. this.saveFun(item, index);
  417. }}
  418. >
  419. 保存
  420. </Button>
  421. )}
  422. {item.edit &&
  423. item.id && (
  424. <Button
  425. size="large"
  426. style={{ marginRight: 20 }}
  427. onClick={() => {
  428. this.cancelFun(item, index);
  429. }}
  430. >
  431. 暂存
  432. </Button>
  433. )}
  434. <Button
  435. type="danger"
  436. size="large"
  437. onClick={() => {
  438. this.delFun(item, index);
  439. }}
  440. >
  441. 删除
  442. </Button>
  443. </Col>
  444. </Row>
  445. </Card>
  446. </Row>
  447. );
  448. })}
  449. </Spin>
  450. </div>
  451. );
  452. }
  453. }
  454. export default Contancts;