Zhenfei.Li
2 years ago
6 changed files with 493 additions and 490 deletions
@ -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); |
||||
})(); |
||||
_checkValueValid(value) { |
||||
return isNull(value) || isEmptyObject(value) || isEmptyString(value); |
||||
} |
||||
} |
||||
|
@ -0,0 +1,3 @@
|
||||
export { TimePopup } from "./datetime.popup"; |
||||
export { TimeCombo } from "./time.combo"; |
||||
export { TimeTrigger } from "./time.trigger"; |
@ -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"); |
||||
} |
||||
}, { |
||||
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"); |
||||
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_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); |
||||
})(); |
||||
setWaterMark(v) { |
||||
this.trigger.setWaterMark(v); |
||||
} |
||||
} |
||||
|
@ -1,202 +1,193 @@
|
||||
!(function () { |
||||
BI.TimeTrigger = BI.inherit(BI.Trigger, { |
||||
|
||||
_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" |
||||
}, |
||||
|
||||
props: () => ({ |
||||
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"; |
||||
|
||||
@shortcut() |
||||
export class TimeTrigger extends Trigger { |
||||
static xtype = "bi.time_trigger" |
||||
|
||||
_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"), |
||||
}), |
||||
|
||||
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); |
||||
watermark: i18nText("BI-Basic_Unrestricted"), |
||||
}; |
||||
} |
||||
|
||||
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 |
||||
}] |
||||
}; |
||||
}, |
||||
|
||||
_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; |
||||
}); |
||||
}, |
||||
|
||||
_getCompleteHMS: function (str, format) { |
||||
var 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()); |
||||
}, |
||||
|
||||
_getFormatString: function () { |
||||
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()) : ""; |
||||
}, |
||||
|
||||
getKey: function () { |
||||
return this.editor.getValue(); |
||||
}, |
||||
|
||||
setValue: function (v) { |
||||
this.storeValue = v; |
||||
this.editor.setValue(this._formatValue(v)); |
||||
}, |
||||
|
||||
getValue: function () { |
||||
return this.storeValue; |
||||
}, |
||||
|
||||
focus: function () { |
||||
this.editor.focus(); |
||||
}, |
||||
|
||||
blur: function () { |
||||
this.editor.blur(); |
||||
}, |
||||
|
||||
setWaterMark: function (v) { |
||||
this.editor.setWaterMark(v); |
||||
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(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(str, format) { |
||||
const c = this._const; |
||||
switch (format) { |
||||
case "%M:%S": |
||||
str = `${c.DEFAULT_HOUR}:${str}`; |
||||
break; |
||||
default: |
||||
break; |
||||
} |
||||
}); |
||||
BI.shortcut("bi.time_trigger", BI.TimeTrigger); |
||||
})(); |
||||
|
||||
return str; |
||||
} |
||||
|
||||
_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() { |
||||
return this.options.format || this._const.COMPARE_FORMAT; |
||||
} |
||||
|
||||
_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() { |
||||
return this.editor.getValue(); |
||||
} |
||||
|
||||
setValue(v) { |
||||
this.storeValue = v; |
||||
this.editor.setValue(this._formatValue(v)); |
||||
} |
||||
|
||||
getValue() { |
||||
return this.storeValue; |
||||
} |
||||
|
||||
focus() { |
||||
this.editor.focus(); |
||||
} |
||||
|
||||
blur() { |
||||
this.editor.blur(); |
||||
} |
||||
|
||||
setWaterMark(v) { |
||||
this.editor.setWaterMark(v); |
||||
} |
||||
} |
||||
|
Loading…
Reference in new issue