intentionCustomer.jsx 18 KB

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