index.jsx 16 KB

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