publicCustomer.jsx 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496
  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 } from '../../dataDic.js';
  8. import { beforeUploadFile,getOrderStatus, getSearchUrl,getcustomerTyp,getcityArr,getcustomerStatue,getCompanyIntention,getfllowSituation,getsex} from '../../tools.js';
  9. const data = [{
  10. companyName : '公司名称',
  11. _followSituation : 'John Brown',
  12. _companyIntention: 32,
  13. }, {
  14. companyName: '跟单人',
  15. _followSituation: 'Jim Green',
  16. _companyIntention: 42,
  17. }, {
  18. companyName: '时间',
  19. _followSituation: 'Joe Black',
  20. _companyIntention: 32,
  21. }];
  22. const AchievementDetail = React.createClass({
  23. getInitialState () {
  24. return {
  25. visible: false,
  26. loading: false,
  27. dataSource: [],
  28. };
  29. },
  30. loadLogs (id) {
  31. this.setState({
  32. loading: true
  33. });
  34. $.ajax({
  35. method: "get",
  36. dataType: "json",
  37. crossDomain: false,
  38. url: globalConfig.context + "/api/admin/portal/order/achievementOrderLog",
  39. data: {
  40. id:id
  41. },
  42. success: function (data) {
  43. let theArr = [];
  44. if (!data.data) {
  45. if (data.error && data.error.length) {
  46. message.warning(data.error[0].message);
  47. };
  48. } else {
  49. for (let i = 0; i < data.data.length; i++) {
  50. let thisdata = data.data[i];
  51. theArr.push({
  52. key: i,
  53. recordTime: thisdata.recordTime,
  54. status: thisdata.status,
  55. comment: thisdata.comment,
  56. operator: thisdata.operator,
  57. recordTimeFormattedDate: thisdata.recordTimeFormattedDate //传回来的值 可能要改
  58. });
  59. };
  60. };
  61. this.setState({
  62. dataSource: theArr
  63. });
  64. }.bind(this),
  65. }).always(function () {
  66. this.setState({
  67. loading: false
  68. });
  69. }.bind(this));
  70. },
  71. handleSubmit (e) {
  72. this.setState({
  73. loading: true
  74. });
  75. $.ajax({
  76. method: "POST",
  77. dataType: "json",
  78. crossDomain: false,
  79. url: globalConfig.context + '/api/admin/portal/order/updateAchievementOrder',
  80. data: {
  81. id: this.props.data.id,
  82. }
  83. }).done(function (data) {
  84. this.setState({
  85. loading: false
  86. });
  87. if (!data.error.length) {
  88. message.success('领取成功!');
  89. this.handleOk();
  90. } else {
  91. message.warning(data.error[0].message);
  92. };
  93. }.bind(this));
  94. },
  95. handleCancel (e) {
  96. this.setState({
  97. visible: false,
  98. });
  99. this.props.closeDesc(false);
  100. },
  101. handleOk (e) {
  102. this.setState({
  103. visible: false,
  104. });
  105. this.props.closeDesc(false, true);
  106. },
  107. componentWillReceiveProps (nextProps) {
  108. if (!this.state.visible && nextProps.showDesc && nextProps.data) {
  109. this.loadLogs(nextProps.data.id);
  110. this.state.paymentId = nextProps.data.paymentId;
  111. this.state.paymentType = nextProps.data.paymentType;
  112. this.state.paymentValue = nextProps.data.paymentValue;
  113. this.state.transferPrice = nextProps.data.transferPrice;
  114. this.state.orderStatus = undefined;
  115. this.state.comment = undefined;
  116. this.state.recordTime = undefined;
  117. };
  118. this.state.visible = nextProps.showDesc;
  119. },
  120. render () {
  121. const theData = this.props.data || {};
  122. return (
  123. <div className="patent-desc">
  124. <Modal maskClosable={false} visible={this.state.visible}
  125. onOk={this.checkPatentProcess} onCancel={this.handleCancel}
  126. width='800px'
  127. footer={null}
  128. title="客户详情"
  129. className="demand-order-content">
  130. <Spin spinning={this.state.loading}>
  131. <Row style={{marginLeft:'100px'}}>
  132. <Col span={3}>客户类型:</Col>
  133. <Col span={10}>{getcustomerTyp(theData.customerTyp)}</Col>
  134. <Col span={3}>编号:</Col>
  135. <Col span={10}>{theData.id}</Col>
  136. </Row>
  137. <Row style={{marginLeft:'100px'}}>
  138. <Col span={3}>录入时间:</Col>
  139. <Col span={10}>{theData.createTime}</Col>
  140. <Col span={3}>跟单人:</Col>
  141. <Col span={10}>{theData.ownerId}</Col>
  142. </Row>
  143. <Row style={{marginLeft:'50px'}}>基本资料:</Row>
  144. <Row style={{marginLeft:'100px'}}>
  145. <Col span={3}>公司名称:</Col>
  146. <Col span={10}>{theData.companyName}</Col>
  147. <Col span={3}>公司行业:</Col>
  148. <Col span={10}>{theData.companyIndustry}</Col>
  149. </Row>
  150. <Row style={{marginLeft:'100px'}}>
  151. <Col span={3}>意向服务:</Col>
  152. <Col span={10}>{getCompanyIntention(theData.companyIntention)}</Col>
  153. <Col span={3}>地区:</Col>
  154. <Col span={10}>{getcityArr(theData.province)}</Col>
  155. </Row>
  156. <Row style={{marginLeft:'100px'}}>
  157. <Col span={3}>最新跟进:</Col>
  158. <Col span={10}>{getfllowSituation(theData.followSituation)}</Col>
  159. <Col span={3}>客户状态:</Col>
  160. <Col span={10}>{getcustomerStatue(theData.customerStatus)}</Col>
  161. </Row>
  162. <Row style={{marginLeft:'100px'}}>
  163. <Col span={3}>详细地址:</Col>
  164. <Col span={10}>{theData.adress}</Col>
  165. </Row>
  166. <Row style={{marginLeft:'100px'}}>
  167. <Col span={3}>备注:</Col>
  168. <Col span={10}>{theData.remark}</Col>
  169. </Row>
  170. <Row style={{marginLeft:'50px'}}>联系资料:</Row>
  171. <Row style={{marginLeft:'100px'}}>
  172. <Col span={3}>姓名:</Col>
  173. <Col span={10}>{theData.contactName}</Col>
  174. <Col span={3}>性别:</Col>
  175. <Col span={10}>{getsex(theData.sex)}</Col>
  176. </Row>
  177. <Row style={{marginLeft:'100px'}}>
  178. <Col span={3}>手机号码:</Col>
  179. <Col span={10}>{theData.telNum}</Col>
  180. <Col span={3}>座机号:</Col>
  181. <Col span={10}>{theData.mobile}</Col>
  182. </Row>
  183. <Row style={{marginLeft:'100px'}}>
  184. <Col span={3}>QQ号码:</Col>
  185. <Col span={10}>{theData.qq}</Col>
  186. <Col span={3}>邮箱号:</Col>
  187. <Col span={10}>{theData.email}</Col>
  188. </Row>
  189. <Row style={{marginLeft:'100px'}}>
  190. <Col span={3}>微信:</Col>
  191. <Col span={10}>{theData.wechat}</Col>
  192. <Col span={3}>部门:</Col>
  193. <Col span={10}>{theData.department}</Col>
  194. </Row>
  195. <Row style={{marginLeft:'100px'}}>
  196. <Col span={3}>职位:</Col>
  197. <Col span={10}>{theData.customerPosition}</Col>
  198. </Row>
  199. <Row style={{marginLeft:'100px'}}>
  200. <Col span={3}></Col>
  201. <Col span={20}>
  202. <Button style={{ marginRight: '20px' }} type="primary" onClick={this.handleSubmit}>领取</Button>
  203. <Button className="set-submit" type="ghost" onClick={this.handleCancel}>取消</Button>
  204. </Col>
  205. </Row>
  206. </Spin>
  207. </Modal>
  208. </div>
  209. );
  210. },
  211. });
  212. //查询功能和初始列表
  213. const AchievementOrderList = React.createClass({
  214. loadData(pageNo, apiUrl) {
  215. this.state.data = [];
  216. this.setState({
  217. loading: true
  218. });
  219. $.ajax({
  220. method: "get",
  221. dataType: "json",
  222. crossDomain: false,
  223. url:globalConfig.context + '/api/admin/customer/searchCustomerList',
  224. data: {
  225. pageNo: pageNo || 1,
  226. pageSize: this.state.pagination.pageSize,
  227. companyName: this.state.companyName, //名称
  228. customerTyp: this.state.customerTyp, //客户类型
  229. province:this.state.province,//地区
  230. customerStatus:this.state.customerStatus,//客户状态1
  231. contactName:this.state.contactName,//联系人姓名1
  232. adminName:this.state.adminName,//跟单人1
  233. companyIntention:this.state.companyIntention,//意向服务1
  234. followSituation:this.state.followSituation,//跟进进度1
  235. },
  236. success: function (data) {
  237. let theArr = [];
  238. if (!data.data || !data.data.list) {
  239. if (data.error && data.error.length) {
  240. message.warning(data.error[0].message);
  241. };
  242. } else {
  243. for (let i = 0; i < data.data.list.length; i++) {
  244. let thisdata = data.data.list[i];
  245. theArr.push({
  246. key: i,
  247. id: thisdata.id,
  248. companyName:thisdata.companyName,
  249. customerTyp:thisdata.customerTyp,
  250. province:thisdata.province,
  251. contactName:thisdata.contactName,
  252. telNum:thisdata.telNum,
  253. customerStatus:thisdata.customerStatus,
  254. companyIntention:thisdata.companyIntention,
  255. followSituation:thisdata.followSituation,
  256. adminName:thisdata.adminName
  257. });
  258. };
  259. this.state.pagination.current = data.data.pageNo;
  260. this.state.pagination.total = data.data.totalCount;
  261. };
  262. this.setState({
  263. dataSource: theArr,
  264. pagination: this.state.pagination
  265. });
  266. }.bind(this),
  267. }).always(function () {
  268. this.setState({
  269. loading: false
  270. });
  271. }.bind(this));
  272. },
  273. getInitialState() {
  274. return {
  275. searchMore: true,
  276. searchType: 0,
  277. validityPeriodDate: [],
  278. releaseDate: [],
  279. selectedRowKeys: [],
  280. selectedRows: [],
  281. loading: false,
  282. pagination: {
  283. defaultCurrent: 1,
  284. defaultPageSize: 10,
  285. showQuickJumper: true,
  286. pageSize: 10,
  287. onChange: function (page) {
  288. this.loadData(page);
  289. }.bind(this),
  290. showTotal: function (total) {
  291. return '共' + total + '条数据';
  292. }
  293. },
  294. columns: [
  295. {
  296. title: '公司名称',
  297. dataIndex: 'companyName',
  298. key: 'companyName',
  299. }, {
  300. title: '客户类型',
  301. dataIndex: 'customerTyp',
  302. key: 'customerTyp',
  303. render: text => { return getcustomerTyp(text); }
  304. }, {
  305. title: '地区',
  306. dataIndex: 'province',
  307. key: 'province',
  308. render: text => { return getcityArr(text); }
  309. }, {
  310. title: '联系人姓名',
  311. dataIndex: 'contactName',
  312. key: 'contactName',
  313. },
  314. {
  315. title: '手机号',
  316. dataIndex: 'telNum',
  317. key:'telNum',
  318. },
  319. {
  320. title: '客户状态',
  321. dataIndex: 'customerStatus',
  322. key: 'customerStatus',
  323. render: text => { return getcustomerStatue(text) }
  324. },
  325. {
  326. title: '意向服务',
  327. dataIndex: 'companyIntention',
  328. key: 'companyIntention',
  329. render: text => { return getCompanyIntention(text) }
  330. },
  331. {
  332. title: '最新跟进',
  333. dataIndex: 'followSituation',
  334. key: 'followSituation',
  335. render: text => { return getfllowSituation(text) }
  336. },
  337. {
  338. title: '跟单人',
  339. dataIndex: 'adminName',
  340. key: 'adminName',
  341. }
  342. ],
  343. dataSource: [],
  344. searchTime: [],
  345. };
  346. },
  347. componentWillMount() {
  348. let theArr = [];
  349. customerStatus.map(function (item) {
  350. theArr.push(
  351. <Select.Option value={item.value} key={item.key}>{item.key}</Select.Option>
  352. )
  353. });
  354. let auditArr = [];
  355. cityArr.map(function (item) {
  356. auditArr.push(
  357. <Select.Option value={item.value} key={item.key}>{item.key}</Select.Option>
  358. )
  359. });
  360. this.state.customerStatuarr = theArr;
  361. this.state.auditStatusOption = auditArr;
  362. if (window.location.search) {
  363. let theObj = getSearchUrl(window.location.search);
  364. if (theObj.rid) {
  365. theObj.id = theObj.rid;
  366. if (theObj.rid != 'null') {
  367. this.tableRowClick(theObj);
  368. };
  369. };
  370. };
  371. this.loadData();
  372. },
  373. tableRowClick(record, index) {
  374. this.state.RowData = record;
  375. this.setState({
  376. showDesc: true
  377. });
  378. },
  379. closeDesc(e, s) {
  380. this.state.showDesc = e;
  381. if (s) {
  382. this.loadData();
  383. };
  384. },
  385. search() {
  386. this.loadData();
  387. },
  388. reset() {
  389. this.state.id = undefined;
  390. this.state.companyName = undefined;
  391. this.state.customerTyp = undefined;
  392. this.state.province = undefined;
  393. this.state.ownerType = undefined;
  394. this.state.customerStatus = undefined;
  395. this.state.auditStatus = undefined;
  396. this.state.ownerId = undefined;
  397. this.state.contactName = undefined;
  398. this.state.releaseDate = [];
  399. this.loadData();
  400. },
  401. searchSwitch() {
  402. this.setState({
  403. searchMore: !this.state.searchMore
  404. });
  405. },
  406. render() {
  407. const rowSelection = {
  408. selectedRowKeys: this.state.selectedRowKeys,
  409. onChange: (selectedRowKeys, selectedRows) => {
  410. this.setState({
  411. selectedRows: selectedRows.slice(-1),
  412. selectedRowKeys: selectedRowKeys.slice(-1)
  413. });
  414. }
  415. };
  416. const hasSelected = this.state.selectedRowKeys.length > 0;
  417. const { RangePicker } = DatePicker;
  418. return (
  419. <div className="user-content" >
  420. <div className="content-title">
  421. <span>公共客户管理</span>
  422. </div>
  423. <div className="user-search">
  424. <Input placeholder="公司名称"
  425. value={this.state.customerName}
  426. onChange={(e) => { this.setState({ customerName: e.target.value }); }} />
  427. <Select placeholder="客户类型" style={{ width: 120 }}
  428. value={this.state.shareTyp }
  429. onChange={(e) => { this.setState({ shareTyp : e }) }}>
  430. <Select.Option value="0" >个人客户</Select.Option>
  431. <Select.Option value="1" >公司客户</Select.Option>
  432. </Select>
  433. <Select placeholder="意向服务"
  434. style={{ width: 160 }}
  435. value={this.state.companyIntention}
  436. onChange={(e) => { this.setState({ companyIntention: e }) }}>
  437. {this.state.intentionalOption}
  438. </Select>
  439. <Select placeholder="跟进进度"
  440. style={{ width: 160 }}
  441. value={this.state.followSituation}
  442. onChange={(e) => { this.setState({ followSituation: e }) }}>
  443. {this.state.newOption}
  444. </Select>
  445. <Select placeholder="地区"
  446. style={{ width: 160 }}
  447. value={this.state.province}
  448. onChange={(e) => { this.setState({ province: e }) }}>
  449. {this.state.auditStatusOption}
  450. </Select>
  451. <Select placeholder="客户状态" style={{ width: 120 }}
  452. value={this.state.customerStatus}
  453. onChange={(e) => { this.setState({ customerStatus: e }) }}>
  454. {this.state.customerStatuarr}
  455. </Select>
  456. <Button type="primary" onClick={this.search}>搜索</Button>
  457. <Button onClick={this.reset}>重置</Button>
  458. <span>更多搜索<Switch defaultChecked={false} onChange={this.searchSwitch} /></span>
  459. <div className="search-more" style={this.state.searchMore ? { display: 'none' } : {}}>
  460. <Input placeholder="跟单人" style={{width:'140px',marginRight:'10px'}}
  461. value={this.state.ownerId}
  462. onChange={(e) => { this.setState({ ownerId: e.target.value }); }} />
  463. <Input placeholder="联系人姓名" style={{width:'140px',marginRight:'10px'}}
  464. value={this.state.contactName}
  465. onChange={(e) => { this.setState({ contactName: e.target.value }); }} />
  466. <span>发布时间 :</span>
  467. <RangePicker
  468. value={[this.state.releaseDate[0] ? moment(this.state.releaseDate[0]) : null,
  469. this.state.releaseDate[1] ? moment(this.state.releaseDate[1]) : null]}
  470. onChange={(data, dataString) => { this.setState({ releaseDate: dataString }); }} />
  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. <AchievementDetail
  483. data={this.state.RowData}
  484. showDesc={this.state.showDesc}
  485. closeDesc={this.closeDesc} />
  486. </div >
  487. );
  488. }
  489. });
  490. export default AchievementOrderList;