followDetail.jsx 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480
  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 AddContact from './followDetail/addContact.jsx';
  9. const FollowDetail = React.createClass({
  10. getInitialState() {
  11. return {
  12. visitModul: false,
  13. loading: false,
  14. data: [],
  15. busModul: false,
  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 => { return getfllowSituation(text) }
  35. }, {
  36. title: '最新状态',
  37. width: 120,
  38. dataIndex: 'customerStatus',
  39. key: 'customerStatus',
  40. render: text => { return getcustomerStatue(text) }
  41. }, {
  42. title: '跟进说明',
  43. width: 120,
  44. dataIndex: 'remarks',
  45. key: 'remarks',
  46. }, {
  47. title: '操作',
  48. width: 120,
  49. dataIndex: 'rrr',
  50. key: 'rrr',
  51. render: (text, record, index) => {
  52. return <div>
  53. <Popconfirm title="再次签单?" onConfirm={(e) => { this.intentionDelet(record, index) }} okText="再次签单" cancelText="取消">
  54. <Button style={{ marginRight: '10px', color: '#ffffff', background: '#58a3ff', border: 'none' }}>签单</Button>
  55. </Popconfirm>
  56. </div>
  57. }
  58. }
  59. ],
  60. }
  61. },
  62. //拜访意向服务列表单个删除
  63. intentionDelet(e, index) {
  64. this.setState({
  65. loading: true,
  66. selectedRowKeys: [],
  67. });
  68. $.ajax({
  69. method: "get",
  70. dataType: "json",
  71. crossDomain: false,
  72. url: globalConfig.context + "/api/admin/customer/againProjectTask",
  73. data: {
  74. uid: e.uids,
  75. projectId: e.businessName,
  76. }
  77. }).done(function (data) {
  78. if (!data.error.length) {
  79. message.success('签单成功');
  80. if (this.props.isFlag) {
  81. this.deletelist(this.props.followData.id)
  82. } else {
  83. this.props.loadData();
  84. }
  85. this.setState({
  86. loading: false,
  87. });
  88. } else {
  89. message.warning(data.error[0].message);
  90. };
  91. //this.deletelist(this.props.followData.id)
  92. }.bind(this));
  93. },
  94. //拜访modul函数
  95. visitOk(e) {
  96. this.setState({
  97. addcontactModul: false,
  98. visitModul: false
  99. });
  100. },
  101. visitCancel(e) {
  102. console.log('00')
  103. this.setState({
  104. addcontactModul: false,
  105. visitModul: false
  106. });
  107. // this.props.closeDesc(false, false)
  108. },
  109. //获取联系人下拉框
  110. getNewWoman(ids) {
  111. this.state.data = []
  112. $.ajax({
  113. method: "get",
  114. dataType: "json",
  115. crossDomain: false,
  116. url: globalConfig.context + "/api/admin/customer/findCustomerContacts",
  117. data: {
  118. uid: ids,
  119. },
  120. success: function (data) {
  121. let theArr = [];
  122. let thedata = data.data;
  123. if (!thedata) {
  124. if (data.error && data.error.length) {
  125. message.warning(data.error[0].message);
  126. };
  127. thedata = {};
  128. };
  129. var telNum = [];
  130. var contactIds = [];
  131. thedata.map(function (item, index) {
  132. contactIds.push(thedata[index].id);
  133. telNum.push(thedata[index].mobile);
  134. });
  135. for (let item in data.data) {
  136. let theData = data.data[item];
  137. theArr.push(
  138. <Select.Option value={item} key={theData.name}>{theData.name}</Select.Option>
  139. );
  140. };
  141. this.setState({
  142. contactsIdArr: thedata,
  143. telNum: telNum,
  144. orderStatusOption: theArr,
  145. });
  146. }.bind(this),
  147. }).always(function () {
  148. this.setState({
  149. deletId: ids,
  150. loading: false
  151. });
  152. }.bind(this));
  153. },
  154. //刷新新增拜访记录刷新
  155. deletelist(e) {
  156. this.setState({
  157. loading: true
  158. })
  159. $.ajax({
  160. method: "get",
  161. dataType: "json",
  162. url: globalConfig.context + '/api/admin/customer/toAddFollowOnLock',
  163. data: {
  164. uid: e,
  165. },
  166. success: function (data) {
  167. let listArr = [];
  168. let thedata = data.data;
  169. if (!thedata) {
  170. if (data.error && data.error.length) {
  171. message.warning(data.error[0].message);
  172. };
  173. thedata = {};
  174. };
  175. if (data.data.userBusinessList[0] != null) {
  176. for (let i = 0; i < data.data.userBusinessList.length; i++) {
  177. let thisdata = data.data.userBusinessList[i];
  178. if (thisdata != null) {
  179. listArr.push({
  180. key: i,
  181. id: thisdata.businessId,
  182. businessName: thisdata.businessProjectId,
  183. businessVarietiesName: thisdata.businessVarietiesName,
  184. businessProjectName: thisdata.businessProjectName,
  185. followSituation: thisdata.followSituation == null ? undefined : String(thisdata.followSituation),
  186. customerStatus: thisdata.customerStatus == null ? undefined : String(thisdata.customerStatus),
  187. remarks: thisdata.remarks,
  188. uid: thisdata.uid,
  189. uids: data.data.uid
  190. });
  191. }
  192. };
  193. }
  194. this.setState({
  195. contacts: thedata.contacts,
  196. uids: data.data.uid,
  197. uid: thedata.uid,
  198. data: listArr,
  199. followTime: thedata.followTime,
  200. remarks: thedata.remarks,
  201. });
  202. }.bind(this),
  203. }).always(function () {
  204. this.setState({
  205. loading: false
  206. });
  207. }.bind(this));
  208. },
  209. //当选择联系人的列表变化时,则执行
  210. hundleName(e) {
  211. let changNub = this.state.telNum[e];
  212. this.setState({
  213. nub: this.state.telNum[e],
  214. lastName: e,
  215. });
  216. },
  217. //点击添加联系人
  218. newContacts() {
  219. this.setState({
  220. busModul: false,
  221. uids: this.state.uid,
  222. addcontactModul: true
  223. });
  224. },
  225. //页面刷新
  226. closeFollow(e, s) {
  227. this.state.addcontactModul = false;
  228. this.state.visitModul = true;
  229. if (s) {
  230. this.getNewWoman(this.props.followData.id);
  231. this.deletelist(this.props.followData.id)
  232. };
  233. },
  234. //详情保存
  235. visitSubmit(e) {
  236. e.preventDefault();
  237. let GlossoryId = false;
  238. this.state.data.map(function (item) {
  239. if (!item.followSituation || !item.customerStatus || !item.businessName) {
  240. GlossoryId = true
  241. }
  242. })
  243. if (this.state.contactType == undefined) {
  244. message.warning('请选择拜访方式')
  245. return false;
  246. };
  247. if (this.state.lastName == undefined) {
  248. message.warning('请选择联系人')
  249. return false;
  250. }
  251. if (this.state.result.length < 10) {
  252. message.warning("备注不少于10个字符!");
  253. return false;
  254. }
  255. if (this.state.data.length && GlossoryId) {
  256. message.warning("项目名称/最新进度/最新状态不能为空!")
  257. return false;
  258. };
  259. this.setState({
  260. loading: true
  261. });
  262. let dataList = this.state.data,
  263. idsList = [];
  264. dataList.map((item, index) => {
  265. idsList.push({
  266. businessId: item.id || '',
  267. businessProjectId: item.businessName,
  268. customerStatus: item.customerStatus,
  269. followSituation: item.followSituation,
  270. remarks: item.remarks || ''
  271. })
  272. });
  273. let contactsId = '';
  274. let conts = this.state.lastName;
  275. contactsId = this.state.contactsIdArr[conts].id;
  276. //新增
  277. $.ajax({
  278. method: "post",
  279. dataType: "json",
  280. url: globalConfig.context + '/api/admin/customer/addFollow',
  281. data: {
  282. userBusinessList: JSON.stringify(idsList),
  283. uid: this.state.uid,
  284. ocbId: contactsId,
  285. contactType: this.state.contactType,
  286. result: this.state.result,
  287. followTime: this.state.followTime,
  288. }
  289. }).done(function (data) {
  290. this.setState({
  291. loading: false
  292. });
  293. if (!data.error.length) {
  294. message.success('保存成功!');
  295. this.props.closeDesc(false, true);
  296. this.visitCancel();
  297. this.props.loadData();
  298. } else {
  299. message.warning(data.error[0].message);
  300. }
  301. }.bind(this));
  302. },
  303. componentWillReceiveProps(nextProps) {
  304. if (nextProps.visitModul && nextProps.followData.id) {
  305. this.setState({
  306. result: '',
  307. contactType: undefined,
  308. visitModul: true,
  309. loading: true,
  310. lastName: undefined,
  311. nub: '',
  312. busModul: false,
  313. addcontactModul: false
  314. })
  315. this.getNewWoman(nextProps.followData.id);
  316. this.deletelist(nextProps.followData.id)
  317. };
  318. },
  319. render() {
  320. const formItemLayout = {
  321. labelCol: { span: 8 },
  322. wrapperCol: { span: 14 },
  323. };
  324. return (
  325. <div>
  326. <Modal
  327. maskClosable={false}
  328. className="customeDetails"
  329. footer=""
  330. title="客户跟进详情"
  331. width="1200px"
  332. visible={this.state.visitModul}
  333. onOk={this.visitOk}
  334. onCancel={this.visitCancel}
  335. >
  336. <Form
  337. layout="horizontal"
  338. id="demand-form"
  339. onSubmit={this.visitSubmit}
  340. >
  341. <Spin spinning={this.state.loading}>
  342. <div className="clearfix">
  343. <FormItem
  344. labelCol={{ span: 4 }}
  345. wrapperCol={{ span: 20 }}
  346. label="跟进方式"
  347. >
  348. <Radio.Group
  349. value={this.state.contactType}
  350. onChange={(e) => {
  351. this.setState({ contactType: e.target.value });
  352. }}
  353. >
  354. {/*<Radio value={0}>外出</Radio>*/}
  355. <Radio value={1}>电话</Radio>
  356. <Radio value={2}>QQ</Radio>
  357. <Radio value={3}>微信</Radio>
  358. <Radio value={4}>邮箱</Radio>
  359. <Radio value={6}>来访面谈</Radio>
  360. </Radio.Group>
  361. <span className="mandatory">*</span>
  362. </FormItem>
  363. <div className="clearfix">
  364. {this.state.contacts ? (
  365. <span></span>
  366. ) : (
  367. <FormItem
  368. className="half-item"
  369. {...formItemLayout}
  370. label="联系人"
  371. >
  372. <Select
  373. placeholder="选择联系人"
  374. style={{ width: 140 }}
  375. value={this.state.lastName}
  376. onChange={this.hundleName}
  377. >
  378. {this.state.orderStatusOption}
  379. </Select>
  380. <span className="mandatory">*</span>
  381. </FormItem>
  382. )}
  383. <FormItem className="half-item" {...formItemLayout}>
  384. <Button
  385. type="primary"
  386. onClick={this.newContacts}
  387. style={{ marginLeft: "100px" }}
  388. >
  389. 添加新联系人
  390. </Button>
  391. </FormItem>
  392. <FormItem
  393. className="half-item"
  394. {...formItemLayout}
  395. label="联系电话"
  396. >
  397. <span>{this.state.nub}</span>
  398. </FormItem>
  399. <FormItem
  400. className="half-item"
  401. {...formItemLayout}
  402. label="跟进时间"
  403. >
  404. <span>{this.state.followTime}</span>
  405. </FormItem>
  406. </div>
  407. <div className="clearfix">
  408. <FormItem
  409. labelCol={{ span: 4 }}
  410. wrapperCol={{ span: 16 }}
  411. label="跟进备注"
  412. >
  413. <span className="mandatory">*</span>
  414. <Input
  415. type="textarea"
  416. rows={4}
  417. value={this.state.result}
  418. placeholder="请输入客户沟通情况与跟进信息,不少于10字"
  419. required="required"
  420. onChange={(e) => {
  421. this.setState({ result: e.target.value });
  422. }}
  423. />
  424. </FormItem>
  425. </div>
  426. <div className="clearfix">
  427. <div
  428. style={{
  429. fontSize: "18px",
  430. marginLeft: "100px",
  431. marginTop: "15px",
  432. marginBottom: "10px",
  433. }}
  434. >
  435. 业务意向
  436. </div>
  437. <div className="clearfix">
  438. <Spin spinning={this.state.loading}>
  439. <Table
  440. size="middle"
  441. pagination={false}
  442. columns={this.state.intentionList}
  443. dataSource={this.state.data}
  444. />
  445. </Spin>
  446. </div>
  447. </div>
  448. </div>
  449. <FormItem wrapperCol={{ span: 12, offset: 6 }}>
  450. <Button
  451. type="primary"
  452. size="large"
  453. htmlType="submit"
  454. style={{ marginRight: "150px", marginTop: "20px" }}
  455. >
  456. 保存
  457. </Button>
  458. <Button size="large" onClick={this.visitCancel}>
  459. 取消
  460. </Button>
  461. </FormItem>
  462. </Spin>
  463. </Form>
  464. </Modal>
  465. <AddContact
  466. addcontactModul={this.state.addcontactModul}
  467. uids={this.state.uids}
  468. closeFollow={this.closeFollow}
  469. />
  470. </div>
  471. );
  472. }
  473. })
  474. export default FollowDetail;