You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
372 lines
16 KiB
372 lines
16 KiB
import { |
|
AbsoluteLayout, |
|
HorizontalFillLayout, |
|
shortcut, |
|
getDate, |
|
toPix, |
|
isEqual, |
|
isNotEmptyString, |
|
isEmptyString, |
|
isNotNull, |
|
isNotEmptyObject, |
|
checkDateVoid |
|
} from "@/core"; |
|
import { Combo, IconButton, Single } from "@/base"; |
|
import { DynamicDateTrigger } from "./dynamicdate.trigger"; |
|
import { DynamicDatePopup } from "./dynamicdate.popup"; |
|
|
|
@shortcut() |
|
export class DynamicDateCombo extends Single { |
|
static xtype = "bi.dynamic_date_combo"; |
|
|
|
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 Static = 1; |
|
static Dynamic = 2; |
|
|
|
constants = { |
|
popupHeight: 259, |
|
popupWidth: 270, |
|
comboAdjustHeight: 1, |
|
border: 1, |
|
iconWidth: 24, |
|
}; |
|
|
|
props = { |
|
baseCls: "bi-dynamic-date-combo", |
|
height: 24, |
|
minDate: "1900-01-01", |
|
maxDate: "2099-12-31", |
|
format: "", |
|
allowEdit: true, |
|
supportDynamic: true, |
|
attributes: { |
|
tabIndex: -1, |
|
}, |
|
isNeedAdjustHeight: false, |
|
isNeedAdjustWidth: false, |
|
}; |
|
|
|
_init() { |
|
super._init(...arguments); |
|
} |
|
|
|
render() { |
|
const opts = this.options; |
|
this.storeTriggerValue = ""; |
|
const date = getDate(); |
|
this.storeValue = opts.value; |
|
const border = opts.simple ? 1 : 2; |
|
|
|
return { |
|
type: AbsoluteLayout.xtype, |
|
items: [ |
|
{ |
|
el: { |
|
type: Combo.xtype, |
|
cls: `${opts.simple ? "bi-border-bottom" : "bi-border bi-border-radius"} bi-focus-shadow`, |
|
container: opts.container, |
|
ref: _ref => { |
|
this.combo = _ref; |
|
}, |
|
toggle: false, |
|
isNeedAdjustHeight: opts.isNeedAdjustHeight, |
|
isNeedAdjustWidth: opts.isNeedAdjustWidth, |
|
destroyWhenHide: true, |
|
el: { |
|
type: HorizontalFillLayout.xtype, |
|
columnSize: [this.constants.iconWidth, "fill"], |
|
height: toPix(opts.height, border), |
|
items: [ |
|
{ |
|
el: { |
|
type: IconButton.xtype, |
|
cls: "bi-trigger-icon-button date-change-h-font", |
|
width: toPix(opts.height, border), |
|
height: toPix(opts.height, border), |
|
ref: _ref => { |
|
this.changeIcon = _ref; |
|
}, |
|
}, |
|
}, |
|
{ |
|
type: DynamicDateTrigger.xtype, |
|
simple: opts.simple, |
|
min: opts.minDate, |
|
max: opts.maxDate, |
|
format: opts.format, |
|
allowEdit: opts.allowEdit, |
|
watermark: opts.watermark, |
|
iconWidth: toPix(opts.height, border), |
|
height: toPix(opts.height, border), |
|
value: opts.value, |
|
ref: _ref => { |
|
this.trigger = _ref; |
|
}, |
|
listeners: [ |
|
{ |
|
eventName: DynamicDateTrigger.EVENT_KEY_DOWN, |
|
action: (...args) => { |
|
if (this.combo.isViewVisible()) { |
|
this.combo.hideView(); |
|
} |
|
this.fireEvent(DynamicDateCombo.EVENT_KEY_DOWN, ...args); |
|
}, |
|
}, |
|
{ |
|
eventName: DynamicDateTrigger.EVENT_STOP, |
|
action: () => { |
|
if (!this.combo.isViewVisible()) { |
|
this.combo.showView(); |
|
} |
|
}, |
|
}, |
|
{ |
|
eventName: DynamicDateTrigger.EVENT_FOCUS, |
|
action: () => { |
|
this.storeTriggerValue = this.trigger.getKey(); |
|
if (!this.combo.isViewVisible()) { |
|
this.combo.showView(); |
|
} |
|
this.fireEvent(DynamicDateCombo.EVENT_FOCUS); |
|
}, |
|
}, |
|
{ |
|
eventName: DynamicDateTrigger.EVENT_BLUR, |
|
action: () => { |
|
this.fireEvent(DynamicDateCombo.EVENT_BLUR); |
|
}, |
|
}, |
|
{ |
|
eventName: DynamicDateTrigger.EVENT_ERROR, |
|
action: () => { |
|
this.storeValue = { |
|
type: DynamicDateCombo.Static, |
|
value: { |
|
year: date.getFullYear(), |
|
month: date.getMonth() + 1, |
|
}, |
|
}; |
|
this.combo.element.addClass("error"); |
|
this.fireEvent(DynamicDateCombo.EVENT_ERROR); |
|
}, |
|
}, |
|
{ |
|
eventName: DynamicDateTrigger.EVENT_VALID, |
|
action: () => { |
|
this.storeValue = this.trigger.getValue(); |
|
this.combo.element.removeClass("error"); |
|
this.fireEvent(DynamicDateCombo.EVENT_VALID); |
|
}, |
|
}, |
|
{ |
|
eventName: DynamicDateTrigger.EVENT_CHANGE, |
|
action: () => { |
|
this.fireEvent(DynamicDateCombo.EVENT_CHANGE); |
|
}, |
|
}, |
|
{ |
|
eventName: DynamicDateTrigger.EVENT_CONFIRM, |
|
action: () => { |
|
const dateStore = this.storeTriggerValue; |
|
const dateObj = this.trigger.getKey(); |
|
if (this.combo.isViewVisible() || isEqual(dateObj, dateStore)) { |
|
return; |
|
} |
|
if (isNotEmptyString(dateObj) && !isEqual(dateObj, dateStore)) { |
|
this.storeValue = this.trigger.getValue(); |
|
this.setValue(this.trigger.getValue()); |
|
} else if (isEmptyString(dateObj)) { |
|
this.storeValue = null; |
|
this.trigger.setValue(); |
|
} |
|
this._checkDynamicValue(this.storeValue); |
|
this.fireEvent(DynamicDateCombo.EVENT_CONFIRM); |
|
}, |
|
} |
|
], |
|
} |
|
], |
|
}, |
|
adjustLength: this.constants.comboAdjustHeight, |
|
popup: { |
|
el: { |
|
type: DynamicDatePopup.xtype, |
|
width: opts.isNeedAdjustWidth ? opts.width : undefined, |
|
supportDynamic: opts.supportDynamic, |
|
behaviors: opts.behaviors, |
|
min: opts.minDate, |
|
max: opts.maxDate, |
|
ref: _ref => { |
|
this.popup = _ref; |
|
}, |
|
listeners: [ |
|
{ |
|
eventName: DynamicDatePopup.BUTTON_CLEAR_EVENT_CHANGE, |
|
action: () => { |
|
this.setValue(); |
|
this.combo.hideView(); |
|
this.fireEvent(DynamicDateCombo.EVENT_CONFIRM); |
|
}, |
|
}, |
|
{ |
|
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(), |
|
}, |
|
}); |
|
this.combo.hideView(); |
|
this.fireEvent(DynamicDateCombo.EVENT_CONFIRM); |
|
}, |
|
}, |
|
{ |
|
eventName: DynamicDatePopup.BUTTON_OK_EVENT_CHANGE, |
|
action: () => { |
|
const value = this.popup.getValue(); |
|
if (this._checkValue(value)) { |
|
this.setValue(value); |
|
} |
|
this.combo.hideView(); |
|
this.fireEvent(DynamicDateCombo.EVENT_CONFIRM); |
|
}, |
|
}, |
|
{ |
|
eventName: DynamicDatePopup.EVENT_CHANGE, |
|
action: () => { |
|
this.setValue(this.popup.getValue()); |
|
this.combo.hideView(); |
|
this.fireEvent(DynamicDateCombo.EVENT_CONFIRM); |
|
}, |
|
}, |
|
{ |
|
eventName: DynamicDatePopup.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW, |
|
action: () => { |
|
this.fireEvent(DynamicDateCombo.EVENT_BEFORE_YEAR_MONTH_POPUPVIEW); |
|
}, |
|
} |
|
], |
|
}, |
|
}, |
|
// // DEC-4250 和复选下拉一样，点击triggerBtn不默认收起 |
|
// hideChecker: function (e) { |
|
// return self.triggerBtn.element.find(e.target).length === 0; |
|
// }, |
|
listeners: [ |
|
{ |
|
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, |
|
} |
|
], |
|
}; |
|
} |
|
|
|
created() { |
|
this._checkDynamicValue(this.storeValue); |
|
} |
|
|
|
_checkDynamicValue(v) { |
|
let type = null; |
|
if (isNotNull(v)) { |
|
type = v.type; |
|
} |
|
switch (type) { |
|
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(v) { |
|
const o = this.options; |
|
let value; |
|
switch (v.type) { |
|
case DynamicDateCombo.Dynamic: |
|
return isNotEmptyObject(v.value); |
|
case DynamicDateCombo.Static: |
|
value = v.value || {}; |
|
|
|
return !checkDateVoid(value.year, value.month, value.day, o.minDate, o.maxDate)[0]; |
|
default: |
|
return true; |
|
} |
|
} |
|
|
|
_defaultState() {} |
|
|
|
setMinDate(minDate) { |
|
const o = this.options; |
|
o.minDate = minDate; |
|
this.trigger.setMinDate(minDate); |
|
this.popup && this.popup.setMinDate(minDate); |
|
} |
|
|
|
setMaxDate(maxDate) { |
|
const o = this.options; |
|
o.maxDate = maxDate; |
|
this.trigger.setMaxDate(maxDate); |
|
this.popup && this.popup.setMaxDate(maxDate); |
|
} |
|
|
|
setValue(v) { |
|
this.storeValue = v; |
|
this.trigger.setValue(v); |
|
this._checkDynamicValue(v); |
|
} |
|
|
|
getValue() { |
|
return this.storeValue; |
|
} |
|
|
|
getKey() { |
|
return this.trigger.getKey(); |
|
} |
|
|
|
hidePopupView() { |
|
this.combo.hideView(); |
|
} |
|
|
|
focus() { |
|
this.trigger.focus(); |
|
} |
|
|
|
blur() { |
|
this.trigger.blur(); |
|
} |
|
|
|
setWaterMark(v) { |
|
this.trigger.setWaterMark(v); |
|
} |
|
}
|
|
|