index.jsx 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668
  1. import React, { Component } from "react";
  2. import {
  3. Button,
  4. DatePicker,
  5. Form,
  6. Input,
  7. message,
  8. Select,
  9. Spin,
  10. Table,
  11. Tabs,
  12. Tooltip
  13. } from "antd";
  14. import moment from "moment";
  15. import ShowModalDiv from "@/showModal.jsx";
  16. import { ShowModal, getContactType } from "@/tools.js";
  17. import { ChooseList } from "../../../order/orderNew/chooseList";
  18. import $ from "jquery/src/ajax";
  19. import IntentionDetail from "../../NEW/intentionCustomer/intentionDetail/intentionDetail";
  20. import { getProvince } from '@/NewDicProvinceList';
  21. import Cascaders from "../../../../common/cascaders";
  22. const { TabPane } = Tabs;
  23. const { RangePicker } = DatePicker;
  24. class FollowUpSummary extends Component {
  25. constructor(props) {
  26. super(props);
  27. this.state = {
  28. loading: false,
  29. changeList: undefined,// 子组件改变的表格title数组
  30. columns: [
  31. {
  32. title: "客户名称",
  33. dataIndex: "nickname",
  34. key: "nickname",
  35. render: text => {
  36. return (
  37. <Tooltip title={text}>
  38. <div
  39. // style={{
  40. // maxWidth: '150px',
  41. // overflow: 'hidden',
  42. // textOverflow: "ellipsis",
  43. // whiteSpace: 'nowrap',
  44. // }}
  45. >{text}</div>
  46. </Tooltip>
  47. )
  48. }
  49. },
  50. {
  51. title: '客户类型',
  52. dataIndex: 'shareType',
  53. key: 'shareType',
  54. render: text => {
  55. // 0-私有 1-公共 2 签单 3外联
  56. return (
  57. text === 0 ? '私有客户' :
  58. text === 1 ? '公共客户' :
  59. text === 2 ? '签单客户' :
  60. text === 3 ? '外联客户' : ''
  61. )
  62. }
  63. },
  64. {
  65. title: '客户初始时间',
  66. dataIndex: 'startTimes',
  67. key: 'startTimes',
  68. },
  69. {
  70. title: "跟进方式",
  71. dataIndex: "contactType",
  72. key: "contactType",
  73. render: (text) => {
  74. return getContactType(text);
  75. },
  76. },
  77. {
  78. title: "限定项目名称",
  79. dataIndex: "projectName",
  80. key: "projectName",
  81. width: 160,
  82. },
  83. {
  84. title: "跟进人",
  85. dataIndex: "followName",
  86. key: "followName",
  87. },
  88. {
  89. title: "跟进类型",
  90. dataIndex: "type",
  91. key: "type",
  92. render: (text, record) => {
  93. return (
  94. <div>
  95. {["客户跟进", "限定项目跟进"][text]}
  96. </div>
  97. );
  98. },
  99. },
  100. {
  101. title: "跟进部门",
  102. dataIndex: "followDep",
  103. key: "followDep",
  104. },
  105. {
  106. title: "跟进说明",
  107. dataIndex: "result",
  108. key: "result",
  109. render: (text, record) => {
  110. return (
  111. <Tooltip placement="topLeft" title={<div style={{ wordBreak: "break-all" }}>{text}</div>}>
  112. <div
  113. style={{
  114. // cursor: "pointer",
  115. // width: '150px',
  116. // whiteSpace: 'nowrap',
  117. // overflow: 'hidden',
  118. // textOverflow: 'ellipsis',
  119. }}
  120. >
  121. {text}
  122. </div>
  123. </Tooltip>
  124. );
  125. },
  126. },
  127. {
  128. title: "跟进时间",
  129. dataIndex: "followTimes",
  130. key: "followTimes",
  131. },
  132. {
  133. title: "次数",
  134. dataIndex: "followCount",
  135. key: "followCount",
  136. },
  137. {
  138. title: "指导意见",
  139. dataIndex: "guidance",
  140. key: "guidance",
  141. render: (text, record) => {
  142. return (
  143. <Tooltip placement="topLeft" title={<div style={{ wordBreak: "break-all" }}>{(record.guidanceName ? '(' + record.guidanceName + ')' : '') + text}</div>}>
  144. <div
  145. style={{
  146. // cursor: "pointer",
  147. // width: '150px',
  148. // whiteSpace: 'nowrap',
  149. // overflow: 'hidden',
  150. // textOverflow: 'ellipsis',
  151. }}
  152. >
  153. {record.guidanceName ? '(' + record.guidanceName + ')' : null}
  154. {text}
  155. </div>
  156. </Tooltip>
  157. );
  158. },
  159. },
  160. {
  161. title: "指导时间",
  162. dataIndex: "guidanceTimes",
  163. key: "guidanceTimes",
  164. render: (text) => {
  165. return (
  166. <span>{text ? text : ''}</span>
  167. )
  168. }
  169. }
  170. ],
  171. dataSource: [],
  172. pagination: {
  173. defaultCurrent: 1,
  174. defaultPageSize: 10,
  175. showQuickJumper: true,
  176. pageSize: 10,
  177. onChange: function (page) {
  178. this.loadData(page);
  179. }.bind(this),
  180. showTotal: function (total) {
  181. return "共" + total + "条数据";
  182. },
  183. },
  184. releaseDate: [],
  185. releaseDate1: [],
  186. releaseDate2: [],
  187. userName: undefined,
  188. followName: undefined,
  189. userType: undefined,
  190. contactType: undefined,
  191. deps: undefined,
  192. shiroType: props.shiroType,
  193. }
  194. this.reset = this.reset.bind(this);
  195. this.loadData = this.loadData.bind(this);
  196. this.selectSuperId = this.selectSuperId.bind(this);
  197. this.category = this.category.bind(this);
  198. this.closeDesc = this.closeDesc.bind(this);
  199. this.tableRowClick = this.tableRowClick.bind(this);
  200. this.export = this.export.bind(this);
  201. this.changeList = this.changeList.bind(this);
  202. }
  203. componentWillReceiveProps(prevProps) {
  204. if (prevProps.shiroType !== this.state.shiroType) {
  205. this.setState({
  206. shiroType: prevProps.shiroType
  207. }, () => {
  208. this.reset();
  209. // this.selectSuperId();
  210. })
  211. }
  212. }
  213. componentDidMount() {
  214. this.props.shiroType != 2 && this.loadData();
  215. // this.selectSuperId();
  216. }
  217. loadData(pageNo) {
  218. if (this.state.userName == undefined &&
  219. this.state.followName == undefined &&
  220. this.state.userType == undefined &&
  221. this.state.contactType == undefined &&
  222. this.state.deps == undefined &&
  223. this.state.releaseDate.length == 0 &&
  224. this.state.releaseDate1.length == 0 &&
  225. this.state.releaseDate2.length == 0 &&
  226. this.props.shiroType == 2
  227. ) {
  228. message.warning("请先填写筛选条件!");
  229. return
  230. }
  231. let data = {
  232. pageNo: pageNo || 1,
  233. pageSize: this.state.pagination.pageSize,
  234. userName: this.state.userName || undefined,
  235. followName: this.state.followName || undefined,
  236. userType: isNaN(parseInt(this.state.userType)) ? undefined : this.state.userType,
  237. contactType: isNaN(parseInt(this.state.contactType)) ? undefined : this.state.contactType,
  238. deps: this.state.deps || undefined,
  239. followStartTime: this.state.releaseDate[0] ? this.state.releaseDate[0] : undefined,
  240. followEndTime: this.state.releaseDate[1] ? this.state.releaseDate[1] : undefined,
  241. createStartTime: this.state.releaseDate1[0] ? this.state.releaseDate1[0] : undefined,
  242. createEndTime: this.state.releaseDate1[1] ? this.state.releaseDate1[1] : undefined,
  243. guidanceStartTime: this.state.releaseDate2[0] ? this.state.releaseDate2[0] : undefined,
  244. guidanceEndTime: this.state.releaseDate2[1] ? this.state.releaseDate2[1] : undefined,
  245. shiroType: this.state.shiroType
  246. };
  247. this.setState({
  248. loading: true,
  249. });
  250. $.ajax({
  251. method: "get",
  252. dataType: "json",
  253. crossDomain: false,
  254. url: globalConfig.context + '/api/admin/userFollowList',
  255. data,
  256. success: function (data) {
  257. ShowModal(this);
  258. if (data.error.length === 0) {
  259. let theArr = [];
  260. for (let i = 0; i < data.data.list.length; i++) {
  261. let thisdata = data.data.list[i];
  262. let diqu = getProvince(thisdata.province, thisdata.city, thisdata.area)
  263. thisdata.key = i;
  264. thisdata.lastFollowTime = thisdata.lastFollowTime && thisdata.lastFollowTime.split(" ")[0];
  265. thisdata.transferTime = thisdata.transferTime && thisdata.transferTime.split(" ")[0];
  266. thisdata.surplusFollowTime = thisdata.surplusFollowTime && thisdata.surplusFollowTime.split(" ")[0];
  267. thisdata.surplusSignTime = thisdata.surplusSignTime && thisdata.surplusSignTime.split(" ")[0];
  268. thisdata.locationProvince = diqu;
  269. thisdata.uid = thisdata.id;
  270. theArr.push(thisdata);
  271. }
  272. this.state.pagination.current = data.data.pageNo;
  273. this.state.pagination.total = data.data.totalCount;
  274. this.setState({
  275. pageNo: data.data.pageNo,
  276. dataSource: theArr,
  277. pagination: this.state.pagination,
  278. });
  279. } else {
  280. message.warning(data.error[0].message);
  281. }
  282. }.bind(this),
  283. }).always(
  284. function () {
  285. this.setState({
  286. loading: false,
  287. });
  288. }.bind(this)
  289. );
  290. };
  291. selectSuperId() {
  292. this.state.data = []
  293. $.ajax({
  294. method: "get",
  295. dataType: "json",
  296. crossDomain: false,
  297. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  298. data: {},
  299. success: function (data) {
  300. if (data.error.length === 0) {
  301. let theArr = [];
  302. for (let i = 0; i < data.data.length; i++) {
  303. let theData = data.data[i];
  304. theArr.push(
  305. <Select.Option value={theData.id} key={theData.name}>{theData.name}</Select.Option>
  306. );
  307. }
  308. this.setState({
  309. contactsOption: theArr,
  310. });
  311. } else {
  312. message.warning(data.error[0].message);
  313. }
  314. }.bind(this),
  315. }).always(function () { }.bind(this));
  316. }
  317. //品类数据获取
  318. category() {
  319. $.ajax({
  320. method: "get",
  321. dataType: "json",
  322. crossDomain: false,
  323. url: globalConfig.context + "/api/admin/Varieties/getSuperList",
  324. data: {},
  325. success: function (data) {
  326. let thedata = data.data;
  327. let theArr = [];
  328. if (!thedata) {
  329. if (data.error && data.error.length) {
  330. message.warning(data.error[0].message);
  331. }
  332. } else {
  333. thedata.map(function (item, index) {
  334. theArr.push({
  335. value: item.id,
  336. key: item.cname,
  337. });
  338. });
  339. }
  340. this.setState({
  341. categoryArr: theArr,
  342. });
  343. }.bind(this),
  344. });
  345. }
  346. tableRowClick(record) {
  347. this.category();
  348. this.setState({
  349. rowData: record,
  350. modalVisible: true,
  351. modalName: record.nickname,
  352. })
  353. }
  354. closeDesc(e, s) {
  355. this.setState({
  356. visitModul: e,
  357. modalVisible: e,
  358. showDesc: e,
  359. tabsKey: '',
  360. })
  361. if (s) {
  362. this.props.shiroType != 2 && this.loadData(this.state.pageNo);
  363. }
  364. }
  365. export() {
  366. this.setState({
  367. exportExecLoading: true
  368. })
  369. let loading = message.loading('加载中...');
  370. let data = {
  371. userName: this.state.userName || undefined,
  372. followName: this.state.followName || undefined,
  373. userType: isNaN(parseInt(this.state.userType)) ? undefined : this.state.userType,
  374. contactType: isNaN(parseInt(this.state.contactType)) ? undefined : this.state.contactType,
  375. deps: this.state.deps || undefined,
  376. followStartTime: this.state.releaseDate[0] ? this.state.releaseDate[0] : undefined,
  377. followEndTime: this.state.releaseDate[1] ? this.state.releaseDate[1] : undefined,
  378. createStartTime: this.state.releaseDate1[0] ? this.state.releaseDate1[0] : undefined,
  379. createEndTime: this.state.releaseDate1[1] ? this.state.releaseDate1[1] : undefined,
  380. guidanceStartTime: this.state.releaseDate2[0] ? this.state.releaseDate2[0] : undefined,
  381. guidanceEndTime: this.state.releaseDate2[1] ? this.state.releaseDate2[1] : undefined,
  382. shiroType: this.state.shiroType
  383. };
  384. for (let i in data) {
  385. if (typeof data[i] === "undefined") {
  386. delete data[i]
  387. }
  388. }
  389. $.ajax({
  390. method: "get",
  391. dataType: "json",
  392. crossDomain: false,
  393. url: globalConfig.context + "/api/admin/userFollowListExport",
  394. data,
  395. success: function (data) {
  396. if (data.error.length === 0) {
  397. this.download(data.data);
  398. } else {
  399. message.warning(data.error[0].message);
  400. }
  401. }.bind(this),
  402. }).always(function () {
  403. loading();
  404. this.setState({
  405. exportExecLoading: false
  406. })
  407. }.bind(this));
  408. }
  409. download(fileName) {
  410. window.location.href = globalConfig.context + "/open/download?fileName=" + fileName
  411. }
  412. reset() {
  413. this.state.pagination.current = 1;
  414. this.state.pagination.total = 0;
  415. this.setState({
  416. userName: undefined,
  417. followName: undefined,
  418. userType: undefined,
  419. contactType: undefined,
  420. deps: undefined,
  421. releaseDate: [],
  422. releaseDate1: [],
  423. releaseDate2: [],
  424. dataSource: [],
  425. pagination: this.state.pagination
  426. }, () => {
  427. this.Cascaders.empty();
  428. this.props.shiroType != 2 && this.loadData();
  429. })
  430. }
  431. // 更改表格显示数据
  432. changeList(arr) {
  433. const newArr = [];
  434. this.state.columns.forEach((item) => {
  435. arr.forEach((val) => {
  436. if (val === item.title) {
  437. newArr.push(item);
  438. }
  439. });
  440. });
  441. this.setState({
  442. changeList: newArr,
  443. });
  444. }
  445. render() {
  446. return (
  447. <div className="user-content">
  448. <ShowModalDiv ShowModal={this.state.showModal} onClose={() => { this.setState({ showModal: false }) }} />
  449. <div className="content-title" style={{ marginBottom: 10 }}>
  450. <span style={{ fontWeight: 900, fontSize: 16 }}>客户跟进汇总</span>
  451. </div>
  452. <Tabs defaultActiveKey="1" className="test">
  453. <TabPane tab="搜索" key="1">
  454. <div className="user-search">
  455. <Form layout="inline">
  456. <Form.Item style={{ marginTop: '10px' }}>
  457. <Input
  458. placeholder="客户名称"
  459. value={this.state.userName}
  460. style={{ width: 150, }}
  461. onChange={(e) => {
  462. this.setState({ userName: e.target.value });
  463. }}
  464. />
  465. </Form.Item>
  466. <Form.Item style={{ marginTop: '10px' }}>
  467. <Input
  468. placeholder="跟进人名称"
  469. value={this.state.followName}
  470. style={{ width: 150 }}
  471. onChange={(e) => {
  472. this.setState({ followName: e.target.value });
  473. }}
  474. />
  475. </Form.Item>
  476. <Form.Item>
  477. <Select
  478. placeholder="选择客户类型"
  479. style={{ width: 100, }}
  480. value={this.state.userType}
  481. onChange={
  482. (e) => {
  483. this.setState({ userType: e })
  484. }}
  485. >
  486. {/*0所有 1私有客户2 公共客户 3签单客户4外联客户*/}
  487. <Select.Option value={0}>所有</Select.Option>
  488. <Select.Option value={1}>私有客户</Select.Option>
  489. <Select.Option value={2}>公共客户</Select.Option>
  490. <Select.Option value={3}>签单客户</Select.Option>
  491. <Select.Option value={4}>外联客户</Select.Option>
  492. <Select.Option value={5}>限定项目客户</Select.Option>
  493. </Select>
  494. </Form.Item>
  495. <Form.Item>
  496. <Select
  497. placeholder="选择跟进方式"
  498. style={{ width: 100, }}
  499. value={this.state.contactType}
  500. onChange={(e) => { this.setState({ contactType: e }) }}
  501. >
  502. <Select.Option value={0}>外出</Select.Option>
  503. <Select.Option value={1}>电话</Select.Option>
  504. <Select.Option value={2}>QQ</Select.Option>
  505. <Select.Option value={3}>微信</Select.Option>
  506. <Select.Option value={4}>邮箱</Select.Option>
  507. <Select.Option value={5}>公出打卡</Select.Option>
  508. </Select>
  509. </Form.Item>
  510. <Form.Item style={{ marginTop: '8px' }}>
  511. <Cascaders
  512. ref={ref => this.Cascaders = ref}
  513. placeholder="选择跟进部门"
  514. id="id"
  515. name="name"
  516. children="list"
  517. height={32}
  518. onSel={(e) => {
  519. this.setState({
  520. deps: JSON.stringify(e)
  521. })
  522. }}
  523. />
  524. {/* <Select
  525. placeholder="选择跟进部门"
  526. style={{ width: '200px', marginRight: '10px' }}
  527. value={this.state.depId}
  528. onChange={
  529. (e) => {
  530. this.setState({ depId: e })
  531. }}
  532. notFoundContent="未获取到上级组织列表"
  533. >
  534. {this.state.contactsOption}
  535. </Select> */}
  536. </Form.Item>
  537. <Form.Item label='跟进时间:' style={{ marginTop: '10px' }}>
  538. <RangePicker
  539. style={{}}
  540. value={[
  541. this.state.releaseDate[0]
  542. ? moment(this.state.releaseDate[0])
  543. : null,
  544. this.state.releaseDate[1]
  545. ? moment(this.state.releaseDate[1])
  546. : null,
  547. ]}
  548. onChange={(data, dataString) => {
  549. this.setState({ releaseDate: dataString });
  550. }}
  551. />
  552. </Form.Item>
  553. <Form.Item label='客户初始时间:' style={{ marginTop: '10px' }}>
  554. <RangePicker
  555. style={{}}
  556. value={[
  557. this.state.releaseDate1[0]
  558. ? moment(this.state.releaseDate1[0])
  559. : null,
  560. this.state.releaseDate1[1]
  561. ? moment(this.state.releaseDate1[1])
  562. : null,
  563. ]}
  564. onChange={(data, dataString) => {
  565. this.setState({ releaseDate1: dataString });
  566. }}
  567. />
  568. </Form.Item>
  569. <Form.Item label='指导时间:' style={{ marginTop: '10px' }}>
  570. <RangePicker
  571. style={{}}
  572. value={[
  573. this.state.releaseDate2[0]
  574. ? moment(this.state.releaseDate2[0])
  575. : null,
  576. this.state.releaseDate2[1]
  577. ? moment(this.state.releaseDate2[1])
  578. : null,
  579. ]}
  580. onChange={(data, dataString) => {
  581. this.setState({ releaseDate2: dataString });
  582. }}
  583. />
  584. </Form.Item>
  585. <Form.Item style={{ marginTop: 10 }}>
  586. <Button
  587. type="primary"
  588. style={{ marginLeft: 10, marginRight: 10 }}
  589. onClick={() => {
  590. this.loadData();
  591. }}
  592. >
  593. 搜索
  594. </Button>
  595. <Button onClick={this.reset}>重置</Button>
  596. </Form.Item>
  597. </Form>
  598. </div>
  599. </TabPane>
  600. <TabPane tab="更改表格显示数据" key="2">
  601. <div style={{ marginLeft: 10 }}>
  602. <ChooseList
  603. columns={this.state.columns}
  604. changeFn={this.changeList}
  605. changeList={this.state.changeList}
  606. top={55}
  607. margin={11}
  608. />
  609. </div>
  610. </TabPane>
  611. <TabPane tab="导出" key="3">
  612. <Button style={{ float: "left", margin: 10 }} onClick={this.export}>
  613. 导出excel
  614. </Button>
  615. </TabPane>
  616. </Tabs>
  617. <div className="patent-table">
  618. <Spin spinning={this.state.loading}>
  619. <Table
  620. columns={
  621. this.state.changeList == undefined
  622. ? this.state.columns
  623. : this.state.changeList
  624. }
  625. dataSource={this.state.dataSource}
  626. pagination={this.state.pagination}
  627. onRowClick={this.tableRowClick}
  628. style={{
  629. cursor: 'pointer',
  630. }}
  631. />
  632. </Spin>
  633. </div>
  634. <IntentionDetail
  635. isCustomerAdmin={this.props.isCustomerAdmin}
  636. categoryArr={this.state.categoryArr}
  637. IntentionData={this.state.rowData}
  638. modalVisible={this.state.modalVisible}
  639. isGuidanceLv={this.props.isGuidanceLv}
  640. isEditGuidanceLv={this.props.isEditGuidanceLv}
  641. name={this.state.modalName}
  642. closeDesc={this.closeDesc}
  643. />
  644. </div>
  645. )
  646. }
  647. }
  648. export default FollowUpSummary;