朱兆平 / vue_cli · 提交

转到一个项目

作者 王勇
提交 99b6b8f0f119e9bf960215b8ad8f98f85f23a54d 1 个父辈 39a8069c

修改表格大小

内嵌 并排对比
正在显示 3 个修改的文件 包含 377 行增加 和 85 行删除
... ... @@ -90,5 +90,9 @@ export const batchRemoveUserMessageBinding = params =>{return http.get(`${baseUr
// 级联查询
export const getServerList = params =>{return http.get(`${baseUrl}/cascade/server`, params);};
export const getHostList = params =>{return http.get(`${baseUrl}/cascade/host`, params);};
export const getExchangeList = params =>{return http.get(`${baseUrl}/cascade/exchange`, params);};
export const getQueueList = params =>{return http.get(`${baseUrl}/cascade/queue`, params);};
export const getRoutingKeyList = params =>{return http.get(`${baseUrl}/cascade/routing`, params);};
export const getServerAndHostList = params =>{return http.get(`${baseUrl}/cascade/server_host`, params);};
export const getServerAndHostAndExchangeList = params =>{return http.get(`${baseUrl}/cascade/server_host_exchange`, params);};
... ...
... ... @@ -32,7 +32,19 @@
<el-input v-model="messageNote_queryInfo.routingKeyName" placeholder="路由键名称"
size="medium" clearable prefix-icon="el-icon-search"></el-input>
</el-col>
<el-col :span="8">
<el-col :span="4">
<el-date-picker v-model="messageNote_queryInfo.sendTime" type="date"
value-format="yyyy-MM-dd"
placeholder="消息发送时间" size="medium" style="width: auto"></el-date-picker>
</el-col>
<el-col :span="4">
<el-date-picker v-model="messageNote_queryInfo.receiveTime" type="date"
value-format="yyyy-MM-dd"
placeholder="消息接收时间" size="medium" style="width: auto"></el-date-picker>
</el-col>
</el-row>
<el-row>
<el-col :span="15">
<el-button type="success" style="width:150px" size="medium" @click="messageNote_getList">
查询消息收发记录
</el-button>
... ... @@ -40,6 +52,10 @@
@click="messageNote_toAddDialog">
添加消息收发记录
</el-button>
<el-button type="warning" style="width:150px" size="medium"
@click="messageNote_openDeleteTime">
设置定时删除
</el-button>
</el-col>
</el-row>
</div>
... ... @@ -195,6 +211,10 @@
queueName: '',
// 路由键名称
routingKeyName: '',
// 消息发送时间
sendTime: undefined,
// 消息获取时间
receiveTime: undefined,
// 当前页数
pageNum: 1,
// 每页条数
... ... @@ -255,6 +275,9 @@
addDialog: false,
// 编辑对话框
editDialog: false,
// 定时删除记录对话框
openDeleteTimeDialog: false,
},
/**
... ... @@ -527,10 +550,20 @@
}).catch(() => {
});
},
messageNote_openDeleteTime() {
},
/**
* 设置定时删除
*/
messageNote_setDeleteTime() {
},
},
created() {
// 刷新列表
// this.messageNote_getList();
this.messageNote_getList();
},
mounted() {
... ...
... ... @@ -132,32 +132,76 @@
placeholder="请输入订阅者名称">
</el-input>
</el-form-item>
<el-form-item label="服务器名称：" prop="serverName">
<el-input v-model="umb_addForm.serverName" style="width:240px" size="small" clearable
placeholder="请输入服务器名称">
</el-input>
<el-form-item label="服务器名称：" prop="serverId">
<el-select v-model="umb_addForm.serverId" prefix-icon="el-icon-search" clearable
style="width:240px" size="small"
@change="umb_server_addChange"
placeholder="请选择所属服务器">
<el-option
v-for="item in (umb_config.serverList)"
:key="item.id"
:label="item.serverName"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="虚拟主机名称：" prop="virtualHostName">
<el-input v-model="umb_addForm.virtualHostName" style="width:240px" size="small" clearable
placeholder="请输入虚拟主机名称">
</el-input>
<el-form-item label="虚拟主机名称：" prop="virtualHostId">
<el-select v-model="umb_addForm.virtualHostId" prefix-icon="el-icon-search" clearable
style="width:240px" size="small"
@change="umb_virtualHost_addChange"
:disabled="umb_addForm.serverId===''"
placeholder="请选择虚拟主机名称">
<el-option
v-for="item in (umb_config.virtualHostList)"
:key="item.id"
:label="item.virtualHostName"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="交换机名称：" prop="exchangeName">
<el-input v-model="umb_addForm.exchangeName" style="width:240px" size="small" clearable
placeholder="请输入交换机名称">
</el-input>
<el-form-item label="交换机名称：" prop="exchangeId">
<el-select v-model="umb_addForm.exchangeId" prefix-icon="el-icon-search" clearable
style="width:240px" size="small"
@change="umb_exchange_addChange"
:disabled="umb_addForm.virtualHostId===''"
placeholder="请选择交换机名称">
<el-option
v-for="item in (umb_config.exchangeList)"
:key="item.id"
:label="item.exchangeName"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="队列名称：" prop="queueName">
<el-input v-model="umb_addForm.queueName" style="width:240px" size="small" clearable
placeholder="请输入队列名称">
</el-input>
<el-form-item label="队列名称：" prop="queueId">
<el-select v-model="umb_addForm.queueId" prefix-icon="el-icon-search" clearable
style="width:240px" size="small"
:disabled="umb_addForm.virtualHostId===''"
placeholder="请选择交换机名称">
<el-option
v-for="item in (umb_config.queueList)"
:key="item.id"
:label="item.queueName"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="路由键名称：" prop="routingKeyName">
<el-input v-model="umb_addForm.routingKeyName" style="width:240px" size="small" clearable
placeholder="请输入路由键名称">
</el-input>
<el-form-item label="路由键名称：" prop="routingKeyId">
<el-select v-model="umb_addForm.routingKeyId" prefix-icon="el-icon-search" clearable
style="width:240px" size="small"
:disabled="umb_addForm.exchangeId===''"
placeholder="请选择路由键名称">
<el-option
v-for="item in (umb_config.routingKeyList)"
:key="item.id"
:label="item.routingKeyName"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer" style="text-align: center;margin-top: -20px">
... ... @@ -189,31 +233,76 @@
</el-input>
</el-form-item>
<el-form-item label="服务器名称：" prop="serverName">
<el-input v-model="umb_editForm.serverName" style="width:240px" size="small" clearable
placeholder="请输入服务器名称">
</el-input>
<el-form-item label="服务器名称：" prop="serverId">
<el-select v-model="umb_editForm.serverId" prefix-icon="el-icon-search" clearable
style="width:240px" size="small"
@change="umb_server_editChange"
placeholder="请选择所属服务器">
<el-option
v-for="item in (umb_config.serverList)"
:key="item.id"
:label="item.serverName"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="虚拟主机名称：" prop="virtualHostName">
<el-input v-model="umb_editForm.virtualHostName" style="width:240px" size="small" clearable
placeholder="请输入虚拟主机名称">
</el-input>
<el-form-item label="虚拟主机名称：" prop="virtualHostId">
<el-select v-model="umb_editForm.virtualHostId" prefix-icon="el-icon-search" clearable
style="width:240px" size="small"
@change="umb_virtualHost_editChange"
:disabled="umb_editForm.serverId===''"
placeholder="请选择虚拟主机名称">
<el-option
v-for="item in (umb_config.virtualHostList)"
:key="item.id"
:label="item.virtualHostName"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="交换机名称：" prop="exchangeName">
<el-input v-model="umb_editForm.exchangeName" style="width:240px" size="small" clearable
placeholder="请输入交换机名称">
</el-input>
<el-form-item label="交换机名称：" prop="exchangeId">
<el-select v-model="umb_editForm.exchangeId" prefix-icon="el-icon-search" clearable
style="width:240px" size="small"
@change="umb_exchange_editChange"
:disabled="umb_editForm.virtualHostId===''"
placeholder="请选择交换机名称">
<el-option
v-for="item in (umb_config.exchangeList)"
:key="item.id"
:label="item.exchangeName"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="队列名称：" prop="queueName">
<el-input v-model="umb_editForm.queueName" style="width:240px" size="small" clearable
placeholder="请输入队列名称">
</el-input>
<el-form-item label="队列名称：" prop="queueId">
<el-select v-model="umb_editForm.queueId" prefix-icon="el-icon-search" clearable
style="width:240px" size="small"
:disabled="umb_editForm.virtualHostId===''"
placeholder="请选择交换机名称">
<el-option
v-for="item in (umb_config.queueList)"
:key="item.id"
:label="item.queueName"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="路由键名称：" prop="routingKeyName">
<el-input v-model="umb_editForm.routingKeyName" style="width:240px" size="small" clearable
placeholder="请输入路由键名称">
</el-input>
<el-form-item label="路由键名称：" prop="routingKeyId">
<el-select v-model="umb_editForm.routingKeyId" prefix-icon="el-icon-search" clearable
style="width:240px" size="small"
:disabled="umb_editForm.exchangeId===''"
placeholder="请选择路由键名称">
<el-option
v-for="item in (umb_config.routingKeyList)"
:key="item.id"
:label="item.routingKeyName"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer" style="text-align: center">
... ... @@ -237,6 +326,7 @@
updateUserMessageBinding,
deleteUserMessageBinding,
batchRemoveUserMessageBinding,
getServerList, getHostList, getExchangeList, getQueueList, getRoutingKeyList
} from "../../api/message_bus";
export default {
... ... @@ -251,7 +341,18 @@
/**
* umb，配置与参数
*/
umb_config: {},
umb_config: {
// 服务器列表
serverList: [],
// 虚拟主机列表
virtualHostList: [],
// 交换机列表
exchangeList: [],
// 队列-列表
queueList: [],
// 路由键列表
routingKeyList: [],
},
/**
* umb，搜索参数
... ... @@ -295,16 +396,16 @@
username: '',
// 订阅者名称
subscriber: '',
// 服务器名称
serverName: '',
// 虚拟主机名称
virtualHostName: '',
// 交换机名称
exchangeName: '',
// 队列名称
queueName: '',
// 路由键名称
routingKeyName: '',
// 服务器id
serverId: '',
// 虚拟主机id
virtualHostId: '',
// 交换机id
exchangeId: '',
// 队列id
queueId: '',
// 路由键id
routingKeyId: '',
},
/**
* umb，编辑表单
... ... @@ -346,25 +447,25 @@
subscriber: [
{required: true, message: '请输入订阅者名称', trigger: ['blur', 'change']},
],
// 服务器名称
serverName: [
{required: true, message: '请输入服务器名称', trigger: ['blur', 'change']},
// 服务器ID
serverId: [
{required: true, message: '请选择服务器名称', trigger: ['blur', 'change']},
],
// 虚拟主机名称
virtualHostName: [
{required: true, message: '请输入虚拟主机名称', trigger: ['blur', 'change']},
// 虚拟主机ID
virtualHostId: [
{required: true, message: '请选择虚拟主机名称', trigger: ['blur', 'change']},
],
// 队列名称
queueName: [
{required: true, message: '请输入队列名称', trigger: ['blur', 'change']},
// 交换机ID
exchangeId: [
{required: true, message: '请选择交换机名称', trigger: ['blur', 'change']},
],
// 交换机名称
exchangeName: [
{required: true, message: '请输入交换机名称', trigger: ['blur', 'change']},
// 队列ID
queueId: [
{required: true, message: '请选择队列名称', trigger: ['blur', 'change']},
],
// 路由键名称
routingKeyName: [
{required: true, message: '请输入路由键名称', trigger: ['blur', 'change']},
// 路由键ID
routingKeyId: [
{required: true, message: '请选择路由键名称', trigger: ['blur', 'change']},
],
},
/**
... ... @@ -379,25 +480,25 @@
subscriber: [
{required: true, message: '请输入订阅者名称', trigger: ['blur', 'change']},
],
// 服务器名称
serverName: [
{required: true, message: '请输入服务器名称', trigger: ['blur', 'change']},
// 服务器ID
serverId: [
{required: true, message: '请选择服务器名称', trigger: ['blur', 'change']},
],
// 虚拟主机名称
virtualHostName: [
{required: true, message: '请输入虚拟主机名称', trigger: ['blur', 'change']},
// 虚拟主机ID
virtualHostId: [
{required: true, message: '请选择虚拟主机名称', trigger: ['blur', 'change']},
],
// 队列名称
queueName: [
{required: true, message: '请输入队列名称', trigger: ['blur', 'change']},
// 交换机ID
exchangeId: [
{required: true, message: '请选择交换机名称', trigger: ['blur', 'change']},
],
// 交换机名称
exchangeName: [
{required: true, message: '请输入交换机名称', trigger: ['blur', 'change']},
// 队列ID
queueId: [
{required: true, message: '请选择队列名称', trigger: ['blur', 'change']},
],
// 路由键名称
routingKeyName: [
{required: true, message: '请输入路由键名称', trigger: ['blur', 'change']},
// 路由键ID
routingKeyId: [
{required: true, message: '请选择路由键名称', trigger: ['blur', 'change']},
],
},
/**
... ... @@ -514,6 +615,11 @@
* umb，编辑对话框，打开事件
*/
umb_toEditDialog(index, row) {
this.selectServerList()
this.selectHostList(row.serverId)
this.selectQueueList(row.virtualHostId)
this.selectExchangeList(row.virtualHostId)
this.selectRoutingKeyList(row.exchangeId)
this.umb_editForm = Object.assign({}, row);
this.umb_dialog.editDialog = true;
},
... ... @@ -635,13 +741,162 @@
});
},
/**
* 获取服务器列表
*/
selectServerList() {
getServerList().then((response) => {
let res = response.data;
if (res.code !== '200') {
return this.$message.error('获取服务器列表，失败！');
}
// 获取服务器列表数据
this.umb_config.serverList = res.data;
}).catch(error => {
this.$message.error(error.toString());
});
},
/**
* 获取虚拟主机列表
*/
selectHostList(id) {
let params = {serverId: id};
getHostList(params).then((response) => {
let res = response.data;
if (res.code !== '200') {
return this.$message.error('获取虚拟主机列表，失败！');
}
// 获取虚拟主机列表数据
this.umb_config.virtualHostList = res.data;
}).catch(error => {
this.$message.error(error.toString());
});
},
/**
* 获取交换机列表
*/
selectExchangeList(id) {
let params = {virtualHostId: id};
getExchangeList(params).then((response) => {
let res = response.data;
if (res.code !== '200') {
return this.$message.error('获取交换机列表，失败！');
}
// 获取交换机列表数据
this.umb_config.exchangeList = res.data;
}).catch(error => {
this.$message.error(error.toString());
});
},
/**
* 获取队列-列表
*/
selectQueueList(id) {
let params = {virtualHostId: id};
getQueueList(params).then((response) => {
let res = response.data;
if (res.code !== '200') {
return this.$message.error('获取队列-列表，失败！');
}
// 获取队列-列表数据
this.umb_config.queueList = res.data;
}).catch(error => {
this.$message.error(error.toString());
});
},
/**
* 获取路由键-列表
*/
selectRoutingKeyList(id) {
let params = {exchangeId: id};
getRoutingKeyList(params).then((response) => {
let res = response.data;
if (res.code !== '200') {
return this.$message.error('获取路由键列表，失败！');
}
// 获取路由键列表数据
this.umb_config.routingKeyList = res.data;
}).catch(error => {
this.$message.error(error.toString());
});
},
/**
* 添加方法，服务器ID值，改变
*/
umb_server_addChange(value) {
console.log("服务器ID值:" + value);
// 现将对应的虚拟主机的ID清空
this.umb_addForm.virtualHostId = undefined;
// 根据服务器ID，获取出对应的虚拟主机的列表
this.selectHostList(value);
},
/**
* 添加方法，虚拟主机ID值，改变
*/
umb_virtualHost_addChange(value) {
console.log("虚拟主机ID值:" + value);
// 先将对应的交换机和队列的ID清空
this.umb_addForm.exchangeId = undefined;
this.umb_addForm.queueId = undefined;
// 根据虚拟主机ID，获取出对应的交换机和队列的列表
this.selectExchangeList(value);
this.selectQueueList(value);
},
/**
* 添加方法，交换机ID值，改变
*/
umb_exchange_addChange(value) {
console.log("交换机ID值:" + value);
// 先将对应的路由键的ID清空
this.umb_addForm.routingKeyId = undefined;
// 根据交换机ID，获取出对应的路由键的列表
this.selectRoutingKeyList(value);
},
/**
* 编辑方法，服务器ID值，改变
*/
umb_server_editChange(value) {
console.log("服务器ID值:" + value);
// 现将对应的虚拟主机的ID清空
this.umb_editForm.virtualHostId = undefined;
// 根据服务器ID，获取出对应的虚拟主机的列表
this.selectHostList(value);
},
/**
* 编辑方法，虚拟主机ID值，改变
*/
umb_virtualHost_editChange(value) {
console.log("虚拟主机ID值:" + value);
// 先将对应的交换机和队列的ID清空
this.umb_editForm.exchangeId = undefined;
this.umb_editForm.queueId = undefined;
// 根据虚拟主机ID，获取出对应的交换机和队列的列表
this.selectExchangeList(value);
this.selectQueueList(value);
},
/**
* 编辑方法，交换机ID值，改变
*/
umb_exchange_editChange(value) {
console.log("交换机ID值:" + value);
// 先将对应的路由键的ID清空
this.umb_editForm.routingKeyId = undefined;
// 根据交换机ID，获取出对应的路由键的列表
this.selectRoutingKeyList(value);
},
},
created() {
// 刷新列表
this.umb_getList();
},
mounted() {
// 获取服务器列表
this.selectServerList();
},
computed: {},
}
... ...