JiShe.IOT.UI/apps/web-antd/src/views/dataManger/deviceData/index.vue

<script setup lang="ts">
import type { VbenFormProps } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';

import { useRoute } from 'vue-router';
import { nextTick, watch, ref, computed } from 'vue';

import { Page } from '@vben/common-ui';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { postTreeModelDeviceDataInfoPage } from '#/api-client';

import { querySchema, tableSchema } from './schema';
import { generateDynamicColumns } from './dynamicColumns';
import { handleStandardIoTDBData, validateAndCleanData } from './example';

defineOptions({
  name: 'DeviceData',
});

const route = useRoute();
const { DeviceType, DeviceId, FocusAddress } = route.query;

// 动态列定义
const dynamicColumns = ref<any[]>([]);

// 固定列定义（始终显示）
const fixedColumns = [
  { title: '序号', type: 'seq', width: 50 },
  // 可以在这里添加其他固定列
];

// 合并固定列和动态列
const allColumns = ref([
  ...fixedColumns,
  ...dynamicColumns.value,
]);

// 初始化默认列（防止表格空白）
const initDefaultColumns = () => {
  if (dynamicColumns.value.length === 0) {
    dynamicColumns.value = [
      { field: 'SystemName', title: '系统名称', minWidth: 150 },
      { field: 'DeviceType', title: '设备类型', minWidth: 150 },
      { field: 'DeviceId', title: '设备ID', minWidth: 150 },
    ];
  }
};

// 初始化默认列
initDefaultColumns();

const formOptions: VbenFormProps = {
  schema: querySchema.value,
  initialValues: {
    FocusAddress: FocusAddress as string,
  },
  // 禁用表单值变化时自动提交，使用自定义处理函数
  submitOnChange: false,
  // 添加表单值变化的处理函数
  handleValuesChange: async (values, changedFields) => {
    // 当系统类型发生变化时，刷新表格数据
    if (changedFields.includes('SystemName')) {
      console.log('SystemName changed, values:', values);
      console.log('Changed fields:', changedFields);
      
      // 使用 setTimeout 确保表单值已经完全更新
      setTimeout(async () => {
        const latestValues = await gridApi.formApi.getValues();
        console.log('Latest values after timeout:', latestValues);
        gridApi.reload(latestValues);
      }, 0);
    }
  },
};
const gridOptions: VxeGridProps<any> = {
  checkboxConfig: {
    highlight: true,
    labelField: 'name',
  },
  columns: allColumns,
  height: 'auto',
  keepSource: true,
  pagerConfig: {
    currentPage: 1,
    pageSize: 20,
  },
  toolbarConfig: {
    custom: true,
    search: true, 
  },
  customConfig: {
    storage: true,
  },
  // 添加调试配置
  showOverflow: true,
  showHeaderOverflow: true,
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        const { data } = await postTreeModelDeviceDataInfoPage({
          body: {
            ...formValues,
            pageIndex: page.currentPage,
            pageSize: page.pageSize,
            DeviceType,
            DeviceId,
            FocusAddress,
          },
        });
        
        console.log('=== API调用开始 ===');
        console.log('请求参数:', { page, formValues, DeviceType, DeviceId, FocusAddress });
        
        try {
          const { data } = await postTreeModelDeviceDataInfoPage({
            body: {
              ...formValues,
              pageIndex: page.currentPage,
              pageSize: page.pageSize,
              DeviceType,
              DeviceId,
              FocusAddress,
            },
          });
          
          console.log('API返回的原始数据:', data);
          console.log('数据类型:', typeof data);
          console.log('data是否为null/undefined:', data === null || data === undefined);
          
          if (data) {
            console.log('data.items存在:', !!data.items);
            console.log('data.items类型:', Array.isArray(data.items) ? 'Array' : typeof data.items);
            if (data.items) {
              console.log('data.items长度:', data.items.length);
              if (data.items.length > 0) {
                console.log('第一条数据:', data.items[0]);
                console.log('第一条数据的所有字段:', Object.keys(data.items[0]));
              }
            }
          }
          
          // 简化处理逻辑，先确保基本功能正常
          if (data?.items && data.items.length > 0) {
            console.log('原始items数据:', data.items);
            
            // 直接使用原始数据，不进行复杂处理
            const items = data.items;
            
            // 动态生成列定义
            const generatedColumns = generateDynamicColumns(items);
            console.log('生成的列定义:', generatedColumns);
            
                      // 更新动态列
          dynamicColumns.value = generatedColumns;
          
          // 更新合并的列定义
          allColumns.value = [
            ...fixedColumns,
            ...generatedColumns,
          ];
          
          // 强制更新列定义
          await nextTick();
            
                      // 确保返回的数据包含totalCount字段
          const result = {
            items: data.items || [],
            totalCount: data.totalCount || (data.items ? data.items.length : 0),
          };
          console.log('返回给表格的数据:', result);
          return result;
          }
          
          console.log('没有数据或数据为空');
          return data;
        } catch (error) {
          console.error('API调用出错:', error);
          throw error;
        }
      },
    },
  },
};

const [Grid, gridApi] = useVbenVxeGrid({ formOptions, gridOptions });
</script>

<template>
  <Page auto-content-height>
    <Grid />
  </Page>
</template>