member.jsx 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. import React from 'react';
  2. import { Table, Button, Spin, message, Icon } from 'antd';
  3. import ajax from 'jquery/src/ajax/xhr.js'
  4. import $ from 'jquery/src/ajax';
  5. import TheModal from './modal.jsx';
  6. const Member = React.createClass({
  7. loadData(pageNo) {
  8. this.state.data = [];
  9. this.setState({
  10. loading: true
  11. });
  12. return $.ajax({
  13. type: 'get',
  14. cache: false,
  15. url: globalConfig.context + "/api/admin/adminList",
  16. dataType: "json",
  17. data: {
  18. pageNo: pageNo || 1,
  19. pageSize: this.state.pagination.pageSize
  20. },
  21. success: function (data) {
  22. if (!data.data) {
  23. if (data.error && data.error.length) {
  24. message.warning(data.error[0].message);
  25. };
  26. return;
  27. };
  28. for (let i = 0; i < data.data.list.length; i++) {
  29. let thisdata = data.data.list[i];
  30. this.state.data.push({
  31. key: i,
  32. id: thisdata.id,
  33. mobile: thisdata.mobile,
  34. name: thisdata.name,
  35. email: thisdata.email,
  36. createTime: thisdata.createTime,
  37. number: thisdata.number,
  38. province: thisdata.province,
  39. createTimeFormattedDate: thisdata.createTimeFormattedDate
  40. });
  41. };
  42. this.state.pagination.current = data.data.pageNo;
  43. this.state.pagination.total = data.data.totalCount;
  44. this.setState({
  45. data: this.state.data,
  46. pagination: this.state.pagination
  47. });
  48. }.bind(this),
  49. }).always(function () {
  50. this.setState({
  51. loading: false
  52. });
  53. }.bind(this));
  54. },
  55. getInitialState() {
  56. return {
  57. data: [],
  58. dataSource: [],
  59. selectedRowKeys: [],
  60. selectedRows: [],
  61. loading: false,
  62. modalData: {},
  63. modalShow: false,
  64. pagination: {
  65. defaultCurrent: 1,
  66. defaultPageSize: 10,
  67. showQuickJumper: true,
  68. pageSize: 10,
  69. onChange: function (page) {
  70. this.loadData(page);
  71. }.bind(this),
  72. showTotal: function (total) {
  73. return '共' + total + '条数据';
  74. }
  75. }
  76. }
  77. },
  78. componentDidMount() {
  79. this.loadData();
  80. },
  81. addNew() {
  82. let e = {}
  83. this.setState({
  84. modalData: e,
  85. modalShow: true
  86. })
  87. },
  88. edit(e) {
  89. this.setState({
  90. modalData: e,
  91. modalShow: true
  92. })
  93. },
  94. handleReturn(show, render) {
  95. this.state.modalShow = show;
  96. if (render) {
  97. this.loadData();
  98. }
  99. },
  100. render() {
  101. const columns = [{
  102. title: '编号',
  103. dataIndex: 'number',
  104. key: 'number'
  105. }, {
  106. title: '登录账号',
  107. dataIndex: 'mobile',
  108. key: 'mobile'
  109. }, {
  110. title: '名字',
  111. dataIndex: 'name',
  112. key: 'name'
  113. }, {
  114. title: '省份',
  115. dataIndex: 'province',
  116. key: 'province'
  117. }, {
  118. title: '邮箱',
  119. dataIndex: 'email',
  120. key: 'email'
  121. }, {
  122. title: '创建时间',
  123. dataIndex: 'createTimeFormattedDate',
  124. key: 'createTimeFormattedDate'
  125. }];
  126. return (
  127. <Spin spinning={this.state.loading}>
  128. <div className="set-content">
  129. <div className="set-title">
  130. <span>管理员设置</span>
  131. <Button style={{ background: "#ea0862", border: "none", color: "#fff" }}
  132. onClick={this.addNew}>添加<Icon type="plus" /></Button>
  133. </div>
  134. <TheModal data={this.state.modalData} show={this.state.modalShow} handleReturn={this.handleReturn} />
  135. <Table className='member-table'
  136. columns={columns}
  137. onRowClick={this.edit}
  138. dataSource={this.state.data}
  139. pagination={this.state.pagination} />
  140. </div>
  141. </Spin>
  142. );
  143. }
  144. });
  145. export default Member;