hyperf-admin/docs/backend/list.md

return [
    ......
    // 列表定义
    'table' => [
        // 树型结构列表，默认false
        "is_tree" => true
        // tree 节点为非必须, 默认pid的名称为pid, 不同时需要重写
        "tree" => [
          "pid" => "pid"
        ],
        // tabs 列表页分页签
        'tabs' => [],
        // 定义渲染列表, 未定义则获取 form 中所有
        'columns' => [],
        // 订单行操作按钮
        'rowActions' => [],
        // 列表上方批量操作的按钮
        'batchButtons' => [],
        // 页面上方操作按钮
        'topActions' => [],
    ],
];

列定义

在columns中定义列表中显示的字段与表头，具体配置如下：

'columns' => [ // 非必须项, 无则从form转义
    '字段', // 简写模式, 直接从form配置转义
    // or
    [
        'field' => 'mall_name',
        'title' => '店铺',
        // 是否显示该字段，默认false
        'hidden' => true,
        // 字段渲染规则，默认为空, 详见列渲染
        'type' => '',
        // 是否虚拟字段，虚拟字段在查询脚手架model时，会忽略该字段
        'virtual_field' => true,
        // 设置Popover提示信息，其中
        'popover' => [
            'messages' => [
                '原因：{remark}',
            ],
            'when' => [
                ['status', '=', Activity::STATUS_OFF]
            ]
        ],
        // 表头说明
        'info' => '括号内为商家承担',
        // 定义该字段显示在哪些tab选项中
        'depend' => [
            'tab' => [(string)Coupon::TYPE_MALL_MONEY_OFF],
        ],
        // 按字段升降查询功能
        'sortable' => true,
        // 是否允许编辑，调用*/rowchange/:id接口
        'edit' => true,
        // 允许编辑的条件
        'when' => [
            ['status', '=', Activity::STATUS_OFF]
        ],
        // 枚举值，可以options中的数据转换成Tag显示效果，https://element.eleme.cn/#/zh-CN/component/tag
        'options' => [],
        'enum' => [ // tag 的 type 类型, 参见 element 标签
            0 => 'info',
            1 => 'success',
        ],
        // 列宽设置，默认为均分模式，不支持百分比
        'width': '100px',
    ],
],

when用法

使用说明

'when' => ["field_1", ">", 1],
// or 多个条件时为"与"判断
'when' => [
    ["field_1", ">", 1],
    ["field_2", "=", 1]
]

::: warning 注意 操作符支持=、>、>=、<、<=、!=、in、not_in，多个条件时为"与"判断，且注意参数的数据类型是否一致。 :::

• 可以控制行操作及批量按钮是否显示；
• 可以控制批量操作的过滤掉不满足条件的行；

'batchButtons' => [
    [
        .....
        // 控制根据条件显示，这里的条件字段来源为queryString
        'when'=> [
            [字段, 操作符, 值]
        ],
        // 为区别控制显示的when关键字，这里使用`selectFilter`
        'selectFilter' => [
            [字段, 操作符, 值]
        ]
    ]
]   

• 控制列表行的某一列的编辑状态
• 控制列渲染的popover模式下的启用状态

查看源码

export function whereFilter(obj, where, fakeKey) {
  if (!where) {
    return true
  }
  let ret = true
  let real_where = where
  if (where[0] && typeof where[0] === 'string') {
    real_where = [where]
  }
  for (let i = 0; i < real_where.length; i++) {
    const item = real_where[i]
    const key = fakeKey ? item[0].replace('.', '-') : item[0]
    if (item[1] === '=') {
      ret = obj[key] === item[2]
    }
    if (item[1] === '>') {
      ret = obj[key] > item[2]
    }
    if (item[1] === '<') {
      ret = obj[key] < item[2]
    }
    if (item[1] === '>=') {
      ret = obj[key] >= item[2]
    }
    if (item[1] === '<=') {
      ret = obj[key] <= item[2]
    }
    if (item[1] === '!=') {
      ret = obj[key] !== item[2]
    }
    if (item[1] === 'in') {
      ret = item[2].indexOf(obj[key]) !== -1
    }
    if (item[1] === 'not_in') {
      ret = item[2].indexOf(obj[key]) === -1
    }
    if (!ret) {
      return false
    }
  }
  return ret
}

列渲染

渲染类型:

• number、switch、input
• icon、image、extrude、tag、link、iframe、html

number

渲染条件： 'edit' => true 且 满足when中定义的条件

用法：

'type' => 'number',
'edit' => true`,
'when' => [
    ['status', '=', Activity::STATUS_OFF]
],

switch

渲染条件： 'edit' => true 且 满足when中定义的条件

用法：

'type' => 'switch',
'edit' => true`,
'when' => [
    ['status', '=', Activity::STATUS_OFF]
],

input

渲染条件： 'edit' => true 且 满足when中定义的条件 用法：

'edit' => true`,
'when' => [
    ['status', '=', Activity::STATUS_OFF]
],

::: warning 注意 目前行编辑的表单组件只支持以上三种类型，且不能定义该组件的props :::

icon

渲染条件： 'type' => 'icon'

效果展示：

image

渲染条件： 'type' => 'image'，数据为数组时可以渲染多张图片

效果展示：

extrude

用法：

[
    "field" => "field_1",
    "type" => 'extrude',
    "render" => function($field_value, $row) {
      //  return "<优惠券|balck|yellow>*****"; 单个
      // or 支持多个
      return [
        "<优惠券{replace_field}|balck|yellow>*****{replace_field}"
      ]; // 格式 <文字|背景色|文字色>, 支持前端变量替换
    }
]

效果展示：

tag

用法：

[
    "field" => "field_1",
    "options" => [
        0 => '禁用',
        1 => '启用',
    ],
    "enum" => [ // tag 样式, 参见 https://element.eleme.io/#/zh-CN/component/tag
      0 => 'info',
      1 => 'success'
    ]
]

效果展示：

link

用法：

[
    "field" => "field_1",
    "href" => "http://hyperfadmin.com/page/{id}"
]
// or
[
    "field" => "field_1",
    "href" => [
      "href" => "http://hyperfadmin.com/page/{id}",
      "type" => "primary",
      "target" => "_blank"
    ]
]

效果展示：

iframe

用法：

[
    'field' => 'state_info',
    'title' => '运行状态',
    'type' => 'iframe',
    // 列以button形式显示，style控制按钮type, [info|success|primary|danger|warning]
    'style' => 'primary', 
    // 弹出窗口宽度,默认500px
    'width' => '500px',
    // 弹出窗口高度,默认600px
    'height' => '600px'
    "render" => function($field_value, $row) {
      return "url";// 返回 iframe的src路径
    }
]

html

用法：

[
    'field' => 'state_info',
    'title' => '运行状态',
    'type' => 'html',
    "render" => function($field_value, $row) {
      return '<p>xxxxxxx<br>xxxxx</p>'; // 
    }
]

supperButton

用法：

[
    'field' => 'field',
    'type' => 'supperButton',
    // supperButton的配置信息 必须有
    // 配置文档详见supperButton部分
    'config' => {

    }
]

popover弹出框

支持以上除编辑模式下的列渲染类型

用法：

[
    'field' => 'state_info',
    'title' => '运行状态',
    'popover' => [
        'messages' => [
            '上线时间: {state.start_time}',
            '最后活跃时间: {state.last_time}',
            '运行次数: {state.counter}',
        ],
        'when' => ["field_1", ">", 1],
        // or
        'when' => [
            ["field_1", ">", 1],
            ["field_2", "=", 1]
        ]
    ]
]

效果展示：

progress

用法：

[
    'field' => 'sync_progress',
    'title' => '同步进度',
    'type' => 'progress',
    // 'props' => []
]

props里是progress组件的属性配置，请参考Progress 进度条

效果展示：

搜索项

[
    ......
    // 搜索条件, 前端页面会根据此处配置渲染搜索条件，可以像表单一样配置规则
    // 搜索条件中支持模糊搜索也很简单 %field_name%, field_name%, %field_name, 如此定义字段即可
    'filter' => [
        'id', 
        'username%', 
        'create_at|创建时间' => [
            'type' => 'date_range',
            'search_type' => 'between',
            'default' => [date('Y-m-d', time() - DAY * 7), date('Y-m-d', time() + DAY)]
        ]
    ],
]

tab切换

'tabs' => [
    [
        'label' => '平台券',
        'value' => (string) Coupon::TYPE_PLATFORM_MONEY_OFF,
        'icon' => 'el-icon-s-grid',
    ],
    [
        'label' => '店铺券',
        'value' => (string) Coupon::TYPE_MALL_MONEY_OFF,
        'icon' => 'el-icon-s-grid',
    ],
],
'columns' => [ 
    [
        'field' => 'state_info',
        'title' => '运行状态',
        // 定义该字段显示在哪些tab选项中
        'depend' => [
            'tab' => [(string)Coupon::TYPE_MALL_MONEY_OFF],
        ],
    ]
]

效果展示：

操作按钮

支持 列操作按钮, 批量操作按钮, 列表页顶部按钮，前端组件为SuperButton

基础属性

[
    "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过滤的比对数据为当前行 或者 当前页面基础数据
    ]
]

// 除以上基础属性外, 根据按钮类型, 也会有其他额外属性, 具体见下面

普通跳转按钮

[
    "text" => "编辑",
    "target" => "/user/12"
]
// or
[
    "text" => "文档",
    "target" => "http://hyperf.wiki"
]

动作按钮(请求后端API)

点击按钮后, 提示二次确认, 确认后请求后端api

[
    "text" => "删除",
    "target" => "/user/12",
    "method" => "POST", // 请求api的方式, 默认POST
]

表单型按钮

点击按钮后将以弹窗形式渲染指定表单, 然后搜集后端数据请求到指定api

[
    "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
]

列表型按钮

点击按钮后将以弹窗的形式渲染指定列表

[
  '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' => '招商记录',
]

抽屉型按钮

点击按钮后将打开抽屉, 抽屉内部指定动态调用指定组件

[
  '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'
  ]
]

下拉按钮

上面 SuperButton 的结构改为数组形式即可