laravel-admin中table,select控件额外需求

以下方法且添加在控件相关文件中

1. table组件图片在修改时丢失

配置好的图片在修改时直接丢失,只能重新上传

方法如下:有一定弊端,图片配置不会丢失但也无法删除,可用额外字段作删除标记

$form->saving(function (Form $form) {
            $images = $form->images;
            foreach ($images as $key => &$item) {
                if (isset($item['image']) && \request()->hasFile("images.{$key}.image")) {
                    unset($item['image']);
                    $item['image'] = \request()->file("images.{$key}.image")->store(config('filesystems.disks.public.directory.image'), 'public');
                } else {
                    $item['image'] = $form->model()->images[$key]['image'] ?? "";
                }
            }
            $form->model()->images = $images;
}

2.1. 表单输入框联动①:第二级随第一级切换而改变输入框类型

示例:如代码所示,需求为根据version切换显示channel_id还是coid
$form->select('version', '配置版本')
         ->options([0 => '渠道版', 1 => '企业版'])
         ->hideField(['channel_id', 'coid'], [[0 => 'channel_id'], [1 => 'coid']]);

$form->select('channel_id', '指定渠道')->options(Channel::all(['name', 'id'])->pluck('name', 'id'));
$form->select('coid', '指定企业')->options(Company::all(['id', 'name'])->pluck('name', 'id'));

我们只需要在select控件Select.php(App\Http\Admin\Extensions)中添加一下方法:

/**
     * 通过选择值,展示或隐藏某些字段
     * @param $fieldsGroup //参与隐藏或展示的字段组
     * @param $condition //条件:当值等于X的时候展示Y字段 [value=>fields]
     * @return $this
     */
    public function hideField($fieldsGroup, $condition)
    {
        $fieldsGroupClass = [];
        foreach ($fieldsGroup as $fieldName) {
            $fieldClassName = '.' . trim($fieldName, '.');
            $fieldsGroupClass[] = $fieldClassName;
        }
        $fieldClassName = implode(',', $fieldsGroupClass);
        foreach ($condition as &$fieldName) {
            $fieldName = array_map(function ($v) {
                return '.' . $v;
            }, $fieldName);
            $fieldName = implode(',', $fieldName);
        }
        unset($fieldName);
        $jsonCondition = json_encode($condition);
        $script = <<<EOT
$(function(){
    $(document).on('change',"{$this->getElementClassSelector()}",function(){
        var _this=$(this);
        var _val = _this.val();
        var _condition=$jsonCondition
        $("{$fieldClassName}").parents('.form-group').hide();
        $("{$fieldClassName}").attr('disable',true)
        if(_condition[_val]!=undefined){
           var e =_condition[_val];
           $(e).parents('.form-group').show();
           $(e).attr('disable',false)
        }
    });
    $("{$this->getElementClassSelector()}").trigger('change');
})
EOT;
        Admin::script($script);
        return $this;
    }

2.2. 表单输入框联动②:第二级随第一级切换而展示/隐藏

示例:如代码所示,需求为根据auto_product切换展示/隐藏app_id,secret配置
$form->select('auto_product', '产品自增')
                ->options([1 => '手动添加产品', 0 => '自动同步产品'])
                ->hideField2(['appid', 'secret']);

$form->text('appid', 'appid');
$form->text('secret', 'secret');

方法如下:

/**
     * 通过选择值,展示或隐藏某些字段 过去 现在 未来
     * @param $fieldsGroup //参与隐藏/展示的字段
     * @return $this
     */
    public function hideField2($fieldsGroup)
    {
        $fieldsGroupClass = [];
        foreach ($fieldsGroup as $fieldName) {
            $fieldClassName = '.' . trim($fieldName, '.');
            $fieldsGroupClass[] = $fieldClassName;
        }

        $script = <<<EOT
$(function(){
    $(document).on('change',"{$this->getElementClassSelector()}",function(){
        var _this=$(this);
        var _val = _this.val();
        if(_val == 1){
            $("{$fieldsGroupClass[0]}").parents('.form-group').hide();
            $("{$fieldsGroupClass[0]}").attr('disable',true);
            $("{$fieldsGroupClass[1]}").parents('.form-group').hide();
            $("{$fieldsGroupClass[1]}").attr('disable',true);
        }
        if(_val == 0){
            $("{$fieldsGroupClass[0]}").parents('.form-group').show();
            $("{$fieldsGroupClass[0]}").attr('disable',false);
            $("{$fieldsGroupClass[1]}").parents('.form-group').show();
            $("{$fieldsGroupClass[1]}").attr('disable',false);
        }
    });
    $("{$this->getElementClassSelector()}").trigger('change');
})
EOT;
        Admin::script($script);
        return $this;
    }

小结:

上面两种不同情况都很简单,一些简单的js,jQuery知识。有额外情况只需仿照以上代码,观察表单的dom结构做出相应修改即可。

3. 二级联动初始化问题

select二级联动在修改/添加界面的时候无法展示已有的配置,即使第一级有默认值

方法:重写联动select的load方法,添加以下代码$("{$this->getElementClassSelector()}").trigger('change');. 即在页面加载时就触发一次change事件,加载出我们已有的配置

方法如下:

/**
     * Load options for other select on change.
     *
     * @param string $field
     * @param string $sourceUrl
     * @param string $idField
     * @param string $textField
     *
     * @return $this
     */
    public function load($field, $sourceUrl, $idField = 'id', $textField = 'text', bool $allowClear = true)
    {
        if (Str::contains($field, '.')) {
            $field = $this->formatName($field);
            $class = str_replace(['[', ']'], '_', $field);
        } else {
            $class = $field;
        }

        $placeholder = json_encode([
            'id'   => '',
            'text' => trans('admin.choose'),
        ]);

        $script = <<<EOT
$(document).off('change', "{$this->getElementClassSelector()}");
$(document).on('change', "{$this->getElementClassSelector()}", function () {
    var select_value = $(this).attr('data-value');
    var target = $(this).closest('.fields-group').find(".$class");
    $.get("$sourceUrl",{q : this.value}, function (data) {
        target.find("option").remove();
        var data_value = target.attr("data-value");
        var values = data_value.split(',');
        $(target).select2({
            placeholder: $placeholder,
            allowClear: $allowClear,
            data: $.map(data, function (d) {
                d.id = d.$idField;
                d.text = d.$textField;
                console.log(String(d.id));
                if($.inArray(String(d.id), values) != -1){
                    d.selected = true;
                }
                return d;
            })
        }).trigger('change');
    });
});
 $("{$this->getElementClassSelector()}").trigger('change'); 
EOT;

        Admin::script($script);

        return $this;
    }

4. 复制当前数据并修改后添加

public function copy($id)
{
        return Admin::content(function (Content $content) use ($id) {

            $content->header('新建员工中心');
            $form = $this->form()->edit($id);
            $form->builder()->setMode();
            $form->setAction(route('employee.store'));
            $content->body($form);
        });
 }
表格
$grid->actions(function (Grid\Displayers\Actions $actions) {
          $url = route('employee.copy', ['id' => $actions->row->id]);
          $actions->append("<a href={$url}><i class='fa fa-copy'></i></a>");
 });
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,175评论 5 466
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,674评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,151评论 0 328
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,597评论 1 269
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,505评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 47,969评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,455评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,118评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,227评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,213评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,214评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,928评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,512评论 3 302
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,616评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,848评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,228评论 2 344
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,772评论 2 339