实现一个批量任务进度展示表格

统计出各种不同状态的任务数量用于在底部展示

数据源为一个对象数组，结构如下

enum OperationStatusEnum {
  'init' = 'init',
  'started' = 'started',
  'failure' = 'failure',
  'successful' = 'successful',
  'canceled' = 'canceled',
  'rollback' = 'rollback'
}
interface IProgressListItem {
  description?: string;
  done_message?: string;
  end_timestamp?: string;
  error?: string;
  meters?: IStepMeter[];
  operation_status?: OperationStatusEnum;
  start_timestamp?: string;
  step_index?: number;
  steps?: string[];
  steps_warning?: string[];
}

可以通过operation_status这个字段去计算每个状态的任务数量

 const computeStatusNum = (progressStatus: IProgressListItem[]) => {
    const total = progressStatus.length;
    const success = progressStatus.filter(
      (item) => item.operation_status === OperationStatusEnum.successful
    ).length;
    const fail = progressStatus.filter(
      (item) => item.operation_status === OperationStatusEnum.failure
    ).length;
    const cancel = progressStatus.filter(
      (item) => item.operation_status === OperationStatusEnum.canceled
    ).length;
    return {
      total,
      success,
      fail,
      cancel
    };
  };

如何切换列表和详情

首先需要一个列表用来展示所有的任务进度，点击某个任务的时候应该切换到该任务进度的详情内容，通过左右切换实现该功能

表格

<div className="progress-list-table">
    <Table
        className="action-table action-table-hover"
        rowKey="key"
        columns={this.tableTitle}
        dataSource={this.filterTableData()}
        onRow={(record, index) => ({
        onClick: this.handleRowClick.bind(null, index ?? -1)
        })}
    />
   <div
      className={`progress-list-detail ${
        this.state.detailIndex !== -1 ? 'active' : ''
      }`}
    >
      <ProgressDetail
        steps={steps}
        index={this.state.detailIndex}
        clickBack={this.handleBack}
      />
    </div>
</div>

在表格和详情的最外层增加一个div包裹，将其设置为相对定位

.progress-list-table{
    position: relative;
    overflow: hidden;
    min-height: 230px;
    max-height: 60vh;
}

此时详情页面就可以相对这个外层的div进行定位

  .progress-list-detail {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    left: 100%;
    transition: all 0.5s;
    &.active {
      left: 0;
    }
  }

通过上述代码可以看出当detailIndex这个状态变量不等于-1的时候，就切换为active状态。反之则为列表状态，故详情的clickBack函数里设置了detailIndex为-1

const handleBack = () => {
    this.setState({
      detailIndex: -1
    });
  };

当然还有另外一种方式：通过width实现，将外层的宽度设置为200%，最终通过transform实现

  .content-wrapper {
    width: 200%;
    height: 100%;
    &.position-left {
        transform: translate(0);
    }
   &.position-right {
        transform: translate(-50%);
  }
 }
.history-left {
    width: 50%;
    height: 101%;
    float: left;
}
.history-right {
    width: 50%;
    height: 100%;
    float: left;
    overflow: hidden;
}

任务列表

当点击列表某一条记录的时候切换到详情，即需要修改detaillIndex这个变量为当前记录的index

onRow={(record, index) => ({
    onClick: this.handleRowClick.bind(null, index ?? -1)
})}

const  handleRowClick = (index: number) => {
    this.setState({
      detailIndex: index
    });
};

任务详情