|
|
|
<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 |
...
|
...
|
|
