index.jsx 19 KB

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