amis/docs/zh-CN/components/status.md
2023-02-27 21:39:28 +08:00

337 lines
8.0 KiB
Markdown
Executable File
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
title: Status 状态
description:
type: 0
group: ⚙ 组件
menuName: Status
icon:
order: 65
---
## 基本用法
它最适合的用法是放在列表类组件CRUDTableList 等)的列中,用来表示状态。
```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 类名 |