设备数据表格优化
This commit is contained in:
parent
3ac2ed83e9
commit
59ab5facd5
@ -81,8 +81,11 @@ const { IoTDataType, DeviceAddress } = route.query;
|
|||||||
// 动态列定义
|
// 动态列定义
|
||||||
const dynamicColumns = ref<any[]>([]);
|
const dynamicColumns = ref<any[]>([]);
|
||||||
|
|
||||||
// 固定列定义(始终显示)- 基于 IoTDBTreeModelDeviceDataDto 类型
|
// 是否显示 Sub_Device 列
|
||||||
const fixedColumns = [
|
const showSubDeviceColumn = ref(false);
|
||||||
|
|
||||||
|
// 固定列定义(基础列,始终显示)- 基于 IoTDBTreeModelDeviceDataDto 类型
|
||||||
|
const fixedBaseColumns = [
|
||||||
{ title: '序号', type: 'seq', width: 50, field: 'seq', slots: {} },
|
{ title: '序号', type: 'seq', width: 50, field: 'seq', slots: {} },
|
||||||
{
|
{
|
||||||
field: 'TimestampStr',
|
field: 'TimestampStr',
|
||||||
@ -119,23 +122,34 @@ const fixedColumns = [
|
|||||||
showOverflow: true,
|
showOverflow: true,
|
||||||
slots: {},
|
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(() => {
|
const allColumns = computed(() => {
|
||||||
// 如果表格未初始化,只返回固定列
|
// 如果表格未初始化,只返回固定列
|
||||||
if (!isGridInitialized.value) {
|
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)) {
|
if (dynamicColumns.value && Array.isArray(dynamicColumns.value)) {
|
||||||
@ -157,6 +171,9 @@ const initDefaultColumns = () => {
|
|||||||
if (!Array.isArray(dynamicColumns.value)) {
|
if (!Array.isArray(dynamicColumns.value)) {
|
||||||
dynamicColumns.value = [];
|
dynamicColumns.value = [];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 默认不显示 Sub_Device 列,后续由表单值控制
|
||||||
|
showSubDeviceColumn.value = false;
|
||||||
};
|
};
|
||||||
|
|
||||||
// 表格是否已初始化
|
// 表格是否已初始化
|
||||||
@ -183,6 +200,14 @@ const formOptions: VbenFormProps = {
|
|||||||
return;
|
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([
|
const relevantFields = new Set([
|
||||||
'DeviceAddress',
|
'DeviceAddress',
|
||||||
@ -259,7 +284,7 @@ const gridOptions: VxeGridProps<any> = {
|
|||||||
highlight: true,
|
highlight: true,
|
||||||
labelField: 'name',
|
labelField: 'name',
|
||||||
},
|
},
|
||||||
columns: fixedColumns, // 初始化时只使用固定列
|
columns: fixedBaseColumns, // 初始化时只使用基础固定列
|
||||||
height: 'auto',
|
height: 'auto',
|
||||||
keepSource: true,
|
keepSource: true,
|
||||||
// 确保分页功能正常工作
|
// 确保分页功能正常工作
|
||||||
|
|||||||
@ -107,6 +107,12 @@ export const tableSchema: any = computed((): VxeGridProps['columns'] => [
|
|||||||
minWidth: '120',
|
minWidth: '120',
|
||||||
slots: {},
|
slots: {},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
field: 'subDevice',
|
||||||
|
title: $t('abp.IoTDBBase.SubDevice'),
|
||||||
|
minWidth: '120',
|
||||||
|
slots: {},
|
||||||
|
},
|
||||||
{
|
{
|
||||||
field: 'messageType',
|
field: 'messageType',
|
||||||
title: $t('abp.OneNETLog.MessageType'),
|
title: $t('abp.OneNETLog.MessageType'),
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user