amis 单个页面多个table实例

效果

amis-1.png amis-2.png

代码

{
  "type": "page",
  "title": "提现列表",
  "body": {
    "type": "crud",
    "name": "wp",
    "api": {
      "url": "api/withdraw/list"
    },
    "defaultParams": {
      "pagesize": 20,
      "with": "id"
    },
    "headerToolbar": [
      {
        "type": "columns-toggler",
        "align": "left"
      },
      {
        "type": "tpl",
        "tpl": "当前有 ${count} 条数据",
        "align": "right",
        "className": "v-middle"
      }
    ],
    "footable": {
      "expand": "first"
    },
    "filter": {
      "title": "条件搜索",
      "submitText": "",
      "controls": [
        {
          "name": "id",
          "type": "text",
          "placeholder": "按照UID搜索",
          "value": ""
        },
        {
          "type": "select",
          "labelClassName": "text-muted",
          "name": "status",
          "value": "",
          "source": {
            "url": "api/const/WithdrawStatus",
            "adaptor": "constName2options"
          }
        },
        {
          "type": "date",
          "name": "date",
          "format": "YYYY-MM-DD",
          "inline": true
        },
        {
          "label": "搜索",
          "type": "submit"
        },
        {
          "type": "reset",
          "level": "danger",
          "label": "重置"
        }
      ]
    },
    "columns": [
      {
        "name": "id",
        "label": "ID",
        "sortable": true,
        "type": "text",
        "popOver": {
          "className": "withdrawIdShow",
          "body": {
            "type": "tpl",
            "tpl": "${withdrawId}"
          }
        }
      },
      {
        "name": "user.nickname",
        "label": "提现用户",
        "type": "tpl",
        "tpl": "${user.nickname} (uid=${userId})"
      },
      {
        "name": "user.phone",
        "label": "联系电话",
        "type": "text"
      },
      {
        "name": "money",
        "label": "提现金额",
        "type": "text"
      },
      {
        "name": "createdAt",
        "label": "申请时间",
        "type": "text"
      },
      {
        "name": "checkedAt",
        "label": "审核时间",
        "type": "text"
      },
      {
        "name": "status.label",
        "label": "提现状态",
        "type": "text"
      },
      {
        "label": "操作",
        "className": "w-sm",
        "sortable": false,
        "type": "button-group",
        "buttons": [
          {
            "label": "审核",
            "level": "danger",
            "visibleOn": "this.status.value==0",
            "type": "button",
            "actionType": "dialog",
            "dialog": {
              "size": "lg",
              "data": {
                "curUserId": "${userId}",
                "withdrawId": "${eid}"
              },
              "title": "审核",
              "actions": [
                {
                  "type": "button",
                  "actionType": "ajax",
                  "reload": "wp",
                  "close": true,
                  "api": "post:api/withdraw/${withdrawId}/check?status=ING",
                  "label": "通过"
                },
                {
                  "type": "button",
                  "actionType": "ajax",
                  "reload": "wp",
                  "confirmText": "确认审核不通过？",
                  "api": "post:api/withdraw/${withdrawId}/check?status=FAILED",
                  "close": true,
                  "level": "danger",
                  "label": "不通过"
                }
              ],
              "body": [
                {
                  "type": "service",
                  "api": "api/credit/${curUserId}/latest",
                  "body": {
                    "type": "table",
                    "title": "最近流水记录",
                    "columns": [
                      {
                        "name": "createdAt",
                        "label": "时间"
                      },
                      {
                        "name": "creditType.label",
                        "label": "类型"
                      },
                      {
                        "name": "amount",
                        "label": "金额"
                      }
                    ]
                  }
                }
              ]
            }
          },
          {
            "label": "返还积分",
            "visibleOn": "this.status.value==-1",
            "type": "button",
            "level": "success",
            "actionType": "ajax",
            "confirmText": "确认返还积分？",
            "api": "post:api/withdraw/${eid}/refund"
          },
          {
            "label": "提现通过",
            "visibleOn": "this.status.value==-1",
            "type": "button",
            "level": "success",
            "actionType": "ajax",
            "confirmText": "确认提现通过？",
            "api": "post:api/withdraw/${eid}/check?status=ING"
          }
        ]
      }
    ]
  }
}