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