protected function confirmOrder()
    {
        //创建点击弹出抽屉的按钮。
        return amisMake()->DrawerAction()->label('准备工作')->level('link')->align('left')->drawer(
           //按钮触发的抽屉
            Drawer::make()->position('left')->title('需要确认以下内容')
                ->closeOnOutside()->closeOnEsc()->body([
                    //抽屉的内容，因为table不能加载数据，所以使用service组件包裹以下
                    amisMake()->Service()->api('confirmOrder?id=${id}')//请求地址，返回数据格式见下文
                        ->body([
                            amisMake()->Table()->title('物料信息')->affixHeader()
                                ->source('$sppgoods')
                                ->columns([
                                        amisMake()->TableColumn('goods_id', '物料')->type('mapping')
                                            ->valueField('id')->labelField('name')//设置这个之后，labelfield 配置后，这个值在 itemSchema 中就不生效了，不过目前测试可以显示，不知道怎么回事
                                            ->itemSchema(['type' => 'tag', 'label' => '${id} ${name}'])
                                            ->source('${goods}'),
//                                    ),
                                        TableColumn::make()->name('num')->label('数量'),
                                    ]
                                ),
                            amisMake()->Table()->title('人员信息')
                                ->source('${spus}')
                                ->columns(...),
                            amisMake()->Table()->data(['items'=>'${demodata}'])
                                ->columns([['name' => 'id', 'label' => 'Id',],
                                    amisMake()->Mapping()->name('type')->label('映射')
                                        ->map([
                                            '1' => '<span class=\'label label-info\'>漂亮</span>',
                                            '2' => '<span class=\'label label-success\'>开心</span>',
                                            '3' => '<span class=\'label label-danger\'>惊吓</span>',
                                            '4' => '<span class=\'label label-warning\'>紧张</span>',
                                            '*' => '其他：${type}',
                                        ]),
                                ])
                        ]),
                ]
            )
        );Copy

{
    "data": {
        "sppgoods": [
            {
                "goods_id": 1,
                "num": 3
            },
            {
                "goods_id": 2,
                "num": 1
            },
            {
                "goods_id": 3,
                "num": 10
            }
        ],
        "goods": [
            {
                "id": 1,
                "name": "服装",
                "code": "fz888555"
            },
            {
                "id": 2,
                "name": "礼物",
                "code": "m111"
            },
            {
                "id": 3,
                "name": "拼图",
                "code": "pt0001"
            }
        ],
        "demodata": [
            {
                "type": 1,
                "id": "1"
            },
            {
                "type": "2",
                "id": 2
            },
            {
                "type": 3,
                "id": 3
            }
        ]
    }
}Copy

本文章首发在 LearnKu.com 网站上。