platform-bi-web/src/components/admin/userGroupManagement.jsx

/**
 * 用户分组
 */
import React from 'react';
import { Layout, Input, Table, Button, Icon, Menu } from 'antd'
import { connect } from 'dva'
import './userGroupManagement.less'
import DetailBox from './userGroupDetailBox'
import AddMemberBox from '../common/selectUserBox'
const { Sider, Content } = Layout
const { Search } = Input

class UserGroupManagement extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            visibleAddMemberBox: false
        }
    }

    componentDidMount() {
        const { dispatch } = this.props;
        dispatch({ type: 'userGroup/fetchList' });
    }

    onSort(list) {
        return list.sort((a, b) => {
            return new Date(b.createTime) - new Date(a.createTime);
        });
    }

    showDetailBox = (operate) => {
        const { userGroup, dispatch } = this.props;
        const { selectedGroup } = userGroup;

        if(operate === 'create') {
            dispatch({ type: 'userGroup/setNewModel', model: {
                visibleDetailBox: true,
                operate
            }});
        }else {
            dispatch({ type: 'userGroup/setNewModel', model: { ...selectedGroup, visibleDetailBox: true, operate } });
        }
    }

    showAddMemberBox = () => {
        const { dispatch } = this.props;
        dispatch({ type: 'userGroup/setNewModelField', name: 'visibleAddMemberBox', value: true });
    }

    render() {
        const { userGroup, dispatch } = this.props;
        const { selectedGroup } = userGroup;

        const reg = new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'); // 需要转义的字符
        let filterLabel = (userGroup.filterLabel || '').replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1'); // 添加转义符号

        const columns = [{
            title: '用户',
            dataIndex: 'name',
            width: 200
        }, {
            title: '操作',
            width: 50,
            render: (text, record, index) => (
                <span style={{ cursor: 'pointer', color: 'red' }} onClick={() => {
                    dispatch({ type: 'userGroup/remoteMemberDelete', userCode: record.code, groupCode: selectedGroup.code });
                }}>删除</span>
            ),
        }]
        const selectedKeys = selectedGroup ? [selectedGroup.code] : [];
        return (
            <Layout className='group-layout'>
                <Sider>
                    <div className='search-area'>
                        <Search
                            value={userGroup.filterLabel}
                            placeholder="请输入关键字"
                            onChange={e => {
                                dispatch({ type: 'userGroup/setFilterLabel', label: e.target.value });
                            }}
                        />
                    </div>
                    <Menu
                        selectedKeys={selectedKeys}
                    >
                        {userGroup.list.map(l => {
                           let reg = new RegExp('(' + filterLabel + '){1}', 'ig');
                           if((l.name || '').search(reg) !== -1) {
                               return { ...l, visible: true };
                           }else {
                               return { ...l, visible: false };
                           }
                        }).map(l => (
                            <Menu.Item key={l.code+''} style={{ display: l.visible ? 'block' : 'none' }} onClick={() => {
                                dispatch({ type: 'userGroup/chageSelectedGroup', group: l });
                            }} >
                                <span>
                                    { filterLabel ?
                                        ((l.name || '').split(new RegExp(`(${filterLabel})`, 'i')).map((fragment, i) => {
                                            return (
                                                fragment.toLowerCase().replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') === filterLabel.toLowerCase() ?
                                                <span key={i} style={{fontWeight: 'bold', color: 'red'}} className="highlight">{fragment}</span> :
                                                fragment
                                            )
                                        }
                                        )) : l.name
                                    }
                                </span>
                            </Menu.Item>
                        ))}
                    </Menu>
                    <div className='addbtn-area'>
                        <Button className='add-btn' onClick={() => {this.showDetailBox('create')}}>
                            <Icon type="plus-circle-o" />添加用户组
                        </Button>
                        <DetailBox />
                    </div>
                </Sider>
                <Content>
                    <div className='groupname'>
                        <span>{selectedGroup ? selectedGroup.name : ''}</span>
                        {selectedGroup && <Button className='delete-btn' onClick={() => {
                            dispatch({ type: 'userGroup/remoteDelete', group: selectedGroup });
                        }}>
                            <Icon type="delete" />删除用户组
                        </Button>}
                        {selectedGroup && <Button className='edit-btn' onClick={() => {this.showDetailBox('modify')}}>
                            <Icon type="edit" />编辑用户组
                        </Button>}
                    </div>
                    <Table
                        className='member-table'
                        columns={columns}
                        dataSource={selectedGroup ? (selectedGroup.member.map((d, i) => ({...d, key: i})) || []) : []}
                        size='small'
                    />
                    <div className='addbtn-area'>
                        {selectedGroup && <Button className='add-btn' onClick={() => {
                            this.setState({
                                visibleAddMemberBox: true
                            });
                        }}>
                            <Icon type="plus-circle-o" />添加用户
                        </Button>}
                        <AddMemberBox
                            visibleBox={this.state.visibleAddMemberBox}
                            title='添加用户组成员'
                            hideBox={() => {
                                this.setState({
                                    visibleAddMemberBox: false
                                });
                            }}
                            multiple={false}
                            okHandler={(selectedUser) => {
                                dispatch({ type: 'userGroup/remoteMemberAdd', user: selectedUser, group: selectedGroup });
                            }}
                        />
                    </div>
                </Content>
            </Layout>
        )
    }
}

export default connect(( { present: { userGroup } } ) => ({ userGroup }))(UserGroupManagement);