permission.jsx 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. import React from 'react';
  2. import { Table, Button, Input, Spin, Message } from 'antd';
  3. import ajax from 'jquery/src/ajax/xhr.js'
  4. import $ from 'jquery/src/ajax';
  5. export default class Permission extends React.Component {
  6. constructor(props) {
  7. super(props);
  8. this.state = {
  9. data: [],
  10. selectedRowKeys: [],
  11. selectedRows: [],
  12. loading: false
  13. }
  14. }
  15. componentDidMount() {
  16. this.loadData();
  17. }
  18. loadData() {
  19. this.setState({
  20. loading: true
  21. });
  22. $.ajax({
  23. url: globalConfig.context + '/api/permissions',
  24. method: 'get',
  25. cache: false
  26. }).done((res) => {
  27. if (!res.error.length) {
  28. this.setState({
  29. data: res.data
  30. })
  31. }
  32. }).always(() => {
  33. this.setState({
  34. loading: false
  35. });
  36. });
  37. }
  38. save() {
  39. this.setState({
  40. loading: true
  41. });
  42. $.ajax({
  43. url: globalConfig.context + '/api/permission',
  44. method: 'post',
  45. data: {
  46. data: JSON.stringify(this.state.data)
  47. }
  48. }).done((res) => {
  49. if (!res.error.length) {
  50. Message.success("保存成功");
  51. this.loadData();
  52. } else {
  53. Message.error(res.error[0].message);
  54. }
  55. }).always(() => {
  56. this.setState({
  57. loading: false
  58. });
  59. })
  60. }
  61. remove() {
  62. let deletedIds = [];
  63. for (let idx = 0; idx < this.state.selectedRows.length; idx++) {
  64. let rowItem = this.state.selectedRows[idx];
  65. if (rowItem.id) {
  66. deletedIds.push(rowItem.id)
  67. }
  68. }
  69. this.state.selectedRowKeys.sort((a, b) => { return b - a });
  70. for (let idx = 0; idx < this.state.selectedRowKeys.length; idx++) {
  71. let dataIndex = this.state.selectedRowKeys[idx];
  72. this.state.data.splice(dataIndex, 1);
  73. }
  74. this.setState({
  75. data: this.state.data,
  76. selectedRowKeys: [],
  77. loading: deletedIds.length > 0
  78. });
  79. if (deletedIds.length) {
  80. $.ajax({
  81. url: globalConfig.context + '/api/permission/delete',
  82. method: 'post',
  83. data: {
  84. data: JSON.stringify(deletedIds)
  85. }
  86. }).done((res) => {
  87. if (!res.error.length) {
  88. Message.success("删除成功");
  89. } else {
  90. Message.error(res.error[0].message);
  91. }
  92. }).always(() => {
  93. this.setState({
  94. loading: false
  95. });
  96. })
  97. }
  98. }
  99. addNew() {
  100. this.state.data.push({
  101. id: '',
  102. name: '',
  103. url: ''
  104. });
  105. this.setState({
  106. data: this.state.data
  107. })
  108. }
  109. render() {
  110. const columns = [{
  111. title: 'id',
  112. dataIndex: 'id',
  113. key: 'id',
  114. width: '10%'
  115. }, {
  116. title: '权限名字',
  117. dataIndex: 'name',
  118. key: 'name',
  119. render: (text, record, index) => {
  120. return <Input value={record.name} onChange={(e) => { record.name = e.target.value; this.setState({ data: this.state.data }); }} />
  121. },
  122. width: '40%'
  123. }, {
  124. title: '接口路径',
  125. dataIndex: 'url',
  126. key: 'url',
  127. render: (text, record, index) => {
  128. return <Input value={record.url} onChange={(e) => { record.url = e.target.value; this.setState({ data: this.state.data }); }} />
  129. },
  130. width: '50%'
  131. }];
  132. const rowSelection = {
  133. type: 'checkbox',
  134. selectedRowKeys: this.state.selectedRowKeys,
  135. onChange: (selectedRowKeys, selectedRows) => {
  136. this.setState({
  137. selectedRows: selectedRows,
  138. selectedRowKeys: selectedRowKeys
  139. });
  140. }
  141. }
  142. return (
  143. <Spin spinning={this.state.loading}>
  144. <div>
  145. <Button type="primary" onClick={this.save.bind(this)}>保存修改</Button>
  146. <Button onClick={this.addNew.bind(this)}>新增</Button>
  147. <Button onClick={this.remove.bind(this)}>删除选中</Button>
  148. </div>
  149. <Table columns={columns} dataSource={this.state.data} pagination={false} scroll={{ y: 450 }} rowSelection={rowSelection} />
  150. </Spin>
  151. );
  152. }
  153. };