contacts.jsx 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457
  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. let contactData = this.state.contactData;
  121. if(!item.name||!item.photo){
  122. message.warning('请填写带 * 号项!');
  123. return;
  124. }
  125. if (item.id) {
  126. this.state.oldData[index].id = item.id;
  127. this.state.oldData[index].name = item.name;
  128. this.state.oldData[index].department = item.department;
  129. this.state.oldData[index].post = item.post;
  130. this.state.oldData[index].photo = item.photo;
  131. this.state.oldData[index].telPhoto = item.telPhoto;
  132. this.state.oldData[index].qq = item.qq;
  133. this.state.oldData[index].email = item.email;
  134. this.state.oldData[index].remarks = item.remarks;
  135. } else {
  136. this.state.oldData.push({
  137. id: '',
  138. name: item.name,
  139. department: item.department,
  140. post: item.post,
  141. photo: item.photo,
  142. telPhoto: item.telPhoto,
  143. qq: item.qq,
  144. email: item.email,
  145. remarks: item.remarks
  146. });
  147. }
  148. console.log(this.state.oldData)
  149. return;
  150. this.setState({
  151. loading: true
  152. });
  153. $.ajax({
  154. method: 'post',
  155. dataType: 'json',
  156. url: globalConfig.context + '/api/admin/customer/updatePersonalCustomer',
  157. data: {
  158. contactData: JSON.stringify(this.state.oldData)
  159. }
  160. }).done(
  161. function(data) {
  162. this.setState({
  163. loading: false
  164. });
  165. if (!data.error.length) {
  166. message.success('保存成功!');
  167. this.loadData();
  168. } else {
  169. message.warning(data.error[0].message);
  170. }
  171. }.bind(this)
  172. );
  173. }
  174. //删除
  175. delFun(item, index) {
  176. let contactData = this.state.contactData;
  177. if (!item.id) {
  178. contactData.splice(index, 1);
  179. this.setState(contactData);
  180. message.success('删除成功');
  181. } else {
  182. this.setState({
  183. loading: true
  184. });
  185. $.ajax({
  186. method: 'post',
  187. dataType: 'json',
  188. url: globalConfig.context + '/api/admin/customer/del',
  189. data: {
  190. uid: item.id
  191. }
  192. }).done(
  193. function(data) {
  194. this.setState({
  195. loading: false
  196. });
  197. if (!data.error.length) {
  198. message.success('删除成功!');
  199. this.loadData();
  200. } else {
  201. message.warning(data.error[0].message);
  202. }
  203. }.bind(this)
  204. );
  205. }
  206. }
  207. //编辑时
  208. editFun(item, index) {
  209. this.state.contactData[index].edit = true;
  210. this.setState({
  211. contactData: this.state.contactData
  212. });
  213. }
  214. //取消编辑
  215. cancelFun(item,index){
  216. this.state.contactData[index].edit = false;
  217. this.setState({
  218. contactData:this.state.contactData
  219. })
  220. }
  221. componentWillMount() {
  222. this.loadData();
  223. }
  224. render() {
  225. const formItemLayout = {
  226. labelCol: {
  227. span: 6
  228. },
  229. wrapperCol: {
  230. span: 14
  231. }
  232. };
  233. return (
  234. <div className="contact-wrap">
  235. <Spin spinning={this.state.loading}>
  236. <Row>
  237. <Col span={4} offset={1}>
  238. <h4>常用联系人</h4>
  239. </Col>
  240. <Col span={6} offset={8}>
  241. <Button size="large" type="primary" onClick={this.addContact.bind(this)}>
  242. 添加常用联系人
  243. </Button>
  244. </Col>
  245. </Row>
  246. {this.state.contactData.map((item, index) => {
  247. return (
  248. <Row className="card" key={index}>
  249. <Card>
  250. <Row>
  251. <Col span={6}>
  252. <FormItem {...formItemLayout} label="姓名">
  253. {item.edit && (
  254. <Input
  255. style={{ width: '90%' }}
  256. placeholder="联系人姓名"
  257. value={item.name}
  258. onChange={(e) => {
  259. (item.name = e.target.value),
  260. this.setState({ contactData: this.state.contactData });
  261. }}
  262. />
  263. )}
  264. {item.edit ? (
  265. <span className="color-red"> * </span>
  266. ) : (
  267. <span>{item.name}</span>
  268. )}
  269. </FormItem>
  270. </Col>
  271. <Col span={6}>
  272. <FormItem {...formItemLayout} label="部门">
  273. {item.edit ? (
  274. <Input
  275. style={{ width: '90%' }}
  276. placeholder="联系人部门"
  277. value={item.department}
  278. onChange={(e) => {
  279. (item.department = e.target.value),
  280. this.setState({ contactData: this.state.contactData });
  281. }}
  282. />
  283. ) : (
  284. <span>{item.department}</span>
  285. )}
  286. </FormItem>
  287. </Col>
  288. <Col span={6}>
  289. <FormItem {...formItemLayout} label="职务">
  290. {item.edit ? (
  291. <Input
  292. style={{ width: '90%' }}
  293. placeholder="联系人职务"
  294. value={item.post}
  295. onChange={(e) => {
  296. (item.post = e.target.value),
  297. this.setState({ contactData: this.state.contactData });
  298. }}
  299. />
  300. ) : (
  301. <span>{item.post}</span>
  302. )}
  303. </FormItem>
  304. </Col>
  305. <Col span={6}>
  306. <FormItem {...formItemLayout} label="手机号码">
  307. {item.edit && (
  308. <Input
  309. style={{ width: '90%' }}
  310. placeholder="联系人手机"
  311. value={item.photo}
  312. onChange={(e) => {
  313. (item.photo = e.target.value),
  314. this.setState({ contactData: this.state.contactData });
  315. }}
  316. />
  317. )}
  318. {item.edit ? (
  319. <span className="color-red"> * </span>
  320. ) : (
  321. <span>{item.photo}</span>
  322. )}
  323. </FormItem>
  324. </Col>
  325. </Row>
  326. <Row>
  327. <Col span={6}>
  328. <FormItem {...formItemLayout} label="固定电话">
  329. {item.edit ? (
  330. <Input
  331. style={{ width: '90%' }}
  332. placeholder="联系人固定电话"
  333. value={item.telPhoto}
  334. onChange={(e) => {
  335. (item.telPhoto = e.target.value),
  336. this.setState({ contactData: this.state.contactData });
  337. }}
  338. />
  339. ) : (
  340. <span>{item.telPhoto}</span>
  341. )}
  342. </FormItem>
  343. </Col>
  344. <Col span={6}>
  345. <FormItem {...formItemLayout} label="QQ">
  346. {item.edit ? (
  347. <Input
  348. style={{ width: '90%' }}
  349. placeholder="联系人QQ"
  350. value={item.qq}
  351. onChange={(e) => {
  352. (item.qq = e.target.value),
  353. this.setState({ contactData: this.state.contactData });
  354. }}
  355. />
  356. ) : (
  357. <span>{item.qq}</span>
  358. )}
  359. </FormItem>
  360. </Col>
  361. <Col span={6}>
  362. <FormItem {...formItemLayout} label="邮箱">
  363. {item.edit ? (
  364. <Input
  365. style={{ width: '90%' }}
  366. placeholder="联系人电子邮箱"
  367. value={item.email}
  368. onChange={(e) => {
  369. (item.email = e.target.value),
  370. this.setState({ contactData: this.state.contactData });
  371. }}
  372. />
  373. ) : (
  374. <span>{item.email}</span>
  375. )}
  376. </FormItem>
  377. </Col>
  378. </Row>
  379. <Row>
  380. <Col span={18}>
  381. <FormItem labelCol={{ span: 2 }} wrapperCol={{ span: 20 }} label="备注">
  382. {item.edit ? (
  383. <Input
  384. type="textarea"
  385. placeholder="输入备注"
  386. rows={4}
  387. value={item.remarks}
  388. onChange={(e, pre) => {
  389. (item.remarks = e.target.value),
  390. this.setState({ contactData: this.state.contactData });
  391. }}
  392. />
  393. ) : (
  394. <span>{item.remarks}</span>
  395. )}
  396. </FormItem>
  397. </Col>
  398. <Col span={6}>
  399. {!item.edit ? (
  400. <Button
  401. type="primary"
  402. icon="edit"
  403. size="large"
  404. style={{ marginRight: 20 }}
  405. onClick={() => {
  406. this.editFun(item, index);
  407. }}
  408. />
  409. ) : (
  410. <Button
  411. type="primary"
  412. size="large"
  413. style={{ marginRight: 20 }}
  414. onClick={() => {
  415. this.saveFun(item, index);
  416. }}
  417. >
  418. 保存
  419. </Button>
  420. )}
  421. {item.edit &&
  422. item.id && (
  423. <Button
  424. size="large"
  425. style={{ marginRight: 20 }}
  426. onClick={() => {
  427. this.cancelFun(item, index);
  428. }}
  429. >
  430. 暂存
  431. </Button>
  432. )}
  433. <Button
  434. type="danger"
  435. size="large"
  436. onClick={() => {
  437. this.delFun(item, index);
  438. }}
  439. >
  440. 删除
  441. </Button>
  442. </Col>
  443. </Row>
  444. </Card>
  445. </Row>
  446. );
  447. })}
  448. </Spin>
  449. </div>
  450. );
  451. }
  452. }
  453. export default Contancts;