index.jsx 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611
  1. import React, { Component } from "react";
  2. import {
  3. Button,
  4. Modal,
  5. Form,
  6. DatePicker,
  7. message,
  8. Spin,
  9. Select,
  10. Tabs,
  11. Table,
  12. } from "antd";
  13. import $ from "jquery/src/ajax";
  14. import { ShowModal, getPercentage } from "@/tools";
  15. import { salesList } from "@/dataDic.js";
  16. import moment from "moment";
  17. import { provinceSelect, getProvince } from "../../../NewDicProvinceList";
  18. import { ChooseList } from "../../../manageCenter/order/orderNew/chooseList";
  19. import OrderList from "./order"; //客户订单列表
  20. import './index.less';
  21. const { TabPane } = Tabs;
  22. const FormItem = Form.Item;
  23. const Option = Select.Option;
  24. const { RangePicker } = DatePicker;
  25. class Source extends Component {
  26. constructor(props) {
  27. super(props);
  28. this.state = {
  29. cellData: {},
  30. searchValues: {},
  31. params: {},
  32. onelist: [
  33. {
  34. value: "0",
  35. label: "按签单金额",
  36. },
  37. {
  38. value: "1",
  39. label: "按签单数",
  40. },
  41. ],
  42. pagination: {
  43. defaultCurrent: 1,
  44. defaultPageSize: 10,
  45. showQuickJumper: true,
  46. pageSize: 10,
  47. onChange: function (page) {
  48. this.loadData(page);
  49. }.bind(this),
  50. showTotal: function (total) {
  51. return "共" + total + "条数据";
  52. },
  53. },
  54. contactsOption: [],
  55. loading: false,
  56. changeList: undefined,
  57. dataSource: [],
  58. visible: false,
  59. columns: [
  60. {
  61. title: "序号",
  62. dataIndex: "key",
  63. key: "key",
  64. width: 45,
  65. render: (text, record, index) =>
  66. <span >
  67. {index + 1}
  68. </span>
  69. },
  70. {
  71. title: "省份",
  72. dataIndex: "province",
  73. key: "province",
  74. width: 120,
  75. onCellClick: (r) => {
  76. let cellData = {};
  77. cellData["province"] = r.province
  78. this.setState({
  79. visible: true,
  80. datas: cellData,
  81. })
  82. },
  83. render: (text, record) =>
  84. <span >
  85. {getProvince(text)}
  86. </span>
  87. },
  88. {
  89. title: "签单数(个)",
  90. dataIndex: "counts",
  91. key: "counts",
  92. width: 120,
  93. onCellClick: (r) => {
  94. let cellData = {};
  95. cellData["province"] = r.province
  96. this.setState({
  97. visible: true,
  98. datas: cellData,
  99. })
  100. },
  101. },
  102. {
  103. title: "签单金额(万元)",
  104. dataIndex: "totalAmount",
  105. key: "totalAmount",
  106. width: 170,
  107. onCellClick: (r) => {
  108. let cellData = {};
  109. cellData["province"] = r.province
  110. this.setState({
  111. visible: true,
  112. datas: cellData,
  113. })
  114. },
  115. },
  116. {
  117. title: "电话新开发/占比",
  118. dataIndex: "dhxkfl",
  119. key: "dhxkfl",
  120. width: 170,
  121. onCellClick: (r) => {
  122. let cellData = {};
  123. cellData["province"] = r.province
  124. cellData["salesType"] = 0
  125. this.setState({
  126. visible: true,
  127. datas: cellData,
  128. })
  129. },
  130. render: (text, record) =>
  131. <span >
  132. {record.dhxkf + "/" + getPercentage(text)}
  133. </span>
  134. },
  135. {
  136. title: "电话自带资源/占比",
  137. dataIndex: "dhzdzyl",
  138. key: "dhzdzyl",
  139. width: 150,
  140. onCellClick: (r) => {
  141. let cellData = {};
  142. cellData["province"] = r.province
  143. cellData["salesType"] = 1
  144. this.setState({
  145. visible: true,
  146. datas: cellData,
  147. })
  148. },
  149. render: (text, record) =>
  150. <span >
  151. {record.dhzdzy + "/" + getPercentage(text)}
  152. </span>
  153. },
  154. {
  155. title: "网络/占比",
  156. dataIndex: "wll",
  157. key: "wll",
  158. width: 150,
  159. onCellClick: (r) => {
  160. let cellData = {};
  161. cellData["province"] = r.province
  162. cellData["salesType"] = 2
  163. this.setState({
  164. visible: true,
  165. datas: cellData,
  166. })
  167. },
  168. render: (text, record) =>
  169. <span >
  170. {record.wl + "/" + getPercentage(text)}
  171. </span>
  172. },
  173. {
  174. title: "渠道/占比",
  175. dataIndex: "qdl",
  176. key: "qdl",
  177. width: 150,
  178. onCellClick: (r) => {
  179. let cellData = {};
  180. cellData["province"] = r.province
  181. cellData["salesType"] = 3
  182. this.setState({
  183. visible: true,
  184. datas: cellData,
  185. })
  186. },
  187. render: (text, record) =>
  188. <span >
  189. {record.qd + "/" + getPercentage(text)}
  190. </span>
  191. },
  192. {
  193. title: "高新复购/占比",
  194. dataIndex: "gxfgl",
  195. key: "gxfgl",
  196. width: 150,
  197. onCellClick: (r) => {
  198. let cellData = {};
  199. cellData["province"] = r.province
  200. cellData["salesType"] = 6
  201. this.setState({
  202. visible: true,
  203. datas: cellData,
  204. })
  205. },
  206. render: (text, record) =>
  207. <span >
  208. {record.gxfg + "/" + getPercentage(text)}
  209. </span>
  210. },
  211. {
  212. title: "其他复购/占比",
  213. dataIndex: "qtfgl",
  214. key: "qtfgl",
  215. width: 150,
  216. onCellClick: (r) => {
  217. let cellData = {};
  218. cellData["province"] = r.province
  219. cellData["salesType"] = 7
  220. this.setState({
  221. visible: true,
  222. datas: cellData,
  223. })
  224. },
  225. render: (text, record) =>
  226. <span >
  227. {record.qtfg + "/" + getPercentage(text)}
  228. </span>
  229. },
  230. {
  231. title: "转介绍/占比",
  232. dataIndex: "zjsl",
  233. key: "zjsl",
  234. width: 150,
  235. onCellClick: (r) => {
  236. let cellData = {};
  237. cellData["province"] = r.province
  238. cellData["salesType"] = 4
  239. this.setState({
  240. visible: true,
  241. datas: cellData,
  242. })
  243. },
  244. render: (text, record) =>
  245. <span >
  246. {record.zjs + "/" + getPercentage(text)}
  247. </span>
  248. },
  249. {
  250. title: "其他/占比",
  251. dataIndex: "qtl",
  252. key: "qtl",
  253. width: 150,
  254. onCellClick: (r) => {
  255. let cellData = {};
  256. cellData["province"] = r.province
  257. cellData["salesType"] = 5
  258. this.setState({
  259. visible: true,
  260. datas: cellData,
  261. })
  262. },
  263. render: (text, record) =>
  264. <span >
  265. {record.qt + "/" + getPercentage(text)}
  266. </span>
  267. },
  268. ],
  269. };
  270. }
  271. changeList(arr) {
  272. const newArr = [];
  273. this.state.columns.forEach((item) => {
  274. arr.forEach((val) => {
  275. if (val === item.title) {
  276. newArr.push(item);
  277. }
  278. });
  279. });
  280. this.setState({
  281. changeList: newArr,
  282. });
  283. }
  284. // 重置
  285. resetAll() {
  286. this.setState(
  287. {
  288. searchValues: JSON.parse(JSON.stringify({})),
  289. params: JSON.parse(JSON.stringify({})),
  290. selectedRowKeys: [],
  291. },
  292. () => {
  293. this.loadData();
  294. }
  295. );
  296. }
  297. // 搜索
  298. submit() {
  299. this.setState({
  300. params: this.state.searchValues
  301. })
  302. this.loadData()
  303. }
  304. // 列表接口
  305. loadData(pageNo) {
  306. const { searchValues, pagination } = this.state;
  307. this.setState({
  308. loading: true,
  309. });
  310. let datas = Object.assign(searchValues, {
  311. pageNo: pageNo || 1,
  312. pageSize: pagination.pageSize,
  313. });
  314. $.ajax({
  315. method: "get",
  316. dataType: "json",
  317. crossDomain: false,
  318. url: globalConfig.context + "/api/admin/statistis/orderSalesSource",
  319. data: datas,
  320. success: function (data) {
  321. ShowModal(this);
  322. this.setState({
  323. loading: false,
  324. });
  325. if (data.error && data.error.length === 0) {
  326. if (data.data.list) {
  327. pagination.current = data.data.pageNo;
  328. pagination.total = data.data.totalCount;
  329. if (data.data && data.data.list && !data.data.list.length) {
  330. pagination.current = 0;
  331. pagination.total = 0;
  332. }
  333. this.setState({
  334. dataSource: data.data.list,
  335. pagination: this.state.pagination,
  336. pageNo: data.data.pageNo,
  337. });
  338. } else {
  339. this.setState({
  340. dataSource: data.data,
  341. pagination: false,
  342. });
  343. }
  344. } else {
  345. message.warning(data.error[0].message);
  346. }
  347. }.bind(this),
  348. }).always(
  349. function () {
  350. this.setState({
  351. loading: false,
  352. });
  353. }.bind(this)
  354. );
  355. }
  356. // 获取上级组织
  357. selectSuperId() {
  358. this.setState({
  359. departmentLoading: true,
  360. });
  361. $.ajax({
  362. method: "get",
  363. dataType: "json",
  364. crossDomain: false,
  365. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  366. data: {},
  367. success: function (data) {
  368. let theArr = [];
  369. if (data.error && data.error.length === 0) {
  370. for (let i = 0; i < data.data.length; i++) {
  371. let theData = data.data[i];
  372. theArr.push({
  373. value: theData.id,
  374. label: theData.name,
  375. });
  376. }
  377. this.setState({
  378. contactsOption: theArr,
  379. });
  380. } else {
  381. message.warning(data.error[0].message);
  382. }
  383. }.bind(this),
  384. }).always(
  385. function () {
  386. this.setState({
  387. departmentLoading: false,
  388. });
  389. }.bind(this)
  390. );
  391. }
  392. // 导出excel
  393. exportExec() {
  394. message.config({
  395. duration: 20,
  396. });
  397. let loading = message.loading("下载中...");
  398. this.setState({
  399. exportPendingLoading: true,
  400. });
  401. let data = {};
  402. let obj1 = JSON.parse(JSON.stringify(this.state.searchValues));
  403. data = Object.assign(data, obj1);
  404. $.ajax({
  405. method: "get",
  406. dataType: "json",
  407. crossDomain: false,
  408. url: "/api/admin/statistis/orderSalesSource/export",
  409. data,
  410. success: function (data) {
  411. if (data.error.length === 0) {
  412. this.download(data.data);
  413. } else {
  414. message.warning(data.error[0].message);
  415. }
  416. }.bind(this),
  417. }).always(
  418. function () {
  419. loading();
  420. this.setState({
  421. exportPendingLoading: false,
  422. });
  423. }.bind(this)
  424. );
  425. }
  426. // 下载
  427. download(fileName) {
  428. window.location.href =
  429. globalConfig.context + "/open/download?fileName=" + fileName;
  430. }
  431. componentWillMount() {
  432. this.selectSuperId();
  433. this.loadData();
  434. }
  435. render() {
  436. const { searchValues, onelist, columns, changeList, contactsOption, visible, datas, params } = this.state;
  437. return (
  438. <div className="user-content">
  439. <div className="content-title" style={{ marginBottom: 10 }}>
  440. <span style={{ fontWeight: 900, fontSize: 16, }}>销售来源统计表 &nbsp;<spn style={{ color: "rgb(49,49,255)" }}>注:可通过签单数、签单金额查询统计</spn></span>
  441. </div>
  442. <Tabs defaultActiveKey="1" onChange={() => { }}>
  443. <TabPane tab="搜索" key="1">
  444. <div style={{ paddingTop: 10 }}>
  445. <Form layout="inline">
  446. <FormItem>
  447. <Select
  448. placeholder={"请选择部门"}
  449. style={{ width: 150 }}
  450. value={searchValues["depId"]
  451. ? searchValues["depId"]
  452. : undefined}
  453. onChange={(e) => {
  454. searchValues["depId"] = e;
  455. this.setState({
  456. searchValues: searchValues,
  457. });
  458. }}
  459. >
  460. {contactsOption.map((cit, index) => (
  461. <Option key={cit.value}>{cit.label}</Option>
  462. ))}
  463. </Select>
  464. </FormItem>
  465. <FormItem>
  466. <Select
  467. placeholder={"请选择省份"}
  468. style={{ width: 150 }}
  469. value={searchValues["province"]
  470. ? searchValues["province"]
  471. : undefined}
  472. onChange={(e) => {
  473. searchValues["province"] = e;
  474. this.setState({
  475. searchValues: searchValues,
  476. });
  477. }}
  478. >
  479. {provinceSelect().map((cit, cin) => (
  480. <Option key={cit.value}>{cit.label}</Option>
  481. ))}
  482. </Select>
  483. </FormItem>
  484. <FormItem>
  485. <Select
  486. placeholder={"请选择"}
  487. style={{ width: 150 }}
  488. value={searchValues["sort"]
  489. ? searchValues["sort"]
  490. : undefined}
  491. onChange={(e) => {
  492. searchValues["sort"] = e
  493. this.setState({
  494. searchValues: searchValues,
  495. });
  496. }}
  497. >
  498. {onelist.map((it, ins) => (
  499. <Option key={it.value}>{it.label}</Option>
  500. ))}
  501. </Select>
  502. </FormItem>
  503. <FormItem>
  504. <RangePicker
  505. value={[
  506. searchValues["startDate"]
  507. ? moment(searchValues["startDate"])
  508. : null,
  509. searchValues["endDate"] ? moment(searchValues["endDate"]) : null,
  510. ]}
  511. onChange={(data, dataString) => {
  512. searchValues["startDate"] = dataString[0],
  513. searchValues["endDate"] = dataString[1],
  514. this.setState({
  515. searchValues: searchValues,
  516. });
  517. }}
  518. />
  519. </FormItem>
  520. <Button
  521. type="primary"
  522. onClick={() => { this.submit() }}
  523. style={{ marginRight: "10px" }}
  524. >
  525. 搜索
  526. </Button>
  527. <Button
  528. onClick={() => { this.resetAll() }}
  529. style={{ marginRight: "10px" }}
  530. >
  531. 重置
  532. </Button>
  533. </Form>
  534. </div>
  535. </TabPane>
  536. <TabPane tab="更改表格显示数据" key="2">
  537. <div style={{ marginLeft: 10 }}>
  538. <ChooseList
  539. columns={columns}
  540. changeFn={this.changeList.bind(this)}
  541. changeList={changeList}
  542. top={55}
  543. margin={11}
  544. />
  545. </div>
  546. </TabPane>
  547. <TabPane tab="导出" key="3">
  548. <div
  549. style={{
  550. marginLeft: 10,
  551. padding: "10px 0",
  552. display: "flex",
  553. }}
  554. >
  555. <Button
  556. type="primary"
  557. onClick={() => { this.exportExec() }}
  558. style={{ marginLeft: "10px" }}
  559. >
  560. 导出excel
  561. </Button>
  562. </div>
  563. </TabPane>
  564. </Tabs>
  565. <div className="patent-table">
  566. <Spin spinning={this.state.loading}>
  567. <Table
  568. bordered
  569. size="middle"
  570. columns={changeList ? changeList : columns}
  571. dataSource={this.state.dataSource}
  572. pagination={this.state.pagination}
  573. />
  574. </Spin>
  575. </div>
  576. {
  577. visible &&
  578. <Modal
  579. visible={visible}
  580. title={
  581. <div>
  582. <span style={{ marginRight: 20 }}>客户订单列表</span>
  583. {!!salesList[datas["salesType"]] && <span style={{ color: "red", marginRight: 20 }}>销售类型:{salesList[datas["salesType"]]}</span>}
  584. <span style={{ color: "red" }}>省份:{getProvince(datas["province"])}</span>
  585. </div>}
  586. width="90%"
  587. footer={null}
  588. onCancel={() => {
  589. this.setState({
  590. visible: false,
  591. datas: {},
  592. });
  593. }}
  594. >
  595. <OrderList
  596. data={Object.assign(datas, params)}
  597. />
  598. </Modal>
  599. }
  600. </div>
  601. );
  602. }
  603. }
  604. export default Source;