visitDetail.jsx 14 KB

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