import { shortcut, getDate, toPix, isEqual, isNotEmptyString, isEmptyString, isNotNull, isNotEmptyObject, checkDateVoid } from "@/core"; import { Single, Combo } from "@/base"; import { DynamicDateTimeTrigger } from "./dynamicdatetime.trigger"; import { DynamicDateTimePopup } from "./dynamicdatetime.popup"; import { DynamicDateCombo } from "../dynamicdate"; @shortcut() export class DynamicDateTimeCombo extends Single { static xtype = "bi.dynamic_date_time_combo" static Static = 1 static Dynamic = 2 constants = { popupHeight: 259, popupWidth: 270, comboAdjustHeight: 1, border: 1, iconWidth: 24, } props = { baseCls: "bi-dynamic-date--time-combo", height: 24, minDate: "1900-01-01", maxDate: "2099-12-31", format: "", allowEdit: true, supportDynamic: true, attributes: { tabIndex: -1, }, isNeedAdjustHeight: false, isNeedAdjustWidth: false, }; static EVENT_KEY_DOWN = "EVENT_KEY_DOWN" static EVENT_CONFIRM = "EVENT_CONFIRM" static EVENT_FOCUS = "EVENT_FOCUS" static EVENT_BLUR = "EVENT_BLUR" static EVENT_CHANGE = "EVENT_CHANGE" static EVENT_VALID = "EVENT_VALID" static EVENT_ERROR = "EVENT_ERROR" static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW" static EVENT_BEFORE_YEAR_MONTH_POPUPVIEW = "EVENT_BEFORE_YEAR_MONTH_POPUPVIEW" _init() { super._init(...arguments); } render() { const opts = this.options; this.storeTriggerValue = ""; const date = getDate(); this.storeValue = opts.value; const border = opts.simple ? 1 : 2; return { type: "bi.absolute", items: [{ el: { type: "bi.combo", cls: `${opts.simple ? "bi-border-bottom" : "bi-border bi-border-radius"} bi-focus-shadow`, destroyWhenHide: true, container: opts.container, ref: _ref => { this.combo = _ref; }, toggle: false, isNeedAdjustHeight: opts.isNeedAdjustHeight, isNeedAdjustWidth: opts.isNeedAdjustWidth, el: { type: "bi.horizontal_fill", columnSize: [this.constants.iconWidth, "fill"], height: toPix(opts.height, border), items: [{ el: { type: "bi.icon_button", cls: "bi-trigger-icon-button date-change-h-font", width: this.constants.iconWidth, height: toPix(opts.height, border), ref: _ref => { this.changeIcon = _ref; }, }, }, { type: "bi.dynamic_date_time_trigger", simple: opts.simple, min: opts.minDate, max: opts.maxDate, allowEdit: opts.allowEdit, watermark: opts.watermark, format: opts.format, iconWidth: this.constants.iconWidth, height: toPix(opts.height, border), value: opts.value, ref: _ref => { this.trigger = _ref; }, listeners: [{ eventName: DynamicDateTimeTrigger.EVENT_KEY_DOWN, action: (...args) => { if (this.combo.isViewVisible()) { this.combo.hideView(); } this.fireEvent(DynamicDateTimeCombo.EVENT_KEY_DOWN, ...args); }, }, { eventName: DynamicDateTimeTrigger.EVENT_STOP, action: () => { if (!this.combo.isViewVisible()) { this.combo.showView(); } }, }, { eventName: DynamicDateTimeTrigger.EVENT_TRIGGER_CLICK, action: () => { this.combo.toggle(); }, }, { eventName: DynamicDateTimeTrigger.EVENT_FOCUS, action: () => { this.storeTriggerValue = this.trigger.getKey(); if (!this.combo.isViewVisible()) { this.combo.showView(); } this.fireEvent(DynamicDateTimeCombo.EVENT_FOCUS); }, }, { eventName: DynamicDateTimeTrigger.EVENT_BLUR, action: () => { this.fireEvent(DynamicDateTimeCombo.EVENT_BLUR); }, }, { eventName: DynamicDateTimeTrigger.EVENT_ERROR, action: () => { this.storeValue = { type: DynamicDateTimeCombo.Static, value: { year: date.getFullYear(), month: date.getMonth() + 1, }, }; this.combo.element.addClass("error"); this.fireEvent(DynamicDateTimeCombo.EVENT_ERROR); }, }, { eventName: DynamicDateTimeTrigger.EVENT_VALID, action: () => { this.storeValue = this.trigger.getValue(); this.combo.element.removeClass("error"); this.fireEvent(DynamicDateTimeCombo.EVENT_VALID); }, }, { eventName: DynamicDateTimeTrigger.EVENT_CHANGE, action: () => { this.fireEvent(DynamicDateTimeCombo.EVENT_CHANGE); }, }, { eventName: DynamicDateTimeTrigger.EVENT_CONFIRM, action: () => { const dateStore = this.storeTriggerValue; const dateObj = this.trigger.getKey(); if (this.combo.isViewVisible() || isEqual(dateObj, dateStore)) { return; } if (isNotEmptyString(dateObj) && !isEqual(dateObj, dateStore)) { this.storeValue = this.trigger.getValue(); this.setValue(this.trigger.getValue()); } else if (isEmptyString(dateObj)) { this.storeValue = null; this.trigger.setValue(); } this._checkDynamicValue(this.storeValue); this.fireEvent(DynamicDateTimeCombo.EVENT_CONFIRM); }, }], }], }, adjustLength: this.constants.comboAdjustHeight, popup: { el: { type: "bi.dynamic_date_time_popup", width: opts.isNeedAdjustWidth ? opts.width : undefined, supportDynamic: opts.supportDynamic, behaviors: opts.behaviors, min: opts.minDate, max: opts.maxDate, ref: _ref => { this.popup = _ref; }, listeners: [{ eventName: DynamicDateTimePopup.BUTTON_CLEAR_EVENT_CHANGE, action: () => { this.setValue(); this.combo.hideView(); this.fireEvent(DynamicDateTimeCombo.EVENT_CONFIRM); }, }, { eventName: DynamicDateTimePopup.BUTTON_lABEL_EVENT_CHANGE, action: () => { const date = getDate(); this.setValue({ type: DynamicDateTimeCombo.Static, value: { year: date.getFullYear(), month: date.getMonth() + 1, day: date.getDate(), hour: 0, minute: 0, second: 0, }, }); this.combo.hideView(); this.fireEvent(DynamicDateTimeCombo.EVENT_CONFIRM); }, }, { eventName: DynamicDateTimePopup.BUTTON_OK_EVENT_CHANGE, action: () => { const value = this.popup.getValue(); if (this._checkValue(value)) { this.setValue(value); } this.combo.hideView(); this.fireEvent(DynamicDateTimeCombo.EVENT_CONFIRM); }, }, { eventName: DynamicDateTimePopup.EVENT_CHANGE, action: () => { this.setValue(this.popup.getValue()); this.combo.hideView(); this.fireEvent(DynamicDateTimeCombo.EVENT_CONFIRM); }, }, { eventName: DynamicDateTimePopup.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW, action: () => { this.fireEvent(DynamicDateTimeCombo.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW); }, }], }, }, listeners: [{ eventName: Combo.EVENT_BEFORE_POPUPVIEW, action: () => { this.popup.setMinDate(opts.minDate); this.popup.setMaxDate(opts.maxDate); this.popup.setValue(this.storeValue); this.fireEvent(DynamicDateTimeCombo.EVENT_BEFORE_POPUPVIEW); }, }], // // DEC-4250 和复选下拉一样，点击不收起 // hideChecker: function (e) { // return self.triggerBtn.element.find(e.target).length === 0; // } }, top: 0, left: 0, right: 0, bottom: 0, }], }; } created() { this._checkDynamicValue(this.storeValue); } _checkDynamicValue(v) { let type = null; if (isNotNull(v)) { type = v.type; } switch (type) { case DynamicDateTimeCombo.Dynamic: this.changeIcon.setVisible(true); // this.comboWrapper.attr("items")[0].width = o.height - (this.options.simple ? 1 : 2); // this.comboWrapper.resize(); break; default: // this.comboWrapper.attr("items")[0].width = 0; // this.comboWrapper.resize(); this.changeIcon.setVisible(false); break; } } _checkValue(v) { const o = this.options; const value = v.value || {}; switch (v.type) { case DynamicDateCombo.Dynamic: return isNotEmptyObject(v.value); case DynamicDateCombo.Static: return !checkDateVoid(value.year, value.month, value.day, o.minDate, o.maxDate)[0]; default: return true; } } setMinDate(minDate) { const o = this.options; o.minDate = minDate; this.trigger.setMinDate(minDate); this.popup && this.popup.setMinDate(minDate); } setMaxDate(maxDate) { const o = this.options; o.maxDate = maxDate; this.trigger.setMaxDate(maxDate); this.popup && this.popup.setMaxDate(maxDate); } setValue(v) { this.storeValue = v; this.trigger.setValue(v); this._checkDynamicValue(v); } getValue() { return this.storeValue; } getKey() { return this.trigger.getKey(); } hidePopupView() { this.combo.hideView(); } isValid() { return this.trigger.isValid(); } focus() { this.trigger.focus(); } blur() { this.trigger.blur(); } setWaterMark(v) { this.trigger.setWaterMark(v); } }