index.jsx 24 KB

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