accessLog.js

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


export default class AccessLog extends Component {
	state = {
		/* 请求数据 */
		dataList: [],
		pagination: {},
		isLoading: true,
		searchData: {},
		expandStatus: false,
	}
	// 查询页数和数量配置
	params = {
	    page: 1,
	    pageSize: 10
	}
	
	// 展开条件
  expandMenu = ()=> {
    this.setState({
      expandStatus: !this.state.expandStatus,
    })
	}
	
	componentDidMount () {
		this.getLogs();
	}
	// 查询
	search = (searchData) => {
		this.params.page = 1;
		this.getLogs(searchData);
	}
	// 重置
	reset = () => {
		this.params.page = 1;
		this.getLogs();
	}
	// 获取日志列表
	getLogs = (searchData) => {
		this.setState({isLoading: true});
		axios.ajax({
			url: API_SYS_MONITOR.getSysLogPageListByCondition,
			data: {
				...searchData,
				pageNum: this.params.page,
        		pageSize: this.params.pageSize
			}
		}).then((res) => {
			
			this.setState({isLoading: false});
			let _this = this;
			let dataList = []
			if(res && res.records && res.records.length > 0 ) {
				dataList= res.records.map((item,index) => {
					return {...item,key: index};
				});
			}

			this.setState({
    			dataList: dataList,
    			pagination: Utils.pagination(res, (current) => {
		            _this.params.page = current;
		            _this.setState({isLoading: true});
		            this.getLogs(searchData);
		        })
    		});
		});
	}

	
	render () {
		const columns = [
			{title: '序号', width: 50,  dataIndex: 'key', key: 'key', align: 'left',
           className:'pLeft',render: (key) => {
				return (this.params.page-1)*10 + (key+1);
			}},

			{title: '日志标题', width: 100,  dataIndex: 'logTitle',className: 'tdWidth', key: 'logTitle',render: (logTitle) => {
				return Utils.formatTableColumn(logTitle);
			}},
			{title: '请求地址', width: 250, dataIndex: 'requestUrl', key: 'requestUrl',className: 'tdWidth',render: (requestUrl) => {
				return Utils.formatTableColumn(requestUrl);
			}},
			{title: '传入参数', width: 300, dataIndex: 'requestData', key: 'requestData',className: 'tdWidth',render: (requestData) => {
				return Utils.formatTableColumn(requestData);
			}},
			{title: '日志类型',width:100, dataIndex: 'logType', key: 'logType',render: (logType) => {
				return {'1': '查询日志','2': '修改日志','3':'登录登出'}[logType]
			}},
			{title: '操作用户',width:100, dataIndex: 'loginName', key: 'loginName'},
			{title: '是否异常',width:100, dataIndex: 'errorInfo', key: 'errorInfo',render: (errorInfo) => {
				return (!errorInfo ? '正常' : '异常');
			}},
			{title: '操作时间',width:120, dataIndex: 'beginTime', key: 'beginTime',render: (beginTime) => {
				return Utils.formateDateToDetail(beginTime,'seconds');
			}},
			{title: '客户端IP',width:100, dataIndex: 'requestIp', key: 'requestIp'},
			{title: '设备名称',width:100, dataIndex: 'requestDevice', key: 'requestDevice', render: (requestDevice) => {
				return {'1': 'IPHONE', '2': 'IPAD', '3': 'ANDROID', '4': 'ANDROID_PAD', '5': 'PC','6':'WE_CHAT'}[requestDevice]
			}},
			{title: '响应时间',width:100, dataIndex: 'useTime', key: 'useTime',render: (useTime) => {
				return useTime + '毫秒';
			}},
			{title: '请求方式',width:100, dataIndex: 'httpMethod', key: 'httpMethod', className:'pRight',
        align: 'right'}
		];
		return (
			<div className="com-accessLog">
			<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="detail-wrapper" style={{minHeight: 500}}>
					<Table 
					dataSource={this.state.dataList}
					columns={columns} 
					pagination={this.state.pagination}
					loading={this.state.isLoading}

					scroll={{ x: '160%' }}>

					>

					</Table>
				</div>
			</div>
		);
	}
}

/* 查询表单组件 */
const SearchForm = Form.create()(
	class extends Component {
		// 查询
		search = () => {
			let searchData = this.props.form.getFieldsValue()
			// 校验日期选择
			if (searchData.beginTime && !searchData.endTime) {
				Message.warn('请选择结束时间');
				return;
			} else if (!searchData.beginTime && searchData.endTime) {
				Message.warn('请选择开始时间');
				return;
			}
			// 判断日期并转换时间格式
			if (searchData.beginTime && searchData.endTime) {
				if (new Date(searchData.endTime._d) < new Date(searchData.beginTime._d)) {
					Message.warn('选择结束时间要大于选择开始时间');
					return;
				} else {
					searchData.beginTime = Utils.formateDateToDetail(searchData.beginTime._d,'standard');
					searchData.endTime = Utils.formateDateToDetail(searchData.endTime._d,'standard');
				}
			}
			this.props.search(searchData);
		}
		// 重置
		reset = () => {
			this.props.form.resetFields();
			this.props.reset();
		}
		render () {
			const FormItem = Form.Item;
			const Option = Select.Option;
			const {getFieldDecorator}  = this.props.form;
			return (
				<div className="com-searchForm">
					<Form layout="vertical">
						<Row gutter={16}>
							<Col span={4}>
								<FormItem label="日志标题">
									{
										getFieldDecorator('logTitle',{
											rules: []
										})(<Input type="text" placeholder="日志标题" />)
									}
								</FormItem>
							</Col>
							<Col span={4}>
								<FormItem label="请求地址">
									{
										getFieldDecorator('requestUrl',{
											rules: []
										})(<Input type="text" placeholder="请求地址" />)
									}
								</FormItem>
							</Col>
							<Col span={4}>
								<FormItem label="日志类型">
									{
										getFieldDecorator('logType',{
											rules: []
										})(<Select  placeholder="日志类型">
											<Option value={1}>查询日志</Option>
											<Option value={2}>修改日志</Option>
											<Option value={3}>登录登出</Option>
										</Select>)
									}
								</FormItem>
							</Col>
							<Col span={4}>
								<FormItem label="是否异常">
									{
										getFieldDecorator('errorFlag',{
											rules: []
										})(<Select  placeholder="是否异常">
											<Option value={'normal'}>正常</Option>
											<Option value={'abnormal'}>异常</Option>
										</Select>)
									}
								</FormItem>
							</Col>
						</Row>
						<Row gutter={16}>
							<Col span={4}>
								<FormItem label="客户端IP">
									{
										getFieldDecorator('requestIp',{
											rules: []
										})(<Input type="text" placeholder="客户端IP" />)
									}
								</FormItem>
							</Col>
							<Col span={4}>
								<FormItem label="操作时间">
									{
										getFieldDecorator('beginTime',{
											rules: []
										})(
					                      	<DatePicker
					                      	style={{width:'100%'}}
					                      	showTime
  											format="YYYY-MM-DD HH:mm:ss"
					                      	placeholder="开始时间" />
										)
									}
								</FormItem>
							</Col>
							<Col span={1} style={{paddingTop: 32,width: 30}}>
								<span style={{marginTop: 29}}>至</span>
							</Col>
							<Col span={4}>
								<FormItem style={{marginTop: 29}}>
									{
										getFieldDecorator('endTime',{
											rules: []
										})(
					                      	<DatePicker 
					                      	style={{width: '100%'}}
					                      	showTime
					                      	format="YYYY-MM-DD HH:mm:ss"
					                      	placeholder="结束时间" />
										)
									}
								</FormItem>
							</Col>
							<Col span={4}>
								<FormItem style={{marginTop: 29}}>
									<Button onClick={this.search} style={{background: '#00BB29',color:'#fff'}}>查询</Button>
									<Button onClick={this.reset} style={{marginLeft: 15,background:'#ED1719',color:'#fff'}}>重置</Button>
								</FormItem>
							</Col>
						</Row>
					</Form>
				</div>
			);
		}
	}
);