antissoft / antissoft.dati.admin

<template>
	<div style="padding: 10px">
		<div class="seetingsDiv" style="">
			<div class="flex" style="margin-top: 10px">
				<el-form :inline="true" class="demo-form-inline">
					<el-form-item label="关键字">
						<el-input placeholder="输入关键字搜索" v-model="queryModel.keyword"></el-input>
					</el-form-item>
					<el-form-item label="用户">
						<el-input placeholder="用户" v-model="queryModel.username"></el-input>
					</el-form-item>
					<el-form-item label="日志类型">
						<el-select v-model="queryModel.type" placeholder="日志类型">
							<el-option label="全部" value=""></el-option>
							<el-option label="用户操作" value="1"></el-option>
							<el-option label="系统操作" value="2"></el-option>
							<el-option label="系统信息" value="3"></el-option>
							<el-option label="底层信息" value="4"></el-option>
						</el-select>
					</el-form-item>

				</el-form>
				<el-button type="success" @click="search">搜索</el-button>
			</div>
			<div class="flex align-center" style="margin-top: 10px">
				

			</div>
		</div>
		<div class="main-box">
			<el-table ref="mytable" :data="table_data" style="width: 100%;height:calc(100vh - 260px)" border
				@selection-change="handleSelectionChange">
				<el-table-column v-if="radio" type="index" width="50"></el-table-column>
				<el-table-column v-if="selection" type="selection" width="55"></el-table-column>


				<el-table-column align="center" width="120" label="类型">
					<template slot-scope="scope"> 
 
						 <div>
							    <span v-if="scope.row.TypeEnum == 1">用户操作</span>
								<span v-else-if="scope.row.TypeEnum == 2">系统操作</span>
								<span v-else-if="scope.row.TypeEnum == 3">系统信息</span>
								<span v-else-if="scope.row.TypeEnum == 4">底层信息</span>
								<span v-else >系统</span> 
						 </div>
					</template>
				</el-table-column>
				<el-table-column align="center" v-for="(item, index, key) in table_columns" 
					:item="item" :key="key" :index="index" :label="item.label">
					<template slot-scope="scope">
						<el-input v-if="scope.row.edit" size="small" v-model="scope.row[item.prop]"
							:placeholder="'请输入' + item.label">
						</el-input>
						<span v-if="!scope.row.edit">{{ scope.row[item.prop] }}</span>
					</template>
				</el-table-column>

			</el-table>

		</div>

		<div class="page-box">
			<el-pagination background layout="prev, pager, next" :total="queryResult.totalCount"
				@current-change="currentchange">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import {
		GetList,
	} from "@/api/log";
	import { formatTime } from '@/utils/util'
	export default {
		data() {
			return {
				currentFilePath: "",
				queryResult: {},
				queryModel: {
					pageIndex: 1,
					pageSize: 20,
				},
				query: {},
				new_date_json: {}, //数据结构
				multipleSelection: [], //复选框，数据
				is_edit: true, //是否可编辑
				is_delete: true, //是否可删除
				selection: true, //是否需要复选框
				radio: false, //单选变色
				space_color: true, //隔行变色
				//表头信息
				table_columns: [{
					prop: "OperationTitle",
					label: "内容",
				},
				{
					prop: "OperationIp",
					label: "操作IP地址",
				},
				{
					prop: "OperationTime",
					label: "操作时间",
				},
				{
					prop: "UserName",
					label: "操作用户",
				},
				],
				//表格数据
				table_data: [],
				dialogVisible: false,
				form: {},
			};
		},
		methods: {

			search() {
				this.queryModel.pageIndex = 1;
				this.getList();
			},
			getList() {
				GetList(this.queryModel).then((res) => {
					this.queryResult = res.data;

					this.table_data = res.data.data.map(t => {
						t.OperationTime = formatTime(t.OperationTime, 'yyyy-MM-dd HH:mm:ss');
						return t;
					});
				});
			},
			//隔行变色
			tableRowClassName() {
				//选取DOM节点
				var trs = this.$refs.mytable.$el
					.getElementsByTagName("tbody")[0]
					.getElementsByTagName("tr");
				for (var i in trs) {
					if (i % 2 == 0) {
						//当隔行变色未true时改变颜色
						if (this.space_color) {
							trs[i].style.backgroundColor = "#f0f9eb";
						} else {
							trs[i].style.backgroundColor = "";
						}
					}
				}
			},

			//多选框
			handleSelectionChange(val) {
				this.multipleSelection = val;
				console.log("selection:", this.multipleSelection);
			},


			//删除
			handleDelete(index, row) {
				console.log(index, row);

				this.table_data.splice(index, 1);
				UserInfo_Delete(row.id);
				this.$message({
					message: "删除成功！",
					type: "success",
				});
			},

			currentchange(page) {
				this.queryModel.pageIndex = page;
				this.getList();
			},
		},
		created() {
			this.getList();
		},
		mounted: function () {
			//确保方法在页面渲染后调用
			this.$nextTick(function () {
				/////方法
				this.tableRowClassName();
			});
		},
		watch: {
			space_color: function () {
				//监听数据变化
				this.$nextTick(function () {
					/////方法
					this.tableRowClassName();
				});
			},
			table_data: function () {
				//监听数据变化f
				this.$nextTick(function () {
					/////方法
					this.tableRowClassName();
				});
			},
		},
	};
</script>
<style scoped>
	/deep/.el-table__body-wrapper {
		height: 92% !important;
	}
</style>
<style lang="scss" scoped>
	.main-box {
		display: flex;
	}

	.doc-view {
		margin-left: 10px;
		width: 100%;
		flex: 1;
		overflow: hidden;
	}

	.el-table__expanded-cell {
		padding: 10px;
	}

	.demo-table-expand {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
		padding: 20px;
		border-radius: 10px;
	}

	.demo-table-expand .el-form-item {
		margin-bottom: 10px !important;
		min-width: 20%;
		max-width: 50%;
	}

	.demo-form-inline {
		display: flex;
		align-items: center;
	}

	.el-form--inline .el-form-item {
		display: flex;
		align-items: center;
		margin-bottom: 0;
	}

	.aligin-center {
		align-items: center;
	}

	.seetingsDiv {
		display: flex;
		align-items: center;
		width: 100%;
		height: auto;
		padding: 30px;
		background: #efefef;
		/* line-height: 60px; */
		border-radius: 5px;
		box-shadow: 0 0 5px #cdcdcd;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-bottom: 20px;
	}

	.seetingsDiv button {
		height: 40px;
		background-color: #304156;
		border: 0px;
		margin-left: 10px;
		box-shadow: 0 0 5px #cdcdcd;
		float: none;
		margin-right: 10px;
		margin-top: 0;
	}
</style>