feat(module:table): add cellMerge input

#7
NG-NEST · Feb 9, 2021 · 85b7b67 · 85b7b67
1 parent fd38cfe
commit 85b7b67
Show file tree

Hide file tree

Showing 9 changed files with 279 additions and 116 deletions.
diff --git a/lib/ng-nest/ui/date-picker/date-picker.component.spec.ts b/lib/ng-nest/ui/date-picker/date-picker.component.spec.ts
@@ -86,7 +86,7 @@ describe(XDatePickerPrefix, () => {
       expect(debugElement).toBeDefined();
     });
   });
-  fdescribe(`hour minute second.`, () => {
+  describe(`hour minute second.`, () => {
     let fixture: ComponentFixture<TestXDatePickerHourMinuteSecondComponent>;
     let debugElement: DebugElement;
     beforeEach(() => {
@@ -303,17 +303,6 @@ class TestXDatePickerYearOrMonthComponent {
         <x-date-picker [(ngModel)]="model1" label="时" type="date-hour"></x-date-picker>
       </x-col>
     </x-row>
-    <x-row>
-      <x-col span="12">
-        <x-date-picker [(ngModel)]="model2" label="年" type="year"></x-date-picker>
-      </x-col>
-    </x-row>
-    <x-row>
-      <x-col span="12">
-        <x-date-picker [(ngModel)]="model2" label="月" type="month"></x-date-picker>
-      </x-col>
-    </x-row>
-    <x-date-picker label="方式" [(ngModel)]="model3"></x-date-picker>
   `,
   styles: [
     `

diff --git a/lib/ng-nest/ui/table/style/mixin.scss b/lib/ng-nest/ui/table/style/mixin.scss
@@ -174,6 +174,13 @@
       }
     }
   }
+  &-cell-merge {
+    > thead tr,
+    > tbody tr {
+      display: grid;
+      grid-auto-flow: row;
+    }
+  }
 }
 
 @mixin pagination {

diff --git a/lib/ng-nest/ui/table/table-head.component.html b/lib/ng-nest/ui/table/table-head.component.html
@@ -1,4 +1,14 @@
-<thead #thead [style.height.px]="rowHeight == 0 ? '' : rowHeight">
+<thead #thead [ngStyle]="theadStyle" [style.height.px]="rowHeight == 0 ? '' : rowHeight">
+  <ng-container *ngIf="cellMerge; else columnsTpl">
+    <tr [style.gridTemplateColumns]="cellMerge.gridTemplateColumns">
+      <th *ngFor="let column of cellMerge.thead" [style.grid-area]="column.gridArea">
+        <ng-container *ngTemplateOutlet="columnTpl; context: { column: column }"></ng-container>
+      </th>
+    </tr>
+  </ng-container>
+</thead>
+
+<ng-template #columnsTpl>
   <tr [style.height.px]="rowHeight == 0 ? '' : rowHeight" [style.padding-right.px]="scrollYWidth" [style.width.px]="scrollXWidth">
     <th
       *ngFor="let column of columns; trackBy: trackByItem"
@@ -7,24 +17,28 @@
       [style.left.px]="column.left"
       [style.flex]="column.width ? 'none' : column.flex"
     >
-      <ng-container [ngSwitch]="column.type">
-        <ng-container *ngSwitchCase="'index'">
-          <a>{{ column.label }}</a>
-        </ng-container>
-        <ng-container *ngSwitchDefault
-          ><a [class.x-table-sort]="column.sort" (click)="onSort(column)">
-            <ng-container *xOutlet="columnTpl[column.id]; context: { $column: column }">
-              {{ column.label }}
-            </ng-container>
-            <x-icon
-              *ngIf="column.sort"
-              type="fto-bar-chart"
-              class="x-table-sort-icon"
-              [class.x-table-icon-up]="sortStr === column.id + ' desc'"
-              [class.x-table-icon-down]="sortStr === column.id + ' asc'"
-            ></x-icon> </a
-        ></ng-container>
-      </ng-container>
+      <ng-container *ngTemplateOutlet="columnTpl; context: { column: column }"></ng-container>
     </th>
   </tr>
-</thead>
+</ng-template>
+
+<ng-template #columnTpl let-column="column">
+  <ng-container [ngSwitch]="column.type">
+    <ng-container *ngSwitchCase="'index'">
+      <a>{{ column.label }}</a>
+    </ng-container>
+    <ng-container *ngSwitchDefault
+      ><a [class.x-table-sort]="column.sort" (click)="onSort(column)">
+        <ng-container *xOutlet="columnTpl[column.id]; context: { $column: column }">
+          {{ column.label }}
+        </ng-container>
+        <x-icon
+          *ngIf="column.sort"
+          type="fto-bar-chart"
+          class="x-table-sort-icon"
+          [class.x-table-icon-up]="sortStr === column.id + ' desc'"
+          [class.x-table-icon-down]="sortStr === column.id + ' asc'"
+        ></x-icon> </a
+    ></ng-container>
+  </ng-container>
+</ng-template>
diff --git a/lib/ng-nest/ui/table/table-head.component.ts b/lib/ng-nest/ui/table/table-head.component.ts
@@ -12,7 +12,7 @@ import {
   ViewChild
 } from '@angular/core';
 import { XTableHeadPrefix, XTableHeadProperty, XTableColumn } from './table.property';
-import { removeNgTag, XIsEmpty, XSort, XIsChange, XConfigService } from '@ng-nest/ui/core';
+import { removeNgTag, XIsEmpty, XSort, XIsChange, XConfigService, XNumber } from '@ng-nest/ui/core';
 import { XTableComponent } from './table.component';
 
 @Component({
@@ -23,6 +23,7 @@ import { XTableComponent } from './table.component';
 export class XTableHeadComponent extends XTableHeadProperty implements OnInit {
   sort: XSort[] = [];
   sortStr = '';
+  theadStyle: { [property: string]: any } = {};
   @ViewChild('thead') thead: ElementRef;
   constructor(
     @Host() @Optional() public table: XTableComponent,
@@ -40,6 +41,7 @@ export class XTableHeadComponent extends XTableHeadProperty implements OnInit {
 
   ngOnInit() {
     removeNgTag(this.elementRef.nativeElement);
+    this.setStyle();
   }
 
   ngAfterViewInit() {
@@ -50,6 +52,20 @@ export class XTableHeadComponent extends XTableHeadProperty implements OnInit {
     return Number(column.left) >= 0;
   }
 
+  setStyle() {
+    let height = this.rowHeight == 0 ? '' : this.rowHeight;
+    if (this.cellMerge?.thead) {
+      const spt = this.cellMerge.thead.map((x) => {
+        const gridAreaSpt = x.gridArea?.split('/');
+        return gridAreaSpt && gridAreaSpt.length > 3 ? Number(gridAreaSpt[2]) : 2;
+      });
+      height = ((Math.max(...spt) - 1) * (height as number)) as XNumber;
+    }
+    this.theadStyle = {
+      height: `${height}px`
+    };
+  }
+
   onSort(column: XTableColumn) {
     if (!column.sort) return;
     if (XIsEmpty(this.sort)) this.sort = [];

diff --git a/lib/ng-nest/ui/table/table.component.html b/lib/ng-nest/ui/table/table.component.html
@@ -6,13 +6,15 @@
   [class.x-table-scroll-top]="getScrollTop"
   [class.x-table-bordered]="bordered"
   [class.x-table-td-adaption-height]="rowHeight == 0"
+  [class.x-table-cell-merge]="cellMerge"
 >
   <x-table-head
     [columns]="columns"
     [rowHeight]="rowHeight"
     [columnTpl]="headColumnTpl"
     [scrollYWidth]="scrollYWidth"
     [scrollXWidth]="scrollXWidth"
+    [cellMerge]="cellMerge"
   ></x-table-head>
   <x-table-body
     [data]="tableData"
@@ -28,6 +30,7 @@
     [adaptionHeight]="adaptionHeight"
     [docPercent]="docPercent"
     [scroll]="scroll"
+    [cellMerge]="cellMerge"
     [(activatedRow)]="activatedRow"
     (activatedRowChange)="activatedRowChange.emit($event)"
   ></x-table-body>