Merge pull request #290439 in DEC/fineui from final/11.0 to persist/11.0

* commit '07b2b1371adcd419c4d2d011a88120b7de24a2e3': BI-155273 fix: 新增一些方法 BI-154149 fix: 无法点击清空 BI-154214 fix：国际化 Reapply "Pull request #16: Feature/x" BI-154374 Revert "BI-144276 fix: 【来源POC项目】增量更新开始时间" 无JIRA tab添加子card destory监听 Revert "Pull request #16: Feature/x" Revert "无JIRA layout 的updateChildren过程中传递context" 无JIRA tab添加子card destory监听 BI-154253 fix: 点击报错 BI-154136 fix: 按钮被遮挡 Uploaded files KERNEL-18940 refactor: 处理搜索，新增一些属性和方法 BI-153053 fix: 展开的加载按钮异常 BI-124572 fix: 过滤组件主题色修复 KERNEL-18940 refactor: 类型补充 KERNEL-18940 refactor: 新增一些属性和方法无JIRA layout 的updateChildren过程中传递context REPORT-125909 fix: 【公共模型引入BI】低版本chrome，维度指标集在组件分析区域不显示
2 months ago · f57f490911
54 changed files with 517 additions and 102 deletions
--- a/packages/fineui/dist/font/iconfont.eot
+++ b/packages/fineui/dist/font/iconfont.eot
--- a/packages/fineui/dist/font/iconfont.svg
+++ b/packages/fineui/dist/font/iconfont.svg
--- a/packages/fineui/dist/font/iconfont.ttf
+++ b/packages/fineui/dist/font/iconfont.ttf
--- a/packages/fineui/dist/font/iconfont.woff
+++ b/packages/fineui/dist/font/iconfont.woff
--- a/packages/fineui/dist/font/iconfont.woff2
+++ b/packages/fineui/dist/font/iconfont.woff2
--- a/packages/fineui/src/base/combination/tab.js
+++ b/packages/fineui/src/base/combination/tab.js
@ -13,7 +13,8 @@ import {
    contains,
    any,
    isEqual,
-    LogicFactory
+    LogicFactory,
+    Events,
 } from "@/core";

 /**
@ -106,7 +107,11 @@ export class Tab extends Widget {
            Widget.execWithContext(this, () => {
                this.cardMap[v] = cardCreator(v);
            });
-            this.layout.addCardByName(v, this.cardMap[v]);
+            const card = this.layout.addCardByName(v, this.cardMap[v]);
+            card.on(Events.DESTROY, () => {
+                this.layout.deleteCardByName(v);
+                delete this.cardMap[v];
+            });
        }
    }

--- a/packages/fineui/src/base/single/input/radio/radio.js
+++ b/packages/fineui/src/base/single/input/radio/radio.js
@ -56,13 +56,4 @@ export class Radio extends BasicButton {
            this.fireEvent(Radio.EVENT_CHANGE);
        }
    }
-
-    setSelected(b) {
-        super.setSelected(b);
-        if (b) {
-            this.radio.element.addClass("bi-high-light-background");
-        } else {
-            this.radio.element.removeClass("bi-high-light-background");
-        }
-    }
 }
--- a/packages/fineui/src/case/combo/iconcombo/combo.icon.js
+++ b/packages/fineui/src/case/combo/iconcombo/combo.icon.js
@ -8,6 +8,7 @@ export class IconCombo extends Widget {
    static xtype = "bi.icon_combo";

    static EVENT_CHANGE = "EVENT_CHANGE";
+    static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";

    _defaultConfig() {
        return extend(super._defaultConfig(...arguments), {
@ -55,18 +56,18 @@ export class IconCombo extends Widget {
            value: o.value,
            isShowDown: o.isShowDown,
        });
-        this.popup = createWidget(o.popup, {
+        this.popupEl = createWidget(o.popup, {
            type: IconComboPopup.xtype,
            chooseType: o.chooseType,
            items: o.items,
            value: o.value,
        });
-        this.popup.on(IconComboPopup.EVENT_CHANGE, () => {
-            this.setValue(this.popup.getValue());
+        this.popupEl.on(IconComboPopup.EVENT_CHANGE, () => {
+            this.setValue(this.popupEl.getValue());
            this.iconCombo.hideView();
            this.fireEvent(IconCombo.EVENT_CHANGE);
        });
-        this.popup.on(Controller.EVENT_CHANGE, (...args) => {
+        this.popupEl.on(Controller.EVENT_CHANGE, (...args) => {
            this.fireEvent(Controller.EVENT_CHANGE, ...args);
        });
        this.iconCombo = createWidget({
@ -82,11 +83,20 @@ export class IconCombo extends Widget {
            el: this.trigger,
            hideWhenAnotherComboOpen: o.hideWhenAnotherComboOpen,
            popup: {
-                el: this.popup,
+                el: this.popupEl,
                maxWidth: o.maxWidth,
                maxHeight: o.maxHeight,
                minWidth: o.minWidth,
+                ref: (ref) => {
+                    this.popup = ref;
                },
+            },
+            listeners: [{
+                eventName: Combo.EVENT_BEFORE_POPUPVIEW,
+                action: () => {
+                    this.fireEvent(IconCombo.EVENT_BEFORE_POPUPVIEW);
+                },
+            }],
        });
    }

@ -100,15 +110,19 @@ export class IconCombo extends Widget {

    setValue(v) {
        this.trigger.setValue(v);
-        this.popup.setValue(v);
+        this.popupEl.setValue(v);
    }

    getValue() {
-        const value = this.popup.getValue();
+        const value = this.popupEl.getValue();

        return isNull(value) ? [] : isArray(value) ? value : [value];
    }

+    getPopup() {
+        return this.popup;
+    }
+
    populate(items) {
        this.options.items = items;
        this.iconCombo.populate(items);
--- a/packages/fineui/src/case/toolbar/toolbar.multiselect.js
+++ b/packages/fineui/src/case/toolbar/toolbar.multiselect.js
@ -126,6 +126,7 @@ export class MultiSelectBar extends BasicButton {
    }

    setSelected(v) {
+        super.setSelected(v);
        this.checkbox.setSelected(v);
        this.setHalfSelected(false);
    }
--- a/packages/fineui/src/case/ztree/asynctree.js
+++ b/packages/fineui/src/case/ztree/asynctree.js
@ -221,15 +221,11 @@ export class AsyncTree extends TreeView {
                    {
                        el: {
                            type: IconLabel.xtype,
-                            width: 20,
-                            height: 20,
                            cls: "button-loading-font anim-rotate bi-card",
                            ref: ref => {
                                loadingIcon = ref;
                            },
                        },
-                        left: 5,
-                        top: 5,
                    },
                ],
            });
--- a/packages/fineui/src/core/2.base.js
+++ b/packages/fineui/src/core/2.base.js
@ -1518,7 +1518,7 @@ export function getTime() {
    }
    if (isNotNull(BI.timeZone)) {
        // BI-33791 1901年以前的东8区标准是GMT+0805, 统一无论是什么时间，都以整的0800这样的为基准
-        return dt.getTime() + BI.timeZone + new Date().getTimezoneOffset() * 60000;
+        return dt.getTime() - BI.timeZone - new Date().getTimezoneOffset() * 60000;
    }

    return dt.getTime();
--- a/packages/fineui/src/core/utils/dom.js
+++ b/packages/fineui/src/core/utils/dom.js
@ -743,12 +743,13 @@ export function getComboPosition(combo, popup, extraWidth, extraHeight, needAdap
    }
    if (needAdaptHeight === true && popup.resetHeight) {
        const comboRect = combo.element[0].getBoundingClientRect();
+        const scale = comboRect.height === 0 ? 1 : comboRect.height / combo.element.height();
        const relativeOffset = positionRelativeElement ? positionRelativeElement.getBoundingClientRect().top : 0;
        const positionTop = position.top + relativeOffset;
        if (positionTop < comboRect.top) {
-            popup.resetHeight(Math.min(viewportBounds.height - positionTop, comboRect.top, maxHeight));
+            popup.resetHeight(Math.min((viewportBounds.height - positionTop) / scale, comboRect.top / scale, maxHeight));
        } else if (positionTop >= comboRect.bottom) {
-            popup.resetHeight(Math.min(viewportBounds.height - positionTop, viewportBounds.height - comboRect.bottom, maxHeight));
+            popup.resetHeight(Math.min((viewportBounds.height - positionTop) / scale, (viewportBounds.height - comboRect.bottom) / scale, maxHeight));
        }
    }

--- a/packages/fineui/src/less/base/tree/ztree.less
+++ b/packages/fineui/src/less/base/tree/ztree.less
@ -335,3 +335,10 @@
  margin-right: 2px;
  vertical-align: top;
 }
+
+.ztree .button-loading-font {
+  .use-scale(width, 20px);
+  .use-scale(height, 20px);
+  .use-scale(left, 5px);
+  .use-scale(top, 5px);
+}
--- a/packages/fineui/src/widget/downlist/combo.downlist.js
+++ b/packages/fineui/src/widget/downlist/combo.downlist.js
@ -108,6 +108,9 @@ export class DownListCombo extends Widget {
                stopPropagation: o.stopPropagation,
                maxHeight: o.maxHeight,
                minWidth: o.minWidth,
+                ref: (ref) => {
+                    this.popup = ref;
+                },
                ...o.popup,
            },
        });
@ -125,6 +128,10 @@ export class DownListCombo extends Widget {
        this.downlistcombo.showView(e);
    }

+    getPopup() {
+        return this.popup;
+    }
+
    populate(items) {
        this.popupView.populate(items);
    }
--- a/packages/fineui/src/widget/dynamicdate/dynamicdate.combo.js
+++ b/packages/fineui/src/widget/dynamicdate/dynamicdate.combo.js
@ -208,7 +208,7 @@ export class DynamicDateCombo extends Single {
                                min: opts.minDate,
                                max: opts.maxDate,
                                ref: _ref => {
-                                    this.popup = _ref;
+                                    this.popupEl = _ref;
                                },
                                listeners: [
                                    {
@ -238,7 +238,7 @@ export class DynamicDateCombo extends Single {
                                    {
                                        eventName: DynamicDatePopup.BUTTON_OK_EVENT_CHANGE,
                                        action: () => {
-                                            const value = this.popup.getValue();
+                                            const value = this.popupEl.getValue();
                                            if (this._checkValue(value)) {
                                                this.setValue(value);
                                            }
@ -249,7 +249,7 @@ export class DynamicDateCombo extends Single {
                                    {
                                        eventName: DynamicDatePopup.EVENT_CHANGE,
                                        action: () => {
-                                            this.setValue(this.popup.getValue());
+                                            this.setValue(this.popupEl.getValue());
                                            this.combo.hideView();
                                            this.fireEvent(DynamicDateCombo.EVENT_CONFIRM);
                                        },
@ -262,6 +262,10 @@ export class DynamicDateCombo extends Single {
                                    }
                                ],
                            },
+                            ref: (ref) => {
+                                this.popup = ref;
+                            },
+                            ...opts.popup,
                        },
                        // // DEC-4250 和复选下拉一样，点击triggerBtn不默认收起
                        // hideChecker: function (e) {
@ -271,9 +275,9 @@ export class DynamicDateCombo extends Single {
                            {
                                eventName: Combo.EVENT_BEFORE_POPUPVIEW,
                                action: () => {
-                                    this.popup.setMinDate(opts.minDate);
-                                    this.popup.setMaxDate(opts.maxDate);
-                                    this.popup.setValue(this.storeValue);
+                                    this.popupEl.setMinDate(opts.minDate);
+                                    this.popupEl.setMaxDate(opts.maxDate);
+                                    this.popupEl.setValue(this.storeValue);
                                    this.fireEvent(DynamicDateCombo.EVENT_BEFORE_POPUPVIEW);
                                },
                            }
@ -332,14 +336,14 @@ export class DynamicDateCombo extends Single {
        const o = this.options;
        o.minDate = minDate;
        this.trigger.setMinDate(minDate);
-        this.popup && this.popup.setMinDate(minDate);
+        this.popupEl && this.popupEl.setMinDate(minDate);
    }

    setMaxDate(maxDate) {
        const o = this.options;
        o.maxDate = maxDate;
        this.trigger.setMaxDate(maxDate);
-        this.popup && this.popup.setMaxDate(maxDate);
+        this.popupEl && this.popupEl.setMaxDate(maxDate);
    }

    setValue(v) {
@ -356,6 +360,10 @@ export class DynamicDateCombo extends Single {
        return this.trigger.getKey();
    }

+    getPopup() {
+        return this.popup;
+    }
+
    hidePopupView() {
        this.combo.hideView();
    }
--- a/packages/fineui/src/widget/dynamicdate/dynamicdate.param.item.js
+++ b/packages/fineui/src/widget/dynamicdate/dynamicdate.param.item.js
@ -79,7 +79,7 @@ export class DynamicDateParamItem extends Widget {
                            value: 0,
                        },
                        {
-                            text: i18nText("BI-Basic_Behind"),
+                            text: i18nText("BI-Basic_Later"),
                            value: 1,
                        }
                    ],
--- a/packages/fineui/src/widget/dynamicdatetime/dynamicdatetime.combo.js
+++ b/packages/fineui/src/widget/dynamicdatetime/dynamicdatetime.combo.js
@ -216,7 +216,7 @@ export class DynamicDateTimeCombo extends Single {
                                min: opts.minDate,
                                max: opts.maxDate,
                                ref: _ref => {
-                                    this.popup = _ref;
+                                    this.popupEl = _ref;
                                },
                                listeners: [
                                    {
@ -249,7 +249,7 @@ export class DynamicDateTimeCombo extends Single {
                                    {
                                        eventName: DynamicDateTimePopup.BUTTON_OK_EVENT_CHANGE,
                                        action: () => {
-                                            const value = this.popup.getValue();
+                                            const value = this.popupEl.getValue();
                                            if (this._checkValue(value)) {
                                                this.setValue(value);
                                            }
@ -260,7 +260,7 @@ export class DynamicDateTimeCombo extends Single {
                                    {
                                        eventName: DynamicDateTimePopup.EVENT_CHANGE,
                                        action: () => {
-                                            this.setValue(this.popup.getValue());
+                                            this.setValue(this.popupEl.getValue());
                                            this.combo.hideView();
                                            this.fireEvent(DynamicDateTimeCombo.EVENT_CONFIRM);
                                        }
@ -271,16 +271,20 @@ export class DynamicDateTimeCombo extends Single {
                                            this.fireEvent(DynamicDateTimeCombo.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW);
                                        }
                                    }
-                                ]
-                            }
+                                ],
+                            },
+                            ref: (ref) => {
+                                this.popup = ref;
+                            },
+                            ...opts.popup,
                        },
                        listeners: [
                            {
                                eventName: Combo.EVENT_BEFORE_POPUPVIEW,
                                action: () => {
-                                    this.popup.setMinDate(opts.minDate);
-                                    this.popup.setMaxDate(opts.maxDate);
-                                    this.popup.setValue(this.storeValue);
+                                    this.popupEl.setMinDate(opts.minDate);
+                                    this.popupEl.setMaxDate(opts.maxDate);
+                                    this.popupEl.setValue(this.storeValue);
                                    this.fireEvent(DynamicDateTimeCombo.EVENT_BEFORE_POPUPVIEW);
                                }
                            }
@ -339,14 +343,14 @@ export class DynamicDateTimeCombo extends Single {
        const o = this.options;
        o.minDate = minDate;
        this.trigger.setMinDate(minDate);
-        this.popup && this.popup.setMinDate(minDate);
+        this.popupEl && this.popupEl.setMinDate(minDate);
    }

    setMaxDate(maxDate) {
        const o = this.options;
        o.maxDate = maxDate;
        this.trigger.setMaxDate(maxDate);
-        this.popup && this.popup.setMaxDate(maxDate);
+        this.popupEl && this.popupEl.setMaxDate(maxDate);
    }

    setValue(v) {
@ -363,6 +367,10 @@ export class DynamicDateTimeCombo extends Single {
        return this.trigger.getKey();
    }

+    getPopup() {
+        return this.popup;
+    }
+
    hidePopupView() {
        this.combo.hideView();
    }
--- a/packages/fineui/src/widget/multiselect/multiselect.insert.combo.js
+++ b/packages/fineui/src/widget/multiselect/multiselect.insert.combo.js
@ -47,12 +47,16 @@ export class MultiSelectInsertCombo extends Single {
    static REQ_GET_ALL_DATA = "-1";
    static EVENT_FOCUS = "EVENT_FOCUS";
    static EVENT_BLUR = "EVENT_BLUR";
+    static EVENT_START = "EVENT_START";
    static EVENT_STOP = "EVENT_STOP";
    static EVENT_SEARCHING = "EVENT_SEARCHING";
    static EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM";
    static EVENT_CONFIRM = "EVENT_CONFIRM";
    static EVENT_ADD_ITEM = "EVENT_ADD_ITEM";
    static EVENT_AFTER_HIDEVIEW = "EVENT_AFTER_HIDEVIEW";
+    static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
+    static EVENT_BEFORE_NUMBER_COUNTER_POPUPVIEW = "EVENT_BEFORE_NUMBER_COUNTER_POPUPVIEW";
+    static EVENT_AFTER_NUMBER_COUNTER_POPUPVIEW = "EVENT_AFTER_NUMBER_COUNTER_POPUPVIEW";

    _defaultConfig() {
        return extend(super._defaultConfig(...arguments), {
@ -62,6 +66,8 @@ export class MultiSelectInsertCombo extends Single {
            height: 24,
            itemHeight: SIZE_CONSANTS.LIST_ITEM_HEIGHT,
            allowEdit: true,
+            popup: {},
+            masker: {},
        });
    }

@ -97,6 +103,8 @@ export class MultiSelectInsertCombo extends Single {

        this.trigger = createWidget({
            type: MultiSelectInsertTrigger.xtype,
+            popup: o.popup,
+            masker: o.masker,
            allowEdit: o.allowEdit,
            height: toPix(o.height, o.simple ? 1 : 2),
            text: o.text,
@ -122,6 +130,7 @@ export class MultiSelectInsertCombo extends Single {
        this.trigger.on(MultiSelectInsertTrigger.EVENT_START, function() {
            self._setStartValue("");
            this.getSearcher().setValue(self.storeValue);
+            self.fireEvent(MultiSelectInsertCombo.EVENT_START);
        });
        this.trigger.on(MultiSelectInsertTrigger.EVENT_STOP, () => {
            self._setStartValue("");
@ -241,12 +250,14 @@ export class MultiSelectInsertCombo extends Single {
                        self.trigger.getSearcher().adjustView();
                    });
                },
+                ...o.popup,
            },
            value: o.value,
            hideChecker(e) {
                return (
                    triggerBtn.element.find(e.target).length === 0 &&
-                    self.numberCounter.element.find(e.target).length === 0
+                    size(self.numberCounter.getView()?.element.find(e.target)) === 0 &&
+                    size(self.trigger.getSearcher().getSearcher().getView()?.element.find(e.target)) === 0
                );
            },
        });
@ -259,6 +270,7 @@ export class MultiSelectInsertCombo extends Single {
            nextTick(() => {
                self._populate();
            });
+            self.fireEvent(MultiSelectInsertCombo.EVENT_BEFORE_POPUPVIEW);
        });
        // 当退出的时候如果还在处理请求，则等请求结束后再对外发确定事件
        this.wants2Quit = false;
@ -290,6 +302,8 @@ export class MultiSelectInsertCombo extends Single {
            valueFormatter: o.valueFormatter,
            itemsCreator: bind(this._itemsCreator4Trigger, this),
            value: o.value,
+            masker: o.masker,
+            popup: o.popup,
        });
        this.numberCounter.on(MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE, () => {
            if (!self.combo.isViewVisible()) {
@ -298,6 +312,10 @@ export class MultiSelectInsertCombo extends Single {
        });
        this.numberCounter.on(MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW, function() {
            this.updateSelectedValue(self.storeValue);
+            self.fireEvent(MultiSelectInsertCombo.EVENT_BEFORE_NUMBER_COUNTER_POPUPVIEW);
+        });
+        this.numberCounter.on(MultiSelectCheckSelectedSwitcher.EVENT_AFTER_POPUPVIEW, function() {
+            self.fireEvent(MultiSelectInsertCombo.EVENT_AFTER_NUMBER_COUNTER_POPUPVIEW);
        });

        this.numberCounter.on(Events.VIEW, b => {
@ -555,4 +573,16 @@ export class MultiSelectInsertCombo extends Single {
        this._populate(...arguments);
        this.numberCounter.populateSwitcher(...arguments);
    }
+
+    getPopup() {
+        return this.popup;
+    }
+
+    getNumberCounter() {
+        return this.numberCounter;
+    }
+
+    getTrigger() {
+        return this.trigger;
+    }
 }
--- a/packages/fineui/src/widget/multiselect/multiselect.insert.trigger.js
+++ b/packages/fineui/src/widget/multiselect/multiselect.insert.trigger.js
@ -50,7 +50,7 @@ export class MultiSelectInsertTrigger extends Trigger {
            itemFormatter: o.itemFormatter,
            itemHeight: o.itemHeight,
            watermark: o.watermark,
-            popup: {},
+            popup: o.popup,
            adapter: o.adapter,
            masker: o.masker,
            value: o.value,
--- a/packages/fineui/src/widget/multiselect/multiselect.trigger.js
+++ b/packages/fineui/src/widget/multiselect/multiselect.trigger.js
@ -50,7 +50,7 @@ export class MultiSelectTrigger extends Trigger {
            valueFormatter: o.valueFormatter,
            itemFormatter: o.itemFormatter,
            watermark: o.watermark,
-            popup: {},
+            popup: o.popup,
            adapter: o.adapter,
            masker: o.masker,
            value: o.value,
--- a/packages/fineui/src/widget/multiselect/trigger/searcher.multiselect.insert.js
+++ b/packages/fineui/src/widget/multiselect/trigger/searcher.multiselect.insert.js
@ -132,6 +132,10 @@ export class MultiSelectInsertSearcher extends Widget {
        }
    }

+    getSearcher() {
+        return this.searcher;
+    }
+
    adjustView() {
        this.searcher.adjustView();
    }
--- a/packages/fineui/src/widget/multiselect/trigger/switcher.checkselected.js
+++ b/packages/fineui/src/widget/multiselect/trigger/switcher.checkselected.js
@ -9,6 +9,7 @@ export class MultiSelectCheckSelectedSwitcher extends Widget {

    static EVENT_TRIGGER_CHANGE = "EVENT_TRIGGER_CHANGE";
    static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
+    static EVENT_AFTER_POPUPVIEW = "EVENT_AFTER_POPUPVIEW";
    static EVENT_AFTER_HIDEVIEW = "EVENT_AFTER_HIDEVIEW";

    _defaultConfig() {
@ -72,6 +73,7 @@ export class MultiSelectCheckSelectedSwitcher extends Widget {
            const me = this;
            nextTick(() => {
                me._populate();
+                self.fireEvent(MultiSelectCheckSelectedSwitcher.EVENT_AFTER_POPUPVIEW);
            });
        });
    }
@ -80,6 +82,10 @@ export class MultiSelectCheckSelectedSwitcher extends Widget {
        this.switcher.adjustView();
    }

+    getView() {
+        return this.switcher.getView();
+    }
+
    hideView() {
        this.switcher.empty();
        this.switcher.hideView();
--- a/packages/fineui/src/widget/multitree/multi.tree.combo.js
+++ b/packages/fineui/src/widget/multitree/multi.tree.combo.js
@ -10,7 +10,7 @@ import {
    VerticalAdaptLayout,
    deepClone,
    Selection,
-    SIZE_CONSANTS
+    size
 } from "@/core";
 import { Single, Combo } from "@/base";
 import { MultiTreeSearcher } from "./trigger/searcher.multi.tree";
@ -27,12 +27,15 @@ export class MultiTreeCombo extends Single {

    static EVENT_FOCUS = "EVENT_FOCUS";
    static EVENT_BLUR = "EVENT_BLUR";
+    static EVENT_START = "EVENT_START";
    static EVENT_STOP = "EVENT_STOP";
    static EVENT_SEARCHING = "EVENT_SEARCHING";
    static EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM";
    static EVENT_CONFIRM = "EVENT_CONFIRM";
    static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
    static EVENT_AFTER_HIDEVIEW = "EVENT_AFTER_HIDEVIEW";
+    static EVENT_BEFORE_NUMBER_COUNTER_POPUPVIEW = "EVENT_BEFORE_NUMBER_COUNTER_POPUPVIEW";
+    static EVENT_AFTER_NUMBER_COUNTER_POPUPVIEW = "EVENT_AFTER_NUMBER_COUNTER_POPUPVIEW";

    _defaultConfig() {
        return extend(super._defaultConfig(...arguments), {
@ -42,6 +45,8 @@ export class MultiTreeCombo extends Single {
            height: 24,
            allowEdit: true,
            isNeedAdjustWidth: true,
+            popup: {},
+            masker: {},
        });
    }

@ -63,23 +68,20 @@ export class MultiTreeCombo extends Single {
        this.storeValue = { value: o.value || {} };

        this.trigger = createWidget({
-            type: "bi.multi_select_trigger",
+            type: MultiSelectTrigger.xtype,
+            popup: o.popup,
+            masker: o.masker,
            allowEdit: o.allowEdit,
            height: toPix(o.height, o.simple ? 1 : 2),
            valueFormatter: o.valueFormatter,
            text: o.text,
            defaultText: o.defaultText,
            watermark: o.watermark,
-            masker: {
-                offset: {
-                    left: 0,
-                    top: 0,
-                    right: 0,
-                    bottom: SIZE_CONSANTS.LIST_ITEM_HEIGHT + 1,
-                },
+            adapter: () => {
+                return this.popup.getView();
            },
            searcher: {
-                type: "bi.multi_tree_searcher",
+                type: MultiTreeSearcher.xtype,
                itemsCreator: o.itemsCreator,
                listeners: [
                    {
@ -104,8 +106,6 @@ export class MultiTreeCombo extends Single {
                type: MultiTreePopup.xtype,
                ref() {
                    self.popup = this;
-                    self.trigger.setAdapter(this);
-                    self.numberCounter.setAdapter(this);
                },
                listeners: [
                    {
@ -160,13 +160,16 @@ export class MultiTreeCombo extends Single {
                    });
                },
                maxWidth: o.isNeedAdjustWidth ? "auto" : 500,
+                ...o.popup,
            },
            isNeedAdjustWidth: o.isNeedAdjustWidth,
            value: { value: o.value || {} },
            hideChecker(e) {
                return (
                    triggerBtn.element.find(e.target).length === 0 &&
-                    self.numberCounter.element.find(e.target).length === 0
+                    size(self.numberCounter.getView()?.element.find(e.target)) === 0 &&
+                    size(self.trigger.getSearcher().getSearcher().getView()?.element.find(e.target)) === 0 &&
+                    self.trigger.getSearcher().getSearcher().getView()?.element[0] !== e.target
                );
            },
        });
@ -193,6 +196,7 @@ export class MultiTreeCombo extends Single {
            self.storeValue = { value: self.combo.getValue() };
            this.setValue(self.storeValue);
            self.numberCounter.setValue(self.storeValue);
+            self.fireEvent(MultiTreeCombo.EVENT_START);
        });
        this.trigger.on(MultiSelectTrigger.EVENT_STOP, function () {
            self.storeValue = { value: this.getValue() };
@ -295,23 +299,18 @@ export class MultiTreeCombo extends Single {
        });

        this.numberCounter = createWidget({
-            type: "bi.multi_select_check_selected_switcher",
+            type: MultiSelectCheckSelectedSwitcher,
            el: {
-                // type: "bi.multi_tree_check_selected_button",
                type: MultiTreeCheckSelectedButton.xtype,
            },
            popup: {
-                // type: "bi.multi_tree_check_pane",
                type: MultiTreeCheckPane.xtype,
+                ...o.popup,
            },
-            masker: {
-                offset: {
-                    left: 0,
-                    top: 0,
-                    right: 0,
-                    bottom: SIZE_CONSANTS.LIST_ITEM_HEIGHT + 1,
-                },
+            adapter: () => {
+                return this.popup.getView();
            },
+            masker: o.masker,
            itemsCreator: o.itemsCreator,
            valueFormatter: o.valueFormatter,
            value: { value: o.value || {} },
@ -334,8 +333,12 @@ export class MultiTreeCombo extends Single {
                    want2showCounter = null;
                    showCounter();
                }
+                this.fireEvent(MultiTreeCombo.EVENT_BEFORE_NUMBER_COUNTER_POPUPVIEW);
            }
        );
+        this.numberCounter.on(MultiSelectCheckSelectedSwitcher.EVENT_AFTER_POPUPVIEW, function() {
+            self.fireEvent(MultiTreeCombo.EVENT_AFTER_NUMBER_COUNTER_POPUPVIEW);
+        });

        this.numberCounter.on(Events.VIEW, b => {
            nextTick(() => {
@ -443,4 +446,16 @@ export class MultiTreeCombo extends Single {
    setWaterMark(v) {
        this.trigger.setWaterMark(v);
    }
+
+    getPopup() {
+        return this.popup;
+    }
+
+    getNumberCounter() {
+        return this.numberCounter;
+    }
+
+    getTrigger() {
+        return this.trigger;
+    }
 }
--- a/packages/fineui/src/widget/multitree/multi.tree.popup.js
+++ b/packages/fineui/src/widget/multitree/multi.tree.popup.js
@ -105,4 +105,8 @@ export class MultiTreePopup extends Pane {
    resetWidth(w) {
        this.popupView.resetWidth(w);
    }
+
+    getView() {
+        return this.popupView.getView();
+    }
 }
--- a/packages/fineui/src/widget/multitree/trigger/searcher.multi.tree.js
+++ b/packages/fineui/src/widget/multitree/trigger/searcher.multi.tree.js
@ -220,6 +220,10 @@ export class MultiTreeSearcher extends Widget {
        return this.editor.getState();
    }

+    getSearcher() {
+        return this.searcher;
+    }
+
    setValue(ob) {
        this.setState(ob);
        this.searcher.setValue(ob);
--- a/packages/fineui/src/widget/numberinterval/numberinterval.js
+++ b/packages/fineui/src/widget/numberinterval/numberinterval.js
@ -41,6 +41,8 @@ export class NumberInterval extends Single {
    static EVENT_CONFIRM = "EVENT_CONFIRM";
    static EVENT_VALID = "EVENT_VALID";
    static EVENT_ERROR = "EVENT_ERROR";
+    static EVENT_BEFORE_LEFT_POPUPVIEW = "EVENT_BEFORE_LEFT_POPUPVIEW";
+    static EVENT_BEFORE_RIGHT_POPUPVIEW = "EVENT_BEFORE_RIGHT_POPUPVIEW";

    _defaultConfig() {
        const conf = super._defaultConfig(...arguments);
@ -151,6 +153,8 @@ export class NumberInterval extends Single {
        });
        this.smallCombo = createWidget({
            type: IconCombo.xtype,
+            container: o.container,
+            popup: o.popup,
            cls: `number-interval-small-combo${
                o.simple ? "" : " bi-border-top bi-border-bottom bi-border-right bi-border-corner-right-radius"
            }`,
@ -168,6 +172,12 @@ export class NumberInterval extends Single {
                    iconCls: "less-equal-font",
                },
            ],
+            listeners: [{
+                eventName: IconCombo.EVENT_BEFORE_POPUPVIEW,
+                action: () => {
+                    this.fireEvent(NumberInterval.EVENT_BEFORE_LEFT_POPUPVIEW);
+                },
+            }],
        });
        if (o.closeMin === true) {
            this.smallCombo.setValue(1);
@ -176,6 +186,8 @@ export class NumberInterval extends Single {
        }
        this.bigCombo = createWidget({
            type: IconCombo.xtype,
+            container: o.container,
+            popup: o.popup,
            cls: `number-interval-big-combo${
                o.simple ? "" : " bi-border-top bi-border-bottom bi-border-left bi-border-corner-left-radius"
            }`,
@ -193,6 +205,12 @@ export class NumberInterval extends Single {
                    iconCls: "less-equal-font",
                },
            ],
+            listeners: [{
+                eventName: IconCombo.EVENT_BEFORE_POPUPVIEW,
+                action: () => {
+                    this.fireEvent(NumberInterval.EVENT_BEFORE_RIGHT_POPUPVIEW);
+                },
+            }],
        });
        if (o.closeMax === true) {
            this.bigCombo.setValue(1);
@ -621,6 +639,14 @@ export class NumberInterval extends Single {
        this.bigEditor.focus();
    }

+    getLeftCombo() {
+        return this.smallCombo;
+    }
+
+    getRightCombo() {
+        return this.bigCombo;
+    }
+
    destroyed() {
        const c = this.constants;
        Bubbles.remove(c.typeError);
--- a/packages/fineui/src/widget/singleselect/singleselect.insert.combo.js
+++ b/packages/fineui/src/widget/singleselect/singleselect.insert.combo.js
@ -10,7 +10,8 @@ import {
    isNotNull,
    nextTick,
    AbsoluteLayout,
-    makeObject
+    makeObject,
+    size
 } from "@/core";
 import { Single, Combo } from "@/base";
 import { SingleSelectTrigger } from "./singleselect.trigger";
@ -25,10 +26,12 @@ export class SingleSelectInsertCombo extends Single {
    static REQ_GET_ALL_DATA = -1;
    static EVENT_FOCUS = "EVENT_FOCUS";
    static EVENT_BLUR = "EVENT_BLUR";
+    static EVENT_START = "EVENT_START";
    static EVENT_STOP = "EVENT_STOP";
    static EVENT_SEARCHING = "EVENT_SEARCHING";
    static EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM";
    static EVENT_CONFIRM = "EVENT_CONFIRM";
+    static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"

    _defaultConfig() {
        return extend(super._defaultConfig(...arguments), {
@ -40,6 +43,8 @@ export class SingleSelectInsertCombo extends Single {
            height: 24,
            allowEdit: true,
            watermark: i18nText("BI-Basic_Search_And_Patch_Paste"),
+            popup: {},
+            masker: {},
        });
    }

@ -57,6 +62,7 @@ export class SingleSelectInsertCombo extends Single {

        this.trigger = createWidget({
            type: SingleSelectTrigger.xtype,
+            masker: o.masker,
            watermark: o.watermark,
            height: toPix(o.height, o.simple ? 1 : 2),
            allowNoSelect: o.allowNoSelect,
@ -77,6 +83,7 @@ export class SingleSelectInsertCombo extends Single {
            searcher: {
                popup: {
                    type: SingleSelectSearchInsertPane.xtype,
+                    ...o.popup,
                },
            },
        });
@ -91,6 +98,7 @@ export class SingleSelectInsertCombo extends Single {
        this.trigger.on(SingleSelectTrigger.EVENT_START, function () {
            self._setStartValue();
            this.getSearcher().setValue(self.storeValue);
+            self.fireEvent(SingleSelectInsertCombo.EVENT_START);
        });
        this.trigger.on(SingleSelectTrigger.EVENT_STOP, () => {
            self._setStartValue();
@ -156,9 +164,13 @@ export class SingleSelectInsertCombo extends Single {
                        self.trigger.getSearcher().adjustView();
                    });
                },
+                ...o.popup,
            },
            hideChecker(e) {
-                return triggerBtn.element.find(e.target).length === 0;
+                return (
+                    triggerBtn.element.find(e.target).length === 0 &&
+                    size(self.trigger.getSearcher().getSearcher().getView()?.element.find(e.target)) === 0
+                );
            },
            value: o.value,
        });
@ -171,6 +183,7 @@ export class SingleSelectInsertCombo extends Single {
            nextTick(() => {
                self.populate();
            });
+            self.fireEvent(SingleSelectInsertCombo .EVENT_BEFORE_POPUPVIEW);
        });
        // 当退出的时候如果还在处理请求，则等请求结束后再对外发确定事件
        this.wants2Quit = false;
@ -261,4 +274,12 @@ export class SingleSelectInsertCombo extends Single {
    populate() {
        this.combo.populate(...arguments);
    }
+
+    getPopup() {
+        return this.popup;
+    }
+
+    getTrigger() {
+        return this.trigger;
+    }
 }
--- a/packages/fineui/src/widget/singleselect/trigger/searcher.singleselect.js
+++ b/packages/fineui/src/widget/singleselect/trigger/searcher.singleselect.js
@ -131,6 +131,10 @@ export class SingleSelectSearcher extends Widget {
        return this.searcher.getView() && this.searcher.getView().hasChecked();
    }

+    getSearcher() {
+        return this.searcher;
+    }
+
    setAdapter(adapter) {
        this.searcher.setAdapter(adapter);
    }
--- a/packages/fineui/src/widget/textvaluedownlistcombo/combo.textvaluedownlist.js
+++ b/packages/fineui/src/widget/textvaluedownlistcombo/combo.textvaluedownlist.js
@ -20,6 +20,7 @@ export class TextValueDownListCombo extends Widget {
    static xtype = "bi.text_value_down_list_combo";

    static EVENT_CHANGE = "EVENT_CHANGE";
+    static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";

    _defaultConfig(config) {
        return extend(super._defaultConfig(...arguments), {
@ -42,6 +43,7 @@ export class TextValueDownListCombo extends Widget {
        this.combo = createWidget({
            type: DownListCombo.xtype,
            element: this,
+            container: o.container,
            chooseType: Selection.Single,
            adjustLength: 2,
            width: toPix(o.width, 2),
@ -59,6 +61,7 @@ export class TextValueDownListCombo extends Widget {
            },
            value: isNull(value) ? [] : [value],
            items: deepClone(o.items),
+            popup: o.popup,
        });

        this.combo.on(DownListCombo.EVENT_CHANGE, () => {
@ -76,6 +79,10 @@ export class TextValueDownListCombo extends Widget {
                this.fireEvent(TextValueDownListCombo.EVENT_CHANGE);
            }
        });
+
+        this.combo.on(DownListCombo.EVENT_BEFORE_POPUPVIEW, () => {
+            this.fireEvent(TextValueDownListCombo.EVENT_BEFORE_POPUPVIEW);
+        });
    }

    _createValueMap() {
@ -114,4 +121,8 @@ export class TextValueDownListCombo extends Widget {
        this.combo.populate(items);
        this._createValueMap();
    }
+
+    getPopup() {
+        return this.combo.getPopup();
+    }
 }
--- a/packages/fineui/src/widget/timeinterval/dateinterval.js
+++ b/packages/fineui/src/widget/timeinterval/dateinterval.js
@ -30,6 +30,8 @@ export class DateInterval extends Single {
    static EVENT_ERROR = "EVENT_ERROR";
    static EVENT_CHANGE = "EVENT_CHANGE";
    static EVENT_BEFORE_YEAR_MONTH_POPUPVIEW = "EVENT_BEFORE_YEAR_MONTH_POPUPVIEW";
+    static EVENT_BEFORE_START_POPUPVIEW = "EVENT_BEFORE_START_POPUPVIEW";
+    static EVENT_BEFORE_END_POPUPVIEW = "EVENT_BEFORE_END_POPUPVIEW";

    _defaultConfig() {
        const conf = super._defaultConfig(...arguments);
@ -50,6 +52,13 @@ export class DateInterval extends Single {
        this.left = this._createCombo(o.value.start, o.watermark?.start);
        this.right = this._createCombo(o.value.end, o.watermark?.end);

+        this.left.on(DynamicDateCombo.EVENT_BEFORE_POPUPVIEW, () => {
+            this.fireEvent(DateInterval.EVENT_BEFORE_START_POPUPVIEW);
+        })
+        this.right.on(DynamicDateCombo.EVENT_BEFORE_POPUPVIEW, () => {
+            this.fireEvent(DateInterval.EVENT_BEFORE_END_POPUPVIEW);
+        })
+
        return {
            type: HorizontalFillLayout.xtype,
            columnSize: ["fill", "", "fill"],
@ -79,6 +88,8 @@ export class DateInterval extends Single {
        const o = this.options;
        const combo = createWidget({
            type: DynamicDateCombo.xtype,
+            container: o.container,
+            popup: o.popup,
            isPreview: o.isPreview,
            supportDynamic: o.supportDynamic,
            minDate: o.minDate,
@ -243,4 +254,11 @@ export class DateInterval extends Single {
            end: this.right.getValue(),
        };
    }
+
+    getPopup() {
+        return {
+            start: this.left.getPopup(),
+            end: this.right.getPopup(),
+        };
+    }
 }
--- a/packages/fineui/src/widget/timeinterval/timeinterval.js
+++ b/packages/fineui/src/widget/timeinterval/timeinterval.js
@ -29,6 +29,8 @@ export class TimeInterval extends Single {
    static EVENT_VALID = "EVENT_VALID";
    static EVENT_ERROR = "EVENT_ERROR";
    static EVENT_CHANGE = "EVENT_CHANGE";
+    static EVENT_BEFORE_START_POPUPVIEW = "EVENT_BEFORE_START_POPUPVIEW";
+    static EVENT_BEFORE_END_POPUPVIEW = "EVENT_BEFORE_END_POPUPVIEW";

    _defaultConfig() {
        const conf = super._defaultConfig(...arguments);
@ -48,6 +50,13 @@ export class TimeInterval extends Single {
        this.left = this._createCombo(o.value.start, o.watermark?.start);
        this.right = this._createCombo(o.value.end, o.watermark?.end);

+        this.left.on(DynamicDateTimeCombo.EVENT_BEFORE_POPUPVIEW, () => {
+            this.fireEvent(TimeInterval.EVENT_BEFORE_START_POPUPVIEW);
+        })
+        this.right.on(DynamicDateTimeCombo.EVENT_BEFORE_POPUPVIEW, () => {
+            this.fireEvent(TimeInterval.EVENT_BEFORE_END_POPUPVIEW);
+        })
+
        return {
            type: HorizontalFillLayout.xtype,
            columnSize: ["fill", "", "fill"],
@ -77,6 +86,8 @@ export class TimeInterval extends Single {
        const o = this.options;
        const combo = createWidget({
            type: DynamicDateTimeCombo.xtype,
+            container: o.container,
+            popup: o.popup,
            isPreview: o.isPreview,
            timeSelectTypes: o.timeSelectTypes,
            simple: o.simple,
@ -250,4 +261,11 @@ export class TimeInterval extends Single {
            end: this.right.getValue(),
        };
    }
+
+    getPopup() {
+        return {
+            start: this.left.getPopup(),
+            end: this.right.getPopup(),
+        };
+    }
 }
--- a/packages/fineui/src/widget/year/combo.year.js
+++ b/packages/fineui/src/widget/year/combo.year.js
@ -98,13 +98,13 @@ export class DynamicYearCombo extends Widget {
                    supportDynamic: o.supportDynamic,
                    isPreview: o.isPreview,
                    ref: _ref => {
-                        this.popup = _ref;
+                        this.popupEl = _ref;
                    },
                    listeners: [
                        {
                            eventName: DynamicYearPopup.EVENT_CHANGE,
                            action: () => {
-                                this.setValue(this.popup.getValue());
+                                this.setValue(this.popupEl.getValue());
                                this.combo.hideView();
                                this.fireEvent(DynamicYearCombo.EVENT_CONFIRM);
                            },
@ -129,7 +129,7 @@ export class DynamicYearCombo extends Widget {
                        {
                            eventName: DynamicYearPopup.BUTTON_OK_EVENT_CHANGE,
                            action: () => {
-                                this.setValue(this.popup.getValue());
+                                this.setValue(this.popupEl.getValue());
                                this.combo.hideView();
                                this.fireEvent(DynamicDateCombo.EVENT_CONFIRM);
                            },
@ -140,12 +140,16 @@ export class DynamicYearCombo extends Widget {
                    max: o.maxDate,
                },
                value: o.value || "",
+                ref: (ref) => {
+                    this.popup = ref;
+                },
+                ...o.popup,
            },
        });
        this.combo.on(Combo.EVENT_BEFORE_POPUPVIEW, () => {
-            this.popup.setMinDate(o.minDate);
-            this.popup.setMaxDate(o.maxDate);
-            this.popup.setValue(this.storeValue);
+            this.popupEl.setMinDate(o.minDate);
+            this.popupEl.setMaxDate(o.maxDate);
+            this.popupEl.setValue(this.storeValue);
            this.fireEvent(DynamicYearCombo.EVENT_BEFORE_POPUPVIEW);
        });

@ -205,14 +209,14 @@ export class DynamicYearCombo extends Widget {
        const o = this.options;
        o.minDate = minDate;
        this.trigger.setMinDate(minDate);
-        this.popup && this.popup.setMinDate(minDate);
+        this.popupEl && this.popupEl.setMinDate(minDate);
    }

    setMaxDate(maxDate) {
        const o = this.options;
        o.maxDate = maxDate;
        this.trigger.setMaxDate(maxDate);
-        this.popup && this.popup.setMaxDate(maxDate);
+        this.popupEl && this.popupEl.setMaxDate(maxDate);
    }

    hideView() {
@ -240,6 +244,10 @@ export class DynamicYearCombo extends Widget {
    setWaterMark(v) {
        this.trigger.setWaterMark(v);
    }
+
+    getPopup() {
+        return this.popup;
+    }
 }
 extend(DynamicYearCombo, {
    Static: 1,
--- a/packages/fineui/src/widget/yearmonth/combo.yearmonth.js
+++ b/packages/fineui/src/widget/yearmonth/combo.yearmonth.js
@ -109,13 +109,13 @@ export class DynamicYearMonthCombo extends Single {
                    supportDynamic: o.supportDynamic,
                    isPreview: o.isPreview,
                    ref: _ref => {
-                        this.popup = _ref;
+                        this.popupEl = _ref;
                    },
                    listeners: [
                        {
                            eventName: DynamicYearMonthPopup.EVENT_CHANGE,
                            action: () => {
-                                this.setValue(this.popup.getValue());
+                                this.setValue(this.popupEl.getValue());
                                this.combo.hideView();
                                this.fireEvent(DynamicYearMonthCombo.EVENT_CONFIRM);
                            },
@ -147,7 +147,7 @@ export class DynamicYearMonthCombo extends Single {
                        {
                            eventName: DynamicYearMonthPopup.BUTTON_OK_EVENT_CHANGE,
                            action: () => {
-                                const value = this.popup.getValue();
+                                const value = this.popupEl.getValue();
                                if (this._checkValue(value)) {
                                    this.setValue(value);
                                }
@ -161,12 +161,16 @@ export class DynamicYearMonthCombo extends Single {
                    max: o.maxDate,
                },
                value: o.value || "",
+                ref: (ref) => {
+                    this.popup = ref;
+                },
+                ...o.popup,
            },
        });
        this.combo.on(Combo.EVENT_BEFORE_POPUPVIEW, () => {
-            this.popup.setMinDate(o.minDate);
-            this.popup.setMaxDate(o.maxDate);
-            this.popup.setValue(this.storeValue);
+            this.popupEl.setMinDate(o.minDate);
+            this.popupEl.setMaxDate(o.maxDate);
+            this.popupEl.setValue(this.storeValue);
            this.fireEvent(DynamicYearMonthCombo.EVENT_BEFORE_POPUPVIEW);
        });

@ -241,14 +245,18 @@ export class DynamicYearMonthCombo extends Single {
        const o = this.options;
        o.minDate = minDate;
        this.trigger.setMinDate(minDate);
-        this.popup && this.popup.setMinDate(minDate);
+        this.popupEl && this.popupEl.setMinDate(minDate);
    }

    setMaxDate(maxDate) {
        const o = this.options;
        o.maxDate = maxDate;
        this.trigger.setMaxDate(maxDate);
-        this.popup && this.popup.setMaxDate(maxDate);
+        this.popupEl && this.popupEl.setMaxDate(maxDate);
+    }
+
+    getPopup() {
+        return this.popup;
    }

    hideView() {
--- a/packages/fineui/src/widget/yearmonthinterval/yearmonthinterval.js
+++ b/packages/fineui/src/widget/yearmonthinterval/yearmonthinterval.js
@ -20,6 +20,8 @@ export class YearMonthInterval extends Single {
    static EVENT_ERROR = "EVENT_ERROR";
    static EVENT_CHANGE = "EVENT_CHANGE";
    static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
+    static EVENT_BEFORE_START_POPUPVIEW = "EVENT_BEFORE_START_POPUPVIEW";
+    static EVENT_BEFORE_END_POPUPVIEW = "EVENT_BEFORE_END_POPUPVIEW";

    constants = {
        width: 25,
@ -43,6 +45,13 @@ export class YearMonthInterval extends Single {
        this.left = this._createCombo(o.value.start, o.watermark?.start);
        this.right = this._createCombo(o.value.end, o.watermark?.end);

+        this.left.on(DynamicYearMonthCombo.EVENT_BEFORE_POPUPVIEW, () => {
+            this.fireEvent(YearMonthInterval.EVENT_BEFORE_START_POPUPVIEW);
+        })
+        this.right.on(DynamicYearMonthCombo.EVENT_BEFORE_POPUPVIEW, () => {
+            this.fireEvent(YearMonthInterval.EVENT_BEFORE_END_POPUPVIEW);
+        })
+
        return {
            type: HorizontalFillLayout.xtype,
            columnSize: ["fill", "", "fill"],
@ -72,6 +81,8 @@ export class YearMonthInterval extends Single {
        const o = this.options;
        const combo = createWidget({
            type: DynamicYearMonthCombo.xtype,
+            container: o.container,
+            popup: o.popup,
            isPreview: o.isPreview,
            simple: o.simple,
            supportDynamic: o.supportDynamic,
@ -235,4 +246,11 @@ export class YearMonthInterval extends Single {
    getValue() {
        return { start: this.left.getValue(), end: this.right.getValue() };
    }
+
+    getPopup() {
+        return {
+            start: this.left.getPopup(),
+            end: this.right.getPopup(),
+        };
+    }
 }
--- a/packages/fineui/src/widget/yearquarter/combo.yearquarter.js
+++ b/packages/fineui/src/widget/yearquarter/combo.yearquarter.js
@ -112,13 +112,13 @@ export class DynamicYearQuarterCombo extends Widget {
                    supportDynamic: o.supportDynamic,
                    isPreview: o.isPreview,
                    ref: _ref => {
-                        this.popup = _ref;
+                        this.popupEl = _ref;
                    },
                    listeners: [
                        {
                            eventName: DynamicYearQuarterPopup.EVENT_CHANGE,
                            action: () => {
-                                this.setValue(this.popup.getValue());
+                                this.setValue(this.popupEl.getValue());
                                this.combo.hideView();
                                this.fireEvent(DynamicYearQuarterCombo.EVENT_CONFIRM);
                            },
@ -150,7 +150,7 @@ export class DynamicYearQuarterCombo extends Widget {
                        {
                            eventName: DynamicYearQuarterPopup.BUTTON_OK_EVENT_CHANGE,
                            action: () => {
-                                const value = this.popup.getValue();
+                                const value = this.popupEl.getValue();
                                if (this._checkValue(value)) {
                                    this.setValue(value);
                                }
@ -164,12 +164,16 @@ export class DynamicYearQuarterCombo extends Widget {
                    max: o.maxDate,
                },
                value: o.value || "",
+                ref: (ref) => {
+                    this.popup = ref;
+                },
+                ...o.popup,
            },
        });
        this.combo.on(Combo.EVENT_BEFORE_POPUPVIEW, () => {
-            this.popup.setMinDate(o.minDate);
-            this.popup.setMaxDate(o.maxDate);
-            this.popup.setValue(this.storeValue);
+            this.popupEl.setMinDate(o.minDate);
+            this.popupEl.setMaxDate(o.maxDate);
+            this.popupEl.setValue(this.storeValue);
            this.fireEvent(DynamicYearQuarterCombo.EVENT_BEFORE_POPUPVIEW);
        });

@ -244,14 +248,18 @@ export class DynamicYearQuarterCombo extends Widget {
        const o = this.options;
        o.minDate = minDate;
        this.trigger.setMinDate(minDate);
-        this.popup && this.popup.setMinDate(minDate);
+        this.popupEl && this.popupEl.setMinDate(minDate);
    }

    setMaxDate(maxDate) {
        const o = this.options;
        o.maxDate = maxDate;
        this.trigger.setMaxDate(maxDate);
-        this.popup && this.popup.setMaxDate(maxDate);
+        this.popupEl && this.popupEl.setMaxDate(maxDate);
+    }
+
+    getPopup() {
+        return this.popup;
    }

    hideView() {
--- a/packages/fineui/typescript/case/combo/iconcombo/combo.icon.ts
+++ b/packages/fineui/typescript/case/combo/iconcombo/combo.icon.ts
@ -1,13 +1,17 @@
+import { PopupView } from "../../../base/layer/layer.popup";
 import { Widget } from '../../../core/widget';

 export declare class IconCombo extends Widget {
    static xtype: string;

    static EVENT_CHANGE: string;
+    static EVENT_BEFORE_POPUPVIEW: string;

    showView(): void;

    hideView(): void;

    populate(items: any[]): void;
+
+    getPopup(): PopupView;
 }
--- a/packages/fineui/typescript/index.ts
+++ b/packages/fineui/typescript/index.ts
@ -103,6 +103,7 @@ export { CenterAdaptLayout } from "./core/wrapper/layout/adapt/adapt.center";
 export { VerticalAdaptLayout } from "./core/wrapper/layout/adapt/adapt.vertical";
 export { MultiSelectInsertCombo } from "./widget/multiselect/multiselect.insert.combo";
 export { MultiSelectCombo } from "./widget/multiselect/multiselect.combo";
+export { MultiSelectCheckSelectedSwitcher } from "./widget/multiselect/switcher.checkselected";
 export { SearchEditor } from "./widget/editor/editor.search";
 export { MultiLayerSingleLevelTree } from "./widget/multilayersingletree/multilayersingletree.leveltree";
 export { SimpleColorChooser } from "./case/colorchooser/colorchooser.simple";
--- a/packages/fineui/typescript/widget/downlist/combo.downlist.ts
+++ b/packages/fineui/typescript/widget/downlist/combo.downlist.ts
@ -1,3 +1,4 @@
+import { PopupView } from "../../base/layer/layer.popup";
 import { Widget } from "../../core/widget";

 export declare class DownListCombo extends Widget {
@ -15,4 +16,6 @@ export declare class DownListCombo extends Widget {
    adjustWidth: (e?: MouseEvent) => void;

    adjustHeight: (e?: MouseEvent) => void;
+
+    getPopup(): PopupView;
 }
--- a/packages/fineui/typescript/widget/dynamicdate/dynamicdate.combo.ts
+++ b/packages/fineui/typescript/widget/dynamicdate/dynamicdate.combo.ts
@ -1,4 +1,5 @@
-import { Single } from '../../base/single/single';
+import { PopupView } from "../../base/layer/layer.popup";
+import { Single } from "../../base/single/single";

 export declare class DynamicDateCombo extends Single {
    static xtype: string;
@ -26,6 +27,7 @@ export declare class DynamicDateCombo extends Single {
        };
        watermark?: string;
        simple?: boolean;
+        popup?: any;
    } & Single['props']

    setMinDate(minDate: string): void;
@ -43,6 +45,8 @@ export declare class DynamicDateCombo extends Single {
    blur(): void;

    setWaterMark(v: string): void;
+
+    getPopup(): PopupView;
 }

 export interface DynamicDataComboValue {
--- a/packages/fineui/typescript/widget/dynamicdatetime/dynamicdatetime.combo.ts
+++ b/packages/fineui/typescript/widget/dynamicdatetime/dynamicdatetime.combo.ts
@ -1,3 +1,4 @@
+import { PopupView } from '../../base/layer/layer.popup';
 import { Single } from '../../base/single/single';

 export declare class DynamicDateTimeCombo extends Single {
@ -23,6 +24,7 @@ export declare class DynamicDateTimeCombo extends Single {
            tabIndex?: number;
        };
        watermark?: string;
+        popup?: any;
    } & Single['props'];

    getValue(): DynamicDateTimeComboValue;
@ -40,6 +42,8 @@ export declare class DynamicDateTimeCombo extends Single {
    blur(): void;

    setWaterMark(v: string): void
+
+    getPopup(): PopupView;
 }

 export interface DynamicDateTimeComboValue {
--- a/packages/fineui/typescript/widget/multiselect/multiselect.insert.combo.ts
+++ b/packages/fineui/typescript/widget/multiselect/multiselect.insert.combo.ts
@ -1,9 +1,12 @@
+import { PopupView } from "../../base/layer/layer.popup";
 import { Single } from "../../base/single/single";
+import { MultiSelectCheckSelectedSwitcher } from "./switcher.checkselected";

 export declare class MultiSelectInsertCombo extends Single {
    static xtype: string;
    static EVENT_FOCUS: string;
    static EVENT_BLUR: string;
+    static EVENT_START: string;
    static EVENT_STOP: string;
    static EVENT_SEARCHING: string;
    static EVENT_CLICK_ITEM: string;
@ -12,6 +15,9 @@ export declare class MultiSelectInsertCombo extends Single {
    static REQ_GET_DATA_LENGTH: 1;
    static REQ_GET_ALL_DATA: -1;
    static EVENT_AFTER_HIDEVIEW: string;
+    static EVENT_BEFORE_POPUPVIEW: string;
+    static EVENT_BEFORE_NUMBER_COUNTER_POPUPVIEW: string;
+    static EVENT_AFTER_NUMBER_COUNTER_POPUPVIEW: string;

    props: {
        itemsCreator?: Function;
@ -21,6 +27,8 @@ export declare class MultiSelectInsertCombo extends Single {
        text?: string;
        watermark?: string;
        container?: any;
+        popup?: any;
+        masker?: any;
    } & Single["props"];

    _itemsCreator4Trigger(op: any, callback: Function): void;
@ -67,5 +75,9 @@ export declare class MultiSelectInsertCombo extends Single {
        assist: string[];
    };

+    getPopup(): PopupView;
+
+    getNumberCounter(): MultiSelectCheckSelectedSwitcher;
+
    populate(...args: any[]): void;
 }
--- a/packages/fineui/typescript/widget/multiselect/switcher.checkselected.ts
+++ b/packages/fineui/typescript/widget/multiselect/switcher.checkselected.ts
@ -0,0 +1,19 @@
+import { Widget } from '../../core/widget';
+
+export declare class MultiSelectCheckSelectedSwitcher extends Widget {
+    static xtype: string;
+    static EVENT_TRIGGER_CHANGE: string;
+    static EVENT_BEFORE_POPUPVIEW: string;
+    static EVENT_AFTER_HIDEVIEW: string;
+
+    props: {
+        itemsCreator?: Function;
+        valueFormatter?: Function;
+    };
+
+    adjustView(): void;
+
+    hideView(): void;
+
+    getView(): Widget;
+}
--- a/packages/fineui/typescript/widget/multitree/multi.tree.combo.ts
+++ b/packages/fineui/typescript/widget/multitree/multi.tree.combo.ts
@ -1,5 +1,7 @@
+import { PopupView } from "../../base/layer/layer.popup";
 import { Single } from "../../base/single/single";
 import { Widget } from "../../core/widget";
+import { MultiSelectCheckSelectedSwitcher } from "../multiselect/switcher.checkselected";

 export declare class MultiTreeCombo extends Single {
    static xtype: string;
@ -10,6 +12,13 @@ export declare class MultiTreeCombo extends Single {
    static EVENT_CLICK_ITEM: string;
    static EVENT_CONFIRM: string;
    static EVENT_BEFORE_POPUPVIEW: string;
+    static EVENT_BEFORE_NUMBER_COUNTER_POPUPVIEW: string;
+    static EVENT_AFTER_NUMBER_COUNTER_POPUPVIEW: string;
+
+    props: {
+        popup?: any;
+        masker?: any;
+    } & Single["props"];

    showView(): void;
    hideView(): void;
@ -21,4 +30,8 @@ export declare class MultiTreeCombo extends Single {
    blur(): void;

    setWaterMark(v: string): void;
+
+    getPopup(): PopupView;
+
+    getNumberCounter(): MultiSelectCheckSelectedSwitcher;
 }
--- a/packages/fineui/typescript/widget/multitree/multi.tree.popup.ts
+++ b/packages/fineui/typescript/widget/multitree/multi.tree.popup.ts
@ -1,3 +1,4 @@
+import { ButtonGroup } from "../../base/combination/group.button";
 import { Pane } from "../../base/pane";

 export declare class MultiTreePopup extends Pane {
@ -12,4 +13,6 @@ export declare class MultiTreePopup extends Pane {
    resetHeight(h: number): void;

    resetWidth(w: number): void;
+
+    getView(): ButtonGroup;
 }
--- a/packages/fineui/typescript/widget/numberinterval/numberinterval.ts
+++ b/packages/fineui/typescript/widget/numberinterval/numberinterval.ts
@ -1,3 +1,4 @@
+import { Combo } from '../../base/combination/combo';
 import { Single } from '../../base/single/single';

 export declare class NumberInterval extends Single {
@ -6,6 +7,8 @@ export declare class NumberInterval extends Single {
    static EVENT_CONFIRM: string;
    static EVENT_VALID: string;
    static EVENT_ERROR: string;
+    static EVENT_BEFORE_LEFT_POPUPVIEW: string;
+    static EVENT_BEFORE_RIGHT_POPUPVIEW: string;

    props: {
        watermark?: string;
@ -40,4 +43,8 @@ export declare class NumberInterval extends Single {
    focusMinEditor(): void;

    focusMaxEditor(): void;
+
+    getLeftCombo(): Combo;
+
+    getRightCombo(): Combo;
 }
--- a/packages/fineui/typescript/widget/singleselect/singleselect.insert.combo.ts
+++ b/packages/fineui/typescript/widget/singleselect/singleselect.insert.combo.ts
@ -1,3 +1,4 @@
+import { PopupView } from "../../base/layer/layer.popup";
 import { Single } from "../../base/single/single";

 export declare class SingleSelectInsertCombo extends Single {
@ -8,6 +9,7 @@ export declare class SingleSelectInsertCombo extends Single {
    static EVENT_SEARCHING: string;
    static EVENT_CLICK_ITEM: string;
    static EVENT_CONFIRM: string;
+    static EVENT_BEFORE_POPUPVIEW: string;

    props: {
        text?: string,
@ -16,5 +18,8 @@ export declare class SingleSelectInsertCombo extends Single {
        valueFormatter?: Function,
        allowEdit?: boolean,
        watermark?: string,
+        popup?: any;
    } & Single['props']
+
+    getPopup(): PopupView;
 }
--- a/packages/fineui/typescript/widget/textvaluedownlistcombo/combo.textvaluedownlist.ts
+++ b/packages/fineui/typescript/widget/textvaluedownlistcombo/combo.textvaluedownlist.ts
@ -1,8 +1,17 @@
+import { PopupView } from "../../base/layer/layer.popup";
 import { Widget } from "../../core/widget";

 export declare class TextValueDownListCombo extends Widget {
    static xtype: string;
    static EVENT_CHANGE: string;
+    static EVENT_BEFORE_POPUPVIEW: string;
+
+    props: {
+        container?: string;
+        popup?: any;
+    };

    getValue<T>(): [T];
+
+    getPopup(): PopupView;
 }
--- a/packages/fineui/typescript/widget/timeinterval/dateinterval.ts
+++ b/packages/fineui/typescript/widget/timeinterval/dateinterval.ts
@ -1,5 +1,5 @@
 import { Single } from "../../base/single/single";
-import { DynamicDataComboValue } from "../dynamicdate/dynamicdate.combo";
+import { DynamicDataComboValue, DynamicDateCombo } from "../dynamicdate/dynamicdate.combo";

 export declare class DateInterval extends Single {
    static xtype: string;
@ -7,13 +7,17 @@ export declare class DateInterval extends Single {
    static EVENT_VALID: string;
    static EVENT_ERROR: string;
    static EVENT_BEFORE_YEAR_MONTH_POPUPVIEW: string;
+    static EVENT_BEFORE_START_POPUPVIEW: string;
+    static EVENT_BEFORE_END_POPUPVIEW: string;

    props: {
        minDate?: string;
        maxDate?: string;
        supportDynamic?: boolean;
        watermark?: string;
-    } & Single['props']
+        container?: string;
+        popup?: any;
+    } & Single["props"];

    getValue(): {
        start: DynamicDataComboValue;
@ -23,4 +27,9 @@ export declare class DateInterval extends Single {
    setMinDate(minDate: string): void;

    setMaxDate(minDate: string): void;
+
+    getPopup(): {
+        start: DynamicDateCombo;
+        end: DynamicDateCombo;
+    };
 }
--- a/packages/fineui/typescript/widget/timeinterval/timeinterval.ts
+++ b/packages/fineui/typescript/widget/timeinterval/timeinterval.ts
@ -1,11 +1,13 @@
 import { Single } from "../../base/single/single";
-import { DynamicDateTimeComboValue } from "../dynamicdatetime/dynamicdatetime.combo";
+import { DynamicDateTimeCombo, DynamicDateTimeComboValue } from "../dynamicdatetime/dynamicdatetime.combo";

 export declare class TimeInterval extends Single {
    static xtype: string;
    static EVENT_CHANGE: string;
    static EVENT_VALID: string;
    static EVENT_ERROR: string;
+    static EVENT_BEFORE_START_POPUPVIEW: string;
+    static EVENT_BEFORE_END_POPUPVIEW: string;

    props: {
        minDate?: string;
@ -13,6 +15,8 @@ export declare class TimeInterval extends Single {
        supportDynamic?: boolean;
        watermark?: string;
        simple?: boolean;
+        container?: string;
+        popup?: any;
    } & Single['props'];

    getValue(): {
@ -23,4 +27,9 @@ export declare class TimeInterval extends Single {
    setMinDate(minDate: string): void;

    setMaxDate(minDate: string): void;
+
+    getPopup(): {
+        start: DynamicDateTimeCombo;
+        end: DynamicDateTimeCombo;
+    };
 }
--- a/packages/fineui/typescript/widget/year/combo.year.ts
+++ b/packages/fineui/typescript/widget/year/combo.year.ts
@ -1,3 +1,4 @@
+import { PopupView } from "../../base/layer/layer.popup";
 import { Widget } from "../../core/widget";

 export declare class DynamicYearCombo extends Widget {
@ -7,11 +8,17 @@ export declare class DynamicYearCombo extends Widget {
    static EVENT_CONFIRM: string;
    static EVENT_BEFORE_POPUPVIEW: string;

+    props: {
+        popup?: any;
+    };
+
    getValue(): DynamicYearComboValue;

    setMinDate(minDate: string): void;

    setMaxDate(maxDate: string): void;
+
+    getPopup(): PopupView;
 }

 export interface DynamicYearComboValue {
--- a/packages/fineui/typescript/widget/yearmonth/combo.yearmonth.ts
+++ b/packages/fineui/typescript/widget/yearmonth/combo.yearmonth.ts
@ -1,3 +1,4 @@
+import { PopupView } from "../../base/layer/layer.popup";
 import { Single } from "../../base/single/single";

 export declare class DynamicYearMonthCombo extends Single {
@ -8,6 +9,10 @@ export declare class DynamicYearMonthCombo extends Single {
    static EVENT_CONFIRM: string;
    static EVENT_BEFORE_POPUPVIEW: string;

+    props: {
+        popup?: any;
+    } & Single["props"];
+
    hideView(): void;

    getKey(): string;
@ -17,6 +22,8 @@ export declare class DynamicYearMonthCombo extends Single {
    setMinDate(minDate: string): void;

    setMaxDate(maxDate: string): void;
+
+    getPopup(): PopupView;
 }

 export interface DynamicYearMonthComboValue {
--- a/packages/fineui/typescript/widget/yearmonthinterval/yearmonthinterval.ts
+++ b/packages/fineui/typescript/widget/yearmonthinterval/yearmonthinterval.ts
@ -1,5 +1,5 @@
 import { Single } from '../../base/single/single';
-import { DynamicYearMonthComboValue } from '../yearmonth/combo.yearmonth';
+import { DynamicYearMonthCombo, DynamicYearMonthComboValue } from '../yearmonth/combo.yearmonth';

 export declare class YearMonthInterval extends Single {
    static xtype: string;
@ -7,9 +7,13 @@ export declare class YearMonthInterval extends Single {
    static EVENT_ERROR: string;
    static EVENT_CHANGE: string;
    static EVENT_BEFORE_POPUPVIEW: string;
+    static EVENT_BEFORE_START_POPUPVIEW: string;
+    static EVENT_BEFORE_END_POPUPVIEW: string;

    props: {
        simple?: boolean;
+        container?: string;
+        popup?: any;
    } & Single['props'];

    getValue(): {
@ -20,4 +24,9 @@ export declare class YearMonthInterval extends Single {
    setMinDate(minDate: string): void;

    setMaxDate(maxDate: string): void;
+
+    getPopup(): {
+        start: DynamicYearMonthCombo;
+        end: DynamicYearMonthCombo;
+    };
 }
--- a/packages/fineui/typescript/widget/yearquarter/combo.yearquarter.ts
+++ b/packages/fineui/typescript/widget/yearquarter/combo.yearquarter.ts
@ -1,3 +1,4 @@
+import { PopupView } from "../../base/layer/layer.popup";
 import { Widget } from "../../core/widget";

 export declare class DynamicYearQuarterCombo extends Widget {
@ -5,11 +6,17 @@ export declare class DynamicYearQuarterCombo extends Widget {
    static EVENT_CONFIRM: string;
    static EVENT_BEFORE_POPUPVIEW: string;

+    props: {
+        popup?: any;
+    };
+
    getValue(): DynamicYearQuarterComboValue;

    setMinDate(minDate: string): void;

    setMaxDate(maxDate: string): void;
+
+    getPopup(): PopupView;
 }

 export interface DynamicYearQuarterComboValue {