index.jsx 21 KB

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