bbj-screen-widget 2.4.44 → 2.4.45

package/bundles/bbj-screen-widget.umd.js

@@ -12364,6 +12364,7 @@
                 left: 0,
             };
             this.checkable = false;
+            this.outputType = 'array';
             this.checkStrictly = false;
             this.showLine = false;
             this.expandAll = false;
@@ -12393,6 +12394,7 @@
             this.keyChange = new i0.EventEmitter();
             this.nodes = [];
             this.selectedKeys = [];
+            // checkedKeys: string[] = [];
             this.style = {};
         }
         TreeControlComponent.prototype.ngOnInit = function () {
@@ -12421,7 +12423,14 @@
                 data.forEach(function (_a) {
                     var title = _a.title, key = _a.key, parentKey = _a.parentKey, parentKey_value = _a.parentKey_value, icon = _a.icon, count = _a.count;
                     if (key) {
-                        var node = { key: key, title: title, parentKey: parentKey_value || parentKey, icon: icon, isLeaf: true, count: count };
+                        var node = {
+                            key: key,
+                            title: title,
+                            parentKey: parentKey_value || parentKey,
+                            icon: icon,
+                            isLeaf: true,
+                            count: count,
+                        };
                         if (_this.selectedKeys.includes(key)) {
                             node.selected = true;
                         }
@@ -12478,7 +12487,12 @@
             this.waittingSelect = null;
             this.selectedKeys = keys;
             if (this.checkable) {
-                this.keyChange.emit(keys);
+                if (this.outputType === 'string') {
+                    this.keyChange.emit(keys === null || keys === void 0 ? void 0 : keys.join(';'));
+                }
+                else {
+                    this.keyChange.emit(keys);
+                }
             }
             else {
                 this.keyChange.emit(keys[0]);
@@ -12509,18 +12523,39 @@
             this.searchValue = value;
         };
         TreeControlComponent.prototype.select = function (id) {
+            var _this = this;
             var find = false;
-            if (this.nodes) {
-                var node = this.arrayService.findTree(this.nodes, function (n) { return n.key === id; });
-                if (node) {
-                    this.onKeysChange([id]);
-                    this.nodeClick(node.key, node.title);
-                    find = true;
+            var keys = [];
+            if (id) {
+                if (this.checkable) {
+                    if (typeof id === 'string') {
+                        id = id.split(';');
+                    }
+                    keys.push.apply(keys, __spread(id));
+                }
+                else {
+                    keys.push(id);
                 }
             }
-            // 数据有可能还没加载，等数据加载了再选中
-            if (!find) {
-                this.waittingSelect = id;
+            this.selectedKeys = keys;
+            if (keys.length) {
+                if (this.nodes) {
+                    var nodes_1 = [];
+                    this.arrayService.visitTree(this.nodes, function (n) {
+                        if (keys.includes(n.key)) {
+                            nodes_1.push(n);
+                        }
+                    });
+                    if (nodes_1.length) {
+                        this.onKeysChange(keys);
+                        nodes_1.forEach(function (node) { return _this.nodeClick(node.key, node.title); });
+                        find = true;
+                    }
+                }
+                // 数据有可能还没加载，等数据加载了再选中
+                if (!find) {
+                    this.waittingSelect = id;
+                }
             }
         };
         TreeControlComponent.prototype.nodeClick = function (id, title) { };
@@ -12530,7 +12565,7 @@
     exports.ɵct.decorators = [
         { type: i0.Component, args: [{
                     selector: 'sc-tree-control',
-                    template: "<div *ngIf=\"showSearch\" class=\"searchBox\">\n  <input\n    class=\"search-input\"\n    type=\"text\"\n    nz-input\n    [(ngModel)]=\"searchValue\"\n    [placeholder]=\"searchPlaceholder\"\n    [style]=\"{ 'border-color': searchBorderColor, background: searchBackgroundColor }\"\n  />\n  <i nz-icon nzType=\"search\"></i>\n</div>\n\n<div class=\"warp-tree\">\n  <nz-tree\n    [ngClass]=\"{ 'ant-tree-nodeBgCustom': nodeBackground }\"\n    [ngStyle]=\"style\"\n    [nzData]=\"nodes\"\n    [nzCheckable]=\"checkable\"\n    [nzExpandAll]=\"expandAll\"\n    [nzShowLine]=\"showLine\"\n    [nzExpandedKeys]=\"expandedKeys\"\n    [nzCheckStrictly]=\"checkStrictly\"\n    [nzExpandedIcon]=\"nodeDefaultIcon ? multiExpandedIconTpl : null\"\n    [nzTreeTemplate]=\"nzTreeTemplate\"\n    [nzSearchValue]=\"searchValue\"\n    [nzHideUnMatched]=\"true\"\n    [nzSelectedKeys]=\"selectedKeys\"\n    (nzClick)=\"onClick($event)\"\n    (nzDblClick)=\"onNodeDblclick($event)\"\n    (nzCheckBoxChange)=\"onCheckBoxChange($event)\"\n  >\n  </nz-tree>\n  <ng-template #multiExpandedIconTpl let-node let-origin=\"origin\">\n    <img [src]=\"nodeDefaultIcon\" [class]=\"node.isExpanded ? 'nodeImg-open' : ''\" />\n  </ng-template>\n\n  <ng-template #nzTreeTemplate let-node let-origin=\"origin\">\n    <div\n      class=\"custom-node\"\n      [style.color]=\"node.isSelected ? nodeCheckedColor : ''\"\n      [style.backgroundImage]=\"\n        node.isSelected ? 'url(' + nodeCheckedBackground + ')' : nodeBackground ? 'url(' + nodeBackground + ')' : ''\n      \"\n      [style.padding]=\"\n        (grid?.top || 0) + 'px ' + (grid?.right || 0) + 'px ' + (grid?.bottom || 0) + 'px ' + (grid?.left || 0) + 'px'\n      \"\n    >\n      <img\n        *ngIf=\"origin.icon && iconPosition !== 'right'\"\n        [src]=\"origin.icon\"\n        [style.width.px]=\"iconWidth\"\n        [style.height.px]=\"iconHeight\"\n      />\n      <span\n        *ngIf=\"edittingNode !== node\"\n        class=\"folder-name\"\n        [innerHTML]=\"node.title | nzHighlight: searchValue:'i':'font-highlight'\"\n        (click)=\"showNode(node)\"\n      ></span>\n      <input *ngIf=\"edittingNode === node\" #renameInput nz-input [(ngModel)]=\"node.title\" (blur)=\"renameEnd(node)\" />\n\n      <span class=\"node-count\" [class.noCount]=\"origin.count === '0'\" *ngIf=\"origin.count || origin.count === '0'\"\n        >({{ origin.count }})</span\n      >\n      <img\n        *ngIf=\"origin.icon && iconPosition === 'right'\"\n        [src]=\"origin.icon\"\n        [style.width.px]=\"iconWidth\"\n        [style.height.px]=\"iconHeight\"\n      />\n\n      <!-- \n\n      <img\n        *ngIf=\"origin.icon && iconPosition !== 'right'\"\n        [src]=\"origin.icon\"\n        [style.width.px]=\"iconWidth\"\n        [style.height.px]=\"iconHeight\"\n      />\n      <span\n        *ngIf=\"edittingNode !== node\"\n        class=\"folder-name\"\n        [innerHTML]=\"node.title | nzHighlight: searchValue:'i':'font-highlight'\"\n      ></span>\n      <input *ngIf=\"edittingNode === node\" #renameInput nz-input [(ngModel)]=\"node.title\" (blur)=\"renameEnd(node)\" />\n      <img\n        *ngIf=\"origin.icon && iconPosition === 'right'\"\n        [src]=\"origin.icon\"\n        [style.width.px]=\"iconWidth\"\n        [style.height.px]=\"iconHeight\"\n      /> -->\n    </div>\n  </ng-template>\n</div>\n",
+                    template: "<div *ngIf=\"showSearch\" class=\"searchBox\">\n  <input\n    class=\"search-input\"\n    type=\"text\"\n    nz-input\n    [(ngModel)]=\"searchValue\"\n    [placeholder]=\"searchPlaceholder\"\n    [style]=\"{ 'border-color': searchBorderColor, background: searchBackgroundColor }\"\n  />\n  <i nz-icon nzType=\"search\"></i>\n</div>\n\n<div class=\"warp-tree\">\n  <nz-tree\n    #tree\n    [ngClass]=\"{ 'ant-tree-nodeBgCustom': nodeBackground }\"\n    [ngStyle]=\"style\"\n    [nzData]=\"nodes\"\n    [nzCheckable]=\"checkable\"\n    [nzMultiple]=\"checkable\"\n    [nzExpandAll]=\"expandAll\"\n    [nzShowLine]=\"showLine\"\n    [nzExpandedKeys]=\"expandedKeys\"\n    [nzCheckStrictly]=\"checkStrictly\"\n    [nzExpandedIcon]=\"nodeDefaultIcon ? multiExpandedIconTpl : null\"\n    [nzTreeTemplate]=\"nzTreeTemplate\"\n    [nzSearchValue]=\"searchValue\"\n    [nzHideUnMatched]=\"true\"\n    [nzSelectedKeys]=\"selectedKeys\"\n    [nzCheckedKeys]=\"selectedKeys\"\n    (nzClick)=\"onClick($event)\"\n    (nzDblClick)=\"onNodeDblclick($event)\"\n    (nzCheckBoxChange)=\"onCheckBoxChange($event)\"\n  >\n  </nz-tree>\n  <ng-template #multiExpandedIconTpl let-node let-origin=\"origin\">\n    <img [src]=\"nodeDefaultIcon\" [class]=\"node.isExpanded ? 'nodeImg-open' : ''\" />\n  </ng-template>\n\n  <ng-template #nzTreeTemplate let-node let-origin=\"origin\">\n    <div\n      class=\"custom-node\"\n      [style.color]=\"node.isSelected ? nodeCheckedColor : ''\"\n      [style.backgroundImage]=\"\n        node.isSelected ? 'url(' + nodeCheckedBackground + ')' : nodeBackground ? 'url(' + nodeBackground + ')' : ''\n      \"\n      [style.padding]=\"\n        (grid?.top || 0) + 'px ' + (grid?.right || 0) + 'px ' + (grid?.bottom || 0) + 'px ' + (grid?.left || 0) + 'px'\n      \"\n    >\n      <img\n        *ngIf=\"origin.icon && iconPosition !== 'right'\"\n        [src]=\"origin.icon\"\n        [style.width.px]=\"iconWidth\"\n        [style.height.px]=\"iconHeight\"\n      />\n      <span\n        *ngIf=\"edittingNode !== node\"\n        class=\"folder-name\"\n        [innerHTML]=\"node.title | nzHighlight: searchValue:'i':'font-highlight'\"\n        (click)=\"showNode(node)\"\n      ></span>\n      <input *ngIf=\"edittingNode === node\" #renameInput nz-input [(ngModel)]=\"node.title\" (blur)=\"renameEnd(node)\" />\n\n      <span class=\"node-count\" [class.noCount]=\"origin.count === '0'\" *ngIf=\"origin.count || origin.count === '0'\"\n        >({{ origin.count }})</span\n      >\n      <img\n        *ngIf=\"origin.icon && iconPosition === 'right'\"\n        [src]=\"origin.icon\"\n        [style.width.px]=\"iconWidth\"\n        [style.height.px]=\"iconHeight\"\n      />\n\n      <!-- \n\n      <img\n        *ngIf=\"origin.icon && iconPosition !== 'right'\"\n        [src]=\"origin.icon\"\n        [style.width.px]=\"iconWidth\"\n        [style.height.px]=\"iconHeight\"\n      />\n      <span\n        *ngIf=\"edittingNode !== node\"\n        class=\"folder-name\"\n        [innerHTML]=\"node.title | nzHighlight: searchValue:'i':'font-highlight'\"\n      ></span>\n      <input *ngIf=\"edittingNode === node\" #renameInput nz-input [(ngModel)]=\"node.title\" (blur)=\"renameEnd(node)\" />\n      <img\n        *ngIf=\"origin.icon && iconPosition === 'right'\"\n        [src]=\"origin.icon\"\n        [style.width.px]=\"iconWidth\"\n        [style.height.px]=\"iconHeight\"\n      /> -->\n    </div>\n  </ng-template>\n</div>\n",
                     styles: [":host{display:block;height:100%;width:100%;overflow:hidden;display:flex;flex-direction:column}.ant-tree,.ant-tree ::ng-deep .ant-tree-checkbox-inner,.ant-tree ::ng-deep .ant-tree-switcher{background:initial}.ant-tree ::ng-deep .ant-tree-switcher-icon{font-size:inherit}.ant-tree ::ng-deep .ant-tree-checkbox{color:inherit}.ant-tree ::ng-deep .ant-tree-checkbox-checked .ant-tree-checkbox-inner:after{border-color:#1890ff}.ant-tree ::ng-deep .ant-tree-switcher-noop>i{display:none}.ant-tree ::ng-deep .ant-tree-node-content-wrapper.ant-tree-node-selected,.ant-tree ::ng-deep .ant-tree-node-content-wrapper:hover{background-color:var(--selected-background)}::ng-deep .ant-tree.ant-tree-nodeBgCustom .ant-tree-node-content-wrapper{flex:1}::ng-deep .ant-tree.ant-tree-nodeBgCustom nz-tree-node-switcher{width:16px}.custom-node{display:flex;align-items:center;white-space:nowrap;background-repeat:no-repeat;background-size:180px 8px;background-position:0 bottom}.searchBox{position:relative;margin-bottom:20px}.searchBox .search-input{line-height:32px;height:32px;color:#7a8799;outline:none;box-shadow:none}.searchBox i.anticon{width:16px;height:16px;color:#8f9ab3;position:absolute;top:10px;right:10px}.warp-tree{flex:1;overflow:auto}.warp-tree::-webkit-scrollbar-thumb{background-color:var(--treeScrollbar-thumb-background,\"#ddd\")!important}.warp-tree::-webkit-scrollbar-corner{background-color:transparent}.folder-name{flex:1}.node-count{color:hsla(0,0%,100%,.8)}.node-count.noCount{color:#7a8799}"]
                 },] }
     ];
@@ -12539,6 +12574,7 @@
         { type: i0.ElementRef }
     ]; };
     exports.ɵct.propDecorators = {
+        tree: [{ type: i0.ViewChild, args: ['tree',] }],
         renameInput: [{ type: i0.ViewChild, args: ['renameInput',] }]
     };
     __decorate([
@@ -12553,6 +12589,20 @@
         bbjWidgetBase.Property('复选框', { type: 'boolean' }),
         __metadata("design:type", Object)
     ], exports.ɵct.prototype, "checkable", void 0);
+    __decorate([
+        bbjWidgetBase.Property('输出格式', {
+            type: 'string',
+            enum: [
+                { label: '数组', value: 'array' },
+                { label: '字符串', value: 'string' },
+            ],
+            ui: {
+                widget: 'select',
+                visibleIf: { checkable: [true] },
+            },
+        }),
+        __metadata("design:type", Object)
+    ], exports.ɵct.prototype, "outputType", void 0);
     __decorate([
         bbjWidgetBase.Property('选择完全受控', {
             type: 'boolean',
@@ -12598,7 +12648,7 @@
             type: 'string',
             ui: {
                 widget: 'myUpload',
-            }
+            },
         }),
         __metadata("design:type", Object)
     ], exports.ɵct.prototype, "nodeDefaultIcon", void 0);
@@ -12607,7 +12657,7 @@
             type: 'string',
             ui: {
                 widget: 'myUpload',
-            }
+            },
         }),
         __metadata("design:type", Object)
     ], exports.ɵct.prototype, "nodeBackground", void 0);
@@ -12624,7 +12674,7 @@
             type: 'string',
             ui: {
                 widget: 'myUpload',
-            }
+            },
         }),
         __metadata("design:type", Object)
     ], exports.ɵct.prototype, "nodeCheckedBackground", void 0);
@@ -12640,8 +12690,8 @@
         bbjWidgetBase.Property('搜索框颜色', {
             ui: {
                 widget: 'myColor',
-                visibleIf: { showSearch: [true] }
-            }
+                visibleIf: { showSearch: [true] },
+            },
         }),
         __metadata("design:type", Object)
     ], exports.ɵct.prototype, "searchBorderColor", void 0);
@@ -12649,8 +12699,8 @@
         bbjWidgetBase.Property('搜索框背景色', {
             ui: {
                 widget: 'myColor',
-                visibleIf: { showSearch: [true] }
-            }
+                visibleIf: { showSearch: [true] },
+            },
         }),
         __metadata("design:type", Object)
     ], exports.ɵct.prototype, "searchBackgroundColor", void 0);
@@ -12658,8 +12708,8 @@
         bbjWidgetBase.Property('搜索框提示语', {
             type: 'string',
             ui: {
-                visibleIf: { showSearch: [true] }
-            }
+                visibleIf: { showSearch: [true] },
+            },
         }),
         __metadata("design:type", Object)
     ], exports.ɵct.prototype, "searchPlaceholder", void 0);
@@ -12667,7 +12717,7 @@
         bbjWidgetBase.Property('滚动条颜色', {
             ui: {
                 widget: 'myColor',
-            }
+            },
         }),
         __metadata("design:type", Object)
     ], exports.ɵct.prototype, "treeScrollbarThumbBackground", void 0);
@@ -12678,11 +12728,15 @@
                 key: { type: 'string', title: 'id' },
                 parentKey: { type: 'string', title: '父级id' },
                 icon: { type: 'string', title: '图标' },
-                count: { type: 'string', title: '数量' }
+                count: { type: 'string', title: '数量' },
             },
         }),
         __metadata("design:type", Object)
     ], exports.ɵct.prototype, "data", void 0);
+    __decorate([
+        bbjWidgetBase.DataInput('选中值'),
+        __metadata("design:type", Object)
+    ], exports.ɵct.prototype, "value", void 0);
     __decorate([
         bbjWidgetBase.DataOutput('选中id'),
         bbjWidgetBase.Event('选中值改变', { params: 'id' }),
@@ -12699,7 +12753,7 @@
         bbjWidgetBase.Method('选中'),
         __param(0, bbjWidgetBase.Param('id')),
         __metadata("design:type", Function),
-        __metadata("design:paramtypes", [String]),
+        __metadata("design:paramtypes", [Object]),
         __metadata("design:returntype", void 0)
     ], exports.ɵct.prototype, "select", null);
     __decorate([