123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161 |
- import React from 'react';
- import { Table, Button, Input, Spin, Message } from 'antd';
- import ajax from 'jquery/src/ajax/xhr.js'
- import $ from 'jquery/src/ajax';
- export default class Permission extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- data: [],
- selectedRowKeys: [],
- selectedRows: [],
- loading: false
- }
- }
- componentDidMount() {
- this.loadData();
- }
- loadData() {
- this.setState({
- loading: true
- });
- $.ajax({
- url: globalConfig.context + '/api/permissions',
- method: 'get',
- cache: false
- }).done((res) => {
- if (!res.error.length) {
- this.setState({
- data: res.data
- })
- }
- }).always(() => {
- this.setState({
- loading: false
- });
- });
- }
- save() {
- this.setState({
- loading: true
- });
- $.ajax({
- url: globalConfig.context + '/api/permission',
- method: 'post',
- data: {
- data: JSON.stringify(this.state.data)
- }
- }).done((res) => {
- if (!res.error.length) {
- Message.success("保存成功");
- this.loadData();
- } else {
- Message.error(res.error[0].message);
- }
- }).always(() => {
- this.setState({
- loading: false
- });
- })
- }
- remove() {
- let deletedIds = [];
- for (let idx = 0; idx < this.state.selectedRows.length; idx++) {
- let rowItem = this.state.selectedRows[idx];
- if (rowItem.id) {
- deletedIds.push(rowItem.id)
- }
- }
- this.state.selectedRowKeys.sort((a, b) => { return b - a });
- for (let idx = 0; idx < this.state.selectedRowKeys.length; idx++) {
- let dataIndex = this.state.selectedRowKeys[idx];
- this.state.data.splice(dataIndex, 1);
- }
- this.setState({
- data: this.state.data,
- selectedRowKeys: [],
- loading: deletedIds.length > 0
- });
- if (deletedIds.length) {
- $.ajax({
- url: globalConfig.context + '/api/permission/delete',
- method: 'post',
- data: {
- data: JSON.stringify(deletedIds)
- }
- }).done((res) => {
- if (!res.error.length) {
- Message.success("删除成功");
- } else {
- Message.error(res.error[0].message);
- }
- }).always(() => {
- this.setState({
- loading: false
- });
- })
- }
- }
- addNew() {
- this.state.data.push({
- id: '',
- name: '',
- url: ''
- });
- this.setState({
- data: this.state.data
- })
- }
- render() {
- const columns = [{
- title: 'id',
- dataIndex: 'id',
- key: 'id',
- width: '10%'
- }, {
- title: '权限名字',
- dataIndex: 'name',
- key: 'name',
- render: (text, record, index) => {
- return <Input value={record.name} onChange={(e) => { record.name = e.target.value; this.setState({ data: this.state.data }); }} />
- },
- width: '40%'
- }, {
- title: '接口路径',
- dataIndex: 'url',
- key: 'url',
- render: (text, record, index) => {
- return <Input value={record.url} onChange={(e) => { record.url = e.target.value; this.setState({ data: this.state.data }); }} />
- },
- width: '50%'
- }];
- const rowSelection = {
- type: 'checkbox',
- selectedRowKeys: this.state.selectedRowKeys,
- onChange: (selectedRowKeys, selectedRows) => {
- this.setState({
- selectedRows: selectedRows,
- selectedRowKeys: selectedRowKeys
- });
- }
- }
- return (
- <Spin spinning={this.state.loading}>
- <div>
- <Button type="primary" onClick={this.save.bind(this)}>保存修改</Button>
- <Button onClick={this.addNew.bind(this)}>新增</Button>
- <Button onClick={this.remove.bind(this)}>删除选中</Button>
- </div>
- <Table columns={columns} dataSource={this.state.data} pagination={false} scroll={{ y: 450 }} rowSelection={rowSelection} />
- </Spin>
- );
- }
- };
|