本文摘要
该示例展示在泛微 Ecology ecode 中通过覆盖 Table 组件属性,实现建模查询表格按年月动态生成列的效果。核心做法是识别指定查询路径后,过滤排序年月数据,将业务数据转置,再动态替换表头与数据源。代码为半成品,需读者按实际场景调整。

效果图

原始数据:

image.png

开启ecode后展示样式:

2025-01-15T06:40.png

#代码: 注:本代码为半成品,请自行修改

ecodeSDK.overwritePropsFnQueueMapSet('Table', {
fn: (newProps) => {
console.log('!找到组件啦!!!!!!');
// 检查路径是否正确
if (!ecodeSDK.checkLPath('/spa/cube/index.html#/main/cube/search?customid=77')) return;
console.log("路径识别正确!", newProps);
// 数据过滤和排序
const validDataSource = newProps.dataSource.filter(row => row.ny && row.ny !== "未定义");
// 提取所有有效的年月并排序
const nyValues = Array.from(new Set(validDataSource.map(row => row.ny)))
.filter(ny => ny) // 过滤未定义的年月
.sort((a, b) => new Date(a) - new Date(b)); // 按时间升序排序
console.log("有效的年月字段:", nyValues);
// 数据转置处理
const processedData = {};
validDataSource.forEach(row => {
const cswb = row.cswb || "未定义";
const ny = row.ny;
const csxs = row.csxs || 0;
if (!processedData[cswb]) {
processedData[cswb] = { cswb };
}
processedData[cswb][ny] = csxs;
});
// 转换为数组形式,便于表格展示
const transformedData = Object.values(processedData);
// 动态生成新的表头
const dynamicColumns = [
{ title: "测试文本", dataIndex: "cswb", key: "cswb", width: "20%" },
...nyValues.map(ny => ({
title: ny,
dataIndex: ny,
key: ny,
width: "10%"
}))
];
// 更新表格的列配置和数据源
newProps.columns = dynamicColumns;
newProps.dataSource = transformedData;
console.log("处理后的数据:", transformedData);
console.log("处理后的列:", dynamicColumns);
},
});