followDetail.jsx 13 KB

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