| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166 | 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 className="member-table"                        columns={columns}                        dataSource={this.state.data}                        pagination={false}                        rowSelection={rowSelection} />                </div>            </Spin>        );    }});export default Permission;
 |