index.jsx 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612
  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 { salesList } from "@/dataDic.js";
  19. import moment from "moment";
  20. import { provinceSelect, getProvince } from "../../../NewDicProvinceList";
  21. import { ChooseList } from "../../../manageCenter/order/orderNew/chooseList";
  22. import OrderList from "./order"; //客户订单列表
  23. const { TabPane } = Tabs;
  24. const FormItem = Form.Item;
  25. const Option = Select.Option;
  26. const { RangePicker } = DatePicker;
  27. class Source extends Component {
  28. constructor(props) {
  29. super(props);
  30. this.state = {
  31. cellData: {},
  32. onelist: [
  33. {
  34. value: "0",
  35. label: "按签单金额",
  36. },
  37. {
  38. value: "1",
  39. label: "按签单数",
  40. },
  41. ],
  42. columns: [
  43. {
  44. title: "序号",
  45. dataIndex: "key",
  46. key: "key",
  47. width: 45,
  48. render: (text, record, index) =>
  49. <span >
  50. {index + 1}
  51. </span>
  52. },
  53. {
  54. title: "省份",
  55. dataIndex: "province",
  56. key: "province",
  57. width: 120,
  58. onCellClick: (r) => {
  59. let cellData = {};
  60. cellData["province"] = r.province
  61. this.setState({
  62. visible: true,
  63. datas: cellData,
  64. })
  65. },
  66. render: (text, record) =>
  67. <span >
  68. {getProvince(text)}
  69. </span>
  70. },
  71. {
  72. title: "签单数(个)",
  73. dataIndex: "counts",
  74. key: "counts",
  75. width: 120,
  76. onCellClick: (r) => {
  77. let cellData = {};
  78. cellData["province"] = r.province
  79. this.setState({
  80. visible: true,
  81. datas: cellData,
  82. })
  83. },
  84. },
  85. {
  86. title: "签单金额(万元)",
  87. dataIndex: "totalAmount",
  88. key: "totalAmount",
  89. width: 170,
  90. onCellClick: (r) => {
  91. let cellData = {};
  92. cellData["province"] = r.province
  93. this.setState({
  94. visible: true,
  95. datas: cellData,
  96. })
  97. },
  98. },
  99. {
  100. title: "电话新开发/占比",
  101. dataIndex: "dhxkfl",
  102. key: "dhxkfl",
  103. width: 170,
  104. onCellClick: (r) => {
  105. let cellData = {};
  106. cellData["province"] = r.province
  107. cellData["salesType"] = 0
  108. this.setState({
  109. visible: true,
  110. datas: cellData,
  111. })
  112. },
  113. render: (text, record) =>
  114. <span >
  115. {record.dhxkf + "/" + getPercentage(text)}
  116. </span>
  117. },
  118. {
  119. title: "电话自带资源/占比",
  120. dataIndex: "dhzdzyl",
  121. key: "dhzdzyl",
  122. width: 150,
  123. onCellClick: (r) => {
  124. let cellData = {};
  125. cellData["province"] = r.province
  126. cellData["salesType"] = 1
  127. this.setState({
  128. visible: true,
  129. datas: cellData,
  130. })
  131. },
  132. render: (text, record) =>
  133. <span >
  134. {record.dhzdzy + "/" + getPercentage(text)}
  135. </span>
  136. },
  137. {
  138. title: "网络/占比",
  139. dataIndex: "wll",
  140. key: "wll",
  141. width: 150,
  142. onCellClick: (r) => {
  143. let cellData = {};
  144. cellData["province"] = r.province
  145. cellData["salesType"] = 2
  146. this.setState({
  147. visible: true,
  148. datas: cellData,
  149. })
  150. },
  151. render: (text, record) =>
  152. <span >
  153. {record.wl + "/" + getPercentage(text)}
  154. </span>
  155. },
  156. {
  157. title: "渠道/占比",
  158. dataIndex: "qdl",
  159. key: "qdl",
  160. width: 150,
  161. onCellClick: (r) => {
  162. let cellData = {};
  163. cellData["province"] = r.province
  164. cellData["salesType"] = 3
  165. this.setState({
  166. visible: true,
  167. datas: cellData,
  168. })
  169. },
  170. render: (text, record) =>
  171. <span >
  172. {record.qd + "/" + getPercentage(text)}
  173. </span>
  174. },
  175. {
  176. title: "高新复购/占比",
  177. dataIndex: "gxfgl",
  178. key: "gxfgl",
  179. width: 150,
  180. onCellClick: (r) => {
  181. let cellData = {};
  182. cellData["province"] = r.province
  183. cellData["salesType"] = 6
  184. this.setState({
  185. visible: true,
  186. datas: cellData,
  187. })
  188. },
  189. render: (text, record) =>
  190. <span >
  191. {record.gxfg + "/" + getPercentage(text)}
  192. </span>
  193. },
  194. {
  195. title: "其他复购/占比",
  196. dataIndex: "qtfgl",
  197. key: "qtfgl",
  198. width: 150,
  199. onCellClick: (r) => {
  200. let cellData = {};
  201. cellData["province"] = r.province
  202. cellData["salesType"] = 7
  203. this.setState({
  204. visible: true,
  205. datas: cellData,
  206. })
  207. },
  208. render: (text, record) =>
  209. <span >
  210. {record.qtfg + "/" + getPercentage(text)}
  211. </span>
  212. },
  213. {
  214. title: "转介绍/占比",
  215. dataIndex: "zjsl",
  216. key: "zjsl",
  217. width: 150,
  218. onCellClick: (r) => {
  219. let cellData = {};
  220. cellData["province"] = r.province
  221. cellData["salesType"] = 4
  222. this.setState({
  223. visible: true,
  224. datas: cellData,
  225. })
  226. },
  227. render: (text, record) =>
  228. <span >
  229. {record.zjs + "/" + getPercentage(text)}
  230. </span>
  231. },
  232. {
  233. title: "其他/占比",
  234. dataIndex: "qtl",
  235. key: "qtl",
  236. width: 150,
  237. onCellClick: (r) => {
  238. let cellData = {};
  239. cellData["province"] = r.province
  240. cellData["salesType"] = 5
  241. this.setState({
  242. visible: true,
  243. datas: cellData,
  244. })
  245. },
  246. render: (text, record) =>
  247. <span >
  248. {record.qt + "/" + getPercentage(text)}
  249. </span>
  250. },
  251. ],
  252. pagination: {
  253. defaultCurrent: 1,
  254. defaultPageSize: 10,
  255. showQuickJumper: true,
  256. pageSize: 10,
  257. onChange: function (page) {
  258. this.loadData(page);
  259. }.bind(this),
  260. showTotal: function (total) {
  261. return "共" + total + "条数据";
  262. },
  263. },
  264. contactsOption: [],
  265. loading: false,
  266. changeList: undefined,
  267. searchValues: {},
  268. dataSource: [],
  269. visible: false,
  270. };
  271. }
  272. changeList(arr) {
  273. const newArr = [];
  274. this.state.columns.forEach((item) => {
  275. arr.forEach((val) => {
  276. if (val === item.title) {
  277. newArr.push(item);
  278. }
  279. });
  280. });
  281. this.setState({
  282. changeList: newArr,
  283. });
  284. }
  285. // 重置
  286. resetAll() {
  287. this.setState(
  288. {
  289. searchValues: JSON.parse(JSON.stringify({})),
  290. selectedRowKeys: [],
  291. },
  292. () => {
  293. this.loadData();
  294. }
  295. );
  296. }
  297. // 列表接口
  298. loadData(pageNo) {
  299. const { searchValues, pagination } = this.state;
  300. this.setState({
  301. loading: true,
  302. });
  303. let datas = Object.assign(searchValues, {
  304. pageNo: pageNo || 1,
  305. pageSize: pagination.pageSize,
  306. });
  307. $.ajax({
  308. method: "get",
  309. dataType: "json",
  310. crossDomain: false,
  311. url: globalConfig.context + "/api/admin/statistis/orderSalesSource",
  312. data: datas,
  313. success: function (data) {
  314. ShowModal(this);
  315. this.setState({
  316. loading: false,
  317. });
  318. if (data.error && data.error.length === 0) {
  319. if (data.data.list) {
  320. pagination.current = data.data.pageNo;
  321. pagination.total = data.data.totalCount;
  322. if (data.data && data.data.list && !data.data.list.length) {
  323. pagination.current = 0;
  324. pagination.total = 0;
  325. }
  326. this.setState({
  327. dataSource: data.data.list,
  328. pagination: this.state.pagination,
  329. pageNo: data.data.pageNo,
  330. });
  331. } else {
  332. this.setState({
  333. dataSource: data.data,
  334. pagination: false,
  335. });
  336. }
  337. } else {
  338. message.warning(data.error[0].message);
  339. }
  340. }.bind(this),
  341. }).always(
  342. function () {
  343. this.setState({
  344. loading: false,
  345. });
  346. }.bind(this)
  347. );
  348. }
  349. // 获取上级组织
  350. selectSuperId() {
  351. this.setState({
  352. departmentLoading: true,
  353. });
  354. $.ajax({
  355. method: "get",
  356. dataType: "json",
  357. crossDomain: false,
  358. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  359. data: {},
  360. success: function (data) {
  361. let theArr = [];
  362. if (data.error && data.error.length === 0) {
  363. for (let i = 0; i < data.data.length; i++) {
  364. let theData = data.data[i];
  365. theArr.push({
  366. value: theData.id,
  367. label: theData.name,
  368. });
  369. }
  370. this.setState({
  371. contactsOption: theArr,
  372. });
  373. } else {
  374. message.warning(data.error[0].message);
  375. }
  376. }.bind(this),
  377. }).always(
  378. function () {
  379. this.setState({
  380. departmentLoading: false,
  381. });
  382. }.bind(this)
  383. );
  384. }
  385. // 导出excel
  386. exportExec() {
  387. message.config({
  388. duration: 20,
  389. });
  390. let loading = message.loading("下载中...");
  391. this.setState({
  392. exportPendingLoading: true,
  393. });
  394. let data = {};
  395. let obj1 = JSON.parse(JSON.stringify(this.state.searchValues));
  396. data = Object.assign(data, obj1);
  397. $.ajax({
  398. method: "get",
  399. dataType: "json",
  400. crossDomain: false,
  401. url: "/api/admin/statistis/orderSalesSource/export",
  402. data,
  403. success: function (data) {
  404. if (data.error.length === 0) {
  405. this.download(data.data);
  406. } else {
  407. message.warning(data.error[0].message);
  408. }
  409. }.bind(this),
  410. }).always(
  411. function () {
  412. loading();
  413. this.setState({
  414. exportPendingLoading: false,
  415. });
  416. }.bind(this)
  417. );
  418. }
  419. // 下载
  420. download(fileName) {
  421. window.location.href =
  422. globalConfig.context + "/open/download?fileName=" + fileName;
  423. }
  424. componentWillMount() {
  425. this.selectSuperId();
  426. this.loadData();
  427. }
  428. render() {
  429. const { searchValues, onelist, columns, changeList, contactsOption, visible, datas } = this.state;
  430. return (
  431. <div className="user-content signatureStatistics">
  432. <div className="content-title">
  433. <span
  434. style={{
  435. fontWeight: 900,
  436. fontSize: 16,
  437. display: "block",
  438. marginBottom: 10,
  439. }}
  440. >销售来源统计表 &nbsp;<spn style={{ color: "rgb(49,49,255)" }}>注:可通过签单数、签单金额查询统计</spn></span>
  441. </div>
  442. <Tabs defaultActiveKey="1">
  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.loadData() }}
  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. title={
  582. <div>
  583. <span style={{ marginRight: 20 }}>客户订单列表</span>
  584. {!!datas["salesType"] && <span style={{ color: "red", marginRight: 20 }}>销售类型:{salesList[datas["salesType"]]}</span>}
  585. <span style={{ color: "red" }}>省份:{getProvince(datas["province"])}</span>
  586. </div>}
  587. width="90%"
  588. footer={null}
  589. onCancel={() => {
  590. this.setState({
  591. visible: false,
  592. datas: {},
  593. });
  594. }}
  595. >
  596. <OrderList
  597. data={this.state.datas}
  598. />
  599. </Modal>
  600. }
  601. </div>
  602. );
  603. }
  604. }
  605. export default Source;