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;