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