kede-HN-officialWeb-client/js/component/administration/business/userLibrary.jsx

import { Component } from 'react';
import { Input, Select, Spin, Table, message, Button } from 'antd';

class UserLibrary extends Component {
	constructor(props) {
		super(props);
		this.state = {
			loading: false,
			dataSource: [],
			pagination: {
				defaultCurrent: 1,
				defaultPageSize: 10,
				showQuickJumper: true,
				pageSize: 10,
				onChange: function(page) {
					this.loadData(page);
					this.setState({
						selectedRowKeys: []
					});
				}.bind(this),
				showTotal: function(total) {
					return '共' + total + '条数据';
				}
			},
			columns: [
				{
					title: '用户名',
					dataIndex: 'nickname',
					key: 'nickname'
				},
				{
					title: '手机号码',
					dataIndex: 'mobile',
					key: 'mobile'
				},
				{
					title: '用户类型',
					dataIndex: 'type',
					key: 'type',
					render: (text) => {
						return text == '1' ? '企业用户':text=='0'? '个人用户':'未认证';
					}
				},
				{
					title: '注册时间',
					dataIndex: 'createTime',
					key: 'createTime'
				}
			]
		};
	}
	loadData(pageNo) {
        this.state.data = [];
        this.setState({
            page:pageNo,
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/user/info",
            data: {
                pageNo: pageNo || 1,
                pageSize: this.state.pagination.pageSize,
                type: this.state.type, //需求名称
				username: this.state.username,
				mobile:this.state.mobile
            },
            success: function (data) {
                let theArr = [];
                if (!data.data || !data.data.list) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    };
                } else {
                    for (let i = 0; i < data.data.list.length; i++) {
                        let thisdata = data.data.list[i];
                        theArr.push({
                            key: i,
                            id: thisdata.id,
                            type: thisdata.type, //编号
							nickname: thisdata.nickname,
							username:thisdata.username,
							mobile: thisdata.mobile,
							email:thisdata.email,
                            createTime:thisdata.createTime?(new Date(thisdata.createTime)).toLocaleString():''
                        });
                    };
                };
                this.state.pagination.current = data.data.pageNo;
                this.state.pagination.total = data.data.totalCount;
                if(data.data&&data.data.list&&!data.data.list.length){
					this.state.pagination.current=0
					this.state.pagination.total=0
				};
                this.setState({
                    total:data.data.totalCount,
                    dataSource: theArr,
                    pagination: this.state.pagination
                });
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    }
	search() {
		this.loadData();
	}
	reset() {
		this.state.username = '';
		this.state.type = undefined;
		this.state.mobile = '';
		this.loadData();
	}
	componentWillMount() {
		this.loadData();
	}
	render() {
		const rowSelection = {
			selectedRowKeys: this.state.selectedRowKeys,
			onChange: (selectedRowKeys, selectedRows) => {
				this.setState({
					selectedRows: selectedRows.slice(-1),
					selectedRowKeys: selectedRowKeys.slice(-1)
				});
			}
		};
		return (
			<div className="user-content">
				<div className="content-title">
					<div className="content-title">
						<span>用户库</span>
					</div>
					<div className="user-search">
						<Input
							style={{ marginRight: 10 }}
							value={this.state.username}
							placeholder="用户名称"
							onChange={(e) => {
								this.setState({ username: e.target.value });
							}}
						/>
						<Input
							style={{ marginRight: 10 }}
							value={this.state.mobile}
							placeholder="手机号码"
							onChange={(e) => {
								this.setState({ mobile: e.target.value });
							}}
						/>
						<Select
							value={this.state.type}
							style={{ width: 150 }}
							placeholder="用户类型"
							onChange={(e) => {
								this.setState({ type: e });
							}}
						>
							<Select.Option value="0">个人用户</Select.Option>
							<Select.Option value="1">企业用户</Select.Option>
						</Select>
						<Button type="primary" onClick={this.search.bind(this)} style={{ marginRight: 10 }}>
							搜索
						</Button>
						<Button onClick={this.reset.bind(this)}>重置</Button>
					</div>
					<div className="patent-table">
						<Spin spinning={this.state.loading}>
							<Table
								columns={this.state.columns}
								dataSource={this.state.dataSource}
								rowSelection={rowSelection}
								pagination={this.state.pagination}
							/>
						</Spin>
					</div>
				</div>
			</div>
		);
	}
}

export default UserLibrary;