modal.jsx 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. import React from 'react';
  2. import { Modal, Input, Spin, Switch, Select, Message } from 'antd';
  3. import ajax from 'jquery/src/ajax/xhr.js'
  4. import $ from 'jquery/src/ajax';
  5. export default class TheModal extends React.Component {
  6. postData() {
  7. this.setState({
  8. loading: true
  9. });
  10. $.ajax({
  11. type: "POST",
  12. url: this.state.id ? globalConfig.context + "/api/user/update" : globalConfig.context + "/api/user/create",
  13. data: {
  14. 'id': this.state.id,
  15. 'name': this.state.name,
  16. 'email': this.state.email,
  17. 'mobile': this.state.mobile,
  18. 'status': this.state.status ? 1 : 0,
  19. 'roles': this.state.bindroles,
  20. 'rooms': this.state.bindrooms
  21. }
  22. }).done((res) => {
  23. if (res.error.length) {
  24. Message.error(res.error[0].message);
  25. } else {
  26. Message.success("保存成功");
  27. this.setState({
  28. visible: false,
  29. });
  30. this.props.handleReturn(false, true);
  31. //第二个参数表示保存
  32. }
  33. }).always(() => {
  34. this.setState({
  35. loading: false
  36. })
  37. })
  38. this.props.postData;
  39. }
  40. constructor(props) {
  41. super(props);
  42. this.state = {
  43. name: '',
  44. email: '',
  45. mobile: '',
  46. rooms: [],
  47. roles: [],
  48. visible: false,
  49. loading: false,
  50. bindrooms: [],
  51. bindroles: []
  52. }
  53. }
  54. handleCancel() {
  55. this.setState({
  56. visible: false,
  57. });
  58. this.props.handleReturn(false, false);
  59. }
  60. loadInitialData() {
  61. this.setState({
  62. loading: true
  63. });
  64. $.ajax({
  65. url: globalConfig.context + '/api/admin/roles',
  66. cache: false
  67. }).done((rolesres) => {
  68. this.setState({
  69. roles: rolesres.data,
  70. loading: false
  71. });
  72. })
  73. }
  74. componentWillReceiveProps(nextProps) {
  75. if (nextProps.show && !this.state.roles.length) {
  76. this.loadInitialData();
  77. }
  78. let nextState = {
  79. visible: nextProps.show,
  80. id: nextProps.data ? nextProps.data.id : '',
  81. name: nextProps.data ? nextProps.data.name : '',
  82. email: nextProps.data ? nextProps.data.email : '',
  83. mobile: nextProps.data ? nextProps.data.mobile : '',
  84. bindroles: nextProps.data && nextProps.data.roles ? nextProps.data.roles.map((role) => { return String(role.id); }) : []
  85. };
  86. this.setState(nextState)
  87. }
  88. getRolesSelection() {
  89. if (this.state.id > 1) {
  90. return <li>
  91. <span className='modal-text'>角色</span>
  92. <Select
  93. multiple
  94. style={{ width: '90%' }}
  95. placeholder="选择用户关联角色"
  96. value={this.state.bindroles}
  97. onChange={this.bindRoles.bind(this)}
  98. >
  99. {this.getRolesOptions()}
  100. </Select>
  101. </li>
  102. } else if (this.state.id === 1) {
  103. return <li><span className='modal-text'>角色</span><span>系统管理员</span></li>
  104. }
  105. }
  106. bindRoles(val) {
  107. this.setState({
  108. bindroles: val
  109. });
  110. }
  111. getRolesOptions() {
  112. let options = [];
  113. for (let i = 0; i < this.state.roles.length; i++) {
  114. options.push(<Option key={String(this.state.roles[i].id)}>{this.state.roles[i].name}</Option>);
  115. }
  116. return options;
  117. }
  118. render() {
  119. const Option = Select.Option;
  120. return (
  121. <div className="modal" >
  122. <Spin spinning={this.state.loading} >
  123. <Modal title="用户编辑"
  124. closable={false}
  125. visible={this.state.visible}
  126. onOk={this.postData.bind(this)}
  127. onCancel={this.handleCancel.bind(this)}
  128. >
  129. <ul className="modal-content">
  130. <li>
  131. <span className='modal-text'>名字</span>
  132. <Input value={this.state.name} onChange={(e) => { this.state.name = e.target.value; this.setState({ name: this.state.name }); }} />
  133. </li>
  134. <li>
  135. <span className='modal-text'>登录账号</span>
  136. <Input value={this.state.mobile} onChange={(e) => { this.state.mobile = e.target.value; this.setState({ mobile: this.state.mobile }); }} />
  137. </li>
  138. <li>
  139. <span className='modal-text'>省份</span>
  140. <Input value={this.state.email} onChange={(e) => { this.state.email = e.target.value; this.setState({ email: this.state.email }); }} />
  141. </li>
  142. <li>
  143. <span className='modal-text'>邮箱</span>
  144. <Input value={this.state.email} onChange={(e) => { this.state.email = e.target.value; this.setState({ email: this.state.email }); }} />
  145. </li>
  146. <li>
  147. <span className='modal-text'>状态</span>
  148. <Switch disabled={this.state.id == 1} checked={this.state.status == 1 ? true : false} onChange={(e) => { this.setState({ status: e }) }} />
  149. </li>
  150. {this.getRolesSelection()}
  151. </ul>
  152. </Modal>
  153. </Spin>
  154. </div >
  155. );
  156. }
  157. }