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

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;