index.jsx 20 KB

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