作者 朱兆平

批量新增路由与加载已配置路由适配

... ... @@ -130,3 +130,8 @@ export const getAlltype = params =>{return http.get(`${baseUrl}/message/type/lis
export const getTypesPage = params =>{return http.post(`${baseUrl}/message/type/list`, params);};
export const addType = params =>{return http.post(`${baseUrl}/message/type/add`, params);};
//路由添加
//批量添加路由
export const api_batchAddRouter = params =>{return http.post(`${baseUrl}/router/batchAdd`, params);};
export const loadRouterBySndr = params =>{return http.get(`${baseUrl}/router/searchBysndr`, params);};
... ...
... ... @@ -87,12 +87,9 @@ 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"
import ConfigureS from "./views/bus/Configure.vue"
import RouterBatch from "./views/bus/RouterBatch.vue"
import MessageManagement from "./views/bus/MessageManagement.vue"
//组件练习
import Page7 from "./views/nav3/Page7.vue"
... ... @@ -166,7 +163,7 @@ let routes = [
{path: '/note', component: MessageNote, name: '消息记录管理'},
{path: '/note_search', component: MessageNoteSearch, name: '消息记录搜索'},
{path: '/es', component: ElasticSearchInfo, name: 'ES信息管理'},
{path: '/configures', component: ConfigureS, name: '消息路由批量配置'},
{path: '/configures', component: RouterBatch, name: '消息路由批量配置'},
{path: '/ms', component: MessageManagement, name: '消息分类管理'}
]
... ... @@ -181,15 +178,6 @@ let routes = [
// {path: '/exchangeView', component: ExchangeView, name: '交换机监控'},
]
},
{
path: '/nav3',
component: Home,
name: '组件练习',
iconCls: 'el-icon-view',
children: [
{path: '/page7', component: Page7, name: '组件'},
]
},
// {
... ...
<template>
<el-container>
<el-main>
<div style="border: 6px solid #6F8294;">
<el-row style="margin: -2px">
<el-col :span="6">
<el-row class="bt">
<span>选择消息发送者</span>
</el-row>
<el-row>
<el-tree
:data="sndr"
show-checkbox
node-key="id"
:props="userProps">
</el-tree>
</el-row>
</el-col>
<el-col :span="6" align="center">
<el-row class="bt">
<span>选择要发送的消息</span>
</el-row>
<el-row>
<el-tree
:data="message_type"
show-checkbox
node-key="id"
:props="defaultProps">
</el-tree>
</el-row>
</el-col>
<el-col :span="6">
<el-row class="bt">
<span>选择消息接收者</span>
</el-row>
<el-row>
<el-tree
:data="rcvr"
show-checkbox
node-key="id"
:props="userProps">
</el-tree>
</el-row>
</el-col>
<el-col :span="6">
<el-row class="bt">
<span>消息路由配置其他属性</span>
</el-row>
<el-row>
<el-form :inline="true" :model="formInline" class="demo-form-inline" align="center" style="border:3px solid #6F8294;height: 800px;padding-top: 15px">
<el-form-item label="路由状态:">
<el-select v-model="formInline.state" placeholder="请选择" style="width: 150px" size="mini">
<el-option label="启用" value="01"></el-option>
<el-option label="关闭" value="02"></el-option>
</el-select>
</el-form-item>
<el-form-item label="路由用途:">
<el-select v-model="formInline.purpose" placeholder="请选择" style="width: 150px" size="mini">
<el-option label="生产用" value="03"></el-option>
</el-select>
</el-form-item>
<el-form-item label="路由描述:">
<el-input type="textarea" v-model="formInline.describe" style="width: 150px" size="mini"></el-input>
</el-form-item>
</el-form>
</el-row>
</el-col>
</el-row>
</div>
</el-main>
</el-container>
</template>
<script>
import {getAlltype} from "../../api/message_bus";
export default {
name: "Configure",
data() {
return {
formInline: {
state: '',
purpose: '',
describe: ''
},
sndr: [{
id: 1,
label: '代理人系统接收账号(AGTR)',
}, {
id: 2,
label: '代理人接收中外运预配(AGTZ)',
}, {
id: 3,
label: '【测试】舱单自动化解析系统(AMDB)',
}],
rcvr: [{
id: 1,
label: '代理人系统接收账号(AGTR)',
}, {
id: 2,
label: '代理人接收中外运预配(AGTZ)',
}, {
id: 3,
label: '【测试】舱单自动化解析系统(AMDB)',
}],
queryInfo:{
pageNum:1,
pageSize:10,
name:"",
type:"",
},
message_type: [{
id: 1,
nameAndDes: '航班动态(1)',
children: [{
id: 7,
nameAndDes: '',
children: [{
id: 8,
nameAndDes: ''
}, {
id: 9,
nameAndDes: ''
}]
}]
}, {
id: 2,
nameAndDes: '航班历史(2)',
children: [{
id: 7,
nameAndDes: '',
children: [{
id: 8,
nameAndDes: ''
}, {
id: 9,
nameAndDes: ''
}]
}]
}, {
id: 3,
nameAndDes: '卡口业务交换信息(80)',
children: [{
id: 4,
nameAndDes: '卡口业务数据(KAKO)',
children: [{
id: 5,
nameAndDes: 'ALL'
}, {
id: 6,
nameAndDes: '卡口车单绑定关系数据(CARB)'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'nameAndDes'
},
userProps: {
children: 'children',
label: 'label'
}
}
},
methods: {
onSubmit() {
console.log('submit!');
},
getAllType() {
let _this =this;
getAlltype().then((response) => {
let res = response.data;
if (res.code !== '200') {
return _this.$message.error('获取消息记录,失败!');
}
// 获取列表数据
_this.message_type = res.data;
// 关闭加载
_this.$message.success('获取消息收发记录,成功!');
}).catch(error => {
// 关闭加载
_this.$message.error(error.toString());
});
}
},
mounted() {
this.getAllType();
},
}
</script>
<style>
.bt {
font-weight: bold;
background-color: #6F8294;
color: #ffffff;
text-align: center
}
.el-col {
margin-right: 0px;
}
.el-tree {
padding-top: 15px;
border:3px solid #6F8294;
height: 800px
}
.el-row .el-col .el-row {
margin-top: 0px;
}
</style>
<template>
<el-container>
<el-main>
<el-card style="background-color: #F5F7FA">
<!-- 搜素区域 -->
<el-row>
<el-col :span="24" align="left">
<el-button type="warning" size="medium" icon="el-icon-search" @click="loadRouter" :loading="loadingStatus">
加载已配置消息
</el-button>
<el-button type="primary" size="medium" icon="el-icon-plus" @click="batchAddRouter" :loading="loadingStatus">
生成路由
</el-button>
</el-col>
</el-row>
<el-divider></el-divider>
<el-row>
<div style="border: 6px solid #6F8294;">
<el-row style="margin: -2px">
<el-col :span="6">
<el-row class="bt">
<span>选择消息发送者</span>
</el-row>
<el-row>
<el-tree
:data="sndr"
show-checkbox
node-key="username"
:props="userProps"
ref="sndrTree"
@check-change="treeSndrCheckChange"
>
</el-tree>
</el-row>
</el-col>
<el-col :span="6" align="center">
<el-row class="bt">
<span>选择要发送的消息类型</span>
</el-row>
<el-row>
<el-tree
:data="message_type"
show-checkbox
node-key="name"
default-expand-all
check-strictly
:props="defaultProps"
highlight-current
ref="typeTree"
@check-change="treeTypeCheckChange"
>
</el-tree>
</el-row>
</el-col>
<el-col :span="6">
<el-row class="bt">
<span>选择消息接收者</span>
</el-row>
<el-row>
<el-tree
:data="rcvr"
show-checkbox
node-key="id"
:props="userProps"
ref="rcvrTree"
@check-change="treeRcvrCheckChange"
>
</el-tree>
</el-row>
</el-col>
<el-col :span="6">
<el-row class="bt">
<span>消息路由配置其他属性</span>
</el-row>
<el-row>
<el-form :inline="true" :model="params" class="demo-form-inline" align="center" style="border:3px solid #6F8294;height: 800px;padding-top: 15px">
<el-form-item label="路由状态:">
<el-select v-model="params.status" placeholder="请选择" style="width: 150px" size="mini">
<el-option
v-for="item in status_options"
:key="item.value"
:label="item.label"
:value="item.value">
<span style="float: left">{{ item.label }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="路由用途:">
<el-select v-model="params.usage" placeholder="请选择" style="width: 150px" size="mini">
<el-option
v-for="item in usage_options"
:key="item.value"
:label="item.label"
:value="item.value">
<span style="float: left">{{ item.label }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="路由描述:">
<el-input type="textarea" v-model="params.des" style="width: 150px" size="mini"></el-input>
</el-form-item>
</el-form>
</el-row>
</el-col>
</el-row>
</div>
</el-row>
</el-card>
</el-main>
</el-container>
</template>
<script>
import { getAlltype,api_batchAddRouter,loadRouterBySndr } from "../../api/message_bus";
export default {
name: "Configure",
data() {
return {
loadingStatus: false,
sndr: [],
rcvr: [],
api_back: [],
params:{
sndr: '',
sndrs: [],
types: [],
rcvrs: [],
status: 1,
usage: 2,
des: "",
ver: "1.0"
},
status_options:[
{
label: "启用",
value: 1
},
{
label:"关闭",
value: 0
}
],
usage_options:[
{
label: "生产用",
value: 1
},
{
label:"测试用",
value: 2
}
],
message_type: [{
id: 1,
name: '航班动态(1)',
children: [{
id: 7,
name: '',
children: [{
id: 8,
name: ''
}, {
id: 9,
name: ''
}]
}]
}, {
id: 2,
name: '航班历史(2)',
children: [{
id: 7,
name: '',
children: [{
id: 8,
name: ''
}, {
id: 9,
name: ''
}]
}]
}, {
id: 3,
name: '卡口业务交换信息(80)',
children: [{
id: 4,
name: '卡口业务数据(KAKO)',
children: [{
id: 5,
name: 'ALL'
}, {
id: 6,
name: '卡口车单绑定关系数据(CARB)'
}]
}]
}],
defaultProps: {
children: 'children',
label: function (data,node) {
return '[' + data.name+ ']' + data.des;
},
disabled: 'disabled'
},
userProps: {
children: 'children',
label: function (data, node) {
return '('+data.username + ')' + data.des;
}
}
}
},
methods: {
typeFilterNode(treeList) {
let _this = this;
if (Array.isArray(treeList)){
treeList.forEach(function(item,index){
if (item.type == 1 || item.type==2){
item.disabled = true;
}
if (item.children !== undefined){
_this.typeFilterNode(item.children);
}
})
}
},
getAllType() {
let _this =this;
_this.loadingStatus = true;
getAlltype().then((response) => {
let res = response.data;
if (res.code !== '200') {
_this.loadingStatus = false;
return _this.$message.error('获取消息类型失败!');
}
// 获取列表数据
_this.message_type = res.data;
// _this.typeFilterNode(_this.message_type);
// 关闭加载
_this.$message.success('获取消息类型成功!');
_this.loadingStatus = false;
}).catch(error => {
// 关闭加载
_this.$message.error(error.toString());
_this.loadingStatus = false;
});
},
/**
* 访问用户服务,绑定用户列表,按组搜索
*/
getUserInfo(){
let userResponse = [{
id: 1,
username: "zp260",
des: "测试用户1"
}, {
id: 2,
username: "test04",
des: "测试用户2"
},
{
id: 3,
username: "zp2505",
des: "测试用户3"
}
];
this.sndr = userResponse;
this.rcvr = userResponse;
},
treeSndrCheckChange(data, checked, indeterminate) {
if (checked) {
this.params.sndrs.push(data.username);
} else {
this.params.sndrs.splice(this.params.sndrs.contains(data.username), 1);
}
},
treeRcvrCheckChange(data, checked, indeterminate) {
if (checked) {
this.params.rcvrs.push(data.username);
} else {
this.params.rcvrs.splice(this.params.rcvrs.contains(data.username), 1);
}
},
treeTypeCheckChange(data, checked, indeterminate) {
let mt = {
name:'',
type:0
};
mt.name = data.name;
mt.type = data.type;
if (checked) {
this.params.types.push(mt);
} else {
this.params.types.splice(this.params.types.contains(mt), 1);
}
console.log(this.params.types);
},
loadRouter(){
let _this = this;
this.loadingStatus = true;
if(this.params.sndrs.length !== 1){
this.$confirm('请选择单个发送者', '错误', {
confirmButtonText: '确定',
type: 'error',
center: true
}).then(() => {
_this.loadingStatus = false;
}).catch(() => {
});
}else{
let pam = {
sndr: _this.params.sndrs[0]
};
loadRouterBySndr(pam).then(response => {
let res = response.data;
if (res.code !== '200') {
return _this.$message.error('读取用户路由,失败!');
}
_this.api_back = res.data;
_this.loadRouterHandle();
// 关闭加载
_this.$message.success('读取用户路由,成功!');
_this.loadingStatus = false;
}).catch(
error => {
// 关闭加载
_this.$message.error(error.toString());
_this.loadingStatus = false;
}
)
}
},
loadRouterHandle(){
if (Array.isArray(this.api_back) && this.api_back.length>0){
let typeList = [];
this.api_back.forEach(function(routerItem,index){
typeList.push({name:routerItem.stype});
});
this.typeTreeSet(typeList);
}
},
typeTreeSet(typeList){
this.$refs.typeTree.setCheckedNodes(typeList);
},
batchAddRouter() {
let _this = this;
_this.loadingStatus = true;
api_batchAddRouter(this.params).then(response => {
let res = response.data;
if (res.code !== '200') {
return _this.$message.error('批量添加路由,失败!');
}
// 关闭加载
_this.$message.success('批量添加路由,成功!');
_this.loadingStatus = false;
_this.resetPage();
}).catch(
error => {
// 关闭加载
_this.$message.error(error.toString());
_this.loadingStatus = false;
}
)
},
resetPage() {
this.$refs.sndrTree.setCheckedKeys([]);
this.$refs.typeTree.setCheckedKeys([]);
this.$refs.rcvrTree.setCheckedKeys([]);
}
},
mounted() {
this.getAllType();
this.getUserInfo();
}
}
</script>
<style scoped>
.bt {
font-weight: bold;
background-color: #6F8294;
color: #ffffff;
text-align: center
}
.el-col {
margin-right: 0px;
}
.el-tree {
padding-top: 15px;
border:3px solid #6F8294;
height: 800px
}
.el-row .el-col .el-row {
margin-top: 0px;
}
</style>
... ...