antd/lib/table/interface#SortOrder TypeScript Examples

ProTableRequestAdapter = async (
  params: any & {
    pageSize?: number;
    current?: number;
    keyword?: string;
  },
  sort: Record<string, SortOrder>,
  filter: Record<string, React.ReactText[] | null>,
  requestFn: (arg: any) => any,
  refreshFingerFn?: (arg: any) => void,
): Promise<any> => {
  // console.log('sort', sort);
  // console.log('filter', filter);
  // console.log('params', params);

  const formattedParams = FormatQueryParams({
    ...params,
    page: params.current,
    page_size: params.pageSize,
  });

  if (sort && Object.keys(sort)) {
    Object.keys(sort).forEach((key) => {
      formattedParams.sort_field = key;
      formattedParams.sort_type = sort[key] === 'ascend' ? 'asc' : 'desc';
    });
  }

  if (formattedParams.created_at) {
    [formattedParams.created_at_start, formattedParams.created_at_end] = formattedParams.created_at;
    delete formattedParams.created_at;
  }

  const resp = await requestFn(formattedParams);
  if (refreshFingerFn) {
    refreshFingerFn(Date.now());
  }
  return {
    data: resp.data.items || [],
    success: resp.code === 0,
    total: resp.data.pager.total_rows || 0,
  };
}

ProTableRequestAdapter = async (
  params: any & {
    pageSize?: number;
    current?: number;
    keyword?: string;
  },
  sort: Record<string, SortOrder>,
  filter: Record<string, React.ReactText[] | null>,
  requestFn: (arg: any) => any,
  refreshFingerFn?: (arg: any) => void,
): Promise<any> => {
  // console.log('sort', sort);
  // console.log('filter', filter);
  // console.log('params', params);

  const formattedParams = FormatQueryParams({
    ...params,
    page: params.current,
    page_size: params.pageSize,
  });

  if (sort && Object.keys(sort)) {
    Object.keys(sort).forEach((key) => {
      formattedParams.sort_field = key;
      formattedParams.sort_type = sort[key] === 'ascend' ? 'asc' : 'desc';
    });
  }

  if (formattedParams.created_at) {
    [formattedParams.created_at_start, formattedParams.created_at_end] = formattedParams.created_at;
    delete formattedParams.created_at;
  }

  const resp = await requestFn(formattedParams);
  if (refreshFingerFn) {
    refreshFingerFn(Date.now());
  }
  return {
    data: resp.data.items || [],
    success: resp.code === 0,
    total: resp.data.pager.total_rows || 0,
  };
}

private _initConfigProps = () => {
    // 默认分页配置
    const defaultPagination: TablePaginationConfig = {
      current: this.page,
      pageSize: this.pageSize,
      total: this._total,
      showSizeChanger: true,
      pageSizeOptions: ["10", "20", "50"],
      // eslint-disable-next-line react/display-name
      showTotal: (totals) => (
        <>
          <span className={paginationStyle.totalText}>
            {i18n.t(`${NS_PRESENTATIONAL_BRICKS}:${K.PAGINATION_TOTAL_TEXT}`)}{" "}
            <strong className={paginationStyle.total}>{totals}</strong>{" "}
            {i18n.t(`${NS_PRESENTATIONAL_BRICKS}:${K.PAGINATION_TOTAL_UNIT}`)}
          </span>
          {this.configProps?.rowSelection &&
            this.showSelectInfo &&
            this.selectedRowKeys.length !== 0 &&
            this.renderSelectInfo()}
        </>
      ),
    };

    const rowKey =
      this.rowKey ?? this._fields.rowKey ?? this.configProps?.rowKey;
    let rowDisabledConfig: RowDisabledProps[];

    if (this.rowDisabledConfig) {
      rowDisabledConfig = Array.isArray(this.rowDisabledConfig)
        ? this.rowDisabledConfig
        : [this.rowDisabledConfig];
    }

    // 当 rowSelection 为 true 或者有相关配置的时候的默认行选择配置
    const defaultRowSelection: TableRowSelection<any> = {
      ...(rowKey
        ? {
            selectedRowKeys: this._isInSelect
              ? this.selectedRowKeys
              : this.storeCheckedByUrl
              ? this._getCheckedFromUrl()
              : this.defaultSelectAll
              ? this._handleDefaultSelectAll()
              : this.selectedRowKeys,
            onSelect: this._handleOnSelect,
            onSelectAll: this._handleSelectAll,
            onChange: this._handleRowSelectChange,
            preserveSelectedRowKeys: true,
          }
        : {
            // 当用户没有设置rowKey时的兼容处理
            onChange: this._handleRowSelectChange,
            preserveSelectedRowKeys: true,
          }),
      getCheckboxProps: (record: any) => {
        if (
          !isEmpty(this._disabledChildrenKeys) &&
          this._disabledChildrenKeys.includes(get(record, rowKey))
        ) {
          return {
            disabled: true,
          };
        }
        if (!rowDisabledConfig) return {};

        return {
          disabled: rowDisabledConfig.some((config) => {
            const { field, value, operator } = config;
            const fun = compareFunMap[operator];

            return fun?.(value, get(record, field));
          }),
        };
      },
    };
    if (this.configProps) {
      this._finalConfigProps = cloneDeep(this.configProps);
      if (this.configProps.pagination !== false) {
        this._finalConfigProps.pagination = {
          ...defaultPagination,
          ...this.pagination,
          ...this.configProps.pagination,
        };
        if (
          (this.configProps.pagination === undefined ||
            this.configProps.pagination === null) &&
          this.pagination === false
        ) {
          this._finalConfigProps.pagination = false;
        }
      }
      if (!this.configProps.size) {
        this._finalConfigProps.size = this.size;
      }
      if (this.configProps.rowSelection) {
        if (this.configProps.rowSelection === true) {
          this._finalConfigProps.rowSelection = {
            ...defaultRowSelection,
            type: this.type ?? "checkbox",
          };
        } else {
          this._finalConfigProps.rowSelection = {
            ...defaultRowSelection,
            type: this.type ?? "checkbox",
            ...this.configProps.rowSelection,
            ...(defaultRowSelection.selectedRowKeys
              ? { selectedRowKeys: defaultRowSelection.selectedRowKeys }
              : {}),
          };
        }
      } else {
        if (this.type) {
          this._finalConfigProps.rowSelection = {
            ...defaultRowSelection,
            type: this.type,
          };
        }
      }
    } else {
      this._finalConfigProps = {};
      this._finalConfigProps.pagination =
        this.pagination !== false ? defaultPagination : false;
      this._finalConfigProps.size = this.size;
      this._finalConfigProps.rowSelection = this.type && {
        ...defaultRowSelection,
        type: this.type,
      };
    }

    // 初始化列排序
    if (this._columns) {
      this._columns = this._columns.map((item) => {
        if (isNil(item.key)) {
          item.key = item.dataIndex as string;
        }
        if (item.sorter) {
          item.sortOrder = (this.sort === item.key &&
            !isNil(this.order) &&
            (this._fields.ascend === this.order
              ? "ascend"
              : "descend")) as SortOrder;
        }
        // 初始化表头过滤值
        if (item.filters) {
          const history = getHistory();
          const urlSearchParams = new URLSearchParams(history.location.search);
          const filteredValue =
            urlSearchParams.get(item.key as string) ??
            get(this.filters, item.key)?.join(",");
          if (!isNil(filteredValue) && !isEmpty(filteredValue)) {
            item.filtered = true;
            item.filteredValue = filteredValue
              .split(",")
              .map(
                (v) =>
                  find(item.filters, (f) => String(f.value) === v)?.value ?? v
              );
          } else {
            item.filtered = false;
            item.filteredValue = [];
          }
        }
        return item;
      });
    }
  };