单元操作

简介

单元操作行为组件用于在表格的单元格中添加可交互的操作按钮，支持弹窗、抽屉、确认框、下载、链接等多种操作方式。与右侧操作列不同，单元操作可以放在表格的任意列位置。

用法示例

弹窗操作（addColumnDialog）

use plugin\xbCode\builder\Builder;

// 创建表格
Builder::crud(function($builder) {
  // 添加弹窗操作列
  $builder->addColumnDialog('detail', '详情', '/api/detail');
});

自定义弹窗配置

Builder::crud(function($builder) {
  // 使用回调函数配置弹窗
  $builder->addColumnDialog('edit', '编辑', 'GET:/api/edit', function($component) {
    $component->size('lg');
    $component->title('编辑信息');
    $component->width(150);
    $component->className('text-primary');
  });
  
  // 使用数组配置
  $builder->addColumnDialog('view', '查看', '/api/view', [
    'width' => 100,
    'fixed' => 'left'
  ]);
});

抽屉操作（addColumnDrawer）

Builder::crud(function($builder) {
  // 添加抽屉操作列
  $builder->addColumnDrawer('info', '信息', '/api/info', function($component) {
    $component->title('详细信息');
    $component->size('md');
    $component->width(120);
  });
});

确认框操作（addColumnConfirm）

Builder::crud(function($builder) {
  // 添加确认框操作列
  $builder->addColumnConfirm('delete', '删除', '/api/delete', '确认删除该数据吗？', '删除提示');
  
  // 自定义样式
  $builder->addColumnConfirm('remove', '移除', '/api/remove', '确认移除吗？', '温馨提示', [
    'width' => 100
  ]);
});

下载操作（addColumnDownload）

Builder::crud(function($builder) {
  // 添加下载操作列
  $builder->addColumnDownload('file', '下载', '/api/download');
  
  // 自定义配置
  $builder->addColumnDownload('export', '导出', '/api/export', [
    'width' => 100,
    'align' => 'center'
  ]);
});

链接操作（addColumnLink）

Builder::crud(function($builder) {
  // 添加链接操作列
  $builder->addColumnLink('link', '访问', '/detail?id=${id}');
  
  // 动态链接（使用字段值）
  $builder->addColumnLink('url', '链接', '', function($component) {
    // 空URL时自动使用字段值作为链接
    $component->width(150);
  });
});

URL操作（addColumnUrl）

Builder::crud(function($builder) {
  // 添加URL操作列（新窗口打开）
  $builder->addColumnUrl('preview', '预览', '/preview?id=${id}');
  
  // 使用字段值作为URL
  $builder->addColumnUrl('website', '网站', '', [
    'width' => 120
  ]);
});

可用方法

addColumnDialog 参数

addColumnDrawer 参数

addColumnConfirm 参数

addColumnDownload 参数

addColumnLink 参数

addColumnUrl 参数

组件通用属性

弹窗/抽屉特有属性

URL参数绑定

所有操作的URL都支持动态参数绑定：

// 绑定ID字段
'/api/detail?id=${id}'

// 绑定多个字段
'/api/edit?id=${id}&type=${type}'

// 路径参数
'/detail/${id}'

完整示例

use plugin\xbCode\builder\Builder;

Builder::crud(function($builder) {
  // 设置API接口
  $builder->setUrl('/api/articles');
  
  // ID列
  $builder->addColumn('id', 'ID')->width(80);
  
  // 标题列
  $builder->addColumn('title', '标题');
  
  // 查看详情（弹窗）
  $builder->addColumnDialog('detail_btn', '查看', 'GET:/api/article/detail', function($component) {
    $component->size('lg');
    $component->title('文章详情');
    $component->width(100);
    $component->icon('fa fa-eye');
  });
  
  // 编辑（抽屉）
  $builder->addColumnDrawer('edit_btn', '编辑', 'GET:/api/article/edit', function($component) {
    $component->size('md');
    $component->title('编辑文章');
    $component->width(100);
    $component->className('text-primary');
  });
  
  // 预览链接
  $builder->addColumnLink('preview', '预览', '/article/view?id=${id}', [
    'width' => 100
  ]);
  
  // 下载附件
  $builder->addColumnDownload('attachment', '附件', '/api/download/attachment', [
    'width' => 100
  ]);
  
  // 删除（确认框）
  $builder->addColumnConfirm('del_btn', '删除', 'POST:/api/article/delete', 
    '确认删除该文章吗？删除后无法恢复！', '删除确认', [
      'width' => 100
    ]
  );
  
  // 创建时间
  $builder->addColumnDateTime('create_time', '创建时间')->width(160);
});

使用场景

弹窗操作

• 查看详情
• 编辑数据
• 快速操作表单

抽屉操作

• 详细信息展示
• 侧边表单编辑
• 多步骤操作

确认框操作

• 删除数据
• 状态变更
• 危险操作确认

下载操作

• 文件下载
• 报表导出
• 附件下载

链接/URL操作

• 跳转详情页
• 外部链接访问
• 预览功能

注意事项

1. 所有单元操作默认为链接样式（level: 'link'）
2. 默认居中对齐显示（align: 'center', vAlign: 'middle'）
3. URL支持 METHOD:URL 格式指定请求方法（如 GET:/api/detail）
4. URL参数绑定使用 ${字段名} 语法
5. 弹窗和抽屉需要指定接口返回表单或内容Schema
6. 确认框操作会在确认后发送请求
7. 下载操作会自动处理文件下载
8. 空URL时，Link和Url组件会使用字段值作为地址
9. 删除类按钮自动添加红色样式（text-danger）
10. 可以在同一个表格中使用多个不同类型的单元操作

与右侧操作按钮的区别

建议根据实际需求选择使用：

• 单个重要操作：使用单元操作
• 多个操作：使用右侧操作按钮
• 特定字段相关操作：使用单元操作