Browse Source

Merge branch 'es6' of ssh://code.fineres.com:7999/~treecat/fineui into es6

# Conflicts:
#	src/case/button/index.js
#	src/case/button/node/node.first.plus.js
#	src/case/button/node/node.last.plus.js
#	src/case/button/node/node.mid.plus.js
#	src/case/button/node/treenode.js
#	src/case/button/treeitem/treeitem.js
es6
Treecat 2 years ago
parent
commit
072054c7cd
  1. 58
      src/case/button/index.js
  2. 103
      src/case/button/node/node.first.plus.js
  3. 102
      src/case/button/node/node.last.plus.js
  4. 103
      src/case/button/node/node.mid.plus.js
  5. 141
      src/case/button/node/treenode.js
  6. 67
      src/case/button/treeitem/treeitem.js
  7. 125
      src/component/allvaluechooser/abstract.allvaluechooser.js
  8. 92
      src/component/allvaluechooser/combo.allvaluechooser.js
  9. 3
      src/component/allvaluechooser/index.js
  10. 78
      src/component/allvaluechooser/pane.allvaluechooser.js
  11. 82
      src/component/allvaluemultitextvaluecombo/allvalue.multitextvalue.combo.js
  12. 155
      src/component/form/form.field.js
  13. 105
      src/component/form/form.js
  14. 2
      src/component/form/index.js
  15. 15
      src/component/index.js
  16. 16
      src/widget/index.js
  17. 83
      src/widget/multilayerselecttree/__test__/multilayerselecttree.combo.test.js
  18. 2
      src/widget/multilayerselecttree/index.js
  19. 420
      src/widget/multilayerselecttree/multilayerselecttree.combo.js
  20. 151
      src/widget/multilayerselecttree/multilayerselecttree.insert.search.pane.js
  21. 234
      src/widget/multilayerselecttree/multilayerselecttree.leveltree.js
  22. 86
      src/widget/multilayerselecttree/multilayerselecttree.popup.js
  23. 334
      src/widget/multilayerselecttree/multilayerselecttree.trigger.js
  24. 99
      src/widget/multilayerselecttree/node/node.first.plus.js
  25. 88
      src/widget/multilayerselecttree/node/node.last.plus.js
  26. 88
      src/widget/multilayerselecttree/node/node.mid.plus.js
  27. 92
      src/widget/multilayerselecttree/node/node.plus.js
  28. 2
      src/widget/multilayersingletree/index.js
  29. 114
      src/widget/multilayersingletree/multilayersingletree.combo.js
  30. 41
      src/widget/multilayersingletree/multilayersingletree.insert.search.pane.js
  31. 46
      src/widget/multilayersingletree/multilayersingletree.leveltree.js
  32. 27
      src/widget/multilayersingletree/multilayersingletree.popup.js
  33. 76
      src/widget/multilayersingletree/multilayersingletree.trigger.js
  34. 4
      src/widget/multilayersingletree/node/index.js
  35. 104
      src/widget/multilayersingletree/node/node.first.plus.js
  36. 103
      src/widget/multilayersingletree/node/node.last.plus.js
  37. 103
      src/widget/multilayersingletree/node/node.mid.plus.js
  38. 120
      src/widget/multilayersingletree/node/node.plus.js
  39. 3
      src/widget/multilayersingletree/treeitem/index.js
  40. 87
      src/widget/multilayersingletree/treeitem/item.first.treeleaf.js
  41. 87
      src/widget/multilayersingletree/treeitem/item.last.treeleaf.js
  42. 87
      src/widget/multilayersingletree/treeitem/item.mid.treeleaf.js
  43. 6
      src/widget/multiselect/index.js
  44. 5
      src/widget/searchmultitextvaluecombo/index.js
  45. 648
      src/widget/searchmultitextvaluecombo/multitextvalue.combo.search.js
  46. 189
      src/widget/searchmultitextvaluecombo/multitextvalue.combo.trigger.search.js
  47. 238
      src/widget/searchmultitextvaluecombo/multitextvalue.loader.search.js
  48. 112
      src/widget/searchmultitextvaluecombo/multitextvalue.popup.view.search.js
  49. 200
      src/widget/searchmultitextvaluecombo/trigger/searcher.multitextvalue.js
  50. 109
      src/widget/selecttree/nodes/node.first.plus.js
  51. 109
      src/widget/selecttree/nodes/node.last.plus.js
  52. 109
      src/widget/selecttree/nodes/node.mid.plus.js
  53. 109
      src/widget/selecttree/nodes/node.plus.js
  54. 2
      src/widget/singletree/singletree.popup.js
  55. 293
      src/widget/yearquarter/card.dynamic.yearquarter.js
  56. 260
      src/widget/yearquarter/card.static.yearquarter.js
  57. 345
      src/widget/yearquarter/combo.yearquarter.js
  58. 6
      src/widget/yearquarter/index.js
  59. 437
      src/widget/yearquarter/popup.yearquarter.js
  60. 461
      src/widget/yearquarter/trigger.yearquarter.js
  61. 315
      src/widget/yearquarterinterval/yearquarterinterval.js

58
src/case/button/index.js

@ -1,31 +1,27 @@
export { MultiSelectItem } from "./item.multiselect"; export { MultiSelectItem } from "./item.multiselect";
export { SingleSelectIconTextItem } from "./item.singleselect.icontext"; export { SingleSelectIconTextItem } from "./item.singleselect.icontext";
export { SingleSelectItem } from "./item.singleselect"; export { SingleSelectItem } from "./item.singleselect";
export { SingleSelectRadioItem } from "./item.singleselect.radio"; export { SingleSelectRadioItem } from "./item.singleselect.radio";
export { Switch } from "./switch"; export { Switch } from "./switch";
export { IconChangeButton } from "./icon/icon.change"; export { IconChangeButton } from "./icon/icon.change";
export { TriggerIconButton } from "./icon/icon.trigger"; export { TriggerIconButton } from "./icon/icon.trigger";
export { HalfIconButton } from "./icon/iconhalf/icon.half.image"; export { HalfIconButton } from "./icon/iconhalf/icon.half.image";
export { HalfButton } from "./icon/iconhalf/icon.half"; export { HalfButton } from "./icon/iconhalf/icon.half";
export { ArrowNode } from "./node/node.arrow"; export { ArrowNode } from "./node/node.arrow";
export { FirstPlusGroupNode } from "./node/node.first.plus"; export { IconArrowNode } from "./node/node.icon.arrow";
export { IconArrowNode } from "./node/node.icon.arrow"; export { MultiLayerIconArrowNode } from "./node/node.multilayer.icon.arrow";
export { LastPlusGroupNode } from "./node/node.last.plus"; export { PlusGroupNode } from "./node/node.plus";
export { MidPlusGroupNode } from "./node/node.mid.plus"; export { TreeNodeSwitcher } from "./node/siwtcher.tree.node";
export { MultiLayerIconArrowNode } from "./node/node.multilayer.icon.arrow"; export { BasicTreeNode } from "./node/treenode";
export { PlusGroupNode } from "./node/node.plus";
export { TreeNodeSwitcher } from "./node/siwtcher.tree.node"; export { IconTreeLeafItem } from "./treeitem/item.icon.treeleaf";
export { BasicTreeNode } from "./node/treenode"; export { MultiLayerIconTreeLeafItem } from "./treeitem/item.multilayer.icon.treeleaf";
export { IconTreeLeafItem } from "./treeitem/item.icon.treeleaf";
export { MultiLayerIconTreeLeafItem } from "./treeitem/item.multilayer.icon.treeleaf"; export {
BasicTreeItem, FirstTreeLeafItem, MidTreeLeafItem, LastTreeLeafItem, RootTreeLeafItem
export { } from "./treeitem/treeitem";
BasicTreeItem,
FirstTreeLeafItem, export * from "./node/treenode";
MidTreeLeafItem,
LastTreeLeafItem,
RootTreeLeafItem
} from "./treeitem/treeitem";

103
src/case/button/node/node.first.plus.js

@ -1,103 +0,0 @@
import { FirstTreeNodeCheckbox } from "../../checkbox";
import { Label, NodeButton } from "@/base";
import { shortcut, extend, createWidget, Controller } from "@/core";
/**
* 加号表示的组节点
* Created by GUY on 2015/9/6.
* @class FirstPlusGroupNode
* @extends NodeButton
*/
@shortcut()
export class FirstPlusGroupNode extends NodeButton {
static xtype = "bi.first_plus_group_node";
_defaultConfig() {
const conf = super._defaultConfig(...arguments);
return extend(conf, {
baseCls: `${conf.baseCls || ""} bi-first-plus-group-node bi-list-item`,
logic: {
dynamic: false,
},
id: "",
pId: "",
open: false,
height: 24,
});
}
_init() {
super._init.apply(this, arguments);
const o = this.options;
this.checkbox = createWidget({
type: FirstTreeNodeCheckbox.xtype,
stopPropagation: true,
iconHeight: o.height,
iconWidth: o.height,
});
this.text = createWidget({
type: Label.xtype,
textAlign: "left",
whiteSpace: "nowrap",
textHeight: o.height,
height: o.height,
hgap: o.hgap,
text: o.text,
value: o.value,
py: o.py,
keyword: o.keyword,
});
this.checkbox.on(Controller.EVENT_CHANGE, function (type) {
if (type === BI.Events.CLICK) {
if (this.isSelected()) {
self.triggerExpand();
} else {
self.triggerCollapse();
}
}
});
const type = BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left);
const items = BI.LogicFactory.createLogicItemsByDirection(
BI.Direction.Left,
{
width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
el: this.checkbox,
},
this.text
);
BI.createWidget(
BI.extend(
{
element: this,
},
BI.LogicFactory.createLogic(
type,
BI.extend(o.logic, {
items,
})
)
)
);
}
doRedMark() {
this.text.doRedMark(...arguments);
}
unRedMark() {
this.text.unRedMark(...arguments);
}
doClick() {
super.doClick(...arguments);
this.checkbox.setSelected(this.isSelected());
}
setOpened(v) {
super.setOpened(...arguments);
if (BI.isNotNull(this.checkbox)) {
this.checkbox.setSelected(v);
}
}
}

102
src/case/button/node/node.last.plus.js

@ -1,102 +0,0 @@
import { LastTreeNodeCheckbox } from "../../checkbox";
import { Label, NodeButton } from "@/base";
import { shortcut, extend, createWidget, isNotNull, Controller } from "@/core";
/**
* 加号表示的组节点
* Created by GUY on 2015/9/6.
* @class LastPlusGroupNode
* @extends NodeButton
*/
@shortcut()
export class LastPlusGroupNode extends NodeButton {
static xtype = "bi.last_plus_group_node";
_defaultConfig() {
const conf = super._defaultConfig(...arguments);
return extend(conf, {
baseCls: `${conf.baseCls || ""} bi-last-plus-group-node bi-list-item`,
logic: {
dynamic: false,
},
id: "",
pId: "",
open: false,
height: 24,
});
}
_init() {
BI.LastPlusGroupNode.superclass._init.apply(this, arguments);
const o = this.options;
this.checkbox = createWidget({
type: LastTreeNodeCheckbox.xtype,
stopPropagation: true,
iconHeight: o.height,
iconWidth: o.height,
});
this.text = createWidget({
type: Label.xtype,
textAlign: "left",
whiteSpace: "nowrap",
textHeight: o.height,
height: o.height,
hgap: o.hgap,
text: o.text,
value: o.value,
py: o.py,
keyword: o.keyword,
});
this.checkbox.on(Controller.EVENT_CHANGE, (type) => {
if (type === BI.Events.CLICK) {
if (this.checkbox.isSelected()) {
this.triggerExpand();
} else {
this.triggerCollapse();
}
}
});
const type = BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left);
const items = BI.LogicFactory.createLogicItemsByDirection(
BI.Direction.Left,
{
width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
el: this.checkbox,
},
this.text
);
createWidget(
extend(
{
element: this,
},
BI.LogicFactory.createLogic(
type,
extend(o.logic, {
items,
})
)
)
);
}
doRedMark() {
this.text.doRedMark(...arguments);
}
unRedMark() {
this.text.unRedMark(...arguments);
}
doClick() {
super.doClick(...arguments);
this.checkbox.setSelected(this.isSelected());
}
setOpened(v) {
super.setOpened(...arguments);
if (isNotNull(this.checkbox)) {
this.checkbox.setSelected(v);
}
}
}

103
src/case/button/node/node.mid.plus.js

@ -1,103 +0,0 @@
import { MidTreeNodeCheckbox } from "../../checkbox";
import { Label, NodeButton } from "@/base";
import { shortcut, extend, createWidget, Controller } from "@/core";
/**
* 加号表示的组节点
* Created by GUY on 2015/9/6.
* @class BI.MidPlusGroupNode
* @extends BI.NodeButton
*/
@shortcut
export class MidPlusGroupNode extends NodeButton {
static xtype = "bi.mid_plus_group_node";
_defaultConfig() {
const conf = super._defaultConfig(...arguments);
return extend(conf, {
baseCls: `${conf.baseCls || ""} bi-mid-plus-group-node bi-list-item`,
logic: {
dynamic: false,
},
id: "",
pId: "",
open: false,
height: 24,
});
}
_init() {
super._init(...arguments);
const o = this.options;
this.checkbox = createWidget({
type: MidTreeNodeCheckbox.xtype,
stopPropagation: true,
iconHeight: o.height,
iconWidth: o.height,
});
this.text = createWidget({
type: Label.xtype,
textAlign: "left",
whiteSpace: "nowrap",
textHeight: o.height,
height: o.height,
hgap: o.hgap,
text: o.text,
value: o.value,
py: o.py,
keyword: o.keyword,
});
this.checkbox.on(Controller.EVENT_CHANGE, (type) => {
if (type === BI.Events.CLICK) {
if (this.checkbox.isSelected()) {
this.triggerExpand();
} else {
this.triggerCollapse();
}
}
});
const type = BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left);
const items = BI.LogicFactory.createLogicItemsByDirection(
BI.Direction.Left,
{
width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
el: this.checkbox,
},
this.text
);
createWidget(
extend(
{
element: this,
},
BI.LogicFactory.createLogic(
type,
extend(o.logic, {
items,
})
)
)
);
}
doRedMark() {
this.text.doRedMark(...arguments);
}
unRedMark() {
this.text.unRedMark(...arguments);
}
doClick() {
super.doClick(...arguments);
this.checkbox.setSelected(this.isSelected());
}
setOpened(v) {
super.setOpened(...arguments);
if (BI.isNotNull(this.checkbox)) {
this.checkbox.setSelected(v);
}
}
}

141
src/case/button/node/treenode.js

@ -1,5 +1,5 @@
import { Label, NodeButton } from "@/base"; import { IconLabel, Label, NodeButton } from "@/base";
import { shortcut, extend, VerticalAdaptLayout } from "@/core"; import { shortcut, extend, VerticalAdaptLayout, Layout, isKey, compact } from "@/core";
import { TreeNodeSwitcher } from "@/case"; import { TreeNodeSwitcher } from "@/case";
@shortcut() @shortcut()
@ -25,21 +25,41 @@ export class BasicTreeNode extends NodeButton {
} }
render() { render() {
const o = this.options; const {
open,
layer,
height,
hgap,
textHgap,
textVgap,
textLgap,
textRgap,
text,
value,
isFirstNode,
isLastNode,
keyword,
iconWidth,
iconHeight,
iconWrapperWidth,
iconCls,
switcherIcon,
selectable,
} = this.options;
const checkbox = { const checkbox = {
type: TreeNodeSwitcher.xtype, type: TreeNodeSwitcher.xtype,
ref: _ref => { ref: _ref => {
this.switcher = _ref; this.switcher = _ref;
}, },
iconHeight: o.height, iconHeight: height,
iconWidth: o.iconWrapperWidth || o.height, iconWidth: iconWrapperWidth || height,
open: o.open, open,
isFirstNode: o.isFirstNode, isFirstNode,
isLastNode: o.isLastNode, isLastNode,
layer: o.layer, layer,
...o.switcherIcon, ...switcherIcon,
stopPropagation: o.selectable, stopPropagation: selectable,
mounted() { mounted() {
this.setEnable(true); this.setEnable(true);
}, },
@ -47,7 +67,7 @@ export class BasicTreeNode extends NodeButton {
{ {
eventName: "EVENT_CHANGE", eventName: "EVENT_CHANGE",
action: () => { action: () => {
if (!this.isEnabled() || o.selectable) { if (!this.isEnabled() || selectable) {
this.isOpened() ? this.triggerCollapse() : this.triggerExpand(); this.isOpened() ? this.triggerCollapse() : this.triggerExpand();
} }
}, },
@ -55,14 +75,38 @@ export class BasicTreeNode extends NodeButton {
], ],
}; };
// const indent = {
// el: {
// type: Layout.xtype,
// height,
// width: height,
// cls: this.getLineCls(),
// },
// lgap: layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2, // 偏移公式为每一层的偏移量为节点高度的一半
// width: "",
// };
const icon = isKey(iconCls) ? {
el: {
type: IconLabel.xtype,
// iconWidth,
// iconHeight,
cls: iconCls,
},
// width: 24,
} : null;
return { return {
type: VerticalAdaptLayout.xtype, type: VerticalAdaptLayout.xtype,
columnSize: [o.iconWrapperWidth || o.height, "fill"], items: compact([
items: [
{ {
el: checkbox, el: checkbox,
lgap: (o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT) / 2, // 偏移公式为每一层的偏移量为节点高度的一半 lgap: layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2, // 偏移公式为每一层的偏移量为节点高度的一半
width: iconWrapperWidth || height,
}, },
icon,
{ {
el: { el: {
type: Label.xtype, type: Label.xtype,
@ -71,19 +115,19 @@ export class BasicTreeNode extends NodeButton {
}, },
textAlign: "left", textAlign: "left",
whiteSpace: "nowrap", whiteSpace: "nowrap",
textHeight: o.height, textHeight: height,
height: o.height, height,
hgap: o.hgap || o.textHgap, hgap: hgap || textHgap,
vgap: o.textVgap, vgap: textVgap,
lgap: o.textLgap, lgap: textLgap,
rgap: o.textRgap, rgap: textRgap,
text: o.text, text,
value: o.value, value,
keyword: o.keyword, keyword,
py: o.py,
}, },
width: "fill",
} }
], ]),
}; };
} }
@ -111,3 +155,48 @@ export class BasicTreeNode extends NodeButton {
super.setValue(...arguments); super.setValue(...arguments);
} }
} }
@shortcut()
export class FirstPlusGroupNode extends BasicTreeNode {
static xtype = "bi.first_plus_group_node";
_defaultConfig() {
const conf = super._defaultConfig(...arguments);
return extend(conf, {
baseCls: `${conf.baseCls || ""} bi-first-plus-group-node`,
isFirstNode: true,
isLastNode: false,
});
}
}
@shortcut
export class MidPlusGroupNode extends BasicTreeNode {
static xtype = "bi.mid_plus_group_node";
_defaultConfig() {
const conf = super._defaultConfig(...arguments);
return extend(conf, {
baseCls: `${conf.baseCls || ""} bi-mid-plus-group-node`,
isFirstNode: false,
isLastNode: false,
});
}
}
@shortcut()
export class LastPlusGroupNode extends BasicTreeNode {
static xtype = "bi.last_plus_group_node";
_defaultConfig() {
const conf = super._defaultConfig(...arguments);
return extend(conf, {
baseCls: `${conf.baseCls || ""} bi-last-plus-group-node`,
isFirstNode: false,
isLastNode: true,
});
}
}

67
src/case/button/treeitem/treeitem.js

@ -17,8 +17,8 @@ export class BasicTreeItem extends NodeButton {
isFirstNode: false, isFirstNode: false,
isLastNode: false, isLastNode: false,
layer: 0, layer: 0,
iconWidth: 16, iconWidth: null,
iconHeight: 16, iconHeight: null,
iconCls: "", iconCls: "",
}); });
} }
@ -34,6 +34,8 @@ export class BasicTreeItem extends NodeButton {
textRgap, textRgap,
text, text,
value, value,
isFirstNode,
isLastNode,
py, py,
keyword, keyword,
iconWidth, iconWidth,
@ -41,37 +43,34 @@ export class BasicTreeItem extends NodeButton {
iconCls, iconCls,
} = this.options; } = this.options;
const icon = isKey(iconCls)
? { const indent = {
el: { el: {
type: IconLabel.xtype, type: Layout.xtype,
iconWidth, height,
iconHeight, width: height,
cls: iconCls, cls: this.getLineCls(),
}, },
width: 24, lgap: layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2, // 偏移公式为每一层的偏移量为节点高度的一半
} width: "",
: null; };
const indent =
layer === 0 const icon = isKey(iconCls) ? {
? null el: {
: { type: IconLabel.xtype,
el: { // iconWidth,
type: Layout.xtype, // iconHeight,
height, cls: iconCls,
width: height, },
cls: this.getLineCls(), // width: 24,
}, } : null;
lgap: (layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT) / 2, // 偏移公式为每一层的偏移量为节点高度的一半
width: "",
};
return { return {
type: VerticalAdaptLayout.xtype, type: VerticalAdaptLayout.xtype,
items: compact([ items: compact([
icon,
indent, indent,
icon,
{ {
el: { el: {
type: Label.xtype, type: Label.xtype,
@ -102,17 +101,11 @@ export class BasicTreeItem extends NodeButton {
if (options.layer === 0 && options.isFirstNode && options.isLastNode) { if (options.layer === 0 && options.isFirstNode && options.isLastNode) {
return ""; return "";
} else if (options.layer === 0 && options.isFirstNode) { } else if (options.layer === 0 && options.isFirstNode) {
return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "tree-first-solid-line-conn-background" : "first-line-conn-background";
? "tree-first-solid-line-conn-background"
: "first-line-conn-background";
} else if (options.isLastNode) { } else if (options.isLastNode) {
return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "tree-last-solid-line-conn-background" : "last-line-conn-background";
? "tree-last-solid-line-conn-background"
: "last-line-conn-background";
} else { } else {
return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "tree-mid-solid-line-conn-background" : "mid-line-conn-background";
? "tree-mid-solid-line-conn-background"
: "mid-line-conn-background";
} }
} }

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

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

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

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

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 @@
/** 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);

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: { @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);

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", 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);

105
src/component/form/form.js

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

16
src/widget/index.js

@ -10,6 +10,7 @@ import * as editor from "./editor";
import * as downList from "./downlist"; import * as downList from "./downlist";
import * as singleSliderItem from "./singleslider"; import * as singleSliderItem from "./singleslider";
import * as intervalSliderItem from "./intervalslider"; import * as intervalSliderItem from "./intervalslider";
import * as yearQuarter from "./yearquarter";
import { SelectTreeCombo } from "./selecttree/selecttree.combo"; import { SelectTreeCombo } from "./selecttree/selecttree.combo";
import { SingleTreeCombo } from "./singletree/singletree.combo"; import { SingleTreeCombo } from "./singletree/singletree.combo";
import { MultiTreeCombo } from "./multitree/multi.tree.combo"; import { MultiTreeCombo } from "./multitree/multi.tree.combo";
@ -17,14 +18,17 @@ import { MultiTreeInsertCombo } from "./multitree/multi.tree.insert.combo";
import { MultiTreeListCombo } from "./multitree/multi.tree.list.combo"; import { MultiTreeListCombo } from "./multitree/multi.tree.list.combo";
import { NumberEditor } from "./numbereditor/number.editor"; import { NumberEditor } from "./numbereditor/number.editor";
import { NumberInterval } from "./numberinterval/numberinterval"; import { NumberInterval } from "./numberinterval/numberinterval";
import { YearQuarterInterval } from "./yearquarterinterval/yearquarterinterval";
import * as multiselect from "./multiselect"; import * as multiselect from "./multiselect";
import * as multiselectlist from "./multiselectlist"; import * as multiselectlist from "./multiselectlist";
import * as multilayerselectree from "./multilayerselecttree";
import * as year from "./year"; import * as year from "./year";
import { YearInterval } from "./yearinterval/yearinterval"; import { YearInterval } from "./yearinterval/yearinterval";
import * as singleselect from "./singleselect"; import * as singleselect from "./singleselect";
import * as multilayerdownlist from "./multilayerdownlist"; import * as multilayerdownlist from "./multilayerdownlist";
import * as multilayersingletree from "./multilayersingletree"; import * as multilayersingletree from "./multilayersingletree";
import * as searchmultitextvaluecombo from "./searchmultitextvaluecombo";
Object.assign(BI, { Object.assign(BI, {
Collapse, Collapse,
...calendar, ...calendar,
@ -39,6 +43,7 @@ Object.assign(BI, {
...downList, ...downList,
...singleSliderItem, ...singleSliderItem,
...intervalSliderItem, ...intervalSliderItem,
...yearQuarter,
SelectTreeCombo, SelectTreeCombo,
SingleTreeCombo, SingleTreeCombo,
MultiTreeCombo, MultiTreeCombo,
@ -47,11 +52,14 @@ Object.assign(BI, {
NumberEditor, NumberEditor,
NumberInterval, NumberInterval,
YearInterval, YearInterval,
YearQuarterInterval,
...multiselect, ...multiselect,
...multiselectlist, ...multiselectlist,
...multilayerselectree,
...singleselect, ...singleselect,
...multilayerdownlist, ...multilayerdownlist,
...multilayersingletree, ...multilayersingletree,
...searchmultitextvaluecombo,
}); });
export * from "./date/calendar"; export * from "./date/calendar";
@ -68,9 +76,12 @@ export * from "./downlist";
export * from "./singleslider"; export * from "./singleslider";
export * from "./intervalslider"; export * from "./intervalslider";
export * from "./year"; export * from "./year";
export * from "./multilayersingletree";
export * from "./multilayerselecttree";
export * from "./searchmultitextvaluecombo";
export * from "./singleselect"; export * from "./singleselect";
export * from "./multilayerdownlist"; export * from "./multilayerdownlist";
export * from "./multilayersingletree"; export * from "./yearquarter";
export { export {
Collapse, Collapse,
@ -81,5 +92,6 @@ export {
MultiTreeCombo, MultiTreeCombo,
MultiTreeInsertCombo, MultiTreeInsertCombo,
MultiTreeListCombo, MultiTreeListCombo,
YearInterval YearInterval,
YearQuarterInterval
}; };

83
src/widget/multilayerselecttree/__test__/multilayerselecttree.combo.test.js

@ -4,39 +4,40 @@
* Created by windy on 2019/9/18 * Created by windy on 2019/9/18
*/ */
describe("multilayer_select_tree", function () { describe("multilayer_select_tree", () => {
const items = [
var items = [{id: -1, pId: -2, value: "根目录", text: "根目录"}, { id: -1, pId: -2, value: "根目录", text: "根目录" },
{id: 1, pId: -1, value: "第一级目录1", text: "第一级目录1"}, { id: 1, pId: -1, value: "第一级目录1", text: "第一级目录1" },
{id: 11, pId: 1, value: "第二级文件1", text: "第二级文件1"}, { id: 11, pId: 1, value: "第二级文件1", text: "第二级文件1" },
{id: 12, pId: 1, value: "第二级目录2", text: "第二级目录2"}, { id: 12, pId: 1, value: "第二级目录2", text: "第二级目录2" },
{id: 121, pId: 12, value: "第三级目录1", text: "第三级目录1"}, { id: 121, pId: 12, value: "第三级目录1", text: "第三级目录1" },
{id: 122, pId: 12, value: "第三级文件1", text: "第三级文件1"}, { id: 122, pId: 12, value: "第三级文件1", text: "第三级文件1" },
{id: 1211, pId: 121, value: "第四级目录1", text: "第四级目录1"}, { id: 1211, pId: 121, value: "第四级目录1", text: "第四级目录1" },
{ {
id: 12111, id: 12111,
pId: 1211, pId: 1211,
value: "第五级文件1", value: "第五级文件1",
text: "第五级文件111111111111111111111111111111111111111111111111111111111111111111111111111111111111111" text: "第五级文件111111111111111111111111111111111111111111111111111111111111111111111111111111111111111",
}, },
{id: 2, pId: -1, value: "第一级目录2", text: "第一级目录2"}, { id: 2, pId: -1, value: "第一级目录2", text: "第一级目录2" },
{id: 21, pId: 2, value: "第二级目录3", text: "第二级目录3"}, { id: 21, pId: 2, value: "第二级目录3", text: "第二级目录3" },
{id: 22, pId: 2, value: "第二级文件2", text: "第二级文件2"}, { id: 22, pId: 2, value: "第二级文件2", text: "第二级文件2" },
{id: 211, pId: 21, value: "第三级目录2", text: "第三级目录2"}, { id: 211, pId: 21, value: "第三级目录2", text: "第三级目录2" },
{id: 212, pId: 21, value: "第三级文件2", text: "第三级文件2"}, { id: 212, pId: 21, value: "第三级文件2", text: "第三级文件2" },
{id: 2111, pId: 211, value: "第四级文件1", text: "第四级文件1"}]; { id: 2111, pId: 211, value: "第四级文件1", text: "第四级文件1" }
];
/** /**
* test_author_windy * test_author_windy
**/ **/
it("defaultValue_allowEdit", function () { it("defaultValue_allowEdit", () => {
var tree = BI.Test.createWidget({ const tree = BI.Test.createWidget({
type: "bi.multilayer_select_tree_combo", type: "bi.multilayer_select_tree_combo",
width: 300, width: 300,
height: 24, height: 24,
allowEdit: true, allowEdit: true,
items: BI.deepClone(items), items: BI.deepClone(items),
value: "第一级目录2" value: "第一级目录2",
}); });
expect(tree.getValue()).to.equal("第一级目录2"); expect(tree.getValue()).to.equal("第一级目录2");
tree.destroy(); tree.destroy();
@ -45,13 +46,13 @@ describe("multilayer_select_tree", function () {
/** /**
* test_author_windy * test_author_windy
**/ **/
it("defaultValue_not_allowEdit", function () { it("defaultValue_not_allowEdit", () => {
var tree = BI.Test.createWidget({ const tree = BI.Test.createWidget({
type: "bi.multilayer_select_tree_combo", type: "bi.multilayer_select_tree_combo",
width: 300, width: 300,
height: 24, height: 24,
items: BI.deepClone(items), items: BI.deepClone(items),
value: "第一级目录2" value: "第一级目录2",
}); });
expect(tree.getValue()).to.equal("第一级目录2"); expect(tree.getValue()).to.equal("第一级目录2");
tree.destroy(); tree.destroy();
@ -60,17 +61,17 @@ describe("multilayer_select_tree", function () {
/** /**
* test_author_windy * test_author_windy
**/ **/
it("点选选值", function (done) { it("点选选值", done => {
var tree = BI.Test.createWidget({ const tree = BI.Test.createWidget({
type: "bi.multilayer_select_tree_combo", type: "bi.multilayer_select_tree_combo",
width: 300, width: 300,
height: 24, height: 24,
allowEdit: true, allowEdit: true,
items: BI.deepClone(items), items: BI.deepClone(items),
value: "第一级目录2" value: "第一级目录2",
}); });
tree.element.find(".bi-multi-layer-select-tree-trigger").click(); tree.element.find(".bi-multi-layer-select-tree-trigger").click();
BI.nextTick(function () { BI.nextTick(() => {
tree.element.find(".bi-select-tree-plus-group-node").click(); tree.element.find(".bi-select-tree-plus-group-node").click();
expect(tree.getValue()[0]).to.equal("根目录"); expect(tree.getValue()[0]).to.equal("根目录");
tree.destroy(); tree.destroy();
@ -81,20 +82,20 @@ describe("multilayer_select_tree", function () {
/** /**
* test_author_windy * test_author_windy
**/ **/
it("搜索选值", function (done) { it("搜索选值", done => {
var tree = BI.Test.createWidget({ const tree = BI.Test.createWidget({
type: "bi.multilayer_select_tree_combo", type: "bi.multilayer_select_tree_combo",
width: 300, width: 300,
height: 24, height: 24,
allowEdit: true, allowEdit: true,
items: BI.deepClone(items) items: BI.deepClone(items),
}); });
BI.nextTick(function () { BI.nextTick(() => {
tree.element.find(".bi-multi-layer-select-tree-trigger .tip-text-style").click(); tree.element.find(".bi-multi-layer-select-tree-trigger .tip-text-style").click();
// 这边为啥要加呢,因为input的setValue中有nextTick // 这边为啥要加呢,因为input的setValue中有nextTick
BI.nextTick(function () { BI.nextTick(() => {
BI.Test.triggerKeyDown(tree.element.find(".bi-multi-layer-select-tree-trigger .bi-input"), "2", 50, function () { BI.Test.triggerKeyDown(tree.element.find(".bi-multi-layer-select-tree-trigger .bi-input"), "2", 50, () => {
BI.nextTick(function () { BI.nextTick(() => {
tree.element.find(".bi-select-tree-mid-plus-group-node").click(); tree.element.find(".bi-select-tree-mid-plus-group-node").click();
expect(tree.getValue()[0]).to.equal("第一级目录2"); expect(tree.getValue()[0]).to.equal("第一级目录2");
tree.destroy(); tree.destroy();
@ -108,21 +109,21 @@ describe("multilayer_select_tree", function () {
/** /**
* test_author_windy * test_author_windy
**/ **/
it("新增值", function (done) { it("新增值", done => {
var tree = BI.Test.createWidget({ const tree = BI.Test.createWidget({
type: "bi.multilayer_select_tree_combo", type: "bi.multilayer_select_tree_combo",
width: 300, width: 300,
height: 24, height: 24,
allowEdit: true, allowEdit: true,
allowInsertValue: true, allowInsertValue: true,
items: BI.deepClone(items) items: BI.deepClone(items),
}); });
BI.nextTick(function () { BI.nextTick(() => {
tree.element.find(".bi-multi-layer-select-tree-trigger .tip-text-style").click(); tree.element.find(".bi-multi-layer-select-tree-trigger .tip-text-style").click();
// 这边为啥要加呢,因为input的setValue中有nextTick // 这边为啥要加呢,因为input的setValue中有nextTick
BI.nextTick(function () { BI.nextTick(() => {
BI.Test.triggerKeyDown(tree.element.find(".bi-multi-layer-select-tree-trigger .bi-input"), "z", 50, function () { BI.Test.triggerKeyDown(tree.element.find(".bi-multi-layer-select-tree-trigger .bi-input"), "z", 50, () => {
BI.nextTick(function () { BI.nextTick(() => {
tree.element.find(".bi-text-button:contains(+点击新增\"z\")").click(); tree.element.find(".bi-text-button:contains(+点击新增\"z\")").click();
expect(tree.getValue()[0]).to.equal("z"); expect(tree.getValue()[0]).to.equal("z");
tree.destroy(); tree.destroy();
@ -132,4 +133,4 @@ describe("multilayer_select_tree", function () {
}); });
}); });
}); });
}); });

2
src/widget/multilayerselecttree/index.js

@ -0,0 +1,2 @@
export { MultiLayerSelectTreeCombo } from "./multilayerselecttree.combo";
export { MultiLayerSelectLevelTree } from "./multilayerselecttree.leveltree";

420
src/widget/multilayerselecttree/multilayerselecttree.combo.js

@ -1,17 +1,40 @@
/** import {
* @class BI.MultiLayerSelectTreeCombo shortcut,
* @extends BI.Widget Widget,
*/ extend,
BI.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, { emptyFn,
isKey,
toPix,
AbsoluteLayout,
nextTick,
isArray
} from "@/core";
import { SingleTreeTrigger } from "../singletree/singletree.trigger";
import { MultiLayerSelectTreePopup } from "./multilayerselecttree.popup";
import { Combo } from "@/base";
import { MultiLayerSelectTreeTrigger } from "./multilayerselecttree.trigger";
import { TriggerIconButton } from "@/case";
_defaultConfig: function () { @shortcut()
return BI.extend(BI.MultiLayerSelectTreeCombo.superclass._defaultConfig.apply(this, arguments), { export class MultiLayerSelectTreeCombo extends Widget {
static xtype = "bi.multilayer_select_tree_combo";
static EVENT_SEARCHING = "EVENT_SEARCHING";
static EVENT_BLUR = "EVENT_BLUR";
static EVENT_FOCUS = "EVENT_FOCUS";
static EVENT_CHANGE = "EVENT_CHANGE";
static EVENT_STOP = "EVENT_STOP";
static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
static EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM";
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-multilayer-select-tree-combo", baseCls: "bi-multilayer-select-tree-combo",
isDefaultInit: false, isDefaultInit: false,
height: 24, height: 24,
text: "", text: "",
defaultText: "", defaultText: "",
itemsCreator: BI.emptyFn, itemsCreator: emptyFn,
items: [], items: [],
allowEdit: false, allowEdit: false,
allowSearchValue: false, allowSearchValue: false,
@ -19,268 +42,327 @@ BI.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, {
isNeedAdjustWidth: true, isNeedAdjustWidth: true,
status: "", // "error","warning" status: "", // "error","warning"
}); });
}, }
render: function () { render() {
var self = this, o = this.options; const self = this,
o = this.options;
var cls = (o.simple ? "bi-border-bottom " : "bi-border bi-border-radius ") + (BI.isKey(o.status) ? ("status-" + o.status) : ""); const cls =
(o.simple ? "bi-border-bottom " : "bi-border bi-border-radius ") +
(isKey(o.status) ? `status-${o.status}` : "");
var baseConfig = this._getBaseConfig(); const baseConfig = this._getBaseConfig();
if (o.allowEdit) { if (o.allowEdit) {
return { return {
type: "bi.absolute", type: AbsoluteLayout.xtype,
width: BI.toPix(o.width, 2), width: toPix(o.width, 2),
height: BI.toPix(o.height, 2), height: toPix(o.height, 2),
cls, cls,
items: [ items: [
{ {
el: BI.extend(baseConfig, this._getSearchConfig()), el: extend(baseConfig, this._getSearchConfig()),
top: 0, bottom: 0, right: 0, left: 0 top: 0,
}, { bottom: 0,
el: self._getTriggerIconButton(), right: 0,
top: 0, bottom: 0, right: 0, left: 0,
}, },
] {
el: self._getTriggerIconButton(),
top: 0,
bottom: 0,
right: 0,
}
],
}; };
} }
return BI.extend(baseConfig, { return extend(
el: { baseConfig,
type: "bi.single_tree_trigger", {
ref: function (_ref) { el: {
self.textTrigger = _ref; type: SingleTreeTrigger.xtype,
ref(_ref) {
self.textTrigger = _ref;
},
text: o.text,
defaultText: o.defaultText,
height: toPix(o.height, 2),
items: o.items,
value: o.value,
tipType: o.tipType,
warningTitle: o.warningTitle,
valueFormatter: o.valueFormatter,
}, },
text: o.text, },
defaultText: o.defaultText, { cls }
height: BI.toPix(o.height, 2), );
items: o.items, }
value: o.value,
tipType: o.tipType, _getBaseConfig() {
warningTitle: o.warningTitle, const self = this,
valueFormatter: o.valueFormatter, o = this.options;
}
}, { cls });
},
_getBaseConfig: function () {
var self = this, o = this.options;
return { return {
type: "bi.combo", type: Combo.xtype,
width: BI.toPix(o.width, 2), width: toPix(o.width, 2),
height: BI.toPix(o.height, 2), height: toPix(o.height, 2),
container: o.container, container: o.container,
destroyWhenHide: o.destroyWhenHide, destroyWhenHide: o.destroyWhenHide,
adjustLength: 2, adjustLength: 2,
ref: function (_ref) { ref(_ref) {
self.combo = _ref; self.combo = _ref;
}, },
popup: { popup: {
el: { el: {
type: "bi.multilayer_select_tree_popup", type: MultiLayerSelectTreePopup.xtype,
isDefaultInit: o.isDefaultInit, isDefaultInit: o.isDefaultInit,
itemsCreator: o.itemsCreator, itemsCreator: o.itemsCreator,
items: o.items, items: o.items,
ref: function (_ref) { ref(_ref) {
self.trigger && self.trigger.getSearcher().setAdapter(_ref); self.trigger &&
self.trigger.getSearcher().setAdapter(_ref);
}, },
listeners: [{ listeners: [
eventName: BI.MultiLayerSelectTreePopup.EVENT_CHANGE, {
action: function () { eventName: MultiLayerSelectTreePopup.EVENT_CHANGE,
self.setValue(this.getValue()); action() {
self.combo.hideView(); self.setValue(this.getValue());
self.fireEvent(BI.MultiLayerSelectTreeCombo.EVENT_CHANGE); self.combo.hideView();
self.fireEvent(BI.MultiLayerSelectTreeCombo.EVENT_CLICK_ITEM, self.combo.getValue()); self.fireEvent(
MultiLayerSelectTreeCombo.EVENT_CHANGE
);
self.fireEvent(
MultiLayerSelectTreeCombo.EVENT_CLICK_ITEM,
self.combo.getValue()
);
},
} }
}], ],
onLoaded: function () { onLoaded() {
BI.nextTick(function () { nextTick(() => {
self.combo.adjustWidth(); self.combo.adjustWidth();
self.combo.adjustHeight(); self.combo.adjustHeight();
}); });
} },
}, },
value: o.value, value: o.value,
maxHeight: 400, maxHeight: 400,
maxWidth: o.isNeedAdjustWidth ? "auto" : 500, maxWidth: o.isNeedAdjustWidth ? "auto" : 500,
minHeight: 240 minHeight: 240,
}, },
isNeedAdjustWidth: o.isNeedAdjustWidth, isNeedAdjustWidth: o.isNeedAdjustWidth,
listeners: [{ listeners: [
eventName: BI.Combo.EVENT_BEFORE_POPUPVIEW, {
action: function () { eventName: Combo.EVENT_BEFORE_POPUPVIEW,
self.fireEvent(BI.MultiLayerSelectTreeCombo.EVENT_BEFORE_POPUPVIEW); action() {
self.fireEvent(
MultiLayerSelectTreeCombo.EVENT_BEFORE_POPUPVIEW
);
},
} }
}] ],
}; };
}, }
_getSearchConfig() {
const self = this,
o = this.options;
_getSearchConfig: function () {
var self = this, o = this.options;
return { return {
el: { el: {
type: "bi.multilayer_select_tree_trigger", type: MultiLayerSelectTreeTrigger.xtype,
container: o.container, container: o.container,
allowInsertValue: o.allowInsertValue, allowInsertValue: o.allowInsertValue,
allowSearchValue: o.allowSearchValue, allowSearchValue: o.allowSearchValue,
allowEdit: o.allowEdit, allowEdit: o.allowEdit,
cls: "multilayer-select-tree-trigger", cls: "multilayer-select-tree-trigger",
ref: function (_ref) { ref(_ref) {
self.trigger = _ref; self.trigger = _ref;
}, },
items: o.items, items: o.items,
itemsCreator: o.itemsCreator, itemsCreator: o.itemsCreator,
valueFormatter: o.valueFormatter, valueFormatter: o.valueFormatter,
watermark: o.watermark, watermark: o.watermark,
height: BI.toPix(o.height, 2), height: toPix(o.height, 2),
text: o.text, text: o.text,
defaultText: o.defaultText, defaultText: o.defaultText,
value: o.value, value: o.value,
tipType: o.tipType, tipType: o.tipType,
warningTitle: o.warningTitle, warningTitle: o.warningTitle,
title: o.title, title: o.title,
listeners: [{ listeners: [
eventName: BI.MultiLayerSelectTreeTrigger.EVENT_CHANGE, {
action: function () { eventName: MultiLayerSelectTreeTrigger.EVENT_CHANGE,
self.setValue(this.getValue()); action() {
self.combo.hideView(); self.setValue(this.getValue());
self.fireEvent(BI.MultiLayerSelectTreeCombo.EVENT_CHANGE); self.combo.hideView();
self.fireEvent(BI.MultiLayerSelectTreeCombo.EVENT_CLICK_ITEM, self.combo.getValue()); self.fireEvent(
} MultiLayerSelectTreeCombo.EVENT_CHANGE
}, { );
eventName: BI.MultiLayerSelectTreeTrigger.EVENT_FOCUS, self.fireEvent(
action: function () { MultiLayerSelectTreeCombo.EVENT_CLICK_ITEM,
self.fireEvent(BI.MultiLayerSelectTreeCombo.EVENT_FOCUS); self.combo.getValue()
} );
}, { },
eventName: BI.MultiLayerSelectTreeTrigger.EVENT_BLUR, },
action: function () { {
self.fireEvent(BI.MultiLayerSelectTreeCombo.EVENT_BLUR); eventName: MultiLayerSelectTreeTrigger.EVENT_FOCUS,
} action() {
}, { self.fireEvent(
eventName: BI.MultiLayerSelectTreeTrigger.EVENT_SEARCHING, MultiLayerSelectTreeCombo.EVENT_FOCUS
action: function () { );
self.fireEvent(BI.MultiLayerSelectTreeCombo.EVENT_SEARCHING); },
} },
}, { {
eventName: BI.MultiLayerSelectTreeTrigger.EVENT_STOP, eventName: MultiLayerSelectTreeTrigger.EVENT_BLUR,
action: function () { action() {
self.fireEvent(BI.MultiLayerSelectTreeCombo.EVENT_STOP); self.fireEvent(
} MultiLayerSelectTreeCombo.EVENT_BLUR
}, { );
eventName: BI.MultiLayerSelectTreeTrigger.EVENT_ADD_ITEM, },
action: function () { },
var value = self.trigger.getSearcher().getKeyword(); {
self.combo.setValue([value]); eventName: MultiLayerSelectTreeTrigger.EVENT_SEARCHING,
self.combo.hideView(); action() {
self.fireEvent(BI.MultiLayerSelectTreeCombo.EVENT_CHANGE); self.fireEvent(
MultiLayerSelectTreeCombo.EVENT_SEARCHING
);
},
},
{
eventName: MultiLayerSelectTreeTrigger.EVENT_STOP,
action() {
self.fireEvent(
MultiLayerSelectTreeCombo.EVENT_STOP
);
},
},
{
eventName: MultiLayerSelectTreeTrigger.EVENT_ADD_ITEM,
action() {
const value = self.trigger.getSearcher().getKeyword();
self.combo.setValue([value]);
self.combo.hideView();
self.fireEvent(
MultiLayerSelectTreeCombo.EVENT_CHANGE
);
},
} }
}] ],
}, },
toggle: !o.allowEdit, toggle: !o.allowEdit,
hideChecker: function (e) { hideChecker(e) {
// 新增传配置container后对应hideChecker的修改 // 新增传配置container后对应hideChecker的修改
// IE11下,popover(position: fixed)下放置下拉控件(position: fixed), 滚动的时候会异常卡顿 // IE11下,popover(position: fixed)下放置下拉控件(position: fixed), 滚动的时候会异常卡顿
// 通过container参数将popup放置于popover之外解决此问题, 其他下拉控件由于元素少或者有分页,所以 // 通过container参数将popup放置于popover之外解决此问题, 其他下拉控件由于元素少或者有分页,所以
// 卡顿不明显, 先在此做尝试, 并在FineUI特殊处理待解决文档中标记跟踪 // 卡顿不明显, 先在此做尝试, 并在FineUI特殊处理待解决文档中标记跟踪
return (o.container && self.trigger.getSearcher().isSearching() && self.trigger.getSearcher().getView().element.find(e.target).length > 0) ? false : self.triggerBtn?.element.find(e.target).length === 0; return o.container &&
self.trigger.getSearcher().isSearching() &&
self.trigger.getSearcher().getView().element.find(e.target)
.length > 0
? false
: self.triggerBtn?.element.find(e.target).length === 0;
}, },
listeners: [{ listeners: [
eventName: BI.Combo.EVENT_AFTER_HIDEVIEW, {
action: function () { eventName: Combo.EVENT_AFTER_HIDEVIEW,
self.trigger.stopEditing(); action() {
} self.trigger.stopEditing();
}, { },
eventName: BI.Combo.EVENT_BEFORE_POPUPVIEW, },
action: function () { {
self.fireEvent(BI.MultiLayerSelectTreeCombo.EVENT_BEFORE_POPUPVIEW); eventName: Combo.EVENT_BEFORE_POPUPVIEW,
action() {
self.fireEvent(
MultiLayerSelectTreeCombo.EVENT_BEFORE_POPUPVIEW
);
},
} }
}] ],
}; };
}, }
_getTriggerIconButton() {
const self = this,
o = this.options;
_getTriggerIconButton: function () {
var self = this, o = this.options;
return { return {
type: "bi.trigger_icon_button", type: TriggerIconButton.xtype,
cls: "bi-trigger trigger-icon-button", cls: "bi-trigger trigger-icon-button",
ref: function (_ref) { ref(_ref) {
self.triggerBtn = _ref; self.triggerBtn = _ref;
}, },
width: BI.toPix(o.height, 2), width: toPix(o.height, 2),
height: BI.toPix(o.height, 2), height: toPix(o.height, 2),
listeners: [ listeners: [
{ {
eventName: BI.TriggerIconButton.EVENT_CHANGE, eventName: TriggerIconButton.EVENT_CHANGE,
action: function () { action() {
if (self.combo.isViewVisible()) { if (self.combo.isViewVisible()) {
self.combo.hideView(); self.combo.hideView();
} else { } else {
self.combo.showView(); self.combo.showView();
} }
} },
} }
] ],
}; };
}, }
setValue: function (v) { setValue(v) {
v = BI.isArray(v) ? v : [v]; v = isArray(v) ? v : [v];
this.combo.setValue(v); this.combo.setValue(v);
}, }
getValue: function () { getValue() {
return this.combo.getValue(); return this.combo.getValue();
}, }
getSearcher: function () { getSearcher() {
return this.trigger ? this.trigger.getSearcher() : this.textTrigger.getTextor(); return this.trigger
}, ? this.trigger.getSearcher()
: this.textTrigger.getTextor();
}
clear: function () { clear() {
// do some work // do some work
}, }
setStatus: function (status) { setStatus(status) {
if (BI.isKey(this.options.status)) { if (isKey(this.options.status)) {
this.element.removeClass("status-" + this.options.status); this.element.removeClass(`status-${this.options.status}`);
} }
this.element.addClass("status-" + status); this.element.addClass(`status-${status}`);
this.options.status = status; this.options.status = status;
}, }
setTipType: function (v) { setTipType(v) {
this.trigger ? this.trigger.setTipType(v) : this.textTrigger.setTipType(v); this.trigger
}, ? this.trigger.setTipType(v)
: this.textTrigger.setTipType(v);
}
populate: function (items) { populate(items) {
this.combo.populate(items); this.combo.populate(items);
}, }
focus: function () { focus() {
this.trigger ? this.trigger.focus() : this.textTrigger.focus(); this.trigger ? this.trigger.focus() : this.textTrigger.focus();
}, }
blur: function () { blur() {
this.trigger ? this.trigger.blur() : this.textTrigger.blur(); this.trigger ? this.trigger.blur() : this.textTrigger.blur();
}, }
showView: function () { showView() {
this.combo.showView(); this.combo.showView();
},
setWaterMark: function (v) {
this.trigger ? this.trigger.setWaterMark(v) : this.textTrigger.setWaterMark(v);
} }
});
BI.MultiLayerSelectTreeCombo.EVENT_SEARCHING = "EVENT_SEARCHING"; setWaterMark(v) {
BI.MultiLayerSelectTreeCombo.EVENT_BLUR = "EVENT_BLUR"; this.trigger
BI.MultiLayerSelectTreeCombo.EVENT_FOCUS = "EVENT_FOCUS"; ? this.trigger.setWaterMark(v)
BI.MultiLayerSelectTreeCombo.EVENT_CHANGE = "EVENT_CHANGE"; : this.textTrigger.setWaterMark(v);
BI.MultiLayerSelectTreeCombo.EVENT_STOP = "EVENT_STOP"; }
BI.MultiLayerSelectTreeCombo.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; }
BI.MultiLayerSelectTreeCombo.EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM";
BI.shortcut("bi.multilayer_select_tree_combo", BI.MultiLayerSelectTreeCombo);

151
src/widget/multilayerselecttree/multilayerselecttree.insert.search.pane.js

@ -1,92 +1,119 @@
/** import {
* Created by GUY on 2016/1/26. shortcut,
* Widget,
* @class BI.MultiLayerSelectTreeInsertSearchPane i18nText,
* @extends BI.Pane emptyFn,
*/ createWidget,
Controller,
VerticalLayout,
isEmptyArray,
isArray
} from "@/core";
import { MultiLayerSelectLevelTree } from "./multilayerselecttree.leveltree";
import { TextButton } from "@/base";
BI.MultiLayerSelectTreeInsertSearchPane = BI.inherit(BI.Widget, { @shortcut()
export class MultiLayerSelectTreeInsertSearchPane extends Widget {
static xtype = "bi.multilayer_select_tree_insert_search_pane";
props: function() { static EVENT_ADD_ITEM = "EVENT_ADD_ITEM";
static EVENT_CHANGE = "EVENT_CHANGE";
props() {
return { return {
baseCls: "bi-multilayer-select-tree-popup", baseCls: "bi-multilayer-select-tree-popup",
tipText: BI.i18nText("BI-No_Selected_Item"), tipText: i18nText("BI-No_Selected_Item"),
isDefaultInit: false, isDefaultInit: false,
itemsCreator: BI.emptyFn, itemsCreator: emptyFn,
items: [], items: [],
value: "" value: "",
}; };
}, }
render: function() { render() {
var self = this, o = this.options; const self = this,
this.tree = BI.createWidget({ o = this.options;
type: "bi.multilayer_select_level_tree", this.tree = createWidget({
type: MultiLayerSelectLevelTree.xtype,
isDefaultInit: o.isDefaultInit, isDefaultInit: o.isDefaultInit,
items: o.items, items: o.items,
itemsCreator: o.itemsCreator === BI.emptyFn ? BI.emptyFn : function (op, callback) { itemsCreator:
o.itemsCreator(op, function (res) { o.itemsCreator === emptyFn
callback(res); ? emptyFn
self.setKeyword(o.keywordGetter()); : function (op, callback) {
}); o.itemsCreator(op, res => {
}, callback(res);
self.setKeyword(o.keywordGetter());
});
},
keywordGetter: o.keywordGetter, keywordGetter: o.keywordGetter,
value: o.value, value: o.value,
scrollable: null, scrollable: null,
listeners: [{ listeners: [
eventName: BI.Controller.EVENT_CHANGE, {
action: function () { eventName: Controller.EVENT_CHANGE,
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); action() {
} self.fireEvent(Controller.EVENT_CHANGE, arguments);
}, { },
eventName: BI.MultiLayerSelectLevelTree.EVENT_CHANGE, },
action: function () { {
self.fireEvent(BI.MultiLayerSelectTreeInsertSearchPane.EVENT_CHANGE); eventName: MultiLayerSelectLevelTree.EVENT_CHANGE,
action() {
self.fireEvent(
MultiLayerSelectTreeInsertSearchPane.EVENT_CHANGE
);
},
} }
}] ],
}); });
return { return {
type: "bi.vertical", type: VerticalLayout.xtype,
scrolly: false, scrolly: false,
scrollable: true, scrollable: true,
vgap: 5, vgap: 5,
items: [{ items: [
type: "bi.text_button", {
invisible: true, type: TextButton.xtype,
text: BI.i18nText("BI-Basic_Click_To_Add_Text", ""), invisible: true,
height: 24, text: i18nText("BI-Basic_Click_To_Add_Text", ""),
cls: "bi-high-light", height: 24,
hgap: 5, cls: "bi-high-light",
ref: function (_ref) { hgap: 5,
self.addNotMatchTip = _ref; ref(_ref) {
self.addNotMatchTip = _ref;
},
handler() {
self.fireEvent(
MultiLayerSelectTreeInsertSearchPane.EVENT_ADD_ITEM,
o.keywordGetter()
);
},
}, },
handler: function () { this.tree
self.fireEvent(BI.MultiLayerSelectTreeInsertSearchPane.EVENT_ADD_ITEM, o.keywordGetter()); ],
}
}, this.tree]
}; };
}, }
setKeyword: function (keyword) { setKeyword(keyword) {
var showTip = BI.isEmptyArray(this.tree.getAllLeaves()); const showTip = isEmptyArray(this.tree.getAllLeaves());
this.addNotMatchTip.setVisible(showTip); this.addNotMatchTip.setVisible(showTip);
showTip && this.addNotMatchTip.setText(BI.i18nText("BI-Basic_Click_To_Add_Text", keyword)); showTip &&
}, this.addNotMatchTip.setText(
i18nText("BI-Basic_Click_To_Add_Text", keyword)
);
}
getValue: function () { getValue() {
return this.tree.getValue(); return this.tree.getValue();
}, }
setValue: function (v) { setValue(v) {
v = BI.isArray(v) ? v : [v]; v = isArray(v) ? v : [v];
this.tree.setValue(v); this.tree.setValue(v);
}, }
populate: function (items) { populate(items) {
this.tree.populate(items); this.tree.populate(items);
} }
}); }
BI.MultiLayerSelectTreeInsertSearchPane.EVENT_ADD_ITEM = "EVENT_ADD_ITEM";
BI.MultiLayerSelectTreeInsertSearchPane.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.multilayer_select_tree_insert_search_pane", BI.MultiLayerSelectTreeInsertSearchPane);

234
src/widget/multilayerselecttree/multilayerselecttree.leveltree.js

@ -1,98 +1,135 @@
/** import {
* guy shortcut,
* 二级树 extend,
* @class BI.MultiLayerSelectLevelTree emptyFn,
* @extends BI.Pane each,
*/ isKey,
BI.MultiLayerSelectLevelTree = BI.inherit(BI.Pane, { UUID,
_defaultConfig: function () { isNotEmptyArray,
return BI.extend(BI.MultiLayerSelectLevelTree.superclass._defaultConfig.apply(this, arguments), { defaults,
createWidget,
Tree,
nextTick,
Selection,
Controller,
Events,
VerticalLayout,
AdaptiveLayout,
isNull,
isArray
} from "@/core";
import { Pane, CustomTree, Loader, ButtonTree } from "@/base";
import { BasicTreeNode, BasicTreeItem, TreeExpander } from "@/case";
@shortcut()
export class MultiLayerSelectLevelTree extends Pane {
static xtype = "bi.multilayer_select_level_tree";
static EVENT_CHANGE = "EVENT_CHANGE";
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-multilayer-select-level-tree", baseCls: "bi-multilayer-select-level-tree",
isDefaultInit: false, isDefaultInit: false,
items: [], items: [],
itemsCreator: BI.emptyFn, itemsCreator: emptyFn,
keywordGetter: BI.emptyFn, keywordGetter: emptyFn,
value: "", value: "",
scrollable: true scrollable: true,
}); });
}, }
_init: function () { _init() {
var o = this.options; const o = this.options;
BI.MultiLayerSelectLevelTree.superclass._init.apply(this, arguments); super._init(...arguments);
this.storeValue = o.value; this.storeValue = o.value;
this.initTree(this.options.items); this.initTree(this.options.items);
this.check(); this.check();
}, }
_formatItems: function (nodes, layer, pNode) { _formatItems(nodes, layer, pNode) {
var self = this, o = this.options; const self = this,
var keyword = o.keywordGetter(); o = this.options;
BI.each(nodes, function (i, node) { const keyword = o.keywordGetter();
var extend = { each(nodes, (i, node) => {
const extend = {
isFirstNode: i === 0, isFirstNode: i === 0,
isLastNode: i === nodes.length - 1, isLastNode: i === nodes.length - 1,
height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
}; };
node.layer = layer; node.layer = layer;
if (!BI.isKey(node.id)) { if (!isKey(node.id)) {
node.id = BI.UUID(); node.id = UUID();
} }
node.keyword = node.keyword || keyword; node.keyword = node.keyword || keyword;
extend.pNode = pNode; extend.pNode = pNode;
if (node.isParent === true || node.parent === true || BI.isNotEmptyArray(node.children)) { if (
extend.type = "bi.tree_node"; node.isParent === true ||
node.parent === true ||
isNotEmptyArray(node.children)
) {
extend.type = BasicTreeNode.xtype;
extend.selectable = true; extend.selectable = true;
BI.defaults(node, extend); defaults(node, extend);
self._formatItems(node.children, layer + 1, node); self._formatItems(node.children, layer + 1, node);
} else { } else {
extend.type = "bi.tree_item"; extend.type = BasicTreeItem.xtype;
BI.defaults(node, extend); defaults(node, extend);
} }
}); });
return nodes; return nodes;
}, }
_assertId: function (sNodes) { _assertId(sNodes) {
BI.each(sNodes, function (i, node) { each(sNodes, (i, node) => {
node.id = node.id || BI.UUID(); node.id = node.id || UUID();
}); });
}, }
// 构造树结构, initTree(nodes) {
initTree: function (nodes) { const self = this,
var self = this, o = this.options; o = this.options;
var hasNext = false; let hasNext = false;
this.empty(); this.empty();
this._assertId(nodes); this._assertId(nodes);
this.tree = BI.createWidget({ this.tree = createWidget({
type: "bi.custom_tree", type: CustomTree.xtype,
cls: "tree-view display-table", cls: "tree-view display-table",
expander: { expander: {
// type: "bi.select_tree_expander", type: TreeExpander.xtype,
type: "bi.tree_expander",
selectable: true, selectable: true,
isDefaultInit: o.isDefaultInit, isDefaultInit: o.isDefaultInit,
el: {}, el: {},
popup: { popup: {
type: "bi.custom_tree" type: CustomTree.xtype,
} },
}, },
items: this._formatItems(BI.Tree.transformToTreeFormat(nodes), 0), items: this._formatItems(Tree.transformToTreeFormat(nodes), 0),
itemsCreator: function (op, callback) { itemsCreator(op, callback) {
(op.times === 1 && !op.node) && BI.nextTick(function () { op.times === 1 &&
!op.node &&
nextTick(() => {
self.loading(); self.loading();
}); });
o.itemsCreator(op, function (ob) { o.itemsCreator(op, ob => {
hasNext = ob.hasNext; hasNext = ob.hasNext;
(op.times === 1 && !op.node) && self._populate(ob.items); op.times === 1 && !op.node && self._populate(ob.items);
callback(self._formatItems(BI.Tree.transformToTreeFormat(ob.items), op.node ? op.node.layer + 1 : 0, op.node)); callback(
self._formatItems(
Tree.transformToTreeFormat(ob.items),
op.node ? op.node.layer + 1 : 0,
op.node
)
);
self.setValue(self.storeValue); self.setValue(self.storeValue);
(op.times === 1 && !op.node) && BI.nextTick(function () { op.times === 1 &&
!op.node &&
nextTick(() => {
self.loaded(); self.loaded();
}); });
}); });
@ -100,73 +137,84 @@ BI.MultiLayerSelectLevelTree = BI.inherit(BI.Pane, {
value: o.value, value: o.value,
el: { el: {
type: "bi.loader", type: Loader.xtype,
isDefaultInit: o.itemsCreator !== BI.emptyFn, isDefaultInit: o.itemsCreator !== emptyFn,
el: { el: {
type: "bi.button_tree", type: ButtonTree.xtype,
chooseType: o.chooseType === BI.Selection.None ? BI.Selection.None : BI.Selection.Default, // 不使用buttontree内部getValue逻辑 chooseType:
o.chooseType === Selection.None
? Selection.None
: Selection.Default, // 不使用buttontree内部getValue逻辑
behaviors: o.behaviors, behaviors: o.behaviors,
layouts: [{ layouts: [
type: "bi.vertical" {
}] type: VerticalLayout.xtype,
}
],
}, },
hasNext: function () { hasNext() {
return hasNext; return hasNext;
} },
} },
}); });
this.tree.on(BI.Controller.EVENT_CHANGE, function (type, value) { this.tree.on(Controller.EVENT_CHANGE, function (type, value) {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); self.fireEvent(Controller.EVENT_CHANGE, arguments);
if (type === BI.Events.CLICK) { if (type === Events.CLICK) {
self.setValue(value); self.setValue(value);
self.fireEvent(BI.MultiLayerSelectLevelTree.EVENT_CHANGE, arguments); self.fireEvent(
MultiLayerSelectLevelTree.EVENT_CHANGE,
arguments
);
} }
}); });
BI.createWidget({ createWidget({
type: "bi.adaptive", type: AdaptiveLayout.xtype,
element: this, element: this,
scrollable: o.scrollable, scrollable: o.scrollable,
items: [this.tree] items: [this.tree],
}); });
}, }
_populate: function () { _populate() {
BI.MultiLayerSelectLevelTree.superclass.populate.apply(this, arguments); super.populate(...arguments);
}, }
populate: function (nodes) { populate(nodes) {
this._populate(nodes); this._populate(nodes);
BI.isNull(nodes) ? this.tree.populate() : this.tree.populate(this._formatItems(BI.Tree.transformToTreeFormat(nodes), 0)); isNull(nodes)
}, ? this.tree.populate()
: this.tree.populate(
this._formatItems(Tree.transformToTreeFormat(nodes), 0)
);
}
setValue: function (v) { setValue(v) {
// getValue依赖于storeValue, 那么不选的时候就不要更新storeValue了 // getValue依赖于storeValue, 那么不选的时候就不要更新storeValue了
if (this.options.chooseType === BI.Selection.None) { if (this.options.chooseType === Selection.None) {
} else { } else {
this.storeValue = v; this.storeValue = v;
this.tree.setValue(v); this.tree.setValue(v);
} }
}, }
getValue: function () { getValue() {
return BI.isArray(this.storeValue) ? return isArray(this.storeValue)
this.storeValue : BI.isNull(this.storeValue) ? ? this.storeValue
[] : [this.storeValue]; : isNull(this.storeValue)
}, ? []
: [this.storeValue];
}
getAllLeaves: function () { getAllLeaves() {
return this.tree.getAllLeaves(); return this.tree.getAllLeaves();
}, }
getNodeById: function (id) { getNodeById(id) {
return this.tree.getNodeById(id); return this.tree.getNodeById(id);
}, }
getNodeByValue: function (id) { getNodeByValue(id) {
return this.tree.getNodeByValue(id); return this.tree.getNodeByValue(id);
} }
}); }
BI.MultiLayerSelectLevelTree.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.multilayer_select_level_tree", BI.MultiLayerSelectLevelTree);

86
src/widget/multilayerselecttree/multilayerselecttree.popup.js

@ -1,77 +1,85 @@
/** import {
* Created by GUY on 2016/1/26. shortcut,
* Widget,
* @class BI.MultiLayerSelectTreePopup extend,
* @extends BI.Pane i18nText,
*/ emptyFn,
createWidget,
Controller,
VerticalLayout,
isArray
} from "@/core";
import { MultiLayerSelectLevelTree } from "./multilayerselecttree.leveltree";
BI.MultiLayerSelectTreePopup = BI.inherit(BI.Widget, { @shortcut()
export class MultiLayerSelectTreePopup extends Widget {
static xtype = "bi.multilayer_select_tree_popup";
_defaultConfig: function () { static EVENT_CHANGE = "EVENT_CHANGE";
return BI.extend(BI.MultiLayerSelectTreePopup.superclass._defaultConfig.apply(this, arguments), {
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-multilayer-select-tree-popup", baseCls: "bi-multilayer-select-tree-popup",
tipText: BI.i18nText("BI-No_Selected_Item"), tipText: i18nText("BI-No_Selected_Item"),
isDefaultInit: false, isDefaultInit: false,
itemsCreator: BI.emptyFn, itemsCreator: emptyFn,
items: [], items: [],
value: "", value: "",
onLoaded: BI.emptyFn, onLoaded: emptyFn,
minHeight: 240 minHeight: 240,
}); });
}, }
_init: function () { _init() {
BI.MultiLayerSelectTreePopup.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this, o = this.options; const self = this,
o = this.options;
this.tree = BI.createWidget({ this.tree = createWidget({
type: "bi.multilayer_select_level_tree", type: MultiLayerSelectLevelTree.xtype,
isDefaultInit: o.isDefaultInit, isDefaultInit: o.isDefaultInit,
items: o.items, items: o.items,
itemsCreator: o.itemsCreator, itemsCreator: o.itemsCreator,
keywordGetter: o.keywordGetter, keywordGetter: o.keywordGetter,
value: o.value, value: o.value,
scrollable: null, scrollable: null,
onLoaded: function () { onLoaded() {
self.tree.check(); self.tree.check();
o.onLoaded(); o.onLoaded();
} },
}); });
BI.createWidget({ createWidget({
type: "bi.vertical", type: VerticalLayout.xtype,
scrolly: false, scrolly: false,
scrollable: true, scrollable: true,
element: this, element: this,
vgap: 5, vgap: 5,
items: [this.tree] items: [this.tree],
}); });
this.tree.on(BI.Controller.EVENT_CHANGE, function () { this.tree.on(Controller.EVENT_CHANGE, function () {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); self.fireEvent(Controller.EVENT_CHANGE, arguments);
}); });
this.tree.on(BI.MultiLayerSelectLevelTree.EVENT_CHANGE, function () { this.tree.on(MultiLayerSelectLevelTree.EVENT_CHANGE, () => {
self.fireEvent(BI.MultiLayerSelectTreePopup.EVENT_CHANGE); self.fireEvent(MultiLayerSelectTreePopup.EVENT_CHANGE);
}); });
this.tree.css("min-height", BI.pixFormat(o.minHeight - 10)); this.tree.css("min-height", BI.pixFormat(o.minHeight - 10));
}, }
getValue: function () { getValue() {
return this.tree.getValue(); return this.tree.getValue();
}, }
setValue: function (v) { setValue(v) {
v = BI.isArray(v) ? v : [v]; v = isArray(v) ? v : [v];
this.tree.setValue(v); this.tree.setValue(v);
}, }
populate: function (items) { populate(items) {
this.tree.populate(items); this.tree.populate(items);
} }
}); }
BI.MultiLayerSelectTreePopup.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.multilayer_select_tree_popup", BI.MultiLayerSelectTreePopup);

334
src/widget/multilayerselecttree/multilayerselecttree.trigger.js

@ -1,237 +1,301 @@
/** import {
* Created by Windy on 2018/2/2. shortcut,
*/ emptyFn,
BI.MultiLayerSelectTreeTrigger = BI.inherit(BI.Trigger, { i18nText,
isNotNull,
isKey,
HorizontalFillLayout,
Tree,
deepClone,
Func,
concat,
isNotEmptyArray,
each,
uniqBy,
map,
isFunction,
find
} from "@/core";
import { Trigger, Searcher } from "@/base";
import { StateEditor, DefaultTextEditor } from "@/case";
import { MultiLayerSelectTreeInsertSearchPane } from "./multilayerselecttree.insert.search.pane";
import { MultiLayerSelectTreePopup } from "./multilayerselecttree.popup";
props: function () { @shortcut()
export class MultiLayerSelectTreeTrigger extends Trigger {
static xtype = "bi.multilayer_select_tree_trigger";
static EVENT_FOCUS = "EVENT_FOCUS";
static EVENT_BLUR = "EVENT_BLUR";
static EVENT_SEARCHING = "EVENT_SEARCHING";
static EVENT_STOP = "EVENT_STOP";
static EVENT_START = "EVENT_START";
static EVENT_CHANGE = "EVENT_CHANGE";
static EVENT_ADD_ITEM = "EVENT_ADD_ITEM";
props() {
return { return {
extraCls: "bi-multi-layer-select-tree-trigger", extraCls: "bi-multi-layer-select-tree-trigger",
height: 24, height: 24,
itemsCreator: BI.emptyFn, itemsCreator: emptyFn,
watermark: BI.i18nText("BI-Basic_Search"), watermark: i18nText("BI-Basic_Search"),
allowSearchValue: false, allowSearchValue: false,
title: BI.bind(this._getShowText, this) title: () => this._getShowText(),
}; };
}, }
render: function () { render() {
var self = this, o = this.options; const self = this,
o = this.options;
if (o.itemsCreator === BI.emptyFn) { if (o.itemsCreator === BI.emptyFn) {
this._initData(); this._initData();
} }
return { return {
type: "bi.horizontal_fill", type: HorizontalFillLayout.xtype,
items: [ items: [
{ {
el: { el: {
type: "bi.searcher", type: Searcher.xtype,
ref: function () { ref() {
self.searcher = this; self.searcher = this;
}, },
masker: BI.isNotNull(o.container) ? { masker: isNotNull(o.container)
offset: {}, ? {
container: o.container offset: {},
} : { container: o.container,
offset: {} }
}, : {
offset: {},
},
isAutoSearch: false, isAutoSearch: false,
el: { el: {
type: "bi.default_text_editor", type: DefaultTextEditor.xtype,
ref: function () { ref() {
self.editor = this; self.editor = this;
}, },
defaultText: o.defaultText, defaultText: o.defaultText,
text: BI.isKey(o.value) ? this._digest(o.value) : o.text, text: isKey(o.value)
? this._digest(o.value)
: o.text,
value: o.value, value: o.value,
height: o.height, height: o.height,
tipText: "", tipText: "",
watermark: o.watermark, watermark: o.watermark,
listeners: [{ listeners: [
eventName: BI.StateEditor.EVENT_FOCUS, {
action: function () { eventName: StateEditor.EVENT_FOCUS,
self.fireEvent(BI.MultiLayerSelectTreeTrigger.EVENT_FOCUS); action() {
} self.fireEvent(
}, { MultiLayerSelectTreeTrigger.EVENT_FOCUS
eventName: BI.StateEditor.EVENT_BLUR, );
action: function () { },
self.fireEvent(BI.MultiLayerSelectTreeTrigger.EVENT_BLUR); },
{
eventName: StateEditor.EVENT_BLUR,
action() {
self.fireEvent(
MultiLayerSelectTreeTrigger.EVENT_BLUR
);
},
},
{
eventName: StateEditor.EVENT_CHANGE,
action() {
self.fireEvent(
MultiLayerSelectTreeTrigger.EVENT_SEARCHING
);
},
} }
}, { ],
eventName: BI.StateEditor.EVENT_CHANGE,
action: function () {
self.fireEvent(BI.MultiLayerSelectTreeTrigger.EVENT_SEARCHING);
}
}]
}, },
popup: { popup: {
type: o.allowInsertValue ? "bi.multilayer_select_tree_insert_search_pane" : "bi.multilayer_select_tree_popup", type: o.allowInsertValue
itemsCreator: o.itemsCreator === BI.emptyFn ? BI.emptyFn : function (op, callback) { ? MultiLayerSelectTreeInsertSearchPane.xtype
op.keyword = self.editor.getValue(); : MultiLayerSelectTreePopup.xtype,
o.itemsCreator(op, callback); itemsCreator:
}, o.itemsCreator === emptyFn
keywordGetter: function () { ? emptyFn
: function (op, callback) {
op.keyword = self.editor.getValue();
o.itemsCreator(op, callback);
},
keywordGetter() {
return self.editor.getValue(); return self.editor.getValue();
}, },
cls: "bi-card", cls: "bi-card",
listeners: [{ listeners: [
eventName: BI.MultiLayerSelectTreeInsertSearchPane.EVENT_ADD_ITEM, {
action: function () { eventName:
self.options.text = self.getSearcher().getKeyword(); MultiLayerSelectTreeInsertSearchPane.EVENT_ADD_ITEM,
self.fireEvent(BI.MultiLayerSelectTreeTrigger.EVENT_ADD_ITEM); action() {
self.options.text = self
.getSearcher()
.getKeyword();
self.fireEvent(
MultiLayerSelectTreeTrigger.EVENT_ADD_ITEM
);
},
} }
}], ],
ref: function (_ref) { ref(_ref) {
self.popup = _ref; self.popup = _ref;
} },
}, },
onSearch: function (obj, callback) { onSearch(obj, callback) {
var keyword = obj.keyword; const keyword = obj.keyword;
if (o.itemsCreator === BI.emptyFn) { if (o.itemsCreator === BI.emptyFn) {
callback(self._getSearchItems(keyword)); callback(self._getSearchItems(keyword));
o.allowInsertValue && self.popup.setKeyword(keyword); o.allowInsertValue &&
self.popup.setKeyword(keyword);
} else { } else {
callback(); callback();
} }
}, },
listeners: [{ listeners: [
eventName: BI.Searcher.EVENT_CHANGE, {
action: function () { eventName: Searcher.EVENT_CHANGE,
self.fireEvent(BI.MultiLayerSelectTreeTrigger.EVENT_CHANGE); action() {
self.fireEvent(
MultiLayerSelectTreeTrigger.EVENT_CHANGE
);
},
} }
}] ],
}, },
width: "fill", width: "fill",
rgap: 24 rgap: 24,
}, }
] ],
}; };
}, }
_initData: function () { _initData() {
var o = this.options; const o = this.options;
this.tree = new BI.Tree(); this.tree = new Tree();
this.nodes = BI.Tree.treeFormat(BI.deepClone(o.items)); this.nodes = Tree.treeFormat(deepClone(o.items));
this.tree.initTree(this.nodes); this.tree.initTree(this.nodes);
}, }
_getSearchItems: function (keyword) { _getSearchItems(keyword) {
var self = this, o = this.options; const self = this,
o = this.options;
// 把数组搜索换成用BI.tree搜索节点, 搜到了就不再往下搜索 // 把数组搜索换成用BI.tree搜索节点, 搜到了就不再往下搜索
var items = []; const items = [];
this.tree.traverse(function (node) { this.tree.traverse(node => {
var find = BI.Func.getSearchResult(self.tree.isRoot(node) ? [] : BI.concat([node.text], (o.allowSearchValue ? [node.value] : [])), keyword); const find = Func.getSearchResult(
self.tree.isRoot(node)
? []
: concat(
[node.text],
o.allowSearchValue ? [node.value] : []
),
keyword
);
if (find.find.length > 0 || find.match.length > 0) { if (find.find.length > 0 || find.match.length > 0) {
items.push(node); items.push(node);
return true; return true;
} }
}); });
return this._fillTreeStructure4Search(items, "id"); return this._fillTreeStructure4Search(items, "id");
}, }
_createJson: function (node, open) { _createJson(node, open) {
return { return {
id: node.id, id: node.id,
pId: node.pId, pId: node.pId,
text: node.text, text: node.text,
value: node.value, value: node.value,
isParent: BI.isNotEmptyArray(node.children), isParent: isNotEmptyArray(node.children),
open: open open,
}; };
}, }
_getChildren: function (node) { _getChildren(node) {
var self = this; const self = this;
node.children = node.children || []; node.children = node.children || [];
var nodes = []; let nodes = [];
BI.each(node.children, function (idx, child) { each(node.children, (idx, child) => {
var children = self._getChildren(child); const children = self._getChildren(child);
nodes = nodes.concat(children); nodes = nodes.concat(children);
}); });
return node.children.concat(nodes); return node.children.concat(nodes);
}, }
// 将搜索到的节点进行补充,构造成一棵完整的树 _fillTreeStructure4Search(leaves) {
_fillTreeStructure4Search: function (leaves) { const self = this;
var self = this; let result = [];
var result = []; const queue = [];
var queue = []; each(leaves, (idx, node) => {
BI.each(leaves, function (idx, node) {
queue.push({ pId: node.pId }); queue.push({ pId: node.pId });
result.push(node); result.push(node);
result = result.concat(self._getChildren(node)); result = result.concat(self._getChildren(node));
}); });
queue.reverse(); queue.reverse();
while (BI.isNotEmptyArray(queue)) { while (isNotEmptyArray(queue)) {
var node = queue.pop(); const node = queue.pop();
var pNode = this.tree.search(this.tree.getRoot(), node.pId, "id"); const pNode = this.tree.search(this.tree.getRoot(), node.pId, "id");
if (pNode != null) { if (pNode != null) {
pNode.open = true; pNode.open = true;
queue.push({ pId: pNode.pId }); queue.push({ pId: pNode.pId });
result.push(pNode); result.push(pNode);
} }
} }
return BI.uniqBy(BI.map(result, function (idx, node) {
return self._createJson(node, node.open); return uniqBy(
}), "id"); map(result, (idx, node) => self._createJson(node, node.open)),
}, "id"
);
_digest: function (v) { }
var o = this.options;
if (BI.isFunction(o.valueFormatter)) { _digest(v) {
const o = this.options;
if (isFunction(o.valueFormatter)) {
return o.valueFormatter(v); return o.valueFormatter(v);
} }
var result = BI.find(o.items, function (i, item) { const result = find(o.items, (i, item) => item.value === v);
return item.value === v;
});
return BI.isNotNull(result) ? result.text : (o.text ?? v); return isNotNull(result) ? result.text : o.text ?? v;
}, }
_getShowText: function () { _getShowText() {
return this.editor.getText(); return this.editor.getText();
}, }
stopEditing: function () { stopEditing() {
this.searcher.stopSearch(); this.searcher.stopSearch();
}, }
getSearcher: function () { getSearcher() {
return this.searcher; return this.searcher;
}, }
populate: function (items) { populate(items) {
this.options.items = items; this.options.items = items;
this._initData(items); this._initData(items);
}, }
setValue: function (v) { setValue(v) {
this.editor.setState(this._digest(v[0])); this.editor.setState(this._digest(v[0]));
}, }
getValue: function () { getValue() {
return this.searcher.getValue(); return this.searcher.getValue();
}, }
focus: function () { focus() {
this.searcher.focus(); this.searcher.focus();
}, }
blur: function () { blur() {
this.searcher.blur(); this.searcher.blur();
}, }
setWaterMark: function (v) { setWaterMark(v) {
this.searcher.setWaterMark(v); this.searcher.setWaterMark(v);
} }
}); }
BI.MultiLayerSelectTreeTrigger.EVENT_FOCUS = "EVENT_FOCUS";
BI.MultiLayerSelectTreeTrigger.EVENT_BLUR = "EVENT_BLUR";
BI.MultiLayerSelectTreeTrigger.EVENT_SEARCHING = "EVENT_SEARCHING";
BI.MultiLayerSelectTreeTrigger.EVENT_STOP = "EVENT_STOP";
BI.MultiLayerSelectTreeTrigger.EVENT_START = "EVENT_START";
BI.MultiLayerSelectTreeTrigger.EVENT_CHANGE = "EVENT_CHANGE";
BI.MultiLayerSelectTreeTrigger.EVENT_ADD_ITEM = "EVENT_ADD_ITEM";
BI.shortcut("bi.multilayer_select_tree_trigger", BI.MultiLayerSelectTreeTrigger);

99
src/widget/multilayerselecttree/node/node.first.plus.js

@ -1,99 +0,0 @@
/**
* 加号表示的组节点
*
* Created by GUY on 2016/1/27.
* @class BI.MultiLayerSelectTreeFirstPlusGroupNode
* @extends BI.NodeButton
*/
BI.MultiLayerSelectTreeFirstPlusGroupNode = BI.inherit(BI.NodeButton, {
_defaultConfig: function () {
var conf = BI.MultiLayerSelectTreeFirstPlusGroupNode.superclass._defaultConfig.apply(this, arguments);
return BI.extend(conf, {
extraCls: "bi-multilayer-select-tree-first-plus-group-node bi-list-item-active",
layer: 0, // 第几层级
id: "",
pId: "",
readonly: true,
open: false,
height: 24
});
},
_init: function () {
BI.MultiLayerSelectTreeFirstPlusGroupNode.superclass._init.apply(this, arguments);
var self = this, o = this.options;
this.node = BI.createWidget({
type: "bi.select_tree_first_plus_group_node",
cls: "bi-list-item-none",
stopPropagation: true,
logic: {
dynamic: true
},
id: o.id,
pId: o.pId,
keyword: o.keyword,
open: o.open,
height: o.height,
hgap: o.hgap,
text: o.text,
value: o.value,
py: o.py
});
this.node.on(BI.Controller.EVENT_CHANGE, function (type) {
self.setSelected(self.isSelected());
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
});
var items = [];
// BI.count(0, o.layer, function (index) {
// items.push({
// type: "bi.layout",
// cls: BI.contains(needBlankLayers, index) ? "" : "base-line-conn-background",
// width: 12,
// height: o.height
// });
// });
items.push({
el: this.node,
lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2
});
BI.createWidget({
type: "bi.horizontal_adapt",
element: this,
columnSize: BI.makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2),
items: items
});
},
isOnce: function () {
return true;
},
doRedMark: function () {
this.node.doRedMark.apply(this.node, arguments);
},
unRedMark: function () {
this.node.unRedMark.apply(this.node, arguments);
},
isSelected: function () {
return this.node.isSelected();
},
setSelected: function (b) {
BI.MultiLayerSelectTreeFirstPlusGroupNode.superclass.setSelected.apply(this, arguments);
this.node.setSelected(b);
},
doClick: function () {
BI.NodeButton.superclass.doClick.apply(this, arguments);
this.node.setSelected(this.isSelected());
},
setOpened: function (v) {
BI.MultiLayerSelectTreeFirstPlusGroupNode.superclass.setOpened.apply(this, arguments);
this.node.setOpened(v);
}
});
BI.shortcut("bi.multilayer_select_tree_first_plus_group_node", BI.MultiLayerSelectTreeFirstPlusGroupNode);

88
src/widget/multilayerselecttree/node/node.last.plus.js

@ -1,88 +0,0 @@
/**
* 加号表示的组节点
*
* Created by GUY on 2016/1/27.
* @class BI.MultiLayerSelectTreeLastPlusGroupNode
* @extends BI.NodeButton
*/
BI.MultiLayerSelectTreeLastPlusGroupNode = BI.inherit(BI.NodeButton, {
_defaultConfig: function () {
var conf = BI.MultiLayerSelectTreeLastPlusGroupNode.superclass._defaultConfig.apply(this, arguments);
return BI.extend(conf, {
extraCls: "bi-multilayer-select-tree-last-plus-group-node bi-list-item-active",
layer: 0, // 第几层级
id: "",
pId: "",
readonly: true,
open: false,
height: 24
});
},
_init: function () {
BI.MultiLayerSelectTreeLastPlusGroupNode.superclass._init.apply(this, arguments);
var self = this, o = this.options;
this.node = BI.createWidget({
type: "bi.select_tree_last_plus_group_node",
cls: "bi-list-item-none",
stopPropagation: true,
logic: {
dynamic: true
},
id: o.id,
pId: o.pId,
keyword: o.keyword,
open: o.open,
height: o.height,
hgap: o.hgap,
text: o.text,
value: o.value,
py: o.py
});
this.node.on(BI.Controller.EVENT_CHANGE, function (type) {
self.setSelected(self.isSelected());
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
});
var items = [];
items.push({
el: this.node,
lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2
});
BI.createWidget({
type: "bi.horizontal_adapt",
element: this,
columnSize: BI.makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2),
items: items
});
},
doRedMark: function () {
this.node.doRedMark.apply(this.node, arguments);
},
unRedMark: function () {
this.node.unRedMark.apply(this.node, arguments);
},
isSelected: function () {
return this.node.isSelected();
},
setSelected: function (b) {
BI.MultiLayerSelectTreeLastPlusGroupNode.superclass.setSelected.apply(this, arguments);
this.node.setSelected(b);
},
doClick: function () {
BI.MultiLayerSelectTreeLastPlusGroupNode.superclass.doClick.apply(this, arguments);
this.node.setSelected(this.isSelected());
},
setOpened: function (v) {
BI.MultiLayerSelectTreeLastPlusGroupNode.superclass.setOpened.apply(this, arguments);
this.node.setOpened(v);
}
});
BI.shortcut("bi.multilayer_select_tree_last_plus_group_node", BI.MultiLayerSelectTreeLastPlusGroupNode);

88
src/widget/multilayerselecttree/node/node.mid.plus.js

@ -1,88 +0,0 @@
/**
* 加号表示的组节点
*
* Created by GUY on 2016/1/27.
* @class BI.MultiLayerSelectTreeMidPlusGroupNode
* @extends BI.NodeButton
*/
BI.MultiLayerSelectTreeMidPlusGroupNode = BI.inherit(BI.NodeButton, {
_defaultConfig: function () {
var conf = BI.MultiLayerSelectTreeMidPlusGroupNode.superclass._defaultConfig.apply(this, arguments);
return BI.extend(conf, {
extraCls: "bi-multilayer-select-tree-mid-plus-group-node bi-list-item-active",
layer: 0, // 第几层级
id: "",
pId: "",
readonly: true,
open: false,
height: 24
});
},
_init: function () {
BI.MultiLayerSelectTreeMidPlusGroupNode.superclass._init.apply(this, arguments);
var self = this, o = this.options;
this.node = BI.createWidget({
type: "bi.select_tree_mid_plus_group_node",
cls: "bi-list-item-none",
stopPropagation: true,
logic: {
dynamic: true
},
id: o.id,
pId: o.pId,
keyword: o.keyword,
open: o.open,
height: o.height,
hgap: o.hgap,
text: o.text,
value: o.value,
py: o.py
});
this.node.on(BI.Controller.EVENT_CHANGE, function (type) {
self.setSelected(self.isSelected());
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
});
var items = [];
items.push({
el: this.node,
lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2
});
BI.createWidget({
type: "bi.horizontal_adapt",
element: this,
columnSize: BI.makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2),
items: items
});
},
doRedMark: function () {
this.node.doRedMark.apply(this.node, arguments);
},
unRedMark: function () {
this.node.unRedMark.apply(this.node, arguments);
},
isSelected: function () {
return this.node.isSelected();
},
setSelected: function (b) {
BI.MultiLayerSelectTreeMidPlusGroupNode.superclass.setSelected.apply(this, arguments);
this.node.setSelected(b);
},
doClick: function () {
BI.MultiLayerSelectTreeMidPlusGroupNode.superclass.doClick.apply(this, arguments);
this.node.setSelected(this.isSelected());
},
setOpened: function (v) {
BI.MultiLayerSelectTreeMidPlusGroupNode.superclass.setOpened.apply(this, arguments);
this.node.setOpened(v);
}
});
BI.shortcut("bi.multilayer_select_tree_mid_plus_group_node", BI.MultiLayerSelectTreeMidPlusGroupNode);

92
src/widget/multilayerselecttree/node/node.plus.js

@ -1,92 +0,0 @@
/**
* 加号表示的组节点
*
* Created by GUY on 2016/1/27.
* @class BI.MultiLayerSelectTreePlusGroupNode
* @extends BI.NodeButton
*/
BI.MultiLayerSelectTreePlusGroupNode = BI.inherit(BI.NodeButton, {
_defaultConfig: function () {
var conf = BI.MultiLayerSelectTreePlusGroupNode.superclass._defaultConfig.apply(this, arguments);
return BI.extend(conf, {
extraCls: "bi-multilayer-select-tree-first-plus-group-node bi-list-item-active",
layer: 0, // 第几层级
id: "",
pId: "",
readonly: true,
open: false,
height: 24
});
},
_init: function () {
BI.MultiLayerSelectTreePlusGroupNode.superclass._init.apply(this, arguments);
var self = this, o = this.options;
this.node = BI.createWidget({
type: "bi.select_tree_plus_group_node",
cls: "bi-list-item-none",
stopPropagation: true,
logic: {
dynamic: true
},
id: o.id,
pId: o.pId,
keyword: o.keyword,
open: o.open,
height: o.height,
hgap: o.hgap,
text: o.text,
value: o.value,
py: o.py
});
this.node.on(BI.Controller.EVENT_CHANGE, function (type) {
self.setSelected(self.isSelected());
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
});
var items = [];
items.push({
el: this.node,
lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2
});
BI.createWidget({
type: "bi.horizontal_adapt",
element: this,
columnSize: BI.makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2),
items: items
});
},
isOnce: function () {
return true;
},
doRedMark: function () {
this.node.doRedMark.apply(this.node, arguments);
},
unRedMark: function () {
this.node.unRedMark.apply(this.node, arguments);
},
isSelected: function () {
return this.node.isSelected();
},
setSelected: function (b) {
BI.MultiLayerSelectTreePlusGroupNode.superclass.setSelected.apply(this, arguments);
this.node.setSelected(b);
},
doClick: function () {
BI.NodeButton.superclass.doClick.apply(this, arguments);
this.node.setSelected(this.isSelected());
},
setOpened: function (v) {
BI.MultiLayerSelectTreePlusGroupNode.superclass.setOpened.apply(this, arguments);
this.node.setOpened(v);
}
});
BI.shortcut("bi.multilayer_select_tree_plus_group_node", BI.MultiLayerSelectTreePlusGroupNode);

2
src/widget/multilayersingletree/index.js

@ -3,5 +3,3 @@ export { MultiLayerSingleTreeInsertSearchPane } from "./multilayersingletree.ins
export { MultiLayerSingleLevelTree } from "./multilayersingletree.leveltree"; export { MultiLayerSingleLevelTree } from "./multilayersingletree.leveltree";
export { MultiLayerSingleTreePopup } from "./multilayersingletree.popup"; export { MultiLayerSingleTreePopup } from "./multilayersingletree.popup";
export { MultiLayerSingleTreeTrigger } from "./multilayersingletree.trigger"; export { MultiLayerSingleTreeTrigger } from "./multilayersingletree.trigger";
export * from "./node";
export * from "./treeitem";

114
src/widget/multilayersingletree/multilayersingletree.combo.js

@ -1,4 +1,14 @@
import { shortcut, Widget, extend, emptyFn, isKey, toPix, AbsoluteLayout, nextTick, isArray } from "@/core"; import {
shortcut,
Widget,
extend,
emptyFn,
isKey,
toPix,
AbsoluteLayout,
nextTick,
isArray
} from "@/core";
import { SingleTreeTrigger } from "../singletree/singletree.trigger"; import { SingleTreeTrigger } from "../singletree/singletree.trigger";
import { MultiLayerSingleTreePopup } from "./multilayersingletree.popup"; import { MultiLayerSingleTreePopup } from "./multilayersingletree.popup";
import { Combo } from "@/base"; import { Combo } from "@/base";
@ -37,7 +47,9 @@ export class MultiLayerSingleTreeCombo extends Widget {
o = this.options; o = this.options;
const cls = const cls =
(o.simple ? "bi-border-bottom bi-focus-shadow " : "bi-border bi-border-radius bi-focus-shadow ") + (o.simple
? "bi-border-bottom bi-focus-shadow "
: "bi-border bi-border-radius bi-focus-shadow ") +
(isKey(o.status) ? `status-${o.status}` : ""); (isKey(o.status) ? `status-${o.status}` : "");
const baseConfig = this._getBaseConfig(); const baseConfig = this._getBaseConfig();
@ -73,7 +85,7 @@ export class MultiLayerSingleTreeCombo extends Widget {
height: toPix(o.height, 2), height: toPix(o.height, 2),
el: { el: {
type: SingleTreeTrigger.xtype, type: SingleTreeTrigger.xtype,
ref (_ref) { ref(_ref) {
self.textTrigger = _ref; self.textTrigger = _ref;
}, },
text: o.text, text: o.text,
@ -93,35 +105,38 @@ export class MultiLayerSingleTreeCombo extends Widget {
_getBaseConfig() { _getBaseConfig() {
const self = this, const self = this,
o = this.options; o = this.options;
return { return {
type: Combo.xtype, type: Combo.xtype,
container: o.container, container: o.container,
destroyWhenHide: o.destroyWhenHide, destroyWhenHide: o.destroyWhenHide,
adjustLength: 2, adjustLength: 2,
ref (_ref) { ref(_ref) {
self.combo = _ref; self.combo = _ref;
}, },
popup: { popup: {
el: { el: {
type: "bi.multilayer_single_tree_popup", type: MultiLayerSingleTreePopup.xtype,
isDefaultInit: o.isDefaultInit, isDefaultInit: o.isDefaultInit,
itemsCreator: o.itemsCreator, itemsCreator: o.itemsCreator,
items: o.items, items: o.items,
ref (_ref) { ref(_ref) {
self.trigger && self.trigger.getSearcher().setAdapter(_ref); self.trigger &&
self.trigger.getSearcher().setAdapter(_ref);
}, },
listeners: [ listeners: [
{ {
eventName: MultiLayerSingleTreePopup.EVENT_CHANGE, eventName: MultiLayerSingleTreePopup.EVENT_CHANGE,
action () { action() {
self.setValue(this.getValue()); self.setValue(this.getValue());
self.combo.hideView(); self.combo.hideView();
self.fireEvent(MultiLayerSingleTreeCombo.EVENT_CHANGE); self.fireEvent(
MultiLayerSingleTreeCombo.EVENT_CHANGE
);
}, },
} }
], ],
onLoaded () { onLoaded() {
nextTick(() => { nextTick(() => {
self.combo.adjustWidth(); self.combo.adjustWidth();
self.combo.adjustHeight(); self.combo.adjustHeight();
@ -137,8 +152,10 @@ export class MultiLayerSingleTreeCombo extends Widget {
listeners: [ listeners: [
{ {
eventName: Combo.EVENT_BEFORE_POPUPVIEW, eventName: Combo.EVENT_BEFORE_POPUPVIEW,
action () { action() {
self.fireEvent(MultiLayerSingleTreeCombo.EVENT_BEFORE_POPUPVIEW); self.fireEvent(
MultiLayerSingleTreeCombo.EVENT_BEFORE_POPUPVIEW
);
}, },
} }
], ],
@ -148,15 +165,15 @@ export class MultiLayerSingleTreeCombo extends Widget {
_getSearchConfig() { _getSearchConfig() {
const self = this, const self = this,
o = this.options; o = this.options;
return { return {
el: { el: {
type: "bi.multilayer_single_tree_trigger", type: MultiLayerSingleTreeTrigger.xtype,
container: o.container, container: o.container,
allowInsertValue: o.allowInsertValue, allowInsertValue: o.allowInsertValue,
allowSearchValue: o.allowSearchValue, allowSearchValue: o.allowSearchValue,
cls: "multilayer-single-tree-trigger", cls: "multilayer-single-tree-trigger",
ref (_ref) { ref(_ref) {
self.trigger = _ref; self.trigger = _ref;
}, },
watermark: o.watermark, watermark: o.watermark,
@ -173,70 +190,85 @@ export class MultiLayerSingleTreeCombo extends Widget {
listeners: [ listeners: [
{ {
eventName: MultiLayerSingleTreeTrigger.EVENT_CHANGE, eventName: MultiLayerSingleTreeTrigger.EVENT_CHANGE,
action () { action() {
self.setValue(this.getValue()); self.setValue(this.getValue());
self.combo.hideView(); self.combo.hideView();
self.fireEvent(MultiLayerSingleTreeCombo.EVENT_CHANGE); self.fireEvent(
MultiLayerSingleTreeCombo.EVENT_CHANGE
);
}, },
}, },
{ {
eventName: MultiLayerSingleTreeTrigger.EVENT_FOCUS, eventName: MultiLayerSingleTreeTrigger.EVENT_FOCUS,
action () { action() {
self.fireEvent(MultiLayerSingleTreeCombo.EVENT_FOCUS); self.fireEvent(
MultiLayerSingleTreeCombo.EVENT_FOCUS
);
}, },
}, },
{ {
eventName: MultiLayerSingleTreeTrigger.EVENT_BLUR, eventName: MultiLayerSingleTreeTrigger.EVENT_BLUR,
action () { action() {
self.fireEvent(MultiLayerSingleTreeCombo.EVENT_BLUR); self.fireEvent(
MultiLayerSingleTreeCombo.EVENT_BLUR
);
}, },
}, },
{ {
eventName: MultiLayerSingleTreeTrigger.EVENT_SEARCHING, eventName: MultiLayerSingleTreeTrigger.EVENT_SEARCHING,
action () { action() {
self.fireEvent(MultiLayerSingleTreeCombo.EVENT_SEARCHING); self.fireEvent(
MultiLayerSingleTreeCombo.EVENT_SEARCHING
);
}, },
}, },
{ {
eventName: MultiLayerSingleTreeTrigger.EVENT_STOP, eventName: MultiLayerSingleTreeTrigger.EVENT_STOP,
action () { action() {
self.fireEvent(MultiLayerSingleTreeCombo.EVENT_STOP); self.fireEvent(
MultiLayerSingleTreeCombo.EVENT_STOP
);
}, },
}, },
{ {
eventName: MultiLayerSingleTreeTrigger.EVENT_ADD_ITEM, eventName: MultiLayerSingleTreeTrigger.EVENT_ADD_ITEM,
action () { action() {
const value = self.trigger.getSearcher().getKeyword(); const value = self.trigger.getSearcher().getKeyword();
self.combo.setValue([value]); self.combo.setValue([value]);
self.combo.hideView(); self.combo.hideView();
self.fireEvent(MultiLayerSingleTreeCombo.EVENT_CHANGE); self.fireEvent(
MultiLayerSingleTreeCombo.EVENT_CHANGE
);
}, },
} }
], ],
}, },
toggle: !o.allowEdit, toggle: !o.allowEdit,
hideChecker (e) { hideChecker(e) {
// 新增传配置container后对应hideChecker的修改 // 新增传配置container后对应hideChecker的修改
// IE11下,popover(position: fixed)下放置下拉控件(position: fixed), 滚动的时候会异常卡顿 // IE11下,popover(position: fixed)下放置下拉控件(position: fixed), 滚动的时候会异常卡顿
// 通过container参数将popup放置于popover之外解决此问题, 其他下拉控件由于元素少或者有分页,所以 // 通过container参数将popup放置于popover之外解决此问题, 其他下拉控件由于元素少或者有分页,所以
// 卡顿不明显, 先在此做尝试, 并在FineUI特殊处理待解决文档中标记跟踪 // 卡顿不明显, 先在此做尝试, 并在FineUI特殊处理待解决文档中标记跟踪
return o.container && return o.container &&
self.trigger.getSearcher().isSearching() && self.trigger.getSearcher().isSearching() &&
self.trigger.getSearcher().getView().element.find(e.target).length > 0 self.trigger.getSearcher().getView().element.find(e.target)
.length > 0
? false ? false
: self.triggerBtn?.element.find(e.target).length === 0; : self.triggerBtn?.element.find(e.target).length === 0;
}, },
listeners: [ listeners: [
{ {
eventName: Combo.EVENT_AFTER_HIDEVIEW, eventName: Combo.EVENT_AFTER_HIDEVIEW,
action () { action() {
self.trigger.stopEditing(); self.trigger.stopEditing();
}, },
}, },
{ {
eventName: Combo.EVENT_BEFORE_POPUPVIEW, eventName: Combo.EVENT_BEFORE_POPUPVIEW,
action () { action() {
self.fireEvent(MultiLayerSingleTreeCombo.EVENT_BEFORE_POPUPVIEW); self.fireEvent(
MultiLayerSingleTreeCombo.EVENT_BEFORE_POPUPVIEW
);
}, },
} }
], ],
@ -246,11 +278,11 @@ export class MultiLayerSingleTreeCombo extends Widget {
_getTriggerIconButton() { _getTriggerIconButton() {
const self = this, const self = this,
o = this.options; o = this.options;
return { return {
type: TriggerIconButton.xtype, type: TriggerIconButton.xtype,
cls: "bi-trigger trigger-icon-button", cls: "bi-trigger trigger-icon-button",
ref (_ref) { ref(_ref) {
self.triggerBtn = _ref; self.triggerBtn = _ref;
}, },
width: toPix(o.height, 2), width: toPix(o.height, 2),
@ -258,7 +290,7 @@ export class MultiLayerSingleTreeCombo extends Widget {
listeners: [ listeners: [
{ {
eventName: TriggerIconButton.EVENT_CHANGE, eventName: TriggerIconButton.EVENT_CHANGE,
action () { action() {
if (self.combo.isViewVisible()) { if (self.combo.isViewVisible()) {
self.combo.hideView(); self.combo.hideView();
} else { } else {
@ -271,7 +303,9 @@ export class MultiLayerSingleTreeCombo extends Widget {
} }
getSearcher() { getSearcher() {
return this.trigger ? this.trigger.getSearcher() : this.textTrigger.getTextor(); return this.trigger
? this.trigger.getSearcher()
: this.textTrigger.getTextor();
} }
setValue(v) { setValue(v) {
@ -292,7 +326,9 @@ export class MultiLayerSingleTreeCombo extends Widget {
} }
setTipType(v) { setTipType(v) {
this.trigger ? this.trigger.setTipType(v) : this.textTrigger.setTipType(v); this.trigger
? this.trigger.setTipType(v)
: this.textTrigger.setTipType(v);
} }
populate(items) { populate(items) {

41
src/widget/multilayersingletree/multilayersingletree.insert.search.pane.js

@ -9,8 +9,8 @@ import {
isEmptyArray, isEmptyArray,
isArray isArray
} from "@/core"; } from "@/core";
import { MultiLayerSelectLevelTree } from "../multilayerselecttree/multilayerselecttree.leveltree";
import { TextButton } from "@/base"; import { TextButton } from "@/base";
import { MultiLayerSingleLevelTree } from "./multilayersingletree.leveltree";
@shortcut() @shortcut()
export class MultiLayerSingleTreeInsertSearchPane extends Widget { export class MultiLayerSingleTreeInsertSearchPane extends Widget {
@ -31,18 +31,19 @@ export class MultiLayerSingleTreeInsertSearchPane extends Widget {
} }
render() { render() {
const o = this.options; const self = this,
o = this.options;
this.tree = createWidget({ this.tree = createWidget({
type: "bi.multilayer_single_level_tree", type: MultiLayerSingleLevelTree.xtype,
isDefaultInit: o.isDefaultInit, isDefaultInit: o.isDefaultInit,
items: o.items, items: o.items,
itemsCreator: itemsCreator:
o.itemsCreator === emptyFn o.itemsCreator === emptyFn
? emptyFn ? emptyFn
: (op, callback) => { : function (op, callback) {
o.itemsCreator(op, res => { o.itemsCreator(op, res => {
callback(res); callback(res);
this.setKeyword(o.keywordGetter()); self.setKeyword(o.keywordGetter());
}); });
}, },
keywordGetter: o.keywordGetter, keywordGetter: o.keywordGetter,
@ -51,19 +52,21 @@ export class MultiLayerSingleTreeInsertSearchPane extends Widget {
listeners: [ listeners: [
{ {
eventName: Controller.EVENT_CHANGE, eventName: Controller.EVENT_CHANGE,
action: (...args) => { action() {
this.fireEvent(Controller.EVENT_CHANGE, ...args); self.fireEvent(Controller.EVENT_CHANGE, arguments);
}, },
}, },
{ {
eventName: MultiLayerSelectLevelTree.EVENT_CHANGE, eventName: MultiLayerSingleLevelTree.EVENT_CHANGE,
action: () => { action() {
this.fireEvent(MultiLayerSingleTreeInsertSearchPane.EVENT_CHANGE); self.fireEvent(
MultiLayerSingleTreeInsertSearchPane.EVENT_CHANGE
);
}, },
} }
], ],
}); });
return { return {
type: VerticalLayout.xtype, type: VerticalLayout.xtype,
scrolly: false, scrolly: false,
@ -77,11 +80,14 @@ export class MultiLayerSingleTreeInsertSearchPane extends Widget {
height: 24, height: 24,
cls: "bi-high-light", cls: "bi-high-light",
hgap: 5, hgap: 5,
ref: _ref => { ref(_ref) {
this.addNotMatchTip = _ref; self.addNotMatchTip = _ref;
}, },
handler: () => { handler() {
this.fireEvent(MultiLayerSingleTreeInsertSearchPane.EVENT_ADD_ITEM, o.keywordGetter()); self.fireEvent(
MultiLayerSingleTreeInsertSearchPane.EVENT_ADD_ITEM,
o.keywordGetter()
);
}, },
}, },
this.tree this.tree
@ -92,7 +98,10 @@ export class MultiLayerSingleTreeInsertSearchPane extends Widget {
setKeyword(keyword) { setKeyword(keyword) {
const showTip = isEmptyArray(this.tree.getAllLeaves()); const showTip = isEmptyArray(this.tree.getAllLeaves());
this.addNotMatchTip.setVisible(showTip); this.addNotMatchTip.setVisible(showTip);
showTip && this.addNotMatchTip.setText(i18nText("BI-Basic_Click_To_Add_Text", keyword)); showTip &&
this.addNotMatchTip.setText(
i18nText("BI-Basic_Click_To_Add_Text", keyword)
);
} }
getValue() { getValue() {

46
src/widget/multilayersingletree/multilayersingletree.leveltree.js

@ -66,7 +66,11 @@ export class MultiLayerSingleLevelTree extends Pane {
} }
node.keyword = node.keyword || keyword; node.keyword = node.keyword || keyword;
extend.pNode = pNode; extend.pNode = pNode;
if (node.isParent === true || node.parent === true || isNotEmptyArray(node.children)) { if (
node.isParent === true ||
node.parent === true ||
isNotEmptyArray(node.children)
) {
extend.type = BasicTreeNode.xtype; extend.type = BasicTreeNode.xtype;
extend.selectable = false; extend.selectable = false;
defaults(node, extend); defaults(node, extend);
@ -76,7 +80,7 @@ export class MultiLayerSingleLevelTree extends Pane {
defaults(node, extend); defaults(node, extend);
} }
}); });
return nodes; return nodes;
} }
@ -106,12 +110,12 @@ export class MultiLayerSingleLevelTree extends Pane {
items: this._formatItems(Tree.transformToTreeFormat(nodes), 0), items: this._formatItems(Tree.transformToTreeFormat(nodes), 0),
value: o.value, value: o.value,
itemsCreator (op, callback) { itemsCreator(op, callback) {
op.times === 1 && op.times === 1 &&
!op.node && !op.node &&
nextTick(() => { nextTick(() => {
self.loading(); self.loading();
}); });
o.itemsCreator(op, ob => { o.itemsCreator(op, ob => {
hasNext = ob.hasNext; hasNext = ob.hasNext;
op.times === 1 && !op.node && self._populate(ob.items); op.times === 1 && !op.node && self._populate(ob.items);
@ -124,10 +128,10 @@ export class MultiLayerSingleLevelTree extends Pane {
); );
self.setValue(self.storeValue); self.setValue(self.storeValue);
op.times === 1 && op.times === 1 &&
!op.node && !op.node &&
nextTick(() => { nextTick(() => {
self.loaded(); self.loaded();
}); });
}); });
}, },
@ -136,7 +140,10 @@ export class MultiLayerSingleLevelTree extends Pane {
isDefaultInit: o.itemsCreator !== emptyFn, isDefaultInit: o.itemsCreator !== emptyFn,
el: { el: {
type: ButtonTree.xtype, type: ButtonTree.xtype,
chooseType: o.chooseType === Selection.None ? Selection.None : Selection.Default, // 不使用buttontree内部getValue逻辑 chooseType:
o.chooseType === Selection.None
? Selection.None
: Selection.Default, // 不使用buttontree内部getValue逻辑
behaviors: o.behaviors, behaviors: o.behaviors,
layouts: [ layouts: [
{ {
@ -144,7 +151,7 @@ export class MultiLayerSingleLevelTree extends Pane {
} }
], ],
}, },
hasNext () { hasNext() {
return hasNext; return hasNext;
}, },
}, },
@ -173,19 +180,26 @@ export class MultiLayerSingleLevelTree extends Pane {
this._populate(nodes); this._populate(nodes);
isNull(nodes) isNull(nodes)
? this.tree.populate() ? this.tree.populate()
: this.tree.populate(this._formatItems(Tree.transformToTreeFormat(nodes), 0)); : this.tree.populate(
this._formatItems(Tree.transformToTreeFormat(nodes), 0)
);
} }
setValue(v) { setValue(v) {
// getValue依赖于storeValue, 那么不选的时候就不要更新storeValue了 // getValue依赖于storeValue, 那么不选的时候就不要更新storeValue了
if (this.options.chooseType !== Selection.None) { if (this.options.chooseType === Selection.None) {
} else {
this.storeValue = v; this.storeValue = v;
this.tree.setValue(v); this.tree.setValue(v);
} }
} }
getValue() { getValue() {
return isArray(this.storeValue) ? this.storeValue : isNull(this.storeValue) ? [] : [this.storeValue]; return isArray(this.storeValue)
? this.storeValue
: isNull(this.storeValue)
? []
: [this.storeValue];
} }
getAllLeaves() { getAllLeaves() {

27
src/widget/multilayersingletree/multilayersingletree.popup.js

@ -1,4 +1,14 @@
import { shortcut, Widget, extend, i18nText, emptyFn, createWidget, Controller, VerticalLayout, isArray, pixFormat } from "@/core"; import {
shortcut,
Widget,
extend,
i18nText,
emptyFn,
createWidget,
Controller,
VerticalLayout,
isArray
} from "@/core";
import { MultiLayerSingleLevelTree } from "./multilayersingletree.leveltree"; import { MultiLayerSingleLevelTree } from "./multilayersingletree.leveltree";
@shortcut() @shortcut()
@ -22,7 +32,8 @@ export class MultiLayerSingleTreePopup extends Widget {
_init() { _init() {
super._init(...arguments); super._init(...arguments);
const o = this.options; const self = this,
o = this.options;
this.tree = createWidget({ this.tree = createWidget({
type: MultiLayerSingleLevelTree.xtype, type: MultiLayerSingleLevelTree.xtype,
@ -32,8 +43,8 @@ export class MultiLayerSingleTreePopup extends Widget {
keywordGetter: o.keywordGetter, keywordGetter: o.keywordGetter,
value: o.value, value: o.value,
scrollable: null, scrollable: null,
onLoaded: () => { onLoaded() {
this.tree.check(); self.tree.check();
o.onLoaded(); o.onLoaded();
}, },
}); });
@ -47,15 +58,15 @@ export class MultiLayerSingleTreePopup extends Widget {
items: [this.tree], items: [this.tree],
}); });
this.tree.on(Controller.EVENT_CHANGE, (...args) => { this.tree.on(Controller.EVENT_CHANGE, function () {
this.fireEvent(Controller.EVENT_CHANGE, ...args); self.fireEvent(Controller.EVENT_CHANGE, arguments);
}); });
this.tree.on(MultiLayerSingleLevelTree.EVENT_CHANGE, () => { this.tree.on(MultiLayerSingleLevelTree.EVENT_CHANGE, () => {
this.fireEvent(MultiLayerSingleTreePopup.EVENT_CHANGE); self.fireEvent(MultiLayerSingleTreePopup.EVENT_CHANGE);
}); });
this.tree.css("min-height", pixFormat(o.minHeight - 10)); this.tree.css("min-height", BI.pixFormat(o.minHeight - 10));
} }
getValue() { getValue() {

76
src/widget/multilayersingletree/multilayersingletree.trigger.js

@ -2,7 +2,6 @@ import {
shortcut, shortcut,
emptyFn, emptyFn,
i18nText, i18nText,
bind,
isNotNull, isNotNull,
isKey, isKey,
HorizontalFillLayout, HorizontalFillLayout,
@ -41,14 +40,14 @@ export class MultiLayerSingleTreeTrigger extends Trigger {
itemsCreator: emptyFn, itemsCreator: emptyFn,
watermark: i18nText("BI-Basic_Search"), watermark: i18nText("BI-Basic_Search"),
allowSearchValue: false, allowSearchValue: false,
title: bind(this._getShowText, this), title: () => this._getShowText(),
}; };
} }
render() { render() {
const self = this, const self = this,
o = this.options; o = this.options;
if (o.itemsCreator === emptyFn) { if (o.itemsCreator === BI.emptyFn) {
this._initData(); this._initData();
} }
@ -58,7 +57,7 @@ export class MultiLayerSingleTreeTrigger extends Trigger {
{ {
el: { el: {
type: Searcher.xtype, type: Searcher.xtype,
ref () { ref() {
self.searcher = this; self.searcher = this;
}, },
masker: isNotNull(o.container) masker: isNotNull(o.container)
@ -72,11 +71,13 @@ export class MultiLayerSingleTreeTrigger extends Trigger {
isAutoSearch: false, isAutoSearch: false,
el: { el: {
type: DefaultTextEditor.xtype, type: DefaultTextEditor.xtype,
ref () { ref() {
self.editor = this; self.editor = this;
}, },
defaultText: o.defaultText, defaultText: o.defaultText,
text: isKey(o.value) ? this._digest(o.value) : o.text, text: isKey(o.value)
? this._digest(o.value)
: o.text,
value: o.value, value: o.value,
height: o.height, height: o.height,
tipText: "", tipText: "",
@ -84,20 +85,26 @@ export class MultiLayerSingleTreeTrigger extends Trigger {
listeners: [ listeners: [
{ {
eventName: StateEditor.EVENT_FOCUS, eventName: StateEditor.EVENT_FOCUS,
action () { action() {
self.fireEvent(MultiLayerSingleTreeTrigger.EVENT_FOCUS); self.fireEvent(
MultiLayerSingleTreeTrigger.EVENT_FOCUS
);
}, },
}, },
{ {
eventName: StateEditor.EVENT_BLUR, eventName: StateEditor.EVENT_BLUR,
action () { action() {
self.fireEvent(MultiLayerSingleTreeTrigger.EVENT_BLUR); self.fireEvent(
MultiLayerSingleTreeTrigger.EVENT_BLUR
);
}, },
}, },
{ {
eventName: StateEditor.EVENT_CHANGE, eventName: StateEditor.EVENT_CHANGE,
action () { action() {
self.fireEvent(MultiLayerSingleTreeTrigger.EVENT_SEARCHING); self.fireEvent(
MultiLayerSingleTreeTrigger.EVENT_SEARCHING
);
}, },
} }
], ],
@ -113,28 +120,34 @@ export class MultiLayerSingleTreeTrigger extends Trigger {
op.keyword = self.editor.getValue(); op.keyword = self.editor.getValue();
o.itemsCreator(op, callback); o.itemsCreator(op, callback);
}, },
keywordGetter () { keywordGetter() {
return self.editor.getValue(); return self.editor.getValue();
}, },
cls: "bi-card", cls: "bi-card",
listeners: [ listeners: [
{ {
eventName: MultiLayerSingleTreeInsertSearchPane.EVENT_ADD_ITEM, eventName:
action () { MultiLayerSingleTreeInsertSearchPane.EVENT_ADD_ITEM,
self.options.text = self.getSearcher().getKeyword(); action() {
self.fireEvent(MultiLayerSingleTreeTrigger.EVENT_ADD_ITEM); self.options.text = self
.getSearcher()
.getKeyword();
self.fireEvent(
MultiLayerSingleTreeTrigger.EVENT_ADD_ITEM
);
}, },
} }
], ],
ref (_ref) { ref(_ref) {
self.popup = _ref; self.popup = _ref;
}, },
}, },
onSearch (obj, callback) { onSearch(obj, callback) {
const keyword = obj.keyword; const keyword = obj.keyword;
if (o.itemsCreator === emptyFn) { if (o.itemsCreator === BI.emptyFn) {
callback(self._getSearchItems(keyword)); callback(self._getSearchItems(keyword));
o.allowInsertValue && self.popup.setKeyword(keyword); o.allowInsertValue &&
self.popup.setKeyword(keyword);
} else { } else {
callback(); callback();
} }
@ -142,8 +155,10 @@ export class MultiLayerSingleTreeTrigger extends Trigger {
listeners: [ listeners: [
{ {
eventName: Searcher.EVENT_CHANGE, eventName: Searcher.EVENT_CHANGE,
action () { action() {
self.fireEvent(MultiLayerSingleTreeTrigger.EVENT_CHANGE); self.fireEvent(
MultiLayerSingleTreeTrigger.EVENT_CHANGE
);
}, },
} }
], ],
@ -169,16 +184,21 @@ export class MultiLayerSingleTreeTrigger extends Trigger {
const items = []; const items = [];
this.tree.traverse(node => { this.tree.traverse(node => {
const find = Func.getSearchResult( const find = Func.getSearchResult(
self.tree.isRoot(node) ? [] : concat([node.text], o.allowSearchValue ? [node.value] : []), self.tree.isRoot(node)
? []
: concat(
[node.text],
o.allowSearchValue ? [node.value] : []
),
keyword keyword
); );
if (find.find.length > 0 || find.match.length > 0) { if (find.find.length > 0 || find.match.length > 0) {
items.push(node); items.push(node);
return true; return true;
} }
}); });
return this._fillTreeStructure4Search(items, "id"); return this._fillTreeStructure4Search(items, "id");
} }
@ -201,7 +221,7 @@ export class MultiLayerSingleTreeTrigger extends Trigger {
const children = self._getChildren(child); const children = self._getChildren(child);
nodes = nodes.concat(children); nodes = nodes.concat(children);
}); });
return node.children.concat(nodes); return node.children.concat(nodes);
} }
@ -224,7 +244,7 @@ export class MultiLayerSingleTreeTrigger extends Trigger {
result.push(pNode); result.push(pNode);
} }
} }
return uniqBy( return uniqBy(
map(result, (idx, node) => self._createJson(node, node.open)), map(result, (idx, node) => self._createJson(node, node.open)),
"id" "id"

4
src/widget/multilayersingletree/node/index.js

@ -1,4 +0,0 @@
export { MultiLayerSingleTreeFirstPlusGroupNode } from "./node.first.plus";
export { MultiLayerSingleTreeLastPlusGroupNode } from "./node.last.plus";
export { MultiLayerSingleTreeMidPlusGroupNode } from "./node.mid.plus";
export { MultiLayerSingleTreePlusGroupNode } from "./node.plus";

104
src/widget/multilayersingletree/node/node.first.plus.js

@ -1,104 +0,0 @@
import {
shortcut,
extend,
createWidget,
makeArray,
HorizontalAdaptLayout,
isNotNull,
Controller,
Events
} from "@/core";
import { NodeButton } from "@/base";
import { FirstPlusGroupNode } from "@/case";
@shortcut()
export class MultiLayerSingleTreeFirstPlusGroupNode extends NodeButton {
static xtype = "bi.multilayer_single_tree_first_plus_group_node";
_defaultConfig() {
const conf = super._defaultConfig(...arguments);
return extend(conf, {
extraCls: "bi-multilayer-single-tree-first-plus-group-node bi-list-item",
layer: 0, // 第几层级
id: "",
pId: "",
open: false,
height: 24,
});
}
_init() {
super._init(...arguments);
const o = this.options;
this.node = this._createNode();
const items = [];
items.push({
el: this.node,
lgap: (o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT) / 2,
});
createWidget({
type: HorizontalAdaptLayout.xtype,
element: this,
columnSize: makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2),
items,
});
}
doRedMark() {
this.node.doRedMark(...arguments);
}
unRedMark() {
this.node.unRedMark(...arguments);
}
doClick() {
super.doClick(...arguments);
this.node.setSelected(this.isSelected());
}
setOpened(v) {
super.setOpened(...arguments);
if (isNotNull(this.node)) {
this.node.setOpened(v);
}
}
_createNode() {
const o = this.options;
return createWidget({
type: FirstPlusGroupNode.xtype,
cls: "bi-list-item-none",
logic: {
dynamic: true,
},
id: o.id,
pId: o.pId,
open: o.open,
isLastNode: o.isLastNode,
height: o.height,
hgap: o.hgap,
text: o.text,
value: o.value,
py: o.py,
keyword: o.keyword,
listeners: [
{
eventName: Controller.EVENT_CHANGE,
action: (...args) => {
const [type] = args;
if (type === Events.CLICK) {
// 本身实现click功能
return;
}
this.fireEvent(Controller.EVENT_CHANGE, ...args);
},
}
],
});
}
}

103
src/widget/multilayersingletree/node/node.last.plus.js

@ -1,103 +0,0 @@
import {
shortcut,
extend,
createWidget,
makeArray,
HorizontalAdaptLayout,
isNotNull,
Controller,
Events
} from "@/core";
import { NodeButton } from "@/base";
import { LastPlusGroupNode } from "@/case";
@shortcut()
export class MultiLayerSingleTreeLastPlusGroupNode extends NodeButton {
static xtype = "bi.multilayer_single_tree_last_plus_group_node";
_defaultConfig() {
const conf = super._defaultConfig(...arguments);
return extend(conf, {
extraCls: "bi-multilayer-single-tree-last-plus-group-node bi-list-item",
layer: 0, // 第几层级
id: "",
pId: "",
open: false,
height: 24,
});
}
_init() {
super._init(...arguments);
const o = this.options;
this.node = this._createNode();
const items = [];
items.push({
el: this.node,
lgap: (o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT) / 2,
});
createWidget({
type: HorizontalAdaptLayout.xtype,
element: this,
columnSize: makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2),
items,
});
}
doRedMark() {
this.node.doRedMark(...arguments);
}
unRedMark() {
this.node.unRedMark(...arguments);
}
doClick() {
super.doClick(...arguments);
this.node.setSelected(this.isSelected());
}
setOpened(v) {
super.setOpened(...arguments);
if (isNotNull(this.node)) {
this.node.setOpened(v);
}
}
_createNode() {
const o = this.options;
return createWidget({
type: LastPlusGroupNode.xtype,
cls: "bi-list-item-none",
logic: {
dynamic: true,
},
id: o.id,
pId: o.pId,
open: o.open,
height: o.height,
hgap: o.hgap,
text: o.text,
value: o.value,
py: o.py,
keyword: o.keyword,
listeners: [
{
eventName: Controller.EVENT_CHANGE,
action: (...args) => {
const [type] = args;
if (type === Events.CLICK) {
// 本身实现click功能
return;
}
this.fireEvent(Controller.EVENT_CHANGE, ...args);
},
}
],
});
}
}

103
src/widget/multilayersingletree/node/node.mid.plus.js

@ -1,103 +0,0 @@
import {
shortcut,
extend,
createWidget,
makeArray,
HorizontalAdaptLayout,
isNotNull,
Controller,
Events
} from "@/core";
import { NodeButton } from "@/base";
import { MidPlusGroupNode } from "@/case";
@shortcut()
export class MultiLayerSingleTreeMidPlusGroupNode extends NodeButton {
static xtype = "bi.multilayer_single_tree_mid_plus_group_node";
_defaultConfig() {
const conf = super._defaultConfig(...arguments);
return extend(conf, {
extraCls: "bi-multilayer-single-tree-mid-plus-group-node bi-list-item",
layer: 0, // 第几层级
id: "",
pId: "",
open: false,
height: 24,
});
}
_init() {
super._init(...arguments);
const o = this.options;
this.node = this._createNode();
const items = [];
items.push({
el: this.node,
lgap: (o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT) / 2,
});
createWidget({
type: HorizontalAdaptLayout.xtype,
element: this,
columnSize: makeArray(o.layer, 12),
items,
});
}
doRedMark() {
this.node.doRedMark(...arguments);
}
unRedMark() {
this.node.unRedMark(...arguments);
}
doClick() {
super.doClick(...arguments);
this.node.setSelected(this.isSelected());
}
setOpened(v) {
super.setOpened(...arguments);
if (isNotNull(this.node)) {
this.node.setOpened(v);
}
}
_createNode() {
const o = this.options;
return createWidget({
type: MidPlusGroupNode.xtype,
cls: "bi-list-item-none",
logic: {
dynamic: true,
},
id: o.id,
pId: o.pId,
open: o.open,
height: o.height,
hgap: o.hgap,
text: o.text,
value: o.value,
py: o.py,
keyword: o.keyword,
listeners: [
{
eventName: Controller.EVENT_CHANGE,
action: (...args) => {
const [type] = args;
if (type === Events.CLICK) {
// 本身实现click功能
return;
}
this.fireEvent(Controller.EVENT_CHANGE, ...args);
},
}
],
});
}
}

120
src/widget/multilayersingletree/node/node.plus.js

@ -1,120 +0,0 @@
import {
shortcut,
extend,
count,
contains,
createWidget,
makeArray,
Layout,
HorizontalAdaptLayout,
isNotNull,
Controller,
Events
} from "@/core";
import { NodeButton } from "@/base";
import { PlusGroupNode } from "@/case";
@shortcut()
export class MultiLayerSingleTreePlusGroupNode extends NodeButton {
static xtype = "bi.multilayer_single_tree_plus_group_node";
_defaultConfig() {
const conf = super._defaultConfig(...arguments);
return extend(conf, {
extraCls: "bi-multilayer-single-tree-plus-group-node bi-list-item",
layer: 0, // 第几层级
id: "",
pId: "",
open: false,
height: 24,
});
}
_init() {
super._init(...arguments);
const o = this.options;
this.node = this._createNode();
const needBlankLayers = [];
let pNode = o.pNode;
while (pNode) {
if (pNode.isLastNode) {
needBlankLayers.push(pNode.layer);
}
pNode = pNode.pNode;
}
const items = [];
count(0, o.layer, index => {
items.push({
type: Layout.xtype,
cls: contains(needBlankLayers, index) ? "" : "base-line-conn-background",
width: 12,
height: o.height,
});
});
items.push(this.node);
createWidget({
type: HorizontalAdaptLayout.xtype,
element: this,
columnSize: makeArray(o.layer, 12),
items,
});
}
doRedMark() {
this.node.doRedMark(...arguments);
}
unRedMark() {
this.node.unRedMark(...arguments);
}
doClick() {
super.doClick(...arguments);
this.node.setSelected(this.isSelected());
}
setOpened(v) {
super.setOpened(...arguments);
if (isNotNull(this.node)) {
this.node.setOpened(v);
}
}
_createNode() {
const o = this.options;
return createWidget({
type: PlusGroupNode.xtype,
cls: "bi-list-item-none",
logic: {
dynamic: true,
},
id: o.id,
pId: o.pId,
open: o.open,
isLastNode: o.isLastNode,
height: o.height,
hgap: o.hgap,
text: o.text,
value: o.value,
py: o.py,
keyword: o.keyword,
listeners: [
{
eventName: Controller.EVENT_CHANGE,
action: (...args) => {
const [type] = args;
if (type === Events.CLICK) {
// 本身实现click功能
return;
}
this.fireEvent(Controller.EVENT_CHANGE, ...args);
},
}
],
});
}
}

3
src/widget/multilayersingletree/treeitem/index.js

@ -1,3 +0,0 @@
export { MultiLayerSingleTreeFirstTreeLeafItem } from "./item.first.treeleaf";
export { MultiLayerSingleTreeLastTreeLeafItem } from "./item.last.treeleaf";
export { MultiLayerSingleTreeMidTreeLeafItem } from "./item.mid.treeleaf";

87
src/widget/multilayersingletree/treeitem/item.first.treeleaf.js

@ -1,87 +0,0 @@
import { shortcut, extend, createWidget, Controller, Events, makeArray, HorizontalAdaptLayout } from "@/core";
import { BasicButton } from "@/base";
@shortcut()
export class MultiLayerSingleTreeFirstTreeLeafItem extends BasicButton {
static xtype = "bi.multilayer_single_tree_first_tree_leaf_item";
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
extraCls: "bi-multilayer-single-tree-first-tree-leaf-item bi-list-item-active",
logic: {
dynamic: false,
},
layer: 0,
id: "",
pId: "",
height: 24,
});
}
_init() {
super._init(...arguments);
const self = this,
o = this.options;
this.item = createWidget({
type: "bi.first_tree_leaf_item",
cls: "bi-list-item-none",
logic: {
dynamic: true,
},
id: o.id,
pId: o.pId,
height: o.height,
hgap: o.hgap,
text: o.text,
value: o.value,
py: o.py,
keyword: o.keyword,
});
this.item.on(Controller.EVENT_CHANGE, function (type) {
if (type === Events.CLICK) {
// 本身实现click功能
return;
}
self.fireEvent(Controller.EVENT_CHANGE, arguments);
});
const items = [];
items.push({
el: this.item,
lgap: (o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT) / 2,
});
createWidget({
type: HorizontalAdaptLayout.xtype,
element: this,
columnSize: makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2),
items,
});
}
doHighLight() {
this.item.doHighLight(...arguments);
}
unHighLight() {
this.item.unHighLight(...arguments);
}
getId() {
return this.options.id;
}
getPId() {
return this.options.pId;
}
doClick() {
super.doClick(...arguments);
this.item.setSelected(this.isSelected());
}
setSelected(v) {
super.setSelected(...arguments);
this.item.setSelected(v);
}
}

87
src/widget/multilayersingletree/treeitem/item.last.treeleaf.js

@ -1,87 +0,0 @@
import { shortcut, extend, createWidget, Controller, Events, makeArray, HorizontalAdaptLayout } from "@/core";
import { BasicButton } from "@/base";
@shortcut()
export class MultiLayerSingleTreeLastTreeLeafItem extends BasicButton {
static xtype = "bi.multilayer_single_tree_last_tree_leaf_item";
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
extraCls: "bi-multilayer-single-tree-last-tree-leaf-item bi-list-item-active",
logic: {
dynamic: false,
},
layer: 0,
id: "",
pId: "",
height: 24,
});
}
_init() {
super._init(...arguments);
const self = this,
o = this.options;
this.item = createWidget({
type: "bi.last_tree_leaf_item",
cls: "bi-list-item-none",
logic: {
dynamic: true,
},
id: o.id,
pId: o.pId,
height: o.height,
hgap: o.hgap,
text: o.text,
value: o.value,
py: o.py,
keyword: o.keyword,
});
this.item.on(Controller.EVENT_CHANGE, function (type) {
if (type === Events.CLICK) {
// 本身实现click功能
return;
}
self.fireEvent(Controller.EVENT_CHANGE, arguments);
});
const items = [];
items.push({
el: this.item,
lgap: (o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT) / 2,
});
createWidget({
type: HorizontalAdaptLayout.xtype,
element: this,
columnSize: makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2),
items,
});
}
doHighLight() {
this.item.doHighLight(...arguments);
}
unHighLight() {
this.item.unHighLight(...arguments);
}
getId() {
return this.options.id;
}
getPId() {
return this.options.pId;
}
doClick() {
super.doClick(...arguments);
this.item.setSelected(this.isSelected());
}
setSelected(v) {
super.setSelected(...arguments);
this.item.setSelected(v);
}
}

87
src/widget/multilayersingletree/treeitem/item.mid.treeleaf.js

@ -1,87 +0,0 @@
import { shortcut, extend, createWidget, Controller, Events, makeArray, HorizontalAdaptLayout } from "@/core";
import { BasicButton } from "@/base";
@shortcut()
export class MultiLayerSingleTreeMidTreeLeafItem extends BasicButton {
static xtype = "bi.multilayer_single_tree_mid_tree_leaf_item";
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
extraCls: "bi-multilayer-single-tree-mid-tree-leaf-item bi-list-item-active",
logic: {
dynamic: false,
},
layer: 0,
id: "",
pId: "",
height: 24,
});
}
_init() {
super._init(...arguments);
const self = this,
o = this.options;
this.item = createWidget({
type: "bi.mid_tree_leaf_item",
cls: "bi-list-item-none",
logic: {
dynamic: true,
},
id: o.id,
pId: o.pId,
height: o.height,
hgap: o.hgap,
text: o.text,
value: o.value,
py: o.py,
keyword: o.keyword,
});
this.item.on(Controller.EVENT_CHANGE, function (type) {
if (type === Events.CLICK) {
// 本身实现click功能
return;
}
self.fireEvent(Controller.EVENT_CHANGE, arguments);
});
const items = [];
items.push({
el: this.item,
lgap: (o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT) / 2,
});
createWidget({
type: HorizontalAdaptLayout.xtype,
element: this,
columnSize: makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2),
items,
});
}
doHighLight() {
this.item.doHighLight(...arguments);
}
unHighLight() {
this.item.unHighLight(...arguments);
}
getId() {
return this.options.id;
}
getPId() {
return this.options.pId;
}
doClick() {
super.doClick(...arguments);
this.item.setSelected(this.isSelected());
}
setSelected(v) {
super.setSelected(...arguments);
this.item.setSelected(v);
}
}

6
src/widget/multiselect/index.js

@ -1,3 +1,9 @@
export { MultiSelectSearchPane } from "./search/multiselect.search.pane";
export { MultiSelectEditor } from "./trigger/editor.multiselect";
export { MultiSelectTrigger } from "./multiselect.trigger";
export { MultiSelectPopupView } from "./multiselect.popup.view";
export { MultiSelectSearcher } from "./trigger/searcher.multiselect";
export { MultiSelectCheckSelectedSwitcher } from "./trigger/switcher.checkselected";
export { MultiSelectCombo } from "./multiselect.combo"; export { MultiSelectCombo } from "./multiselect.combo";
export { MultiSelectNoBarCombo } from "./multiselect.combo.nobar"; export { MultiSelectNoBarCombo } from "./multiselect.combo.nobar";
export { MultiSelectInsertCombo } from "./multiselect.insert.combo"; export { MultiSelectInsertCombo } from "./multiselect.insert.combo";

5
src/widget/searchmultitextvaluecombo/index.js

@ -0,0 +1,5 @@
export { SearchMultiTextValueCombo } from "./multitextvalue.combo.search";
export { SearchMultiSelectPopupView } from "./multitextvalue.popup.view.search";
export { SearchMultiSelectTrigger } from "./multitextvalue.combo.trigger.search";
export { SearchMultiSelectLoader } from "./multitextvalue.loader.search";
export { SearchMultiSelectSearcher } from "./trigger/searcher.multitextvalue";

648
src/widget/searchmultitextvaluecombo/multitextvalue.combo.search.js

@ -1,29 +1,44 @@
/** import { shortcut, extend, isKey, Selection, remove, last, pushDistinct, deepClone, createWidget, toPix, isNotNull, initial, endWith, bind, nextTick, AbsoluteLayout, contains, map, makeObject, each, values, isNull, Func, isNotEmptyArray, isArray, find } from "@/core";
* import { Single, Combo } from "@/base";
* @class BI.SearchMultiTextValueCombo import { MultiSelectTrigger, MultiSelectPopupView, MultiSelectCombo, SearchMultiSelectTrigger, SearchMultiSelectPopupView } from "@/widget";
* @extends BI.Single import { MultiSelectBar, TriggerIconButton } from "@/case";
*/
BI.SearchMultiTextValueCombo = BI.inherit(BI.Single, {
_defaultConfig: function () { @shortcut()
return BI.extend(BI.SearchMultiTextValueCombo.superclass._defaultConfig.apply(this, arguments), { export class SearchMultiTextValueCombo extends Single {
static xtype = "bi.search_multi_text_value_combo";
static REQ_GET_DATA_LENGTH = 1;
static REQ_GET_ALL_DATA = -1;
static EVENT_CONFIRM = "EVENT_CONFIRM";
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-multi-select-combo bi-search-multi-text-value-combo", baseCls: "bi-multi-select-combo bi-search-multi-text-value-combo",
height: 24, height: 24,
items: [] items: [],
}); });
}, }
_init: function () { _init() {
var self = this, o = this.options; const o = this.options;
BI.SearchMultiTextValueCombo.superclass._init.apply(this, arguments); const triggerBtn = createWidget({
var assertShowValue = function () { type: TriggerIconButton.xtype,
BI.isKey(self._startValue) && (self.storeValue.type === BI.Selection.All ? BI.remove(self.storeValue.value, self._startValue) : BI.pushDistinct(self.storeValue.value, self._startValue)); width: o.height,
self._updateAllValue(); height: o.height,
self._checkError(); cls: "multi-select-trigger-icon-button",
self.trigger.getSearcher().setState(self.storeValue); });
self.trigger.getCounter().setButtonChecked(self.storeValue); super._init(...arguments);
const assertShowValue = () => {
isKey(this._startValue) &&
(this.storeValue.type === Selection.All
? remove(this.storeValue.value, this._startValue)
: pushDistinct(this.storeValue.value, this._startValue));
this._updateAllValue();
this._checkError();
this.trigger.getSearcher().setState(this.storeValue);
this.trigger.getCounter().setButtonChecked(this.storeValue);
}; };
this.storeValue = BI.deepClone(o.value || {}); this.storeValue = deepClone(o.value || {});
this._updateAllValue(); this._updateAllValue();
this._assertValue(this.storeValue); this._assertValue(this.storeValue);
@ -32,10 +47,10 @@ BI.SearchMultiTextValueCombo = BI.inherit(BI.Single, {
// 标记正在请求数据 // 标记正在请求数据
this.requesting = false; this.requesting = false;
this.trigger = BI.createWidget({ this.trigger = createWidget({
type: "bi.search_multi_select_trigger", type: SearchMultiSelectTrigger.xtype,
text: o.text, text: o.text,
height: BI.toPix(o.height, o.simple ? 1 : 2), height: toPix(o.height, o.simple ? 1 : 2),
// adapter: this.popup, // adapter: this.popup,
masker: { masker: {
offset: { offset: {
@ -45,437 +60,450 @@ BI.SearchMultiTextValueCombo = BI.inherit(BI.Single, {
bottom: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 1, bottom: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 1,
}, },
}, },
allValueGetter: function () { allValueGetter: () => this.allValue,
return self.allValue;
},
valueFormatter: o.valueFormatter, valueFormatter: o.valueFormatter,
itemsCreator: function (op, callback) { itemsCreator: (op, callback) => {
self._itemsCreator(op, function (res) { this._itemsCreator(op, res => {
if (op.times === 1 && BI.isNotNull(op.keywords)) { if (op.times === 1 && isNotNull(op.keywords)) {
// 预防trigger内部把当前的storeValue改掉 // 预防trigger内部把当前的storeValue改掉
self.trigger.setValue(BI.deepClone(self.getValue())); this.trigger.setValue(deepClone(this.getValue()));
} }
callback.apply(self, arguments); callback.apply(this, ...arguments);
}); });
}, },
value: this.storeValue, value: this.storeValue,
warningTitle: o.warningTitle warningTitle: o.warningTitle,
}); });
this.trigger.on(BI.MultiSelectTrigger.EVENT_START, function () { this.trigger.on(MultiSelectTrigger.EVENT_START, () => {
self._setStartValue(""); this._setStartValue("");
this.getSearcher().setValue(self.storeValue); this.getSearcher().setValue(this.storeValue);
}); });
this.trigger.on(BI.MultiSelectTrigger.EVENT_STOP, function () { this.trigger.on(MultiSelectTrigger.EVENT_STOP, () => {
self._setStartValue(""); this._setStartValue("");
}); });
this.trigger.on(BI.MultiSelectTrigger.EVENT_SEARCHING, function (keywords) { this.trigger.on(
var last = BI.last(keywords); MultiSelectTrigger.EVENT_SEARCHING,
keywords = BI.initial(keywords || []); keywords => {
if (keywords.length > 0) { const lastKeyWord = last(keywords);
self._joinKeywords(keywords, function () { keywords = initial(keywords || []);
if (BI.endWith(last, BI.BlankSplitChar)) { if (keywords.length > 0) {
self.combo.setValue(self.storeValue); this._joinKeywords(keywords, () => {
assertShowValue(); if (endWith(lastKeyWord, BI.BlankSplitChar)) {
self.combo.populate(); this.combo.setValue(this.storeValue);
self._setStartValue(""); assertShowValue();
} else { this.combo.populate();
self.combo.setValue(self.storeValue); this._setStartValue("");
assertShowValue(); } else {
} this.combo.setValue(this.storeValue);
self._dataChange = true; assertShowValue();
}); }
this._dataChange = true;
});
}
} }
}); );
this.trigger.on(BI.MultiSelectTrigger.EVENT_CHANGE, function (value, obj) { this.trigger.on(MultiSelectTrigger.EVENT_CHANGE, (value, obj) => {
if (obj instanceof BI.MultiSelectBar) { if (obj instanceof MultiSelectBar) {
self._joinAll(this.getValue(), function () { this._joinAll(this.getValue(), () => {
assertShowValue(); assertShowValue();
}); });
} else { } else {
self._join(this.getValue(), function () { this._join(this.getValue(), () => {
assertShowValue(); assertShowValue();
}); });
} }
self._dataChange = true; this._dataChange = true;
}); });
this.trigger.on(BI.MultiSelectTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW, function () { this.trigger.on(
this.getCounter().setValue(self.storeValue); MultiSelectTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW,
}); () => {
this.trigger.on(BI.MultiSelectTrigger.EVENT_COUNTER_CLICK, function () { this.getCounter().setValue(this.storeValue);
if (!self.combo.isViewVisible()) { }
self.combo.showView(); );
this.trigger.on(MultiSelectTrigger.EVENT_COUNTER_CLICK, () => {
if (!this.combo.isViewVisible()) {
this.combo.showView();
} }
}); });
this.combo = BI.createWidget({ this.combo = createWidget({
type: "bi.combo", type: Combo.xtype,
cls: o.simple ? "bi-border-bottom" : "bi-border bi-border-radius", cls: o.simple ? "bi-border-bottom" : "bi-border bi-border-radius",
toggle: false, toggle: false,
container: o.container, container: o.container,
el: this.trigger, el: this.trigger,
adjustLength: 1, adjustLength: 1,
popup: { popup: {
type: "bi.search_multi_select_popup_view", type: SearchMultiSelectPopupView.xtype,
ref: function () { ref: _ref => {
self.popup = this; this.popup = _ref;
self.trigger.setAdapter(this); this.trigger.setAdapter(_ref);
}, },
listeners: [{ listeners: [
eventName: BI.MultiSelectPopupView.EVENT_CHANGE, {
action: function () { eventName: MultiSelectPopupView.EVENT_CHANGE,
self._dataChange = true; action :() => {
self.storeValue = this.getValue(); this._dataChange = true;
self._adjust(function () { this.storeValue = this.getValue();
assertShowValue(); this._adjust(() => {
}); assertShowValue();
});
},
},
{
eventName: MultiSelectPopupView.EVENT_CLICK_CONFIRM,
action :() => {
this._defaultState();
},
},
{
eventName: MultiSelectPopupView.EVENT_CLICK_CLEAR,
action: () => {
this._dataChange = true;
this.setValue();
this._defaultState();
},
} }
}, { ],
eventName: BI.MultiSelectPopupView.EVENT_CLICK_CONFIRM, itemsCreator: bind(this._itemsCreator, this),
action: function () {
self._defaultState();
}
}, {
eventName: BI.MultiSelectPopupView.EVENT_CLICK_CLEAR,
action: function () {
self._dataChange = true;
self.setValue();
self._defaultState();
}
}],
itemsCreator: BI.bind(self._itemsCreator, this),
valueFormatter: o.valueFormatter, valueFormatter: o.valueFormatter,
onLoaded: function () { onLoaded: () => {
BI.nextTick(function () { nextTick(() => {
self.combo.adjustWidth(); this.combo.adjustWidth();
self.combo.adjustHeight(); this.combo.adjustHeight();
self.trigger.getCounter().adjustView(); this.trigger.getCounter().adjustView();
self.trigger.getSearcher().adjustView(); this.trigger.getSearcher().adjustView();
}); });
} },
}, },
value: o.value, value: o.value,
hideChecker: function (e) { hideChecker: e => triggerBtn.element.find(e.target).length === 0,
return triggerBtn.element.find(e.target).length === 0;
}
}); });
this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () { this.combo.on(Combo.EVENT_BEFORE_POPUPVIEW, () => {
if (!this.isViewVisible()) { if (!this.isViewVisible()) {
self._dataChange = false;// 标记数据是否发生变化 this._dataChange = false; // 标记数据是否发生变化
} }
this.setValue(self.storeValue); this.setValue(this.storeValue);
BI.nextTick(function () { nextTick(() => {
self._populate(); this._populate();
}); });
}); });
// 当退出的时候如果还在处理请求,则等请求结束后再对外发确定事件 // 当退出的时候如果还在处理请求,则等请求结束后再对外发确定事件
this.wants2Quit = false; this.wants2Quit = false;
this.combo.on(BI.Combo.EVENT_AFTER_HIDEVIEW, function () { this.combo.on(Combo.EVENT_AFTER_HIDEVIEW, () => {
// important:关闭弹出时又可能没有退出编辑状态 // important:关闭弹出时又可能没有退出编辑状态
self.trigger.stopEditing(); this.trigger.stopEditing();
if (self.requesting === true) { if (this.requesting === true) {
self.wants2Quit = true; this.wants2Quit = true;
} else { } else {
/** /**
* 在存在标红的情况如果popover没有发生改变就确认需要同步trigger的值否则对外value值和trigger样式不统一 * 在存在标红的情况如果popover没有发生改变就确认需要同步trigger的值否则对外value值和trigger样式不统一
*/ */
assertShowValue(); assertShowValue();
self._dataChange && self.fireEvent(BI.SearchMultiTextValueCombo.EVENT_CONFIRM); this._dataChange &&
this.fireEvent(SearchMultiTextValueCombo.EVENT_CONFIRM);
} }
}); });
var triggerBtn = BI.createWidget({ triggerBtn.on(TriggerIconButton.EVENT_CHANGE, () => {
type: "bi.trigger_icon_button", this.trigger.getCounter().hideView();
width: o.height, if (this.combo.isViewVisible()) {
height: o.height, this.combo.hideView();
cls: "multi-select-trigger-icon-button"
});
triggerBtn.on(BI.TriggerIconButton.EVENT_CHANGE, function () {
self.trigger.getCounter().hideView();
if (self.combo.isViewVisible()) {
self.combo.hideView();
} else { } else {
self.combo.showView(); this.combo.showView();
} }
}); });
BI.createWidget({ createWidget({
type: "bi.absolute", type: AbsoluteLayout.xtype,
element: this, element: this,
items: [{ items: [
el: this.combo, {
left: 0, el: this.combo,
right: 0, left: 0,
top: 0, right: 0,
bottom: 0 top: 0,
}, { bottom: 0,
el: triggerBtn, },
right: 0, {
top: 0, el: triggerBtn,
bottom: 0 right: 0,
}] top: 0,
bottom: 0,
}
],
}); });
this._checkError(); this._checkError();
}, }
_defaultState: function () { _defaultState() {
this.trigger.stopEditing(); this.trigger.stopEditing();
this.combo.hideView(); this.combo.hideView();
}, }
_assertValue: function (val) { _assertValue(val) {
var o = this.options; const o = this.options;
val || (val = {}); val || (val = {});
val.type || (val.type = BI.Selection.Multi); val.type || (val.type = Selection.Multi);
val.value || (val.value = []); val.value || (val.value = []);
BI.remove(val.value, function (idx, value) { remove(val.value, (idx, value) => !contains(map(o.items, "value"), value));
return !BI.contains(BI.map(o.items, "value"), value); }
});
},
_makeMap: function (values) { _makeMap(values) {
return BI.makeObject(values || []); return makeObject(values || []);
}, }
_joinKeywords: function (keywords, callback) { _joinKeywords(keywords, callback) {
var self = this, o = this.options;
this._assertValue(this.storeValue); this._assertValue(this.storeValue);
this.requesting = true; this.requesting = true;
this._itemsCreator({ const digest = items => {
type: BI.SearchMultiTextValueCombo.REQ_GET_ALL_DATA, const selectedMap = this._makeMap(items);
keywords: keywords each(keywords, (i, val) => {
}, function (ob) { if (isNotNull(selectedMap[val])) {
var values = BI.map(ob.items, "value"); this.storeValue.type === Selection.Multi
digest(values); ? pushDistinct(this.storeValue.value, val)
}); : remove(this.storeValue.value, val);
function digest (items) {
var selectedMap = self._makeMap(items);
BI.each(keywords, function (i, val) {
if (BI.isNotNull(selectedMap[val])) {
self.storeValue.type === BI.Selection.Multi ? BI.pushDistinct(self.storeValue.value, val) : BI.remove(self.storeValue.value, val);
} }
}); });
self._adjust(callback); this._adjust(callback);
} };
}, this._itemsCreator(
{
type: SearchMultiTextValueCombo.REQ_GET_ALL_DATA,
keywords,
},
ob => {
const values = map(ob.items, "value");
digest(values);
}
);
}
_joinAll: function (res, callback) { _joinAll(res, callback) {
var self = this, o = this.options;
this._assertValue(res); this._assertValue(res);
this.requesting = true; this.requesting = true;
this._itemsCreator({ this._itemsCreator(
type: BI.SearchMultiTextValueCombo.REQ_GET_ALL_DATA, {
keywords: [this.trigger.getKey()] type: SearchMultiTextValueCombo.REQ_GET_ALL_DATA,
}, function (ob) { keywords: [this.trigger.getKey()],
var items = BI.map(ob.items, "value"); },
if (self.storeValue.type === res.type) { ob => {
var change = false; const map = this._makeMap(this.storeValue.value);
var map = self._makeMap(self.storeValue.value); const items = map(ob.items, "value");
BI.each(items, function (i, v) { if (this.storeValue.type === res.type) {
if (BI.isNotNull(map[v])) { let change = false;
change = true; each(items, (i, v) => {
self.storeValue.assist && self.storeValue.assist.push(map[v]); if (isNotNull(map[v])) {
delete map[v]; change = true;
this.storeValue.assist &&
this.storeValue.assist.push(map[v]);
delete map[v];
}
});
change && (this.storeValue.value = values(map));
this._adjust(callback);
return;
}
const selectedMap = this._makeMap(this.storeValue.value);
const notSelectedMap = this._makeMap(res.value);
const newItems = [];
each(items, (i, item) => {
if (isNotNull(selectedMap[items[i]])) {
this.storeValue.assist &&
this.storeValue.assist.push(selectedMap[items[i]]);
delete selectedMap[items[i]];
}
if (isNull(notSelectedMap[items[i]])) {
remove(this.storeValue.assist, item);
newItems.push(item);
} }
}); });
change && (self.storeValue.value = BI.values(map)); this.storeValue.value = newItems.concat(values(selectedMap));
self._adjust(callback); this._adjust(callback);
return;
} }
var selectedMap = self._makeMap(self.storeValue.value); );
var notSelectedMap = self._makeMap(res.value); }
var newItems = [];
BI.each(items, function (i, item) {
if (BI.isNotNull(selectedMap[items[i]])) {
self.storeValue.assist && self.storeValue.assist.push(selectedMap[items[i]]);
delete selectedMap[items[i]];
}
if (BI.isNull(notSelectedMap[items[i]])) {
BI.remove(self.storeValue.assist, item);
newItems.push(item);
}
});
self.storeValue.value = newItems.concat(BI.values(selectedMap));
self._adjust(callback);
});
},
_adjust: function (callback) {
var self = this, o = this.options;
if (!this._count) {
this._itemsCreator({
type: BI.SearchMultiTextValueCombo.REQ_GET_DATA_LENGTH
}, function (res) {
self._count = res.count;
adjust();
callback();
});
} else {
adjust();
callback();
}
function adjust () { _adjust(callback) {
if (self.storeValue.type === BI.Selection.All && self.storeValue.value.length >= self._count) { const adjust = () => {
self.storeValue = { if (
type: BI.Selection.Multi, this.storeValue.type === Selection.All &&
value: [] this.storeValue.value.length >= this._count
) {
this.storeValue = {
type: Selection.Multi,
value: [],
}; };
} else if (self.storeValue.type === BI.Selection.Multi && self.storeValue.value.length >= self._count) { } else if (
self.storeValue = { this.storeValue.type === Selection.Multi &&
type: BI.Selection.All, this.storeValue.value.length >= this._count
value: [] ) {
this.storeValue = {
type: Selection.All,
value: [],
}; };
} }
self._updateAllValue(); this._updateAllValue();
self._checkError(); this._checkError();
if (self.wants2Quit === true) { if (this.wants2Quit === true) {
self._dataChange && self.fireEvent(BI.SearchMultiTextValueCombo.EVENT_CONFIRM); this._dataChange &&
self.wants2Quit = false; this.fireEvent(SearchMultiTextValueCombo.EVENT_CONFIRM);
this.wants2Quit = false;
} }
self.requesting = false; this.requesting = false;
};
if (!this._count) {
this._itemsCreator(
{
type: SearchMultiTextValueCombo.REQ_GET_DATA_LENGTH,
},
res => {
this._count = res.count;
adjust();
callback();
}
);
} else {
adjust();
callback();
} }
}, }
_join: function (res, callback) { _join(res, callback) {
var self = this, o = this.options;
this._assertValue(res); this._assertValue(res);
this._assertValue(this.storeValue); this._assertValue(this.storeValue);
if (this.storeValue.type === res.type) { if (this.storeValue.type === res.type) {
var map = this._makeMap(this.storeValue.value); const map = this._makeMap(this.storeValue.value);
BI.each(res.value, function (i, v) { each(res.value, (i, v) => {
if (!map[v]) { if (!map[v]) {
self.storeValue.value.push(v); this.storeValue.value.push(v);
BI.remove(self.storeValue.assist, v); remove(this.storeValue.assist, v);
map[v] = v; map[v] = v;
} }
}); });
var change = false; let change = false;
BI.each(res.assist, function (i, v) { each(res.assist, (i, v) => {
if (BI.isNotNull(map[v])) { if (isNotNull(map[v])) {
change = true; change = true;
self.storeValue.assist && self.storeValue.assist.push(map[v]); this.storeValue.assist &&
this.storeValue.assist.push(map[v]);
delete map[v]; delete map[v];
} }
}); });
change && (this.storeValue.value = BI.values(map)); change && (this.storeValue.value = values(map));
self._adjust(callback); this._adjust(callback);
return; return;
} }
this._joinAll(res, callback); this._joinAll(res, callback);
}, }
_setStartValue: function (value) { _setStartValue(value) {
this._startValue = value; this._startValue = value;
this.popup.setStartValue(value); this.popup.setStartValue(value);
}, }
_getItemsByTimes: function (items, times) { _getItemsByTimes(items, times) {
var res = []; const res = [];
for (var i = (times - 1) * 100; items[i] && i < times * 100; i++) { for (let i = (times - 1) * 100; items[i] && i < times * 100; i++) {
res.push(items[i]); res.push(items[i]);
} }
return res; return res;
}, }
_hasNextByTimes: function (items, times) { _hasNextByTimes(items, times) {
return times * 100 < items.length; return times * 100 < items.length;
}, }
_itemsCreator: function (options, callback) { _itemsCreator(options, callback) {
var self = this, o = this.options; const o = this.options;
var items = o.items; let items = o.items;
var keywords = (options.keywords || []).slice(); const keywords = (options.keywords || []).slice();
if (options.keyword) { if (options.keyword) {
keywords.push(options.keyword); keywords.push(options.keyword);
} }
BI.each(keywords, function (i, kw) { each(keywords, (i, kw) => {
var search = BI.Func.getSearchResult(items, kw); const search = Func.getSearchResult(items, kw);
items = search.match.concat(search.find); items = search.match.concat(search.find);
}); });
if (options.selectedValues) {// 过滤 if (options.selectedValues) {
var filter = BI.makeObject(options.selectedValues, true); // 过滤
items = BI.filter(items, function (i, ob) { const filter = makeObject(options.selectedValues, true);
return !filter[ob.value]; items = filter(items, (i, ob) => !filter[ob.value]);
});
} }
if (options.type == BI.MultiSelectCombo.REQ_GET_ALL_DATA) { if (options.type === MultiSelectCombo.REQ_GET_ALL_DATA) {
callback({ callback({
items: items items,
}); });
return; return;
} }
if (options.type == BI.MultiSelectCombo.REQ_GET_DATA_LENGTH) { if (options.type === MultiSelectCombo.REQ_GET_DATA_LENGTH) {
callback({count: items.length}); callback({ count: items.length });
return; return;
} }
callback({ callback({
items: self._getItemsByTimes(items, options.times), items: this._getItemsByTimes(items, options.times),
hasNext: self._hasNextByTimes(items, options.times) hasNext: this._hasNextByTimes(items, options.times),
}); });
}, }
_checkError: function () { _checkError() {
var v = this.storeValue.value || []; let v = this.storeValue.value || [];
if(BI.isNotEmptyArray(v)) { if (isNotEmptyArray(v)) {
v = BI.isArray(v) ? v : [v]; v = isArray(v) ? v : [v];
var result = BI.find(this.allValue, function (idx, value) { const result = find(this.allValue, (idx, value) => !contains(v, value));
return !BI.contains(v, value); if (isNull(result)) {
}); isNotNull(this.trigger) && this.trigger.setTipType("success");
if (BI.isNull(result)) {
BI.isNotNull(this.trigger) && (this.trigger.setTipType("success"));
this.element.removeClass("combo-error"); this.element.removeClass("combo-error");
} else { } else {
BI.isNotNull(this.trigger) && (this.trigger.setTipType("warning")); isNotNull(this.trigger) && this.trigger.setTipType("warning");
this.element.addClass("combo-error"); this.element.addClass("combo-error");
} }
} else { } else {
if(v.length === this.allValue.length){ if (v.length === this.allValue.length) {
BI.isNotNull(this.trigger) && (this.trigger.setTipType("success")); isNotNull(this.trigger) && this.trigger.setTipType("success");
this.element.removeClass("combo-error"); this.element.removeClass("combo-error");
}else { } else {
BI.isNotNull(this.trigger) && (this.trigger.setTipType("warning")); isNotNull(this.trigger) && this.trigger.setTipType("warning");
this.element.addClass("combo-error"); this.element.addClass("combo-error");
} }
} }
}, }
_updateAllValue: function () { _updateAllValue() {
this.storeValue = this.storeValue || {}; this.storeValue = this.storeValue || {};
this.allValue = BI.deepClone(this.storeValue.value || []); this.allValue = deepClone(this.storeValue.value || []);
}, }
setValue: function (v) { setValue(v) {
this.storeValue = BI.deepClone(v || {}); this.storeValue = deepClone(v || {});
this._updateAllValue(); this._updateAllValue();
this._assertValue(this.storeValue); this._assertValue(this.storeValue);
this.combo.setValue(this.storeValue); this.combo.setValue(this.storeValue);
this._checkError(); this._checkError();
}, }
getValue: function () { getValue() {
return BI.deepClone(this.storeValue); return deepClone(this.storeValue);
}, }
_populate: function () { _populate() {
this._count = null; this._count = null;
this.combo.populate(); this.combo.populate();
}, }
populate: function (items) { populate(items) {
this.options.items = items; this.options.items = items;
this._populate(); this._populate();
} }
}); }
extend(SearchMultiTextValueCombo, {
BI.extend(BI.SearchMultiTextValueCombo, {
REQ_GET_DATA_LENGTH: 1, REQ_GET_DATA_LENGTH: 1,
REQ_GET_ALL_DATA: -1 REQ_GET_ALL_DATA: -1,
}); });
BI.SearchMultiTextValueCombo.EVENT_CONFIRM = "EVENT_CONFIRM";
BI.shortcut("bi.search_multi_text_value_combo", BI.SearchMultiTextValueCombo);

189
src/widget/searchmultitextvaluecombo/multitextvalue.combo.trigger.search.js

@ -1,31 +1,44 @@
BI.SearchMultiSelectTrigger = BI.inherit(BI.Trigger, { import { shortcut, extend, emptyFn, createWidget, Events, nextTick, HTapeLayout, RightVerticalAdaptLayout } from "@/core";
import { Trigger } from "@/base";
import { MultiSelectCheckSelectedSwitcher, MultiSelectSearcher, SearchMultiSelectSearcher } from "@/widget";
constants: { @shortcut()
height: 14, export class SearchMultiSelectTrigger extends Trigger {
rgap: 4, static xtype = "bi.search_multi_select_trigger";
lgap: 4
},
_defaultConfig: function () { constants = { height: 14, rgap: 4, lgap: 4 };
return BI.extend(BI.SearchMultiSelectTrigger.superclass._defaultConfig.apply(this, arguments), {
static EVENT_TRIGGER_CLICK = "EVENT_TRIGGER_CLICK";
static EVENT_COUNTER_CLICK = "EVENT_COUNTER_CLICK";
static EVENT_CHANGE = "EVENT_CHANGE";
static EVENT_START = "EVENT_START";
static EVENT_STOP = "EVENT_STOP";
static EVENT_PAUSE = "EVENT_PAUSE";
static EVENT_SEARCHING = "EVENT_SEARCHING";
static EVENT_BEFORE_COUNTER_POPUPVIEW = "EVENT_BEFORE_COUNTER_POPUPVIEW";
_defaultConfig() {
const conf = super._defaultConfig(...arguments);
return extend(conf, {
baseCls: "bi-multi-select-trigger", baseCls: "bi-multi-select-trigger",
itemsCreator: BI.emptyFn, itemsCreator: emptyFn,
valueFormatter: BI.emptyFn, valueFormatter: emptyFn,
searcher: {}, searcher: {},
switcher: {}, switcher: {},
adapter: null, adapter: null,
masker: {} masker: {},
}); });
}, }
_init: function () { _init() {
BI.SearchMultiSelectTrigger.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this, o = this.options; const o = this.options;
this.searcher = BI.createWidget(o.searcher, { this.searcher = createWidget(o.searcher, {
type: "bi.search_multi_select_searcher", type: SearchMultiSelectSearcher.xtype,
height: o.height, height: o.height,
itemsCreator: o.itemsCreator, itemsCreator: o.itemsCreator,
valueFormatter: o.valueFormatter, valueFormatter: o.valueFormatter,
@ -36,119 +49,125 @@ BI.SearchMultiSelectTrigger = BI.inherit(BI.Trigger, {
value: o.value, value: o.value,
text: o.text, text: o.text,
tipType: o.tipType, tipType: o.tipType,
warningTitle: o.warningTitle warningTitle: o.warningTitle,
}); });
this.searcher.on(BI.MultiSelectSearcher.EVENT_START, function () { this.searcher.on(MultiSelectSearcher.EVENT_START, () => {
self.fireEvent(BI.SearchMultiSelectTrigger.EVENT_START); this.fireEvent(SearchMultiSelectTrigger.EVENT_START);
}); });
this.searcher.on(BI.MultiSelectSearcher.EVENT_PAUSE, function () { this.searcher.on(MultiSelectSearcher.EVENT_PAUSE, () => {
self.fireEvent(BI.SearchMultiSelectTrigger.EVENT_PAUSE); this.fireEvent(SearchMultiSelectTrigger.EVENT_PAUSE);
}); });
this.searcher.on(BI.MultiSelectSearcher.EVENT_SEARCHING, function () { this.searcher.on(MultiSelectSearcher.EVENT_SEARCHING, () => {
self.fireEvent(BI.SearchMultiSelectTrigger.EVENT_SEARCHING, arguments); this.fireEvent(SearchMultiSelectTrigger.EVENT_SEARCHING, ...arguments);
}); });
this.searcher.on(BI.MultiSelectSearcher.EVENT_STOP, function () { this.searcher.on(MultiSelectSearcher.EVENT_STOP, () => {
self.fireEvent(BI.SearchMultiSelectTrigger.EVENT_STOP); this.fireEvent(SearchMultiSelectTrigger.EVENT_STOP);
}); });
this.searcher.on(BI.MultiSelectSearcher.EVENT_CHANGE, function () { this.searcher.on(MultiSelectSearcher.EVENT_CHANGE, () => {
self.fireEvent(BI.SearchMultiSelectTrigger.EVENT_CHANGE, arguments); this.fireEvent(SearchMultiSelectTrigger.EVENT_CHANGE, ...arguments);
}); });
this.numberCounter = BI.createWidget(o.switcher, { this.numberCounter = createWidget(o.switcher, {
type: "bi.multi_select_check_selected_switcher", type: MultiSelectCheckSelectedSwitcher.xtype,
valueFormatter: o.valueFormatter, valueFormatter: o.valueFormatter,
itemsCreator: o.itemsCreator, itemsCreator: o.itemsCreator,
adapter: o.adapter, adapter: o.adapter,
masker: o.masker, masker: o.masker,
value: o.value value: o.value,
});
this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE, function () {
self.fireEvent(BI.SearchMultiSelectTrigger.EVENT_COUNTER_CLICK);
});
this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW, function () {
self.fireEvent(BI.SearchMultiSelectTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW);
}); });
this.numberCounter.on(
MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE,
() => {
this.fireEvent(SearchMultiSelectTrigger.EVENT_COUNTER_CLICK);
}
);
this.numberCounter.on(
MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW,
() => {
this.fireEvent(
SearchMultiSelectTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW
);
}
);
var wrapNumberCounter = BI.createWidget({ const wrapNumberCounter = createWidget({
type: "bi.right_vertical_adapt", type: RightVerticalAdaptLayout.xtype,
hgap: 4, hgap: 4,
items: [{ items: [
el: this.numberCounter {
}] el: this.numberCounter,
}
],
}); });
var wrapper = BI.createWidget({ const wrapper = createWidget({
type: "bi.htape", type: HTapeLayout.xtype,
element: this, element: this,
items: [ items: [
{ {
el: this.searcher, el: this.searcher,
width: "fill" width: "fill",
}, { },
{
el: wrapNumberCounter, el: wrapNumberCounter,
width: 0 width: 0,
}, { },
el: BI.createWidget(), {
width: 24 el: createWidget(),
}] width: 24,
}
],
}); });
this.numberCounter.on(BI.Events.VIEW, function (b) { this.numberCounter.on(Events.VIEW, b => {
BI.nextTick(function () {// 自动调整宽度 nextTick(() => {
wrapper.attr("items")[1].width = (b === true ? self.numberCounter.element.outerWidth() + 8 : 0); // 自动调整宽度
wrapper.attr("items")[1].width =
b === true
? this.numberCounter.element.outerWidth() + 8
: 0;
wrapper.resize(); wrapper.resize();
}); });
}); });
this.element.click(function (e) { this.element.click(e => {
if (self.element.find(e.target).length > 0) { if (this.element.find(e.target).length > 0) {
self.numberCounter.hideView(); this.numberCounter.hideView();
} }
}); });
}, }
getCounter: function () { getCounter() {
return this.numberCounter; return this.numberCounter;
}, }
getSearcher: function () { getSearcher() {
return this.searcher; return this.searcher;
}, }
stopEditing: function () { stopEditing() {
this.searcher.stopSearch(); this.searcher.stopSearch();
this.numberCounter.hideView(); this.numberCounter.hideView();
}, }
setAdapter: function (adapter) { setAdapter(adapter) {
this.searcher.setAdapter(adapter); this.searcher.setAdapter(adapter);
this.numberCounter.setAdapter(adapter); this.numberCounter.setAdapter(adapter);
}, }
setValue: function (ob) { setValue(ob) {
this.searcher.setValue(ob); this.searcher.setValue(ob);
this.numberCounter.setValue(ob); this.numberCounter.setValue(ob);
}, }
setTipType: function (v) { setTipType(v) {
this.searcher.setTipType(v); this.searcher.setTipType(v);
}, }
getKey: function () { getKey() {
return this.searcher.getKey(); return this.searcher.getKey();
}, }
getValue: function () { getValue() {
return this.searcher.getValue(); return this.searcher.getValue();
} }
}); }
BI.SearchMultiSelectTrigger.EVENT_TRIGGER_CLICK = "EVENT_TRIGGER_CLICK";
BI.SearchMultiSelectTrigger.EVENT_COUNTER_CLICK = "EVENT_COUNTER_CLICK";
BI.SearchMultiSelectTrigger.EVENT_CHANGE = "EVENT_CHANGE";
BI.SearchMultiSelectTrigger.EVENT_START = "EVENT_START";
BI.SearchMultiSelectTrigger.EVENT_STOP = "EVENT_STOP";
BI.SearchMultiSelectTrigger.EVENT_PAUSE = "EVENT_PAUSE";
BI.SearchMultiSelectTrigger.EVENT_SEARCHING = "EVENT_SEARCHING";
BI.SearchMultiSelectTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW = "EVENT_BEFORE_COUNTER_POPUPVIEW";
BI.shortcut("bi.search_multi_select_trigger", BI.SearchMultiSelectTrigger);

238
src/widget/searchmultitextvaluecombo/multitextvalue.loader.search.js

@ -1,184 +1,202 @@
/** import { shortcut, Widget, extend, emptyFn, createWidget, isKey, Selection, map, contains, remove, pushDistinct, Controller, VerticalLayout, createItems, delay, isNotNull } from "@/core";
* 多选加载数据面板 import { ButtonGroup, Loader } from "@/base";
* Created by guy on 15/11/2. import { SelectList, MultiSelectBar, MultiSelectItem } from "@/case";
* @class BI.SearchMultiSelectLoader
* @extends Widget @shortcut()
*/ export class SearchMultiSelectLoader extends Widget {
BI.SearchMultiSelectLoader = BI.inherit(BI.Widget, { static xtype = "bi.search_multi_select_loader";
_defaultConfig: function () { static EVENT_CHANGE = "EVENT_CHANGE";
return BI.extend(BI.SearchMultiSelectLoader.superclass._defaultConfig.apply(this, arguments), {
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-multi-select-loader", baseCls: "bi-multi-select-loader",
logic: { logic: {
dynamic: true dynamic: true,
}, },
el: { el: {
height: 400 height: 400,
}, },
valueFormatter: BI.emptyFn, valueFormatter: emptyFn,
itemsCreator: BI.emptyFn, itemsCreator: emptyFn,
itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
onLoaded: BI.emptyFn onLoaded: emptyFn,
}); });
}, }
_init: function () { _init() {
BI.SearchMultiSelectLoader.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this, opts = this.options; const opts = this.options;
var hasNext = false; let hasNext = false;
this.storeValue = opts.value || {}; this.storeValue = opts.value || {};
this._assertValue(this.storeValue); this._assertValue(this.storeValue);
this.button_group = BI.createWidget({ this.button_group = createWidget({
type: "bi.select_list", type: SelectList.xtype,
element: this, element: this,
logic: opts.logic, logic: opts.logic,
toolbar: { toolbar: {
type: "bi.multi_select_bar", type: MultiSelectBar.xtype,
cls: "bi-list-item-active", cls: "bi-list-item-active",
height: this.options.itemHeight, height: this.options.itemHeight,
iconWrapperWidth: 36 iconWrapperWidth: 36,
}, },
el: BI.extend({ el: extend(
onLoaded: opts.onLoaded, {
el: { onLoaded: opts.onLoaded,
type: "bi.loader",
isDefaultInit: false,
logic: {
dynamic: true,
scrolly: true
},
el: { el: {
chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI, type: Loader.xtype,
behaviors: { isDefaultInit: false,
redmark: function () { logic: {
return true; dynamic: true,
} scrolly: true,
}, },
layouts: [{ el: {
type: "bi.vertical" chooseType: ButtonGroup.CHOOSE_TYPE_MULTI,
}] behaviors: {
} redmark: () => true,
} },
}, opts.el), layouts: [
itemsCreator: function (op, callback) { {
var startValue = self._startValue; type: VerticalLayout.xtype,
self.storeValue && (op = BI.extend(op || {}, { }
selectedValues: BI.isKey(startValue) && self.storeValue.type === BI.Selection.Multi ],
? self.storeValue.value.concat(startValue) : self.storeValue.value },
})); },
opts.itemsCreator(op, function (ob) { },
opts.el
),
itemsCreator: (op, callback) => {
const startValue = this._startValue;
this.storeValue &&
(op = extend(op || {}, {
selectedValues:
isKey(startValue) &&
this.storeValue.type === Selection.Multi
? this.storeValue.value.concat(startValue)
: this.storeValue.value,
}));
opts.itemsCreator(op, ob => {
hasNext = ob.hasNext; hasNext = ob.hasNext;
var firstItems = []; let firstItems = [];
if (op.times === 1 && self.storeValue) { if (op.times === 1 && this.storeValue) {
var json = BI.map(self.storeValue.value, function (i, v) { const json = map(this.storeValue.value, (i, v) => {
var txt = opts.valueFormatter(v) || v; const txt = opts.valueFormatter(v) || v;
return { return {
text: txt, text: txt,
value: v, value: v,
title: txt, title: txt,
selected: self.storeValue.type === BI.Selection.Multi selected:
this.storeValue.type === Selection.Multi,
}; };
}); });
if (BI.isKey(self._startValue) && !BI.contains(self.storeValue.value, self._startValue)) { if (
var txt = opts.valueFormatter(startValue) || startValue; isKey(this._startValue) &&
!contains(this.storeValue.value, this._startValue)
) {
const txt =
opts.valueFormatter(startValue) || startValue;
json.unshift({ json.unshift({
text: txt, text: txt,
value: startValue, value: startValue,
title: txt, title: txt,
selected: true selected: true,
}); });
} }
firstItems = self._createItems(json); firstItems = this._createItems(json);
} }
callback(firstItems.concat(self._createItems(ob.items)), ob.keyword || ""); callback(
if (op.times === 1 && self.storeValue) { firstItems.concat(this._createItems(ob.items)),
BI.isKey(startValue) && (self.storeValue.type === BI.Selection.All ? BI.remove(self.storeValue.value, startValue) : BI.pushDistinct(self.storeValue.value, startValue)); ob.keyword || ""
self.setValue(self.storeValue); );
if (op.times === 1 && this.storeValue) {
isKey(startValue) &&
(this.storeValue.type === Selection.All
? remove(this.storeValue.value, startValue)
: pushDistinct(
this.storeValue.value,
startValue
));
this.setValue(this.storeValue);
} }
(op.times === 1) && self._scrollToTop(); op.times === 1 && this._scrollToTop();
}); });
}, },
hasNext: function () { hasNext: () => hasNext,
return hasNext; value: this.storeValue,
},
value: this.storeValue
}); });
this.button_group.on(BI.Controller.EVENT_CHANGE, function () { this.button_group.on(Controller.EVENT_CHANGE, () => {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); this.fireEvent(Controller.EVENT_CHANGE, arguments);
}); });
this.button_group.on(BI.SelectList.EVENT_CHANGE, function () { this.button_group.on(SelectList.EVENT_CHANGE, () => {
self.fireEvent(BI.SearchMultiSelectLoader.EVENT_CHANGE, arguments); this.fireEvent(SearchMultiSelectLoader.EVENT_CHANGE, ...arguments);
}); });
}, }
_createItems: function (items) { _createItems(items) {
return BI.createItems(items, { return createItems(items, {
type: "bi.multi_select_item", type: MultiSelectItem.xtype,
logic: this.options.logic, logic: this.options.logic,
cls: "bi-list-item-active", cls: "bi-list-item-active",
height: this.options.itemHeight, height: this.options.itemHeight,
selected: this.isAllSelected(), selected: this.isAllSelected(),
iconWrapperWidth: 36 iconWrapperWidth: 36,
}); });
}, }
_scrollToTop: function () { _scrollToTop() {
var self = this; delay(() => {
BI.delay(function () { this.button_group.element.scrollTop(0);
self.button_group.element.scrollTop(0);
}, 30); }, 30);
}, }
isAllSelected: function () { isAllSelected() {
return this.button_group.isAllSelected(); return this.button_group.isAllSelected();
}, }
_assertValue: function (val) { _assertValue(val) {
val || (val = {}); val || (val = {});
val.type || (val.type = BI.Selection.Multi); val.type || (val.type = Selection.Multi);
val.value || (val.value = []); val.value || (val.value = []);
}, }
setStartValue: function (v) { setStartValue(v) {
this._startValue = v; this._startValue = v;
}, }
setValue: function (v) { setValue(v) {
this.storeValue = v || {}; this.storeValue = v || {};
this._assertValue(this.storeValue); this._assertValue(this.storeValue);
this.button_group.setValue(this.storeValue); this.button_group.setValue(this.storeValue);
}, }
getValue: function () { getValue() {
return this.button_group.getValue(); return this.button_group.getValue();
}, }
getAllButtons: function () { getAllButtons() {
return this.button_group.getAllButtons(); return this.button_group.getAllButtons();
}, }
empty: function () { empty() {
this.button_group.empty(); this.button_group.empty();
}, }
populate: function (items) { populate(items) {
if (BI.isNotNull(items)) { if (isNotNull(items)) {
arguments[0] = this._createItems(items); arguments[0] = this._createItems(items);
} }
this.button_group.populate.apply(this.button_group, arguments); this.button_group.populate(...arguments);
}, }
resetHeight: function (h) { resetHeight(h) {
this.button_group.resetHeight(h); this.button_group.resetHeight(h);
}, }
resetWidth: function (w) { resetWidth(w) {
this.button_group.resetWidth(w); this.button_group.resetWidth(w);
} }
}); }
BI.SearchMultiSelectLoader.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.search_multi_select_loader", BI.SearchMultiSelectLoader);

112
src/widget/searchmultitextvaluecombo/multitextvalue.popup.view.search.js

@ -1,92 +1,104 @@
BI.SearchMultiSelectPopupView = BI.inherit(BI.Widget, { import { shortcut, Widget, extend, emptyFn, createWidget, i18nText } from "@/core";
import { MultiPopupView } from "@/case";
import { SearchMultiSelectLoader } from "@/widget";
_defaultConfig: function () { @shortcut()
return BI.extend(BI.SearchMultiSelectPopupView.superclass._defaultConfig.apply(this, arguments), { export class SearchMultiSelectPopupView extends Widget {
static xtype = "bi.search_multi_select_popup_view";
static EVENT_CHANGE = "EVENT_CHANGE";
static EVENT_CLICK_CONFIRM = "EVENT_CLICK_CONFIRM";
static EVENT_CLICK_CLEAR = "EVENT_CLICK_CLEAR";
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-multi-select-popup-view", baseCls: "bi-multi-select-popup-view",
maxWidth: "auto", maxWidth: "auto",
minWidth: 135, minWidth: 135,
maxHeight: 400, maxHeight: 400,
valueFormatter: BI.emptyFn, valueFormatter: emptyFn,
itemsCreator: BI.emptyFn, itemsCreator: emptyFn,
onLoaded: BI.emptyFn onLoaded: emptyFn,
}); });
}, }
_init: function () { _init() {
BI.SearchMultiSelectPopupView.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this, opts = this.options; const opts = this.options;
this.loader = BI.createWidget({ this.loader = createWidget({
type: "bi.search_multi_select_loader", type: SearchMultiSelectLoader.xtype,
itemsCreator: opts.itemsCreator, itemsCreator: opts.itemsCreator,
valueFormatter: opts.valueFormatter, valueFormatter: opts.valueFormatter,
onLoaded: opts.onLoaded, onLoaded: opts.onLoaded,
value: opts.value value: opts.value,
}); });
this.popupView = BI.createWidget({ this.popupView = createWidget({
type: "bi.multi_popup_view", type: MultiPopupView.xtype,
stopPropagation: false, stopPropagation: false,
maxWidth: opts.maxWidth, maxWidth: opts.maxWidth,
minWidth: opts.minWidth, minWidth: opts.minWidth,
maxHeight: opts.maxHeight, maxHeight: opts.maxHeight,
element: this, element: this,
buttons: [BI.i18nText("BI-Basic_Clears"), BI.i18nText("BI-Basic_OK")], buttons: [i18nText("BI-Basic_Clears"), i18nText("BI-Basic_OK")],
el: this.loader, el: this.loader,
value: opts.value value: opts.value,
}); });
this.popupView.on(BI.MultiPopupView.EVENT_CHANGE, function () { this.popupView.on(MultiPopupView.EVENT_CHANGE, () => {
self.fireEvent(BI.SearchMultiSelectPopupView.EVENT_CHANGE); this.fireEvent(SearchMultiSelectPopupView.EVENT_CHANGE);
}); });
this.popupView.on(BI.MultiPopupView.EVENT_CLICK_TOOLBAR_BUTTON, function (index) { this.popupView.on(
switch (index) { MultiPopupView.EVENT_CLICK_TOOLBAR_BUTTON,
index => {
switch (index) {
case 0: case 0:
self.fireEvent(BI.SearchMultiSelectPopupView.EVENT_CLICK_CLEAR); this.fireEvent(
SearchMultiSelectPopupView.EVENT_CLICK_CLEAR
);
break; break;
case 1: case 1:
self.fireEvent(BI.SearchMultiSelectPopupView.EVENT_CLICK_CONFIRM); this.fireEvent(
SearchMultiSelectPopupView.EVENT_CLICK_CONFIRM
);
break; break;
default:
break;
}
} }
}); );
}, }
isAllSelected: function () { isAllSelected() {
return this.loader.isAllSelected(); return this.loader.isAllSelected();
}, }
setStartValue: function (v) { setStartValue(v) {
this.loader.setStartValue(v); this.loader.setStartValue(v);
}, }
setValue: function (v) { setValue(v) {
this.popupView.setValue(v); this.popupView.setValue(v);
}, }
getValue: function () { getValue() {
return this.popupView.getValue(); return this.popupView.getValue();
}, }
populate: function (items) { populate(items) {
this.popupView.populate.apply(this.popupView, arguments); this.popupView.populate(...arguments);
}, }
resetHeight: function (h) { resetHeight(h) {
this.popupView.resetHeight(h); this.popupView.resetHeight(h);
}, }
resetWidth: function (w) { resetWidth(w) {
this.popupView.resetWidth(w); this.popupView.resetWidth(w);
}, }
setDirection: function (direction, position) { setDirection(direction, position) {
this.popupView.setDirection(direction, position); this.popupView.setDirection(direction, position);
}, }
}); }
BI.SearchMultiSelectPopupView.EVENT_CHANGE = "EVENT_CHANGE";
BI.SearchMultiSelectPopupView.EVENT_CLICK_CONFIRM = "EVENT_CLICK_CONFIRM";
BI.SearchMultiSelectPopupView.EVENT_CLICK_CLEAR = "EVENT_CLICK_CLEAR";
BI.shortcut("bi.search_multi_select_popup_view", BI.SearchMultiSelectPopupView);

200
src/widget/searchmultitextvaluecombo/trigger/searcher.multitextvalue.js

@ -1,175 +1,179 @@
BI.SearchMultiSelectSearcher = BI.inherit(BI.Widget, { import { shortcut, Widget, extend, emptyFn, createWidget, isNotNull, Selection, size, each } from "@/core";
import { Searcher } from "@/base";
_defaultConfig: function () { import { MultiSelectEditor, MultiSelectSearchPane } from "@/widget";
return BI.extend(BI.SearchMultiSelectSearcher.superclass._defaultConfig.apply(this, arguments), {
@shortcut()
export class SearchMultiSelectSearcher extends Widget {
static xtype = "bi.search_multi_select_searcher";
static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
static EVENT_CHANGE = "EVENT_CHANGE";
static EVENT_START = "EVENT_START";
static EVENT_STOP = "EVENT_STOP";
static EVENT_PAUSE = "EVENT_PAUSE";
static EVENT_SEARCHING = "EVENT_SEARCHING";
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-multi-select-searcher", baseCls: "bi-multi-select-searcher",
itemsCreator: BI.emptyFn, itemsCreator: emptyFn,
el: {}, el: {},
popup: {}, popup: {},
valueFormatter: BI.emptyFn, valueFormatter: emptyFn,
adapter: null, adapter: null,
masker: {} masker: {},
}); });
}, }
_init: function () { _init() {
BI.SearchMultiSelectSearcher.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this, o = this.options; const o = this.options;
this.editor = BI.createWidget(o.el, { this.editor = createWidget(o.el, {
type: "bi.multi_select_editor", type: MultiSelectEditor.xtype,
height: o.height, height: o.height,
text: o.text, text: o.text,
tipType: o.tipType, tipType: o.tipType,
warningTitle: o.warningTitle warningTitle: o.warningTitle,
}); });
this.searcher = BI.createWidget({ this.searcher = createWidget({
type: "bi.searcher", type: Searcher.xtype,
element: this, element: this,
height: o.height, height: o.height,
isAutoSearch: false, isAutoSearch: false,
isAutoSync: false, isAutoSync: false,
onSearch: function (op, callback) { onSearch: (op, callback) => {
callback(); callback();
}, },
el: this.editor, el: this.editor,
popup: BI.extend({ popup: extend(
type: "bi.multi_select_search_pane", {
valueFormatter: o.valueFormatter, type: MultiSelectSearchPane.xtype,
keywordGetter: function () { valueFormatter: o.valueFormatter,
return self.editor.getValue(); keywordGetter: () => this.editor.getValue(),
}, itemsCreator: (op, callback) => {
itemsCreator: function (op, callback) { const keyword = this.editor.getValue();
var keyword = self.editor.getValue(); op.keywords = [keyword];
op.keywords = [keyword]; o.itemsCreator(op, callback);
o.itemsCreator(op, callback); },
value: o.value,
}, },
value: o.value o.popup
}, o.popup), ),
adapter: o.adapter, adapter: o.adapter,
masker: o.masker masker: o.masker,
}); });
this.searcher.on(BI.Searcher.EVENT_START, function () { this.searcher.on(Searcher.EVENT_START, () => {
self.fireEvent(BI.SearchMultiSelectSearcher.EVENT_START); this.fireEvent(SearchMultiSelectSearcher.EVENT_START);
}); });
this.searcher.on(BI.Searcher.EVENT_PAUSE, function () { this.searcher.on(Searcher.EVENT_PAUSE, () => {
if (this.hasMatched()) { this.fireEvent(SearchMultiSelectSearcher.EVENT_PAUSE);
}
self.fireEvent(BI.SearchMultiSelectSearcher.EVENT_PAUSE);
}); });
this.searcher.on(BI.Searcher.EVENT_STOP, function () { this.searcher.on(Searcher.EVENT_STOP, () => {
self.fireEvent(BI.SearchMultiSelectSearcher.EVENT_STOP); this.fireEvent(SearchMultiSelectSearcher.EVENT_STOP);
}); });
this.searcher.on(BI.Searcher.EVENT_CHANGE, function () { this.searcher.on(Searcher.EVENT_CHANGE, () => {
self.fireEvent(BI.SearchMultiSelectSearcher.EVENT_CHANGE, arguments); this.fireEvent(SearchMultiSelectSearcher.EVENT_CHANGE, ...arguments);
}); });
this.searcher.on(BI.Searcher.EVENT_SEARCHING, function () { this.searcher.on(Searcher.EVENT_SEARCHING, () => {
var keywords = this.getKeywords(); const keywords = this.getKeywords();
self.fireEvent(BI.SearchMultiSelectSearcher.EVENT_SEARCHING, keywords); this.fireEvent(SearchMultiSelectSearcher.EVENT_SEARCHING, keywords);
}); });
if(BI.isNotNull(o.value)) { if (isNotNull(o.value)) {
this.setState(o.value); this.setState(o.value);
} }
}, }
adjustView: function () { adjustView() {
this.searcher.adjustView(); this.searcher.adjustView();
}, }
isSearching: function () { isSearching() {
return this.searcher.isSearching(); return this.searcher.isSearching();
}, }
stopSearch: function () { stopSearch() {
this.searcher.stopSearch(); this.searcher.stopSearch();
}, }
getKeyword: function () { getKeyword() {
return this.editor.getValue(); return this.editor.getValue();
}, }
hasMatched: function () { hasMatched() {
return this.searcher.hasMatched(); return this.searcher.hasMatched();
}, }
hasChecked: function () { hasChecked() {
return this.searcher.getView() && this.searcher.getView().hasChecked(); return this.searcher.getView() && this.searcher.getView().hasChecked();
}, }
setAdapter: function (adapter) { setAdapter(adapter) {
this.searcher.setAdapter(adapter); this.searcher.setAdapter(adapter);
}, }
setState: function (obj) { setState(obj) {
var o = this.options; let state;
var ob = {}; const o = this.options;
const ob = {};
ob.type = obj.type; ob.type = obj.type;
ob.value = o.allValueGetter() || []; ob.value = o.allValueGetter() || [];
ob.assist = obj.assist; ob.assist = obj.assist;
if (ob.type === BI.Selection.All) { if (ob.type === Selection.All) {
if (ob.value.length === 0) { if (ob.value.length === 0) {
this.editor.setState(BI.Selection.All); this.editor.setState(Selection.All);
} else if (BI.size(ob.assist) <= 20) { } else if (size(ob.assist) <= 20) {
var state = ""; state = "";
BI.each(ob.assist, function (i, v) { each(ob.assist, (i, v) => {
if (i === 0) { if (i === 0) {
state += "" + (o.valueFormatter(v + "") || v); state += `${o.valueFormatter(`${v}`) || v}`;
} else { } else {
state += "," + (o.valueFormatter(v + "") || v); state += `,${o.valueFormatter(`${v}`) || v}`;
} }
}); });
this.editor.setState(state); this.editor.setState(state);
} else { } else {
this.editor.setState(BI.Selection.Multi); this.editor.setState(Selection.Multi);
} }
} else { } else {
if (ob.value.length === 0) { if (ob.value.length === 0) {
this.editor.setState(BI.Selection.None); this.editor.setState(Selection.None);
} else if (BI.size(ob.value) <= 20) { } else if (size(ob.value) <= 20) {
var state = ""; state = "";
BI.each(ob.value, function (i, v) { each(ob.value, (i, v) => {
if (i === 0) { if (i === 0) {
state += "" + (o.valueFormatter(v + "") || v); state += `${o.valueFormatter(`${v}`) || v}`;
} else { } else {
state += "," + (o.valueFormatter(v + "") || v); state += `,${o.valueFormatter(`${v}`) || v}`;
} }
}); });
this.editor.setState(state); this.editor.setState(state);
} else { } else {
this.editor.setState(BI.Selection.Multi); this.editor.setState(Selection.Multi);
} }
} }
}, }
setTipType: function (v) { setTipType(v) {
this.editor.setTipType(v); this.editor.setTipType(v);
}, }
setValue: function (ob) { setValue(ob) {
this.setState(ob); this.setState(ob);
this.searcher.setValue(ob); this.searcher.setValue(ob);
}, }
getKey: function () { getKey() {
return this.editor.getValue(); return this.editor.getValue();
}, }
getValue: function () { getValue() {
return this.searcher.getValue(); return this.searcher.getValue();
}, }
populate: function (items) { populate(items) {
this.searcher.populate.apply(this.searcher, arguments); this.searcher.populate(...arguments);
} }
}); }
BI.SearchMultiSelectSearcher.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
BI.SearchMultiSelectSearcher.EVENT_CHANGE = "EVENT_CHANGE";
BI.SearchMultiSelectSearcher.EVENT_START = "EVENT_START";
BI.SearchMultiSelectSearcher.EVENT_STOP = "EVENT_STOP";
BI.SearchMultiSelectSearcher.EVENT_PAUSE = "EVENT_PAUSE";
BI.SearchMultiSelectSearcher.EVENT_SEARCHING = "EVENT_SEARCHING";
BI.shortcut("bi.search_multi_select_searcher", BI.SearchMultiSelectSearcher);

109
src/widget/selecttree/nodes/node.first.plus.js

@ -1,109 +0,0 @@
import {
shortcut,
extend,
createWidget,
Controller,
Events,
isNotNull, LogicFactory, Direction
} from "@/core";
import { NodeButton, Label } from "@/base";
import { FirstTreeNodeCheckbox } from "@/case";
@shortcut()
export class SelectTreeFirstPlusGroupNode extends NodeButton {
static xtype = "bi.select_tree_first_plus_group_node";
_defaultConfig() {
const conf = super._defaultConfig(...arguments);
return extend(conf, {
baseCls:
`${conf.baseCls || ""
} bi-select-tree-first-plus-group-node bi-list-item-active`,
logic: {
dynamic: false,
},
id: "",
pId: "",
readonly: true,
open: false,
height: 24,
});
}
_init() {
super._init(...arguments);
const self = this,
o = this.options;
this.checkbox = createWidget({
type: FirstTreeNodeCheckbox.xtype,
stopPropagation: true,
iconHeight: o.height,
iconWidth: o.height,
});
this.text = createWidget({
type: Label.xtype,
textAlign: "left",
whiteSpace: "nowrap",
textHeight: o.height,
height: o.height,
hgap: o.hgap,
text: o.text,
value: o.value,
keyword: o.keyword,
py: o.py,
});
this.checkbox.on(Controller.EVENT_CHANGE, function (type) {
if (type === Events.CLICK) {
if (this.isSelected()) {
self.triggerExpand();
} else {
self.triggerCollapse();
}
}
});
const type = LogicFactory.createLogicTypeByDirection(
Direction.Left
);
const items = LogicFactory.createLogicItemsByDirection(
Direction.Left,
{
width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
el: this.checkbox,
},
this.text
);
createWidget(
extend(
{
element: this,
},
LogicFactory.createLogic(
type,
extend(o.logic, {
items,
})
)
)
);
}
isOnce() {
return true;
}
doRedMark() {
this.text.doRedMark(...arguments);
}
unRedMark() {
this.text.unRedMark(...arguments);
}
setOpened(v) {
super.setOpened(...arguments);
if (isNotNull(this.checkbox)) {
this.checkbox.setSelected(v);
}
}
}

109
src/widget/selecttree/nodes/node.last.plus.js

@ -1,109 +0,0 @@
import {
shortcut,
extend,
createWidget,
Controller,
Events,
isNotNull, LogicFactory, Direction
} from "@/core";
import { NodeButton, Label } from "@/base";
import { LastTreeNodeCheckbox } from "@/case";
@shortcut()
export class SelectTreeLastPlusGroupNode extends NodeButton {
static xtype = "bi.select_tree_last_plus_group_node";
_defaultConfig() {
const conf = super._defaultConfig(...arguments);
return extend(conf, {
baseCls:
`${conf.baseCls || ""
} bi-select-tree-last-plus-group-node bi-list-item-active`,
logic: {
dynamic: false,
},
id: "",
pId: "",
readonly: true,
open: false,
height: 24,
});
}
_init() {
super._init(...arguments);
const self = this,
o = this.options;
this.checkbox = createWidget({
type: LastTreeNodeCheckbox.xtype,
stopPropagation: true,
iconHeight: o.height,
iconWidth: o.height,
});
this.text = createWidget({
type: Label.xtype,
textAlign: "left",
whiteSpace: "nowrap",
textHeight: o.height,
height: o.height,
hgap: o.hgap,
text: o.text,
value: o.value,
keyword: o.keyword,
py: o.py,
});
this.checkbox.on(Controller.EVENT_CHANGE, function (type) {
if (type === Events.CLICK) {
if (this.isSelected()) {
self.triggerExpand();
} else {
self.triggerCollapse();
}
}
});
const type = LogicFactory.createLogicTypeByDirection(
Direction.Left
);
const items = LogicFactory.createLogicItemsByDirection(
Direction.Left,
{
width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
el: this.checkbox,
},
this.text
);
createWidget(
extend(
{
element: this,
},
LogicFactory.createLogic(
type,
extend(o.logic, {
items,
})
)
)
);
}
isOnce() {
return true;
}
doRedMark() {
this.text.doRedMark(...arguments);
}
unRedMark() {
this.text.unRedMark(...arguments);
}
setOpened(v) {
super.setOpened(...arguments);
if (isNotNull(this.checkbox)) {
this.checkbox.setSelected(v);
}
}
}

109
src/widget/selecttree/nodes/node.mid.plus.js

@ -1,109 +0,0 @@
import {
shortcut,
extend,
createWidget,
Controller,
Events,
isNotNull, Direction, LogicFactory
} from "@/core";
import { NodeButton, Label } from "@/base";
import { MidTreeNodeCheckbox } from "@/case";
@shortcut()
export class SelectTreeMidPlusGroupNode extends NodeButton {
static xtype = "bi.select_tree_mid_plus_group_node";
_defaultConfig() {
const conf = super._defaultConfig(...arguments);
return extend(conf, {
baseCls:
`${conf.baseCls || ""
} bi-select-tree-mid-plus-group-node bi-list-item-active`,
logic: {
dynamic: false,
},
id: "",
pId: "",
readonly: true,
open: false,
height: 24,
});
}
_init() {
super._init(...arguments);
const self = this,
o = this.options;
this.checkbox = createWidget({
type: MidTreeNodeCheckbox.xtype,
stopPropagation: true,
iconHeight: o.height,
iconWidth: o.height,
});
this.text = createWidget({
type: Label.xtype,
textAlign: "left",
whiteSpace: "nowrap",
textHeight: o.height,
height: o.height,
hgap: o.hgap,
text: o.text,
value: o.value,
keyword: o.keyword,
py: o.py,
});
this.checkbox.on(Controller.EVENT_CHANGE, function (type) {
if (type === Events.CLICK) {
if (this.isSelected()) {
self.triggerExpand();
} else {
self.triggerCollapse();
}
}
});
const type = LogicFactory.createLogicTypeByDirection(
Direction.Left
);
const items = LogicFactory.createLogicItemsByDirection(
Direction.Left,
{
width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
el: this.checkbox,
},
this.text
);
createWidget(
extend(
{
element: this,
},
LogicFactory.createLogic(
type,
extend(o.logic, {
items,
})
)
)
);
}
isOnce() {
return true;
}
doRedMark() {
this.text.doRedMark(...arguments);
}
unRedMark() {
this.text.unRedMark(...arguments);
}
setOpened(v) {
super.setOpened(...arguments);
if (isNotNull(this.checkbox)) {
this.checkbox.setSelected(v);
}
}
}

109
src/widget/selecttree/nodes/node.plus.js

@ -1,109 +0,0 @@
import {
shortcut,
extend,
createWidget,
Controller,
Events,
isNotNull, LogicFactory
} from "@/core";
import { NodeButton, Label } from "@/base";
import { TreeNodeCheckbox } from "@/case";
@shortcut()
export class SelectTreePlusGroupNode extends NodeButton {
static xtype = "bi.select_tree_plus_group_node";
_defaultConfig() {
const conf = super._defaultConfig(...arguments);
return extend(conf, {
baseCls:
`${conf.baseCls || ""
} bi-select-tree-plus-group-node bi-list-item-active`,
logic: {
dynamic: false,
},
id: "",
pId: "",
readonly: true,
open: false,
height: 24,
});
}
_init() {
super._init(...arguments);
const self = this,
o = this.options;
this.checkbox = createWidget({
type: TreeNodeCheckbox.xtype,
stopPropagation: true,
iconHeight: o.height,
iconWidth: o.iconWrapperWidth || o.height,
});
this.text = createWidget({
type: Label.xtype,
textAlign: "left",
whiteSpace: "nowrap",
textHeight: o.height,
height: o.height,
hgap: o.hgap,
text: o.text,
value: o.value,
keyword: o.keyword,
py: o.py,
});
this.checkbox.on(Controller.EVENT_CHANGE, function (type) {
if (type === Events.CLICK) {
if (this.isSelected()) {
self.triggerExpand();
} else {
self.triggerCollapse();
}
}
});
const type = LogicFactory.createLogicTypeByDirection(
BI.Direction.Left
);
const items = LogicFactory.createLogicItemsByDirection(
BI.Direction.Left,
{
width: 24,
el: this.checkbox,
},
this.text
);
createWidget(
extend(
{
element: this,
},
LogicFactory.createLogic(
type,
extend(o.logic, {
items,
})
)
)
);
}
isOnce() {
return true;
}
doRedMark() {
this.text.doRedMark(...arguments);
}
unRedMark() {
this.text.unRedMark(...arguments);
}
setOpened(v) {
super.setOpened(...arguments);
if (isNotNull(this.checkbox)) {
this.checkbox.setSelected(v);
}
}
}

2
src/widget/singletree/singletree.popup.js

@ -31,7 +31,7 @@ export class SingleTreePopup extends Pane {
o = this.options; o = this.options;
this.tree = createWidget({ this.tree = createWidget({
type: "bi.level_tree", type: LevelTree.xtype,
expander: { expander: {
isDefaultInit: true, isDefaultInit: true,
}, },

293
src/widget/yearquarter/card.dynamic.yearquarter.js

@ -1,166 +1,213 @@
/** import {
* 年季度展示面板 shortcut,
* Widget,
* Created by GUY on 2015/9/2. i18nText,
* @class BI.YearCard bind,
* @extends BI.Trigger VerticalLayout,
*/ parseDateTime,
BI.DynamicYearQuarterCard = BI.inherit(BI.Widget, { extend,
checkDateVoid,
props: { isNotEmptyString,
baseCls: "bi-year-quarter-card" getQuarter
}, } from "@/core";
import { DynamicDateCard, DynamicDateParamItem, DynamicDateHelper } from "../dynamicdate";
render: function () { import { Label, Bubbles } from "@/base";
var self = this;
@shortcut()
export class DynamicYearQuarterCard extends Widget {
static xtype = "bi.dynamic_year_quarter_card";
props = { baseCls: "bi-year-quarter-card" };
static EVENT_CHANGE = "EVENT_CHANGE";
render() {
return { return {
type: "bi.vertical", type: VerticalLayout.xtype,
items: [{ items: [
type: "bi.label", {
text: BI.i18nText("BI-Multi_Date_Relative_Current_Time"), type: Label.xtype,
textAlign: "left", text: i18nText("BI-Multi_Date_Relative_Current_Time"),
height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, textAlign: "left",
}, { height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
type: "bi.vertical",
ref: function (_ref) {
self.wrapper = _ref;
}, },
items: [{ {
el: { type: VerticalLayout.xtype,
type: "bi.dynamic_date_param_item", ref: _ref => {
validationChecker: BI.bind(self._checkDate, self), this.wrapper = _ref;
ref: function () {
self.year = this;
},
listeners: [{
eventName: "EVENT_CHANGE",
action: function () {
self.fireEvent("EVENT_CHANGE");
}
}, {
eventName: "EVENT_INPUT_CHANGE",
action: function () {
BI.Bubbles.hide("dynamic-year-quarter-error");
}
}]
},
bgap: 10
}, {
type: "bi.dynamic_date_param_item",
dateType: BI.DynamicDateCard.TYPE.QUARTER,
ref: function () {
self.quarter = this;
}, },
listeners: [{ items: [
eventName: "EVENT_CHANGE", {
action: function () { el: {
self.fireEvent("EVENT_CHANGE"); type: DynamicDateParamItem.xtype,
} validationChecker: bind(this._checkDate, this),
}, { ref: _ref => {
eventName: "EVENT_INPUT_CHANGE", this.year = _ref;
action: function () { },
BI.Bubbles.hide("dynamic-year-quarter-error"); listeners: [
{
eventName: "EVENT_CHANGE",
action: () => {
this.fireEvent("EVENT_CHANGE");
},
},
{
eventName: "EVENT_INPUT_CHANGE",
action: () => {
Bubbles.hide(
"dynamic-year-quarter-error"
);
},
}
],
},
bgap: 10,
},
{
type: DynamicDateParamItem.xtype,
dateType: DynamicDateCard.TYPE.QUARTER,
ref: _ref => {
this.quarter = _ref;
},
listeners: [
{
eventName: "EVENT_CHANGE",
action: () => {
this.fireEvent("EVENT_CHANGE");
},
},
{
eventName: "EVENT_INPUT_CHANGE",
action: () => {
Bubbles.hide(
"dynamic-year-quarter-error"
);
},
}
],
} }
}] ],
}] }
}], ],
vgap: 10, vgap: 10,
hgap: 10 hgap: 10,
}; };
}, }
_getErrorText: function () { _getErrorText() {
var o = this.options; const o = this.options;
var start = BI.parseDateTime(o.min, "%Y-%X-%d"); const start = parseDateTime(o.min, "%Y-%X-%d");
var end = BI.parseDateTime(o.max, "%Y-%X-%d"); const end = parseDateTime(o.max, "%Y-%X-%d");
return BI.i18nText("BI-Basic_Year_Quarter_Range_Error",
return i18nText(
"BI-Basic_Year_Quarter_Range_Error",
start.getFullYear(), start.getFullYear(),
BI.getQuarter(start), getQuarter(start),
end.getFullYear(), end.getFullYear(),
BI.getQuarter(end) getQuarter(end)
); );
}, }
_checkDate: function (obj) { _checkDate(obj) {
var o = this.options; const o = this.options;
var date = BI.DynamicDateHelper.getCalculation(BI.extend(this._getValue(), this._digestDateTypeValue(obj))); const date = DynamicDateHelper.getCalculation(
extend(this._getValue(), this._digestDateTypeValue(obj))
);
return !BI.checkDateVoid(date.getFullYear(), date.getMonth() + 1, date.getDate(), o.min, o.max)[0]; return !checkDateVoid(
}, date.getFullYear(),
date.getMonth() + 1,
date.getDate(),
o.min,
o.max
)[0];
}
_digestDateTypeValue: function (value) { _digestDateTypeValue(value) {
var valueMap = {}; const valueMap = {};
switch (value.dateType) { switch (value.dateType) {
case BI.DynamicDateCard.TYPE.YEAR: case DynamicDateCard.TYPE.YEAR:
valueMap.year = (value.offset === 0 ? -value.value : +value.value); valueMap.year =
break; value.offset === 0 ? -value.value : +value.value;
case BI.DynamicDateCard.TYPE.QUARTER: break;
valueMap.quarter = (value.offset === 0 ? -value.value : +value.value); case DynamicDateCard.TYPE.QUARTER:
break; valueMap.quarter =
default: value.offset === 0 ? -value.value : +value.value;
break; break;
default:
break;
} }
return valueMap; return valueMap;
}, }
_createValue: function (type, v) { _createValue(type, v) {
return { return {
dateType: type, dateType: type,
value: Math.abs(v), value: Math.abs(v),
offset: v > 0 ? 1 : 0 offset: v > 0 ? 1 : 0,
}; };
}, }
setMinDate: function(minDate) { setMinDate(minDate) {
if (BI.isNotEmptyString(this.options.min)) { if (isNotEmptyString(this.options.min)) {
this.options.min = minDate; this.options.min = minDate;
} }
}, }
setMaxDate: function (maxDate) { setMaxDate(maxDate) {
if (BI.isNotEmptyString(this.options.max)) { if (isNotEmptyString(this.options.max)) {
this.options.max = maxDate; this.options.max = maxDate;
} }
}, }
setValue: function (v) { setValue(v) {
v = v || {year: 0, quarter: 0}; v = v || { year: 0, quarter: 0 };
this.year.setValue(this._createValue(BI.DynamicDateCard.TYPE.YEAR, v.year)); this.year.setValue(
this.quarter.setValue(this._createValue(BI.DynamicDateCard.TYPE.QUARTER, v.quarter)); this._createValue(DynamicDateCard.TYPE.YEAR, v.year)
}, );
this.quarter.setValue(
this._createValue(DynamicDateCard.TYPE.QUARTER, v.quarter)
);
}
_getValue: function () { _getValue() {
var year = this.year.getValue(); const year = this.year.getValue();
var quarter = this.quarter.getValue(); const quarter = this.quarter.getValue();
return { return {
year: (year.offset === 0 ? -year.value : year.value), year: year.offset === 0 ? -year.value : year.value,
quarter: (quarter.offset === 0 ? -quarter.value : quarter.value) quarter: quarter.offset === 0 ? -quarter.value : quarter.value,
}; };
}, }
getInputValue: function () { getInputValue() {
return this._getValue(); return this._getValue();
}, }
getValue: function () { getValue() {
return this.checkValidation() ? this._getValue() : {}; return this.checkValidation() ? this._getValue() : {};
}, }
checkValidation: function (show) { checkValidation(show) {
var errorText; let errorText;
var yearInvalid = !this.year.checkValidation(); const yearInvalid = !this.year.checkValidation();
var quarterInvalid = !this.quarter.checkValidation(); const quarterInvalid = !this.quarter.checkValidation();
var invalid = yearInvalid || quarterInvalid; let invalid = yearInvalid || quarterInvalid;
if (invalid) { if (invalid) {
errorText = BI.i18nText("BI-Please_Input_Natural_Number"); errorText = i18nText("BI-Please_Input_Natural_Number");
} else { } else {
invalid = !this._checkDate(this._getValue()); invalid = !this._checkDate(this._getValue());
errorText = this._getErrorText(); errorText = this._getErrorText();
} }
invalid && show && BI.Bubbles.show("dynamic-year-quarter-error", errorText, this.wrapper); invalid &&
show &&
Bubbles.show(
"dynamic-year-quarter-error",
errorText,
this.wrapper
);
return !invalid; return !invalid;
}, }
}); }
BI.DynamicYearQuarterCard.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.dynamic_year_quarter_card", BI.DynamicYearQuarterCard);

260
src/widget/yearquarter/card.static.yearquarter.js

@ -1,152 +1,190 @@
BI.StaticYearQuarterCard = BI.inherit(BI.Widget, { import {
shortcut,
Widget,
map,
extend,
VerticalLayout,
parseDateTime,
parseInt,
each,
checkDateVoid,
getDate,
getQuarterName,
getQuarter
} from "@/core";
import { TextItem, ButtonGroup } from "@/base";
import { YearPicker } from "../date/calendar";
props: { @shortcut()
baseCls: "bi-static-year-quarter-card", export class StaticYearQuarterCard extends Widget {
behaviors: {} static xtype = "bi.static_year_quarter_card";
},
_createQuarter: function () { props = { baseCls: "bi-static-year-quarter-card", behaviors: {} };
var self = this;
var items = [{ static EVENT_CHANGE = "EVENT_CHANGE";
text: BI.getQuarterName(1),
value: 1 _createQuarter() {
}, { const items = [
text: BI.getQuarterName(2), {
value: 2 text: getQuarterName(1),
}, { value: 1,
text: BI.getQuarterName(3), },
value: 3 {
}, { text: getQuarterName(2),
text: BI.getQuarterName(4), value: 2,
value: 4 },
}]; {
return BI.map(items, function (j, item) { text: getQuarterName(3),
return BI.extend(item, { value: 3,
type: "bi.text_item", },
cls: "bi-border-radius bi-list-item-select", {
textAlign: "center", text: getQuarterName(4),
whiteSpace: "nowrap", value: 4,
once: false, }
forceSelected: true, ];
height: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT,
ref: function (_ref) { return map(items, (j, item) => extend(item, {
self.quarterMap[j + 1] = _ref; type: TextItem.xtype,
} cls: "bi-border-radius bi-list-item-select",
}); textAlign: "center",
}); whiteSpace: "nowrap",
}, once: false,
forceSelected: true,
height: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT,
ref: _ref => {
this.quarterMap[j + 1] = _ref;
},
}));
}
render: function () { render() {
var self = this, o = this.options; const o = this.options;
this.quarterMap = {}; this.quarterMap = {};
return { return {
type: "bi.vertical", type: VerticalLayout.xtype,
items: [{ items: [
type: "bi.year_picker", {
cls: "bi-split-bottom", type: YearPicker.xtype,
ref: function () { cls: "bi-split-bottom",
self.yearPicker = this; ref: _ref => {
}, this.yearPicker = _ref;
min: o.min,
max: o.max,
behaviors: o.behaviors,
height: 30,
listeners: [{
eventName: BI.YearPicker.EVENT_CHANGE,
action: function () {
var value = this.getValue();
self._checkQuarterStatus(value);
self.setValue({
year: value,
quarter: self.selectedQuarter
});
}
}]
}, {
el: {
type: "bi.button_group",
behaviors: o.behaviors,
ref: function () {
self.quarter = this;
}, },
items: this._createQuarter(), min: o.min,
layouts: [{ max: o.max,
type: "bi.vertical", behaviors: o.behaviors,
vgap: 10, height: 30,
hgap: 12, listeners: [
}], {
value: o.value, eventName: YearPicker.EVENT_CHANGE,
listeners: [{ action: () => {
eventName: BI.ButtonGroup.EVENT_CHANGE, const value = this.yearPicker.getValue();
action: function () { this._checkQuarterStatus(value);
self.selectedYear = self.yearPicker.getValue(); this.setValue({
self.selectedQuarter = this.getValue()[0]; year: value,
self.fireEvent(BI.StaticYearQuarterCard.EVENT_CHANGE); quarter: this.selectedQuarter,
});
},
} }
}] ],
}, },
vgap: 5 {
}] el: {
type: ButtonGroup.xtype,
behaviors: o.behaviors,
ref: _ref => {
this.quarter = _ref;
},
items: this._createQuarter(),
layouts: [
{
type: VerticalLayout.xtype,
vgap: 10,
hgap: 12,
}
],
value: o.value,
listeners: [
{
eventName: ButtonGroup.EVENT_CHANGE,
action: () => {
this.selectedYear =
this.yearPicker.getValue();
this.selectedQuarter = this.quarter.getValue()[0];
this.fireEvent(
StaticYearQuarterCard.EVENT_CHANGE
);
},
}
],
},
vgap: 5,
}
],
}; };
}, }
_checkQuarterStatus: function (year) { _checkQuarterStatus(year) {
var o = this.options; const o = this.options;
var minDate = BI.parseDateTime(o.min, "%Y-%X-%d"), maxDate = BI.parseDateTime(o.max, "%Y-%X-%d"); const minDate = parseDateTime(o.min, "%Y-%X-%d"),
var minYear = minDate.getFullYear(), maxYear = maxDate.getFullYear(); maxDate = parseDateTime(o.max, "%Y-%X-%d");
var minQuarter = 1; var maxQuarter = 4; const minYear = minDate.getFullYear(),
minYear === year && (minQuarter = BI.parseInt(BI.getQuarter(minDate))); maxYear = maxDate.getFullYear();
maxYear === year && (maxQuarter = BI.parseInt(BI.getQuarter(maxDate))); let minQuarter = 1;
var yearInvalid = year < minYear || year > maxYear; let maxQuarter = 4;
BI.each(this.quarterMap, function (quarter, obj) { minYear === year && (minQuarter = parseInt(getQuarter(minDate)));
var quarterInvalid = quarter < minQuarter || quarter > maxQuarter; maxYear === year && (maxQuarter = parseInt(getQuarter(maxDate)));
const yearInvalid = year < minYear || year > maxYear;
each(this.quarterMap, (quarter, obj) => {
const quarterInvalid = quarter < minQuarter || quarter > maxQuarter;
obj.setEnable(!yearInvalid && !quarterInvalid); obj.setEnable(!yearInvalid && !quarterInvalid);
}); });
}, }
setMinDate: function (minDate) { setMinDate(minDate) {
if (this.options.min !== minDate) { if (this.options.min !== minDate) {
this.options.min = minDate; this.options.min = minDate;
this.yearPicker.setMinDate(minDate); this.yearPicker.setMinDate(minDate);
this._checkQuarterStatus(this.selectedYear); this._checkQuarterStatus(this.selectedYear);
} }
}, }
setMaxDate: function (maxDate) { setMaxDate(maxDate) {
if (this.options.max !== maxDate) { if (this.options.max !== maxDate) {
this.options.max = maxDate; this.options.max = maxDate;
this.yearPicker.setMaxDate(maxDate); this.yearPicker.setMaxDate(maxDate);
this._checkQuarterStatus(this.selectedYear); this._checkQuarterStatus(this.selectedYear);
} }
}, }
getValue: function () { getValue() {
return { return {
year: this.selectedYear, year: this.selectedYear,
quarter: this.selectedQuarter quarter: this.selectedQuarter,
}; };
}, }
setValue: function (obj) { setValue(obj) {
var o = this.options; const o = this.options;
var newObj = {}; const newObj = {};
newObj.year = obj.year || 0; newObj.year = obj.year || 0;
newObj.quarter = obj.quarter || 0; newObj.quarter = obj.quarter || 0;
if (newObj.quarter === 0 || newObj.year === 0 || BI.checkDateVoid(newObj.year, newObj.quarter, 1, o.min, o.max)[0]) { if (
var year = newObj.year || BI.getDate().getFullYear(); newObj.quarter === 0 ||
newObj.year === 0 ||
checkDateVoid(newObj.year, newObj.quarter, 1, o.min, o.max)[0]
) {
const year = newObj.year || getDate().getFullYear();
this.selectedYear = year; this.selectedYear = year;
this.selectedQuarter = ""; this.selectedQuarter = "";
this.yearPicker.setValue(year); this.yearPicker.setValue(year);
this.quarter.setValue(); this.quarter.setValue();
} else { } else {
this.selectedYear = BI.parseInt(newObj.year); this.selectedYear = parseInt(newObj.year);
this.selectedQuarter = BI.parseInt(newObj.quarter); this.selectedQuarter = parseInt(newObj.quarter);
this.yearPicker.setValue(this.selectedYear); this.yearPicker.setValue(this.selectedYear);
this.quarter.setValue(this.selectedQuarter); this.quarter.setValue(this.selectedQuarter);
} }
this._checkQuarterStatus(this.selectedYear); this._checkQuarterStatus(this.selectedYear);
} }
}); }
BI.StaticYearQuarterCard.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.static_year_quarter_card", BI.StaticYearQuarterCard);

345
src/widget/yearquarter/combo.yearquarter.js

@ -1,72 +1,102 @@
BI.DynamicYearQuarterCombo = BI.inherit(BI.Widget, { import {
shortcut,
Widget,
createWidget,
toPix,
isEqual,
isNotEmptyString,
getDate,
AbsoluteLayout,
HorizontalFillLayout,
isNotNull,
isNotEmptyObject,
checkDateVoid,
getQuarter
} from "@/core";
import { DynamicYearQuarterTrigger } from "./trigger.yearquarter";
// TODO:需要等待yearmonth完成才能将BI.DynamicYearMonthTrigger替换
// import { DynamicYearMonthCombo } from "../yearmonth/combo.yearmonth";
import { DynamicYearQuarterPopup } from "./popup.yearquarter";
import { DynamicDateCombo } from "../dynamicdate";
import { Combo, IconButton } from "@/base";
_consts: { @shortcut()
iconWidth: 24 export class DynamicYearQuarterCombo extends Widget {
}, static xtype = "bi.dynamic_year_quarter_combo";
props: {
_consts = { iconWidth: 24 };
props = {
baseCls: "bi-year-quarter-combo", baseCls: "bi-year-quarter-combo",
behaviors: {}, behaviors: {},
minDate: "1900-01-01", // 最小日期 minDate: "1900-01-01",
maxDate: "2099-12-31", // 最大日期 maxDate: "2099-12-31",
height: 24, height: 24,
supportDynamic: true, supportDynamic: true,
isNeedAdjustHeight: false, isNeedAdjustHeight: false,
isNeedAdjustWidth: false isNeedAdjustWidth: false,
}, };
static EVENT_CONFIRM = "EVENT_CONFIRM";
static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
static EVENT_ERROR = "EVENT_ERROR";
static EVENT_VALID = "EVENT_VALID";
static EVENT_FOCUS = "EVENT_FOCUS";
static Static = 1;
static Dynamic = 2;
_init: function () { _init() {
var self = this, o = this.options; const o = this.options;
BI.DynamicYearQuarterCombo.superclass._init.apply(this, arguments); super._init(...arguments);
this.storeValue = o.value; this.storeValue = o.value;
var border = o.simple ? 1 : 2; const border = o.simple ? 1 : 2;
self.storeTriggerValue = ""; this.storeTriggerValue = "";
this.trigger = BI.createWidget({ this.trigger = createWidget({
type: "bi.dynamic_year_quarter_trigger", type: "bi.dynamic_year_quarter_trigger",
simple: o.simple, simple: o.simple,
min: o.minDate, min: o.minDate,
max: o.maxDate, max: o.maxDate,
height: BI.toPix(o.height, border), height: toPix(o.height, border),
value: o.value || "", value: o.value || "",
watermark: o.watermark, watermark: o.watermark,
}); });
this.trigger.on(BI.DynamicYearQuarterTrigger.EVENT_KEY_DOWN, function () { this.trigger.on(DynamicYearQuarterTrigger.EVENT_KEY_DOWN, () => {
self.combo.isViewVisible() && self.combo.hideView(); this.combo.isViewVisible() && this.combo.hideView();
}); });
this.trigger.on(BI.DynamicYearQuarterTrigger.EVENT_START, function () { this.trigger.on(DynamicYearQuarterTrigger.EVENT_START, () => {
self.combo.isViewVisible() && self.combo.hideView(); this.combo.isViewVisible() && this.combo.hideView();
}); });
this.trigger.on(BI.DynamicYearQuarterTrigger.EVENT_STOP, function () { this.trigger.on(DynamicYearQuarterTrigger.EVENT_STOP, () => {
self.combo.showView(); this.combo.showView();
}); });
this.trigger.on(BI.DynamicYearQuarterTrigger.EVENT_ERROR, function () { this.trigger.on(DynamicYearQuarterTrigger.EVENT_ERROR, () => {
self.combo.isViewVisible() && self.combo.hideView(); this.combo.isViewVisible() && this.combo.hideView();
self.comboWrapper.element.addClass("error"); this.comboWrapper.element.addClass("error");
self.fireEvent(BI.DynamicYearQuarterCombo.EVENT_ERROR); this.fireEvent(DynamicYearQuarterCombo.EVENT_ERROR);
}); });
this.trigger.on(BI.DynamicYearQuarterTrigger.EVENT_VALID, function () { this.trigger.on(DynamicYearQuarterTrigger.EVENT_VALID, () => {
self.comboWrapper.element.removeClass("error"); this.comboWrapper.element.removeClass("error");
self.fireEvent(BI.DynamicYearMonthCombo.EVENT_VALID); this.fireEvent(BI.DynamicYearMonthCombo.EVENT_VALID);
}); });
this.trigger.on(BI.DynamicYearQuarterTrigger.EVENT_CONFIRM, function () { this.trigger.on(DynamicYearQuarterTrigger.EVENT_CONFIRM, () => {
var dateStore = self.storeTriggerValue; const dateStore = this.storeTriggerValue;
var dateObj = self.trigger.getKey(); const dateObj = this.trigger.getKey();
if (BI.isEqual(dateObj, dateStore)) { if (isEqual(dateObj, dateStore)) {
return; return;
} }
if (BI.isNotEmptyString(dateObj) && !BI.isEqual(dateObj, dateStore)) { if (isNotEmptyString(dateObj) && !isEqual(dateObj, dateStore)) {
self.storeValue = self.trigger.getValue(); this.storeValue = this.trigger.getValue();
self.setValue(self.trigger.getValue()); this.setValue(this.trigger.getValue());
} }
self._checkDynamicValue(self.storeValue); this._checkDynamicValue(this.storeValue);
self.fireEvent(BI.DynamicYearQuarterCombo.EVENT_CONFIRM); this.fireEvent(DynamicYearQuarterCombo.EVENT_CONFIRM);
}); });
this.trigger.on(BI.DynamicYearQuarterTrigger.EVENT_FOCUS, function () { this.trigger.on(DynamicYearQuarterTrigger.EVENT_FOCUS, () => {
self.storeTriggerValue = self.trigger.getKey(); this.storeTriggerValue = this.trigger.getKey();
self.fireEvent(BI.DynamicYearQuarterCombo.EVENT_FOCUS); this.fireEvent(DynamicYearQuarterCombo.EVENT_FOCUS);
}); });
this.combo = BI.createWidget({ this.combo = createWidget({
type: "bi.combo", type: Combo.xtype,
container: o.container, container: o.container,
isNeedAdjustHeight: o.isNeedAdjustHeight, isNeedAdjustHeight: o.isNeedAdjustHeight,
isNeedAdjustWidth: o.isNeedAdjustWidth, isNeedAdjustWidth: o.isNeedAdjustWidth,
@ -80,172 +110,185 @@ BI.DynamicYearQuarterCombo = BI.inherit(BI.Widget, {
type: "bi.dynamic_year_quarter_popup", type: "bi.dynamic_year_quarter_popup",
width: o.isNeedAdjustWidth ? o.width : undefined, width: o.isNeedAdjustWidth ? o.width : undefined,
supportDynamic: o.supportDynamic, supportDynamic: o.supportDynamic,
ref: function () { ref: _ref => {
self.popup = this; this.popup = _ref;
}, },
listeners: [ listeners: [
{ {
eventName: BI.DynamicYearQuarterPopup.EVENT_CHANGE, eventName: DynamicYearQuarterPopup.EVENT_CHANGE,
action: function () { action: () => {
self.setValue(self.popup.getValue()); this.setValue(this.popup.getValue());
self.combo.hideView(); this.combo.hideView();
self.fireEvent(BI.DynamicYearQuarterCombo.EVENT_CONFIRM); this.fireEvent(
} DynamicYearQuarterCombo.EVENT_CONFIRM
}, { );
eventName: BI.DynamicYearQuarterPopup.BUTTON_CLEAR_EVENT_CHANGE, },
action: function () { },
self.setValue(); {
self.comboWrapper.element.removeClass("error"); eventName:
self.combo.hideView(); DynamicYearQuarterPopup.BUTTON_CLEAR_EVENT_CHANGE,
self.fireEvent(BI.DynamicYearQuarterCombo.EVENT_CONFIRM); action: () => {
} this.setValue();
}, { this.comboWrapper.element.removeClass("error");
eventName: BI.DynamicYearQuarterPopup.BUTTON_lABEL_EVENT_CHANGE, this.combo.hideView();
action: function () { this.fireEvent(
var date = BI.getDate(); DynamicYearQuarterCombo.EVENT_CONFIRM
self.setValue({ );
},
},
{
eventName:
DynamicYearQuarterPopup.BUTTON_lABEL_EVENT_CHANGE,
action: () => {
const date = getDate();
this.setValue({
type: BI.DynamicYearMonthCombo.Static, type: BI.DynamicYearMonthCombo.Static,
value: { year: date.getFullYear(), quarter: BI.getQuarter(date) } value: {
year: date.getFullYear(),
quarter: getQuarter(date),
},
}); });
self.combo.hideView(); this.combo.hideView();
self.fireEvent(BI.DynamicDateCombo.EVENT_CONFIRM); this.fireEvent(DynamicDateCombo.EVENT_CONFIRM);
} },
}, { },
eventName: BI.DynamicYearQuarterPopup.BUTTON_OK_EVENT_CHANGE, {
action: function () { eventName:
var value = self.popup.getValue(); DynamicYearQuarterPopup.BUTTON_OK_EVENT_CHANGE,
if (self._checkValue(value)) { action: () => {
self.setValue(value); const value = this.popup.getValue();
if (this._checkValue(value)) {
this.setValue(value);
} }
self.combo.hideView(); this.combo.hideView();
self.fireEvent(BI.DynamicDateCombo.EVENT_CONFIRM); this.fireEvent(DynamicDateCombo.EVENT_CONFIRM);
} },
} }
], ],
behaviors: o.behaviors, behaviors: o.behaviors,
min: o.minDate, min: o.minDate,
max: o.maxDate max: o.maxDate,
}, },
value: o.value || "" value: o.value || "",
} },
}); });
this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () { this.combo.on(Combo.EVENT_BEFORE_POPUPVIEW, () => {
self.popup.setMinDate(o.minDate); this.popup.setMinDate(o.minDate);
self.popup.setMaxDate(o.maxDate); this.popup.setMaxDate(o.maxDate);
self.popup.setValue(self.storeValue); this.popup.setValue(this.storeValue);
self.fireEvent(BI.DynamicYearQuarterCombo.EVENT_BEFORE_POPUPVIEW); this.fireEvent(DynamicYearQuarterCombo.EVENT_BEFORE_POPUPVIEW);
}); });
BI.createWidget({ createWidget({
type: "bi.absolute", type: AbsoluteLayout.xtype,
element: this, element: this,
items: [ items: [
{ {
el: { el: {
type: "bi.horizontal_fill", type: HorizontalFillLayout.xtype,
columnSize: ["", "fill"], columnSize: ["", "fill"],
cls: (o.simple ? "bi-border-bottom" : "bi-border bi-border-radius") + " bi-focus-shadow", cls:
ref: function () { `${o.simple
self.comboWrapper = this; ? "bi-border-bottom"
: "bi-border bi-border-radius"
} bi-focus-shadow`,
ref: _ref => {
this.comboWrapper = _ref;
}, },
items: [ items: [
{ {
el: { el: {
type: "bi.icon_button", type: IconButton.xtype,
cls: "bi-trigger-icon-button date-change-h-font", cls: "bi-trigger-icon-button date-change-h-font",
width: this._consts.iconWidth, width: this._consts.iconWidth,
height: BI.toPix(o.height, border), height: toPix(o.height, border),
ref: function () { ref: _ref => {
self.changeIcon = this; this.changeIcon = _ref;
} },
} },
}, this.combo },
] this.combo
],
}, },
top: 0, top: 0,
left: 0, left: 0,
right: 0, right: 0,
bottom: 0 bottom: 0,
} }
] ],
}); });
this._checkDynamicValue(o.value); this._checkDynamicValue(o.value);
}, }
_checkDynamicValue: function (v) { _checkDynamicValue(v) {
var type = null; let type = null;
if (BI.isNotNull(v)) { if (isNotNull(v)) {
type = v.type; type = v.type;
} }
switch (type) { switch (type) {
case BI.DynamicYearQuarterCombo.Dynamic: case DynamicYearQuarterCombo.Dynamic:
this.changeIcon.setVisible(true); this.changeIcon.setVisible(true);
break; break;
default: default:
this.changeIcon.setVisible(false); this.changeIcon.setVisible(false);
break; break;
} }
}, }
_checkValue: function (v) { _checkValue(v) {
var o = this.options; const o = this.options;
let value;
switch (v.type) { switch (v.type) {
case BI.DynamicDateCombo.Dynamic: case DynamicDateCombo.Dynamic:
return BI.isNotEmptyObject(v.value); return isNotEmptyObject(v.value);
case BI.DynamicDateCombo.Static: case DynamicDateCombo.Static:
var value = v.value || {}; value = v.value || {};
return !BI.checkDateVoid(value.year, (value.quarter - 1) * 3 + 1, 1, o.minDate, o.maxDate)[0]; return !checkDateVoid(
default: value.year,
return true; (value.quarter - 1) * 3 + 1,
1,
o.minDate,
o.maxDate
)[0];
default:
return true;
} }
}, }
setMinDate: function (minDate) { setMinDate(minDate) {
var o = this.options; const o = this.options;
o.minDate = minDate; o.minDate = minDate;
this.trigger.setMinDate(minDate); this.trigger.setMinDate(minDate);
this.popup && this.popup.setMinDate(minDate); this.popup && this.popup.setMinDate(minDate);
}, }
setMaxDate: function (maxDate) { setMaxDate(maxDate) {
var o = this.options; const o = this.options;
o.maxDate = maxDate; o.maxDate = maxDate;
this.trigger.setMaxDate(maxDate); this.trigger.setMaxDate(maxDate);
this.popup && this.popup.setMaxDate(maxDate); this.popup && this.popup.setMaxDate(maxDate);
}, }
hideView: function () { hideView() {
this.combo.hideView(); this.combo.hideView();
}, }
getKey: function () { getKey() {
return this.trigger.getKey(); return this.trigger.getKey();
}, }
setValue: function (v) { setValue(v) {
this.storeValue = v; this.storeValue = v;
this.trigger.setValue(v); this.trigger.setValue(v);
this._checkDynamicValue(v); this._checkDynamicValue(v);
}, }
getValue: function () { getValue() {
return this.storeValue; return this.storeValue;
}, }
isStateValid: function () { isStateValid() {
return this.trigger.isStateValid(); return this.trigger.isStateValid();
} }
}
});
BI.DynamicYearQuarterCombo.EVENT_CONFIRM = "EVENT_CONFIRM";
BI.DynamicYearQuarterCombo.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
BI.DynamicYearQuarterCombo.EVENT_ERROR = "EVENT_ERROR";
BI.DynamicYearQuarterCombo.EVENT_VALID = "EVENT_VALID";
BI.DynamicYearQuarterCombo.EVENT_FOCUS = "EVENT_FOCUS";
BI.shortcut("bi.dynamic_year_quarter_combo", BI.DynamicYearQuarterCombo);
BI.extend(BI.DynamicYearQuarterCombo, {
Static: 1,
Dynamic: 2
});

6
src/widget/yearquarter/index.js

@ -0,0 +1,6 @@
export { DynamicYearQuarterCard } from "./card.dynamic.yearquarter";
export { StaticYearQuarterCard } from "./card.static.yearquarter";
export { DynamicYearQuarterCombo } from "./combo.yearquarter";
export { DynamicYearQuarterPopup } from "./popup.yearquarter";
export { DynamicYearQuarterTrigger } from "./trigger.yearquarter";

437
src/widget/yearquarter/popup.yearquarter.js

@ -1,235 +1,328 @@
BI.DynamicYearQuarterPopup = BI.inherit(BI.Widget, { import {
constants: { shortcut,
tabHeight: 40, Widget,
buttonHeight: 24 toPix,
}, i18nText,
VerticalLayout,
GridLayout,
print,
getDate,
checkDateVoid,
createItems,
getQuarter
} from "@/core";
import { DynamicYearQuarterCombo } from "./combo.yearquarter";
import { TextButton, Tab } from "@/base";
import { DynamicDateCombo, DynamicDatePopup, DynamicDateHelper } from "../dynamicdate";
// TODO:需要等待year完成才能将BI.DynamicYearCard替换
// import { DynamicYearCard } from "../year/card.dynamic.year";
import { LinearSegment } from "@/case";
import { DynamicYearQuarterCard } from "./card.dynamic.yearquarter";
import { StaticYearQuarterCard } from "./card.static.yearquarter";
props: { @shortcut()
export class DynamicYearQuarterPopup extends Widget {
static xtype = "bi.dynamic_year_quarter_popup";
constants = { tabHeight: 40, buttonHeight: 24 };
props = {
baseCls: "bi-year-quarter-popup", baseCls: "bi-year-quarter-popup",
behaviors: {}, behaviors: {},
min: "1900-01-01", // 最小日期 min: "1900-01-01",
max: "2099-12-31", // 最大日期, max: "2099-12-31",
width: 180, width: 180,
supportDynamic: true, supportDynamic: true,
}, };
static BUTTON_CLEAR_EVENT_CHANGE = "BUTTON_CLEAR_EVENT_CHANGE";
static BUTTON_lABEL_EVENT_CHANGE = "BUTTON_lABEL_EVENT_CHANGE";
static BUTTON_OK_EVENT_CHANGE = "BUTTON_OK_EVENT_CHANGE";
static EVENT_CHANGE = "EVENT_CHANGE";
render: function () { render() {
var self = this, opts = this.options, c = this.constants; this.storeValue = { type: DynamicYearQuarterCombo.Static };
this.storeValue = {type: BI.DynamicYearQuarterCombo.Static};
return { return {
type: "bi.vertical", type: VerticalLayout.xtype,
items: [{ items: [
el: this._getTabJson() {
}, { el: this._getTabJson(),
el: {
type: "bi.grid",
items: [[{
type: "bi.text_button",
cls: "bi-split-top bi-high-light",
shadow: true,
textHeight: BI.toPix(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1),
text: BI.i18nText("BI-Basic_Clear"),
listeners: [{
eventName: BI.TextButton.EVENT_CHANGE,
action: function () {
self.fireEvent(BI.DynamicYearQuarterPopup.BUTTON_CLEAR_EVENT_CHANGE);
}
}]
}, {
type: "bi.text_button",
cls: "bi-split-left bi-split-right bi-high-light bi-split-top",
textHeight: BI.toPix(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1),
shadow: true,
text: BI.i18nText("BI-Basic_Current_Quarter"),
disabled: this._checkTodayValid(),
ref: function () {
self.textButton = this;
},
listeners: [{
eventName: BI.TextButton.EVENT_CHANGE,
action: function () {
self.fireEvent(BI.DynamicYearQuarterPopup.BUTTON_lABEL_EVENT_CHANGE);
}
}]
}, {
type: "bi.text_button",
cls: "bi-split-top bi-high-light",
shadow: true,
textHeight: BI.toPix(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1),
text: BI.i18nText("BI-Basic_OK"),
listeners: [{
eventName: BI.TextButton.EVENT_CHANGE,
action: function () {
var type = self.dateTab.getSelect();
if (type === BI.DynamicDateCombo.Dynamic) {
self.dynamicPane.checkValidation(true) && self.fireEvent(BI.DynamicDatePopup.BUTTON_OK_EVENT_CHANGE);
} else {
self.fireEvent(BI.DynamicYearQuarterPopup.BUTTON_OK_EVENT_CHANGE);
}
}
}]
}]],
height: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT
}, },
}] {
el: {
type: GridLayout.xtype,
items: [
[
{
type: TextButton.xtype,
cls: "bi-split-top bi-high-light",
shadow: true,
textHeight: toPix(
BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT,
1
),
text: i18nText("BI-Basic_Clear"),
listeners: [
{
eventName: TextButton.EVENT_CHANGE,
action: () => {
this.fireEvent(
DynamicYearQuarterPopup.BUTTON_CLEAR_EVENT_CHANGE
);
},
}
],
},
{
type: TextButton.xtype,
cls: "bi-split-left bi-split-right bi-high-light bi-split-top",
textHeight: toPix(
BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT,
1
),
shadow: true,
text: i18nText("BI-Basic_Current_Quarter"),
disabled: this._checkTodayValid(),
ref: _ref => {
this.textButton = _ref;
},
listeners: [
{
eventName: TextButton.EVENT_CHANGE,
action: () => {
this.fireEvent(
DynamicYearQuarterPopup.BUTTON_lABEL_EVENT_CHANGE
);
},
}
],
},
{
type: TextButton.xtype,
cls: "bi-split-top bi-high-light",
shadow: true,
textHeight: toPix(
BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT,
1
),
text: i18nText("BI-Basic_OK"),
listeners: [
{
eventName: TextButton.EVENT_CHANGE,
action: () => {
const type =
this.dateTab.getSelect();
if (
type ===
DynamicDateCombo.Dynamic
) {
this.dynamicPane.checkValidation(
true
) &&
this.fireEvent(
DynamicDatePopup.BUTTON_OK_EVENT_CHANGE
);
} else {
this.fireEvent(DynamicYearQuarterPopup
.BUTTON_OK_EVENT_CHANGE
);
}
},
}
],
}
]
],
height: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT,
},
}
],
}; };
}, }
_setInnerValue: function () { _setInnerValue() {
if (this.dateTab.getSelect() === BI.DynamicYearQuarterCombo.Static) { if (this.dateTab.getSelect() === DynamicYearQuarterCombo.Static) {
this.textButton.setValue(BI.i18nText("BI-Basic_Current_Quarter")); this.textButton.setValue(i18nText("BI-Basic_Current_Quarter"));
this.textButton.setEnable(!this._checkTodayValid()); this.textButton.setEnable(!this._checkTodayValid());
} else { } else {
var date = BI.DynamicDateHelper.getCalculation(this.dynamicPane.getInputValue()); let date = DynamicDateHelper.getCalculation(
date = BI.print(date, "%Y-%Q"); this.dynamicPane.getInputValue()
);
date = print(date, "%Y-%Q");
this.textButton.setValue(date); this.textButton.setValue(date);
this.textButton.setEnable(false); this.textButton.setEnable(false);
} }
}, }
_checkTodayValid: function () { _checkTodayValid() {
var o = this.options; const o = this.options;
var today = BI.getDate(); const today = getDate();
return !!BI.checkDateVoid(today.getFullYear(), today.getMonth() + 1, today.getDate(), o.min, o.max)[0];
}, return !!checkDateVoid(
today.getFullYear(),
today.getMonth() + 1,
today.getDate(),
o.min,
o.max
)[0];
}
_getTabJson: function () { _getTabJson() {
var self = this, o = this.options; const o = this.options;
return { return {
type: "bi.tab", type: Tab.xtype,
logic: { logic: {
dynamic: true dynamic: true,
}, },
ref: function () { ref: _ref => {
self.dateTab = this; this.dateTab = _ref;
}, },
tab: { tab: {
type: "bi.linear_segment", type: LinearSegment.xtype,
cls: "bi-split-bottom", cls: "bi-split-bottom",
invisible: !o.supportDynamic, invisible: !o.supportDynamic,
height: this.constants.tabHeight, height: this.constants.tabHeight,
items: BI.createItems([{ items: createItems(
text: BI.i18nText("BI-Basic_Year_Quarter"), [
value: BI.DynamicYearQuarterCombo.Static {
}, { text: i18nText("BI-Basic_Year_Quarter"),
text: BI.i18nText("BI-Basic_Dynamic_Title"), value: DynamicYearQuarterCombo.Static,
value: BI.DynamicYearQuarterCombo.Dynamic },
}], { {
textAlign: "center" text: i18nText("BI-Basic_Dynamic_Title"),
}) value: DynamicYearQuarterCombo.Dynamic,
}
],
{
textAlign: "center",
}
),
}, },
cardCreator: function (v) { cardCreator: v => {
switch (v) { switch (v) {
case BI.DynamicYearQuarterCombo.Dynamic: case DynamicYearQuarterCombo.Dynamic:
return { return {
type: "bi.dynamic_year_quarter_card", type: DynamicYearQuarterCard.xtype,
cls: "dynamic-year-quarter-pane", cls: "dynamic-year-quarter-pane",
min: self.options.min, min: this.options.min,
max: self.options.max, max: this.options.max,
listeners: [{ listeners: [
{
eventName: "EVENT_CHANGE", eventName: "EVENT_CHANGE",
action: function () { action: () => {
self._setInnerValue(self.year, v); this._setInnerValue(this.year, v);
} },
}],
ref: function () {
self.dynamicPane = this;
} }
}; ],
case BI.DynamicYearQuarterCombo.Static: ref: _ref => {
default: this.dynamicPane = _ref;
return { },
type: "bi.static_year_quarter_card", };
behaviors: o.behaviors, case DynamicYearQuarterCombo.Static:
min: self.options.min, default:
max: self.options.max, return {
listeners: [{ type: StaticYearQuarterCard.xtype,
behaviors: o.behaviors,
min: this.options.min,
max: this.options.max,
listeners: [
{
eventName: BI.DynamicYearCard.EVENT_CHANGE, eventName: BI.DynamicYearCard.EVENT_CHANGE,
action: function () { action: () => {
self.fireEvent(BI.DynamicYearQuarterPopup.EVENT_CHANGE); this.fireEvent(
} DynamicYearQuarterPopup.EVENT_CHANGE
}], );
ref: function () { },
self.year = this;
} }
}; ],
ref: _ref => {
this.year = _ref;
},
};
} }
}, },
listeners: [{ listeners: [
eventName: BI.Tab.EVENT_CHANGE, {
action: function () { eventName: Tab.EVENT_CHANGE,
var v = self.dateTab.getSelect(); action: () => {
switch (v) { const v = this.dateTab.getSelect();
case BI.DynamicYearQuarterCombo.Static: let date;
var date = BI.DynamicDateHelper.getCalculation(self.dynamicPane.getValue()); switch (v) {
self.year.setValue({year: date.getFullYear(), quarter: BI.getQuarter(date)}); case DynamicYearQuarterCombo.Static:
self._setInnerValue(); date = DynamicDateHelper.getCalculation(
this.dynamicPane.getValue()
);
this.year.setValue({
year: date.getFullYear(),
quarter: getQuarter(date),
});
this._setInnerValue();
break; break;
case BI.DynamicYearQuarterCombo.Dynamic: case DynamicYearQuarterCombo.Dynamic:
default: default:
if(self.storeValue && self.storeValue.type === BI.DynamicYearQuarterCombo.Dynamic) { if (
self.dynamicPane.setValue(self.storeValue.value); this.storeValue &&
}else{ this.storeValue.type ===
self.dynamicPane.setValue({ DynamicYearQuarterCombo.Dynamic
year: 0 ) {
this.dynamicPane.setValue(
this.storeValue.value
);
} else {
this.dynamicPane.setValue({
year: 0,
}); });
} }
self._setInnerValue(); this._setInnerValue();
break; break;
} }
},
} }
}] ],
}; };
}, }
setMinDate: function (minDate) { setMinDate(minDate) {
if (this.options.min !== minDate) { if (this.options.min !== minDate) {
this.options.min = minDate; this.options.min = minDate;
this.year && this.year.setMinDate(minDate); this.year && this.year.setMinDate(minDate);
this.dynamicPane && this.dynamicPane.setMinDate(minDate); this.dynamicPane && this.dynamicPane.setMinDate(minDate);
} }
}, }
setMaxDate: function (maxDate) { setMaxDate(maxDate) {
if (this.options.max !== maxDate) { if (this.options.max !== maxDate) {
this.options.max = maxDate; this.options.max = maxDate;
this.year && this.year.setMaxDate(maxDate); this.year && this.year.setMaxDate(maxDate);
this.dynamicPane && this.dynamicPane.setMaxDate(maxDate); this.dynamicPane && this.dynamicPane.setMaxDate(maxDate);
} }
}, }
setValue: function (v) { setValue(v) {
this.storeValue = v; this.storeValue = v;
var self = this;
var type, value;
v = v || {}; v = v || {};
type = v.type || BI.DynamicDateCombo.Static; const type = v.type || DynamicDateCombo.Static;
value = v.value || v; const value = v.value || v;
this.dateTab.setSelect(type); this.dateTab.setSelect(type);
switch (type) { switch (type) {
case BI.DynamicDateCombo.Dynamic: case DynamicDateCombo.Dynamic:
this.dynamicPane.setValue(value); this.dynamicPane.setValue(value);
self._setInnerValue(); this._setInnerValue();
break; break;
case BI.DynamicDateCombo.Static: case DynamicDateCombo.Static:
default: default:
this.year.setValue(value); this.year.setValue(value);
this.textButton.setValue(BI.i18nText("BI-Basic_Current_Quarter")); this.textButton.setValue(i18nText("BI-Basic_Current_Quarter"));
this.textButton.setEnable(!this._checkTodayValid()); this.textButton.setEnable(!this._checkTodayValid());
break; break;
} }
}, }
getValue: function () { getValue() {
return { return {
type: this.dateTab.getSelect(), type: this.dateTab.getSelect(),
value: this.dateTab.getValue() value: this.dateTab.getValue(),
}; };
} }
}
});
BI.DynamicYearQuarterPopup.BUTTON_CLEAR_EVENT_CHANGE = "BUTTON_CLEAR_EVENT_CHANGE";
BI.DynamicYearQuarterPopup.BUTTON_lABEL_EVENT_CHANGE = "BUTTON_lABEL_EVENT_CHANGE";
BI.DynamicYearQuarterPopup.BUTTON_OK_EVENT_CHANGE = "BUTTON_OK_EVENT_CHANGE";
BI.DynamicYearQuarterPopup.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.dynamic_year_quarter_popup", BI.DynamicYearQuarterPopup);

461
src/widget/yearquarter/trigger.yearquarter.js

@ -1,277 +1,374 @@
BI.DynamicYearQuarterTrigger = BI.inherit(BI.Trigger, { import {
_const: { shortcut,
hgap: 4, i18nText,
vgap: 2, createWidget,
iconWidth: 24 HTapeLayout,
}, CenterLayout,
HorizontalFillLayout,
isEmptyString,
parseDateTime,
isPositiveInteger,
checkDateVoid,
isNotEmptyString,
isNotNull,
print,
checkDateLegal,
isNull,
parseInt,
getDate,
getQuarter
} from "@/core";
import { Trigger, TextButton } from "@/base";
import { TriggerIconButton, SignEditor } from "@/case";
import { DynamicDateHelper } from "../dynamicdate";
// TODO:需要等待yearmonth完成才能将BI.DynamicYearMonthTrigger替换
// import { DynamicYearMonthTrigger } from "../yearmonth/trigger.yearmonth";
import { DynamicYearQuarterCombo } from "./combo.yearquarter";
props: () => ({ @shortcut()
extraCls: "bi-year-quarter-trigger", export class DynamicYearQuarterTrigger extends Trigger {
min: "1900-01-01", // 最小日期 static xtype = "bi.dynamic_year_quarter_trigger";
max: "2099-12-31", // 最大日期
height: 24,
watermark: {
year: BI.i18nText("BI-Basic_Unrestricted"),
quarter: BI.i18nText("BI-Basic_Unrestricted"),
},
}),
_init: function () { _const = { hgap: 4, vgap: 2, iconWidth: 24 };
BI.DynamicYearQuarterTrigger.superclass._init.apply(this, arguments);
var o = this.options; static EVENT_FOCUS = "EVENT_FOCUS";
static EVENT_ERROR = "EVENT_ERROR";
static EVENT_START = "EVENT_START";
static EVENT_CONFIRM = "EVENT_CONFIRM";
static EVENT_STOP = "EVENT_STOP";
static EVENT_KEY_DOWN = "EVENT_KEY_DOWN";
static EVENT_VALID = "EVENT_VALID";
props() {
return {
extraCls: "bi-year-quarter-trigger",
min: "1900-01-01", // 最小日期
max: "2099-12-31", // 最大日期
height: 24,
watermark: {
year: i18nText("BI-Basic_Unrestricted"),
quarter: i18nText("BI-Basic_Unrestricted"),
},
};
}
_init() {
super._init(...arguments);
const o = this.options;
this.yearEditor = this._createEditor(true); this.yearEditor = this._createEditor(true);
this.quarterEditor = this._createEditor(false); this.quarterEditor = this._createEditor(false);
// 暂时的解决方法 // 暂时的解决方法
var height = o.height + 2; // const height = o.height + 2;
BI.createWidget({ createWidget({
element: this, element: this,
type: "bi.htape", type: HTapeLayout.xtype,
items: [{ items: [
type: "bi.center", {
items: [{ type: CenterLayout.xtype,
type: "bi.horizontal_fill", items: [
columnSize: ["fill", ""], {
items: [this.yearEditor, { type: HorizontalFillLayout.xtype,
el: { columnSize: ["fill", ""],
type: "bi.text_button", items: [
text: BI.i18nText("BI-Multi_Date_Year"), this.yearEditor,
}, {
}] el: {
}, { type: TextButton.xtype,
type: "bi.horizontal_fill", text: i18nText("BI-Multi_Date_Year"),
columnSize: ["fill", ""], },
items: [this.quarterEditor, { }
el: { ],
type: "bi.text_button",
text: BI.i18nText("BI-Multi_Date_Quarter"),
}, },
}] {
}] type: HorizontalFillLayout.xtype,
}, { columnSize: ["fill", ""],
el: { items: [
type: "bi.trigger_icon_button", this.quarterEditor,
width: this._const.iconWidth, {
el: {
type: TextButton.xtype,
text: i18nText("BI-Multi_Date_Quarter"),
},
}
],
}
],
}, },
width: this._const.iconWidth, {
}] el: {
type: TriggerIconButton.xtype,
width: this._const.iconWidth,
},
width: this._const.iconWidth,
}
],
}); });
this.setValue(o.value); this.setValue(o.value);
}, }
_createEditor: function (isYear) { _createEditor(isYear) {
var self = this, o = this.options, c = this._const; const o = this.options,
var editor = BI.createWidget({ c = this._const;
type: "bi.sign_editor", const editor = createWidget({
type: SignEditor.xtype,
simple: o.simple, simple: o.simple,
height: o.height, height: o.height,
validationChecker: function (v) { validationChecker: v => {
if(isYear) { if (isYear) {
var month = self.quarterEditor.getValue(); let month = this.quarterEditor.getValue();
if(BI.isEmptyString(month)) { if (isEmptyString(month)) {
month = parseInt(v, 10) === BI.parseDateTime(o.min, "%Y-%X-%d").getFullYear() ? BI.parseDateTime(o.min, "%Y-%X-%d").getMonth() + 1 : 1; month =
parseInt(v, 10) ===
parseDateTime(o.min, "%Y-%X-%d").getFullYear()
? parseDateTime(o.min, "%Y-%X-%d").getMonth() +
1
: 1;
} else { } else {
month = (parseInt(month, 10) - 1) * 3 + 1; month = (parseInt(month, 10) - 1) * 3 + 1;
} }
return v === "" || (BI.isPositiveInteger(v) && !BI.checkDateVoid(v, month, 1, o.min, o.max)[0]);
return (
v === "" ||
(isPositiveInteger(v) &&
!checkDateVoid(v, month, 1, o.min, o.max)[0])
);
} }
var year = self.yearEditor.getValue(); const year = this.yearEditor.getValue();
return v === "" || ((BI.isPositiveInteger(v) && v >= 1 && v <= 4) && (BI.isEmptyString(year) ? true : !BI.checkDateVoid(self.yearEditor.getValue(), (v - 1) * 3 + 1, 1, o.min, o.max)[0])); return (
}, v === "" ||
quitChecker: function () { (isPositiveInteger(v) &&
return false; v >= 1 &&
v <= 4 &&
(isEmptyString(year)
? true
: !checkDateVoid(
this.yearEditor.getValue(),
(v - 1) * 3 + 1,
1,
o.min,
o.max
)[0]))
);
}, },
errorText: function (v) { quitChecker: () => false,
var year = isYear ? v : self.yearEditor.getValue(); errorText: v => {
var quarter = isYear ? self.quarterEditor.getValue() : v; const year = isYear ? v : this.yearEditor.getValue();
if (!BI.isPositiveInteger(year) || !BI.isPositiveInteger(quarter) || quarter > 4) { const quarter = isYear ? this.quarterEditor.getValue() : v;
return BI.i18nText("BI-Year_Trigger_Invalid_Text"); if (
!isPositiveInteger(year) ||
!isPositiveInteger(quarter) ||
quarter > 4
) {
return i18nText("BI-Year_Trigger_Invalid_Text");
} }
var start = BI.parseDateTime(o.min, "%Y-%X-%d"); const start = parseDateTime(o.min, "%Y-%X-%d");
var end = BI.parseDateTime(o.max, "%Y-%X-%d"); const end = parseDateTime(o.max, "%Y-%X-%d");
return BI.i18nText("BI-Basic_Year_Quarter_Range_Error", return i18nText(
"BI-Basic_Year_Quarter_Range_Error",
start.getFullYear(), start.getFullYear(),
BI.getQuarter(start), getQuarter(start),
end.getFullYear(), end.getFullYear(),
BI.getQuarter(end) getQuarter(end)
); );
}, },
watermark: isYear ? o.watermark?.year : o.watermark?.quarter, watermark: isYear ? o.watermark?.year : o.watermark?.quarter,
hgap: c.hgap, hgap: c.hgap,
vgap: c.vgap, vgap: c.vgap,
allowBlank: true allowBlank: true,
}); });
editor.on(BI.SignEditor.EVENT_KEY_DOWN, function () { editor.on(SignEditor.EVENT_KEY_DOWN, () => {
self.fireEvent(BI.DynamicYearQuarterTrigger.EVENT_KEY_DOWN); this.fireEvent(DynamicYearQuarterTrigger.EVENT_KEY_DOWN);
}); });
editor.on(BI.SignEditor.EVENT_FOCUS, function () { editor.on(SignEditor.EVENT_FOCUS, () => {
self.fireEvent(BI.DynamicYearQuarterTrigger.EVENT_FOCUS); this.fireEvent(DynamicYearQuarterTrigger.EVENT_FOCUS);
}); });
editor.on(BI.SignEditor.EVENT_STOP, function () { editor.on(SignEditor.EVENT_STOP, () => {
self.fireEvent(BI.DynamicYearQuarterTrigger.EVENT_STOP); this.fireEvent(DynamicYearQuarterTrigger.EVENT_STOP);
}); });
editor.on(BI.SignEditor.EVENT_CONFIRM, function () { editor.on(SignEditor.EVENT_CONFIRM, () => {
self._doEditorConfirm(editor); this._doEditorConfirm(editor);
self.fireEvent(BI.DynamicYearQuarterTrigger.EVENT_CONFIRM); this.fireEvent(DynamicYearQuarterTrigger.EVENT_CONFIRM);
}); });
editor.on(BI.SignEditor.EVENT_SPACE, function () { editor.on(SignEditor.EVENT_SPACE, () => {
if (editor.isValid()) { if (editor.isValid()) {
editor.blur(); editor.blur();
} }
}); });
editor.on(BI.SignEditor.EVENT_START, function () { editor.on(SignEditor.EVENT_START, () => {
self.fireEvent(BI.DynamicYearQuarterTrigger.EVENT_START); this.fireEvent(DynamicYearQuarterTrigger.EVENT_START);
}); });
editor.on(BI.SignEditor.EVENT_ERROR, function () { editor.on(SignEditor.EVENT_ERROR, () => {
self.fireEvent(BI.DynamicYearQuarterTrigger.EVENT_ERROR); this.fireEvent(DynamicYearQuarterTrigger.EVENT_ERROR);
}); });
editor.on(BI.SignEditor.EVENT_VALID, function () { editor.on(SignEditor.EVENT_VALID, () => {
var year = self.yearEditor.getValue(); const year = this.yearEditor.getValue();
var quarter = self.quarterEditor.getValue(); const quarter = this.quarterEditor.getValue();
if(BI.isNotEmptyString(year) && BI.isNotEmptyString(quarter)) { if (isNotEmptyString(year) && isNotEmptyString(quarter)) {
if(BI.isPositiveInteger(year) && quarter >= 1 && quarter <= 4 && !BI.checkDateVoid(year, (quarter - 1) * 3 + 1, 1, o.min, o.max)[0]) { if (
self.fireEvent(BI.DynamicYearMonthTrigger.EVENT_VALID); isPositiveInteger(year) &&
quarter >= 1 &&
quarter <= 4 &&
!checkDateVoid(
year,
(quarter - 1) * 3 + 1,
1,
o.min,
o.max
)[0]
) {
this.fireEvent(BI.DynamicYearMonthTrigger.EVENT_VALID);
} }
} }
}); });
editor.on(BI.SignEditor.EVENT_CHANGE, function () { editor.on(SignEditor.EVENT_CHANGE, () => {
if(isYear) { if (isYear) {
self._autoSwitch(editor); this._autoSwitch(editor);
} }
}); });
return editor; return editor;
}, }
_doEditorConfirm: function (editor) { _doEditorConfirm(editor) {
var value = editor.getValue(); const value = editor.getValue();
if (BI.isNotNull(value)) { if (isNotNull(value)) {
editor.setValue(value); editor.setValue(value);
} }
var quarterValue = this.quarterEditor.getValue(); const quarterValue = this.quarterEditor.getValue();
this.storeValue = { this.storeValue = {
type: BI.DynamicYearQuarterCombo.Static, type: DynamicYearQuarterCombo.Static,
value: { value: {
year: this.yearEditor.getValue(), year: this.yearEditor.getValue(),
quarter: BI.isEmptyString(this.quarterEditor.getValue()) ? "" : quarterValue quarter: isEmptyString(this.quarterEditor.getValue())
} ? ""
: quarterValue,
},
}; };
this.setTitle(this._getStaticTitle(this.storeValue.value)); this.setTitle(this._getStaticTitle(this.storeValue.value));
}, }
_yearCheck: function (v) { _yearCheck(v) {
var date = BI.print(BI.parseDateTime(v, "%Y-%X-%d"), "%Y-%X-%d"); const date = print(parseDateTime(v, "%Y-%X-%d"), "%Y-%X-%d");
return BI.print(BI.parseDateTime(v, "%Y"), "%Y") === v && date >= this.options.min && date <= this.options.max;
}, return (
print(parseDateTime(v, "%Y"), "%Y") === v &&
date >= this.options.min &&
date <= this.options.max
);
}
_autoSwitch: function (editor) { _autoSwitch(editor) {
var v = editor.getValue(); const v = editor.getValue();
if (BI.isNotEmptyString(v) && BI.checkDateLegal(v)) { if (isNotEmptyString(v) && checkDateLegal(v)) {
if (v.length === 4 && this._yearCheck(v)) { if (v.length === 4 && this._yearCheck(v)) {
this._doEditorConfirm(editor); this._doEditorConfirm(editor);
this.fireEvent(BI.DynamicYearQuarterTrigger.EVENT_CONFIRM); this.fireEvent(DynamicYearQuarterTrigger.EVENT_CONFIRM);
this.quarterEditor.focus(); this.quarterEditor.focus();
} }
} }
}, }
_getStaticTitle: function (value) { _getStaticTitle(value) {
value = value || {}; value = value || {};
var hasYear = !(BI.isNull(value.year) || BI.isEmptyString(value.year)); const hasYear = !(isNull(value.year) || isEmptyString(value.year));
var hasMonth = !(BI.isNull(value.quarter) || BI.isEmptyString(value.quarter)); const hasMonth = !(isNull(value.quarter) || isEmptyString(value.quarter));
switch ((hasYear << 1) | hasMonth) { switch ((hasYear << 1) | hasMonth) {
// !hasYear && !hasMonth // !hasYear && !hasMonth
case 0: case 0:
return ""; return "";
// !hasYear && hasMonth // !hasYear && hasMonth
case 1: case 1:
return value.quarter; return value.quarter;
// hasYear && !hasMonth // hasYear && !hasMonth
case 2: case 2:
return value.year; return value.year;
// hasYear && hasMonth // hasYear && hasMonth
case 3: case 3:
default: default:
return value.year + "-" + value.quarter; return `${value.year}-${value.quarter}`;
} }
}, }
_getText: function (obj) { _getText(obj) {
var value = ""; let value = "";
if(BI.isNotNull(obj.year) && BI.parseInt(obj.year) !== 0) { if (isNotNull(obj.year) && parseInt(obj.year) !== 0) {
value += Math.abs(obj.year) + BI.i18nText("BI-Basic_Year") + (obj.year < 0 ? BI.i18nText("BI-Basic_Front") : BI.i18nText("BI-Basic_Behind")); value +=
Math.abs(obj.year) +
i18nText("BI-Basic_Year") +
(obj.year < 0
? i18nText("BI-Basic_Front")
: i18nText("BI-Basic_Behind"));
} }
if(BI.isNotNull(obj.quarter) && BI.parseInt(obj.quarter) !== 0) { if (isNotNull(obj.quarter) && parseInt(obj.quarter) !== 0) {
value += Math.abs(obj.quarter) + BI.i18nText("BI-Basic_Single_Quarter") + (obj.quarter < 0 ? BI.i18nText("BI-Basic_Front") : BI.i18nText("BI-Basic_Behind")); value +=
Math.abs(obj.quarter) +
i18nText("BI-Basic_Single_Quarter") +
(obj.quarter < 0
? i18nText("BI-Basic_Front")
: i18nText("BI-Basic_Behind"));
} }
return value; return value;
}, }
_setInnerValue: function (date, text) { _setInnerValue(date, text) {
var dateStr = BI.print(date, "%Y-%Q"); const dateStr = print(date, "%Y-%Q");
this.yearEditor.setValue(date.getFullYear()); this.yearEditor.setValue(date.getFullYear());
this.quarterEditor.setValue(BI.getQuarter(date)); this.quarterEditor.setValue(getQuarter(date));
this.setTitle(BI.isEmptyString(text) ? dateStr : (text + ":" + dateStr)); this.setTitle(isEmptyString(text) ? dateStr : `${text}:${dateStr}`);
}, }
setMinDate: function (minDate) { setMinDate(minDate) {
if (BI.isNotEmptyString(this.options.min)) { if (isNotEmptyString(this.options.min)) {
this.options.min = minDate; this.options.min = minDate;
} }
}, }
setMaxDate: function (maxDate) { setMaxDate(maxDate) {
if (BI.isNotEmptyString(this.options.max)) { if (isNotEmptyString(this.options.max)) {
this.options.max = maxDate; this.options.max = maxDate;
} }
}, }
setValue: function (v) { setValue(v) {
var type, value; let type, value, text, quarter;
var date = BI.getDate(); let date = getDate();
this.storeValue = v; this.storeValue = v;
if (BI.isNotNull(v)) { if (isNotNull(v)) {
type = v.type || BI.DynamicYearQuarterCombo.Static; type = v.type || DynamicYearQuarterCombo.Static;
value = v.value || v; value = v.value || v;
} }
switch (type) { switch (type) {
case BI.DynamicYearQuarterCombo.Dynamic: case DynamicYearQuarterCombo.Dynamic:
var text = this._getText(value); text = this._getText(value);
date = BI.DynamicDateHelper.getCalculation(value); date = DynamicDateHelper.getCalculation(value);
this._setInnerValue(date, text); this._setInnerValue(date, text);
break; break;
case BI.DynamicYearQuarterCombo.Static: case DynamicYearQuarterCombo.Static:
default: default:
value = value || {}; value = value || {};
var quarter = BI.isNull(value.quarter) ? null : value.quarter; quarter = isNull(value.quarter) ? null : value.quarter;
this.yearEditor.setValue(value.year); this.yearEditor.setValue(value.year);
this.quarterEditor.setValue(quarter); this.quarterEditor.setValue(quarter);
this.setTitle(this._getStaticTitle(value)); this.setTitle(this._getStaticTitle(value));
break; break;
} }
}, }
getValue: function () { getValue() {
return this.storeValue; return this.storeValue;
}, }
getKey: function () { getKey() {
return this.yearEditor.getValue() + "-" + this.quarterEditor.getValue(); return `${this.yearEditor.getValue()}-${this.quarterEditor.getValue()}`;
}, }
isStateValid: function () { isStateValid() {
return this.yearEditor.isValid() && this.quarterEditor.isValid(); return this.yearEditor.isValid() && this.quarterEditor.isValid();
} }
}); }
BI.DynamicYearQuarterTrigger.EVENT_FOCUS = "EVENT_FOCUS";
BI.DynamicYearQuarterTrigger.EVENT_ERROR = "EVENT_ERROR";
BI.DynamicYearQuarterTrigger.EVENT_START = "EVENT_START";
BI.DynamicYearQuarterTrigger.EVENT_CONFIRM = "EVENT_CONFIRM";
BI.DynamicYearQuarterTrigger.EVENT_STOP = "EVENT_STOP";
BI.DynamicYearQuarterTrigger.EVENT_KEY_DOWN = "EVENT_KEY_DOWN";
BI.DynamicYearQuarterTrigger.EVENT_VALID = "EVENT_VALID";
BI.shortcut("bi.dynamic_year_quarter_trigger", BI.DynamicYearQuarterTrigger);

315
src/widget/yearquarterinterval/yearquarterinterval.js

@ -1,193 +1,248 @@
/** import {
* @author windy shortcut,
* @version 2.0 HorizontalFillLayout,
* Created by windy on 2021/1/25 createWidget,
*/ i18nText,
BI.YearQuarterInterval = BI.inherit(BI.Single, { print,
constants: { parseDateTime,
checkDateVoid,
isNotNull,
checkDateLegal
} from "@/core";
import { Single, Label, Bubbles } from "@/base";
import { DynamicYearQuarterCombo } from "../yearquarter";
@shortcut()
export class YearQuarterInterval extends Single {
static xtype = "bi.year_quarter_interval";
constants = {
height: 24, height: 24,
width: 25, width: 25,
lgap: 15, lgap: 15,
offset: -15, offset: -15,
timeErrorCls: "time-error" timeErrorCls: "time-error",
}, };
props = {
props: {
extraCls: "bi-year-quarter-interval", extraCls: "bi-year-quarter-interval",
minDate: "1900-01-01", minDate: "1900-01-01",
maxDate: "2099-12-31", maxDate: "2099-12-31",
supportDynamic: true, supportDynamic: true,
}, };
static EVENT_VALID = "EVENT_VALID";
static EVENT_ERROR = "EVENT_ERROR";
static EVENT_CHANGE = "EVENT_CHANGE";
static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
render: function () { render() {
var self = this, o = this.options; const o = this.options;
o.value = o.value || {}; o.value = o.value || {};
this.left = this._createCombo(o.value.start, o.watermark?.start); this.left = this._createCombo(o.value.start, o.watermark?.start);
this.right = this._createCombo(o.value.end, o.watermark?.end); this.right = this._createCombo(o.value.end, o.watermark?.end);
return { return {
type: "bi.horizontal_fill", type: HorizontalFillLayout.xtype,
columnSize: ["fill", "", "fill"], columnSize: ["fill", "", "fill"],
items: [{ items: [
el: self.left {
}, { el: this.left,
el: { },
type: "bi.label", {
height: o.height, el: {
hgap: 5, type: Label.xtype,
text: "-", height: o.height,
ref: function (_ref) { hgap: 5,
self.label = _ref; text: "-",
} ref: _ref => {
this.label = _ref;
},
},
},
{
el: this.right,
} }
}, { ],
el: self.right
}]
}; };
}, }
_createCombo: function (v, watermark) { _createCombo(v, watermark) {
var self = this, o = this.options; const o = this.options;
var combo = BI.createWidget({ const combo = createWidget({
type: "bi.dynamic_year_quarter_combo", type: DynamicYearQuarterCombo.xtype,
supportDynamic: o.supportDynamic, supportDynamic: o.supportDynamic,
minDate: o.minDate, minDate: o.minDate,
maxDate: o.maxDate, maxDate: o.maxDate,
behaviors: o.behaviors, behaviors: o.behaviors,
value: v, value: v,
height: o.height, height: o.height,
watermark: watermark, watermark,
listeners: [{ listeners: [
eventName: BI.DynamicYearQuarterCombo.EVENT_BEFORE_POPUPVIEW, {
action: function () { eventName: DynamicYearQuarterCombo.EVENT_BEFORE_POPUPVIEW,
self.fireEvent(BI.YearQuarterInterval.EVENT_BEFORE_POPUPVIEW); action: () => {
this.fireEvent(
YearQuarterInterval.EVENT_BEFORE_POPUPVIEW
);
},
} }
}] ],
}); });
combo.on(BI.DynamicYearQuarterCombo.EVENT_ERROR, function () { combo.on(DynamicYearQuarterCombo.EVENT_ERROR, () => {
self._clearTitle(); this._clearTitle();
BI.Bubbles.hide("error"); Bubbles.hide("error");
self.element.removeClass(self.constants.timeErrorCls); this.element.removeClass(this.constants.timeErrorCls);
self.fireEvent(BI.YearQuarterInterval.EVENT_ERROR); this.fireEvent(YearQuarterInterval.EVENT_ERROR);
}); });
combo.on(BI.DynamicYearQuarterCombo.EVENT_VALID, function () { combo.on(DynamicYearQuarterCombo.EVENT_VALID, () => {
self._checkValid(); this._checkValid();
}); });
combo.on(BI.DynamicYearQuarterCombo.EVENT_FOCUS, function () { combo.on(DynamicYearQuarterCombo.EVENT_FOCUS, () => {
self._checkValid(); this._checkValid();
}); });
combo.on(BI.DynamicYearQuarterCombo.EVENT_CONFIRM, function () { combo.on(DynamicYearQuarterCombo.EVENT_CONFIRM, () => {
BI.Bubbles.hide("error"); Bubbles.hide("error");
var smallDate = self.left.getKey(), bigDate = self.right.getKey(); const smallDate = this.left.getKey(),
if (self.left.isStateValid() && self.right.isStateValid() && self._check(smallDate, bigDate) && self._compare(smallDate, bigDate)) { bigDate = this.right.getKey();
self._setTitle(BI.i18nText("BI-Time_Interval_Error_Text")); if (
self.element.addClass(self.constants.timeErrorCls); this.left.isStateValid() &&
self.fireEvent(BI.YearQuarterInterval.EVENT_ERROR); this.right.isStateValid() &&
}else{ this._check(smallDate, bigDate) &&
self._clearTitle(); this._compare(smallDate, bigDate)
self.element.removeClass(self.constants.timeErrorCls); ) {
self.fireEvent(BI.YearQuarterInterval.EVENT_CHANGE); this._setTitle(i18nText("BI-Time_Interval_Error_Text"));
this.element.addClass(this.constants.timeErrorCls);
this.fireEvent(YearQuarterInterval.EVENT_ERROR);
} else {
this._clearTitle();
this.element.removeClass(this.constants.timeErrorCls);
this.fireEvent(YearQuarterInterval.EVENT_CHANGE);
} }
}); });
return combo; return combo;
}, }
_dateCheck: function (date) {
return BI.print(BI.parseDateTime(date, "%Y-%Q"), "%Y-%Q") === date || BI.print(BI.parseDateTime(date, "%Y-%q"), "%Y-%q") === date;
},
_dateCheck(date) {
return (
print(parseDateTime(date, "%Y-%Q"), "%Y-%Q") === date ||
print(parseDateTime(date, "%Y-%q"), "%Y-%q") === date
);
}
// 判是否在最大最小之间 _checkVoid(obj) {
_checkVoid: function (obj) { const o = this.options;
var o = this.options;
return !BI.checkDateVoid(obj.year, (obj.quarter - 1) * 3 + 1, 1, o.minDate, o.maxDate)[0]; return !checkDateVoid(
}, obj.year,
(obj.quarter - 1) * 3 + 1,
1,
o.minDate,
o.maxDate
)[0];
}
// 判格式合法 _check(smallDate, bigDate) {
_check: function (smallDate, bigDate) { const smallObj = smallDate.match(/\d+/g),
var smallObj = smallDate.match(/\d+/g), bigObj = bigDate.match(/\d+/g); bigObj = bigDate.match(/\d+/g);
var smallDate4Check = ""; let smallDate4Check = "";
if (BI.isNotNull(smallObj)) { if (isNotNull(smallObj)) {
smallDate4Check = (smallObj[0] || "") + "-" + (smallObj[1] || 1); smallDate4Check = `${smallObj[0] || ""}-${smallObj[1] || 1}`;
} }
var bigDate4Check = ""; let bigDate4Check = "";
if (BI.isNotNull(bigObj)) { if (isNotNull(bigObj)) {
bigDate4Check = (bigObj[0] || "") + "-" + (bigObj[1] || 1); bigDate4Check = `${bigObj[0] || ""}-${bigObj[1] || 1}`;
} }
return this._dateCheck(smallDate4Check) && BI.checkDateLegal(smallDate4Check) && this._checkVoid({ return (
year: smallObj[0], this._dateCheck(smallDate4Check) &&
quarter: smallObj[1] || 1 checkDateLegal(smallDate4Check) &&
}) && this._dateCheck(bigDate4Check) && BI.checkDateLegal(bigDate4Check) && this._checkVoid({ this._checkVoid({
year: bigObj[0], year: smallObj[0],
quarter: bigObj[1] || 1 quarter: smallObj[1] || 1,
}); }) &&
}, this._dateCheck(bigDate4Check) &&
checkDateLegal(bigDate4Check) &&
_compare: function (smallDate, bigDate) { this._checkVoid({
smallDate = BI.print(BI.parseDateTime(smallDate, "%Y-%Q"), "%Y-%Q"); year: bigObj[0],
bigDate = BI.print(BI.parseDateTime(bigDate, "%Y-%Q"), "%Y-%Q"); quarter: bigObj[1] || 1,
return BI.isNotNull(smallDate) && BI.isNotNull(bigDate) && smallDate > bigDate; })
}, );
_setTitle: function (v) { }
_compare(smallDate, bigDate) {
smallDate = print(parseDateTime(smallDate, "%Y-%Q"), "%Y-%Q");
bigDate = print(parseDateTime(bigDate, "%Y-%Q"), "%Y-%Q");
return (
isNotNull(smallDate) && isNotNull(bigDate) && smallDate > bigDate
);
}
_setTitle(v) {
this.setTitle(v); this.setTitle(v);
}, }
_clearTitle: function () {
_clearTitle() {
this.setTitle(""); this.setTitle("");
}, }
_checkValid: function () {
var self = this; _checkValid() {
Bubbles.hide("error");
BI.Bubbles.hide("error"); const smallDate = this.left.getKey(),
var smallDate = self.left.getKey(), bigDate = self.right.getKey(); bigDate = this.right.getKey();
if (self.left.isValid() && self.right.isValid() && self._check(smallDate, bigDate) && self._compare(smallDate, bigDate)) { if (
self._setTitle(BI.i18nText("BI-Time_Interval_Error_Text")); this.left.isValid() &&
self.element.addClass(self.constants.timeErrorCls); this.right.isValid() &&
BI.Bubbles.show("error", BI.i18nText("BI-Time_Interval_Error_Text"), self, { this._check(smallDate, bigDate) &&
offsetStyle: "center" this._compare(smallDate, bigDate)
}); ) {
self.fireEvent(BI.YearQuarterInterval.EVENT_ERROR); this._setTitle(i18nText("BI-Time_Interval_Error_Text"));
this.element.addClass(this.constants.timeErrorCls);
Bubbles.show(
"error",
i18nText("BI-Time_Interval_Error_Text"),
this,
{
offsetStyle: "center",
}
);
this.fireEvent(YearQuarterInterval.EVENT_ERROR);
} else { } else {
self._clearTitle(); this._clearTitle();
self.element.removeClass(self.constants.timeErrorCls); this.element.removeClass(this.constants.timeErrorCls);
} }
}, }
setMinDate: function (minDate) { setMinDate(minDate) {
var o = this.options; const o = this.options;
o.minDate = minDate; o.minDate = minDate;
this.left.setMinDate(minDate); this.left.setMinDate(minDate);
this.right.setMinDate(minDate); this.right.setMinDate(minDate);
}, }
setMaxDate: function (maxDate) { setMaxDate(maxDate) {
var o = this.options; const o = this.options;
o.maxDate = maxDate; o.maxDate = maxDate;
this.left.setMaxDate(maxDate); this.left.setMaxDate(maxDate);
this.right.setMaxDate(maxDate); this.right.setMaxDate(maxDate);
}, }
setValue: function (date) { setValue(date) {
date = date || {}; date = date || {};
this.left.setValue(date.start); this.left.setValue(date.start);
this.right.setValue(date.end); this.right.setValue(date.end);
this._checkValid(); this._checkValid();
},
getValue: function () {
return {start: this.left.getValue(), end: this.right.getValue()};
} }
});
BI.YearQuarterInterval.EVENT_VALID = "EVENT_VALID"; getValue() {
BI.YearQuarterInterval.EVENT_ERROR = "EVENT_ERROR"; return { start: this.left.getValue(), end: this.right.getValue() };
BI.YearQuarterInterval.EVENT_CHANGE = "EVENT_CHANGE"; }
BI.YearQuarterInterval.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; }
BI.shortcut("bi.year_quarter_interval", BI.YearQuarterInterval);

Loading…
Cancel
Save