<template>
<el-container>
<el-main>
<el-card style="background-color: #F5F7FA">
<div>
<el-row style="margin-left: 30px;">
<el-col :span="7">
<el-input v-model="messageNote_queryInfo.alias_sendContent" placeholder="发送内容"
size="medium" 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="messageNote_getList">
查询
</el-button>
</el-col>
</el-row>
</div>
<div class="ft" :index="item.msgid+''" v-for="item in messageNote_page.messageNoteList" :key="item.msgid" style="margin-left: 30px;margin-top: 30px">
<el-row style="min-height: 200px">
<el-row>
<el-col :span="7">
<span>消息id：</span>
<el-tag>{{item.msgid}}</el-tag>
</el-col>
<el-col :span="8">
<span>发送时间：</span>
<el-tag>{{item.ddtm}}</el-tag>
</el-col>
</el-row>
<el-row>
<el-col :span="7">
<span>发送人：</span>
<el-tag>{{item.sndr}}</el-tag>
</el-col>
<el-col :span="3">
<span>消息大类：</span>
<el-tag type="success">{{item.btype}}</el-tag>
</el-col>
<el-col :span="3">
<span>消息子类：</span>
<el-tag type="success">{{item.stype}}</el-tag>
</el-col>
<el-col :span="4">
<div>
<span>路由接收者：</span>
</div>
<template v-for="reciver in item.rcvrs">
<el-tag type="danger">{{reciver.username}}</el-tag>
</template>
</el-col>
<el-col :span="4">
<div>
<span >消息接收者：</span>
</div>
<template v-for="logitem in item.rcvlog">
<el-tag type="warning">{{logitem.username}} [{{logitem.rvtm}}]</el-tag>
</template>
</el-col>
</el-row>
</el-row>
<div class="sun">
<el-row>
<el-col :span="2">
<el-button type="primary" @click="messageNote_toViewContentDialogDialog(item)" size="small">查看内容
</el-button>
</el-col>
<el-col style="width: 45%;margin-left: -10px" :span="14">
<el-input v-model="item.msg" readonly type="textarea" :rows="3"></el-input>
</el-col>
</el-row>
<el-row>
</el-row>
</div>
<el-divider></el-divider>
</div>
<!--分页区域-->
<div style="margin-top: 10px;margin-left: 20px;">
<el-row :gutter="24">
<el-col :span="10" style="margin-top: 5px">
<el-pagination
@size-change="messageNote_handleSizeChange"
@current-change="messageNote_handleCurrentChange"
:current-page="messageNote_queryInfo.pageNum"
:page-sizes="[2,10,50,200,500]"
:page-size="messageNote_queryInfo.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="messageNote_page.total">
</el-pagination>
</el-col>
</el-row>
</div>
</el-card>
<!-- 查看发送内容，对话框区域 -->
<div>
<el-dialog title="查看消息内容"
:visible.sync="messageNote_dialog.viewContentDialog"
style="margin-top: -80px" text-align="center" width="70%"
@close="messageNote_viewContentDialogClosed">
<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" 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)" size="medium"
style="width: 100px">xml格式化
</el-button>
<el-button type="info" @click="messageNote_dialog.viewContentDialog = false" size="medium"
style="width: 100px">取消
</el-button>
<el-button type="primary" @click="messageNote_dialog.viewContentDialog = false" size="medium"
style="width: 100px">关闭
</el-button>
</div>
</el-dialog>
</div>
</el-main>
</el-container>
</template>
<script>
import {selectMessageNoteList} from "../../api/message_bus";
import vkbeautify from "vkbeautify";
export default {
name: "MessageNoteSearch",
data() {
return {
// 抽屉
drawer: false,
messageNote_queryInfo: {
// 消息内容，别名
alias_sendContent: '',
// 当前页数
pageNum: 1,
// 每页条数
pageSize: 2
},
/**
* messageNote，分页
*/
messageNote_page: {
// 路由键列表
messageNoteList: [],
// 总条数
total: 0,
},
/**
* messageNote，加载
*/
messageNote_loading: {
// 列表加载
listLoading: false,
},
/**
* 发送内容,是否格式化
*/
isViewContent: false,
/**
* 发送内容,格式化之后
*/
xml_content: '',
/**
* messageNote,对话框管理
*/
messageNote_dialog: {
// 查看发送内容对话框
viewContentDialog: false,
},
/**
* 发送内容，表单
*/
messageNote_viewContentForm: {},
}
},
methods: {
/**
* 分页查询，监听 pageSize 改变的事件
*/
messageNote_handleSizeChange(newSize) {
this.messageNote_queryInfo.pageSize = newSize;
//刷新列表
this.messageNote_getList();
},
/**
* 分页查询，监听 pageNum 改变的事件
*/
messageNote_handleCurrentChange(newPage) {
this.messageNote_queryInfo.pageNum = newPage;
//刷新列表
this.messageNote_getList();
},
/**
* messageNote,分页查询
*/
messageNote_getList() {
let _this = this;
// 开启加载
this.messageNote_loading.listLoading = true;
selectMessageNoteList(this.messageNote_queryInfo).then((response) => {
let res = response.data;
if (res.code !== '200') {
// 关闭加载
_this.messageNote_loading.listLoading = false;
return _this.$message.error('获取消息收发记录，失败！');
}
// 获取列表数据
_this.messageNote_page.messageNoteList = res.data.content;
// 获取列表的总记录数
_this.messageNote_page.total = res.data.totalElements;
// 关闭加载
_this.messageNote_loading.listLoading = false;
_this.$message.success('获取消息收发记录，成功！');
}).catch(error => {
// 关闭加载
_this.messageNote_loading.listLoading = false;
_this.$message.error(error.toString());
});
},
/**
* 将消息内容，格式化xml
* @param content
*/
xml_format(content) {
this.isViewContent = true;
this.xml_content = vkbeautify.xml(content);
},
/**
* messageNote，查看发送内容，打开事件
*/
messageNote_toViewContentDialogDialog(item) {
this.messageNote_viewContentForm = Object.assign({}, item);
this.messageNote_dialog.viewContentDialog = true;
},
/**
* messageNote，查看发送内容对话框，关闭事件
*/
messageNote_viewContentDialogClosed() {
this.isViewContent = false;
// 重置对话框
this.$refs.messageNote_viewContentFormRef.resetFields();
},
}
}
</script>
<style scoped>
.ft{
position: relative;
}
.sun{
position: absolute;
top:100px;
width: 100%;
}
</style>