修改

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

@@ -27,6 +27,9 @@ import {
   tableSchema,
 } from './schema';
 
+import DeviceThingModelPropertyModal from './DeviceThingModelPropertyModal.vue';
+import DeviceThingModelCommandModal from './DeviceThingModelCommandModal.vue';
+
 defineOptions({
   name: 'DeviceThingModelManagement',
 });
@@ -113,10 +116,18 @@ const gridOptions: VxeGridProps<any> = {
   proxyConfig: {
     ajax: {
       query: async ({ page }, formValues) => {
+        // 始终以最新的表单值为准，确保搜索关键字等字段不会丢失
+        const latestFormValues =
+          formValues ||
+          (gridApi && gridApi.formApi
+            ? await gridApi.formApi.getValues()
+            : {});
+
         // 优先使用表单值，如果没有则使用响应式变量
-        const currentPlatform = formValues?.ioTPlatform || ioTPlatform.value;
+        const currentPlatform =
+          latestFormValues?.ioTPlatform || ioTPlatform.value;
         const currentProductId =
-          formValues?.ioTPlatformProductId || productId.value;
+          latestFormValues?.ioTPlatformProductId || productId.value;
 
         try {
           const { data } = await postDeviceThingModelManagementPageAsync({
@@ -133,8 +144,8 @@ const gridOptions: VxeGridProps<any> = {
               ...(currentProductId && {
                 ioTPlatformProductId: String(currentProductId),
               }),
-              ...(formValues?.SearchKeyWords && {
+              ...(latestFormValues?.SearchKeyWords && {
-                searchKeyWords: formValues.SearchKeyWords,
+                searchKeyWords: latestFormValues.SearchKeyWords,
               }),
             },
           });
@@ -156,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,
@@ -263,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();
@@ -361,6 +402,20 @@ onMounted(async () => {
               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',
@@ -377,6 +432,12 @@ onMounted(async () => {
       </template>
     </Grid>
 
+    <!-- 属性管理弹窗（独立组件） -->
+    <PropertyModal />
+
+    <!-- 指令管理弹窗（独立组件） -->
+    <CommandModal />
+
     <ThingModelModal
       :title="editRow.id ? $t('common.edit') : $t('common.add')"
       class="w-[800px]"