index.jsx 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383
  1. import React,{Component} from 'react';
  2. import {
  3. Button, DatePicker,
  4. Input,
  5. message,
  6. Select,
  7. Spin,
  8. Table,
  9. } from "antd";
  10. import './index.less';
  11. import $ from "jquery/src/ajax";
  12. import CustomerDetails from './customerDetails';
  13. import moment from "moment";
  14. const { RangePicker } = DatePicker;
  15. class DepartmentStatistics extends Component{
  16. constructor(props) {
  17. super(props);
  18. this.state={
  19. superId:undefined,
  20. nameSearch: '',
  21. releaseDate: [],
  22. columns: [
  23. {
  24. title: "部门",
  25. dataIndex: "name",
  26. key: "name",
  27. width: '25%',
  28. },
  29. {
  30. title: "客户总数",
  31. dataIndex: "userCount",
  32. key: "userCount",
  33. className: 'tableRowStyle',
  34. render: (text, record) => {
  35. return (
  36. <div
  37. className={record.aid ? 'receiveCount' : ''}
  38. onClick={(e)=>{
  39. if(record.aid){
  40. e.stopPropagation();
  41. this.setState({
  42. customerVisible: true,
  43. aid: record.aid,
  44. type: 0,
  45. })
  46. }
  47. }}>
  48. {text}
  49. </div>
  50. );
  51. },
  52. },
  53. {
  54. title: "成交客户总数",
  55. dataIndex: "completeCount",
  56. key: "completeCount",
  57. className: 'tableRowStyle',
  58. render: (text, record) => {
  59. return (
  60. <div
  61. className={record.aid ? 'receiveCount' : ''}
  62. onClick={(e)=>{
  63. if(record.aid){
  64. e.stopPropagation();
  65. this.setState({
  66. customerVisible: true,
  67. aid: record.aid,
  68. type: 3,
  69. })
  70. }
  71. }}>
  72. {text}
  73. </div>
  74. );
  75. },
  76. },
  77. {
  78. title: "新增客户数",
  79. dataIndex: "inputCount",
  80. key: "inputCount",
  81. className: 'tableRowStyle',
  82. render: (text, record) => {
  83. return (
  84. <div
  85. className={record.aid ? 'receiveCount' : ''}
  86. onClick={(e)=>{
  87. if(record.aid){
  88. e.stopPropagation();
  89. this.setState({
  90. customerVisible: true,
  91. aid: record.aid,
  92. type: 1,
  93. })
  94. }
  95. }}>
  96. {text}
  97. </div>
  98. );
  99. },
  100. },
  101. {
  102. title: "新增面谈数",
  103. dataIndex: "interviewCount",
  104. key: "interviewCount",
  105. className: 'tableRowStyle',
  106. render: (text, record) => {
  107. return (
  108. <div
  109. className={record.aid ? 'receiveCount' : ''}
  110. onClick={(e)=>{
  111. if(record.aid){
  112. e.stopPropagation();
  113. this.setState({
  114. customerVisible: true,
  115. aid: record.aid,
  116. type: 4,
  117. })
  118. }
  119. }}>
  120. {text}
  121. </div>
  122. );
  123. },
  124. },
  125. {
  126. title: "新增领取客户数",
  127. dataIndex: "receiveCount",
  128. key: "receiveCount",
  129. className: 'tableRowStyle',
  130. render: (text, record) => {
  131. return (
  132. <div
  133. className={record.aid ? 'receiveCount' : ''}
  134. onClick={(e)=>{
  135. if(record.aid){
  136. e.stopPropagation();
  137. this.setState({
  138. customerVisible: true,
  139. aid: record.aid,
  140. type: 2,
  141. })
  142. }
  143. }}>
  144. {text}
  145. </div>
  146. );
  147. },
  148. },
  149. ],
  150. contactsOption:null,
  151. loading: false,
  152. ispage: 1,
  153. aid:'',
  154. type:'',
  155. visible:false,
  156. };
  157. this.loadData = this.loadData.bind(this);
  158. this.reset = this.reset.bind(this);
  159. this.selectSuperId = this.selectSuperId.bind(this);
  160. }
  161. componentDidMount() {
  162. // this.loadData();
  163. this.selectSuperId();
  164. }
  165. loadData() {
  166. this.setState({
  167. loading: true,
  168. });
  169. let api = '/api/admin/customer/selectAllUser';
  170. let data = {};
  171. if(this.state.superId){
  172. data.depId = this.state.superId;
  173. }
  174. if(this.state.nameSearch){
  175. data.aName = this.state.nameSearch;
  176. }
  177. if(this.state.releaseDate[0]){
  178. data.startTime = this.state.releaseDate[0]
  179. }
  180. if(this.state.releaseDate[1]){
  181. data.endTime = this.state.releaseDate[1]
  182. }
  183. $.ajax({
  184. method: "get",
  185. dataType: "json",
  186. crossDomain: false,
  187. url: globalConfig.context + api,
  188. data: data,
  189. success: function (data) {
  190. let theArr = [];
  191. if (data.error.length !== 0) {
  192. if (data.error && data.error.length) {
  193. message.warning(data.error[0].message);
  194. }
  195. } else {
  196. data.data.children = data.data.list;
  197. data.data.children = data.data.children.concat(data.data.aList);
  198. theArr.push(data.data);
  199. theArr = this.handleTabsInfor(theArr);
  200. console.log(theArr,'表格数据')
  201. this.setState({
  202. ispage: data.data.pageNo,
  203. dataSource: theArr,
  204. });
  205. }
  206. }.bind(this),
  207. }).always(
  208. function () {
  209. this.setState({
  210. loading: false,
  211. });
  212. }.bind(this)
  213. );
  214. };
  215. //表格数据处理
  216. handleTabsInfor(infor){
  217. for(let i=0;i<infor.length;i++){
  218. if(!infor[i].key){
  219. infor[i].key = infor[i].id ? infor[i].id : (infor[i].aid ? infor[i].aid : i)
  220. }
  221. if(infor[i].children){
  222. for(let c=0;c<infor[i].children.length;c++){
  223. infor[i].children[c].key = infor[i].children[c].id;
  224. infor[i].children[c].children = infor[i].children[c].list;
  225. if(infor[i].children[c].aName){infor[i].children[c].name = infor[i].children[c].aName}
  226. if(infor[i].children[c].aList && Array.isArray(infor[i].children[c].aList) && infor[i].children[c].aList.length){
  227. if(infor[i].children[c].children && Array.isArray(infor[i].children[c].children)){
  228. for(let t of infor[i].children[c].aList){
  229. t.key = t.aid;
  230. t.name = t.aName;
  231. }
  232. infor[i].children[c].children = infor[i].children[c].children.concat(infor[i].children[c].aList);
  233. }
  234. }
  235. this.handleTabsInfor(infor[i].children);
  236. }
  237. }
  238. }
  239. return infor;
  240. }
  241. reset(){
  242. this.setState({
  243. superId:undefined,
  244. nameSearch: '',
  245. releaseDate: [],
  246. },()=>{
  247. this.loadData();
  248. });
  249. };
  250. //获取上级组织
  251. selectSuperId() {
  252. this.state.data = []
  253. $.ajax({
  254. method: "get",
  255. dataType: "json",
  256. crossDomain: false,
  257. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  258. data:{},
  259. success: function (data) {
  260. let theArr = [];
  261. let theId=[];//用于保存上级组织的ID和名称
  262. let thedata=data.data;
  263. if (!thedata) {
  264. if (data.error && data.error.length) {
  265. message.warning(data.error[0].message);
  266. };
  267. thedata = {};
  268. };
  269. for(var i=0;i<data.data.length;i++){
  270. let theData = data.data[i];
  271. theArr.push(
  272. <Select.Option value={theData.id} key={theData.id}>{theData.name}</Select.Option>
  273. );
  274. theId.push(
  275. [theData.id,theData.name]
  276. );
  277. };
  278. this.setState({
  279. SuperArr:thedata,
  280. contactsOption: theArr,
  281. theId: theId,
  282. orderStatusOptions:data.data,
  283. });
  284. }.bind(this),
  285. }).always(function () {
  286. this.setState({
  287. loading: false
  288. });
  289. }.bind(this));
  290. }
  291. render() {
  292. return(
  293. <div className="user-content">
  294. <div className="content-title">
  295. <span>部门统计</span>
  296. </div>
  297. <div className="user-search" style={{display:'flex',alignItems:'center'}}>
  298. <div>
  299. <Select
  300. placeholder="请选择部门"
  301. style={{ width:200,marginLeft:10}}
  302. value={this.state.superId}
  303. onChange={(e) => { this.setState({ superId: e }) }}
  304. notFoundContent="未获取到上级组织列表">
  305. {this.state.contactsOption}
  306. </Select>
  307. </div>
  308. <Input
  309. placeholder="客户名称"
  310. value={this.state.nameSearch}
  311. style={{ width: 150, marginRight: 10, marginLeft: 10 }}
  312. onChange={(e) => {
  313. this.setState({ nameSearch: e.target.value });
  314. }}
  315. />
  316. <div style={{
  317. marginTop: '10px',
  318. }}>
  319. <RangePicker
  320. value={[
  321. this.state.releaseDate[0]
  322. ? moment(this.state.releaseDate[0])
  323. : null,
  324. this.state.releaseDate[1]
  325. ? moment(this.state.releaseDate[1])
  326. : null,
  327. ]}
  328. onChange={(data, dataString) => {
  329. this.setState({ releaseDate: dataString });
  330. }}
  331. />
  332. </div>
  333. <Button
  334. type="primary"
  335. style={{ marginLeft: "10px", marginRight: 10 }}
  336. onClick={()=>{
  337. this.loadData();
  338. }}
  339. >
  340. 搜索
  341. </Button>
  342. <Button onClick={this.reset}>重置</Button>
  343. </div>
  344. <div className="patent-table">
  345. <Spin spinning={this.state.loading}>
  346. <Table
  347. columns={this.state.columns}
  348. dataSource={this.state.dataSource}
  349. pagination={false}
  350. />
  351. </Spin>
  352. </div>
  353. {this.state.customerVisible ? <CustomerDetails
  354. aid={this.state.aid}
  355. type={this.state.type}
  356. startTime={this.state.releaseDate[0]}
  357. endTime={this.state.releaseDate[1]}
  358. visible={this.state.customerVisible}
  359. onCancel={()=>{
  360. this.setState({
  361. customerVisible: false,
  362. aid: '',
  363. type: '',
  364. })
  365. }}
  366. /> : <div/>}
  367. </div>
  368. )
  369. }
  370. }
  371. export default DepartmentStatistics;