iailab-plat-ui-vue2.git

houzhongjian

2024-07-11 759b1c71011abd6b58c37d2566f3f3c208c2f1b2

提交 \| 用户 \| 时间
759b1c	1	<template>
H	2	<div class="app-container">
	3	<!-- 搜索工作栏 -->
	4	<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
	5	<el-form-item label="用户编号" prop="userId">
	6	<el-input v-model="queryParams.userId" placeholder="请输入用户编号" clearable @keyup.enter.native="handleQuery"/>
	7	</el-form-item>
	8	<el-form-item label="用户类型" prop="userType">
	9	<el-select v-model="queryParams.userType" placeholder="请选择用户类型" clearable>
	10	<el-option v-for="dict in this.getDictDatas(DICT_TYPE.USER_TYPE)"
	11	:key="dict.value" :label="dict.label" :value="dict.value"/>
	12	</el-select>
	13	</el-form-item>
	14	<el-form-item label="应用名" prop="applicationName">
	15	<el-input v-model="queryParams.applicationName" placeholder="请输入应用名" clearable @keyup.enter.native="handleQuery"/>
	16	</el-form-item>
	17	<el-form-item label="请求地址" prop="requestUrl">
	18	<el-input v-model="queryParams.requestUrl" placeholder="请输入请求地址" clearable @keyup.enter.native="handleQuery"/>
	19	</el-form-item>
	20	<el-form-item label="请求时间" prop="beginTime">
	21	<el-date-picker v-model="queryParams.beginTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
	22	range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
	23	</el-form-item>
	24	<el-form-item label="执行时长" prop="duration">
	25	<el-input v-model="queryParams.duration" placeholder="请输入执行时长" clearable @keyup.enter.native="handleQuery"/>
	26	</el-form-item>
	27	<el-form-item label="结果码" prop="resultCode">
	28	<el-input v-model="queryParams.resultCode" placeholder="请输入结果码" clearable @keyup.enter.native="handleQuery"/>
	29	</el-form-item>
	30	<el-form-item>
	31	<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
	32	<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
	33	</el-form-item>
	34	</el-form>
	35
	36	<!-- 操作工具栏 -->
	37	<el-row :gutter="10" class="mb8">
	38	<el-col :span="1.5">
	39	<el-button type="warning" plain icon="el-icon-download" size="mini" :loading="exportLoading" @click="handleExport"
	40	v-hasPermi="['infra:api-access-log:export']">导出</el-button>
	41	</el-col>
	42	<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
	43	</el-row>
	44
	45	<!-- 列表 -->
	46	<el-table v-loading="loading" :data="list">
	47	<el-table-column label="日志编号" align="center" prop="id" />
	48	<el-table-column label="用户编号" align="center" prop="userId" />
	49	<el-table-column label="用户类型" align="center" prop="userType">
	50	<template v-slot="scope">
	51	<dict-tag :type="DICT_TYPE.USER_TYPE" :value="scope.row.userType"/>
	52	</template>
	53	</el-table-column>>
	54	<el-table-column label="应用名" align="center" prop="applicationName" />
	55	<el-table-column label="请求方法名" align="center" prop="requestMethod" />
	56	<el-table-column label="请求地址" align="center" prop="requestUrl" width="250" />
	57	<el-table-column label="请求时间" align="center" prop="beginTime" width="180">
	58	<template v-slot="scope">
	59	<span>{{ parseTime(scope.row.beginTime) }}</span>
	60	</template>
	61	</el-table-column>
	62	<el-table-column label="执行时长" align="center" prop="startTime">
	63	<template v-slot="scope">
	64	<span>{{ scope.row.duration }} ms</span>
	65	</template>
	66	</el-table-column>
	67	<el-table-column label="操作结果" align="center" prop="status">
	68	<template v-slot="scope">
	69	<span>{{ scope.row.resultCode === 0 ? '成功' : '失败(' + scope.row.resultMsg + ')' }}</span>
	70	</template>
	71	</el-table-column>
	72	<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
	73	<template v-slot="scope">
	74	<el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row,scope.index)"
	75	v-hasPermi="['infra:api-access-log:query']">详细</el-button>
	76	</template>
	77	</el-table-column>
	78	</el-table>
	79	<!-- 分页组件 -->
	80	<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
	81	@pagination="getList"/>
	82
	83	<!-- 查看明细 -->
	84	<el-dialog title="API 访问日志详细" :visible.sync="open" width="700px" append-to-body>
	85	<el-form ref="form" :model="form" label-width="100px" size="mini">
	86	<el-row>
	87	<el-col :span="24">
	88	<el-form-item label="日志主键：">{{ form.id }}</el-form-item>
	89	<el-form-item label="链路追踪：">{{ form.traceId }}</el-form-item>
	90	<el-form-item label="应用名：">{{ form.applicationName }}</el-form-item>
	91	<el-form-item label="用户信息：">
	92	{{ form.userId }} <dict-tag :type="DICT_TYPE.USER_TYPE" :value="form.userType"/> \| {{ form.userIp }} \| {{ form.userAgent}}
	93	</el-form-item>
	94	<el-form-item label="请求信息：">{{ form.requestMethod }} \| {{ form.requestUrl }} </el-form-item>
	95	<el-form-item label="请求参数：">{{ form.requestParams }}</el-form-item>
	96	<el-form-item label="开始时间：">
	97	{{ parseTime(form.beginTime) }} ~ {{ parseTime(form.endTime) }} \| {{ form.duration }} ms
	98	</el-form-item>
	99	<el-form-item label="操作结果：">
	100	<div v-if="form.resultCode === 0">正常</div>
	101	<div v-else-if="form.resultCode > 0">失败 \| {{ form.resultCode }} \|\| {{ form.resultMsg}}</div>
	102	</el-form-item>
	103	</el-col>
	104	</el-row>
	105	</el-form>
	106	<div slot="footer" class="dialog-footer">
	107	<el-button @click="open = false">关闭</el-button>
	108	</div>
	109	</el-dialog>
	110
	111	</div>
	112	</template>
	113
	114	<script>
	115	import { getApiAccessLogPage, exportApiAccessLogExcel } from "@/api/infra/apiAccessLog";
	116
	117	export default {
	118	name: "InfraApiAccessLog",
	119	components: {
	120	},
	121	data() {
	122	return {
	123	// 遮罩层
	124	loading: true,
	125	// 导出遮罩层
	126	exportLoading: false,
	127	// 显示搜索条件
	128	showSearch: true,
	129	// 总条数
	130	total: 0,
	131	// API 访问日志列表
	132	list: [],
	133	// 弹出层标题
	134	title: "",
	135	// 是否显示弹出层
	136	open: false,
	137	// 查询参数
	138	queryParams: {
	139	pageNo: 1,
	140	pageSize: 10,
	141	userId: null,
	142	userType: null,
	143	applicationName: null,
	144	requestUrl: null,
	145	duration: null,
	146	resultCode: null,
	147	beginTime: []
	148	},
	149	// 表单参数
	150	form: {},
	151	};
	152	},
	153	created() {
	154	this.getList();
	155	},
	156	methods: {
	157	/** 查询列表 */
	158	getList() {
	159	this.loading = true;
	160	// 执行查询
	161	getApiAccessLogPage(this.queryParams).then(response => {
	162	this.list = response.data.list;
	163	this.total = response.data.total;
	164	this.loading = false;
	165	});
	166	},
	167	/** 取消按钮 */
	168	cancel() {
	169	this.open = false;
	170	this.reset();
	171	},
	172	/** 表单重置 */
	173	reset() {
	174	this.form = {};
	175	this.resetForm("form");
	176	},
	177	/** 搜索按钮操作 */
	178	handleQuery() {
	179	this.queryParams.pageNo = 1;
	180	this.getList();
	181	},
	182	/** 重置按钮操作 */
	183	resetQuery() {
	184	this.resetForm("queryForm");
	185	this.handleQuery();
	186	},
	187	/** 详细按钮操作 */
	188	handleView(row) {
	189	this.open = true;
	190	this.form = row;
	191	},
	192	/** 导出按钮操作 */
	193	handleExport() {
	194	// 处理查询参数
	195	let params = {...this.queryParams};
	196	params.pageNo = undefined;
	197	params.pageSize = undefined;
	198	// 执行导出
	199	this.$modal.confirm('是否确认导出所有API 访问日志数据项?').then(() => {
	200	this.exportLoading = true;
	201	return exportApiAccessLogExcel(params);
	202	}).then(response => {
	203	this.$download.excel(response, 'API 访问日志.xls');
	204	this.exportLoading = false;
	205	}).catch(() => {});
	206	}
	207	}
	208	};
	209	</script>