statistics.jsx 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658
  1. import React, { Component } from "react";
  2. import {
  3. AutoComplete,
  4. Button,
  5. DatePicker,
  6. Input,
  7. message,
  8. Modal,
  9. Select,
  10. Spin,
  11. Table,
  12. Tabs,
  13. Tag,
  14. Tooltip,
  15. } from "antd";
  16. import { ShowModal, getPercentage } from "@/tools";
  17. import { salesList, } from "@/dataDic"
  18. import { ChooseList } from "../../order/orderNew/chooseList";
  19. import $ from "jquery/src/ajax";
  20. import "./index.less";
  21. import moment from "moment";
  22. import DetailList from "./detaillist";
  23. const { TabPane } = Tabs;
  24. const { RangePicker } = DatePicker;
  25. class SignStatistics extends Component {
  26. constructor(props) {
  27. super(props);
  28. this.state = {
  29. pageNo: 1,
  30. loading: false,
  31. changeList: undefined,
  32. columns: [
  33. {
  34. title: "营销员",
  35. dataIndex: "name",
  36. key: "name",
  37. onCellClick: (r) => {
  38. let cellData = {};
  39. cellData["aid"] = r.id
  40. cellData["aname"] = r.name
  41. this.setState({
  42. showDetail: true,
  43. rowData: cellData,
  44. })
  45. },
  46. },
  47. {
  48. title: "签单客户",
  49. dataIndex: "userCount",
  50. key: "userCount",
  51. onCellClick: (r) => {
  52. let cellData = {};
  53. cellData["aid"] = r.id
  54. cellData["aname"] = r.name
  55. this.setState({
  56. showDetail: true,
  57. rowData: cellData,
  58. })
  59. },
  60. },
  61. {
  62. title: "签单个数",
  63. dataIndex: "orderCount",
  64. key: "orderCount",
  65. onCellClick: (r) => {
  66. let cellData = {};
  67. cellData["aid"] = r.id
  68. cellData["aname"] = r.name
  69. this.setState({
  70. showDetail: true,
  71. rowData: cellData,
  72. })
  73. },
  74. render: (text) =>
  75. <span style={{ color: "#58A3FF", textDecoration: "underline" }}>
  76. {text}
  77. </span>
  78. },
  79. {
  80. title: "签单总金额(万元)",
  81. dataIndex: "totalAmount",
  82. key: "totalAmount",
  83. onCellClick: (r) => {
  84. let cellData = {};
  85. cellData["aid"] = r.id
  86. cellData["aname"] = r.name
  87. this.setState({
  88. showDetail: true,
  89. rowData: cellData,
  90. })
  91. },
  92. },
  93. {
  94. title: "新签数",
  95. dataIndex: "newSignNumber",
  96. key: "newSignNumber",
  97. onCellClick: (r) => {
  98. let cellData = {};
  99. cellData["aid"] = r.id
  100. cellData["aname"] = r.name
  101. cellData["orderType"] = "1"
  102. this.setState({
  103. showDetail: true,
  104. rowData: cellData,
  105. })
  106. },
  107. render: (text) =>
  108. <span style={{ color: "#58A3FF", textDecoration: "underline" }}>
  109. {text}
  110. </span>
  111. },
  112. {
  113. title: "新签率",
  114. dataIndex: "newRatio",
  115. key: "newRatio",
  116. onCellClick: (r) => {
  117. let cellData = {};
  118. cellData["aid"] = r.id
  119. cellData["aname"] = r.name
  120. cellData["orderType"] = "1"
  121. this.setState({
  122. showDetail: true,
  123. rowData: cellData,
  124. })
  125. },
  126. render: (text) =>
  127. <span >
  128. {getPercentage(text)}
  129. </span>
  130. },
  131. {
  132. title: "复购数",
  133. dataIndex: "repeatSignNumber",
  134. key: "repeatSignNumber",
  135. onCellClick: (r) => {
  136. let cellData = {};
  137. cellData["aid"] = r.id
  138. cellData["aname"] = r.name
  139. cellData["orderType"] = "2"
  140. this.setState({
  141. showDetail: true,
  142. rowData: cellData,
  143. })
  144. },
  145. render: (text) =>
  146. <span style={{ color: "#58A3FF", textDecoration: "underline" }}>
  147. {text}
  148. </span>
  149. },
  150. {
  151. title: "复购率",
  152. dataIndex: "repeatRatio",
  153. key: "repeatRatio",
  154. onCellClick: (r) => {
  155. let cellData = {};
  156. cellData["aid"] = r.id
  157. cellData["aname"] = r.name
  158. cellData["orderType"] = "2"
  159. this.setState({
  160. showDetail: true,
  161. rowData: cellData,
  162. })
  163. },
  164. render: (text) =>
  165. <span >
  166. {getPercentage(text)}
  167. </span>
  168. },
  169. {
  170. title: "渠道签单数",
  171. dataIndex: "channelSignNumber",
  172. key: "channelSignNumber",
  173. onCellClick: (r) => {
  174. let cellData = {};
  175. cellData["aid"] = r.id
  176. cellData["aname"] = r.name
  177. cellData["orderType"] = "3"
  178. this.setState({
  179. showDetail: true,
  180. rowData: cellData,
  181. })
  182. },
  183. render: (text) =>
  184. <span style={{ color: "#58A3FF", textDecoration: "underline" }}>
  185. {text}
  186. </span>
  187. },
  188. {
  189. title: "渠道签单率",
  190. dataIndex: "channelRatio",
  191. key: "channelRatio",
  192. onCellClick: (r) => {
  193. let cellData = {};
  194. cellData["aid"] = r.id
  195. cellData["aname"] = r.name
  196. cellData["orderType"] = "3"
  197. this.setState({
  198. showDetail: true,
  199. rowData: cellData,
  200. })
  201. },
  202. render: (text) =>
  203. <span >
  204. {getPercentage(text)}
  205. </span>
  206. },
  207. ],
  208. pagination: {
  209. defaultCurrent: 1,
  210. defaultPageSize: 10,
  211. showQuickJumper: true,
  212. pageSize: 99999,
  213. onChange: function (page) {
  214. this.loadData(page);
  215. }.bind(this),
  216. showTotal: function (total) {
  217. return "共" + total + "条数据";
  218. },
  219. },
  220. dataSource: [],
  221. searchInfor: {},
  222. params: {},
  223. showDetail: false,
  224. companyList: [],
  225. };
  226. this.loadData = this.loadData.bind(this);
  227. this.resetAll = this.resetAll.bind(this);
  228. this.changeList = this.changeList.bind(this);
  229. this.selectSuperId = this.selectSuperId.bind(this);
  230. this.supervisor = this.supervisor.bind(this);
  231. this.httpChange = this.httpChange.bind(this);
  232. this.blurChange = this.blurChange.bind(this);
  233. this.selectAuto = this.selectAuto.bind(this);
  234. this.exportExec = this.exportExec.bind(this);
  235. }
  236. //获取上级组织
  237. selectSuperId() {
  238. $.ajax({
  239. method: "get",
  240. dataType: "json",
  241. crossDomain: false,
  242. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  243. data: {},
  244. success: function (data) {
  245. let theArr = [];
  246. if (data.error && data.error.length === 0) {
  247. for (let i = 0; i < data.data.length; i++) {
  248. let theData = data.data[i];
  249. theArr.push(
  250. <Select.Option value={theData.id} key={theData.id}>
  251. {theData.name}
  252. </Select.Option>
  253. );
  254. }
  255. this.setState({
  256. contactsOption: theArr,
  257. companyList: data.data,
  258. searchInfor: Object.assign(this.state.searchInfor, {
  259. depId: data.data[0].id,
  260. }),
  261. }, () => {
  262. this.loadData();
  263. });
  264. } else {
  265. message.warning(data.error[0].message);
  266. }
  267. }.bind(this),
  268. }).always(
  269. function () {
  270. this.setState({
  271. // loading: false,
  272. });
  273. }.bind(this)
  274. );
  275. }
  276. changeList(arr) {
  277. const newArr = [];
  278. this.state.columns.forEach((item) => {
  279. arr.forEach((val) => {
  280. if (val === item.title) {
  281. newArr.push(item);
  282. }
  283. });
  284. });
  285. this.setState({
  286. changeList: newArr,
  287. });
  288. }
  289. // 搜索
  290. submit() {
  291. this.setState({
  292. params: this.state.searchInfor
  293. })
  294. this.loadData()
  295. }
  296. loadData(pageNo) {
  297. const { searchInfor, pagination } = this.state;
  298. this.setState({
  299. loading: true,
  300. });
  301. let datas = Object.assign(searchInfor, {
  302. pageNo: pageNo || 1,
  303. pageSize: pagination.pageSize,
  304. });
  305. $.ajax({
  306. method: "get",
  307. dataType: "json",
  308. crossDomain: false,
  309. url: globalConfig.context + "/api/admin/statistis/signStatistics",
  310. data: datas,
  311. success: function (data) {
  312. ShowModal(this);
  313. if (data.error && data.error.length === 0) {
  314. if (data.data.list) {
  315. pagination.current = data.data.pageNo;
  316. pagination.total = data.data.totalCount;
  317. if (data.data && data.data.list && !data.data.list.length) {
  318. pagination.current = 0;
  319. pagination.total = 0;
  320. }
  321. this.setState({
  322. dataSource: data.data.list,
  323. pagination: this.state.pagination,
  324. pageNo: data.data.pageNo,
  325. });
  326. } else {
  327. this.setState({
  328. dataSource: data.data,
  329. pagination: false,
  330. });
  331. }
  332. } else {
  333. message.warning(data.error[0].message);
  334. }
  335. this.setState({
  336. loading: false,
  337. });
  338. }.bind(this),
  339. }).always(
  340. function () {
  341. this.setState({
  342. loading: false,
  343. });
  344. }.bind(this)
  345. );
  346. }
  347. resetAll() {
  348. const { companyList } = this.state
  349. this.setState(
  350. {
  351. searchInfor: { depId: companyList[0].id },
  352. params: JSON.parse(JSON.stringify({})),
  353. aname: "",
  354. },
  355. () => {
  356. this.loadData();
  357. }
  358. );
  359. }
  360. supervisor(e) {
  361. $.ajax({
  362. method: "get",
  363. dataType: "json",
  364. crossDomain: false,
  365. url: globalConfig.context + "/api/admin/customer/listAdminByName",
  366. data: {
  367. adminName: e,
  368. status: "2",
  369. },
  370. success: function (data) {
  371. if (data.error && data.error.length === 0) {
  372. this.setState({
  373. customerArr: data.data,
  374. });
  375. } else {
  376. message.warning(data.error[0].message);
  377. }
  378. }.bind(this),
  379. }).always(function () { }.bind(this));
  380. }
  381. httpChange(e) {
  382. if (e.length >= 1) {
  383. this.supervisor(e);
  384. }
  385. this.setState({
  386. aname: e,
  387. });
  388. }
  389. selectAuto(value, options) {
  390. this.setState({
  391. aname: value,
  392. });
  393. }
  394. blurChange(e) {
  395. const { searchInfor } = this.state
  396. let theType = undefined;
  397. let contactLists = this.state.customerArr || [];
  398. if (e) {
  399. contactLists.map(function (item) {
  400. if (item.name == e.toString()) {
  401. theType = item.id;
  402. }
  403. });
  404. }
  405. this.setState({
  406. searchInfor: Object.assign(searchInfor, {
  407. aid: theType,
  408. }),
  409. });
  410. }
  411. // 导出Excel
  412. exportExec() {
  413. this.setState({
  414. exportPendingLoading: true,
  415. });
  416. message.config({
  417. duration: 20,
  418. });
  419. let loading = message.loading("下载中...");
  420. let data = this.state.searchInfor;
  421. $.ajax({
  422. method: "get",
  423. dataType: "json",
  424. crossDomain: false,
  425. url:
  426. globalConfig.context + "/api/admin/statistis/signStatistics/export",
  427. data,
  428. success: function (data) {
  429. if (data.error.length === 0) {
  430. this.download(data.data);
  431. } else {
  432. message.warning(data.error[0].message);
  433. }
  434. }.bind(this),
  435. }).always(
  436. function () {
  437. loading();
  438. this.setState({
  439. exportPendingLoading: false,
  440. });
  441. }.bind(this)
  442. );
  443. }
  444. // 下载
  445. download(fileName) {
  446. window.location.href =
  447. globalConfig.context + "/open/download?fileName=" + fileName;
  448. }
  449. // 关闭弹窗
  450. closeDesc() {
  451. this.setState({
  452. showDetail: false,
  453. params: {},
  454. });
  455. this.loadData(this.state.pageNo);
  456. }
  457. componentWillMount() {
  458. this.selectSuperId();
  459. }
  460. render() {
  461. const { searchInfor, showDetail, rowData, params, dataSource } = this.state
  462. const dataSources = this.state.customerArr || [];
  463. const options = dataSources.map((group) => (
  464. <Select.Option key={group.id} value={group.name}>
  465. {group.name}
  466. </Select.Option>
  467. ));
  468. return (
  469. <div>
  470. <div className="user-content">
  471. <div className="content-title">
  472. <span style={{ fontWeight: 900, fontSize: 16 }}>签单客户数据统计(销售角度)</span>
  473. </div>
  474. <Tabs defaultActiveKey="1" className="test">
  475. <TabPane tab="搜索" key="1">
  476. <div
  477. className="user-search"
  478. style={{
  479. marginTop: "10px",
  480. marginLeft: "10px",
  481. marginRight: "10px",
  482. }}
  483. >
  484. <span style={{ marginRight: "10px" }}>
  485. <Select
  486. placeholder="选择部门"
  487. style={{ width: 200 }}
  488. value={searchInfor.depId}
  489. onChange={(e) => {
  490. this.setState({
  491. searchInfor: Object.assign(searchInfor, {
  492. depId: e,
  493. }),
  494. });
  495. }}
  496. notFoundContent="未获取到上级组织列表"
  497. >
  498. {this.state.contactsOption}
  499. </Select>
  500. </span>
  501. <span style={{ marginRight: "10px" }}>
  502. <AutoComplete
  503. className="certain-category-search"
  504. dropdownClassName="certain-category-search-dropdown"
  505. dropdownMatchSelectWidth={false}
  506. style={{ width: 160 }}
  507. dataSource={options}
  508. placeholder="输入姓名"
  509. value={this.state.aname}
  510. onChange={this.httpChange}
  511. filterOption={true}
  512. onBlur={this.blurChange}
  513. onSelect={this.selectAuto}
  514. >
  515. <Input />
  516. </AutoComplete>
  517. </span>
  518. <span style={{ marginRight: "10px" }}>
  519. <Select
  520. style={{ width: 160 }}
  521. placeholder="签单金额"
  522. value={searchInfor.amountType}
  523. onChange={(e) => {
  524. this.setState({
  525. searchInfor: Object.assign(searchInfor, {
  526. amountType: e,
  527. }),
  528. });
  529. }}
  530. >
  531. <Option value="0">全部</Option>
  532. <Option value="1">小于10万</Option>
  533. <Option value="2">10-20万</Option>
  534. <Option value="3">20-30万</Option>
  535. <Option value="4">30万以上</Option>
  536. </Select>
  537. </span>
  538. <span style={{ marginRight: "10px" }}>
  539. <span style={{ marginRight: "5px", marginBottom: "10px" }}>
  540. 签单时间 :
  541. </span>
  542. <RangePicker
  543. style={{ marginRight: "10px", marginBottom: "10px" }}
  544. value={[
  545. searchInfor.signTimeStart
  546. ? moment(searchInfor.signTimeStart)
  547. : null,
  548. searchInfor.signTimeEnd ? moment(searchInfor.signTimeEnd) : null,
  549. ]}
  550. onChange={(data, dataString) => {
  551. this.setState({
  552. searchInfor: Object.assign(searchInfor, {
  553. signTimeStart: dataString[0],
  554. signTimeEnd: dataString[1],
  555. }),
  556. });
  557. }}
  558. />
  559. </span>
  560. <Button
  561. type="primary"
  562. onClick={() => {
  563. this.submit()
  564. }}
  565. style={{ marginRight: "10px", marginBottom: "10px" }}
  566. >
  567. 搜索
  568. </Button>
  569. <Button
  570. onClick={this.resetAll}
  571. style={{ marginRight: "10px", marginBottom: "10px" }}
  572. >
  573. 重置
  574. </Button>
  575. </div>
  576. </TabPane>
  577. <TabPane tab="更改表格显示数据" key="2">
  578. <div style={{ marginLeft: 10 }}>
  579. <Spin spinning={this.state.loading}>
  580. <ChooseList
  581. columns={this.state.columns}
  582. changeFn={this.changeList}
  583. changeList={this.state.changeList}
  584. top={55}
  585. margin={11}
  586. />
  587. </Spin>
  588. </div>
  589. </TabPane>
  590. <TabPane tab="导出" key="3">
  591. <div style={{ float: "left" }}>
  592. <Button
  593. type="primary"
  594. loading={this.state.exportPendingLoading}
  595. onClick={this.exportExec}
  596. style={{ margin: 10 }}
  597. >
  598. 导出Excel
  599. </Button>
  600. </div>
  601. </TabPane>
  602. </Tabs>
  603. <div className="patent-table">
  604. <div style={{ padding: "0px 10px 10px" }}>
  605. 总计:签单客户&nbsp;
  606. <span style={{ color: "#58A3FF" }}>{dataSource.reduce((prev, next) => { return prev + next.userCount }, 0)}</span>&nbsp;个,签单个数&nbsp;
  607. <span style={{ color: "#58A3FF" }}>{dataSource.reduce((prev, next) => { return prev + next.orderCount }, 0)}</span>&nbsp;个
  608. </div>
  609. <Spin spinning={this.state.loading}>
  610. <Table
  611. bordered
  612. size="middle"
  613. columns={
  614. this.state.changeList
  615. ? this.state.changeList
  616. : this.state.columns
  617. }
  618. dataSource={dataSource}
  619. pagination={false}
  620. />
  621. </Spin>
  622. </div>
  623. </div>
  624. {
  625. showDetail &&
  626. <Modal
  627. visible={showDetail}
  628. title={<div>
  629. <span style={{ marginRight: 20 }}>客户订单列表</span>
  630. <span style={{ color: "red" }}>归属人:{rowData["aname"]}</span>
  631. </div>}
  632. width="90%"
  633. footer={null}
  634. onCancel={this.closeDesc.bind(this)}
  635. >
  636. <DetailList
  637. data={Object.assign(rowData, params)}
  638. />
  639. </Modal>
  640. }
  641. </div>
  642. );
  643. }
  644. }
  645. export default SignStatistics;