companyCustomer.jsx 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562
  1. import React from 'react';
  2. import { AutoComplete, Icon, Button, Input, InputNumber, Select, Spin, Table, message, Modal, Row, Col, DatePicker,Switch,Upload} from 'antd';
  3. import ajax from 'jquery/src/ajax/xhr.js';
  4. import $ from 'jquery/src/ajax';
  5. import moment from 'moment';
  6. import './myClient.less';
  7. import { orderStatusList,cityArr,customerStatus,intentionalService,newFollow} from '../../dataDic.js';
  8. import { beforeUploadFile,getOrderStatus, getSearchUrl,getcustomerTyp,getcityArr,getcustomerStatue,getCompanyIntention,getfllowSituation,getsex} from '../../tools.js';
  9. //查询功能和初始列表
  10. const PublicCustomer = React.createClass({
  11. loadData(pageNumber, detailApiUrl) {
  12. this.state.data = [];
  13. this.setState({
  14. loading: true
  15. });
  16. $.ajax({
  17. method: "post",
  18. dataType: "json",
  19. crossDomain: false,
  20. url:globalConfig.context +'/api/admin/customer/listCompanyCustomer',
  21. data: {
  22. pageNumber: pageNumber || 1,
  23. pageSize: this.state.pagination.pageSize,
  24. companyName: this.state.companyName, //名称1
  25. customerType: this.state.customerType, //客户类型1
  26. locationProvince:this.state.locationProvince,//地区
  27. customerStatus:this.state.customerStatus,//客户状态1
  28. contactName:this.state.contactName,//联系人姓名1
  29. contactTel:this.state.contactTel,//联系人手机
  30. companyIntention:this.state.companyIntention,//意向服务
  31. followSituation:this.state.followSituation,//最新跟进进度
  32. //releaseDateStartDate: this.state.releaseDate[0],
  33. //releaseDateEndDate: this.state.releaseDate[1],
  34. },
  35. success: function (data) {
  36. let theArr = [];
  37. if (!data.data || !data.data.list) {
  38. if (data.error && data.error.length) {
  39. message.warning(data.error[0].message);
  40. };
  41. } else {
  42. for (let i = 0; i < data.data.list.length; i++) {
  43. let thisdata = data.data.list[i];
  44. theArr.push({
  45. key: i,
  46. id: thisdata.id,
  47. companyName:thisdata.companyName,//公司名称
  48. customerType:thisdata.customerType,
  49. _customerType:thisdata._customerType,//客户类型
  50. locationProvince:thisdata.locationProvince,//地区
  51. contactName:thisdata.contactName, //联系人姓名
  52. telNum:thisdata.telNum,//手机号
  53. _customerStatus:thisdata._customerStatus,//客户状态
  54. _companyIntention:thisdata._companyIntention,//意向服务
  55. _followSituation:thisdata._followSituation,//最新跟进
  56. customerStatus:thisdata.customerStatus,//客户状态
  57. companyIntention:thisdata.companyIntention,//意向服务
  58. followSituation:thisdata.followSituation,//最新跟进
  59. adminName:thisdata.adminName, //跟进人
  60. followDate:thisdata.followDate,
  61. customerStatus:thisdata.customerStatus,//客户状态
  62. companyIntention:thisdata.companyIntention,//意向服务
  63. });
  64. };
  65. this.state.pagination.current = data.data.pageNumber;
  66. this.state.pagination.total = data.data.totalCount;
  67. };
  68. this.setState({
  69. dataSource: theArr,
  70. pagination: this.state.pagination
  71. });
  72. }.bind(this),
  73. }).always(function () {
  74. this.setState({
  75. loading: false
  76. });
  77. }.bind(this));
  78. },
  79. //领取
  80. handleSubmit (e) {
  81. let uids;
  82. let beforeCustomerStatus;
  83. let beforeFollowSituation;
  84. let beforeCustomerIntention;
  85. for (let idx = 0; idx < this.state.selectedRows.length; idx++) {
  86. let rowItem = this.state.selectedRows[idx];
  87. if (rowItem.id) {
  88. uids=rowItem.id;
  89. beforeCustomerStatus=rowItem.customerStatus;
  90. beforeFollowSituation=rowItem.followSituation;
  91. beforeCustomerIntention=rowItem.companyIntention;
  92. };
  93. };
  94. this.setState({
  95. loading: true
  96. });
  97. $.ajax({
  98. method: "POST",
  99. dataType: "json",
  100. crossDomain: false,
  101. url: globalConfig.context + '/api/admin/customer/receivePublicCustomer',
  102. data: {
  103. id: uids,
  104. beforeCustomerIntention:beforeCustomerIntention,
  105. beforeCustomerStatus:beforeCustomerStatus,
  106. beforeFollowSituation:beforeFollowSituation,
  107. }
  108. }).done(function (data) {
  109. this.setState({
  110. loading: false
  111. });
  112. if (!data.error.length) {
  113. message.success('领取成功!');
  114. this.setcancel();
  115. } else {
  116. message.warning(data.error[0].message);
  117. };
  118. }.bind(this));
  119. },
  120. //查看详情
  121. Detailload(deletedIds){
  122. $.ajax({
  123. method: "post",
  124. dataType: "json",
  125. crossDomain: false,
  126. url: globalConfig.context + '/api/admin/customer/findCustomerDetails',
  127. data: {
  128. id: deletedIds
  129. },
  130. success: function (data) {
  131. let thisData = data.data;
  132. if (!thisData) {
  133. if (data.error && data.error.length) {
  134. message.warning(data.error[0].message);
  135. };
  136. thisData = {};
  137. };
  138. this.setState({
  139. data: thisData,
  140. followSituation:thisData.followSituation,
  141. customerStatus:thisData.customerStatus,
  142. });
  143. }.bind(this),
  144. }).always(function () {
  145. this.setState({
  146. loading: false
  147. });
  148. }.bind(this));
  149. },
  150. getInitialState() {
  151. return {
  152. searchMore: true,
  153. searchType: 0,
  154. validityPeriodDate: [],
  155. releaseDate: [],
  156. selectedRowKeys: [],
  157. selectedRows: [],
  158. loading: false,
  159. pagination: {
  160. defaultCurrent: 1,
  161. defaultPageSize: 10,
  162. showQuickJumper: true,
  163. pageSize: 10,
  164. onChange: function (page) {
  165. this.loadData(page);
  166. }.bind(this),
  167. showTotal: function (total) {
  168. return '共' + total + '条数据';
  169. }
  170. },
  171. contactInformation:[
  172. {
  173. title: '姓名',
  174. dataIndex: 'contactName',
  175. key: 'contactName'
  176. },{
  177. title: '性别',
  178. dataIndex: 'sex',
  179. key: 'sex',
  180. render: text => { return getsex(text); }
  181. },
  182. {
  183. title: '手机号码',
  184. dataIndex: 'telNum',
  185. key: 'telNum'
  186. },{
  187. title: '座机号',
  188. dataIndex: 'mobile',
  189. key: 'mobile'
  190. },{
  191. title: 'QQ号码',
  192. dataIndex: 'qq',
  193. key: 'qq'
  194. },{
  195. title: '邮箱号',
  196. dataIndex: 'email',
  197. key: 'email'
  198. },{
  199. title: '微信',
  200. dataIndex: 'wechat',
  201. key: 'wechat'
  202. },{
  203. title: '部门',
  204. dataIndex: 'depatrment',
  205. key: 'depatrment'
  206. },{
  207. title: '职位',
  208. dataIndex: 'customerPosition',
  209. key: 'customerPosition'
  210. },
  211. ],
  212. columns: [
  213. {
  214. title: '公司名称',
  215. dataIndex: 'companyName',
  216. key: 'companyName',
  217. }, {
  218. title: '客户类型',
  219. dataIndex: '_customerType',
  220. key: '_customerType',
  221. //render: text => { return getcustomerTyp(text); }
  222. }, {
  223. title: '地区',
  224. dataIndex: 'locationProvince',
  225. key: 'locationProvince',
  226. render: text => { return getcityArr(text); }
  227. }, {
  228. title: '联系人姓名',
  229. dataIndex: 'contactName',
  230. key: 'contactName',
  231. },
  232. {
  233. title: '手机号',
  234. dataIndex: 'telNum',
  235. key:'telNum',
  236. },
  237. {
  238. title: '客户状态',
  239. dataIndex: '_customerStatus',
  240. key: '_customerStatus',
  241. //render: text => { return getcustomerStatue(text) }
  242. },
  243. {
  244. title: '意向服务',
  245. dataIndex: '_companyIntention',
  246. key: '_companyIntention',
  247. //render: text => { return getCompanyIntention(text) }
  248. },
  249. {
  250. title: '最新跟进',
  251. dataIndex: '_followSituation',
  252. key: '_followSituation',
  253. //render: text => { return getfllowSituation(text) }
  254. },
  255. {
  256. title: '跟单人',
  257. dataIndex: 'adminName',
  258. key: 'adminName',
  259. },
  260. {
  261. title: '时间',
  262. dataIndex: 'followDate',
  263. key: 'followDate',
  264. }
  265. ],
  266. dataSource: [],
  267. searchTime: [],
  268. };
  269. },
  270. componentWillMount() {
  271. let theArr = [];
  272. customerStatus.map(function (item) {
  273. theArr.push(
  274. <Select.Option value={item.value} key={item.key}>{item.key}</Select.Option>
  275. )
  276. });
  277. let intentionalArr = [];
  278. intentionalService.map(function (item) {
  279. intentionalArr.push(
  280. <Select.Option value={item.value} key={item.key}>{item.key}</Select.Option>
  281. )
  282. });
  283. let newArr = [];
  284. newFollow.map(function (item) {
  285. newArr.push(
  286. <Select.Option value={item.value} key={item.key}>{item.key}</Select.Option>
  287. )
  288. });
  289. let auditArr = [];
  290. cityArr.map(function (item) {
  291. auditArr.push(
  292. <Select.Option value={item.value} key={item.key}>{item.key}</Select.Option>
  293. )
  294. });
  295. this.state.customerStatuarr = theArr;
  296. this.state.intentionalOption = intentionalArr;
  297. this.state.newOption = newArr;
  298. this.state.auditStatusOption = auditArr;
  299. if (window.location.search) {
  300. let theObj = getSearchUrl(window.location.search);
  301. if (theObj.rid) {
  302. theObj.id = theObj.rid;
  303. if (theObj.rid != 'null') {
  304. this.tableRowClick(theObj);
  305. };
  306. };
  307. };
  308. this.loadData();
  309. },
  310. tableRowClick(record) {
  311. this.state.RowData = record;
  312. this.setok(record.id);
  313. this.handleSubmit(record.id)
  314. this.setState({
  315. hids:record.id
  316. })
  317. },
  318. tableRow(record) {
  319. console.log(record)
  320. },
  321. closeDesc(e, s) {
  322. this.state.showDesc = e;
  323. if (s) {
  324. this.loadData();
  325. };
  326. },
  327. search() {
  328. this.loadData();
  329. },
  330. reset() {
  331. this.state.companyName='';
  332. this.state.customerType=undefined;
  333. this.state.id = undefined;
  334. this.state.shareType = undefined;
  335. this.state.companyIntention = undefined;
  336. this.state.followSituation = undefined;
  337. this.state.locationProvince = undefined;
  338. this.state.customerStatus = undefined;
  339. this.state.contactName = undefined;
  340. this.state.contactTel = undefined;
  341. this.state.contactName = undefined;
  342. this.state.releaseDate = [];
  343. this.loadData();
  344. },
  345. searchSwitch() {
  346. this.setState({
  347. searchMore: !this.state.searchMore
  348. });
  349. },
  350. //点击消失函数
  351. setok(e) {
  352. this.setState({
  353. visible:true
  354. });
  355. this.Detailload(e)
  356. },
  357. setcancel(e) {
  358. this.setState({
  359. visible:false
  360. });
  361. },
  362. setoks(index) {
  363. this.setState({
  364. visible1:true
  365. });
  366. this.setState({
  367. loading: true
  368. });
  369. $.ajax({
  370. method: "post",
  371. dataType: "json",
  372. crossDomain: false,
  373. url: globalConfig.context + "/api/admin/customer/findCustomerUserList",
  374. data:{
  375. cid:this.state.hids
  376. },
  377. success: function (data) {
  378. let theArr = [];
  379. let thedata=data.data;
  380. for (let i = 0; i < data.data.length; i++) {
  381. let thisdata = data.data[i];
  382. theArr.push({
  383. id:thisdata.id,//联系人ID
  384. contactName:thisdata.name,//联系人姓名
  385. sex:thisdata.sex,//联系人性别
  386. mobile:thisdata.mobile,//座机号
  387. telNum:thisdata.telNum,//手机号
  388. email:thisdata.email,//邮箱
  389. qq:thisdata.qq,//qq
  390. wechat:thisdata.wechat,//微信号
  391. depatrment:thisdata.depatrment,//部门
  392. customerPosition:thisdata.customerPosition,//职位
  393. });
  394. };
  395. this.setState({
  396. information: theArr,
  397. });
  398. }.bind(this),
  399. }).always(function () {
  400. this.setState({
  401. loading: false
  402. });
  403. }.bind(this));
  404. },
  405. setcancels(e) {
  406. this.setState({
  407. visible1:false
  408. });
  409. },
  410. render() {
  411. const theData = this.state.data || {};
  412. const rowSelection = {
  413. selectedRowKeys: this.state.selectedRowKeys,
  414. onChange: (selectedRowKeys, selectedRows) => {
  415. this.setState({
  416. selectedRows: selectedRows.slice(-1),
  417. selectedRowKeys: selectedRowKeys.slice(-1)
  418. });
  419. }
  420. };
  421. const hasSelected = this.state.selectedRowKeys.length > 0;
  422. const { RangePicker } = DatePicker;
  423. return (
  424. <div className="user-content" >
  425. <div className="content-title">
  426. <span>公共客户管理</span>
  427. </div>
  428. <div className="user-search">
  429. <Input placeholder="公司名称"
  430. value={this.state.companyName}
  431. onChange={(e) => { this.setState({ companyName: e.target.value }); }} />
  432. <Select placeholder="客户类型" style={{ width: 120 }}
  433. value={this.state.customerType }
  434. onChange={(e) => { this.setState({ customerType : e }) }}>
  435. <Select.Option value="0" >个人客户</Select.Option>
  436. <Select.Option value="1" >公司客户</Select.Option>
  437. </Select>
  438. <Select placeholder="意向服务"
  439. style={{ width: 160 }}
  440. value={this.state.companyIntention}
  441. onChange={(e) => { this.setState({ companyIntention: e }) }}>
  442. {this.state.intentionalOption}
  443. </Select>
  444. <Select placeholder="跟进进度"
  445. style={{ width: 160 }}
  446. value={this.state.followSituation}
  447. onChange={(e) => { this.setState({ followSituation: e }) }}>
  448. {this.state.newOption}
  449. </Select>
  450. <Select placeholder="地区"
  451. style={{ width: 160 }}
  452. value={this.state.locationProvince}
  453. onChange={(e) => { this.setState({ locationProvince: e }) }}>
  454. {this.state.auditStatusOption}
  455. </Select>
  456. <Select placeholder="客户状态" style={{ width: 120 }}
  457. value={this.state.customerStatus}
  458. onChange={(e) => { this.setState({customerStatus: e }) }}>
  459. {this.state.customerStatuarr}
  460. </Select>
  461. <Button type="primary" onClick={this.search}>搜索</Button>
  462. <Button onClick={this.reset}>重置</Button>
  463. <span>更多搜索<Switch defaultChecked={false} onChange={this.searchSwitch} /></span>
  464. <div className="search-more" style={this.state.searchMore ? { display: 'none' } : {}}>
  465. <Input placeholder="联系人姓名" style={{width:'140px',marginRight:'10px'}}
  466. value={this.state.contactName}
  467. onChange={(e) => { this.setState({ contactName: e.target.value }); }} />
  468. <Input placeholder="手机号码" style={{width:'140px',marginRight:'10px'}}
  469. value={this.state.contactTel }
  470. onChange={(e) => { this.setState({ contactTel: e.target.value }); }} />
  471. </div>
  472. </div>
  473. <div className="patent-table">
  474. <Spin spinning={this.state.loading}>
  475. <Table columns={this.state.columns}
  476. dataSource={this.state.dataSource}
  477. rowSelection={rowSelection}
  478. pagination={this.state.pagination}
  479. onRowClick={this.tableRowClick} />
  480. </Spin>
  481. </div>
  482. <Modal maskClosable={false}
  483. visible={this.state.visible}
  484. onOk={this.setcancel}
  485. onCancel={this.setcancel}
  486. width='800px'
  487. footer={null}
  488. title="客户详情"
  489. className="demand-order-content">
  490. <Spin spinning={this.state.loading}>
  491. <Row style={{marginLeft:'100px'}}>
  492. <Col span={3}>客户类型:</Col>
  493. <Col span={6}>{theData._customerType}</Col>
  494. <Col span={3}>编号:</Col>
  495. <Col span={6}>{theData.cid}</Col>
  496. </Row>
  497. <Row style={{marginLeft:'100px'}}>
  498. <Col span={3}>录入时间:</Col>
  499. <Col span={6}>{theData.createTime}</Col>
  500. <Col span={3}>跟单人:</Col>
  501. <Col span={6}>{theData.adminName}</Col>
  502. </Row>
  503. <Row style={{marginLeft:'50px'}}>基本资料:</Row>
  504. <Row style={{marginLeft:'100px'}}>
  505. <Col span={3}>公司名称:</Col>
  506. <Col span={6}>{theData.companyName}</Col>
  507. <Col span={3}>公司行业:</Col>
  508. <Col span={6}>{theData.companyIndustry}</Col>
  509. </Row>
  510. <Row style={{marginLeft:'100px'}}>
  511. <Col span={3}>意向服务:</Col>
  512. <Col span={6}>{getCompanyIntention(theData.companyIntention)}</Col>
  513. <Col span={3}>地区:</Col>
  514. <Col span={6}>{getcityArr(theData.locationProvince)}</Col>
  515. </Row>
  516. <Row style={{marginLeft:'100px'}}>
  517. <Col span={3}>最新跟进:</Col>
  518. <Col span={6}>{theData._followSituation}</Col>
  519. <Col span={3}>客户状态:</Col>
  520. <Col span={6}>{theData._customerStatus}</Col>
  521. </Row>
  522. <Row style={{marginLeft:'100px'}}>
  523. <Col span={3}>详细地址:</Col>
  524. <Col span={6}>{theData.adress}</Col>
  525. </Row>
  526. <Row style={{marginLeft:'100px'}}>
  527. <Col span={3}>备注:</Col>
  528. <Col span={6}>{theData.remarks}</Col>
  529. </Row>
  530. <Row style={{marginLeft:'50px'}}>联系资料:<a href='#' style={{marginLeft:'20px'}} onClick={this.setoks}>查看联系人列表</a></Row>
  531. </Spin>
  532. </Modal>
  533. <Modal maskClosable={false}
  534. visible={this.state.visible1}
  535. onOk={this.setcancels}
  536. onCancel={this.setcancels}
  537. width='800px'
  538. footer={null}
  539. title="联系人列表"
  540. className="demand-order-content">
  541. <Spin spinning={this.state.loading}>
  542. <Table columns={this.state.contactInformation}
  543. dataSource={this.state.information}
  544. pagination={this.state.pagination}
  545. />
  546. </Spin>
  547. </Modal>
  548. </div >
  549. );
  550. }
  551. });
  552. export default PublicCustomer;