Browse Source

KERNEL-14086 feat: widget/singletree、selecttree

es6
zsmj 2 years ago
parent
commit
085b5c34e1
  1. 3
      es6.js
  2. 175
      src/widget/multiselect/__test__/multiselect.loader.nobar.test.js
  3. 2
      src/widget/multiselect/__test__/multiselect.loader.test.js
  4. 2
      src/widget/multiselect/__test__/multiselectcombo.test.js
  5. 2
      src/widget/multiselect/__test__/multiselectinsert.combo.test.js
  6. 154
      src/widget/multiselect/check/multiselect.check.pane.js
  7. 106
      src/widget/multiselect/check/multiselect.display.js
  8. 337
      src/widget/multiselect/loader.js
  9. 610
      src/widget/multiselect/multiselect.combo.js
  10. 620
      src/widget/multiselect/multiselect.combo.nobar.js
  11. 643
      src/widget/multiselect/multiselect.insert.combo.js
  12. 635
      src/widget/multiselect/multiselect.insert.combo.nobar.js
  13. 190
      src/widget/multiselect/multiselect.insert.trigger.js
  14. 262
      src/widget/multiselect/multiselect.loader.js
  15. 315
      src/widget/multiselect/multiselect.loader.nobar.js
  16. 133
      src/widget/multiselect/multiselect.popup.view.js
  17. 127
      src/widget/multiselect/multiselect.popup.view.nobar.js
  18. 48
      src/widget/multiselect/multiselect.trigger.js
  19. 142
      src/widget/multiselect/search/multiselect.search.insert.pane.js
  20. 205
      src/widget/multiselect/search/multiselect.search.loader.js
  21. 120
      src/widget/multiselect/search/multiselect.search.pane.js
  22. 14
      src/widget/multiselect/trigger/button.checkselected.js
  23. 7
      src/widget/multiselect/trigger/editor.multiselect.js
  24. 324
      src/widget/multiselect/trigger/editor/editor.patch.js
  25. 277
      src/widget/multiselect/trigger/searcher.multiselect.insert.js
  26. 28
      src/widget/multiselect/trigger/searcher.multiselect.js
  27. 12
      src/widget/multiselect/trigger/switcher.checkselected.js
  28. 4
      src/widget/multitree/multi.tree.combo.js
  29. 30
      src/widget/multitree/multi.tree.insert.combo.js
  30. 24
      src/widget/multitree/multi.tree.list.combo.js
  31. 2
      src/widget/multitree/trigger/searcher.list.multi.tree.js
  32. 2
      src/widget/multitree/trigger/searcher.multi.tree.js

3
es6.js

@ -43,10 +43,13 @@ const target = [
"createItems", "createItems",
"makeArrayByArray", "makeArrayByArray",
"VerticalAlign", "VerticalAlign",
"pushDistinct",
"endWith",
"transformItems", "transformItems",
"print", "print",
"Tree", "Tree",
"Func", "Func",
"Selection",
]; ];
// 加载模块 // 加载模块

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

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

48
src/widget/multiselect/multiselect.trigger.js

@ -9,7 +9,7 @@ import {
AbsoluteLayout AbsoluteLayout
} from "@/core"; } from "@/core";
import { Trigger, Text } from "@/base"; import { Trigger, Text } from "@/base";
import { MultiSelectSearcher } from "trigger/searcher.multiselect"; import { MultiSelectSearcher } from "./trigger/searcher.multiselect";
@shortcut() @shortcut()
export class MultiSelectTrigger extends Trigger { export class MultiSelectTrigger extends Trigger {
@ -103,30 +103,30 @@ export class MultiSelectTrigger extends Trigger {
}); });
!o.allowEdit && !o.allowEdit &&
createWidget({ createWidget({
type: AbsoluteLayout.xtype, type: AbsoluteLayout.xtype,
element: this, element: this,
items: [ items: [
{ {
el: { el: {
type: Text.xtype, type: Text.xtype,
title () { title() {
/** 修正REPORT-73699引入,需要考虑到传递过来的值是方法的情况 */ /** 修正REPORT-73699引入,需要考虑到传递过来的值是方法的情况 */
const state = self.searcher.getState(); const state = self.searcher.getState();
if (isFunction(state)) { if (isFunction(state)) {
return state(); return state();
} }
return state; return state;
},
}, },
left: 0, },
right: 24, left: 0,
top: 0, right: 24,
bottom: 0, top: 0,
} bottom: 0,
], }
}); ],
});
} }
refreshPlaceHolderWidth(width) { refreshPlaceHolderWidth(width) {

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

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

@ -7,7 +7,8 @@ import {
i18nText, i18nText,
isNotNull, isNotNull,
isNotEmptyString, isNotEmptyString,
nextTick nextTick,
Selection
} from "@/core"; } from "@/core";
import { Single, TextButton } from "@/base"; import { Single, TextButton } from "@/base";
import { MultiSelectCombo } from "../multiselect.combo"; import { MultiSelectCombo } from "../multiselect.combo";
@ -67,13 +68,13 @@ export class MultiSelectCheckSelectedButton extends Single {
_populate(ob) { _populate(ob) {
const self = this, const self = this,
o = this.options; o = this.options;
if (ob.type === BI.Selection.All) { if (ob.type === Selection.All) {
o.itemsCreator( o.itemsCreator(
{ {
type: MultiSelectCombo.REQ_GET_DATA_LENGTH, type: MultiSelectCombo.REQ_GET_DATA_LENGTH,
}, },
res => { res => {
if (self.options.value.type !== BI.Selection.All) { if (self.options.value.type !== Selection.All) {
return; return;
} }
if (isNotEmptyString(res.count)) { if (isNotEmptyString(res.count)) {
@ -91,7 +92,7 @@ export class MultiSelectCheckSelectedButton extends Single {
}); });
} }
); );
return; return;
} }
nextTick(() => { nextTick(() => {
@ -104,7 +105,7 @@ export class MultiSelectCheckSelectedButton extends Single {
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;
} }
@ -118,5 +119,6 @@ export class MultiSelectCheckSelectedButton extends Single {
this._populate(this._assertValue(this.options.value)); this._populate(this._assertValue(this.options.value));
} }
getValue() {} getValue() {
}
} }

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

@ -9,6 +9,7 @@ import {
isEmptyArray isEmptyArray
} from "@/core"; } from "@/core";
import { StateEditor } from "@/case"; import { StateEditor } from "@/case";
import { SelectPatchEditor } from "./editor/editor.patch";
@shortcut() @shortcut()
export class MultiSelectEditor extends Widget { export class MultiSelectEditor extends Widget {
@ -31,7 +32,7 @@ export class MultiSelectEditor extends Widget {
const self = this, const self = this,
o = this.options; o = this.options;
this.editor = createWidget(o.el, { this.editor = createWidget(o.el, {
type: "bi.select_patch_editor", type: SelectPatchEditor.xtype,
element: this, element: this,
height: o.height, height: o.height,
watermark: o.watermark, watermark: o.watermark,
@ -101,12 +102,10 @@ export class MultiSelectEditor extends Widget {
if (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 isEmptyArray(keywords) ? "" : keywords[keywords.length - 1]; return isEmptyArray(keywords) ? "" : keywords[keywords.length - 1];
} }
populate(items) {}
setWaterMark(v) { setWaterMark(v) {
this.editor.setWaterMark(v); this.editor.setWaterMark(v);
} }

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

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

@ -9,8 +9,9 @@ import {
size, size,
each each
} from "@/core"; } from "@/core";
import { MultiSelectEditor } from "editor.multiselect"; import { MultiSelectEditor } from "./editor.multiselect";
import { Searcher } from "@/base"; import { Searcher } from "@/base";
import { MultiSelectSearchPane } from "../search/multiselect.search.pane";
@shortcut() @shortcut()
export class MultiSelectSearcher extends Widget { export class MultiSelectSearcher extends Widget {
@ -52,13 +53,13 @@ export class MultiSelectSearcher extends Widget {
listeners: [ listeners: [
{ {
eventName: MultiSelectEditor.EVENT_FOCUS, eventName: MultiSelectEditor.EVENT_FOCUS,
action () { action() {
self.fireEvent(MultiSelectSearcher.EVENT_FOCUS); self.fireEvent(MultiSelectSearcher.EVENT_FOCUS);
}, },
}, },
{ {
eventName: MultiSelectEditor.EVENT_BLUR, eventName: MultiSelectEditor.EVENT_BLUR,
action () { action() {
self.fireEvent(MultiSelectSearcher.EVENT_BLUR); self.fireEvent(MultiSelectSearcher.EVENT_BLUR);
}, },
} }
@ -71,19 +72,19 @@ export class MultiSelectSearcher extends Widget {
height: o.height, height: o.height,
isAutoSearch: false, isAutoSearch: false,
isAutoSync: false, isAutoSync: false,
onSearch (op, callback) { onSearch(op, callback) {
callback(); callback();
}, },
el: this.editor, el: this.editor,
popup: extend( popup: extend(
{ {
type: "bi.multi_select_search_pane", type: MultiSelectSearchPane.xtype,
valueFormatter: o.valueFormatter, valueFormatter: o.valueFormatter,
itemFormatter: o.itemFormatter, itemFormatter: o.itemFormatter,
keywordGetter () { keywordGetter() {
return self.editor.getValue(); return self.editor.getValue();
}, },
itemsCreator (op, callback) { itemsCreator(op, callback) {
const keyword = self.editor.getValue(); const keyword = self.editor.getValue();
op.keywords = [keyword]; op.keywords = [keyword];
o.itemsCreator(op, () => { o.itemsCreator(op, () => {
@ -91,7 +92,7 @@ export class MultiSelectSearcher extends Widget {
op.keywords = [keyword]; op.keywords = [keyword];
o.itemsCreator(op, function () { o.itemsCreator(op, function () {
if (keyword === self.editor.getValue()) { if (keyword === self.editor.getValue()) {
callback.apply(null, arguments); callback(...arguments);
} }
}); });
}); });
@ -108,9 +109,7 @@ export class MultiSelectSearcher extends Widget {
this.searcher.on(Searcher.EVENT_START, () => { this.searcher.on(Searcher.EVENT_START, () => {
self.fireEvent(MultiSelectSearcher.EVENT_START); self.fireEvent(MultiSelectSearcher.EVENT_START);
}); });
this.searcher.on(Searcher.EVENT_PAUSE, function () { this.searcher.on(Searcher.EVENT_PAUSE, () => {
if (this.hasMatched()) {
}
self.fireEvent(MultiSelectSearcher.EVENT_PAUSE); self.fireEvent(MultiSelectSearcher.EVENT_PAUSE);
}); });
this.searcher.on(Searcher.EVENT_STOP, () => { this.searcher.on(Searcher.EVENT_STOP, () => {
@ -165,6 +164,7 @@ export class MultiSelectSearcher extends Widget {
} }
setState(ob) { setState(ob) {
let state;
const o = this.options; const o = this.options;
ob || (ob = {}); ob || (ob = {});
ob.value || (ob.value = []); ob.value || (ob.value = []);
@ -172,7 +172,7 @@ export class MultiSelectSearcher extends Widget {
if (ob.value.length === 0) { if (ob.value.length === 0) {
this.editor.setState(BI.Selection.All); this.editor.setState(BI.Selection.All);
} else if (size(ob.assist) <= 20) { } else if (size(ob.assist) <= 20) {
var state = ""; state = "";
each(ob.assist, (i, v) => { each(ob.assist, (i, v) => {
if (i === 0) { if (i === 0) {
state += state +=
@ -192,7 +192,7 @@ export class MultiSelectSearcher extends Widget {
if (ob.value.length === 0) { if (ob.value.length === 0) {
this.editor.setState(BI.Selection.None); this.editor.setState(BI.Selection.None);
} else if (size(ob.value) <= 20) { } else if (size(ob.value) <= 20) {
var state = ""; state = "";
each(ob.value, (i, v) => { each(ob.value, (i, v) => {
if (i === 0) { if (i === 0) {
state += state +=
@ -229,6 +229,6 @@ export class MultiSelectSearcher extends Widget {
} }
populate(items) { populate(items) {
this.searcher.populate.apply(this.searcher, arguments); this.searcher.populate(...arguments);
} }
} }

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

@ -8,7 +8,8 @@ import {
nextTick nextTick
} from "@/core"; } from "@/core";
import { Switcher } from "@/base"; import { Switcher } from "@/base";
import { MultiSelectCheckSelectedButton } from "button.checkselected"; import { MultiSelectCheckSelectedButton } from "./button.checkselected";
import { MultiSelectCheckPane } from "../check/multiselect.check.pane";
@shortcut() @shortcut()
export class MultiSelectCheckSelectedSwitcher extends Widget { export class MultiSelectCheckSelectedSwitcher extends Widget {
@ -50,13 +51,13 @@ export class MultiSelectCheckSelectedSwitcher extends Widget {
el: this.button, el: this.button,
popup: extend( popup: extend(
{ {
type: "bi.multi_select_check_pane", type: MultiSelectCheckPane.xtype,
valueFormatter: o.valueFormatter, valueFormatter: o.valueFormatter,
itemsCreator: o.itemsCreator, itemsCreator: o.itemsCreator,
onClickContinueSelect () { onClickContinueSelect() {
self.switcher.hideView(); self.switcher.hideView();
}, },
ref (_ref) { ref(_ref) {
self.checkPane = _ref; self.checkPane = _ref;
}, },
value: o.value, value: o.value,
@ -114,7 +115,8 @@ export class MultiSelectCheckSelectedSwitcher extends Widget {
this.button.setValue(v); this.button.setValue(v);
} }
getValue() {} getValue() {
}
populate(items) { populate(items) {
this.switcher.populate.apply(this.switcher, arguments); this.switcher.populate.apply(this.switcher, arguments);

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

@ -11,8 +11,8 @@ import {
deepClone deepClone
} from "@/core"; } from "@/core";
import { Single, Combo } from "@/base"; import { Single, Combo } from "@/base";
import { MultiTreeSearcher } from "trigger/searcher.multi.tree"; import { MultiTreeSearcher } from "./trigger/searcher.multi.tree";
import { MultiTreePopup } from "multi.tree.popup"; import { MultiTreePopup } from "./multi.tree.popup";
import { MultiSelectTrigger } from "../multiselect/multiselect.trigger"; import { MultiSelectTrigger } from "../multiselect/multiselect.trigger";
import { TriggerIconButton } from "@/case"; import { TriggerIconButton } from "@/case";
import { MultiSelectCheckSelectedSwitcher } from "../multiselect/trigger/switcher.checkselected"; import { MultiSelectCheckSelectedSwitcher } from "../multiselect/trigger/switcher.checkselected";

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

@ -11,8 +11,8 @@ import {
deepClone deepClone
} from "@/core"; } from "@/core";
import { Single, Combo } from "@/base"; import { Single, Combo } from "@/base";
import { MultiTreeSearchInsertPane } from "trigger/multi.tree.search.insert.pane"; import { MultiTreeSearchInsertPane } from "./trigger/multi.tree.search.insert.pane";
import { MultiTreePopup } from "multi.tree.popup"; import { MultiTreePopup } from "./multi.tree.popup";
import { MultiSelectTrigger } from "../multiselect/multiselect.trigger"; import { MultiSelectTrigger } from "../multiselect/multiselect.trigger";
import { TriggerIconButton } from "@/case"; import { TriggerIconButton } from "@/case";
import { MultiSelectCheckSelectedSwitcher } from "../multiselect/trigger/switcher.checkselected"; import { MultiSelectCheckSelectedSwitcher } from "../multiselect/trigger/switcher.checkselected";
@ -74,10 +74,10 @@ export class MultiTreeInsertCombo extends Single {
listeners: [ listeners: [
{ {
eventName: MultiTreeSearchInsertPane.EVENT_ADD_ITEM, eventName: MultiTreeSearchInsertPane.EVENT_ADD_ITEM,
action () { action() {
self.storeValue.value[ self.storeValue.value[
self.trigger.getSearcher().getKeyword() 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);
@ -88,8 +88,8 @@ export class MultiTreeInsertCombo extends Single {
}, },
{ {
eventName: eventName:
MultiTreeSearchInsertPane.EVENT_CLICK_TREE_NODE, MultiTreeSearchInsertPane.EVENT_CLICK_TREE_NODE,
action () { action() {
self._dataChange = true; self._dataChange = true;
}, },
} }
@ -108,7 +108,7 @@ export class MultiTreeInsertCombo extends Single {
adjustLength: 1, adjustLength: 1,
popup: { popup: {
type: "bi.multi_tree_popup_view", type: "bi.multi_tree_popup_view",
ref () { ref() {
self.popup = this; self.popup = this;
self.trigger.setAdapter(this); self.trigger.setAdapter(this);
self.numberCounter.setAdapter(this); self.numberCounter.setAdapter(this);
@ -116,7 +116,7 @@ export class MultiTreeInsertCombo extends Single {
listeners: [ listeners: [
{ {
eventName: MultiTreePopup.EVENT_AFTERINIT, eventName: MultiTreePopup.EVENT_AFTERINIT,
action () { action() {
self.numberCounter.adjustView(); self.numberCounter.adjustView();
isInit = true; isInit = true;
if (want2showCounter === true) { if (want2showCounter === true) {
@ -126,7 +126,7 @@ export class MultiTreeInsertCombo extends Single {
}, },
{ {
eventName: MultiTreePopup.EVENT_CHANGE, eventName: MultiTreePopup.EVENT_CHANGE,
action () { action() {
change = true; change = true;
const val = { const val = {
type: BI.Selection.Multi, type: BI.Selection.Multi,
@ -144,13 +144,13 @@ export class MultiTreeInsertCombo extends Single {
}, },
{ {
eventName: MultiTreePopup.EVENT_CLICK_CONFIRM, eventName: MultiTreePopup.EVENT_CLICK_CONFIRM,
action () { action() {
self.combo.hideView(); self.combo.hideView();
}, },
}, },
{ {
eventName: MultiTreePopup.EVENT_CLICK_CLEAR, eventName: MultiTreePopup.EVENT_CLICK_CLEAR,
action () { action() {
clear = true; clear = true;
self._dataChange = true; self._dataChange = true;
self.setValue(); self.setValue();
@ -159,7 +159,7 @@ export class MultiTreeInsertCombo extends Single {
} }
], ],
itemsCreator: o.itemsCreator, itemsCreator: o.itemsCreator,
onLoaded () { onLoaded() {
nextTick(() => { nextTick(() => {
self.numberCounter.adjustView(); self.numberCounter.adjustView();
self.trigger.getSearcher().adjustView(); self.trigger.getSearcher().adjustView();
@ -169,7 +169,7 @@ export class MultiTreeInsertCombo extends Single {
}, },
isNeedAdjustWidth: o.isNeedAdjustWidth, isNeedAdjustWidth: o.isNeedAdjustWidth,
value: { value: o.value || {} }, value: { value: o.value || {} },
hideChecker (e) { hideChecker(e) {
return ( return (
triggerBtn.element.find(e.target).length === 0 && triggerBtn.element.find(e.target).length === 0 &&
self.numberCounter.element.find(e.target).length === 0 self.numberCounter.element.find(e.target).length === 0
@ -267,7 +267,7 @@ export class MultiTreeInsertCombo extends Single {
if (isSearching()) { if (isSearching()) {
self._stopEditing(); self._stopEditing();
self._dataChange && self._dataChange &&
self.fireEvent(MultiTreeInsertCombo.EVENT_CONFIRM); self.fireEvent(MultiTreeInsertCombo.EVENT_CONFIRM);
} else { } else {
if (isPopupView()) { if (isPopupView()) {
self._stopEditing(); self._stopEditing();
@ -276,7 +276,7 @@ export class MultiTreeInsertCombo extends Single {
self.storeValue = { value: {} }; self.storeValue = { value: {} };
} }
self._dataChange && self._dataChange &&
self.fireEvent(MultiTreeInsertCombo.EVENT_CONFIRM); self.fireEvent(MultiTreeInsertCombo.EVENT_CONFIRM);
} }
} }
clear = false; clear = false;

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

@ -11,8 +11,8 @@ import {
deepClone deepClone
} from "@/core"; } from "@/core";
import { Single, Combo } from "@/base"; import { Single, Combo } from "@/base";
import { MultiTreeSearchInsertPane } from "trigger/multi.tree.search.insert.pane"; import { MultiTreeSearchInsertPane } from "./trigger/multi.tree.search.insert.pane";
import { MultiTreePopup } from "multi.tree.popup"; import { MultiTreePopup } from "./multi.tree.popup";
import { MultiSelectTrigger } from "../multiselect/multiselect.trigger"; import { MultiSelectTrigger } from "../multiselect/multiselect.trigger";
import { import {
TriggerIconButton, TriggerIconButton,
@ -85,7 +85,7 @@ export class MultiTreeListCombo extends Single {
listeners: [ listeners: [
{ {
eventName: MultiTreeSearchInsertPane.EVENT_ADD_ITEM, eventName: MultiTreeSearchInsertPane.EVENT_ADD_ITEM,
action () { action() {
self.storeValue.value.unshift([ self.storeValue.value.unshift([
self.trigger.getSearcher().getKeyword() self.trigger.getSearcher().getKeyword()
]); ]);
@ -124,7 +124,7 @@ export class MultiTreeListCombo extends Single {
adjustLength: 1, adjustLength: 1,
popup: { popup: {
type: MultiTreePopup.xtype, type: MultiTreePopup.xtype,
ref () { ref() {
self.popup = this; self.popup = this;
self.trigger.setAdapter(this); self.trigger.setAdapter(this);
self.numberCounter.setAdapter(this); self.numberCounter.setAdapter(this);
@ -135,7 +135,7 @@ export class MultiTreeListCombo extends Single {
listeners: [ listeners: [
{ {
eventName: MultiTreePopup.EVENT_AFTERINIT, eventName: MultiTreePopup.EVENT_AFTERINIT,
action () { action() {
self.numberCounter.adjustView(); self.numberCounter.adjustView();
isInit = true; isInit = true;
if (want2showCounter === true) { if (want2showCounter === true) {
@ -145,7 +145,7 @@ export class MultiTreeListCombo extends Single {
}, },
{ {
eventName: MultiTreePopup.EVENT_CHANGE, eventName: MultiTreePopup.EVENT_CHANGE,
action () { action() {
change = true; change = true;
const val = { const val = {
type: BI.Selection.Multi, type: BI.Selection.Multi,
@ -163,13 +163,13 @@ export class MultiTreeListCombo extends Single {
}, },
{ {
eventName: MultiTreePopup.EVENT_CLICK_CONFIRM, eventName: MultiTreePopup.EVENT_CLICK_CONFIRM,
action () { action() {
self.combo.hideView(); self.combo.hideView();
}, },
}, },
{ {
eventName: MultiTreePopup.EVENT_CLICK_CLEAR, eventName: MultiTreePopup.EVENT_CLICK_CLEAR,
action () { action() {
clear = true; clear = true;
self._dataChange = true; self._dataChange = true;
self.setValue(); self.setValue();
@ -178,7 +178,7 @@ export class MultiTreeListCombo extends Single {
} }
], ],
itemsCreator: o.itemsCreator, itemsCreator: o.itemsCreator,
onLoaded () { onLoaded() {
nextTick(() => { nextTick(() => {
self.numberCounter.adjustView(); self.numberCounter.adjustView();
self.trigger.getSearcher().adjustView(); self.trigger.getSearcher().adjustView();
@ -188,7 +188,7 @@ export class MultiTreeListCombo extends Single {
}, },
isNeedAdjustWidth: o.isNeedAdjustWidth, isNeedAdjustWidth: o.isNeedAdjustWidth,
value: this.storeValue, value: this.storeValue,
hideChecker (e) { hideChecker(e) {
return ( return (
triggerBtn.element.find(e.target).length === 0 && triggerBtn.element.find(e.target).length === 0 &&
self.numberCounter.element.find(e.target).length === 0 self.numberCounter.element.find(e.target).length === 0
@ -286,7 +286,7 @@ export class MultiTreeListCombo extends Single {
if (isSearching()) { if (isSearching()) {
self.trigger.stopEditing(); self.trigger.stopEditing();
self._dataChange && self._dataChange &&
self.fireEvent(MultiTreeListCombo.EVENT_CONFIRM); self.fireEvent(MultiTreeListCombo.EVENT_CONFIRM);
} else { } else {
if (isPopupView()) { if (isPopupView()) {
self._stopEditing(); self._stopEditing();
@ -295,7 +295,7 @@ export class MultiTreeListCombo extends Single {
self.storeValue = { value: [] }; self.storeValue = { value: [] };
} }
self._dataChange && self._dataChange &&
self.fireEvent(MultiTreeListCombo.EVENT_CONFIRM); self.fireEvent(MultiTreeListCombo.EVENT_CONFIRM);
} }
} }
clear = false; clear = false;

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

@ -14,7 +14,7 @@ import { MultiSelectEditor } from "../../multiselect/trigger/editor.multiselect"
import { MultiSelectSearcher } from "../../multiselect/trigger/searcher.multiselect"; import { MultiSelectSearcher } from "../../multiselect/trigger/searcher.multiselect";
import { Searcher } from "@/base"; import { Searcher } from "@/base";
import { SimpleStateEditor } from "@/case"; import { SimpleStateEditor } from "@/case";
import { MultiTreeSearchPane } from "multi.tree.search.pane"; import { MultiTreeSearchPane } from "./multi.tree.search.pane";
@shortcut() @shortcut()
export class MultiListTreeSearcher extends Widget { export class MultiListTreeSearcher extends Widget {

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

@ -13,7 +13,7 @@ import {
} from "@/core"; } from "@/core";
import { MultiSelectEditor } from "../../multiselect/trigger/editor.multiselect"; import { MultiSelectEditor } from "../../multiselect/trigger/editor.multiselect";
import { MultiSelectSearcher } from "../../multiselect/trigger/searcher.multiselect"; import { MultiSelectSearcher } from "../../multiselect/trigger/searcher.multiselect";
import { MultiTreeSearchPane } from "multi.tree.search.pane"; import { MultiTreeSearchPane } from "./multi.tree.search.pane";
import { Searcher } from "@/base"; import { Searcher } from "@/base";
import { SimpleStateEditor } from "@/case"; import { SimpleStateEditor } from "@/case";

Loading…
Cancel
Save