添加消息内容，XML格式化

王勇
package-lock.json
package.json
src/views/Login.vue
src/views/bus/MessageNote.vue
--- a/package-lock.json
查看文件 @d560c83
+++ b/package-lock.json
查看文件 @d560c83
@@ -12796,6 +12796,11 @@
         "extsprintf": "^1.2.0"
       }
     },
+    "vkbeautify": {
+      "version": "0.99.3",
+      "resolved": "https://registry.npmjs.org/vkbeautify/-/vkbeautify-0.99.3.tgz",
+      "integrity": "sha512-2ozZEFfmVvQcHWoHLNuiKlUfDKlhh4KGsy54U0UrlLMR1SO+XKAIDqBxtBwHgNrekurlJwE8A9K6L49T78ZQ9Q=="
+    },
     "vm-browserify": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.0.tgz",
--- a/package.json
查看文件 @d560c83
+++ b/package.json
查看文件 @d560c83
@@ -26,6 +26,7 @@
     "npm": "^6.8.0",
     "nprogress": "^0.2.0",
     "script-loader": "^0.7.2",
+    "vkbeautify": "^0.99.3",
     "vue": "^2.2.2",
     "vue-count-to": "^1.0.13",
     "vue-i18n": "^8.14.0",
--- a/src/views/Login.vue
查看文件 @d560c83
+++ b/src/views/Login.vue
查看文件 @d560c83
@@ -124,18 +124,18 @@
                             axios.defaults.headers.common['Authorization'] = 'Bearer '+token;
                             //处理用户menu
                             _this.userMenus =  loginUserMenus.list;
-                            console.log("userMenus:");
-                            console.log(_this.userMenus);
-                            console.log(loginUserMenus.list);
+                            // console.log("userMenus:");
+                            // console.log(_this.userMenus);
+                            // console.log(loginUserMenus.list);
                             let sysMenus = _this.$router.options.routes;
-                            console.log("sysMenus:");
-                            console.log(sysMenus);
+                            // console.log("sysMenus:");
+                            // console.log(sysMenus);
                             _this.handleMenuList(_this.$router.options.routes,_this.userMenus);
-                            console.log("user:");
-                            console.log(_this.$router.options.routes);
+                            // console.log("user:");
+                            // console.log(_this.$router.options.routes);
                             _this.$router.push({path: '/main'});
                         }
                     }).catch(error => {
--- a/src/views/bus/MessageNote.vue
查看文件 @d560c83
+++ b/src/views/bus/MessageNote.vue
查看文件 @d560c83
@@ -52,39 +52,45 @@
                                        @click="messageNote_toAddDialog">
                                 发送消息
                             </el-button>
-                            <el-button type="warning" style="width:150px" size="medium"
-                                       @click="messageNote_openDeleteTime">
-                                设置保留时间
-                            </el-button>
+                            <!--                            <el-button type="warning" style="width:150px" size="medium"-->
+                            <!--                                       @click="messageNote_openDeleteTime">-->
+                            <!--                                设置保留时间-->
+                            <!--                            </el-button>-->
                         </el-col>
                     </el-row>
                 </div>
                 <!-- 列表区域 -->
                 <div style="margin-top: 20px;">
                     <el-table :data="messageNote_page.messageNoteList" border
-                              v-loading="messageNote_loading.listLoading"
+                              v-loading="messageNote_loading.listLoading" size="small"
                               @selection-change="messageNote_selectChange"
                               element-loading-text="获取消息收发记录，拼命加载中">
                         <el-table-column type="selection" width="55" align="center"></el-table-column>
                         <el-table-column type="index" align="center"></el-table-column>
-                        <el-table-column label="用户名称" prop="username" align="center" width="220"></el-table-column>
-                        <el-table-column label="消息发送时间" prop="alias_sendTime" align="center" width="220">
+                        <el-table-column label="用户名称" prop="username" align="center" width="120"></el-table-column>
+                        <el-table-column label="消息发送时间" prop="alias_sendTime" align="center" width="150">
                         </el-table-column>
                         <el-table-column label="发送内容" prop="alias_sendContent" align="center" width="220">
                         </el-table-column>
-                        <el-table-column label="服务器名称" prop="serverName" align="center" width="220"></el-table-column>
-                        <el-table-column label="虚拟主机名称" prop="virtualHostName" align="center" width="220"></el-table-column>
-                        <el-table-column label="交换机名称" prop="exchangeName" align="center" width="220"></el-table-column>
-                        <el-table-column label="路由键名称" prop="routingKeyName" align="center" width="220"></el-table-column>
-                        <el-table-column label="相关描述" prop="description" align="center" width="220"></el-table-column>
-                        <el-table-column label="操作" width="245px" align="center" fixed="right">
+                        <el-table-column label="服务器名称" prop="serverName" align="center" width="150"></el-table-column>
+                        <el-table-column label="虚拟主机名称" prop="virtualHostName" align="center" width="150"></el-table-column>
+                        <el-table-column label="交换机名称" prop="exchangeName" align="center" width="150"></el-table-column>
+                        <el-table-column label="路由键名称" prop="routingKeyName" align="center" width="150"></el-table-column>
+                        <!-- <el-table-column label="相关描述" prop="description" align="center" width="220"></el-table-column>-->
+                        <el-table-column label="操作" width="300px" align="center" fixed="right">
                             <template slot-scope="scope">
-                                <!-- 编辑按钮-->
+
                                 <el-tooltip effect="dark" content="查看" placement="top-start" :enterable="false">
-                                    <el-button type="primary" icon="el-icon-edit" size="mini"
+                                    <el-button type="primary" icon="el-icon-view" size="mini"
                                                @click="messageNote_toEditDialog(scope.$index,scope.row)">查看
                                     </el-button>
                                 </el-tooltip>
+
+                                <el-tooltip effect="dark" content="查看发送内容" placement="top-start" :enterable="false">
+                                    <el-button type="success" icon="el-icon-view" size="mini"
+                                               @click="messageNote_toViewContentDialogDialog(scope.$index,scope.row)">发送内容
+                                    </el-button>
+                                </el-tooltip>
                                 <!-- 删除按钮-->
                                 <el-tooltip effect="dark" content="删除" placement="top-start" :enterable="false">
                                     <el-button type="danger" icon="el-icon-delete" size="mini"
@@ -111,9 +117,9 @@
                                     @size-change="messageNote_handleSizeChange"
                                     @current-change="messageNote_handleCurrentChange"
                                     :current-page="messageNote_queryInfo.pageNum"
-                                    :page-sizes="[10,20,30,50,100,200]"
+                                    :page-sizes="[10,50,200,500]"
                                     :page-size="messageNote_queryInfo.pageSize"
-                                    layout="total, sizes, prev, pager, next, jumper"
+                                    layout=" sizes, prev, pager, next, jumper"
                                     :total="messageNote_page.total">
                             </el-pagination>
                         </el-col>
@@ -261,7 +267,7 @@
                 </div>
             </el-dialog>
         </div>
-        <!-- 编辑，对话框区域 -->
+        <!-- 查看详细，对话框区域 -->
         <div>
             <el-dialog title="查看消息记录"
                        :visible.sync="messageNote_dialog.editDialog"
@@ -271,8 +277,7 @@
                 <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="small" readonly
                                   placeholder="用户名称">
                         </el-input>
@@ -402,10 +407,50 @@
                 </div>
             </el-dialog>
         </div>
+        <!-- 查看发送内容，对话框区域 -->
+        <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" :rules="messageNote_viewContentFormRules" ref="messageNote_viewContentFormRef">
+                    <el-form-item label="消息内容：" prop="alias_sendContent">
+                        <el-input v-model="messageNote_viewContentForm.alias_sendContent"
+                                  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>
+                <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>
+                    <!--                    <el-button type="primary" @click="messageNote_edit" :loading="messageNote_loading.editLoading"-->
+                    <!--                               size="medium" style="width: 100px">查看-->
+                    <!--                    </el-button>-->
+                </div>
+            </el-dialog>
+        </div>
     </el-container>
 </template>
 <script>
+    import vkbeautify from "vkbeautify";
     import {
         selectMessageNoteList,
         insertMessageNote,
@@ -451,6 +496,7 @@
                     // 路由键列表
                     routingKeyList: [],
                 },
+
                 /**
                  *  messageNote，搜索参数
                  */
@@ -478,6 +524,7 @@
                     // 每页条数
                     pageSize: 10
                 },
+
                 /**
                  * messageNote，分页
                  */
@@ -522,10 +569,27 @@
                     // 相关描述
                     description: '',
                 },
+
                 /**
                  * messageNote，编辑表单
                  */
                 messageNote_editForm: {},
+
+                /**
+                 * 发送内容，表单
+                 */
+                messageNote_viewContentForm: {},
+
+                /**
+                 * 发送内容,格式化之后
+                 */
+                xml_content: '',
+
+                /**
+                 * 发送内容,是否格式化
+                 */
+                isViewContent: false,
+
                 /**
                  * messageNote，加载
                  */
@@ -541,17 +605,19 @@
                     // 批量删除加载
                     batchDelLoading: false,
                 },
+
                 /**
                  *  messageNote,对话框管理
                  */
                 messageNote_dialog: {
                     // 添加对话框
                     addDialog: false,
-                    // 编辑对话框
+                    // 查看详细对话框
                     editDialog: false,
                     // 定时删除记录对话框
                     deleteTimeDialog: false,
-
+                    // 查看发送内容对话框
+                    viewContentDialog: false,
                 },
                 /**
@@ -599,6 +665,15 @@
                         {required: true, message: '请输入相关描述', trigger: ['blur', 'change']},
                     ],
                 },
+
+                messageNote_viewContentFormRules: {
+                    // 发送内容
+                    alias_sendContent: [
+                        {required: true, message: '请输入消息发送内容', trigger: ['blur', 'change']},
+                    ],
+                },
+
+
                 /**
                  * messageNote,编辑表单，验证规则
                  */
@@ -765,13 +840,31 @@
                 this.messageNote_editForm = Object.assign({}, row);
                 this.messageNote_dialog.editDialog = true;
             },
+
+            /**
+             * messageNote，查看发送内容，打开事件
+             */
+            messageNote_toViewContentDialogDialog(index, row) {
+                this.messageNote_viewContentForm = Object.assign({}, row);
+                this.messageNote_dialog.viewContentDialog = true;
+                // this.messageNote_viewContentForm.alias_sendContent = vkbeautify.xml(row.alias_sendContent);
+            },
             /**
              * messageNote，编辑对话框，关闭事件
              */
             messageNote_editDialogClosed() {
-                //重置对话框
+                // 重置对话框
                 this.$refs.messageNote_editFormRef.resetFields();
             },
+
+            /**
+             * messageNote，查看发送内容对话框，关闭事件
+             */
+            messageNote_viewContentDialogClosed() {
+                this.isViewContent = false;
+                // 重置对话框
+                this.$refs.messageNote_viewContentFormRef.resetFields();
+            },
             /**
              * messageNote，编辑功能
              */
@@ -903,7 +996,6 @@
             selectDeleteTime() {
                 getDeleteTime().then((response) => {
                     let res = response.data;
-                    console.log(res)
                     if (res.code !== '200') {
                         return this.$message.error('获取删除时间，失败！');
                     }
@@ -919,7 +1011,6 @@
                 const params = {deleteTime: this.schedulingDelete.deleteTime}
                 setDeleteTime(params).then((response) => {
                     let res = response.data;
-                    console.log(res)
                     if (res.code !== '200') {
                         return this.$message.error('设置删除时间，失败！');
                     }
@@ -1016,7 +1107,7 @@
              * 添加方法，服务器ID值，改变
              */
             messageNote_server_addChange(value) {
-                console.log("服务器ID值:" + value);
+
                 // 现将对应的虚拟主机和交换机的ID清空
                 this.messageNote_addForm.virtualHostId = undefined;
                 this.messageNote_addForm.exchangeId = undefined;
@@ -1038,7 +1129,6 @@
              * 添加方法，虚拟主机ID值，改变
              */
             messageNote_virtualHost_addChange(value) {
-                console.log("虚拟主机ID值:" + value);
                 // 先将对应的交换机和队列的ID清空
                 this.messageNote_addForm.exchangeId = undefined;
                 this.messageNote_addForm.queueId = undefined;
@@ -1051,7 +1141,7 @@
              * 添加方法，交换机ID值，改变
              */
             messageNote_exchange_addChange(value) {
-                console.log("交换机ID值:" + value);
+
                 // 先将对应的路由键的ID清空
                 this.messageNote_addForm.routingKeyId = undefined;
                 // 根据交换机ID，获取出对应的路由键的列表
@@ -1061,7 +1151,7 @@
              * 编辑方法，服务器ID值，改变
              */
             messageNote_server_editChange(value) {
-                console.log("服务器ID值:" + value);
+
                 // 现将对应的虚拟主机和交换机的ID清空
                 this.messageNote_editForm.virtualHostId = undefined;
                 this.messageNote_editForm.exchangeId = undefined;
@@ -1072,7 +1162,7 @@
              * 编辑方法，虚拟主机ID值，改变
              */
             messageNote_virtualHost_editChange(value) {
-                console.log("虚拟主机ID值:" + value);
+
                 // 先将对应的交换机和队列的ID清空
                 this.messageNote_editForm.exchangeId = undefined;
                 this.messageNote_editForm.queueId = undefined;
@@ -1085,7 +1175,7 @@
              * 编辑方法，交换机ID值，改变
              */
             messageNote_exchange_editChange(value) {
-                console.log("交换机ID值:" + value);
+
                 // 先将对应的路由键的ID清空
                 this.messageNote_editForm.routingKeyId = undefined;
                 // 根据交换机ID，获取出对应的路由键的列表
@@ -1117,6 +1207,15 @@
                     this.$message.error(error.toString());
                 });
             },
+
+            /**
+             * 将消息内容，格式化xml
+             * @param content
+             */
+            xml_format(content) {
+                this.isViewContent = true;
+                this.xml_content = vkbeautify.xml(content);
+            },
         },
         created() {
             // 刷新列表