feat: 报警配置表单提交

src/api/message/message.ts

@@ -21,25 +21,25 @@ export interface AlarmConfigForm {
 export interface PushPhaseVOList {
   pushPhase: number;
   recipientType: number | undefined;
-  userGroupList?: UserGroupVOItem[] | null;
+  userGroupVOList?: UserGroupVOItem[] | null;
   customUserList?: CustomUserItem[] | null;
   content?: string;
 }
 
 export interface UserGroupVOItem {
   userGroupId: number;
-  name: string;
-  description?: string | null;
   total?: number | null;
   operatorName?: string | null;
   operationTime?: string | null;
+  name: string;
+  description?: string | null;
 }
 
 export interface CustomUserItem {
   userId: number;
+  userLoginName: string;
   userNickname: string;
   userNumber: string;
-  userLoginName: string;
 }
 
 export const getExistingAlarmType = () => {
@@ -81,3 +81,10 @@ export const editAlarmConfig = (data: AlarmConfigForm) => {
     data,
   });
 };
+
+export const getDevMode = () => {
+  return http.request({
+    url: '/issue/getDevMode',
+    method: 'get',
+  });
+};

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

@@ -4,16 +4,23 @@
       <div class="alarm-config-rollback" @click="router.back()">
         <img src="../reportmessage/img/rollback.png" /><span>返回</span>
       </div>
-      <span>报警配置</span>
+      <span>{{ formType }}报警配置</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
+          ref="formRef"
+          :model="alarmConfigForm"
+          :rules="rules"
+          label-width="auto"
+          :disabled="disableAll"
+        >
           <el-form-item label="违规类型：" prop="violationType">
             <el-select
               class="alarm-config-input"
               v-model="alarmConfigForm.violationType"
               placeholder="请选择违规类型"
+              :disabled="disableType"
             >
               <el-option
                 v-for="item in AlarmTypes"
@@ -52,22 +59,44 @@
               v-model="alarmConfigForm.pushOccasions"
             >
               <div v-for="phase in Object.keys(ALARMPHASE_MAP)">
-                <el-checkbox :key="phase" :label="ALARMPHASE_MAP[phase]" :value="+phase">
-                </el-checkbox>
-                <div v-if="alarmConfigForm.pushPhaseVOList.some((it) => it.pushPhase === +phase)">
-                  <div class="push-occasions-card">
-                    <PushObject />
-                    <div>{{
-                      '【' +
-                      (AlarmTypes.find((it) => it.id === alarmConfigForm.violationType)?.name! ||
-                        '') +
-                      '】'
-                    }}</div>
+                <div v-if="!(phase === '2' && isDevMode)">
+                  <el-checkbox :key="phase" :label="ALARMPHASE_MAP[phase]" :value="+phase">
+                  </el-checkbox>
+                  <div v-if="alarmConfigForm.pushPhaseVOList.some((it) => it.pushPhase === +phase)">
+                    <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)!.userGroupVOList as userGroupVOList[])"
+                          :customUserList="(alarmConfigForm.pushPhaseVOList.find((it) => it.pushPhase === +phase)!.customUserList as customUserList[])"
+                          :disabled="disableAll"
+                        />
+                      </div>
+                      <el-form-item label="自定义内容：">
+                        <el-input
+                          v-model="
+                            alarmConfigForm.pushPhaseVOList.find((it) => it.pushPhase === +phase)!
+                              .content
+                          "
+                          maxlength="200"
+                          resize="none"
+                          style="width: 357px"
+                          :autosize="{ minRows: 5, maxRows: 5 }"
+                          :placeholder="
+                            '您好，智能检测到该车间发生【' +
+                            AlarmTypes.find((it) => it.id === alarmConfigForm.violationType)?.name +
+                            '】违规问题，请及时关注并前往处理！'
+                          "
+                          show-word-limit
+                          type="textarea"
+                        />
+                      </el-form-item>
+                    </div>
                   </div>
-                  <!-- <PushOccasionsCard
-                    :form="alarmConfigForm.pushPhaseVOList.find((it) => it.pushPhase === occasion.id)!"
-                    :type="AlarmTypes.find((it) => it.id === alarmConfigForm.violationType)?.label!"
-                  /> -->
                 </div>
               </div>
             </el-checkbox-group>
@@ -77,8 +106,10 @@
           </el-form-item>
         </el-form>
         <div style="text-align: right; margin-right: 32px">
-          <el-button @click="router.back()"> 取 消 </el-button>
-          <el-button type="primary" @click="submitForm(formRef)"> 确 定 </el-button>
+          <el-button :disabled="disableAll" @click="router.back()"> 取 消 </el-button>
+          <el-button :disabled="disableAll" type="primary" @click="submitForm(formRef)">
+            确 定
+          </el-button>
         </div>
       </div>
       <div class="alarm-config-example">
@@ -97,15 +128,17 @@
     ElSelect,
     ElCheckboxGroup,
     ElCheckbox,
+    ElInput,
     FormInstance,
     FormRules,
   } from 'element-plus';
-  import { ref, watch } from 'vue';
+  import { ref, watch, onMounted } from 'vue';
   import { useUserStore } from '@/store/modules/user';
   import { useRouter, useRoute } from 'vue-router';
   import {
     getAlarmConfigDetail,
     getExistingAlarmType,
+    getDevMode,
     // addAlarmConfig,
     // editAlarmConfig,
     type AlarmConfigForm,
@@ -122,6 +155,7 @@
     // AlarmPhase,
     ALARMPHASE_MAP,
   } from './types';
+  import { type userGroupVOList, type customUserList } from '../components/PushObject.vue';
 
   const useUser = useUserStore();
   const router = useRouter();
@@ -138,28 +172,52 @@
     creator: useUser.info.nickname,
   });
 
-  // 判断是否为编辑和查看
-  if (route.query.alarmConfigId) {
-    // TODO 获取报警配置详情
-    getAlarmConfigDetail(route.query.alarmConfigId).then((res) => {
+  // 获取报警配置详情
+  const getAlarmDetail = (configId) => {
+    getAlarmConfigDetail(configId).then((res) => {
       alarmConfigForm.value.violationType = res.violationType;
       alarmConfigForm.value.violationLevel = res.violationLevel;
       alarmConfigForm.value.pushChannel = JSON.parse(res.pushChannel as string);
       alarmConfigForm.value.pushPhaseVOList = res.pushPhaseVOList;
       alarmConfigForm.value.pushOccasions = res.pushPhaseVOList.map((it) => it.pushPhase);
 
+      // 获取的配置填入违规类型
       AlarmTypes.value.push({
         id: res.violationType,
         name: res.violationName,
       } as AvailableAlarmType);
     });
-  } else {
-    getExistingAlarmType().then((res) => {
-      AlarmTypes.value = res;
+  };
+
+  const pushObjectRef = ref();
+  const formType = ref('');
+  const disableType = ref(false);
+  const disableAll = ref(false);
+  const isDevMode = ref(false);
+
+  onMounted(() => {
+    getDevMode().then((res) => {
+      isDevMode.value = res;
     });
-  }
+  });
 
-  if (route.query.alarmMessageId) {
+  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(
@@ -189,18 +247,30 @@
   const formRef = ref<FormInstance>();
 
   const rules = ref<FormRules<AlarmConfigForm>>({
-    violationType: [{ required: true, message: '请选择违规类型', trigger: 'change' }],
-    violationLevel: [{ required: true, message: '请选择违规等级', trigger: 'change' }],
+    violationType: [{ required: true, message: '请选择违规类型', trigger: 'blur' }],
+    violationLevel: [{ required: true, message: '请选择违规等级', trigger: 'blur' }],
     pushChannel: [{ required: true, message: '请选择推送渠道', trigger: 'change' }],
     pushOccasions: [{ required: true, message: '请选择推送阶段', trigger: 'change' }],
     pushPhaseVOList: [{ required: true, message: '请选择推送人员', trigger: 'change' }],
   });
 
+  // 提交表单
   const submitForm = async (formEl: FormInstance | undefined) => {
     if (!formEl) return;
     await formEl.validate((valid, fields) => {
       if (valid) {
-        console.log('submit!');
+        let validArr: boolean[] = [];
+        for (let i = 0; i < alarmConfigForm.value.pushPhaseVOList?.length; i++) {
+          pushObjectRef.value[i].submitForm().then((valid) => {
+            validArr.push(valid);
+          });
+        }
+        if (validArr.some((it) => it === false)) {
+          console.log('error submit!');
+        } else {
+          // TODO 提交表单
+          console.log('submit');
+        }
       } else {
         console.log('error submit!', fields);
       }
@@ -245,8 +315,9 @@
           overflow: auto;
 
           .push-occasions-card {
-            width: 541px;
-            height: 248px;
+            padding: 10px 20px;
+            width: 572px;
+            height: 283px;
             background-color: #fafafa;
             font-size: 16px;
           }

src/views/message/components/PushObject.vue

@@ -90,179 +90,179 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, reactive, watch, watchEffect } from 'vue';
-import SelectTree from '../persongroup/components/SelectTree.vue';
-import Group from './Group.vue';
-import { recipientTypeName } from '../constant';
-import { ToPushObjectqueryUserGroupList, queryUserGroupDetail } from '../api/index';
-import type { FormInstance } from 'element-plus';
-import { GroupData } from '../persongroup/type';
-const ruleFormRef = ref<FormInstance>();
-const groupInfo = ref<boolean>(false);
-const userInfo = ref<boolean>(false);
-const disabled = ref<boolean>(false);
-interface customUserList {
-  userId: number;
-  userLoginName: string;
-  userNickname: string;
-  userNumber: string;
-}
-interface userGroupVOList {
-  userGroupId: number;
-  total: number;
-  operatorName: string;
-  operationTime: string;
-  name: string;
-  description: string;
-}
-interface UserList {
-  id: string;
-  name: string;
-  userId: number;
-}
-const selectedUser = ref<UserList[]>([]);
-interface RuleForm {
-  recipientType?: number;
-  userGroupList: number[];
-  customUserList: UserList[];
-}
-const ruleForm = reactive<RuleForm>({
-  userGroupList: [],
-  customUserList: [],
-});
-const props = defineProps<{
-  recipientType?: number;
-  userGroupList?: userGroupVOList[];
-  customUserList?: customUserList[];
-  disabled?: boolean;
-}>();
-interface Options {
-  userGroupId?: number;
-  name?: string;
-  description: string;
-  total: number;
-  operatorName: string;
-  operationTime: string;
-}
-const options = ref<Options[]>([]);
-const userGroupInfo = ref<GroupData[]>();
-const queryGroupInfo = (groupList) => {
-  groupInfo.value = true;
-  queryUserGroupDetail(groupList).then((res) => {
-    userGroupInfo.value = res.map((group) => ({
-      ...group,
-      isExpand: false,
-      isHidden: false,
-    }));
-  });
-};
-const submitForm = () => {
-  return ruleFormRef.value!.validate(() => {});
-};
-const getChildValue = () => {
-  return {
-    recipientType: ruleForm.recipientType,
-    userGroupList:
-      ruleForm.recipientType === 3
-        ? []
-        : ruleForm.recipientType === 1
-        ? []
-        : ruleForm.userGroupList.map((item) => item),
-    customUserList:
-      ruleForm.recipientType === 2
-        ? []
-        : ruleForm.recipientType === 1
-        ? []
-        : ruleForm.customUserList.map((item) => item.userId),
-  };
-};
-const handleCancle = () => {
-  userInfo.value = false;
-};
-const handleSubmit = (selectedData: UserList[]) => {
-  selectedUser.value = selectedData;
-  ruleForm.customUserList = selectedUser.value;
-  userInfo.value = false;
-};
-const formatCustomUserList = (customList: customUserList[]): UserList[] => {
-  return customList.map((item) => ({
-    id: `u${item.userId}`,
-    userId: item.userId,
-    name: `${item.userLoginName}-${item.userNickname}`,
-  }));
-};
-defineExpose({
-  submitForm,
-  getChildValue,
-});
-onMounted(() => {
-  ToPushObjectqueryUserGroupList().then((res) => {
-    options.value = res.groupVOList;
-  });
-});
-watchEffect(() => {
-  if (props.recipientType) {
-    ruleForm.recipientType = props.recipientType;
+  import { onMounted, ref, reactive, watch, watchEffect } from 'vue';
+  import SelectTree from '../persongroup/components/SelectTree.vue';
+  import Group from './Group.vue';
+  import { recipientTypeName } from '../constant';
+  import { ToPushObjectqueryUserGroupList, queryUserGroupDetail } from '../api/index';
+  import type { FormInstance } from 'element-plus';
+  import { GroupData } from '../persongroup/type';
+  const ruleFormRef = ref<FormInstance>();
+  const groupInfo = ref<boolean>(false);
+  const userInfo = ref<boolean>(false);
+  const disabled = ref<boolean>(false);
+  export interface customUserList {
+    userId: number;
+    userLoginName: string;
+    userNickname: string;
+    userNumber: string;
+  }
+  export interface userGroupVOList {
+    userGroupId: number;
+    total: number;
+    operatorName: string;
+    operationTime: string;
+    name: string;
+    description: string;
   }
-  if (props.userGroupList) {
-    ruleForm.userGroupList = props.userGroupList.map((item) => item.userGroupId);
+  interface UserList {
+    id: string;
+    name: string;
+    userId: number;
   }
-  if (props.customUserList) {
-    ruleForm.customUserList = formatCustomUserList(props.customUserList);
-    selectedUser.value = formatCustomUserList(props.customUserList);
+  const selectedUser = ref<UserList[]>([]);
+  interface RuleForm {
+    recipientType?: number;
+    userGroupList: number[];
+    customUserList: UserList[];
   }
-  if (props.disabled) {
-    disabled.value = props.disabled;
+  const ruleForm = reactive<RuleForm>({
+    userGroupList: [],
+    customUserList: [],
+  });
+  const props = defineProps<{
+    recipientType?: number;
+    userGroupList?: userGroupVOList[];
+    customUserList?: customUserList[];
+    disabled?: boolean;
+  }>();
+  interface Options {
+    userGroupId?: number;
+    name?: string;
+    description: string;
+    total: number;
+    operatorName: string;
+    operationTime: string;
   }
-});
-watch(
-  () => ruleForm.customUserList,
-  (newSelected) => {
-    selectedUser.value = newSelected;
-  },
-  { immediate: true },
-);
+  const options = ref<Options[]>([]);
+  const userGroupInfo = ref<GroupData[]>();
+  const queryGroupInfo = (groupList) => {
+    groupInfo.value = true;
+    queryUserGroupDetail(groupList).then((res) => {
+      userGroupInfo.value = res.map((group) => ({
+        ...group,
+        isExpand: false,
+        isHidden: false,
+      }));
+    });
+  };
+  const submitForm = () => {
+    return ruleFormRef.value!.validate(() => {});
+  };
+  const getChildValue = () => {
+    return {
+      recipientType: ruleForm.recipientType,
+      userGroupList:
+        ruleForm.recipientType === 3
+          ? []
+          : ruleForm.recipientType === 1
+          ? []
+          : ruleForm.userGroupList.map((item) => item),
+      customUserList:
+        ruleForm.recipientType === 2
+          ? []
+          : ruleForm.recipientType === 1
+          ? []
+          : ruleForm.customUserList.map((item) => item.userId),
+    };
+  };
+  const handleCancle = () => {
+    userInfo.value = false;
+  };
+  const handleSubmit = (selectedData: UserList[]) => {
+    selectedUser.value = selectedData;
+    ruleForm.customUserList = selectedUser.value;
+    userInfo.value = false;
+  };
+  const formatCustomUserList = (customList: customUserList[]): UserList[] => {
+    return customList.map((item) => ({
+      id: `u${item.userId}`,
+      userId: item.userId,
+      name: `${item.userLoginName}-${item.userNickname}`,
+    }));
+  };
+  defineExpose({
+    submitForm,
+    getChildValue,
+  });
+  onMounted(() => {
+    ToPushObjectqueryUserGroupList().then((res) => {
+      options.value = res.groupVOList;
+    });
+  });
+  watchEffect(() => {
+    if (props.recipientType) {
+      ruleForm.recipientType = props.recipientType;
+    }
+    if (props.userGroupList) {
+      ruleForm.userGroupList = props.userGroupList.map((item) => item.userGroupId);
+    }
+    if (props.customUserList) {
+      ruleForm.customUserList = formatCustomUserList(props.customUserList);
+      selectedUser.value = formatCustomUserList(props.customUserList);
+    }
+    if (props.disabled) {
+      disabled.value = props.disabled;
+    }
+  });
+  watch(
+    () => ruleForm.customUserList,
+    (newSelected) => {
+      selectedUser.value = newSelected;
+    },
+    { immediate: true },
+  );
 </script>
 
 <style lang="scss" scoped>
-.userGroupList {
-  margin-left: 12%;
-  width: 88%;
-  max-height: 120px;
-  padding: 12px 17px 12px 12px;
-  background: #fafafa;
-  border-radius: 4px;
-  :deep(.el-form-item) {
-    margin-bottom: 12px !important;
-  }
-  ::v-deep .el-select__selection {
-    min-height: 25px;
-    max-height: 60px;
-    overflow-y: auto;
-  }
-  span {
-    cursor: pointer;
-    margin-left: 80px;
-    font-weight: 400;
-    font-size: 10px;
-    color: #1777ff;
-    line-height: 14px;
-  }
-}
-.customUserList {
-  margin-left: 12%;
-  width: 88%;
-  max-height: 120px;
-  padding: 12px 17px 12px 12px;
-  background: #fafafa;
-  border-radius: 4px;
-  :deep(.el-form-item) {
-    margin-bottom: 12px !important;
+  .userGroupList {
+    margin-left: 12%;
+    width: 88%;
+    max-height: 120px;
+    padding: 12px 17px 12px 12px;
+    background: #fafafa;
+    border-radius: 4px;
+    :deep(.el-form-item) {
+      margin-bottom: 12px !important;
+    }
+    ::v-deep .el-select__selection {
+      min-height: 25px;
+      max-height: 60px;
+      overflow-y: auto;
+    }
+    span {
+      cursor: pointer;
+      margin-left: 80px;
+      font-weight: 400;
+      font-size: 10px;
+      color: #1777ff;
+      line-height: 14px;
+    }
   }
-  ::v-deep .el-select__selection {
-    min-height: 25px;
-    max-height: 60px;
-    overflow-y: auto;
+  .customUserList {
+    margin-left: 12%;
+    width: 88%;
+    max-height: 120px;
+    padding: 12px 17px 12px 12px;
+    background: #fafafa;
+    border-radius: 4px;
+    :deep(.el-form-item) {
+      margin-bottom: 12px !important;
+    }
+    ::v-deep .el-select__selection {
+      min-height: 25px;
+      max-height: 60px;
+      overflow-y: auto;
+    }
   }
-}
-</style>
+</style>