followUp.jsx 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593
  1. import React,{Component} from "react";
  2. import {Button, DatePicker, Icon, Input, message, Select, Spin, Table, Tabs, Tag, Tooltip} from "antd";
  3. import {ChooseList} from "../../order/orderNew/chooseList";
  4. import FollowUpDetails from './followUpDetails';
  5. import CorrespondingDetails from './correspondingDetails';
  6. import OrderItemStatus from '../../../../component/common/orderItemStatus';
  7. import $ from "jquery";
  8. import {ShowModal} from "@/tools";
  9. import ShowModalDiv from "@/showModal.jsx";
  10. import moment from "moment";
  11. const {TabPane} = Tabs;
  12. const { RangePicker } = DatePicker;
  13. class FollowUp extends Component{
  14. constructor(props) {
  15. super(props);
  16. this.state={
  17. columns:[
  18. {
  19. title: "合同编号",
  20. dataIndex: "contractNo",
  21. key: "contractNo",
  22. width: 120,
  23. fixed:'left',
  24. },
  25. {
  26. title: "订单编号",
  27. dataIndex: "orderNo",
  28. key: "orderNo",
  29. width: 140,
  30. fixed:'left',
  31. },
  32. {
  33. title: "状态",
  34. dataIndex: "deleteSign",
  35. key: "deleteSign",
  36. width:80,
  37. fixed:'left',
  38. render: (text) => {
  39. //0=正常, 1=作废, 2=锁定, 3=变更中
  40. return <div>
  41. <OrderItemStatus deleteSign={text}/>
  42. </div>
  43. }
  44. },
  45. {
  46. title: "订单部门",
  47. dataIndex: "depName",
  48. key: "depName",
  49. width: 160,
  50. fixed:'left',
  51. },
  52. {
  53. title: "客户名称",
  54. dataIndex: "userName",
  55. key: "userName",
  56. width:120,
  57. fixed:'left',
  58. },
  59. {
  60. title: "合同签订时间",
  61. dataIndex: "signTimes",
  62. key: "signTimes",
  63. },
  64. {
  65. title: "下单时间",
  66. dataIndex: "orderTimes",
  67. key: "orderTimes",
  68. },
  69. {
  70. title: "申报项目",
  71. dataIndex: "projects",
  72. key: "projects",
  73. width: 80,
  74. render: (text) => {
  75. return (
  76. <Tooltip placement="topLeft" title={text}>
  77. <div style={{
  78. maxWidth:'80px',
  79. overflow:'hidden',
  80. textOverflow: "ellipsis",
  81. whiteSpace:'nowrap',
  82. }}>{text}</div>
  83. </Tooltip>
  84. )
  85. }
  86. },
  87. {
  88. title: "咨询师",
  89. dataIndex: "consultants",
  90. key: "consultants",
  91. width: 80,
  92. render: (text) => {
  93. return (
  94. <Tooltip placement="topLeft" title={text}>
  95. <div style={{
  96. maxWidth:'80px',
  97. overflow:'hidden',
  98. textOverflow: "ellipsis",
  99. whiteSpace:'nowrap',
  100. }}>{text}</div>
  101. </Tooltip>
  102. )
  103. }
  104. },
  105. {
  106. title: "申报批次",
  107. dataIndex: "declareBatchs",
  108. key: "declareBatchs",
  109. width: 80,
  110. render: (text) => {
  111. return (
  112. <Tooltip placement="topLeft" title={text}>
  113. <div style={{
  114. maxWidth:'80px',
  115. overflow:'hidden',
  116. textOverflow: "ellipsis",
  117. whiteSpace:'nowrap',
  118. }}>{text}</div>
  119. </Tooltip>
  120. )
  121. }
  122. },
  123. {
  124. title: "证书编号",
  125. dataIndex: "certificationNos",
  126. key: "certificationNos",
  127. width: 80,
  128. render: (text) => {
  129. return (
  130. <Tooltip placement="topLeft" title={text}>
  131. <div style={{
  132. maxWidth:'80px',
  133. overflow:'hidden',
  134. textOverflow: "ellipsis",
  135. whiteSpace:'nowrap',
  136. }}>{text}</div>
  137. </Tooltip>
  138. )
  139. }
  140. },
  141. {
  142. title: "客服最新跟进",
  143. dataIndex: "newTimes",
  144. key: "newTimes",
  145. },
  146. {
  147. title: "跟进客服",
  148. dataIndex: "adminName",
  149. key: "adminName",
  150. },
  151. {
  152. title: "是否已添微信",
  153. dataIndex: "addWechat",
  154. key: "addWechat",
  155. width: 100,
  156. render: (text,record) => {
  157. let str = text === 1 ? '是('+record.wechat+')' : text === 0 ? '否' : '';
  158. return (
  159. <Tooltip placement="topLeft" title={str}>
  160. <div style={{
  161. maxWidth:'100px',
  162. overflow:'hidden',
  163. textOverflow: "ellipsis",
  164. whiteSpace:'nowrap',
  165. }}>{str}</div>
  166. </Tooltip>
  167. )
  168. }
  169. },
  170. {
  171. title: "续签情况",
  172. dataIndex: "renewal",
  173. key: "renewal",
  174. width: 80,
  175. render: (text,record) => {
  176. let str = text === 0 ? '其他' :
  177. text === 1 ? '否,企业已签其他机构' :
  178. text === 2 ? '否,企业自己申报' :
  179. text === 3 ? '否,企业不打算申报/注销' :
  180. text === 4 ? '否,客户考虑中,无报价' :
  181. text === 5 ? '否,客户考虑中,已报价' :
  182. text === 6 ? '是,已续签/复审,续签时间、续签项目('+record.renewalTimes+')' : ''
  183. return (
  184. <Tooltip placement="topLeft" title={str}>
  185. <div style={{
  186. maxWidth:'80px',
  187. overflow:'hidden',
  188. textOverflow: "ellipsis",
  189. whiteSpace:'nowrap',
  190. }}>{str}</div>
  191. </Tooltip>
  192. )
  193. }
  194. },
  195. {
  196. title: "备注",
  197. dataIndex: "remarks",
  198. key: "remarks",
  199. width: 80,
  200. render: (text) => {
  201. return (
  202. <Tooltip placement="topLeft" title={text}>
  203. <div style={{
  204. maxWidth:'80px',
  205. overflow:'hidden',
  206. textOverflow: "ellipsis",
  207. whiteSpace:'nowrap',
  208. }}>{text}</div>
  209. </Tooltip>
  210. )
  211. }
  212. },
  213. {
  214. title: "操作",
  215. dataIndex: "a",
  216. key: "a",
  217. width: 100,
  218. render: (_,record) => {
  219. if(record.projects){
  220. let projectsArr = record.projects.split('/');
  221. let consultantsArr = record.consultants.split('/');
  222. let declareBatchsArr = record.declareBatchs.split('/');
  223. let certificationNosArr = record.certificationNos.split('/');
  224. let data = [];
  225. for (let i in projectsArr){
  226. data.push({
  227. project:projectsArr[i],
  228. consultant:consultantsArr[i],
  229. declareBatch:declareBatchsArr[i],
  230. certificationNo:certificationNosArr[i],
  231. })
  232. }
  233. return (
  234. <Button type="primary" onClick={(e)=>{
  235. e.stopPropagation();
  236. this.setState({
  237. detailsVisible:true,
  238. detailsInfor:data
  239. })
  240. }}>查看项目</Button>
  241. )
  242. }
  243. }
  244. },
  245. ],
  246. changeList:[],
  247. listLoading:false,
  248. page:1,
  249. pagination: {
  250. defaultCurrent: 1,
  251. defaultPageSize: 10,
  252. showQuickJumper: true,
  253. pageSize: 10,
  254. onChange: function (page) {
  255. this.loadData(page);
  256. }.bind(this),
  257. showTotal: function (total) {
  258. return "共" + total + "条数据";
  259. },
  260. },
  261. departmentArr:[],
  262. customerName:'',
  263. releaseDate:[],
  264. signTimes:[],
  265. }
  266. this.changeList = this.changeList.bind(this);
  267. this.loadData = this.loadData.bind(this);
  268. this.search = this.search.bind(this);
  269. this.reset = this.reset.bind(this);
  270. this.departmentList = this.departmentList.bind(this);
  271. this.download = this.download.bind(this);
  272. }
  273. componentDidMount() {
  274. this.departmentList();
  275. this.loadData();
  276. }
  277. search(){
  278. this.loadData();
  279. }
  280. reset(){
  281. this.setState({
  282. customerName:undefined,
  283. depId:undefined,
  284. addWechat:undefined,
  285. renewal:undefined,
  286. releaseDate:[],
  287. signTimes:[],
  288. },()=>{
  289. this.loadData();
  290. })
  291. }
  292. loadData(pageNo) {
  293. this.setState({
  294. listLoading: true,
  295. });
  296. $.ajax({
  297. method: "get",
  298. dataType: "json",
  299. crossDomain: false,
  300. url: globalConfig.context + "/api/admin/listOrderUseService",
  301. data: {
  302. pageNo: pageNo || 1,
  303. pageSize: this.state.pagination.pageSize,
  304. userName:this.state.customerName || undefined,
  305. depId:this.state.depId || undefined,
  306. addWechat:this.state.addWechat || undefined,
  307. renewal:this.state.renewal || undefined,
  308. startFollowTimes:this.state.releaseDate[0] || undefined,
  309. endFollowTimes:this.state.releaseDate[1] || undefined,
  310. startSignTimes:this.state.signTimes[0] || undefined,
  311. endSignTimes:this.state.signTimes[1] || undefined,
  312. },
  313. success: function (data) {
  314. ShowModal(this);
  315. let theArr = [];
  316. if (!data.data || !data.data.list) {
  317. if (data.error && data.error.length) {
  318. message.warning(data.error[0].message);
  319. }
  320. } else {
  321. for (let i = 0; i < data.data.list.length; i++) {
  322. let thisdata = data.data.list[i];
  323. theArr.push(thisdata);
  324. }
  325. this.state.pagination.current = data.data.pageNo;
  326. this.state.pagination.total = data.data.totalCount;
  327. if (data.data && data.data.list && !data.data.list.length) {
  328. this.state.pagination.current = 0;
  329. this.state.pagination.total = 0;
  330. }
  331. let obj = {
  332. userName:this.state.customerName || undefined,
  333. depId:this.state.depId || undefined,
  334. addWechat:this.state.addWechat || undefined,
  335. renewal:this.state.renewal || undefined,
  336. startFollowTimes:this.state.releaseDate[0] || undefined,
  337. endFollowTimes:this.state.releaseDate[1] || undefined,
  338. startSignTimes:this.state.signTimes[0] || undefined,
  339. endSignTimes:this.state.signTimes[1] || undefined,
  340. }
  341. let arr = Object.keys(obj);
  342. let str = '?';
  343. for(let i of arr){
  344. if(obj[i]){
  345. str+=i+'='+obj[i]+'&'
  346. }
  347. }
  348. this.setState({
  349. dataSource: theArr,
  350. page: data.data.pageNo,
  351. pagination: this.state.pagination,
  352. downloadSrc:str,
  353. });
  354. }
  355. }.bind(this),
  356. }).always(
  357. function () {
  358. this.setState({
  359. listLoading: false,
  360. });
  361. }.bind(this)
  362. );
  363. }
  364. changeList(arr) {
  365. const newArr = [];
  366. this.state.columns.forEach(item => {
  367. arr.forEach(val => {
  368. if (val === item.title) {
  369. newArr.push(item);
  370. }
  371. });
  372. });
  373. this.setState({
  374. changeList: newArr
  375. });
  376. }
  377. //部门
  378. departmentList() {
  379. $.ajax({
  380. method: "get",
  381. dataType: "json",
  382. crossDomain: false,
  383. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  384. data: {},
  385. success: function (data) {
  386. let thedata = data.data;
  387. let theArr = [];
  388. if (!thedata) {
  389. if (data.error && data.error.length) {
  390. message.warning(data.error[0].message);
  391. }
  392. } else {
  393. thedata.map(function (item, index) {
  394. theArr.push({
  395. key: index,
  396. name: item.name,
  397. id: item.id,
  398. });
  399. });
  400. }
  401. this.setState({
  402. departmentArr: theArr,
  403. });
  404. }.bind(this),
  405. }).always(
  406. function () {
  407. }.bind(this)
  408. );
  409. }
  410. download() {
  411. window.location.href =
  412. globalConfig.context +
  413. "/api/admin/userServiceExport" + this.state.downloadSrc
  414. }
  415. render() {
  416. return (
  417. <div className="user-content">
  418. <ShowModalDiv ShowModal={this.state.showModal} />
  419. <div className="content-title">
  420. <span>客服跟进详情</span>
  421. </div>
  422. <Tabs defaultActiveKey="1" className="test">
  423. <TabPane tab="搜索" key="1" style={{padding:'10px 0'}}>
  424. <Input
  425. placeholder="客户名称"
  426. style={{ width: "150px", marginRight: 10,marginBottom: "10px" }}
  427. value={this.state.customerName}
  428. onChange={(e) => {
  429. this.setState({ customerName: e.target.value });
  430. }}
  431. />
  432. <Select
  433. placeholder="订单部门"
  434. style={{ width: 150, marginRight: 10,marginBottom: "10px" }}
  435. value={this.state.depId}
  436. onChange={(e) => {
  437. this.setState({ depId: e });
  438. }}
  439. >
  440. {this.state.departmentArr.map(function (item) {
  441. return <Option key={item.id}>{item.name}</Option>;
  442. })}
  443. </Select>
  444. <Select
  445. placeholder="是否已添微信"
  446. style={{ width: 150, marginRight: 10,marginBottom: "10px" }}
  447. value={this.state.addWechat}
  448. onChange={(e) => {
  449. this.setState({ addWechat: e });
  450. }}
  451. >
  452. <Option value={0}>否</Option>
  453. <Option value={1}>是</Option>
  454. </Select>
  455. <Select
  456. placeholder="续签情况"
  457. style={{ width: 250, marginRight: 10,marginBottom: "10px" }}
  458. value={this.state.renewal}
  459. onChange={(e) => {
  460. this.setState({ renewal: e });
  461. }}
  462. >
  463. <Option value={6}>是,已续签/复审,续签时间、续签项目</Option>
  464. <Option value={5}>否,客户考虑中,已报价</Option>
  465. <Option value={4}>否,客户考虑中,无报价</Option>
  466. <Option value={3}>否,企业不打算申报/注销</Option>
  467. <Option value={2}>否,企业自己申报</Option>
  468. <Option value={1}>否,企业已签其他机构</Option>
  469. <Option value={0}>其他</Option>
  470. </Select>
  471. <span style={{ marginRight: "10px",marginBottom: "10px" }}>跟进时间 :</span>
  472. <RangePicker
  473. style={{marginBottom: "10px",width:'187px'}}
  474. value={[
  475. this.state.releaseDate[0]
  476. ? moment(this.state.releaseDate[0])
  477. : null,
  478. this.state.releaseDate[1]
  479. ? moment(this.state.releaseDate[1])
  480. : null,
  481. ]}
  482. onChange={(data, dataString) => {
  483. this.setState({ releaseDate: dataString });
  484. }}
  485. />
  486. <span style={{ marginRight: "10px",marginLeft: "10px",marginBottom: "10px" }}>下单时间 :</span>
  487. <RangePicker
  488. style={{marginBottom: "10px",width:'187px'}}
  489. value={[
  490. this.state.signTimes[0]
  491. ? moment(this.state.signTimes[0])
  492. : null,
  493. this.state.signTimes[1]
  494. ? moment(this.state.signTimes[1])
  495. : null,
  496. ]}
  497. onChange={(data, dataString) => {
  498. this.setState({ signTimes: dataString });
  499. }}
  500. />
  501. <Button
  502. type="primary"
  503. onClick={this.search}
  504. style={{ marginLeft: "10px",marginBottom: "10px" }}
  505. >
  506. 搜索
  507. <Icon type="search" />
  508. </Button>
  509. <Button onClick={this.reset} style={{ marginLeft: "10px",marginBottom: "10px" }}>
  510. 重置 <Icon type="reload" />
  511. </Button>
  512. </TabPane>
  513. <TabPane tab="更改表格显示数据" key="2">
  514. <div style={{ marginLeft: 10 }}>
  515. <ChooseList
  516. columns={this.state.columns}
  517. changeFn={this.changeList}
  518. changeList={this.state.changeList}
  519. top={55}
  520. margin={11}
  521. />
  522. </div>
  523. </TabPane>
  524. <TabPane tab="操作" key="3">
  525. <Button
  526. type="primary"
  527. style={{margin: '10px'}}
  528. onClick={this.download}
  529. >
  530. 导出
  531. </Button>
  532. </TabPane>
  533. </Tabs>
  534. <div className="patent-table">
  535. <Spin spinning={this.state.listLoading}>
  536. <Table
  537. columns={this.state.columns}
  538. dataSource={this.state.dataSource}
  539. pagination={this.state.pagination}
  540. scroll={{ x: "max-content", y: 0 }}
  541. bordered
  542. onRowClick={(record)=>{
  543. this.setState({
  544. visible:true,
  545. orderNo:record.orderNo,
  546. uid:record.uid,
  547. })
  548. }}
  549. />
  550. </Spin>
  551. </div>
  552. {this.state.visible ? <FollowUpDetails
  553. visible={this.state.visible}
  554. orderNo={this.state.orderNo}
  555. uid={this.state.uid}
  556. onCancel={()=>{
  557. this.setState({
  558. visible:false,
  559. orderNo:'',
  560. uid:'',
  561. },()=>{
  562. this.loadData(this.state.page);
  563. })
  564. }}/> : ''}
  565. {this.state.detailsVisible ?
  566. <CorrespondingDetails
  567. visible={this.state.detailsVisible}
  568. detailsInfor={this.state.detailsInfor}
  569. onCancel={()=>{
  570. this.setState({
  571. detailsVisible:false,
  572. detailsInfor:[],
  573. })
  574. }}/> : ''}
  575. </div>
  576. )
  577. }
  578. }
  579. export default FollowUp;