fix: 513-515,517bugfix

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

@@ -9,6 +9,7 @@
     <div class="alarm-config-content">
       <div class="alarm-config-form">
         <el-form
+          class="alarm-config-form-content"
           ref="formRef"
           :model="alarmConfigForm"
           :rules="rules"
@@ -53,13 +54,12 @@
               </el-checkbox>
             </el-checkbox-group>
           </el-form-item>
-          <el-form-item label="推送阶段：" prop="pushOccasions">
-            <div class="alarm-config-checkbox-group">
-              <!-- v-model="alarmConfigForm.pushOccasions" -->
+          <el-form-item ref="pushOccasionsRef" label="推送阶段：" prop="pushOccasions">
+            <div>
               <div v-for="phase in ALARMPHASE_LIST" :key="phase.value">
                 <div
                   v-if="
-                    !(phase.value === AlarmPhase.effects && isDevMode) &&
+                    (phase.value !== AlarmPhase.effects || isDevMode) &&
                     alarmConfigForm.pushOccasions
                   "
                 >
@@ -70,6 +70,11 @@
                     @change="handlePhaseChange(phase.value, $event)"
                   >
                   </el-checkbox>
+                  <div style="display: inline-block; margin-left: 5px; color: #8c8c8c">
+                    <el-tooltip :content="ALARMPHASE_TIPS[phase.value - 1]" placement="top-start">
+                      <el-icon size="16px"><InfoFilled /></el-icon>
+                    </el-tooltip>
+                  </div>
                   <div
                     v-if="
                       alarmConfigForm.pushPhaseVOList.some((it) => it.pushPhase === phase.value)
@@ -96,9 +101,9 @@
                       <el-form-item label="自定义内容：">
                         <el-input
                           v-model="
-                            alarmConfigForm.pushPhaseVOList.find((it) => it.pushPhase === phase.value)!
-                              .content
-                          "
+                              alarmConfigForm.pushPhaseVOList.find((it) => it.pushPhase === phase.value)!
+                                .content
+                            "
                           maxlength="200"
                           resize="none"
                           style="width: 357px"
@@ -142,10 +147,13 @@
     ElCheckboxGroup,
     ElCheckbox,
     ElInput,
+    ElTooltip,
+    ElIcon,
     ElMessage,
     FormInstance,
     FormRules,
   } from 'element-plus';
+  import { InfoFilled } from '@element-plus/icons-vue';
   import { ref, watch, onMounted, computed } from 'vue';
   import { useUserStore } from '@/store/modules/user';
   import { useRouter, useRoute } from 'vue-router';
@@ -168,6 +176,7 @@
     ALARMCHANNEL_LIST,
     AlarmPhase,
     ALARMPHASE_LIST,
+    ALARMPHASE_TIPS,
   } from './types';
   import { type userGroupVOList, type customUserList } from '../components/PushObject.vue';
   import _ from 'lodash-es';
@@ -226,7 +235,7 @@
   const formType = ref('');
   const disableType = ref(false);
   const disableAll = ref(false);
-  const isDevMode = ref(false);
+  const isDevMode = ref();
 
   onMounted(() => {
     getDevMode().then((res) => {
@@ -294,13 +303,14 @@
   );
 
   const formRef = ref<FormInstance>();
+  const pushOccasionsRef = ref();
 
   const rules = ref<FormRules<AlarmConfigForm>>({
-    violationType: [{ required: true, message: '请选择违规类型', trigger: 'blur' }],
-    violationLevel: [{ required: true, message: '请选择违规等级', trigger: 'blur' }],
+    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' }],
+    // pushPhaseVOList: [{ required: true, message: '请选择推送人员', trigger: 'change' }],
   });
 
   const handlePhaseChange = (occasion: number, e) => {
@@ -318,6 +328,7 @@
         );
       }
     }
+    pushOccasionsRef.value?.validate();
   };
 
   const handlePhaseSubmit = (phaseForm: PushPhaseVOList, childValue) => {
@@ -423,13 +434,12 @@
         border-right: 1px solid rgba(0, 0, 0, 0.06);
         overflow-y: auto;
 
-        .alarm-config-input {
-          max-width: 446px;
-        }
-
-        .alarm-config-checkbox-group {
-          max-height: 556px;
+        .alarm-config-form-content {
+          max-height: calc(100vh - 297px);
           overflow: auto;
+          .alarm-config-input {
+            max-width: 446px;
+          }
 
           .push-occasions-card {
             padding: 10px 20px;

src/views/message/alarm-config/components/AlarmExampleMobile.vue

@@ -19,52 +19,12 @@
       </div>
     </div>
     <div class="alarm-example-title"><div class="alarm-example-block"></div>详情页</div>
-    <div class="alarm-example-detail">
-      <table>
-        <tr v-for="it in ExampleData">
-          <th>{{ it.th }}</th>
-          <td>{{ it.td }}</td>
-        </tr>
-        <tr>
-          <th>问题照片</th>
-          <td>
-            <img src="@/assets/images/alarm-example-photo.png" alt="" />
-            <img src="@/assets/images/alarm-example-photo.png" alt="" />
-            <img src="@/assets/images/alarm-example-photo.png" alt="" />
-          </td>
-        </tr>
-      </table>
-    </div>
+    <AlarmExampleTable />
   </div>
 </template>
 
 <script setup lang="ts">
-  const ExampleData = [
-    {
-      th: '问题分类',
-      td: '安全帽违规',
-    },
-    {
-      th: '问题描述',
-      td: '关于问题类型的描述，大概300字以内',
-    },
-    {
-      th: '地点',
-      td: 'B26胶接车间-固化区',
-    },
-    {
-      th: '危险点负责人',
-      td: '李四',
-    },
-    {
-      th: '上报人',
-      td: '张三三',
-    },
-    {
-      th: '上报时间',
-      td: '20240315 12:00',
-    },
-  ];
+  import AlarmExampleTable from './AlarmExampleTable.vue';
 </script>
 
 <style scoped lang="scss">
@@ -130,56 +90,4 @@
       }
     }
   }
-
-  .alarm-example-detail {
-    padding: 10px 20px 0;
-    table {
-      width: 410px;
-      border-collapse: separate; /* 分开边框 */
-      border-spacing: 0; /* 消除边框间距 */
-
-      th,
-      td {
-        border-top: 1px solid rgba(0, 0, 0, 0.06);
-        border-left: 1px solid rgba(0, 0, 0, 0.06);
-        padding: 8px; /* 内边距 */
-        text-align: left; /* 文字对齐方式 */
-      }
-
-      th {
-        font-weight: 400;
-        font-size: 12px;
-        color: #606266;
-      }
-
-      td {
-        border-right: 1px solid rgba(0, 0, 0, 0.06);
-        font-weight: 400;
-        font-size: 12px;
-        color: #303133;
-        img:first-child {
-          margin-left: 0;
-        }
-        img {
-          display: inline-block;
-          margin: 0 5px;
-        }
-      }
-
-      tr:first-child th {
-        border-top-left-radius: 8px; /* 左上角圆角 */
-      }
-      tr:first-child td {
-        border-top-right-radius: 8px; /* 右上角圆角 */
-      }
-      tr:last-child th {
-        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-        border-bottom-left-radius: 8px; /* 左下角圆角 */
-      }
-      tr:last-child td {
-        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-        border-bottom-right-radius: 8px; /* 右下角圆角 */
-      }
-    }
-  }
 </style>

src/views/message/alarm-config/components/AlarmExamplePlatform.vue

@@ -18,52 +18,12 @@
       </div>
     </div>
     <div class="alarm-example-title"><div class="alarm-example-block"></div>详情页</div>
-    <div class="alarm-example-detail">
-      <table>
-        <tr v-for="it in ExampleData">
-          <th>{{ it.th }}</th>
-          <td>{{ it.td }}</td>
-        </tr>
-        <tr>
-          <th>问题照片</th>
-          <td>
-            <img src="@/assets/images/alarm-example-photo.png" alt="" />
-            <img src="@/assets/images/alarm-example-photo.png" alt="" />
-            <img src="@/assets/images/alarm-example-photo.png" alt="" />
-          </td>
-        </tr>
-      </table>
-    </div>
+    <AlarmExampleTable />
   </div>
 </template>
 
 <script setup lang="ts">
-  const ExampleData = [
-    {
-      th: '问题分类',
-      td: '安全帽违规',
-    },
-    {
-      th: '问题描述',
-      td: '关于问题类型的描述，大概300字以内',
-    },
-    {
-      th: '地点',
-      td: 'B26胶接车间-固化区',
-    },
-    {
-      th: '危险点负责人',
-      td: '李四',
-    },
-    {
-      th: '上报人',
-      td: '张三三',
-    },
-    {
-      th: '上报时间',
-      td: '20240315 12:00',
-    },
-  ];
+  import AlarmExampleTable from './AlarmExampleTable.vue';
 </script>
 
 <style scoped lang="scss">
@@ -126,56 +86,4 @@
       }
     }
   }
-
-  .alarm-example-detail {
-    padding: 10px 20px 0;
-    table {
-      width: 410px;
-      border-collapse: separate; /* 分开边框 */
-      border-spacing: 0; /* 消除边框间距 */
-
-      th,
-      td {
-        border-top: 1px solid rgba(0, 0, 0, 0.06);
-        border-left: 1px solid rgba(0, 0, 0, 0.06);
-        padding: 8px; /* 内边距 */
-        text-align: left; /* 文字对齐方式 */
-      }
-
-      th {
-        font-weight: 400;
-        font-size: 12px;
-        color: #606266;
-      }
-
-      td {
-        border-right: 1px solid rgba(0, 0, 0, 0.06);
-        font-weight: 400;
-        font-size: 12px;
-        color: #303133;
-        img:first-child {
-          margin-left: 0;
-        }
-        img {
-          display: inline-block;
-          margin: 0 5px;
-        }
-      }
-
-      tr:first-child th {
-        border-top-left-radius: 8px; /* 左上角圆角 */
-      }
-      tr:first-child td {
-        border-top-right-radius: 8px; /* 右上角圆角 */
-      }
-      tr:last-child th {
-        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-        border-bottom-left-radius: 8px; /* 左下角圆角 */
-      }
-      tr:last-child td {
-        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-        border-bottom-right-radius: 8px; /* 右下角圆角 */
-      }
-    }
-  }
 </style>

src/views/message/alarm-config/components/AlarmExampleTable.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="alarm-example-detail">
+    <table>
+      <tr v-for="it in ExampleData">
+        <th>{{ it.th }}</th>
+        <td>{{ it.td }}</td>
+      </tr>
+      <tr>
+        <th>问题照片</th>
+        <td>
+          <img src="@/assets/images/alarm-example-photo.png" alt="" />
+          <img src="@/assets/images/alarm-example-photo.png" alt="" />
+          <img src="@/assets/images/alarm-example-photo.png" alt="" />
+        </td>
+      </tr>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const ExampleData = [
+    {
+      th: '问题分类',
+      td: '安全帽违规',
+    },
+    {
+      th: '问题描述',
+      td: '关于问题类型的描述，大概300字以内',
+    },
+    {
+      th: '地点',
+      td: 'B26胶接车间-固化区',
+    },
+    {
+      th: '危险点负责人',
+      td: '李四',
+    },
+    {
+      th: '上报人',
+      td: '张三三',
+    },
+    {
+      th: '上报时间',
+      td: '2024-03-15 12:00',
+    },
+  ];
+</script>
+
+<style scoped lang="scss">
+  .alarm-example-detail {
+    padding: 10px 20px 0;
+    table {
+      width: 410px;
+      border-collapse: separate; /* 分开边框 */
+      border-spacing: 0; /* 消除边框间距 */
+
+      th,
+      td {
+        border-top: 1px solid rgba(0, 0, 0, 0.06);
+        border-left: 1px solid rgba(0, 0, 0, 0.06);
+        padding: 8px; /* 内边距 */
+        text-align: left; /* 文字对齐方式 */
+      }
+
+      th {
+        font-weight: 400;
+        font-size: 12px;
+        color: #606266;
+      }
+
+      td {
+        border-right: 1px solid rgba(0, 0, 0, 0.06);
+        font-weight: 400;
+        font-size: 12px;
+        color: #303133;
+        img:first-child {
+          margin-left: 0;
+        }
+        img {
+          display: inline-block;
+          margin: 0 5px;
+        }
+      }
+
+      tr:first-child th {
+        border-top-left-radius: 8px; /* 左上角圆角 */
+      }
+      tr:first-child td {
+        border-top-right-radius: 8px; /* 右上角圆角 */
+      }
+      tr:last-child th {
+        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+        border-bottom-left-radius: 8px; /* 左下角圆角 */
+      }
+      tr:last-child td {
+        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+        border-bottom-right-radius: 8px; /* 右下角圆角 */
+      }
+    }
+  }
+</style>

src/views/message/alarm-config/types.ts

@@ -31,3 +31,9 @@ export const ALARMPHASE_LIST = [
   { label: '问题生效后推送', value: AlarmPhase.effects },
   { label: '审核通过后推送', value: AlarmPhase.approved },
 ];
+
+export const ALARMPHASE_TIPS = [
+  '一旦系统检测到违规问题发生，立即推送给指定对象',
+  '违规问题由管理员预审确认通过后，发送给指定对象',
+  '违规问题由审核员审核确认通过后，发送给指定对象',
+];