review：【antd】【iot】数据流转

apps/web-antd/src/api/iot/rule/scene/index.ts

@@ -3,7 +3,7 @@ import type { PageParam, PageResult } from '@vben/request';
 import { requestClient } from '#/api/request';
 
 export namespace RuleSceneApi {
-  /** IoT 场景联动规则 VO */
+  /** 场景联动规则 */
   export interface SceneRule {
     id?: number;
     name: string;
@@ -14,7 +14,7 @@ export namespace RuleSceneApi {
     createTime?: Date;
   }
 
-  /** IoT 场景联动规则触发器 */
+  /** 场景联动规则的触发器 */
   export interface Trigger {
     type?: string;
     productId?: number;
@@ -26,13 +26,13 @@ export namespace RuleSceneApi {
     conditionGroups?: TriggerConditionGroup[];
   }
 
-  /** IoT 场景联动规则触发条件组 */
+  /** 场景联动规则的触发条件组 */
   export interface TriggerConditionGroup {
     conditions?: TriggerCondition[];
     operator?: string;
   }
 
-  /** IoT 场景联动规则触发条件 */
+  /**  场景联动规则的触发条件 */
   export interface TriggerCondition {
     productId?: number;
     deviceId?: number;
@@ -42,7 +42,7 @@ export namespace RuleSceneApi {
     type?: string;
   }
 
-  /** IoT 场景联动规则动作 */
+  /** 场景联动规则的动作 */
   export interface Action {
     type?: string;
     productId?: number;
@@ -53,6 +53,7 @@ export namespace RuleSceneApi {
   }
 }
 
+// TODO @haohao：貌似下面的，和 RuleSceneApi 重复了。
 /** IoT 场景联动规则 */
 export interface IotSceneRule {
   id?: number;
@@ -135,6 +136,7 @@ export function deleteSceneRule(id: number) {
 }
 
 /** 批量删除场景联动规则 */
+// TODO @haohao：貌似用上。
 export function deleteSceneRuleList(ids: number[]) {
   return requestClient.delete('/iot/scene-rule/delete-list', {
     params: { ids: ids.join(',') },

apps/web-antd/src/views/iot/rule/data/data.ts

@@ -67,12 +67,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       title: '规则名称',
       minWidth: 150,
     },
-    {
-      field: 'productId',
-      title: '所属产品',
-      minWidth: 150,
-      slots: { default: 'product' },
-    },
     {
       field: 'description',
       title: '规则描述',
@@ -87,6 +81,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
         props: { type: DICT_TYPE.COMMON_STATUS },
       },
     },
+    // TODO @haohao：这里是【数据源】【数据目的】
     {
       field: 'sinkCount',
       title: '数据流转数',

apps/web-antd/src/views/iot/rule/data/index.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+// TODO @haohao：应该先有【规则】【目的】两个 tab；然后，在进行管理操作；类似，apps/web-antd/src/views/ai/chat/manager
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
 import { Page, useVbenModal } from '@vben/common-ui';
@@ -42,10 +43,8 @@ async function handleDelete(row: any) {
     duration: 0,
   });
   try {
-    await deleteDataRule(row.id);
+    await deleteDataRule(row.id!);
-    message.success({
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
     handleRefresh();
   } finally {
     hideLoading();

apps/web-antd/src/views/iot/rule/data/rule/components/source-config-form.vue

@@ -25,12 +25,11 @@ const formRules: any = reactive({
 });
 const formRef = ref(); // 表单 Ref
 
-// 获取上行消息方法列表
 const upstreamMethods = computed(() => {
   return Object.values(IotDeviceMessageMethodEnum).filter(
     (item) => item.upstream,
   );
-});
+}); // 获取上行消息方法列表
 
 /** 根据产品 ID 过滤设备 */
 function getFilteredDevices(productId: number) {
@@ -193,7 +192,7 @@ const columns = [
   {
     title: '操作',
     width: 80,
-    fixed: 'right' as const,
+    fixed: 'right',
   },
 ];
 
@@ -202,6 +201,8 @@ defineExpose({ validate, getData, setData });
 
 <template>
   <Form ref="formRef" :model="{ data: formData }">
+    <!-- TODO @haohao：貌似有告警。 -->
+    <!-- TODO @haohao：是不是搞成 web-antd/src/views/erp/finance/receipt/modules/item-form.vue 的做法，通过 Grid；或 apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-grade-list.vue；目的：后续 ele 通用性更好！ -->
     <Table
       :columns="columns"
       :data-source="formData"

apps/web-antd/src/views/iot/rule/data/rule/data-rule-form.vue

@@ -21,6 +21,7 @@ const emit = defineEmits(['success']);
 const formData = ref<any>();
 const sourceConfigRef = ref();
 
+// TODO @haohao：应该放到 modules
 const getTitle = computed(() => {
   return formData.value?.id
     ? $t('ui.actionTitle.edit', ['数据规则'])
@@ -40,6 +41,7 @@ const [Form, formApi] = useVbenForm({
   showDefaultActions: false,
 });
 
+// TODO @haohao：这里需要优化下，参考别的模块写法；
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     const { valid } = await formApi.validate();

apps/web-antd/src/views/iot/rule/data/rule/index.vue

@@ -12,6 +12,8 @@ import { $t } from '#/locales';
 import { useGridColumns, useGridFormSchema } from './data';
 import DataRuleForm from './data-rule-form.vue';
 
+// TODO @haohao：貌似和 apps/web-antd/src/views/iot/rule/data/index.vue 重复的。可能这个是对的。然后把 apps/web-antd/src/views/iot/rule/data/index.vue 搞成 tabs；
+
 /** IoT 数据流转规则列表 */
 defineOptions({ name: 'IotDataRule' });
 
@@ -43,9 +45,7 @@ async function handleDelete(row: any) {
   });
   try {
     await deleteDataRule(row.id);
-    message.success({
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
     handleRefresh();
   } finally {
     hideLoading();

apps/web-antd/src/views/iot/rule/data/sink/data-sink-form.vue

@@ -120,6 +120,7 @@ watch(
     <Form class="mx-4" />
     <div v-if="formData" class="mx-4 mt-4">
       <div class="mb-2 text-sm font-medium">配置信息</div>
+      <!-- TODO @haohao：下面的 form，看看有没办法，搞成 form schema 的，方便后续 ele 的迁移！ -->
       <HttpConfigForm
         v-if="IotDataSinkTypeEnum.HTTP === formData.type"
         v-model="formData.config"

apps/web-antd/src/views/iot/rule/data/sink/index.vue

@@ -12,6 +12,8 @@ import { $t } from '#/locales';
 import { useGridColumns, useGridFormSchema } from './data';
 import DataSinkForm from './data-sink-form.vue';
 
+// TODO @haohao：需要根据代码规范，在优化下这个模块。和别的模块的风格保持一致。
+
 /** IoT 数据流转目的列表 */
 defineOptions({ name: 'IotDataSink' });
 
@@ -43,9 +45,7 @@ async function handleDelete(row: any) {
   });
   try {
     await deleteDataSink(row.id);
-    message.success({
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
     handleRefresh();
   } finally {
     hideLoading();

apps/web-antd/src/views/iot/rule/databridge/index.vue

@@ -1,44 +0,0 @@
-<script lang="ts" setup>
-import { Page } from '@vben/common-ui';
-
-import { Button } from 'ant-design-vue';
-
-defineOptions({ name: 'IotRuleDataBridge' });
-</script>
-
-<template>
-  <Page description="物聯網規則引擎 - 數據橋接" title="數據橋接">
-    <div class="p-4">
-      <Button
-        danger
-        type="link"
-        target="_blank"
-        href="https://github.com/yudaocode/yudao-ui-admin-vue3/tree/master/src/views/iot/rule"
-      >
-        該功能支持 Vue3 + element-plus 版本！
-      </Button>
-      <br />
-      <Button
-        type="link"
-        target="_blank"
-        href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/iot/rule/data/rule/index.vue"
-      >
-        可參考源代碼進行遷移！
-      </Button>
-      <div class="mt-4">
-        <h3>功能說明：</h3>
-        <p>規則引擎包括：</p>
-        <ul>
-          <li>數據規則配置</li>
-          <li>數據轉發配置</li>
-          <li>場景聯動配置</li>
-        </ul>
-        <h3 class="mt-4">待實現：</h3>
-        <ul>
-          <li>⚠️ API 接口定義</li>
-          <li>⚠️ 頁面實現</li>
-        </ul>
-      </div>
-    </div>
-  </Page>
-</template>