fineui/src/widget/multilayersingletree/multilayersingletree.combo.js

/**
 * 多层级下拉单选树
 * Created by GUY on 2016/1/26.
 *
 * @class BI.MultiLayerSingleTreeCombo
 * @extends BI.Widget
 */
BI.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, {

    _defaultConfig: function () {
        return BI.extend(BI.MultiLayerSingleTreeCombo.superclass._defaultConfig.apply(this, arguments), {
            baseCls: "bi-multilayer-single-tree-combo",
            isDefaultInit: false,
            height: 24,
            text: "",
            defaultText: "",
            itemsCreator: BI.emptyFn,
            items: [],
            allowEdit: false,
            allowSearchValue: false,
            allowInsertValue: false,
            isNeedAdjustWidth: true,
        });
    },

    _init: function () {
        var o = this.options;
        BI.isNumeric(o.width) && (o.width -= 2);
        BI.isNumeric(o.height) && (o.height -= 2);
        BI.MultiLayerSingleTreeCombo.superclass._init.apply(this, arguments);
    },

    render: function () {
        var self = this, o = this.options;

        var cls = (o.simple ? "bi-border-bottom " : "bi-border bi-border-radius ") + (BI.isKey(o.status) ? ("status-" + o.status) : "");

        var baseConfig = this._getBaseConfig();

        if (o.allowEdit) {
            return {
                type: "bi.absolute",
                cls,
                items: [
                    {
                        el: BI.extend(baseConfig, this._getSearchConfig()),
                        top: 0, bottom: 0, right: 0, left: 0
                    }, {
                        el: self._getTriggerIconButton(),
                        top: 0, bottom: 0, right: 0,
                    },
                ]
            };
        }

        return BI.extend(baseConfig, {
            el: {
                type: "bi.single_tree_trigger",
                ref: function (_ref) {
                    self.textTrigger = _ref;
                },
                text: o.text,
                defaultText: o.defaultText,
                height: o.height,
                items: o.items,
                value: o.value,
                tipType: o.tipType,
                warningTitle: o.warningTitle,
                valueFormatter: o.valueFormatter,
            },
        }, { cls });
    },

    _getBaseConfig: function () {
        var self = this, o = this.options;
        return {
            type: "bi.combo",
            container: o.container,
            destroyWhenHide: o.destroyWhenHide,
            adjustLength: 2,
            ref: function (_ref) {
                self.combo = _ref;
            },
            popup: {
                el: {
                    type: "bi.multilayer_single_tree_popup",
                    isDefaultInit: o.isDefaultInit,
                    itemsCreator: o.itemsCreator,
                    items: o.items,
                    ref: function (_ref) {
                        self.trigger && self.trigger.getSearcher().setAdapter(_ref);
                    },
                    listeners: [{
                        eventName: BI.MultiLayerSingleTreePopup.EVENT_CHANGE,
                        action: function () {
                            self.setValue(this.getValue());
                            self.combo.hideView();
                            self.fireEvent(BI.MultiLayerSingleTreeCombo.EVENT_CHANGE);
                        }
                    }],
                    onLoaded: function () {
                        BI.nextTick(function () {
                            self.combo.adjustWidth();
                            self.combo.adjustHeight();
                        });
                    }
                },
                value: o.value,
                maxHeight: 400,
                maxWidth: o.isNeedAdjustWidth ? "auto" : 500,
                minHeight: 240
            },
            isNeedAdjustWidth: o.isNeedAdjustWidth,
            listeners: [{
                eventName: BI.Combo.EVENT_BEFORE_POPUPVIEW,
                action: function () {
                    self.fireEvent(BI.MultiLayerSingleTreeCombo.EVENT_BEFORE_POPUPVIEW);
                }
            }]
        };
    },

    _getSearchConfig: function () {
        var self = this, o = this.options;
        return {
            el: {
                type: "bi.multilayer_single_tree_trigger",
                container: o.container,
                allowInsertValue: o.allowInsertValue,
                allowSearchValue: o.allowSearchValue,
                cls: "multilayer-single-tree-trigger",
                ref: function (_ref) {
                    self.trigger = _ref;
                },
                watermark: o.watermark,
                items: o.items,
                itemsCreator: o.itemsCreator,
                valueFormatter: o.valueFormatter,
                height: o.height,
                text: o.text,
                defaultText: o.defaultText,
                value: o.value,
                tipType: o.tipType,
                warningTitle: o.warningTitle,
                title: o.title,
                listeners: [{
                    eventName: BI.MultiLayerSingleTreeTrigger.EVENT_CHANGE,
                    action: function () {
                        self.setValue(this.getValue());
                        self.combo.hideView();
                        self.fireEvent(BI.MultiLayerSingleTreeCombo.EVENT_CHANGE);
                    }
                }, {
                    eventName: BI.MultiLayerSingleTreeTrigger.EVENT_FOCUS,
                    action: function () {
                        self.fireEvent(BI.MultiLayerSingleTreeCombo.EVENT_FOCUS);
                    }
                }, {
                    eventName: BI.MultiLayerSingleTreeTrigger.EVENT_BLUR,
                    action: function () {
                        self.fireEvent(BI.MultiLayerSingleTreeCombo.EVENT_BLUR);
                    }
                }, {
                    eventName: BI.MultiLayerSingleTreeTrigger.EVENT_SEARCHING,
                    action: function () {
                        self.fireEvent(BI.MultiLayerSingleTreeCombo.EVENT_SEARCHING);
                    }
                }, {
                    eventName: BI.MultiLayerSingleTreeTrigger.EVENT_STOP,
                    action: function () {
                        self.fireEvent(BI.MultiLayerSingleTreeCombo.EVENT_STOP);
                    }
                }, {
                    eventName: BI.MultiLayerSingleTreeTrigger.EVENT_ADD_ITEM,
                    action: function () {
                        var value = self.trigger.getSearcher().getKeyword();
                        self.combo.setValue([value]);
                        self.combo.hideView();
                        self.fireEvent(BI.MultiLayerSingleTreeCombo.EVENT_CHANGE);
                    }
                }]
            },
            toggle: !o.allowEdit,
            hideChecker: function (e) {
                // 新增传配置container后对应hideChecker的修改
                // IE11下，popover(position: fixed)下放置下拉控件(position: fixed), 滚动的时候会异常卡顿
                // 通过container参数将popup放置于popover之外解决此问题, 其他下拉控件由于元素少或者有分页，所以
                // 卡顿不明显, 先在此做尝试, 并在FineUI特殊处理待解决文档中标记跟踪
                return (o.container && self.trigger.getSearcher().isSearching() && self.trigger.getSearcher().getView().element.find(e.target).length > 0) ? false : self.triggerBtn?.element.find(e.target).length === 0;
            },
            listeners: [{
                eventName: BI.Combo.EVENT_AFTER_HIDEVIEW,
                action: function () {
                    self.trigger.stopEditing();
                }
            }, {
                eventName: BI.Combo.EVENT_BEFORE_POPUPVIEW,
                action: function () {
                    self.fireEvent(BI.MultiLayerSingleTreeCombo.EVENT_BEFORE_POPUPVIEW);
                }
            }]
        };
    },

    _getTriggerIconButton: function () {
        var self = this, o = this.options;
        return {
            type: "bi.trigger_icon_button",
            cls: "bi-trigger trigger-icon-button",
            ref: function (_ref) {
                self.triggerBtn = _ref;
            },
            width: o.height,
            height: o.height,
            listeners: [
                {
                    eventName: BI.TriggerIconButton.EVENT_CHANGE,
                    action: function () {
                        if (self.combo.isViewVisible()) {
                            self.combo.hideView();
                        } else {
                            self.combo.showView();
                        }
                    }
                }
            ]
        };
    },

    getSearcher: function () {
        return this.trigger ? this.trigger.getSearcher() : this.textTrigger.getTextor();
    },

    setValue: function (v) {
        v = BI.isArray(v) ? v : [v];
        this.combo.setValue(v);
    },

    getValue: function () {
        return this.combo.getValue();
    },

    setStatus: function (status) {
        if (BI.isKey(this.options.status)) {
            this.element.removeClass("status-" + this.options.status);
        }
        this.element.addClass("status-" + status);
        this.options.status = status;
    },

    setTipType: function (v) {
        this.trigger ? this.trigger.setTipType(v) : this.textTrigger.setTipType(v);
    },

    populate: function (items) {
        this.combo.populate(items);
    },

    focus: function () {
        this.trigger.focus();
    },

    blur: function () {
        this.trigger.blur();
    },

    showView: function () {
        this.combo.showView();
    },

    setWaterMark: function (v) {
        this.trigger.setWaterMark(v);
    }
});

BI.MultiLayerSingleTreeCombo.EVENT_SEARCHING = "EVENT_SEARCHING";
BI.MultiLayerSingleTreeCombo.EVENT_BLUR = "EVENT_BLUR";
BI.MultiLayerSingleTreeCombo.EVENT_FOCUS = "EVENT_FOCUS";
BI.MultiLayerSingleTreeCombo.EVENT_CHANGE = "EVENT_CHANGE";
BI.MultiLayerSingleTreeCombo.EVENT_STOP = "EVENT_STOP";
BI.MultiLayerSingleTreeCombo.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
BI.shortcut("bi.multilayer_single_tree_combo", BI.MultiLayerSingleTreeCombo);