如何在Aurelia SlickGrid中基于起止日期自定义计算生成状态列

1. 抽离可复用的状态判断逻辑 #

直接在表格组件类内实现和原页面完全对齐的Moment.js判断方法，不需要额外拆分：

import moment from 'moment';

// 对齐原页面的4种状态判断规则
private doesLicenseActivate(licenseRow: any): boolean {
  // 未到生效时间：当前时间早于开始日期
  return moment().isBefore(moment(licenseRow.DateStart));
}

private didLicenseEnd(licenseRow: any): boolean {
  // 已自然到期：当前时间晚于结束日期，且记录未标记取消
  return moment().isAfter(moment(licenseRow.DateEnd)) && !licenseRow.IsCanceled;
}

private isLicenseCurrentlyActive(licenseRow: any): boolean {
  // 当前在有效期内：当前时间介于开始和结束日期之间，且未标记取消
  return moment().isBetween(moment(licenseRow.DateStart), moment(licenseRow.DateEnd)) && !licenseRow.IsCanceled;
}

2. 编写Status列专属格式化函数 #

SlickGrid的单元格渲染通过formatter实现，不需要依赖后端返回Status字段，直接逐行读取当前行的开始/结束日期、取消标记计算展示内容，完全匹配原页面多个块级div的展示效果：

private StatusFormatter(row: number, cell: number, value: any, columnDef: any, rowData: any) {
  const statusLineList: string[] = [];
  // 严格按原页面的判断顺序拼接展示内容
  if (this.doesLicenseActivate(rowData)) {
    statusLineList.push(`Activates on ${moment(rowData.DateStart).format('DD/MM/YYYY')}`);
  }
  if (this.didLicenseEnd(rowData)) {
    statusLineList.push(`Ended on ${moment(rowData.DateEnd).format('DD/MM/YYYY')}`);
  }
  if (this.isLicenseCurrentlyActive(rowData)) {
    statusLineList.push('Current License');
  }
  if (rowData.IsCanceled) {
    statusLineList.push(`Cancelled on ${moment(rowData.DateEnd).format('DD/MM/YYYY')}`);
  }
  // 用<br>分隔多行状态，匹配原页面的块级排版
  return statusLineList.join('<br>');
}

3. 补充列定义配置 #

直接把Status列加入现有列定义数组，对齐其他列的基础配置：

/* Define grid Options and Columns */
private defineMembershipGrid() {
    return this.columnDefinitionsMembershipHistory = [
       { id: "DateStart", name: "Start Date", field: "DateStart", formatter: Formatters.dateEuro, sortable: true, filterable: true, minWidth: 100 },
       { id: "DateEnd", name: "End Date", field: "DateEnd", formatter: Formatters.dateEuro, sortable: true, filterable: true, minWidth: 100 },
       { id: "Duration", name: "Duration", field: "Duration", formatter: this.DurationFormatter, sortable: true, filterable: true, minWidth: 100 },
       // 新增Status列配置
       {
         id: "Status",
         name: "Status",
         field: "Status",
         // 必须绑定this上下文，否则formatter执行时类内的判断方法会报错
         formatter: this.StatusFormatter.bind(this),
         sortable: false,
         filterable: true,
         minWidth: 150
       }            
    ];
}

常见问题处理 #

• 日期格式统一：格式化时用的DD/MM/YYYY和现有dateEuro格式化器的输出保持一致，不会出现同表格内日期排版不统一的问题
• OData筛选适配：如果需要给Status列加服务端筛选，只要在现有OData筛选拦截器里，把Status列的筛选值映射成对应日期区间的OData查询条件即可，不需要后端改接口
• 样式适配：如果需要和原页面一样的排版，只要给Status列加对应的cssClass，匹配之前的列宽样式类即可

内容的提问来源于stack exchange，提问作者sb32134