CN-1407 fix: Detections-Policies-Create Event Policy模块下，添加取消按钮

src/assets/css/components/views/detections/detection-create/detection-form-setting.scss

@@ -194,12 +194,13 @@
   }
 }
 
-.form-setting__btn, .form-setting__btn1 {
+.form-setting__btn, .form-setting__btn1, .policy-form__footer__btn {
   width: 100%;
   display: flex;
   justify-content: flex-end;
 
   .el-button {
+    width: 80px !important;
     height: 30px !important;
     min-height: 30px !important;
     line-height: 30px !important;
@@ -222,8 +223,15 @@
     }
   }
 }
+.policy-form__footer__btn {
+  justify-content: center;
+  margin-top: 8px;
 
-.form-setting__btn1 {
+  .btn1 {
+    margin-right: 16px;
+  }
+}
+.form-setting__btn1, .policy-form__footer__btn {
   .el-button {
     padding: 0 11px !important;
   }

src/assets/css/components/views/detections/detection-create/detection-form.scss

@@ -10,9 +10,9 @@
   }
 
   .detection-form-content {
-    height: 100%;
+    height: calc(100% - 92px);
     overflow: scroll;
-    padding-bottom: 40px;
+    padding-bottom: 20px;
 
     .detection-form-collapse {
       margin-top: 20px;
@@ -130,6 +130,12 @@
           }
         }
       }
+
+      .policy-form-trigger {
+        .el-collapse-item__content {
+          padding-bottom: 0 !important;
+        }
+      }
     }
 
     .el-input--mini, .el-input--mini .el-input__inner {
@@ -143,4 +149,13 @@
     padding-bottom: 20px;
   }
 
+  .policy-form__footer {
+    width: calc(100% + 40px);
+    height: 60px;
+    margin-left: -20px;
+    box-shadow: 0 -1px 4px 0 rgba(0,0,0,0.10);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 }

src/views/detections/detectionPolicies/PolicyForm.vue

@@ -6,8 +6,8 @@
       {{ ruleId ? $t('detection.editEventPolicies') : $t('detection.createEventPolicies') }}
     </div>
 
-    <!--第一步：General Settings-->
     <div class="detection-form-content">
+      <!--第一步：General Settings-->
       <div class="detection-form-collapse">
         <el-collapse v-model="activeNames">
           <el-collapse-item name="1">
@@ -43,7 +43,7 @@
 
       <!--第三步：Trigger-->
       <div class="detection-form-collapse">
-        <el-collapse v-model="activeNames">
+        <el-collapse v-model="activeNames" class="policy-form-trigger">
           <el-collapse-item name="3">
             <template #title>
               <div class="form-collapse-header">
@@ -136,18 +136,20 @@
                   不活跃将重置计数
                 </div>
               </el-form>
-
-              <div class="form-setting__btn1">
-                <div class="btn1">
-                  <el-button @click="createPolicy('')">{{ $t('overall.save') }}</el-button>
-                </div>
-                <el-button @click="createPolicy('enabled')">{{ $t('overall.save') }} & {{ $t('detection.create.enablePolicy') }}</el-button>
-              </div>
             </div>
           </el-collapse-item>
         </el-collapse>
       </div>
     </div>
+
+    <div class="policy-form__footer">
+      <div class="policy-form__footer__btn">
+        <div class="btn1">
+          <el-button @click="cancel">{{ $t('overall.cancel') }}</el-button>
+        </div>
+        <el-button @click="createPolicy">{{ $t('overall.save') }}</el-button>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -369,7 +371,7 @@ export default {
       }
     },
     /** 创建policy */
-    createPolicy (flag) {
+    createPolicy () {
       const settingLen = Object.keys(this.settingObj).length
       const ruleLen = Object.keys(this.ruleObj).length
 
@@ -378,9 +380,6 @@ export default {
           if (valid) {
             // 最终提交form
             const formObj = this.$_.cloneDeep({ ...this.settingObj, ruleConfig: JSON.stringify(this.ruleObj), ruleTrigger: this.triggerObj })
-            if (flag) {
-              formObj.status = 1
-            }
             // 将时间转为参数所需，如5分钟转为PT5M
             formObj.ruleTrigger.resetInterval = getDurationsTimeByType(formObj.ruleTrigger.resetInterval, formObj.ruleTrigger.resetIntervalVal)
             formObj.ruleTrigger.interval = getDurationsTimeByType(formObj.ruleTrigger.interval, formObj.ruleTrigger.intervalVal)
@@ -429,12 +428,18 @@ export default {
                     message: this.$t('tip.saveSuccess')
                   })
 
-                  this.$router.push({
+                  const { query } = this.$route
-                    path: '/detection/policy',
+                  const queryInfo = {
-                    query: {
                     pageNo: self.pageNoForTable ? Number(self.pageNoForTable) : 1,
                     t: +new Date()
                   }
+                  if (query.name && query.id) {
+                    queryInfo.ruleId = query.id
+                    queryInfo.name = this.settingObj.name
+                  }
+                  this.$router.push({
+                    path: '/detection/policy',
+                    query: queryInfo
                   })
                 } else {
                   console.error(response.data.message)
@@ -492,7 +497,134 @@ export default {
           return { flag: false, msg: this.$t('policy.dateTimeRangeSeconds') }
         }
       }
+    },
+    cancel () {
+      const { query } = this.$route
+      const queryInfo = {
+        pageNo: this.pageNoForTable ? Number(this.pageNoForTable) : 1,
+        t: +new Date()
+      }
+      if (query.name && query.id) {
+        queryInfo.ruleId = query.id
+        queryInfo.name = this.settingObj.name
+      }
+      this.$refs.form3.validate(valid => {
+        if (this.settingObj.settingNoContinue || this.ruleObj.settingNoContinue || !valid) {
+          this.$confirm(this.$t('tip.leavePage'), {
+            confirmButtonText: this.$t('tip.confirm'),
+            cancelButtonText: this.$t('overall.cancel'),
+            message: this.$t('tip.leavePageTips'),
+            title: this.$t('tip.leavePage'),
+            type: 'warning',
+            iconClass: 'width:0px;height:0px;',
+            customClass: 'del-model'
+          }).then(() => {
+            this.$router.push({
+              path: '/detection/policy',
+              query: queryInfo
+            })
+          }).catch(() => {})
+        } else {
+          this.$router.push({
+            path: '/detection/policy',
+            query: queryInfo
+          })
+        }
+      })
     }
   }
 }
 </script>
+
+<style lang="scss">
+.del-model {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 0 !important;
+  width: 480px !important;
+  height: 190px;
+
+  .el-message-box__header {
+    display: flex;
+    flex-direction: row;
+    border-bottom: 1px solid #eee;
+    height: 42px;
+    background: #F7F7F7;
+    box-shadow: 0 1px 0 0 rgba(53, 54, 54, 0.08);
+    padding-left: 20px;
+    padding-top: 14px;
+    padding-bottom: 14px;
+
+    .el-message-box__headerbtn {
+      display: flex !important;
+      flex-direction: row-reverse;
+      justify-content: center;
+      align-items: center;
+      font-size: 10px;
+      line-height: 10px;
+      padding-right: 5px !important;
+
+      i {
+        width: 10px;
+        height: 10px;
+      }
+    }
+
+    .el-message-box__title {
+      font-size: 14px !important;
+      color: #353636;
+      letter-spacing: 0;
+      font-weight: 400;
+    }
+  }
+
+  .el-message-box__content {
+    height: 96px;
+    font-size: 14px;
+    color: #353636;
+    letter-spacing: 0;
+    line-height: 22px;
+    font-weight: 400;
+    padding-top: 8px;
+    padding-right: 20px;
+    padding-left: 20px;
+
+    .el-message-box__message {
+      padding-left: 0 !important;
+      padding-right: 0 !important;
+    }
+  }
+
+  .el-message-box__btns {
+    height: 52px;
+    border-top: 1px solid #eee;
+    box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.07);
+    padding: 11px 0 12px !important;
+
+    .el-button--small {
+      padding: 8px 21px !important;
+      line-height: 12px;
+      font-family: NotoSansHans-Medium !important;
+      font-size: 12px;
+      font-weight: 500;
+      min-height: 28px;
+    }
+
+    .el-button:nth-child(1) {
+      margin-right: 20px;
+      width: 80px;
+      height: 28px;
+      color: #353636;
+    }
+
+    .el-button:nth-child(2) {
+      width: 80px;
+      height: 28px;
+      margin-right: 20px;
+      margin-left: 0 !important;
+      background-color: #2d8cf0;
+      border-color: #2d8cf0;
+    }
+  }
+}
+</style>