Browse Source

KERNEL-14116 refactor: component/allvaluechooser、allvaluemultitextvaluecombo、form

es6
Zhenfei.Li 1 year ago
parent
commit
6b225705fc
  1. 125
      src/component/allvaluechooser/abstract.allvaluechooser.js
  2. 92
      src/component/allvaluechooser/combo.allvaluechooser.js
  3. 3
      src/component/allvaluechooser/index.js
  4. 78
      src/component/allvaluechooser/pane.allvaluechooser.js
  5. 82
      src/component/allvaluemultitextvaluecombo/allvalue.multitextvalue.combo.js
  6. 155
      src/component/form/form.field.js
  7. 105
      src/component/form/form.js
  8. 2
      src/component/form/index.js
  9. 15
      src/component/index.js

125
src/component/allvaluechooser/abstract.allvaluechooser.js

@ -1,61 +1,74 @@
/**
* 简单的复选下拉框控件, 适用于数据量少的情况 与valuechooser的区别是allvaluechooser setValue和getValue返回的是所有值
* 封装了字段处理逻辑
*
* Created by GUY on 2015/10/29.
* @class BI.AbstractAllValueChooser
* @extends BI.Widget
*/
BI.AbstractAllValueChooser = BI.inherit(BI.Widget, {
import {
shortcut,
Widget,
extend,
emptyFn,
isNotNull,
some,
isNotEmptyArray,
each,
Func,
uniq,
makeObject,
filter,
difference,
map,
Selection
} from "@/core";
import { MultiSelectCombo } from "@/widget";
_const: {
perPage: 100
},
@shortcut()
export class AbstractAllValueChooser extends Widget {
_const = { perPage: 100 };
_defaultConfig: function () {
return BI.extend(BI.AbstractAllValueChooser.superclass._defaultConfig.apply(this, arguments), {
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
width: 200,
height: 30,
items: null,
itemsCreator: BI.emptyFn,
cache: true
itemsCreator: emptyFn,
cache: true,
});
},
}
_valueFormatter: function (v) {
var text = v;
_valueFormatter(v) {
let text = v;
if (this.options.valueFormatter) {
return this.options.valueFormatter(v);
}
if (BI.isNotNull(this.items)) {
BI.some(this.items, function (i, item) {
if (isNotNull(this.items)) {
some(this.items, (i, item) => {
// 把value都换成字符串
// 需要考虑到value也可能是数字
if (item.value === v || item.value + "" === v) {
if (item.value === v || `${item.value}` === v) {
text = item.text;
return true;
}
});
}
return text;
},
}
_getItemsByTimes: function (items, times) {
var res = [];
for (var i = (times - 1) * this._const.perPage; items[i] && i < times * this._const.perPage; i++) {
_getItemsByTimes(items, times) {
const res = [];
for (let i = (times - 1) * this._const.perPage; items[i] && i < times * this._const.perPage; i++) {
res.push(items[i]);
}
return res;
},
}
_hasNextByTimes: function (items, times) {
_hasNextByTimes(items, times) {
return times * this._const.perPage < items.length;
},
}
_itemsCreator: function (options, callback) {
var self = this, o = this.options;
_itemsCreator(options, callback) {
const self = this,
o = this.options;
if (!o.cache || !this.items) {
o.itemsCreator({}, function (items) {
o.itemsCreator({}, items => {
self.items = items;
call(items);
});
@ -64,54 +77,56 @@ BI.AbstractAllValueChooser = BI.inherit(BI.Widget, {
}
function call(items) {
var keywords = (options.keywords || []).slice();
const keywords = (options.keywords || []).slice();
if (options.keyword) {
keywords.push(options.keyword);
}
var resultItems = items;
if (BI.isNotEmptyArray(keywords)) {
let resultItems = items;
if (isNotEmptyArray(keywords)) {
resultItems = [];
BI.each(keywords, function (i, kw) {
var search = BI.Func.getSearchResult(items, kw);
each(keywords, (i, kw) => {
const search = Func.getSearchResult(items, kw);
resultItems = resultItems.concat(search.match).concat(search.find);
});
resultItems = BI.uniq(resultItems);
resultItems = uniq(resultItems);
}
if (options.selectedValues) {// 过滤
var filter = BI.makeObject(options.selectedValues, true);
resultItems = BI.filter(resultItems, function (i, ob) {
return !filter[ob.value];
});
if (options.selectedValues) {
// 过滤
const values = makeObject(options.selectedValues, true);
resultItems = filter(resultItems, (i, ob) => !values[ob.value]);
}
if (options.type === BI.MultiSelectCombo.REQ_GET_ALL_DATA) {
if (options.type === MultiSelectCombo.REQ_GET_ALL_DATA) {
callback({
items: resultItems
items: resultItems,
});
return;
}
if (options.type === BI.MultiSelectCombo.REQ_GET_DATA_LENGTH) {
if (options.type === MultiSelectCombo.REQ_GET_DATA_LENGTH) {
callback({ count: resultItems.length });
return;
}
callback({
items: self._getItemsByTimes(resultItems, options.times),
hasNext: self._hasNextByTimes(resultItems, options.times)
hasNext: self._hasNextByTimes(resultItems, options.times),
});
}
},
}
_assertValue: function (v) {
_assertValue(v) {
v = v || {};
var value = v;
if (BI.isNotNull(this.items)) {
var isAllSelect = BI.difference(BI.map(this.items, "value"), v.value).length === 0;
let value = v;
if (isNotNull(this.items)) {
const isAllSelect = difference(map(this.items, "value"), v.value).length === 0;
if (isAllSelect) {
value = {
type: BI.Selection.All,
type: Selection.All,
value: [],
};
}
}
return value;
},
});
}
}

92
src/component/allvaluechooser/combo.allvaluechooser.js

@ -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);
}

3
src/component/allvaluechooser/index.js

@ -0,0 +1,3 @@
export { AbstractAllValueChooser } from "./abstract.allvaluechooser";
export { AllValueChooserCombo } from "./combo.allvaluechooser";
export { AllValueChooserPane } from "./pane.allvaluechooser";

78
src/component/allvaluechooser/pane.allvaluechooser.js

@ -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);
}

82
src/component/allvaluemultitextvaluecombo/allvalue.multitextvalue.combo.js

@ -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);
}

155
src/component/form/form.field.js

@ -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);
}

105
src/component/form/form.js

@ -1,45 +1,39 @@
/**
* @author windy
* @version 2.0
* Created by windy on 2022/1/11
*/
BI.Form = BI.inherit(BI.Widget, {
import { shortcut, Widget, map, some, each } from "@/core";
import { ButtonGroup } from "@/base";
props: {
@shortcut()
export class Form extends Widget {
static xtype = "bi.custom_form";
props = {
baseCls: "bi-form",
labelAlign: "right",
layout: {
type: "bi.vertical",
vgap: 20
},
items: [{
validate: BI.emptyFn,
tip: BI.emptyFn,
label: "",
el: {}
}],
layout: { type: "bi.vertical", vgap: 20 },
items: [{ label: "", el: {} }],
labelWidth: "",
headerCls: "", // 左侧文字样式
},
headerCls: "",
};
static EVENT_CHANGE = "EVENT_CHANGE";
render: function () {
var self = this, o = this.options;
render() {
const o = this.options;
return {
type: "bi.button_group",
type: ButtonGroup.xtype,
items: this._createItems(),
layouts: [o.layout],
ref: function (ref) {
self.group = ref;
}
ref: _ref => {
this.group = _ref;
},
};
},
}
_createItems: function () {
var self = this;
var o = this.options;
_createItems() {
const self = this;
const o = this.options;
return BI.map(o.items, function (idx, item) {
return map(o.items, (idx, item) => {
return {
type: "bi.form_field",
height: item.el.height || 28,
@ -50,46 +44,43 @@
label: item.label,
tip: item.tip,
validate: item.validate,
listeners: [{
eventName: "EVENT_CHANGE",
action: function () {
self.fireEvent(BI.Form.EVENT_CHANGE, this.validate());
listeners: [
{
eventName: "EVENT_CHANGE",
action () {
self.fireEvent(Form.EVENT_CHANGE, this.validate());
},
}
}]
],
};
});
},
}
isAllValid: function () {
return !BI.some(this.validateWithNoTip(), function (idx, v) {
return !v;
});
},
isAllValid() {
return !some(this.validateWithNoTip(), (idx, v) => !v);
}
validateWithNoTip: function () {
var validInfo = [];
BI.each(this.group.getAllButtons(), function (idx, button) {
validateWithNoTip() {
const validInfo = [];
each(this.group.getAllButtons(), (idx, button) => {
validInfo.push(button.validateWithNoTip());
});
return validInfo;
},
}
validate: function () {
var validInfo = [];
BI.each(this.group.getAllButtons(), function (idx, button) {
validate() {
const validInfo = [];
each(this.group.getAllButtons(), (idx, button) => {
validInfo.push(button.validate());
});
return validInfo;
},
getValue: function () {
return !this.isAllValid() ? null : BI.map(this.group.getAllButtons(), function (idx, button) {
return button.getValue();
});
}
});
BI.Form.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.custom_form", BI.Form);
getValue() {
return !this.isAllValid()
? null
: map(this.group.getAllButtons(), (idx, button) => button.getValue());
}
}

2
src/component/form/index.js

@ -0,0 +1,2 @@
export { Form } from "./form";
export { FormField } from "./form.field";

15
src/component/index.js

@ -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…
Cancel
Save