index.jsx 20 KB

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