hyperf-admin/docs/backend/list.md at main

mirror of http://124.126.16.154:8888/singularity/hyperf-admin.git synced 2026-01-15 03:35:07 +08:00

Files

daodao97 8d89932c98 feat: hyperf-admin init

2020-06-16 22:33:55 +08:00

13 KiB

Raw Permalink Blame History

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 的结构改为数组形式即可

13 KiB Raw Permalink Blame History Unescape Escape

列定义

when用法

使用说明

查看源码

列渲染

number

switch

input

icon

image

extrude

tag

link

iframe

html

supperButton

popover弹出框

progress

搜索项

tab切换

操作按钮

基础属性

普通跳转按钮

动作按钮(请求后端API)

表单型按钮

列表型按钮

抽屉型按钮

下拉按钮

13 KiB

Raw Permalink Blame History