Pull request #3700: BI-133648 feat：日期过滤控件加预览模式

Merge in VISUAL/fineui from ~ZOEY.CHEN/fineui:master to master

* commit '616fb22b795529ec04ebc2ce5595b6edcd830f15':
  BI-133648 feat：日期过滤控件加预览模式
  BI-133648 feat：日期过滤控件加预览模式
  BI-133648 fix：日期过滤控件加预览模式

packages/fineui/src/widget/datepane/datepane.js

@@ -30,6 +30,7 @@ export class DynamicDatePane extends Widget {
         minDate: "1900-01-01",
         maxDate: "2099-12-31",
         supportDynamic: true,
+        isPreview: false, // 是否是预览状态
     };
 
     render() {
@@ -63,17 +64,11 @@ export class DynamicDatePane extends Widget {
                             {
                                 eventName: ButtonGroup.EVENT_CHANGE,
                                 action: () => {
-                                    let date;
                                     const value = this.switcher.getValue()[0];
                                     this.dateTab.setSelect(value);
                                     switch (value) {
                                         case DynamicDatePane.Static:
-                                            date = DynamicDateHelper.getCalculation(this.dynamicPane.getValue());
-                                            this.ymd.setValue({
-                                                year: date.getFullYear(),
-                                                month: date.getMonth() + 1,
-                                                day: date.getDate(),
-                                            });
+                                            this._setStaticValueByDynamicValue(this.dynamicPane.getValue());
                                             break;
                                         case DynamicDatePane.Dynamic:
                                             this.dynamicPane.setValue({
@@ -195,7 +190,7 @@ export class DynamicDatePane extends Widget {
     }
 
     created() {
-        this.setValue(this.options.value);
+        this._initValue(this.options.value);
     }
 
     _checkValueValid(value) {
@@ -212,6 +207,31 @@ export class DynamicDatePane extends Widget {
         }
     }
 
+    _initValue(v) {
+        v = v || {};
+        const type = v.type || DynamicDateCombo.Static;
+        const value = v.value || v;
+
+        const { isPreview } = this.options;
+
+        // 如果是初始化且是预览状态 直接打开静态页面
+        this.switcher.setValue(isPreview ? DynamicDateCombo.Static : type);
+        this.dateTab.setSelect(isPreview ? DynamicDateCombo.Static : type);
+        switch (type) {
+            case DynamicDateCombo.Dynamic:
+                if (isPreview) {
+                    this._setStaticValueByDynamicValue(value);
+                } else {
+                    this.dynamicPane.setValue(value);
+                }
+                break;
+            case DynamicDateCombo.Static:
+            default:
+                this._setStaticValue(value);
+                break;
+        }
+    }
+
     setMinDate(minDate) {
         if (this.options.minDate !== minDate) {
             this.options.minDate = minDate;
@@ -238,19 +258,32 @@ export class DynamicDatePane extends Widget {
                 break;
             case DynamicDateCombo.Static:
             default:
-                if (this._checkValueValid(value)) {
-                    const date = getDate();
-                    this.ymd.setValue({
-                        year: date.getFullYear(),
-                        month: date.getMonth() + 1,
-                    });
-                } else {
-                    this.ymd.setValue(value);
-                }
+                this._setStaticValue(value);
                 break;
         }
     }
 
+    _setStaticValue(value) {
+        if (this._checkValueValid(value)) {
+            const date = getDate();
+            this.ymd.setValue({
+                year: date.getFullYear(),
+                month: date.getMonth() + 1,
+            });
+        } else {
+            this.ymd.setValue(value);
+        }
+    }
+
+    _setStaticValueByDynamicValue(value) {
+        const date = DynamicDateHelper.getCalculation(value);
+        this.ymd.setValue({
+            year: date.getFullYear(),
+            month: date.getMonth() + 1,
+            day: date.getDate(),
+        });
+    }
+
     getValue() {
         const type = this.dateTab.getSelect();
 

packages/fineui/src/widget/dynamicdate/dynamicdate.combo.js

@@ -53,6 +53,7 @@ export class DynamicDateCombo extends Single {
         },
         isNeedAdjustHeight: false,
         isNeedAdjustWidth: false,
+        isPreview: false, // 是否是预览状态
     };
 
     _init() {
@@ -200,6 +201,7 @@ export class DynamicDateCombo extends Single {
                         popup: {
                             el: {
                                 type: DynamicDatePopup.xtype,
+                                isPreview: opts.isPreview,
                                 width: opts.isNeedAdjustWidth ? opts.width : undefined,
                                 supportDynamic: opts.supportDynamic,
                                 behaviors: opts.behaviors,

packages/fineui/src/widget/dynamicdate/dynamicdate.popup.js

@@ -34,6 +34,7 @@ export class DynamicDatePopup extends Widget {
         baseCls: "bi-dynamic-date-popup",
         width: 272,
         supportDynamic: true,
+        isPreview: false, // 是否是预览状态
     };
 
     static EVENT_CHANGE = "EVENT_CHANGE";
@@ -282,10 +283,23 @@ export class DynamicDatePopup extends Widget {
         v = v || {};
         const type = v.type || DynamicDateCombo.Static;
         const value = v.value || v;
-        this.dateTab.setSelect(type);
+        const { isPreview } = this.options;
+        let date;
+
+        // 如果是预览状态 直接打开静态页面
+        this.dateTab.setSelect(isPreview ? DynamicDateCombo.Static : type);
         switch (type) {
         case DynamicDateCombo.Dynamic:
-            this.dynamicPane.setValue(value);
+            if (isPreview) {
+                date = DynamicDateHelper.getCalculation(value);
+                this.ymd.setValue({
+                    year: date.getFullYear(),
+                    month: date.getMonth() + 1,
+                    day: date.getDate(),
+                });
+            } else {
+                this.dynamicPane.setValue(value);
+            }
             this._setInnerValue();
             break;
         case DynamicDateCombo.Static:

packages/fineui/src/widget/dynamicdatetime/dynamicdatetime.combo.js

@@ -44,6 +44,7 @@ export class DynamicDateTimeCombo extends Single {
         },
         isNeedAdjustHeight: false,
         isNeedAdjustWidth: false,
+        isPreview: false, // 是否是预览状态
     };
 
     static EVENT_KEY_DOWN = "EVENT_KEY_DOWN";
@@ -207,6 +208,7 @@ export class DynamicDateTimeCombo extends Single {
                         popup: {
                             el: {
                                 type: DynamicDateTimePopup.xtype,
+                                isPreview: opts.isPreview,
                                 timeSelectTypes: opts.timeSelectTypes,
                                 width: opts.isNeedAdjustWidth ? opts.width : undefined,
                                 supportDynamic: opts.supportDynamic,

packages/fineui/src/widget/dynamicdatetime/dynamicdatetime.popup.js

@@ -36,6 +36,7 @@ export class DynamicDateTimePopup extends Widget {
         baseCls: "bi-dynamic-date-time-popup",
         width: 272,
         supportDynamic: true,
+        isPreview: false, // 是否是预览状态
     };
 
     static EVENT_CHANGE = "EVENT_CHANGE";
@@ -292,10 +293,24 @@ export class DynamicDateTimePopup extends Widget {
         v = v || {};
         const type = v.type || DynamicDateCombo.Static;
         const value = v.value || v;
-        this.dateTab.setSelect(type);
+        const { isPreview } = this.options;
+        let date;
+
+        // 如果是预览状态 直接打开静态页面
+        this.dateTab.setSelect(isPreview ? DynamicDateCombo.Static : type);
         switch (type) {
             case DynamicDateCombo.Dynamic:
-                this.dynamicPane.setValue(value);
+                if (isPreview) {
+                    date = DynamicDateHelper.getCalculation(value);
+                    this.ymd.setValue({
+                        year: date.getFullYear(),
+                        month: date.getMonth() + 1,
+                        day: date.getDate(),
+                    });
+                    this.timeSelect.setValue();
+                } else {
+                    this.dynamicPane.setValue(value);
+                }
                 this._setInnerValue();
                 break;
             case DynamicDateCombo.Static:

packages/fineui/src/widget/timeinterval/dateinterval.js

@@ -23,6 +23,7 @@ export class DateInterval extends Single {
         lgap: 15,
         offset: 0,
         timeErrorCls: "time-error",
+        isPreview: false, // 是否是预览状态
     };
 
     static EVENT_VALID = "EVENT_VALID";
@@ -78,6 +79,7 @@ export class DateInterval extends Single {
         const o = this.options;
         const combo = createWidget({
             type: DynamicDateCombo.xtype,
+            isPreview: o.isPreview,
             supportDynamic: o.supportDynamic,
             minDate: o.minDate,
             maxDate: o.maxDate,

packages/fineui/src/widget/timeinterval/timeinterval.js

@@ -23,6 +23,7 @@ export class TimeInterval extends Single {
         lgap: 15,
         offset: 0,
         timeErrorCls: "time-error",
+        isPreview: false, // 是否是预览状态
     };
 
     static EVENT_VALID = "EVENT_VALID";
@@ -76,6 +77,7 @@ export class TimeInterval extends Single {
         const o = this.options;
         const combo = createWidget({
             type: DynamicDateTimeCombo.xtype,
+            isPreview: o.isPreview,
             timeSelectTypes: o.timeSelectTypes,
             simple: o.simple,
             supportDynamic: o.supportDynamic,

packages/fineui/src/widget/year/combo.year.js

@@ -27,6 +27,7 @@ export class DynamicYearCombo extends Widget {
         maxDate: "2099-12-31", // 最大日期
         height: 24,
         supportDynamic: true,
+        isPreview: false, // 是否是预览状态
     };
 
     _init() {
@@ -95,6 +96,7 @@ export class DynamicYearCombo extends Widget {
                 el: {
                     type: DynamicYearPopup.xtype,
                     supportDynamic: o.supportDynamic,
+                    isPreview: o.isPreview,
                     ref: _ref => {
                         this.popup = _ref;
                     },

packages/fineui/src/widget/year/popup.year.js

@@ -30,6 +30,7 @@ export class DynamicYearPopup extends Widget {
         max: "2099-12-31",
         width: 180,
         supportDynamic: true,
+        isPreview: false, // 是否是预览状态
     };
     constants = {
         tabHeight: 40,
@@ -266,10 +267,15 @@ export class DynamicYearPopup extends Widget {
         v = v || {};
         const type = v.type || DynamicDateCombo.Static;
         const value = v.value || v;
-        this.dateTab.setSelect(type);
+        const { isPreview } = this.options;
+
+        // 如果是预览状态 直接打开静态页面
+        this.dateTab.setSelect(isPreview ? DynamicDateCombo.Static : type);
         switch (type) {
             case DynamicDateCombo.Dynamic:
-                this.dynamicPane.setValue(value);
+                isPreview
+                    ? this.year.setValue({ year: DynamicDateHelper.getCalculation(value).getFullYear() })
+                    : this.dynamicPane.setValue(value);
                 this._setInnerValue();
                 break;
             case DynamicDateCombo.Static:

packages/fineui/src/widget/yearmonth/combo.yearmonth.js

@@ -38,6 +38,7 @@ export class DynamicYearMonthCombo extends Single {
         supportDynamic: true,
         isNeedAdjustHeight: false,
         isNeedAdjustWidth: false,
+        isPreview: false, // 是否是预览状态
     };
 
     _init() {
@@ -106,6 +107,7 @@ export class DynamicYearMonthCombo extends Single {
                     type: DynamicYearMonthPopup.xtype,
                     width: o.isNeedAdjustWidth ? o.width : undefined,
                     supportDynamic: o.supportDynamic,
+                    isPreview: o.isPreview,
                     ref: _ref => {
                         this.popup = _ref;
                     },

packages/fineui/src/widget/yearmonth/popup.yearmonth.js

@@ -31,6 +31,7 @@ export class DynamicYearMonthPopup extends Widget {
         max: "2099-12-31",
         width: 180,
         supportDynamic: true,
+        isPreview: false, // 是否是预览状态
     };
 
     static BUTTON_CLEAR_EVENT_CHANGE = "BUTTON_CLEAR_EVENT_CHANGE";
@@ -262,11 +263,22 @@ export class DynamicYearMonthPopup extends Widget {
         v = v || {};
         const type = v.type || DynamicDateCombo.Static;
         const value = v.value || v;
+        const { isPreview } = this.options;
+        let date;
 
-        this.dateTab.setSelect(type);
+        // 如果是预览状态 直接打开静态页面
+        this.dateTab.setSelect(isPreview ? DynamicDateCombo.Static : type);
         switch (type) {
             case DynamicDateCombo.Dynamic:
-                this.dynamicPane.setValue(value);
+                if (isPreview) {
+                    date = DynamicDateHelper.getCalculation(value);
+                    this.year.setValue({
+                        year: date.getFullYear(),
+                        month: date.getMonth() + 1,
+                    });
+                } else {
+                    this.dynamicPane.setValue(value);
+                }
                 this._setInnerValue();
                 break;
             case DynamicDateCombo.Static:

packages/fineui/src/widget/yearmonthinterval/yearmonthinterval.js

@@ -34,6 +34,7 @@ export class YearMonthInterval extends Single {
         supportDynamic: true,
         height: 24,
         simple: false,
+        isPreview: false, // 是否是预览状态
     };
 
     render() {
@@ -71,6 +72,7 @@ export class YearMonthInterval extends Single {
         const o = this.options;
         const combo = createWidget({
             type: DynamicYearMonthCombo.xtype,
+            isPreview: o.isPreview,
             simple: o.simple,
             supportDynamic: o.supportDynamic,
             height: o.height,

packages/fineui/src/widget/yearquarter/combo.yearquarter.js

@@ -33,6 +33,7 @@ export class DynamicYearQuarterCombo extends Widget {
         supportDynamic: true,
         isNeedAdjustHeight: false,
         isNeedAdjustWidth: false,
+        isPreview: false, // 是否是预览状态
     };
 
     static EVENT_CONFIRM = "EVENT_CONFIRM";
@@ -109,6 +110,7 @@ export class DynamicYearQuarterCombo extends Widget {
                     type: DynamicYearQuarterPopup.xtype,
                     width: o.isNeedAdjustWidth ? o.width : undefined,
                     supportDynamic: o.supportDynamic,
+                    isPreview: o.isPreview,
                     ref: _ref => {
                         this.popup = _ref;
                     },

packages/fineui/src/widget/yearquarter/popup.yearquarter.js

@@ -32,6 +32,7 @@ export class DynamicYearQuarterPopup extends Widget {
         max: "2099-12-31",
         width: 180,
         supportDynamic: true,
+        isPreview: false, // 是否是预览状态
     };
 
     static BUTTON_CLEAR_EVENT_CHANGE = "BUTTON_CLEAR_EVENT_CHANGE";
@@ -41,7 +42,7 @@ export class DynamicYearQuarterPopup extends Widget {
 
     render() {
         this.storeValue = { type: DynamicYearQuarterCombo.Static };
-        
+
         return {
             type: VerticalLayout.xtype,
             items: [
@@ -157,7 +158,7 @@ export class DynamicYearQuarterPopup extends Widget {
     _checkTodayValid() {
         const o = this.options;
         const today = getDate();
-        
+
         return !!checkDateVoid(
             today.getFullYear(),
             today.getMonth() + 1,
@@ -169,7 +170,7 @@ export class DynamicYearQuarterPopup extends Widget {
 
     _getTabJson() {
         const o = this.options;
-        
+
         return {
             type: Tab.xtype,
             logic: {
@@ -263,8 +264,8 @@ export class DynamicYearQuarterPopup extends Widget {
                             default:
                                 if (
                                     this.storeValue &&
-                                this.storeValue.type ===
-                                        DynamicYearQuarterCombo.Dynamic
+                                    this.storeValue.type ===
+                                    DynamicYearQuarterCombo.Dynamic
                                 ) {
                                     this.dynamicPane.setValue(
                                         this.storeValue.value
@@ -304,10 +305,22 @@ export class DynamicYearQuarterPopup extends Widget {
         v = v || {};
         const type = v.type || DynamicDateCombo.Static;
         const value = v.value || v;
-        this.dateTab.setSelect(type);
+        const { isPreview } = this.options;
+        let date;
+
+        // 如果是预览状态 直接打开静态页面
+        this.dateTab.setSelect(isPreview ? DynamicDateCombo.Static : type);
         switch (type) {
             case DynamicDateCombo.Dynamic:
-                this.dynamicPane.setValue(value);
+                if (isPreview) {
+                    date = DynamicDateHelper.getCalculation(value);
+                    this.year.setValue({
+                        year: date.getFullYear(),
+                        quarter: getQuarter(date),
+                    });
+                } else {
+                    this.dynamicPane.setValue(value);
+                }
                 this._setInnerValue();
                 break;
             case DynamicDateCombo.Static: