log_manage.vue 4.13 KB
<template>
  <div class="innnerBox">
		   <el-col :span="22">
			  <el-form ref="form" label-width="80px" inline>
					  <el-form-item label="用户名" >
						   <span class="inputBox">
							 <el-input placeholder="请输入用户名" v-model="conditions.username_like"></el-input>
						   </span>
					  </el-form-item>
						<el-form-item label="起始时间">
							  <span class="dateBox">
								  <el-date-picker
								   v-model="dates"
								   value-format="yyyy-MM-dd HH:mm:ss"
								    :default-time="['00:00:00', '23:59:59']"
								   type="datetimerange"
								   range-separator="至"
								   start-placeholder="开始日期"
								   end-placeholder="结束日期">
								 </el-date-picker>
							  </span>
						  </el-form-item>
			  </el-form>
		  </el-col>
		   <el-col :span="2">
					<el-button type="primary" style="" @click="query" class="block">查询</el-button>
		   </el-col>
		  <div  style="">
			  <el-table
			       :data="tableData"
				   :height="tableHeight"
				   stripe
				   border>
			     <el-table-column
			     align="center"
			       prop="num"
					:formatter="numFormatter"
			       label="序号">
			     </el-table-column>
			       <el-table-column
			         prop="log_type"
			          align="center"
					  :formatter="typeFormatter"
			         label="日志类型">
			       </el-table-column>
			         <el-table-column
			         prop="log_time"
			          align="center"
			         label="操作时间">
			       </el-table-column>
			        <el-table-column
			         prop="user_name"
			          align="center"
			         label="操作用户名">
			       </el-table-column>
			        <el-table-column
			         prop="client_ip"
			          align="center"
			         label="操作用户IP地址">
			       </el-table-column>
				   <el-table-column
				     prop="log_content"
				      align="center"
				     label="操作内容">
				   </el-table-column>
			  </el-table>
				<div style="margin-top: 28px;">
					<el-pagination
					style="float: right;"
					  background
					  prev-text="上一页"
					  next-text="下一页"
					   :page-sizes="[30, 50, 100, 200]"
					  layout="prev, pager, next,sizes"
					  :current-page="page"
					  @size-change="handleSizeChange"
					  @current-change="handleCurrentChange"
					  :total="total">
					</el-pagination>
					<div style="clear: both;"></div>
				</div>
		  </div>
  </div>
</template>
<script>
	export default {
		data(){
			let start_dt = this.$moment().format('YYYY-MM-DD')+' 00:00:00';
			let end_dt = this.$moment().format('YYYY-MM-DD')+' 23:59:59';
			return{
				dates:[ start_dt,end_dt ],
				conditions: {
					start_dt:start_dt,
					end_dt:end_dt,
					username_like:''
				},
				tableData:[],
				total:0,
				page:1,
				pageSize:30,
				tableHeight:window.opsTableHeight
			}
		},
		watch:{
			dates(val){
				this.conditions.start_dt=val[0];
				this.conditions.end_dt=val[1];
			}
		},
		components:{},
		mounted(){
			this.getData()
		},
		methods:{
			numFormatter(row, column, cellValue, index) {
				return (index+1)*this.page;
			},
			typeFormatter(row, column, cellValue, index){
				if(cellValue==1){
					return '系统日志'
				}else if(cellValue==0){
					return '操作日志'
				}else{
					return '无'
				}
			},
			handleSizeChange(val) {
				this.pageSize=val;
				this.getData();
			},
			handleCurrentChange(val) {
				this.page=val;
				this.getData();
			  },
			query(){
				this.getData();
			},
			getData(){
				this.tableData=[];
				let offset = (this.page - 1) * this.pageSize;
				let search_params = {
					limit: this.pageSize,
					offset: offset,
					start_time: this.$moment(this.conditions.start_dt).utc().format('YYYY-MM-DD HH:mm:ss'),
					end_time:this.$moment(this.conditions.end_dt).utc().format('YYYY-MM-DD HH:mm:ss'),
					username_like: this.conditions.username_like ? this.conditions.username_like.replace(/\s\s*/g, '') : this.conditions.username_like
				}
				this.$api.ops.logList(search_params
				).then((res)=>{
					this.total=res.total_num;
					this.tableData = res.list_data;
				}).catch((err)=>{
					
				})
			},
		},
	}
</script>
<style lang="scss" scoped>
</style>