index.jsx 16 KB

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