channel.jsx 39 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009
  1. import React,{Component} from "react";
  2. import {
  3. AutoComplete,
  4. Button,
  5. Cascader,
  6. DatePicker,
  7. Input,
  8. message,
  9. Select,
  10. Spin,
  11. Table,
  12. Tabs,
  13. Tooltip,
  14. Upload,
  15. Modal
  16. } from "antd";
  17. import {ChooseList} from "../../../order/orderNew/chooseList";
  18. import $ from "jquery/src/ajax";
  19. import {
  20. getSocialAttribute,
  21. ShowModal,
  22. getChannelAllocationStatus
  23. } from "@/tools.js";
  24. import {
  25. channelAllocationStatus
  26. } from "@/dataDic.js";
  27. import { citySelect, provinceList } from '@/NewDicProvinceList';
  28. import moment from "moment";
  29. import FollowDetail from "./followDetail";
  30. import IntentionDetail from "./intentionDetail/intentionDetail";
  31. import TransferRecords from './transferRecords';
  32. import DuplicateData from './duplicateData';
  33. import OperationTips from './operationTips';
  34. import ShowModalDiv from "@/showModal.jsx";
  35. import './channel.less';
  36. const {TabPane} = Tabs;
  37. const { RangePicker } = DatePicker;
  38. class Channel extends Component{
  39. constructor(props) {
  40. super(props);
  41. this.state={
  42. isGuidance:false,
  43. isEditGuidance: true,
  44. upLoadFileLoading:false,
  45. channelAllocationStatusList : channelAllocationStatus.slice(0,channelAllocationStatus.length-2),
  46. columns: [
  47. {
  48. title: "客户名称",
  49. dataIndex: "userName",
  50. key: "userName",
  51. render: (text,record) => {
  52. return (
  53. <span>
  54. {record.recovery === 1 ? <div style={{
  55. background:'#ef7207',
  56. color:'#FFF',
  57. padding: '1px 7px',
  58. borderRadius:'5px',
  59. fontSize:'12px',
  60. display: 'inline-block',
  61. marginRight:'10px'
  62. }}>
  63. 回收
  64. </div> : null}
  65. {text}
  66. </span>
  67. )
  68. },
  69. },
  70. {
  71. title: "地区",
  72. dataIndex: "locationProvince",
  73. key: "locationProvince",
  74. },
  75. {
  76. title: "社会性质",
  77. dataIndex: "societyTag",
  78. key: "societyTag",
  79. render: (text) => {
  80. return getSocialAttribute(text);
  81. },
  82. },
  83. {
  84. title: "渠道专员",
  85. dataIndex: "channelName",
  86. key: "channelName",
  87. },
  88. {
  89. title: "客户联系人",
  90. dataIndex: "contacts",
  91. key: "contacts",
  92. },
  93. {
  94. title: "联系电话",
  95. dataIndex: "contactMobile",
  96. key: "contactMobile",
  97. },
  98. {
  99. title: "渠道初始时间",
  100. dataIndex: "createTimes",
  101. key: "createTimes",
  102. },
  103. {
  104. title: "分配状态",
  105. dataIndex: "status",
  106. key: "status",
  107. render: (text) => (
  108. getChannelAllocationStatus(text,true)
  109. )
  110. },
  111. ],
  112. changeList:[],
  113. dataSource:[],
  114. pagination: {
  115. defaultCurrent: 1,
  116. defaultPageSize: 10,
  117. showQuickJumper: true,
  118. pageSize: 10,
  119. onChange: function (page) {
  120. this.loadData(page);
  121. }.bind(this),
  122. showTotal: function (total) {
  123. return "共" + total + "条数据";
  124. },
  125. },
  126. pageNo:1,
  127. listLoading:false,
  128. selectedRowKeys:[],
  129. selectedRows:[],
  130. modalVisible:false,
  131. nameSearch:'',
  132. statusSearch:undefined,
  133. provinceSearch:undefined,
  134. addressSearch:[],
  135. releaseDate:[],
  136. upLoad: {
  137. name: "file",
  138. action: globalConfig.context + "/api/user/channel/import",
  139. headers: {
  140. authorization: "authorization-text"
  141. },
  142. onChange: info => {
  143. if (info.file.status === "done") {
  144. this.setState({
  145. upLoadFileLoading:false
  146. })
  147. if (info.file.response && info.file.response.error.length === 0) {
  148. if(info.file.response.data === 1){
  149. message.success("导入成功!");
  150. this.loadData();
  151. }else if(info.file.response.data.list.length > 0){
  152. message.warning('已成功导入!错误/重复客户无法导入,请查看错误渠道数据!');
  153. this.setState({
  154. duplicateData: [],
  155. duplicateDataVisible: true
  156. })
  157. }
  158. } else {
  159. message.warning(info.file.response.error[0].message);
  160. }
  161. }else if(info.file.status === "uploading"){
  162. this.setState({
  163. upLoadFileLoading:true
  164. })
  165. }else{
  166. this.loadData(this.state.pageNo);
  167. this.setState({
  168. upLoadFileLoading:false
  169. })
  170. }
  171. }
  172. },
  173. followData: '',
  174. visitModul: false,
  175. categoryArr:[],
  176. tabsKey:'',
  177. }
  178. this.loadData = this.loadData.bind(this);
  179. this.search = this.search.bind(this);
  180. this.reset = this.reset.bind(this);
  181. this.changeList = this.changeList.bind(this);
  182. this.download = this.download.bind(this);
  183. this.category = this.category.bind(this);
  184. this.closeDesc = this.closeDesc.bind(this);
  185. this.guidanceRead = this.guidanceRead.bind(this);
  186. this.tableRowClick = this.tableRowClick.bind(this);
  187. this.detailCloseDesc = this.detailCloseDesc.bind(this);
  188. this.supervisor = this.supervisor.bind(this);
  189. this.httpChange = this.httpChange.bind(this);
  190. this.blurChange = this.blurChange.bind(this);
  191. this.selectAuto = this.selectAuto.bind(this);
  192. this.changeAssigner = this.changeAssigner.bind(this);
  193. }
  194. componentDidMount() {
  195. //城市
  196. let provinces = [];
  197. provinceList.map(function (item) {
  198. var id = String(item.id);
  199. provinces.push(
  200. <Select.Option value={id} key={item.name}>
  201. {item.name}
  202. </Select.Option>
  203. );
  204. });
  205. this.setState({
  206. provinces
  207. })
  208. this.loadData();
  209. this.category();
  210. if(this.props.followUp){
  211. this.state.columns.push({
  212. title: "当前跟进人",
  213. dataIndex: "adminName",
  214. key: "adminName",
  215. render: (text, record) => {
  216. return (
  217. record.status !== 0 ? text : ''
  218. )
  219. }
  220. });
  221. this.state.columns.push({
  222. title: "跟进操作",
  223. dataIndex: "abc",
  224. key: "abc",
  225. render: (text, record, index) => {
  226. return (
  227. <div style={{
  228. display: 'flex',
  229. flexFlow:'row',
  230. alignItems:'center',
  231. }}>
  232. <Button
  233. disabled={this.props.deliver === 2 && record.status === 2 && this.props.isEditGuidanceLv}
  234. onClick={(e) => {
  235. e.stopPropagation();
  236. if(this.props.isEditGuidanceLv){
  237. this.visit(record);
  238. }else{
  239. this.tableRowClick(record);
  240. }
  241. }}
  242. type="primary"
  243. >
  244. {this.props.isEditGuidanceLv ? '客户跟进' : '查看指导'}
  245. </Button>
  246. </div>
  247. );
  248. },
  249. });
  250. if(this.props.isEditGuidanceLv){
  251. this.state.columns.push({
  252. title: "指导意见",
  253. dataIndex: "guidance",
  254. key: "guidance",
  255. render: (text, record, index) => {
  256. return (
  257. <div style={{
  258. display: 'flex',
  259. flexFlow:'row',
  260. alignItems:'center',
  261. }}>
  262. {/*指导 0无 1未读 2已读*/}
  263. {text === 1 || text === 2 ? <Button
  264. style={text === 1 ? {
  265. background:'#F00000',
  266. borderColor:'#F00000'
  267. } : {}}
  268. onClick={(e)=>{
  269. e.stopPropagation();
  270. this.guidanceRead(record.uid).then(()=>{
  271. this.setState({
  272. tabsKey:"4",
  273. },()=>{
  274. this.tableRowClick(record)
  275. })
  276. })
  277. }}
  278. type="primary"
  279. >
  280. {text === 1 ? '未读' : '查看'}
  281. </Button> : <div>暂无指导</div>}
  282. </div>
  283. );
  284. },
  285. });
  286. }
  287. }
  288. this.state.columns.push({
  289. title: "备注",
  290. dataIndex: "remarks",
  291. key: "remarks",
  292. render: (text) => {
  293. return (
  294. <Tooltip placement="topLeft" title={text}>
  295. <div style={{
  296. maxWidth:'150px',
  297. overflow:'hidden',
  298. textOverflow: "ellipsis",
  299. whiteSpace:'nowrap',
  300. }}>{text}</div>
  301. </Tooltip>
  302. )
  303. }
  304. });
  305. this.setState({
  306. columns:this.state.columns
  307. })
  308. }
  309. visit(e) {
  310. this.setState({
  311. followData: e,
  312. visitModul: true,
  313. });
  314. }
  315. loadData(pageNo = 1) {
  316. this.setState({
  317. listLoading: true,
  318. selectedRows: [],
  319. selectedRowKeys: [],
  320. });
  321. $.ajax({
  322. method: "post",
  323. dataType: "json",
  324. crossDomain: false,
  325. url: globalConfig.context + '/api/admin/customer/listChannelCustomer',
  326. data: {
  327. type:this.props.channel ? 1 : undefined,
  328. pageNo: pageNo || 1,
  329. pageSize: this.state.pagination.pageSize,
  330. name: this.state.nameSearch,
  331. status:this.state.statusSearch,
  332. province: !this.state.addressSearch.length
  333. ? this.state.provinceSearch
  334. : this.state.addressSearch[0],
  335. city: !this.state.addressSearch.length
  336. ? ""
  337. : this.state.addressSearch[1],
  338. startTime: this.state.releaseDate[0],
  339. endTime: this.state.releaseDate[1],
  340. },
  341. success: function (data) {
  342. ShowModal(this);
  343. let theArr = [];
  344. if (data.error.length > 0) {
  345. message.warning(data.error[0].message);
  346. } else {
  347. if(data.data.list.length === 0 && pageNo !== 1){
  348. this.loadData(pageNo - 1)
  349. }else{
  350. for (let i = 0; i < data.data.list.length; i++) {
  351. let thisdata = data.data.list[i];
  352. let diqu =
  353. (thisdata.province == null ? "" : thisdata.province) +
  354. (thisdata.city == null ? "" : "-" + thisdata.city) +
  355. (thisdata.area == null ? "" : "-" + thisdata.area);
  356. thisdata.key = i;
  357. thisdata.id = thisdata.uid;
  358. thisdata.lastFollowTime = thisdata.lastFollowTime &&
  359. thisdata.lastFollowTime.split(" ")[0];
  360. thisdata.transferTime= thisdata.transferTime && thisdata.transferTime.split(" ")[0];
  361. thisdata.surplusFollowTime = thisdata.surplusFollowTime && thisdata.surplusFollowTime.split(" ")[0];
  362. thisdata.surplusSignTime = thisdata.surplusSignTime && thisdata.surplusSignTime.split(" ")[0];
  363. thisdata.locationProvince = diqu;
  364. theArr.push(thisdata);
  365. }
  366. this.state.pagination.current = data.data.pageNo;
  367. this.state.pagination.total = data.data.totalCount;
  368. this.setState({
  369. pageNo: data.data.pageNo,
  370. dataSource: theArr,
  371. pagination: this.state.pagination,
  372. })
  373. }
  374. }
  375. }.bind(this),
  376. }).always(
  377. function () {
  378. this.setState({
  379. listLoading: false,
  380. });
  381. }.bind(this)
  382. );
  383. }
  384. search(){
  385. this.loadData();
  386. }
  387. reset(){
  388. this.setState({
  389. nameSearch:'',
  390. provinceSearch:undefined,
  391. addressSearch:[],
  392. releaseDate:[],
  393. statusSearch:undefined,
  394. },()=>{
  395. this.loadData();
  396. })
  397. }
  398. download() {
  399. window.location.href =
  400. globalConfig.context +
  401. "/api/user/channel/downloadTemplate?" +
  402. "sign=user_channel";
  403. }
  404. changeList(arr) {
  405. const newArr = [];
  406. this.state.columns.forEach(item => {
  407. arr.forEach(val => {
  408. if (val === item.title) {
  409. newArr.push(item);
  410. }
  411. });
  412. });
  413. this.setState({
  414. changeList: newArr
  415. });
  416. }
  417. category() {
  418. $.ajax({
  419. method: "get",
  420. dataType: "json",
  421. crossDomain: false,
  422. url: globalConfig.context + "/api/admin/Varieties/getSuperList",
  423. data: {},
  424. success: function (data) {
  425. let thedata = data.data;
  426. let theArr = [];
  427. if (!thedata) {
  428. if (data.error && data.error.length) {
  429. message.warning(data.error[0].message);
  430. }
  431. thedata = {};
  432. } else {
  433. thedata.map(function (item, index) {
  434. theArr.push({
  435. value: item.id,
  436. key: item.cname,
  437. });
  438. });
  439. }
  440. this.setState({
  441. categoryArr: theArr,
  442. });
  443. }.bind(this),
  444. });
  445. }
  446. closeDesc(){
  447. this.setState({
  448. categoryArr:[],
  449. followData:'',
  450. visitModul:false
  451. })
  452. }
  453. //已读指导记录
  454. guidanceRead(id) {
  455. return new Promise((resolve,reject)=>{
  456. $.ajax({
  457. method: "post",
  458. dataType: "json",
  459. crossDomain: false,
  460. url: globalConfig.context + "/api/admin/customer/pushGuidance",
  461. data: {
  462. uid: id,
  463. }
  464. }).done(function(data) {
  465. if(!data.error.length) {
  466. resolve();
  467. } else {
  468. message.warning(data.error[0].message);
  469. reject();
  470. };
  471. }.bind(this));
  472. })
  473. }
  474. tableRowClick(record) {
  475. if(this.props.deliver === 2 && record.status === 2 && this.props.isEditGuidanceLv){
  476. this.setState({
  477. isGuidance: true,
  478. tabsKey:"4",
  479. })
  480. }
  481. //营销经理人员 取消指导自己的操作
  482. if(this.props.deliver === 2 && record.status === 1 && this.props.isEditGuidanceLv){
  483. this.setState({
  484. isEditGuidance: false,
  485. })
  486. }
  487. //营销人员 取消指导的操作
  488. if(this.props.deliver === 0 && record.status === 2 && this.props.isEditGuidanceLv){
  489. this.setState({
  490. isEditGuidance: false,
  491. })
  492. }
  493. this.setState({
  494. rowData:record,
  495. modalVisible: true,
  496. basicState: true,
  497. contactState: true,
  498. modalName: record.userName
  499. })
  500. }
  501. detailCloseDesc(){
  502. this.setState({
  503. rowData:'',
  504. modalVisible: false,
  505. basicState: false,
  506. contactState: false,
  507. modalName: '',
  508. isGuidance: false,
  509. isEditGuidance: true,
  510. tabsKey: '',
  511. },()=>{
  512. this.loadData(this.state.pageNo);
  513. })
  514. }
  515. supervisor(e) {
  516. $.ajax({
  517. method: "get",
  518. dataType: "json",
  519. crossDomain: false,
  520. url: globalConfig.context + "/api/admin/customer/listAdminByName",
  521. data: {
  522. adminName: e,
  523. },
  524. success: function (data) {
  525. let thedata = data.data;
  526. if (!thedata) {
  527. if (data.error && data.error.length) {
  528. message.warning(data.error[0].message);
  529. }
  530. thedata = {};
  531. }
  532. this.setState({
  533. customerArr: thedata,
  534. });
  535. }.bind(this),
  536. }).always(
  537. function () {
  538. }.bind(this)
  539. );
  540. }
  541. httpChange(e) {
  542. if (e.length >= 1) {
  543. this.supervisor(e);
  544. }
  545. this.setState({
  546. auto: e,
  547. });
  548. }
  549. blurChange(e) {
  550. let theType = "";
  551. let contactLists = this.state.customerArr || [];
  552. if (e) {
  553. contactLists.map(function (item) {
  554. if (item.name == e.toString()) {
  555. theType = item.id;
  556. }
  557. });
  558. }
  559. this.setState({
  560. theTypes: theType,
  561. });
  562. }
  563. selectAuto(value, options) {
  564. this.setState({
  565. auto: value,
  566. });
  567. }
  568. changeAssigner(remarks,type,lv) {
  569. //type 0 总监分配 1经理分配 2回收
  570. let arr = this.state.selectedRows.filter(v=>v.status === 1);
  571. let arr1 = this.state.selectedRows.filter(v=>v.status === 2);
  572. let arr2 = this.state.selectedRows.filter(v=>v.status === 7);
  573. let arr3 = this.state.selectedRows.filter(v=>v.status === 6);
  574. if(type === 0 && (arr.length>0 || arr1.length>0)){
  575. message.warning('选中的信息中存在“已分配”数据,请取消这些选项后重新提交')
  576. return;
  577. }
  578. if(type === 1 && arr1.length>0){
  579. message.warning('选中的信息中存在“经理已分配”数据,请取消这些选项后重新提交')
  580. return;
  581. }
  582. //处于回收状态的客户经理和营销员不能点击回收
  583. if(this.props.deliver !== 1 && arr3.length>0){
  584. message.warning('渠道客户已回收!待营销总监,重新分配')
  585. return;
  586. }
  587. //this.props.deliver && this.props.recovery 用于判断是否为经理
  588. if(this.props.deliver === 2 && this.props.recovery && type === 2 && arr1.length>0){
  589. message.warning('操作失败,存在客户已被分配营销员')
  590. return;
  591. }
  592. if(arr2.length>0){
  593. message.warning('不能操作已签单客户')
  594. return;
  595. }
  596. if(!remarks){
  597. message.warning(type === 1 ? "请输入分配原因" : type === 2 ? "请输入回收原因" : type === 0 ? "请输入分配原因" : "");
  598. return;
  599. }
  600. if (this.state.theTypes || lv) {
  601. this.setState({
  602. listLoading: true,
  603. })
  604. let changeIds = '';
  605. let oldAid = '';
  606. for (let idx = 0; idx < this.state.selectedRows.length; idx++) {
  607. let rowItem = this.state.selectedRows[idx];
  608. if(rowItem.recovery === 1 && type === 2){
  609. let arr = this.state.selectedRows.filter(v => v.recovery === 1)
  610. Modal.info({
  611. title: '以下数据属于回收再分配资源,无法再次回收',
  612. content: (
  613. <div>
  614. {
  615. arr.map(i=>(
  616. <div style={{paddingBottom:'7px'}}>{i.userName}</div>
  617. ))
  618. }
  619. </div>
  620. ),
  621. onOk() {},
  622. });
  623. return ;
  624. }
  625. if (rowItem.id) {
  626. oldAid = rowItem.aid;
  627. changeIds = this.state.selectedRows.length-1 === idx ? changeIds +rowItem.id : changeIds + rowItem.id + ',' ;
  628. }
  629. }
  630. $.ajax({
  631. method: "post",
  632. dataType: "json",
  633. crossDomain: false,
  634. url: globalConfig.context + "/api/admin/customer/channelCustomerDeliver",
  635. data: {
  636. userIds: changeIds, //这一行数据的ID
  637. receiveId: this.state.theTypes, //指定分配人的ID
  638. remarks: remarks,
  639. type, //0总监分配 1经理分配 2回收
  640. },
  641. }).done(
  642. function (data) {
  643. this.setState({
  644. listLoading: false,
  645. })
  646. if (!data.error.length) {
  647. message.success(type === 1 ? "分配成功!" : type === 2 ? "回收成功!" : type === 0 ? "分配成功!" : "");
  648. this.setState({
  649. auto: "",
  650. loading: false,
  651. selectedRowKeys: [],
  652. visible:false,
  653. recoveryVisible: false,
  654. },()=>{
  655. this.loadData(this.state.pageNo);
  656. });
  657. } else {
  658. message.warning(data.error[0].message);
  659. }
  660. }.bind(this)
  661. );
  662. } else {
  663. message.warning("请输入分配人姓名");
  664. }
  665. }
  666. render() {
  667. const rowSelection = {
  668. hideDefaultSelections: true,
  669. selectedRowKeys: this.state.selectedRowKeys,
  670. onChange: (selectedRowKeys, selectedRows) => {
  671. this.setState({
  672. modalVisible: false,
  673. selectedRows: selectedRows,
  674. selectedRowKeys: selectedRowKeys,
  675. });
  676. },
  677. onSelect: (recordt, selected, selectedRows) => {
  678. this.setState({
  679. modalVisible: false,
  680. });
  681. },
  682. };
  683. const dataSources = this.state.customerArr || [];
  684. const options = dataSources.map((group) => (
  685. <Select.Option key={group.id} value={group.name}>
  686. {group.name}
  687. </Select.Option>
  688. ));
  689. const hasSelected = this.state.selectedRowKeys.length > 0;
  690. return (
  691. <div className="user-content">
  692. <ShowModalDiv ShowModal={this.state.showModal} />
  693. <div className="content-title">
  694. <span>渠道客户</span>
  695. </div>
  696. <div className="user-search">
  697. <Tabs
  698. defaultActiveKey="1"
  699. className="test"
  700. >
  701. <TabPane tab="搜索" key="1">
  702. <Input
  703. placeholder="请输入客户名称"
  704. value={this.state.nameSearch}
  705. style={{ width: 150, marginRight: 10, marginLeft: 10 }}
  706. onChange={(e) => {
  707. this.setState({ nameSearch: e.target.value });
  708. }}
  709. />
  710. <Select
  711. placeholder="分配状态"
  712. style={{ width: 100 }}
  713. value={this.state.statusSearch}
  714. onChange={(e) => {
  715. this.setState({ statusSearch: e });
  716. }}
  717. >
  718. {
  719. this.state.channelAllocationStatusList.map((v,key)=>(
  720. <Select.Option value={v.value} key={key}>
  721. {v.key}
  722. </Select.Option>
  723. ))
  724. }
  725. </Select>
  726. <Select
  727. placeholder="省"
  728. style={{ width: 80 }}
  729. value={this.state.provinceSearch}
  730. onChange={(e) => {
  731. this.setState({ provinceSearch: e });
  732. }}
  733. >
  734. {this.state.provinces}
  735. </Select>
  736. <span style={{ marginRight: "10px" }}>
  737. <Cascader
  738. options={citySelect()}
  739. value={this.state.addressSearch}
  740. placeholder="选择城市"
  741. onChange={(e, pre) => {
  742. this.setState({ addressSearch: e });
  743. }}
  744. />
  745. </span>
  746. <RangePicker
  747. value={[
  748. this.state.releaseDate[0]
  749. ? moment(this.state.releaseDate[0])
  750. : null,
  751. this.state.releaseDate[1]
  752. ? moment(this.state.releaseDate[1])
  753. : null,
  754. ]}
  755. onChange={(data, dataString) => {
  756. this.setState({ releaseDate: dataString });
  757. }}
  758. />
  759. <Button
  760. type="primary"
  761. style={{ marginLeft: "10px", marginRight: 10 }}
  762. onClick={this.search}
  763. >
  764. 搜索
  765. </Button>
  766. <Button onClick={this.reset}>重置</Button>
  767. </TabPane>
  768. <TabPane tab="操作" key="2">
  769. <div style={{
  770. marginTop: 10,
  771. }}>
  772. {this.props.deliver ? <AutoComplete
  773. className="certain-category-search"
  774. dropdownClassName="certain-category-search-dropdown"
  775. dropdownMatchSelectWidth={false}
  776. dropdownStyle={{ width: 120 }}
  777. style={{ width: "120px" }}
  778. dataSource={options}
  779. placeholder={this.props.deliver === 1 ? '输入分配人姓名' : '输入分配人姓名'}
  780. value={this.state.auto}
  781. onChange={this.httpChange}
  782. filterOption={true}
  783. onBlur={this.blurChange}
  784. onSelect={this.selectAuto}
  785. disabled={!hasSelected}
  786. >
  787. <Input />
  788. </AutoComplete> : ''}
  789. {this.props.deliver ? <Button
  790. type="primary"
  791. onClick={(e) => {
  792. e.stopPropagation();
  793. this.setState({
  794. visible:true
  795. })
  796. }}
  797. disabled={!hasSelected}
  798. style={{ marginRight: 10 }}
  799. >
  800. {this.props.deliver === 1 ? '分配' : '分配'}
  801. </Button> : ''}
  802. {this.props.recovery ? <Button
  803. type="primary"
  804. onClick={(e) => {
  805. e.stopPropagation();
  806. this.setState({
  807. recoveryVisible:true
  808. })
  809. }}
  810. disabled={!hasSelected}
  811. style={{ marginRight: 10 }}
  812. >
  813. 回收
  814. </Button> : ''}
  815. {this.props.deliver || this.props.recovery ? <Button
  816. type="primary"
  817. onClick={(e) => {
  818. e.stopPropagation();
  819. this.setState({
  820. transferVisible:true,
  821. transferId: this.state.selectedRows[0].uid
  822. })
  823. }}
  824. disabled={!hasSelected || this.state.selectedRows.length > 1}
  825. style={{ marginRight: 10 }}
  826. >
  827. 日志
  828. </Button> : ''}
  829. {this.props.channel ? <Upload {...this.state.upLoad} disabled={this.state.upLoadFileLoading}>
  830. <Button
  831. loading={this.state.upLoadFileLoading}
  832. type="primary"
  833. style={{ marginRight: "10px" }}
  834. >
  835. +批量导入渠道客户
  836. </Button>
  837. </Upload> : null}
  838. {this.props.channel ? <Button
  839. onClick={(e) => {
  840. e.stopPropagation();
  841. this.download();
  842. }}
  843. type="primary"
  844. style={{
  845. marginRight: "10px",
  846. background:'#f49f36',
  847. borderColor:'#f49f36'
  848. }}
  849. >
  850. 下载渠道客户模板
  851. </Button> : ''}
  852. {this.props.channel ? <Button
  853. onClick={(e) => {
  854. e.stopPropagation();
  855. this.setState({
  856. duplicateData: [],
  857. duplicateDataVisible: true
  858. })
  859. }}
  860. type="primary"
  861. style={{
  862. marginRight: "10px",
  863. background:'#ff2f00',
  864. borderColor:'#ff2f00'
  865. }}
  866. >
  867. 查看导入失败列表
  868. </Button> : ''}
  869. </div>
  870. </TabPane>
  871. <TabPane tab="更改表格显示数据" key="3">
  872. <div style={{ marginLeft: 10 }}>
  873. <ChooseList
  874. columns={this.state.columns}
  875. changeFn={this.changeList}
  876. changeList={this.state.changeList}
  877. top={55}
  878. margin={11}
  879. />
  880. </div>
  881. </TabPane>
  882. </Tabs>
  883. </div>
  884. <div className="patent-table">
  885. <Spin spinning={this.state.listLoading}>
  886. <Table
  887. size="middle"
  888. className={'intentionCustomerTable'}
  889. columns={
  890. this.state.changeList.length !== 0
  891. ? this.state.changeList
  892. : this.state.columns
  893. }
  894. dataSource={this.state.dataSource}
  895. rowSelection={this.props.deliver || this.props.recovery ? rowSelection : ''}
  896. pagination={this.state.pagination}
  897. onRowDoubleClick={this.tableRowClick}
  898. />
  899. </Spin>
  900. </div>
  901. <FollowDetail
  902. categoryArr={this.state.categoryArr}
  903. followData={this.state.followData}
  904. visitModul={this.state.visitModul}
  905. closeDesc={this.closeDesc}
  906. />
  907. <IntentionDetail
  908. tabsKey={this.state.tabsKey}
  909. categoryArr={this.state.categoryArr}
  910. detailApi={this.props.detailApi}
  911. IntentionData={this.state.rowData}
  912. modalVisible={this.state.modalVisible}
  913. name={this.state.modalName}
  914. closeDesc={this.detailCloseDesc}
  915. basicState={this.state.basicState}
  916. contactState={this.state.contactState}
  917. isGuidanceLv={this.props.isGuidanceLv || this.state.isGuidance}
  918. isEditGuidanceLv={this.props.isEditGuidanceLv && this.state.isEditGuidance}
  919. />
  920. {this.state.duplicateDataVisible ? <DuplicateData
  921. duplicateData={this.state.duplicateData || []}
  922. visible={this.state.duplicateDataVisible}
  923. onCancel={()=>{
  924. this.setState({
  925. duplicateData:[],
  926. duplicateDataVisible: false
  927. },()=>{
  928. this.loadData(this.state.pageNo);
  929. })
  930. }}
  931. /> : null}
  932. {this.state.transferVisible || this.state.returnVisible ? <TransferRecords
  933. type={this.state.transferVisible ? (this.props.deliver === 1 ? 0 : 1) : this.state.returnVisible ? 2 : 0}
  934. id={this.state.transferId}
  935. visible={this.state.transferVisible || this.state.returnVisible}
  936. cancel={()=>{
  937. this.setState({
  938. transferVisible:false,
  939. returnVisible: false,
  940. transferId:''
  941. })
  942. }}
  943. /> : '' }
  944. {/*渠道客户分配*/}
  945. {this.state.visible ? <OperationTips
  946. title={'渠道客户分配'}
  947. selectedRows={this.state.selectedRows}
  948. visible={this.state.visible}
  949. onOk={(value)=>{
  950. // 0 总监分配 1经理分配 2回收
  951. this.changeAssigner(value,this.props.deliver === 1 ? 0 : this.props.deliver === 2 ? 1 : '')
  952. }}
  953. onCancel={()=>{
  954. this.setState({
  955. visible:false
  956. })
  957. }}/> : ''}
  958. {/*渠道客户回收*/}
  959. {this.state.recoveryVisible ? <OperationTips
  960. title={'渠道客户回收'}
  961. selectedRows={this.state.selectedRows}
  962. visible={this.state.recoveryVisible}
  963. onOk={(value)=>{
  964. this.changeAssigner(value,2,true)
  965. }}
  966. onCancel={()=>{
  967. this.setState({
  968. recoveryVisible:false
  969. })
  970. }}/> : ''}
  971. </div>
  972. )
  973. }
  974. }
  975. export default Channel;