fix: checkbox显示异常修改

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

@@ -36,45 +36,57 @@
               placeholder="请选择报警等级"
             >
               <el-option
-                v-for="item in Object.keys(ALARMLEVEL_MAP)"
-                :key="item"
-                :label="ALARMLEVEL_MAP[item]"
-                :value="+item"
+                v-for="item in ALARMLEVEL_LIST"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
             /></el-select>
           </el-form-item>
           <el-form-item label="推送渠道：" prop="pushChannel">
             <el-checkbox-group v-model="(alarmConfigForm.pushChannel as number[])">
               <el-checkbox
-                v-for="channel in Object.keys(ALARMCHANNEL_MAP)"
-                :key="channel"
-                :label="ALARMCHANNEL_MAP[channel]"
-                :value="+channel"
+                v-for="channel in ALARMCHANNEL_LIST"
+                :key="channel.value"
+                :label="channel.label"
+                :value="channel.value"
               >
               </el-checkbox>
             </el-checkbox-group>
           </el-form-item>
           <el-form-item label="推送阶段：" prop="pushOccasions">
-            <el-checkbox-group
-              class="alarm-config-checkbox-group"
-              v-model="alarmConfigForm.pushOccasions"
-            >
-              <div v-for="phase in Object.keys(ALARMPHASE_MAP)">
-                <div v-if="!(phase === '2' && isDevMode)">
-                  <el-checkbox :key="phase" :label="ALARMPHASE_MAP[phase]" :value="+phase">
+            <div class="alarm-config-checkbox-group">
+              <!-- v-model="alarmConfigForm.pushOccasions" -->
+              <div v-for="phase in ALARMPHASE_LIST" :key="phase.value">
+                <div
+                  v-if="
+                    !(phase.value === AlarmPhase.effects && isDevMode) &&
+                    alarmConfigForm.pushOccasions
+                  "
+                >
+                  <el-checkbox
+                    v-if="hasInit || route.query.operationType === '1'"
+                    :label="phase.label"
+                    :checked="alarmConfigForm.pushOccasions.includes(phase.value)"
+                    @change="handlePhaseChange(phase.value, $event)"
+                  >
                   </el-checkbox>
-                  <div v-if="alarmConfigForm.pushPhaseVOList.some((it) => it.pushPhase === +phase)">
+                  <div
+                    v-if="
+                      alarmConfigForm.pushPhaseVOList.some((it) => it.pushPhase === phase.value)
+                    "
+                  >
                     <div class="push-occasions-card">
                       <div style="height: 136px">
                         <PushObject
                           ref="pushObjectRef"
-                          :recipientType="alarmConfigForm.pushPhaseVOList.find((it) => it.pushPhase === +phase)!.recipientType"
-                          :userGroupList="(alarmConfigForm.pushPhaseVOList.find((it) => it.pushPhase === +phase)!.userGroupList as userGroupVOList[])"
-                          :customUserList="(alarmConfigForm.pushPhaseVOList.find((it) => it.pushPhase === +phase)!.customUserList as customUserList[])"
+                          :recipientType="alarmConfigForm.pushPhaseVOList.find((it) => it.pushPhase === phase.value)!.recipientType"
+                          :userGroupList="(alarmConfigForm.pushPhaseVOList.find((it) => it.pushPhase === phase.value)!.userGroupList as userGroupVOList[])"
+                          :customUserList="(alarmConfigForm.pushPhaseVOList.find((it) => it.pushPhase === phase.value)!.customUserList as customUserList[])"
                           :disabled="disableAll"
                           @submit-with-form="
                             handlePhaseSubmit(
                               submitConfigForm.pushPhaseVOList.find(
-                                (it) => it.pushPhase === +phase,
+                                (it) => it.pushPhase === phase.value,
                               )!,
                               $event,
                             )
@@ -84,7 +96,7 @@
                       <el-form-item label="自定义内容：">
                         <el-input
                           v-model="
-                            alarmConfigForm.pushPhaseVOList.find((it) => it.pushPhase === +phase)!
+                            alarmConfigForm.pushPhaseVOList.find((it) => it.pushPhase === phase.value)!
                               .content
                           "
                           maxlength="200"
@@ -100,7 +112,7 @@
                   </div>
                 </div>
               </div>
-            </el-checkbox-group>
+            </div>
           </el-form-item>
           <el-form-item label="创建人：">
             <el-input class="alarm-config-input" v-model="alarmConfigForm.creator" disabled />
@@ -151,11 +163,11 @@
   } from '@/api/message/message';
   import {
     // AlarmLevel,
-    ALARMLEVEL_MAP,
+    ALARMLEVEL_LIST,
     // AlarmChannel,
-    ALARMCHANNEL_MAP,
-    // AlarmPhase,
-    ALARMPHASE_MAP,
+    ALARMCHANNEL_LIST,
+    AlarmPhase,
+    ALARMPHASE_LIST,
   } from './types';
   import { type userGroupVOList, type customUserList } from '../components/PushObject.vue';
   import _ from 'lodash-es';
@@ -163,7 +175,7 @@
   const useUser = useUserStore();
   const router = useRouter();
   const route = useRoute();
-
+  const hasInit = ref(false);
   const AlarmTypes = ref<AvailableAlarmType[]>([]);
 
   const remark = computed(() => {
@@ -200,6 +212,7 @@
       alarmConfigForm.value.pushPhaseVOList = _.cloneDeep(res.pushPhaseVOList);
       submitConfigForm.value.pushPhaseVOList = _.cloneDeep(res.pushPhaseVOList);
       alarmConfigForm.value.pushOccasions = res.pushPhaseVOList.map((it) => it.pushPhase);
+      hasInit.value = true;
 
       // 获取的配置填入违规类型
       AlarmTypes.value.push({
@@ -219,30 +232,30 @@
     getDevMode().then((res) => {
       isDevMode.value = res;
     });
-  });
 
-  if (!route.query.operationType) {
-    router.back();
-  }
+    if (!route.query.operationType) {
+      router.back();
+    }
 
-  switch (route.query.operationType) {
-    case '1':
-      formType.value = '新建';
-      getExistingAlarmType().then((res) => {
-        AlarmTypes.value = res;
-      });
-      break;
-    case '2':
-      formType.value = '编辑';
-      disableType.value = true;
-      getAlarmDetail(route.query.alarmConfigId);
-      break;
-    case '3':
-      formType.value = '查看';
-      disableAll.value = true;
-      getAlarmDetail(route.query.alarmConfigId);
-      break;
-  }
+    switch (route.query.operationType) {
+      case '1':
+        formType.value = '新建';
+        getExistingAlarmType().then((res) => {
+          AlarmTypes.value = res;
+        });
+        break;
+      case '2':
+        formType.value = '编辑';
+        disableType.value = true;
+        getAlarmDetail(route.query.alarmConfigId);
+        break;
+      case '3':
+        formType.value = '查看';
+        disableAll.value = true;
+        getAlarmDetail(route.query.alarmConfigId);
+        break;
+    }
+  });
 
   watch(
     () => alarmConfigForm.value.pushOccasions,
@@ -275,6 +288,9 @@
         }
       });
     },
+    {
+      deep: true,
+    },
   );
 
   const formRef = ref<FormInstance>();
@@ -287,6 +303,23 @@
     pushPhaseVOList: [{ required: true, message: '请选择推送人员', trigger: 'change' }],
   });
 
+  const handlePhaseChange = (occasion: number, e) => {
+    if (!alarmConfigForm.value.pushOccasions) return;
+
+    if (e) {
+      if (!alarmConfigForm.value.pushOccasions.includes(occasion)) {
+        alarmConfigForm.value.pushOccasions.push(occasion);
+      }
+    } else {
+      if (alarmConfigForm.value.pushOccasions.includes(occasion)) {
+        alarmConfigForm.value.pushOccasions.splice(
+          alarmConfigForm.value.pushOccasions.findIndex((it) => it === occasion),
+          1,
+        );
+      }
+    }
+  };
+
   const handlePhaseSubmit = (phaseForm: PushPhaseVOList, childValue) => {
     phaseForm.recipientType = childValue.recipientType;
     switch (childValue.recipientType) {
@@ -308,10 +341,8 @@
   // 提交表单
   const submitForm = async (formEl: FormInstance | undefined) => {
     if (!formEl) return;
-    let formValid = false;
     formEl.validate((valid, fields) => {
       if (valid) {
-        formValid = true;
         const fns = pushObjectRef.value.map((x) => {
           return x.validateForm();
         });
@@ -352,7 +383,6 @@
               default:
                 break;
             }
-            console.log(submitConfigForm.value);
           })
           .catch((e) => {
             console.log('表单校验未通过', e);

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

@@ -10,7 +10,7 @@
         </div>
       </div>
       <div class="alarm-example-card-content">
-        <img src="@/assets/images/alarm-example.png" alt="" />
+        <!-- <img src="@/assets/images/alarm-example.png" alt="" /> -->
         <div class="alarm-example-card-content-time">2024年6月25日 16:45:06:342</div>
         <div class="alarm-example-card-content-tips"
           >您好，智能检测到该区域发现员工【安全帽违规】的情况，请及时关注！</div

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

@@ -4,21 +4,21 @@ export enum AlarmLevel {
   danger = 3,
 }
 
-export const ALARMLEVEL_MAP = {
-  [AlarmLevel.normal]: '一般问题',
-  [AlarmLevel.warning]: '中等问题',
-  [AlarmLevel.danger]: '严重问题',
-};
+export const ALARMLEVEL_LIST = [
+  { label: '一般问题', value: AlarmLevel.normal },
+  { label: '中等问题', value: AlarmLevel.warning },
+  { label: '严重问题', value: AlarmLevel.danger },
+];
 
 export enum AlarmChannel {
   platform = 1,
   lanxin = 2,
 }
 
-export const ALARMCHANNEL_MAP = {
-  [AlarmChannel.platform]: '平台',
-  [AlarmChannel.lanxin]: '蓝信',
-};
+export const ALARMCHANNEL_LIST = [
+  { label: '平台', value: AlarmChannel.platform },
+  { label: '蓝信', value: AlarmChannel.lanxin },
+];
 
 export enum AlarmPhase {
   occurs = 1,
@@ -26,8 +26,8 @@ export enum AlarmPhase {
   approved = 3,
 }
 
-export const ALARMPHASE_MAP = {
-  [AlarmPhase.occurs]: '问题发生时推送',
-  [AlarmPhase.effects]: '问题生效后推送',
-  [AlarmPhase.approved]: '审核通过后推送',
-};
+export const ALARMPHASE_LIST = [
+  { label: '问题发生时推送', value: AlarmPhase.occurs },
+  { label: '问题生效后推送', value: AlarmPhase.effects },
+  { label: '审核通过后推送', value: AlarmPhase.approved },
+];