visitDetail.jsx 15 KB

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