feat: 报警配置外部表单校验

src/views/message/alarm-config/AlarmConfig.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="alarm-config-page">
     <div class="alarm-config-header">
-      <div class="alarm-config-rollback" @click="">
+      <div class="alarm-config-rollback" @click="router.back()">
         <img src="../reportmessage/img/rollback.png" /><span>返回</span>
       </div>
-      <span>新建报表配置</span>
+      <span>报警配置</span>
     </div>
     <div class="alarm-config-content">
       <div class="alarm-config-form">
         <el-form ref="formRef" :model="alarmConfigForm" :rules="rules" label-width="auto">
-          <el-form-item label="违规类型：">
+          <el-form-item label="违规类型：" prop="violationType">
             <el-select
               class="alarm-config-input"
               v-model="alarmConfigForm.violationType"
@@ -22,7 +22,7 @@
                 :value="item.id"
             /></el-select>
           </el-form-item>
-          <el-form-item label="报警等级：">
+          <el-form-item label="报警等级：" prop="violationLevel">
             <el-select
               class="alarm-config-input"
               v-model="alarmConfigForm.violationLevel"
@@ -35,7 +35,7 @@
                 :value="item.id"
             /></el-select>
           </el-form-item>
-          <el-form-item label="推送渠道：">
+          <el-form-item label="推送渠道：" prop="pushChannel">
             <el-checkbox-group v-model="alarmConfigForm.pushChannel">
               <el-checkbox
                 v-for="channel in PushChannels"
@@ -46,7 +46,7 @@
               </el-checkbox>
             </el-checkbox-group>
           </el-form-item>
-          <el-form-item label="推送阶段：">
+          <el-form-item label="推送阶段：" prop="pushOccasions">
             <el-checkbox-group
               class="alarm-config-checkbox-group"
               v-model="alarmConfigForm.pushOccasions"
@@ -68,10 +68,9 @@
           <el-form-item label="创建人：">
             <el-input class="alarm-config-input" v-model="alarmConfigForm.creator" disabled />
           </el-form-item>
-          <el-form-item> </el-form-item>
         </el-form>
         <div style="text-align: right; margin-right: 32px">
-          <el-button> 取 消 </el-button>
+          <el-button @click="router.back()"> 取 消 </el-button>
           <el-button type="primary" @click="submitForm(formRef)"> 确 定 </el-button>
         </div>
       </div>
@@ -97,9 +96,11 @@
   import { AlarmConfigForm } from './types';
   import { ref, watch } from 'vue';
   import { useUserStore } from '@/store/modules/user';
+  import { useRouter } from 'vue-router';
 
   const useUser = useUserStore();
-
+  const router = useRouter();
+  // const route = useRoute();
   const alarmConfigForm = ref<AlarmConfigForm>({
     violationType: undefined,
     violationLevel: undefined,
@@ -134,7 +135,13 @@
 
   const formRef = ref<FormInstance>();
 
-  const rules = ref<FormRules<AlarmConfigForm>>();
+  const rules = ref<FormRules<AlarmConfigForm>>({
+    violationType: [{ required: true, message: '请选择违规类型', trigger: 'change' }],
+    violationLevel: [{ required: true, message: '请选择违规等级', trigger: 'change' }],
+    pushChannel: [{ required: true, message: '请选择推送渠道', trigger: 'change' }],
+    pushOccasions: [{ required: true, message: '请选择推送阶段', trigger: 'change' }],
+    pushPhaseVOList: [{ required: true, message: '请选择推送人员', trigger: 'change' }],
+  });
   // 违规类型
   const AlarmTypes = [
     { id: 1, label: '违规类型1' },