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);
    },
  },
]