feat(iot)：增加 modbus 配置 100%

2026-02-14 11:02:56 +08:00
parent 38597dd19d
commit 63743b6929
3 changed files with 75 additions and 138 deletions
--- a/apps/web-antd/src/views/iot/device/device/detail/modules/modbus-config-form.vue
+++ b/apps/web-antd/src/views/iot/device/device/detail/modules/modbus-config-form.vue
@@ -13,6 +13,7 @@ import { message } from 'ant-design-vue';
 import { useVbenForm, z } from '#/adapter/form';
 import { saveModbusConfig } from '#/api/iot/device/modbus/config';
 import { ProtocolTypeEnum } from '#/api/iot/product/product';
+import { $t } from '#/locales';
 import {
  ModbusFrameFormatEnum,
  ModbusModeEnum,
@@ -78,6 +79,7 @@ const [Form, formApi] = useVbenForm({
        show: () => isClient.value, // Client 模式专有字段：端口
      },
      rules: z.number().min(1).max(65_535).optional(),
+      defaultValue: 502,
    },
    {
      fieldName: 'slaveId',
@@ -89,6 +91,7 @@ const [Form, formApi] = useVbenForm({
        max: 247,
      },
      rules: z.number().min(1, '请输入从站地址').max(247),
+      defaultValue: 1,
    },
    {
      fieldName: 'timeout',
@@ -104,6 +107,7 @@ const [Form, formApi] = useVbenForm({
        show: () => isClient.value, // Client 模式专有字段：连接超时
      },
      rules: z.number().min(1000).optional(),
+      defaultValue: 3000,
    },
    {
      fieldName: 'retryInterval',
@@ -119,6 +123,7 @@ const [Form, formApi] = useVbenForm({
        show: () => isClient.value, // Client 模式专有字段：重试间隔
      },
      rules: z.number().min(1000).optional(),
+      defaultValue: 10_000,
    },
    {
      fieldName: 'mode',
@@ -132,6 +137,7 @@ const [Form, formApi] = useVbenForm({
        show: () => isServer.value, // Server 模式专有字段：工作模式
      },
      rules: 'required',
+      defaultValue: ModbusModeEnum.POLLING,
    },
    {
      fieldName: 'frameFormat',
@@ -145,6 +151,7 @@ const [Form, formApi] = useVbenForm({
        show: () => isServer.value, // Server 模式专有字段：帧格式
      },
      rules: 'required',
+      defaultValue: ModbusFrameFormatEnum.MODBUS_TCP,
    },
    {
      fieldName: 'status',
@@ -167,16 +174,17 @@ const [Modal, modalApi] = useVbenModal({
    if (!valid) {
      return;
    }
-    // TODO @AI：这里的处理，可以参考 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/system/user/modules/form.vue 的注释风格；
    modalApi.lock();
+    // 提交表单
    const data =
      (await formApi.getValues()) as IotDeviceModbusConfigApi.ModbusConfig;
    try {
      data.deviceId = deviceId.value;
      await saveModbusConfig(data);
-      message.success('保存成功');
+      // 关闭并提示
      await modalApi.close();
      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
    } finally {
      modalApi.unlock();
    }
@@ -186,34 +194,23 @@ const [Modal, modalApi] = useVbenModal({
      formData.value = undefined;
      return;
    }
+    // 加载数据
    const data = modalApi.getData<{
      config?: IotDeviceModbusConfigApi.ModbusConfig;
      deviceId: number;
      protocolType: string;
    }>();
-    if (!data) return;
-
-    // TODO @AI：这里的处理，可以参考 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/system/user/modules/form.vue 的注释风格；
+    if (!data) {
+      return;
+    }
    deviceId.value = data.deviceId;
    protocolType.value = data.protocolType;
-
-    if (data.config && data.config.id) {
-      // 编辑模式：加载已有配置
+    if (!data.config) {
+      return;
+    }
+    // 设置到 values
    formData.value = { ...data.config };
    await formApi.setValues(formData.value);
-    } else {
-      // 新增模式：设置默认值
-      await formApi.setValues({
-        ip: '',
-        port: 502,
-        slaveId: 1,
-        timeout: 3000,
-        retryInterval: 10_000,
-        mode: ModbusModeEnum.POLLING,
-        frameFormat: ModbusFrameFormatEnum.MODBUS_TCP,
-        status: 0,
-      });
-    }
  },
 });
 </script>
--- a/apps/web-antd/src/views/iot/device/device/detail/modules/modbus-config.vue
+++ b/apps/web-antd/src/views/iot/device/device/detail/modules/modbus-config.vue
@@ -13,7 +13,7 @@ import { computed, h, onMounted, ref } from 'vue';
 import { confirm, useVbenModal } from '@vben/common-ui';
 import { DICT_TYPE } from '@vben/constants';

-import { Button, message, Tag } from 'ant-design-vue';
+import { Button, message } from 'ant-design-vue';

 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getModbusConfig } from '#/api/iot/device/modbus/config';
@@ -180,7 +180,7 @@ function usePointColumns(): VxeTableGridOptions['columns'] {
      field: 'identifier',
      title: '标识符',
      minWidth: 100,
-      slots: { default: 'identifier' },
+      cellRender: { name: 'CellTag', props: { color: 'blue' } },
    },
    {
      field: 'functionCode',
@@ -199,7 +199,7 @@ function usePointColumns(): VxeTableGridOptions['columns'] {
      field: 'rawDataType',
      title: '数据类型',
      minWidth: 90,
-      slots: { default: 'rawDataType' },
+      cellRender: { name: 'CellTag' },
    },
    { field: 'byteOrder', title: '字节序', minWidth: 80 },
    { field: 'scale', title: '缩放因子', minWidth: 80 },
@@ -314,8 +314,7 @@ onMounted(async () => {
    </ConfigDescriptions>

    <!-- 点位配置区域 -->
-    <!-- TODO @AI：这里高度一直涨，怎么限制下。 -->
-    <Grid table-title="点位配置">
+    <Grid table-title="点位配置" class="h-[600px] overflow-auto">
      <template #toolbar-tools>
        <TableAction
          :actions="[
@@ -328,14 +327,6 @@ onMounted(async () => {
          ]"
        />
      </template>
-      <!-- TODO@AI：这里可以在 data 里声明么》 -->
-      <template #identifier="{ row }">
-        <Tag color="blue">{{ row.identifier }}</Tag>
-      </template>
-      <!-- TODO@AI：这里可以在 data 里声明么》 -->
-      <template #rawDataType="{ row }">
-        <Tag>{{ row.rawDataType }}</Tag>
-      </template>
      <template #actions="{ row }">
        <TableAction
          :actions="[
--- a/apps/web-antd/src/views/iot/device/device/detail/modules/modbus-point-form.vue
+++ b/apps/web-antd/src/views/iot/device/device/detail/modules/modbus-point-form.vue
@@ -18,6 +18,7 @@ import {
  getModbusPoint,
  updateModbusPoint,
 } from '#/api/iot/device/modbus/point';
+import { $t } from '#/locales';
 import {
  getByteOrderOptions,
  IoTThingModelTypeEnum,
@@ -30,35 +31,19 @@ defineOptions({ name: 'DeviceModbusPointForm' });
 const emit = defineEmits(['success']);

 const formData = ref<IotDeviceModbusPointApi.ModbusPoint>();
-const deviceId = ref<number>(0);
-const thingModelList = ref<ThingModelData[]>([]);
-
 const getTitle = computed(() => {
  return formData.value?.id ? '编辑点位' : '新增点位';
 });
+const deviceId = ref<number>(0);
+const thingModelList = ref<ThingModelData[]>([]);

 /** 筛选属性类型的物模型 */
-// TODO @AI：这里 linter 报错：TS2367: This comparison appears to be unintentional because the types string | undefined and number have no overlap.
 const propertyList = computed(() => {
  return thingModelList.value.filter(
-    (item) => item.type === IoTThingModelTypeEnum.PROPERTY,
+    (item) => Number(item.type) === IoTThingModelTypeEnum.PROPERTY,
  );
 });

-/** 当前选中的数据类型 */
-const currentRawDataType = ref<string>('');
-
-/** 当前字节序选项（根据数据类型动态变化） */
-const currentByteOrderOptions = computed(() => {
-  if (!currentRawDataType.value) {
-    return [];
-  }
-  return getByteOrderOptions(currentRawDataType.value).map((item) => ({
-    value: item.value,
-    label: `${item.label} - ${item.description}`,
-  }));
-});
-
 /** 表单 Schema */
 function useFormSchema(): VbenFormSchema[] {
  return [
@@ -93,13 +78,18 @@ function useFormSchema(): VbenFormSchema[] {
      componentProps: {
        placeholder: '请选择物模型属性',
        showSearch: true,
-        // TODO @AI：不用这种 => 格式，看起来不够清晰。只处理这里的。
-        filterOption: (input: string, option: any) =>
-          option.label.toLowerCase().includes(input.toLowerCase()),
+        filterOption(input: string, option: any) {
+          return option.label.toLowerCase().includes(input.toLowerCase());
+        },
+      },
+      dependencies: {
+        triggerFields: [''],
+        componentProps: () => ({
          options: propertyList.value.map((item) => ({
            value: item.id,
            label: `${item.name} (${item.identifier})`,
          })),
+        }),
      },
      rules: 'required',
    },
@@ -125,11 +115,12 @@ function useFormSchema(): VbenFormSchema[] {
        min: 0,
        max: 65_535,
      },
-      rules: z.number().min(0, '请输入寄存器地址').max(65_535),
+      rules: 'required',
      suffix: () => {
-        const values = formApi.form.values;
-        const addr = values?.registerAddress;
-        if (addr === undefined || addr === null) return '';
+        const addr = formApi.form.values?.registerAddress;
+        if (addr == null) {
+          return '';
+        }
        return h(
          'span',
          { class: 'text-gray-400' },
@@ -146,7 +137,7 @@ function useFormSchema(): VbenFormSchema[] {
        min: 1,
        max: 125,
      },
-      rules: z.number().min(1, '请输入寄存器数量').max(125),
+      rules: 'required',
    },
    {
      fieldName: 'rawDataType',
@@ -167,8 +158,19 @@ function useFormSchema(): VbenFormSchema[] {
      component: 'Select',
      componentProps: {
        placeholder: '请选择字节序',
-        options: currentByteOrderOptions.value,
      },
+      dependencies: {
+        triggerFields: ['rawDataType'],
+        componentProps: (values) => ({
+          options: values.rawDataType
+            ? getByteOrderOptions(values.rawDataType).map((item) => ({
+                value: item.value,
+                label: `${item.label} - ${item.description}`,
+              }))
+            : [],
+        }),
+      },
+      rules: 'required',
    },
    {
      fieldName: 'scale',
@@ -191,6 +193,7 @@ function useFormSchema(): VbenFormSchema[] {
        step: 1000,
      },
      rules: z.number().min(100, '请输入轮询间隔'),
+      defaultValue: 5000,
    },
    {
      fieldName: 'status',
@@ -232,7 +235,6 @@ const [Form, formApi] = useVbenForm({
    // 数据类型变化：自动设置寄存器数量和字节序
    if (changedFields.includes('rawDataType')) {
      const rawDataType = await formApi.getFieldValue('rawDataType');
-      currentRawDataType.value = rawDataType || '';
      if (rawDataType) {
        // 根据数据类型自动设置寄存器数量
        const option = ModbusRawDataTypeOptions.find(
@@ -246,18 +248,6 @@ const [Form, formApi] = useVbenForm({
        if (byteOrderOptions.length > 0) {
          await formApi.setFieldValue('byteOrder', byteOrderOptions[0]!.value);
        }
-        // 更新字节序下拉选项
-        formApi.updateSchema([
-          {
-            fieldName: 'byteOrder',
-            componentProps: {
-              options: byteOrderOptions.map((item) => ({
-                value: item.value,
-                label: `${item.label} - ${item.description}`,
-              })),
-            },
-          },
-        ]);
      }
    }
  },
@@ -265,12 +255,12 @@ const [Form, formApi] = useVbenForm({

 const [Modal, modalApi] = useVbenModal({
  async onConfirm() {
-    // TODO @AI：这里的处理，可以参考 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/system/user/modules/form.vue 的注释风格；
    const { valid } = await formApi.validate();
    if (!valid) {
      return;
    }
    modalApi.lock();
+    // 提交表单
    const data =
      (await formApi.getValues()) as IotDeviceModbusPointApi.ModbusPoint;
    try {
@@ -278,9 +268,10 @@ const [Modal, modalApi] = useVbenModal({
      await (formData.value?.id
        ? updateModbusPoint(data)
        : createModbusPoint(data));
+      // 关闭并提示
      await modalApi.close();
      emit('success');
-      message.success(formData.value?.id ? '更新成功' : '创建成功');
+      message.success($t('ui.actionMessage.operationSuccess'));
    } finally {
      modalApi.unlock();
    }
@@ -288,72 +279,30 @@ const [Modal, modalApi] = useVbenModal({
  async onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      formData.value = undefined;
-      currentRawDataType.value = '';
      return;
    }
-    // TODO @AI：这里的处理，可以参考 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/system/user/modules/form.vue 的注释风格；
+    // 加载数据
    const data = modalApi.getData<{
      deviceId: number;
      id?: number;
      thingModelList: ThingModelData[];
    }>();
-    if (!data) return;
-
+    if (!data) {
+      return;
+    }
    deviceId.value = data.deviceId;
    thingModelList.value = data.thingModelList || [];
-
-    // 更新物模型属性下拉选项
-    const properties = thingModelList.value.filter(
-      (item) => item.type === IoTThingModelTypeEnum.PROPERTY,
-    );
-    formApi.updateSchema([
-      {
-        fieldName: 'thingModelId',
-        componentProps: {
-          options: properties.map((item) => ({
-            value: item.id,
-            label: `${item.name} (${item.identifier})`,
-          })),
-        },
-      },
-    ]);
-
-    if (data.id) {
-      // 编辑模式：加载数据
+    if (!data.id) {
+      return;
+    }
    modalApi.lock();
    try {
      formData.value = await getModbusPoint(data.id);
-        // 先设置 rawDataType 以便更新字节序选项
-        currentRawDataType.value = formData.value.rawDataType || '';
-        if (formData.value.rawDataType) {
-          const byteOrderOptions = getByteOrderOptions(
-            formData.value.rawDataType,
-          );
-          formApi.updateSchema([
-            {
-              fieldName: 'byteOrder',
-              componentProps: {
-                options: byteOrderOptions.map((item) => ({
-                  value: item.value,
-                  label: `${item.label} - ${item.description}`,
-                })),
-              },
-            },
-          ]);
-        }
+      // 设置到 values
      await formApi.setValues(formData.value);
    } finally {
      modalApi.unlock();
    }
-    } else {
-      // 新增模式：设置默认值
-      // TODO @AI：这个是不是在 data 里处理；
-      await formApi.setValues({
-        scale: 1,
-        pollInterval: 5000,
-        status: 0,
-      });
-    }
  },
 });
 </script>