visitDetail.jsx 12 KB

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