Isolution
2022/3/9 6:17:18
本文主要是介绍Isolution,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
<template> <div style="float:left;width: 100%; margin-left: 0"> <el-row > <el-col :span=4> <el-input placeholder="请输入服务名" v-model='form.app' clearable size="medium" @change="query"></el-input> </el-col> <el-col :span=4 :offset=1> <el-input placeholder="请输入实例名" v-model='form.instanceId' clearable size="medium" @change="query"></el-input> </el-col> <el-col :span=4 :offset=1> <el-select v-model="form.status" placeholder="请选择实例状态"> <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" > </el-option> </el-select> </el-col> <el-col :span="2"> <el-button ref="query" type="primary" icon="el-icon-check" @click="query" size="medium">查询</el-button> </el-col> </el-row> <div style="margin-top:20px"> <el-table :data="tableData" height="700" stripe style="width: 100%"> <el-table-column label="服务名" prop="app" sortable width="100"></el-table-column> <el-table-column label="实例名" prop="instanceId" sortable width="100"></el-table-column> <el-table-column label="实例状态" prop="status" sortable width="180"></el-table-column> <el-table-column label="运行状态" prop="status" sortable width="180"></el-table-column> <!-- <el-table-column label="修改原因" prop="reason" width="250"></el-table-column>--> <el-table-column align="right" width="200"> <template #header> <el-input v-model="search" size="mini" placeholder="API"></el-input> </template> <template #default="scope"> <el-button size="mini" @click="isolution(scope.$index, scope.row)" icon="el-icon-delete" type="primary" :disabled="!$root.writeFlag" >隔离</el-button> <el-button size="mini" @click="recover(scope.$index, scope.row)" icon="el-icon-plus" type="primary" :disabled="!$root.writeFlag" >恢复</el-button> </template> </el-table-column> </el-table> <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[30, 50, 100, 200, 500, 1000]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageTogal"> </el-pagination> </div> </div> </template> <script>import { post } from '../../api/request' import Cookies from 'js-cookies/src/cookies' export default { name: 'IsolutionInstance', data () { return { pageTogal: 0, currentPage: 1, pageSize: 50, disabled: true, tableData: [], tableDataCache: [], filterData: ['total', 'currentPage', 'pageSize'], form: { app: '', instanceId: '', status: '', userName: '', reason: '' }, statusOptions: [ { value: '', label: 'ALL' }, { value: 'UP', label: 'UP' }, { value: 'OUT_OF_SERVICE', label: 'OUT_OF_SERVICE' } ] } }, created () { this.disabled = !(this.$root.envFlag && this.$root.writeFlag) post('/api/instance/apps', this.form).then((result) => { console.log(result) if (result.list != null) { this.pageTogal = result.list.length this.tableDataCache = result.list this.tableData = this.tableDataCache.slice(0, this.pageSize) this.currentPage = 1 } }) }, methods: { handleSizeChange (val) { this.pageSize = val this.tableData = this.tableDataCache.slice(0, this.pageSize) this.currentPage = 1 console.log(`每页 ${val} 条`) }, handleCurrentChange (val) { window.scrollTo(0, 0) this.tableData = this.tableDataCache.slice((val - 1) * this.pageSize, val * this.pageSize) console.log(`当前页: ${val}`) }, recordFormat (item) { for (let i = 0; i < this.filterData.length; i++) { if (item.indexOf(this.filterData[i]) !== -1) { return } } var htmlStr = '' if (item.includes('^')) { htmlStr = '<font color="red">' + item.replaceAll('^', '') + '</font>' + '<br>' } else { htmlStr = item + '<br>' } return htmlStr }, query () { // this.$refs.query.icon = 'el-icon-loading' post('/api/instance/apps', this.form).then((result) => { console.log(result) try { if (result.list != null) { this.pageTogal = result.list.length this.tableDataCache = result.list this.tableData = this.tableDataCache.slice(0, this.pageSize) this.currentPage = 1 // this.$refs.query.icon = 'el-icon-check' } } catch (e) { // this.$refs.query.icon = 'el-icon-close' } }) }, isolution (index, row) { this.rowToForm(row) this.$confirm('操作将导致实例下线,是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { post('/api/instance/isolution', this.form).then((result) => { console.log(result) if (result.code === '200') { this.$message({ type: 'info', message: '隔离成功' }) this.query() } else { this.$message({ type: 'error', message: '隔离失败' }) } }) }).catch(() => { this.$message({ type: 'info', message: '操作已取消' }) Cookies.removeItem('reason') }) }, recover (index, row) { this.rowToForm(row) this.$confirm('操作将导致实例下线,是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { post('/api/instance/recover', this.form).then((result) => { console.log(result) if (result.code === '200') { this.$message({ type: 'info', message: '恢复成功' }) this.query() } else { this.$message({ type: 'error', message: '恢复失败' }) } }) }).catch(() => { this.$message({ type: 'info', message: '操作已取消' }) Cookies.removeItem('reason') }) }, rowToForm (row) { this.form.status = row.status this.form.app = row.app this.form.instanceId = row.instanceId } } } </script> <style scoped> </style>
这篇关于Isolution的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-02Java微服务系统项目实战入门教程
- 2024-11-02Java微服务项目实战:新手入门指南
- 2024-11-02Java项目实战:新手入门教程
- 2024-11-02Java小程序项目实战:从入门到简单应用
- 2024-11-02Java支付系统项目实战入门教程
- 2024-11-02SpringCloud Alibaba项目实战:新手入门教程
- 2024-11-02Swagger项目实战:新手入门教程
- 2024-11-02UNI-APP项目实战:新手入门与初级教程
- 2024-11-02编译部署资料入门教程:一步步学会编译和部署
- 2024-11-02地图服务资料入门指南