fineui/packages/fineui/src/base/tree/customtree.js

import { ButtonTree, Expander } from "../combination";
import {
    VerticalLayout,
    Widget,
    shortcut,
    extend,
    emptyFn,
    Tree,
    each,
    isNotEmptyArray,
    deepClone,
    stripEL,
    isWidget,
    clone,
    isNotNull,
    isNull,
    createWidget,
    Controller,
    Events
} from "@/core";

/**
 *
 * 自定义树
 *
 * Created by GUY on 2015/9/7.
 * @class CustomTree
 * @extends Single
 */

@shortcut()
export class CustomTree extends Widget {
    static xtype = "bi.custom_tree";
    static EVENT_CHANGE = "EVENT_CHANGE";

    _defaultConfig() {
        return extend(super._defaultConfig(...arguments), {
            baseCls: "bi-custom-tree",
            expander: {
                el: {},
                popup: {
                    type: CustomTree.xtype,
                },
            },

            items: [],
            itemsCreator: emptyFn,

            el: {
                type: ButtonTree.xtype,
                chooseType: 0,
                layouts: [
                    {
                        type: VerticalLayout.xtype,
                    }
                ],
            },
        });
    }
    _init() {
        super._init(...arguments);
        this.initTree(this.options.items);
    }

    _formatItems(nodes) {
        const { expander, itemsCreator } = this.options;
        nodes = Tree.transformToTreeFormat(nodes);

        const items = [];
        each(nodes, (i, node) => {
            if (isNotEmptyArray(node.children) || node.isParent === true) {
                const item = extend(
                    {
                        type: Expander.xtype,
                        el: {
                            value: node.value,
                        },
                        popup: { type: CustomTree.xtype },
                    },
                    deepClone(expander),
                    {
                        id: node.id,
                        pId: node.pId,
                        key: node.key,
                    }
                );
                let el = stripEL(node);
                if (!isWidget(el)) {
                    el = clone(el);
                    delete el.children;
                    extend(item.el, el);
                } else {
                    item.el = el;
                }
                item.popup.expander = deepClone(expander);
                item.items = item.popup.items = node.children;
                item.itemsCreator = item.popup.itemsCreator = (op, ...arg) => {
                    if (isNotNull(op.node)) {
                        // 从子节点传过来的itemsCreator直接向上传递
                        return itemsCreator(op, ...arg);
                    }
                    const args = Array.prototype.slice.call([op, ...arg], 0);
                    args[0].node = node;

                    return itemsCreator.apply(this, args);
                };
                isNull(item.popup.el) && (item.popup.el = deepClone(this.options.el));
                items.push(item);
            } else {
                items.push(node);
            }
        });

        return items;
    }
    // 构造树结构，
    initTree(nodes) {
        const { el, itemsCreator, value } = this.options;
        this.tree = createWidget(el, {
            element: this,
            items: this._formatItems(nodes),
            itemsCreator: (op, callback) => {
                itemsCreator.apply(this, [
                    op,
                    items => {
                        const args = Array.prototype.slice.call(arguments, 0);
                        args[0] = this._formatItems(items);
                        callback(...args);
                    }
                ]);
            },
            value,
        });
        this.tree.on(Controller.EVENT_CHANGE, (type, val, obj, ...args) => {
            this.fireEvent(Controller.EVENT_CHANGE, type, val, obj, ...args);
            if (type === Events.CLICK) {
                this.fireEvent(CustomTree.EVENT_CHANGE, val, obj);
            }
        });
    }

    // 生成树方法
    stroke(nodes) {
        this.populate(...arguments);
    }

    populate(nodes) {
        const args = Array.prototype.slice.call(arguments, 0);
        if (arguments.length > 0) {
            args[0] = this._formatItems(nodes);
        }
        this.tree.populate(...args);
    }

    setValue(v) {
        this.tree && this.tree.setValue(v);
    }

    getValue() {
        return this.tree ? this.tree.getValue() : [];
    }

    getAllButtons() {
        return this.tree ? this.tree.getAllButtons() : [];
    }

    getAllLeaves() {
        return this.tree ? this.tree.getAllLeaves() : [];
    }

    getNodeById(id) {
        return this.tree && this.tree.getNodeById(id);
    }

    getNodeByValue(id) {
        return this.tree && this.tree.getNodeByValue(id);
    }

    empty() {
        this.tree.empty();
    }
}