visitDetail.jsx 14 KB

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