visit.jsx 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525
  1. import React from 'react';
  2. import {Button, Spin, message, Table, Tooltip, Input, Modal, Alert} from 'antd';
  3. import $ from 'jquery/src/ajax';
  4. import FollowDetail from '../../followDetail.jsx'
  5. import {getContactType} from '@/tools.js';
  6. import VisitDetail from './visitDetail.jsx';
  7. import PublicSupplement from '../../../../../../publicSupplement';
  8. const confirm = Modal.confirm;
  9. const Visit = React.createClass({
  10. getInitialState(){
  11. return {
  12. visitArrList: [],
  13. loading: false,
  14. visitModul: false,
  15. visitModuls: false,
  16. followId:0,
  17. ispage:1,
  18. paginations: {
  19. defaultCurrent: 1,
  20. defaultPageSize: 10,
  21. showQuickJumper: true,
  22. pageSize: 10,
  23. onChange: function (page) {
  24. this.loadVisit(page);
  25. }.bind(this),
  26. showTotal: function (total) {
  27. return "共" + total + "条数据";
  28. },
  29. },
  30. visitsList: [
  31. {
  32. title: "客户名称",
  33. dataIndex: "nickname",
  34. key: "nickname",
  35. width: 100,
  36. render: (text) => {
  37. return (
  38. <Tooltip title={text}>
  39. <div style={{
  40. maxWidth:'100px',
  41. overflow:'hidden',
  42. textOverflow: "ellipsis",
  43. whiteSpace:'nowrap',
  44. }}>{text}</div>
  45. </Tooltip>
  46. )
  47. },
  48. },
  49. {
  50. title: "跟进方式",
  51. dataIndex: "contactType",
  52. key: "contactType",
  53. width: 80,
  54. render: (text) => {
  55. return getContactType(text);
  56. },
  57. },
  58. {
  59. title: "联系人",
  60. dataIndex: "contacts",
  61. key: "contacts",
  62. width: 100,
  63. render: (text, record) => {
  64. return (
  65. <div>
  66. {record.readOnly ? <span>***</span> : <span>{text}</span>}
  67. </div>
  68. );
  69. },
  70. },
  71. {
  72. title: "联系电话",
  73. dataIndex: "contactMobile",
  74. key: "contactMobile",
  75. width: 120,
  76. render: (text, record) => {
  77. return (
  78. <div>
  79. {record.readOnly ? <span>***</span> : <span>{text}</span>}
  80. </div>
  81. );
  82. },
  83. },
  84. {
  85. title: "跟进人",
  86. dataIndex: "adminName",
  87. key: "adminName",
  88. width: 80
  89. },
  90. {
  91. title: "跟进时间",
  92. dataIndex: "followTime",
  93. key: "followTime",
  94. width: 65
  95. },
  96. {
  97. title: "公出目标",
  98. dataIndex: "result",
  99. key: "result",
  100. width: 200,
  101. // render: (text, record) => {
  102. // return (
  103. // <div style={{wordBreak:"break-all"}}>
  104. // <div>{text}</div>
  105. // {
  106. // getContactType(record.contactType) === '公出打卡' && <div style={{
  107. // paddingTop: '15px',
  108. // wordBreak: "break-all",
  109. // display: "flex",
  110. // alignItems: 'flex-end'
  111. // }}>
  112. // {/* 补充说明:
  113. // {record.supplement} */}
  114. // <div style={{paddingLeft: '10px'}}>
  115. // <PublicSupplement infor={record} onCancel={() => {
  116. // this.loadVisit(this.state.ispage);
  117. // }}/>
  118. // </div>
  119. // </div>
  120. // }
  121. // </div>
  122. // )
  123. // }
  124. },
  125. {
  126. title: "公出计划",
  127. dataIndex: "plan",
  128. key: "plan",
  129. width: 200,
  130. render: (text) => {
  131. return (
  132. <div
  133. // style={{
  134. // width: 50,
  135. // overflow: "hidden",
  136. // textOverflow: "ellipsis",
  137. // whiteSpace: "nowrap",
  138. // }}
  139. // title={text}
  140. >
  141. {text}
  142. </div>
  143. );
  144. },
  145. },
  146. {
  147. title: "预计效果",
  148. dataIndex: "expectedEffect",
  149. key: "expectedEffect",
  150. width: 200,
  151. render: (text) => {
  152. return (
  153. <div
  154. // style={{
  155. // width: 50,
  156. // overflow: "hidden",
  157. // textOverflow: "ellipsis",
  158. // whiteSpace: "nowrap",
  159. // }}
  160. // title={text}
  161. >
  162. {text}
  163. </div>
  164. );
  165. },
  166. },
  167. {
  168. title: "本次公出目标总结",
  169. dataIndex: "supplement",
  170. key: "supplement",
  171. width: 200,
  172. render: (text,record) => {
  173. return (
  174. <div style={{wordBreak:"break-all"}}>
  175. {
  176. getContactType(record.contactType) === '公出打卡' && <div style={{
  177. // paddingTop: '15px',
  178. wordBreak: "break-all",
  179. }}>
  180. {text}
  181. <div>
  182. <PublicSupplement closeModel={this.closeModel} infor={record} onCancel={() => {
  183. this.loadVisit(this.state.ispage);
  184. }}/>
  185. </div>
  186. </div>
  187. }
  188. </div>
  189. );
  190. },
  191. },
  192. {
  193. title: "下一次公出计划",
  194. dataIndex: "nextPlan",
  195. key: "nextPlan",
  196. width: 200,
  197. render: (text) => {
  198. return (
  199. <div
  200. // style={{
  201. // width: 70,
  202. // overflow: "hidden",
  203. // textOverflow: "ellipsis",
  204. // whiteSpace: "nowrap",
  205. // }}
  206. // title={text}
  207. >
  208. {text}
  209. </div>
  210. );
  211. },
  212. },
  213. {
  214. title: "指导时间",
  215. dataIndex: "guidanceTime",
  216. key: "guidanceTime",
  217. width: 100,
  218. render: (text, record) => {
  219. return (
  220. <span>{text ? text : ''}</span>
  221. )
  222. }
  223. },
  224. {
  225. title: "指导意见",
  226. dataIndex: "abc",
  227. key: "abc",
  228. width: 200,
  229. render: (text, record) => {
  230. return (
  231. <div>
  232. {record.guidance ?
  233. <Tooltip placement="topLeft" title={<div style={{wordBreak:"break-all"}}>{(record.guidanceName ? '('+record.guidanceName+')' : '') + record.guidance}</div>}>
  234. <div style={{
  235. cursor:"pointer",
  236. width: '150px',
  237. whiteSpace: 'nowrap',
  238. overflow: 'hidden',
  239. textOverflow: 'ellipsis',
  240. }}>
  241. {record.guidanceName ? '('+record.guidanceName+')' : null}
  242. {record.guidance}
  243. </div>
  244. </Tooltip> : (this.props.isEditGuidanceLv ? <Button
  245. onClick={(e) => {
  246. e.stopPropagation();
  247. this.setState({
  248. guidanceVisible: true,
  249. visitModul: false,
  250. followId: record.followId
  251. })
  252. }}
  253. type="primary"
  254. >
  255. 立即指导
  256. </Button> : <span>暂未指导</span>)}
  257. </div>
  258. );
  259. },
  260. },
  261. ],
  262. guidanceVisible: false,
  263. guidance: ''
  264. };
  265. },
  266. closeModel(){
  267. this.setState({
  268. visitModul:false
  269. })
  270. },
  271. //拜访记录删除
  272. visitDelet(e) {
  273. this.setState({
  274. visitModul:false,
  275. loading: true
  276. });
  277. $.ajax({
  278. method: "get",
  279. dataType: "json",
  280. crossDomain: false,
  281. url: globalConfig.context + "/api/admin/customer/deleteFollow",
  282. data: {
  283. followId: e.followId, //删除的ID
  284. }
  285. }).done(function(data) {
  286. if(!data.error.length) {
  287. message.success('删除成功!');
  288. this.setState({
  289. loading: false,
  290. });
  291. } else {
  292. message.warning(data.error[0].message);
  293. };
  294. this.loadVisit();
  295. }.bind(this));
  296. },
  297. //查看跟进记录列表
  298. loadVisit(pageNo) {
  299. this.setState({
  300. loading: true
  301. });
  302. $.ajax({
  303. method: "get",
  304. dataType: "json",
  305. crossDomain: false,
  306. url: globalConfig.context + '/api/admin/customer/listFollowHistory',
  307. data: {
  308. pageNo: pageNo || 1,
  309. pageSize: this.state.paginations.pageSize,
  310. uid: this.props.data.id, //名称1
  311. },
  312. success: function(data) {
  313. let theArr = [];
  314. if(data.error.length || data.data.list == "") {
  315. if(data.error && data.error.length) {
  316. message.warning(data.error[0].message);
  317. };
  318. } else {
  319. for(let i = 0; i < data.data.list.length; i++) {
  320. let thisdata = data.data.list[i];
  321. theArr.push(thisdata);
  322. };
  323. this.state.paginations.current = data.data.pageNo;
  324. this.state.paginations.total = data.data.totalCount;
  325. this.setState({
  326. ispage: data.data.pageNo
  327. })
  328. };
  329. if(data.data.list&&!data.data.list.length){
  330. this.state.paginations.current =0;
  331. this.state.paginations.total =0;
  332. };
  333. this.setState({
  334. visitArrList: theArr,
  335. paginations: this.state.paginations
  336. });
  337. }.bind(this),
  338. }).always(function() {
  339. this.setState({
  340. loading: false
  341. });
  342. }.bind(this));
  343. },
  344. componentWillMount(){
  345. this.loadVisit();
  346. },
  347. detailsModal(){
  348. this.props.closeDetail(false, false)
  349. },
  350. //点击整行
  351. VisitRowClick(record){
  352. this.setState({
  353. followData: record,
  354. visitModul:true,
  355. })
  356. },
  357. //进入新增拜访记录
  358. visit() {
  359. let obj = {
  360. id: this.props.data.id
  361. }
  362. this.setState({
  363. followData:obj,
  364. visitModuls:true,
  365. })
  366. },
  367. componentDidMount() {
  368. this.setState({
  369. visitModul:false,
  370. })
  371. },
  372. closeDesc(e,s){
  373. this.state.visitModul=e
  374. this.state.visitModuls=e
  375. if(s){
  376. this.loadVisit()
  377. }
  378. },
  379. //发布指导意见
  380. releaseGuidance(e){
  381. e.stopPropagation();
  382. if(!this.state.guidance){
  383. message.info('指导意见不能为空')
  384. return;
  385. }
  386. this.setState({
  387. loading: true,
  388. });
  389. $.ajax({
  390. method: "post",
  391. dataType: "json",
  392. crossDomain: false,
  393. url: globalConfig.context + "/api/admin/customer/addGuidance",
  394. data: {
  395. guidance: this.state.guidance,
  396. followId: this.state.followId,
  397. },
  398. }).done(function(data) {
  399. if(!data.error.length) {
  400. message.success("发布成功");
  401. this.loadVisit(this.state.ispage);
  402. this.setState({
  403. loading: false,
  404. guidanceVisible: false,
  405. });
  406. } else {
  407. message.warning(data.error[0].message);
  408. }
  409. }.bind(this));
  410. },
  411. componentWillReceiveProps(nextProps) {
  412. if(nextProps.data.id&&nextProps.visitState){
  413. this.loadVisit()
  414. }
  415. this.setState({
  416. visitModul:false
  417. })
  418. },
  419. render(){
  420. return(
  421. <div className="clearfix">
  422. <Alert message="注:面谈公出补充,沟通完后记录今天交流的情况。计划下一次什么时候再面谈?该如何面谈?该如何跟进?" banner />
  423. {!this.props.isGuidanceLv ? <Button
  424. onClick={(e) => {
  425. e.stopPropagation();
  426. this.visit();
  427. }}
  428. type="primary"
  429. style={{marginTop:'10px',float: 'right'}}
  430. >
  431. 客户跟进
  432. </Button> : <div/>}
  433. <Spin spinning={this.state.loading}>
  434. <Table
  435. size="middle"
  436. style={{marginTop:this.props.isGuidanceLv ? '0px' : '60px',cursor: 'pointer',}}
  437. pagination={this.state.paginations}
  438. columns={this.state.visitsList}
  439. dataSource={this.state.visitArrList}
  440. onRowClick={this.VisitRowClick}
  441. scroll={{ x:'130%',y: 440 }}
  442. />
  443. </Spin>
  444. <VisitDetail
  445. categoryArr={this.props.categoryArr}
  446. followData={this.state.followData}
  447. visitModul={this.state.visitModul}
  448. closeDesc={this.closeDesc}
  449. mid={this.props.data.id}
  450. />
  451. <FollowDetail
  452. categoryArr={this.props.categoryArr}
  453. followData={this.state.followData}
  454. visitModul={this.state.visitModuls}
  455. closeDesc={this.closeDesc}
  456. loadData={this.loadVisit}
  457. />
  458. {/*指导意见*/}
  459. {this.state.guidanceVisible ? <Modal
  460. className="customeDetails"
  461. title="指导意见"
  462. width='500px'
  463. visible={this.state.guidanceVisible}
  464. onOk={()=>{
  465. this.setState({
  466. guidanceVisible: false,
  467. guidance: '',
  468. },()=>{
  469. this.loadVisit();
  470. })
  471. }}
  472. onCancel={()=>{
  473. this.setState({
  474. guidanceVisible: false,
  475. guidance: '',
  476. },()=>{
  477. this.loadVisit();
  478. })
  479. }}
  480. footer=''
  481. >
  482. <Spin spinning={this.state.loading}>
  483. <div style={{
  484. display:'flex',
  485. flexFlow:'column',
  486. }}>
  487. <Input
  488. style={{ width: '400px',height:'50px' }}
  489. placeholder="请输入指导意见"
  490. type={'textarea'}
  491. onChange={(e)=>{
  492. this.setState({
  493. guidance: e.target.value,
  494. })
  495. }}
  496. />
  497. <Button
  498. type="primary"
  499. style={{ marginTop: "10px", marginBottom: '10px' }}
  500. onClick={(e)=>{
  501. let _this = this;
  502. confirm({
  503. title: '确定要提交本次指导意见吗?',
  504. content: '指导意见提交成功后无法修改',
  505. onOk() {
  506. _this.releaseGuidance(e);
  507. },
  508. onCancel() {},
  509. });
  510. }}
  511. >
  512. 保存
  513. </Button>
  514. </div>
  515. </Spin>
  516. </Modal> : <div/>}
  517. </div>
  518. )
  519. }
  520. })
  521. export default Visit;