表单预制数据界面优化
作者:
表单模型设计器右边的搜索字段功能不好用,不能进行多层级的搜索过滤。下面的代码对其进行了优化。
优化后,输入 project.stages.stage.name 后,可以逐层过滤
commit version: d70f55241f795e3214ff915b2611f754526d77db
文件: apps/link/src/main/components/form-designer/metadata-editor/Fields.tsx
private addFields(parentId: string, entity: Entity) {
const filter = this.designHost.selectedObject.filter;
entity.fieldsArray
.sort((a, b) => {
return a.name.localeCompare(b.name);
})
.filter(field => {
const fullPath = parentId ? `${parentId}.${field.aliasName}` : field.aliasName;
// project.stages.stage.name
const splitKeyword = this.searchKeyword.split('.');
if (splitKeyword.length > 1){
return splitKeyword.includes(field.aliasName)
} else {
return filter ? filter(field, fullPath) : true
}
})
.map((field): FieldTreeNode => {
return {
id: parentId ? `${parentId}.${field.aliasName}` : field.aliasName,
parentId,
field,
hasChildren: field.isRefer || field.isDetail
}
})
.forEach(field => {
this.treeData.push(field);
if (this.keepExpandedNodes.includes(field.id)) {
this.expandNode(field);
}
});
}
private rebuildTree() {
this.focusNode = null;
this.keepExpandedNodes = [];
this.treeData.forEach(node => {
if (node.expanded) {
this.keepExpandedNodes.push(node.id);
}
});
this.treeData.length = 0;
this.addFields('', this.designHost.selectedEntity);
if (this.searchKeyword) {
const splitKeyword = this.searchKeyword.split('.');
if (splitKeyword.length > 1) {
this.treeData.replace(this.treeData.filter(fld => {
return !fld.parentId && (
fld.field.name.toLowerCase().startsWith(splitKeyword[0])
)
}));
this.treeData.forEach(i => {
this.expandNode(i);
})
} else {
this.treeData.replace(this.treeData.filter(fld => {
return !fld.parentId && (
fld.field.name.toLowerCase().startsWith(this.searchKeyword) ||
fld.field.title.toLowerCase().includes(this.searchKeyword)
)
}));
}
}
}