mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-15 09:21:13 +08:00
337 lines
8.0 KiB
Markdown
Executable File
337 lines
8.0 KiB
Markdown
Executable File
---
|
||
title: Status 状态
|
||
description:
|
||
type: 0
|
||
group: ⚙ 组件
|
||
menuName: Status
|
||
icon:
|
||
order: 65
|
||
---
|
||
|
||
## 基本用法
|
||
|
||
它最适合的用法是放在列表类组件（CRUD，Table，List 等）的列中，用来表示状态。
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "status",
|
||
"value": 1
|
||
}
|
||
```
|
||
|
||
## 默认状态列表
|
||
|
||
下表是默认支持的几种状态：
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"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.8.0 及 以上版本
|
||
|
||
如果默认提供的状态无法满足业务需求，可使用`source`自定义状态, 如下：
|
||
|
||
```json
|
||
{
|
||
"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 类名 |
|
||
|
||
注意：自定义状态会和默认状态合并。
|
||
|
||
```schema
|
||
{
|
||
"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` 属性也支持[数据映射](../../docs/concepts/data-mapping)，通过变量获取上下文中的变量
|
||
|
||
```schema
|
||
{
|
||
"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，如果只需要修改某一项配置时，无需全量覆盖。
|
||
|
||
```schema
|
||
{
|
||
"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`支持配置变量，通过数据映射获取上下文中的变量。
|
||
|
||
```schema
|
||
{
|
||
"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.8.0 | 自定义映射状态，支持[数据映射](../../docs/concepts/data-mapping) |
|
||
| source.label | `string` | | 2.8.0 | 映射文本 |
|
||
| source.icon | `string` | | 2.8.0 | 映射图标 |
|
||
| source.color | `string` | | 2.8.0 | 映射状态颜色 |
|
||
| source.className | `string` | | 2.8.0 | 映射状态的 独立 CSS 类名 |
|