followDetail.jsx 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479
  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.result.length < 10) {
  251. message.warning("备注不少于10个字符!");
  252. return false;
  253. }
  254. if(this.state.data.length&&GlossoryId) {
  255. message.warning("项目名称/最新进度/最新状态不能为空!")
  256. return false;
  257. };
  258. this.setState({
  259. loading: true
  260. });
  261. let dataList=this.state.data,
  262. idsList=[];
  263. dataList.map((item,index) => {
  264. idsList.push({
  265. businessId:item.id||'',
  266. businessProjectId:item.businessName,
  267. customerStatus:item.customerStatus,
  268. followSituation:item.followSituation,
  269. remarks:item.remarks||''
  270. })
  271. });
  272. let contactsId = '';
  273. let conts = this.state.lastName;
  274. contactsId = this.state.contactsIdArr[conts].id;
  275. //新增
  276. $.ajax({
  277. method: "post",
  278. dataType: "json",
  279. url: globalConfig.context + '/api/admin/customer/addFollow',
  280. data: {
  281. userBusinessList: JSON.stringify(idsList),
  282. uid: this.state.uid,
  283. ocbId: contactsId,
  284. contactType: this.state.contactType,
  285. result: this.state.result,
  286. followTime: this.state.followTime,
  287. }
  288. }).done(function(data) {
  289. this.setState({
  290. loading: false
  291. });
  292. if(!data.error.length) {
  293. message.success('保存成功!');
  294. this.props.closeDesc(false,true);
  295. this.visitCancel();
  296. this.props.loadData();
  297. } else {
  298. message.warning(data.error[0].message);
  299. }
  300. }.bind(this));
  301. },
  302. componentWillReceiveProps(nextProps) {
  303. if (nextProps.visitModul && nextProps.followData.id) {
  304. this.setState({
  305. result: '',
  306. contactType: undefined,
  307. visitModul: true,
  308. loading: true,
  309. lastName:undefined,
  310. nub:'',
  311. busModul:false,
  312. addcontactModul:false
  313. })
  314. this.getNewWoman(nextProps.followData.id);
  315. this.deletelist(nextProps.followData.id)
  316. };
  317. },
  318. render() {
  319. const formItemLayout = {
  320. labelCol: { span: 8 },
  321. wrapperCol: { span: 14 },
  322. };
  323. return (
  324. <div>
  325. <Modal
  326. maskClosable={false}
  327. className="customeDetails"
  328. footer=""
  329. title="客户跟进详情"
  330. width="1000px"
  331. visible={this.state.visitModul}
  332. onOk={this.visitOk}
  333. onCancel={this.visitCancel}
  334. >
  335. <Form
  336. layout="horizontal"
  337. id="demand-form"
  338. onSubmit={this.visitSubmit}
  339. >
  340. <Spin spinning={this.state.loading}>
  341. <div className="clearfix">
  342. <FormItem
  343. labelCol={{ span: 4 }}
  344. wrapperCol={{ span: 20 }}
  345. label="跟进方式"
  346. >
  347. <Radio.Group
  348. value={this.state.contactType}
  349. onChange={(e) => {
  350. this.setState({ contactType: e.target.value });
  351. }}
  352. >
  353. {/*<Radio value={0}>外出</Radio>*/}
  354. <Radio value={1}>电话</Radio>
  355. <Radio value={2}>QQ</Radio>
  356. <Radio value={3}>微信</Radio>
  357. <Radio value={4}>邮箱</Radio>
  358. <Radio value={6}>来访面谈</Radio>
  359. </Radio.Group>
  360. <span className="mandatory">*</span>
  361. </FormItem>
  362. <div className="clearfix">
  363. {this.state.contacts ? (
  364. <span></span>
  365. ) : (
  366. <FormItem
  367. className="half-item"
  368. {...formItemLayout}
  369. label="联系人"
  370. >
  371. <Select
  372. placeholder="选择联系人"
  373. style={{ width: 140 }}
  374. value={this.state.lastName}
  375. onChange={this.hundleName}
  376. >
  377. {this.state.orderStatusOption}
  378. </Select>
  379. <span className="mandatory">*</span>
  380. </FormItem>
  381. )}
  382. <FormItem className="half-item" {...formItemLayout}>
  383. <Button
  384. type="primary"
  385. onClick={this.newContacts}
  386. style={{ marginLeft: "100px" }}
  387. >
  388. 添加新联系人
  389. </Button>
  390. </FormItem>
  391. <FormItem
  392. className="half-item"
  393. {...formItemLayout}
  394. label="联系电话"
  395. >
  396. <span>{this.state.nub}</span>
  397. </FormItem>
  398. <FormItem
  399. className="half-item"
  400. {...formItemLayout}
  401. label="跟进时间"
  402. >
  403. <span>{this.state.followTime}</span>
  404. </FormItem>
  405. </div>
  406. <div className="clearfix">
  407. <FormItem
  408. labelCol={{ span: 4 }}
  409. wrapperCol={{ span: 16 }}
  410. label="跟进备注"
  411. >
  412. <span className="mandatory">*</span>
  413. <Input
  414. type="textarea"
  415. rows={4}
  416. value={this.state.result}
  417. placeholder="请输入客户沟通情况与跟进信息,不少于10字"
  418. required="required"
  419. onChange={(e) => {
  420. this.setState({ result: e.target.value });
  421. }}
  422. />
  423. </FormItem>
  424. </div>
  425. <div className="clearfix">
  426. <div
  427. style={{
  428. fontSize: "18px",
  429. marginLeft: "100px",
  430. marginTop: "15px",
  431. marginBottom: "10px",
  432. }}
  433. >
  434. 业务意向
  435. </div>
  436. <div className="clearfix">
  437. <Spin spinning={this.state.loading}>
  438. <Table
  439. size="middle"
  440. pagination={false}
  441. columns={this.state.intentionList}
  442. dataSource={this.state.data}
  443. />
  444. </Spin>
  445. </div>
  446. </div>
  447. </div>
  448. <FormItem wrapperCol={{ span: 12, offset: 6 }}>
  449. <Button
  450. type="primary"
  451. size="large"
  452. htmlType="submit"
  453. style={{ marginRight: "150px", marginTop: "20px" }}
  454. >
  455. 保存
  456. </Button>
  457. <Button size="large" onClick={this.visitCancel}>
  458. 取消
  459. </Button>
  460. </FormItem>
  461. </Spin>
  462. </Form>
  463. </Modal>
  464. <AddContact
  465. addcontactModul={this.state.addcontactModul}
  466. uids={this.state.uids}
  467. closeFollow={this.closeFollow}
  468. />
  469. </div>
  470. );
  471. }
  472. })
  473. export default FollowDetail;