Browse Source

KERNEL-14086 feat: widget/singletree、selecttree

es6
zsmj 2 years ago
parent
commit
b9d0902fa7
  1. 2
      es6.js
  2. 1
      src/case/index.js
  3. 8
      src/case/tree/tree.level.js
  4. 25
      src/core/func/function.js
  5. 15
      src/widget/index.js
  6. 216
      src/widget/multiselect/multiselect.trigger.js
  7. 146
      src/widget/multiselect/trigger/button.checkselected.js
  8. 121
      src/widget/multiselect/trigger/editor.multiselect.js
  9. 255
      src/widget/multiselect/trigger/searcher.multiselect.js
  10. 154
      src/widget/multiselect/trigger/switcher.checkselected.js
  11. 240
      src/widget/multiselecttree/multiselecttree.js
  12. 77
      src/widget/multiselecttree/multiselecttree.popup.js
  13. 147
      src/widget/multitree/check/multi.tree.check.pane.js
  14. 371
      src/widget/multitree/multi.tree.combo.js
  15. 371
      src/widget/multitree/multi.tree.insert.combo.js
  16. 460
      src/widget/multitree/multi.tree.list.combo.js
  17. 114
      src/widget/multitree/multi.tree.popup.js
  18. 93
      src/widget/multitree/trigger/multi.tree.button.checkselected.js
  19. 199
      src/widget/multitree/trigger/multi.tree.search.insert.pane.js
  20. 132
      src/widget/multitree/trigger/multi.tree.search.pane.js
  21. 235
      src/widget/multitree/trigger/searcher.list.multi.tree.js
  22. 290
      src/widget/multitree/trigger/searcher.multi.tree.js
  23. 129
      src/widget/selecttree/nodes/node.first.plus.js
  24. 129
      src/widget/selecttree/nodes/node.last.plus.js
  25. 129
      src/widget/selecttree/nodes/node.mid.plus.js
  26. 129
      src/widget/selecttree/nodes/node.plus.js
  27. 114
      src/widget/selecttree/selecttree.combo.js
  28. 77
      src/widget/selecttree/selecttree.expander.js
  29. 125
      src/widget/selecttree/selecttree.popup.js
  30. 147
      src/widget/singletree/singletree.combo.js
  31. 78
      src/widget/singletree/singletree.popup.js
  32. 91
      src/widget/singletree/singletree.trigger.js

2
es6.js

@ -45,6 +45,8 @@ const target = [
"VerticalAlign",
"transformItems",
"print",
"Tree",
"Func",
];
// 加载模块

1
src/case/index.js

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

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

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

25
src/core/func/function.js

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

15
src/widget/index.js

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

216
src/widget/multiselect/multiselect.trigger.js

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

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

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

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

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

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

@ -1,160 +1,187 @@
/**
* searcher
* Created by guy on 15/11/3.
* @class BI.MultiSelectSearcher
* @extends Widget
*/
BI.MultiSelectSearcher = BI.inherit(BI.Widget, {
_defaultConfig: function () {
return BI.extend(BI.MultiSelectSearcher.superclass._defaultConfig.apply(this, arguments), {
import {
shortcut,
Widget,
extend,
emptyFn,
i18nText,
createWidget,
isNotNull,
size,
each
} from "@/core";
import { MultiSelectEditor } from "editor.multiselect";
import { Searcher } from "@/base";
@shortcut()
export class MultiSelectSearcher extends Widget {
static xtype = "bi.multi_select_searcher";
static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
static EVENT_CHANGE = "EVENT_CHANGE";
static EVENT_START = "EVENT_START";
static EVENT_STOP = "EVENT_STOP";
static EVENT_PAUSE = "EVENT_PAUSE";
static EVENT_SEARCHING = "EVENT_SEARCHING";
static EVENT_FOCUS = "EVENT_FOCUS";
static EVENT_BLUR = "EVENT_BLUR";
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-multi-select-searcher",
itemsCreator: BI.emptyFn,
itemsCreator: emptyFn,
el: {},
popup: {},
valueFormatter: BI.emptyFn,
valueFormatter: emptyFn,
adapter: null,
masker: {},
defaultText: BI.i18nText("BI-Basic_Please_Select"),
itemHeight: 24
defaultText: i18nText("BI-Basic_Please_Select"),
itemHeight: 24,
});
},
}
_init: function () {
BI.MultiSelectSearcher.superclass._init.apply(this, arguments);
var self = this, o = this.options;
this.editor = BI.createWidget(o.el, {
type: "bi.multi_select_editor",
_init() {
super._init(...arguments);
const self = this,
o = this.options;
this.editor = createWidget(o.el, {
type: MultiSelectEditor.xtype,
height: o.height,
text: o.text,
defaultText: o.defaultText,
watermark: o.watermark,
listeners: [
{
eventName: BI.MultiSelectEditor.EVENT_FOCUS,
action: function () {
self.fireEvent(BI.MultiSelectSearcher.EVENT_FOCUS);
}
}, {
eventName: BI.MultiSelectEditor.EVENT_BLUR,
action: function () {
self.fireEvent(BI.MultiSelectSearcher.EVENT_BLUR);
}
eventName: MultiSelectEditor.EVENT_FOCUS,
action () {
self.fireEvent(MultiSelectSearcher.EVENT_FOCUS);
},
},
{
eventName: MultiSelectEditor.EVENT_BLUR,
action () {
self.fireEvent(MultiSelectSearcher.EVENT_BLUR);
},
}
]
],
});
this.searcher = BI.createWidget({
type: "bi.searcher",
this.searcher = createWidget({
type: Searcher.xtype,
element: this,
height: o.height,
isAutoSearch: false,
isAutoSync: false,
onSearch: function (op, callback) {
onSearch (op, callback) {
callback();
},
el: this.editor,
popup: BI.extend({
type: "bi.multi_select_search_pane",
valueFormatter: o.valueFormatter,
itemFormatter: o.itemFormatter,
keywordGetter: function () {
return self.editor.getValue();
},
itemsCreator: function (op, callback) {
var keyword = self.editor.getValue();
op.keywords = [keyword];
o.itemsCreator(op, function () {
var keyword = self.editor.getValue();
popup: extend(
{
type: "bi.multi_select_search_pane",
valueFormatter: o.valueFormatter,
itemFormatter: o.itemFormatter,
keywordGetter () {
return self.editor.getValue();
},
itemsCreator (op, callback) {
const keyword = self.editor.getValue();
op.keywords = [keyword];
o.itemsCreator(op, function () {
if (keyword === self.editor.getValue()) {
callback.apply(null, arguments);
}
o.itemsCreator(op, () => {
const keyword = self.editor.getValue();
op.keywords = [keyword];
o.itemsCreator(op, function () {
if (keyword === self.editor.getValue()) {
callback.apply(null, arguments);
}
});
});
});
},
itemHeight: o.itemHeight,
value: o.value,
},
itemHeight: o.itemHeight,
value: o.value
}, o.popup),
o.popup
),
adapter: o.adapter,
masker: o.masker
masker: o.masker,
});
this.searcher.on(BI.Searcher.EVENT_START, function () {
self.fireEvent(BI.MultiSelectSearcher.EVENT_START);
this.searcher.on(Searcher.EVENT_START, () => {
self.fireEvent(MultiSelectSearcher.EVENT_START);
});
this.searcher.on(BI.Searcher.EVENT_PAUSE, function () {
this.searcher.on(Searcher.EVENT_PAUSE, function () {
if (this.hasMatched()) {
}
self.fireEvent(BI.MultiSelectSearcher.EVENT_PAUSE);
self.fireEvent(MultiSelectSearcher.EVENT_PAUSE);
});
this.searcher.on(BI.Searcher.EVENT_STOP, function () {
self.fireEvent(BI.MultiSelectSearcher.EVENT_STOP);
this.searcher.on(Searcher.EVENT_STOP, () => {
self.fireEvent(MultiSelectSearcher.EVENT_STOP);
});
this.searcher.on(BI.Searcher.EVENT_CHANGE, function () {
self.fireEvent(BI.MultiSelectSearcher.EVENT_CHANGE, arguments);
this.searcher.on(Searcher.EVENT_CHANGE, function () {
self.fireEvent(MultiSelectSearcher.EVENT_CHANGE, arguments);
});
this.searcher.on(BI.Searcher.EVENT_SEARCHING, function () {
var keywords = this.getKeywords();
self.fireEvent(BI.MultiSelectSearcher.EVENT_SEARCHING, keywords);
this.searcher.on(Searcher.EVENT_SEARCHING, function () {
const keywords = this.getKeywords();
self.fireEvent(MultiSelectSearcher.EVENT_SEARCHING, keywords);
});
if (BI.isNotNull(o.value)) {
if (isNotNull(o.value)) {
this.setState(o.value);
}
},
}
focus: function () {
focus() {
this.editor.focus();
},
}
blur: function () {
blur() {
this.editor.blur();
},
}
adjustView: function () {
adjustView() {
this.searcher.adjustView();
},
}
isSearching: function () {
isSearching() {
return this.searcher.isSearching();
},
}
stopSearch: function () {
stopSearch() {
this.searcher.stopSearch();
},
}
getKeyword: function () {
getKeyword() {
return this.editor.getValue();
},
}
hasMatched: function () {
hasMatched() {
return this.searcher.hasMatched();
},
}
hasChecked: function () {
hasChecked() {
return this.searcher.getView() && this.searcher.getView().hasChecked();
},
}
setAdapter: function (adapter) {
setAdapter(adapter) {
this.searcher.setAdapter(adapter);
},
}
setState: function (ob) {
var o = this.options;
setState(ob) {
const o = this.options;
ob || (ob = {});
ob.value || (ob.value = []);
if (ob.type === BI.Selection.All) {
if (ob.value.length === 0) {
this.editor.setState(BI.Selection.All);
} else if (BI.size(ob.assist) <= 20) {
} else if (size(ob.assist) <= 20) {
var state = "";
BI.each(ob.assist, function (i, v) {
each(ob.assist, (i, v) => {
if (i === 0) {
state += "" + (v === null ? "" : (o.valueFormatter(v + "") || v));
state +=
`${
v === null ? "" : o.valueFormatter(`${v}`) || v}`;
} else {
state += "," + (v === null ? "" : (o.valueFormatter(v + "") || v));
state +=
`,${
v === null ? "" : o.valueFormatter(`${v}`) || v}`;
}
});
this.editor.setState(state);
@ -164,13 +191,17 @@ BI.MultiSelectSearcher = BI.inherit(BI.Widget, {
} else {
if (ob.value.length === 0) {
this.editor.setState(BI.Selection.None);
} else if (BI.size(ob.value) <= 20) {
} else if (size(ob.value) <= 20) {
var state = "";
BI.each(ob.value, function (i, v) {
each(ob.value, (i, v) => {
if (i === 0) {
state += "" + (v === null ? "" : (o.valueFormatter(v + "") || v));
state +=
`${
v === null ? "" : o.valueFormatter(`${v}`) || v}`;
} else {
state += "," + (v === null ? "" : (o.valueFormatter(v + "") || v));
state +=
`,${
v === null ? "" : o.valueFormatter(`${v}`) || v}`;
}
});
this.editor.setState(state);
@ -178,36 +209,26 @@ BI.MultiSelectSearcher = BI.inherit(BI.Widget, {
this.editor.setState(BI.Selection.Multi);
}
}
},
}
getState: function () {
getState() {
return this.editor.getState();
},
}
setValue: function (ob) {
setValue(ob) {
this.setState(ob);
this.searcher.setValue(ob);
},
}
getKey: function () {
getKey() {
return this.editor.getValue();
},
}
getValue: function () {
getValue() {
return this.searcher.getValue();
},
}
populate: function (items) {
populate(items) {
this.searcher.populate.apply(this.searcher, arguments);
}
});
BI.MultiSelectSearcher.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
BI.MultiSelectSearcher.EVENT_CHANGE = "EVENT_CHANGE";
BI.MultiSelectSearcher.EVENT_START = "EVENT_START";
BI.MultiSelectSearcher.EVENT_STOP = "EVENT_STOP";
BI.MultiSelectSearcher.EVENT_PAUSE = "EVENT_PAUSE";
BI.MultiSelectSearcher.EVENT_SEARCHING = "EVENT_SEARCHING";
BI.MultiSelectSearcher.EVENT_FOCUS = "EVENT_FOCUS";
BI.MultiSelectSearcher.EVENT_BLUR = "EVENT_BLUR";
BI.shortcut("bi.multi_select_searcher", BI.MultiSelectSearcher);
}

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

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

240
src/widget/multiselecttree/multiselecttree.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

78
src/widget/singletree/singletree.popup.js

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

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

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

Loading…
Cancel
Save