index.jsx 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. import React,{Component}from 'react';
  2. import {Button, Icon, Input, message, Table} from "antd";
  3. import SpinContainer from "../../../SpinContainer";
  4. import $ from "jquery/src/ajax";
  5. class User extends Component{
  6. constructor(props) {
  7. super(props);
  8. this.state={
  9. searchUserName: '',
  10. loading: false,
  11. columns:[
  12. {
  13. title: '序号',
  14. dataIndex: 'key',
  15. key: 'key'
  16. },
  17. {
  18. title: '用户ID',
  19. dataIndex: 'id',
  20. key: 'id'
  21. },
  22. {
  23. title: '用户呢称',
  24. dataIndex: 'nickname',
  25. key: 'nickname'
  26. },
  27. {
  28. title: '电话',
  29. dataIndex: 'phone',
  30. key: 'phone'
  31. },
  32. {
  33. title: '注册时间',
  34. dataIndex: 'createTimes',
  35. key: 'createTimes'
  36. },
  37. {
  38. title: '是否购买',
  39. dataIndex: 'buy',
  40. key: 'buy',
  41. render: (text, record) => {
  42. return text === 0 ? '无' : '是'
  43. }
  44. },
  45. ],
  46. dataSource:[],
  47. pagination: {
  48. defaultCurrent: 1,
  49. defaultPageSize: 10,
  50. showQuickJumper: true,
  51. pageSize: 10,
  52. onChange: function (page) {
  53. this.loadData(page);
  54. }.bind(this),
  55. showTotal: function (total) {
  56. return '共' + total + '条数据';
  57. }
  58. },
  59. }
  60. this.search = this.search.bind(this);
  61. this.reset = this.reset.bind(this);
  62. this.tableRowClick = this.tableRowClick.bind(this);
  63. this.loadData = this.loadData.bind(this);
  64. }
  65. search(){this.loadData();}
  66. reset(){
  67. this.setState({
  68. searchUserName: ''
  69. },()=>{
  70. this.loadData();
  71. })
  72. }
  73. tableRowClick(){
  74. }
  75. loadData(pageNo = 1) {
  76. this.setState({
  77. loading: true
  78. });
  79. $.ajax({
  80. method: "get",
  81. dataType: "json",
  82. crossDomain: false,
  83. url: globalConfig.context + "/api/admin/userList",
  84. data: {
  85. pageNo: pageNo || 1,
  86. pageSize: 10,
  87. userName: this.state.searchUserName || undefined,
  88. }
  89. }).done((data1) => {
  90. let theArr = [];
  91. if (data1.error.length !== 0) {
  92. message.warning(data1.error[0].message);
  93. } else {
  94. for (let i = 0; i < data1.data.list.length; i++) {
  95. data1.data.list[i].key = (data1.data.pageNo-1)*10+(i+1);
  96. }
  97. this.state.pagination.current = data1.data.pageNo;
  98. this.state.pagination.total = data1.data.totalCount;
  99. }
  100. this.setState({
  101. dataSource: data1.data.list,
  102. pagination: this.state.pagination,
  103. });
  104. }).always(function () {
  105. this.setState({
  106. loading: false
  107. });
  108. }.bind(this))
  109. }
  110. componentDidMount() {
  111. this.loadData();
  112. }
  113. render() {
  114. return (
  115. <div className="user-content" >
  116. <div className="content-title">
  117. <span>用户管理</span>
  118. </div>
  119. <div className="user-search">
  120. <Input placeholder="用户关键字" value={this.state.searchUserName}
  121. onChange={(e) => { this.setState({ searchUserName: e.target.value }); }} />
  122. <Button type="primary" onClick={this.search}>搜索</Button>
  123. <Button onClick={this.reset}>重置</Button>
  124. </div>
  125. <div className="patent-table">
  126. <SpinContainer spinning={this.state.loading}>
  127. <Table columns={this.state.columns}
  128. dataSource={this.state.dataSource}
  129. pagination={this.state.pagination}
  130. onRowClick={this.tableRowClick} />
  131. </SpinContainer>
  132. </div>
  133. </div >
  134. )
  135. }
  136. }
  137. export default User;