followUp.jsx 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611
  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: "techSatisfaction",
  198. key: "techSatisfaction",
  199. render: (text,record) => (
  200. (
  201. text === 0 ? '已投诉' :
  202. text === 1 ? '不满意' :
  203. text === 2 ? '一般满意' :
  204. text === 3 ? '非常满意' : '无'
  205. )
  206. +'/'+
  207. (record.businessSatisfaction === 0 ? '已投诉' :
  208. record.businessSatisfaction === 1 ? '不满意' :
  209. record.businessSatisfaction === 2 ? '一般满意' :
  210. record.businessSatisfaction === 3 ? '非常满意' : '无')
  211. )
  212. },
  213. {
  214. title: "备注",
  215. dataIndex: "remarks",
  216. key: "remarks",
  217. width: 80,
  218. render: (text) => {
  219. return (
  220. <Tooltip placement="topLeft" title={text}>
  221. <div style={{
  222. maxWidth:'80px',
  223. overflow:'hidden',
  224. textOverflow: "ellipsis",
  225. whiteSpace:'nowrap',
  226. }}>{text}</div>
  227. </Tooltip>
  228. )
  229. }
  230. },
  231. {
  232. title: "操作",
  233. dataIndex: "a",
  234. key: "a",
  235. width: 100,
  236. render: (_,record) => {
  237. if(record.projects){
  238. let projectsArr = record.projects.split('/');
  239. let consultantsArr = record.consultants.split('/');
  240. let declareBatchsArr = record.declareBatchs.split('/');
  241. let certificationNosArr = record.certificationNos.split('/');
  242. let data = [];
  243. for (let i in projectsArr){
  244. data.push({
  245. project:projectsArr[i],
  246. consultant:consultantsArr[i],
  247. declareBatch:declareBatchsArr[i],
  248. certificationNo:certificationNosArr[i],
  249. })
  250. }
  251. return (
  252. <Button type="primary" onClick={(e)=>{
  253. e.stopPropagation();
  254. this.setState({
  255. detailsVisible:true,
  256. detailsInfor:data
  257. })
  258. }}>查看项目</Button>
  259. )
  260. }
  261. }
  262. },
  263. ],
  264. changeList:[],
  265. listLoading:false,
  266. page:1,
  267. pagination: {
  268. defaultCurrent: 1,
  269. defaultPageSize: 10,
  270. showQuickJumper: true,
  271. pageSize: 10,
  272. onChange: function (page) {
  273. this.loadData(page);
  274. }.bind(this),
  275. showTotal: function (total) {
  276. return "共" + total + "条数据";
  277. },
  278. },
  279. departmentArr:[],
  280. customerName:'',
  281. releaseDate:[],
  282. signTimes:[],
  283. }
  284. this.changeList = this.changeList.bind(this);
  285. this.loadData = this.loadData.bind(this);
  286. this.search = this.search.bind(this);
  287. this.reset = this.reset.bind(this);
  288. this.departmentList = this.departmentList.bind(this);
  289. this.download = this.download.bind(this);
  290. }
  291. componentDidMount() {
  292. this.departmentList();
  293. this.loadData();
  294. }
  295. search(){
  296. this.loadData();
  297. }
  298. reset(){
  299. this.setState({
  300. customerName:undefined,
  301. depId:undefined,
  302. addWechat:undefined,
  303. renewal:undefined,
  304. releaseDate:[],
  305. signTimes:[],
  306. },()=>{
  307. this.loadData();
  308. })
  309. }
  310. loadData(pageNo) {
  311. this.setState({
  312. listLoading: true,
  313. });
  314. $.ajax({
  315. method: "get",
  316. dataType: "json",
  317. crossDomain: false,
  318. url: globalConfig.context + "/api/admin/listOrderUseService",
  319. data: {
  320. pageNo: pageNo || 1,
  321. pageSize: this.state.pagination.pageSize,
  322. userName:this.state.customerName || undefined,
  323. depId:this.state.depId || undefined,
  324. addWechat:this.state.addWechat || undefined,
  325. renewal:this.state.renewal || undefined,
  326. startFollowTimes:this.state.releaseDate[0] || undefined,
  327. endFollowTimes:this.state.releaseDate[1] || undefined,
  328. startSignTimes:this.state.signTimes[0] || undefined,
  329. endSignTimes:this.state.signTimes[1] || undefined,
  330. },
  331. success: function (data) {
  332. ShowModal(this);
  333. let theArr = [];
  334. if (!data.data || !data.data.list) {
  335. if (data.error && data.error.length) {
  336. message.warning(data.error[0].message);
  337. }
  338. } else {
  339. for (let i = 0; i < data.data.list.length; i++) {
  340. let thisdata = data.data.list[i];
  341. theArr.push(thisdata);
  342. }
  343. this.state.pagination.current = data.data.pageNo;
  344. this.state.pagination.total = data.data.totalCount;
  345. if (data.data && data.data.list && !data.data.list.length) {
  346. this.state.pagination.current = 0;
  347. this.state.pagination.total = 0;
  348. }
  349. let obj = {
  350. userName:this.state.customerName || undefined,
  351. depId:this.state.depId || undefined,
  352. addWechat:this.state.addWechat || undefined,
  353. renewal:this.state.renewal || undefined,
  354. startFollowTimes:this.state.releaseDate[0] || undefined,
  355. endFollowTimes:this.state.releaseDate[1] || undefined,
  356. startSignTimes:this.state.signTimes[0] || undefined,
  357. endSignTimes:this.state.signTimes[1] || undefined,
  358. }
  359. let arr = Object.keys(obj);
  360. let str = '?';
  361. for(let i of arr){
  362. if(obj[i]){
  363. str+=i+'='+obj[i]+'&'
  364. }
  365. }
  366. this.setState({
  367. dataSource: theArr,
  368. page: data.data.pageNo,
  369. pagination: this.state.pagination,
  370. downloadSrc:str,
  371. });
  372. }
  373. }.bind(this),
  374. }).always(
  375. function () {
  376. this.setState({
  377. listLoading: false,
  378. });
  379. }.bind(this)
  380. );
  381. }
  382. changeList(arr) {
  383. const newArr = [];
  384. this.state.columns.forEach(item => {
  385. arr.forEach(val => {
  386. if (val === item.title) {
  387. newArr.push(item);
  388. }
  389. });
  390. });
  391. this.setState({
  392. changeList: newArr
  393. });
  394. }
  395. //部门
  396. departmentList() {
  397. $.ajax({
  398. method: "get",
  399. dataType: "json",
  400. crossDomain: false,
  401. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  402. data: {},
  403. success: function (data) {
  404. let thedata = data.data;
  405. let theArr = [];
  406. if (!thedata) {
  407. if (data.error && data.error.length) {
  408. message.warning(data.error[0].message);
  409. }
  410. } else {
  411. thedata.map(function (item, index) {
  412. theArr.push({
  413. key: index,
  414. name: item.name,
  415. id: item.id,
  416. });
  417. });
  418. }
  419. this.setState({
  420. departmentArr: theArr,
  421. });
  422. }.bind(this),
  423. }).always(
  424. function () {
  425. }.bind(this)
  426. );
  427. }
  428. download() {
  429. window.location.href =
  430. globalConfig.context +
  431. "/api/admin/userServiceExport" + this.state.downloadSrc
  432. }
  433. render() {
  434. return (
  435. <div className="user-content">
  436. <ShowModalDiv ShowModal={this.state.showModal} />
  437. <div className="content-title">
  438. <span>客服跟进详情</span>
  439. </div>
  440. <Tabs defaultActiveKey="1" className="test">
  441. <TabPane tab="搜索" key="1" style={{padding:'10px 0'}}>
  442. <Input
  443. placeholder="客户名称"
  444. style={{ width: "150px", marginRight: 10,marginBottom: "10px" }}
  445. value={this.state.customerName}
  446. onChange={(e) => {
  447. this.setState({ customerName: e.target.value });
  448. }}
  449. />
  450. <Select
  451. placeholder="订单部门"
  452. style={{ width: 150, marginRight: 10,marginBottom: "10px" }}
  453. value={this.state.depId}
  454. onChange={(e) => {
  455. this.setState({ depId: e });
  456. }}
  457. >
  458. {this.state.departmentArr.map(function (item) {
  459. return <Option key={item.id}>{item.name}</Option>;
  460. })}
  461. </Select>
  462. <Select
  463. placeholder="是否已添微信"
  464. style={{ width: 150, marginRight: 10,marginBottom: "10px" }}
  465. value={this.state.addWechat}
  466. onChange={(e) => {
  467. this.setState({ addWechat: e });
  468. }}
  469. >
  470. <Option value={0}>否</Option>
  471. <Option value={1}>是</Option>
  472. </Select>
  473. <Select
  474. placeholder="续签情况"
  475. style={{ width: 250, marginRight: 10,marginBottom: "10px" }}
  476. value={this.state.renewal}
  477. onChange={(e) => {
  478. this.setState({ renewal: e });
  479. }}
  480. >
  481. <Option value={6}>已续签/复审、续签时间、续签项目</Option>
  482. <Option value={5}>待续签,已报价(客服维护中)</Option>
  483. <Option value={4}>待续签,未报价(客服维护中)</Option>
  484. <Option value={3}>企业不打算申报/注销</Option>
  485. <Option value={2}>企业自己申报</Option>
  486. <Option value={1}>企业已签其他机构</Option>
  487. <Option value={0}>未联系上当前联系人</Option>
  488. </Select>
  489. <span style={{ marginRight: "10px",marginBottom: "10px" }}>跟进时间 :</span>
  490. <RangePicker
  491. style={{marginBottom: "10px",width:'187px'}}
  492. value={[
  493. this.state.releaseDate[0]
  494. ? moment(this.state.releaseDate[0])
  495. : null,
  496. this.state.releaseDate[1]
  497. ? moment(this.state.releaseDate[1])
  498. : null,
  499. ]}
  500. onChange={(data, dataString) => {
  501. this.setState({ releaseDate: dataString });
  502. }}
  503. />
  504. <span style={{ marginRight: "10px",marginLeft: "10px",marginBottom: "10px" }}>下单时间 :</span>
  505. <RangePicker
  506. style={{marginBottom: "10px",width:'187px'}}
  507. value={[
  508. this.state.signTimes[0]
  509. ? moment(this.state.signTimes[0])
  510. : null,
  511. this.state.signTimes[1]
  512. ? moment(this.state.signTimes[1])
  513. : null,
  514. ]}
  515. onChange={(data, dataString) => {
  516. this.setState({ signTimes: dataString });
  517. }}
  518. />
  519. <Button
  520. type="primary"
  521. onClick={this.search}
  522. style={{ marginLeft: "10px",marginBottom: "10px" }}
  523. >
  524. 搜索
  525. <Icon type="search" />
  526. </Button>
  527. <Button onClick={this.reset} style={{ marginLeft: "10px",marginBottom: "10px" }}>
  528. 重置 <Icon type="reload" />
  529. </Button>
  530. </TabPane>
  531. <TabPane tab="更改表格显示数据" key="2">
  532. <div style={{ marginLeft: 10 }}>
  533. <ChooseList
  534. columns={this.state.columns}
  535. changeFn={this.changeList}
  536. changeList={this.state.changeList}
  537. top={55}
  538. margin={11}
  539. />
  540. </div>
  541. </TabPane>
  542. <TabPane tab="操作" key="3">
  543. <Button
  544. type="primary"
  545. style={{margin: '10px'}}
  546. onClick={this.download}
  547. >
  548. 导出
  549. </Button>
  550. </TabPane>
  551. </Tabs>
  552. <div className="patent-table">
  553. <Spin spinning={this.state.listLoading}>
  554. <Table
  555. columns={this.state.columns}
  556. dataSource={this.state.dataSource}
  557. pagination={this.state.pagination}
  558. scroll={{ x: "max-content", y: 0 }}
  559. bordered
  560. onRowClick={(record)=>{
  561. this.setState({
  562. visible:true,
  563. orderNo:record.orderNo,
  564. uid:record.uid,
  565. })
  566. }}
  567. />
  568. </Spin>
  569. </div>
  570. {this.state.visible ? <FollowUpDetails
  571. visible={this.state.visible}
  572. orderNo={this.state.orderNo}
  573. uid={this.state.uid}
  574. onCancel={()=>{
  575. this.setState({
  576. visible:false,
  577. orderNo:'',
  578. uid:'',
  579. },()=>{
  580. this.loadData(this.state.page);
  581. })
  582. }}/> : ''}
  583. {this.state.detailsVisible ?
  584. <CorrespondingDetails
  585. visible={this.state.detailsVisible}
  586. detailsInfor={this.state.detailsInfor}
  587. onCancel={()=>{
  588. this.setState({
  589. detailsVisible:false,
  590. detailsInfor:[],
  591. })
  592. }}/> : ''}
  593. </div>
  594. )
  595. }
  596. }
  597. export default FollowUp;