followDetail.jsx 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575
  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 "../signCustomer/followDetail/addContact";
  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. if(text == 5 && !record.isEdit) {
  63. return (
  64. newFollow.map(function (item) {
  65. if(item.value == text) {
  66. return item.key
  67. }
  68. })
  69. )
  70. }else {
  71. return <Select placeholder="选择最新进度" value={record.followSituation} onChange={(e) => { record.followSituation = e; record.isEdit=true; this.setState({ data: this.state.data }); }}>
  72. {
  73. newFollow.filter((v)=>{return v.value !== "5"}).map(function (item) {
  74. return <Select.Option key={item.value} >{item.key}</Select.Option>
  75. })
  76. }
  77. </Select>
  78. }
  79. }
  80. }, {
  81. title: '最新状态',
  82. width:120,
  83. dataIndex: 'customerStatus',
  84. key: 'customerStatus',
  85. render: (text, record, index) => {
  86. if(record.followSituation == 5 && !record.isEdit) {
  87. return (
  88. customerStatus.map(function (item) {
  89. if(item.value == text) {
  90. return item.key
  91. }
  92. })
  93. )
  94. }else {
  95. return <Select value={record.customerStatus} placeholder="选择最新状态" onChange={(e) => { record.customerStatus = e; this.setState({ data: this.state.data }); }}>
  96. {
  97. customerStatus.map(function (item) {
  98. return <Select.Option key={item.value} >{item.key}</Select.Option>
  99. })
  100. }
  101. </Select>
  102. }
  103. }
  104. }, {
  105. title: '跟进说明',
  106. width:120,
  107. dataIndex: 'remarks',
  108. key: 'remarks',
  109. render: (text, record, index) => {
  110. if(record.followSituation == 5 && !record.isEdit) {
  111. return (
  112. text
  113. )
  114. }else {
  115. return <Input value={record.remarks} placeholder="跟进说明"
  116. onChange={(e) => { record.remarks = e.target.value; this.setState({ data: this.state.data }); }}
  117. />
  118. }
  119. }
  120. }, {
  121. title: '操作',
  122. width:120,
  123. dataIndex: 'rrr',
  124. key: 'rrr',
  125. render: (text, record, index) => {
  126. return <div>
  127. {!record.id&&<Popconfirm title="是否删除?" onConfirm={(e)=>{this.intentionDelet(record,index)}} okText="删除" cancelText="不删除">
  128. <Button style={{marginRight:'10px',color:'#ffffff',background:'#f00',border:'none'}}>删除</Button>
  129. </Popconfirm>}
  130. </div>
  131. }
  132. }
  133. ],
  134. }
  135. },
  136. //选择子项目
  137. businessFn(record,index){
  138. if(!record.businessGlossoryId){
  139. message.warn('请先选择业务名称!');
  140. return;
  141. }
  142. this.setState({
  143. businessId:record.businessGlossoryId,
  144. busModul:true,
  145. index:index,
  146. addcontactModul:false
  147. })
  148. },
  149. closeBus(datas,e,s){
  150. this.state.addcontactModul=e;
  151. this.state.busModul=false;
  152. if(s){
  153. this.state.data[this.state.index].businessName=datas.id;
  154. this.state.data[this.state.index].projectName=datas.name;
  155. this.setState({
  156. busModul:false,
  157. data:this.state.data
  158. })
  159. }
  160. },
  161. //拜访意向服务列表单个删除
  162. intentionDelet(e, index) {
  163. let deteluserBusinessList = (this.state.data).splice(index, 1)
  164. this.setState({
  165. selectedRowKeys: [],
  166. });
  167. },
  168. //拜访modul函数
  169. visitOk(e) {
  170. this.setState({
  171. addcontactModul:false,
  172. visitModul: false
  173. });
  174. },
  175. visitCancel(e) {
  176. this.setState({
  177. addcontactModul:false,
  178. visitModul: false
  179. });
  180. this.props.closeDesc(false,false)
  181. },
  182. //获取联系人下拉框
  183. getNewWoman(ids) {
  184. this.state.data = []
  185. $.ajax({
  186. method: "get",
  187. dataType: "json",
  188. crossDomain: false,
  189. url: globalConfig.context + "/api/admin/customer/findCustomerContacts",
  190. data: {
  191. uid: ids,
  192. },
  193. success: function(data) {
  194. let theArr = [];
  195. let thedata = data.data;
  196. if(!thedata) {
  197. if(data.error && data.error.length) {
  198. message.warning(data.error[0].message);
  199. };
  200. thedata = {};
  201. };
  202. var telNum = [];
  203. var contactIds = [];
  204. thedata.map(function(item, index) {
  205. contactIds.push(thedata[index].id);
  206. telNum.push(thedata[index].mobile);
  207. });
  208. for(let item in data.data) {
  209. let theData = data.data[item];
  210. theArr.push(
  211. <Select.Option value={item} key={theData.name}>{theData.name}</Select.Option>
  212. );
  213. };
  214. this.setState({
  215. contactsIdArr: thedata,
  216. telNum: telNum,
  217. orderStatusOption: theArr,
  218. });
  219. }.bind(this),
  220. }).always(function() {
  221. this.setState({
  222. deletId: ids,
  223. loading: false
  224. });
  225. }.bind(this));
  226. },
  227. //刷新新增拜访记录刷新
  228. deletelist(e) {
  229. this.setState({
  230. loading:true
  231. });
  232. $.ajax({
  233. method: "get",
  234. dataType: "json",
  235. url: globalConfig.context + '/api/admin/customer/toAddFollowOnHistory',
  236. data: {
  237. uid: e,
  238. },
  239. success: function(data) {
  240. let listArr = [];
  241. let thedata = data.data;
  242. if(!thedata) {
  243. if(data.error && data.error.length) {
  244. message.warning(data.error[0].message);
  245. };
  246. thedata = {};
  247. };
  248. for(let i = 0; i < data.data.userBusinessList.length; i++) {
  249. let thisdata = data.data.userBusinessList[i];
  250. listArr.push({
  251. id: thisdata.businessId,
  252. businessName:thisdata.businessProjectId,
  253. businessGlossoryId:i,
  254. businessVarietiesName:thisdata.businessVarietiesName,
  255. businessProjectName:thisdata.businessProjectName,
  256. followSituation: String(thisdata.followSituation),
  257. customerStatus: String(thisdata.customerStatus),
  258. remarks: thisdata.remarks,
  259. });
  260. };
  261. this.setState({
  262. contacts: thedata.contacts,
  263. uid: thedata.uid,
  264. data: listArr,
  265. followTime: thedata.followTime,
  266. remarks: thedata.remarks,
  267. });
  268. }.bind(this),
  269. }).always(function() {
  270. this.setState({
  271. loading: false
  272. });
  273. }.bind(this));
  274. },
  275. //当选择联系人的列表变化时,则执行
  276. hundleName(e) {
  277. let changNub = this.state.telNum[e];
  278. this.setState({
  279. nub: this.state.telNum[e],
  280. lastName: e,
  281. });
  282. },
  283. //点击添加联系人
  284. newContacts() {
  285. this.setState({
  286. busModul:false,
  287. uids: this.state.uid,
  288. addcontactModul: true
  289. });
  290. },
  291. //页面刷新
  292. closeFollow(e, s) {
  293. this.state.addcontactModul=false;
  294. this.state.visitModul = true;
  295. if(s) {
  296. this.getNewWoman(this.props.followData.id);
  297. this.deletelist(this.props.followData.id)
  298. };
  299. },
  300. //详情保存
  301. visitSubmit(e){
  302. e.preventDefault();
  303. let GlossoryId=false;
  304. this.state.data.map(function(item) {
  305. if(!item.followSituation||!item.customerStatus||!item.businessName) {
  306. GlossoryId = true
  307. }
  308. })
  309. if(this.state.contactType == undefined) {
  310. message.warning('请选择拜访方式')
  311. return false;
  312. };
  313. if(this.state.lastName == undefined) {
  314. message.warning('请选择联系人')
  315. return false;
  316. }
  317. if (this.state.result.length<10) {
  318. message.warning("备注不少于10个字符!");
  319. return false;
  320. }
  321. if(this.state.data.length&&GlossoryId) {
  322. message.warning("项目名称/最新进度/最新状态不能为空!")
  323. return false;
  324. };
  325. let dataList=this.state.data,
  326. idsList=[];
  327. dataList.map((item,index) => {
  328. idsList.push({
  329. businessId:item.id||'',
  330. businessProjectId:item.businessName,
  331. customerStatus:item.customerStatus,
  332. followSituation:item.followSituation,
  333. remarks:item.remarks||''
  334. })
  335. })
  336. this.setState({
  337. loading: true
  338. });
  339. let contactsId = '';
  340. let conts = this.state.lastName;
  341. contactsId = this.state.contactsIdArr[conts].id;
  342. //新增
  343. $.ajax({
  344. method: "post",
  345. dataType: "json",
  346. url: globalConfig.context + '/api/admin/customer/addFollow',
  347. data: {
  348. userBusinessList: JSON.stringify(idsList),
  349. uid: this.state.uid,
  350. ocbId: contactsId,
  351. contactType: this.state.contactType,
  352. result: this.state.result,
  353. followTime: this.state.followTime,
  354. }
  355. }).done(function(data) {
  356. this.setState({
  357. loading: false
  358. });
  359. if(!data.error.length) {
  360. message.success('保存成功!');
  361. this.props.closeDesc(false,true)
  362. this.visitCancel();
  363. } else {
  364. message.warning(data.error[0].message);
  365. }
  366. }.bind(this));
  367. },
  368. //添加新业务
  369. addNew(){
  370. this.state.data.push({
  371. isEdit: true,
  372. projectName:'选择',
  373. businessName:'',
  374. customerStatus: undefined,
  375. businessGlossoryId: undefined,
  376. followSituation: undefined,
  377. remarks: '',
  378. });
  379. this.setState({
  380. addcontactModul:false,
  381. data: this.state.data
  382. })
  383. },
  384. componentWillReceiveProps(nextProps) {
  385. if (nextProps.visitModul && nextProps.followData.id) {
  386. this.setState({
  387. result: '',
  388. contactType: undefined,
  389. visitModul: true,
  390. loading: true,
  391. lastName:undefined,
  392. nub:'',
  393. busModul:false,
  394. addcontactModul:false,
  395. })
  396. this.getNewWoman(nextProps.followData.id);
  397. this.deletelist(nextProps.followData.id)
  398. };
  399. },
  400. render() {
  401. const formItemLayout = {
  402. labelCol: { span: 8 },
  403. wrapperCol: { span: 14 },
  404. };
  405. return (
  406. <div>
  407. <Modal
  408. maskClosable={false}
  409. className="customeDetails"
  410. footer=""
  411. title="新增客户跟进"
  412. width="1000px"
  413. visible={this.state.visitModul}
  414. onOk={this.visitOk}
  415. onCancel={this.visitCancel}
  416. >
  417. <Form
  418. layout="horizontal"
  419. id="demand-form"
  420. onSubmit={this.visitSubmit}
  421. >
  422. <Spin spinning={this.state.loading}>
  423. <div className="clearfix">
  424. <FormItem
  425. labelCol={{ span: 4 }}
  426. wrapperCol={{ span: 20 }}
  427. label="跟进方式"
  428. >
  429. <Radio.Group
  430. value={this.state.contactType}
  431. onChange={(e) => {
  432. this.setState({ contactType: e.target.value });
  433. }}
  434. >
  435. {/*<Radio value={0}>外出</Radio>*/}
  436. <Radio value={1}>电话</Radio>
  437. <Radio value={2}>QQ</Radio>
  438. <Radio value={3}>微信</Radio>
  439. <Radio value={4}>邮箱</Radio>
  440. <Radio value={6}>来访面谈</Radio>
  441. </Radio.Group>
  442. <span className="mandatory">*</span>
  443. </FormItem>
  444. <div className="clearfix">
  445. {this.state.contacts ? (
  446. <span></span>
  447. ) : (
  448. <FormItem
  449. className="half-item"
  450. {...formItemLayout}
  451. label="联系人"
  452. >
  453. <Select
  454. placeholder="选择联系人"
  455. style={{ width: 140 }}
  456. value={this.state.lastName}
  457. onChange={this.hundleName}
  458. >
  459. {this.state.orderStatusOption}
  460. </Select>
  461. <span className="mandatory">*</span>
  462. </FormItem>
  463. )}
  464. <FormItem className="half-item" {...formItemLayout}>
  465. <Button
  466. type="primary"
  467. onClick={this.newContacts}
  468. style={{ marginLeft: "100px" }}
  469. >
  470. 添加新联系人
  471. </Button>
  472. </FormItem>
  473. <FormItem
  474. className="half-item"
  475. {...formItemLayout}
  476. label="联系电话"
  477. >
  478. <span>{this.state.nub}</span>
  479. </FormItem>
  480. <FormItem
  481. className="half-item"
  482. {...formItemLayout}
  483. label="跟进时间"
  484. >
  485. <span>{this.state.followTime}</span>
  486. </FormItem>
  487. </div>
  488. <div className="clearfix">
  489. <FormItem
  490. labelCol={{ span: 4 }}
  491. wrapperCol={{ span: 16 }}
  492. label="跟进备注"
  493. >
  494. <span className="mandatory">*<span style={{marginLeft:'10px'}}>客户跟进情况描述(企业上年度销售额,互动情况等.)</span></span>
  495. <Input
  496. type="textarea"
  497. rows={4}
  498. value={this.state.result}
  499. placeholder="请输入客户沟通情况与跟进信息,不少于10字"
  500. required="required"
  501. onChange={(e) => {
  502. this.setState({ result: e.target.value });
  503. }}
  504. />
  505. </FormItem>
  506. </div>
  507. <div className="clearfix">
  508. <div
  509. style={{
  510. fontSize: "18px",
  511. marginLeft: "100px",
  512. marginTop: "15px",
  513. marginBottom: "10px",
  514. }}
  515. >
  516. 业务意向
  517. <Button
  518. onClick={this.addNew}
  519. style={{
  520. marginLeft: "420px",
  521. background: "green",
  522. color: "#ffffff",
  523. }}
  524. >
  525. 添加新业务
  526. </Button>
  527. </div>
  528. <div className="clearfix">
  529. <Spin spinning={this.state.loading}>
  530. <Table
  531. size="middle"
  532. rowKey={(record) => record.id}
  533. pagination={false}
  534. columns={this.state.intentionList}
  535. dataSource={this.state.data}
  536. />
  537. </Spin>
  538. </div>
  539. </div>
  540. </div>
  541. <FormItem wrapperCol={{ span: 12, offset: 6 }}>
  542. <Button
  543. type="primary"
  544. size="large"
  545. htmlType="submit"
  546. style={{ marginRight: "150px", marginTop: "20px" }}
  547. >
  548. 保存
  549. </Button>
  550. <Button size="large" onClick={this.visitCancel}>
  551. 取消
  552. </Button>
  553. </FormItem>
  554. </Spin>
  555. </Form>
  556. </Modal>
  557. <AddContact
  558. addcontactModul={this.state.addcontactModul}
  559. uids={this.state.uids}
  560. closeFollow={this.closeFollow}
  561. />
  562. <BusName
  563. businessId={this.state.businessId}
  564. mid={this.props.followData ? this.props.followData.id : ""}
  565. busModul={this.state.busModul}
  566. closeBus={this.closeBus}
  567. />
  568. </div>
  569. );
  570. }
  571. })
  572. export default FollowDetail;