member.jsx 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314
  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. department:this.state.departmentt
  25. },
  26. success: function (data) {
  27. let theArr = [];
  28. if (!data.data) {
  29. if (data.error && data.error.length) {
  30. message.warning(data.error[0].message);
  31. };
  32. } else {
  33. for (let i = 0; i < data.data.list.length; i++) {
  34. let thisdata = data.data.list[i];
  35. this.state.onlyProvince = thisdata.province;
  36. theArr.push({
  37. key: i,
  38. id: thisdata.id,
  39. mobile: thisdata.mobile,
  40. name: thisdata.name,
  41. email: thisdata.email,
  42. createTime: thisdata.createTime,
  43. number: thisdata.number,
  44. province: thisdata.province,
  45. position: thisdata.position,
  46. departmentName:thisdata.departmentName,
  47. departmentId:thisdata.departmentId,
  48. superior: thisdata.superior,
  49. superiorId: thisdata.superiorId,
  50. createTimeFormattedDate: thisdata.createTimeFormattedDate
  51. });
  52. };
  53. this.state.pagination.current = data.data.pageNo;
  54. this.state.pagination.total = data.data.totalCount;
  55. };
  56. this.setState({
  57. data: theArr,
  58. pagination: this.state.pagination
  59. });
  60. }.bind(this),
  61. }).always(function () {
  62. this.setState({
  63. loading: false
  64. });
  65. }.bind(this));
  66. },
  67. loadInitialData() {
  68. this.setState({
  69. loading: true
  70. });
  71. $.ajax({
  72. url: globalConfig.context + '/api/roles',
  73. cache: false
  74. }).done((rolesres) => {
  75. let theAdminRole = [], rolesObj = {};
  76. if (rolesres.data && window.adminData) {
  77. rolesres.data.map((item) => {
  78. theAdminRole.push(item.id);
  79. rolesObj[item.id] = item.roleName;
  80. })
  81. }
  82. this.setState({
  83. roles: rolesres.data,
  84. theAdminRole: theAdminRole,
  85. rolesObj:rolesObj,
  86. loading: false
  87. });
  88. })
  89. },
  90. loadBindRoles(uid) {
  91. this.setState({
  92. loading: true
  93. });
  94. $.ajax({
  95. url: globalConfig.context + '/api/admin/role',
  96. cache: false,
  97. data: {
  98. "uid": window.adminData.uid
  99. }
  100. }).done((data) => {
  101. this.setState({
  102. currentRoles: data.data || [],
  103. loading: false
  104. });
  105. })
  106. },
  107. getInitialState() {
  108. return {
  109. data: [],
  110. roles: [],
  111. currentRoles:[],
  112. rolesObj: {},
  113. theAdminRole: [],
  114. provinceList: [],
  115. dataSource: [],
  116. selectedRowKeys: [],
  117. selectedRows: [],
  118. departmentArr:[],
  119. loading: false,
  120. modalData: {},
  121. modalShow: false,
  122. pagination: {
  123. defaultCurrent: 1,
  124. defaultPageSize: 10,
  125. showQuickJumper: true,
  126. pageSize: 10,
  127. onChange: function (page) {
  128. this.loadData(page);
  129. }.bind(this),
  130. showTotal: function (total) {
  131. return '共' + total + '条数据';
  132. }
  133. },
  134. columns: [
  135. {
  136. title: '编号',
  137. dataIndex: 'number',
  138. key: 'number'
  139. }, {
  140. title: '登录账号',
  141. dataIndex: 'mobile',
  142. key: 'mobile'
  143. }, {
  144. title: '名字',
  145. dataIndex: 'name',
  146. key: 'name'
  147. }, {
  148. title: '职位',
  149. dataIndex: 'position',
  150. key: 'position'
  151. },{
  152. title: '部门',
  153. dataIndex: 'departmentName',
  154. key: 'departmentName'
  155. }, {
  156. title: '上级管理员',
  157. dataIndex: 'superior',
  158. key: 'superior'
  159. }, {
  160. title: '省份',
  161. dataIndex: 'province',
  162. key: 'province',
  163. render: text => {
  164. return text ? text.split(',').map((item) => {
  165. return getProvince(item) + ' '
  166. }) : []
  167. }
  168. }, {
  169. title: '邮箱',
  170. dataIndex: 'email',
  171. key: 'email'
  172. }, {
  173. title: '创建时间',
  174. dataIndex: 'createTimeFormattedDate',
  175. key: 'createTimeFormattedDate'
  176. }
  177. ]
  178. }
  179. },
  180. //部门
  181. departmentList() {
  182. this.setState({
  183. loading: true
  184. });
  185. $.ajax({
  186. method: "post",
  187. dataType: "json",
  188. crossDomain: false,
  189. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  190. data: {
  191. },
  192. success: function(data) {
  193. let thedata = data.data;
  194. let theArr=[];
  195. if(!thedata) {
  196. if(data.error && data.error.length) {
  197. message.warning(data.error[0].message);
  198. };
  199. thedata = {};
  200. }else{
  201. thedata.map(function(item,index){
  202. theArr.push({
  203. key:index,
  204. name:item.name,
  205. id:item.id,
  206. depNo:item.depNo
  207. })
  208. })
  209. }
  210. this.setState({
  211. departmentArr:theArr,
  212. })
  213. }.bind(this),
  214. }).always(function() {
  215. this.setState({
  216. loading: false
  217. });
  218. }.bind(this));
  219. },
  220. componentWillMount() {
  221. this.state.provinceList = provinceSelect();
  222. this.loadData();
  223. this.departmentList()
  224. this.loadInitialData();
  225. this.loadBindRoles();
  226. },
  227. addNew() {
  228. let e = {}
  229. this.setState({
  230. modalData: e,
  231. modalShow: true
  232. })
  233. },
  234. edit(e) {
  235. this.setState({
  236. modalData: e,
  237. modalShow: true
  238. })
  239. },
  240. reset() {
  241. this.state.departmentt=undefined;
  242. this.state.searchMobile = undefined;
  243. this.state.searchName = undefined;
  244. this.state.searchProvince = undefined;
  245. this.loadData();
  246. },
  247. handleReturn(show, render) {
  248. this.state.modalShow = show;
  249. if (render) {
  250. this.loadData();
  251. }
  252. },
  253. render() {
  254. let departmentArr = this.state.departmentArr || [];
  255. return (
  256. <Spin spinning={this.state.loading}>
  257. <div className="set-content">
  258. <div className="set-title">
  259. <span>管理员设置</span>
  260. <Button style={{ background: "#ea0862", border: "none", color: "#fff" }}
  261. onClick={this.addNew}>添加<Icon type="plus" /></Button>
  262. </div>
  263. <div className="set-search">
  264. <Input placeholder="登录号"
  265. value={this.state.searchMobile}
  266. onChange={(e) => { this.setState({ searchMobile: e.target.value }); }} />
  267. <Input placeholder="管理员名字"
  268. value={this.state.searchName}
  269. onChange={(e) => { this.setState({ searchName: e.target.value }); }} />
  270. <Select placeholder="选择部门" style={{width:'120px'}}
  271. value={this.state.departmentt}
  272. onChange={(e) => { this.setState({ departmentt: e }) }}>
  273. {
  274. departmentArr.map(function (item) {
  275. return <Select.Option key={item.id} >{item.name}</Select.Option>
  276. })
  277. }
  278. </Select>
  279. <Select style={{ width: 120 }}
  280. placeholder="选择一个省份"
  281. showSearch
  282. filterOption={companySearch}
  283. value={this.state.searchProvince}
  284. onChange={(e) => { this.setState({ searchProvince: e }) }} >
  285. {this.state.provinceList.map((item) => {
  286. return <Select.Option key={String(item.value)}>{item.label}</Select.Option>
  287. })}
  288. </Select>
  289. <Button type="primary" onClick={() => { this.loadData() }}>搜索</Button>
  290. <Button onClick={this.reset}>重置</Button>
  291. </div>
  292. <TheModal
  293. theAdminRole={this.state.theAdminRole}
  294. currentRoles={this.state.currentRoles}
  295. roles={this.state.roles}
  296. rolesObj={this.state.rolesObj}
  297. data={this.state.modalData}
  298. onlyProvince={this.state.onlyProvince}
  299. show={this.state.modalShow}
  300. departmentArr={this.state.departmentArr}
  301. handleReturn={this.handleReturn} />
  302. <Table className='member-table'
  303. columns={this.state.columns}
  304. onRowClick={this.edit}
  305. dataSource={this.state.data}
  306. pagination={this.state.pagination} />
  307. </div>
  308. </Spin>
  309. );
  310. }
  311. });
  312. export default Member;