bbj-screen-widget 2.4.60 → 2.4.62

package/src/lib/table/table.component.ts

@@ -0,0 +1,608 @@
+import { Component, OnInit, ElementRef, OnChanges, SimpleChanges, EventEmitter } from '@angular/core';
+import { Widget, Property, Data, DataSchema, DataOutput, CustomExport, Sheet, Event } from 'bbj-widget-base';
+import { SFArrayWidgetSchema, SFSchema } from '@delon/form';
+import { isNum } from '@delon/util';
+
+@Component({
+  selector: 'sc-table',
+  templateUrl: './table.component.html',
+  styleUrls: ['./table.component.less'],
+})
+@Widget('表格', { group: 'table', icon: 'icontubiao', image: '/assets/img/screen/custom-table.png' })
+export class TableComponent implements OnInit, OnChanges, CustomExport {
+  @Property('条数/页', { ui: { widget: 'myRange', min: 1, max: 100, step: 1 } })
+  pageSize = 10;
+  @Property('表头背景', {
+    ui: {
+      widget: 'myColor',
+      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
+    },
+  })
+  theadBackground = '#fafafa';
+  @Property('表头字体', { ui: { widget: 'myFont' } })
+  headFont: any = { family: '', color: '#222222', weight: 'normal', size: 12, space: 0, lineHeight: 2 };
+  @Property('内容对齐', {
+    type: 'string',
+    ui: {
+      widget: 'select',
+    },
+    enum: [
+      { label: '左对齐', value: 'left' },
+      { label: '右对齐', value: 'right' },
+      { label: '居中', value: 'center' },
+    ],
+  })
+  contentAlign = 'center';
+  @Property('表格背景', {
+    ui: {
+      widget: 'myColor',
+      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
+    },
+  })
+  tbodyBackground = '#FFFFFF';
+
+  @Property('字体', { ui: { widget: 'myFont' } })
+  font: any = { family: '', color: '#222222', weight: 'normal', size: 12, space: 0, lineHeight: 2 };
+  @Property('是否自定义', {
+    type: 'boolean',
+    ui: {
+      checkedChildren: '开',
+      unCheckedChildren: '关',
+    },
+  })
+  isCustom = false;
+  @Property('显示边框', {
+    type: 'boolean',
+    ui: {
+      checkedChildren: '开',
+      unCheckedChildren: '关',
+    },
+  })
+  showBorder = false;
+  @Property('显示分页', {
+    type: 'boolean',
+    ui: {
+      checkedChildren: '开',
+      unCheckedChildren: '关',
+    },
+  })
+  needPage = false;
+  @Property('统计个数', {
+    type: 'boolean',
+    ui: {
+      checkedChildren: '开',
+      unCheckedChildren: '关',
+    },
+  })
+  isCount = false;
+  @Property('合计', { type: 'string', ui: { optionalHelp: '填写列名,逗号分隔' } })
+  sumColumns: string;
+  @Property('颜色分层', {
+    type: 'array',
+    maxItems: 99,
+    items: {
+      type: 'object',
+      properties: {
+        gte: {
+          type: 'number',
+          title: '大于',
+        },
+        lte: {
+          type: 'number',
+          title: '小于',
+          minimum: 1,
+        },
+        color: {
+          type: 'string',
+          title: '颜色',
+          ui: {
+            widget: 'myColor',
+          },
+        },
+      },
+      required: ['gte', 'lte'],
+    },
+    ui: { grid: { arraySpan: 24 }, spanControl: 24 } as SFArrayWidgetSchema,
+  })
+  level = [];
+  // @Property('字段交叉', {
+  //   type: 'array',
+  //   maxItems: 1,
+  //   items: {
+  //     type: 'object',
+  //     properties: {
+  //       key: {
+  //         type: 'string',
+  //         title: '绑定字段',
+  //       },
+  //       value: {
+  //         type: 'string',
+  //         title: '绑定值',
+  //       },
+  //       mergeField: {
+  //         type: 'string',
+  //         title: '合并字段',
+  //       }
+  //     },
+  //     required: [],
+  //   },
+  //   ui: {grid: {arraySpan: 24}, spanControl: 24} as SFArrayWidgetSchema,
+  // })
+  // cross = [];
+  @Property('自定义列', {
+    type: 'array',
+    maxItems: 99,
+    items: {
+      type: 'object',
+      properties: {
+        group: {
+          type: 'string',
+          title: '分组名',
+        },
+        title: {
+          type: 'string',
+          title: '列名',
+        },
+        field: {
+          type: 'string',
+          title: 'bind',
+        },
+        width: {
+          type: 'number',
+          title: '宽度',
+        },
+        ismerge: {
+          type: 'boolean',
+          title: '是否合并',
+        },
+        needlevel: {
+          type: 'boolean',
+          title: '颜色分层',
+        },
+        showFilter: {
+          type: 'boolean',
+          title: '显示筛选',
+        },
+      },
+      required: ['title', 'field'],
+    },
+    ui: { visibleIf: { isCustom: [true] }, grid: { arraySpan: 24 }, spanLabel: 24, spanControl: 24 },
+  })
+  customCol: any = [];
+  // hasGroup = false;
+  isCross = false;
+  image: string;
+  @Data({})
+  _data: any[] = [
+    { x: '一月', y: '10%', s: '收入' },
+    { x: '二月', y: 20, s: '收入' },
+    { x: '三月', y: 25, s: '收入' },
+    { x: '四月', y: 35, s: '收入' },
+    { x: '五月', y: 27, s: '收入' },
+    { x: '六月', y: 28, s: '收入' },
+    { x: '一月', y: 18, s: '支出' },
+    { x: '二月', y: 28, s: '支出' },
+    { x: '三月', y: 32, s: '支出' },
+    { x: '四月', y: 48, s: '支出' },
+    { x: '五月', y: 20, s: '支出' },
+    { x: '六月', y: 17, s: '支出' },
+  ];
+  @DataSchema('_data')
+  schema: SFSchema;
+
+  @DataOutput('单元格内容')
+  tdChange = new EventEmitter<any>();
+  @DataOutput('行数据')
+  trChange = new EventEmitter<any>();
+  @DataOutput('列名')
+  rowChange = new EventEmitter<any>();
+  @Event('点击单元格', {
+    params: {
+      properties: {
+        index: { type: 'string', title: '列名' },
+        value: { type: 'string', title: '值' },
+        data: { type: 'object', title: '行数据' },
+      },
+    },
+  })
+  tdClick = new EventEmitter<any>();
+  // y: string;
+  headStyle: any = {};
+  bodyStyle: any = {};
+  columns: any;
+  groups: any;
+  // rowSize = 1;
+  widthConfig = [];
+  rows = [];
+  totalCount = [];
+  needCount = false;
+
+  dataSize: number;
+  titleSize: number;
+  searchValue = {};
+  headers = [];
+  filterValues: { [key: string]: any[] } = {};
+  sumData = {};
+  constructor(private ele: ElementRef) {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.schema || changes.customCol) {
+      this.updateHeader();
+      this.updateData();
+    } else if (changes._data) {
+      if (!this.schema) {
+        this.updateHeader();
+      }
+      this.updateData();
+    }
+  }
+
+  ngOnInit() {
+    // if (this.ele) {
+    //   const height = this.ele.nativeElement.offsetHeight - 110;
+    //   this.y = height > 0 ? height + 'px' : '0px';
+    // }
+    // console.log(this.groupBy(this._data,'x'));
+    // console.log(this.countGroupRow);
+    this.headStyle = {
+      family: this.headFont.family,
+      color: this.headFont.color,
+      weight: this.headFont.weight,
+      fontSize: this.headFont.size + 'px',
+      space: this.headFont.space,
+      lineHeight: this.headFont.lineHeight,
+      background: this.theadBackground,
+    };
+    this.bodyStyle = {
+      family: this.font.family,
+      color: this.font.color,
+      weight: this.font.weight,
+      fontSize: this.font.size + 'px',
+      space: this.font.space,
+      lineHeight: this.font.lineHeight,
+    };
+  }
+
+  updateHeader() {
+    this.columns = [];
+    this.widthConfig = [];
+    if (this.isCustom && this.customCol[0]) {
+      const hasGroup = this.customCol.some((data) => data.group != null && data.group !== '');
+      this.groups = [];
+      const subHeader = [];
+      const groupMap = {};
+      this.customCol.forEach((data) => {
+        const grouped = !!data.group;
+        const groupName = data.group || data.title;
+        this.widthConfig.push((data.width || 100) + 'px');
+        const column: any = {
+          title: data.title,
+          index: data.field,
+          ismerge: data.ismerge,
+          iscount: data.iscount,
+          needlevel: data.needlevel,
+          showFilter: data.showFilter,
+        };
+
+        let group = groupMap[groupName];
+        if (group == null) {
+          group = { title: groupName, row: 1, col: 0, columns: [] };
+          groupMap[groupName] = group;
+          this.groups.push(group);
+        }
+        group.columns.push(column);
+        group.col++;
+        if (grouped) {
+          subHeader.push(column);
+        } else {
+          group.index = data.field;
+          if (hasGroup) {
+            group.row = 2;
+          }
+        }
+      });
+      this.headers = [this.groups, subHeader];
+    } else {
+      if (this.schema) {
+        Object.keys(this.schema.properties).forEach((key) => {
+          const property = this.schema.properties[key];
+          if (property) {
+            const column = { title: property.title || key, index: key, schema: property };
+            this.columns.push(column);
+          }
+        });
+      } else if (this._data && this._data[0]) {
+        const data = this._data[0];
+        Object.keys(data).forEach((key) => {
+          const column = { title: key, index: key };
+          this.widthConfig.push(100 + 'px');
+          this.columns.push(column);
+        });
+      }
+      this.headers = [this.columns];
+      console.log('header', this.headers);
+    }
+  }
+
+  updateData() {
+    this.dataSize = this._data.length;
+    if (this._data[0]) {
+      this.titleSize = Object.keys(this._data[0]).length;
+    }
+    if (this.isCustom && this.customCol[0]) {
+      this.updateFilterOptions();
+      this.groupBy(this._data);
+      this.count();
+    }
+    if (this.sumColumns) {
+      this.sumData = {};
+      this.sumColumns.split(',').forEach((column) => {
+        let sum: number = this._data.reduce((p, c) => {
+          const value = c[column];
+          if (value && isNum(value)) {
+            p += +value;
+          }
+          return p;
+        }, 0);
+        this.sumData[column] = +sum.toFixed(2);
+      });
+    }
+  }
+
+  /**
+   * 更新筛选下拉框里的数据
+   */
+  updateFilterOptions() {
+    if (this.groups) {
+      this.groups.forEach((group) => {
+        group.columns.forEach((column) => {
+          if (column.showFilter) {
+            const valueSet = new Set<any>();
+            const target = group.columns.length == 1 ? group : column;
+            target.filter = [];
+            if (this._data) {
+              this._data.forEach((row) => {
+                const key = column.index;
+                const value = row[key];
+                const filterValue = this.filterValues[key];
+                const checked = filterValue && filterValue.includes(value);
+                if (checked || this.filterMatch(row, key)) {
+                  if (value != null && value != '' && !valueSet.has(value)) {
+                    valueSet.add(value);
+                    const item = { value, checked };
+                    target.filter.push(item);
+                  }
+                }
+              });
+            }
+          }
+        });
+      });
+    }
+  }
+
+  filterMatch(record: any, exclude?: string): boolean {
+    const keys = Object.keys(this.filterValues);
+    for (const key of keys) {
+      if (key !== exclude) {
+        const filterValue = this.filterValues[key];
+        const value = record[key];
+        if (filterValue?.length && !filterValue.includes(value)) {
+          return false;
+        }
+      }
+    }
+    return true;
+  }
+
+  groupBy(array) {
+    this.rows = [];
+    array.forEach((record) => {
+      if (this.filterMatch(record)) {
+        const row = [];
+        for (const group of this.groups) {
+          for (const column of group.columns) {
+            const value = record[column.index];
+            // if (column.showFilter) {
+            //   const filterValue = column.filterValue || group.filterValue;
+            //   if (filterValue?.length && !filterValue.includes(value)) {
+            //     return;
+            //   }
+            // }
+            let myColor = '';
+            if (column.needlevel) {
+              myColor = this.getColor(record[column.index]);
+            }
+            if (myColor == '') {
+              myColor = this.tbodyBackground;
+            }
+            row.push({ rowspan: 1, value, index: column.index, color: myColor, data: record });
+          }
+        }
+        this.rows.push(row);
+      }
+    });
+    this.customCol.forEach((column, i) => {
+      if (column.ismerge) {
+        this.needPage = false;
+        let lastTd = null;
+        this.rows.forEach((row) => {
+          const td = row[i];
+          if (lastTd != null && lastTd.value === td.value) {
+            lastTd.rowspan++;
+            td.rowspan = 0;
+          } else {
+            lastTd = td;
+          }
+        });
+      }
+    });
+  }
+
+  getColor(value): string {
+    // value=value.toString().replace('%','');
+    const regExp: RegExp = /-?\d+\.?\d*/;
+    const result = regExp.exec(value);
+    if (this.level.length > 0) {
+      for (const t of this.level) {
+        if (t.gte <= Number(result[0]) && Number(result[0]) < t.lte) {
+          return t.color;
+        }
+      }
+    }
+    return '';
+  }
+
+  count() {
+    const name = 'value';
+    this._data.forEach((data) => {
+      this.groups.forEach((group, i) => {
+        group.columns.forEach((column, j) => {
+          let item = {};
+          let check = false;
+          this.totalCount.forEach((ite) => {
+            if (ite.filed === column.index) {
+              item = ite;
+              check = true;
+              return;
+            }
+          });
+          if (i === 0 && j === 0 && !check) {
+            item = { filed: column.index, value: '合计' };
+          }
+          if (i !== 0 || j !== 0) {
+            if (!check) {
+              item = { filed: column.index };
+            }
+            if (column.iscount) {
+              this.needCount = true;
+              if (!item[name]) {
+                item[name] = 0;
+              }
+              item[name] = Number(item[name]) + this.getDataValue(data, column.index);
+            } else {
+              item[name] = '';
+            }
+          }
+          if (!check) {
+            this.totalCount.push(item);
+          }
+        });
+      });
+    });
+  }
+
+  getDataValue(array, index) {
+    let result = 0;
+    array.forEach((data) => {
+      if (data.index === index) {
+        result = Number(data.value);
+        return;
+      }
+    });
+    return result;
+  }
+
+  onTdClick(td: any, i: number) {
+    const { index, value, data } = td;
+    this.tdChange.emit(value);
+    this.rowChange.emit(this.customCol[i].title);
+    this.tdClick.emit({ index, value, data });
+  }
+
+  onTdClickByGroup(data: any, column: any) {
+    const index = column.index;
+    const value = data[index];
+    this.tdChange.emit(value);
+    this.rowChange.emit(column.title);
+    this.tdClick.emit({ index, value, data });
+  }
+
+  onTrClick(data: any) {
+    // if (this.isCustom) {
+    //   data.forEach((a) => {
+    //     console.log('tr:td' + a.value);
+    //   });
+    // }
+    this.trChange.emit(data);
+  }
+
+  onCheck(column: any, values: any[]) {
+    column.filterChecked = values;
+  }
+
+  filter(column: any) {
+    this.filterValues[column.index] = column.filterChecked;
+    // column.filterValue = column.filterChecked;
+    this.updateData();
+    column.filterVisible = false;
+  }
+
+  reset(column: any) {
+    column.filterChecked = [];
+    column.filter = column.filter.map((item) => ({
+      value: item.value,
+    }));
+    this.filter(column);
+  }
+
+  export(): Sheet {
+    const data = [];
+    const merges = [];
+    if (this.groups) {
+      const row1 = [];
+      const row2 = [];
+      this.groups.forEach((group) => {
+        const colIndex = row1.length;
+        group.columns.forEach((column) => {
+          row1.push(group.title);
+          row2.push(column.title);
+        });
+        if (group.row > 1 || group.col > 1) {
+          merges.push({ s: { r: 0, c: colIndex }, e: { r: group.row - 1, c: colIndex + group.col - 1 } });
+        }
+      });
+      data.push(row1, row2);
+      this._data.forEach((rowData) => {
+        const rowIndex = data.length;
+        const row = [];
+        rowData.forEach((td, i) => {
+          row.push(td.value);
+          if (td.rowspan > 1) {
+            merges.push({ s: { r: rowIndex, c: i }, e: { r: rowIndex + td.rowspan - 1, c: i } });
+          }
+        });
+        data.push(row);
+      });
+    } else {
+      const row1 = this.columns.map((column) => column.title);
+      data.push(row1);
+      this._data.forEach((rowData) => {
+        const row = this.columns.map((column) => rowData[column.index]);
+        data.push(row);
+      });
+    }
+    return { data, merges };
+  }
+
+  exportWord() {
+    const element = this.ele.nativeElement as HTMLElement;
+    let html = '';
+    const tables = element.querySelectorAll('table');
+    if (tables.length === 1) {
+      html += tables.item(0).outerHTML;
+    } else if (tables.length > 1) {
+      html += '<table>';
+      tables.forEach((table) => {
+        table = table.cloneNode(true) as HTMLTableElement;
+        const measureRow = table.querySelector('.ant-table-measure-now');
+        if (measureRow) {
+          measureRow.parentElement.removeChild(measureRow);
+        }
+        html += table.innerHTML;
+      });
+      html += '</table><br/>';
+    }
+    return html;
+  }
+}

package/src/lib/table/table.module.ts

@@ -0,0 +1,33 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TableComponent } from './table.component';
+import { NzTableModule } from 'ng-zorro-antd/table';
+import { WidgetBaseModule, WidgetService } from 'bbj-widget-base';
+import { NzPipesModule } from 'ng-zorro-antd/pipes';
+import { NzSelectModule } from 'ng-zorro-antd/select';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
+import { FormsModule } from '@angular/forms';
+import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+
+@NgModule({
+  declarations: [TableComponent],
+  imports: [
+    CommonModule,
+    FormsModule,
+    WidgetBaseModule,
+    NzTableModule,
+    NzPipesModule,
+    NzSelectModule,
+    NzIconModule,
+    NzDropDownModule,
+    NzCheckboxModule,
+    NzButtonModule
+  ],
+})
+export class TableModule {
+  constructor(widgetService: WidgetService) {
+    widgetService.register(TableComponent);
+  }
+}

package/src/lib/tabs/tab/tab.component.html

@@ -0,0 +1 @@
+<ng-template [widgetChildren]="children"></ng-template>

package/src/lib/tabs/tab/tab.component.less

@@ -0,0 +1,5 @@
+// :host{
+//     display: block;
+//     height: 100%;
+//     overflow: auto;
+// }

package/src/lib/tabs/tab/tab.component.spec.ts

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

package/src/lib/tabs/tab/tab.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+import { Property, Widget } from 'bbj-widget-base';
+
+@Component({
+  selector: 'sc-tab',
+  templateUrl: './tab.component.html',
+  styleUrls: ['./tab.component.less'],
+})
+@Widget('选项卡', { hidden: true })
+export class TabComponent implements OnInit {
+  @Property('标题')
+  title = 'New Tab';
+  children: any[];
+
+  constructor() {}
+
+  ngOnInit(): void {}
+}

package/src/lib/tabs/tabs.component.html

@@ -0,0 +1,13 @@
+<nz-tabset
+  [style]="tabPosition === 'top' || tabPosition === 'bottom' ? 'padding:0 10px' : ''"
+  [(nzSelectedIndex)]="selectedIndex"
+  [nzAnimated]="animated"
+  [nzSize]="size"
+  [nzTabPosition]="tabPosition"
+  [nzType]="type"
+  [nzTabBarGutter]="tabBarGutter"
+>
+  <nz-tab *ngFor="let child of children" [nzTitle]="child.option.title" nzForceRender>
+    <ng-template widgetHost [widget]="child"></ng-template>
+  </nz-tab>
+</nz-tabset>