朱兆平 / vue_cli · 提交

转到一个项目

作者 王勇
提交 947b164581ebde83252cb03660c33f793c1d23a9 1 个父辈 2c020d56

监控队列与交换机，基本完善

内嵌 并排对比
正在显示 5 个修改的文件 包含 783 行增加 和 48 行删除
@@ -104,4 +104,13 @@ export const getUserInfoList = params =>{return http.get(`${baseUrl}/user/userLi @@ -104,4 +104,13 @@ export const getUserInfoList = params =>{return http.get(`${baseUrl}/user/userLi
104 export const insertUserInfo = params =>{return http.post(`${baseUrl}/user/insert`, params);}; 104 export const insertUserInfo = params =>{return http.post(`${baseUrl}/user/insert`, params);};
105 export const selectUserInfoList = params =>{return http.get(`${baseUrl}/user/list`, params);}; 105 export const selectUserInfoList = params =>{return http.get(`${baseUrl}/user/list`, params);};
106 export const deleteUserInfo = params =>{return http.del(`${baseUrl}/user/delete`, params);}; 106 export const deleteUserInfo = params =>{return http.del(`${baseUrl}/user/delete`, params);};
107 -export const deleteUserRelation = params =>{return http.del(`${baseUrl}/user/deleteRelation`, params);};  
  107 +export const deleteUserRelation = params =>{return http.del(`${baseUrl}/user/deleteRelation`, params);};
  108 +export const updatePassword = params =>{return http.put(`${baseUrl}/user/updatePassword`, params);};
  109 +// 批量删除用户
  110 +export const batchDeleteUser = params =>{return http.del(`${baseUrl}/user/batch_delete`, params);};
  111 +// 批量删除用户关系
  112 +export const batchDeleteUserRelation = params =>{return http.del(`${baseUrl}/user/batch_deleteRelation`, params);};
  113 +
  114 +// 监控队列
  115 +export const selectQueueViewList = params =>{return http.get(`${baseUrl}/view/queue/list`, params);};
  116 +export const selectExchangeViewList = params =>{return http.get(`${baseUrl}/view/exchange/list`, params);};
@@ -83,8 +83,9 @@ import RoutingKey from './views/bus/RoutingKey.vue' @@ -83,8 +83,9 @@ import RoutingKey from './views/bus/RoutingKey.vue'
83 import Queue from './views/bus/Queue.vue' 83 import Queue from './views/bus/Queue.vue'
84 import MessageNote from './views/bus/MessageNote.vue' 84 import MessageNote from './views/bus/MessageNote.vue'
85 import UserMessageBinding from './views/bus/UserMessageBinding.vue' 85 import UserMessageBinding from './views/bus/UserMessageBinding.vue'
86 -import UserInfo from "./views/bus/UserInfo.vue";  
87 - 86 +import UserInfo from "./views/bus/UserInfo.vue"
  87 +import QueueView from "./views/bus/view/QueueView.vue"
  88 +import ExchangeView from "./views/bus/view/ExchangeView.vue"
88 89
89 90
90 let routes = [ 91 let routes = [
@@ -144,6 +145,17 @@ let routes = [ @@ -144,6 +145,17 @@ let routes = [
144 ] 145 ]
145 }, 146 },
146 147
  148 + {
  149 + path: '/bus/view',
  150 + component: Home,
  151 + name: '消息监控中心',
  152 + iconCls: 'el-icon-view',
  153 + children: [
  154 + {path: '/queueView', component: QueueView, name: '队列监控'},
  155 + {path: '/exchangeView', component: ExchangeView, name: '交换机监控'},
  156 + ]
  157 + },
  158 +
147 159
148 // { 160 // {
149 // path: '/guestService', 161 // path: '/guestService',
@@ -14,15 +14,14 @@ @@ -14,15 +14,14 @@
14 placeholder="服务器名称" clearable></el-input> 14 placeholder="服务器名称" clearable></el-input>
15 </el-col> 15 </el-col>
16 <el-col :span="4"> 16 <el-col :span="4">
17 - <el-input v-model="user_queryInfo.virtualHostName" prefix-icon="el-icon-search"  
18 - size="medium" 17 + <el-input v-model="user_queryInfo.virtualHostName" prefix-icon="el-icon-search" size="medium"
19 placeholder="虚拟主机名称" clearable></el-input> 18 placeholder="虚拟主机名称" clearable></el-input>
20 </el-col> 19 </el-col>
21 <el-col :span="8"> 20 <el-col :span="8">
22 <el-button type="success" style="width:150px" size="medium" @click="user_getList"> 21 <el-button type="success" style="width:150px" size="medium" @click="user_getList">
23 查询用户信息 22 查询用户信息
24 </el-button> 23 </el-button>
25 - <el-button type="primary" style="width:150px" size="medium" @click="user_toAddDialog"> 24 + <el-button type="primary" style="width:150px" :loading="user_loading.listLoading" size="medium" @click="user_toAddDialog">
26 添加用户信息 25 添加用户信息
27 </el-button> 26 </el-button>
28 </el-col> 27 </el-col>
@@ -35,42 +34,49 @@ @@ -35,42 +34,49 @@
35 element-loading-text="获取用户信息列表，拼命加载中"> 34 element-loading-text="获取用户信息列表，拼命加载中">
36 <el-table-column type="selection" width="55" align="center"></el-table-column> 35 <el-table-column type="selection" width="55" align="center"></el-table-column>
37 <el-table-column type="index" align="center"></el-table-column> 36 <el-table-column type="index" align="center"></el-table-column>
38 - <el-table-column label="用户名称" prop="username" align="center" width="190"></el-table-column>  
39 - <el-table-column label="服务器名称" prop="serverName" align="center" width="190"></el-table-column> 37 + <el-table-column label="用户名称" prop="username" align="center" width="170"></el-table-column>
  38 + <el-table-column label="真实姓名" prop="realName" align="center" width="170"></el-table-column>
  39 + <el-table-column label="服务器名称" prop="serverName" align="center" width="180"></el-table-column>
40 <el-table-column label="虚拟主机名称" prop="virtualHostName" align="center" width="300"></el-table-column> 40 <el-table-column label="虚拟主机名称" prop="virtualHostName" align="center" width="300"></el-table-column>
41 - <el-table-column label="操作" width="340px" align="center">  
42 - <!-- 删除用户 -->  
43 - <el-tooltip effect="dark" content="删除用户" placement="top-start" :enterable="false">  
44 - <el-button type="danger" icon="el-icon-delete" size="small"  
45 - :loading="user_loading.delLoading"  
46 - @click="user_remove(scope.$index,scope.row)">删除用户  
47 - </el-button>  
48 - </el-tooltip>  
49 - <!-- 编辑关系 -->  
50 - <el-tooltip effect="dark" content="编辑关系" placement="top-start" :enterable="false">  
51 - <el-button type="primary" icon="el-icon-edit" size="small"  
52 - @click="user_toEditDialog(scope.$index,scope.row)">编辑关系  
53 - </el-button>  
54 - </el-tooltip>  
55 - <!-- 删除关系 -->  
56 - <el-tooltip effect="dark" content="删除关系" placement="top-start" :enterable="false">  
57 - <el-button type="danger" icon="el-icon-edit" size="small"  
58 - @click="user_removeRelation(scope.$index,scope.row)">删除关系  
59 - </el-button>  
60 - </el-tooltip>  
61 - <!-- 修改密码 -->  
62 - 41 + <el-table-column label="操作" width="340px" align="center" fixed="right">
  42 + <template slot-scope="scope">
  43 + <!-- 删除用户 -->
  44 + <el-tooltip effect="dark" content="删除用户" placement="top-start" :enterable="false">
  45 + <el-button type="danger" icon="el-icon-delete" size="small"
  46 + :loading="user_loading.delLoading"
  47 + @click="user_remove(scope.$index,scope.row)">删除用户
  48 + </el-button>
  49 + </el-tooltip>
  50 + <!-- 编辑关系 -->
  51 + <!-- <el-tooltip effect="dark" content="编辑关系" placement="top-start" :enterable="false">-->
  52 + <!-- <el-button type="primary" icon="el-icon-edit" size="small"-->
  53 + <!-- @click="user_toEditDialog(scope.$index,scope.row)">编辑关系-->
  54 + <!-- </el-button>-->
  55 + <!-- </el-tooltip>-->
  56 + <!-- 删除关系 -->
  57 + <el-tooltip effect="dark" content="删除关系" placement="top-start" :enterable="false">
  58 + <el-button type="danger" icon="el-icon-edit" size="small"
  59 + @click="user_removeRelation(scope.$index,scope.row)">删除关系
  60 + </el-button>
  61 + </el-tooltip>
  62 + <!-- 修改密码 -->
  63 + </template>
63 </el-table-column> 64 </el-table-column>
64 </el-table> 65 </el-table>
65 </div> 66 </div>
66 <!-- 分页区域 --> 67 <!-- 分页区域 -->
67 <div style="margin-top: 10px"> 68 <div style="margin-top: 10px">
68 <el-row :gutter="24"> 69 <el-row :gutter="24">
69 - <el-col :span="5"> 70 + <el-col :span="8">
  71 + <el-button type="danger" icon="el-icon-delete"
  72 + :loading="user_loading.batchDelLoading"
  73 + :disabled="this.user_page.selectList.length===0"
  74 + @click="user_batchRemove">批量删除用户
  75 + </el-button>
70 <el-button type="danger" icon="el-icon-delete" 76 <el-button type="danger" icon="el-icon-delete"
71 :loading="user_loading.batchDelLoading" 77 :loading="user_loading.batchDelLoading"
72 :disabled="this.user_page.selectList.length===0" 78 :disabled="this.user_page.selectList.length===0"
73 - @click="user_batchRemove">批量删除 79 + @click="user_batchRemoveRelation">批量删除用户关系
74 </el-button> 80 </el-button>
75 </el-col> 81 </el-col>
76 <el-col :span="10" style="margin-top: 5px"> 82 <el-col :span="10" style="margin-top: 5px">
@@ -92,25 +98,33 @@ @@ -92,25 +98,33 @@
92 <div> 98 <div>
93 <el-dialog title="添加MQ用户信息" 99 <el-dialog title="添加MQ用户信息"
94 :visible.sync="user_dialog.addDialog" 100 :visible.sync="user_dialog.addDialog"
  101 + v-loading="user_loading.addLoading" element-loading-text="正在添加MQ用户，拼命加载中"
95 style="margin-top: -20px" 102 style="margin-top: -20px"
96 width="50%" text-align="center" @close="user_addDialogClosed"> 103 width="50%" text-align="center" @close="user_addDialogClosed">
97 <el-form :inline="true" label-width="145px" status-icon style="margin-top: -10px" 104 <el-form :inline="true" label-width="145px" status-icon style="margin-top: -10px"
98 :model="user_addForm" :rules="user_addFormRules" ref="user_addFormRef" align="center"> 105 :model="user_addForm" :rules="user_addFormRules" ref="user_addFormRef" align="center">
99 - <el-form-item label="用户名称：" prop="exchangeName"> 106 + <el-form-item label="用户名称：" prop="username">
100 <el-input v-model="user_addForm.username" style="width:270px" size="small" clearable 107 <el-input v-model="user_addForm.username" style="width:270px" size="small" clearable
101 placeholder="请输入用户名称"> 108 placeholder="请输入用户名称">
102 </el-input> 109 </el-input>
103 </el-form-item> 110 </el-form-item>
  111 +
104 <el-form-item label="用户密码：" prop="firstPassword"> 112 <el-form-item label="用户密码：" prop="firstPassword">
105 <el-input type="password" v-model="user_addForm.firstPassword" style="width:270px" 113 <el-input type="password" v-model="user_addForm.firstPassword" style="width:270px"
106 size="small" clearable show-password placeholder="请输入用户密码"></el-input> 114 size="small" clearable show-password placeholder="请输入用户密码"></el-input>
107 </el-form-item> 115 </el-form-item>
  116 +
108 <el-form-item label="重新输入密码：" prop="password"> 117 <el-form-item label="重新输入密码：" prop="password">
109 <el-input type="password" v-model="user_addForm.password" style="width:270px" 118 <el-input type="password" v-model="user_addForm.password" style="width:270px"
110 size="small" clearable show-password placeholder="请重新输入密码"></el-input> 119 size="small" clearable show-password placeholder="请重新输入密码"></el-input>
111 </el-form-item> 120 </el-form-item>
  121 + <el-form-item label="真实姓名：" prop="realName">
  122 + <el-input v-model="user_addForm.realName" style="width:270px" size="small" clearable
  123 + placeholder="请输入真实姓名">
  124 + </el-input>
  125 + </el-form-item>
112 <br/> 126 <br/>
113 - <el-form-item label="选择关系："> 127 + <el-form-item label="选择用户关系：">
114 <br/> 128 <br/>
115 <el-tree style="width:270px" 129 <el-tree style="width:270px"
116 :data="user_config.tree.server_hostList" 130 :data="user_config.tree.server_hostList"
@@ -131,26 +145,113 @@ @@ -131,26 +145,113 @@
131 </div> 145 </div>
132 </el-dialog> 146 </el-dialog>
133 </div> 147 </div>
  148 +
  149 + <!-- 编辑，对话框区域 -->
  150 + <div>
  151 + <el-dialog title="编辑MQ用户关系"
  152 + :visible.sync="user_dialog.editDialog"
  153 + style="margin-top: -20px"
  154 + width="50%" text-align="center" @close="user_editDialogClosed">
  155 + <el-form :inline="true" label-width="145px" status-icon style="margin-top: -10px"
  156 + :model="user_editForm" :rules="user_editFormRules" ref="user_editFormRef" align="center">
  157 + <el-form-item label="用户名称：" prop="username">
  158 + <el-input v-model="user_editForm.username" style="width:300px" size="small" clearable readonly
  159 + placeholder="请输入用户名称"></el-input>
  160 + </el-form-item>
  161 + <el-form-item label="服务器名称：" prop="serverName">
  162 + <el-input v-model="user_editForm.serverName" style="width:300px" size="small" clearable readonly
  163 + placeholder="请输入服务器名称"></el-input>
  164 + </el-form-item>
  165 + <br/>
  166 + <el-form-item label="现有用户关系：" prop="virtualHostIds">
  167 + <el-select v-model="user_editForm.virtualHostIds" prefix-icon="el-icon-search" clearable
  168 + style="width:300px" size="small" filterable multiple disabled
  169 + @change="user_editChange"
  170 + placeholder="选择用户关系">
  171 + <el-option
  172 + v-for="item in (user_config.virtualHostList)"
  173 + :key="item.id"
  174 + :label="item.virtualHostName"
  175 + :value="item.id">
  176 + </el-option>
  177 + </el-select>
  178 + </el-form-item>
  179 + <br/>
  180 + <el-form-item label="选择用户关系：" prop="virtualHostId">
  181 + <el-select v-model="user_editForm.virtualHostId" prefix-icon="el-icon-search" clearable
  182 + style="width:300px" size="small" filterable multiple
  183 + @change="user_editChange"
  184 + placeholder="选择用户关系">
  185 + <el-option
  186 + v-for="item in (user_config.virtualHostList)"
  187 + :key="item.id"
  188 + :label="item.virtualHostName"
  189 + :value="item.id">
  190 + </el-option>
  191 + </el-select>
  192 + </el-form-item>
  193 +
  194 + <br/>
  195 + <el-form-item label="选择用户关系：">
  196 + <br/>
  197 + <el-tree style="width:270px"
  198 + @check-change="user_editTreeChange"
  199 + :data="user_config.tree.edit_serverHostList"
  200 + :props="user_config.tree.defaultParams"
  201 + ref="tree_edit"
  202 + node-key="id"
  203 + :default-checked-keys='user_editForm.aliasName'
  204 + show-checkbox highlight-current default-expand-all>
  205 + </el-tree>
  206 + </el-form-item>
  207 + </el-form>
  208 +
  209 + <div slot="footer" class="dialog-footer" style="text-align: center;margin-top: -20px">
  210 + <el-button type="info" @click="user_dialog.editDialog = false" size="medium"
  211 + style="width: 100px">取消
  212 + </el-button>
  213 + <el-button type="primary" @click="user_edit" :loading="user_loading.editLoading"
  214 + size="medium" style="width: 100px">编辑关系
  215 + </el-button>
  216 + </div>
  217 +
  218 + </el-dialog>
  219 + </div>
134 </el-container> 220 </el-container>
135 </template> 221 </template>
136 222
137 <script> 223 <script>
138 import { 224 import {
139 getServerAndHostList, 225 getServerAndHostList,
140 - selectUserInfoList 226 + selectUserInfoList,
  227 + insertUserInfo,
  228 + deleteUserInfo,
  229 + deleteUserRelation,
  230 + getHostList,
  231 + batchDeleteUser,
  232 + batchDeleteUserRelation
141 } from "../../api/message_bus"; 233 } from "../../api/message_bus";
142 234
143 export default { 235 export default {
144 name: "UserInfo", 236 name: "UserInfo",
145 data() { 237 data() {
  238 + const validatePassword = (rule, value, callback) => {
  239 + if (value === '') {
  240 + callback(new Error('请重新输入密码'));
  241 + } else if (value !== this.user_addForm.firstPassword) {
  242 + callback(new Error('两次输入密码不一致!'));
  243 + } else {
  244 + callback();
  245 + }
  246 + };
146 return { 247 return {
147 -  
148 /** 248 /**
149 * user，配置与参数 249 * user，配置与参数
150 */ 250 */
151 user_config: { 251 user_config: {
  252 + virtualHostList: [],
152 tree: { 253 tree: {
153 - treeList: [], 254 + edit_serverHostList: [],
154 // 服务器及虚拟主机列表 255 // 服务器及虚拟主机列表
155 server_hostList: [], 256 server_hostList: [],
156 defaultParams: { 257 defaultParams: {
@@ -191,7 +292,13 @@ @@ -191,7 +292,13 @@
191 /** 292 /**
192 * user，新增表单 293 * user，新增表单
193 */ 294 */
194 - user_addForm: {}, 295 + user_addForm: {
  296 + username: '',
  297 + realName: '',
  298 + firstPassword: '',
  299 + password: '',
  300 + virtualHostId: '',
  301 + },
195 302
196 /** 303 /**
197 * user，编辑表单 304 * user，编辑表单
@@ -211,7 +318,21 @@ @@ -211,7 +318,21 @@
211 /** 318 /**
212 * user,添加表单，验证规则 319 * user,添加表单，验证规则
213 */ 320 */
214 - user_addFormRules: {}, 321 + user_addFormRules: {
  322 + realName: [
  323 + {required: true, message: '请输入真实姓名', trigger: ['blur', 'change']},
  324 + ],
  325 + username: [
  326 + {required: true, message: '请输入用户名称', trigger: ['blur', 'change']},
  327 + ],
  328 + firstPassword: [
  329 + {required: true, message: '请输入用户密码', trigger: ['blur', 'change']},
  330 + ],
  331 + password: [
  332 + {required: true, message: '请再次输入密码', trigger: ['blur', 'change']},
  333 + {validator: validatePassword, trigger: ['blur', 'change']}
  334 + ],
  335 + },
215 /** 336 /**
216 * user,编辑表单，验证规则 337 * user,编辑表单，验证规则
217 */ 338 */
@@ -281,7 +402,7 @@ @@ -281,7 +402,7 @@
281 * user，添加对话框，打开事件 402 * user，添加对话框，打开事件
282 */ 403 */
283 user_toAddDialog() { 404 user_toAddDialog() {
284 - this.selectServerAndHostList(); 405 + // this.selectServerAndHostList();
285 this.user_dialog.addDialog = true; 406 this.user_dialog.addDialog = true;
286 }, 407 },
287 /** 408 /**
@@ -296,15 +417,67 @@ @@ -296,15 +417,67 @@
296 * user，添加功能 417 * user，添加功能
297 */ 418 */
298 user_add() { 419 user_add() {
299 - console.log(this.$refs.tree.getCheckedKeys()); 420 + this.user_addForm.virtualHostId = this.$refs.tree.getCheckedKeys().join();
  421 + if (this.user_addForm.virtualHostId === '') {
  422 + return this.$confirm('用户关系不能为空，请务必选择用户关系', '警告', {
  423 + confirmButtonText: '确定',
  424 + cancelButtonText: '取消',
  425 + type: 'warning'
  426 + }
  427 + )
  428 + }
  429 + this.$refs.user_addFormRef.validate(valid => {
  430 + // 未通过，表单预校验
  431 + if (!valid) return;
  432 + this.user_loading.addLoading = true;
  433 + insertUserInfo(this.user_addForm).then((response) => {
  434 + let res = response.data;
  435 + // 添加失败
  436 + if (res.code !== '200') {
  437 + if (res.code === '201') {
  438 + this.user_loading.addLoading = false;
  439 + return this.$confirm(res.msg, '提示', {
  440 + confirmButtonText: '确定',
  441 + cancelButtonText: '取消',
  442 + type: 'warning'
  443 + }
  444 + )
  445 + }
  446 + // 关闭加载
  447 + this.user_loading.addLoading = false;
  448 + this.$message.error(res.msg);
  449 + }
  450 + // 添加，成功
  451 + this.$message.success(res.msg);
  452 + // 关闭加载
  453 + this.user_loading.addLoading = false;
  454 + // 隐藏对话框
  455 + this.user_dialog.addDialog = false;
  456 + // 刷新列表
  457 + this.user_getList();
  458 + }).catch(error => {
  459 + this.user_loading.addLoading = false;
  460 + this.$message.error(error.toString());
  461 + });
  462 + })
300 }, 463 },
301 464
302 /** 465 /**
303 * user，编辑对话框，打开事件 466 * user，编辑对话框，打开事件
304 */ 467 */
305 user_toEditDialog(index, row) { 468 user_toEditDialog(index, row) {
306 - this.user_dialog.editDialog = true; 469 + this.selectHostList(row.serverId);
  470 + this.selectEditServerAndHostList(row.serverName)
307 this.user_editForm = Object.assign({}, row); 471 this.user_editForm = Object.assign({}, row);
  472 +
  473 + this.user_editForm.virtualHostIds = [];
  474 + if (this.user_editForm.virtualHostId.indexOf(",") === -1) {
  475 + // 队列id中不包含","
  476 + this.user_editForm.virtualHostIds[0] = this.user_editForm.virtualHostId;
  477 + } else {
  478 + this.user_editForm.virtualHostIds = this.user_editForm.virtualHostId.split(",")
  479 + }
  480 + this.user_dialog.editDialog = true;
308 }, 481 },
309 482
310 /** 483 /**
@@ -316,24 +489,93 @@ @@ -316,24 +489,93 @@
316 }, 489 },
317 490
318 /** 491 /**
  492 + * user，编辑对话框，改变
  493 + */
  494 + user_editChange(value) {
  495 +
  496 + },
  497 +
  498 + /**
  499 + * user，编辑对话框中的tree组件，改变
  500 + */
  501 + user_editTreeChange(value) {
  502 + this.user_editForm.virtualHostId = this.$refs.tree_edit.getCheckedKeys().join();
  503 + console.log(this.user_editForm.virtualHostId)
  504 + },
  505 +
  506 + /**
319 * user，编辑功能 507 * user，编辑功能
320 */ 508 */
321 user_edit() { 509 user_edit() {
322 - 510 + this.user_addForm.virtualHostId = this.$refs.tree.getCheckedKeys().join();
323 }, 511 },
324 512
325 /** 513 /**
326 * user，删除功能 514 * user，删除功能
327 */ 515 */
328 user_remove(index, row) { 516 user_remove(index, row) {
329 - 517 + // 弹框询问是否删除？
  518 + this.$confirm('此操作永久删除该用户信息, 是否继续?', '警告', {
  519 + confirmButtonText: '确定删除',
  520 + cancelButtonText: '取消',
  521 + type: 'warning'
  522 + }
  523 + ).then(() => {
  524 + // 开启加载
  525 + this.user_loading.delLoading = true;
  526 + deleteUserInfo(row).then((response) => {
  527 + let res = response.data;
  528 + if (res.code !== '200') {
  529 + // 关闭加载
  530 + this.user_loading.delLoading = false;
  531 + return this.$message.error(res.msg);
  532 + }
  533 + // 关闭加载
  534 + this.user_loading.delLoading = false;
  535 + this.$message.success(res.msg);
  536 + // 刷新列表
  537 + this.user_getList();
  538 + }).catch(error => {
  539 + // 关闭加载
  540 + this.user_loading.delLoading = false;
  541 + this.$message.error(error.toString());
  542 + });
  543 + }).catch(() => {
  544 + });
330 }, 545 },
331 546
332 /** 547 /**
333 * user，删除用户关系 548 * user，删除用户关系
334 */ 549 */
335 user_removeRelation(index, row) { 550 user_removeRelation(index, row) {
336 - 551 + // 弹框询问是否删除？
  552 + this.$confirm('此操作永久删除该用户信息, 是否继续?', '警告', {
  553 + confirmButtonText: '确定删除',
  554 + cancelButtonText: '取消',
  555 + type: 'warning'
  556 + }
  557 + ).then(() => {
  558 + // 开启加载
  559 + this.user_loading.delLoading = true;
  560 + deleteUserRelation(row).then((response) => {
  561 + let res = response.data;
  562 + if (res.code !== '200') {
  563 + // 关闭加载
  564 + this.user_loading.delLoading = false;
  565 + return this.$message.error(res.msg);
  566 + }
  567 + // 关闭加载
  568 + this.user_loading.delLoading = false;
  569 + this.$message.success(res.msg);
  570 + // 刷新列表
  571 + this.user_getList();
  572 + }).catch(error => {
  573 + // 关闭加载
  574 + this.user_loading.delLoading = false;
  575 + this.$message.error(error.toString());
  576 + });
  577 + }).catch(() => {
  578 + });
337 }, 579 },
338 580
339 /** 581 /**
@@ -344,15 +586,94 @@ @@ -344,15 +586,94 @@
344 }, 586 },
345 587
346 /** 588 /**
347 - * user，批量删除功能 589 + * user，批量删除用户
348 */ 590 */
349 user_batchRemove() { 591 user_batchRemove() {
  592 + const usernames = this.user_page.selectList.map(item => item.username).toString().split(",");
  593 + const serverNames = this.user_page.selectList.map(item => item.serverName).toString().split(",");
  594 + const params = [];
  595 + if (usernames.length === serverNames.length) {
  596 + for (let i = 0; i < usernames.length; i++) {
  597 + let param = {
  598 + username: usernames[i],
  599 + serverName: serverNames[i],
  600 + }
  601 + console.log(param)
  602 + params.push(param)
  603 + }
  604 + } else {
  605 + return this.$message.error("批量删除用户失败，请仔细检查");
  606 + }
  607 + console.log(params)
  608 + this.$confirm('此操作永久删除该用户, 是否继续?', '警告', {
  609 + confirmButtonText: '确定删除',
  610 + cancelButtonText: '取消',
  611 + type: 'warning'
  612 + }
  613 + ).then(() => {
  614 + // 开启加载
  615 + this.user_loading.listLoading = true;
  616 + batchDeleteUser(params).then((response) => {
  617 + let res = response.data;
  618 + if (res.code !== '200') {
  619 + // 关闭加载
  620 + this.user_loading.listLoading = false;
  621 + return this.$message.error(res.msg);
  622 + }
  623 + // 关闭加载
  624 + this.user_loading.listLoading = false;
  625 + this.$message.success(res.msg);
  626 + // 刷新列表
  627 + this.user_getList();
  628 + }).catch(error => {
  629 + // 关闭加载
  630 + this.user_loading.listLoading = false;
  631 + this.$message.error(error.toString());
  632 + });
  633 + }).catch(() => {
  634 + });
  635 + },
  636 +
  637 + /**
  638 + * user，批量删除用户关系功能
  639 + */
  640 + user_batchRemoveRelation() {
350 const ids = this.user_page.selectList.map(item => item.id).toString(); 641 const ids = this.user_page.selectList.map(item => item.id).toString();
  642 + console.log(ids)
  643 + const param = {
  644 + id: ids,
  645 + }
  646 + this.$confirm('此操作永久删除该用户关系, 是否继续?', '警告', {
  647 + confirmButtonText: '确定删除',
  648 + cancelButtonText: '取消',
  649 + type: 'warning'
  650 + }
  651 + ).then(() => {
  652 + // 开启加载
  653 + this.user_loading.listLoading = true;
  654 + batchDeleteUserRelation(param).then((response) => {
  655 + let res = response.data;
  656 + if (res.code !== '200') {
  657 + // 关闭加载
  658 + this.user_loading.listLoading = false;
  659 + return this.$message.error(res.msg);
  660 + }
  661 + // 关闭加载
  662 + this.user_loading.listLoading = false;
  663 + this.$message.success(res.msg);
  664 + // 刷新列表
  665 + this.user_getList();
  666 + }).catch(error => {
  667 + // 关闭加载
  668 + this.user_loading.listLoading = false;
  669 + this.$message.error(error.toString());
  670 + });
  671 + }).catch(() => {
  672 + });
351 }, 673 },
352 674
353 /** 675 /**
354 - * 服务器与虚拟主机 1：n  
355 - * 获取列表 676 + * MQ服务器与虚拟主机（1：n）的列表
356 */ 677 */
357 selectServerAndHostList() { 678 selectServerAndHostList() {
358 getServerAndHostList().then((response) => { 679 getServerAndHostList().then((response) => {
@@ -366,10 +687,44 @@ @@ -366,10 +687,44 @@
366 this.$message.error(error.toString()); 687 this.$message.error(error.toString());
367 }); 688 });
368 }, 689 },
  690 +
  691 + /**
  692 + * 编辑列表的MQ服务器与虚拟主机（1：n）的列表
  693 + */
  694 + selectEditServerAndHostList(serverName) {
  695 + const param = {serverName: serverName};
  696 + getServerAndHostList(param).then((response) => {
  697 + let res = response.data;
  698 + if (res.code !== '200') {
  699 + return this.$message.error('获取服务器与虚拟主机信息，失败！');
  700 + }
  701 + // 获取列表数据
  702 + this.user_config.tree.edit_serverHostList = res.data;
  703 + }).catch(error => {
  704 + this.$message.error(error.toString());
  705 + });
  706 + },
  707 +
  708 + /**
  709 + * 获取虚拟主机列表
  710 + */
  711 + selectHostList(serverId) {
  712 + let params = {serverId: serverId};
  713 + getHostList(params).then((response) => {
  714 + let res = response.data;
  715 + if (res.code !== '200') {
  716 + return this.$message.error('获取虚拟主机列表，失败！');
  717 + }
  718 + this.user_config.virtualHostList = res.data;
  719 + }).catch(error => {
  720 + this.$message.error(error.toString());
  721 + });
  722 + },
369 }, 723 },
370 created() { 724 created() {
371 }, 725 },
372 mounted() { 726 mounted() {
  727 + this.selectServerAndHostList();
373 }, 728 },
374 computed: {}, 729 computed: {},
375 } 730 }
  1 +<template>
  2 + <el-container>
  3 + <el-main>
  4 + <el-card style="background-color: #F5F7FA">
  5 + <!-- 搜素区域 -->
  6 + <div>
  7 + <el-row>
  8 + <el-col :span="4">
  9 + <el-input v-model="eView_queryInfo.serverName" prefix-icon="el-icon-search" size="medium"
  10 + placeholder="服务器名称" clearable></el-input>
  11 + </el-col>
  12 + <el-col :span="4">
  13 + <el-input v-model="eView_queryInfo.virtualHostName" prefix-icon="el-icon-search" size="medium"
  14 + placeholder="虚拟主机名称" clearable></el-input>
  15 + </el-col>
  16 + <el-col :span="8">
  17 + <el-button type="success" style="width:150px" size="medium" @click="getExchangeViewList">
  18 + 交换机监控
  19 + </el-button>
  20 + </el-col>
  21 + </el-row>
  22 + </div>
  23 + <!-- 列表区域 -->
  24 + <div style="margin-top: 20px;">
  25 + <el-table :data="eView_page.exchangeViewList" border size="small"
  26 + v-loading="eView_loading.listLoading" element-loading-text="获取交换机监控信息，拼命加载中">
  27 + <el-table-column type="index" align="center"></el-table-column>
  28 + <el-table-column label="服务器名称" prop="serverName" align="center" width="150"></el-table-column>
  29 + <el-table-column label="虚拟主机名称" prop="tempExchangeInfo.vhost" align="center" width="150"></el-table-column>
  30 + <el-table-column label="交换机名称" prop="tempExchangeInfo.name" align="center" width="150"></el-table-column>
  31 + <el-table-column label="进入数量" prop="tempExchangeInfo.message_stats.publish_in" align="center" width="120">
  32 + <template slot-scope="scope">
  33 + <span v-if="scope.row.tempExchangeInfo.message_stats ===null">0</span>
  34 + <span v-if="scope.row.tempExchangeInfo.message_stats !==null" style="color: #eb2f06">
  35 + {{scope.row.tempExchangeInfo.message_stats.publish_in}}
  36 + </span>
  37 + </template>
  38 + </el-table-column>
  39 + <el-table-column label="进入速率" prop="tempExchangeInfo.message_stats.publish_in_details.rate" align="center" width="100">
  40 + <template slot-scope="scope">
  41 + <span v-if="scope.row.tempExchangeInfo.message_stats ===null">0</span>
  42 + <span v-if="scope.row.tempExchangeInfo.message_stats !==null &&
  43 + scope.row.tempExchangeInfo.message_stats.publish_in_details !==null" style="color: #0984e3">
  44 + {{scope.row.tempExchangeInfo.message_stats.publish_in_details.rate}}
  45 + </span>
  46 + </template>
  47 + </el-table-column>
  48 + <el-table-column label="交换数量" prop="tempExchangeInfo.message_stats.publish_out" align="center" width="100">
  49 + <template slot-scope="scope">
  50 + <span v-if="scope.row.tempExchangeInfo.message_stats ===null">0</span>
  51 + <span v-if="scope.row.tempExchangeInfo.message_stats !==null" style="color: #eb2f06">
  52 + {{scope.row.tempExchangeInfo.message_stats.publish_out}}
  53 + </span>
  54 + </template>
  55 + </el-table-column>
  56 + <el-table-column label="交换速率" prop="tempExchangeInfo.message_stats.publish_out_details.rate" align="center" width="100">
  57 + <template slot-scope="scope">
  58 + <span v-if="scope.row.tempExchangeInfo.message_stats ===null">0</span>
  59 + <span v-if="scope.row.tempExchangeInfo.message_stats !==null &&
  60 + scope.row.tempExchangeInfo.message_stats.publish_out_details !==null" style="color: #0984e3">
  61 + {{scope.row.tempExchangeInfo.message_stats.publish_out_details.rate}}
  62 + </span>
  63 + </template>
  64 + </el-table-column>
  65 +
  66 + <el-table-column label="类型" prop="tempExchangeInfo.type" align="center" width="100"></el-table-column>
  67 + <el-table-column label="持久化" prop="tempExchangeInfo.durable" align="center" width="100">
  68 + <template slot-scope="scope">
  69 + <span v-if="scope.row.tempExchangeInfo.durable ===false">否</span>
  70 + <span v-if="scope.row.tempExchangeInfo.durable ===true">是</span>
  71 + </template>
  72 + </el-table-column>
  73 + <el-table-column label="自动删除" prop="tempExchangeInfo.auto_delete" align="center" width="100">
  74 + <template slot-scope="scope">
  75 + <span v-if="scope.row.tempExchangeInfo.auto_delete ===false">否</span>
  76 + <span v-if="scope.row.tempExchangeInfo.auto_delete ===true">是</span>
  77 + </template>
  78 + </el-table-column>
  79 +
  80 + </el-table>
  81 + </div>
  82 + <!-- 分页区域 -->
  83 + <div style="margin-top: 10px">
  84 + <el-row :gutter="24">
  85 + <el-col :span="6" style="margin-top: 5px"></el-col>
  86 + <el-col :span="10" style="margin-top: 5px">
  87 + <el-pagination
  88 + @size-change="eView_handleSizeChange"
  89 + @current-change="eView_handleCurrentChange"
  90 + :current-page="eView_queryInfo.pageNum"
  91 + :page-sizes="[10,50,100,500]"
  92 + :page-size="eView_queryInfo.pageSize"
  93 + layout="total, sizes, prev, pager, next, jumper"
  94 + :total="eView_page.total">
  95 + </el-pagination>
  96 + </el-col>
  97 + </el-row>
  98 + </div>
  99 + </el-card>
  100 + </el-main>
  101 + </el-container>
  102 +</template>
  103 +
  104 +<script>
  105 + import {selectExchangeViewList} from "../../../api/message_bus";
  106 +
  107 + export default {
  108 + name: "ExchangeView",
  109 + data() {
  110 + return {
  111 + eView_queryInfo: {
  112 + serverName: '',
  113 + virtualHostName: '',
  114 + pageNum: 1,
  115 + pageSize: 10
  116 + },
  117 + eView_page: {
  118 + exchangeViewList: [],
  119 + total: 0,
  120 + },
  121 + eView_loading: {
  122 + listLoading: false,
  123 + },
  124 + /**
  125 + * Boolean属性，选择列表
  126 + */
  127 + booleanList: [
  128 + {
  129 + value: true,
  130 + label: '是'
  131 + },
  132 + {
  133 + value: false,
  134 + label: '否'
  135 + },
  136 + ],
  137 + }
  138 + },
  139 + methods: {
  140 + /**
  141 + * 分页查询，监听 pageSize 改变的事件
  142 + */
  143 + eView_handleSizeChange(newSize) {
  144 + this.eView_queryInfo.pageSize = newSize;
  145 + this.getExchangeViewList();
  146 + },
  147 +
  148 + /**
  149 + * 分页查询，监听 pageNum 改变的事件
  150 + */
  151 + eView_handleCurrentChange(newPage) {
  152 + this.eView_queryInfo.pageNum = newPage;
  153 + this.getExchangeViewList();
  154 + },
  155 +
  156 + getExchangeViewList() {
  157 + this.eView_loading.listLoading = true;
  158 + selectExchangeViewList(this.eView_queryInfo).then((response) => {
  159 + let res = response.data;
  160 + if (res.code !== '200') {
  161 + this.eView_loading.listLoading = false;
  162 + return this.$message.error(res.msg);
  163 + }
  164 + this.eView_page.exchangeViewList = res.data;
  165 + console.log(this.eView_page.exchangeViewList)
  166 + this.eView_page.total = res.total;
  167 + this.eView_loading.listLoading = false;
  168 + }).catch(error => {
  169 + this.eView_loading.listLoading = false;
  170 + this.$message.error(error.toString());
  171 + });
  172 + }
  173 + },
  174 + created() {
  175 + },
  176 + mounted() {
  177 + this.timer = setInterval(this.getExchangeViewList, 5000);
  178 + },
  179 + beforeDestroy() {
  180 + clearInterval(this.timer);
  181 + },
  182 + computed: {},
  183 + }
  184 +</script>
  185 +
  186 +<style scoped>
  187 +</style>
  1 +<template>
  2 + <el-container>
  3 + <el-main>
  4 + <el-card style="background-color: #F5F7FA">
  5 + <!-- 搜素区域 -->
  6 + <div>
  7 + <el-row>
  8 + <el-col :span="4">
  9 + <el-input v-model="queueView_queryInfo.serverName" prefix-icon="el-icon-search" size="medium"
  10 + placeholder="服务器名称" clearable></el-input>
  11 + </el-col>
  12 + <el-col :span="4">
  13 + <el-input v-model="queueView_queryInfo.virtualHostName" prefix-icon="el-icon-search" size="medium"
  14 + placeholder="虚拟主机名称" clearable></el-input>
  15 + </el-col>
  16 + <el-col :span="8">
  17 + <el-button type="success" style="width:150px" size="medium" @click="getQueueViewList">
  18 + 队列监控
  19 + </el-button>
  20 + </el-col>
  21 + </el-row>
  22 + </div>
  23 + <!-- 列表区域 -->
  24 + <div style="margin-top: 20px;">
  25 + <el-table :data="queueView_page.queueViewList" border size="small"
  26 + v-loading="queueView_loading.listLoading" element-loading-text="获取队列监控信息，拼命加载中">
  27 + <el-table-column type="index" align="center"></el-table-column>
  28 + <el-table-column label="服务器名称" prop="serverName" align="center" width="150"></el-table-column>
  29 + <el-table-column label="虚拟主机名称" prop="queueInfo.vhost" align="center" width="150"></el-table-column>
  30 + <el-table-column label="队列名称" prop="queueInfo.name" align="center" width="230">
  31 + </el-table-column>
  32 + <el-table-column label="积压消息" prop="queueInfo.messages_ready" align="center" width="120">
  33 + <template slot-scope="scope">
  34 + <span v-if="scope.row.queueInfo.messages_ready !== null" style="color: #eb2f06">
  35 + {{scope.row.queueInfo.messages_ready}}
  36 + </span>
  37 + </template>
  38 + </el-table-column>
  39 + <el-table-column label="消息总数" prop="queueInfo.messages" align="center" width="120"></el-table-column>
  40 + <el-table-column label="持久化" prop="queueInfo.durable" align="center" width="120">
  41 + <template slot-scope="scope">
  42 + <span v-if="scope.row.queueInfo.durable ===false">否</span>
  43 + <span v-if="scope.row.queueInfo.durable ===true">是</span>
  44 + </template>
  45 + </el-table-column>
  46 + <el-table-column label="自动删除" prop="queueInfo.auto_delete" align="center" width="120">
  47 + <template slot-scope="scope">
  48 + <span v-if="scope.row.queueInfo.auto_delete ===false">否</span>
  49 + <span v-if="scope.row.queueInfo.auto_delete ===true">是</span>
  50 + </template>
  51 + </el-table-column>
  52 + </el-table>
  53 + </div>
  54 + <!-- 分页区域 -->
  55 + <div style="margin-top: 10px">
  56 + <el-row :gutter="24">
  57 + <el-col :span="6" style="margin-top: 5px"></el-col>
  58 + <el-col :span="10" style="margin-top: 5px">
  59 + <el-pagination
  60 + @size-change="queueView_handleSizeChange"
  61 + @current-change="queueView_handleCurrentChange"
  62 + :current-page="queueView_queryInfo.pageNum"
  63 + :page-sizes="[10,50,100,500]"
  64 + :page-size="queueView_queryInfo.pageSize"
  65 + layout="total, sizes, prev, pager, next, jumper"
  66 + :total="queueView_page.total">
  67 + </el-pagination>
  68 + </el-col>
  69 + </el-row>
  70 + </div>
  71 + </el-card>
  72 + </el-main>
  73 + </el-container>
  74 +</template>
  75 +
  76 +<script>
  77 + import {selectQueueViewList} from "../../../api/message_bus";
  78 +
  79 + export default {
  80 + name: "QueueView",
  81 + data() {
  82 + return {
  83 + queueView_queryInfo: {
  84 + serverName: '',
  85 + virtualHostName: '',
  86 + pageNum: 1,
  87 + pageSize: 10
  88 + },
  89 + queueView_page: {
  90 + queueViewList: [],
  91 + total: 0,
  92 + },
  93 + queueView_loading: {
  94 + listLoading: false,
  95 + },
  96 + /**
  97 + * Boolean属性，选择列表
  98 + */
  99 + booleanList: [
  100 + {
  101 + value: true,
  102 + label: '是'
  103 + },
  104 + {
  105 + value: false,
  106 + label: '否'
  107 + },
  108 + ],
  109 + }
  110 + },
  111 + methods: {
  112 + /**
  113 + * 分页查询，监听 pageSize 改变的事件
  114 + */
  115 + queueView_handleSizeChange(newSize) {
  116 + this.queueView_queryInfo.pageSize = newSize;
  117 + this.getQueueViewList();
  118 + },
  119 +
  120 + /**
  121 + * 分页查询，监听 pageNum 改变的事件
  122 + */
  123 + queueView_handleCurrentChange(newPage) {
  124 + this.queueView_queryInfo.pageNum = newPage;
  125 + this.getQueueViewList();
  126 + },
  127 +
  128 + getQueueViewList() {
  129 + this.queueView_loading.listLoading = true;
  130 + selectQueueViewList(this.queueView_queryInfo).then((response) => {
  131 + let res = response.data;
  132 + if (res.code !== '200') {
  133 + this.queueView_loading.listLoading = false;
  134 + return this.$message.error(res.msg);
  135 + }
  136 + this.queueView_page.queueViewList = res.data;
  137 + this.queueView_page.total = res.total;
  138 + this.queueView_loading.listLoading = false;
  139 + }).catch(error => {
  140 + this.queueView_loading.listLoading = false;
  141 + this.$message.error(error.toString());
  142 + });
  143 + }
  144 + },
  145 + created() {
  146 + },
  147 + mounted() {
  148 + this.timer = setInterval(this.getQueueViewList, 5000);
  149 + },
  150 + beforeDestroy() {
  151 + clearInterval(this.timer);
  152 + },
  153 + computed: {},
  154 + }
  155 +</script>
  156 +
  157 +<style scoped>
  158 + .demo-table-expand {
  159 + font-size: 0;
  160 + }
  161 +
  162 + .demo-table-expand label {
  163 + width: 90px;
  164 + color: #99a9bf;
  165 + }
  166 +
  167 + .demo-table-expand .el-form-item {
  168 + margin-right: 0;
  169 + margin-bottom: 0;
  170 + width: 50%;
  171 + }
  172 +</style>