contactPerson.jsx 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531
  1. import React from "react";
  2. import {
  3. Form,
  4. Table,
  5. Button,
  6. Spin,
  7. message,
  8. Input,
  9. Modal,
  10. Popconfirm,
  11. Col,
  12. Row,
  13. Alert
  14. } from "antd";
  15. import ajax from "jquery/src/ajax/xhr.js";
  16. import $ from "jquery/src/ajax";
  17. const ContactPerson = React.createClass({
  18. getInitialState() {
  19. return {
  20. newContacts:[],
  21. nameModal: "",
  22. mobileModal: "",
  23. emailModal: "",
  24. qqModal: "",
  25. wechatModal: "",
  26. departmentModal: "",
  27. positionModal: "",
  28. fixedTelModal:"",
  29. loading: false,
  30. addcontactModul:false,
  31. ContactsLists: [
  32. {
  33. title: "姓名",
  34. dataIndex: "name",
  35. key: "name",
  36. render: (text, record, index) => {
  37. if(record.id) return <div>{text}</div>
  38. }
  39. },
  40. {
  41. title: "联系人部门",
  42. dataIndex: "department",
  43. key: "department",
  44. render: (text, record, index) => {
  45. if(record.id) return <div>{text}</div>
  46. }
  47. },
  48. {
  49. title: "联系人职务",
  50. dataIndex: "position",
  51. key: "position",
  52. render: (text, record, index) => {
  53. if(record.id) return <div>{text}</div>
  54. }
  55. },
  56. {
  57. title: "主要联系人",
  58. dataIndex: "major",
  59. width: 100,
  60. key: "major",
  61. render: text => {
  62. return text == 1 ? "是" : "否";
  63. }
  64. },
  65. {
  66. title: "地区",
  67. dataIndex: "cityName",
  68. key: "cityName",
  69. render: (text, record, index) => {
  70. if(record.id) return <div>{text}</div>
  71. }
  72. },
  73. {
  74. title: "手机号码",
  75. dataIndex: "mobile",
  76. key: "mobile",
  77. render: (text, record, index) => {
  78. if(record.id) return <div>{text}</div>
  79. }
  80. },
  81. {
  82. title: "座机",
  83. dataIndex: "fixedTel",
  84. key: "fixedTel",
  85. render: (text, record, index) => {
  86. if(record.id) return <div>{text}</div>
  87. }
  88. },
  89. {
  90. title: "微信",
  91. dataIndex: "wechat",
  92. key: "wechat",
  93. render: (text, record, index) => {
  94. if(record.id) return <div>{text}</div>
  95. }
  96. },
  97. {
  98. title: "联系人QQ",
  99. dataIndex: "qq",
  100. key: "qq",
  101. render: (text, record, index) => {
  102. if(record.id) return <div>{text}</div>
  103. }
  104. },
  105. {
  106. title: "电子邮箱",
  107. dataIndex: "email",
  108. key: "email",
  109. render: (text, record, index) => {
  110. if(record.id) return <div>{text}</div>
  111. }
  112. },
  113. {
  114. title: "更新时间",
  115. dataIndex: "createTimes",
  116. key: "createTimes",
  117. render: (text, record, index) => {
  118. if(record.id) return <div>{text}</div>
  119. }
  120. },
  121. {
  122. title: "跟进人",
  123. dataIndex: "aname",
  124. key: "aname",
  125. render: (text, record, index) => {
  126. if(record.id) return <div>{text}</div>
  127. }
  128. },
  129. {
  130. title: "操作",
  131. dataIndex: "dels",
  132. key: "dels",
  133. render: (text, record, index) => {
  134. return (
  135. <div>
  136. {adminData.isSuperAdmin || !record.id? (
  137. <Popconfirm
  138. title="是否删除?"
  139. onConfirm={e => {
  140. this.confirmDelet(record);
  141. }}
  142. okText="删除"
  143. cancelText="不删除"
  144. >
  145. <Button
  146. style={{
  147. marginRight: "10px",
  148. color: "#ffffff",
  149. background: "#f00",
  150. border: "none"
  151. }}
  152. >
  153. 删除
  154. </Button>
  155. </Popconfirm>
  156. ) : (
  157. ""
  158. )}
  159. {record.major!=1 ? (
  160. <Button
  161. style={{
  162. marginRight: "10px",
  163. color: "#ffffff",
  164. background: "green",
  165. border: "none"
  166. }}
  167. onClick={e => {
  168. e.stopPropagation(), this.mainContact(record);
  169. }}
  170. >
  171. 设为主要联系人
  172. </Button>
  173. ) : (
  174. ""
  175. )}
  176. </div>
  177. );
  178. }
  179. }
  180. ]
  181. };
  182. },
  183. //tab2删除
  184. confirmDelet(e) {
  185. this.setState({
  186. loading: true
  187. });
  188. if (e.id) {
  189. $.ajax({
  190. method: "get",
  191. dataType: "json",
  192. crossDomain: false,
  193. url: globalConfig.context + "/api/admin/customer/deleteOneContact",
  194. data: {
  195. ocbId: e.id //删除的ID
  196. }
  197. }).done(
  198. function(data) {
  199. if (!data.error.length) {
  200. message.success("删除成功!");
  201. this.setState({
  202. loading: false
  203. });
  204. } else {
  205. message.warning(data.error[0].message);
  206. }
  207. this.contactLists();
  208. }.bind(this)
  209. );
  210. } else {
  211. this.contactLists();
  212. }
  213. },
  214. //选择主要联系人
  215. mainContact(record) {
  216. this.setState({
  217. loading: true
  218. });
  219. $.ajax({
  220. method: "get",
  221. dataType: "json",
  222. crossDomain: false,
  223. url: globalConfig.context + "/api/admin/customer/updateMainContact",
  224. data: {
  225. uid:this.props.data.id,
  226. ocbId: record.id
  227. }
  228. }).done(function(data) {
  229. if(!data.error.length) {
  230. message.success('设为主要联系人成功!');
  231. this.setState({
  232. loading: false,
  233. });
  234. } else {
  235. message.warning(data.error[0].message);
  236. };
  237. this.contactLists();
  238. }.bind(this));
  239. this.state.contactList.forEach(item => {
  240. item.major = 0;
  241. });
  242. record.major = 1;
  243. // console.log(record);
  244. this.setState({
  245. contactList: this.state.contactList
  246. });
  247. },
  248. //tab2获取联系人详情
  249. contactLists(ids) {
  250. this.setState({
  251. loading: true
  252. });
  253. $.ajax({
  254. method: "get",
  255. dataType: "json",
  256. crossDomain: false,
  257. url: globalConfig.context + "/api/admin/customer/findCustomerContacts",
  258. data: {
  259. uid: ids || this.props.data.id //名称1
  260. },
  261. success: function(data) {
  262. let theArr = [];
  263. if (data.error.length || data.data.list == "") {
  264. if (data.error && data.error.length) {
  265. message.warning(data.error[0].message);
  266. }
  267. } else {
  268. for (let i = 0; i < data.data.length; i++) {
  269. let thisdata = data.data[i];
  270. theArr.push({
  271. key: i,
  272. id: thisdata.id,
  273. name: thisdata.name,
  274. mobile: thisdata.mobile,
  275. email: thisdata.email,
  276. qq: thisdata.qq,
  277. wechat: thisdata.wechat,
  278. department: thisdata.department,
  279. position: thisdata.position,
  280. major: thisdata.major,
  281. createTimes:thisdata.createTimes,
  282. fixedTel:thisdata.fixedTel,
  283. aname:thisdata.aname,
  284. cityName:thisdata.provinceName+thisdata.cityName+thisdata.areaName
  285. });
  286. }
  287. }
  288. this.setState({
  289. contactList: theArr
  290. });
  291. }.bind(this)
  292. }).always(
  293. function() {
  294. this.setState({
  295. loading: false
  296. });
  297. }.bind(this)
  298. );
  299. },
  300. //新增
  301. //tab2新增联系人
  302. addcontact() {
  303. this.setState({
  304. addcontactModul: true
  305. });
  306. },
  307. // 取消新增
  308. addcontactModulcancel(){
  309. this.setState({
  310. addcontactModul: false,
  311. nameModal: "",
  312. mobileModal: "",
  313. emailModal: "",
  314. qqModal: "",
  315. wechatModal: "",
  316. departmentModal: "",
  317. positionModal: "",
  318. fixedTelModal:"",
  319. });
  320. },
  321. //tab2联系人保存
  322. contactSave(e) {
  323. e.preventDefault();
  324. if(this.state.nameModal.length==0){
  325. message.error('请填写姓名');
  326. return
  327. }
  328. if (/.*[\u4e00-\u9fa5]+.*$/.test(this.state.nameModal)) {
  329. } else {
  330. message.error("请填写正确的姓名,且至少包含一个汉字");
  331. return;
  332. }
  333. if (this.state.mobileModal.length != 11) {
  334. message.error("请填写正确的手机号码");
  335. return;
  336. }
  337. if (this.state.departmentModal.length == 0) {
  338. message.error("请填写部门");
  339. return;
  340. }
  341. if (/.*[\u4e00-\u9fa5]+.*$/.test(this.state.departmentModal)) {
  342. } else {
  343. message.error("请填写正确的姓名,且至少包含一个汉字");
  344. return;
  345. }
  346. if (this.state.positionModal.length == 0) {
  347. message.error("请填写职位");
  348. return;
  349. }
  350. if (/.*[\u4e00-\u9fa5]+.*$/.test(this.state.positionModal)) {
  351. } else {
  352. message.error("请填写正确的姓名,且至少包含一个汉字");
  353. return;
  354. }
  355. this.setState({
  356. loading: true
  357. });
  358. $.ajax({
  359. url: globalConfig.context + "/api/admin/customer/addOneContact",
  360. method: "post",
  361. data: {
  362. uid: this.props.data.id,
  363. name: this.state.nameModal,
  364. mobile: this.state.mobileModal,
  365. email: this.state.emailModal,
  366. qq:this.state.qqModal,
  367. wechat: this.state.wechatModal,
  368. department: this.state.departmentModal,
  369. position: this.state.positionModal,
  370. fixedTel:this.state.fixedTelModal,
  371. }
  372. }).done(
  373. function(data) {
  374. this.setState({
  375. loading: false
  376. });
  377. if (!data.error.length) {
  378. message.success("保存成功!");
  379. // this.props.closeDetail(false, true);
  380. this.setState({
  381. addcontactModul: false,
  382. nameModal: "",
  383. mobileModal: "",
  384. emailModal: "",
  385. qqModal: "",
  386. wechatModal: "",
  387. departmentModal: "",
  388. positionModal: "",
  389. fixedTelModal:"",
  390. });
  391. this.contactLists()
  392. } else {
  393. message.warning(data.error[0].message);
  394. }
  395. }.bind(this)
  396. );
  397. },
  398. componentWillMount() {
  399. this.contactLists(this.props.data.id);
  400. },
  401. detailsModal() {
  402. this.props.closeDetail(false, false);
  403. },
  404. componentWillReceiveProps(nextProps) {
  405. if (nextProps.data.id && nextProps.contactState) {
  406. this.contactLists(nextProps.data.id);
  407. }
  408. },
  409. render() {
  410. return (
  411. <div>
  412. <div className="clearfix">
  413. <Alert message="注:已保存信息不可修改,可新增正确的信息并设置为主要联系人" banner />
  414. <span
  415. style={{
  416. fontSize: 14,
  417. fontWeight: "bold",
  418. marginTop: 20,
  419. display: "inline-block",
  420. }}
  421. >
  422. 公司名称:{this.props.name}
  423. </span>
  424. <Button
  425. className="ContactsList"
  426. type="primary"
  427. onClick={this.addcontact}
  428. >
  429. 新增联系人
  430. </Button>
  431. </div>
  432. <div className="clearfix">
  433. <Spin spinning={this.state.loading}>
  434. <Form
  435. layout="horizontal"
  436. id="demand-form"
  437. onSubmit={this.contactSave}
  438. >
  439. <Table
  440. pagination={false}
  441. columns={this.state.ContactsLists}
  442. dataSource={this.state.contactList}
  443. />
  444. {/* <Col span={24} offset={9} style={{ marginTop: "15px" }}>
  445. <Button type="primary" htmlType="submit">
  446. 保存
  447. </Button>
  448. <Button
  449. type="ghost"
  450. onClick={this.detailsModal}
  451. style={{ marginLeft: "100px" }}
  452. >
  453. 取消
  454. </Button>
  455. </Col> */}
  456. </Form>
  457. </Spin>
  458. </div>
  459. {/* 新增联系人 */}
  460. <Modal
  461. footer=''
  462. width='800px'
  463. title="新增联系人"
  464. visible={this.state.addcontactModul}
  465. onOk={this.contactSave}
  466. onCancel={this.addcontactModulcancel}
  467. >
  468. <Form layout="horizontal" onSubmit={this.submitcontactman} id="demand-form">
  469. <Spin spinning={this.state.loading}>
  470. <Row style={{ paddingLeft:'50px' }}>
  471. <Col span={2}><span style={{color:'red'}}>*</span>姓名:</Col>
  472. <Col span={8}>
  473. <Input required="required"
  474. onChange={(e) => {this.setState({ nameModal: e.target.value }) }} />
  475. </Col>
  476. <Col span={2} style={{ marginLeft: '50px' }}><span style={{color:'red'}}>*</span>手机:</Col>
  477. <Col span={8}>
  478. <Input required="required"
  479. onChange={(e) => { this.setState({ mobileModal: e.target.value }) }} />
  480. </Col>
  481. </Row>
  482. <Row style={{ marginTop: '20px' ,paddingLeft:'50px'}}>
  483. <Col span={2}><span style={{color:'red'}}>*</span>部门:</Col>
  484. <Col span={8}>
  485. <Input required="required"
  486. onChange={(e) => { this.setState({ departmentModal: e.target.value }) }} />
  487. </Col>
  488. <Col span={2} style={{ marginLeft: '50px' }}><span style={{color:'red'}}>*</span>职位:</Col>
  489. <Col span={8}>
  490. <Input required="required"
  491. onChange={(e) => { this.setState({ positionModal: e.target.value }) }} />
  492. </Col>
  493. </Row>
  494. <Row style={{ marginTop: '20px',paddingLeft:'50px' }}>
  495. <Col span={2}>微信:</Col>
  496. <Col span={8}>
  497. <Input
  498. onChange={(e) => { this.setState({ wechatModal: e.target.value }) }} />
  499. </Col>
  500. <Col span={2} style={{ marginLeft: '50px' }}>Q Q:</Col>
  501. <Col span={8}>
  502. <Input
  503. onChange={(e) => { this.setState({ qqModal: e.target.value }) }} />
  504. </Col>
  505. </Row>
  506. <Row style={{ marginTop: '20px',paddingLeft:'50px' }}>
  507. <Col span={2}>邮箱:</Col>
  508. <Col span={8}>
  509. <Input
  510. onChange={(e) => { this.setState({ emailModal: e.target.value }) }} />
  511. </Col>
  512. <Col span={2} style={{ marginLeft: '50px' }}>座机:</Col>
  513. <Col span={8}>
  514. <Input
  515. onChange={(e) => { this.setState({ fixedTelModal: e.target.value }) }} />
  516. </Col>
  517. </Row>
  518. <Row style={{ marginTop: '20px',paddingLeft:'50px' ,marginBottom:'50px'}}>
  519. <Button className="set-submit" type="primary" htmlType="submit" id="change_keep" style={{marginLeft:'60px'}} onClick={this.contactSave}>保存</Button>
  520. <Button className="set-submit" type="ghost" onClick={this.addcontactModulcancel} id='change_rem'>取消</Button>
  521. </Row>
  522. </Spin>
  523. </Form>
  524. </Modal>
  525. </div>
  526. );
  527. }
  528. });
  529. export default ContactPerson;