contactPerson.jsx 16 KB

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