fineui/src/case/button/node/treenode.js

import { IconLabel, Label, NodeButton } from "@/base";
import { shortcut, extend, VerticalAdaptLayout, isKey, compact, SIZE_CONSANTS } from "@/core";
import { TreeNodeSwitcher } from "@/case";

@shortcut()
export class BasicTreeNode extends NodeButton {
    static xtype = "bi.tree_node";

    _defaultConfig(props) {
        const conf = super._defaultConfig.apply(this, arguments);

        return extend(conf, {
            baseCls: `${conf.baseCls || ""} bi-tree-node ${props.selectable ? "bi-list-item-active" : "bi-list-item"}`,
            id: "",
            pId: "",
            open: false,
            height: 24,
            readonly: true,
            isFirstNode: false,
            isLastNode: false,
            switcherIcon: {},
            selectable: true,
            disabled: false, // disabled不会影响展开收起功能
        });
    }

    render() {
        const {
            open,
            layer,
            height,
            hgap,
            textHgap,
            textVgap,
            textLgap,
            textRgap,
            text,
            value,
            isFirstNode,
            isLastNode,
            keyword,
            iconWrapperWidth,
            iconCls,
            switcherIcon,
            selectable,
        } = this.options;

        const checkbox = {
            type: TreeNodeSwitcher.xtype,
            ref: _ref => {
                this.switcher = _ref;
            },
            iconHeight: height,
            iconWidth: iconWrapperWidth || height,
            open,
            isFirstNode,
            isLastNode,
            layer,
            ...switcherIcon,
            stopPropagation: selectable,
            mounted() {
                this.setEnable(true);
            },
            listeners: [
                {
                    eventName: "EVENT_CHANGE",
                    action: () => {
                        if (!this.isEnabled() || selectable) {
                            this.isOpened() ? this.triggerCollapse() : this.triggerExpand();
                        }
                    },
                }
            ],
        };

        // const indent = {
        //     el: {
        //         type: Layout.xtype,
        //         height,
        //         width: height,
        //         cls: this.getLineCls(),
        //     },
        //     lgap: layer * SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2, //  偏移公式为每一层的偏移量为节点高度的一半
        //     width: "",
        // };


        const icon = isKey(iconCls) ? {
            el: {
                type: IconLabel.xtype,
                // iconWidth,
                // iconHeight,
                cls: iconCls,
            },
            // width: 24,
        } : null;


        return {
            type: VerticalAdaptLayout.xtype,
            items: compact([
                {
                    el: checkbox,
                    lgap: layer * SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2, //  偏移公式为每一层的偏移量为节点高度的一半
                    width: iconWrapperWidth || height,
                },
                icon,
                {
                    el: {
                        type: Label.xtype,
                        ref: _ref => {
                            this.text = _ref;
                        },
                        textAlign: "left",
                        whiteSpace: "nowrap",
                        textHeight: height,
                        height,
                        hgap: hgap || textHgap,
                        vgap: textVgap,
                        lgap: textLgap,
                        rgap: textRgap,
                        text,
                        value,
                        keyword,
                    },
                    width: "fill",
                }
            ]),
        };
    }

    doRedMark() {
        this.text.doRedMark(...arguments);
    }

    unRedMark() {
        this.text.unRedMark(...arguments);
    }

    doClick() {
        if (this.options.selectable) {
            return;
        }
        super.doClick(...arguments);
    }

    setOpened(v) {
        super.setOpened(...arguments);
        this.switcher.setOpened(v);
    }

    setValue() {
        super.setValue(...arguments);
    }
}

@shortcut()
export class FirstPlusGroupNode extends BasicTreeNode {
    static xtype = "bi.first_plus_group_node";

    _defaultConfig() {
        const conf = super._defaultConfig(...arguments);

        return extend(conf, {
            baseCls: `${conf.baseCls || ""} bi-first-plus-group-node`,
            isFirstNode: true,
            isLastNode: false,
        });
    }
}

@shortcut()
export class MidPlusGroupNode extends BasicTreeNode {
    static xtype = "bi.mid_plus_group_node";

    _defaultConfig() {
        const conf = super._defaultConfig(...arguments);

        return extend(conf, {
            baseCls: `${conf.baseCls || ""} bi-mid-plus-group-node`,
            isFirstNode: false,
            isLastNode: false,
        });
    }
}

@shortcut()
export class LastPlusGroupNode extends BasicTreeNode {
    static xtype = "bi.last_plus_group_node";

    _defaultConfig() {
        const conf = super._defaultConfig(...arguments);

        return extend(conf, {
            baseCls: `${conf.baseCls || ""} bi-last-plus-group-node`,
            isFirstNode: false,
            isLastNode: true,
        });
    }
}