代码结构调整

This commit is contained in:
任珮宇 2023-10-10 17:28:53 +08:00
parent 7e33d014d4
commit 1de8300df3

View File

@ -1,18 +1,8 @@
<template>
<div>
<a-modal
title='Add Rule'
:width="845"
v-model="visible"
@cancel="onCancel"
>
<a-form-model
ref="al_ruleForm"
:model="form"
:rules="rules"
layout="vertical"
>
<a-row :gutter="[15,0]">
<a-modal title="Add Rule" :width="845" v-model="visible" @cancel="onCancel">
<a-form-model ref="al_ruleForm" :model="form" :rules="rules" layout="vertical">
<a-row :gutter="[15, 0]">
<a-col :span="12">
<a-form-model-item ref="sourceType" label="Source Type" prop="sourceType">
<a-select
@ -42,7 +32,7 @@
</a-form-model-item>
</a-col>
</a-row>
<a-row :gutter="[15,0]">
<a-row :gutter="[15, 0]">
<a-col :span="12">
<a-form-model-item ref="alarmRule" label="Alarm Rule" prop="name">
<a-input v-model="form.name" placeholder="Pleace enter the alarm rule name" />
@ -64,7 +54,7 @@
</a-form-model-item>
</a-col>
</a-row>
<a-row :gutter="[15,0]">
<a-row :gutter="[15, 0]">
<a-col :span="12">
<a-form-model-item ref="monitorItem" label="Logic Symbol" prop="operator">
<a-select
@ -84,7 +74,7 @@
</a-form-model-item>
</a-col>
</a-row>
<a-row :gutter="[15,0]">
<a-row :gutter="[15, 0]">
<a-col :span="12">
<a-form-model-item ref="silenceCycle" label="Silence Cycle" prop="silenceCycle">
<a-select
@ -124,125 +114,109 @@
</template>
<script>
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
import { getAction } from '@/api/manage'
export default {
props: ["visible","serverList","currServer","serverLabel"],
props: ['visible', 'serverList', 'currServer', 'serverLabel'],
data() {
return {
form: {
sourceType: "Server",
sourceType: 'Server',
sourceId: undefined,
name: "",
name: '',
itemId: undefined,
operator: undefined,
threshold: "",
threshold: '',
silenceCycle: undefined,
contactId: undefined,
},
units: "",
units: '',
itemOptions: [],
typeOptions: [
{
label: "Server",
value: "Server"
label: 'Server',
value: 'Server',
},
{
label: "Database",
value: "Database"
label: 'Database',
value: 'Database',
},
{
label: "E-MAIL",
value: "Email"
label: 'E-MAIL',
value: 'Email',
},
],
sourceOptions: [],
operatorOptions: [
{
label: ">",
value: ">"
label: '>',
value: '>',
},
{
label: "<",
value: "<"
label: '<',
value: '<',
},
{
label: ">=",
value: ">="
label: '>=',
value: '>=',
},
{
label: "<=",
value: "<="
label: '<=',
value: '<=',
},
{
label: "==",
value: "=="
label: '==',
value: '==',
},
],
silenceCyclerOptions: [
{
label: "5 minutes",
value: 300
label: '5 minutes',
value: 300,
},
{
label: "15 minutes",
value: 900
label: '15 minutes',
value: 900,
},
{
label: "30 minutes",
value: 1800
label: '30 minutes',
value: 1800,
},
{
label: "60 minutes",
value: 3600
label: '60 minutes',
value: 3600,
},
{
label: "3 hours",
value: 10800
label: '3 hours',
value: 10800,
},
{
label: "6 hours",
value: 21600
label: '6 hours',
value: 21600,
},
{
label: "12 hours",
value: 43200
label: '12 hours',
value: 43200,
},
{
label: "24 hours",
value: 86400
}
label: '24 hours',
value: 86400,
},
],
contactGroupOptions: [],
rules: {
sourceType: [
{ required: true, message: 'Please select a sourceType', trigger: 'change'},
],
sourceId: [
{ required: true, message: 'Please select a source', trigger: 'change'},
],
name: [
{ required: true, message: 'Please input alarmRule name'},
],
itemId: [
{ required: true, message: 'Please select a monitorItem', trigger: 'change'},
],
operator: [
{ required: true, message: 'Please select a logicSymbol', trigger: 'change'},
],
threshold: [
{ required: true, message: 'Please input threshold'},
],
silenceCycle: [
{ required: true, message: 'Please select a silenceCycle', trigger: 'change'},
],
contactId: [
{ required: true, message: 'Please select a contactGroup', trigger: 'change'},
],
}
sourceType: [{ required: true, message: 'Please select a sourceType', trigger: 'change' }],
sourceId: [{ required: true, message: 'Please select a source', trigger: 'change' }],
name: [{ required: true, message: 'Please input alarmRule name' }],
itemId: [{ required: true, message: 'Please select a monitorItem', trigger: 'change' }],
operator: [{ required: true, message: 'Please select a logicSymbol', trigger: 'change' }],
threshold: [{ required: true, message: 'Please input threshold' }],
silenceCycle: [{ required: true, message: 'Please select a silenceCycle', trigger: 'change' }],
contactId: [{ required: true, message: 'Please select a contactGroup', trigger: 'change' }],
},
}
},
mounted() {
console.log(this.currServer);
console.log(this.currServer)
this.sourceOptions = this.serverList
},
watch: {
@ -255,7 +229,7 @@ export default {
},
methods: {
onCancel() {
this.$emit("onCancel")
this.$emit('onCancel')
this.resetForm()
},
onItemChange(val, option) {
@ -266,20 +240,20 @@ export default {
this.$refs.al_ruleForm.validate((valid) => {
if (valid) {
let params = {
silenceCycle:this.form.silenceCycle,
contactId:this.form.contactId,
sourceId:this.form.sourceId,
sourceType:this.form.sourceType,
itemId:this.form.itemId.key,
silenceCycle: this.form.silenceCycle,
contactId: this.form.contactId,
sourceId: this.form.sourceId,
sourceType: this.form.sourceType,
itemId: this.form.itemId.key,
rule: {
name: this.form.itemId.label,
operator: this.form.operator,
threshold: this.form.threshold,
units: this.units,
},
name: this.form.name
name: this.form.name,
}
this.$emit("onCanonSavecel", params)
this.$emit('onCanonSavecel', params)
this.resetForm()
}
})
@ -289,42 +263,42 @@ export default {
this.units = option.data.props.units
},
getItems(val) {
getAction("/alarmRule/getItems", {sourceName:val}).then(res => {
getAction('/alarmRule/getItems', { sourceName: val }).then((res) => {
if (res.success) {
this.itemOptions = res.result.map(item => {
this.itemOptions = res.result.map((item) => {
return {
label: item.name,
value: item.itemId,
units:item.units
units: item.units,
}
})
} else {
this.$message.warning("This operation fails. Contact your system administrator")
this.$message.warning('This operation fails. Contact your system administrator')
}
})
},
resetForm() {
this.$refs.al_ruleForm.resetFields();
this.form= {
this.$refs.al_ruleForm.resetFields()
this.form = {
sourceType: undefined,
sourceId: undefined,
name: "",
name: '',
itemId: undefined,
operator: undefined,
threshold: "",
threshold: '',
silenceCycle: undefined,
contactId: undefined,
}
this.sourceOptions =[]
this.sourceOptions = []
this.itemOptions = []
this.units = ""
}
this.units = ''
},
},
}
</script>
<style lang="less" scoped>
/deep/.ant-modal-title{
/deep/.ant-modal-title {
letter-spacing: 1px;
}
.operators {
@ -344,7 +318,7 @@ export default {
}
}
}
.ant-select-dropdown-content{
.ant-select-dropdown-content {
position: relative;
background: #03353f;
}