visitDetail.jsx 14 KB

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