forked from fanruan/fineui
windy
7 years ago
33 changed files with 2812 additions and 39 deletions
@ -0,0 +1,65 @@
|
||||
Demo.Filter = BI.inherit(BI.Widget, { |
||||
props: {}, |
||||
_createFilter: function () { |
||||
var filter = BI.createWidget({ |
||||
type: "bi.filter", |
||||
width: 600, |
||||
height: 300, |
||||
items: [{ |
||||
id: "3beb41be9c67d80d", |
||||
value: 81, |
||||
children: [{ |
||||
id: 1, |
||||
type: "bi.label", |
||||
value: "节点1" |
||||
}, { |
||||
id: "74cf470c15a7cb23", |
||||
value: 80, |
||||
children: [{ |
||||
id: 2, |
||||
type: "bi.label", |
||||
value: "节点2" |
||||
}, { |
||||
id: 3, |
||||
type: "bi.label", |
||||
value: "节点3" |
||||
}] |
||||
}, { |
||||
id: 4, |
||||
type: "bi.label", |
||||
value: "节点4" |
||||
}] |
||||
}], |
||||
itemCreator: function (item) { |
||||
if(item.value === BI.Filter.FILTER_TYPE.EMPTY_FORMULA || item.value === BI.Filter.FILTER_TYPE.EMPTY_CONDITION) { |
||||
item.type = "bi.label"; |
||||
item.value = "这是一个新添的数据"; |
||||
} |
||||
} |
||||
}); |
||||
|
||||
return filter; |
||||
}, |
||||
|
||||
render: function () { |
||||
|
||||
var filter = this._createFilter(); |
||||
|
||||
return { |
||||
type: "bi.vertical", |
||||
hgap: 30, |
||||
vgap: 20, |
||||
items: [{ |
||||
el: filter |
||||
}, { |
||||
type: "bi.button", |
||||
text: "过滤结构getValue()", |
||||
height: 30, |
||||
handler: function () { |
||||
BI.Msg.alert("过滤结构", JSON.stringify(filter.getValue())); |
||||
} |
||||
}] |
||||
}; |
||||
} |
||||
}); |
||||
BI.shortcut("demo.filter", Demo.Filter); |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,4 @@
|
||||
.bi-filter-item .filter-item-empty-item .empty-filter-item-leaf { |
||||
border: 1px dashed #178cdf; |
||||
background: #eaf2fd; |
||||
} |
||||
@ -0,0 +1,26 @@
|
||||
.bi-filter-expander { |
||||
min-width: 100%; |
||||
border-right: 0px; |
||||
border-bottom: 0px; |
||||
} |
||||
.bi-filter-expander > .filter-item-empty-item { |
||||
border-top: 0px; |
||||
border-right: 1px solid #d4dadd; |
||||
border-bottom: 1px solid #d4dadd; |
||||
} |
||||
.bi-filter-expander > table { |
||||
min-width: 100%; |
||||
} |
||||
.bi-filter-expander > table > tbody > tr > td.first-element { |
||||
width: 20px; |
||||
border-right: 1px solid #d4dadd !important; |
||||
border-bottom: 1px solid #d4dadd !important; |
||||
} |
||||
.bi-theme-dark .bi-filter-expander > .filter-item-empty-item { |
||||
border-right: 1px solid #525466; |
||||
border-bottom: 1px solid #525466; |
||||
} |
||||
.bi-theme-dark .bi-filter-expander > table > tbody > tr > td.first-element { |
||||
border-right: 1px solid #525466 !important; |
||||
border-bottom: 1px solid #525466 !important; |
||||
} |
||||
@ -0,0 +1,4 @@
|
||||
.bi-filter-operation .operation-trigger.hover, |
||||
.bi-filter-operation .operation-trigger:hover { |
||||
color: #58cc7d; |
||||
} |
||||
@ -0,0 +1,6 @@
|
||||
.bi-filter-pane { |
||||
min-width: 100%; |
||||
-webkit-border-radius: 2px; |
||||
-moz-border-radius: 2px; |
||||
border-radius: 2px; |
||||
} |
||||
@ -0,0 +1,11 @@
|
||||
@import "../../../index"; |
||||
|
||||
.bi-filter-item { |
||||
//min-width: 470px; |
||||
& .filter-item-empty-item { |
||||
& .empty-filter-item-leaf{ |
||||
border: 1px dashed @color-bi-border-highlight; |
||||
background: @color-bi-background-light-highlight; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,36 @@
|
||||
@import "../../../index"; |
||||
|
||||
.bi-filter-expander { |
||||
min-width: 100%; |
||||
border-right: 0px; |
||||
border-bottom: 0px; |
||||
& > .filter-item-empty-item { |
||||
border-top: 0px; |
||||
border-right: 1px solid @color-bi-border-line; |
||||
border-bottom: 1px solid @color-bi-border-line; |
||||
} |
||||
& .condition-and-or { |
||||
|
||||
} |
||||
> table { |
||||
min-width: 100%; |
||||
} |
||||
> table > tbody > tr > td.first-element { |
||||
width: 20px; |
||||
border-right: 1px solid @color-bi-border-line !important; |
||||
border-bottom: 1px solid @color-bi-border-line !important; |
||||
} |
||||
} |
||||
|
||||
.bi-theme-dark { |
||||
.bi-filter-expander { |
||||
& > .filter-item-empty-item { |
||||
border-right: 1px solid @color-bi-border-line-theme-dark; |
||||
border-bottom: 1px solid @color-bi-border-line-theme-dark; |
||||
} |
||||
> table > tbody > tr > td.first-element { |
||||
border-right: 1px solid @color-bi-border-line-theme-dark !important; |
||||
border-bottom: 1px solid @color-bi-border-line-theme-dark !important; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,8 @@
|
||||
@import "../../../index"; |
||||
.bi-filter-operation { |
||||
& .operation-trigger { |
||||
&.hover, &:hover{ |
||||
color: @background-color-dark-success; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,6 @@
|
||||
@import "../../../index"; |
||||
|
||||
.bi-filter-pane { |
||||
min-width: 100%; |
||||
.border-radius(2px); |
||||
} |
||||
@ -0,0 +1,51 @@
|
||||
/** |
||||
* 过滤条件抽象类 |
||||
* |
||||
* @class BI.AbstractFilterItem |
||||
* @extend BI.Widget |
||||
*/ |
||||
BI.AbstractFilterItem = BI.inherit(BI.Widget, { |
||||
|
||||
props: { |
||||
baseCls: "bi-filter-item bi-border-right bi-border-bottom" |
||||
}, |
||||
|
||||
isSelectedCondition: function () { |
||||
return this.emptyItem && this.emptyItem.isVisible(); |
||||
}, |
||||
|
||||
setSelectedCondition: function (b) { |
||||
if (b) { |
||||
if (!this.emptyItem) { |
||||
this.emptyItem = BI.createWidget({ |
||||
type: "bi.absolute", |
||||
height: 40, |
||||
cls: "filter-item-empty-item bi-border-top", |
||||
items: [{ |
||||
el: { |
||||
type: "bi.center_adapt", |
||||
cls: "empty-filter-item-leaf" |
||||
} |
||||
}], |
||||
hgap: 10, |
||||
vgap: 5 |
||||
}); |
||||
BI.createWidget({ |
||||
type: "bi.vertical", |
||||
element: this, |
||||
items: [this.emptyItem], |
||||
scrolly: false |
||||
}); |
||||
} |
||||
} |
||||
this.emptyItem && this.emptyItem.setVisible(b); |
||||
} |
||||
}); |
||||
BI.extend(BI.AbstractFilterItem, { |
||||
FILTER_OPERATION_FORMULA: 1, |
||||
FILTER_OPERATION_CONDITION: 2, |
||||
FILTER_OPERATION_CONDITION_AND: 3, |
||||
FILTER_OPERATION_CONDITION_OR: 4, |
||||
FILTER_OPERATION_FORMULA_AND: 5, |
||||
FILTER_OPERATION_FORMULA_OR: 6 |
||||
}); |
||||
@ -0,0 +1,46 @@
|
||||
/** |
||||
* Created by Urthur on 2017/11/21. |
||||
*/ |
||||
!(function () { |
||||
var Expander = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "bi-filter-expander", |
||||
el: {}, |
||||
popup: {} |
||||
}, |
||||
|
||||
render: function () { |
||||
var self = this, o = this.options; |
||||
return { |
||||
type: "bi.filter_expander", |
||||
el: o.el, |
||||
popup: o.popup, |
||||
id: o.id, |
||||
value: o.value, |
||||
listeners: [{ |
||||
eventName: BI.Controller.EVENT_CHANGE, |
||||
action: function () { |
||||
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); |
||||
} |
||||
}], |
||||
ref: function (_ref) { |
||||
self.expander = _ref; |
||||
} |
||||
}; |
||||
}, |
||||
|
||||
populate: function () { |
||||
this.expander.populate.apply(this.expander, arguments); |
||||
}, |
||||
|
||||
getValue: function () { |
||||
var val = this.expander.getValue(); |
||||
return { |
||||
filterType: val.type, |
||||
filterValue: val.value, |
||||
id: val.id |
||||
}; |
||||
} |
||||
}); |
||||
BI.shortcut("bi.and.or.filter.expander", Expander); |
||||
}()); |
||||
@ -0,0 +1,74 @@
|
||||
/** |
||||
* @class BI.FilterExpander |
||||
* @extend BI.AbstractFilterItem |
||||
* 过滤树的一个expander节点 |
||||
*/ |
||||
!(function () { |
||||
var FilterExpander = BI.inherit(BI.AbstractFilterItem, { |
||||
_constant: { |
||||
EXPANDER_WIDTH: 20 |
||||
}, |
||||
|
||||
props: { |
||||
baseCls: "bi-filter-item bi-filter-expander", |
||||
el: {}, |
||||
popup: {} |
||||
}, |
||||
|
||||
render: function () { |
||||
var self = this, o = this.options; |
||||
var value = o.value, text = ""; |
||||
if (value === BI.Filter.FILTER_TYPE.AND) { |
||||
text = BI.i18nText("BI-Basic_And"); |
||||
} else { |
||||
text = BI.i18nText("BI-Basic_Or"); |
||||
} |
||||
return { |
||||
type: "bi.horizontal_adapt", |
||||
cls: "filter-item-empty-item", |
||||
verticalAlign: BI.VerticalAlign.Middle, |
||||
items: [{ |
||||
type: "bi.text_button", |
||||
cls: "condition-and-or", |
||||
text: text, |
||||
value: value, |
||||
id: o.id, |
||||
width: this._constant.EXPANDER_WIDTH, |
||||
height: "100%", |
||||
ref: function (_ref) { |
||||
self.expander = _ref; |
||||
}, |
||||
listeners: [{ |
||||
eventName: BI.TextButton.EVENT_CHANGE, |
||||
action: function () { |
||||
self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.CLICK, "", self); |
||||
} |
||||
}] |
||||
}, BI.extend(o.popup, { |
||||
ref: function (_ref) { |
||||
self.conditionsView = _ref; |
||||
}, |
||||
listeners: [{ |
||||
eventName: BI.Controller.EVENT_CHANGE, |
||||
action: function () { |
||||
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); |
||||
} |
||||
}] |
||||
})] |
||||
}; |
||||
}, |
||||
|
||||
getValue: function () { |
||||
return { |
||||
type: this.expander.getValue(), |
||||
value: this.conditionsView.getValue(), |
||||
id: this.options.id |
||||
}; |
||||
}, |
||||
|
||||
populate: function () { |
||||
this.conditionsView.populate.apply(this.conditionsView, arguments); |
||||
} |
||||
}); |
||||
BI.shortcut("bi.filter_expander", FilterExpander); |
||||
}()); |
||||
@ -0,0 +1,21 @@
|
||||
/** |
||||
* Created by Urthur on 2017/12/21. |
||||
*/ |
||||
!(function () { |
||||
BI.constant("bi.constant.component.filter", { |
||||
FORMULA_COMBO: [{ |
||||
text: BI.i18nText("BI-Conf_Formula_And"), |
||||
value: BI.AbstractFilterItem.FILTER_OPERATION_FORMULA_AND |
||||
}, { |
||||
text: BI.i18nText("BI-Conf_Formula_Or"), |
||||
value: BI.AbstractFilterItem.FILTER_OPERATION_FORMULA_OR |
||||
}], |
||||
CONDITION_COMBO: [{ |
||||
text: BI.i18nText("BI-Conf_Condition_And"), |
||||
value: BI.AbstractFilterItem.FILTER_OPERATION_CONDITION_AND |
||||
}, { |
||||
text: BI.i18nText("BI-Conf_Condition_Or"), |
||||
value: BI.AbstractFilterItem.FILTER_OPERATION_CONDITION_OR |
||||
}] |
||||
}); |
||||
}()); |
||||
@ -0,0 +1,194 @@
|
||||
/** |
||||
* 过滤 |
||||
* |
||||
* Created by GUY on 2015/11/20. |
||||
* @class BI.Filter |
||||
* @extend BI.Widget |
||||
*/ |
||||
BI.Filter = BI.inherit(BI.Widget, { |
||||
|
||||
constants: { |
||||
FIELD_TYPE_NUMBER: 1, |
||||
FIELD_TYPE_STRING: 0, |
||||
FIELD_TYPE_DATE: 2 |
||||
}, |
||||
|
||||
props: { |
||||
baseCls: "bi-filter", |
||||
expander: {}, |
||||
items: [], |
||||
el: {}, |
||||
itemCreator: BI.empty |
||||
}, |
||||
|
||||
render: function () { |
||||
var self = this, o = this.options; |
||||
return BI.extend({ |
||||
type: "bi.filter_operation", |
||||
expander: o.expander, |
||||
listeners: [{ |
||||
eventName: "EVENT_OPERATION", |
||||
action: function (type) { |
||||
switch (type) { |
||||
case BI.AbstractFilterItem.FILTER_OPERATION_CONDITION: |
||||
case BI.AbstractFilterItem.FILTER_OPERATION_CONDITION_AND: |
||||
self._addAndOrCondition(BI.Filter.FILTER_TYPE.EMPTY_CONDITION); |
||||
break; |
||||
case BI.AbstractFilterItem.FILTER_OPERATION_CONDITION_OR: |
||||
self._addAndOrCondition(BI.Filter.FILTER_TYPE.EMPTY_CONDITION, 1); |
||||
break; |
||||
case BI.AbstractFilterItem.FILTER_OPERATION_FORMULA: |
||||
case BI.AbstractFilterItem.FILTER_OPERATION_FORMULA_AND: |
||||
self._addAndOrCondition(BI.Filter.FILTER_TYPE.EMPTY_FORMULA); |
||||
break; |
||||
case BI.AbstractFilterItem.FILTER_OPERATION_FORMULA_OR: |
||||
self._addAndOrCondition(BI.Filter.FILTER_TYPE.EMPTY_FORMULA, 1); |
||||
break; |
||||
} |
||||
} |
||||
}, { |
||||
eventName: "BI.FilterOperation.EVENT_DESTROY_ITEM", |
||||
action: function (id) { |
||||
self._removeCondition(id); |
||||
} |
||||
}], |
||||
ref: function (_ref) { |
||||
self.filter = _ref; |
||||
} |
||||
}, o.el); |
||||
}, |
||||
|
||||
mounted: function () { |
||||
this.tree = new BI.Tree(); |
||||
this.tree.initTree(this.options.items); |
||||
this._populate(this.tree.toJSONWithNode()); |
||||
}, |
||||
|
||||
_createEmptyNode: function (type) { |
||||
var node = new BI.Node(BI.UUID()); |
||||
node.set("data", { |
||||
value: type |
||||
}); |
||||
return node; |
||||
}, |
||||
|
||||
_insertAndOrCondition: function (id, formulaOrField, type) { |
||||
var ANDOR = ["AND", "OR"]; |
||||
type || (type = 0); |
||||
var finded = this.tree.search(id); |
||||
if (BI.isNotNull(finded)) { |
||||
var data = finded.get("data"); |
||||
var parent = finded.getParent(); |
||||
var index = parent.getChildIndex(finded.id); |
||||
var pdata = parent.get("data") || {}; |
||||
var node = this._createEmptyNode(formulaOrField); |
||||
if (data.value === BI.Filter.FILTER_TYPE[ANDOR[type]]) { |
||||
this.tree.addNode(finded, node); |
||||
return; |
||||
} |
||||
if (data.value === BI.Filter.FILTER_TYPE[ANDOR[1 - type]]) { |
||||
if (pdata.value === BI.Filter.FILTER_TYPE[ANDOR[type]]) { |
||||
parent.addChild(node, index + 1); |
||||
return; |
||||
} |
||||
} |
||||
if ((data.value === BI.Filter.FILTER_TYPE[ANDOR[1 - type]] && pdata.value !== BI.Filter.FILTER_TYPE[ANDOR[type]]) |
||||
|| pdata.value === BI.Filter.FILTER_TYPE[ANDOR[1 - type]] |
||||
|| (pdata.value !== BI.Filter.FILTER_TYPE.AND && pdata.value !== BI.Filter.FILTER_TYPE.OR)) { |
||||
var andor = new BI.Node(BI.UUID()); |
||||
andor.set("data", { |
||||
value: BI.Filter.FILTER_TYPE[ANDOR[type]], |
||||
children: [finded.get("data"), node.get("data")] |
||||
}); |
||||
parent.removeChildByIndex(index); |
||||
parent.addChild(andor, index); |
||||
andor.addChild(finded); |
||||
andor.addChild(node); |
||||
return; |
||||
} |
||||
parent.addChild(node, index + 1); |
||||
} |
||||
}, |
||||
|
||||
_removeCondition: function (id) { |
||||
var finded = this.tree.search(id); |
||||
if (BI.isNotNull(finded)) { |
||||
var parent = finded.getParent(); |
||||
parent.removeChild(id); |
||||
if (parent.getChildrenLength() <= 1) { |
||||
var prev = parent.getParent(); |
||||
if (BI.isNotNull(prev)) { |
||||
var index = prev.getChildIndex(parent.id); |
||||
prev.removeChildByIndex(index); |
||||
if (parent.getChildrenLength() === 1) { |
||||
prev.addChild(parent.getFirstChild(), index); |
||||
} |
||||
} |
||||
} |
||||
this._populate(this.tree.toJSONWithNode()); |
||||
this.fireEvent("EVENT_CHANGE"); |
||||
} |
||||
}, |
||||
|
||||
_addAndOrCondition: function (formulaOrField, type) { |
||||
var ANDOR = ["AND", "OR"]; |
||||
type || (type = 0); |
||||
var currentSelectItem = this.filter.getCurrentSelectItem(); |
||||
if (BI.isNotNull(currentSelectItem)) { |
||||
var id = currentSelectItem.attr("id"); |
||||
this._insertAndOrCondition(id, formulaOrField, type); |
||||
} else { |
||||
var node = this._createEmptyNode(formulaOrField); |
||||
var root = this.tree.getRoot(); |
||||
var child = root.getLastChild(); |
||||
if (BI.isNotNull(child)) { |
||||
var data = child.get("data"); |
||||
if (data.value === BI.Filter.FILTER_TYPE[ANDOR[type]]) { |
||||
this.tree.addNode(child, node); |
||||
} else { |
||||
var andor = new BI.Node(BI.UUID()); |
||||
andor.set("data", { |
||||
value: BI.Filter.FILTER_TYPE[ANDOR[type]], |
||||
children: [child.get("data"), node.get("data")] |
||||
}); |
||||
root.removeChild(child.id); |
||||
this.tree.addNode(andor); |
||||
this.tree.addNode(andor, child); |
||||
this.tree.addNode(andor, node); |
||||
} |
||||
} else { |
||||
this.tree.addNode(node); |
||||
} |
||||
} |
||||
this._populate(this.tree.toJSONWithNode()); |
||||
this.fireEvent("EVENT_CHANGE"); |
||||
}, |
||||
|
||||
_populate: function (items) { |
||||
this.filter.defaultState(); |
||||
var o = this.options; |
||||
o.items = items; |
||||
BI.Tree.traversal(items, function (i, item) { |
||||
o.itemCreator(item); |
||||
}); |
||||
this.filter.populate.apply(this.filter, [items]); |
||||
}, |
||||
|
||||
populate: function (conditions) { |
||||
this.tree.initTree(conditions); |
||||
this._populate(this.tree.toJSONWithNode()); |
||||
}, |
||||
|
||||
getValue: function () { |
||||
return this.filter.getValue(); |
||||
} |
||||
}); |
||||
|
||||
BI.shortcut("bi.filter", BI.Filter); |
||||
|
||||
BI.Filter.FILTER_TYPE = {}; |
||||
BI.Filter.FILTER_TYPE.FORMULA = 33; |
||||
BI.Filter.FILTER_TYPE.AND = 34; |
||||
BI.Filter.FILTER_TYPE.OR = 35; |
||||
BI.Filter.FILTER_TYPE.EMPTY_FORMULA = 36; |
||||
BI.Filter.FILTER_TYPE.EMPTY_CONDITION = 37; |
||||
@ -0,0 +1,102 @@
|
||||
/** |
||||
* Created by windy on 2017/3/28. |
||||
*/ |
||||
!(function () { |
||||
var FilterList = BI.inherit(BI.ButtonTree, { |
||||
props: { |
||||
baseCls: "bi-button-map" |
||||
}, |
||||
|
||||
_createBtns: function (items) { |
||||
var o = this.options; |
||||
var buttons = BI.createWidgets(BI.createItems(items, {type: "bi.text_button", once: o.chooseType === 0})); |
||||
var keys = BI.map(items, function (i, item) { |
||||
item = BI.stripEL(item); |
||||
if (!(item.id || item.value)) { |
||||
throw new Error("item must have 'id' or 'value' as its property"); |
||||
} |
||||
return item.id || item.value; |
||||
}); |
||||
return BI.zipObject(keys, buttons); |
||||
}, |
||||
|
||||
setValue: function (v) { |
||||
v = BI.isArray(v) ? v : [v]; |
||||
BI.each(this.buttons, function (val, item) { |
||||
if (!BI.isFunction(item.setSelected)) { |
||||
item.setValue(v); |
||||
return; |
||||
} |
||||
if (v.contains(val)) { |
||||
item.setSelected && item.setSelected(true); |
||||
} else { |
||||
item.setSelected && item.setSelected(false); |
||||
} |
||||
}); |
||||
}, |
||||
|
||||
setNotSelectedValue: function (v) { |
||||
v = BI.isArray(v) ? v : [v]; |
||||
BI.each(this.buttons, function (val, item) { |
||||
if (!BI.isFunction(item.setSelected)) { |
||||
item.setNotSelectedValue(v); |
||||
return; |
||||
} |
||||
if (v.contains(val)) { |
||||
item.setSelected && item.setSelected(false); |
||||
} else { |
||||
item.setSelected && item.setSelected(true); |
||||
} |
||||
}); |
||||
}, |
||||
|
||||
populate: function (items) { |
||||
var self = this; |
||||
var args = [].slice.call(arguments); |
||||
var linkHashMap = new BI.LinkHashMap(); |
||||
var val = function (item) { |
||||
return item.id || item.value; |
||||
}; |
||||
if (!this.buttons) { |
||||
this.buttons = {}; |
||||
} |
||||
// 所有已存在的和新添加的
|
||||
var willCreated = []; |
||||
BI.each(items, function (i, item) { |
||||
item = BI.stripEL(item); |
||||
if (self.buttons[val(item)]) { |
||||
var ob = self.buttons[val(item)]; |
||||
args[0] = item.items; |
||||
args[2] = item; |
||||
ob.populate && ob.populate.apply(ob, args); |
||||
} else { |
||||
willCreated.push(item); |
||||
} |
||||
}); |
||||
// 创建新元素
|
||||
args[0] = willCreated; |
||||
var newBtns = this._btnsCreator.apply(this, args); |
||||
|
||||
// 整理
|
||||
var array = []; |
||||
BI.each(items, function (i, item) { |
||||
item = BI.stripEL(item); |
||||
var button = self.buttons[val(item)] || newBtns[val(item)]; |
||||
linkHashMap.add(val(item), button); |
||||
array.push(button); |
||||
}); |
||||
this.buttons = linkHashMap.map; |
||||
|
||||
BI.DOM.hang(this.buttons); |
||||
this.element.empty(); |
||||
|
||||
var packages = this._packageItems(items, this._packageBtns(array)); |
||||
BI.createWidget(BI.extend({element: this}, this._packageLayout(packages))); |
||||
}, |
||||
|
||||
getIndexByValue: function () { |
||||
throw new Error("Can not use getIndexByValue"); |
||||
} |
||||
}); |
||||
BI.shortcut("bi.filter_list", FilterList); |
||||
}()); |
||||
@ -0,0 +1,245 @@
|
||||
/** |
||||
* 过滤条件 |
||||
* |
||||
* Created by GUY on 2015/9/25. |
||||
* @class BI.FilterOperation |
||||
* @extend BI.Widget |
||||
*/ |
||||
!(function () { |
||||
var OPERATION_ADD_CONDITION = 0, OPERATION_ADD_ANDOR_CONDITION = 1; |
||||
var FilterOperation = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "bi-filter-operation", |
||||
expander: {}, |
||||
items: [], |
||||
selections: [BI.AbstractFilterItem.FILTER_OPERATION_CONDITION, BI.AbstractFilterItem.FILTER_OPERATION_FORMULA], |
||||
itemsCreator: BI.emptyFn |
||||
}, |
||||
|
||||
render: function () { |
||||
var self = this, o = this.options; |
||||
this.currentSelected = null; |
||||
|
||||
return { |
||||
type: "bi.vtape", |
||||
items: [{ |
||||
el: { |
||||
type: "bi.tab", |
||||
showIndex: OPERATION_ADD_CONDITION, |
||||
cardCreator: BI.bind(this._createTabs, this), |
||||
ref: function (_ref) { |
||||
self.buttonComboTab = _ref; |
||||
} |
||||
}, |
||||
height: 40 |
||||
}, { |
||||
el: { |
||||
type: "bi.absolute", |
||||
scrollable: true, |
||||
items: [{ |
||||
el: { |
||||
type: "bi.left", |
||||
items: [{ |
||||
type: "bi.filter_pane", |
||||
expander: o.expander, |
||||
items: o.items, |
||||
itemsCreator: o.itemsCreator, |
||||
listeners: [{ |
||||
eventName: "EVENT_CHANGE", |
||||
action: function (type, value, obj) { |
||||
if (type === BI.Events.CLICK) { |
||||
if (BI.isNotNull(self.currentSelected) && self.currentSelected === obj) { |
||||
obj.setSelectedCondition(!obj.isSelectedCondition()); |
||||
} else { |
||||
if (BI.isNotNull(self.currentSelected)) { |
||||
self.currentSelected.setSelectedCondition(false); |
||||
} |
||||
self.currentSelected = obj; |
||||
obj.setSelectedCondition(true); |
||||
} |
||||
if (self.currentSelected.isSelectedCondition()) { |
||||
self.buttonComboTab.setSelect(OPERATION_ADD_ANDOR_CONDITION); |
||||
} else { |
||||
self.buttonComboTab.setSelect(OPERATION_ADD_CONDITION); |
||||
} |
||||
} |
||||
if (type === BI.Events.DESTROY) { |
||||
if (self.currentSelected === obj) { |
||||
self.currentSelected = null; |
||||
self.buttonComboTab.setSelect(OPERATION_ADD_CONDITION); |
||||
} |
||||
self.fireEvent("BI.FilterOperation.EVENT_DESTROY_ITEM", value, obj); |
||||
} |
||||
} |
||||
}], |
||||
ref: function (_ref) { |
||||
self.filter = _ref; |
||||
} |
||||
}] |
||||
}, |
||||
top: 0, |
||||
right: 2, |
||||
bottom: 0, |
||||
left: 0 |
||||
}] |
||||
} |
||||
}] |
||||
}; |
||||
}, |
||||
|
||||
_createTabs: function (v) { |
||||
var self = this; |
||||
switch (v) { |
||||
case OPERATION_ADD_CONDITION: |
||||
return { |
||||
type: "bi.button_group", |
||||
items: BI.createItems(self._createButtons(), { |
||||
type: "bi.icon_text_item", |
||||
height: 30, |
||||
width: 100 |
||||
}), |
||||
chooseType: BI.ButtonGroup.CHOOSE_TYPE_DEFAULT, |
||||
layouts: [{ |
||||
type: "bi.left", |
||||
vgap: 5 |
||||
}], |
||||
listeners: [{ |
||||
eventName: BI.ButtonGroup.EVENT_CHANGE, |
||||
action: function (value, obj) { |
||||
if (BI.isEmptyArray(self.filter.getValue())) { |
||||
self.filter.element.addClass("bi-border-top bi-border-left"); |
||||
} |
||||
self.fireEvent("EVENT_OPERATION", obj.getValue()); |
||||
self.defaultState(); |
||||
} |
||||
}] |
||||
}; |
||||
case OPERATION_ADD_ANDOR_CONDITION: |
||||
return { |
||||
type: "bi.button_group", |
||||
chooseType: BI.ButtonGroup.CHOOSE_TYPE_DEFAULT, |
||||
items: self._buildOperationButton(), |
||||
layouts: [{ |
||||
type: "bi.left", |
||||
vgap: 5 |
||||
}] |
||||
}; |
||||
} |
||||
}, |
||||
|
||||
_createButtons: function () { |
||||
var buttons = []; |
||||
BI.each(this.options.selections, function (i, type) { |
||||
switch (type) { |
||||
case BI.AbstractFilterItem.FILTER_OPERATION_FORMULA: |
||||
buttons.push({ |
||||
text: BI.i18nText("BI-Conf_Add_Formula"), |
||||
value: BI.AbstractFilterItem.FILTER_OPERATION_FORMULA, |
||||
cls: "operation-trigger filter-formula-font" |
||||
}); |
||||
break; |
||||
case BI.AbstractFilterItem.FILTER_OPERATION_CONDITION: |
||||
buttons.push({ |
||||
text: BI.i18nText("BI-Conf_Add_Condition"), |
||||
value: BI.AbstractFilterItem.FILTER_OPERATION_CONDITION, |
||||
cls: "operation-trigger filter-condition-font" |
||||
}); |
||||
break; |
||||
} |
||||
}); |
||||
return buttons; |
||||
}, |
||||
|
||||
_buildOperationButton: function () { |
||||
var self = this, combos = []; |
||||
BI.each(this.options.selections, function (i, type) { |
||||
var text = "", cls = "", items = []; |
||||
switch (type) { |
||||
case BI.AbstractFilterItem.FILTER_OPERATION_FORMULA: |
||||
text = BI.i18nText("BI-Conf_Add_Formula"); |
||||
cls = "filter-formula-font"; |
||||
items = BI.Constants.getConstant("bi.constant.component.filter").FORMULA_COMBO; |
||||
break; |
||||
case BI.AbstractFilterItem.FILTER_OPERATION_CONDITION: |
||||
default: |
||||
text = BI.i18nText("BI-Conf_Add_Condition"); |
||||
cls = "filter-condition-font"; |
||||
items = BI.Constants.getConstant("bi.constant.component.filter").CONDITION_COMBO; |
||||
break; |
||||
} |
||||
|
||||
var trigger = BI.createWidget({ |
||||
type: "bi.icon_text_item", |
||||
cls: "operation-trigger " + cls, |
||||
text: text, |
||||
height: 30, |
||||
width: 100 |
||||
}); |
||||
combos.push({ |
||||
type: "bi.combo", |
||||
el: trigger, |
||||
popup: { |
||||
el: { |
||||
type: "bi.button_group", |
||||
chooseType: BI.ButtonGroup.CHOOSE_TYPE_NONE, |
||||
items: BI.createItems(items, { |
||||
type: "bi.single_select_item", |
||||
height: 25 |
||||
}), |
||||
layouts: [{ |
||||
type: "bi.vertical" |
||||
}] |
||||
} |
||||
}, |
||||
listeners: [{ |
||||
eventName: BI.Combo.EVENT_CHANGE, |
||||
action: function (value, obj) { |
||||
if (BI.isEmptyArray(self.filter.getValue())) { |
||||
self.filter.element.addClass("bi-border-top bi-border-left"); |
||||
} |
||||
|
||||
switch (value) { |
||||
case BI.AbstractFilterItem.FILTER_OPERATION_CONDITION_AND: |
||||
case BI.AbstractFilterItem.FILTER_OPERATION_CONDITION_OR: |
||||
trigger.setText(BI.i18nText("BI-Conf_Add_Condition")); |
||||
break; |
||||
case BI.AbstractFilterItem.FILTER_OPERATION_FORMULA_AND: |
||||
case BI.AbstractFilterItem.FILTER_OPERATION_FORMULA_OR: |
||||
trigger.setText(BI.i18nText("BI-Conf_Add_Formula")); |
||||
break; |
||||
default: |
||||
trigger.setText(); |
||||
} |
||||
self.fireEvent("EVENT_OPERATION", obj.getValue()); |
||||
self.defaultState(); |
||||
this.hideView(); |
||||
} |
||||
}] |
||||
}); |
||||
}); |
||||
return combos; |
||||
}, |
||||
|
||||
defaultState: function () { |
||||
if (BI.isNotNull(this.currentSelected)) { |
||||
this.currentSelected.setSelectedCondition(false); |
||||
} |
||||
this.buttonComboTab.setSelect(OPERATION_ADD_CONDITION); |
||||
}, |
||||
|
||||
getCurrentSelectItem: function () { |
||||
if (BI.isNotNull(this.currentSelected) && this.currentSelected.isSelectedCondition()) { |
||||
return this.currentSelected; |
||||
} |
||||
}, |
||||
|
||||
populate: function (items) { |
||||
this.filter.populate.apply(this.filter, arguments); |
||||
}, |
||||
|
||||
getValue: function () { |
||||
return this.filter.getValue(); |
||||
} |
||||
}); |
||||
BI.shortcut("bi.filter_operation", FilterOperation); |
||||
}()); |
||||
@ -0,0 +1,62 @@
|
||||
/** |
||||
* @class BI.FilterPane |
||||
* @extend BI.Widget |
||||
* 过滤面板 |
||||
*/ |
||||
!(function () { |
||||
var FilterPane = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "bi-filter-pane", |
||||
expander: {}, |
||||
items: [], |
||||
itemsCreator: BI.emptyFn |
||||
}, |
||||
|
||||
render: function () { |
||||
var self = this, o = this.options; |
||||
return { |
||||
type: "bi.custom_tree", |
||||
cls: BI.isNotEmptyArray(o.items) ? "bi-border-top bi-border-left" : "", |
||||
expander: BI.extend({ |
||||
type: "bi.filter_expander", |
||||
el: {}, |
||||
popup: { |
||||
type: "bi.custom_tree" |
||||
} |
||||
}, o.expander), |
||||
el: { |
||||
type: "bi.filter_list", |
||||
chooseType: BI.ButtonGroup.CHOOSE_TYPE_DEFAULT, |
||||
layouts: [{ |
||||
type: "bi.vertical", |
||||
scrolly: false |
||||
}] |
||||
}, |
||||
items: o.items, |
||||
listeners: [{ |
||||
eventName: BI.Controller.EVENT_CHANGE, |
||||
action: function () { |
||||
self.fireEvent("EVENT_CHANGE", arguments); |
||||
} |
||||
}], |
||||
ref: function (_ref) { |
||||
self.tree = _ref; |
||||
} |
||||
}; |
||||
}, |
||||
|
||||
populate: function (items) { |
||||
if (BI.isNotEmptyArray(items)) { |
||||
this.element.addClass("bi-border-top bi-border-left"); |
||||
} else { |
||||
this.element.removeClass("bi-border-top bi-border-left"); |
||||
} |
||||
this.tree.populate.apply(this.tree, arguments); |
||||
}, |
||||
|
||||
getValue: function () { |
||||
return this.tree.getValue(); |
||||
} |
||||
}); |
||||
BI.shortcut("bi.filter_pane", FilterPane); |
||||
}()); |
||||
Loading…
Reference in new issue