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