表单预制数据界面优化

表单预制数据界面优化

作者:


表单模型设计器右边的搜索字段功能不好用,不能进行多层级的搜索过滤。下面的代码对其进行了优化。

优化后,输入 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)
            )
            }));
        }
    }
}