member.jsx 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. import React from 'react';
  2. import { Table, Button, Spin, message, Icon, Select, Input } from 'antd';
  3. import { provinceSelect, provinceList, getProvince } from '../../NewDicProvinceList.js';
  4. import { companySearch } from '../../tools';
  5. import ajax from 'jquery/src/ajax/xhr.js';
  6. import $ from 'jquery/src/ajax';
  7. import TheModal from './modal.jsx';
  8. const Member = React.createClass({
  9. loadData(pageNo) {
  10. this.setState({
  11. loading: true
  12. });
  13. $.ajax({
  14. type: 'get',
  15. cache: false,
  16. url: globalConfig.context + "/api/admin/supervise/adminList",
  17. dataType: "json",
  18. data: {
  19. pageNo: pageNo || 1,
  20. pageSize: this.state.pagination.pageSize,
  21. province: this.state.searchProvince,
  22. mobile: this.state.searchMobile,
  23. name: this.state.searchName
  24. },
  25. success: function (data) {
  26. let theArr = [];
  27. if (!data.data) {
  28. if (data.error && data.error.length) {
  29. message.warning(data.error[0].message);
  30. };
  31. } else {
  32. for (let i = 0; i < data.data.list.length; i++) {
  33. let thisdata = data.data.list[i];
  34. this.state.onlyProvince = thisdata.province;
  35. theArr.push({
  36. key: i,
  37. id: thisdata.id,
  38. mobile: thisdata.mobile,
  39. name: thisdata.name,
  40. email: thisdata.email,
  41. createTime: thisdata.createTime,
  42. number: thisdata.number,
  43. province: thisdata.province,
  44. position: thisdata.position,
  45. superior: thisdata.superior,
  46. superiorId: thisdata.superiorId,
  47. createTimeFormattedDate: thisdata.createTimeFormattedDate
  48. });
  49. };
  50. this.state.pagination.current = data.data.pageNo;
  51. this.state.pagination.total = data.data.totalCount;
  52. };
  53. this.setState({
  54. data: theArr,
  55. pagination: this.state.pagination
  56. });
  57. }.bind(this),
  58. }).always(function () {
  59. this.setState({
  60. loading: false
  61. });
  62. }.bind(this));
  63. },
  64. getInitialState() {
  65. return {
  66. data: [],
  67. provinceList:[],
  68. dataSource: [],
  69. selectedRowKeys: [],
  70. selectedRows: [],
  71. loading: false,
  72. modalData: {},
  73. modalShow: false,
  74. pagination: {
  75. defaultCurrent: 1,
  76. defaultPageSize: 10,
  77. showQuickJumper: true,
  78. pageSize: 10,
  79. onChange: function (page) {
  80. this.loadData(page);
  81. }.bind(this),
  82. showTotal: function (total) {
  83. return '共' + total + '条数据';
  84. }
  85. },
  86. columns: [
  87. {
  88. title: '编号',
  89. dataIndex: 'number',
  90. key: 'number'
  91. }, {
  92. title: '登录账号',
  93. dataIndex: 'mobile',
  94. key: 'mobile'
  95. }, {
  96. title: '名字',
  97. dataIndex: 'name',
  98. key: 'name'
  99. }, {
  100. title: '职位',
  101. dataIndex: 'position',
  102. key: 'position'
  103. }, {
  104. title: '上级管理员',
  105. dataIndex: 'superior',
  106. key: 'superior'
  107. }, {
  108. title: '省份',
  109. dataIndex: 'province',
  110. key: 'province',
  111. render: text => {
  112. return text ? text.split(',').map((item) => {
  113. return getProvince(item) + ' '
  114. }) : []
  115. }
  116. }, {
  117. title: '邮箱',
  118. dataIndex: 'email',
  119. key: 'email'
  120. }, {
  121. title: '创建时间',
  122. dataIndex: 'createTimeFormattedDate',
  123. key: 'createTimeFormattedDate'
  124. }
  125. ]
  126. }
  127. },
  128. componentWillMount() {
  129. this.state.provinceList = provinceSelect();
  130. this.loadData();
  131. },
  132. addNew() {
  133. let e = {}
  134. this.setState({
  135. modalData: e,
  136. modalShow: true
  137. })
  138. },
  139. edit(e) {
  140. this.setState({
  141. modalData: e,
  142. modalShow: true
  143. })
  144. },
  145. reset() {
  146. this.state.searchMobile = undefined;
  147. this.state.searchName = undefined;
  148. this.state.searchProvince = undefined;
  149. this.loadData();
  150. },
  151. handleReturn(show, render) {
  152. this.state.modalShow = show;
  153. if (render) {
  154. this.loadData();
  155. }
  156. },
  157. render() {
  158. return (
  159. <Spin spinning={this.state.loading}>
  160. <div className="set-content">
  161. <div className="set-title">
  162. <span>管理员设置</span>
  163. <Button style={{ background: "#ea0862", border: "none", color: "#fff" }}
  164. onClick={this.addNew}>添加<Icon type="plus" /></Button>
  165. </div>
  166. <div className="set-search">
  167. <Input placeholder="登录号"
  168. value={this.state.searchMobile}
  169. onChange={(e) => { this.setState({ searchMobile: e.target.value }); }} />
  170. <Input placeholder="管理员名字"
  171. value={this.state.searchName}
  172. onChange={(e) => { this.setState({ searchName: e.target.value }); }} />
  173. <Select style={{ width: 120 }}
  174. placeholder="选择一个省份"
  175. showSearch
  176. filterOption={companySearch}
  177. value={this.state.searchProvince}
  178. onChange={(e) => { this.setState({ searchProvince: e }) }} >
  179. {this.state.provinceList.map((item) => {
  180. return <Select.Option key={String(item.value)}>{item.label}</Select.Option>
  181. })}
  182. </Select>
  183. <Button type="primary" onClick={() => { this.loadData() }}>搜索</Button>
  184. <Button onClick={this.reset}>重置</Button>
  185. </div>
  186. <TheModal data={this.state.modalData} onlyProvince={this.state.onlyProvince} show={this.state.modalShow} handleReturn={this.handleReturn} />
  187. <Table className='member-table'
  188. columns={this.state.columns}
  189. onRowClick={this.edit}
  190. dataSource={this.state.data}
  191. pagination={this.state.pagination} />
  192. </div>
  193. </Spin>
  194. );
  195. }
  196. });
  197. export default Member;