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