KERNEL-10683 && DESIGN-4160 feat: 整理简化FIneUI树控件的node和item,同时支持父节点不可选中但可以展开收起功能

demo/js/case/tree/demo.level_tree.js

@@ -42,6 +42,11 @@ Demo.Func = BI.inherit(BI.Widget, {
                 pId: 1,
                 text: "子项3",
                 value: 13
+            }, {
+                id: 111,
+                pId: 11,
+                text: "子项1-1",
+                value: 111
             }, {
                 id: 21,
                 pId: 2,

demo/js/widget/tree/demo.multilayer_select_level_tree.js

@@ -33,7 +33,7 @@ Demo.MultiLayerSelectLevelTree = BI.inherit(BI.Widget, {
                     height: 25,
                     text: "setValue (第二级文件1)",
                     handler: function () {
-                        tree.setValue(["第二级文件1"]);
+                        tree.setValue(["11"]);
                     }
                 },
                 height: 25

demo/js/widget/tree/demo.multilayer_single_level_tree.js

@@ -46,27 +46,27 @@ Demo.MultiLayerSingleLevelTree = BI.inherit(BI.Widget, {
     mounted: function () {
         var tree = [
             // {id: -2, pId: 0, value: "根目录1", text: "根目录1"},
-            {id: -1, pId: 0, value: "根目录", text: "根目录"},
+            { id: -1, pId: 0, value: "根目录", text: "根目录" },
-            {id: 1, pId: -1, value: "第一级目录1", text: "第一级目录1"},
+            { id: 1, pId: -1, value: "第一级目录1", text: "第一级目录1" },
-            {id: 11, pId: 1, value: "第二级文件1", text: "第二级文件1"},
+            { id: 11, pId: 1, value: "第二级文件1", text: "第二级文件1" },
-            {id: 12, pId: 1, value: "第二级目录2", text: "第二级目录2"},
+            { id: 12, pId: 1, value: "第二级目录2", text: "第二级目录2", disabled: true },
-            {id: 121, pId: 12, value: "第三级目录1", text: "第三级目录1"},
+            { id: 121, pId: 12, value: "第三级目录1", text: "第三级目录1" },
-            {id: 122, pId: 12, value: "第三级文件1", text: "第三级文件1"},
+            { id: 122, pId: 12, value: "第三级文件1", text: "第三级文件1" },
-            {id: 1211, pId: 121, value: "第四级目录1", text: "第四级目录1"},
+            { id: 1211, pId: 121, value: "第四级目录1", text: "第四级目录1" },
-            {id: 2, pId: -1, value: "第一级目录2", text: "第一级目录2"},
+            { id: 2, pId: -1, value: "第一级目录2", text: "第一级目录2" },
-            {id: 21, pId: 2, value: "第二级目录3", text: "第二级目录3"},
+            { id: 21, pId: 2, value: "第二级目录3", text: "第二级目录3" },
-            {id: 22, pId: 2, value: "第二级文件2", text: "第二级文件2"},
+            { id: 22, pId: 2, value: "第二级文件2", text: "第二级文件2" },
-            {id: 211, pId: 21, value: "第三级目录2", text: "第三级目录2"},
+            { id: 211, pId: 21, value: "第三级目录2", text: "第三级目录2" },
-            {id: 212, pId: 21, value: "第三级文件2", text: "第三级文件2"},
+            { id: 212, pId: 21, value: "第三级文件2", text: "第三级文件2" },
-            {id: 2111, pId: 211, value: "第四级文件1", text: "第四级文件1"},
+            { id: 2111, pId: 211, value: "第四级文件1", text: "第四级文件1" },
-            {id: 3, pId: -1, value: "第一级目录3", text: "第一级目录3"},
+            { id: 3, pId: -1, value: "第一级目录3", text: "第一级目录3" },
-            {id: 31, pId: 3, value: "第二级文件2", text: "第二级文件2"},
+            { id: 31, pId: 3, value: "第二级文件2", text: "第二级文件2" },
-            {id: 33, pId: 3, value: "第二级目录3", text: "第二级目录1"},
+            { id: 33, pId: 3, value: "第二级目录3", text: "第二级目录1" },
-            {id: 32, pId: 3, value: "第二级文件3", text: "第二级文件3"},
+            { id: 32, pId: 3, value: "第二级文件3", text: "第二级文件3" },
-            {id: 331, pId: 33, value: "第三级文件1", text: "第三级文件1"}
+            { id: 331, pId: 33, value: "第三级文件1", text: "第三级文件1" }
         ];
         this.tree.populate(tree);
     }
 });
 
-BI.shortcut("demo.multilayer_single_level_tree", Demo.MultiLayerSingleLevelTree);
+BI.shortcut("demo.multilayer_single_level_tree", Demo.MultiLayerSingleLevelTree);

src/case/button/node/siwtcher.tree.node.js

@@ -0,0 +1,59 @@
+BI.TreeNodeSwitcher = BI.inherit(BI.NodeButton, {
+    _defaultConfig: function () {
+        return BI.extend(BI.TreeNodeSwitcher.superclass._defaultConfig.apply(this, arguments), {
+            baseCls: "bi-tree-node-switcher",
+            iconWidth: 24,
+            iconHeight: 24,
+            isFirstNode: false,
+            isLastNode: false,
+            layer: 0
+        });
+    },
+
+    render: function () {
+
+        const [collapse, expand] = this.getIconCls();
+
+        return {
+            type: "bi.icon_label",
+            iconWidth: this.options.iconWidth,
+            iconHeight: this.options.iconHeight,
+            cls: this.options.open ? expand : collapse,
+        };
+    },
+
+    getIconCls: function () {
+        var options = this.options;
+        if (options.layer === 0 && options.isFirstNode && options.isLastNode) {
+            //  只有一层，并且是第一个节点，并且是最后一个节点
+            return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? ["tree-solid-collapse-icon-type1", "tree-solid-expand-icon-type1"] : ["tree-collapse-icon-type1", "tree-expand-icon-type1"];
+        } else if (options.layer === 0 && options.isFirstNode) {
+            //  第一层，并且是第一个节点
+            return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? ["tree-solid-collapse-icon-type2", "tree-solid-expand-icon-type2"] : ["tree-collapse-icon-type2", "tree-expand-icon-type2"];
+        } else if (options.isLastNode) {
+            //  最后一个节点
+            return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? ["tree-solid-collapse-icon-type4", "tree-solid-expand-icon-type4"] : ["tree-collapse-icon-type4", "tree-expand-icon-type4"];
+        } else {
+            //  其他情况
+            return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? ["tree-solid-collapse-icon-type3", "tree-solid-expand-icon-type3"] : ["tree-collapse-icon-type3", "tree-expand-icon-type3"];
+        }
+    },
+
+    setOpened: function (b) {
+        BI.TreeNodeSwitcher.superclass.setOpened.apply(this, arguments);
+        const [collapse, expand] = this.getIconCls();
+        if (b) {
+            this.element.addClass(expand).removeClass(collapse);
+        } else {
+            this.element.addClass(collapse).removeClass(expand);
+        }
+    },
+
+    doClick: function () {
+        BI.TreeNodeSwitcher.superclass.doClick.apply(this, arguments);
+        this.fireEvent(BI.TreeNodeSwitcher.EVENT_CHANGE, this);
+    }
+});
+
+BI.TreeNodeSwitcher.EVENT_CHANGE = "EVENT_CHANGE";
+BI.shortcut("bi.tree_node_switcher", BI.TreeNodeSwitcher);

src/case/button/node/treenode.js

@@ -0,0 +1,106 @@
+BI.BasicTreeNode = BI.inherit(BI.NodeButton, {
+    _defaultConfig: function (props) {
+        var conf = BI.BasicTreeNode.superclass._defaultConfig.apply(this, arguments);
+        return BI.extend(conf, {
+            baseCls: (conf.baseCls || "") + " bi-tree-node " + (props.selectable ? "bi-list-item-active" : "bi-list-item"),
+            id: "",
+            pId: "",
+            open: false,
+            height: 24,
+            readonly: true,
+            isFirstNode: false,
+            isLastNode: false,
+            switcherIcon: {},
+            selectable: true,
+            disabled: false, // disabled不会影响展开收起功能
+        });
+    },
+
+    render: function () {
+        var self = this, o = this.options;
+
+        const checkbox = {
+            type: "bi.tree_node_switcher",
+            __ref: function (_ref) {
+                self.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,
+            mounted: function () {
+                this.setEnable(true);
+            },
+            listeners: [
+                {
+                    eventName: "EVENT_CHANGE",
+                    action: () => {
+                        if (!this.isEnabled() || o.selectable) {
+                            this.isOpened() ? this.triggerCollapse() : this.triggerExpand();
+                        }
+                    }
+                }
+            ]
+        };
+
+        return {
+            type: "bi.vertical_adapt",
+            columnSize: [o.iconWrapperWidth || o.height, "fill"],
+            items: [
+                {
+                    el: checkbox,
+                    lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2,  //  偏移公式为每一层的偏移量为节点高度的一半
+                }, {
+                    el: {
+                        type: "bi.label",
+                        ref: function (_ref) {
+                            self.text = _ref;
+                        },
+                        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
+                    }
+                }
+            ]
+        };
+    },
+
+    doRedMark: function () {
+        this.text.doRedMark.apply(this.text, arguments);
+    },
+
+    unRedMark: function () {
+        this.text.unRedMark.apply(this.text, arguments);
+    },
+
+    doClick: function () {
+        if (this.options.selectable) {
+            return;
+        }
+        BI.BasicTreeNode.superclass.doClick.apply(this, arguments);
+    },
+
+    setOpened: function (v) {
+        BI.BasicTreeNode.superclass.setOpened.apply(this, arguments);
+        this.switcher.setOpened(v);
+    },
+
+    setValue: function () {
+        BI.BasicTreeNode.superclass.setValue.apply(this, arguments);
+    }
+});
+
+BI.shortcut("bi.tree_node", BI.BasicTreeNode);

src/case/button/treeitem/treeitem.js

@@ -0,0 +1,90 @@
+BI.BasicTreeItem = BI.inherit(BI.NodeButton, {
+    _defaultConfig: function () {
+        var conf = BI.BasicTreeItem.superclass._defaultConfig.apply(this, arguments);
+        return BI.extend(conf, {
+            baseCls: (conf.baseCls || "") + " bi-tree-item bi-list-item-active",
+            id: "",
+            pId: "",
+            height: 24,
+            readonly: true,
+            isFirstNode: false,
+            isLastNode: false,
+            switcherIcon: {},
+            selectable: true,
+            disabled: false, // disabled不会影响展开收起功能
+        });
+    },
+
+    render: function () {
+        var self = this, o = this.options;
+
+        return {
+            type: "bi.vertical_adapt",
+            columnSize: ["", "fill"],
+            items: [
+                {
+                    el: {
+                        type: "bi.layout",
+                        width: 24,
+                        height: o.height,
+                        width: o.height,
+                        cls: this.getLineCls(),
+                    },
+                    lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2,  //  偏移公式为每一层的偏移量为节点高度的一半
+                },
+                {
+                    el: {
+                        type: "bi.label",
+                        ref: function (_ref) {
+                            self.text = _ref;
+                        },
+                        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
+                    },
+                }
+            ]
+        };
+    },
+
+    getLineCls: function () {
+        var options = this.options;
+        if (options.layer === 0 && options.isFirstNode && options.isLastNode) {
+            return "";
+        } else if (options.layer === 0 && options.isFirstNode) {
+            return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "first-solid-line-conn-background" : "first-line-conn-background";
+        } else if (options.isLastNode) {
+            return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "last-solid-line-conn-background" : "last-line-conn-background";
+        } else {
+            return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "mid-solid-line-conn-background" : "mid-line-conn-background";
+        }
+    },
+
+    doRedMark: function () {
+        this.text.doRedMark.apply(this.text, arguments);
+    },
+
+    unRedMark: function () {
+        this.text.unRedMark.apply(this.text, arguments);
+    },
+
+    getId: function () {
+        return this.options.id;
+    },
+
+    getPId: function () {
+        return this.options.pId;
+    }
+
+});
+
+BI.shortcut("bi.tree_item", BI.BasicTreeItem);

src/case/tree/tree.level.js

@@ -26,33 +26,24 @@ BI.LevelTree = BI.inherit(BI.Widget, {
     _formatItems: function (nodes, layer, pNode) {
         var self = this;
         BI.each(nodes, function (i, node) {
-            var extend = { layer: layer, height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT };
+            var extend = {
+                layer: layer,
+                height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
+                isFirstNode: i === 0,
+                isLastNode: i === nodes.length - 1,
+            };
             if (!BI.isKey(node.id)) {
                 node.id = BI.UUID();
             }
             extend.pNode = pNode;
             if (node.isParent === true || node.parent === true || BI.isNotEmptyArray(node.children)) {
-                extend.type = "bi.mid_plus_group_node";
+                extend.type = "bi.tree_node";
-                if (i === nodes.length - 1) {
+                extend.selectable = false;
-                    extend.type = "bi.last_plus_group_node";
+
-                    extend.isLastNode = true;
-                }
-                if (i === 0 && !pNode) {
-                    extend.type = "bi.first_plus_group_node";
-                }
-                if (i === 0 && i === nodes.length - 1) {  // 根
-                    extend.type = "bi.plus_group_node";
-                }
                 BI.defaults(node, extend);
                 self._formatItems(node.children, layer + 1, node);
             } else {
-                extend.type = "bi.mid_tree_leaf_item";
+                extend.type = "bi.tree_item";
-                if (i === 0 && !pNode) {
-                    extend.type = "bi.first_tree_leaf_item";
-                }
-                if (i === nodes.length - 1) {
-                    extend.type = "bi.last_tree_leaf_item";
-                }
                 BI.defaults(node, extend);
             }
         });
@@ -76,12 +67,14 @@ BI.LevelTree = BI.inherit(BI.Widget, {
             type: "bi.custom_tree",
             element: this,
             expander: BI.extend({
+                type: "bi.tree_expander",
                 el: {},
+                isDefaultInit: false,
+                selectable: false,
                 popup: {
                     type: "bi.custom_tree"
                 }
             }, o.expander),
-
             items: this._formatItems(BI.Tree.transformToTreeFormat(nodes), 0),
             value: o.value,
 
@@ -97,6 +90,7 @@ BI.LevelTree = BI.inherit(BI.Widget, {
             self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
             if (type === BI.Events.CLICK) {
                 self.fireEvent(BI.LevelTree.EVENT_CHANGE, value, ob);
+                self.setValue(value);
             }
         });
     },

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

@@ -59,7 +59,8 @@
 
         getValue: function () {
             if (this.trigger.isSelected()) {
-                return [this.trigger.getValue()];
+                var value = this.trigger.getValue();
+                return BI.isArray(value) ? value : [value];
             }
             return this.expander.getValue();
         },

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

@@ -40,11 +40,11 @@
         },
 
         getValue: function () {
-            return this.popupview.getValue();
+            return this.popupView.getValue();
         },
 
         populate: function (items) {
-            this.popupview.populate(items);
+            this.popupView.populate(items);
         },
 
         getAllLeaves: function () {

src/widget/multilayerselecttree/multilayerselecttree.leveltree.js

@@ -44,30 +44,12 @@ 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.tree_node";
-                if (layer === 0 && extend.isFirstNode && extend.isLastNode) {
+                extend.selectable = true;
-                    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.tree_item";
-                if (layer === 0 && extend.isFirstNode && extend.isLastNode) {
-                    extend.type = "bi.root_tree_leaf_item";
-                } else if (layer === 0 && extend.isFirstNode) {
-                    extend.type = "bi.multilayer_single_tree_first_tree_leaf_item";
-                } 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);
             }
         });

src/widget/multilayersingletree/multilayersingletree.leveltree.js

@@ -44,31 +44,12 @@ 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.tree_node";
-                if (layer === 0 && extend.isFirstNode && extend.isLastNode) {
+                extend.selectable = false;
-                    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.tree_item";
-                if (layer === 0 && extend.isFirstNode && extend.isLastNode) {
-                    extend.type = "bi.root_tree_leaf_item";
-                } else if (layer === 0 && extend.isFirstNode) {
-                    extend.type = "bi.multilayer_single_tree_first_tree_leaf_item";
-                } 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);
             }
         });

src/widget/selecttree/selecttree.popup.js

@@ -17,32 +17,40 @@ BI.SelectTreePopup = BI.inherit(BI.Pane, {
     _formatItems: function (nodes, layer, pNode) {
         var self = this;
         BI.each(nodes, function (i, node) {
-            var extend = {layer: layer};
+            var extend = {
+                layer: layer,
+                isFirstNode: i === 0,
+                isLastNode: i === nodes.length - 1,
+                height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
+                pNode: pNode,
+            };
             node.id = node.id || BI.UUID();
-            extend.pNode = pNode;
+
-            extend.height = BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT;
             if (node.isParent === true || node.parent === true || BI.isNotEmptyArray(node.children)) {
-                extend.type = "bi.select_tree_mid_plus_group_node";
+
-                if (i === nodes.length - 1) {
+                extend.type = "bi.tree_node";
-                    extend.type = "bi.select_tree_last_plus_group_node";
+                extend.selectable = true;
-                    extend.isLastNode = true;
+                // if (i === nodes.length - 1) {
-                }
+                //     extend.type = "bi.select_tree_last_plus_group_node";
-                if (i === 0 && !pNode) {
+                //     extend.isLastNode = true;
-                    extend.type = "bi.select_tree_first_plus_group_node"
+                // }
-                }
+                // if (i === 0 && !pNode) {
-                if (i === 0 && i === nodes.length - 1) {  // 根
+                //     extend.type = "bi.select_tree_first_plus_group_node";
-                    extend.type = "bi.select_tree_plus_group_node";
+                // }
-                }
+                // if (i === 0 && i === nodes.length - 1) {  // 根
+                //     extend.type = "bi.select_tree_plus_group_node";
+                // }
                 BI.defaults(node, extend);
                 self._formatItems(node.children, layer + 1, node);
             } else {
-                extend.type = "bi.mid_tree_leaf_item";
+                extend.type = "bi.tree_item";
-                if (i === 0 && !pNode) {
+                // extend.type = "bi.mid_tree_leaf_item";
-                    extend.type = "bi.first_tree_leaf_item"
+                // if (i === 0 && !pNode) {
-                }
+                //     extend.type = "bi.first_tree_leaf_item";
-                if (i === nodes.length - 1) {
+                // }
-                    extend.type = "bi.last_tree_leaf_item";
+                // if (i === nodes.length - 1) {
-                }
+                //     extend.type = "bi.last_tree_leaf_item";
+                // }
                 BI.defaults(node, extend);
             }
         });
@@ -57,8 +65,9 @@ BI.SelectTreePopup = BI.inherit(BI.Pane, {
         this.tree = BI.createWidget({
             type: "bi.level_tree",
             expander: {
-                type: "bi.select_tree_expander",
+                type: "bi.tree_expander",
-                isDefaultInit: true
+                // isDefaultInit: true,
+                selectable: true,
             },
             items: this._formatItems(BI.Tree.transformToTreeFormat(o.items), 0),
             value: o.value,
@@ -99,4 +108,4 @@ BI.SelectTreePopup = BI.inherit(BI.Pane, {
 });
 
 BI.SelectTreePopup.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.select_level_tree", BI.SelectTreePopup);
+BI.shortcut("bi.select_level_tree", BI.SelectTreePopup);