dcat admin 自定义页面

news2025/2/25 12:38:21

自定义用户详情页
整体分为两部分:用户信息tab框

用户详情页

用户信息采用自定义页面加载,controller代码如下:

protected function detail($id)
{
     return Show::make($id, GameUser::with('finance'), function (Show $show) {
    		// 这段就是加载自定义页面
         $show->html(view('admin.user._header', ['user' => $show->model()]));

		  // 这里加载tab
         $tab = Tab::make();
         // 这段采用本地加载,不需要异步,获取全部银行卡列表信息
         $tab->add('银行卡', $this->bankAccount($show->model())); 
         // 订单采用异步加载
         $tab->add('订单', UserOrderTable::make(["user_id"=>$show->model()->id]));
         $show->html($tab->withCard());
         $show->disableDeleteButton();
     });
 }

protected function bankAccount($userModel) {
    $grid = new Grid(new GameUserBankAccount());
    $grid->model()->where('user_id', $userModel->id);
    $grid->column('account_name', '账户名');
    $grid->column('bank_branch_code', '银行分行代码');
    $grid->column('bank_account', '银行卡号');
    $grid->column('created_at');
    $grid->column('updated_at');

    $grid->disableActions()
        ->disableRefreshButton()
        ->disableCreateButton()
        ->disableRowSelector()
        ->withBorder()
        ->scrollbarX();

    return $grid->render();
}

admin.user._header页面代码如下:

<style>
    .user-container {background: #F4F7FA; padding: 20px 0; justify-content: center; margin-bottom: 20px}
    .user-container .row{ padding: 10px 20px }
</style>
<div>
    <div class="user-container">
        <div class="row">
            <div class="col">用户账号:{{ $user->account }}</div>
            <div class="col">用户昵称:{{ $user->name }}</div>
            <div class="col">状态:<span class="text-info">正常</span></div>
            <div class="col">推荐人:{{ $user->name }}</div>
        </div>
        <div class="row">
            <div class="col">姓名:{{ $user->identity_name }}</div>
            <div class="col">手机:{{ $user->phone }}</div>
            <div class="col">地址:{{ $user->address }}</div>
            <div class="col">邮箱:{{ $user->email }}</div>
        </div>
        <div class="row">
            <div class="col">Whatsapp:{{ $user->whatsapp }}</div>
            <div class="col">Facebook:{{ $user->facebook }}</div>
            <div class="col">Telegram:{{ $user->telegram }}</div>
            <div class="col">创建时间:{{ $user->created_at  }}</div>
        </div>
    </div>
</div>

UserOrderTable 代码如下:
异步加载文档地址:https://learnku.com/docs/dcat-admin/2.x/asynchronous-loading/9327

<?php

namespace App\Admin\Renderable;

use App\Models\GameUserOrder;
use Dcat\Admin\Grid;
use Dcat\Admin\Grid\LazyRenderable;
use Illuminate\Contracts\Support\Renderable;

class UserOrderTable extends LazyRenderable implements Renderable
{
    public function grid(): Grid
    {
        return Grid::make(GameUserOrder::where("user_id", $this->payload['user_id']), function (Grid $grid) {
            $grid->column('order_code', '流水单号');
            $grid->column('order_type', '订单类型')
                ->display(function () {return $this->order_type_desc;})
                ->sortable()
                ->badge(['default' => 'primary', 10 => 'primary', 20 => 'danger']);
            $grid->column('order_amount', '订单金额')->sortable();
            $grid->column('actual_amount', '实际金额');
            $grid->column('gift_amount', '赠送金额');
            $grid->column('fee_amount', '手续费');
            $grid->column('order_status', '状态')->display(function () {return $this->order_status_desc;})->dot(
                [100 => 'danger', 200 => 'success', 300 => 'primary']
            );
            $grid->column('created_at');
            $grid->column('updated_at');

            $grid->disableActions()
                ->disableRefreshButton()
                ->disableCreateButton()
                ->disableRowSelector()
                ->withBorder()
                ->scrollbarX()
                ->paginate(5);
        });
    }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1477655.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Window部署Jaeger

参考&#xff1a;windows安装使用jaeger链路追踪_windows安装jaeger-CSDN博客 下载&#xff1a;Releases jaegertracing/jaeger GitHub Jaeger – Download Jaeger 目录 1、安装nssm 2、安装运行 elasticsearch 3、安装运行 3.1部署JaegerAgent 3.2部署JaegerCollec…

MySQL 存储过程批量插入总结

功能需求背景&#xff1a;今天接到产品经理核心业务表的数据压测功能&#xff0c;让我向核心业务表插入百万级的业务量数据&#xff0c;我首先想到的办法就是存储过程实现数据的批量 。 由于无法提供核心业务表&#xff0c;本文仅仅提供我刚刚自己创建的表bds_base_user 表做相…

7-AMCA NHS ester,113721-87-2,可以将荧光基团特异性地连接到目标分子上

113721-87-2&#xff0c;7-AMCA NHS ester&#xff0c;AMCA-OSu&#xff0c;AMCA-NHS&#xff0c;AMCA N-succinimidyl ester&#xff0c;7-AMCA NHS 活化酯&#xff0c;7-氨基-4-甲基香豆素-3-乙酸 N-琥珀酰亚胺酯&#xff0c;可以将荧光基团特异性地连接到目标分子上 您好&a…

IDC 中搭建 Serverless 应用平台:通过 ACK One 和 Knative 玩转云资源

作者&#xff1a;元毅、庄宇 如何打造云上&#xff08;公共云&#xff09;、云下&#xff08;IDC 数据中心&#xff09;统一的云原生 Serverless 应用平台&#xff0c;首先我们来看一下 ChatGPT 4 会给出什么样的答案&#xff1a; 如何打造云上、云下统一的云原生 Serverless…

echarts图表用key强制刷新后空白

我的需求是echarts图表全屏后退出全屏在edge浏览器上没有什么问题但是在Chrome浏览器上会出现表格的线不能变回原来的比例的问题 我就想在退出全屏的时候强制刷新一下echarts图表外面的这个div useEffect(() > {if (col) {col.addEventListener("webkitfullscreenchan…

Windows系统安装TortoiseSVN并结合内网穿透实现远程访问本地服务器——“cpolar内网穿透”

文章目录 前言1. TortoiseSVN 客户端下载安装2. 创建检出文件夹3. 创建与提交文件4. 公网访问测试 前言 TortoiseSVN是一个开源的版本控制系统&#xff0c;它与Apache Subversion&#xff08;SVN&#xff09;集成在一起&#xff0c;提供了一个用户友好的界面&#xff0c;方便用…

Node.js基础---npm与包

包 概念&#xff1a;Node.js 中的第三方模块又叫做包 来源&#xff1a;由第三方个人或团队开发出来的&#xff0c;免费使用&#xff0c;且为开源 为什么需要&#xff1a;Node.js的内置模块只有一些底层API&#xff0c;开发效率低 包是基于内置模块封装出来的&#xff0c;提供更…

express+mysql+vue,从零搭建一个商城管理系统6--数据校验和登录

提示&#xff1a;学习express&#xff0c;搭建管理系统 文章目录 前言一、修改models/user.js二、修改routes下的user.js三、Api新建user/login接口四、删除数据库原有数据&#xff0c;添加新验证规则的用户四、用户登录总结 前言 需求&#xff1a;主要学习express&#xff0c;…

IP源防攻击IPSG(IP Source Guard)

IP源防攻击IPSG&#xff08;IP Source Guard&#xff09;是一种基于二层接口的源IP地址过滤技术&#xff0c;它能够防止恶意主机伪造合法主机的IP地址来仿冒合法主机&#xff0c;还能确保非授权主机不能通过自己指定IP地址的方式来访问网络或攻击网络。 2.1 IPSG基本原理 绑定…

c# 广度优先搜索(Breadth-First Search,BFS)

在这篇文章中我将讨论用于树和图的两种遍历机制之一。将使用 C# 示例介绍广度优先搜索 (BFS)。图是最具挑战性和最复杂的数据结构之一。 广度优先搜索的工作原理&#xff1a;广度优先搜索 &#xff08;BFS&#xff09;是一种探索树或图的方法。在 BFS 中&#xff0c;您首先探索…

Mac 重新安装系统

Mac 重新安装系统 使用可引导安装器重新安装&#xff08;可用于安装非最新的 Mac OS&#xff0c;系统降级&#xff0c;需要清除所有数据&#xff09; 插入制作好的可引导安装器&#xff08;U盘或者移动固态硬盘&#xff09;&#xff0c;如何制作可引导安装器将 Mac 关机将 Ma…

【多智能体】MetaGPT配置教程(应用智谱AI的GLM-4)

MetaGPT配置教程&#xff08;使用智谱AI的GLM-4&#xff09; 文章目录 MetaGPT配置教程&#xff08;使用智谱AI的GLM-4&#xff09;零、为什么要学MetaGPT一、配置环境二、克隆代码仓库三、设置智谱AI配置四、 示例demo&#xff08;狼羊对决&#xff09;五、参考链接 零、为什么…

Appium手机Android自动化

目录 介绍 什么是APPium&#xff1f; APPium的特点 环境准备 adb(android调试桥)常用命令 appium图形化简单使用 连接手机模拟器 使用appium桌面端应用程序 ​编辑 整合java代码测试 环境准备 引入所需依赖 书写代码简单启动 ​编辑 Appium元素定位 id定位 介…

unity自定义着色器基础

这些内置渲染管线的着色器示例演示了编写自定义着色器的基础知识&#xff0c;并涵盖了常见的用例。 有关编写着色器的信息&#xff0c;请参阅编写着色器。 设置场景 第一步是创建一些用于测试着色器的对象。在主菜单中选择 Game Object > 3D Object > Capsule。然后&a…

AMEYA360:广和通5G智能模组SC171支持Android、Linux和Windows系统,拓宽智能物联网应用

世界移动通信大会2024期间&#xff0c;广和通宣布&#xff1a;5G智能模组SC171除支持Android操作系统外&#xff0c;还兼容Linux和Windows系统&#xff0c;帮助更多智能终端客户快速迭代产品&#xff0c;拓宽智能化应用覆盖范围。 广和通SC171系列基于高通QCM6490物联网解决方案…

2022年下半年教师资格证考试《综合素质》(中学)题

1.一位肖老师认为&#xff1a;“教师在教学中不能只关注学科层面的知识&#xff0c;还要爱学生&#xff0c;建立和谐的师生关系”。她在日常工作中以此为行动指南&#xff0c;这表明肖老师所处的教师专业发展阶段是&#xff08; B&#xff09;。 A“虚拟关注”阶段 B“自我更新…

ubuntu22.04工具整理以及安装使用方式

截图工具 火焰截图 安装&#xff1a; sudo apt install flameshot增加自定义快捷键&#xff1a; 然后就可是使用是指的快捷键进行截图了。 如果没有在截图上编辑的需要&#xff0c;其实自带的截图也够用的。

这可能是你少有的能get到测试用例编写精髓的机会!

自动化测试用例的编写是实现项目自动化的核心&#xff0c;合理的用例设计是保证自动化效益和实用性的关键&#xff0c;也直接决定了自动化脚本是否具备可扩展和可维护性。由此&#xff0c;本篇文章主要为大家介绍了测试用例编写的规范和注意事项。 一、自动化测试用例选择 自…

如何在宝塔面板中设置FTP文件传输服务并实现远程文件管理

文章目录 1. Linux安装Cpolar2. 创建FTP公网地址3. 宝塔FTP服务设置4. FTP服务远程连接小结 5. 固定FTP公网地址6. 固定FTP地址连接 宝塔FTP是宝塔面板中的一项功能&#xff0c;用于设置和管理FTP服务。通过宝塔FTP&#xff0c;用户可以创建FTP账号&#xff0c;配置FTP用户权限…

APRISO的低代码能力降低MOM系统全生命周期成本

前言 进入21世纪以来企业之间的竞争发生了巨大的变化&#xff0c;特别是近10年来&#xff0c;客户对产品的需求逐渐多样化&#xff0c;制造企业的生产模式也开始由大批量的刚性生产变为了多品种、小批量的柔性生产模式&#xff0c;生产线也从以前的手工方式转为了以自动化的机…