followDetail.jsx 13 KB

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