modal.jsx 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  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. componentWillReceiveProps(nextProps) {
  83. if (nextProps.show && !this.state.roles.length) {
  84. this.loadInitialData();
  85. };
  86. let nextState = {
  87. visible: nextProps.show,
  88. id: nextProps.data ? nextProps.data.id : '',
  89. name: nextProps.data ? nextProps.data.name : '',
  90. email: nextProps.data ? nextProps.data.email : '',
  91. mobile: nextProps.data ? nextProps.data.mobile : '',
  92. province: nextProps.data ? nextProps.data.province : '',
  93. bindroles: nextProps.data && nextProps.data.roles ? nextProps.data.roles.map((role) => { return String(role.id); }) : []
  94. };
  95. this.setState(nextState)
  96. }
  97. resetPwd(e) {
  98. this.setState({
  99. loading: true
  100. })
  101. $.ajax({
  102. type: 'post',
  103. url: globalConfig.context + "/api/admin/resetPwd",
  104. dataType: "json",
  105. data: {
  106. id: this.state.id
  107. }
  108. }).done((res) => {
  109. if (res.error && res.error.length) {
  110. message.error(res.error[0].message);
  111. } else {
  112. message.success("密码重置成功");
  113. }
  114. }).always(() => {
  115. this.setState({
  116. loading: false
  117. })
  118. });
  119. }
  120. getRolesSelection() {
  121. if (this.state.id !== '1') {
  122. return <li>
  123. <span className='modal-text'>角色</span>
  124. <Select
  125. multiple
  126. style={{ width: '60%' }}
  127. placeholder="选择用户关联角色"
  128. value={this.state.bindroles}
  129. onChange={this.bindRoles.bind(this)}
  130. >
  131. {this.getRolesOptions()}
  132. </Select>
  133. </li>
  134. } else if (this.state.id == "1") {
  135. return <li><span className='modal-text'>角色</span><span>系统管理员</span></li>
  136. }
  137. }
  138. bindRoles(val) {
  139. this.setState({
  140. bindroles: val
  141. });
  142. }
  143. getRolesOptions() {
  144. let options = [];
  145. for (let i = 0; i < this.state.roles.length; i++) {
  146. options.push(<Select.Option key={String(this.state.roles[i].id)}>{this.state.roles[i].roleName}</Select.Option>);
  147. }
  148. return options;
  149. }
  150. render() {
  151. return (
  152. <div className="modal" >
  153. <Spin spinning={this.state.loading} >
  154. <Modal title="角色管理"
  155. closable={false}
  156. visible={this.state.visible}
  157. onOk={this.postData.bind(this)}
  158. onCancel={this.handleCancel.bind(this)}
  159. >
  160. <ul className="modal-content">
  161. <li>
  162. <span className='modal-text'>名字</span>
  163. <Input value={this.state.name} onChange={(e) => { this.state.name = e.target.value; this.setState({ name: this.state.name }); }} />
  164. </li>
  165. <li>
  166. <span className='modal-text'>登录账号</span>
  167. <Input value={this.state.mobile} onChange={(e) => { this.state.mobile = e.target.value; this.setState({ mobile: this.state.mobile }); }} />
  168. </li>
  169. <li>
  170. <span className='modal-text'>省份</span>
  171. <Select placeholder="选择省份"
  172. style={{ width: 200 }}
  173. value={this.state.province}
  174. showSearch
  175. filterOption={companySearch}
  176. onChange={(e) => { this.setState({ province: e }) }}>
  177. {this.state.provinceOption}
  178. </Select>
  179. </li>
  180. <li>
  181. <span className='modal-text'>邮箱</span>
  182. <Input value={this.state.email} onChange={(e) => { this.state.email = e.target.value; this.setState({ email: this.state.email }); }} />
  183. </li>
  184. {this.getRolesSelection()}
  185. <li>
  186. <span></span>
  187. <Popconfirm
  188. title={"用户 [ " + this.state.name + " ] 的密码将会重置为123456,确认操作?"}
  189. onConfirm={this.resetPwd.bind(this)}
  190. okText="确认"
  191. cancelText="取消"
  192. placement="topLeft">
  193. <Button>重置密码</Button>
  194. </Popconfirm>
  195. </li>
  196. </ul>
  197. </Modal>
  198. </Spin>
  199. </div >
  200. );
  201. }
  202. }