使用 Slow Admin 构建较复杂的页面
Slow Admin 可以方便且快速地构建出你想要的页面,以下使用本人开发的一个工具页面举例
效果#
实现代码#
整体布局#
public function index()
{
$page = $this->basePage()->css($this->style())->body([
// 使用 Grid2d 组件布局页面
Grid2d::make()->gap(15)->grids([
// 日历部分
Wrapper::make()->size('none')->body($this->calendar())->x(1)->y(1)->w(7),
// 右侧表单部分
Wrapper::make()->size('none')->body([
$this->form(),
$this->generator(),
])->x(8)->y(1),
]),
]);
return $this->response()->success($page);
}
日历组件部分#
public function calendar()
{
$calendar = Calendar::make()->largeMode(true)->schedules('${calendarData}')->scheduleAction(
// 此处重写了日历组件原有的点击弹窗内容
Component::make()->actionType('dialog')->dialog(
Component::make()->setType('dialog')->body(
Table::make()->columns([
['name' => 'project', 'label' => '项目'],
['name' => 'showDate', 'label' => '日期'],
['name' => 'content', 'label' => '内容'],
])->data('${scheduleData}')
)->actions([])->title('')->size('lg')->closeOnEsc(true)
)
)->onEvent([
// calendar 组件的 change 事件, 触发后将选择的日期赋值给 日期 字段
'change' => [
'actions' => [
'actionType' => 'setValue',
'componentId' => 'create_form',
'args' => [
'value' => [
'currentDate' => '${event.data.value}',
],
],
],
],
]);
// 使用 Service 组件, 实现表单提交后刷新 calendar 数据
// api() 为获取数据 api 地址
return Service::make()->api(admin_url('task_logs/calendar'))->body($calendar)->id('calendar_service');
}
右上表单#
public function form()
{
return $this->baseForm()
// 设置 form 的组件 id, 为了让 calendar 的 change 事件能找到目标
->id('create_form')
// 表单提交路径
->api($this->getStorePath())
// 表单数据域
->data([
'currentDate' => today()->timestamp,
])->body([
Select::make()->name('project')->label('项目')->options(ProjectService::make()->getOptions()),
InputDate::make()->name('date')->label('日期')->value('${currentDate}'),
Textarea::make()->name('content')->label('内容')->minRows(10),
])->onEvent([
// 表单提交成功事件, 刷新 calendar 外层的 Service, 重新获取日历数据
'submitSucc' => [
'actions' => [
'actionType' => 'reload',
'componentId' => 'calendar_service',
],
],
]);
}
右下表单#
public function generator()
{
// 给 title 和 actions 赋空值, 隐藏原有的 form 标题和提交按钮
return Form::make()->title('')->actions([])->api(admin_url('task_logs/generate'))->body([
// 布局
Flex::make()->alignItems('center')->justify('space-between')->items([
InputDateRange::make()->name('date_range')->size('full')->required(true),
// 添加一个行为按钮, 实现提交功能
Action::make()
->className('ml-3 mb-6')
->label('生成')
->level('success')
->actionType('submit'),
]),
// 用来显示 form 提交后返回的内容
Textarea::make()->name('content')->minRows(14)->className('my-3'),
]);
}
本作品采用《CC 协议》,转载必须注明作者和本文链接
推荐文章: