Jcdm042-Mes.git

懒羊羊

2024-01-31 e57a8990ae56f657a59c435a0613c5f7a8728003

提交 \| 用户 \| 时间
e57a89	1	<template>
懒	2	<div class="app-container">
	3	<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
	4	<el-form-item label="操作地址" prop="operIp">
	5	<el-input
	6	v-model="queryParams.operIp"
	7	placeholder="请输入操作地址"
	8	clearable
	9	style="width: 240px;"
	10	@keyup.enter.native="handleQuery"
	11	/>
	12	</el-form-item>
	13	<el-form-item label="系统模块" prop="title">
	14	<el-input
	15	v-model="queryParams.title"
	16	placeholder="请输入系统模块"
	17	clearable
	18	style="width: 240px;"
	19	@keyup.enter.native="handleQuery"
	20	/>
	21	</el-form-item>
	22	<el-form-item label="操作人员" prop="operName">
	23	<el-input
	24	v-model="queryParams.operName"
	25	placeholder="请输入操作人员"
	26	clearable
	27	style="width: 240px;"
	28	@keyup.enter.native="handleQuery"
	29	/>
	30	</el-form-item>
	31	<el-form-item label="类型" prop="businessType">
	32	<el-select
	33	v-model="queryParams.businessType"
	34	placeholder="操作类型"
	35	clearable
	36	style="width: 240px"
	37	>
	38	<el-option
	39	v-for="dict in dict.type.sys_oper_type"
	40	:key="dict.value"
	41	:label="dict.label"
	42	:value="dict.value"
	43	/>
	44	</el-select>
	45	</el-form-item>
	46	<el-form-item label="状态" prop="status">
	47	<el-select
	48	v-model="queryParams.status"
	49	placeholder="操作状态"
	50	clearable
	51	style="width: 240px"
	52	>
	53	<el-option
	54	v-for="dict in dict.type.sys_common_status"
	55	:key="dict.value"
	56	:label="dict.label"
	57	:value="dict.value"
	58	/>
	59	</el-select>
	60	</el-form-item>
	61	<el-form-item label="操作时间">
	62	<el-date-picker
	63	v-model="dateRange"
	64	style="width: 240px"
	65	value-format="yyyy-MM-dd HH:mm:ss"
	66	type="daterange"
	67	range-separator="-"
	68	start-placeholder="开始日期"
	69	end-placeholder="结束日期"
	70	:default-time="['00:00:00', '23:59:59']"
	71	></el-date-picker>
	72	</el-form-item>
	73	<el-form-item>
	74	<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
	75	<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
	76	</el-form-item>
	77	</el-form>
	78
	79	<el-row :gutter="10" class="mb8">
	80	<el-col :span="1.5">
	81	<el-button
	82	type="danger"
	83	plain
	84	icon="el-icon-delete"
	85	size="mini"
	86	:disabled="multiple"
	87	@click="handleDelete"
	88	v-hasPermi="['monitor:operlog:remove']"
	89	>删除</el-button>
	90	</el-col>
	91	<el-col :span="1.5">
	92	<el-button
	93	type="danger"
	94	plain
	95	icon="el-icon-delete"
	96	size="mini"
	97	@click="handleClean"
	98	v-hasPermi="['monitor:operlog:remove']"
	99	>清空</el-button>
	100	</el-col>
	101	<el-col :span="1.5">
	102	<el-button
	103	type="warning"
	104	plain
	105	icon="el-icon-download"
	106	size="mini"
	107	@click="handleExport"
	108	v-hasPermi="['monitor:operlog:export']"
	109	>导出</el-button>
	110	</el-col>
	111	<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
	112	</el-row>
	113
	114	<el-table ref="tables" v-loading="loading" :data="list" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
	115	<el-table-column type="selection" width="50" align="center" />
	116	<el-table-column label="日志编号" align="center" prop="operId" />
	117	<el-table-column label="系统模块" align="center" prop="title" :show-overflow-tooltip="true" />
	118	<el-table-column label="操作类型" align="center" prop="businessType">
	119	<template slot-scope="scope">
	120	<dict-tag :options="dict.type.sys_oper_type" :value="scope.row.businessType"/>
	121	</template>
	122	</el-table-column>
	123	<el-table-column label="操作人员" align="center" prop="operName" width="110" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']" />
	124	<el-table-column label="操作地址" align="center" prop="operIp" width="130" :show-overflow-tooltip="true" />
	125	<el-table-column label="操作地点" align="center" prop="operLocation" :show-overflow-tooltip="true" />
	126	<el-table-column label="操作状态" align="center" prop="status">
	127	<template slot-scope="scope">
	128	<dict-tag :options="dict.type.sys_common_status" :value="scope.row.status"/>
	129	</template>
	130	</el-table-column>
	131	<el-table-column label="操作日期" align="center" prop="operTime" width="160" sortable="custom" :sort-orders="['descending', 'ascending']">
	132	<template slot-scope="scope">
	133	<span>{{ parseTime(scope.row.operTime) }}</span>
	134	</template>
	135	</el-table-column>
	136	<el-table-column label="消耗时间" align="center" prop="costTime" width="110" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']">
	137	<template slot-scope="scope">
	138	<span>{{ scope.row.costTime }}毫秒</span>
	139	</template>
	140	</el-table-column>
	141	<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
	142	<template slot-scope="scope">
	143	<el-button
	144	size="mini"
	145	type="text"
	146	icon="el-icon-view"
	147	@click="handleView(scope.row,scope.index)"
	148	v-hasPermi="['monitor:operlog:query']"
	149	>详细</el-button>
	150	</template>
	151	</el-table-column>
	152	</el-table>
	153
	154	<pagination
	155	v-show="total>0"
	156	:total="total"
	157	:page.sync="queryParams.pageNum"
	158	:limit.sync="queryParams.pageSize"
	159	@pagination="getList"
	160	/>
	161
	162	<!-- 操作日志详细 -->
	163	<el-dialog title="操作日志详细" :visible.sync="open" width="800px" append-to-body>
	164	<el-form ref="form" :model="form" label-width="100px" size="mini">
	165	<el-row>
	166	<el-col :span="12">
	167	<el-form-item label="操作模块：">{{ form.title }} / {{ typeFormat(form) }}</el-form-item>
	168	<el-form-item
	169	label="登录信息："
	170	>{{ form.operName }} / {{ form.operIp }} / {{ form.operLocation }}</el-form-item>
	171	</el-col>
	172	<el-col :span="12">
	173	<el-form-item label="请求地址：">{{ form.operUrl }}</el-form-item>
	174	<el-form-item label="请求方式：">{{ form.requestMethod }}</el-form-item>
	175	</el-col>
	176	<el-col :span="24">
	177	<el-form-item label="操作方法：">{{ form.method }}</el-form-item>
	178	</el-col>
	179	<el-col :span="24">
	180	<el-form-item label="请求参数：">{{ form.operParam }}</el-form-item>
	181	</el-col>
	182	<el-col :span="24">
	183	<el-form-item label="返回参数：">{{ form.jsonResult }}</el-form-item>
	184	</el-col>
	185	<el-col :span="8">
	186	<el-form-item label="操作状态：">
	187	<div v-if="form.status === 0">正常</div>
	188	<div v-else-if="form.status === 1">失败</div>
	189	</el-form-item>
	190	</el-col>
	191	<el-col :span="8">
	192	<el-form-item label="消耗时间：">{{ form.costTime }}毫秒</el-form-item>
	193	</el-col>
	194	<el-col :span="8">
	195	<el-form-item label="操作时间：">{{ parseTime(form.operTime) }}</el-form-item>
	196	</el-col>
	197	<el-col :span="24">
	198	<el-form-item label="异常信息：" v-if="form.status === 1">{{ form.errorMsg }}</el-form-item>
	199	</el-col>
	200	</el-row>
	201	</el-form>
	202	<div slot="footer" class="dialog-footer">
	203	<el-button @click="open = false">关闭</el-button>
	204	</div>
	205	</el-dialog>
	206	</div>
	207	</template>
	208
	209	<script>
	210	import { list, delOperlog, cleanOperlog } from "@/api/monitor/operlog";
	211
	212	export default {
	213	name: "Operlog",
	214	dicts: ['sys_oper_type', 'sys_common_status'],
	215	data() {
	216	return {
	217	// 遮罩层
	218	loading: true,
	219	// 选中数组
	220	ids: [],
	221	// 非多个禁用
	222	multiple: true,
	223	// 显示搜索条件
	224	showSearch: true,
	225	// 总条数
	226	total: 0,
	227	// 表格数据
	228	list: [],
	229	// 是否显示弹出层
	230	open: false,
	231	// 日期范围
	232	dateRange: [],
	233	// 默认排序
	234	defaultSort: {prop: 'operTime', order: 'descending'},
	235	// 表单参数
	236	form: {},
	237	// 查询参数
	238	queryParams: {
	239	pageNum: 1,
	240	pageSize: 10,
	241	operIp: undefined,
	242	title: undefined,
	243	operName: undefined,
	244	businessType: undefined,
	245	status: undefined
	246	}
	247	};
	248	},
	249	created() {
	250	this.getList();
	251	},
	252	methods: {
	253	/** 查询登录日志 */
	254	getList() {
	255	this.loading = true;
	256	list(this.addDateRange(this.queryParams, this.dateRange)).then( response => {
	257	this.list = response.rows;
	258	this.total = response.total;
	259	this.loading = false;
	260	}
	261	);
	262	},
	263	// 操作日志类型字典翻译
	264	typeFormat(row, column) {
	265	return this.selectDictLabel(this.dict.type.sys_oper_type, row.businessType);
	266	},
	267	/** 搜索按钮操作 */
	268	handleQuery() {
	269	this.queryParams.pageNum = 1;
	270	this.getList();
	271	},
	272	/** 重置按钮操作 */
	273	resetQuery() {
	274	this.dateRange = [];
	275	this.resetForm("queryForm");
	276	this.queryParams.pageNum = 1;
	277	this.$refs.tables.sort(this.defaultSort.prop, this.defaultSort.order)
	278	},
	279	/** 多选框选中数据 */
	280	handleSelectionChange(selection) {
	281	this.ids = selection.map(item => item.operId)
	282	this.multiple = !selection.length
	283	},
	284	/** 排序触发事件 */
	285	handleSortChange(column, prop, order) {
	286	this.queryParams.orderByColumn = column.prop;
	287	this.queryParams.isAsc = column.order;
	288	this.getList();
	289	},
	290	/** 详细按钮操作 */
	291	handleView(row) {
	292	this.open = true;
	293	this.form = row;
	294	},
	295	/** 删除按钮操作 */
	296	handleDelete(row) {
	297	const operIds = row.operId \|\| this.ids;
	298	this.$modal.confirm('是否确认删除日志编号为"' + operIds + '"的数据项？').then(function() {
	299	return delOperlog(operIds);
	300	}).then(() => {
	301	this.getList();
	302	this.$modal.msgSuccess("删除成功");
	303	}).catch(() => {});
	304	},
	305	/** 清空按钮操作 */
	306	handleClean() {
	307	this.$modal.confirm('是否确认清空所有操作日志数据项？').then(function() {
	308	return cleanOperlog();
	309	}).then(() => {
	310	this.getList();
	311	this.$modal.msgSuccess("清空成功");
	312	}).catch(() => {});
	313	},
	314	/** 导出按钮操作 */
	315	handleExport() {
	316	this.download('monitor/operlog/export', {
	317	...this.queryParams
	318	}, `operlog_${new Date().getTime()}.xlsx`)
	319	}
	320	}
	321	};
	322	</script>
	323