modal.jsx 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230
  1. import React from 'react';
  2. import { Modal, Input, Spin, Switch, Select, message, Popconfirm, Button } from 'antd';
  3. import { provinceArr } from '../../dataDic.js';
  4. import { companySearch } from '../../tools.js';
  5. import ajax from 'jquery/src/ajax/xhr.js';
  6. import $ from 'jquery/src/ajax';
  7. export default class TheModal extends React.Component {
  8. postData() {
  9. this.setState({
  10. loading: true
  11. });
  12. $.ajax({
  13. type: "POST",
  14. url: this.state.id ? globalConfig.context + "/api/admin/updateAdmin" : globalConfig.context + "/api/admin/insertAdmin",
  15. data: {
  16. 'id': this.state.id,
  17. 'name': this.state.name,
  18. 'email': this.state.email,
  19. 'mobile': this.state.mobile,
  20. 'province': this.state.province,
  21. 'roles': this.state.bindroles
  22. }
  23. }).done((res) => {
  24. if (res.error.length) {
  25. message.error(res.error[0].message);
  26. } else {
  27. message.success("保存成功");
  28. this.setState({
  29. visible: false,
  30. });
  31. this.props.handleReturn(false, true);
  32. //第二个参数表示保存
  33. }
  34. }).always(() => {
  35. this.setState({
  36. loading: false
  37. })
  38. })
  39. this.props.postData;
  40. }
  41. constructor(props) {
  42. super(props);
  43. this.state = {
  44. name: '',
  45. email: '',
  46. mobile: '',
  47. roles: [],
  48. visible: false,
  49. loading: false,
  50. provinceOption: [],
  51. bindroles: []
  52. }
  53. }
  54. handleCancel() {
  55. this.setState({
  56. visible: false,
  57. });
  58. this.props.handleReturn(false, false);
  59. }
  60. componentWillMount() {
  61. let _me = this;
  62. provinceArr.map(function (item) {
  63. _me.state.provinceOption.push(
  64. <Select.Option value={item} key={item}>{item}</Select.Option>
  65. )
  66. });
  67. }
  68. loadInitialData() {
  69. this.setState({
  70. loading: true
  71. });
  72. $.ajax({
  73. url: globalConfig.context + '/api/roles',
  74. cache: false
  75. }).done((rolesres) => {
  76. this.setState({
  77. roles: rolesres.data,
  78. loading: false
  79. });
  80. })
  81. }
  82. loadBindRoles(uid) {
  83. this.setState({
  84. loading: true
  85. });
  86. $.ajax({
  87. url: globalConfig.context + '/api/admin/role',
  88. cache: false,
  89. data: {
  90. "uid": uid
  91. }
  92. }).done((data) => {
  93. this.setState({
  94. bindroles: data.data || [],
  95. loading: false
  96. });
  97. })
  98. }
  99. componentWillReceiveProps(nextProps) {
  100. if (nextProps.show && !this.state.roles.length) {
  101. this.loadInitialData();
  102. };
  103. if (!this.state.visible && nextProps.show) {
  104. this.loadBindRoles(nextProps.data.id);
  105. };
  106. let nextState = {
  107. visible: nextProps.show,
  108. id: nextProps.data ? nextProps.data.id : '',
  109. name: nextProps.data ? nextProps.data.name : '',
  110. email: nextProps.data ? nextProps.data.email : '',
  111. mobile: nextProps.data ? nextProps.data.mobile : '',
  112. province: nextProps.data ? nextProps.data.province : ''
  113. };
  114. this.setState(nextState)
  115. }
  116. resetPwd(e) {
  117. this.setState({
  118. loading: true
  119. })
  120. $.ajax({
  121. type: 'post',
  122. url: globalConfig.context + "/api/admin/resetPwd",
  123. dataType: "json",
  124. data: {
  125. id: this.state.id
  126. }
  127. }).done((res) => {
  128. if (res.error && res.error.length) {
  129. message.error(res.error[0].message);
  130. } else {
  131. message.success("密码重置成功");
  132. }
  133. }).always(() => {
  134. this.setState({
  135. loading: false
  136. })
  137. });
  138. }
  139. getRolesSelection() {
  140. if (!this.state.id) {
  141. return <li></li>
  142. } else if (this.state.id != '1') {
  143. return <li>
  144. <span className='modal-text'>角色</span>
  145. <Select
  146. multiple
  147. style={{ width: '60%' }}
  148. placeholder="选择用户关联角色"
  149. value={this.state.bindroles}
  150. onChange={this.bindRoles.bind(this)}
  151. >
  152. {this.getRolesOptions()}
  153. </Select>
  154. </li>
  155. } else if (this.state.id == "1") {
  156. return <li><span className='modal-text'>角色</span><span>系统管理员</span></li>
  157. }
  158. }
  159. bindRoles(val) {
  160. this.setState({
  161. bindroles: val
  162. });
  163. }
  164. getRolesOptions() {
  165. let options = [];
  166. for (let i = 0; i < this.state.roles.length; i++) {
  167. options.push(<Select.Option key={String(this.state.roles[i].id)}>{this.state.roles[i].roleName}</Select.Option>);
  168. }
  169. return options;
  170. }
  171. render() {
  172. return (
  173. <div className="modal" >
  174. <Spin spinning={this.state.loading} >
  175. <Modal title="管理员详情"
  176. closable={false}
  177. visible={this.state.visible}
  178. onOk={this.postData.bind(this)}
  179. onCancel={this.handleCancel.bind(this)}
  180. >
  181. <ul className="modal-content">
  182. <li>
  183. <span className='modal-text'>名字</span>
  184. <Input value={this.state.name} onChange={(e) => { this.state.name = e.target.value; this.setState({ name: this.state.name }); }} />
  185. </li>
  186. <li>
  187. <span className='modal-text'>登录账号</span>
  188. <Input value={this.state.mobile} onChange={(e) => { this.state.mobile = e.target.value; this.setState({ mobile: this.state.mobile }); }} />
  189. </li>
  190. <li>
  191. <span className='modal-text'>省份</span>
  192. <Select placeholder="选择省份"
  193. style={{ width: 200 }}
  194. value={this.state.province}
  195. showSearch
  196. filterOption={companySearch}
  197. onChange={(e) => { this.setState({ province: e }) }}>
  198. {this.state.provinceOption}
  199. </Select>
  200. </li>
  201. <li>
  202. <span className='modal-text'>邮箱</span>
  203. <Input value={this.state.email} onChange={(e) => { this.state.email = e.target.value; this.setState({ email: this.state.email }); }} />
  204. </li>
  205. {this.getRolesSelection()}
  206. <li>
  207. <span></span>
  208. <Popconfirm
  209. title={"用户 [ " + this.state.name + " ] 的密码将会重置为123456,确认操作?"}
  210. onConfirm={this.resetPwd.bind(this)}
  211. okText="确认"
  212. cancelText="取消"
  213. placement="topLeft">
  214. <Button>重置密码</Button>
  215. </Popconfirm>
  216. </li>
  217. </ul>
  218. </Modal>
  219. </Spin>
  220. </div >
  221. );
  222. }
  223. }