代码结构调整

src/views/abnormalAlarm/serverMonitor/instances/createRules.vue

@@ -1,17 +1,7 @@
 <template>
   <div>
-    <a-modal 
+    <a-modal title="Add Rule" :width="845" v-model="visible" @cancel="onCancel">
-      title='Add Rule'
+      <a-form-model ref="al_ruleForm" :model="form" :rules="rules" layout="vertical">
-      :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">
@@ -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",
+          label: 'Server',
-          value: "Server"
+          value: 'Server',
         },
         {
-          label: "Database",
+          label: 'Database',
-          value: "Database"
+          value: 'Database',
         },
         {
-          label: "E-MAIL",
+          label: 'E-MAIL',
-          value: "Email"
+          value: 'Email',
         },
       ],
       sourceOptions: [],
       operatorOptions: [
         {
-          label: ">",
+          label: '>',
-          value: ">"
+          value: '>',
         },
         {
-          label: "<",
+          label: '<',
-          value: "<"
+          value: '<',
         },
         {
-          label: ">=",
+          label: '>=',
-          value: ">="
+          value: '>=',
         },
         {
-          label: "<=",
+          label: '<=',
-          value: "<="
+          value: '<=',
         },
         {
-          label: "==",
+          label: '==',
-          value: "=="
+          value: '==',
         },
       ],
       silenceCyclerOptions: [
         {
-          label: "5 minutes",
+          label: '5 minutes',
-          value: 300
+          value: 300,
         },
         {
-          label: "15 minutes",
+          label: '15 minutes',
-          value: 900
+          value: 900,
         },
         {
-          label: "30 minutes",
+          label: '30 minutes',
-          value: 1800
+          value: 1800,
         },
         {
-          label: "60 minutes",
+          label: '60 minutes',
-          value: 3600
+          value: 3600,
         },
         {
-          label: "3 hours",
+          label: '3 hours',
-          value: 10800
+          value: 10800,
         },
         {
-          label: "6 hours",
+          label: '6 hours',
-          value: 21600
+          value: 21600,
         },
         {
-          label: "12 hours",
+          label: '12 hours',
-          value: 43200
+          value: 43200,
         },
         {
-          label: "24 hours",
+          label: '24 hours',
-          value: 86400
+          value: 86400,
-        }
+        },
       ],
       contactGroupOptions: [],
       rules: {
-        sourceType: [
+        sourceType: [{ required: true, message: 'Please select a sourceType', trigger: 'change' }],
-          { 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' }],
-        sourceId: [
+        itemId: [{ required: true, message: 'Please select a monitorItem', trigger: 'change' }],
-          { required: true, message: 'Please select a source', trigger: 'change'},
+        operator: [{ required: true, message: 'Please select a logicSymbol', trigger: 'change' }],
-        ],
+        threshold: [{ required: true, message: 'Please input threshold' }],
-        name: [
+        silenceCycle: [{ required: true, message: 'Please select a silenceCycle', trigger: 'change' }],
-          { required: true, message: 'Please input alarmRule name'},
+        contactId: [{ required: true, message: 'Please select a contactGroup', trigger: 'change' }],
-        ],
+      },
-        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) {
@@ -277,9 +251,9 @@ export default {
               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,36 +263,36 @@ 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.$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.itemOptions = []
-      this.units = ""
+      this.units = ''
-    }
+    },
   },
 }
 </script>