朱兆平 / vue_cli · 提交

转到一个项目

作者 小范
提交 79aa6c18bd4d54d9e11b2cb8c04f18e626ce7e4f 1 个父辈 ba37d152

新增三个配置管理界面

内嵌 并排对比
正在显示 5 个修改的文件 包含 893 行增加 和 0 行删除
import http from './http.js'
let baseUrl = 'dataexchange/manage'
let baseUrl1 = 'dataexchange/task'
//接收
export const listReceConfigs = params =>{return http.get(`${baseUrl}/listReceConfigs`, params);};
export const insertReceConfig = params =>{return http.post(`${baseUrl}/insertReceConfig`, params);};
export const deleteReceConfig = params =>{return http.get(`${baseUrl}/deleteReceConfig`, params);};
export const addrecetask = params =>{return http.delete(`${baseUrl1}/addrecetask`, params);};
export const removereceTask = params =>{return http.post(`${baseUrl1}/removereceTask`, params);};
//发送
export const listSendConfigs = params =>{return http.get(`${baseUrl}/listSendConfigs`, params);};
export const insertSendConfig = params =>{return http.post(`${baseUrl}/insertSendConfig`, params);};
export const deleteSendConfig = params =>{return http.get(`${baseUrl}/deleteSendConfig`, params);};
export const addsendtask = params =>{return http.delete(`${baseUrl1}/addsendtask`, params);};
export const removesendTask = params =>{return http.post(`${baseUrl1}/removesendTask`, params);};
//MQ
export const listRabbitConfigs = params =>{return http.get(`${baseUrl}/listRabbitConfigs`, params);};
export const insertRabbitConfig = params =>{return http.post(`${baseUrl}/insertRabbitConfig`, params);};
export const deleteRabbitConfig = params =>{return http.get(`${baseUrl}/deleteRabbitConfig`, params);};
... ...
... ... @@ -123,6 +123,12 @@ import goods from './views/charging/goods.vue'
import check from './views/charging/check.vue'
import sort from './views/charging/sort.vue'
import work from './views/charging/work.vue'
//配置管理
import receive from './views/configuration/receive.vue'
import sending from './views/configuration/sending.vue'
import mq from './views/configuration/mq.vue'
//大数据管理
import management from './views/managements/management.vue'
import departure from './views/airtransport/departure.vue'
import declare from './views/airtransport/declare.vue'
... ... @@ -557,6 +563,23 @@ let routes = [
]
},
{
path: '/',
component: HomeNew,
name: '配置管理',
iconCls: 'el-icon-delete-location',
children: [
{path:'/receive',component:receive,name:'接收配置管理'},
{path:'/sending',component:sending,name:'发送配置管理'},
{path:'/mq',component:mq,name:'MQ配置管理'},
]
},
{
path: '/management',
component: management,
name: '大数据管理',
iconCls: 'el-icon-delete-location'
},
{
path: '/at',
component: HomeNew,
name: '在港动态',
... ...
<template>
<section>
<!--工具条-->
<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
<el-form :inline="true" :model="filters">
<el-form-item>
<el-button type="success" @click="applyAdd()">新 增</el-button>
</el-form-item>
</el-form>
</el-col>
<!--列表-->
<el-table :data="tableData" highlight-current-row style="width: 100%;"
row-key="ruleId">
<el-table-column width="120" prop="hostid" label="服务器IP" >
</el-table-column>
<el-table-column width="120" prop="port" label="端口" >
</el-table-column>
<el-table-column width="120" prop="user" label="账号" >
</el-table-column>
<el-table-column width="120" prop="pass" label="密码" >
</el-table-column>
<el-table-column width="240" label="操作" fixed="right">
<template slot-scope="scope">
<el-button type="danger" @click="batchRemove(scope.$index,scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页-->
<div class="block">
<el-pagination
:current-page="filters.pageNum"
:page-sizes="[10, 50, 100, 500]"
:page-size="filters.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
<el-row>
<el-dialog :title="dialogMap[dialogApply]" :visible.sync="apply_dialog" width="50%">
<el-form :model="addForm" :rules="rules" ref="addForm" style="margin-top: 20px">
<el-row>
<el-col :span="11">
<el-form-item label="服务器IP" :label-width="formLabelWidth" prop="hostid">
<el-input v-model="addForm.hostid" autocomplete="off" size="small" style="width: 260px">
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="端口" :label-width="formLabelWidth" prop="port">
<el-input v-model="addForm.port" autocomplete="off" size="small" style="width: 260px">
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="11">
<el-form-item label="账号" :label-width="formLabelWidth" prop="user">
<el-input v-model="addForm.user" autocomplete="off" size="small" style="width: 260px">
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="密码" :label-width="formLabelWidth" prop="pass">
<el-input v-model="addForm.pass" autocomplete="off" size="small" style="width: 260px">
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="apply_dialog = false" size="small">取 消</el-button>
<el-button type="primary" @click="dialogApply==='create'?add():edit()" size="small">提 交</el-button>
</div>
</el-dialog>
</el-row>
</section>
</template>
<script>
import {listRabbitConfigs,insertRabbitConfig,deleteRabbitConfig} from '../../api/configuration';
export default {
data() {
return {
filters: {
pageNum: 1,
pageSize: 10
},
total: 0,
tableData: [],
dialogMap: {
update: '编辑',
create: '新增'
},
dis: undefined,
dialogApply: 'create',
apply_dialog: false,
addForm: {
hostid:'',
port: '',
user: '',
pass: '',
id:''
},
formLabelWidth: '200px',
rules: {
},
}
},
mounted() {
this.getList();
},
methods: {
//分页
handleSizeChange(val) {
this.filters.pageSize = val
this.getList()
},
handleCurrentChange(val) {
this.filters.pageNum = val
this.getList()
},
//获取列表
getList() {
const _this = this
listRabbitConfigs().then((response) => {
const res = response.data
if (res.code !== '200') {
return _this.$message.error('获取消息收发记录，失败！')
}
// 获取列表数据
_this.tableData = res.data
// 获取列表的总记录数
_this.total = res.data.total
_this.$message.success('获取消息收发记录，成功！')
}).catch(error => {
// 关闭加载
_this.$message.error(error.toString())
})
},
// 添加对话框，打开事件
applyAdd() {
this.addForm = {
hostid:'',
port: '',
user: '',
pass: '',
id:''
};
this.dialogApply= 'create';
this.dis= 'create';
this.apply_dialog = true;
},
// 添加功能
add() {
this.$refs.addForm.validate(valid => {
// 未通过，表单预校验
if (!valid) return;
insertRabbitConfig(this.addForm).then((response) => {
let res = response.data;
// 添加失败
if (res.code !== '200') {
return this.$message.error(res.msg);
}
// 添加，成功
this.$message.success(res.msg);
// 隐藏对话框
this.apply_dialog = false;
// 刷新列表
this.getList();
}).catch(error => {
this.$message.error(error.toString());
});
})
},
//删除
batchRemove(index,row) {
// 弹框询问是否删除？
this.$confirm('此操作永久删除该消息, 是否继续?', '警告', {
confirmButtonText: '确定删除',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
deleteRabbitConfig({id:row.id}).then((response) => {
const res = response.data
this.$message.success(res.msg)
this.getList()
}).catch(error => {
this.$message.error(error)
})
}).catch(() => {
})
},
},
}
</script>
... ...
<template>
<section>
<!--工具条-->
<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
<el-form :inline="true" :model="filters">
<el-form-item>
<el-button type="success" @click="applyAdd()">新 增</el-button>
</el-form-item>
</el-form>
</el-col>
<!--列表-->
<el-table :data="tableData" highlight-current-row style="width: 100%;"
row-key="ruleId">
<el-table-column width="80" prop="hostid" label="服务器ID" >
</el-table-column>
<el-table-column width="120" prop="loaddir" label="报文落地目录" >
</el-table-column>
<el-table-column width="120" prop="readqueue" label="报文读取队列" >
</el-table-column>
<el-table-column width="80" prop="status" label="状态" >
</el-table-column>
<el-table-column width="80" prop="vr" label="虚拟机" >
</el-table-column>
<el-table-column width="240" label="操作" fixed="right">
<template slot-scope="scope">
<el-button type="success" @click="firing(scope.row)">启动</el-button>
<el-button type="warning" @click="suspend(scope.$index,scope.row)">暂停</el-button>
<el-button type="danger" @click="batchRemove(scope.$index,scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页-->
<div class="block">
<el-pagination
:current-page="filters.pageNum"
:page-sizes="[10, 50, 100, 500]"
:page-size="filters.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
<el-row>
<el-dialog :title="dialogMap[dialogApply]" :visible.sync="apply_dialog" width="50%">
<el-form :model="addForm" :rules="rules" ref="addForm" style="margin-top: 20px">
<el-row>
<el-col :span="11">
<el-form-item label="服务器ID" :label-width="formLabelWidth" prop="hostid">
<!-- <el-input v-model="addForm.hostid" autocomplete="off" size="small" style="width: 260px">-->
<!-- </el-input>-->
<el-select v-model="addForm.hostid" clearable placeholder="请选择"
style="width: 260px">
<el-option
v-for="item in hostid"
:key="item.id"
:label="item.hostid"
:value="item.hostid">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="虚拟机" :label-width="formLabelWidth" prop="vr">
<el-input v-model="addForm.vr" autocomplete="off" size="small" style="width: 260px">
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="11">
<el-form-item label="报文落地目录" :label-width="formLabelWidth" prop="loaddir">
<el-input v-model="addForm.loaddir" autocomplete="off" size="small" style="width: 260px">
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="报文读取队列" :label-width="formLabelWidth" prop="readqueue">
<el-input v-model="addForm.readqueue" autocomplete="off" size="small" style="width: 260px">
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="11">
<el-form-item label="状态" :label-width="formLabelWidth" prop="status">
<el-input v-model="addForm.status" autocomplete="off" size="small" style="width: 260px">
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="apply_dialog = false" size="small">取 消</el-button>
<el-button type="primary" @click="dialogApply==='create'?add():edit()" size="small">提 交</el-button>
</div>
</el-dialog>
</el-row>
<el-dialog :visible.sync="tableData1_dialog" >
<!--列表-->
<el-table disabled :data="tableData1" highlight-current-row style="width: 100%;"
row-key="ruleId">
<el-table-column width="120" prop="hostid" label="服务器IP" >
</el-table-column>
<el-table-column width="120" prop="port" label="端口" >
</el-table-column>
<el-table-column width="120" prop="user" label="账号" >
</el-table-column>
<el-table-column width="120" prop="pass" label="密码" >
</el-table-column>
</el-table>
</el-dialog>
</section>
</template>
<script>
import {
listReceConfigs,
insertReceConfig,
deleteReceConfig,
addrecetask,
removereceTask,
listRabbitConfigs
} from '../../api/configuration';
export default {
data() {
return {
filters: {
pageNum: 1,
pageSize: 10
},
total: 0,
tableData: [],
tableData1: [],
tableData1_dialog:false,
dialogMap: {
update: '编辑',
create: '新增'
},
dis: undefined,
dialogApply: 'create',
apply_dialog: false,
hostid:[],
addForm: {
hostid:'',
loaddir: '',
readqueue: '',
vr: '',
status: '',
id:''
},
formLabelWidth: '200px',
rules: {
},
}
},
mounted() {
this.getList();
},
methods: {
//分页
handleSizeChange(val) {
this.filters.pageSize = val
this.getList()
},
handleCurrentChange(val) {
this.filters.pageNum = val
this.getList()
},
//获取列表
getList() {
const _this = this
listReceConfigs().then((response) => {
const res = response.data
if (res.code !== '200') {
return _this.$message.error('获取消息收发记录，失败！')
}
// 获取列表数据
_this.tableData = res.data
// 获取列表的总记录数
_this.total = res.data.total
_this.$message.success('获取消息收发记录，成功！')
}).catch(error => {
// 关闭加载
_this.$message.error(error.toString())
})
},
// 添加对话框，打开事件
applyAdd() {
this.hostid=[];
const _this = this
listRabbitConfigs().then((response) => {
const res = response.data
if (res.code !== '200') {
return _this.$message.error('获取消息收发记录，失败！')
}
// 获取列表数据
_this.tableData1 = res.data
_this.hostid=_this.tableData1;
_this.$message.success('获取消息收发记录，成功！')
}).catch(error => {
// 关闭加载
_this.$message.error(error.toString())
})
this.addForm = {
hostid:'',
loaddir: '',
readqueue: '',
vr: '',
status: '',
id:''
};
this.dialogApply= 'create';
this.dis= 'create';
this.apply_dialog = true;
},
// 添加功能
add() {
this.$refs.addForm.validate(valid => {
// 未通过，表单预校验
if (!valid) return;
insertReceConfig(this.addForm).then((response) => {
let res = response.data;
// 添加失败
if (res.code !== '200') {
return this.$message.error(res.msg);
}
// 添加，成功
this.$message.success(res.msg);
// 隐藏对话框
this.apply_dialog = false;
// 刷新列表
this.getList();
}).catch(error => {
this.$message.error(error.toString());
});
})
},
// 启动功能
firing() {
// 弹框询问是否删除？
this.$confirm(' 是否继续?', '警告', {
confirmButtonText: '确定启动',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
addrecetask({row:this.row}).then((response) => {
const res = response.data
this.$message.success(res.msg)
this.getList()
}).catch(error => {
this.$message.error(error)
})
}).catch(() => {
})
},
//暂停
suspend(index,row) {
// 弹框询问是否删除？
this.$confirm(' 是否继续?', '警告', {
confirmButtonText: '确定暂停',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
removereceTask({id:row.id}).then((response) => {
const res = response.data
this.$message.success(res.msg)
this.getList()
}).catch(error => {
this.$message.error(error)
})
}).catch(() => {
})
},
//删除
batchRemove(index,row) {
// 弹框询问是否删除？
this.$confirm('此操作永久删除该消息, 是否继续?', '警告', {
confirmButtonText: '确定删除',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
deleteReceConfig({id:row.id}).then((response) => {
const res = response.data
this.$message.success(res.msg)
this.getList()
}).catch(error => {
this.$message.error(error)
})
}).catch(() => {
})
},
},
}
</script>
... ...
<template>
<section>
<!--工具条-->
<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
<el-form :inline="true" :model="filters">
<el-form-item>
<el-button type="success" @click="applyAdd()">新 增</el-button>
</el-form-item>
</el-form>
</el-col>
<!--列表-->
<el-table :data="tableData" highlight-current-row style="width: 100%;"
row-key="ruleId">
<el-table-column width="80" prop="hostid" label="服务器ID" >
</el-table-column>
<el-table-column width="240" prop="localdir" label="本地发送目录" >
</el-table-column>
<el-table-column width="120" prop="destvr" label="目的地虚拟机" >
</el-table-column>
<el-table-column width="120" prop="routerkey" label="路由" >
</el-table-column>
<el-table-column width="120" prop="queue" label="队列">
</el-table-column>
<el-table-column width="120" prop="destchange" label="目的地交换">
</el-table-column>
<el-table-column width="120" prop="broadtype" label="广播类型" >
</el-table-column>
<el-table-column width="240" label="操作" fixed="right">
<template slot-scope="scope">
<el-button type="success" @click="firing(scope.row)">启动</el-button>
<el-button type="warning" @click="suspend(scope.$index,scope.row)">暂停</el-button>
<el-button type="danger" @click="batchRemove(scope.$index,scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页-->
<div class="block">
<el-pagination
:current-page="filters.pageNum"
:page-sizes="[10, 50, 100, 500]"
:page-size="filters.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
<el-row>
<el-dialog :title="dialogMap[dialogApply]" :visible.sync="apply_dialog" width="50%">
<el-form :model="addForm" :rules="rules" ref="addForm" style="margin-top: 20px">
<el-row>
<el-col :span="11">
<el-form-item label="服务器ID" :label-width="formLabelWidth" prop="hostid">
<!-- <el-input v-model="addForm.hostid" autocomplete="off" size="small" style="width: 260px">-->
<!-- </el-input>-->
<el-select v-model="addForm.hostid" clearable placeholder="请选择"
style="width: 260px">
<el-option
v-for="item in hostid"
:key="item.id"
:label="item.hostid"
:value="item.hostid">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="本地发送目录" :label-width="formLabelWidth" prop="localdir">
<el-input v-model="addForm.localdir" autocomplete="off" size="small" style="width: 260px">
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="11">
<el-form-item label="目的地虚拟机" :label-width="formLabelWidth" prop="destvr">
<el-input v-model="addForm.destvr" autocomplete="off" size="small" style="width: 260px">
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="路由" :label-width="formLabelWidth" prop="routerkey">
<el-input v-model="addForm.routerkey" autocomplete="off" size="small" style="width: 260px">
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="11">
<el-form-item label="队列" :label-width="formLabelWidth" prop="queue">
<el-input v-model="addForm.queue" autocomplete="off" size="small" style="width: 260px">
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="11">
<el-form-item label="目的地交换" :label-width="formLabelWidth" prop="destchange">
<el-input v-model="addForm.destchange" autocomplete="off" size="small" style="width: 260px">
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="11">
<el-form-item label="广播类型" :label-width="formLabelWidth" prop="broadtype">
<el-input v-model="addForm.broadtype" autocomplete="off" size="small" style="width: 260px">
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="apply_dialog = false" size="small">取 消</el-button>
<el-button type="primary" @click="dialogApply==='create'?add():edit()" size="small">提 交</el-button>
</div>
</el-dialog>
</el-row>
<el-dialog :visible.sync="tableData1_dialog" >
<!--列表-->
<el-table disabled :data="tableData1" highlight-current-row style="width: 100%;"
row-key="ruleId">
<el-table-column width="120" prop="hostid" label="服务器IP" >
</el-table-column>
<el-table-column width="120" prop="port" label="端口" >
</el-table-column>
<el-table-column width="120" prop="user" label="账号" >
</el-table-column>
<el-table-column width="120" prop="pass" label="密码" >
</el-table-column>
</el-table>
</el-dialog>
</section>
</template>
<script>
import {
listSendConfigs,
insertSendConfig,
deleteSendConfig,
addsendtask,
removesendTask,
listRabbitConfigs
} from '../../api/configuration';
export default {
data() {
return {
filters: {
pageNum: 1,
pageSize: 10
},
total: 0,
tableData: [],
hostid:[],
tableData1: [],
tableData1_dialog:false,
dialogMap: {
update: '编辑',
create: '新增'
},
dis: undefined,
dialogApply: 'create',
apply_dialog: false,
addForm: {
hostid:'',
localdir: '',
destvr: '',
routerkey: '',
queue: '',
destchange:'',
broadtype:'',
id:'',
del: '',
durability: '',
internal: 'false',
status:'',
},
formLabelWidth: '200px',
rules: {
},
}
},
mounted() {
this.getList();
},
methods: {
//分页
handleSizeChange(val) {
this.filters.pageSize = val
this.getList()
},
handleCurrentChange(val) {
this.filters.pageNum = val
this.getList()
},
//获取列表
getList() {
const _this = this
listSendConfigs().then((response) => {
const res = response.data
if (res.code !== '200') {
return _this.$message.error('获取消息收发记录，失败！')
}
// 获取列表数据
_this.tableData = res.data
// 获取列表的总记录数
_this.total = res.data.total
_this.$message.success('获取消息收发记录，成功！')
}).catch(error => {
// 关闭加载
_this.$message.error(error.toString())
})
},
// 添加对话框，打开事件
applyAdd() {
this.hostid=[];
const _this = this
listRabbitConfigs().then((response) => {
const res = response.data
if (res.code !== '200') {
return _this.$message.error('获取消息收发记录，失败！')
}
// 获取列表数据
_this.tableData1 = res.data
_this.hostid=_this.tableData1;
_this.$message.success('获取消息收发记录，成功！')
}).catch(error => {
// 关闭加载
_this.$message.error(error.toString())
})
this.addForm = {
hostid:'',
localdir: '',
destvr: '',
routerkey: '',
queue: '',
destchange:'',
broadtype:'',
id:'',
del: '',
durability: '',
internal: 'false',
status:'',
};
this.dialogApply= 'create';
this.dis= 'create';
this.apply_dialog = true;
},
// 添加功能
add() {
this.$refs.addForm.validate(valid => {
// 未通过，表单预校验
if (!valid) return;
insertSendConfig(this.addForm).then((response) => {
let res = response.data;
// 添加失败
if (res.code !== '200') {
return this.$message.error(res.msg);
}
// 添加，成功
this.$message.success(res.msg);
// 隐藏对话框
this.apply_dialog = false;
// 刷新列表
this.getList();
}).catch(error => {
this.$message.error(error.toString());
});
})
},
// 启动功能
firing() {
// 弹框询问是否删除？
this.$confirm(' 是否继续?', '警告', {
confirmButtonText: '确定启动',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
addsendtask({row:this.row}).then((response) => {
const res = response.data
this.$message.success(res.msg)
this.getList()
}).catch(error => {
this.$message.error(error)
})
}).catch(() => {
})
},
//暂停
suspend(index,row) {
// 弹框询问是否删除？
this.$confirm(' 是否继续?', '警告', {
confirmButtonText: '确定暂停',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
removesendTask({id:row.id}).then((response) => {
const res = response.data
this.$message.success(res.msg)
this.getList()
}).catch(error => {
this.$message.error(error)
})
}).catch(() => {
})
},
//删除
batchRemove(index,row) {
// 弹框询问是否删除？
this.$confirm('此操作永久删除该消息, 是否继续?', '警告', {
confirmButtonText: '确定删除',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
deleteSendConfig({id:row.id}).then((response) => {
const res = response.data
this.$message.success(res.msg)
this.getList()
}).catch(error => {
this.$message.error(error)
})
}).catch(() => {
})
},
},
}
</script>
... ...