From 88515705dcb6acf0662eba35000f069fd61b4b3c Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 18 May 2026 12:36:58 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=88iot=EF=BC=89=EF=BC=9A=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=20alert=20=E7=9A=84=E4=BB=A3=E7=A0=81=E5=AE=9E?=
 =?UTF-8?q?=E7=8E=B0=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/iot/alert/config/data.ts        | 15 +++++++++--
 .../src/views/iot/alert/config/index.vue      | 27 ++++++-------------
 .../{alert-config-form.vue => form.vue}       | 19 ++++---------
 .../src/views/iot/alert/record/data.ts        |  5 +++-
 .../src/views/iot/alert/record/index.vue      | 23 ++++++----------
 5 files changed, 38 insertions(+), 51 deletions(-)
 rename apps/web-antd/src/views/iot/alert/modules/{alert-config-form.vue => form.vue} (74%)

diff --git a/apps/web-antd/src/views/iot/alert/config/data.ts b/apps/web-antd/src/views/iot/alert/config/data.ts
index c45a95a74..87ae86c1b 100644
--- a/apps/web-antd/src/views/iot/alert/config/data.ts
+++ b/apps/web-antd/src/views/iot/alert/config/data.ts
@@ -9,6 +9,7 @@ import { getSimpleUserList } from '#/api/system/user';
 import { getRangePickerDefaultProps } from '#/utils';
 
 /** 新增/修改告警配置的表单 */
+// TODO @AI：两行=》1 行；
 export function useFormSchema(): VbenFormSchema[] {
   return [
     {
@@ -28,6 +29,7 @@ export function useFormSchema(): VbenFormSchema[] {
       },
       rules: 'required',
     },
+    // TODO @AI：vue + ep 貌似也要改成 teatarea！
     {
       fieldName: 'description',
       label: '配置描述',
@@ -56,8 +58,11 @@ export function useFormSchema(): VbenFormSchema[] {
         buttonStyle: 'solid',
         optionType: 'button',
       },
+      // TODO @AI：defaultValue 这种要枚举值哇？
+      defaultValue: 0,
       rules: 'required',
     },
+    // TODO @AI：可能 label 比较宽，需要拉长点。
     {
       fieldName: 'sceneRuleIds',
       label: '关联场景联动规则',
@@ -69,6 +74,7 @@ export function useFormSchema(): VbenFormSchema[] {
         mode: 'multiple',
         placeholder: '请选择关联的场景联动规则',
       },
+      defaultValue: [],
       rules: 'required',
     },
     {
@@ -82,6 +88,7 @@ export function useFormSchema(): VbenFormSchema[] {
         mode: 'multiple',
         placeholder: '请选择接收的用户',
       },
+      defaultValue: [],
       rules: 'required',
     },
     {
@@ -93,6 +100,7 @@ export function useFormSchema(): VbenFormSchema[] {
         mode: 'multiple',
         placeholder: '请选择接收类型',
       },
+      defaultValue: [],
       rules: 'required',
     },
   ];
@@ -155,7 +163,10 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'level',
       title: '告警级别',
       minWidth: 100,
-      slots: { default: 'level' },
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.IOT_ALERT_LEVEL },
+      },
     },
     {
       field: 'status',
@@ -170,7 +181,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'sceneRuleIds',
       title: '关联场景联动规则',
       minWidth: 150,
-      slots: { default: 'sceneRules' },
+      formatter: ({ cellValue }) => `${cellValue?.length || 0} 条`,
     },
     {
       field: 'receiveUserNames',
diff --git a/apps/web-antd/src/views/iot/alert/config/index.vue b/apps/web-antd/src/views/iot/alert/config/index.vue
index b83176369..6ba25d9c2 100644
--- a/apps/web-antd/src/views/iot/alert/config/index.vue
+++ b/apps/web-antd/src/views/iot/alert/config/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { AlertConfig } from '#/api/iot/alert/config';
+import type { AlertConfigApi } from '#/api/iot/alert/config';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 import { DICT_TYPE } from '@vben/constants';
@@ -12,7 +12,7 @@ import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteAlertConfig, getAlertConfigPage } from '#/api/iot/alert/config';
 import { $t } from '#/locales';
 
-import AlertConfigForm from '../modules/alert-config-form.vue';
+import AlertConfigForm from '../modules/form.vue';
 import { useGridColumns, useGridFormSchema } from './data';
 
 defineOptions({ name: 'IoTAlertConfig' });
@@ -33,12 +33,12 @@ function handleCreate() {
 }
 
 /** 编辑告警配置 */
-function handleEdit(row: AlertConfig) {
+function handleEdit(row: AlertConfigApi.AlertConfig) {
   formModalApi.setData(row).open();
 }
 
 /** 删除告警配置 */
-async function handleDelete(row: AlertConfig) {
+async function handleDelete(row: AlertConfigApi.AlertConfig) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
     duration: 0,
@@ -81,7 +81,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       refresh: true,
       search: true,
     },
-  } as VxeTableGridOptions<AlertConfig>,
+  } as VxeTableGridOptions<AlertConfigApi.AlertConfig>,
 });
 </script>
 
@@ -102,20 +102,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
           ]"
         />
       </template>
-      <!-- TODO @AI：可以在 data 里渲染么？应该 antd 里有例子的； -->
-      <!-- 告警级别列 -->
-      <template #level="{ row }">
-        <Tag>
-          {{ getDictLabel(DICT_TYPE.IOT_ALERT_LEVEL, row.level) }}
-        </Tag>
-      </template>
-      <!-- TODO @AI：可以在 data 里渲染么？应该 antd 里有例子的； -->
-      <!-- 关联场景联动规则列 -->
-      <template #sceneRules="{ row }">
-        <span>{{ row.sceneRuleIds?.length || 0 }} 条</span>
-      </template>
-      <!-- TODO @AI：可以在 data 里渲染么？应该 antd 里有例子的； -->
-      <!-- 接收类型列 -->
+      <!-- TODO DONE @AI：告警级别已改用 CellDict 在 data.ts 渲染 -->
+      <!-- TODO DONE @AI：关联场景联动规则计数已改用 formatter 在 data.ts 渲染 -->
+      <!-- TODO DONE @AI：接收类型是 number[] 多 Tag，CellDict 只能渲染单值，保留 slot -->
       <template #receiveTypes="{ row }">
         <Tag
           v-for="(type, index) in row.receiveTypes"
diff --git a/apps/web-antd/src/views/iot/alert/modules/alert-config-form.vue b/apps/web-antd/src/views/iot/alert/modules/form.vue
similarity index 74%
rename from apps/web-antd/src/views/iot/alert/modules/alert-config-form.vue
rename to apps/web-antd/src/views/iot/alert/modules/form.vue
index 2d41ee236..02ab5d737 100644
--- a/apps/web-antd/src/views/iot/alert/modules/alert-config-form.vue
+++ b/apps/web-antd/src/views/iot/alert/modules/form.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-// TODO @AI：是不是要简化成 form.vue？类似 system user form 的情况？
-// TODO @AI：整体风格，看看是不是要对齐下 system user form 的风格；
-import type { AlertConfig } from '#/api/iot/alert/config';
+// TODO @AI：是不是应该拿到【config/modules】里？
+import type { AlertConfigApi } from '#/api/iot/alert/config';
 
 import { computed, ref } from 'vue';
 
@@ -22,7 +21,7 @@ import { useFormSchema } from '../config/data';
 defineOptions({ name: 'IoTAlertConfigForm' });
 
 const emit = defineEmits(['success']);
-const formData = ref<AlertConfig>();
+const formData = ref<AlertConfigApi.AlertConfig>();
 const getTitle = computed(() => {
   return formData.value?.id
     ? $t('ui.actionTitle.edit', ['告警配置'])
@@ -49,7 +48,7 @@ const [Modal, modalApi] = useVbenModal({
     }
     modalApi.lock();
     // 提交表单
-    const data = (await formApi.getValues()) as AlertConfig;
+    const data = (await formApi.getValues()) as AlertConfigApi.AlertConfig;
     try {
       await (formData.value?.id
         ? updateAlertConfig(data)
@@ -68,16 +67,8 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     // 加载数据
-    const data = modalApi.getData<AlertConfig>();
+    const data = modalApi.getData<AlertConfigApi.AlertConfig>();
     if (!data || !data.id) {
-      // 新增时设置默认值
-      // TODO @AI：这里是不是不用默认值？status 在 data.ts 里默认就好了？
-      await formApi.setValues({
-        status: 0,
-        sceneRuleIds: [],
-        receiveUserIds: [],
-        receiveTypes: [],
-      });
       return;
     }
     modalApi.lock();
diff --git a/apps/web-antd/src/views/iot/alert/record/data.ts b/apps/web-antd/src/views/iot/alert/record/data.ts
index 2c5ef9a84..c91f1d003 100644
--- a/apps/web-antd/src/views/iot/alert/record/data.ts
+++ b/apps/web-antd/src/views/iot/alert/record/data.ts
@@ -101,7 +101,10 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'configLevel',
       title: '告警级别',
       minWidth: 100,
-      slots: { default: 'configLevel' },
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.IOT_ALERT_LEVEL },
+      },
     },
     {
       field: 'productId',
diff --git a/apps/web-antd/src/views/iot/alert/record/index.vue b/apps/web-antd/src/views/iot/alert/record/index.vue
index 34c5d666c..f8fe80ae3 100644
--- a/apps/web-antd/src/views/iot/alert/record/index.vue
+++ b/apps/web-antd/src/views/iot/alert/record/index.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-// TODO @AI：整体风格，是不是对齐现有的 antd 处理的：1）详情独立 modules；2）process 是不是要这样？还是做一个独立的界面出来？
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { AlertRecord } from '#/api/iot/alert/record';
+import type { AlertRecordApi } from '#/api/iot/alert/record';
 
 import { h, ref } from 'vue';
 
@@ -10,7 +9,7 @@ import { DICT_TYPE } from '@vben/constants';
 import { getDictLabel } from '@vben/hooks';
 import { IconifyIcon } from '@vben/icons';
 
-import { Button, Input, message, Modal, Popover, Tag } from 'ant-design-vue';
+import { Button, Input, message, Modal, Popover } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getAlertRecordPage, processAlertRecord } from '#/api/iot/alert/record';
@@ -25,7 +24,7 @@ function handleRefresh() {
 }
 
 /** 处理告警记录 */
-function handleProcess(row: AlertRecord) {
+function handleProcess(row: AlertRecordApi.AlertRecord) {
   const processRemark = ref('');
   Modal.confirm({
     title: '处理告警记录',
@@ -60,7 +59,8 @@ function handleProcess(row: AlertRecord) {
 }
 
 /** 查看告警记录详情 */
-function handleView(row: AlertRecord) {
+// TODO @AI：去掉 view 详情，对齐 vue3 + ep模块；
+function handleView(row: AlertRecordApi.AlertRecord) {
   const deviceMessageText =
     row.deviceMessage && typeof row.deviceMessage === 'object'
       ? JSON.stringify(row.deviceMessage, null, 2)
@@ -132,7 +132,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       refresh: true,
       search: true,
     },
-  } as VxeTableGridOptions<AlertRecord>,
+  } as VxeTableGridOptions<AlertRecordApi.AlertRecord>,
 });
 
 /** 把设备消息序列化成可读字符串 */
@@ -149,15 +149,8 @@ function stringifyDeviceMessage(deviceMessage: any) {
 <template>
   <Page auto-content-height>
     <Grid table-title="告警记录列表">
-      <!-- 告警级别列 -->
-      <!-- TODO @AI：可以在 data 里渲染么？应该 antd 里有例子的； -->
-      <template #configLevel="{ row }">
-        <Tag>
-          {{ getDictLabel(DICT_TYPE.IOT_ALERT_LEVEL, row.configLevel) }}
-        </Tag>
-      </template>
-      <!-- 设备消息列 -->
-      <!-- TODO @AI：可以在 data 里渲染么？应该 antd 里有例子的； -->
+      <!-- TODO DONE @AI：告警级别已改用 CellDict 在 data.ts 渲染 -->
+      <!-- TODO DONE @AI：设备消息是 Popover hover 看 JSON 详情，CellDict 只渲染单值文本，保留 slot -->
       <template #deviceMessage="{ row }">
         <Popover
           v-if="row.deviceMessage"