| 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>        );    }};
 |