platform-bi-web/src/components/common/selectUserBox.jsx

/**
 * 人员选择器
 */
import React from 'react'
import { Modal, Row, Col, Select, Spin } from 'antd'
import * as service from '../../services/index'
import URLS from '../../constants/url'
const SelectOption = Select.Option

class AddGroupMemberBox extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            selectedUser: null,
            userData: [],
            fetching: false
        }
    }

    fetchUserData = (keyword) => {
        this.setState({ userData: [], fetching: true }, () => {
            const body = keyword || '';
            service.fetch({
                url: URLS.USER_QUERY,
                body: body,
            }).then(r => {
                if(!r.err && r.data.code > 0) {
                    return r;
                }else {
                    let obj = {};
                    throw obj;
                }
            }).then(r => {
                console.log('获得用户数据', body, r);
                const resData = r.data.data || [];
                this.setState({
                    userData: resData.map(d => ({
                        code: d.id,
                        name: d.name,
                        account: d.userName,
                        password: d.passWord,
                        role: d.role,
                        department: d.department,
                        post: d.post,
                    })),
                    fetching: false
                });
            }).catch(ex => {
                this.setState({
                    userData: [],
                    fetching: false
                });
                console.error('fetch error', ex);
            });
        });
    }

    render() {
        const { visibleBox, title, hideBox, okHandler, multiple } = this.props;
        const { userData, fetching } = this.state;

        return (
            <Modal
                className='addmember-box'
                title={title}
                visible={visibleBox}
                onOk={() => {
                    okHandler(this.state.selectedUser);
                    hideBox();
                }}
                onCancel={hideBox}
                maskClosable={false}
                destroyOnClose={true}
            >
                <Row type='flex'>
                    <Col span={24}>
                        <Select
                            style={{ width: '100%' }}
                            mode={ multiple ? 'multiple' : 'sigle'}
                            showSearch
                            filterOption={false}
                            labelInValue={true}
                            notFoundContent={fetching ? <Spin size="small" /> : '无'}
                            onSearch={(value) => {
                                const timeout = this.state.timeout;
                                timeout && window.clearTimeout(timeout);
                                this.setState({
                                    timeout: window.setTimeout(() => {
                                        this.fetchUserData(value)
                                    }, 500)
                                });
                            }}
                            onFocus={() => {
                                this.fetchUserData('');
                            }}
                            onChange={(value) => {
                                this.setState({
                                    selectedUser: {
                                        code: value.key,
                                        name: value.label
                                    }
                                });
                            }}
                        >
                            { userData.map((s, i) => {
                                return <SelectOption key={i} value={s.code}>{s.name}</SelectOption>
                            }) }
                        </Select>
                    </Col>
                </Row>
            </Modal>
        );
    }
}

export default AddGroupMemberBox;