feat: 报警配置页编辑输入表单

src/api/message/message.ts

@@ -0,0 +1,83 @@
+import { http } from '@/utils/http/axios';
+
+export const getAlarmConfigDetail = (params) => {
+  return http.request<AlarmConfigForm>({
+    url: `/alarmMessage/getAlarmMessageDetail?id=${params}`,
+    method: 'get',
+  });
+};
+
+export interface AlarmConfigForm {
+  alarmMessageId?: number;
+  violationType?: number;
+  violationLevel: number | string;
+  violationName?: string;
+  pushChannel: string | number[];
+  pushOccasions?: number[];
+  pushPhaseVOList: PushPhaseVOList[];
+  creator: string;
+}
+
+export interface PushPhaseVOList {
+  pushPhase: number;
+  recipientType: number | undefined;
+  userGroupList?: 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;
+}
+
+export interface CustomUserItem {
+  userId: number;
+  userNickname: string;
+  userNumber: string;
+  userLoginName: string;
+}
+
+export const getExistingAlarmType = () => {
+  return http.request<AvailableAlarmType[]>({
+    url: '/alarmMessage/queryExistingType',
+    method: 'get',
+  });
+};
+
+export interface AvailableAlarmType {
+  id: number;
+  name: string;
+  code?: string;
+  showName?: string;
+  remark?: string;
+  url?: string;
+  pushStatement?: string;
+  pushLinkPrompt?: string;
+  iconUrl?: string;
+  status?: number;
+  createdAt?: string;
+  updatedAt?: string;
+  isDeleted?: number;
+  extra?: string;
+}
+
+export const addAlarmConfig = (data: AlarmConfigForm) => {
+  return http.request({
+    url: '/alarmMessage/addAlarmMessage',
+    method: 'post',
+    data,
+  });
+};
+
+export const editAlarmConfig = (data: AlarmConfigForm) => {
+  return http.request({
+    url: '/alarmMessage/modifyAlarmMessage',
+    method: 'post',
+    data,
+  });
+};

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

@@ -18,7 +18,7 @@
               <el-option
                 v-for="item in AlarmTypes"
                 :key="item.id"
-                :label="item.label"
+                :label="item.name"
                 :value="item.id"
             /></el-select>
           </el-form-item>
@@ -29,19 +29,19 @@
               placeholder="请选择报警等级"
             >
               <el-option
-                v-for="item in AlarmLevels"
-                :key="item.id"
-                :label="item.label"
-                :value="item.id"
+                v-for="item in Object.keys(ALARMLEVEL_MAP)"
+                :key="item"
+                :label="ALARMLEVEL_MAP[item]"
+                :value="+item"
             /></el-select>
           </el-form-item>
           <el-form-item label="推送渠道：" prop="pushChannel">
-            <el-checkbox-group v-model="alarmConfigForm.pushChannel">
+            <el-checkbox-group v-model="(alarmConfigForm.pushChannel as number[])">
               <el-checkbox
-                v-for="channel in PushChannels"
-                :key="channel.id"
-                :label="channel.label"
-                :value="channel.id"
+                v-for="channel in Object.keys(ALARMCHANNEL_MAP)"
+                :key="channel"
+                :label="ALARMCHANNEL_MAP[channel]"
+                :value="+channel"
               >
               </el-checkbox>
             </el-checkbox-group>
@@ -51,16 +51,23 @@
               class="alarm-config-checkbox-group"
               v-model="alarmConfigForm.pushOccasions"
             >
-              <div v-for="occasion in PushOccasions">
-                <el-checkbox :key="occasion.id" :label="occasion.label" :value="occasion.id">
+              <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 === occasion.id)"
-                >
-                  <PushOccasionsCard
+                <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>
+                  <!-- <PushOccasionsCard
                     :form="alarmConfigForm.pushPhaseVOList.find((it) => it.pushPhase === occasion.id)!"
                     :type="AlarmTypes.find((it) => it.id === alarmConfigForm.violationType)?.label!"
-                  />
+                  /> -->
                 </div>
               </div>
             </el-checkbox-group>
@@ -82,7 +89,7 @@
 </template>
 
 <script setup lang="ts">
-  import PushOccasionsCard from './components/PushOccasionsCard.vue';
+  import PushObject from '../components/PushObject.vue';
   import AlarmExample from './components/AlarmExample.vue';
   import {
     ElForm,
@@ -93,26 +100,72 @@
     FormInstance,
     FormRules,
   } from 'element-plus';
-  import { AlarmConfigForm } from './types';
   import { ref, watch } from 'vue';
   import { useUserStore } from '@/store/modules/user';
-  import { useRouter } from 'vue-router';
+  import { useRouter, useRoute } from 'vue-router';
+  import {
+    getAlarmConfigDetail,
+    getExistingAlarmType,
+    // addAlarmConfig,
+    // editAlarmConfig,
+    type AlarmConfigForm,
+    // type PushPhaseVOList,
+    // type UserGroupVOItem,
+    // type CustomUserItem,
+    type AvailableAlarmType,
+  } from '@/api/message/message';
+  import {
+    // AlarmLevel,
+    ALARMLEVEL_MAP,
+    // AlarmChannel,
+    ALARMCHANNEL_MAP,
+    // AlarmPhase,
+    ALARMPHASE_MAP,
+  } from './types';
 
   const useUser = useUserStore();
   const router = useRouter();
-  // const route = useRoute();
+  const route = useRoute();
+
+  const AlarmTypes = ref<AvailableAlarmType[]>([]);
+
   const alarmConfigForm = ref<AlarmConfigForm>({
     violationType: undefined,
-    violationLevel: undefined,
+    violationLevel: '',
     pushChannel: [],
     pushOccasions: [],
     pushPhaseVOList: [],
     creator: useUser.info.nickname,
   });
 
+  // 判断是否为编辑和查看
+  if (route.query.alarmConfigId) {
+    // TODO 获取报警配置详情
+    getAlarmConfigDetail(route.query.alarmConfigId).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;
+    });
+  }
+
+  if (route.query.alarmMessageId) {
+  }
+
   watch(
     () => alarmConfigForm.value.pushOccasions,
     () => {
+      if (!alarmConfigForm.value.pushOccasions) return;
       alarmConfigForm.value.pushOccasions.forEach((occasion) => {
         if (!alarmConfigForm.value.pushPhaseVOList.some((it) => it.pushPhase === occasion)) {
           alarmConfigForm.value.pushPhaseVOList.push({
@@ -123,7 +176,7 @@
         }
       });
       alarmConfigForm.value.pushPhaseVOList.forEach((vo) => {
-        if (!alarmConfigForm.value.pushOccasions.some((occ) => occ === vo.pushPhase)) {
+        if (!alarmConfigForm.value.pushOccasions?.some((occ) => occ === vo.pushPhase)) {
           alarmConfigForm.value.pushPhaseVOList.splice(
             alarmConfigForm.value.pushPhaseVOList.findIndex((it) => it.pushPhase === vo.pushPhase),
             1,
@@ -142,30 +195,6 @@
     pushOccasions: [{ required: true, message: '请选择推送阶段', trigger: 'change' }],
     pushPhaseVOList: [{ required: true, message: '请选择推送人员', trigger: 'change' }],
   });
-  // 违规类型
-  const AlarmTypes = [
-    { id: 1, label: '违规类型1' },
-    { id: 2, label: '违规类型2' },
-  ];
-
-  // 报警等级
-  const AlarmLevels = [
-    { id: 1, label: '报警等级1' },
-    { id: 2, label: '报警等级2' },
-  ];
-
-  // 推送渠道
-  const PushChannels = [
-    { id: 1, label: '平台' },
-    { id: 2, label: '蓝信' },
-  ];
-
-  // 推送阶段
-  const PushOccasions = [
-    { id: 1, label: '问题发生时推送', value: {} },
-    { id: 2, label: '问题生效后推送', value: {} },
-    { id: 3, label: '审核通过后推送', value: {} },
-  ];
 
   const submitForm = async (formEl: FormInstance | undefined) => {
     if (!formEl) return;
@@ -214,6 +243,13 @@
         .alarm-config-checkbox-group {
           max-height: 556px;
           overflow: auto;
+
+          .push-occasions-card {
+            width: 541px;
+            height: 248px;
+            background-color: #fafafa;
+            font-size: 16px;
+          }
         }
       }
       .alarm-config-example {

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

@@ -15,12 +15,12 @@
     :placeholder="holder"
   />
     </el-form-item> -->
-    <div>{{ '【' + (type || '') + '】' + form.pushPhase }}</div>
+    <!-- <div>{{ '【' + (type || '') + '】' + form.pushPhase }}</div> -->
   </div>
 </template>
 
 <script setup lang="ts">
-  import { PushRecipients } from '../types';
+  // import { PushRecipients } from '../types';
   // import {
   //   ElFormItem,
   //   ElInput,
@@ -28,10 +28,10 @@
   //   FormRules,
   // } from 'element-plus';
 
-  const props = defineProps<{
-    form: PushRecipients;
-    type?: string | undefined;
-  }>();
+  // const props = defineProps<{
+  //   form: PushRecipients;
+  //   type?: string | undefined;
+  // }>();
 
   // 推送人员
   // const PushRecipientType = [

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

@@ -1,16 +1,33 @@
-export interface AlarmConfigForm {
-  violationType: number | undefined;
-  violationLevel: string | undefined;
-  pushChannel: number[];
-  pushOccasions: number[];
-  pushPhaseVOList: PushRecipients[];
-  creator: string;
+export enum AlarmLevel {
+  normal = 1,
+  warning = 2,
+  danger = 3,
 }
 
-export interface PushRecipients {
-  content: string;
-  pushPhase: number | undefined;
-  recipientType: number | undefined;
-  userGroupList?: number[];
-  customUserList?: number[];
+export const ALARMLEVEL_MAP = {
+  [AlarmLevel.normal]: '一般问题',
+  [AlarmLevel.warning]: '中等问题',
+  [AlarmLevel.danger]: '严重问题',
+};
+
+export enum AlarmChannel {
+  platform = 1,
+  lanxin = 2,
 }
+
+export const ALARMCHANNEL_MAP = {
+  [AlarmChannel.platform]: '平台',
+  [AlarmChannel.lanxin]: '蓝信',
+};
+
+export enum AlarmPhase {
+  occurs = 1,
+  effects = 2,
+  approved = 3,
+}
+
+export const ALARMPHASE_MAP = {
+  [AlarmPhase.occurs]: '问题发生时推送',
+  [AlarmPhase.effects]: '问题生效后推送',
+  [AlarmPhase.approved]: '审核通过后推送',
+};

src/views/message/alarmMessages/alarmMessages.vue

@@ -55,10 +55,10 @@
         <template #default="scope">
           <div class="operation">
             <el-tooltip class="box-item" effect="light" content="查看" placement="bottom">
-              <img src="./img/view.png" @click="handleView(scope.$index, scope.row)" />
+              <img src="./img/view.png" @click="handleView(scope.row.id)" />
             </el-tooltip>
             <el-tooltip class="box-item" effect="light" content="编辑" placement="bottom">
-              <img src="./img/edit.png" @click="handleEdit(scope.$index, scope.row)" />
+              <img src="./img/edit.png" @click="handleEdit(scope.row.id)" />
             </el-tooltip>
             <el-tooltip class="box-item" effect="light" content="删除" placement="bottom">
               <img src="./img/delete.png" @click="handleDelete(scope.row.id)" />
@@ -70,7 +70,7 @@
       <template #empty>
         <div class="emptyDiv">
           <img src="./img/empty.png" class="emptyImg" />
-          <span class="emptySpan">目前暂无数据，请<a>新建</a>报警消息</span>
+          <span class="emptySpan">目前暂无数据，请新建报警消息</span>
         </div>
       </template>
     </el-table>
@@ -108,9 +108,11 @@
 <script lang="ts" setup>
   import { ref } from 'vue';
   import SearchBar from './components/SearchBar.vue';
-  import { useAlarmDataList } from './hook/index.ts';
+  import { useAlarmDataList } from './hook/index';
   import { storeToRefs } from 'pinia';
+  import { useRouter } from 'vue-router';
 
+  const router = useRouter();
   const useAlarmDataListFun = useAlarmDataList();
   const { alarmDataList, currentPage, pageSize, totalRow } = storeToRefs(useAlarmDataListFun);
   const { getAlarmData, deleteAlarm, updateStatus } = useAlarmDataListFun;
@@ -118,13 +120,13 @@
   const deleteDialog = ref(false);
 
   const createAlarm = () => {
-    console.log(alarmDataList);
+    router.push(`/message/alarm-config?operationType=1`);
   };
-  const handleView = (index: number, row) => {
-    console.log(index, row);
+  const handleEdit = (index: number) => {
+    router.push(`/message/alarm-config?alarmConfigId=${index}&operationType=2`);
   };
-  const handleEdit = (index: number, row) => {
-    console.log(index, row);
+  const handleView = (index: number) => {
+    router.push(`/message/alarm-config?alarmConfigId=${index}&operationType=3`);
   };
 
   const deleteId = ref<number>();

src/views/message/alarmMessages/hook/index.ts

@@ -1,74 +1,76 @@
-import { alarmTableData, alarmInfoRes, alarmLevelMapping, pushChannelMapping } from '../type'
-import {getAlarmMessageList, deleteAlarmMessage, updateAlarmStatus} from '../api/index'
+import { alarmTableData, alarmInfoRes, alarmLevelMapping, pushChannelMapping } from '../type';
+import { getAlarmMessageList, deleteAlarmMessage, updateAlarmStatus } from '../api/index';
 import { reactive, ref, onMounted } from 'vue';
-import { defineStore } from "pinia";
+import { defineStore } from 'pinia';
 
 export const useAlarmDataList = defineStore('useAlarmDataList', () => {
-    
-    const alarmDataList = reactive<alarmTableData[]>([]);
-    const searchContent = ref<string>('');
-    const pageSize = ref<number>(10);
-    const currentPage = ref<number>(1);
-    const totalPage = ref<number>(0);
-    const totalRow = ref<number>(0);
+  const alarmDataList = reactive<alarmTableData[]>([]);
+  const searchContent = ref<string>('');
+  const pageSize = ref<number>(10);
+  const currentPage = ref<number>(1);
+  const totalPage = ref<number>(0);
+  const totalRow = ref<number>(0);
 
-    function getAlarmData(){
-        getAlarmMessageList({content:searchContent.value, pageNumber:currentPage.value, pageSize:pageSize.value})
-        .then((res: alarmInfoRes) => {
-            console.log('res', res);
-            if(res === null){
-                currentPage.value = 1
-                totalPage.value = 0
-                totalRow.value = 0
-                alarmDataList.length = 0;
-                return
-            }
-            alarmDataList.length = 0;
-            totalPage.value = res.totalPage
-            totalRow.value = res.totalRow
-            for (let alarmMessage of res.records){
-                alarmDataList.push({
-                    id: alarmMessage.id,
-                    alarmType: alarmMessage.violationName,
-                    alarmLevel: alarmLevelMapping[alarmMessage.violationLevel],
-                    pushChannel: alarmMessage.pushChannel.split(',').map((channel)=>pushChannelMapping[Number(channel)]),
-                    status: Boolean(alarmMessage.status),
-                    operationTime: alarmMessage.updatedAt
-                })
-            }
-        })
-    }
-
-    function deleteAlarm(id: number){
-        deleteAlarmMessage(id)
-        .then((res) => {
-            getAlarmData();
-        })
-    }
+  function getAlarmData() {
+    getAlarmMessageList({
+      content: searchContent.value,
+      pageNumber: currentPage.value,
+      pageSize: pageSize.value,
+    }).then((res: alarmInfoRes) => {
+      console.log('res', res);
+      if (res === null) {
+        currentPage.value = 1;
+        totalPage.value = 0;
+        totalRow.value = 0;
+        alarmDataList.length = 0;
+        return;
+      }
+      alarmDataList.length = 0;
+      totalPage.value = res.totalPage;
+      totalRow.value = res.totalRow;
+      for (let alarmMessage of res.records) {
+        alarmDataList.push({
+          id: alarmMessage.id,
+          alarmType: alarmMessage.violationName,
+          alarmLevel: alarmLevelMapping[alarmMessage.violationLevel],
+          pushChannel: alarmMessage.pushChannel
+            .slice(1, -1)
+            .split(',')
+            .map((channel) => pushChannelMapping[Number(channel)]),
+          status: Boolean(alarmMessage.status),
+          operationTime: alarmMessage.updatedAt,
+        });
+      }
+    });
+  }
 
-    function updateStatus(id: number, rowStatus: boolean){
-        let status = Number(rowStatus)
-        updateAlarmStatus({id, status})
-        .then((res) => {
-            getAlarmData();
-        })
-    }
+  function deleteAlarm(id: number) {
+    deleteAlarmMessage(id).then((res) => {
+      getAlarmData();
+    });
+  }
 
-    onMounted(() => {
-        getAlarmData();
-        console.log("alarmDataList", alarmDataList);
-        
+  function updateStatus(id: number, rowStatus: boolean) {
+    let status = Number(rowStatus);
+    updateAlarmStatus({ id, status }).then((res) => {
+      getAlarmData();
     });
+  }
+
+  onMounted(() => {
+    getAlarmData();
+    console.log('alarmDataList', alarmDataList);
+  });
 
-    return {
-        alarmDataList,
-        searchContent,
-        currentPage,
-        pageSize,
-        totalPage,
-        totalRow,
-        getAlarmData,
-        deleteAlarm,
-        updateStatus
-      };
-})
+  return {
+    alarmDataList,
+    searchContent,
+    currentPage,
+    pageSize,
+    totalPage,
+    totalRow,
+    getAlarmData,
+    deleteAlarm,
+    updateStatus,
+  };
+});