From 1c1b262c9e168bace4fdeb570ee308e55805b60a Mon Sep 17 00:00:00 2001 From: "Zhenfei.Li" Date: Wed, 11 Jan 2023 20:27:06 +0800 Subject: [PATCH 1/2] =?UTF-8?q?KERNEL-14087=20refactor:=20widget/dynamicda?= =?UTF-8?q?te=E3=80=81datepane=E3=80=81datetime=E3=80=81datetimepane?= =?UTF-8?q?=E3=80=81dynamicdatetime?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- es6.js | 1 + src/case/linearsegment/linear.segment.js | 6 +- src/widget/datepane/card.static.datepane.js | 212 +++---- src/widget/datepane/datepane.js | 326 +++++------ src/widget/datepane/index.js | 2 + src/widget/datetime/datetime.combo.js | 124 ++-- src/widget/datetime/datetime.popup.js | 114 ++-- src/widget/datetime/datetime.trigger.js | 92 +-- src/widget/datetime/index.js | 3 + .../datetimepane/card.static.datetimepane.js | 195 ++++--- src/widget/datetimepane/datetimepane.js | 319 ++++++----- src/widget/datetimepane/index.js | 2 + .../dynamicdate/dynamicdate.caculate.js | 206 +++---- src/widget/dynamicdate/dynamicdate.card.js | 535 ++++++++--------- src/widget/dynamicdate/dynamicdate.combo.js | 406 ++++++------- .../dynamicdate/dynamicdate.param.item.js | 153 ++--- src/widget/dynamicdate/dynamicdate.popup.js | 388 +++++++------ src/widget/dynamicdate/dynamicdate.trigger.js | 449 ++++++++------- src/widget/dynamicdate/index.js | 6 + .../dynamicdatetime/dynamicdatetime.combo.js | 409 +++++++------ .../dynamicdatetime/dynamicdatetime.popup.js | 417 +++++++------- .../dynamicdatetime.timeselect.js | 269 ++++----- .../dynamicdatetime.trigger.js | 536 +++++++++--------- src/widget/dynamicdatetime/index.js | 4 + src/widget/index.js | 15 + 25 files changed, 2688 insertions(+), 2501 deletions(-) create mode 100644 src/widget/datepane/index.js create mode 100644 src/widget/datetime/index.js create mode 100644 src/widget/datetimepane/index.js create mode 100644 src/widget/dynamicdate/index.js create mode 100644 src/widget/dynamicdatetime/index.js diff --git a/es6.js b/es6.js index 7c8f87934..c93a368fc 100644 --- a/es6.js +++ b/es6.js @@ -44,6 +44,7 @@ const target = [ "makeArrayByArray", "VerticalAlign", "transformItems", + "print", ]; // 加载模块 diff --git a/src/case/linearsegment/linear.segment.js b/src/case/linearsegment/linear.segment.js index b34771c3b..c44265704 100644 --- a/src/case/linearsegment/linear.segment.js +++ b/src/case/linearsegment/linear.segment.js @@ -25,12 +25,12 @@ export class LinearSegment extends Widget { value: o.value, listeners: [{ eventName: "__EVENT_CHANGE__", - action () { - this.fireEvent("__EVENT_CHANGE__", arguments); + action: (...args) => { + this.fireEvent("__EVENT_CHANGE__", ...args); }, }, { eventName: "EVENT_CHANGE", - action () { + action: () => { this.fireEvent("EVENT_CHANGE"); }, }], diff --git a/src/widget/datepane/card.static.datepane.js b/src/widget/datepane/card.static.datepane.js index 34ed5ac14..a6a469437 100644 --- a/src/widget/datepane/card.static.datepane.js +++ b/src/widget/datepane/card.static.datepane.js @@ -1,185 +1,207 @@ -/** - * Created by zcf on 2017/2/20. - */ -BI.StaticDatePaneCard = BI.inherit(BI.Widget, { - _defaultConfig: function () { - var conf = BI.StaticDatePaneCard.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { +import { shortcut, Widget, extend, createWidget, bind, isNull, each, isNotEmptyString, getDate, getMonthDays } from "@/core"; +import { DatePicker, DateCalendarPopup } from "../date/calendar"; +import { Calendar } from "@/case"; +import { Navigation } from "@/base"; + +@shortcut() +export class StaticDatePaneCard extends Widget { + static xtype = "bi.static_date_pane_card"; + + static EVENT_BEFORE_YEAR_MONTH_POPUPVIEW = + "EVENT_BEFORE_YEAR_MONTH_POPUPVIEW"; + + _defaultConfig() { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { baseCls: "bi-date-pane", min: "1900-01-01", // 最小日期 max: "2099-12-31", // 最大日期 - selectedTime: null + selectedTime: null, }); - }, - _init: function () { - BI.StaticDatePaneCard.superclass._init.apply(this, arguments); - var self = this, o = this.options; + } + + _init() { + super._init(...arguments); + const o = this.options; - this.today = BI.getDate(); + this.today = getDate(); this._year = this.today.getFullYear(); this._month = this.today.getMonth() + 1; this.selectedTime = o.selectedTime || { year: this._year, - month: this._month + month: this._month, }; - this.datePicker = BI.createWidget({ + this.datePicker = createWidget({ type: "bi.date_picker", behaviors: o.behaviors, min: o.min, - max: o.max + max: o.max, }); - this.datePicker.on(BI.DatePicker.EVENT_CHANGE, function () { - var value = self.datePicker.getValue(); - var monthDay = BI.getMonthDays(BI.getDate(value.year, value.month - 1, 1)); - var day = self.selectedTime.day || 0; + this.datePicker.on(DatePicker.EVENT_CHANGE, () => { + const value = this.datePicker.getValue(); + const monthDay = getMonthDays( + getDate(value.year, value.month - 1, 1) + ); + let day = this.selectedTime.day || 0; if (day > monthDay) { day = monthDay; } - self.selectedTime = { + this.selectedTime = { year: value.year, - month: value.month + month: value.month, }; - day !== 0 && (self.selectedTime.day = day); - self.calendar.setSelect(BI.Calendar.getPageByDateJSON(self.selectedTime)); - self.calendar.setValue(self.selectedTime); - day !== 0 && self.fireEvent(BI.DateCalendarPopup.EVENT_CHANGE); - }); - this.datePicker.on(BI.DatePicker.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW, function () { - self.fireEvent(BI.StaticDatePaneCard.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW); + day !== 0 && (this.selectedTime.day = day); + this.calendar.setSelect( + Calendar.getPageByDateJSON(this.selectedTime) + ); + this.calendar.setValue(this.selectedTime); + day !== 0 && this.fireEvent(DateCalendarPopup.EVENT_CHANGE); }); + this.datePicker.on( + DatePicker.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW, + () => { + this.fireEvent( + StaticDatePaneCard.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW + ); + } + ); - this.calendar = BI.createWidget({ + this.calendar = createWidget({ direction: "custom", // logic: { // dynamic: false // }, type: "bi.navigation", tab: this.datePicker, - cardCreator: BI.bind(this._createNav, this) + cardCreator: bind(this._createNav, this), }); - this.calendar.on(BI.Navigation.EVENT_CHANGE, function () { - self.selectedTime = self.calendar.getValue(); - self.calendar.empty(); - self.setValue(self.selectedTime); - self.fireEvent(BI.DateCalendarPopup.EVENT_CHANGE); + this.calendar.on(Navigation.EVENT_CHANGE, () => { + this.selectedTime = this.calendar.getValue(); + this.calendar.empty(); + this.setValue(this.selectedTime); + this.fireEvent(DateCalendarPopup.EVENT_CHANGE); }); this.setValue(o.selectedTime); - BI.createWidget({ + createWidget({ type: "bi.vtape", element: this, - items: [{ - el: this.datePicker, - height: 40 - }, this.calendar], - hgap: 10 + items: [ + { + el: this.datePicker, + height: 40, + }, + this.calendar + ], + hgap: 10, }); - BI.createWidget({ + createWidget({ type: "bi.absolute", element: this, - items: [{ - el: { - type: "bi.layout", - cls: "bi-split-top" - }, - height: 1, - top: 40, - left: 0, - right: 0 - }] + items: [ + { + el: { + type: "bi.layout", + cls: "bi-split-top", + }, + height: 1, + top: 40, + left: 0, + right: 0, + } + ], }); + } - }, - - _createNav: function (v) { - var date = BI.Calendar.getDateJSONByPage(v); - var calendar = BI.createWidget({ + _createNav(v) { + const date = Calendar.getDateJSONByPage(v); + const calendar = createWidget({ type: "bi.calendar", logic: { - dynamic: false + dynamic: false, }, min: this.options.min, max: this.options.max, year: date.year, month: date.month, - day: this.selectedTime.day + day: this.selectedTime.day, }); + return calendar; - }, + } - _getNewCurrentDate: function () { - var today = BI.getDate(); + _getNewCurrentDate() { + const today = getDate(); + return { year: today.getFullYear(), - month: today.getMonth() + 1 + month: today.getMonth() + 1, }; - }, + } - _setCalenderValue: function (date) { - this.calendar.setSelect(BI.Calendar.getPageByDateJSON(date)); + _setCalenderValue(date) { + this.calendar.setSelect(Calendar.getPageByDateJSON(date)); this.calendar.setValue(date); this.selectedTime = date; - }, + } - _setDatePicker: function (timeOb) { - if (BI.isNull(timeOb) || BI.isNull(timeOb.year) || BI.isNull(timeOb.month)) { + _setDatePicker(timeOb) { + if (isNull(timeOb) || isNull(timeOb.year) || isNull(timeOb.month)) { this.datePicker.setValue(this._getNewCurrentDate()); } else { this.datePicker.setValue(timeOb); } - }, + } - _setCalendar: function (timeOb) { - if (BI.isNull(timeOb) || BI.isNull(timeOb.day)) { + _setCalendar(timeOb) { + if (isNull(timeOb) || isNull(timeOb.day)) { this.calendar.empty(); this._setCalenderValue(this._getNewCurrentDate()); } else { this._setCalenderValue(timeOb); } - }, + } - _checkMin: function () { - var o = this.options; - BI.each(this.calendar.getAllCard(), function (idx, calendar) { + _checkMin() { + const o = this.options; + each(this.calendar.getAllCard(), (idx, calendar) => { calendar.setMinDate(o.min); }); - }, + } - _checkMax: function () { - var o = this.options; - BI.each(this.calendar.getAllCard(), function (idx, calendar) { + _checkMax() { + const o = this.options; + each(this.calendar.getAllCard(), (idx, calendar) => { calendar.setMaxDate(o.max); }); - }, + } - setMinDate: function (minDate) { - if (BI.isNotEmptyString(this.options.min)) { + setMinDate(minDate) { + if (isNotEmptyString(this.options.min)) { this.options.min = minDate; this.datePicker.setMinDate(minDate); this._checkMin(); } - }, + } - setMaxDate: function (maxDate) { - if (BI.isNotEmptyString(this.options.max)) { + setMaxDate(maxDate) { + if (isNotEmptyString(this.options.max)) { this.options.max = maxDate; this.datePicker.setMaxDate(maxDate); this._checkMax(); } - }, + } - setValue: function (timeOb) { + setValue(timeOb) { this._setDatePicker(timeOb); this._setCalendar(timeOb); - }, + } - getValue: function () { + getValue() { return this.selectedTime; } - -}); -BI.StaticDatePaneCard.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW = "EVENT_BEFORE_YEAR_MONTH_POPUPVIEW" -BI.shortcut("bi.static_date_pane_card", BI.StaticDatePaneCard); \ No newline at end of file +} diff --git a/src/widget/datepane/datepane.js b/src/widget/datepane/datepane.js index 3537797c3..e3bc64684 100644 --- a/src/widget/datepane/datepane.js +++ b/src/widget/datepane/datepane.js @@ -1,14 +1,26 @@ -BI.DynamicDatePane = BI.inherit(BI.Widget, { +import { shortcut, Widget, createItems, i18nText, isEmptyObject, isNull, isEmptyString, isNotEmptyObject, getDate } from "@/core"; +import { ButtonGroup, TextButton } from "@/base"; +import { DynamicDateHelper, DynamicDateCombo, DynamicDatePopup } from "../dynamicdate"; - props: { +@shortcut() +export class DynamicDatePane extends Widget { + static xtype = "bi.dynamic_date_pane"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_BEFORE_YEAR_MONTH_POPUPVIEW = "EVENT_BEFORE_YEAR_MONTH_POPUPVIEW"; + static Static = 1; + static Dynamic = 2; + + props = { baseCls: "bi-dynamic-date-pane", minDate: "1900-01-01", maxDate: "2099-12-31", - supportDynamic: true - }, + supportDynamic: true, + } - render: function () { - var self = this, o = this.options; + render() { + const o = this.options; + return { type: "bi.vtape", items: [{ @@ -17,201 +29,193 @@ BI.DynamicDatePane = BI.inherit(BI.Widget, { invisible: !o.supportDynamic, cls: "bi-split-bottom", height: 30, - items: BI.createItems([{ - text: BI.i18nText("BI-Multi_Date_YMD"), - value: BI.DynamicDatePane.Static + items: createItems([{ + text: i18nText("BI-Multi_Date_YMD"), + value: DynamicDatePane.Static, }, { - text: BI.i18nText("BI-Basic_Dynamic_Title"), - value: BI.DynamicDatePane.Dynamic + text: i18nText("BI-Basic_Dynamic_Title"), + value: DynamicDatePane.Dynamic, }], { - textAlign: "center" + textAlign: "center", }), listeners: [{ - eventName: BI.ButtonGroup.EVENT_CHANGE, - action: function () { - var value = this.getValue()[0]; - self.dateTab.setSelect(value); + eventName: ButtonGroup.EVENT_CHANGE, + action: () => { + let date; + const value = this.switcher.getValue()[0]; + this.dateTab.setSelect(value); switch (value) { - case BI.DynamicDatePane.Static: - var date = BI.DynamicDateHelper.getCalculation(self.dynamicPane.getValue()); - self.ymd.setValue({ - year: date.getFullYear(), - month: date.getMonth() + 1, - day: date.getDate() - }); - break; - case BI.DynamicDatePane.Dynamic: - self.dynamicPane.setValue({ - year: 0 - }); - break; - default: - break; + case DynamicDatePane.Static: + date = DynamicDateHelper.getCalculation(this.dynamicPane.getValue()); + this.ymd.setValue({ + year: date.getFullYear(), + month: date.getMonth() + 1, + day: date.getDate(), + }); + break; + case DynamicDatePane.Dynamic: + this.dynamicPane.setValue({ + year: 0, + }); + break; + default: + break; } - self.fireEvent(BI.DynamicDatePane.EVENT_CHANGE); - } + this.fireEvent(DynamicDatePane.EVENT_CHANGE); + }, }], - ref: function () { - self.switcher = this; - } + ref: _ref => { + this.switcher = _ref; + }, }, - height: o.supportDynamic ? 30 : 0 + height: o.supportDynamic ? 30 : 0, }, { type: "bi.tab", - ref: function () { - self.dateTab = this; + ref: _ref => { + this.dateTab = _ref; }, - showIndex: BI.DynamicDatePane.Static, - cardCreator: function (v) { + showIndex: DynamicDatePane.Static, + cardCreator: v => { switch (v) { - case BI.DynamicDatePane.Static: - return { - type: "bi.static_date_pane_card", + case DynamicDatePane.Static: + return { + type: "bi.static_date_pane_card", + min: o.minDate, + max: o.maxDate, + behaviors: o.behaviors, + listeners: [{ + eventName: "EVENT_CHANGE", + action: () => { + this.fireEvent(DynamicDatePane.EVENT_CHANGE); + }, + }, { + eventName: "EVENT_BEFORE_YEAR_MONTH_POPUPVIEW", + action: () => { + this.fireEvent(DynamicDatePane.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW); + }, + }], + ref: _ref => { + this.ymd = _ref; + }, + }; + case DynamicDatePane.Dynamic: + default: + return { + type: "bi.vtape", + items: [{ + type: "bi.dynamic_date_card", min: o.minDate, max: o.maxDate, - behaviors: o.behaviors, - listeners: [{ - eventName: "EVENT_CHANGE", - action: function () { - self.fireEvent(BI.DynamicDatePane.EVENT_CHANGE); - } - }, { - eventName: "EVENT_BEFORE_YEAR_MONTH_POPUPVIEW", - action: function () { - self.fireEvent(BI.DynamicDatePane.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW); - } - }], - ref: function () { - self.ymd = this; - } - }; - case BI.DynamicDatePane.Dynamic: - default: - return { - type: "bi.vtape", - items: [{ - type: "bi.dynamic_date_card", - min: o.minDate, - max: o.maxDate, - ref: function () { - self.dynamicPane = this; - } - }, { - el: { - type: "bi.center", - items: [{ - type: "bi.text_button", - cls: "bi-high-light bi-border-top", - shadow: true, - text: BI.i18nText("BI-Basic_Clear"), - textHeight: 23, - listeners: [{ - eventName: BI.TextButton.EVENT_CHANGE, - action: function () { - self.setValue(); - self.fireEvent(BI.DynamicDatePane.EVENT_CHANGE); + ref: _ref => { + this.dynamicPane = _ref; + }, + }, { + el: { + type: "bi.center", + items: [{ + type: "bi.text_button", + cls: "bi-high-light bi-border-top", + shadow: true, + text: i18nText("BI-Basic_Clear"), + textHeight: 23, + listeners: [{ + eventName: TextButton.EVENT_CHANGE, + action: () => { + this.setValue(); + this.fireEvent(DynamicDatePane.EVENT_CHANGE); + }, + }], + }, { + type: "bi.text_button", + cls: "bi-border-left bi-high-light bi-border-top", + textHeight: 23, + shadow: true, + text: i18nText("BI-Basic_OK"), + listeners: [{ + eventName: TextButton.EVENT_CHANGE, + action: () => { + const type = this.dateTab.getSelect(); + if (type === DynamicDateCombo.Dynamic) { + this.dynamicPane.checkValidation(true) && this.fireEvent(DynamicDatePopup.EVENT_CHANGE); + } else { + this.fireEvent(DynamicDatePane.EVENT_CHANGE); } - }] - }, { - type: "bi.text_button", - cls: "bi-border-left bi-high-light bi-border-top", - textHeight: 23, - shadow: true, - text: BI.i18nText("BI-Basic_OK"), - listeners: [{ - eventName: BI.TextButton.EVENT_CHANGE, - action: function () { - var type = self.dateTab.getSelect(); - if (type === BI.DynamicDateCombo.Dynamic) { - self.dynamicPane.checkValidation(true) && self.fireEvent(BI.DynamicDatePopup.EVENT_CHANGE); - } else { - self.fireEvent(BI.DynamicDatePane.EVENT_CHANGE); - } - } - }] - }] - }, - height: 24 - }] - }; + }, + }], + }], + }, + height: 24, + }], + }; } - } - }] + }, + }], }; - }, + } - created: function () { + created() { this.setValue(this.options.value); - }, + } - _checkValueValid: function (value) { - return BI.isNull(value) || BI.isEmptyObject(value) || BI.isEmptyString(value); - }, + _checkValueValid(value) { + return isNull(value) || isEmptyObject(value) || isEmptyString(value); + } - _checkValue: function (v) { + _checkValue(v) { switch (v.type) { - case BI.DynamicDateCombo.Dynamic: - return BI.isNotEmptyObject(v.value); - case BI.DynamicDateCombo.Static: - default: - return true; + case DynamicDateCombo.Dynamic: + return isNotEmptyObject(v.value); + case DynamicDateCombo.Static: + default: + return true; } - }, + } - setMinDate: function (minDate) { + setMinDate(minDate) { if (this.options.minDate !== minDate) { this.options.minDate = minDate; this.ymd.setMinDate(minDate); } - }, + } - setMaxDate: function (maxDate) { + setMaxDate(maxDate) { if (this.options.maxDate !== maxDate) { this.options.maxDate = maxDate; this.ymd.setMaxDate(maxDate); } - }, + } - setValue: function (v) { + setValue(v) { v = v || {}; - var type = v.type || BI.DynamicDateCombo.Static; - var value = v.value || v; + const type = v.type || DynamicDateCombo.Static; + const value = v.value || v; this.switcher.setValue(type); this.dateTab.setSelect(type); switch (type) { - case BI.DynamicDateCombo.Dynamic: - this.dynamicPane.setValue(value); - break; - case BI.DynamicDateCombo.Static: - default: - if (this._checkValueValid(value)) { - var date = BI.getDate(); - this.ymd.setValue({ - year: date.getFullYear(), - month: date.getMonth() + 1 - }); - } else { - this.ymd.setValue(value); - } - break; + case DynamicDateCombo.Dynamic: + this.dynamicPane.setValue(value); + 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); + } + break; } - }, + } - getValue: function () { - var type = this.dateTab.getSelect(); + getValue() { + const type = this.dateTab.getSelect(); + return { - type: type, - value: type === BI.DynamicDatePane.Static ? this.dateTab.getValue() : this.dynamicPane.getValue() + type, + value: type === DynamicDatePane.Static ? this.dateTab.getValue() : this.dynamicPane.getValue(), }; } -}); - -BI.DynamicDatePane.EVENT_CHANGE = "EVENT_CHANGE"; -BI.DynamicDatePane.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW = "EVENT_BEFORE_YEAR_MONTH_POPUPVIEW"; - -BI.shortcut("bi.dynamic_date_pane", BI.DynamicDatePane); - -BI.extend(BI.DynamicDatePane, { - Static: 1, - Dynamic: 2 -}); +} diff --git a/src/widget/datepane/index.js b/src/widget/datepane/index.js new file mode 100644 index 000000000..240c9dd1a --- /dev/null +++ b/src/widget/datepane/index.js @@ -0,0 +1,2 @@ +export { StaticDatePaneCard } from "./card.static.datepane"; +export { DynamicDatePane } from "./datepane"; diff --git a/src/widget/datetime/datetime.combo.js b/src/widget/datetime/datetime.combo.js index 28037bb69..1d279cb39 100644 --- a/src/widget/datetime/datetime.combo.js +++ b/src/widget/datetime/datetime.combo.js @@ -1,64 +1,75 @@ -/** - * Created by Urthur on 2017/7/14. - */ -BI.DateTimeCombo = BI.inherit(BI.Single, { - constants: { +import { shortcut, extend, getDate, isNotNull, createWidget } from "@/core"; +import { Single, Combo, IconButton } from "@/base"; +import { DateTimePopup } from "./datetime.popup"; + +@shortcut() +export class DateTimeCombo extends Single { + static xtype = "bi.date_time_combo" + + constants = { popupHeight: 290, popupWidth: 270, comboAdjustHeight: 1, border: 1, - iconWidth: 24 - }, - _defaultConfig: function (conf) { - return BI.extend(BI.DateTimeCombo.superclass._defaultConfig.apply(this, arguments), { - baseCls: "bi-date-time-combo bi-focus-shadow " + (conf.simple ? "bi-border-bottom" : "bi-border bi-border-radius"), + iconWidth: 24, + }; + + static EVENT_CANCEL = "EVENT_CANCEL" + static EVENT_CONFIRM = "EVENT_CONFIRM" + static EVENT_CHANGE = "EVENT_CHANGE" + static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW" + + _defaultConfig(conf) { + return extend(super._defaultConfig(...arguments), { + baseCls: `bi-date-time-combo bi-focus-shadow ${conf.simple ? "bi-border-bottom" : "bi-border bi-border-radius"}`, width: 200, height: 24, minDate: "1900-01-01", - maxDate: "2099-12-31" + maxDate: "2099-12-31", }); - }, - _init: function () { - BI.DateTimeCombo.superclass._init.apply(this, arguments); - var self = this, opts = this.options; - var date = BI.getDate(); - this.storeValue = BI.isNotNull(opts.value) ? opts.value : { + } + + _init() { + super._init(...arguments); + const opts = this.options; + const date = getDate(); + this.storeValue = isNotNull(opts.value) ? opts.value : { year: date.getFullYear(), month: date.getMonth() + 1, day: date.getDate(), hour: date.getHours(), minute: date.getMinutes(), - second: date.getSeconds() + second: date.getSeconds(), }; - this.trigger = BI.createWidget({ + this.trigger = createWidget({ type: "bi.date_time_trigger", height: opts.height, min: opts.minDate, max: opts.maxDate, - value: opts.value + value: opts.value, }); - this.popup = BI.createWidget({ + this.popup = createWidget({ type: "bi.date_time_popup", behaviors: opts.behaviors, min: opts.minDate, max: opts.maxDate, - value: opts.value + value: opts.value, }); - self.setValue(this.storeValue); + this.setValue(this.storeValue); - this.popup.on(BI.DateTimePopup.BUTTON_CANCEL_EVENT_CHANGE, function () { - self.setValue(self.storeValue); - self.hidePopupView(); - self.fireEvent(BI.DateTimeCombo.EVENT_CANCEL); + this.popup.on(DateTimePopup.BUTTON_CANCEL_EVENT_CHANGE, () => { + this.setValue(this.storeValue); + this.hidePopupView(); + this.fireEvent(DateTimeCombo.EVENT_CANCEL); }); - this.popup.on(BI.DateTimePopup.BUTTON_OK_EVENT_CHANGE, function () { - self.storeValue = self.popup.getValue(); - self.setValue(self.storeValue); - self.hidePopupView(); - self.fireEvent(BI.DateTimeCombo.EVENT_CONFIRM); + this.popup.on(DateTimePopup.BUTTON_OK_EVENT_CHANGE, () => { + this.storeValue = this.popup.getValue(); + this.setValue(this.storeValue); + this.hidePopupView(); + this.fireEvent(DateTimeCombo.EVENT_CONFIRM); }); - this.combo = BI.createWidget({ + this.combo = createWidget({ type: "bi.combo", container: opts.container, toggle: false, @@ -69,56 +80,51 @@ BI.DateTimeCombo = BI.inherit(BI.Single, { popup: { el: this.popup, width: this.constants.popupWidth, - stopPropagation: false + stopPropagation: false, }, // DEC-4250 和复选下拉一样，点击不收起 - hideChecker: function (e) { + hideChecker (e) { return triggerBtn.element.find(e.target).length === 0; - } + }, }); - this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () { - self.popup.setValue(self.storeValue); - self.fireEvent(BI.DateTimeCombo.EVENT_BEFORE_POPUPVIEW); + this.combo.on(Combo.EVENT_BEFORE_POPUPVIEW, () => { + this.popup.setValue(this.storeValue); + this.fireEvent(DateTimeCombo.EVENT_BEFORE_POPUPVIEW); }); - var triggerBtn = BI.createWidget({ + const triggerBtn = createWidget({ type: "bi.icon_button", cls: "bi-trigger-icon-button date-font", width: this.constants.iconWidth, height: opts.height, }); - triggerBtn.on(BI.IconButton.EVENT_CHANGE, function () { - if (self.combo.isViewVisible()) { - // self.combo.hideView(); + triggerBtn.on(IconButton.EVENT_CHANGE, () => { + if (this.combo.isViewVisible()) { + // this.combo.hideView(); } else { - self.combo.showView(); + this.combo.showView(); } }); - BI.createWidget({ + createWidget({ type: "bi.htape", columnSize: ["", this.constants.iconWidth], element: this, - items: [this.combo, triggerBtn] + items: [this.combo, triggerBtn], }); - }, + } - setValue: function (v) { + setValue(v) { this.storeValue = v; this.popup.setValue(v); this.trigger.setValue(v); - }, - getValue: function () { + } + + getValue() { return this.storeValue; - }, + } - hidePopupView: function () { + hidePopupView() { this.combo.hideView(); } -}); - -BI.DateTimeCombo.EVENT_CANCEL = "EVENT_CANCEL"; -BI.DateTimeCombo.EVENT_CONFIRM = "EVENT_CONFIRM"; -BI.DateTimeCombo.EVENT_CHANGE = "EVENT_CHANGE"; -BI.DateTimeCombo.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; -BI.shortcut("bi.date_time_combo", BI.DateTimeCombo); +} diff --git a/src/widget/datetime/datetime.popup.js b/src/widget/datetime/datetime.popup.js index 7102fbc41..bafe42b11 100644 --- a/src/widget/datetime/datetime.popup.js +++ b/src/widget/datetime/datetime.popup.js @@ -1,113 +1,121 @@ -/** - * Created by Urthur on 2017/7/14. - */ -BI.DateTimePopup = BI.inherit(BI.Widget, { - _defaultConfig: function () { - return BI.extend(BI.DateTimePopup.superclass._defaultConfig.apply(this, arguments), { +import { shortcut, Widget, extend, createWidget, i18nText, isNull, getDate } from "@/core"; +import { TextButton } from "@/base"; +import { DateCalendarPopup } from "../date/calendar"; + +@shortcut() +export class DateTimePopup extends Widget { + static xtype = "bi.date_time_popup" + + static BUTTON_OK_EVENT_CHANGE = "BUTTON_OK_EVENT_CHANGE" + static BUTTON_CANCEL_EVENT_CHANGE = "BUTTON_CANCEL_EVENT_CHANGE" + static CALENDAR_EVENT_CHANGE = "CALENDAR_EVENT_CHANGE" + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-date-time-popup", width: 268, - height: 374 + height: 374, }); - }, - _init: function () { - BI.DateTimePopup.superclass._init.apply(this, arguments); - var self = this, opts = this.options; - this.cancelButton = BI.createWidget({ + } + + _init() { + super._init(...arguments); + const opts = this.options; + this.cancelButton = createWidget({ type: "bi.text_button", cls: "multidate-popup-button bi-border-top bi-border-right", shadow: true, - text: BI.i18nText("BI-Basic_Cancel") + text: i18nText("BI-Basic_Cancel"), }); - this.cancelButton.on(BI.TextButton.EVENT_CHANGE, function () { - self.fireEvent(BI.DateTimePopup.BUTTON_CANCEL_EVENT_CHANGE); + this.cancelButton.on(TextButton.EVENT_CHANGE, () => { + this.fireEvent(DateTimePopup.BUTTON_CANCEL_EVENT_CHANGE); }); - this.okButton = BI.createWidget({ + this.okButton = createWidget({ type: "bi.text_button", cls: "multidate-popup-button bi-border-top", shadow: true, - text: BI.i18nText("BI-Basic_OK") + text: i18nText("BI-Basic_OK"), }); - this.okButton.on(BI.TextButton.EVENT_CHANGE, function () { - self.fireEvent(BI.DateTimePopup.BUTTON_OK_EVENT_CHANGE); + this.okButton.on(TextButton.EVENT_CHANGE, () => { + this.fireEvent(DateTimePopup.BUTTON_OK_EVENT_CHANGE); }); - this.dateCombo = BI.createWidget({ + this.dateCombo = createWidget({ type: "bi.date_calendar_popup", behaviors: opts.behaviors, - min: self.options.min, - max: self.options.max + min: this.options.min, + max: this.options.max, }); - self.dateCombo.on(BI.DateCalendarPopup.EVENT_CHANGE, function () { - self.fireEvent(BI.DateTimePopup.CALENDAR_EVENT_CHANGE); + this.dateCombo.on(DateCalendarPopup.EVENT_CHANGE, () => { + this.fireEvent(DateTimePopup.CALENDAR_EVENT_CHANGE); }); - this.dateButton = BI.createWidget({ + this.dateButton = createWidget({ type: "bi.grid", - items: [[this.cancelButton, this.okButton]] + items: [ + [this.cancelButton, this.okButton] + ], }); - BI.createWidget({ + createWidget({ element: this, type: "bi.vtape", items: [{ - el: this.dateCombo + el: this.dateCombo, }, { el: { type: "bi.center_adapt", cls: "bi-split-top", items: [{ type: "bi.dynamic_date_time_select", - ref: function (_ref) { - self.timeSelect = _ref; - } - }] + ref: _ref => { + this.timeSelect = _ref; + }, + }], }, - height: 50 + height: 50, }, { el: this.dateButton, - height: 30 - }] + height: 30, + }], }); this.setValue(opts.value); - }, + } - setValue: function (v) { - var value = v, date; - if (BI.isNull(value)) { - date = BI.getDate(); + setValue(v) { + const value = v; + let date; + if (isNull(value)) { + date = getDate(); this.dateCombo.setValue({ year: date.getFullYear(), month: date.getMonth() + 1, - day: date.getDate() + day: date.getDate(), }); this.timeSelect.setValue({ hour: date.getHours(), minute: date.getMinutes(), - second: date.getSeconds() + second: date.getSeconds(), }); } else { this.dateCombo.setValue({ year: value.year, month: value.month, - day: value.day + day: value.day, }); this.timeSelect.setValue({ hour: value.hour, minute: value.minute, - second: value.second + second: value.second, }); } - }, + } - getValue: function () { - return BI.extend({ + getValue() { + return extend({ year: this.dateCombo.getValue().year, month: this.dateCombo.getValue().month, - day: this.dateCombo.getValue().day + day: this.dateCombo.getValue().day, }, this.timeSelect.getValue()); } -}); -BI.DateTimePopup.BUTTON_OK_EVENT_CHANGE = "BUTTON_OK_EVENT_CHANGE"; -BI.DateTimePopup.BUTTON_CANCEL_EVENT_CHANGE = "BUTTON_CANCEL_EVENT_CHANGE"; -BI.DateTimePopup.CALENDAR_EVENT_CHANGE = "CALENDAR_EVENT_CHANGE"; -BI.shortcut("bi.date_time_popup", BI.DateTimePopup); +} diff --git a/src/widget/datetime/datetime.trigger.js b/src/widget/datetime/datetime.trigger.js index d161585e6..c8ea49714 100644 --- a/src/widget/datetime/datetime.trigger.js +++ b/src/widget/datetime/datetime.trigger.js @@ -1,63 +1,75 @@ -/** - * Created by Urthur on 2017/7/14. - */ -BI.DateTimeTrigger = BI.inherit(BI.Trigger, { - _const: { +import { + shortcut, + extend, + createWidget, + isNull, + getDate, + print +} from "@/core"; +import { + Trigger +} from "@/base"; + + +@shortcut() +export class DateTimeTrigger extends Trigger { + static xtype = "bi.date_time_trigger" + + _const = { hgap: 4, - iconWidth:24 - }, + iconWidth: 24, + }; - _defaultConfig: function () { - return BI.extend(BI.DateTimeTrigger.superclass._defaultConfig.apply(this, arguments), { + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { extraCls: "bi-date-time-trigger", min: "1900-01-01", // 最小日期 max: "2099-12-31", // 最大日期 height: 24, - width: 200 + width: 200, }); - }, - _init: function () { - BI.DateTimeTrigger.superclass._init.apply(this, arguments); - var self = this, o = this.options, c = this._const; - this.text = BI.createWidget({ + } + + _init() { + super._init(...arguments); + const o = this.options, + c = this._const; + this.text = createWidget({ type: "bi.label", textAlign: "left", height: o.height, width: o.width, - hgap: c.hgap + hgap: c.hgap, }); - BI.createWidget({ + createWidget({ type: "bi.htape", element: this, items: [{ - el: this.text - },{ - el: BI.createWidget(), - width: this._const.iconWidth - }] + el: this.text, + }, { + el: createWidget(), + width: this._const.iconWidth, + }], }); this.setValue(o.value); - }, - - _printTime: function (v) { - return v < 10 ? "0" + v : v; - }, - - setValue: function (v) { - var self = this; - var value = v, dateStr; - if(BI.isNull(value)) { - value = BI.getDate(); - dateStr = BI.print(value, "%Y-%X-%d %H:%M:%S"); - } else { - var date = BI.getDate(value.year, value.month - 1, value.day, value.hour, value.minute, value.second); - dateStr = BI.print(date, "%Y-%X-%d %H:%M:%S"); + } + + _printTime(v) { + return v < 10 ? `0${v}` : v; + } + setValue(v) { + let value = v, + dateStr; + if (isNull(value)) { + value = getDate(); + dateStr = print(value, "%Y-%X-%d %H:%M:%S"); + } else { + const date = getDate(value.year, value.month - 1, value.day, value.hour, value.minute, value.second); + dateStr = print(date, "%Y-%X-%d %H:%M:%S"); } this.text.setText(dateStr); this.text.setTitle(dateStr); } - -}); -BI.shortcut("bi.date_time_trigger", BI.DateTimeTrigger); +} diff --git a/src/widget/datetime/index.js b/src/widget/datetime/index.js new file mode 100644 index 000000000..3a292c518 --- /dev/null +++ b/src/widget/datetime/index.js @@ -0,0 +1,3 @@ +export { DateTimeCombo } from "./datetime.combo"; +export { DateTimePopup } from "./datetime.popup"; +export { DateTimeTrigger } from "./datetime.trigger"; diff --git a/src/widget/datetimepane/card.static.datetimepane.js b/src/widget/datetimepane/card.static.datetimepane.js index b63b83c9a..910ed91f8 100644 --- a/src/widget/datetimepane/card.static.datetimepane.js +++ b/src/widget/datetimepane/card.static.datetimepane.js @@ -1,205 +1,216 @@ -BI.StaticDateTimePaneCard = BI.inherit(BI.Widget, { - _defaultConfig: function () { - var conf = BI.StaticDateTimePaneCard.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { +import { shortcut, Widget, extend, getDate, createWidget, bind, isNull, each, isNotEmptyString, getMonthDays } from "@/core"; +import { DatePicker, DateCalendarPopup } from "../date/calendar"; +import { Calendar } from "@/case"; +import { Navigation } from "@/base"; +import { DynamicDateTimeSelect } from "../dynamicdatetime/dynamicdatetime.timeselect"; + +@shortcut() +export class StaticDateTimePaneCard extends Widget { + static xtype = "bi.static_date_time_pane_card" + + static EVENT_BEFORE_YEAR_MONTH_POPUPVIEW = "EVENT_BEFORE_YEAR_MONTH_POPUPVIEW" + + _defaultConfig() { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { baseCls: "bi-date-time-pane", min: "1900-01-01", // 最小日期 max: "2099-12-31", // 最大日期 - selectedTime: null + selectedTime: null, }); - }, - _init: function () { - BI.StaticDateTimePaneCard.superclass._init.apply(this, arguments); - var self = this, o = this.options; + } + + _init() { + super._init(...arguments); + const o = this.options; - this.today = BI.getDate(); + this.today = getDate(); this._year = this.today.getFullYear(); this._month = this.today.getMonth() + 1; this.selectedTime = o.selectedTime || { year: this._year, - month: this._month + month: this._month, }; - this.datePicker = BI.createWidget({ + this.datePicker = createWidget({ type: "bi.date_picker", behaviors: o.behaviors, min: o.min, - max: o.max + max: o.max, }); - this.datePicker.on(BI.DatePicker.EVENT_CHANGE, function () { - var value = self.datePicker.getValue(); - var monthDay = BI.getMonthDays(BI.getDate(value.year, value.month - 1, 1)); - var day = self.selectedTime.day || 0; + this.datePicker.on(DatePicker.EVENT_CHANGE, () => { + const value = this.datePicker.getValue(); + const monthDay = getMonthDays(getDate(value.year, value.month - 1, 1)); + let day = this.selectedTime.day || 0; if (day > monthDay) { day = monthDay; } - self.selectedTime = BI.extend(self.selectedTime, { + this.selectedTime = extend(this.selectedTime, { year: value.year, - month: value.month + month: value.month, }); - day !== 0 && (self.selectedTime.day = day); - self.calendar.setSelect(BI.Calendar.getPageByDateJSON(self.selectedTime)); - self.calendar.setValue(self.selectedTime); - day !== 0 && self.fireEvent(BI.DateCalendarPopup.EVENT_CHANGE); + day !== 0 && (this.selectedTime.day = day); + this.calendar.setSelect(Calendar.getPageByDateJSON(this.selectedTime)); + this.calendar.setValue(this.selectedTime); + day !== 0 && this.fireEvent(DateCalendarPopup.EVENT_CHANGE); }); - this.datePicker.on(BI.DatePicker.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW, function () { - self.fireEvent(BI.StaticDateTimePaneCard.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW); + this.datePicker.on(DatePicker.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW, () => { + this.fireEvent(StaticDateTimePaneCard.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW); }); - this.calendar = BI.createWidget({ + this.calendar = createWidget({ direction: "custom", // logic: { // dynamic: false // }, type: "bi.navigation", tab: this.datePicker, - cardCreator: BI.bind(this._createNav, this) + cardCreator: bind(this._createNav, this), }); - this.calendar.on(BI.Navigation.EVENT_CHANGE, function () { - self.selectedTime = BI.extend(self.calendar.getValue(), self.timeSelect.getValue()); - self.calendar.empty(); - self.setValue(self.selectedTime); - self.fireEvent(BI.DateCalendarPopup.EVENT_CHANGE); + this.calendar.on(Navigation.EVENT_CHANGE, () => { + this.selectedTime = extend(this.calendar.getValue(), this.timeSelect.getValue()); + this.calendar.empty(); + this.setValue(this.selectedTime); + this.fireEvent(DateCalendarPopup.EVENT_CHANGE); }); - BI.createWidget({ + createWidget({ type: "bi.vtape", element: this, hgap: 10, items: [{ el: this.datePicker, - height: 40 + height: 40, }, this.calendar, { el: { type: "bi.dynamic_date_time_select", cls: "bi-split-top", - ref: function () { - self.timeSelect = this; + ref: _ref => { + this.timeSelect = _ref; }, listeners: [{ - eventName: BI.DynamicDateTimeSelect.EVENT_CONFIRM, - action: function () { - self.selectedTime = BI.extend(self.calendar.getValue(), self.timeSelect.getValue()); - self.fireEvent("EVENT_CHANGE"); - } - }] + eventName: DynamicDateTimeSelect.EVENT_CONFIRM, + action: () => { + this.selectedTime = extend(this.calendar.getValue(), this.timeSelect.getValue()); + this.fireEvent("EVENT_CHANGE"); + }, + }], }, - height: 40 - }] + height: 40, + }], }); - BI.createWidget({ + createWidget({ type: "bi.absolute", element: this, items: [{ el: { type: "bi.layout", - cls: "bi-split-top" + cls: "bi-split-top", }, height: 1, top: 40, left: 0, - right: 0 - }] + right: 0, + }], }); this.setValue(o.selectedTime); + } - }, - - _createNav: function (v) { - var date = BI.Calendar.getDateJSONByPage(v); - var calendar = BI.createWidget({ + _createNav(v) { + const date = Calendar.getDateJSONByPage(v); + const calendar = createWidget({ type: "bi.calendar", logic: { - dynamic: false + dynamic: false, }, min: this.options.min, max: this.options.max, year: date.year, month: date.month, - day: this.selectedTime.day + day: this.selectedTime.day, }); + return calendar; - }, + } - _getNewCurrentDate: function () { - var today = BI.getDate(); + _getNewCurrentDate() { + const today = getDate(); + return { year: today.getFullYear(), - month: today.getMonth() + 1 + month: today.getMonth() + 1, }; - }, + } - _setCalenderValue: function (date) { - this.calendar.setSelect(BI.Calendar.getPageByDateJSON(date)); + _setCalenderValue(date) { + this.calendar.setSelect(Calendar.getPageByDateJSON(date)); this.calendar.setValue(date); - this.selectedTime = BI.extend({}, this.timeSelect.getValue(), date); - }, + this.selectedTime = extend({}, this.timeSelect.getValue(), date); + } - _setDatePicker: function (timeOb) { - if (BI.isNull(timeOb) || BI.isNull(timeOb.year) || BI.isNull(timeOb.month)) { + _setDatePicker(timeOb) { + if (isNull(timeOb) || isNull(timeOb.year) || isNull(timeOb.month)) { this.datePicker.setValue(this._getNewCurrentDate()); } else { this.datePicker.setValue(timeOb); } - }, + } - _setCalendar: function (timeOb) { - if (BI.isNull(timeOb) || BI.isNull(timeOb.day)) { + _setCalendar(timeOb) { + if (isNull(timeOb) || isNull(timeOb.day)) { this.calendar.empty(); this._setCalenderValue(this._getNewCurrentDate()); } else { this._setCalenderValue(timeOb); } - }, + } - _checkMin: function () { - var o = this.options; - BI.each(this.calendar.getAllCard(), function (idx, calendar) { + _checkMin() { + const o = this.options; + each(this.calendar.getAllCard(), (idx, calendar) => { calendar.setMinDate(o.min); }); - }, + } - _checkMax: function () { - var o = this.options; - BI.each(this.calendar.getAllCard(), function (idx, calendar) { + _checkMax() { + const o = this.options; + each(this.calendar.getAllCard(), (idx, calendar) => { calendar.setMaxDate(o.max); }); - }, + } - setMinDate: function (minDate) { - if (BI.isNotEmptyString(this.options.min)) { + setMinDate(minDate) { + if (isNotEmptyString(this.options.min)) { this.options.min = minDate; this.datePicker.setMinDate(minDate); this._checkMin(); } - }, + } - setMaxDate: function (maxDate) { - if (BI.isNotEmptyString(this.options.max)) { + setMaxDate(maxDate) { + if (isNotEmptyString(this.options.max)) { this.options.max = maxDate; this.datePicker.setMaxDate(maxDate); this._checkMax(); } - }, + } - setValue: function (timeOb) { + setValue(timeOb) { timeOb = timeOb || {}; this._setDatePicker(timeOb); this._setCalendar(timeOb); this.timeSelect.setValue({ hour: timeOb.hour, minute: timeOb.minute, - second: timeOb.second + second: timeOb.second, }); - }, + } - getValue: function () { + getValue() { return this.selectedTime; } - -}); -BI.StaticDateTimePaneCard.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW = "EVENT_BEFORE_YEAR_MONTH_POPUPVIEW"; -BI.shortcut("bi.static_date_time_pane_card", BI.StaticDateTimePaneCard); \ No newline at end of file +} diff --git a/src/widget/datetimepane/datetimepane.js b/src/widget/datetimepane/datetimepane.js index aaad8a0dd..f806b0f4d 100644 --- a/src/widget/datetimepane/datetimepane.js +++ b/src/widget/datetimepane/datetimepane.js @@ -1,14 +1,28 @@ -BI.DynamicDateTimePane = BI.inherit(BI.Widget, { +import { shortcut, Widget, createItems, i18nText, isNull, isEmptyObject, isEmptyString, isNotEmptyObject, getDate } from "@/core"; +import { ButtonGroup, TextButton } from "@/base"; +import { DynamicDatePane } from "../datepane"; +import { DynamicDateCombo, DynamicDateHelper } from "../dynamicdate"; - props: { +@shortcut() +export class DynamicDateTimePane extends Widget { + static xtype = "bi.dynamic_date_time_pane" + + static EVENT_CHANGE = "EVENT_CHANGE" + static EVENT_BEFORE_YEAR_MONTH_POPUPVIEW = "EVENT_BEFORE_YEAR_MONTH_POPUPVIEW" + + static Static = 1 + static Dynamic = 2 + + props = { baseCls: "bi-dynamic-date-pane", minDate: "1900-01-01", maxDate: "2099-12-31", supportDynamic: true, - }, + }; - render: function () { - var self = this, o = this.options; + render() { + const o = this.options; + return { type: "bi.vtape", items: [{ @@ -17,198 +31,191 @@ BI.DynamicDateTimePane = BI.inherit(BI.Widget, { invisible: !o.supportDynamic, cls: "bi-split-bottom", height: 30, - items: BI.createItems([{ - text: BI.i18nText("BI-Multi_Date_YMD"), - value: BI.DynamicDateTimePane.Static + items: createItems([{ + text: i18nText("BI-Multi_Date_YMD"), + value: DynamicDateTimePane.Static, }, { - text: BI.i18nText("BI-Basic_Dynamic_Title"), - value: BI.DynamicDateTimePane.Dynamic + text: i18nText("BI-Basic_Dynamic_Title"), + value: DynamicDateTimePane.Dynamic, }], { - textAlign: "center" + textAlign: "center", }), listeners: [{ - eventName: BI.ButtonGroup.EVENT_CHANGE, - action: function () { - var value = this.getValue()[0]; - self.dateTab.setSelect(value); + eventName: ButtonGroup.EVENT_CHANGE, + action: () => { + const value = this.switcher.getValue()[0]; + let date; + this.dateTab.setSelect(value); switch (value) { - case BI.DynamicDateTimePane.Static: - var date = BI.DynamicDateHelper.getCalculation(self.dynamicPane.getValue()); - self.ymd.setValue({ - year: date.getFullYear(), - month: date.getMonth() + 1, - day: date.getDate() - }); - break; - case BI.DynamicDateTimePane.Dynamic: - self.dynamicPane.setValue({ - year: 0 - }); - break; - default: - break; + case DynamicDateTimePane.Static: + date = DynamicDateHelper.getCalculation(this.dynamicPane.getValue()); + this.ymd.setValue({ + year: date.getFullYear(), + month: date.getMonth() + 1, + day: date.getDate(), + }); + break; + case DynamicDateTimePane.Dynamic: + this.dynamicPane.setValue({ + year: 0, + }); + break; + default: + break; } - self.fireEvent(BI.DynamicDateTimePane.EVENT_CHANGE); - } + this.fireEvent(DynamicDateTimePane.EVENT_CHANGE); + }, }], - ref: function () { - self.switcher = this; - } + ref: _ref => { + this.switcher = _ref; + }, }, - height: o.supportDynamic ? 30 : 0 + height: o.supportDynamic ? 30 : 0, }, { type: "bi.tab", - ref: function () { - self.dateTab = this; + ref: _ref => { + this.dateTab = _ref; }, - showIndex: BI.DynamicDateTimePane.Static, - cardCreator: function (v) { + showIndex: DynamicDateTimePane.Static, + cardCreator: v => { switch (v) { - case BI.DynamicDateTimePane.Static: - return { - type: "bi.static_date_time_pane_card", + case DynamicDateTimePane.Static: + return { + type: "bi.static_date_time_pane_card", + min: o.minDate, + max: o.maxDate, + behaviors: o.behaviors, + listeners: [{ + eventName: "EVENT_CHANGE", + action: () => { + this.fireEvent(DynamicDateTimePane.EVENT_CHANGE); + }, + }, { + eventName: "EVENT_BEFORE_YEAR_MONTH_POPUPVIEW", + action: () => { + this.fireEvent(DynamicDateTimePane.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW); + }, + }], + ref: _ref => { + this.ymd = _ref; + }, + }; + case DynamicDateTimePane.Dynamic: + default: + return { + type: "bi.vtape", + items: [{ + type: "bi.dynamic_date_card", min: o.minDate, max: o.maxDate, - behaviors: o.behaviors, - listeners: [{ - eventName: "EVENT_CHANGE", - action: function () { - self.fireEvent(BI.DynamicDateTimePane.EVENT_CHANGE); - } - }, { - eventName: "EVENT_BEFORE_YEAR_MONTH_POPUPVIEW", - action: function () { - self.fireEvent(BI.DynamicDateTimePane.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW); - } - }], - ref: function () { - self.ymd = this; - } - }; - case BI.DynamicDateTimePane.Dynamic: - default: - return { - type: "bi.vtape", - items: [{ - type: "bi.dynamic_date_card", - min: o.minDate, - max: o.maxDate, - ref: function () { - self.dynamicPane = this; - } - }, { - el: { - type: "bi.center", - items: [{ - type: "bi.text_button", - cls: "bi-high-light bi-border-top", - shadow: true, - text: BI.i18nText("BI-Basic_Clear"), - textHeight: 23, - listeners: [{ - eventName: BI.TextButton.EVENT_CHANGE, - action: function () { - self.setValue(); - self.fireEvent(BI.DynamicDatePane.EVENT_CHANGE); + ref: _ref => { + this.dynamicPane = _ref; + }, + }, { + el: { + type: "bi.center", + items: [{ + type: "bi.text_button", + cls: "bi-high-light bi-border-top", + shadow: true, + text: i18nText("BI-Basic_Clear"), + textHeight: 23, + listeners: [{ + eventName: TextButton.EVENT_CHANGE, + action: () => { + this.setValue(); + this.fireEvent(DynamicDatePane.EVENT_CHANGE); + }, + }], + }, { + type: "bi.text_button", + cls: "bi-border-left bi-high-light bi-border-top", + textHeight: 23, + shadow: true, + text: i18nText("BI-Basic_OK"), + listeners: [{ + eventName: TextButton.EVENT_CHANGE, + action: () => { + const type = this.dateTab.getSelect(); + if (type === DynamicDateCombo.Dynamic) { + this.dynamicPane.checkValidation(true) && this.fireEvent(DynamicDatePane.EVENT_CHANGE); + } else { + this.fireEvent(DynamicDatePane.EVENT_CHANGE); } - }] - }, { - type: "bi.text_button", - cls: "bi-border-left bi-high-light bi-border-top", - textHeight: 23, - shadow: true, - text: BI.i18nText("BI-Basic_OK"), - listeners: [{ - eventName: BI.TextButton.EVENT_CHANGE, - action: function () { - var type = self.dateTab.getSelect(); - if (type === BI.DynamicDateCombo.Dynamic) { - self.dynamicPane.checkValidation(true) && self.fireEvent(BI.DynamicDatePane.EVENT_CHANGE); - } else { - self.fireEvent(BI.DynamicDatePane.EVENT_CHANGE); - } - } - }] - }] - }, - height: 24 - }] - }; + }, + }], + }], + }, + height: 24, + }], + }; } - } - }] + }, + }], }; - }, + } - created: function () { + created() { this.setValue(this.options.value); - }, + } - _checkValueValid: function (value) { - return BI.isNull(value) || BI.isEmptyObject(value) || BI.isEmptyString(value); - }, + _checkValueValid(value) { + return isNull(value) || isEmptyObject(value) || isEmptyString(value); + } - _checkValue: function (v) { + _checkValue(v) { switch (v.type) { - case BI.DynamicDateCombo.Dynamic: - return BI.isNotEmptyObject(v.value); - case BI.DynamicDateCombo.Static: - default: - return true; + case DynamicDateCombo.Dynamic: + return isNotEmptyObject(v.value); + case DynamicDateCombo.Static: + default: + return true; } - }, + } - setMinDate: function (minDate) { + setMinDate(minDate) { if (this.options.minDate !== minDate) { this.options.minDate = minDate; this.ymd.setMinDate(minDate); } - }, + } - setMaxDate: function (maxDate) { + setMaxDate(maxDate) { if (this.options.maxDate !== maxDate) { this.options.maxDate = maxDate; this.ymd.setMaxDate(maxDate); } - }, + } - setValue: function (v) { + setValue(v) { v = v || {}; - var type = v.type || BI.DynamicDateTimePane.Static; - var value = v.value || v; + const type = v.type || DynamicDateTimePane.Static; + const value = v.value || v; this.switcher.setValue(type); this.dateTab.setSelect(type); switch (type) { - case BI.DynamicDateTimePane.Dynamic: - this.dynamicPane.setValue(value); - break; - case BI.DynamicDateTimePane.Static: - default: - if (this._checkValueValid(value)) { - var date = BI.getDate(); - this.ymd.setValue({ - year: date.getFullYear(), - month: date.getMonth() + 1 - }); - } else { - this.ymd.setValue(value); - } - break; + case DynamicDateTimePane.Dynamic: + this.dynamicPane.setValue(value); + break; + case DynamicDateTimePane.Static: + default: + if (this._checkValueValid(value)) { + const date = getDate(); + this.ymd.setValue({ + year: date.getFullYear(), + month: date.getMonth() + 1, + }); + } else { + this.ymd.setValue(value); + } + break; } - }, + } - getValue: function () { + getValue() { return { type: this.dateTab.getSelect(), - value: this.dateTab.getValue() + value: this.dateTab.getValue(), }; } -}); -BI.DynamicDateTimePane.EVENT_CHANGE = "EVENT_CHANGE"; -BI.DynamicDateTimePane.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW = "EVENT_BEFORE_YEAR_MONTH_POPUPVIEW"; -BI.shortcut("bi.dynamic_date_time_pane", BI.DynamicDateTimePane); - -BI.extend(BI.DynamicDateTimePane, { - Static: 1, - Dynamic: 2 -}); +} diff --git a/src/widget/datetimepane/index.js b/src/widget/datetimepane/index.js new file mode 100644 index 000000000..f70ff91e9 --- /dev/null +++ b/src/widget/datetimepane/index.js @@ -0,0 +1,2 @@ +export { StaticDateTimePaneCard } from "./card.static.datetimepane"; +export { DynamicDateTimePane } from "./datetimepane"; diff --git a/src/widget/dynamicdate/dynamicdate.caculate.js b/src/widget/dynamicdate/dynamicdate.caculate.js index 665661d9e..e94718d82 100644 --- a/src/widget/dynamicdate/dynamicdate.caculate.js +++ b/src/widget/dynamicdate/dynamicdate.caculate.js @@ -1,117 +1,119 @@ -!(function () { - BI.DynamicDateHelper = {}; - BI.extend(BI.DynamicDateHelper, { - getCalculation: function (obj) { - var date = BI.getDate(); +import { isNotNull, parseInt, getDate, i18nText, size, getOffsetQuarter, getOffsetMonth, getOffsetDate, getLastDateOfMonth, getWeekStartDate, getWeekEndDate, getQuarterStartDate, getQuarterEndDate, print } from "@/core"; +import { DynamicDateCard } from "./dynamicdate.card"; - return this.getCalculationByDate(date, obj); - }, +export const DynamicDateHelper = { + getCalculation (obj) { + const date = getDate(); - getDescription: function (obj) { - var value = ""; - var endText = ""; - if(BI.isNotNull(obj.year)) { - if(BI.parseInt(obj.year) !== 0) { - value += Math.abs(obj.year) + BI.i18nText("BI-Basic_Year") + (obj.year < 0 ? BI.i18nText("BI-Basic_Front") : BI.i18nText("BI-Basic_Behind")); - } - endText = getPositionText(BI.i18nText("BI-Basic_Year"), obj.position); - } - if(BI.isNotNull(obj.quarter)) { - if(BI.parseInt(obj.quarter) !== 0) { - value += Math.abs(obj.quarter) + BI.i18nText("BI-Basic_Single_Quarter") + (obj.quarter < 0 ? BI.i18nText("BI-Basic_Front") : BI.i18nText("BI-Basic_Behind")); - } - endText = getPositionText(BI.i18nText("BI-Basic_Single_Quarter"), obj.position); - } - if(BI.isNotNull(obj.month)) { - if(BI.parseInt(obj.month) !== 0) { - value += Math.abs(obj.month) + BI.i18nText("BI-Basic_Month") + (obj.month < 0 ? BI.i18nText("BI-Basic_Front") : BI.i18nText("BI-Basic_Behind")); - } - endText = getPositionText(BI.i18nText("BI-Basic_Month"), obj.position); + return this.getCalculationByDate(date, obj); + }, + + getDescription (obj) { + let value = ""; + let endText = ""; + if (isNotNull(obj.year)) { + if (parseInt(obj.year) !== 0) { + value += Math.abs(obj.year) + i18nText("BI-Basic_Year") + (obj.year < 0 ? i18nText("BI-Basic_Front") : i18nText("BI-Basic_Behind")); + } + endText = getPositionText(i18nText("BI-Basic_Year"), obj.position); + } + if (isNotNull(obj.quarter)) { + if (parseInt(obj.quarter) !== 0) { + value += Math.abs(obj.quarter) + i18nText("BI-Basic_Single_Quarter") + (obj.quarter < 0 ? i18nText("BI-Basic_Front") : i18nText("BI-Basic_Behind")); } - if(BI.isNotNull(obj.week)) { - if(BI.parseInt(obj.week) !== 0) { - value += Math.abs(obj.week) + BI.i18nText("BI-Basic_Week") + (obj.week < 0 ? BI.i18nText("BI-Basic_Front") : BI.i18nText("BI-Basic_Behind")); - } - endText = getPositionText(BI.i18nText("BI-Basic_Week"), obj.position); + endText = getPositionText(i18nText("BI-Basic_Single_Quarter"), obj.position); + } + if (isNotNull(obj.month)) { + if (parseInt(obj.month) !== 0) { + value += Math.abs(obj.month) + i18nText("BI-Basic_Month") + (obj.month < 0 ? i18nText("BI-Basic_Front") : i18nText("BI-Basic_Behind")); } - if(BI.isNotNull(obj.day)) { - if(BI.parseInt(obj.day) !== 0) { - value += Math.abs(obj.day) + BI.i18nText("BI-Basic_Day") + (obj.day < 0 ? BI.i18nText("BI-Basic_Front") : BI.i18nText("BI-Basic_Behind")); - } - endText = BI.size(obj) === 1 ? getPositionText(BI.i18nText("BI-Basic_Month"), obj.position) : ""; + endText = getPositionText(i18nText("BI-Basic_Month"), obj.position); + } + if (isNotNull(obj.week)) { + if (parseInt(obj.week) !== 0) { + value += Math.abs(obj.week) + i18nText("BI-Basic_Week") + (obj.week < 0 ? i18nText("BI-Basic_Front") : i18nText("BI-Basic_Behind")); } - if(BI.isNotNull(obj.workDay) && BI.parseInt(obj.workDay) !== 0) { - value += Math.abs(obj.workDay) + BI.i18nText("BI-Basic_Work_Day") + (obj.workDay < 0 ? BI.i18nText("BI-Basic_Front") : BI.i18nText("BI-Basic_Behind")); + endText = getPositionText(i18nText("BI-Basic_Week"), obj.position); + } + if (isNotNull(obj.day)) { + if (parseInt(obj.day) !== 0) { + value += Math.abs(obj.day) + i18nText("BI-Basic_Day") + (obj.day < 0 ? i18nText("BI-Basic_Front") : i18nText("BI-Basic_Behind")); } - return value + endText; + endText = size(obj) === 1 ? getPositionText(i18nText("BI-Basic_Month"), obj.position) : ""; + } + if (isNotNull(obj.workDay) && parseInt(obj.workDay) !== 0) { + value += Math.abs(obj.workDay) + i18nText("BI-Basic_Work_Day") + (obj.workDay < 0 ? i18nText("BI-Basic_Front") : i18nText("BI-Basic_Behind")); + } + + return value + endText; - function getPositionText (baseText, position) { - switch (position) { - case BI.DynamicDateCard.OFFSET.BEGIN: - return baseText + BI.i18nText("BI-Basic_Begin_Start"); - case BI.DynamicDateCard.OFFSET.END: - return baseText + BI.i18nText("BI-Basic_End_Stop"); - case BI.DynamicDateCard.OFFSET.CURRENT: - default: - return BI.i18nText("BI-Basic_Current_Day"); - } + function getPositionText (baseText, position) { + switch (position) { + case DynamicDateCard.OFFSET.BEGIN: + return baseText + i18nText("BI-Basic_Begin_Start"); + case DynamicDateCard.OFFSET.END: + return baseText + i18nText("BI-Basic_End_Stop"); + case DynamicDateCard.OFFSET.CURRENT: + default: + return i18nText("BI-Basic_Current_Day"); } - }, + } + }, - getCalculationByDate: function (date, obj) { - if (BI.isNotNull(obj.year)) { - date = BI.getDate((date.getFullYear() + BI.parseInt(obj.year)), date.getMonth(), date.getDate()); - } - if (BI.isNotNull(obj.quarter)) { - date = BI.getOffsetQuarter(date, BI.parseInt(obj.quarter)); - } - if (BI.isNotNull(obj.month)) { - date = BI.getOffsetMonth(date, BI.parseInt(obj.month)); - } - if (BI.isNotNull(obj.week)) { - date = BI.getOffsetDate(date, BI.parseInt(obj.week) * 7); - } - if (BI.isNotNull(obj.day)) { - date = BI.getOffsetDate(date, BI.parseInt(obj.day)); - } - if (BI.isNotNull(obj.workDay)) { - // 配置了节假日就按照节假日计算工作日偏移，否则按正常的天去算 - if(BI.isNotNull(BI.holidays)) { - var count = Math.abs(obj.workDay); - for (var i = 0; i < count; i++) { - date = BI.getOffsetDate(date, obj.workDay < 0 ? -1 : 1); - if(BI.isNotNull(BI.holidays[BI.print(date, "%Y-%X-%d")])) { - i--; - } + getCalculationByDate (date, obj) { + if (isNotNull(obj.year)) { + date = getDate((date.getFullYear() + parseInt(obj.year)), date.getMonth(), date.getDate()); + } + if (isNotNull(obj.quarter)) { + date = getOffsetQuarter(date, parseInt(obj.quarter)); + } + if (isNotNull(obj.month)) { + date = getOffsetMonth(date, parseInt(obj.month)); + } + if (isNotNull(obj.week)) { + date = getOffsetDate(date, parseInt(obj.week) * 7); + } + if (isNotNull(obj.day)) { + date = getOffsetDate(date, parseInt(obj.day)); + } + if (isNotNull(obj.workDay)) { + // 配置了节假日就按照节假日计算工作日偏移，否则按正常的天去算 + if (isNotNull(BI.holidays)) { + const count = Math.abs(obj.workDay); + for (let i = 0; i < count; i++) { + date = getOffsetDate(date, obj.workDay < 0 ? -1 : 1); + if (isNotNull(BI.holidays[print(date, "%Y-%X-%d")])) { + i--; } - } else { - date = BI.getOffsetDate(date, BI.parseInt(obj.workDay)); } + } else { + date = getOffsetDate(date, parseInt(obj.workDay)); } - if (BI.isNotNull(obj.position) && obj.position !== BI.DynamicDateCard.OFFSET.CURRENT) { - date = this.getBeginDate(date, obj); - } + } + if (isNotNull(obj.position) && obj.position !== DynamicDateCard.OFFSET.CURRENT) { + date = this.getBeginDate(date, obj); + } - return BI.getDate(date.getFullYear(), date.getMonth(), date.getDate()); - }, + return getDate(date.getFullYear(), date.getMonth(), date.getDate()); + }, - getBeginDate: function (date, obj) { - if (BI.isNotNull(obj.day)) { - return obj.position === BI.DynamicDateCard.OFFSET.BEGIN ? BI.getDate(date.getFullYear(), date.getMonth(), 1) : BI.getDate(date.getFullYear(), date.getMonth(), (BI.getLastDateOfMonth(date)).getDate()); - } - if (BI.isNotNull(obj.week)) { - return obj.position === BI.DynamicDateCard.OFFSET.BEGIN ? BI.getWeekStartDate(date) : BI.getWeekEndDate(date); - } - if (BI.isNotNull(obj.month)) { - return obj.position === BI.DynamicDateCard.OFFSET.BEGIN ? BI.getDate(date.getFullYear(), date.getMonth(), 1) : BI.getDate(date.getFullYear(), date.getMonth(), (BI.getLastDateOfMonth(date)).getDate()); - } - if (BI.isNotNull(obj.quarter)) { - return obj.position === BI.DynamicDateCard.OFFSET.BEGIN ? BI.getQuarterStartDate(date) : BI.getQuarterEndDate(date); - } - if (BI.isNotNull(obj.year)) { - return obj.position === BI.DynamicDateCard.OFFSET.BEGIN ? BI.getDate(date.getFullYear(), 0, 1) : BI.getDate(date.getFullYear(), 11, 31); - } - return date; + getBeginDate (date, obj) { + if (isNotNull(obj.day)) { + return obj.position === DynamicDateCard.OFFSET.BEGIN ? getDate(date.getFullYear(), date.getMonth(), 1) : getDate(date.getFullYear(), date.getMonth(), (getLastDateOfMonth(date)).getDate()); + } + if (isNotNull(obj.week)) { + return obj.position === DynamicDateCard.OFFSET.BEGIN ? getWeekStartDate(date) : getWeekEndDate(date); + } + if (isNotNull(obj.month)) { + return obj.position === DynamicDateCard.OFFSET.BEGIN ? getDate(date.getFullYear(), date.getMonth(), 1) : getDate(date.getFullYear(), date.getMonth(), (getLastDateOfMonth(date)).getDate()); + } + if (isNotNull(obj.quarter)) { + return obj.position === DynamicDateCard.OFFSET.BEGIN ? getQuarterStartDate(date) : getQuarterEndDate(date); + } + if (isNotNull(obj.year)) { + return obj.position === DynamicDateCard.OFFSET.BEGIN ? getDate(date.getFullYear(), 0, 1) : getDate(date.getFullYear(), 11, 31); } - }); -})(); + + return date; + }, +}; diff --git a/src/widget/dynamicdate/dynamicdate.card.js b/src/widget/dynamicdate/dynamicdate.card.js index ad347e97d..4b0ce2649 100644 --- a/src/widget/dynamicdate/dynamicdate.card.js +++ b/src/widget/dynamicdate/dynamicdate.card.js @@ -1,89 +1,111 @@ -BI.DynamicDateCard = BI.inherit(BI.Widget, { +import { shortcut, Widget, i18nText, createItems, each, isNotNull, map, has, bind, last, extend, checkDateVoid, isNull, isNotEmptyString, parseDateTime, any } from "@/core"; +import { ButtonGroup, Bubbles } from "@/base"; +import { MultiSelectItem } from "@/case"; +import { DynamicDateHelper } from "./dynamicdate.caculate"; - props: { - baseCls: "bi-dynamic-date-card" - }, +@shortcut() +export class DynamicDateCard extends Widget { + static xtype = "bi.dynamic_date_card"; + + static TYPE = { + YEAR: 1, + QUARTER: 2, + MONTH: 3, + WEEK: 4, + DAY: 5, + WORK_DAY: 6, + }; + static OFFSET = { + CURRENT: 1, + BEGIN: 2, + END: 3, + }; - render: function () { - var self = this; - this.position = BI.DynamicDateCard.OFFSET.CURRENT; + props = { + baseCls: "bi-dynamic-date-card", + }; + + render() { + this.position = DynamicDateCard.OFFSET.CURRENT; + return { type: "bi.vertical", items: [{ el: { type: "bi.label", - text: BI.i18nText("BI-Multi_Date_Relative_Current_Time"), + text: i18nText("BI-Multi_Date_Relative_Current_Time"), textAlign: "left", - lgap: 10 + lgap: 10, }, tgap: 10, - bgap: 5 + bgap: 5, }, { type: "bi.button_group", - ref: function () { - self.checkgroup = this; + ref: _ref => { + this.checkgroup = _ref; }, - chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI, + chooseType: ButtonGroup.CHOOSE_TYPE_MULTI, lgap: 4, - value: [BI.DynamicDateCard.TYPE.YEAR], - items: BI.createItems([{ - text: BI.i18nText("BI-Basic_Year"), - value: BI.DynamicDateCard.TYPE.YEAR + value: [DynamicDateCard.TYPE.YEAR], + items: createItems([{ + text: i18nText("BI-Basic_Year"), + value: DynamicDateCard.TYPE.YEAR, }, { - text: BI.i18nText("BI-Basic_Single_Quarter"), - value: BI.DynamicDateCard.TYPE.QUARTER + text: i18nText("BI-Basic_Single_Quarter"), + value: DynamicDateCard.TYPE.QUARTER, }, { - text: BI.i18nText("BI-Basic_Month"), - value: BI.DynamicDateCard.TYPE.MONTH + text: i18nText("BI-Basic_Month"), + value: DynamicDateCard.TYPE.MONTH, }, { - text: BI.i18nText("BI-Basic_Week"), - value: BI.DynamicDateCard.TYPE.WEEK + text: i18nText("BI-Basic_Week"), + value: DynamicDateCard.TYPE.WEEK, }, { - text: BI.i18nText("BI-Basic_Day"), - value: BI.DynamicDateCard.TYPE.DAY + text: i18nText("BI-Basic_Day"), + value: DynamicDateCard.TYPE.DAY, }], { type: "bi.multi_select_item", logic: { - dynamic: true + dynamic: true, }, iconWrapperWidth: 26, }), layouts: [{ type: "bi.left", - rgap: 4 + rgap: 4, }], listeners: [{ - eventName: BI.ButtonGroup.EVENT_CHANGE, - action: function () { - var value = self.checkgroup.getValue(); - if(value.length !== 0) { - self.workDayBox.setSelected(false); + eventName: ButtonGroup.EVENT_CHANGE, + action: () => { + const value = this.checkgroup.getValue(); + if (value.length !== 0) { + this.workDayBox.setSelected(false); } - var plainValue = {}; - BI.each(self.resultPane.getAllButtons(), function (idx, button) { - var value = button.getValue(); - if(BI.isNotNull(value.dateType)) { + const plainValue = {}; + each(this.resultPane.getAllButtons(), (idx, button) => { + const value = button.getValue(); + if (isNotNull(value.dateType)) { plainValue[value.dateType] = { value: value.value, - offset: value.offset + offset: value.offset, }; } }); - self.resultPane.populate(self._getParamJson(BI.map(self.checkgroup.getValue(), function (idx, v) { - var obj = { - dateType: v + this.resultPane.populate(this._getParamJson(map(this.checkgroup.getValue(), (idx, v) => { + const obj = { + dateType: v, }; - if(BI.has(plainValue, v)) { + if (has(plainValue, v)) { obj.value = plainValue[v].value; obj.offset = plainValue[v].offset; } + return obj; }))); - self.position = BI.DynamicDateCard.OFFSET.CURRENT; - self.fireEvent("EVENT_CHANGE"); - } - }] + this.position = DynamicDateCard.OFFSET.CURRENT; + this.fireEvent("EVENT_CHANGE"); + }, + }], }, { type: "bi.vertical_adapt", lgap: 2, @@ -91,283 +113,287 @@ BI.DynamicDateCard = BI.inherit(BI.Widget, { el: { type: "bi.multi_select_item", iconWrapperWidth: 26, - ref: function () { - self.workDayBox = this; + ref: _ref => { + this.workDayBox = _ref; }, logic: { - dynamic: true + dynamic: true, }, - text: BI.i18nText("BI-Basic_Work_Day"), - value: BI.DynamicDateCard.TYPE.WORK_DAY, + text: i18nText("BI-Basic_Work_Day"), + value: DynamicDateCard.TYPE.WORK_DAY, listeners: [{ - eventName: BI.MultiSelectItem.EVENT_CHANGE, - action: function () { - if(this.isSelected()) { - self.checkgroup.setValue(); + eventName: MultiSelectItem.EVENT_CHANGE, + action: () => { + if (this.workDayBox.isSelected()) { + this.checkgroup.setValue(); } - self.resultPane.populate(this.isSelected() ? self._getParamJson([{ - dateType: BI.DynamicDateCard.TYPE.WORK_DAY + this.resultPane.populate(this.workDayBox.isSelected() ? this._getParamJson([{ + dateType: DynamicDateCard.TYPE.WORK_DAY, }]) : []); - self.position = BI.DynamicDateCard.OFFSET.CURRENT; - self.fireEvent("EVENT_CHANGE"); - } - }] - } + this.position = DynamicDateCard.OFFSET.CURRENT; + this.fireEvent("EVENT_CHANGE"); + }, + }], + }, }], - ref: function () { - self.workDay = this; - } + ref: _ref => { + this.workDay = _ref; + }, }, { type: "bi.button_group", items: this._getParamJson([{ - dateType: BI.DynamicDateCard.TYPE.YEAR + dateType: DynamicDateCard.TYPE.YEAR, }]), - ref: function () { - self.resultPane = this; + ref: _ref => { + this.resultPane = _ref; }, layouts: [{ type: "bi.vertical", bgap: 10, - hgap: 10 - }] - }] + hgap: 10, + }], + }], }; - }, + } - _getParamJson: function (values, positionValue) { - var self = this, o = this.options; - var items = BI.map(values, function (idx, value) { + _getParamJson(values, positionValue) { + const items = map(values, (idx, value) => { return { el: { type: "bi.dynamic_date_param_item", - validationChecker: BI.bind(self._checkDate, self), + validationChecker: bind(this._checkDate, this), dateType: value.dateType, value: value.value, offset: value.offset, listeners: [{ eventName: "EVENT_CHANGE", - action: function () { - self.fireEvent("EVENT_CHANGE"); - } + action: () => { + this.fireEvent("EVENT_CHANGE"); + }, }, { eventName: "EVENT_INPUT_CHANGE", - action: function () { - BI.Bubbles.hide("dynamic-date-error"); - } - }] + action () { + Bubbles.hide("dynamic-date-error"); + }, + }], }, - tgap: idx === 0 ? 5 : 0 + tgap: idx === 0 ? 5 : 0, }; }); - if(values.length === 1 && values[0].dateType === BI.DynamicDateCard.TYPE.DAY) { - var comboItems = this._getText(BI.DynamicDateCard.TYPE.MONTH); - comboItems[0].text = BI.i18nText("BI-Basic_Empty"); + if (values.length === 1 && values[0].dateType === DynamicDateCard.TYPE.DAY) { + const comboItems = this._getText(DynamicDateCard.TYPE.MONTH); + comboItems[0].text = i18nText("BI-Basic_Empty"); items.push({ type: "bi.text_value_combo", height: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, items: comboItems, container: null, - value: positionValue || BI.DynamicDateCard.OFFSET.CURRENT, + value: positionValue || DynamicDateCard.OFFSET.CURRENT, + ref: _ref => { + this.textValueCombo = _ref; + }, listeners: [{ eventName: "EVENT_CHANGE", - action: function () { - self.position = this.getValue()[0]; - this.setValue(self.position); - self.fireEvent("EVENT_CHANGE"); - } - }] + action: () => { + this.position = this.textValueCombo.getValue()[0]; + this.textValueCombo.setValue(this.position); + this.fireEvent("EVENT_CHANGE"); + }, + }], }); - }else{ - if(values.length !== 0 && BI.last(values).dateType !== BI.DynamicDateCard.TYPE.DAY && BI.last(values).dateType !== BI.DynamicDateCard.TYPE.WORK_DAY) { + } else { + if (values.length !== 0 && last(values).dateType !== DynamicDateCard.TYPE.DAY && last(values).dateType !== DynamicDateCard.TYPE.WORK_DAY) { items.push({ type: "bi.text_value_combo", height: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, container: null, - items: this._getText(BI.last(values).dateType), - value: positionValue || BI.DynamicDateCard.OFFSET.CURRENT, + items: this._getText(last(values).dateType), + value: positionValue || DynamicDateCard.OFFSET.CURRENT, + ref: _ref => { + this.textValueCombo = _ref; + }, listeners: [{ eventName: "EVENT_CHANGE", - action: function () { - self.position = this.getValue()[0]; - this.setValue(self.position); - self.fireEvent("EVENT_CHANGE"); - } - }] + action: () => { + this.position = this.textValueCombo.getValue()[0]; + this.textValueCombo.setValue(this.position); + this.fireEvent("EVENT_CHANGE"); + }, + }], }); - } } return items; - }, + } - _checkDate: function (obj) { - var o = this.options; - var date = BI.DynamicDateHelper.getCalculation(BI.extend(this._getValue(), this._digestDateTypeValue(obj))); + _checkDate(obj) { + const o = this.options; + const date = DynamicDateHelper.getCalculation(extend(this._getValue(), this._digestDateTypeValue(obj))); - return !BI.checkDateVoid(date.getFullYear(), date.getMonth() + 1, date.getDate(), o.min, o.max)[0]; - }, + return !checkDateVoid(date.getFullYear(), date.getMonth() + 1, date.getDate(), o.min, o.max)[0]; + } - _getText: function (lastValue) { + _getText(lastValue) { switch (lastValue) { - case BI.DynamicDateCard.TYPE.YEAR: - return [{ - text: BI.i18nText("BI-Basic_Current_Day"), - value: BI.DynamicDateCard.OFFSET.CURRENT - }, { - text: BI.i18nText("BI-Basic_Year_Begin"), - value: BI.DynamicDateCard.OFFSET.BEGIN - }, { - text: BI.i18nText("BI-Basic_Year_End"), - value: BI.DynamicDateCard.OFFSET.END - }]; - case BI.DynamicDateCard.TYPE.QUARTER: - return [{ - text: BI.i18nText("BI-Basic_Current_Day"), - value: BI.DynamicDateCard.OFFSET.CURRENT - }, { - text: BI.i18nText("BI-Basic_Quarter_Begin"), - value: BI.DynamicDateCard.OFFSET.BEGIN - }, { - text: BI.i18nText("BI-Basic_Quarter_End"), - value: BI.DynamicDateCard.OFFSET.END - }]; - case BI.DynamicDateCard.TYPE.MONTH: - return [{ - text: BI.i18nText("BI-Basic_Current_Day"), - value: BI.DynamicDateCard.OFFSET.CURRENT - }, { - text: BI.i18nText("BI-Basic_Month_Begin"), - value: BI.DynamicDateCard.OFFSET.BEGIN - }, { - text: BI.i18nText("BI-Basic_Month_End"), - value: BI.DynamicDateCard.OFFSET.END - }]; - case BI.DynamicDateCard.TYPE.WEEK: - default: - return [{ - text: BI.i18nText("BI-Basic_Current_Day"), - value: BI.DynamicDateCard.OFFSET.CURRENT - }, { - text: BI.i18nText("BI-Basic_Week_Begin"), - value: BI.DynamicDateCard.OFFSET.BEGIN - }, { - text: BI.i18nText("BI-Basic_Week_End"), - value: BI.DynamicDateCard.OFFSET.END - }]; + case DynamicDateCard.TYPE.YEAR: + return [{ + text: i18nText("BI-Basic_Current_Day"), + value: DynamicDateCard.OFFSET.CURRENT, + }, { + text: i18nText("BI-Basic_Year_Begin"), + value: DynamicDateCard.OFFSET.BEGIN, + }, { + text: i18nText("BI-Basic_Year_End"), + value: DynamicDateCard.OFFSET.END, + }]; + case DynamicDateCard.TYPE.QUARTER: + return [{ + text: i18nText("BI-Basic_Current_Day"), + value: DynamicDateCard.OFFSET.CURRENT, + }, { + text: i18nText("BI-Basic_Quarter_Begin"), + value: DynamicDateCard.OFFSET.BEGIN, + }, { + text: i18nText("BI-Basic_Quarter_End"), + value: DynamicDateCard.OFFSET.END, + }]; + case DynamicDateCard.TYPE.MONTH: + return [{ + text: i18nText("BI-Basic_Current_Day"), + value: DynamicDateCard.OFFSET.CURRENT, + }, { + text: i18nText("BI-Basic_Month_Begin"), + value: DynamicDateCard.OFFSET.BEGIN, + }, { + text: i18nText("BI-Basic_Month_End"), + value: DynamicDateCard.OFFSET.END, + }]; + case DynamicDateCard.TYPE.WEEK: + default: + return [{ + text: i18nText("BI-Basic_Current_Day"), + value: DynamicDateCard.OFFSET.CURRENT, + }, { + text: i18nText("BI-Basic_Week_Begin"), + value: DynamicDateCard.OFFSET.BEGIN, + }, { + text: i18nText("BI-Basic_Week_End"), + value: DynamicDateCard.OFFSET.END, + }]; } - }, + } - _createValue: function (type, v) { + _createValue(type, v) { return { dateType: type, value: Math.abs(v), - offset: v > 0 ? 1 : 0 + offset: v > 0 ? 1 : 0, }; - }, + } - _digestDateTypeValue: function (value) { - var valueMap = {}; + _digestDateTypeValue(value) { + const valueMap = {}; switch (value.dateType) { - case BI.DynamicDateCard.TYPE.YEAR: - valueMap.year = (value.offset === 0 ? -value.value : +value.value); - break; - case BI.DynamicDateCard.TYPE.QUARTER: - valueMap.quarter = (value.offset === 0 ? -value.value : +value.value); - break; - case BI.DynamicDateCard.TYPE.MONTH: - valueMap.month = (value.offset === 0 ? -value.value : +value.value); - break; - case BI.DynamicDateCard.TYPE.WEEK: - valueMap.week = (value.offset === 0 ? -value.value : +value.value); - break; - case BI.DynamicDateCard.TYPE.DAY: - valueMap.day = (value.offset === 0 ? -value.value : +value.value); - break; - case BI.DynamicDateCard.TYPE.WORK_DAY: - valueMap.workDay = (value.offset === 0 ? -value.value : +value.value); - break; - default: - break; + case DynamicDateCard.TYPE.YEAR: + valueMap.year = (value.offset === 0 ? -value.value : +value.value); + break; + case DynamicDateCard.TYPE.QUARTER: + valueMap.quarter = (value.offset === 0 ? -value.value : +value.value); + break; + case DynamicDateCard.TYPE.MONTH: + valueMap.month = (value.offset === 0 ? -value.value : +value.value); + break; + case DynamicDateCard.TYPE.WEEK: + valueMap.week = (value.offset === 0 ? -value.value : +value.value); + break; + case DynamicDateCard.TYPE.DAY: + valueMap.day = (value.offset === 0 ? -value.value : +value.value); + break; + case DynamicDateCard.TYPE.WORK_DAY: + valueMap.workDay = (value.offset === 0 ? -value.value : +value.value); + break; + default: + break; } - if (BI.isNull(value.dateType)) { - valueMap.position = this.position || BI.DynamicDateCard.OFFSET.CURRENT; + if (isNull(value.dateType)) { + valueMap.position = this.position || DynamicDateCard.OFFSET.CURRENT; } + return valueMap; - }, + } - setMinDate: function(minDate) { - if (BI.isNotEmptyString(this.options.min)) { + setMinDate(minDate) { + if (isNotEmptyString(this.options.min)) { this.options.min = minDate; } - }, + } - setMaxDate: function (maxDate) { - if (BI.isNotEmptyString(this.options.max)) { + setMaxDate(maxDate) { + if (isNotEmptyString(this.options.max)) { this.options.max = maxDate; } - }, + } - setValue: function (v) { + setValue(v) { v = v || {}; - this.position = v.position || BI.DynamicDateCard.OFFSET.CURRENT; - var values = []; - var valuesItems = []; - if(BI.isNotNull(v.year)) { - values.push(BI.DynamicDateCard.TYPE.YEAR); - valuesItems.push(this._createValue(BI.DynamicDateCard.TYPE.YEAR, v.year)); + this.position = v.position || DynamicDateCard.OFFSET.CURRENT; + const values = []; + const valuesItems = []; + if (isNotNull(v.year)) { + values.push(DynamicDateCard.TYPE.YEAR); + valuesItems.push(this._createValue(DynamicDateCard.TYPE.YEAR, v.year)); } - if(BI.isNotNull(v.quarter)) { - values.push(BI.DynamicDateCard.TYPE.QUARTER); - valuesItems.push(this._createValue(BI.DynamicDateCard.TYPE.QUARTER, v.quarter)); + if (isNotNull(v.quarter)) { + values.push(DynamicDateCard.TYPE.QUARTER); + valuesItems.push(this._createValue(DynamicDateCard.TYPE.QUARTER, v.quarter)); } - if(BI.isNotNull(v.month)) { - values.push(BI.DynamicDateCard.TYPE.MONTH); - valuesItems.push(this._createValue(BI.DynamicDateCard.TYPE.MONTH, v.month)); + if (isNotNull(v.month)) { + values.push(DynamicDateCard.TYPE.MONTH); + valuesItems.push(this._createValue(DynamicDateCard.TYPE.MONTH, v.month)); } - if(BI.isNotNull(v.week)) { - values.push(BI.DynamicDateCard.TYPE.WEEK); - valuesItems.push(this._createValue(BI.DynamicDateCard.TYPE.WEEK, v.week)); + if (isNotNull(v.week)) { + values.push(DynamicDateCard.TYPE.WEEK); + valuesItems.push(this._createValue(DynamicDateCard.TYPE.WEEK, v.week)); } - if(BI.isNotNull(v.day)) { - values.push(BI.DynamicDateCard.TYPE.DAY); - valuesItems.push(this._createValue(BI.DynamicDateCard.TYPE.DAY, v.day)); + if (isNotNull(v.day)) { + values.push(DynamicDateCard.TYPE.DAY); + valuesItems.push(this._createValue(DynamicDateCard.TYPE.DAY, v.day)); } - if(BI.isNotNull(v.workDay)) { - values.push(BI.DynamicDateCard.TYPE.WORK_DAY); - valuesItems.push(this._createValue(BI.DynamicDateCard.TYPE.WORK_DAY, v.workDay)); + if (isNotNull(v.workDay)) { + values.push(DynamicDateCard.TYPE.WORK_DAY); + valuesItems.push(this._createValue(DynamicDateCard.TYPE.WORK_DAY, v.workDay)); } this.checkgroup.setValue(values); - this.workDayBox.setSelected(BI.isNotNull(v.workDay)); + this.workDayBox.setSelected(isNotNull(v.workDay)); this.resultPane.populate(this._getParamJson(valuesItems, v.position)); - }, + } - _getValue: function () { - var self = this; - var valueMap = {}; - var selectValues = this.checkgroup.getValue(); - var buttons = this.resultPane.getAllButtons(); - if(selectValues.length !== 0) { - BI.each(buttons, function (idx, button) { - var value = button.getValue(); - BI.extend(valueMap, self._digestDateTypeValue(value)); + _getValue() { + const valueMap = {}; + const selectValues = this.checkgroup.getValue(); + const buttons = this.resultPane.getAllButtons(); + if (selectValues.length !== 0) { + each(buttons, (idx, button) => { + const value = button.getValue(); + extend(valueMap, this._digestDateTypeValue(value)); }); } - if(this.workDayBox.isSelected()) { - var value = buttons[0].getValue(); + if (this.workDayBox.isSelected()) { + const value = buttons[0].getValue(); valueMap.workDay = (value.offset === 0 ? -value.value : +value.value); } return valueMap; - }, + } - _getErrorText: function () { - var o = this.options; - var start = BI.parseDateTime(o.min, "%Y-%X-%d"); - var end = BI.parseDateTime(o.max, "%Y-%X-%d"); + _getErrorText() { + const o = this.options; + const start = parseDateTime(o.min, "%Y-%X-%d"); + const end = parseDateTime(o.max, "%Y-%X-%d"); - return BI.i18nText("BI-Basic_Date_Range_Error", + return i18nText("BI-Basic_Date_Range_Error", start.getFullYear(), start.getMonth() + 1, start.getDate(), @@ -375,49 +401,28 @@ BI.DynamicDateCard = BI.inherit(BI.Widget, { end.getMonth() + 1, end.getDate() ); - }, + } - getValue: function () { + getValue() { return this.checkValidation() ? this._getValue() : {}; - }, + } - getInputValue: function () { + getInputValue() { return this._getValue(); - }, + } - checkValidation: function (show) { - var buttons = this.resultPane.getAllButtons(); - var errorText; - var invalid = BI.any(buttons, function (idx, button) { - return button.checkValidation && !button.checkValidation(); - }); + checkValidation(show) { + const buttons = this.resultPane.getAllButtons(); + let errorText; + let invalid = any(buttons, (idx, button) => button.checkValidation && !button.checkValidation()); if (invalid) { - errorText = BI.i18nText("BI-Please_Input_Natural_Number"); + errorText = i18nText("BI-Please_Input_Natural_Number"); } else { invalid = !this._checkDate(this._getValue()); errorText = this._getErrorText(); } - invalid && show && BI.Bubbles.show("dynamic-date-error", errorText, this.resultPane); + invalid && show && Bubbles.show("dynamic-date-error", errorText, this.resultPane); return !invalid; - }, - -}); -BI.shortcut("bi.dynamic_date_card", BI.DynamicDateCard); - -BI.extend(BI.DynamicDateCard, { - TYPE: { - YEAR: 1, - QUARTER: 2, - MONTH: 3, - WEEK: 4, - DAY: 5, - WORK_DAY: 6 - }, - OFFSET: { - CURRENT: 1, - BEGIN: 2, - END: 3 } - -}); \ No newline at end of file +} diff --git a/src/widget/dynamicdate/dynamicdate.combo.js b/src/widget/dynamicdate/dynamicdate.combo.js index 3219fb298..7cb7165dc 100644 --- a/src/widget/dynamicdate/dynamicdate.combo.js +++ b/src/widget/dynamicdate/dynamicdate.combo.js @@ -1,13 +1,13 @@ -BI.DynamicDateCombo = BI.inherit(BI.Single, { - constants: { - popupHeight: 259, - popupWidth: 270, - comboAdjustHeight: 1, - border: 1, - iconWidth: 24 - }, +import { shortcut, getDate, toPix, isEqual, isNotEmptyString, isEmptyString, isNotNull, isNotEmptyObject, checkDateVoid } from "@/core"; +import { Single, Combo } from "@/base"; +import { DynamicDateTrigger } from "./dynamicdate.trigger"; +import { DynamicDatePopup } from "./dynamicdate.popup"; - props: { +@shortcut() +export class DynamicDateCombo extends Single { + static xtype = "bi.dynamic_date_combo" + + props = { baseCls: "bi-dynamic-date-combo", height: 24, minDate: "1900-01-01", @@ -16,32 +16,46 @@ BI.DynamicDateCombo = BI.inherit(BI.Single, { allowEdit: true, supportDynamic: true, attributes: { - tabIndex: -1 + tabIndex: -1, }, isNeedAdjustHeight: false, - isNeedAdjustWidth: 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" + static EVENT_BEFORE_YEAR_MONTH_POPUPVIEW = "EVENT_BEFORE_YEAR_MONTH_POPUPVIEW" - _init: function () { - BI.DynamicDateCombo.superclass._init.apply(this, arguments); - }, + static Static = 1; + static Dynamic = 2; + + _init() { + super._init(...arguments); + } - render: function () { - var self = this, opts = this.options; + render() { + const opts = this.options; this.storeTriggerValue = ""; - var date = BI.getDate(); + const date = getDate(); this.storeValue = opts.value; - var border = opts.simple ? 1 : 2; + 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", + cls: `${opts.simple ? "bi-border-bottom" : "bi-border bi-border-radius"} bi-focus-shadow`, container: opts.container, - ref: function () { - self.combo = this; + ref: _ref => { + this.combo = _ref; }, toggle: false, isNeedAdjustHeight: opts.isNeedAdjustHeight, @@ -50,16 +64,16 @@ BI.DynamicDateCombo = BI.inherit(BI.Single, { el: { type: "bi.horizontal_fill", columnSize: [this.constants.iconWidth, "fill"], - height: BI.toPix(opts.height, border), + height: toPix(opts.height, border), items: [{ el: { type: "bi.icon_button", cls: "bi-trigger-icon-button date-change-h-font", - width: BI.toPix(opts.height, border), - height: BI.toPix(opts.height, border), - ref: function () { - self.changeIcon = this; - } + width: toPix(opts.height, border), + height: toPix(opts.height, border), + ref: _ref => { + this.changeIcon = _ref; + }, }, }, { type: "bi.dynamic_date_trigger", @@ -69,86 +83,86 @@ BI.DynamicDateCombo = BI.inherit(BI.Single, { format: opts.format, allowEdit: opts.allowEdit, watermark: opts.watermark, - iconWidth: BI.toPix(opts.height, border), - height: BI.toPix(opts.height, border), + iconWidth: toPix(opts.height, border), + height: toPix(opts.height, border), value: opts.value, - ref: function () { - self.trigger = this; + ref: _ref => { + this.trigger = _ref; }, listeners: [{ - eventName: BI.DynamicDateTrigger.EVENT_KEY_DOWN, - action: function () { - if (self.combo.isViewVisible()) { - self.combo.hideView(); + eventName: DynamicDateTrigger.EVENT_KEY_DOWN, + action: (...args) => { + if (this.combo.isViewVisible()) { + this.combo.hideView(); } - self.fireEvent(BI.DynamicDateCombo.EVENT_KEY_DOWN, arguments); - } + this.fireEvent(DynamicDateCombo.EVENT_KEY_DOWN, ...args); + }, }, { - eventName: BI.DynamicDateTrigger.EVENT_STOP, - action: function () { - if (!self.combo.isViewVisible()) { - self.combo.showView(); + eventName: DynamicDateTrigger.EVENT_STOP, + action: () => { + if (!this.combo.isViewVisible()) { + this.combo.showView(); } - } + }, }, { - eventName: BI.DynamicDateTrigger.EVENT_FOCUS, - action: function () { - self.storeTriggerValue = self.trigger.getKey(); - if (!self.combo.isViewVisible()) { - self.combo.showView(); + eventName: DynamicDateTrigger.EVENT_FOCUS, + action: () => { + this.storeTriggerValue = this.trigger.getKey(); + if (!this.combo.isViewVisible()) { + this.combo.showView(); } - self.fireEvent(BI.DynamicDateCombo.EVENT_FOCUS); - } + this.fireEvent(DynamicDateCombo.EVENT_FOCUS); + }, }, { - eventName: BI.DynamicDateTrigger.EVENT_BLUR, - action: function () { - self.fireEvent(BI.DynamicDateCombo.EVENT_BLUR); - } + eventName: DynamicDateTrigger.EVENT_BLUR, + action: () => { + this.fireEvent(DynamicDateCombo.EVENT_BLUR); + }, }, { - eventName: BI.DynamicDateTrigger.EVENT_ERROR, - action: function () { - self.storeValue = { - type: BI.DynamicDateCombo.Static, + eventName: DynamicDateTrigger.EVENT_ERROR, + action: () => { + this.storeValue = { + type: DynamicDateCombo.Static, value: { year: date.getFullYear(), - month: date.getMonth() + 1 - } + month: date.getMonth() + 1, + }, }; - self.combo.element.addClass("error"); - self.fireEvent(BI.DynamicDateCombo.EVENT_ERROR); - } + this.combo.element.addClass("error"); + this.fireEvent(DynamicDateCombo.EVENT_ERROR); + }, }, { - eventName: BI.DynamicDateTrigger.EVENT_VALID, - action: function () { - self.storeValue = self.trigger.getValue(); - self.combo.element.removeClass("error"); - self.fireEvent(BI.DynamicDateCombo.EVENT_VALID); - } + eventName: DynamicDateTrigger.EVENT_VALID, + action: () => { + this.storeValue = this.trigger.getValue(); + this.combo.element.removeClass("error"); + this.fireEvent(DynamicDateCombo.EVENT_VALID); + }, }, { - eventName: BI.DynamicDateTrigger.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.DynamicDateCombo.EVENT_CHANGE); - } + eventName: DynamicDateTrigger.EVENT_CHANGE, + action: () => { + this.fireEvent(DynamicDateCombo.EVENT_CHANGE); + }, }, { - eventName: BI.DynamicDateTrigger.EVENT_CONFIRM, - action: function () { - var dateStore = self.storeTriggerValue; - var dateObj = self.trigger.getKey(); - if (self.combo.isViewVisible() || BI.isEqual(dateObj, dateStore)) { + eventName: DynamicDateTrigger.EVENT_CONFIRM, + action: () => { + const dateStore = this.storeTriggerValue; + const dateObj = this.trigger.getKey(); + if (this.combo.isViewVisible() || isEqual(dateObj, dateStore)) { return; } - if (BI.isNotEmptyString(dateObj) && !BI.isEqual(dateObj, dateStore)) { - self.storeValue = self.trigger.getValue(); - self.setValue(self.trigger.getValue()); - } else if (BI.isEmptyString(dateObj)) { - self.storeValue = null; - self.trigger.setValue(); + 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(); } - self._checkDynamicValue(self.storeValue); - self.fireEvent(BI.DynamicDateCombo.EVENT_CONFIRM); - } - }] - }] + this._checkDynamicValue(this.storeValue); + this.fireEvent(DynamicDateCombo.EVENT_CONFIRM); + }, + }], + }], }, adjustLength: this.constants.comboAdjustHeight, popup: { @@ -159,54 +173,54 @@ BI.DynamicDateCombo = BI.inherit(BI.Single, { behaviors: opts.behaviors, min: opts.minDate, max: opts.maxDate, - ref: function () { - self.popup = this; + ref: _ref => { + this.popup = _ref; }, listeners: [{ - eventName: BI.DynamicDatePopup.BUTTON_CLEAR_EVENT_CHANGE, - action: function () { - self.setValue(); - self.combo.hideView(); - self.fireEvent(BI.DynamicDateCombo.EVENT_CONFIRM); - } + eventName: DynamicDatePopup.BUTTON_CLEAR_EVENT_CHANGE, + action: () => { + this.setValue(); + this.combo.hideView(); + this.fireEvent(DynamicDateCombo.EVENT_CONFIRM); + }, }, { - eventName: BI.DynamicDatePopup.BUTTON_lABEL_EVENT_CHANGE, - action: function () { - var date = BI.getDate(); - self.setValue({ - type: BI.DynamicDateCombo.Static, + eventName: DynamicDatePopup.BUTTON_lABEL_EVENT_CHANGE, + action: () => { + const date = getDate(); + this.setValue({ + type: DynamicDateCombo.Static, value: { year: date.getFullYear(), month: date.getMonth() + 1, - day: date.getDate() - } + day: date.getDate(), + }, }); - self.combo.hideView(); - self.fireEvent(BI.DynamicDateCombo.EVENT_CONFIRM); - } + this.combo.hideView(); + this.fireEvent(DynamicDateCombo.EVENT_CONFIRM); + }, }, { - eventName: BI.DynamicDatePopup.BUTTON_OK_EVENT_CHANGE, - action: function () { - var value = self.popup.getValue(); - if (self._checkValue(value)) { - self.setValue(value); + eventName: DynamicDatePopup.BUTTON_OK_EVENT_CHANGE, + action: () => { + const value = this.popup.getValue(); + if (this._checkValue(value)) { + this.setValue(value); } - self.combo.hideView(); - self.fireEvent(BI.DynamicDateCombo.EVENT_CONFIRM); - } + this.combo.hideView(); + this.fireEvent(DynamicDateCombo.EVENT_CONFIRM); + }, }, { - eventName: BI.DynamicDatePopup.EVENT_CHANGE, - action: function () { - self.setValue(self.popup.getValue()); - self.combo.hideView(); - self.fireEvent(BI.DynamicDateCombo.EVENT_CONFIRM); - } + eventName: DynamicDatePopup.EVENT_CHANGE, + action: () => { + this.setValue(this.popup.getValue()); + this.combo.hideView(); + this.fireEvent(DynamicDateCombo.EVENT_CONFIRM); + }, }, { - eventName: BI.DynamicDatePopup.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW, - action: function () { - self.fireEvent(BI.DynamicDateCombo.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW); - } - }] + eventName: DynamicDatePopup.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW, + action: () => { + this.fireEvent(DynamicDateCombo.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW); + }, + }], }, }, // // DEC-4250 和复选下拉一样，点击triggerBtn不默认收起 @@ -214,120 +228,106 @@ BI.DynamicDateCombo = BI.inherit(BI.Single, { // return self.triggerBtn.element.find(e.target).length === 0; // }, listeners: [{ - eventName: BI.Combo.EVENT_BEFORE_POPUPVIEW, - action: function () { - self.popup.setMinDate(opts.minDate); - self.popup.setMaxDate(opts.maxDate); - self.popup.setValue(self.storeValue); - self.fireEvent(BI.DynamicDateCombo.EVENT_BEFORE_POPUPVIEW); - } - }] + eventName: Combo.EVENT_BEFORE_POPUPVIEW, + action: () => { + this.popup.setMinDate(opts.minDate); + this.popup.setMaxDate(opts.maxDate); + this.popup.setValue(this.storeValue); + this.fireEvent(DynamicDateCombo.EVENT_BEFORE_POPUPVIEW); + }, + }], }, top: 0, left: 0, right: 0, - bottom: 0 - }] + bottom: 0, + }], }; - }, + } - created: function () { + created() { this._checkDynamicValue(this.storeValue); - }, + } - _checkDynamicValue: function (v) { - var o = this.options; - var type = null; - if (BI.isNotNull(v)) { + _checkDynamicValue(v) { + let type = null; + if (isNotNull(v)) { type = v.type; } switch (type) { - case BI.DynamicDateCombo.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; + case DynamicDateCombo.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: function (v) { - var o = this.options; + _checkValue(v) { + const o = this.options; + let value; switch (v.type) { - case BI.DynamicDateCombo.Dynamic: - return BI.isNotEmptyObject(v.value); - case BI.DynamicDateCombo.Static: - var value = v.value || {}; + case DynamicDateCombo.Dynamic: + return isNotEmptyObject(v.value); + case DynamicDateCombo.Static: + value = v.value || {}; - return !BI.checkDateVoid(value.year, value.month, value.day, o.minDate, o.maxDate)[0]; - default: - return true; + return !checkDateVoid(value.year, value.month, value.day, o.minDate, o.maxDate)[0]; + default: + return true; } - }, + } - _defaultState: function () { + _defaultState() { - }, + } - setMinDate: function (minDate) { - var o = this.options; + setMinDate(minDate) { + const o = this.options; o.minDate = minDate; this.trigger.setMinDate(minDate); this.popup && this.popup.setMinDate(minDate); - }, + } - setMaxDate: function (maxDate) { - var o = this.options; + setMaxDate(maxDate) { + const o = this.options; o.maxDate = maxDate; this.trigger.setMaxDate(maxDate); this.popup && this.popup.setMaxDate(maxDate); - }, + } - setValue: function (v) { + setValue(v) { this.storeValue = v; this.trigger.setValue(v); this._checkDynamicValue(v); - }, - getValue: function () { + } + + getValue() { return this.storeValue; - }, - getKey: function () { + } + + getKey() { return this.trigger.getKey(); - }, - hidePopupView: function () { + } + + hidePopupView() { this.combo.hideView(); - }, + } - focus: function () { + focus() { this.trigger.focus(); - }, + } - blur: function () { + blur() { this.trigger.blur(); - }, + } - setWaterMark: function (v) { + setWaterMark(v) { this.trigger.setWaterMark(v); } -}); - -BI.DynamicDateCombo.EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; -BI.DynamicDateCombo.EVENT_CONFIRM = "EVENT_CONFIRM"; -BI.DynamicDateCombo.EVENT_FOCUS = "EVENT_FOCUS"; -BI.DynamicDateCombo.EVENT_BLUR = "EVENT_BLUR"; -BI.DynamicDateCombo.EVENT_CHANGE = "EVENT_CHANGE"; -BI.DynamicDateCombo.EVENT_VALID = "EVENT_VALID"; -BI.DynamicDateCombo.EVENT_ERROR = "EVENT_ERROR"; -BI.DynamicDateCombo.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; -BI.DynamicDateCombo.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW = "EVENT_BEFORE_YEAR_MONTH_POPUPVIEW"; - -BI.shortcut("bi.dynamic_date_combo", BI.DynamicDateCombo); - -BI.extend(BI.DynamicDateCombo, { - Static: 1, - Dynamic: 2 -}); +} diff --git a/src/widget/dynamicdate/dynamicdate.param.item.js b/src/widget/dynamicdate/dynamicdate.param.item.js index ed8c4dea0..7a2a9691a 100644 --- a/src/widget/dynamicdate/dynamicdate.param.item.js +++ b/src/widget/dynamicdate/dynamicdate.param.item.js @@ -1,130 +1,137 @@ -BI.DynamicDateParamItem = BI.inherit(BI.Widget, { +import { shortcut, Widget, toPix, isNaturalNumber, i18nText } from "@/core"; +import { DynamicDateCard } from "./dynamicdate.card"; +import { SignEditor, TextValueCombo } from "@/case"; - props: function() { +@shortcut() +export class DynamicDateParamItem extends Widget { + static xtype = "bi.dynamic_date_param_item" + + static EVENT_CHANGE = "EVENT_CHANGE" + static EVENT_INPUT_CHANGE = "EVENT_INPUT_CHANGE" + + props() { return { baseCls: "bi-dynamic-date-param-item", - dateType: BI.DynamicDateCard.TYPE.YEAR, - validationChecker: function() { + dateType: DynamicDateCard.TYPE.YEAR, + validationChecker () { return true; }, value: 0, offset: 0, height: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, - } - }, + }; + } - render: function () { - var self = this, o = this.options; + render() { + const o = this.options; + return { type: "bi.htape", items: [{ el: { type: "bi.sign_editor", cls: "bi-border bi-focus-shadow bi-border-radius", - height: BI.toPix(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 2), - validationChecker: function (v) { - return BI.isNaturalNumber(v); + height: toPix(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 2), + validationChecker (v) { + return isNaturalNumber(v); }, value: o.value, - ref: function () { - self.editor = this; + ref: _ref => { + this.editor = _ref; }, - errorText: function () { - return BI.i18nText("BI-Please_Input_Natural_Number"); + errorText () { + return i18nText("BI-Please_Input_Natural_Number"); }, allowBlank: false, listeners: [{ - eventName: BI.SignEditor.EVENT_CONFIRM, - action: function () { - self.fireEvent(BI.DynamicDateParamItem.EVENT_CHANGE); - } + eventName: SignEditor.EVENT_CONFIRM, + action: () => { + this.fireEvent(DynamicDateParamItem.EVENT_CHANGE); + }, }, { - eventName: BI.SignEditor.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.DynamicDateParamItem.EVENT_INPUT_CHANGE); - } - }] + eventName: SignEditor.EVENT_CHANGE, + action: () => { + this.fireEvent(DynamicDateParamItem.EVENT_INPUT_CHANGE); + }, + }], }, - width: 60 + width: 60, }, { el: { type: "bi.label", height: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, - text: this._getText() + text: this._getText(), }, - width: o.dateType === BI.DynamicDateCard.TYPE.WORK_DAY ? 60 : 20 + width: o.dateType === DynamicDateCard.TYPE.WORK_DAY ? 60 : 20, }, { type: "bi.text_value_combo", height: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, items: [{ - text: BI.i18nText("BI-Basic_Front"), - value: 0 + text: i18nText("BI-Basic_Front"), + value: 0, }, { - text: BI.i18nText("BI-Basic_Behind"), - value: 1 + text: i18nText("BI-Basic_Behind"), + value: 1, }], - ref: function () { - self.offsetCombo = this; + ref: _ref => { + this.offsetCombo = _ref; }, container: null, value: o.offset, listeners: [{ eventName: BI.TextValueCombo.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.DynamicDateParamItem.EVENT_CHANGE); - } - }] - }] + action: () => { + this.fireEvent(DynamicDateParamItem.EVENT_CHANGE); + }, + }], + }], }; - }, + } - _getText: function () { - var text = ""; + _getText() { + let text = ""; switch (this.options.dateType) { - case BI.DynamicDateCard.TYPE.YEAR: - text = BI.i18nText("BI-Basic_Year"); - break; - case BI.DynamicDateCard.TYPE.QUARTER: - text = BI.i18nText("BI-Basic_Single_Quarter"); - break; - case BI.DynamicDateCard.TYPE.MONTH: - text = BI.i18nText("BI-Basic_Month"); - break; - case BI.DynamicDateCard.TYPE.WEEK: - text = BI.i18nText("BI-Basic_Week"); - break; - case BI.DynamicDateCard.TYPE.DAY: - text = BI.i18nText("BI-Basic_Day"); - break; - case BI.DynamicDateCard.TYPE.WORK_DAY: - default: - text = BI.i18nText("BI-Basic_Work_Day"); - break; + case DynamicDateCard.TYPE.YEAR: + text = i18nText("BI-Basic_Year"); + break; + case DynamicDateCard.TYPE.QUARTER: + text = i18nText("BI-Basic_Single_Quarter"); + break; + case DynamicDateCard.TYPE.MONTH: + text = i18nText("BI-Basic_Month"); + break; + case DynamicDateCard.TYPE.WEEK: + text = i18nText("BI-Basic_Week"); + break; + case DynamicDateCard.TYPE.DAY: + text = i18nText("BI-Basic_Day"); + break; + case DynamicDateCard.TYPE.WORK_DAY: + default: + text = i18nText("BI-Basic_Work_Day"); + break; } + return text; - }, + } - checkValidation: function () { - return BI.isNaturalNumber(this.editor.getValue()); - }, + checkValidation() { + return isNaturalNumber(this.editor.getValue()); + } - setValue: function (v) { + setValue(v) { v = v || {}; v.value = v.value || 0; v.offset = v.offset || 0; this.editor.setValue(v.value); this.offsetCombo.setValue(v.offset); - }, + } - getValue: function () { + getValue() { return { dateType: this.options.dateType, value: this.editor.getValue(), - offset: this.offsetCombo.getValue()[0] + offset: this.offsetCombo.getValue()[0], }; } - -}); -BI.DynamicDateParamItem.EVENT_CHANGE = "EVENT_CHANGE"; -BI.DynamicDateParamItem.EVENT_INPUT_CHANGE = "EVENT_INPUT_CHANGE"; -BI.shortcut("bi.dynamic_date_param_item", BI.DynamicDateParamItem); +} diff --git a/src/widget/dynamicdate/dynamicdate.popup.js b/src/widget/dynamicdate/dynamicdate.popup.js index 1f0967e58..f241f9597 100644 --- a/src/widget/dynamicdate/dynamicdate.popup.js +++ b/src/widget/dynamicdate/dynamicdate.popup.js @@ -1,257 +1,267 @@ -BI.DynamicDatePopup = BI.inherit(BI.Widget, { - constants: { - tabHeight: 40, - }, +import { shortcut, Widget, createWidget, i18nText, toPix, createItems, isNull, isEmptyObject, isEmptyString, getDate, checkDateVoid, print } from "@/core"; +import { DynamicDateCombo } from "./dynamicdate.combo"; +import { TextButton, Tab } from "@/base"; +import { DateCalendarPopup } from "../date/calendar"; +import { DynamicDateHelper } from "./dynamicdate.caculate"; - props: { +@shortcut() +export class DynamicDatePopup extends Widget { + static xtype = "bi.dynamic_date_popup" + + props = { baseCls: "bi-dynamic-date-popup", width: 272, supportDynamic: true, - }, + }; + + static EVENT_CHANGE = "EVENT_CHANGE" + static BUTTON_OK_EVENT_CHANGE = "BUTTON_OK_EVENT_CHANGE" + static BUTTON_lABEL_EVENT_CHANGE = "BUTTON_lABEL_EVENT_CHANGE" + static BUTTON_CLEAR_EVENT_CHANGE = "BUTTON_CLEAR_EVENT_CHANGE" + static EVENT_BEFORE_YEAR_MONTH_POPUPVIEW = "EVENT_BEFORE_YEAR_MONTH_POPUPVIEW" - _init: function () { - BI.DynamicDatePopup.superclass._init.apply(this, arguments); - var self = this, opts = this.options, c = this.constants; - this.storeValue = {type: BI.DynamicDateCombo.Static}; - BI.createWidget({ + _init() { + super._init(...arguments); + const opts = this.options; + this.storeValue = { + type: DynamicDateCombo.Static, + }; + createWidget({ element: this, type: "bi.vertical", items: [{ - el: this._getTabJson() + el: this._getTabJson(), }, { el: { type: "bi.grid", - items: [[{ - type: "bi.text_button", - cls: "bi-high-light bi-split-top", - shadow: true, - text: BI.i18nText("BI-Basic_Clear"), - textHeight: BI.toPix(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1), - listeners: [{ - eventName: BI.TextButton.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.DynamicDatePopup.BUTTON_CLEAR_EVENT_CHANGE); - } - }] - }, { - type: "bi.text_button", - cls: "bi-split-left bi-split-right bi-high-light bi-split-top", - shadow: true, - textHeight: BI.toPix(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1), - text: BI.i18nText("BI-Multi_Date_Today"), - disabled: this._checkTodayValid(), - ref: function () { - self.todayButton = this; - }, - listeners: [{ - eventName: BI.TextButton.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.DynamicDatePopup.BUTTON_lABEL_EVENT_CHANGE); - } - }] - }, { - type: "bi.text_button", - cls: "bi-high-light bi-split-top", - textHeight: BI.toPix(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1), - shadow: true, - text: BI.i18nText("BI-Basic_OK"), - listeners: [{ - eventName: BI.TextButton.EVENT_CHANGE, - action: function () { - var type = self.dateTab.getSelect(); - if (type === BI.DynamicDateCombo.Dynamic) { - self.dynamicPane.checkValidation(true) && self.fireEvent(BI.DynamicDatePopup.BUTTON_OK_EVENT_CHANGE); - } else { - self.fireEvent(BI.DynamicDatePopup.BUTTON_OK_EVENT_CHANGE); - } - } + items: [ + [{ + type: "bi.text_button", + cls: "bi-high-light bi-split-top", + shadow: true, + text: i18nText("BI-Basic_Clear"), + textHeight: toPix(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1), + listeners: [{ + eventName: TextButton.EVENT_CHANGE, + action: () => { + this.fireEvent(DynamicDatePopup.BUTTON_CLEAR_EVENT_CHANGE); + }, + }], + }, { + type: "bi.text_button", + cls: "bi-split-left bi-split-right bi-high-light bi-split-top", + shadow: true, + textHeight: toPix(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1), + text: i18nText("BI-Multi_Date_Today"), + disabled: this._checkTodayValid(), + ref: _ref => { + this.todayButton = _ref; + }, + listeners: [{ + eventName: TextButton.EVENT_CHANGE, + action: () => { + this.fireEvent(DynamicDatePopup.BUTTON_lABEL_EVENT_CHANGE); + }, + }], + }, { + type: "bi.text_button", + cls: "bi-high-light bi-split-top", + textHeight: toPix(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1), + shadow: true, + text: i18nText("BI-Basic_OK"), + listeners: [{ + eventName: TextButton.EVENT_CHANGE, + action: () => { + const type = this.dateTab.getSelect(); + if (type === DynamicDateCombo.Dynamic) { + this.dynamicPane.checkValidation(true) && this.fireEvent(DynamicDatePopup.BUTTON_OK_EVENT_CHANGE); + } else { + this.fireEvent(DynamicDatePopup.BUTTON_OK_EVENT_CHANGE); + } + }, + }], }] - }]], - height: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT + ], + height: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, }, - }] + }], }); this.setValue(opts.value); - }, + } - _getTabJson: function () { - var self = this, o = this.options; + _getTabJson() { + const o = this.options; + return { type: "bi.tab", logic: { - dynamic: true + dynamic: true, }, - ref: function () { - self.dateTab = this; + ref: _ref => { + this.dateTab = _ref; }, tab: { type: "bi.linear_segment", invisible: !o.supportDynamic, cls: "bi-split-bottom", height: this.constants.tabHeight, - items: BI.createItems([{ - text: BI.i18nText("BI-Multi_Date_YMD"), - value: BI.DynamicDateCombo.Static + items: createItems([{ + text: i18nText("BI-Multi_Date_YMD"), + value: DynamicDateCombo.Static, }, { - text: BI.i18nText("BI-Basic_Dynamic_Title"), - value: BI.DynamicDateCombo.Dynamic + text: i18nText("BI-Basic_Dynamic_Title"), + value: DynamicDateCombo.Dynamic, }], { - textAlign: "center" - }) + textAlign: "center", + }), }, - cardCreator: function (v) { + cardCreator: v => { switch (v) { - case BI.DynamicDateCombo.Dynamic: - return { - type: "bi.dynamic_date_card", - cls: "dynamic-date-pane", - listeners: [{ - eventName: "EVENT_CHANGE", - action: function () { - self._setInnerValue(self.year, v); - } - }], - min: self.options.min, - max: self.options.max, - ref: function () { - self.dynamicPane = this; - } - }; - case BI.DynamicDateCombo.Static: - default: - return { - type: "bi.date_calendar_popup", - behaviors: o.behaviors, - min: self.options.min, - max: self.options.max, - listeners: [{ - eventName: BI.DateCalendarPopup.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.DynamicDatePopup.EVENT_CHANGE); - } - }, { - eventName: BI.DateCalendarPopup.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW, - action: function () { - self.fireEvent(BI.DynamicDatePopup.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW); - } - }], - ref: function () { - self.ymd = this; - } - }; + case DynamicDateCombo.Dynamic: + return { + type: "bi.dynamic_date_card", + cls: "dynamic-date-pane", + listeners: [{ + eventName: "EVENT_CHANGE", + action: () => { + this._setInnerValue(this.year, v); + }, + }], + min: this.options.min, + max: this.options.max, + ref: _ref => { + this.dynamicPane = _ref; + }, + }; + case DynamicDateCombo.Static: + default: + return { + type: "bi.date_calendar_popup", + behaviors: o.behaviors, + min: this.options.min, + max: this.options.max, + listeners: [{ + eventName: DateCalendarPopup.EVENT_CHANGE, + action: () => { + this.fireEvent(DynamicDatePopup.EVENT_CHANGE); + }, + }, { + eventName: DateCalendarPopup.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW, + action: () => { + this.fireEvent(DynamicDatePopup.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW); + }, + }], + ref: _ref => { + this.ymd = _ref; + }, + }; } }, listeners: [{ - eventName: BI.Tab.EVENT_CHANGE, - action: function () { - var v = self.dateTab.getSelect(); + eventName: Tab.EVENT_CHANGE, + action: () => { + const v = this.dateTab.getSelect(); + let date; switch (v) { - case BI.DynamicDateCombo.Static: - var date = BI.DynamicDateHelper.getCalculation(self.dynamicPane.getValue()); - self.ymd.setValue({ - year: date.getFullYear(), - month: date.getMonth() + 1, - day: date.getDate() + case DynamicDateCombo.Static: + date = DynamicDateHelper.getCalculation(this.dynamicPane.getValue()); + this.ymd.setValue({ + year: date.getFullYear(), + month: date.getMonth() + 1, + day: date.getDate(), + }); + this._setInnerValue(); + break; + case DynamicDateCombo.Dynamic: + default: + if (this.storeValue && this.storeValue.type === DynamicDateCombo.Dynamic) { + this.dynamicPane.setValue(this.storeValue.value); + } else { + this.dynamicPane.setValue({ + year: 0, }); - self._setInnerValue(); - break; - case BI.DynamicDateCombo.Dynamic: - default: - if(self.storeValue && self.storeValue.type === BI.DynamicDateCombo.Dynamic) { - self.dynamicPane.setValue(self.storeValue.value); - }else{ - self.dynamicPane.setValue({ - year: 0 - }); - } - self._setInnerValue(); - break; + } + this._setInnerValue(); + break; } - } - }] + }, + }], }; - }, + } - _setInnerValue: function () { - if (this.dateTab.getSelect() === BI.DynamicDateCombo.Static) { - this.todayButton.setValue(BI.i18nText("BI-Multi_Date_Today")); + _setInnerValue() { + if (this.dateTab.getSelect() === DynamicDateCombo.Static) { + this.todayButton.setValue(i18nText("BI-Multi_Date_Today")); this.todayButton.setEnable(!this._checkTodayValid()); } else { - var date = BI.DynamicDateHelper.getCalculation(this.dynamicPane.getInputValue()); - date = BI.print(date, "%Y-%X-%d"); + let date = DynamicDateHelper.getCalculation(this.dynamicPane.getInputValue()); + date = print(date, "%Y-%X-%d"); this.todayButton.setValue(date); this.todayButton.setEnable(false); } - }, + } - _checkValueValid: function (value) { - return BI.isNull(value) || BI.isEmptyObject(value) || BI.isEmptyString(value); - }, + _checkValueValid(value) { + return isNull(value) || isEmptyObject(value) || isEmptyString(value); + } - _checkTodayValid: function () { - var o = this.options; - var today = BI.getDate(); - return !!BI.checkDateVoid(today.getFullYear(), today.getMonth() + 1, today.getDate(), o.min, o.max)[0]; - }, + _checkTodayValid() { + const o = this.options; + const today = getDate(); + + return !!checkDateVoid(today.getFullYear(), today.getMonth() + 1, today.getDate(), o.min, o.max)[0]; + } - setMinDate: function (minDate) { + setMinDate(minDate) { if (this.options.min !== minDate) { this.options.min = minDate; this.ymd && this.ymd.setMinDate(minDate); this.dynamicPane && this.dynamicPane.setMinDate(minDate); } - }, + } - setMaxDate: function (maxDate) { + setMaxDate(maxDate) { if (this.options.max !== maxDate) { this.options.max = maxDate; this.ymd && this.ymd.setMaxDate(maxDate); this.dynamicPane && this.dynamicPane.setMaxDate(maxDate); } - }, + } - setValue: function (v) { + setValue(v) { this.storeValue = v; - var self = this; - var type, value; v = v || {}; - type = v.type || BI.DynamicDateCombo.Static; - value = v.value || v; + const type = v.type || DynamicDateCombo.Static; + const value = v.value || v; this.dateTab.setSelect(type); switch (type) { - case BI.DynamicDateCombo.Dynamic: - this.dynamicPane.setValue(value); - self._setInnerValue(); - break; - case BI.DynamicDateCombo.Static: - default: - if (this._checkValueValid(value)) { - var date = BI.getDate(); - this.ymd.setValue({ - year: date.getFullYear(), - month: date.getMonth() + 1, - day: date.getDate() - }); - this.todayButton.setValue(BI.i18nText("BI-Multi_Date_Today")); - } else { - this.ymd.setValue(value); - this.todayButton.setValue(BI.i18nText("BI-Multi_Date_Today")); - } - this.todayButton.setEnable(!this._checkTodayValid()); - break; + case DynamicDateCombo.Dynamic: + this.dynamicPane.setValue(value); + this._setInnerValue(); + break; + case DynamicDateCombo.Static: + default: + if (this._checkValueValid(value)) { + const date = getDate(); + this.ymd.setValue({ + year: date.getFullYear(), + month: date.getMonth() + 1, + day: date.getDate(), + }); + this.todayButton.setValue(i18nText("BI-Multi_Date_Today")); + } else { + this.ymd.setValue(value); + this.todayButton.setValue(i18nText("BI-Multi_Date_Today")); + } + this.todayButton.setEnable(!this._checkTodayValid()); + break; } - }, + } - getValue: function () { + getValue() { return { type: this.dateTab.getSelect(), - value: this.dateTab.getValue() + value: this.dateTab.getValue(), }; } -}); -BI.DynamicDatePopup.EVENT_CHANGE = "EVENT_CHANGE"; -BI.DynamicDatePopup.BUTTON_OK_EVENT_CHANGE = "BUTTON_OK_EVENT_CHANGE"; -BI.DynamicDatePopup.BUTTON_lABEL_EVENT_CHANGE = "BUTTON_lABEL_EVENT_CHANGE"; -BI.DynamicDatePopup.BUTTON_CLEAR_EVENT_CHANGE = "BUTTON_CLEAR_EVENT_CHANGE"; -BI.DynamicDatePopup.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW = "EVENT_BEFORE_YEAR_MONTH_POPUPVIEW"; -BI.shortcut("bi.dynamic_date_popup", BI.DynamicDatePopup); \ No newline at end of file +} diff --git a/src/widget/dynamicdate/dynamicdate.trigger.js b/src/widget/dynamicdate/dynamicdate.trigger.js index 9ecaa3cd9..8e24b81d5 100644 --- a/src/widget/dynamicdate/dynamicdate.trigger.js +++ b/src/widget/dynamicdate/dynamicdate.trigger.js @@ -1,59 +1,84 @@ -BI.DynamicDateTrigger = BI.inherit(BI.Trigger, { - _const: { +import { shortcut, i18nText, createWidget, isKey, checkDateLegal, parseDateTime, bind, isNotNull, isNotEmptyString, isEqual, isEmptyObject, getDate, isEmptyString, isNull, each, checkDateVoid, print } from "@/core"; +import { Trigger } from "@/base"; +import { SignEditor } from "@/case"; +import { DynamicDateCombo } from "./dynamicdate.combo"; +import { DynamicDateHelper } from "./dynamicdate.caculate"; + + +@shortcut() +export class DynamicDateTrigger extends Trigger { + static xtype = "bi.dynamic_date_trigger" + + _const = { hgap: 4, vgap: 2, yearLength: 4, yearMonthLength: 6, yearFullMonthLength: 7, compareFormat: "%Y-%X-%d", - iconWidth: 24 - }, - - props: () => ({ - extraCls: "bi-date-trigger", - min: "1900-01-01", // 最小日期 - max: "2099-12-31", // 最大日期 - height: 24, iconWidth: 24, - format: "", // 显示的日期格式化方式 - allowEdit: true, // 是否允许编辑 - watermark: BI.i18nText("BI-Basic_Unrestricted"), - }), + }; + + static EVENT_BLUR = "EVENT_BLUR" + static EVENT_FOCUS = "EVENT_FOCUS" + static EVENT_START = "EVENT_START" + static EVENT_STOP = "EVENT_STOP" + static EVENT_CONFIRM = "EVENT_CONFIRM" + static EVENT_CHANGE = "EVENT_CHANGE" + static EVENT_VALID = "EVENT_VALID" + static EVENT_ERROR = "EVENT_ERROR" + static EVENT_TRIGGER_CLICK = "EVENT_TRIGGER_CLICK" + static EVENT_KEY_DOWN = "EVENT_KEY_DOWN" + + props() { + return { + extraCls: "bi-date-trigger", + min: "1900-01-01", // 最小日期 + max: "2099-12-31", // 最大日期 + height: 24, + iconWidth: 24, + format: "", // 显示的日期格式化方式 + allowEdit: true, // 是否允许编辑 + watermark: i18nText("BI-Basic_Unrestricted"), + }; + } - _init: function () { - BI.DynamicDateTrigger.superclass._init.apply(this, arguments); - var self = this, o = this.options, c = this._const; + _init() { + super._init(...arguments); + const o = this.options, + c = this._const; this.storeTriggerValue = ""; - this.editor = BI.createWidget({ + this.editor = createWidget({ type: "bi.sign_editor", simple: o.simple, height: o.height, - validationChecker: function (v) { - var formatStr = self._getStandardDateStr(v); - var date = formatStr.match(/\d+/g); - !BI.isKey(o.format) && self._autoAppend(v, date); - return self._dateCheck(formatStr) && BI.checkDateLegal(formatStr) && self._checkVoid({ + validationChecker: v => { + const formatStr = this._getStandardDateStr(v); + const date = formatStr.match(/\d+/g); + !isKey(o.format) && this._autoAppend(v, date); + + return this._dateCheck(formatStr) && checkDateLegal(formatStr) && this._checkVoid({ year: date[0] | 0, month: date[1] | 0, - day: date[2] | 0 + day: date[2] | 0, }); }, - quitChecker: function () { + quitChecker () { return false; }, hgap: c.hgap, vgap: c.vgap, allowBlank: true, watermark: o.watermark, - errorText: function (v) { - var str = ""; - if (!BI.isKey(o.format)) { - if (!self._dateCheck(v)) { - str = self.editor.isEditing() ? BI.i18nText("BI-Date_Trigger_Error_Text") : BI.i18nText("BI-Year_Trigger_Invalid_Text"); + errorText: v => { + let str = ""; + if (!isKey(o.format)) { + if (!this._dateCheck(v)) { + str = this.editor.isEditing() ? i18nText("BI-Date_Trigger_Error_Text") : i18nText("BI-Year_Trigger_Invalid_Text"); } else { - var start = BI.parseDateTime(o.min, "%Y-%X-%d"); - var end = BI.parseDateTime(o.max, "%Y-%X-%d"); - str = BI.i18nText("BI-Basic_Date_Range_Error", + const start = parseDateTime(o.min, "%Y-%X-%d"); + const end = parseDateTime(o.max, "%Y-%X-%d"); + str = i18nText("BI-Basic_Date_Range_Error", start.getFullYear(), start.getMonth() + 1, start.getDate(), @@ -66,276 +91,274 @@ BI.DynamicDateTrigger = BI.inherit(BI.Trigger, { return str; }, - title: BI.bind(this._getTitle, this) + title: bind(this._getTitle, this), }); - this.editor.on(BI.SignEditor.EVENT_KEY_DOWN, function () { - self.fireEvent(BI.DynamicDateTrigger.EVENT_KEY_DOWN, arguments); + this.editor.on(SignEditor.EVENT_KEY_DOWN, (...args) => { + this.fireEvent(DynamicDateTrigger.EVENT_KEY_DOWN, ...args); }); - this.editor.on(BI.SignEditor.EVENT_FOCUS, function () { - self.storeTriggerValue = self.getKey(); - self.fireEvent(BI.DynamicDateTrigger.EVENT_FOCUS); + this.editor.on(SignEditor.EVENT_FOCUS, () => { + this.storeTriggerValue = this.getKey(); + this.fireEvent(DynamicDateTrigger.EVENT_FOCUS); }); - this.editor.on(BI.SignEditor.EVENT_BLUR, function () { - self.fireEvent(BI.DynamicDateTrigger.EVENT_BLUR); + this.editor.on(SignEditor.EVENT_BLUR, () => { + this.fireEvent(DynamicDateTrigger.EVENT_BLUR); }); - this.editor.on(BI.SignEditor.EVENT_STOP, function () { - self.fireEvent(BI.DynamicDateTrigger.EVENT_STOP); + this.editor.on(SignEditor.EVENT_STOP, () => { + this.fireEvent(DynamicDateTrigger.EVENT_STOP); }); - this.editor.on(BI.SignEditor.EVENT_VALID, function () { - self.fireEvent(BI.DynamicDateTrigger.EVENT_VALID); + this.editor.on(SignEditor.EVENT_VALID, () => { + this.fireEvent(DynamicDateTrigger.EVENT_VALID); }); - this.editor.on(BI.SignEditor.EVENT_ERROR, function () { - self.fireEvent(BI.DynamicDateTrigger.EVENT_ERROR); + this.editor.on(SignEditor.EVENT_ERROR, () => { + this.fireEvent(DynamicDateTrigger.EVENT_ERROR); }); - this.editor.on(BI.SignEditor.EVENT_CONFIRM, function () { - var value = self.editor.getValue(); - if (BI.isNotNull(value)) { - self.editor.setState(value); + this.editor.on(SignEditor.EVENT_CONFIRM, () => { + const value = this.editor.getValue(); + if (isNotNull(value)) { + this.editor.setState(value); } - if (BI.isNotEmptyString(value) && !BI.isEqual(self.storeTriggerValue, self.getKey())) { - var formatStr = self._getStandardDateStr(value); - var date = formatStr.match(/\d+/g); - self.storeValue = { - type: BI.DynamicDateCombo.Static, + if (isNotEmptyString(value) && !isEqual(this.storeTriggerValue, this.getKey())) { + const formatStr = this._getStandardDateStr(value); + const date = formatStr.match(/\d+/g); + this.storeValue = { + type: DynamicDateCombo.Static, value: { year: date[0] | 0, month: date[1] | 0, - day: date[2] | 0 - } + day: date[2] | 0, + }, }; } - self.fireEvent(BI.DynamicDateTrigger.EVENT_CONFIRM); + this.fireEvent(DynamicDateTrigger.EVENT_CONFIRM); }); - this.editor.on(BI.SignEditor.EVENT_SPACE, function () { - if (self.editor.isValid()) { - self.editor.blur(); + this.editor.on(SignEditor.EVENT_SPACE, () => { + if (this.editor.isValid()) { + this.editor.blur(); } }); - this.editor.on(BI.SignEditor.EVENT_START, function () { - self.fireEvent(BI.DynamicDateTrigger.EVENT_START); + this.editor.on(SignEditor.EVENT_START, () => { + this.fireEvent(DynamicDateTrigger.EVENT_START); }); - this.editor.on(BI.SignEditor.EVENT_CHANGE, function () { - self.fireEvent(BI.DynamicDateTrigger.EVENT_CHANGE); + this.editor.on(SignEditor.EVENT_CHANGE, () => { + this.fireEvent(DynamicDateTrigger.EVENT_CHANGE); }); - BI.createWidget({ + createWidget({ type: "bi.htape", element: this, columnSize: ["", this._const.iconWidth], items: [{ - el: this.editor + el: this.editor, }, { el: { type: "bi.icon_button", cls: "bi-trigger-icon-button date-font", - width: this._const.iconWidth + width: this._const.iconWidth, }, - width: this._const.iconWidth - }] + width: this._const.iconWidth, + }], }); - !o.allowEdit && BI.createWidget({ + !o.allowEdit && createWidget({ type: "bi.absolute", element: this, items: [{ el: { type: "bi.text", - title: BI.bind(this._getTitle, this) + title: bind(this._getTitle, this), }, left: 0, right: o.iconWidth, top: 0, - bottom: 0 - }] + bottom: 0, + }], }); this.setValue(o.value); - }, + } - _getTitle: function () { - var storeValue = this.storeValue || {}; - if (BI.isEmptyObject(storeValue)) { + _getTitle() { + const storeValue = this.storeValue || {}; + if (isEmptyObject(storeValue)) { return this.options.watermark; } - var type = storeValue.type || BI.DynamicDateCombo.Static; - var value = storeValue.value; + const type = storeValue.type || DynamicDateCombo.Static; + const value = storeValue.value; + let text, date, dateStr; switch (type) { - case BI.DynamicDateCombo.Dynamic: - var text = this._getText(value); - var date = BI.getDate(); - date = BI.DynamicDateHelper.getCalculation(value); - var dateStr = BI.print(date, this._getFormatString()); - return BI.isEmptyString(text) ? dateStr : (text + ":" + dateStr); - case BI.DynamicDateCombo.Static: - default: - if (BI.isNull(value) || BI.isNull(value.day)) { - return ""; - } - return BI.print(BI.getDate(value.year, (value.month - 1), value.day), this._getFormatString()); + case DynamicDateCombo.Dynamic: + text = this._getText(value); + date = getDate(); + date = DynamicDateHelper.getCalculation(value); + dateStr = print(date, this._getFormatString()); + + return isEmptyString(text) ? dateStr : (`${text}:${dateStr}`); + case DynamicDateCombo.Static: + default: + if (isNull(value) || isNull(value.day)) { + return ""; + } + + return print(getDate(value.year, (value.month - 1), value.day), this._getFormatString()); } - }, + } - _getStandardDateStr: function (v) { - var c = this._const; - var result = [0, 1, 2]; - var formatArray = this._getFormatString().match(/%./g); - BI.each(formatArray, function (idx, v) { + _getStandardDateStr(v) { + const c = this._const; + let result = [0, 1, 2]; + const formatArray = this._getFormatString().match(/%./g); + each(formatArray, (idx, v) => { switch (v) { - case "%Y": - case "%y": - result[0] = idx; - break; - case "%X": - case "%x": - result[1] = idx; - break; - case "%d": - case "%e": - default: - result[2] = idx; - break; + case "%Y": + case "%y": + result[0] = idx; + break; + case "%X": + case "%x": + result[1] = idx; + break; + case "%d": + case "%e": + default: + result[2] = idx; + break; } }); // 这边不能直接用\d+去切日期, 因为format格式可能是20190607这样的没有分割符的 = = // 先看一下是否是合法的, 如果合法就变成标准格式的走原来的流程, 不合法不关心 - var date = BI.parseDateTime(v, this._getFormatString()); - if(BI.print(date, this._getFormatString()) === v) { - v = BI.print(date, c.compareFormat); + const date = parseDateTime(v, this._getFormatString()); + if (print(date, this._getFormatString()) === v) { + v = print(date, c.compareFormat); result = [0, 1, 2]; } - var dateArray = v.match(/\d+/g); - var newArray = []; - BI.each(dateArray, function (idx) { + const dateArray = v.match(/\d+/g); + const newArray = []; + each(dateArray, idx => { newArray[idx] = dateArray[result[idx]]; }); // 这边之所以不直接返回join结果是因为年的格式可能只有2位，所以需要format一下 - if(newArray.length === result.length && newArray[0].length === 2) { - return BI.print(BI.parseDateTime(newArray.join("-"), c.compareFormat), c.compareFormat); + if (newArray.length === result.length && newArray[0].length === 2) { + return print(parseDateTime(newArray.join("-"), c.compareFormat), c.compareFormat); } + // 这边format成-20-也没关系, 反正都是不合法的 return newArray.join("-"); - }, + } - _getFormatString: function () { + _getFormatString() { return this.options.format || this._const.compareFormat; - }, + } + + _dateCheck(date) { + return print(parseDateTime(date, "%Y-%x-%d"), "%Y-%x-%d") === date || + print(parseDateTime(date, "%Y-%X-%d"), "%Y-%X-%d") === date || + print(parseDateTime(date, "%Y-%x-%e"), "%Y-%x-%e") === date || + print(parseDateTime(date, "%Y-%X-%e"), "%Y-%X-%e") === date; + } - _dateCheck: function (date) { - return BI.print(BI.parseDateTime(date, "%Y-%x-%d"), "%Y-%x-%d") === date || - BI.print(BI.parseDateTime(date, "%Y-%X-%d"), "%Y-%X-%d") === date || - BI.print(BI.parseDateTime(date, "%Y-%x-%e"), "%Y-%x-%e") === date || - BI.print(BI.parseDateTime(date, "%Y-%X-%e"), "%Y-%X-%e") === date; - }, - _checkVoid: function (obj) { - return !BI.checkDateVoid(obj.year, obj.month, obj.day, this.options.min, this.options.max)[0]; - }, - _autoAppend: function (v, dateObj) { - if (BI.isNotNull(dateObj) && BI.checkDateLegal(v)) { + _checkVoid(obj) { + return !checkDateVoid(obj.year, obj.month, obj.day, this.options.min, this.options.max)[0]; + } + + _autoAppend(v, dateObj) { + const splitMonth = v.split("-")[1]; + if (isNotNull(dateObj) && checkDateLegal(v)) { switch (v.length) { - case this._const.yearLength: - if (this._yearCheck(v)) { - this.editor.setValue(v + "-"); - } - break; - case this._const.yearMonthLength: - case this._const.yearFullMonthLength: - var splitMonth = v.split("-")[1]; - if ((BI.isNotNull(splitMonth) && splitMonth.length === 2) || this._monthCheck(v)) { - this.editor.setValue(v + "-"); - } - break; + case this._const.yearLength: + if (this._yearCheck(v)) { + this.editor.setValue(`${v}-`); + } + break; + case this._const.yearMonthLength: + case this._const.yearFullMonthLength: + if ((isNotNull(splitMonth) && splitMonth.length === 2) || this._monthCheck(v)) { + this.editor.setValue(`${v}-`); + } + break; + default: } } - }, + } - _yearCheck: function (v) { - var date = BI.print(BI.parseDateTime(v, this._getFormatString()), this._const.compareFormat); - return BI.print(BI.parseDateTime(v, "%Y"), "%Y") === v && date >= this.options.min && date <= this.options.max; - }, + _yearCheck(v) { + const date = print(parseDateTime(v, this._getFormatString()), this._const.compareFormat); + + return print(parseDateTime(v, "%Y"), "%Y") === v && date >= this.options.min && date <= this.options.max; + } - _monthCheck: function (v) { - var date = BI.parseDateTime(v, this._getFormatString()); - var dateStr = BI.print(date, this._const.compareFormat); - return (date.getMonth() >= 0 && (BI.print(BI.parseDateTime(v, "%Y-%X"), "%Y-%X") === v || - BI.print(BI.parseDateTime(v, "%Y-%x"), "%Y-%x") === v)) && dateStr >= this.options.min && dateStr <= this.options.max; - }, + _monthCheck(v) { + const date = parseDateTime(v, this._getFormatString()); + const dateStr = print(date, this._const.compareFormat); + + return (date.getMonth() >= 0 && (print(parseDateTime(v, "%Y-%X"), "%Y-%X") === v || + print(parseDateTime(v, "%Y-%x"), "%Y-%x") === v)) && dateStr >= this.options.min && dateStr <= this.options.max; + } - _setInnerValue: function (date) { - var dateStr = BI.print(date, this._getFormatString()); + _setInnerValue(date) { + const dateStr = print(date, this._getFormatString()); this.editor.setState(dateStr); this.editor.setValue(dateStr); - }, + } - _getText: function (obj) { - return BI.DynamicDateHelper.getDescription(obj); - }, + _getText(obj) { + return DynamicDateHelper.getDescription(obj); + } - setValue: function (v) { - var type, value, self = this; - var date = BI.getDate(); + setValue(v) { + let type, value; + let date = getDate(); this.storeValue = v; - if (BI.isNotNull(v)) { - type = v.type || BI.DynamicDateCombo.Static; + if (isNotNull(v)) { + type = v.type || DynamicDateCombo.Static; value = v.value || v; } + const text = this._getText(value); switch (type) { - case BI.DynamicDateCombo.Dynamic: - var text = this._getText(value); - date = BI.DynamicDateHelper.getCalculation(value); - this._setInnerValue(date, text); - break; - case BI.DynamicDateCombo.Static: - default: - if (BI.isNull(value) || BI.isNull(value.day)) { - this.editor.setState(""); - this.editor.setValue(""); - } else { - var dateStr = BI.print(BI.getDate(value.year, (value.month - 1), value.day), this._getFormatString()); - this.editor.setState(dateStr); - this.editor.setValue(dateStr); - } - break; + case DynamicDateCombo.Dynamic: + date = DynamicDateHelper.getCalculation(value); + this._setInnerValue(date, text); + break; + case DynamicDateCombo.Static: + default: + if (isNull(value) || isNull(value.day)) { + this.editor.setState(""); + this.editor.setValue(""); + } else { + const dateStr = print(getDate(value.year, (value.month - 1), value.day), this._getFormatString()); + this.editor.setState(dateStr); + this.editor.setValue(dateStr); + } + break; } - }, + } - setMinDate: function (minDate) { - if (BI.isNotEmptyString(this.options.min)) { + setMinDate(minDate) { + if (isNotEmptyString(this.options.min)) { this.options.min = minDate; } - }, + } - setMaxDate: function (maxDate) { - if (BI.isNotEmptyString(this.options.max)) { + setMaxDate(maxDate) { + if (isNotEmptyString(this.options.max)) { this.options.max = maxDate; } - }, + } - getKey: function () { + getKey() { return this.editor.getValue(); - }, - getValue: function () { + } + + getValue() { return this.storeValue; - }, + } - focus: function () { + focus() { this.editor.focus(); - }, + } - blur: function () { + blur() { this.editor.blur(); - }, + } - setWaterMark: function (v) { + setWaterMark(v) { this.editor.setWaterMark(v); } -}); - -BI.DynamicDateTrigger.EVENT_BLUR = "EVENT_BLUR"; -BI.DynamicDateTrigger.EVENT_FOCUS = "EVENT_FOCUS"; -BI.DynamicDateTrigger.EVENT_START = "EVENT_START"; -BI.DynamicDateTrigger.EVENT_STOP = "EVENT_STOP"; -BI.DynamicDateTrigger.EVENT_CONFIRM = "EVENT_CONFIRM"; -BI.DynamicDateTrigger.EVENT_CHANGE = "EVENT_CHANGE"; -BI.DynamicDateTrigger.EVENT_VALID = "EVENT_VALID"; -BI.DynamicDateTrigger.EVENT_ERROR = "EVENT_ERROR"; -BI.DynamicDateTrigger.EVENT_TRIGGER_CLICK = "EVENT_TRIGGER_CLICK"; -BI.DynamicDateTrigger.EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; -BI.shortcut("bi.dynamic_date_trigger", BI.DynamicDateTrigger); +} diff --git a/src/widget/dynamicdate/index.js b/src/widget/dynamicdate/index.js new file mode 100644 index 000000000..5e3f3bf89 --- /dev/null +++ b/src/widget/dynamicdate/index.js @@ -0,0 +1,6 @@ +export { DynamicDateHelper } from "./dynamicdate.caculate"; +export { DynamicDateCard } from "./dynamicdate.card"; +export { DynamicDateCombo } from "./dynamicdate.combo"; +export { DynamicDateParamItem } from "./dynamicdate.param.item"; +export { DynamicDatePopup } from "./dynamicdate.popup"; +export { DynamicDateTrigger } from "./dynamicdate.trigger"; diff --git a/src/widget/dynamicdatetime/dynamicdatetime.combo.js b/src/widget/dynamicdatetime/dynamicdatetime.combo.js index 54a445415..2e41c32a6 100644 --- a/src/widget/dynamicdatetime/dynamicdatetime.combo.js +++ b/src/widget/dynamicdatetime/dynamicdatetime.combo.js @@ -1,13 +1,17 @@ -BI.DynamicDateTimeCombo = BI.inherit(BI.Single, { - constants: { - popupHeight: 259, - popupWidth: 270, - comboAdjustHeight: 1, - border: 1, - iconWidth: 24 - }, +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"; - props: { +@shortcut() +export class DynamicDateTimeCombo extends Single { + static xtype = "bi.dynamic_date_time_combo" + + static Static = 1 + static Dynamic = 2 + + props = { baseCls: "bi-dynamic-date--time-combo", height: 24, minDate: "1900-01-01", @@ -16,33 +20,44 @@ BI.DynamicDateTimeCombo = BI.inherit(BI.Single, { allowEdit: true, supportDynamic: true, attributes: { - tabIndex: -1 + tabIndex: -1, }, isNeedAdjustHeight: false, - isNeedAdjustWidth: false - }, + isNeedAdjustWidth: false, + }; - _init: function () { - BI.DynamicDateTimeCombo.superclass._init.apply(this, arguments); - }, + 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" - render: function () { - var self = this, opts = this.options; + + _init() { + super._init(...arguments); + } + + render() { + const opts = this.options; this.storeTriggerValue = ""; - var date = BI.getDate(); + const date = getDate(); this.storeValue = opts.value; - var border = opts.simple ? 1 : 2; + 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", + cls: `${opts.simple ? "bi-border-bottom" : "bi-border bi-border-radius"} bi-focus-shadow`, destroyWhenHide: true, container: opts.container, - ref: function () { - self.combo = this; + ref: _ref => { + this.combo = _ref; }, toggle: false, isNeedAdjustHeight: opts.isNeedAdjustHeight, @@ -50,16 +65,16 @@ BI.DynamicDateTimeCombo = BI.inherit(BI.Single, { el: { type: "bi.horizontal_fill", columnSize: [this.constants.iconWidth, "fill"], - height: BI.toPix(opts.height, border), + 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: BI.toPix(opts.height, border), - ref: function () { - self.changeIcon = this; - } + height: toPix(opts.height, border), + ref: _ref => { + this.changeIcon = _ref; + }, }, }, { type: "bi.dynamic_date_time_trigger", @@ -70,90 +85,90 @@ BI.DynamicDateTimeCombo = BI.inherit(BI.Single, { watermark: opts.watermark, format: opts.format, iconWidth: this.constants.iconWidth, - height: BI.toPix(opts.height, border), + height: toPix(opts.height, border), value: opts.value, - ref: function () { - self.trigger = this; + ref: _ref => { + this.trigger = _ref; }, listeners: [{ - eventName: BI.DynamicDateTimeTrigger.EVENT_KEY_DOWN, - action: function () { - if (self.combo.isViewVisible()) { - self.combo.hideView(); + eventName: DynamicDateTimeTrigger.EVENT_KEY_DOWN, + action: (...args) => { + if (this.combo.isViewVisible()) { + this.combo.hideView(); } - self.fireEvent(BI.DynamicDateTimeCombo.EVENT_KEY_DOWN, arguments); - } + this.fireEvent(DynamicDateTimeCombo.EVENT_KEY_DOWN, ...args); + }, }, { - eventName: BI.DynamicDateTimeTrigger.EVENT_STOP, - action: function () { - if (!self.combo.isViewVisible()) { - self.combo.showView(); + eventName: DynamicDateTimeTrigger.EVENT_STOP, + action: () => { + if (!this.combo.isViewVisible()) { + this.combo.showView(); } - } + }, }, { - eventName: BI.DynamicDateTimeTrigger.EVENT_TRIGGER_CLICK, - action: function () { - self.combo.toggle(); - } + eventName: DynamicDateTimeTrigger.EVENT_TRIGGER_CLICK, + action: () => { + this.combo.toggle(); + }, }, { - eventName: BI.DynamicDateTimeTrigger.EVENT_FOCUS, - action: function () { - self.storeTriggerValue = self.trigger.getKey(); - if (!self.combo.isViewVisible()) { - self.combo.showView(); + eventName: DynamicDateTimeTrigger.EVENT_FOCUS, + action: () => { + this.storeTriggerValue = this.trigger.getKey(); + if (!this.combo.isViewVisible()) { + this.combo.showView(); } - self.fireEvent(BI.DynamicDateTimeCombo.EVENT_FOCUS); - } + this.fireEvent(DynamicDateTimeCombo.EVENT_FOCUS); + }, }, { - eventName: BI.DynamicDateTimeTrigger.EVENT_BLUR, - action: function () { - self.fireEvent(BI.DynamicDateTimeCombo.EVENT_BLUR); - } + eventName: DynamicDateTimeTrigger.EVENT_BLUR, + action: () => { + this.fireEvent(DynamicDateTimeCombo.EVENT_BLUR); + }, }, { - eventName: BI.DynamicDateTimeTrigger.EVENT_ERROR, - action: function () { - self.storeValue = { - type: BI.DynamicDateTimeCombo.Static, + eventName: DynamicDateTimeTrigger.EVENT_ERROR, + action: () => { + this.storeValue = { + type: DynamicDateTimeCombo.Static, value: { year: date.getFullYear(), - month: date.getMonth() + 1 - } + month: date.getMonth() + 1, + }, }; - self.combo.element.addClass("error"); - self.fireEvent(BI.DynamicDateTimeCombo.EVENT_ERROR); - } + this.combo.element.addClass("error"); + this.fireEvent(DynamicDateTimeCombo.EVENT_ERROR); + }, }, { - eventName: BI.DynamicDateTimeTrigger.EVENT_VALID, - action: function () { - self.storeValue = self.trigger.getValue(); - self.combo.element.removeClass("error"); - self.fireEvent(BI.DynamicDateTimeCombo.EVENT_VALID); - } + eventName: DynamicDateTimeTrigger.EVENT_VALID, + action: () => { + this.storeValue = this.trigger.getValue(); + this.combo.element.removeClass("error"); + this.fireEvent(DynamicDateTimeCombo.EVENT_VALID); + }, }, { - eventName: BI.DynamicDateTimeTrigger.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.DynamicDateTimeCombo.EVENT_CHANGE); - } + eventName: DynamicDateTimeTrigger.EVENT_CHANGE, + action: () => { + this.fireEvent(DynamicDateTimeCombo.EVENT_CHANGE); + }, }, { - eventName: BI.DynamicDateTimeTrigger.EVENT_CONFIRM, - action: function () { - var dateStore = self.storeTriggerValue; - var dateObj = self.trigger.getKey(); - if (self.combo.isViewVisible() || BI.isEqual(dateObj, dateStore)) { + eventName: DynamicDateTimeTrigger.EVENT_CONFIRM, + action: () => { + const dateStore = this.storeTriggerValue; + const dateObj = this.trigger.getKey(); + if (this.combo.isViewVisible() || isEqual(dateObj, dateStore)) { return; } - if (BI.isNotEmptyString(dateObj) && !BI.isEqual(dateObj, dateStore)) { - self.storeValue = self.trigger.getValue(); - self.setValue(self.trigger.getValue()); - } else if (BI.isEmptyString(dateObj)) { - self.storeValue = null; - self.trigger.setValue(); + 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(); } - self._checkDynamicValue(self.storeValue); - self.fireEvent(BI.DynamicDateTimeCombo.EVENT_CONFIRM); - } - }] - }] + this._checkDynamicValue(this.storeValue); + this.fireEvent(DynamicDateTimeCombo.EVENT_CONFIRM); + }, + }], + }], }, adjustLength: this.constants.comboAdjustHeight, popup: { @@ -164,67 +179,67 @@ BI.DynamicDateTimeCombo = BI.inherit(BI.Single, { behaviors: opts.behaviors, min: opts.minDate, max: opts.maxDate, - ref: function () { - self.popup = this; + ref: _ref => { + this.popup = _ref; }, listeners: [{ - eventName: BI.DynamicDateTimePopup.BUTTON_CLEAR_EVENT_CHANGE, - action: function () { - self.setValue(); - self.combo.hideView(); - self.fireEvent(BI.DynamicDateTimeCombo.EVENT_CONFIRM); - } + eventName: DynamicDateTimePopup.BUTTON_CLEAR_EVENT_CHANGE, + action: () => { + this.setValue(); + this.combo.hideView(); + this.fireEvent(DynamicDateTimeCombo.EVENT_CONFIRM); + }, }, { - eventName: BI.DynamicDateTimePopup.BUTTON_lABEL_EVENT_CHANGE, - action: function () { - var date = BI.getDate(); - self.setValue({ - type: BI.DynamicDateTimeCombo.Static, + 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 - } + second: 0, + }, }); - self.combo.hideView(); - self.fireEvent(BI.DynamicDateTimeCombo.EVENT_CONFIRM); - } + this.combo.hideView(); + this.fireEvent(DynamicDateTimeCombo.EVENT_CONFIRM); + }, }, { - eventName: BI.DynamicDateTimePopup.BUTTON_OK_EVENT_CHANGE, - action: function () { - var value = self.popup.getValue(); - if (self._checkValue(value)) { - self.setValue(value); + eventName: DynamicDateTimePopup.BUTTON_OK_EVENT_CHANGE, + action: () => { + const value = this.popup.getValue(); + if (this._checkValue(value)) { + this.setValue(value); } - self.combo.hideView(); - self.fireEvent(BI.DynamicDateTimeCombo.EVENT_CONFIRM); - } + this.combo.hideView(); + this.fireEvent(DynamicDateTimeCombo.EVENT_CONFIRM); + }, }, { - eventName: BI.DynamicDateTimePopup.EVENT_CHANGE, - action: function () { - self.setValue(self.popup.getValue()); - self.combo.hideView(); - self.fireEvent(BI.DynamicDateTimeCombo.EVENT_CONFIRM); - } + eventName: DynamicDateTimePopup.EVENT_CHANGE, + action: () => { + this.setValue(this.popup.getValue()); + this.combo.hideView(); + this.fireEvent(DynamicDateTimeCombo.EVENT_CONFIRM); + }, }, { - eventName: BI.DynamicDateTimePopup.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW, - action: function () { - self.fireEvent(BI.DynamicDateTimeCombo.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW); - } - }] + eventName: DynamicDateTimePopup.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW, + action: () => { + this.fireEvent(DynamicDateTimeCombo.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW); + }, + }], }, }, listeners: [{ - eventName: BI.Combo.EVENT_BEFORE_POPUPVIEW, - action: function () { - self.popup.setMinDate(opts.minDate); - self.popup.setMaxDate(opts.maxDate); - self.popup.setValue(self.storeValue); - self.fireEvent(BI.DynamicDateTimeCombo.EVENT_BEFORE_POPUPVIEW); - } + 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) { @@ -234,108 +249,92 @@ BI.DynamicDateTimeCombo = BI.inherit(BI.Single, { top: 0, left: 0, right: 0, - bottom: 0 - }] + bottom: 0, + }], }; - }, + } - created: function () { + created() { this._checkDynamicValue(this.storeValue); - }, + } - _checkDynamicValue: function (v) { - var o = this.options; - var type = null; - if (BI.isNotNull(v)) { + _checkDynamicValue(v) { + let type = null; + if (isNotNull(v)) { type = v.type; } switch (type) { - case BI.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; + 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: function (v) { - var o = this.options; + _checkValue(v) { + const o = this.options; + const value = v.value || {}; switch (v.type) { - case BI.DynamicDateCombo.Dynamic: - return BI.isNotEmptyObject(v.value); - case BI.DynamicDateCombo.Static: - var value = v.value || {}; - - return !BI.checkDateVoid(value.year, value.month, value.day, o.minDate, o.maxDate)[0]; - default: - return true; + 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: function (minDate) { - var o = this.options; + setMinDate(minDate) { + const o = this.options; o.minDate = minDate; this.trigger.setMinDate(minDate); this.popup && this.popup.setMinDate(minDate); - }, + } - setMaxDate: function (maxDate) { - var o = this.options; + setMaxDate(maxDate) { + const o = this.options; o.maxDate = maxDate; this.trigger.setMaxDate(maxDate); this.popup && this.popup.setMaxDate(maxDate); - }, + } - setValue: function (v) { + setValue(v) { this.storeValue = v; this.trigger.setValue(v); this._checkDynamicValue(v); - }, - getValue: function () { + } + + getValue() { return this.storeValue; - }, - getKey: function () { + } + + getKey() { return this.trigger.getKey(); - }, - hidePopupView: function () { + } + + hidePopupView() { this.combo.hideView(); - }, + } - isValid: function () { + isValid() { return this.trigger.isValid(); - }, + } - focus: function () { + focus() { this.trigger.focus(); - }, + } - blur: function () { + blur() { this.trigger.blur(); - }, + } - setWaterMark: function (v) { + setWaterMark(v) { this.trigger.setWaterMark(v); } -}); - -BI.DynamicDateTimeCombo.EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; -BI.DynamicDateTimeCombo.EVENT_CONFIRM = "EVENT_CONFIRM"; -BI.DynamicDateTimeCombo.EVENT_FOCUS = "EVENT_FOCUS"; -BI.DynamicDateTimeCombo.EVENT_BLUR = "EVENT_BLUR"; -BI.DynamicDateTimeCombo.EVENT_CHANGE = "EVENT_CHANGE"; -BI.DynamicDateTimeCombo.EVENT_VALID = "EVENT_VALID"; -BI.DynamicDateTimeCombo.EVENT_ERROR = "EVENT_ERROR"; -BI.DynamicDateTimeCombo.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; -BI.DynamicDateTimeCombo.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW = "EVENT_BEFORE_YEAR_MONTH_POPUPVIEW"; - -BI.shortcut("bi.dynamic_date_time_combo", BI.DynamicDateTimeCombo); - -BI.extend(BI.DynamicDateTimeCombo, { - Static: 1, - Dynamic: 2 -}); +} diff --git a/src/widget/dynamicdatetime/dynamicdatetime.popup.js b/src/widget/dynamicdatetime/dynamicdatetime.popup.js index e7858ba35..7f8bb6982 100644 --- a/src/widget/dynamicdatetime/dynamicdatetime.popup.js +++ b/src/widget/dynamicdatetime/dynamicdatetime.popup.js @@ -1,271 +1,280 @@ -BI.DynamicDateTimePopup = BI.inherit(BI.Widget, { - constants: { - tabHeight: 40, - buttonHeight: 24 - }, +import { shortcut, Widget, createWidget, toPix, i18nText, createItems, print, isNull, isEmptyObject, isEmptyString, getDate, checkDateVoid, extend } from "@/core"; +import { DynamicDateCombo, DynamicDateHelper } from "../dynamicdate"; +import { TextButton, Tab } from "@/base"; +import { DateCalendarPopup } from "../date/calendar"; +import { DynamicDateTimeCombo } from "./dynamicdatetime.combo"; - props: { +@shortcut() +export class DynamicDateTimePopup extends Widget { + static xtype = "bi.dynamic_date_time_popup" + + props = { baseCls: "bi-dynamic-date-time-popup", width: 272, supportDynamic: true, - }, + }; + + static EVENT_CHANGE = "EVENT_CHANGE" + static BUTTON_OK_EVENT_CHANGE = "BUTTON_OK_EVENT_CHANGE" + static BUTTON_lABEL_EVENT_CHANGE = "BUTTON_lABEL_EVENT_CHANGE" + static BUTTON_CLEAR_EVENT_CHANGE = "BUTTON_CLEAR_EVENT_CHANGE" + static EVENT_BEFORE_YEAR_MONTH_POPUPVIEW = "EVENT_BEFORE_YEAR_MONTH_POPUPVIEW" - _init: function () { - BI.DynamicDateTimePopup.superclass._init.apply(this, arguments); - var self = this, opts = this.options, c = this.constants; - this.storeValue = {type: BI.DynamicDateCombo.Static}; - BI.createWidget({ + _init() { + super._init(...arguments); + const opts = this.options; + this.storeValue = { + type: DynamicDateCombo.Static, + }; + createWidget({ element: this, type: "bi.vertical", items: [{ - el: this._getTabJson() + el: this._getTabJson(), }, { el: { type: "bi.grid", - items: [[{ - type: "bi.text_button", - cls: "bi-high-light bi-split-top", - textHeight: BI.toPix(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1), - shadow: true, - text: BI.i18nText("BI-Basic_Clear"), - listeners: [{ - eventName: BI.TextButton.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.DynamicDateTimePopup.BUTTON_CLEAR_EVENT_CHANGE); - } - }] - }, { - type: "bi.text_button", - cls: "bi-split-left bi-split-right bi-high-light bi-split-top", - textHeight: BI.toPix(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1), - shadow: true, - text: BI.i18nText("BI-Multi_Date_Today"), - disabled: this._checkTodayValid(), - ref: function () { - self.todayButton = this; - }, - listeners: [{ - eventName: BI.TextButton.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.DynamicDateTimePopup.BUTTON_lABEL_EVENT_CHANGE); - } - }] - }, { - type: "bi.text_button", - cls: "bi-high-light bi-split-top", - textHeight: BI.toPix(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1), - shadow: true, - text: BI.i18nText("BI-Basic_OK"), - listeners: [{ - eventName: BI.TextButton.EVENT_CHANGE, - action: function () { - var type = self.dateTab.getSelect(); - if (type === BI.DynamicDateCombo.Dynamic) { - self.dynamicPane.checkValidation(true) && self.fireEvent(BI.DynamicDateTimePopup.BUTTON_OK_EVENT_CHANGE); - } else { - self.fireEvent(BI.DynamicDateTimePopup.BUTTON_OK_EVENT_CHANGE) - } - } + items: [ + [{ + type: "bi.text_button", + cls: "bi-high-light bi-split-top", + textHeight: toPix(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1), + shadow: true, + text: i18nText("BI-Basic_Clear"), + listeners: [{ + eventName: TextButton.EVENT_CHANGE, + action: () => { + this.fireEvent(DynamicDateTimePopup.BUTTON_CLEAR_EVENT_CHANGE); + }, + }], + }, { + type: "bi.text_button", + cls: "bi-split-left bi-split-right bi-high-light bi-split-top", + textHeight: toPix(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1), + shadow: true, + text: i18nText("BI-Multi_Date_Today"), + disabled: this._checkTodayValid(), + ref: _ref => { + this.todayButton = _ref; + }, + listeners: [{ + eventName: TextButton.EVENT_CHANGE, + action: () => { + this.fireEvent(DynamicDateTimePopup.BUTTON_lABEL_EVENT_CHANGE); + }, + }], + }, { + type: "bi.text_button", + cls: "bi-high-light bi-split-top", + textHeight: toPix(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1), + shadow: true, + text: i18nText("BI-Basic_OK"), + listeners: [{ + eventName: TextButton.EVENT_CHANGE, + action: () => { + const type = this.dateTab.getSelect(); + if (type === DynamicDateCombo.Dynamic) { + this.dynamicPane.checkValidation(true) && this.fireEvent(DynamicDateTimePopup.BUTTON_OK_EVENT_CHANGE); + } else { + this.fireEvent(DynamicDateTimePopup.BUTTON_OK_EVENT_CHANGE); + } + }, + }], }] - }]], - height: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT - } - }] + ], + height: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, + }, + }], }); this.setValue(opts.value); - }, + } - _getTabJson: function () { - var self = this, o = this.options; + _getTabJson() { + const o = this.options; + return { type: "bi.tab", logic: { - dynamic: true + dynamic: true, }, - ref: function () { - self.dateTab = this; + ref: _ref => { + this.dateTab = _ref; }, tab: { type: "bi.linear_segment", invisible: !o.supportDynamic, cls: "bi-split-bottom", height: this.constants.tabHeight, - items: BI.createItems([{ - text: BI.i18nText("BI-Multi_Date_YMD"), - value: BI.DynamicDateCombo.Static + items: createItems([{ + text: i18nText("BI-Multi_Date_YMD"), + value: DynamicDateCombo.Static, }, { - text: BI.i18nText("BI-Basic_Dynamic_Title"), - value: BI.DynamicDateCombo.Dynamic + text: i18nText("BI-Basic_Dynamic_Title"), + value: DynamicDateCombo.Dynamic, }], { - textAlign: "center" - }) + textAlign: "center", + }), }, - cardCreator: function (v) { + cardCreator: v => { switch (v) { - case BI.DynamicDateCombo.Dynamic: - return { - type: "bi.dynamic_date_card", - cls: "dynamic-date-pane", + case DynamicDateCombo.Dynamic: + return { + type: "bi.dynamic_date_card", + cls: "dynamic-date-pane", + listeners: [{ + eventName: "EVENT_CHANGE", + action: () => { + this._setInnerValue(this.year, v); + }, + }], + ref: _ref => { + this.dynamicPane = _ref; + }, + min: this.options.min, + max: this.options.max, + }; + case DynamicDateCombo.Static: + default: + return { + type: "bi.vertical", + items: [{ + type: "bi.date_calendar_popup", + behaviors: o.behaviors, + min: this.options.min, + max: this.options.max, + ref: _ref => { + this.ymd = _ref; + }, listeners: [{ - eventName: "EVENT_CHANGE", - action: function () { - self._setInnerValue(self.year, v); - } + eventName: DateCalendarPopup.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW, + action: () => { + this.fireEvent(DynamicDateTimePopup.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW); + }, }], - ref: function () { - self.dynamicPane = this; - }, - min: self.options.min, - max: self.options.max, - }; - case BI.DynamicDateCombo.Static: - default: - return { - type: "bi.vertical", - items: [{ - type: "bi.date_calendar_popup", - behaviors: o.behaviors, - min: self.options.min, - max: self.options.max, - ref: function () { - self.ymd = this; + }, { + el: { + type: "bi.dynamic_date_time_select", + cls: "bi-split-top", + ref: _ref => { + this.timeSelect = _ref; }, - listeners: [{ - eventName: BI.DateCalendarPopup.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW, - action: function () { - self.fireEvent(BI.DynamicDateTimePopup.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW); - } - }], - }, { - el: { - type: "bi.dynamic_date_time_select", - cls: "bi-split-top", - ref: function () { - self.timeSelect = this; - }, - height: 40 - } - }] - }; + height: 40, + }, + }], + }; } }, listeners: [{ - eventName: BI.Tab.EVENT_CHANGE, - action: function () { - var v = self.dateTab.getSelect(); + eventName: Tab.EVENT_CHANGE, + action: () => { + const v = this.dateTab.getSelect(); + const date = DynamicDateHelper.getCalculation(this.dynamicPane.getValue()); switch (v) { - case BI.DynamicDateCombo.Static: - var date = BI.DynamicDateHelper.getCalculation(self.dynamicPane.getValue()); - self.ymd.setValue({ - year: date.getFullYear(), - month: date.getMonth() + 1, - day: date.getDate() + case DynamicDateCombo.Static: + this.ymd.setValue({ + year: date.getFullYear(), + month: date.getMonth() + 1, + day: date.getDate(), + }); + this.timeSelect.setValue(); + this._setInnerValue(); + break; + case DynamicDateCombo.Dynamic: + default: + if (this.storeValue && this.storeValue.type === DynamicDateCombo.Dynamic) { + this.dynamicPane.setValue(this.storeValue.value); + } else { + this.dynamicPane.setValue({ + year: 0, }); - self.timeSelect.setValue(); - self._setInnerValue(); - break; - case BI.DynamicDateCombo.Dynamic: - default: - if(self.storeValue && self.storeValue.type === BI.DynamicDateCombo.Dynamic) { - self.dynamicPane.setValue(self.storeValue.value); - }else{ - self.dynamicPane.setValue({ - year: 0 - }); - } - self._setInnerValue(); - break; + } + this._setInnerValue(); + break; } - } - }] + }, + }], }; - }, + } - _setInnerValue: function () { - if (this.dateTab.getSelect() === BI.DynamicDateCombo.Static) { - this.todayButton.setValue(BI.i18nText("BI-Multi_Date_Today")); + _setInnerValue() { + if (this.dateTab.getSelect() === DynamicDateCombo.Static) { + this.todayButton.setValue(i18nText("BI-Multi_Date_Today")); this.todayButton.setEnable(!this._checkTodayValid()); } else { - var date = BI.DynamicDateHelper.getCalculation(this.dynamicPane.getInputValue()); - date = BI.print(date, "%Y-%X-%d"); + let date = DynamicDateHelper.getCalculation(this.dynamicPane.getInputValue()); + date = print(date, "%Y-%X-%d"); this.todayButton.setValue(date); this.todayButton.setEnable(false); } - }, + } - _checkValueValid: function (value) { - return BI.isNull(value) || BI.isEmptyObject(value) || BI.isEmptyString(value); - }, + _checkValueValid(value) { + return isNull(value) || isEmptyObject(value) || isEmptyString(value); + } - _checkTodayValid: function () { - var o = this.options; - var today = BI.getDate(); - return !!BI.checkDateVoid(today.getFullYear(), today.getMonth() + 1, today.getDate(), o.min, o.max)[0]; - }, + _checkTodayValid() { + const o = this.options; + const today = getDate(); + + return !!checkDateVoid(today.getFullYear(), today.getMonth() + 1, today.getDate(), o.min, o.max)[0]; + } - setMinDate: function (minDate) { + setMinDate(minDate) { if (this.options.min !== minDate) { this.options.min = minDate; this.ymd.setMinDate(minDate); } - }, + } - setMaxDate: function (maxDate) { + setMaxDate(maxDate) { if (this.options.max !== maxDate) { this.options.max = maxDate; this.ymd.setMaxDate(maxDate); } - }, + } - setValue: function (v) { + setValue(v) { this.storeValue = v; - var self = this; - var type, value; v = v || {}; - type = v.type || BI.DynamicDateCombo.Static; - value = v.value || v; + const type = v.type || DynamicDateCombo.Static; + const value = v.value || v; this.dateTab.setSelect(type); switch (type) { - case BI.DynamicDateCombo.Dynamic: - this.dynamicPane.setValue(value); - self._setInnerValue(); - break; - case BI.DynamicDateCombo.Static: - default: - if (this._checkValueValid(value)) { - var date = BI.getDate(); - this.ymd.setValue({ - year: date.getFullYear(), - month: date.getMonth() + 1, - day: date.getDate() - }); - this.timeSelect.setValue(); - this.todayButton.setValue(BI.i18nText("BI-Multi_Date_Today")); - } else { - this.ymd.setValue(value); - this.timeSelect.setValue({ - hour: value.hour, - minute: value.minute, - second: value.second - }); - this.todayButton.setValue(BI.i18nText("BI-Multi_Date_Today")); - } - this.todayButton.setEnable(!this._checkTodayValid()); - break; + case DynamicDateCombo.Dynamic: + this.dynamicPane.setValue(value); + this._setInnerValue(); + break; + case DynamicDateCombo.Static: + default: + if (this._checkValueValid(value)) { + const date = getDate(); + this.ymd.setValue({ + year: date.getFullYear(), + month: date.getMonth() + 1, + day: date.getDate(), + }); + this.timeSelect.setValue(); + this.todayButton.setValue(i18nText("BI-Multi_Date_Today")); + } else { + this.ymd.setValue(value); + this.timeSelect.setValue({ + hour: value.hour, + minute: value.minute, + second: value.second, + }); + this.todayButton.setValue(i18nText("BI-Multi_Date_Today")); + } + this.todayButton.setEnable(!this._checkTodayValid()); + break; } - }, + } - getValue: function () { - var type = this.dateTab.getSelect(); + getValue() { + const type = this.dateTab.getSelect(); + return { - type: type, - value: type === BI.DynamicDateTimeCombo.Static ? BI.extend(this.ymd.getValue(), this.timeSelect.getValue()) : this.dynamicPane.getValue() + type, + value: type === DynamicDateTimeCombo.Static ? extend(this.ymd.getValue(), this.timeSelect.getValue()) : this.dynamicPane.getValue(), }; } -}); -BI.DynamicDateTimePopup.EVENT_CHANGE = "EVENT_CHANGE"; -BI.DynamicDateTimePopup.BUTTON_OK_EVENT_CHANGE = "BUTTON_OK_EVENT_CHANGE"; -BI.DynamicDateTimePopup.BUTTON_lABEL_EVENT_CHANGE = "BUTTON_lABEL_EVENT_CHANGE"; -BI.DynamicDateTimePopup.BUTTON_CLEAR_EVENT_CHANGE = "BUTTON_CLEAR_EVENT_CHANGE"; -BI.DynamicDateTimePopup.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW = "EVENT_BEFORE_YEAR_MONTH_POPUPVIEW"; -BI.shortcut("bi.dynamic_date_time_popup", BI.DynamicDateTimePopup); \ No newline at end of file +} diff --git a/src/widget/dynamicdatetime/dynamicdatetime.timeselect.js b/src/widget/dynamicdatetime/dynamicdatetime.timeselect.js index 5642cb799..00f21b78c 100644 --- a/src/widget/dynamicdatetime/dynamicdatetime.timeselect.js +++ b/src/widget/dynamicdatetime/dynamicdatetime.timeselect.js @@ -1,11 +1,21 @@ -BI.DynamicDateTimeSelect = BI.inherit(BI.Widget, { +import { shortcut, Widget, isNaturalNumber, parseInt, isNumeric, i18nText, isNull, isEmptyString } from "@/core"; +import { SignEditor } from "@/case"; - props: { - baseCls: "bi-date-time-select" - }, +@shortcut() +export class DynamicDateTimeSelect extends Widget { + static xtype = "bi.dynamic_date_time_select" - render: function () { - var self = this; + static HOUR = 1 + static MINUTE = 2 + static SECOND = 3 + + static EVENT_CONFIRM = "EVENT_CONFIRM" + + props = { + baseCls: "bi-date-time-select", + }; + + render() { return { type: "bi.center_adapt", items: [{ @@ -13,200 +23,197 @@ BI.DynamicDateTimeSelect = BI.inherit(BI.Widget, { items: [{ el: { type: "bi.number_editor", - ref: function () { - self.hour = this; + ref: _ref => { + this.hour = _ref; }, - validationChecker: function (v) { - return BI.isNaturalNumber(v) && BI.parseInt(v) < 24; + validationChecker (v) { + return isNaturalNumber(v) && parseInt(v) < 24; }, - errorText: function (v) { - if(BI.isNumeric(v)) { - return BI.i18nText("BI-Basic_Input_From_To_Number", "\"00-23\""); + errorText (v) { + if (isNumeric(v)) { + return i18nText("BI-Basic_Input_From_To_Number", "\"00-23\""); } - return BI.i18nText("BI-Numerical_Interval_Input_Data"); + + return i18nText("BI-Numerical_Interval_Input_Data"); }, listeners: [{ - eventName: BI.SignEditor.EVENT_CONFIRM, - action: function () { - var value = this.getValue(); - self._checkHour(value); - this.setValue(self._formatValueToDoubleDigit(value)); - self.fireEvent(BI.DynamicDateTimeSelect.EVENT_CONFIRM); - } + eventName: SignEditor.EVENT_CONFIRM, + action: () => { + const value = this.hour.getValue(); + this._checkHour(value); + this.hour.setValue(this._formatValueToDoubleDigit(value)); + this.fireEvent(DynamicDateTimeSelect.EVENT_CONFIRM); + }, }, { - eventName: BI.SignEditor.EVENT_CHANGE, - action: function () { - var value = self._autoSwitch(this.getValue(), BI.DynamicDateTimeSelect.HOUR); - this.setValue(value); - } + eventName: SignEditor.EVENT_CHANGE, + action: () => { + const value = this._autoSwitch(this.hour.getValue(), DynamicDateTimeSelect.HOUR); + this.hour.setValue(value); + }, }], width: 60, - height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT - } + height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, + }, }, { type: "bi.label", text: ":", - width: 20 + width: 20, }, { type: "bi.number_editor", - ref: function () { - self.minute = this; + ref: _ref => { + this.minute = _ref; }, - validationChecker: function (v) { - return BI.isNaturalNumber(v) && BI.parseInt(v) < 60; + validationChecker (v) { + return isNaturalNumber(v) && parseInt(v) < 60; }, - errorText: function (v) { - if(BI.isNumeric(v)) { - return BI.i18nText("BI-Basic_Input_From_To_Number", "\"00-59\""); + errorText (v) { + if (isNumeric(v)) { + return i18nText("BI-Basic_Input_From_To_Number", "\"00-59\""); } - return BI.i18nText("BI-Numerical_Interval_Input_Data"); + + return i18nText("BI-Numerical_Interval_Input_Data"); }, listeners: [{ - eventName: BI.SignEditor.EVENT_CONFIRM, - action: function () { - var value = this.getValue(); - self._checkMinute(value); - this.setValue(self._formatValueToDoubleDigit(value), BI.DynamicDateTimeSelect.MINUTE); - self.fireEvent(BI.DynamicDateTimeSelect.EVENT_CONFIRM); - } + eventName: SignEditor.EVENT_CONFIRM, + action: () => { + const value = this.minute.getValue(); + this._checkMinute(value); + this.minute.setValue(this._formatValueToDoubleDigit(value), DynamicDateTimeSelect.MINUTE); + this.fireEvent(DynamicDateTimeSelect.EVENT_CONFIRM); + }, }, { - eventName: BI.SignEditor.EVENT_CHANGE, - action: function () { - var value = self._autoSwitch(this.getValue(), BI.DynamicDateTimeSelect.MINUTE); - this.setValue(value); - } + eventName: SignEditor.EVENT_CHANGE, + action: () => { + const value = this._autoSwitch(this.getValue(), DynamicDateTimeSelect.MINUTE); + this.minute.setValue(value); + }, }], width: 60, - height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, }, { type: "bi.label", text: ":", - width: 20 + width: 20, }, { type: "bi.number_editor", - ref: function () { - self.second = this; + ref: _ref => { + this.second = _ref; }, - validationChecker: function (v) { - return BI.isNaturalNumber(v) && BI.parseInt(v) < 60; + validationChecker (v) { + return isNaturalNumber(v) && parseInt(v) < 60; }, - errorText: function (v) { - if(BI.isNumeric(v)) { - return BI.i18nText("BI-Basic_Input_From_To_Number", "\"00-59\""); + errorText (v) { + if (isNumeric(v)) { + return i18nText("BI-Basic_Input_From_To_Number", "\"00-59\""); } - return BI.i18nText("BI-Numerical_Interval_Input_Data"); + + return i18nText("BI-Numerical_Interval_Input_Data"); }, listeners: [{ - eventName: BI.SignEditor.EVENT_CONFIRM, - action: function () { - var value = this.getValue(); - self._checkSecond(value); - this.setValue(self._formatValueToDoubleDigit(value)); - self.fireEvent(BI.DynamicDateTimeSelect.EVENT_CONFIRM); - } + eventName: SignEditor.EVENT_CONFIRM, + action: () => { + const value = this.second.getValue(); + this._checkSecond(value); + this.second.setValue(this._formatValueToDoubleDigit(value)); + this.fireEvent(DynamicDateTimeSelect.EVENT_CONFIRM); + }, }], width: 60, - height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT - }] - }] + height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, + }], + }], }; - }, + } - _checkBorder: function (v) { + _checkBorder(v) { v = v || {}; this._checkHour(v.hour); this._checkMinute(v.minute); this._checkSecond(v.second); - }, + } - _checkHour: function (value) { - this.hour.setDownEnable(BI.parseInt(value) > 0); - this.hour.setUpEnable(BI.parseInt(value) < 23); - }, + _checkHour(value) { + this.hour.setDownEnable(parseInt(value) > 0); + this.hour.setUpEnable(parseInt(value) < 23); + } - _checkMinute: function (value) { - this.minute.setDownEnable(BI.parseInt(value) > 0); - this.minute.setUpEnable(BI.parseInt(value) < 59); - }, + _checkMinute(value) { + this.minute.setDownEnable(parseInt(value) > 0); + this.minute.setUpEnable(parseInt(value) < 59); + } - _checkSecond: function (value) { - this.second.setDownEnable(BI.parseInt(value) > 0); - this.second.setUpEnable(BI.parseInt(value) < 59); - }, + _checkSecond(value) { + this.second.setDownEnable(parseInt(value) > 0); + this.second.setUpEnable(parseInt(value) < 59); + } - _autoSwitch: function (v, type) { - var limit = 0; - var value = v + ""; + _autoSwitch(v, type) { + let limit = 0; + let value = `${v}`; switch (type) { - case BI.DynamicDateTimeSelect.HOUR: - limit = 2; - break; - case BI.DynamicDateTimeSelect.MINUTE: - limit = 5; - break; - default: - break; + case DynamicDateTimeSelect.HOUR: + limit = 2; + break; + case DynamicDateTimeSelect.MINUTE: + limit = 5; + break; + default: + break; } - if(value.length === 1 && BI.parseInt(value) > limit) { - value = "0" + value; + if (value.length === 1 && parseInt(value) > limit) { + value = `0${value}`; } if (value.length === 2) { switch (type) { - case BI.DynamicDateTimeSelect.HOUR: - this.hour.isEditing() && this.minute.focus(); - break; - case BI.DynamicDateTimeSelect.MINUTE: - this.minute.isEditing() && this.second.focus(); - break; - case BI.DynamicDateTimeSelect.SECOND: - default: - break; + case DynamicDateTimeSelect.HOUR: + this.hour.isEditing() && this.minute.focus(); + break; + case DynamicDateTimeSelect.MINUTE: + this.minute.isEditing() && this.second.focus(); + break; + case DynamicDateTimeSelect.SECOND: + default: + break; } } + return value; - }, + } - _formatValueToDoubleDigit: function (v) { - if(BI.isNull(v) || BI.isEmptyString(v)) { + _formatValueToDoubleDigit(v) { + if (isNull(v) || isEmptyString(v)) { v = 0; } - var value = BI.parseInt(v); - if(value < 10) { - value = "0" + value; + let value = parseInt(v); + if (value < 10) { + value = `0${value}`; } + return value; - }, + } - _assertValue: function (v) { + _assertValue(v) { v = v || {}; v.hour = this._formatValueToDoubleDigit(v.hour) || "00"; v.minute = this._formatValueToDoubleDigit(v.minute) || "00"; v.second = this._formatValueToDoubleDigit(v.second) || "00"; + return v; - }, + } - getValue: function () { + getValue() { return { - hour: BI.parseInt(this.hour.getValue()), - minute: BI.parseInt(this.minute.getValue()), - second: BI.parseInt(this.second.getValue()) + hour: parseInt(this.hour.getValue()), + minute: parseInt(this.minute.getValue()), + second: parseInt(this.second.getValue()), }; - }, + } - setValue: function (v) { + setValue(v) { v = this._assertValue(v); this.hour.setValue(v.hour); this.minute.setValue(v.minute); this.second.setValue(v.second); this._checkBorder(v); } - -}); -BI.DynamicDateTimeSelect.EVENT_CONFIRM = "EVENT_CONFIRM"; -BI.shortcut("bi.dynamic_date_time_select", BI.DynamicDateTimeSelect); - -BI.extend(BI.DynamicDateTimeSelect, { - HOUR: 1, - MINUTE: 2, - SECOND: 3 -}); \ No newline at end of file +} diff --git a/src/widget/dynamicdatetime/dynamicdatetime.trigger.js b/src/widget/dynamicdatetime/dynamicdatetime.trigger.js index 86a942fe7..82e6a1a83 100644 --- a/src/widget/dynamicdatetime/dynamicdatetime.trigger.js +++ b/src/widget/dynamicdatetime/dynamicdatetime.trigger.js @@ -1,59 +1,82 @@ -BI.DynamicDateTimeTrigger = BI.inherit(BI.Trigger, { - _const: { +import { shortcut, i18nText, createWidget, isKey, checkDateLegal, parseDateTime, bind, isNotNull, isNotEmptyString, isEqual, isEmptyObject, isEmptyString, isNull, getDate, each, isNumeric, checkDateVoid, parseInt, size, print } from "@/core"; +import { Trigger } from "@/base"; +import { SignEditor } from "@/case"; +import { DynamicDateCombo, DynamicDateCard, DynamicDateHelper } from "../dynamicdate"; + +@shortcut() +export class DynamicDateTimeTrigger extends Trigger { + static xtype = "bi.dynamic_date_time_trigger" + + _const = { hgap: 4, vgap: 2, yearLength: 4, yearMonthLength: 6, yearFullMonthLength: 7, compareFormat: "%Y-%X-%d %H:%M:%S", - iconWidth: 24 - }, - - props: () => ({ - extraCls: "bi-date-time-trigger", - min: "1900-01-01", // 最小日期 - max: "2099-12-31", // 最大日期 - height: 24, iconWidth: 24, - format: "", // 显示的日期格式化方式 - allowEdit: true, // 是否允许编辑 - watermark: BI.i18nText("BI-Basic_Unrestricted"), - }), + }; + + static EVENT_BLUR = "EVENT_BLUR" + static EVENT_FOCUS = "EVENT_FOCUS" + static EVENT_START = "EVENT_START" + static EVENT_STOP = "EVENT_STOP" + static EVENT_CONFIRM = "EVENT_CONFIRM" + static EVENT_CHANGE = "EVENT_CHANGE" + static EVENT_VALID = "EVENT_VALID" + static EVENT_ERROR = "EVENT_ERROR" + static EVENT_TRIGGER_CLICK = "EVENT_TRIGGER_CLICK" + static EVENT_KEY_DOWN = "EVENT_KEY_DOWN" - _init: function () { - BI.DynamicDateTimeTrigger.superclass._init.apply(this, arguments); - var self = this, o = this.options, c = this._const; + props() { + return { + extraCls: "bi-date-time-trigger", + min: "1900-01-01", // 最小日期 + max: "2099-12-31", // 最大日期 + height: 24, + iconWidth: 24, + format: "", // 显示的日期格式化方式 + allowEdit: true, // 是否允许编辑 + watermark: i18nText("BI-Basic_Unrestricted"), + }; + } + + _init() { + super._init(...arguments); + const o = this.options, + c = this._const; this.storeTriggerValue = ""; - this.editor = BI.createWidget({ + this.editor = createWidget({ type: "bi.sign_editor", simple: o.simple, height: o.height, - validationChecker: function (v) { - var formatStr = self._getStandardDateStr(v); - var date = formatStr.match(/\d+/g); - !BI.isKey(o.format) && self._autoAppend(v, date); - return self._dateCheck(formatStr) && BI.checkDateLegal(formatStr) && self._checkVoid({ + validationChecker: v => { + const formatStr = this._getStandardDateStr(v); + const date = formatStr.match(/\d+/g); + !isKey(o.format) && this._autoAppend(v, date); + + return this._dateCheck(formatStr) && checkDateLegal(formatStr) && this._checkVoid({ year: date[0] | 0, month: date[1] | 0, - day: date[2] | 0 + day: date[2] | 0, }); }, - quitChecker: function () { + quitChecker () { return false; }, hgap: c.hgap, vgap: c.vgap, allowBlank: true, watermark: o.watermark, - errorText: function (v) { - var str = ""; - if (!BI.isKey(o.format)) { - if (!self._dateCheck(v)) { - str = self.editor.isEditing() ? BI.i18nText("BI-Date_Trigger_Error_Text") : BI.i18nText("BI-Year_Trigger_Invalid_Text"); + errorText: v => { + let str = ""; + if (!isKey(o.format)) { + if (!this._dateCheck(v)) { + str = this.editor.isEditing() ? i18nText("BI-Date_Trigger_Error_Text") : i18nText("BI-Year_Trigger_Invalid_Text"); } else { - var start = BI.parseDateTime(o.min, "%Y-%X-%d"); - var end = BI.parseDateTime(o.max, "%Y-%X-%d"); - str = BI.i18nText("BI-Basic_Date_Range_Error", + const start = parseDateTime(o.min, "%Y-%X-%d"); + const end = parseDateTime(o.max, "%Y-%X-%d"); + str = i18nText("BI-Basic_Date_Range_Error", start.getFullYear(), start.getMonth() + 1, start.getDate(), @@ -66,348 +89,347 @@ BI.DynamicDateTimeTrigger = BI.inherit(BI.Trigger, { return str; }, - title: BI.bind(this._getTitle, this) + title: bind(this._getTitle, this), }); - this.editor.on(BI.SignEditor.EVENT_KEY_DOWN, function () { - self.fireEvent(BI.DynamicDateTimeTrigger.EVENT_KEY_DOWN, arguments); + this.editor.on(SignEditor.EVENT_KEY_DOWN, (...args) => { + this.fireEvent(DynamicDateTimeTrigger.EVENT_KEY_DOWN, ...args); }); - this.editor.on(BI.SignEditor.EVENT_FOCUS, function () { - self.storeTriggerValue = self.getKey(); - self.fireEvent(BI.DynamicDateTimeTrigger.EVENT_FOCUS); + this.editor.on(SignEditor.EVENT_FOCUS, () => { + this.storeTriggerValue = this.getKey(); + this.fireEvent(DynamicDateTimeTrigger.EVENT_FOCUS); }); - this.editor.on(BI.SignEditor.EVENT_BLUR, function () { - self.fireEvent(BI.DynamicDateTimeTrigger.EVENT_BLUR); + this.editor.on(SignEditor.EVENT_BLUR, () => { + this.fireEvent(DynamicDateTimeTrigger.EVENT_BLUR); }); - this.editor.on(BI.SignEditor.EVENT_STOP, function () { - self.fireEvent(BI.DynamicDateTimeTrigger.EVENT_STOP); + this.editor.on(SignEditor.EVENT_STOP, () => { + this.fireEvent(DynamicDateTimeTrigger.EVENT_STOP); }); - this.editor.on(BI.SignEditor.EVENT_VALID, function () { - self.fireEvent(BI.DynamicDateTimeTrigger.EVENT_VALID); + this.editor.on(SignEditor.EVENT_VALID, () => { + this.fireEvent(DynamicDateTimeTrigger.EVENT_VALID); }); - this.editor.on(BI.SignEditor.EVENT_ERROR, function () { - self.fireEvent(BI.DynamicDateTimeTrigger.EVENT_ERROR); + this.editor.on(SignEditor.EVENT_ERROR, () => { + this.fireEvent(DynamicDateTimeTrigger.EVENT_ERROR); }); - this.editor.on(BI.SignEditor.EVENT_CONFIRM, function () { - var value = self.editor.getValue(); - if (BI.isNotNull(value)) { - self.editor.setState(value); + this.editor.on(SignEditor.EVENT_CONFIRM, () => { + const value = this.editor.getValue(); + if (isNotNull(value)) { + this.editor.setState(value); } - if (BI.isNotEmptyString(value) && !BI.isEqual(self.storeTriggerValue, self.getKey())) { - var formatStr = self._getStandardDateStr(value); - var date = formatStr.match(/\d+/g); - self.storeValue = { - type: BI.DynamicDateCombo.Static, + if (isNotEmptyString(value) && !isEqual(this.storeTriggerValue, this.getKey())) { + const formatStr = this._getStandardDateStr(value); + const date = formatStr.match(/\d+/g); + this.storeValue = { + type: DynamicDateCombo.Static, value: { year: date[0] | 0, month: date[1] | 0, day: date[2] | 0, hour: date[3] | 0, minute: date[4] | 0, - second: date[5] | 0 - } + second: date[5] | 0, + }, }; } - self.fireEvent(BI.DynamicDateTimeTrigger.EVENT_CONFIRM); + this.fireEvent(DynamicDateTimeTrigger.EVENT_CONFIRM); }); - this.editor.on(BI.SignEditor.EVENT_START, function () { - self.fireEvent(BI.DynamicDateTimeTrigger.EVENT_START); + this.editor.on(SignEditor.EVENT_START, () => { + this.fireEvent(DynamicDateTimeTrigger.EVENT_START); }); - this.editor.on(BI.SignEditor.EVENT_CHANGE, function () { - self.fireEvent(BI.DynamicDateTimeTrigger.EVENT_CHANGE); + this.editor.on(SignEditor.EVENT_CHANGE, () => { + this.fireEvent(DynamicDateTimeTrigger.EVENT_CHANGE); }); - BI.createWidget({ + createWidget({ type: "bi.htape", element: this, columnSize: ["", this._const.iconWidth], items: [{ - el: this.editor + el: this.editor, }, { el: { type: "bi.icon_button", cls: "bi-trigger-icon-button date-font", }, - width: o.iconWidth - }] + width: o.iconWidth, + }], }); - !o.allowEdit && BI.createWidget({ + !o.allowEdit && createWidget({ type: "bi.absolute", element: this, items: [{ el: { type: "bi.text", - title: BI.bind(this._getTitle, this) + title: bind(this._getTitle, this), }, left: 0, right: o.iconWidth, top: 0, - bottom: 0 - }] + bottom: 0, + }], }); this.setValue(o.value); - }, + } - _getTitle: function () { - var o = this.options; - var storeValue = this.storeValue || {}; - if (BI.isEmptyObject(storeValue)) { + _getTitle() { + const o = this.options; + const storeValue = this.storeValue || {}; + if (isEmptyObject(storeValue)) { return o.watermark; } - var type = storeValue.type || BI.DynamicDateCombo.Static; - var value = storeValue.value; + const type = storeValue.type || DynamicDateCombo.Static; + const value = storeValue.value; + const text = this._getText(value); + const date = DynamicDateHelper.getCalculation(value); + const dateStr = print(date, this._getFormatString()); + switch (type) { - case BI.DynamicDateCombo.Dynamic: - var text = this._getText(value); - var date = BI.DynamicDateHelper.getCalculation(value); - var dateStr = BI.print(date, this._getFormatString()); - return BI.isEmptyString(text) ? dateStr : (text + ":" + dateStr); - case BI.DynamicDateCombo.Static: - default: - if (BI.isNull(value) || BI.isNull(value.day)) { - return ""; - } - return BI.print(BI.getDate(value.year, (value.month - 1), value.day, value.hour || 0, value.minute || 0, - value.second || 0), this._getFormatString()); + case DynamicDateCombo.Dynamic: + return isEmptyString(text) ? dateStr : (`${text}:${dateStr}`); + case DynamicDateCombo.Static: + default: + if (isNull(value) || isNull(value.day)) { + return ""; + } + + return print(getDate(value.year, (value.month - 1), value.day, value.hour || 0, value.minute || 0, + value.second || 0), this._getFormatString()); } - }, + } - _getStandardDateStr: function (v) { - var c = this._const; - var result = []; - var hasSecond = false; - var formatArray = this._getFormatString().match(/%./g); - BI.each(formatArray, function (idx, v) { + _getStandardDateStr(v) { + const c = this._const; + let result = []; + let hasSecond = false; + const formatArray = this._getFormatString().match(/%./g); + each(formatArray, (idx, v) => { switch (v) { - case "%Y": - case "%y": - result[0] = idx; - break; - case "%X": - case "%x": - result[1] = idx; - break; - case "%d": - case "%e": - result[2] = idx; - break; - case "%S": - hasSecond = true; - break; - default: - break; + case "%Y": + case "%y": + result[0] = idx; + break; + case "%X": + case "%x": + result[1] = idx; + break; + case "%d": + case "%e": + result[2] = idx; + break; + case "%S": + hasSecond = true; + break; + default: + break; } }); // 这边不能直接用\d+去切日期, 因为format格式可能是20190607这样的没有分割符的 = = // 先看一下是否是合法的, 如果合法就变成标准格式的走原来的流程, 不合法不关心 - var date = BI.parseDateTime(v, this._getFormatString()); - if (BI.print(date, this._getFormatString()) === v) { - v = BI.print(date, c.compareFormat); + const date = parseDateTime(v, this._getFormatString()); + if (print(date, this._getFormatString()) === v) { + v = print(date, c.compareFormat); result = [0, 1, 2]; } - var dateArray = v.match(/\d+/g) || []; - var newArray = []; + const dateArray = v.match(/\d+/g) || []; + const newArray = []; // 处理乱序的年月日 - BI.each(dateArray.slice(0, 3), function (idx) { + each(dateArray.slice(0, 3), idx => { newArray[idx] = dateArray[result[idx]]; }); // 拼接时分秒和pm - var suffixArray = dateArray.slice(3); + const suffixArray = dateArray.slice(3); // 时分秒补0 - BI.each(suffixArray, function (idx, v) { - BI.isNumeric(v) && v.length === 1 && (suffixArray[idx] = "0" + v); + each(suffixArray, (idx, v) => { + isNumeric(v) && v.length === 1 && (suffixArray[idx] = `0${v}`); }); // hh:mm if (suffixArray.length === 2 && !hasSecond) { suffixArray.push("00"); } - var suffixString = suffixArray.join(":"); - var dateString = newArray.slice(0, 3).join("-"); - if (BI.isNotEmptyString(suffixString)) { - dateString += " " + suffixString; + const suffixString = suffixArray.join(":"); + let dateString = newArray.slice(0, 3).join("-"); + if (isNotEmptyString(suffixString)) { + dateString += ` ${suffixString}`; } + return dateString; - }, + } - _getFormatString: function () { + _getFormatString() { return this.options.format || this._const.compareFormat; - }, + } + + _dateCheck(date) { + return print(parseDateTime(date, "%Y-%x-%d %H:%M:%S"), "%Y-%x-%d %H:%M:%S") === date || + print(parseDateTime(date, "%Y-%X-%d %H:%M:%S"), "%Y-%X-%d %H:%M:%S") === date || + print(parseDateTime(date, "%Y-%x-%e %H:%M:%S"), "%Y-%x-%e %H:%M:%S") === date || + print(parseDateTime(date, "%Y-%X-%e %H:%M:%S"), "%Y-%X-%e %H:%M:%S") === date || - _dateCheck: function (date) { - return BI.print(BI.parseDateTime(date, "%Y-%x-%d %H:%M:%S"), "%Y-%x-%d %H:%M:%S") === date || - BI.print(BI.parseDateTime(date, "%Y-%X-%d %H:%M:%S"), "%Y-%X-%d %H:%M:%S") === date || - BI.print(BI.parseDateTime(date, "%Y-%x-%e %H:%M:%S"), "%Y-%x-%e %H:%M:%S") === date || - BI.print(BI.parseDateTime(date, "%Y-%X-%e %H:%M:%S"), "%Y-%X-%e %H:%M:%S") === date || + print(parseDateTime(date, "%Y-%x-%d"), "%Y-%x-%d") === date || + print(parseDateTime(date, "%Y-%X-%d"), "%Y-%X-%d") === date || + print(parseDateTime(date, "%Y-%x-%e"), "%Y-%x-%e") === date || + print(parseDateTime(date, "%Y-%X-%e"), "%Y-%X-%e") === date; + } - BI.print(BI.parseDateTime(date, "%Y-%x-%d"), "%Y-%x-%d") === date || - BI.print(BI.parseDateTime(date, "%Y-%X-%d"), "%Y-%X-%d") === date || - BI.print(BI.parseDateTime(date, "%Y-%x-%e"), "%Y-%x-%e") === date || - BI.print(BI.parseDateTime(date, "%Y-%X-%e"), "%Y-%X-%e") === date; - }, - _checkVoid: function (obj) { - return !BI.checkDateVoid(obj.year, obj.month, obj.day, this.options.min, this.options.max)[0]; - }, - _autoAppend: function (v, dateObj) { - if (BI.isNotNull(dateObj) && BI.checkDateLegal(v)) { + _checkVoid(obj) { + return !checkDateVoid(obj.year, obj.month, obj.day, this.options.min, this.options.max)[0]; + } + + _autoAppend(v, dateObj) { + if (isNotNull(dateObj) && checkDateLegal(v)) { + const splitMonth = v.split("-")[1]; switch (v.length) { - case this._const.yearLength: - if (this._yearCheck(v)) { - this.editor.setValue(v + "-"); - } - break; - case this._const.yearMonthLength: - case this._const.yearFullMonthLength: - var splitMonth = v.split("-")[1]; - if ((BI.isNotNull(splitMonth) && splitMonth.length === 2) || this._monthCheck(v)) { - this.editor.setValue(v + "-"); - } - break; + case this._const.yearLength: + if (this._yearCheck(v)) { + this.editor.setValue(`${v}-`); + } + break; + case this._const.yearMonthLength: + case this._const.yearFullMonthLength: + if ((isNotNull(splitMonth) && splitMonth.length === 2) || this._monthCheck(v)) { + this.editor.setValue(`${v}-`); + } + break; + default: } } - }, + } - _yearCheck: function (v) { - var date = BI.print(BI.parseDateTime(v, "%Y-%X-%d"), "%Y-%X-%d"); - return BI.print(BI.parseDateTime(v, "%Y"), "%Y") === v && date >= this.options.min && date <= this.options.max; - }, + _yearCheck(v) { + const date = print(parseDateTime(v, "%Y-%X-%d"), "%Y-%X-%d"); + + return print(parseDateTime(v, "%Y"), "%Y") === v && date >= this.options.min && date <= this.options.max; + } - _monthCheck: function (v) { - var date = BI.parseDateTime(v, "%Y-%X-%d"); - var dateStr = BI.print(date, "%Y-%X-%d"); - return (date.getMonth() > 0 && (BI.print(BI.parseDateTime(v, "%Y-%X"), "%Y-%X") === v || - BI.print(BI.parseDateTime(v, "%Y-%x"), "%Y-%x") === v)) && dateStr >= this.options.min && dateStr <= this.options.max; - }, + _monthCheck(v) { + const date = parseDateTime(v, "%Y-%X-%d"); + const dateStr = print(date, "%Y-%X-%d"); + + return (date.getMonth() > 0 && (print(parseDateTime(v, "%Y-%X"), "%Y-%X") === v || + print(parseDateTime(v, "%Y-%x"), "%Y-%x") === v)) && dateStr >= this.options.min && dateStr <= this.options.max; + } - _setInnerValue: function (date) { - var dateStr = BI.print(date, this._getFormatString()); + _setInnerValue(date) { + const dateStr = print(date, this._getFormatString()); this.editor.setState(dateStr); this.editor.setValue(dateStr); - }, + } - _getText: function (obj) { - var value = ""; - var endText = ""; - if (BI.isNotNull(obj.year)) { - if (BI.parseInt(obj.year) !== 0) { - value += Math.abs(obj.year) + BI.i18nText("BI-Basic_Year") + (obj.year < 0 ? BI.i18nText("BI-Basic_Front") : BI.i18nText("BI-Basic_Behind")); + _getText(obj) { + let value = ""; + let endText = ""; + if (isNotNull(obj.year)) { + if (parseInt(obj.year) !== 0) { + value += Math.abs(obj.year) + i18nText("BI-Basic_Year") + (obj.year < 0 ? i18nText("BI-Basic_Front") : i18nText("BI-Basic_Behind")); } - endText = getPositionText(BI.i18nText("BI-Basic_Year"), obj.position); + endText = getPositionText(i18nText("BI-Basic_Year"), obj.position); } - if (BI.isNotNull(obj.quarter)) { - if (BI.parseInt(obj.quarter) !== 0) { - value += Math.abs(obj.quarter) + BI.i18nText("BI-Basic_Single_Quarter") + (obj.quarter < 0 ? BI.i18nText("BI-Basic_Front") : BI.i18nText("BI-Basic_Behind")); + if (isNotNull(obj.quarter)) { + if (parseInt(obj.quarter) !== 0) { + value += Math.abs(obj.quarter) + i18nText("BI-Basic_Single_Quarter") + (obj.quarter < 0 ? i18nText("BI-Basic_Front") : i18nText("BI-Basic_Behind")); } - endText = getPositionText(BI.i18nText("BI-Basic_Single_Quarter"), obj.position); + endText = getPositionText(i18nText("BI-Basic_Single_Quarter"), obj.position); } - if (BI.isNotNull(obj.month)) { - if (BI.parseInt(obj.month) !== 0) { - value += Math.abs(obj.month) + BI.i18nText("BI-Basic_Month") + (obj.month < 0 ? BI.i18nText("BI-Basic_Front") : BI.i18nText("BI-Basic_Behind")); + if (isNotNull(obj.month)) { + if (parseInt(obj.month) !== 0) { + value += Math.abs(obj.month) + i18nText("BI-Basic_Month") + (obj.month < 0 ? i18nText("BI-Basic_Front") : i18nText("BI-Basic_Behind")); } - endText = getPositionText(BI.i18nText("BI-Basic_Month"), obj.position); + endText = getPositionText(i18nText("BI-Basic_Month"), obj.position); } - if (BI.isNotNull(obj.week)) { - if (BI.parseInt(obj.week) !== 0) { - value += Math.abs(obj.week) + BI.i18nText("BI-Basic_Week") + (obj.week < 0 ? BI.i18nText("BI-Basic_Front") : BI.i18nText("BI-Basic_Behind")); + if (isNotNull(obj.week)) { + if (parseInt(obj.week) !== 0) { + value += Math.abs(obj.week) + i18nText("BI-Basic_Week") + (obj.week < 0 ? i18nText("BI-Basic_Front") : i18nText("BI-Basic_Behind")); } - endText = getPositionText(BI.i18nText("BI-Basic_Week"), obj.position); + endText = getPositionText(i18nText("BI-Basic_Week"), obj.position); } - if (BI.isNotNull(obj.day)) { - if (BI.parseInt(obj.day) !== 0) { - value += Math.abs(obj.day) + BI.i18nText("BI-Basic_Day") + (obj.day < 0 ? BI.i18nText("BI-Basic_Front") : BI.i18nText("BI-Basic_Behind")); + if (isNotNull(obj.day)) { + if (parseInt(obj.day) !== 0) { + value += Math.abs(obj.day) + i18nText("BI-Basic_Day") + (obj.day < 0 ? i18nText("BI-Basic_Front") : i18nText("BI-Basic_Behind")); } - endText = BI.size(obj) === 1 ? getPositionText(BI.i18nText("BI-Basic_Month"), obj.position) : ""; + endText = size(obj) === 1 ? getPositionText(i18nText("BI-Basic_Month"), obj.position) : ""; } - if (BI.isNotNull(obj.workDay) && BI.parseInt(obj.workDay) !== 0) { - value += Math.abs(obj.workDay) + BI.i18nText("BI-Basic_Work_Day") + (obj.workDay < 0 ? BI.i18nText("BI-Basic_Front") : BI.i18nText("BI-Basic_Behind")); + if (isNotNull(obj.workDay) && parseInt(obj.workDay) !== 0) { + value += Math.abs(obj.workDay) + i18nText("BI-Basic_Work_Day") + (obj.workDay < 0 ? i18nText("BI-Basic_Front") : i18nText("BI-Basic_Behind")); } + return value + endText; function getPositionText(baseText, position) { switch (position) { - case BI.DynamicDateCard.OFFSET.BEGIN: - return baseText + BI.i18nText("BI-Basic_Begin_Start"); - case BI.DynamicDateCard.OFFSET.END: - return baseText + BI.i18nText("BI-Basic_End_Stop"); - case BI.DynamicDateCard.OFFSET.CURRENT: - default: - return BI.i18nText("BI-Basic_Current_Day"); + case DynamicDateCard.OFFSET.BEGIN: + return baseText + i18nText("BI-Basic_Begin_Start"); + case DynamicDateCard.OFFSET.END: + return baseText + i18nText("BI-Basic_End_Stop"); + case DynamicDateCard.OFFSET.CURRENT: + default: + return i18nText("BI-Basic_Current_Day"); } } - }, + } - setMinDate: function (minDate) { - if (BI.isNotEmptyString(this.options.min)) { + setMinDate(minDate) { + if (isNotEmptyString(this.options.min)) { this.options.min = minDate; } - }, + } - setMaxDate: function (maxDate) { - if (BI.isNotEmptyString(this.options.max)) { + setMaxDate(maxDate) { + if (isNotEmptyString(this.options.max)) { this.options.max = maxDate; } - }, + } - setValue: function (v) { - var type, value, self = this; - var date = BI.getDate(); + setValue(v) { + let type, value; + let date = getDate(); this.storeValue = v; - if (BI.isNotNull(v)) { - type = v.type || BI.DynamicDateCombo.Static; + if (isNotNull(v)) { + type = v.type || DynamicDateCombo.Static; value = v.value || v; } + const text = this._getText(value); + switch (type) { - case BI.DynamicDateCombo.Dynamic: - var text = this._getText(value); - date = BI.DynamicDateHelper.getCalculation(value); - this._setInnerValue(date, text); - break; - case BI.DynamicDateCombo.Static: - default: - if (BI.isNull(value) || BI.isNull(value.day)) { - this.editor.setState(""); - this.editor.setValue(""); - } else { - var dateStr = BI.print(BI.getDate(value.year, (value.month - 1), value.day, value.hour || 0, value.minute || 0, - value.second || 0), this._getFormatString()); - this.editor.setState(dateStr); - this.editor.setValue(dateStr); - } - break; + case DynamicDateCombo.Dynamic: + date = DynamicDateHelper.getCalculation(value); + this._setInnerValue(date, text); + break; + case DynamicDateCombo.Static: + default: + if (isNull(value) || isNull(value.day)) { + this.editor.setState(""); + this.editor.setValue(""); + } else { + const dateStr = print(getDate(value.year, (value.month - 1), value.day, value.hour || 0, value.minute || 0, + value.second || 0), this._getFormatString()); + this.editor.setState(dateStr); + this.editor.setValue(dateStr); + } + break; } - }, + } - getKey: function () { + getKey() { return this.editor.getValue(); - }, - getValue: function () { + } + + getValue() { return this.storeValue; - }, + } - isValid: function () { + isValid() { return this.editor.isValid(); - }, + } - focus: function () { + focus() { this.editor.focus(); - }, + } - blur: function () { + blur() { this.editor.blur(); - }, + } - setWaterMark: function (v) { + setWaterMark(v) { this.editor.setWaterMark(v); } -}); - -BI.DynamicDateTimeTrigger.EVENT_BLUR = "EVENT_BLUR"; -BI.DynamicDateTimeTrigger.EVENT_FOCUS = "EVENT_FOCUS"; -BI.DynamicDateTimeTrigger.EVENT_START = "EVENT_START"; -BI.DynamicDateTimeTrigger.EVENT_STOP = "EVENT_STOP"; -BI.DynamicDateTimeTrigger.EVENT_CONFIRM = "EVENT_CONFIRM"; -BI.DynamicDateTimeTrigger.EVENT_CHANGE = "EVENT_CHANGE"; -BI.DynamicDateTimeTrigger.EVENT_VALID = "EVENT_VALID"; -BI.DynamicDateTimeTrigger.EVENT_ERROR = "EVENT_ERROR"; -BI.DynamicDateTimeTrigger.EVENT_TRIGGER_CLICK = "EVENT_TRIGGER_CLICK"; -BI.DynamicDateTimeTrigger.EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; -BI.shortcut("bi.dynamic_date_time_trigger", BI.DynamicDateTimeTrigger); +} diff --git a/src/widget/dynamicdatetime/index.js b/src/widget/dynamicdatetime/index.js new file mode 100644 index 000000000..2d289174f --- /dev/null +++ b/src/widget/dynamicdatetime/index.js @@ -0,0 +1,4 @@ +export { DynamicDateTimeSelect } from "./dynamicdatetime.timeselect"; +export { DynamicDateTimeCombo } from "./dynamicdatetime.combo"; +export { DynamicDateTimePopup } from "./dynamicdatetime.popup"; +export { DynamicDateTimeTrigger } from "./dynamicdatetime.trigger"; diff --git a/src/widget/index.js b/src/widget/index.js index 9e92a96ba..ce87719b2 100644 --- a/src/widget/index.js +++ b/src/widget/index.js @@ -1,12 +1,27 @@ import { Collapse } from "./collapse/collapse"; import * as calendar from "./date/calendar"; +import * as dynamicdate from "./dynamicdate"; +import * as datepane from "./datepane"; +import * as datetime from "./datetime"; +import * as datetimepane from "./datetimepane"; +import * as dynamicdatetime from "./dynamicdatetime"; Object.assign(BI, { Collapse, ...calendar, + ...dynamicdate, + ...datepane, + ...datetime, + ...datetimepane, + ...dynamicdatetime, }); export * from "./date/calendar"; +export * from "./dynamicdate"; +export * from "./datepane"; +export * from "./datetime"; +export * from "./datetimepane"; +export * from "./dynamicdatetime"; export { Collapse }; From 5b33d1e9c3ea88840e99b3964b6302d4cb447727 Mon Sep 17 00:00:00 2001 From: "Zhenfei.Li" Date: Thu, 12 Jan 2023 10:15:39 +0800 Subject: [PATCH 2/2] =?UTF-8?q?KERNEL-14092=20=20refactor:=20widget/time?= =?UTF-8?q?=E5=8F=8A=E8=A7=A3=E5=86=B3parseDateTime=E7=9A=84=E9=94=99?= =?UTF-8?q?=E8=AF=AF=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/core/2.base.js | 12 +- src/widget/index.js | 3 + src/widget/time/datetime.popup.js | 166 +++++------ src/widget/time/index.js | 3 + src/widget/time/time.combo.js | 450 +++++++++++++++--------------- src/widget/time/time.trigger.js | 349 +++++++++++------------ 6 files changed, 493 insertions(+), 490 deletions(-) create mode 100644 src/widget/time/index.js diff --git a/src/core/2.base.js b/src/core/2.base.js index 003839ec4..c5d540a06 100644 --- a/src/core/2.base.js +++ b/src/core/2.base.js @@ -1230,22 +1230,22 @@ export function parseDateTime(str, fmt) { // if (!a[i]) { // continue; // } - if (isNaN(y)) { + if (_global.isNaN(y)) { y = today.getFullYear(); } - if (isNaN(m)) { + if (_global.isNaN(m)) { m = today.getMonth(); } - if (isNaN(d)) { + if (_global.isNaN(d)) { d = today.getDate(); } - if (isNaN(hr)) { + if (_global.isNaN(hr)) { hr = today.getHours(); } - if (isNaN(min)) { + if (_global.isNaN(min)) { min = today.getMinutes(); } - if (isNaN(sec)) { + if (_global.isNaN(sec)) { sec = today.getSeconds(); } if (y !== 0) { diff --git a/src/widget/index.js b/src/widget/index.js index ce87719b2..aee31d038 100644 --- a/src/widget/index.js +++ b/src/widget/index.js @@ -5,6 +5,7 @@ import * as datepane from "./datepane"; import * as datetime from "./datetime"; import * as datetimepane from "./datetimepane"; import * as dynamicdatetime from "./dynamicdatetime"; +import * as time from "./time"; Object.assign(BI, { Collapse, @@ -14,6 +15,7 @@ Object.assign(BI, { ...datetime, ...datetimepane, ...dynamicdatetime, + ...time, }); export * from "./date/calendar"; @@ -22,6 +24,7 @@ export * from "./datepane"; export * from "./datetime"; export * from "./datetimepane"; export * from "./dynamicdatetime"; +export * from "./time"; export { Collapse }; diff --git a/src/widget/time/datetime.popup.js b/src/widget/time/datetime.popup.js index 39c5e753d..017b8c0eb 100644 --- a/src/widget/time/datetime.popup.js +++ b/src/widget/time/datetime.popup.js @@ -1,94 +1,102 @@ -!(function () { - BI.TimePopup = BI.inherit(BI.Widget, { - props: { - baseCls: "bi-date-time-popup", - height: 68 - }, - render: function () { - var self = this, o = this.options; +import { shortcut, Widget, i18nText, CenterAdaptLayout, GridLayout, isNull, isEmptyObject, isEmptyString } from "@/core"; +import { TextButton } from "@/base"; +import { DynamicDateTimeSelect } from "../dynamicdatetime"; - return { - type: "bi.vtape", - items: [{ - el: { - type: "bi.center_adapt", - cls: "bi-split-top", - items: [{ - type: "bi.dynamic_date_time_select", - value: o.value, - ref: function (_ref) { - self.timeSelect = _ref; - } - }] - }, - hgap: 10, - height: 44 - }, { - el: { - type: "bi.grid", - items: [[{ - type: "bi.text_button", +@shortcut() +export class TimePopup extends Widget { + static xtype = "bi.time_popup" + + props = { + baseCls: "bi-date-time-popup", + height: 68, + }; + + static BUTTON_OK_EVENT_CHANGE = "BUTTON_OK_EVENT_CHANGE" + static BUTTON_CLEAR_EVENT_CHANGE = "BUTTON_CLEAR_EVENT_CHANGE" + static BUTTON_NOW_EVENT_CHANGE = "BUTTON_NOW_EVENT_CHANGE" + static CALENDAR_EVENT_CHANGE = "CALENDAR_EVENT_CHANGE" + + render() { + const o = this.options; + + return { + type: "bi.vtape", + items: [{ + el: { + type: CenterAdaptLayout.xtype, + cls: "bi-split-top", + items: [{ + type: DynamicDateTimeSelect.xtype, + value: o.value, + ref: _ref => { + this.timeSelect = _ref; + }, + }], + }, + hgap: 10, + height: 44, + }, { + el: { + type: GridLayout.xtype, + items: [ + [{ + type: TextButton.xtype, cls: "bi-high-light bi-split-top", shadow: true, - text: BI.i18nText("BI-Basic_Clears"), + text: i18nText("BI-Basic_Clears"), listeners: [{ - eventName: BI.TextButton.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.TimePopup.BUTTON_CLEAR_EVENT_CHANGE); - } - }] + eventName: TextButton.EVENT_CHANGE, + action: () => { + this.fireEvent(TimePopup.BUTTON_CLEAR_EVENT_CHANGE); + }, + }], }, { - type: "bi.text_button", + type: TextButton.xtype, cls: "bi-split-left bi-split-right bi-high-light bi-split-top", shadow: true, - text: BI.i18nText("BI-Basic_Now"), + text: i18nText("BI-Basic_Now"), listeners: [{ - eventName: BI.TextButton.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.TimePopup.BUTTON_NOW_EVENT_CHANGE); - } - }] + eventName: TextButton.EVENT_CHANGE, + action: () => { + this.fireEvent(TimePopup.BUTTON_NOW_EVENT_CHANGE); + }, + }], }, { - type: "bi.text_button", + type: TextButton.xtype, cls: "bi-high-light bi-split-top", shadow: true, - text: BI.i18nText("BI-Basic_OK"), + text: i18nText("BI-Basic_OK"), listeners: [{ - eventName: BI.TextButton.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.TimePopup.BUTTON_OK_EVENT_CHANGE); - } - }] - }]] - }, - height: 24 - }] - }; - }, + eventName: TextButton.EVENT_CHANGE, + action: () => { + this.fireEvent(TimePopup.BUTTON_OK_EVENT_CHANGE); + }, + }], + }] + ], + }, + height: 24, + }], + }; + } - setValue: function (value) { - if (this._checkValueValid(value)) { - this.timeSelect.setValue(); - } else { - this.timeSelect.setValue({ - hour: value.hour, - minute: value.minute, - second: value.second - }); - } - }, + setValue(value) { + if (this._checkValueValid(value)) { + this.timeSelect.setValue(); + } else { + this.timeSelect.setValue({ + hour: value.hour, + minute: value.minute, + second: value.second, + }); + } + } - getValue: function () { - return this.timeSelect.getValue(); - }, + getValue() { + return this.timeSelect.getValue(); + } - _checkValueValid: function (value) { - return BI.isNull(value) || BI.isEmptyObject(value) || BI.isEmptyString(value); - } - }); - BI.TimePopup.BUTTON_OK_EVENT_CHANGE = "BUTTON_OK_EVENT_CHANGE"; - BI.TimePopup.BUTTON_CLEAR_EVENT_CHANGE = "BUTTON_CLEAR_EVENT_CHANGE"; - BI.TimePopup.BUTTON_NOW_EVENT_CHANGE = "BUTTON_NOW_EVENT_CHANGE"; - BI.TimePopup.CALENDAR_EVENT_CHANGE = "CALENDAR_EVENT_CHANGE"; - BI.shortcut("bi.time_popup", BI.TimePopup); -})(); \ No newline at end of file + _checkValueValid(value) { + return isNull(value) || isEmptyObject(value) || isEmptyString(value); + } +} diff --git a/src/widget/time/index.js b/src/widget/time/index.js new file mode 100644 index 000000000..da4e7bbe8 --- /dev/null +++ b/src/widget/time/index.js @@ -0,0 +1,3 @@ +export { TimePopup } from "./datetime.popup"; +export { TimeCombo } from "./time.combo"; +export { TimeTrigger } from "./time.trigger"; diff --git a/src/widget/time/time.combo.js b/src/widget/time/time.combo.js index 6f3f8947d..5cf7d74fe 100644 --- a/src/widget/time/time.combo.js +++ b/src/widget/time/time.combo.js @@ -1,247 +1,245 @@ -/** - * 时间选择 - * qcc - * 2019/2/28 - */ +import { shortcut, toPix, getDate, isNotEmptyString, isEqual, isEmptyString, AbsoluteLayout } from "@/core"; +import { Single, IconButton, Combo } from "@/base"; +import { TimePopup } from "./datetime.popup"; -!(function () { - BI.TimeCombo = BI.inherit(BI.Single, { - constants: { - popupHeight: 80, - popupWidth: 240, - comboAdjustHeight: 1, - border: 1, - iconWidth: 24 - }, - props: { - baseCls: "bi-time-combo", - height: 24, - format: "", - allowEdit: false, - isNeedAdjustHeight: false, - isNeedAdjustWidth: false - }, +@shortcut() +export class TimeCombo extends Single { + static xtype = "bi.time_combo" - _init: function () { - var o = this.options; - BI.TimeCombo.superclass._init.apply(this, arguments); - }, + static EVENT_KEY_DOWN = "EVENT_KEY_DOWN" + static EVENT_CONFIRM = "EVENT_CONFIRM" + static EVENT_CHANGE = "EVENT_CHANGE" + static EVENT_VALID = "EVENT_VALID" + static EVENT_ERROR = "EVENT_ERROR" + static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW" - render: function () { - var self = this, opts = this.options; - this.storeTriggerValue = ""; - this.storeValue = opts.value; + constants = { + popupHeight: 80, + popupWidth: 240, + comboAdjustHeight: 1, + border: 1, + iconWidth: 24, + } - var popup = { - type: "bi.time_popup", - value: opts.value, - listeners: [{ - eventName: BI.TimePopup.BUTTON_CLEAR_EVENT_CHANGE, - action: function () { - self.setValue(); - self.hidePopupView(); - self.fireEvent(BI.TimeCombo.EVENT_CONFIRM); - } - }, { - eventName: BI.TimePopup.BUTTON_OK_EVENT_CHANGE, - action: function () { - self.setValue(self.popup.getValue()); - self.hidePopupView(); - self.fireEvent(BI.TimeCombo.EVENT_CONFIRM); - } - }, { - eventName: BI.TimePopup.BUTTON_NOW_EVENT_CHANGE, - action: function () { - self._setNowTime(); - } - }], - ref: function (_ref) { - self.popup = _ref; - } - }; - return { - type: "bi.absolute", - items: [{ + props = { + baseCls: "bi-time-combo", + height: 24, + format: "", + allowEdit: false, + isNeedAdjustHeight: false, + isNeedAdjustWidth: false, + }; + + _init() { + super._init(...arguments); + } + + render() { + const opts = this.options; + this.storeTriggerValue = ""; + this.storeValue = opts.value; + + const popup = { + type: "bi.time_popup", + value: opts.value, + listeners: [{ + eventName: TimePopup.BUTTON_CLEAR_EVENT_CHANGE, + action: () => { + this.setValue(); + this.hidePopupView(); + this.fireEvent(TimeCombo.EVENT_CONFIRM); + }, + }, { + eventName: TimePopup.BUTTON_OK_EVENT_CHANGE, + action: () => { + this.setValue(this.popup.getValue()); + this.hidePopupView(); + this.fireEvent(TimeCombo.EVENT_CONFIRM); + }, + }, { + eventName: TimePopup.BUTTON_NOW_EVENT_CHANGE, + action: () => { + this._setNowTime(); + }, + }], + ref: _ref => { + this.popup = _ref; + }, + }; + + return { + type: AbsoluteLayout.xtype, + items: [{ + el: { + type: Combo.xtype, + cls: "bi-border bi-border-radius", + container: opts.container, + toggle: false, + isNeedAdjustHeight: opts.isNeedAdjustHeight, + isNeedAdjustWidth: opts.isNeedAdjustWidth, el: { - type: "bi.combo", - cls: "bi-border bi-border-radius", - container: opts.container, - toggle: false, - isNeedAdjustHeight: opts.isNeedAdjustHeight, - isNeedAdjustWidth: opts.isNeedAdjustWidth, - el: { - type: "bi.horizontal_fill", - columnSize: ["fill", this.constants.iconWidth], - height: BI.toPix(opts.height, 2), - items: [{ - type: "bi.time_trigger", - height: BI.toPix(opts.height, 2), - allowEdit: opts.allowEdit, - watermark: opts.watermark, - format: opts.format, - value: opts.value, - ref: function (_ref) { - self.trigger = _ref; - }, - listeners: [{ - eventName: "EVENT_KEY_DOWN", - action: function () { - if (self.combo.isViewVisible()) { - self.combo.hideView(); - } - self.fireEvent(BI.TimeCombo.EVENT_KEY_DOWN, arguments); - } - }, { - eventName: "EVENT_STOP", - action: function () { - if (!self.combo.isViewVisible()) { - self.combo.showView(); - } - } - }, { - eventName: "EVENT_FOCUS", - action: function () { - self.storeTriggerValue = self.trigger.getKey(); - if (!self.combo.isViewVisible()) { - self.combo.showView(); - } - self.fireEvent("EVENT_FOCUS"); + type: "bi.horizontal_fill", + columnSize: ["fill", this.constants.iconWidth], + height: toPix(opts.height, 2), + items: [{ + type: "bi.time_trigger", + height: toPix(opts.height, 2), + allowEdit: opts.allowEdit, + watermark: opts.watermark, + format: opts.format, + value: opts.value, + ref: _ref => { + this.trigger = _ref; + }, + listeners: [{ + eventName: "EVENT_KEY_DOWN", + action: () => { + if (this.combo.isViewVisible()) { + this.combo.hideView(); } - }, { - eventName: "EVENT_BLUR", - action: function () { - self.fireEvent("EVENT_BLUR"); - } - }, { - eventName: "EVENT_ERROR", - action: function () { - var date = BI.getDate(); - self.storeValue = { - hour: date.getHours(), - minute: date.getMinutes(), - second: date.getSeconds() - }; - self.fireEvent("EVENT_ERROR"); - } - }, { - eventName: "EVENT_VALID", - action: function () { - self.fireEvent("EVENT_VALID"); - } - }, { - eventName: "EVENT_CHANGE", - action: function () { - self.fireEvent("EVENT_CHANGE"); + this.fireEvent(TimeCombo.EVENT_KEY_DOWN, arguments); + }, + }, { + eventName: "EVENT_STOP", + action: () => { + if (!this.combo.isViewVisible()) { + this.combo.showView(); } - }, { - eventName: "EVENT_CONFIRM", - action: function () { - if (self.combo.isViewVisible()) { - return; - } - var dateStore = self.storeTriggerValue; - var dateObj = self.trigger.getKey(); - if (BI.isNotEmptyString(dateObj) && !BI.isEqual(dateObj, dateStore)) { - self.storeValue = self.trigger.getValue(); - self.setValue(self.trigger.getValue()); - } else if (BI.isEmptyString(dateObj)) { - self.storeValue = null; - self.trigger.setValue(); - } - self.fireEvent("EVENT_CONFIRM"); + }, + }, { + eventName: "EVENT_FOCUS", + action: () => { + this.storeTriggerValue = this.trigger.getKey(); + if (!this.combo.isViewVisible()) { + this.combo.showView(); } - }] + this.fireEvent("EVENT_FOCUS"); + }, }, { - el: { - type: "bi.icon_button", - cls: "bi-trigger-icon-button time-font", - width: this.constants.iconWidth, - listeners: [{ - eventName: BI.IconButton.EVENT_CHANGE, - action: function () { - if (self.combo.isViewVisible()) { - // self.combo.hideView(); - } else { - self.combo.showView(); - } - } - }], - ref: function (_ref) { - self.triggerBtn = _ref; + eventName: "EVENT_BLUR", + action: () => { + this.fireEvent("EVENT_BLUR"); + }, + }, { + eventName: "EVENT_ERROR", + action: () => { + const date = getDate(); + this.storeValue = { + hour: date.getHours(), + minute: date.getMinutes(), + second: date.getSeconds(), + }; + this.fireEvent("EVENT_ERROR"); + }, + }, { + eventName: "EVENT_VALID", + action: () => { + this.fireEvent("EVENT_VALID"); + }, + }, { + eventName: "EVENT_CHANGE", + action: () => { + this.fireEvent("EVENT_CHANGE"); + }, + }, { + eventName: "EVENT_CONFIRM", + action: () => { + if (this.combo.isViewVisible()) { + return; + } + const dateStore = this.storeTriggerValue; + const dateObj = this.trigger.getKey(); + 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.fireEvent("EVENT_CONFIRM"); }, }], - }, - adjustLength: this.constants.comboAdjustHeight, - popup: { - el: popup, - width: opts.isNeedAdjustWidth ? opts.width : this.constants.popupWidth, - stopPropagation: false - }, - hideChecker: function (e) { - return self.triggerBtn.element.find(e.target).length === 0; - }, - listeners: [{ - eventName: BI.Combo.EVENT_BEFORE_POPUPVIEW, - action: function () { - self.popup.setValue(self.storeValue); - self.fireEvent(BI.TimeCombo.EVENT_BEFORE_POPUPVIEW); - } + }, { + el: { + type: IconButton.xtype, + cls: "bi-trigger-icon-button time-font", + width: this.constants.iconWidth, + listeners: [{ + eventName: IconButton.EVENT_CHANGE, + action: () => { + if (this.combo.isViewVisible()) { + // this.combo.hideView(); + } else { + this.combo.showView(); + } + }, + }], + ref: _ref => { + this.triggerBtn = _ref; + }, + }, }], - ref: function (_ref) { - self.combo = _ref; - } }, - top: 0, - left: 0, - right: 0, - bottom: 0 - }] - }; - }, + adjustLength: this.constants.comboAdjustHeight, + popup: { + el: popup, + width: opts.isNeedAdjustWidth ? opts.width : this.constants.popupWidth, + stopPropagation: false, + }, + hideChecker: e => this.triggerBtn.element.find(e.target).length === 0, + listeners: [{ + eventName: Combo.EVENT_BEFORE_POPUPVIEW, + action: () => { + this.popup.setValue(this.storeValue); + this.fireEvent(TimeCombo.EVENT_BEFORE_POPUPVIEW); + }, + }], + ref: _ref => { + this.combo = _ref; + }, + }, + top: 0, + left: 0, + right: 0, + bottom: 0, + }], + }; + } - setValue: function (v) { - this.storeValue = v; - this.trigger.setValue(v); - }, - getValue: function () { - return this.storeValue; - }, + setValue(v) { + this.storeValue = v; + this.trigger.setValue(v); + } - hidePopupView: function () { - this.combo.hideView(); - }, + getValue() { + return this.storeValue; + } - _setNowTime: function () { - var date = BI.getDate(); - var nowTome = { - hour: date.getHours(), - minute: date.getMinutes(), - second: date.getSeconds() - }; - this.setValue(nowTome); - this.hidePopupView(); - this.fireEvent(BI.TimeCombo.EVENT_CONFIRM); - }, + hidePopupView() { + this.combo.hideView(); + } - focus: function () { - this.trigger.focus(); - }, + _setNowTime() { + const date = getDate(); + const nowTome = { + hour: date.getHours(), + minute: date.getMinutes(), + second: date.getSeconds(), + }; + this.setValue(nowTome); + this.hidePopupView(); + this.fireEvent(TimeCombo.EVENT_CONFIRM); + } - blur: function () { - this.trigger.blur(); - }, + focus() { + this.trigger.focus(); + } - setWaterMark: function (v) { - this.trigger.setWaterMark(v); - } - }); + blur() { + this.trigger.blur(); + } - BI.TimeCombo.EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; - BI.TimeCombo.EVENT_CONFIRM = "EVENT_CONFIRM"; - BI.TimeCombo.EVENT_CHANGE = "EVENT_CHANGE"; - BI.TimeCombo.EVENT_VALID = "EVENT_VALID"; - BI.TimeCombo.EVENT_ERROR = "EVENT_ERROR"; - BI.TimeCombo.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; - BI.shortcut("bi.time_combo", BI.TimeCombo); -})(); \ No newline at end of file + setWaterMark(v) { + this.trigger.setWaterMark(v); + } +} diff --git a/src/widget/time/time.trigger.js b/src/widget/time/time.trigger.js index a15235cf4..2fc2b0751 100644 --- a/src/widget/time/time.trigger.js +++ b/src/widget/time/time.trigger.js @@ -1,202 +1,193 @@ -!(function () { - BI.TimeTrigger = BI.inherit(BI.Trigger, { +import { shortcut, i18nText, bind, isNotNull, isNotEmptyString, isEqual, AbsoluteLayout, any, print, parseDateTime, isEmptyObject, getDate, isNotEmptyObject } from "@/core"; +import { Trigger, Text } from "@/base"; +import { SignEditor } from "@/case"; - _const: { - COMPARE_FORMAT: "%H:%M:%S", - COMPLETE_COMPARE_FORMAT: "%Y-%M-%d %H:%M:%S %P", - FORMAT_ARRAY: [ - "%H:%M:%S", // HH:mm:ss - "%I:%M:%S", // hh:mm:ss - "%l:%M:%S", // h:mm:ss - "%k:%M:%S", // H:mm:ss - "%l:%M:%S %p", // h:mm:ss a - "%l:%M:%S %P", // h:mm:ss a - "%H:%M:%S %p", // HH:mm:ss a - "%H:%M:%S %P", // HH:mm:ss a - "%l:%M", // h:mm - "%k:%M", // H:mm - "%I:%M", // hh:mm - "%H:%M", // HH:mm - "%M:%S" // mm:ss - ], - DEFAULT_DATE_STRING: "2000-01-01", - DEFAULT_HOUR: "00" - }, +@shortcut() +export class TimeTrigger extends Trigger { + static xtype = "bi.time_trigger" - props: () => ({ + _const = { + COMPARE_FORMAT: "%H:%M:%S", + COMPLETE_COMPARE_FORMAT: "%Y-%M-%d %H:%M:%S %P", + FORMAT_ARRAY: ["%H:%M:%S", "%I:%M:%S", "%l:%M:%S", "%k:%M:%S", "%l:%M:%S %p", "%l:%M:%S %P", "%H:%M:%S %p", "%H:%M:%S %P", "%l:%M", "%k:%M", "%I:%M", "%H:%M", "%M:%S"], + DEFAULT_DATE_STRING: "2000-01-01", + DEFAULT_HOUR: "00", + }; + + props() { + return { extraCls: "bi-time-trigger", value: {}, format: "", allowEdit: false, - watermark: BI.i18nText("BI-Basic_Unrestricted"), - }), + watermark: i18nText("BI-Basic_Unrestricted"), + }; + } - render: function () { - var self = this, o = this.options; - this.storeTriggerValue = ""; - this.storeValue = o.value; - return { - type: "bi.absolute", - items: [{ - el: { - type: "bi.sign_editor", - height: o.height, - validationChecker: function (v) { - return self._dateCheck(v); + render() { + const o = this.options; + this.storeTriggerValue = ""; + this.storeValue = o.value; + + return { + type: AbsoluteLayout.xtype, + items: [{ + el: { + type: SignEditor.xtype, + height: o.height, + validationChecker: v => this._dateCheck(v), + quitChecker () { + return false; + }, + ref: _ref => { + this.editor = _ref; + }, + value: this._formatValue(o.value), + hgap: 4, + allowBlank: true, + watermark: o.watermark, + title: bind(this._getTitle, this), + listeners: [{ + eventName: "EVENT_KEY_DOWN", + action: (...args) => { + this.fireEvent("EVENT_KEY_DOWN", ...args); }, - quitChecker: function () { - return false; + }, { + eventName: "EVENT_FOCUS", + action: () => { + this.storeTriggerValue = this.getKey(); + this.fireEvent("EVENT_FOCUS"); }, - ref: function (_ref) { - self.editor = _ref; + }, { + eventName: "EVENT_BLUR", + action: () => { + this.fireEvent("EVENT_BLUR"); }, - value: this._formatValue(o.value), - hgap: 4, - allowBlank: true, - watermark: o.watermark, - title: BI.bind(this._getTitle, this), - listeners: [{ - eventName: "EVENT_KEY_DOWN", - action: function () { - self.fireEvent("EVENT_KEY_DOWN", arguments); - } - }, { - eventName: "EVENT_FOCUS", - action: function () { - self.storeTriggerValue = self.getKey(); - self.fireEvent("EVENT_FOCUS"); - } - }, { - eventName: "EVENT_BLUR", - action: function () { - self.fireEvent("EVENT_BLUR"); - } - }, { - eventName: "EVENT_STOP", - action: function () { - self.fireEvent("EVENT_STOP"); - } - }, { - eventName: "EVENT_VALID", - action: function () { - self.fireEvent("EVENT_VALID"); - } - }, { - eventName: "EVENT_ERROR", - action: function () { - self.fireEvent("EVENT_ERROR"); - } - }, { - eventName: "EVENT_CONFIRM", - action: function () { - var value = self.editor.getValue(); - if (BI.isNotNull(value)) { - self.editor.setState(value); - } - if (BI.isNotEmptyString(value) && !BI.isEqual(self.storeTriggerValue, self.getKey())) { - var date = value.match(/\d+/g); - self.storeValue = { - hour: date[0] | 0, - minute: date[1] | 0, - second: date[2] | 0 - }; - } - self.fireEvent("EVENT_CONFIRM"); - } - }, { - eventName: "EVENT_START", - action: function () { - self.fireEvent("EVENT_START"); + }, { + eventName: "EVENT_STOP", + action: () => { + this.fireEvent("EVENT_STOP"); + }, + }, { + eventName: "EVENT_VALID", + action: () => { + this.fireEvent("EVENT_VALID"); + }, + }, { + eventName: "EVENT_ERROR", + action: () => { + this.fireEvent("EVENT_ERROR"); + }, + }, { + eventName: "EVENT_CONFIRM", + action: () => { + const value = this.editor.getValue(); + if (isNotNull(value)) { + this.editor.setState(value); } - }, { - eventName: "EVENT_CHANGE", - action: function () { - self.fireEvent("EVENT_CHANGE"); + if (isNotEmptyString(value) && !isEqual(this.storeTriggerValue, this.getKey())) { + const date = value.match(/\d+/g); + this.storeValue = { + hour: date[0] | 0, + minute: date[1] | 0, + second: date[2] | 0, + }; } - }] - }, - left: 0, - right: 0, - top: 0, - bottom: 0 - }, { - el: { - type: "bi.text", - invisible: o.allowEdit, - cls: "show-text", - title: BI.bind(this._getTitle, this), - hgap: 4 - }, - left: 0, - right: 0, - top: 0, - bottom: 0 - }] - }; - }, + this.fireEvent("EVENT_CONFIRM"); + }, + }, { + eventName: "EVENT_START", + action: () => { + this.fireEvent("EVENT_START"); + }, + }, { + eventName: "EVENT_CHANGE", + action: () => { + this.fireEvent("EVENT_CHANGE"); + }, + }], + }, + left: 0, + right: 0, + top: 0, + bottom: 0, + }, { + el: { + type: Text.xtype, + invisible: o.allowEdit, + cls: "show-text", + title: bind(this._getTitle, this), + hgap: 4, + }, + left: 0, + right: 0, + top: 0, + bottom: 0, + }], + }; + } - _dateCheck: function (date) { - var c = this._const; - var self = this; - return BI.any(c.FORMAT_ARRAY, function (idx, format) { - return BI.print(BI.parseDateTime(c.DEFAULT_DATE_STRING + " " + self._getCompleteHMS(date, format), c.COMPLETE_COMPARE_FORMAT), format) === date; - }); - }, + _dateCheck(date) { + const c = this._const; + + return any(c.FORMAT_ARRAY, (idx, format) => print(parseDateTime(`${c.DEFAULT_DATE_STRING} ${this._getCompleteHMS(date, format)}`, c.COMPLETE_COMPARE_FORMAT), format) === date); + } - _getCompleteHMS: function (str, format) { - var c = this._const; - switch (format) { - case "%M:%S": - str = c.DEFAULT_HOUR + ":" + str; - break; - default: - break; - } - return str; - }, + _getCompleteHMS(str, format) { + const c = this._const; + switch (format) { + case "%M:%S": + str = `${c.DEFAULT_HOUR}:${str}`; + break; + default: + break; + } + + return str; + } - _getTitle: function () { - var storeValue = this.storeValue || {}; - if (BI.isEmptyObject(storeValue)) { - return this.options.watermark; - } - var date = BI.getDate(); - return BI.print(BI.getDate(date.getFullYear(), 0, 1, storeValue.hour, storeValue.minute, storeValue.second), this._getFormatString()); - }, + _getTitle() { + const storeValue = this.storeValue || {}; + if (isEmptyObject(storeValue)) { + return this.options.watermark; + } + const date = getDate(); + + return print(getDate(date.getFullYear(), 0, 1, storeValue.hour, storeValue.minute, storeValue.second), this._getFormatString()); + } - _getFormatString: function () { - return this.options.format || this._const.COMPARE_FORMAT; - }, + _getFormatString() { + return this.options.format || this._const.COMPARE_FORMAT; + } - _formatValue: function (v) { - var now = BI.getDate(); - return BI.isNotEmptyObject(v) ? BI.print(BI.getDate(now.getFullYear(), now.getMonth(), now.getDay(), v.hour, v.minute, v.second), this._getFormatString()) : ""; - }, + _formatValue(v) { + const now = getDate(); + + return isNotEmptyObject(v) ? print(getDate(now.getFullYear(), now.getMonth(), now.getDay(), v.hour, v.minute, v.second), this._getFormatString()) : ""; + } - getKey: function () { - return this.editor.getValue(); - }, + getKey() { + return this.editor.getValue(); + } - setValue: function (v) { - this.storeValue = v; - this.editor.setValue(this._formatValue(v)); - }, + setValue(v) { + this.storeValue = v; + this.editor.setValue(this._formatValue(v)); + } - getValue: function () { - return this.storeValue; - }, + getValue() { + return this.storeValue; + } - focus: function () { - this.editor.focus(); - }, + focus() { + this.editor.focus(); + } - blur: function () { - this.editor.blur(); - }, + blur() { + this.editor.blur(); + } - setWaterMark: function (v) { - this.editor.setWaterMark(v); - } - }); - BI.shortcut("bi.time_trigger", BI.TimeTrigger); -})(); + setWaterMark(v) { + this.editor.setWaterMark(v); + } +}