visitDetail.jsx 13 KB

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