feat: 报警配置表单提交

src/api/message/message.ts

@@ -15,14 +15,14 @@ export interface AlarmConfigForm {
   pushChannel: string | number[];
   pushOccasions?: number[];
   pushPhaseVOList: PushPhaseVOList[];
-  creator: string;
+  creator?: string;
 }
 
 export interface PushPhaseVOList {
   pushPhase: number;
   recipientType: number | undefined;
-  userGroupVOList?: UserGroupVOItem[] | null;
-  customUserList?: CustomUserItem[] | null;
+  userGroupList?: UserGroupVOItem[] | number[] | null;
+  customUserList?: CustomUserItem[] | number[] | null;
   content?: string;
 }
 

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

@@ -67,13 +67,18 @@
                       <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[])"
+                          :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[])"
                           :disabled="disableAll"
+                          @submit-with-form="
+                            handlePhaseSubmit(
+                              submitConfigForm.pushPhaseVOList.find(
+                                (it) => it.pushPhase === +phase,
+                              )!,
+                              $event,
+                            )
+                          "
                         />
                       </div>
                       <el-form-item label="自定义内容：">
@@ -86,11 +91,7 @@
                           resize="none"
                           style="width: 357px"
                           :autosize="{ minRows: 5, maxRows: 5 }"
-                          :placeholder="
-                            '您好，智能检测到该车间发生【' +
-                            AlarmTypes.find((it) => it.id === alarmConfigForm.violationType)?.name +
-                            '】违规问题，请及时关注并前往处理！'
-                          "
+                          :placeholder="remark"
                           show-word-limit
                           type="textarea"
                         />
@@ -107,7 +108,7 @@
         </el-form>
         <div style="text-align: right; margin-right: 32px">
           <el-button :disabled="disableAll" @click="router.back()"> 取 消 </el-button>
-          <el-button :disabled="disableAll" type="primary" @click="submitForm(formRef)">
+          <el-button :disabled="disableAll" type="primary" @click="debSubmitForm(formRef)">
             确 定
           </el-button>
         </div>
@@ -129,20 +130,21 @@
     ElCheckboxGroup,
     ElCheckbox,
     ElInput,
+    ElMessage,
     FormInstance,
     FormRules,
   } from 'element-plus';
-  import { ref, watch, onMounted } from 'vue';
+  import { ref, watch, onMounted, computed } from 'vue';
   import { useUserStore } from '@/store/modules/user';
   import { useRouter, useRoute } from 'vue-router';
   import {
     getAlarmConfigDetail,
     getExistingAlarmType,
     getDevMode,
-    // addAlarmConfig,
-    // editAlarmConfig,
+    addAlarmConfig,
+    editAlarmConfig,
     type AlarmConfigForm,
-    // type PushPhaseVOList,
+    type PushPhaseVOList,
     // type UserGroupVOItem,
     // type CustomUserItem,
     type AvailableAlarmType,
@@ -156,6 +158,7 @@
     ALARMPHASE_MAP,
   } from './types';
   import { type userGroupVOList, type customUserList } from '../components/PushObject.vue';
+  import _ from 'lodash-es';
 
   const useUser = useUserStore();
   const router = useRouter();
@@ -163,6 +166,14 @@
 
   const AlarmTypes = ref<AvailableAlarmType[]>([]);
 
+  const remark = computed(() => {
+    return (
+      '您好，智能检测到该车间发生【' +
+      AlarmTypes.value.find((it) => it.id === alarmConfigForm.value.violationType)?.name +
+      '】违规问题，请及时关注并前往处理！'
+    );
+  });
+
   const alarmConfigForm = ref<AlarmConfigForm>({
     violationType: undefined,
     violationLevel: '',
@@ -172,13 +183,22 @@
     creator: useUser.info.nickname,
   });
 
+  const submitConfigForm = ref<AlarmConfigForm>({
+    alarmMessageId: undefined,
+    violationType: undefined,
+    violationLevel: '',
+    pushChannel: [],
+    pushPhaseVOList: [],
+  });
+
   // 获取报警配置详情
   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.pushPhaseVOList = _.cloneDeep(res.pushPhaseVOList);
+      submitConfigForm.value.pushPhaseVOList = _.cloneDeep(res.pushPhaseVOList);
       alarmConfigForm.value.pushOccasions = res.pushPhaseVOList.map((it) => it.pushPhase);
 
       // 获取的配置填入违规类型
@@ -201,6 +221,10 @@
     });
   });
 
+  if (!route.query.operationType) {
+    router.back();
+  }
+
   switch (route.query.operationType) {
     case '1':
       formType.value = '新建';
@@ -231,6 +255,11 @@
             recipientType: undefined,
             content: '',
           });
+          submitConfigForm.value.pushPhaseVOList.push({
+            pushPhase: occasion,
+            recipientType: undefined,
+            content: '',
+          });
         }
       });
       alarmConfigForm.value.pushPhaseVOList.forEach((vo) => {
@@ -239,6 +268,10 @@
             alarmConfigForm.value.pushPhaseVOList.findIndex((it) => it.pushPhase === vo.pushPhase),
             1,
           );
+          submitConfigForm.value.pushPhaseVOList.splice(
+            submitConfigForm.value.pushPhaseVOList.findIndex((it) => it.pushPhase === vo.pushPhase),
+            1,
+          );
         }
       });
     },
@@ -254,28 +287,82 @@
     pushPhaseVOList: [{ required: true, message: '请选择推送人员', trigger: 'change' }],
   });
 
+  const handlePhaseSubmit = (phaseForm: PushPhaseVOList, childValue) => {
+    phaseForm.recipientType = childValue.recipientType;
+    switch (childValue.recipientType) {
+      case 1:
+        delete phaseForm.userGroupList;
+        delete phaseForm.customUserList;
+        break;
+      case 2:
+        delete phaseForm.customUserList;
+        phaseForm.userGroupList = childValue.userGroupList;
+        break;
+      case 3:
+        delete phaseForm.userGroupList;
+        phaseForm.customUserList = childValue.customUserList;
+        break;
+    }
+  };
+
   // 提交表单
   const submitForm = async (formEl: FormInstance | undefined) => {
     if (!formEl) return;
-    await formEl.validate((valid, fields) => {
+    let formValid = false;
+    formEl.validate((valid, fields) => {
       if (valid) {
-        let validArr: boolean[] = [];
-        for (let i = 0; i < alarmConfigForm.value.pushPhaseVOList?.length; i++) {
-          pushObjectRef.value[i].submitForm().then((valid) => {
-            validArr.push(valid);
+        formValid = true;
+        const fns = pushObjectRef.value.map((x) => {
+          return x.validateForm();
+        });
+        Promise.all(fns)
+          .then(() => {
+            submitConfigForm.value.violationLevel = alarmConfigForm.value.violationLevel;
+            submitConfigForm.value.pushChannel = alarmConfigForm.value.pushChannel;
+            alarmConfigForm.value.pushPhaseVOList.forEach((vo) => {
+              submitConfigForm.value.pushPhaseVOList.find(
+                (it) => it.pushPhase === vo.pushPhase,
+              )!.content = vo.content || remark.value;
+            });
+            switch (route.query.operationType) {
+              case '1':
+                delete submitConfigForm.value.alarmMessageId;
+                submitConfigForm.value.violationType = alarmConfigForm.value.violationType;
+                addAlarmConfig(submitConfigForm.value)
+                  .then(() => {
+                    ElMessage.success('新建成功');
+                    router.back();
+                  })
+                  .catch((e) => {
+                    ElMessage.error('新建失败', e);
+                  });
+                break;
+              case '2':
+                delete submitConfigForm.value.violationType;
+                submitConfigForm.value.alarmMessageId = +route.query.alarmConfigId!;
+                editAlarmConfig(submitConfigForm.value)
+                  .then(() => {
+                    ElMessage.success('编辑成功');
+                    router.back();
+                  })
+                  .catch((e) => {
+                    ElMessage.error('编辑失败', e);
+                  });
+                break;
+              default:
+                break;
+            }
+            console.log(submitConfigForm.value);
+          })
+          .catch((e) => {
+            console.log('表单校验未通过', e);
           });
-        }
-        if (validArr.some((it) => it === false)) {
-          console.log('error submit!');
-        } else {
-          // TODO 提交表单
-          console.log('submit');
-        }
       } else {
-        console.log('error submit!', fields);
+        console.log('表单校验未通过', fields);
       }
     });
   };
+  const debSubmitForm = _.debounce(submitForm, 500);
 </script>
 
 <style scoped lang="scss">

src/views/message/alarmMessages/alarmMessages.vue

@@ -106,7 +106,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref } from 'vue';
+  import { ref, onMounted } from 'vue';
   import SearchBar from './components/SearchBar.vue';
   import { useAlarmDataList } from './hook/index';
   import { storeToRefs } from 'pinia';
@@ -148,6 +148,10 @@
     currentPage.value = newCurrentPage;
     getAlarmData();
   };
+
+  onMounted(() => {
+    getAlarmData();
+  });
 </script>
 
 <style lang="scss" scoped>

src/views/message/components/PushObject.vue

@@ -136,6 +136,7 @@
     customUserList?: customUserList[];
     disabled?: boolean;
   }>();
+  const emit = defineEmits(['submitWithForm']);
   interface Options {
     userGroupId?: number;
     name?: string;
@@ -159,6 +160,21 @@
   const submitForm = () => {
     return ruleFormRef.value!.validate(() => {});
   };
+  const validateForm = () => {
+    return new Promise((resolve, reject) => {
+      ruleFormRef
+        .value!.validate(() => {})
+        .then((valid) => {
+          if (valid) {
+            const res = getChildValue();
+            emit('submitWithForm', res);
+            resolve(() => {});
+          } else {
+            reject(new Error('error submit!'));
+          }
+        });
+    });
+  };
   const getChildValue = () => {
     return {
       recipientType: ruleForm.recipientType,
@@ -193,6 +209,7 @@
   };
   defineExpose({
     submitForm,
+    validateForm,
     getChildValue,
   });
   onMounted(() => {