# 行为插件
行为插件@sula/plugin-action，为Sula内部的组件和模板，提供点击元素后触发特定操作行为的能力，使用者可以直接在配置参数中基于action属性，对特定元素进行点击行为的配置
示例：
import SulaTable from '@sula/form';
<SulaTable
columns={[
{
title: 'operation',
render: {
type: 'icon',
props: {
type: 's-refresh',
},
action: {
type: 'refresh'
}
}
}
]}
/>
# API
行为插件action配置对应的类型：actionType，支持配置属性如下：
# type
- 类型：
string | (ctx, config) => HTMLElement | ReactNode - 默认值：
-
操作行为类型，可配置类型见下方插件介绍, 当没有同级属性时，type指支持直接配置在action属性上
示例：
action: {
type: 'reset',
}
//等价于
action: 'reset'
action: {
type: (ctx) => { console.log('refresh') }
}
//等价于
action: (ctx) => { console.log('refresh') }
# finish
- 类型：actionType
- 默认值：
-
action对应type的操作完成后触发的操作，配置方式同actionType，支持嵌套配置finish
示例：
action: {
type: 'reset',
finish: {
type: 'refresh',
finish: (ctx) => { console.log('refresh finish') }
}
}
tips
- finish配置与action配置唯一不同的是，不再支持confirm、tooltip的配置
# final
- 类型：
(ctx) => void - 默认值：
-
action——>finish——>finish...操作链完成后最后执行的方法，无论操作链成功和失败都会执行
示例：
action: {
type: 'fetch',
final: () => {
console.log('finally');
}
}
tips
- Sula内无论是基础组件还是上层模板，关于action操作行为的配置方式都是遵循同样的原则
- action属性需配置在渲染配置render属性中
- 配置参数均支持字符串、模板字符串、方法
- action内部配置的方法会在点击行为触发时才解析执行
- 除上述参数外，也可进行在同级进行一些额外的配置，支持模板字符串和方法，并会解析后，在type接收方法时第二个参数config中体现
# error
- 类型：actionType
- 默认值：
-
action返回Promise reject时触发，同时行为链将中断。
示例：
action: [
{
type: () => Promise.reject(),
error: () => console.log('出错了'),
final: () => console.log('无论如何都会执行')
},
() => console.log('上一步出错了，不会打印')
]
# 表格行为插件
# reset
重置表格分页、过滤条件等信息，刷新表格数据。调用表格实例方法 reset()
示例：
action: {
type: 'reset',
}
# refresh
根据表格当前的设置重新请求，刷新表格数据。调用表格实例方法 refresh()
示例：
action: {
type: 'refresh',
}
# modalform
通常结合表格操作列使用，点击配置项时弹出带有表单的弹框
示例：
action: {
type: 'modalform',
formProps: {
fields: [
{
name: 'name',
label: 'Name',
render: 'input',
}
]
},
props: {},
submit: {
url: '/api/info.json',
},
}
type同级可配置属性同ModalForm属性配置
# upload
上传文件
示例：
action: {
type: 'upload',
url: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
params: {
name: 'sula'
}
}
# download
下载文件
示例：
action: {
type: 'download',
url: '/api/download',
params: {
name: 'sula'
},
}
# fetch
下载文件
示例：
action: {
type: 'fetch',
url: 'https://jsonplaceholder.typicode.com/posts',
method: 'post',
final: () => {
console.log('finally');
}
}
# 表单弹框行为插件
ModalForm组件内部支持该配置
# close
触发关闭弹框，调用ModalForm实例方法close()
action: {
type: 'close',
}
# umi行为插件
umi项目，插件umi-plugin-sula为我们提供更多的action可配置类型，详情见umi 插件