朱兆平 / vue_cli · 提交

转到一个项目

作者 王勇
提交 39a8069c827ad3f8d8d1a3636faad4a5c144a0bf 1 个父辈 af9e3df8

修改表格大小

内嵌 并排对比
正在显示 7 个修改的文件 包含 1159 行增加 和 28 行删除
@@ -4,15 +4,15 @@ @@ -4,15 +4,15 @@
4 <el-card style="background-color: #F5F7FA"> 4 <el-card style="background-color: #F5F7FA">
5 <!-- 搜素区域 --> 5 <!-- 搜素区域 -->
6 <div> 6 <div>
7 - <el-row :gutter="24"> 7 + <el-row>
8 <el-col :span="4"> 8 <el-col :span="4">
9 <el-input v-model="exchange_queryInfo.exchangeName" prefix-icon="el-icon-search" 9 <el-input v-model="exchange_queryInfo.exchangeName" prefix-icon="el-icon-search"
10 size="medium" 10 size="medium"
11 - placeholder="交换机名称" clearable style="width:180px"></el-input> 11 + placeholder="交换机名称" clearable></el-input>
12 </el-col> 12 </el-col>
13 <el-col :span="4"> 13 <el-col :span="4">
14 <el-cascader 14 <el-cascader
15 - style="width:180px" size="medium" 15 + size="medium"
16 v-model="exchange_queryInfo.virtualHostId" 16 v-model="exchange_queryInfo.virtualHostId"
17 :options="exchange_config.cascade.server_hostList" 17 :options="exchange_config.cascade.server_hostList"
18 :show-all-levels="false" 18 :show-all-levels="false"
1 <template> 1 <template>
2 - <div>消息记录</div> 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="messageNote_queryInfo.username" placeholder="用户名称"
  10 + size="medium" clearable prefix-icon="el-icon-search"></el-input>
  11 + </el-col>
  12 + <el-col :span="4">
  13 + <el-input v-model="messageNote_queryInfo.serverName" placeholder="服务器名称"
  14 + size="medium" clearable prefix-icon="el-icon-search"></el-input>
  15 + </el-col>
  16 + <el-col :span="4">
  17 + <el-input v-model="messageNote_queryInfo.virtualHostName"
  18 + size="medium" clearable prefix-icon="el-icon-search"
  19 + placeholder="虚拟主机名称"></el-input>
  20 + </el-col>
  21 + <el-col :span="4">
  22 + <el-input v-model="messageNote_queryInfo.exchangeName" placeholder="交换机名称"
  23 + size="medium" clearable prefix-icon="el-icon-search"></el-input>
  24 + </el-col>
  25 + </el-row>
  26 + <el-row>
  27 + <el-col :span="4">
  28 + <el-input v-model="messageNote_queryInfo.queueName" placeholder="队列名称"
  29 + size="medium" clearable prefix-icon="el-icon-search"></el-input>
  30 + </el-col>
  31 + <el-col :span="4">
  32 + <el-input v-model="messageNote_queryInfo.routingKeyName" placeholder="路由键名称"
  33 + size="medium" clearable prefix-icon="el-icon-search"></el-input>
  34 + </el-col>
  35 + <el-col :span="8">
  36 + <el-button type="success" style="width:150px" size="medium" @click="messageNote_getList">
  37 + 查询消息收发记录
  38 + </el-button>
  39 + <el-button type="primary" style="width:150px" size="medium"
  40 + @click="messageNote_toAddDialog">
  41 + 添加消息收发记录
  42 + </el-button>
  43 + </el-col>
  44 + </el-row>
  45 + </div>
  46 + <!-- 列表区域 -->
  47 + <div style="margin-top: 20px;">
  48 + <el-table :data="messageNote_page.messageNoteList" border
  49 + v-loading="messageNote_loading.listLoading"
  50 + @selection-change="messageNote_selectChange"
  51 + element-loading-text="获取消息收发记录，拼命加载中">
  52 + <el-table-column type="selection" width="55" align="center"></el-table-column>
  53 + <el-table-column type="index" align="center"></el-table-column>
  54 + <el-table-column label="用户名称" prop="username" align="center" width="220"></el-table-column>
  55 + <el-table-column label="服务器名称" prop="serverName" align="center" width="220"></el-table-column>
  56 + <el-table-column label="虚拟主机名称" prop="virtualHostName" align="center"
  57 + width="220"></el-table-column>
  58 + <el-table-column label="交换机名称" prop="exchangeName" align="center" width="220"></el-table-column>
  59 + <el-table-column label="队列名称" prop="queueName" align="center" width="220"></el-table-column>
  60 + <el-table-column label="路由键名称" prop="routingKeyName" align="center"
  61 + width="220"></el-table-column>
  62 + <el-table-column label="操作" width="245px" align="center" fixed="right">
  63 + <template slot-scope="scope">
  64 + <!-- 编辑按钮-->
  65 + <el-tooltip effect="dark" content="编辑" placement="top-start" :enterable="false">
  66 + <el-button type="primary" icon="el-icon-edit" size="mini"
  67 + @click="messageNote_toEditDialog(scope.$index,scope.row)">编辑
  68 + </el-button>
  69 + </el-tooltip>
  70 + <!-- 删除按钮-->
  71 + <el-tooltip effect="dark" content="删除" placement="top-start" :enterable="false">
  72 + <el-button type="danger" icon="el-icon-delete" size="mini"
  73 + :loading="messageNote_loading.delLoading"
  74 + @click="messageNote_remove(scope.$index,scope.row)">删除
  75 + </el-button>
  76 + </el-tooltip>
  77 + </template>
  78 + </el-table-column>
  79 + </el-table>
  80 + </div>
  81 + <!--分页区域-->
  82 + <div style="margin-top: 10px">
  83 + <el-row :gutter="24">
  84 + <el-col :span="5">
  85 + <el-button type="danger" icon="el-icon-delete"
  86 + :loading="messageNote_loading.batchDelLoading"
  87 + :disabled="this.messageNote_page.selectList.length===0"
  88 + @click="messageNote_batchRemove">批量删除
  89 + </el-button>
  90 + </el-col>
  91 + <el-col :span="10" style="margin-top: 5px">
  92 + <el-pagination
  93 + @size-change="messageNote_handleSizeChange"
  94 + @current-change="messageNote_handleCurrentChange"
  95 + :current-page="messageNote_queryInfo.pageNum"
  96 + :page-sizes="[10,20,30,50]"
  97 + :page-size="messageNote_queryInfo.pageSize"
  98 + layout="total, sizes, prev, pager, next, jumper"
  99 + :total="messageNote_page.total">
  100 + </el-pagination>
  101 + </el-col>
  102 + </el-row>
  103 + </div>
  104 + </el-card>
  105 + </el-main>
  106 + <!-- 增加，对话框区域 -->
  107 + <div>
  108 + <el-dialog title="添加消息收发记录"
  109 + :visible.sync="messageNote_dialog.addDialog"
  110 + style="margin-top: -50px" text-align="center" width="50%"
  111 + @close="messageNote_addDialogClosed">
  112 +
  113 + <el-form :inline="true" label-width="120px" status-icon style="margin-top: -10px" align="center"
  114 + :model="messageNote_addForm" :rules="messageNote_addFormRules" ref="messageNote_addFormRef">
  115 + <el-form-item label="用户名称：" prop="username">
  116 + <el-input v-model="messageNote_addForm.username" style="width:240px" size="small" clearable
  117 + placeholder="请输入用户名称">
  118 + </el-input>
  119 + </el-form-item>
  120 +
  121 + <el-form-item label="服务器名称：" prop="serverName">
  122 + <el-input v-model="messageNote_addForm.serverName" placeholder="请输入服务器名称名称"
  123 + clearable style="width:240px" size="small">
  124 + </el-input>
  125 + </el-form-item>
  126 + <el-form-item label="虚拟主机名称：" prop="virtualHostName">
  127 + <el-input v-model="messageNote_addForm.virtualHostName" style="width:240px" size="small"
  128 + clearable
  129 + placeholder="请输入虚拟主机名称">
  130 + </el-input>
  131 + </el-form-item>
  132 +
  133 + <el-form-item label="交换机名称：" prop="exchangeName">
  134 + <el-input v-model="messageNote_addForm.exchangeName" style="width:240px" size="small" clearable
  135 + placeholder="请输入交换机名称">
  136 + </el-input>
  137 + </el-form-item>
  138 + <el-form-item label="队列名称：" prop="queueName">
  139 + <el-input v-model="messageNote_addForm.queueName" style="width:240px" size="small" clearable
  140 + placeholder="请输入队列名称">
  141 + </el-input>
  142 + </el-form-item>
  143 + <el-form-item label="路由键名称：" prop="routingKeyName">
  144 + <el-input v-model="messageNote_addForm.routingKeyName" style="width:240px" size="small"
  145 + clearable
  146 + placeholder="请输入路由键名称">
  147 + </el-input>
  148 + </el-form-item>
  149 + </el-form>
  150 + <div slot="footer" class="dialog-footer" style="text-align: center;margin-top: -20px">
  151 + <el-button type="info" @click="messageNote_dialog.addDialog = false" size="medium"
  152 + style="width: 100px">取消
  153 + </el-button>
  154 + <el-button type="primary" @click="messageNote_add" :loading="messageNote_loading.addLoading"
  155 + size="medium" style="width: 100px">添加
  156 + </el-button>
  157 + </div>
  158 + </el-dialog>
  159 + </div>
  160 + </el-container>
3 </template> 161 </template>
4 162
5 <script> 163 <script>
  164 + import {
  165 + selectMessageNoteList,
  166 + insertMessageNote,
  167 + updateMessageNote,
  168 + deleteMessageNote,
  169 + batchRemoveMessageNote,
  170 + } from "../../api/message_bus";
  171 +
6 export default { 172 export default {
  173 + // 消息收发记录
7 name: "MessageNote", 174 name: "MessageNote",
8 175
9 data() { 176 data() {
10 return { 177 return {
  178 + /**
  179 + * messageNote，配置与参数
  180 + */
  181 + messageNote_config: {},
  182 + /**
  183 + * messageNote，搜索参数
  184 + */
  185 + messageNote_queryInfo: {
  186 + // 用户名称
  187 + username: '',
  188 + // 服务器名称
  189 + serverName: '',
  190 + // 虚拟主机名称
  191 + virtualHostName: '',
  192 + // 交换机名称
  193 + exchangeName: '',
  194 + // 队列名称
  195 + queueName: '',
  196 + // 路由键名称
  197 + routingKeyName: '',
  198 + // 当前页数
  199 + pageNum: 1,
  200 + // 每页条数
  201 + pageSize: 10
  202 + },
  203 + /**
  204 + * messageNote，分页
  205 + */
  206 + messageNote_page: {
  207 + // 路由键列表
  208 + messageNoteList: [],
  209 + // 总条数
  210 + total: 0,
  211 + // 批量删除，选中列表
  212 + selectList: [],
  213 + },
  214 + /**
  215 + * messageNote，新增表单
  216 + */
  217 + messageNote_addForm: {
  218 + // 用户名称
  219 + username: '',
  220 + // 服务器名称
  221 + serverName: '',
  222 + // 虚拟主机名称
  223 + virtualHostName: '',
  224 + // 交换机名称
  225 + exchangeName: '',
  226 + // 队列名称
  227 + queueName: '',
  228 + // 路由键名称
  229 + routingKeyName: '',
  230 + },
  231 + /**
  232 + * messageNote，编辑表单
  233 + */
  234 + messageNote_editForm: {},
  235 + /**
  236 + * messageNote，加载
  237 + */
  238 + messageNote_loading: {
  239 + // 列表加载
  240 + listLoading: false,
  241 + // 添加加载
  242 + addLoading: false,
  243 + // 编辑加载
  244 + editLoading: false,
  245 + // 删除加载
  246 + delLoading: false,
  247 + // 批量删除加载
  248 + batchDelLoading: false,
  249 + },
  250 + /**
  251 + * messageNote,对话框管理
  252 + */
  253 + messageNote_dialog: {
  254 + // 添加对话框
  255 + addDialog: false,
  256 + // 编辑对话框
  257 + editDialog: false,
  258 + },
11 259
  260 + /**
  261 + * messageNote,添加表单，验证规则
  262 + */
  263 + messageNote_addFormRules: {
  264 + // 用户名称
  265 + username: [
  266 + {required: true, message: '请输入用户名称', trigger: ['blur', 'change']},
  267 + ],
  268 + // 服务器名称
  269 + serverName: [
  270 + {required: true, message: '请输入虚拟主机名称', trigger: ['blur', 'change']},
  271 + ],
  272 + // 虚拟主机名称
  273 + virtualHostName: [
  274 + {required: true, message: '请输入虚拟主机名称', trigger: ['blur', 'change']},
  275 + ],
  276 + // 队列名称
  277 + queueName: [
  278 + {required: true, message: '请输入队列名称', trigger: ['blur', 'change']},
  279 + ],
  280 + // 交换机名称
  281 + exchangeName: [
  282 + {required: true, message: '请输入交换机名称', trigger: ['blur', 'change']},
  283 + ],
  284 + // 路由键名称
  285 + routingKeyName: [
  286 + {required: true, message: '请输入路由键名称', trigger: ['blur', 'change']},
  287 + ],
  288 + },
  289 + /**
  290 + * messageNote,编辑表单，验证规则
  291 + */
  292 + messageNote_editFormRules: {
  293 + // 队列名称
  294 + queueName: [
  295 + {required: true, message: '请输入队列名称', trigger: ['blur', 'change']},
  296 + ],
  297 + },
  298 + /**
  299 + * Boolean属性，选择列表
  300 + */
  301 + booleanList: [
  302 + {
  303 + value: true,
  304 + label: '是'
  305 + },
  306 + {
  307 + value: false,
  308 + label: '否'
  309 + },
  310 + ],
12 } 311 }
13 }, 312 },
14 methods: { 313 methods: {
15 - 314 + /**
  315 + * 分页查询，监听 pageSize 改变的事件
  316 + */
  317 + messageNote_handleSizeChange(newSize) {
  318 + this.messageNote_queryInfo.pageSize = newSize;
  319 + //刷新列表
  320 + this.messageNote_getList();
  321 + },
  322 + /**
  323 + * 分页查询，监听 pageNum 改变的事件
  324 + */
  325 + messageNote_handleCurrentChange(newPage) {
  326 + this.messageNote_queryInfo.pageNum = newPage;
  327 + //刷新列表
  328 + this.messageNote_getList();
  329 + },
  330 + /**
  331 + * messageNote,分页查询
  332 + */
  333 + messageNote_getList() {
  334 + // 开启加载
  335 + this.messageNote_loading.listLoading = true;
  336 + selectMessageNoteList(this.messageNote_queryInfo).then((response) => {
  337 + let res = response.data;
  338 + if (res.code !== '200') {
  339 + // 关闭加载
  340 + this.messageNote_loading.listLoading = false;
  341 + return this.$message.error('获取消息收发记录，失败！');
  342 + }
  343 + // 获取列表数据
  344 + this.messageNote_page.messageNoteList = res.data.list;
  345 + // 获取列表的总记录数
  346 + this.messageNote_page.total = res.data.total;
  347 + // 关闭加载
  348 + this.messageNote_loading.listLoading = false;
  349 + this.$message.success('获取消息收发记录，成功！');
  350 + }).catch(error => {
  351 + // 关闭加载
  352 + this.messageNote_loading.listLoading = false;
  353 + this.$message.error(error.toString());
  354 + });
  355 + },
  356 + /**
  357 + * messageNote，添加对话框，打开事件
  358 + */
  359 + messageNote_toAddDialog() {
  360 + this.messageNote_dialog.addDialog = true;
  361 + },
  362 + /**
  363 + * queue，添加对话框，关闭事件
  364 + */
  365 + messageNote_addDialogClosed() {
  366 + // 重置对话框
  367 + this.$refs.messageNote_addFormRef.resetFields();
  368 + },
  369 + /**
  370 + * messageNote，添加功能
  371 + */
  372 + messageNote_add() {
  373 + // 进行表单的预验证
  374 + this.$refs.messageNote_addFormRef.validate(valid => {
  375 + // 未通过，表单预校验
  376 + if (!valid) return;
  377 + // 通过，表单预检验，开启加载
  378 + this.messageNote_loading.addLoading = true;
  379 + insertMessageNote(this.messageNote_addForm).then((response) => {
  380 + let res = response.data;
  381 + // 添加失败
  382 + if (res.code !== '200') {
  383 + if (res.code === '999') {
  384 + // 关闭加载
  385 + this.messageNote_loading.addLoading = false;
  386 + return this.$message.error('未知异常，添加消息收发记录，失败');
  387 + }
  388 + // 关闭加载
  389 + this.messageNote_loading.addLoading = false;
  390 + return this.$message.error('添加消息收发记录，失败');
  391 + }
  392 + // 添加，成功
  393 + this.$message.success('添加消息收发记录，成功');
  394 + // 关闭加载
  395 + this.messageNote_loading.addLoading = false;
  396 + // 隐藏对话框
  397 + this.messageNote_dialog.addDialog = false;
  398 + // 刷新列表
  399 + this.messageNote_getList();
  400 + }).catch(error => {
  401 + // 关闭加载
  402 + this.messageNote_loading.addLoading = false;
  403 + this.$message.error(error.toString());
  404 + });
  405 + })
  406 + },
  407 + /**
  408 + * messageNote，编辑对话框，打开事件
  409 + */
  410 + messageNote_toEditDialog(index, row) {
  411 + this.messageNote_editForm = Object.assign({}, row);
  412 + this.messageNote_dialog.editDialog = true;
  413 + },
  414 + /**
  415 + * messageNote，编辑对话框，关闭事件
  416 + */
  417 + messageNote_editDialogClosed() {
  418 + //重置对话框
  419 + this.$refs.messageNote_editFormRef.resetFields();
  420 + },
  421 + /**
  422 + * messageNote，编辑功能
  423 + */
  424 + messageNote_edit() {
  425 + //进行表单的预验证
  426 + this.$refs.messageNote_editFormRef.validate(valid => {
  427 + // 未通过，表单预校验
  428 + if (!valid) return;
  429 + // 通过，表单预检验，开启加载
  430 + this.messageNote_loading.editLoading = true;
  431 + updateMessageNote(this.messageNote_editForm).then((response) => {
  432 + let res = response.data;
  433 + if (res.code !== '200') {
  434 + if (res.code === '999') {
  435 + // 关闭加载
  436 + this.messageNote_loading.editLoading = false;
  437 + return this.$message.error('未知异常，编辑消息收发记录，失败');
  438 + }
  439 + //关闭加载
  440 + this.messageNote_loading.editLoading = false;
  441 + return this.$message.error('编辑消息收发记录，失败');
  442 + }
  443 + // 关闭加载
  444 + this.messageNote_loading.editLoading = false;
  445 + this.$message.success('编辑队列信息，成功！');
  446 + // 隐藏对话框
  447 + this.messageNote_dialog.editDialog = false;
  448 + // 刷新列表
  449 + this.messageNote_getList();
  450 + }).catch(error => {
  451 + // 关闭加载
  452 + this.messageNote_loading.editLoading = false;
  453 + this.$message.error(error.toString());
  454 + });
  455 + })
  456 + },
  457 + /**
  458 + * messageNote，删除功能
  459 + */
  460 + messageNote_remove(index, row) {
  461 + // 弹框询问是否删除？
  462 + this.$confirm('此操作永久删除该消息收发记录, 是否继续?', '警告', {
  463 + confirmButtonText: '确定删除',
  464 + cancelButtonText: '取消',
  465 + type: 'warning'
  466 + }
  467 + ).then(() => {
  468 + // 开启加载
  469 + this.messageNote_loading.delLoading = true;
  470 + deleteMessageNote(row).then((response) => {
  471 + let res = response.data;
  472 + if (res.code !== '200') {
  473 + // 关闭加载
  474 + this.messageNote_loading.delLoading = false;
  475 + return this.$message.error('删除队列信息，失败');
  476 + }
  477 + // 关闭加载
  478 + this.messageNote_loading.delLoading = false;
  479 + this.$message.success('删除队列信息，成功！');
  480 + // 刷新列表
  481 + this.messageNote_getList();
  482 + }).catch(error => {
  483 + // 关闭加载
  484 + this.messageNote_loading.delLoading = false;
  485 + this.$message.error(error.toString());
  486 + });
  487 + }).catch(() => {
  488 + });
  489 + },
  490 + /**
  491 + * messageNote，批量删除---选中
  492 + */
  493 + messageNote_selectChange: function (selectList) {
  494 + this.messageNote_page.selectList = selectList;
  495 + },
  496 + /**
  497 + * messageNote，批量删除功能
  498 + */
  499 + messageNote_batchRemove() {
  500 + const ids = this.messageNote_page.selectList.map(item => item.id).toString();
  501 + this.$confirm('此操作将永久删除选中的消息收发记录, 是否继续?', '警告', {
  502 + confirmButtonText: '确定删除',
  503 + cancelButtonText: '取消',
  504 + type: 'warning'
  505 + }
  506 + ).then(() => {
  507 + // 开启加载
  508 + this.messageNote_loading.batchDelLoading = true;
  509 + let params = {ids: ids};
  510 + batchRemoveMessageNote(params).then(response => {
  511 + let res = response.data;
  512 + if (res.code !== '200') {
  513 + // 关闭加载
  514 + this.messageNote_loading.batchDelLoading = false;
  515 + return this.$message.error('批量删除消息收发记录，失败');
  516 + }
  517 + this.$message.success('批量删除消息收发记录，成功！');
  518 + // 关闭加载
  519 + this.messageNote_loading.batchDelLoading = false;
  520 + // 刷新列表
  521 + this.messageNote_getList();
  522 + }).catch(error => {
  523 + // 关闭加载
  524 + this.messageNote_loading.batchDelLoading = false;
  525 + this.$message.error(error.toString());
  526 + });
  527 + }).catch(() => {
  528 + });
  529 + },
16 }, 530 },
17 created() { 531 created() {
18 - 532 + // 刷新列表
  533 + // this.messageNote_getList();
19 }, 534 },
20 mounted() { 535 mounted() {
21 536
22 }, 537 },
23 - computed: {  
24 -  
25 - }, 538 + computed: {},
26 } 539 }
27 </script> 540 </script>
28 541
@@ -4,15 +4,15 @@ @@ -4,15 +4,15 @@
4 <el-card style="background-color: #F5F7FA"> 4 <el-card style="background-color: #F5F7FA">
5 <!-- 搜素区域 --> 5 <!-- 搜素区域 -->
6 <div> 6 <div>
7 - <el-row :gutter="24"> 7 + <el-row>
8 <el-col :span="4"> 8 <el-col :span="4">
9 <el-input v-model="queue_queryInfo.queueName" prefix-icon="el-icon-search" 9 <el-input v-model="queue_queryInfo.queueName" prefix-icon="el-icon-search"
10 size="medium" 10 size="medium"
11 - placeholder="队列名称" clearable style="width:180px"></el-input> 11 + placeholder="队列名称" clearable></el-input>
12 </el-col> 12 </el-col>
13 <el-col :span="4"> 13 <el-col :span="4">
14 <el-cascader 14 <el-cascader
15 - style="width:180px" size="medium" 15 + size="medium"
16 v-model="queue_queryInfo.virtualHostId" 16 v-model="queue_queryInfo.virtualHostId"
17 :options="queue_config.cascade.server_hostList" 17 :options="queue_config.cascade.server_hostList"
18 :show-all-levels="false" 18 :show-all-levels="false"
@@ -32,7 +32,6 @@ @@ -32,7 +32,6 @@
32 </el-col> 32 </el-col>
33 </el-row> 33 </el-row>
34 </div> 34 </div>
35 -  
36 <!-- 列表区域 --> 35 <!-- 列表区域 -->
37 <div style="margin-top: 20px;"> 36 <div style="margin-top: 20px;">
38 <el-table :data="queue_page.queueList" border v-loading="queue_loading.listLoading" 37 <el-table :data="queue_page.queueList" border v-loading="queue_loading.listLoading"
@@ -4,16 +4,16 @@ @@ -4,16 +4,16 @@
4 <el-card style="background-color: #F5F7FA"> 4 <el-card style="background-color: #F5F7FA">
5 <!-- 搜素区域 --> 5 <!-- 搜素区域 -->
6 <div> 6 <div>
7 - <el-row :gutter="24"> 7 + <el-row>
8 <el-col :span="4"> 8 <el-col :span="4">
9 <el-input v-model="routingKey_queryInfo.routingKeyName" placeholder="路由键名称" 9 <el-input v-model="routingKey_queryInfo.routingKeyName" placeholder="路由键名称"
10 - prefix-icon="el-icon-search" size="medium" clearable style="width:180px"> 10 + prefix-icon="el-icon-search" size="medium" clearable>
11 </el-input> 11 </el-input>
12 </el-col> 12 </el-col>
13 13
14 <el-col :span="4"> 14 <el-col :span="4">
15 <el-cascader 15 <el-cascader
16 - style="width:180px" size="medium" 16 + size="medium"
17 v-model="routingKey_queryInfo.exchangeId" 17 v-model="routingKey_queryInfo.exchangeId"
18 :options="routingKey_config.cascade.server_host_exchangeList" 18 :options="routingKey_config.cascade.server_host_exchangeList"
19 :show-all-levels="false" 19 :show-all-levels="false"
@@ -4,12 +4,12 @@ @@ -4,12 +4,12 @@
4 <el-card style="background-color: #F5F7FA"> 4 <el-card style="background-color: #F5F7FA">
5 <!-- 搜素区域 --> 5 <!-- 搜素区域 -->
6 <div> 6 <div>
7 - <el-row :gutter="24"> 7 + <el-row>
8 <el-col :span="4"> 8 <el-col :span="4">
9 <el-input v-model="queryInfo.serverName" prefix-icon="el-icon-search" size="medium" 9 <el-input v-model="queryInfo.serverName" prefix-icon="el-icon-search" size="medium"
10 - placeholder="服务器名称" clearable style="width:180px"></el-input> 10 + placeholder="服务器名称" clearable ></el-input>
11 </el-col> 11 </el-col>
12 - <el-col :span="15"> 12 + <el-col :span="8">
13 <el-button type="success" style="width:150px" size="medium" @click="getServerList"> 13 <el-button type="success" style="width:150px" size="medium" @click="getServerList">
14 查询服务器信息 14 查询服务器信息
15 </el-button> 15 </el-button>
1 <template> 1 <template>
2 - <div>用户消息绑定配置</div> 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="umb_queryInfo.serverName" prefix-icon="el-icon-search"
  10 + size="medium"
  11 + placeholder="服务器名称" clearable></el-input>
  12 + </el-col>
  13 + <el-col :span="4">
  14 + <el-input v-model="umb_queryInfo.virtualHostName" prefix-icon="el-icon-search"
  15 + size="medium"
  16 + placeholder="虚拟主机名称" clearable></el-input>
  17 + </el-col>
  18 + <el-col :span="4">
  19 + <el-input v-model="umb_queryInfo.exchangeName" prefix-icon="el-icon-search"
  20 + size="medium"
  21 + placeholder="交换机名称" clearable></el-input>
  22 + </el-col>
  23 + <el-col :span="4">
  24 + <el-input v-model="umb_queryInfo.queueName" prefix-icon="el-icon-search"
  25 + size="medium"
  26 + placeholder="队列名称" clearable></el-input>
  27 + </el-col>
  28 + <el-col :span="4">
  29 + <el-input v-model="umb_queryInfo.routingKeyName" prefix-icon="el-icon-search"
  30 + size="medium"
  31 + placeholder="路由键名称" clearable></el-input>
  32 + </el-col>
  33 + </el-row>
  34 + <el-row>
  35 + <el-col :span="4">
  36 + <el-input v-model="umb_queryInfo.username" prefix-icon="el-icon-search"
  37 + size="medium"
  38 + placeholder="用户名称" clearable></el-input>
  39 + </el-col>
  40 + <el-col :span="4">
  41 + <el-input v-model="umb_queryInfo.subscriber" prefix-icon="el-icon-search"
  42 + size="medium"
  43 + placeholder="订阅者名称" clearable></el-input>
  44 + </el-col>
  45 + <el-col :span="8">
  46 + <el-button type="success" style="width:150px" size="medium" @click="umb_getList">
  47 + 查询配置信息
  48 + </el-button>
  49 + <el-button type="primary" style="width:150px" size="medium" @click="umb_toAddDialog">
  50 + 添加配置信息
  51 + </el-button>
  52 + </el-col>
  53 + </el-row>
  54 + </div>
  55 + <!-- 列表区域 -->
  56 + <div style="margin-top: 20px;">
  57 + <el-table :data="umb_page.umbList" border v-loading="umb_loading.listLoading"
  58 + @selection-change="umb_selectChange"
  59 + element-loading-text="获取配置信息列表，拼命加载中">
  60 + <el-table-column type="selection" width="55" align="center"></el-table-column>
  61 + <el-table-column type="index" align="center"></el-table-column>
  62 + <el-table-column label="用户名称" prop="username" align="center" width="220"></el-table-column>
  63 + <el-table-column label="订阅者名称" prop="subscriber" align="center" width="220"></el-table-column>
  64 + <el-table-column label="服务器名称" prop="serverName" align="center"
  65 + width="220"></el-table-column>
  66 + <el-table-column label="虚拟主机名称" prop="virtualHostName" align="center"
  67 + width="220"></el-table-column>
  68 + <el-table-column label="交换机名称" prop="exchangeName" align="center" width="220"></el-table-column>
  69 + <el-table-column label="队列名称" prop="queueName" align="center" width="220"></el-table-column>
  70 + <el-table-column label="路由键名称" prop="routingKeyName" align="center"
  71 + width="220"></el-table-column>
  72 + <el-table-column label="操作" width="245px" align="center" fixed="right">
  73 + <template slot-scope="scope">
  74 + <!-- 编辑按钮-->
  75 + <el-tooltip effect="dark" content="编辑" placement="top-start" :enterable="false">
  76 + <el-button type="primary" icon="el-icon-edit" size="mini"
  77 + @click="umb_toEditDialog(scope.$index,scope.row)">编辑
  78 + </el-button>
  79 + </el-tooltip>
  80 +
  81 + <!-- 删除按钮-->
  82 + <el-tooltip effect="dark" content="删除" placement="top-start" :enterable="false">
  83 + <el-button type="danger" icon="el-icon-delete" size="mini"
  84 + :loading="umb_loading.delLoading"
  85 + @click="umb_remove(scope.$index,scope.row)">删除
  86 + </el-button>
  87 + </el-tooltip>
  88 + </template>
  89 + </el-table-column>
  90 + </el-table>
  91 + </div>
  92 + <!--分页区域-->
  93 + <div style="margin-top: 10px">
  94 + <el-row :gutter="24">
  95 + <el-col :span="5">
  96 + <el-button type="danger" icon="el-icon-delete"
  97 + :loading="umb_loading.batchDelLoading"
  98 + :disabled="this.umb_page.selectList.length===0"
  99 + @click="umb_batchRemove">批量删除
  100 + </el-button>
  101 + </el-col>
  102 + <el-col :span="10" style="margin-top: 5px">
  103 + <el-pagination
  104 + @size-change="umb_handleSizeChange"
  105 + @current-change="umb_handleCurrentChange"
  106 + :current-page="umb_queryInfo.pageNum"
  107 + :page-sizes="[10,20,30,50]"
  108 + :page-size="umb_queryInfo.pageSize"
  109 + layout="total, sizes, prev, pager, next, jumper"
  110 + :total="umb_page.total">
  111 + </el-pagination>
  112 + </el-col>
  113 + </el-row>
  114 + </div>
  115 + </el-card>
  116 + <!-- 增加，对话框区域 -->
  117 + <div>
  118 + <el-dialog title="添加配置信息"
  119 + :visible.sync="umb_dialog.addDialog"
  120 + style="margin-top: -50px" text-align="center" width="50%"
  121 + @close="umb_addDialogClosed">
  122 +
  123 + <el-form :inline="true" label-width="120px" status-icon style="margin-top: -10px" align="center"
  124 + :model="umb_addForm" :rules="umb_addFormRules" ref="umb_addFormRef">
  125 + <el-form-item label="用户名称：" prop="username">
  126 + <el-input v-model="umb_addForm.username" style="width:240px" size="small" clearable
  127 + placeholder="请输入用户名称">
  128 + </el-input>
  129 + </el-form-item>
  130 + <el-form-item label="订阅者名称：" prop="subscriber">
  131 + <el-input v-model="umb_addForm.subscriber" style="width:240px" size="small" clearable
  132 + placeholder="请输入订阅者名称">
  133 + </el-input>
  134 + </el-form-item>
  135 +
  136 + <el-form-item label="服务器名称：" prop="serverName">
  137 + <el-input v-model="umb_addForm.serverName" style="width:240px" size="small" clearable
  138 + placeholder="请输入服务器名称">
  139 + </el-input>
  140 + </el-form-item>
  141 + <el-form-item label="虚拟主机名称：" prop="virtualHostName">
  142 + <el-input v-model="umb_addForm.virtualHostName" style="width:240px" size="small" clearable
  143 + placeholder="请输入虚拟主机名称">
  144 + </el-input>
  145 + </el-form-item>
  146 +
  147 + <el-form-item label="交换机名称：" prop="exchangeName">
  148 + <el-input v-model="umb_addForm.exchangeName" style="width:240px" size="small" clearable
  149 + placeholder="请输入交换机名称">
  150 + </el-input>
  151 + </el-form-item>
  152 + <el-form-item label="队列名称：" prop="queueName">
  153 + <el-input v-model="umb_addForm.queueName" style="width:240px" size="small" clearable
  154 + placeholder="请输入队列名称">
  155 + </el-input>
  156 + </el-form-item>
  157 + <el-form-item label="路由键名称：" prop="routingKeyName">
  158 + <el-input v-model="umb_addForm.routingKeyName" style="width:240px" size="small" clearable
  159 + placeholder="请输入路由键名称">
  160 + </el-input>
  161 + </el-form-item>
  162 + </el-form>
  163 + <div slot="footer" class="dialog-footer" style="text-align: center;margin-top: -20px">
  164 + <el-button type="info" @click="umb_dialog.addDialog = false" size="medium"
  165 + style="width: 100px">取消
  166 + </el-button>
  167 + <el-button type="primary" @click="umb_add" :loading="umb_loading.addLoading"
  168 + size="medium" style="width: 100px">添加
  169 + </el-button>
  170 + </div>
  171 + </el-dialog>
  172 + </div>
  173 + <!-- 编辑，对话框区域 -->
  174 + <div>
  175 + <el-dialog title="编辑配置信息"
  176 + :visible.sync="umb_dialog.editDialog"
  177 + style="margin-top: -50px" text-align="center" width="50%"
  178 + @close="umb_editDialogClosed">
  179 + <el-form :inline="true" label-width="120px" status-icon style="margin-top: -10px" align="center"
  180 + :model="umb_editForm" :rules="umb_editFormRules" ref="umb_editFormRef">
  181 + <el-form-item label="用户名称：" prop="username">
  182 + <el-input v-model="umb_editForm.username" style="width:240px" size="small" clearable
  183 + placeholder="请输入用户名称">
  184 + </el-input>
  185 + </el-form-item>
  186 + <el-form-item label="订阅者名称：" prop="subscriber">
  187 + <el-input v-model="umb_editForm.subscriber" style="width:240px" size="small" clearable
  188 + placeholder="请输入订阅者名称">
  189 + </el-input>
  190 + </el-form-item>
  191 +
  192 + <el-form-item label="服务器名称：" prop="serverName">
  193 + <el-input v-model="umb_editForm.serverName" style="width:240px" size="small" clearable
  194 + placeholder="请输入服务器名称">
  195 + </el-input>
  196 + </el-form-item>
  197 + <el-form-item label="虚拟主机名称：" prop="virtualHostName">
  198 + <el-input v-model="umb_editForm.virtualHostName" style="width:240px" size="small" clearable
  199 + placeholder="请输入虚拟主机名称">
  200 + </el-input>
  201 + </el-form-item>
  202 +
  203 + <el-form-item label="交换机名称：" prop="exchangeName">
  204 + <el-input v-model="umb_editForm.exchangeName" style="width:240px" size="small" clearable
  205 + placeholder="请输入交换机名称">
  206 + </el-input>
  207 + </el-form-item>
  208 + <el-form-item label="队列名称：" prop="queueName">
  209 + <el-input v-model="umb_editForm.queueName" style="width:240px" size="small" clearable
  210 + placeholder="请输入队列名称">
  211 + </el-input>
  212 + </el-form-item>
  213 + <el-form-item label="路由键名称：" prop="routingKeyName">
  214 + <el-input v-model="umb_editForm.routingKeyName" style="width:240px" size="small" clearable
  215 + placeholder="请输入路由键名称">
  216 + </el-input>
  217 + </el-form-item>
  218 + </el-form>
  219 + <div slot="footer" class="dialog-footer" style="text-align: center">
  220 + <el-button type="info" @click="umb_dialog.editDialog = false" size="medium"
  221 + style="width: 100px">取消
  222 + </el-button>
  223 + <el-button type="primary" @click="umb_edit" :loading="umb_loading.addLoading"
  224 + size="medium" style="width: 100px">编辑
  225 + </el-button>
  226 + </div>
  227 + </el-dialog>
  228 + </div>
  229 + </el-main>
  230 + </el-container>
3 </template> 231 </template>
4 232
5 <script> 233 <script>
  234 + import {
  235 + selectUserMessageBindingList,
  236 + insertUserMessageBinding,
  237 + updateUserMessageBinding,
  238 + deleteUserMessageBinding,
  239 + batchRemoveUserMessageBinding,
  240 + } from "../../api/message_bus";
  241 +
6 export default { 242 export default {
  243 + /**
  244 + * UserMessageBinding: 账户信息绑定配置
  245 + * 简称：umb
  246 + */
7 name: "UserMessageBinding", 247 name: "UserMessageBinding",
8 248
9 data() { 249 data() {
10 return { 250 return {
  251 + /**
  252 + * umb，配置与参数
  253 + */
  254 + umb_config: {},
11 255
  256 + /**
  257 + * umb，搜索参数
  258 + */
  259 + umb_queryInfo: {
  260 + // 用户名称
  261 + username: '',
  262 + // 订阅者名称
  263 + subscriber: '',
  264 + // 服务器名称
  265 + serverName: '',
  266 + // 虚拟主机名称
  267 + virtualHostName: '',
  268 + // 交换机名称
  269 + exchangeName: '',
  270 + // 队列名称
  271 + queueName: '',
  272 + // 路由键名称
  273 + routingKeyName: '',
  274 + // 当前页数
  275 + pageNum: 1,
  276 + // 每页条数
  277 + pageSize: 10
  278 + },
  279 + /**
  280 + * umb，分页
  281 + */
  282 + umb_page: {
  283 + // 配置，列表
  284 + umbList: [],
  285 + // 总条数
  286 + total: 0,
  287 + // 批量删除，选中列表
  288 + selectList: [],
  289 + },
  290 + /**
  291 + * umb，新增表单
  292 + */
  293 + umb_addForm: {
  294 + // 用户名称
  295 + username: '',
  296 + // 订阅者名称
  297 + subscriber: '',
  298 + // 服务器名称
  299 + serverName: '',
  300 + // 虚拟主机名称
  301 + virtualHostName: '',
  302 + // 交换机名称
  303 + exchangeName: '',
  304 + // 队列名称
  305 + queueName: '',
  306 + // 路由键名称
  307 + routingKeyName: '',
  308 + },
  309 + /**
  310 + * umb，编辑表单
  311 + */
  312 + umb_editForm: {},
  313 + /**
  314 + * umb，加载
  315 + */
  316 + umb_loading: {
  317 + // 列表加载
  318 + listLoading: false,
  319 + // 添加加载
  320 + addLoading: false,
  321 + // 编辑加载
  322 + editLoading: false,
  323 + // 删除加载
  324 + delLoading: false,
  325 + // 批量删除加载
  326 + batchDelLoading: false,
  327 + },
  328 + /**
  329 + * umb,对话框管理
  330 + */
  331 + umb_dialog: {
  332 + // 添加对话框
  333 + addDialog: false,
  334 + // 编辑对话框
  335 + editDialog: false,
  336 + },
  337 + /**
  338 + * umb,添加表单，验证规则
  339 + */
  340 + umb_addFormRules: {
  341 + // 用户名称
  342 + username: [
  343 + {required: true, message: '请输入用户名称', trigger: ['blur', 'change']},
  344 + ],
  345 + // 订阅者名称
  346 + subscriber: [
  347 + {required: true, message: '请输入订阅者名称', trigger: ['blur', 'change']},
  348 + ],
  349 + // 服务器名称
  350 + serverName: [
  351 + {required: true, message: '请输入服务器名称', trigger: ['blur', 'change']},
  352 + ],
  353 + // 虚拟主机名称
  354 + virtualHostName: [
  355 + {required: true, message: '请输入虚拟主机名称', trigger: ['blur', 'change']},
  356 + ],
  357 + // 队列名称
  358 + queueName: [
  359 + {required: true, message: '请输入队列名称', trigger: ['blur', 'change']},
  360 + ],
  361 + // 交换机名称
  362 + exchangeName: [
  363 + {required: true, message: '请输入交换机名称', trigger: ['blur', 'change']},
  364 + ],
  365 + // 路由键名称
  366 + routingKeyName: [
  367 + {required: true, message: '请输入路由键名称', trigger: ['blur', 'change']},
  368 + ],
  369 + },
  370 + /**
  371 + * umb,编辑表单，验证规则
  372 + */
  373 + umb_editFormRules: {
  374 + // 用户名称
  375 + username: [
  376 + {required: true, message: '请输入用户名称', trigger: ['blur', 'change']},
  377 + ],
  378 + // 订阅者名称
  379 + subscriber: [
  380 + {required: true, message: '请输入订阅者名称', trigger: ['blur', 'change']},
  381 + ],
  382 + // 服务器名称
  383 + serverName: [
  384 + {required: true, message: '请输入服务器名称', trigger: ['blur', 'change']},
  385 + ],
  386 + // 虚拟主机名称
  387 + virtualHostName: [
  388 + {required: true, message: '请输入虚拟主机名称', trigger: ['blur', 'change']},
  389 + ],
  390 + // 队列名称
  391 + queueName: [
  392 + {required: true, message: '请输入队列名称', trigger: ['blur', 'change']},
  393 + ],
  394 + // 交换机名称
  395 + exchangeName: [
  396 + {required: true, message: '请输入交换机名称', trigger: ['blur', 'change']},
  397 + ],
  398 + // 路由键名称
  399 + routingKeyName: [
  400 + {required: true, message: '请输入路由键名称', trigger: ['blur', 'change']},
  401 + ],
  402 + },
  403 + /**
  404 + * Boolean属性，选择列表
  405 + */
  406 + booleanList: [
  407 + {
  408 + value: true,
  409 + label: '是'
  410 + },
  411 + {
  412 + value: false,
  413 + label: '否'
  414 + },
  415 + ],
12 } 416 }
13 }, 417 },
14 methods: { 418 methods: {
  419 + /**
  420 + * 分页查询，监听 pageSize 改变的事件
  421 + */
  422 + umb_handleSizeChange(newSize) {
  423 + this.umb_queryInfo.pageSize = newSize;
  424 + //刷新列表
  425 + this.umb_getList();
  426 + },
  427 + /**
  428 + * 分页查询，监听 pageNum 改变的事件
  429 + */
  430 + umb_handleCurrentChange(newPage) {
  431 + this.umb_queryInfo.pageNum = newPage;
  432 + //刷新列表
  433 + this.umb_getList();
  434 + },
  435 + /**
  436 + * umb,分页查询
  437 + */
  438 + umb_getList() {
  439 + // 开启加载
  440 + this.umb_loading.listLoading = true;
  441 + selectUserMessageBindingList(this.umb_queryInfo).then((response) => {
  442 + let res = response.data;
  443 + if (res.code !== '200') {
  444 + // 关闭加载
  445 + this.umb_loading.listLoading = false;
  446 + return this.$message.error('获取-配置-列表，失败！');
  447 + }
  448 + // 获取列表数据
  449 + this.umb_page.umbList = res.data.list;
  450 + // 获取列表的总记录数
  451 + this.umb_page.total = res.data.total;
  452 + // 关闭加载
  453 + this.umb_loading.listLoading = false;
  454 + this.$message.success('获取-配置-列表，成功！');
  455 + }).catch(error => {
  456 + // 关闭加载
  457 + this.umb_loading.listLoading = false;
  458 + this.$message.error(error.toString());
  459 + });
  460 + },
  461 + /**
  462 + * umb，添加对话框，打开事件
  463 + */
  464 + umb_toAddDialog() {
  465 + this.umb_dialog.addDialog = true;
  466 + },
  467 + /**
  468 + * umb，添加对话框，关闭事件
  469 + */
  470 + umb_addDialogClosed() {
  471 + // 重置对话框
  472 + this.$refs.umb_addFormRef.resetFields();
  473 + },
  474 + /**
  475 + * umb，添加功能
  476 + */
  477 + umb_add() {
  478 + // 进行表单的预验证
  479 + this.$refs.umb_addFormRef.validate(valid => {
  480 + // 未通过，表单预校验
  481 + if (!valid) return;
  482 + // 通过，表单预检验，开启加载
  483 + this.umb_loading.addLoading = true;
  484 + insertUserMessageBinding(this.umb_addForm).then((response) => {
  485 + let res = response.data;
  486 + // 添加失败
  487 + if (res.code !== '200') {
  488 + if (res.code === '999') {
  489 + // 关闭加载
  490 + this.umb_loading.addLoading = false;
  491 + return this.$message.error('未知异常，添加配置信息，失败');
  492 + }
  493 + // 关闭加载
  494 + this.umb_loading.addLoading = false;
  495 + return this.$message.error('添加配置信息，失败');
  496 + }
  497 + // 添加，成功
  498 + this.$message.success('添加配置信息，成功');
  499 + // 关闭加载
  500 + this.umb_loading.addLoading = false;
  501 + // 隐藏对话框
  502 + this.umb_dialog.addDialog = false;
  503 + // 刷新列表
  504 + this.umb_getList();
  505 + }).catch(error => {
  506 + // 关闭加载
  507 + this.umb_loading.addLoading = false;
  508 + this.$message.error(error.toString());
  509 + });
  510 + })
  511 + },
15 512
  513 + /**
  514 + * umb，编辑对话框，打开事件
  515 + */
  516 + umb_toEditDialog(index, row) {
  517 + this.umb_editForm = Object.assign({}, row);
  518 + this.umb_dialog.editDialog = true;
  519 + },
  520 + /**
  521 + * umb，编辑对话框，关闭事件
  522 + */
  523 + umb_editDialogClosed() {
  524 + //重置对话框
  525 + this.$refs.umb_editFormRef.resetFields();
  526 + },
  527 + /**
  528 + * umb，编辑功能
  529 + */
  530 + umb_edit() {
  531 + //进行表单的预验证
  532 + this.$refs.umb_editFormRef.validate(valid => {
  533 + // 未通过，表单预校验
  534 + if (!valid) return;
  535 + // 通过，表单预检验，开启加载
  536 + this.umb_loading.editLoading = true;
  537 + updateUserMessageBinding(this.umb_editForm).then((response) => {
  538 + let res = response.data;
  539 + if (res.code !== '200') {
  540 + if (res.code === '999') {
  541 + // 关闭加载
  542 + this.umb_loading.editLoading = false;
  543 + return this.$message.error('未知异常，编辑配置信息，失败');
  544 + }
  545 + //关闭加载
  546 + this.umb_loading.editLoading = false;
  547 + return this.$message.error('编辑配置信息，失败');
  548 + }
  549 + // 关闭加载
  550 + this.umb_loading.editLoading = false;
  551 + this.$message.success('编辑配置信息，成功！');
  552 + // 隐藏对话框
  553 + this.umb_dialog.editDialog = false;
  554 + // 刷新列表
  555 + this.umb_getList();
  556 + }).catch(error => {
  557 + // 关闭加载
  558 + this.umb_loading.editLoading = false;
  559 + this.$message.error(error.toString());
  560 + });
  561 + })
  562 + },
  563 + /**
  564 + * umb，删除功能
  565 + */
  566 + umb_remove(index, row) {
  567 + // 弹框询问是否删除？
  568 + this.$confirm('此操作永久删除该配置信息, 是否继续?', '警告', {
  569 + confirmButtonText: '确定删除',
  570 + cancelButtonText: '取消',
  571 + type: 'warning'
  572 + }
  573 + ).then(() => {
  574 + // 开启加载
  575 + this.umb_loading.delLoading = true;
  576 + deleteUserMessageBinding(row).then((response) => {
  577 + let res = response.data;
  578 + if (res.code !== '200') {
  579 + // 关闭加载
  580 + this.umb_loading.delLoading = false;
  581 + return this.$message.error('删除-配置-信息，失败');
  582 + }
  583 + // 关闭加载
  584 + this.umb_loading.delLoading = false;
  585 + this.$message.success('删除-配置-信息，成功！');
  586 + // 刷新列表
  587 + this.umb_getList();
  588 + }).catch(error => {
  589 + // 关闭加载
  590 + this.umb_loading.delLoading = false;
  591 + this.$message.error(error.toString());
  592 + });
  593 + }).catch(() => {
  594 + });
16 }, 595 },
17 - created() {  
18 596
  597 + /**
  598 + * umb，批量删除---选中
  599 + */
  600 + umb_selectChange: function (selectList) {
  601 + this.umb_page.selectList = selectList;
  602 + },
  603 + /**
  604 + * umb，批量删除功能
  605 + */
  606 + umb_batchRemove() {
  607 + const ids = this.umb_page.selectList.map(item => item.id).toString();
  608 + this.$confirm('此操作将永久删除选中的配置信息, 是否继续?', '警告', {
  609 + confirmButtonText: '确定删除',
  610 + cancelButtonText: '取消',
  611 + type: 'warning'
  612 + }
  613 + ).then(() => {
  614 + // 开启加载
  615 + this.umb_loading.batchDelLoading = true;
  616 + let params = {ids: ids};
  617 + batchRemoveUserMessageBinding(params).then(response => {
  618 + let res = response.data;
  619 + if (res.code !== '200') {
  620 + // 关闭加载
  621 + this.umb_loading.batchDelLoading = false;
  622 + return this.$message.error('批量删除-配置-信息，失败');
  623 + }
  624 + this.$message.success('批量删除-配置-信息，成功！');
  625 + // 关闭加载
  626 + this.umb_loading.batchDelLoading = false;
  627 + // 刷新列表
  628 + this.umb_getList();
  629 + }).catch(error => {
  630 + // 关闭加载
  631 + this.umb_loading.batchDelLoading = false;
  632 + this.$message.error(error.toString());
  633 + });
  634 + }).catch(() => {
  635 + });
19 }, 636 },
20 - mounted() {  
21 637
22 }, 638 },
23 - computed: { 639 + created() {
  640 + // 刷新列表
  641 + this.umb_getList();
  642 + },
  643 + mounted() {
24 644
25 }, 645 },
  646 + computed: {},
26 } 647 }
27 </script> 648 </script>
28 649
@@ -4,14 +4,13 @@ @@ -4,14 +4,13 @@
4 <el-card style="background-color: #F5F7FA"> 4 <el-card style="background-color: #F5F7FA">
5 <!-- 搜素区域 --> 5 <!-- 搜素区域 -->
6 <div> 6 <div>
7 - <el-row :gutter="24"> 7 + <el-row>
8 <el-col :span="4"> 8 <el-col :span="4">
9 <el-input v-model="queryInfo.virtualHostName" prefix-icon="el-icon-search" size="medium" 9 <el-input v-model="queryInfo.virtualHostName" prefix-icon="el-icon-search" size="medium"
10 - placeholder="虚拟主机名称" clearable style="width:180px"></el-input> 10 + placeholder="虚拟主机名称" clearable></el-input>
11 </el-col> 11 </el-col>
12 <el-col :span="4"> 12 <el-col :span="4">
13 <el-select v-model="queryInfo.serverId" prefix-icon="el-icon-search" clearable size="medium" 13 <el-select v-model="queryInfo.serverId" prefix-icon="el-icon-search" clearable size="medium"
14 - style="width:180px"  
15 placeholder="请选择所属服务器"> 14 placeholder="请选择所属服务器">
16 <el-option 15 <el-option
17 v-for="item in (virtualHost_config.serverList)" 16 v-for="item in (virtualHost_config.serverList)"
@@ -21,8 +20,7 @@ @@ -21,8 +20,7 @@
21 </el-option> 20 </el-option>
22 </el-select> 21 </el-select>
23 </el-col> 22 </el-col>
24 -  
25 - <el-col :span="10"> 23 + <el-col :span="8">
26 <el-button type="success" style="width:150px" size="medium" @click="getVirtualHostList"> 24 <el-button type="success" style="width:150px" size="medium" @click="getVirtualHostList">
27 查询虚拟主机 25 查询虚拟主机
28 </el-button> 26 </el-button>