Skip to content

S
saas-manage
Commit 424df567 by zhuzhequan
Options

添加字段

parent 7964a627
Showing with 317 additions and 290 deletions
src/views/operation/exceptionMessage.vue
<template>
<div class="saas-manage card">
<div class="search">
<el-form :model="searchForm" size="small" :inline="true">
<el-form-item label="创建时间">
<el-date-picker
style="width: 360px"
v-model="period"
type="datetimerange"
value-format="yyyy-MM-dd HH:ss:mm"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"></el-date-picker>
</el-form-item>
<el-form-item label="route">
<el-input
size="small"
style="width: 160px"
clearable
v-model.trim="searchForm.route"
placeholder="请输入route"></el-input>
</el-form-item>
<el-form-item>
<el-button
type="primary"
size="small"
:loading="searchLoading"
icon="el-icon-search"
@click="search">
查询
</el-button>
</el-form-item>
<el-form-item>
<el-button
type="warning"
size="small"
:loading="sendLoading"
icon="el-icon-s-promotion"
@click="resendMsg()">
批量发送
</el-button>
</el-form-item>
</el-form>
</div>
<div
class="table_wrap"
style="min-height: 50%; max-height: 90%; padding: 0">
<table-view
:sourceData="messageLists"
:serialNumber="true"
:tableColumns="tableColumns"
ref="multipleTable"
@selectionChange="selectionChange"
:selection="true"></table-view>
</div>
<div class="pagination">
<el-pagination
layout="sizes, total, prev, pager, next, jumper"
background
:total="total"
:page-size="pageSize"
:current-page="currentPage"
@size-change="sizeChange"
@current-change="onCurrentChange"></el-pagination>
</div>
<el-dialog
title="查看详情"
:visible.sync="detailsVisible"
:close-on-click-modal="false"
width="700px">
<json-viewer :value="jsonData" :expand-depth="5"></json-viewer>
</el-dialog>
</div>
</template>
<script>
import {
getMqMessagePage,
getMessageDetails,
getMessageReSend
} from '@/common/api/message'
import tableView from '@/common/components/base/tableView.vue'
import JsonViewer from 'vue-json-viewer' // 下载vue-json-viewer插件
export default {
name: 'exceptionMessage',
components: { tableView, JsonViewer },
data() {
return {
detailsVisible: false,
jsonData: {},
period: [],
messageLists: [],
searchForm: {},
editForm: {
domain: ''
},
total: 0,
pageSize: 50,
currentPage: 1,
selection: [],
searchLoading: false,
sendLoading: false,
loading: false
}
},
computed: {
tableColumns() {
return [
{
label: 'route',
key: 'route'
},
{
label: '发送状态',
key: 'statusStr'
},
{
label: '创建时间',
key: 'createTime'
},
{
label: '操作',
width: 150,
render: (item) => (
<div>
<span
class="icon-view icon-tools-view"
title="详情"
onClick={() => this.lookJson(item.id)}>
<i class="el-icon-tickets"></i>
</span>
<span
class="icon-view icon-edit-view"
title="重新发送"
onClick={() => this.resendMsg(item)}>
<i class="el-icon-s-promotion"></i>
</span>
</div>
)
}
]
}
},
async created() {
this.getList()
},
methods: {
async resendMsg(row) {
const arr = row ? [row] : this.selection
if (arr.length === 0) {
this.$message.error('请至少选择一条记录')
return
}
try {
await this.$confirm('确认发送？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
const ids = arr.map((item) => item.id)
const loading = this.$loading({
background: 'rgba(0, 0, 0, 0.3)'
})
this.sendLoading = true
try {
const res = await getMessageReSend(String(ids))
if (res.code === 200) {
this.$message.success('发送成功')
this.selection = []
this.getList()
} else {
this.$message.error(res.message)
}
} finally {
this.sendLoading = false
loading.close()
}
} catch {}
},
async lookJson(id) {
this.jsonData = {}
const res = await getMessageDetails(id)
if (res.code === 200) {
this.jsonData = res.data || {}
this.detailsVisible = true
}
},
async getList() {
this.searchLoading = true
this.loading = true
const params = {
currentPage: this.currentPage,
pageSize: this.pageSize,
route: this.searchForm.route,
startTime: this.period && this.period[0],
endTime: this.period && this.period[1]
}
try {
const res = await getMqMessagePage(params)
this.messageLists = res.data.records || []
this.total = res.data.total || 0
} catch (e) {
console.error(e)
} finally {
this.searchLoading = false
this.loading = false
}
},
search() {
this.getList()
},
selectionChange(selection) {
this.selection = selection
},
onCurrentChange(currentPage) {
this.currentPage = currentPage
this.getList()
},
sizeChange(pageSize) {
this.pageSize = pageSize
this.getList()
}
}
}
</script>
<style lang="scss" scoped>
::v-deep .jv-light {
background-color: #ececec !important;
}
.saas-manage {
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
&::v-deep {
.el-table .el-table__cell {
padding: 6px 0;
}
.el-input__inner {
padding: 0 4px;
}
.el-input--small .el-input__inner {
height: 30px;
line-height: 30px;
}
.el-icon-time:before {
content: '';
}
.el-dialog__footer {
text-align: center;
.el-button--small {
padding: 9px 50px;
}
}
.el-dialog__body {
padding: 10px 20px;
}
.el-range-editor--small .el-range-separator {
line-height: 31px;
}
.header-row-class-name th {
background-color: #f8f8f9;
}
.el-input-group__append {
padding-left: 0;
}
}
}
.search {
background: #fff;
}
.table-wrap {
background: #fff;
flex: 1;
overflow: hidden;
}
</style>
<template>
<div class="saas-manage card">
<div class="search">
<el-form :model="searchForm" size="small" :inline="true">
<el-form-item label="创建时间">
<el-date-picker
style="width: 360px"
v-model="period"
type="datetimerange"
value-format="yyyy-MM-dd HH:ss:mm"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"></el-date-picker>
</el-form-item>
<el-form-item label="route">
<el-input
size="small"
style="width: 160px"
clearable
v-model.trim="searchForm.route"
placeholder="请输入route"></el-input>
</el-form-item>
<el-form-item label="消息id">
<el-input
size="small"
style="width: 160px"
clearable
v-model.trim="searchForm.messageId"
placeholder="请输入消息id"></el-input>
</el-form-item>
<el-form-item label="namespace">
<el-input
size="small"
style="width: 160px"
clearable
v-model.trim="searchForm.namespace"
placeholder="请输入namespace"></el-input>
</el-form-item>
<el-form-item>
<el-button
type="primary"
size="small"
:loading="searchLoading"
icon="el-icon-search"
@click="search">
查询
</el-button>
</el-form-item>
<el-form-item>
<el-button
type="warning"
size="small"
:loading="sendLoading"
icon="el-icon-s-promotion"
@click="resendMsg()">
批量发送
</el-button>
</el-form-item>
</el-form>
</div>
<div
class="table_wrap"
style="min-height: 50%; max-height: 90%; padding: 0">
<table-view
:sourceData="messageLists"
:serialNumber="true"
:tableColumns="tableColumns"
ref="multipleTable"
@selectionChange="selectionChange"
:selection="true"></table-view>
</div>
<div class="pagination">
<el-pagination
layout="sizes, total, prev, pager, next, jumper"
background
:total="total"
:page-size="pageSize"
:current-page="currentPage"
@size-change="sizeChange"
@current-change="onCurrentChange"></el-pagination>
</div>
<el-dialog
title="查看详情"
:visible.sync="detailsVisible"
:close-on-click-modal="false"
width="700px">
<json-viewer :value="jsonData" :expand-depth="5"></json-viewer>
</el-dialog>
</div>
</template>
<script>
import {
getMqMessagePage,
getMessageDetails,
getMessageReSend
} from '@/common/api/message'
import tableView from '@/common/components/base/tableView.vue'
import JsonViewer from 'vue-json-viewer' // 下载vue-json-viewer插件
export default {
name: 'exceptionMessage',
components: { tableView, JsonViewer },
data() {
return {
detailsVisible: false,
jsonData: {},
period: [],
messageLists: [],
searchForm: {},
editForm: {
domain: ''
},
total: 0,
pageSize: 50,
currentPage: 1,
selection: [],
searchLoading: false,
sendLoading: false,
loading: false
}
},
computed: {
tableColumns() {
return [
{
label: 'route',
key: 'route'
},
{
label: '消息id',
key: 'messageId'
},
{
label: 'namespace',
key: 'namespace'
},
{
label: '发送状态',
key: 'statusStr'
},
{
label: '创建时间',
key: 'createTime'
},
{
label: '操作',
width: 150,
render: (item) => (
<div>
<span
class="icon-view icon-tools-view"
title="详情"
onClick={() => this.lookJson(item.id)}>
<i class="el-icon-tickets"></i>
</span>
<span
class="icon-view icon-edit-view"
title="重新发送"
onClick={() => this.resendMsg(item)}>
<i class="el-icon-s-promotion"></i>
</span>
</div>
)
}
]
}
},
async created() {
this.getList()
},
methods: {
async resendMsg(row) {
const arr = row ? [row] : this.selection
if (arr.length === 0) {
this.$message.error('请至少选择一条记录')
return
}
try {
await this.$confirm('确认发送？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
const ids = arr.map((item) => item.id)
const loading = this.$loading({
background: 'rgba(0, 0, 0, 0.3)'
})
this.sendLoading = true
try {
const res = await getMessageReSend(String(ids))
if (res.code === 200) {
this.$message.success('发送成功')
this.selection = []
this.getList()
} else {
this.$message.error(res.message)
}
} finally {
this.sendLoading = false
loading.close()
}
} catch {}
},
async lookJson(id) {
this.jsonData = {}
const res = await getMessageDetails(id)
if (res.code === 200) {
this.jsonData = res.data || {}
this.detailsVisible = true
}
},
async getList() {
this.searchLoading = true
this.loading = true
const params = {
currentPage: this.currentPage,
pageSize: this.pageSize,
route: this.searchForm.route,
namespace: this.searchForm.namespace,
messageId: this.searchForm.messageId,
startTime: this.period && this.period[0],
endTime: this.period && this.period[1]
}
try {
const res = await getMqMessagePage(params)
this.messageLists = res.data.records || []
this.total = res.data.total || 0
} catch (e) {
console.error(e)
} finally {
this.searchLoading = false
this.loading = false
}
},
search() {
this.getList()
},
selectionChange(selection) {
this.selection = selection
},
onCurrentChange(currentPage) {
this.currentPage = currentPage
this.getList()
},
sizeChange(pageSize) {
this.pageSize = pageSize
this.getList()
}
}
}
</script>
<style lang="scss" scoped>
::v-deep .jv-light {
background-color: #ececec !important;
}
.saas-manage {
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
&::v-deep {
.el-table .el-table__cell {
padding: 6px 0;
}
.el-input__inner {
padding: 0 4px;
}
.el-input--small .el-input__inner {
height: 30px;
line-height: 30px;
}
.el-icon-time:before {
content: '';
}
.el-dialog__footer {
text-align: center;
.el-button--small {
padding: 9px 50px;
}
}
.el-dialog__body {
padding: 10px 20px;
}
.el-range-editor--small .el-range-separator {
line-height: 31px;
}
.header-row-class-name th {
background-color: #f8f8f9;
}
.el-input-group__append {
padding-left: 0;
}
}
}
.search {
background: #fff;
}
.table-wrap {
background: #fff;
flex: 1;
overflow: hidden;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment