mirror of
http://124.126.16.154:8888/singularity/hyperf-admin.git
synced 2026-01-15 07:15:06 +08:00
132 lines
3.2 KiB
Markdown
132 lines
3.2 KiB
Markdown
支持 列操作按钮, 批量操作按钮, 列表页顶部按钮
|
|
|
|
### 基础属性
|
|
|
|
```php
|
|
[
|
|
"text" => "", //按钮文案
|
|
"type" => "jump", // 按钮类型 默认 jump, 可选 form, api
|
|
"target" => "", // 动作目标 本地路由, 网址, 后端api
|
|
"props" => [ // 按钮属性, 更多可见 https://element.eleme.io/#/zh-CN/component/button
|
|
"icon" => "", // 按钮图标 默认无
|
|
"circle" => false, // 圆角 默认false
|
|
"size" => "small", // 默认 small, 可选 medium / small / mini
|
|
"type" => "info", //默认text, primary / success / warning / danger / info / text
|
|
],
|
|
"when" => [ // 当前按钮的显示条件, 默认无
|
|
["field_1", "=", 1] // filter过滤的比对数据为当前行 或者 当前页面基础数据
|
|
]
|
|
]
|
|
|
|
// 除以上基础属性外, 根据按钮类型, 也会有其他额外属性, 具体见下面
|
|
```
|
|
|
|
#### 普通跳转按钮
|
|
|
|
```javascript
|
|
[
|
|
"text" => "编辑",
|
|
"target" => "/user/12"
|
|
]
|
|
// or
|
|
[
|
|
"text" => "文档",
|
|
"target" => "http://hyperf.wiki"
|
|
]
|
|
```
|
|
|
|
#### 动作按钮(请求后端API)
|
|
|
|
点击按钮后, 提示二次确认, 确认后请求后端api
|
|
|
|
```javascript
|
|
[
|
|
"text" => "删除",
|
|
"target" => "/user/12",
|
|
"method" => "POST", // 请求api的方式, 默认POST
|
|
]
|
|
```
|
|
|
|
#### 表单型按钮
|
|
|
|
点击按钮后将以弹窗形式渲染指定表单, 然后搜集后端数据请求到指定api
|
|
|
|
```javascript
|
|
[
|
|
"text" => "审核通过",
|
|
"target" => "/user/12",
|
|
"method" => "POST", // 请求api的方式, 默认POST
|
|
"rules" => [ // 表单的rule规则具体参见表单部分
|
|
"reason|原因" => [
|
|
"rule" => "required"
|
|
]
|
|
]
|
|
]
|
|
|
|
// 有联动时
|
|
|
|
[
|
|
"text" => "审核通过",
|
|
"target" => "/user/12",
|
|
"method" => "POST", // 请求api的方式, 默认POST
|
|
"rules" => [
|
|
// 待补充
|
|
]
|
|
]
|
|
|
|
// or
|
|
|
|
[
|
|
"text" => "审核通过",
|
|
"target" => "/user/form", // get 方式拉取表单配置, post 方式保存数据
|
|
"method" => "POST", // 请求api的方式, 默认POST
|
|
]
|
|
```
|
|
|
|
#### 列表型按钮
|
|
|
|
点击按钮后将以弹窗的形式渲染指定列表
|
|
|
|
```php
|
|
[
|
|
'type' => 'table', // 调用 src/components/Scaffold/tablist.vue 渲染
|
|
'target' => '', // target 留空
|
|
'props' => [
|
|
'listApi' => '/merchantlog/list?merchant_id={id}', // 列表数据拉取接口
|
|
'infoApi' => '/merchantlog/info', // 列表 配置拉取接口
|
|
'options' => [ // 表单的配置项
|
|
'showFilter' => false,
|
|
'createAble' => false
|
|
]
|
|
],
|
|
'text' => '招商记录',
|
|
]
|
|
```
|
|
|
|
抽屉型按钮
|
|
|
|
点击按钮后将打开抽屉, 抽屉内部指定动态调用指定组件
|
|
|
|
```php
|
|
[
|
|
'type' => 'drawer',
|
|
'target' => '', // target 留空
|
|
'text' => '查看日志',
|
|
'props' => [
|
|
'component' => 'SocketList', // 需动态调用的组件 src/components/Common 下
|
|
'componentProps' => [ // 组件的 props
|
|
'url' => env('OMS_WEBSOCKET_URL') . '/cronlog?name={name}'
|
|
],
|
|
// drawer** 为抽屉属性的定义
|
|
// 详见 https://element.eleme.io/#/zh-CN/component/drawer
|
|
'drawerWithHeader' => false,
|
|
'drawerSize' => '80%',
|
|
'drawerTitle' => '{title}日志',
|
|
'drawerDirection' => 'ttb'
|
|
]
|
|
]
|
|
```
|
|
|
|
### SuperButtonGroup 下拉按钮
|
|
|
|
上面 SuperButton 的结构改为数组形式即可 |