添加搜索消息内容界面

@@ -82,6 +82,7 @@ import Exchange from './views/bus/Exchange.vue'
 import RoutingKey from './views/bus/RoutingKey.vue'
 import RoutingKey from './views/bus/RoutingKey.vue'
 import Queue from './views/bus/Queue.vue'
 import Queue from './views/bus/Queue.vue'
 import MessageNote from './views/bus/MessageNote.vue'
 import MessageNote from './views/bus/MessageNote.vue'
+import MessageNoteSearch from './views/bus/MessageNoteSearch.vue'
 import UserMessageBinding from './views/bus/UserMessageBinding.vue'
 import UserMessageBinding from './views/bus/UserMessageBinding.vue'
 import UserInfo from "./views/bus/UserInfo.vue"
 import UserInfo from "./views/bus/UserInfo.vue"
 import QueueView from "./views/bus/view/QueueView.vue"
 import QueueView from "./views/bus/view/QueueView.vue"
@@ -156,6 +157,7 @@ let routes = [
             {path: '/routing', component: RoutingKey, name: '路由键管理'},
             {path: '/routing', component: RoutingKey, name: '路由键管理'},
             {path: '/umb', component: UserMessageBinding, name: '配置管理'},
             {path: '/umb', component: UserMessageBinding, name: '配置管理'},
             {path: '/note', component: MessageNote, name: '消息记录管理'},
             {path: '/note', component: MessageNote, name: '消息记录管理'},
+            {path: '/note_search', component: MessageNoteSearch, name: '消息记录搜索'},
             {path: '/es', component: ElasticSearchInfo, name: 'ES信息管理'},
             {path: '/es', component: ElasticSearchInfo, name: 'ES信息管理'},
         ]
         ]
     },
     },

+<template>
+    <el-container>
+        <el-main>
+            <el-card style="background-color: #F5F7FA">
+                <div>
+                    <el-row style="margin-left: 30px;">
+                        <el-col :span="4">
+                            <el-input v-model="messageNote_queryInfo.alias_sendContent" placeholder="发送内容"
+                                      size="medium" clearable prefix-icon="el-icon-search"></el-input>
+                        </el-col>
+                        <el-col :span="4">
+                            <el-button type="success" style="width:150px" size="medium" @click="messageNote_getList">
+                                查询
+                            </el-button>
+                        </el-col>
+                    </el-row>
+                </div>
+                <div :index="item.id+''" v-for="item in messageNote_page.messageNoteList" :key="item.id" style="margin-left: 30px;margin-top: 30px">
+                    <el-row>
+                        <el-col :span="3">
+                            <span>发送人：</span>
+                            <el-tag>{{item.username}}</el-tag>
+                        </el-col>
+                        <el-col :span="4">
+                            <span>发送时间：</span>
+                            <el-tag>{{item.alias_sendTime}}</el-tag>
+                        </el-col>
+                        <el-col :span="3">
+                            <span>服务器：</span>
+                            <el-tag type="success">{{item.serverName}}</el-tag>
+                        </el-col>
+                        <el-col :span="3">
+                            <span>虚拟主机：</span>
+                            <el-tag type="success">{{item.virtualHostName}}</el-tag>
+                        </el-col>
+                        <el-col :span="3">
+                            <span>交换机：</span>
+                            <el-tag type="danger">{{item.exchangeName}}</el-tag>
+                        </el-col>
+                        <el-col :span="3">
+                            <span>路由键：</span>
+                            <el-tag type="warning">{{item.routingKeyName}}</el-tag>
+                        </el-col>
+                        <el-col :span="2">
+                            <el-button type="primary" @click="messageNote_toViewContentDialogDialog(item)" size="small">查看内容
+                            </el-button>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col style="width: 90%" :span="22">
+                            <el-input v-model="item.alias_sendContent" readonly type="textarea" :rows="3"></el-input>
+                        </el-col>
+                    </el-row>
+                    <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="[10,50,200,500]"
+                                    :page-size="messageNote_queryInfo.pageSize"
+                                    layout=" 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.alias_sendContent" 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.alias_sendContent)" 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: 10
+                },
+                /**
+                 * 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() {
+                // 开启加载
+                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;
+                    // 获取列表的总记录数
+                    this.messageNote_page.total = res.total;
+                    // 关闭加载
+                    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>
+
+</style>