onlineUser.js

import React,{Component} from 'react';
import './style.less';
import {Table,Input,Form,Button,Row,Col,Modal,message,Popover} from 'antd';
import WhiteBar from '../../components/Common/WhiteBar';
import { API_SYS_MONITOR } from '@src/Api';
import axios from '@src/axios/index';
import Utils from '@src/utils/utils';
import storage from '@src/utils/localStorage'

export default class AccessLog extends Component {
	state = {
		/* 在线用户列表 */
		dataList: [],
		pagination: {},
		isLoading: true,
		expandStatus: false,
		btnAuth: null,
		isShowOpt: true,
	}

	componentWillMount() {
    const btnAuth = storage.get('btnAuth')
    this.setState({btnAuth})
    if(
      btnAuth.indexOf('kickOutOnlineUser') === -1){
        this.setState({isShowOpt: false})
      }
  }
	
	// 查询页数和数量配置
	params = {
	    page: 1,
	    pageSize: 10
	}
	componentDidMount () {
		this.getOnlineUser();
	}
	// 获取在线人数
	getOnlineUser = (searchData) => {
		this.setState({isLoading: true});
		let _this = this;
		axios.ajax({
			url: API_SYS_MONITOR.getOnlineUsers,
			data: {
				...searchData,
				pageSize: this.params.pageSize,
				pageNum: this.params.page
			}
		}).then((res) => {
			this.setState({isLoading: false});
			let dataList = res.records.map((item) => {
				return {...item,key: item.uid};
			});
			this.setState({
    			dataList: dataList,
    			pagination: Utils.pagination(res, (current) => {
		            _this.params.page = current
		            _this.setState({isLoading: true});
		            this.getOnlineUser();
		        })
    		});
		});
	}
	// 查询
	search = (searchData) => {
		this.params.page = 1;
		this.getOnlineUser(searchData);
	}
	// 重置
	reset = () => {
		this.params.page = 1;
		this.getOnlineUser();
	}
	// 踢出在线用户确认弹框
	conDeleteOnlineUser = (item,uid,userName) => {
		let _this = this;
		if (JSON.parse(localStorage.getItem('userInfo')).id == uid) {
			message.warn('不能踢出自己');
			return;
		}
		Modal.confirm({
			title: `是否踢出在线用户:${userName}`,
			okText: '确定',
			cancelText: '取消',
			onOk () {
				_this.deteleOnlineUser(uid);
			},
			onCancel () {
				console.log('取消');
			}
		});
	}
	// 踢出在线用户
	deteleOnlineUser = (uid) => {
		axios.ajax({
			url: API_SYS_MONITOR.deleteUser,
			data: {userId: uid}
		}).then((res) => {
			if (res) {
				// 踢出成功
				message.success('踢出成功!');
				this.getOnlineUser();
			} else {
				// 踢出失败
				message.warn('踢出失败!');
			}
		});
	}
	// 对名字判断过长时进行截取处理
    judgeStr (str) {
        if (str.length >= 8) {
            return (<Popover placement="bottom" content={str}>{str.slice(0,8) + '...'}</Popover>)
        } else {
            return str;
        }
		}
	// 展开条件
	expandMenu = ()=> {
		this.setState({
			expandStatus: !this.state.expandStatus,
		})
	}
	

	render () {
		const columns = [
			{title: '用户名称', dataIndex: 'userName', key: 'userName',className: 'tdWidth pLeft',align: 'left',
            render: (userName) => {
				return Utils.formatTableColumn(userName);
			}},
			{title: '创建时间', dataIndex: 'registerTime', key: 'registerTime', render: (registerTime) => {
				return Utils.formateDateToDetail(registerTime,'seconds');
			}},
			{title: '最后访问时间', dataIndex: 'loginTime', key: 'loginTime', render: (loginTime) => {
				return Utils.formateDateToDetail(loginTime,'seconds');
			}},
			{title: '客户主机', dataIndex: 'ipHost', key: 'ipHost'},
			{title: '账户类型', dataIndex: 'type', key: 'type', render: (type) => {
				return {'1': '内勤', '2': '外勤'}[type];
			}},
			{title: '设备类型', dataIndex: 'deviceType', key: 'deviceType', render: (deviceType) => {
				return {'1': 'IPHONE', '2': 'IPAD', '3': 'ANDROID', '4': 'ANDROID_PAD', '5': 'PC','6':'WE_CHAT'}[deviceType]
			}},
			
		];
		if (this.state.isShowOpt) {
			columns.push(
				{
					title: '操作', 
					key: 'action',
					className:'pRight',
									align: 'right',
					render: (item) => {
						let {uid,userName} = item;
						return (
							
								this.state.btnAuth.indexOf('kickOutOnlineUser') !== -1 ? 
								<Button onClick={(item) => {this.conDeleteOnlineUser(item,uid,userName)}}>
									踢出在线用户
								</Button>
								: ''
							
						
						);
					}
				}
			)
		}

		return (
			<div className="com-onlineUsers">
				<div className="searchWrap">
					<WhiteBar title="在线用户" />
					<div className='expandMenu iconfont icon-chazhaobiaodanliebiao' onClick={this.expandMenu} ></div>
					{ 
						this.state.expandStatus ? 
						<SearchForm search={this.search} reset={this.reset} />
						: ''
					}    
				</div> 
				
				<WhiteBar title="详细数据" />
				<div className="data-wrapper">
				<div style={{minHeight: '500px' }}>           
					<Table 
						loading={this.state.isLoading}
						dataSource={this.state.dataList}
						pagination={this.state.pagination}
						columns={columns}>
					</Table>
				</div>
				</div>
			</div>
		);
	}
}


// 查询表单
const SearchForm = Form.create()(
	class extends Component {
		// 搜索
		search = () => {
			let searchData = this.props.form.getFieldsValue();
			this.props.search(searchData);
		}
		// 重置
		reset = () => {
			this.props.form.resetFields();
			this.props.reset();
		}
		
		render () {
			const FormItem = Form.Item;
			const {getFieldDecorator} = this.props.form;
			return (
				<div className="com-searchForm">
					<Form layout="vertical">
						<Row gutter={10}>
							<Col span={4}>
								<FormItem label="在线用户">
									{
										getFieldDecorator('username',{
											rules: []
										})(<Input type="text" placeholder="用户名" />)
									}
								</FormItem>
							</Col>
							<Col span={5}>
								<FormItem style={{ marginTop: 28, }}>
									<Button onClick={this.search} style={{background: '#00BB29',color:'#fff'}}>查询</Button>
									<Button onClick={this.reset} style={{marginLeft: 10,background:'#ED1719',color:'#fff'}}>重置</Button>
								</FormItem>
							</Col>
						</Row>
					</Form>
				</div>
			);
		}
	}
);