Pull request #1559: KERNEL-5989 refactor:fineui tree重构

Merge in VISUAL/fineui from ~DAILER/fineui:feature/树控件 to master

* commit 'f5ad3b444933880a9be6ed67cf7bdaef022b6848':
  KERNEL-5989 refactor:fineui tree重构
  KERNEL-5989 refactor:fineui tree重构

src/case/tree/tree.level.js

@@ -26,7 +26,7 @@ BI.LevelTree = BI.inherit(BI.Widget, {
     _formatItems: function (nodes, layer, pNode) {
         var self = this;
         BI.each(nodes, function (i, node) {
-            var extend = {layer: layer};
+            var extend = { layer: layer };
             if (!BI.isKey(node.id)) {
                 node.id = BI.UUID();
             }
@@ -38,7 +38,7 @@ BI.LevelTree = BI.inherit(BI.Widget, {
                     extend.isLastNode = true;
                 }
                 if (i === 0 && !pNode) {
-                    extend.type = "bi.first_plus_group_node"
+                    extend.type = "bi.first_plus_group_node";
                 }
                 if (i === 0 && i === nodes.length - 1) {  // 根
                     extend.type = "bi.plus_group_node";
@@ -48,7 +48,7 @@ BI.LevelTree = BI.inherit(BI.Widget, {
             } else {
                 extend.type = "bi.mid_tree_leaf_item";
                 if (i === 0 && !pNode) {
-                    extend.type = "bi.first_tree_leaf_item"
+                    extend.type = "bi.first_tree_leaf_item";
                 }
                 if (i === nodes.length - 1) {
                     extend.type = "bi.last_tree_leaf_item";

src/case/tree/treeexpander/tree.expander.js

@@ -0,0 +1,72 @@
+!(function () {
+    var Widget = BI.inherit(BI.Widget, {
+        props: {
+            baseCls: "bi-tree-expander",
+            layer: 0,   // 第几层级
+            isLastNode: false, //   是不是最后一个
+            isFirstNode: false, // 是不是第一个
+            selectable: false,
+        },
+
+        render: function () {
+
+            var self = this;
+            var o = this.options;
+
+            this.trigger = BI.createWidget(o.el, {
+                forceNotSelected: !o.selectable,
+            });
+            this.trigger.on(BI.Controller.EVENT_CHANGE, function (type) {
+                o.selectable && self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+            });
+
+            return {
+                type: "bi.expander",
+                ref: function (_ref) {
+                    self.expander = _ref;
+                },
+                trigger: o.selectable ? "" : "click",
+                el: this.trigger,
+                isDefaultInit: o.isDefaultInit,
+                popup: {
+                    type: "bi.tree_expander.popup",
+                    layer: o.layer || o.el.layer,
+                    isLastNode: o.isLastNode || o.el.isLastNode,
+                    isFirstNode: o.isFirstNode || o.el.isFirstNode,
+                    el: o.popup,
+                },
+                listeners: [
+                    {
+                        eventName: BI.Controller.EVENT_CHANGE,
+                        action: function (type) {
+                            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+                        },
+                    },
+                ],
+            };
+        },
+
+        setValue: function (v) {
+            if (BI.contains(v, this.trigger.getValue())) {
+                this.trigger.setSelected(true);
+                this.expander.setValue([]);
+            } else {
+                this.trigger.setSelected(false);
+                this.expander.setValue(v);
+            }
+        },
+
+        getValue: function () {
+            if (this.trigger.isSelected()) {
+                return [this.trigger.getValue()];
+            }
+            return this.expander.getValue();
+        },
+
+        populate: function (items) {
+            this.expander.populate(items);
+        },
+    });
+
+    BI.shortcut("bi.tree_expander", Widget);
+}());

src/case/tree/treeexpander/tree.expander.popup.js

@@ -0,0 +1,47 @@
+!(function () {
+    var Widget = BI.inherit(BI.Widget, {
+        props: {
+            baseCls: "bi-tree-expander-popup",
+            layer: 0, // 第几层级
+            el: {},
+            isLastNode: false,
+        },
+
+        render: function () {
+
+            var self = this;
+            var o = this.options;
+
+            this.popupView = BI.createWidget(o.el, this);
+
+            this.popupView.on(BI.Controller.EVENT_CHANGE, function () {
+                self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+            });
+            this.popupView.element.css("margin-left", -12 * o.layer);
+            this.element.css("margin-left", 12 * o.layer);
+
+            return {
+                type: "bi.vertical",
+                cls: !o.isLastNode ? "line" : "",
+                scrolly: null,
+                items: [
+                    this.popupView,
+                ],
+            };
+        },
+
+        setValue: function (v) {
+            this.popupView.setValue(v);
+        },
+
+        getValue: function () {
+            return this.popupview.getValue();
+        },
+
+        populate: function (items) {
+            this.popupview.populate(items);
+        },
+    });
+
+    BI.shortcut("bi.tree_expander.popup", Widget);
+}());

src/less/base/tree/tree.expander.less

@@ -0,0 +1,9 @@
+@import "../../index";
+.bi-tree-expander-popup.line:before {
+  position: absolute;
+  content: "";
+  border-left: 1px dashed #D0D4DA;
+  height: 100%;
+  left: 11px;
+}
+

src/widget/multilayerselecttree/multilayerselecttree.leveltree.js

@@ -32,7 +32,10 @@ BI.MultiLayerSelectLevelTree = BI.inherit(BI.Pane, {
         var self = this, o = this.options;
         var keyword = o.keywordGetter();
         BI.each(nodes, function (i, node) {
-            var extend = {};
+            var extend = {
+                isFirstNode: i === 0,
+                isLastNode: i === nodes.length - 1
+            };
             node.layer = layer;
             if (!BI.isKey(node.id)) {
                 node.id = BI.UUID();
@@ -40,26 +43,31 @@ BI.MultiLayerSelectLevelTree = BI.inherit(BI.Pane, {
             node.keyword = node.keyword || keyword;
             extend.pNode = pNode;
             if (node.isParent === true || node.parent === true || BI.isNotEmptyArray(node.children)) {
-                extend.type = "bi.multilayer_select_tree_mid_plus_group_node";
-                if (i === nodes.length - 1) {
-                    extend.type = "bi.multilayer_select_tree_last_plus_group_node";
-                    extend.isLastNode = true;
-                }
-                if (i === 0 && !pNode) {
-                    extend.type = "bi.multilayer_select_tree_first_plus_group_node";
-                }
-                if (i === 0 && i === nodes.length - 1 && !pNode) {  // 根
+
+                if (layer === 0 && extend.isFirstNode && extend.isLastNode) {
                     extend.type = "bi.multilayer_select_tree_plus_group_node";
+                } else if (layer === 0 && extend.isFirstNode) {
+                    extend.type = "bi.multilayer_select_tree_first_plus_group_node";
+                } else if (extend.isLastNode) {
+                    extend.type = "bi.multilayer_select_tree_last_plus_group_node";
+                } else {
+                    extend.type = "bi.multilayer_select_tree_mid_plus_group_node";
                 }
+
+
+
                 BI.defaults(node, extend);
                 self._formatItems(node.children, layer + 1, node);
             } else {
-                extend.type = "bi.multilayer_single_tree_mid_tree_leaf_item";
-                if (i === 0 && !pNode) {
+
+                if (layer === 0 && extend.isFirstNode && extend.isLastNode) {
+                    extend.type = ""; // todo 缺一个根节点的item
+                } else if (layer === 0 && extend.isFirstNode) {
                     extend.type = "bi.multilayer_single_tree_first_tree_leaf_item";
-                }
-                if (i === nodes.length - 1) {
+                } else if (extend.isLastNode) {
                     extend.type = "bi.multilayer_single_tree_last_tree_leaf_item";
+                } else {
+                    extend.type = "bi.multilayer_single_tree_mid_tree_leaf_item";
                 }
                 BI.defaults(node, extend);
             }
@@ -83,7 +91,9 @@ BI.MultiLayerSelectLevelTree = BI.inherit(BI.Pane, {
             type: "bi.custom_tree",
             cls: "tree-view display-table",
             expander: {
-                type: "bi.select_tree_expander",
+                // type: "bi.select_tree_expander",
+                type: "bi.tree_expander",
+                selectable: true,
                 isDefaultInit: o.isDefaultInit,
                 el: {},
                 popup: {
@@ -151,7 +161,7 @@ BI.MultiLayerSelectLevelTree = BI.inherit(BI.Pane, {
 
     setValue: function (v) {
         // getValue依赖于storeValue, 那么不选的时候就不要更新storeValue了
-        if(this.options.chooseType === BI.Selection.None) {
+        if (this.options.chooseType === BI.Selection.None) {
         } else {
             this.storeValue = v;
             this.tree.setValue(v);

src/widget/multilayerselecttree/node/node.first.plus.js

@@ -43,25 +43,19 @@ BI.MultiLayerSelectTreeFirstPlusGroupNode = BI.inherit(BI.NodeButton, {
             self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
         });
 
-        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
-            });
+        // 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 * 12
         });
-        items.push(this.node);
         BI.createWidget({
             type: "bi.horizontal_adapt",
             element: this,

src/widget/multilayerselecttree/node/node.last.plus.js

@@ -43,25 +43,12 @@ BI.MultiLayerSelectTreeLastPlusGroupNode = BI.inherit(BI.NodeButton, {
             self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
         });
 
-        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({
+            el: this.node,
+            lgap: o.layer * 12
         });
-        items.push(this.node);
         BI.createWidget({
             type: "bi.horizontal_adapt",
             element: this,

src/widget/multilayerselecttree/node/node.mid.plus.js

@@ -43,25 +43,12 @@ BI.MultiLayerSelectTreeMidPlusGroupNode = BI.inherit(BI.NodeButton, {
             self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
         });
 
-        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({
+            el: this.node,
+            lgap: o.layer * 12
         });
-        items.push(this.node);
         BI.createWidget({
             type: "bi.horizontal_adapt",
             element: this,

src/widget/multilayerselecttree/node/node.plus.js

@@ -43,25 +43,12 @@ BI.MultiLayerSelectTreePlusGroupNode = BI.inherit(BI.NodeButton, {
             self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
         });
 
-        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({
+            el: this.node,
+            lgap: o.layer * 12
         });
-        items.push(this.node);
         BI.createWidget({
             type: "bi.horizontal_adapt",
             element: this,

src/widget/multilayersingletree/multilayersingletree.leveltree.js

@@ -32,7 +32,10 @@ BI.MultiLayerSingleLevelTree = BI.inherit(BI.Pane, {
         var self = this, o = this.options;
         var keyword = o.keywordGetter();
         BI.each(nodes, function (i, node) {
-            var extend = {};
+            var extend = {
+                isFirstNode: i === 0,
+                isLastNode: i === nodes.length - 1
+            };
             node.layer = layer;
             if (!BI.isKey(node.id)) {
                 node.id = BI.UUID();
@@ -40,27 +43,31 @@ BI.MultiLayerSingleLevelTree = BI.inherit(BI.Pane, {
             node.keyword = node.keyword || keyword;
             extend.pNode = pNode;
             if (node.isParent === true || node.parent === true || BI.isNotEmptyArray(node.children)) {
-                extend.type = "bi.multilayer_single_tree_mid_plus_group_node";
-                if (i === nodes.length - 1) {
-                    extend.type = "bi.multilayer_single_tree_last_plus_group_node";
-                    extend.isLastNode = true;
-                }
-                if (i === 0 && !pNode) {
-                    extend.type = "bi.multilayer_single_tree_first_plus_group_node";
-                }
-                if (i === 0 && i === nodes.length - 1 && !pNode) {  // 根
+
+                if (layer === 0 && extend.isFirstNode && extend.isLastNode) {
                     extend.type = "bi.multilayer_single_tree_plus_group_node";
+                } else if (layer === 0 && extend.isFirstNode) {
+                    extend.type = "bi.multilayer_single_tree_first_plus_group_node";
+                } else if (extend.isLastNode) {
+                    extend.type = "bi.multilayer_single_tree_last_plus_group_node";
+                } else {
+                    extend.type = "bi.multilayer_single_tree_mid_plus_group_node";
                 }
+
                 BI.defaults(node, extend);
                 self._formatItems(node.children, layer + 1, node);
             } else {
-                extend.type = "bi.multilayer_single_tree_mid_tree_leaf_item";
-                if (i === 0 && !pNode) {
+
+                if (layer === 0 && extend.isFirstNode && extend.isLastNode) {
+                    extend.type = ""; // todo 缺一个根节点的item
+                } else if (layer === 0 && extend.isFirstNode) {
                     extend.type = "bi.multilayer_single_tree_first_tree_leaf_item";
-                }
-                if (i === nodes.length - 1) {
+                } else if (extend.isLastNode) {
                     extend.type = "bi.multilayer_single_tree_last_tree_leaf_item";
+                } else {
+                    extend.type = "bi.multilayer_single_tree_mid_tree_leaf_item";
                 }
+
                 BI.defaults(node, extend);
             }
         });
@@ -83,6 +90,7 @@ BI.MultiLayerSingleLevelTree = BI.inherit(BI.Pane, {
             type: "bi.custom_tree",
             cls: "tree-view display-table",
             expander: {
+                type: "bi.tree_expander",
                 isDefaultInit: o.isDefaultInit,
                 el: {},
                 popup: {
@@ -150,7 +158,7 @@ BI.MultiLayerSingleLevelTree = BI.inherit(BI.Pane, {
 
     setValue: function (v) {
         // getValue依赖于storeValue, 那么不选的时候就不要更新storeValue了
-        if(this.options.chooseType === BI.Selection.None) {
+        if (this.options.chooseType === BI.Selection.None) {
         } else {
             this.storeValue = v;
             this.tree.setValue(v);
@@ -159,8 +167,8 @@ BI.MultiLayerSingleLevelTree = BI.inherit(BI.Pane, {
 
     getValue: function () {
         return BI.isArray(this.storeValue) ?
-                    this.storeValue : BI.isNull(this.storeValue) ?
-                        [] : [this.storeValue];
+            this.storeValue : BI.isNull(this.storeValue) ?
+                [] : [this.storeValue];
     },
 
     getAllLeaves: function () {

src/widget/multilayersingletree/node/node.first.plus.js

@@ -22,25 +22,12 @@ BI.MultiLayerSingleTreeFirstPlusGroupNode = BI.inherit(BI.NodeButton, {
         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({
+            el: this.node,
+            lgap: o.layer * 12
         });
-        items.push(this.node);
         BI.createWidget({
             type: "bi.horizontal_adapt",
             element: this,

src/widget/multilayersingletree/node/node.last.plus.js

@@ -22,25 +22,12 @@ BI.MultiLayerSingleTreeLastPlusGroupNode = BI.inherit(BI.NodeButton, {
         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({
+            el: this.node,
+            lgap: o.layer * 12
         });
-        items.push(this.node);
         BI.createWidget({
             type: "bi.horizontal_adapt",
             element: this,

src/widget/multilayersingletree/node/node.mid.plus.js

@@ -22,25 +22,12 @@ BI.MultiLayerSingleTreeMidPlusGroupNode = BI.inherit(BI.NodeButton, {
         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({
+            el: this.node,
+            lgap: o.layer * 12
         });
-        items.push(this.node);
         BI.createWidget({
             type: "bi.horizontal_adapt",
             element: this,

src/widget/multilayersingletree/treeitem/item.first.treeleaf.js

@@ -42,26 +42,12 @@ BI.MultiLayerSingleTreeFirstTreeLeafItem = BI.inherit(BI.BasicButton, {
             self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
         });
 
-
-        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({
+            el: this.item,
+            lgap: o.layer * 12
         });
-        items.push(this.item);
         BI.createWidget({
             type: "bi.horizontal_adapt",
             element: this,

src/widget/multilayersingletree/treeitem/item.last.treeleaf.js

@@ -42,25 +42,12 @@ BI.MultiLayerSingleTreeLastTreeLeafItem = BI.inherit(BI.BasicButton, {
             self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
         });
 
-        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({
+            el: this.item,
+            lgap: o.layer * 12
         });
-        items.push(this.item);
         BI.createWidget({
             type: "bi.horizontal_adapt",
             element: this,

src/widget/multilayersingletree/treeitem/item.mid.treeleaf.js

@@ -42,25 +42,12 @@ BI.MultiLayerSingleTreeMidTreeLeafItem = BI.inherit(BI.BasicButton, {
             self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
         });
 
-        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({
+            el: this.item,
+            lgap: o.layer * 12
         });
-        items.push(this.item);
         BI.createWidget({
             type: "bi.horizontal_adapt",
             element: this,