ScotGu

Laravel-admin实例笔记(4)—表单优化
我们已经有了一张表单,但是对细节还不是很满意。比如资产类型和资产状态只允许选择指定几项,方便后期筛选;备注需要文本...
扫描右侧二维码阅读全文
13
2018/04

Laravel-admin实例笔记(4)—表单优化

我们已经有了一张表单,但是对细节还不是很满意。
比如资产类型和资产状态只允许选择指定几项,方便后期筛选;
备注需要文本框而不是文本栏;
维护人员我希望自动写入最后编辑的用户名。
还有索引也的筛选功能只有ID,我需要更多!
还有……还有……
下面,我们开始吧。

Form组件相关

下拉选择框

将资产类型和资产状态改为下拉选择框,并写入选择项。
编辑:[/app/Admin/Controllers/InfoAssetsController.php]
1.png
添加后可以回到资产管理的添加或编辑页面,看下效果了。

文字框

将资产信息中的备注信息改为文字框形式。
编辑:[/app/Admin/Controllers/InfoAssetsController.php]
2.png
效果还不错吧。

指定表单自动写入

这里需要将维护人员信息改为自动写入最后编辑人姓名。
编辑:[/app/Admin/Controllers/InfoAssetsController.php]
3.png
$form->display('updated_username', '维护人员');
编辑[/app/Models/InfoAssetsModel.php]
4.png
use Encore\Admin\Facades\Admin;

    //维护人员自动写入编辑人姓名
    public function save(array $options = [])
        {
            //->name也可以改为id,显示的就是编辑者的id信息。
            $this->updated_username = Admin::user()->name;
            parent::save();
        }

必填提示

为了防止误操作或错误提交,需要对表单进行验证,
必填项的设置很有必要。
代码:->rules('required', ['required' => '必选提示语']);
使用方法如图:
5.png

更多使用方法,请翻阅Laravel-admin官方文档:《模型表单-基本使用》、《模型表单-表单验证

筛选增强

6.png
可能早就注意到右上角的筛选按钮,当数据量达到一定时,筛选功能就显得尤为重要。
但是默认只有ID筛选,这基本等于没有筛选功能啊,不能忍!
编辑:[/app/Admin/Controllers/InfoAssetsController.php]
7.png

            $grid->filter(function ($filter) {
                $filter->disableIdFilter();   // 去掉默认的id过滤器
                $filter->equal('asset_type','资产类型')->select(['办公耗材' => '办公耗材', '办公设备' => '办公设备', '其他' => '其他']);    // 按给定选项匹配查找
                $filter->like('asset_name','资产名称');    // 按字段模糊筛选
                $filter->like('asset_sn','SN编码');    // 按字段模糊筛选
                $filter->equal('asset_status','资产状态')->select(['在库' => '在库', '出库' => '出库', '损毁' => '损毁']);    // 按给定选项匹配查找
                $filter->like('asset_note','备注');    // 按字段模糊筛选
                $filter->like('updated_username','维护人员');    // 按字段模糊筛选
                $filter->between('created_at','创建时间')->datetime();    // 设置created_at字段的范围筛选
                $filter->between('updated_at','更新时间')->datetime();    // 设置created_at字段的范围筛选
            });

再次点击筛选按钮查看效果吧。
8.png
而且我把索引页的【创建时间】和【更新时间】列都注解了,但是筛选功能依然好用!
让索引页面更干净!

其他优化

列表排序

在索引页面可以看到,只有ID列可以选择排列顺序,但是ID排序很鸡肋呀。
继续编辑:[/app/Admin/Controllers/InfoAssetsController.php]
9.png
只需要在每个$grid后面添加代码->sortable();就可以了,特别简单。

索引页默认排序设置

默认情况下,都是依据ID,升序排列,这样在录入数据变多后,每次查新数据都需要翻到最后一页。
还是编辑:[/app/Admin/Controllers/InfoAssetsController.php]
只需要:$grid->model()->orderBy('id', 'desc'); 代码就可以修改排序为降序排列了。
10.png

隐藏撤销按钮

在新增和编辑表单页面的左下角有一个黄色的撤销按钮。
颜色亮丽,每次输入完数据后就习惯性的点击它,结果……什么都没有了。
依旧编辑:[/app/Admin/Controllers/InfoAssetsController.php]
在 $form 内容内写入代码:$form->disableReset();
11.png

索引页显示字符限制

当我在“备注”中输入了一串字符后,尴不尴尬!
12.png
一条代码:
->display(function($asset_note) {return str_limit($asset_note, 70, '...');});
备忘:有两处$asset_note需要改成对应的表单字段名称,“70”是限制字符数,超过后显示“...”。
代码不长,我就缩成一行,强迫症请饶命……
再来编辑:[/app/Admin/Controllers/InfoAssetsController.php]
13.png
提示:由于“备注”文本框可能会记录很长的信息,所以需要在数据库中修改字段类型为LONGTEXT。
补充:上面的代码虽然可以实现“摘要”模式,但是存在BUG,一旦数据库中为NULL值,则会出现丑陋的样式,所以需要做判定,
更新后的代码:

            $grid->asset_note('备注')->sortable()->display(function($note){
              //判断是否为空值。
              if($note){    
                //有数据则按代码输出显示字符数。
                return str_limit($note, 20, '...');
              }else{
                //无数据则输出指定字符。
                return "";
              }});

表单优化就先记录这些吧,《Laravel-admin官方文档》里有更多介绍。

下篇将记录如何将页面添加至菜单中以及权限、角色、用户之间的关系设置。

Last modification:August 27th, 2018 at 03:40 pm

Leave a Comment