intentionCustomer.jsx 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576
  1. import React from 'react';
  2. import { Radio, Icon, Button, AutoComplete,Cascader,Input, Select, Spin, Popconfirm, Table, Switch, message, DatePicker, Upload, Form } from 'antd';
  3. import ajax from 'jquery/src/ajax/xhr.js';
  4. import $ from 'jquery/src/ajax';
  5. import moment from 'moment';
  6. import { citySelect, provinceList } from '@/NewDicProvinceList';
  7. import AddIntention from './addIntention.jsx';
  8. import { socialAttribute, industry, auditStatusL, lvl, currentMember } from '@/dataDic.js';
  9. import { getSocialAttribute, beforeUploadFile } from '@/tools.js';
  10. import FollowDetail from './followDetail.jsx'
  11. import IntentionDetail from './intentionDetail/intentionDetail.jsx'
  12. const IntentionCustomer = Form.create()(React.createClass({
  13. loadData(pageNo, apiUrl) {
  14. this.setState({
  15. visitModul:false,
  16. loading: true,
  17. ispage:pageNo,
  18. modalVisible:false
  19. });
  20. let api=apiUrl?apiUrl:this.props.ApiUrl;
  21. $.ajax({
  22. method: "post",
  23. dataType: "json",
  24. crossDomain: false,
  25. url: globalConfig.context + api,
  26. data: {
  27. pageNo: pageNo || 1,
  28. pageSize: this.state.pagination.pageSize,
  29. name: this.state.nameSearch,
  30. province: !(this.state.addressSearch).length ? this.state.provinceSearch : this.state.addressSearch[0],
  31. city: !(this.state.addressSearch).length ? '' : this.state.addressSearch[1],
  32. startDate: this.state.releaseDate[0],
  33. endDate: this.state.releaseDate[1],
  34. },
  35. success: function(data) {
  36. let theArr = [];
  37. if(data.error.length || 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.uid,
  47. name: thisdata.name,
  48. contacts: thisdata.contacts,
  49. contactMobile: thisdata.contactMobile,
  50. industry: thisdata.industry,
  51. societyTag: thisdata.societyTag,
  52. lastFollowTime:thisdata.lastFollowTime&&thisdata.lastFollowTime.split(' ')[0],
  53. transferTime:thisdata.transferTime&&thisdata.transferTime.split(' ')[0],
  54. surplusFollowTime:thisdata.surplusFollowTime&&thisdata.surplusFollowTime.split(' ')[0],
  55. surplusSignTime:thisdata.surplusSignTime&&thisdata.surplusSignTime.split(' ')[0],
  56. locationProvince: thisdata.province ? thisdata.province + '-' + thisdata.city + '-' + thisdata.area : '--'
  57. });
  58. };
  59. this.state.pagination.current = data.data.pageNo;
  60. this.state.pagination.total = data.data.totalCount;
  61. };
  62. if(data.data&&data.data.list&&!data.data.list.length){
  63. this.state.pagination.current=0
  64. this.state.pagination.total=0
  65. }
  66. this.setState({
  67. dataSource: theArr,
  68. pagination: this.state.pagination,
  69. selectedRowKeys:[]
  70. });
  71. }.bind(this),
  72. }).always(function() {
  73. this.setState({
  74. loading: false
  75. });
  76. }.bind(this));
  77. },
  78. //品类数据获取
  79. category(){
  80. $.ajax({
  81. method: "get",
  82. dataType: "json",
  83. crossDomain: false,
  84. url: globalConfig.context + "/api/admin/Varieties/getSuperList",
  85. data: {
  86. },
  87. success: function(data) {
  88. let thedata = data.data;
  89. let theArr=[];
  90. if(!thedata) {
  91. if(data.error && data.error.length) {
  92. message.warning(data.error[0].message);
  93. };
  94. thedata = {};
  95. }else{
  96. thedata.map(function(item,index){
  97. theArr.push({
  98. value:item.id,
  99. key:item.cname,
  100. })
  101. })
  102. }
  103. this.setState({
  104. categoryArr:theArr,
  105. })
  106. }.bind(this),
  107. });
  108. },
  109. getInitialState() {
  110. return {
  111. addressSearch: [],
  112. orgCodeUrl: [],
  113. companyLogoUrl: [],
  114. visible: false,
  115. searchMore: true,
  116. releaseDate: [],
  117. categoryArr:[],
  118. visitModul:false,
  119. keys:false,
  120. detailApi:'',
  121. followData:{},
  122. selectedRowKeys: [],
  123. selectedRowKey: [],
  124. selectedRows: [],
  125. loading: false,
  126. modalVisible:false,
  127. pagination: {
  128. defaultCurrent: 1,
  129. defaultPageSize: 10,
  130. showQuickJumper: true,
  131. pageSize: 10,
  132. onChange: function(page) {
  133. this.loadData(page);
  134. }.bind(this),
  135. showTotal: function(total) {
  136. return '共' + total + '条数据';
  137. }
  138. },
  139. columns: [{
  140. title: '客户名称',
  141. dataIndex: 'name',
  142. key: 'name',
  143. }, {
  144. title: '地区',
  145. dataIndex: 'locationProvince',
  146. key: 'locationProvince',
  147. }, {
  148. title: '联系人',
  149. dataIndex: 'contacts',
  150. key: 'contacts',
  151. },
  152. {
  153. title: '联系电话',
  154. dataIndex: 'contactMobile',
  155. key: 'contactMobile',
  156. },
  157. {
  158. title: '社会性质',
  159. dataIndex: 'societyTag',
  160. key: 'societyTag',
  161. render: text => { return getSocialAttribute(text) }
  162. },
  163. {
  164. title: '客户初始时间',
  165. dataIndex: 'transferTime',
  166. key: 'transferTime',
  167. },
  168. {
  169. title: '剩余私有天数',
  170. dataIndex: 'surplusFollowTime',
  171. key: 'surplusFollowTime'
  172. },
  173. {
  174. title: '最新跟进时间',
  175. dataIndex: 'lastFollowTime',
  176. key: 'lastFollowTime',
  177. },
  178. {
  179. title: '剩余签单天数',
  180. dataIndex: 'surplusSignTime',
  181. key: 'surplusSignTime'
  182. },
  183. {
  184. title: '操作',
  185. dataIndex: 'abc',
  186. key: 'abc',
  187. render: (text, record, index) => {
  188. return <div>
  189. <Button onClick={(e) =>{ e.stopPropagation(), this.visit(record)}} type="primary">客户跟进</Button>
  190. </div>
  191. }
  192. }
  193. ],
  194. data: [],
  195. dataman: [],
  196. dataSource: [],
  197. visitArrList: [],
  198. searchTime: [, ]
  199. };
  200. },
  201. //进入新增拜访记录
  202. visit(e) {
  203. this.setState({
  204. followData:e,
  205. visitModul:true,
  206. modalVisible:false
  207. })
  208. },
  209. //列表删除功能
  210. delectRow() {
  211. let deletedIds;
  212. for(let idx = 0; idx < this.state.selectedRows.length; idx++) {
  213. let rowItem = this.state.selectedRows[idx];
  214. if(rowItem.id) {
  215. deletedIds = rowItem.id;
  216. };
  217. };
  218. this.setState({
  219. loading: true,
  220. selectedRowKeys: [],
  221. });
  222. $.ajax({
  223. method: "get",
  224. dataType: "json",
  225. crossDomain: false,
  226. url: globalConfig.context + "/api/admin/customer/deleteCustomer",
  227. data: {
  228. uid: deletedIds, //删除的ID
  229. }
  230. }).done(function(data) {
  231. if(!data.error.length) {
  232. message.success('删除成功!');
  233. this.setState({
  234. loading: false,
  235. });
  236. } else {
  237. message.warning(data.error[0].message);
  238. };
  239. this.loadData(this.state.ispage);
  240. }.bind(this));
  241. },
  242. componentWillMount() {
  243. //城市
  244. let Province = [];
  245. provinceList.map(function(item) {
  246. var id = String(item.id)
  247. Province.push(
  248. <Select.Option value={id} key={item.name}>{item.name}</Select.Option>
  249. )
  250. });
  251. //行业
  252. let intentionalArr = [];
  253. industry.map(function(item) {
  254. intentionalArr.push(
  255. <Select.Option value={item.value} key={item.key}>{item.key}</Select.Option>
  256. )
  257. });
  258. //会员等级
  259. let lvlArr = [];
  260. lvl.map(function(item) {
  261. lvlArr.push(
  262. <Select.Option value={item.value} key={item.key}>{item.key}</Select.Option>
  263. )
  264. });
  265. //会员状态customerStatus
  266. let currentMemberArr = [];
  267. currentMember.map(function(item) {
  268. currentMemberArr.push(
  269. <Select.Option value={item.value} key={item.key}>{item.key}</Select.Option>
  270. )
  271. });
  272. this.state.Provinces = Province;
  273. this.state.intentionalOption = intentionalArr;
  274. this.state.lvlArrOption = lvlArr;
  275. this.state.currentMemberArrOption = currentMemberArr;
  276. this.loadData();
  277. this.category()
  278. },
  279. addClick() {
  280. this.state.RowData = {};
  281. this.setState({
  282. detailApi:this.props.detailApi,
  283. showDesc: true,
  284. modalVisible:false,
  285. visitModul:false
  286. });
  287. },
  288. closeDesc(e, s) {
  289. this.state.basicState=e
  290. this.state.visitModul=e;
  291. this.state.modalVisible=e;
  292. this.state.showDesc = e;
  293. if(s) {
  294. this.loadData(this.state.ispage);
  295. };
  296. },
  297. search() {
  298. this.loadData();
  299. },
  300. reset() {
  301. this.state.nameSearch = '';
  302. this.state.addressSearch = [];
  303. this.state.provinceSearch = undefined;
  304. this.state.citySearch = undefined;
  305. this.state.releaseDate[0] = undefined;
  306. this.state.releaseDate[1] = undefined;
  307. this.loadData();
  308. },
  309. searchSwitch() {
  310. this.setState({
  311. visitModul:false,
  312. searchMore: !this.state.searchMore
  313. });
  314. },
  315. //整行点击
  316. tableRowClick(record, index) {
  317. this.state.visitModul=false;
  318. this.state.RowData = record;
  319. this.setState({
  320. selectedRowKeys: [],
  321. modalVisible:true,
  322. basicState:true
  323. })
  324. },
  325. //指定转交人自动补全
  326. supervisor(e){
  327. $.ajax({
  328. method: "get",
  329. dataType: "json",
  330. crossDomain: false,
  331. url: globalConfig.context + "/api/admin/customer/listAdminByName",
  332. data:{
  333. adminName:e
  334. },
  335. success: function (data) {
  336. let thedata=data.data;
  337. if (!thedata) {
  338. if (data.error && data.error.length) {
  339. message.warning(data.error[0].message);
  340. };
  341. thedata = {};
  342. };
  343. this.setState({
  344. customerArr:thedata,
  345. });
  346. }.bind(this),
  347. }).always(function () {
  348. this.setState({
  349. loading: false
  350. });
  351. }.bind(this));
  352. },
  353. //上级主管输入框失去焦点是判断客户是否存在
  354. selectAuto(value,options){
  355. this.setState({
  356. auto:value
  357. })
  358. },
  359. blurChange(e){
  360. let theType='';
  361. let contactLists=this.state.customerArr||[];
  362. if (e) {
  363. contactLists.map(function (item) {
  364. if (item.name == e.toString()) {
  365. theType = item.id;
  366. }
  367. });
  368. }
  369. this.setState({
  370. theTypes:theType
  371. })
  372. },
  373. //值改变时请求客户名称
  374. httpChange(e){
  375. if(e.length>=1){
  376. this.supervisor(e);
  377. }
  378. this.setState({
  379. auto:e
  380. })
  381. },
  382. //转交
  383. changeAssigner() {
  384. if(this.state.theTypes){
  385. this.setState({
  386. selectedRowKeys: [],
  387. });
  388. let changeIds,oldAid;
  389. for(let idx = 0; idx < this.state.selectedRows.length; idx++) {
  390. let rowItem = this.state.selectedRows[idx];
  391. if(rowItem.id) {
  392. oldAid=rowItem.aid;
  393. changeIds = rowItem.id;
  394. };
  395. };
  396. $.ajax({
  397. method: "get",
  398. dataType: "json",
  399. crossDomain: false,
  400. url: globalConfig.context + "/api/admin/customer/transferToOther",
  401. data: {
  402. uid: changeIds, //这一行数据的ID
  403. aid: this.state.theTypes, //指定转交人的ID
  404. oldAid:oldAid
  405. }
  406. }).done(function(data) {
  407. if(!data.error.length) {
  408. message.success('转交成功!');
  409. this.setState({
  410. auto:'',
  411. loading: false,
  412. });
  413. } else {
  414. message.warning(data.error[0].message);
  415. };
  416. this.loadData(this.state.ispage);
  417. }.bind(this));
  418. }else{
  419. message.warning('请输入转交人姓名')
  420. }
  421. },
  422. componentWillReceiveProps(nextProps) {
  423. if(nextProps.ApiUrl!=this.props.ApiUrl) {
  424. if(!this.state.searchMore){
  425. this.state.searchMore=true
  426. }
  427. this.loadData(null,nextProps.ApiUrl);
  428. };
  429. },
  430. render() {
  431. const FormItem = Form.Item;
  432. const rowSelection = {
  433. selectedRowKeys: this.state.selectedRowKeys,
  434. onChange: (selectedRowKeys, selectedRows) => {
  435. this.setState({
  436. modalVisible:false,
  437. selectedRows: selectedRows.slice(-1),
  438. selectedRowKeys: selectedRowKeys.slice(-1)
  439. });
  440. },
  441. onSelect: (recordt, selected, selectedRows) => {
  442. this.setState({
  443. modalVisible:false,
  444. recordt: recordt.id
  445. })
  446. },
  447. };
  448. const hasSelected = this.state.selectedRowKeys.length > 0;
  449. const { RangePicker } = DatePicker;
  450. const dataSources=this.state.customerArr || [];
  451. const options = dataSources.map((group) =>
  452. <Select.Option key={group.id} value={group.name}>{group.name}</Select.Option>
  453. )
  454. const intentionState = this.props.intentionState ||'';
  455. return(
  456. <div className="user-content" >
  457. <div className="content-title">
  458. <span>{!intentionState?'我的单位意向客户':'我的个人意向客户'}</span>
  459. </div>
  460. <div className="user-search">
  461. <Input placeholder="客户名称"
  462. value={this.state.nameSearch}
  463. onChange={(e) => { this.setState({ nameSearch: e.target.value }); }} />
  464. <Select placeholder="省"
  465. style={{ width: 80 }}
  466. value={this.state.provinceSearch}
  467. onChange={(e) => {this.setState({ provinceSearch: e});}}>
  468. {this.state.Provinces}
  469. </Select>
  470. <span style={{marginRight:'10px'}}>
  471. <Cascader options={citySelect()} value={this.state.addressSearch} placeholder="选择城市"
  472. onChange={(e,pre) => { this.setState({ addressSearch: e }) }} />
  473. </span>
  474. <Button type="primary" onClick={this.search}>搜索</Button>
  475. <Button onClick={this.reset}>重置</Button>
  476. {/*<Button onClick={() => { window.open(globalConfig.context + '/api/admin/customer/downloadTemplate?type=1') }}>下载批量导入模板</Button>
  477. <Upload
  478. name="file"
  479. action={globalConfig.context + "/api/admin/customer/uploadExcel"}
  480. beforeUpload={beforeUploadFile}
  481. showUploadList={false}
  482. onChange={(info) => {
  483. if (info.file.status !== 'uploading') {
  484. console.log(info.file, info.fileList);
  485. }
  486. if (info.file.status === 'done') {
  487. if (!info.file.response.error.length) {
  488. message.success(`${info.file.name} 文件上传成功!`);
  489. this.loadData();
  490. } else {
  491. message.warning(info.file.response.error[0].message);
  492. return;
  493. };
  494. } else if (info.file.status === 'error') {
  495. message.error(`${info.file.name} 文件上传失败。`);
  496. };
  497. }} >
  498. <Button>上传批量内容</Button>
  499. </Upload>
  500. */}
  501. {adminData.isSuperAdmin?<Popconfirm title="是否删除?" onConfirm={this.delectRow} okText="是" cancelText="否">
  502. <Button type="danger" style={{marginLeft:'10px'}}
  503. disabled={!hasSelected}
  504. >删除<Icon type="minus" />
  505. </Button>
  506. </Popconfirm>:''
  507. }
  508. <AutoComplete
  509. className="certain-category-search"
  510. dropdownClassName="certain-category-search-dropdown"
  511. dropdownMatchSelectWidth={false}
  512. dropdownStyle={{ width: 120 }}
  513. style={{ width: '120px'}}
  514. dataSource={options}
  515. placeholder="输入转交人姓名"
  516. value={this.state.auto}
  517. onChange={this.httpChange}
  518. filterOption={true}
  519. onBlur={this.blurChange}
  520. onSelect={this.selectAuto}
  521. disabled={!hasSelected}
  522. >
  523. <Input />
  524. </AutoComplete>
  525. <Button type="primary" onClick={this.changeAssigner} disabled={!hasSelected} >转交</Button>
  526. <span style={{marginLeft:'10px',marginRight:'20px'}}>更多搜索<Switch checked={!this.state.searchMore} onChange={this.searchSwitch} /></span>
  527. <Button type="primary" className="addButton" onClick={this.addClick}>新增客户<Icon type="plus" /></Button>
  528. <div className='clearfix' style={{marginTop:'5px'}}>
  529. <div className="search-more" style={this.state.searchMore ? { display: 'none' } : {}}>
  530. <RangePicker
  531. value={[this.state.releaseDate[0] ? moment(this.state.releaseDate[0]) : null,
  532. this.state.releaseDate[1] ? moment(this.state.releaseDate[1]) : null]}
  533. onChange={(data, dataString) => { this.setState({ releaseDate: dataString }); }} />
  534. </div>
  535. </div>
  536. </div>
  537. <div className="patent-table">
  538. <Spin spinning={this.state.loading}>
  539. <Table columns={this.state.columns}
  540. dataSource={this.state.dataSource}
  541. rowSelection={rowSelection}
  542. pagination={this.state.pagination}
  543. onRowClick={this.tableRowClick}
  544. />
  545. </Spin>
  546. </div>
  547. <AddIntention
  548. api={this.state.detailApi}
  549. showDesc={this.state.showDesc}
  550. closeDesc={this.closeDesc}
  551. />
  552. <FollowDetail
  553. categoryArr={this.state.categoryArr}
  554. followData={this.state.followData}
  555. visitModul={this.state.visitModul}
  556. closeDesc={this.closeDesc}
  557. />
  558. <IntentionDetail
  559. categoryArr={this.state.categoryArr}
  560. detailApi={this.props.detailApi}
  561. IntentionData={this.state.RowData}
  562. modalVisible={this.state.modalVisible}
  563. closeDesc={this.closeDesc}
  564. basicState={this.state.basicState}
  565. />
  566. </div >
  567. );
  568. }
  569. }));
  570. export default IntentionCustomer;