处理表单在关闭时没有清空数据的问题

修改状态字段的下拉options
下拉框在前面增加label
页面布局调整

src/views/abnormalAlarm/alarmCenter/alarmRules/index.vue

@@ -2,60 +2,73 @@
   <div  style="height: 100%;">
     <div class="rules-header">
       <div>
-        <a-button class="rules-add" @click="handleAdd">
-          <img class="icon-add" src="@/assets/images/global/add.png" alt="" />
-          <span style="margin-left: 10px;">
-            Create Alert Rule
-          </span>
-        </a-button>
-        <a-select 
-          style="width: 200px;margin-left: 10px;" 
-          :value="queryParams.station" 
-          :options="stateOptions" 
-          show-arrow 
-          allowClear
-          placeholder="select..." 
-          @change="onStateChange"
-        >
-          <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
-        </a-select>
-
-        <a-select 
-          style="width: 200px;margin-left: 10px;" 
-          :value="queryParams.type"
-          :options="typeOptions" 
-          show-arrow 
-          allowClear
-          placeholder="select..." 
-          @change="onTypeChange"
-        >
-          <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
-        </a-select>
-
-        <a-select 
-          style="width: 200px;margin-left: 10px;" 
-          :value="queryParams.name"
-          :options="nameOptions" 
-          show-arrow 
-          allowClear
-          placeholder="select..." 
-          @change="onNameChange"
-        >
-          <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
-        </a-select>
-        <a-button class="search-btn" @click="onSearch">
-          <img class="icon-add" src="@/assets/images/global/search.png" alt="" />
-          <span style="margin-left: 10px;">
-            Search
-          </span>
-        </a-button>
+        <a-row type="flex" :gutter="10">
+          <a-col flex="190px">
+            <a-button class="rules-add" @click="handleAdd">
+              <img class="icon-add" src="@/assets/images/global/add.png" alt="" />
+              <span style="margin-left: 10px;">
+                Create Alert Rule
+              </span>
+            </a-button>
+          </a-col>
+          <a-col flex="300px">
+            <span class="item-label">Rule Status</span>
+            <a-select 
+              style="width: 180px;display: inline-block;" 
+              v-model="queryParams.station" 
+              :options="stateOptions" 
+              show-arrow 
+              allowClear
+              placeholder="select..." 
+              @change="onStateChange"
+            >
+              <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
+            </a-select>
+          </a-col>
+          <a-col flex="300px">
+            <span class="item-label">Source Type</span>
+            <a-select 
+              style="width: 180px;display: inline-block;" 
+              v-model="queryParams.type"
+              :options="typeOptions" 
+              show-arrow 
+              allowClear
+              placeholder="select..." 
+              @change="onTypeChange"
+            >
+              <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
+            </a-select>
+          </a-col>
+          <a-col flex="255px">
+            <span class="item-label">Source</span>
+            <a-select 
+            style="width: 180px;display: inline-block;" 
+            v-model="queryParams.name"
+              :options="nameOptions" 
+              show-arrow 
+              allowClear
+              placeholder="select..." 
+              @change="onNameChange"
+            >
+              <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
+            </a-select>
+          </a-col>
+          <a-col>
+            <a-button class="search-btn" @click="onSearch">
+              <img class="icon-add" src="@/assets/images/global/search.png" alt="" />
+              <span style="margin-left: 10px;">
+                Search
+              </span>
+            </a-button>
+          </a-col>
+        </a-row>
       </div>
-      <a-button class="rules-reset" @click="resetQuery" style="display:none">
+      <!-- <a-button class="rules-reset" @click="resetQuery" style="display:none">
         <img class="icon-add" src="@/assets/images/global/reset-pwd.png" alt="" />
         <span style="margin-left: 10px;">
           Refresh
         </span>
-      </a-button>
+      </a-button> -->
     </div>
     <div class="rules-content">
       <div class="monitor-list">
@@ -113,12 +126,11 @@
     <a-modal 
       :title="isAdd ? 'Add Rule' : 'Edit Rule'" 
       :width="845" 
-      :key= modalKey
       v-model="visible" 
       @cancel="onCancel"
     >
       <a-form-model
-        ref="ruleForm"
+        ref="al_ruleForm"
         :model="form"
         :rules="rules"
         layout="vertical"
@@ -127,7 +139,7 @@
           <a-col :span="12">
             <a-form-model-item ref="sourceType" label="Source Type" prop="sourceType">
               <a-select 
-                :value="form.sourceType" 
+                v-model="form.sourceType" 
                 :options="typeOptions" 
                 show-arrow 
                 allowClear
@@ -139,7 +151,7 @@
             </a-form-model-item>
           </a-col>
           <a-col :span="12">
-            <a-form-model-item ref="source" label="Source" prop="sourceId">
+            <a-form-model-item ref="sourceId" label="Source" prop="sourceId">
               <a-select 
                 v-model="form.sourceId" 
                 :options="sourceOptions" 
@@ -157,7 +169,7 @@
         <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" />
+              <a-input v-model="form.name" placeholder="Pleace enter the alarm rule name" />
             </a-form-model-item>
           </a-col>
           <a-col :span="12">
@@ -192,7 +204,7 @@
           </a-col>
           <a-col :span="12">
             <a-form-model-item ref="threshold" label="Threshold" prop="threshold">
-              <a-input v-model="form.threshold" :suffix="units" />
+              <a-input v-model="form.threshold" :suffix="units" placeholder="Pleace enter the threshold value" />
             </a-form-model-item>
           </a-col>
         </a-row>
@@ -248,7 +260,6 @@ export default {
   },
   data() {
     return {
-      modalKey:"",
       isAdd:true,
       ipagination:{
         current: 1,
@@ -270,11 +281,11 @@ export default {
       },
       stateOptions: [
         {
-          label: "禁用",
+          label: "Disabled",
           value: "0"
         },
         {
-          label: "启用",
+          label: "Enable",
           value: "1"
         }
       ],
@@ -296,14 +307,14 @@ export default {
       monitorList: [],
       // 表单
       form: {
-        sourceType: "",
-        sourceId: "",
+        sourceType: undefined,
+        sourceId: undefined,
         name: "",
-        itemId: "",
-        operator: "",
+        itemId: undefined,
+        operator: undefined,
         threshold: "",
-        silenceCycle: "",
-        contactId: "",
+        silenceCycle: undefined,
+        contactId: undefined,
       },
       currId:"",
       units: "",
@@ -368,28 +379,28 @@ export default {
       contactGroupOptions: [],
       rules: {
         sourceType: [
-          { required: true, message: 'Please select a sourceType'},
+          { required: true, message: 'Please select a sourceType', trigger: 'change'},
         ],
         sourceId: [
-          { required: true, message: 'Please select a source'},
+          { 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'},
+          { required: true, message: 'Please select a monitorItem', trigger: 'change'},
         ],
         operator: [
-          { required: true, message: 'Please select a logicSymbol'},
+          { required: true, message: 'Please select a logicSymbol', trigger: 'change'},
         ],
         threshold: [
           { required: true, message: 'Please input threshold'},
         ],
         silenceCycle: [
-          { required: true, message: 'Please select a silenceCycle'},
+          { required: true, message: 'Please select a silenceCycle', trigger: 'change'},
         ],
         contactId: [
-          { required: true, message: 'Please select a contactGroup'},
+          { required: true, message: 'Please select a contactGroup', trigger: 'change'},
         ],
       }
     }
@@ -482,9 +493,8 @@ export default {
       return (Math.random()+new Date().getTime()).toString(32).slice(0,8)
     },
     handleAdd() {
-      this.modalKey = this.getUid()
-      this.visible = true
       this.isAdd = true
+      this.visible = true
     },
     onSourceTypeChange(val) {
       this.form.sourceType = val
@@ -497,9 +507,14 @@ export default {
         this.sourceOptions=[]
       }
     },
-    onSourceChange(val,option) {
-      this.form.sourceId = val
-      this.getItems(val.label)
+    onSourceChange(val, option) {
+      if (val) {
+        this.form.sourceId = val
+        this.getItems(val.label)
+      } else {
+        this.form.sourceId = {}
+        this.form.itemId = undefined
+      }
     },
     getItems(val) {
       getAction("/alarmRule/getItems", {sourceName:val}).then(res => {
@@ -582,7 +597,6 @@ export default {
     },
     onCancel() {
       this.resetForm()
-      this.units = ""
       this.visible = false
     },
     editItem(id) {
@@ -611,12 +625,11 @@ export default {
           } else {
             this.$message.warning("This operation fails. Contact your system administrator")
           }
-          this.visible = true
           this.isAdd = false
           this.form.sourceType = res.result.sourceType
           this.form.sourceId = {
-            key: res.result.sourceId,
-            label: res.result.sourceName
+            key: res.result.sourceId||"",
+            label: res.result.sourceName||""
           }
           this.form.name = res.result.name
           this.form.itemId = {
@@ -629,6 +642,7 @@ export default {
           this.form.silenceCycle = res.result.silenceCycle
           this.form.contactId = res.result.contactId
           this.currId = res.result.id
+          this.visible = true
         } else {
           this.$message.warning("This operation fails. Contact your system administrator")
         }
@@ -654,14 +668,30 @@ export default {
       });
     },
     resetForm() {
-      this.$refs.ruleForm.resetFields();
-    },
+      this.$refs.al_ruleForm.resetFields();
+      this.form= {
+        sourceType: undefined,
+        sourceId: undefined,
+        name: "",
+        itemId: undefined,
+        operator: undefined,
+        threshold: "",
+        silenceCycle: undefined,
+        contactId: undefined,
+      }
+      this.sourceOptions =[]
+      this.itemOptions = []
+      this.units = ""
+    }
 
   },
 }
 </script>
 
 <style lang="less" scoped>
+.ant-row-flex{
+  flex-flow: nowrap;
+}
 .operators {
   width: 100%;
   justify-content: center;
@@ -690,12 +720,21 @@ export default {
   height: 50px;
   border-top: 1px solid rgba(13, 235, 201, 0.3);
   border-bottom: 1px solid rgba(13, 235, 201, 0.3);
-  margin: 0 0 15px 20px;
+  margin: 0 0 0px 20px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 10px;
   background: rgba(12, 235, 201, 0.05);
+  .item-label{
+    display: inline-block;
+    font-size: 16px;
+        font-family: ArialMT;
+        color: #ade6ee;
+        line-height: 32px;
+      height: 32px;
+      margin-right: 10px;
+  }
   .rules-add{
     background-color: #1397a3;
     font-family: ArialMT;
@@ -731,12 +770,12 @@ export default {
     align-content: flex-start;
     &-item{
       width: 32.76%;
-      height: 275px;
+      height: 224px;
       // margin-top: 15px;
       background-color: rgba(2, 40, 43, 0.5);
       border: solid 1px rgba(65, 111, 127, 0.5);
       position: relative;
-      margin-bottom: 15px;
+      margin-top: 15px;
       &-title{
         height: 50px;
         padding: 0 15px 0 20px;