member.jsx 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252
  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. loadInitialData() {
  65. this.setState({
  66. loading: true
  67. });
  68. $.ajax({
  69. url: globalConfig.context + '/api/roles',
  70. cache: false
  71. }).done((rolesres) => {
  72. let theAdminRole = [], rolesObj = {};
  73. if (rolesres.data && window.adminData) {
  74. rolesres.data.map((item) => {
  75. theAdminRole.push(item.id);
  76. rolesObj[item.id] = item.roleName;
  77. })
  78. }
  79. this.setState({
  80. roles: rolesres.data,
  81. theAdminRole: theAdminRole,
  82. rolesObj:rolesObj,
  83. loading: false
  84. });
  85. })
  86. },
  87. loadBindRoles(uid) {
  88. this.setState({
  89. loading: true
  90. });
  91. $.ajax({
  92. url: globalConfig.context + '/api/admin/role',
  93. cache: false,
  94. data: {
  95. "uid": window.adminData.uid
  96. }
  97. }).done((data) => {
  98. this.setState({
  99. currentRoles: data.data || [],
  100. loading: false
  101. });
  102. })
  103. },
  104. getInitialState() {
  105. return {
  106. data: [],
  107. roles: [],
  108. currentRoles:[],
  109. rolesObj: {},
  110. theAdminRole: [],
  111. provinceList: [],
  112. dataSource: [],
  113. selectedRowKeys: [],
  114. selectedRows: [],
  115. loading: false,
  116. modalData: {},
  117. modalShow: false,
  118. pagination: {
  119. defaultCurrent: 1,
  120. defaultPageSize: 10,
  121. showQuickJumper: true,
  122. pageSize: 10,
  123. onChange: function (page) {
  124. this.loadData(page);
  125. }.bind(this),
  126. showTotal: function (total) {
  127. return '共' + total + '条数据';
  128. }
  129. },
  130. columns: [
  131. {
  132. title: '编号',
  133. dataIndex: 'number',
  134. key: 'number'
  135. }, {
  136. title: '登录账号',
  137. dataIndex: 'mobile',
  138. key: 'mobile'
  139. }, {
  140. title: '名字',
  141. dataIndex: 'name',
  142. key: 'name'
  143. }, {
  144. title: '职位',
  145. dataIndex: 'position',
  146. key: 'position'
  147. }, {
  148. title: '上级管理员',
  149. dataIndex: 'superior',
  150. key: 'superior'
  151. }, {
  152. title: '省份',
  153. dataIndex: 'province',
  154. key: 'province',
  155. render: text => {
  156. return text ? text.split(',').map((item) => {
  157. return getProvince(item) + ' '
  158. }) : []
  159. }
  160. }, {
  161. title: '邮箱',
  162. dataIndex: 'email',
  163. key: 'email'
  164. }, {
  165. title: '创建时间',
  166. dataIndex: 'createTimeFormattedDate',
  167. key: 'createTimeFormattedDate'
  168. }
  169. ]
  170. }
  171. },
  172. componentWillMount() {
  173. this.state.provinceList = provinceSelect();
  174. this.loadData();
  175. this.loadInitialData();
  176. this.loadBindRoles();
  177. },
  178. addNew() {
  179. let e = {}
  180. this.setState({
  181. modalData: e,
  182. modalShow: true
  183. })
  184. },
  185. edit(e) {
  186. this.setState({
  187. modalData: e,
  188. modalShow: true
  189. })
  190. },
  191. reset() {
  192. this.state.searchMobile = undefined;
  193. this.state.searchName = undefined;
  194. this.state.searchProvince = undefined;
  195. this.loadData();
  196. },
  197. handleReturn(show, render) {
  198. this.state.modalShow = show;
  199. if (render) {
  200. this.loadData();
  201. }
  202. },
  203. render() {
  204. return (
  205. <Spin spinning={this.state.loading}>
  206. <div className="set-content">
  207. <div className="set-title">
  208. <span>管理员设置</span>
  209. <Button style={{ background: "#ea0862", border: "none", color: "#fff" }}
  210. onClick={this.addNew}>添加<Icon type="plus" /></Button>
  211. </div>
  212. <div className="set-search">
  213. <Input placeholder="登录号"
  214. value={this.state.searchMobile}
  215. onChange={(e) => { this.setState({ searchMobile: e.target.value }); }} />
  216. <Input placeholder="管理员名字"
  217. value={this.state.searchName}
  218. onChange={(e) => { this.setState({ searchName: e.target.value }); }} />
  219. <Select style={{ width: 120 }}
  220. placeholder="选择一个省份"
  221. showSearch
  222. filterOption={companySearch}
  223. value={this.state.searchProvince}
  224. onChange={(e) => { this.setState({ searchProvince: e }) }} >
  225. {this.state.provinceList.map((item) => {
  226. return <Select.Option key={String(item.value)}>{item.label}</Select.Option>
  227. })}
  228. </Select>
  229. <Button type="primary" onClick={() => { this.loadData() }}>搜索</Button>
  230. <Button onClick={this.reset}>重置</Button>
  231. </div>
  232. <TheModal
  233. theAdminRole={this.state.theAdminRole}
  234. currentRoles={this.state.currentRoles}
  235. roles={this.state.roles}
  236. rolesObj={this.state.rolesObj}
  237. data={this.state.modalData}
  238. onlyProvince={this.state.onlyProvince}
  239. show={this.state.modalShow}
  240. handleReturn={this.handleReturn} />
  241. <Table className='member-table'
  242. columns={this.state.columns}
  243. onRowClick={this.edit}
  244. dataSource={this.state.data}
  245. pagination={this.state.pagination} />
  246. </div>
  247. </Spin>
  248. );
  249. }
  250. });
  251. export default Member;