render 方法

在使用 render 方法之前需引入相应的方法。

import { dateTimeRender, enableRender } from 'utils/renderer';

enableRender

返回启用/禁用对应的多语言，并加上状态标记。

参数

[v = 0 | 1]（Number） ：状态

（string）: 1 返回 enable(多语言)，0 返回 disabled(多语言)。

示例


const columns = [
  ...
  {
    title: intl.get('hzero.common.status').d('状态'),
    dataIndex: 'enabledFlag',
    width: 80,
    render: enableRender,
  },
]

yesOrNoRender

返回是/否多语言并加上对应的状态标记。

参数

[v = 0 | 1]（Number）：值

（string）: 1 返回 yes(多语言)，0 返回 no(多语言)。

示例

const columns = [
  ...
  {
    title: intl.get('hfile.storage.model.storage.defaultFlag').d('默认'),
    dataIndex: 'defaultFlag',
    width: 100,
    render: yesOrNoRender,
  }
]

totalRender

用于显示数据总量和当前数据顺序。

参数

[total]（number）：数据总量

[range]（number[]）：当前数据的第一条数据序号, 当前数据最后一条数据序号

（string）: 返回分页总数的多语言。

示例

  pagination: {
    ...
    showSizeChanger: true,
    showTotal: totalRender,
  },

dateRender

将日期格式化成当前用户选择的日期格式

参数

[dateStr]（string）：日期字符串

（string）: 返回格式化后的日期字符串。

示例

dateRender('2018/2/2')

const columns = [
  {
    title: intl.get('hiam.subAccount.model.user.endDateActive').d('有效期至'),
    dataIndex: 'endDateActive',
    width: 100,
    render: dateRender,
  }
]

dateTimeRender

将日期时间格式化成当前用户选择的日期时间格式

参数

[dateTimeStr]（string）：日期时间字符串

（string）: 返回格式化后的日期时间字符串。

示例

dateTimeRender('2018/2/2 21:21:21')

const columns = [
  {
    title: intl.get('hiam.subAccount.model.user.endDateActive').d('有效期至'),
    dataIndex: 'endDateActive',
    width: 100,
    render: dateTimeRender,
  }
]

timerRender

将时间格式化成当前用户选择的时间格式

参数

[timeStr]（string）：时间字符串

（string）: 返回格式化后的时间字符串。

示例

timerRender('21:21:21')

const columns = [
  {
    title: intl.get('hiam.subAccount.model.user.endDateActive').d('有效期至'),
    dataIndex: 'endDateActive',
    width: 100,
    render: timerRender,
  }
]

numberRender

格式化数值

参数

[value]（number）：需要格式化的数

[precision = 0]（number）：数值精度必须为自然数(0+正整数)

[allowThousandth = true]（boolean）：是否加上千分位

[allowEndZero = true]（boolean）：是否补全末尾0

（string）: 返回格式化后的数值。

示例

const columns = [
  {
    title: `${intl.get('hpfm.taxRate.model.taxRate.taxRate').d('税率')}（%）`,
    width: 100,
    dataIndex: 'taxRate',
    render: value => numberRender(value, 2, false),
  }
]

TagRender

返回状态标记

参数

[status]（number）：当前状态值

[statusList = []]（object[]）：状态列表：[{ color: '' , status: '' }]

[text = ‘']（string）：当前状态文本值

（string）: 相应的状态标记。

示例

const columns = [
  ...
  {
    title: intl.get(`${modelPrompt}.refreshStatus`).d('刷新状态'),
    dataIndex: 'refreshStatus',
    width: 100,
    render: val => {
      const statusList = [
        { status: 1, color: 'green', text: '刷新成功' },
        { status: 0, color: 'red', text: '刷新失败' },
        { status: 'default', text: '未刷新' },
      ];
      return TagRender(val, statusList);
    },
  },
  {
    title: intl.get('hsdr.concRequest.model.concRequest.jobStatus').d('状态'),
    dataIndex: 'jobStatusMeaning',
    width: 100,
    fixed: 'right',
    render: (text, record) => {
      const statusList = [
        { status: 'NORMAL', color: 'green' },
        { status: 'PAUSED', color: 'gold' },
        { status: 'BLOCKED', color: 'volcano' },
        { status: 'ERROR', color: 'red' },
        { status: 'COMPLETE', color: '' },
        { status: 'NONE', color: '' },
      ];
      return TagRender(record.jobStatus, statusList, text);
    },
  },
]

operatorRender

渲染表格操作列

参数

[actions]（OperatorAction[]）：操作列行为数组

[record]（any）：行数据

[options={ limit:3, cloneAction: defaultCloneAction }]（Object）：配置（limit为操作列不显示下拉框的按钮数量）

（ReactNode）: 处理后的操作列

示例

const columns = [
  ...

  {
        title: intl.get('hzero.common.button.action').d('操作'),
        width: 120,
        fixed: 'right',
        dataIndex: 'edit',
        render: (_, record) => {
          const operators = [
            {
              key: 'edit',
              ele: (
                <a
                  onClick={() => {
                    this.handleUpdatePrompt(record);
                  }}
                >
                  {intl.get('hzero.common.button.edit').d('编辑')}
                </a>
              ),
              len: 2,
              title: intl.get('hzero.common.button.edit').d('编辑'),
            },
          ];
          if (isSiteFlag) {
            operators.push({
              key: 'delete',
              ele: (
                <Popconfirm
                  title={intl.get('hzero.common.message.confirm.delete').d('是否删除此条记录？')}
                  onConfirm={() => {
                    this.handleDeletePrompt(record);
                  }}
                >
                  <a>{intl.get('hzero.common.button.delete').d('删除')}</a>
                </Popconfirm>
              ),
              len: 2,
              title: intl.get('hzero.common.button.delete').d('删除'),
            });
          } else if (tenantId === record.tenantId) {
            operators.push({
              key: 'delete',
              ele: (
                <Popconfirm
                  title={intl.get('hzero.common.message.confirm.delete').d('是否删除此条记录？')}
                  onConfirm={() => {
                    this.handleDeletePrompt(record);
                  }}
                >
                  <a>{intl.get('hzero.common.button.delete').d('删除')}</a>
                </Popconfirm>
              ),
              len: 2,
              title: intl.get('hzero.common.button.delete').d('删除'),
            });
          }
          return operatorRender(operators, record);
        },
      },
]