朱兆平 / vue_cli · 提交

转到一个项目

作者 王勇
提交 754443ab1b0be33fe61f3bf088f9e3855a362916 1 个父辈 a496f8d1

取消进入界面就获取列表数据

内嵌 并排对比
正在显示 7 个修改的文件 包含 450 行增加 和 21 行删除
@@ -292,15 +292,15 @@ let routes = [ @@ -292,15 +292,15 @@ let routes = [
292 // // { path: '/page6', component: Page6, name: '综合楼空调站' }, 292 // // { path: '/page6', component: Page6, name: '综合楼空调站' },
293 // ] 293 // ]
294 // }, 294 // },
295 - {  
296 - path: '/',  
297 - component: Home,  
298 - name: 'Charts',  
299 - iconCls: 'fa fa-bar-chart',  
300 - children: [  
301 - {path: '/echarts', component: echarts, name: 'echarts'}  
302 - ]  
303 - }, 295 + // {
  296 + // path: '/',
  297 + // component: Home,
  298 + // name: 'Charts',
  299 + // iconCls: 'fa fa-bar-chart',
  300 + // children: [
  301 + // {path: '/echarts', component: echarts, name: 'echarts'}
  302 + // ]
  303 + // },
304 { 304 {
305 path: '*', 305 path: '*',
306 hidden: true, 306 hidden: true,
@@ -798,7 +798,7 @@ @@ -798,7 +798,7 @@
798 //this.exchange_config.virtualHostName = this.$route.params.virtualHost_scopeRow.virtualHostName; 798 //this.exchange_config.virtualHostName = this.$route.params.virtualHost_scopeRow.virtualHostName;
799 } else { 799 } else {
800 // 刷新列表 800 // 刷新列表
801 - this.exchange_getList(); 801 + // this.exchange_getList();
802 } 802 }
803 }, 803 },
804 mounted() { 804 mounted() {
@@ -761,7 +761,7 @@ @@ -761,7 +761,7 @@
761 this.queue_getList(); 761 this.queue_getList();
762 } else { 762 } else {
763 // 刷新列表 763 // 刷新列表
764 - this.queue_getList(); 764 + // this.queue_getList();
765 } 765 }
766 }, 766 },
767 mounted() { 767 mounted() {
@@ -608,7 +608,7 @@ @@ -608,7 +608,7 @@
608 this.routingKey_getList(); 608 this.routingKey_getList();
609 } else { 609 } else {
610 // 刷新列表 610 // 刷新列表
611 - this.routingKey_getList(); 611 + // this.routingKey_getList();
612 } 612 }
613 }, 613 },
614 mounted() { 614 mounted() {
  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="user_queryInfo.username" 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="user_queryInfo.serverName" prefix-icon="el-icon-search" size="medium"
  14 + placeholder="服务器名称" clearable></el-input>
  15 + </el-col>
  16 + <el-col :span="4">
  17 + <el-input v-model="user_queryInfo.virtualHostName" prefix-icon="el-icon-search"
  18 + size="medium"
  19 + placeholder="虚拟主机名称" clearable></el-input>
  20 + </el-col>
  21 + <el-col :span="8">
  22 + <el-button type="success" style="width:150px" size="medium" @click="user_getList">
  23 + 查询用户信息
  24 + </el-button>
  25 + <el-button type="primary" style="width:150px" size="medium" @click="user_toAddDialog">
  26 + 添加用户信息
  27 + </el-button>
  28 + </el-col>
  29 + </el-row>
  30 + </div>
  31 + <!-- 列表区域 -->
  32 + <div style="margin-top: 20px;">
  33 + <el-table :data="user_page.userInfoList" border v-loading="user_loading.listLoading"
  34 + @selection-change="user_selectChange"
  35 + element-loading-text="获取用户信息列表，拼命加载中">
  36 + <el-table-column type="selection" width="55" align="center"></el-table-column>
  37 + <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>
  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 +
  63 + </el-table-column>
  64 + </el-table>
  65 + </div>
  66 + <!-- 分页区域 -->
  67 + <div style="margin-top: 10px">
  68 + <el-row :gutter="24">
  69 + <el-col :span="5">
  70 + <el-button type="danger" icon="el-icon-delete"
  71 + :loading="user_loading.batchDelLoading"
  72 + :disabled="this.user_page.selectList.length===0"
  73 + @click="user_batchRemove">批量删除
  74 + </el-button>
  75 + </el-col>
  76 + <el-col :span="10" style="margin-top: 5px">
  77 + <el-pagination
  78 + @size-change="user_handleSizeChange"
  79 + @current-change="user_handleCurrentChange"
  80 + :current-page="user_queryInfo.pageNum"
  81 + :page-sizes="[10,20,30,50]"
  82 + :page-size="user_queryInfo.pageSize"
  83 + layout="total, sizes, prev, pager, next, jumper"
  84 + :total="user_page.total">
  85 + </el-pagination>
  86 + </el-col>
  87 + </el-row>
  88 + </div>
  89 + </el-card>
  90 + </el-main>
  91 + <!-- 增加，对话框区域 -->
  92 + <div>
  93 + <el-dialog title="添加MQ用户信息"
  94 + :visible.sync="user_dialog.addDialog"
  95 + style="margin-top: -20px"
  96 + width="50%" text-align="center" @close="user_addDialogClosed">
  97 + <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">
  99 + <el-form-item label="用户名称：" prop="exchangeName">
  100 + <el-input v-model="user_addForm.username" style="width:270px" size="small" clearable
  101 + placeholder="请输入用户名称">
  102 + </el-input>
  103 + </el-form-item>
  104 + <el-form-item label="用户密码：" prop="firstPassword">
  105 + <el-input type="password" v-model="user_addForm.firstPassword" style="width:270px"
  106 + size="small" clearable show-password placeholder="请输入用户密码"></el-input>
  107 + </el-form-item>
  108 + <el-form-item label="重新输入密码：" prop="password">
  109 + <el-input type="password" v-model="user_addForm.password" style="width:270px"
  110 + size="small" clearable show-password placeholder="请重新输入密码"></el-input>
  111 + </el-form-item>
  112 + <br/>
  113 + <el-form-item label="选择关系：">
  114 + <br/>
  115 + <el-tree style="width:270px"
  116 + :data="user_config.tree.server_hostList"
  117 + :props="user_config.tree.defaultParams"
  118 + ref="tree"
  119 + node-key="id"
  120 + show-checkbox highlight-current default-expand-all>
  121 + </el-tree>
  122 + </el-form-item>
  123 + </el-form>
  124 + <div slot="footer" class="dialog-footer" style="text-align: center;margin-top: -20px">
  125 + <el-button type="info" @click="user_dialog.addDialog = false" size="medium"
  126 + style="width: 100px">取消
  127 + </el-button>
  128 + <el-button type="primary" @click="user_add" :loading="user_loading.addLoading"
  129 + size="medium" style="width: 100px">添加
  130 + </el-button>
  131 + </div>
  132 + </el-dialog>
  133 + </div>
  134 + </el-container>
  135 +</template>
  136 +
  137 +<script>
  138 + import {
  139 + getServerAndHostList,
  140 + selectUserInfoList
  141 + } from "../../api/message_bus";
  142 +
  143 + export default {
  144 + name: "UserInfo",
  145 + data() {
  146 + return {
  147 +
  148 + /**
  149 + * user，配置与参数
  150 + */
  151 + user_config: {
  152 + tree: {
  153 + treeList: [],
  154 + // 服务器及虚拟主机列表
  155 + server_hostList: [],
  156 + defaultParams: {
  157 + label: 'aliasName',
  158 + children: 'aliasList'
  159 + }
  160 + }
  161 + },
  162 +
  163 + /**
  164 + * 搜索参数
  165 + */
  166 + user_queryInfo: {
  167 + // 用户名称
  168 + username: '',
  169 + // 服务器名称
  170 + serverName: '',
  171 + // 虚拟主机名称
  172 + virtualHostName: '',
  173 + // 当前页数
  174 + pageNum: 1,
  175 + // 每页条数
  176 + pageSize: 10
  177 + },
  178 +
  179 + /**
  180 + * user，分页
  181 + */
  182 + user_page: {
  183 + // 用户信息列表
  184 + userInfoList: [],
  185 + // 总条数
  186 + total: 0,
  187 + // 批量删除，选中列表
  188 + selectList: [],
  189 + },
  190 +
  191 + /**
  192 + * user，新增表单
  193 + */
  194 + user_addForm: {},
  195 +
  196 + /**
  197 + * user，编辑表单
  198 + */
  199 + user_editForm: {},
  200 +
  201 + /**
  202 + * user,对话框管理
  203 + */
  204 + user_dialog: {
  205 + // 添加对话框
  206 + addDialog: false,
  207 + // 编辑对话框
  208 + editDialog: false,
  209 + },
  210 +
  211 + /**
  212 + * user,添加表单，验证规则
  213 + */
  214 + user_addFormRules: {},
  215 + /**
  216 + * user,编辑表单，验证规则
  217 + */
  218 + user_editFormRules: {},
  219 + /**
  220 + * 加载
  221 + */
  222 + user_loading: {
  223 + // 列表加载
  224 + listLoading: false,
  225 + // 添加加载
  226 + addLoading: false,
  227 + // 编辑加载
  228 + editLoading: false,
  229 + // 删除加载
  230 + delLoading: false,
  231 + // 批量删除加载
  232 + batchDelLoading: false,
  233 + },
  234 +
  235 + }
  236 + },
  237 + methods: {
  238 + /**
  239 + * 分页查询，监听 pageSize 改变的事件
  240 + */
  241 + user_handleSizeChange(newSize) {
  242 + this.user_queryInfo.pageSize = newSize;
  243 + //刷新列表
  244 + this.user_getList();
  245 + },
  246 + /**
  247 + * 分页查询，监听 pageNum 改变的事件
  248 + */
  249 + user_handleCurrentChange(newPage) {
  250 + this.queue_queryInfo.pageNum = newPage;
  251 + //刷新列表
  252 + this.user_getList();
  253 + },
  254 + /**
  255 + * user,分页查询
  256 + */
  257 + user_getList() {
  258 + // 开启加载
  259 + this.user_loading.listLoading = true;
  260 + selectUserInfoList(this.user_queryInfo).then((response) => {
  261 + let res = response.data;
  262 + if (res.code !== '200') {
  263 + // 关闭加载
  264 + this.user_loading.listLoading = false;
  265 + return this.$message.error('获取用户信息列表，失败！');
  266 + }
  267 + // 获取列表数据
  268 + this.user_page.userInfoList = res.data.list;
  269 + // 获取列表的总记录数
  270 + this.user_page.total = res.data.total;
  271 + // 关闭加载
  272 + this.user_loading.listLoading = false;
  273 + this.$message.success('获取用户信息列表，成功！');
  274 + }).catch(error => {
  275 + // 关闭加载
  276 + this.exchange_loading.listLoading = false;
  277 + this.$message.error(error.toString());
  278 + });
  279 + },
  280 + /**
  281 + * user，添加对话框，打开事件
  282 + */
  283 + user_toAddDialog() {
  284 + this.selectServerAndHostList();
  285 + this.user_dialog.addDialog = true;
  286 + },
  287 + /**
  288 + * user，添加对话框，关闭事件
  289 + */
  290 + user_addDialogClosed() {
  291 + // 重置对话框
  292 + this.$refs.user_addFormRef.resetFields();
  293 + },
  294 +
  295 + /**
  296 + * user，添加功能
  297 + */
  298 + user_add() {
  299 + console.log(this.$refs.tree.getCheckedKeys());
  300 + },
  301 +
  302 + /**
  303 + * user，编辑对话框，打开事件
  304 + */
  305 + user_toEditDialog(index, row) {
  306 + this.user_dialog.editDialog = true;
  307 + this.user_editForm = Object.assign({}, row);
  308 + },
  309 +
  310 + /**
  311 + * user，编辑对话框，关闭事件
  312 + */
  313 + user_editDialogClosed() {
  314 + //重置对话框
  315 + this.$refs.user_editFormRef.resetFields();
  316 + },
  317 +
  318 + /**
  319 + * user，编辑功能
  320 + */
  321 + user_edit() {
  322 +
  323 + },
  324 +
  325 + /**
  326 + * user，删除功能
  327 + */
  328 + user_remove(index, row) {
  329 +
  330 + },
  331 +
  332 + /**
  333 + * user，删除用户关系
  334 + */
  335 + user_removeRelation(index, row) {
  336 +
  337 + },
  338 +
  339 + /**
  340 + * user，批量删除---选中
  341 + */
  342 + user_selectChange: function (selectList) {
  343 + this.user_page.selectList = selectList;
  344 + },
  345 +
  346 + /**
  347 + * user，批量删除功能
  348 + */
  349 + user_batchRemove() {
  350 + const ids = this.user_page.selectList.map(item => item.id).toString();
  351 + },
  352 +
  353 + /**
  354 + * 服务器与虚拟主机 1：n
  355 + * 获取列表
  356 + */
  357 + selectServerAndHostList() {
  358 + getServerAndHostList().then((response) => {
  359 + let res = response.data;
  360 + if (res.code !== '200') {
  361 + return this.$message.error('获取服务器与虚拟主机信息，失败！');
  362 + }
  363 + // 获取列表数据
  364 + this.user_config.tree.server_hostList = res.data;
  365 + }).catch(error => {
  366 + this.$message.error(error.toString());
  367 + });
  368 + },
  369 + },
  370 + created() {
  371 + },
  372 + mounted() {
  373 + },
  374 + computed: {},
  375 + }
  376 +</script>
  377 +
  378 +<style scoped>
  379 +
  380 +</style>
@@ -126,16 +126,32 @@ @@ -126,16 +126,32 @@
126 <el-form :inline="true" label-width="120px" status-icon style="margin-top: -30px" align="center" 126 <el-form :inline="true" label-width="120px" status-icon style="margin-top: -30px" align="center"
127 :model="umb_addForm" :rules="umb_addFormRules" ref="umb_addFormRef"> 127 :model="umb_addForm" :rules="umb_addFormRules" ref="umb_addFormRef">
128 128
129 - <el-form-item label="用户名称：" prop="userIds">  
130 - <el-select v-model="umb_addForm.userIds" prefix-icon="el-icon-search" clearable 129 +<!-- <el-form-item label="用户名称：" prop="userIds">-->
  130 +<!-- <el-select v-model="umb_addForm.userIds" prefix-icon="el-icon-search" clearable-->
  131 +<!-- @change="umb_userInfo_addChange"-->
  132 +<!-- style="width:400px" size="medium" filterable multiple-->
  133 +<!-- placeholder="请选择用户">-->
  134 +<!-- <el-option-->
  135 +<!-- v-for="item in (umb_config.userInfoList)"-->
  136 +<!-- :key="item.id"-->
  137 +<!-- :label="item.username"-->
  138 +<!-- :value="item.id">-->
  139 +<!-- </el-option>-->
  140 +<!-- </el-select>-->
  141 +<!-- </el-form-item>-->
  142 +
  143 + <el-form-item label="用户名称：" prop="usernames">
  144 + <el-select v-model="umb_addForm.usernames" prefix-icon="el-icon-search" clearable
131 @change="umb_userInfo_addChange" 145 @change="umb_userInfo_addChange"
132 style="width:400px" size="medium" filterable multiple 146 style="width:400px" size="medium" filterable multiple
133 placeholder="请选择用户"> 147 placeholder="请选择用户">
134 <el-option 148 <el-option
135 - v-for="item in (umb_config.userInfoList)" 149 + v-for="item in (user_cloud.cloudUserList)"
136 :key="item.id" 150 :key="item.id"
137 :label="item.username" 151 :label="item.username"
138 - :value="item.id"> 152 + :value="item.username">
  153 + <span style="float: left">{{ item.username }}</span>
  154 + <span style="float: right; color: #0984e3; ">{{ item.realname }}</span>
139 </el-option> 155 </el-option>
140 </el-select> 156 </el-select>
141 </el-form-item> 157 </el-form-item>
@@ -206,7 +222,7 @@ @@ -206,7 +222,7 @@
206 <el-form-item label="订阅者队列：" prop="queueIds"> 222 <el-form-item label="订阅者队列：" prop="queueIds">
207 <el-select v-model="umb_addForm.queueIds" prefix-icon="el-icon-search" clearable 223 <el-select v-model="umb_addForm.queueIds" prefix-icon="el-icon-search" clearable
208 style="width:400px" size="medium" filterable multiple 224 style="width:400px" size="medium" filterable multiple
209 - :disabled="umb_addForm.virtualHostId==='' && umb_addForm.userIds.length===0" 225 + :disabled="umb_addForm.virtualHostId==='' || umb_addForm.userIds.length===0"
210 placeholder="请选择订阅者队列"> 226 placeholder="请选择订阅者队列">
211 <el-option 227 <el-option
212 v-for="item in (umb_config.queueList)" 228 v-for="item in (umb_config.queueList)"
@@ -357,6 +373,7 @@ @@ -357,6 +373,7 @@
357 getServerList, getHostList, getExchangeList, getQueueList, getRoutingKeyList, 373 getServerList, getHostList, getExchangeList, getQueueList, getRoutingKeyList,
358 getUserInfoList 374 getUserInfoList
359 } from "../../api/message_bus"; 375 } from "../../api/message_bus";
  376 + import {getUserList} from '../../api/user';
360 377
361 export default { 378 export default {
362 /** 379 /**
@@ -368,6 +385,17 @@ @@ -368,6 +385,17 @@
368 data() { 385 data() {
369 return { 386 return {
370 /** 387 /**
  388 + * 用户中心,相关
  389 + */
  390 + user_cloud: {
  391 + cloudUserList: [],
  392 + queryInfo: {
  393 + pageNum: 1,
  394 + pageSize: 10000,
  395 + }
  396 + },
  397 +
  398 + /**
371 * umb，配置与参数 399 * umb，配置与参数
372 */ 400 */
373 umb_config: { 401 umb_config: {
@@ -443,6 +471,8 @@ @@ -443,6 +471,8 @@
443 exchangeIds: [], 471 exchangeIds: [],
444 // 临时字段，用户id集合 472 // 临时字段，用户id集合
445 userIds: [], 473 userIds: [],
  474 + // 临时字段，用户名称集合
  475 + usernames: [],
446 // 临时字段，路由键id集合 476 // 临时字段，路由键id集合
447 routingKeyIds: [], 477 routingKeyIds: [],
448 }, 478 },
@@ -482,6 +512,10 @@ @@ -482,6 +512,10 @@
482 userIds: [ 512 userIds: [
483 {required: true, message: '请输入用户名称', trigger: ['blur', 'change']}, 513 {required: true, message: '请输入用户名称', trigger: ['blur', 'change']},
484 ], 514 ],
  515 + // 用户名称
  516 + usernames: [
  517 + {required: true, message: '请输入用户名称', trigger: ['blur', 'change']},
  518 + ],
485 // 订阅者名称 519 // 订阅者名称
486 // subscriber: [ 520 // subscriber: [
487 // {required: true, message: '请输入订阅者名称', trigger: ['blur', 'change']}, 521 // {required: true, message: '请输入订阅者名称', trigger: ['blur', 'change']},
@@ -839,9 +873,9 @@ @@ -839,9 +873,9 @@
839 /** 873 /**
840 * 获取队列-列表 874 * 获取队列-列表
841 */ 875 */
842 - selectQueueList(id, userId) { 876 + selectQueueList(virtualHostId, userId) {
843 let params = { 877 let params = {
844 - virtualHostId: id, 878 + virtualHostId: virtualHostId,
845 userId: userId 879 userId: userId
846 }; 880 };
847 getQueueList(params).then((response) => { 881 getQueueList(params).then((response) => {
@@ -883,6 +917,7 @@ @@ -883,6 +917,7 @@
883 }, 917 },
884 918
885 umb_userInfo_addChange(value) { 919 umb_userInfo_addChange(value) {
  920 + console.log(value.join())
886 // 根据虚拟主机id和用户id来查询，队列集合 921 // 根据虚拟主机id和用户id来查询，队列集合
887 this.selectQueueList(this.umb_addForm.virtualHostId, value.join()); 922 this.selectQueueList(this.umb_addForm.virtualHostId, value.join());
888 }, 923 },
@@ -963,16 +998,30 @@ @@ -963,16 +998,30 @@
963 this.$message.error(error.toString()); 998 this.$message.error(error.toString());
964 }); 999 });
965 }, 1000 },
  1001 +
  1002 + /**
  1003 + * 查询用户中心的用户
  1004 + */
  1005 + getCloudUser() {
  1006 + getUserList(this.user_cloud.queryInfo).then((response) => {
  1007 + this.user_cloud.cloudUserList = response.data.data.list;
  1008 + console.log(this.user_cloud.cloudUserList)
  1009 + }).catch((error) => {
  1010 + this.$message.error(error.toString());
  1011 + });
  1012 + },
966 }, 1013 },
967 created() { 1014 created() {
968 // 刷新列表 1015 // 刷新列表
969 - this.umb_getList(); 1016 + // this.umb_getList();
970 }, 1017 },
971 mounted() { 1018 mounted() {
972 // 获取服务器列表 1019 // 获取服务器列表
973 this.selectServerList(); 1020 this.selectServerList();
974 // 获取用户信息列表 1021 // 获取用户信息列表
975 this.umb_getUserInfoList(); 1022 this.umb_getUserInfoList();
  1023 + // 获取用户中心的用户列表
  1024 + this.getCloudUser();
976 }, 1025 },
977 computed: {}, 1026 computed: {},
978 } 1027 }
@@ -583,7 +583,7 @@ @@ -583,7 +583,7 @@
583 this.virtualHost_config.serverName = this.$route.params.server_scopeRow.serverName; 583 this.virtualHost_config.serverName = this.$route.params.server_scopeRow.serverName;
584 } else { 584 } else {
585 // 刷新列表 585 // 刷新列表
586 - this.getVirtualHostList(); 586 + // this.getVirtualHostList();
587 } 587 }
588 }, 588 },
589 mounted() { 589 mounted() {