visitDetail.jsx 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480
  1. import React from 'react'
  2. import ajax from 'jquery/src/ajax/xhr.js';
  3. import $ from 'jquery/src/ajax';
  4. import {Modal, Form, layout, Radio, Button, Input, Spin, Table, Select, Popconfirm, message, Tag, Tooltip} from 'antd';
  5. import {intentionalService,newFollow,customerStatus} from '@/dataDic.js';
  6. import {getCompanyIntention,getfllowSituation,getcustomerStatue,getContactType} from '@/tools.js';
  7. const FormItem =Form.Item;
  8. const VisitDetail = React.createClass({
  9. getInitialState(){
  10. return{
  11. visitModul:false,
  12. loading:false,
  13. data:[],
  14. publicReleaseLog:[],
  15. followDtails:{},
  16. intentionPublicReleaseLog:[
  17. {
  18. title: '操作状态',
  19. dataIndex: 'status',
  20. key: 'status',
  21. render: (text) => (
  22. text === 0 ? <Tag color="#F00">驳回</Tag> :
  23. text === 1 ? <Tag color="#58a3ff">发起</Tag> :
  24. text === 2 ? <Tag color="#87d068">通过</Tag> : null
  25. )
  26. },
  27. {
  28. title: '操作人',
  29. dataIndex: 'aname',
  30. key: 'aname',
  31. },
  32. {
  33. title: '操作时间',
  34. dataIndex: 'createTimes',
  35. key: 'createTimes',
  36. },
  37. {
  38. title: '备注',
  39. width:120,
  40. dataIndex: 'remarks',
  41. key: 'remarks',
  42. render: (text) => {
  43. return (
  44. <Tooltip placement="topLeft" title={text}>
  45. <div style={{
  46. maxWidth:'120px',
  47. overflow:'hidden',
  48. textOverflow: "ellipsis",
  49. whiteSpace:'nowrap',
  50. }}>{text}</div>
  51. </Tooltip>
  52. )
  53. }
  54. },
  55. ],
  56. //业务意向列表
  57. intentionList:[
  58. {
  59. title: '业务名称',
  60. dataIndex: 'businessVarietiesName',
  61. width:120,
  62. key: 'businessVarietiesName'
  63. },
  64. {
  65. title: '项目名称',
  66. dataIndex: 'businessProjectName',
  67. key:'businessProjectName',
  68. width:120
  69. },
  70. {
  71. title: '最新进度',
  72. width:120,
  73. dataIndex: 'followSituation',
  74. key: 'followSituation',
  75. render: (text, record, index) => {
  76. return <div>
  77. <span>{getfllowSituation(text)}</span>
  78. </div>
  79. }
  80. }, {
  81. title: '最新状态',
  82. width:120,
  83. dataIndex: 'customerStatus',
  84. key: 'customerStatus',
  85. render: (text, record, index) => {
  86. return <div>
  87. <span>{getcustomerStatue(text)}</span>
  88. </div>
  89. }
  90. }, {
  91. title: '跟进说明',
  92. width:120,
  93. dataIndex: 'remarks',
  94. key: 'remarks',
  95. render: (text, record, index) => {
  96. return <div>
  97. <span title={text}>{text&&text.length>8?text.substr(0,8)+'…':text}</span>
  98. </div>
  99. }
  100. }
  101. ],
  102. }
  103. },
  104. //进入修改拜访记录
  105. visitModify(e) {
  106. this.setState({
  107. visitModul: true,
  108. loading: true
  109. });
  110. $.ajax({
  111. method: "get",
  112. dataType: "json",
  113. url: globalConfig.context + '/api/admin/customer/toUpdateFollow',
  114. data: {
  115. followId: e,
  116. },
  117. success: function(data) {
  118. let theArr = [];
  119. let thedata = data.data;
  120. if(!thedata) {
  121. if(data.error && data.error.length) {
  122. message.warning(data.error[0].message);
  123. };
  124. thedata = {};
  125. };
  126. for(let i = 0; i < data.data.userBusinessList.length; i++) {
  127. let thisdata = data.data.userBusinessList[i];
  128. theArr.push({
  129. key:i,
  130. readOnly:this.props.followData.readOnly,
  131. id: thisdata.ufbId,
  132. businessName:thisdata.businessProjectId,
  133. businessVarietiesName:thisdata.businessVarietiesName,
  134. businessProjectName:thisdata.businessProjectName,
  135. followSituation: thisdata.followSituation==null?undefined : String(thisdata.followSituation),
  136. customerStatus: thisdata.customerStatus==null?undefined : String(thisdata.customerStatus),
  137. remarks: thisdata.remarks,
  138. });
  139. };
  140. if(parseInt(thedata.contactType)==0){
  141. this.setState({
  142. contactType:'外出'
  143. })
  144. }else if(parseInt(thedata.contactType)==1){
  145. this.setState({
  146. contactType:'电话'
  147. })
  148. }else if(parseInt(thedata.contactType)==2){
  149. this.setState({
  150. contactType:'QQ'
  151. })
  152. }else if(parseInt(thedata.contactType)==3){
  153. this.setState({
  154. contactType:'微信'
  155. })
  156. }else if(parseInt(thedata.contactType)==4){
  157. this.setState({
  158. contactType:'邮箱'
  159. })
  160. }
  161. this.setState({
  162. followIds: thedata.followId,
  163. contacts: thedata.contacts,
  164. uid: thedata.uid,
  165. data: theArr,
  166. result: thedata.result,
  167. contactMobile:thedata.contactMobile,
  168. // contactType: parseInt(thedata.contactType),
  169. followTime: thedata.followTime,
  170. followSituation: thedata.followSituation,
  171. customerStatus: thedata.customerStatus,
  172. });
  173. }.bind(this),
  174. }).always(function() {
  175. this.setState({
  176. loading: false
  177. });
  178. }.bind(this));
  179. },
  180. //拜访意向服务列表单个删除
  181. intentionDelet(e, index) {
  182. let detId = this.state.followIds;
  183. if(e.id) {
  184. this.setState({
  185. selectedRowKeys: [],
  186. });
  187. $.ajax({
  188. method: "get",
  189. dataType: "json",
  190. crossDomain: false,
  191. url: globalConfig.context + "/api/admin/customer/deleteFollowOneBusiness",
  192. data: {
  193. ufbId: e.id
  194. }
  195. }).done(function(data) {
  196. if(!data.error.length) {
  197. message.success('删除成功');
  198. this.setState({
  199. loading: false,
  200. });
  201. } else {
  202. message.warning(data.error[0].message);
  203. };
  204. this.visitModify(detId);
  205. }.bind(this));
  206. } else {
  207. this.visitModify(detId);
  208. }
  209. },
  210. //拜访modul函数
  211. visitOk(e) {
  212. this.setState({
  213. addcontactModul:false,
  214. visitModul: false
  215. });
  216. },
  217. visitCancel(e) {
  218. this.setState({
  219. addcontactModul:false,
  220. visitModul: false
  221. });
  222. },
  223. //详情保存
  224. visitSubmit(e){
  225. e.preventDefault();
  226. this.setState({
  227. loading: true
  228. });
  229. let contactsId = '';
  230. if(this.state.keys) {
  231. let conts = this.state.lastName;
  232. contactsId = this.state.contactsIdArr[conts].id;
  233. }
  234. let GlossoryId=false;
  235. this.state.data.map(function(item) {
  236. if(!item.followSituation||!item.customerStatus||!item.businessName) {
  237. GlossoryId = true
  238. }
  239. })
  240. if(this.state.data.length&&GlossoryId) {
  241. message.warning("项目名称/最新进度/最新状态不能为空!")
  242. return false;
  243. };
  244. let dataList=this.state.data,
  245. idsList=[];
  246. dataList.map((item,index) => {
  247. idsList.push({
  248. ufbId:item.id||'',
  249. businessProjectId:item.businessName,
  250. customerStatus:item.customerStatus,
  251. followSituation:item.followSituation,
  252. remarks:item.remarks||''
  253. })
  254. });
  255. //新增
  256. $.ajax({
  257. method: "post",
  258. dataType: "json",
  259. url: globalConfig.context + '/api/admin/customer/updateFollow',
  260. data: {
  261. followId: this.state.followIds,
  262. userBusinessList: JSON.stringify(idsList),
  263. uid: this.state.uid,
  264. contactType: this.state.contactType,
  265. result: this.state.result,
  266. followTime: this.state.followTime,
  267. }
  268. }).done(function(data) {
  269. this.setState({
  270. loading: false
  271. });
  272. if(!data.error.length) {
  273. message.success('保存成功!');
  274. this.props.closeDesc(false,true);
  275. this.visitCancel();
  276. } else {
  277. message.warning(data.error[0].message);
  278. }
  279. }.bind(this));
  280. },
  281. getFollowDtails(e) {
  282. this.setState({
  283. loading: true
  284. });
  285. $.ajax({
  286. method: "get",
  287. dataType: "json",
  288. url: globalConfig.context + '/api/admin/release/followDtails',
  289. data: {
  290. id: e,
  291. },
  292. success: function(data) {
  293. if(data.error.length === 0){
  294. this.setState({
  295. followDtails:data.data || {}
  296. })
  297. }else{
  298. message.warning(data.error[0].message)
  299. }
  300. }.bind(this),
  301. }).always(function() {
  302. this.setState({
  303. loading: false
  304. });
  305. }.bind(this));
  306. },
  307. getListPublicReleaseLog(e) {
  308. this.setState({
  309. loading: true
  310. });
  311. $.ajax({
  312. method: "get",
  313. dataType: "json",
  314. url: globalConfig.context + '/api/admin/release/listPublicReleaseLog',
  315. data: {
  316. ufid: e,
  317. },
  318. success: function(data) {
  319. if(data.error.length === 0){
  320. this.setState({
  321. publicReleaseLog:data.data || []
  322. })
  323. }else{
  324. message.warning(data.error[0].message)
  325. }
  326. }.bind(this),
  327. }).always(function() {
  328. this.setState({
  329. loading: false
  330. });
  331. }.bind(this));
  332. },
  333. componentWillReceiveProps(nextProps) {
  334. if (nextProps.visitModul && nextProps.followData.followId) {
  335. this.setState({
  336. visitModul: true,
  337. loading: true,
  338. })
  339. if(nextProps.followData.contactType === "0"){
  340. this.getListPublicReleaseLog(nextProps.followData.followId);
  341. this.getFollowDtails(nextProps.followData.followId);
  342. }
  343. this.visitModify(nextProps.followData.followId)
  344. };
  345. },
  346. render() {
  347. const formItemLayout = {
  348. labelCol: { span: 8 },
  349. wrapperCol: { span: 14 },
  350. };
  351. const followData= this.props.followData || []
  352. return(
  353. <div>
  354. <Modal
  355. className="customeDetails"
  356. footer=''
  357. title="客户跟进详情"
  358. width='1000px'
  359. visible={this.state.visitModul}
  360. onOk={this.visitOk}
  361. onCancel={this.visitCancel}
  362. >
  363. <Form layout="horizontal" id="demand-form" onSubmit={this.visitSubmit}>
  364. <Spin spinning={this.state.loading}>
  365. <div className="clearfix">
  366. {!(this.state.contactType === '外出' && Object.keys(this.state.followDtails).length > 0) ?
  367. <div>
  368. <FormItem
  369. labelCol={{ span:4 }}
  370. wrapperCol={{ span: 20 }}
  371. label="跟进方式" >
  372. <span>{this.state.contactType}</span>
  373. </FormItem>
  374. <div className="clearfix">
  375. {!followData.readOnly&&<FormItem className="half-item"
  376. {...formItemLayout}
  377. label="当前联系人"
  378. >
  379. <span>{this.state.contacts}</span>
  380. </FormItem>}
  381. <FormItem className="half-item"
  382. {...formItemLayout}
  383. label="跟进时间"
  384. >
  385. <span>{this.state.followTime}</span>
  386. </FormItem>
  387. {!followData.readOnly&&<FormItem className="half-item"
  388. {...formItemLayout}
  389. label="联系电话"
  390. >
  391. <span>{this.state.contactMobile}</span>
  392. </FormItem>}
  393. </div>
  394. <div className="clearfix">
  395. <FormItem
  396. labelCol={{ span: 4 }}
  397. wrapperCol={{ span: 16 }}
  398. label="跟进备注" >
  399. {
  400. <span>{this.state.result}</span>
  401. }
  402. </FormItem>
  403. </div>
  404. </div>: null}
  405. {this.state.contactType === '外出' && Object.keys(this.state.followDtails).length > 0 ? <div>
  406. <div className="clearfix">
  407. <FormItem
  408. labelCol={{ span: 4 }}
  409. wrapperCol={{ span: 16 }}
  410. label="公出企业" >
  411. <span>{this.state.followDtails.nickname}</span>
  412. </FormItem>
  413. <FormItem
  414. labelCol={{ span: 4 }}
  415. wrapperCol={{ span: 16 }}
  416. label="公出时间" >
  417. <span>{this.state.followDtails.releaseStarts + '~' + this.state.followDtails.releaseEnds}</span>
  418. </FormItem>
  419. <FormItem
  420. labelCol={{ span: 4 }}
  421. wrapperCol={{ span: 16 }}
  422. label="公出地点" >
  423. <span>{this.state.followDtails.userName}</span>
  424. </FormItem>
  425. <FormItem
  426. labelCol={{ span: 4 }}
  427. wrapperCol={{ span: 16 }}
  428. label="审核情况" >
  429. <span>
  430. {
  431. this.state.followDtails.status === 0 ? <Tag color="#F00">驳回</Tag> :
  432. this.state.followDtails.status === 1 ? <Tag color="#58a3ff">审核中</Tag> :
  433. this.state.followDtails.status === 2 ? <Tag color="#87d068">通过</Tag> : null}
  434. </span>
  435. </FormItem>
  436. </div>
  437. <div className="clearfix">
  438. <div style={{fontSize:'18px',marginLeft:'100px',marginTop:'15px',marginBottom:'10px'}}>打卡日志</div>
  439. <Table
  440. pagination={false}
  441. columns={this.state.intentionPublicReleaseLog}
  442. dataSource={this.state.publicReleaseLog}
  443. />
  444. </div>
  445. </div> : null}
  446. <div className="clearfix">
  447. <div style={{fontSize:'18px',marginLeft:'100px',marginTop:'15px',marginBottom:'10px'}}>业务意向</div>
  448. <div className="clearfix" >
  449. <Spin spinning={this.state.loading}>
  450. <Table
  451. size="middle"
  452. rowKey={record => record.id}
  453. pagination={false}
  454. columns={this.state.intentionList}
  455. dataSource={this.state.data}
  456. />
  457. </Spin>
  458. </div>
  459. </div>
  460. </div>
  461. {!followData.readOnly&&<FormItem wrapperCol={{ span: 12, offset: 6 }}>
  462. {/* <Button type="primary" size="large" htmlType="submit" style={{marginRight:'150px',marginTop:'20px'}}>保存</Button>
  463. <Button size="large" onClick={this.visitCancel}>取消</Button> */}
  464. </FormItem>}
  465. </Spin>
  466. </Form>
  467. </Modal>
  468. </div>
  469. )
  470. }
  471. })
  472. export default VisitDetail;