|
|
|
import { TextValueComboPopup } from "./popup.textvalue";
|
|
|
|
import {
|
|
|
|
shortcut,
|
|
|
|
Widget,
|
|
|
|
extend,
|
|
|
|
isFunction,
|
|
|
|
toPix,
|
|
|
|
isEmptyArray,
|
|
|
|
Controller,
|
|
|
|
isKey,
|
|
|
|
isObject,
|
|
|
|
isNull,
|
|
|
|
isArray,
|
|
|
|
intersection,
|
|
|
|
map
|
|
|
|
} from "@/core";
|
|
|
|
import { ButtonGroup, Combo } from "@/base";
|
|
|
|
import { SelectTextTrigger } from "../../trigger";
|
|
|
|
|
|
|
|
@shortcut()
|
|
|
|
export class TextValueCombo extends Widget {
|
|
|
|
static xtype = "bi.text_value_combo";
|
|
|
|
|
|
|
|
static EVENT_CHANGE = "EVENT_CHANGE";
|
|
|
|
static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
|
|
|
|
|
|
|
|
_defaultConfig(config) {
|
|
|
|
return extend(super._defaultConfig(...arguments), {
|
|
|
|
baseCls: `bi-text-value-combo ${config.simple ? "bi-border-bottom" : "bi-border bi-border-radius"}`,
|
|
|
|
height: 24,
|
|
|
|
chooseType: ButtonGroup.CHOOSE_TYPE_SINGLE,
|
|
|
|
text: "",
|
|
|
|
value: "",
|
|
|
|
defaultText: "",
|
|
|
|
el: {},
|
|
|
|
allowClear: false,
|
|
|
|
status: "success", // success | warning | error,
|
|
|
|
title: null,
|
|
|
|
allowSelectAll: true,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
_init() {
|
|
|
|
const o = this.options;
|
|
|
|
o.value = isFunction(o.value)
|
|
|
|
? this.__watch(o.value, (context, newValue) => {
|
|
|
|
this.setValue(newValue);
|
|
|
|
})
|
|
|
|
: o.value;
|
|
|
|
o.items = isFunction(o.items)
|
|
|
|
? this.__watch(o.items, (context, newValue) => {
|
|
|
|
this.populate(newValue);
|
|
|
|
})
|
|
|
|
: o.items;
|
|
|
|
super._init(...arguments);
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
const o = this.options;
|
|
|
|
|
|
|
|
const title = () => {
|
|
|
|
if (isFunction(o.title)) {
|
|
|
|
return o.title();
|
|
|
|
}
|
|
|
|
if (this.options.status === "error") {
|
|
|
|
return {
|
|
|
|
level: "warning",
|
|
|
|
text: o.warningTitle,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
return {
|
|
|
|
level: "success",
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
const trigger = {
|
|
|
|
type: SelectTextTrigger.xtype,
|
|
|
|
ref: ref => (this.trigger = ref),
|
|
|
|
cls: "text-value-trigger",
|
|
|
|
items: o.items,
|
|
|
|
height: toPix(o.height, o.simple ? 1 : 2),
|
|
|
|
text: o.text,
|
|
|
|
value: o.value,
|
|
|
|
title,
|
|
|
|
allowClear: o.allowClear,
|
|
|
|
defaultText: o.defaultText,
|
|
|
|
listeners: [
|
|
|
|
{
|
|
|
|
eventName: SelectTextTrigger.EVENT_CLEAR,
|
|
|
|
action: () => {
|
|
|
|
this._clear();
|
|
|
|
this.fireEvent(TextValueCombo.EVENT_CHANGE);
|
|
|
|
},
|
|
|
|
}
|
|
|
|
],
|
|
|
|
...o.el,
|
|
|
|
};
|
|
|
|
let changeTag = false;
|
|
|
|
const popup = {
|
|
|
|
type: TextValueComboPopup.xtype,
|
|
|
|
ref: ref => (this.popup = ref),
|
|
|
|
chooseType: o.chooseType,
|
|
|
|
items: o.items,
|
|
|
|
allowSelectAll: o.allowSelectAll,
|
|
|
|
listeners: [
|
|
|
|
{
|
|
|
|
eventName: TextValueComboPopup.EVENT_CHANGE,
|
|
|
|
action: (...args) => {
|
|
|
|
changeTag = true;
|
|
|
|
const value = this.popup.getValue();
|
|
|
|
this.setValue(value);
|
|
|
|
if (o.chooseType === ButtonGroup.CHOOSE_TYPE_SINGLE) {
|
|
|
|
this.combo.hideView(...args);
|
|
|
|
this.fireEvent(TextValueCombo.EVENT_CHANGE, ...args);
|
|
|
|
}
|
|
|
|
if (o.chooseType === ButtonGroup.CHOOSE_TYPE_MULTI && isEmptyArray(value)) {
|
|
|
|
this._clear();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
eventName: Controller.EVENT_CHANGE,
|
|
|
|
action: (...args) => {
|
|
|
|
this.fireEvent(Controller.EVENT_CHANGE, ...args);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
eventName: TextValueComboPopup.EVENT_CLEAR,
|
|
|
|
action: (...args) => {
|
|
|
|
changeTag = true;
|
|
|
|
this._clear();
|
|
|
|
this.combo.hideView();
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
eventName: TextValueComboPopup.EVENT_CONFIRM,
|
|
|
|
action: (...args) => {
|
|
|
|
this.combo.hideView();
|
|
|
|
},
|
|
|
|
}
|
|
|
|
],
|
|
|
|
};
|
|
|
|
|
|
|
|
return {
|
|
|
|
type: Combo.xtype,
|
|
|
|
height: toPix(o.height, o.simple ? 1 : 2),
|
|
|
|
width: toPix(o.width, o.simple ? 0 : 2),
|
|
|
|
ref: ref => (this.combo = ref),
|
|
|
|
container: o.container,
|
|
|
|
direction: o.direction,
|
|
|
|
adjustLength: 2,
|
|
|
|
el: trigger,
|
|
|
|
listeners: [
|
|
|
|
{
|
|
|
|
eventName: Combo.EVENT_BEFORE_POPUPVIEW,
|
|
|
|
action: () => {
|
|
|
|
changeTag = false;
|
|
|
|
this.fireEvent(TextValueCombo.EVENT_BEFORE_POPUPVIEW);
|
|
|
|
},
|
|
|
|
}, {
|
|
|
|
eventName: Combo.EVENT_AFTER_HIDEVIEW,
|
|
|
|
action: (...args) => {
|
|
|
|
if (o.chooseType !== ButtonGroup.CHOOSE_TYPE_SINGLE && changeTag) {
|
|
|
|
this.fireEvent(TextValueCombo.EVENT_CHANGE, ...args);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
}
|
|
|
|
],
|
|
|
|
popup: {
|
|
|
|
el: popup,
|
|
|
|
value: o.value,
|
|
|
|
maxHeight: 240,
|
|
|
|
minHeight: o.chooseType === ButtonGroup.CHOOSE_TYPE_MULTI && o.allowSelectAll ? 55 : 25,
|
|
|
|
},
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
mounted() {
|
|
|
|
const o = this.options;
|
|
|
|
if (isKey(o.value) || isObject(o.value)) {
|
|
|
|
this._checkError(o.value);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
_clear() {
|
|
|
|
this.trigger.setText("");
|
|
|
|
this.combo.setValue();
|
|
|
|
this.setStatus("success");
|
|
|
|
}
|
|
|
|
|
|
|
|
_checkError(v) {
|
|
|
|
if (isNull(v)) {
|
|
|
|
this.setStatus("success");
|
|
|
|
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
const vals = isArray(v) ? v : [v];
|
|
|
|
|
|
|
|
const result = intersection(map(this.options.items, "value"), vals);
|
|
|
|
|
|
|
|
if (result.length !== vals.length) {
|
|
|
|
this.setStatus("error");
|
|
|
|
} else {
|
|
|
|
this.setStatus("success");
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
clear() {
|
|
|
|
this._clear();
|
|
|
|
}
|
|
|
|
|
|
|
|
setText(text) {
|
|
|
|
this.trigger.setText(text);
|
|
|
|
}
|
|
|
|
|
|
|
|
setValue(v) {
|
|
|
|
this.options.value = v;
|
|
|
|
this.combo.setValue(v);
|
|
|
|
this._checkError(v);
|
|
|
|
}
|
|
|
|
|
|
|
|
setStatus(status) {
|
|
|
|
this.element.removeClass(`bi-status-${this.options.status}`);
|
|
|
|
this.element.addClass(`bi-status-${status}`);
|
|
|
|
this.options.status = status;
|
|
|
|
}
|
|
|
|
|
|
|
|
getValue() {
|
|
|
|
const value = this.combo.getValue();
|
|
|
|
|
|
|
|
return isNull(value) ? [] : isArray(value) ? value : [value];
|
|
|
|
}
|
|
|
|
|
|
|
|
populate(items) {
|
|
|
|
this.options.items = items;
|
|
|
|
this.combo.populate(items);
|
|
|
|
}
|
|
|
|
}
|