followDetail.jsx 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482
  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} from 'antd';
  5. import {intentionalService,newFollow,customerStatus} from '@/dataDic.js';
  6. import {getCompanyIntention} from '@/tools.js';
  7. const FormItem =Form.Item;
  8. import AddContact from './followDetail/addContact.jsx';
  9. import BusName from './followDetail/businessName.jsx';
  10. const FollowDetail = React.createClass({
  11. getInitialState(){
  12. return{
  13. visitModul:false,
  14. loading:false,
  15. data:[],
  16. businessName:'',
  17. projectName:'',
  18. busModul:false,
  19. intentionList:[{
  20. title: '业务名称',
  21. dataIndex: 'businessGlossoryId',
  22. width:120,
  23. key: 'businessGlossoryId',
  24. render: (text, record, index) => {
  25. return (
  26. <div>
  27. {!record.id?<Select placeholder="选择业务名称" value={record.businessGlossoryId} onChange={(e) => { record.businessGlossoryId = e; this.setState({ data: this.state.data }); }}>
  28. {
  29. this.props.categoryArr.map(function (item) {
  30. return <Select.Option key={item.value} >{item.key}</Select.Option>
  31. })
  32. }
  33. </Select>:
  34. <span>{record.businessVarietiesName}</span>}
  35. </div>
  36. )
  37. }
  38. },
  39. {
  40. title: '项目名称',
  41. dataIndex: 'businessName',
  42. key:'businessName',
  43. width:120,
  44. render:(text,record,index)=>{
  45. return(
  46. <div>
  47. {!record.id?<div>
  48. <Button onClick={(e)=>{e.stopPropagation(),this.businessFn(record,index)}} type="small">{record.projectName}</Button>
  49. </div>:
  50. <span>{record.businessProjectName}</span>
  51. }
  52. </div>
  53. )
  54. }
  55. },
  56. {
  57. title: '最新进度',
  58. width:120,
  59. dataIndex: 'followSituation',
  60. key: 'followSituation',
  61. render: (text, record, index) => {
  62. return <Select placeholder="选择最新进度" value={record.followSituation} onChange={(e) => { record.followSituation = e; this.setState({ data: this.state.data }); }}>
  63. {
  64. newFollow.map(function (item) {
  65. return <Select.Option key={item.value} >{item.key}</Select.Option>
  66. })
  67. }
  68. </Select>
  69. }
  70. }, {
  71. title: '最新状态',
  72. width:120,
  73. dataIndex: 'customerStatus',
  74. key: 'customerStatus',
  75. render: (text, record, index) => {
  76. return <Select value={record.customerStatus} placeholder="选择最新状态" onChange={(e) => { record.customerStatus = e; this.setState({ data: this.state.data }); }}>
  77. {
  78. customerStatus.map(function (item) {
  79. return <Select.Option key={item.value} >{item.key}</Select.Option>
  80. })
  81. }
  82. </Select>
  83. }
  84. }, {
  85. title: '跟进说明',
  86. width:120,
  87. dataIndex: 'remarks',
  88. key: 'remarks',
  89. render: (text, record, index) => {
  90. return <Input value={record.remarks} placeholder="跟进说明"
  91. onChange={(e) => { record.remarks = e.target.value; this.setState({ data: this.state.data }); }}
  92. />
  93. }
  94. }, {
  95. title: '操作',
  96. width:120,
  97. dataIndex: 'rrr',
  98. key: 'rrr',
  99. render: (text, record, index) => {
  100. return <div>
  101. {!record.id&&<Popconfirm title="是否删除?" onConfirm={(e)=>{this.intentionDelet(record,index)}} okText="删除" cancelText="不删除">
  102. <Button style={{marginRight:'10px',color:'#ffffff',background:'#f00',border:'none'}}>删除</Button>
  103. </Popconfirm>}
  104. </div>
  105. }
  106. }
  107. ],
  108. }
  109. },
  110. //选择子项目
  111. businessFn(record,index){
  112. if(!record.businessGlossoryId){
  113. message.warn('请先选择业务名称!');
  114. return;
  115. }
  116. this.setState({
  117. businessId:record.businessGlossoryId,
  118. busModul:true,
  119. index:index,
  120. addcontactModul:false
  121. })
  122. },
  123. closeBus(datas,e,s){
  124. this.state.addcontactModul=e;
  125. this.state.busModul=false;
  126. if(s){
  127. this.state.data[this.state.index].businessName=datas.id;
  128. this.state.data[this.state.index].projectName=datas.name;
  129. this.setState({
  130. busModul:false,
  131. data:this.state.data
  132. })
  133. }
  134. },
  135. //拜访意向服务列表单个删除
  136. intentionDelet(e, index) {
  137. let deteluserBusinessList = (this.state.data).splice(index, 1)
  138. this.setState({
  139. selectedRowKeys: [],
  140. });
  141. },
  142. //拜访modul函数
  143. visitOk(e) {
  144. this.setState({
  145. addcontactModul:false,
  146. visitModul: false
  147. });
  148. },
  149. visitCancel(e) {
  150. this.setState({
  151. addcontactModul:false,
  152. visitModul: false
  153. });
  154. this.props.closeDesc(false,false)
  155. },
  156. //获取联系人下拉框
  157. getNewWoman(ids) {
  158. this.state.data = []
  159. $.ajax({
  160. method: "get",
  161. dataType: "json",
  162. crossDomain: false,
  163. url: globalConfig.context + "/api/admin/customer/findCustomerContacts",
  164. data: {
  165. uid: ids,
  166. },
  167. success: function(data) {
  168. let theArr = [];
  169. let thedata = data.data;
  170. if(!thedata) {
  171. if(data.error && data.error.length) {
  172. message.warning(data.error[0].message);
  173. };
  174. thedata = {};
  175. };
  176. var telNum = [];
  177. var contactIds = [];
  178. thedata.map(function(item, index) {
  179. contactIds.push(thedata[index].id);
  180. telNum.push(thedata[index].mobile);
  181. });
  182. for(let item in data.data) {
  183. let theData = data.data[item];
  184. theArr.push(
  185. <Select.Option value={item} key={theData.name}>{theData.name}</Select.Option>
  186. );
  187. };
  188. this.setState({
  189. contactsIdArr: thedata,
  190. telNum: telNum,
  191. orderStatusOption: theArr,
  192. });
  193. }.bind(this),
  194. }).always(function() {
  195. this.setState({
  196. deletId: ids,
  197. loading: false
  198. });
  199. }.bind(this));
  200. },
  201. //刷新新增拜访记录刷新
  202. deletelist(e) {
  203. this.setState({
  204. loading:true
  205. });
  206. $.ajax({
  207. method: "get",
  208. dataType: "json",
  209. url: globalConfig.context + '/api/admin/customer/toAddFollowOnHistory',
  210. data: {
  211. uid: e,
  212. },
  213. success: function(data) {
  214. let listArr = [];
  215. let thedata = data.data;
  216. if(!thedata) {
  217. if(data.error && data.error.length) {
  218. message.warning(data.error[0].message);
  219. };
  220. thedata = {};
  221. };
  222. for(let i = 0; i < data.data.userBusinessList.length; i++) {
  223. let thisdata = data.data.userBusinessList[i];
  224. listArr.push({
  225. id: thisdata.businessId,
  226. businessName:thisdata.businessProjectId,
  227. businessGlossoryId:i,
  228. businessVarietiesName:thisdata.businessVarietiesName,
  229. businessProjectName:thisdata.businessProjectName,
  230. followSituation: String(thisdata.followSituation),
  231. customerStatus: String(thisdata.customerStatus),
  232. remarks: thisdata.remarks,
  233. });
  234. };
  235. this.setState({
  236. contacts: thedata.contacts,
  237. uid: thedata.uid,
  238. data: listArr,
  239. followTime: thedata.followTime,
  240. remarks: thedata.remarks,
  241. });
  242. }.bind(this),
  243. }).always(function() {
  244. this.setState({
  245. loading: false
  246. });
  247. }.bind(this));
  248. },
  249. //当选择联系人的列表变化时,则执行
  250. hundleName(e) {
  251. let changNub = this.state.telNum[e];
  252. this.setState({
  253. nub: this.state.telNum[e],
  254. lastName: e,
  255. });
  256. },
  257. //点击添加联系人
  258. newContacts() {
  259. this.setState({
  260. busModul:false,
  261. uids: this.state.uid,
  262. addcontactModul: true
  263. });
  264. },
  265. //页面刷新
  266. closeFollow(e, s) {
  267. this.state.addcontactModul=false;
  268. this.state.visitModul = true;
  269. if(s) {
  270. this.getNewWoman(this.props.followData.id);
  271. this.deletelist(this.props.followData.id)
  272. };
  273. },
  274. //详情保存
  275. visitSubmit(e){
  276. e.preventDefault();
  277. let GlossoryId=false;
  278. this.state.data.map(function(item) {
  279. if(!item.followSituation||!item.customerStatus||!item.businessName) {
  280. GlossoryId = true
  281. }
  282. })
  283. if(this.state.contactType == undefined) {
  284. message.warning('请选择拜访方式')
  285. return false;
  286. };
  287. if(this.state.lastName == undefined) {
  288. message.warning('请选择联系人')
  289. return false;
  290. }
  291. if(this.state.data.length&&GlossoryId) {
  292. message.warning("项目名称/最新进度/最新状态不能为空!")
  293. return false;
  294. };
  295. let dataList=this.state.data,
  296. idsList=[];
  297. dataList.map((item,index) => {
  298. idsList.push({
  299. businessId:item.id||'',
  300. businessProjectId:item.businessName,
  301. customerStatus:item.customerStatus,
  302. followSituation:item.followSituation,
  303. remarks:item.remarks||''
  304. })
  305. })
  306. this.setState({
  307. loading: true
  308. });
  309. let contactsId = '';
  310. let conts = this.state.lastName;
  311. contactsId = this.state.contactsIdArr[conts].id;
  312. //新增
  313. $.ajax({
  314. method: "post",
  315. dataType: "json",
  316. url: globalConfig.context + '/api/admin/customer/addFollow',
  317. data: {
  318. userBusinessList: JSON.stringify(idsList),
  319. uid: this.state.uid,
  320. ocbId: contactsId,
  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. componentWillReceiveProps(nextProps) {
  354. if (nextProps.visitModul && nextProps.followData.id) {
  355. this.setState({
  356. result: '',
  357. contactType: undefined,
  358. visitModul: true,
  359. loading: true,
  360. lastName:undefined,
  361. nub:'',
  362. busModul:false,
  363. addcontactModul:false,
  364. })
  365. this.getNewWoman(nextProps.followData.id);
  366. this.deletelist(nextProps.followData.id)
  367. };
  368. },
  369. render() {
  370. const formItemLayout = {
  371. labelCol: { span: 8 },
  372. wrapperCol: { span: 14 },
  373. };
  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. <FormItem
  389. labelCol={{ span: 4 }}
  390. wrapperCol={{ span: 20 }}
  391. label="拜访方式" >
  392. <Radio.Group value={this.state.contactType} onChange={(e) => {
  393. this.setState({ contactType: e.target.value })
  394. }}>
  395. <Radio value={0}>外出</Radio>
  396. <Radio value={1}>电话</Radio>
  397. <Radio value={2}>QQ</Radio>
  398. <Radio value={3}>微信</Radio>
  399. <Radio value={4}>邮箱</Radio>
  400. </Radio.Group>
  401. <span className="mandatory">*</span>
  402. </FormItem>
  403. <div className="clearfix">
  404. {this.state.contacts?<span></span>:
  405. <FormItem className="half-item"
  406. {...formItemLayout}
  407. label="联系人"
  408. >
  409. <Select placeholder="选择联系人" style={{ width: 140 }}
  410. value={this.state.lastName}
  411. onChange={this.hundleName}>
  412. {this.state.orderStatusOption}
  413. </Select>
  414. <span className="mandatory">*</span>
  415. </FormItem>
  416. }
  417. <FormItem className="half-item"
  418. {...formItemLayout}
  419. >
  420. <Button type="primary" onClick={this.newContacts} style={{marginLeft:'100px'}}>添加新联系人</Button>
  421. </FormItem>
  422. <FormItem className="half-item"
  423. {...formItemLayout}
  424. label="联系电话"
  425. >
  426. <span>{this.state.nub}</span>
  427. </FormItem>
  428. <FormItem className="half-item"
  429. {...formItemLayout}
  430. label="跟进时间"
  431. >
  432. <span>{this.state.followTime}</span>
  433. </FormItem>
  434. </div>
  435. <div className="clearfix">
  436. <FormItem
  437. labelCol={{ span: 4 }}
  438. wrapperCol={{ span: 16 }}
  439. label="跟进备注" >
  440. <Input type="textarea" rows={4} value={this.state.result}
  441. onChange={(e)=>{this.setState({result:e.target.value})}}/>
  442. </FormItem>
  443. </div>
  444. <div className="clearfix">
  445. <div style={{fontSize:'18px',marginLeft:'100px',marginTop:'15px',marginBottom:'10px'}}>业务意向<Button onClick={this.addNew} style={{marginLeft:'420px',background:'green',color:'#ffffff'}}>添加新业务</Button></div>
  446. <div className="clearfix" >
  447. <Spin spinning={this.state.loading}>
  448. <Table
  449. rowKey={record => record.id}
  450. pagination={false}
  451. columns={this.state.intentionList}
  452. dataSource={this.state.data}
  453. />
  454. </Spin>
  455. </div>
  456. </div>
  457. </div>
  458. <FormItem wrapperCol={{ span: 12, offset: 6 }}>
  459. <Button type="primary" size="large" htmlType="submit" style={{marginRight:'150px',marginTop:'20px'}}>保存</Button>
  460. <Button size="large" onClick={this.visitCancel}>取消</Button>
  461. </FormItem>
  462. </Spin>
  463. </Form>
  464. </Modal>
  465. <AddContact
  466. addcontactModul={this.state.addcontactModul}
  467. uids={this.state.uids}
  468. closeFollow={this.closeFollow}
  469. />
  470. <BusName
  471. businessId={this.state.businessId}
  472. mid={this.props.followData.id}
  473. busModul={this.state.busModul}
  474. closeBus={this.closeBus}
  475. />
  476. </div>
  477. )
  478. }
  479. })
  480. export default FollowDetail;