forked from fanruan/fineui
Zhenfei.Li
2 years ago
9 changed files with 350 additions and 307 deletions
@ -1,77 +1,77 @@
|
||||
/** |
||||
* 简单的复选下拉框控件, 适用于数据量少的情况, 与valuechooser的区别是allvaluechooser setValue和getValue返回的是所有值 |
||||
* 封装了字段处理逻辑 |
||||
* |
||||
* Created by GUY on 2015/10/29. |
||||
* @class BI.AllValueChooserCombo |
||||
* @extends BI.AbstractAllValueChooser |
||||
*/ |
||||
BI.AllValueChooserCombo = BI.inherit(BI.AbstractAllValueChooser, { |
||||
import { shortcut, extend, emptyFn, isNotNull, createWidget, bind, Selection, difference, map } from "@/core"; |
||||
import { AbstractAllValueChooser } from "./abstract.allvaluechooser"; |
||||
import { MultiSelectCombo } from "@/widget"; |
||||
|
||||
_defaultConfig: function () { |
||||
return BI.extend(BI.AllValueChooserCombo.superclass._defaultConfig.apply(this, arguments), { |
||||
@shortcut() |
||||
export class AllValueChooserCombo extends AbstractAllValueChooser { |
||||
static xtype = "bi.all_value_chooser_combo"; |
||||
|
||||
static EVENT_CONFIRM = "EVENT_CONFIRM"; |
||||
|
||||
_defaultConfig() { |
||||
return extend(super._defaultConfig(...arguments), { |
||||
baseCls: "bi-all-value-chooser-combo", |
||||
width: 200, |
||||
height: 24, |
||||
items: null, |
||||
itemsCreator: BI.emptyFn, |
||||
cache: true |
||||
itemsCreator: emptyFn, |
||||
cache: true, |
||||
}); |
||||
}, |
||||
} |
||||
|
||||
_init: function () { |
||||
BI.AllValueChooserCombo.superclass._init.apply(this, arguments); |
||||
var self = this, o = this.options; |
||||
if (BI.isNotNull(o.items)) { |
||||
_init() { |
||||
super._init(...arguments); |
||||
const o = this.options; |
||||
if (isNotNull(o.items)) { |
||||
this.items = o.items; |
||||
} |
||||
this.combo = BI.createWidget({ |
||||
type: "bi.multi_select_combo", |
||||
this.combo = createWidget({ |
||||
type: MultiSelectCombo.xtype, |
||||
simple: o.simple, |
||||
text: o.text, |
||||
element: this, |
||||
itemsCreator: BI.bind(this._itemsCreator, this), |
||||
valueFormatter: BI.bind(this._valueFormatter, this), |
||||
itemsCreator: bind(this._itemsCreator, this), |
||||
valueFormatter: bind(this._valueFormatter, this), |
||||
width: o.width, |
||||
height: o.height, |
||||
value: this._assertValue({ |
||||
type: BI.Selection.Multi, |
||||
value: o.value || [] |
||||
}) |
||||
type: Selection.Multi, |
||||
value: o.value || [], |
||||
}), |
||||
}); |
||||
|
||||
this.combo.on(BI.MultiSelectCombo.EVENT_CONFIRM, function () { |
||||
self.fireEvent(BI.AllValueChooserCombo.EVENT_CONFIRM); |
||||
this.combo.on(MultiSelectCombo.EVENT_CONFIRM, () => { |
||||
this.fireEvent(AllValueChooserCombo.EVENT_CONFIRM); |
||||
}); |
||||
}, |
||||
} |
||||
|
||||
setValue: function (v) { |
||||
this.combo.setValue(this._assertValue({ |
||||
type: BI.Selection.Multi, |
||||
value: v || [] |
||||
})); |
||||
}, |
||||
setValue(v) { |
||||
this.combo.setValue( |
||||
this._assertValue({ |
||||
type: Selection.Multi, |
||||
value: v || [], |
||||
}) |
||||
); |
||||
} |
||||
|
||||
getValue: function () { |
||||
getValue() { |
||||
return this.getAllValue(); |
||||
}, |
||||
} |
||||
|
||||
getAllValue: function () { |
||||
var val = this.combo.getValue() || {}; |
||||
if (val.type === BI.Selection.Multi) { |
||||
getAllValue() { |
||||
const val = this.combo.getValue() || {}; |
||||
if (val.type === Selection.Multi) { |
||||
return val.value || []; |
||||
} |
||||
|
||||
return BI.difference(BI.map(this.items, "value"), val.value || []); |
||||
}, |
||||
return difference(map(this.items, "value"), val.value || []); |
||||
} |
||||
|
||||
populate: function (items) { |
||||
populate(items) { |
||||
// 直接用combo的populate不会作用到AbstractValueChooser上
|
||||
if (BI.isNotNull(items)) { |
||||
if (isNotNull(items)) { |
||||
this.items = items; |
||||
} |
||||
this.combo.populate(); |
||||
} |
||||
}); |
||||
BI.AllValueChooserCombo.EVENT_CONFIRM = "EVENT_CONFIRM"; |
||||
BI.shortcut("bi.all_value_chooser_combo", BI.AllValueChooserCombo); |
||||
} |
||||
|
@ -0,0 +1,3 @@
|
||||
export { AbstractAllValueChooser } from "./abstract.allvaluechooser"; |
||||
export { AllValueChooserCombo } from "./combo.allvaluechooser"; |
||||
export { AllValueChooserPane } from "./pane.allvaluechooser"; |
@ -1,69 +1,67 @@
|
||||
/** |
||||
* 简单的复选面板, 适用于数据量少的情况, 与valuechooser的区别是allvaluechooser setValue和getValue返回的是所有值 |
||||
* 封装了字段处理逻辑 |
||||
* |
||||
* Created by GUY on 2015/10/29. |
||||
* @class BI.AllValueChooserPane |
||||
* @extends BI.AbstractAllValueChooser |
||||
*/ |
||||
BI.AllValueChooserPane = BI.inherit(BI.AbstractAllValueChooser, { |
||||
import { shortcut, extend, emptyFn, createWidget, bind, isNotNull, Selection, difference, map } from "@/core"; |
||||
import { AbstractAllValueChooser } from "./abstract.allvaluechooser"; |
||||
import { MultiSelectList } from "@/widget"; |
||||
|
||||
_defaultConfig: function () { |
||||
return BI.extend(BI.AllValueChooserPane.superclass._defaultConfig.apply(this, arguments), { |
||||
@shortcut() |
||||
export class AllValueChooserPane extends AbstractAllValueChooser { |
||||
static xtype = "bi.all_value_chooser_pane"; |
||||
|
||||
static EVENT_CHANGE = "EVENT_CHANGE"; |
||||
|
||||
_defaultConfig() { |
||||
return extend(super._defaultConfig(...arguments), { |
||||
baseCls: "bi-all-value-chooser-pane", |
||||
width: 200, |
||||
height: 30, |
||||
items: null, |
||||
itemsCreator: BI.emptyFn, |
||||
cache: true |
||||
itemsCreator: emptyFn, |
||||
cache: true, |
||||
}); |
||||
}, |
||||
} |
||||
|
||||
_init: function () { |
||||
BI.AllValueChooserPane.superclass._init.apply(this, arguments); |
||||
var self = this, o = this.options; |
||||
this.list = BI.createWidget({ |
||||
type: "bi.multi_select_list", |
||||
_init() { |
||||
super._init(...arguments); |
||||
const o = this.options; |
||||
this.list = createWidget({ |
||||
type: MultiSelectList.xtype, |
||||
element: this, |
||||
itemsCreator: BI.bind(this._itemsCreator, this), |
||||
valueFormatter: BI.bind(this._valueFormatter, this), |
||||
itemsCreator: bind(this._itemsCreator, this), |
||||
valueFormatter: bind(this._valueFormatter, this), |
||||
width: o.width, |
||||
height: o.height |
||||
height: o.height, |
||||
}); |
||||
|
||||
this.list.on(BI.MultiSelectList.EVENT_CHANGE, function () { |
||||
self.fireEvent(BI.AllValueChooserPane.EVENT_CHANGE); |
||||
this.list.on(MultiSelectList.EVENT_CHANGE, () => { |
||||
this.fireEvent(AllValueChooserPane.EVENT_CHANGE); |
||||
}); |
||||
|
||||
if (BI.isNotNull(o.items)) { |
||||
if (isNotNull(o.items)) { |
||||
this.items = o.items; |
||||
this.list.populate(); |
||||
} |
||||
}, |
||||
} |
||||
|
||||
setValue: function (v) { |
||||
setValue(v) { |
||||
this.list.setValue({ |
||||
type: BI.Selection.Multi, |
||||
value: v || [] |
||||
type: Selection.Multi, |
||||
value: v || [], |
||||
}); |
||||
}, |
||||
} |
||||
|
||||
getValue: function () { |
||||
var val = this.list.getValue() || {}; |
||||
if (val.type === BI.Selection.Multi) { |
||||
getValue() { |
||||
const val = this.list.getValue() || {}; |
||||
if (val.type === Selection.Multi) { |
||||
return val.value || []; |
||||
} |
||||
|
||||
return BI.difference(BI.map(this.items, "value"), val.value || []); |
||||
}, |
||||
return difference(map(this.items, "value"), val.value || []); |
||||
} |
||||
|
||||
populate: function (items) { |
||||
populate(items) { |
||||
// 直接用combo的populate不会作用到AbstractValueChooser上
|
||||
if (BI.isNotNull(items)) { |
||||
if (isNotNull(items)) { |
||||
this.items = items; |
||||
} |
||||
this.list.populate(); |
||||
} |
||||
}); |
||||
BI.AllValueChooserPane.EVENT_CHANGE = "EVENT_CHANGE"; |
||||
BI.shortcut("bi.all_value_chooser_pane", BI.AllValueChooserPane); |
||||
} |
||||
|
@ -1,66 +1,72 @@
|
||||
BI.AllValueMultiTextValueCombo = BI.inherit(BI.Widget, { |
||||
import { shortcut, Widget, Selection, each, contains } from "@/core"; |
||||
import { SearchMultiTextValueCombo } from "@/widget"; |
||||
|
||||
props: { |
||||
baseCls: "bi-all-value-multi-text-value-combo", |
||||
width: 200, |
||||
height: 24, |
||||
items: [] |
||||
}, |
||||
@shortcut() |
||||
export class AllValueMultiTextValueCombo extends Widget { |
||||
static xtype = "bi.all_value_multi_text_value_combo"; |
||||
|
||||
render: function () { |
||||
var self = this, o = this.options; |
||||
var value = this._digestValue(o.value); |
||||
props = { baseCls: "bi-all-value-multi-text-value-combo", width: 200, height: 24, items: [] }; |
||||
|
||||
static EVENT_CONFIRM = "EVENT_CONFIRM"; |
||||
|
||||
render() { |
||||
const self = this, |
||||
o = this.options; |
||||
const value = this._digestValue(o.value); |
||||
|
||||
return { |
||||
type: "bi.search_multi_text_value_combo", |
||||
simple: o.simple, |
||||
text: o.text, |
||||
height: o.height, |
||||
items: o.items, |
||||
value: value, |
||||
value, |
||||
numOfPage: 100, |
||||
valueFormatter: o.valueFormatter, |
||||
warningTitle: o.warningTitle, |
||||
listeners: [{ |
||||
eventName: BI.SearchMultiTextValueCombo.EVENT_CONFIRM, |
||||
action: function () { |
||||
self.fireEvent(BI.AllValueMultiTextValueCombo.EVENT_CONFIRM); |
||||
listeners: [ |
||||
{ |
||||
eventName: SearchMultiTextValueCombo.EVENT_CONFIRM, |
||||
action () { |
||||
self.fireEvent(AllValueMultiTextValueCombo.EVENT_CONFIRM); |
||||
}, |
||||
} |
||||
}], |
||||
ref: function () { |
||||
], |
||||
ref () { |
||||
self.combo = this; |
||||
} |
||||
}, |
||||
}; |
||||
}, |
||||
} |
||||
|
||||
setValue: function (v) { |
||||
var value = this._digestValue(v); |
||||
setValue(v) { |
||||
const value = this._digestValue(v); |
||||
this.combo.setValue(value); |
||||
}, |
||||
} |
||||
|
||||
getValue: function () { |
||||
var obj = this.combo.getValue() || {}; |
||||
getValue() { |
||||
const obj = this.combo.getValue() || {}; |
||||
obj.value = obj.value || []; |
||||
if(obj.type === BI.Selection.All) { |
||||
var values = []; |
||||
BI.each(this.options.items, function (idx, item) { |
||||
!BI.contains(obj.value, item.value) && values.push(item.value); |
||||
if (obj.type === Selection.All) { |
||||
const values = []; |
||||
each(this.options.items, (idx, item) => { |
||||
!contains(obj.value, item.value) && values.push(item.value); |
||||
}); |
||||
|
||||
return values; |
||||
} |
||||
|
||||
return obj.value || []; |
||||
}, |
||||
} |
||||
|
||||
populate: function (items) { |
||||
populate(items) { |
||||
this.options.items = items; |
||||
this.combo.populate.apply(this.combo, arguments); |
||||
}, |
||||
this.combo.populate(...arguments); |
||||
} |
||||
|
||||
_digestValue: function (v) { |
||||
_digestValue(v) { |
||||
return { |
||||
type: BI.Selection.Multi, |
||||
value: v || [] |
||||
type: Selection.Multi, |
||||
value: v || [], |
||||
}; |
||||
} |
||||
}); |
||||
BI.AllValueMultiTextValueCombo.EVENT_CONFIRM = "EVENT_CONFIRM"; |
||||
BI.shortcut("bi.all_value_multi_text_value_combo", BI.AllValueMultiTextValueCombo); |
||||
} |
||||
|
@ -1,98 +1,111 @@
|
||||
/** |
||||
* @author windy |
||||
* @version 2.0 |
||||
* Created by windy on 2022/1/11 |
||||
*/ |
||||
BI.FormField = BI.inherit(BI.Widget, { |
||||
|
||||
props: { |
||||
import { shortcut, Widget, extend, concat, isKey, VerticalAlign } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class FormField extends Widget { |
||||
static xtype = "bi.form_field"; |
||||
|
||||
props = { |
||||
baseCls: "bi-form-field", |
||||
label: "", |
||||
el: {}, |
||||
headerCls: "", |
||||
labelAlign: "right", // 文字默认右对齐
|
||||
validate: function () { |
||||
validate () { |
||||
return true; |
||||
} // 默认返回true
|
||||
}, |
||||
}, // 默认返回true
|
||||
} |
||||
|
||||
render: function () { |
||||
var self = this, o = this.options; |
||||
render () { |
||||
const self = this, |
||||
o = this.options; |
||||
|
||||
var field = { |
||||
const field = { |
||||
type: "bi.absolute", |
||||
items: [{ |
||||
el: BI.extend({}, o.el, { |
||||
ref: function (_ref) { |
||||
self.field = _ref; |
||||
o.el.ref && o.el.ref.call(this, _ref); |
||||
}, |
||||
height: o.el.height || 28, |
||||
listeners: BI.concat(o.el.listeners, [{ |
||||
eventName: "EVENT_CHANGE", |
||||
action: function () { |
||||
self.fireEvent("EVENT_CHANGE"); |
||||
} |
||||
}, { |
||||
eventName: "EVENT_CONFIRM", |
||||
action: function () { |
||||
self.fireEvent("EVENT_CONFIRM"); |
||||
} |
||||
}]) |
||||
}), |
||||
left: 0, |
||||
bottom: 0, |
||||
right: 0, |
||||
top: 0 |
||||
}, { |
||||
el: { |
||||
type: "bi.label", |
||||
cls: "error-tip bi-error", |
||||
ref: function (_ref) { |
||||
self.error = _ref; |
||||
}, |
||||
invisible: true |
||||
items: [ |
||||
{ |
||||
el: extend({}, o.el, { |
||||
ref (_ref) { |
||||
self.field = _ref; |
||||
o.el.ref && o.el.ref.call(this, _ref); |
||||
}, |
||||
height: o.el.height || 28, |
||||
listeners: concat(o.el.listeners, [ |
||||
{ |
||||
eventName: "EVENT_CHANGE", |
||||
action () { |
||||
self.fireEvent("EVENT_CHANGE"); |
||||
}, |
||||
}, |
||||
{ |
||||
eventName: "EVENT_CONFIRM", |
||||
action () { |
||||
self.fireEvent("EVENT_CONFIRM"); |
||||
}, |
||||
} |
||||
]), |
||||
}), |
||||
left: 0, |
||||
bottom: 0, |
||||
right: 0, |
||||
top: 0, |
||||
}, |
||||
bottom: -20, |
||||
left: 0, |
||||
right: 0, |
||||
height: 20 |
||||
}] |
||||
{ |
||||
el: { |
||||
type: "bi.label", |
||||
cls: "error-tip bi-error", |
||||
ref (_ref) { |
||||
self.error = _ref; |
||||
}, |
||||
invisible: true, |
||||
}, |
||||
bottom: -20, |
||||
left: 0, |
||||
right: 0, |
||||
height: 20, |
||||
} |
||||
], |
||||
}; |
||||
|
||||
return { |
||||
type: "bi.vertical_adapt", |
||||
columnSize: ["auto", "fill"], |
||||
verticalAlign: BI.VerticalAlign.Stretch, |
||||
items: BI.isKey(o.label) ? [{ |
||||
el: { |
||||
type: "bi.label", |
||||
textAlign: o.labelAlign, |
||||
text: o.label, |
||||
width: o.labelWidth, |
||||
cls: o.headerCls, |
||||
rgap: 20 // 表单文字与右侧输入间距均为20px
|
||||
} |
||||
}, field] : [field] |
||||
verticalAlign: VerticalAlign.Stretch, |
||||
items: isKey(o.label) |
||||
? [ |
||||
{ |
||||
el: { |
||||
type: "bi.label", |
||||
textAlign: o.labelAlign, |
||||
text: o.label, |
||||
width: o.labelWidth, |
||||
cls: o.headerCls, |
||||
rgap: 20, // 表单文字与右侧输入间距均为20px
|
||||
}, |
||||
}, |
||||
field |
||||
] |
||||
: [field], |
||||
}; |
||||
}, |
||||
} |
||||
|
||||
getValue: function () { |
||||
getValue () { |
||||
return this.field.getValue(); |
||||
}, |
||||
} |
||||
|
||||
validate: function () { |
||||
var isValid = this.validateWithNoTip(); |
||||
!isValid && this.error.setText(this.options.tip(this.field.getValue(), this.field)); |
||||
validate () { |
||||
const isValid = this.validateWithNoTip(); |
||||
!isValid && |
||||
this.error.setText( |
||||
this.options.tip(this.field.getValue(), this.field) |
||||
); |
||||
this.error.setVisible(!isValid); |
||||
this.field.element[isValid ? "removeClass" : "addClass"]("bi-error"); |
||||
|
||||
return isValid; |
||||
}, |
||||
} |
||||
|
||||
validateWithNoTip: function () { |
||||
validateWithNoTip () { |
||||
return this.options.validate(this.field.getValue(), this.field); |
||||
} |
||||
}); |
||||
|
||||
BI.shortcut("bi.form_field", BI.FormField); |
||||
} |
||||
|
@ -0,0 +1,2 @@
|
||||
export { Form } from "./form"; |
||||
export { FormField } from "./form.field"; |
@ -0,0 +1,15 @@
|
||||
import * as allvaluechooser from "./allvaluechooser"; |
||||
import * as form from "./form"; |
||||
import { AllValueMultiTextValueCombo } from "./allvaluemultitextvaluecombo/allvalue.multitextvalue.combo"; |
||||
|
||||
Object.assign(BI, { |
||||
...allvaluechooser, |
||||
...form, |
||||
AllValueMultiTextValueCombo, |
||||
}); |
||||
|
||||
export * from "./allvaluechooser"; |
||||
export * from "./form"; |
||||
export { |
||||
AllValueMultiTextValueCombo |
||||
}; |
Loading…
Reference in new issue