bbj-screen-widget 2.4.60 → 2.4.62

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

@@ -0,0 +1,123 @@
+<nz-table
+  *ngIf="columns"
+  #basicTable
+  [nzData]="_data"
+  [nzScroll]="{ x: '50px', y: '100%' }"
+  [nzPageSize]="pageSize"
+  [ngStyle]="bodyStyle"
+  [nzBordered]="showBorder"
+  [nzWidthConfig]="widthConfig"
+  [nzFrontPagination]="needPage"
+>
+  <thead>
+    <tr *ngFor="let header of headers">
+      <ng-container *ngFor="let column of header">
+        <th
+          *ngIf="column.filter"
+          [rowSpan]="column.row"
+          [ngStyle]="headStyle"
+          [colSpan]="column.col"
+          [nzAlign]="contentAlign"
+          nzCustomFilter
+        >
+          {{ column.title }}
+          <ng-container *ngIf="column.filter">
+            <nz-filter-trigger
+              [nzDropdownMenu]="menu"
+              [(nzVisible)]="column.filterVisible"
+              [nzActive]="filterValues[column.index]?.length"
+            >
+              <i nz-icon nzType="filter" nzTheme="outline"></i>
+            </nz-filter-trigger>
+            <nz-dropdown-menu #menu="nzDropdownMenu">
+              <div class="ant-table-filter-dropdown">
+                <div class="search-box">
+                  <nz-checkbox-wrapper style="width: 100%" (nzOnChange)="onCheck(column, $event)">
+                    <div *ngFor="let option of column.filter">
+                      <label nz-checkbox [nzValue]="option.value" [ngModel]="option.checked">
+                        <span [innerHTML]="option.value | nzSafeNull | nzSanitizer : 'html'"></span>
+                      </label>
+                    </div>
+                  </nz-checkbox-wrapper>
+                  <button nz-button nzSize="small" nzType="primary" (click)="filter(column)" class="search-button">
+                    查询
+                  </button>
+                  <button nz-button nzSize="small" (click)="reset(column)">重置</button>
+                </div>
+              </div>
+            </nz-dropdown-menu>
+          </ng-container>
+        </th>
+        <th
+          *ngIf="!column.filter"
+          [rowSpan]="column.row"
+          [ngStyle]="headStyle"
+          [colSpan]="column.col"
+          [nzAlign]="contentAlign"
+        >
+          {{ column.title }}
+        </th>
+      </ng-container>
+    </tr>
+  </thead>
+  <tbody>
+    <ng-container *ngIf="!groups">
+      <tr *ngFor="let data of basicTable.data" (click)="onTrClick(data)">
+        <td
+          *ngFor="let column of columns"
+          nzAlign="{{ contentAlign }}"
+          (click)="onTdClickByGroup(data, column)"
+          [ngStyle]="bodyStyle"
+          [style.backgroundColor]="tbodyBackground"
+          [innerHTML]="data[column.index] | nzSafeNull | nzSanitizer : 'html'"
+        >
+      </td>
+      </tr>
+    </ng-container>
+    <ng-container *ngIf="groups">
+      <tr *ngFor="let row of rows" (click)="onTrClick(row)">
+        <ng-container *ngFor="let td of row; let i = index">
+          <td
+            *ngIf="td.rowspan"
+            [attr.rowspan]="td.rowspan"
+            [style.backgroundColor]="td.color"
+            nzAlign="{{ contentAlign }}"
+            (click)="onTdClick(td, i)"
+            [ngStyle]="bodyStyle"
+            [innerHTML]="td.value | nzSafeNull | nzSanitizer : 'html'"
+          ></td>
+        </ng-container>
+      </tr>
+    </ng-container>
+    <tr *ngIf="needCount">
+      <td *ngFor="let count of totalCount" nzAlign="{{ contentAlign }}" [style.backgroundColor]="tbodyBackground">
+        {{ count.value }}
+      </td>
+    </tr>
+    <tr *ngIf="needCount">
+      <ng-container *ngFor="let count of totalCount; let i = index">
+        <td *ngIf="i === 0" nzAlign="{{ contentAlign }}" [style.backgroundColor]="tbodyBackground">平均值</td>
+        <td *ngIf="i !== 0" nzAlign="{{ contentAlign }}" [style.backgroundColor]="tbodyBackground">
+          {{ count.value / dataSize }}
+        </td>
+      </ng-container>
+    </tr>
+    <tr *ngIf="isCount">
+      <td nzAlign="{{ contentAlign }}" [style.backgroundColor]="tbodyBackground">个数</td>
+      <td nzAlign="{{ contentAlign }}" colSpan="{{ titleSize - 1 }}" [style.backgroundColor]="tbodyBackground">
+        {{ dataSize }}
+      </td>
+    </tr>
+    <tr *ngIf="sumColumns">
+      <td
+        *ngFor="let column of columns; let i = index"
+        nzAlign="{{ contentAlign }}"
+        [ngStyle]="bodyStyle"
+        [style.backgroundColor]="tbodyBackground"
+      >
+        <ng-container *ngIf="i == 0 && sumData[column.index] == null">合计</ng-container>
+        <ng-container *ngIf="sumData[column.index] != null">{{ sumData[column.index] }}</ng-container>
+      </td>
+    </tr>
+  </tbody>
+</nz-table>

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

@@ -0,0 +1,76 @@
+: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;
+            &::-webkit-scrollbar {
+              opacity: 0;
+              background: transparent;
+            }
+          }
+          .ant-table-body {
+            flex: 1;
+            overflow: auto;
+          }
+        }
+      }
+      .ant-table-pagination-right {
+        align-self: flex-end;
+      }
+    }
+  }
+}
+.search-box {
+  padding: 8px;
+  width: 212px;
+}
+
+.search-box input {
+  margin-bottom: 8px;
+  display: block;
+}
+
+.search-box button {
+  width: 90px;
+}
+
+.search-button {
+  margin-right: 8px;
+}
+nz-filter-trigger {
+  background: transparent !important;
+  ::ng-deep {
+    .ant-table-filter-trigger {
+      font-size: inherit;
+      &:not(.active) {
+        color: inherit;
+      }
+    }
+  }
+}
+
+.ant-checkbox-group {
+  max-height: 300px;
+  overflow: auto;
+}

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

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