作者 朱兆平

jsonview 查看优化

... ... @@ -30,6 +30,7 @@
"vue": "^2.2.2",
"vue-count-to": "^1.0.13",
"vue-i18n": "^8.14.0",
"vue-json-viewer": "^2.2.22",
"vue-quill-editor": "^3.0.6",
"vue-router": "^2.3.0",
"vuex": "^2.0.0-rc.6",
... ...
... ... @@ -7,25 +7,25 @@
<el-row>
<el-col :span="5">
<el-input v-model="ES_queryInfo.sndr" placeholder="发送者"
size="medium" clearable >
size="mini" clearable >
<template slot="prepend" ><i class="el-icon-user"></i>&nbsp;消息发送者</template>
</el-input>
</el-col>
<el-col :span="6">
<el-input v-model="ES_queryInfo.btype" placeholder="消息大类"
size="medium" clearable>
size="mini" clearable>
<template slot="prepend" ><i class="el-icon-document-checked"></i>&nbsp;消 息大 类 </template>
</el-input>
</el-col>
<el-col :span="6">
<el-input v-model="ES_queryInfo.stype" placeholder="消息子类"
size="medium" clearable>
size="mini" clearable>
<template slot="prepend"><i class="el-icon-s-platform"></i>消 息子 类</template>
</el-input>
</el-col>
<el-col :span="6">
<el-input v-model="ES_queryInfo.seqn"
size="medium" clearable
size="mini" clearable
placeholder="消息序号">
<template slot="prepend"><i class="el-icon-s-operation"></i>消 息序 号</template>
</el-input>
... ... @@ -35,13 +35,13 @@
<el-row>
<el-col :span="5">
<el-input v-model="ES_queryInfo.rcvrsUserName" placeholder="路由接收者"
size="medium" clearable >
size="mini" clearable >
<template slot="prepend"><i class="el-icon-news"></i>路由订阅者</template>
</el-input>
</el-col>
<el-col :span="6">
<el-input v-model="ES_queryInfo.rcvlogUsername" placeholder="消息接收者"
size="medium" clearable >
size="mini" clearable >
<template slot="prepend" ><i class="el-icon-user"></i>消息接收者</template>
</el-input>
</el-col>
... ... @@ -53,7 +53,7 @@
type="datetimerange"
:picker-options="pickerOptions"
:default-time="['00:00:00', '23:59:59']"
size="medium"
size="mini"
align="right"
format = "yyyy-MM-dd HH:mm:ss"
value-format = "yyyy-MM-dd HH:mm:ss"
... ... @@ -62,7 +62,7 @@
</el-col>
<el-col :span="6">
<el-input v-model="ES_queryInfo.alias_sendContent" placeholder="消息内容"
size="medium" clearable >
size="mini" clearable >
<template slot="prepend"><i class="el-icon-sort"></i>消息内容</template>
</el-input>
</el-col>
... ... @@ -70,23 +70,23 @@
<el-row>
<el-col :span="5">
<el-input v-model="ES_queryInfo.msgid" placeholder="消息id"
size="medium" clearable >
size="mini" clearable >
<template slot="prepend"><i class="el-icon-sort"></i>消息入库ID</template>
</el-input>
</el-col>
<el-col :span="15">
<el-button type="warning" style="width:150px" size="medium" icon="el-icon-search" @click="searchSubmit">
<el-button type="warning" style="width:150px" size="mini" icon="el-icon-search" @click="searchSubmit">
查询消息记录
</el-button>
<el-button type="primary" style="width:150px" size="medium" icon="el-icon-refresh"
<el-button type="primary" style="width:150px" size="mini" icon="el-icon-refresh"
@click="resetSearch">
重置
</el-button>
<!-- <el-button type="primary" style="width:150px" size="medium" icon="el-icon-plus"-->
<!-- <el-button type="primary" style="width:150px" size="mini" icon="el-icon-plus"-->
<!-- @click="messageNote_toAddDialog">-->
<!-- 发送消息-->
<!-- </el-button>-->
<!-- <el-button type="warning" style="width:150px" size="medium"-->
<!-- <el-button type="warning" style="width:150px" size="mini"-->
<!-- @click="messageNote_openDeleteTime">-->
<!-- 设置保留时间-->
<!-- </el-button>-->
... ... @@ -98,7 +98,7 @@
<el-row>
<el-col :span="24">
<el-table :data="messageNote_page.messageNoteList" border
v-loading="messageNote_loading.listLoading" size="small"
v-loading="messageNote_loading.listLoading" size="mini"
@selection-change="messageNote_selectChange"
element-loading-text="获取消息收发记录,拼命加载中"
:header-cell-style="{background:'#6F8294',color:'#FFFFFF'}"
... ... @@ -190,12 +190,12 @@
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer" style="text-align: center;margin-top: -20px">
<el-button type="info" @click="messageNote_dialog.deleteTimeDialog = false" size="medium"
<el-button type="info" @click="messageNote_dialog.deleteTimeDialog = false" size="mini"
style="width: 100px;background-color: #6F8294;color: #ffffff">取消
</el-button>
<el-button type="primary" @click="messageNote_setDeleteTime"
:loading="messageNote_loading.addLoading"
size="medium" style="width: 100px">设置
size="mini" style="width: 100px">设置
</el-button>
</div>
</el-dialog>
... ... @@ -211,7 +211,7 @@
:model="messageNote_addForm" :rules="messageNote_addFormRules" ref="messageNote_addFormRef">
<el-form-item label="" prop="username">
<el-select v-model="messageNote_addForm.username" prefix-icon="el-icon-search" clearable
style="width:300px" size="medium" filterable
style="width:300px" size="mini" filterable
placeholder="请选择用户名称">
<el-option
v-for="item in (user_cloud.cloudUserList)"
... ... @@ -225,7 +225,7 @@
</el-form-item>
<el-form-item label="" prop="serverId">
<el-select v-model="messageNote_addForm.serverId" prefix-icon="el-icon-search" clearable
style="width:300px" size="small"
style="width:300px" size="mini"
@change="messageNote_server_addChange"
placeholder="请选择所属服务器名称">
<el-option
... ... @@ -239,7 +239,7 @@
<el-form-item label="" prop="virtualHostId">
<el-select v-model="messageNote_addForm.virtualHostId" prefix-icon="el-icon-search" clearable
style="width:300px" size="small"
style="width:300px" size="mini"
@change="messageNote_virtualHost_addChange"
:disabled="messageNote_addForm.serverId===''"
placeholder="请选择虚拟主机名称">
... ... @@ -254,7 +254,7 @@
<el-form-item label="" prop="exchangeId">
<el-select v-model="messageNote_addForm.exchangeId" prefix-icon="el-icon-search" clearable
style="width:300px" size="small"
style="width:300px" size="mini"
@change="messageNote_exchange_addChange"
:disabled="messageNote_addForm.virtualHostId===''"
placeholder="请选择交换机名称">
... ... @@ -269,7 +269,7 @@
<el-form-item label="" prop="routingKeyId">
<el-select v-model="messageNote_addForm.routingKeyId" prefix-icon="el-icon-search" clearable
style="width:300px" size="small"
style="width:300px" size="mini"
:disabled="messageNote_addForm.exchangeId===''"
placeholder="请选择路由键名称">
<el-option
... ... @@ -283,33 +283,33 @@
<el-form-item label="" prop="sendTime">
<el-date-picker v-model="messageNote_addForm.sendTime" clearable type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择消息发送时间" size="small" style="width:300px"></el-date-picker>
placeholder="选择消息发送时间" size="mini" style="width:300px"></el-date-picker>
</el-form-item>
<!-- <el-form-item label="消息获取时间:" prop="receiveTime">-->
<!-- <el-date-picker v-model="messageNote_addForm.receiveTime" clearable type="datetime"-->
<!-- value-format="yyyy-MM-dd HH:mm:ss"-->
<!-- placeholder="消息获取时间" size="small" style="width:300px"></el-date-picker>-->
<!-- placeholder="消息获取时间" size="mini" style="width:300px"></el-date-picker>-->
<!-- </el-form-item>-->
<el-form-item label="" prop="alias_sendContent">
<el-input v-model="messageNote_addForm.alias_sendContent" style="width:300px" size="small"
<el-input v-model="messageNote_addForm.alias_sendContent" style="width:300px" size="mini"
clearable type="textarea" :rows="1"
placeholder="请输入发送内容">
</el-input>
</el-form-item>
<el-form-item label="" prop="description">
<el-input v-model="messageNote_addForm.description" style="width:300px" size="small"
<el-input v-model="messageNote_addForm.description" style="width:300px" size="mini"
clearable type="textarea" :rows="1"
placeholder="请输入相关描述">
</el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer" style="text-align: center;margin-top: -20px">
<el-button type="info" @click="messageNote_dialog.addDialog = false" size="medium"
<el-button type="info" @click="messageNote_dialog.addDialog = false" size="mini"
style="width: 100px;background-color: #6F8294;color: #ffffff">取消
</el-button>
<el-button type="primary" @click="messageNote_add" :loading="messageNote_loading.addLoading"
size="medium" style="width: 100px">发送
size="mini" style="width: 100px">发送
</el-button>
</div>
</el-dialog>
... ... @@ -324,12 +324,12 @@
<el-form :inline="true" label-width="120px" status-icon style="margin-top: -10px" align="center"
:model="messageNote_editForm" :rules="messageNote_editFormRules" ref="messageNote_editFormRef">
<el-form-item label="用户名称:" prop="username">
<el-input v-model="messageNote_editForm.username" style="width:300px" size="small" readonly
<el-input v-model="messageNote_editForm.username" style="width:300px" size="mini" readonly
placeholder="用户名称">
</el-input>
<!-- <el-select v-model="messageNote_editForm.userId" prefix-icon="el-icon-search" clearable-->
<!-- style="width:300px" size="medium" filterable disabled-->
<!-- style="width:300px" size="mini" filterable disabled-->
<!-- placeholder="请选择用户">-->
<!-- <el-option-->
<!-- v-for="item in (messageNote_config.userInfoList)"-->
... ... @@ -341,13 +341,13 @@
</el-form-item>
<el-form-item label="服务器名称:" prop="serverName">
<el-input v-model="messageNote_editForm.serverName" style="width:300px" size="small"
<el-input v-model="messageNote_editForm.serverName" style="width:300px" size="mini"
readonly
placeholder="服务器名称">
</el-input>
<!-- <el-select v-model="messageNote_editForm.serverId" prefix-icon="el-icon-search" clearable-->
<!-- disabled-->
<!-- style="width:300px" size="small"-->
<!-- style="width:300px" size="mini"-->
<!-- @change="messageNote_server_editChange"-->
<!-- placeholder="请选择所属服务器">-->
<!-- <el-option-->
... ... @@ -360,14 +360,14 @@
</el-form-item>
<el-form-item label="虚拟主机名称:" prop="virtualHostName">
<el-input v-model="messageNote_editForm.virtualHostName" style="width:300px" size="small"
<el-input v-model="messageNote_editForm.virtualHostName" style="width:300px" size="mini"
readonly
placeholder="虚拟主机名称">
</el-input>
<!-- :disabled="messageNote_editForm.serverId===''" -->
<!-- <el-select v-model="messageNote_editForm.virtualHostId" prefix-icon="el-icon-search" clearable-->
<!-- disabled-->
<!-- style="width:300px" size="small"-->
<!-- style="width:300px" size="mini"-->
<!-- @change="messageNote_virtualHost_editChange"-->
<!-- placeholder="请选择虚拟主机名称">-->
<!-- <el-option-->
... ... @@ -380,14 +380,14 @@
</el-form-item>
<el-form-item label="交换机名称:" prop="exchangeName">
<el-input v-model="messageNote_editForm.exchangeName" style="width:300px" size="small"
<el-input v-model="messageNote_editForm.exchangeName" style="width:300px" size="mini"
readonly
placeholder="交换机名称">
</el-input>
<!-- :disabled="messageNote_editForm.virtualHostId===''" -->
<!-- <el-select v-model="messageNote_editForm.exchangeId" prefix-icon="el-icon-search" clearable-->
<!-- disabled-->
<!-- style="width:300px" size="small"-->
<!-- style="width:300px" size="mini"-->
<!-- @change="messageNote_exchange_editChange"-->
<!-- placeholder="请选择交换机名称">-->
<!-- <el-option-->
... ... @@ -400,14 +400,14 @@
</el-form-item>
<el-form-item label="路由键名称:" prop="routingKeyName">
<el-input v-model="messageNote_editForm.routingKeyName" style="width:300px" size="small"
<el-input v-model="messageNote_editForm.routingKeyName" style="width:300px" size="mini"
readonly
placeholder="路由键名称">
</el-input>
<!-- :disabled="messageNote_editForm.exchangeId===''" -->
<!-- <el-select v-model="messageNote_editForm.routingKeyId" prefix-icon="el-icon-search" clearable-->
<!-- disabled-->
<!-- style="width:300px" size="small"-->
<!-- style="width:300px" size="mini"-->
<!-- placeholder="请选择路由键名称">-->
<!-- <el-option-->
<!-- v-for="item in (messageNote_config.routingKeyList)"-->
... ... @@ -418,38 +418,38 @@
<!-- </el-select>-->
</el-form-item>
<el-form-item label="消息发送时间:" prop="alias_sendTime">
<el-input v-model="messageNote_editForm.alias_sendTime" style="width:300px" size="small"
<el-input v-model="messageNote_editForm.alias_sendTime" style="width:300px" size="mini"
readonly
placeholder="消息发送时间">
</el-input>
<!-- <el-date-picker v-model="messageNote_editForm.sendTime" disabled clearable type="datetime"-->
<!-- value-format="yyyy-MM-dd HH:mm:ss"-->
<!-- placeholder="选择发送时间" size="small" style="width:300px"></el-date-picker>-->
<!-- placeholder="选择发送时间" size="mini" style="width:300px"></el-date-picker>-->
</el-form-item>
<el-form-item label="发送内容:" prop="alias_sendContent">
<el-input v-model="messageNote_editForm.alias_sendContent" style="width:300px" size="small"
<el-input v-model="messageNote_editForm.alias_sendContent" style="width:300px" size="mini"
clearable readonly type="textarea" :rows="1"
placeholder="请输入发送内容">
</el-input>
</el-form-item>
<el-form-item label="相关描述:" prop="description">
<el-input v-model="messageNote_editForm.description" style="width:300px" size="small"
<el-input v-model="messageNote_editForm.description" style="width:300px" size="mini"
clearable readonly type="textarea" :rows="1"
placeholder="请输入相关描述">
</el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer" style="text-align: center;margin-top: -20px">
<el-button type="info" @click="messageNote_dialog.editDialog = false" size="medium"
<el-button type="info" @click="messageNote_dialog.editDialog = false" size="mini"
style="width: 100px">取消
</el-button>
<el-button type="primary" @click="messageNote_dialog.editDialog = false" size="medium"
<el-button type="primary" @click="messageNote_dialog.editDialog = false" size="mini"
style="width: 100px">关闭
</el-button>
<!-- <el-button type="primary" @click="messageNote_edit" :loading="messageNote_loading.editLoading"-->
<!-- size="medium" style="width: 100px">查看-->
<!-- size="mini" style="width: 100px">查看-->
<!-- </el-button>-->
</div>
</el-dialog>
... ... @@ -458,37 +458,41 @@
<div>
<el-dialog title="查看消息内容"
:visible.sync="messageNote_dialog.viewContentDialog"
style="margin-top: -80px" text-align="center" width="70%"
style="margin-top: -80px" text-align="center" width="85%"
@close="messageNote_viewContentDialogClosed">
<json-viewer :value="messageNote_viewContentForm.msg.body" :expand-depth=4 icon-style copyable boxed sort :preview-mode="false"></json-viewer>
<el-form :inline="true" label-width="120px" status-icon style="margin-top: -10px" align="center"
:model="messageNote_viewContentForm" :rules="messageNote_viewContentFormRules" ref="messageNote_viewContentFormRef">
<el-form-item label="消息内容:" prop="alias_sendContent">
<el-input v-model="messageNote_viewContentForm.msg.body"
v-if="isViewContent === false"
style="width:800px" size="small" placeholder="消息内容"
clearable type="textarea" :rows="20">
</el-input>
<el-input v-model="xml_content"
v-if="isViewContent === true"
style="width:800px" size="small" placeholder="发送内容"
clearable type="textarea" :rows="20">
</el-input>
</el-form-item>
<!-- <el-form-item label="消息内容:" prop="alias_sendContent">-->
<!-- <el-input v-model="messageNote_viewContentForm.msg.body"-->
<!-- v-if="isViewContent === false"-->
<!-- style="width:800px" size="mini" placeholder="消息内容"-->
<!-- clearable type="textarea" :rows="20">-->
<!-- </el-input>-->
<!-- <el-input v-model="xml_content"-->
<!-- v-if="isViewContent === true"-->
<!-- style="width:800px" size="mini" placeholder="发送内容"-->
<!-- clearable type="textarea" :rows="20">-->
<!-- </el-input>-->
<!-- </el-form-item>-->
</el-form>
<div slot="footer" class="dialog-footer" style="text-align: center;margin-top: -20px">
<el-button type="success" @click="xml_format(messageNote_viewContentForm.alias_sendContent)" size="medium"
style="width: 100px">xml格式化
<el-button type="success" @click="xml_format(messageNote_viewContentForm.alias_sendContent)" size="mini"
style="width: 100px">XML格式化
</el-button>
<el-button type="success" @click="json_format()" size="mini"
style="width: 100px">JSON格式化
</el-button>
<el-button type="info" @click="messageNote_dialog.viewContentDialog = false" size="medium"
<el-button type="info" @click="messageNote_dialog.viewContentDialog = false" size="mini"
style="width: 100px">取消
</el-button>
<el-button type="primary" @click="messageNote_dialog.viewContentDialog = false" size="medium"
<el-button type="primary" @click="messageNote_dialog.viewContentDialog = false" size="mini"
style="width: 100px">关闭
</el-button>
<!-- <el-button type="primary" @click="messageNote_edit" :loading="messageNote_loading.editLoading"-->
<!-- size="medium" style="width: 100px">查看-->
<!-- size="mini" style="width: 100px">查看-->
<!-- </el-button>-->
</div>
</el-dialog>
... ... @@ -498,6 +502,7 @@
<script>
import vkbeautify from "vkbeautify";
import JsonViewer from 'vue-json-viewer'
import {
selectMessageNoteList,
selectMessageSearchList,
... ... @@ -508,11 +513,10 @@
getDeleteTime, setDeleteTime, getUserInfoList
} from "../../api/message_bus";
import {getUserList} from "../../api/user";
export default {
// 消息收发记录
name: "MessageNote",
components:{JsonViewer},
data() {
return {
... ... @@ -1364,6 +1368,10 @@
this.isViewContent = true;
this.xml_content = vkbeautify.xml(content);
},
json_format(content) {
this.isViewContent = true;
this.messageNote_viewContentForm.msg.body = JSON.parse(this.messageNote_viewContentForm.msg.body);
}
},
created() {
// 刷新列表
... ...
... ... @@ -6,12 +6,12 @@
<el-row style="margin-left: 30px;">
<el-col :span="7">
<el-input v-model="messageNote_queryInfo.alias_sendContent" placeholder="发送内容"
size="medium" clearable >
size="mini" clearable >
<template slot="prepend" ><i class="el-icon-document-checked"></i>发送内容</template>
</el-input>
</el-col>
<el-col :span="8">
<el-button type="warning" style="width:150px" size="medium" icon="el-icon-search" @click="searchSubmit">
<el-button type="warning" style="width:150px" size="mini" icon="el-icon-search" @click="searchSubmit">
查询
</el-button>
</el-col>
... ... @@ -64,7 +64,7 @@
<div class="sun">
<el-row>
<el-col :span="2">
<el-button type="primary" @click="messageNote_toViewContentDialogDialog(item)" size="small">查看内容
<el-button type="primary" @click="messageNote_toViewContentDialogDialog(item)" size="mini">查看内容
</el-button>
</el-col>
<el-col style="width: 45%;margin-left: -10px" :span="14">
... ... @@ -101,29 +101,34 @@
<div>
<el-dialog title="查看消息内容"
:visible.sync="messageNote_dialog.viewContentDialog"
style="margin-top: -80px" text-align="center" width="70%"
style="margin-top: -80px" text-align="center" width="85%"
@close="messageNote_viewContentDialogClosed">
<json-viewer :value="messageNote_viewContentForm.msg.body" :expand-depth=4 icon-style copyable boxed sort :preview-mode="false"></json-viewer>
<el-form :inline="true" label-width="120px" status-icon style="margin-top: -10px" align="center"
:model="messageNote_viewContentForm" ref="messageNote_viewContentFormRef">
<el-form-item label="消息内容:" prop="alias_sendContent">
<el-input v-model="messageNote_viewContentForm.msg.body" v-if="isViewContent === false"
style="width:1000px" type="textarea" :rows="8">
</el-input>
<el-input v-model="xml_content" v-if="isViewContent === true"
style="width:1000px" type="textarea" autosize>
</el-input>
</el-form-item>
<!-- <el-form-item label="消息内容:" prop="alias_sendContent">-->
<!-- <el-input v-model="messageNote_viewContentForm.msg.body" v-if="isViewContent === false"-->
<!-- style="width:1000px" type="textarea" :rows="8">-->
<!-- </el-input>-->
<!-- <el-input v-model="xml_content" v-if="isViewContent === true"-->
<!-- style="width:1000px" type="textarea" autosize>-->
<!-- </el-input>-->
<!-- </el-form-item>-->
</el-form>
<div slot="footer" class="dialog-footer" style="text-align: center;margin-top: -20px">
<el-button type="success" @click="xml_format(messageNote_viewContentForm.msg.body)" size="medium"
<el-button type="success" @click="xml_format(messageNote_viewContentForm.msg.body)" size="mini"
style="width: 100px">xml格式化
</el-button>
<el-button type="info" @click="messageNote_dialog.viewContentDialog = false" size="medium"
<el-button type="success" @click="json_format()" size="mini"
style="width: 100px">JSON格式化
</el-button>
<el-button type="info" @click="messageNote_dialog.viewContentDialog = false" size="mini"
style="width: 100px">取消
</el-button>
<el-button type="primary" @click="messageNote_dialog.viewContentDialog = false" size="medium"
<el-button type="primary" @click="messageNote_dialog.viewContentDialog = false" size="mini"
style="width: 100px">关闭
</el-button>
</div>
... ... @@ -136,9 +141,11 @@
<script>
import {selectMessageNoteList} from "../../api/message_bus";
import vkbeautify from "vkbeautify";
import JsonViewer from 'vue-json-viewer'
export default {
name: "MessageNoteSearch",
components:{JsonViewer},
data() {
return {
// 抽屉
... ... @@ -251,6 +258,10 @@
this.isViewContent = true;
this.xml_content = vkbeautify.xml(content);
},
json_format(content) {
this.isViewContent = true;
this.messageNote_viewContentForm.msg.body = JSON.parse(this.messageNote_viewContentForm.msg.body);
},
/**
* messageNote,查看发送内容,打开事件
*/
... ...