index.jsx 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592
  1. import React,{Component} from 'react';
  2. import {
  3. AutoComplete,
  4. Button,
  5. Cascader,
  6. DatePicker,
  7. Icon,
  8. Input,
  9. message,
  10. Modal,
  11. Select,
  12. Spin,
  13. Table,
  14. Tabs,
  15. Tag
  16. } from "antd";
  17. import { citySelect, provinceList } from '@/NewDicProvinceList';
  18. import {getSocialAttribute, ShowModal} from "@/tools.js";
  19. import ShowModalDiv from "@/showModal.jsx";
  20. import moment from "moment";
  21. import $ from "jquery/src/ajax";
  22. import IntentionDetail from "../../NEW/intentionCustomer/intentionDetail/intentionDetail";
  23. import {ChooseList} from "../../../order/orderNew/chooseList";
  24. const {TabPane} = Tabs;
  25. const { RangePicker } = DatePicker;
  26. class CustomerFollow extends Component{
  27. constructor(props) {
  28. super(props);
  29. this.state={
  30. nameSearch: '',
  31. provinceSearch: undefined,
  32. addressSearch: '',
  33. level: undefined,
  34. releaseDate: [],
  35. selectedRowKeys: [],
  36. sortType: 0,
  37. filteredInfo: null,
  38. sortedInfo: null,
  39. columns : [
  40. {
  41. title: "客户名称",
  42. dataIndex: "name",
  43. key: "name",
  44. },
  45. {
  46. title: "地区",
  47. dataIndex: "locationProvince",
  48. key: "locationProvince",
  49. },
  50. {
  51. title: "联系人",
  52. dataIndex: "contacts",
  53. key: "contacts",
  54. },
  55. {
  56. title: "联系电话",
  57. dataIndex: "contactMobile",
  58. key: "contactMobile",
  59. },
  60. {
  61. title: "社会性质",
  62. dataIndex: "societyTag",
  63. key: "societyTag",
  64. render: (text) => {
  65. return getSocialAttribute(text);
  66. },
  67. },
  68. {
  69. title: "客户初始时间",
  70. dataIndex: "transferTime",
  71. key: "transferTime",
  72. },
  73. {
  74. title: "剩余私有天数",
  75. dataIndex: "surplusFollowTime",
  76. key: "surplusFollowTime",
  77. },
  78. {
  79. title: "剩余签单天数",
  80. dataIndex: "surplusSignTime",
  81. key: "surplusSignTime",
  82. },
  83. {
  84. title: "最新跟进时间",
  85. dataIndex: "lastFollowTime",
  86. key: "lastFollowTime",
  87. //0无 1转换倒序 2转换正序
  88. sorter: true,
  89. sortOrder: (this.sortedInfo || {}).columnKey === 'lastFollowTime' && (this.sortedInfo || {}).order,
  90. filteredValue: (this.filteredInfo || {}).lastFollowTime || null,
  91. },
  92. {
  93. title: "客户等级",
  94. dataIndex: "level",
  95. key: "level",
  96. render: (text) => {
  97. if(text === 0) {
  98. return <Tag color="#87d068">一般客户</Tag>;
  99. }else if(text === 1) {
  100. return <Tag color="#D2691E">意向客户</Tag>;
  101. }else if(text === 2) {
  102. return <Tag color="#FF0000">重点客户</Tag>;
  103. }else {
  104. return "";
  105. }
  106. },
  107. },
  108. {
  109. title: "跟进人",
  110. dataIndex: "aName",
  111. key: "aName",
  112. },
  113. {
  114. title: "跟进操作",
  115. dataIndex: "abc",
  116. key: "abc",
  117. render: (text, record, index) => {
  118. return (
  119. <div>
  120. <Button
  121. onClick={(e) => {
  122. e.stopPropagation();
  123. this.setState({
  124. tabsKey:"4",
  125. },()=>{
  126. this.tableRowClick(record)
  127. })
  128. }}
  129. type="primary"
  130. >
  131. {this.props.isEditGuidanceLv ? '指导' : '查看指导'}
  132. </Button>
  133. </div>
  134. );
  135. },
  136. },
  137. ],
  138. provinces: [],
  139. dataSource: [],
  140. categoryArr: [],
  141. modalName: '',
  142. modalVisible: false,
  143. basicState: false,
  144. contactState: false,
  145. rowData: {},
  146. pagination: {
  147. defaultCurrent: 1,
  148. defaultPageSize: 10,
  149. showQuickJumper: true,
  150. pageSize: 10,
  151. onChange: function (page) {
  152. this.loadData(page);
  153. }.bind(this),
  154. showTotal: function (total) {
  155. return "共" + total + "条数据";
  156. },
  157. },
  158. loading: false,
  159. ispage: 1,
  160. guidance: '',
  161. tabsKey:'',
  162. };
  163. this.callback = this.callback.bind(this);
  164. this.loadData = this.loadData.bind(this);
  165. this.reset = this.reset.bind(this);
  166. this.tableRowClick = this.tableRowClick.bind(this);
  167. this.closeDesc = this.closeDesc.bind(this);
  168. this.releaseGuidance = this.releaseGuidance.bind(this);
  169. this.changeList = this.changeList.bind(this);
  170. }
  171. componentDidMount() {
  172. this.loadData();
  173. this.category();
  174. //城市
  175. let Province = [];
  176. provinceList.map(function (item) {
  177. let id = String(item.id);
  178. Province.push(
  179. <Select.Option value={id} key={item.name}>
  180. {item.name}
  181. </Select.Option>
  182. );
  183. });
  184. this.setState({
  185. provinces: Province
  186. })
  187. }
  188. callback(){
  189. }
  190. loadData(pageNo) {
  191. this.setState({
  192. loading: true,
  193. });
  194. let api = '/api/admin/customer/listFollowManagement';
  195. $.ajax({
  196. method: "get",
  197. dataType: "json",
  198. crossDomain: false,
  199. url: globalConfig.context + api,
  200. data: {
  201. pageNo: pageNo || 1,
  202. pageSize: this.state.pagination.pageSize,
  203. level: this.state.level ? this.state.level : undefined,
  204. name: this.state.nameSearch,
  205. province: !this.state.addressSearch.length
  206. ? this.state.provinceSearch
  207. : this.state.addressSearch[0],
  208. city: !this.state.addressSearch.length
  209. ? ""
  210. : this.state.addressSearch[1],
  211. startDate: this.state.releaseDate[0],
  212. endDate: this.state.releaseDate[1],
  213. sortType:this.state.sortType,
  214. },
  215. success: function (data) {
  216. ShowModal(this);
  217. let theArr = [];
  218. if (data.error.length !== 0) {
  219. if (data.error && data.error.length) {
  220. message.warning(data.error[0].message);
  221. }
  222. } else {
  223. for (let i = 0; i < data.data.list.length; i++) {
  224. let thisdata = data.data.list[i];
  225. let diqu =
  226. (thisdata.province == null ? "" : thisdata.province) +
  227. (thisdata.city == null ? "" : "-" + thisdata.city) +
  228. (thisdata.area == null ? "" : "-" + thisdata.area);
  229. thisdata.key = i;
  230. thisdata.id = thisdata.uid;
  231. thisdata.lastFollowTime = thisdata.lastFollowTime && thisdata.lastFollowTime.split(" ")[0];
  232. thisdata.transferTime= thisdata.transferTime && thisdata.transferTime.split(" ")[0];
  233. thisdata.surplusFollowTime= thisdata.surplusFollowTime && thisdata.surplusFollowTime.split(" ")[0];
  234. thisdata.surplusSignTime= thisdata.surplusSignTime && thisdata.surplusSignTime.split(" ")[0];
  235. thisdata.locationProvince= diqu;
  236. theArr.push(thisdata);
  237. }
  238. this.state.pagination.current = data.data.pageNo;
  239. this.state.pagination.total = data.data.totalCount;
  240. if (data.data && data.data.list && !data.data.list.length) {
  241. this.state.pagination.current = 0;
  242. this.state.pagination.total = 0;
  243. }
  244. this.setState({
  245. ispage: data.data.pageNo,
  246. dataSource: theArr,
  247. pagination: this.state.pagination,
  248. });
  249. }
  250. }.bind(this),
  251. }).always(
  252. function () {
  253. this.setState({
  254. loading: false,
  255. });
  256. }.bind(this)
  257. );
  258. };
  259. reset(){
  260. this.setState({
  261. nameSearch: '',
  262. provinceSearch: undefined,
  263. addressSearch: '',
  264. level: undefined,
  265. releaseDate: [],
  266. selectedRowKeys: [],
  267. sortType: 0,
  268. filteredInfo: null,
  269. sortedInfo: null,
  270. },()=>{
  271. this.loadData();
  272. });
  273. };
  274. //品类数据获取
  275. category() {
  276. $.ajax({
  277. method: "get",
  278. dataType: "json",
  279. crossDomain: false,
  280. url: globalConfig.context + "/api/admin/Varieties/getSuperList",
  281. data: {},
  282. success: function (data) {
  283. let thedata = data.data;
  284. let theArr = [];
  285. if (!thedata) {
  286. if (data.error && data.error.length) {
  287. message.warning(data.error[0].message);
  288. }
  289. } else {
  290. thedata.map(function (item, index) {
  291. theArr.push({
  292. value: item.id,
  293. key: item.cname,
  294. });
  295. });
  296. }
  297. this.setState({
  298. categoryArr: theArr,
  299. });
  300. }.bind(this),
  301. });
  302. }
  303. tableRowClick(record){ //key 控制弹窗初始显示第几级
  304. this.setState({
  305. selectedRowKeys: [],
  306. modalVisible: true,
  307. basicState: true,
  308. contactState: true,
  309. modalName: record.name,
  310. rowData: record,
  311. });
  312. };
  313. closeDesc(e, s) {
  314. this.setState({
  315. basicState: e,
  316. visitModul: e,
  317. modalVisible: e,
  318. showDesc: e,
  319. tabsKey: '',
  320. })
  321. if (s) {
  322. this.loadData(this.state.ispage);
  323. }
  324. }
  325. //发布指导意见
  326. releaseGuidance(){
  327. if(!this.state.guidance){
  328. message.info('指导意见不能为空')
  329. return;
  330. }
  331. this.setState({
  332. loading: true,
  333. });
  334. let _this = this;
  335. $.ajax({
  336. method: "get",
  337. dataType: "json",
  338. crossDomain: false,
  339. url: globalConfig.context + "/api/admin/customer/pushReleaseUser",
  340. data: {
  341. guidance: this.state.guidance,
  342. },
  343. success: function (data) {
  344. let thedata = data.data;
  345. if (!thedata) {
  346. if (data.error && data.error.length) {
  347. message.warning(data.error[0].message);
  348. }
  349. }else {
  350. message.success("发布成功");
  351. _this.loadData(this.state.ispage);
  352. }
  353. }.bind(this),
  354. }).always(
  355. function () {
  356. this.setState({
  357. loading: false,
  358. });
  359. }.bind(this)
  360. );
  361. }
  362. changeList(arr) {
  363. const newArr = [];
  364. this.state.columns.forEach(item => {
  365. arr.forEach(val => {
  366. if (val === item.title) {
  367. newArr.push(item);
  368. }
  369. });
  370. });
  371. this.setState({
  372. changeList: newArr
  373. });
  374. }
  375. render() {
  376. let { sortedInfo, filteredInfo,columns } = this.state;
  377. return(
  378. <div className="user-content">
  379. <ShowModalDiv ShowModal={this.state.showModal} />
  380. <div className="content-title">
  381. <span>指导意见</span>
  382. </div>
  383. <Tabs defaultActiveKey="1" className="test">
  384. <TabPane tab="搜索" key="1">
  385. <div className="user-search">
  386. <Input
  387. placeholder="客户名称"
  388. value={this.state.nameSearch}
  389. style={{ width: 150, marginRight: 10, marginLeft: 10 }}
  390. onChange={(e) => {
  391. this.setState({ nameSearch: e.target.value });
  392. }}
  393. />
  394. <Select
  395. placeholder="选择地区"
  396. style={{ width: 80 }}
  397. value={this.state.provinceSearch}
  398. onChange={(e) => {
  399. this.setState({ provinceSearch: e });
  400. }}
  401. >
  402. {this.state.provinces}
  403. </Select>
  404. <span style={{ marginRight: "10px" }}>
  405. <Cascader
  406. options={citySelect()}
  407. value={this.state.addressSearch}
  408. placeholder="选择城市"
  409. onChange={(e, pre) => {
  410. this.setState({ addressSearch: e });
  411. }}
  412. />
  413. </span>
  414. <Select
  415. style={{ width: 120 }}
  416. value={this.state.level}
  417. onChange={(e) => {
  418. this.setState({ level: e });
  419. }}
  420. placeholder="选择客户等级"
  421. >
  422. <Select.Option value="0">一般客户</Select.Option>
  423. <Select.Option value="1">意向客户</Select.Option>
  424. <Select.Option value="2">重点客户</Select.Option>
  425. </Select>
  426. <RangePicker
  427. value={[
  428. this.state.releaseDate[0]
  429. ? moment(this.state.releaseDate[0])
  430. : null,
  431. this.state.releaseDate[1]
  432. ? moment(this.state.releaseDate[1])
  433. : null,
  434. ]}
  435. onChange={(data, dataString) => {
  436. this.setState({ releaseDate: dataString });
  437. }}
  438. />
  439. <Button
  440. type="primary"
  441. style={{ marginLeft: "10px", marginRight: 10 }}
  442. onClick={()=>{
  443. this.loadData();
  444. }}
  445. >
  446. 搜索
  447. </Button>
  448. <Button onClick={this.reset}>重置</Button>
  449. </div>
  450. </TabPane>
  451. <TabPane tab="更改表格显示数据" key="2">
  452. <div style={{ marginLeft: 10 }}>
  453. <ChooseList
  454. columns={columns}
  455. changeFn={this.changeList}
  456. changeList={this.state.changeList}
  457. top={55}
  458. margin={11}
  459. />
  460. </div>
  461. </TabPane>
  462. </Tabs>
  463. <div className="patent-table">
  464. <Spin spinning={this.state.loading}>
  465. <Table
  466. columns={
  467. this.state.changeList
  468. ? this.state.changeList
  469. : columns
  470. }
  471. dataSource={this.state.dataSource}
  472. pagination={this.state.pagination}
  473. onRowClick={this.tableRowClick}
  474. onChange={(pagination, filters, sorter)=>{
  475. //0 正序 1倒序
  476. if(sorter.order === 'ascend'){ //倒序
  477. this.setState({
  478. sortType: 1
  479. },()=>{
  480. this.loadData(pagination.current)
  481. });
  482. }else if (sorter.order === 'descend'){ //正序
  483. this.setState({
  484. sortType: 0
  485. },()=>{
  486. this.loadData(pagination.current)
  487. });
  488. }else if (typeof sorter.order === 'undefined'){ //正常
  489. this.setState({
  490. sortType: 0
  491. },()=>{
  492. this.loadData(pagination.current)
  493. });
  494. }
  495. this.setState({
  496. filteredInfo: filters,
  497. sortedInfo: sorter,
  498. });
  499. }
  500. }
  501. />
  502. </Spin>
  503. </div>
  504. <IntentionDetail
  505. isGuidanceLv={this.props.isGuidanceLv}
  506. isEditGuidanceLv={this.props.isEditGuidanceLv}
  507. categoryArr={this.state.categoryArr}
  508. detailApi={this.props.detailApi}
  509. IntentionData={this.state.rowData}
  510. modalVisible={this.state.modalVisible}
  511. tabsKey={this.state.tabsKey}
  512. name={this.state.modalName}
  513. closeDesc={this.closeDesc}
  514. basicState={this.state.basicState}
  515. contactState={this.state.contactState}
  516. />
  517. <Modal
  518. maskClosable={false}
  519. className="customeDetails"
  520. title="指导意见"
  521. width='500px'
  522. visible={this.state.guidanceVisible}
  523. onOk={()=>{
  524. this.setState({
  525. guidanceVisible: false,
  526. guidance: '',
  527. },()=>{
  528. this.loadData(this.state.ispage);
  529. })
  530. }}
  531. onCancel={()=>{
  532. this.setState({
  533. guidanceVisible: false,
  534. guidance: '',
  535. },()=>{
  536. this.loadData(this.state.ispage);
  537. })
  538. }}
  539. footer=''
  540. >
  541. <Spin spinning={this.state.loading}>
  542. <div style={{
  543. display:'flex',
  544. flexFlow:'column',
  545. }}>
  546. <Input
  547. style={{ width: '400px',height:'50px' }}
  548. placeholder="请输入指导意见"
  549. type={'textarea'}
  550. onChange={(e)=>{
  551. this.setState({
  552. guidance: e.target.value,
  553. })
  554. }}
  555. />
  556. <Button
  557. type="primary"
  558. style={{ marginTop: "10px", marginBottom: '10px' }}
  559. onClick={()=>{
  560. this.releaseGuidance();
  561. }}
  562. >
  563. 确定
  564. </Button>
  565. </div>
  566. </Spin>
  567. </Modal>
  568. </div>
  569. )
  570. }
  571. }
  572. export default CustomerFollow;