intentionCustomer.jsx 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575
  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;
  389. for(let idx = 0; idx < this.state.selectedRows.length; idx++) {
  390. let rowItem = this.state.selectedRows[idx];
  391. if(rowItem.id) {
  392. changeIds = rowItem.id;
  393. };
  394. };
  395. $.ajax({
  396. method: "get",
  397. dataType: "json",
  398. crossDomain: false,
  399. url: globalConfig.context + "/api/admin/customer/transferToOther",
  400. data: {
  401. uid: changeIds, //这一行数据的ID
  402. aid: this.state.theTypes, //指定转交人的ID
  403. }
  404. }).done(function(data) {
  405. if(!data.error.length) {
  406. message.success('转交成功!');
  407. this.setState({
  408. auto:'',
  409. loading: false,
  410. });
  411. } else {
  412. message.warning(data.error[0].message);
  413. };
  414. this.loadData(this.state.ispage);
  415. }.bind(this));
  416. }else{
  417. message.warning('请输入转交人姓名')
  418. }
  419. },
  420. componentWillReceiveProps(nextProps) {
  421. if(nextProps.ApiUrl!=this.props.ApiUrl) {
  422. if(!this.state.searchMore){
  423. this.state.searchMore=true
  424. }
  425. this.loadData(null,nextProps.ApiUrl);
  426. };
  427. },
  428. render() {
  429. const FormItem = Form.Item;
  430. const rowSelection = {
  431. selectedRowKeys: this.state.selectedRowKeys,
  432. onChange: (selectedRowKeys, selectedRows) => {
  433. this.setState({
  434. modalVisible:false,
  435. selectedRows: selectedRows.slice(-1),
  436. selectedRowKeys: selectedRowKeys.slice(-1)
  437. });
  438. },
  439. onSelect: (recordt, selected, selectedRows) => {
  440. this.setState({
  441. modalVisible:false,
  442. recordt: recordt.id
  443. })
  444. },
  445. };
  446. const hasSelected = this.state.selectedRowKeys.length > 0;
  447. const { RangePicker } = DatePicker;
  448. const dataSources=this.state.customerArr || [];
  449. const options = dataSources.map((group) =>
  450. <Select.Option key={group.id} value={group.name}>{group.name}</Select.Option>
  451. )
  452. const intentionState = this.props.intentionState ||'';
  453. return(
  454. <div className="user-content" >
  455. <div className="content-title">
  456. <span>{!intentionState?'我的单位意向客户':'我的个人意向客户'}</span>
  457. </div>
  458. <div className="user-search">
  459. <Input placeholder="客户名称"
  460. value={this.state.nameSearch}
  461. onChange={(e) => { this.setState({ nameSearch: e.target.value }); }} />
  462. <Select placeholder="省"
  463. style={{ width: 80 }}
  464. value={this.state.provinceSearch}
  465. onChange={(e) => {this.setState({ provinceSearch: e});}}>
  466. {this.state.Provinces}
  467. </Select>
  468. <span style={{marginRight:'10px'}}>
  469. <Cascader options={citySelect()} value={this.state.addressSearch} placeholder="选择城市"
  470. onChange={(e,pre) => { this.setState({ addressSearch: e }) }} />
  471. </span>
  472. <Button type="primary" onClick={this.search}>搜索</Button>
  473. <Button onClick={this.reset}>重置</Button>
  474. {/*<Button onClick={() => { window.open(globalConfig.context + '/api/admin/customer/downloadTemplate?type=1') }}>下载批量导入模板</Button>
  475. <Upload
  476. name="file"
  477. action={globalConfig.context + "/api/admin/customer/uploadExcel"}
  478. beforeUpload={beforeUploadFile}
  479. showUploadList={false}
  480. onChange={(info) => {
  481. if (info.file.status !== 'uploading') {
  482. console.log(info.file, info.fileList);
  483. }
  484. if (info.file.status === 'done') {
  485. if (!info.file.response.error.length) {
  486. message.success(`${info.file.name} 文件上传成功!`);
  487. this.loadData();
  488. } else {
  489. message.warning(info.file.response.error[0].message);
  490. return;
  491. };
  492. } else if (info.file.status === 'error') {
  493. message.error(`${info.file.name} 文件上传失败。`);
  494. };
  495. }} >
  496. <Button>上传批量内容</Button>
  497. </Upload>
  498. */}
  499. {adminData.isSuperAdmin?<Popconfirm title="是否删除?" onConfirm={this.delectRow} okText="是" cancelText="否">
  500. <Button type="danger" style={{marginLeft:'10px'}}
  501. disabled={!hasSelected}
  502. >删除<Icon type="minus" />
  503. </Button>
  504. </Popconfirm>:''
  505. }
  506. <AutoComplete
  507. className="certain-category-search"
  508. dropdownClassName="certain-category-search-dropdown"
  509. dropdownMatchSelectWidth={false}
  510. dropdownStyle={{ width: 120 }}
  511. style={{ width: '120px'}}
  512. dataSource={options}
  513. placeholder="输入转交人姓名"
  514. value={this.state.auto}
  515. onChange={this.httpChange}
  516. filterOption={true}
  517. onBlur={this.blurChange}
  518. onSelect={this.selectAuto}
  519. disabled={!hasSelected}
  520. >
  521. <Input />
  522. </AutoComplete>
  523. <Button type="primary" onClick={this.changeAssigner} disabled={!hasSelected} >转交</Button>
  524. <span style={{marginLeft:'10px',marginRight:'20px'}}>更多搜索<Switch checked={!this.state.searchMore} onChange={this.searchSwitch} /></span>
  525. <Button type="primary" className="addButton" onClick={this.addClick}>新增客户<Icon type="plus" /></Button>
  526. <div className='clearfix' style={{marginTop:'5px'}}>
  527. <div className="search-more" style={this.state.searchMore ? { display: 'none' } : {}}>
  528. <RangePicker
  529. value={[this.state.releaseDate[0] ? moment(this.state.releaseDate[0]) : null,
  530. this.state.releaseDate[1] ? moment(this.state.releaseDate[1]) : null]}
  531. onChange={(data, dataString) => { this.setState({ releaseDate: dataString }); }} />
  532. </div>
  533. </div>
  534. </div>
  535. <div className="patent-table">
  536. <Spin spinning={this.state.loading}>
  537. <Table columns={this.state.columns}
  538. dataSource={this.state.dataSource}
  539. rowSelection={rowSelection}
  540. pagination={this.state.pagination}
  541. onRowClick={this.tableRowClick}
  542. />
  543. </Spin>
  544. </div>
  545. <AddIntention
  546. api={this.state.detailApi}
  547. showDesc={this.state.showDesc}
  548. closeDesc={this.closeDesc}
  549. />
  550. <FollowDetail
  551. categoryArr={this.state.categoryArr}
  552. followData={this.state.followData}
  553. visitModul={this.state.visitModul}
  554. closeDesc={this.closeDesc}
  555. />
  556. <IntentionDetail
  557. categoryArr={this.state.categoryArr}
  558. detailApi={this.props.detailApi}
  559. IntentionData={this.state.RowData}
  560. modalVisible={this.state.modalVisible}
  561. closeDesc={this.closeDesc}
  562. basicState={this.state.basicState}
  563. />
  564. </div >
  565. );
  566. }
  567. }));
  568. export default IntentionCustomer;