bbj-screen-widget 2.4.62 → 2.4.63

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

@@ -1,608 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

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

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

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

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

@@ -1,25 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,13 +0,0 @@
-<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>