fineui/src/widget/multitree/check/multi.tree.check.pane.js

import {
    shortcut,
    extend,
    emptyFn,
    createWidget,
    i18nText,
    nextTick,
    Events,
    VerticalAdaptLayout, VTapeLayout
} from "@/core";
import { Pane, TextButton, Label } from "@/base";
import { DisplayTree, TreeView } from "@/case";

@shortcut()
export class MultiTreeCheckPane extends Pane {
    static xtype = "bi.multi_tree_check_pane";

    constants = { height: 25, lgap: 10, tgap: 5 };

    static EVENT_CONTINUE_CLICK = "EVENT_CONTINUE_CLICK";

    _defaultConfig() {
        return extend(super._defaultConfig(...arguments), {
            baseCls: "bi-multi-tree-check-pane bi-background",
            onClickContinueSelect: emptyFn,
            el: {
                type: DisplayTree.xtype,
            },
        });
    }

    _init() {
        super._init(...arguments);

        const self = this,
            opts = this.options;

        this.selectedValues = {};

        const continueSelect = createWidget({
            type: TextButton.xtype,
            title: i18nText("BI-Continue_Select"),
            text: i18nText("BI-Continue_Select"),
            cls: "multi-tree-check-selected",
        });
        continueSelect.on(TextButton.EVENT_CHANGE, () => {
            opts.onClickContinueSelect();
            nextTick(() => {
                self.empty();
            });
        });

        const backToPopup = createWidget({
            type: VerticalAdaptLayout.xtype,
            columnSize: ["auto", "auto"],
            cls: "multi-tree-continue-select",
            items: [
                {
                    el: {
                        type: Label.xtype,
                        title: i18nText("BI-Selected_Data"),
                        text: i18nText("BI-Selected_Data"),
                    },
                    lgap: this.constants.lgap,
                    tgap: this.constants.tgap,
                },
                {
                    el: continueSelect,
                    hgap: this.constants.lgap,
                    tgap: this.constants.tgap,
                }
            ],
        });

        this.display = createWidget(opts.el, {
            type: DisplayTree.xtype,
            cls: "bi-multi-tree-display",
            itemsCreator(op, callback) {
                op.type = TreeView.REQ_TYPE_GET_SELECTED_DATA;
                opts.itemsCreator(op, callback);
            },
            value: (opts.value || {}).value,
        });

        this.display.on(Events.AFTERINIT, () => {
            self.fireEvent(Events.AFTERINIT);
        });

        this.display.on(TreeView.EVENT_INIT, () => {
            backToPopup.setVisible(false);
        });

        this.display.on(TreeView.EVENT_AFTERINIT, () => {
            backToPopup.setVisible(true);
        });

        createWidget({
            type: VTapeLayout.xtype,
            element: this,
            items: [
                {
                    height: this.constants.height,
                    el: backToPopup,
                },
                {
                    height: "fill",
                    el: this.display,
                }
            ],
        });
    }

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

    populate(configs) {
        this.display.stroke(configs);
    }

    setValue(v) {
        v || (v = {});
        this.display.setSelectedValue(v.value);
    }

    getValue() {
    }
}