设备数据表格优化
This commit is contained in:
parent
3ac2ed83e9
commit
59ab5facd5
@ -81,8 +81,11 @@ const { IoTDataType, DeviceAddress } = route.query;
|
||||
// 动态列定义
|
||||
const dynamicColumns = ref<any[]>([]);
|
||||
|
||||
// 固定列定义(始终显示)- 基于 IoTDBTreeModelDeviceDataDto 类型
|
||||
const fixedColumns = [
|
||||
// 是否显示 Sub_Device 列
|
||||
const showSubDeviceColumn = ref(false);
|
||||
|
||||
// 固定列定义(基础列,始终显示)- 基于 IoTDBTreeModelDeviceDataDto 类型
|
||||
const fixedBaseColumns = [
|
||||
{ title: '序号', type: 'seq', width: 50, field: 'seq', slots: {} },
|
||||
{
|
||||
field: 'TimestampStr',
|
||||
@ -119,23 +122,34 @@ const fixedColumns = [
|
||||
showOverflow: true,
|
||||
slots: {},
|
||||
},
|
||||
{
|
||||
field: 'SubDevice',
|
||||
title: $t('abp.IoTDBBase.SubDevice'),
|
||||
minWidth: 150,
|
||||
showOverflow: true,
|
||||
slots: {},
|
||||
},
|
||||
];
|
||||
|
||||
// Sub_Device 固定列定义
|
||||
const subDeviceColumn = {
|
||||
field: 'SubDevice',
|
||||
title: $t('abp.IoTDBBase.SubDevice'),
|
||||
minWidth: 150,
|
||||
showOverflow: true,
|
||||
slots: {},
|
||||
};
|
||||
|
||||
// 合并固定列和动态列 - 使用计算属性确保响应式
|
||||
const allColumns = computed(() => {
|
||||
// 如果表格未初始化,只返回固定列
|
||||
if (!isGridInitialized.value) {
|
||||
return [...fixedColumns];
|
||||
const baseColumns = [...fixedBaseColumns];
|
||||
if (showSubDeviceColumn.value) {
|
||||
baseColumns.push(subDeviceColumn);
|
||||
}
|
||||
return baseColumns;
|
||||
}
|
||||
|
||||
const columns = [...fixedColumns];
|
||||
const columns = [...fixedBaseColumns];
|
||||
|
||||
// 根据 DeviceType 控制 Sub_Device 列是否显示
|
||||
if (showSubDeviceColumn.value) {
|
||||
columns.push(subDeviceColumn);
|
||||
}
|
||||
|
||||
// 安全地添加动态列
|
||||
if (dynamicColumns.value && Array.isArray(dynamicColumns.value)) {
|
||||
@ -157,6 +171,9 @@ const initDefaultColumns = () => {
|
||||
if (!Array.isArray(dynamicColumns.value)) {
|
||||
dynamicColumns.value = [];
|
||||
}
|
||||
|
||||
// 默认不显示 Sub_Device 列,后续由表单值控制
|
||||
showSubDeviceColumn.value = false;
|
||||
};
|
||||
|
||||
// 表格是否已初始化
|
||||
@ -183,6 +200,14 @@ const formOptions: VbenFormProps = {
|
||||
return;
|
||||
}
|
||||
|
||||
// 根据 DeviceType 控制 Sub_Device 列是否显示
|
||||
if (changedFields.includes('DeviceType')) {
|
||||
// DeviceTypeEnum: 未知=0, 网关设备=1, 直连设备=2, 子设备=3
|
||||
const deviceType = values.DeviceType;
|
||||
showSubDeviceColumn.value =
|
||||
deviceType === 3 || deviceType === '3';
|
||||
}
|
||||
|
||||
// 当任何相关字段发生变化时,刷新表格数据
|
||||
const relevantFields = new Set([
|
||||
'DeviceAddress',
|
||||
@ -259,7 +284,7 @@ const gridOptions: VxeGridProps<any> = {
|
||||
highlight: true,
|
||||
labelField: 'name',
|
||||
},
|
||||
columns: fixedColumns, // 初始化时只使用固定列
|
||||
columns: fixedBaseColumns, // 初始化时只使用基础固定列
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
// 确保分页功能正常工作
|
||||
|
||||
@ -107,6 +107,12 @@ export const tableSchema: any = computed((): VxeGridProps['columns'] => [
|
||||
minWidth: '120',
|
||||
slots: {},
|
||||
},
|
||||
{
|
||||
field: 'subDevice',
|
||||
title: $t('abp.IoTDBBase.SubDevice'),
|
||||
minWidth: '120',
|
||||
slots: {},
|
||||
},
|
||||
{
|
||||
field: 'messageType',
|
||||
title: $t('abp.OneNETLog.MessageType'),
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user