visitDetail.jsx 10.0 KB

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