userList.jsx 7.4 KB

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