visitDetail.jsx 11 KB

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