member.jsx 5.0 KB

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