bbj-screen-widget 2.4.60 → 2.4.62

package/src/lib/search/search.component.ts

@@ -0,0 +1,103 @@
+import { Component, OnInit, EventEmitter } from '@angular/core';
+import { Property, Widget, DataOutput } from 'bbj-widget-base';
+import { getFontStyle } from '../shared/util/style.util';
+
+@Component({
+  selector: 'sc-search',
+  templateUrl: './search.component.html',
+  styleUrls: ['./search.component.less'],
+})
+@Widget('搜索框', { group: 'component', image: 'assets/img/screen/search.png', icon: 'iconmokuai' })
+export class SearchComponent implements OnInit {
+  @Property('按钮样式', {
+    ui: {
+      widget: 'myButton',
+      spanLabel: 24,
+      spanControl: 24,
+      icon: 'search',
+      reset: ['background', 'borderColor', { parent: 'font', child: 'color' }],
+      background: [
+        { color: '#F5A623', borderColor: '#F5A623', background: 'rgba(245,166,35,0.2)' },
+        { color: '#50E3C2', borderColor: '#50E3C2', background: 'rgba(80,227,194,0.2)' },
+        { color: '#9013fe', borderColor: '#9013fe', background: 'rgba(144,19,254,0.2)' },
+        { color: '#3285ff', borderColor: '#3285ff', background: 'rgba(50,133,255,0.2)' },
+      ],
+    },
+  })
+  colorExample: any = { color: '#3285ff', borderColor: '#3285ff', background: 'rgba(50,133,255,0.2)' };
+
+  @Property('填充', {
+    ui: {
+      widget: 'myColor',
+      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', null],
+    },
+  })
+  background = 'rgba(50,133,255,0.2)';
+  @Property('边框', {
+    ui: {
+      widget: 'myColor',
+      example: ['#ffffff', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', null],
+    },
+  })
+  borderColor = '#3285ff';
+  @Property('字体', { ui: { widget: 'myFont' } })
+  font: any = { family: '', color: '#3285ff', weight: 'normal', size: 12, space: 0, lineHeight: '' };
+  @Property('按钮样式', {
+    enum: [
+      { label: '样式一', value: 'default' },
+      { label: '样式二', value: 'iconSingle' }
+    ],
+  })
+  btnStyleOption = 'default';
+
+  @Property('按钮颜色', {
+    ui: {
+      widget: 'myColor',
+      visibleIf: { btnStyleOption: ['iconSingle'] }
+    },
+  })
+  iconSingleColor = '#fff';
+  @Property('按钮大小', {
+    ui: {
+      visibleIf: { btnStyleOption: ['iconSingle'] }
+    },
+  })
+  iconSingleSize = 16;
+
+  @Property('隐藏按钮')
+  hideBtn: boolean;
+  @Property('提示文字')
+  placeholder: string;
+  @Property('高度')
+  height = 26;
+  btnStyle: any;
+  btnIconStyle: any;
+  @DataOutput('值')
+  valueChange = new EventEmitter<any>();
+  value: any;
+  constructor() { }
+
+  ngOnInit() {
+    this.btnStyle = {
+      backgroundColor: this.background,
+      borderColor: this.borderColor,
+      ...getFontStyle(this.font),
+    };
+    if (this.btnStyleOption === 'iconSingle') {
+      this.btnIconStyle = {
+        fontSize: this.iconSingleSize + 'px',
+        color: this.iconSingleColor,
+      }
+    }
+  }
+
+  searchChange(value) {
+    this.valueChange.emit(value);
+  }
+
+  onKeypress(event: KeyboardEvent) {
+    if (event.key === 'Enter') {
+      this.valueChange.emit(this.value);
+    }
+  }
+}

package/src/lib/search/search.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SearchComponent } from './search.component';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { FormsModule } from '@angular/forms';
+import { WidgetBaseModule, WidgetService } from 'bbj-widget-base';
+import { NzIconModule, NzIconService } from 'ng-zorro-antd/icon';
+import { NzPipesModule } from 'ng-zorro-antd/pipes';
+
+@NgModule({
+  declarations: [SearchComponent],
+  imports: [CommonModule, WidgetBaseModule, NzIconModule, NzInputModule, NzButtonModule, FormsModule, NzPipesModule],
+})
+export class SearchModule {
+  constructor(widgetService: WidgetService, private iconService: NzIconService) {
+    widgetService.register(SearchComponent);
+    this.iconService.fetchFromIconfont({
+      scriptUrl: 'assets/icons/screen-icons.js'
+    });
+  }
+}

package/src/lib/select/select.component.html

@@ -0,0 +1,30 @@
+<nz-select
+  class="select-wrap"
+  [ngClass]="align"
+  [ngModel]="selectedValue"
+  [nzMode]="mode"
+  [nzMaxTagCount]="num"
+  [nzDropdownClassName]="'dropDown'"
+  [ngStyle]="ngStyle"
+  [nzDropdownStyle]="dropdownStyle"
+  [nzDropdownClassName]="'selectComp'"
+  [nzDropdownRender]="renderTemplate"
+  [nzShowSearch]="showSearch"
+  (ngModelChange)="selectChange($event)"
+  [nzAllowClear]="showClean"
+  [nzPlaceHolder]="hint"
+  [(nzOpen)]="open"
+>
+  <nz-option
+    *ngFor="let item of options"
+    [nzValue]="item.value ? item.value : item.label"
+    [nzLabel]="item.label"
+  ></nz-option>
+</nz-select>
+<ng-template #renderTemplate>
+  <div *ngIf="options && options.length > 0 && mode === 'multiple'" class="select-footer">
+    <button nz-button (click)="selectAllData()">全选</button>
+    <button nz-button *ngIf="showClean" (click)="selectChange(null)">清空</button>
+    <button nz-button *ngIf="showConfirm" (click)="open = false">查看</button>
+  </div>
+</ng-template>

package/src/lib/select/select.component.less

@@ -0,0 +1,117 @@
+:host {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+}
+
+:host ::ng-deep {
+  .ant-select {
+    width: 100%;
+    height: 100%;
+
+    &.center .ant-select-selection-item {
+      justify-content: center;
+    }
+
+    &.right .ant-select-selection-item {
+      justify-content: flex-end;
+    }
+  }
+
+  .ant-select-selection-item {
+    display: flex;
+    align-items: center;
+  }
+
+  .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
+    background-color: inherit;
+    border: 0;
+    height: 100%;
+    box-shadow: none !important;
+  }
+
+  .ant-select-single:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-search-input {
+    height: 100%;
+  }
+
+  .ant-select-arrow {
+    color: inherit;
+  }
+
+  .ant-select-item,
+  .ant-select-item-empty {
+    color: inherit;
+  }
+
+  .ant-select-single.ant-select-show-arrow .ant-select-selection-item,
+  .ant-select-single.ant-select-show-arrow .ant-select-selection-placeholder {
+    line-height: inherit;
+  }
+}
+
+:host ::ng-deep {
+  // .ant-select-item-option{
+  //   color: inherit;
+  // }
+  // .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
+  //   background: rgba(255,255,255,0.2);
+  //   color: inherit;
+  // }
+}
+.select-allCheck:hover {
+  background-color: rgb(248, 248, 248);
+}
+.select-allCheck {
+  display: flex;
+  align-items: center;
+  border-top: 1px solid #eee;
+  justify-content: flex-end;
+  height: 32px;
+  padding: 5px 12px;
+  font-size: 14px;
+  position: relative;
+  line-height: 22px;
+  font-weight: 400;
+  color: #333333;
+
+  span {
+    flex: 1;
+  }
+  p {
+    line-height: 32px;
+  }
+}
+
+:host ::ng-deep {
+  ::-webkit-scrollbar {
+    width: 2px;
+  }
+}
+
+::ng-deep {
+  .selectComp {
+    // class=selectComp下拉组件 滚动条隐藏
+    .cdk-virtual-scroll-viewport::-webkit-scrollbar {
+      width: 0px;
+    }
+    .ant-select-item-option {
+      color: inherit;
+      font-size: 12px;
+    }
+    .ant-select-item-option-active {
+      background: var(--selectHoverBackgroundColor);
+      color: var(--selectHoverColor);
+    }
+    .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
+      background: var(--dropdownBackgroundColor);
+      color: var(--selectDropDownColor);
+    }
+    .ant-select-dropdown {
+      background-color: transparent;
+    }
+  }
+}
+
+.select-footer {
+  padding: 8px;
+}

package/src/lib/select/select.component.spec.ts

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

package/src/lib/select/select.component.ts

@@ -0,0 +1,297 @@
+import { Component, OnInit, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+import { Property, Widget, DataOutput, Data, Event, DataInput, Method, Param } from 'bbj-widget-base';
+
+@Component({
+  selector: 'sc-select',
+  templateUrl: './select.component.html',
+  styleUrls: ['./select.component.less'],
+})
+@Widget('下拉框', {
+  group: 'component',
+  image: 'assets/img/screen/select.png',
+  icon: 'iconmokuai',
+})
+export class SelectComponent implements OnInit, OnChanges {
+  @Property('下拉框样式', {
+    ui: {
+      widget: 'myImageExample',
+      spanLabel: 24,
+      spanControl: 24,
+      reset: ['background', 'borderColor', 'selectColor'],
+      example: [
+        {
+          background: 'assets/img/screen/select1.png',
+          data: {
+            selectColor: '#F5A623',
+            borderColor: '#F5A623',
+            background: 'rgba(245,166,35,0.2)',
+            dropdownBg: 'rgba(245,166,35,0.2)',
+            dropdownBorderColor: '#F5A623',
+          },
+        },
+        {
+          background: 'assets/img/screen/select2.png',
+          data: {
+            selectColor: '#50E3C2',
+            borderColor: '#50E3C2',
+            background: 'rgba(80,227,194,0.2)',
+            dropdownBg: 'rgba(80,227,194,0.2)',
+            dropdownBorderColor: '#50E3C2',
+          },
+        },
+        {
+          background: 'assets/img/screen/select3.png',
+          data: {
+            selectColor: '#9013fe',
+            borderColor: '#9013fe',
+            background: 'rgba(144,19,254,0.2)',
+            dropdownBg: 'rgba(144,19,254,0.2)',
+            dropdownBorderColor: '#9013fe',
+          },
+        },
+        {
+          background: 'assets/img/screen/select4.png',
+          data: {
+            selectColor: '#3285ff',
+            borderColor: '#3285ff',
+            background: 'rgba(50,133,255,0.2)',
+            dropdownBg: 'rgba(50,133,255,0.2)',
+            dropdownBorderColor: '#3285ff',
+          },
+        },
+      ],
+    },
+  })
+  example: any;
+  @Property('提示用语', { type: 'string' })
+  hint = '请选择';
+  @Property('', {
+    ui: {
+      widget: 'myCheckNumber',
+      title: '多选个数',
+      spanLabel: 0,
+      spanControl: 24,
+    },
+  })
+  num = 1;
+  @Property('填充', {
+    ui: {
+      widget: 'myColor',
+      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', null],
+    },
+  })
+  background: string;
+  @Property('边框', {
+    ui: {
+      widget: 'myColor',
+      example: ['#ffffff', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', null],
+    },
+  })
+  borderColor = '#d9d9d9';
+
+  // 通过全局变量来控制颜色变化 当多个时会互相替换 移除此功能
+  @Property('选中颜色', {
+    ui: {
+      widget: 'myColor',
+      example: ['#ffffff', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', null],
+    },
+  })
+  dropdownBackgroundColor = '#E6F7FF';
+  @Property('选中字体颜色', {
+    ui: {
+      widget: 'myColor',
+      example: ['#ffffff', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', null],
+    },
+  })
+  selectDropDownColor = 'rgba(0,0,0,0.85)';
+  @Property('hover字体颜色', {
+    ui: {
+      widget: 'myColor',
+      example: ['#ffffff', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', null],
+    },
+  })
+  selectHoverColor = 'rgba(0,0,0,0.85)';
+  @Property('hover背景颜色', {
+    ui: {
+      widget: 'myColor',
+      example: ['#ffffff', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', null],
+    },
+  })
+  selectHoverBackgroundColor = '#f5f5f5';
+
+  @Property('字体', { ui: { widget: 'myFont' } })
+  font: any = {
+    family: '',
+    weight: 'normal',
+    size: 12,
+    space: 0,
+    lineHeight: 30,
+  };
+
+  @Property('对齐方式', {
+    enum: [
+      { label: '左对齐', value: 'left' },
+      { label: '居中', value: 'center' },
+      { label: '右对齐', value: 'right' },
+    ],
+  })
+  align = 'left';
+  @Property('搜索')
+  showSearch: boolean;
+  @Property('清空按钮')
+  showClean: boolean;
+  @Property('查看按钮')
+  showConfirm: boolean;
+  @Property('下拉宽度', { type: 'number' })
+  dropdownWidth = null;
+
+  @Property('下拉填充', {
+    ui: {
+      widget: 'myColor',
+      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', null],
+    },
+  })
+  dropdownBg = '#fff';
+  @Property('下拉边框', {
+    ui: {
+      widget: 'myColor',
+      example: ['#ffffff', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', null],
+    },
+  })
+  dropdownBorderColor = '#fff';
+
+  @Property('输出格式', {
+    enum: [
+      { label: '数组', value: 'array' },
+      { label: '字符串', value: 'string' },
+    ],
+    ui: { widget: 'select', visibleIf: { num: (value) => value > 1 } },
+  })
+  outputFormat = 'array';
+  @Property('分隔字符', { ui: { visibleIf: { outputFormat: ['string'] } } })
+  separator = ',';
+  selectedValue: any;
+  ngStyle: any;
+  dropdownStyle: any;
+  mode = 'default';
+  open: boolean;
+
+  @Data({
+    properties: {
+      label: { title: '标签', type: 'string' },
+      value: { title: '值', type: 'string' },
+      checked: { title: '是否选中', type: 'boolean' },
+    },
+  })
+  options: any = [
+    { label: '选项1', value: 'option1' },
+    { label: '选项2', value: 'option2' },
+  ];
+
+  @DataInput('选中值')
+  value: any;
+
+  @DataOutput('值')
+  @Event('值改变', { params: '值' })
+  valueChange = new EventEmitter<any>();
+  @DataOutput('原始数据')
+  optionChange = new EventEmitter<any>();
+
+  constructor() {}
+
+  ngOnInit() {
+    this.ngStyle = {
+      backgroundColor: this.background,
+      border: '1px solid ' + this.borderColor,
+      fontSize: this.font.size + 'px',
+      fontFamily: this.font.family,
+      color: this.font.color,
+      fontWeight: this.font.weight,
+      letterSpacing: this.font.space + 'px',
+      lineHeight: this.font.lineHeight + 'px',
+    };
+    this.dropdownBg = this.dropdownBg ? this.dropdownBg : this.background;
+    this.dropdownBorderColor = this.dropdownBorderColor ? this.dropdownBorderColor : this.borderColor;
+    this.dropdownStyle = {
+      backgroundColor: this.dropdownBg,
+      border: '1px solid ' + this.dropdownBorderColor,
+      fontSize: this.font.size + 'px',
+      fontFamily: this.font.family,
+      color: this.font.color,
+      fontWeight: this.font.weight,
+      letterSpacing: this.font.space + 'px',
+      lineHeight: this.font.lineHeight + 'px',
+      width: this.dropdownWidth + 'px',
+    };
+    //  this.dropdownStyle.width = this.dropdownWidth ? this.dropdownWidth + 'px' : '';
+    document.body.style.setProperty(
+      '--dropdownBackgroundColor',
+      this.dropdownBackgroundColor || ' rgba(255,255,255,0.2)',
+    );
+    document.body.style.setProperty('--selectDropDownColor', this.selectDropDownColor || '#333');
+    document.body.style.setProperty('--selectHoverColor', this.selectHoverColor || 'rgba(255,255,255,0.5)');
+    document.body.style.setProperty('--selectHoverBackgroundColor', this.selectHoverBackgroundColor || '#333');
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.options) {
+      if (this.num && this.num > 1) {
+        this.mode = 'multiple';
+        this.selectedValue = [];
+        this.options.forEach((option) => {
+          if (option.checked && this.selectedValue.length < this.num) {
+            this.selectedValue.push(option.value ? option.value : option.label);
+          }
+        });
+        if (this.selectedValue.length > 0) {
+          this.selectChange(this.selectedValue);
+        }
+      } else {
+        this.mode = 'default';
+        const item = this.options.find((s) => s.checked);
+        if (item) {
+          this.selectedValue = item.value ? item.value : item.label;
+          this.selectChange(this.selectedValue);
+        }
+      }
+    }
+    if (changes.value) {
+      this.selectedValue = this.value;
+      // console.log(this.value);
+    }
+  }
+
+  selectAllData() {
+    this.selectedValue = [];
+    this.options.forEach((data) => {
+      this.selectedValue.push(data.value);
+    });
+    this.selectChange(this.selectedValue);
+    // this.valueChange.emit(this.selectedValue);
+    // this.optionChange.emit(this.options);
+  }
+
+  selectChange(value: string | string[]) {
+    this.selectedValue = value;
+    if (Array.isArray(value)) {
+      // 多选
+      if (this.outputFormat === 'string') {
+        this.valueChange.emit(value.join(this.separator || ','));
+      } else {
+        this.valueChange.emit(value);
+      }
+      const selectedOption = this.options.filter((option) => value.includes(option.value));
+      this.optionChange.emit(selectedOption);
+    } else {
+      this.valueChange.emit(value);
+      const selectedOption = this.options.find((option) => option.value === event);
+      this.optionChange.emit(selectedOption);
+    }
+  }
+
+  @Method('选中')
+  select(@Param('值') value: any) {
+    this.selectedValue = value;
+    this.selectChange(value);
+  }
+}

package/src/lib/select/select.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SelectComponent } from './select.component';
+import { FormsModule } from '@angular/forms';
+import { NzSelectModule } from 'ng-zorro-antd/select';
+import { WidgetBaseModule, WidgetService } from 'bbj-widget-base';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzDividerModule } from 'ng-zorro-antd/divider';
+
+@NgModule({
+  declarations: [SelectComponent],
+  imports: [CommonModule, WidgetBaseModule, NzSelectModule, FormsModule, NzButtonModule],
+})
+export class SelectModule {
+  constructor(widgetService: WidgetService) {
+    widgetService.register(SelectComponent);
+  }
+}

package/src/lib/shape/shape.component.html

@@ -0,0 +1,39 @@
+<svg width="100%" height="100%" [ngSwitch]="type">
+  <defs *ngIf="filterId">
+    <filter [id]="filterId" x="-100%" y="-100%" width="300%" height="300%" filterUnits="userSpaceOnUse">
+      <feOffset result="offOut" in="SourceGraphic" [attr.dx]="shadow.X" [attr.dy]="shadow.Y" />
+      <feGaussianBlur result="blurOut" in="offOut" [attr.stdDeviation]="shadow.Z" />
+      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
+    </filter>
+  </defs>
+  <rect
+    *ngSwitchCase="'rect'"
+    x="0"
+    y="0"
+    [attr.width]="width"
+    [attr.height]="height"
+    [ngStyle]="style"
+    [attr.filter]="filterUrl"
+  ></rect>
+  <ellipse
+    *ngSwitchCase="'circle'"
+    [attr.cx]="width / 2"
+    [attr.cy]="height / 2"
+    [attr.rx]="width / 2"
+    [attr.ry]="height / 2"
+    [ngStyle]="style"
+    [attr.filter]="filterUrl"
+  />
+  <line
+    *ngSwitchCase="'line'"
+    x1="0"
+    [attr.y1]="height / 2"
+    [attr.x2]="width"
+    [attr.y2]="height / 2"
+    [ngStyle]="style"
+    [attr.filter]="filterUrl"
+  />
+  <!-- <path *ngSwitchCase="'path'" [attr.d]="data.d" [ngStyle]="style" [attr.filter]="filterUrl" /> -->
+  <polyline *ngSwitchCase="'polyline'" [attr.points]="points" [ngStyle]="style" [attr.filter]="filterUrl" />
+  <polygon *ngSwitchDefault [attr.points]="points" [ngStyle]="style" [attr.filter]="filterUrl" />
+</svg>

package/src/lib/shape/shape.component.less

@@ -0,0 +1,8 @@
+:host {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+svg {
+  overflow: visible;
+}

package/src/lib/shape/shape.component.spec.ts

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