index.jsx 17 KB

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