sy/src/pages/systemmanger/DayRecord.vue

<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>系统管理</el-breadcrumb-item>
			<el-breadcrumb-item>日志管理</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="searchBox">
			<el-input placeholder="请输入用户名" size="mini" suffix-icon="el-icon-search" v-model="userName"></el-input>
			<el-date-picker
				size="mini"
				v-model="timeRange"
				type="daterange"
				range-separator="至"
				start-placeholder="开始日期"
				end-placeholder="结束日期"
				@change="DateChange"
			></el-date-picker>
		</div>
		<el-card class="box-card">
			<el-table :data="tableData" stripe style="width: 100%" empty-text="暂无数据">
				<el-table-column prop="log_time" label="时间"></el-table-column>
				<el-table-column prop="log_user" label="用户"></el-table-column>
				<el-table-column prop="log_ip" label="用户IP"></el-table-column>
				<el-table-column prop="log_desc" label="操作记录"></el-table-column>
			</el-table>
			<el-pagination
				background
				layout="prev, pager, next"
				:total="nums"
				:current-page="page"
				@current-change="changePage"
			></el-pagination>
		</el-card>
	</div>
</template>

<script>
import '@/plugin/flexible.js'
export default {
	data() {
		return {
			timeRange: '',
			userName: '',
			page: 1,
			// totalNum: 20,
			tableData: [],
			fullHeight: document.documentElement.clientHeight, //自适应高度
			nums: 1,
			Str: '', //转换后的开始时间
			end: '' //转换后的结束时间
		}
	},
	watch: {
		fullHeight(val) {
			//监控浏览器高度变化
			if (!this.timer) {
				this.fullHeight = val
				this.timer = true
				let that = this
				setTimeout(function () {
					//防止过度调用监测事件，导致卡顿
					that.timer = false
				}, 400)
			}
		}
	},
	methods: {
		//动态获取浏览器高度
		get_boderHeight() {
			const that = this
			window.onresize = () => {
				return (() => {
					window.fullHeight = document.documentElement.clientHeight
					that.fullHeight = window.fullHeight - 128
					console.log(that.fullHeight)
				})()
			}
		},
		// 时间筛选请求数据
		DateChange() {
			// 开始时间
			let date = new Date(this.timeRange[0])
			let Str =
				date.getFullYear() +
				'-' +
				(date.getMonth() + 1) +
				'-' +
				date.getDate() +
				' ' +
				date.getHours() +
				':' +
				date.getMinutes() +
				':' +
				date.getSeconds()
			Str = Str.replace(' 0:0:0', '')
			this.Str = Str

			// 结束时间
			let dateA = new Date(this.timeRange[1])
			let end =
				dateA.getFullYear() +
				'-' +
				(dateA.getMonth() + 1) +
				'-' +
				dateA.getDate() +
				' ' +
				dateA.getHours() +
				':' +
				dateA.getMinutes() +
				':' +
				dateA.getSeconds()
			end = end.replace(' 0:0:0', '')
			this.end = end

			this.listData(1, this.userName, Str, end)
		},

		// 点击下一页请求数据
		changePage(e) {
			var Str = this.Str
			var end = this.end
			this.listData(e, this.userName, Str, end)
		},

		//列表数据请求
		listData(page, uname, time_begin, time_end) {
			let that = this
			let postData = that.qs.stringify({
				page: page, //页数
				uname: uname, //用户名
				time_begin: time_begin, //开始时间
				time_end: time_end //结束时间
			})
			that
				.$axios({
					method: 'post',
					url:
						'api/api_gateway?method=pest.warning_record.log_list',
					data: postData
				})
				.then((res) => {
					console.log(res.data.data)
					var data = res.data.data
					that.tableData = data.data
					var num = data.nums
					that.nums = num
				})
				.catch((err) => {
					console.log(err)
				})
		}
	},
	created() {},
	mounted() {
		this.get_boderHeight() //自适应
		this.listData(this.page, '', '', '') //列表数据请求
	}
}
</script>

<style lang='less' scoped>
.searchBox {
	display: flex;
	margin-bottom: 20px;
	.el-input {
		width: 222px;
		margin-right: 20px;
	}
}
</style>