laravel-admin實現選項卡切換列表

實現效果

業務是 在一個列表中 增加一個詳情的按鈕 點擊按鈕之後 跳轉到如下頁面
這個頁面帶有選項卡切換的功能
在這裏插入圖片描述

實現過程

首先 laravel-admin的列表默認是隻有 編輯 查看 刪除的操作按鈕
所以我們第一步 就是要給列表頁增加一個詳情的按鈕

先在列表頁配置按鈕

$grid->actions(
    function (Grid\Displayers\Actions $actions) {
        $actions->add(new Detail());        //詳情
    }
);

這個實例化的類就是我們自定義的按鈕
爲了方便管理,我們另外起一個文件夾在Admin文件夾下創建Actions文件夾
然後創建我們這個模塊的文件,比如是Agent
最後創建一個上面我們實例化的類文件 Detail

<?php

namespace App\Admin\Actions\Agent;

use Encore\Admin\Actions\RowAction;

class Detail extends RowAction
{
    public $name = '詳情';

    public function href()
    {
    	//這裏的key就是列表單條數據的id 當作參數 傳到我們選項卡的頁面
        $key = $this->getKey();
        //這裏的路由就是選項卡頁面的路由
        return 'agent_list/config/' . $key;
    }
}

配置上述提到的路由


//顯示選項卡列表
$router->get('agent/agent_list/config/{agent_id}', 'AgentController@agentInfoIndex');
//選項卡對應功能的提交
$router->put('agent/agent_list/config/{agent_id}', 'AgentController@agentInfoSave');

處理流程

首先是選項卡列表的方法 也就是上面的 agentInfoIndex

/**
* 選項卡切換配置列表
* @param $id
* @param Content $content
* @return Content
*/
public function agentInfoIndex($id, Content $content)
{
   return $content
       ->title($this->title())
       ->description($this->description['index'] ?? trans('admin.list'))
       ->body($this->configTab($id));//通過這裏去顯示選項卡  這裏的id 同樣也是上述提到的id
}

選項卡的代碼
這裏的選項卡呢 我就着重介紹兩個
一個選項卡內容是列表 一個選項卡內容是表單

public function configTab($id)
{
    $tab = new Tab();
    //這裏就是通過調用一個新的控制器去渲染列表信息 記住這個寫法!!!
    $tab->add('這個是列表', (new AgentChildController())->grid()->render());
    //這裏就是調用當前控制器下的某個方法實現表單的顯示
    $tab->add('這個是表單', $this->agentInfo($id)->edit($id));
    return $tab->render();
}

首先先介紹列表頁的控制器
這個控制器就不需要配置路由了!
我只提上主方法 也就是列表方法 grid 其實寫法跟普通的列表寫法沒有什麼差別 但是在代碼後面需要多一句resource

/**
 * Make a grid builder.
 *
 * @return Grid
 */
public function grid()
{
	//這裏就是獲取的id
    $id = request()->route()->parameter("agent_id");
    $agentId = AgentModel::query()->where('id', $id)->select('parent_id')->first()->toArray();
    //獲取直屬下一集的信息
    $agentArr = AgentModel::query()->where('parent_id', $agentId['parent_id'])->select('agent_id')->get()->toArray(
    );
    $agentArr = array_column($agentArr, "agent_id");
    array_push($agentArr, $agentId['parent_id']);
    $grid = new Grid(new AgentModel());
    $grid->model()->where('enable', '<>', Enable::DEL);
    $grid->model()->where('status', '=', AgentStatus::AUDIT_SUCCESS);
    $grid->model()->whereIn('parent_id', $agentArr);
    $grid->disableFilter();
    $grid->disableColumnSelector();
    $grid->disableExport();
    $grid->column('name', '代理名稱');
    $grid->column('code', '代理賬號');
    $grid->column('create_at', '創建時間')->display(
        function ($time) {
            return date('Y-m-d H:i:s', $time);
        }
    );
    $grid->model()->orderByDesc('id');
    $grid->resource("/admin/agent/agent_list/agent/$id");
    return $grid;
}

接下來是表單

/**
* 根據選項卡顯示不一樣的內容
* @param $agentId
* @param string $func
*/
public function agentInfo($id)
{
   $form = new Form(new AgentModel());
   $form->setTitle(' ');
   $form->hidden('func', '隱藏提交的選擇方法')->default('getAgentOpenTemplate');
   $form->select('agent_template.bond_template_id', '保證金模板')
       ->options(BondTemplateModel::all()->pluck('name', 'bond_template_id'));
   $form->select('agent_template.risk_template_id', '風控模板')
       ->options(RiskTemplateModel::all()->pluck('name', 'risk_template_id'));
   $form->setAction($id);
   return $form;
}

接下來是關於表單的保存
通過上面的設置 我們知道 路由的方法名字是agentInfoSave
其實這裏的內容 不需要過於關注代碼本身
這裏其實就是接收到參數之後
使用model進行保存數據和更新數據 僅此而已!

/**
* 選項卡提交保存
* @param $id
*/
public function agentInfoSave($id)
{
   $params = request()->all();
   $agentInfo = AgentModel::find($id);
   $agentTemplate = AgentTemplateModel::query()
       ->where('agent_template_id', $agentInfo->agent_template_id)
       ->first();
   //如果沒有配置 就給這個代理配置一個新的代理模板
   if ($agentInfo->agent_template_id == 0) {
       $params['agent_template_id'] = dk_get_next_id();//手續費模板id
       //插入一個模板
       AgentTemplateModel::query()->insert(
           [
               'agent_template_id'  => $params['agent_template_id'],
               'bond_template_id'   => $params['agent_template']['bond_template_id'],
               'create_at'          => time(),
               'update_at'          => time()
           ]
       );
       //更新這個用戶持有的模板
       $res = AgentModel::query()->where('agent_id', $agentInfo->agent_id)
           ->update(['agent_template_id' => $params['agent_template_id']]);
   } else {//如果有配置就進行更新操作
       $agentTemplate->bond_template_id = $params['agent_template']['bond_template_id'];
       $agentTemplate->risk_template_id = $params['agent_template']['risk_template_id'];
       $res = $agentTemplate->save();
   }
   if (!$res) {
       admin_toastr('配置失敗', 'error');
   } else {
       admin_toastr('配置成功', 'success');
   }
}

至此,選項卡的功能就實現了,
總結一下:

  1. 配置一個新的按鈕
  2. 配置對應的路由
  3. 如果有表單的話在配置一個用來保存的路由
  4. 渲染列表的時候需要主要語句不能漏掉
  5. 參數定義好,個人建議是接收主鍵ID 不然會有坑!!!

覺得有用的就點個贊加個關注吧!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章