From 99931d45d85f7e8630d99335a17e410b4aece147 Mon Sep 17 00:00:00 2001 From: zsmj Date: Fri, 13 Jan 2023 10:40:34 +0800 Subject: [PATCH 1/6] update --- src/base/single/bar/bar.loading.js | 2 +- src/case/button/treeitem/treeitem.js | 2 +- src/widget/singletree/singletree.popup.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/base/single/bar/bar.loading.js b/src/base/single/bar/bar.loading.js index a4ab85a46..4331844e0 100644 --- a/src/base/single/bar/bar.loading.js +++ b/src/base/single/bar/bar.loading.js @@ -2,7 +2,7 @@ import { shortcut, emptyFn } from "@/core"; import { Single } from "../0.single"; @shortcut() -class LoadingBar extends Single { +export class LoadingBar extends Single { static xtype = "bi.loading_bar"; _defaultConfig() { diff --git a/src/case/button/treeitem/treeitem.js b/src/case/button/treeitem/treeitem.js index 189573c33..8a9bcae3b 100644 --- a/src/case/button/treeitem/treeitem.js +++ b/src/case/button/treeitem/treeitem.js @@ -51,7 +51,7 @@ export class BasicTreeItem extends NodeButton { width: 24, } : null; - const indent = layer === 0 ? null : { + const indent = { el: { type: Layout.xtype, height, diff --git a/src/widget/singletree/singletree.popup.js b/src/widget/singletree/singletree.popup.js index 7e4b6899d..87438cb2f 100644 --- a/src/widget/singletree/singletree.popup.js +++ b/src/widget/singletree/singletree.popup.js @@ -31,7 +31,7 @@ export class SingleTreePopup extends Pane { o = this.options; this.tree = createWidget({ - type: "bi.level_tree", + type: LevelTree.xtype, expander: { isDefaultInit: true, }, From 19ed4a665f8500c42633eb141e9e5d5edf712f59 Mon Sep 17 00:00:00 2001 From: zsmj Date: Fri, 13 Jan 2023 15:03:22 +0800 Subject: [PATCH 2/6] update --- src/case/button/index.js | 5 +- src/case/button/node/node.first.plus.js | 92 ---- src/case/button/node/node.last.plus.js | 89 ---- src/case/button/node/node.mid.plus.js | 91 ---- src/case/button/node/treenode.js | 142 ++++-- src/case/button/treeitem/treeitem.js | 28 +- src/widget/index.js | 7 + .../multilayerselecttree.combo.test.js | 83 ++-- src/widget/multilayerselecttree/index.js | 2 + .../multilayerselecttree.combo.js | 420 +++++++++++------- ...multilayerselecttree.insert.search.pane.js | 151 ++++--- .../multilayerselecttree.leveltree.js | 234 ++++++---- .../multilayerselecttree.popup.js | 86 ++-- .../multilayerselecttree.trigger.js | 334 ++++++++------ .../node/node.first.plus.js | 99 ----- .../node/node.last.plus.js | 88 ---- .../node/node.mid.plus.js | 88 ---- .../multilayerselecttree/node/node.plus.js | 92 ---- src/widget/multilayersingletree/index.js | 2 + .../multilayersingletree.combo.js | 402 ++++++++++------- ...multilayersingletree.insert.search.pane.js | 151 ++++--- .../multilayersingletree.leveltree.js | 232 ++++++---- .../multilayersingletree.popup.js | 86 ++-- .../multilayersingletree.trigger.js | 329 ++++++++------ .../node/node.first.plus.js | 91 ---- .../node/node.last.plus.js | 90 ---- .../node/node.mid.plus.js | 90 ---- .../multilayersingletree/node/node.plus.js | 102 ----- .../treeitem/item.first.treeleaf.js | 86 ---- .../treeitem/item.last.treeleaf.js | 86 ---- .../treeitem/item.mid.treeleaf.js | 86 ---- 31 files changed, 1623 insertions(+), 2341 deletions(-) delete mode 100644 src/case/button/node/node.first.plus.js delete mode 100644 src/case/button/node/node.last.plus.js delete mode 100644 src/case/button/node/node.mid.plus.js create mode 100644 src/widget/multilayerselecttree/index.js delete mode 100644 src/widget/multilayerselecttree/node/node.first.plus.js delete mode 100644 src/widget/multilayerselecttree/node/node.last.plus.js delete mode 100644 src/widget/multilayerselecttree/node/node.mid.plus.js delete mode 100644 src/widget/multilayerselecttree/node/node.plus.js create mode 100644 src/widget/multilayersingletree/index.js delete mode 100644 src/widget/multilayersingletree/node/node.first.plus.js delete mode 100644 src/widget/multilayersingletree/node/node.last.plus.js delete mode 100644 src/widget/multilayersingletree/node/node.mid.plus.js delete mode 100644 src/widget/multilayersingletree/node/node.plus.js delete mode 100644 src/widget/multilayersingletree/treeitem/item.first.treeleaf.js delete mode 100644 src/widget/multilayersingletree/treeitem/item.last.treeleaf.js delete mode 100644 src/widget/multilayersingletree/treeitem/item.mid.treeleaf.js diff --git a/src/case/button/index.js b/src/case/button/index.js index 8f366680c..0f144f94e 100644 --- a/src/case/button/index.js +++ b/src/case/button/index.js @@ -10,10 +10,7 @@ export { HalfIconButton } from "./icon/iconhalf/icon.half.image"; export { HalfButton } from "./icon/iconhalf/icon.half"; export { ArrowNode } from "./node/node.arrow"; -export { FirstPlusGroupNode } from "./node/node.first.plus"; export { IconArrowNode } from "./node/node.icon.arrow"; -export { LastPlusGroupNode } from "./node/node.last.plus"; -export { MidPlusGroupNode } from "./node/node.mid.plus"; export { MultiLayerIconArrowNode } from "./node/node.multilayer.icon.arrow"; export { PlusGroupNode } from "./node/node.plus"; export { TreeNodeSwitcher } from "./node/siwtcher.tree.node"; @@ -26,3 +23,5 @@ export { MultiLayerIconTreeLeafItem } from "./treeitem/item.multilayer.icon.tree export { BasicTreeItem, FirstTreeLeafItem, MidTreeLeafItem, LastTreeLeafItem, RootTreeLeafItem } from "./treeitem/treeitem"; + +export * from "./node/treenode"; diff --git a/src/case/button/node/node.first.plus.js b/src/case/button/node/node.first.plus.js deleted file mode 100644 index 8e895f801..000000000 --- a/src/case/button/node/node.first.plus.js +++ /dev/null @@ -1,92 +0,0 @@ -import { NodeButton } from "../../../base/single/button/button.node"; -import { shortcut, extend, createWidget, Controller } from "../../../core"; - - -/** - * 加号表示的组节点 - * Created by GUY on 2015/9/6. - * @class FirstPlusGroupNode - * @extends NodeButton - */ -@shortcut() -export class FirstPlusGroupNode extends NodeButton { - static xtype = "bi.first_plus_group_node"; - - _defaultConfig() { - const conf = super._defaultConfig(...arguments); - - return extend(conf, { - baseCls: `${conf.baseCls || ""} bi-first-plus-group-node bi-list-item`, - logic: { - dynamic: false, - }, - id: "", - pId: "", - open: false, - height: 24, - }); - } - - _init() { - super._init.apply(this, arguments); - const o = this.options; - this.checkbox = createWidget({ - type: "bi.first_tree_node_checkbox", - stopPropagation: true, - iconHeight: o.height, - iconWidth: o.height, - }); - this.text = createWidget({ - type: "bi.label", - textAlign: "left", - whiteSpace: "nowrap", - textHeight: o.height, - height: o.height, - hgap: o.hgap, - text: o.text, - value: o.value, - py: o.py, - keyword: o.keyword, - }); - this.checkbox.on(Controller.EVENT_CHANGE, function (type) { - if (type === BI.Events.CLICK) { - if (this.isSelected()) { - self.triggerExpand(); - } else { - self.triggerCollapse(); - } - } - }); - const type = BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left); - const items = BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Left, { - width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, - el: this.checkbox, - }, this.text); - BI.createWidget(BI.extend({ - element: this, - }, BI.LogicFactory.createLogic(type, BI.extend(o.logic, { - items, - })))); - } - - doRedMark() { - this.text.doRedMark(...arguments); - } - - unRedMark() { - this.text.unRedMark(...arguments); - } - - doClick() { - super.doClick(...arguments); - this.checkbox.setSelected(this.isSelected()); - } - - setOpened(v) { - super.setOpened(...arguments); - if (BI.isNotNull(this.checkbox)) { - this.checkbox.setSelected(v); - } - } -} - diff --git a/src/case/button/node/node.last.plus.js b/src/case/button/node/node.last.plus.js deleted file mode 100644 index 95e745f4e..000000000 --- a/src/case/button/node/node.last.plus.js +++ /dev/null @@ -1,89 +0,0 @@ -import { NodeButton } from "../../../base/single/button/button.node"; -import { shortcut, extend, createWidget, isNotNull, Controller } from "../../../core"; - -/** - * 加号表示的组节点 - * Created by GUY on 2015/9/6. - * @class LastPlusGroupNode - * @extends NodeButton - */ -@shortcut() -export class LastPlusGroupNode extends NodeButton { - static xtype = "bi.last_plus_group_node"; - - _defaultConfig() { - const conf = super._defaultConfig(...arguments); - - return extend(conf, { - baseCls: `${conf.baseCls || ""} bi-last-plus-group-node bi-list-item`, - logic: { - dynamic: false, - }, - id: "", - pId: "", - open: false, - height: 24, - }); - } - _init() { - BI.LastPlusGroupNode.superclass._init.apply(this, arguments); - const o = this.options; - this.checkbox = createWidget({ - type: "bi.last_tree_node_checkbox", - stopPropagation: true, - iconHeight: o.height, - iconWidth: o.height, - }); - this.text = createWidget({ - type: "bi.label", - textAlign: "left", - whiteSpace: "nowrap", - textHeight: o.height, - height: o.height, - hgap: o.hgap, - text: o.text, - value: o.value, - py: o.py, - keyword: o.keyword, - }); - this.checkbox.on(Controller.EVENT_CHANGE, type => { - if (type === BI.Events.CLICK) { - if (this.checkbox.isSelected()) { - this.triggerExpand(); - } else { - this.triggerCollapse(); - } - } - }); - const type = BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left); - const items = BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Left, { - width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, - el: this.checkbox, - }, this.text); - createWidget(extend({ - element: this, - }, BI.LogicFactory.createLogic(type, extend(o.logic, { - items, - })))); - } - - doRedMark() { - this.text.doRedMark(...arguments); - } - - unRedMark() { - this.text.unRedMark(...arguments); - } - - doClick() { - super.doClick(...arguments); - this.checkbox.setSelected(this.isSelected()); - } - - setOpened(v) { - super.setOpened(...arguments); - if (isNotNull(this.checkbox)) { - this.checkbox.setSelected(v); - } - } -} diff --git a/src/case/button/node/node.mid.plus.js b/src/case/button/node/node.mid.plus.js deleted file mode 100644 index e1276d6ab..000000000 --- a/src/case/button/node/node.mid.plus.js +++ /dev/null @@ -1,91 +0,0 @@ -import { NodeButton } from "../../../base/single/button/button.node"; -import { shortcut, extend, createWidget, Controller } from "../../../core"; - -/** - * 加号表示的组节点 - * Created by GUY on 2015/9/6. - * @class BI.MidPlusGroupNode - * @extends BI.NodeButton - */ -@shortcut -export class MidPlusGroupNode extends NodeButton { - static xtype = "bi.mid_plus_group_node"; - - _defaultConfig() { - const conf = super._defaultConfig(...arguments); - - return extend(conf, { - baseCls: `${conf.baseCls || ""} bi-mid-plus-group-node bi-list-item`, - logic: { - dynamic: false, - }, - id: "", - pId: "", - open: false, - height: 24, - }); - } - - _init() { - super._init(...arguments); - const o = this.options; - this.checkbox = createWidget({ - type: "bi.mid_tree_node_checkbox", - stopPropagation: true, - iconHeight: o.height, - iconWidth: o.height, - }); - this.text = createWidget({ - type: "bi.label", - textAlign: "left", - whiteSpace: "nowrap", - textHeight: o.height, - height: o.height, - hgap: o.hgap, - text: o.text, - value: o.value, - py: o.py, - keyword: o.keyword, - }); - this.checkbox.on(Controller.EVENT_CHANGE, type => { - if (type === BI.Events.CLICK) { - if (this.checkbox.isSelected()) { - this.triggerExpand(); - } else { - this.triggerCollapse(); - } - } - }); - const type = BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left); - const items = BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Left, { - width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, - el: this.checkbox, - }, this.text); - createWidget(extend({ - element: this, - }, BI.LogicFactory.createLogic(type, extend(o.logic, { - items, - })))); - } - - doRedMark() { - this.text.doRedMark(...arguments); - } - - unRedMark() { - this.text.unRedMark(...arguments); - } - - doClick() { - super.doClick(...arguments); - this.checkbox.setSelected(this.isSelected()); - } - - setOpened(v) { - super.setOpened(...arguments); - if (BI.isNotNull(this.checkbox)) { - this.checkbox.setSelected(v); - } - } -} - diff --git a/src/case/button/node/treenode.js b/src/case/button/node/treenode.js index f6ef4c5bc..b09cf5830 100644 --- a/src/case/button/node/treenode.js +++ b/src/case/button/node/treenode.js @@ -1,5 +1,5 @@ -import { Label, NodeButton } from "@/base"; -import { shortcut, extend, VerticalAdaptLayout } from "@/core"; +import { IconLabel, Label, NodeButton } from "@/base"; +import { shortcut, extend, VerticalAdaptLayout, Layout, isKey, compact } from "@/core"; import { TreeNodeSwitcher } from "@/case"; @shortcut() @@ -25,21 +25,41 @@ export class BasicTreeNode extends NodeButton { } render() { - const o = this.options; + const { + open, + layer, + height, + hgap, + textHgap, + textVgap, + textLgap, + textRgap, + text, + value, + isFirstNode, + isLastNode, + keyword, + iconWidth, + iconHeight, + iconWrapperWidth, + iconCls, + switcherIcon, + selectable, + } = this.options; const checkbox = { type: TreeNodeSwitcher.xtype, ref: _ref => { this.switcher = _ref; }, - iconHeight: o.height, - iconWidth: o.iconWrapperWidth || o.height, - open: o.open, - isFirstNode: o.isFirstNode, - isLastNode: o.isLastNode, - layer: o.layer, - ...o.switcherIcon, - stopPropagation: o.selectable, + iconHeight: height, + iconWidth: iconWrapperWidth || height, + open, + isFirstNode, + isLastNode, + layer, + ...switcherIcon, + stopPropagation: selectable, mounted() { this.setEnable(true); }, @@ -47,7 +67,7 @@ export class BasicTreeNode extends NodeButton { { eventName: "EVENT_CHANGE", action: () => { - if (!this.isEnabled() || o.selectable) { + if (!this.isEnabled() || selectable) { this.isOpened() ? this.triggerCollapse() : this.triggerExpand(); } }, @@ -55,14 +75,39 @@ export class BasicTreeNode extends NodeButton { ], }; + // const indent = { + // el: { + // type: Layout.xtype, + // height, + // width: height, + // cls: this.getLineCls(), + // }, + // lgap: layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2, // 偏移公式为每一层的偏移量为节点高度的一半 + // width: "", + // }; + + + const icon = isKey(iconCls) ? { + el: { + type: IconLabel.xtype, + // iconWidth, + // iconHeight, + cls: iconCls, + }, + // width: 24, + } : null; + + return { type: VerticalAdaptLayout.xtype, - columnSize: [o.iconWrapperWidth || o.height, "fill"], - items: [ + items: compact([ { el: checkbox, - lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2, // 偏移公式为每一层的偏移量为节点高度的一半 - }, { + lgap: layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2, // 偏移公式为每一层的偏移量为节点高度的一半 + width: iconWrapperWidth || height, + }, + icon, + { el: { type: Label.xtype, ref: _ref => { @@ -70,19 +115,19 @@ export class BasicTreeNode extends NodeButton { }, textAlign: "left", whiteSpace: "nowrap", - textHeight: o.height, - height: o.height, - hgap: o.hgap || o.textHgap, - vgap: o.textVgap, - lgap: o.textLgap, - rgap: o.textRgap, - text: o.text, - value: o.value, - keyword: o.keyword, - py: o.py, + textHeight: height, + height, + hgap: hgap || textHgap, + vgap: textVgap, + lgap: textLgap, + rgap: textRgap, + text, + value, + keyword, }, + width: "fill", } - ], + ]), }; } @@ -111,4 +156,47 @@ export class BasicTreeNode extends NodeButton { } } +@shortcut() +export class FirstPlusGroupNode extends BasicTreeNode { + static xtype = "bi.first_plus_group_node"; + + _defaultConfig() { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { + baseCls: `${conf.baseCls || ""} bi-first-plus-group-node`, + isFirstNode: true, + isLastNode: false, + }); + } +} + +@shortcut +export class MidPlusGroupNode extends BasicTreeNode { + static xtype = "bi.mid_plus_group_node"; + _defaultConfig() { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { + baseCls: `${conf.baseCls || ""} bi-mid-plus-group-node`, + isFirstNode: false, + isLastNode: false, + }); + } +} + +@shortcut() +export class LastPlusGroupNode extends BasicTreeNode { + static xtype = "bi.last_plus_group_node"; + + _defaultConfig() { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { + baseCls: `${conf.baseCls || ""} bi-last-plus-group-node`, + isFirstNode: false, + isLastNode: true, + }); + } +} diff --git a/src/case/button/treeitem/treeitem.js b/src/case/button/treeitem/treeitem.js index 8a9bcae3b..297cb15a8 100644 --- a/src/case/button/treeitem/treeitem.js +++ b/src/case/button/treeitem/treeitem.js @@ -17,8 +17,8 @@ export class BasicTreeItem extends NodeButton { isFirstNode: false, isLastNode: false, layer: 0, - iconWidth: 16, - iconHeight: 16, + iconWidth: null, + iconHeight: null, iconCls: "", }); } @@ -34,6 +34,8 @@ export class BasicTreeItem extends NodeButton { textRgap, text, value, + isFirstNode, + isLastNode, py, keyword, iconWidth, @@ -41,15 +43,6 @@ export class BasicTreeItem extends NodeButton { iconCls, } = this.options; - const icon = isKey(iconCls) ? { - el: { - type: IconLabel.xtype, - iconWidth, - iconHeight, - cls: iconCls, - }, - width: 24, - } : null; const indent = { el: { @@ -62,11 +55,22 @@ export class BasicTreeItem extends NodeButton { width: "", }; + + const icon = isKey(iconCls) ? { + el: { + type: IconLabel.xtype, + // iconWidth, + // iconHeight, + cls: iconCls, + }, + // width: 24, + } : null; + return { type: VerticalAdaptLayout.xtype, items: compact([ - icon, indent, + icon, { el: { type: Label.xtype, diff --git a/src/widget/index.js b/src/widget/index.js index e86e9e362..08d813cd1 100644 --- a/src/widget/index.js +++ b/src/widget/index.js @@ -19,8 +19,11 @@ import { NumberEditor } from "./numbereditor/number.editor"; import { NumberInterval } from "./numberinterval/numberinterval"; import * as multiselect from "./multiselect"; import * as multiselectlist from "./multiselectlist"; +import * as multilayerselectree from "./multilayerselecttree"; +import * as multilayersingletree from "./multilayersingletree"; import * as year from "./year"; import { YearInterval } from "./yearinterval/yearinterval"; + Object.assign(BI, { Collapse, ...calendar, @@ -45,6 +48,8 @@ Object.assign(BI, { YearInterval, ...multiselect, ...multiselectlist, + ...multilayerselectree, + ...multilayersingletree, }); export * from "./date/calendar"; @@ -61,6 +66,8 @@ export * from "./downlist"; export * from "./singleslider"; export * from "./intervalslider"; export * from "./year"; +export * from "./multilayersingletree"; +export * from "./multilayerselecttree"; export { Collapse, NumberEditor, diff --git a/src/widget/multilayerselecttree/__test__/multilayerselecttree.combo.test.js b/src/widget/multilayerselecttree/__test__/multilayerselecttree.combo.test.js index 8674a4f8b..70d1d00a9 100644 --- a/src/widget/multilayerselecttree/__test__/multilayerselecttree.combo.test.js +++ b/src/widget/multilayerselecttree/__test__/multilayerselecttree.combo.test.js @@ -4,39 +4,40 @@ * Created by windy on 2019/9/18 */ -describe("multilayer_select_tree", function () { - - var items = [{id: -1, pId: -2, value: "根目录", text: "根目录"}, - {id: 1, pId: -1, value: "第一级目录1", text: "第一级目录1"}, - {id: 11, pId: 1, value: "第二级文件1", text: "第二级文件1"}, - {id: 12, pId: 1, value: "第二级目录2", text: "第二级目录2"}, - {id: 121, pId: 12, value: "第三级目录1", text: "第三级目录1"}, - {id: 122, pId: 12, value: "第三级文件1", text: "第三级文件1"}, - {id: 1211, pId: 121, value: "第四级目录1", text: "第四级目录1"}, +describe("multilayer_select_tree", () => { + const items = [ + { id: -1, pId: -2, value: "根目录", text: "根目录" }, + { id: 1, pId: -1, value: "第一级目录1", text: "第一级目录1" }, + { id: 11, pId: 1, value: "第二级文件1", text: "第二级文件1" }, + { id: 12, pId: 1, value: "第二级目录2", text: "第二级目录2" }, + { id: 121, pId: 12, value: "第三级目录1", text: "第三级目录1" }, + { id: 122, pId: 12, value: "第三级文件1", text: "第三级文件1" }, + { id: 1211, pId: 121, value: "第四级目录1", text: "第四级目录1" }, { id: 12111, pId: 1211, value: "第五级文件1", - text: "第五级文件111111111111111111111111111111111111111111111111111111111111111111111111111111111111111" + text: "第五级文件111111111111111111111111111111111111111111111111111111111111111111111111111111111111111", }, - {id: 2, pId: -1, value: "第一级目录2", text: "第一级目录2"}, - {id: 21, pId: 2, value: "第二级目录3", text: "第二级目录3"}, - {id: 22, pId: 2, value: "第二级文件2", text: "第二级文件2"}, - {id: 211, pId: 21, value: "第三级目录2", text: "第三级目录2"}, - {id: 212, pId: 21, value: "第三级文件2", text: "第三级文件2"}, - {id: 2111, pId: 211, value: "第四级文件1", text: "第四级文件1"}]; + { id: 2, pId: -1, value: "第一级目录2", text: "第一级目录2" }, + { id: 21, pId: 2, value: "第二级目录3", text: "第二级目录3" }, + { id: 22, pId: 2, value: "第二级文件2", text: "第二级文件2" }, + { id: 211, pId: 21, value: "第三级目录2", text: "第三级目录2" }, + { id: 212, pId: 21, value: "第三级文件2", text: "第三级文件2" }, + { id: 2111, pId: 211, value: "第四级文件1", text: "第四级文件1" } + ]; /** * test_author_windy **/ - it("defaultValue_allowEdit", function () { - var tree = BI.Test.createWidget({ + it("defaultValue_allowEdit", () => { + const tree = BI.Test.createWidget({ type: "bi.multilayer_select_tree_combo", width: 300, height: 24, allowEdit: true, items: BI.deepClone(items), - value: "第一级目录2" + value: "第一级目录2", }); expect(tree.getValue()).to.equal("第一级目录2"); tree.destroy(); @@ -45,13 +46,13 @@ describe("multilayer_select_tree", function () { /** * test_author_windy **/ - it("defaultValue_not_allowEdit", function () { - var tree = BI.Test.createWidget({ + it("defaultValue_not_allowEdit", () => { + const tree = BI.Test.createWidget({ type: "bi.multilayer_select_tree_combo", width: 300, height: 24, items: BI.deepClone(items), - value: "第一级目录2" + value: "第一级目录2", }); expect(tree.getValue()).to.equal("第一级目录2"); tree.destroy(); @@ -60,17 +61,17 @@ describe("multilayer_select_tree", function () { /** * test_author_windy **/ - it("点选选值", function (done) { - var tree = BI.Test.createWidget({ + it("点选选值", done => { + const tree = BI.Test.createWidget({ type: "bi.multilayer_select_tree_combo", width: 300, height: 24, allowEdit: true, items: BI.deepClone(items), - value: "第一级目录2" + value: "第一级目录2", }); tree.element.find(".bi-multi-layer-select-tree-trigger").click(); - BI.nextTick(function () { + BI.nextTick(() => { tree.element.find(".bi-select-tree-plus-group-node").click(); expect(tree.getValue()[0]).to.equal("根目录"); tree.destroy(); @@ -81,20 +82,20 @@ describe("multilayer_select_tree", function () { /** * test_author_windy **/ - it("搜索选值", function (done) { - var tree = BI.Test.createWidget({ + it("搜索选值", done => { + const tree = BI.Test.createWidget({ type: "bi.multilayer_select_tree_combo", width: 300, height: 24, allowEdit: true, - items: BI.deepClone(items) + items: BI.deepClone(items), }); - BI.nextTick(function () { + BI.nextTick(() => { tree.element.find(".bi-multi-layer-select-tree-trigger .tip-text-style").click(); // 这边为啥要加呢，因为input的setValue中有nextTick - BI.nextTick(function () { - BI.Test.triggerKeyDown(tree.element.find(".bi-multi-layer-select-tree-trigger .bi-input"), "2", 50, function () { - BI.nextTick(function () { + BI.nextTick(() => { + BI.Test.triggerKeyDown(tree.element.find(".bi-multi-layer-select-tree-trigger .bi-input"), "2", 50, () => { + BI.nextTick(() => { tree.element.find(".bi-select-tree-mid-plus-group-node").click(); expect(tree.getValue()[0]).to.equal("第一级目录2"); tree.destroy(); @@ -108,21 +109,21 @@ describe("multilayer_select_tree", function () { /** * test_author_windy **/ - it("新增值", function (done) { - var tree = BI.Test.createWidget({ + it("新增值", done => { + const tree = BI.Test.createWidget({ type: "bi.multilayer_select_tree_combo", width: 300, height: 24, allowEdit: true, allowInsertValue: true, - items: BI.deepClone(items) + items: BI.deepClone(items), }); - BI.nextTick(function () { + BI.nextTick(() => { tree.element.find(".bi-multi-layer-select-tree-trigger .tip-text-style").click(); // 这边为啥要加呢，因为input的setValue中有nextTick - BI.nextTick(function () { - BI.Test.triggerKeyDown(tree.element.find(".bi-multi-layer-select-tree-trigger .bi-input"), "z", 50, function () { - BI.nextTick(function () { + BI.nextTick(() => { + BI.Test.triggerKeyDown(tree.element.find(".bi-multi-layer-select-tree-trigger .bi-input"), "z", 50, () => { + BI.nextTick(() => { tree.element.find(".bi-text-button:contains(+点击新增\"z\")").click(); expect(tree.getValue()[0]).to.equal("z"); tree.destroy(); @@ -132,4 +133,4 @@ describe("multilayer_select_tree", function () { }); }); }); -}); \ No newline at end of file +}); diff --git a/src/widget/multilayerselecttree/index.js b/src/widget/multilayerselecttree/index.js new file mode 100644 index 000000000..436fdef6c --- /dev/null +++ b/src/widget/multilayerselecttree/index.js @@ -0,0 +1,2 @@ +export { MultiLayerSelectTreeCombo } from "./multilayerselecttree.combo"; +export { MultiLayerSelectLevelTree } from "./multilayerselecttree.leveltree"; diff --git a/src/widget/multilayerselecttree/multilayerselecttree.combo.js b/src/widget/multilayerselecttree/multilayerselecttree.combo.js index ec2a9a393..834a4fb40 100644 --- a/src/widget/multilayerselecttree/multilayerselecttree.combo.js +++ b/src/widget/multilayerselecttree/multilayerselecttree.combo.js @@ -1,17 +1,40 @@ -/** - * @class BI.MultiLayerSelectTreeCombo - * @extends BI.Widget - */ -BI.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, { +import { + shortcut, + Widget, + extend, + emptyFn, + isKey, + toPix, + AbsoluteLayout, + nextTick, + isArray +} from "@/core"; +import { SingleTreeTrigger } from "../singletree/singletree.trigger"; +import { MultiLayerSelectTreePopup } from "./multilayerselecttree.popup"; +import { Combo } from "@/base"; +import { MultiLayerSelectTreeTrigger } from "./multilayerselecttree.trigger"; +import { TriggerIconButton } from "@/case"; - _defaultConfig: function () { - return BI.extend(BI.MultiLayerSelectTreeCombo.superclass._defaultConfig.apply(this, arguments), { +@shortcut() +export class MultiLayerSelectTreeCombo extends Widget { + static xtype = "bi.multilayer_select_tree_combo"; + + static EVENT_SEARCHING = "EVENT_SEARCHING"; + static EVENT_BLUR = "EVENT_BLUR"; + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_STOP = "EVENT_STOP"; + static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; + static EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multilayer-select-tree-combo", isDefaultInit: false, height: 24, text: "", defaultText: "", - itemsCreator: BI.emptyFn, + itemsCreator: emptyFn, items: [], allowEdit: false, allowSearchValue: false, @@ -19,268 +42,327 @@ BI.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, { isNeedAdjustWidth: true, status: "", // "error","warning" }); - }, + } - render: function () { - var self = this, o = this.options; + render() { + const self = this, + o = this.options; - var cls = (o.simple ? "bi-border-bottom " : "bi-border bi-border-radius ") + (BI.isKey(o.status) ? ("status-" + o.status) : ""); + const cls = + (o.simple ? "bi-border-bottom " : "bi-border bi-border-radius ") + + (isKey(o.status) ? `status-${o.status}` : ""); - var baseConfig = this._getBaseConfig(); + const baseConfig = this._getBaseConfig(); if (o.allowEdit) { return { - type: "bi.absolute", - width: BI.toPix(o.width, 2), - height: BI.toPix(o.height, 2), + type: AbsoluteLayout.xtype, + width: toPix(o.width, 2), + height: toPix(o.height, 2), cls, items: [ { - el: BI.extend(baseConfig, this._getSearchConfig()), - top: 0, bottom: 0, right: 0, left: 0 - }, { - el: self._getTriggerIconButton(), - top: 0, bottom: 0, right: 0, + el: extend(baseConfig, this._getSearchConfig()), + top: 0, + bottom: 0, + right: 0, + left: 0, }, - ] + { + el: self._getTriggerIconButton(), + top: 0, + bottom: 0, + right: 0, + } + ], }; } - return BI.extend(baseConfig, { - el: { - type: "bi.single_tree_trigger", - ref: function (_ref) { - self.textTrigger = _ref; + return extend( + baseConfig, + { + el: { + type: SingleTreeTrigger.xtype, + ref(_ref) { + self.textTrigger = _ref; + }, + text: o.text, + defaultText: o.defaultText, + height: toPix(o.height, 2), + items: o.items, + value: o.value, + tipType: o.tipType, + warningTitle: o.warningTitle, + valueFormatter: o.valueFormatter, }, - text: o.text, - defaultText: o.defaultText, - height: BI.toPix(o.height, 2), - items: o.items, - value: o.value, - tipType: o.tipType, - warningTitle: o.warningTitle, - valueFormatter: o.valueFormatter, - } - }, { cls }); - }, + }, + { cls } + ); + } + + _getBaseConfig() { + const self = this, + o = this.options; - _getBaseConfig: function () { - var self = this, o = this.options; return { - type: "bi.combo", - width: BI.toPix(o.width, 2), - height: BI.toPix(o.height, 2), + type: Combo.xtype, + width: toPix(o.width, 2), + height: toPix(o.height, 2), container: o.container, destroyWhenHide: o.destroyWhenHide, adjustLength: 2, - ref: function (_ref) { + ref(_ref) { self.combo = _ref; }, popup: { el: { - type: "bi.multilayer_select_tree_popup", + type: MultiLayerSelectTreePopup.xtype, isDefaultInit: o.isDefaultInit, itemsCreator: o.itemsCreator, items: o.items, - ref: function (_ref) { - self.trigger && self.trigger.getSearcher().setAdapter(_ref); + ref(_ref) { + self.trigger && + self.trigger.getSearcher().setAdapter(_ref); }, - listeners: [{ - eventName: BI.MultiLayerSelectTreePopup.EVENT_CHANGE, - action: function () { - self.setValue(this.getValue()); - self.combo.hideView(); - self.fireEvent(BI.MultiLayerSelectTreeCombo.EVENT_CHANGE); - self.fireEvent(BI.MultiLayerSelectTreeCombo.EVENT_CLICK_ITEM, self.combo.getValue()); + listeners: [ + { + eventName: MultiLayerSelectTreePopup.EVENT_CHANGE, + action() { + self.setValue(this.getValue()); + self.combo.hideView(); + self.fireEvent( + MultiLayerSelectTreeCombo.EVENT_CHANGE + ); + self.fireEvent( + MultiLayerSelectTreeCombo.EVENT_CLICK_ITEM, + self.combo.getValue() + ); + }, } - }], - onLoaded: function () { - BI.nextTick(function () { + ], + onLoaded() { + nextTick(() => { self.combo.adjustWidth(); self.combo.adjustHeight(); }); - } + }, }, value: o.value, maxHeight: 400, maxWidth: o.isNeedAdjustWidth ? "auto" : 500, - minHeight: 240 + minHeight: 240, }, isNeedAdjustWidth: o.isNeedAdjustWidth, - listeners: [{ - eventName: BI.Combo.EVENT_BEFORE_POPUPVIEW, - action: function () { - self.fireEvent(BI.MultiLayerSelectTreeCombo.EVENT_BEFORE_POPUPVIEW); + listeners: [ + { + eventName: Combo.EVENT_BEFORE_POPUPVIEW, + action() { + self.fireEvent( + MultiLayerSelectTreeCombo.EVENT_BEFORE_POPUPVIEW + ); + }, } - }] + ], }; - }, + } + + _getSearchConfig() { + const self = this, + o = this.options; - _getSearchConfig: function () { - var self = this, o = this.options; return { el: { - type: "bi.multilayer_select_tree_trigger", + type: MultiLayerSelectTreeTrigger.xtype, container: o.container, allowInsertValue: o.allowInsertValue, allowSearchValue: o.allowSearchValue, allowEdit: o.allowEdit, cls: "multilayer-select-tree-trigger", - ref: function (_ref) { + ref(_ref) { self.trigger = _ref; }, items: o.items, itemsCreator: o.itemsCreator, valueFormatter: o.valueFormatter, watermark: o.watermark, - height: BI.toPix(o.height, 2), + height: toPix(o.height, 2), text: o.text, defaultText: o.defaultText, value: o.value, tipType: o.tipType, warningTitle: o.warningTitle, title: o.title, - listeners: [{ - eventName: BI.MultiLayerSelectTreeTrigger.EVENT_CHANGE, - action: function () { - self.setValue(this.getValue()); - self.combo.hideView(); - self.fireEvent(BI.MultiLayerSelectTreeCombo.EVENT_CHANGE); - self.fireEvent(BI.MultiLayerSelectTreeCombo.EVENT_CLICK_ITEM, self.combo.getValue()); - } - }, { - eventName: BI.MultiLayerSelectTreeTrigger.EVENT_FOCUS, - action: function () { - self.fireEvent(BI.MultiLayerSelectTreeCombo.EVENT_FOCUS); - } - }, { - eventName: BI.MultiLayerSelectTreeTrigger.EVENT_BLUR, - action: function () { - self.fireEvent(BI.MultiLayerSelectTreeCombo.EVENT_BLUR); - } - }, { - eventName: BI.MultiLayerSelectTreeTrigger.EVENT_SEARCHING, - action: function () { - self.fireEvent(BI.MultiLayerSelectTreeCombo.EVENT_SEARCHING); - } - }, { - eventName: BI.MultiLayerSelectTreeTrigger.EVENT_STOP, - action: function () { - self.fireEvent(BI.MultiLayerSelectTreeCombo.EVENT_STOP); - } - }, { - eventName: BI.MultiLayerSelectTreeTrigger.EVENT_ADD_ITEM, - action: function () { - var value = self.trigger.getSearcher().getKeyword(); - self.combo.setValue([value]); - self.combo.hideView(); - self.fireEvent(BI.MultiLayerSelectTreeCombo.EVENT_CHANGE); + listeners: [ + { + eventName: MultiLayerSelectTreeTrigger.EVENT_CHANGE, + action() { + self.setValue(this.getValue()); + self.combo.hideView(); + self.fireEvent( + MultiLayerSelectTreeCombo.EVENT_CHANGE + ); + self.fireEvent( + MultiLayerSelectTreeCombo.EVENT_CLICK_ITEM, + self.combo.getValue() + ); + }, + }, + { + eventName: MultiLayerSelectTreeTrigger.EVENT_FOCUS, + action() { + self.fireEvent( + MultiLayerSelectTreeCombo.EVENT_FOCUS + ); + }, + }, + { + eventName: MultiLayerSelectTreeTrigger.EVENT_BLUR, + action() { + self.fireEvent( + MultiLayerSelectTreeCombo.EVENT_BLUR + ); + }, + }, + { + eventName: MultiLayerSelectTreeTrigger.EVENT_SEARCHING, + action() { + self.fireEvent( + MultiLayerSelectTreeCombo.EVENT_SEARCHING + ); + }, + }, + { + eventName: MultiLayerSelectTreeTrigger.EVENT_STOP, + action() { + self.fireEvent( + MultiLayerSelectTreeCombo.EVENT_STOP + ); + }, + }, + { + eventName: MultiLayerSelectTreeTrigger.EVENT_ADD_ITEM, + action() { + const value = self.trigger.getSearcher().getKeyword(); + self.combo.setValue([value]); + self.combo.hideView(); + self.fireEvent( + MultiLayerSelectTreeCombo.EVENT_CHANGE + ); + }, } - }] + ], }, toggle: !o.allowEdit, - hideChecker: function (e) { + hideChecker(e) { // 新增传配置container后对应hideChecker的修改 // IE11下，popover(position: fixed)下放置下拉控件(position: fixed), 滚动的时候会异常卡顿 // 通过container参数将popup放置于popover之外解决此问题, 其他下拉控件由于元素少或者有分页，所以 // 卡顿不明显, 先在此做尝试, 并在FineUI特殊处理待解决文档中标记跟踪 - return (o.container && self.trigger.getSearcher().isSearching() && self.trigger.getSearcher().getView().element.find(e.target).length > 0) ? false : self.triggerBtn?.element.find(e.target).length === 0; - + return o.container && + self.trigger.getSearcher().isSearching() && + self.trigger.getSearcher().getView().element.find(e.target) + .length > 0 + ? false + : self.triggerBtn?.element.find(e.target).length === 0; }, - listeners: [{ - eventName: BI.Combo.EVENT_AFTER_HIDEVIEW, - action: function () { - self.trigger.stopEditing(); - } - }, { - eventName: BI.Combo.EVENT_BEFORE_POPUPVIEW, - action: function () { - self.fireEvent(BI.MultiLayerSelectTreeCombo.EVENT_BEFORE_POPUPVIEW); + listeners: [ + { + eventName: Combo.EVENT_AFTER_HIDEVIEW, + action() { + self.trigger.stopEditing(); + }, + }, + { + eventName: Combo.EVENT_BEFORE_POPUPVIEW, + action() { + self.fireEvent( + MultiLayerSelectTreeCombo.EVENT_BEFORE_POPUPVIEW + ); + }, } - }] + ], }; - }, + } + + _getTriggerIconButton() { + const self = this, + o = this.options; - _getTriggerIconButton: function () { - var self = this, o = this.options; return { - type: "bi.trigger_icon_button", + type: TriggerIconButton.xtype, cls: "bi-trigger trigger-icon-button", - ref: function (_ref) { + ref(_ref) { self.triggerBtn = _ref; }, - width: BI.toPix(o.height, 2), - height: BI.toPix(o.height, 2), + width: toPix(o.height, 2), + height: toPix(o.height, 2), listeners: [ { - eventName: BI.TriggerIconButton.EVENT_CHANGE, - action: function () { + eventName: TriggerIconButton.EVENT_CHANGE, + action() { if (self.combo.isViewVisible()) { self.combo.hideView(); } else { self.combo.showView(); } - } + }, } - ] + ], }; - }, + } - setValue: function (v) { - v = BI.isArray(v) ? v : [v]; + setValue(v) { + v = isArray(v) ? v : [v]; this.combo.setValue(v); - }, + } - getValue: function () { + getValue() { return this.combo.getValue(); - }, + } - getSearcher: function () { - return this.trigger ? this.trigger.getSearcher() : this.textTrigger.getTextor(); - }, + getSearcher() { + return this.trigger + ? this.trigger.getSearcher() + : this.textTrigger.getTextor(); + } - clear: function () { + clear() { // do some work - }, + } - setStatus: function (status) { - if (BI.isKey(this.options.status)) { - this.element.removeClass("status-" + this.options.status); + setStatus(status) { + if (isKey(this.options.status)) { + this.element.removeClass(`status-${this.options.status}`); } - this.element.addClass("status-" + status); + this.element.addClass(`status-${status}`); this.options.status = status; - }, + } - setTipType: function (v) { - this.trigger ? this.trigger.setTipType(v) : this.textTrigger.setTipType(v); - }, + setTipType(v) { + this.trigger + ? this.trigger.setTipType(v) + : this.textTrigger.setTipType(v); + } - populate: function (items) { + populate(items) { this.combo.populate(items); - }, + } - focus: function () { + focus() { this.trigger ? this.trigger.focus() : this.textTrigger.focus(); - }, + } - blur: function () { + blur() { this.trigger ? this.trigger.blur() : this.textTrigger.blur(); - }, + } - showView: function () { + showView() { this.combo.showView(); - }, - - setWaterMark: function (v) { - this.trigger ? this.trigger.setWaterMark(v) : this.textTrigger.setWaterMark(v); } -}); -BI.MultiLayerSelectTreeCombo.EVENT_SEARCHING = "EVENT_SEARCHING"; -BI.MultiLayerSelectTreeCombo.EVENT_BLUR = "EVENT_BLUR"; -BI.MultiLayerSelectTreeCombo.EVENT_FOCUS = "EVENT_FOCUS"; -BI.MultiLayerSelectTreeCombo.EVENT_CHANGE = "EVENT_CHANGE"; -BI.MultiLayerSelectTreeCombo.EVENT_STOP = "EVENT_STOP"; -BI.MultiLayerSelectTreeCombo.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; -BI.MultiLayerSelectTreeCombo.EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM"; -BI.shortcut("bi.multilayer_select_tree_combo", BI.MultiLayerSelectTreeCombo); + setWaterMark(v) { + this.trigger + ? this.trigger.setWaterMark(v) + : this.textTrigger.setWaterMark(v); + } +} diff --git a/src/widget/multilayerselecttree/multilayerselecttree.insert.search.pane.js b/src/widget/multilayerselecttree/multilayerselecttree.insert.search.pane.js index 8c59f5992..058493c12 100644 --- a/src/widget/multilayerselecttree/multilayerselecttree.insert.search.pane.js +++ b/src/widget/multilayerselecttree/multilayerselecttree.insert.search.pane.js @@ -1,92 +1,119 @@ -/** - * Created by GUY on 2016/1/26. - * - * @class BI.MultiLayerSelectTreeInsertSearchPane - * @extends BI.Pane - */ +import { + shortcut, + Widget, + i18nText, + emptyFn, + createWidget, + Controller, + VerticalLayout, + isEmptyArray, + isArray +} from "@/core"; +import { MultiLayerSelectLevelTree } from "./multilayerselecttree.leveltree"; +import { TextButton } from "@/base"; -BI.MultiLayerSelectTreeInsertSearchPane = BI.inherit(BI.Widget, { +@shortcut() +export class MultiLayerSelectTreeInsertSearchPane extends Widget { + static xtype = "bi.multilayer_select_tree_insert_search_pane"; - props: function() { + static EVENT_ADD_ITEM = "EVENT_ADD_ITEM"; + static EVENT_CHANGE = "EVENT_CHANGE"; + + props() { return { baseCls: "bi-multilayer-select-tree-popup", - tipText: BI.i18nText("BI-No_Selected_Item"), + tipText: i18nText("BI-No_Selected_Item"), isDefaultInit: false, - itemsCreator: BI.emptyFn, + itemsCreator: emptyFn, items: [], - value: "" + value: "", }; - }, + } - render: function() { - var self = this, o = this.options; - this.tree = BI.createWidget({ - type: "bi.multilayer_select_level_tree", + render() { + const self = this, + o = this.options; + this.tree = createWidget({ + type: MultiLayerSelectLevelTree.xtype, isDefaultInit: o.isDefaultInit, items: o.items, - itemsCreator: o.itemsCreator === BI.emptyFn ? BI.emptyFn : function (op, callback) { - o.itemsCreator(op, function (res) { - callback(res); - self.setKeyword(o.keywordGetter()); - }); - }, + itemsCreator: + o.itemsCreator === emptyFn + ? emptyFn + : function (op, callback) { + o.itemsCreator(op, res => { + callback(res); + self.setKeyword(o.keywordGetter()); + }); + }, keywordGetter: o.keywordGetter, value: o.value, scrollable: null, - listeners: [{ - eventName: BI.Controller.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - } - }, { - eventName: BI.MultiLayerSelectLevelTree.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.MultiLayerSelectTreeInsertSearchPane.EVENT_CHANGE); + listeners: [ + { + eventName: Controller.EVENT_CHANGE, + action() { + self.fireEvent(Controller.EVENT_CHANGE, arguments); + }, + }, + { + eventName: MultiLayerSelectLevelTree.EVENT_CHANGE, + action() { + self.fireEvent( + MultiLayerSelectTreeInsertSearchPane.EVENT_CHANGE + ); + }, } - }] + ], }); + return { - type: "bi.vertical", + type: VerticalLayout.xtype, scrolly: false, scrollable: true, vgap: 5, - items: [{ - type: "bi.text_button", - invisible: true, - text: BI.i18nText("BI-Basic_Click_To_Add_Text", ""), - height: 24, - cls: "bi-high-light", - hgap: 5, - ref: function (_ref) { - self.addNotMatchTip = _ref; + items: [ + { + type: TextButton.xtype, + invisible: true, + text: i18nText("BI-Basic_Click_To_Add_Text", ""), + height: 24, + cls: "bi-high-light", + hgap: 5, + ref(_ref) { + self.addNotMatchTip = _ref; + }, + handler() { + self.fireEvent( + MultiLayerSelectTreeInsertSearchPane.EVENT_ADD_ITEM, + o.keywordGetter() + ); + }, }, - handler: function () { - self.fireEvent(BI.MultiLayerSelectTreeInsertSearchPane.EVENT_ADD_ITEM, o.keywordGetter()); - } - }, this.tree] + this.tree + ], }; - }, + } - setKeyword: function (keyword) { - var showTip = BI.isEmptyArray(this.tree.getAllLeaves()); + setKeyword(keyword) { + const showTip = isEmptyArray(this.tree.getAllLeaves()); this.addNotMatchTip.setVisible(showTip); - showTip && this.addNotMatchTip.setText(BI.i18nText("BI-Basic_Click_To_Add_Text", keyword)); - }, + showTip && + this.addNotMatchTip.setText( + i18nText("BI-Basic_Click_To_Add_Text", keyword) + ); + } - getValue: function () { + getValue() { return this.tree.getValue(); - }, + } - setValue: function (v) { - v = BI.isArray(v) ? v : [v]; + setValue(v) { + v = isArray(v) ? v : [v]; this.tree.setValue(v); - }, + } - populate: function (items) { + populate(items) { this.tree.populate(items); } -}); - -BI.MultiLayerSelectTreeInsertSearchPane.EVENT_ADD_ITEM = "EVENT_ADD_ITEM"; -BI.MultiLayerSelectTreeInsertSearchPane.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.multilayer_select_tree_insert_search_pane", BI.MultiLayerSelectTreeInsertSearchPane); \ No newline at end of file +} diff --git a/src/widget/multilayerselecttree/multilayerselecttree.leveltree.js b/src/widget/multilayerselecttree/multilayerselecttree.leveltree.js index 9072c3284..a307ffb2c 100644 --- a/src/widget/multilayerselecttree/multilayerselecttree.leveltree.js +++ b/src/widget/multilayerselecttree/multilayerselecttree.leveltree.js @@ -1,98 +1,135 @@ -/** - * guy - * 二级树 - * @class BI.MultiLayerSelectLevelTree - * @extends BI.Pane - */ -BI.MultiLayerSelectLevelTree = BI.inherit(BI.Pane, { - _defaultConfig: function () { - return BI.extend(BI.MultiLayerSelectLevelTree.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + extend, + emptyFn, + each, + isKey, + UUID, + isNotEmptyArray, + defaults, + createWidget, + Tree, + nextTick, + Selection, + Controller, + Events, + VerticalLayout, + AdaptiveLayout, + isNull, + isArray +} from "@/core"; +import { Pane, CustomTree, Loader, ButtonTree } from "@/base"; +import { BasicTreeNode, BasicTreeItem, TreeExpander } from "@/case"; + +@shortcut() +export class MultiLayerSelectLevelTree extends Pane { + static xtype = "bi.multilayer_select_level_tree"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multilayer-select-level-tree", isDefaultInit: false, items: [], - itemsCreator: BI.emptyFn, - keywordGetter: BI.emptyFn, + itemsCreator: emptyFn, + keywordGetter: emptyFn, value: "", - scrollable: true + scrollable: true, }); - }, + } - _init: function () { - var o = this.options; - BI.MultiLayerSelectLevelTree.superclass._init.apply(this, arguments); + _init() { + const o = this.options; + super._init(...arguments); this.storeValue = o.value; this.initTree(this.options.items); this.check(); - }, + } - _formatItems: function (nodes, layer, pNode) { - var self = this, o = this.options; - var keyword = o.keywordGetter(); - BI.each(nodes, function (i, node) { - var extend = { + _formatItems(nodes, layer, pNode) { + const self = this, + o = this.options; + const keyword = o.keywordGetter(); + each(nodes, (i, node) => { + const extend = { isFirstNode: i === 0, isLastNode: i === nodes.length - 1, - height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, }; node.layer = layer; - if (!BI.isKey(node.id)) { - node.id = BI.UUID(); + if (!isKey(node.id)) { + node.id = UUID(); } node.keyword = node.keyword || keyword; extend.pNode = pNode; - if (node.isParent === true || node.parent === true || BI.isNotEmptyArray(node.children)) { - extend.type = "bi.tree_node"; + 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; - }, + } - _assertId: function (sNodes) { - BI.each(sNodes, function (i, node) { - node.id = node.id || BI.UUID(); + _assertId(sNodes) { + each(sNodes, (i, node) => { + node.id = node.id || UUID(); }); - }, + } - // 构造树结构， - initTree: function (nodes) { - var self = this, o = this.options; - var hasNext = false; + initTree(nodes) { + const self = this, + o = this.options; + let hasNext = false; this.empty(); this._assertId(nodes); - this.tree = BI.createWidget({ - type: "bi.custom_tree", + this.tree = createWidget({ + type: CustomTree.xtype, cls: "tree-view display-table", expander: { - // type: "bi.select_tree_expander", - type: "bi.tree_expander", + type: TreeExpander.xtype, selectable: true, isDefaultInit: o.isDefaultInit, el: {}, popup: { - type: "bi.custom_tree" - } + type: CustomTree.xtype, + }, }, - items: this._formatItems(BI.Tree.transformToTreeFormat(nodes), 0), - itemsCreator: function (op, callback) { - (op.times === 1 && !op.node) && BI.nextTick(function () { + items: this._formatItems(Tree.transformToTreeFormat(nodes), 0), + itemsCreator(op, callback) { + op.times === 1 && + !op.node && + nextTick(() => { self.loading(); }); - o.itemsCreator(op, function (ob) { + o.itemsCreator(op, ob => { hasNext = ob.hasNext; - (op.times === 1 && !op.node) && self._populate(ob.items); - callback(self._formatItems(BI.Tree.transformToTreeFormat(ob.items), op.node ? op.node.layer + 1 : 0, op.node)); + op.times === 1 && !op.node && self._populate(ob.items); + callback( + self._formatItems( + Tree.transformToTreeFormat(ob.items), + op.node ? op.node.layer + 1 : 0, + op.node + ) + ); self.setValue(self.storeValue); - (op.times === 1 && !op.node) && BI.nextTick(function () { + op.times === 1 && + !op.node && + nextTick(() => { self.loaded(); }); }); @@ -100,73 +137,84 @@ BI.MultiLayerSelectLevelTree = BI.inherit(BI.Pane, { value: o.value, el: { - type: "bi.loader", - isDefaultInit: o.itemsCreator !== BI.emptyFn, + type: Loader.xtype, + isDefaultInit: o.itemsCreator !== emptyFn, el: { - type: "bi.button_tree", - chooseType: o.chooseType === BI.Selection.None ? BI.Selection.None : BI.Selection.Default, // 不使用buttontree内部getValue逻辑 + type: ButtonTree.xtype, + chooseType: + o.chooseType === Selection.None + ? Selection.None + : Selection.Default, // 不使用buttontree内部getValue逻辑 behaviors: o.behaviors, - layouts: [{ - type: "bi.vertical" - }] + layouts: [ + { + type: VerticalLayout.xtype, + } + ], }, - hasNext: function () { + hasNext() { return hasNext; - } - } + }, + }, }); - this.tree.on(BI.Controller.EVENT_CHANGE, function (type, value) { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - if (type === BI.Events.CLICK) { + this.tree.on(Controller.EVENT_CHANGE, function (type, value) { + self.fireEvent(Controller.EVENT_CHANGE, arguments); + if (type === Events.CLICK) { self.setValue(value); - self.fireEvent(BI.MultiLayerSelectLevelTree.EVENT_CHANGE, arguments); + self.fireEvent( + MultiLayerSelectLevelTree.EVENT_CHANGE, + arguments + ); } }); - BI.createWidget({ - type: "bi.adaptive", + createWidget({ + type: AdaptiveLayout.xtype, element: this, scrollable: o.scrollable, - items: [this.tree] + items: [this.tree], }); - }, + } - _populate: function () { - BI.MultiLayerSelectLevelTree.superclass.populate.apply(this, arguments); - }, + _populate() { + super.populate(...arguments); + } - populate: function (nodes) { + populate(nodes) { this._populate(nodes); - BI.isNull(nodes) ? this.tree.populate() : this.tree.populate(this._formatItems(BI.Tree.transformToTreeFormat(nodes), 0)); - }, + isNull(nodes) + ? this.tree.populate() + : this.tree.populate( + this._formatItems(Tree.transformToTreeFormat(nodes), 0) + ); + } - setValue: function (v) { + setValue(v) { // getValue依赖于storeValue, 那么不选的时候就不要更新storeValue了 - if (this.options.chooseType === BI.Selection.None) { + if (this.options.chooseType === Selection.None) { } else { this.storeValue = v; this.tree.setValue(v); } - }, + } - getValue: function () { - return BI.isArray(this.storeValue) ? - this.storeValue : BI.isNull(this.storeValue) ? - [] : [this.storeValue]; - }, + getValue() { + return isArray(this.storeValue) + ? this.storeValue + : isNull(this.storeValue) + ? [] + : [this.storeValue]; + } - getAllLeaves: function () { + getAllLeaves() { return this.tree.getAllLeaves(); - }, + } - getNodeById: function (id) { + getNodeById(id) { return this.tree.getNodeById(id); - }, + } - getNodeByValue: function (id) { + getNodeByValue(id) { return this.tree.getNodeByValue(id); } -}); -BI.MultiLayerSelectLevelTree.EVENT_CHANGE = "EVENT_CHANGE"; - -BI.shortcut("bi.multilayer_select_level_tree", BI.MultiLayerSelectLevelTree); +} diff --git a/src/widget/multilayerselecttree/multilayerselecttree.popup.js b/src/widget/multilayerselecttree/multilayerselecttree.popup.js index 34dce3a58..d5a781d4a 100644 --- a/src/widget/multilayerselecttree/multilayerselecttree.popup.js +++ b/src/widget/multilayerselecttree/multilayerselecttree.popup.js @@ -1,77 +1,85 @@ -/** - * Created by GUY on 2016/1/26. - * - * @class BI.MultiLayerSelectTreePopup - * @extends BI.Pane - */ +import { + shortcut, + Widget, + extend, + i18nText, + emptyFn, + createWidget, + Controller, + VerticalLayout, + isArray +} from "@/core"; +import { MultiLayerSelectLevelTree } from "./multilayerselecttree.leveltree"; -BI.MultiLayerSelectTreePopup = BI.inherit(BI.Widget, { +@shortcut() +export class MultiLayerSelectTreePopup extends Widget { + static xtype = "bi.multilayer_select_tree_popup"; - _defaultConfig: function () { - return BI.extend(BI.MultiLayerSelectTreePopup.superclass._defaultConfig.apply(this, arguments), { + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multilayer-select-tree-popup", - tipText: BI.i18nText("BI-No_Selected_Item"), + tipText: i18nText("BI-No_Selected_Item"), isDefaultInit: false, - itemsCreator: BI.emptyFn, + itemsCreator: emptyFn, items: [], value: "", - onLoaded: BI.emptyFn, - minHeight: 240 + onLoaded: emptyFn, + minHeight: 240, }); - }, + } - _init: function () { - BI.MultiLayerSelectTreePopup.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.multilayer_select_level_tree", + this.tree = createWidget({ + type: MultiLayerSelectLevelTree.xtype, isDefaultInit: o.isDefaultInit, items: o.items, itemsCreator: o.itemsCreator, keywordGetter: o.keywordGetter, value: o.value, scrollable: null, - onLoaded: function () { + onLoaded() { self.tree.check(); o.onLoaded(); - } + }, }); - BI.createWidget({ - type: "bi.vertical", + createWidget({ + type: VerticalLayout.xtype, scrolly: false, scrollable: true, 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.MultiLayerSelectLevelTree.EVENT_CHANGE, function () { - self.fireEvent(BI.MultiLayerSelectTreePopup.EVENT_CHANGE); + this.tree.on(MultiLayerSelectLevelTree.EVENT_CHANGE, () => { + self.fireEvent(MultiLayerSelectTreePopup.EVENT_CHANGE); }); this.tree.css("min-height", BI.pixFormat(o.minHeight - 10)); - }, + } - 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) { + populate(items) { this.tree.populate(items); } -}); - -BI.MultiLayerSelectTreePopup.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.multilayer_select_tree_popup", BI.MultiLayerSelectTreePopup); \ No newline at end of file +} diff --git a/src/widget/multilayerselecttree/multilayerselecttree.trigger.js b/src/widget/multilayerselecttree/multilayerselecttree.trigger.js index 08f9f9a9e..36ce295a2 100644 --- a/src/widget/multilayerselecttree/multilayerselecttree.trigger.js +++ b/src/widget/multilayerselecttree/multilayerselecttree.trigger.js @@ -1,237 +1,301 @@ -/** - * Created by Windy on 2018/2/2. - */ -BI.MultiLayerSelectTreeTrigger = BI.inherit(BI.Trigger, { +import { + shortcut, + emptyFn, + i18nText, + isNotNull, + isKey, + HorizontalFillLayout, + Tree, + deepClone, + Func, + concat, + isNotEmptyArray, + each, + uniqBy, + map, + isFunction, + find +} from "@/core"; +import { Trigger, Searcher } from "@/base"; +import { StateEditor, DefaultTextEditor } from "@/case"; +import { MultiLayerSelectTreeInsertSearchPane } from "./multilayerselecttree.insert.search.pane"; +import { MultiLayerSelectTreePopup } from "./multilayerselecttree.popup"; - props: function () { +@shortcut() +export class MultiLayerSelectTreeTrigger extends Trigger { + static xtype = "bi.multilayer_select_tree_trigger"; + + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_BLUR = "EVENT_BLUR"; + static EVENT_SEARCHING = "EVENT_SEARCHING"; + static EVENT_STOP = "EVENT_STOP"; + static EVENT_START = "EVENT_START"; + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_ADD_ITEM = "EVENT_ADD_ITEM"; + + props() { return { extraCls: "bi-multi-layer-select-tree-trigger", height: 24, - itemsCreator: BI.emptyFn, - watermark: BI.i18nText("BI-Basic_Search"), + itemsCreator: emptyFn, + watermark: i18nText("BI-Basic_Search"), allowSearchValue: false, - title: BI.bind(this._getShowText, this) + title: () => this._getShowText(), }; - }, + } - render: function () { - var self = this, o = this.options; + render() { + const self = this, + o = this.options; if (o.itemsCreator === BI.emptyFn) { this._initData(); } return { - type: "bi.horizontal_fill", + type: HorizontalFillLayout.xtype, items: [ { el: { - type: "bi.searcher", - ref: function () { + type: Searcher.xtype, + ref() { self.searcher = this; }, - masker: BI.isNotNull(o.container) ? { - offset: {}, - container: o.container - } : { - offset: {} - }, + masker: isNotNull(o.container) + ? { + offset: {}, + container: o.container, + } + : { + offset: {}, + }, isAutoSearch: false, el: { - type: "bi.default_text_editor", - ref: function () { + type: DefaultTextEditor.xtype, + ref() { self.editor = this; }, defaultText: o.defaultText, - text: BI.isKey(o.value) ? this._digest(o.value) : o.text, + text: isKey(o.value) + ? this._digest(o.value) + : o.text, value: o.value, height: o.height, tipText: "", watermark: o.watermark, - listeners: [{ - eventName: BI.StateEditor.EVENT_FOCUS, - action: function () { - self.fireEvent(BI.MultiLayerSelectTreeTrigger.EVENT_FOCUS); - } - }, { - eventName: BI.StateEditor.EVENT_BLUR, - action: function () { - self.fireEvent(BI.MultiLayerSelectTreeTrigger.EVENT_BLUR); + listeners: [ + { + eventName: StateEditor.EVENT_FOCUS, + action() { + self.fireEvent( + MultiLayerSelectTreeTrigger.EVENT_FOCUS + ); + }, + }, + { + eventName: StateEditor.EVENT_BLUR, + action() { + self.fireEvent( + MultiLayerSelectTreeTrigger.EVENT_BLUR + ); + }, + }, + { + eventName: StateEditor.EVENT_CHANGE, + action() { + self.fireEvent( + MultiLayerSelectTreeTrigger.EVENT_SEARCHING + ); + }, } - }, { - eventName: BI.StateEditor.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.MultiLayerSelectTreeTrigger.EVENT_SEARCHING); - } - }] + ], }, popup: { - type: o.allowInsertValue ? "bi.multilayer_select_tree_insert_search_pane" : "bi.multilayer_select_tree_popup", - itemsCreator: o.itemsCreator === BI.emptyFn ? BI.emptyFn : function (op, callback) { - op.keyword = self.editor.getValue(); - o.itemsCreator(op, callback); - }, - keywordGetter: function () { + type: o.allowInsertValue + ? MultiLayerSelectTreeInsertSearchPane.xtype + : MultiLayerSelectTreePopup.xtype, + itemsCreator: + o.itemsCreator === emptyFn + ? emptyFn + : function (op, callback) { + op.keyword = self.editor.getValue(); + o.itemsCreator(op, callback); + }, + keywordGetter() { return self.editor.getValue(); }, cls: "bi-card", - listeners: [{ - eventName: BI.MultiLayerSelectTreeInsertSearchPane.EVENT_ADD_ITEM, - action: function () { - self.options.text = self.getSearcher().getKeyword(); - self.fireEvent(BI.MultiLayerSelectTreeTrigger.EVENT_ADD_ITEM); + listeners: [ + { + eventName: + MultiLayerSelectTreeInsertSearchPane.EVENT_ADD_ITEM, + action() { + self.options.text = self + .getSearcher() + .getKeyword(); + self.fireEvent( + MultiLayerSelectTreeTrigger.EVENT_ADD_ITEM + ); + }, } - }], - ref: function (_ref) { + ], + ref(_ref) { self.popup = _ref; - } + }, }, - onSearch: function (obj, callback) { - var keyword = obj.keyword; + onSearch(obj, callback) { + const keyword = obj.keyword; if (o.itemsCreator === BI.emptyFn) { callback(self._getSearchItems(keyword)); - o.allowInsertValue && self.popup.setKeyword(keyword); + o.allowInsertValue && + self.popup.setKeyword(keyword); } else { callback(); } }, - listeners: [{ - eventName: BI.Searcher.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.MultiLayerSelectTreeTrigger.EVENT_CHANGE); + listeners: [ + { + eventName: Searcher.EVENT_CHANGE, + action() { + self.fireEvent( + MultiLayerSelectTreeTrigger.EVENT_CHANGE + ); + }, } - }] + ], }, width: "fill", - rgap: 24 - }, - ] + rgap: 24, + } + ], }; - }, + } - _initData: function () { - var o = this.options; - this.tree = new BI.Tree(); - this.nodes = BI.Tree.treeFormat(BI.deepClone(o.items)); + _initData() { + const o = this.options; + this.tree = new Tree(); + this.nodes = Tree.treeFormat(deepClone(o.items)); this.tree.initTree(this.nodes); - }, + } - _getSearchItems: function (keyword) { - var self = this, o = this.options; + _getSearchItems(keyword) { + const self = this, + o = this.options; // 把数组搜索换成用BI.tree搜索节点, 搜到了就不再往下搜索 - var items = []; - this.tree.traverse(function (node) { - var find = BI.Func.getSearchResult(self.tree.isRoot(node) ? [] : BI.concat([node.text], (o.allowSearchValue ? [node.value] : [])), keyword); + const items = []; + this.tree.traverse(node => { + const find = Func.getSearchResult( + self.tree.isRoot(node) + ? [] + : concat( + [node.text], + o.allowSearchValue ? [node.value] : [] + ), + keyword + ); if (find.find.length > 0 || find.match.length > 0) { items.push(node); + return true; } }); + return this._fillTreeStructure4Search(items, "id"); - }, + } - _createJson: function (node, open) { + _createJson(node, open) { return { id: node.id, pId: node.pId, text: node.text, value: node.value, - isParent: BI.isNotEmptyArray(node.children), - open: open + isParent: isNotEmptyArray(node.children), + open, }; - }, + } - _getChildren: function (node) { - var self = this; + _getChildren(node) { + const self = this; node.children = node.children || []; - var nodes = []; - BI.each(node.children, function (idx, child) { - var children = self._getChildren(child); + let nodes = []; + each(node.children, (idx, child) => { + const children = self._getChildren(child); nodes = nodes.concat(children); }); + return node.children.concat(nodes); - }, - - // 将搜索到的节点进行补充，构造成一棵完整的树 - _fillTreeStructure4Search: function (leaves) { - var self = this; - var result = []; - var queue = []; - BI.each(leaves, function (idx, node) { + } + + _fillTreeStructure4Search(leaves) { + const self = this; + let result = []; + const queue = []; + each(leaves, (idx, node) => { queue.push({ pId: node.pId }); result.push(node); result = result.concat(self._getChildren(node)); }); queue.reverse(); - while (BI.isNotEmptyArray(queue)) { - var node = queue.pop(); - var pNode = this.tree.search(this.tree.getRoot(), node.pId, "id"); + while (isNotEmptyArray(queue)) { + const node = queue.pop(); + const pNode = this.tree.search(this.tree.getRoot(), node.pId, "id"); if (pNode != null) { pNode.open = true; queue.push({ pId: pNode.pId }); result.push(pNode); } } - return BI.uniqBy(BI.map(result, function (idx, node) { - return self._createJson(node, node.open); - }), "id"); - }, - - _digest: function (v) { - var o = this.options; - if (BI.isFunction(o.valueFormatter)) { + + return uniqBy( + map(result, (idx, node) => self._createJson(node, node.open)), + "id" + ); + } + + _digest(v) { + const o = this.options; + if (isFunction(o.valueFormatter)) { return o.valueFormatter(v); } - var result = BI.find(o.items, function (i, item) { - return item.value === v; - }); + const result = find(o.items, (i, item) => item.value === v); - return BI.isNotNull(result) ? result.text : (o.text ?? v); - }, + return isNotNull(result) ? result.text : o.text ?? v; + } - _getShowText: function () { + _getShowText() { return this.editor.getText(); - }, + } - stopEditing: function () { + stopEditing() { this.searcher.stopSearch(); - }, + } - getSearcher: function () { + getSearcher() { return this.searcher; - }, + } - populate: function (items) { + populate(items) { this.options.items = items; this._initData(items); - }, + } - setValue: function (v) { + setValue(v) { this.editor.setState(this._digest(v[0])); - }, + } - 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.MultiLayerSelectTreeTrigger.EVENT_FOCUS = "EVENT_FOCUS"; -BI.MultiLayerSelectTreeTrigger.EVENT_BLUR = "EVENT_BLUR"; -BI.MultiLayerSelectTreeTrigger.EVENT_SEARCHING = "EVENT_SEARCHING"; -BI.MultiLayerSelectTreeTrigger.EVENT_STOP = "EVENT_STOP"; -BI.MultiLayerSelectTreeTrigger.EVENT_START = "EVENT_START"; -BI.MultiLayerSelectTreeTrigger.EVENT_CHANGE = "EVENT_CHANGE"; -BI.MultiLayerSelectTreeTrigger.EVENT_ADD_ITEM = "EVENT_ADD_ITEM"; -BI.shortcut("bi.multilayer_select_tree_trigger", BI.MultiLayerSelectTreeTrigger); +} diff --git a/src/widget/multilayerselecttree/node/node.first.plus.js b/src/widget/multilayerselecttree/node/node.first.plus.js deleted file mode 100644 index c187ab7a5..000000000 --- a/src/widget/multilayerselecttree/node/node.first.plus.js +++ /dev/null @@ -1,99 +0,0 @@ -/** - * 加号表示的组节点 - * - * Created by GUY on 2016/1/27. - * @class BI.MultiLayerSelectTreeFirstPlusGroupNode - * @extends BI.NodeButton - */ -BI.MultiLayerSelectTreeFirstPlusGroupNode = BI.inherit(BI.NodeButton, { - _defaultConfig: function () { - var conf = BI.MultiLayerSelectTreeFirstPlusGroupNode.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - extraCls: "bi-multilayer-select-tree-first-plus-group-node bi-list-item-active", - layer: 0, // 第几层级 - id: "", - pId: "", - readonly: true, - open: false, - height: 24 - }); - }, - _init: function () { - BI.MultiLayerSelectTreeFirstPlusGroupNode.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.node = BI.createWidget({ - type: "bi.select_tree_first_plus_group_node", - cls: "bi-list-item-none", - stopPropagation: true, - logic: { - dynamic: true - }, - id: o.id, - pId: o.pId, - keyword: o.keyword, - open: o.open, - height: o.height, - hgap: o.hgap, - text: o.text, - value: o.value, - py: o.py - }); - this.node.on(BI.Controller.EVENT_CHANGE, function (type) { - self.setSelected(self.isSelected()); - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - }); - - var items = []; - // BI.count(0, o.layer, function (index) { - // items.push({ - // type: "bi.layout", - // cls: BI.contains(needBlankLayers, index) ? "" : "base-line-conn-background", - // width: 12, - // height: o.height - // }); - // }); - items.push({ - el: this.node, - lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2 - }); - BI.createWidget({ - type: "bi.horizontal_adapt", - element: this, - columnSize: BI.makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2), - items: items - }); - }, - - isOnce: function () { - return true; - }, - - doRedMark: function () { - this.node.doRedMark.apply(this.node, arguments); - }, - - unRedMark: function () { - this.node.unRedMark.apply(this.node, arguments); - }, - - isSelected: function () { - return this.node.isSelected(); - }, - - setSelected: function (b) { - BI.MultiLayerSelectTreeFirstPlusGroupNode.superclass.setSelected.apply(this, arguments); - this.node.setSelected(b); - }, - - doClick: function () { - BI.NodeButton.superclass.doClick.apply(this, arguments); - this.node.setSelected(this.isSelected()); - }, - - setOpened: function (v) { - BI.MultiLayerSelectTreeFirstPlusGroupNode.superclass.setOpened.apply(this, arguments); - this.node.setOpened(v); - } -}); - -BI.shortcut("bi.multilayer_select_tree_first_plus_group_node", BI.MultiLayerSelectTreeFirstPlusGroupNode); diff --git a/src/widget/multilayerselecttree/node/node.last.plus.js b/src/widget/multilayerselecttree/node/node.last.plus.js deleted file mode 100644 index 89f4a1efa..000000000 --- a/src/widget/multilayerselecttree/node/node.last.plus.js +++ /dev/null @@ -1,88 +0,0 @@ -/** - * 加号表示的组节点 - * - * Created by GUY on 2016/1/27. - * @class BI.MultiLayerSelectTreeLastPlusGroupNode - * @extends BI.NodeButton - */ -BI.MultiLayerSelectTreeLastPlusGroupNode = BI.inherit(BI.NodeButton, { - _defaultConfig: function () { - var conf = BI.MultiLayerSelectTreeLastPlusGroupNode.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - extraCls: "bi-multilayer-select-tree-last-plus-group-node bi-list-item-active", - layer: 0, // 第几层级 - id: "", - pId: "", - readonly: true, - open: false, - height: 24 - }); - }, - _init: function () { - BI.MultiLayerSelectTreeLastPlusGroupNode.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.node = BI.createWidget({ - type: "bi.select_tree_last_plus_group_node", - cls: "bi-list-item-none", - stopPropagation: true, - logic: { - dynamic: true - }, - id: o.id, - pId: o.pId, - keyword: o.keyword, - open: o.open, - height: o.height, - hgap: o.hgap, - text: o.text, - value: o.value, - py: o.py - }); - this.node.on(BI.Controller.EVENT_CHANGE, function (type) { - self.setSelected(self.isSelected()); - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - }); - - var items = []; - - items.push({ - el: this.node, - lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2 - }); - BI.createWidget({ - type: "bi.horizontal_adapt", - element: this, - columnSize: BI.makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2), - items: items - }); - }, - - doRedMark: function () { - this.node.doRedMark.apply(this.node, arguments); - }, - - unRedMark: function () { - this.node.unRedMark.apply(this.node, arguments); - }, - - isSelected: function () { - return this.node.isSelected(); - }, - - setSelected: function (b) { - BI.MultiLayerSelectTreeLastPlusGroupNode.superclass.setSelected.apply(this, arguments); - this.node.setSelected(b); - }, - - doClick: function () { - BI.MultiLayerSelectTreeLastPlusGroupNode.superclass.doClick.apply(this, arguments); - this.node.setSelected(this.isSelected()); - }, - - setOpened: function (v) { - BI.MultiLayerSelectTreeLastPlusGroupNode.superclass.setOpened.apply(this, arguments); - this.node.setOpened(v); - } -}); - -BI.shortcut("bi.multilayer_select_tree_last_plus_group_node", BI.MultiLayerSelectTreeLastPlusGroupNode); diff --git a/src/widget/multilayerselecttree/node/node.mid.plus.js b/src/widget/multilayerselecttree/node/node.mid.plus.js deleted file mode 100644 index 6dad3105f..000000000 --- a/src/widget/multilayerselecttree/node/node.mid.plus.js +++ /dev/null @@ -1,88 +0,0 @@ -/** - * 加号表示的组节点 - * - * Created by GUY on 2016/1/27. - * @class BI.MultiLayerSelectTreeMidPlusGroupNode - * @extends BI.NodeButton - */ -BI.MultiLayerSelectTreeMidPlusGroupNode = BI.inherit(BI.NodeButton, { - _defaultConfig: function () { - var conf = BI.MultiLayerSelectTreeMidPlusGroupNode.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - extraCls: "bi-multilayer-select-tree-mid-plus-group-node bi-list-item-active", - layer: 0, // 第几层级 - id: "", - pId: "", - readonly: true, - open: false, - height: 24 - }); - }, - _init: function () { - BI.MultiLayerSelectTreeMidPlusGroupNode.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.node = BI.createWidget({ - type: "bi.select_tree_mid_plus_group_node", - cls: "bi-list-item-none", - stopPropagation: true, - logic: { - dynamic: true - }, - id: o.id, - pId: o.pId, - keyword: o.keyword, - open: o.open, - height: o.height, - hgap: o.hgap, - text: o.text, - value: o.value, - py: o.py - }); - this.node.on(BI.Controller.EVENT_CHANGE, function (type) { - self.setSelected(self.isSelected()); - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - }); - - var items = []; - - items.push({ - el: this.node, - lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2 - }); - BI.createWidget({ - type: "bi.horizontal_adapt", - element: this, - columnSize: BI.makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2), - items: items - }); - }, - - doRedMark: function () { - this.node.doRedMark.apply(this.node, arguments); - }, - - unRedMark: function () { - this.node.unRedMark.apply(this.node, arguments); - }, - - isSelected: function () { - return this.node.isSelected(); - }, - - setSelected: function (b) { - BI.MultiLayerSelectTreeMidPlusGroupNode.superclass.setSelected.apply(this, arguments); - this.node.setSelected(b); - }, - - doClick: function () { - BI.MultiLayerSelectTreeMidPlusGroupNode.superclass.doClick.apply(this, arguments); - this.node.setSelected(this.isSelected()); - }, - - setOpened: function (v) { - BI.MultiLayerSelectTreeMidPlusGroupNode.superclass.setOpened.apply(this, arguments); - this.node.setOpened(v); - } -}); - -BI.shortcut("bi.multilayer_select_tree_mid_plus_group_node", BI.MultiLayerSelectTreeMidPlusGroupNode); diff --git a/src/widget/multilayerselecttree/node/node.plus.js b/src/widget/multilayerselecttree/node/node.plus.js deleted file mode 100644 index d63d2d9d8..000000000 --- a/src/widget/multilayerselecttree/node/node.plus.js +++ /dev/null @@ -1,92 +0,0 @@ -/** - * 加号表示的组节点 - * - * Created by GUY on 2016/1/27. - * @class BI.MultiLayerSelectTreePlusGroupNode - * @extends BI.NodeButton - */ -BI.MultiLayerSelectTreePlusGroupNode = BI.inherit(BI.NodeButton, { - _defaultConfig: function () { - var conf = BI.MultiLayerSelectTreePlusGroupNode.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - extraCls: "bi-multilayer-select-tree-first-plus-group-node bi-list-item-active", - layer: 0, // 第几层级 - id: "", - pId: "", - readonly: true, - open: false, - height: 24 - }); - }, - _init: function () { - BI.MultiLayerSelectTreePlusGroupNode.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.node = BI.createWidget({ - type: "bi.select_tree_plus_group_node", - cls: "bi-list-item-none", - stopPropagation: true, - logic: { - dynamic: true - }, - id: o.id, - pId: o.pId, - keyword: o.keyword, - open: o.open, - height: o.height, - hgap: o.hgap, - text: o.text, - value: o.value, - py: o.py - }); - this.node.on(BI.Controller.EVENT_CHANGE, function (type) { - self.setSelected(self.isSelected()); - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - }); - - var items = []; - - items.push({ - el: this.node, - lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2 - }); - BI.createWidget({ - type: "bi.horizontal_adapt", - element: this, - columnSize: BI.makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2), - items: items - }); - }, - - isOnce: function () { - return true; - }, - - doRedMark: function () { - this.node.doRedMark.apply(this.node, arguments); - }, - - unRedMark: function () { - this.node.unRedMark.apply(this.node, arguments); - }, - - isSelected: function () { - return this.node.isSelected(); - }, - - setSelected: function (b) { - BI.MultiLayerSelectTreePlusGroupNode.superclass.setSelected.apply(this, arguments); - this.node.setSelected(b); - }, - - doClick: function () { - BI.NodeButton.superclass.doClick.apply(this, arguments); - this.node.setSelected(this.isSelected()); - }, - - setOpened: function (v) { - BI.MultiLayerSelectTreePlusGroupNode.superclass.setOpened.apply(this, arguments); - this.node.setOpened(v); - } -}); - -BI.shortcut("bi.multilayer_select_tree_plus_group_node", BI.MultiLayerSelectTreePlusGroupNode); diff --git a/src/widget/multilayersingletree/index.js b/src/widget/multilayersingletree/index.js new file mode 100644 index 000000000..d36fabf95 --- /dev/null +++ b/src/widget/multilayersingletree/index.js @@ -0,0 +1,2 @@ +export { MultiLayerSingleTreeCombo } from "./multilayersingletree.combo"; +export { MultiLayerSingleLevelTree } from "./multilayersingletree.leveltree"; diff --git a/src/widget/multilayersingletree/multilayersingletree.combo.js b/src/widget/multilayersingletree/multilayersingletree.combo.js index 4e26c1a0c..058939d7d 100644 --- a/src/widget/multilayersingletree/multilayersingletree.combo.js +++ b/src/widget/multilayersingletree/multilayersingletree.combo.js @@ -1,279 +1,353 @@ -/** - * 多层级下拉单选树 - * Created by GUY on 2016/1/26. - * - * @class BI.MultiLayerSingleTreeCombo - * @extends BI.Widget - */ -BI.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, { +import { + shortcut, + Widget, + extend, + emptyFn, + isKey, + toPix, + AbsoluteLayout, + nextTick, + isArray +} from "@/core"; +import { SingleTreeTrigger } from "../singletree/singletree.trigger"; +import { MultiLayerSingleTreePopup } from "./multilayersingletree.popup"; +import { Combo } from "@/base"; +import { MultiLayerSingleTreeTrigger } from "./multilayersingletree.trigger"; +import { TriggerIconButton } from "@/case"; - _defaultConfig: function () { - return BI.extend(BI.MultiLayerSingleTreeCombo.superclass._defaultConfig.apply(this, arguments), { +@shortcut() +export class MultiLayerSingleTreeCombo extends Widget { + static xtype = "bi.multilayer_single_tree_combo"; + + static EVENT_SEARCHING = "EVENT_SEARCHING"; + static EVENT_BLUR = "EVENT_BLUR"; + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_STOP = "EVENT_STOP"; + static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multilayer-single-tree-combo", isDefaultInit: false, height: 24, text: "", defaultText: "", - itemsCreator: BI.emptyFn, + itemsCreator: emptyFn, items: [], allowEdit: false, allowSearchValue: false, allowInsertValue: false, isNeedAdjustWidth: true, }); - }, + } - render: function () { - var self = this, o = this.options; + render() { + const self = this, + o = this.options; - var cls = (o.simple ? "bi-border-bottom bi-focus-shadow " : "bi-border bi-border-radius bi-focus-shadow ") + (BI.isKey(o.status) ? ("status-" + o.status) : ""); + const cls = + (o.simple + ? "bi-border-bottom bi-focus-shadow " + : "bi-border bi-border-radius bi-focus-shadow ") + + (isKey(o.status) ? `status-${o.status}` : ""); - var baseConfig = this._getBaseConfig(); + const baseConfig = this._getBaseConfig(); if (o.allowEdit) { return { - type: "bi.absolute", - width: BI.toPix(o.width, 2), - height: BI.toPix(o.height, 2), + type: AbsoluteLayout.xtype, + width: toPix(o.width, 2), + height: toPix(o.height, 2), cls, items: [ { - el: BI.extend(baseConfig, this._getSearchConfig()), - top: 0, bottom: 0, right: 0, left: 0 - }, { - el: self._getTriggerIconButton(), - top: 0, bottom: 0, right: 0, + el: extend(baseConfig, this._getSearchConfig()), + top: 0, + bottom: 0, + right: 0, + left: 0, }, - ] + { + el: self._getTriggerIconButton(), + top: 0, + bottom: 0, + right: 0, + } + ], }; } - return BI.extend(baseConfig, { - width: BI.toPix(o.width, 2), - height: BI.toPix(o.height, 2), - el: { - type: "bi.single_tree_trigger", - ref: function (_ref) { - self.textTrigger = _ref; + return extend( + baseConfig, + { + width: toPix(o.width, 2), + height: toPix(o.height, 2), + el: { + type: SingleTreeTrigger.xtype, + ref(_ref) { + self.textTrigger = _ref; + }, + text: o.text, + defaultText: o.defaultText, + height: toPix(o.height, 2), + items: o.items, + value: o.value, + tipType: o.tipType, + warningTitle: o.warningTitle, + valueFormatter: o.valueFormatter, }, - text: o.text, - defaultText: o.defaultText, - height: BI.toPix(o.height, 2), - items: o.items, - value: o.value, - tipType: o.tipType, - warningTitle: o.warningTitle, - valueFormatter: o.valueFormatter, }, - }, { cls }); - }, + { cls } + ); + } + + _getBaseConfig() { + const self = this, + o = this.options; - _getBaseConfig: function () { - var self = this, o = this.options; return { - type: "bi.combo", + type: Combo.xtype, container: o.container, destroyWhenHide: o.destroyWhenHide, adjustLength: 2, - ref: function (_ref) { + ref(_ref) { self.combo = _ref; }, popup: { el: { - type: "bi.multilayer_single_tree_popup", + type: MultiLayerSingleTreePopup.xtype, isDefaultInit: o.isDefaultInit, itemsCreator: o.itemsCreator, items: o.items, - ref: function (_ref) { - self.trigger && self.trigger.getSearcher().setAdapter(_ref); + ref(_ref) { + self.trigger && + self.trigger.getSearcher().setAdapter(_ref); }, - listeners: [{ - eventName: BI.MultiLayerSingleTreePopup.EVENT_CHANGE, - action: function () { - self.setValue(this.getValue()); - self.combo.hideView(); - self.fireEvent(BI.MultiLayerSingleTreeCombo.EVENT_CHANGE); + listeners: [ + { + eventName: MultiLayerSingleTreePopup.EVENT_CHANGE, + action() { + self.setValue(this.getValue()); + self.combo.hideView(); + self.fireEvent( + MultiLayerSingleTreeCombo.EVENT_CHANGE + ); + }, } - }], - onLoaded: function () { - BI.nextTick(function () { + ], + onLoaded() { + nextTick(() => { self.combo.adjustWidth(); self.combo.adjustHeight(); }); - } + }, }, value: o.value, maxHeight: 400, maxWidth: o.isNeedAdjustWidth ? "auto" : 500, - minHeight: 240 + minHeight: 240, }, isNeedAdjustWidth: o.isNeedAdjustWidth, - listeners: [{ - eventName: BI.Combo.EVENT_BEFORE_POPUPVIEW, - action: function () { - self.fireEvent(BI.MultiLayerSingleTreeCombo.EVENT_BEFORE_POPUPVIEW); + listeners: [ + { + eventName: Combo.EVENT_BEFORE_POPUPVIEW, + action() { + self.fireEvent( + MultiLayerSingleTreeCombo.EVENT_BEFORE_POPUPVIEW + ); + }, } - }] + ], }; - }, + } + + _getSearchConfig() { + const self = this, + o = this.options; - _getSearchConfig: function () { - var self = this, o = this.options; return { el: { - type: "bi.multilayer_single_tree_trigger", + type: MultiLayerSingleTreeTrigger.xtype, container: o.container, allowInsertValue: o.allowInsertValue, allowSearchValue: o.allowSearchValue, cls: "multilayer-single-tree-trigger", - ref: function (_ref) { + ref(_ref) { self.trigger = _ref; }, watermark: o.watermark, items: o.items, itemsCreator: o.itemsCreator, valueFormatter: o.valueFormatter, - height: BI.toPix(o.height, 2), + height: toPix(o.height, 2), text: o.text, defaultText: o.defaultText, value: o.value, tipType: o.tipType, warningTitle: o.warningTitle, title: o.title, - listeners: [{ - eventName: BI.MultiLayerSingleTreeTrigger.EVENT_CHANGE, - action: function () { - self.setValue(this.getValue()); - self.combo.hideView(); - self.fireEvent(BI.MultiLayerSingleTreeCombo.EVENT_CHANGE); - } - }, { - eventName: BI.MultiLayerSingleTreeTrigger.EVENT_FOCUS, - action: function () { - self.fireEvent(BI.MultiLayerSingleTreeCombo.EVENT_FOCUS); - } - }, { - eventName: BI.MultiLayerSingleTreeTrigger.EVENT_BLUR, - action: function () { - self.fireEvent(BI.MultiLayerSingleTreeCombo.EVENT_BLUR); - } - }, { - eventName: BI.MultiLayerSingleTreeTrigger.EVENT_SEARCHING, - action: function () { - self.fireEvent(BI.MultiLayerSingleTreeCombo.EVENT_SEARCHING); - } - }, { - eventName: BI.MultiLayerSingleTreeTrigger.EVENT_STOP, - action: function () { - self.fireEvent(BI.MultiLayerSingleTreeCombo.EVENT_STOP); - } - }, { - eventName: BI.MultiLayerSingleTreeTrigger.EVENT_ADD_ITEM, - action: function () { - var value = self.trigger.getSearcher().getKeyword(); - self.combo.setValue([value]); - self.combo.hideView(); - self.fireEvent(BI.MultiLayerSingleTreeCombo.EVENT_CHANGE); + listeners: [ + { + eventName: MultiLayerSingleTreeTrigger.EVENT_CHANGE, + action() { + self.setValue(this.getValue()); + self.combo.hideView(); + self.fireEvent( + MultiLayerSingleTreeCombo.EVENT_CHANGE + ); + }, + }, + { + eventName: MultiLayerSingleTreeTrigger.EVENT_FOCUS, + action() { + self.fireEvent( + MultiLayerSingleTreeCombo.EVENT_FOCUS + ); + }, + }, + { + eventName: MultiLayerSingleTreeTrigger.EVENT_BLUR, + action() { + self.fireEvent( + MultiLayerSingleTreeCombo.EVENT_BLUR + ); + }, + }, + { + eventName: MultiLayerSingleTreeTrigger.EVENT_SEARCHING, + action() { + self.fireEvent( + MultiLayerSingleTreeCombo.EVENT_SEARCHING + ); + }, + }, + { + eventName: MultiLayerSingleTreeTrigger.EVENT_STOP, + action() { + self.fireEvent( + MultiLayerSingleTreeCombo.EVENT_STOP + ); + }, + }, + { + eventName: MultiLayerSingleTreeTrigger.EVENT_ADD_ITEM, + action() { + const value = self.trigger.getSearcher().getKeyword(); + self.combo.setValue([value]); + self.combo.hideView(); + self.fireEvent( + MultiLayerSingleTreeCombo.EVENT_CHANGE + ); + }, } - }] + ], }, toggle: !o.allowEdit, - hideChecker: function (e) { + hideChecker(e) { // 新增传配置container后对应hideChecker的修改 // IE11下，popover(position: fixed)下放置下拉控件(position: fixed), 滚动的时候会异常卡顿 // 通过container参数将popup放置于popover之外解决此问题, 其他下拉控件由于元素少或者有分页，所以 // 卡顿不明显, 先在此做尝试, 并在FineUI特殊处理待解决文档中标记跟踪 - return (o.container && self.trigger.getSearcher().isSearching() && self.trigger.getSearcher().getView().element.find(e.target).length > 0) ? false : self.triggerBtn?.element.find(e.target).length === 0; + return o.container && + self.trigger.getSearcher().isSearching() && + self.trigger.getSearcher().getView().element.find(e.target) + .length > 0 + ? false + : self.triggerBtn?.element.find(e.target).length === 0; }, - listeners: [{ - eventName: BI.Combo.EVENT_AFTER_HIDEVIEW, - action: function () { - self.trigger.stopEditing(); - } - }, { - eventName: BI.Combo.EVENT_BEFORE_POPUPVIEW, - action: function () { - self.fireEvent(BI.MultiLayerSingleTreeCombo.EVENT_BEFORE_POPUPVIEW); + listeners: [ + { + eventName: Combo.EVENT_AFTER_HIDEVIEW, + action() { + self.trigger.stopEditing(); + }, + }, + { + eventName: Combo.EVENT_BEFORE_POPUPVIEW, + action() { + self.fireEvent( + MultiLayerSingleTreeCombo.EVENT_BEFORE_POPUPVIEW + ); + }, } - }] + ], }; - }, + } + + _getTriggerIconButton() { + const self = this, + o = this.options; - _getTriggerIconButton: function () { - var self = this, o = this.options; return { - type: "bi.trigger_icon_button", + type: TriggerIconButton.xtype, cls: "bi-trigger trigger-icon-button", - ref: function (_ref) { + ref(_ref) { self.triggerBtn = _ref; }, - width: BI.toPix(o.height, 2), - height: BI.toPix(o.height, 2), + width: toPix(o.height, 2), + height: toPix(o.height, 2), listeners: [ { - eventName: BI.TriggerIconButton.EVENT_CHANGE, - action: function () { + eventName: TriggerIconButton.EVENT_CHANGE, + action() { if (self.combo.isViewVisible()) { self.combo.hideView(); } else { self.combo.showView(); } - } + }, } - ] + ], }; - }, + } - getSearcher: function () { - return this.trigger ? this.trigger.getSearcher() : this.textTrigger.getTextor(); - }, + getSearcher() { + return this.trigger + ? this.trigger.getSearcher() + : this.textTrigger.getTextor(); + } - setValue: function (v) { - v = BI.isArray(v) ? v : [v]; + setValue(v) { + v = isArray(v) ? v : [v]; this.combo.setValue(v); - }, + } - getValue: function () { + getValue() { return this.combo.getValue(); - }, + } - setStatus: function (status) { - if (BI.isKey(this.options.status)) { - this.element.removeClass("status-" + this.options.status); + setStatus(status) { + if (isKey(this.options.status)) { + this.element.removeClass(`status-${this.options.status}`); } - this.element.addClass("status-" + status); + this.element.addClass(`status-${status}`); this.options.status = status; - }, + } - setTipType: function (v) { - this.trigger ? this.trigger.setTipType(v) : this.textTrigger.setTipType(v); - }, + setTipType(v) { + this.trigger + ? this.trigger.setTipType(v) + : this.textTrigger.setTipType(v); + } - populate: function (items) { + populate(items) { this.combo.populate(items); - }, + } - focus: function () { + focus() { this.trigger.focus(); - }, + } - blur: function () { + blur() { this.trigger.blur(); - }, + } - showView: function () { + showView() { this.combo.showView(); - }, + } - setWaterMark: function (v) { + setWaterMark(v) { this.trigger.setWaterMark(v); } -}); - -BI.MultiLayerSingleTreeCombo.EVENT_SEARCHING = "EVENT_SEARCHING"; -BI.MultiLayerSingleTreeCombo.EVENT_BLUR = "EVENT_BLUR"; -BI.MultiLayerSingleTreeCombo.EVENT_FOCUS = "EVENT_FOCUS"; -BI.MultiLayerSingleTreeCombo.EVENT_CHANGE = "EVENT_CHANGE"; -BI.MultiLayerSingleTreeCombo.EVENT_STOP = "EVENT_STOP"; -BI.MultiLayerSingleTreeCombo.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; -BI.shortcut("bi.multilayer_single_tree_combo", BI.MultiLayerSingleTreeCombo); +} diff --git a/src/widget/multilayersingletree/multilayersingletree.insert.search.pane.js b/src/widget/multilayersingletree/multilayersingletree.insert.search.pane.js index 8e7fa06de..eb7a6d2a3 100644 --- a/src/widget/multilayersingletree/multilayersingletree.insert.search.pane.js +++ b/src/widget/multilayersingletree/multilayersingletree.insert.search.pane.js @@ -1,92 +1,119 @@ -/** - * Created by GUY on 2016/1/26. - * - * @class BI.MultiLayerSingleTreeInsertSearchPane - * @extends BI.Pane - */ +import { + shortcut, + Widget, + i18nText, + emptyFn, + createWidget, + Controller, + VerticalLayout, + isEmptyArray, + isArray +} from "@/core"; +import { TextButton } from "@/base"; +import { MultiLayerSingleLevelTree } from "./multilayersingletree.leveltree"; -BI.MultiLayerSingleTreeInsertSearchPane = BI.inherit(BI.Widget, { +@shortcut() +export class MultiLayerSingleTreeInsertSearchPane extends Widget { + static xtype = "bi.multilayer_single_tree_insert_search_pane"; - props: function() { + static EVENT_ADD_ITEM = "EVENT_ADD_ITEM"; + static EVENT_CHANGE = "EVENT_CHANGE"; + + props() { return { baseCls: "bi-multilayer-single-tree-popup", - tipText: BI.i18nText("BI-No_Selected_Item"), + tipText: i18nText("BI-No_Selected_Item"), isDefaultInit: false, - itemsCreator: BI.emptyFn, + itemsCreator: emptyFn, items: [], - value: "" + value: "", }; - }, + } - render: function() { - var self = this, o = this.options; - this.tree = BI.createWidget({ - type: "bi.multilayer_single_level_tree", + render() { + const self = this, + o = this.options; + this.tree = createWidget({ + type: MultiLayerSingleLevelTree.xtype, isDefaultInit: o.isDefaultInit, items: o.items, - itemsCreator: o.itemsCreator === BI.emptyFn ? BI.emptyFn : function (op, callback) { - o.itemsCreator(op, function (res) { - callback(res); - self.setKeyword(o.keywordGetter()); - }); - }, + itemsCreator: + o.itemsCreator === emptyFn + ? emptyFn + : function (op, callback) { + o.itemsCreator(op, res => { + callback(res); + self.setKeyword(o.keywordGetter()); + }); + }, keywordGetter: o.keywordGetter, value: o.value, scrollable: null, - listeners: [{ - eventName: BI.Controller.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - } - }, { - eventName: BI.MultiLayerSelectLevelTree.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.MultiLayerSingleTreeInsertSearchPane.EVENT_CHANGE); + listeners: [ + { + eventName: Controller.EVENT_CHANGE, + action() { + self.fireEvent(Controller.EVENT_CHANGE, arguments); + }, + }, + { + eventName: MultiLayerSingleLevelTree.EVENT_CHANGE, + action() { + self.fireEvent( + MultiLayerSingleTreeInsertSearchPane.EVENT_CHANGE + ); + }, } - }] + ], }); + return { - type: "bi.vertical", + type: VerticalLayout.xtype, scrolly: false, scrollable: true, vgap: 5, - items: [{ - type: "bi.text_button", - invisible: true, - text: BI.i18nText("BI-Basic_Click_To_Add_Text", ""), - height: 24, - cls: "bi-high-light", - hgap: 5, - ref: function (_ref) { - self.addNotMatchTip = _ref; + items: [ + { + type: TextButton.xtype, + invisible: true, + text: i18nText("BI-Basic_Click_To_Add_Text", ""), + height: 24, + cls: "bi-high-light", + hgap: 5, + ref(_ref) { + self.addNotMatchTip = _ref; + }, + handler() { + self.fireEvent( + MultiLayerSingleTreeInsertSearchPane.EVENT_ADD_ITEM, + o.keywordGetter() + ); + }, }, - handler: function () { - self.fireEvent(BI.MultiLayerSingleTreeInsertSearchPane.EVENT_ADD_ITEM, o.keywordGetter()); - } - }, this.tree] + this.tree + ], }; - }, + } - setKeyword: function (keyword) { - var showTip = BI.isEmptyArray(this.tree.getAllLeaves()); + setKeyword(keyword) { + const showTip = isEmptyArray(this.tree.getAllLeaves()); this.addNotMatchTip.setVisible(showTip); - showTip && this.addNotMatchTip.setText(BI.i18nText("BI-Basic_Click_To_Add_Text", keyword)); - }, + showTip && + this.addNotMatchTip.setText( + i18nText("BI-Basic_Click_To_Add_Text", keyword) + ); + } - getValue: function () { + getValue() { return this.tree.getValue(); - }, + } - setValue: function (v) { - v = BI.isArray(v) ? v : [v]; + setValue(v) { + v = isArray(v) ? v : [v]; this.tree.setValue(v); - }, + } - populate: function (items) { + populate(items) { this.tree.populate(items); } -}); - -BI.MultiLayerSingleTreeInsertSearchPane.EVENT_ADD_ITEM = "EVENT_ADD_ITEM"; -BI.MultiLayerSingleTreeInsertSearchPane.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.multilayer_single_tree_insert_search_pane", BI.MultiLayerSingleTreeInsertSearchPane); \ No newline at end of file +} diff --git a/src/widget/multilayersingletree/multilayersingletree.leveltree.js b/src/widget/multilayersingletree/multilayersingletree.leveltree.js index 8e14aa749..06213988c 100644 --- a/src/widget/multilayersingletree/multilayersingletree.leveltree.js +++ b/src/widget/multilayersingletree/multilayersingletree.leveltree.js @@ -1,170 +1,216 @@ -/** - * guy - * 二级树 - * @class BI.MultiLayerSingleLevelTree - * @extends BI.Single - */ -BI.MultiLayerSingleLevelTree = BI.inherit(BI.Pane, { - _defaultConfig: function () { - return BI.extend(BI.MultiLayerSingleLevelTree.superclass._defaultConfig.apply(this, arguments), { +import { + shortcut, + extend, + emptyFn, + Selection, + each, + isKey, + UUID, + isNotEmptyArray, + defaults, + createWidget, + Tree, + nextTick, + Controller, + Events, + VerticalLayout, + AdaptiveLayout, + isNull, + isArray +} from "@/core"; +import { Pane, CustomTree, Loader, ButtonTree } from "@/base"; +import { BasicTreeNode, BasicTreeItem, TreeExpander } from "@/case"; + +@shortcut() +export class MultiLayerSingleLevelTree extends Pane { + static xtype = "bi.multilayer_single_level_tree"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multilayer-single-level-tree", isDefaultInit: false, items: [], - itemsCreator: BI.emptyFn, - keywordGetter: BI.emptyFn, - chooseType: BI.Selection.Single, - scrollable: true + itemsCreator: emptyFn, + keywordGetter: emptyFn, + chooseType: Selection.Single, + scrollable: true, }); - }, + } - _init: function () { - var o = this.options; - BI.MultiLayerSingleLevelTree.superclass._init.apply(this, arguments); + _init() { + const o = this.options; + super._init(...arguments); this.storeValue = o.value; this.initTree(this.options.items); this.check(); - }, + } - _formatItems: function (nodes, layer, pNode) { - var self = this, o = this.options; - var keyword = o.keywordGetter(); - BI.each(nodes, function (i, node) { - var extend = { + _formatItems(nodes, layer, pNode) { + const self = this, + o = this.options; + const keyword = o.keywordGetter(); + each(nodes, (i, node) => { + const extend = { isFirstNode: i === 0, isLastNode: i === nodes.length - 1, - height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, }; node.layer = layer; - if (!BI.isKey(node.id)) { - node.id = BI.UUID(); + if (!isKey(node.id)) { + node.id = UUID(); } node.keyword = node.keyword || keyword; extend.pNode = pNode; - if (node.isParent === true || node.parent === true || BI.isNotEmptyArray(node.children)) { - extend.type = "bi.tree_node"; + if ( + node.isParent === true || + node.parent === true || + isNotEmptyArray(node.children) + ) { + extend.type = BasicTreeNode.xtype; extend.selectable = false; - 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; - }, + } - _assertId: function (sNodes) { - BI.each(sNodes, function (i, node) { - node.id = node.id || BI.UUID(); + _assertId(sNodes) { + each(sNodes, (i, node) => { + node.id = node.id || UUID(); }); - }, + } - // 构造树结构， - initTree: function (nodes) { - var self = this, o = this.options; - var hasNext = false; + initTree(nodes) { + const self = this, + o = this.options; + let hasNext = false; this.empty(); this._assertId(nodes); - this.tree = BI.createWidget({ - type: "bi.custom_tree", + this.tree = createWidget({ + type: CustomTree.xtype, cls: "tree-view display-table", expander: { - type: "bi.tree_expander", + type: TreeExpander.xtype, isDefaultInit: o.isDefaultInit, el: {}, popup: { - type: "bi.custom_tree" - } + type: CustomTree.xtype, + }, }, - items: this._formatItems(BI.Tree.transformToTreeFormat(nodes), 0), + items: this._formatItems(Tree.transformToTreeFormat(nodes), 0), value: o.value, - itemsCreator: function (op, callback) { - (op.times === 1 && !op.node) && BI.nextTick(function () { + itemsCreator(op, callback) { + op.times === 1 && + !op.node && + nextTick(() => { self.loading(); }); - o.itemsCreator(op, function (ob) { + o.itemsCreator(op, ob => { hasNext = ob.hasNext; - (op.times === 1 && !op.node) && self._populate(ob.items); - callback(self._formatItems(BI.Tree.transformToTreeFormat(ob.items), op.node ? op.node.layer + 1 : 0, op.node)); + op.times === 1 && !op.node && self._populate(ob.items); + callback( + self._formatItems( + Tree.transformToTreeFormat(ob.items), + op.node ? op.node.layer + 1 : 0, + op.node + ) + ); self.setValue(self.storeValue); - (op.times === 1 && !op.node) && BI.nextTick(function () { + op.times === 1 && + !op.node && + nextTick(() => { self.loaded(); }); }); }, el: { - type: "bi.loader", - isDefaultInit: o.itemsCreator !== BI.emptyFn, + type: Loader.xtype, + isDefaultInit: o.itemsCreator !== emptyFn, el: { - type: "bi.button_tree", - chooseType: o.chooseType === BI.Selection.None ? BI.Selection.None : BI.Selection.Default, // 不使用buttontree内部getValue逻辑 + type: ButtonTree.xtype, + chooseType: + o.chooseType === Selection.None + ? Selection.None + : Selection.Default, // 不使用buttontree内部getValue逻辑 behaviors: o.behaviors, - layouts: [{ - type: "bi.vertical" - }] + layouts: [ + { + type: VerticalLayout.xtype, + } + ], }, - hasNext: function () { + hasNext() { return hasNext; - } - } + }, + }, }); - this.tree.on(BI.Controller.EVENT_CHANGE, function (type, v) { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - if (type === BI.Events.CLICK) { + this.tree.on(Controller.EVENT_CHANGE, function (type, v) { + self.fireEvent(Controller.EVENT_CHANGE, arguments); + if (type === Events.CLICK) { self.setValue(v); - self.fireEvent(BI.MultiLayerSingleLevelTree.EVENT_CHANGE, v); + self.fireEvent(MultiLayerSingleLevelTree.EVENT_CHANGE, v); } }); - BI.createWidget({ - type: "bi.adaptive", + createWidget({ + type: AdaptiveLayout.xtype, element: this, scrollable: o.scrollable, - items: [this.tree] + items: [this.tree], }); - }, + } - _populate: function () { - BI.MultiLayerSelectLevelTree.superclass.populate.apply(this, arguments); - }, + _populate() { + super.populate(...arguments); + } - populate: function (nodes) { + populate(nodes) { this._populate(nodes); - BI.isNull(nodes) ? this.tree.populate() : this.tree.populate(this._formatItems(BI.Tree.transformToTreeFormat(nodes), 0)); - }, + isNull(nodes) + ? this.tree.populate() + : this.tree.populate( + this._formatItems(Tree.transformToTreeFormat(nodes), 0) + ); + } - setValue: function (v) { + setValue(v) { // getValue依赖于storeValue, 那么不选的时候就不要更新storeValue了 - if (this.options.chooseType === BI.Selection.None) { + if (this.options.chooseType === Selection.None) { } else { this.storeValue = v; this.tree.setValue(v); } - }, + } - getValue: function () { - return BI.isArray(this.storeValue) ? - this.storeValue : BI.isNull(this.storeValue) ? - [] : [this.storeValue]; - }, + getValue() { + return isArray(this.storeValue) + ? this.storeValue + : isNull(this.storeValue) + ? [] + : [this.storeValue]; + } - getAllLeaves: function () { + getAllLeaves() { return this.tree.getAllLeaves(); - }, + } - getNodeById: function (id) { + getNodeById(id) { return this.tree.getNodeById(id); - }, + } - getNodeByValue: function (id) { + getNodeByValue(id) { return this.tree.getNodeByValue(id); } -}); -BI.MultiLayerSingleLevelTree.EVENT_CHANGE = "EVENT_CHANGE"; - -BI.shortcut("bi.multilayer_single_level_tree", BI.MultiLayerSingleLevelTree); +} diff --git a/src/widget/multilayersingletree/multilayersingletree.popup.js b/src/widget/multilayersingletree/multilayersingletree.popup.js index 630c38237..7e61cb184 100644 --- a/src/widget/multilayersingletree/multilayersingletree.popup.js +++ b/src/widget/multilayersingletree/multilayersingletree.popup.js @@ -1,76 +1,84 @@ -/** - * Created by GUY on 2016/1/26. - * - * @class BI.MultiLayerSingleTreePopup - * @extends BI.Pane - */ +import { + shortcut, + Widget, + extend, + i18nText, + emptyFn, + createWidget, + Controller, + VerticalLayout, + isArray +} from "@/core"; +import { MultiLayerSingleLevelTree } from "./multilayersingletree.leveltree"; -BI.MultiLayerSingleTreePopup = BI.inherit(BI.Widget, { +@shortcut() +export class MultiLayerSingleTreePopup extends Widget { + static xtype = "bi.multilayer_single_tree_popup"; - _defaultConfig: function () { - return BI.extend(BI.MultiLayerSingleTreePopup.superclass._defaultConfig.apply(this, arguments), { + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multilayer-singletree-popup", - tipText: BI.i18nText("BI-No_Selected_Item"), + tipText: i18nText("BI-No_Selected_Item"), isDefaultInit: false, - itemsCreator: BI.emptyFn, + itemsCreator: emptyFn, items: [], - onLoaded: BI.emptyFn, - minHeight: 240 + onLoaded: emptyFn, + minHeight: 240, }); - }, + } - _init: function () { - BI.MultiLayerSingleTreePopup.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.multilayer_single_level_tree", + this.tree = createWidget({ + type: MultiLayerSingleLevelTree.xtype, isDefaultInit: o.isDefaultInit, items: o.items, itemsCreator: o.itemsCreator, keywordGetter: o.keywordGetter, value: o.value, scrollable: null, - onLoaded: function () { + onLoaded() { self.tree.check(); o.onLoaded(); - } + }, }); - BI.createWidget({ - type: "bi.vertical", + createWidget({ + type: VerticalLayout.xtype, scrolly: false, scrollable: true, 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.MultiLayerSingleLevelTree.EVENT_CHANGE, function () { - self.fireEvent(BI.MultiLayerSingleTreePopup.EVENT_CHANGE); + this.tree.on(MultiLayerSingleLevelTree.EVENT_CHANGE, () => { + self.fireEvent(MultiLayerSingleTreePopup.EVENT_CHANGE); }); this.tree.css("min-height", BI.pixFormat(o.minHeight - 10)); - }, + } - 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) { + populate(items) { this.tree.populate(items); } -}); - -BI.MultiLayerSingleTreePopup.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.multilayer_single_tree_popup", BI.MultiLayerSingleTreePopup); \ No newline at end of file +} diff --git a/src/widget/multilayersingletree/multilayersingletree.trigger.js b/src/widget/multilayersingletree/multilayersingletree.trigger.js index 617c70d7b..0deeae1d5 100644 --- a/src/widget/multilayersingletree/multilayersingletree.trigger.js +++ b/src/widget/multilayersingletree/multilayersingletree.trigger.js @@ -1,237 +1,302 @@ -/** - * Created by Windy on 2018/2/2. - */ -BI.MultiLayerSingleTreeTrigger = BI.inherit(BI.Trigger, { +import { + shortcut, + emptyFn, + i18nText, + isNotNull, + isKey, + HorizontalFillLayout, + Tree, + deepClone, + Func, + concat, + isNotEmptyArray, + each, + uniqBy, + map, + isFunction, + find +} from "@/core"; +import { Trigger, Searcher } from "@/base"; +import { StateEditor, DefaultTextEditor } from "@/case"; +import { MultiLayerSingleTreeInsertSearchPane } from "./multilayersingletree.insert.search.pane"; +import { MultiLayerSingleTreePopup } from "./multilayersingletree.popup"; - props: function () { +@shortcut() +export class MultiLayerSingleTreeTrigger extends Trigger { + static xtype = "bi.multilayer_single_tree_trigger"; + + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_BLUR = "EVENT_BLUR"; + static EVENT_SEARCHING = "EVENT_SEARCHING"; + static EVENT_STOP = "EVENT_STOP"; + static EVENT_START = "EVENT_START"; + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_ADD_ITEM = "EVENT_ADD_ITEM"; + + props() { return { extraCls: "bi-multi-layer-single-tree-trigger", height: 24, - itemsCreator: BI.emptyFn, - watermark: BI.i18nText("BI-Basic_Search"), + itemsCreator: emptyFn, + watermark: i18nText("BI-Basic_Search"), allowSearchValue: false, - title: BI.bind(this._getShowText, this) + title: () => this._getShowText(), }; - }, + } - render: function () { - var self = this, o = this.options; + render() { + const self = this, + o = this.options; if (o.itemsCreator === BI.emptyFn) { this._initData(); } return { - type: "bi.horizontal_fill", + type: HorizontalFillLayout.xtype, items: [ { el: { - type: "bi.searcher", - ref: function () { + type: Searcher.xtype, + ref() { self.searcher = this; }, - masker: BI.isNotNull(o.container) ? { - offset: {}, - container: o.container - } : { - offset: {} - }, + masker: isNotNull(o.container) + ? { + offset: {}, + container: o.container, + } + : { + offset: {}, + }, isAutoSearch: false, el: { - type: "bi.default_text_editor", - ref: function () { + type: DefaultTextEditor.xtype, + ref() { self.editor = this; }, defaultText: o.defaultText, - text: BI.isKey(o.value) ? this._digest(o.value) : o.text, + text: isKey(o.value) + ? this._digest(o.value) + : o.text, value: o.value, height: o.height, tipText: "", watermark: o.watermark, - listeners: [{ - eventName: BI.StateEditor.EVENT_FOCUS, - action: function () { - self.fireEvent(BI.MultiLayerSingleTreeTrigger.EVENT_FOCUS); - } - }, { - eventName: BI.StateEditor.EVENT_BLUR, - action: function () { - self.fireEvent(BI.MultiLayerSingleTreeTrigger.EVENT_BLUR); - } - }, { - eventName: BI.StateEditor.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.MultiLayerSingleTreeTrigger.EVENT_SEARCHING); + listeners: [ + { + eventName: StateEditor.EVENT_FOCUS, + action() { + self.fireEvent( + MultiLayerSingleTreeTrigger.EVENT_FOCUS + ); + }, + }, + { + eventName: StateEditor.EVENT_BLUR, + action() { + self.fireEvent( + MultiLayerSingleTreeTrigger.EVENT_BLUR + ); + }, + }, + { + eventName: StateEditor.EVENT_CHANGE, + action() { + self.fireEvent( + MultiLayerSingleTreeTrigger.EVENT_SEARCHING + ); + }, } - }] + ], }, popup: { - type: o.allowInsertValue ? "bi.multilayer_single_tree_insert_search_pane" : "bi.multilayer_single_tree_popup", - itemsCreator: o.itemsCreator === BI.emptyFn ? BI.emptyFn : function (op, callback) { - op.keyword = self.editor.getValue(); - o.itemsCreator(op, callback); - }, - keywordGetter: function () { + type: o.allowInsertValue + ? MultiLayerSingleTreeInsertSearchPane.xtype + : MultiLayerSingleTreePopup.xtype, + itemsCreator: + o.itemsCreator === emptyFn + ? emptyFn + : function (op, callback) { + op.keyword = self.editor.getValue(); + o.itemsCreator(op, callback); + }, + keywordGetter() { return self.editor.getValue(); }, cls: "bi-card", - listeners: [{ - eventName: BI.MultiLayerSingleTreeInsertSearchPane.EVENT_ADD_ITEM, - action: function () { - self.options.text = self.getSearcher().getKeyword(); - self.fireEvent(BI.MultiLayerSingleTreeTrigger.EVENT_ADD_ITEM); + listeners: [ + { + eventName: + MultiLayerSingleTreeInsertSearchPane.EVENT_ADD_ITEM, + action() { + self.options.text = self + .getSearcher() + .getKeyword(); + self.fireEvent( + MultiLayerSingleTreeTrigger.EVENT_ADD_ITEM + ); + }, } - }], - ref: function (_ref) { + ], + ref(_ref) { self.popup = _ref; - } + }, }, - onSearch: function (obj, callback) { - var keyword = obj.keyword; + onSearch(obj, callback) { + const keyword = obj.keyword; if (o.itemsCreator === BI.emptyFn) { callback(self._getSearchItems(keyword)); - o.allowInsertValue && self.popup.setKeyword(keyword); + o.allowInsertValue && + self.popup.setKeyword(keyword); } else { callback(); } }, - listeners: [{ - eventName: BI.Searcher.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.MultiLayerSingleTreeTrigger.EVENT_CHANGE); + listeners: [ + { + eventName: Searcher.EVENT_CHANGE, + action() { + self.fireEvent( + MultiLayerSingleTreeTrigger.EVENT_CHANGE + ); + }, } - }] + ], }, width: "fill", rgap: 24, - }, - ] + } + ], }; - }, + } - _initData: function () { - var o = this.options; - this.tree = new BI.Tree(); - this.nodes = BI.Tree.treeFormat(BI.deepClone(o.items)); + _initData() { + const o = this.options; + this.tree = new Tree(); + this.nodes = Tree.treeFormat(deepClone(o.items)); this.tree.initTree(this.nodes); - }, + } - _getSearchItems: function (keyword) { - var self = this, o = this.options; + _getSearchItems(keyword) { + const self = this, + o = this.options; // 把数组搜索换成用BI.tree搜索节点, 搜到了就不再往下搜索 - var items = []; - this.tree.traverse(function (node) { - var find = BI.Func.getSearchResult(self.tree.isRoot(node) ? [] : BI.concat([node.text], (o.allowSearchValue ? [node.value] : [])), keyword); + const items = []; + this.tree.traverse(node => { + const find = Func.getSearchResult( + self.tree.isRoot(node) + ? [] + : concat( + [node.text], + o.allowSearchValue ? [node.value] : [] + ), + keyword + ); if (find.find.length > 0 || find.match.length > 0) { items.push(node); + return true; } }); + return this._fillTreeStructure4Search(items, "id"); - }, + } - _createJson: function (node, open) { + _createJson(node, open) { return { id: node.id, pId: node.pId, text: node.text, value: node.value, - isParent: BI.isNotEmptyArray(node.children), - open: open + isParent: isNotEmptyArray(node.children), + open, }; - }, + } - _getChildren: function (node) { - var self = this; + _getChildren(node) { + const self = this; node.children = node.children || []; - var nodes = []; - BI.each(node.children, function (idx, child) { - var children = self._getChildren(child); + let nodes = []; + each(node.children, (idx, child) => { + const children = self._getChildren(child); nodes = nodes.concat(children); }); + return node.children.concat(nodes); - }, - - // 将搜索到的节点进行补充，构造成一棵完整的树 - _fillTreeStructure4Search: function (leaves) { - var self = this; - var result = []; - var queue = []; - BI.each(leaves, function (idx, node) { + } + + _fillTreeStructure4Search(leaves) { + const self = this; + let result = []; + const queue = []; + each(leaves, (idx, node) => { queue.push({ pId: node.pId }); result.push(node); result = result.concat(self._getChildren(node)); }); queue.reverse(); - while (BI.isNotEmptyArray(queue)) { - var node = queue.pop(); - var pNode = this.tree.search(this.tree.getRoot(), node.pId, "id"); + while (isNotEmptyArray(queue)) { + const node = queue.pop(); + const pNode = this.tree.search(this.tree.getRoot(), node.pId, "id"); if (pNode != null) { pNode.open = true; queue.push({ pId: pNode.pId }); result.push(pNode); } } - return BI.uniqBy(BI.map(result, function (idx, node) { - return self._createJson(node, node.open); - }), "id"); - }, - _digest: function (v) { - var o = this.options; + return uniqBy( + map(result, (idx, node) => self._createJson(node, node.open)), + "id" + ); + } + + _digest(v) { + const o = this.options; - if (BI.isFunction(o.valueFormatter)) { + if (isFunction(o.valueFormatter)) { return o.valueFormatter(v); } - var result = BI.find(o.items, function (i, item) { - return item.value === v; - }); + const result = find(o.items, (i, item) => item.value === v); - return BI.isNotNull(result) ? result.text : (o.text ?? v); - }, + return isNotNull(result) ? result.text : o.text ?? v; + } - _getShowText: function () { + _getShowText() { return this.editor.getText(); - }, + } - stopEditing: function () { + stopEditing() { this.searcher.stopSearch(); - }, + } - getSearcher: function () { + getSearcher() { return this.searcher; - }, + } - populate: function (items) { + populate(items) { this.options.items = items; this._initData(); - }, + } - setValue: function (v) { + setValue(v) { this.editor.setState(this._digest(v[0])); - }, + } - 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.MultiLayerSingleTreeTrigger.EVENT_FOCUS = "EVENT_FOCUS"; -BI.MultiLayerSingleTreeTrigger.EVENT_BLUR = "EVENT_BLUR"; -BI.MultiLayerSingleTreeTrigger.EVENT_SEARCHING = "EVENT_SEARCHING"; -BI.MultiLayerSingleTreeTrigger.EVENT_STOP = "EVENT_STOP"; -BI.MultiLayerSingleTreeTrigger.EVENT_START = "EVENT_START"; -BI.MultiLayerSingleTreeTrigger.EVENT_CHANGE = "EVENT_CHANGE"; -BI.MultiLayerSingleTreeTrigger.EVENT_ADD_ITEM = "EVENT_ADD_ITEM"; -BI.shortcut("bi.multilayer_single_tree_trigger", BI.MultiLayerSingleTreeTrigger); +} diff --git a/src/widget/multilayersingletree/node/node.first.plus.js b/src/widget/multilayersingletree/node/node.first.plus.js deleted file mode 100644 index 51177bcce..000000000 --- a/src/widget/multilayersingletree/node/node.first.plus.js +++ /dev/null @@ -1,91 +0,0 @@ -/** - * 加号表示的组节点 - * - * Created by GUY on 2016/1/27. - * @class BI.MultiLayerSingleTreeFirstPlusGroupNode - * @extends BI.NodeButton - */ -BI.MultiLayerSingleTreeFirstPlusGroupNode = BI.inherit(BI.NodeButton, { - _defaultConfig: function () { - var conf = BI.MultiLayerSingleTreeFirstPlusGroupNode.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - extraCls: "bi-multilayer-single-tree-first-plus-group-node bi-list-item", - layer: 0, // 第几层级 - id: "", - pId: "", - open: false, - height: 24 - }); - }, - _init: function () { - BI.MultiLayerSingleTreeFirstPlusGroupNode.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.node = this._createNode(); - - var items = []; - - items.push({ - el: this.node, - lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2 - }); - BI.createWidget({ - type: "bi.horizontal_adapt", - element: this, - columnSize: BI.makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2), - items: items - }); - }, - - doRedMark: function () { - this.node.doRedMark.apply(this.node, arguments); - }, - - unRedMark: function () { - this.node.unRedMark.apply(this.node, arguments); - }, - - doClick: function () { - BI.MultiLayerSingleTreeFirstPlusGroupNode.superclass.doClick.apply(this, arguments); - this.node.setSelected(this.isSelected()); - }, - - setOpened: function (v) { - BI.MultiLayerSingleTreeFirstPlusGroupNode.superclass.setOpened.apply(this, arguments); - if (BI.isNotNull(this.node)) { - this.node.setOpened(v); - } - }, - - _createNode: function () { - var self = this, o = this.options; - - return BI.createWidget({ - type: "bi.first_plus_group_node", - cls: "bi-list-item-none", - logic: { - dynamic: true - }, - id: o.id, - pId: o.pId, - open: o.open, - isLastNode: o.isLastNode, - height: o.height, - hgap: o.hgap, - text: o.text, - value: o.value, - py: o.py, - keyword: o.keyword, - listeners: [{ - eventName: BI.Controller.EVENT_CHANGE, - action: function (type) { - if (type === BI.Events.CLICK) {// 本身实现click功能 - return; - } - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - } - }] - }); - } -}); - -BI.shortcut("bi.multilayer_single_tree_first_plus_group_node", BI.MultiLayerSingleTreeFirstPlusGroupNode); diff --git a/src/widget/multilayersingletree/node/node.last.plus.js b/src/widget/multilayersingletree/node/node.last.plus.js deleted file mode 100644 index 007837f5c..000000000 --- a/src/widget/multilayersingletree/node/node.last.plus.js +++ /dev/null @@ -1,90 +0,0 @@ -/** - * 加号表示的组节点 - * - * Created by GUY on 2016/1/27. - * @class BI.MultiLayerSingleTreeLastPlusGroupNode - * @extends BI.NodeButton - */ -BI.MultiLayerSingleTreeLastPlusGroupNode = BI.inherit(BI.NodeButton, { - _defaultConfig: function () { - var conf = BI.MultiLayerSingleTreeLastPlusGroupNode.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - extraCls: "bi-multilayer-single-tree-last-plus-group-node bi-list-item", - layer: 0, // 第几层级 - id: "", - pId: "", - open: false, - height: 24 - }); - }, - _init: function () { - BI.MultiLayerSingleTreeLastPlusGroupNode.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.node = this._createNode(); - - var items = []; - - items.push({ - el: this.node, - lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2 - }); - BI.createWidget({ - type: "bi.horizontal_adapt", - element: this, - columnSize: BI.makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2), - items: items - }); - }, - - doRedMark: function () { - this.node.doRedMark.apply(this.node, arguments); - }, - - unRedMark: function () { - this.node.unRedMark.apply(this.node, arguments); - }, - - doClick: function () { - BI.MultiLayerSingleTreeLastPlusGroupNode.superclass.doClick.apply(this, arguments); - this.node.setSelected(this.isSelected()); - }, - - setOpened: function (v) { - BI.MultiLayerSingleTreeLastPlusGroupNode.superclass.setOpened.apply(this, arguments); - if (BI.isNotNull(this.node)) { - this.node.setOpened(v); - } - }, - - _createNode: function () { - var self = this, o = this.options; - - return BI.createWidget({ - type: "bi.last_plus_group_node", - cls: "bi-list-item-none", - logic: { - dynamic: true - }, - id: o.id, - pId: o.pId, - open: o.open, - height: o.height, - hgap: o.hgap, - text: o.text, - value: o.value, - py: o.py, - keyword: o.keyword, - listeners: [{ - eventName: BI.Controller.EVENT_CHANGE, - action: function (type) { - if (type === BI.Events.CLICK) {// 本身实现click功能 - return; - } - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - } - }] - }); - } -}); - -BI.shortcut("bi.multilayer_single_tree_last_plus_group_node", BI.MultiLayerSingleTreeLastPlusGroupNode); diff --git a/src/widget/multilayersingletree/node/node.mid.plus.js b/src/widget/multilayersingletree/node/node.mid.plus.js deleted file mode 100644 index e8709cf78..000000000 --- a/src/widget/multilayersingletree/node/node.mid.plus.js +++ /dev/null @@ -1,90 +0,0 @@ -/** - * 加号表示的组节点 - * - * Created by GUY on 2016/1/27. - * @class BI.MultiLayerSingleTreeMidPlusGroupNode - * @extends BI.NodeButton - */ -BI.MultiLayerSingleTreeMidPlusGroupNode = BI.inherit(BI.NodeButton, { - _defaultConfig: function () { - var conf = BI.MultiLayerSingleTreeMidPlusGroupNode.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - extraCls: "bi-multilayer-single-tree-mid-plus-group-node bi-list-item", - layer: 0, // 第几层级 - id: "", - pId: "", - open: false, - height: 24 - }); - }, - _init: function () { - BI.MultiLayerSingleTreeMidPlusGroupNode.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.node = this._createNode(); - - var items = []; - - items.push({ - el: this.node, - lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2 - }); - BI.createWidget({ - type: "bi.horizontal_adapt", - element: this, - columnSize: BI.makeArray(o.layer, 12), - items: items - }); - }, - - doRedMark: function () { - this.node.doRedMark.apply(this.node, arguments); - }, - - unRedMark: function () { - this.node.unRedMark.apply(this.node, arguments); - }, - - doClick: function () { - BI.MultiLayerSingleTreeMidPlusGroupNode.superclass.doClick.apply(this, arguments); - this.node.setSelected(this.isSelected()); - }, - - setOpened: function (v) { - BI.MultiLayerSingleTreeMidPlusGroupNode.superclass.setOpened.apply(this, arguments); - if (BI.isNotNull(this.node)) { - this.node.setOpened(v); - } - }, - - _createNode: function () { - var self = this, o = this.options; - - return BI.createWidget({ - type: "bi.mid_plus_group_node", - cls: "bi-list-item-none", - logic: { - dynamic: true - }, - id: o.id, - pId: o.pId, - open: o.open, - height: o.height, - hgap: o.hgap, - text: o.text, - value: o.value, - py: o.py, - keyword: o.keyword, - listeners: [{ - eventName: BI.Controller.EVENT_CHANGE, - action: function (type) { - if (type === BI.Events.CLICK) {// 本身实现click功能 - return; - } - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - } - }] - }); - } -}); - -BI.shortcut("bi.multilayer_single_tree_mid_plus_group_node", BI.MultiLayerSingleTreeMidPlusGroupNode); diff --git a/src/widget/multilayersingletree/node/node.plus.js b/src/widget/multilayersingletree/node/node.plus.js deleted file mode 100644 index bcff49737..000000000 --- a/src/widget/multilayersingletree/node/node.plus.js +++ /dev/null @@ -1,102 +0,0 @@ -/** - *@desc 根节点,既是第一个又是最后一个 - *@author dailer - *@date 2018/09/16 - */ -BI.MultiLayerSingleTreePlusGroupNode = BI.inherit(BI.NodeButton, { - _defaultConfig: function () { - var conf = BI.MultiLayerSingleTreePlusGroupNode.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - extraCls: "bi-multilayer-single-tree-plus-group-node bi-list-item", - layer: 0, // 第几层级 - id: "", - pId: "", - open: false, - height: 24 - }); - }, - _init: function () { - BI.MultiLayerSingleTreePlusGroupNode.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.node = this._createNode(); - - var needBlankLayers = []; - var pNode = o.pNode; - while (pNode) { - if (pNode.isLastNode) { - needBlankLayers.push(pNode.layer) - } - pNode = pNode.pNode; - } - - var items = []; - BI.count(0, o.layer, function (index) { - items.push({ - type: "bi.layout", - cls: BI.contains(needBlankLayers, index) ? "" : "base-line-conn-background", - width: 12, - height: o.height - }); - }); - items.push(this.node); - BI.createWidget({ - type: "bi.horizontal_adapt", - element: this, - columnSize: BI.makeArray(o.layer, 12), - items: items - }); - }, - - doRedMark: function () { - this.node.doRedMark.apply(this.node, arguments); - }, - - unRedMark: function () { - this.node.unRedMark.apply(this.node, arguments); - }, - - doClick: function () { - BI.MultiLayerSingleTreePlusGroupNode.superclass.doClick.apply(this, arguments); - this.node.setSelected(this.isSelected()); - }, - - setOpened: function (v) { - BI.MultiLayerSingleTreePlusGroupNode.superclass.setOpened.apply(this, arguments); - if (BI.isNotNull(this.node)) { - this.node.setOpened(v); - } - }, - - _createNode: function () { - var self = this, o = this.options; - - return BI.createWidget({ - type: "bi.plus_group_node", - cls: "bi-list-item-none", - logic: { - dynamic: true - }, - id: o.id, - pId: o.pId, - open: o.open, - isLastNode: o.isLastNode, - height: o.height, - hgap: o.hgap, - text: o.text, - value: o.value, - py: o.py, - keyword: o.keyword, - listeners: [{ - eventName: BI.Controller.EVENT_CHANGE, - action: function (type) { - if (type === BI.Events.CLICK) {// 本身实现click功能 - return; - } - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - } - }] - }); - } -}); - -BI.shortcut("bi.multilayer_single_tree_plus_group_node", BI.MultiLayerSingleTreePlusGroupNode); \ No newline at end of file diff --git a/src/widget/multilayersingletree/treeitem/item.first.treeleaf.js b/src/widget/multilayersingletree/treeitem/item.first.treeleaf.js deleted file mode 100644 index 4cc5203e4..000000000 --- a/src/widget/multilayersingletree/treeitem/item.first.treeleaf.js +++ /dev/null @@ -1,86 +0,0 @@ -/** - * - * Created by GUY on 2016/1/27. - * @class BI.MultiLayerSingleTreeFirstTreeLeafItem - * @extends BI.BasicButton - */ -BI.MultiLayerSingleTreeFirstTreeLeafItem = BI.inherit(BI.BasicButton, { - _defaultConfig: function () { - return BI.extend(BI.MultiLayerSingleTreeFirstTreeLeafItem.superclass._defaultConfig.apply(this, arguments), { - extraCls: "bi-multilayer-single-tree-first-tree-leaf-item bi-list-item-active", - logic: { - dynamic: false - }, - layer: 0, - id: "", - pId: "", - height: 24 - }); - }, - _init: function () { - BI.MultiLayerSingleTreeFirstTreeLeafItem.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.item = BI.createWidget({ - type: "bi.first_tree_leaf_item", - cls: "bi-list-item-none", - logic: { - dynamic: true - }, - id: o.id, - pId: o.pId, - height: o.height, - hgap: o.hgap, - text: o.text, - value: o.value, - py: o.py, - keyword: o.keyword - }); - this.item.on(BI.Controller.EVENT_CHANGE, function (type) { - if (type === BI.Events.CLICK) {// 本身实现click功能 - return; - } - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - }); - - var items = []; - - items.push({ - el: this.item, - lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2 - }); - BI.createWidget({ - type: "bi.horizontal_adapt", - element: this, - columnSize: BI.makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2), - items: items - }); - }, - - doHighLight: function () { - this.item.doHighLight.apply(this.item, arguments); - }, - - unHighLight: function () { - this.item.unHighLight.apply(this.item, arguments); - }, - - getId: function () { - return this.options.id; - }, - - getPId: function () { - return this.options.pId; - }, - - doClick: function () { - BI.MultiLayerSingleTreeFirstTreeLeafItem.superclass.doClick.apply(this, arguments); - this.item.setSelected(this.isSelected()); - }, - - setSelected: function (v) { - BI.MultiLayerSingleTreeFirstTreeLeafItem.superclass.setSelected.apply(this, arguments); - this.item.setSelected(v); - } -}); - -BI.shortcut("bi.multilayer_single_tree_first_tree_leaf_item", BI.MultiLayerSingleTreeFirstTreeLeafItem); diff --git a/src/widget/multilayersingletree/treeitem/item.last.treeleaf.js b/src/widget/multilayersingletree/treeitem/item.last.treeleaf.js deleted file mode 100644 index 9aa604737..000000000 --- a/src/widget/multilayersingletree/treeitem/item.last.treeleaf.js +++ /dev/null @@ -1,86 +0,0 @@ -/** - * - * Created by GUY on 2016/1/27. - * @class BI.MultiLayerSingleTreeLastTreeLeafItem - * @extends BI.BasicButton - */ -BI.MultiLayerSingleTreeLastTreeLeafItem = BI.inherit(BI.BasicButton, { - _defaultConfig: function () { - return BI.extend(BI.MultiLayerSingleTreeLastTreeLeafItem.superclass._defaultConfig.apply(this, arguments), { - extraCls: "bi-multilayer-single-tree-last-tree-leaf-item bi-list-item-active", - logic: { - dynamic: false - }, - layer: 0, - id: "", - pId: "", - height: 24 - }); - }, - _init: function () { - BI.MultiLayerSingleTreeLastTreeLeafItem.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.item = BI.createWidget({ - type: "bi.last_tree_leaf_item", - cls: "bi-list-item-none", - logic: { - dynamic: true - }, - id: o.id, - pId: o.pId, - height: o.height, - hgap: o.hgap, - text: o.text, - value: o.value, - py: o.py, - keyword: o.keyword - }); - this.item.on(BI.Controller.EVENT_CHANGE, function (type) { - if (type === BI.Events.CLICK) {// 本身实现click功能 - return; - } - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - }); - - var items = []; - - items.push({ - el: this.item, - lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2 - }); - BI.createWidget({ - type: "bi.horizontal_adapt", - element: this, - columnSize: BI.makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2), - items: items - }); - }, - - doHighLight: function () { - this.item.doHighLight.apply(this.item, arguments); - }, - - unHighLight: function () { - this.item.unHighLight.apply(this.item, arguments); - }, - - getId: function () { - return this.options.id; - }, - - getPId: function () { - return this.options.pId; - }, - - doClick: function () { - BI.MultiLayerSingleTreeLastTreeLeafItem.superclass.doClick.apply(this, arguments); - this.item.setSelected(this.isSelected()); - }, - - setSelected: function (v) { - BI.MultiLayerSingleTreeLastTreeLeafItem.superclass.setSelected.apply(this, arguments); - this.item.setSelected(v); - } -}); - -BI.shortcut("bi.multilayer_single_tree_last_tree_leaf_item", BI.MultiLayerSingleTreeLastTreeLeafItem); diff --git a/src/widget/multilayersingletree/treeitem/item.mid.treeleaf.js b/src/widget/multilayersingletree/treeitem/item.mid.treeleaf.js deleted file mode 100644 index eed7d553c..000000000 --- a/src/widget/multilayersingletree/treeitem/item.mid.treeleaf.js +++ /dev/null @@ -1,86 +0,0 @@ -/** - * - * Created by GUY on 2016/1/27. - * @class BI.MultiLayerSingleTreeMidTreeLeafItem - * @extends BI.BasicButton - */ -BI.MultiLayerSingleTreeMidTreeLeafItem = BI.inherit(BI.BasicButton, { - _defaultConfig: function () { - return BI.extend(BI.MultiLayerSingleTreeMidTreeLeafItem.superclass._defaultConfig.apply(this, arguments), { - extraCls: "bi-multilayer-single-tree-mid-tree-leaf-item bi-list-item-active", - logic: { - dynamic: false - }, - layer: 0, - id: "", - pId: "", - height: 24 - }); - }, - _init: function () { - BI.MultiLayerSingleTreeMidTreeLeafItem.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.item = BI.createWidget({ - type: "bi.mid_tree_leaf_item", - cls: "bi-list-item-none", - logic: { - dynamic: true - }, - id: o.id, - pId: o.pId, - height: o.height, - hgap: o.hgap, - text: o.text, - value: o.value, - py: o.py, - keyword: o.keyword - }); - this.item.on(BI.Controller.EVENT_CHANGE, function (type) { - if (type === BI.Events.CLICK) {// 本身实现click功能 - return; - } - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - }); - - var items = []; - - items.push({ - el: this.item, - lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2 - }); - BI.createWidget({ - type: "bi.horizontal_adapt", - element: this, - columnSize: BI.makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2), - items: items - }); - }, - - doHighLight: function () { - this.item.doHighLight.apply(this.item, arguments); - }, - - unHighLight: function () { - this.item.unHighLight.apply(this.item, arguments); - }, - - getId: function () { - return this.options.id; - }, - - getPId: function () { - return this.options.pId; - }, - - doClick: function () { - BI.MultiLayerSingleTreeMidTreeLeafItem.superclass.doClick.apply(this, arguments); - this.item.setSelected(this.isSelected()); - }, - - setSelected: function (v) { - BI.MultiLayerSingleTreeMidTreeLeafItem.superclass.setSelected.apply(this, arguments); - this.item.setSelected(v); - } -}); - -BI.shortcut("bi.multilayer_single_tree_mid_tree_leaf_item", BI.MultiLayerSingleTreeMidTreeLeafItem); From ab2eb1f99678431adfa393c12f274263afd9445f Mon Sep 17 00:00:00 2001 From: "crawford.zhou" Date: Fri, 13 Jan 2023 15:11:19 +0800 Subject: [PATCH 3/6] =?UTF-8?q?KERNEL-14105=20feat:searchmultitextvaluecom?= =?UTF-8?q?bo=20=E7=9A=84es6=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/widget/index.js | 3 + src/widget/multiselect/index.js | 6 + src/widget/searchmultitextvaluecombo/index.js | 5 + .../multitextvalue.combo.search.js | 648 +++++++++--------- .../multitextvalue.combo.trigger.search.js | 189 ++--- .../multitextvalue.loader.search.js | 238 ++++--- .../multitextvalue.popup.view.search.js | 112 +-- .../trigger/searcher.multitextvalue.js | 200 +++--- 8 files changed, 748 insertions(+), 653 deletions(-) create mode 100644 src/widget/searchmultitextvaluecombo/index.js diff --git a/src/widget/index.js b/src/widget/index.js index 2deb239a7..0d3a9cb59 100644 --- a/src/widget/index.js +++ b/src/widget/index.js @@ -25,6 +25,7 @@ import * as singleselect from "./singleselect"; import * as multilayerdownlist from "./multilayerdownlist"; import * as multilayersingletree from "./multilayersingletree"; +import * as searchmultitextvaluecombo from "./searchmultitextvaluecombo"; Object.assign(BI, { Collapse, ...calendar, @@ -52,6 +53,7 @@ Object.assign(BI, { ...singleselect, ...multilayerdownlist, ...multilayersingletree, + ...searchmultitextvaluecombo, }); export * from "./date/calendar"; @@ -68,6 +70,7 @@ export * from "./downlist"; export * from "./singleslider"; export * from "./intervalslider"; export * from "./year"; +export * from "./searchmultitextvaluecombo"; export * from "./singleselect"; export * from "./multilayerdownlist"; export * from "./multilayersingletree"; diff --git a/src/widget/multiselect/index.js b/src/widget/multiselect/index.js index 9e0934c14..9236080dd 100644 --- a/src/widget/multiselect/index.js +++ b/src/widget/multiselect/index.js @@ -1,3 +1,9 @@ +export { MultiSelectSearchPane } from "./search/multiselect.search.pane"; +export { MultiSelectEditor } from "./trigger/editor.multiselect"; +export { MultiSelectTrigger } from "./multiselect.trigger"; +export { MultiSelectPopupView } from "./multiselect.popup.view"; +export { MultiSelectSearcher } from "./trigger/searcher.multiselect"; +export { MultiSelectCheckSelectedSwitcher } from "./trigger/switcher.checkselected"; export { MultiSelectCombo } from "./multiselect.combo"; export { MultiSelectNoBarCombo } from "./multiselect.combo.nobar"; export { MultiSelectInsertCombo } from "./multiselect.insert.combo"; diff --git a/src/widget/searchmultitextvaluecombo/index.js b/src/widget/searchmultitextvaluecombo/index.js new file mode 100644 index 000000000..1e711286d --- /dev/null +++ b/src/widget/searchmultitextvaluecombo/index.js @@ -0,0 +1,5 @@ +export { SearchMultiTextValueCombo } from "./multitextvalue.combo.search"; +export { SearchMultiSelectPopupView } from "./multitextvalue.popup.view.search"; +export { SearchMultiSelectTrigger } from "./multitextvalue.combo.trigger.search"; +export { SearchMultiSelectLoader } from "./multitextvalue.loader.search"; +export { SearchMultiSelectSearcher } from "./trigger/searcher.multitextvalue"; diff --git a/src/widget/searchmultitextvaluecombo/multitextvalue.combo.search.js b/src/widget/searchmultitextvaluecombo/multitextvalue.combo.search.js index 4fdbf42ee..4b8b3dc91 100644 --- a/src/widget/searchmultitextvaluecombo/multitextvalue.combo.search.js +++ b/src/widget/searchmultitextvaluecombo/multitextvalue.combo.search.js @@ -1,29 +1,44 @@ -/** - * - * @class BI.SearchMultiTextValueCombo - * @extends BI.Single - */ -BI.SearchMultiTextValueCombo = BI.inherit(BI.Single, { +import { shortcut, extend, isKey, Selection, remove, last, pushDistinct, deepClone, createWidget, toPix, isNotNull, initial, endWith, bind, nextTick, AbsoluteLayout, contains, map, makeObject, each, values, isNull, Func, isNotEmptyArray, isArray, find } from "@/core"; +import { Single, Combo } from "@/base"; +import { MultiSelectTrigger, MultiSelectPopupView, MultiSelectCombo, SearchMultiSelectTrigger, SearchMultiSelectPopupView } from "@/widget"; +import { MultiSelectBar, TriggerIconButton } from "@/case"; - _defaultConfig: function () { - return BI.extend(BI.SearchMultiTextValueCombo.superclass._defaultConfig.apply(this, arguments), { +@shortcut() +export class SearchMultiTextValueCombo extends Single { + static xtype = "bi.search_multi_text_value_combo"; + + static REQ_GET_DATA_LENGTH = 1; + static REQ_GET_ALL_DATA = -1; + static EVENT_CONFIRM = "EVENT_CONFIRM"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-select-combo bi-search-multi-text-value-combo", height: 24, - items: [] + items: [], }); - }, + } - _init: function () { - var self = this, o = this.options; - BI.SearchMultiTextValueCombo.superclass._init.apply(this, arguments); - var assertShowValue = function () { - BI.isKey(self._startValue) && (self.storeValue.type === BI.Selection.All ? BI.remove(self.storeValue.value, self._startValue) : BI.pushDistinct(self.storeValue.value, self._startValue)); - self._updateAllValue(); - self._checkError(); - self.trigger.getSearcher().setState(self.storeValue); - self.trigger.getCounter().setButtonChecked(self.storeValue); + _init() { + const o = this.options; + const triggerBtn = createWidget({ + type: TriggerIconButton.xtype, + width: o.height, + height: o.height, + cls: "multi-select-trigger-icon-button", + }); + super._init(...arguments); + const assertShowValue = () => { + isKey(this._startValue) && + (this.storeValue.type === Selection.All + ? remove(this.storeValue.value, this._startValue) + : pushDistinct(this.storeValue.value, this._startValue)); + this._updateAllValue(); + this._checkError(); + this.trigger.getSearcher().setState(this.storeValue); + this.trigger.getCounter().setButtonChecked(this.storeValue); }; - this.storeValue = BI.deepClone(o.value || {}); + this.storeValue = deepClone(o.value || {}); this._updateAllValue(); this._assertValue(this.storeValue); @@ -32,10 +47,10 @@ BI.SearchMultiTextValueCombo = BI.inherit(BI.Single, { // 标记正在请求数据 this.requesting = false; - this.trigger = BI.createWidget({ - type: "bi.search_multi_select_trigger", + this.trigger = createWidget({ + type: SearchMultiSelectTrigger.xtype, text: o.text, - height: BI.toPix(o.height, o.simple ? 1 : 2), + height: toPix(o.height, o.simple ? 1 : 2), // adapter: this.popup, masker: { offset: { @@ -45,437 +60,450 @@ BI.SearchMultiTextValueCombo = BI.inherit(BI.Single, { bottom: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 1, }, }, - allValueGetter: function () { - return self.allValue; - }, + allValueGetter: () => this.allValue, valueFormatter: o.valueFormatter, - itemsCreator: function (op, callback) { - self._itemsCreator(op, function (res) { - if (op.times === 1 && BI.isNotNull(op.keywords)) { + itemsCreator: (op, callback) => { + this._itemsCreator(op, res => { + if (op.times === 1 && isNotNull(op.keywords)) { // 预防trigger内部把当前的storeValue改掉 - self.trigger.setValue(BI.deepClone(self.getValue())); + this.trigger.setValue(deepClone(this.getValue())); } - callback.apply(self, arguments); + callback.apply(this, ...arguments); }); }, value: this.storeValue, - warningTitle: o.warningTitle + warningTitle: o.warningTitle, }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_START, function () { - self._setStartValue(""); - this.getSearcher().setValue(self.storeValue); + this.trigger.on(MultiSelectTrigger.EVENT_START, () => { + this._setStartValue(""); + this.getSearcher().setValue(this.storeValue); }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_STOP, function () { - self._setStartValue(""); + this.trigger.on(MultiSelectTrigger.EVENT_STOP, () => { + this._setStartValue(""); }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_SEARCHING, function (keywords) { - var last = BI.last(keywords); - keywords = BI.initial(keywords || []); - if (keywords.length > 0) { - self._joinKeywords(keywords, function () { - if (BI.endWith(last, BI.BlankSplitChar)) { - self.combo.setValue(self.storeValue); - assertShowValue(); - self.combo.populate(); - self._setStartValue(""); - } else { - self.combo.setValue(self.storeValue); - assertShowValue(); - } - self._dataChange = true; - }); + this.trigger.on( + MultiSelectTrigger.EVENT_SEARCHING, + keywords => { + const lastKeyWord = last(keywords); + keywords = initial(keywords || []); + if (keywords.length > 0) { + this._joinKeywords(keywords, () => { + if (endWith(lastKeyWord, BI.BlankSplitChar)) { + this.combo.setValue(this.storeValue); + assertShowValue(); + this.combo.populate(); + this._setStartValue(""); + } else { + this.combo.setValue(this.storeValue); + assertShowValue(); + } + this._dataChange = true; + }); + } } - }); + ); - this.trigger.on(BI.MultiSelectTrigger.EVENT_CHANGE, function (value, obj) { - if (obj instanceof BI.MultiSelectBar) { - self._joinAll(this.getValue(), function () { + this.trigger.on(MultiSelectTrigger.EVENT_CHANGE, (value, obj) => { + if (obj instanceof MultiSelectBar) { + this._joinAll(this.getValue(), () => { assertShowValue(); }); } else { - self._join(this.getValue(), function () { + this._join(this.getValue(), () => { assertShowValue(); }); } - self._dataChange = true; + this._dataChange = true; }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW, function () { - this.getCounter().setValue(self.storeValue); - }); - this.trigger.on(BI.MultiSelectTrigger.EVENT_COUNTER_CLICK, function () { - if (!self.combo.isViewVisible()) { - self.combo.showView(); + this.trigger.on( + MultiSelectTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW, + () => { + this.getCounter().setValue(this.storeValue); + } + ); + this.trigger.on(MultiSelectTrigger.EVENT_COUNTER_CLICK, () => { + if (!this.combo.isViewVisible()) { + this.combo.showView(); } }); - this.combo = BI.createWidget({ - type: "bi.combo", + this.combo = createWidget({ + type: Combo.xtype, cls: o.simple ? "bi-border-bottom" : "bi-border bi-border-radius", toggle: false, container: o.container, el: this.trigger, adjustLength: 1, popup: { - type: "bi.search_multi_select_popup_view", - ref: function () { - self.popup = this; - self.trigger.setAdapter(this); + type: SearchMultiSelectPopupView.xtype, + ref: _ref => { + this.popup = _ref; + this.trigger.setAdapter(_ref); }, - listeners: [{ - eventName: BI.MultiSelectPopupView.EVENT_CHANGE, - action: function () { - self._dataChange = true; - self.storeValue = this.getValue(); - self._adjust(function () { - assertShowValue(); - }); + listeners: [ + { + eventName: MultiSelectPopupView.EVENT_CHANGE, + action :() => { + this._dataChange = true; + this.storeValue = this.getValue(); + this._adjust(() => { + assertShowValue(); + }); + }, + }, + { + eventName: MultiSelectPopupView.EVENT_CLICK_CONFIRM, + action :() => { + this._defaultState(); + }, + }, + { + eventName: MultiSelectPopupView.EVENT_CLICK_CLEAR, + action: () => { + this._dataChange = true; + this.setValue(); + this._defaultState(); + }, } - }, { - eventName: BI.MultiSelectPopupView.EVENT_CLICK_CONFIRM, - action: function () { - self._defaultState(); - } - }, { - eventName: BI.MultiSelectPopupView.EVENT_CLICK_CLEAR, - action: function () { - self._dataChange = true; - self.setValue(); - self._defaultState(); - } - }], - itemsCreator: BI.bind(self._itemsCreator, this), + ], + itemsCreator: bind(this._itemsCreator, this), valueFormatter: o.valueFormatter, - onLoaded: function () { - BI.nextTick(function () { - self.combo.adjustWidth(); - self.combo.adjustHeight(); - self.trigger.getCounter().adjustView(); - self.trigger.getSearcher().adjustView(); + onLoaded: () => { + nextTick(() => { + this.combo.adjustWidth(); + this.combo.adjustHeight(); + this.trigger.getCounter().adjustView(); + this.trigger.getSearcher().adjustView(); }); - } + }, }, value: o.value, - hideChecker: function (e) { - return triggerBtn.element.find(e.target).length === 0; - } + hideChecker: e => triggerBtn.element.find(e.target).length === 0, }); - this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () { + this.combo.on(Combo.EVENT_BEFORE_POPUPVIEW, () => { if (!this.isViewVisible()) { - self._dataChange = false;// 标记数据是否发生变化 + this._dataChange = false; // 标记数据是否发生变化 } - this.setValue(self.storeValue); - BI.nextTick(function () { - self._populate(); + this.setValue(this.storeValue); + nextTick(() => { + this._populate(); }); }); // 当退出的时候如果还在处理请求，则等请求结束后再对外发确定事件 this.wants2Quit = false; - this.combo.on(BI.Combo.EVENT_AFTER_HIDEVIEW, function () { + this.combo.on(Combo.EVENT_AFTER_HIDEVIEW, () => { // important:关闭弹出时又可能没有退出编辑状态 - self.trigger.stopEditing(); - if (self.requesting === true) { - self.wants2Quit = true; + this.trigger.stopEditing(); + if (this.requesting === true) { + this.wants2Quit = true; } else { /** * 在存在标红的情况，如果popover没有发生改变就确认需要同步trigger的值，否则对外value值和trigger样式不统一 */ assertShowValue(); - self._dataChange && self.fireEvent(BI.SearchMultiTextValueCombo.EVENT_CONFIRM); + this._dataChange && + this.fireEvent(SearchMultiTextValueCombo.EVENT_CONFIRM); } }); - 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 () { - self.trigger.getCounter().hideView(); - if (self.combo.isViewVisible()) { - self.combo.hideView(); + triggerBtn.on(TriggerIconButton.EVENT_CHANGE, () => { + this.trigger.getCounter().hideView(); + if (this.combo.isViewVisible()) { + this.combo.hideView(); } else { - self.combo.showView(); + this.combo.showView(); } }); - 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 - }] + items: [ + { + el: this.combo, + left: 0, + right: 0, + top: 0, + bottom: 0, + }, + { + el: triggerBtn, + right: 0, + top: 0, + bottom: 0, + } + ], }); this._checkError(); - }, + } - _defaultState: function () { + _defaultState() { this.trigger.stopEditing(); this.combo.hideView(); - }, + } - _assertValue: function (val) { - var o = this.options; + _assertValue(val) { + const o = this.options; val || (val = {}); - val.type || (val.type = BI.Selection.Multi); + val.type || (val.type = Selection.Multi); val.value || (val.value = []); - BI.remove(val.value, function (idx, value) { - return !BI.contains(BI.map(o.items, "value"), value); - }); - }, + remove(val.value, (idx, value) => !contains(map(o.items, "value"), value)); + } - _makeMap: function (values) { - return BI.makeObject(values || []); - }, + _makeMap(values) { + return makeObject(values || []); + } - _joinKeywords: function (keywords, callback) { - var self = this, o = this.options; + _joinKeywords(keywords, callback) { this._assertValue(this.storeValue); this.requesting = true; - this._itemsCreator({ - type: BI.SearchMultiTextValueCombo.REQ_GET_ALL_DATA, - keywords: keywords - }, function (ob) { - var values = BI.map(ob.items, "value"); - digest(values); - }); - - function digest (items) { - var selectedMap = self._makeMap(items); - BI.each(keywords, function (i, val) { - if (BI.isNotNull(selectedMap[val])) { - self.storeValue.type === BI.Selection.Multi ? BI.pushDistinct(self.storeValue.value, val) : BI.remove(self.storeValue.value, val); + const digest = items => { + const selectedMap = this._makeMap(items); + each(keywords, (i, val) => { + if (isNotNull(selectedMap[val])) { + this.storeValue.type === Selection.Multi + ? pushDistinct(this.storeValue.value, val) + : remove(this.storeValue.value, val); } }); - self._adjust(callback); - } - }, + this._adjust(callback); + }; + this._itemsCreator( + { + type: SearchMultiTextValueCombo.REQ_GET_ALL_DATA, + keywords, + }, + ob => { + const values = map(ob.items, "value"); + digest(values); + } + ); + } - _joinAll: function (res, callback) { - var self = this, o = this.options; + _joinAll(res, callback) { this._assertValue(res); this.requesting = true; - this._itemsCreator({ - type: BI.SearchMultiTextValueCombo.REQ_GET_ALL_DATA, - keywords: [this.trigger.getKey()] - }, function (ob) { - var items = BI.map(ob.items, "value"); - if (self.storeValue.type === res.type) { - var change = false; - var map = self._makeMap(self.storeValue.value); - BI.each(items, function (i, v) { - if (BI.isNotNull(map[v])) { - change = true; - self.storeValue.assist && self.storeValue.assist.push(map[v]); - delete map[v]; + this._itemsCreator( + { + type: SearchMultiTextValueCombo.REQ_GET_ALL_DATA, + keywords: [this.trigger.getKey()], + }, + ob => { + const map = this._makeMap(this.storeValue.value); + const items = map(ob.items, "value"); + if (this.storeValue.type === res.type) { + let change = false; + each(items, (i, v) => { + if (isNotNull(map[v])) { + change = true; + this.storeValue.assist && + this.storeValue.assist.push(map[v]); + delete map[v]; + } + }); + change && (this.storeValue.value = values(map)); + this._adjust(callback); + + return; + } + const selectedMap = this._makeMap(this.storeValue.value); + const notSelectedMap = this._makeMap(res.value); + const newItems = []; + each(items, (i, item) => { + if (isNotNull(selectedMap[items[i]])) { + this.storeValue.assist && + this.storeValue.assist.push(selectedMap[items[i]]); + delete selectedMap[items[i]]; + } + if (isNull(notSelectedMap[items[i]])) { + remove(this.storeValue.assist, item); + newItems.push(item); } }); - change && (self.storeValue.value = BI.values(map)); - self._adjust(callback); - return; + this.storeValue.value = newItems.concat(values(selectedMap)); + this._adjust(callback); } - var selectedMap = self._makeMap(self.storeValue.value); - var notSelectedMap = self._makeMap(res.value); - var newItems = []; - BI.each(items, function (i, item) { - if (BI.isNotNull(selectedMap[items[i]])) { - self.storeValue.assist && self.storeValue.assist.push(selectedMap[items[i]]); - delete selectedMap[items[i]]; - } - if (BI.isNull(notSelectedMap[items[i]])) { - BI.remove(self.storeValue.assist, item); - newItems.push(item); - } - }); - self.storeValue.value = newItems.concat(BI.values(selectedMap)); - self._adjust(callback); - }); - }, - - _adjust: function (callback) { - var self = this, o = this.options; - if (!this._count) { - this._itemsCreator({ - type: BI.SearchMultiTextValueCombo.REQ_GET_DATA_LENGTH - }, function (res) { - self._count = res.count; - adjust(); - callback(); - }); - } else { - adjust(); - callback(); - - } + ); + } - function adjust () { - if (self.storeValue.type === BI.Selection.All && self.storeValue.value.length >= self._count) { - self.storeValue = { - type: BI.Selection.Multi, - value: [] + _adjust(callback) { + const adjust = () => { + if ( + this.storeValue.type === Selection.All && + this.storeValue.value.length >= this._count + ) { + this.storeValue = { + type: Selection.Multi, + value: [], }; - } else if (self.storeValue.type === BI.Selection.Multi && self.storeValue.value.length >= self._count) { - self.storeValue = { - type: BI.Selection.All, - value: [] + } else if ( + this.storeValue.type === Selection.Multi && + this.storeValue.value.length >= this._count + ) { + this.storeValue = { + type: Selection.All, + value: [], }; } - self._updateAllValue(); - self._checkError(); - if (self.wants2Quit === true) { - self._dataChange && self.fireEvent(BI.SearchMultiTextValueCombo.EVENT_CONFIRM); - self.wants2Quit = false; + this._updateAllValue(); + this._checkError(); + if (this.wants2Quit === true) { + this._dataChange && + this.fireEvent(SearchMultiTextValueCombo.EVENT_CONFIRM); + this.wants2Quit = false; } - self.requesting = false; + this.requesting = false; + }; + if (!this._count) { + this._itemsCreator( + { + type: SearchMultiTextValueCombo.REQ_GET_DATA_LENGTH, + }, + res => { + this._count = res.count; + adjust(); + callback(); + } + ); + } else { + adjust(); + callback(); } - }, + } - _join: function (res, callback) { - var self = this, o = this.options; + _join(res, callback) { this._assertValue(res); this._assertValue(this.storeValue); if (this.storeValue.type === res.type) { - var map = this._makeMap(this.storeValue.value); - BI.each(res.value, function (i, v) { + const map = this._makeMap(this.storeValue.value); + each(res.value, (i, v) => { if (!map[v]) { - self.storeValue.value.push(v); - BI.remove(self.storeValue.assist, v); + this.storeValue.value.push(v); + remove(this.storeValue.assist, v); map[v] = v; } }); - var change = false; - BI.each(res.assist, function (i, v) { - if (BI.isNotNull(map[v])) { + let change = false; + each(res.assist, (i, v) => { + if (isNotNull(map[v])) { change = true; - self.storeValue.assist && self.storeValue.assist.push(map[v]); + this.storeValue.assist && + this.storeValue.assist.push(map[v]); delete map[v]; } }); - change && (this.storeValue.value = BI.values(map)); - self._adjust(callback); + change && (this.storeValue.value = values(map)); + this._adjust(callback); + return; } this._joinAll(res, callback); - }, + } - _setStartValue: function (value) { + _setStartValue(value) { this._startValue = value; this.popup.setStartValue(value); - }, + } - _getItemsByTimes: function (items, times) { - var res = []; - for (var i = (times - 1) * 100; items[i] && i < times * 100; i++) { + _getItemsByTimes(items, times) { + const res = []; + for (let i = (times - 1) * 100; items[i] && i < times * 100; i++) { res.push(items[i]); } + return res; - }, + } - _hasNextByTimes: function (items, times) { + _hasNextByTimes(items, times) { return times * 100 < items.length; - }, + } - _itemsCreator: function (options, callback) { - var self = this, o = this.options; - var items = o.items; - var keywords = (options.keywords || []).slice(); + _itemsCreator(options, callback) { + const o = this.options; + let items = o.items; + const keywords = (options.keywords || []).slice(); if (options.keyword) { keywords.push(options.keyword); } - BI.each(keywords, function (i, kw) { - var search = BI.Func.getSearchResult(items, kw); + each(keywords, (i, kw) => { + const search = Func.getSearchResult(items, kw); items = search.match.concat(search.find); }); - if (options.selectedValues) {// 过滤 - var filter = BI.makeObject(options.selectedValues, true); - items = BI.filter(items, function (i, ob) { - return !filter[ob.value]; - }); + if (options.selectedValues) { + // 过滤 + const filter = makeObject(options.selectedValues, true); + items = filter(items, (i, ob) => !filter[ob.value]); } - if (options.type == BI.MultiSelectCombo.REQ_GET_ALL_DATA) { + if (options.type === MultiSelectCombo.REQ_GET_ALL_DATA) { callback({ - items: items + items, }); + return; } - if (options.type == BI.MultiSelectCombo.REQ_GET_DATA_LENGTH) { - callback({count: items.length}); + if (options.type === MultiSelectCombo.REQ_GET_DATA_LENGTH) { + callback({ count: items.length }); + return; } callback({ - items: self._getItemsByTimes(items, options.times), - hasNext: self._hasNextByTimes(items, options.times) + items: this._getItemsByTimes(items, options.times), + hasNext: this._hasNextByTimes(items, options.times), }); - }, + } - _checkError: function () { - var v = this.storeValue.value || []; - if(BI.isNotEmptyArray(v)) { - v = BI.isArray(v) ? v : [v]; - var result = BI.find(this.allValue, function (idx, value) { - return !BI.contains(v, value); - }); - if (BI.isNull(result)) { - BI.isNotNull(this.trigger) && (this.trigger.setTipType("success")); + _checkError() { + let v = this.storeValue.value || []; + if (isNotEmptyArray(v)) { + v = isArray(v) ? v : [v]; + const result = find(this.allValue, (idx, value) => !contains(v, value)); + if (isNull(result)) { + isNotNull(this.trigger) && this.trigger.setTipType("success"); this.element.removeClass("combo-error"); } else { - BI.isNotNull(this.trigger) && (this.trigger.setTipType("warning")); + isNotNull(this.trigger) && this.trigger.setTipType("warning"); this.element.addClass("combo-error"); } } else { - if(v.length === this.allValue.length){ - BI.isNotNull(this.trigger) && (this.trigger.setTipType("success")); + if (v.length === this.allValue.length) { + isNotNull(this.trigger) && this.trigger.setTipType("success"); this.element.removeClass("combo-error"); - }else { - BI.isNotNull(this.trigger) && (this.trigger.setTipType("warning")); + } else { + isNotNull(this.trigger) && this.trigger.setTipType("warning"); this.element.addClass("combo-error"); } } - }, + } - _updateAllValue: function () { + _updateAllValue() { this.storeValue = this.storeValue || {}; - this.allValue = BI.deepClone(this.storeValue.value || []); - }, + this.allValue = deepClone(this.storeValue.value || []); + } - setValue: function (v) { - this.storeValue = BI.deepClone(v || {}); + setValue(v) { + this.storeValue = deepClone(v || {}); this._updateAllValue(); this._assertValue(this.storeValue); this.combo.setValue(this.storeValue); this._checkError(); - }, + } - getValue: function () { - return BI.deepClone(this.storeValue); - }, + getValue() { + return deepClone(this.storeValue); + } - _populate: function () { + _populate() { this._count = null; this.combo.populate(); - }, + } - populate: function (items) { + populate(items) { this.options.items = items; this._populate(); } -}); - -BI.extend(BI.SearchMultiTextValueCombo, { +} +extend(SearchMultiTextValueCombo, { REQ_GET_DATA_LENGTH: 1, - REQ_GET_ALL_DATA: -1 + REQ_GET_ALL_DATA: -1, }); - -BI.SearchMultiTextValueCombo.EVENT_CONFIRM = "EVENT_CONFIRM"; - -BI.shortcut("bi.search_multi_text_value_combo", BI.SearchMultiTextValueCombo); diff --git a/src/widget/searchmultitextvaluecombo/multitextvalue.combo.trigger.search.js b/src/widget/searchmultitextvaluecombo/multitextvalue.combo.trigger.search.js index 3256994ae..ba9dae06a 100644 --- a/src/widget/searchmultitextvaluecombo/multitextvalue.combo.trigger.search.js +++ b/src/widget/searchmultitextvaluecombo/multitextvalue.combo.trigger.search.js @@ -1,31 +1,44 @@ -BI.SearchMultiSelectTrigger = BI.inherit(BI.Trigger, { +import { shortcut, extend, emptyFn, createWidget, Events, nextTick, HTapeLayout, RightVerticalAdaptLayout } from "@/core"; +import { Trigger } from "@/base"; +import { MultiSelectCheckSelectedSwitcher, MultiSelectSearcher, SearchMultiSelectSearcher } from "@/widget"; - constants: { - height: 14, - rgap: 4, - lgap: 4 - }, +@shortcut() +export class SearchMultiSelectTrigger extends Trigger { + static xtype = "bi.search_multi_select_trigger"; - _defaultConfig: function () { - return BI.extend(BI.SearchMultiSelectTrigger.superclass._defaultConfig.apply(this, arguments), { + constants = { height: 14, rgap: 4, lgap: 4 }; + + static EVENT_TRIGGER_CLICK = "EVENT_TRIGGER_CLICK"; + static EVENT_COUNTER_CLICK = "EVENT_COUNTER_CLICK"; + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_START = "EVENT_START"; + static EVENT_STOP = "EVENT_STOP"; + static EVENT_PAUSE = "EVENT_PAUSE"; + static EVENT_SEARCHING = "EVENT_SEARCHING"; + static EVENT_BEFORE_COUNTER_POPUPVIEW = "EVENT_BEFORE_COUNTER_POPUPVIEW"; + + _defaultConfig() { + const conf = super._defaultConfig(...arguments); + + return extend(conf, { baseCls: "bi-multi-select-trigger", - itemsCreator: BI.emptyFn, - valueFormatter: BI.emptyFn, + itemsCreator: emptyFn, + valueFormatter: emptyFn, searcher: {}, switcher: {}, adapter: null, - masker: {} + masker: {}, }); - }, + } - _init: function () { - BI.SearchMultiSelectTrigger.superclass._init.apply(this, arguments); + _init() { + super._init(...arguments); - var self = this, o = this.options; + const o = this.options; - this.searcher = BI.createWidget(o.searcher, { - type: "bi.search_multi_select_searcher", + this.searcher = createWidget(o.searcher, { + type: SearchMultiSelectSearcher.xtype, height: o.height, itemsCreator: o.itemsCreator, valueFormatter: o.valueFormatter, @@ -36,119 +49,125 @@ BI.SearchMultiSelectTrigger = BI.inherit(BI.Trigger, { value: o.value, text: o.text, tipType: o.tipType, - warningTitle: o.warningTitle + warningTitle: o.warningTitle, }); - this.searcher.on(BI.MultiSelectSearcher.EVENT_START, function () { - self.fireEvent(BI.SearchMultiSelectTrigger.EVENT_START); + this.searcher.on(MultiSelectSearcher.EVENT_START, () => { + this.fireEvent(SearchMultiSelectTrigger.EVENT_START); }); - this.searcher.on(BI.MultiSelectSearcher.EVENT_PAUSE, function () { - self.fireEvent(BI.SearchMultiSelectTrigger.EVENT_PAUSE); + this.searcher.on(MultiSelectSearcher.EVENT_PAUSE, () => { + this.fireEvent(SearchMultiSelectTrigger.EVENT_PAUSE); }); - this.searcher.on(BI.MultiSelectSearcher.EVENT_SEARCHING, function () { - self.fireEvent(BI.SearchMultiSelectTrigger.EVENT_SEARCHING, arguments); + this.searcher.on(MultiSelectSearcher.EVENT_SEARCHING, () => { + this.fireEvent(SearchMultiSelectTrigger.EVENT_SEARCHING, ...arguments); }); - this.searcher.on(BI.MultiSelectSearcher.EVENT_STOP, function () { - self.fireEvent(BI.SearchMultiSelectTrigger.EVENT_STOP); + this.searcher.on(MultiSelectSearcher.EVENT_STOP, () => { + this.fireEvent(SearchMultiSelectTrigger.EVENT_STOP); }); - this.searcher.on(BI.MultiSelectSearcher.EVENT_CHANGE, function () { - self.fireEvent(BI.SearchMultiSelectTrigger.EVENT_CHANGE, arguments); + this.searcher.on(MultiSelectSearcher.EVENT_CHANGE, () => { + this.fireEvent(SearchMultiSelectTrigger.EVENT_CHANGE, ...arguments); }); - this.numberCounter = BI.createWidget(o.switcher, { - type: "bi.multi_select_check_selected_switcher", + this.numberCounter = createWidget(o.switcher, { + type: MultiSelectCheckSelectedSwitcher.xtype, valueFormatter: o.valueFormatter, itemsCreator: o.itemsCreator, adapter: o.adapter, masker: o.masker, - value: o.value - }); - this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE, function () { - self.fireEvent(BI.SearchMultiSelectTrigger.EVENT_COUNTER_CLICK); - }); - this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW, function () { - self.fireEvent(BI.SearchMultiSelectTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW); + value: o.value, }); + this.numberCounter.on( + MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE, + () => { + this.fireEvent(SearchMultiSelectTrigger.EVENT_COUNTER_CLICK); + } + ); + this.numberCounter.on( + MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW, + () => { + this.fireEvent( + SearchMultiSelectTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW + ); + } + ); - var wrapNumberCounter = BI.createWidget({ - type: "bi.right_vertical_adapt", + const wrapNumberCounter = createWidget({ + type: RightVerticalAdaptLayout.xtype, hgap: 4, - items: [{ - el: this.numberCounter - }] + items: [ + { + el: this.numberCounter, + } + ], }); - var wrapper = BI.createWidget({ - type: "bi.htape", + const wrapper = createWidget({ + type: HTapeLayout.xtype, element: this, items: [ { el: this.searcher, - width: "fill" - }, { + width: "fill", + }, + { el: wrapNumberCounter, - width: 0 - }, { - el: BI.createWidget(), - width: 24 - }] + width: 0, + }, + { + el: createWidget(), + width: 24, + } + ], }); - this.numberCounter.on(BI.Events.VIEW, function (b) { - BI.nextTick(function () {// 自动调整宽度 - wrapper.attr("items")[1].width = (b === true ? self.numberCounter.element.outerWidth() + 8 : 0); + this.numberCounter.on(Events.VIEW, b => { + nextTick(() => { + // 自动调整宽度 + wrapper.attr("items")[1].width = + b === true + ? this.numberCounter.element.outerWidth() + 8 + : 0; wrapper.resize(); }); }); - this.element.click(function (e) { - if (self.element.find(e.target).length > 0) { - self.numberCounter.hideView(); + this.element.click(e => { + if (this.element.find(e.target).length > 0) { + this.numberCounter.hideView(); } }); - }, + } - getCounter: function () { + getCounter() { return this.numberCounter; - }, + } - getSearcher: function () { + getSearcher() { return this.searcher; - }, + } - stopEditing: function () { + stopEditing() { this.searcher.stopSearch(); this.numberCounter.hideView(); - }, + } - setAdapter: function (adapter) { + setAdapter(adapter) { this.searcher.setAdapter(adapter); this.numberCounter.setAdapter(adapter); - }, + } - setValue: function (ob) { + setValue(ob) { this.searcher.setValue(ob); this.numberCounter.setValue(ob); - }, + } - setTipType: function (v) { + setTipType(v) { this.searcher.setTipType(v); - }, + } - getKey: function () { + getKey() { return this.searcher.getKey(); - }, + } - getValue: function () { + getValue() { return this.searcher.getValue(); } -}); - -BI.SearchMultiSelectTrigger.EVENT_TRIGGER_CLICK = "EVENT_TRIGGER_CLICK"; -BI.SearchMultiSelectTrigger.EVENT_COUNTER_CLICK = "EVENT_COUNTER_CLICK"; -BI.SearchMultiSelectTrigger.EVENT_CHANGE = "EVENT_CHANGE"; -BI.SearchMultiSelectTrigger.EVENT_START = "EVENT_START"; -BI.SearchMultiSelectTrigger.EVENT_STOP = "EVENT_STOP"; -BI.SearchMultiSelectTrigger.EVENT_PAUSE = "EVENT_PAUSE"; -BI.SearchMultiSelectTrigger.EVENT_SEARCHING = "EVENT_SEARCHING"; -BI.SearchMultiSelectTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW = "EVENT_BEFORE_COUNTER_POPUPVIEW"; - -BI.shortcut("bi.search_multi_select_trigger", BI.SearchMultiSelectTrigger); +} diff --git a/src/widget/searchmultitextvaluecombo/multitextvalue.loader.search.js b/src/widget/searchmultitextvaluecombo/multitextvalue.loader.search.js index 59113111e..d03a6865f 100644 --- a/src/widget/searchmultitextvaluecombo/multitextvalue.loader.search.js +++ b/src/widget/searchmultitextvaluecombo/multitextvalue.loader.search.js @@ -1,184 +1,202 @@ -/** - * 多选加载数据面板 - * Created by guy on 15/11/2. - * @class BI.SearchMultiSelectLoader - * @extends Widget - */ -BI.SearchMultiSelectLoader = BI.inherit(BI.Widget, { - - _defaultConfig: function () { - return BI.extend(BI.SearchMultiSelectLoader.superclass._defaultConfig.apply(this, arguments), { +import { shortcut, Widget, extend, emptyFn, createWidget, isKey, Selection, map, contains, remove, pushDistinct, Controller, VerticalLayout, createItems, delay, isNotNull } from "@/core"; +import { ButtonGroup, Loader } from "@/base"; +import { SelectList, MultiSelectBar, MultiSelectItem } from "@/case"; + +@shortcut() +export class SearchMultiSelectLoader extends Widget { + static xtype = "bi.search_multi_select_loader"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-select-loader", logic: { - dynamic: true + dynamic: true, }, el: { - height: 400 + height: 400, }, - valueFormatter: BI.emptyFn, - itemsCreator: BI.emptyFn, + valueFormatter: emptyFn, + itemsCreator: emptyFn, itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, - onLoaded: BI.emptyFn + onLoaded: emptyFn, }); - }, + } - _init: function () { - BI.SearchMultiSelectLoader.superclass._init.apply(this, arguments); + _init() { + super._init(...arguments); - var self = this, opts = this.options; - var hasNext = false; + const opts = this.options; + let hasNext = false; this.storeValue = opts.value || {}; this._assertValue(this.storeValue); - this.button_group = BI.createWidget({ - type: "bi.select_list", + this.button_group = createWidget({ + type: SelectList.xtype, element: this, logic: opts.logic, toolbar: { - type: "bi.multi_select_bar", + type: MultiSelectBar.xtype, cls: "bi-list-item-active", height: this.options.itemHeight, - iconWrapperWidth: 36 + iconWrapperWidth: 36, }, - el: BI.extend({ - onLoaded: opts.onLoaded, - el: { - type: "bi.loader", - isDefaultInit: false, - logic: { - dynamic: true, - scrolly: true - }, + el: extend( + { + onLoaded: opts.onLoaded, el: { - chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI, - behaviors: { - redmark: function () { - return true; - } + type: Loader.xtype, + isDefaultInit: false, + logic: { + dynamic: true, + scrolly: true, }, - layouts: [{ - type: "bi.vertical" - }] - } - } - }, opts.el), - itemsCreator: function (op, callback) { - var startValue = self._startValue; - self.storeValue && (op = BI.extend(op || {}, { - selectedValues: BI.isKey(startValue) && self.storeValue.type === BI.Selection.Multi - ? self.storeValue.value.concat(startValue) : self.storeValue.value - })); - opts.itemsCreator(op, function (ob) { + el: { + chooseType: ButtonGroup.CHOOSE_TYPE_MULTI, + behaviors: { + redmark: () => true, + }, + layouts: [ + { + type: VerticalLayout.xtype, + } + ], + }, + }, + }, + opts.el + ), + itemsCreator: (op, callback) => { + const startValue = this._startValue; + this.storeValue && + (op = extend(op || {}, { + selectedValues: + isKey(startValue) && + this.storeValue.type === Selection.Multi + ? this.storeValue.value.concat(startValue) + : this.storeValue.value, + })); + opts.itemsCreator(op, ob => { hasNext = ob.hasNext; - var firstItems = []; - if (op.times === 1 && self.storeValue) { - var json = BI.map(self.storeValue.value, function (i, v) { - var txt = opts.valueFormatter(v) || v; + let firstItems = []; + if (op.times === 1 && this.storeValue) { + const json = map(this.storeValue.value, (i, v) => { + const txt = opts.valueFormatter(v) || v; + return { text: txt, value: v, title: txt, - selected: self.storeValue.type === BI.Selection.Multi + selected: + this.storeValue.type === Selection.Multi, }; }); - if (BI.isKey(self._startValue) && !BI.contains(self.storeValue.value, self._startValue)) { - var txt = opts.valueFormatter(startValue) || startValue; + if ( + isKey(this._startValue) && + !contains(this.storeValue.value, this._startValue) + ) { + const txt = + opts.valueFormatter(startValue) || startValue; json.unshift({ text: txt, value: startValue, title: txt, - selected: true + selected: true, }); } - firstItems = self._createItems(json); + firstItems = this._createItems(json); } - callback(firstItems.concat(self._createItems(ob.items)), ob.keyword || ""); - if (op.times === 1 && self.storeValue) { - BI.isKey(startValue) && (self.storeValue.type === BI.Selection.All ? BI.remove(self.storeValue.value, startValue) : BI.pushDistinct(self.storeValue.value, startValue)); - self.setValue(self.storeValue); + callback( + firstItems.concat(this._createItems(ob.items)), + ob.keyword || "" + ); + if (op.times === 1 && this.storeValue) { + isKey(startValue) && + (this.storeValue.type === Selection.All + ? remove(this.storeValue.value, startValue) + : pushDistinct( + this.storeValue.value, + startValue + )); + this.setValue(this.storeValue); } - (op.times === 1) && self._scrollToTop(); + op.times === 1 && this._scrollToTop(); }); }, - hasNext: function () { - return hasNext; - }, - value: this.storeValue + hasNext: () => hasNext, + value: this.storeValue, }); - this.button_group.on(BI.Controller.EVENT_CHANGE, function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + this.button_group.on(Controller.EVENT_CHANGE, () => { + this.fireEvent(Controller.EVENT_CHANGE, arguments); }); - this.button_group.on(BI.SelectList.EVENT_CHANGE, function () { - self.fireEvent(BI.SearchMultiSelectLoader.EVENT_CHANGE, arguments); + this.button_group.on(SelectList.EVENT_CHANGE, () => { + this.fireEvent(SearchMultiSelectLoader.EVENT_CHANGE, ...arguments); }); - }, + } - _createItems: function (items) { - return BI.createItems(items, { - type: "bi.multi_select_item", + _createItems(items) { + return createItems(items, { + type: MultiSelectItem.xtype, logic: this.options.logic, cls: "bi-list-item-active", height: this.options.itemHeight, selected: this.isAllSelected(), - iconWrapperWidth: 36 + iconWrapperWidth: 36, }); - }, + } - _scrollToTop: function () { - var self = this; - BI.delay(function () { - self.button_group.element.scrollTop(0); + _scrollToTop() { + delay(() => { + this.button_group.element.scrollTop(0); }, 30); - }, + } - isAllSelected: function () { + isAllSelected() { return this.button_group.isAllSelected(); - }, + } - _assertValue: function (val) { + _assertValue(val) { val || (val = {}); - val.type || (val.type = BI.Selection.Multi); + val.type || (val.type = Selection.Multi); val.value || (val.value = []); - }, + } - setStartValue: function (v) { + setStartValue(v) { this._startValue = v; - }, + } - setValue: function (v) { + setValue(v) { this.storeValue = v || {}; this._assertValue(this.storeValue); this.button_group.setValue(this.storeValue); - }, + } - getValue: function () { + getValue() { return this.button_group.getValue(); - }, + } - getAllButtons: function () { + getAllButtons() { return this.button_group.getAllButtons(); - }, + } - empty: function () { + empty() { this.button_group.empty(); - }, + } - populate: function (items) { - if (BI.isNotNull(items)) { + populate(items) { + if (isNotNull(items)) { arguments[0] = this._createItems(items); } - this.button_group.populate.apply(this.button_group, arguments); - }, + this.button_group.populate(...arguments); + } - resetHeight: function (h) { + resetHeight(h) { this.button_group.resetHeight(h); - }, + } - resetWidth: function (w) { + resetWidth(w) { this.button_group.resetWidth(w); } -}); - -BI.SearchMultiSelectLoader.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.search_multi_select_loader", BI.SearchMultiSelectLoader); \ No newline at end of file +} diff --git a/src/widget/searchmultitextvaluecombo/multitextvalue.popup.view.search.js b/src/widget/searchmultitextvaluecombo/multitextvalue.popup.view.search.js index cb8027f0c..d2db9c7dd 100644 --- a/src/widget/searchmultitextvaluecombo/multitextvalue.popup.view.search.js +++ b/src/widget/searchmultitextvaluecombo/multitextvalue.popup.view.search.js @@ -1,92 +1,104 @@ -BI.SearchMultiSelectPopupView = BI.inherit(BI.Widget, { +import { shortcut, Widget, extend, emptyFn, createWidget, i18nText } from "@/core"; +import { MultiPopupView } from "@/case"; +import { SearchMultiSelectLoader } from "@/widget"; - _defaultConfig: function () { - return BI.extend(BI.SearchMultiSelectPopupView.superclass._defaultConfig.apply(this, arguments), { +@shortcut() +export class SearchMultiSelectPopupView extends Widget { + static xtype = "bi.search_multi_select_popup_view"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_CLICK_CONFIRM = "EVENT_CLICK_CONFIRM"; + static EVENT_CLICK_CLEAR = "EVENT_CLICK_CLEAR"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-select-popup-view", maxWidth: "auto", minWidth: 135, maxHeight: 400, - valueFormatter: BI.emptyFn, - itemsCreator: BI.emptyFn, - onLoaded: BI.emptyFn + valueFormatter: emptyFn, + itemsCreator: emptyFn, + onLoaded: emptyFn, }); - }, + } - _init: function () { - BI.SearchMultiSelectPopupView.superclass._init.apply(this, arguments); - var self = this, opts = this.options; + _init() { + super._init(...arguments); + const opts = this.options; - this.loader = BI.createWidget({ - type: "bi.search_multi_select_loader", + this.loader = createWidget({ + type: SearchMultiSelectLoader.xtype, itemsCreator: opts.itemsCreator, valueFormatter: opts.valueFormatter, onLoaded: opts.onLoaded, - value: opts.value + value: opts.value, }); - this.popupView = BI.createWidget({ - type: "bi.multi_popup_view", + this.popupView = createWidget({ + type: MultiPopupView.xtype, stopPropagation: false, maxWidth: opts.maxWidth, minWidth: opts.minWidth, maxHeight: opts.maxHeight, element: this, - buttons: [BI.i18nText("BI-Basic_Clears"), BI.i18nText("BI-Basic_OK")], + buttons: [i18nText("BI-Basic_Clears"), i18nText("BI-Basic_OK")], el: this.loader, - value: opts.value + value: opts.value, }); - this.popupView.on(BI.MultiPopupView.EVENT_CHANGE, function () { - self.fireEvent(BI.SearchMultiSelectPopupView.EVENT_CHANGE); + this.popupView.on(MultiPopupView.EVENT_CHANGE, () => { + this.fireEvent(SearchMultiSelectPopupView.EVENT_CHANGE); }); - 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.SearchMultiSelectPopupView.EVENT_CLICK_CLEAR); + this.fireEvent( + SearchMultiSelectPopupView.EVENT_CLICK_CLEAR + ); break; case 1: - self.fireEvent(BI.SearchMultiSelectPopupView.EVENT_CLICK_CONFIRM); + this.fireEvent( + SearchMultiSelectPopupView.EVENT_CLICK_CONFIRM + ); break; + default: + break; + } } - }); - }, + ); + } - isAllSelected: function () { + isAllSelected() { return this.loader.isAllSelected(); - }, + } - setStartValue: function (v) { + setStartValue(v) { this.loader.setStartValue(v); - }, + } - setValue: function (v) { + setValue(v) { this.popupView.setValue(v); - }, + } - getValue: function () { + getValue() { return this.popupView.getValue(); - }, + } - populate: function (items) { - this.popupView.populate.apply(this.popupView, arguments); - }, + populate(items) { + this.popupView.populate(...arguments); + } - resetHeight: function (h) { + resetHeight(h) { this.popupView.resetHeight(h); - }, + } - resetWidth: function (w) { + resetWidth(w) { this.popupView.resetWidth(w); - }, + } - setDirection: function (direction, position) { + setDirection(direction, position) { this.popupView.setDirection(direction, position); - }, -}); - -BI.SearchMultiSelectPopupView.EVENT_CHANGE = "EVENT_CHANGE"; -BI.SearchMultiSelectPopupView.EVENT_CLICK_CONFIRM = "EVENT_CLICK_CONFIRM"; -BI.SearchMultiSelectPopupView.EVENT_CLICK_CLEAR = "EVENT_CLICK_CLEAR"; - - -BI.shortcut("bi.search_multi_select_popup_view", BI.SearchMultiSelectPopupView); + } +} diff --git a/src/widget/searchmultitextvaluecombo/trigger/searcher.multitextvalue.js b/src/widget/searchmultitextvaluecombo/trigger/searcher.multitextvalue.js index 506532b3c..a59d7582d 100644 --- a/src/widget/searchmultitextvaluecombo/trigger/searcher.multitextvalue.js +++ b/src/widget/searchmultitextvaluecombo/trigger/searcher.multitextvalue.js @@ -1,175 +1,179 @@ -BI.SearchMultiSelectSearcher = BI.inherit(BI.Widget, { - - _defaultConfig: function () { - return BI.extend(BI.SearchMultiSelectSearcher.superclass._defaultConfig.apply(this, arguments), { +import { shortcut, Widget, extend, emptyFn, createWidget, isNotNull, Selection, size, each } from "@/core"; +import { Searcher } from "@/base"; +import { MultiSelectEditor, MultiSelectSearchPane } from "@/widget"; + +@shortcut() +export class SearchMultiSelectSearcher extends Widget { + static xtype = "bi.search_multi_select_searcher"; + + static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_START = "EVENT_START"; + static EVENT_STOP = "EVENT_STOP"; + static EVENT_PAUSE = "EVENT_PAUSE"; + static EVENT_SEARCHING = "EVENT_SEARCHING"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-multi-select-searcher", - itemsCreator: BI.emptyFn, + itemsCreator: emptyFn, el: {}, popup: {}, - valueFormatter: BI.emptyFn, + valueFormatter: emptyFn, adapter: null, - masker: {} + masker: {}, }); - }, + } - _init: function () { - BI.SearchMultiSelectSearcher.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 o = this.options; + this.editor = createWidget(o.el, { + type: MultiSelectEditor.xtype, height: o.height, text: o.text, tipType: o.tipType, - warningTitle: o.warningTitle + warningTitle: o.warningTitle, }); - 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, - keywordGetter: function () { - return self.editor.getValue(); - }, - itemsCreator: function (op, callback) { - var keyword = self.editor.getValue(); - op.keywords = [keyword]; - o.itemsCreator(op, callback); + popup: extend( + { + type: MultiSelectSearchPane.xtype, + valueFormatter: o.valueFormatter, + keywordGetter: () => this.editor.getValue(), + itemsCreator: (op, callback) => { + const keyword = this.editor.getValue(); + op.keywords = [keyword]; + o.itemsCreator(op, callback); + }, + value: o.value, }, - 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.SearchMultiSelectSearcher.EVENT_START); + this.searcher.on(Searcher.EVENT_START, () => { + this.fireEvent(SearchMultiSelectSearcher.EVENT_START); }); - this.searcher.on(BI.Searcher.EVENT_PAUSE, function () { - if (this.hasMatched()) { - - } - self.fireEvent(BI.SearchMultiSelectSearcher.EVENT_PAUSE); + this.searcher.on(Searcher.EVENT_PAUSE, () => { + this.fireEvent(SearchMultiSelectSearcher.EVENT_PAUSE); }); - this.searcher.on(BI.Searcher.EVENT_STOP, function () { - self.fireEvent(BI.SearchMultiSelectSearcher.EVENT_STOP); + this.searcher.on(Searcher.EVENT_STOP, () => { + this.fireEvent(SearchMultiSelectSearcher.EVENT_STOP); }); - this.searcher.on(BI.Searcher.EVENT_CHANGE, function () { - self.fireEvent(BI.SearchMultiSelectSearcher.EVENT_CHANGE, arguments); + this.searcher.on(Searcher.EVENT_CHANGE, () => { + this.fireEvent(SearchMultiSelectSearcher.EVENT_CHANGE, ...arguments); }); - this.searcher.on(BI.Searcher.EVENT_SEARCHING, function () { - var keywords = this.getKeywords(); - self.fireEvent(BI.SearchMultiSelectSearcher.EVENT_SEARCHING, keywords); + this.searcher.on(Searcher.EVENT_SEARCHING, () => { + const keywords = this.getKeywords(); + this.fireEvent(SearchMultiSelectSearcher.EVENT_SEARCHING, keywords); }); - if(BI.isNotNull(o.value)) { + if (isNotNull(o.value)) { this.setState(o.value); } - }, + } - 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 (obj) { - var o = this.options; - var ob = {}; + setState(obj) { + let state; + const o = this.options; + const ob = {}; ob.type = obj.type; ob.value = o.allValueGetter() || []; ob.assist = obj.assist; - if (ob.type === BI.Selection.All) { + if (ob.type === Selection.All) { if (ob.value.length === 0) { - this.editor.setState(BI.Selection.All); - } else if (BI.size(ob.assist) <= 20) { - var state = ""; - BI.each(ob.assist, function (i, v) { + this.editor.setState(Selection.All); + } else if (size(ob.assist) <= 20) { + state = ""; + each(ob.assist, (i, v) => { if (i === 0) { - state += "" + (o.valueFormatter(v + "") || v); + state += `${o.valueFormatter(`${v}`) || v}`; } else { - state += "," + (o.valueFormatter(v + "") || v); + state += `,${o.valueFormatter(`${v}`) || v}`; } }); this.editor.setState(state); } else { - this.editor.setState(BI.Selection.Multi); + this.editor.setState(Selection.Multi); } } else { if (ob.value.length === 0) { - this.editor.setState(BI.Selection.None); - } else if (BI.size(ob.value) <= 20) { - var state = ""; - BI.each(ob.value, function (i, v) { + this.editor.setState(Selection.None); + } else if (size(ob.value) <= 20) { + state = ""; + each(ob.value, (i, v) => { if (i === 0) { - state += "" + (o.valueFormatter(v + "") || v); + state += `${o.valueFormatter(`${v}`) || v}`; } else { - state += "," + (o.valueFormatter(v + "") || v); + state += `,${o.valueFormatter(`${v}`) || v}`; } }); this.editor.setState(state); } else { - this.editor.setState(BI.Selection.Multi); + this.editor.setState(Selection.Multi); } } - }, + } - setTipType: function (v) { + setTipType(v) { this.editor.setTipType(v); - }, + } - 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); } -}); - -BI.SearchMultiSelectSearcher.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; -BI.SearchMultiSelectSearcher.EVENT_CHANGE = "EVENT_CHANGE"; -BI.SearchMultiSelectSearcher.EVENT_START = "EVENT_START"; -BI.SearchMultiSelectSearcher.EVENT_STOP = "EVENT_STOP"; -BI.SearchMultiSelectSearcher.EVENT_PAUSE = "EVENT_PAUSE"; -BI.SearchMultiSelectSearcher.EVENT_SEARCHING = "EVENT_SEARCHING"; -BI.shortcut("bi.search_multi_select_searcher", BI.SearchMultiSelectSearcher); +} From 9335c4ef9387defb6a8badd793272365936b749a Mon Sep 17 00:00:00 2001 From: zsmj Date: Fri, 13 Jan 2023 15:38:14 +0800 Subject: [PATCH 4/6] update --- src/widget/multilayersingletree/index.js | 2 - .../selecttree/nodes/node.first.plus.js | 109 ------------------ src/widget/selecttree/nodes/node.last.plus.js | 109 ------------------ src/widget/selecttree/nodes/node.mid.plus.js | 109 ------------------ src/widget/selecttree/nodes/node.plus.js | 109 ------------------ 5 files changed, 438 deletions(-) delete mode 100644 src/widget/selecttree/nodes/node.first.plus.js delete mode 100644 src/widget/selecttree/nodes/node.last.plus.js delete mode 100644 src/widget/selecttree/nodes/node.mid.plus.js delete mode 100644 src/widget/selecttree/nodes/node.plus.js diff --git a/src/widget/multilayersingletree/index.js b/src/widget/multilayersingletree/index.js index 4098e74cc..d0f9e5497 100644 --- a/src/widget/multilayersingletree/index.js +++ b/src/widget/multilayersingletree/index.js @@ -3,5 +3,3 @@ export { MultiLayerSingleTreeInsertSearchPane } from "./multilayersingletree.ins export { MultiLayerSingleLevelTree } from "./multilayersingletree.leveltree"; export { MultiLayerSingleTreePopup } from "./multilayersingletree.popup"; export { MultiLayerSingleTreeTrigger } from "./multilayersingletree.trigger"; -export * from "./node"; -export * from "./treeitem"; diff --git a/src/widget/selecttree/nodes/node.first.plus.js b/src/widget/selecttree/nodes/node.first.plus.js deleted file mode 100644 index 484128e4d..000000000 --- a/src/widget/selecttree/nodes/node.first.plus.js +++ /dev/null @@ -1,109 +0,0 @@ -import { - shortcut, - extend, - createWidget, - Controller, - Events, - isNotNull, LogicFactory, Direction -} from "@/core"; -import { NodeButton, Label } from "@/base"; -import { FirstTreeNodeCheckbox } from "@/case"; - -@shortcut() -export class SelectTreeFirstPlusGroupNode extends NodeButton { - static xtype = "bi.select_tree_first_plus_group_node"; - - _defaultConfig() { - const conf = super._defaultConfig(...arguments); - - return extend(conf, { - baseCls: - `${conf.baseCls || "" - } bi-select-tree-first-plus-group-node bi-list-item-active`, - logic: { - dynamic: false, - }, - id: "", - pId: "", - readonly: true, - open: false, - height: 24, - }); - } - - _init() { - super._init(...arguments); - const self = this, - o = this.options; - this.checkbox = createWidget({ - type: FirstTreeNodeCheckbox.xtype, - stopPropagation: true, - iconHeight: o.height, - iconWidth: o.height, - }); - this.text = createWidget({ - type: Label.xtype, - textAlign: "left", - whiteSpace: "nowrap", - textHeight: o.height, - height: o.height, - hgap: o.hgap, - text: o.text, - value: o.value, - keyword: o.keyword, - py: o.py, - }); - this.checkbox.on(Controller.EVENT_CHANGE, function (type) { - if (type === Events.CLICK) { - if (this.isSelected()) { - self.triggerExpand(); - } else { - self.triggerCollapse(); - } - } - }); - const type = LogicFactory.createLogicTypeByDirection( - Direction.Left - ); - const items = LogicFactory.createLogicItemsByDirection( - Direction.Left, - { - width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, - el: this.checkbox, - }, - this.text - ); - createWidget( - extend( - { - element: this, - }, - LogicFactory.createLogic( - type, - extend(o.logic, { - items, - }) - ) - ) - ); - } - - isOnce() { - return true; - } - - doRedMark() { - this.text.doRedMark(...arguments); - } - - unRedMark() { - this.text.unRedMark(...arguments); - } - - setOpened(v) { - super.setOpened(...arguments); - if (isNotNull(this.checkbox)) { - this.checkbox.setSelected(v); - } - } -} diff --git a/src/widget/selecttree/nodes/node.last.plus.js b/src/widget/selecttree/nodes/node.last.plus.js deleted file mode 100644 index 572d66e55..000000000 --- a/src/widget/selecttree/nodes/node.last.plus.js +++ /dev/null @@ -1,109 +0,0 @@ -import { - shortcut, - extend, - createWidget, - Controller, - Events, - isNotNull, LogicFactory, Direction -} from "@/core"; -import { NodeButton, Label } from "@/base"; -import { LastTreeNodeCheckbox } from "@/case"; - -@shortcut() -export class SelectTreeLastPlusGroupNode extends NodeButton { - static xtype = "bi.select_tree_last_plus_group_node"; - - _defaultConfig() { - const conf = super._defaultConfig(...arguments); - - return extend(conf, { - baseCls: - `${conf.baseCls || "" - } bi-select-tree-last-plus-group-node bi-list-item-active`, - logic: { - dynamic: false, - }, - id: "", - pId: "", - readonly: true, - open: false, - height: 24, - }); - } - - _init() { - super._init(...arguments); - const self = this, - o = this.options; - this.checkbox = createWidget({ - type: LastTreeNodeCheckbox.xtype, - stopPropagation: true, - iconHeight: o.height, - iconWidth: o.height, - }); - this.text = createWidget({ - type: Label.xtype, - textAlign: "left", - whiteSpace: "nowrap", - textHeight: o.height, - height: o.height, - hgap: o.hgap, - text: o.text, - value: o.value, - keyword: o.keyword, - py: o.py, - }); - this.checkbox.on(Controller.EVENT_CHANGE, function (type) { - if (type === Events.CLICK) { - if (this.isSelected()) { - self.triggerExpand(); - } else { - self.triggerCollapse(); - } - } - }); - const type = LogicFactory.createLogicTypeByDirection( - Direction.Left - ); - const items = LogicFactory.createLogicItemsByDirection( - Direction.Left, - { - width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, - el: this.checkbox, - }, - this.text - ); - createWidget( - extend( - { - element: this, - }, - LogicFactory.createLogic( - type, - extend(o.logic, { - items, - }) - ) - ) - ); - } - - isOnce() { - return true; - } - - doRedMark() { - this.text.doRedMark(...arguments); - } - - unRedMark() { - this.text.unRedMark(...arguments); - } - - setOpened(v) { - super.setOpened(...arguments); - if (isNotNull(this.checkbox)) { - this.checkbox.setSelected(v); - } - } -} diff --git a/src/widget/selecttree/nodes/node.mid.plus.js b/src/widget/selecttree/nodes/node.mid.plus.js deleted file mode 100644 index 670533dd5..000000000 --- a/src/widget/selecttree/nodes/node.mid.plus.js +++ /dev/null @@ -1,109 +0,0 @@ -import { - shortcut, - extend, - createWidget, - Controller, - Events, - isNotNull, Direction, LogicFactory -} from "@/core"; -import { NodeButton, Label } from "@/base"; -import { MidTreeNodeCheckbox } from "@/case"; - -@shortcut() -export class SelectTreeMidPlusGroupNode extends NodeButton { - static xtype = "bi.select_tree_mid_plus_group_node"; - - _defaultConfig() { - const conf = super._defaultConfig(...arguments); - - return extend(conf, { - baseCls: - `${conf.baseCls || "" - } bi-select-tree-mid-plus-group-node bi-list-item-active`, - logic: { - dynamic: false, - }, - id: "", - pId: "", - readonly: true, - open: false, - height: 24, - }); - } - - _init() { - super._init(...arguments); - const self = this, - o = this.options; - this.checkbox = createWidget({ - type: MidTreeNodeCheckbox.xtype, - stopPropagation: true, - iconHeight: o.height, - iconWidth: o.height, - }); - this.text = createWidget({ - type: Label.xtype, - textAlign: "left", - whiteSpace: "nowrap", - textHeight: o.height, - height: o.height, - hgap: o.hgap, - text: o.text, - value: o.value, - keyword: o.keyword, - py: o.py, - }); - this.checkbox.on(Controller.EVENT_CHANGE, function (type) { - if (type === Events.CLICK) { - if (this.isSelected()) { - self.triggerExpand(); - } else { - self.triggerCollapse(); - } - } - }); - const type = LogicFactory.createLogicTypeByDirection( - Direction.Left - ); - const items = LogicFactory.createLogicItemsByDirection( - Direction.Left, - { - width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, - el: this.checkbox, - }, - this.text - ); - createWidget( - extend( - { - element: this, - }, - LogicFactory.createLogic( - type, - extend(o.logic, { - items, - }) - ) - ) - ); - } - - isOnce() { - return true; - } - - doRedMark() { - this.text.doRedMark(...arguments); - } - - unRedMark() { - this.text.unRedMark(...arguments); - } - - setOpened(v) { - super.setOpened(...arguments); - if (isNotNull(this.checkbox)) { - this.checkbox.setSelected(v); - } - } -} diff --git a/src/widget/selecttree/nodes/node.plus.js b/src/widget/selecttree/nodes/node.plus.js deleted file mode 100644 index e3e41de7f..000000000 --- a/src/widget/selecttree/nodes/node.plus.js +++ /dev/null @@ -1,109 +0,0 @@ -import { - shortcut, - extend, - createWidget, - Controller, - Events, - isNotNull, LogicFactory -} from "@/core"; -import { NodeButton, Label } from "@/base"; -import { TreeNodeCheckbox } from "@/case"; - -@shortcut() -export class SelectTreePlusGroupNode extends NodeButton { - static xtype = "bi.select_tree_plus_group_node"; - - _defaultConfig() { - const conf = super._defaultConfig(...arguments); - - return extend(conf, { - baseCls: - `${conf.baseCls || "" - } bi-select-tree-plus-group-node bi-list-item-active`, - logic: { - dynamic: false, - }, - id: "", - pId: "", - readonly: true, - open: false, - height: 24, - }); - } - - _init() { - super._init(...arguments); - const self = this, - o = this.options; - this.checkbox = createWidget({ - type: TreeNodeCheckbox.xtype, - stopPropagation: true, - iconHeight: o.height, - iconWidth: o.iconWrapperWidth || o.height, - }); - this.text = createWidget({ - type: Label.xtype, - textAlign: "left", - whiteSpace: "nowrap", - textHeight: o.height, - height: o.height, - hgap: o.hgap, - text: o.text, - value: o.value, - keyword: o.keyword, - py: o.py, - }); - this.checkbox.on(Controller.EVENT_CHANGE, function (type) { - if (type === Events.CLICK) { - if (this.isSelected()) { - self.triggerExpand(); - } else { - self.triggerCollapse(); - } - } - }); - const type = LogicFactory.createLogicTypeByDirection( - BI.Direction.Left - ); - const items = LogicFactory.createLogicItemsByDirection( - BI.Direction.Left, - { - width: 24, - el: this.checkbox, - }, - this.text - ); - createWidget( - extend( - { - element: this, - }, - LogicFactory.createLogic( - type, - extend(o.logic, { - items, - }) - ) - ) - ); - } - - isOnce() { - return true; - } - - doRedMark() { - this.text.doRedMark(...arguments); - } - - unRedMark() { - this.text.unRedMark(...arguments); - } - - setOpened(v) { - super.setOpened(...arguments); - if (isNotNull(this.checkbox)) { - this.checkbox.setSelected(v); - } - } -} From 6b225705fc7e0329aed15f74a349eec301de7f36 Mon Sep 17 00:00:00 2001 From: "Zhenfei.Li" Date: Fri, 13 Jan 2023 15:40:20 +0800 Subject: [PATCH 5/6] =?UTF-8?q?KERNEL-14116=20refactor:=20component/allval?= =?UTF-8?q?uechooser=E3=80=81allvaluemultitextvaluecombo=E3=80=81form?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../abstract.allvaluechooser.js | 125 +++++++------- .../allvaluechooser/combo.allvaluechooser.js | 92 +++++------ src/component/allvaluechooser/index.js | 3 + .../allvaluechooser/pane.allvaluechooser.js | 78 +++++---- .../allvalue.multitextvalue.combo.js | 82 ++++----- src/component/form/form.field.js | 155 ++++++++++-------- src/component/form/form.js | 105 ++++++------ src/component/form/index.js | 2 + src/component/index.js | 15 ++ 9 files changed, 350 insertions(+), 307 deletions(-) create mode 100644 src/component/allvaluechooser/index.js create mode 100644 src/component/form/index.js create mode 100644 src/component/index.js diff --git a/src/component/allvaluechooser/abstract.allvaluechooser.js b/src/component/allvaluechooser/abstract.allvaluechooser.js index c13d8a30f..1673d2866 100644 --- a/src/component/allvaluechooser/abstract.allvaluechooser.js +++ b/src/component/allvaluechooser/abstract.allvaluechooser.js @@ -1,61 +1,74 @@ -/** - * 简单的复选下拉框控件, 适用于数据量少的情况， 与valuechooser的区别是allvaluechooser setValue和getValue返回的是所有值 - * 封装了字段处理逻辑 - * - * Created by GUY on 2015/10/29. - * @class BI.AbstractAllValueChooser - * @extends BI.Widget - */ -BI.AbstractAllValueChooser = BI.inherit(BI.Widget, { +import { + shortcut, + Widget, + extend, + emptyFn, + isNotNull, + some, + isNotEmptyArray, + each, + Func, + uniq, + makeObject, + filter, + difference, + map, + Selection +} from "@/core"; +import { MultiSelectCombo } from "@/widget"; - _const: { - perPage: 100 - }, +@shortcut() +export class AbstractAllValueChooser extends Widget { + _const = { perPage: 100 }; - _defaultConfig: function () { - return BI.extend(BI.AbstractAllValueChooser.superclass._defaultConfig.apply(this, arguments), { + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { width: 200, height: 30, items: null, - itemsCreator: BI.emptyFn, - cache: true + itemsCreator: emptyFn, + cache: true, }); - }, + } - _valueFormatter: function (v) { - var text = v; + _valueFormatter(v) { + let text = v; if (this.options.valueFormatter) { return this.options.valueFormatter(v); } - if (BI.isNotNull(this.items)) { - BI.some(this.items, function (i, item) { + if (isNotNull(this.items)) { + some(this.items, (i, item) => { // 把value都换成字符串 // 需要考虑到value也可能是数字 - if (item.value === v || item.value + "" === v) { + if (item.value === v || `${item.value}` === v) { text = item.text; + return true; } }); } + return text; - }, + } - _getItemsByTimes: function (items, times) { - var res = []; - for (var i = (times - 1) * this._const.perPage; items[i] && i < times * this._const.perPage; i++) { + _getItemsByTimes(items, times) { + const res = []; + for (let i = (times - 1) * this._const.perPage; items[i] && i < times * this._const.perPage; i++) { res.push(items[i]); } + return res; - }, + } - _hasNextByTimes: function (items, times) { + _hasNextByTimes(items, times) { return times * this._const.perPage < items.length; - }, + } - _itemsCreator: function (options, callback) { - var self = this, o = this.options; + _itemsCreator(options, callback) { + const self = this, + o = this.options; if (!o.cache || !this.items) { - o.itemsCreator({}, function (items) { + o.itemsCreator({}, items => { self.items = items; call(items); }); @@ -64,54 +77,56 @@ BI.AbstractAllValueChooser = BI.inherit(BI.Widget, { } function call(items) { - var keywords = (options.keywords || []).slice(); + const keywords = (options.keywords || []).slice(); if (options.keyword) { keywords.push(options.keyword); } - var resultItems = items; - if (BI.isNotEmptyArray(keywords)) { + let resultItems = items; + if (isNotEmptyArray(keywords)) { resultItems = []; - BI.each(keywords, function (i, kw) { - var search = BI.Func.getSearchResult(items, kw); + each(keywords, (i, kw) => { + const search = Func.getSearchResult(items, kw); resultItems = resultItems.concat(search.match).concat(search.find); }); - resultItems = BI.uniq(resultItems); + resultItems = uniq(resultItems); } - if (options.selectedValues) {// 过滤 - var filter = BI.makeObject(options.selectedValues, true); - resultItems = BI.filter(resultItems, function (i, ob) { - return !filter[ob.value]; - }); + if (options.selectedValues) { + // 过滤 + const values = makeObject(options.selectedValues, true); + resultItems = filter(resultItems, (i, ob) => !values[ob.value]); } - if (options.type === BI.MultiSelectCombo.REQ_GET_ALL_DATA) { + if (options.type === MultiSelectCombo.REQ_GET_ALL_DATA) { callback({ - items: resultItems + items: resultItems, }); + return; } - if (options.type === BI.MultiSelectCombo.REQ_GET_DATA_LENGTH) { + if (options.type === MultiSelectCombo.REQ_GET_DATA_LENGTH) { callback({ count: resultItems.length }); + return; } callback({ items: self._getItemsByTimes(resultItems, options.times), - hasNext: self._hasNextByTimes(resultItems, options.times) + hasNext: self._hasNextByTimes(resultItems, options.times), }); } - }, + } - _assertValue: function (v) { + _assertValue(v) { v = v || {}; - var value = v; - if (BI.isNotNull(this.items)) { - var isAllSelect = BI.difference(BI.map(this.items, "value"), v.value).length === 0; + let value = v; + if (isNotNull(this.items)) { + const isAllSelect = difference(map(this.items, "value"), v.value).length === 0; if (isAllSelect) { value = { - type: BI.Selection.All, + type: Selection.All, value: [], }; } } + return value; - }, -}); + } +} diff --git a/src/component/allvaluechooser/combo.allvaluechooser.js b/src/component/allvaluechooser/combo.allvaluechooser.js index 11494b584..ed746ec3c 100644 --- a/src/component/allvaluechooser/combo.allvaluechooser.js +++ b/src/component/allvaluechooser/combo.allvaluechooser.js @@ -1,77 +1,77 @@ -/** - * 简单的复选下拉框控件, 适用于数据量少的情况， 与valuechooser的区别是allvaluechooser setValue和getValue返回的是所有值 - * 封装了字段处理逻辑 - * - * Created by GUY on 2015/10/29. - * @class BI.AllValueChooserCombo - * @extends BI.AbstractAllValueChooser - */ -BI.AllValueChooserCombo = BI.inherit(BI.AbstractAllValueChooser, { +import { shortcut, extend, emptyFn, isNotNull, createWidget, bind, Selection, difference, map } from "@/core"; +import { AbstractAllValueChooser } from "./abstract.allvaluechooser"; +import { MultiSelectCombo } from "@/widget"; - _defaultConfig: function () { - return BI.extend(BI.AllValueChooserCombo.superclass._defaultConfig.apply(this, arguments), { +@shortcut() +export class AllValueChooserCombo extends AbstractAllValueChooser { + static xtype = "bi.all_value_chooser_combo"; + + static EVENT_CONFIRM = "EVENT_CONFIRM"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-all-value-chooser-combo", width: 200, height: 24, items: null, - itemsCreator: BI.emptyFn, - cache: true + itemsCreator: emptyFn, + cache: true, }); - }, + } - _init: function () { - BI.AllValueChooserCombo.superclass._init.apply(this, arguments); - var self = this, o = this.options; - if (BI.isNotNull(o.items)) { + _init() { + super._init(...arguments); + const o = this.options; + if (isNotNull(o.items)) { this.items = o.items; } - this.combo = BI.createWidget({ - type: "bi.multi_select_combo", + this.combo = createWidget({ + type: MultiSelectCombo.xtype, simple: o.simple, text: o.text, element: this, - itemsCreator: BI.bind(this._itemsCreator, this), - valueFormatter: BI.bind(this._valueFormatter, this), + itemsCreator: bind(this._itemsCreator, this), + valueFormatter: bind(this._valueFormatter, this), width: o.width, height: o.height, value: this._assertValue({ - type: BI.Selection.Multi, - value: o.value || [] - }) + type: Selection.Multi, + value: o.value || [], + }), }); - this.combo.on(BI.MultiSelectCombo.EVENT_CONFIRM, function () { - self.fireEvent(BI.AllValueChooserCombo.EVENT_CONFIRM); + this.combo.on(MultiSelectCombo.EVENT_CONFIRM, () => { + this.fireEvent(AllValueChooserCombo.EVENT_CONFIRM); }); - }, + } - setValue: function (v) { - this.combo.setValue(this._assertValue({ - type: BI.Selection.Multi, - value: v || [] - })); - }, + setValue(v) { + this.combo.setValue( + this._assertValue({ + type: Selection.Multi, + value: v || [], + }) + ); + } - getValue: function () { + getValue() { return this.getAllValue(); - }, + } - getAllValue: function () { - var val = this.combo.getValue() || {}; - if (val.type === BI.Selection.Multi) { + getAllValue() { + const val = this.combo.getValue() || {}; + if (val.type === Selection.Multi) { return val.value || []; } - return BI.difference(BI.map(this.items, "value"), val.value || []); - }, + return difference(map(this.items, "value"), val.value || []); + } - populate: function (items) { + populate(items) { // 直接用combo的populate不会作用到AbstractValueChooser上 - if (BI.isNotNull(items)) { + if (isNotNull(items)) { this.items = items; } this.combo.populate(); } -}); -BI.AllValueChooserCombo.EVENT_CONFIRM = "EVENT_CONFIRM"; -BI.shortcut("bi.all_value_chooser_combo", BI.AllValueChooserCombo); +} diff --git a/src/component/allvaluechooser/index.js b/src/component/allvaluechooser/index.js new file mode 100644 index 000000000..d69b5f254 --- /dev/null +++ b/src/component/allvaluechooser/index.js @@ -0,0 +1,3 @@ +export { AbstractAllValueChooser } from "./abstract.allvaluechooser"; +export { AllValueChooserCombo } from "./combo.allvaluechooser"; +export { AllValueChooserPane } from "./pane.allvaluechooser"; diff --git a/src/component/allvaluechooser/pane.allvaluechooser.js b/src/component/allvaluechooser/pane.allvaluechooser.js index 6188f14ee..6ea534af7 100644 --- a/src/component/allvaluechooser/pane.allvaluechooser.js +++ b/src/component/allvaluechooser/pane.allvaluechooser.js @@ -1,69 +1,67 @@ -/** - * 简单的复选面板, 适用于数据量少的情况， 与valuechooser的区别是allvaluechooser setValue和getValue返回的是所有值 - * 封装了字段处理逻辑 - * - * Created by GUY on 2015/10/29. - * @class BI.AllValueChooserPane - * @extends BI.AbstractAllValueChooser - */ -BI.AllValueChooserPane = BI.inherit(BI.AbstractAllValueChooser, { +import { shortcut, extend, emptyFn, createWidget, bind, isNotNull, Selection, difference, map } from "@/core"; +import { AbstractAllValueChooser } from "./abstract.allvaluechooser"; +import { MultiSelectList } from "@/widget"; - _defaultConfig: function () { - return BI.extend(BI.AllValueChooserPane.superclass._defaultConfig.apply(this, arguments), { +@shortcut() +export class AllValueChooserPane extends AbstractAllValueChooser { + static xtype = "bi.all_value_chooser_pane"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + _defaultConfig() { + return extend(super._defaultConfig(...arguments), { baseCls: "bi-all-value-chooser-pane", width: 200, height: 30, items: null, - itemsCreator: BI.emptyFn, - cache: true + itemsCreator: emptyFn, + cache: true, }); - }, + } - _init: function () { - BI.AllValueChooserPane.superclass._init.apply(this, arguments); - var self = this, o = this.options; - this.list = BI.createWidget({ - type: "bi.multi_select_list", + _init() { + super._init(...arguments); + const o = this.options; + this.list = createWidget({ + type: MultiSelectList.xtype, element: this, - itemsCreator: BI.bind(this._itemsCreator, this), - valueFormatter: BI.bind(this._valueFormatter, this), + itemsCreator: bind(this._itemsCreator, this), + valueFormatter: bind(this._valueFormatter, this), width: o.width, - height: o.height + height: o.height, }); - this.list.on(BI.MultiSelectList.EVENT_CHANGE, function () { - self.fireEvent(BI.AllValueChooserPane.EVENT_CHANGE); + this.list.on(MultiSelectList.EVENT_CHANGE, () => { + this.fireEvent(AllValueChooserPane.EVENT_CHANGE); }); - if (BI.isNotNull(o.items)) { + if (isNotNull(o.items)) { this.items = o.items; this.list.populate(); } - }, + } - setValue: function (v) { + setValue(v) { this.list.setValue({ - type: BI.Selection.Multi, - value: v || [] + type: Selection.Multi, + value: v || [], }); - }, + } - getValue: function () { - var val = this.list.getValue() || {}; - if (val.type === BI.Selection.Multi) { + getValue() { + const val = this.list.getValue() || {}; + if (val.type === Selection.Multi) { return val.value || []; } - return BI.difference(BI.map(this.items, "value"), val.value || []); - }, + return difference(map(this.items, "value"), val.value || []); + } - populate: function (items) { + populate(items) { // 直接用combo的populate不会作用到AbstractValueChooser上 - if (BI.isNotNull(items)) { + if (isNotNull(items)) { this.items = items; } this.list.populate(); } -}); -BI.AllValueChooserPane.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.all_value_chooser_pane", BI.AllValueChooserPane); +} diff --git a/src/component/allvaluemultitextvaluecombo/allvalue.multitextvalue.combo.js b/src/component/allvaluemultitextvaluecombo/allvalue.multitextvalue.combo.js index 2ac30295b..44e94b4b2 100644 --- a/src/component/allvaluemultitextvaluecombo/allvalue.multitextvalue.combo.js +++ b/src/component/allvaluemultitextvaluecombo/allvalue.multitextvalue.combo.js @@ -1,66 +1,72 @@ -BI.AllValueMultiTextValueCombo = BI.inherit(BI.Widget, { +import { shortcut, Widget, Selection, each, contains } from "@/core"; +import { SearchMultiTextValueCombo } from "@/widget"; - props: { - baseCls: "bi-all-value-multi-text-value-combo", - width: 200, - height: 24, - items: [] - }, +@shortcut() +export class AllValueMultiTextValueCombo extends Widget { + static xtype = "bi.all_value_multi_text_value_combo"; - render: function () { - var self = this, o = this.options; - var value = this._digestValue(o.value); + props = { baseCls: "bi-all-value-multi-text-value-combo", width: 200, height: 24, items: [] }; + + static EVENT_CONFIRM = "EVENT_CONFIRM"; + + render() { + const self = this, + o = this.options; + const value = this._digestValue(o.value); + return { type: "bi.search_multi_text_value_combo", simple: o.simple, text: o.text, height: o.height, items: o.items, - value: value, + value, numOfPage: 100, valueFormatter: o.valueFormatter, warningTitle: o.warningTitle, - listeners: [{ - eventName: BI.SearchMultiTextValueCombo.EVENT_CONFIRM, - action: function () { - self.fireEvent(BI.AllValueMultiTextValueCombo.EVENT_CONFIRM); + listeners: [ + { + eventName: SearchMultiTextValueCombo.EVENT_CONFIRM, + action () { + self.fireEvent(AllValueMultiTextValueCombo.EVENT_CONFIRM); + }, } - }], - ref: function () { + ], + ref () { self.combo = this; - } + }, }; - }, + } - setValue: function (v) { - var value = this._digestValue(v); + setValue(v) { + const value = this._digestValue(v); this.combo.setValue(value); - }, + } - getValue: function () { - var obj = this.combo.getValue() || {}; + getValue() { + const obj = this.combo.getValue() || {}; obj.value = obj.value || []; - if(obj.type === BI.Selection.All) { - var values = []; - BI.each(this.options.items, function (idx, item) { - !BI.contains(obj.value, item.value) && values.push(item.value); + if (obj.type === Selection.All) { + const values = []; + each(this.options.items, (idx, item) => { + !contains(obj.value, item.value) && values.push(item.value); }); + return values; } + return obj.value || []; - }, + } - populate: function (items) { + populate(items) { this.options.items = items; - this.combo.populate.apply(this.combo, arguments); - }, + this.combo.populate(...arguments); + } - _digestValue: function (v) { + _digestValue(v) { return { - type: BI.Selection.Multi, - value: v || [] + type: Selection.Multi, + value: v || [], }; } -}); -BI.AllValueMultiTextValueCombo.EVENT_CONFIRM = "EVENT_CONFIRM"; -BI.shortcut("bi.all_value_multi_text_value_combo", BI.AllValueMultiTextValueCombo); +} diff --git a/src/component/form/form.field.js b/src/component/form/form.field.js index 0b67041b8..4bd064913 100644 --- a/src/component/form/form.field.js +++ b/src/component/form/form.field.js @@ -1,98 +1,111 @@ -/** - * @author windy - * @version 2.0 - * Created by windy on 2022/1/11 - */ - BI.FormField = BI.inherit(BI.Widget, { - props: { +import { shortcut, Widget, extend, concat, isKey, VerticalAlign } from "@/core"; + +@shortcut() +export class FormField extends Widget { + static xtype = "bi.form_field"; + + props = { baseCls: "bi-form-field", label: "", el: {}, headerCls: "", labelAlign: "right", // 文字默认右对齐 - validate: function () { + validate () { return true; - } // 默认返回true - }, + }, // 默认返回true + } - render: function () { - var self = this, o = this.options; + render () { + const self = this, + o = this.options; - var field = { + const field = { type: "bi.absolute", - items: [{ - el: BI.extend({}, o.el, { - ref: function (_ref) { - self.field = _ref; - o.el.ref && o.el.ref.call(this, _ref); - }, - height: o.el.height || 28, - listeners: BI.concat(o.el.listeners, [{ - eventName: "EVENT_CHANGE", - action: function () { - self.fireEvent("EVENT_CHANGE"); - } - }, { - eventName: "EVENT_CONFIRM", - action: function () { - self.fireEvent("EVENT_CONFIRM"); - } - }]) - }), - left: 0, - bottom: 0, - right: 0, - top: 0 - }, { - el: { - type: "bi.label", - cls: "error-tip bi-error", - ref: function (_ref) { - self.error = _ref; - }, - invisible: true + items: [ + { + el: extend({}, o.el, { + ref (_ref) { + self.field = _ref; + o.el.ref && o.el.ref.call(this, _ref); + }, + height: o.el.height || 28, + listeners: concat(o.el.listeners, [ + { + eventName: "EVENT_CHANGE", + action () { + self.fireEvent("EVENT_CHANGE"); + }, + }, + { + eventName: "EVENT_CONFIRM", + action () { + self.fireEvent("EVENT_CONFIRM"); + }, + } + ]), + }), + left: 0, + bottom: 0, + right: 0, + top: 0, }, - bottom: -20, - left: 0, - right: 0, - height: 20 - }] + { + el: { + type: "bi.label", + cls: "error-tip bi-error", + ref (_ref) { + self.error = _ref; + }, + invisible: true, + }, + bottom: -20, + left: 0, + right: 0, + height: 20, + } + ], }; return { type: "bi.vertical_adapt", columnSize: ["auto", "fill"], - verticalAlign: BI.VerticalAlign.Stretch, - items: BI.isKey(o.label) ? [{ - el: { - type: "bi.label", - textAlign: o.labelAlign, - text: o.label, - width: o.labelWidth, - cls: o.headerCls, - rgap: 20 // 表单文字与右侧输入间距均为20px - } - }, field] : [field] + verticalAlign: VerticalAlign.Stretch, + items: isKey(o.label) + ? [ + { + el: { + type: "bi.label", + textAlign: o.labelAlign, + text: o.label, + width: o.labelWidth, + cls: o.headerCls, + rgap: 20, // 表单文字与右侧输入间距均为20px + }, + }, + field + ] + : [field], }; - }, + } - getValue: function () { + getValue () { return this.field.getValue(); - }, + } - validate: function () { - var isValid = this.validateWithNoTip(); - !isValid && this.error.setText(this.options.tip(this.field.getValue(), this.field)); + validate () { + const isValid = this.validateWithNoTip(); + !isValid && + this.error.setText( + this.options.tip(this.field.getValue(), this.field) + ); this.error.setVisible(!isValid); this.field.element[isValid ? "removeClass" : "addClass"]("bi-error"); return isValid; - }, + } - validateWithNoTip: function () { + validateWithNoTip () { return this.options.validate(this.field.getValue(), this.field); } -}); - -BI.shortcut("bi.form_field", BI.FormField); +} diff --git a/src/component/form/form.js b/src/component/form/form.js index de8caeaea..d79714569 100644 --- a/src/component/form/form.js +++ b/src/component/form/form.js @@ -1,45 +1,39 @@ -/** - * @author windy - * @version 2.0 - * Created by windy on 2022/1/11 - */ - BI.Form = BI.inherit(BI.Widget, { +import { shortcut, Widget, map, some, each } from "@/core"; +import { ButtonGroup } from "@/base"; - props: { +@shortcut() +export class Form extends Widget { + static xtype = "bi.custom_form"; + + props = { baseCls: "bi-form", labelAlign: "right", - layout: { - type: "bi.vertical", - vgap: 20 - }, - items: [{ - validate: BI.emptyFn, - tip: BI.emptyFn, - label: "", - el: {} - }], + layout: { type: "bi.vertical", vgap: 20 }, + items: [{ label: "", el: {} }], labelWidth: "", - headerCls: "", // 左侧文字样式 - }, + headerCls: "", + }; + + static EVENT_CHANGE = "EVENT_CHANGE"; - render: function () { - var self = this, o = this.options; + render() { + const o = this.options; return { - type: "bi.button_group", + type: ButtonGroup.xtype, items: this._createItems(), layouts: [o.layout], - ref: function (ref) { - self.group = ref; - } + ref: _ref => { + this.group = _ref; + }, }; - }, + } - _createItems: function () { - var self = this; - var o = this.options; + _createItems() { + const self = this; + const o = this.options; - return BI.map(o.items, function (idx, item) { + return map(o.items, (idx, item) => { return { type: "bi.form_field", height: item.el.height || 28, @@ -50,46 +44,43 @@ label: item.label, tip: item.tip, validate: item.validate, - listeners: [{ - eventName: "EVENT_CHANGE", - action: function () { - self.fireEvent(BI.Form.EVENT_CHANGE, this.validate()); + listeners: [ + { + eventName: "EVENT_CHANGE", + action () { + self.fireEvent(Form.EVENT_CHANGE, this.validate()); + }, } - }] + ], }; }); - }, + } - isAllValid: function () { - return !BI.some(this.validateWithNoTip(), function (idx, v) { - return !v; - }); - }, + isAllValid() { + return !some(this.validateWithNoTip(), (idx, v) => !v); + } - validateWithNoTip: function () { - var validInfo = []; - BI.each(this.group.getAllButtons(), function (idx, button) { + validateWithNoTip() { + const validInfo = []; + each(this.group.getAllButtons(), (idx, button) => { validInfo.push(button.validateWithNoTip()); }); return validInfo; - }, + } - validate: function () { - var validInfo = []; - BI.each(this.group.getAllButtons(), function (idx, button) { + validate() { + const validInfo = []; + each(this.group.getAllButtons(), (idx, button) => { validInfo.push(button.validate()); }); return validInfo; - }, - - getValue: function () { - return !this.isAllValid() ? null : BI.map(this.group.getAllButtons(), function (idx, button) { - return button.getValue(); - }); } -}); -BI.Form.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.custom_form", BI.Form); + getValue() { + return !this.isAllValid() + ? null + : map(this.group.getAllButtons(), (idx, button) => button.getValue()); + } +} diff --git a/src/component/form/index.js b/src/component/form/index.js new file mode 100644 index 000000000..c2ffb7651 --- /dev/null +++ b/src/component/form/index.js @@ -0,0 +1,2 @@ +export { Form } from "./form"; +export { FormField } from "./form.field"; diff --git a/src/component/index.js b/src/component/index.js new file mode 100644 index 000000000..c6978e185 --- /dev/null +++ b/src/component/index.js @@ -0,0 +1,15 @@ +import * as allvaluechooser from "./allvaluechooser"; +import * as form from "./form"; +import { AllValueMultiTextValueCombo } from "./allvaluemultitextvaluecombo/allvalue.multitextvalue.combo"; + +Object.assign(BI, { + ...allvaluechooser, + ...form, + AllValueMultiTextValueCombo, +}); + +export * from "./allvaluechooser"; +export * from "./form"; +export { + AllValueMultiTextValueCombo +}; From 176b402e0ba76e43385dd5060573bd466fceaef5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joker=2EWang-=E7=8E=8B=E9=A1=BA?= Date: Fri, 13 Jan 2023 16:10:30 +0800 Subject: [PATCH 6/6] =?UTF-8?q?KERNEL-14100=20refactor:=20widget/yearquart?= =?UTF-8?q?er=E3=80=81yearquarterinterval=20es6=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/widget/index.js | 9 +- .../yearquarter/card.dynamic.yearquarter.js | 293 ++++++----- .../yearquarter/card.static.yearquarter.js | 260 +++++----- src/widget/yearquarter/combo.yearquarter.js | 345 +++++++------ src/widget/yearquarter/index.js | 6 + src/widget/yearquarter/popup.yearquarter.js | 437 ++++++++++------- src/widget/yearquarter/trigger.yearquarter.js | 461 +++++++++++------- .../yearquarterinterval.js | 315 +++++++----- 8 files changed, 1255 insertions(+), 871 deletions(-) create mode 100644 src/widget/yearquarter/index.js diff --git a/src/widget/index.js b/src/widget/index.js index acd1aaf9d..82404bf6a 100644 --- a/src/widget/index.js +++ b/src/widget/index.js @@ -10,6 +10,7 @@ import * as editor from "./editor"; import * as downList from "./downlist"; import * as singleSliderItem from "./singleslider"; import * as intervalSliderItem from "./intervalslider"; +import * as yearQuarter from "./yearquarter"; import { SelectTreeCombo } from "./selecttree/selecttree.combo"; import { SingleTreeCombo } from "./singletree/singletree.combo"; import { MultiTreeCombo } from "./multitree/multi.tree.combo"; @@ -17,6 +18,7 @@ import { MultiTreeInsertCombo } from "./multitree/multi.tree.insert.combo"; import { MultiTreeListCombo } from "./multitree/multi.tree.list.combo"; import { NumberEditor } from "./numbereditor/number.editor"; import { NumberInterval } from "./numberinterval/numberinterval"; +import { YearQuarterInterval } from "./yearquarterinterval/yearquarterinterval"; import * as multiselect from "./multiselect"; import * as multiselectlist from "./multiselectlist"; import * as multilayerselectree from "./multilayerselecttree"; @@ -41,6 +43,7 @@ Object.assign(BI, { ...downList, ...singleSliderItem, ...intervalSliderItem, + ...yearQuarter, SelectTreeCombo, SingleTreeCombo, MultiTreeCombo, @@ -49,6 +52,7 @@ Object.assign(BI, { NumberEditor, NumberInterval, YearInterval, + YearQuarterInterval, ...multiselect, ...multiselectlist, ...multilayerselectree, @@ -75,7 +79,7 @@ export * from "./multilayersingletree"; export * from "./multilayerselecttree"; export * from "./singleselect"; export * from "./multilayerdownlist"; -export * from "./multilayersingletree"; +export * from "./yearquarter"; export { Collapse, @@ -86,5 +90,6 @@ export { MultiTreeCombo, MultiTreeInsertCombo, MultiTreeListCombo, - YearInterval + YearInterval, + YearQuarterInterval }; diff --git a/src/widget/yearquarter/card.dynamic.yearquarter.js b/src/widget/yearquarter/card.dynamic.yearquarter.js index 9e66e5202..667d7f8c3 100644 --- a/src/widget/yearquarter/card.dynamic.yearquarter.js +++ b/src/widget/yearquarter/card.dynamic.yearquarter.js @@ -1,166 +1,213 @@ -/** - * 年季度展示面板 - * - * Created by GUY on 2015/9/2. - * @class BI.YearCard - * @extends BI.Trigger - */ -BI.DynamicYearQuarterCard = BI.inherit(BI.Widget, { - - props: { - baseCls: "bi-year-quarter-card" - }, - - render: function () { - var self = this; +import { + shortcut, + Widget, + i18nText, + bind, + VerticalLayout, + parseDateTime, + extend, + checkDateVoid, + isNotEmptyString, + getQuarter +} from "@/core"; +import { DynamicDateCard, DynamicDateParamItem, DynamicDateHelper } from "../dynamicdate"; +import { Label, Bubbles } from "@/base"; + +@shortcut() +export class DynamicYearQuarterCard extends Widget { + static xtype = "bi.dynamic_year_quarter_card"; + + props = { baseCls: "bi-year-quarter-card" }; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + render() { return { - type: "bi.vertical", - items: [{ - type: "bi.label", - text: BI.i18nText("BI-Multi_Date_Relative_Current_Time"), - textAlign: "left", - height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, - }, { - type: "bi.vertical", - ref: function (_ref) { - self.wrapper = _ref; + type: VerticalLayout.xtype, + items: [ + { + type: Label.xtype, + text: i18nText("BI-Multi_Date_Relative_Current_Time"), + textAlign: "left", + height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, }, - items: [{ - el: { - type: "bi.dynamic_date_param_item", - validationChecker: BI.bind(self._checkDate, self), - ref: function () { - self.year = this; - }, - listeners: [{ - eventName: "EVENT_CHANGE", - action: function () { - self.fireEvent("EVENT_CHANGE"); - } - }, { - eventName: "EVENT_INPUT_CHANGE", - action: function () { - BI.Bubbles.hide("dynamic-year-quarter-error"); - } - }] - }, - bgap: 10 - }, { - type: "bi.dynamic_date_param_item", - dateType: BI.DynamicDateCard.TYPE.QUARTER, - ref: function () { - self.quarter = this; + { + type: VerticalLayout.xtype, + ref: _ref => { + this.wrapper = _ref; }, - listeners: [{ - eventName: "EVENT_CHANGE", - action: function () { - self.fireEvent("EVENT_CHANGE"); - } - }, { - eventName: "EVENT_INPUT_CHANGE", - action: function () { - BI.Bubbles.hide("dynamic-year-quarter-error"); + items: [ + { + el: { + type: DynamicDateParamItem.xtype, + validationChecker: bind(this._checkDate, this), + ref: _ref => { + this.year = _ref; + }, + listeners: [ + { + eventName: "EVENT_CHANGE", + action: () => { + this.fireEvent("EVENT_CHANGE"); + }, + }, + { + eventName: "EVENT_INPUT_CHANGE", + action: () => { + Bubbles.hide( + "dynamic-year-quarter-error" + ); + }, + } + ], + }, + bgap: 10, + }, + { + type: DynamicDateParamItem.xtype, + dateType: DynamicDateCard.TYPE.QUARTER, + ref: _ref => { + this.quarter = _ref; + }, + listeners: [ + { + eventName: "EVENT_CHANGE", + action: () => { + this.fireEvent("EVENT_CHANGE"); + }, + }, + { + eventName: "EVENT_INPUT_CHANGE", + action: () => { + Bubbles.hide( + "dynamic-year-quarter-error" + ); + }, + } + ], } - }] - }] - }], + ], + } + ], vgap: 10, - hgap: 10 + hgap: 10, }; - }, + } - _getErrorText: function () { - var o = this.options; - var start = BI.parseDateTime(o.min, "%Y-%X-%d"); - var end = BI.parseDateTime(o.max, "%Y-%X-%d"); - return BI.i18nText("BI-Basic_Year_Quarter_Range_Error", + _getErrorText() { + const o = this.options; + const start = parseDateTime(o.min, "%Y-%X-%d"); + const end = parseDateTime(o.max, "%Y-%X-%d"); + + return i18nText( + "BI-Basic_Year_Quarter_Range_Error", start.getFullYear(), - BI.getQuarter(start), + getQuarter(start), end.getFullYear(), - BI.getQuarter(end) + getQuarter(end) ); - }, + } - _checkDate: function (obj) { - var o = this.options; - var date = BI.DynamicDateHelper.getCalculation(BI.extend(this._getValue(), this._digestDateTypeValue(obj))); + _checkDate(obj) { + const o = this.options; + const date = DynamicDateHelper.getCalculation( + extend(this._getValue(), this._digestDateTypeValue(obj)) + ); - return !BI.checkDateVoid(date.getFullYear(), date.getMonth() + 1, date.getDate(), o.min, o.max)[0]; - }, + return !checkDateVoid( + date.getFullYear(), + date.getMonth() + 1, + date.getDate(), + o.min, + o.max + )[0]; + } - _digestDateTypeValue: function (value) { - var valueMap = {}; + _digestDateTypeValue(value) { + const valueMap = {}; switch (value.dateType) { - case BI.DynamicDateCard.TYPE.YEAR: - valueMap.year = (value.offset === 0 ? -value.value : +value.value); - break; - case BI.DynamicDateCard.TYPE.QUARTER: - valueMap.quarter = (value.offset === 0 ? -value.value : +value.value); - break; - default: - break; + case DynamicDateCard.TYPE.YEAR: + valueMap.year = + value.offset === 0 ? -value.value : +value.value; + break; + case DynamicDateCard.TYPE.QUARTER: + valueMap.quarter = + value.offset === 0 ? -value.value : +value.value; + break; + default: + break; } + return valueMap; - }, + } - _createValue: function (type, v) { + _createValue(type, v) { return { dateType: type, value: Math.abs(v), - offset: v > 0 ? 1 : 0 + offset: v > 0 ? 1 : 0, }; - }, + } - setMinDate: function(minDate) { - if (BI.isNotEmptyString(this.options.min)) { + setMinDate(minDate) { + if (isNotEmptyString(this.options.min)) { this.options.min = minDate; } - }, + } - setMaxDate: function (maxDate) { - if (BI.isNotEmptyString(this.options.max)) { + setMaxDate(maxDate) { + if (isNotEmptyString(this.options.max)) { this.options.max = maxDate; } - }, + } - setValue: function (v) { - v = v || {year: 0, quarter: 0}; - this.year.setValue(this._createValue(BI.DynamicDateCard.TYPE.YEAR, v.year)); - this.quarter.setValue(this._createValue(BI.DynamicDateCard.TYPE.QUARTER, v.quarter)); - }, + setValue(v) { + v = v || { year: 0, quarter: 0 }; + this.year.setValue( + this._createValue(DynamicDateCard.TYPE.YEAR, v.year) + ); + this.quarter.setValue( + this._createValue(DynamicDateCard.TYPE.QUARTER, v.quarter) + ); + } - _getValue: function () { - var year = this.year.getValue(); - var quarter = this.quarter.getValue(); + _getValue() { + const year = this.year.getValue(); + const quarter = this.quarter.getValue(); + return { - year: (year.offset === 0 ? -year.value : year.value), - quarter: (quarter.offset === 0 ? -quarter.value : quarter.value) + year: year.offset === 0 ? -year.value : year.value, + quarter: quarter.offset === 0 ? -quarter.value : quarter.value, }; - }, + } - getInputValue: function () { + getInputValue() { return this._getValue(); - }, + } - getValue: function () { + getValue() { return this.checkValidation() ? this._getValue() : {}; - }, + } - checkValidation: function (show) { - var errorText; - var yearInvalid = !this.year.checkValidation(); - var quarterInvalid = !this.quarter.checkValidation(); - var invalid = yearInvalid || quarterInvalid; + checkValidation(show) { + let errorText; + const yearInvalid = !this.year.checkValidation(); + const quarterInvalid = !this.quarter.checkValidation(); + let invalid = yearInvalid || quarterInvalid; if (invalid) { - errorText = BI.i18nText("BI-Please_Input_Natural_Number"); + errorText = i18nText("BI-Please_Input_Natural_Number"); } else { invalid = !this._checkDate(this._getValue()); errorText = this._getErrorText(); } - invalid && show && BI.Bubbles.show("dynamic-year-quarter-error", errorText, this.wrapper); + invalid && + show && + Bubbles.show( + "dynamic-year-quarter-error", + errorText, + this.wrapper + ); return !invalid; - }, -}); -BI.DynamicYearQuarterCard.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.dynamic_year_quarter_card", BI.DynamicYearQuarterCard); \ No newline at end of file + } +} diff --git a/src/widget/yearquarter/card.static.yearquarter.js b/src/widget/yearquarter/card.static.yearquarter.js index cf54c6fcf..811b430e4 100644 --- a/src/widget/yearquarter/card.static.yearquarter.js +++ b/src/widget/yearquarter/card.static.yearquarter.js @@ -1,152 +1,190 @@ -BI.StaticYearQuarterCard = BI.inherit(BI.Widget, { +import { + shortcut, + Widget, + map, + extend, + VerticalLayout, + parseDateTime, + parseInt, + each, + checkDateVoid, + getDate, + getQuarterName, + getQuarter +} from "@/core"; +import { TextItem, ButtonGroup } from "@/base"; +import { YearPicker } from "../date/calendar"; - props: { - baseCls: "bi-static-year-quarter-card", - behaviors: {} - }, +@shortcut() +export class StaticYearQuarterCard extends Widget { + static xtype = "bi.static_year_quarter_card"; - _createQuarter: function () { - var self = this; - var items = [{ - text: BI.getQuarterName(1), - value: 1 - }, { - text: BI.getQuarterName(2), - value: 2 - }, { - text: BI.getQuarterName(3), - value: 3 - }, { - text: BI.getQuarterName(4), - value: 4 - }]; - return BI.map(items, function (j, item) { - return BI.extend(item, { - type: "bi.text_item", - cls: "bi-border-radius bi-list-item-select", - textAlign: "center", - whiteSpace: "nowrap", - once: false, - forceSelected: true, - height: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, - ref: function (_ref) { - self.quarterMap[j + 1] = _ref; - } - }); - }); - }, + props = { baseCls: "bi-static-year-quarter-card", behaviors: {} }; + + static EVENT_CHANGE = "EVENT_CHANGE"; + + _createQuarter() { + const items = [ + { + text: getQuarterName(1), + value: 1, + }, + { + text: getQuarterName(2), + value: 2, + }, + { + text: getQuarterName(3), + value: 3, + }, + { + text: getQuarterName(4), + value: 4, + } + ]; + + return map(items, (j, item) => extend(item, { + type: TextItem.xtype, + cls: "bi-border-radius bi-list-item-select", + textAlign: "center", + whiteSpace: "nowrap", + once: false, + forceSelected: true, + height: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, + ref: _ref => { + this.quarterMap[j + 1] = _ref; + }, + })); + } - render: function () { - var self = this, o = this.options; + render() { + const o = this.options; this.quarterMap = {}; + return { - type: "bi.vertical", - items: [{ - type: "bi.year_picker", - cls: "bi-split-bottom", - ref: function () { - self.yearPicker = this; - }, - min: o.min, - max: o.max, - behaviors: o.behaviors, - height: 30, - listeners: [{ - eventName: BI.YearPicker.EVENT_CHANGE, - action: function () { - var value = this.getValue(); - self._checkQuarterStatus(value); - self.setValue({ - year: value, - quarter: self.selectedQuarter - }); - } - }] - }, { - el: { - type: "bi.button_group", - behaviors: o.behaviors, - ref: function () { - self.quarter = this; + type: VerticalLayout.xtype, + items: [ + { + type: YearPicker.xtype, + cls: "bi-split-bottom", + ref: _ref => { + this.yearPicker = _ref; }, - items: this._createQuarter(), - layouts: [{ - type: "bi.vertical", - vgap: 10, - hgap: 12, - }], - value: o.value, - listeners: [{ - eventName: BI.ButtonGroup.EVENT_CHANGE, - action: function () { - self.selectedYear = self.yearPicker.getValue(); - self.selectedQuarter = this.getValue()[0]; - self.fireEvent(BI.StaticYearQuarterCard.EVENT_CHANGE); + min: o.min, + max: o.max, + behaviors: o.behaviors, + height: 30, + listeners: [ + { + eventName: YearPicker.EVENT_CHANGE, + action: () => { + const value = this.yearPicker.getValue(); + this._checkQuarterStatus(value); + this.setValue({ + year: value, + quarter: this.selectedQuarter, + }); + }, } - }] + ], }, - vgap: 5 - }] + { + el: { + type: ButtonGroup.xtype, + behaviors: o.behaviors, + ref: _ref => { + this.quarter = _ref; + }, + items: this._createQuarter(), + layouts: [ + { + type: VerticalLayout.xtype, + vgap: 10, + hgap: 12, + } + ], + value: o.value, + listeners: [ + { + eventName: ButtonGroup.EVENT_CHANGE, + action: () => { + this.selectedYear = + this.yearPicker.getValue(); + this.selectedQuarter = this.quarter.getValue()[0]; + this.fireEvent( + StaticYearQuarterCard.EVENT_CHANGE + ); + }, + } + ], + }, + vgap: 5, + } + ], }; - }, + } - _checkQuarterStatus: function (year) { - var o = this.options; - var minDate = BI.parseDateTime(o.min, "%Y-%X-%d"), maxDate = BI.parseDateTime(o.max, "%Y-%X-%d"); - var minYear = minDate.getFullYear(), maxYear = maxDate.getFullYear(); - var minQuarter = 1; var maxQuarter = 4; - minYear === year && (minQuarter = BI.parseInt(BI.getQuarter(minDate))); - maxYear === year && (maxQuarter = BI.parseInt(BI.getQuarter(maxDate))); - var yearInvalid = year < minYear || year > maxYear; - BI.each(this.quarterMap, function (quarter, obj) { - var quarterInvalid = quarter < minQuarter || quarter > maxQuarter; + _checkQuarterStatus(year) { + const o = this.options; + const minDate = parseDateTime(o.min, "%Y-%X-%d"), + maxDate = parseDateTime(o.max, "%Y-%X-%d"); + const minYear = minDate.getFullYear(), + maxYear = maxDate.getFullYear(); + let minQuarter = 1; + let maxQuarter = 4; + minYear === year && (minQuarter = parseInt(getQuarter(minDate))); + maxYear === year && (maxQuarter = parseInt(getQuarter(maxDate))); + const yearInvalid = year < minYear || year > maxYear; + each(this.quarterMap, (quarter, obj) => { + const quarterInvalid = quarter < minQuarter || quarter > maxQuarter; obj.setEnable(!yearInvalid && !quarterInvalid); }); - }, + } - setMinDate: function (minDate) { + setMinDate(minDate) { if (this.options.min !== minDate) { this.options.min = minDate; this.yearPicker.setMinDate(minDate); this._checkQuarterStatus(this.selectedYear); } - }, + } - setMaxDate: function (maxDate) { + setMaxDate(maxDate) { if (this.options.max !== maxDate) { this.options.max = maxDate; this.yearPicker.setMaxDate(maxDate); this._checkQuarterStatus(this.selectedYear); } - }, - + } - getValue: function () { + getValue() { return { year: this.selectedYear, - quarter: this.selectedQuarter + quarter: this.selectedQuarter, }; - }, + } - setValue: function (obj) { - var o = this.options; - var newObj = {}; + setValue(obj) { + const o = this.options; + const newObj = {}; newObj.year = obj.year || 0; newObj.quarter = obj.quarter || 0; - if (newObj.quarter === 0 || newObj.year === 0 || BI.checkDateVoid(newObj.year, newObj.quarter, 1, o.min, o.max)[0]) { - var year = newObj.year || BI.getDate().getFullYear(); + if ( + newObj.quarter === 0 || + newObj.year === 0 || + checkDateVoid(newObj.year, newObj.quarter, 1, o.min, o.max)[0] + ) { + const year = newObj.year || getDate().getFullYear(); this.selectedYear = year; this.selectedQuarter = ""; this.yearPicker.setValue(year); this.quarter.setValue(); } else { - this.selectedYear = BI.parseInt(newObj.year); - this.selectedQuarter = BI.parseInt(newObj.quarter); + this.selectedYear = parseInt(newObj.year); + this.selectedQuarter = parseInt(newObj.quarter); this.yearPicker.setValue(this.selectedYear); this.quarter.setValue(this.selectedQuarter); } this._checkQuarterStatus(this.selectedYear); } -}); -BI.StaticYearQuarterCard.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.static_year_quarter_card", BI.StaticYearQuarterCard); +} diff --git a/src/widget/yearquarter/combo.yearquarter.js b/src/widget/yearquarter/combo.yearquarter.js index b7f04c4bd..7ce72d6fb 100644 --- a/src/widget/yearquarter/combo.yearquarter.js +++ b/src/widget/yearquarter/combo.yearquarter.js @@ -1,72 +1,102 @@ -BI.DynamicYearQuarterCombo = BI.inherit(BI.Widget, { +import { + shortcut, + Widget, + createWidget, + toPix, + isEqual, + isNotEmptyString, + getDate, + AbsoluteLayout, + HorizontalFillLayout, + isNotNull, + isNotEmptyObject, + checkDateVoid, + getQuarter +} from "@/core"; +import { DynamicYearQuarterTrigger } from "./trigger.yearquarter"; +// TODO:需要等待yearmonth完成才能将BI.DynamicYearMonthTrigger替换 +// import { DynamicYearMonthCombo } from "../yearmonth/combo.yearmonth"; +import { DynamicYearQuarterPopup } from "./popup.yearquarter"; +import { DynamicDateCombo } from "../dynamicdate"; +import { Combo, IconButton } from "@/base"; - _consts: { - iconWidth: 24 - }, - props: { +@shortcut() +export class DynamicYearQuarterCombo extends Widget { + static xtype = "bi.dynamic_year_quarter_combo"; + + _consts = { iconWidth: 24 }; + props = { baseCls: "bi-year-quarter-combo", behaviors: {}, - minDate: "1900-01-01", // 最小日期 - maxDate: "2099-12-31", // 最大日期 + minDate: "1900-01-01", + maxDate: "2099-12-31", height: 24, supportDynamic: true, isNeedAdjustHeight: false, - isNeedAdjustWidth: false - }, + isNeedAdjustWidth: false, + }; + + static EVENT_CONFIRM = "EVENT_CONFIRM"; + static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; + static EVENT_ERROR = "EVENT_ERROR"; + static EVENT_VALID = "EVENT_VALID"; + static EVENT_FOCUS = "EVENT_FOCUS"; + static Static = 1; + static Dynamic = 2; - _init: function () { - var self = this, o = this.options; - BI.DynamicYearQuarterCombo.superclass._init.apply(this, arguments); + _init() { + const o = this.options; + super._init(...arguments); this.storeValue = o.value; - var border = o.simple ? 1 : 2; - self.storeTriggerValue = ""; - this.trigger = BI.createWidget({ + const border = o.simple ? 1 : 2; + this.storeTriggerValue = ""; + this.trigger = createWidget({ type: "bi.dynamic_year_quarter_trigger", simple: o.simple, min: o.minDate, max: o.maxDate, - height: BI.toPix(o.height, border), + height: toPix(o.height, border), value: o.value || "", watermark: o.watermark, }); - this.trigger.on(BI.DynamicYearQuarterTrigger.EVENT_KEY_DOWN, function () { - self.combo.isViewVisible() && self.combo.hideView(); + this.trigger.on(DynamicYearQuarterTrigger.EVENT_KEY_DOWN, () => { + this.combo.isViewVisible() && this.combo.hideView(); }); - this.trigger.on(BI.DynamicYearQuarterTrigger.EVENT_START, function () { - self.combo.isViewVisible() && self.combo.hideView(); + this.trigger.on(DynamicYearQuarterTrigger.EVENT_START, () => { + this.combo.isViewVisible() && this.combo.hideView(); }); - this.trigger.on(BI.DynamicYearQuarterTrigger.EVENT_STOP, function () { - self.combo.showView(); + this.trigger.on(DynamicYearQuarterTrigger.EVENT_STOP, () => { + this.combo.showView(); }); - this.trigger.on(BI.DynamicYearQuarterTrigger.EVENT_ERROR, function () { - self.combo.isViewVisible() && self.combo.hideView(); - self.comboWrapper.element.addClass("error"); - self.fireEvent(BI.DynamicYearQuarterCombo.EVENT_ERROR); + this.trigger.on(DynamicYearQuarterTrigger.EVENT_ERROR, () => { + this.combo.isViewVisible() && this.combo.hideView(); + this.comboWrapper.element.addClass("error"); + this.fireEvent(DynamicYearQuarterCombo.EVENT_ERROR); }); - this.trigger.on(BI.DynamicYearQuarterTrigger.EVENT_VALID, function () { - self.comboWrapper.element.removeClass("error"); - self.fireEvent(BI.DynamicYearMonthCombo.EVENT_VALID); + this.trigger.on(DynamicYearQuarterTrigger.EVENT_VALID, () => { + this.comboWrapper.element.removeClass("error"); + this.fireEvent(BI.DynamicYearMonthCombo.EVENT_VALID); }); - this.trigger.on(BI.DynamicYearQuarterTrigger.EVENT_CONFIRM, function () { - var dateStore = self.storeTriggerValue; - var dateObj = self.trigger.getKey(); - if (BI.isEqual(dateObj, dateStore)) { + this.trigger.on(DynamicYearQuarterTrigger.EVENT_CONFIRM, () => { + const dateStore = this.storeTriggerValue; + const dateObj = this.trigger.getKey(); + if (isEqual(dateObj, dateStore)) { return; } - if (BI.isNotEmptyString(dateObj) && !BI.isEqual(dateObj, dateStore)) { - self.storeValue = self.trigger.getValue(); - self.setValue(self.trigger.getValue()); + if (isNotEmptyString(dateObj) && !isEqual(dateObj, dateStore)) { + this.storeValue = this.trigger.getValue(); + this.setValue(this.trigger.getValue()); } - self._checkDynamicValue(self.storeValue); - self.fireEvent(BI.DynamicYearQuarterCombo.EVENT_CONFIRM); + this._checkDynamicValue(this.storeValue); + this.fireEvent(DynamicYearQuarterCombo.EVENT_CONFIRM); }); - this.trigger.on(BI.DynamicYearQuarterTrigger.EVENT_FOCUS, function () { - self.storeTriggerValue = self.trigger.getKey(); - self.fireEvent(BI.DynamicYearQuarterCombo.EVENT_FOCUS); + this.trigger.on(DynamicYearQuarterTrigger.EVENT_FOCUS, () => { + this.storeTriggerValue = this.trigger.getKey(); + this.fireEvent(DynamicYearQuarterCombo.EVENT_FOCUS); }); - this.combo = BI.createWidget({ - type: "bi.combo", + this.combo = createWidget({ + type: Combo.xtype, container: o.container, isNeedAdjustHeight: o.isNeedAdjustHeight, isNeedAdjustWidth: o.isNeedAdjustWidth, @@ -80,172 +110,185 @@ BI.DynamicYearQuarterCombo = BI.inherit(BI.Widget, { type: "bi.dynamic_year_quarter_popup", width: o.isNeedAdjustWidth ? o.width : undefined, supportDynamic: o.supportDynamic, - ref: function () { - self.popup = this; + ref: _ref => { + this.popup = _ref; }, listeners: [ { - eventName: BI.DynamicYearQuarterPopup.EVENT_CHANGE, - action: function () { - self.setValue(self.popup.getValue()); - self.combo.hideView(); - self.fireEvent(BI.DynamicYearQuarterCombo.EVENT_CONFIRM); - } - }, { - eventName: BI.DynamicYearQuarterPopup.BUTTON_CLEAR_EVENT_CHANGE, - action: function () { - self.setValue(); - self.comboWrapper.element.removeClass("error"); - self.combo.hideView(); - self.fireEvent(BI.DynamicYearQuarterCombo.EVENT_CONFIRM); - } - }, { - eventName: BI.DynamicYearQuarterPopup.BUTTON_lABEL_EVENT_CHANGE, - action: function () { - var date = BI.getDate(); - self.setValue({ + eventName: DynamicYearQuarterPopup.EVENT_CHANGE, + action: () => { + this.setValue(this.popup.getValue()); + this.combo.hideView(); + this.fireEvent( + DynamicYearQuarterCombo.EVENT_CONFIRM + ); + }, + }, + { + eventName: + DynamicYearQuarterPopup.BUTTON_CLEAR_EVENT_CHANGE, + action: () => { + this.setValue(); + this.comboWrapper.element.removeClass("error"); + this.combo.hideView(); + this.fireEvent( + DynamicYearQuarterCombo.EVENT_CONFIRM + ); + }, + }, + { + eventName: + DynamicYearQuarterPopup.BUTTON_lABEL_EVENT_CHANGE, + action: () => { + const date = getDate(); + this.setValue({ type: BI.DynamicYearMonthCombo.Static, - value: { year: date.getFullYear(), quarter: BI.getQuarter(date) } + value: { + year: date.getFullYear(), + quarter: getQuarter(date), + }, }); - self.combo.hideView(); - self.fireEvent(BI.DynamicDateCombo.EVENT_CONFIRM); - } - }, { - eventName: BI.DynamicYearQuarterPopup.BUTTON_OK_EVENT_CHANGE, - action: function () { - var value = self.popup.getValue(); - if (self._checkValue(value)) { - self.setValue(value); + this.combo.hideView(); + this.fireEvent(DynamicDateCombo.EVENT_CONFIRM); + }, + }, + { + eventName: + DynamicYearQuarterPopup.BUTTON_OK_EVENT_CHANGE, + action: () => { + const value = this.popup.getValue(); + if (this._checkValue(value)) { + this.setValue(value); } - self.combo.hideView(); - self.fireEvent(BI.DynamicDateCombo.EVENT_CONFIRM); - } + this.combo.hideView(); + this.fireEvent(DynamicDateCombo.EVENT_CONFIRM); + }, } ], behaviors: o.behaviors, min: o.minDate, - max: o.maxDate + max: o.maxDate, }, - value: o.value || "" - } + value: o.value || "", + }, }); - this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () { - self.popup.setMinDate(o.minDate); - self.popup.setMaxDate(o.maxDate); - self.popup.setValue(self.storeValue); - self.fireEvent(BI.DynamicYearQuarterCombo.EVENT_BEFORE_POPUPVIEW); + this.combo.on(Combo.EVENT_BEFORE_POPUPVIEW, () => { + this.popup.setMinDate(o.minDate); + this.popup.setMaxDate(o.maxDate); + this.popup.setValue(this.storeValue); + this.fireEvent(DynamicYearQuarterCombo.EVENT_BEFORE_POPUPVIEW); }); - BI.createWidget({ - type: "bi.absolute", + createWidget({ + type: AbsoluteLayout.xtype, element: this, items: [ { el: { - type: "bi.horizontal_fill", + type: HorizontalFillLayout.xtype, columnSize: ["", "fill"], - cls: (o.simple ? "bi-border-bottom" : "bi-border bi-border-radius") + " bi-focus-shadow", - ref: function () { - self.comboWrapper = this; + cls: + `${o.simple + ? "bi-border-bottom" + : "bi-border bi-border-radius" + } bi-focus-shadow`, + ref: _ref => { + this.comboWrapper = _ref; }, items: [ { el: { - type: "bi.icon_button", + type: IconButton.xtype, cls: "bi-trigger-icon-button date-change-h-font", width: this._consts.iconWidth, - height: BI.toPix(o.height, border), - ref: function () { - self.changeIcon = this; - } - } - }, this.combo - ] + height: toPix(o.height, border), + ref: _ref => { + this.changeIcon = _ref; + }, + }, + }, + this.combo + ], }, top: 0, left: 0, right: 0, - bottom: 0 + bottom: 0, } - ] + ], }); this._checkDynamicValue(o.value); - }, + } - _checkDynamicValue: function (v) { - var type = null; - if (BI.isNotNull(v)) { + _checkDynamicValue(v) { + let type = null; + if (isNotNull(v)) { type = v.type; } switch (type) { - case BI.DynamicYearQuarterCombo.Dynamic: - this.changeIcon.setVisible(true); - break; - default: - this.changeIcon.setVisible(false); - break; + case DynamicYearQuarterCombo.Dynamic: + this.changeIcon.setVisible(true); + break; + default: + this.changeIcon.setVisible(false); + break; } - }, + } - _checkValue: function (v) { - var o = this.options; + _checkValue(v) { + const o = this.options; + let value; switch (v.type) { - case BI.DynamicDateCombo.Dynamic: - return BI.isNotEmptyObject(v.value); - case BI.DynamicDateCombo.Static: - var value = v.value || {}; - - return !BI.checkDateVoid(value.year, (value.quarter - 1) * 3 + 1, 1, o.minDate, o.maxDate)[0]; - default: - return true; + case DynamicDateCombo.Dynamic: + return isNotEmptyObject(v.value); + case DynamicDateCombo.Static: + value = v.value || {}; + + return !checkDateVoid( + value.year, + (value.quarter - 1) * 3 + 1, + 1, + o.minDate, + o.maxDate + )[0]; + default: + return true; } - }, + } - setMinDate: function (minDate) { - var o = this.options; + setMinDate(minDate) { + const o = this.options; o.minDate = minDate; this.trigger.setMinDate(minDate); this.popup && this.popup.setMinDate(minDate); - }, + } - setMaxDate: function (maxDate) { - var o = this.options; + setMaxDate(maxDate) { + const o = this.options; o.maxDate = maxDate; this.trigger.setMaxDate(maxDate); this.popup && this.popup.setMaxDate(maxDate); - }, + } - hideView: function () { + hideView() { this.combo.hideView(); - }, + } - getKey: function () { + getKey() { return this.trigger.getKey(); - }, + } - setValue: function (v) { + setValue(v) { this.storeValue = v; this.trigger.setValue(v); this._checkDynamicValue(v); - }, + } - getValue: function () { + getValue() { return this.storeValue; - }, + } - isStateValid: function () { + isStateValid() { return this.trigger.isStateValid(); } - -}); -BI.DynamicYearQuarterCombo.EVENT_CONFIRM = "EVENT_CONFIRM"; -BI.DynamicYearQuarterCombo.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; -BI.DynamicYearQuarterCombo.EVENT_ERROR = "EVENT_ERROR"; -BI.DynamicYearQuarterCombo.EVENT_VALID = "EVENT_VALID"; -BI.DynamicYearQuarterCombo.EVENT_FOCUS = "EVENT_FOCUS"; -BI.shortcut("bi.dynamic_year_quarter_combo", BI.DynamicYearQuarterCombo); - -BI.extend(BI.DynamicYearQuarterCombo, { - Static: 1, - Dynamic: 2 -}); +} diff --git a/src/widget/yearquarter/index.js b/src/widget/yearquarter/index.js new file mode 100644 index 000000000..29b16b492 --- /dev/null +++ b/src/widget/yearquarter/index.js @@ -0,0 +1,6 @@ +export { DynamicYearQuarterCard } from "./card.dynamic.yearquarter"; +export { StaticYearQuarterCard } from "./card.static.yearquarter"; +export { DynamicYearQuarterCombo } from "./combo.yearquarter"; +export { DynamicYearQuarterPopup } from "./popup.yearquarter"; +export { DynamicYearQuarterTrigger } from "./trigger.yearquarter"; + diff --git a/src/widget/yearquarter/popup.yearquarter.js b/src/widget/yearquarter/popup.yearquarter.js index 6cfbc519a..f134f384e 100644 --- a/src/widget/yearquarter/popup.yearquarter.js +++ b/src/widget/yearquarter/popup.yearquarter.js @@ -1,235 +1,328 @@ -BI.DynamicYearQuarterPopup = BI.inherit(BI.Widget, { - constants: { - tabHeight: 40, - buttonHeight: 24 - }, +import { + shortcut, + Widget, + toPix, + i18nText, + VerticalLayout, + GridLayout, + print, + getDate, + checkDateVoid, + createItems, + getQuarter +} from "@/core"; +import { DynamicYearQuarterCombo } from "./combo.yearquarter"; +import { TextButton, Tab } from "@/base"; +import { DynamicDateCombo, DynamicDatePopup, DynamicDateHelper } from "../dynamicdate"; +// TODO:需要等待year完成才能将BI.DynamicYearCard替换 +// import { DynamicYearCard } from "../year/card.dynamic.year"; +import { LinearSegment } from "@/case"; +import { DynamicYearQuarterCard } from "./card.dynamic.yearquarter"; +import { StaticYearQuarterCard } from "./card.static.yearquarter"; - props: { +@shortcut() +export class DynamicYearQuarterPopup extends Widget { + static xtype = "bi.dynamic_year_quarter_popup"; + + constants = { tabHeight: 40, buttonHeight: 24 }; + props = { baseCls: "bi-year-quarter-popup", behaviors: {}, - min: "1900-01-01", // 最小日期 - max: "2099-12-31", // 最大日期, + min: "1900-01-01", + max: "2099-12-31", width: 180, supportDynamic: true, - }, + }; + + static BUTTON_CLEAR_EVENT_CHANGE = "BUTTON_CLEAR_EVENT_CHANGE"; + static BUTTON_lABEL_EVENT_CHANGE = "BUTTON_lABEL_EVENT_CHANGE"; + static BUTTON_OK_EVENT_CHANGE = "BUTTON_OK_EVENT_CHANGE"; + static EVENT_CHANGE = "EVENT_CHANGE"; - render: function () { - var self = this, opts = this.options, c = this.constants; - this.storeValue = {type: BI.DynamicYearQuarterCombo.Static}; + render() { + this.storeValue = { type: DynamicYearQuarterCombo.Static }; + return { - type: "bi.vertical", - items: [{ - el: this._getTabJson() - }, { - el: { - type: "bi.grid", - items: [[{ - type: "bi.text_button", - cls: "bi-split-top bi-high-light", - shadow: true, - textHeight: BI.toPix(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1), - text: BI.i18nText("BI-Basic_Clear"), - listeners: [{ - eventName: BI.TextButton.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.DynamicYearQuarterPopup.BUTTON_CLEAR_EVENT_CHANGE); - } - }] - }, { - type: "bi.text_button", - cls: "bi-split-left bi-split-right bi-high-light bi-split-top", - textHeight: BI.toPix(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1), - shadow: true, - text: BI.i18nText("BI-Basic_Current_Quarter"), - disabled: this._checkTodayValid(), - ref: function () { - self.textButton = this; - }, - listeners: [{ - eventName: BI.TextButton.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.DynamicYearQuarterPopup.BUTTON_lABEL_EVENT_CHANGE); - } - }] - }, { - type: "bi.text_button", - cls: "bi-split-top bi-high-light", - shadow: true, - textHeight: BI.toPix(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1), - text: BI.i18nText("BI-Basic_OK"), - listeners: [{ - eventName: BI.TextButton.EVENT_CHANGE, - action: function () { - var type = self.dateTab.getSelect(); - if (type === BI.DynamicDateCombo.Dynamic) { - self.dynamicPane.checkValidation(true) && self.fireEvent(BI.DynamicDatePopup.BUTTON_OK_EVENT_CHANGE); - } else { - self.fireEvent(BI.DynamicYearQuarterPopup.BUTTON_OK_EVENT_CHANGE); - } - } - }] - }]], - height: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT + type: VerticalLayout.xtype, + items: [ + { + el: this._getTabJson(), }, - }] + { + el: { + type: GridLayout.xtype, + items: [ + [ + { + type: TextButton.xtype, + cls: "bi-split-top bi-high-light", + shadow: true, + textHeight: toPix( + BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, + 1 + ), + text: i18nText("BI-Basic_Clear"), + listeners: [ + { + eventName: TextButton.EVENT_CHANGE, + action: () => { + this.fireEvent( + DynamicYearQuarterPopup.BUTTON_CLEAR_EVENT_CHANGE + ); + }, + } + ], + }, + { + type: TextButton.xtype, + cls: "bi-split-left bi-split-right bi-high-light bi-split-top", + textHeight: toPix( + BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, + 1 + ), + shadow: true, + text: i18nText("BI-Basic_Current_Quarter"), + disabled: this._checkTodayValid(), + ref: _ref => { + this.textButton = _ref; + }, + listeners: [ + { + eventName: TextButton.EVENT_CHANGE, + action: () => { + this.fireEvent( + DynamicYearQuarterPopup.BUTTON_lABEL_EVENT_CHANGE + ); + }, + } + ], + }, + { + type: TextButton.xtype, + cls: "bi-split-top bi-high-light", + shadow: true, + textHeight: toPix( + BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, + 1 + ), + text: i18nText("BI-Basic_OK"), + listeners: [ + { + eventName: TextButton.EVENT_CHANGE, + action: () => { + const type = + this.dateTab.getSelect(); + if ( + type === + DynamicDateCombo.Dynamic + ) { + this.dynamicPane.checkValidation( + true + ) && + this.fireEvent( + DynamicDatePopup.BUTTON_OK_EVENT_CHANGE + ); + } else { + this.fireEvent(DynamicYearQuarterPopup + .BUTTON_OK_EVENT_CHANGE + ); + } + }, + } + ], + } + ] + ], + height: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, + }, + } + ], }; - }, + } - _setInnerValue: function () { - if (this.dateTab.getSelect() === BI.DynamicYearQuarterCombo.Static) { - this.textButton.setValue(BI.i18nText("BI-Basic_Current_Quarter")); + _setInnerValue() { + if (this.dateTab.getSelect() === DynamicYearQuarterCombo.Static) { + this.textButton.setValue(i18nText("BI-Basic_Current_Quarter")); this.textButton.setEnable(!this._checkTodayValid()); } else { - var date = BI.DynamicDateHelper.getCalculation(this.dynamicPane.getInputValue()); - date = BI.print(date, "%Y-%Q"); + let date = DynamicDateHelper.getCalculation( + this.dynamicPane.getInputValue() + ); + date = print(date, "%Y-%Q"); this.textButton.setValue(date); this.textButton.setEnable(false); } - }, + } - _checkTodayValid: function () { - var o = this.options; - var today = BI.getDate(); - return !!BI.checkDateVoid(today.getFullYear(), today.getMonth() + 1, today.getDate(), o.min, o.max)[0]; - }, + _checkTodayValid() { + const o = this.options; + const today = getDate(); + + return !!checkDateVoid( + today.getFullYear(), + today.getMonth() + 1, + today.getDate(), + o.min, + o.max + )[0]; + } - _getTabJson: function () { - var self = this, o = this.options; + _getTabJson() { + const o = this.options; + return { - type: "bi.tab", + type: Tab.xtype, logic: { - dynamic: true + dynamic: true, }, - ref: function () { - self.dateTab = this; + ref: _ref => { + this.dateTab = _ref; }, tab: { - type: "bi.linear_segment", + type: LinearSegment.xtype, cls: "bi-split-bottom", invisible: !o.supportDynamic, height: this.constants.tabHeight, - items: BI.createItems([{ - text: BI.i18nText("BI-Basic_Year_Quarter"), - value: BI.DynamicYearQuarterCombo.Static - }, { - text: BI.i18nText("BI-Basic_Dynamic_Title"), - value: BI.DynamicYearQuarterCombo.Dynamic - }], { - textAlign: "center" - }) + items: createItems( + [ + { + text: i18nText("BI-Basic_Year_Quarter"), + value: DynamicYearQuarterCombo.Static, + }, + { + text: i18nText("BI-Basic_Dynamic_Title"), + value: DynamicYearQuarterCombo.Dynamic, + } + ], + { + textAlign: "center", + } + ), }, - cardCreator: function (v) { + cardCreator: v => { switch (v) { - case BI.DynamicYearQuarterCombo.Dynamic: - return { - type: "bi.dynamic_year_quarter_card", - cls: "dynamic-year-quarter-pane", - min: self.options.min, - max: self.options.max, - listeners: [{ + case DynamicYearQuarterCombo.Dynamic: + return { + type: DynamicYearQuarterCard.xtype, + cls: "dynamic-year-quarter-pane", + min: this.options.min, + max: this.options.max, + listeners: [ + { eventName: "EVENT_CHANGE", - action: function () { - self._setInnerValue(self.year, v); - } - }], - ref: function () { - self.dynamicPane = this; + action: () => { + this._setInnerValue(this.year, v); + }, } - }; - case BI.DynamicYearQuarterCombo.Static: - default: - return { - type: "bi.static_year_quarter_card", - behaviors: o.behaviors, - min: self.options.min, - max: self.options.max, - listeners: [{ + ], + ref: _ref => { + this.dynamicPane = _ref; + }, + }; + case DynamicYearQuarterCombo.Static: + default: + return { + type: StaticYearQuarterCard.xtype, + behaviors: o.behaviors, + min: this.options.min, + max: this.options.max, + listeners: [ + { eventName: BI.DynamicYearCard.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.DynamicYearQuarterPopup.EVENT_CHANGE); - } - }], - ref: function () { - self.year = this; + action: () => { + this.fireEvent( + DynamicYearQuarterPopup.EVENT_CHANGE + ); + }, } - }; + ], + ref: _ref => { + this.year = _ref; + }, + }; } }, - listeners: [{ - eventName: BI.Tab.EVENT_CHANGE, - action: function () { - var v = self.dateTab.getSelect(); - switch (v) { - case BI.DynamicYearQuarterCombo.Static: - var date = BI.DynamicDateHelper.getCalculation(self.dynamicPane.getValue()); - self.year.setValue({year: date.getFullYear(), quarter: BI.getQuarter(date)}); - self._setInnerValue(); + listeners: [ + { + eventName: Tab.EVENT_CHANGE, + action: () => { + const v = this.dateTab.getSelect(); + let date; + switch (v) { + case DynamicYearQuarterCombo.Static: + date = DynamicDateHelper.getCalculation( + this.dynamicPane.getValue() + ); + this.year.setValue({ + year: date.getFullYear(), + quarter: getQuarter(date), + }); + this._setInnerValue(); break; - case BI.DynamicYearQuarterCombo.Dynamic: + case DynamicYearQuarterCombo.Dynamic: default: - if(self.storeValue && self.storeValue.type === BI.DynamicYearQuarterCombo.Dynamic) { - self.dynamicPane.setValue(self.storeValue.value); - }else{ - self.dynamicPane.setValue({ - year: 0 + if ( + this.storeValue && + this.storeValue.type === + DynamicYearQuarterCombo.Dynamic + ) { + this.dynamicPane.setValue( + this.storeValue.value + ); + } else { + this.dynamicPane.setValue({ + year: 0, }); } - self._setInnerValue(); + this._setInnerValue(); break; - } + } + }, } - }] + ], }; - }, + } - setMinDate: function (minDate) { + setMinDate(minDate) { if (this.options.min !== minDate) { this.options.min = minDate; this.year && this.year.setMinDate(minDate); this.dynamicPane && this.dynamicPane.setMinDate(minDate); } - }, + } - setMaxDate: function (maxDate) { + setMaxDate(maxDate) { if (this.options.max !== maxDate) { this.options.max = maxDate; this.year && this.year.setMaxDate(maxDate); this.dynamicPane && this.dynamicPane.setMaxDate(maxDate); } - }, + } - setValue: function (v) { + setValue(v) { this.storeValue = v; - var self = this; - var type, value; v = v || {}; - type = v.type || BI.DynamicDateCombo.Static; - value = v.value || v; + const type = v.type || DynamicDateCombo.Static; + const value = v.value || v; this.dateTab.setSelect(type); switch (type) { - case BI.DynamicDateCombo.Dynamic: - this.dynamicPane.setValue(value); - self._setInnerValue(); - break; - case BI.DynamicDateCombo.Static: - default: - this.year.setValue(value); - this.textButton.setValue(BI.i18nText("BI-Basic_Current_Quarter")); - this.textButton.setEnable(!this._checkTodayValid()); - break; + case DynamicDateCombo.Dynamic: + this.dynamicPane.setValue(value); + this._setInnerValue(); + break; + case DynamicDateCombo.Static: + default: + this.year.setValue(value); + this.textButton.setValue(i18nText("BI-Basic_Current_Quarter")); + this.textButton.setEnable(!this._checkTodayValid()); + break; } - }, + } - getValue: function () { + getValue() { return { type: this.dateTab.getSelect(), - value: this.dateTab.getValue() + value: this.dateTab.getValue(), }; } - -}); -BI.DynamicYearQuarterPopup.BUTTON_CLEAR_EVENT_CHANGE = "BUTTON_CLEAR_EVENT_CHANGE"; -BI.DynamicYearQuarterPopup.BUTTON_lABEL_EVENT_CHANGE = "BUTTON_lABEL_EVENT_CHANGE"; -BI.DynamicYearQuarterPopup.BUTTON_OK_EVENT_CHANGE = "BUTTON_OK_EVENT_CHANGE"; -BI.DynamicYearQuarterPopup.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.dynamic_year_quarter_popup", BI.DynamicYearQuarterPopup); \ No newline at end of file +} diff --git a/src/widget/yearquarter/trigger.yearquarter.js b/src/widget/yearquarter/trigger.yearquarter.js index 876856379..cd31a3908 100644 --- a/src/widget/yearquarter/trigger.yearquarter.js +++ b/src/widget/yearquarter/trigger.yearquarter.js @@ -1,277 +1,374 @@ -BI.DynamicYearQuarterTrigger = BI.inherit(BI.Trigger, { - _const: { - hgap: 4, - vgap: 2, - iconWidth: 24 - }, +import { + shortcut, + i18nText, + createWidget, + HTapeLayout, + CenterLayout, + HorizontalFillLayout, + isEmptyString, + parseDateTime, + isPositiveInteger, + checkDateVoid, + isNotEmptyString, + isNotNull, + print, + checkDateLegal, + isNull, + parseInt, + getDate, + getQuarter +} from "@/core"; +import { Trigger, TextButton } from "@/base"; +import { TriggerIconButton, SignEditor } from "@/case"; +import { DynamicDateHelper } from "../dynamicdate"; +// TODO:需要等待yearmonth完成才能将BI.DynamicYearMonthTrigger替换 +// import { DynamicYearMonthTrigger } from "../yearmonth/trigger.yearmonth"; +import { DynamicYearQuarterCombo } from "./combo.yearquarter"; - props: () => ({ - extraCls: "bi-year-quarter-trigger", - min: "1900-01-01", // 最小日期 - max: "2099-12-31", // 最大日期 - height: 24, - watermark: { - year: BI.i18nText("BI-Basic_Unrestricted"), - quarter: BI.i18nText("BI-Basic_Unrestricted"), - }, - }), +@shortcut() +export class DynamicYearQuarterTrigger extends Trigger { + static xtype = "bi.dynamic_year_quarter_trigger"; - _init: function () { - BI.DynamicYearQuarterTrigger.superclass._init.apply(this, arguments); - var o = this.options; + _const = { hgap: 4, vgap: 2, iconWidth: 24 }; + + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_ERROR = "EVENT_ERROR"; + static EVENT_START = "EVENT_START"; + static EVENT_CONFIRM = "EVENT_CONFIRM"; + static EVENT_STOP = "EVENT_STOP"; + static EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; + static EVENT_VALID = "EVENT_VALID"; + + props() { + return { + extraCls: "bi-year-quarter-trigger", + min: "1900-01-01", // 最小日期 + max: "2099-12-31", // 最大日期 + height: 24, + watermark: { + year: i18nText("BI-Basic_Unrestricted"), + quarter: i18nText("BI-Basic_Unrestricted"), + }, + }; + } + + _init() { + super._init(...arguments); + const o = this.options; this.yearEditor = this._createEditor(true); this.quarterEditor = this._createEditor(false); // 暂时的解决方法 - var height = o.height + 2; + // const height = o.height + 2; - BI.createWidget({ + createWidget({ element: this, - type: "bi.htape", - items: [{ - type: "bi.center", - items: [{ - type: "bi.horizontal_fill", - columnSize: ["fill", ""], - items: [this.yearEditor, { - el: { - type: "bi.text_button", - text: BI.i18nText("BI-Multi_Date_Year"), - }, - }] - }, { - type: "bi.horizontal_fill", - columnSize: ["fill", ""], - items: [this.quarterEditor, { - el: { - type: "bi.text_button", - text: BI.i18nText("BI-Multi_Date_Quarter"), + type: HTapeLayout.xtype, + items: [ + { + type: CenterLayout.xtype, + items: [ + { + type: HorizontalFillLayout.xtype, + columnSize: ["fill", ""], + items: [ + this.yearEditor, + { + el: { + type: TextButton.xtype, + text: i18nText("BI-Multi_Date_Year"), + }, + } + ], }, - }] - }] - }, { - el: { - type: "bi.trigger_icon_button", - width: this._const.iconWidth, + { + type: HorizontalFillLayout.xtype, + columnSize: ["fill", ""], + items: [ + this.quarterEditor, + { + el: { + type: TextButton.xtype, + text: i18nText("BI-Multi_Date_Quarter"), + }, + } + ], + } + ], }, - width: this._const.iconWidth, - }] + { + el: { + type: TriggerIconButton.xtype, + width: this._const.iconWidth, + }, + width: this._const.iconWidth, + } + ], }); this.setValue(o.value); - }, + } - _createEditor: function (isYear) { - var self = this, o = this.options, c = this._const; - var editor = BI.createWidget({ - type: "bi.sign_editor", + _createEditor(isYear) { + const o = this.options, + c = this._const; + const editor = createWidget({ + type: SignEditor.xtype, simple: o.simple, height: o.height, - validationChecker: function (v) { - if(isYear) { - var month = self.quarterEditor.getValue(); - if(BI.isEmptyString(month)) { - month = parseInt(v, 10) === BI.parseDateTime(o.min, "%Y-%X-%d").getFullYear() ? BI.parseDateTime(o.min, "%Y-%X-%d").getMonth() + 1 : 1; + validationChecker: v => { + if (isYear) { + let month = this.quarterEditor.getValue(); + if (isEmptyString(month)) { + month = + parseInt(v, 10) === + parseDateTime(o.min, "%Y-%X-%d").getFullYear() + ? parseDateTime(o.min, "%Y-%X-%d").getMonth() + + 1 + : 1; } else { month = (parseInt(month, 10) - 1) * 3 + 1; } - return v === "" || (BI.isPositiveInteger(v) && !BI.checkDateVoid(v, month, 1, o.min, o.max)[0]); + + return ( + v === "" || + (isPositiveInteger(v) && + !checkDateVoid(v, month, 1, o.min, o.max)[0]) + ); } - var year = self.yearEditor.getValue(); + const year = this.yearEditor.getValue(); - return v === "" || ((BI.isPositiveInteger(v) && v >= 1 && v <= 4) && (BI.isEmptyString(year) ? true : !BI.checkDateVoid(self.yearEditor.getValue(), (v - 1) * 3 + 1, 1, o.min, o.max)[0])); - }, - quitChecker: function () { - return false; + return ( + v === "" || + (isPositiveInteger(v) && + v >= 1 && + v <= 4 && + (isEmptyString(year) + ? true + : !checkDateVoid( + this.yearEditor.getValue(), + (v - 1) * 3 + 1, + 1, + o.min, + o.max + )[0])) + ); }, - errorText: function (v) { - var year = isYear ? v : self.yearEditor.getValue(); - var quarter = isYear ? self.quarterEditor.getValue() : v; - if (!BI.isPositiveInteger(year) || !BI.isPositiveInteger(quarter) || quarter > 4) { - return BI.i18nText("BI-Year_Trigger_Invalid_Text"); + quitChecker: () => false, + errorText: v => { + const year = isYear ? v : this.yearEditor.getValue(); + const quarter = isYear ? this.quarterEditor.getValue() : v; + if ( + !isPositiveInteger(year) || + !isPositiveInteger(quarter) || + quarter > 4 + ) { + return i18nText("BI-Year_Trigger_Invalid_Text"); } - var start = BI.parseDateTime(o.min, "%Y-%X-%d"); - var end = BI.parseDateTime(o.max, "%Y-%X-%d"); + const start = parseDateTime(o.min, "%Y-%X-%d"); + const end = parseDateTime(o.max, "%Y-%X-%d"); - return BI.i18nText("BI-Basic_Year_Quarter_Range_Error", + return i18nText( + "BI-Basic_Year_Quarter_Range_Error", start.getFullYear(), - BI.getQuarter(start), + getQuarter(start), end.getFullYear(), - BI.getQuarter(end) + getQuarter(end) ); }, watermark: isYear ? o.watermark?.year : o.watermark?.quarter, hgap: c.hgap, vgap: c.vgap, - allowBlank: true + allowBlank: true, }); - editor.on(BI.SignEditor.EVENT_KEY_DOWN, function () { - self.fireEvent(BI.DynamicYearQuarterTrigger.EVENT_KEY_DOWN); + editor.on(SignEditor.EVENT_KEY_DOWN, () => { + this.fireEvent(DynamicYearQuarterTrigger.EVENT_KEY_DOWN); }); - editor.on(BI.SignEditor.EVENT_FOCUS, function () { - self.fireEvent(BI.DynamicYearQuarterTrigger.EVENT_FOCUS); + editor.on(SignEditor.EVENT_FOCUS, () => { + this.fireEvent(DynamicYearQuarterTrigger.EVENT_FOCUS); }); - editor.on(BI.SignEditor.EVENT_STOP, function () { - self.fireEvent(BI.DynamicYearQuarterTrigger.EVENT_STOP); + editor.on(SignEditor.EVENT_STOP, () => { + this.fireEvent(DynamicYearQuarterTrigger.EVENT_STOP); }); - editor.on(BI.SignEditor.EVENT_CONFIRM, function () { - self._doEditorConfirm(editor); - self.fireEvent(BI.DynamicYearQuarterTrigger.EVENT_CONFIRM); + editor.on(SignEditor.EVENT_CONFIRM, () => { + this._doEditorConfirm(editor); + this.fireEvent(DynamicYearQuarterTrigger.EVENT_CONFIRM); }); - editor.on(BI.SignEditor.EVENT_SPACE, function () { + editor.on(SignEditor.EVENT_SPACE, () => { if (editor.isValid()) { editor.blur(); } }); - editor.on(BI.SignEditor.EVENT_START, function () { - self.fireEvent(BI.DynamicYearQuarterTrigger.EVENT_START); + editor.on(SignEditor.EVENT_START, () => { + this.fireEvent(DynamicYearQuarterTrigger.EVENT_START); }); - editor.on(BI.SignEditor.EVENT_ERROR, function () { - self.fireEvent(BI.DynamicYearQuarterTrigger.EVENT_ERROR); + editor.on(SignEditor.EVENT_ERROR, () => { + this.fireEvent(DynamicYearQuarterTrigger.EVENT_ERROR); }); - editor.on(BI.SignEditor.EVENT_VALID, function () { - var year = self.yearEditor.getValue(); - var quarter = self.quarterEditor.getValue(); - if(BI.isNotEmptyString(year) && BI.isNotEmptyString(quarter)) { - if(BI.isPositiveInteger(year) && quarter >= 1 && quarter <= 4 && !BI.checkDateVoid(year, (quarter - 1) * 3 + 1, 1, o.min, o.max)[0]) { - self.fireEvent(BI.DynamicYearMonthTrigger.EVENT_VALID); + editor.on(SignEditor.EVENT_VALID, () => { + const year = this.yearEditor.getValue(); + const quarter = this.quarterEditor.getValue(); + if (isNotEmptyString(year) && isNotEmptyString(quarter)) { + if ( + isPositiveInteger(year) && + quarter >= 1 && + quarter <= 4 && + !checkDateVoid( + year, + (quarter - 1) * 3 + 1, + 1, + o.min, + o.max + )[0] + ) { + this.fireEvent(BI.DynamicYearMonthTrigger.EVENT_VALID); } } }); - editor.on(BI.SignEditor.EVENT_CHANGE, function () { - if(isYear) { - self._autoSwitch(editor); + editor.on(SignEditor.EVENT_CHANGE, () => { + if (isYear) { + this._autoSwitch(editor); } }); return editor; - }, + } - _doEditorConfirm: function (editor) { - var value = editor.getValue(); - if (BI.isNotNull(value)) { + _doEditorConfirm(editor) { + const value = editor.getValue(); + if (isNotNull(value)) { editor.setValue(value); } - var quarterValue = this.quarterEditor.getValue(); + const quarterValue = this.quarterEditor.getValue(); this.storeValue = { - type: BI.DynamicYearQuarterCombo.Static, + type: DynamicYearQuarterCombo.Static, value: { year: this.yearEditor.getValue(), - quarter: BI.isEmptyString(this.quarterEditor.getValue()) ? "" : quarterValue - } + quarter: isEmptyString(this.quarterEditor.getValue()) + ? "" + : quarterValue, + }, }; this.setTitle(this._getStaticTitle(this.storeValue.value)); - }, + } - _yearCheck: function (v) { - var date = BI.print(BI.parseDateTime(v, "%Y-%X-%d"), "%Y-%X-%d"); - return BI.print(BI.parseDateTime(v, "%Y"), "%Y") === v && date >= this.options.min && date <= this.options.max; - }, + _yearCheck(v) { + const date = print(parseDateTime(v, "%Y-%X-%d"), "%Y-%X-%d"); + + return ( + print(parseDateTime(v, "%Y"), "%Y") === v && + date >= this.options.min && + date <= this.options.max + ); + } - _autoSwitch: function (editor) { - var v = editor.getValue(); - if (BI.isNotEmptyString(v) && BI.checkDateLegal(v)) { + _autoSwitch(editor) { + const v = editor.getValue(); + if (isNotEmptyString(v) && checkDateLegal(v)) { if (v.length === 4 && this._yearCheck(v)) { this._doEditorConfirm(editor); - this.fireEvent(BI.DynamicYearQuarterTrigger.EVENT_CONFIRM); + this.fireEvent(DynamicYearQuarterTrigger.EVENT_CONFIRM); this.quarterEditor.focus(); } } - }, + } - _getStaticTitle: function (value) { + _getStaticTitle(value) { value = value || {}; - var hasYear = !(BI.isNull(value.year) || BI.isEmptyString(value.year)); - var hasMonth = !(BI.isNull(value.quarter) || BI.isEmptyString(value.quarter)); + const hasYear = !(isNull(value.year) || isEmptyString(value.year)); + const hasMonth = !(isNull(value.quarter) || isEmptyString(value.quarter)); switch ((hasYear << 1) | hasMonth) { - // !hasYear && !hasMonth - case 0: - return ""; + // !hasYear && !hasMonth + case 0: + return ""; // !hasYear && hasMonth - case 1: - return value.quarter; + case 1: + return value.quarter; // hasYear && !hasMonth - case 2: - return value.year; + case 2: + return value.year; // hasYear && hasMonth - case 3: - default: - return value.year + "-" + value.quarter; + case 3: + default: + return `${value.year}-${value.quarter}`; } - }, + } - _getText: function (obj) { - var value = ""; - if(BI.isNotNull(obj.year) && BI.parseInt(obj.year) !== 0) { - value += Math.abs(obj.year) + BI.i18nText("BI-Basic_Year") + (obj.year < 0 ? BI.i18nText("BI-Basic_Front") : BI.i18nText("BI-Basic_Behind")); + _getText(obj) { + let value = ""; + if (isNotNull(obj.year) && parseInt(obj.year) !== 0) { + value += + Math.abs(obj.year) + + i18nText("BI-Basic_Year") + + (obj.year < 0 + ? i18nText("BI-Basic_Front") + : i18nText("BI-Basic_Behind")); } - if(BI.isNotNull(obj.quarter) && BI.parseInt(obj.quarter) !== 0) { - value += Math.abs(obj.quarter) + BI.i18nText("BI-Basic_Single_Quarter") + (obj.quarter < 0 ? BI.i18nText("BI-Basic_Front") : BI.i18nText("BI-Basic_Behind")); + if (isNotNull(obj.quarter) && parseInt(obj.quarter) !== 0) { + value += + Math.abs(obj.quarter) + + i18nText("BI-Basic_Single_Quarter") + + (obj.quarter < 0 + ? i18nText("BI-Basic_Front") + : i18nText("BI-Basic_Behind")); } + return value; - }, + } - _setInnerValue: function (date, text) { - var dateStr = BI.print(date, "%Y-%Q"); + _setInnerValue(date, text) { + const dateStr = print(date, "%Y-%Q"); this.yearEditor.setValue(date.getFullYear()); - this.quarterEditor.setValue(BI.getQuarter(date)); - this.setTitle(BI.isEmptyString(text) ? dateStr : (text + ":" + dateStr)); - }, + this.quarterEditor.setValue(getQuarter(date)); + this.setTitle(isEmptyString(text) ? dateStr : `${text}:${dateStr}`); + } - setMinDate: function (minDate) { - if (BI.isNotEmptyString(this.options.min)) { + setMinDate(minDate) { + if (isNotEmptyString(this.options.min)) { this.options.min = minDate; } - }, + } - setMaxDate: function (maxDate) { - if (BI.isNotEmptyString(this.options.max)) { + setMaxDate(maxDate) { + if (isNotEmptyString(this.options.max)) { this.options.max = maxDate; } - }, + } - setValue: function (v) { - var type, value; - var date = BI.getDate(); + setValue(v) { + let type, value, text, quarter; + let date = getDate(); this.storeValue = v; - if (BI.isNotNull(v)) { - type = v.type || BI.DynamicYearQuarterCombo.Static; + if (isNotNull(v)) { + type = v.type || DynamicYearQuarterCombo.Static; value = v.value || v; } switch (type) { - case BI.DynamicYearQuarterCombo.Dynamic: - var text = this._getText(value); - date = BI.DynamicDateHelper.getCalculation(value); - this._setInnerValue(date, text); - break; - case BI.DynamicYearQuarterCombo.Static: - default: - value = value || {}; - var quarter = BI.isNull(value.quarter) ? null : value.quarter; - this.yearEditor.setValue(value.year); - this.quarterEditor.setValue(quarter); - this.setTitle(this._getStaticTitle(value)); - break; + case DynamicYearQuarterCombo.Dynamic: + text = this._getText(value); + date = DynamicDateHelper.getCalculation(value); + this._setInnerValue(date, text); + break; + case DynamicYearQuarterCombo.Static: + default: + value = value || {}; + quarter = isNull(value.quarter) ? null : value.quarter; + this.yearEditor.setValue(value.year); + this.quarterEditor.setValue(quarter); + this.setTitle(this._getStaticTitle(value)); + break; } - }, + } - getValue: function () { + getValue() { return this.storeValue; - }, + } - getKey: function () { - return this.yearEditor.getValue() + "-" + this.quarterEditor.getValue(); - }, + getKey() { + return `${this.yearEditor.getValue()}-${this.quarterEditor.getValue()}`; + } - isStateValid: function () { + isStateValid() { return this.yearEditor.isValid() && this.quarterEditor.isValid(); } -}); -BI.DynamicYearQuarterTrigger.EVENT_FOCUS = "EVENT_FOCUS"; -BI.DynamicYearQuarterTrigger.EVENT_ERROR = "EVENT_ERROR"; -BI.DynamicYearQuarterTrigger.EVENT_START = "EVENT_START"; -BI.DynamicYearQuarterTrigger.EVENT_CONFIRM = "EVENT_CONFIRM"; -BI.DynamicYearQuarterTrigger.EVENT_STOP = "EVENT_STOP"; -BI.DynamicYearQuarterTrigger.EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; -BI.DynamicYearQuarterTrigger.EVENT_VALID = "EVENT_VALID"; -BI.shortcut("bi.dynamic_year_quarter_trigger", BI.DynamicYearQuarterTrigger); +} diff --git a/src/widget/yearquarterinterval/yearquarterinterval.js b/src/widget/yearquarterinterval/yearquarterinterval.js index 02a0c67d7..16fa9f4a5 100644 --- a/src/widget/yearquarterinterval/yearquarterinterval.js +++ b/src/widget/yearquarterinterval/yearquarterinterval.js @@ -1,193 +1,248 @@ -/** - * @author windy - * @version 2.0 - * Created by windy on 2021/1/25 - */ -BI.YearQuarterInterval = BI.inherit(BI.Single, { - constants: { +import { + shortcut, + HorizontalFillLayout, + createWidget, + i18nText, + print, + parseDateTime, + checkDateVoid, + isNotNull, + checkDateLegal +} from "@/core"; +import { Single, Label, Bubbles } from "@/base"; +import { DynamicYearQuarterCombo } from "../yearquarter"; + +@shortcut() +export class YearQuarterInterval extends Single { + static xtype = "bi.year_quarter_interval"; + + constants = { height: 24, width: 25, lgap: 15, offset: -15, - timeErrorCls: "time-error" - }, - - props: { + timeErrorCls: "time-error", + }; + props = { extraCls: "bi-year-quarter-interval", minDate: "1900-01-01", maxDate: "2099-12-31", supportDynamic: true, - }, + }; + + static EVENT_VALID = "EVENT_VALID"; + static EVENT_ERROR = "EVENT_ERROR"; + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; - render: function () { - var self = this, o = this.options; + render() { + const o = this.options; o.value = o.value || {}; this.left = this._createCombo(o.value.start, o.watermark?.start); this.right = this._createCombo(o.value.end, o.watermark?.end); - return { - type: "bi.horizontal_fill", + type: HorizontalFillLayout.xtype, columnSize: ["fill", "", "fill"], - items: [{ - el: self.left - }, { - el: { - type: "bi.label", - height: o.height, - hgap: 5, - text: "-", - ref: function (_ref) { - self.label = _ref; - } + items: [ + { + el: this.left, + }, + { + el: { + type: Label.xtype, + height: o.height, + hgap: 5, + text: "-", + ref: _ref => { + this.label = _ref; + }, + }, + }, + { + el: this.right, } - }, { - el: self.right - }] + ], }; - }, + } - _createCombo: function (v, watermark) { - var self = this, o = this.options; - var combo = BI.createWidget({ - type: "bi.dynamic_year_quarter_combo", + _createCombo(v, watermark) { + const o = this.options; + const combo = createWidget({ + type: DynamicYearQuarterCombo.xtype, supportDynamic: o.supportDynamic, minDate: o.minDate, maxDate: o.maxDate, behaviors: o.behaviors, value: v, height: o.height, - watermark: watermark, - listeners: [{ - eventName: BI.DynamicYearQuarterCombo.EVENT_BEFORE_POPUPVIEW, - action: function () { - self.fireEvent(BI.YearQuarterInterval.EVENT_BEFORE_POPUPVIEW); + watermark, + listeners: [ + { + eventName: DynamicYearQuarterCombo.EVENT_BEFORE_POPUPVIEW, + action: () => { + this.fireEvent( + YearQuarterInterval.EVENT_BEFORE_POPUPVIEW + ); + }, } - }] + ], }); - combo.on(BI.DynamicYearQuarterCombo.EVENT_ERROR, function () { - self._clearTitle(); - BI.Bubbles.hide("error"); - self.element.removeClass(self.constants.timeErrorCls); - self.fireEvent(BI.YearQuarterInterval.EVENT_ERROR); + combo.on(DynamicYearQuarterCombo.EVENT_ERROR, () => { + this._clearTitle(); + Bubbles.hide("error"); + this.element.removeClass(this.constants.timeErrorCls); + this.fireEvent(YearQuarterInterval.EVENT_ERROR); }); - combo.on(BI.DynamicYearQuarterCombo.EVENT_VALID, function () { - self._checkValid(); + combo.on(DynamicYearQuarterCombo.EVENT_VALID, () => { + this._checkValid(); }); - combo.on(BI.DynamicYearQuarterCombo.EVENT_FOCUS, function () { - self._checkValid(); + combo.on(DynamicYearQuarterCombo.EVENT_FOCUS, () => { + this._checkValid(); }); - combo.on(BI.DynamicYearQuarterCombo.EVENT_CONFIRM, function () { - BI.Bubbles.hide("error"); - var smallDate = self.left.getKey(), bigDate = self.right.getKey(); - if (self.left.isStateValid() && self.right.isStateValid() && self._check(smallDate, bigDate) && self._compare(smallDate, bigDate)) { - self._setTitle(BI.i18nText("BI-Time_Interval_Error_Text")); - self.element.addClass(self.constants.timeErrorCls); - self.fireEvent(BI.YearQuarterInterval.EVENT_ERROR); - }else{ - self._clearTitle(); - self.element.removeClass(self.constants.timeErrorCls); - self.fireEvent(BI.YearQuarterInterval.EVENT_CHANGE); + combo.on(DynamicYearQuarterCombo.EVENT_CONFIRM, () => { + Bubbles.hide("error"); + const smallDate = this.left.getKey(), + bigDate = this.right.getKey(); + if ( + this.left.isStateValid() && + this.right.isStateValid() && + this._check(smallDate, bigDate) && + this._compare(smallDate, bigDate) + ) { + this._setTitle(i18nText("BI-Time_Interval_Error_Text")); + this.element.addClass(this.constants.timeErrorCls); + this.fireEvent(YearQuarterInterval.EVENT_ERROR); + } else { + this._clearTitle(); + this.element.removeClass(this.constants.timeErrorCls); + this.fireEvent(YearQuarterInterval.EVENT_CHANGE); } }); + return combo; - }, - - - _dateCheck: function (date) { - return BI.print(BI.parseDateTime(date, "%Y-%Q"), "%Y-%Q") === date || BI.print(BI.parseDateTime(date, "%Y-%q"), "%Y-%q") === date; - }, + } + _dateCheck(date) { + return ( + print(parseDateTime(date, "%Y-%Q"), "%Y-%Q") === date || + print(parseDateTime(date, "%Y-%q"), "%Y-%q") === date + ); + } - // 判是否在最大最小之间 - _checkVoid: function (obj) { - var o = this.options; - return !BI.checkDateVoid(obj.year, (obj.quarter - 1) * 3 + 1, 1, o.minDate, o.maxDate)[0]; - }, + _checkVoid(obj) { + const o = this.options; + + return !checkDateVoid( + obj.year, + (obj.quarter - 1) * 3 + 1, + 1, + o.minDate, + o.maxDate + )[0]; + } - // 判格式合法 - _check: function (smallDate, bigDate) { - var smallObj = smallDate.match(/\d+/g), bigObj = bigDate.match(/\d+/g); + _check(smallDate, bigDate) { + const smallObj = smallDate.match(/\d+/g), + bigObj = bigDate.match(/\d+/g); - var smallDate4Check = ""; - if (BI.isNotNull(smallObj)) { - smallDate4Check = (smallObj[0] || "") + "-" + (smallObj[1] || 1); + let smallDate4Check = ""; + if (isNotNull(smallObj)) { + smallDate4Check = `${smallObj[0] || ""}-${smallObj[1] || 1}`; } - var bigDate4Check = ""; - if (BI.isNotNull(bigObj)) { - bigDate4Check = (bigObj[0] || "") + "-" + (bigObj[1] || 1); + let bigDate4Check = ""; + if (isNotNull(bigObj)) { + bigDate4Check = `${bigObj[0] || ""}-${bigObj[1] || 1}`; } - return this._dateCheck(smallDate4Check) && BI.checkDateLegal(smallDate4Check) && this._checkVoid({ - year: smallObj[0], - quarter: smallObj[1] || 1 - }) && this._dateCheck(bigDate4Check) && BI.checkDateLegal(bigDate4Check) && this._checkVoid({ - year: bigObj[0], - quarter: bigObj[1] || 1 - }); - }, - - _compare: function (smallDate, bigDate) { - smallDate = BI.print(BI.parseDateTime(smallDate, "%Y-%Q"), "%Y-%Q"); - bigDate = BI.print(BI.parseDateTime(bigDate, "%Y-%Q"), "%Y-%Q"); - return BI.isNotNull(smallDate) && BI.isNotNull(bigDate) && smallDate > bigDate; - }, - _setTitle: function (v) { + return ( + this._dateCheck(smallDate4Check) && + checkDateLegal(smallDate4Check) && + this._checkVoid({ + year: smallObj[0], + quarter: smallObj[1] || 1, + }) && + this._dateCheck(bigDate4Check) && + checkDateLegal(bigDate4Check) && + this._checkVoid({ + year: bigObj[0], + quarter: bigObj[1] || 1, + }) + ); + } + + _compare(smallDate, bigDate) { + smallDate = print(parseDateTime(smallDate, "%Y-%Q"), "%Y-%Q"); + bigDate = print(parseDateTime(bigDate, "%Y-%Q"), "%Y-%Q"); + + return ( + isNotNull(smallDate) && isNotNull(bigDate) && smallDate > bigDate + ); + } + + _setTitle(v) { this.setTitle(v); - }, - _clearTitle: function () { + } + + _clearTitle() { this.setTitle(""); - }, - _checkValid: function () { - var self = this; - - BI.Bubbles.hide("error"); - var smallDate = self.left.getKey(), bigDate = self.right.getKey(); - if (self.left.isValid() && self.right.isValid() && self._check(smallDate, bigDate) && self._compare(smallDate, bigDate)) { - self._setTitle(BI.i18nText("BI-Time_Interval_Error_Text")); - self.element.addClass(self.constants.timeErrorCls); - BI.Bubbles.show("error", BI.i18nText("BI-Time_Interval_Error_Text"), self, { - offsetStyle: "center" - }); - self.fireEvent(BI.YearQuarterInterval.EVENT_ERROR); + } + + _checkValid() { + Bubbles.hide("error"); + const smallDate = this.left.getKey(), + bigDate = this.right.getKey(); + if ( + this.left.isValid() && + this.right.isValid() && + this._check(smallDate, bigDate) && + this._compare(smallDate, bigDate) + ) { + this._setTitle(i18nText("BI-Time_Interval_Error_Text")); + this.element.addClass(this.constants.timeErrorCls); + Bubbles.show( + "error", + i18nText("BI-Time_Interval_Error_Text"), + this, + { + offsetStyle: "center", + } + ); + this.fireEvent(YearQuarterInterval.EVENT_ERROR); } else { - self._clearTitle(); - self.element.removeClass(self.constants.timeErrorCls); + this._clearTitle(); + this.element.removeClass(this.constants.timeErrorCls); } - }, + } - setMinDate: function (minDate) { - var o = this.options; + setMinDate(minDate) { + const o = this.options; o.minDate = minDate; this.left.setMinDate(minDate); this.right.setMinDate(minDate); - }, + } - setMaxDate: function (maxDate) { - var o = this.options; + setMaxDate(maxDate) { + const o = this.options; o.maxDate = maxDate; this.left.setMaxDate(maxDate); this.right.setMaxDate(maxDate); - }, + } - setValue: function (date) { + setValue(date) { date = date || {}; this.left.setValue(date.start); this.right.setValue(date.end); this._checkValid(); - }, - getValue: function () { - return {start: this.left.getValue(), end: this.right.getValue()}; } -}); -BI.YearQuarterInterval.EVENT_VALID = "EVENT_VALID"; -BI.YearQuarterInterval.EVENT_ERROR = "EVENT_ERROR"; -BI.YearQuarterInterval.EVENT_CHANGE = "EVENT_CHANGE"; -BI.YearQuarterInterval.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW"; -BI.shortcut("bi.year_quarter_interval", BI.YearQuarterInterval); + + getValue() { + return { start: this.left.getValue(), end: this.right.getValue() }; + } +}