kede-client/js/component/manageCenter/set/userManagement/permission.jsx

import React from 'react';
import { Table, Button, Input, Spin, Message, Icon } from 'antd';
import ajax from 'jquery/src/ajax/xhr.js';
import $ from 'jquery/src/ajax';

const Permission = React.createClass({
    getInitialState() {
        return {
            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.setState({
            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("删除成功");
                    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: []
                    });
                } else {
                    Message.error(res.error[0].message);
                }
            }).always(() => {
                this.setState({
                    loading: false
                });
            })
        }
    },

    addNew() {
        this.state.data.push({
            id: null,
            name: '',
            url: ''
        });
        this.setState({
            data: this.state.data
        })
    },

    render() {
        const columns = [{
            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 }); }} />
            }
        }, {
            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 }); }} />
            }
        }];
        const rowSelection = {
            type: 'checkbox',
            selectedRowKeys: this.state.selectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({
                    selectedRows: selectedRows,
                    selectedRowKeys: selectedRowKeys
                });
            }
        };
        const hasSelected = this.state.selectedRowKeys.length > 0;
        return (
            <Spin spinning={this.state.loading}>
                <div className="set-content">
                    <div className="set-title">
                        <span>权限控制</span>
                        <Button style={{ background: "#ea0862", border: "none", color: "#fff" }}
                            onClick={this.addNew}>添加<Icon type="plus" /></Button>
                        <Button style={{ background: "#3fcf9e", border: "none", color: "#fff" }}
                            disabled={!hasSelected}
                            onClick={this.remove}>删除<Icon type="minus" /></Button>
                        <Button type="primary" onClick={this.save}>保存修改</Button>
                    </div>
                    <Table size="middle" className="member-table"
                        columns={columns}
                        dataSource={this.state.data}
                        pagination={false}
                        rowSelection={rowSelection} />
                </div>
            </Spin>
        );
    }
});
export default Permission;