781d751722
1. Add Chinese development documents 2. Add Chinese test document Change-Id: I29cd91f47069c9e64928800094282d4cbc977920
142 lines
3.8 KiB
Markdown
142 lines
3.8 KiB
Markdown
简体中文 | [English](/docs/en/develop/3-11-Action-introduction.md)
|
||
|
||
# 用途
|
||
|
||
- 配置资源对应的所有操作
|
||
|
||
|
||
|
||
- 按照相应的配置编写后，会在资源列表页相应的位置展示相应的操作按钮
|
||
|
||
# 代码位置
|
||
|
||
- `pages/xxxx/containers/XXXX/actions/index.jsx`
|
||
|
||
# 如何使用
|
||
|
||
- 返回一个对象，其内配置主操作按钮、批量操作按钮、行操作按钮
|
||
- 以网络`src/pages/network/containers/Network/actions/index.jsx`为例
|
||
- 配置了主按钮为创建
|
||
- 配置了批量操作为删除
|
||
- 配置了行操作为编辑、创建子网、删除
|
||
|
||
```javascript
|
||
import CreateNetwork from './CreateNetwork';
|
||
import CreateSubnet from './CreateSubnet';
|
||
import DeleteAction from './Delete';
|
||
import Edit from './Edit';
|
||
|
||
const actionConfigs = {
|
||
rowActions: {
|
||
firstAction: Edit,
|
||
moreActions: [
|
||
{
|
||
action: CreateSubnet,
|
||
},
|
||
{
|
||
action: DeleteAction,
|
||
},
|
||
],
|
||
},
|
||
batchActions: [DeleteAction],
|
||
primaryActions: [CreateNetwork],
|
||
};
|
||
|
||
export default actionConfigs;
|
||
```
|
||
|
||
- 在资源对应的列表代码中配置`actionConfigs`即可
|
||
- 以网络`src/pages/network/containers/Network/ProjectNetwork.jsx`为例
|
||
|
||
```javascript
|
||
import actionConfigs from './actions';
|
||
get actionConfigs() {
|
||
return actionConfigs;
|
||
}
|
||
```
|
||
|
||
## 主操作按钮配置`primaryActions`
|
||
|
||
- 返回组件的列表
|
||
- 如果没有主按钮，可以设置为`null`或`[]`
|
||
- 如果不可操作（比如权限不够），将自动隐藏
|
||
|
||
## 批量操作按钮配置`batchActions`
|
||
|
||
- 返回组件的列表
|
||
- 如果没有主按钮，可以设置为`null`或`[]`
|
||
- 如果不可操作（比如权限不够），将自动隐藏
|
||
|
||
## 行操作按钮配置`rowActions`
|
||
|
||
- 返回一个对象，内含`firstAction`, `moreActions`对应的组件
|
||
- 批量操作按钮如果被禁用（比如）
|
||
- 可以返回一个空对象`{}`
|
||
- `firstAction`，行操作对应的第一个按钮
|
||
- 如果不可操作，按钮灰掉
|
||
- 可以是一个组件
|
||
- 可以是`null`
|
||
- 以系统信息-网络`src/pages/configuration/containers/SystemInfo/NeutronAgent/actions/index.jsx`为例
|
||
|
||
```javascript
|
||
import Enable from './Enable';
|
||
import Disable from './Disable';
|
||
|
||
const actionConfigs = {
|
||
rowActions: {
|
||
firstAction: null,
|
||
moreActions: [
|
||
{
|
||
action: Enable,
|
||
},
|
||
{
|
||
action: Disable,
|
||
},
|
||
],
|
||
},
|
||
batchActions: [],
|
||
primaryActions: [],
|
||
};
|
||
|
||
export default actionConfigs;
|
||
```
|
||
|
||
- `moreActions`，`更多`按钮下对应的操作组件
|
||
- 操作的数组
|
||
- 其内的操作如果不可用，将直接隐藏该操作按钮
|
||
- 支持两种格式的配置，对应了不同的展示方案
|
||
- 每个元素是个含有`action`属性的对象
|
||
|
||
|
||
|
||
- 每个元数是个含有`title`、`actions`属性的对象
|
||
|
||
|
||
|
||
- 以云主机`src/pages/compute/containers/Instance/actions/index.jsx`为例
|
||
|
||
```javascript
|
||
const statusActions = [
|
||
StartAction,
|
||
StopAction,
|
||
LockAction,
|
||
UnlockAction,
|
||
RebootAction,
|
||
SoftRebootAction,
|
||
SuspendAction,
|
||
ResumeAction,
|
||
PauseAction,
|
||
UnpauseAction,
|
||
Shelve,
|
||
Unshelve,
|
||
];
|
||
const actionConfigs = {
|
||
rowActions: {
|
||
firstAction: Console,
|
||
moreActions: [
|
||
{
|
||
title: t('Instance Status'),
|
||
actions: statusActions,
|
||
},...}}
|
||
```
|