|  |  | <template> | 
|  |  | <div>消息队列</div> | 
|  |  | <el-container> | 
|  |  | <el-main> | 
|  |  | <el-card style="background-color: #F5F7FA"> | 
|  |  | <!-- 搜素区域 --> | 
|  |  | <div> | 
|  |  | <el-row :gutter="24"> | 
|  |  | <el-col :span="4"> | 
|  |  | <el-input v-model="queue_queryInfo.queueName" prefix-icon="el-icon-search" | 
|  |  | size="medium" | 
|  |  | placeholder="队列名称" clearable style="width:180px"></el-input> | 
|  |  | </el-col> | 
|  |  | <el-col :span="4"> | 
|  |  | <el-cascader | 
|  |  | style="width:180px" size="medium" | 
|  |  | v-model="queue_queryInfo.virtualHostId" | 
|  |  | :options="queue_config.cascade.server_hostList" | 
|  |  | :show-all-levels="false" | 
|  |  | :change-on-select="false" | 
|  |  | clearable | 
|  |  | @change="cascadeQueryChange" | 
|  |  | :props="queue_config.cascade.defaultParams" | 
|  |  | placeholder="请选择所属虚拟主机"></el-cascader> | 
|  |  | </el-col> | 
|  |  | <el-col :span="8"> | 
|  |  | <el-button type="success" style="width:150px" size="medium" @click="queue_getList"> | 
|  |  | 查询交换机 | 
|  |  | </el-button> | 
|  |  | <el-button type="primary" style="width:150px" size="medium" @click="queue_toAddDialog"> | 
|  |  | 添加交换机 | 
|  |  | </el-button> | 
|  |  | </el-col> | 
|  |  | </el-row> | 
|  |  | </div> | 
|  |  |  | 
|  |  | <!-- 列表区域 --> | 
|  |  | <div style="margin-top: 20px;"> | 
|  |  | <el-table :data="queue_page.queueList" border v-loading="queue_loading.listLoading" | 
|  |  | @selection-change="queue_selectChange" | 
|  |  | 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="queueName" align="center" | 
|  |  | width="220"></el-table-column> | 
|  |  | <el-table-column label="所属虚拟主机" prop="virtualHost.virtualHostName" align="center" | 
|  |  | width="220"></el-table-column> | 
|  |  | <el-table-column label="是否持久化" prop="durability" align="center" width="145"> | 
|  |  | <template slot-scope="scope"> | 
|  |  | <span v-if="scope.row.durability ===false">否</span> | 
|  |  | <span v-if="scope.row.durability ===true">是</span> | 
|  |  | </template> | 
|  |  | </el-table-column> | 
|  |  | <el-table-column label="是否自动删除" prop="autoDelete" align="center" width="145"> | 
|  |  | <template slot-scope="scope"> | 
|  |  | <span v-if="scope.row.autoDelete ===false">否</span> | 
|  |  | <span v-if="scope.row.autoDelete ===true">是</span> | 
|  |  | </template> | 
|  |  | </el-table-column> | 
|  |  | <el-table-column label="扩展参数" prop="arguments" align="center" width="200"> | 
|  |  | </el-table-column> | 
|  |  | <el-table-column label="相关描述" prop="description" align="center" width="280"></el-table-column> | 
|  |  | <!-- fixed="right" --> | 
|  |  | <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="queue_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="queue_loading.delLoading" | 
|  |  | @click="queue_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="queue_loading.batchDelLoading" | 
|  |  | :disabled="this.queue_page.selectList.length===0" | 
|  |  | @click="queue_batchRemove">批量删除 | 
|  |  | </el-button> | 
|  |  | </el-col> | 
|  |  | <el-col :span="10" style="margin-top: 5px"> | 
|  |  | <el-pagination | 
|  |  | @size-change="queue_handleSizeChange" | 
|  |  | @current-change="queue_handleCurrentChange" | 
|  |  | :current-page="queue_queryInfo.pageNum" | 
|  |  | :page-sizes="[10,20,30,50]" | 
|  |  | :page-size="queue_queryInfo.pageSize" | 
|  |  | layout="total, sizes, prev, pager, next, jumper" | 
|  |  | :total="queue_page.total"> | 
|  |  | </el-pagination> | 
|  |  | </el-col> | 
|  |  | </el-row> | 
|  |  | </div> | 
|  |  | </el-card> | 
|  |  |  | 
|  |  | <!-- 增加,对话框区域 --> | 
|  |  | <div> | 
|  |  | <el-dialog title="添加队列" | 
|  |  | :visible.sync="queue_dialog.addDialog" | 
|  |  | style="margin-top: -50px" text-align="center" width="60%" | 
|  |  | @close="queue_addDialogClosed"> | 
|  |  |  | 
|  |  | <el-form :inline="true" label-width="120px" status-icon style="margin-top: -10px" align="center" | 
|  |  | :model="queue_addForm" :rules="queue_addFormRules" ref="queue_addFormRef"> | 
|  |  | <el-form-item label="队列名称:" prop="queueName"> | 
|  |  | <el-input v-model="queue_addForm.queueName" style="width:240px" size="small" clearable | 
|  |  | placeholder="请输入队列名称"> | 
|  |  | </el-input> | 
|  |  | </el-form-item> | 
|  |  | <el-form-item label="所属虚拟主机:" prop="virtualHostId"> | 
|  |  | <el-cascader | 
|  |  | clearable style="width: 240px" size="small" | 
|  |  | v-model="queue_addForm.virtualHostId" | 
|  |  | @change="cascadeAddChange" | 
|  |  | :options="queue_config.cascade.server_hostList" | 
|  |  | :show-all-levels="false" | 
|  |  | :change-on-select="false" | 
|  |  | :props="queue_config.cascade.defaultParams" | 
|  |  | placeholder="请选择所属虚拟主机"></el-cascader> | 
|  |  | </el-form-item> | 
|  |  |  | 
|  |  | <el-form-item label="是否持久化:" prop="durability"> | 
|  |  | <el-select v-model="queue_addForm.durability" style="width: 240px" clearable size="small" | 
|  |  | placeholder="请选择是否持久化"> | 
|  |  | <el-option | 
|  |  | v-for="item in booleanList" | 
|  |  | :key="item.value" | 
|  |  | :label="item.label" | 
|  |  | :value="item.value"> | 
|  |  | </el-option> | 
|  |  | </el-select> | 
|  |  | </el-form-item> | 
|  |  | <el-form-item label="是否自动删除:" prop="autoDelete"> | 
|  |  | <el-select v-model="queue_addForm.autoDelete" style="width: 240px" clearable size="small" | 
|  |  | placeholder="请选择是否自动删除"> | 
|  |  | <el-option | 
|  |  | v-for="item in booleanList" | 
|  |  | :key="item.value" | 
|  |  | :label="item.label" | 
|  |  | :value="item.value"> | 
|  |  | </el-option> | 
|  |  | </el-select> | 
|  |  | </el-form-item> | 
|  |  | <el-form-item label="扩展参数:" prop="arguments"> | 
|  |  | <el-input v-model="queue_addForm.arguments" style="width:240px" clearable size="small" | 
|  |  | placeholder="扩展参数(JSON格式)"> | 
|  |  | </el-input> | 
|  |  | </el-form-item> | 
|  |  | <el-form-item label="相关描述:" prop="description"> | 
|  |  | <el-input v-model="queue_addForm.description" style="width:240px" clearable size="small" | 
|  |  | 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="queue_dialog.addDialog = false" size="medium" | 
|  |  | style="width: 100px">取消 | 
|  |  | </el-button> | 
|  |  | <el-button type="primary" @click="queue_add" :loading="queue_loading.addLoading" | 
|  |  | size="medium" style="width: 100px">添加 | 
|  |  | </el-button> | 
|  |  | </div> | 
|  |  | </el-dialog> | 
|  |  | </div> | 
|  |  | <!-- 编辑,对话框区域 --> | 
|  |  | <div> | 
|  |  | <el-dialog title="编辑队列信息" | 
|  |  | :visible.sync="queue_dialog.editDialog" | 
|  |  | style="margin-top: -50px" text-align="center" width="50%" | 
|  |  | @close="queue_editDialogClosed"> | 
|  |  | <el-form :inline="true" label-width="120px" status-icon style="margin-top: -10px" align="center" | 
|  |  | :model="queue_editForm" :rules="queue_editFormRules" ref="queue_editFormRef"> | 
|  |  | <el-form-item label="队列名称:" prop="queueName"> | 
|  |  | <el-input v-model="queue_editForm.queueName" style="width:240px" size="small" clearable | 
|  |  | placeholder="请输入队列名称"> | 
|  |  | </el-input> | 
|  |  | </el-form-item> | 
|  |  | <el-form-item label="所属虚拟主机:" prop="virtualHostId"> | 
|  |  | <el-cascader | 
|  |  | clearable style="width: 240px" size="small" | 
|  |  | v-model="queue_editForm.virtualHostId" | 
|  |  | @change="cascadeEditChange" | 
|  |  | :options="queue_config.cascade.server_hostList" | 
|  |  | :show-all-levels="false" | 
|  |  | :change-on-select="false" | 
|  |  | :props="queue_config.cascade.defaultParams" | 
|  |  | placeholder="请选择所属虚拟主机"></el-cascader> | 
|  |  | </el-form-item> | 
|  |  |  | 
|  |  | <el-form-item label="是否持久化:" prop="durability"> | 
|  |  | <el-select v-model="queue_editForm.durability" style="width: 240px" clearable size="small" | 
|  |  | placeholder="请选择是否持久化"> | 
|  |  | <el-option | 
|  |  | v-for="item in booleanList" | 
|  |  | :key="item.value" | 
|  |  | :label="item.label" | 
|  |  | :value="item.value"> | 
|  |  | </el-option> | 
|  |  | </el-select> | 
|  |  | </el-form-item> | 
|  |  | <el-form-item label="是否自动删除:" prop="autoDelete"> | 
|  |  | <el-select v-model="queue_editForm.autoDelete" style="width: 240px" clearable size="small" | 
|  |  | placeholder="请选择是否自动删除"> | 
|  |  | <el-option | 
|  |  | v-for="item in booleanList" | 
|  |  | :key="item.value" | 
|  |  | :label="item.label" | 
|  |  | :value="item.value"> | 
|  |  | </el-option> | 
|  |  | </el-select> | 
|  |  | </el-form-item> | 
|  |  | <el-form-item label="扩展参数:" prop="arguments"> | 
|  |  | <el-input v-model="queue_editForm.arguments" style="width:240px" clearable size="small" | 
|  |  | placeholder="扩展参数(JSON格式)"> | 
|  |  | </el-input> | 
|  |  | </el-form-item> | 
|  |  | <el-form-item label="相关描述:" prop="description"> | 
|  |  | <el-input v-model="queue_editForm.description" style="width:240px" clearable size="small" | 
|  |  | placeholder="相关描述"> | 
|  |  | </el-input> | 
|  |  | </el-form-item> | 
|  |  | </el-form> | 
|  |  |  | 
|  |  | <div slot="footer" class="dialog-footer" style="text-align: center"> | 
|  |  | <el-button type="info" @click="queue_dialog.editDialog = false" size="medium" | 
|  |  | style="width: 100px">取消 | 
|  |  | </el-button> | 
|  |  | <el-button type="primary" @click="queue_edit" :loading="queue_loading.addLoading" | 
|  |  | size="medium" style="width: 100px">编辑 | 
|  |  | </el-button> | 
|  |  | </div> | 
|  |  | </el-dialog> | 
|  |  | </div> | 
|  |  | </el-main> | 
|  |  | </el-container> | 
|  |  | </template> | 
|  |  |  | 
|  |  | <script> | 
| ... | ... | @@ -9,7 +254,7 @@ | 
|  |  | updateBusQueue, | 
|  |  | deleteBusQueue, | 
|  |  | batchRemoveBusQueue, | 
|  |  | getServerAndHostAndExchangeList, | 
|  |  | getServerAndHostList, | 
|  |  | } from "../../api/message_bus"; | 
|  |  |  | 
|  |  | export default { | 
| ... | ... | @@ -24,7 +269,7 @@ | 
|  |  | // 级联显示 | 
|  |  | cascade: { | 
|  |  | // 服务器及虚拟主机列表 | 
|  |  | server_host_exchangeList: [], | 
|  |  | server_hostList: [], | 
|  |  | defaultParams: { | 
|  |  | label: 'aliasName', | 
|  |  | value: 'id', | 
| ... | ... | @@ -38,21 +283,424 @@ | 
|  |  | queue_queryInfo: { | 
|  |  | // 队列名称 | 
|  |  | queueName: '', | 
|  |  | // 所属交换机id | 
|  |  | exchangeId: '', | 
|  |  | // 所属虚拟机id | 
|  |  | virtualHostId: '', | 
|  |  | // 当前页数 | 
|  |  | pageNum: 1, | 
|  |  | // 每页条数 | 
|  |  | pageSize: 10 | 
|  |  | }, | 
|  |  | /** | 
|  |  | * queue,分页 | 
|  |  | */ | 
|  |  | queue_page: { | 
|  |  | // 路由键列表 | 
|  |  | queueList: [], | 
|  |  | // 总条数 | 
|  |  | total: 0, | 
|  |  | // 批量删除,选中列表 | 
|  |  | selectList: [], | 
|  |  | }, | 
|  |  | /** | 
|  |  | * queue,新增表单 | 
|  |  | */ | 
|  |  | queue_addForm: { | 
|  |  | // 队列名称 | 
|  |  | queueName: '', | 
|  |  | // 所属虚拟机id | 
|  |  | virtualHostId: '', | 
|  |  | // 是否持久化,默认 true | 
|  |  | durability: true, | 
|  |  | // 是否自动删除,默认 false | 
|  |  | autoDelete: false, | 
|  |  | // 扩展参数,以JSON格式存储 | 
|  |  | arguments: '', | 
|  |  | // 相关描述 | 
|  |  | description: '', | 
|  |  | }, | 
|  |  | /** | 
|  |  | * queue,编辑表单 | 
|  |  | */ | 
|  |  | queue_editForm: {}, | 
|  |  | /** | 
|  |  | * queue,加载 | 
|  |  | */ | 
|  |  | queue_loading: { | 
|  |  | // 列表加载 | 
|  |  | listLoading: false, | 
|  |  | // 添加加载 | 
|  |  | addLoading: false, | 
|  |  | // 编辑加载 | 
|  |  | editLoading: false, | 
|  |  | // 删除加载 | 
|  |  | delLoading: false, | 
|  |  | // 批量删除加载 | 
|  |  | batchDelLoading: false, | 
|  |  | }, | 
|  |  | /** | 
|  |  | *  queue,对话框管理 | 
|  |  | */ | 
|  |  | queue_dialog: { | 
|  |  | // 添加对话框 | 
|  |  | addDialog: false, | 
|  |  | // 编辑对话框 | 
|  |  | editDialog: false, | 
|  |  | }, | 
|  |  | /** | 
|  |  | * queue,添加表单,验证规则 | 
|  |  | */ | 
|  |  | queue_addFormRules: { | 
|  |  | // 队列名称 | 
|  |  | queueName: [ | 
|  |  | {required: true, message: '请输入队列名称', trigger: ['blur', 'change']}, | 
|  |  | ], | 
|  |  | // 所属虚拟机id | 
|  |  | virtualHostId: [ | 
|  |  | {required: true, message: '请选择所属虚拟机', trigger: ['blur', 'change']}, | 
|  |  | ], | 
|  |  | // 是否持久化,默认 true | 
|  |  | durability: [ | 
|  |  | {required: true, message: '请选择是否持久化', trigger: ['blur', 'change']}, | 
|  |  | ], | 
|  |  | // 是否自动删除,默认 false | 
|  |  | autoDelete: [ | 
|  |  | {required: true, message: '请选择是否自动删除', trigger: ['blur', 'change']}, | 
|  |  | ], | 
|  |  | // // 扩展参数,以JSON格式存储 | 
|  |  | // arguments: [ | 
|  |  | //     {required: true, message: '扩展参数', trigger: ['blur', 'change']}, | 
|  |  | // ], | 
|  |  | // // 相关描述 | 
|  |  | // description: [ | 
|  |  | //     {required: true, message: '请输入相关描述', trigger: ['blur', 'change']}, | 
|  |  | // ], | 
|  |  | }, | 
|  |  | /** | 
|  |  | * queue,编辑表单,验证规则 | 
|  |  | */ | 
|  |  | queue_editFormRules: { | 
|  |  | // 队列名称 | 
|  |  | queueName: [ | 
|  |  | {required: true, message: '请输入队列名称', trigger: ['blur', 'change']}, | 
|  |  | ], | 
|  |  | // 所属虚拟机id | 
|  |  | virtualHostId: [ | 
|  |  | {required: true, message: '请选择所属虚拟机', trigger: ['blur', 'change']}, | 
|  |  | ], | 
|  |  | // 是否持久化,默认 true | 
|  |  | durability: [ | 
|  |  | {required: true, message: '请选择是否持久化', trigger: ['blur', 'change']}, | 
|  |  | ], | 
|  |  | // 是否自动删除,默认 false | 
|  |  | autoDelete: [ | 
|  |  | {required: true, message: '请选择是否自动删除', trigger: ['blur', 'change']}, | 
|  |  | ], | 
|  |  | // // 扩展参数,以JSON格式存储 | 
|  |  | // arguments: [ | 
|  |  | //     {required: true, message: '扩展参数', trigger: ['blur', 'change']}, | 
|  |  | // ], | 
|  |  | // // 相关描述 | 
|  |  | // description: [ | 
|  |  | //     {required: true, message: '请输入相关描述', trigger: ['blur', 'change']}, | 
|  |  | // ], | 
|  |  | }, | 
|  |  | /** | 
|  |  | * Boolean属性,选择列表 | 
|  |  | */ | 
|  |  | booleanList: [ | 
|  |  | { | 
|  |  | value: true, | 
|  |  | label: '是' | 
|  |  | }, | 
|  |  | { | 
|  |  | value: false, | 
|  |  | label: '否' | 
|  |  | }, | 
|  |  | ], | 
|  |  | } | 
|  |  | }, | 
|  |  | methods: {}, | 
|  |  | methods: { | 
|  |  | /** | 
|  |  | * 分页查询,监听 pageSize 改变的事件 | 
|  |  | */ | 
|  |  | queue_handleSizeChange(newSize) { | 
|  |  | this.queue_queryInfo.pageSize = newSize; | 
|  |  | //刷新列表 | 
|  |  | this.queue_getList(); | 
|  |  | }, | 
|  |  | /** | 
|  |  | * 分页查询,监听 pageNum 改变的事件 | 
|  |  | */ | 
|  |  | queue_handleCurrentChange(newPage) { | 
|  |  | this.queue_queryInfo.pageNum = newPage; | 
|  |  | //刷新列表 | 
|  |  | this.queue_getList(); | 
|  |  | }, | 
|  |  | /** | 
|  |  | * queue,分页查询 | 
|  |  | */ | 
|  |  | queue_getList() { | 
|  |  | // 开启加载 | 
|  |  | this.queue_loading.listLoading = true; | 
|  |  | selectBusQueueList(this.queue_queryInfo).then((response) => { | 
|  |  | let res = response.data; | 
|  |  | if (res.code !== '200') { | 
|  |  | // 关闭加载 | 
|  |  | this.queue_loading.listLoading = false; | 
|  |  | return this.$message.error('获取队列-列表,失败!'); | 
|  |  | } | 
|  |  | // 获取列表数据 | 
|  |  | this.queue_page.queueList = res.data.list; | 
|  |  | // 获取列表的总记录数 | 
|  |  | this.queue_page.total = res.data.total; | 
|  |  | // 关闭加载 | 
|  |  | this.queue_loading.listLoading = false; | 
|  |  | this.$message.success('获取队列-列表,成功!'); | 
|  |  | }).catch(error => { | 
|  |  | // 关闭加载 | 
|  |  | this.queue_loading.listLoading = false; | 
|  |  | this.$message.error(error.toString()); | 
|  |  | }); | 
|  |  | }, | 
|  |  | /** | 
|  |  | * queue,添加对话框,打开事件 | 
|  |  | */ | 
|  |  | queue_toAddDialog() { | 
|  |  | this.queue_dialog.addDialog = true; | 
|  |  | }, | 
|  |  | /** | 
|  |  | * queue,添加对话框,关闭事件 | 
|  |  | */ | 
|  |  | queue_addDialogClosed() { | 
|  |  | // 重置对话框 | 
|  |  | this.$refs.queue_addFormRef.resetFields(); | 
|  |  | }, | 
|  |  | /** | 
|  |  | * queue,添加功能 | 
|  |  | */ | 
|  |  | queue_add() { | 
|  |  | // 进行表单的预验证 | 
|  |  | this.$refs.queue_addFormRef.validate(valid => { | 
|  |  | // 未通过,表单预校验 | 
|  |  | if (!valid) return; | 
|  |  | // 通过,表单预检验,开启加载 | 
|  |  | this.queue_loading.addLoading = true; | 
|  |  | insertBusQueue(this.queue_addForm).then((response) => { | 
|  |  | let res = response.data; | 
|  |  | // 添加失败 | 
|  |  | if (res.code !== '200') { | 
|  |  | if (res.code === '400') { | 
|  |  | // 关闭加载 | 
|  |  | this.queue_loading.addLoading = false; | 
|  |  | return this.$message.error('该队列信息,已存在'); | 
|  |  | } | 
|  |  | if (res.code === '999') { | 
|  |  | // 关闭加载 | 
|  |  | this.queue_loading.addLoading = false; | 
|  |  | return this.$message.error('未知异常,添加队列,失败'); | 
|  |  | } | 
|  |  | // 关闭加载 | 
|  |  | this.queue_loading.addLoading = false; | 
|  |  | return this.$message.error('添加队列,失败'); | 
|  |  | } | 
|  |  | // 添加,成功 | 
|  |  | this.$message.success('添加队列,成功'); | 
|  |  | // 关闭加载 | 
|  |  | this.queue_loading.addLoading = false; | 
|  |  | // 隐藏对话框 | 
|  |  | this.queue_dialog.addDialog = false; | 
|  |  | // 刷新列表 | 
|  |  | this.queue_getList(); | 
|  |  | }).catch(error => { | 
|  |  | // 关闭加载 | 
|  |  | this.queue_loading.addLoading = false; | 
|  |  | this.$message.error(error.toString()); | 
|  |  | }); | 
|  |  | }) | 
|  |  | }, | 
|  |  | /** | 
|  |  | * queue,编辑对话框,打开事件 | 
|  |  | */ | 
|  |  | queue_toEditDialog(index, row) { | 
|  |  | this.queue_editForm = Object.assign({}, row); | 
|  |  | this.queue_dialog.editDialog = true; | 
|  |  | }, | 
|  |  | /** | 
|  |  | * queue,编辑对话框,关闭事件 | 
|  |  | */ | 
|  |  | queue_editDialogClosed() { | 
|  |  | //重置对话框 | 
|  |  | this.$refs.queue_editFormRef.resetFields(); | 
|  |  | }, | 
|  |  | /** | 
|  |  | * queue,编辑功能 | 
|  |  | */ | 
|  |  | queue_edit() { | 
|  |  | //进行表单的预验证 | 
|  |  | this.$refs.queue_editFormRef.validate(valid => { | 
|  |  | // 未通过,表单预校验 | 
|  |  | if (!valid) return; | 
|  |  | // 通过,表单预检验,开启加载 | 
|  |  | this.queue_loading.editLoading = true; | 
|  |  | updateBusQueue(this.queue_editForm).then((response) => { | 
|  |  | let res = response.data; | 
|  |  | if (res.code !== '200') { | 
|  |  | if (res.code === '400') { | 
|  |  | // 关闭加载 | 
|  |  | this.queue_loading.editLoading = false; | 
|  |  | return this.$message.error('该队列信息,已存在'); | 
|  |  | } | 
|  |  | if (res.code === '999') { | 
|  |  | // 关闭加载 | 
|  |  | this.queue_loading.editLoading = false; | 
|  |  | return this.$message.error('未知异常,编辑队列信息,失败'); | 
|  |  | } | 
|  |  | //关闭加载 | 
|  |  | this.queue_loading.editLoading = false; | 
|  |  | return this.$message.error('编辑队列信息,失败'); | 
|  |  | } | 
|  |  | // 关闭加载 | 
|  |  | this.queue_loading.editLoading = false; | 
|  |  | this.$message.success('编辑队列信息,成功!'); | 
|  |  | // 隐藏对话框 | 
|  |  | this.queue_dialog.editDialog = false; | 
|  |  | // 刷新列表 | 
|  |  | this.queue_getList(); | 
|  |  | }).catch(error => { | 
|  |  | // 关闭加载 | 
|  |  | this.queue_loading.editLoading = false; | 
|  |  | this.$message.error(error.toString()); | 
|  |  | }); | 
|  |  | }) | 
|  |  | }, | 
|  |  | /** | 
|  |  | * queue,删除功能 | 
|  |  | */ | 
|  |  | queue_remove(index, row) { | 
|  |  | // 弹框询问是否删除? | 
|  |  | this.$confirm('此操作永久删除该队列信息, 是否继续?', '警告', { | 
|  |  | confirmButtonText: '确定删除', | 
|  |  | cancelButtonText: '取消', | 
|  |  | type: 'warning' | 
|  |  | } | 
|  |  | ).then(() => { | 
|  |  | // 开启加载 | 
|  |  | this.queue_loading.delLoading = true; | 
|  |  | deleteBusQueue(row).then((response) => { | 
|  |  | let res = response.data; | 
|  |  | if (res.code !== '200') { | 
|  |  | // 关闭加载 | 
|  |  | this.queue_loading.delLoading = false; | 
|  |  | return this.$message.error('删除队列信息,失败'); | 
|  |  | } | 
|  |  | // 关闭加载 | 
|  |  | this.queue_loading.delLoading = false; | 
|  |  | this.$message.success('删除队列信息,成功!'); | 
|  |  | // 刷新列表 | 
|  |  | this.queue_getList(); | 
|  |  | }).catch(error => { | 
|  |  | // 关闭加载 | 
|  |  | this.queue_loading.delLoading = false; | 
|  |  | this.$message.error(error.toString()); | 
|  |  | }); | 
|  |  | }).catch(() => { | 
|  |  | }); | 
|  |  | }, | 
|  |  | /** | 
|  |  | * queue,批量删除---选中 | 
|  |  | */ | 
|  |  | queue_selectChange: function (selectList) { | 
|  |  | this.queue_page.selectList = selectList; | 
|  |  | }, | 
|  |  | /** | 
|  |  | * queue,批量删除功能 | 
|  |  | */ | 
|  |  | queue_batchRemove() { | 
|  |  | const ids = this.queue_page.selectList.map(item => item.id).toString(); | 
|  |  | this.$confirm('此操作将永久删除选中的队列信息, 是否继续?', '警告', { | 
|  |  | confirmButtonText: '确定删除', | 
|  |  | cancelButtonText: '取消', | 
|  |  | type: 'warning' | 
|  |  | } | 
|  |  | ).then(() => { | 
|  |  | // 开启加载 | 
|  |  | this.queue_loading.batchDelLoading = true; | 
|  |  | let params = {ids: ids}; | 
|  |  | batchRemoveBusQueue(params).then(response => { | 
|  |  | let res = response.data; | 
|  |  | if (res.code !== '200') { | 
|  |  | // 关闭加载 | 
|  |  | this.queue_loading.batchDelLoading = false; | 
|  |  | return this.$message.error('批量删除队列信息,失败'); | 
|  |  | } | 
|  |  | this.$message.success('批量删除队列信息,成功!'); | 
|  |  | // 关闭加载 | 
|  |  | this.queue_loading.batchDelLoading = false; | 
|  |  | // 刷新列表 | 
|  |  | this.queue_getList(); | 
|  |  | }).catch(error => { | 
|  |  | // 关闭加载 | 
|  |  | this.queue_loading.batchDelLoading = false; | 
|  |  | this.$message.error(error.toString()); | 
|  |  | }); | 
|  |  | }).catch(() => { | 
|  |  | }); | 
|  |  | }, | 
|  |  | /** | 
|  |  | * 服务器与虚拟主机 1:n | 
|  |  | * 获取列表 | 
|  |  | */ | 
|  |  | selectServerAndHostList() { | 
|  |  | getServerAndHostList().then((response) => { | 
|  |  | let res = response.data; | 
|  |  | if (res.code !== '200') { | 
|  |  | return this.$message.error('获取服务器与虚拟主机信息,失败!'); | 
|  |  | } | 
|  |  | // 获取列表数据 | 
|  |  | this.queue_config.cascade.server_hostList = res.data; | 
|  |  | // this.$message.success('获取虚拟主机列表,成功!'); | 
|  |  | }).catch(error => { | 
|  |  | this.$message.error(error.toString()); | 
|  |  | }); | 
|  |  | }, | 
|  |  | /** | 
|  |  | * 查询,级联。值改变激发的方法 | 
|  |  | * @param value 改变后的值 | 
|  |  | */ | 
|  |  | cascadeQueryChange(value) { | 
|  |  | let ids = value.join().split(","); | 
|  |  | this.queue_queryInfo.virtualHostId = ids[ids.length - 1]; | 
|  |  | }, | 
|  |  | /** | 
|  |  | * 添加,级联。值改变激发的方法 | 
|  |  | * @param value 改变后的值 | 
|  |  | */ | 
|  |  | cascadeAddChange(value) { | 
|  |  | let ids = value.join().split(","); | 
|  |  | this.queue_addForm.virtualHostId = ids[ids.length - 1]; | 
|  |  | }, | 
|  |  | /** | 
|  |  | * 编辑,级联。值改变激发的方法 | 
|  |  | * @param value 改变后的值 | 
|  |  | */ | 
|  |  | cascadeEditChange(value) { | 
|  |  | let ids = value.join().split(","); | 
|  |  | this.queue_editForm.virtualHostId = ids[ids.length - 1]; | 
|  |  | }, | 
|  |  | }, | 
|  |  | created() { | 
|  |  |  | 
|  |  | if (this.$route.params.virtualHost_scopeRow !== undefined) { | 
|  |  | // 参数,虚拟主机id | 
|  |  | this.queue_queryInfo.virtualHostId = this.$route.params.virtualHost_scopeRow.id; | 
|  |  | // 刷新列表 | 
|  |  | this.queue_getList(); | 
|  |  | } else { | 
|  |  | // 刷新列表 | 
|  |  | this.queue_getList(); | 
|  |  | } | 
|  |  | }, | 
|  |  | mounted() { | 
|  |  |  | 
|  |  | this.selectServerAndHostList(); | 
|  |  | }, | 
|  |  | computed: {}, | 
|  |  | } | 
... | ... |  |