index.jsx 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524
  1. import React, { Component } from 'react';
  2. import {
  3. Button, DatePicker,
  4. Input,
  5. message,
  6. Select,
  7. Spin,
  8. Table, Tabs,
  9. } from "antd";
  10. import './index.less';
  11. import $ from "jquery/src/ajax";
  12. import CustomerDetails from './customerDetails';
  13. import moment from "moment";
  14. import { ChooseList } from "../../../order/orderNew/chooseList";
  15. const { RangePicker } = DatePicker;
  16. const { TabPane } = Tabs;
  17. class DepartmentStatistics extends Component {
  18. constructor(props) {
  19. super(props);
  20. this.state = {
  21. superId: undefined,
  22. nameSearch: '',
  23. releaseDate: [moment(Date.now() - 777600000).format('YYYY-MM-DD'), moment(Date.now()).format('YYYY-MM-DD')],
  24. columns: [
  25. {
  26. title: "部门",
  27. dataIndex: "name",
  28. key: "name",
  29. width: '25%',
  30. },
  31. {
  32. title: "私有数",
  33. dataIndex: "userCount",
  34. key: "userCount",
  35. className: 'tableRowStyle',
  36. width: 120,
  37. render: (text, record) => {
  38. return (
  39. <div
  40. className={record.aid ? 'receiveCount' : ''}
  41. onClick={(e) => {
  42. if (record.aid) {
  43. e.stopPropagation();
  44. this.setState({
  45. customerVisible: true,
  46. aid: record.aid,
  47. aName: record.aName,
  48. type: 0,
  49. })
  50. }
  51. }}>
  52. {text}
  53. </div>
  54. );
  55. },
  56. },
  57. {
  58. title: "外联数",
  59. dataIndex: "channelCount",
  60. key: "channelCount",
  61. className: 'tableRowStyle',
  62. width: 120,
  63. render: (text, record) => {
  64. return (
  65. <div
  66. className={record.aid ? 'receiveCount' : ''}
  67. onClick={(e) => {
  68. if (record.aid) {
  69. e.stopPropagation();
  70. this.setState({
  71. customerVisible: true,
  72. aid: record.aid,
  73. aName: record.aName,
  74. type: 1,
  75. })
  76. }
  77. }}>
  78. {text}
  79. </div>
  80. );
  81. },
  82. },
  83. {
  84. title: "签单数",
  85. dataIndex: "signCount",
  86. key: "signCount",
  87. className: 'tableRowStyle',
  88. width: 120,
  89. render: (text, record) => {
  90. return (
  91. <div
  92. className={record.aid ? 'receiveCount' : ''}
  93. onClick={(e) => {
  94. if (record.aid) {
  95. e.stopPropagation();
  96. this.setState({
  97. customerVisible: true,
  98. aName: record.aName,
  99. aid: record.aid,
  100. type: 2,
  101. })
  102. }
  103. }}>
  104. {text}
  105. </div>
  106. );
  107. },
  108. },
  109. {
  110. title: "私有新增数",
  111. dataIndex: "newCount",
  112. key: "newCount",
  113. className: 'tableRowStyle',
  114. width: 120,
  115. render: (text, record) => {
  116. return (
  117. <div
  118. className={record.aid ? 'receiveCount' : ''}
  119. onClick={(e) => {
  120. if (record.aid) {
  121. e.stopPropagation();
  122. this.setState({
  123. customerVisible: true,
  124. aName: record.aName,
  125. aid: record.aid,
  126. type: 3,
  127. })
  128. }
  129. }}>
  130. {text}
  131. </div>
  132. );
  133. },
  134. },
  135. {
  136. title: "外联新增数",
  137. dataIndex: "channelNewCount",
  138. key: "channelNewCount",
  139. className: 'tableRowStyle',
  140. width: 120,
  141. render: (text, record) => {
  142. return (
  143. <div
  144. className={record.aid ? 'receiveCount' : ''}
  145. onClick={(e) => {
  146. if (record.aid) {
  147. e.stopPropagation();
  148. this.setState({
  149. customerVisible: true,
  150. aName: record.aName,
  151. aid: record.aid,
  152. type: 4,
  153. })
  154. }
  155. }}>
  156. {text}
  157. </div>
  158. );
  159. },
  160. },
  161. {
  162. title: "私有面谈数",
  163. dataIndex: "completeCount",
  164. key: "completeCount",
  165. className: 'tableRowStyle',
  166. width: 120,
  167. render: (text, record) => {
  168. return (
  169. <div
  170. className={record.aid ? 'receiveCount' : ''}
  171. onClick={(e) => {
  172. if (record.aid) {
  173. e.stopPropagation();
  174. this.setState({
  175. customerVisible: true,
  176. aName: record.aName,
  177. aid: record.aid,
  178. type: 5,
  179. })
  180. }
  181. }}>
  182. {text}
  183. </div>
  184. );
  185. },
  186. },
  187. {
  188. title: "外联面谈数",
  189. dataIndex: "channelCompleteCount",
  190. key: "channelCompleteCount",
  191. className: 'tableRowStyle',
  192. width: 120,
  193. render: (text, record) => {
  194. return (
  195. <div
  196. className={record.aid ? 'receiveCount' : ''}
  197. onClick={(e) => {
  198. if (record.aid) {
  199. e.stopPropagation();
  200. this.setState({
  201. customerVisible: true,
  202. aName: record.aName,
  203. aid: record.aid,
  204. type: 6,
  205. })
  206. }
  207. }}>
  208. {text}
  209. </div>
  210. );
  211. },
  212. },
  213. {
  214. title: "私有领取数",
  215. dataIndex: "receiveCount",
  216. key: "receiveCount",
  217. className: 'tableRowStyle',
  218. width: 120,
  219. render: (text, record) => {
  220. return (
  221. <div
  222. className={record.aid ? 'receiveCount' : ''}
  223. onClick={(e) => {
  224. if (record.aid) {
  225. e.stopPropagation();
  226. this.setState({
  227. customerVisible: true,
  228. aName: record.aName,
  229. aid: record.aid,
  230. type: 7,
  231. })
  232. }
  233. }}>
  234. {text}
  235. </div>
  236. );
  237. },
  238. },
  239. ],
  240. contactsOption: null,
  241. loading: false,
  242. ispage: 1,
  243. aid: '',
  244. type: '',
  245. visible: false,
  246. };
  247. this.loadData = this.loadData.bind(this);
  248. this.reset = this.reset.bind(this);
  249. this.selectSuperId = this.selectSuperId.bind(this);
  250. this.changeList = this.changeList.bind(this);
  251. }
  252. componentDidMount() {
  253. this.selectSuperId();
  254. }
  255. loadData() {
  256. if (!this.state.superId) {
  257. message.warning('请选择部门后再搜索')
  258. return;
  259. }
  260. this.setState({
  261. loading: true,
  262. });
  263. let api = '/api/admin/customer/selectAllUser';
  264. let data = {};
  265. if (this.state.superId) {
  266. data.depId = this.state.superId;
  267. }
  268. if (this.state.nameSearch) {
  269. data.aName = this.state.nameSearch;
  270. }
  271. if (this.state.releaseDate[0]) {
  272. data.startTime = this.state.releaseDate[0]
  273. }
  274. if (this.state.releaseDate[1]) {
  275. data.endTime = this.state.releaseDate[1]
  276. }
  277. $.ajax({
  278. method: "get",
  279. dataType: "json",
  280. crossDomain: false,
  281. url: globalConfig.context + api,
  282. data: data,
  283. success: function (data) {
  284. let theArr = [];
  285. if (data.error.length !== 0) {
  286. if (data.error && data.error.length) {
  287. message.warning(data.error[0].message);
  288. }
  289. } else {
  290. data.data.children = data.data.list;
  291. data.data.children = data.data.children.concat(data.data.aList);
  292. theArr.push(data.data);
  293. theArr = this.handleTabsInfor(theArr);
  294. this.setState({
  295. ispage: data.data.pageNo,
  296. dataSource: theArr,
  297. });
  298. }
  299. }.bind(this),
  300. }).always(
  301. function () {
  302. this.setState({
  303. loading: false,
  304. });
  305. }.bind(this)
  306. );
  307. };
  308. //表格数据处理
  309. handleTabsInfor(infor) {
  310. for (let i = 0; i < infor.length; i++) {
  311. if (!infor[i].key) {
  312. infor[i].key = infor[i].id ? infor[i].id : (infor[i].aid ? infor[i].aid : i)
  313. }
  314. if (infor[i].children) {
  315. for (let c = 0; c < infor[i].children.length; c++) {
  316. infor[i].children[c].key = infor[i].children[c].id;
  317. infor[i].children[c].children = infor[i].children[c].list;
  318. if (infor[i].children[c].aName) { infor[i].children[c].name = infor[i].children[c].aName }
  319. if (infor[i].children[c].aList && Array.isArray(infor[i].children[c].aList) && infor[i].children[c].aList.length) {
  320. if (infor[i].children[c].children && Array.isArray(infor[i].children[c].children)) {
  321. for (let t of infor[i].children[c].aList) {
  322. t.key = t.aid;
  323. t.name = t.aName;
  324. }
  325. infor[i].children[c].children = infor[i].children[c].children.concat(infor[i].children[c].aList);
  326. }
  327. }
  328. this.handleTabsInfor(infor[i].children);
  329. }
  330. }
  331. }
  332. return infor;
  333. }
  334. reset() {
  335. this.setState({
  336. nameSearch: '',
  337. releaseDate: [moment(Date.now() - 777600000).format('YYYY-MM-DD'), moment(Date.now()).format('YYYY-MM-DD')],
  338. }, () => {
  339. this.loadData();
  340. });
  341. };
  342. //获取上级组织
  343. selectSuperId() {
  344. this.state.data = []
  345. $.ajax({
  346. method: "get",
  347. dataType: "json",
  348. crossDomain: false,
  349. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  350. data: {},
  351. success: function (data) {
  352. let theArr = [];
  353. let theId = [];//用于保存上级组织的ID和名称
  354. let thedata = data.data;
  355. if (!thedata) {
  356. if (data.error && data.error.length) {
  357. message.warning(data.error[0].message);
  358. };
  359. thedata = {};
  360. };
  361. for (var i = 0; i < data.data.length; i++) {
  362. let theData = data.data[i];
  363. theArr.push(
  364. <Select.Option value={theData.id} key={theData.id}>{theData.name}</Select.Option>
  365. );
  366. theId.push(
  367. [theData.id, theData.name]
  368. );
  369. };
  370. this.setState({
  371. SuperArr: thedata,
  372. contactsOption: theArr,
  373. theId: theId,
  374. orderStatusOptions: data.data,
  375. });
  376. if (!this.state.superId) {
  377. this.setState({
  378. superId: data.data[0].id
  379. }, () => {
  380. this.loadData();
  381. })
  382. }
  383. }.bind(this),
  384. }).always(function () {
  385. this.setState({
  386. loading: false
  387. });
  388. }.bind(this));
  389. }
  390. changeList(arr) {
  391. const newArr = [];
  392. this.state.columns.forEach(item => {
  393. arr.forEach(val => {
  394. if (val === item.title) {
  395. newArr.push(item);
  396. }
  397. });
  398. });
  399. this.setState({
  400. changeList: newArr
  401. });
  402. }
  403. render() {
  404. return (
  405. <div className="user-content">
  406. <div className="content-title">
  407. <span>部门统计</span>
  408. </div>
  409. <Tabs
  410. defaultActiveKey="1"
  411. className="test">
  412. <TabPane tab="搜索" key="1">
  413. <div className="user-search" style={{ display: 'flex', alignItems: 'center' }}>
  414. <div>
  415. <Select
  416. placeholder="请选择部门"
  417. style={{ width: 200, marginLeft: 10 }}
  418. value={this.state.superId}
  419. onChange={(e) => { this.setState({ superId: e }) }}
  420. notFoundContent="未获取到上级组织列表">
  421. {this.state.contactsOption}
  422. </Select>
  423. </div>
  424. <Input
  425. placeholder="客户名称"
  426. value={this.state.nameSearch}
  427. style={{ width: 150, marginRight: 10, marginLeft: 10 }}
  428. onChange={(e) => {
  429. this.setState({ nameSearch: e.target.value });
  430. }}
  431. />
  432. <div style={{
  433. marginTop: '10px',
  434. }}>
  435. <RangePicker
  436. allowClear={window.adminData.shiroList.indexOf("11") == -1}
  437. disabledDate={(current) => {//“运营管理”角色只能查看部分时间段(暂时10天)的数据
  438. let iskeep = window.adminData.shiroList.indexOf("11") != -1
  439. return iskeep && current && current.valueOf() < Date.now() - 864000000;
  440. }}
  441. value={[
  442. this.state.releaseDate[0]
  443. ? moment(this.state.releaseDate[0])
  444. : null,
  445. this.state.releaseDate[1]
  446. ? moment(this.state.releaseDate[1])
  447. : null,
  448. ]}
  449. onChange={(data, dataString) => {
  450. this.setState({ releaseDate: dataString });
  451. }}
  452. />
  453. </div>
  454. <Button
  455. type="primary"
  456. style={{ marginLeft: "10px", marginRight: 10 }}
  457. onClick={() => {
  458. this.loadData();
  459. }}
  460. >
  461. 搜索
  462. </Button>
  463. <Button onClick={this.reset}>重置</Button>
  464. </div>
  465. </TabPane>
  466. <TabPane tab="更改表格显示数据" key="2">
  467. <div style={{ marginLeft: 10 }}>
  468. <ChooseList
  469. columns={this.state.columns}
  470. changeFn={this.changeList}
  471. changeList={this.state.changeList}
  472. top={55}
  473. margin={11}
  474. />
  475. </div>
  476. </TabPane>
  477. </Tabs>
  478. <div className="patent-table">
  479. <Spin spinning={this.state.loading}>
  480. <Table
  481. size="middle"
  482. scroll={{ y: 550 }}
  483. columns={
  484. this.state.changeList
  485. ? this.state.changeList
  486. : this.state.columns
  487. }
  488. dataSource={this.state.dataSource}
  489. pagination={false}
  490. />
  491. </Spin>
  492. </div>
  493. {this.state.customerVisible ? <CustomerDetails
  494. aid={this.state.aid}
  495. type={this.state.type}
  496. aName={this.state.aName}
  497. startTime={this.state.releaseDate[0]}
  498. endTime={this.state.releaseDate[1]}
  499. visible={this.state.customerVisible}
  500. onCancel={() => {
  501. this.setState({
  502. customerVisible: false,
  503. aid: '',
  504. type: '',
  505. })
  506. }}
  507. /> : <div />}
  508. </div>
  509. )
  510. }
  511. }
  512. export default DepartmentStatistics;