followDetail.jsx 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677
  1. import React from "react";
  2. import ajax from "jquery/src/ajax/xhr.js";
  3. import $ from "jquery/src/ajax";
  4. import {
  5. Modal,
  6. Form,
  7. layout,
  8. Radio,
  9. Button,
  10. Input,
  11. Spin,
  12. Table,
  13. Select,
  14. Popconfirm,
  15. message,
  16. } from "antd";
  17. import { intentionalService, newFollow, customerStatus } from "@/dataDic.js";
  18. import { getCompanyIntention } from "@/tools.js";
  19. const FormItem = Form.Item;
  20. import AddContact from "../signCustomer/followDetail/addContact";
  21. import BusName from "./followDetail/businessName.jsx";
  22. const FollowDetail = React.createClass({
  23. getInitialState() {
  24. return {
  25. visitModul: false,
  26. loading: false,
  27. data: [],
  28. businessName: "",
  29. projectName: "",
  30. busModul: false,
  31. intentionList: [
  32. {
  33. title: "业务名称",
  34. dataIndex: "businessGlossoryId",
  35. width: 120,
  36. key: "businessGlossoryId",
  37. render: (text, record, index) => {
  38. return (
  39. <div>
  40. {!record.id ? (
  41. <Select
  42. placeholder="选择业务名称"
  43. value={record.businessGlossoryId}
  44. onChange={(e) => {
  45. record.businessGlossoryId = e;
  46. this.setState({ data: this.state.data });
  47. }}
  48. >
  49. {this.props.categoryArr.map(function (item) {
  50. return (
  51. <Select.Option key={item.value}>
  52. {item.key}
  53. </Select.Option>
  54. );
  55. })}
  56. </Select>
  57. ) : (
  58. <span>{record.businessVarietiesName}</span>
  59. )}
  60. </div>
  61. );
  62. },
  63. },
  64. {
  65. title: "项目名称",
  66. dataIndex: "businessName",
  67. key: "businessName",
  68. width: 120,
  69. render: (text, record, index) => {
  70. return (
  71. <div>
  72. {!record.id ? (
  73. <div>
  74. <Button
  75. onClick={(e) => {
  76. e.stopPropagation(), this.businessFn(record, index);
  77. }}
  78. type="small"
  79. >
  80. {record.projectName}
  81. </Button>
  82. </div>
  83. ) : (
  84. <span>{record.businessProjectName}</span>
  85. )}
  86. </div>
  87. );
  88. },
  89. },
  90. {
  91. title: "最新进度",
  92. width: 120,
  93. dataIndex: "followSituation",
  94. key: "followSituation",
  95. render: (text, record, index) => {
  96. if (text == 5 && !record.isEdit) {
  97. return newFollow.map(function (item) {
  98. if (item.value == text) {
  99. return item.key;
  100. }
  101. });
  102. } else {
  103. return (
  104. <Select
  105. placeholder="选择最新进度"
  106. value={record.followSituation}
  107. onChange={(e) => {
  108. record.followSituation = e;
  109. record.isEdit = true;
  110. this.setState({ data: this.state.data });
  111. }}
  112. >
  113. {newFollow
  114. .filter((v) => {
  115. return v.value !== "5";
  116. })
  117. .map(function (item) {
  118. return (
  119. <Select.Option key={item.value}>
  120. {item.key}
  121. </Select.Option>
  122. );
  123. })}
  124. </Select>
  125. );
  126. }
  127. },
  128. },
  129. {
  130. title: "最新状态",
  131. width: 120,
  132. dataIndex: "customerStatus",
  133. key: "customerStatus",
  134. render: (text, record, index) => {
  135. if (record.followSituation == 5 && !record.isEdit) {
  136. return customerStatus.map(function (item) {
  137. if (item.value == text) {
  138. return item.key;
  139. }
  140. });
  141. } else {
  142. return (
  143. <Select
  144. value={record.customerStatus}
  145. placeholder="选择最新状态"
  146. onChange={(e) => {
  147. record.customerStatus = e;
  148. this.setState({ data: this.state.data });
  149. }}
  150. >
  151. {customerStatus.map(function (item) {
  152. return (
  153. <Select.Option key={item.value}>{item.key}</Select.Option>
  154. );
  155. })}
  156. </Select>
  157. );
  158. }
  159. },
  160. },
  161. {
  162. title: "跟进说明",
  163. width: 120,
  164. dataIndex: "remarks",
  165. key: "remarks",
  166. render: (text, record, index) => {
  167. if (record.followSituation == 5 && !record.isEdit) {
  168. return text;
  169. } else {
  170. return (
  171. <Input
  172. value={record.remarks}
  173. placeholder="跟进说明"
  174. onChange={(e) => {
  175. record.remarks = e.target.value;
  176. this.setState({ data: this.state.data });
  177. }}
  178. />
  179. );
  180. }
  181. },
  182. },
  183. {
  184. title: "操作",
  185. width: 120,
  186. dataIndex: "rrr",
  187. key: "rrr",
  188. render: (text, record, index) => {
  189. return (
  190. <div>
  191. {!record.id && (
  192. <Popconfirm
  193. title="是否删除?"
  194. onConfirm={(e) => {
  195. this.intentionDelet(record, index);
  196. }}
  197. okText="删除"
  198. cancelText="不删除"
  199. >
  200. <Button
  201. style={{
  202. marginRight: "10px",
  203. color: "#ffffff",
  204. background: "#f00",
  205. border: "none",
  206. }}
  207. >
  208. 删除
  209. </Button>
  210. </Popconfirm>
  211. )}
  212. </div>
  213. );
  214. },
  215. },
  216. ],
  217. };
  218. },
  219. //选择子项目
  220. businessFn(record, index) {
  221. if (!record.businessGlossoryId) {
  222. message.warn("请先选择业务名称!");
  223. return;
  224. }
  225. this.setState({
  226. businessId: record.businessGlossoryId,
  227. busModul: true,
  228. index: index,
  229. addcontactModul: false,
  230. });
  231. },
  232. closeBus(datas, e, s) {
  233. this.state.addcontactModul = e;
  234. this.state.busModul = false;
  235. if (s) {
  236. this.state.data[this.state.index].businessName = datas.id;
  237. this.state.data[this.state.index].projectName = datas.name;
  238. this.setState({
  239. busModul: false,
  240. data: this.state.data,
  241. });
  242. }
  243. },
  244. //拜访意向服务列表单个删除
  245. intentionDelet(e, index) {
  246. let deteluserBusinessList = this.state.data.splice(index, 1);
  247. this.setState({
  248. selectedRowKeys: [],
  249. });
  250. },
  251. //拜访modul函数
  252. visitOk(e) {
  253. this.setState({
  254. addcontactModul: false,
  255. visitModul: false,
  256. });
  257. },
  258. visitCancel(e) {
  259. this.setState({
  260. addcontactModul: false,
  261. visitModul: false,
  262. });
  263. this.props.closeDesc(false, false);
  264. },
  265. //获取联系人下拉框
  266. getNewWoman(ids) {
  267. this.state.data = [];
  268. $.ajax({
  269. method: "get",
  270. dataType: "json",
  271. crossDomain: false,
  272. url: globalConfig.context + "/api/admin/customer/findCustomerContacts",
  273. data: {
  274. uid: ids,
  275. },
  276. success: function (data) {
  277. let theArr = [];
  278. let thedata = data.data;
  279. if (!thedata) {
  280. if (data.error && data.error.length) {
  281. message.warning(data.error[0].message);
  282. }
  283. thedata = {};
  284. }
  285. var telNum = [];
  286. var contactIds = [];
  287. thedata.map(function (item, index) {
  288. contactIds.push(thedata[index].id);
  289. telNum.push(thedata[index].mobile);
  290. });
  291. for (let item in data.data) {
  292. let theData = data.data[item];
  293. theData.name != "***" &&
  294. theArr.push(
  295. <Select.Option value={item} key={theData.name}>
  296. {theData.name}
  297. </Select.Option>
  298. );
  299. }
  300. this.setState({
  301. contactsIdArr: thedata,
  302. telNum: telNum,
  303. orderStatusOption: theArr,
  304. });
  305. }.bind(this),
  306. }).always(
  307. function () {
  308. this.setState({
  309. deletId: ids,
  310. loading: false,
  311. });
  312. }.bind(this)
  313. );
  314. },
  315. //刷新新增拜访记录刷新
  316. deletelist(e) {
  317. this.setState({
  318. loading: true,
  319. });
  320. $.ajax({
  321. method: "get",
  322. dataType: "json",
  323. url: globalConfig.context + "/api/admin/customer/toAddFollowOnHistory",
  324. data: {
  325. uid: e,
  326. },
  327. success: function (data) {
  328. let listArr = [];
  329. let thedata = data.data;
  330. if (!thedata) {
  331. if (data.error && data.error.length) {
  332. message.warning(data.error[0].message);
  333. }
  334. thedata = {};
  335. }
  336. for (let i = 0; i < data.data.userBusinessList.length; i++) {
  337. let thisdata = data.data.userBusinessList[i];
  338. listArr.push({
  339. id: thisdata.businessId,
  340. businessName: thisdata.businessProjectId,
  341. businessGlossoryId: i,
  342. businessVarietiesName: thisdata.businessVarietiesName,
  343. businessProjectName: thisdata.businessProjectName,
  344. followSituation: String(thisdata.followSituation),
  345. customerStatus: String(thisdata.customerStatus),
  346. remarks: thisdata.remarks,
  347. });
  348. }
  349. this.setState({
  350. contacts: thedata.contacts,
  351. uid: thedata.uid,
  352. data: listArr,
  353. followTime: thedata.followTime,
  354. remarks: thedata.remarks,
  355. });
  356. }.bind(this),
  357. }).always(
  358. function () {
  359. this.setState({
  360. loading: false,
  361. });
  362. }.bind(this)
  363. );
  364. },
  365. //当选择联系人的列表变化时,则执行
  366. hundleName(e) {
  367. let changNub = this.state.telNum[e];
  368. this.setState({
  369. nub: this.state.telNum[e],
  370. lastName: e,
  371. });
  372. },
  373. //点击添加联系人
  374. newContacts() {
  375. this.setState({
  376. busModul: false,
  377. uids: this.state.uid,
  378. addcontactModul: true,
  379. });
  380. },
  381. //页面刷新
  382. closeFollow(e, s) {
  383. this.state.addcontactModul = false;
  384. this.state.visitModul = true;
  385. if (s) {
  386. this.getNewWoman(this.props.followData.id);
  387. this.deletelist(this.props.followData.id);
  388. }
  389. },
  390. //详情保存
  391. visitSubmit(e) {
  392. e.preventDefault();
  393. let GlossoryId = false;
  394. this.state.data.map(function (item) {
  395. if (!item.followSituation || !item.customerStatus || !item.businessName) {
  396. GlossoryId = true;
  397. }
  398. });
  399. if (this.state.contactType == undefined) {
  400. message.warning("请选择拜访方式");
  401. return false;
  402. }
  403. if (this.state.lastName == undefined) {
  404. message.warning("请选择联系人");
  405. return false;
  406. }
  407. if (this.state.result.length < 10) {
  408. message.warning("备注不少于10个字符!");
  409. return false;
  410. }
  411. if (this.state.data.length && GlossoryId) {
  412. message.warning("项目名称/最新进度/最新状态不能为空!");
  413. return false;
  414. }
  415. let dataList = this.state.data,
  416. idsList = [];
  417. dataList.map((item, index) => {
  418. idsList.push({
  419. businessId: item.id || "",
  420. businessProjectId: item.businessName,
  421. customerStatus: item.customerStatus,
  422. followSituation: item.followSituation,
  423. remarks: item.remarks || "",
  424. });
  425. });
  426. this.setState({
  427. loading: true,
  428. });
  429. let contactsId = "";
  430. let conts = this.state.lastName;
  431. contactsId = this.state.contactsIdArr[conts].id;
  432. //新增
  433. $.ajax({
  434. method: "post",
  435. dataType: "json",
  436. url: globalConfig.context + "/api/admin/customer/addFollow",
  437. data: {
  438. userBusinessList: JSON.stringify(idsList),
  439. uid: this.state.uid,
  440. ocbId: contactsId,
  441. contactType: this.state.contactType,
  442. result: this.state.result,
  443. followTime: this.state.followTime,
  444. },
  445. }).done(
  446. function (data) {
  447. this.setState({
  448. loading: false,
  449. });
  450. if (!data.error.length) {
  451. message.success("保存成功!");
  452. this.props.closeDesc(false, true);
  453. this.visitCancel();
  454. } else {
  455. message.warning(data.error[0].message);
  456. }
  457. }.bind(this)
  458. );
  459. },
  460. //添加新业务
  461. addNew() {
  462. this.state.data.push({
  463. isEdit: true,
  464. projectName: "选择",
  465. businessName: "",
  466. customerStatus: undefined,
  467. businessGlossoryId: undefined,
  468. followSituation: undefined,
  469. remarks: "",
  470. });
  471. this.setState({
  472. addcontactModul: false,
  473. data: this.state.data,
  474. });
  475. },
  476. componentWillReceiveProps(nextProps) {
  477. if (nextProps.visitModul && nextProps.followData.id) {
  478. this.setState({
  479. result: "",
  480. contactType: undefined,
  481. visitModul: true,
  482. loading: true,
  483. lastName: undefined,
  484. nub: "",
  485. busModul: false,
  486. addcontactModul: false,
  487. });
  488. this.getNewWoman(nextProps.followData.id);
  489. this.deletelist(nextProps.followData.id);
  490. }
  491. },
  492. render() {
  493. const formItemLayout = {
  494. labelCol: { span: 8 },
  495. wrapperCol: { span: 14 },
  496. };
  497. return (
  498. <div>
  499. <Modal
  500. maskClosable={false}
  501. className="customeDetails"
  502. footer=""
  503. title="新增渠道跟进"
  504. width="1000px"
  505. visible={this.state.visitModul}
  506. onOk={this.visitOk}
  507. onCancel={this.visitCancel}
  508. >
  509. <Form
  510. layout="horizontal"
  511. id="demand-form"
  512. onSubmit={this.visitSubmit}
  513. >
  514. <Spin spinning={this.state.loading}>
  515. <div className="clearfix">
  516. <FormItem
  517. labelCol={{ span: 4 }}
  518. wrapperCol={{ span: 20 }}
  519. label="跟进方式"
  520. >
  521. <Radio.Group
  522. value={this.state.contactType}
  523. onChange={(e) => {
  524. this.setState({ contactType: e.target.value });
  525. }}
  526. >
  527. {/*<Radio value={0}>外出</Radio>*/}
  528. <Radio value={1}>电话</Radio>
  529. <Radio value={2}>QQ</Radio>
  530. <Radio value={3}>微信</Radio>
  531. <Radio value={4}>邮箱</Radio>
  532. <Radio value={6}>来访面谈</Radio>
  533. </Radio.Group>
  534. <span className="mandatory" style={{ color: "red" }}>
  535. *
  536. </span>
  537. </FormItem>
  538. <div className="clearfix">
  539. {this.state.contacts ? (
  540. <span></span>
  541. ) : (
  542. <FormItem
  543. className="half-item"
  544. {...formItemLayout}
  545. label="联系人"
  546. >
  547. <Select
  548. placeholder="选择联系人"
  549. style={{ width: 140 }}
  550. value={this.state.lastName}
  551. onChange={this.hundleName}
  552. >
  553. {this.state.orderStatusOption}
  554. </Select>
  555. <span className="mandatory" style={{ color: "red" }}>
  556. {" "}
  557. *
  558. </span>
  559. </FormItem>
  560. )}
  561. <FormItem className="half-item" {...formItemLayout}>
  562. <Button
  563. type="primary"
  564. onClick={this.newContacts}
  565. style={{ marginLeft: "100px" }}
  566. >
  567. 添加新联系人
  568. </Button>
  569. </FormItem>
  570. <FormItem
  571. className="half-item"
  572. {...formItemLayout}
  573. label="联系电话"
  574. >
  575. <span>{this.state.nub}</span>
  576. </FormItem>
  577. <FormItem
  578. className="half-item"
  579. {...formItemLayout}
  580. label="跟进时间"
  581. >
  582. <span>{this.state.followTime}</span>
  583. </FormItem>
  584. </div>
  585. <div className="clearfix">
  586. <FormItem
  587. labelCol={{ span: 4 }}
  588. wrapperCol={{ span: 16 }}
  589. label="跟进备注"
  590. >
  591. <span className="mandatory" style={{ color: "red" }}>
  592. *
  593. <span style={{ marginLeft: "10px" }}>
  594. 客户跟进情况描述(企业上年度销售额,互动情况等.)
  595. </span>
  596. </span>
  597. <Input
  598. type="textarea"
  599. rows={4}
  600. value={this.state.result}
  601. placeholder="渠道跟进"
  602. required="required"
  603. onChange={(e) => {
  604. this.setState({ result: e.target.value });
  605. }}
  606. />
  607. </FormItem>
  608. </div>
  609. <div className="clearfix">
  610. <div
  611. style={{
  612. fontSize: "18px",
  613. marginLeft: "100px",
  614. marginTop: "15px",
  615. marginBottom: "10px",
  616. }}
  617. >
  618. 业务意向
  619. <Button
  620. onClick={this.addNew}
  621. style={{
  622. marginLeft: "420px",
  623. background: "green",
  624. color: "#ffffff",
  625. }}
  626. >
  627. 添加新业务
  628. </Button>
  629. </div>
  630. <div className="clearfix">
  631. <Spin spinning={this.state.loading}>
  632. <Table
  633. size="middle"
  634. rowKey={(record) => record.id}
  635. pagination={false}
  636. columns={this.state.intentionList}
  637. dataSource={this.state.data}
  638. />
  639. </Spin>
  640. </div>
  641. </div>
  642. </div>
  643. <FormItem wrapperCol={{ span: 12, offset: 6 }}>
  644. <Button
  645. type="primary"
  646. size="large"
  647. htmlType="submit"
  648. style={{ marginRight: "150px", marginTop: "20px" }}
  649. >
  650. 保存
  651. </Button>
  652. <Button size="large" onClick={this.visitCancel}>
  653. 取消
  654. </Button>
  655. </FormItem>
  656. </Spin>
  657. </Form>
  658. </Modal>
  659. <AddContact
  660. addcontactModul={this.state.addcontactModul}
  661. uids={this.state.uids}
  662. closeFollow={this.closeFollow}
  663. />
  664. <BusName
  665. businessId={this.state.businessId}
  666. mid={this.props.followData ? this.props.followData.id : ""}
  667. busModul={this.state.busModul}
  668. closeBus={this.closeBus}
  669. />
  670. </div>
  671. );
  672. },
  673. });
  674. export default FollowDetail;