修改

apps/web-antd/src/views/thingmodelinfo/deviceThingModelManagement/DeviceThingModelCommandModal.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { postDeviceThingModelManagementCommandPageAsync } from '#/api-client';
+import { $t } from '#/locales';
+
+defineOptions({
+  name: 'DeviceThingModelCommandModal',
+});
+
+const deviceThingModelId = ref<string>('');
+const deviceModelName = ref<string>('');
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: [],
+    showDefaultActions: false,
+  },
+  gridOptions: {
+    columns: [
+      {
+        field: 'commandName',
+        title: '指令名称',
+        minWidth: 160,
+        showOverflow: 'tooltip',
+      },
+      {
+        field: 'identifier',
+        title: '标识符',
+        minWidth: 140,
+        showOverflow: 'tooltip',
+      },
+      {
+        field: 'action',
+        title: $t('common.action'),
+        width: 200,
+        fixed: 'right',
+        slots: { default: 'action' },
+      },
+    ],
+    height: 400,
+    pagerConfig: {},
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          if (!deviceThingModelId.value) {
+            return { items: [], totalCount: 0 };
+          }
+          const { data } = await postDeviceThingModelManagementCommandPageAsync({
+            body: {
+              pageIndex: page.currentPage,
+              pageSize: page.pageSize,
+              deviceThingModelId: deviceThingModelId.value,
+            },
+          });
+          return data || { items: [], totalCount: 0 };
+        },
+      },
+    },
+  },
+});
+
+const [Modal, modalApi] = useVbenModal({
+  onOpenChange(isOpen: boolean) {
+    if (isOpen) {
+      const data = modalApi.getData<Record<string, any>>();
+      deviceThingModelId.value = data?.deviceThingModelId || '';
+      deviceModelName.value = data?.deviceModelName || '';
+      if (gridApi && gridApi.reload) {
+        gridApi.reload();
+      }
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="`指令管理 - ${deviceModelName || ''}`" class="w-[900px]">
+    <Grid>
+      <!-- 这里后续可以加 toolbar-actions：新增指令、编辑、删除等 -->
+    </Grid>
+  </Modal>
+</template>
+
+

apps/web-antd/src/views/thingmodelinfo/deviceThingModelManagement/DeviceThingModelPropertyModal.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { postDeviceThingModelManagementPropertyPageAsync } from '#/api-client';
+import { $t } from '#/locales';
+
+defineOptions({
+  name: 'DeviceThingModelPropertyModal',
+});
+
+const deviceThingModelId = ref<string>('');
+const deviceModelName = ref<string>('');
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: [],
+    showDefaultActions: false,
+  },
+  gridOptions: {
+    columns: [
+      {
+        field: 'propertyName',
+        title: '属性名称',
+        minWidth: 160,
+        showOverflow: 'tooltip',
+      },
+      {
+        field: 'identifier',
+        title: '标识符',
+        minWidth: 140,
+        showOverflow: 'tooltip',
+      },
+      {
+        field: 'dataType',
+        title: '数据类型',
+        minWidth: 120,
+        showOverflow: 'tooltip',
+      },
+      {
+        field: 'action',
+        title: $t('common.action'),
+        width: 200,
+        fixed: 'right',
+        slots: { default: 'action' },
+      },
+    ],
+    height: 400,
+    pagerConfig: {},
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          if (!deviceThingModelId.value) {
+            return { items: [], totalCount: 0 };
+          }
+          const { data } = await postDeviceThingModelManagementPropertyPageAsync({
+            body: {
+              pageIndex: page.currentPage,
+              pageSize: page.pageSize,
+              deviceThingModelId: deviceThingModelId.value,
+            },
+          });
+          return data || { items: [], totalCount: 0 };
+        },
+      },
+    },
+  },
+});
+
+const [Modal, modalApi] = useVbenModal({
+  onOpenChange(isOpen: boolean) {
+    if (isOpen) {
+      const data = modalApi.getData<Record<string, any>>();
+      deviceThingModelId.value = data?.deviceThingModelId || '';
+      deviceModelName.value = data?.deviceModelName || '';
+      if (gridApi && gridApi.reload) {
+        gridApi.reload();
+      }
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="`属性管理 - ${deviceModelName || ''}`" class="w-[900px]">
+    <Grid>
+      <!-- 这里后续可以加 toolbar-actions：新增属性、快速复制平台端物模型 -->
+    </Grid>
+  </Modal>
+</template>
+
+

apps/web-antd/src/views/thingmodelinfo/deviceThingModelManagement/index.vue

@@ -2,7 +2,7 @@
 import type { VbenFormProps } from '#/adapter/form';
 import type { VxeGridProps } from '#/adapter/vxe-table';
 
-import { h, nextTick, ref } from 'vue';
+import { h, nextTick, onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
 
 import { Page, useVbenModal } from '@vben/common-ui';
@@ -27,6 +27,9 @@ import {
   tableSchema,
 } from './schema';
 
+import DeviceThingModelPropertyModal from './DeviceThingModelPropertyModal.vue';
+import DeviceThingModelCommandModal from './DeviceThingModelCommandModal.vue';
+
 defineOptions({
   name: 'DeviceThingModelManagement',
 });
@@ -73,7 +76,9 @@ const formOptions: VbenFormProps = {
       setTimeout(async () => {
         if (gridApi && gridApi.reload) {
           try {
-            await gridApi.reload();
+            // 使用最新表单值触发查询，确保搜索关键字等一起传递
+            const latestValues = await gridApi.formApi.getValues();
+            await gridApi.reload(latestValues);
           } catch (error) {
             console.error('重新加载设备端物模型列表时出错:', error);
           }
@@ -81,6 +86,16 @@ const formOptions: VbenFormProps = {
       }, 100);
     }
   },
+  // 点击搜索按钮时触发
+  handleSubmit: async (values) => {
+    if (gridApi && gridApi.reload) {
+      try {
+        await gridApi.reload(values);
+      } catch (error) {
+        console.error('搜索设备端物模型列表失败:', error);
+      }
+    }
+  },
 };
 
 const gridOptions: VxeGridProps<any> = {
@@ -101,29 +116,37 @@ const gridOptions: VxeGridProps<any> = {
   proxyConfig: {
     ajax: {
       query: async ({ page }, formValues) => {
-        // 优先使用表单值，如果没有则使用响应式变量
+        // 始终以最新的表单值为准，确保搜索关键字等字段不会丢失
-        const currentPlatform = formValues?.ioTPlatform || ioTPlatform.value;
+        const latestFormValues =
-        const currentProductId =
+          formValues ||
-          formValues?.ioTPlatformProductId || productId.value;
+          (gridApi && gridApi.formApi
+            ? await gridApi.formApi.getValues()
+            : {});
 
-        if (!currentPlatform || !currentProductId) {
+        // 优先使用表单值，如果没有则使用响应式变量
-          return {
+        const currentPlatform =
-            items: [],
+          latestFormValues?.ioTPlatform || ioTPlatform.value;
-            totalCount: 0,
+        const currentProductId =
-          };
+          latestFormValues?.ioTPlatformProductId || productId.value;
-        }
 
         try {
           const { data } = await postDeviceThingModelManagementPageAsync({
+            // 使用 JSON Body 传参，按需附加过滤条件
             body: {
               pageIndex: page.currentPage,
               pageSize: page.pageSize,
+              ...(currentPlatform && {
                 ioTPlatform:
                   typeof currentPlatform === 'string'
                     ? Number.parseInt(currentPlatform)
                     : currentPlatform,
+              }),
+              ...(currentProductId && {
                 ioTPlatformProductId: String(currentProductId),
-              searchKeyWords: formValues?.SearchKeyWords,
+              }),
+              ...(latestFormValues?.SearchKeyWords && {
+                searchKeyWords: latestFormValues.SearchKeyWords,
+              }),
             },
           });
 
@@ -144,6 +167,16 @@ const [Grid, gridApi] = useVbenVxeGrid({ formOptions, gridOptions });
 
 const editRow: Record<string, any> = ref({});
 
+// 属性管理弹窗（使用独立组件）
+const [PropertyModal, propertyModalApi] = useVbenModal({
+  connectedComponent: DeviceThingModelPropertyModal,
+});
+
+// 指令管理弹窗（使用独立组件）
+const [CommandModal, commandModalApi] = useVbenModal({
+  connectedComponent: DeviceThingModelCommandModal,
+});
+
 const [ThingModelModal, thingModelModalApi] = useVbenModal({
   draggable: true,
   footer: true,
@@ -157,7 +190,12 @@ const [ThingModelModal, thingModelModalApi] = useVbenModal({
     if (isOpen && editRow.value.id) {
       // 编辑模式下，模态框打开后设置表单值
       nextTick(() => {
-        editFormApi.setValues({ ...editRow.value });
+        const values: any = { ...editRow.value };
+        // 确保平台类型与下拉框值类型一致（通常为字符串）
+        if (values.ioTPlatform !== undefined && values.ioTPlatform !== null) {
+          values.ioTPlatform = String(values.ioTPlatform);
+        }
+        editFormApi.setValues(values);
       });
     }
   },
@@ -223,7 +261,11 @@ async function submit() {
       );
       thingModelModalApi.close();
       editRow.value = {};
-      gridApi.reload();
+      // 提交成功后，使用当前查询表单的最新参数刷新列表，确保搜索条件等不会丢失
+      if (gridApi && gridApi.reload && gridApi.formApi) {
+        const latestValues = await gridApi.formApi.getValues();
+        await gridApi.reload(latestValues);
+      }
     } else {
       Message.error(
         isEdit ? $t('common.editFail') : $t('common.addFail'),
@@ -242,6 +284,26 @@ async function onEdit(record: any) {
   thingModelModalApi.open();
 }
 
+// 打开属性管理
+async function openPropertyModal(record: any) {
+  editRow.value = record;
+  propertyModalApi.setData({
+    deviceThingModelId: record.id,
+    deviceModelName: record.deviceModelName,
+  });
+  propertyModalApi.open();
+}
+
+// 打开指令管理
+async function openCommandModal(record: any) {
+  editRow.value = record;
+  commandModalApi.setData({
+    deviceThingModelId: record.id,
+    deviceModelName: record.deviceModelName,
+  });
+  commandModalApi.open();
+}
+
 const openAddModal = async () => {
   editRow.value = {};
   thingModelModalApi.open();
@@ -264,6 +326,40 @@ async function onDel(record: any) {
     Message.error($t('common.deleteFail'));
   }
 }
+
+// 页面初始化时，自动加载一次列表数据（无产品ID也允许加载）
+onMounted(async () => {
+  await nextTick();
+  setTimeout(async () => {
+    if (!gridApi || !gridApi.reload) return;
+
+    try {
+      // 先把路由参数（如果有）同步到查询表单
+      const formValues = await gridApi.formApi.getValues();
+      const newValues: any = { ...formValues };
+
+      if (route.query.ioTPlatform && !formValues.ioTPlatform) {
+        newValues.ioTPlatform = route.query.ioTPlatform;
+      }
+      if (route.query.productId && !formValues.ioTPlatformProductId) {
+        newValues.ioTPlatformProductId = route.query.productId;
+      }
+
+      if (
+        newValues.ioTPlatform !== formValues.ioTPlatform ||
+        newValues.ioTPlatformProductId !== formValues.ioTPlatformProductId
+      ) {
+        await gridApi.formApi.setValues(newValues);
+        await nextTick();
+      }
+
+      // 无论是否有产品ID，都加载一次列表数据
+      await gridApi.reload(newValues);
+    } catch (error) {
+      console.error('初始化加载设备端物模型列表失败:', error);
+    }
+  }, 300);
+});
 </script>
 
 <template>
@@ -306,6 +402,20 @@ async function onDel(record: any) {
               auth: ['AbpIdentity.Users.Update'],
               onClick: onEdit.bind(null, row),
             },
+            {
+              label: '属性管理',
+              type: 'link',
+              size: 'small',
+              auth: ['AbpIdentity.Users.Update'],
+              onClick: openPropertyModal.bind(null, row),
+            },
+            {
+              label: '指令管理',
+              type: 'link',
+              size: 'small',
+              auth: ['AbpIdentity.Users.Update'],
+              onClick: openCommandModal.bind(null, row),
+            },
             {
               label: $t('common.delete'),
               icon: 'ant-design:delete-outlined',
@@ -322,6 +432,12 @@ async function onDel(record: any) {
       </template>
     </Grid>
 
+    <!-- 属性管理弹窗（独立组件） -->
+    <PropertyModal />
+
+    <!-- 指令管理弹窗（独立组件） -->
+    <CommandModal />
+
     <ThingModelModal
       :title="editRow.id ? $t('common.edit') : $t('common.add')"
       class="w-[800px]"