Browse Source

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

es6
Treecat 2 years ago
parent
commit
db7ac5df35
  1. 7
      es6.js
  2. 17
      src/case/button/node/treenode.js
  3. 12
      src/case/button/treeitem/treeitem.js
  4. 1
      src/case/index.js
  5. 8
      src/case/tree/tree.level.js
  6. 25
      src/core/func/function.js
  7. 19
      src/widget/index.js
  8. 175
      src/widget/multiselect/__test__/multiselect.loader.nobar.test.js
  9. 2
      src/widget/multiselect/__test__/multiselect.loader.test.js
  10. 2
      src/widget/multiselect/__test__/multiselectcombo.test.js
  11. 2
      src/widget/multiselect/__test__/multiselectinsert.combo.test.js
  12. 154
      src/widget/multiselect/check/multiselect.check.pane.js
  13. 106
      src/widget/multiselect/check/multiselect.display.js
  14. 0
      src/widget/multiselect/index.js
  15. 337
      src/widget/multiselect/loader.js
  16. 610
      src/widget/multiselect/multiselect.combo.js
  17. 620
      src/widget/multiselect/multiselect.combo.nobar.js
  18. 643
      src/widget/multiselect/multiselect.insert.combo.js
  19. 635
      src/widget/multiselect/multiselect.insert.combo.nobar.js
  20. 190
      src/widget/multiselect/multiselect.insert.trigger.js
  21. 262
      src/widget/multiselect/multiselect.loader.js
  22. 315
      src/widget/multiselect/multiselect.loader.nobar.js
  23. 133
      src/widget/multiselect/multiselect.popup.view.js
  24. 127
      src/widget/multiselect/multiselect.popup.view.nobar.js
  25. 188
      src/widget/multiselect/multiselect.trigger.js
  26. 142
      src/widget/multiselect/search/multiselect.search.insert.pane.js
  27. 205
      src/widget/multiselect/search/multiselect.search.loader.js
  28. 120
      src/widget/multiselect/search/multiselect.search.pane.js
  29. 150
      src/widget/multiselect/trigger/button.checkselected.js
  30. 124
      src/widget/multiselect/trigger/editor.multiselect.js
  31. 324
      src/widget/multiselect/trigger/editor/editor.patch.js
  32. 277
      src/widget/multiselect/trigger/searcher.multiselect.insert.js
  33. 269
      src/widget/multiselect/trigger/searcher.multiselect.js
  34. 156
      src/widget/multiselect/trigger/switcher.checkselected.js
  35. 240
      src/widget/multiselecttree/multiselecttree.js
  36. 77
      src/widget/multiselecttree/multiselecttree.popup.js
  37. 147
      src/widget/multitree/check/multi.tree.check.pane.js
  38. 371
      src/widget/multitree/multi.tree.combo.js
  39. 371
      src/widget/multitree/multi.tree.insert.combo.js
  40. 460
      src/widget/multitree/multi.tree.list.combo.js
  41. 114
      src/widget/multitree/multi.tree.popup.js
  42. 93
      src/widget/multitree/trigger/multi.tree.button.checkselected.js
  43. 199
      src/widget/multitree/trigger/multi.tree.search.insert.pane.js
  44. 132
      src/widget/multitree/trigger/multi.tree.search.pane.js
  45. 235
      src/widget/multitree/trigger/searcher.list.multi.tree.js
  46. 290
      src/widget/multitree/trigger/searcher.multi.tree.js
  47. 129
      src/widget/selecttree/nodes/node.first.plus.js
  48. 129
      src/widget/selecttree/nodes/node.last.plus.js
  49. 129
      src/widget/selecttree/nodes/node.mid.plus.js
  50. 129
      src/widget/selecttree/nodes/node.plus.js
  51. 114
      src/widget/selecttree/selecttree.combo.js
  52. 77
      src/widget/selecttree/selecttree.expander.js
  53. 125
      src/widget/selecttree/selecttree.popup.js
  54. 147
      src/widget/singletree/singletree.combo.js
  55. 80
      src/widget/singletree/singletree.popup.js
  56. 91
      src/widget/singletree/singletree.trigger.js

7
es6.js

@ -59,8 +59,13 @@ const target = [
"createItems", "createItems",
"makeArrayByArray", "makeArrayByArray",
"VerticalAlign", "VerticalAlign",
"pushDistinct",
"endWith",
"transformItems", "transformItems",
"print", "print",
"Tree",
"Func",
"Selection",
]; ];
// 加载模块 // 加载模块
@ -123,7 +128,7 @@ async function handleFile(srcName) {
return matchedSentence; return matchedSentence;
} }
}); });
fs.writeFileSync(srcName, noXtypeCode); fs.writeFileSync(srcName, noXtypeCode);
return; return;

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

@ -1,13 +1,14 @@
import { NodeButton } from "../../../base/single/button/button.node"; import { Label, NodeButton } from "@/base";
import { shortcut, extend } from "../../../core"; import { shortcut, extend, VerticalAdaptLayout } from "@/core";
import { TreeNodeSwitcher } from "@/case";
@shortcut() @shortcut()
export class BasicTreeNode extends NodeButton { export class BasicTreeNode extends NodeButton {
static xtype = "bi.tree_node"; static xtype = "bi.tree_node";
_defaultConfig(props) { _defaultConfig(props) {
const conf = super._defaultConfig.apply(this, arguments); const conf = super._defaultConfig.apply(this, arguments);
return extend(conf, { return extend(conf, {
baseCls: `${conf.baseCls || ""} bi-tree-node ${props.selectable ? "bi-list-item-active" : "bi-list-item"}`, baseCls: `${conf.baseCls || ""} bi-tree-node ${props.selectable ? "bi-list-item-active" : "bi-list-item"}`,
id: "", id: "",
@ -27,7 +28,7 @@ export class BasicTreeNode extends NodeButton {
const o = this.options; const o = this.options;
const checkbox = { const checkbox = {
type: "bi.tree_node_switcher", type: TreeNodeSwitcher.xtype,
ref: _ref => { ref: _ref => {
this.switcher = _ref; this.switcher = _ref;
}, },
@ -39,7 +40,7 @@ export class BasicTreeNode extends NodeButton {
layer: o.layer, layer: o.layer,
...o.switcherIcon, ...o.switcherIcon,
stopPropagation: o.selectable, stopPropagation: o.selectable,
mounted () { mounted() {
this.setEnable(true); this.setEnable(true);
}, },
listeners: [ listeners: [
@ -55,7 +56,7 @@ export class BasicTreeNode extends NodeButton {
}; };
return { return {
type: "bi.vertical_adapt", type: VerticalAdaptLayout.xtype,
columnSize: [o.iconWrapperWidth || o.height, "fill"], columnSize: [o.iconWrapperWidth || o.height, "fill"],
items: [ items: [
{ {
@ -63,7 +64,7 @@ export class BasicTreeNode extends NodeButton {
lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2, // 偏移公式为每一层的偏移量为节点高度的一半 lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2, // 偏移公式为每一层的偏移量为节点高度的一半
}, { }, {
el: { el: {
type: "bi.label", type: Label.xtype,
ref: _ref => { ref: _ref => {
this.text = _ref; this.text = _ref;
}, },

12
src/case/button/treeitem/treeitem.js

@ -1,5 +1,5 @@
import { NodeButton } from "../../../base/single/button/button.node"; import { shortcut, extend, VerticalAdaptLayout, Layout } from "@/core";
import { shortcut, extend } from "../../../core"; import { NodeButton, Label } from "@/base";
@shortcut() @shortcut()
export class BasicTreeItem extends NodeButton { export class BasicTreeItem extends NodeButton {
@ -7,7 +7,7 @@ export class BasicTreeItem extends NodeButton {
_defaultConfig() { _defaultConfig() {
const conf = super._defaultConfig(...arguments); const conf = super._defaultConfig(...arguments);
return extend(conf, { return extend(conf, {
baseCls: `${conf.baseCls || ""} bi-tree-item bi-list-item-active`, baseCls: `${conf.baseCls || ""} bi-tree-item bi-list-item-active`,
id: "", id: "",
@ -23,12 +23,12 @@ export class BasicTreeItem extends NodeButton {
const o = this.options; const o = this.options;
return { return {
type: "bi.vertical_adapt", type: VerticalAdaptLayout.xtype,
columnSize: ["", "fill"], columnSize: ["", "fill"],
items: [ items: [
{ {
el: { el: {
type: "bi.layout", type: Layout.xtype,
height: o.height, height: o.height,
width: o.height, width: o.height,
cls: this.getLineCls(), cls: this.getLineCls(),
@ -37,7 +37,7 @@ export class BasicTreeItem extends NodeButton {
}, },
{ {
el: { el: {
type: "bi.label", type: Label.xtype,
ref: _ref => { ref: _ref => {
this.text = _ref; this.text = _ref;
}, },

1
src/case/index.js

@ -43,6 +43,7 @@ export * from "./loader";
export * from "./segment"; export * from "./segment";
export * from "./layer"; export * from "./layer";
export * from "./linearsegment"; export * from "./linearsegment";
export * from "./checkbox";
export { export {
MultiSelectBar, MultiSelectBar,
SelectList SelectList

8
src/case/tree/tree.level.js

@ -9,7 +9,7 @@ import {
isNotEmptyArray, isNotEmptyArray,
Tree, Tree,
createWidget, createWidget,
VerticalLayout VerticalLayout, Controller, Events
} from "@/core"; } from "@/core";
import { ButtonTree, CustomTree } from "@/base"; import { ButtonTree, CustomTree } from "@/base";
import { TreeExpander } from "./treeexpander/tree.expander"; import { TreeExpander } from "./treeexpander/tree.expander";
@ -102,9 +102,9 @@ export class LevelTree extends Widget {
], ],
}, o.el), }, o.el),
}); });
this.tree.on(BI.Controller.EVENT_CHANGE, function (type, value, ob) { this.tree.on(Controller.EVENT_CHANGE, function (type, value, ob) {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); self.fireEvent(Controller.EVENT_CHANGE, arguments);
if (type === BI.Events.CLICK) { if (type === Events.CLICK) {
self.fireEvent(LevelTree.EVENT_CHANGE, value, ob); self.fireEvent(LevelTree.EVENT_CHANGE, value, ob);
self.setValue(value); self.setValue(value);
} }

25
src/core/func/function.js

@ -15,13 +15,12 @@ export function createDistinctName(array, name) {
let src = name, idx = 1; let src = name, idx = 1;
name = name || ""; name = name || "";
while (true) { while (true) {
if (every(array, function (i, item) { if (every(array, (i, item) => isKey(item) ? item !== name : item.name !== name)) {
return isKey(item) ? item !== name : item.name !== name;
})) {
break; break;
} }
name = src + (idx++); name = src + (idx++);
} }
return name; return name;
} }
@ -31,8 +30,9 @@ export function createDistinctName(array, name) {
* @return {number} * @return {number}
*/ */
export function getGBWidth(str) { export function getGBWidth(str) {
str = str + ""; str = `${str}`;
str = str.replace(/[^\x00-\xff]/g, "xx"); str = str.replace(/[^\x00-\xff]/g, "xx");
return Math.ceil(str.length / 2); return Math.ceil(str.length / 2);
} }
@ -55,7 +55,7 @@ export function getSearchResult(items, keyword, param) {
let t, text, py; let t, text, py;
keyword = toUpperCase(keyword); keyword = toUpperCase(keyword);
const matched = array ? [] : {}, find = array ? [] : {}; const matched = array ? [] : {}, find = array ? [] : {};
each(items, function (i, item) { each(items, (i, item) => {
// 兼容item为null的处理 // 兼容item为null的处理
if (isNull(item)) { if (isNull(item)) {
return; return;
@ -77,7 +77,7 @@ export function getSearchResult(items, keyword, param) {
} else { } else {
array ? find.push(item) : (find[i] = item); array ? find.push(item) : (find[i] = item);
} }
} else { // BI-56386 这边两个pid / text.length是为了防止截取的首字符串不是完整的,但光这样做还不够,即时错位了,也不能说明就不符合条件 } else { // BI-56386 这边两个pid / text.length是为了防止截取的首字符串不是完整的,但光这样做还不够,即时错位了,也不能说明就不符合条件
pidx = py.indexOf(keyword); pidx = py.indexOf(keyword);
if (pidx > -1) { if (pidx > -1) {
if (text === keyword || keyword.length === text.length) { if (text === keyword || keyword.length === text.length) {
@ -88,9 +88,10 @@ export function getSearchResult(items, keyword, param) {
} }
} }
}); });
return { return {
match: matched, match: matched,
find: find, find,
}; };
} }
@ -100,7 +101,7 @@ export function getSearchResult(items, keyword, param) {
* @param key * @param key
* @return {any[]} * @return {any[]}
*/ */
export function getSortedResult(items, key) { export function getSortedResult(items, key = null) {
const getTextOfItem = BI.isFunction(key) ? key : const getTextOfItem = BI.isFunction(key) ? key :
function (item, key) { function (item, key) {
if (BI.isNotNull(key)) { if (BI.isNotNull(key)) {
@ -112,10 +113,11 @@ export function getSortedResult(items, key) {
if (BI.isNotNull(item.value)) { if (BI.isNotNull(item.value)) {
return item.value; return item.value;
} }
return item; return item;
}; };
return items.sort(function (item1, item2) { return items.sort((item1, item2) => {
const str1 = getTextOfItem(item1, key); const str1 = getTextOfItem(item1, key);
const str2 = getTextOfItem(item2, key); const str2 = getTextOfItem(item2, key);
if (BI.isNull(str1) && BI.isNull(str2)) { if (BI.isNull(str1) && BI.isNull(str2)) {
@ -139,28 +141,33 @@ export function getSortedResult(items, key) {
return (BI.isNull(BI.CODE_INDEX[char1]) ? BI.MAX : BI.CODE_INDEX[char1]) - (BI.isNull(BI.CODE_INDEX[char2]) ? BI.MAX : BI.CODE_INDEX[char2]); return (BI.isNull(BI.CODE_INDEX[char1]) ? BI.MAX : BI.CODE_INDEX[char1]) - (BI.isNull(BI.CODE_INDEX[char2]) ? BI.MAX : BI.CODE_INDEX[char2]);
} }
} }
return len1 - len2; return len1 - len2;
}); });
} }
export function beforeFunc(sFunc, func) { export function beforeFunc(sFunc, func) {
const __self = sFunc; const __self = sFunc;
return function () { return function () {
if (func.apply(sFunc, arguments) === false) { if (func.apply(sFunc, arguments) === false) {
return false; return false;
} }
return __self.apply(sFunc, arguments); return __self.apply(sFunc, arguments);
}; };
} }
export function afterFunc(sFunc, func) { export function afterFunc(sFunc, func) {
const __self = sFunc; const __self = sFunc;
return function () { return function () {
const ret = __self.apply(sFunc, arguments); const ret = __self.apply(sFunc, arguments);
if (ret === false) { if (ret === false) {
return false; return false;
} }
func.apply(sFunc, arguments); func.apply(sFunc, arguments);
return ret; return ret;
}; };
} }

19
src/widget/index.js

@ -6,6 +6,12 @@ import * as datetime from "./datetime";
import * as datetimepane from "./datetimepane"; import * as datetimepane from "./datetimepane";
import * as dynamicdatetime from "./dynamicdatetime"; import * as dynamicdatetime from "./dynamicdatetime";
import * as time from "./time"; import * as time from "./time";
import { SelectTreeCombo } from "./selecttree/selecttree.combo";
import { SingleTreeCombo } from "./singletree/singletree.combo";
import { MultiTreeCombo } from "./multitree/multi.tree.combo";
import { MultiTreeInsertCombo } from "./multitree/multi.tree.insert.combo";
import { MultiTreeListCombo } from "./multitree/multi.tree.list.combo";
import * as multiselect from "./multiselect";
Object.assign(BI, { Object.assign(BI, {
Collapse, Collapse,
@ -16,6 +22,12 @@ Object.assign(BI, {
...datetimepane, ...datetimepane,
...dynamicdatetime, ...dynamicdatetime,
...time, ...time,
SelectTreeCombo,
SingleTreeCombo,
MultiTreeCombo,
MultiTreeInsertCombo,
MultiTreeListCombo,
...multiselect,
}); });
export * from "./date/calendar"; export * from "./date/calendar";
@ -25,6 +37,13 @@ export * from "./datetime";
export * from "./datetimepane"; export * from "./datetimepane";
export * from "./dynamicdatetime"; export * from "./dynamicdatetime";
export * from "./time"; export * from "./time";
export { SelectTreeCombo } from "./selecttree/selecttree.combo";
export { SingleTreeCombo } from "./singletree/singletree.combo";
export { MultiTreeCombo } from "./multitree/multi.tree.combo";
export { MultiTreeInsertCombo } from "./multitree/multi.tree.insert.combo";
export { MultiTreeListCombo } from "./multitree/multi.tree.list.combo";
export * from "./multiselect";
export { export {
Collapse Collapse
}; };

175
src/widget/multiselect/__test__/multiselect.loader.nobar.test.js

@ -4,15 +4,15 @@
* Created by windy on 2019/9/18 * Created by windy on 2019/9/18
*/ */
describe("multi_select_no_bar_series", function () { describe("multi_select_no_bar_series", () => {
let _getItemsByTimes, _itemsCreator, itemSelectorGetter, searchItemSelectorGetter, _hasNextByTimes, items;
var _getItemsByTimes, _itemsCreator, itemSelectorGetter, searchItemSelectorGetter, _hasNextByTimes, items; before(() => {
before(function () {
_getItemsByTimes = function (items, times) { _getItemsByTimes = function (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;
}; };
@ -21,65 +21,60 @@ describe("multi_select_no_bar_series", function () {
}; };
_itemsCreator = function (options, callback) { _itemsCreator = function (options, callback) {
var items = BI.map(BI.makeArray(100, null), function(idx, v) { let items = BI.map(BI.makeArray(100, null), (idx, v) => {
return { return {
text: idx, text: idx,
value: idx, value: idx,
title: idx title: idx,
}; };
}); });
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) { BI.each(keywords, (i, kw) => {
var search = BI.Func.getSearchResult(items, kw); const search = BI.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); const filter = BI.makeObject(options.selectedValues, true);
items = BI.filter(items, function (i, ob) { items = BI.filter(items, (i, ob) => !filter[ob.value]);
return !filter[ob.value];
});
} }
if (options.type == BI.MultiSelectCombo.REQ_GET_ALL_DATA) { if (options.type == BI.MultiSelectCombo.REQ_GET_ALL_DATA) {
callback({ callback({
items: items items,
}); });
return; return;
} }
if (options.type == BI.MultiSelectCombo.REQ_GET_DATA_LENGTH) { if (options.type == BI.MultiSelectCombo.REQ_GET_DATA_LENGTH) {
callback({count: items.length}); callback({ count: items.length });
return; return;
} }
callback({ callback({
items: _getItemsByTimes(items, options.times), items: _getItemsByTimes(items, options.times),
hasNext: _hasNextByTimes(items, options.times) hasNext: _hasNextByTimes(items, options.times),
}); });
}; };
itemSelectorGetter = function (array) { itemSelectorGetter = function (array) {
return BI.map(array, function (idx, num) { return BI.map(array, (idx, num) => `.bi-multi-select-popup-view .bi-loader .bi-button-group .bi-multi-select-item:nth-child(${num})`);
return ".bi-multi-select-popup-view .bi-loader .bi-button-group .bi-multi-select-item:nth-child(" + num + ")";
});
}; };
searchItemSelectorGetter = function (array) { searchItemSelectorGetter = function (array) {
return BI.map(array, function (idx, num) { return BI.map(array, (idx, num) => `.bi-multi-select-search-pane .bi-loader .bi-button-group .bi-multi-select-item:nth-child(${num})`);
return ".bi-multi-select-search-pane .bi-loader .bi-button-group .bi-multi-select-item:nth-child(" + num + ")";
});
}; };
});
})
/** /**
* test_author_windy * test_author_windy
**/ **/
it("setValue", function () { it("setValue", () => {
var widget = BI.Test.createWidget({ const widget = BI.Test.createWidget({
type: "bi.multi_select_no_bar_combo", type: "bi.multi_select_no_bar_combo",
width: 220, width: 220,
itemsCreator: _itemsCreator itemsCreator: _itemsCreator,
}); });
widget.setValue([1, 2]); widget.setValue([1, 2]);
expect(widget.getValue()).to.deep.equal([1, 2]); expect(widget.getValue()).to.deep.equal([1, 2]);
@ -89,12 +84,12 @@ describe("multi_select_no_bar_series", function () {
/** /**
* test_author_windy * test_author_windy
**/ **/
it("getValue", function () { it("getValue", () => {
var widget = BI.Test.createWidget({ const widget = BI.Test.createWidget({
type: "bi.multi_select_no_bar_combo", type: "bi.multi_select_no_bar_combo",
width: 220, width: 220,
itemsCreator: _itemsCreator, itemsCreator: _itemsCreator,
value: [1, 2, 3] value: [1, 2, 3],
}); });
expect(widget.getValue()).to.deep.equal([1, 2, 3]); expect(widget.getValue()).to.deep.equal([1, 2, 3]);
widget.destroy(); widget.destroy();
@ -103,22 +98,22 @@ describe("multi_select_no_bar_series", function () {
/** /**
* test_author_windy * test_author_windy
**/ **/
it("点选选值", function (done) { it("点选选值", done => {
var widget = BI.Test.createWidget({ const widget = BI.Test.createWidget({
type: "bi.multi_select_no_bar_combo", type: "bi.multi_select_no_bar_combo",
width: 220, width: 220,
itemsCreator: _itemsCreator itemsCreator: _itemsCreator,
}); });
widget.element.find(".bi-multi-select-trigger").click(); widget.element.find(".bi-multi-select-trigger").click();
// 为什么要delay 300呢,因为按钮有debounce // 为什么要delay 300呢,因为按钮有debounce
BI.delay(function () { BI.delay(() => {
// 点选1、2、3 // 点选1、2、3
BI.each(itemSelectorGetter([1,2,3]), function (idx, selector) { BI.each(itemSelectorGetter([1, 2, 3]), (idx, selector) => {
widget.element.find(selector).click(); widget.element.find(selector).click();
}); });
// 取消勾选1、2 // 取消勾选1、2
BI.delay(function () { BI.delay(() => {
BI.each(itemSelectorGetter([1,2]), function (idx, selector) { BI.each(itemSelectorGetter([1, 2]), (idx, selector) => {
widget.element.find(selector).click(); widget.element.find(selector).click();
}); });
expect(widget.getValue()).to.deep.equal([2]); expect(widget.getValue()).to.deep.equal([2]);
@ -131,19 +126,19 @@ describe("multi_select_no_bar_series", function () {
/** /**
* test_author_windy * test_author_windy
**/ **/
it("搜索选值", function (done) { it("搜索选值", done => {
var widget = BI.Test.createWidget({ const widget = BI.Test.createWidget({
type: "bi.multi_select_no_bar_combo", type: "bi.multi_select_no_bar_combo",
width: 220, width: 220,
itemsCreator: _itemsCreator itemsCreator: _itemsCreator,
}); });
BI.nextTick(function () { BI.nextTick(() => {
widget.element.find(".bi-multi-select-trigger .tip-text-style").click(); widget.element.find(".bi-multi-select-trigger .tip-text-style").click();
// 这边为啥要加呢,因为input的setValue中有nextTick // 这边为啥要加呢,因为input的setValue中有nextTick
BI.nextTick(function () { BI.nextTick(() => {
BI.Test.triggerKeyDown(widget.element.find(".bi-multi-select-trigger .bi-input"), "2", 50, function () { BI.Test.triggerKeyDown(widget.element.find(".bi-multi-select-trigger .bi-input"), "2", 50, () => {
BI.nextTick(function () { BI.nextTick(() => {
BI.each(searchItemSelectorGetter([1,2]), function (idx, selector) { BI.each(searchItemSelectorGetter([1, 2]), (idx, selector) => {
widget.element.find(selector).click(); widget.element.find(selector).click();
}); });
expect(widget.getValue()).to.deep.equal([2, 12]); expect(widget.getValue()).to.deep.equal([2, 12]);
@ -158,21 +153,21 @@ describe("multi_select_no_bar_series", function () {
/** /**
* test_author_windy * test_author_windy
**/ **/
it("查看已选", function (done) { it("查看已选", done => {
var widget = BI.Test.createWidget({ const widget = BI.Test.createWidget({
type: "bi.multi_select_no_bar_combo", type: "bi.multi_select_no_bar_combo",
width: 220, width: 220,
itemsCreator: function (op, callback) { itemsCreator(op, callback) {
callback({ callback({
items: items, items,
hasNext: false hasNext: false,
}); });
}, },
value: [1, 2] value: [1, 2],
}); });
BI.nextTick(function () { BI.nextTick(() => {
widget.element.find(".bi-multi-select-check-selected-button").click(); widget.element.find(".bi-multi-select-check-selected-button").click();
BI.delay(function () { BI.delay(() => {
expect(widget.element.find(".display-list-item").length).to.equal(2); expect(widget.element.find(".display-list-item").length).to.equal(2);
widget.destroy(); widget.destroy();
done(); done();
@ -183,11 +178,11 @@ describe("multi_select_no_bar_series", function () {
/** /**
* test_author_windy * test_author_windy
**/ **/
it("setValue", function () { it("setValue", () => {
var widget = BI.Test.createWidget({ const widget = BI.Test.createWidget({
type: "bi.multi_select_insert_no_bar_combo", type: "bi.multi_select_insert_no_bar_combo",
width: 220, width: 220,
itemsCreator: _itemsCreator itemsCreator: _itemsCreator,
}); });
widget.setValue([1, 2]); widget.setValue([1, 2]);
expect(widget.getValue()).to.deep.equal([1, 2]); expect(widget.getValue()).to.deep.equal([1, 2]);
@ -197,12 +192,12 @@ describe("multi_select_no_bar_series", function () {
/** /**
* test_author_windy * test_author_windy
**/ **/
it("getValue", function () { it("getValue", () => {
var widget = BI.Test.createWidget({ const widget = BI.Test.createWidget({
type: "bi.multi_select_insert_no_bar_combo", type: "bi.multi_select_insert_no_bar_combo",
width: 220, width: 220,
itemsCreator: _itemsCreator, itemsCreator: _itemsCreator,
value: [1, 2, 3] value: [1, 2, 3],
}); });
expect(widget.getValue()).to.deep.equal([1, 2, 3]); expect(widget.getValue()).to.deep.equal([1, 2, 3]);
widget.destroy(); widget.destroy();
@ -212,22 +207,22 @@ describe("multi_select_no_bar_series", function () {
/** /**
* test_author_windy * test_author_windy
**/ **/
it("点选选值1", function (done) { it("点选选值1", done => {
var widget = BI.Test.createWidget({ const widget = BI.Test.createWidget({
type: "bi.multi_select_insert_no_bar_combo", type: "bi.multi_select_insert_no_bar_combo",
width: 220, width: 220,
itemsCreator: _itemsCreator itemsCreator: _itemsCreator,
}); });
widget.element.find(".bi-multi-select-trigger").click(); widget.element.find(".bi-multi-select-trigger").click();
// 为什么要delay 300呢,因为按钮有debounce // 为什么要delay 300呢,因为按钮有debounce
BI.delay(function () { BI.delay(() => {
// 点选1、2、3 // 点选1、2、3
BI.each(itemSelectorGetter([1,2,3]), function (idx, selector) { BI.each(itemSelectorGetter([1, 2, 3]), (idx, selector) => {
widget.element.find(selector).click(); widget.element.find(selector).click();
}); });
// 取消勾选1、2、3 // 取消勾选1、2、3
BI.delay(function () { BI.delay(() => {
BI.each(itemSelectorGetter([1,2]), function (idx, selector) { BI.each(itemSelectorGetter([1, 2]), (idx, selector) => {
widget.element.find(selector).click(); widget.element.find(selector).click();
}); });
expect(widget.getValue()).to.deep.equal([2]); expect(widget.getValue()).to.deep.equal([2]);
@ -240,19 +235,19 @@ describe("multi_select_no_bar_series", function () {
/** /**
* test_author_windy * test_author_windy
**/ **/
it("搜索选值1", function (done) { it("搜索选值1", done => {
var widget = BI.Test.createWidget({ const widget = BI.Test.createWidget({
type: "bi.multi_select_insert_no_bar_combo", type: "bi.multi_select_insert_no_bar_combo",
width: 220, width: 220,
itemsCreator: _itemsCreator itemsCreator: _itemsCreator,
}); });
BI.nextTick(function () { BI.nextTick(() => {
widget.element.find(".bi-multi-select-trigger .tip-text-style").click(); widget.element.find(".bi-multi-select-trigger .tip-text-style").click();
// 这边为啥要加呢,因为input的setValue中有nextTick // 这边为啥要加呢,因为input的setValue中有nextTick
BI.nextTick(function () { BI.nextTick(() => {
BI.Test.triggerKeyDown(widget.element.find(".bi-multi-select-trigger .bi-input"), "2", 50, function () { BI.Test.triggerKeyDown(widget.element.find(".bi-multi-select-trigger .bi-input"), "2", 50, () => {
BI.nextTick(function () { BI.nextTick(() => {
BI.each(searchItemSelectorGetter([1,2]), function (idx, selector) { BI.each(searchItemSelectorGetter([1, 2]), (idx, selector) => {
widget.element.find(selector).click(); widget.element.find(selector).click();
}); });
expect(widget.getValue()).to.deep.equal([2, 12]); expect(widget.getValue()).to.deep.equal([2, 12]);
@ -267,18 +262,18 @@ describe("multi_select_no_bar_series", function () {
/** /**
* test_author_windy * test_author_windy
**/ **/
it("新增值1", function (done) { it("新增值1", done => {
var widget = BI.Test.createWidget({ const widget = BI.Test.createWidget({
type: "bi.multi_select_insert_no_bar_combo", type: "bi.multi_select_insert_no_bar_combo",
width: 220, width: 220,
itemsCreator: _itemsCreator itemsCreator: _itemsCreator,
}); });
BI.nextTick(function () { BI.nextTick(() => {
widget.element.find(".bi-multi-select-trigger .tip-text-style").click(); widget.element.find(".bi-multi-select-trigger .tip-text-style").click();
// 这边为啥要加呢,因为input的setValue中有nextTick // 这边为啥要加呢,因为input的setValue中有nextTick
BI.nextTick(function () { BI.nextTick(() => {
BI.Test.triggerKeyDown(widget.element.find(".bi-multi-select-trigger .bi-input"), "z", 50, function () { BI.Test.triggerKeyDown(widget.element.find(".bi-multi-select-trigger .bi-input"), "z", 50, () => {
BI.nextTick(function () { BI.nextTick(() => {
widget.element.find(".bi-text-button:contains(+点击新增\"z\")").click(); widget.element.find(".bi-text-button:contains(+点击新增\"z\")").click();
expect(widget.getValue()).to.deep.equal(["z"]); expect(widget.getValue()).to.deep.equal(["z"]);
widget.destroy(); widget.destroy();
@ -292,23 +287,23 @@ describe("multi_select_no_bar_series", function () {
/** /**
* test_author_windy * test_author_windy
**/ **/
it("查看已选1", function (done) { it("查看已选1", done => {
var widget = BI.Test.createWidget({ const widget = BI.Test.createWidget({
type: "bi.multi_select_insert_no_bar_combo", type: "bi.multi_select_insert_no_bar_combo",
width: 220, width: 220,
itemsCreator: _itemsCreator, itemsCreator: _itemsCreator,
value: { value: {
type: 1, type: 1,
value: [1, 2] value: [1, 2],
} },
}); });
BI.nextTick(function () { BI.nextTick(() => {
widget.element.find(".bi-multi-select-check-selected-button").click(); widget.element.find(".bi-multi-select-check-selected-button").click();
BI.delay(function () { BI.delay(() => {
expect(widget.element.find(".display-list-item").length).to.equal(2); expect(widget.element.find(".display-list-item").length).to.equal(2);
widget.destroy(); widget.destroy();
done(); done();
}, 300); }, 300);
}); });
}); });
}); });

2
src/widget/multiselect/__test__/multiselect.loader.test.js

@ -2,4 +2,4 @@
* @author windy * @author windy
* @version 2.0 * @version 2.0
* Created by windy on 2019/9/18 * Created by windy on 2019/9/18
*/ */

2
src/widget/multiselect/__test__/multiselectcombo.test.js

@ -2,4 +2,4 @@
* @author windy * @author windy
* @version 2.0 * @version 2.0
* Created by windy on 2019/9/18 * Created by windy on 2019/9/18
*/ */

2
src/widget/multiselect/__test__/multiselectinsert.combo.test.js

@ -2,4 +2,4 @@
* @author windy * @author windy
* @version 2.0 * @version 2.0
* Created by windy on 2019/9/18 * Created by windy on 2019/9/18
*/ */

154
src/widget/multiselect/check/multiselect.check.pane.js

@ -1,113 +1,121 @@
/** import {
* shortcut,
* @class BI.MultiSelectCheckPane Widget,
* @extends BI.Widget extend,
*/ emptyFn,
BI.MultiSelectCheckPane = BI.inherit(BI.Widget, { createWidget,
map,
i18nText,
VerticalAdaptLayout, VTapeLayout
} from "@/core";
import { TextButton, Label } from "@/base";
import { DisplaySelectedList } from "./multiselect.display";
constants: { @shortcut()
height: 12, export class MultiSelectCheckPane extends Widget {
lgap: 10, static xtype = "bi.multi_select_check_pane";
tgap: 10,
bgap: 5
},
_defaultConfig: function () { constants = { height: 12, lgap: 10, tgap: 10, bgap: 5 };
return BI.extend(BI.MultiSelectCheckPane.superclass._defaultConfig.apply(this, arguments), {
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-multi-select-check-pane bi-background", baseCls: "bi-multi-select-check-pane bi-background",
items: [], items: [],
itemsCreator: BI.emptyFn, itemsCreator: emptyFn,
valueFormatter: BI.emptyFn, valueFormatter: emptyFn,
onClickContinueSelect: BI.emptyFn onClickContinueSelect: emptyFn,
}); });
}, }
_init: function () { _init() {
BI.MultiSelectCheckPane.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this, opts = this.options; const self = this,
opts = this.options;
this.storeValue = opts.value || {}; this.storeValue = opts.value || {};
this.display = BI.createWidget({ this.display = createWidget({
type: "bi.display_selected_list", type: DisplaySelectedList.xtype,
items: opts.items, items: opts.items,
itemsCreator: function (op, callback) { itemsCreator(op, callback) {
op = BI.extend(op || {}, { op = extend(op || {}, {
selectedValues: self.storeValue.value selectedValues: self.storeValue.value,
}); });
if (self.storeValue.type === BI.Selection.Multi) { if (self.storeValue.type === BI.Selection.Multi) {
callback({ callback({
items: BI.map(self.storeValue.value, function (i, v) { items: map(self.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,
}; };
}) }),
}); });
return; return;
} }
opts.itemsCreator(op, callback); opts.itemsCreator(op, callback);
} },
}); });
this.continueSelect = BI.createWidget({ this.continueSelect = createWidget({
type: "bi.text_button", type: TextButton.xtype,
title: BI.i18nText("BI-Continue_Select"), title: i18nText("BI-Continue_Select"),
text: BI.i18nText("BI-Continue_Select"), text: i18nText("BI-Continue_Select"),
cls: "multi-select-check-selected bi-high-light" cls: "multi-select-check-selected bi-high-light",
}); });
this.continueSelect.on(BI.TextButton.EVENT_CHANGE, function () { this.continueSelect.on(TextButton.EVENT_CHANGE, () => {
opts.onClickContinueSelect(); opts.onClickContinueSelect();
}); });
BI.createWidget({ createWidget({
type: "bi.vtape", type: VTapeLayout.xtype,
element: this, element: this,
items: [{ items: [
height: this.constants.height, {
el: { height: this.constants.height,
type: "bi.vertical_adapt", el: {
columnSize: ["auto", "auto"], type: VerticalAdaptLayout.xtype,
cls: "multi-select-continue-select", columnSize: ["auto", "auto"],
items: [ cls: "multi-select-continue-select",
{ items: [
el: { {
type: "bi.label", el: {
title: BI.i18nText("BI-Selected_Data"), type: Label.xtype,
text: BI.i18nText("BI-Selected_Data") title: i18nText("BI-Selected_Data"),
text: i18nText("BI-Selected_Data"),
},
lgap: this.constants.lgap,
}, },
lgap: this.constants.lgap {
}, el: this.continueSelect,
{ hgap: this.constants.lgap,
el: this.continueSelect, }
hgap: this.constants.lgap ],
}] },
tgap: this.constants.tgap,
}, },
tgap: this.constants.tgap {
}, { height: "fill",
height: "fill", el: this.display,
el: this.display, tgap: this.constants.bgap,
tgap: this.constants.bgap }
}] ],
}); });
}, }
setValue: function (v) { setValue(v) {
this.storeValue = v || {}; this.storeValue = v || {};
}, }
empty: function () { empty() {
this.display.empty(); this.display.empty();
},
populate: function () {
this.display.populate.apply(this.display, arguments);
} }
});
BI.shortcut("bi.multi_select_check_pane", BI.MultiSelectCheckPane); populate() {
this.display.populate(...arguments);
}
}

106
src/widget/multiselect/check/multiselect.display.js

@ -1,106 +1,112 @@
/** import {
* shortcut,
* extend,
* 查看已选弹出层的展示面板 emptyFn,
* @class BI.DisplaySelectedList createWidget,
* @extends BI.Widget VerticalLayout,
*/ createItems
BI.DisplaySelectedList = BI.inherit(BI.Pane, { } from "@/core";
import { Pane, ButtonGroup, Loader, IconTextItem } from "@/base";
import { ListPane } from "@/case";
constants: { @shortcut()
height: 24, export class DisplaySelectedList extends Pane {
lgap: 10 static xtype = "bi.display_selected_list";
},
_defaultConfig: function () { constants = { height: 24, lgap: 10 };
return BI.extend(BI.DisplaySelectedList.superclass._defaultConfig.apply(this, arguments), {
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-display-list", baseCls: "bi-display-list",
itemsCreator: BI.emptyFn, itemsCreator: emptyFn,
items: [] items: [],
}); });
}, }
_init: function () { _init() {
BI.DisplaySelectedList.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this, opts = this.options; const self = this,
opts = this.options;
this.hasNext = false; this.hasNext = false;
var cacheItems = []; let cacheItems = [];
this.button_group = BI.createWidget({ this.button_group = createWidget({
type: "bi.list_pane", type: ListPane.xtype,
element: this, element: this,
el: { el: {
type: "bi.loader", type: Loader.xtype,
isDefaultInit: false, isDefaultInit: false,
logic: { logic: {
dynamic: true, dynamic: true,
scrolly: true scrolly: true,
}, },
items: this._createItems(opts.items), items: this._createItems(opts.items),
chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI, chooseType: ButtonGroup.CHOOSE_TYPE_MULTI,
layouts: [ layouts: [
{ {
type: "bi.vertical", type: VerticalLayout.xtype,
lgap: 10 lgap: 10,
} }
] ],
}, },
itemsCreator: function (options, callback) { itemsCreator (options, callback) {
if (options.times === 1) { if (options.times === 1) {
cacheItems = []; cacheItems = [];
} }
if (cacheItems.length > 0) { if (cacheItems.length > 0) {
var renderedItems = cacheItems.slice(0, 100); const renderedItems = cacheItems.slice(0, 100);
cacheItems = cacheItems.slice(100); cacheItems = cacheItems.slice(100);
self.hasNext = cacheItems.length > 0; self.hasNext = cacheItems.length > 0;
callback(self._createItems(renderedItems)); callback(self._createItems(renderedItems));
return; return;
} }
opts.itemsCreator(options, function (ob) { opts.itemsCreator(options, ob => {
self.hasNext = !!ob.hasNext; self.hasNext = !!ob.hasNext;
var firstItemsCount = 100 + ob.items.length % 100; const firstItemsCount = 100 + (ob.items.length % 100);
if (ob.items.length > 100) { if (ob.items.length > 100) {
cacheItems = ob.items.slice(firstItemsCount); cacheItems = ob.items.slice(firstItemsCount);
self.hasNext = (firstItemsCount === ob.items.length) ? false : true; self.hasNext =
firstItemsCount !== ob.items.length;
} }
callback(self._createItems(ob.items.slice(0, firstItemsCount))); callback(
self._createItems(ob.items.slice(0, firstItemsCount))
);
}); });
}, },
hasNext: function () { hasNext () {
return self.hasNext; return self.hasNext;
} },
}); });
}, }
_createItems: function (items) { _createItems(items) {
return BI.createItems(items, { return createItems(items, {
type: "bi.icon_text_item", type: IconTextItem.xtype,
cls: "cursor-default check-font icon-size-12 display-list-item bi-tips", cls: "cursor-default check-font icon-size-12 display-list-item bi-tips",
once: true, once: true,
invalid: true, invalid: true,
selected: true, selected: true,
height: this.constants.height, height: this.constants.height,
logic: { logic: {
dynamic: true dynamic: true,
} },
}); });
}, }
empty: function () { empty() {
this.button_group.empty(); this.button_group.empty();
}, }
populate: function (items) { populate(items) {
if (arguments.length === 0) { if (arguments.length === 0) {
this.button_group.populate(); this.button_group.populate();
} else { } else {
this.button_group.populate(this._createItems(items)); this.button_group.populate(this._createItems(items));
} }
} }
}); }
BI.shortcut("bi.display_selected_list", BI.DisplaySelectedList);

0
src/widget/multiselect/index.js

337
src/widget/multiselect/loader.js

@ -1,146 +1,192 @@
/** import {
* 加载控件 shortcut,
* Widget,
* Created by GUY on 2015/8/31. extend,
* @class BI.Loader emptyFn,
* @extends BI.Widget VerticalLayout,
*/ createWidget,
BI.MultiSelectInnerLoader = BI.inherit(BI.Widget, { Controller,
_defaultConfig: function () { Events,
return BI.extend(BI.MultiSelectInnerLoader.superclass._defaultConfig.apply(this, arguments), { isEmpty,
nextTick,
bind,
isNumber,
isObject,
isFunction,
makeObject,
isArray,
each
} from "@/core";
import { ButtonGroup, Loader } from "@/base";
@shortcut()
export class MultiSelectInnerLoader extends Widget {
static xtype = "bi.multi_select_inner_loader";
static EVENT_CHANGE = "EVENT_CHANGE";
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-multi-select-inner-loader", baseCls: "bi-multi-select-inner-loader",
direction: "top", direction: "top",
isDefaultInit: true, // 是否默认初始化数据 isDefaultInit: true, // 是否默认初始化数据
logic: { logic: {
dynamic: true, dynamic: true,
scrolly: true scrolly: true,
}, },
// 下面是button_group的属性 // 下面是button_group的属性
el: { el: {
type: "bi.button_group", type: ButtonGroup.xtype,
chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI, chooseType: ButtonGroup.CHOOSE_TYPE_MULTI,
behaviors: { behaviors: {
redmark: function () { redmark() {
return true; return true;
} },
}, },
layouts: [{ layouts: [
type: "bi.vertical" {
}] type: VerticalLayout.xtype,
}
],
}, },
items: [], items: [],
itemsCreator: BI.emptyFn, itemsCreator: emptyFn,
onLoaded: BI.emptyFn, onLoaded: emptyFn,
// 下面是分页信息 // 下面是分页信息
count: false, count: false,
prev: false, prev: false,
next: {}, next: {},
hasPrev: BI.emptyFn, hasPrev: emptyFn,
hasNext: BI.emptyFn hasNext: emptyFn,
}); });
}, }
_nextLoad: function () { _nextLoad() {
var self = this, o = this.options; const self = this,
o = this.options;
this.next.setLoading(); this.next.setLoading();
if (this.cachItems && this.cachItems.length > 0) { if (this.cachItems && this.cachItems.length > 0) {
this.next.setLoaded(); this.next.setLoaded();
this.addItems(this.cachItems.slice(0, 100)); this.addItems(this.cachItems.slice(0, 100));
this.cachItems = this.cachItems.slice(100); this.cachItems = this.cachItems.slice(100);
return; return;
} }
o.itemsCreator.apply(this, [{times: ++this.times}, function () { o.itemsCreator.apply(this, [
self.next.setLoaded(); { times: ++this.times },
self.addItems.apply(self, arguments); function () {
}]); self.next.setLoaded();
}, self.addItems(...arguments);
}
render: function () { ]);
var self = this, o = this.options; }
render() {
const self = this,
o = this.options;
if (o.itemsCreator === false) { if (o.itemsCreator === false) {
o.next = false; o.next = false;
} }
this.button_group = BI.createWidget(o.el, { this.button_group = createWidget(o.el, {
type: "bi.button_group", type: ButtonGroup.xtype,
chooseType: 0, chooseType: 0,
items: o.items, items: o.items,
behaviors: {}, behaviors: {},
layouts: [{ layouts: [
type: "bi.vertical" {
}], type: VerticalLayout.xtype,
value: o.value }
],
value: o.value,
}); });
this.button_group.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) { this.button_group.on(
if (type === BI.Events.CLICK) { Controller.EVENT_CHANGE,
var node = self.cachGroup.getNodeByValue(value); function (type, value, obj) {
if (node) { if (type === Events.CLICK) {
node.setSelected(obj.isSelected()); const node = self.cachGroup.getNodeByValue(value);
if (node) {
node.setSelected(obj.isSelected());
}
}
self.fireEvent(Controller.EVENT_CHANGE, arguments);
if (type === Events.CLICK) {
self.fireEvent(Loader.EVENT_CHANGE, obj);
} }
} }
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); );
if (type === BI.Events.CLICK) {
self.fireEvent(BI.Loader.EVENT_CHANGE, obj);
}
});
var renderEngine = BI.Widget._renderEngine; const renderEngine = Widget._renderEngine;
BI.Widget.registerRenderEngine(BI.Element.renderEngine); Widget.registerRenderEngine(BI.Element.renderEngine);
this.cachGroup = BI.createWidget(o.el, { this.cachGroup = createWidget(o.el, {
type: "bi.button_group", type: ButtonGroup.xtype,
root: true, root: true,
chooseType: 0, chooseType: 0,
items: o.items, items: o.items,
behaviors: {}, behaviors: {},
layouts: [{ layouts: [
type: "bi.vertical" {
}], type: VerticalLayout.xtype,
value: o.value }
],
value: o.value,
}); });
BI.Widget.registerRenderEngine(renderEngine); Widget.registerRenderEngine(renderEngine);
if (o.next !== false) { if (o.next !== false) {
this.next = BI.createWidget(BI.extend({ this.next = createWidget(
type: "bi.loading_bar" extend(
}, o.next)); {
this.next.on(BI.Controller.EVENT_CHANGE, function (type) { type: "bi.loading_bar",
if (type === BI.Events.CLICK) { },
o.next
)
);
this.next.on(Controller.EVENT_CHANGE, type => {
if (type === Events.CLICK) {
self._nextLoad(); self._nextLoad();
} }
}); });
} }
BI.createWidget({ createWidget({
type: "bi.vertical", type: VerticalLayout.xtype,
element: this, element: this,
items: [this.button_group, this.next] items: [this.button_group, this.next],
}); });
o.isDefaultInit && BI.isEmpty(o.items) && BI.nextTick(BI.bind(function () { o.isDefaultInit &&
o.isDefaultInit && BI.isEmpty(o.items) && this._populate(); isEmpty(o.items) &&
}, this)); nextTick(
}, bind(function () {
o.isDefaultInit && isEmpty(o.items) && this._populate();
}, this)
);
}
hasNext: function () { hasNext() {
var o = this.options; const o = this.options;
if (BI.isNumber(o.count)) { if (isNumber(o.count)) {
return this.count < o.count; return this.count < o.count;
} }
if (this.cachItems && this.cachItems.length > 0) { if (this.cachItems && this.cachItems.length > 0) {
return true; return true;
} }
return !!o.hasNext.apply(this, [{
times: this.times,
count: this.count
}]);
},
addItems: function (items) { return !!o.hasNext.apply(this, [
{
times: this.times,
count: this.count,
}
]);
}
addItems(items) {
this.count += items.length; this.count += items.length;
if (BI.isObject(this.next)) { if (isObject(this.next)) {
if (this.hasNext()) { if (this.hasNext()) {
this.options.items = this.options.items.concat(items); this.options.items = this.options.items.concat(items);
this.next.setLoaded(); this.next.setLoaded();
@ -148,113 +194,124 @@ BI.MultiSelectInnerLoader = BI.inherit(BI.Widget, {
this.next.setEnd(); this.next.setEnd();
} }
} }
var renderEngine = BI.Widget._renderEngine; const renderEngine = Widget._renderEngine;
BI.Widget.registerRenderEngine(BI.Element.renderEngine); Widget.registerRenderEngine(BI.Element.renderEngine);
this.cachGroup.addItems.apply(this.cachGroup, arguments); this.cachGroup.addItems(...arguments);
BI.Widget.registerRenderEngine(renderEngine); Widget.registerRenderEngine(renderEngine);
this.button_group.addItems.apply(this.button_group, arguments); this.button_group.addItems(...arguments);
}, }
_populate: function (items) { _populate(items) {
var self = this, o = this.options; const self = this,
if (arguments.length === 0 && (BI.isFunction(o.itemsCreator))) { o = this.options;
o.itemsCreator.apply(this, [{times: 1}, function (items, keyword) { if (arguments.length === 0 && isFunction(o.itemsCreator)) {
if (arguments.length === 0) { o.itemsCreator.apply(this, [
throw new Error("参数不能为空"); { times: 1 },
function (items, keyword) {
if (arguments.length === 0) {
throw new Error("参数不能为空");
}
self.populate(...arguments);
o.onLoaded();
} }
self.populate.apply(self, arguments); ]);
o.onLoaded();
}]);
return false; return false;
} }
this.options.items = (items || []).slice(0, 100 + (items || []).length % 100); this.options.items = (items || []).slice(
0,
100 + ((items || []).length % 100)
);
this.times = 1; this.times = 1;
this.count = 0; this.count = 0;
this.count += items.length; this.count += items.length;
if (BI.isObject(this.next)) { if (isObject(this.next)) {
if (this.hasNext()) { if (this.hasNext()) {
this.next.setLoaded(); this.next.setLoaded();
} else { } else {
this.next.invisible(); this.next.invisible();
} }
} }
return true; return true;
}, }
populate: function (items, keyword) { populate(items, keyword) {
if (this._populate.apply(this, arguments)) { if (this._populate(...arguments)) {
this.cachItems = []; this.cachItems = [];
var firstItemsCount = 100 + items.length % 100; const firstItemsCount = 100 + (items.length % 100);
if (items.length > firstItemsCount) { if (items.length > firstItemsCount) {
this.cachItems = items.slice(firstItemsCount); this.cachItems = items.slice(firstItemsCount);
} }
var renderEngine = BI.Widget._renderEngine; const renderEngine = Widget._renderEngine;
BI.Widget.registerRenderEngine(BI.Element.renderEngine); Widget.registerRenderEngine(BI.Element.renderEngine);
this.cachGroup.populate.call(this.cachGroup, items, keyword); this.cachGroup.populate.call(this.cachGroup, items, keyword);
BI.Widget.registerRenderEngine(renderEngine); Widget.registerRenderEngine(renderEngine);
this.button_group.populate.call(this.button_group, items.slice(0, firstItemsCount), keyword); this.button_group.populate.call(
this.button_group,
items.slice(0, firstItemsCount),
keyword
);
} }
}, }
setNotSelectedValue: function () { setNotSelectedValue() {
this.button_group.setNotSelectedValue.apply(this.button_group, arguments); this.button_group.setNotSelectedValue(...arguments);
this.cachGroup.setNotSelectedValue.apply(this.cachGroup, arguments); this.cachGroup.setNotSelectedValue(...arguments);
}, }
getNotSelectedValue: function () { getNotSelectedValue() {
return this.cachGroup.getNotSelectedValue(); return this.cachGroup.getNotSelectedValue();
}, }
setAllSelected: function (v) { setAllSelected(v) {
this.button_group.setAllSelected(v); this.button_group.setAllSelected(v);
this.cachGroup.setAllSelected(v); this.cachGroup.setAllSelected(v);
}, }
setValue: function (value) { setValue(value) {
var map = BI.makeObject(BI.isArray(value) ? value : [value]); const map = makeObject(isArray(value) ? value : [value]);
this.cachGroup.setValueMap.call(this.cachGroup, map); this.cachGroup.setValueMap.call(this.cachGroup, map);
this.button_group.setValueMap.call(this.button_group, map); this.button_group.setValueMap.call(this.button_group, map);
}, }
getValue: function () { getValue() {
return this.cachGroup.getValue.apply(this.cachGroup, arguments); return this.cachGroup.getValue(...arguments);
}, }
getAllButtons: function () { getAllButtons() {
return this.button_group.getAllButtons(); return this.button_group.getAllButtons();
}, }
getAllLeaves: function () { getAllLeaves() {
return this.button_group.getAllLeaves(); return this.button_group.getAllLeaves();
}, }
getSelectedButtons: function () { getSelectedButtons() {
return this.button_group.getSelectedButtons(); return this.button_group.getSelectedButtons();
}, }
getNotSelectedButtons: function () { getNotSelectedButtons() {
return this.button_group.getNotSelectedButtons(); return this.button_group.getNotSelectedButtons();
}, }
getIndexByValue: function (value) { getIndexByValue(value) {
return this.button_group.getIndexByValue(value); return this.button_group.getIndexByValue(value);
}, }
getNodeById: function (id) { getNodeById(id) {
return this.button_group.getNodeById(id); return this.button_group.getNodeById(id);
}, }
getNodeByValue: function (value) { getNodeByValue(value) {
return this.button_group.getNodeByValue(value); return this.button_group.getNodeByValue(value);
}, }
empty: function () { empty() {
this.button_group.empty(); this.button_group.empty();
this.cachGroup.empty(); this.cachGroup.empty();
BI.each([this.prev, this.next], function (i, ob) { each([this.prev, this.next], (i, ob) => {
ob && ob.setVisible(false); ob && ob.setVisible(false);
}); });
} }
}); }
BI.MultiSelectInnerLoader.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.multi_select_inner_loader", BI.MultiSelectInnerLoader);

610
src/widget/multiselect/multiselect.combo.js

@ -1,51 +1,98 @@
/** import {
* shortcut,
* @class BI.MultiSelectCombo extend,
* @extends BI.Single emptyFn,
*/ isKey,
BI.MultiSelectCombo = BI.inherit(BI.Single, { remove,
deepClone,
_defaultConfig: function () { createWidget,
return BI.extend(BI.MultiSelectCombo.superclass._defaultConfig.apply(this, arguments), { toPix,
bind,
last,
initial,
nextTick,
Events,
AbsoluteLayout,
VerticalAdaptLayout,
isNotNull,
makeObject,
map,
each,
Func,
concat,
values,
filter,
contains,
isNull
} from "@/core";
import { Single, Combo } from "@/base";
import { TriggerIconButton } from "@/case";
import { MultiSelectTrigger } from "./multiselect.trigger";
import { MultiSelectPopupView } from "./multiselect.popup.view";
import { MultiSelectCheckSelectedSwitcher } from "./trigger/switcher.checkselected";
@shortcut()
export class MultiSelectCombo extends Single {
static xtype = "bi.multi_select_combo";
static REQ_GET_DATA_LENGTH = "1";
static REQ_GET_ALL_DATA = "-1";
static EVENT_BLUR = "EVENT_BLUR";
static EVENT_FOCUS = "EVENT_FOCUS";
static EVENT_STOP = "EVENT_STOP";
static EVENT_SEARCHING = "EVENT_SEARCHING";
static EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM";
static EVENT_CONFIRM = "EVENT_CONFIRM";
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-multi-select-combo", baseCls: "bi-multi-select-combo",
itemsCreator: BI.emptyFn, itemsCreator: emptyFn,
valueFormatter: BI.emptyFn, valueFormatter: emptyFn,
itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
height: 24, height: 24,
allowEdit: true, allowEdit: true,
}); });
}, }
_init: function () { _init() {
var self = this; const self = this;
var o = this.options; const o = this.options;
BI.MultiSelectCombo.superclass._init.apply(this, arguments); super._init(...arguments);
var assertShowValue = function () { const triggerBtn = createWidget({
if (BI.isKey(self._startValue)) { type: TriggerIconButton.xtype,
width: o.height,
height: o.height,
cls: "multi-select-trigger-icon-button",
});
function assertShowValue() {
if (isKey(self._startValue)) {
if (self.storeValue.type === BI.Selection.All) { if (self.storeValue.type === BI.Selection.All) {
BI.remove(self.storeValue.value, self._startValue); remove(self.storeValue.value, self._startValue);
self.storeValue.assist = self.storeValue.assist || []; self.storeValue.assist = self.storeValue.assist || [];
BI.pushDistinct(self.storeValue.assist, self._startValue); BI.pushDistinct(self.storeValue.assist, self._startValue);
} else { } else {
BI.pushDistinct(self.storeValue.value, self._startValue); BI.pushDistinct(self.storeValue.value, self._startValue);
BI.remove(self.storeValue.assist, self._startValue); remove(self.storeValue.assist, self._startValue);
} }
} }
self.trigger.getSearcher().setState(self.storeValue); self.trigger.getSearcher().setState(self.storeValue);
self.numberCounter.setButtonChecked(self.storeValue); self.numberCounter.setButtonChecked(self.storeValue);
}; }
this.storeValue = BI.deepClone(o.value) || {};
this.storeValue = deepClone(o.value) || {};
this._assertValue(this.storeValue); this._assertValue(this.storeValue);
// 标记正在请求数据 // 标记正在请求数据
this.requesting = false; this.requesting = false;
this.trigger = BI.createWidget({ this.trigger = createWidget({
type: "bi.multi_select_trigger", type: MultiSelectTrigger.xtype,
allowEdit: o.allowEdit, allowEdit: o.allowEdit,
height: BI.toPix(o.height, o.simple ? 1 : 2), height: toPix(o.height, o.simple ? 1 : 2),
text: o.text, text: o.text,
defaultText: o.defaultText, defaultText: o.defaultText,
masker: { masker: {
@ -58,114 +105,124 @@ BI.MultiSelectCombo = BI.inherit(BI.Single, {
}, },
valueFormatter: o.valueFormatter, valueFormatter: o.valueFormatter,
itemFormatter: o.itemFormatter, itemFormatter: o.itemFormatter,
itemsCreator: BI.bind(this._itemsCreator4Trigger, this), itemsCreator: bind(this._itemsCreator4Trigger, this),
itemHeight: o.itemHeight, itemHeight: o.itemHeight,
value: this.storeValue, value: this.storeValue,
}); });
this.trigger.on(BI.MultiSelectTrigger.EVENT_FOCUS, function () { this.trigger.on(MultiSelectTrigger.EVENT_FOCUS, () => {
self.fireEvent(BI.MultiSelectCombo.EVENT_FOCUS); self.fireEvent(MultiSelectCombo.EVENT_FOCUS);
}); });
this.trigger.on(BI.MultiSelectTrigger.EVENT_BLUR, function () { this.trigger.on(MultiSelectTrigger.EVENT_BLUR, () => {
self.fireEvent(BI.MultiSelectCombo.EVENT_BLUR); self.fireEvent(MultiSelectCombo.EVENT_BLUR);
}); });
this.trigger.on(BI.MultiSelectTrigger.EVENT_START, function () { this.trigger.on(MultiSelectTrigger.EVENT_START, function () {
self._setStartValue(""); self._setStartValue("");
this.getSearcher().setValue(self.storeValue); this.getSearcher().setValue(self.storeValue);
}); });
this.trigger.on(BI.MultiSelectTrigger.EVENT_STOP, function () { this.trigger.on(MultiSelectTrigger.EVENT_STOP, () => {
self._setStartValue(""); self._setStartValue("");
self.fireEvent(BI.MultiSelectCombo.EVENT_STOP); self.fireEvent(MultiSelectCombo.EVENT_STOP);
}); });
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); self._joinKeywords(keywords, () => {
assertShowValue(); if (BI.endWith(lastKeyword, BI.BlankSplitChar)) {
self.combo.populate(); self.combo.setValue(self.storeValue);
self._setStartValue(""); assertShowValue();
} else { self.combo.populate();
self.combo.setValue(self.storeValue); self._setStartValue("");
assertShowValue(); } else {
} self.combo.setValue(self.storeValue);
self._dataChange = true; assertShowValue();
}); }
self._dataChange = true;
});
}
self.fireEvent(MultiSelectCombo.EVENT_SEARCHING);
} }
self.fireEvent(BI.MultiSelectCombo.EVENT_SEARCHING); );
});
this.trigger.on(BI.MultiSelectTrigger.EVENT_CHANGE, function (value, obj) { this.trigger.on(MultiSelectTrigger.EVENT_CHANGE, function (value, obj) {
if (obj instanceof BI.MultiSelectBar) { if (obj instanceof BI.MultiSelectBar) {
self._joinAll(this.getValue(), function () { self._joinAll(this.getValue(), () => {
assertShowValue(); assertShowValue();
self.fireEvent(BI.MultiSelectCombo.EVENT_CLICK_ITEM); self.fireEvent(MultiSelectCombo.EVENT_CLICK_ITEM);
}); });
} else { } else {
self._join(this.getValue(), function () { self._join(this.getValue(), () => {
assertShowValue(); assertShowValue();
self.fireEvent(BI.MultiSelectCombo.EVENT_CLICK_ITEM); self.fireEvent(MultiSelectCombo.EVENT_CLICK_ITEM);
}); });
} }
self._dataChange = true; self._dataChange = true;
}); });
this.trigger.on(BI.MultiSelectTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW, function () { this.trigger.on(
// counter的值随点击项的改变而改变, 点击counter的时候不需要setValue(counter会请求刷新计数) MultiSelectTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW,
// 只需要更新查看面板的selectedValue用以请求已选数据 () => {
self.numberCounter.updateSelectedValue(self.storeValue); // counter的值随点击项的改变而改变, 点击counter的时候不需要setValue(counter会请求刷新计数)
}); // 只需要更新查看面板的selectedValue用以请求已选数据
this.trigger.on(BI.MultiSelectTrigger.EVENT_COUNTER_CLICK, function () { self.numberCounter.updateSelectedValue(self.storeValue);
}
);
this.trigger.on(MultiSelectTrigger.EVENT_COUNTER_CLICK, () => {
if (!self.combo.isViewVisible()) { if (!self.combo.isViewVisible()) {
self.combo.showView(); self.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: !o.allowEdit, toggle: !o.allowEdit,
container: o.container, container: o.container,
el: this.trigger, el: this.trigger,
adjustLength: 1, adjustLength: 1,
popup: { popup: {
type: "bi.multi_select_popup_view", type: "bi.multi_select_popup_view",
ref: function () { ref() {
self.popup = this; self.popup = this;
self.trigger.setAdapter(this); self.trigger.setAdapter(this);
self.numberCounter.setAdapter(this); self.numberCounter.setAdapter(this);
}, },
listeners: [{ listeners: [
eventName: BI.MultiSelectPopupView.EVENT_CHANGE, {
action: function () { eventName: MultiSelectPopupView.EVENT_CHANGE,
self._dataChange = true; action() {
self.storeValue = this.getValue(); self._dataChange = true;
self._adjust(function () { self.storeValue = this.getValue();
assertShowValue(); self._adjust(() => {
}); assertShowValue();
self.fireEvent(BI.MultiSelectCombo.EVENT_CLICK_ITEM); });
}, self.fireEvent(MultiSelectCombo.EVENT_CLICK_ITEM);
}, { },
eventName: BI.MultiSelectPopupView.EVENT_CLICK_CONFIRM,
action: function () {
self._defaultState();
}, },
}, { {
eventName: BI.MultiSelectPopupView.EVENT_CLICK_CLEAR, eventName: MultiSelectPopupView.EVENT_CLICK_CONFIRM,
action: function () { action() {
self._dataChange = true; self._defaultState();
self.setValue(); },
self._defaultState();
}, },
}], {
eventName: MultiSelectPopupView.EVENT_CLICK_CLEAR,
action() {
self._dataChange = true;
self.setValue();
self._defaultState();
},
}
],
itemsCreator: o.itemsCreator, itemsCreator: o.itemsCreator,
itemHeight: o.itemHeight, itemHeight: o.itemHeight,
valueFormatter: o.valueFormatter, valueFormatter: o.valueFormatter,
itemFormatter: o.itemFormatter, itemFormatter: o.itemFormatter,
onLoaded: function () { onLoaded() {
BI.nextTick(function () { nextTick(() => {
self.combo.adjustWidth(); self.combo.adjustWidth();
self.combo.adjustHeight(); self.combo.adjustHeight();
self.numberCounter.adjustView(); self.numberCounter.adjustView();
@ -174,39 +231,37 @@ BI.MultiSelectCombo = BI.inherit(BI.Single, {
}, },
}, },
value: o.value, value: o.value,
hideChecker: function (e) { hideChecker(e) {
return triggerBtn.element.find(e.target).length === 0 && self.numberCounter.element.find(e.target).length === 0; return (
triggerBtn.element.find(e.target).length === 0 &&
self.numberCounter.element.find(e.target).length === 0
);
}, },
}); });
this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () { this.combo.on(Combo.EVENT_BEFORE_POPUPVIEW, function () {
if (!this.isViewVisible()) { if (!this.isViewVisible()) {
self._dataChange = false;// 标记数据是否发生变化 self._dataChange = false; // 标记数据是否发生变化
} }
this.setValue(self.storeValue); this.setValue(self.storeValue);
BI.nextTick(function () { nextTick(() => {
self._populate(); self._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._stopEditing(); self._stopEditing();
if (self.requesting === true) { if (self.requesting === true) {
self.wants2Quit = true; self.wants2Quit = true;
} else { } else {
self._dataChange && self.fireEvent(BI.MultiSelectCombo.EVENT_CONFIRM); self._dataChange &&
self.fireEvent(MultiSelectCombo.EVENT_CONFIRM);
} }
}); });
var triggerBtn = BI.createWidget({ triggerBtn.on(TriggerIconButton.EVENT_CHANGE, () => {
type: "bi.trigger_icon_button",
width: o.height,
height: o.height,
cls: "multi-select-trigger-icon-button",
});
triggerBtn.on(BI.TriggerIconButton.EVENT_CHANGE, function () {
self.numberCounter.hideView(); self.numberCounter.hideView();
if (self.combo.isViewVisible()) { if (self.combo.isViewVisible()) {
self.combo.hideView(); self.combo.hideView();
@ -215,8 +270,8 @@ BI.MultiSelectCombo = BI.inherit(BI.Single, {
} }
}); });
this.numberCounter = BI.createWidget({ this.numberCounter = createWidget({
type: "bi.multi_select_check_selected_switcher", type: MultiSelectCheckSelectedSwitcher.xtype,
masker: { masker: {
offset: { offset: {
left: 0, left: 0,
@ -226,259 +281,274 @@ BI.MultiSelectCombo = BI.inherit(BI.Single, {
}, },
}, },
valueFormatter: o.valueFormatter, valueFormatter: o.valueFormatter,
itemsCreator: BI.bind(this._itemsCreator4Trigger, this), itemsCreator: bind(this._itemsCreator4Trigger, this),
value: this.storeValue, value: this.storeValue,
}); });
this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE, function () { this.numberCounter.on(
if (!self.combo.isViewVisible()) { MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE,
self.combo.showView(); () => {
if (!self.combo.isViewVisible()) {
self.combo.showView();
}
} }
}); );
this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW, function () { this.numberCounter.on(
this.updateSelectedValue(self.storeValue); MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW,
}); function () {
this.updateSelectedValue(self.storeValue);
this.numberCounter.on(BI.Events.VIEW, function (b) { }
BI.nextTick(function () {// 自动调整宽度 );
self.trigger.refreshPlaceHolderWidth((b === true ? self.numberCounter.element.outerWidth() + 8 : 0));
this.numberCounter.on(Events.VIEW, b => {
nextTick(() => {
// 自动调整宽度
self.trigger.refreshPlaceHolderWidth(
b === true ? self.numberCounter.element.outerWidth() + 8 : 0
);
}); });
}); });
this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW, function () { this.numberCounter.on(
BI.nextTick(function () {// 收起时自动调整宽度 MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW,
self.trigger.refreshPlaceHolderWidth(0); () => {
}); nextTick(() => {
}); // 收起时自动调整宽度
self.trigger.refreshPlaceHolderWidth(0);
});
}
);
this.trigger.element.click(function (e) { this.trigger.element.click(e => {
if (self.trigger.element.find(e.target).length > 0) { if (self.trigger.element.find(e.target).length > 0) {
self.numberCounter.hideView(); self.numberCounter.hideView();
} }
}); });
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,
bottom: 0,
}, {
el: {
type: "bi.vertical_adapt",
items: [this.numberCounter],
}, },
right: o.height, {
top: 0, el: triggerBtn,
height: o.height, right: 0,
}], top: 0,
bottom: 0,
},
{
el: {
type: VerticalAdaptLayout.xtype,
items: [this.numberCounter],
},
right: o.height,
top: 0,
height: o.height,
}
],
}); });
}, }
_itemsCreator4Trigger: function (op, callback) { _itemsCreator4Trigger(op, callback) {
var self = this; const self = this;
var o = this.options; const o = this.options;
o.itemsCreator(op, function (res) { o.itemsCreator(op, function (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())); self.trigger.setValue(deepClone(self.getValue()));
} }
callback.apply(self, arguments); callback.apply(self, arguments);
}); });
}, }
_stopEditing: function () { _stopEditing() {
this.trigger.stopEditing(); this.trigger.stopEditing();
this.numberCounter.hideView(); this.numberCounter.hideView();
}, }
_defaultState: function () { _defaultState() {
this._stopEditing(); this._stopEditing();
this.combo.hideView(); this.combo.hideView();
}, }
_assertValue: function (val) { _assertValue(val) {
val || (val = {}); val || (val = {});
val.type || (val.type = BI.Selection.Multi); val.type || (val.type = BI.Selection.Multi);
val.value || (val.value = []); val.value || (val.value = []);
}, }
_makeMap: function (values) { _makeMap(values) {
return BI.makeObject(values || []); return makeObject(values || []);
}, }
_joinKeywords: function (keywords, callback) { _joinKeywords(keywords, callback) {
var self = this; const self = this;
var o = this.options; const o = this.options;
this._assertValue(this.storeValue); this._assertValue(this.storeValue);
this.requesting = true; this.requesting = true;
o.itemsCreator({ o.itemsCreator(
type: BI.MultiSelectCombo.REQ_GET_ALL_DATA, {
keywords: keywords, type: MultiSelectCombo.REQ_GET_ALL_DATA,
}, function (ob) { keywords,
var values = BI.map(ob.items, "value"); },
digest(values); ob => {
}); const values = map(ob.items, "value");
digest(values);
}
);
function digest(items) { function digest(items) {
var selectedMap = self._makeMap(items); const selectedMap = self._makeMap(items);
BI.each(keywords, function (i, val) { each(keywords, (i, val) => {
if (BI.isNotNull(selectedMap[val])) { if (isNotNull(selectedMap[val])) {
self.storeValue.type === BI.Selection.Multi ? BI.pushDistinct(self.storeValue.value, val) : BI.remove(self.storeValue.value, val); self.storeValue.type === BI.Selection.Multi
? BI.pushDistinct(self.storeValue.value, val)
: remove(self.storeValue.value, val);
} }
}); });
self._adjust(callback); self._adjust(callback);
} }
}, }
_joinAll: function (res, callback) { _joinAll(res, callback) {
var self = this; const tempMap = this._makeMap(this.storeValue.value);
var o = this.options; const self = this;
const o = this.options;
this._assertValue(res); this._assertValue(res);
this.requesting = true; this.requesting = true;
if (this.storeValue.type === res.type) { if (this.storeValue.type === res.type) {
var result = BI.Func.getSearchResult(BI.map(this.storeValue.value, function (_i, v) { const result = Func.getSearchResult(
return { map(this.storeValue.value, (_i, v) => {
text: o.valueFormatter(v) || v, return {
value: v text: o.valueFormatter(v) || v,
}; value: v,
}), this.trigger.getKey()); };
var change = false; }),
var map = this._makeMap(this.storeValue.value); this.trigger.getKey()
BI.each(BI.concat(result.match, result.find), function (i, obj) { );
var v = obj.value; let change = false;
if (BI.isNotNull(map[v])) { each(concat(result.match, result.find), (i, obj) => {
const v = obj.value;
if (isNotNull(tempMap[v])) {
change = true; change = true;
self.storeValue.assist && self.storeValue.assist.push(map[v]); self.storeValue.assist &&
delete map[v]; self.storeValue.assist.push(tempMap[v]);
delete tempMap[v];
} }
}); });
change && (this.storeValue.value = BI.values(map)); change && (this.storeValue.value = values(tempMap));
this._adjust(callback); this._adjust(callback);
return; return;
} }
o.itemsCreator({ o.itemsCreator(
type: BI.MultiSelectCombo.REQ_GET_ALL_DATA, {
keywords: [this.trigger.getKey()], type: MultiSelectCombo.REQ_GET_ALL_DATA,
selectedValues: BI.filter(this.storeValue.value, function (_i, v) { keywords: [this.trigger.getKey()],
return !BI.contains(res.value, v); selectedValues: filter(this.storeValue.value, (_i, v) => !contains(res.value, v)),
}), },
}, function (ob) { ob => {
var items = BI.map(ob.items, "value"); const items = map(ob.items, "value");
var selectedMap = self._makeMap(self.storeValue.value); const selectedMap = self._makeMap(self.storeValue.value);
var notSelectedMap = self._makeMap(res.value); const notSelectedMap = self._makeMap(res.value);
var newItems = []; const newItems = [];
BI.each(items, function (i, item) { each(items, (i, item) => {
if (BI.isNotNull(selectedMap[items[i]])) { if (isNotNull(selectedMap[items[i]])) {
self.storeValue.assist && self.storeValue.assist.push(selectedMap[items[i]]); self.storeValue.assist &&
delete selectedMap[items[i]]; self.storeValue.assist.push(selectedMap[items[i]]);
} delete selectedMap[items[i]];
if (BI.isNull(notSelectedMap[items[i]])) { }
BI.remove(self.storeValue.assist, item); if (isNull(notSelectedMap[items[i]])) {
newItems.push(item); remove(self.storeValue.assist, item);
} newItems.push(item);
}); }
self.storeValue.value = newItems.concat(BI.values(selectedMap)); });
self._adjust(callback); self.storeValue.value = newItems.concat(values(selectedMap));
}); self._adjust(callback);
}, }
);
}
_adjust: function (callback) { _adjust(callback) {
var self = this; const self = this;
var o = this.options;
adjust(); adjust();
callback(); callback();
function adjust() { function adjust() {
if (self.wants2Quit === true) { if (self.wants2Quit === true) {
self._dataChange && self.fireEvent(BI.MultiSelectCombo.EVENT_CONFIRM); self._dataChange &&
self.fireEvent(MultiSelectCombo.EVENT_CONFIRM);
self.wants2Quit = false; self.wants2Quit = false;
} }
self.requesting = false; self.requesting = false;
} }
}, }
_join: function (res, callback) { _join(res, callback) {
var self = this; const self = this;
var 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]) {
BI.pushDistinct(self.storeValue.value, v); BI.pushDistinct(self.storeValue.value, v);
BI.remove(self.storeValue.assist, v); remove(self.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]); self.storeValue.assist &&
self.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); self._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);
}, }
_populate: function () { _populate() {
this.combo.populate.apply(this.combo, arguments); this.combo.populate(...arguments);
}, }
showView: function () { showView() {
this.combo.showView(); this.combo.showView();
}, }
hideView: function () { hideView() {
this.combo.hideView(); this.combo.hideView();
}, }
setValue: function (v) { setValue(v) {
this.storeValue = v || {}; this.storeValue = v || {};
this._assertValue(this.storeValue); this._assertValue(this.storeValue);
this.combo.setValue(this.storeValue); this.combo.setValue(this.storeValue);
this.numberCounter.setValue(this.storeValue); this.numberCounter.setValue(this.storeValue);
}, }
getValue: function () { getValue() {
return BI.deepClone(this.storeValue); return deepClone(this.storeValue);
}, }
populate: function () { populate() {
this._populate.apply(this, arguments); this._populate(...arguments);
this.numberCounter.populateSwitcher.apply(this.numberCounter, arguments); this.numberCounter.populateSwitcher(...arguments);
}, }
}); }
BI.extend(BI.MultiSelectCombo, {
REQ_GET_DATA_LENGTH: 1,
REQ_GET_ALL_DATA: -1,
});
BI.MultiSelectCombo.EVENT_BLUR = "EVENT_BLUR";
BI.MultiSelectCombo.EVENT_FOCUS = "EVENT_FOCUS";
BI.MultiSelectCombo.EVENT_STOP = "EVENT_STOP";
BI.MultiSelectCombo.EVENT_SEARCHING = "EVENT_SEARCHING";
BI.MultiSelectCombo.EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM";
BI.MultiSelectCombo.EVENT_CONFIRM = "EVENT_CONFIRM";
BI.shortcut("bi.multi_select_combo", BI.MultiSelectCombo);

620
src/widget/multiselect/multiselect.combo.nobar.js

@ -1,47 +1,95 @@
/** import {
* shortcut,
* @class BI.MultiSelectNoBarCombo extend,
* @extends BI.Single emptyFn,
*/ isKey,
BI.MultiSelectNoBarCombo = BI.inherit(BI.Single, { remove,
deepClone,
_defaultConfig: function () { createWidget,
return BI.extend(BI.MultiSelectNoBarCombo.superclass._defaultConfig.apply(this, arguments), { toPix,
bind,
last,
initial,
nextTick,
Events,
AbsoluteLayout,
VerticalAdaptLayout,
isNotNull,
makeObject,
map,
each,
Func,
concat,
values,
filter,
contains,
isNull, pushDistinct, Selection
} from "@/core";
import { Single, Combo } from "@/base";
import { MultiSelectBar, TriggerIconButton } from "@/case";
import { MultiSelectTrigger } from "./multiselect.trigger";
import { MultiSelectCheckSelectedSwitcher } from "./trigger/switcher.checkselected";
import { MultiSelectNoBarPopupView } from "@/widget/multiselect/multiselect.popup.view.nobar";
@shortcut()
export class MultiSelectNoBarCombo extends Single {
static xtype = "bi.multi_select_no_bar_combo";
static REQ_GET_DATA_LENGTH = "1";
static REQ_GET_ALL_DATA = "-1";
static EVENT_BLUR = "EVENT_BLUR";
static EVENT_FOCUS = "EVENT_FOCUS";
static EVENT_STOP = "EVENT_STOP";
static EVENT_SEARCHING = "EVENT_SEARCHING";
static EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM";
static EVENT_CONFIRM = "EVENT_CONFIRM";
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-multi-select-combo-no-bar", baseCls: "bi-multi-select-combo-no-bar",
itemsCreator: BI.emptyFn, itemsCreator: emptyFn,
valueFormatter: BI.emptyFn, valueFormatter: emptyFn,
itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
height: 24, height: 24,
}); });
}, }
_init() {
const self = this,
o = this.options;
super._init(...arguments);
const triggerBtn = createWidget({
type: TriggerIconButton.xtype,
width: o.height,
height: o.height,
cls: "multi-select-trigger-icon-button",
});
_init: function () { function assertShowValue() {
var self = this, o = this.options; if (isKey(self._startValue)) {
BI.MultiSelectNoBarCombo.superclass._init.apply(this, arguments);
var assertShowValue = function () {
if (BI.isKey(self._startValue)) {
if (self.storeValue.type === BI.Selection.All) { if (self.storeValue.type === BI.Selection.All) {
BI.remove(self.storeValue.value, self._startValue); remove(self.storeValue.value, self._startValue);
self.storeValue.assist = self.storeValue.assist || []; self.storeValue.assist = self.storeValue.assist || [];
BI.pushDistinct(self.storeValue.assist, self._startValue); pushDistinct(self.storeValue.assist, self._startValue);
} else { } else {
BI.pushDistinct(self.storeValue.value, self._startValue); pushDistinct(self.storeValue.value, self._startValue);
BI.remove(self.storeValue.assist, self._startValue); remove(self.storeValue.assist, self._startValue);
} }
} }
self.trigger.getSearcher().setState(self.storeValue); self.trigger.getSearcher().setState(self.storeValue);
self.numberCounter.setButtonChecked(self.storeValue); self.numberCounter.setButtonChecked(self.storeValue);
}; }
this.storeValue = { this.storeValue = {
type: BI.Selection.Multi, type: Selection.Multi,
value: BI.deepClone(o.value) || [] value: deepClone(o.value) || [],
}; };
// 标记正在请求数据 // 标记正在请求数据
this.requesting = false; this.requesting = false;
this.trigger = BI.createWidget({ this.trigger = createWidget({
type: "bi.multi_select_trigger", type: MultiSelectTrigger.xtype,
height: BI.toPix(o.height, o.simple ? 1 : 2), height: toPix(o.height, o.simple ? 1 : 2),
text: o.text, text: o.text,
defaultText: o.defaultText, defaultText: o.defaultText,
masker: { masker: {
@ -53,163 +101,171 @@ BI.MultiSelectNoBarCombo = BI.inherit(BI.Single, {
}, },
}, },
valueFormatter: o.valueFormatter, valueFormatter: o.valueFormatter,
itemsCreator: BI.bind(this._itemsCreator4Trigger, this), itemsCreator: bind(this._itemsCreator4Trigger, this),
itemFormatter: o.itemFormatter, itemFormatter: o.itemFormatter,
itemHeight: o.itemHeight, itemHeight: o.itemHeight,
value: { value: {
type: BI.Selection.Multi, type: BI.Selection.Multi,
value: o.value value: o.value,
} },
}); });
this.trigger.on(BI.MultiSelectTrigger.EVENT_FOCUS, function () { this.trigger.on(MultiSelectTrigger.EVENT_FOCUS, () => {
self.fireEvent(BI.MultiSelectNoBarCombo.EVENT_FOCUS); self.fireEvent(MultiSelectNoBarCombo.EVENT_FOCUS);
}); });
this.trigger.on(BI.MultiSelectTrigger.EVENT_BLUR, function () { this.trigger.on(MultiSelectTrigger.EVENT_BLUR, () => {
self.fireEvent(BI.MultiSelectNoBarCombo.EVENT_BLUR); self.fireEvent(MultiSelectNoBarCombo.EVENT_BLUR);
}); });
this.trigger.on(BI.MultiSelectTrigger.EVENT_START, function () { this.trigger.on(MultiSelectTrigger.EVENT_START, function () {
self._setStartValue(""); self._setStartValue("");
this.getSearcher().setValue(self.storeValue); this.getSearcher().setValue(self.storeValue);
}); });
this.trigger.on(BI.MultiSelectTrigger.EVENT_STOP, function () { this.trigger.on(MultiSelectTrigger.EVENT_STOP, () => {
self._setStartValue(""); self._setStartValue("");
self.fireEvent(BI.MultiSelectNoBarCombo.EVENT_STOP); self.fireEvent(MultiSelectNoBarCombo.EVENT_STOP);
}); });
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); self._joinKeywords(keywords, () => {
assertShowValue(); if (BI.endWith(lastKeyword, BI.BlankSplitChar)) {
self.combo.populate(); self.combo.setValue(self.storeValue);
self._setStartValue(""); assertShowValue();
} else { self.combo.populate();
self.combo.setValue(self.storeValue); self._setStartValue("");
assertShowValue(); } else {
} self.combo.setValue(self.storeValue);
self._dataChange = true; assertShowValue();
}); }
self._dataChange = true;
});
}
} }
}); );
this.trigger.on(BI.MultiSelectTrigger.EVENT_CHANGE, function (value, obj) { this.trigger.on(MultiSelectTrigger.EVENT_CHANGE, function (value, obj) {
if (obj instanceof BI.MultiSelectBar) { if (obj instanceof MultiSelectBar) {
self._joinAll(this.getValue(), function () { self._joinAll(this.getValue(), () => {
assertShowValue(); assertShowValue();
}); });
} else { } else {
self._join(this.getValue(), function () { self._join(this.getValue(), () => {
assertShowValue(); assertShowValue();
}); });
} }
self._dataChange = true; self._dataChange = true;
self.fireEvent(BI.MultiSelectNoBarCombo.EVENT_CLICK_ITEM); self.fireEvent(MultiSelectNoBarCombo.EVENT_CLICK_ITEM);
});
this.trigger.on(BI.MultiSelectTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW, function () {
// counter的值随点击项的改变而改变, 点击counter的时候不需要setValue(counter会请求刷新计数)
// 只需要更新查看面板的selectedValue用以请求已选数据
self.numberCounter.updateSelectedValue(self.storeValue);
}); });
this.trigger.on(BI.MultiSelectTrigger.EVENT_COUNTER_CLICK, function () { this.trigger.on(
MultiSelectTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW,
() => {
// counter的值随点击项的改变而改变, 点击counter的时候不需要setValue(counter会请求刷新计数)
// 只需要更新查看面板的selectedValue用以请求已选数据
self.numberCounter.updateSelectedValue(self.storeValue);
}
);
this.trigger.on(MultiSelectTrigger.EVENT_COUNTER_CLICK, () => {
if (!self.combo.isViewVisible()) { if (!self.combo.isViewVisible()) {
self.combo.showView(); self.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.multi_select_no_bar_popup_view", type: MultiSelectNoBarPopupView.xtype,
ref: function () { ref() {
self.popup = this; self.popup = this;
self.trigger.setAdapter(this); self.trigger.setAdapter(this);
self.numberCounter.setAdapter(this); self.numberCounter.setAdapter(this);
}, },
listeners: [ listeners: [
{ {
eventName: BI.MultiSelectPopupView.EVENT_CHANGE, eventName: MultiSelectNoBarPopupView.EVENT_CHANGE,
action: function () { action() {
self._dataChange = true; self._dataChange = true;
self.storeValue = this.getValue(); self.storeValue = this.getValue();
self._adjust(function () { self._adjust(() => {
assertShowValue(); assertShowValue();
}); });
self.fireEvent(BI.MultiSelectNoBarCombo.EVENT_CLICK_ITEM); self.fireEvent(
} MultiSelectNoBarCombo.EVENT_CLICK_ITEM
}, { );
eventName: BI.MultiSelectPopupView.EVENT_CLICK_CONFIRM, },
action: function () { },
{
eventName: MultiSelectNoBarPopupView.EVENT_CLICK_CONFIRM,
action() {
self._defaultState(); self._defaultState();
} },
}, { },
eventName: BI.MultiSelectPopupView.EVENT_CLICK_CLEAR, {
action: function () { eventName: MultiSelectNoBarPopupView.EVENT_CLICK_CLEAR,
action() {
self._dataChange = true; self._dataChange = true;
self.setValue(); self.setValue();
self._defaultState(); self._defaultState();
} },
} }
], ],
itemsCreator: o.itemsCreator, itemsCreator: o.itemsCreator,
itemHeight: o.itemHeight, itemHeight: o.itemHeight,
valueFormatter: o.valueFormatter, valueFormatter: o.valueFormatter,
itemFormatter: o.itemFormatter, itemFormatter: o.itemFormatter,
onLoaded: function () { onLoaded() {
BI.nextTick(function () { nextTick(() => {
self.combo.adjustWidth(); self.combo.adjustWidth();
self.combo.adjustHeight(); self.combo.adjustHeight();
self.numberCounter.adjustView(); self.numberCounter.adjustView();
self.trigger.getSearcher().adjustView(); self.trigger.getSearcher().adjustView();
}); });
} },
}, },
value: { value: {
type: BI.Selection.Multi, type: BI.Selection.Multi,
value: o.value value: o.value,
},
hideChecker(e) {
return (
triggerBtn.element.find(e.target).length === 0 &&
self.numberCounter.element.find(e.target).length === 0
);
}, },
hideChecker: function (e) {
return triggerBtn.element.find(e.target).length === 0 && self.numberCounter.element.find(e.target).length === 0;
}
}); });
this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () { this.combo.on(Combo.EVENT_BEFORE_POPUPVIEW, function () {
if (!this.isViewVisible()) { if (!this.isViewVisible()) {
self._dataChange = false;// 标记数据是否发生变化 self._dataChange = false; // 标记数据是否发生变化
} }
this.setValue(self.storeValue); this.setValue(self.storeValue);
BI.nextTick(function () { nextTick(() => {
self._populate(); self._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._stopEditing(); self._stopEditing();
if (self.requesting === true) { if (self.requesting === true) {
self.wants2Quit = true; self.wants2Quit = true;
} else { } else {
self._dataChange && self.fireEvent(BI.MultiSelectNoBarCombo.EVENT_CONFIRM); self._dataChange &&
self.fireEvent(MultiSelectNoBarCombo.EVENT_CONFIRM);
} }
}); });
var triggerBtn = BI.createWidget({ triggerBtn.on(TriggerIconButton.EVENT_CHANGE, () => {
type: "bi.trigger_icon_button",
width: o.height,
height: o.height,
cls: "multi-select-trigger-icon-button"
});
triggerBtn.on(BI.TriggerIconButton.EVENT_CHANGE, function () {
self.numberCounter.hideView(); self.numberCounter.hideView();
if (self.combo.isViewVisible()) { if (self.combo.isViewVisible()) {
self.combo.hideView(); self.combo.hideView();
@ -218,8 +274,8 @@ BI.MultiSelectNoBarCombo = BI.inherit(BI.Single, {
} }
}); });
this.numberCounter = BI.createWidget({ this.numberCounter = createWidget({
type: "bi.multi_select_check_selected_switcher", type: MultiSelectCheckSelectedSwitcher.xtype,
masker: { masker: {
offset: { offset: {
left: 0, left: 0,
@ -229,41 +285,54 @@ BI.MultiSelectNoBarCombo = BI.inherit(BI.Single, {
}, },
}, },
valueFormatter: o.valueFormatter, valueFormatter: o.valueFormatter,
itemsCreator: BI.bind(this._itemsCreator4Trigger, this), itemsCreator: bind(this._itemsCreator4Trigger, this),
value: { value: {
type: BI.Selection.Multi, type: BI.Selection.Multi,
value: o.value value: o.value,
} },
}); });
this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE, function () { this.numberCounter.on(
if (!self.combo.isViewVisible()) { MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE,
self.combo.showView(); () => {
if (!self.combo.isViewVisible()) {
self.combo.showView();
}
} }
}); );
this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW, function () { this.numberCounter.on(
this.updateSelectedValue(self.storeValue); MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW,
}); function () {
this.updateSelectedValue(self.storeValue);
this.numberCounter.on(BI.Events.VIEW, function (b) { }
BI.nextTick(function () {// 自动调整宽度 );
self.trigger.refreshPlaceHolderWidth((b === true ? self.numberCounter.element.outerWidth() + 8 : 0));
this.numberCounter.on(Events.VIEW, b => {
nextTick(() => {
// 自动调整宽度
self.trigger.refreshPlaceHolderWidth(
b === true ? self.numberCounter.element.outerWidth() + 8 : 0
);
}); });
}); });
this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW, function () { this.numberCounter.on(
BI.nextTick(function () {// 收起时自动调整宽度 MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW,
self.trigger.refreshPlaceHolderWidth(0); () => {
}); nextTick(() => {
}); // 收起时自动调整宽度
self.trigger.refreshPlaceHolderWidth(0);
});
}
);
this.trigger.element.click(function (e) { this.trigger.element.click(e => {
if (self.trigger.element.find(e.target).length > 0) { if (self.trigger.element.find(e.target).length > 0) {
self.numberCounter.hideView(); self.numberCounter.hideView();
} }
}); });
BI.createWidget({ createWidget({
type: "bi.absolute", type: AbsoluteLayout.xtype,
element: this, element: this,
items: [ items: [
{ {
@ -271,238 +340,247 @@ BI.MultiSelectNoBarCombo = BI.inherit(BI.Single, {
left: 0, left: 0,
right: 0, right: 0,
top: 0, top: 0,
bottom: 0 bottom: 0,
}, { },
{
el: triggerBtn, el: triggerBtn,
right: 0, right: 0,
top: 0, top: 0,
bottom: 0 bottom: 0,
}, { },
{
el: { el: {
type: "bi.vertical_adapt", type: VerticalAdaptLayout.xtype,
items: [this.numberCounter] items: [this.numberCounter],
}, },
right: o.height, right: o.height,
top: 0, top: 0,
height: o.height height: o.height,
} }
] ],
}); });
}, }
_addItem: function (assertShowValue, matched) { _addItem(assertShowValue, matched) {
var self = this; const self = this;
var keyword = this.trigger.getSearcher().getKeyword(); const keyword = this.trigger.getSearcher().getKeyword();
this._join({ this._join(
type: BI.Selection.Multi, {
value: [keyword] type: BI.Selection.Multi,
}, function () { value: [keyword],
// 如果在不选的状态下直接把该值添加进来 },
if (self.storeValue.type === BI.Selection.Multi) { () => {
BI.pushDistinct(self.storeValue.value, keyword); // 如果在不选的状态下直接把该值添加进来
if (self.storeValue.type === BI.Selection.Multi) {
BI.pushDistinct(self.storeValue.value, keyword);
}
self.combo.setValue(self.storeValue);
self._setStartValue(keyword);
assertShowValue();
self.populate();
self._setStartValue("");
self._dataChange = true;
} }
self.combo.setValue(self.storeValue); );
self._setStartValue(keyword); }
assertShowValue();
self.populate();
self._setStartValue("");
self._dataChange = true;
});
},
_itemsCreator4Trigger: function (op, callback) { _itemsCreator4Trigger(op, callback) {
var self = this, o = this.options; const self = this,
o = this.options;
o.itemsCreator(op, function (res) { o.itemsCreator(op, function (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.storeValue)); self.trigger.setValue(deepClone(self.storeValue));
} }
callback.apply(self, arguments); callback.apply(self, arguments);
}); });
}, }
_stopEditing: function () { _stopEditing() {
this.trigger.stopEditing(); this.trigger.stopEditing();
this.numberCounter.hideView(); this.numberCounter.hideView();
}, }
_defaultState: function () { _defaultState() {
this._stopEditing(); this._stopEditing();
this.combo.hideView(); this.combo.hideView();
}, }
_assertValue: function (val) { _assertValue(val) {
val || (val = {}); val || (val = {});
val.type || (val.type = BI.Selection.Multi); val.type || (val.type = BI.Selection.Multi);
val.value || (val.value = []); val.value || (val.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; const self = this,
o = this.options;
this._assertValue(this.storeValue); this._assertValue(this.storeValue);
this.requesting = true; this.requesting = true;
o.itemsCreator({ o.itemsCreator(
type: BI.MultiSelectNoBarCombo.REQ_GET_ALL_DATA, {
keywords: keywords type: MultiSelectNoBarCombo.REQ_GET_ALL_DATA,
}, function (ob) { keywords,
var values = BI.map(ob.items, "value"); },
digest(values); ob => {
}); const values = map(ob.items, "value");
digest(values);
}
);
function digest(items) { function digest(items) {
var selectedMap = self._makeMap(items); const selectedMap = self._makeMap(items);
BI.each(keywords, function (i, val) { each(keywords, (i, val) => {
if (BI.isNotNull(selectedMap[val])) { if (isNotNull(selectedMap[val])) {
self.storeValue.type === BI.Selection.Multi ? BI.pushDistinct(self.storeValue.value, val) : BI.remove(self.storeValue.value, val); self.storeValue.type === BI.Selection.Multi
? BI.pushDistinct(self.storeValue.value, val)
: remove(self.storeValue.value, val);
} }
}); });
self._adjust(callback); self._adjust(callback);
} }
}, }
_joinAll: function (res, callback) { _joinAll(res, callback) {
var self = this, o = this.options; const self = this,
o = this.options;
this._assertValue(res); this._assertValue(res);
this.requesting = true; this.requesting = true;
if (this.storeValue.type === res.type) { if (this.storeValue.type === res.type) {
var result = BI.Func.getSearchResult(BI.map(this.storeValue.value, function (_i, v) { const result = Func.getSearchResult(
return { map(this.storeValue.value, (_i, v) => {
text: o.valueFormatter(v) || v, return {
value: v text: o.valueFormatter(v) || v,
}; value: v,
}), this.trigger.getKey()); };
var change = false; }),
var map = this._makeMap(this.storeValue.value); this.trigger.getKey()
BI.each(BI.concat(result.match, result.find), function (i, obj) { );
var v = obj.value; let change = false;
if (BI.isNotNull(map[v])) { const tempMap = this._makeMap(this.storeValue.value);
each(concat(result.match, result.find), (i, obj) => {
const v = obj.value;
if (isNotNull(tempMap[v])) {
change = true; change = true;
self.storeValue.assist && self.storeValue.assist.push(map[v]); self.storeValue.assist &&
delete map[v]; self.storeValue.assist.push(tempMap[v]);
delete tempMap[v];
} }
}); });
change && (this.storeValue.value = BI.values(map)); change && (this.storeValue.value = values(tempMap));
this._adjust(callback); this._adjust(callback);
return; return;
} }
o.itemsCreator({ o.itemsCreator(
type: BI.MultiSelectNoBarCombo.REQ_GET_ALL_DATA, {
keywords: [this.trigger.getKey()], type: MultiSelectNoBarCombo.REQ_GET_ALL_DATA,
selectedValues: BI.filter(this.storeValue.value, function (_i, v) { keywords: [this.trigger.getKey()],
return !BI.contains(res.value, v); selectedValues: filter(this.storeValue.value, (_i, v) => !contains(res.value, v)),
}), },
}, function (ob) { ob => {
var items = BI.map(ob.items, "value"); const items = map(ob.items, "value");
var selectedMap = self._makeMap(self.storeValue.value); const selectedMap = self._makeMap(self.storeValue.value);
var notSelectedMap = self._makeMap(res.value); const notSelectedMap = self._makeMap(res.value);
var newItems = []; const newItems = [];
BI.each(items, function (i, item) { each(items, (i, item) => {
if (BI.isNotNull(selectedMap[items[i]])) { if (isNotNull(selectedMap[items[i]])) {
self.storeValue.assist && self.storeValue.assist.push(selectedMap[items[i]]); self.storeValue.assist &&
delete selectedMap[items[i]]; self.storeValue.assist.push(selectedMap[items[i]]);
} delete selectedMap[items[i]];
if (BI.isNull(notSelectedMap[items[i]])) { }
BI.remove(self.storeValue.assist, item); if (isNull(notSelectedMap[items[i]])) {
newItems.push(item); remove(self.storeValue.assist, item);
} newItems.push(item);
}); }
self.storeValue.value = newItems.concat(BI.values(selectedMap)); });
self._adjust(callback); self.storeValue.value = newItems.concat(values(selectedMap));
}); self._adjust(callback);
}, }
);
}
_adjust: function (callback) { _adjust(callback) {
var self = this, o = this.options; const self = this;
adjust(); adjust();
callback(); callback();
function adjust() { function adjust() {
if (self.wants2Quit === true) { if (self.wants2Quit === true) {
self._dataChange && self.fireEvent(BI.MultiSelectNoBarCombo.EVENT_CONFIRM); self._dataChange &&
self.fireEvent(MultiSelectNoBarCombo.EVENT_CONFIRM);
self.wants2Quit = false; self.wants2Quit = false;
} }
self.requesting = false; self.requesting = false;
} }
}, }
_join: function (res, callback) { _join(res, callback) {
var self = this, o = this.options; const self = this;
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]) {
BI.pushDistinct(self.storeValue.value, v); pushDistinct(self.storeValue.value, v);
BI.remove(self.storeValue.assist, v); remove(self.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]); self.storeValue.assist &&
self.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); self._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);
}, }
_populate: function () { _populate() {
this.combo.populate.apply(this.combo, arguments); this.combo.populate(...arguments);
}, }
showView: function () { showView() {
this.combo.showView(); this.combo.showView();
}, }
hideView: function () { hideView() {
this.combo.hideView(); this.combo.hideView();
}, }
setValue: function (v) { setValue(v) {
this.storeValue = { this.storeValue = {
type: BI.Selection.Multi, type: BI.Selection.Multi,
value: v || [] value: v || [],
}; };
this.combo.setValue(this.storeValue); this.combo.setValue(this.storeValue);
this.numberCounter.setValue(this.storeValue); this.numberCounter.setValue(this.storeValue);
},
getValue: function () {
return BI.deepClone(this.storeValue.value);
},
populate: function () {
this._populate.apply(this, arguments);
this.numberCounter.populateSwitcher.apply(this.numberCounter, arguments);
} }
});
BI.extend(BI.MultiSelectNoBarCombo, {
REQ_GET_DATA_LENGTH: 1,
REQ_GET_ALL_DATA: -1
});
BI.MultiSelectNoBarCombo.EVENT_BLUR = "EVENT_BLUR"; getValue() {
BI.MultiSelectNoBarCombo.EVENT_FOCUS = "EVENT_FOCUS"; return deepClone(this.storeValue.value);
BI.MultiSelectNoBarCombo.EVENT_STOP = "EVENT_STOP"; }
BI.MultiSelectNoBarCombo.EVENT_SEARCHING = "EVENT_SEARCHING";
BI.MultiSelectNoBarCombo.EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM";
BI.MultiSelectNoBarCombo.EVENT_CONFIRM = "EVENT_CONFIRM";
BI.shortcut("bi.multi_select_no_bar_combo", BI.MultiSelectNoBarCombo); populate() {
this._populate(...arguments);
this.numberCounter.populateSwitcher(...arguments);
}
}

643
src/widget/multiselect/multiselect.insert.combo.js

@ -1,46 +1,96 @@
/** import {
* shortcut,
* @class BI.MultiSelectInsertCombo extend,
* @extends BI.Single emptyFn,
*/ isKey,
BI.MultiSelectInsertCombo = BI.inherit(BI.Single, { remove,
deepClone,
_defaultConfig: function () { createWidget,
return BI.extend(BI.MultiSelectInsertCombo.superclass._defaultConfig.apply(this, arguments), { toPix,
bind,
last,
initial,
i18nText,
nextTick,
Events,
AbsoluteLayout,
VerticalAdaptLayout,
isNotNull,
makeObject,
each,
Func,
map,
concat,
values,
filter,
contains,
isNull, endWith, pushDistinct, Selection
} from "@/core";
import { Single, Combo, Msg } from "@/base";
import { MultiSelectInsertTrigger } from "./multiselect.insert.trigger";
import { MultiSelectPopupView } from "./multiselect.popup.view";
import { MultiSelectBar, TriggerIconButton } from "@/case";
import { MultiSelectCheckSelectedSwitcher } from "./trigger/switcher.checkselected";
@shortcut()
export class MultiSelectInsertCombo extends Single {
static xtype = "bi.multi_select_insert_combo";
static REQ_GET_DATA_LENGTH = "1";
static REQ_GET_ALL_DATA = "-1";
static EVENT_FOCUS = "EVENT_FOCUS";
static EVENT_BLUR = "EVENT_BLUR";
static EVENT_STOP = "EVENT_STOP";
static EVENT_SEARCHING = "EVENT_SEARCHING";
static EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM";
static EVENT_CONFIRM = "EVENT_CONFIRM";
static EVENT_ADD_ITEM = "EVENT_ADD_ITEM";
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-multi-select-insert-combo", baseCls: "bi-multi-select-insert-combo",
itemsCreator: BI.emptyFn, itemsCreator: emptyFn,
valueFormatter: BI.emptyFn, valueFormatter: emptyFn,
height: 24, height: 24,
itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
allowEdit: true allowEdit: true,
}); });
}, }
_init: function () { _init() {
var self = this, o = this.options; const self = this,
BI.MultiSelectInsertCombo.superclass._init.apply(this, arguments); o = this.options;
var assertShowValue = function () { super._init(...arguments);
if (BI.isKey(self._startValue)) { const triggerBtn = createWidget({
if (self.storeValue.type === BI.Selection.All) { type: TriggerIconButton.xtype,
BI.remove(self.storeValue.value, self._startValue); width: o.height,
height: o.height,
cls: "multi-select-trigger-icon-button",
});
function assertShowValue() {
if (isKey(self._startValue)) {
if (self.storeValue.type === Selection.All) {
remove(self.storeValue.value, self._startValue);
self.storeValue.assist = self.storeValue.assist || []; self.storeValue.assist = self.storeValue.assist || [];
BI.pushDistinct(self.storeValue.assist, self._startValue); pushDistinct(self.storeValue.assist, self._startValue);
} else { } else {
BI.pushDistinct(self.storeValue.value, self._startValue); pushDistinct(self.storeValue.value, self._startValue);
BI.remove(self.storeValue.assist, self._startValue); remove(self.storeValue.assist, self._startValue);
} }
} }
self.trigger.getSearcher().setState(self.storeValue); self.trigger.getSearcher().setState(self.storeValue);
self.numberCounter.setButtonChecked(self.storeValue); self.numberCounter.setButtonChecked(self.storeValue);
}; }
this.storeValue = BI.deepClone(o.value) || {};
this.storeValue = deepClone(o.value) || {};
// 标记正在请求数据 // 标记正在请求数据
this.requesting = false; this.requesting = false;
this.trigger = BI.createWidget({ this.trigger = createWidget({
type: "bi.multi_select_insert_trigger", type: "bi.multi_select_insert_trigger",
allowEdit: o.allowEdit, allowEdit: o.allowEdit,
height: BI.toPix(o.height, o.simple ? 1 : 2), height: toPix(o.height, o.simple ? 1 : 2),
text: o.text, text: o.text,
watermark: o.watermark, watermark: o.watermark,
defaultText: o.defaultText, defaultText: o.defaultText,
@ -50,168 +100,188 @@ BI.MultiSelectInsertCombo = BI.inherit(BI.Single, {
left: 0, left: 0,
top: 0, top: 0,
right: 0, right: 0,
bottom: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 1 bottom: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 1,
} },
}, },
valueFormatter: o.valueFormatter, valueFormatter: o.valueFormatter,
itemsCreator: BI.bind(this._itemsCreator4Trigger, this), itemsCreator: bind(this._itemsCreator4Trigger, this),
itemFormatter: o.itemFormatter, itemFormatter: o.itemFormatter,
itemHeight: o.itemHeight, itemHeight: o.itemHeight,
value: this.storeValue, value: this.storeValue,
}); });
this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_FOCUS, function () { this.trigger.on(MultiSelectInsertTrigger.EVENT_FOCUS, () => {
self.fireEvent(BI.MultiSelectInsertCombo.EVENT_FOCUS); self.fireEvent(MultiSelectInsertCombo.EVENT_FOCUS);
}); });
this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_BLUR, function () { this.trigger.on(MultiSelectInsertTrigger.EVENT_BLUR, () => {
self.fireEvent(BI.MultiSelectInsertCombo.EVENT_BLUR); self.fireEvent(MultiSelectInsertCombo.EVENT_BLUR);
}); });
this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_START, function () { this.trigger.on(MultiSelectInsertTrigger.EVENT_START, function () {
self._setStartValue(""); self._setStartValue("");
this.getSearcher().setValue(self.storeValue); this.getSearcher().setValue(self.storeValue);
}); });
this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_STOP, function () { this.trigger.on(MultiSelectInsertTrigger.EVENT_STOP, () => {
self._setStartValue(""); self._setStartValue("");
self.fireEvent(BI.MultiSelectInsertCombo.EVENT_STOP); self.fireEvent(MultiSelectInsertCombo.EVENT_STOP);
}); });
this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_PAUSE, function () { this.trigger.on(MultiSelectInsertTrigger.EVENT_PAUSE, function () {
self._addItem(assertShowValue, true); self._addItem(assertShowValue, true);
self.fireEvent(BI.MultiSelectInsertCombo.EVENT_ADD_ITEM, this.getSearcher().getKeyword()); self.fireEvent(
MultiSelectInsertCombo.EVENT_ADD_ITEM,
this.getSearcher().getKeyword()
);
}); });
this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_SEARCHING, function (keywords) { this.trigger.on(
var last = BI.last(keywords); MultiSelectInsertTrigger.EVENT_SEARCHING,
keywords = BI.initial(keywords || []); function (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); self._joinKeywords(keywords, () => {
if (endWith(lastKeyword, BI.BlankSplitChar)) {
self.combo.setValue(self.storeValue);
assertShowValue();
self.combo.populate();
self._setStartValue("");
} else {
self.combo.setValue(self.storeValue);
assertShowValue();
}
self._dataChange = true;
});
this.getSearcher().getKeywordsLength() > 2000 &&
Msg.alert(
i18nText("BI-Basic_Prompt"),
i18nText("BI-Basic_Too_Much_Value_Get_Two_Thousand")
);
}
self.fireEvent(MultiSelectInsertCombo.EVENT_SEARCHING);
}
);
this.trigger.on(
MultiSelectInsertTrigger.EVENT_CHANGE,
function (value, obj) {
if (obj instanceof MultiSelectBar) {
self._joinAll(this.getValue(), () => {
assertShowValue(); assertShowValue();
self.combo.populate(); self.fireEvent(MultiSelectInsertCombo.EVENT_CLICK_ITEM);
self._setStartValue(""); });
} else { } else {
self.combo.setValue(self.storeValue); self._join(this.getValue(), () => {
assertShowValue(); assertShowValue();
} self.fireEvent(MultiSelectInsertCombo.EVENT_CLICK_ITEM);
self._dataChange = true; });
}); }
this.getSearcher().getKeywordsLength() > 2000 && BI.Msg.alert(BI.i18nText("BI-Basic_Prompt"), BI.i18nText("BI-Basic_Too_Much_Value_Get_Two_Thousand")); self._dataChange = true;
} }
self.fireEvent(BI.MultiSelectInsertCombo.EVENT_SEARCHING); );
}); this.trigger.on(
MultiSelectInsertTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW,
this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_CHANGE, function (value, obj) { () => {
if (obj instanceof BI.MultiSelectBar) { // counter的值随点击项的改变而改变, 点击counter的时候不需要setValue(counter会请求刷新计数)
self._joinAll(this.getValue(), function () { // 只需要更新查看面板的selectedValue用以请求已选数据
assertShowValue(); self.numberCounter.updateSelectedValue(self.storeValue);
self.fireEvent(BI.MultiSelectInsertCombo.EVENT_CLICK_ITEM);
});
} else {
self._join(this.getValue(), function () {
assertShowValue();
self.fireEvent(BI.MultiSelectInsertCombo.EVENT_CLICK_ITEM);
});
} }
self._dataChange = true; );
}); this.trigger.on(
this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW, function () { MultiSelectInsertTrigger.EVENT_COUNTER_CLICK,
// counter的值随点击项的改变而改变, 点击counter的时候不需要setValue(counter会请求刷新计数) () => {
// 只需要更新查看面板的selectedValue用以请求已选数据 if (!self.combo.isViewVisible()) {
self.numberCounter.updateSelectedValue(self.storeValue); self.combo.showView();
}); }
this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_COUNTER_CLICK, function () {
if (!self.combo.isViewVisible()) {
self.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: !o.allowEdit, toggle: !o.allowEdit,
el: this.trigger, el: this.trigger,
adjustLength: 1, adjustLength: 1,
container: o.container, container: o.container,
popup: { popup: {
type: "bi.multi_select_popup_view", type: "bi.multi_select_popup_view",
ref: function () { ref() {
self.popup = this; self.popup = this;
self.trigger.setAdapter(this); self.trigger.setAdapter(this);
self.numberCounter.setAdapter(this); self.numberCounter.setAdapter(this);
}, },
listeners: [ listeners: [
{ {
eventName: BI.MultiSelectPopupView.EVENT_CHANGE, eventName: MultiSelectPopupView.EVENT_CHANGE,
action: function () { action() {
self._dataChange = true; self._dataChange = true;
self.storeValue = this.getValue(); self.storeValue = this.getValue();
self._adjust(function () { self._adjust(() => {
assertShowValue(); assertShowValue();
}); });
self.fireEvent(BI.MultiSelectInsertCombo.EVENT_CLICK_ITEM); self.fireEvent(
} MultiSelectInsertCombo.EVENT_CLICK_ITEM
}, { );
eventName: BI.MultiSelectPopupView.EVENT_CLICK_CONFIRM, },
action: function () { },
{
eventName: MultiSelectPopupView.EVENT_CLICK_CONFIRM,
action() {
self._defaultState(); self._defaultState();
} },
}, { },
eventName: BI.MultiSelectPopupView.EVENT_CLICK_CLEAR, {
action: function () { eventName: MultiSelectPopupView.EVENT_CLICK_CLEAR,
action() {
self._dataChange = true; self._dataChange = true;
self.setValue(); self.setValue();
self._defaultState(); self._defaultState();
} },
} }
], ],
itemsCreator: o.itemsCreator, itemsCreator: o.itemsCreator,
valueFormatter: o.valueFormatter, valueFormatter: o.valueFormatter,
itemFormatter: o.itemFormatter, itemFormatter: o.itemFormatter,
itemHeight: o.itemHeight, itemHeight: o.itemHeight,
onLoaded: function () { onLoaded() {
BI.nextTick(function () { nextTick(() => {
self.combo.adjustWidth(); self.combo.adjustWidth();
self.combo.adjustHeight(); self.combo.adjustHeight();
self.numberCounter.adjustView(); self.numberCounter.adjustView();
self.trigger.getSearcher().adjustView(); self.trigger.getSearcher().adjustView();
}); });
} },
}, },
value: o.value, value: o.value,
hideChecker: function (e) { hideChecker(e) {
return triggerBtn.element.find(e.target).length === 0 && return (
self.numberCounter.element.find(e.target).length === 0; triggerBtn.element.find(e.target).length === 0 &&
} self.numberCounter.element.find(e.target).length === 0
);
},
}); });
this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () { this.combo.on(Combo.EVENT_BEFORE_POPUPVIEW, function () {
if (!this.isViewVisible()) { if (!this.isViewVisible()) {
self._dataChange = false;// 标记数据是否发生变化 self._dataChange = false; // 标记数据是否发生变化
} }
this.setValue(self.storeValue); this.setValue(self.storeValue);
BI.nextTick(function () { nextTick(() => {
self._populate(); self._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._stopEditing(); self._stopEditing();
if (self.requesting === true) { if (self.requesting === true) {
self.wants2Quit = true; self.wants2Quit = true;
} else { } else {
self._dataChange && self.fireEvent(BI.MultiSelectInsertCombo.EVENT_CONFIRM); self._dataChange &&
self.fireEvent(MultiSelectInsertCombo.EVENT_CONFIRM);
} }
}); });
var triggerBtn = BI.createWidget({ triggerBtn.on(TriggerIconButton.EVENT_CHANGE, () => {
type: "bi.trigger_icon_button",
width: o.height,
height: o.height,
cls: "multi-select-trigger-icon-button"
});
triggerBtn.on(BI.TriggerIconButton.EVENT_CHANGE, function () {
self.numberCounter.hideView(); self.numberCounter.hideView();
if (self.combo.isViewVisible()) { if (self.combo.isViewVisible()) {
self.combo.hideView(); self.combo.hideView();
@ -220,49 +290,62 @@ BI.MultiSelectInsertCombo = BI.inherit(BI.Single, {
} }
}); });
this.numberCounter = BI.createWidget({ this.numberCounter = createWidget({
type: "bi.multi_select_check_selected_switcher", type: MultiSelectCheckSelectedSwitcher.xtype,
masker: { masker: {
offset: { offset: {
left: 0, left: 0,
top: 0, top: 0,
right: 0, right: 0,
bottom: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 1 bottom: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 1,
} },
}, },
valueFormatter: o.valueFormatter, valueFormatter: o.valueFormatter,
itemsCreator: BI.bind(this._itemsCreator4Trigger, this), itemsCreator: bind(this._itemsCreator4Trigger, this),
value: o.value value: o.value,
}); });
this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE, function () { this.numberCounter.on(
if (!self.combo.isViewVisible()) { MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE,
self.combo.showView(); () => {
if (!self.combo.isViewVisible()) {
self.combo.showView();
}
} }
}); );
this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW, function () { this.numberCounter.on(
this.updateSelectedValue(self.storeValue); MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW,
}); function () {
this.updateSelectedValue(self.storeValue);
this.numberCounter.on(BI.Events.VIEW, function (b) { }
BI.nextTick(function () {// 自动调整宽度 );
self.trigger.refreshPlaceHolderWidth((b === true ? self.numberCounter.element.outerWidth() + 8 : 0));
this.numberCounter.on(Events.VIEW, b => {
nextTick(() => {
// 自动调整宽度
self.trigger.refreshPlaceHolderWidth(
b === true ? self.numberCounter.element.outerWidth() + 8 : 0
);
}); });
}); });
this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW, function () { this.numberCounter.on(
BI.nextTick(function () {// 收起时自动调整宽度 MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW,
self.trigger.refreshPlaceHolderWidth(0); () => {
}); nextTick(() => {
}); // 收起时自动调整宽度
self.trigger.refreshPlaceHolderWidth(0);
});
}
);
this.trigger.element.click(function (e) { this.trigger.element.click(e => {
if (self.trigger.element.find(e.target).length > 0) { if (self.trigger.element.find(e.target).length > 0) {
self.numberCounter.hideView(); self.numberCounter.hideView();
} }
}); });
BI.createWidget({ createWidget({
type: "bi.absolute", type: AbsoluteLayout.xtype,
element: this, element: this,
items: [ items: [
{ {
@ -270,230 +353,234 @@ BI.MultiSelectInsertCombo = BI.inherit(BI.Single, {
left: 0, left: 0,
right: 0, right: 0,
top: 0, top: 0,
bottom: 0 bottom: 0,
}, { },
{
el: triggerBtn, el: triggerBtn,
right: 0, right: 0,
top: 0, top: 0,
bottom: 0 bottom: 0,
}, { },
{
el: { el: {
type: "bi.vertical_adapt", type: VerticalAdaptLayout.xtype,
items: [this.numberCounter] items: [this.numberCounter],
}, },
right: o.height, right: o.height,
top: 0, top: 0,
height: o.height, height: o.height,
} }
] ],
}); });
}, }
_itemsCreator4Trigger: function (op, callback) { _itemsCreator4Trigger(op, callback) {
var self = this, o = this.options; const self = this,
o = this.options;
o.itemsCreator(op, function (res) { o.itemsCreator(op, function (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())); self.trigger.setValue(deepClone(self.getValue()));
} }
callback.apply(self, arguments); callback.apply(self, arguments);
}); });
}, }
_addItem: function (assertShowValue) { _addItem(assertShowValue) {
var self = this; const self = this;
var keyword = this.trigger.getSearcher().getKeyword(); const keyword = this.trigger.getSearcher().getKeyword();
this._join({ this._join(
type: BI.Selection.Multi, {
value: [keyword] type: Selection.Multi,
}, function () { value: [keyword],
// 如果在不选的状态下直接把该值添加进来 },
if (self.storeValue.type === BI.Selection.Multi) { () => {
BI.pushDistinct(self.storeValue.value, keyword); // 如果在不选的状态下直接把该值添加进来
if (self.storeValue.type === Selection.Multi) {
pushDistinct(self.storeValue.value, keyword);
}
self.combo.setValue(self.storeValue);
self._setStartValue(keyword);
assertShowValue();
self.populate();
self._setStartValue("");
self._dataChange = true;
} }
self.combo.setValue(self.storeValue); );
self._setStartValue(keyword); }
assertShowValue();
self.populate();
self._setStartValue("");
self._dataChange = true;
});
},
_stopEditing: function () { _stopEditing() {
this.trigger.stopEditing(); this.trigger.stopEditing();
this.numberCounter.hideView(); this.numberCounter.hideView();
}, }
_defaultState: function () { _defaultState() {
this._stopEditing(); this._stopEditing();
this.combo.hideView(); this.combo.hideView();
}, }
_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 = []);
}, }
_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; const self = this;
this._assertValue(this.storeValue); this._assertValue(this.storeValue);
this.requesting = true; this.requesting = true;
digest(); digest();
function digest() { function digest() {
BI.each(keywords, function (i, val) { each(keywords, (i, val) => {
self.storeValue.type === BI.Selection.Multi ? BI.pushDistinct(self.storeValue.value, val) : BI.remove(self.storeValue.value, val); self.storeValue.type === Selection.Multi
? pushDistinct(self.storeValue.value, val)
: remove(self.storeValue.value, val);
}); });
self._adjust(callback); self._adjust(callback);
} }
}, }
_joinAll: function (res, callback) { _joinAll(res, callback) {
var self = this, o = this.options; const self = this,
o = this.options;
this._assertValue(res); this._assertValue(res);
this.requesting = true; this.requesting = true;
if (this.storeValue.type === res.type) { if (this.storeValue.type === res.type) {
var result = BI.Func.getSearchResult(BI.map(this.storeValue.value, function (_i, v) { const result = Func.getSearchResult(
return { map(this.storeValue.value, (_i, v) => {
text: o.valueFormatter(v) || v, return {
value: v text: o.valueFormatter(v) || v,
}; value: v,
}), this.trigger.getKey()); };
var change = false; }),
var map = this._makeMap(this.storeValue.value); this.trigger.getKey()
BI.each(BI.concat(result.match, result.find), function (i, obj) { );
var v = obj.value; let change = false;
if (BI.isNotNull(map[v])) { const tempMap = this._makeMap(this.storeValue.value);
each(concat(result.match, result.find), (i, obj) => {
const v = obj.value;
if (isNotNull(tempMap[v])) {
change = true; change = true;
self.storeValue.assist && self.storeValue.assist.push(map[v]); self.storeValue.assist &&
delete map[v]; self.storeValue.assist.push(tempMap[v]);
delete tempMap[v];
} }
}); });
change && (this.storeValue.value = BI.values(map)); change && (this.storeValue.value = values(tempMap));
this._adjust(callback); this._adjust(callback);
return; return;
} }
o.itemsCreator({ o.itemsCreator(
type: BI.MultiSelectInsertCombo.REQ_GET_ALL_DATA, {
keywords: [this.trigger.getKey()], type: MultiSelectInsertCombo.REQ_GET_ALL_DATA,
selectedValues: BI.filter(this.storeValue.value, function (_i, v) { keywords: [this.trigger.getKey()],
return !BI.contains(res.value, v); selectedValues: filter(this.storeValue.value, (_i, v) => !contains(res.value, v)),
}), },
}, function (ob) { ob => {
var items = BI.map(ob.items, "value"); const items = map(ob.items, "value");
var selectedMap = self._makeMap(self.storeValue.value); const selectedMap = self._makeMap(self.storeValue.value);
var notSelectedMap = self._makeMap(res.value); const notSelectedMap = self._makeMap(res.value);
var newItems = []; const newItems = [];
BI.each(items, function (i, item) { each(items, (i, item) => {
if (BI.isNotNull(selectedMap[items[i]])) { if (isNotNull(selectedMap[items[i]])) {
self.storeValue.assist && self.storeValue.assist.push(selectedMap[items[i]]); self.storeValue.assist &&
delete selectedMap[items[i]]; self.storeValue.assist.push(selectedMap[items[i]]);
} delete selectedMap[items[i]];
if (BI.isNull(notSelectedMap[items[i]])) { }
BI.remove(self.storeValue.assist, item); if (isNull(notSelectedMap[items[i]])) {
newItems.push(item); remove(self.storeValue.assist, item);
} newItems.push(item);
}); }
self.storeValue.value = newItems.concat(BI.values(selectedMap)); });
self._adjust(callback); self.storeValue.value = newItems.concat(values(selectedMap));
}); self._adjust(callback);
}, }
);
}
_adjust: function (callback) { _adjust(callback) {
var self = this, o = this.options; const self = this;
adjust(); adjust();
callback(); callback();
function adjust() { function adjust() {
if (self.wants2Quit === true) { if (self.wants2Quit === true) {
self._dataChange && self.fireEvent(BI.MultiSelectInsertCombo.EVENT_CONFIRM); self._dataChange &&
self.fireEvent(MultiSelectInsertCombo.EVENT_CONFIRM);
self.wants2Quit = false; self.wants2Quit = false;
} }
self.requesting = false; self.requesting = false;
} }
}, }
_join: function (res, callback) { _join(res, callback) {
var self = this, o = this.options; const self = this;
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]) {
BI.pushDistinct(self.storeValue.value, v); pushDistinct(self.storeValue.value, v);
// value更新的时候assist也需要更新 // value更新的时候assist也需要更新
BI.remove(self.storeValue.assist, v); remove(self.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]); self.storeValue.assist &&
self.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); self._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);
}, }
_populate: function () { _populate() {
this.combo.populate.apply(this.combo, arguments); this.combo.populate(...arguments);
}, }
showView: function () { showView() {
this.combo.showView(); this.combo.showView();
}, }
hideView: function () { hideView() {
this.combo.hideView(); this.combo.hideView();
}, }
setValue: function (v) { setValue(v) {
this.storeValue = v || {}; this.storeValue = v || {};
this._assertValue(this.storeValue); this._assertValue(this.storeValue);
this.combo.setValue(this.storeValue); this.combo.setValue(this.storeValue);
this.numberCounter.setValue(this.storeValue); this.numberCounter.setValue(this.storeValue);
}, }
getValue: function () { getValue() {
return BI.deepClone(this.storeValue); return deepClone(this.storeValue);
}, }
populate: function () { populate() {
this._populate.apply(this, arguments); this._populate(...arguments);
this.numberCounter.populateSwitcher.apply(this.numberCounter, arguments); this.numberCounter.populateSwitcher(...arguments);
} }
}); }
BI.extend(BI.MultiSelectInsertCombo, {
REQ_GET_DATA_LENGTH: 1,
REQ_GET_ALL_DATA: -1
});
BI.MultiSelectInsertCombo.EVENT_FOCUS = "EVENT_FOCUS";
BI.MultiSelectInsertCombo.EVENT_BLUR = "EVENT_BLUR";
BI.MultiSelectInsertCombo.EVENT_STOP = "EVENT_STOP";
BI.MultiSelectInsertCombo.EVENT_SEARCHING = "EVENT_SEARCHING";
BI.MultiSelectInsertCombo.EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM";
BI.MultiSelectInsertCombo.EVENT_CONFIRM = "EVENT_CONFIRM";
BI.MultiSelectInsertCombo.EVENT_ADD_ITEM = "EVENT_ADD_ITEM";
BI.shortcut("bi.multi_select_insert_combo", BI.MultiSelectInsertCombo);

635
src/widget/multiselect/multiselect.insert.combo.nobar.js

@ -1,47 +1,92 @@
/** import {
* shortcut,
* @class BI.MultiSelectInsertCombo extend,
* @extends BI.Single emptyFn,
*/ isKey,
BI.MultiSelectInsertNoBarCombo = BI.inherit(BI.Single, { remove,
deepClone,
_defaultConfig: function () { createWidget,
return BI.extend(BI.MultiSelectInsertNoBarCombo.superclass._defaultConfig.apply(this, arguments), { toPix,
bind,
last,
initial,
i18nText,
nextTick,
Events,
AbsoluteLayout,
VerticalAdaptLayout,
isNotNull,
makeObject,
each,
Func,
map,
concat,
values,
filter,
contains,
isNull, endWith, pushDistinct, Selection
} from "@/core";
import { Single, Combo, Msg } from "@/base";
import { MultiSelectInsertTrigger } from "./multiselect.insert.trigger";
import { MultiSelectBar, TriggerIconButton } from "@/case";
import { MultiSelectCheckSelectedSwitcher } from "./trigger/switcher.checkselected";
import { MultiSelectNoBarPopupView } from "./multiselect.popup.view.nobar";
@shortcut()
export class MultiSelectInsertNoBarCombo extends Single {
static xtype = "bi.multi_select_insert_no_bar_combo";
static REQ_GET_DATA_LENGTH = "1";
static REQ_GET_ALL_DATA = "-1";
static EVENT_CONFIRM = "EVENT_CONFIRM";
static EVENT_ADD_ITEM = "EVENT_ADD_ITEM";
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-multi-select-insert-combo-no-bar", baseCls: "bi-multi-select-insert-combo-no-bar",
itemsCreator: BI.emptyFn, itemsCreator: emptyFn,
valueFormatter: BI.emptyFn, valueFormatter: emptyFn,
itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
height: 24, height: 24,
}); });
}, }
_init: function () { _init() {
var self = this, o = this.options; const self = this,
BI.MultiSelectInsertNoBarCombo.superclass._init.apply(this, arguments); o = this.options;
var assertShowValue = function () { super._init(...arguments);
if (BI.isKey(self._startValue)) { const triggerBtn = createWidget({
if (self.storeValue.type === BI.Selection.All) { type: TriggerIconButton.xtype,
BI.remove(self.storeValue.value, self._startValue); width: o.height,
height: o.height,
cls: "multi-select-trigger-icon-button",
});
function assertShowValue() {
if (isKey(self._startValue)) {
if (self.storeValue.type === Selection.All) {
remove(self.storeValue.value, self._startValue);
self.storeValue.assist = self.storeValue.assist || []; self.storeValue.assist = self.storeValue.assist || [];
BI.pushDistinct(self.storeValue.assist, self._startValue); pushDistinct(self.storeValue.assist, self._startValue);
} else { } else {
BI.pushDistinct(self.storeValue.value, self._startValue); pushDistinct(self.storeValue.value, self._startValue);
BI.remove(self.storeValue.assist, self._startValue); remove(self.storeValue.assist, self._startValue);
} }
} }
self.trigger.getSearcher().setState(self.storeValue); self.trigger.getSearcher().setState(self.storeValue);
self.numberCounter.setButtonChecked(self.storeValue); self.numberCounter.setButtonChecked(self.storeValue);
}; }
this.storeValue = { this.storeValue = {
type: BI.Selection.Multi, type: Selection.Multi,
value: BI.deepClone(o.value) || [] value: deepClone(o.value) || [],
}; };
// 标记正在请求数据 // 标记正在请求数据
this.requesting = false; this.requesting = false;
this.trigger = BI.createWidget({ this.trigger = createWidget({
type: "bi.multi_select_insert_trigger", type: MultiSelectInsertTrigger.xtype,
height: BI.toPix(o.height, o.simple ? 1 : 2), height: toPix(o.height, o.simple ? 1 : 2),
text: o.text, text: o.text,
// adapter: this.popup, // adapter: this.popup,
masker: { masker: {
@ -49,161 +94,179 @@ BI.MultiSelectInsertNoBarCombo = BI.inherit(BI.Single, {
left: 0, left: 0,
top: 0, top: 0,
right: 0, right: 0,
bottom: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 1 bottom: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 1,
} },
}, },
valueFormatter: o.valueFormatter, valueFormatter: o.valueFormatter,
itemsCreator: BI.bind(this._itemsCreator4Trigger, this), itemsCreator: bind(this._itemsCreator4Trigger, this),
itemFormatter: o.itemFormatter, itemFormatter: o.itemFormatter,
itemHeight: o.itemHeight, itemHeight: o.itemHeight,
value: { value: {
type: BI.Selection.Multi, type: Selection.Multi,
value: o.value value: o.value,
} },
}); });
this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_START, function () { this.trigger.on(MultiSelectInsertTrigger.EVENT_START, function () {
self._setStartValue(""); self._setStartValue("");
this.getSearcher().setValue(self.storeValue); this.getSearcher().setValue(self.storeValue);
}); });
this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_STOP, function () { this.trigger.on(MultiSelectInsertTrigger.EVENT_STOP, () => {
self._setStartValue(""); self._setStartValue("");
}); });
this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_PAUSE, function () { this.trigger.on(MultiSelectInsertTrigger.EVENT_PAUSE, function () {
self._addItem(assertShowValue, true); self._addItem(assertShowValue, true);
self.fireEvent(BI.MultiSelectInsertNoBarCombo.EVENT_ADD_ITEM, this.getSearcher().getKeyword()); self.fireEvent(
MultiSelectInsertNoBarCombo.EVENT_ADD_ITEM,
this.getSearcher().getKeyword()
);
}); });
this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_SEARCHING, function (keywords) { this.trigger.on(
var last = BI.last(keywords); MultiSelectInsertTrigger.EVENT_SEARCHING,
keywords = BI.initial(keywords || []); function (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); self._joinKeywords(keywords, () => {
if (endWith(lastKeyword, BI.BlankSplitChar)) {
self.combo.setValue(self.storeValue);
assertShowValue();
self.combo.populate();
self._setStartValue("");
} else {
self.combo.setValue(self.storeValue);
assertShowValue();
}
self._dataChange = true;
});
this.getSearcher().getKeywordsLength() > 2000 &&
Msg.alert(
i18nText("BI-Basic_Prompt"),
i18nText("BI-Basic_Too_Much_Value_Get_Two_Thousand")
);
}
}
);
this.trigger.on(
MultiSelectInsertTrigger.EVENT_CHANGE,
function (value, obj) {
if (obj instanceof MultiSelectBar) {
self._joinAll(this.getValue(), () => {
assertShowValue(); assertShowValue();
self.combo.populate(); });
self._setStartValue(""); } else {
} else { self._join(this.getValue(), () => {
self.combo.setValue(self.storeValue);
assertShowValue(); assertShowValue();
} });
self._dataChange = true; }
}); self._dataChange = true;
this.getSearcher().getKeywordsLength() > 2000 && BI.Msg.alert(BI.i18nText("BI-Basic_Prompt"), BI.i18nText("BI-Basic_Too_Much_Value_Get_Two_Thousand"));
} }
}); );
this.trigger.on(
this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_CHANGE, function (value, obj) { MultiSelectInsertTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW,
if (obj instanceof BI.MultiSelectBar) { () => {
self._joinAll(this.getValue(), function () { // counter的值随点击项的改变而改变, 点击counter的时候不需要setValue(counter会请求刷新计数)
assertShowValue(); // 只需要更新查看面板的selectedValue用以请求已选数据
}); self.numberCounter.updateSelectedValue(self.storeValue);
} else {
self._join(this.getValue(), function () {
assertShowValue();
});
} }
self._dataChange = true; );
}); this.trigger.on(
this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW, function () { MultiSelectInsertTrigger.EVENT_COUNTER_CLICK,
// counter的值随点击项的改变而改变, 点击counter的时候不需要setValue(counter会请求刷新计数) () => {
// 只需要更新查看面板的selectedValue用以请求已选数据 if (!self.combo.isViewVisible()) {
self.numberCounter.updateSelectedValue(self.storeValue); self.combo.showView();
}); }
this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_COUNTER_CLICK, function () {
if (!self.combo.isViewVisible()) {
self.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.multi_select_no_bar_popup_view", type: MultiSelectNoBarPopupView.xtype,
ref: function () { ref() {
self.popup = this; self.popup = this;
self.trigger.setAdapter(this); self.trigger.setAdapter(this);
self.numberCounter.setAdapter(this); self.numberCounter.setAdapter(this);
}, },
listeners: [ listeners: [
{ {
eventName: BI.MultiSelectPopupView.EVENT_CHANGE, eventName: MultiSelectNoBarPopupView.EVENT_CHANGE,
action: function () { action() {
self._dataChange = true; self._dataChange = true;
self.storeValue = this.getValue(); self.storeValue = this.getValue();
self._adjust(function () { self._adjust(() => {
assertShowValue(); assertShowValue();
}); });
} },
}, { },
eventName: BI.MultiSelectPopupView.EVENT_CLICK_CONFIRM, {
action: function () { eventName: MultiSelectNoBarPopupView.EVENT_CLICK_CONFIRM,
action() {
self._defaultState(); self._defaultState();
} },
}, { },
eventName: BI.MultiSelectPopupView.EVENT_CLICK_CLEAR, {
action: function () { eventName: MultiSelectNoBarPopupView.EVENT_CLICK_CLEAR,
action() {
self._dataChange = true; self._dataChange = true;
self.setValue(); self.setValue();
self._defaultState(); self._defaultState();
} },
} }
], ],
itemsCreator: o.itemsCreator, itemsCreator: o.itemsCreator,
itemHeight: o.itemHeight, itemHeight: o.itemHeight,
valueFormatter: o.valueFormatter, valueFormatter: o.valueFormatter,
onLoaded: function () { onLoaded() {
BI.nextTick(function () { nextTick(() => {
self.combo.adjustWidth(); self.combo.adjustWidth();
self.combo.adjustHeight(); self.combo.adjustHeight();
self.numberCounter.adjustView(); self.numberCounter.adjustView();
self.trigger.getSearcher().adjustView(); self.trigger.getSearcher().adjustView();
}); });
} },
}, },
value: { value: {
type: BI.Selection.Multi, type: Selection.Multi,
value: o.value value: o.value,
},
hideChecker(e) {
return (
triggerBtn.element.find(e.target).length === 0 &&
self.numberCounter.element.find(e.target).length === 0
);
}, },
hideChecker: function (e) {
return triggerBtn.element.find(e.target).length === 0 &&
self.numberCounter.element.find(e.target).length === 0;
}
}); });
this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () { this.combo.on(Combo.EVENT_BEFORE_POPUPVIEW, function () {
if (!this.isViewVisible()) { if (!this.isViewVisible()) {
self._dataChange = false;// 标记数据是否发生变化 self._dataChange = false; // 标记数据是否发生变化
} }
this.setValue(self.storeValue); this.setValue(self.storeValue);
BI.nextTick(function () { nextTick(() => {
self._populate(); self._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._stopEditing(); self._stopEditing();
if (self.requesting === true) { if (self.requesting === true) {
self.wants2Quit = true; self.wants2Quit = true;
} else { } else {
self._dataChange && self.fireEvent(BI.MultiSelectInsertNoBarCombo.EVENT_CONFIRM); self._dataChange &&
self.fireEvent(MultiSelectInsertNoBarCombo.EVENT_CONFIRM);
} }
}); });
var triggerBtn = BI.createWidget({ triggerBtn.on(TriggerIconButton.EVENT_CHANGE, () => {
type: "bi.trigger_icon_button",
width: o.height,
height: o.height,
cls: "multi-select-trigger-icon-button"
});
triggerBtn.on(BI.TriggerIconButton.EVENT_CHANGE, function () {
self.numberCounter.hideView(); self.numberCounter.hideView();
if (self.combo.isViewVisible()) { if (self.combo.isViewVisible()) {
self.combo.hideView(); self.combo.hideView();
@ -212,52 +275,65 @@ BI.MultiSelectInsertNoBarCombo = BI.inherit(BI.Single, {
} }
}); });
this.numberCounter = BI.createWidget({ this.numberCounter = createWidget({
type: "bi.multi_select_check_selected_switcher", type: MultiSelectCheckSelectedSwitcher.xtype,
masker: { masker: {
offset: { offset: {
left: 0, left: 0,
top: 0, top: 0,
right: 0, right: 0,
bottom: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 1 bottom: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 1,
} },
}, },
valueFormatter: o.valueFormatter, valueFormatter: o.valueFormatter,
itemsCreator: BI.bind(this._itemsCreator4Trigger, this), itemsCreator: bind(this._itemsCreator4Trigger, this),
value: { value: {
type: BI.Selection.Multi, type: Selection.Multi,
value: o.value value: o.value,
} },
}); });
this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE, function () { this.numberCounter.on(
if (!self.combo.isViewVisible()) { MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE,
self.combo.showView(); () => {
if (!self.combo.isViewVisible()) {
self.combo.showView();
}
} }
}); );
this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW, function () { this.numberCounter.on(
this.updateSelectedValue(self.storeValue); MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW,
}); function () {
this.updateSelectedValue(self.storeValue);
this.numberCounter.on(BI.Events.VIEW, function (b) { }
BI.nextTick(function () {// 自动调整宽度 );
self.trigger.refreshPlaceHolderWidth((b === true ? self.numberCounter.element.outerWidth() + 8 : 0));
this.numberCounter.on(Events.VIEW, b => {
nextTick(() => {
// 自动调整宽度
self.trigger.refreshPlaceHolderWidth(
b === true ? self.numberCounter.element.outerWidth() + 8 : 0
);
}); });
}); });
this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW, function () { this.numberCounter.on(
BI.nextTick(function () {// 收起时自动调整宽度 MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW,
self.trigger.refreshPlaceHolderWidth(0); () => {
}); nextTick(() => {
}); // 收起时自动调整宽度
self.trigger.refreshPlaceHolderWidth(0);
});
}
);
this.trigger.element.click(function (e) { this.trigger.element.click(e => {
if (self.trigger.element.find(e.target).length > 0) { if (self.trigger.element.find(e.target).length > 0) {
self.numberCounter.hideView(); self.numberCounter.hideView();
} }
}); });
BI.createWidget({ createWidget({
type: "bi.absolute", type: AbsoluteLayout.xtype,
element: this, element: this,
items: [ items: [
{ {
@ -265,226 +341,235 @@ BI.MultiSelectInsertNoBarCombo = BI.inherit(BI.Single, {
left: 0, left: 0,
right: 0, right: 0,
top: 0, top: 0,
bottom: 0 bottom: 0,
}, { },
{
el: triggerBtn, el: triggerBtn,
right: 0, right: 0,
top: 0, top: 0,
bottom: 0 bottom: 0,
}, { },
{
el: { el: {
type: "bi.vertical_adapt", type: VerticalAdaptLayout.xtype,
items: [this.numberCounter] items: [this.numberCounter],
}, },
right: o.height, right: o.height,
top: 0, top: 0,
height: o.height height: o.height,
} }
] ],
}); });
}, }
_itemsCreator4Trigger: function (op, callback) { _itemsCreator4Trigger(op, callback) {
var self = this, o = this.options; const self = this,
o = this.options;
o.itemsCreator(op, function (res) { o.itemsCreator(op, function (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.storeValue)); self.trigger.setValue(deepClone(self.storeValue));
} }
callback.apply(self, arguments); callback.apply(self, arguments);
}); });
}, }
_addItem: function (assertShowValue) { _addItem(assertShowValue) {
var self = this; const self = this;
var keyword = this.trigger.getSearcher().getKeyword(); const keyword = this.trigger.getSearcher().getKeyword();
this._join({ this._join(
type: BI.Selection.Multi, {
value: [keyword] type: Selection.Multi,
}, function () { value: [keyword],
// 如果在不选的状态下直接把该值添加进来 },
if (self.storeValue.type === BI.Selection.Multi) { () => {
BI.pushDistinct(self.storeValue.value, keyword); // 如果在不选的状态下直接把该值添加进来
if (self.storeValue.type === Selection.Multi) {
pushDistinct(self.storeValue.value, keyword);
}
self.combo.setValue(self.storeValue);
self._setStartValue(keyword);
assertShowValue();
self.populate();
self._setStartValue("");
self._dataChange = true;
} }
self.combo.setValue(self.storeValue); );
self._setStartValue(keyword); }
assertShowValue();
self.populate();
self._setStartValue("");
self._dataChange = true;
});
},
_stopEditing: function () { _stopEditing() {
this.trigger.stopEditing(); this.trigger.stopEditing();
this.numberCounter.hideView(); this.numberCounter.hideView();
}, }
_defaultState: function () { _defaultState() {
this._stopEditing(); this._stopEditing();
this.combo.hideView(); this.combo.hideView();
}, }
_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 = []);
}, }
_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; const self = this;
this._assertValue(this.storeValue); this._assertValue(this.storeValue);
this.requesting = true; this.requesting = true;
digest(); digest();
function digest() { function digest() {
BI.each(keywords, function (i, val) { each(keywords, (i, val) => {
self.storeValue.type === BI.Selection.Multi ? BI.pushDistinct(self.storeValue.value, val) : BI.remove(self.storeValue.value, val); self.storeValue.type === Selection.Multi
? pushDistinct(self.storeValue.value, val)
: remove(self.storeValue.value, val);
}); });
self._adjust(callback); self._adjust(callback);
} }
}, }
_joinAll: function (res, callback) { _joinAll(res, callback) {
var self = this, o = this.options; const self = this,
o = this.options;
this._assertValue(res); this._assertValue(res);
this.requesting = true; this.requesting = true;
if (this.storeValue.type === res.type) { if (this.storeValue.type === res.type) {
var result = BI.Func.getSearchResult(BI.map(this.storeValue.value, function (_i, v) { const result = Func.getSearchResult(
return { map(this.storeValue.value, (_i, v) => {
text: o.valueFormatter(v) || v, return {
value: v text: o.valueFormatter(v) || v,
}; value: v,
}), this.trigger.getKey()); };
var change = false; }),
var map = this._makeMap(this.storeValue.value); this.trigger.getKey()
BI.each(BI.concat(result.match, result.find), function (i, obj) { );
var v = obj.value; let change = false;
if (BI.isNotNull(map[v])) { const tempMap = this._makeMap(this.storeValue.value);
each(concat(result.match, result.find), (i, obj) => {
const v = obj.value;
if (isNotNull(tempMap[v])) {
change = true; change = true;
self.storeValue.assist && self.storeValue.assist.push(map[v]); self.storeValue.assist &&
delete map[v]; self.storeValue.assist.push(tempMap[v]);
delete tempMap[v];
} }
}); });
change && (this.storeValue.value = BI.values(map)); change && (this.storeValue.value = values(tempMap));
this._adjust(callback); this._adjust(callback);
return; return;
} }
o.itemsCreator({ o.itemsCreator(
type: BI.MultiSelectInsertNoBarCombo.REQ_GET_ALL_DATA, {
keywords: [this.trigger.getKey()], type: MultiSelectInsertNoBarCombo.REQ_GET_ALL_DATA,
selectedValues: BI.filter(this.storeValue.value, function (_i, v) { keywords: [this.trigger.getKey()],
return !BI.contains(res.value, v); selectedValues: filter(this.storeValue.value, (_i, v) => !contains(res.value, v)),
}), },
}, function (ob) { ob => {
var items = BI.map(ob.items, "value"); const items = map(ob.items, "value");
var selectedMap = self._makeMap(self.storeValue.value); const selectedMap = self._makeMap(self.storeValue.value);
var notSelectedMap = self._makeMap(res.value); const notSelectedMap = self._makeMap(res.value);
var newItems = []; const newItems = [];
BI.each(items, function (i, item) { each(items, (i, item) => {
if (BI.isNotNull(selectedMap[items[i]])) { if (isNotNull(selectedMap[items[i]])) {
self.storeValue.assist && self.storeValue.assist.push(selectedMap[items[i]]); self.storeValue.assist &&
delete selectedMap[items[i]]; self.storeValue.assist.push(selectedMap[items[i]]);
} delete selectedMap[items[i]];
if (BI.isNull(notSelectedMap[items[i]])) { }
BI.remove(self.storeValue.assist, item); if (isNull(notSelectedMap[items[i]])) {
newItems.push(item); remove(self.storeValue.assist, item);
} newItems.push(item);
}); }
self.storeValue.value = newItems.concat(BI.values(selectedMap)); });
self._adjust(callback); self.storeValue.value = newItems.concat(values(selectedMap));
}); self._adjust(callback);
}, }
);
}
_adjust: function (callback) { _adjust(callback) {
var self = this, o = this.options; const self = this;
adjust(); adjust();
callback(); callback();
function adjust() { function adjust() {
if (self.wants2Quit === true) { if (self.wants2Quit === true) {
self._dataChange && self.fireEvent(BI.MultiSelectInsertNoBarCombo.EVENT_CONFIRM); self._dataChange &&
self.fireEvent(MultiSelectInsertNoBarCombo.EVENT_CONFIRM);
self.wants2Quit = false; self.wants2Quit = false;
} }
self.requesting = false; self.requesting = false;
} }
}, }
_join: function (res, callback) { _join(res, callback) {
var self = this, o = this.options; const self = this;
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); self.storeValue.value.push(v);
BI.remove(self.storeValue.assist, v); remove(self.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]); self.storeValue.assist &&
self.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); self._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);
}, }
_populate: function () { _populate() {
this.combo.populate.apply(this.combo, arguments); this.combo.populate(...arguments);
}, }
showView: function () { showView() {
this.combo.showView(); this.combo.showView();
}, }
hideView: function () { hideView() {
this.combo.hideView(); this.combo.hideView();
}, }
setValue: function (v) { setValue(v) {
this.storeValue = { this.storeValue = {
type: BI.Selection.Multi, type: Selection.Multi,
value: v || [] value: v || [],
}; };
this.combo.setValue(this.storeValue); this.combo.setValue(this.storeValue);
this.numberCounter.setValue(this.storeValue); this.numberCounter.setValue(this.storeValue);
},
getValue: function () {
return BI.deepClone(this.storeValue.value);
},
populate: function () {
this._populate.apply(this, arguments);
this.numberCounter.populateSwitcher.apply(this.numberCounter, arguments);
} }
});
BI.extend(BI.MultiSelectInsertNoBarCombo, { getValue() {
REQ_GET_DATA_LENGTH: 1, return deepClone(this.storeValue.value);
REQ_GET_ALL_DATA: -1 }
});
BI.MultiSelectInsertNoBarCombo.EVENT_CONFIRM = "EVENT_CONFIRM";
BI.MultiSelectInsertNoBarCombo.EVENT_ADD_ITEM = "EVENT_ADD_ITEM";
BI.shortcut("bi.multi_select_insert_no_bar_combo", BI.MultiSelectInsertNoBarCombo); populate() {
this._populate(...arguments);
this.numberCounter.populateSwitcher(...arguments);
}
}

190
src/widget/multiselect/multiselect.insert.trigger.js

@ -1,40 +1,55 @@
/** import {
* shortcut,
* 复选下拉框 extend,
* @class BI.MultiSelectInsertTrigger emptyFn,
* @extends BI.Trigger createWidget,
*/ Layout,
HTapeLayout,
BI.MultiSelectInsertTrigger = BI.inherit(BI.Trigger, { AbsoluteLayout
} from "@/core";
constants: { import { Trigger, Text } from "@/base";
height: 14, import { MultiSelectInsertSearcher } from "./trigger/searcher.multiselect.insert";
rgap: 4,
lgap: 4 @shortcut()
}, export class MultiSelectInsertTrigger extends Trigger {
static xtype = "bi.multi_select_insert_trigger";
_defaultConfig: function () {
return BI.extend(BI.MultiSelectInsertTrigger.superclass._defaultConfig.apply(this, arguments), { constants = { height: 14, rgap: 4, lgap: 4 };
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";
static EVENT_FOCUS = "EVENT_FOCUS";
static EVENT_BLUR = "EVENT_BLUR";
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-multi-select-trigger", baseCls: "bi-multi-select-trigger",
itemsCreator: BI.emptyFn, itemsCreator: emptyFn,
valueFormatter: BI.emptyFn, valueFormatter: emptyFn,
itemHeight: 24, itemHeight: 24,
searcher: {}, searcher: {},
switcher: {}, switcher: {},
adapter: null, adapter: null,
masker: {}, masker: {},
allowEdit: true allowEdit: true,
}); });
}, }
_init: function () { _init() {
BI.MultiSelectInsertTrigger.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this, o = this.options; const self = this,
o = this.options;
this.searcher = BI.createWidget(o.searcher, { this.searcher = createWidget(o.searcher, {
type: "bi.multi_select_insert_searcher", type: MultiSelectInsertSearcher.xtype,
height: o.height, height: o.height,
text: o.text, text: o.text,
defaultText: o.defaultText, defaultText: o.defaultText,
@ -46,113 +61,106 @@ BI.MultiSelectInsertTrigger = BI.inherit(BI.Trigger, {
popup: {}, popup: {},
adapter: o.adapter, adapter: o.adapter,
masker: o.masker, masker: o.masker,
value: o.value value: o.value,
});
this.searcher.on(BI.MultiSelectInsertSearcher.EVENT_START, function () {
self.fireEvent(BI.MultiSelectInsertTrigger.EVENT_START);
}); });
this.searcher.on(BI.MultiSelectInsertSearcher.EVENT_PAUSE, function () { this.searcher.on(MultiSelectInsertSearcher.EVENT_START, () => {
self.fireEvent(BI.MultiSelectInsertTrigger.EVENT_PAUSE); self.fireEvent(MultiSelectInsertTrigger.EVENT_START);
}); });
this.searcher.on(BI.MultiSelectInsertSearcher.EVENT_SEARCHING, function () { this.searcher.on(MultiSelectInsertSearcher.EVENT_PAUSE, () => {
self.fireEvent(BI.MultiSelectInsertTrigger.EVENT_SEARCHING, arguments); self.fireEvent(MultiSelectInsertTrigger.EVENT_PAUSE);
}); });
this.searcher.on(BI.MultiSelectInsertSearcher.EVENT_STOP, function () { this.searcher.on(
self.fireEvent(BI.MultiSelectInsertTrigger.EVENT_STOP); MultiSelectInsertSearcher.EVENT_SEARCHING,
function () {
self.fireEvent(
MultiSelectInsertTrigger.EVENT_SEARCHING,
arguments
);
}
);
this.searcher.on(MultiSelectInsertSearcher.EVENT_STOP, () => {
self.fireEvent(MultiSelectInsertTrigger.EVENT_STOP);
}); });
this.searcher.on(BI.MultiSelectInsertSearcher.EVENT_CHANGE, function () { this.searcher.on(MultiSelectInsertSearcher.EVENT_CHANGE, function () {
self.fireEvent(BI.MultiSelectInsertTrigger.EVENT_CHANGE, arguments); self.fireEvent(MultiSelectInsertTrigger.EVENT_CHANGE, arguments);
}); });
this.searcher.on(BI.MultiSelectInsertSearcher.EVENT_BLUR, function () { this.searcher.on(MultiSelectInsertSearcher.EVENT_BLUR, () => {
self.fireEvent(BI.MultiSelectInsertTrigger.EVENT_BLUR); self.fireEvent(MultiSelectInsertTrigger.EVENT_BLUR);
}); });
this.searcher.on(BI.MultiSelectInsertSearcher.EVENT_FOCUS, function () { this.searcher.on(MultiSelectInsertSearcher.EVENT_FOCUS, () => {
self.fireEvent(BI.MultiSelectInsertTrigger.EVENT_FOCUS); self.fireEvent(MultiSelectInsertTrigger.EVENT_FOCUS);
}); });
this.wrapNumberCounter = BI.createWidget({ this.wrapNumberCounter = createWidget({
type: "bi.layout" type: Layout.xtype,
}); });
this.wrapper = BI.createWidget({ this.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: this.wrapNumberCounter, el: this.wrapNumberCounter,
width: 0 width: 0,
}, { },
el: BI.createWidget(), {
width: 24 el: createWidget(),
width: 24,
} }
] ],
}); });
!o.allowEdit && BI.createWidget({ !o.allowEdit &&
type: "bi.absolute", createWidget({
type: AbsoluteLayout.xtype,
element: this, element: this,
items: [ items: [
{ {
el: { el: {
type: "bi.text", type: Text.xtype,
title: function () { title() {
return self.searcher.getState(); return self.searcher.getState();
} },
}, },
left: 0, left: 0,
right: 24, right: 24,
top: 0, top: 0,
bottom: 0 bottom: 0,
} }
] ],
}); });
}, }
/** refreshPlaceHolderWidth(width) {
* 重新调整numberCounter的空白占位符
*/
refreshPlaceHolderWidth: function (width) {
this.wrapper.attr("items")[1].width = width; this.wrapper.attr("items")[1].width = width;
this.wrapper.resize(); this.wrapper.resize();
}, }
getSearcher: function () { getSearcher() {
return this.searcher; return this.searcher;
}, }
stopEditing: function () { stopEditing() {
this.searcher.stopSearch(); this.searcher.stopSearch();
}, }
setAdapter: function (adapter) { setAdapter(adapter) {
this.searcher.setAdapter(adapter); this.searcher.setAdapter(adapter);
}, }
setValue: function (ob) { setValue(ob) {
this.searcher.setValue(ob); this.searcher.setValue(ob);
}, }
getKey: function () { getKey() {
return this.searcher.getKey(); return this.searcher.getKey();
}, }
getValue: function () { getValue() {
return this.searcher.getValue(); return this.searcher.getValue();
} }
}); }
BI.MultiSelectInsertTrigger.EVENT_TRIGGER_CLICK = "EVENT_TRIGGER_CLICK";
BI.MultiSelectInsertTrigger.EVENT_COUNTER_CLICK = "EVENT_COUNTER_CLICK";
BI.MultiSelectInsertTrigger.EVENT_CHANGE = "EVENT_CHANGE";
BI.MultiSelectInsertTrigger.EVENT_START = "EVENT_START";
BI.MultiSelectInsertTrigger.EVENT_STOP = "EVENT_STOP";
BI.MultiSelectInsertTrigger.EVENT_PAUSE = "EVENT_PAUSE";
BI.MultiSelectInsertTrigger.EVENT_SEARCHING = "EVENT_SEARCHING";
BI.MultiSelectInsertTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW = "EVENT_BEFORE_COUNTER_POPUPVIEW";
BI.MultiSelectInsertTrigger.EVENT_FOCUS = "EVENT_FOCUS";
BI.MultiSelectInsertTrigger.EVENT_BLUR = "EVENT_BLUR";
BI.shortcut("bi.multi_select_insert_trigger", BI.MultiSelectInsertTrigger);

262
src/widget/multiselect/multiselect.loader.js

@ -1,75 +1,107 @@
/** import {
* 多选加载数据面板 shortcut,
* Created by guy on 15/11/2. Widget,
* @class BI.MultiSelectLoader extend,
* @extends Widget emptyFn,
*/ createWidget,
BI.MultiSelectLoader = BI.inherit(BI.Widget, { isKey,
map,
_defaultConfig: function () { contains,
return BI.extend(BI.MultiSelectLoader.superclass._defaultConfig.apply(this, arguments), { remove,
Controller,
delay,
isNotNull,
Selection, Direction, LogicFactory, pushDistinct
} from "@/core";
import { SelectList, MultiSelectBar, MultiSelectItem } from "@/case";
import { MultiSelectInnerLoader } from "./loader";
@shortcut()
export class MultiSelectLoader extends Widget {
static xtype = "bi.multi_select_loader";
static EVENT_CHANGE = "EVENT_CHANGE";
_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,
itemFormatter: BI.emptyFn, itemFormatter: emptyFn,
onLoaded: BI.emptyFn, onLoaded: emptyFn,
itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
isDefaultInit: false, isDefaultInit: false,
}); });
}, }
_init: function () { _init() {
BI.MultiSelectLoader.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this, opts = this.options; const self = this,
var hasNext = false; opts = this.options;
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,
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 || BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, height:
iconWrapperWidth: 36 this.options.itemHeight ||
BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
iconWrapperWidth: 36,
}, },
el: BI.extend({ el: extend(
onLoaded: opts.onLoaded, {
el: { onLoaded: opts.onLoaded,
type: "bi.multi_select_inner_loader", el: {
isDefaultInit: opts.isDefaultInit, type: MultiSelectInnerLoader.xtype,
} isDefaultInit: opts.isDefaultInit,
}, opts.el), },
itemsCreator: function (op, callback) { },
var startValue = self._startValue; opts.el
self.storeValue && (op = BI.extend(op || {}, { ),
selectedValues: BI.isKey(startValue) && self.storeValue.type === BI.Selection.Multi itemsCreator(op, callback) {
? self.storeValue.value.concat(startValue) : self.storeValue.value const startValue = self._startValue;
self.storeValue &&
(op = extend(op || {}, {
selectedValues:
isKey(startValue) &&
self.storeValue.type === Selection.Multi
? self.storeValue.value.concat(startValue)
: self.storeValue.value,
})); }));
opts.itemsCreator(op, function (ob) { opts.itemsCreator(op, ob => {
hasNext = ob.hasNext; hasNext = ob.hasNext;
var firstItems = []; let firstItems = [];
if (op.times === 1 && self.storeValue) { if (op.times === 1 && self.storeValue) {
var json = BI.map(self.storeValue.value, function (i, v) { const json = map(self.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:
self.storeValue.type === Selection.Multi,
}; };
}); });
if (BI.isKey(self._startValue) && !BI.contains(self.storeValue.value, self._startValue)) { if (
var txt = opts.valueFormatter(startValue) || startValue; isKey(self._startValue) &&
!contains(self.storeValue.value, self._startValue)
) {
const txt =
opts.valueFormatter(startValue) || startValue;
json.unshift({ json.unshift({
text: txt, text: txt,
value: startValue, value: startValue,
@ -79,108 +111,134 @@ BI.MultiSelectLoader = BI.inherit(BI.Widget, {
} }
firstItems = self._createItems(json); firstItems = self._createItems(json);
} }
callback(firstItems.concat(self._createItems(ob.items)), ob.keyword || ""); callback(
firstItems.concat(self._createItems(ob.items)),
ob.keyword || ""
);
if (op.times === 1 && self.storeValue) { if (op.times === 1 && self.storeValue) {
BI.isKey(startValue) && (self.storeValue.type === BI.Selection.All ? BI.remove(self.storeValue.value, startValue) : BI.pushDistinct(self.storeValue.value, startValue)); isKey(startValue) &&
(self.storeValue.type === Selection.All
? remove(self.storeValue.value, startValue)
: pushDistinct(
self.storeValue.value,
startValue
));
self.setValue(self.storeValue); self.setValue(self.storeValue);
} }
(op.times === 1) && self._scrollToTop(); op.times === 1 && self._scrollToTop();
}); });
}, },
hasNext: function () { hasNext() {
return hasNext; return hasNext;
}, },
value: this.storeValue value: this.storeValue,
}); });
BI.createWidget(BI.extend({ createWidget(
element: this extend(
}, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Top), BI.extend({ {
scrolly: true, element: this,
vgap: 5 },
}, opts.logic, { LogicFactory.createLogic(
items: BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Top, this.button_group) LogicFactory.createLogicTypeByDirection(
})))); Direction.Top
this.button_group.on(BI.Controller.EVENT_CHANGE, function () { ),
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); extend(
{
scrolly: true,
vgap: 5,
},
opts.logic,
{
items: LogicFactory.createLogicItemsByDirection(
Direction.Top,
this.button_group
),
}
)
)
)
);
this.button_group.on(Controller.EVENT_CHANGE, function () {
self.fireEvent(Controller.EVENT_CHANGE, arguments);
}); });
this.button_group.on(BI.SelectList.EVENT_CHANGE, function () { this.button_group.on(SelectList.EVENT_CHANGE, function () {
self.fireEvent(BI.MultiSelectLoader.EVENT_CHANGE, arguments); self.fireEvent(MultiSelectLoader.EVENT_CHANGE, arguments);
}); });
}, }
_createItems: function (items) { _createItems(items) {
var allSelected = this.isAllSelected(); const allSelected = this.isAllSelected();
var itemFormatter = this.options.itemFormatter; const itemFormatter = this.options.itemFormatter;
return BI.map(items, (i, item) => {
return map(items, (i, item) => {
return { return {
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 || BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, height:
this.options.itemHeight ||
BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
selected: allSelected, selected: allSelected,
iconWrapperWidth: 36, iconWrapperWidth: 36,
...item, ...item,
...itemFormatter(item), ...itemFormatter(item),
}; };
}); });
}, }
_scrollToTop: function () { _scrollToTop() {
var self = this; const self = this;
BI.delay(function () { delay(() => {
self.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(...args) {
// arguments.length为0时对arguments[0]赋值后不同环境对其length的取值不同(nashorn) const items = args[0];
if (BI.isNotNull(items)) { if (isNotNull(items)) {
arguments[0] = this._createItems(items); args[0] = this._createItems(items);
} }
this.button_group.populate.apply(this.button_group, arguments); this.button_group.populate(...args);
}, }
resetHeight: function (h) { resetHeight(h) {
this.button_group.resetHeight(h - 10); this.button_group.resetHeight(h - 10);
}, }
resetWidth: function (w) { resetWidth(w) {
this.button_group.resetWidth(w); this.button_group.resetWidth(w);
} }
}); }
BI.MultiSelectLoader.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.multi_select_loader", BI.MultiSelectLoader);

315
src/widget/multiselect/multiselect.loader.nobar.js

@ -1,185 +1,242 @@
/** import {
* 多选加载数据面板 shortcut,
* Created by guy on 15/11/2. Widget,
* @class BI.MultiSelectNoBarLoader extend,
* @extends Widget emptyFn,
*/ createWidget,
BI.MultiSelectNoBarLoader = BI.inherit(BI.Widget, { isKey,
map,
_defaultConfig: function () { contains,
return BI.extend(BI.MultiSelectNoBarLoader.superclass._defaultConfig.apply(this, arguments), { remove,
Controller,
VerticalLayout,
delay,
isNotNull,
toPix,
Selection,
pushDistinct
} from "@/core";
import { ButtonGroup, Loader } from "@/base";
import { SelectList, ListPane, MultiSelectItem } from "@/case";
@shortcut()
export class MultiSelectNoBarLoader extends Widget {
static xtype = "bi.multi_select_no_bar_loader";
static EVENT_CHANGE = "EVENT_CHANGE";
_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,
itemFormatter: BI.emptyFn, itemFormatter: emptyFn,
}); });
}, }
_init: function () { _init() {
BI.MultiSelectNoBarLoader.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this, opts = this.options; const self = this,
var hasNext = false; opts = this.options;
let hasNext = false;
this.storeValue = opts.value || {}; this.storeValue = opts.value || {};
this._assertValue(this.storeValue); this._assertValue(this.storeValue);
this.button_group = BI.createWidget(BI.extend({ this.button_group = createWidget(
type: "bi.list_pane", extend(
onLoaded: opts.onLoaded, {
el: { type: ListPane.xtype,
type: "bi.loader", onLoaded: opts.onLoaded,
isDefaultInit: false, el: {
logic: { type: Loader.xtype,
dynamic: true, isDefaultInit: false,
scrolly: true logic: {
}, dynamic: true,
el: { scrolly: true,
chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI, },
behaviors: { el: {
redmark: function () { chooseType: ButtonGroup.CHOOSE_TYPE_MULTI,
return true; behaviors: {
} redmark() {
return true;
},
},
layouts: [
{
type: VerticalLayout.xtype,
}
],
},
}, },
layouts: [{ itemsCreator(op, callback) {
type: "bi.vertical" const startValue = self._startValue;
}] self.storeValue &&
} (op = extend(op || {}, {
}, selectedValues:
itemsCreator: function (op, callback) { isKey(startValue) &&
var startValue = self._startValue; self.storeValue.type === Selection.Multi
self.storeValue && (op = BI.extend(op || {}, { ? self.storeValue.value.concat(
selectedValues: BI.isKey(startValue) && self.storeValue.type === BI.Selection.Multi startValue
? self.storeValue.value.concat(startValue) : self.storeValue.value )
})); : self.storeValue.value,
opts.itemsCreator(op, function (ob) { }));
hasNext = ob.hasNext; opts.itemsCreator(op, ob => {
var firstItems = []; hasNext = ob.hasNext;
if (op.times === 1 && self.storeValue) { let firstItems = [];
var json = BI.map(self.storeValue.value, function (i, v) { if (op.times === 1 && self.storeValue) {
var txt = opts.valueFormatter(v) || v; const json = map(
return { self.storeValue.value,
text: txt, (i, v) => {
value: v, const txt = opts.valueFormatter(v) || v;
title: txt,
selected: self.storeValue.type === BI.Selection.Multi return {
}; text: txt,
value: v,
title: txt,
selected:
self.storeValue.type ===
Selection.Multi,
};
}
);
if (
isKey(self._startValue) &&
!contains(
self.storeValue.value,
self._startValue
)
) {
const txt =
opts.valueFormatter(startValue) ||
startValue;
json.unshift({
text: txt,
value: startValue,
title: txt,
selected: true,
});
}
firstItems = self._createItems(json);
}
callback(
firstItems.concat(self._createItems(ob.items)),
ob.keyword || ""
);
if (op.times === 1 && self.storeValue) {
isKey(startValue) &&
(self.storeValue.type === Selection.All
? remove(
self.storeValue.value,
startValue
)
: pushDistinct(
self.storeValue.value,
startValue
));
self.setValue(self.storeValue);
}
op.times === 1 && self._scrollToTop();
}); });
if (BI.isKey(self._startValue) && !BI.contains(self.storeValue.value, self._startValue)) { },
var txt = opts.valueFormatter(startValue) || startValue; hasNext() {
json.unshift({ return hasNext;
text: txt, },
value: startValue, value: this.storeValue,
title: txt, },
selected: true opts.el
}); )
} );
firstItems = self._createItems(json);
}
callback(firstItems.concat(self._createItems(ob.items)), ob.keyword || "");
if (op.times === 1 && self.storeValue) {
BI.isKey(startValue) && (self.storeValue.type === BI.Selection.All ? BI.remove(self.storeValue.value, startValue) : BI.pushDistinct(self.storeValue.value, startValue));
self.setValue(self.storeValue);
}
(op.times === 1) && self._scrollToTop();
});
},
hasNext: function () {
return hasNext;
},
value: this.storeValue
}, opts.el));
BI.createWidget({ createWidget({
type: "bi.vertical", type: VerticalLayout.xtype,
element: this, element: this,
items: [this.button_group], items: [this.button_group],
vgap: 5 vgap: 5,
}); });
this.button_group.on(BI.Controller.EVENT_CHANGE, function () { this.button_group.on(Controller.EVENT_CHANGE, function () {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); self.fireEvent(Controller.EVENT_CHANGE, arguments);
}); });
this.button_group.on(BI.SelectList.EVENT_CHANGE, function () { this.button_group.on(SelectList.EVENT_CHANGE, function () {
self.fireEvent(BI.MultiSelectNoBarLoader.EVENT_CHANGE, arguments); self.fireEvent(MultiSelectNoBarLoader.EVENT_CHANGE, arguments);
}); });
}, }
_createItems: function (items) { _createItems(items) {
return BI.map(items, (index, item) => { return map(items, (index, item) => {
return { return {
type: "bi.multi_select_item", type: MultiSelectItem.xtype,
cls: "bi-list-item-active", cls: "bi-list-item-active",
logic: this.options.logic, logic: this.options.logic,
height: this.options.itemHeight || BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, height:
this.options.itemHeight ||
BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
iconWrapperWidth: 36, iconWrapperWidth: 36,
...item, ...item,
...this.options.itemFormatter(item), ...this.options.itemFormatter(item),
}; };
}); });
}, }
_scrollToTop: function () { _scrollToTop() {
var self = this; const self = this;
BI.delay(function () { delay(() => {
self.button_group.element.scrollTop(0); self.button_group.element.scrollTop(0);
}, 30); }, 30);
}, }
_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.value); this.button_group.setValue(this.storeValue.value);
}, }
getValue: function () { getValue() {
return { return {
type: BI.Selection.Multi, type: Selection.Multi,
value: this.button_group.getValue() value: 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) {
this.button_group.element.css({ "max-height": BI.toPix(h) });
},
resetWidth: function () {
resetHeight(h) {
this.button_group.element.css({ "max-height": toPix(h) });
} }
});
BI.MultiSelectNoBarLoader.EVENT_CHANGE = "EVENT_CHANGE"; resetWidth() {
BI.shortcut("bi.multi_select_no_bar_loader", BI.MultiSelectNoBarLoader); }
}

133
src/widget/multiselect/multiselect.popup.view.js

@ -1,100 +1,113 @@
/** import {
* 带加载的多选下拉面板 shortcut,
* @class BI.MultiSelectPopupView Widget,
* @extends Widget extend,
*/ emptyFn,
BI.MultiSelectPopupView = BI.inherit(BI.Widget, { createWidget,
i18nText
_defaultConfig: function () { } from "@/core";
return BI.extend(BI.MultiSelectPopupView.superclass._defaultConfig.apply(this, arguments), { import { MultiPopupView } from "@/case";
import { MultiSelectLoader } from "./multiselect.loader";
@shortcut()
export class MultiSelectPopupView extends Widget {
static xtype = "bi.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,
itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
}); });
}, }
_init: function () { _init() {
BI.MultiSelectPopupView.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this, opts = this.options; const self = this,
opts = this.options;
this.loader = BI.createWidget({ this.loader = createWidget({
type: "bi.multi_select_loader", type: MultiSelectLoader.xtype,
itemsCreator: opts.itemsCreator, itemsCreator: opts.itemsCreator,
itemHeight: opts.itemHeight, itemHeight: opts.itemHeight,
valueFormatter: opts.valueFormatter, valueFormatter: opts.valueFormatter,
itemFormatter: opts.itemFormatter, itemFormatter: opts.itemFormatter,
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.MultiSelectPopupView.EVENT_CHANGE); self.fireEvent(MultiSelectPopupView.EVENT_CHANGE);
}); });
this.popupView.on(BI.MultiPopupView.EVENT_CLICK_TOOLBAR_BUTTON, function (index) { this.popupView.on(
switch (index) { MultiPopupView.EVENT_CLICK_TOOLBAR_BUTTON,
case 0: index => {
self.fireEvent(BI.MultiSelectPopupView.EVENT_CLICK_CLEAR); switch (index) {
break; case 0:
case 1: self.fireEvent(MultiSelectPopupView.EVENT_CLICK_CLEAR);
self.fireEvent(BI.MultiSelectPopupView.EVENT_CLICK_CONFIRM); break;
break; case 1:
self.fireEvent(
MultiSelectPopupView.EVENT_CLICK_CONFIRM
);
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.MultiSelectPopupView.EVENT_CHANGE = "EVENT_CHANGE";
BI.MultiSelectPopupView.EVENT_CLICK_CONFIRM = "EVENT_CLICK_CONFIRM";
BI.MultiSelectPopupView.EVENT_CLICK_CLEAR = "EVENT_CLICK_CLEAR";
BI.shortcut("bi.multi_select_popup_view", BI.MultiSelectPopupView);

127
src/widget/multiselect/multiselect.popup.view.nobar.js

@ -1,96 +1,109 @@
/** import {
* 带加载的多选下拉面板 shortcut,
* @class BI.MultiSelectPopupView Widget,
* @extends Widget extend,
*/ emptyFn,
BI.MultiSelectNoBarPopupView = BI.inherit(BI.Widget, { createWidget,
i18nText
} from "@/core";
import { MultiPopupView } from "@/case";
import { MultiSelectNoBarLoader } from "./multiselect.loader.nobar";
_defaultConfig: function () { @shortcut()
return BI.extend(BI.MultiSelectNoBarPopupView.superclass._defaultConfig.apply(this, arguments), { export class MultiSelectNoBarPopupView extends Widget {
static xtype = "bi.multi_select_no_bar_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,
itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
onLoaded: BI.emptyFn onLoaded: emptyFn,
}); });
}, }
_init: function () { _init() {
BI.MultiSelectNoBarPopupView.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this, opts = this.options; const self = this,
opts = this.options;
this.loader = BI.createWidget({ this.loader = createWidget({
type: "bi.multi_select_no_bar_loader", type: MultiSelectNoBarLoader.xtype,
itemsCreator: opts.itemsCreator, itemsCreator: opts.itemsCreator,
itemHeight: opts.itemHeight, itemHeight: opts.itemHeight,
valueFormatter: opts.valueFormatter, valueFormatter: opts.valueFormatter,
itemFormatter: opts.itemFormatter, itemFormatter: opts.itemFormatter,
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.MultiSelectNoBarPopupView.EVENT_CHANGE); self.fireEvent(MultiSelectNoBarPopupView.EVENT_CHANGE);
}); });
this.popupView.on(BI.MultiPopupView.EVENT_CLICK_TOOLBAR_BUTTON, function (index) { this.popupView.on(
switch (index) { MultiPopupView.EVENT_CLICK_TOOLBAR_BUTTON,
case 0: index => {
self.fireEvent(BI.MultiSelectNoBarPopupView.EVENT_CLICK_CLEAR); switch (index) {
break; case 0:
case 1: self.fireEvent(
self.fireEvent(BI.MultiSelectNoBarPopupView.EVENT_CLICK_CONFIRM); MultiSelectNoBarPopupView.EVENT_CLICK_CLEAR
break; );
break;
case 1:
self.fireEvent(
MultiSelectNoBarPopupView.EVENT_CLICK_CONFIRM
);
break;
}
} }
}); );
}, }
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.MultiSelectNoBarPopupView.EVENT_CHANGE = "EVENT_CHANGE";
BI.MultiSelectNoBarPopupView.EVENT_CLICK_CONFIRM = "EVENT_CLICK_CONFIRM";
BI.MultiSelectNoBarPopupView.EVENT_CLICK_CLEAR = "EVENT_CLICK_CLEAR";
BI.shortcut("bi.multi_select_no_bar_popup_view", BI.MultiSelectNoBarPopupView);

188
src/widget/multiselect/multiselect.trigger.js

@ -1,40 +1,56 @@
/** import {
* shortcut,
* 复选下拉框 extend,
* @class BI.MultiSelectTrigger emptyFn,
* @extends BI.Trigger createWidget,
*/ isFunction,
Layout,
BI.MultiSelectTrigger = BI.inherit(BI.Trigger, { HTapeLayout,
AbsoluteLayout
constants: { } from "@/core";
height: 14, import { Trigger, Text } from "@/base";
rgap: 4, import { MultiSelectSearcher } from "./trigger/searcher.multiselect";
lgap: 4
}, @shortcut()
export class MultiSelectTrigger extends Trigger {
_defaultConfig: function () { static xtype = "bi.multi_select_trigger";
return BI.extend(BI.MultiSelectTrigger.superclass._defaultConfig.apply(this, arguments), {
constants = { height: 14, rgap: 4, lgap: 4 };
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";
static EVENT_BLUR = "EVENT_BLUR";
static EVENT_FOCUS = "EVENT_FOCUS";
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
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: {},
allowEdit: true, allowEdit: true,
itemHeight: 24 itemHeight: 24,
}); });
}, }
_init: function () { _init() {
BI.MultiSelectTrigger.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this, o = this.options; const self = this,
o = this.options;
this.searcher = BI.createWidget(o.searcher, { this.searcher = createWidget(o.searcher, {
type: "bi.multi_select_searcher", type: MultiSelectSearcher.xtype,
height: o.height, height: o.height,
text: o.text, text: o.text,
defaultText: o.defaultText, defaultText: o.defaultText,
@ -46,125 +62,111 @@ BI.MultiSelectTrigger = BI.inherit(BI.Trigger, {
popup: {}, popup: {},
adapter: o.adapter, adapter: o.adapter,
masker: o.masker, masker: o.masker,
value: o.value value: o.value,
}); });
this.searcher.on(BI.MultiSelectSearcher.EVENT_START, function () { this.searcher.on(MultiSelectSearcher.EVENT_START, () => {
self.fireEvent(BI.MultiSelectTrigger.EVENT_START); self.fireEvent(MultiSelectTrigger.EVENT_START);
}); });
this.searcher.on(BI.MultiSelectSearcher.EVENT_PAUSE, function () { this.searcher.on(MultiSelectSearcher.EVENT_PAUSE, () => {
self.fireEvent(BI.MultiSelectTrigger.EVENT_PAUSE); self.fireEvent(MultiSelectTrigger.EVENT_PAUSE);
}); });
this.searcher.on(BI.MultiSelectSearcher.EVENT_SEARCHING, function () { this.searcher.on(MultiSelectSearcher.EVENT_SEARCHING, function () {
self.fireEvent(BI.MultiSelectTrigger.EVENT_SEARCHING, arguments); self.fireEvent(MultiSelectTrigger.EVENT_SEARCHING, arguments);
}); });
this.searcher.on(BI.MultiSelectSearcher.EVENT_STOP, function () { this.searcher.on(MultiSelectSearcher.EVENT_STOP, () => {
self.fireEvent(BI.MultiSelectTrigger.EVENT_STOP); self.fireEvent(MultiSelectTrigger.EVENT_STOP);
}); });
this.searcher.on(BI.MultiSelectSearcher.EVENT_CHANGE, function () { this.searcher.on(MultiSelectSearcher.EVENT_CHANGE, function () {
self.fireEvent(BI.MultiSelectTrigger.EVENT_CHANGE, arguments); self.fireEvent(MultiSelectTrigger.EVENT_CHANGE, arguments);
}); });
this.searcher.on(BI.MultiSelectSearcher.EVENT_BLUR, function () { this.searcher.on(MultiSelectSearcher.EVENT_BLUR, () => {
self.fireEvent(BI.MultiSelectTrigger.EVENT_BLUR); self.fireEvent(MultiSelectTrigger.EVENT_BLUR);
}); });
this.searcher.on(BI.MultiSelectSearcher.EVENT_FOCUS, function () { this.searcher.on(MultiSelectSearcher.EVENT_FOCUS, () => {
self.fireEvent(BI.MultiSelectTrigger.EVENT_FOCUS); self.fireEvent(MultiSelectTrigger.EVENT_FOCUS);
}); });
this.wrapNumberCounter = BI.createWidget({ this.wrapNumberCounter = createWidget({
type: "bi.layout" type: Layout.xtype,
}); });
this.wrapper = BI.createWidget({ this.wrapper = createWidget({
type: "bi.htape", type: HTapeLayout.xtype,
element: this, element: this,
items: [ items: [
{ {
el: this.searcher, el: this.searcher,
width: "fill", width: "fill",
rgap: 24 rgap: 24,
} }
] ],
}); });
!o.allowEdit && BI.createWidget({ !o.allowEdit &&
type: "bi.absolute", createWidget({
type: AbsoluteLayout.xtype,
element: this, element: this,
items: [ items: [
{ {
el: { el: {
type: "bi.text", type: Text.xtype,
title: function () { title() {
/** 修正REPORT-73699引入,需要考虑到传递过来的值是方法的情况 */ /** 修正REPORT-73699引入,需要考虑到传递过来的值是方法的情况 */
var state = self.searcher.getState(); const state = self.searcher.getState();
if (BI.isFunction(state)) { if (isFunction(state)) {
return state(); return state();
} }
return state; return state;
} },
}, },
left: 0, left: 0,
right: 24, right: 24,
top: 0, top: 0,
bottom: 0 bottom: 0,
} }
] ],
}); });
}, }
/** refreshPlaceHolderWidth(width) {
* 重新调整numberCounter的空白占位符
*/
refreshPlaceHolderWidth: function (width) {
this.wrapper.attr("items")[0].rgap = 24 + width; this.wrapper.attr("items")[0].rgap = 24 + width;
this.wrapper.resize(); this.wrapper.resize();
}, }
getSearcher: function () { getSearcher() {
return this.searcher; return this.searcher;
}, }
stopEditing: function () { stopEditing() {
this.searcher.stopSearch(); this.searcher.stopSearch();
}, }
setAdapter: function (adapter) { setAdapter(adapter) {
this.searcher.setAdapter(adapter); this.searcher.setAdapter(adapter);
}, }
setValue: function (ob) { setValue(ob) {
this.searcher.setValue(ob); this.searcher.setValue(ob);
}, }
getKey: function () { getKey() {
return this.searcher.getKey(); return this.searcher.getKey();
}, }
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.MultiSelectTrigger.EVENT_TRIGGER_CLICK = "EVENT_TRIGGER_CLICK";
BI.MultiSelectTrigger.EVENT_COUNTER_CLICK = "EVENT_COUNTER_CLICK";
BI.MultiSelectTrigger.EVENT_CHANGE = "EVENT_CHANGE";
BI.MultiSelectTrigger.EVENT_START = "EVENT_START";
BI.MultiSelectTrigger.EVENT_STOP = "EVENT_STOP";
BI.MultiSelectTrigger.EVENT_PAUSE = "EVENT_PAUSE";
BI.MultiSelectTrigger.EVENT_SEARCHING = "EVENT_SEARCHING";
BI.MultiSelectTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW = "EVENT_BEFORE_COUNTER_POPUPVIEW";
BI.MultiSelectTrigger.EVENT_BLUR = "EVENT_BLUR";
BI.MultiSelectTrigger.EVENT_FOCUS = "EVENT_FOCUS";
BI.shortcut("bi.multi_select_trigger", BI.MultiSelectTrigger);

142
src/widget/multiselect/search/multiselect.search.insert.pane.js

@ -1,99 +1,109 @@
/** import {
* shortcut,
* 在搜索框中输入文本弹出的面板 Widget,
* @class BI.MultiSelectSearchInsertPane extend,
* @extends Widget emptyFn,
*/ createWidget,
i18nText,
BI.MultiSelectSearchInsertPane = BI.inherit(BI.Widget, { Controller, VerticalFillLayout
} from "@/core";
constants: { import { Label } from "@/base";
height: 24, import { MultiSelectSearchLoader } from "./multiselect.search.loader";
lgap: 10,
tgap: 5 @shortcut()
}, export class MultiSelectSearchInsertPane extends Widget {
static xtype = "bi.multi_select_search_insert_pane";
_defaultConfig: function () {
return BI.extend(BI.MultiSelectSearchInsertPane.superclass._defaultConfig.apply(this, arguments), { constants = { height: 24, lgap: 10, tgap: 5 };
static EVENT_CHANGE = "EVENT_CHANGE";
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-multi-select-search-pane bi-card", baseCls: "bi-multi-select-search-pane bi-card",
itemsCreator: BI.emptyFn, itemsCreator: emptyFn,
valueFormatter: BI.emptyFn, valueFormatter: emptyFn,
keywordGetter: BI.emptyFn, keywordGetter: emptyFn,
itemHeight: 24 itemHeight: 24,
}); });
}, }
_init: function () { _init() {
BI.MultiSelectSearchInsertPane.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this, o = this.options; const self = this,
o = this.options;
this.addNotMatchTip = BI.createWidget({ this.addNotMatchTip = createWidget({
type: "bi.label", type: Label.xtype,
text: BI.i18nText("BI-Basic_Press_Enter_To_Add_Text", ""), text: i18nText("BI-Basic_Press_Enter_To_Add_Text", ""),
height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
cls: "bi-keyword-red-mark", cls: "bi-keyword-red-mark",
hgap: 5, hgap: 5,
}); });
this.loader = BI.createWidget({ this.loader = createWidget({
type: "bi.multi_select_search_loader", type: MultiSelectSearchLoader.xtype,
keywordGetter: o.keywordGetter, keywordGetter: o.keywordGetter,
valueFormatter: o.valueFormatter, valueFormatter: o.valueFormatter,
itemFormatter: o.itemFormatter, itemFormatter: o.itemFormatter,
itemsCreator: function (op, callback) { itemsCreator(op, callback) {
o.itemsCreator.apply(self, [op, function (res) { o.itemsCreator.apply(self, [
callback(res); op,
self.setKeyword(o.keywordGetter()); function (res) {
}]); callback(res);
self.setKeyword(o.keywordGetter());
}
]);
}, },
itemHeight: o.itemHeight, itemHeight: o.itemHeight,
value: o.value value: o.value,
}); });
this.loader.on(BI.Controller.EVENT_CHANGE, function () { this.loader.on(Controller.EVENT_CHANGE, function () {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); self.fireEvent(Controller.EVENT_CHANGE, arguments);
}); });
this.resizer = BI.createWidget({ this.resizer = createWidget({
type: "bi.vertical_fill", type: VerticalFillLayout.xtype,
rowSize: ["", "fill"], rowSize: ["", "fill"],
element: this, element: this,
items: [{ items: [
el: this.addNotMatchTip, {
}, { el: this.addNotMatchTip,
el: this.loader, },
}], {
el: this.loader,
}
],
}); });
}, }
setKeyword: function (keyword) { setKeyword(keyword) {
this.addNotMatchTip.setText(BI.i18nText("BI-Basic_Press_Enter_To_Add_Text", keyword)); this.addNotMatchTip.setText(
}, i18nText("BI-Basic_Press_Enter_To_Add_Text", keyword)
);
}
isAllSelected: function () { isAllSelected() {
return this.loader.isAllSelected(); return this.loader.isAllSelected();
}, }
hasMatched: function () { hasMatched() {
return false; return false;
}, }
setValue: function (v) { setValue(v) {
this.loader.setValue(v); this.loader.setValue(v);
}, }
getValue: function () { getValue() {
return this.loader.getValue(); return this.loader.getValue();
}, }
empty: function () { empty() {
this.loader.empty(); this.loader.empty();
},
populate: function (items) {
this.loader.populate.apply(this.loader, arguments);
} }
});
BI.MultiSelectSearchInsertPane.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.multi_select_search_insert_pane", BI.MultiSelectSearchInsertPane); populate(items) {
this.loader.populate(...arguments);
}
}

205
src/widget/multiselect/search/multiselect.search.loader.js

@ -1,136 +1,160 @@
/** import {
* 多选加载数据搜索loader面板 shortcut,
* Created by guy on 15/11/4. Widget,
* @class BI.MultiSelectSearchLoader extend,
* @extends Widget emptyFn,
*/ deepClone,
BI.MultiSelectSearchLoader = BI.inherit(BI.Widget, { createWidget,
i18nText,
_defaultConfig: function () { Controller,
return BI.extend(BI.MultiSelectSearchLoader.superclass._defaultConfig.apply(this, arguments), { VerticalLayout,
map,
isKey,
Func
} from "@/core";
import { ButtonGroup, Loader } from "@/base";
import { SelectList, MultiSelectBar, MultiSelectItem } from "@/case";
@shortcut()
export class MultiSelectSearchLoader extends Widget {
static xtype = "bi.multi_select_search_loader";
static EVENT_CHANGE = "EVENT_CHANGE";
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-multi-select-search-loader", baseCls: "bi-multi-select-search-loader",
itemsCreator: BI.emptyFn, itemsCreator: emptyFn,
keywordGetter: BI.emptyFn, keywordGetter: emptyFn,
valueFormatter: BI.emptyFn, valueFormatter: emptyFn,
itemFormatter: BI.emptyFn, itemFormatter: emptyFn,
itemHeight: 24 itemHeight: 24,
}); });
}, }
_init: function () { _init() {
BI.MultiSelectSearchLoader.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this, opts = this.options; const self = this,
var hasNext = false; opts = this.options;
this.storeValue = BI.deepClone(opts.value); let hasNext = false;
this.button_group = BI.createWidget({ this.storeValue = deepClone(opts.value);
type: "bi.select_list", this.button_group = createWidget({
type: SelectList.xtype,
toolbar: { toolbar: {
type: "bi.multi_select_bar", type: MultiSelectBar.xtype,
cls: "bi-list-item-active", cls: "bi-list-item-active",
iconWrapperWidth: 36 iconWrapperWidth: 36,
}, },
element: this, element: this,
logic: { logic: {
dynamic: false dynamic: false,
}, },
value: opts.value, value: opts.value,
el: { el: {
tipText: BI.i18nText("BI-No_Select"), tipText: i18nText("BI-No_Select"),
el: { el: {
type: "bi.loader", type: Loader.xtype,
isDefaultInit: false, isDefaultInit: false,
logic: { logic: {
dynamic: true, dynamic: true,
scrolly: true scrolly: true,
}, },
el: { el: {
chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI, chooseType: ButtonGroup.CHOOSE_TYPE_MULTI,
behaviors: { behaviors: {
redmark: function () { redmark() {
return true; return true;
} },
}, },
layouts: [ layouts: [
{ {
type: "bi.vertical" type: VerticalLayout.xtype,
} }
] ],
} },
} },
}, },
itemsCreator: function (op, callback) { itemsCreator(op, callback) {
self.storeValue && (op = BI.extend(op || {}, { self.storeValue &&
selectedValues: self.storeValue.value (op = extend(op || {}, {
selectedValues: self.storeValue.value,
})); }));
opts.itemsCreator(op, function (ob) { opts.itemsCreator(op, ob => {
var keyword = ob.keyword = opts.keywordGetter(); const keyword = (ob.keyword = opts.keywordGetter());
hasNext = ob.hasNext; hasNext = ob.hasNext;
var firstItems = []; let firstItems = [];
if (op.times === 1 && self.storeValue) { if (op.times === 1 && self.storeValue) {
var json = self._filterValues(self.storeValue); const json = self._filterValues(self.storeValue);
firstItems = self._createItems(json); firstItems = self._createItems(json);
} }
var context = { const context = {
tipText: ob.tipText, tipText: ob.tipText,
}; };
callback(firstItems.concat(self._createItems(ob.items)), keyword, context); callback(
firstItems.concat(self._createItems(ob.items)),
keyword,
context
);
if (op.times === 1 && self.storeValue) { if (op.times === 1 && self.storeValue) {
self.setValue(self.storeValue); self.setValue(self.storeValue);
} }
}); });
}, },
hasNext: function () { hasNext() {
return hasNext; return hasNext;
} },
}); });
this.button_group.on(BI.Controller.EVENT_CHANGE, function () { this.button_group.on(Controller.EVENT_CHANGE, function () {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); self.fireEvent(Controller.EVENT_CHANGE, arguments);
}); });
this.button_group.on(BI.SelectList.EVENT_CHANGE, function () { this.button_group.on(SelectList.EVENT_CHANGE, function () {
self.fireEvent(BI.MultiSelectSearchLoader.EVENT_CHANGE, arguments); self.fireEvent(MultiSelectSearchLoader.EVENT_CHANGE, arguments);
}); });
}, }
_createItems(items) {
const allSelected = this.isAllSelected();
const itemFormatter = this.options.itemFormatter;
_createItems: function (items) { return map(items, (index, item) => {
var allSelected = this.isAllSelected();
var itemFormatter = this.options.itemFormatter;
return BI.map(items, (index, item) => {
return { return {
type: "bi.multi_select_item", type: MultiSelectItem.xtype,
logic: { logic: {
dynamic: false dynamic: false,
}, },
height: this.options.itemHeight || BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, height:
this.options.itemHeight ||
BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
selected: allSelected, selected: allSelected,
cls: "bi-list-item-active", cls: "bi-list-item-active",
iconWrapperWidth: 36, iconWrapperWidth: 36,
...item, ...item,
...itemFormatter(item) ...itemFormatter(item),
}; };
}); });
}, }
isAllSelected: function () { isAllSelected() {
return this.button_group.isAllSelected(); return this.button_group.isAllSelected();
}, }
_filterValues: function (src) { _filterValues(src) {
var o = this.options; const o = this.options;
var keyword = o.keywordGetter(); const keyword = o.keywordGetter();
var values = BI.deepClone(src.value) || []; let values = deepClone(src.value) || [];
var newValues = BI.map(values, function (i, v) { const newValues = map(values, (i, v) => {
return { return {
text: o.valueFormatter(v) || v, text: o.valueFormatter(v) || v,
value: v, value: v,
}; };
}); });
if (BI.isKey(keyword)) { if (isKey(keyword)) {
var search = BI.Func.getSearchResult(newValues, keyword); const search = Func.getSearchResult(newValues, keyword);
values = search.match.concat(search.find); values = search.match.concat(search.find);
} }
return BI.map(values, function (i, v) {
return map(values, (i, v) => {
return { return {
text: v.text, text: v.text,
title: v.text, title: v.text,
@ -139,38 +163,35 @@ BI.MultiSelectSearchLoader = BI.inherit(BI.Widget, {
...o.itemFormatter(v), ...o.itemFormatter(v),
}; };
}); });
}, }
setValue: function (v) { setValue(v) {
// 暂存的值一定是新的值,不然v改掉后,storeValue也跟着改了 // 暂存的值一定是新的值,不然v改掉后,storeValue也跟着改了
this.storeValue = BI.deepClone(v); this.storeValue = deepClone(v);
this.button_group.setValue(v); this.button_group.setValue(v);
}, }
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) {
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.MultiSelectSearchLoader.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.multi_select_search_loader", BI.MultiSelectSearchLoader);

120
src/widget/multiselect/search/multiselect.search.pane.js

@ -1,86 +1,92 @@
/** import {
* shortcut,
* 在搜索框中输入文本弹出的面板 Widget,
* @class BI.MultiSelectSearchPane extend,
* @extends Widget emptyFn,
*/ createWidget,
Controller,
AbsoluteLayout
} from "@/core";
import { MultiSelectSearchLoader } from "./multiselect.search.loader";
BI.MultiSelectSearchPane = BI.inherit(BI.Widget, { @shortcut()
export class MultiSelectSearchPane extends Widget {
static xtype = "bi.multi_select_search_pane";
constants: { constants = { height: 24, lgap: 10, tgap: 5 };
height: 24,
lgap: 10,
tgap: 5
},
_defaultConfig: function () { static EVENT_CHANGE = "EVENT_CHANGE";
return BI.extend(BI.MultiSelectSearchPane.superclass._defaultConfig.apply(this, arguments), {
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-multi-select-search-pane bi-card", baseCls: "bi-multi-select-search-pane bi-card",
itemsCreator: BI.emptyFn, itemsCreator: emptyFn,
valueFormatter: BI.emptyFn, valueFormatter: emptyFn,
keywordGetter: BI.emptyFn, keywordGetter: emptyFn,
itemHeight: 24, itemHeight: 24,
}); });
}, }
_init: function () { _init() {
BI.MultiSelectSearchPane.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this, o = this.options; const self = this,
o = this.options;
this.loader = BI.createWidget({ this.loader = createWidget({
type: "bi.multi_select_search_loader", type: MultiSelectSearchLoader.xtype,
keywordGetter: o.keywordGetter, keywordGetter: o.keywordGetter,
valueFormatter: o.valueFormatter, valueFormatter: o.valueFormatter,
itemFormatter: o.itemFormatter, itemFormatter: o.itemFormatter,
itemsCreator: function (op, callback) { itemsCreator(op, callback) {
o.itemsCreator.apply(self, [op, function (res) { o.itemsCreator.apply(self, [
callback(res); op,
}]); function (res) {
callback(res);
}
]);
}, },
itemHeight: o.itemHeight, itemHeight: o.itemHeight,
value: o.value value: o.value,
}); });
this.loader.on(BI.Controller.EVENT_CHANGE, function () { this.loader.on(Controller.EVENT_CHANGE, function () {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); self.fireEvent(Controller.EVENT_CHANGE, arguments);
}); });
this.resizer = BI.createWidget({ this.resizer = createWidget({
type: "bi.absolute", type: AbsoluteLayout.xtype,
element: this, element: this,
items: [{ items: [
el: this.loader, {
left: 0, el: this.loader,
right: 0, left: 0,
bottom: 0, right: 0,
top: 0, bottom: 0,
}], top: 0,
}
],
}); });
}, }
isAllSelected: function () { isAllSelected() {
return this.loader.isAllSelected(); return this.loader.isAllSelected();
}, }
hasMatched: function () { hasMatched() {
}, }
setValue: function (v) { setValue(v) {
this.loader.setValue(v); this.loader.setValue(v);
}, }
getValue: function () { getValue() {
return this.loader.getValue(); return this.loader.getValue();
}, }
empty: function () { empty() {
this.loader.empty(); this.loader.empty();
},
populate: function (items) {
this.loader.populate.apply(this.loader, arguments);
} }
});
BI.MultiSelectSearchPane.EVENT_CHANGE = "EVENT_CHANGE"; populate(items) {
this.loader.populate(...arguments);
BI.shortcut("bi.multi_select_search_pane", BI.MultiSelectSearchPane); }
}

150
src/widget/multiselect/trigger/button.checkselected.js

@ -1,102 +1,124 @@
/** import {
* 查看已选按钮 shortcut,
* Created by guy on 15/11/3. extend,
* @class BI.MultiSelectCheckSelectedButton emptyFn,
* @extends BI.Single createWidget,
*/ Controller,
BI.MultiSelectCheckSelectedButton = BI.inherit(BI.Single, { i18nText,
isNotNull,
isNotEmptyString,
nextTick,
Selection
} from "@/core";
import { Single, TextButton } from "@/base";
import { MultiSelectCombo } from "../multiselect.combo";
_defaultConfig: function () { @shortcut()
return BI.extend(BI.MultiSelectCheckSelectedButton.superclass._defaultConfig.apply(this, arguments), { export class MultiSelectCheckSelectedButton extends Single {
static xtype = "bi.multi_select_check_selected_button";
static EVENT_CHANGE = "EVENT_CHANGE";
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-multi-select-check-selected-button", baseCls: "bi-multi-select-check-selected-button",
itemsCreator: BI.emptyFn itemsCreator: emptyFn,
}); });
}, }
_init: function () { _init() {
BI.MultiSelectCheckSelectedButton.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this, o = this.options; const self = this,
this.numberCounter = BI.createWidget({ o = this.options;
type: "bi.text_button", this.numberCounter = createWidget({
type: TextButton.xtype,
element: this, element: this,
hgap: 4, hgap: 4,
text: "0", text: "0",
textAlign: "center", textAlign: "center",
textHeight: 16, textHeight: 16,
cls: "bi-high-light-background count-tip" cls: "bi-high-light-background count-tip",
}); });
this.numberCounter.on(BI.Controller.EVENT_CHANGE, function () { this.numberCounter.on(Controller.EVENT_CHANGE, function () {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); self.fireEvent(Controller.EVENT_CHANGE, arguments);
}); });
this.numberCounter.on(BI.TextButton.EVENT_CHANGE, function () { this.numberCounter.on(TextButton.EVENT_CHANGE, function () {
self.fireEvent(BI.MultiSelectCheckSelectedButton.EVENT_CHANGE, arguments); self.fireEvent(
MultiSelectCheckSelectedButton.EVENT_CHANGE,
arguments
);
}); });
this.numberCounter.element.hover(function () { this.numberCounter.element.hover(
self.numberCounter.setTag(self.numberCounter.getText()); () => {
self.numberCounter.setText(BI.i18nText("BI-Check_Selected")); self.numberCounter.setTag(self.numberCounter.getText());
}, function () { self.numberCounter.setText(i18nText("BI-Check_Selected"));
self.numberCounter.setText(self.numberCounter.getTag()); },
}); () => {
self.numberCounter.setText(self.numberCounter.getTag());
}
);
this.setVisible(false); this.setVisible(false);
if (BI.isNotNull(o.value)) { if (isNotNull(o.value)) {
this.setValue(o.value); this.setValue(o.value);
} }
}, }
_populate: function (ob) { _populate(ob) {
var self = this, o = this.options; const self = this,
if (ob.type === BI.Selection.All) { o = this.options;
o.itemsCreator({ if (ob.type === Selection.All) {
type: BI.MultiSelectCombo.REQ_GET_DATA_LENGTH o.itemsCreator(
}, function (res) { {
if (self.options.value.type !== BI.Selection.All) { type: MultiSelectCombo.REQ_GET_DATA_LENGTH,
return; },
} res => {
if (BI.isNotEmptyString(res.count)) { if (self.options.value.type !== Selection.All) {
BI.nextTick(function () { return;
self.numberCounter.setText(res.count); }
self.setVisible(true); if (isNotEmptyString(res.count)) {
}); nextTick(() => {
self.numberCounter.setText(res.count);
self.setVisible(true);
});
return; return;
}
const length = res.count - ob.value.length;
nextTick(() => {
self.numberCounter.setText(length);
self.setVisible(length > 0);
});
} }
var length = res.count - ob.value.length; );
BI.nextTick(function () {
self.numberCounter.setText(length);
self.setVisible(length > 0);
});
});
return; return;
} }
BI.nextTick(function () { nextTick(() => {
self.numberCounter.setText(ob.value.length); self.numberCounter.setText(ob.value.length);
self.setVisible(ob.value.length > 0); self.setVisible(ob.value.length > 0);
}); });
}, }
_assertValue: function (ob) { _assertValue(ob) {
ob || (ob = {}); ob || (ob = {});
ob.type || (ob.type = BI.Selection.Multi); ob.type || (ob.type = BI.Selection.Multi);
ob.value || (ob.value = []); ob.value || (ob.value = []);
return ob; return ob;
}, }
setValue: function (ob) { setValue(ob) {
ob = this._assertValue(ob); ob = this._assertValue(ob);
this.options.value = ob; this.options.value = ob;
this._populate(ob); this._populate(ob);
}, }
populate: function () { populate() {
this._populate(this._assertValue(this.options.value)); this._populate(this._assertValue(this.options.value));
},
getValue: function () {
} }
});
BI.MultiSelectCheckSelectedButton.EVENT_CHANGE = "EVENT_CHANGE"; getValue() {
BI.shortcut("bi.multi_select_check_selected_button", BI.MultiSelectCheckSelectedButton); }
}

124
src/widget/multiselect/trigger/editor.multiselect.js

@ -1,24 +1,38 @@
/** import {
* 多选输入框 shortcut,
* Created by guy on 15/11/3. Widget,
* @class BI.MultiSelectEditor extend,
* @extends Widget i18nText,
*/ createWidget,
BI.MultiSelectEditor = BI.inherit(BI.Widget, { Controller,
isEmptyString,
_defaultConfig: function () { isEmptyArray
return BI.extend(BI.MultiSelectEditor.superclass._defaultConfig.apply(this, arguments), { } from "@/core";
import { StateEditor } from "@/case";
import { SelectPatchEditor } from "./editor/editor.patch";
@shortcut()
export class MultiSelectEditor extends Widget {
static xtype = "bi.multi_select_editor";
static EVENT_FOCUS = "EVENT_FOCUS";
static EVENT_BLUR = "EVENT_BLUR";
static EVENT_PAUSE = "EVENT_PAUSE";
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-multi-select-editor", baseCls: "bi-multi-select-editor",
el: {}, el: {},
watermark: BI.i18nText("BI-Basic_Search") watermark: i18nText("BI-Basic_Search"),
}); });
}, }
_init: function () { _init() {
BI.MultiSelectEditor.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this, o = this.options; const self = this,
this.editor = BI.createWidget(o.el, { o = this.options;
type: "bi.select_patch_editor", this.editor = createWidget(o.el, {
type: SelectPatchEditor.xtype,
element: this, element: this,
height: o.height, height: o.height,
watermark: o.watermark, watermark: o.watermark,
@ -30,49 +44,49 @@ BI.MultiSelectEditor = BI.inherit(BI.Widget, {
warningTitle: o.warningTitle, warningTitle: o.warningTitle,
}); });
this.editor.on(BI.Controller.EVENT_CHANGE, function () { this.editor.on(Controller.EVENT_CHANGE, function () {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); self.fireEvent(Controller.EVENT_CHANGE, arguments);
}); });
this.editor.on(BI.StateEditor.EVENT_FOCUS, function () { this.editor.on(StateEditor.EVENT_FOCUS, () => {
self.fireEvent(BI.MultiSelectEditor.EVENT_FOCUS); self.fireEvent(MultiSelectEditor.EVENT_FOCUS);
}); });
this.editor.on(BI.StateEditor.EVENT_BLUR, function () { this.editor.on(StateEditor.EVENT_BLUR, () => {
self.fireEvent(BI.MultiSelectEditor.EVENT_BLUR); self.fireEvent(MultiSelectEditor.EVENT_BLUR);
}); });
}, }
focus: function () { focus() {
this.editor.focus(); this.editor.focus();
}, }
blur: function () { blur() {
this.editor.blur(); this.editor.blur();
}, }
setState: function (state) { setState(state) {
this.editor.setState(state); this.editor.setState(state);
}, }
setValue: function (v) { setValue(v) {
this.editor.setValue(v); this.editor.setValue(v);
}, }
setTipType: function (v) { setTipType(v) {
this.editor.setTipType(v); this.editor.setTipType(v);
}, }
getValue: function () { getValue() {
return this.editor.getValue(); return this.editor.getValue();
}, }
getState: function () { getState() {
return this.editor.getText(); return this.editor.getText();
}, }
getKeywords: function () { getKeywords() {
var val = this.editor.getValue(); const val = this.editor.getValue();
var keywords = val.split(/\u200b\s\u200b/); let keywords = val.split(/\u200b\s\u200b/);
if (BI.isEmptyString(keywords[keywords.length - 1])) { if (isEmptyString(keywords[keywords.length - 1])) {
keywords = keywords.slice(0, keywords.length - 1); keywords = keywords.slice(0, keywords.length - 1);
} }
if (/\u200b\s\u200b$/.test(val)) { if (/\u200b\s\u200b$/.test(val)) {
@ -80,27 +94,19 @@ BI.MultiSelectEditor = BI.inherit(BI.Widget, {
} }
return keywords; return keywords;
}, }
getKeyword: function () { getKeyword() {
var val = this.editor.getValue(); const val = this.editor.getValue();
var keywords = val.split(/\u200b\s\u200b/); let keywords = val.split(/\u200b\s\u200b/);
if (BI.isEmptyString(keywords[keywords.length - 1])) { if (isEmptyString(keywords[keywords.length - 1])) {
keywords = keywords.slice(0, keywords.length - 1); keywords = keywords.slice(0, keywords.length - 1);
} }
return BI.isEmptyArray(keywords) ? "" : keywords[keywords.length - 1];
},
populate: function (items) { return isEmptyArray(keywords) ? "" : keywords[keywords.length - 1];
}
},
setWaterMark: function (v) { setWaterMark(v) {
this.editor.setWaterMark(v); this.editor.setWaterMark(v);
} }
}); }
BI.MultiSelectEditor.EVENT_FOCUS = "EVENT_FOCUS";
BI.MultiSelectEditor.EVENT_BLUR = "EVENT_BLUR";
BI.MultiSelectEditor.EVENT_PAUSE = "EVENT_PAUSE";
BI.shortcut("bi.multi_select_editor", BI.MultiSelectEditor);

324
src/widget/multiselect/trigger/editor/editor.patch.js

@ -1,214 +1,248 @@
/** import {
* @author windy shortcut,
* @version 2.0 Widget,
* Created by windy on 2021/5/18 debounce,
*/ bind,
BI.SelectPatchEditor = BI.inherit(BI.Widget, { extend,
Controller,
props: { contains,
baseCls: "bi-patch-select-editor", isKey,
height: 24, Events,
}, trim, replaceAll
} from "@/core";
render: function () { import { Editor, TextAreaEditor } from "@/base";
var self = this, o = this.options; import { StateEditor } from "@/case";
var debounceInputChange = BI.debounce(BI.bind(this._dealChange, this), 300); @shortcut()
export class SelectPatchEditor extends Widget {
return BI.extend({ static xtype = "bi.select_patch_editor";
type: "bi.state_editor",
ref: function (_ref) { props = { baseCls: "bi-patch-select-editor", height: 24 };
self.editor = _ref;
}, static EVENT_CHANGE = "EVENT_CHANGE";
hgap: o.hgap, static EVENT_FOCUS = "EVENT_FOCUS";
vgap: o.vgap, static EVENT_BLUR = "EVENT_BLUR";
lgap: o.lgap,
rgap: o.rgap, render() {
tgap: o.tgap, const self = this,
bgap: o.bgap, o = this.options;
height: o.height,
watermark: o.watermark, const debounceInputChange = debounce(bind(this._dealChange, this), 300);
allowBlank: true,
value: o.value, return extend(
defaultText: o.defaultText, {
text: o.text, type: StateEditor.xtype,
tipType: o.tipType, ref(_ref) {
warningTitle: o.warningTitle, self.editor = _ref;
el: {
type: 'bi.textarea_editor',
scrolly: false,
validationChecker: function () {
return true;
}, },
throttle: true, hgap: o.hgap,
}, vgap: o.vgap,
listeners: [{ lgap: o.lgap,
eventName: BI.Controller.EVENT_CHANGE, rgap: o.rgap,
action: function (type, v) { tgap: o.tgap,
if (BI.contains(v, "\n")) { bgap: o.bgap,
self._dealChange(type, v); height: o.height,
} else { watermark: o.watermark,
debounceInputChange(type, v); allowBlank: true,
} value: o.value,
defaultText: o.defaultText,
text: o.text,
tipType: o.tipType,
warningTitle: o.warningTitle,
el: {
type: TextAreaEditor.xtype,
scrolly: false,
validationChecker() {
return true;
},
throttle: true,
}, },
}, { listeners: [
eventName: BI.Editor.EVENT_KEY_DOWN, {
action: function (keyCode) { eventName: Controller.EVENT_CHANGE,
if (keyCode === BI.KeyCode.ENTER) { action(type, v) {
self._clearSplitValue(); if (contains(v, "\n")) {
self._dealChange(type, v);
} else {
debounceInputChange(type, v);
}
},
},
{
eventName: Editor.EVENT_KEY_DOWN,
action(keyCode) {
if (keyCode === BI.KeyCode.ENTER) {
self._clearSplitValue();
}
},
},
{
eventName: Editor.EVENT_FOCUS,
action() {
self.fireEvent(
SelectPatchEditor.EVENT_FOCUS,
arguments
);
},
},
{
eventName: Editor.EVENT_BLUR,
action() {
self._start = false;
self.fireEvent(
SelectPatchEditor.EVENT_BLUR,
arguments
);
},
} }
}, ],
}, { },
eventName: BI.Editor.EVENT_FOCUS, o.el
action: function () { );
self.fireEvent(BI.SelectPatchEditor.EVENT_FOCUS, arguments); }
},
}, {
eventName: BI.Editor.EVENT_BLUR,
action: function () {
self._start = false;
self.fireEvent(BI.SelectPatchEditor.EVENT_BLUR, arguments);
},
}],
}, o.el);
},
_clearSplitValue: function () { _clearSplitValue() {
this.editor.setValue(""); this.editor.setValue("");
}, }
_dealChange: function (type, v) { _dealChange(type, v) {
var value = ""; let value = "";
if (v !== this.editor.getValue()) { if (v !== this.editor.getValue()) {
return; return;
} }
if (BI.isKey(v)) { if (isKey(v)) {
value = this._formatText(v); value = this._formatText(v);
} }
if (type === BI.Events.CHANGE) { if (type === Events.CHANGE) {
this._setValue(value); this._setValue(value);
if (this._trimValue(value) !== "") { if (this._trimValue(value) !== "") {
if (!this._start || !BI.isKey(this._lastValue) || (this._pause === true && this._trimValue(this._lastValue) !== this._trimValue(value))) { if (
!this._start ||
!isKey(this._lastValue) ||
(this._pause === true &&
this._trimValue(this._lastValue) !==
this._trimValue(value))
) {
this._start = true; this._start = true;
this._pause = false; this._pause = false;
this.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.STARTEDIT, this.getValue(), this); this.fireEvent(
Controller.EVENT_CHANGE,
Events.STARTEDIT,
this.getValue(),
this
);
} }
} }
if (this._trimValue(this._lastValue) !== this._trimValue(value)) { if (this._trimValue(this._lastValue) !== this._trimValue(value)) {
this.fireEvent(BI.Controller.EVENT_CHANGE, arguments); this.fireEvent(Controller.EVENT_CHANGE, arguments);
} }
if (BI.endWith(value, BI.BlankSplitChar)) { if (BI.endWith(value, BI.BlankSplitChar)) {
this._pause = true; this._pause = true;
this.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.PAUSE, "", this); this.fireEvent(Controller.EVENT_CHANGE, Events.PAUSE, "", this);
} }
} }
if (type === BI.Events.EMPTY || type === BI.Events.STOPEDIT) { if (type === Events.EMPTY || type === Events.STOPEDIT) {
this.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.EMPTY); this.fireEvent(Controller.EVENT_CHANGE, Events.EMPTY);
} }
this._lastValue = value; this._lastValue = value;
}, }
_trimValue: function (v) { _trimValue(v) {
return BI.trim(BI.replaceAll(v || "", BI.BlankSplitChar, "")); return trim(replaceAll(v || "", BI.BlankSplitChar, ""));
}, }
_formatText: function (v) { _formatText(v) {
return BI.replaceAll(v || "", "\n", BI.BlankSplitChar); return replaceAll(v || "", "\n", BI.BlankSplitChar);
}, }
setWaterMark: function (v) { setWaterMark(v) {
this.editor.setWaterMark(v); this.editor.setWaterMark(v);
}, }
doRedMark: function () { doRedMark() {
this.editor.doRedMark.apply(this.editor, arguments); this.editor.doRedMark(...arguments);
}, }
unRedMark: function () { unRedMark() {
this.editor.unRedMark.apply(this.editor, arguments); this.editor.unRedMark(...arguments);
}, }
doHighLight: function () { doHighLight() {
this.editor.doHighLight.apply(this.editor, arguments); this.editor.doHighLight(...arguments);
}, }
unHighLight: function () { unHighLight() {
this.text.unHighLight.apply(this.text, arguments); this.text.unHighLight(...arguments);
}, }
focus: function () { focus() {
this.editor.focus(); this.editor.focus();
}, }
blur: function () { blur() {
this.editor.blur(); this.editor.blur();
}, }
_setValue: function (v) { _setValue(v) {
this.editor.setValue(this._formatText(v)); this.editor.setValue(this._formatText(v));
}, }
_showInput: function () { _showInput() {
this.editor.visible(); this.editor.visible();
this.text.invisible(); this.text.invisible();
}, }
_showHint: function () { _showHint() {
this.editor.invisible(); this.editor.invisible();
this.text.visible(); this.text.visible();
}, }
isValid: function () { isValid() {
return this.editor.isValid(); return this.editor.isValid();
}, }
setErrorText: function (text) { setErrorText(text) {
this.editor.setErrorText(text); this.editor.setErrorText(text);
}, }
getErrorText: function () { getErrorText() {
return this.editor.getErrorText(); return this.editor.getErrorText();
}, }
isEditing: function () { isEditing() {
return this.editor.isEditing(); return this.editor.isEditing();
}, }
getLastValidValue: function () { getLastValidValue() {
return this.editor.getLastValidValue(); return this.editor.getLastValidValue();
}, }
getLastChangedValue: function () { getLastChangedValue() {
return this.editor.getLastChangedValue(); return this.editor.getLastChangedValue();
}, }
setValue: function (v) { setValue(v) {
this._setValue(v); this._setValue(v);
this._lastValue = this._trimValue(v); this._lastValue = this._trimValue(v);
}, }
getValue: function () { getValue() {
return BI.trim(this.editor.getValue()); return trim(this.editor.getValue());
}, }
getState: function () { getState() {
return this.editor.getState(); return this.editor.getState();
}, }
setState: function (v) { setState(v) {
this.editor.setState(v); this.editor.setState(v);
}, }
setTipType: function (v) { setTipType(v) {
this.editor.setTipType(v); this.editor.setTipType(v);
}, }
getText: function () { getText() {
return this.editor.getText(); return this.editor.getText();
}, }
}); }
BI.SelectPatchEditor.EVENT_CHANGE = "EVENT_CHANGE";
BI.SelectPatchEditor.EVENT_FOCUS = "EVENT_FOCUS";
BI.SelectPatchEditor.EVENT_BLUR = "EVENT_BLUR";
BI.shortcut("bi.select_patch_editor", BI.SelectPatchEditor);

277
src/widget/multiselect/trigger/searcher.multiselect.insert.js

@ -1,161 +1,196 @@
/** import {
* searcher shortcut,
* Created by guy on 15/11/3. Widget,
* @class BI.MultiSelectInsertSearcher extend,
* @extends Widget emptyFn,
*/ i18nText,
BI.MultiSelectInsertSearcher = BI.inherit(BI.Widget, { createWidget,
isNotNull,
_defaultConfig: function () { isEmptyArray,
return BI.extend(BI.MultiSelectInsertSearcher.superclass._defaultConfig.apply(this, arguments), { size,
each
} from "@/core";
import { MultiSelectEditor } from "./editor.multiselect";
import { Searcher } from "@/base";
import { MultiSelectSearchInsertPane } from "../search/multiselect.search.insert.pane";
@shortcut()
export class MultiSelectInsertSearcher extends Widget {
static xtype = "bi.multi_select_insert_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";
static EVENT_FOCUS = "EVENT_FOCUS";
static EVENT_BLUR = "EVENT_BLUR";
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-multi-select-searcher", baseCls: "bi-multi-select-searcher",
itemsCreator: BI.emptyFn, itemsCreator: emptyFn,
itemHeight: 24, itemHeight: 24,
el: {}, el: {},
popup: {}, popup: {},
valueFormatter: BI.emptyFn, valueFormatter: emptyFn,
adapter: null, adapter: null,
masker: {}, masker: {},
watermark: BI.i18nText("BI-Basic_Search_And_Patch_Paste"), watermark: i18nText("BI-Basic_Search_And_Patch_Paste"),
}); });
}, }
_init: function () { _init() {
BI.MultiSelectInsertSearcher.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this, o = this.options; const self = this,
this.editor = BI.createWidget(o.el, { o = this.options;
type: "bi.multi_select_editor", this.editor = createWidget(o.el, {
type: MultiSelectEditor.xtype,
watermark: o.watermark, watermark: o.watermark,
height: o.height, height: o.height,
text: o.text, text: o.text,
defaultText: o.defaultText, defaultText: o.defaultText,
listeners: [ listeners: [
{ {
eventName: BI.MultiSelectEditor.EVENT_FOCUS, eventName: MultiSelectEditor.EVENT_FOCUS,
action: function () { action() {
self.fireEvent(BI.MultiSelectInsertSearcher.EVENT_FOCUS); self.fireEvent(MultiSelectInsertSearcher.EVENT_FOCUS);
} },
}, { },
eventName: BI.MultiSelectEditor.EVENT_BLUR, {
action: function () { eventName: MultiSelectEditor.EVENT_BLUR,
self.fireEvent(BI.MultiSelectInsertSearcher.EVENT_BLUR); action() {
} self.fireEvent(MultiSelectInsertSearcher.EVENT_BLUR);
},
} }
] ],
}); });
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_insert_pane", {
valueFormatter: o.valueFormatter, type: MultiSelectSearchInsertPane.xtype,
itemFormatter: o.itemFormatter, valueFormatter: o.valueFormatter,
keywordGetter: function () { itemFormatter: o.itemFormatter,
return self.editor.getKeyword(); keywordGetter() {
}, return self.editor.getKeyword();
itemsCreator: function (op, callback) { },
var keyword = self.editor.getKeyword(); itemsCreator(op, callback) {
op.keywords = [keyword]; const keyword = self.editor.getKeyword();
this.setKeyword(keyword); op.keywords = [keyword];
o.itemsCreator(op, function () { this.setKeyword(keyword);
if (keyword === self.editor.getValue()) { o.itemsCreator(op, function () {
callback.apply(null, arguments); if (keyword === self.editor.getValue()) {
} callback(...arguments);
}); }
});
},
itemHeight: o.itemHeight,
value: o.value,
}, },
itemHeight: o.itemHeight, o.popup
value: o.value, ),
}, 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.MultiSelectInsertSearcher.EVENT_START); self.fireEvent(MultiSelectInsertSearcher.EVENT_START);
}); });
this.searcher.on(BI.Searcher.EVENT_PAUSE, function () { this.searcher.on(Searcher.EVENT_PAUSE, () => {
if (this.hasMatched()) { self.fireEvent(MultiSelectInsertSearcher.EVENT_PAUSE);
}
self.fireEvent(BI.MultiSelectInsertSearcher.EVENT_PAUSE);
}); });
this.searcher.on(BI.Searcher.EVENT_STOP, function () { this.searcher.on(Searcher.EVENT_STOP, () => {
self.fireEvent(BI.MultiSelectInsertSearcher.EVENT_STOP); self.fireEvent(MultiSelectInsertSearcher.EVENT_STOP);
}); });
this.searcher.on(BI.Searcher.EVENT_CHANGE, function () { this.searcher.on(Searcher.EVENT_CHANGE, function () {
self.fireEvent(BI.MultiSelectInsertSearcher.EVENT_CHANGE, arguments); self.fireEvent(MultiSelectInsertSearcher.EVENT_CHANGE, arguments);
}); });
this.searcher.on(BI.Searcher.EVENT_SEARCHING, function () { this.searcher.on(Searcher.EVENT_SEARCHING, function () {
var keywords = this.getKeywords(); const keywords = this.getKeywords();
self.fireEvent(BI.MultiSelectInsertSearcher.EVENT_SEARCHING, keywords.length > 2000 ? keywords.slice(0, 2000).concat([BI.BlankSplitChar]) : keywords.slice(0, 2000)); self.fireEvent(
MultiSelectInsertSearcher.EVENT_SEARCHING,
keywords.length > 2000
? keywords.slice(0, 2000).concat([BI.BlankSplitChar])
: keywords.slice(0, 2000)
);
}); });
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();
}, }
getKeywordsLength: function () { getKeywordsLength() {
var keywords = this.editor.getKeywords(); const keywords = this.editor.getKeywords();
return keywords[keywords.length - 1] === BI.BlankSplitChar ? keywords.length - 1 : keywords.length; return keywords[keywords.length - 1] === BI.BlankSplitChar
}, ? keywords.length - 1
: keywords.length;
}
getKeyword: function () { getKeyword() {
var keywords = this.editor.getKeywords().slice(0, 2000); let keywords = this.editor.getKeywords().slice(0, 2000);
if (keywords[keywords.length - 1] === BI.BlankSplitChar) { if (keywords[keywords.length - 1] === BI.BlankSplitChar) {
keywords = keywords.slice(0, keywords.length - 1); keywords = keywords.slice(0, keywords.length - 1);
} }
return BI.isEmptyArray(keywords) ? "" : keywords[keywords.length - 1]; return isEmptyArray(keywords) ? "" : keywords[keywords.length - 1];
}, }
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 (ob) { setState(ob) {
var o = this.options; let state;
const o = this.options;
ob || (ob = {}); ob || (ob = {});
ob.value || (ob.value = []); ob.value || (ob.value = []);
if (ob.type === BI.Selection.All) { if (ob.type === BI.Selection.All) {
if (ob.value.length === 0) { if (ob.value.length === 0) {
this.editor.setState(BI.Selection.All); this.editor.setState(BI.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 += "" + (v === null ? "" : (o.valueFormatter(v + "") || v)); state +=
`${
v === null ? "" : o.valueFormatter(`${v}`) || v}`;
} else { } else {
state += "," + (v === null ? "" : (o.valueFormatter(v + "") || v)); state +=
`,${
v === null ? "" : o.valueFormatter(`${v}`) || v}`;
} }
}); });
this.editor.setState(state); this.editor.setState(state);
@ -165,13 +200,17 @@ BI.MultiSelectInsertSearcher = BI.inherit(BI.Widget, {
} else { } else {
if (ob.value.length === 0) { if (ob.value.length === 0) {
this.editor.setState(BI.Selection.None); this.editor.setState(BI.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 += "" + (v === null ? "" : (o.valueFormatter(v + "") || v)); state +=
`${
v === null ? "" : o.valueFormatter(`${v}`) || v}`;
} else { } else {
state += "," + (v === null ? "" : (o.valueFormatter(v + "") || v)); state +=
`,${
v === null ? "" : o.valueFormatter(`${v}`) || v}`;
} }
}); });
this.editor.setState(state); this.editor.setState(state);
@ -179,36 +218,26 @@ BI.MultiSelectInsertSearcher = BI.inherit(BI.Widget, {
this.editor.setState(BI.Selection.Multi); this.editor.setState(BI.Selection.Multi);
} }
} }
}, }
getState: function () { getState() {
return this.editor.getState(); return this.editor.getState();
}, }
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.MultiSelectInsertSearcher.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
BI.MultiSelectInsertSearcher.EVENT_CHANGE = "EVENT_CHANGE";
BI.MultiSelectInsertSearcher.EVENT_START = "EVENT_START";
BI.MultiSelectInsertSearcher.EVENT_STOP = "EVENT_STOP";
BI.MultiSelectInsertSearcher.EVENT_PAUSE = "EVENT_PAUSE";
BI.MultiSelectInsertSearcher.EVENT_SEARCHING = "EVENT_SEARCHING";
BI.MultiSelectInsertSearcher.EVENT_FOCUS = "EVENT_FOCUS";
BI.MultiSelectInsertSearcher.EVENT_BLUR = "EVENT_BLUR";
BI.shortcut("bi.multi_select_insert_searcher", BI.MultiSelectInsertSearcher);

269
src/widget/multiselect/trigger/searcher.multiselect.js

@ -1,160 +1,187 @@
/** import {
* searcher shortcut,
* Created by guy on 15/11/3. Widget,
* @class BI.MultiSelectSearcher extend,
* @extends Widget emptyFn,
*/ i18nText,
BI.MultiSelectSearcher = BI.inherit(BI.Widget, { createWidget,
isNotNull,
_defaultConfig: function () { size,
return BI.extend(BI.MultiSelectSearcher.superclass._defaultConfig.apply(this, arguments), { each
} from "@/core";
import { MultiSelectEditor } from "./editor.multiselect";
import { Searcher } from "@/base";
import { MultiSelectSearchPane } from "../search/multiselect.search.pane";
@shortcut()
export class MultiSelectSearcher extends Widget {
static xtype = "bi.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";
static EVENT_FOCUS = "EVENT_FOCUS";
static EVENT_BLUR = "EVENT_BLUR";
_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: {},
defaultText: BI.i18nText("BI-Basic_Please_Select"), defaultText: i18nText("BI-Basic_Please_Select"),
itemHeight: 24 itemHeight: 24,
}); });
}, }
_init: function () { _init() {
BI.MultiSelectSearcher.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this, o = this.options; const self = this,
this.editor = BI.createWidget(o.el, { o = this.options;
type: "bi.multi_select_editor", this.editor = createWidget(o.el, {
type: MultiSelectEditor.xtype,
height: o.height, height: o.height,
text: o.text, text: o.text,
defaultText: o.defaultText, defaultText: o.defaultText,
watermark: o.watermark, watermark: o.watermark,
listeners: [ listeners: [
{ {
eventName: BI.MultiSelectEditor.EVENT_FOCUS, eventName: MultiSelectEditor.EVENT_FOCUS,
action: function () { action() {
self.fireEvent(BI.MultiSelectSearcher.EVENT_FOCUS); self.fireEvent(MultiSelectSearcher.EVENT_FOCUS);
} },
}, { },
eventName: BI.MultiSelectEditor.EVENT_BLUR, {
action: function () { eventName: MultiSelectEditor.EVENT_BLUR,
self.fireEvent(BI.MultiSelectSearcher.EVENT_BLUR); action() {
} self.fireEvent(MultiSelectSearcher.EVENT_BLUR);
},
} }
] ],
}); });
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,
itemFormatter: o.itemFormatter, valueFormatter: o.valueFormatter,
keywordGetter: function () { itemFormatter: o.itemFormatter,
return self.editor.getValue(); keywordGetter() {
}, return self.editor.getValue();
itemsCreator: function (op, callback) { },
var keyword = self.editor.getValue(); itemsCreator(op, callback) {
op.keywords = [keyword]; const keyword = self.editor.getValue();
o.itemsCreator(op, function () {
var keyword = self.editor.getValue();
op.keywords = [keyword]; op.keywords = [keyword];
o.itemsCreator(op, function () { o.itemsCreator(op, () => {
if (keyword === self.editor.getValue()) { const keyword = self.editor.getValue();
callback.apply(null, arguments); op.keywords = [keyword];
} o.itemsCreator(op, function () {
if (keyword === self.editor.getValue()) {
callback(...arguments);
}
});
}); });
}); },
itemHeight: o.itemHeight,
value: o.value,
}, },
itemHeight: o.itemHeight, o.popup
value: o.value ),
}, 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.MultiSelectSearcher.EVENT_START); self.fireEvent(MultiSelectSearcher.EVENT_START);
}); });
this.searcher.on(BI.Searcher.EVENT_PAUSE, function () { this.searcher.on(Searcher.EVENT_PAUSE, () => {
if (this.hasMatched()) { self.fireEvent(MultiSelectSearcher.EVENT_PAUSE);
}
self.fireEvent(BI.MultiSelectSearcher.EVENT_PAUSE);
}); });
this.searcher.on(BI.Searcher.EVENT_STOP, function () { this.searcher.on(Searcher.EVENT_STOP, () => {
self.fireEvent(BI.MultiSelectSearcher.EVENT_STOP); self.fireEvent(MultiSelectSearcher.EVENT_STOP);
}); });
this.searcher.on(BI.Searcher.EVENT_CHANGE, function () { this.searcher.on(Searcher.EVENT_CHANGE, function () {
self.fireEvent(BI.MultiSelectSearcher.EVENT_CHANGE, arguments); self.fireEvent(MultiSelectSearcher.EVENT_CHANGE, arguments);
}); });
this.searcher.on(BI.Searcher.EVENT_SEARCHING, function () { this.searcher.on(Searcher.EVENT_SEARCHING, function () {
var keywords = this.getKeywords(); const keywords = this.getKeywords();
self.fireEvent(BI.MultiSelectSearcher.EVENT_SEARCHING, keywords); self.fireEvent(MultiSelectSearcher.EVENT_SEARCHING, keywords);
}); });
if (BI.isNotNull(o.value)) { if (isNotNull(o.value)) {
this.setState(o.value); this.setState(o.value);
} }
}, }
focus: function () { focus() {
this.editor.focus(); this.editor.focus();
}, }
blur: function () { blur() {
this.editor.blur(); this.editor.blur();
}, }
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 (ob) { setState(ob) {
var o = this.options; let state;
const o = this.options;
ob || (ob = {}); ob || (ob = {});
ob.value || (ob.value = []); ob.value || (ob.value = []);
if (ob.type === BI.Selection.All) { if (ob.type === BI.Selection.All) {
if (ob.value.length === 0) { if (ob.value.length === 0) {
this.editor.setState(BI.Selection.All); this.editor.setState(BI.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 += "" + (v === null ? "" : (o.valueFormatter(v + "") || v)); state +=
`${
v === null ? "" : o.valueFormatter(`${v}`) || v}`;
} else { } else {
state += "," + (v === null ? "" : (o.valueFormatter(v + "") || v)); state +=
`,${
v === null ? "" : o.valueFormatter(`${v}`) || v}`;
} }
}); });
this.editor.setState(state); this.editor.setState(state);
@ -164,13 +191,17 @@ BI.MultiSelectSearcher = BI.inherit(BI.Widget, {
} else { } else {
if (ob.value.length === 0) { if (ob.value.length === 0) {
this.editor.setState(BI.Selection.None); this.editor.setState(BI.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 += "" + (v === null ? "" : (o.valueFormatter(v + "") || v)); state +=
`${
v === null ? "" : o.valueFormatter(`${v}`) || v}`;
} else { } else {
state += "," + (v === null ? "" : (o.valueFormatter(v + "") || v)); state +=
`,${
v === null ? "" : o.valueFormatter(`${v}`) || v}`;
} }
}); });
this.editor.setState(state); this.editor.setState(state);
@ -178,36 +209,26 @@ BI.MultiSelectSearcher = BI.inherit(BI.Widget, {
this.editor.setState(BI.Selection.Multi); this.editor.setState(BI.Selection.Multi);
} }
} }
}, }
getState: function () { getState() {
return this.editor.getState(); return this.editor.getState();
}, }
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.MultiSelectSearcher.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
BI.MultiSelectSearcher.EVENT_CHANGE = "EVENT_CHANGE";
BI.MultiSelectSearcher.EVENT_START = "EVENT_START";
BI.MultiSelectSearcher.EVENT_STOP = "EVENT_STOP";
BI.MultiSelectSearcher.EVENT_PAUSE = "EVENT_PAUSE";
BI.MultiSelectSearcher.EVENT_SEARCHING = "EVENT_SEARCHING";
BI.MultiSelectSearcher.EVENT_FOCUS = "EVENT_FOCUS";
BI.MultiSelectSearcher.EVENT_BLUR = "EVENT_BLUR";
BI.shortcut("bi.multi_select_searcher", BI.MultiSelectSearcher);

156
src/widget/multiselect/trigger/switcher.checkselected.js

@ -1,112 +1,128 @@
/** import {
* 查看已选switcher shortcut,
* Created by guy on 15/11/3. Widget,
* @class BI.MultiSelectCheckSelectedSwitcher extend,
* @extends Widget emptyFn,
*/ createWidget,
BI.MultiSelectCheckSelectedSwitcher = BI.inherit(BI.Widget, { Events,
nextTick
} from "@/core";
import { Switcher } from "@/base";
import { MultiSelectCheckSelectedButton } from "./button.checkselected";
import { MultiSelectCheckPane } from "../check/multiselect.check.pane";
_defaultConfig: function () { @shortcut()
return BI.extend(BI.MultiSelectCheckSelectedSwitcher.superclass._defaultConfig.apply(this, arguments), { export class MultiSelectCheckSelectedSwitcher extends Widget {
static xtype = "bi.multi_select_check_selected_switcher";
static EVENT_TRIGGER_CHANGE = "EVENT_TRIGGER_CHANGE";
static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
static EVENT_AFTER_HIDEVIEW = "EVENT_AFTER_HIDEVIEW";
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-multi-select-check-selected-switcher", baseCls: "bi-multi-select-check-selected-switcher",
itemsCreator: BI.emptyFn, itemsCreator: emptyFn,
valueFormatter: BI.emptyFn, valueFormatter: emptyFn,
el: {}, el: {},
popup: {}, popup: {},
adapter: null, adapter: null,
masker: {} masker: {},
}); });
}, }
_init: function () { _init() {
BI.MultiSelectCheckSelectedSwitcher.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this, o = this.options; const self = this,
o = this.options;
this.button = BI.createWidget(o.el, { this.button = createWidget(o.el, {
type: "bi.multi_select_check_selected_button", type: MultiSelectCheckSelectedButton.xtype,
itemsCreator: o.itemsCreator, itemsCreator: o.itemsCreator,
value: o.value value: o.value,
}); });
this.button.on(BI.Events.VIEW, function () { this.button.on(Events.VIEW, function () {
self.fireEvent(BI.Events.VIEW, arguments); self.fireEvent(Events.VIEW, arguments);
}); });
this.switcher = BI.createWidget({ this.switcher = createWidget({
type: "bi.switcher", type: Switcher.xtype,
toggle: false, toggle: false,
element: this, element: this,
el: this.button, el: this.button,
popup: BI.extend({ popup: extend(
type: "bi.multi_select_check_pane", {
valueFormatter: o.valueFormatter, type: MultiSelectCheckPane.xtype,
itemsCreator: o.itemsCreator, valueFormatter: o.valueFormatter,
onClickContinueSelect: function () { itemsCreator: o.itemsCreator,
self.switcher.hideView(); onClickContinueSelect() {
}, self.switcher.hideView();
ref: function (_ref) { },
self.checkPane = _ref; ref(_ref) {
self.checkPane = _ref;
},
value: o.value,
}, },
value: o.value o.popup
}, o.popup), ),
adapter: o.adapter, adapter: o.adapter,
masker: o.masker masker: o.masker,
}); });
this.switcher.on(BI.Switcher.EVENT_TRIGGER_CHANGE, function () { this.switcher.on(Switcher.EVENT_TRIGGER_CHANGE, () => {
self.fireEvent(BI.MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE); self.fireEvent(
MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE
);
}); });
this.switcher.on(BI.Switcher.EVENT_BEFORE_POPUPVIEW, function () { this.switcher.on(Switcher.EVENT_BEFORE_POPUPVIEW, () => {
self.fireEvent(BI.MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW); self.fireEvent(
MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW
);
}); });
this.switcher.on(BI.Switcher.EVENT_AFTER_HIDEVIEW, function () { this.switcher.on(Switcher.EVENT_AFTER_HIDEVIEW, () => {
self.fireEvent(BI.MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW); self.fireEvent(
MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW
);
}); });
this.switcher.on(BI.Switcher.EVENT_AFTER_POPUPVIEW, function () { this.switcher.on(Switcher.EVENT_AFTER_POPUPVIEW, function () {
var me = this; const me = this;
BI.nextTick(function () { nextTick(() => {
me._populate(); me._populate();
}); });
}); });
}, }
adjustView: function () { adjustView() {
this.switcher.adjustView(); this.switcher.adjustView();
}, }
hideView: function () { hideView() {
this.switcher.empty(); this.switcher.empty();
this.switcher.hideView(); this.switcher.hideView();
}, }
setAdapter: function (adapter) { setAdapter(adapter) {
this.switcher.setAdapter(adapter); this.switcher.setAdapter(adapter);
}, }
setValue: function (v) { setValue(v) {
this.switcher.setValue(v); this.switcher.setValue(v);
}, }
// 与setValue的区别是只更新查看已选面板的的selectedValue, 不会更新按钮的计数 updateSelectedValue(v) {
updateSelectedValue: function (v) {
this.checkPane.setValue(v); this.checkPane.setValue(v);
}, }
setButtonChecked: function (v) { setButtonChecked(v) {
this.button.setValue(v); this.button.setValue(v);
}, }
getValue: function () {
}, getValue() {
}
populate: function (items) { populate(items) {
this.switcher.populate.apply(this.switcher, arguments); this.switcher.populate.apply(this.switcher, arguments);
}, }
populateSwitcher: function () { populateSwitcher() {
this.button.populate.apply(this.button, arguments); this.button.populate.apply(this.button, arguments);
} }
}); }
BI.MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE = "EVENT_TRIGGER_CHANGE";
BI.MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
BI.MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW = "EVENT_AFTER_HIDEVIEW";
BI.shortcut("bi.multi_select_check_selected_switcher", BI.MultiSelectCheckSelectedSwitcher);

240
src/widget/multiselecttree/multiselecttree.js

@ -1,171 +1,193 @@
/** import {
* Created by zcf_1 on 2017/5/11. shortcut,
*/ extend,
BI.MultiSelectTree = BI.inherit(BI.Single, { emptyFn,
_constant: { createWidget,
EDITOR_HEIGHT: 24 nextTick,
}, AbsoluteLayout
} from "@/core";
_defaultConfig: function () { import { Single, Searcher } from "@/base";
return BI.extend(BI.MultiSelectTree.superclass._defaultConfig.apply(this, arguments), { import { MultiSelectTreePopup } from "./multiselecttree.popup";
@shortcut()
export class MultiSelectTree extends Single {
static xtype = "bi.multi_select_tree";
_constant = { EDITOR_HEIGHT: 24 };
static EVENT_CHANGE = "EVENT_CHANGE";
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-multi-select-tree", baseCls: "bi-multi-select-tree",
itemsCreator: BI.emptyFn itemsCreator: emptyFn,
}); });
}, }
_init: function () { _init() {
BI.MultiSelectTree.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this, o = this.options; const self = this,
this.storeValue = {value: {}}; o = this.options;
this.storeValue = { value: {} };
this.adapter = BI.createWidget({ this.adapter = createWidget({
type: "bi.multi_select_tree_popup", type: MultiSelectTreePopup.xtype,
itemsCreator: o.itemsCreator, itemsCreator: o.itemsCreator,
showLine: o.showLine showLine: o.showLine,
}); });
this.adapter.on(BI.MultiSelectTreePopup.EVENT_CHANGE, function () { this.adapter.on(MultiSelectTreePopup.EVENT_CHANGE, () => {
if (self.searcher.isSearching()) { if (self.searcher.isSearching()) {
self.storeValue = {value: self.searcherPane.getValue()}; self.storeValue = { value: self.searcherPane.getValue() };
} else { } else {
self.storeValue = {value: self.adapter.getValue()}; self.storeValue = { value: self.adapter.getValue() };
} }
self.setSelectedValue(self.storeValue.value); self.setSelectedValue(self.storeValue.value);
self.fireEvent(BI.MultiSelectTree.EVENT_CHANGE); self.fireEvent(MultiSelectTree.EVENT_CHANGE);
}); });
// 搜索中的时候用的是parttree,同adapter中的synctree不一样 // 搜索中的时候用的是parttree,同adapter中的synctree不一样
this.searcherPane = BI.createWidget({ this.searcherPane = createWidget({
type: "bi.multi_tree_search_pane", type: "bi.multi_tree_search_pane",
cls: "bi-border-left bi-border-right bi-border-bottom", cls: "bi-border-left bi-border-right bi-border-bottom",
keywordGetter: function () { keywordGetter() {
return self.searcher.getKeyword(); return self.searcher.getKeyword();
}, },
itemsCreator: function (op, callback) { itemsCreator(op, callback) {
op.keyword = self.searcher.getKeyword(); op.keyword = self.searcher.getKeyword();
o.itemsCreator(op, callback); o.itemsCreator(op, callback);
} },
}); });
this.searcherPane.setVisible(false); this.searcherPane.setVisible(false);
this.searcher = BI.createWidget({ this.searcher = createWidget({
type: "bi.searcher", type: Searcher.xtype,
isAutoSearch: false, isAutoSearch: false,
isAutoSync: false, isAutoSync: false,
onSearch: function (op, callback) { onSearch(op, callback) {
callback({ callback({
keyword: self.searcher.getKeyword() keyword: self.searcher.getKeyword(),
}); });
}, },
adapter: this.adapter, adapter: this.adapter,
popup: this.searcherPane, popup: this.searcherPane,
masker: false, masker: false,
listeners: [{ listeners: [
eventName: BI.Searcher.EVENT_START, {
action: function () { eventName: Searcher.EVENT_START,
self._showSearcherPane(); action() {
// self.storeValue = {value: self.adapter.getValue()}; self._showSearcherPane();
// self.searcherPane.setSelectedValue(self.storeValue.value); // self.storeValue = {value: self.adapter.getValue()};
} // self.searcherPane.setSelectedValue(self.storeValue.value);
}, { },
eventName: BI.Searcher.EVENT_STOP, },
action: function () { {
self._showAdapter(); eventName: Searcher.EVENT_STOP,
// self.storeValue = {value: self.searcherPane.getValue()}; action() {
// self.adapter.setSelectedValue(self.storeValue.value); self._showAdapter();
BI.nextTick(function () { // self.storeValue = {value: self.searcherPane.getValue()};
self.adapter.populate(); // self.adapter.setSelectedValue(self.storeValue.value);
}); nextTick(() => {
} self.adapter.populate();
}, { });
eventName: BI.Searcher.EVENT_CHANGE, },
action: function () { },
if (self.searcher.isSearching()) { {
self.storeValue = {value: self.searcherPane.getValue()}; eventName: Searcher.EVENT_CHANGE,
} else { action() {
self.storeValue = {value: self.adapter.getValue()}; if (self.searcher.isSearching()) {
} self.storeValue = {
self.setSelectedValue(self.storeValue.value); value: self.searcherPane.getValue(),
self.fireEvent(BI.MultiSelectTree.EVENT_CHANGE); };
} else {
self.storeValue = {
value: self.adapter.getValue(),
};
}
self.setSelectedValue(self.storeValue.value);
self.fireEvent(MultiSelectTree.EVENT_CHANGE);
},
},
{
eventName: Searcher.EVENT_PAUSE,
action() {
self._showAdapter();
// BI-64732 pause 和stop一致, 都应该刷新adapter
nextTick(() => {
self.adapter.populate();
});
},
} }
}, { ],
eventName: BI.Searcher.EVENT_PAUSE,
action: function () {
self._showAdapter();
// BI-64732 pause 和stop一致, 都应该刷新adapter
BI.nextTick(function () {
self.adapter.populate();
});
}
}]
}); });
BI.createWidget({ createWidget({
type: "bi.vertical_fill", type: "bi.vertical_fill",
element: this, element: this,
items: [{ items: [
el: this.searcher, {
height: "" el: this.searcher,
}, { height: "",
el: this.adapter, },
height: "fill" {
}] el: this.adapter,
height: "fill",
}
],
}); });
BI.createWidget({ createWidget({
type: "bi.absolute", type: AbsoluteLayout.xtype,
element: this, element: this,
items: [{ items: [
el: this.searcherPane, {
top: this._constant.EDITOR_HEIGHT, el: this.searcherPane,
bottom: 0, top: this._constant.EDITOR_HEIGHT,
left: 0, bottom: 0,
right: 0 left: 0,
}] right: 0,
}
],
}); });
}
}, _showAdapter() {
_showAdapter: function () {
this.adapter.setVisible(true); this.adapter.setVisible(true);
this.searcherPane.setVisible(false); this.searcherPane.setVisible(false);
}, }
_showSearcherPane: function () { _showSearcherPane() {
this.searcherPane.setVisible(true); this.searcherPane.setVisible(true);
this.adapter.setVisible(false); this.adapter.setVisible(false);
}, }
resize: function () {
}, resize() {
}
setSelectedValue: function (v) { setSelectedValue(v) {
this.storeValue.value = v || {}; this.storeValue.value = v || {};
this.adapter.setSelectedValue(v); this.adapter.setSelectedValue(v);
this.searcherPane.setSelectedValue(v); this.searcherPane.setSelectedValue(v);
this.searcher.setValue({ this.searcher.setValue({
value: v || {} value: v || {},
}); });
}, }
setValue: function (v) { setValue(v) {
this.adapter.setValue(v); this.adapter.setValue(v);
}, }
stopSearch: function () { stopSearch() {
this.searcher.stopSearch(); this.searcher.stopSearch();
}, }
updateValue: function (v) { updateValue(v) {
this.adapter.updateValue(v); this.adapter.updateValue(v);
}, }
getValue: function () { getValue() {
return this.storeValue.value; return this.storeValue.value;
}, }
populate: function () { populate() {
this.adapter.populate(); this.adapter.populate();
} }
}); }
BI.MultiSelectTree.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.multi_select_tree", BI.MultiSelectTree);

77
src/widget/multiselecttree/multiselecttree.popup.js

@ -1,58 +1,63 @@
/** import { shortcut, Widget, extend, emptyFn, createWidget } from "@/core";
* Created by zcf on 2016/12/21. import { TreeView, Asynctree } from "@/case";
*/
BI.MultiSelectTreePopup = BI.inherit(BI.Widget, { @shortcut()
_defaultConfig: function () { export class MultiSelectTreePopup extends Widget {
return BI.extend(BI.MultiSelectTreePopup.superclass._defaultConfig.apply(this, arguments), { static xtype = "bi.multi_select_tree_popup";
baseCls: "bi-multi-select-tree-popup bi-border-left bi-border-right bi-border-bottom",
itemsCreator: BI.emptyFn static EVENT_AFTER_INIT = "EVENT_AFTER_INIT";
static EVENT_CHANGE = "EVENT_CHANGE";
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls:
"bi-multi-select-tree-popup bi-border-left bi-border-right bi-border-bottom",
itemsCreator: emptyFn,
}); });
}, }
_init: function () {
BI.MultiSelectTreePopup.superclass._init.apply(this, arguments); _init() {
var self = this, o = this.options; super._init(...arguments);
this.popup = BI.createWidget({ const self = this,
type: "bi.async_tree", o = this.options;
this.popup = createWidget({
type: Asynctree.xtype,
showLine: o.showLine, showLine: o.showLine,
element: this, element: this,
itemsCreator: o.itemsCreator itemsCreator: o.itemsCreator,
}); });
this.popup.on(BI.TreeView.EVENT_AFTERINIT, function () { this.popup.on(TreeView.EVENT_AFTERINIT, () => {
self.fireEvent(BI.MultiSelectTreePopup.EVENT_AFTER_INIT); self.fireEvent(MultiSelectTreePopup.EVENT_AFTER_INIT);
}); });
this.popup.on(BI.TreeView.EVENT_CHANGE, function () { this.popup.on(TreeView.EVENT_CHANGE, () => {
self.fireEvent(BI.MultiSelectTreePopup.EVENT_CHANGE); self.fireEvent(MultiSelectTreePopup.EVENT_CHANGE);
}); });
}, }
hasChecked: function () { hasChecked() {
return this.popup.hasChecked(); return this.popup.hasChecked();
}, }
getValue: function () { getValue() {
return this.popup.getValue(); return this.popup.getValue();
}, }
setValue: function (v) { setValue(v) {
v || (v = {}); v || (v = {});
this.popup.setValue(v); this.popup.setValue(v);
}, }
setSelectedValue: function (v) { setSelectedValue(v) {
v || (v = {}); v || (v = {});
this.popup.setSelectedValue(v); this.popup.setSelectedValue(v);
}, }
updateValue: function (v) { updateValue(v) {
this.popup.updateValue(v); this.popup.updateValue(v);
this.popup.refresh(); this.popup.refresh();
}, }
populate: function (config) { populate(config) {
this.popup.stroke(config); this.popup.stroke(config);
} }
}
});
BI.MultiSelectTreePopup.EVENT_AFTER_INIT = "EVENT_AFTER_INIT";
BI.MultiSelectTreePopup.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.multi_select_tree_popup", BI.MultiSelectTreePopup);

147
src/widget/multitree/check/multi.tree.check.pane.js

@ -1,121 +1,128 @@
/** import {
* shortcut,
* @class BI.MultiTreeCheckPane extend,
* @extends BI.Pane emptyFn,
*/ createWidget,
BI.MultiTreeCheckPane = BI.inherit(BI.Pane, { i18nText,
nextTick,
constants: { Events,
height: 25, VerticalAdaptLayout, VTapeLayout
lgap: 10, } from "@/core";
tgap: 5 import { Pane, TextButton, Label } from "@/base";
}, import { DisplayTree, TreeView } from "@/case";
_defaultConfig: function () { @shortcut()
return BI.extend(BI.MultiTreeCheckPane.superclass._defaultConfig.apply(this, arguments), { export class MultiTreeCheckPane extends Pane {
static xtype = "bi.multi_tree_check_pane";
constants = { height: 25, lgap: 10, tgap: 5 };
static EVENT_CONTINUE_CLICK = "EVENT_CONTINUE_CLICK";
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-multi-tree-check-pane bi-background", baseCls: "bi-multi-tree-check-pane bi-background",
onClickContinueSelect: BI.emptyFn, onClickContinueSelect: emptyFn,
el: { el: {
type: "bi.display_tree" type: DisplayTree.xtype,
} },
}); });
}, }
_init: function () { _init() {
BI.MultiTreeCheckPane.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this, opts = this.options; const self = this,
opts = this.options;
this.selectedValues = {}; this.selectedValues = {};
var continueSelect = BI.createWidget({ const continueSelect = createWidget({
type: "bi.text_button", type: TextButton.xtype,
title: BI.i18nText("BI-Continue_Select"), title: i18nText("BI-Continue_Select"),
text: BI.i18nText("BI-Continue_Select"), text: i18nText("BI-Continue_Select"),
cls: "multi-tree-check-selected" cls: "multi-tree-check-selected",
}); });
continueSelect.on(BI.TextButton.EVENT_CHANGE, function () { continueSelect.on(TextButton.EVENT_CHANGE, () => {
opts.onClickContinueSelect(); opts.onClickContinueSelect();
BI.nextTick(function () { nextTick(() => {
self.empty(); self.empty();
}); });
}); });
var backToPopup = BI.createWidget({ const backToPopup = createWidget({
type: "bi.vertical_adapt", type: VerticalAdaptLayout.xtype,
columnSize: ["auto", "auto"], columnSize: ["auto", "auto"],
cls: "multi-tree-continue-select", cls: "multi-tree-continue-select",
items: [ items: [
{ {
el: { el: {
type: "bi.label", type: Label.xtype,
title: BI.i18nText("BI-Selected_Data"), title: i18nText("BI-Selected_Data"),
text: BI.i18nText("BI-Selected_Data") text: i18nText("BI-Selected_Data"),
}, },
lgap: this.constants.lgap, lgap: this.constants.lgap,
tgap: this.constants.tgap tgap: this.constants.tgap,
}, },
{ {
el: continueSelect, el: continueSelect,
hgap: this.constants.lgap, hgap: this.constants.lgap,
tgap: this.constants.tgap tgap: this.constants.tgap,
}] }
],
}); });
this.display = BI.createWidget(opts.el, { this.display = createWidget(opts.el, {
type: "bi.display_tree", type: DisplayTree.xtype,
cls: "bi-multi-tree-display", cls: "bi-multi-tree-display",
itemsCreator: function (op, callback) { itemsCreator(op, callback) {
op.type = BI.TreeView.REQ_TYPE_GET_SELECTED_DATA; op.type = TreeView.REQ_TYPE_GET_SELECTED_DATA;
opts.itemsCreator(op, callback); opts.itemsCreator(op, callback);
}, },
value: (opts.value || {}).value value: (opts.value || {}).value,
}); });
this.display.on(BI.Events.AFTERINIT, function () { this.display.on(Events.AFTERINIT, () => {
self.fireEvent(BI.Events.AFTERINIT); self.fireEvent(Events.AFTERINIT);
}); });
this.display.on(BI.TreeView.EVENT_INIT, function () { this.display.on(TreeView.EVENT_INIT, () => {
backToPopup.setVisible(false); backToPopup.setVisible(false);
}); });
this.display.on(BI.TreeView.EVENT_AFTERINIT, function () { this.display.on(TreeView.EVENT_AFTERINIT, () => {
backToPopup.setVisible(true); backToPopup.setVisible(true);
}); });
BI.createWidget({ createWidget({
type: "bi.vtape", type: VTapeLayout.xtype,
element: this, element: this,
items: [{ items: [
height: this.constants.height, {
el: backToPopup height: this.constants.height,
}, { el: backToPopup,
height: "fill", },
el: this.display {
}] height: "fill",
el: this.display,
}
],
}); });
}, }
empty: function () { empty() {
this.display.empty(); this.display.empty();
}, }
populate: function (configs) { populate(configs) {
this.display.stroke(configs); this.display.stroke(configs);
}, }
setValue: function (v) { setValue(v) {
v || (v = {}); v || (v = {});
this.display.setSelectedValue(v.value); this.display.setSelectedValue(v.value);
},
getValue: function () {
} }
});
BI.MultiTreeCheckPane.EVENT_CONTINUE_CLICK = "EVENT_CONTINUE_CLICK"; getValue() {
}
}
BI.shortcut("bi.multi_tree_check_pane", BI.MultiTreeCheckPane);

371
src/widget/multitree/multi.tree.combo.js

@ -1,33 +1,67 @@
/** import {
* shortcut,
* @class BI.MultiTreeCombo extend,
* @extends BI.Single emptyFn,
*/ createWidget,
toPix,
BI.MultiTreeCombo = BI.inherit(BI.Single, { nextTick,
_defaultConfig: function () { Events,
return BI.extend(BI.MultiTreeCombo.superclass._defaultConfig.apply(this, arguments), { AbsoluteLayout,
VerticalAdaptLayout,
deepClone
} from "@/core";
import { Single, Combo } from "@/base";
import { MultiTreeSearcher } from "./trigger/searcher.multi.tree";
import { MultiTreePopup } from "./multi.tree.popup";
import { MultiSelectTrigger } from "../multiselect/multiselect.trigger";
import { TriggerIconButton } from "@/case";
import { MultiSelectCheckSelectedSwitcher } from "../multiselect/trigger/switcher.checkselected";
@shortcut()
export class MultiTreeCombo extends Single {
static xtype = "bi.multi_tree_combo";
static EVENT_FOCUS = "EVENT_FOCUS";
static EVENT_BLUR = "EVENT_BLUR";
static EVENT_STOP = "EVENT_STOP";
static EVENT_SEARCHING = "EVENT_SEARCHING";
static EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM";
static EVENT_CONFIRM = "EVENT_CONFIRM";
static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
static EVENT_AFTER_HIDEVIEW = "EVENT_AFTER_HIDEVIEW";
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-multi-tree-combo", baseCls: "bi-multi-tree-combo",
itemsCreator: BI.emptyFn, itemsCreator: emptyFn,
valueFormatter: BI.emptyFn, valueFormatter: emptyFn,
height: 24, height: 24,
allowEdit: true, allowEdit: true,
isNeedAdjustWidth: true, isNeedAdjustWidth: true,
}); });
}, }
_init: function () { _init() {
var self = this, o = this.options; const triggerBtn = createWidget({
BI.MultiTreeCombo.superclass._init.apply(this, arguments); type: TriggerIconButton.xtype,
var isInit = false; width: o.height,
var want2showCounter = false; height: o.height,
cls: "multi-select-trigger-icon-button",
});
let clear;
let change;
const self = this,
o = this.options;
super._init(...arguments);
let isInit = false;
let want2showCounter = false;
this.storeValue = { value: o.value || {} }; this.storeValue = { value: o.value || {} };
this.trigger = BI.createWidget({ this.trigger = createWidget({
type: "bi.multi_select_trigger", type: "bi.multi_select_trigger",
allowEdit: o.allowEdit, allowEdit: o.allowEdit,
height: BI.toPix(o.height, o.simple ? 1 : 2), height: toPix(o.height, o.simple ? 1 : 2),
valueFormatter: o.valueFormatter, valueFormatter: o.valueFormatter,
text: o.text, text: o.text,
defaultText: o.defaultText, defaultText: o.defaultText,
@ -45,72 +79,78 @@ BI.MultiTreeCombo = BI.inherit(BI.Single, {
itemsCreator: o.itemsCreator, itemsCreator: o.itemsCreator,
listeners: [ listeners: [
{ {
eventName: BI.MultiTreeSearcher.EVENT_CLICK_TREE_NODE, eventName: MultiTreeSearcher.EVENT_CLICK_TREE_NODE,
action: function () { action() {
self._dataChange = true; self._dataChange = true;
} },
} }
], ],
}, },
value: { value: o.value || {} } value: { value: o.value || {} },
}); });
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: !o.allowEdit, toggle: !o.allowEdit,
container: o.container, container: o.container,
el: this.trigger, el: this.trigger,
adjustLength: 1, adjustLength: 1,
popup: { popup: {
type: "bi.multi_tree_popup_view", type: "bi.multi_tree_popup_view",
ref: function () { ref() {
self.popup = this; self.popup = this;
self.trigger.setAdapter(this); self.trigger.setAdapter(this);
self.numberCounter.setAdapter(this); self.numberCounter.setAdapter(this);
}, },
listeners: [ listeners: [
{ {
eventName: BI.MultiTreePopup.EVENT_AFTERINIT, eventName: MultiTreePopup.EVENT_AFTERINIT,
action: function () { action() {
self.numberCounter.adjustView(); self.numberCounter.adjustView();
isInit = true; isInit = true;
if (want2showCounter === true) { if (want2showCounter === true) {
showCounter(); showCounter();
} }
} },
}, { },
eventName: BI.MultiTreePopup.EVENT_CHANGE, {
action: function () { eventName: MultiTreePopup.EVENT_CHANGE,
action() {
change = true; change = true;
var val = { const val = {
type: BI.Selection.Multi, type: BI.Selection.Multi,
value: this.hasChecked() ? this.getValue() : {} value: this.hasChecked() ? this.getValue() : {},
}; };
self.trigger.getSearcher().setState(val); self.trigger.getSearcher().setState(val);
self.numberCounter.setButtonChecked(val); self.numberCounter.setButtonChecked(val);
self.storeValue = { value: self.combo.getValue() }; self.storeValue = { value: self.combo.getValue() };
self.fireEvent(BI.MultiTreeCombo.EVENT_CLICK_ITEM, self.combo.getValue()); self.fireEvent(
MultiTreeCombo.EVENT_CLICK_ITEM,
self.combo.getValue()
);
self._dataChange = true; self._dataChange = true;
} },
}, { },
eventName: BI.MultiTreePopup.EVENT_CLICK_CONFIRM, {
action: function () { eventName: MultiTreePopup.EVENT_CLICK_CONFIRM,
action() {
self.combo.hideView(); self.combo.hideView();
} },
}, { },
eventName: BI.MultiTreePopup.EVENT_CLICK_CLEAR, {
action: function () { eventName: MultiTreePopup.EVENT_CLICK_CLEAR,
action() {
clear = true; clear = true;
self._dataChange = true; self._dataChange = true;
self.setValue(); self.setValue();
self._defaultState(); self._defaultState();
} },
} }
], ],
itemsCreator: o.itemsCreator, itemsCreator: o.itemsCreator,
onLoaded: function () { onLoaded() {
BI.nextTick(function () { nextTick(() => {
self.numberCounter.adjustView(); self.numberCounter.adjustView();
self.trigger.getSearcher().adjustView(); self.trigger.getSearcher().adjustView();
}); });
@ -119,49 +159,51 @@ BI.MultiTreeCombo = BI.inherit(BI.Single, {
}, },
isNeedAdjustWidth: o.isNeedAdjustWidth, isNeedAdjustWidth: o.isNeedAdjustWidth,
value: { value: o.value || {} }, value: { value: o.value || {} },
hideChecker: function (e) { hideChecker(e) {
return triggerBtn.element.find(e.target).length === 0 && return (
self.numberCounter.element.find(e.target).length === 0; triggerBtn.element.find(e.target).length === 0 &&
} self.numberCounter.element.find(e.target).length === 0
);
},
}); });
var change = false; change = false;
var clear = false; // 标识当前是否点击了清空 clear = false; // 标识当前是否点击了清空
var isSearching = function () { function isSearching() {
return self.trigger.getSearcher().isSearching(); return self.trigger.getSearcher().isSearching();
}; }
var isPopupView = function () { function isPopupView() {
return self.combo.isViewVisible(); return self.combo.isViewVisible();
}; }
this.trigger.on(BI.MultiSelectTrigger.EVENT_FOCUS, function () { this.trigger.on(MultiSelectTrigger.EVENT_FOCUS, () => {
self.fireEvent(BI.MultiTreeCombo.EVENT_FOCUS); self.fireEvent(MultiTreeCombo.EVENT_FOCUS);
}); });
this.trigger.on(BI.MultiSelectTrigger.EVENT_BLUR, function () { this.trigger.on(MultiSelectTrigger.EVENT_BLUR, () => {
self.fireEvent(BI.MultiTreeCombo.EVENT_BLUR); self.fireEvent(MultiTreeCombo.EVENT_BLUR);
}); });
this.trigger.on(BI.MultiSelectTrigger.EVENT_START, function () { this.trigger.on(MultiSelectTrigger.EVENT_START, function () {
self.storeValue = { value: self.combo.getValue() }; self.storeValue = { value: self.combo.getValue() };
this.setValue(self.storeValue); this.setValue(self.storeValue);
self.numberCounter.setValue(self.storeValue); self.numberCounter.setValue(self.storeValue);
}); });
this.trigger.on(BI.MultiSelectTrigger.EVENT_STOP, function () { this.trigger.on(MultiSelectTrigger.EVENT_STOP, function () {
self.storeValue = { value: this.getValue() }; self.storeValue = { value: this.getValue() };
self.combo.setValue(self.storeValue); self.combo.setValue(self.storeValue);
self.numberCounter.setValue(self.storeValue); self.numberCounter.setValue(self.storeValue);
BI.nextTick(function () { nextTick(() => {
if (isPopupView()) { if (isPopupView()) {
self.combo.populate(); self.combo.populate();
} }
}); });
self.fireEvent(BI.MultiTreeCombo.EVENT_STOP); self.fireEvent(MultiTreeCombo.EVENT_STOP);
}); });
this.trigger.on(BI.MultiSelectTrigger.EVENT_SEARCHING, function () { this.trigger.on(MultiSelectTrigger.EVENT_SEARCHING, () => {
self.fireEvent(BI.MultiTreeCombo.EVENT_SEARCHING); self.fireEvent(MultiTreeCombo.EVENT_SEARCHING);
}); });
function showCounter() { function showCounter() {
@ -174,28 +216,33 @@ BI.MultiTreeCombo = BI.inherit(BI.Single, {
self.numberCounter.setValue(self.storeValue); self.numberCounter.setValue(self.storeValue);
} }
this.trigger.on(BI.MultiSelectTrigger.EVENT_TRIGGER_CLICK, function () { this.trigger.on(MultiSelectTrigger.EVENT_TRIGGER_CLICK, () => {
self.combo.toggle(); self.combo.toggle();
}); });
this.trigger.on(BI.MultiSelectTrigger.EVENT_COUNTER_CLICK, function () { this.trigger.on(MultiSelectTrigger.EVENT_COUNTER_CLICK, () => {
if (!self.combo.isViewVisible()) { if (!self.combo.isViewVisible()) {
self.combo.showView(); self.combo.showView();
} }
}); });
this.trigger.on(BI.MultiSelectTrigger.EVENT_CHANGE, function () { this.trigger.on(MultiSelectTrigger.EVENT_CHANGE, function () {
var checked = this.getSearcher().hasChecked(); const checked = this.getSearcher().hasChecked();
var val = { const val = {
type: BI.Selection.Multi, type: BI.Selection.Multi,
value: checked ? { 1: 1 } : {} value: checked ? { 1: 1 } : {},
}; };
this.getSearcher().setState(checked ? BI.Selection.Multi : BI.Selection.None); this.getSearcher().setState(
checked ? BI.Selection.Multi : BI.Selection.None
);
self.numberCounter.setButtonChecked(val); self.numberCounter.setButtonChecked(val);
self.fireEvent(BI.MultiTreeCombo.EVENT_CLICK_ITEM, self.combo.getValue()); self.fireEvent(
MultiTreeCombo.EVENT_CLICK_ITEM,
self.combo.getValue()
);
self._dataChange = true; self._dataChange = true;
}); });
this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () { this.combo.on(Combo.EVENT_BEFORE_POPUPVIEW, function () {
if (isSearching()) { if (isSearching()) {
return; return;
} }
@ -209,12 +256,13 @@ BI.MultiTreeCombo = BI.inherit(BI.Single, {
self.combo.setValue(self.storeValue); self.combo.setValue(self.storeValue);
self.numberCounter.setValue(self.storeValue); self.numberCounter.setValue(self.storeValue);
self.populate(); self.populate();
self.fireEvent(BI.MultiTreeCombo.EVENT_BEFORE_POPUPVIEW); self.fireEvent(MultiTreeCombo.EVENT_BEFORE_POPUPVIEW);
}); });
this.combo.on(BI.Combo.EVENT_BEFORE_HIDEVIEW, function () { this.combo.on(Combo.EVENT_BEFORE_HIDEVIEW, () => {
if (isSearching()) { if (isSearching()) {
self._stopEditing(); self._stopEditing();
self._dataChange && self.fireEvent(BI.MultiTreeCombo.EVENT_CONFIRM); self._dataChange &&
self.fireEvent(MultiTreeCombo.EVENT_CONFIRM);
} else { } else {
if (isPopupView()) { if (isPopupView()) {
self._stopEditing(); self._stopEditing();
@ -222,23 +270,18 @@ BI.MultiTreeCombo = BI.inherit(BI.Single, {
if (clear === true) { if (clear === true) {
self.storeValue = { value: {} }; self.storeValue = { value: {} };
} }
self._dataChange && self.fireEvent(BI.MultiTreeCombo.EVENT_CONFIRM); self._dataChange &&
self.fireEvent(MultiTreeCombo.EVENT_CONFIRM);
} }
} }
clear = false; clear = false;
change = false; change = false;
}); });
this.combo.on(BI.Combo.EVENT_AFTER_HIDEVIEW, function () { this.combo.on(Combo.EVENT_AFTER_HIDEVIEW, () => {
self.fireEvent(BI.MultiTreeCombo.EVENT_AFTER_HIDEVIEW); self.fireEvent(MultiTreeCombo.EVENT_AFTER_HIDEVIEW);
}); });
var triggerBtn = BI.createWidget({ triggerBtn.on(TriggerIconButton.EVENT_CHANGE, () => {
type: "bi.trigger_icon_button",
width: o.height,
height: o.height,
cls: "multi-select-trigger-icon-button"
});
triggerBtn.on(BI.TriggerIconButton.EVENT_CHANGE, function () {
self.numberCounter.hideView(); self.numberCounter.hideView();
if (self.combo.isViewVisible()) { if (self.combo.isViewVisible()) {
self.combo.hideView(); self.combo.hideView();
@ -247,13 +290,13 @@ BI.MultiTreeCombo = BI.inherit(BI.Single, {
} }
}); });
this.numberCounter = BI.createWidget({ this.numberCounter = createWidget({
type: "bi.multi_select_check_selected_switcher", type: "bi.multi_select_check_selected_switcher",
el: { el: {
type: "bi.multi_tree_check_selected_button" type: "bi.multi_tree_check_selected_button",
}, },
popup: { popup: {
type: "bi.multi_tree_check_pane" type: "bi.multi_tree_check_pane",
}, },
masker: { masker: {
offset: { offset: {
@ -265,43 +308,56 @@ BI.MultiTreeCombo = BI.inherit(BI.Single, {
}, },
itemsCreator: o.itemsCreator, itemsCreator: o.itemsCreator,
valueFormatter: o.valueFormatter, valueFormatter: o.valueFormatter,
value: { value: o.value || {} } value: { value: o.value || {} },
});
this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE, function () {
if (!self.combo.isViewVisible()) {
self.combo.showView();
}
}); });
this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW, function () { this.numberCounter.on(
if (want2showCounter === false) { MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE,
want2showCounter = true; () => {
if (!self.combo.isViewVisible()) {
self.combo.showView();
}
} }
if (isInit === true) { );
want2showCounter = null; this.numberCounter.on(
showCounter(); MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW,
() => {
if (want2showCounter === false) {
want2showCounter = true;
}
if (isInit === true) {
want2showCounter = null;
showCounter();
}
} }
}); );
this.numberCounter.on(BI.Events.VIEW, function (b) { this.numberCounter.on(Events.VIEW, b => {
BI.nextTick(function () {// 自动调整宽度 nextTick(() => {
self.trigger.refreshPlaceHolderWidth((b === true ? self.numberCounter.element.outerWidth() + 8 : 0)); // 自动调整宽度
self.trigger.refreshPlaceHolderWidth(
b === true ? self.numberCounter.element.outerWidth() + 8 : 0
);
}); });
}); });
this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW, function () { this.numberCounter.on(
BI.nextTick(function () {// 收起时自动调整宽度 MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW,
self.trigger.refreshPlaceHolderWidth(0); () => {
}); nextTick(() => {
}); // 收起时自动调整宽度
self.trigger.refreshPlaceHolderWidth(0);
});
}
);
this.trigger.element.click(function (e) { this.trigger.element.click(e => {
if (self.trigger.element.find(e.target).length > 0) { if (self.trigger.element.find(e.target).length > 0) {
self.numberCounter.hideView(); self.numberCounter.hideView();
} }
}); });
BI.createWidget({ createWidget({
type: "bi.absolute", type: AbsoluteLayout.xtype,
element: this, element: this,
items: [ items: [
{ {
@ -309,85 +365,76 @@ BI.MultiTreeCombo = BI.inherit(BI.Single, {
left: 0, left: 0,
right: 0, right: 0,
top: 0, top: 0,
bottom: 0 bottom: 0,
}, { },
{
el: triggerBtn, el: triggerBtn,
right: 0, right: 0,
top: 0, top: 0,
bottom: 0 bottom: 0,
}, { },
{
el: { el: {
type: "bi.vertical_adapt", type: VerticalAdaptLayout.xtype,
items: [this.numberCounter] items: [this.numberCounter],
}, },
right: o.height, right: o.height,
top: 0, top: 0,
bottom: 0 bottom: 0,
} }
] ],
}); });
}, }
_stopEditing: function () { _stopEditing() {
this.trigger.stopEditing(); this.trigger.stopEditing();
this.numberCounter.hideView(); this.numberCounter.hideView();
}, }
_defaultState: function () { _defaultState() {
this._stopEditing(); this._stopEditing();
this.combo.hideView(); this.combo.hideView();
}, }
showView: function () { showView() {
this.combo.showView(); this.combo.showView();
}, }
hideView: function () { hideView() {
this.combo.hideView(); this.combo.hideView();
}, }
setValue: function (v) { setValue(v) {
this.storeValue.value = v || {}; this.storeValue.value = v || {};
this.combo.setValue({ this.combo.setValue({
value: v || {} value: v || {},
}); });
this.numberCounter.setValue({ this.numberCounter.setValue({
value: v || {} value: v || {},
}); });
}, }
getSearcher: function () { getSearcher() {
return this.trigger.getSearcher(); return this.trigger.getSearcher();
}, }
getValue: function () { getValue() {
return BI.deepClone(this.storeValue.value); return deepClone(this.storeValue.value);
}, }
populate: function () { populate() {
this.combo.populate(); this.combo.populate();
}, }
focus: function () { focus() {
this.trigger.focus(); this.trigger.focus();
}, }
blur: function () { blur() {
this.trigger.blur(); this.trigger.blur();
}, }
setWaterMark: function (v) { setWaterMark(v) {
this.trigger.setWaterMark(v); this.trigger.setWaterMark(v);
} }
}); }
BI.MultiTreeCombo.EVENT_FOCUS = "EVENT_FOCUS";
BI.MultiTreeCombo.EVENT_BLUR = "EVENT_BLUR";
BI.MultiTreeCombo.EVENT_STOP = "EVENT_STOP";
BI.MultiTreeCombo.EVENT_SEARCHING = "EVENT_SEARCHING";
BI.MultiTreeCombo.EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM";
BI.MultiTreeCombo.EVENT_CONFIRM = "EVENT_CONFIRM";
BI.MultiTreeCombo.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
BI.MultiTreeCombo.EVENT_AFTER_HIDEVIEW = "EVENT_AFTER_HIDEVIEW";
BI.shortcut("bi.multi_tree_combo", BI.MultiTreeCombo);

371
src/widget/multitree/multi.tree.insert.combo.js

@ -1,34 +1,58 @@
/** import {
* 可以往当前选中节点下添加新值的下拉树 shortcut,
* @class BI.MultiTreeInsertCombo extend,
* @extends BI.Single emptyFn,
*/ createWidget,
toPix,
BI.MultiTreeInsertCombo = BI.inherit(BI.Single, { nextTick,
Events,
_defaultConfig: function () { AbsoluteLayout,
return BI.extend(BI.MultiTreeInsertCombo.superclass._defaultConfig.apply(this, arguments), { VerticalAdaptLayout,
deepClone
} from "@/core";
import { Single, Combo } from "@/base";
import { MultiTreeSearchInsertPane } from "./trigger/multi.tree.search.insert.pane";
import { MultiTreePopup } from "./multi.tree.popup";
import { MultiSelectTrigger } from "../multiselect/multiselect.trigger";
import { TriggerIconButton } from "@/case";
import { MultiSelectCheckSelectedSwitcher } from "../multiselect/trigger/switcher.checkselected";
@shortcut()
export class MultiTreeInsertCombo extends Single {
static xtype = "bi.multi_tree_insert_combo";
static EVENT_FOCUS = "EVENT_FOCUS";
static EVENT_BLUR = "EVENT_BLUR";
static EVENT_STOP = "EVENT_STOP";
static EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM";
static EVENT_SEARCHING = "EVENT_SEARCHING";
static EVENT_CONFIRM = "EVENT_CONFIRM";
static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-multi-tree-insert-combo", baseCls: "bi-multi-tree-insert-combo",
itemsCreator: BI.emptyFn, itemsCreator: emptyFn,
valueFormatter: BI.emptyFn, valueFormatter: emptyFn,
height: 24, height: 24,
allowEdit: true, allowEdit: true,
isNeedAdjustWidth: true, isNeedAdjustWidth: true,
}); });
}, }
_init: function () { _init() {
var self = this, o = this.options; const self = this,
BI.MultiTreeInsertCombo.superclass._init.apply(this, arguments); o = this.options;
var isInit = false; super._init(...arguments);
var want2showCounter = false; let isInit = false;
let want2showCounter = false;
this.storeValue = { value: o.value || {} }; this.storeValue = { value: o.value || {} };
this.trigger = BI.createWidget({ this.trigger = createWidget({
type: "bi.multi_select_trigger", type: "bi.multi_select_trigger",
allowEdit: o.allowEdit, allowEdit: o.allowEdit,
height: BI.toPix(o.height, o.simple ? 1 : 2), height: toPix(o.height, o.simple ? 1 : 2),
valueFormatter: o.valueFormatter, valueFormatter: o.valueFormatter,
text: o.text, text: o.text,
defaultText: o.defaultText, defaultText: o.defaultText,
@ -49,85 +73,94 @@ BI.MultiTreeInsertCombo = BI.inherit(BI.Single, {
type: "bi.multi_tree_search_insert_pane", type: "bi.multi_tree_search_insert_pane",
listeners: [ listeners: [
{ {
eventName: BI.MultiTreeSearchInsertPane.EVENT_ADD_ITEM, eventName: MultiTreeSearchInsertPane.EVENT_ADD_ITEM,
action: function () { action() {
self.storeValue.value[self.trigger.getSearcher().getKeyword()] = {}; self.storeValue.value[
self.trigger.getSearcher().getKeyword()
] = {};
self._assertShowValue(); self._assertShowValue();
// setValue以更新paras.value, 之后从search popup中拿到的就能有add的值了 // setValue以更新paras.value, 之后从search popup中拿到的就能有add的值了
self.combo.setValue(self.storeValue); self.combo.setValue(self.storeValue);
self.numberCounter.setValue(self.storeValue); self.numberCounter.setValue(self.storeValue);
self._stopEditing(); self._stopEditing();
self._dataChange = true; self._dataChange = true;
} },
}, { },
eventName: BI.MultiTreeSearchInsertPane.EVENT_CLICK_TREE_NODE, {
action: function () { eventName:
MultiTreeSearchInsertPane.EVENT_CLICK_TREE_NODE,
action() {
self._dataChange = true; self._dataChange = true;
} },
} }
] ],
} },
}, },
value: { value: o.value || {} } value: { value: o.value || {} },
}); });
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: !o.allowEdit, toggle: !o.allowEdit,
container: o.container, container: o.container,
el: this.trigger, el: this.trigger,
adjustLength: 1, adjustLength: 1,
popup: { popup: {
type: "bi.multi_tree_popup_view", type: "bi.multi_tree_popup_view",
ref: function () { ref() {
self.popup = this; self.popup = this;
self.trigger.setAdapter(this); self.trigger.setAdapter(this);
self.numberCounter.setAdapter(this); self.numberCounter.setAdapter(this);
}, },
listeners: [ listeners: [
{ {
eventName: BI.MultiTreePopup.EVENT_AFTERINIT, eventName: MultiTreePopup.EVENT_AFTERINIT,
action: function () { action() {
self.numberCounter.adjustView(); self.numberCounter.adjustView();
isInit = true; isInit = true;
if (want2showCounter === true) { if (want2showCounter === true) {
showCounter(); showCounter();
} }
} },
}, { },
eventName: BI.MultiTreePopup.EVENT_CHANGE, {
action: function () { eventName: MultiTreePopup.EVENT_CHANGE,
action() {
change = true; change = true;
var val = { const val = {
type: BI.Selection.Multi, type: BI.Selection.Multi,
value: this.hasChecked() ? this.getValue() : {} value: this.hasChecked() ? this.getValue() : {},
}; };
self.trigger.getSearcher().setState(val); self.trigger.getSearcher().setState(val);
self.numberCounter.setButtonChecked(val); self.numberCounter.setButtonChecked(val);
self.storeValue = { value: self.combo.getValue() }; self.storeValue = { value: self.combo.getValue() };
self.fireEvent(BI.MultiTreeInsertCombo.EVENT_CLICK_ITEM, self.getValue()); self.fireEvent(
MultiTreeInsertCombo.EVENT_CLICK_ITEM,
self.getValue()
);
self._dataChange = true; self._dataChange = true;
} },
}, { },
eventName: BI.MultiTreePopup.EVENT_CLICK_CONFIRM, {
action: function () { eventName: MultiTreePopup.EVENT_CLICK_CONFIRM,
action() {
self.combo.hideView(); self.combo.hideView();
} },
}, { },
eventName: BI.MultiTreePopup.EVENT_CLICK_CLEAR, {
action: function () { eventName: MultiTreePopup.EVENT_CLICK_CLEAR,
action() {
clear = true; clear = true;
self._dataChange = true; self._dataChange = true;
self.setValue(); self.setValue();
self._defaultState(); self._defaultState();
} },
} }
], ],
itemsCreator: o.itemsCreator, itemsCreator: o.itemsCreator,
onLoaded: function () { onLoaded() {
BI.nextTick(function () { nextTick(() => {
self.numberCounter.adjustView(); self.numberCounter.adjustView();
self.trigger.getSearcher().adjustView(); self.trigger.getSearcher().adjustView();
}); });
@ -136,49 +169,51 @@ BI.MultiTreeInsertCombo = BI.inherit(BI.Single, {
}, },
isNeedAdjustWidth: o.isNeedAdjustWidth, isNeedAdjustWidth: o.isNeedAdjustWidth,
value: { value: o.value || {} }, value: { value: o.value || {} },
hideChecker: function (e) { hideChecker(e) {
return triggerBtn.element.find(e.target).length === 0 && return (
self.numberCounter.element.find(e.target).length === 0; triggerBtn.element.find(e.target).length === 0 &&
} self.numberCounter.element.find(e.target).length === 0
);
},
}); });
var change = false; var change = false;
var clear = false; // 标识当前是否点击了清空 var clear = false; // 标识当前是否点击了清空
var isSearching = function () { const isSearching = function () {
return self.trigger.getSearcher().isSearching(); return self.trigger.getSearcher().isSearching();
}; };
var isPopupView = function () { const isPopupView = function () {
return self.combo.isViewVisible(); return self.combo.isViewVisible();
}; };
this.trigger.on(BI.MultiSelectTrigger.EVENT_FOCUS, function () { this.trigger.on(MultiSelectTrigger.EVENT_FOCUS, () => {
self.fireEvent(BI.MultiTreeInsertCombo.EVENT_FOCUS); self.fireEvent(MultiTreeInsertCombo.EVENT_FOCUS);
}); });
this.trigger.on(BI.MultiSelectTrigger.EVENT_BLUR, function () { this.trigger.on(MultiSelectTrigger.EVENT_BLUR, () => {
self.fireEvent(BI.MultiTreeInsertCombo.EVENT_BLUR); self.fireEvent(MultiTreeInsertCombo.EVENT_BLUR);
}); });
this.trigger.on(BI.MultiSelectTrigger.EVENT_START, function () { this.trigger.on(MultiSelectTrigger.EVENT_START, function () {
self.storeValue = { value: self.combo.getValue() }; self.storeValue = { value: self.combo.getValue() };
this.setValue(self.storeValue); this.setValue(self.storeValue);
self.numberCounter.setValue(self.storeValue); self.numberCounter.setValue(self.storeValue);
}); });
this.trigger.on(BI.MultiSelectTrigger.EVENT_STOP, function () { this.trigger.on(MultiSelectTrigger.EVENT_STOP, function () {
self.storeValue = { value: this.getValue() }; self.storeValue = { value: this.getValue() };
self.combo.setValue(self.storeValue); self.combo.setValue(self.storeValue);
self.numberCounter.setValue(self.storeValue); self.numberCounter.setValue(self.storeValue);
BI.nextTick(function () { nextTick(() => {
if (isPopupView()) { if (isPopupView()) {
self.combo.populate(); self.combo.populate();
} }
}); });
self.fireEvent(BI.MultiTreeInsertCombo.EVENT_STOP); self.fireEvent(MultiTreeInsertCombo.EVENT_STOP);
}); });
this.trigger.on(BI.MultiSelectTrigger.EVENT_SEARCHING, function () { this.trigger.on(MultiSelectTrigger.EVENT_SEARCHING, () => {
self.fireEvent(BI.MultiTreeInsertCombo.EVENT_SEARCHING); self.fireEvent(MultiTreeInsertCombo.EVENT_SEARCHING);
}); });
function showCounter() { function showCounter() {
@ -191,23 +226,28 @@ BI.MultiTreeInsertCombo = BI.inherit(BI.Single, {
self.numberCounter.setValue(self.storeValue); self.numberCounter.setValue(self.storeValue);
} }
this.trigger.on(BI.MultiSelectTrigger.EVENT_TRIGGER_CLICK, function () { this.trigger.on(MultiSelectTrigger.EVENT_TRIGGER_CLICK, () => {
self.combo.toggle(); self.combo.toggle();
}); });
this.trigger.on(BI.MultiSelectTrigger.EVENT_CHANGE, function () { this.trigger.on(MultiSelectTrigger.EVENT_CHANGE, function () {
var checked = this.getSearcher().hasChecked(); const checked = this.getSearcher().hasChecked();
var val = { const val = {
type: BI.Selection.Multi, type: BI.Selection.Multi,
value: checked ? { 1: 1 } : {} value: checked ? { 1: 1 } : {},
}; };
this.getSearcher().setState(checked ? BI.Selection.Multi : BI.Selection.None); this.getSearcher().setState(
checked ? BI.Selection.Multi : BI.Selection.None
);
self.numberCounter.setButtonChecked(val); self.numberCounter.setButtonChecked(val);
self.fireEvent(BI.MultiTreeInsertCombo.EVENT_CLICK_ITEM, self.combo.getValue()); self.fireEvent(
MultiTreeInsertCombo.EVENT_CLICK_ITEM,
self.combo.getValue()
);
self._dataChange = true; self._dataChange = true;
}); });
this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () { this.combo.on(Combo.EVENT_BEFORE_POPUPVIEW, function () {
if (isSearching()) { if (isSearching()) {
return; return;
} }
@ -221,12 +261,13 @@ BI.MultiTreeInsertCombo = BI.inherit(BI.Single, {
self.combo.setValue(self.storeValue); self.combo.setValue(self.storeValue);
self.numberCounter.setValue(self.storeValue); self.numberCounter.setValue(self.storeValue);
self.populate(); self.populate();
self.fireEvent(BI.MultiTreeInsertCombo.EVENT_BEFORE_POPUPVIEW); self.fireEvent(MultiTreeInsertCombo.EVENT_BEFORE_POPUPVIEW);
}); });
this.combo.on(BI.Combo.EVENT_BEFORE_HIDEVIEW, function () { this.combo.on(Combo.EVENT_BEFORE_HIDEVIEW, () => {
if (isSearching()) { if (isSearching()) {
self._stopEditing(); self._stopEditing();
self._dataChange && self.fireEvent(BI.MultiTreeInsertCombo.EVENT_CONFIRM); self._dataChange &&
self.fireEvent(MultiTreeInsertCombo.EVENT_CONFIRM);
} else { } else {
if (isPopupView()) { if (isPopupView()) {
self._stopEditing(); self._stopEditing();
@ -234,20 +275,21 @@ BI.MultiTreeInsertCombo = BI.inherit(BI.Single, {
if (clear === true) { if (clear === true) {
self.storeValue = { value: {} }; self.storeValue = { value: {} };
} }
self._dataChange && self.fireEvent(BI.MultiTreeInsertCombo.EVENT_CONFIRM); self._dataChange &&
self.fireEvent(MultiTreeInsertCombo.EVENT_CONFIRM);
} }
} }
clear = false; clear = false;
change = false; change = false;
}); });
var triggerBtn = BI.createWidget({ var triggerBtn = createWidget({
type: "bi.trigger_icon_button", type: TriggerIconButton.xtype,
width: o.height, width: o.height,
height: o.height, height: o.height,
cls: "multi-select-trigger-icon-button" cls: "multi-select-trigger-icon-button",
}); });
triggerBtn.on(BI.TriggerIconButton.EVENT_CHANGE, function () { triggerBtn.on(TriggerIconButton.EVENT_CHANGE, () => {
self.numberCounter.hideView(); self.numberCounter.hideView();
if (self.combo.isViewVisible()) { if (self.combo.isViewVisible()) {
self.combo.hideView(); self.combo.hideView();
@ -256,13 +298,13 @@ BI.MultiTreeInsertCombo = BI.inherit(BI.Single, {
} }
}); });
this.numberCounter = BI.createWidget({ this.numberCounter = createWidget({
type: "bi.multi_select_check_selected_switcher", type: "bi.multi_select_check_selected_switcher",
el: { el: {
type: "bi.multi_tree_check_selected_button" type: "bi.multi_tree_check_selected_button",
}, },
popup: { popup: {
type: "bi.multi_tree_check_pane" type: "bi.multi_tree_check_pane",
}, },
itemsCreator: o.itemsCreator, itemsCreator: o.itemsCreator,
masker: { masker: {
@ -274,43 +316,56 @@ BI.MultiTreeInsertCombo = BI.inherit(BI.Single, {
}, },
}, },
valueFormatter: o.valueFormatter, valueFormatter: o.valueFormatter,
value: o.value value: o.value,
}); });
this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE, function () { this.numberCounter.on(
if (!self.combo.isViewVisible()) { MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE,
self.combo.showView(); () => {
if (!self.combo.isViewVisible()) {
self.combo.showView();
}
} }
}); );
this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW, function () { this.numberCounter.on(
if (want2showCounter === false) { MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW,
want2showCounter = true; () => {
if (want2showCounter === false) {
want2showCounter = true;
}
if (isInit === true) {
want2showCounter = null;
showCounter();
}
} }
if (isInit === true) { );
want2showCounter = null;
showCounter(); this.numberCounter.on(
MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW,
() => {
nextTick(() => {
// 收起时自动调整宽度
self.trigger.refreshPlaceHolderWidth(0);
});
} }
}); );
this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW, function () { this.numberCounter.on(Events.VIEW, b => {
BI.nextTick(function () {// 收起时自动调整宽度 nextTick(() => {
self.trigger.refreshPlaceHolderWidth(0); // 自动调整宽度
}); self.trigger.refreshPlaceHolderWidth(
}); b === true ? self.numberCounter.element.outerWidth() + 8 : 0
);
this.numberCounter.on(BI.Events.VIEW, function (b) {
BI.nextTick(function () {// 自动调整宽度
self.trigger.refreshPlaceHolderWidth((b === true ? self.numberCounter.element.outerWidth() + 8 : 0));
}); });
}); });
this.trigger.element.click(function (e) { this.trigger.element.click(e => {
if (self.trigger.element.find(e.target).length > 0) { if (self.trigger.element.find(e.target).length > 0) {
self.numberCounter.hideView(); self.numberCounter.hideView();
} }
}); });
BI.createWidget({ createWidget({
type: "bi.absolute", type: AbsoluteLayout.xtype,
element: this, element: this,
items: [ items: [
{ {
@ -318,89 +373,81 @@ BI.MultiTreeInsertCombo = BI.inherit(BI.Single, {
left: 0, left: 0,
right: 0, right: 0,
top: 0, top: 0,
bottom: 0 bottom: 0,
}, { },
{
el: triggerBtn, el: triggerBtn,
right: 0, right: 0,
top: 0, top: 0,
bottom: 0 bottom: 0,
}, { },
{
el: { el: {
type: "bi.vertical_adapt", type: VerticalAdaptLayout.xtype,
items: [this.numberCounter] items: [this.numberCounter],
}, },
right: o.height, right: o.height,
top: 0, top: 0,
height: o.height, height: o.height,
} }
] ],
}); });
}, }
_assertShowValue: function () { _assertShowValue() {
this.trigger.getSearcher().setState(this.storeValue); this.trigger.getSearcher().setState(this.storeValue);
this.numberCounter.setButtonChecked(this.storeValue); this.numberCounter.setButtonChecked(this.storeValue);
}, }
_stopEditing: function () { _stopEditing() {
this.trigger.stopEditing(); this.trigger.stopEditing();
this.numberCounter.hideView(); this.numberCounter.hideView();
}, }
_defaultState: function () { _defaultState() {
this._stopEditing(); this._stopEditing();
this.combo.hideView(); this.combo.hideView();
}, }
getSearcher: function () { getSearcher() {
return this.trigger.getSearcher(); return this.trigger.getSearcher();
}, }
showView: function () { showView() {
this.combo.showView(); this.combo.showView();
}, }
hideView: function () { hideView() {
this.combo.hideView(); this.combo.hideView();
}, }
setValue: function (v) { setValue(v) {
this.storeValue.value = v || {}; this.storeValue.value = v || {};
this.combo.setValue({ this.combo.setValue({
value: v || {} value: v || {},
}); });
this.numberCounter.setValue({ this.numberCounter.setValue({
value: v || {} value: v || {},
}); });
}, }
getValue: function () { getValue() {
return BI.deepClone(this.storeValue.value); return deepClone(this.storeValue.value);
}, }
populate: function () { populate() {
this.combo.populate(); this.combo.populate();
}, }
focus: function () { focus() {
this.trigger.focus(); this.trigger.focus();
}, }
blur: function () { blur() {
this.trigger.blur(); this.trigger.blur();
}, }
setWaterMark: function (v) { setWaterMark(v) {
this.trigger.setWaterMark(v); this.trigger.setWaterMark(v);
} }
}); }
BI.MultiTreeInsertCombo.EVENT_FOCUS = "EVENT_FOCUS";
BI.MultiTreeInsertCombo.EVENT_BLUR = "EVENT_BLUR";
BI.MultiTreeInsertCombo.EVENT_STOP = "EVENT_STOP";
BI.MultiTreeInsertCombo.EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM";
BI.MultiTreeInsertCombo.EVENT_SEARCHING = "EVENT_SEARCHING";
BI.MultiTreeInsertCombo.EVENT_CONFIRM = "EVENT_CONFIRM";
BI.MultiTreeInsertCombo.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
BI.shortcut("bi.multi_tree_insert_combo", BI.MultiTreeInsertCombo);

460
src/widget/multitree/multi.tree.list.combo.js

@ -1,38 +1,68 @@
/** import {
* 选中节点不影响父子节点状态的下拉树 shortcut,
* @class BI.MultiTreeListCombo extend,
* @extends BI.Single emptyFn,
*/ createWidget,
toPix,
BI.MultiTreeListCombo = BI.inherit(BI.Single, { nextTick,
_defaultConfig: function () { Events,
return BI.extend(BI.MultiTreeListCombo.superclass._defaultConfig.apply(this, arguments), { AbsoluteLayout,
VerticalAdaptLayout,
deepClone
} from "@/core";
import { Single, Combo } from "@/base";
import { MultiTreeSearchInsertPane } from "./trigger/multi.tree.search.insert.pane";
import { MultiTreePopup } from "./multi.tree.popup";
import { MultiSelectTrigger } from "../multiselect/multiselect.trigger";
import {
TriggerIconButton,
ListPartTree,
ListDisplayTree,
Listasynctree
} from "@/case";
import { MultiSelectCheckSelectedSwitcher } from "../multiselect/trigger/switcher.checkselected";
@shortcut()
export class MultiTreeListCombo extends Single {
static xtype = "bi.multi_tree_list_combo";
static EVENT_FOCUS = "EVENT_FOCUS";
static EVENT_BLUR = "EVENT_BLUR";
static EVENT_STOP = "EVENT_STOP";
static EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM";
static EVENT_SEARCHING = "EVENT_SEARCHING";
static EVENT_CONFIRM = "EVENT_CONFIRM";
static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-multi-tree-list-combo", baseCls: "bi-multi-tree-list-combo",
itemsCreator: BI.emptyFn, itemsCreator: emptyFn,
valueFormatter: BI.emptyFn, valueFormatter: emptyFn,
height: 24, height: 24,
allowEdit: true, allowEdit: true,
allowInsertValue: true, allowInsertValue: true,
isNeedAdjustWidth: true, isNeedAdjustWidth: true,
text: "", text: "",
}); });
}, }
_init: function () { _init() {
var self = this, o = this.options; const self = this,
BI.MultiTreeListCombo.superclass._init.apply(this, arguments); o = this.options;
var isInit = false; super._init(...arguments);
var want2showCounter = false; let isInit = false;
let want2showCounter = false;
this.storeValue = { value: o.value || [] }; this.storeValue = { value: o.value || [] };
this.trigger = BI.createWidget({ this.trigger = createWidget({
type: "bi.multi_select_trigger", type: "bi.multi_select_trigger",
allowEdit: o.allowEdit, allowEdit: o.allowEdit,
text: o.text, text: o.text,
defaultText: o.defaultText, defaultText: o.defaultText,
watermark: o.watermark, watermark: o.watermark,
height: BI.toPix(o.height, o.simple ? 1 : 2), height: toPix(o.height, o.simple ? 1 : 2),
valueFormatter: o.valueFormatter, valueFormatter: o.valueFormatter,
masker: { masker: {
offset: { offset: {
@ -46,96 +76,110 @@ BI.MultiTreeListCombo = BI.inherit(BI.Single, {
type: "bi.multi_list_tree_searcher", type: "bi.multi_list_tree_searcher",
itemsCreator: o.itemsCreator, itemsCreator: o.itemsCreator,
popup: { popup: {
type: o.allowInsertValue ? "bi.multi_tree_search_insert_pane" : "bi.multi_tree_search_pane", type: o.allowInsertValue
? "bi.multi_tree_search_insert_pane"
: "bi.multi_tree_search_pane",
el: { el: {
type: "bi.list_part_tree" type: ListPartTree.xtype,
}, },
listeners: [{ listeners: [
eventName: BI.MultiTreeSearchInsertPane.EVENT_ADD_ITEM, {
action: function () { eventName: MultiTreeSearchInsertPane.EVENT_ADD_ITEM,
self.storeValue.value.unshift([self.trigger.getSearcher().getKeyword()]); action() {
self._assertShowValue(); self.storeValue.value.unshift([
// setValue以更新paras.value, 之后从search popup中拿到的就能有add的值了 self.trigger.getSearcher().getKeyword()
self.combo.setValue(self.storeValue); ]);
self.numberCounter.setValue(self.storeValue); self._assertShowValue();
self._stopEditing(); // setValue以更新paras.value, 之后从search popup中拿到的就能有add的值了
self._dataChange = true; self.combo.setValue(self.storeValue);
self.numberCounter.setValue(self.storeValue);
self._stopEditing();
self._dataChange = true;
},
} }
}] ],
} },
}, },
switcher: { switcher: {
el: { el: {
type: "bi.multi_tree_check_selected_button" type: "bi.multi_tree_check_selected_button",
}, },
popup: { popup: {
type: "bi.multi_tree_check_pane", type: "bi.multi_tree_check_pane",
el: { el: {
type: "bi.list_display_tree" type: ListDisplayTree.xtype,
}, },
itemsCreator: o.itemsCreator itemsCreator: o.itemsCreator,
} },
}, },
value: this.storeValue value: this.storeValue,
}); });
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: !o.allowEdit, toggle: !o.allowEdit,
container: o.container, container: o.container,
el: this.trigger, el: this.trigger,
adjustLength: 1, adjustLength: 1,
popup: { popup: {
type: "bi.multi_tree_popup_view", type: MultiTreePopup.xtype,
ref: function () { ref() {
self.popup = this; self.popup = this;
self.trigger.setAdapter(this); self.trigger.setAdapter(this);
self.numberCounter.setAdapter(this); self.numberCounter.setAdapter(this);
}, },
el: { el: {
type: "bi.list_async_tree" type: Listasynctree.xtype,
}, },
listeners: [{ listeners: [
eventName: BI.MultiTreePopup.EVENT_AFTERINIT, {
action: function () { eventName: MultiTreePopup.EVENT_AFTERINIT,
self.numberCounter.adjustView(); action() {
isInit = true; self.numberCounter.adjustView();
if (want2showCounter === true) { isInit = true;
showCounter(); if (want2showCounter === true) {
} showCounter();
} }
}, { },
eventName: BI.MultiTreePopup.EVENT_CHANGE, },
action: function () { {
change = true; eventName: MultiTreePopup.EVENT_CHANGE,
var val = { action() {
type: BI.Selection.Multi, change = true;
value: this.hasChecked() ? this.getValue() : [] const val = {
}; type: BI.Selection.Multi,
self.trigger.getSearcher().setState(val); value: this.hasChecked() ? this.getValue() : [],
self.numberCounter.setButtonChecked(val); };
self.storeValue = { value: self.combo.getValue() }; self.trigger.getSearcher().setState(val);
self.fireEvent(BI.MultiTreeListCombo.EVENT_CLICK_ITEM, self.getValue()); self.numberCounter.setButtonChecked(val);
self._dataChange = true; self.storeValue = { value: self.combo.getValue() };
} self.fireEvent(
}, { MultiTreeListCombo.EVENT_CLICK_ITEM,
eventName: BI.MultiTreePopup.EVENT_CLICK_CONFIRM, self.getValue()
action: function () { );
self.combo.hideView(); self._dataChange = true;
} },
}, { },
eventName: BI.MultiTreePopup.EVENT_CLICK_CLEAR, {
action: function () { eventName: MultiTreePopup.EVENT_CLICK_CONFIRM,
clear = true; action() {
self._dataChange = true; self.combo.hideView();
self.setValue(); },
self._defaultState(); },
{
eventName: MultiTreePopup.EVENT_CLICK_CLEAR,
action() {
clear = true;
self._dataChange = true;
self.setValue();
self._defaultState();
},
} }
}], ],
itemsCreator: o.itemsCreator, itemsCreator: o.itemsCreator,
onLoaded: function () { onLoaded() {
BI.nextTick(function () { nextTick(() => {
self.numberCounter.adjustView(); self.numberCounter.adjustView();
self.trigger.getSearcher().adjustView(); self.trigger.getSearcher().adjustView();
}); });
@ -144,49 +188,51 @@ BI.MultiTreeListCombo = BI.inherit(BI.Single, {
}, },
isNeedAdjustWidth: o.isNeedAdjustWidth, isNeedAdjustWidth: o.isNeedAdjustWidth,
value: this.storeValue, value: this.storeValue,
hideChecker: function (e) { hideChecker(e) {
return triggerBtn.element.find(e.target).length === 0 && return (
self.numberCounter.element.find(e.target).length === 0; triggerBtn.element.find(e.target).length === 0 &&
} self.numberCounter.element.find(e.target).length === 0
);
},
}); });
var change = false; var change = false;
var clear = false; // 标识当前是否点击了清空 var clear = false; // 标识当前是否点击了清空
var isSearching = function () { const isSearching = function () {
return self.trigger.getSearcher().isSearching(); return self.trigger.getSearcher().isSearching();
}; };
var isPopupView = function () { const isPopupView = function () {
return self.combo.isViewVisible(); return self.combo.isViewVisible();
}; };
this.trigger.on(BI.MultiSelectTrigger.EVENT_FOCUS, function () { this.trigger.on(MultiSelectTrigger.EVENT_FOCUS, () => {
self.fireEvent(BI.MultiTreeListCombo.EVENT_FOCUS); self.fireEvent(MultiTreeListCombo.EVENT_FOCUS);
}); });
this.trigger.on(BI.MultiSelectTrigger.EVENT_BLUR, function () { this.trigger.on(MultiSelectTrigger.EVENT_BLUR, () => {
self.fireEvent(BI.MultiTreeListCombo.EVENT_BLUR); self.fireEvent(MultiTreeListCombo.EVENT_BLUR);
}); });
this.trigger.on(BI.MultiSelectTrigger.EVENT_START, function () { this.trigger.on(MultiSelectTrigger.EVENT_START, function () {
self.storeValue = { value: self.combo.getValue() }; self.storeValue = { value: self.combo.getValue() };
this.setValue(self.storeValue); this.setValue(self.storeValue);
self.numberCounter.setValue(self.storeValue); self.numberCounter.setValue(self.storeValue);
}); });
this.trigger.on(BI.MultiSelectTrigger.EVENT_STOP, function () { this.trigger.on(MultiSelectTrigger.EVENT_STOP, function () {
self.storeValue = { value: this.getValue() }; self.storeValue = { value: this.getValue() };
self.combo.setValue(self.storeValue); self.combo.setValue(self.storeValue);
self.numberCounter.setValue(self.storeValue); self.numberCounter.setValue(self.storeValue);
BI.nextTick(function () { nextTick(() => {
if (isPopupView()) { if (isPopupView()) {
self.combo.populate(); self.combo.populate();
} }
}); });
self.fireEvent(BI.MultiTreeListCombo.EVENT_STOP); self.fireEvent(MultiTreeListCombo.EVENT_STOP);
}); });
this.trigger.on(BI.MultiSelectTrigger.EVENT_SEARCHING, function () { this.trigger.on(MultiSelectTrigger.EVENT_SEARCHING, () => {
self.fireEvent(BI.MultiTreeListCombo.EVENT_SEARCHING); self.fireEvent(MultiTreeListCombo.EVENT_SEARCHING);
}); });
function showCounter() { function showCounter() {
@ -199,23 +245,28 @@ BI.MultiTreeListCombo = BI.inherit(BI.Single, {
self.numberCounter.setValue(self.storeValue); self.numberCounter.setValue(self.storeValue);
} }
this.trigger.on(BI.MultiSelectTrigger.EVENT_TRIGGER_CLICK, function () { this.trigger.on(MultiSelectTrigger.EVENT_TRIGGER_CLICK, () => {
self.combo.toggle(); self.combo.toggle();
}); });
this.trigger.on(BI.MultiSelectTrigger.EVENT_CHANGE, function () { this.trigger.on(MultiSelectTrigger.EVENT_CHANGE, function () {
var checked = this.getSearcher().hasChecked(); const checked = this.getSearcher().hasChecked();
var val = { const val = {
type: BI.Selection.Multi, type: BI.Selection.Multi,
value: checked ? { 1: 1 } : {} value: checked ? { 1: 1 } : {},
}; };
this.getSearcher().setState(checked ? BI.Selection.Multi : BI.Selection.None); this.getSearcher().setState(
checked ? BI.Selection.Multi : BI.Selection.None
);
self.numberCounter.setButtonChecked(val); self.numberCounter.setButtonChecked(val);
self.fireEvent(BI.MultiTreeListCombo.EVENT_CLICK_ITEM, self.combo.getValue()); self.fireEvent(
MultiTreeListCombo.EVENT_CLICK_ITEM,
self.combo.getValue()
);
self._dataChange = true; self._dataChange = true;
}); });
this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () { this.combo.on(Combo.EVENT_BEFORE_POPUPVIEW, function () {
if (isSearching()) { if (isSearching()) {
return; return;
} }
@ -229,12 +280,13 @@ BI.MultiTreeListCombo = BI.inherit(BI.Single, {
self.combo.setValue(self.storeValue); self.combo.setValue(self.storeValue);
self.numberCounter.setValue(self.storeValue); self.numberCounter.setValue(self.storeValue);
self.populate(); self.populate();
self.fireEvent(BI.MultiTreeListCombo.EVENT_BEFORE_POPUPVIEW); self.fireEvent(MultiTreeListCombo.EVENT_BEFORE_POPUPVIEW);
}); });
this.combo.on(BI.Combo.EVENT_BEFORE_HIDEVIEW, function () { this.combo.on(Combo.EVENT_BEFORE_HIDEVIEW, () => {
if (isSearching()) { if (isSearching()) {
self.trigger.stopEditing(); self.trigger.stopEditing();
self._dataChange && self.fireEvent(BI.MultiTreeListCombo.EVENT_CONFIRM); self._dataChange &&
self.fireEvent(MultiTreeListCombo.EVENT_CONFIRM);
} else { } else {
if (isPopupView()) { if (isPopupView()) {
self._stopEditing(); self._stopEditing();
@ -242,20 +294,21 @@ BI.MultiTreeListCombo = BI.inherit(BI.Single, {
if (clear === true) { if (clear === true) {
self.storeValue = { value: [] }; self.storeValue = { value: [] };
} }
self._dataChange && self.fireEvent(BI.MultiTreeListCombo.EVENT_CONFIRM); self._dataChange &&
self.fireEvent(MultiTreeListCombo.EVENT_CONFIRM);
} }
} }
clear = false; clear = false;
change = false; change = false;
}); });
var triggerBtn = BI.createWidget({ var triggerBtn = createWidget({
type: "bi.trigger_icon_button", type: TriggerIconButton.xtype,
width: o.height, width: o.height,
height: o.height, height: o.height,
cls: "multi-select-trigger-icon-button" cls: "multi-select-trigger-icon-button",
}); });
triggerBtn.on(BI.TriggerIconButton.EVENT_CHANGE, function () { triggerBtn.on(TriggerIconButton.EVENT_CHANGE, () => {
self.numberCounter.hideView(); self.numberCounter.hideView();
if (self.combo.isViewVisible()) { if (self.combo.isViewVisible()) {
self.combo.hideView(); self.combo.hideView();
@ -264,13 +317,13 @@ BI.MultiTreeListCombo = BI.inherit(BI.Single, {
} }
}); });
this.numberCounter = BI.createWidget({ this.numberCounter = createWidget({
type: "bi.multi_select_check_selected_switcher", type: "bi.multi_select_check_selected_switcher",
el: { el: {
type: "bi.multi_tree_check_selected_button" type: "bi.multi_tree_check_selected_button",
}, },
popup: { popup: {
type: "bi.multi_tree_check_pane" type: "bi.multi_tree_check_pane",
}, },
itemsCreator: o.itemsCreator, itemsCreator: o.itemsCreator,
masker: { masker: {
@ -282,131 +335,138 @@ BI.MultiTreeListCombo = BI.inherit(BI.Single, {
}, },
}, },
valueFormatter: o.valueFormatter, valueFormatter: o.valueFormatter,
value: o.value value: o.value,
});
this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE, function () {
if (!self.combo.isViewVisible()) {
self.combo.showView();
}
}); });
this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW, function () { this.numberCounter.on(
if (want2showCounter === false) { MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE,
want2showCounter = true; () => {
if (!self.combo.isViewVisible()) {
self.combo.showView();
}
} }
if (isInit === true) { );
want2showCounter = null; this.numberCounter.on(
showCounter(); MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW,
() => {
if (want2showCounter === false) {
want2showCounter = true;
}
if (isInit === true) {
want2showCounter = null;
showCounter();
}
} }
}); );
this.numberCounter.on(BI.Events.VIEW, function (b) { this.numberCounter.on(Events.VIEW, b => {
BI.nextTick(function () {// 自动调整宽度 nextTick(() => {
self.trigger.refreshPlaceHolderWidth((b === true ? self.numberCounter.element.outerWidth() + 8 : 0)); // 自动调整宽度
self.trigger.refreshPlaceHolderWidth(
b === true ? self.numberCounter.element.outerWidth() + 8 : 0
);
}); });
}); });
this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW, function () { this.numberCounter.on(
BI.nextTick(function () {// 收起时自动调整宽度 MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW,
self.trigger.refreshPlaceHolderWidth(0); () => {
}); nextTick(() => {
}); // 收起时自动调整宽度
self.trigger.refreshPlaceHolderWidth(0);
});
}
);
this.trigger.element.click(function (e) { this.trigger.element.click(e => {
if (self.trigger.element.find(e.target).length > 0) { if (self.trigger.element.find(e.target).length > 0) {
self.numberCounter.hideView(); self.numberCounter.hideView();
} }
}); });
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,
el: { bottom: 0,
type: "bi.vertical_adapt",
items: [this.numberCounter]
}, },
right: o.height, {
top: 0, el: {
height: o.height, type: VerticalAdaptLayout.xtype,
}] items: [this.numberCounter],
},
right: o.height,
top: 0,
height: o.height,
}
],
}); });
}, }
_assertShowValue: function () { _assertShowValue() {
this.trigger.getSearcher().setState(this.storeValue); this.trigger.getSearcher().setState(this.storeValue);
this.numberCounter.setButtonChecked(this.storeValue); this.numberCounter.setButtonChecked(this.storeValue);
}, }
_stopEditing: function () { _stopEditing() {
this.trigger.stopEditing(); this.trigger.stopEditing();
this.numberCounter.hideView(); this.numberCounter.hideView();
}, }
_defaultState: function () { _defaultState() {
this._stopEditing(); this._stopEditing();
this.combo.hideView(); this.combo.hideView();
}, }
showView: function () { showView() {
this.combo.showView(); this.combo.showView();
}, }
hideView: function () { hideView() {
this.combo.hideView(); this.combo.hideView();
}, }
getSearcher: function () { getSearcher() {
return this.trigger.getSearcher(); return this.trigger.getSearcher();
}, }
setValue: function (v) { setValue(v) {
this.storeValue.value = v || []; this.storeValue.value = v || [];
this.combo.setValue({ this.combo.setValue({
value: v || [] value: v || [],
}); });
this.numberCounter.setValue({ this.numberCounter.setValue({
value: v || [] value: v || [],
}); });
}, }
getValue: function () { getValue() {
return BI.deepClone(this.storeValue.value); return deepClone(this.storeValue.value);
}, }
populate: function () { populate() {
this.combo.populate(); this.combo.populate();
}, }
focus: function () { focus() {
this.trigger.focus(); this.trigger.focus();
}, }
blur: function () { blur() {
this.trigger.blur(); this.trigger.blur();
}, }
setWaterMark: function (v) { setWaterMark(v) {
this.trigger.setWaterMark(v); this.trigger.setWaterMark(v);
} }
}); }
BI.MultiTreeListCombo.EVENT_FOCUS = "EVENT_FOCUS";
BI.MultiTreeListCombo.EVENT_BLUR = "EVENT_BLUR";
BI.MultiTreeListCombo.EVENT_STOP = "EVENT_STOP";
BI.MultiTreeListCombo.EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM";
BI.MultiTreeListCombo.EVENT_SEARCHING = "EVENT_SEARCHING";
BI.MultiTreeListCombo.EVENT_CONFIRM = "EVENT_CONFIRM";
BI.MultiTreeListCombo.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
BI.shortcut("bi.multi_tree_list_combo", BI.MultiTreeListCombo);

114
src/widget/multitree/multi.tree.popup.js

@ -1,106 +1,108 @@
/** import { shortcut, extend, emptyFn, createWidget, i18nText } from "@/core";
* 带加载的多选下拉面板 import { Pane } from "@/base";
* @class BI.MultiTreePopup import { Asynctree, MultiPopupView, TreeView } from "@/case";
* @extends BI.Pane
*/ @shortcut()
BI.MultiTreePopup = BI.inherit(BI.Pane, { export class MultiTreePopup extends Pane {
static xtype = "bi.multi_tree_popup_view";
_defaultConfig: function () {
return BI.extend(BI.MultiTreePopup.superclass._defaultConfig.apply(this, arguments), { static EVENT_CHANGE = "EVENT_CHANGE";
static EVENT_CLICK_CONFIRM = "EVENT_CLICK_CONFIRM";
static EVENT_CLICK_CLEAR = "EVENT_CLICK_CLEAR";
static EVENT_AFTERINIT = "EVENT_AFTERINIT";
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-multi-tree-popup", baseCls: "bi-multi-tree-popup",
maxWidth: "auto", maxWidth: "auto",
minWidth: 140, minWidth: 140,
maxHeight: 400, maxHeight: 400,
onLoaded: BI.emptyFn, onLoaded: emptyFn,
el: { el: {
type: "bi.async_tree" type: Asynctree.xtype,
} },
}); });
}, }
_init: function () { _init() {
BI.MultiTreePopup.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this, opts = this.options, v = opts.value; const self = this,
opts = this.options,
v = opts.value;
this.selectedValues = {}; this.selectedValues = {};
this.tree = BI.createWidget(opts.el, { this.tree = createWidget(opts.el, {
type: "bi.async_tree", type: Asynctree.xtype,
showLine: opts.showLine, showLine: opts.showLine,
height: 400, height: 400,
cls: "popup-view-tree", cls: "popup-view-tree",
itemsCreator: opts.itemsCreator, itemsCreator: opts.itemsCreator,
onLoaded: opts.onLoaded, onLoaded: opts.onLoaded,
value: v.value || {} value: v.value || {},
}); });
this.popupView = BI.createWidget({ this.popupView = createWidget({
type: "bi.multi_popup_view", type: MultiPopupView.xtype,
element: this, element: this,
stopPropagation: false, stopPropagation: false,
maxWidth: opts.maxWidth, maxWidth: opts.maxWidth,
minWidth: opts.minWidth, minWidth: opts.minWidth,
maxHeight: opts.maxHeight, maxHeight: opts.maxHeight,
buttons: [BI.i18nText("BI-Basic_Clears"), BI.i18nText("BI-Basic_OK")], buttons: [i18nText("BI-Basic_Clears"), i18nText("BI-Basic_OK")],
el: this.tree el: this.tree,
}); });
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.MultiTreePopup.EVENT_CLICK_CLEAR); self.fireEvent(MultiTreePopup.EVENT_CLICK_CLEAR);
break; break;
case 1: case 1:
self.fireEvent(BI.MultiTreePopup.EVENT_CLICK_CONFIRM); self.fireEvent(MultiTreePopup.EVENT_CLICK_CONFIRM);
break; break;
}
} }
}); );
this.tree.on(BI.TreeView.EVENT_CHANGE, function () { this.tree.on(TreeView.EVENT_CHANGE, () => {
self.fireEvent(BI.MultiTreePopup.EVENT_CHANGE); self.fireEvent(MultiTreePopup.EVENT_CHANGE);
}); });
this.tree.on(BI.TreeView.EVENT_AFTERINIT, function () { this.tree.on(TreeView.EVENT_AFTERINIT, () => {
self.fireEvent(BI.MultiTreePopup.EVENT_AFTERINIT); self.fireEvent(MultiTreePopup.EVENT_AFTERINIT);
}); });
}
}, getValue() {
getValue: function () {
return this.tree.getValue(); return this.tree.getValue();
}, }
setValue: function (v) { setValue(v) {
v || (v = {}); v || (v = {});
this.tree.setSelectedValue(v.value); this.tree.setSelectedValue(v.value);
}, }
populate: function (config) { populate(config) {
this.tree.stroke(config); this.tree.stroke(config);
}, }
hasChecked: function () { hasChecked() {
return this.tree.hasChecked(); return this.tree.hasChecked();
}, }
setDirection: function (direction, position) { setDirection(direction, position) {
this.popupView.setDirection(direction, position); this.popupView.setDirection(direction, position);
}, }
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);
} }
}); }
BI.MultiTreePopup.EVENT_CHANGE = "EVENT_CHANGE";
BI.MultiTreePopup.EVENT_CLICK_CONFIRM = "EVENT_CLICK_CONFIRM";
BI.MultiTreePopup.EVENT_CLICK_CLEAR = "EVENT_CLICK_CLEAR";
BI.MultiTreePopup.EVENT_AFTERINIT = "EVENT_AFTERINIT";
BI.shortcut("bi.multi_tree_popup_view", BI.MultiTreePopup);

93
src/widget/multitree/trigger/multi.tree.button.checkselected.js

@ -1,67 +1,80 @@
/** import {
* 查看已选按钮 shortcut,
* Created by guy on 15/11/3. extend,
* @class BI.MultiTreeCheckSelectedButton emptyFn,
* @extends BI.Single createWidget,
*/ i18nText,
BI.MultiTreeCheckSelectedButton = BI.inherit(BI.Single, { Controller,
size
} from "@/core";
import { Single, TextButton, IconButton } from "@/base";
import { MultiSelectCheckSelectedButton } from "../../multiselect/trigger/button.checkselected";
_defaultConfig: function () { @shortcut()
return BI.extend(BI.MultiTreeCheckSelectedButton.superclass._defaultConfig.apply(this, arguments), { export class MultiTreeCheckSelectedButton extends Single {
static xtype = "bi.multi_tree_check_selected_button";
static EVENT_CHANGE = "EVENT_CHANGE";
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-multi-tree-check-selected-button", baseCls: "bi-multi-tree-check-selected-button",
itemsCreator: BI.emptyFn itemsCreator: emptyFn,
}); });
}, }
_init: function () { _init() {
BI.MultiTreeCheckSelectedButton.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this; const self = this;
this.indicator = BI.createWidget({ this.indicator = createWidget({
type: "bi.icon_button", type: IconButton.xtype,
cls: "check-font trigger-check-selected icon-size-12", cls: "check-font trigger-check-selected icon-size-12",
width: 16, width: 16,
height: 16, height: 16,
stopPropagation: true stopPropagation: true,
}); });
this.checkSelected = BI.createWidget({ this.checkSelected = createWidget({
type: "bi.text_button", type: TextButton.xtype,
cls: "bi-high-light-background trigger-check-text", cls: "bi-high-light-background trigger-check-text",
invisible: true, invisible: true,
hgap: 4, hgap: 4,
text: BI.i18nText("BI-Check_Selected"), text: i18nText("BI-Check_Selected"),
textAlign: "center", textAlign: "center",
}); });
this.checkSelected.on(BI.Controller.EVENT_CHANGE, function () { this.checkSelected.on(Controller.EVENT_CHANGE, function () {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); self.fireEvent(Controller.EVENT_CHANGE, arguments);
}); });
this.checkSelected.on(BI.TextButton.EVENT_CHANGE, function () { this.checkSelected.on(TextButton.EVENT_CHANGE, function () {
self.fireEvent(BI.MultiSelectCheckSelectedButton.EVENT_CHANGE, arguments); self.fireEvent(
MultiSelectCheckSelectedButton.EVENT_CHANGE,
arguments
);
}); });
BI.createWidget({ createWidget({
type: "bi.horizontal", type: "bi.horizontal",
element: this, element: this,
items: [this.indicator, this.checkSelected] items: [this.indicator, this.checkSelected],
}); });
this.element.hover(function () { this.element.hover(
self.indicator.setVisible(false); () => {
self.checkSelected.setVisible(true); self.indicator.setVisible(false);
}, function () { self.checkSelected.setVisible(true);
self.indicator.setVisible(true); },
self.checkSelected.setVisible(false); () => {
}); self.indicator.setVisible(true);
self.checkSelected.setVisible(false);
}
);
this.setVisible(false); this.setVisible(false);
}, }
setValue: function (v) { setValue(v) {
v || (v = {}); v || (v = {});
var show = BI.size(v.value) > 0; const show = size(v.value) > 0;
this.setVisible(show); this.setVisible(show);
} }
}); }
BI.MultiTreeCheckSelectedButton.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.multi_tree_check_selected_button", BI.MultiTreeCheckSelectedButton);

199
src/widget/multitree/trigger/multi.tree.search.insert.pane.js

@ -1,129 +1,148 @@
/** import {
* shortcut,
* 在搜索框中输入文本弹出的面板 Widget,
* @class BI.MultiTreeSearchInsertPane i18nText,
* @extends BI.Pane extend,
*/ Controller,
AbsoluteLayout,
isEmptyArray
} from "@/core";
import { TreeView, PartTree } from "@/case";
import { TextButton } from "@/base";
BI.MultiTreeSearchInsertPane = BI.inherit(BI.Widget, { @shortcut()
export class MultiTreeSearchInsertPane extends Widget {
static xtype = "bi.multi_tree_search_insert_pane";
constants: { props = {
height: 24,
},
props: {
baseCls: "bi-multi-tree-search-insert-pane bi-card", baseCls: "bi-multi-tree-search-insert-pane bi-card",
itemsCreator: BI.emptyFn, el: { type: PartTree.xtype },
keywordGetter: BI.emptyFn, };
el: {
type: "bi.part_tree" static EVENT_CHANGE = "EVENT_CHANGE";
} static EVENT_CLICK_CONFIRM = "EVENT_CLICK_CONFIRM";
}, static EVENT_CLICK_CLEAR = "EVENT_CLICK_CLEAR";
static EVENT_ADD_ITEM = "EVENT_ADD_ITEM";
static EVENT_CLICK_TREE_NODE = "EVENT_CLICK_TREE_NODE";
render: function () { render() {
var self = this, opts = this.options; const self = this,
opts = this.options;
return { return {
type: "bi.absolute", type: AbsoluteLayout.xtype,
items: [ items: [
{ {
el: { el: {
type: "bi.text_button", type: TextButton.xtype,
invisible: true, invisible: true,
ref: function (_ref) { ref(_ref) {
self.addTip = _ref; self.addTip = _ref;
}, },
text: BI.i18nText("BI-Basic_Click_To_Add_Text", ""), text: i18nText("BI-Basic_Click_To_Add_Text", ""),
height: this.constants.height, height: this.constants.height,
cls: "bi-high-light", cls: "bi-high-light",
handler: function () { handler() {
self.fireEvent(BI.MultiTreeSearchInsertPane.EVENT_ADD_ITEM, opts.keywordGetter()); self.fireEvent(
} MultiTreeSearchInsertPane.EVENT_ADD_ITEM,
opts.keywordGetter()
);
},
}, },
top: 5, top: 5,
left: 0, left: 0,
right: 0 right: 0,
}, { },
el: BI.extend({ {
type: "bi.part_tree", el: extend(
tipText: BI.i18nText("BI-No_Select"), {
itemsCreator: function (op, callback) { type: PartTree.xtype,
op.keyword = opts.keywordGetter(); tipText: i18nText("BI-No_Select"),
opts.itemsCreator(op, function (res) { itemsCreator(op, callback) {
callback(res); op.keyword = opts.keywordGetter();
self.setKeyword(opts.keywordGetter(), res.items); opts.itemsCreator(op, res => {
}); callback(res);
}, self.setKeyword(
ref: function (_ref) { opts.keywordGetter(),
self.partTree = _ref; res.items
}, );
value: opts.value, });
listeners: [ },
{ ref(_ref) {
eventName: BI.Controller.EVENT_CHANGE, self.partTree = _ref;
action: function () { },
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); value: opts.value,
} listeners: [
}, { {
eventName: BI.TreeView.EVENT_CHANGE, eventName: Controller.EVENT_CHANGE,
action: function () { action() {
self.fireEvent(BI.MultiTreeSearchInsertPane.EVENT_CHANGE); self.fireEvent(
} Controller.EVENT_CHANGE,
}, { arguments
eventName: BI.PartTree.EVENT_CLICK_TREE_NODE, );
action: function () { },
self.fireEvent(BI.MultiTreeSearchInsertPane.EVENT_CLICK_TREE_NODE); },
{
eventName: TreeView.EVENT_CHANGE,
action() {
self.fireEvent(
MultiTreeSearchInsertPane.EVENT_CHANGE
);
},
},
{
eventName: PartTree.EVENT_CLICK_TREE_NODE,
action() {
self.fireEvent(
MultiTreeSearchInsertPane.EVENT_CLICK_TREE_NODE
);
},
} }
} ],
] },
}, opts.el), opts.el
),
left: 0, left: 0,
top: 0, top: 0,
bottom: 0, bottom: 0,
right: 0 right: 0,
} }
] ],
}; };
}, }
setKeyword: function (keyword, nodes) { setKeyword(keyword, nodes) {
var isAddTipVisible = BI.isEmptyArray(nodes); const isAddTipVisible = isEmptyArray(nodes);
this.addTip.setVisible(isAddTipVisible); this.addTip.setVisible(isAddTipVisible);
this.partTree.setVisible(!isAddTipVisible); this.partTree.setVisible(!isAddTipVisible);
isAddTipVisible && this.addTip.setText(BI.i18nText("BI-Basic_Click_To_Add_Text", keyword)); isAddTipVisible &&
}, this.addTip.setText(
i18nText("BI-Basic_Click_To_Add_Text", keyword)
);
}
hasChecked: function () { hasChecked() {
return this.partTree.hasChecked(); return this.partTree.hasChecked();
}, }
setValue: function (v) { setValue(v) {
this.setSelectedValue(v.value); this.setSelectedValue(v.value);
}, }
setSelectedValue: function (v) { setSelectedValue(v) {
v || (v = {}); v || (v = {});
this.partTree.setSelectedValue(v); this.partTree.setSelectedValue(v);
}, }
getValue: function () { getValue() {
return this.partTree.getValue(); return this.partTree.getValue();
}, }
empty: function () { empty() {
this.partTree.empty(); this.partTree.empty();
},
populate: function (op) {
this.partTree.stroke.apply(this.partTree, arguments);
} }
});
BI.MultiTreeSearchInsertPane.EVENT_CHANGE = "EVENT_CHANGE";
BI.MultiTreeSearchInsertPane.EVENT_CLICK_CONFIRM = "EVENT_CLICK_CONFIRM"; populate(op) {
BI.MultiTreeSearchInsertPane.EVENT_CLICK_CLEAR = "EVENT_CLICK_CLEAR"; this.partTree.stroke(...arguments);
BI.MultiTreeSearchInsertPane.EVENT_ADD_ITEM = "EVENT_ADD_ITEM"; }
BI.MultiTreeSearchInsertPane.EVENT_CLICK_TREE_NODE = "EVENT_CLICK_TREE_NODE"; }
BI.shortcut("bi.multi_tree_search_insert_pane", BI.MultiTreeSearchInsertPane);

132
src/widget/multitree/trigger/multi.tree.search.pane.js

@ -1,84 +1,84 @@
/** import { shortcut, extend, i18nText, Controller } from "@/core";
* import { Pane } from "@/base";
* 在搜索框中输入文本弹出的面板 import { TreeView, PartTree } from "@/case";
* @class BI.MultiTreeSearchPane
* @extends BI.Pane
*/
BI.MultiTreeSearchPane = BI.inherit(BI.Pane, { @shortcut()
export class MultiTreeSearchPane extends Pane {
static xtype = "bi.multi_tree_search_pane";
props: { props = { baseCls: "bi-multi-tree-search-pane bi-card" };
baseCls: "bi-multi-tree-search-pane bi-card",
itemsCreator: BI.emptyFn,
keywordGetter: BI.emptyFn
},
render: function () { static EVENT_CHANGE = "EVENT_CHANGE";
var self = this, opts = this.options; static EVENT_CLICK_CONFIRM = "EVENT_CLICK_CONFIRM";
static EVENT_CLICK_CLEAR = "EVENT_CLICK_CLEAR";
static EVENT_CLICK_TREE_NODE = "EVENT_CLICK_TREE_NODE";
return BI.extend({ render() {
type: "bi.part_tree", const self = this,
element: this, opts = this.options;
tipText: BI.i18nText("BI-No_Select"),
itemsCreator: function (op, callback) { return extend(
op.keyword = opts.keywordGetter(); {
opts.itemsCreator(op, callback); type: PartTree.xtype,
}, element: this,
value: opts.value, tipText: i18nText("BI-No_Select"),
listeners: [ itemsCreator(op, callback) {
{ op.keyword = opts.keywordGetter();
eventName: BI.Controller.EVENT_CHANGE, opts.itemsCreator(op, callback);
action: function () { },
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); value: opts.value,
} listeners: [
}, { {
eventName: BI.TreeView.EVENT_CHANGE, eventName: Controller.EVENT_CHANGE,
action: function () { action() {
self.fireEvent(BI.MultiTreeSearchPane.EVENT_CHANGE); self.fireEvent(Controller.EVENT_CHANGE, arguments);
} },
}, { },
eventName: BI.PartTree.EVENT_CLICK_TREE_NODE, {
action: function () { eventName: TreeView.EVENT_CHANGE,
self.fireEvent(BI.MultiTreeSearchPane.EVENT_CLICK_TREE_NODE); action() {
self.fireEvent(MultiTreeSearchPane.EVENT_CHANGE);
},
},
{
eventName: PartTree.EVENT_CLICK_TREE_NODE,
action() {
self.fireEvent(
MultiTreeSearchPane.EVENT_CLICK_TREE_NODE
);
},
} }
} ],
], ref(_ref) {
ref: function (_ref) { self.partTree = _ref;
self.partTree = _ref; },
} },
}, opts.el); opts.el
}, );
}
hasChecked: function () { hasChecked() {
return this.partTree.hasChecked(); return this.partTree.hasChecked();
}, }
setValue: function (v) { setValue(v) {
this.setSelectedValue(v.value); this.setSelectedValue(v.value);
}, }
setSelectedValue: function (v) { setSelectedValue(v) {
v || (v = {}); v || (v = {});
this.partTree.setSelectedValue(v); this.partTree.setSelectedValue(v);
}, }
getValue: function () { getValue() {
return this.partTree.getValue(); return this.partTree.getValue();
}, }
empty: function () { empty() {
this.partTree.empty(); this.partTree.empty();
},
populate: function (op) {
this.partTree.stroke.apply(this.partTree, arguments);
} }
});
BI.MultiTreeSearchPane.EVENT_CHANGE = "EVENT_CHANGE"; populate(op) {
this.partTree.stroke(...arguments);
BI.MultiTreeSearchPane.EVENT_CLICK_CONFIRM = "EVENT_CLICK_CONFIRM"; }
BI.MultiTreeSearchPane.EVENT_CLICK_CLEAR = "EVENT_CLICK_CLEAR"; }
BI.MultiTreeSearchPane.EVENT_CLICK_TREE_NODE = "EVENT_CLICK_TREE_NODE";
BI.shortcut("bi.multi_tree_search_pane", BI.MultiTreeSearchPane);

235
src/widget/multitree/trigger/searcher.list.multi.tree.js

@ -1,140 +1,168 @@
/** import {
* searcher shortcut,
* Created by guy on 15/11/3. Widget,
* @class BI.MultiListTreeSearcher extend,
* @extends Widget emptyFn,
*/ createWidget,
BI.MultiListTreeSearcher = BI.inherit(BI.Widget, { isNotNull,
isNumber,
_defaultConfig: function () { size,
return BI.extend(BI.MultiListTreeSearcher.superclass._defaultConfig.apply(this, arguments), { each,
last
} from "@/core";
import { MultiSelectEditor } from "../../multiselect/trigger/editor.multiselect";
import { MultiSelectSearcher } from "../../multiselect/trigger/searcher.multiselect";
import { Searcher } from "@/base";
import { SimpleStateEditor } from "@/case";
import { MultiTreeSearchPane } from "./multi.tree.search.pane";
@shortcut()
export class MultiListTreeSearcher extends Widget {
static xtype = "bi.multi_list_tree_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";
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-multi-list-tree-searcher", baseCls: "bi-multi-list-tree-searcher",
itemsCreator: BI.emptyFn, itemsCreator: emptyFn,
valueFormatter: function (v) { valueFormatter(v) {
return v; return v;
}, },
popup: {}, popup: {},
adapter: null, adapter: null,
masker: {} masker: {},
}); });
}, }
_init: function () { _init() {
BI.MultiListTreeSearcher.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this, o = this.options; const self = this,
this.editor = BI.createWidget({ o = this.options;
type: "bi.multi_select_editor", this.editor = createWidget({
type: MultiSelectEditor.xtype,
height: o.height, height: o.height,
text: o.text, text: o.text,
defaultText: o.defaultText, defaultText: o.defaultText,
watermark: o.watermark, watermark: o.watermark,
el: { el: {
type: "bi.simple_state_editor", type: SimpleStateEditor.xtype,
height: o.height height: o.height,
}, },
listeners: [{ listeners: [
eventName: BI.MultiSelectEditor.EVENT_FOCUS, {
action: function () { eventName: MultiSelectEditor.EVENT_FOCUS,
self.fireEvent(BI.MultiSelectSearcher.EVENT_FOCUS); action() {
} self.fireEvent(MultiSelectSearcher.EVENT_FOCUS);
}, { },
eventName: BI.MultiSelectEditor.EVENT_BLUR, },
action: function () { {
self.fireEvent(BI.MultiSelectSearcher.EVENT_BLUR); eventName: MultiSelectEditor.EVENT_BLUR,
action() {
self.fireEvent(MultiSelectSearcher.EVENT_BLUR);
},
} }
}] ],
}); });
this.searcher = BI.createWidget({ this.searcher = createWidget({
type: "bi.searcher", type: Searcher.xtype,
element: this, element: this,
isAutoSearch: false, isAutoSearch: false,
isAutoSync: false, isAutoSync: false,
onSearch: function (op, callback) { onSearch(op, callback) {
callback({ callback({
keyword: self.editor.getValue() keyword: self.editor.getValue(),
}); });
}, },
el: this.editor, el: this.editor,
popup: BI.extend({ popup: extend(
type: "bi.multi_tree_search_pane", {
keywordGetter: function () { type: MultiTreeSearchPane.xtype,
return self.editor.getValue(); keywordGetter() {
return self.editor.getValue();
},
itemsCreator(op, callback) {
op.keyword = self.editor.getValue();
o.itemsCreator(op, callback);
},
value: o.value,
}, },
itemsCreator: function (op, callback) { o.popup
op.keyword = self.editor.getValue(); ),
o.itemsCreator(op, callback);
},
value: o.value
}, 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.MultiListTreeSearcher.EVENT_START); self.fireEvent(MultiListTreeSearcher.EVENT_START);
}); });
this.searcher.on(BI.Searcher.EVENT_PAUSE, function () { this.searcher.on(Searcher.EVENT_PAUSE, () => {
if (this.hasMatched()) { self.fireEvent(MultiListTreeSearcher.EVENT_PAUSE);
}
self.fireEvent(BI.MultiListTreeSearcher.EVENT_PAUSE);
}); });
this.searcher.on(BI.Searcher.EVENT_STOP, function () { this.searcher.on(Searcher.EVENT_STOP, () => {
self.fireEvent(BI.MultiListTreeSearcher.EVENT_STOP); self.fireEvent(MultiListTreeSearcher.EVENT_STOP);
}); });
this.searcher.on(BI.Searcher.EVENT_CHANGE, function () { this.searcher.on(Searcher.EVENT_CHANGE, function () {
self.fireEvent(BI.MultiListTreeSearcher.EVENT_CHANGE, arguments); self.fireEvent(MultiListTreeSearcher.EVENT_CHANGE, arguments);
}); });
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();
}, }
setAdapter: function (adapter) { setAdapter(adapter) {
this.searcher.setAdapter(adapter); this.searcher.setAdapter(adapter);
}, }
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();
}, }
setState: function (ob) { setState(ob) {
var o = this.options; const o = this.options;
ob || (ob = {}); ob || (ob = {});
ob.value || (ob.value = []); ob.value || (ob.value = []);
var count = 0; let count = 0;
if (BI.isNumber(ob)) { if (isNumber(ob)) {
this.editor.setState(ob); this.editor.setState(ob);
} else if (BI.size(ob.value) === 0) { } else if (size(ob.value) === 0) {
this.editor.setState(BI.Selection.None); this.editor.setState(BI.Selection.None);
} else { } else {
var text = ""; let text = "";
BI.each(ob.value, function (idx, path) { each(ob.value, (idx, path) => {
var childValue = BI.last(path); const childValue = last(path);
text += (path === "null" ? "" : (o.valueFormatter(childValue + "") || childValue) + "; "); text +=
path === "null"
? ""
: `${o.valueFormatter(`${childValue}`) || childValue
}; `;
count++; count++;
}); });
@ -144,45 +172,38 @@ BI.MultiListTreeSearcher = BI.inherit(BI.Widget, {
this.editor.setState(text); this.editor.setState(text);
} }
} }
}, }
getState: function () { getState() {
return this.editor.getState(); return this.editor.getState();
}, }
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);
}, }
focus: function () { focus() {
this.editor.focus(); this.editor.focus();
}, }
blur: function () { blur() {
this.editor.blur(); this.editor.blur();
}, }
setWaterMark: function (v) { setWaterMark(v) {
this.editor.setWaterMark(v); this.editor.setWaterMark(v);
} }
}); }
BI.MultiListTreeSearcher.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
BI.MultiListTreeSearcher.EVENT_CHANGE = "EVENT_CHANGE";
BI.MultiListTreeSearcher.EVENT_START = "EVENT_START";
BI.MultiListTreeSearcher.EVENT_STOP = "EVENT_STOP";
BI.MultiListTreeSearcher.EVENT_PAUSE = "EVENT_PAUSE";
BI.shortcut("bi.multi_list_tree_searcher", BI.MultiListTreeSearcher);

290
src/widget/multitree/trigger/searcher.multi.tree.js

@ -1,220 +1,260 @@
/** import {
* searcher shortcut,
* Created by guy on 15/11/3. Widget,
* @class BI.MultiTreeSearcher extend,
* @extends Widget emptyFn,
*/ createWidget,
BI.MultiTreeSearcher = BI.inherit(BI.Widget, { isNotNull,
isNumber,
_defaultConfig: function () { size,
return BI.extend(BI.MultiTreeSearcher.superclass._defaultConfig.apply(this, arguments), { keys,
each,
isEmptyObject, Func
} from "@/core";
import { MultiSelectEditor } from "../../multiselect/trigger/editor.multiselect";
import { MultiSelectSearcher } from "../../multiselect/trigger/searcher.multiselect";
import { MultiTreeSearchPane } from "./multi.tree.search.pane";
import { Searcher } from "@/base";
import { SimpleStateEditor } from "@/case";
@shortcut()
export class MultiTreeSearcher extends Widget {
static xtype = "bi.multi_tree_searcher";
static EVENT_SEARCHING = "EVENT_SEARCHING";
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_CLICK_TREE_NODE = "EVENT_CLICK_TREE_NODE";
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-multi-tree-searcher", baseCls: "bi-multi-tree-searcher",
itemsCreator: BI.emptyFn, itemsCreator: emptyFn,
valueFormatter: function (v) { valueFormatter(v) {
return v; return v;
}, },
popup: {}, popup: {},
adapter: null, adapter: null,
masker: {} masker: {},
}); });
}, }
_init: function () { _init() {
BI.MultiTreeSearcher.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this, o = this.options; const self = this,
this.editor = BI.createWidget({ o = this.options;
this.editor = createWidget({
type: "bi.multi_select_editor", type: "bi.multi_select_editor",
watermark: o.watermark, watermark: o.watermark,
height: o.height, height: o.height,
el: { el: {
type: "bi.simple_state_editor", type: SimpleStateEditor.xtype,
text: o.text, text: o.text,
defaultText: o.defaultText, defaultText: o.defaultText,
height: o.height height: o.height,
}, },
listeners: [ listeners: [
{ {
eventName: BI.MultiSelectEditor.EVENT_FOCUS, eventName: MultiSelectEditor.EVENT_FOCUS,
action: function () { action() {
self.fireEvent(BI.MultiSelectSearcher.EVENT_FOCUS); self.fireEvent(MultiSelectSearcher.EVENT_FOCUS);
} },
}, { },
eventName: BI.MultiSelectEditor.EVENT_BLUR, {
action: function () { eventName: MultiSelectEditor.EVENT_BLUR,
self.fireEvent(BI.MultiSelectSearcher.EVENT_BLUR); action() {
} self.fireEvent(MultiSelectSearcher.EVENT_BLUR);
},
} }
] ],
}); });
this.searcher = BI.createWidget({ this.searcher = createWidget({
type: "bi.searcher", type: Searcher.xtype,
element: this, element: this,
isAutoSearch: false, isAutoSearch: false,
isAutoSync: false, isAutoSync: false,
onSearch: function (op, callback) { onSearch(op, callback) {
callback({ callback({
keyword: self.editor.getValue() keyword: self.editor.getValue(),
}); });
}, },
el: this.editor, el: this.editor,
popup: BI.extend({ popup: extend(
type: "bi.multi_tree_search_pane", {
keywordGetter: function () { type: MultiTreeSearchPane.xtype,
return self.editor.getValue(); keywordGetter() {
}, return self.editor.getValue();
itemsCreator: function (op, callback) { },
op.keyword = self.editor.getValue(); itemsCreator(op, callback) {
o.itemsCreator(op, callback); op.keyword = self.editor.getValue();
}, o.itemsCreator(op, callback);
listeners: [ },
{ listeners: [
eventName: BI.MultiTreeSearchPane.EVENT_CLICK_TREE_NODE, {
action: function () { eventName:
self.fireEvent(BI.MultiTreeSearcher.EVENT_CLICK_TREE_NODE, arguments); MultiTreeSearchPane.EVENT_CLICK_TREE_NODE,
action() {
self.fireEvent(
MultiTreeSearcher.EVENT_CLICK_TREE_NODE,
arguments
);
},
} }
} ],
], 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.MultiTreeSearcher.EVENT_START); self.fireEvent(MultiTreeSearcher.EVENT_START);
}); });
this.searcher.on(BI.Searcher.EVENT_PAUSE, function () { this.searcher.on(Searcher.EVENT_PAUSE, () => {
self.fireEvent(BI.MultiTreeSearcher.EVENT_PAUSE); self.fireEvent(MultiTreeSearcher.EVENT_PAUSE);
}); });
this.searcher.on(BI.Searcher.EVENT_STOP, function () { this.searcher.on(Searcher.EVENT_STOP, () => {
self.fireEvent(BI.MultiTreeSearcher.EVENT_STOP); self.fireEvent(MultiTreeSearcher.EVENT_STOP);
}); });
this.searcher.on(BI.Searcher.EVENT_CHANGE, function () { this.searcher.on(Searcher.EVENT_CHANGE, function () {
self.fireEvent(BI.MultiTreeSearcher.EVENT_CHANGE, arguments); self.fireEvent(MultiTreeSearcher.EVENT_CHANGE, arguments);
}); });
this.searcher.on(BI.Searcher.EVENT_SEARCHING, function () { this.searcher.on(Searcher.EVENT_SEARCHING, function () {
var keywords = this.getKeywords(); const keywords = this.getKeywords();
self.fireEvent(BI.MultiTreeSearcher.EVENT_SEARCHING, keywords); self.fireEvent(MultiTreeSearcher.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();
}, }
setAdapter: function (adapter) { setAdapter(adapter) {
this.searcher.setAdapter(adapter); this.searcher.setAdapter(adapter);
}, }
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();
}, }
setState: function (ob) { setState(ob) {
var o = this.options; const o = this.options;
ob || (ob = {}); ob || (ob = {});
ob.value || (ob.value = {}); ob.value || (ob.value = {});
var count = 0; let count = 0;
if (BI.isNumber(ob)) { if (isNumber(ob)) {
this.editor.setState(ob); this.editor.setState(ob);
} else if (BI.size(ob.value) === 0) { } else if (size(ob.value) === 0) {
this.editor.setState(BI.Selection.None); this.editor.setState(BI.Selection.None);
} else { } else {
var text = ""; let text = "";
var value = ob.value; const value = ob.value;
var names = BI.Func.getSortedResult(BI.keys(value)); const names = BI.Func.getSortedResult(keys(value));
BI.each(names, function (idx, name) { each(names, (idx, name) => {
var childNodes = getChildrenNode(value[name]); const childNodes = getChildrenNode(value[name]);
text += (name === "null" ? "" : (o.valueFormatter(name + "") || name)) + (childNodes === "" ? (BI.isEmptyObject(value[name]) ? "" : ":") : (":" + childNodes)) + "; "; text +=
`${(name === "null"
? ""
: o.valueFormatter(`${name}`) || name) +
(childNodes === ""
? isEmptyObject(value[name])
? ""
: ":"
: `:${childNodes}`)
}; `;
if (childNodes === "") { if (childNodes === "") {
count++; count++;
} }
}); });
if (count > 20) { if (count > 20) {
this.editor.setState(BI.Selection.Multi); this.editor.setState(Selection.Multi);
} else { } else {
this.editor.setState(text); this.editor.setState(text);
} }
} }
function getChildrenNode(ob) { function getChildrenNode(ob) {
var text = ""; let text = "";
var index = 0, size = BI.size(ob); const size = size(ob);
var names = BI.Func.getSortedResult(BI.keys(ob)); let index = 0;
BI.each(names, function (idx, name) {
const names = Func.getSortedResult(keys(ob));
each(names, (idx, name) => {
index++; index++;
var childNodes = getChildrenNode(ob[name]); const childNodes = getChildrenNode(ob[name]);
text += (name === "null" ? "" : (o.valueFormatter(name + "") || name)) + (childNodes === "" ? "" : (":" + childNodes)) + (index === size ? "" : ","); text +=
(name === "null"
? ""
: o.valueFormatter(`${name}`) || name) +
(childNodes === "" ? "" : `:${childNodes}`) +
(index === size ? "" : ",");
if (childNodes === "") { if (childNodes === "") {
count++; count++;
} }
}); });
return text; return text;
} }
}, }
getState: function () { getState() {
return this.editor.getState(); return this.editor.getState();
}, }
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);
}, }
focus: function () { focus() {
this.editor.focus(); this.editor.focus();
}, }
blur: function () { blur() {
this.editor.blur(); this.editor.blur();
}, }
setWaterMark: function (v) { setWaterMark(v) {
this.editor.setWaterMark(v); this.editor.setWaterMark(v);
} }
}); }
BI.MultiTreeSearcher.EVENT_SEARCHING = "EVENT_SEARCHING";
BI.MultiTreeSearcher.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
BI.MultiTreeSearcher.EVENT_CHANGE = "EVENT_CHANGE";
BI.MultiTreeSearcher.EVENT_START = "EVENT_START";
BI.MultiTreeSearcher.EVENT_STOP = "EVENT_STOP";
BI.MultiTreeSearcher.EVENT_PAUSE = "EVENT_PAUSE";
BI.MultiTreeSearcher.EVENT_CLICK_TREE_NODE = "EVENT_CLICK_TREE_NODE";
BI.shortcut("bi.multi_tree_searcher", BI.MultiTreeSearcher);

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

@ -1,35 +1,48 @@
/** import {
* 加号表示的组节点 shortcut,
* Created by GUY on 2015/9/6. extend,
* @class BI.SelectTreeFirstPlusGroupNode createWidget,
* @extends BI.NodeButton Controller,
*/ Events,
BI.SelectTreeFirstPlusGroupNode = BI.inherit(BI.NodeButton, { isNotNull, LogicFactory, Direction
_defaultConfig: function () { } from "@/core";
var conf = BI.SelectTreeFirstPlusGroupNode.superclass._defaultConfig.apply(this, arguments); import { NodeButton, Label } from "@/base";
return BI.extend(conf, { import { FirstTreeNodeCheckbox } from "@/case";
baseCls: (conf.baseCls || "") + " bi-select-tree-first-plus-group-node bi-list-item-active",
@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: { logic: {
dynamic: false dynamic: false,
}, },
id: "", id: "",
pId: "", pId: "",
readonly: true, readonly: true,
open: false, open: false,
height: 24 height: 24,
}); });
}, }
_init: function () {
BI.SelectTreeFirstPlusGroupNode.superclass._init.apply(this, arguments); _init() {
var self = this, o = this.options; super._init(...arguments);
this.checkbox = BI.createWidget({ const self = this,
type: "bi.first_tree_node_checkbox", o = this.options;
this.checkbox = createWidget({
type: FirstTreeNodeCheckbox.xtype,
stopPropagation: true, stopPropagation: true,
iconHeight: o.height, iconHeight: o.height,
iconWidth: o.height iconWidth: o.height,
}); });
this.text = BI.createWidget({ this.text = createWidget({
type: "bi.label", type: Label.xtype,
textAlign: "left", textAlign: "left",
whiteSpace: "nowrap", whiteSpace: "nowrap",
textHeight: o.height, textHeight: o.height,
@ -38,10 +51,10 @@ BI.SelectTreeFirstPlusGroupNode = BI.inherit(BI.NodeButton, {
text: o.text, text: o.text,
value: o.value, value: o.value,
keyword: o.keyword, keyword: o.keyword,
py: o.py py: o.py,
}); });
this.checkbox.on(BI.Controller.EVENT_CHANGE, function (type) { this.checkbox.on(Controller.EVENT_CHANGE, function (type) {
if (type === BI.Events.CLICK) { if (type === Events.CLICK) {
if (this.isSelected()) { if (this.isSelected()) {
self.triggerExpand(); self.triggerExpand();
} else { } else {
@ -49,40 +62,48 @@ BI.SelectTreeFirstPlusGroupNode = BI.inherit(BI.NodeButton, {
} }
} }
}); });
var type = BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left); const type = LogicFactory.createLogicTypeByDirection(
var items = BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Left, { Direction.Left
width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, );
el: this.checkbox const items = LogicFactory.createLogicItemsByDirection(
}, this.text); Direction.Left,
BI.createWidget(BI.extend({ {
element: this width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
}, BI.LogicFactory.createLogic(type, BI.extend(o.logic, { el: this.checkbox,
items: items },
})))); this.text
}, );
createWidget(
extend(
{
element: this,
},
LogicFactory.createLogic(
type,
extend(o.logic, {
items,
})
)
)
);
}
isOnce: function () { isOnce() {
return true; return true;
}, }
doRedMark: function () {
this.text.doRedMark.apply(this.text, arguments);
},
unRedMark: function () { doRedMark() {
this.text.unRedMark.apply(this.text, arguments); this.text.doRedMark(...arguments);
}, }
doClick: function () { unRedMark() {
BI.NodeButton.superclass.doClick.apply(this, arguments); this.text.unRedMark(...arguments);
}, }
setOpened: function (v) { setOpened(v) {
BI.SelectTreeFirstPlusGroupNode.superclass.setOpened.apply(this, arguments); super.setOpened(...arguments);
if (BI.isNotNull(this.checkbox)) { if (isNotNull(this.checkbox)) {
this.checkbox.setSelected(v); this.checkbox.setSelected(v);
} }
} }
}); }
BI.shortcut("bi.select_tree_first_plus_group_node", BI.SelectTreeFirstPlusGroupNode);

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

@ -1,35 +1,48 @@
/** import {
* 加号表示的组节点 shortcut,
* Created by GUY on 2015/9/6. extend,
* @class BI.SelectTreeLastPlusGroupNode createWidget,
* @extends BI.NodeButton Controller,
*/ Events,
BI.SelectTreeLastPlusGroupNode = BI.inherit(BI.NodeButton, { isNotNull, LogicFactory, Direction
_defaultConfig: function () { } from "@/core";
var conf = BI.SelectTreeLastPlusGroupNode.superclass._defaultConfig.apply(this, arguments); import { NodeButton, Label } from "@/base";
return BI.extend(conf, { import { LastTreeNodeCheckbox } from "@/case";
baseCls: (conf.baseCls || "") + " bi-select-tree-last-plus-group-node bi-list-item-active",
@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: { logic: {
dynamic: false dynamic: false,
}, },
id: "", id: "",
pId: "", pId: "",
readonly: true, readonly: true,
open: false, open: false,
height: 24 height: 24,
}); });
}, }
_init: function () {
BI.SelectTreeLastPlusGroupNode.superclass._init.apply(this, arguments); _init() {
var self = this, o = this.options; super._init(...arguments);
this.checkbox = BI.createWidget({ const self = this,
type: "bi.last_tree_node_checkbox", o = this.options;
this.checkbox = createWidget({
type: LastTreeNodeCheckbox.xtype,
stopPropagation: true, stopPropagation: true,
iconHeight: o.height, iconHeight: o.height,
iconWidth: o.height iconWidth: o.height,
}); });
this.text = BI.createWidget({ this.text = createWidget({
type: "bi.label", type: Label.xtype,
textAlign: "left", textAlign: "left",
whiteSpace: "nowrap", whiteSpace: "nowrap",
textHeight: o.height, textHeight: o.height,
@ -38,10 +51,10 @@ BI.SelectTreeLastPlusGroupNode = BI.inherit(BI.NodeButton, {
text: o.text, text: o.text,
value: o.value, value: o.value,
keyword: o.keyword, keyword: o.keyword,
py: o.py py: o.py,
}); });
this.checkbox.on(BI.Controller.EVENT_CHANGE, function (type) { this.checkbox.on(Controller.EVENT_CHANGE, function (type) {
if (type === BI.Events.CLICK) { if (type === Events.CLICK) {
if (this.isSelected()) { if (this.isSelected()) {
self.triggerExpand(); self.triggerExpand();
} else { } else {
@ -49,40 +62,48 @@ BI.SelectTreeLastPlusGroupNode = BI.inherit(BI.NodeButton, {
} }
} }
}); });
var type = BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left); const type = LogicFactory.createLogicTypeByDirection(
var items = BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Left, { Direction.Left
width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, );
el: this.checkbox const items = LogicFactory.createLogicItemsByDirection(
}, this.text); Direction.Left,
BI.createWidget(BI.extend({ {
element: this width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
}, BI.LogicFactory.createLogic(type, BI.extend(o.logic, { el: this.checkbox,
items: items },
})))); this.text
}, );
createWidget(
extend(
{
element: this,
},
LogicFactory.createLogic(
type,
extend(o.logic, {
items,
})
)
)
);
}
isOnce: function () { isOnce() {
return true; return true;
}, }
doRedMark: function () {
this.text.doRedMark.apply(this.text, arguments);
},
unRedMark: function () { doRedMark() {
this.text.unRedMark.apply(this.text, arguments); this.text.doRedMark(...arguments);
}, }
doClick: function () { unRedMark() {
BI.NodeButton.superclass.doClick.apply(this, arguments); this.text.unRedMark(...arguments);
}, }
setOpened: function (v) { setOpened(v) {
BI.SelectTreeLastPlusGroupNode.superclass.setOpened.apply(this, arguments); super.setOpened(...arguments);
if (BI.isNotNull(this.checkbox)) { if (isNotNull(this.checkbox)) {
this.checkbox.setSelected(v); this.checkbox.setSelected(v);
} }
} }
}); }
BI.shortcut("bi.select_tree_last_plus_group_node", BI.SelectTreeLastPlusGroupNode);

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

@ -1,35 +1,48 @@
/** import {
* 加号表示的组节点 shortcut,
* Created by GUY on 2015/9/6. extend,
* @class BI.SelectTreeMidPlusGroupNode createWidget,
* @extends BI.NodeButton Controller,
*/ Events,
BI.SelectTreeMidPlusGroupNode = BI.inherit(BI.NodeButton, { isNotNull, Direction, LogicFactory
_defaultConfig: function () { } from "@/core";
var conf = BI.SelectTreeMidPlusGroupNode.superclass._defaultConfig.apply(this, arguments); import { NodeButton, Label } from "@/base";
return BI.extend(conf, { import { MidTreeNodeCheckbox } from "@/case";
baseCls: (conf.baseCls || "") + " bi-select-tree-mid-plus-group-node bi-list-item-active",
@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: { logic: {
dynamic: false dynamic: false,
}, },
id: "", id: "",
pId: "", pId: "",
readonly: true, readonly: true,
open: false, open: false,
height: 24 height: 24,
}); });
}, }
_init: function () {
BI.SelectTreeMidPlusGroupNode.superclass._init.apply(this, arguments); _init() {
var self = this, o = this.options; super._init(...arguments);
this.checkbox = BI.createWidget({ const self = this,
type: "bi.mid_tree_node_checkbox", o = this.options;
this.checkbox = createWidget({
type: MidTreeNodeCheckbox.xtype,
stopPropagation: true, stopPropagation: true,
iconHeight: o.height, iconHeight: o.height,
iconWidth: o.height iconWidth: o.height,
}); });
this.text = BI.createWidget({ this.text = createWidget({
type: "bi.label", type: Label.xtype,
textAlign: "left", textAlign: "left",
whiteSpace: "nowrap", whiteSpace: "nowrap",
textHeight: o.height, textHeight: o.height,
@ -38,10 +51,10 @@ BI.SelectTreeMidPlusGroupNode = BI.inherit(BI.NodeButton, {
text: o.text, text: o.text,
value: o.value, value: o.value,
keyword: o.keyword, keyword: o.keyword,
py: o.py py: o.py,
}); });
this.checkbox.on(BI.Controller.EVENT_CHANGE, function (type) { this.checkbox.on(Controller.EVENT_CHANGE, function (type) {
if (type === BI.Events.CLICK) { if (type === Events.CLICK) {
if (this.isSelected()) { if (this.isSelected()) {
self.triggerExpand(); self.triggerExpand();
} else { } else {
@ -49,40 +62,48 @@ BI.SelectTreeMidPlusGroupNode = BI.inherit(BI.NodeButton, {
} }
} }
}); });
var type = BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left); const type = LogicFactory.createLogicTypeByDirection(
var items = BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Left, { Direction.Left
width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, );
el: this.checkbox const items = LogicFactory.createLogicItemsByDirection(
}, this.text); Direction.Left,
BI.createWidget(BI.extend({ {
element: this width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
}, BI.LogicFactory.createLogic(type, BI.extend(o.logic, { el: this.checkbox,
items: items },
})))); this.text
}, );
createWidget(
extend(
{
element: this,
},
LogicFactory.createLogic(
type,
extend(o.logic, {
items,
})
)
)
);
}
isOnce: function () { isOnce() {
return true; return true;
}, }
doRedMark: function () {
this.text.doRedMark.apply(this.text, arguments);
},
unRedMark: function () { doRedMark() {
this.text.unRedMark.apply(this.text, arguments); this.text.doRedMark(...arguments);
}, }
doClick: function () { unRedMark() {
BI.NodeButton.superclass.doClick.apply(this, arguments); this.text.unRedMark(...arguments);
}, }
setOpened: function (v) { setOpened(v) {
BI.SelectTreeMidPlusGroupNode.superclass.setOpened.apply(this, arguments); super.setOpened(...arguments);
if (BI.isNotNull(this.checkbox)) { if (isNotNull(this.checkbox)) {
this.checkbox.setSelected(v); this.checkbox.setSelected(v);
} }
} }
}); }
BI.shortcut("bi.select_tree_mid_plus_group_node", BI.SelectTreeMidPlusGroupNode);

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

@ -1,35 +1,48 @@
/** import {
* 加号表示的组节点 shortcut,
* Created by GUY on 2015/9/6. extend,
* @class BI.SelectTreePlusGroupNode createWidget,
* @extends BI.NodeButton Controller,
*/ Events,
BI.SelectTreePlusGroupNode = BI.inherit(BI.NodeButton, { isNotNull, LogicFactory
_defaultConfig: function () { } from "@/core";
var conf = BI.SelectTreePlusGroupNode.superclass._defaultConfig.apply(this, arguments); import { NodeButton, Label } from "@/base";
return BI.extend(conf, { import { TreeNodeCheckbox } from "@/case";
baseCls: (conf.baseCls || "") + " bi-select-tree-plus-group-node bi-list-item-active",
@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: { logic: {
dynamic: false dynamic: false,
}, },
id: "", id: "",
pId: "", pId: "",
readonly: true, readonly: true,
open: false, open: false,
height: 24 height: 24,
}); });
}, }
_init: function () {
BI.SelectTreePlusGroupNode.superclass._init.apply(this, arguments); _init() {
var self = this, o = this.options; super._init(...arguments);
this.checkbox = BI.createWidget({ const self = this,
type: "bi.tree_node_checkbox", o = this.options;
this.checkbox = createWidget({
type: TreeNodeCheckbox.xtype,
stopPropagation: true, stopPropagation: true,
iconHeight: o.height, iconHeight: o.height,
iconWidth: o.iconWrapperWidth || o.height iconWidth: o.iconWrapperWidth || o.height,
}); });
this.text = BI.createWidget({ this.text = createWidget({
type: "bi.label", type: Label.xtype,
textAlign: "left", textAlign: "left",
whiteSpace: "nowrap", whiteSpace: "nowrap",
textHeight: o.height, textHeight: o.height,
@ -38,10 +51,10 @@ BI.SelectTreePlusGroupNode = BI.inherit(BI.NodeButton, {
text: o.text, text: o.text,
value: o.value, value: o.value,
keyword: o.keyword, keyword: o.keyword,
py: o.py py: o.py,
}); });
this.checkbox.on(BI.Controller.EVENT_CHANGE, function (type) { this.checkbox.on(Controller.EVENT_CHANGE, function (type) {
if (type === BI.Events.CLICK) { if (type === Events.CLICK) {
if (this.isSelected()) { if (this.isSelected()) {
self.triggerExpand(); self.triggerExpand();
} else { } else {
@ -49,40 +62,48 @@ BI.SelectTreePlusGroupNode = BI.inherit(BI.NodeButton, {
} }
} }
}); });
var type = BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left); const type = LogicFactory.createLogicTypeByDirection(
var items = BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Left, { BI.Direction.Left
width: 24, );
el: this.checkbox const items = LogicFactory.createLogicItemsByDirection(
}, this.text); BI.Direction.Left,
BI.createWidget(BI.extend({ {
element: this width: 24,
}, BI.LogicFactory.createLogic(type, BI.extend(o.logic, { el: this.checkbox,
items: items },
})))); this.text
}, );
createWidget(
extend(
{
element: this,
},
LogicFactory.createLogic(
type,
extend(o.logic, {
items,
})
)
)
);
}
isOnce: function () { isOnce() {
return true; return true;
}, }
doRedMark: function () {
this.text.doRedMark.apply(this.text, arguments);
},
unRedMark: function () { doRedMark() {
this.text.unRedMark.apply(this.text, arguments); this.text.doRedMark(...arguments);
}, }
doClick: function () { unRedMark() {
BI.NodeButton.superclass.doClick.apply(this, arguments); this.text.unRedMark(...arguments);
}, }
setOpened: function (v) { setOpened(v) {
BI.SelectTreePlusGroupNode.superclass.setOpened.apply(this, arguments); super.setOpened(...arguments);
if (BI.isNotNull(this.checkbox)) { if (isNotNull(this.checkbox)) {
this.checkbox.setSelected(v); this.checkbox.setSelected(v);
} }
} }
}); }
BI.shortcut("bi.select_tree_plus_group_node", BI.SelectTreePlusGroupNode);

114
src/widget/selecttree/selecttree.combo.js

@ -1,11 +1,32 @@
/** /**
* @class BI.SelectTreeCombo * @class SelectTreeCombo
* @extends BI.Widget * @extends Widget
*/ */
BI.SelectTreeCombo = BI.inherit(BI.Widget, { import {
shortcut,
_defaultConfig: function () { Widget,
return BI.extend(BI.SelectTreeCombo.superclass._defaultConfig.apply(this, arguments), { extend,
createWidget,
Controller,
contains,
isArray,
toPix,
isKey,
isEmptyArray,
isEmptyString,
find,
isNull
} from "@/core";
import { Combo } from "@/base";
import { SingleTreeTrigger } from "@/widget/singletree/singletree.trigger";
import { SelectTreePopup } from "./selecttree.popup";
@shortcut()
export class SelectTreeCombo extends Widget {
static xtype = "bi.select_tree_combo";
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-select-tree-combo bi-border bi-border-radius", baseCls: "bi-select-tree-combo bi-border bi-border-radius",
height: 24, height: 24,
text: "", text: "",
@ -13,70 +34,68 @@ BI.SelectTreeCombo = BI.inherit(BI.Widget, {
value: "", value: "",
allowClear: false, allowClear: false,
}); });
}, }
_init: function () { _init() {
var self = this, o = this.options; const self = this, o = this.options;
BI.SelectTreeCombo.superclass._init.apply(this, arguments); super._init(...arguments);
this.trigger = BI.createWidget({ this.trigger = createWidget({
type: "bi.single_tree_trigger", type: SingleTreeTrigger.xtype,
text: o.text, text: o.text,
height: BI.toPix(o.height, 2), height: toPix(o.height, 2),
items: o.items, items: o.items,
value: o.value, value: o.value,
allowClear: o.allowClear, allowClear: o.allowClear,
warningTitle: o.warningTitle, warningTitle: o.warningTitle,
}); });
this.trigger.on(BI.SingleTreeTrigger.EVENT_CLEAR, function () { this.trigger.on(SingleTreeTrigger.EVENT_CLEAR, () => {
self._clear(); this._clear();
}); });
this.popup = BI.createWidget({ this.popup = createWidget({
type: "bi.select_level_tree", type: SelectTreePopup.xtype,
items: o.items, items: o.items,
value: o.value value: o.value,
}); });
this.combo = BI.createWidget({ this.combo = createWidget({
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,
element: this, element: this,
adjustLength: 2, adjustLength: 2,
el: this.trigger, el: this.trigger,
popup: { popup: {
el: this.popup el: this.popup,
} },
}); });
this.combo.on(BI.Controller.EVENT_CHANGE, function () { this.combo.on(Controller.EVENT_CHANGE, function () {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); self.fireEvent(Controller.EVENT_CHANGE, arguments);
}); });
this.popup.on(BI.SingleTreePopup.EVENT_CHANGE, function () { this.popup.on(SelectTreePopup.EVENT_CHANGE, () => {
self.setValue(self.popup.getValue()); self.setValue(self.popup.getValue());
self.combo.hideView(); self.combo.hideView();
}); });
if (BI.isKey(o.value)) { if (isKey(o.value)) {
this._checkError(o.value); this._checkError(o.value);
} }
}, }
_checkError: function (v) { _checkError(v) {
if (BI.isNull(v) || BI.isEmptyArray(v) || BI.isEmptyString(v)) { if (isNull(v) || isEmptyArray(v) || isEmptyString(v)) {
this.trigger.options.tipType = "success"; this.trigger.options.tipType = "success";
this.trigger.element.removeClass("error"); this.trigger.element.removeClass("error");
this.element.removeClass("error"); this.element.removeClass("error");
} else { } else {
v = BI.isArray(v) ? v : [v]; v = isArray(v) ? v : [v];
var result = BI.find(this.options.items, function (idx, item) { const result = find(this.options.items, (idx, item) => contains(v, item.value));
return BI.contains(v, item.value); if (isNull(result)) {
});
if (BI.isNull(result)) {
this.trigger.setTipType("warning"); this.trigger.setTipType("warning");
this.element.removeClass("error").addClass("error"); this.element.removeClass("error").addClass("error");
this.trigger.element.removeClass("error").addClass("error"); this.trigger.element.removeClass("error").addClass("error");
@ -86,27 +105,24 @@ BI.SelectTreeCombo = BI.inherit(BI.Widget, {
this.element.removeClass("error"); this.element.removeClass("error");
} }
} }
}, }
_clear: function () { _clear() {
this.setValue([]); this.setValue([]);
}, }
setValue: function (v) { setValue(v) {
v = BI.isArray(v) ? v : [v]; v = isArray(v) ? v : [v];
this.trigger.setValue(v); this.trigger.setValue(v);
this.popup.setValue(v); this.popup.setValue(v);
this._checkError(v); this._checkError(v);
}, }
getValue: function () { getValue() {
return this.popup.getValue(); return this.popup.getValue();
}, }
populate: function (items) { populate(items) {
this.combo.populate(items); this.combo.populate(items);
} }
}); }
BI.shortcut("bi.select_tree_combo", BI.SelectTreeCombo);

77
src/widget/selecttree/selecttree.expander.js

@ -1,77 +1,86 @@
/** import {
* @class BI.SelectTreeExpander shortcut,
* @extends BI.Widget Widget,
*/ extend,
BI.SelectTreeExpander = BI.inherit(BI.Widget, { createWidget,
Controller,
Events,
contains
} from "@/core";
import { Expander } from "@/base";
_defaultConfig: function () { @shortcut()
return BI.extend(BI.SelectTreeExpander.superclass._defaultConfig.apply(this, arguments), { export class SelectTreeExpander extends Widget {
static xtype = "bi.select_tree_expander";
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-select-tree-expander", baseCls: "bi-select-tree-expander",
trigger: "", trigger: "",
toggle: true, toggle: true,
direction: "bottom", direction: "bottom",
isDefaultInit: true, isDefaultInit: true,
el: {}, el: {},
popup: {} popup: {},
}); });
}, }
_init: function () { _init() {
BI.SelectTreeExpander.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this, o = this.options; const self = this,
o = this.options;
this.trigger = BI.createWidget(o.el); this.trigger = createWidget(o.el);
this.trigger.on(BI.Controller.EVENT_CHANGE, function (type) { this.trigger.on(Controller.EVENT_CHANGE, function (type) {
if (type === BI.Events.CLICK) { if (type === Events.CLICK) {
if (this.isSelected()) { if (this.isSelected()) {
self.expander.setValue([]); self.expander.setValue([]);
} }
} }
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); self.fireEvent(Controller.EVENT_CHANGE, arguments);
}); });
this.expander = BI.createWidget({ this.expander = createWidget({
type: "bi.expander", type: Expander.xtype,
element: this, element: this,
trigger: o.trigger, trigger: o.trigger,
toggle: o.toggle, toggle: o.toggle,
direction: o.direction, direction: o.direction,
isDefaultInit: o.isDefaultInit, isDefaultInit: o.isDefaultInit,
el: this.trigger, el: this.trigger,
popup: o.popup popup: o.popup,
}); });
this.expander.on(BI.Controller.EVENT_CHANGE, function (type) { this.expander.on(Controller.EVENT_CHANGE, function (type) {
if (type === BI.Events.CLICK) { if (type === Events.CLICK) {
self.trigger.setSelected(false); self.trigger.setSelected(false);
} }
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); self.fireEvent(Controller.EVENT_CHANGE, arguments);
}); });
}, }
getAllLeaves: function () { getAllLeaves() {
return this.expander.getAllLeaves(); return this.expander.getAllLeaves();
}, }
setValue: function (v) { setValue(v) {
if (BI.contains(v, this.trigger.getValue())) { if (contains(v, this.trigger.getValue())) {
this.trigger.setSelected(true); this.trigger.setSelected(true);
this.expander.setValue([]); this.expander.setValue([]);
} else { } else {
this.trigger.setSelected(false); this.trigger.setSelected(false);
this.expander.setValue(v); this.expander.setValue(v);
} }
}, }
getValue: function () { getValue() {
if (this.trigger.isSelected()) { if (this.trigger.isSelected()) {
return [this.trigger.getValue()]; return [this.trigger.getValue()];
} }
return this.expander.getValue(); return this.expander.getValue();
}, }
populate: function (items) { populate(items) {
this.expander.populate(items); this.expander.populate(items);
} }
}); }
BI.shortcut("bi.select_tree_expander", BI.SelectTreeExpander);

125
src/widget/selecttree/selecttree.popup.js

@ -1,94 +1,109 @@
/** import {
* @class BI.SelectTreePopup shortcut,
* @extends BI.Pane extend,
*/ i18nText,
each,
BI.SelectTreePopup = BI.inherit(BI.Pane, { createWidget,
Controller,
_defaultConfig: function () { isArray, isNotEmptyArray, UUID, defaults, Tree, VerticalLayout
return BI.extend(BI.SelectTreePopup.superclass._defaultConfig.apply(this, arguments), { } from "@/core";
import { Pane } from "@/base";
import { BasicTreeItem, BasicTreeNode, LevelTree, TreeExpander } from "@/case";
@shortcut()
export class SelectTreePopup extends Pane {
static xtype = "bi.select_level_tree";
static EVENT_CHANGE = "EVENT_CHANGE";
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-select-level-tree", baseCls: "bi-select-level-tree",
tipText: BI.i18nText("BI-No_Selected_Item"), tipText: i18nText("BI-No_Selected_Item"),
items: [], items: [],
value: "" value: "",
}); });
}, }
_formatItems: function (nodes, layer, pNode) { _formatItems(nodes, layer, pNode) {
var self = this; const self = this;
BI.each(nodes, function (i, node) { each(nodes, (i, node) => {
var extend = { const extend = {
layer: layer, layer,
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,
pNode: pNode, pNode,
}; };
node.id = node.id || BI.UUID(); node.id = node.id || UUID();
if (node.isParent === true || node.parent === true || BI.isNotEmptyArray(node.children)) { if (
node.isParent === true ||
extend.type = "bi.tree_node"; 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;
}, }
_init: function () { _init() {
BI.SelectTreePopup.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.level_tree", type: LevelTree.xtype,
expander: { expander: {
type: "bi.tree_expander", type: TreeExpander.xtype,
// isDefaultInit: true, // isDefaultInit: true,
selectable: true, selectable: true,
}, },
items: this._formatItems(BI.Tree.transformToTreeFormat(o.items), 0), items: this._formatItems(Tree.transformToTreeFormat(o.items), 0),
value: o.value, value: o.value,
chooseType: BI.Selection.Single chooseType: Selection.Single,
}); });
BI.createWidget({ createWidget({
type: "bi.vertical", type: VerticalLayout.xtype,
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.LevelTree.EVENT_CHANGE, function () { this.tree.on(LevelTree.EVENT_CHANGE, () => {
self.fireEvent(BI.SelectTreePopup.EVENT_CHANGE); self.fireEvent(SelectTreePopup.EVENT_CHANGE);
}); });
this.check(); this.check();
}, }
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) {
BI.SelectTreePopup.superclass.populate.apply(this, arguments);
this.tree.populate(this._formatItems(BI.Tree.transformToTreeFormat(items)));
} }
});
BI.SelectTreePopup.EVENT_CHANGE = "EVENT_CHANGE"; populate(items) {
BI.shortcut("bi.select_level_tree", BI.SelectTreePopup); super.populate(...arguments);
this.tree.populate(
this._formatItems(Tree.transformToTreeFormat(items))
);
}
}

147
src/widget/singletree/singletree.combo.js

@ -1,12 +1,35 @@
/** import {
* @class BI.SingleTreeCombo shortcut,
* @extends BI.Widget Widget,
*/ extend,
BI.SingleTreeCombo = BI.inherit(BI.Widget, { createWidget,
toPix,
_defaultConfig: function (config) { Controller,
return BI.extend(BI.SingleTreeCombo.superclass._defaultConfig.apply(this, arguments), { isKey,
baseCls: "bi-single-tree-combo " + (config.simple ? "bi-border-bottom" : "bi-border bi-border-radius"), isNull,
isEmptyArray,
isEmptyString,
isArray,
contains, find
} from "@/core";
import { Combo } from "@/base";
import { SingleTreeTrigger } from "./singletree.trigger";
import { SingleTreePopup } from "./singletree.popup";
@shortcut()
export class SingleTreeCombo extends Widget {
static xtype = "bi.single_tree_combo";
static EVENT_CHANGE = "EVENT_CHANGE";
static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
_defaultConfig(config) {
return extend(super._defaultConfig(...arguments), {
baseCls:
`bi-single-tree-combo ${
config.simple
? "bi-border-bottom"
: "bi-border bi-border-radius"}`,
trigger: {}, trigger: {},
height: 24, height: 24,
text: "", text: "",
@ -14,75 +37,79 @@ BI.SingleTreeCombo = BI.inherit(BI.Widget, {
value: "", value: "",
allowClear: false, allowClear: false,
}); });
}, }
_init: function () { _init() {
var self = this, o = this.options; const self = this,
BI.SingleTreeCombo.superclass._init.apply(this, arguments); o = this.options;
super._init(...arguments);
this.trigger = BI.createWidget(BI.extend({ this.trigger = createWidget(
type: "bi.single_tree_trigger", extend(
text: o.text, {
defaultText: o.defaultText, type: SingleTreeTrigger.xtype,
height: BI.toPix(o.height, 2), text: o.text,
items: o.items, defaultText: o.defaultText,
value: o.value, height: toPix(o.height, 2),
allowClear: o.allowClear, items: o.items,
warningTitle: o.warningTitle, value: o.value,
}, o.trigger)); allowClear: o.allowClear,
warningTitle: o.warningTitle,
},
o.trigger
)
);
this.trigger.on(BI.SingleTreeTrigger.EVENT_CLEAR, function () { this.trigger.on(SingleTreeTrigger.EVENT_CLEAR, () => {
self._clear(); self._clear();
}); });
this.popup = BI.createWidget({ this.popup = createWidget({
type: "bi.single_level_tree", type: SingleTreePopup.xtype,
items: o.items, items: o.items,
value: o.value value: o.value,
}); });
this.combo = BI.createWidget({ this.combo = createWidget({
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,
element: this, element: this,
adjustLength: 2, adjustLength: 2,
el: this.trigger, el: this.trigger,
popup: { popup: {
el: this.popup el: this.popup,
} },
}); });
this.combo.on(BI.Controller.EVENT_CHANGE, function () { this.combo.on(Controller.EVENT_CHANGE, function () {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); self.fireEvent(Controller.EVENT_CHANGE, arguments);
}); });
this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () { this.combo.on(Combo.EVENT_BEFORE_POPUPVIEW, function () {
self.fireEvent(BI.SingleTreeCombo.EVENT_BEFORE_POPUPVIEW, arguments); self.fireEvent(SingleTreeCombo.EVENT_BEFORE_POPUPVIEW, arguments);
}); });
this.popup.on(BI.SingleTreePopup.EVENT_CHANGE, function () { this.popup.on(SingleTreePopup.EVENT_CHANGE, () => {
self.setValue(self.popup.getValue()); self.setValue(self.popup.getValue());
self.combo.hideView(); self.combo.hideView();
self.fireEvent(BI.SingleTreeCombo.EVENT_CHANGE); self.fireEvent(SingleTreeCombo.EVENT_CHANGE);
}); });
if (BI.isKey(o.value)) { if (isKey(o.value)) {
this._checkError(o.value); this._checkError(o.value);
} }
}, }
_checkError: function (v) { _checkError(v) {
if (BI.isNull(v) || BI.isEmptyArray(v) || BI.isEmptyString(v)) { if (isNull(v) || isEmptyArray(v) || isEmptyString(v)) {
this.trigger.options.tipType = "success"; this.trigger.options.tipType = "success";
this.trigger.element.removeClass("error"); this.trigger.element.removeClass("error");
this.element.removeClass("error"); this.element.removeClass("error");
} else { } else {
v = BI.isArray(v) ? v : [v]; v = isArray(v) ? v : [v];
var result = BI.find(this.options.items, function (idx, item) { const result = find(this.options.items, (idx, item) => contains(v, item.value));
return BI.contains(v, item.value); if (isNull(result)) {
});
if (BI.isNull(result)) {
this.trigger.setTipType("warning"); this.trigger.setTipType("warning");
this.element.removeClass("error").addClass("error"); this.element.removeClass("error").addClass("error");
this.trigger.element.removeClass("error").addClass("error"); this.trigger.element.removeClass("error").addClass("error");
@ -92,28 +119,24 @@ BI.SingleTreeCombo = BI.inherit(BI.Widget, {
this.element.removeClass("error"); this.element.removeClass("error");
} }
} }
}, }
_clear: function () { _clear() {
this.setValue([]); this.setValue([]);
}, }
populate: function (items) { populate(items) {
this.combo.populate(items); this.combo.populate(items);
}, }
setValue: function (v) { setValue(v) {
v = BI.isArray(v) ? v : [v]; v = isArray(v) ? v : [v];
this.trigger.setValue(v); this.trigger.setValue(v);
this.popup.setValue(v); this.popup.setValue(v);
this._checkError(v); this._checkError(v);
}, }
getValue: function () { getValue() {
return this.popup.getValue(); return this.popup.getValue();
} }
}); }
BI.SingleTreeCombo.EVENT_CHANGE = "EVENT_CHANGE";
BI.SingleTreeCombo.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
BI.shortcut("bi.single_tree_combo", BI.SingleTreeCombo);

80
src/widget/singletree/singletree.popup.js

@ -1,66 +1,74 @@
/** import {
* @class BI.SingleTreePopup shortcut,
* @extends BI.Pane extend,
*/ i18nText,
createWidget,
Controller,
isArray, VerticalLayout
} from "@/core";
import { Pane } from "@/base";
import { LevelTree } from "@/case";
BI.SingleTreePopup = BI.inherit(BI.Pane, { @shortcut()
export class SingleTreePopup extends Pane {
static xtype = "bi.single_level_tree";
_defaultConfig: function () { static EVENT_CHANGE = "EVENT_CHANGE";
return BI.extend(BI.SingleTreePopup.superclass._defaultConfig.apply(this, arguments), {
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-single-level-tree", baseCls: "bi-single-level-tree",
tipText: BI.i18nText("BI-No_Selected_Item"), tipText: i18nText("BI-No_Selected_Item"),
items: [], items: [],
value: "" value: "",
}); });
}, }
_init: function () { _init() {
BI.SingleTreePopup.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.level_tree", type: "bi.level_tree",
expander: { expander: {
isDefaultInit: true isDefaultInit: true,
}, },
items: o.items, items: o.items,
value: o.value, value: o.value,
chooseType: BI.Selection.Single chooseType: Selection.Single,
}); });
BI.createWidget({ createWidget({
type: "bi.vertical", type: VerticalLayout.xtype,
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.LevelTree.EVENT_CHANGE, function () { this.tree.on(LevelTree.EVENT_CHANGE, () => {
self.fireEvent(BI.SingleTreePopup.EVENT_CHANGE); self.fireEvent(SingleTreePopup.EVENT_CHANGE);
}); });
this.check(); this.check();
}, }
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) {
BI.SingleTreePopup.superclass.populate.apply(this, arguments); super.populate(...arguments);
this.tree.populate(items); this.tree.populate(items);
} }
}); }
BI.SingleTreePopup.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.single_level_tree", BI.SingleTreePopup);

91
src/widget/singletree/singletree.trigger.js

@ -1,29 +1,41 @@
/** import {
* @class BI.SingleTreeTrigger shortcut,
* @extends BI.Trigger extend,
*/ emptyFn,
createWidget,
contains,
isArray,
some
} from "@/core";
import { Trigger } from "@/base";
import { SelectTextTrigger } from "@/case";
BI.SingleTreeTrigger = BI.inherit(BI.Trigger, { @shortcut()
export class SingleTreeTrigger extends Trigger {
static xtype = "bi.single_tree_trigger";
_defaultConfig: function () { static EVENT_CLEAR = "EVENT_CLEAR";
return BI.extend(BI.SingleTreeTrigger.superclass._defaultConfig.apply(this, arguments), {
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-single-tree-trigger", baseCls: "bi-single-tree-trigger",
height: 24, height: 24,
text: "", text: "",
items: [], items: [],
value: "", value: "",
allowClear: false, allowClear: false,
valueFormatter: BI.emptyFn, valueFormatter: emptyFn,
}); });
}, }
_init: function () { _init() {
BI.SingleTreeTrigger.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this, o = this.options; const self = this,
o = this.options;
this.trigger = BI.createWidget({ this.trigger = createWidget({
type: "bi.select_text_trigger", type: SelectTextTrigger.xtype,
element: this, element: this,
text: o.text, text: o.text,
defaultText: o.defaultText, defaultText: o.defaultText,
@ -36,50 +48,47 @@ BI.SingleTreeTrigger = BI.inherit(BI.Trigger, {
valueFormatter: o.valueFormatter, valueFormatter: o.valueFormatter,
listeners: [ listeners: [
{ {
eventName: BI.SelectTextTrigger.EVENT_CLEAR, eventName: SelectTextTrigger.EVENT_CLEAR,
action: function () { action() {
self.fireEvent(BI.SingleTreeTrigger.EVENT_CLEAR); self.fireEvent(SingleTreeTrigger.EVENT_CLEAR);
} },
} }
] ],
}); });
}, }
_checkTitle() {
const val = this.getValue();
some(this.options.items, (i, item) => {
if (contains(val, item.value)) {
this.trigger.setTitle(item.text || item.value);
_checkTitle: function () {
var self = this, val = this.getValue();
BI.any(this.options.items, function (i, item) {
if (BI.contains(val, item.value)) {
self.trigger.setTitle(item.text || item.value);
return true; return true;
} }
}); });
}, }
setValue: function (v) { setValue(v) {
v = BI.isArray(v) ? v : [v]; v = isArray(v) ? v : [v];
this.options.value = v; this.options.value = v;
this.trigger.setValue(v); this.trigger.setValue(v);
this._checkTitle(); this._checkTitle();
}, }
setTipType: function (v) { setTipType(v) {
this.options.tipType = v; this.options.tipType = v;
this.trigger.setTipType(v); this.trigger.setTipType(v);
}, }
getValue: function () { getValue() {
return this.options.value || []; return this.options.value || [];
}, }
getTextor: function () { getTextor() {
return this.trigger.getTextor(); return this.trigger.getTextor();
}, }
populate: function (items) { populate(items) {
this.trigger.populate(items); this.trigger.populate(items);
} }
}
});
BI.SingleTreeTrigger.EVENT_CLEAR = "EVENT_CLEAR";
BI.shortcut("bi.single_tree_trigger", BI.SingleTreeTrigger);

Loading…
Cancel
Save