modal.jsx 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. import React from 'react';
  2. import { Modal, Input, Spin, Switch, Select, Message } 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. getRolesSelection() {
  98. if (this.state.id != '1') {
  99. return <li>
  100. <span className='modal-text'>角色</span>
  101. <Select
  102. multiple
  103. style={{ width: '60%' }}
  104. placeholder="选择用户关联角色"
  105. value={this.state.bindroles}
  106. onChange={this.bindRoles.bind(this)}
  107. >
  108. {this.getRolesOptions()}
  109. </Select>
  110. </li>
  111. } else if (this.state.id == "1") {
  112. return <li><span className='modal-text'>角色</span><span>系统管理员</span></li>
  113. }
  114. }
  115. bindRoles(val) {
  116. this.setState({
  117. bindroles: val
  118. });
  119. }
  120. getRolesOptions() {
  121. let options = [];
  122. for (let i = 0; i < this.state.roles.length; i++) {
  123. options.push(<Select.Option key={String(this.state.roles[i].id)}>{this.state.roles[i].roleName}</Select.Option>);
  124. }
  125. return options;
  126. }
  127. render() {
  128. return (
  129. <div className="modal" >
  130. <Spin spinning={this.state.loading} >
  131. <Modal title="用户编辑"
  132. closable={false}
  133. visible={this.state.visible}
  134. onOk={this.postData.bind(this)}
  135. onCancel={this.handleCancel.bind(this)}
  136. >
  137. <ul className="modal-content">
  138. <li>
  139. <span className='modal-text'>名字</span>
  140. <Input value={this.state.name} onChange={(e) => { this.state.name = e.target.value; this.setState({ name: this.state.name }); }} />
  141. </li>
  142. <li>
  143. <span className='modal-text'>登录账号</span>
  144. <Input value={this.state.mobile} onChange={(e) => { this.state.mobile = e.target.value; this.setState({ mobile: this.state.mobile }); }} />
  145. </li>
  146. <li>
  147. <span className='modal-text'>省份</span>
  148. <Select placeholder="选择省份"
  149. style={{ width: 200 }}
  150. value={this.state.province}
  151. showSearch
  152. filterOption={companySearch}
  153. onChange={(e) => { this.setState({ province: e }) }}>
  154. {this.state.provinceOption}
  155. </Select>
  156. </li>
  157. <li>
  158. <span className='modal-text'>邮箱</span>
  159. <Input value={this.state.email} onChange={(e) => { this.state.email = e.target.value; this.setState({ email: this.state.email }); }} />
  160. </li>
  161. {this.getRolesSelection()}
  162. </ul>
  163. </Modal>
  164. </Spin>
  165. </div >
  166. );
  167. }
  168. }