visitDetail.jsx 11 KB

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