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="exceptionTime">
	21	<el-date-picker v-model="queryParams.exceptionTime" 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="processStatus">
	25	<el-select v-model="queryParams.processStatus" placeholder="请选择处理状态" clearable>
	26	<el-option v-for="dict in this.getDictDatas(DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS)"
	27	:key="dict.value" :label="dict.label" :value="dict.value"/>
	28	</el-select>
	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" @click="handleExport" :loading="exportLoading"
	40	v-hasPermi="['infra:api-error-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="exceptionTime" width="180">
	58	<template v-slot="scope">
	59	<span>{{ parseTime(scope.row.exceptionTime) }}</span>
	60	</template>
	61	</el-table-column>
	62	<el-table-column label="异常名" align="center" prop="exceptionName" width="250" />
	63	<el-table-column label="处理状态" align="center" prop="processStatus">
	64	<template v-slot="scope">
	65	<dict-tag :type="DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS" :value="scope.row.processStatus" />
	66	</template>
	67	</el-table-column>
	68	<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
	69	<template v-slot="scope">
	70	<el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row,scope.index)"
	71	v-hasPermi="['infra:api-access-log:query']">详细</el-button>
	72	<el-button type="text" size="mini" icon="el-icon-check"
	73	v-if="scope.row.processStatus === InfApiErrorLogProcessStatusEnum.INIT" v-hasPermi="['infra:api-error-log:update-status']"
	74	@click="handleProcessClick(scope.row, InfApiErrorLogProcessStatusEnum.DONE)">已处理</el-button>
	75	<el-button type="text" size="mini" icon="el-icon-check"
	76	v-if="scope.row.processStatus === InfApiErrorLogProcessStatusEnum.INIT" v-hasPermi="['infra:api-error-log:update-status']"
	77	@click="handleProcessClick(scope.row, InfApiErrorLogProcessStatusEnum.IGNORE)">已忽略</el-button>
	78	</template>
	79	</el-table-column>
	80	</el-table>
	81
	82	<!-- 分页组件 -->
	83	<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
	84	@pagination="getList"/>
	85
	86	<!-- 查看明细 -->
	87	<el-dialog title="API 异常日志详细" :visible.sync="open" width="1280px" append-to-body>
	88	<el-form ref="form" :model="form" label-width="100px" size="mini">
	89	<el-row>
	90	<el-col :span="24">
	91	<el-form-item label="日志主键：">{{ form.id }}</el-form-item>
	92	<el-form-item label="链路追踪：">{{ form.traceId }}</el-form-item>
	93	<el-form-item label="应用名：">{{ form.applicationName }}</el-form-item>
	94	<el-form-item label="用户信息：">
	95	{{ form.userId }} <dict-tag :type="DICT_TYPE.USER_TYPE" :value="form.userType" /> \| {{ form.userIp }} \| {{ form.userAgent}}
	96	</el-form-item>
	97	<el-form-item label="请求信息：">{{ form.requestMethod }} \| {{ form.requestUrl }} </el-form-item>
	98	<el-form-item label="请求参数：">{{ form.requestParams }}</el-form-item>
	99	<el-form-item label="异常时间：">{{ parseTime(form.exceptionTime) }}</el-form-item>
	100	<el-form-item label="异常名">{{ form.exceptionName }}</el-form-item>
	101	<el-form-item label="异常名">
	102	<el-input type="textarea" :readonly="true" :autosize="{ maxRows: 20}" v-model="form.exceptionStackTrace"></el-input>
	103	</el-form-item>
	104	<el-form-item label="处理状态">
	105	<dict-tag :type="DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS" :value="form.processStatus" />
	106	</el-form-item>
	107	<el-form-item label="处理人">{{ form.processUserId }}</el-form-item>
	108	<el-form-item label="处理时间">{{ parseTime(form.processTime) }}</el-form-item>
	109	</el-col>
	110	</el-row>
	111	</el-form>
	112	<div slot="footer" class="dialog-footer">
	113	<el-button @click="open = false">关闭</el-button>
	114	</div>
	115	</el-dialog>
	116
	117	</div>
	118	</template>
	119
	120	<script>
	121	import { updateApiErrorLogProcess, getApiErrorLogPage, exportApiErrorLogExcel } from "@/api/infra/apiErrorLog";
	122	import { InfraApiErrorLogProcessStatusEnum } from '@/utils/constants'
	123
	124	export default {
	125	name: "InfraApiErrorLog",
	126	components: {
	127	},
	128	data() {
	129	return {
	130	// 遮罩层
	131	loading: true,
	132	// 导出遮罩层
	133	exportLoading: false,
	134	// 显示搜索条件
	135	showSearch: true,
	136	// 总条数
	137	total: 0,
	138	// API 错误日志列表
	139	list: [],
	140	// 弹出层标题
	141	title: "",
	142	// 是否显示弹出层
	143	open: false,
	144	// 查询参数
	145	queryParams: {
	146	pageNo: 1,
	147	pageSize: 10,
	148	userId: null,
	149	userType: null,
	150	applicationName: null,
	151	requestUrl: null,
	152	processStatus: null,
	153	exceptionTime: []
	154	},
	155	// 表单参数
	156	form: {},
	157	// 枚举
	158	InfApiErrorLogProcessStatusEnum: InfraApiErrorLogProcessStatusEnum,
	159	};
	160	},
	161	created() {
	162	this.getList();
	163	},
	164	methods: {
	165	/** 查询列表 */
	166	getList() {
	167	this.loading = true;
	168	// 执行查询
	169	getApiErrorLogPage(this.queryParams).then(response => {
	170	this.list = response.data.list;
	171	this.total = response.data.total;
	172	this.loading = false;
	173	});
	174	},
	175	/** 取消按钮 */
	176	cancel() {
	177	this.open = false;
	178	this.reset();
	179	},
	180	/** 表单重置 */
	181	reset() {
	182	this.form = {};
	183	this.resetForm("form");
	184	},
	185	/** 搜索按钮操作 */
	186	handleQuery() {
	187	this.queryParams.pageNo = 1;
	188	this.getList();
	189	},
	190	/** 重置按钮操作 */
	191	resetQuery() {
	192	this.resetForm("queryForm");
	193	this.handleQuery();
	194	},
	195	/** 详细按钮操作 */
	196	handleView(row) {
	197	this.open = true;
	198	this.form = row;
	199	},
	200	/ 处理已处理 / 已忽略的操作 /
	201	handleProcessClick(row, processStatus) {
	202	const processStatusText = this.getDictDataLabel(this.DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS, processStatus)
	203	this.$modal.confirm('确认标记为' + processStatusText).then(() => {
	204	updateApiErrorLogProcess(row.id, processStatus).then(() => {
	205	this.$modal.msgSuccess("修改成功");
	206	this.getList();
	207	});
	208	}).catch(() => {});
	209	},
	210	/** 导出按钮操作 */
	211	handleExport() {
	212	// 处理查询参数
	213	let params = {...this.queryParams};
	214	params.pageNo = undefined;
	215	params.pageSize = undefined;
	216	// 执行导出
	217	this.$modal.confirm('是否确认导出所有API 错误日志数据项?').then(() => {
	218	this.exportLoading = true;
	219	return exportApiErrorLogExcel(params);
	220	}).then(response => {
	221	this.$download.excel(response, 'API 错误日志.xls');
	222	this.exportLoading = false;
	223	}).catch(() => {});
	224	}
	225	}
	226	};
	227	</script>