index.jsx 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422
  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: "completeCount",
  58. key: "completeCount",
  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: 3,
  71. })
  72. }
  73. }}>
  74. {text}
  75. </div>
  76. );
  77. },
  78. },
  79. {
  80. title: "新增客户数",
  81. dataIndex: "inputCount",
  82. key: "inputCount",
  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: 1,
  95. })
  96. }
  97. }}>
  98. {text}
  99. </div>
  100. );
  101. },
  102. },
  103. {
  104. title: "新增面谈数",
  105. dataIndex: "interviewCount",
  106. key: "interviewCount",
  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: 4,
  119. })
  120. }
  121. }}>
  122. {text}
  123. </div>
  124. );
  125. },
  126. },
  127. {
  128. title: "新增领取客户数",
  129. dataIndex: "receiveCount",
  130. key: "receiveCount",
  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: 2,
  143. })
  144. }
  145. }}>
  146. {text}
  147. </div>
  148. );
  149. },
  150. },
  151. ],
  152. contactsOption:null,
  153. loading: false,
  154. ispage: 1,
  155. aid:'',
  156. type:'',
  157. visible:false,
  158. };
  159. this.loadData = this.loadData.bind(this);
  160. this.reset = this.reset.bind(this);
  161. this.selectSuperId = this.selectSuperId.bind(this);
  162. this.changeList = this.changeList.bind(this);
  163. }
  164. componentDidMount() {
  165. // this.loadData();
  166. this.selectSuperId();
  167. }
  168. loadData() {
  169. this.setState({
  170. loading: true,
  171. });
  172. let api = '/api/admin/customer/selectAllUser';
  173. let data = {};
  174. if(this.state.superId){
  175. data.depId = this.state.superId;
  176. }
  177. if(this.state.nameSearch){
  178. data.aName = this.state.nameSearch;
  179. }
  180. if(this.state.releaseDate[0]){
  181. data.startTime = this.state.releaseDate[0]
  182. }
  183. if(this.state.releaseDate[1]){
  184. data.endTime = this.state.releaseDate[1]
  185. }
  186. $.ajax({
  187. method: "get",
  188. dataType: "json",
  189. crossDomain: false,
  190. url: globalConfig.context + api,
  191. data: data,
  192. success: function (data) {
  193. let theArr = [];
  194. if (data.error.length !== 0) {
  195. if (data.error && data.error.length) {
  196. message.warning(data.error[0].message);
  197. }
  198. } else {
  199. data.data.children = data.data.list;
  200. data.data.children = data.data.children.concat(data.data.aList);
  201. theArr.push(data.data);
  202. theArr = this.handleTabsInfor(theArr);
  203. console.log(theArr,'表格数据')
  204. this.setState({
  205. ispage: data.data.pageNo,
  206. dataSource: theArr,
  207. });
  208. }
  209. }.bind(this),
  210. }).always(
  211. function () {
  212. this.setState({
  213. loading: false,
  214. });
  215. }.bind(this)
  216. );
  217. };
  218. //表格数据处理
  219. handleTabsInfor(infor){
  220. for(let i=0;i<infor.length;i++){
  221. if(!infor[i].key){
  222. infor[i].key = infor[i].id ? infor[i].id : (infor[i].aid ? infor[i].aid : i)
  223. }
  224. if(infor[i].children){
  225. for(let c=0;c<infor[i].children.length;c++){
  226. infor[i].children[c].key = infor[i].children[c].id;
  227. infor[i].children[c].children = infor[i].children[c].list;
  228. if(infor[i].children[c].aName){infor[i].children[c].name = infor[i].children[c].aName}
  229. if(infor[i].children[c].aList && Array.isArray(infor[i].children[c].aList) && infor[i].children[c].aList.length){
  230. if(infor[i].children[c].children && Array.isArray(infor[i].children[c].children)){
  231. for(let t of infor[i].children[c].aList){
  232. t.key = t.aid;
  233. t.name = t.aName;
  234. }
  235. infor[i].children[c].children = infor[i].children[c].children.concat(infor[i].children[c].aList);
  236. }
  237. }
  238. this.handleTabsInfor(infor[i].children);
  239. }
  240. }
  241. }
  242. return infor;
  243. }
  244. reset(){
  245. this.setState({
  246. superId:undefined,
  247. nameSearch: '',
  248. releaseDate: [],
  249. },()=>{
  250. this.loadData();
  251. });
  252. };
  253. //获取上级组织
  254. selectSuperId() {
  255. this.state.data = []
  256. $.ajax({
  257. method: "get",
  258. dataType: "json",
  259. crossDomain: false,
  260. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  261. data:{},
  262. success: function (data) {
  263. let theArr = [];
  264. let theId=[];//用于保存上级组织的ID和名称
  265. let thedata=data.data;
  266. if (!thedata) {
  267. if (data.error && data.error.length) {
  268. message.warning(data.error[0].message);
  269. };
  270. thedata = {};
  271. };
  272. for(var i=0;i<data.data.length;i++){
  273. let theData = data.data[i];
  274. theArr.push(
  275. <Select.Option value={theData.id} key={theData.id}>{theData.name}</Select.Option>
  276. );
  277. theId.push(
  278. [theData.id,theData.name]
  279. );
  280. };
  281. this.setState({
  282. SuperArr:thedata,
  283. contactsOption: theArr,
  284. theId: theId,
  285. orderStatusOptions:data.data,
  286. });
  287. }.bind(this),
  288. }).always(function () {
  289. this.setState({
  290. loading: false
  291. });
  292. }.bind(this));
  293. }
  294. changeList(arr) {
  295. const newArr = [];
  296. this.state.columns.forEach(item => {
  297. arr.forEach(val => {
  298. if (val === item.title) {
  299. newArr.push(item);
  300. }
  301. });
  302. });
  303. this.setState({
  304. changeList: newArr
  305. });
  306. }
  307. render() {
  308. return(
  309. <div className="user-content">
  310. <div className="content-title">
  311. <span>部门统计</span>
  312. </div>
  313. <Tabs
  314. defaultActiveKey="1"
  315. className="test">
  316. <TabPane tab="搜索" key="1">
  317. <div className="user-search" style={{display:'flex',alignItems:'center'}}>
  318. <div>
  319. <Select
  320. placeholder="请选择部门"
  321. style={{ width:200,marginLeft:10}}
  322. value={this.state.superId}
  323. onChange={(e) => { this.setState({ superId: e }) }}
  324. notFoundContent="未获取到上级组织列表">
  325. {this.state.contactsOption}
  326. </Select>
  327. </div>
  328. <Input
  329. placeholder="客户名称"
  330. value={this.state.nameSearch}
  331. style={{ width: 150, marginRight: 10, marginLeft: 10 }}
  332. onChange={(e) => {
  333. this.setState({ nameSearch: e.target.value });
  334. }}
  335. />
  336. <div style={{
  337. marginTop: '10px',
  338. }}>
  339. <RangePicker
  340. value={[
  341. this.state.releaseDate[0]
  342. ? moment(this.state.releaseDate[0])
  343. : null,
  344. this.state.releaseDate[1]
  345. ? moment(this.state.releaseDate[1])
  346. : null,
  347. ]}
  348. onChange={(data, dataString) => {
  349. this.setState({ releaseDate: dataString });
  350. }}
  351. />
  352. </div>
  353. <Button
  354. type="primary"
  355. style={{ marginLeft: "10px", marginRight: 10 }}
  356. onClick={()=>{
  357. this.loadData();
  358. }}
  359. >
  360. 搜索
  361. </Button>
  362. <Button onClick={this.reset}>重置</Button>
  363. </div>
  364. </TabPane>
  365. <TabPane tab="更改表格显示数据" key="2">
  366. <div style={{ marginLeft: 10 }}>
  367. <ChooseList
  368. columns={this.state.columns}
  369. changeFn={this.changeList}
  370. changeList={this.state.changeList}
  371. top={55}
  372. margin={11}
  373. />
  374. </div>
  375. </TabPane>
  376. </Tabs>
  377. <div className="patent-table">
  378. <Spin spinning={this.state.loading}>
  379. <Table
  380. size="middle"
  381. columns={
  382. this.state.changeList
  383. ? this.state.changeList
  384. : this.state.columns
  385. }
  386. dataSource={this.state.dataSource}
  387. pagination={false}
  388. />
  389. </Spin>
  390. </div>
  391. {this.state.customerVisible ? <CustomerDetails
  392. aid={this.state.aid}
  393. type={this.state.type}
  394. startTime={this.state.releaseDate[0]}
  395. endTime={this.state.releaseDate[1]}
  396. visible={this.state.customerVisible}
  397. onCancel={()=>{
  398. this.setState({
  399. customerVisible: false,
  400. aid: '',
  401. type: '',
  402. })
  403. }}
  404. /> : <div/>}
  405. </div>
  406. )
  407. }
  408. }
  409. export default DepartmentStatistics;