用ele-ui做表格展示时常用到的操作功能
一些常用的功能会用到的如下：
<el-button v-show="scope.row.state !== 1" type="text" size="small" @click="startB(scope.row)">启用</el-button>
<el-button v-show="scope.row.state !== 0" type="text" size="small" @click="end(scope.row)" >禁用</el-button>
<span class="dropDownF" v-if="scope.row.alertFlag">
<el-dropdown trigger="click">
<span class="el-dropdown-link">
更多
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="1">
<el-button type="text" size="small" @click="alertHistory(scope.row)" >告警历史</el-button>
</el-dropdown-item>
<el-dropdown-item command="2">
<el-button type="text" size="small" @click="del(scope.row)" >删除</el-button>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
对以上操作会用到的方法是：
startB(row) {
this.$confirm('确定要启用这条告警规则吗', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
closeOnClickModal:false,
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
instance.confirmButtonLoading = true;
instance.confirmButtonText = '执行中...';
// let req = {
// id: row.id,
// adminEmail: this.$store.state.user.userMail,
// userId:this.$store.state.user.userId,
// clusterJson:row.clusterJson
// }
let req = {
ids: row.id,
adminEmail: this.$store.state.user.userMail,
//userId:this.$store.state.user.userId,
names: row.alert
}
this.$http.startMonitor(req).then((res) => {
// done();
// instance.confirmButtonLoading = false;
// if (res && res.data.state=='success') {
// this.$popSuccess('启用告警规则成功')
// this.search()
// } else {
// this.$popError(res.data.message)
// }
})
} else {
done();
}
}
}).then(() => {
}).catch(() => {
});
},
end(row) {
this.$confirm('确定要禁用这条告警规则吗', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
closeOnClickModal:false,
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
instance.confirmButtonLoading = true;
instance.confirmButtonText = '执行中...';
// let req = {
// id: row.id,
// adminEmail: this.$store.state.user.userMail,
// userId:this.$store.state.user.userId,
// clusterJson:row.clusterJson
// }
let req = {
ids: row.id,
adminEmail: this.$store.state.user.userMail,
// userId:this.$store.state.user.userId,
names: row.alert
}
/this.$http.stopMonitor(req).then((res) => {
// done();
// instance.confirmButtonLoading = false;
// if (res && res.data.state=='success') {
// this.$popSuccess('禁用告警规则成功')
// this.search()
// } else {
// this.$popError(res.data.message)
// }
})
} else {
done();
}
}
}).then(() => {
}).catch(() => {
});
}
alertHistory (item) {
let path;
if (this.$store.state.productType == 2){
path= "/app/boc-logAlarmHistory"
} else{
path= "/app/boms/monitorHistory"
}
let obj = {
path:path,
query: {
id: item.id,
//sysId: this.query.sysId,
//: this.query.userId,
pageNum: 1,
pageSize: 10,
alert: item.alert,
monitorType: item.monitorType
}
};
this.$router.push(obj)
},
