contactPerson.jsx 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635
  1. import React from "react";
  2. import {
  3. Table,
  4. Button,
  5. Spin,
  6. message,
  7. Popconfirm,
  8. Alert,
  9. Modal,
  10. Input,
  11. Cascader,
  12. } from "antd";
  13. const TextArea = Input.TextArea;
  14. import $ from "jquery/src/ajax";
  15. import AddContact from "../../../customer/NEW/signCustomer/followDetail/addContact";
  16. import "./index.less";
  17. import { areaSelect, getProvince } from "@/NewDicProvinceList";
  18. const ContactPerson = React.createClass({
  19. getInitialState() {
  20. return {
  21. major: 0,
  22. loading: false,
  23. addcontactModul: false,
  24. enterpriseName: "",
  25. ContactsLists: [
  26. {
  27. title: "姓名",
  28. dataIndex: "name",
  29. key: "name",
  30. render: (text, record, index) => {
  31. if (record.id) return <div>{text}</div>;
  32. },
  33. },
  34. {
  35. title: "联系人部门",
  36. dataIndex: "department",
  37. key: "department",
  38. render: (text, record, index) => {
  39. if (record.id) return <div>{text}</div>;
  40. },
  41. },
  42. {
  43. title: "联系人职务",
  44. dataIndex: "position",
  45. key: "position",
  46. render: (text, record, index) => {
  47. if (record.id) return <div>{text}</div>;
  48. },
  49. },
  50. {
  51. title: "主要联系人",
  52. dataIndex: "major",
  53. width: 100,
  54. key: "major",
  55. render: (text) => {
  56. return text == 1 ? "是" : "否";
  57. },
  58. },
  59. {
  60. title: "地区",
  61. dataIndex: "cityName",
  62. key: "cityName",
  63. render: (text, record, index) => {
  64. if (record.id) return <div>{text}</div>;
  65. },
  66. },
  67. {
  68. title: "手机号码",
  69. dataIndex: "mobile",
  70. key: "mobile",
  71. render: (text, record, index) => {
  72. if (record.id) return <div>{text}</div>;
  73. },
  74. },
  75. {
  76. title: "座机",
  77. dataIndex: "fixedTel",
  78. key: "fixedTel",
  79. render: (text, record, index) => {
  80. if (record.id) return <div>{text}</div>;
  81. },
  82. },
  83. {
  84. title: "微信",
  85. dataIndex: "wechat",
  86. key: "wechat",
  87. render: (text, record, index) => {
  88. if (record.id) return <div>{text}</div>;
  89. },
  90. },
  91. {
  92. title: "联系人QQ",
  93. dataIndex: "qq",
  94. key: "qq",
  95. render: (text, record, index) => {
  96. if (record.id) return <div>{text}</div>;
  97. },
  98. },
  99. {
  100. title: "电子邮箱",
  101. dataIndex: "email",
  102. key: "email",
  103. render: (text, record, index) => {
  104. if (record.id) return <div>{text}</div>;
  105. },
  106. },
  107. {
  108. title: "更新时间",
  109. dataIndex: "createTimes",
  110. key: "createTimes",
  111. render: (text, record, index) => {
  112. if (record.id) return <div>{text}</div>;
  113. },
  114. },
  115. {
  116. title: "跟进人",
  117. dataIndex: "aname",
  118. key: "aname",
  119. render: (text, record, index) => {
  120. if (record.id) return <div>{text}</div>;
  121. },
  122. },
  123. {
  124. title: "操作",
  125. dataIndex: "dels",
  126. key: "dels",
  127. render: (text, record, index) => {
  128. return (
  129. !this.props.isCustomerAdmin && (
  130. <div>
  131. {adminData.isSuperAdmin || !record.id ? (
  132. <Popconfirm
  133. title="是否删除?"
  134. onConfirm={(e) => {
  135. this.confirmDelet(record);
  136. }}
  137. okText="删除"
  138. cancelText="不删除"
  139. >
  140. <Button
  141. style={{
  142. marginRight: "10px",
  143. color: "#ffffff",
  144. background: "#f00",
  145. border: "none",
  146. }}
  147. >
  148. 删除
  149. </Button>
  150. </Popconfirm>
  151. ) : (
  152. ""
  153. )}
  154. {record.major != 1 ? (
  155. <Button
  156. style={{
  157. marginRight: "10px",
  158. color: "#ffffff",
  159. background: "green",
  160. border: "none",
  161. }}
  162. onClick={(e) => {
  163. e.stopPropagation(), this.mainContact(record);
  164. }}
  165. >
  166. 设为主要联系人
  167. </Button>
  168. ) : (
  169. ""
  170. )}
  171. </div>
  172. )
  173. );
  174. },
  175. },
  176. ],
  177. visible: "", //修改弹窗状态
  178. name: "",
  179. locationProvince: "",
  180. introduction: "",
  181. newname: "",
  182. dataArrar: [],
  183. newintroduction: "",
  184. };
  185. },
  186. //tab2删除
  187. confirmDelet(e) {
  188. this.setState({
  189. loading: true,
  190. });
  191. if (e.id) {
  192. $.ajax({
  193. method: "get",
  194. dataType: "json",
  195. crossDomain: false,
  196. url: globalConfig.context + "/api/admin/customer/deleteOneContact",
  197. data: {
  198. ocbId: e.id, //删除的ID
  199. },
  200. }).done(
  201. function (data) {
  202. if (!data.error.length) {
  203. message.success("删除成功!");
  204. this.setState({
  205. loading: false,
  206. });
  207. } else {
  208. message.warning(data.error[0].message);
  209. }
  210. this.contactLists();
  211. }.bind(this)
  212. );
  213. } else {
  214. this.contactLists();
  215. }
  216. },
  217. //选择主要联系人
  218. mainContact(record) {
  219. this.setState({
  220. loading: true,
  221. });
  222. $.ajax({
  223. method: "get",
  224. dataType: "json",
  225. crossDomain: false,
  226. url: globalConfig.context + "/api/admin/customer/updateMainContact",
  227. data: {
  228. uid: this.props.data.id,
  229. ocbId: record.id,
  230. },
  231. }).done(
  232. function (data) {
  233. if (!data.error.length) {
  234. message.success("设为主要联系人成功!");
  235. this.setState({
  236. loading: false,
  237. });
  238. } else {
  239. message.warning(data.error[0].message);
  240. }
  241. this.contactLists();
  242. }.bind(this)
  243. );
  244. this.state.contactList.forEach((item) => {
  245. item.major = 0;
  246. });
  247. record.major = 1;
  248. // console.log(record);
  249. this.setState({
  250. contactList: this.state.contactList,
  251. });
  252. },
  253. //tab2获取联系人详情
  254. contactLists(ids) {
  255. this.setState({
  256. loading: true,
  257. });
  258. $.ajax({
  259. method: "get",
  260. dataType: "json",
  261. crossDomain: false,
  262. url: globalConfig.context + "/api/admin/customer/findCustomerContacts",
  263. data: {
  264. uid: ids || this.props.data.id, //名称1
  265. },
  266. success: function (data) {
  267. let theArr = [];
  268. if (data.error.length || data.data.list == "") {
  269. if (data.error && data.error.length) {
  270. message.warning(data.error[0].message);
  271. }
  272. } else {
  273. for (let i = 0; i < data.data.length; i++) {
  274. let thisdata = data.data[i];
  275. theArr.push({
  276. key: i,
  277. id: thisdata.id,
  278. name: thisdata.name,
  279. mobile: thisdata.mobile,
  280. email: thisdata.email,
  281. qq: thisdata.qq,
  282. wechat: thisdata.wechat,
  283. department: thisdata.department,
  284. position: thisdata.position,
  285. major: thisdata.major,
  286. createTimes: thisdata.createTimes,
  287. fixedTel: thisdata.fixedTel,
  288. aname: thisdata.aname,
  289. cityName:
  290. (thisdata.provinceName || "") +
  291. (thisdata.cityName || "") +
  292. (thisdata.areaName || ""),
  293. });
  294. }
  295. }
  296. this.setState({
  297. contactList: theArr,
  298. });
  299. }.bind(this),
  300. }).always(
  301. function () {
  302. this.setState({
  303. loading: false,
  304. });
  305. }.bind(this)
  306. );
  307. },
  308. //新增
  309. //tab2新增联系人
  310. addcontact() {
  311. this.setState({
  312. addcontactModul: true,
  313. });
  314. },
  315. componentWillMount() {
  316. this.contactLists(this.props.data.id);
  317. this.setState({
  318. name: this.props.name,
  319. locationProvince:
  320. this.props.data.province +
  321. "-" +
  322. this.props.data.city +
  323. "-" +
  324. this.props.data.area,
  325. introduction: this.props.data.introduction,
  326. });
  327. },
  328. componentWillReceiveProps(nextProps) {
  329. // if (nextProps.data.id && nextProps.contactState) {
  330. if (nextProps.data.id) {
  331. this.contactLists(nextProps.data.id);
  332. }
  333. },
  334. onOk() {
  335. if (!this.state.newname) {
  336. message.warning("请输入渠道名称");
  337. return;
  338. }
  339. this.setState({
  340. loading: true,
  341. });
  342. $.ajax({
  343. url: globalConfig.context + "/api/admin/customer/updateUserName",
  344. method: "post",
  345. data: {
  346. uid: this.props.data.id,
  347. userName: this.state.newname,
  348. },
  349. }).done(
  350. function (data) {
  351. this.setState({
  352. loading: false,
  353. });
  354. if (data.error.length === 0) {
  355. message.success("恭喜您,更名成功!");
  356. this.setState({
  357. visible: "",
  358. name: this.state.newname,
  359. });
  360. } else {
  361. message.warning(data.error[0].message);
  362. }
  363. }.bind(this)
  364. );
  365. },
  366. updateDate() {
  367. const { dataArrar, visible, newintroduction } = this.state;
  368. if (dataArrar.length === 0 && visible == "city") {
  369. message.warning("请选择省-市-区");
  370. return;
  371. }
  372. if (!newintroduction && visible == "introduction") {
  373. message.warning("请输入简介");
  374. return;
  375. }
  376. this.setState({
  377. loading: true,
  378. });
  379. let data = {
  380. uid: this.props.data.id,
  381. };
  382. if (visible == "city") {
  383. data.province = dataArrar[0] || undefined;
  384. data.city = dataArrar[1] || undefined;
  385. data.area = dataArrar[2] || undefined;
  386. }
  387. if (visible == "introduction") {
  388. data.introduction = newintroduction;
  389. }
  390. $.ajax({
  391. url: globalConfig.context + "/api/admin/customer/updateUserDate",
  392. method: "post",
  393. data: data,
  394. }).done(
  395. function (data) {
  396. this.setState({
  397. loading: false,
  398. });
  399. if (data.error.length === 0) {
  400. message.success("恭喜您,更改成功!");
  401. this.setState({
  402. visible: "",
  403. });
  404. if (visible == "city") {
  405. this.setState({
  406. locationProvince: getProvince(
  407. dataArrar[0],
  408. dataArrar[1],
  409. dataArrar[2]
  410. ),
  411. });
  412. }
  413. if (visible == "introduction") {
  414. this.setState({
  415. introduction: newintroduction,
  416. });
  417. }
  418. } else {
  419. message.warning(data.error[0].message);
  420. }
  421. }.bind(this)
  422. );
  423. },
  424. render() {
  425. const { visible } = this.state;
  426. return (
  427. <div>
  428. <div className="clearfix">
  429. <Alert
  430. message="注:已保存信息不可修改,可新增正确的信息并设置为主要联系人"
  431. banner
  432. />
  433. <div
  434. style={{
  435. display: "flex",
  436. flexDirection: "row",
  437. justifyContent: "space-between",
  438. margin: "30px 60px 30px 0px",
  439. }}
  440. >
  441. <div
  442. style={{
  443. fontSize: 14,
  444. fontWeight: "bold",
  445. }}
  446. >
  447. <div style={{ padding: "5px 0" }}>
  448. <span>渠道名称:{this.state.name}</span>
  449. <Button
  450. type="primary"
  451. style={{ marginLeft: "20px" }}
  452. onClick={() => {
  453. this.setState({
  454. visible: "name",
  455. newname: "",
  456. });
  457. }}
  458. >
  459. 渠道更名
  460. </Button>
  461. </div>
  462. <div style={{ padding: "5px 0" }}>
  463. <span>
  464. 省-市-区:
  465. {this.state.locationProvince}
  466. </span>
  467. <Button
  468. type="primary"
  469. style={{ marginLeft: "20px" }}
  470. onClick={() => {
  471. this.setState({
  472. visible: "city",
  473. dataArrar: [],
  474. });
  475. }}
  476. >
  477. 修改
  478. </Button>
  479. </div>
  480. <div style={{ padding: "5px 0" }}>
  481. <span>渠道简介:{this.state.introduction}</span>
  482. <Button
  483. type="primary"
  484. style={{ marginLeft: "20px" }}
  485. onClick={() => {
  486. this.setState({
  487. visible: "introduction",
  488. newintroduction: [],
  489. });
  490. }}
  491. >
  492. 修改
  493. </Button>
  494. </div>
  495. </div>
  496. <Button
  497. className="ContactsList"
  498. type="primary"
  499. onClick={this.addcontact}
  500. >
  501. 新增联系人
  502. </Button>
  503. </div>
  504. </div>
  505. <div className="clearfix">
  506. <Spin spinning={this.state.loading}>
  507. <Table
  508. pagination={false}
  509. columns={this.state.ContactsLists}
  510. dataSource={this.state.contactList}
  511. />
  512. </Spin>
  513. </div>
  514. {/* 新增联系人 */}
  515. <AddContact
  516. addcontactModul={this.state.addcontactModul}
  517. uids={this.props.data.id}
  518. closeFollow={() => {
  519. this.setState(
  520. {
  521. addcontactModul: false,
  522. },
  523. () => {
  524. this.contactLists();
  525. }
  526. );
  527. }}
  528. />
  529. {/* 信息修改 */}
  530. <Modal
  531. footer={null}
  532. maskClosable={false}
  533. width={300}
  534. title={"信息修改"}
  535. visible={visible != ""}
  536. onCancel={() => {
  537. this.setState({
  538. visible: "",
  539. });
  540. }}
  541. >
  542. <div>
  543. {visible == "name" && (
  544. <div className="enterpriseNameContent">
  545. <div className="enterpriseNameItem">
  546. <div className="enterpriseNameTitle">更改前:</div>
  547. <div className="enterpriseNameValue">{this.state.name}</div>
  548. </div>
  549. <div className="enterpriseNameItem">
  550. <div className="enterpriseNameTitle">更改后:</div>
  551. <div className="enterpriseNameValue">
  552. <Input
  553. value={this.state.newname}
  554. onChange={(e) => {
  555. this.setState({
  556. newname: e.target.value,
  557. });
  558. }}
  559. />
  560. </div>
  561. </div>
  562. </div>
  563. )}
  564. {visible == "city" && (
  565. <div className="enterpriseNameContent">
  566. <div className="enterpriseNameItem">
  567. <div className="enterpriseNameTitle">更改前:</div>
  568. <div className="enterpriseNameValue">
  569. {this.state.locationProvince}
  570. </div>
  571. </div>
  572. <div className="enterpriseNameItem">
  573. <div className="enterpriseNameTitle">更改后:</div>
  574. <div className="enterpriseNameValue">
  575. <Cascader
  576. options={areaSelect()}
  577. placeholder="选择城市"
  578. onChange={(e, pre) => {
  579. this.setState({
  580. dataArrar: e,
  581. });
  582. }}
  583. />
  584. </div>
  585. </div>
  586. </div>
  587. )}
  588. {visible == "introduction" && (
  589. <div className="enterpriseNameContent">
  590. <div className="enterpriseNameItem">
  591. <div className="enterpriseNameTitle">更改前:</div>
  592. <div className="enterpriseNameValue">
  593. {this.state.introduction}
  594. </div>
  595. </div>
  596. <div className="enterpriseNameItem">
  597. <div className="enterpriseNameTitle">更改后:</div>
  598. <div className="enterpriseNameValue">
  599. <TextArea
  600. style={{ width: "200px" }}
  601. value={this.state.newintroduction}
  602. onChange={(e) => {
  603. this.setState({
  604. newintroduction: e.target.value,
  605. });
  606. }}
  607. />
  608. </div>
  609. </div>
  610. </div>
  611. )}
  612. <Popconfirm
  613. placement="top"
  614. title="确定要修改吗?"
  615. onConfirm={(e) => {
  616. e.stopPropagation();
  617. visible == "name" ? this.onOk() : this.updateDate();
  618. }}
  619. okText="确定"
  620. cancelText="取消"
  621. >
  622. <Button type="primary">确定修改</Button>
  623. </Popconfirm>
  624. </div>
  625. </Modal>
  626. </div>
  627. );
  628. },
  629. });
  630. export default ContactPerson;