contactPerson.jsx 20 KB

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