role.jsx 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260
  1. import React from 'react';
  2. import { Table, Button, Input, Spin, Message, Select, Modal, Tag } from 'antd';
  3. import ajax from 'jquery/src/ajax/xhr.js'
  4. import $ from 'jquery/src/ajax';
  5. export default class Role extends React.Component {
  6. constructor(props) {
  7. super(props);
  8. this.state = {
  9. visible: false,
  10. disabled: false,
  11. name: '',
  12. selectOption: [],
  13. data: [],
  14. selectedRowKeys: [],
  15. selectedRows: [],
  16. loading: false,
  17. permissions: {
  18. },
  19. modelRecord: {
  20. id: '',
  21. name: '',
  22. permissions: []
  23. }
  24. }
  25. }
  26. componentWillMount() {
  27. this.loadData();
  28. }
  29. loadData() {
  30. let _me = this;
  31. this.setState({
  32. loading: true
  33. });
  34. $.when($.ajax({
  35. url: globalConfig.context + '/api/roles',
  36. method: 'get',
  37. cache: false
  38. }), $.ajax({
  39. url: globalConfig.context + '/api/permissions',
  40. method: 'get',
  41. cache: false
  42. })).done((roles, permissions) => {
  43. if (!roles[0].error.length && roles[0].data) {
  44. this.state.data = [];
  45. for (let i = 0; i < roles[0].data.length; i++) {
  46. let thisdata = roles[0].data[i];
  47. this.state.data.push({
  48. key: i,
  49. id: thisdata.id,
  50. name: thisdata.name,
  51. permissions: thisdata.permissions.map((p) => { return String(p.id) }) || []
  52. });
  53. };
  54. }
  55. if (!permissions[0].error.length && permissions[0].data) {
  56. _me.state.selectOption = [];
  57. permissions[0].data.map(function (item) {
  58. _me.state.selectOption.push(
  59. <Select.Option key={item.id}>{item.name}</Select.Option>
  60. )
  61. _me.state.permissions[String(item.id)] = item.name;
  62. });
  63. }
  64. }).always(() => {
  65. this.setState({
  66. loading: false
  67. });
  68. });
  69. }
  70. save() {
  71. this.setState({
  72. loading: true
  73. });
  74. $.ajax({
  75. url: globalConfig.context + '/api/role',
  76. method: 'post',
  77. data: { data: JSON.stringify(this.state.modelRecord) },
  78. }).done((res) => {
  79. if (!res.error.length) {
  80. Message.success("保存成功");
  81. this.loadData();
  82. } else {
  83. Message.error(res.error[0].message);
  84. }
  85. }).always(() => {
  86. this.setState({
  87. loading: false,
  88. visible: false,
  89. disabled: false
  90. });
  91. })
  92. }
  93. remove() {
  94. let deletedIds = [];
  95. for (let idx = 0; idx < this.state.selectedRows.length; idx++) {
  96. let rowItem = this.state.selectedRows[idx];
  97. if (rowItem.id) {
  98. deletedIds.push(rowItem.id)
  99. }
  100. }
  101. this.state.selectedRowKeys.sort((a, b) => { return b - a });
  102. for (let idx = 0; idx < this.state.selectedRowKeys.length; idx++) {
  103. let dataIndex = this.state.selectedRowKeys[idx];
  104. this.state.data.splice(dataIndex, 1);
  105. }
  106. this.setState({
  107. data: this.state.data,
  108. selectedRowKeys: [],
  109. loading: deletedIds.length > 0
  110. });
  111. if (deletedIds.length) {
  112. $.ajax({
  113. url: globalConfig.context + '/api/role/delete',
  114. method: 'post',
  115. data: {
  116. data: JSON.stringify(deletedIds)
  117. }
  118. }).done((res) => {
  119. if (!res.error.length) {
  120. Message.success("删除成功");
  121. } else {
  122. Message.error(res.error[0].message);
  123. }
  124. }).always(() => {
  125. this.setState({
  126. loading: false
  127. });
  128. })
  129. }
  130. }
  131. addNew() {
  132. this.setState({
  133. visible: true,
  134. modelRecord: {
  135. id: '',
  136. name: '',
  137. permissions: []
  138. }
  139. })
  140. }
  141. edit(e) {
  142. this.setState({
  143. modelRecord: e,
  144. visible: true,
  145. disabled: false
  146. })
  147. }
  148. handleCancel() {
  149. this.setState({
  150. visible: false,
  151. disabled: false
  152. })
  153. }
  154. render() {
  155. const columns = [{
  156. title: 'ID',
  157. dataIndex: 'id',
  158. key: 'id',
  159. width: '10%'
  160. }, {
  161. title: '名字',
  162. dataIndex: 'name',
  163. key: 'name',
  164. width: '20%'
  165. }, {
  166. title: '绑定权限',
  167. dataIndex: 'permissions',
  168. key: 'permissions',
  169. render: (text, record, index) => {
  170. let _me = this;
  171. return <div>
  172. {record.permissions && record.permissions.map((tag) => {
  173. return <Tag key={tag} closable={false}>
  174. {_me.state.permissions[tag]}
  175. </Tag>
  176. }
  177. )}
  178. </div>
  179. },
  180. width: '60%'
  181. }, {
  182. title: '操作',
  183. dataIndex: 'act',
  184. key: 'act',
  185. render: (text, record, index) => {
  186. return <Button type='primary' onClick={this.edit.bind(this, record)}>编辑</Button>
  187. },
  188. width: '20%'
  189. }];
  190. const rowSelection = {
  191. type: 'checkbox',
  192. selectedRowKeys: this.state.selectedRowKeys,
  193. onChange: (selectedRowKeys, selectedRows) => {
  194. this.setState({
  195. selectedRows: selectedRows,
  196. selectedRowKeys: selectedRowKeys
  197. });
  198. }
  199. }
  200. return (
  201. <Spin spinning={this.state.loading}>
  202. <Modal title="用户编辑"
  203. closable={false}
  204. visible={this.state.visible}
  205. onOk={this.save.bind(this)}
  206. onCancel={this.handleCancel.bind(this)}
  207. >
  208. <ul className="modal-content">
  209. <li>
  210. <span className='modal-text'>名字</span>
  211. <Input value={this.state.modelRecord.name} onChange={(e) => {
  212. this.state.modelRecord.name = e.target.value;
  213. this.setState({
  214. modelRecord: this.state.modelRecord
  215. })
  216. }} />
  217. </li>
  218. <li>
  219. <span className='modal-text'>权限</span>
  220. <Select
  221. multiple
  222. style={{ width: '90%' }}
  223. placeholder="选择绑定权限"
  224. disabled={!this.state.modelRecord.id}
  225. value={this.state.modelRecord.permissions}
  226. onChange={(pids) => {
  227. let _me = this;
  228. this.state.modelRecord.permissions = pids;
  229. this.setState({
  230. modelRecord: this.state.modelRecord
  231. })
  232. }}
  233. >
  234. {this.state.selectOption}
  235. </Select>
  236. </li>
  237. </ul>
  238. </Modal>
  239. <div style={{
  240. marginBottom: '6px'
  241. }}>
  242. <Button onClick={this.addNew.bind(this)}>新增</Button>
  243. <Button onClick={this.remove.bind(this)}>删除选中</Button>
  244. </div>
  245. <Table columns={columns} dataSource={this.state.data} pagination={false} scroll={{ y: 450 }} rowSelection={rowSelection} />
  246. </Spin>
  247. );
  248. }
  249. };