visitDetail.jsx 11 KB

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