userList.jsx 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
  1. import React from 'react';
  2. import { Icon, Button, Input, Select, Spin, Table, Switch, message, DatePicker } from 'antd';
  3. import ajax from 'jquery/src/ajax/xhr.js';
  4. import $ from 'jquery/src/ajax';
  5. import moment from 'moment';
  6. import './userList.less';
  7. import UserDesc from './userDesc.jsx';
  8. import { auditStatusList } from '../../dataDic.js';
  9. const UserList = React.createClass({
  10. loadData(pageNo) {
  11. this.state.data = [];
  12. this.setState({
  13. loading: true
  14. });
  15. $.ajax({
  16. method: "post",
  17. dataType: "json",
  18. crossDomain: false,
  19. url: globalConfig.context + "/api/admin/userList",
  20. data: {
  21. pageNo: pageNo || 1,
  22. pageSize: this.state.pagination.pageSize,
  23. mobile: this.state.searchLoginId, //登录名
  24. email: this.state.searchEmail,
  25. createTime: this.state.searchTime,
  26. number: this.state.searchAftId, //阿凡提号
  27. aftUsername: this.state.searchAftUsername,
  28. auditStatus: this.state.searchAuditStatus
  29. },
  30. success: function (data) {
  31. if (data.error.length || !data.data || !data.data.list) {
  32. message.warning(data.error[0].message);
  33. return;
  34. }
  35. for (let i = 0; i < data.data.list.length; i++) {
  36. let thisdata = data.data.list[i];
  37. this.state.data.push({
  38. key: i,
  39. id: thisdata.id,
  40. mobile: thisdata.mobile,
  41. email: thisdata.email,
  42. createTime: thisdata.createTime,
  43. aftUsername: thisdata.aftUsername,
  44. number: thisdata.number,
  45. auditStatus:thisdata.auditStatus,
  46. createTimeFormattedDate: thisdata.createTimeFormattedDate,
  47. adminName:thisdata.adminName
  48. });
  49. };
  50. this.state.pagination.current = data.data.pageNo;
  51. this.state.pagination.total = data.data.totalCount;
  52. this.setState({
  53. dataSource: this.state.data,
  54. pagination: this.state.pagination
  55. });
  56. }.bind(this),
  57. }).always(function () {
  58. this.setState({
  59. loading: false
  60. });
  61. }.bind(this));
  62. },
  63. getInitialState() {
  64. return {
  65. searchMore: true,
  66. data: [],
  67. loading: false,
  68. pagination: {
  69. defaultCurrent: 1,
  70. defaultPageSize: 10,
  71. showQuickJumper: true,
  72. pageSize: 10,
  73. onChange: function (page) {
  74. this.loadData(page);
  75. }.bind(this),
  76. showTotal: function (total) {
  77. return '共' + total + '条数据';
  78. }
  79. },
  80. columns: [
  81. {
  82. title: '阿凡提号',
  83. dataIndex: 'number',
  84. key: 'number',
  85. }, {
  86. title: '登录名',
  87. dataIndex: 'mobile',
  88. key: 'mobile',
  89. }, {
  90. title: '认证状态',
  91. dataIndex: 'auditStatus',
  92. key: 'auditStatus',
  93. render: text => {
  94. switch (String(text)) {
  95. case "0":
  96. return "未提交审核";
  97. case "1":
  98. return "提交审核";
  99. case "2":
  100. return "审核未打款";
  101. case "3":
  102. return "审核已打款";
  103. case "4":
  104. return "认证未通过";
  105. case "5":
  106. return "已认证";
  107. }
  108. },
  109. }, {
  110. title: '注册时间',
  111. dataIndex: 'createTimeFormattedDate',
  112. key: 'createTimeFormattedDate',
  113. }, {
  114. title: '认证名称',
  115. dataIndex: 'aftUsername',
  116. key: 'aftUsername',
  117. }, {
  118. title: '联系方式',
  119. dataIndex: 'email',
  120. key: 'email',
  121. }, {
  122. title: '业务员',
  123. dataIndex: 'adminName',
  124. key: 'adminName',
  125. }
  126. ],
  127. dataSource: [],
  128. searchTime: [,]
  129. };
  130. },
  131. componentWillMount() {
  132. this.loadData();
  133. },
  134. tableRowClick(record, index) {
  135. this.state.RowData = record;
  136. this.setState({
  137. showDesc: true
  138. });
  139. },
  140. closeDesc(e) {
  141. this.state.showDesc = e;
  142. this.loadData();
  143. },
  144. search() {
  145. this.loadData();
  146. },
  147. reset() {
  148. this.state.searchAftId = "";
  149. this.state.searchLoginId = "";
  150. this.state.searchAuditStatus = "";
  151. this.state.searchAftUsername = "";
  152. this.state.searchEmail = "";
  153. this.state.searchTime = [,];
  154. this.loadData();
  155. },
  156. searchSwitch() {
  157. this.setState({
  158. searchMore: !this.state.searchMore
  159. });
  160. },
  161. searchcreateTime(date, dateString) {
  162. this.state.createTime = dateString;
  163. },
  164. render() {
  165. const { RangePicker } = DatePicker;
  166. return (
  167. <div className="user-content" >
  168. <div className="content-title">
  169. <span>个人用户管理</span>
  170. </div>
  171. <div className="user-search">
  172. <Input placeholder="阿凡提号" value={this.state.searchAftId}
  173. onChange={(e) => { this.setState({ searchAftId: e.target.value }); }} />
  174. <Input placeholder="登录号" value={this.state.searchLoginId}
  175. onChange={(e) => { this.setState({ searchLoginId: e.target.value }); }} />
  176. <Select placeholder="选择认证状态" style={{ width: 140 }}
  177. value={this.state.searchAuditStatus}
  178. onChange={(e) => { this.setState({ searchAuditStatus: e }) }}>
  179. {
  180. auditStatusList.map(function (item, i) {
  181. return <Select.Option key={i} value={item.value} >{item.key}</Select.Option>
  182. })
  183. }
  184. </Select>
  185. <Input placeholder="认证名称" value={this.state.searchAftUsername}
  186. onChange={(e) => { this.setState({ searchAftUsername: e.target.value }); }} />
  187. <Input placeholder="联系方式" value={this.state.searchEmail}
  188. onChange={(e) => { this.setState({ searchEmail: e.target.value }); }} />
  189. <Button type="primary" onClick={this.search}>搜索</Button>
  190. <Button onClick={this.reset}>重置</Button>
  191. <span>更多搜索<Switch defaultChecked={false} onChange={this.searchSwitch} /></span>
  192. <div className="search-more" style={this.state.searchMore ? { display: 'none' } : {}}>
  193. <p>
  194. <span>注册时间:</span>
  195. <RangePicker value={[moment(this.state.searchTime[0]), moment(this.state.searchTime[1])]}
  196. onChange={(data, dataString) => { this.setState({ searchTime: dataString }); }} />
  197. </p>
  198. </div>
  199. </div>
  200. <div className="patent-table">
  201. <Spin spinning={this.state.loading}>
  202. <Table columns={this.state.columns}
  203. dataSource={this.state.dataSource}
  204. pagination={this.state.pagination}
  205. onRowClick={this.tableRowClick} />
  206. </Spin>
  207. </div>
  208. <UserDesc data={this.state.RowData} showDesc={this.state.showDesc} closeDesc={this.closeDesc} />
  209. </div >
  210. );
  211. }
  212. });
  213. export default UserList;