index.jsx 25 KB

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