userList.jsx 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
  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. });
  48. };
  49. this.state.pagination.current = data.data.pageNo;
  50. this.state.pagination.total = data.data.totalCount;
  51. this.setState({
  52. dataSource: this.state.data,
  53. pagination: this.state.pagination
  54. });
  55. }.bind(this),
  56. }).always(function () {
  57. this.setState({
  58. loading: false
  59. });
  60. }.bind(this));
  61. },
  62. getInitialState() {
  63. return {
  64. searchMore: true,
  65. data: [],
  66. loading: false,
  67. pagination: {
  68. defaultCurrent: 1,
  69. defaultPageSize: 10,
  70. showQuickJumper: true,
  71. pageSize: 10,
  72. onChange: function (page) {
  73. this.loadData(page);
  74. }.bind(this),
  75. showTotal: function (total) {
  76. return '共' + total + '条数据';
  77. }
  78. },
  79. columns: [
  80. {
  81. title: '阿凡提号',
  82. dataIndex: 'number',
  83. key: 'number',
  84. }, {
  85. title: '登录名',
  86. dataIndex: 'mobile',
  87. key: 'mobile',
  88. }, {
  89. title: '认证状态',
  90. dataIndex: 'auditStatus',
  91. key: 'auditStatus',
  92. render: text => {
  93. switch (String(text)) {
  94. case "0":
  95. return "未提交审核";
  96. case "1":
  97. return "提交审核";
  98. case "2":
  99. return "审核未打款";
  100. case "3":
  101. return "审核已打款";
  102. case "4":
  103. return "认证未通过";
  104. case "5":
  105. return "已认证";
  106. }
  107. },
  108. }, {
  109. title: '注册时间',
  110. dataIndex: 'createTimeFormattedDate',
  111. key: 'createTimeFormattedDate',
  112. }, {
  113. title: '认证名称',
  114. dataIndex: 'aftUsername',
  115. key: 'aftUsername',
  116. }, {
  117. title: '联系方式',
  118. dataIndex: 'email',
  119. key: 'email',
  120. }, {
  121. title: '业务员',
  122. dataIndex: 'author',
  123. key: 'author',
  124. }
  125. ],
  126. dataSource: [],
  127. searchTime: [,]
  128. };
  129. },
  130. componentWillMount() {
  131. this.loadData();
  132. },
  133. tableRowClick(record, index) {
  134. this.state.RowData = record;
  135. this.setState({
  136. showDesc: true
  137. });
  138. },
  139. closeDesc(e) {
  140. this.state.showDesc = e;
  141. this.loadData();
  142. },
  143. search() {
  144. this.loadData();
  145. },
  146. reset() {
  147. this.state.searchAftId = "";
  148. this.state.searchLoginId = "";
  149. this.state.searchAuditStatus = "";
  150. this.state.searchAftUsername = "";
  151. this.state.searchEmail = "";
  152. this.state.searchTime = [,];
  153. this.loadData();
  154. },
  155. searchSwitch() {
  156. this.setState({
  157. searchMore: !this.state.searchMore
  158. });
  159. },
  160. searchcreateTime(date, dateString) {
  161. this.state.createTime = dateString;
  162. },
  163. render() {
  164. const { RangePicker } = DatePicker;
  165. return (
  166. <div className="user-content" >
  167. <div className="content-title">
  168. <span>个人用户管理</span>
  169. </div>
  170. <div className="user-search">
  171. <Input placeholder="阿凡提号" value={this.state.searchAftId}
  172. onChange={(e) => { this.setState({ searchAftId: e.target.value }); }} />
  173. <Input placeholder="登录号" value={this.state.searchLoginId}
  174. onChange={(e) => { this.setState({ searchLoginId: e.target.value }); }} />
  175. <Select placeholder="选择认证状态" style={{ width: 140 }}
  176. value={this.state.searchAuditStatus}
  177. onChange={(e) => { this.setState({ searchAuditStatus: e }) }}>
  178. {
  179. auditStatusList.map(function (item, i) {
  180. return <Select.Option key={i} value={item.value} >{item.key}</Select.Option>
  181. })
  182. }
  183. </Select>
  184. <Input placeholder="认证名称" value={this.state.searchAftUsername}
  185. onChange={(e) => { this.setState({ searchAftUsername: e.target.value }); }} />
  186. <Input placeholder="联系方式" value={this.state.searchEmail}
  187. onChange={(e) => { this.setState({ searchEmail: e.target.value }); }} />
  188. <Button type="primary" onClick={this.search}>搜索</Button>
  189. <Button onClick={this.reset}>重置</Button>
  190. <span>更多搜索<Switch defaultChecked={false} onChange={this.searchSwitch} /></span>
  191. <div className="search-more" style={this.state.searchMore ? { display: 'none' } : {}}>
  192. <p>
  193. <span>注册时间:</span>
  194. <RangePicker value={[moment(this.state.searchTime[0]), moment(this.state.searchTime[1])]}
  195. onChange={(data, dataString) => { this.setState({ searchTime: dataString }); }} />
  196. </p>
  197. </div>
  198. </div>
  199. <div className="patent-table">
  200. <Spin spinning={this.state.loading}>
  201. <Table columns={this.state.columns}
  202. dataSource={this.state.dataSource}
  203. pagination={this.state.pagination}
  204. onRowClick={this.tableRowClick} />
  205. </Spin>
  206. </div>
  207. <UserDesc data={this.state.RowData} showDesc={this.state.showDesc} closeDesc={this.closeDesc} />
  208. </div >
  209. );
  210. }
  211. });
  212. export default UserList;