visit.jsx 10.0 KB

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