朱兆平 / vue_cli · 提交

转到一个项目

作者 王勇
提交 b7a347f36af6e2b478dde0849ceb5733360722fe 1 个父辈 d560c83e

新添加ES信息界面

内嵌 并排对比
正在显示 3 个修改的文件 包含 618 行增加 和 1 行删除
... ... @@ -114,3 +114,9 @@ export const batchDeleteUserRelation = params =>{return http.del(`${baseUrl}/use
// 监控队列
export const selectQueueViewList = params =>{return http.get(`${baseUrl}/view/queue/list`, params);};
export const selectExchangeViewList = params =>{return http.get(`${baseUrl}/view/exchange/list`, params);};
export const selectElasticSearchList = params =>{return http.get(`${baseUrl}/es/page`, params);};
export const insertElasticSearchInfo = params =>{return http.post(`${baseUrl}/es/insert`, params);};
export const updateElasticSearchInfo = params =>{return http.put(`${baseUrl}/es/update`, params);};
export const deleteElasticSearchInfo = params =>{return http.del(`${baseUrl}/es/delete`, params);};
export const batchRemoveElasticSearchInfo = params =>{return http.del(`${baseUrl}/es/batchRemove`, params);};
\ No newline at end of file
... ...
... ... @@ -86,7 +86,7 @@ import UserMessageBinding from './views/bus/UserMessageBinding.vue'
import UserInfo from "./views/bus/UserInfo.vue"
import QueueView from "./views/bus/view/QueueView.vue"
import ExchangeView from "./views/bus/view/ExchangeView.vue"
import ElasticSearchInfo from "./views/bus/ElasticSearchInfo.vue"
let routes = [
{
... ... @@ -142,6 +142,7 @@ let routes = [
{path: '/routing', component: RoutingKey, name: '路由键管理'},
{path: '/umb', component: UserMessageBinding, name: '配置管理'},
{path: '/note', component: MessageNote, name: '消息记录管理'},
{path: '/es', component: ElasticSearchInfo, name: 'ES信息管理'},
]
},
... ...
<template>
<el-container>
<el-main>
<el-card style="background-color: #F5F7FA">
<!-- 搜素区域 -->
<div>
<el-row>
<el-col :span="4">
<el-input v-model="es_queryInfo.clusterName" prefix-icon="el-icon-search" size="small"
placeholder="集群名称" clearable></el-input>
</el-col>
<el-col :span="4">
<el-input v-model="es_queryInfo.elasticsearchName" prefix-icon="el-icon-search" size="small"
placeholder="节点（ES）名称" clearable></el-input>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-button type="success" style="width:150px" size="medium" @click="es_getList">
查询ES信息
</el-button>
<el-button type="primary" style="width:150px" size="medium" @click="es_toAddDialog">
添加ES信息
</el-button>
</el-col>
</el-row>
</div>
<!-- 列表区域 -->
<div style="margin-top: 20px;">
<el-table :data="es_page.esList" border v-loading="es_loading.listLoading"
@selection-change="es_selectChange" size="small"
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="clusterName" align="center" width="200"></el-table-column>
<el-table-column label="节点名称" prop="elasticsearchName" align="center" width="150"></el-table-column>
<el-table-column label="协议" prop="scheme" align="center" width="100"></el-table-column>
<el-table-column label="IP地址" prop="hostname" align="center" width="140"></el-table-column>
<el-table-column label="端口号" prop="port" align="center" width="100"></el-table-column>
<el-table-column label="状态" prop="elasticsearchState" align="center" width="100">
<template slot-scope="scope">
<span v-if="scope.row.elasticsearchState ===true" style="color: #32ff7e">
运行状态
</span>
<span v-if="scope.row.elasticsearchState ===false" style="color: #eb2f06">
宕机状态
</span>
</template>
</el-table-column>
<el-table-column label="描述" prop="description" align="center" width="100"></el-table-column>
<el-table-column label="操作" width="225px" align="center" fixed="right">
<template slot-scope="scope">
<!-- 编辑按钮-->
<el-tooltip effect="dark" content="编辑" placement="top-start" :enterable="false">
<el-button type="primary" icon="el-icon-edit" size="mini"
@click="es_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-delete" size="mini"
:loading="es_loading.delLoading"
@click="es_remove(scope.$index,scope.row)">删除
</el-button>
</el-tooltip>
</template>
</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="es_loading.listLoading"
:disabled="this.es_page.selectList.length===0"
@click="es_batchRemove">批量删除
</el-button>
</el-col>
<el-col :span="10" style="margin-top: 5px">
<el-pagination
@size-change="es_handleSizeChange"
@current-change="es_handleCurrentChange"
:current-page="es_queryInfo.pageNum"
:page-size="es_queryInfo.pageSize"
:page-sizes="[10,20,30,50]"
layout="total, sizes, prev, pager, next, jumper"
:total="es_page.total">
</el-pagination>
</el-col>
</el-row>
</div>
</el-card>
</el-main>
<!-- 添加，对话框 -->
<div>
<el-dialog title="添加ES节点"
:visible.sync="es_dialog.addDialog" element-loading-text="拼命添加配置中"
style="margin-top: -50px" text-align="center" width="50%"
@close="es_addDialogClosed">
<el-form :inline="true" label-width="130px" status-icon style="margin-top: -10px" align="center"
:model="es_addForm" :rules="es_addFormRules" ref="es_addFormRef">
<el-form-item label="集群名称：" prop="clusterName">
<el-input v-model="es_addForm.clusterName" style="width:280px" size="small" clearable
placeholder="请输入集群名称">
</el-input>
</el-form-item>
<el-form-item label="节点名称：" prop="elasticsearchName">
<el-input v-model="es_addForm.elasticsearchName" style="width:280px" size="small" clearable
placeholder="请输入ES（节点）名称">
</el-input>
</el-form-item>
<el-form-item label="协议：" prop="scheme">
<el-input v-model="es_addForm.scheme" style="width:280px" size="small" clearable readonly
placeholder="请输入协议名称：http">
</el-input>
</el-form-item>
<el-form-item label="IP地址：" prop="hostname">
<el-input v-model="es_addForm.hostname" style="width:280px" size="small" clearable
placeholder="请输入IP地址">
</el-input>
</el-form-item>
<el-form-item label="端口号：" prop="port">
<el-input v-model="es_addForm.port" style="width:280px" size="small" clearable
placeholder="请输入端口号">
</el-input>
</el-form-item>
<el-form-item label="默认节点类型：" prop="isMaster">
<el-select v-model="es_addForm.isMaster" style="width: 280px" clearable
size="small" placeholder="请选择默认节点类型？">
<el-option
v-for="item in isMasterList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="相关描述：" prop="description">
<el-input v-model="es_addForm.description" style="width:280px" size="small" clearable
placeholder="请输入相关描述">
</el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer" style="text-align: center;margin-top: -20px">
<el-button type="info" @click="es_dialog.addDialog = false" size="medium" style="width: 100px">
取消
</el-button>
<el-button type="success" @click="es_add_test" size="medium" style="width: 100px">
测试连接
</el-button>
<el-button type="primary" @click="es_add" :loading="es_loading.addLoading" size="medium" style="width: 100px">
添加
</el-button>
</div>
</el-dialog>
</div>
<!-- 编辑，对话框 -->
<div>
<el-dialog title="编辑ES信息"
:visible.sync="es_dialog.editDialog" element-loading-text="拼命添加配置中"
style="margin-top: -50px" text-align="center" width="50%"
@close="es_editDialogClosed">
<el-form :inline="true" label-width="130px" status-icon style="margin-top: -10px" align="center"
:model="es_editForm" :rules="es_editFormRules" ref="es_editFormRef">
<el-form-item label="集群名称：" prop="clusterName">
<el-input v-model="es_editForm.clusterName" style="width:280px" size="small" clearable
placeholder="请输入集群名称">
</el-input>
</el-form-item>
<el-form-item label="节点名称：" prop="elasticsearchName">
<el-input v-model="es_editForm.elasticsearchName" style="width:280px" size="small" clearable
placeholder="请输入ES（节点）名称">
</el-input>
</el-form-item>
<el-form-item label="协议：" prop="scheme">
<el-input v-model="es_editForm.scheme" style="width:280px" size="small" clearable readonly
placeholder="请输入协议名称：http">
</el-input>
</el-form-item>
<el-form-item label="IP地址：" prop="hostname">
<el-input v-model="es_editForm.hostname" style="width:280px" size="small" clearable
placeholder="请输入IP地址">
</el-input>
</el-form-item>
<el-form-item label="端口号：" prop="port">
<el-input v-model="es_editForm.port" style="width:280px" size="small" clearable
placeholder="请输入端口号">
</el-input>
</el-form-item>
<el-form-item label="默认节点类型：" prop="isMaster">
<el-select v-model="es_editForm.isMaster" style="width: 280px" clearable
size="small" placeholder="请选择默认节点类型？">
<el-option
v-for="item in isMasterList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="相关描述：" prop="description">
<el-input v-model="es_editForm.description" style="width:280px" size="small" clearable
placeholder="请输入相关描述">
</el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer" style="text-align: center;margin-top: -20px">
<el-button type="info" @click="es_dialog.editDialog = false" size="medium" style="width: 100px">
取消
</el-button>
<el-button type="primary" @click="es_edit" :loading="es_loading.editLoading" size="medium" style="width: 100px">
编辑
</el-button>
</div>
</el-dialog>
</div>
</el-container>
</template>
<script>
import {
selectElasticSearchList,
insertElasticSearchInfo,
deleteElasticSearchInfo,
batchRemoveElasticSearchInfo,
updateElasticSearchInfo,
} from
"../../api/message_bus";
import http from '../../api/http.js';
import axios from "axios";
export default {
name: "ElasticSearchInfo",
data() {
return {
status: undefined,
/**
* 搜索参数
*/
es_queryInfo: {
clusterName: '',
elasticsearchName: '',
elasticsearchState: undefined,
pageNum: 1,
pageSize: 10
},
/**
* queue，分页
*/
es_page: {
esList: [],
total: 0,
selectList: [],
},
/**
* 添加表单
*/
es_addForm: {
clusterName: '',
elasticsearchName: '',
scheme: 'http',
hostname: '',
port: 9200,
// elasticsearchState: true,
isMaster: false,
description: '',
},
/**
* 编辑表单
*/
es_editForm: {},
/**
* Boolean属性，选择列表
*/
booleanList: [
{
value: true,
label: '运行'
},
{
value: false,
label: '宕机'
},
],
isMasterList: [
{
value: true,
label: '主节点'
},
{
value: false,
label: '子节点'
},
],
/**
* 对话框
*/
es_dialog: {
addDialog: false,
editDialog: false,
},
/**
* 加载
*/
es_loading: {
listLoading: false,
addLoading: false,
editLoading: false,
delLoading: false,
batchDelLoading: false,
},
/**
* 新增表单规则
*/
es_addFormRules: {
// clusterName: [
// {required: true, message: '请输入集群名称', trigger: ['blur', 'change']},
// ],
// elasticsearchName: [
// {required: true, message: '请输入节点名称', trigger: ['blur', 'change']},
// ],
scheme: [
{required: true, message: '请输入协议名称', trigger: ['blur', 'change']},
],
hostname: [
{required: true, message: '请输入IP地址', trigger: ['blur', 'change']},
],
port: [
{required: true, message: '请输入端口号', trigger: ['blur', 'change']},
],
elasticsearchState: [
{required: true, message: '请选择节点状态', trigger: ['blur', 'change']},
],
isMaster: [
{required: true, message: '请选择节点类型', trigger: ['blur', 'change']},
],
},
es_editFormRules: {
clusterName: [
{required: true, message: '请输入集群名称', trigger: ['blur', 'change']},
],
elasticsearchName: [
{required: true, message: '请输入节点名称', trigger: ['blur', 'change']},
],
scheme: [
{required: true, message: '请输入协议名称', trigger: ['blur', 'change']},
],
hostname: [
{required: true, message: '请输入IP地址', trigger: ['blur', 'change']},
],
port: [
{required: true, message: '请输入端口号', trigger: ['blur', 'change']},
],
elasticsearchState: [
{required: true, message: '请选择节点状态', trigger: ['blur', 'change']},
],
isMaster: [
{required: true, message: '请选择节点类型', trigger: ['blur', 'change']},
],
},
}
},
methods: {
/**
* 分页查询，监听 pageSize 改变的事件
*/
es_handleSizeChange(newSize) {
this.es_queryInfo.pageSize = newSize;
this.es_getList();
},
/**
* 分页查询，监听 pageNum 改变的事件
*/
es_handleCurrentChange(newPage) {
this.es_queryInfo.pageNum = newPage;
this.es_getList();
},
/**
* 分页查询
*/
es_getList() {
this.es_loading.listLoading = true;
selectElasticSearchList(this.es_queryInfo).then((response) => {
let res = response.data;
if (res.code !== '200') {
this.es_loading.listLoading = false;
return this.$message.error(res.msg);
}
this.es_page.esList = res.data.list;
this.es_page.total = res.data.total;
this.es_loading.listLoading = false;
}).catch(error => {
this.es_loading.listLoading = false;
this.$message.error(error.toString());
});
},
/**
* 批量删除，选中
*/
es_selectChange: function (selectList) {
this.es_page.selectList = selectList;
},
/**
* 批量删除方法
*/
es_batchRemove() {
const ids = this.es_page.selectList.map(item => item.id).toString();
this.$confirm('此操作将永久删除选中的ES信息, 是否继续?', '警告', {
confirmButtonText: '确定删除',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
// 开启加载
this.es_loading.editLoading = true;
let params = {id: ids};
batchRemoveElasticSearchInfo(params).then(response => {
let res = response.data;
if (res.code !== '200') {
this.es_loading.editLoading = false;
return this.$message.error(res.msg);
}
this.$message.success(res.msg);
this.es_loading.editLoading = false;
// 刷新列表
this.es_getList();
}).catch(error => {
// 关闭加载
this.es_loading.editLoading = false;
this.$message.error(error.toString());
});
}).catch(() => {
});
},
/**
* es，添加对话框，打开事件
*/
es_toAddDialog() {
this.es_dialog.addDialog = true;
},
/**
* es，添加对话框，关闭事件
*/
es_addDialogClosed() {
this.$refs.es_addFormRef.resetFields();
},
/**
* 添加事件之测试连接
*/
es_add_test() {
this.$refs.es_addFormRef.validate(valid => {
if (!valid) return;
let scheme = this.es_addForm.scheme;
let hostname = this.es_addForm.hostname;
let port = this.es_addForm.port;
let url = scheme + "://" + hostname + ":" + port;
this.$confirm('测试ES信息，是否可用?', '警告', {
confirmButtonText: '继续',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
window.open(url, '_blank')
});
});
},
/**
* 添加事件
*/
es_add() {
this.$refs.es_addFormRef.validate(valid => {
if (!valid) return;
this.es_loading.addLoading = true;
let scheme = this.es_addForm.scheme;
let hostname = this.es_addForm.hostname;
let port = this.es_addForm.port;
let url = scheme + "://" + hostname + ":" + port;
// 'Access-Control-Allow-Headers': 'content-type,token,id',
// 'Access-Control-Request-Headers': 'Origin, X-Requested-With, content-Type, Accept, Authorization',
// 'Content-type': 'application/json;charset=UTF-8',
// this.$axios.get(url, {
// headers: {
// 'Access-Control-Allow-Origin': '*'
// }
// }).then(
// (response) => {
// console.log(response);
// }
// ).catch(error => {
// this.$message.error(error.toString());
// this.es_loading.addLoading = false;
// }
// );
http.get(url).then((response) => {
console.log(response);
}).catch(error => {
this.$message.error(error.toString());
this.es_loading.addLoading = false;
});
// insertElasticSearchInfo(this.es_addForm).then((response) => {
// let res = response.data;
// if (res.code !== '200') {
// this.es_loading.addLoading = false;
// return this.$message.error(res.msg);
// }
// this.es_loading.addLoading = false;
// this.es_dialog.addDialog = false;
// this.es_getList();
// }).catch(error => {
// this.es_loading.addLoading = false;
// this.$message.error(error.toString());
// });
}
)
},
/**
* 删除
* @param index
* @param row
*/
es_remove(index, row) {
this.$confirm('此操作永久删除该ES节点信息, 是否继续?', '警告', {
confirmButtonText: '确定删除',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
// 开启加载
this.es_loading.delLoading = true;
deleteElasticSearchInfo(row).then((response) => {
let res = response.data;
if (res.code !== '200') {
this.es_loading.delLoading = false;
return this.$message.error(res.msg);
}
this.es_loading.delLoading = false;
this.$message.success(res.msg);
this.es_getList();
}).catch(error => {
// 关闭加载
this.es_loading.delLoading = false;
this.$message.error(error.toString());
});
}).catch(() => {
});
},
/**
* queue，编辑对话框，打开事件
*/
es_toEditDialog(index, row) {
this.es_editForm = Object.assign({}, row);
this.es_dialog.editDialog = true;
},
/**
* queue，编辑对话框，关闭事件
*/
es_editDialogClosed() {
//重置对话框
this.$refs.es_editFormRef.resetFields();
},
es_edit() {
this.$refs.es_editFormRef.validate(valid => {
if (!valid) return;
this.es_loading.editLoading = true;
updateElasticSearchInfo(this.es_editForm).then((response) => {
let res = response.data;
if (res.code !== '200') {
this.es_loading.editLoading = false;
return this.$message.error(res.msg);
}
this.es_loading.editLoading = false;
this.$message.success(res.msg);
this.es_dialog.editDialog = false;
this.es_getList();
}).catch(error => {
this.es_loading.editLoading = false;
this.$message.error(error.toString());
});
})
}
},
created() {
},
mounted() {
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
... ...