Mr.Wang
5 months ago
1 changed files with 170 additions and 0 deletions
@ -0,0 +1,170 @@ |
|||||
|
<template> |
||||
|
<div class="app-container"> |
||||
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px"> |
||||
|
<el-form-item label="接口名称" prop="interfaceName"> |
||||
|
<el-input |
||||
|
v-model="queryParams.interfaceName" |
||||
|
placeholder="请输入任务名称" |
||||
|
clearable |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="接口所属" prop="interfaceOwnership"> |
||||
|
<el-select v-model="queryParams.interfaceOwnership" placeholder="请选择接口所属" clearable> |
||||
|
<el-option |
||||
|
v-for="dict in dict.type.interface_ownership" |
||||
|
:key="dict.value" |
||||
|
:label="dict.label" |
||||
|
:value="dict.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="操作状态" prop="operationStatus"> |
||||
|
<el-select v-model="queryParams.operationStatus" placeholder="请选择操作状态" clearable> |
||||
|
<el-option |
||||
|
v-for="dict in dict.type.operation_status" |
||||
|
:key="dict.value" |
||||
|
:label="dict.label" |
||||
|
:value="dict.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> |
||||
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
|
||||
|
|
||||
|
<el-table :data="interfaceData"> |
||||
|
<el-table-column label="接口名称" align="center" prop="interfaceName"/> |
||||
|
<el-table-column label="接口所属" align="center" prop="interfaceOwnership"> |
||||
|
<template slot-scope="scope"> |
||||
|
<dict-tag :options="dict.type.interface_ownership" :value="scope.row.interfaceOwnership"/> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="操作人" align="center" prop="operatorName"/> |
||||
|
<el-table-column label="操作状态" align="center" prop="operationStatus"> |
||||
|
<template slot-scope="scope"> |
||||
|
<dict-tag :options="dict.type.operation_status" :value="scope.row.operationStatus"/> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="操作时间" align="center" prop="operationTime"/> |
||||
|
<el-table-column label="操作"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button |
||||
|
type="text" |
||||
|
@click="handleDetails(scope.row)">详情 |
||||
|
</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
<pagination |
||||
|
v-show="total>0" |
||||
|
:total="total" |
||||
|
:page.sync="queryParams.pageNum" |
||||
|
:limit.sync="queryParams.pageSize" |
||||
|
@pagination="getList" |
||||
|
/> |
||||
|
|
||||
|
|
||||
|
<el-dialog |
||||
|
title="结果详细" |
||||
|
:visible.sync="openView" |
||||
|
width="700px" |
||||
|
style="margin-top: 30px;margin-bottom: 30px;height: 750px" |
||||
|
append-to-body |
||||
|
@close="handleClose"> |
||||
|
<el-input |
||||
|
type="textarea" |
||||
|
readonly |
||||
|
autosize |
||||
|
v-model="interfaceResult"> |
||||
|
</el-input> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button @click="handleClose">关 闭</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import request from "@/utils/request"; |
||||
|
|
||||
|
export default { |
||||
|
components: {}, |
||||
|
name: "Interface", |
||||
|
dicts: ['operation_status', 'interface_ownership'], |
||||
|
data() { |
||||
|
return { |
||||
|
// 遮罩层 |
||||
|
loading: true, |
||||
|
// 总条数 |
||||
|
total: 0, |
||||
|
// 弹出层标题 |
||||
|
title: "", |
||||
|
// 是否显示弹出层 |
||||
|
open: false, |
||||
|
// 是否显示详细弹出层 |
||||
|
openView: false, |
||||
|
// 查询参数 |
||||
|
queryParams: { |
||||
|
pageNum: 1, |
||||
|
pageSize: 10, |
||||
|
interfaceOwnership: undefined, |
||||
|
interfaceName: undefined, |
||||
|
operationStatus: undefined |
||||
|
}, |
||||
|
interfaceData: [], |
||||
|
interfaceResult: undefined, |
||||
|
// 表单参数 |
||||
|
form: {}, |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
this.getList(); |
||||
|
}, |
||||
|
methods: { |
||||
|
/** 查询外部接口监测列表 */ |
||||
|
getList() { |
||||
|
request({ |
||||
|
url: `/externalInterface/list`, |
||||
|
method: "get", |
||||
|
params: this.queryParams, |
||||
|
}).then((result) => { |
||||
|
this.total = result.total |
||||
|
this.interfaceData = result.rows |
||||
|
}) |
||||
|
}, |
||||
|
/** 搜索 */ |
||||
|
handleQuery() { |
||||
|
this.queryParams.pageNum = 1; |
||||
|
this.getList() |
||||
|
}, |
||||
|
/** 重置 */ |
||||
|
resetQuery() { |
||||
|
this.resetForm("queryForm"); |
||||
|
this.handleQuery(); |
||||
|
}, |
||||
|
/** 详情按钮 */ |
||||
|
handleDetails(row) { |
||||
|
this.openView = true |
||||
|
try { |
||||
|
// 尝试解析为JSON对象 |
||||
|
this.interfaceResult = JSON.stringify(JSON.parse(row.operationResult), null, 2) |
||||
|
} catch (error) { |
||||
|
// 解析失败，返回原始字符串 |
||||
|
this.interfaceResult = row.operationResult |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
/** 详情弹窗关闭 */ |
||||
|
handleClose() { |
||||
|
this.openView = false |
||||
|
this.interfaceResult = undefined |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
Loading…
Reference in new issue