visitDetail.jsx 16 KB

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