visit.jsx 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417
  1. import React from 'react';
  2. import {Form, Button, Spin, message, Table, Tooltip, Input, Modal} 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. 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: 150,
  36. render: (text) => {
  37. return (
  38. <Tooltip title={text}>
  39. <div style={{
  40. maxWidth:'150px',
  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. render: (text) => {
  54. return getContactType(text);
  55. },
  56. },
  57. {
  58. title: "联系人",
  59. dataIndex: "contacts",
  60. key: "contacts",
  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. render: (text, record) => {
  74. return (
  75. <div>
  76. {record.readOnly ? <span>***</span> : <span>{text}</span>}
  77. </div>
  78. );
  79. },
  80. },
  81. {
  82. title: "跟进人",
  83. dataIndex: "adminName",
  84. key: "adminName",
  85. },
  86. {
  87. title: "跟进说明",
  88. dataIndex: "result",
  89. key: "result",
  90. // }, {
  91. // title: '操作',
  92. // dataIndex: 'ttt',
  93. // key: 'ttt',
  94. // render: (text, record, index) => {
  95. // return <div>
  96. // {!record.readOnly&&<Popconfirm title="是否删除?" onConfirm={(e)=>{this.visitDelet(record)}} okText="删除" cancelText="不删除">
  97. // <Button style={{marginRight:'10px',color:'#ffffff',background:'#f00',border:'none'}} onClick={(e)=>{e.stopPropagation()}}>删除</Button>
  98. // </Popconfirm>}
  99. // </div>
  100. // }
  101. },
  102. {
  103. title: "跟进时间",
  104. dataIndex: "followTime",
  105. key: "followTime",
  106. },
  107. {
  108. title: "指导意见",
  109. dataIndex: "abc",
  110. key: "abc",
  111. render: (text, record) => {
  112. return (
  113. <div>
  114. {record.guidance ?
  115. <div style={{
  116. cursor:"pointer",
  117. width: '150px',
  118. whiteSpace: 'nowrap',
  119. overflow: 'hidden',
  120. textOverflow: 'ellipsis',
  121. }}
  122. onClick={(e)=>{
  123. e.stopPropagation();
  124. Modal.info({
  125. title: '指导意见',
  126. content: (
  127. <div style={{
  128. wordWrap:"break-word"
  129. }}>
  130. {record.guidance}
  131. </div>
  132. ),
  133. onOk() {},
  134. });
  135. }}>
  136. <span>
  137. {record.guidance}
  138. </span>
  139. </div> : (this.props.isEditGuidanceLv ? <Button
  140. onClick={(e) => {
  141. e.stopPropagation();
  142. this.setState({
  143. guidanceVisible: true,
  144. visitModul: false,
  145. followId: record.followId
  146. })
  147. }}
  148. type="primary"
  149. >
  150. 立即指导
  151. </Button> : <span>暂未指导</span>)}
  152. </div>
  153. );
  154. },
  155. },
  156. {
  157. title: "指导时间",
  158. dataIndex: "guidanceTime",
  159. key: "guidanceTime",
  160. render: (text, record) => {
  161. return (
  162. <span>{text ? text : ''}</span>
  163. )
  164. }
  165. }
  166. ],
  167. guidanceVisible: false,
  168. guidance: ''
  169. };
  170. },
  171. //拜访记录删除
  172. visitDelet(e) {
  173. this.setState({
  174. visitModul:false,
  175. loading: true
  176. });
  177. $.ajax({
  178. method: "get",
  179. dataType: "json",
  180. crossDomain: false,
  181. url: globalConfig.context + "/api/admin/customer/deleteFollow",
  182. data: {
  183. followId: e.followId, //删除的ID
  184. }
  185. }).done(function(data) {
  186. if(!data.error.length) {
  187. message.success('删除成功!');
  188. this.setState({
  189. loading: false,
  190. });
  191. } else {
  192. message.warning(data.error[0].message);
  193. };
  194. this.loadVisit();
  195. }.bind(this));
  196. },
  197. //查看跟进记录列表
  198. loadVisit(pageNo) {
  199. this.setState({
  200. loading: true
  201. });
  202. $.ajax({
  203. method: "get",
  204. dataType: "json",
  205. crossDomain: false,
  206. url: globalConfig.context + '/api/admin/customer/listFollowHistory',
  207. data: {
  208. pageNo: pageNo || 1,
  209. pageSize: this.state.paginations.pageSize,
  210. uid: this.props.data.id, //名称1
  211. },
  212. success: function(data) {
  213. let theArr = [];
  214. if(data.error.length || data.data.list == "") {
  215. if(data.error && data.error.length) {
  216. message.warning(data.error[0].message);
  217. };
  218. } else {
  219. for(let i = 0; i < data.data.list.length; i++) {
  220. let thisdata = data.data.list[i];
  221. theArr.push(thisdata);
  222. };
  223. this.state.paginations.current = data.data.pageNo;
  224. this.state.paginations.total = data.data.totalCount;
  225. this.setState({
  226. ispage: data.data.pageNo
  227. })
  228. };
  229. if(data.data.list&&!data.data.list.length){
  230. this.state.paginations.current =0;
  231. this.state.paginations.total =0;
  232. };
  233. this.setState({
  234. visitArrList: theArr,
  235. paginations: this.state.paginations
  236. });
  237. }.bind(this),
  238. }).always(function() {
  239. this.setState({
  240. loading: false
  241. });
  242. }.bind(this));
  243. },
  244. componentWillMount(){
  245. this.loadVisit();
  246. },
  247. detailsModal(){
  248. this.props.closeDetail(false, false)
  249. },
  250. //点击整行
  251. VisitRowClick(record){
  252. this.setState({
  253. followData: record,
  254. visitModul:true,
  255. })
  256. },
  257. //进入新增拜访记录
  258. visit() {
  259. let obj = {
  260. id: this.props.data.id
  261. }
  262. this.setState({
  263. followData:obj,
  264. visitModuls:true,
  265. })
  266. },
  267. closeDesc(e,s){
  268. this.state.visitModul=e
  269. this.state.visitModuls=e
  270. if(s){
  271. this.loadVisit()
  272. }
  273. },
  274. //发布指导意见
  275. releaseGuidance(e){
  276. e.stopPropagation();
  277. if(!this.state.guidance){
  278. message.info('指导意见不能为空')
  279. return;
  280. }
  281. this.setState({
  282. loading: true,
  283. });
  284. $.ajax({
  285. method: "post",
  286. dataType: "json",
  287. crossDomain: false,
  288. url: globalConfig.context + "/api/admin/customer/addGuidance",
  289. data: {
  290. guidance: this.state.guidance,
  291. followId: this.state.followId,
  292. },
  293. }).done(function(data) {
  294. if(!data.error.length) {
  295. message.success("发布成功");
  296. this.loadVisit(this.state.ispage);
  297. this.setState({
  298. loading: false,
  299. guidanceVisible: false,
  300. });
  301. } else {
  302. message.warning(data.error[0].message);
  303. }
  304. }.bind(this));
  305. },
  306. componentWillReceiveProps(nextProps) {
  307. if(nextProps.data.id&&nextProps.visitState){
  308. this.loadVisit()
  309. }
  310. this.setState({
  311. visitModul:false
  312. })
  313. },
  314. render(){
  315. return(
  316. <div className="clearfix">
  317. {!this.props.isGuidanceLv ? <Button
  318. onClick={(e) => {
  319. e.stopPropagation();
  320. this.visit();
  321. }}
  322. type="primary"
  323. style={{marginTop:'10px',float: 'right'}}
  324. >
  325. 客户跟进
  326. </Button> : <div/>}
  327. <Spin spinning={this.state.loading}>
  328. <Table
  329. size="middle"
  330. style={{marginTop:this.props.isGuidanceLv ? '0px' : '60px',cursor: 'pointer',}}
  331. pagination={this.state.paginations}
  332. columns={this.state.visitsList}
  333. dataSource={this.state.visitArrList}
  334. onRowClick={this.VisitRowClick}
  335. />
  336. </Spin>
  337. <VisitDetail
  338. categoryArr={this.props.categoryArr}
  339. followData={this.state.followData}
  340. visitModul={this.state.visitModul}
  341. closeDesc={this.closeDesc}
  342. mid={this.props.data.id}
  343. />
  344. <FollowDetail
  345. categoryArr={this.props.categoryArr}
  346. followData={this.state.followData}
  347. visitModul={this.state.visitModuls}
  348. closeDesc={this.closeDesc}
  349. loadData={this.loadVisit}
  350. />
  351. {/*指导意见*/}
  352. {this.state.guidanceVisible ? <Modal
  353. className="customeDetails"
  354. title="指导意见"
  355. width='500px'
  356. visible={this.state.guidanceVisible}
  357. onOk={()=>{
  358. this.setState({
  359. guidanceVisible: false,
  360. guidance: '',
  361. },()=>{
  362. this.loadVisit();
  363. })
  364. }}
  365. onCancel={()=>{
  366. this.setState({
  367. guidanceVisible: false,
  368. guidance: '',
  369. },()=>{
  370. this.loadVisit();
  371. })
  372. }}
  373. footer=''
  374. >
  375. <Spin spinning={this.state.loading}>
  376. <div style={{
  377. display:'flex',
  378. flexFlow:'column',
  379. }}>
  380. <Input
  381. style={{ width: '400px',height:'50px' }}
  382. placeholder="请输入指导意见"
  383. type={'textarea'}
  384. onChange={(e)=>{
  385. this.setState({
  386. guidance: e.target.value,
  387. })
  388. }}
  389. />
  390. <Button
  391. type="primary"
  392. style={{ marginTop: "10px", marginBottom: '10px' }}
  393. onClick={(e)=>{
  394. let _this = this;
  395. confirm({
  396. title: '确定要提交本次指导意见吗?',
  397. content: '指导意见提交成功后无法修改',
  398. onOk() {
  399. _this.releaseGuidance(e);
  400. },
  401. onCancel() {},
  402. });
  403. }}
  404. >
  405. 保存
  406. </Button>
  407. </div>
  408. </Spin>
  409. </Modal> : <div/>}
  410. </div>
  411. )
  412. }
  413. })
  414. export default Visit;