朱兆平 / vue_cli · 提交

转到一个项目

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

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

内嵌 并排对比
正在显示 7 个修改的文件 包含 450 行增加 和 21 行删除
... ... @@ -292,15 +292,15 @@ let routes = [
// // { path: '/page6', component: Page6, name: '综合楼空调站' },
// ]
// },
{
path: '/',
component: Home,
name: 'Charts',
iconCls: 'fa fa-bar-chart',
children: [
{path: '/echarts', component: echarts, name: 'echarts'}
]
},
// {
// path: '/',
// component: Home,
// name: 'Charts',
// iconCls: 'fa fa-bar-chart',
// children: [
// {path: '/echarts', component: echarts, name: 'echarts'}
// ]
// },
{
path: '*',
hidden: true,
... ...
... ... @@ -798,7 +798,7 @@
//this.exchange_config.virtualHostName = this.$route.params.virtualHost_scopeRow.virtualHostName;
} else {
// 刷新列表
this.exchange_getList();
// this.exchange_getList();
}
},
mounted() {
... ...
... ... @@ -761,7 +761,7 @@
this.queue_getList();
} else {
// 刷新列表
this.queue_getList();
// this.queue_getList();
}
},
mounted() {
... ...
... ... @@ -608,7 +608,7 @@
this.routingKey_getList();
} else {
// 刷新列表
this.routingKey_getList();
// this.routingKey_getList();
}
},
mounted() {
... ...
<template>
<el-container>
<el-main>
<el-card style="background-color: #F5F7FA">
<!-- 搜素区域 -->
<div>
<el-row>
<el-col :span="4">
<el-input v-model="user_queryInfo.username" prefix-icon="el-icon-search" size="medium"
placeholder="用户名称" clearable></el-input>
</el-col>
<el-col :span="4">
<el-input v-model="user_queryInfo.serverName" prefix-icon="el-icon-search" size="medium"
placeholder="服务器名称" clearable></el-input>
</el-col>
<el-col :span="4">
<el-input v-model="user_queryInfo.virtualHostName" prefix-icon="el-icon-search"
size="medium"
placeholder="虚拟主机名称" clearable></el-input>
</el-col>
<el-col :span="8">
<el-button type="success" style="width:150px" size="medium" @click="user_getList">
查询用户信息
</el-button>
<el-button type="primary" style="width:150px" size="medium" @click="user_toAddDialog">
添加用户信息
</el-button>
</el-col>
</el-row>
</div>
<!-- 列表区域 -->
<div style="margin-top: 20px;">
<el-table :data="user_page.userInfoList" border v-loading="user_loading.listLoading"
@selection-change="user_selectChange"
element-loading-text="获取用户信息列表，拼命加载中">
<el-table-column type="selection" width="55" align="center"></el-table-column>
<el-table-column type="index" align="center"></el-table-column>
<el-table-column label="用户名称" prop="username" align="center" width="190"></el-table-column>
<el-table-column label="服务器名称" prop="serverName" align="center" width="190"></el-table-column>
<el-table-column label="虚拟主机名称" prop="virtualHostName" align="center" width="300"></el-table-column>
<el-table-column label="操作" width="340px" align="center">
<!-- 删除用户 -->
<el-tooltip effect="dark" content="删除用户" placement="top-start" :enterable="false">
<el-button type="danger" icon="el-icon-delete" size="small"
:loading="user_loading.delLoading"
@click="user_remove(scope.$index,scope.row)">删除用户
</el-button>
</el-tooltip>
<!-- 编辑关系 -->
<el-tooltip effect="dark" content="编辑关系" placement="top-start" :enterable="false">
<el-button type="primary" icon="el-icon-edit" size="small"
@click="user_toEditDialog(scope.$index,scope.row)">编辑关系
</el-button>
</el-tooltip>
<!-- 删除关系 -->
<el-tooltip effect="dark" content="删除关系" placement="top-start" :enterable="false">
<el-button type="danger" icon="el-icon-edit" size="small"
@click="user_removeRelation(scope.$index,scope.row)">删除关系
</el-button>
</el-tooltip>
<!-- 修改密码 -->
</el-table-column>
</el-table>
</div>
<!-- 分页区域 -->
<div style="margin-top: 10px">
<el-row :gutter="24">
<el-col :span="5">
<el-button type="danger" icon="el-icon-delete"
:loading="user_loading.batchDelLoading"
:disabled="this.user_page.selectList.length===0"
@click="user_batchRemove">批量删除
</el-button>
</el-col>
<el-col :span="10" style="margin-top: 5px">
<el-pagination
@size-change="user_handleSizeChange"
@current-change="user_handleCurrentChange"
:current-page="user_queryInfo.pageNum"
:page-sizes="[10,20,30,50]"
:page-size="user_queryInfo.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="user_page.total">
</el-pagination>
</el-col>
</el-row>
</div>
</el-card>
</el-main>
<!-- 增加，对话框区域 -->
<div>
<el-dialog title="添加MQ用户信息"
:visible.sync="user_dialog.addDialog"
style="margin-top: -20px"
width="50%" text-align="center" @close="user_addDialogClosed">
<el-form :inline="true" label-width="145px" status-icon style="margin-top: -10px"
:model="user_addForm" :rules="user_addFormRules" ref="user_addFormRef" align="center">
<el-form-item label="用户名称：" prop="exchangeName">
<el-input v-model="user_addForm.username" style="width:270px" size="small" clearable
placeholder="请输入用户名称">
</el-input>
</el-form-item>
<el-form-item label="用户密码：" prop="firstPassword">
<el-input type="password" v-model="user_addForm.firstPassword" style="width:270px"
size="small" clearable show-password placeholder="请输入用户密码"></el-input>
</el-form-item>
<el-form-item label="重新输入密码：" prop="password">
<el-input type="password" v-model="user_addForm.password" style="width:270px"
size="small" clearable show-password placeholder="请重新输入密码"></el-input>
</el-form-item>
<br/>
<el-form-item label="选择关系：">
<br/>
<el-tree style="width:270px"
:data="user_config.tree.server_hostList"
:props="user_config.tree.defaultParams"
ref="tree"
node-key="id"
show-checkbox highlight-current default-expand-all>
</el-tree>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer" style="text-align: center;margin-top: -20px">
<el-button type="info" @click="user_dialog.addDialog = false" size="medium"
style="width: 100px">取消
</el-button>
<el-button type="primary" @click="user_add" :loading="user_loading.addLoading"
size="medium" style="width: 100px">添加
</el-button>
</div>
</el-dialog>
</div>
</el-container>
</template>
<script>
import {
getServerAndHostList,
selectUserInfoList
} from "../../api/message_bus";
export default {
name: "UserInfo",
data() {
return {
/**
* user，配置与参数
*/
user_config: {
tree: {
treeList: [],
// 服务器及虚拟主机列表
server_hostList: [],
defaultParams: {
label: 'aliasName',
children: 'aliasList'
}
}
},
/**
* 搜索参数
*/
user_queryInfo: {
// 用户名称
username: '',
// 服务器名称
serverName: '',
// 虚拟主机名称
virtualHostName: '',
// 当前页数
pageNum: 1,
// 每页条数
pageSize: 10
},
/**
* user，分页
*/
user_page: {
// 用户信息列表
userInfoList: [],
// 总条数
total: 0,
// 批量删除，选中列表
selectList: [],
},
/**
* user，新增表单
*/
user_addForm: {},
/**
* user，编辑表单
*/
user_editForm: {},
/**
* user,对话框管理
*/
user_dialog: {
// 添加对话框
addDialog: false,
// 编辑对话框
editDialog: false,
},
/**
* user,添加表单，验证规则
*/
user_addFormRules: {},
/**
* user,编辑表单，验证规则
*/
user_editFormRules: {},
/**
* 加载
*/
user_loading: {
// 列表加载
listLoading: false,
// 添加加载
addLoading: false,
// 编辑加载
editLoading: false,
// 删除加载
delLoading: false,
// 批量删除加载
batchDelLoading: false,
},
}
},
methods: {
/**
* 分页查询，监听 pageSize 改变的事件
*/
user_handleSizeChange(newSize) {
this.user_queryInfo.pageSize = newSize;
//刷新列表
this.user_getList();
},
/**
* 分页查询，监听 pageNum 改变的事件
*/
user_handleCurrentChange(newPage) {
this.queue_queryInfo.pageNum = newPage;
//刷新列表
this.user_getList();
},
/**
* user,分页查询
*/
user_getList() {
// 开启加载
this.user_loading.listLoading = true;
selectUserInfoList(this.user_queryInfo).then((response) => {
let res = response.data;
if (res.code !== '200') {
// 关闭加载
this.user_loading.listLoading = false;
return this.$message.error('获取用户信息列表，失败！');
}
// 获取列表数据
this.user_page.userInfoList = res.data.list;
// 获取列表的总记录数
this.user_page.total = res.data.total;
// 关闭加载
this.user_loading.listLoading = false;
this.$message.success('获取用户信息列表，成功！');
}).catch(error => {
// 关闭加载
this.exchange_loading.listLoading = false;
this.$message.error(error.toString());
});
},
/**
* user，添加对话框，打开事件
*/
user_toAddDialog() {
this.selectServerAndHostList();
this.user_dialog.addDialog = true;
},
/**
* user，添加对话框，关闭事件
*/
user_addDialogClosed() {
// 重置对话框
this.$refs.user_addFormRef.resetFields();
},
/**
* user，添加功能
*/
user_add() {
console.log(this.$refs.tree.getCheckedKeys());
},
/**
* user，编辑对话框，打开事件
*/
user_toEditDialog(index, row) {
this.user_dialog.editDialog = true;
this.user_editForm = Object.assign({}, row);
},
/**
* user，编辑对话框，关闭事件
*/
user_editDialogClosed() {
//重置对话框
this.$refs.user_editFormRef.resetFields();
},
/**
* user，编辑功能
*/
user_edit() {
},
/**
* user，删除功能
*/
user_remove(index, row) {
},
/**
* user，删除用户关系
*/
user_removeRelation(index, row) {
},
/**
* user，批量删除---选中
*/
user_selectChange: function (selectList) {
this.user_page.selectList = selectList;
},
/**
* user，批量删除功能
*/
user_batchRemove() {
const ids = this.user_page.selectList.map(item => item.id).toString();
},
/**
* 服务器与虚拟主机 1：n
* 获取列表
*/
selectServerAndHostList() {
getServerAndHostList().then((response) => {
let res = response.data;
if (res.code !== '200') {
return this.$message.error('获取服务器与虚拟主机信息，失败！');
}
// 获取列表数据
this.user_config.tree.server_hostList = res.data;
}).catch(error => {
this.$message.error(error.toString());
});
},
},
created() {
},
mounted() {
},
computed: {},
}
</script>
<style scoped>
</style>
\ No newline at end of file
... ...
... ... @@ -126,16 +126,32 @@
<el-form :inline="true" label-width="120px" status-icon style="margin-top: -30px" align="center"
:model="umb_addForm" :rules="umb_addFormRules" ref="umb_addFormRef">
<el-form-item label="用户名称：" prop="userIds">
<el-select v-model="umb_addForm.userIds" prefix-icon="el-icon-search" clearable
<!-- <el-form-item label="用户名称：" prop="userIds">-->
<!-- <el-select v-model="umb_addForm.userIds" prefix-icon="el-icon-search" clearable-->
<!-- @change="umb_userInfo_addChange"-->
<!-- style="width:400px" size="medium" filterable multiple-->
<!-- placeholder="请选择用户">-->
<!-- <el-option-->
<!-- v-for="item in (umb_config.userInfoList)"-->
<!-- :key="item.id"-->
<!-- :label="item.username"-->
<!-- :value="item.id">-->
<!-- </el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<el-form-item label="用户名称：" prop="usernames">
<el-select v-model="umb_addForm.usernames" prefix-icon="el-icon-search" clearable
@change="umb_userInfo_addChange"
style="width:400px" size="medium" filterable multiple
placeholder="请选择用户">
<el-option
v-for="item in (umb_config.userInfoList)"
v-for="item in (user_cloud.cloudUserList)"
:key="item.id"
:label="item.username"
:value="item.id">
:value="item.username">
<span style="float: left">{{ item.username }}</span>
<span style="float: right; color: #0984e3; ">{{ item.realname }}</span>
</el-option>
</el-select>
</el-form-item>
... ... @@ -206,7 +222,7 @@
<el-form-item label="订阅者队列：" prop="queueIds">
<el-select v-model="umb_addForm.queueIds" prefix-icon="el-icon-search" clearable
style="width:400px" size="medium" filterable multiple
:disabled="umb_addForm.virtualHostId==='' && umb_addForm.userIds.length===0"
:disabled="umb_addForm.virtualHostId==='' || umb_addForm.userIds.length===0"
placeholder="请选择订阅者队列">
<el-option
v-for="item in (umb_config.queueList)"
... ... @@ -357,6 +373,7 @@
getServerList, getHostList, getExchangeList, getQueueList, getRoutingKeyList,
getUserInfoList
} from "../../api/message_bus";
import {getUserList} from '../../api/user';
export default {
/**
... ... @@ -368,6 +385,17 @@
data() {
return {
/**
* 用户中心,相关
*/
user_cloud: {
cloudUserList: [],
queryInfo: {
pageNum: 1,
pageSize: 10000,
}
},
/**
* umb，配置与参数
*/
umb_config: {
... ... @@ -443,6 +471,8 @@
exchangeIds: [],
// 临时字段，用户id集合
userIds: [],
// 临时字段，用户名称集合
usernames: [],
// 临时字段，路由键id集合
routingKeyIds: [],
},
... ... @@ -482,6 +512,10 @@
userIds: [
{required: true, message: '请输入用户名称', trigger: ['blur', 'change']},
],
// 用户名称
usernames: [
{required: true, message: '请输入用户名称', trigger: ['blur', 'change']},
],
// 订阅者名称
// subscriber: [
// {required: true, message: '请输入订阅者名称', trigger: ['blur', 'change']},
... ... @@ -839,9 +873,9 @@
/**
* 获取队列-列表
*/
selectQueueList(id, userId) {
selectQueueList(virtualHostId, userId) {
let params = {
virtualHostId: id,
virtualHostId: virtualHostId,
userId: userId
};
getQueueList(params).then((response) => {
... ... @@ -883,6 +917,7 @@
},
umb_userInfo_addChange(value) {
console.log(value.join())
// 根据虚拟主机id和用户id来查询，队列集合
this.selectQueueList(this.umb_addForm.virtualHostId, value.join());
},
... ... @@ -963,16 +998,30 @@
this.$message.error(error.toString());
});
},
/**
* 查询用户中心的用户
*/
getCloudUser() {
getUserList(this.user_cloud.queryInfo).then((response) => {
this.user_cloud.cloudUserList = response.data.data.list;
console.log(this.user_cloud.cloudUserList)
}).catch((error) => {
this.$message.error(error.toString());
});
},
},
created() {
// 刷新列表
this.umb_getList();
// this.umb_getList();
},
mounted() {
// 获取服务器列表
this.selectServerList();
// 获取用户信息列表
this.umb_getUserInfoList();
// 获取用户中心的用户列表
this.getCloudUser();
},
computed: {},
}
... ...
... ... @@ -583,7 +583,7 @@
this.virtualHost_config.serverName = this.$route.params.server_scopeRow.serverName;
} else {
// 刷新列表
this.getVirtualHostList();
// this.getVirtualHostList();
}
},
mounted() {
... ...