bbj-screen-widget 2.4.62 → 2.4.63

package/src/lib/tree-control/tree-control.component.html

@@ -1,97 +0,0 @@
-<div *ngIf="showSearch" class="searchBox">
-  <input
-    class="search-input"
-    type="text"
-    nz-input
-    [(ngModel)]="searchValue"
-    [placeholder]="searchPlaceholder"
-    [style]="{ 'border-color': searchBorderColor, background: searchBackgroundColor }"
-  />
-  <i nz-icon nzType="search"></i>
-</div>
-
-<div class="warp-tree">
-  <nz-tree
-    #tree
-    [ngClass]="{ 'ant-tree-nodeBgCustom': nodeBackground }"
-    [ngStyle]="style"
-    [nzData]="nodes"
-    [nzCheckable]="checkable"
-    [nzMultiple]="checkable"
-    [nzExpandAll]="expandAll"
-    [nzShowLine]="showLine"
-    [nzExpandedKeys]="expandedKeys"
-    [nzCheckStrictly]="checkStrictly"
-    [nzExpandedIcon]="nodeDefaultIcon ? multiExpandedIconTpl : null"
-    [nzTreeTemplate]="nzTreeTemplate"
-    [nzSearchValue]="searchValue"
-    [nzHideUnMatched]="true"
-    [nzSelectedKeys]="selectedKeys"
-    [nzCheckedKeys]="selectedKeys"
-    (nzClick)="onClick($event)"
-    (nzDblClick)="onNodeDblclick($event)"
-    (nzCheckBoxChange)="onCheckBoxChange($event)"
-  >
-  </nz-tree>
-  <ng-template #multiExpandedIconTpl let-node let-origin="origin">
-    <img [src]="nodeDefaultIcon" [class]="node.isExpanded ? 'nodeImg-open' : ''" />
-  </ng-template>
-
-  <ng-template #nzTreeTemplate let-node let-origin="origin">
-    <div
-      class="custom-node"
-      [style.color]="node.isSelected ? nodeCheckedColor : ''"
-      [style.backgroundImage]="
-        node.isSelected ? 'url(' + nodeCheckedBackground + ')' : nodeBackground ? 'url(' + nodeBackground + ')' : ''
-      "
-      [style.padding]="
-        (grid?.top || 0) + 'px ' + (grid?.right || 0) + 'px ' + (grid?.bottom || 0) + 'px ' + (grid?.left || 0) + 'px'
-      "
-    >
-      <img
-        *ngIf="origin.icon && iconPosition !== 'right'"
-        [src]="origin.icon"
-        [style.width.px]="iconWidth"
-        [style.height.px]="iconHeight"
-      />
-      <span
-        *ngIf="edittingNode !== node"
-        class="folder-name"
-        [innerHTML]="node.title | nzHighlight: searchValue:'i':'font-highlight'"
-        (click)="showNode(node)"
-      ></span>
-      <input *ngIf="edittingNode === node" #renameInput nz-input [(ngModel)]="node.title" (blur)="renameEnd(node)" />
-
-      <span class="node-count" [class.noCount]="origin.count === '0'" *ngIf="origin.count || origin.count === '0'"
-        >({{ origin.count }})</span
-      >
-      <img
-        *ngIf="origin.icon && iconPosition === 'right'"
-        [src]="origin.icon"
-        [style.width.px]="iconWidth"
-        [style.height.px]="iconHeight"
-      />
-
-      <!-- 
-
-      <img
-        *ngIf="origin.icon && iconPosition !== 'right'"
-        [src]="origin.icon"
-        [style.width.px]="iconWidth"
-        [style.height.px]="iconHeight"
-      />
-      <span
-        *ngIf="edittingNode !== node"
-        class="folder-name"
-        [innerHTML]="node.title | nzHighlight: searchValue:'i':'font-highlight'"
-      ></span>
-      <input *ngIf="edittingNode === node" #renameInput nz-input [(ngModel)]="node.title" (blur)="renameEnd(node)" />
-      <img
-        *ngIf="origin.icon && iconPosition === 'right'"
-        [src]="origin.icon"
-        [style.width.px]="iconWidth"
-        [style.height.px]="iconHeight"
-      /> -->
-    </div>
-  </ng-template>
-</div>

package/src/lib/tree-control/tree-control.component.less

@@ -1,111 +0,0 @@
-:host {
-  display: block;
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.ant-tree {
-  background: initial;
-
-  ::ng-deep {
-
-    .ant-tree-switcher,
-    .ant-tree-checkbox-inner {
-      background: initial;
-    }
-
-    .ant-tree-switcher-icon {
-      font-size: inherit;
-    }
-
-    .ant-tree-checkbox {
-      color: inherit;
-    }
-
-    .ant-tree-checkbox-checked .ant-tree-checkbox-inner::after {
-      border-color: #1890ff;
-    }
-
-    .ant-tree-switcher-noop>i {
-      display: none;
-    }
-
-    .ant-tree-node-content-wrapper.ant-tree-node-selected {
-      background-color: var(--selected-background);
-    }
-
-    .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;
-    }
-
-    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;
-
-  .search-input {
-    line-height: 32px;
-    height: 32px;
-    color: #7A8799;
-    outline: none;
-    box-shadow: none;
-  }
-
-  i.anticon {
-    width: 16px;
-    height: 16px;
-    color: #8F9AB3;
-    position: absolute;
-    top: 10px;
-    right: 10px;
-  }
-}
-
-.warp-tree {
-  flex: 1;
-  overflow: auto;
-  &::-webkit-scrollbar-thumb {
-    background-color: var(--treeScrollbar-thumb-background, '#ddd') !important;
-  }
-
-  &::-webkit-scrollbar-corner {
-    background-color: transparent;
-  }
-}
-
-.folder-name {
-  flex: 1;
-}
-
-.node-count {
-  color: rgba(255, 255, 255, 0.8);
-
-  &.noCount {
-    color: #7A8799;
-  }
-}

package/src/lib/tree-control/tree-control.component.spec.ts

@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
-import { TreeControlComponent } from './tree-control.component';
-
-describe('TreeControlComponent', () => {
-  let component: TreeControlComponent;
-  let fixture: ComponentFixture<TreeControlComponent>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ TreeControlComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(TreeControlComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/tree-control/tree-control.component.ts

@@ -1,363 +0,0 @@
-import { Component, OnInit, SimpleChanges, OnChanges, EventEmitter, ElementRef, ViewChild } from '@angular/core';
-import { Data, Property, Widget, DataOutput, Event, EventParam, Method, Param, DataInput } from 'bbj-widget-base';
-import { NzFormatEmitEvent, NzTreeComponent, NzTreeNode, NzTreeNodeOptions } from 'ng-zorro-antd/tree';
-import { ArrayService } from '@delon/util';
-import { getFontStyle } from '../shared/util/style.util';
-
-@Component({
-  selector: 'sc-tree-control',
-  templateUrl: './tree-control.component.html',
-  styleUrls: ['./tree-control.component.less'],
-})
-@Widget('树控件', {
-  group: 'component',
-  image: 'assets/img/screen/Tree.png',
-  icon: 'bianzu40',
-})
-export class TreeControlComponent implements OnInit, OnChanges {
-  @Property('字体', { ui: { widget: 'myFont' } })
-  font: any = {
-    family: '',
-    color: '#595F7A',
-    weight: 'normal',
-    size: 16,
-    space: 0,
-    lineHeight: 0,
-  };
-  @Property('边距', { ui: { widget: 'myGrid' } })
-  grid: any = {
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-  };
-  @Property('复选框', { type: 'boolean' })
-  checkable = false;
-  @Property('输出格式', {
-    type: 'string',
-    enum: [
-      { label: '数组', value: 'array' },
-      { label: '字符串', value: 'string' },
-    ],
-    ui: {
-      widget: 'select',
-      visibleIf: { checkable: [true] },
-    },
-  })
-  outputType = 'array';
-  @Property('选择完全受控', {
-    type: 'boolean',
-    ui: { optionalHelp: '父子节点选中状态不再关联', visibleIf: { checkable: [true] } },
-  })
-  checkStrictly = false;
-  @Property('连接线', { type: 'boolean' })
-  showLine = false;
-  @Property('展开所有', { type: 'boolean' })
-  expandAll = false;
-  @Property('展开层级', {
-    type: 'integer',
-    minimum: 0,
-    ui: { precision: 0, visibleIf: { expandAll: [false] } },
-  })
-  expandLevel = 0;
-
-  @Property('图标宽度', { type: 'integer' })
-  iconWidth = 20;
-  @Property('图标高度', { type: 'integer' })
-  iconHeight = 20;
-  @Property('图标位置', {
-    enum: [
-      { label: '左', value: 'left' },
-      { label: '右', value: 'right' },
-    ],
-  })
-  iconPosition = 'left';
-
-  @Property('节点图标', {
-    type: 'string',
-    ui: {
-      widget: 'myUpload',
-    },
-  })
-  nodeDefaultIcon = null;
-  @Property('节点背景', {
-    type: 'string',
-    ui: {
-      widget: 'myUpload',
-    },
-  })
-  nodeBackground = null;
-
-  @Property('节点选中背景色', { ui: { widget: 'myColor' } })
-  selectedBackground = '#bae7ff';
-
-  @Property('节点选中字体色', { ui: { widget: 'myColor' } })
-  nodeCheckedColor = '#333';
-
-  @Property('节点选中背景', {
-    type: 'string',
-    ui: {
-      widget: 'myUpload',
-    },
-  })
-  nodeCheckedBackground = null;
-
-  @Property('双击重命名')
-  renamable: boolean;
-  @Property('显示搜索框')
-  showSearch: boolean;
-  searchValue: string;
-
-  @Property('搜索框颜色', {
-    ui: {
-      widget: 'myColor',
-      visibleIf: { showSearch: [true] },
-    },
-  })
-  searchBorderColor = '#8F9AB3';
-
-  @Property('搜索框背景色', {
-    ui: {
-      widget: 'myColor',
-      visibleIf: { showSearch: [true] },
-    },
-  })
-  searchBackgroundColor = 'rgba(0,0,0,0)';
-
-  @Property('搜索框提示语', {
-    type: 'string',
-    ui: {
-      visibleIf: { showSearch: [true] },
-    },
-  })
-  searchPlaceholder = '请输入搜索内容';
-
-  @Property('滚动条颜色', {
-    ui: {
-      widget: 'myColor',
-    },
-  })
-  treeScrollbarThumbBackground = '#ddd';
-
-  @Data({
-    properties: {
-      title: { type: 'string', title: '标题' },
-      key: { type: 'string', title: 'id' },
-      parentKey: { type: 'string', title: '父级id' },
-      icon: { type: 'string', title: '图标' },
-      count: { type: 'string', title: '数量' },
-    },
-  })
-  data = [
-    { title: '江苏省', key: '300', parentKey: '' },
-    { title: '浙江省', key: '100', parentKey: '' },
-    { title: '杭州市', key: '1001', parentKey: '100' },
-    { title: '顶顶区', key: '10010', parentKey: '1001' },
-    { title: '的方区', key: '10011', parentKey: '1001' },
-    { title: '温州市', key: '1002', parentKey: '100' },
-    { title: '鹿城区', key: '10020', parentKey: '1002' },
-    { title: '龙湾区', key: '10021', parentKey: '1002' },
-  ];
-
-  @DataInput('选中值')
-  value: any;
-
-  @DataOutput('选中id')
-  @Event('选中值改变', { params: 'id' })
-  keyChange = new EventEmitter<any>();
-
-  nodes: NzTreeNodeOptions[] = [];
-
-  expandedKeys: string[];
-
-  edittingNode: NzTreeNode; // 正在重命名的节点
-
-  @ViewChild('tree')
-  tree: NzTreeComponent;
-
-  @ViewChild('renameInput')
-  renameInput: ElementRef;
-
-  selectedKeys: string[] = [];
-  // checkedKeys: string[] = [];
-  style = {};
-  waittingSelect: string | string[];
-
-  paddNum: any;
-  constructor(private arrayService: ArrayService, private elementRef: ElementRef) {}
-
-  ngOnInit(): void {
-    document.body.style.setProperty('--treeScrollbar-thumb-background', this.treeScrollbarThumbBackground || '#ddd');
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes.data) {
-      this.nodes = this.toTree(this.data);
-      if (this.waittingSelect) {
-        this.select(this.waittingSelect);
-      }
-    }
-    if (changes.font) {
-      this.updateStyle();
-    }
-
-    if (changes.data || changes.expandLevel || changes.expandAll) {
-      this.expand();
-    }
-  }
-
-  toTree(data: any[]) {
-    const nodeMap = {};
-    const nodes = [];
-    const root = [];
-    if (data) {
-      data.forEach(({ title, key, parentKey, parentKey_value, icon, count }) => {
-        if (key) {
-          const node: NzTreeNodeOptions = {
-            key,
-            title,
-            parentKey: parentKey_value || parentKey,
-            icon,
-            isLeaf: true,
-            count,
-          };
-          if (this.selectedKeys.includes(key)) {
-            node.selected = true;
-          }
-          nodeMap[key] = node;
-          nodes.push(node);
-        }
-      });
-      nodes.forEach((node) => {
-        if (node.parentKey) {
-          const parent = nodeMap[node.parentKey];
-          if (parent) {
-            parent.children = parent.children || [];
-            parent.children.push(node);
-            parent.isLeaf = false;
-            return;
-          }
-        }
-        root.push(node);
-      });
-    }
-    return root;
-  }
-
-  expand() {
-    // TODO nz的bug，在数据改变之后nzExpandAll无效，等修复了可以切换成这里的代码
-    // if (!this.expandAll) {
-    //   this.expandedKeys = [];
-    //   if (this.expandLevel) {
-    //     this.arrayService.visitTree(this.nodes, (item, parent, deep) => {
-    //       if (deep <= this.expandLevel) {
-    //         this.expandedKeys.push(item.key);
-    //       }
-    //     });
-    //   }
-    // }
-    this.expandedKeys = [];
-    if (this.expandAll || this.expandLevel) {
-      this.arrayService.visitTree(this.nodes, (item, parent, deep) => {
-        if (this.expandAll || deep <= this.expandLevel) {
-          this.expandedKeys.push(item.key);
-        }
-      });
-    }
-  }
-
-  updateStyle() {
-    this.style = getFontStyle(this.font);
-    this.elementRef.nativeElement.style.setProperty('--selected-background', this.selectedBackground || '#bae7ff');
-  }
-
-  onClick(event: NzFormatEmitEvent) {
-    this.onKeysChange(event.keys);
-    this.nodeClick(event.node.key, event.node.title);
-  }
-
-  onKeysChange(keys: string[]) {
-    this.waittingSelect = null;
-    this.selectedKeys = keys;
-    if (this.checkable) {
-      if (this.outputType === 'string') {
-        this.keyChange.emit(keys?.join(';'));
-      } else {
-        this.keyChange.emit(keys);
-      }
-    } else {
-      this.keyChange.emit(keys[0]);
-    }
-  }
-
-  onCheckBoxChange(event: NzFormatEmitEvent) {
-    this.onKeysChange(event.keys);
-  }
-
-  onNodeDblclick(event: NzFormatEmitEvent) {
-    if (this.renamable) {
-      this.edittingNode = event.node;
-      setTimeout(() => {
-        if (this.renameInput) {
-          this.renameInput.nativeElement.focus();
-        }
-      });
-    }
-  }
-
-  renameEnd(node: NzTreeNode) {
-    this.edittingNode = null;
-    this.rename(node.key, node.title);
-  }
-
-  showNode(e) {
-    console.log(e);
-  }
-
-  @Method('搜索')
-  search(@Param('内容') value: string) {
-    this.searchValue = value;
-  }
-
-  @Method('选中')
-  select(@Param('id') id: string | string[]) {
-    let find = false;
-    const keys = [];
-    if (id) {
-      if (this.checkable) {
-        if (typeof id === 'string') {
-          id = id.split(';');
-        }
-        keys.push(...id);
-      } else {
-        keys.push(id);
-      }
-    }
-    this.selectedKeys = keys;
-    if (keys.length) {
-      if (this.nodes) {
-        const nodes = [];
-        this.arrayService.visitTree(this.nodes, (n) => {
-          if (keys.includes(n.key)) {
-            nodes.push(n);
-          }
-        });
-        if (nodes.length) {
-          this.onKeysChange(keys);
-          nodes.forEach((node) => this.nodeClick(node.key, node.title));
-          find = true;
-        }
-      }
-      // 数据有可能还没加载，等数据加载了再选中
-      if (!find) {
-        this.waittingSelect = id;
-      }
-    }
-  }
-
-  @Event('点击')
-  nodeClick(@EventParam('id') id: string, @EventParam('标题') title: string) {}
-
-  @Event('重命名')
-  rename(@EventParam('id') id: string, @EventParam('名称') name: string) {}
-}

package/src/lib/tree-control/tree-control.module.ts

@@ -1,18 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { TreeControlComponent } from './tree-control.component';
-import { WidgetBaseModule, WidgetService } from 'bbj-widget-base';
-import { NzTreeModule } from 'ng-zorro-antd/tree';
-import { NzInputModule } from 'ng-zorro-antd/input';
-import { FormsModule } from '@angular/forms';
-import { NzHighlightModule } from 'ng-zorro-antd/core/highlight';
-import { NzIconModule } from 'ng-zorro-antd/icon';
-@NgModule({
-  declarations: [TreeControlComponent],
-  imports: [CommonModule, WidgetBaseModule, NzTreeModule, NzInputModule, FormsModule, NzHighlightModule, NzIconModule],
-})
-export class TreeControlModule {
-  constructor(widgetService: WidgetService) {
-    widgetService.register(TreeControlComponent);
-  }
-}

package/src/lib/tree-ring-chart/tree-ring-chart.component.html

@@ -1,7 +0,0 @@
-<div
-  echarts
-  [options]="chartOption"
-  class="demo-chart"
-  (chartClick)="onChartClick($event)"
-  [initOpts]="{ renderer: 'svg' }"
-></div>

package/src/lib/tree-ring-chart/tree-ring-chart.component.less

@@ -1,8 +0,0 @@
-:host {
-  display: block;
-  height: 100%;
-  width: 100%;
-}
-.demo-chart {
-  height: 100%;
-}

package/src/lib/tree-ring-chart/tree-ring-chart.component.spec.ts

@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
-import { TreeRingChartComponent } from './tree-ring-chart.component';
-
-describe('TreeRingChartComponent', () => {
-  let component: TreeRingChartComponent;
-  let fixture: ComponentFixture<TreeRingChartComponent>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ TreeRingChartComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(TreeRingChartComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});