visit.jsx 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401
  1. import React from 'react';
  2. import {Form, Button, Spin, message, Table, Popconfirm, Tooltip, Alert} from 'antd';
  3. import ajax from 'jquery/src/ajax/xhr.js';
  4. import $ from 'jquery/src/ajax';
  5. import FollowDetail from '../../followDetail.jsx'
  6. import {getContactType} from '@/tools.js';
  7. import VisitDetail from './visitDetail.jsx';
  8. import PublicSupplement from "../../../../../../publicSupplement";
  9. const Visit = React.createClass({
  10. getInitialState(){
  11. return {
  12. visitArrList: [],
  13. loading: false,
  14. visitModul: false,
  15. visitModuls: false,
  16. paginations: {
  17. defaultCurrent: 1,
  18. defaultPageSize: 10,
  19. showQuickJumper: true,
  20. pageSize: 10,
  21. onChange: function (page) {
  22. this.loadVisit(page);
  23. }.bind(this),
  24. showTotal: function (total) {
  25. return "共" + total + "条数据";
  26. },
  27. },
  28. visitsList: [
  29. {
  30. title: "客户名称",
  31. dataIndex: "nickname",
  32. key: "nickname",
  33. width: 150,
  34. render: (text) => {
  35. return (
  36. <Tooltip title={text}>
  37. <div style={{
  38. maxWidth:'150px',
  39. overflow:'hidden',
  40. textOverflow: "ellipsis",
  41. whiteSpace:'nowrap',
  42. }}>{text}</div>
  43. </Tooltip>
  44. )
  45. },
  46. },
  47. {
  48. title: "跟进方式",
  49. dataIndex: "contactType",
  50. key: "contactType",
  51. width: 100,
  52. render: (text) => {
  53. return getContactType(text);
  54. },
  55. },
  56. {
  57. title: "联系人",
  58. dataIndex: "contacts",
  59. key: "contacts",
  60. width: 150,
  61. render: (text, record) => {
  62. return (
  63. <div>
  64. {record.readOnly ? <span>***</span> : <span>{text}</span>}
  65. </div>
  66. );
  67. },
  68. },
  69. {
  70. title: "联系电话",
  71. dataIndex: "contactMobile",
  72. key: "contactMobile",
  73. width: 120,
  74. render: (text, record) => {
  75. return (
  76. <div>
  77. {record.readOnly ? <span>***</span> : <span>{text}</span>}
  78. </div>
  79. );
  80. },
  81. },
  82. {
  83. title: "跟进人",
  84. dataIndex: "adminName",
  85. key: "adminName",
  86. width: 120
  87. },
  88. // {
  89. // title: "跟进说明",
  90. // dataIndex: "result",
  91. // key: "result",
  92. // width: 300,
  93. // render: (text, record) => {
  94. // return (
  95. // <div style={{wordBreak:"break-all"}}>
  96. // <div>{text}</div>
  97. // {
  98. // getContactType(record.contactType) === '公出打卡' && <div style={{
  99. // paddingTop: '15px',
  100. // wordBreak: "break-all",
  101. // display: "flex",
  102. // alignItems: 'flex-end'
  103. // }}>
  104. // 补充说明:
  105. // {record.supplement}
  106. // <div style={{paddingLeft: '10px'}}>
  107. // <PublicSupplement infor={record} onCancel={() => {
  108. // this.loadVisit(this.state.ispage);
  109. // }}/>
  110. // </div>
  111. // </div>
  112. // }
  113. // </div>
  114. // )
  115. // }
  116. // },
  117. {
  118. title: "跟进时间",
  119. dataIndex: "followTime",
  120. key: "followTime",
  121. width: 125
  122. },
  123. {
  124. title: "公出目标",
  125. dataIndex: "result",
  126. key: "result",
  127. width: 200,
  128. // render: (text, record) => {
  129. // return (
  130. // <div style={{wordBreak:"break-all"}}>
  131. // <div>{text}</div>
  132. // {
  133. // getContactType(record.contactType) === '公出打卡' && <div style={{
  134. // paddingTop: '15px',
  135. // wordBreak: "break-all",
  136. // display: "flex",
  137. // alignItems: 'flex-end'
  138. // }}>
  139. // {/* 补充说明:
  140. // {record.supplement} */}
  141. // <div style={{paddingLeft: '10px'}}>
  142. // <PublicSupplement infor={record} onCancel={() => {
  143. // this.loadVisit(this.state.ispage);
  144. // }}/>
  145. // </div>
  146. // </div>
  147. // }
  148. // </div>
  149. // )
  150. // }
  151. },
  152. {
  153. title: "公出计划",
  154. dataIndex: "plan",
  155. key: "plan",
  156. width: 200,
  157. render: (text) => {
  158. return (
  159. <div
  160. // style={{
  161. // width: 50,
  162. // overflow: "hidden",
  163. // textOverflow: "ellipsis",
  164. // whiteSpace: "nowrap",
  165. // }}
  166. // title={text}
  167. >
  168. {text}
  169. </div>
  170. );
  171. },
  172. },
  173. {
  174. title: "预计效果",
  175. dataIndex: "expectedEffect",
  176. key: "expectedEffect",
  177. width: 200,
  178. render: (text) => {
  179. return (
  180. <div
  181. // style={{
  182. // width: 50,
  183. // overflow: "hidden",
  184. // textOverflow: "ellipsis",
  185. // whiteSpace: "nowrap",
  186. // }}
  187. // title={text}
  188. >
  189. {text}
  190. </div>
  191. );
  192. },
  193. },
  194. {
  195. title: "本次公出目标总结",
  196. dataIndex: "supplement",
  197. key: "supplement",
  198. width: 200,
  199. render: (text,record) => {
  200. return (
  201. <div style={{wordBreak:"break-all"}}>
  202. {
  203. getContactType(record.contactType) === '公出打卡' && <div style={{
  204. // paddingTop: '15px',
  205. wordBreak: "break-all",
  206. }}>
  207. {text}
  208. <div>
  209. <PublicSupplement closeModel={this.closeModel} infor={record} onCancel={() => {
  210. this.loadVisit(this.state.ispage);
  211. }}/>
  212. </div>
  213. </div>
  214. }
  215. </div>
  216. );
  217. },
  218. },
  219. {
  220. title: "下一次公出计划",
  221. dataIndex: "nextPlan",
  222. key: "nextPlan",
  223. width: 200,
  224. render: (text) => {
  225. return (
  226. <div
  227. // style={{
  228. // width: 70,
  229. // overflow: "hidden",
  230. // textOverflow: "ellipsis",
  231. // whiteSpace: "nowrap",
  232. // }}
  233. // title={text}
  234. >
  235. {text}
  236. </div>
  237. );
  238. },
  239. },
  240. ],
  241. };
  242. },
  243. //拜访记录删除
  244. visitDelet(e) {
  245. this.setState({
  246. visitModul:false,
  247. loading: true
  248. });
  249. $.ajax({
  250. method: "get",
  251. dataType: "json",
  252. crossDomain: false,
  253. url: globalConfig.context + "/api/admin/customer/deleteFollow",
  254. data: {
  255. followId: e.followId, //删除的ID
  256. }
  257. }).done(function(data) {
  258. if(!data.error.length) {
  259. message.success('删除成功!');
  260. this.setState({
  261. loading: false,
  262. });
  263. } else {
  264. message.warning(data.error[0].message);
  265. };
  266. this.loadVisit();
  267. }.bind(this));
  268. },
  269. //查看跟进记录列表
  270. loadVisit(pageNo) {
  271. this.setState({
  272. loading: true
  273. });
  274. $.ajax({
  275. method: "get",
  276. dataType: "json",
  277. crossDomain: false,
  278. url: globalConfig.context + '/api/admin/customer/listFollowHistory',
  279. data: {
  280. pageNo: pageNo || 1,
  281. pageSize: this.state.paginations.pageSize,
  282. uid: this.props.data.id, //名称1
  283. },
  284. success: function(data) {
  285. let theArr = [];
  286. if(data.error.length || data.data.list == "") {
  287. if(data.error && data.error.length) {
  288. message.warning(data.error[0].message);
  289. };
  290. } else {
  291. for(let i = 0; i < data.data.list.length; i++) {
  292. let thisdata = data.data.list[i];
  293. theArr.push(thisdata);
  294. };
  295. this.state.paginations.current = data.data.pageNo;
  296. this.state.paginations.total = data.data.totalCount;
  297. };
  298. if(data.data.list&&!data.data.list.length){
  299. this.state.paginations.current =0;
  300. this.state.paginations.total =0;
  301. };
  302. this.setState({
  303. visitArrList: theArr,
  304. paginations: this.state.paginations
  305. });
  306. }.bind(this),
  307. }).always(function() {
  308. this.setState({
  309. loading: false
  310. });
  311. }.bind(this));
  312. },
  313. componentWillMount(){
  314. this.loadVisit();
  315. },
  316. detailsModal(){
  317. this.props.closeDetail(false, false)
  318. },
  319. closeModel() {
  320. this.setState({
  321. visitModul:false
  322. })
  323. },
  324. //点击整行
  325. VisitRowClick(record){
  326. this.setState({
  327. followData: record,
  328. visitModul:true,
  329. })
  330. },
  331. //进入新增拜访记录
  332. visit() {
  333. let obj = {
  334. id: this.props.data.id
  335. }
  336. this.setState({
  337. followData:obj,
  338. visitModuls:true,
  339. })
  340. },
  341. closeDesc(e,s){
  342. this.state.visitModul=e
  343. this.state.visitModuls=e
  344. if(s){
  345. this.loadVisit()
  346. }
  347. },
  348. componentWillReceiveProps(nextProps) {
  349. if(nextProps.data.id&&nextProps.visitState){
  350. this.loadVisit()
  351. }
  352. this.setState({
  353. visitModul:false
  354. })
  355. },
  356. render(){
  357. return(
  358. <div className="clearfix">
  359. <Alert message="注:面谈公出补充,沟通完后记录今天交流的情况。计划下一次什么时候再面谈?该如何面谈?该如何跟进?" banner />
  360. <Button
  361. onClick={(e) => {
  362. e.stopPropagation(), this.visit();
  363. }}
  364. type="primary"
  365. style={{marginTop:'10px',float: 'right'}}
  366. >
  367. 客户跟进
  368. </Button>
  369. <Spin spinning={this.state.loading}>
  370. <Table
  371. size="middle"
  372. style={{marginTop:'60px'}}
  373. pagination={this.state.paginations}
  374. columns={this.state.visitsList}
  375. dataSource={this.state.visitArrList}
  376. scroll={{x:'120%', y: 440 }}
  377. onRowClick={this.VisitRowClick}
  378. />
  379. </Spin>
  380. <VisitDetail
  381. categoryArr={this.props.categoryArr}
  382. followData={this.state.followData}
  383. visitModul={this.state.visitModul}
  384. closeDesc={this.closeDesc}
  385. mid={this.props.data.id}
  386. />
  387. <FollowDetail
  388. categoryArr={this.props.categoryArr}
  389. followData={this.state.followData}
  390. isFlag={true}
  391. visitModul={this.state.visitModuls}
  392. closeDesc={this.closeDesc}
  393. loadData={this.props.loadData}
  394. />
  395. </div>
  396. )
  397. }
  398. })
  399. export default Visit;