member.jsx 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  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.onlyProvince = thisdata.province;
  31. this.state.data.push({
  32. key: i,
  33. id: thisdata.id,
  34. mobile: thisdata.mobile,
  35. name: thisdata.name,
  36. position:thisdata.position,
  37. email: thisdata.email,
  38. createTime: thisdata.createTime,
  39. number: thisdata.number,
  40. province: thisdata.province,
  41. createTimeFormattedDate: thisdata.createTimeFormattedDate
  42. });
  43. };
  44. this.state.pagination.current = data.data.pageNo;
  45. this.state.pagination.total = data.data.totalCount;
  46. this.setState({
  47. data: this.state.data,
  48. pagination: this.state.pagination
  49. });
  50. }.bind(this),
  51. }).always(function () {
  52. this.setState({
  53. loading: false
  54. });
  55. }.bind(this));
  56. },
  57. getInitialState() {
  58. return {
  59. data: [],
  60. dataSource: [],
  61. selectedRowKeys: [],
  62. selectedRows: [],
  63. loading: false,
  64. modalData: {},
  65. modalShow: false,
  66. pagination: {
  67. defaultCurrent: 1,
  68. defaultPageSize: 10,
  69. showQuickJumper: true,
  70. pageSize: 10,
  71. onChange: function (page) {
  72. this.loadData(page);
  73. }.bind(this),
  74. showTotal: function (total) {
  75. return '共' + total + '条数据';
  76. }
  77. }
  78. }
  79. },
  80. componentDidMount() {
  81. this.loadData();
  82. },
  83. addNew() {
  84. let e = {}
  85. this.setState({
  86. modalData: e,
  87. modalShow: true
  88. })
  89. },
  90. edit(e) {
  91. this.setState({
  92. modalData: e,
  93. modalShow: true
  94. })
  95. },
  96. handleReturn(show, render) {
  97. this.state.modalShow = show;
  98. if (render) {
  99. this.loadData();
  100. }
  101. },
  102. render() {
  103. const columns = [{
  104. title: '编号',
  105. dataIndex: 'number',
  106. key: 'number'
  107. }, {
  108. title: '登录账号',
  109. dataIndex: 'mobile',
  110. key: 'mobile'
  111. }, {
  112. title: '名字',
  113. dataIndex: 'name',
  114. key: 'name'
  115. }, {
  116. title: '职位',
  117. dataIndex: 'position',
  118. key: 'position'
  119. }, {
  120. title: '省份',
  121. dataIndex: 'province',
  122. key: 'province'
  123. }, {
  124. title: '邮箱',
  125. dataIndex: 'email',
  126. key: 'email'
  127. }, {
  128. title: '创建时间',
  129. dataIndex: 'createTimeFormattedDate',
  130. key: 'createTimeFormattedDate'
  131. }];
  132. return (
  133. <Spin spinning={this.state.loading}>
  134. <div className="set-content">
  135. <div className="set-title">
  136. <span>管理员设置</span>
  137. <Button style={{ background: "#ea0862", border: "none", color: "#fff" }}
  138. onClick={this.addNew}>添加<Icon type="plus" /></Button>
  139. </div>
  140. <TheModal data={this.state.modalData} onlyProvince={this.state.onlyProvince} show={this.state.modalShow} handleReturn={this.handleReturn} />
  141. <Table className='member-table'
  142. columns={columns}
  143. onRowClick={this.edit}
  144. dataSource={this.state.data}
  145. pagination={this.state.pagination} />
  146. </div>
  147. </Spin>
  148. );
  149. }
  150. });
  151. export default Member;