| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260 | import React from 'react';import { Table, Button, Input, Spin, Message, Select, Modal, Tag } from 'antd';import ajax from 'jquery/src/ajax/xhr.js'import $ from 'jquery/src/ajax';export default class Role extends React.Component {    constructor(props) {        super(props);        this.state = {            visible: false,            disabled: false,            name: '',            selectOption: [],            data: [],            selectedRowKeys: [],            selectedRows: [],            loading: false,            permissions: {            },            modelRecord: {                id: '',                name: '',                permissions: []            }        }    }    componentWillMount() {        this.loadData();    }    loadData() {        let _me = this;        this.setState({            loading: true        });        $.when($.ajax({            url: globalConfig.context + '/api/roles',            method: 'get',            cache: false        }), $.ajax({            url: globalConfig.context + '/api/permissions',            method: 'get',            cache: false        })).done((roles, permissions) => {            if (!roles[0].error.length && roles[0].data) {                this.state.data = [];                for (let i = 0; i < roles[0].data.length; i++) {                    let thisdata = roles[0].data[i];                    this.state.data.push({                        key: i,                        id: thisdata.id,                        name: thisdata.name,                        permissions: thisdata.permissions.map((p) => { return String(p.id) }) || []                    });                };            }            if (!permissions[0].error.length && permissions[0].data) {                _me.state.selectOption = [];                permissions[0].data.map(function (item) {                    _me.state.selectOption.push(                        <Select.Option key={item.id}>{item.name}</Select.Option>                    )                    _me.state.permissions[String(item.id)] = item.name;                });            }        }).always(() => {            this.setState({                loading: false            });        });    }    save() {        this.setState({            loading: true        });        $.ajax({            url: globalConfig.context + '/api/role',            method: 'post',            data: { data: JSON.stringify(this.state.modelRecord) },        }).done((res) => {            if (!res.error.length) {                Message.success("保存成功");                this.loadData();            } else {                Message.error(res.error[0].message);            }        }).always(() => {            this.setState({                loading: false,                visible: false,                disabled: 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/role/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.setState({            visible: true,            modelRecord: {                id: '',                name: '',                permissions: []            }        })    }    edit(e) {        this.setState({            modelRecord: e,            visible: true,            disabled: false        })    }    handleCancel() {        this.setState({            visible: false,            disabled: false        })    }    render() {        const columns = [{            title: 'ID',            dataIndex: 'id',            key: 'id',            width: '10%'        }, {            title: '名字',            dataIndex: 'name',            key: 'name',            width: '20%'        }, {            title: '绑定权限',            dataIndex: 'permissions',            key: 'permissions',            render: (text, record, index) => {                let _me = this;                return <div>                    {record.permissions && record.permissions.map((tag) => {                        return <Tag key={tag} closable={false}>                            {_me.state.permissions[tag]}                        </Tag>                    }                    )}                </div>            },            width: '60%'        }, {            title: '操作',            dataIndex: 'act',            key: 'act',            render: (text, record, index) => {                return <Button type='primary' onClick={this.edit.bind(this, record)}>编辑</Button>            },            width: '20%'        }];        const rowSelection = {            type: 'checkbox',            selectedRowKeys: this.state.selectedRowKeys,            onChange: (selectedRowKeys, selectedRows) => {                this.setState({                    selectedRows: selectedRows,                    selectedRowKeys: selectedRowKeys                });            }        }        return (            <Spin spinning={this.state.loading}>                <Modal title="用户编辑"                    closable={false}                    visible={this.state.visible}                    onOk={this.save.bind(this)}                    onCancel={this.handleCancel.bind(this)}                >                    <ul className="modal-content">                        <li>                            <span className='modal-text'>名字</span>                            <Input value={this.state.modelRecord.name} onChange={(e) => {                                this.state.modelRecord.name = e.target.value;                                this.setState({                                    modelRecord: this.state.modelRecord                                })                            }} />                        </li>                        <li>                            <span className='modal-text'>权限</span>                            <Select                                multiple                                style={{ width: '90%' }}                                placeholder="选择绑定权限"                                disabled={!this.state.modelRecord.id}                                value={this.state.modelRecord.permissions}                                onChange={(pids) => {                                    let _me = this;                                    this.state.modelRecord.permissions = pids;                                    this.setState({                                        modelRecord: this.state.modelRecord                                    })                                }}                            >                                {this.state.selectOption}                            </Select>                        </li>                    </ul>                </Modal>                <div style={{                    marginBottom: '6px'                }}>                    <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>        );    }};
 |