amis2/docs/zh-CN/components/status.md

title	description	type	group	menuName	icon	order
Status 状态		0	⚙ 组件	Status		65

基本用法

它最适合的用法是放在列表类组件（CRUD，Table，List 等）的列中，用来表示状态。

{
    "type": "status",
    "value": 1
}

默认状态列表

下表是默认支持的几种状态：

{
    "type": "table",
    "data": {
        "items": [
            {
                "label": "-",
                "value": "0",
                "icon": "fail",
                "status": 0
            },
            {
                "label": "-",
                "value": "1",
                "icon": "success",
                "status": 1
            },
            {
                "label": "成功",
                "value": "success",
                "icon": "success",
                "status": "success"
            },
            {
                "label": "运行中",
                "value": "pending",
                "icon": "rolling",
                "status": "pending"
            },
            {
                "label": "排队中",
                "value": "queue",
                "icon": "warning",
                "status": "queue"
            },
            {
                "label": "调度中",
                "value": "schedule",
                "icon": "schedule",
                "status": "schedule"
            },
            {
                "label": "失败",
                "value": "fail",
                "icon": "fail",
                "status": "fail"
            }
        ]
    },
    "columns": [
        {
            "name": "value",
            "label": "默认value值"
        },
        {
            "name": "label",
            "label": "默认label"
        },
        {
          "name": "icon",
          "label": "默认icon值"
        },
        {
            "name": "status",
            "label": "状态",
            "type": "mapping",
            "map": {
                "*": {
                    "type": "status"
                }
            }
        }
    ]
}

自定义状态图标、文本、颜色

2.7.3 及 以上版本

如果默认提供的状态无法满足业务需求，可使用source自定义状态, 如下：

{
  "type": "status",
  "source": {
    "normal": {
      "label": "正常",
      "icon": "fa fa-times-circle",
      "color": "#000"
    },
    "unusual": {
      "label": "异常",
      "icon": "fa fa-times-circle",
      "color": "#f00"
    }
  },
  "value": "normal"
}

source配置类似于mapping映射，不同的key值匹配渲染不同状态，支持以下属性：

属性名	类型	说明
label	string	显示文本
icon	string	图标, 例如fa fa-plus
color	string	状态颜色
className	string	状态的 独立 CSS 类名

注意：自定义状态会和默认状态合并。

{
  "type": "page",
  "body": [
    {
      "type": "status",
      "source": {
        "0": {
          "label": "正常",
          "icon": "fa fa-times-circle",
          "color": "#000"
        },
        "1": {
          "label": "异常",
          "icon": "fa fa-times-circle",
          "color": "#f00"
        }
      },
      "value": 0
    }
  ]
}

source 属性也支持数据映射，通过变量获取上下文中的变量

{
  "type": "page",
  "data": {
    "mysource": {
      "0": {
        "label": "正常",
        "icon": "fa fa-times-circle",
        "color": "#000"
      },
      "1": {
        "label": "异常",
        "icon": "fa fa-times-circle",
        "color": "#f00"
      }
    }
  },
  "body": [
    {
      "type": "status",
      "source": "${mysource}",
      "className": "mr-4",
      "value": 0
    },
    {
      "type": "status",
      "source": "${mysource}",
      "value": 1
    }
  ]
}

自定义状态图标和文本

推荐使用新属性source配置

如果默认提供的状态无法满足业务需求，可以使用map 和 labelMap属性分别配置状态组件的图标和展示文案。用户自定义的map 和 labelMap会和默认属性进行 merge，如果只需要修改某一项配置时，无需全量覆盖。

{
  "type": "page",
  "body": [
    {
      "type": "status",
      "map": {
        "0": "fa fa-check-circle",
        "1": "fa fa-times-circle"
      },
      "labelMap": {
        "0": "正常",
        "1": "异常"
      },
      "value": 0,
      "className": "mr-3"
    },
    {
      "type": "status",
      "map": {
        "0": "fas fa-check-circle",
        "1": "fas fa-times-circle"
      },
      "labelMap": {
        "0": "正常",
        "1": "异常"
      },
      "value": 1
    }
  ]
}

动态数据

推荐使用新属性source配置

2.3.0 及以上版本

map 和 labelMap支持配置变量，通过数据映射获取上下文中的变量。

{
  "type": "page",
  "data": {
    "statusLabel": {
      "success": "任务成功",
      "warning": "已停机"
    },
    "statusIcon":  {
      "waiting": "far fa-clock",
      "warning": "fas fa-exclamation"
    }
  },
  "body": {
    "type": "table",
    "data": {
      "items": [
        {
          "id": "1",
          "name": "Task1",
          "status": "success"
        },
        {
          "id": "2",
          "name": "Task2",
          "status": "processing",
        },
        {
          "id": "3",
          "name": "Task3",
          "status": "waiting",
        },
        {
          "id": "4",
          "name": "Task4",
          "status": "warning",
        },
        {
          "id": "5",
          "name": "Task5",
          "status": "fail",
        }
      ]
    },
    "columns": [
      {
        "name": "id",
        "label": "ID"
      },
      {
        "name": "name",
        "label": "Name"
      },
      {
        "name": "status",
        "label": "状态",
        "type": "mapping",
        "map": {
          "*": {
            "type": "status",
            "map": {
              "processing": "rolling",
              "waiting": "${statusIcon.waiting}",
              "warning": "${statusIcon.warning}"
            },
            "labelMap": {
              "success": "${statusLabel.success}",
              "processing": "处理中",
              "waiting": "等待中",
              "warning": "${statusLabel.warning}"
            }
          }
        }
      }
    ]
  }
}

属性表

属性名	类型	默认值	版本	说明
type	string			"status" 指定为 Status 渲染器
className	string			外层 Dom 的 CSS 类名
placeholder	string	-		占位文本
map	object		2.3.0	映射图标
labelMap	object		2.3.0	映射文本
source	object		2.7.3	自定义映射状态，支持数据映射
source.label	string		2.7.3	映射文本
source.icon	string		2.7.3	映射图标
source.color	string		2.7.3	映射状态颜色
source.className	string		2.7.3	映射状态的 独立 CSS 类名