| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277 | import React from 'react';import { Table, Button, Input, Spin, Message, Select, Modal, Tag, Icon } from 'antd';import ajax from 'jquery/src/ajax/xhr.js'import $ from 'jquery/src/ajax';const Role = React.createClass({    getInitialState() {        return {            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,                        roleName: thisdata.roleName,                        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.setState({            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("删除成功");                    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.setState({            visible: true,            modelRecord: {                id: null,                roleName: '',                permissions: []            }        })    },    edit(e) {        this.setState({            modelRecord: {                id: e.id,                roleName: e.roleName,                permissions: e.permissions            },            visible: true,            disabled: false        })    },    handleCancel() {        this.setState({            visible: false,            disabled: false        })    },    render() {        const columns = [{            title: '名字',            dataIndex: 'roleName',            key: 'roleName'        }, {            title: '绑定权限',            dataIndex: 'permissions',            key: 'permissions',            render: (text, record, index) => {                let _me = this;                if (record.permissions) {                    return <div>                        {record.permissions.map((tag, i) => {                            if (i < 3) {                                return <Tag key={tag} closable={false}>                                    {_me.state.permissions[tag]}                                </Tag>                            } else if (i == 3) {                                return <Tag key={tag} closable={false}>                                    ...                                </Tag>                            } else {                                return false;                            }                        }                        )}                    </div>                } else {                    return <div></div>;                }            },        }];        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}>                <Modal maskClosable={false} title="角色编辑"                    closable={false}                    visible={this.state.visible}                    onOk={this.save}                    width={1000}                    onCancel={this.handleCancel}>                    <ul className="modal-content">                        <li>                            <span className='modal-text'>名字</span>                            <Input value={this.state.modelRecord.roleName} onChange={(e) => {                                this.state.modelRecord.roleName = e.target.value;                                this.setState({                                    modelRecord: this.state.modelRecord                                })                            }} />                        </li>                        <li>                            <span className='modal-text'>权限</span>                            <Select                                multiple                                style={{ width: '80%' }}                                placeholder="选择绑定权限"                                disabled={!this.state.modelRecord.id}                                filterOption={(input, option) => { return option.props.children.indexOf(input) >= 0 }}                                value={this.state.modelRecord.permissions}                                onChange={(pids) => {                                    this.state.modelRecord.permissions = pids;                                    this.setState({                                        modelRecord: this.state.modelRecord                                    })                                }}                            >                                {this.state.selectOption}                            </Select>                        </li>                    </ul>                </Modal>                <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>                    </div>                    <Table size="middle" className='member-table'                        columns={columns}                        dataSource={this.state.data}                        onRowClick={this.edit}                        style={{                           cursor: 'pointer',                        }}                        pagination={false}                        rowSelection={rowSelection} />                </div>            </Spin>        );    }});export default Role;
 |