bbj-screen-widget 2.4.61 → 2.4.62

package/src/lib/checkbox/checkbox.component.less

@@ -0,0 +1,104 @@
+:host {
+  display: block;
+}
+:host ::ng-deep {
+  .ant-checkbox {
+    display: inline-block;
+  }
+
+  .ant-checkbox-checked .ant-checkbox-inner,
+  .ant-checkbox-wrapper,
+  .ant-checkbox {
+    background-color: inherit;
+    border-color: inherit;
+    color: inherit;
+    font-size: inherit;
+  }
+
+  .ant-checkbox-checked .ant-checkbox-inner::after,
+  .ant-checkbox-inner {
+    border-color: inherit;
+    background-color: inherit;
+  }
+
+  .ant-checkbox-wrapper {
+    margin-left: 0px;
+  }
+
+  .label-vertical {
+    label.ant-checkbox-wrapper {
+      text-align: center;
+    }
+
+    .ant-checkbox + span {
+      display: block;
+    }
+  }
+
+  .content {
+    // display: flex;
+    .customRadio {
+      display: inline-flex;
+      align-items: center;
+      cursor: pointer;
+      padding: 15px;
+    }
+
+    &.layout-vertical {
+      display: flex;
+      flex-direction: column;
+    }
+
+    &.label-vertical {
+      .customRadio {
+        flex-direction: column;
+        text-align: center;
+
+        > i.input-checkbox {
+          margin: 0 0 5px 0;
+        }
+      }
+    }
+  }
+
+  .ant-checkbox + span,
+  .customRadio > i.input-checkbox + span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .customRadio > i.input-checkbox {
+    display: inline-block;
+    width: var(--width);
+    height: var(--height);
+    font-size: var(--outerSize);
+    line-height: var(--height);
+    color: var(--color);
+    font-weight: var(--weight);
+    font-family: var(--family);
+    text-align: center;
+    background-image: var(--notSelect);
+    background-repeat: no-repeat;
+    background-size: cover;
+    margin: 0 5px 0 0;
+    flex: none;
+  }
+
+  .customRadio.checked > i.input-checkbox {
+    background-image: var(--select);
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+}
+
+.ant-checkbox-group {
+  display: inline;
+}
+
+:host.vertical::ng-deep {
+  .ant-checkbox-wrapper {
+    display: block;
+    text-align: center;
+  }
+}

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

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

package/src/lib/checkbox/checkbox.component.ts

@@ -0,0 +1,292 @@
+import { Component, ElementRef, OnInit, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+import { NzCheckBoxOptionInterface } from 'ng-zorro-antd/checkbox';
+import { Property, Widget, DataOutput, Data, Event, DataInput } from 'bbj-widget-base';
+
+interface CheckBoxOption extends NzCheckBoxOptionInterface {
+  color?: string;
+}
+
+@Component({
+  selector: 'sc-checkbox',
+  templateUrl: './checkbox.component.html',
+  styleUrls: ['./checkbox.component.less'],
+  host: {
+    '[class.vertical]': 'layout==="vertical"',
+  },
+})
+@Widget('复选框', {
+  group: 'component',
+  image: 'assets/img/screen/checkbox.png',
+  icon: 'iconmokuai',
+})
+export class CheckboxComponent implements OnInit, OnChanges {
+  @Data({
+    properties: {
+      label: { title: '标签', type: 'string' },
+      value: { title: '值', type: 'string' },
+      checked: { title: '是否选中', type: 'boolean' },
+    },
+  })
+  options: CheckBoxOption[] = [
+    { label: '多选一', value: 'option1', checked: true },
+    { label: '多选二', value: 'option2' },
+    { label: '多选三', value: 'option3' },
+  ];
+  @Property('复选框颜色', {
+    ui: {
+      widget: 'myColor',
+    },
+  })
+  borderColor = '#3285FF';
+  @Property('字体', { ui: { widget: 'myFont' } })
+  font: any = {
+    family: '',
+    weight: 'normal',
+    size: 12,
+    space: 0,
+    lineHeight: 26,
+  };
+  textStyle: any;
+  @Property('整体布局', {
+    enum: [
+      { label: '横向', value: 'horizontal' },
+      { label: '纵向', value: 'vertical' },
+    ],
+  })
+  layout = 'horizontal';
+  @Property('选项布局', {
+    enum: [
+      { label: '横向', value: 'horizontal' },
+      { label: '纵向', value: 'vertical' },
+    ],
+  })
+  lableLayout = 'horizontal';
+  @Property('选项宽度')
+  labelWidthNum: any;
+  @Property('选项边距', { ui: { widget: 'myGrid' } })
+  lablePaddNum: any = {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+  };
+
+  @Property('显示全选')
+  showCheckAll: boolean;
+  @Property('隐藏文本')
+  hiddenLabel: boolean;
+  @Property('输出格式', {
+    enum: [
+      { label: '数组', value: 'array' },
+      { label: '字符串', value: 'string' },
+    ],
+  })
+  outputFormat = 'array';
+  @Property('分隔字符', { ui: { visibleIf: { outputFormat: ['string'] } } })
+  separator = ',';
+  @Property('标签颜色', {
+    ui: {
+      widget: 'seriesColor',
+    },
+  })
+  labelColors: string[];
+  @Property('选中图片', {
+    type: 'string',
+    ui: {
+      widget: 'myUpload',
+    },
+  })
+  selectImage = '';
+  @Property('未选图片', {
+    type: 'string',
+    ui: {
+      widget: 'myUpload',
+    },
+  })
+  notSelectImage = '';
+  @Property('图片宽', { type: 'number' })
+  width = 150;
+  @Property('图片高', { type: 'number' })
+  height = 50;
+  isCustom = false;
+
+  @DataInput('选中值')
+  value: any;
+
+  @DataOutput('值')
+  @Event('值改变', { params: '值' })
+  valueChange = new EventEmitter<any>();
+
+  checkOptions: CheckBoxOption[];
+  allChecked = false;
+  indeterminate = true;
+  lablePadd: any;
+  labelWidth: any;
+  @Property('禁用', { type: 'boolean' })
+  disabled: boolean;
+
+  constructor(private ele: ElementRef) {}
+
+  ngOnInit() {
+    /*this.ele.nativeElement.style.borderColor = this.borderColor;*/
+    /*  this.ele.nativeElement.style.setProperty('--color', this.borderColor);*/
+    this.textStyle = {
+      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',
+      borderColor: this.borderColor,
+      backgroudColor: this.borderColor,
+    };
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (this.selectImage && this.notSelectImage && this.selectImage != '' && this.notSelectImage != '') {
+      this.ele.nativeElement.style.setProperty('--outerSize', this.font.size + 'px');
+      this.ele.nativeElement.style.setProperty('--innerSize', this.font.size / 2 + 'px');
+      this.ele.nativeElement.style.setProperty('--width', this.width + 'px');
+      this.ele.nativeElement.style.setProperty('--height', this.height + 'px');
+      this.ele.nativeElement.style.setProperty('--color', this.font.color);
+      this.ele.nativeElement.style.setProperty('--weight', this.font.weight);
+      this.ele.nativeElement.style.setProperty('--family', this.font.weight);
+      this.ele.nativeElement.style.setProperty('--select', 'url(' + this.selectImage + ')');
+      this.ele.nativeElement.style.setProperty('--notSelect', 'url(' + this.notSelectImage + ')');
+      this.isCustom = true;
+    }
+    if (changes.value) {
+      this.updateCheckOptions();
+    }
+    if (changes.options) {
+      this.checkOptions = this.options.map((option, i) => {
+        option = { ...option };
+        if (this.labelColors?.length) {
+          option.color = this.labelColors[i % this.labelColors.length];
+        }
+        return option;
+      });
+      this.updateSingleChecked();
+      if (this.value) {
+        this.updateCheckOptions();
+      } else {
+        this.updateValue(true);
+      }
+    }
+
+    if (changes.lablePaddNum && changes.lablePaddNum.currentValue) {
+      const padd = changes.lablePaddNum.currentValue;
+      this.lablePadd = `${padd.top || 0}px ${padd.right || 0}px ${padd.bottom || 0}px ${padd.left || 0}px`;
+      // console.log(this.lablePadd);
+    }
+    if (changes.labelWidthNum && changes.labelWidthNum.currentValue) {
+      const labelWidth = changes.labelWidthNum.currentValue;
+      if (Number(labelWidth)) {
+        this.labelWidth = labelWidth + 'px';
+      } else {
+        const isPercent =
+          labelWidth.charAt(labelWidth.length - 1) === '%' ? Number(labelWidth.slice(0, labelWidth.length - 1)) : false;
+
+        if (isPercent) {
+          this.labelWidth = labelWidth;
+        }
+      }
+    }
+  }
+  change(event: NzCheckBoxOptionInterface[]) {
+    this.updateSingleChecked();
+    this.updateValue();
+  }
+
+  updateCheckOptions() {
+    if (this.value && this.checkOptions?.length) {
+      let values: string[];
+      if (typeof this.value === 'string') {
+        values = this.value.split(this.separator || ',');
+      } else {
+        values = this.value;
+      }
+      let changed = false;
+      this.checkOptions.forEach((option) => {
+        const checked = option.value && values.includes(option.value.toString());
+        if (option.checked !== checked) {
+          changed = true;
+          option.checked = checked;
+        }
+      });
+      if (changed) {
+        this.checkOptions = [...this.checkOptions];
+        this.updateSingleChecked();
+      }
+    }
+  }
+
+  updateValue(init?: boolean) {
+    const value = [];
+    this.checkOptions.forEach((item) => {
+      if (item.checked) {
+        value.push(item.value);
+      }
+    });
+    if (!init || value.length) {
+      if (this.outputFormat === 'string') {
+        this.valueChange.emit(value.join(this.separator || ','));
+      } else {
+        this.valueChange.emit(value);
+      }
+    }
+  }
+
+  updateAllChecked(): void {
+    this.indeterminate = false;
+    if (this.allChecked) {
+      this.checkOptions = this.checkOptions.map((item) => {
+        return {
+          ...item,
+          checked: true,
+        };
+      });
+    } else {
+      this.checkOptions = this.checkOptions.map((item) => {
+        return {
+          ...item,
+          checked: false,
+        };
+      });
+    }
+    this.updateValue();
+  }
+
+  updateSingleChecked(): void {
+    if (this.showCheckAll) {
+      if (this.checkOptions.every((item) => !item.checked)) {
+        this.allChecked = false;
+        this.indeterminate = false;
+      } else if (this.checkOptions.every((item) => item.checked)) {
+        this.allChecked = true;
+        this.indeterminate = false;
+      } else {
+        this.indeterminate = true;
+      }
+    }
+  }
+
+  // 全选
+  checkedAll() {
+    this.allChecked = !this.allChecked;
+    // this.
+  }
+
+  checked(option) {
+    let arr = [];
+    this.options.forEach((o) => {
+      if (o.value === option.value) {
+        o.checked = !o.checked;
+      }
+      if (o.checked) {
+        arr.push(o.value);
+      }
+    });
+    this.valueChange.emit(arr.join(this.separator || ','));
+  }
+}

package/src/lib/checkbox/checkbox.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
+import { CheckboxComponent } from './checkbox.component';
+import { WidgetBaseModule, WidgetService } from 'bbj-widget-base';
+
+@NgModule({
+  declarations: [CheckboxComponent],
+  imports: [CommonModule, WidgetBaseModule, NzCheckboxModule, FormsModule],
+})
+export class CheckboxModule {
+  constructor(widgetService: WidgetService) {
+    widgetService.register(CheckboxComponent);
+  }
+}

package/src/lib/cross-table/cross-table.component.html

@@ -0,0 +1,16 @@
+<nz-table #basicTable [nzData]="data" [nzScroll]="{ x: '50px', y: '100%' }" [nzPageSize]="pageSize"
+          [ngStyle]="bodyStyle"
+          [nzBordered]="showBorder" [nzWidthConfig]="widthConfig" [nzFrontPagination]="needPage">
+  <thead>
+  <tr >
+      <th  *ngFor="let head of ths" nzAlign="{{contentAlign}}" [ngStyle]="headStyle">{{ head }}</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr *ngFor="let row of basicTable.data"  >
+      <ng-container *ngFor="let td of row">
+        <td  nzAlign="{{contentAlign}}"  [ngStyle]="bodyStyle">{{td.value}}</td>
+      </ng-container>
+  </tr>
+  </tbody>
+</nz-table>

package/src/lib/cross-table/cross-table.component.less

@@ -0,0 +1,75 @@
+// .table {
+//     width: 100%;
+//     display: block;
+//     overflow: auto;
+// }
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.ant-table-wrapper {
+  height: 100%;
+  ::ng-deep.ant-spin-nested-loading {
+    height: 100%;
+    .ant-spin-container {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      .ant-table {
+        background: inherit;
+        flex: 1;
+        overflow: hidden;
+        .ant-table-thead > tr > th {
+          background: inherit;
+        }
+        .ant-table-container {
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          .ant-table-header{
+            flex: none;
+          }
+          .ant-table-body{
+            flex: 1;
+            overflow: auto;
+          }
+        }
+      }
+      .ant-table-pagination-right {
+        align-self: flex-end;
+      }
+    }
+  }
+}
+// .ant-table-wrapper, .ant-spin-nested-loading, .ant-spin-container, .ant-table-scroll {
+//     height: 100%;
+// }
+// .ant-table {
+//     height: 100%;
+//     padding-bottom: 40px;
+//     background: unset;
+//     .ant-table-thead>tr>th {
+//         background: inherit;
+//     }
+// }
+// .ant-table-content {
+//     height: 100%;
+// }
+// nz-pagination {
+//     position: absolute;
+//     bottom: 0;
+//     right: 0;
+//     .ant-table-pagination.ant-pagination {
+//         margin: 0;
+//     }
+// }
+// .ant-table-scroll {
+//     overflow: hidden;
+//     display: flex;
+//     flex-direction: column;
+// }
+// .ant-table-header {
+//     flex-shrink: 0;
+// }
+// }

package/src/lib/cross-table/cross-table.component.spec.ts

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