bixi/packages/core/table/cols/col-progress.component.ts

企业级中后台前端解决方案

import { ChangeDetectionStrategy, Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';
import { isFunction } from '@bixi/core/utils';
import { NzSafeAny } from 'ng-zorro-antd/core/types';
import { EProgressStatus, IFn, IProgressCol } from '../table.type';
import { hasKey } from '../utils';
import { ColBase } from './col.base';

@Component({
  selector: 'bixi-table-col-progress',
  host: { '[class.bixi-table-col-progress]': 'true' },
  template: `
    <nz-progress nz-tooltip [nzTooltipTitle]="progressTooltip" nzType="circle" [nzPercent]="value * 100"
                 [nzWidth]="36" [nzStrokeWidth]="6" [nzFormat]="value >= 1 ? successRef : format"
                 [nzStatus]="'normal'"
                 [nzStrokeColor]="color"></nz-progress>
    <ng-template #successRef>
      <i nz-icon nzType="check" [style.color]="'#21BC29'"></i>

    </ng-template>
  `,
  styles: [
    `
      nz-progress .ant-progress-circle .ant-progress-text {
        color: rgba(0, 0, 0, 0.6);
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
      }
    `
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None
})
export class BixiTableColProgressComponent extends ColBase {
  defaultStatus: NzSafeAny = {
    'stop': {
      progressColor: '#C0CCDA'
    },
    'processing': {
      progressColor: '#107CEE'
    },
    'success': {
      progressColor: '#21BC29'
    },
    'failed': {
      progressColor: '#EE5144'
    },
    'starting': {
      progressColor: '#E0E6ED'
    }
  };

  get status(): string {
    return isFunction(this.col.status) ? (this.col.status as IFn<EProgressStatus>)(this.value, this.row, this.index) : this.col.status as string;
  }

  get progressTooltip() {
    if (hasKey(this.col, 'tooltip')) {
      return this.tooltip;
    }
    return false;
  }

  @Input() col: IProgressCol;

  @HostBinding('style.width') get _width() {
    return this.col.width;
  }

  @HostBinding('style.display') get _display() {
    return 'block';
  }

  get progressStatus() {
    return this.status;
  }

  get color(): string {
    return this.defaultStatus[this.status].progressColor;
  }

  format = (percent: number) => percent + '%';
}