modal.jsx 9.1 KB

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