lib-calendar-matrix v0.2.1

CalendarMatrix

适用于Angular项目的日历矩阵，支持复合列表和自定义表格内容。

使用样例

安装方式

npm i --save ng-calendar-matrix

在对应module.ts中：

import {CalendarMatrixModule} from "ng-calendar-matrix";

@NgModule({
  imports: [
    ...
    CalendarMatrixModule
  ]
})

在html中：

<lib-calendar-matrix [headerData]="headerData" [cotentData]="cotentData"></lib-calendar-matrix>

注意事项

1. [headerData] 类型为headerItem[]：

   export class headerItem {
     label: string; // 所在列的表头默认显示内容，必填
     metadata?: any; // 元数据
     class?: any[]; // 所在单元格的class，string[]
     nzWidth?: string; // 所在列的列宽，只在<th></th>起作用
   }

2. [feildData] 类型为fieldItem[]：

   export class fieldItem {
     label: string; // key所在列的表头，必填
     feild: string; // key，必填
     class?: any[]; // 在th，默认用thClass，没有则用class；在td，默认用tdClass，没有则用class；
     thClass?: any[]; // th class
     tdClass?: any[]; // td class
     nzWidth?: string; // 所在列的列宽，只在<th></th>起作用
   }

3. [cotentData] 类型为dataItem[]：

   export class dataItem {
     label: string; // content默认显示内容，必填
     rowSpan: number; // 需要跨的最大行数，必填
     contentList: contentItem[][]; // 复合列表子数组，必填，可为空数组
     metadata?: any; // 元数据
     class?: any[]; // 所在单元格的class，string[]
   }
   
   export class contentItem {
     label: string; // content默认显示内容，必填
     metadata?: any; // 元数据
     class?: any[]; // 所在单元格的class，string[]
   }

4. 当 [firstTemplate] 不传时，默认显示 [defaultFirstTemplate]：

   <ng-template #defaultFirstTemplate>
       <div class="padding-container">
           <span style="display: flex;justify-content: center;align-items: center;">
               姓名
               <ng-container *ngIf="feildList && feildList.length && option && option.feildDataExpand">
                   <i nz-icon *ngIf="!isShowExtraTh && feildList && feildList.length" class="hoverClass" (click)="toggleTh()" nzType="right" nzTheme="outline"></i>
                   <i nz-icon *ngIf="isShowExtraTh && feildList && feildList.length" class="hoverClass" (click)="toggleTh()" nzType="left" nzTheme="outline"></i>
               </ng-container>
           </span>
       </div>
   </ng-template>

5. 当 [feildHeaderTemplate] 不传时，默认显示 [defaultFeildHeaderTemplate] , 因此fieldItem内label字段必填：

   <ng-template #defaultFeildHeaderTemplate let-obj>
       {{obj.item ? obj.item.label : null}}
   </ng-template>

6. 当 [headerTemplate] 不传时，默认显示 [defaultHeaderTemplate] , 因此headerItem内label字段必填：

   <ng-template #defaultHeaderTemplate let-obj>
       {{obj.item ? obj.item.label : null}}
   </ng-template>

7. 当 [slotTemplate] 不传时，默认显示 [defaultSlotTemplate] , 特指表格第一列，因此dataItem内label字段必填：

   <ng-template #defaultSlotTemplate let-obj>
       {{obj.slot ? obj.slot.label : null}}
   </ng-template>

8. 当 [feildContentTemplate] 不传时，默认显示 [defaultFeildContentTemplate] , 因此fieldItem内label字段和feild字段必填，且feild代表的key在dataItem.metadata中存在，否则显示null：

   <ng-template #defaultFeildContentTemplate let-obj>
       {{obj['slot'] && obj['slot']['metadata'] ? obj['slot']['metadata'][obj['key']] : null}}
   </ng-template>

9. 当 [contentTemplate] 不传时，默认显示 [defaultContentTemplate] , 因此contentItem内label字段必填：

   <ng-template #defaultContentTemplate let-obj>
       {{obj.shift ? obj.shift.label : null}}
   </ng-template>

10. 当 [headerData] length不为0 且 [cotentData] length也不为0时，dataItem.contentList.length需等于headerData.length（dataItem.contentList.length=0除外），否则控制台扔出报错；

11. 当 [feildData] length不为0时，显示slot外的其他固定列，当同时设置option.feildDataExpand = true时，会显示扩展图标，点击扩展图标展开[feildData] 固定列，再次点击则隐藏；

12. [option] 配置项：

    export class option {
      firstThWidth: string; // 第一列列宽
      size: string; // 表格大小，分为'small', 'default', 'large'3种，默认为'default'
      thAlign: string;
      tdAlign: string;
      cdkDrop: boolean; // 是否接收拖拽，若为true，则表格为接收区
      bordered: boolean; // 是否有边框
      showPagination: boolean; // 是否显示分页
      frontPagination: boolean; // 是否前端分页
      pageNumber: number; // 当前页数
      pageSize: number; // 每页显示数量
      feildDataExpand: boolean; // feildData是否可展开收缩
      scrollOption: {y: string, x: string}; // 滚动scrollOption
      firstThClass: string[]; // th第一格的样式
      total: number; // 总数据量
      isQueryLoad: boolean; // 是否远程加载
    }

    
    



## 自定义内容举例

以 `[headerTemplate]` 为例

在html中：

​```html
<lib-calendar-matrix [headerData]="headerData" [cotentData]="cotentData" [headerTemplate]="headerTemplate"></lib-calendar-matrix>

<ng-template #headerTemplate let-obj>
    {{obj.item ? obj.item.label : null}}{{'(周' + weekDayMap[dateWeekdayList[obj.headerIndex]] + ')'}}
</ng-template>

其余template如上类似；

自定义部位图解

当不存在 [feildData] 时，feildHeaderTemplate及feildContentTemplate所在列消失；

配置项