laravel-admin实战做个简单的客户管理——表格中点击,带参数跳转。
首先使用laravel-admin命令生成站点表的基本控制器。
php artisan admin:make FrontSiteController --model=App\Models\FrontSite //用命令生成控制器。
表单生成我采用了api的方式,获取用户ID,我专门写了一篇,laravel-admin 模型表单简单使用api范例。其中站点logo需要上传图片,为了能让logo统一大小,进行裁剪,需要安装composer require intervention/image ,可以参看laravel-admin上传/显示图片这篇文章。
但是在实际应用中,查找用户名,然后添加站点的方式,不如直接在用户列表中,点击用户行直接跳转到添加站点中来的直接。
因为用户站点信息只有一个网站名称,一个url,还有一个logo,所以我想实现类似 laravel-admin中快捷创建的功能。文档:https://laravel-admin.org/docs/zh/2.x/model-table-quick-create
但是快捷创建中没有上传图片的组件,并且还需要和用户关联,所以采用自定义表单的方式。文档:https://laravel-admin.org/docs/zh/2.x/data-form
经过试验,发现这种方式对于我这个项目比较复杂,就做了一些变动。采用了前端组件,自定义了一个添加站点的页面。文档:https://laravel-admin.org/docs/zh/1.x/widgets#%E8%A1%A8%E5%8D%95
这个页面中的方法代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
//添加站点 public function addSite($id, Content $content) { if(!isset($id)) { return $content ->withError('错误', '请从用户列表点击添加网站进入本页面'); } $customer = FrontCustomer::where('id',$id)->first(); $content->title('网站添加'); $content->description('添加用户'.$customer->user_name.'的站点'); $content->breadcrumb( ['text' => '首页', 'url' => '/'], ['text' => '站点管理', 'url' => '/front-sites'], ['text' => '添加站点'] ); //获取该用户的站点列表 $site_list = FrontSite::where('front_customers_id',$id)->orderBy('id', 'DESC')->get()->toArray(); $cloud = ''; for($i = 0; $i < count($site_list); $i++) { if(!empty(trim($site_list[$i]['site_logo']))) { $path = config('filesystems.disks.admin.url').$site_list[$i]['site_logo']; $site_list[$i]['site_logo'] = $path; } $cloud .= '<a class="tagc'.rand(1,5).'" href="'.$site_list[$i]['site_url'].'" target="_blank" rel="noopener noreferrer">'.$site_list[$i]['site_name'].'</a>'; } $form = new wForm(); //配置表单 $form->setWidth(8, 3); //提交的url $form->action('/admin/api/store-site'); $form->hidden('front_customers_id')->default($id)->rules(['required', 'integer']);; $form->display('ignore_name','客户名称')->default($customer->user_name); $form->text('site_name', __('Site name'))->required() ->rules(['required', "unique:front_sites"]); // 剪裁图片 添加图片删除按钮 $form->image('site_logo', __('Site logo'))->resize(160, 120)->removable()->help('图片规格160*120,大图片会自动缩放。')->rules('nullable'); $form->url('site_url', __('Site url'))->required()->help('需要输入http(s)://。') ->rules(['required', "unique:front_sites", "url"]); //$form->setContainer('pjax-form'); //设置自己的标识,用于ajax提交 //$content->body(view('admin.frontsites.addsitejs')); // 引入js视图模板的一种方式,视图的内容里就是<script src=xxx></script> //$content->view('admin.frontsites.addsite',['site_list'=> $site_list, 'form' => $form->render(), 'cloud' => $cloud]); $form->changeSubmit(); //用button替换submit $form->disablePjax(); $form_html = $form->render(); $content->view('admin.frontsites.addsite',['site_list'=> $site_list, 'form' => $form_html, 'cloud' => $cloud]); Admin::css('/css/admin_style.css'); Admin::css('/css/cloudTag.css'); //保存form组件,用于ajax方法使用form的rules session(['form' => $form]); return $content; } |
代码讲解:
- 这段代码中包含了一个云标签的数据,还有一个该用户的站点列表数据。所以看的时候注意。
- 方法中两个参数 id 就是用户的id,Content 相当于laravel-admin的一个空白页面,不过包含了顶部和左侧菜单栏。这个参数不用赋值,自动生成。所以加上路由后,直接执行 http://域名/add-site/ID即可。路由\app\Admin\routes.php添加:
123$router->get('add-site/{id}', 'FrontSiteController@addSite', function ($id) {//})->where('id', '[0-9]+')->name('admin.addsite.index'); //自定义页面添加站点
- content的标题:title ,描述:description,右侧面包屑导航:breadcrumb
- 页面组件form必须use一下:
1use Encore\Admin\Widgets\Form as wForm;
- $form->changeSubmit(); 是我自行写的方法,主要作用是替换form生成的submit,改成button属性,方面使用ajax,禁用$form->disablePjax();
文件:\vendor\encore\laravel-admin\src\Widgets\Form.php1234567public function changeSubmit(){array_delete($this->buttons, 'submit');//添加button$this->buttons = array_merge($this->buttons, ['button']);return $this;} - content->view 使用自定义的视图,然后$from->render()生成html,填充进去。
在用户页面点击,直接获取id,直接执行 http://域名/add-site/ID即可。这个ID获取,是从grid()方法里,直接在列里使用$this->id获得行id(就是那个客户id)
噢!评论已关闭。