atk4/mastercrud

ATK UI 的多级 CRUD 系统组件

2.3.1 2020-10-14 21:24 UTC

This package is auto-updated.

Last update: 2024-09-16 11:53:36 UTC


README

ATK UI 是一个用于构建 UI 界面的 UI 库,它内置了一个 CRUD 组件。它可以用来创建复杂的后台系统,但它要求你自己填充多个页面并将它们相互链接。

mastercrud

MasterCrud 是 ATK UI 和 ATK Data 的一个插件,它将通过尊重关系和条件来协调多个 CRUD 页面之间的导航。您可以使用 MasterCrud

  • 管理客户列表以及他们的个人发票和付款。
  • 管理用户组及其成员
  • 管理多级目录及其中的产品

MasterCrud 的语法非常简单且简洁。它自动处理许多细节,如

  • 记录和跟踪您点击的各个记录的 id(面包屑导航)
  • 显示具有模型细节和可选关系的多标签页
  • 支持 hasOnehasMany 关系
  • 允许灵活地链接到更高的树级别(用户 - 发票 - 分配的付款 -> 付款(丢弃 invoice_id))

MasterCrud 还可以扩展以包含您自己的视图,您可以与菜单交互,甚至可以将 MasterCrud 放置在更复杂的布局中。

示例用例(请参阅 demos/clients.php 获取完整演示)

假设您有客户、发票和付款,并且您还想要为每个发票添加“行”,您可能希望为管理员添加此界面,用户可以通过钻取来导航数据

step1

点击 Client 2 会将您带到不同的页面。额外的“发票”和“付款”标签提供了进一步的方式

step2

点击特定的发票,您可以编辑它的行

step3

然而,在这个屏幕上,我们关闭了行的删除(因为这是一个演示)。但是点击编辑会弹出一个模态窗口,您可以在其中轻松更新记录数据

step4

所有这些 UI 都可以用几行代码创建!

MasterCrud 的工作方式就像常规 CRUD 一样,您可以轻松地替换它

$crud = \Atk4\MasterCrud\MasterCrud::addTo($app);
$crud->setModel('Client');

您会注意到现在您可以点击客户名称来获取关于此客户的全部详细信息。接下来,我们希望能够查看和管理客户发票

$crud = \Atk4\MasterCrud\MasterCrud::addTo($app);
$crud->setModel('Client', ['Invoices' => []]);

这将在“客户详细信息”屏幕中添加第二个标签页,列出该客户的发票。如果您的发票进一步细分为“行”,您可以进一步深入一层

$crud = \Atk4\MasterCrud\MasterCrud::addTo($app);
$crud->setModel('Client', ['Invoices' => ['Lines' => []]]);

如果 Client hasMany('Payments'),则还可以添加该关系

$crud = \Atk4\MasterCrud\MasterCrud::addTo($app);
$crud->setModel('Client', ['Invoices' => ['Lines' => []], 'Payments' => []]);

经过一些整理,这种语法是可读的且很漂亮

$crud = \Atk4\MasterCrud\MasterCrud::addTo($app);
$crud->setModel('Client', [
    'Invoices' => [
        'Lines' => [],
    ],
    'Payments' => [],
]);

操作支持

MasterCrud 非常适合快速创建后台系统。但是基本的 C,R,U,D 操作并不足够。有时您想为单个元素调用自定义操作。现在 MasterCrud 也支持这一点

$app->layout->add(new \Atk4\MasterCrud\MasterCrud())
    ->setModel(new \Saasty\Model\App($app->db),
    [
        'columnActions' => [
            'repair' => ['icon' => 'wrench'],
        ],
        'Models' => [
            'columnActions' => [
                'migrate' => ['icon' => 'database'],
            ],
            'Fields' => [
                'ValidationRules' => [],

            ],
            'Relations' => [
                'ImportedFields' => [],
            ],
        ],

actions

有各种调用方法,允许您指定图标、标签、自定义回调等。

这还添加了“MethodInvocator” - 一个视图,它会要求您提供参数,然后执行它们。

以下示例将使用表单请求电子邮件地址,然后将其作为参数传递给 sendEmail($email)

[
    'columnActions' => [
         'sendEmail' => ['icon' => 'wrench', 'email' => 'string'],
   ]
]

安装

通过 composer 安装

 composer require atk4/mastercrud

有关如何渲染 HTML 的介绍,请参阅 ATK UI 的介绍。

路线图

  • 允许指定自定义的CRUD种子。您可以随时用您自己的兼容视图替换它。
  • 添加自定义操作和函数调用
  • 创建合理的"视图"模式(依赖于ATK UI卡)
  • 遍历hasOne引用(见下文)

尚未实现

假设 Invoice hasMany(Allocation)Payment hasMany(Allocation),同时分配可以有一个付款和一个发票。

$crud = \Atk4\MasterCrud\MasterCrud::addTo($app);
$crud->setModel('Client', [
    'Invoices' => [
        'Lines' => [],
        'Allocations' => [],
    ],
    'Payments' => [
        'Allocations' => [],
    ],
]);

这很酷,但如果您通过 Invoice -> allocation -> 的路径进行,您应该能够点击"付款"。

$crud = \Atk4\MasterCrud\MasterCrud::addTo($app);
$crud->setModel('Client', [
    'Invoices' => [
        'Lines' => [],
        'Allocations' => [
            'payment_id' => ['path' => 'Payments', 'payment_id' => 'payment_id'],
        ],
    ],
    'Payments' => [
        'Allocations' => [
            'invoice_id' => ['path' => 'Invoices', 'invoice_id' => 'invoice_id'],
        ],
    ],
]);

现在您可以从 Invoice->allocation 跳转到 Payment,反之亦然。