catchadmin 后端返回案例汇总

表格基本格式:

  return $this->getTable('wxuser')
            ->header([
               HeaderItem::label('执委姓名')->prop('nickname'),             
               HeaderItem::label('操作')->actions([
                    Actions::update(),
                    Actions::delete()
               ])
            ])
            ->withSearch([                
                Search::label('村级检索')->text('cun'),
            ])
            ->withApiRoute('wxuser')
            ->withActions([
                Actions::create('添加项目')->type('success'),
            ])
            ->withBind()
            ->withDialogWidth('40%')
            ->toTreeTable()
            ->forceUpdate()
            ->render();

各种headerItem的情况汇总:

HeaderItem::label('姓名')->prop('name'),   //最基本表格列
HeaderItem::label('审核状态')->prop('status')->withSwitchComponent(1,['disabled'=>true]),  //不能修改的swich标签
HeaderItem::label('姓名')->prop('name')->withEditComponent().  //可编辑
HeaderItem::label('姓名')->prop('name')->withEditNumberComponent().  //可编辑 数字
HeaderItem::label('电话')->prop('phone')->withSelectComponent([
                    [
                        'value'=>1,
                        'label'=>'dddd'
                    ],
                    [
                        'value'=>2,
                        'label'=>'cccc'
                    ],
                    [
                        'value'=>3,
                        'label'=>'eeee'
                    ]
                ]),
            ])
 //下拉 select修改标签 开关标签不够可以多选 
 

在这里插入图片描述

7 withPreviewComponent  //预览

8 withUrlComponent // url 链接

9 withCopyComponent  //复制

10 withDownloadComponent   //下载

行内操作:

                HeaderItem::label('操作')->width(560)->actions([
                    Actions::normal('参加活动列表','zz2','hdlist','')->hiddenFiled('statusbutton'),
                    Actions::update(),
                    Actions::delete(),
                    Actions::view(),
                ])

--------------------------------------关于搜索

  1. 1 —案例1
 ->withSearch([
        Search::radio('status',[])->button()->options([
                ['value'=>0,'label'=>'未绑定'],
                ['value'=>1,'label'=>'已绑定']
            ]),
        Search::label('姓名')->text('name',''),
        Search::label('电话')->text('phone','')
            ])
	基本效果:

前端效果

  1. 2— 案例2
        ->withSearch([
            \catcher\library\form\Form::cascader('tuanduiid', '所属团队', (array)0)->options(
                \catchAdmin\zc2\model\Address::field(['id', 'parent_id', 'name'])->select()->toTree()
            )->clearable(true)->filterable(true)->props([
                'props' => [
                    'value' => 'id',
                    'label' => 'name',
                    'checkStrictly' => true
                ],
            ])->style(['width' => '100%']),

            Search::label('开始时间')->startAt('请选择开始时间'),
            Search::label('结束时间')->endAt(),
            Search::label('报名人')->text('nickname', ''),
            Search::label('手机号')->text('phone', ''),
            Search::label('活动列表')->select('huodongid','',\catchAdmin\zc2\model\Huodong::where('status',1)->field(['id as value','title as label'])->select()->toArray())
        ])
	最终: 图1 

在这里插入图片描述

	最终: 图2

在这里插入图片描述

3 - 案例3

            ->withSearch([
            Search::label('选择状态')->radio('shenhe', EnumGoodsShenhe::getTagLabel())->value('')->button(),

            Search::label('开始时间')->startAt(),
            Search::label('结束时间')->endAt(),

            Search::label('到期时间排序')->radio('sort', [
                ['label' => '临近到期',
                    'value' => 1],
                ['label' => '倒排',
                    'value' => 2]
            ])->value('1')->button(),

            Search::label('是否过期选择')->radio('status', [
                ['label' => '已过期',
                    'value' => 1],
                ['label' => '未过期',
                    'value' => 0]
            ])->value(0)->button()
        ])
其中: 枚举类:

				class EnumGoodsShenhe extends EnumCommon
				{
				
				    const SHEN_HE = 1;
				    const UN_SHEN_HE = 0;
				    const FAIL_SHEN_HE = 2;
				    const REFUND = -1;
				
				    public static function getTagLabel(): array
				    {
				        return [
				            ['label' => '审核中', 'value' => 0, 'type' => 'primary'],
				            ['label' => '已通过', 'value' => 1, 'type' => 'success'],
				            ['label' => '已拒绝', 'value' => 2, 'type' => 'danger'],
				            ['label' => '退款', 'value' => -1, 'type' => 'danger']
				        ];
				    }
				
				}
		效果:

在这里插入图片描述

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值